Genarrative/src/components/image-editor/ImageCanvasWorldView.tsx

import {
  AppWindow,
  Clapperboard,
  ClipboardList,
  Grid2X2,
  ImageIcon,
  Info,
  Megaphone,
  Music,
  Pause,
  Play,
  PersonStanding,
  Sparkles,
  UserRound,
  Volume2,
  VolumeX,
} from 'lucide-react';
import { useEffect, useMemo, useRef, useState } from 'react';
import type {
  CSSProperties,
  KeyboardEvent as ReactKeyboardEvent,
  MouseEvent as ReactMouseEvent,
  PointerEvent as ReactPointerEvent,
} from 'react';

import { useResolvedAssetReadUrl } from '../../hooks/useResolvedAssetReadUrl';
import {
  PlatformFloatingMenu,
  PlatformFloatingMenuItem,
} from '../common/PlatformFloatingMenu';
import { PlatformIconButton } from '../common/PlatformIconButton';
import { PlatformPillBadge } from '../common/PlatformPillBadge';
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
import { CANVAS_WORLD_SIZE } from './ImageCanvasEditorModel';
import type {
  CanvasAssetKind,
  CanvasGenerationDialogState,
  CanvasLayer,
  CanvasMarqueeState,
  CanvasViewport,
  CropExpandPanelState,
  CropExpandResizeHandle,
  GenerateDialogState,
  SnapGuide,
} from './ImageCanvasEditorTypes';
import {
  getGenerationFrameAriaLabel,
  getGenerationFrameLabel,
} from './ImageCanvasGenerationModel';
import {
  getCanvasMediaPreviewClassName,
  getCanvasMediaPreviewMarker,
} from './ImageCanvasMediaModel';
import { getCanvasGenerationSelectionId } from './ImageCanvasSelectionModel';

function getGenerationPlaceholderMeta(dialog: CanvasGenerationDialogState) {
  switch (dialog.mode) {
    case 'character':
      return {
        frameClassName: 'image-canvas-editor__generation-frame--character',
        badgeClassName: 'character',
        badgeLabel: '角色',
        icon: <UserRound className="h-8 w-8" />,
        labelIcon: <UserRound className="h-4 w-4" />,
      };
    case 'character-animation':
      return {
        frameClassName:
          'image-canvas-editor__generation-frame--character-animation',
        badgeClassName: 'character-animation',
        badgeLabel: '动作',
        icon: <PersonStanding className="h-8 w-8" />,
        labelIcon: <PersonStanding className="h-4 w-4" />,
      };
    case 'spec':
      return {
        frameClassName: 'image-canvas-editor__generation-frame--spec',
        badgeClassName: 'spec',
        badgeLabel: '规范',
        icon: <ClipboardList className="h-8 w-8" />,
        labelIcon: <ClipboardList className="h-4 w-4" />,
      };
    case 'icon':
      return {
        frameClassName: 'image-canvas-editor__generation-frame--icon',
        badgeClassName: 'icon',
        badgeLabel: '图标',
        icon: <Grid2X2 className="h-8 w-8" />,
        labelIcon: <Grid2X2 className="h-4 w-4" />,
      };
    case 'ui-design':
      return {
        frameClassName: 'image-canvas-editor__generation-frame--ui-design',
        badgeClassName: 'ui-design',
        badgeLabel: 'UI设计',
        icon: <AppWindow className="h-8 w-8" />,
        labelIcon: <AppWindow className="h-4 w-4" />,
      };
    case 'quick-edit':
      return {
        frameClassName: 'image-canvas-editor__generation-frame--quick-edit',
        badgeClassName: 'quick-edit',
        badgeLabel: '快编',
        icon: <Sparkles className="h-8 w-8" />,
        labelIcon: <Sparkles className="h-4 w-4" />,
      };
    case 'publication':
      return {
        frameClassName: 'image-canvas-editor__generation-frame--publication',
        badgeClassName: 'publication',
        badgeLabel: '宣发',
        icon: <Megaphone className="h-8 w-8" />,
        labelIcon: <Megaphone className="h-4 w-4" />,
      };
    case 'video':
      return {
        frameClassName: 'image-canvas-editor__generation-frame--video',
        badgeClassName: 'video',
        badgeLabel: '视频',
        icon: <Clapperboard className="h-8 w-8" />,
        labelIcon: <Clapperboard className="h-4 w-4" />,
      };
    case 'audio-sound-effect':
      return {
        frameClassName:
          'image-canvas-editor__generation-frame--audio-sound-effect',
        badgeClassName: 'sound-effect',
        badgeLabel: '音效',
        icon: <Volume2 className="h-8 w-8" />,
        labelIcon: <Volume2 className="h-4 w-4" />,
      };
    case 'audio-background-music':
      return {
        frameClassName:
          'image-canvas-editor__generation-frame--audio-background-music',
        badgeClassName: 'background-music',
        badgeLabel: '背景音乐',
        icon: <Music className="h-8 w-8" />,
        labelIcon: <Music className="h-4 w-4" />,
      };
    default:
      return {
        frameClassName: '',
        badgeClassName: null,
        badgeLabel: null,
        icon: <ImageIcon className="h-8 w-8" />,
        labelIcon: <ImageIcon className="h-4 w-4" />,
      };
  }
}

