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

import type { ChangeEventHandler, ComponentProps, RefObject } from 'react';

import { ImageCanvasMetadataModalView } from './ImageCanvasMetadataModalView';
import { ImageCanvasSidebarView } from './ImageCanvasSidebarView';
import { ImageCanvasStageView } from './ImageCanvasStageView';
import { ImageCanvasTopbarView } from './ImageCanvasTopbarView';
import { Model3dViewerModal } from './model3d-preview/Model3dViewerModal';

type AssetDragPreview = {
  x: number;
  y: number;
  label: string;
};

type ImageCanvasEditorShellViewProps = {
  editorRootRef: RefObject<HTMLElement | null>;
  uploadInputRef: RefObject<HTMLInputElement | null>;
  uploadAccept?: string;
  onUploadInputChange: ChangeEventHandler<HTMLInputElement>;
  assetDragPreview: AssetDragPreview | null;
  sidebarProps: ComponentProps<typeof ImageCanvasSidebarView>;
  topbarProps: ComponentProps<typeof ImageCanvasTopbarView>;
  stageProps: ComponentProps<typeof ImageCanvasStageView>;
  metadataProps: ComponentProps<typeof ImageCanvasMetadataModalView>;
  model3dViewerProps: ComponentProps<typeof Model3dViewerModal>;
};

export function ImageCanvasEditorShellView({
  editorRootRef,
  uploadInputRef,
  uploadAccept = 'image/*',
  onUploadInputChange,
  assetDragPreview,
  sidebarProps,
  topbarProps,
  stageProps,
  metadataProps,
  model3dViewerProps,
}: ImageCanvasEditorShellViewProps) {
  const uploadInputLabel =
    uploadAccept.includes('video') || uploadAccept.includes('audio')
      ? '上传媒体文件'
      : '上传图片文件';

  return (
    <section
      ref={editorRootRef}
      className="image-canvas-editor"
      aria-label="图片画布编辑器"
      onContextMenu={(event) => {
        if (
          event.target instanceof Element &&
          event.target.closest('.image-canvas-editor__metadata-dialog')
        ) {
          return;
        }
        event.preventDefault();
      }}
    >
      <input
        ref={uploadInputRef}
        type="file"
        accept={uploadAccept}
        multiple
        aria-label={uploadInputLabel}
        hidden
        onChange={onUploadInputChange}
      />
      {assetDragPreview ? (
        <div
          className="image-canvas-editor__asset-drag-preview"
          style={{
            left: Number.isFinite(assetDragPreview.x) ? assetDragPreview.x : 0,
            top: Number.isFinite(assetDragPreview.y) ? assetDragPreview.y : 0,
          }}
          aria-hidden="true"
        >
          {assetDragPreview.label}
        </div>
      ) : null}
      <ImageCanvasSidebarView {...sidebarProps} />

      <div className="image-canvas-editor__main">
        <ImageCanvasTopbarView {...topbarProps} />
        <ImageCanvasStageView {...stageProps} />
      </div>

      <ImageCanvasMetadataModalView {...metadataProps} />
      <Model3dViewerModal {...model3dViewerProps} />
    </section>
  );
}