Genarrative/src/components/image-editor/ImageCanvasEditorModel.ts

import type {
  EditorAssetLibrarySnapshot,
  EditorProjectLayerSnapshot,
} from '../../services/image-editor/editorProjectClient';
import type {
  CanvasAssetKind,
  CanvasGenerationInputs,
  CanvasLayer,
  CanvasContextMenuState,
  CanvasViewport,
  EditorAsset,
  EditorAssetFolder,
  SnapCandidate,
} from './ImageCanvasEditorTypes';

export const EDITOR_ASSET_FOLDERS: EditorAssetFolder[] = [
  {
    id: 'project',
    label: '项目素材',
    collapsed: false,
    systemDefault: true,
    persisted: false,
  },
];

export const CANVAS_WORLD_SIZE = 12000;
export const CANVAS_WORLD_ORIGIN = CANVAS_WORLD_SIZE / 2;
export const MIN_SCALE = 0.24;
export const MAX_SCALE = 3.2;
export const TOOLBAR_HALF_WIDTH = 132;
export const DEFAULT_CANVAS_SIZE = { width: 900, height: 640 };
export const SNAP_THRESHOLD_SCREEN_PX = 18;
export const FIT_VIEW_PADDING = 10;
export const MINIMAP_SIZE = { width: 132, height: 84 };
export const MINIMAP_PADDING = 8;
export const MINIMAP_DRAG_SENSITIVITY = 0.3;
export const ASSET_DRAG_MIME_TYPE = 'application/x-genarrative-editor-asset';
export const MAX_HISTORY_STEPS = 60;
export const CONTEXT_MENU_VIEWPORT_MARGIN = 8;
export const CONTEXT_MENU_SIZE = {
  blank: { width: 188, height: 176 },
  layer: { width: 188, height: 492 },
} as const;
export const CANVAS_BACKGROUND_OPTIONS = [
  { label: '白色', value: '#ffffff' },
  { label: '浅灰', value: '#f8fafc' },
  { label: '暖灰', value: '#f3f0ea' },
  { label: '冷蓝', value: '#eef6ff' },
];
export const DEFAULT_CANVAS_BACKGROUND_COLOR = '#f8fafc';

export function normalizeCanvasBackgroundHex(value: string) {
  const trimmedValue = value.trim().toLowerCase();
  const match = /^#([0-9a-f]{3}|[0-9a-f]{6})$/u.exec(trimmedValue);
  if (!match) {
    return null;
  }
  const hexValue = match[1] ?? '';
  if (hexValue.length === 3) {
    return `#${hexValue
      .split('')
      .map((part) => `${part}${part}`)
      .join('')}`;
  }
  return `#${hexValue}`;
}

export function clamp(value: number, min: number, max: number) {
  return Math.min(max, Math.max(min, value));
}

export function formatPercent(value: number) {
  return `${Math.round(value * 100)}%`;
}

export function formatImageSizeValue(width: number, height: number) {
  const safeWidth = Math.max(1, Math.round(width || 1024));
  const safeHeight = Math.max(1, Math.round(height || 1024));
  return `${safeWidth}x${safeHeight}`;
}

export function resolveLayerResolutionSize(
  originalWidth: number,
  originalHeight: number,
  fallback: { width: number; height: number },
) {
  // 中文注释：画布不再维护独立展示 Size，图片显示尺寸统一跟随图片原始 Resolution。
  return {
    width: Math.max(1, Math.round(originalWidth || fallback.width || 1)),
    height: Math.max(1, Math.round(originalHeight || fallback.height || 1)),
  };
}

export function createLayerFromAsset(
  asset: EditorAsset,
  index: number,
  viewport: CanvasViewport,
  screenCenter: { x: number; y: number },
): CanvasLayer {
  const { width, height } = resolveLayerResolutionSize(
    asset.width,
    asset.height,
    { width: 360, height: 360 },
  );
  const safeScale = viewport.scale > 0 ? viewport.scale : 1;
  const safeScreenCenter = {
    x: Number.isFinite(screenCenter.x) ? screenCenter.x : 0,
    y: Number.isFinite(screenCenter.y) ? screenCenter.y : 0,
  };
  const worldCenterX = (safeScreenCenter.x - viewport.x) / safeScale;
  const worldCenterY = (safeScreenCenter.y - viewport.y) / safeScale;
  const offset = index * 34;

  return {
    id: `layer-${asset.id}-${index}`,
    resourceId: `local-resource-${asset.id}-${index}`,
    title: asset.label,
    src: asset.src,
    x: worldCenterX - width / 2 + offset,
    y: worldCenterY - height / 2 + offset,
    width,
    height,
    originalWidth: asset.width,
    originalHeight: asset.height,
    zIndex: index + 10,
    sourceType: asset.sourceType,
    prompt: asset.prompt,
    actualPrompt: asset.actualPrompt,
    model: asset.model,
    provider: asset.provider,
    taskId: asset.taskId,
    objectKey: asset.objectKey,
    assetObjectId: asset.assetObjectId,
    sourceAssetId: asset.id,
  } satisfies CanvasLayer;
}