function getInverseViewportScale(viewport: CanvasViewport) {
  if (!Number.isFinite(viewport.scale) || viewport.scale <= 0) {
    return 1;
  }
  return 1 / viewport.scale;
}

function buildInverseScaleStyle(
  inverseScale: number,
): CSSProperties & Record<string, string> {
  return {
    '--image-canvas-editor-inverse-scale': String(inverseScale),
    '--image-canvas-editor-corner-offset': `calc(0.35rem * ${inverseScale})`,
    '--image-canvas-editor-kind-offset': `calc(0.38rem * ${inverseScale})`,
    '--image-canvas-editor-beside-kind-offset': `calc(1.95rem * ${inverseScale})`,
    '--image-canvas-editor-frame-label-offset': `calc(-1.35rem * ${inverseScale})`,
  };
}

const CANVAS_ASSET_KIND_TAG_OPTIONS: Array<{
  value: CanvasAssetKind | null;
  label: string;
  className: string;
}> = [
  { value: null, label: '未知', className: 'unknown' },
  { value: 'spec', label: '规范', className: 'spec' },
  { value: 'character', label: '角色', className: 'character' },
  {
    value: 'character-animation',
    label: '动作',
    className: 'character-animation',
  },
  { value: 'icon', label: '图标', className: 'icon' },
  { value: 'icon-spritesheet', label: '图集', className: 'icon-spritesheet' },
  { value: 'icon-spec', label: '图标规范', className: 'icon-spec' },
  {
    value: 'publication-material',
    label: '宣发素材',
    className: 'publication-material',
  },
  { value: 'ui-design', label: 'UI设计', className: 'ui-design' },
  { value: 'video', label: '视频', className: 'video' },
  { value: 'sound-effect', label: '音效', className: 'sound-effect' },
  {
    value: 'background-music',
    label: '背景音乐',
    className: 'background-music',
  },
];

const UNKNOWN_ASSET_KIND_TAG_OPTION = CANVAS_ASSET_KIND_TAG_OPTIONS[0] as {
  value: null;
  label: string;
  className: string;
};

function getLayerKindTagMeta(layer: CanvasLayer) {
  const knownKind = layer.assetKind
    ? CANVAS_ASSET_KIND_TAG_OPTIONS.find(
        (option) => option.value === layer.assetKind,
      )
    : null;
  if (knownKind) {
    return knownKind;
  }
  return UNKNOWN_ASSET_KIND_TAG_OPTION;
}

export type ImageCanvasWorldViewProps = {
  viewport: CanvasViewport;
  snapGuide: SnapGuide | null;
  layers: CanvasLayer[];
  selectedLayerIds: string[];
  hoveredLayerId: string | null;
  canvasMarquee: CanvasMarqueeState | null;
  canvasGenerationDialogs: CanvasGenerationDialogState[];
  generateDialog: GenerateDialogState | null;
  cropExpandPanel: CropExpandPanelState | null;
  cropExpandSourceLayer: CanvasLayer | null;
  generationComposerStyle: CSSProperties | null;
  onLayerPointerDown: (
    event: ReactPointerEvent<HTMLElement>,
    layer: CanvasLayer,
  ) => void;
  onLayerClick: (
    event: ReactMouseEvent<HTMLElement>,
    layer: CanvasLayer,
  ) => void;
  onSelectLayer: (layerId: string | null) => void;
  onLayerContextMenu: (
    event: ReactMouseEvent<HTMLElement>,
    layer: CanvasLayer,
  ) => void;
  onLayerMouseEnter: (layerId: string) => void;
  onLayerMouseLeave: (layerId: string) => void;
  onOpenLayerMetadata: (layer: CanvasLayer) => void;
  onUpdateLayerAssetKind: (
    layerId: string,
    assetKind: CanvasAssetKind | null,
  ) => void;
  onGenerationFramePointerDown: (
    event: ReactPointerEvent<HTMLDivElement>,
    dialog: CanvasGenerationDialogState,
  ) => void;
  onActivateGenerationDialog: (dialog: CanvasGenerationDialogState) => void;
  onCropExpandHandlePointerDown: (
    event: ReactPointerEvent<HTMLButtonElement>,
    handle: CropExpandResizeHandle,
  ) => void;
};