export function serializeLayer(
  layer: CanvasLayer,
): EditorProjectLayerSnapshot {
  return {
    layerId: layer.id,
    resourceId: layer.resourceId,
    title: layer.title,
    x: layer.x,
    y: layer.y,
    width: layer.width,
    height: layer.height,
    originalWidth: layer.originalWidth,
    originalHeight: layer.originalHeight,
    zIndex: layer.zIndex,
    sourceType: layer.sourceType,
    prompt: layer.prompt,
    actualPrompt: layer.actualPrompt,
    model: layer.model,
    provider: layer.provider,
    taskId: layer.taskId,
    objectKey: layer.objectKey,
    assetObjectId: layer.assetObjectId,
    sourceResourceId: layer.sourceResourceId,
    sourceAssetId: layer.sourceAssetId,
    groupId: layer.groupId,
    assetKind: layer.assetKind,
    generationInputs: layer.generationInputs,
    hidden: layer.hidden,
    locked: layer.locked,
    flipX: layer.flipX,
    flipY: layer.flipY,
  };
}

export function hydrateLayer(
  snapshot: EditorProjectLayerSnapshot,
  resourcesById: Map<string, { imageSrc: string }>,
): CanvasLayer | null {
  const resourceId =
    typeof snapshot.resourceId === 'string' ? snapshot.resourceId : '';
  const layerId = typeof snapshot.layerId === 'string' ? snapshot.layerId : '';
  const snapshotSrc = typeof snapshot.src === 'string' ? snapshot.src : '';
  const src = snapshotSrc || resourcesById.get(resourceId)?.imageSrc || '';
  const title =
    typeof snapshot.title === 'string' ? snapshot.title : '画布图片';
  if (!resourceId || !layerId || !src) {
    return null;
  }

  return {
    id: layerId,
    resourceId,
    title,
    src,
    x: numberFromSnapshot(snapshot.x, 0),
    y: numberFromSnapshot(snapshot.y, 0),
    ...(() => {
      const originalWidth = numberFromSnapshot(snapshot.originalWidth, 320);
      const originalHeight = numberFromSnapshot(snapshot.originalHeight, 320);
      return {
        ...resolveLayerResolutionSize(originalWidth, originalHeight, {
          width: numberFromSnapshot(snapshot.width, 320),
          height: numberFromSnapshot(snapshot.height, 320),
        }),
        originalWidth,
        originalHeight,
      };
    })(),
    zIndex: numberFromSnapshot(snapshot.zIndex, 1),
    sourceType: isCanvasSourceType(snapshot.sourceType)
      ? snapshot.sourceType
      : 'uploaded',
    prompt: stringOrNull(snapshot.prompt),
    actualPrompt: stringOrNull(snapshot.actualPrompt),
    model: stringOrNull(snapshot.model),
    provider: stringOrNull(snapshot.provider),
    taskId: stringOrNull(snapshot.taskId),
    objectKey: stringOrNull(snapshot.objectKey),
    assetObjectId: stringOrNull(snapshot.assetObjectId),
    sourceResourceId: stringOrNull(snapshot.sourceResourceId),
    sourceAssetId: stringOrNull(snapshot.sourceAssetId),
    groupId: stringOrNull(snapshot.groupId),
    assetKind: canvasAssetKindOrNull(snapshot.assetKind),
    generationInputs: generationInputsOrNull(snapshot.generationInputs),
    hidden: booleanFromSnapshot(snapshot.hidden),
    locked: booleanFromSnapshot(snapshot.locked),
    flipX: booleanFromSnapshot(snapshot.flipX),
    flipY: booleanFromSnapshot(snapshot.flipY),
  };
}

export function mapAssetLibrarySnapshot(
  library: EditorAssetLibrarySnapshot,
): {
  folders: EditorAssetFolder[];
  assets: EditorAsset[];
} {
  return {
    folders: library.folders.map((folder) => ({
      id: folder.folderId,
      label: folder.label,
      collapsed: folder.collapsed,
      systemDefault: folder.systemDefault,
      persisted: true,
    })),
    assets: library.assets.map((asset) => ({
      id: asset.assetId,
      label: asset.label,
      src: asset.imageSrc,
      width: asset.width,
      height: asset.height,
      folderId: asset.folderId,
      sourceKind: 'uploaded',
      sourceType: asset.sourceType,
      persisted: true,
      prompt: asset.prompt ?? undefined,
      actualPrompt: asset.actualPrompt ?? undefined,
      model: asset.model ?? undefined,
      provider: asset.provider ?? undefined,
      taskId: asset.taskId ?? undefined,
      objectKey: asset.objectKey ?? undefined,
      assetObjectId: asset.assetObjectId ?? undefined,
    })),
  };
}

export function normalizeAssetLibrary(library: EditorAssetLibrarySnapshot) {
  const mapped = mapAssetLibrarySnapshot(library);
  let hasDefaultFolder = false;
  const normalizedFolders = mapped.folders.filter((folder) => {
    if (!folder.systemDefault) {
      return true;
    }
    if (hasDefaultFolder) {
      return false;
    }
    hasDefaultFolder = true;
    return true;
  });
  const persistedFolderIds = new Set(
    normalizedFolders.map((folder) => folder.id),
  );
  const fallbackFolders = hasDefaultFolder
    ? []
    : EDITOR_ASSET_FOLDERS.filter(
        (folder) => !persistedFolderIds.has(folder.id),
      );
  return {
    folders: [...normalizedFolders, ...fallbackFolders],
    assets: mapped.assets,
  };
}

export function numberFromSnapshot(value: unknown, fallback: number) {
  return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
}

export function stringOrNull(value: unknown) {
  return typeof value === 'string' && value.trim() ? value : null;
}

export function booleanFromSnapshot(value: unknown) {
  return value === true;
}

export function resolveContextMenuPosition(
  clientX: number,
  clientY: number,
  kind: CanvasContextMenuState['kind'],
) {
  if (typeof window === 'undefined') {
    return { x: clientX, y: clientY };
  }
  const menuSize = CONTEXT_MENU_SIZE[kind];
  return {
    x: clamp(
      clientX,
      CONTEXT_MENU_VIEWPORT_MARGIN,
      Math.max(
        CONTEXT_MENU_VIEWPORT_MARGIN,
        window.innerWidth - menuSize.width - CONTEXT_MENU_VIEWPORT_MARGIN,
      ),
    ),
    y: clamp(
      clientY,
      CONTEXT_MENU_VIEWPORT_MARGIN,
      Math.max(
        CONTEXT_MENU_VIEWPORT_MARGIN,
        window.innerHeight - menuSize.height - CONTEXT_MENU_VIEWPORT_MARGIN,
      ),
    ),
  };
}

export function hasDataTransferType(
  dataTransfer: DataTransfer,
  type: string,
) {
  return Array.from(dataTransfer.types).includes(type);
}

export function getDraggedAssetId(dataTransfer: DataTransfer) {
  if (typeof dataTransfer.getData !== 'function') {
    return '';
  }
  if (!hasDataTransferType(dataTransfer, ASSET_DRAG_MIME_TYPE)) {
    return '';
  }
  return dataTransfer.getData(ASSET_DRAG_MIME_TYPE);
}