const CROP_EXPAND_HANDLES: Array<{
  value: CropExpandResizeHandle;
  label: string;
}> = [
  { value: 'top-left', label: '左上角' },
  { value: 'top', label: '上边' },
  { value: 'top-right', label: '右上角' },
  { value: 'right', label: '右边' },
  { value: 'bottom-right', label: '右下角' },
  { value: 'bottom', label: '下边' },
  { value: 'bottom-left', label: '左下角' },
  { value: 'left', label: '左边' },
];

function stopMediaEventPropagation(
  event: ReactMouseEvent<HTMLElement> | ReactPointerEvent<HTMLElement>,
) {
  event.stopPropagation();
}

function selectMediaLayerWithoutDrag(
  event: ReactPointerEvent<HTMLElement>,
  onSelectLayer: () => void,
) {
  event.stopPropagation();
  onSelectLayer();
}

function handleLayerKeyboardActivation(
  event: ReactKeyboardEvent<HTMLElement>,
) {
  if (event.key !== 'Enter' && event.key !== ' ') {
    return;
  }
  event.preventDefault();
  event.currentTarget.click();
}

function handleLayerTagKeyboardActivation(
  event: ReactKeyboardEvent<HTMLElement>,
) {
  if (event.key !== 'Enter' && event.key !== ' ') {
    return;
  }
  event.preventDefault();
  event.stopPropagation();
  event.currentTarget.click();
}

function stopMediaControlKeyPropagation(
  event: ReactKeyboardEvent<HTMLElement>,
) {
  if (event.key === 'Backspace' || event.key === 'Delete') {
    return;
  }
  event.stopPropagation();
}

function getLayerMetricLabel(layer: CanvasLayer) {
  return `${Math.round(layer.originalWidth)} x ${Math.round(
    layer.originalHeight,
  )} px`;
}

function getAudioLayerIcon(layer: CanvasLayer) {
  return layer.assetKind === 'background-music' ? (
    <Music className="h-8 w-8" aria-hidden="true" />
  ) : (
    <Volume2 className="h-8 w-8" aria-hidden="true" />
  );
}

function getAudioDurationSeconds(durationSeconds: CanvasLayer['durationSeconds']) {
  return typeof durationSeconds === 'number' &&
    Number.isFinite(durationSeconds) &&
    durationSeconds > 0
    ? durationSeconds
    : 0;
}

function formatAudioControlTime(seconds: number) {
  if (!Number.isFinite(seconds) || seconds <= 0) {
    return '0:00';
  }
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = Math.floor(seconds % 60)
    .toString()
    .padStart(2, '0');
  return `${minutes}:${remainingSeconds}`;
}