export function escapeCssIdentifier(value: string) {
  return typeof CSS !== 'undefined' && typeof CSS.escape === 'function'
    ? CSS.escape(value)
    : value.replace(/["\\]/gu, '\\$&');
}

export function isLayerLinkedToAsset(layer: CanvasLayer, asset: EditorAsset) {
  return (
    layer.sourceAssetId === asset.id ||
    Boolean(asset.assetObjectId && layer.assetObjectId === asset.assetObjectId) ||
    Boolean(asset.objectKey && layer.objectKey === asset.objectKey) ||
    layer.src === asset.src
  );
}

export function generationInputsOrNull(
  value: unknown,
): CanvasGenerationInputs | null {
  if (!value || typeof value !== 'object') {
    return null;
  }
  const snapshot = value as {
    fields?: unknown;
    references?: unknown;
  };
  const fields = Array.isArray(snapshot.fields)
    ? snapshot.fields.flatMap((field) => {
        if (!field || typeof field !== 'object') {
          return [];
        }
        const item = field as { title?: unknown; value?: unknown };
        const title = stringOrNull(item.title);
        const fieldValue = stringOrNull(item.value);
        return title && fieldValue ? [{ title, value: fieldValue }] : [];
      })
    : [];
  const references = Array.isArray(snapshot.references)
    ? snapshot.references.flatMap((reference) => {
        if (!reference || typeof reference !== 'object') {
          return [];
        }
        const item = reference as {
          title?: unknown;
          label?: unknown;
          src?: unknown;
        };
        const title = stringOrNull(item.title);
        const label = stringOrNull(item.label);
        const src = stringOrNull(item.src);
        return title && label && src ? [{ title, label, src }] : [];
      })
    : [];

  return fields.length || references.length ? { fields, references } : null;
}

export function canvasAssetKindOrNull(value: unknown): CanvasAssetKind | null {
  return value === 'spec' ||
    value === 'character' ||
    value === 'icon' ||
    value === 'icon-spec'
    ? value
    : null;
}

export function isCanvasSourceType(
  value: unknown,
): value is CanvasLayer['sourceType'] {
  return (
    value === 'uploaded' || value === 'generated' || value === 'mock_generated'
  );
}

export function isGeneratedLayer(layer: CanvasLayer) {
  return (
    layer.sourceType === 'generated' || layer.sourceType === 'mock_generated'
  );
}

export function getLayerBounds(targetLayers: CanvasLayer[]) {
  if (targetLayers.length === 0) {
    return null;
  }

  return targetLayers.reduce(
    (current, layer) => ({
      minX: Math.min(current.minX, layer.x),
      minY: Math.min(current.minY, layer.y),
      maxX: Math.max(current.maxX, layer.x + layer.width),
      maxY: Math.max(current.maxY, layer.y + layer.height),
    }),
    {
      minX: Number.POSITIVE_INFINITY,
      minY: Number.POSITIVE_INFINITY,
      maxX: Number.NEGATIVE_INFINITY,
      maxY: Number.NEGATIVE_INFINITY,
    },
  );
}

export function resolveSnappedLayerPosition(
  movingLayer: CanvasLayer,
  proposedX: number,
  proposedY: number,
  layers: CanvasLayer[],
  scale: number,
) {
  const threshold = SNAP_THRESHOLD_SCREEN_PX / Math.max(scale, MIN_SCALE);
  const verticalTargets = [
    0,
    CANVAS_WORLD_ORIGIN,
    ...layers
      .filter((layer) => layer.id !== movingLayer.id)
      .flatMap((layer) => [
        layer.x,
        layer.x + layer.width / 2,
        layer.x + layer.width,
      ]),
  ];
  const horizontalTargets = [
    0,
    CANVAS_WORLD_ORIGIN,
    ...layers
      .filter((layer) => layer.id !== movingLayer.id)
      .flatMap((layer) => [
        layer.y,
        layer.y + layer.height / 2,
        layer.y + layer.height,
      ]),
  ];

  const xSnap = findNearestSnap(
    proposedX,
    [0, movingLayer.width / 2, movingLayer.width],
    verticalTargets,
    threshold,
  );
  const ySnap = findNearestSnap(
    proposedY,
    [0, movingLayer.height / 2, movingLayer.height],
    horizontalTargets,
    threshold,
  );

  return {
    x: xSnap ? xSnap.position : proposedX,
    y: ySnap ? ySnap.position : proposedY,
    guide:
      xSnap || ySnap
        ? {
            vertical: xSnap?.guide,
            horizontal: ySnap?.guide,
          }
        : null,
  };
}

export function findNearestSnap(
  origin: number,
  offsets: number[],
  targets: number[],
  threshold: number,
): SnapCandidate | null {
  let nearest: SnapCandidate | null = null;
  for (const offset of offsets) {
    for (const target of targets) {
      const distance = Math.abs(target - (origin + offset));
      if (distance > threshold) {
        continue;
      }
      if (!nearest || distance < nearest.distance) {
        nearest = {
          position: target - offset,
          guide: target,
          distance,
        };
      }
    }
  }
  return nearest;
}