function ImageCanvasAudioLayerCard({
  layer,
  isHovered,
  onSelectLayer,
}: {
  layer: CanvasLayer;
  isHovered: boolean;
  onSelectLayer: () => void;
}) {
  const audioRef = useRef<HTMLAudioElement | null>(null);
  const previewClassName = getCanvasMediaPreviewClassName(
    getCanvasMediaPreviewMarker(layer),
  );
  const [isPlaying, setIsPlaying] = useState(false);
  const { resolvedUrl } = useResolvedAssetReadUrl(layer.src, {
    objectKey: layer.objectKey,
    refreshKey: layer.taskId ?? layer.resourceId,
  });
  const prompt = layer.prompt?.trim();
  const fallbackDuration = getAudioDurationSeconds(layer.durationSeconds);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(fallbackDuration);
  const [volume, setVolume] = useState(1);
  const [isMuted, setIsMuted] = useState(false);
  const showPlaybackButton = isPlaying || isHovered;
  const controlDuration = duration > 0 ? duration : fallbackDuration;
  const safeCurrentTime =
    controlDuration > 0 ? Math.min(currentTime, controlDuration) : 0;

  useEffect(() => {
    setIsPlaying(false);
    setCurrentTime(0);
    setDuration(fallbackDuration);
  }, [fallbackDuration, layer.src]);

  const togglePlayback = async () => {
    const audio = audioRef.current;
    if (!audio) {
      return;
    }
    if (isPlaying) {
      audio.pause();
      return;
    }
    try {
      await audio.play();
    } catch {
      setIsPlaying(false);
    }
  };

  const handleSeekChange = (nextValue: string) => {
    const nextTime = Number(nextValue);
    if (!Number.isFinite(nextTime)) {
      return;
    }
    const clampedTime =
      controlDuration > 0
        ? Math.min(Math.max(nextTime, 0), controlDuration)
        : Math.max(nextTime, 0);
    if (audioRef.current) {
      audioRef.current.currentTime = clampedTime;
    }
    setCurrentTime(clampedTime);
  };

  const handleVolumeChange = (nextValue: string) => {
    const nextVolume = Number(nextValue);
    if (!Number.isFinite(nextVolume)) {
      return;
    }
    const clampedVolume = Math.min(Math.max(nextVolume, 0), 1);
    if (audioRef.current) {
      audioRef.current.volume = clampedVolume;
      audioRef.current.muted = clampedVolume === 0;
    }
    setVolume(clampedVolume);
    setIsMuted(clampedVolume === 0);
  };

  const toggleMute = () => {
    const nextMuted = !isMuted;
    if (audioRef.current) {
      audioRef.current.muted = nextMuted;
    }
    setIsMuted(nextMuted);
  };

  return (
    <div
      className={`image-canvas-editor__audio-card ${previewClassName} ${
        isHovered ? 'image-canvas-editor__audio-card--controls-visible' : ''
      }`}
    >
      <button
        type="button"
        className="image-canvas-editor__audio-card-playback"
        aria-label={isPlaying ? `暂停${layer.title}` : `播放${layer.title}`}
        onClick={(event) => {
          event.stopPropagation();
          void togglePlayback();
        }}
        onPointerDown={(event) => selectMediaLayerWithoutDrag(event, onSelectLayer)}
      >
        {showPlaybackButton ? (
          isPlaying ? (
            <Pause className="h-8 w-8" aria-hidden="true" />
          ) : (
            <Play className="h-8 w-8" aria-hidden="true" />
          )
        ) : (
          getAudioLayerIcon(layer)
        )}
      </button>
      {prompt ? (
        <span className="image-canvas-editor__audio-card-title">{prompt}</span>
      ) : null}
      <div
        className="image-canvas-editor__audio-card-controls image-canvas-editor__audio-card-controls--integrated"
        onClick={stopMediaEventPropagation}
        onKeyDown={stopMediaControlKeyPropagation}
        onPointerDown={(event) => selectMediaLayerWithoutDrag(event, onSelectLayer)}
      >
        <audio
          ref={audioRef}
          className="image-canvas-editor__audio-card-native-control"
          src={resolvedUrl || undefined}
          preload="metadata"
          aria-label={`画布音频：${layer.title}`}
          onClick={stopMediaEventPropagation}
          onPointerDown={(event) => selectMediaLayerWithoutDrag(event, onSelectLayer)}
          onLoadedMetadata={(event) => {
            const nextDuration = event.currentTarget.duration;
            setDuration(
              Number.isFinite(nextDuration) && nextDuration > 0
                ? nextDuration
                : fallbackDuration,
            );
          }}
          onTimeUpdate={(event) => setCurrentTime(event.currentTarget.currentTime)}
          onVolumeChange={(event) => {
            setVolume(event.currentTarget.volume);
            setIsMuted(event.currentTarget.muted);
          }}
          onPlay={() => setIsPlaying(true)}
          onPause={() => setIsPlaying(false)}
          onEnded={() => setIsPlaying(false)}
        />
        <span className="image-canvas-editor__audio-card-time">
          {formatAudioControlTime(safeCurrentTime)}
        </span>
        <input
          type="range"
          className="image-canvas-editor__audio-card-progress"
          min="0"
          max={controlDuration || 0}
          step="0.1"
          value={safeCurrentTime}
          disabled={!controlDuration}
          aria-label={`调整${layer.title}播放进度`}
          onChange={(event) => handleSeekChange(event.currentTarget.value)}
        />
        <span className="image-canvas-editor__audio-card-time">
          {formatAudioControlTime(controlDuration)}
        </span>
        <button
          type="button"
          className="image-canvas-editor__audio-card-volume-toggle"
          aria-label={isMuted ? `恢复${layer.title}音量` : `静音${layer.title}`}
          onClick={(event) => {
            event.stopPropagation();
            toggleMute();
          }}
          onPointerDown={(event) => selectMediaLayerWithoutDrag(event, onSelectLayer)}
        >
          {isMuted ? (
            <VolumeX className="h-3.5 w-3.5" aria-hidden="true" />
          ) : (
            <Volume2 className="h-3.5 w-3.5" aria-hidden="true" />
          )}
        </button>
        <input
          type="range"
          className="image-canvas-editor__audio-card-volume"
          min="0"
          max="1"
          step="0.01"
          value={isMuted ? 0 : volume}
          aria-label={`调整${layer.title}音量`}
          onChange={(event) => handleVolumeChange(event.currentTarget.value)}
        />
      </div>
    </div>
  );
}

function ImageCanvasVideoLayer({
  layer,
  mediaTransform,
}: {
  layer: CanvasLayer;
  mediaTransform?: string;
}) {
  const { resolvedUrl } = useResolvedAssetReadUrl(layer.src, {
    objectKey: layer.objectKey,
    refreshKey: layer.taskId ?? layer.resourceId,
  });
  const [showGeneratedPreview, setShowGeneratedPreview] = useState(
    !layer.thumbnailSrc,
  );
  const previewClassName = getCanvasMediaPreviewClassName(
    getCanvasMediaPreviewMarker(layer),
  );

  useEffect(() => {
    setShowGeneratedPreview(!layer.thumbnailSrc);
  }, [layer.src, layer.thumbnailSrc]);

  return (
    <>
      <video
        className="image-canvas-editor__layer-video"
        src={resolvedUrl || undefined}
        poster={layer.thumbnailSrc ?? undefined}
        controls
        playsInline
        preload="metadata"
        aria-label={`画布视频：${layer.title}`}
        style={{ transform: mediaTransform }}
        onLoadedData={() => setShowGeneratedPreview(false)}
        onPlay={() => setShowGeneratedPreview(false)}
        onClick={(event) => event.stopPropagation()}
        onPointerDown={(event) => {
          if (event.target !== event.currentTarget) {
            event.stopPropagation();
          }
        }}
      />
      <span
        className={`image-canvas-editor__layer-video-preview ${previewClassName} ${
          showGeneratedPreview
            ? 'image-canvas-editor__layer-video-preview--visible'
            : ''
        }`}
        aria-hidden="true"
      />
    </>
  );
}

function ImageCanvasImageLayer({
  layer,
  mediaTransform,
}: {
  layer: CanvasLayer;
  mediaTransform?: string;
}) {
  const { resolvedUrl } = useResolvedAssetReadUrl(layer.src, {
    objectKey: layer.objectKey,
    refreshKey: layer.taskId ?? layer.resourceId,
  });

  return (
    <img
      src={resolvedUrl || undefined}
      alt={`画布图片：${layer.title}`}
      style={{ transform: mediaTransform }}
    />
  );
}

export function ImageCanvasWorldView({
  viewport,
  snapGuide,
  layers,
  selectedLayerIds,
  hoveredLayerId,
  canvasMarquee,
  canvasGenerationDialogs,
  generateDialog,
  cropExpandPanel,
  cropExpandSourceLayer,
  generationComposerStyle,
  onLayerPointerDown,
  onLayerClick,
  onSelectLayer,
  onLayerContextMenu,
  onLayerMouseEnter,
  onLayerMouseLeave,
  onOpenLayerMetadata,
  onUpdateLayerAssetKind,
  onGenerationFramePointerDown,
  onActivateGenerationDialog,
  onCropExpandHandlePointerDown,
}: ImageCanvasWorldViewProps) {
  const inverseScale = getInverseViewportScale(viewport);
  const inverseScaleStyle = buildInverseScaleStyle(inverseScale);
  const [openLayerKindMenuId, setOpenLayerKindMenuId] = useState<string | null>(
    null,
  );
  const openLayerKindTriggerRef = useRef<HTMLSpanElement | null>(null);
  const openLayerKindMenuRef = useRef<HTMLDivElement | null>(null);
  const visibleLayers = useMemo(
    () =>
      layers
        .filter((layer) => !layer.hidden)
        .slice()
        .sort((left, right) => left.zIndex - right.zIndex),
    [layers],
  );

  useEffect(() => {
    if (!openLayerKindMenuId) {
      return undefined;
    }

    const closeKindMenuWhenClickingOutside = (event: PointerEvent) => {
      const target = event.target;
      if (!(target instanceof Node)) {
        return;
      }
      if (
        openLayerKindMenuRef.current?.contains(target) ||
        openLayerKindTriggerRef.current?.contains(target)
      ) {
        return;
      }
      setOpenLayerKindMenuId(null);
    };

    document.addEventListener('pointerdown', closeKindMenuWhenClickingOutside);
    return () => {
      document.removeEventListener(
        'pointerdown',
        closeKindMenuWhenClickingOutside,
      );
    };
  }, [openLayerKindMenuId]);

  return (
    <div
      className="image-canvas-editor__world"
      data-testid="image-canvas-world"
      style={{
        width: CANVAS_WORLD_SIZE,
        height: CANVAS_WORLD_SIZE,
        transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.scale})`,
      }}
    >
      {snapGuide?.vertical !== undefined ? (
        <div
          className="image-canvas-editor__snap-guide image-canvas-editor__snap-guide--vertical"
          data-testid="image-canvas-editor-snap-guide-vertical"
          style={{ left: snapGuide.vertical }}
        />
      ) : null}
      {snapGuide?.horizontal !== undefined ? (
        <div
          className="image-canvas-editor__snap-guide image-canvas-editor__snap-guide--horizontal"
          data-testid="image-canvas-editor-snap-guide-horizontal"
          style={{ top: snapGuide.horizontal }}
        />
      ) : null}

      {visibleLayers.map((layer) => {
          const isSelected = selectedLayerIds.includes(layer.id);
          const isHovered = hoveredLayerId === layer.id;
          const kindTagMeta = getLayerKindTagMeta(layer);
          const kindLabel = kindTagMeta.label;
          const mediaTransform =
            layer.flipX || layer.flipY
              ? `scale(${layer.flipX ? -1 : 1}, ${layer.flipY ? -1 : 1})`
              : undefined;
          const layerGeneratingLabel =
            generateDialog?.mode === 'edit' &&
            generateDialog.status === 'generating' &&
            generateDialog.sourceLayerId === layer.id
              ? '修改中'
              : null;
          const LayerElement =
            layer.mediaType === 'audio' || layer.mediaType === 'video'
              ? 'div'
              : 'button';
          return (
            <div key={layer.id}>
              <LayerElement
                {...(layer.mediaType === 'audio' || layer.mediaType === 'video'
                  ? { role: 'button', tabIndex: 0 }
                  : { type: 'button' })}
                className={`image-canvas-editor__layer ${isSelected ? 'image-canvas-editor__layer--selected' : ''} ${isHovered ? 'image-canvas-editor__layer--hovered' : ''} ${layerGeneratingLabel ? 'image-canvas-editor__layer--generating' : ''} ${layer.locked ? 'image-canvas-editor__layer--locked' : ''}`}
                style={{
                  left: layer.x,
                  top: layer.y,
                  width: layer.width,
                  height: layer.height,
                  zIndex: layer.zIndex,
                  display: layer.hidden ? 'none' : undefined,
                }}
                onPointerDown={(event) => onLayerPointerDown(event, layer)}
                onClick={(event) => {
                  setOpenLayerKindMenuId(null);
                  onLayerClick(event, layer);
                }}
                onContextMenu={(event) => {
                  setOpenLayerKindMenuId(null);
                  onLayerContextMenu(event, layer);
                }}
                onKeyDown={
                  layer.mediaType === 'audio' || layer.mediaType === 'video'
                    ? handleLayerKeyboardActivation
                    : undefined
                }
                onMouseEnter={() => onLayerMouseEnter(layer.id)}
                onMouseLeave={() => onLayerMouseLeave(layer.id)}
                aria-label={`选择${layer.title}`}
              >
                {layer.mediaType === 'audio' ? (
                  <ImageCanvasAudioLayerCard
                    layer={layer}
                    isHovered={isHovered}
                    onSelectLayer={() => onSelectLayer(layer.id)}
                  />
                ) : layer.mediaType === 'video' ? (
                  <ImageCanvasVideoLayer
                    layer={layer}
                    mediaTransform={mediaTransform}
                  />
                ) : (
                  <ImageCanvasImageLayer
                    layer={layer}
                    mediaTransform={mediaTransform}
                  />
                )}
                {kindLabel ? (
                  <span
                    ref={
                      openLayerKindMenuId === layer.id
                        ? openLayerKindTriggerRef
                        : undefined
                    }
                    role="button"
                    tabIndex={0}
                    aria-label={`素材标签：${kindLabel}`}
                    className={`image-canvas-editor__kind-badge image-canvas-editor__kind-badge--${kindTagMeta.className} image-canvas-editor__kind-badge--beside-info image-canvas-editor__kind-badge--editable`}
                    style={inverseScaleStyle}
                    onPointerDown={(event) => event.stopPropagation()}
                    onClick={(event) => {
                      event.stopPropagation();
                      setOpenLayerKindMenuId((currentId) =>
                        currentId === layer.id ? null : layer.id,
                      );
                    }}
                    onKeyDown={handleLayerTagKeyboardActivation}
                  >
                    {kindLabel}
                  </span>
                ) : null}
                <PlatformIconButton
                  asChild="spanButton"
                  variant="darkMini"
                  className="image-canvas-editor__metadata-corner"
                  label={`查看${layer.title}${
                    layer.mediaType === 'audio'
                      ? '音频'
                      : layer.mediaType === 'video'
                        ? '视频'
                        : '图片'
                  }信息`}
                  icon={<Info className="h-3 w-3" />}
                  style={inverseScaleStyle}
                  onClick={(event) => {
                    event.stopPropagation();
                    onOpenLayerMetadata(layer);
                  }}
                  onPointerDown={(event) => event.stopPropagation()}
                />
                {isHovered && layer.mediaType !== 'audio' ? (
                  <PlatformPillBadge
                    tone="lightOverlay"
                    size="xs"
                    className="image-canvas-editor__size-badge"
                    style={inverseScaleStyle}
                  >
                    {getLayerMetricLabel(layer)}
                  </PlatformPillBadge>
                ) : null}
                {layerGeneratingLabel ? (
                  <span
                    className="image-canvas-editor__generation-frame-progress image-canvas-editor__layer-generating-progress"
                    role="status"
                  >
                    {layerGeneratingLabel}
                  </span>
                ) : null}
              </LayerElement>
              {openLayerKindMenuId === layer.id ? (
                <div
                  ref={openLayerKindMenuRef}
                  className="image-canvas-editor__kind-menu-anchor"
                  style={{
                    left: layer.x + layer.width,
                    top: layer.y,
                    zIndex: layer.zIndex + 30,
                    ...inverseScaleStyle,
                  }}
                >
                  <PlatformFloatingMenu
                    label="选择素材标签"
                    placement="bottom-end"
                    className="image-canvas-editor__kind-menu"
                    onWheelCapture={(event) => event.stopPropagation()}
                    onWheel={(event) => event.stopPropagation()}
                  >
                    {CANVAS_ASSET_KIND_TAG_OPTIONS.map((option) => (
                      <PlatformFloatingMenuItem
                        key={option.value ?? 'unknown'}
                        className={
                          option.value === (layer.assetKind ?? null)
                            ? 'image-canvas-editor__kind-menu-item--active'
                            : undefined
                        }
                        onClick={(event) => {
                          event.stopPropagation();
                          onUpdateLayerAssetKind(layer.id, option.value);
                          setOpenLayerKindMenuId(null);
                        }}
                      >
                        {option.label}
                      </PlatformFloatingMenuItem>
                    ))}
                  </PlatformFloatingMenu>
                </div>
              ) : null}
            </div>
          );
        })}
      {canvasMarquee ? (
        <div
          className="image-canvas-editor__canvas-marquee"
          aria-hidden="true"
          style={{
            left:
              (Math.min(canvasMarquee.startX, canvasMarquee.currentX) -
                viewport.x) /
              viewport.scale,
            top:
              (Math.min(canvasMarquee.startY, canvasMarquee.currentY) -
                viewport.y) /
              viewport.scale,
            width:
              Math.abs(canvasMarquee.currentX - canvasMarquee.startX) /
              viewport.scale,
            height:
              Math.abs(canvasMarquee.currentY - canvasMarquee.startY) /
              viewport.scale,
          }}
        />
      ) : null}
      {cropExpandPanel && cropExpandSourceLayer ? (
        <div
          className="image-canvas-editor__crop-expand-frame"
          style={{
            left: cropExpandPanel.frame.x,
            top: cropExpandPanel.frame.y,
            width: cropExpandPanel.frame.width,
            height: cropExpandPanel.frame.height,
          }}
          aria-label="裁扩边界"
          role="group"
        >
          <div
            className="image-canvas-editor__crop-expand-source-mask"
            aria-hidden="true"
            style={{
              left: cropExpandSourceLayer.x - cropExpandPanel.frame.x,
              top: cropExpandSourceLayer.y - cropExpandPanel.frame.y,
              width: cropExpandSourceLayer.width,
              height: cropExpandSourceLayer.height,
            }}
          />
          {CROP_EXPAND_HANDLES.map((handle) => (
            <button
              key={handle.value}
              type="button"
              className={`image-canvas-editor__crop-expand-handle image-canvas-editor__crop-expand-handle--${handle.value}`}
              aria-label={`拖拽裁扩${handle.label}`}
              onPointerDown={(event) =>
                onCropExpandHandlePointerDown(event, handle.value)
              }
            />
          ))}
        </div>
      ) : null}
      {canvasGenerationDialogs.map((dialog) => {
        const hasGeneratedLayer = Boolean(
          dialog.generatedLayerId &&
            layers.some((layer) => layer.id === dialog.generatedLayerId),
        );
        return dialog.placeholder && !hasGeneratedLayer
          ? (() => {
              const isFocused = generateDialog?.id === dialog.id;
              const isSelected = selectedLayerIds.includes(
                getCanvasGenerationSelectionId(dialog.id),
              );
              const showFocusedChrome =
                isFocused || isSelected || dialog.status === 'generating';
              const placeholderMeta = getGenerationPlaceholderMeta(dialog);

              return (
                <div
                  key={dialog.id}
                  className={`image-canvas-editor__generation-frame ${
                    placeholderMeta.frameClassName
                  } ${
                    dialog.status === 'generating'
                      ? 'image-canvas-editor__generation-frame--generating'
                      : ''
                  } ${
                    isFocused || isSelected
                      ? 'image-canvas-editor__generation-frame--focused'
                      : ''
                  }`}
                  role="button"
                  tabIndex={0}
                  style={{
                    left: dialog.placeholder.x,
                    top: dialog.placeholder.y,
                    width: dialog.placeholder.width,
                    height: dialog.placeholder.height,
                  }}
                  aria-label={getGenerationFrameAriaLabel(dialog)}
                  onPointerDown={(event) =>
                    onGenerationFramePointerDown(event, dialog)
                  }
                  onDoubleClick={() => onActivateGenerationDialog(dialog)}
                >
                  {showFocusedChrome ? (
                    <span
                      className="image-canvas-editor__generation-frame-label"
                      style={inverseScaleStyle}
                    >
                      {placeholderMeta.labelIcon}
                      {getGenerationFrameLabel(dialog)}
                    </span>
                  ) : null}
                  {placeholderMeta.badgeLabel ? (
                    <span
                      className={`image-canvas-editor__kind-badge image-canvas-editor__kind-badge--${placeholderMeta.badgeClassName}`}
                      style={inverseScaleStyle}
                    >
                      {placeholderMeta.badgeLabel}
                    </span>
                  ) : null}
                  {showFocusedChrome &&
                  dialog.mode !== 'audio-sound-effect' &&
                  dialog.mode !== 'audio-background-music' ? (
                    <span
                      className="image-canvas-editor__generation-frame-size"
                      style={inverseScaleStyle}
                    >
                      {`${dialog.placeholder.originalWidth} x ${dialog.placeholder.originalHeight}`}
                    </span>
                  ) : null}
                  <span
                    className="image-canvas-editor__generation-frame-icon"
                    style={inverseScaleStyle}
                  >
                    {placeholderMeta.icon}
                  </span>
                  {dialog.status === 'generating' ? (
                    <span
                      className="image-canvas-editor__generation-frame-progress"
                      role="status"
                    >
                      生成中
                    </span>
                  ) : null}
                </div>
              );
            })()
          : null;
      })}
      {(generateDialog?.mode === 'generate' ||
        generateDialog?.mode === 'spec' ||
        generateDialog?.mode === 'character' ||
        generateDialog?.mode === 'icon' ||
        generateDialog?.mode === 'ui-design' ||
        generateDialog?.mode === 'quick-edit' ||
        generateDialog?.mode === 'publication' ||
        generateDialog?.mode === 'character-animation' ||
        generateDialog?.mode === 'video' ||
        generateDialog?.mode === 'audio-sound-effect' ||
        generateDialog?.mode === 'audio-background-music') &&
      generateDialog.status === 'generating' &&
      generationComposerStyle ? (
        <PlatformStatusMessage
          tone="info"
          surface="platform"
          size="xs"
          className="image-canvas-editor__generate-status image-canvas-editor__generate-status--floating"
          role="status"
          style={generationComposerStyle}
        >
          生成中
        </PlatformStatusMessage>
      ) : null}
    </div>
  );
}