4063 lines
127 KiB
TypeScript
4063 lines
127 KiB
TypeScript
import { Check, ChevronLeft, Download, Pencil, X } from 'lucide-react';
|
||
import JSZip from 'jszip';
|
||
import {
|
||
type CSSProperties,
|
||
type DragEvent as ReactDragEvent,
|
||
type MouseEvent as ReactMouseEvent,
|
||
type PointerEvent as ReactPointerEvent,
|
||
useCallback,
|
||
useEffect,
|
||
useMemo,
|
||
useRef,
|
||
useState,
|
||
} from 'react';
|
||
|
||
import { ApiClientError } from '../../services/apiClient';
|
||
import { resolveEditorImageReferenceDataUrl } from '../../services/image-editor/editorImageReference';
|
||
import {
|
||
createEditorAsset,
|
||
createEditorAssetFolder,
|
||
deleteEditorAsset,
|
||
deleteEditorAssetFolder,
|
||
editEditorImage,
|
||
type EditorIconSpritesheetGenerationResult,
|
||
type EditorIconSpritesheetIconResult,
|
||
type EditorImageGenerationResult,
|
||
generateEditorCharacterAnimation,
|
||
generateEditorIconSpritesheet,
|
||
generateEditorImage,
|
||
loadEditorAssetLibrary,
|
||
renameEditorProject,
|
||
updateEditorAsset,
|
||
updateEditorAssetFolder,
|
||
} from '../../services/image-editor/editorProjectClient';
|
||
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
|
||
import { PlatformTextField } from '../common/PlatformTextField';
|
||
import { UnifiedModal } from '../common/UnifiedModal';
|
||
import { useAuthUi } from '../auth/AuthUiContext';
|
||
import { EditorIconButton } from './ImageCanvasEditorPrimitives';
|
||
import { ImageCanvasGenerationComposerView } from './ImageCanvasGenerationComposerView';
|
||
import {
|
||
createMinimapModel,
|
||
fitViewportToLayers,
|
||
getCanvasDropPoint as resolveCanvasDropPoint,
|
||
getCanvasPointFromClient as resolveCanvasPointFromClient,
|
||
getWorldPointFromClient,
|
||
moveGenerationFrameFromDrag,
|
||
moveLayersFromDrag,
|
||
moveViewportFromMinimapDrag as resolveViewportFromMinimapDrag,
|
||
moveViewportFromMinimapPointer as resolveViewportFromMinimapPointer,
|
||
moveViewportFromPan,
|
||
scaleViewportFromScreenPoint,
|
||
scrollViewportVertically,
|
||
selectLayersInsideMarquee,
|
||
zoomViewportFromWheel,
|
||
} from './ImageCanvasInteractionModel';
|
||
import {
|
||
createCanvasLayerClipboard,
|
||
duplicateCanvasLayers,
|
||
flipCanvasLayers,
|
||
getCanvasLayersByIds,
|
||
groupCanvasLayers,
|
||
moveCanvasLayers,
|
||
removeCanvasLayers,
|
||
resolveContextTargetLayerIds,
|
||
toggleCanvasLayersLock,
|
||
toggleCanvasLayersVisibility,
|
||
ungroupCanvasLayers,
|
||
updateCanvasLayersByIds,
|
||
type CanvasLayerFlipAxis,
|
||
type CanvasLayerMoveMode,
|
||
} from './ImageCanvasLayerCommandModel';
|
||
import { ImageCanvasSidebarView } from './ImageCanvasSidebarView';
|
||
import { ImageCanvasStageView } from './ImageCanvasStageView';
|
||
import {
|
||
ASSET_DRAG_MIME_TYPE,
|
||
DEFAULT_CANVAS_BACKGROUND_COLOR,
|
||
DEFAULT_CANVAS_SIZE,
|
||
EDITOR_ASSET_FOLDERS,
|
||
TOOLBAR_HALF_WIDTH,
|
||
clamp,
|
||
createLayerFromAsset,
|
||
escapeCssIdentifier,
|
||
formatImageSizeValue,
|
||
getDraggedAssetId,
|
||
hasDataTransferType,
|
||
isGeneratedLayer,
|
||
isLayerLinkedToAsset,
|
||
normalizeAssetLibrary,
|
||
normalizeCanvasBackgroundHex,
|
||
resolveContextMenuPosition,
|
||
resolveLayerResolutionSize,
|
||
serializeLayer,
|
||
} from './ImageCanvasEditorModel';
|
||
import {
|
||
blobToUint8Array,
|
||
buildLayerExportMetadata,
|
||
formatExportDate,
|
||
getImageExtensionFromTypeOrSrc,
|
||
getLayerExportKey,
|
||
readLayerImageBlob,
|
||
sanitizeExportFilePart,
|
||
} from './ImageCanvasExportModel';
|
||
import {
|
||
CHARACTER_ANIMATION_DURATION_OPTIONS,
|
||
CHARACTER_ANIMATION_MODEL,
|
||
CHARACTER_FRAME_DISPLAY_SIZE,
|
||
CHARACTER_FRAME_ORIGINAL_SIZE,
|
||
DEFAULT_ICON_DESCRIPTIONS,
|
||
DEFAULT_IMAGE_MODEL,
|
||
DEFAULT_SPEC_FORM_VALUES,
|
||
ICON_COMPOSER_HORIZONTAL_CHROME_REM,
|
||
ICON_COMPOSER_MIN_WIDTH_REM,
|
||
ICON_DESCRIPTION_CARD_WIDTH_REM,
|
||
ICON_DESCRIPTION_LIMIT,
|
||
ICON_FRAME_DISPLAY_SIZE,
|
||
ICON_FRAME_ORIGINAL_SIZE,
|
||
SPEC_FRAME_DISPLAY_SIZE,
|
||
SPEC_FRAME_ORIGINAL_SIZE,
|
||
SPEC_GENERATION_SIZE,
|
||
SPEC_TYPE_LABEL,
|
||
buildCharacterGenerationInputs,
|
||
buildEditGenerationInputs,
|
||
buildIconGenerationInputs,
|
||
buildImageGenerationInputs,
|
||
buildQuickEditModelOptions,
|
||
buildQuickEditSizeOptions,
|
||
buildSpecGenerationInputs,
|
||
buildSpecPrompt,
|
||
calculateCharacterAnimationPrice,
|
||
createCanvasLayerReference,
|
||
formatLayerImageType,
|
||
getGenerationFrameAriaLabel,
|
||
getGenerationFrameLabel,
|
||
getLayerKindLabel,
|
||
isCanvasGenerationDialog,
|
||
resolveCharacterAnimationSourceImageSrc,
|
||
resolveImageGenerationErrorMessage,
|
||
} from './ImageCanvasGenerationModel';
|
||
import type {
|
||
AssetMarqueeState,
|
||
AssetPointerDragState,
|
||
CanvasAssetExportImage,
|
||
CanvasAssetExportMetadata,
|
||
CanvasClipboard,
|
||
CanvasContextMenuState,
|
||
CanvasGenerationDialogState,
|
||
CanvasGenerationInputs,
|
||
CanvasLayer,
|
||
CanvasMarqueeState,
|
||
CanvasTool,
|
||
CanvasViewport,
|
||
CharacterAnimationPanelState,
|
||
DragState,
|
||
EditorAsset,
|
||
EditorAssetFolder,
|
||
GenerateDialogState,
|
||
ImageContextMenuState,
|
||
QuickEditPanelState,
|
||
SidebarPanel,
|
||
SnapGuide,
|
||
SpecFormValues,
|
||
SpecGenerationType,
|
||
UploadTarget,
|
||
} from './ImageCanvasEditorTypes';
|
||
import { useCanvasHistory } from './useCanvasHistory';
|
||
import { useCanvasGenerationDialogs } from './useCanvasGenerationDialogs';
|
||
import { useImageCanvasProjectPersistence } from './useImageCanvasProjectPersistence';
|
||
|
||
function isImageFile(file: File) {
|
||
return file.type.startsWith('image/');
|
||
}
|
||
|
||
function isEditableTarget(event: KeyboardEvent) {
|
||
const target = event.target as HTMLElement | null;
|
||
if (!target) {
|
||
return false;
|
||
}
|
||
return (
|
||
target.tagName === 'INPUT' ||
|
||
target.tagName === 'TEXTAREA' ||
|
||
target.isContentEditable
|
||
);
|
||
}
|
||
|
||
function getPointerButton(event: ReactPointerEvent<HTMLElement>) {
|
||
const nativeEvent = event.nativeEvent as PointerEvent;
|
||
const nativeButtons = Number(nativeEvent.buttons);
|
||
if (Number.isFinite(nativeButtons) && (nativeButtons & 4) === 4) {
|
||
return 1;
|
||
}
|
||
const syntheticButtons = Number(event.buttons);
|
||
if (Number.isFinite(syntheticButtons) && (syntheticButtons & 4) === 4) {
|
||
return 1;
|
||
}
|
||
const syntheticButton = Number(event.button);
|
||
if (Number.isFinite(syntheticButton)) {
|
||
return syntheticButton;
|
||
}
|
||
const nativeButton = Number(nativeEvent.button);
|
||
if (Number.isFinite(nativeButton)) {
|
||
return nativeButton;
|
||
}
|
||
return 0;
|
||
}
|
||
|
||
function getPointerClient(event: ReactPointerEvent<HTMLElement>) {
|
||
const nativeEvent = event.nativeEvent as PointerEvent;
|
||
return {
|
||
x: Number.isFinite(event.clientX)
|
||
? event.clientX
|
||
: Number.isFinite(nativeEvent.clientX)
|
||
? nativeEvent.clientX
|
||
: 0,
|
||
y: Number.isFinite(event.clientY)
|
||
? event.clientY
|
||
: Number.isFinite(nativeEvent.clientY)
|
||
? nativeEvent.clientY
|
||
: 0,
|
||
};
|
||
}
|
||
|
||
function getPointerId(event: ReactPointerEvent<HTMLElement>) {
|
||
const nativeId = (event.nativeEvent as PointerEvent).pointerId;
|
||
if (Number.isFinite(event.pointerId)) {
|
||
return event.pointerId;
|
||
}
|
||
return Number.isFinite(nativeId) ? nativeId : -1;
|
||
}
|
||
|
||
function isEditorAuthError(error: unknown) {
|
||
return (
|
||
error instanceof ApiClientError &&
|
||
(error.status === 401 || error.status === 403)
|
||
);
|
||
}
|
||
|
||
export function ImageCanvasEditorView() {
|
||
const authUi = useAuthUi();
|
||
const editorRootRef = useRef<HTMLElement | null>(null);
|
||
const canvasViewportRef = useRef<HTMLDivElement | null>(null);
|
||
const uploadInputRef = useRef<HTMLInputElement | null>(null);
|
||
const assetListRef = useRef<HTMLDivElement | null>(null);
|
||
const dragStateRef = useRef<DragState | null>(null);
|
||
const assetPointerDragRef = useRef<AssetPointerDragState | null>(null);
|
||
const authUiRef = useRef(authUi);
|
||
const isShiftPressedRef = useRef(false);
|
||
const layerCounterRef = useRef(0);
|
||
const layersRef = useRef<CanvasLayer[]>([]);
|
||
const viewportRef = useRef<CanvasViewport>({
|
||
x: -260,
|
||
y: 70,
|
||
scale: 0.82,
|
||
});
|
||
const specToolWrapRef = useRef<HTMLSpanElement | null>(null);
|
||
const characterSpecButtonRef = useRef<HTMLButtonElement | null>(null);
|
||
const iconSpecButtonRef = useRef<HTMLButtonElement | null>(null);
|
||
const selectedLayerIdRef = useRef<string | null>(null);
|
||
const selectedLayerIdsRef = useRef<string[]>([]);
|
||
const deleteLayerByIdRef = useRef<(targetLayerId: string | null) => void>(
|
||
() => {},
|
||
);
|
||
const suppressAssetClickRef = useRef(false);
|
||
const [projectTitle, setProjectTitle] = useState('未命名画布');
|
||
const [projectRenameValue, setProjectRenameValue] = useState('未命名画布');
|
||
const [isRenamingProject, setIsRenamingProject] = useState(false);
|
||
const [isProjectRenameSaving, setIsProjectRenameSaving] = useState(false);
|
||
const [projectRenameError, setProjectRenameError] = useState<string | null>(
|
||
null,
|
||
);
|
||
const [assetExportStatus, setAssetExportStatus] = useState<{
|
||
tone: 'info' | 'success' | 'error';
|
||
message: string;
|
||
} | null>(null);
|
||
const [isExportingAssets, setIsExportingAssets] = useState(false);
|
||
const [activeSidebarPanel, setActiveSidebarPanel] =
|
||
useState<SidebarPanel | null>('assets');
|
||
const [viewport, setViewport] = useState<CanvasViewport>({
|
||
x: -260,
|
||
y: 70,
|
||
scale: 0.82,
|
||
});
|
||
const [canvasSize, setCanvasSize] = useState(DEFAULT_CANVAS_SIZE);
|
||
const [assetFolders, setAssetFolders] =
|
||
useState<EditorAssetFolder[]>(EDITOR_ASSET_FOLDERS);
|
||
const [assets, setAssets] = useState<EditorAsset[]>([]);
|
||
const [layers, setLayers] = useState<CanvasLayer[]>([]);
|
||
const [renamingAsset, setRenamingAsset] = useState<{
|
||
assetId: string;
|
||
value: string;
|
||
} | null>(null);
|
||
const [renamingFolder, setRenamingFolder] = useState<{
|
||
folderId: string;
|
||
value: string;
|
||
} | null>(null);
|
||
const [creatingFolder, setCreatingFolder] = useState(false);
|
||
const [newFolderName, setNewFolderName] = useState('');
|
||
const [activeUploadFolderId, setActiveUploadFolderId] = useState('project');
|
||
const [isAssetSelectionMode, setIsAssetSelectionMode] = useState(false);
|
||
const [selectedAssetIds, setSelectedAssetIds] = useState<Set<string>>(
|
||
() => new Set(),
|
||
);
|
||
const [assetMarquee, setAssetMarquee] = useState<AssetMarqueeState | null>(
|
||
null,
|
||
);
|
||
const [assetPointerDrag, setAssetPointerDrag] =
|
||
useState<AssetPointerDragState | null>(null);
|
||
const [assetMoveDropFolderId, setAssetMoveDropFolderId] = useState<
|
||
string | null
|
||
>(null);
|
||
const [pinnedAssetMoveFolderId, setPinnedAssetMoveFolderId] = useState<
|
||
string | null
|
||
>(null);
|
||
const [canvasMarquee, setCanvasMarquee] = useState<CanvasMarqueeState | null>(
|
||
null,
|
||
);
|
||
const [selectedLayerId, setSelectedLayerId] = useState<string | null>(null);
|
||
const [selectedLayerIds, setSelectedLayerIds] = useState<string[]>([]);
|
||
const [hoveredLayerId, setHoveredLayerId] = useState<string | null>(null);
|
||
const [activeTool, setActiveTool] = useState<CanvasTool>('select');
|
||
const [isSpacePanning, setIsSpacePanning] = useState(false);
|
||
const [isPanning, setIsPanning] = useState(false);
|
||
const [snapGuide, setSnapGuide] = useState<SnapGuide | null>(null);
|
||
const [isZoomMenuOpen, setIsZoomMenuOpen] = useState(false);
|
||
const [isBackgroundSettingsOpen, setIsBackgroundSettingsOpen] =
|
||
useState(false);
|
||
const [isSpecMenuOpen, setIsSpecMenuOpen] = useState(false);
|
||
const [isMinimapOpen, setIsMinimapOpen] = useState(true);
|
||
const [canvasBackgroundColor, setCanvasBackgroundColor] = useState(
|
||
DEFAULT_CANVAS_BACKGROUND_COLOR,
|
||
);
|
||
const [canvasBackgroundHexValue, setCanvasBackgroundHexValue] = useState(
|
||
DEFAULT_CANVAS_BACKGROUND_COLOR,
|
||
);
|
||
const [metadataLayer, setMetadataLayer] = useState<CanvasLayer | null>(null);
|
||
const [uploadTarget, setUploadTarget] = useState<UploadTarget>('asset');
|
||
const [isCharacterSpecMenuOpen, setIsCharacterSpecMenuOpen] = useState(false);
|
||
const [
|
||
isPickingCharacterSpecFromCanvas,
|
||
setIsPickingCharacterSpecFromCanvas,
|
||
] = useState(false);
|
||
const [isIconSpecMenuOpen, setIsIconSpecMenuOpen] = useState(false);
|
||
const [isPickingIconSpecFromCanvas, setIsPickingIconSpecFromCanvas] =
|
||
useState(false);
|
||
const [imageContextMenu, setImageContextMenu] =
|
||
useState<ImageContextMenuState | null>(null);
|
||
const [contextMenu, setContextMenu] = useState<CanvasContextMenuState | null>(
|
||
null,
|
||
);
|
||
const [canvasClipboard, setCanvasClipboard] =
|
||
useState<CanvasClipboard | null>(null);
|
||
const [quickEditPanel, setQuickEditPanel] =
|
||
useState<QuickEditPanelState | null>(null);
|
||
const [characterAnimationPanel, setCharacterAnimationPanel] =
|
||
useState<CharacterAnimationPanelState | null>(null);
|
||
const [uploadDropTarget, setUploadDropTarget] = useState<
|
||
'canvas' | 'assets' | null
|
||
>(null);
|
||
|
||
selectedLayerIdRef.current = selectedLayerId;
|
||
selectedLayerIdsRef.current = selectedLayerIds;
|
||
layersRef.current = layers;
|
||
viewportRef.current = viewport;
|
||
const assetsRef = useRef(assets);
|
||
const addAssetLayerRef = useRef<
|
||
(asset: EditorAsset, screenCenter?: { x: number; y: number }) => void
|
||
>(() => {});
|
||
const moveAssetToFolderRef = useRef<
|
||
(assetId: string, folderId: string) => void
|
||
>(() => {});
|
||
authUiRef.current = authUi;
|
||
const openEditorLoginModal = useCallback(
|
||
(postLoginAction?: (() => void) | null) => {
|
||
authUiRef.current?.openLoginModal(postLoginAction);
|
||
},
|
||
[],
|
||
);
|
||
const applyCanvasBackgroundColor = useCallback((color: string) => {
|
||
const normalizedColor = normalizeCanvasBackgroundHex(color);
|
||
if (!normalizedColor) {
|
||
return false;
|
||
}
|
||
setCanvasBackgroundColor(normalizedColor);
|
||
setCanvasBackgroundHexValue(normalizedColor);
|
||
return true;
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
assetsRef.current = assets;
|
||
}, [assets]);
|
||
|
||
const effectiveTool: CanvasTool = isSpacePanning ? 'hand' : activeTool;
|
||
const handleActivateCanvasGenerationDialog = useCallback(() => {
|
||
setSelectedLayerId(null);
|
||
setSelectedLayerIds([]);
|
||
setImageContextMenu(null);
|
||
}, []);
|
||
const {
|
||
generateDialog,
|
||
setGenerateDialog,
|
||
generateDialogRef,
|
||
inactiveGenerateDialogs,
|
||
setInactiveGenerateDialogs,
|
||
inactiveGenerateDialogsRef,
|
||
activeCanvasGenerationDialog,
|
||
canvasGenerationDialogs,
|
||
openCanvasGenerationDialog,
|
||
updateCanvasGenerationDialogById,
|
||
removeCanvasGenerationDialogById,
|
||
activateCanvasGenerationDialog,
|
||
removeCanvasGenerationDialogsByLayerId,
|
||
getGeneratingDialogPlaceholder,
|
||
} = useCanvasGenerationDialogs({
|
||
onActivate: handleActivateCanvasGenerationDialog,
|
||
});
|
||
const selectedLayer = useMemo(
|
||
() => layers.find((layer) => layer.id === selectedLayerId) ?? null,
|
||
[layers, selectedLayerId],
|
||
);
|
||
const selectedLayerCount = selectedLayerIds.length;
|
||
const hasMultipleSelectedLayers = selectedLayerCount > 1;
|
||
const activeGenerationLayer = useMemo(
|
||
() =>
|
||
activeCanvasGenerationDialog?.generatedLayerId
|
||
? (layers.find(
|
||
(layer) =>
|
||
layer.id === activeCanvasGenerationDialog.generatedLayerId,
|
||
) ?? null)
|
||
: null,
|
||
[activeCanvasGenerationDialog, layers],
|
||
);
|
||
const generationAnchor = activeCanvasGenerationDialog
|
||
? (activeGenerationLayer ??
|
||
activeCanvasGenerationDialog.placeholder ??
|
||
null)
|
||
: null;
|
||
const generationComposerStyle =
|
||
activeCanvasGenerationDialog?.status !== 'generating' &&
|
||
activeCanvasGenerationDialog?.composerOpen !== false &&
|
||
generationAnchor
|
||
? {
|
||
left:
|
||
viewport.x +
|
||
(generationAnchor.x + generationAnchor.width / 2) * viewport.scale,
|
||
top:
|
||
viewport.y +
|
||
(generationAnchor.y + generationAnchor.height) * viewport.scale +
|
||
10,
|
||
}
|
||
: null;
|
||
const iconDescriptionValues =
|
||
activeCanvasGenerationDialog?.mode === 'icon'
|
||
? (activeCanvasGenerationDialog.iconDescriptions ??
|
||
DEFAULT_ICON_DESCRIPTIONS)
|
||
: DEFAULT_ICON_DESCRIPTIONS;
|
||
const iconComposerStyle: CSSProperties | null =
|
||
activeCanvasGenerationDialog?.mode === 'icon' && generationComposerStyle
|
||
? {
|
||
...generationComposerStyle,
|
||
width: `${Math.max(
|
||
ICON_COMPOSER_MIN_WIDTH_REM,
|
||
ICON_COMPOSER_HORIZONTAL_CHROME_REM +
|
||
iconDescriptionValues.length * ICON_DESCRIPTION_CARD_WIDTH_REM,
|
||
).toFixed(1)}rem`,
|
||
}
|
||
: null;
|
||
const selectedToolbarStyle = selectedLayer
|
||
? {
|
||
left: clamp(
|
||
viewport.x +
|
||
selectedLayer.x * viewport.scale +
|
||
(selectedLayer.width * viewport.scale) / 2,
|
||
TOOLBAR_HALF_WIDTH,
|
||
Math.max(TOOLBAR_HALF_WIDTH, canvasSize.width - TOOLBAR_HALF_WIDTH),
|
||
),
|
||
top: Math.max(10, viewport.y + selectedLayer.y * viewport.scale - 12),
|
||
}
|
||
: null;
|
||
const characterAnimationSourceLayer = characterAnimationPanel
|
||
? (layers.find(
|
||
(layer) => layer.id === characterAnimationPanel.sourceLayerId,
|
||
) ?? null)
|
||
: null;
|
||
const quickEditSourceLayer = quickEditPanel
|
||
? (layers.find((layer) => layer.id === quickEditPanel.sourceLayerId) ??
|
||
null)
|
||
: null;
|
||
const quickEditPanelStyle =
|
||
quickEditPanel && quickEditSourceLayer
|
||
? {
|
||
left: clamp(
|
||
viewport.x +
|
||
(quickEditSourceLayer.x + quickEditSourceLayer.width / 2) *
|
||
viewport.scale,
|
||
12,
|
||
Math.max(12, canvasSize.width - 12),
|
||
),
|
||
top: clamp(
|
||
viewport.y +
|
||
(quickEditSourceLayer.y + quickEditSourceLayer.height) *
|
||
viewport.scale +
|
||
12,
|
||
12,
|
||
Math.max(12, canvasSize.height - 360),
|
||
),
|
||
}
|
||
: null;
|
||
const quickEditSizeOptions = quickEditPanel
|
||
? buildQuickEditSizeOptions(quickEditPanel.size)
|
||
: [];
|
||
const quickEditModelOptions = quickEditPanel
|
||
? buildQuickEditModelOptions(quickEditPanel.model)
|
||
: [];
|
||
const characterAnimationPrice = characterAnimationPanel
|
||
? calculateCharacterAnimationPrice(
|
||
characterAnimationPanel.resolution,
|
||
characterAnimationPanel.durationSeconds,
|
||
)
|
||
: 0;
|
||
const characterAnimationPanelStyle =
|
||
characterAnimationPanel && characterAnimationSourceLayer
|
||
? {
|
||
left: clamp(
|
||
viewport.x +
|
||
(characterAnimationSourceLayer.x +
|
||
characterAnimationSourceLayer.width) *
|
||
viewport.scale +
|
||
12,
|
||
12,
|
||
Math.max(12, canvasSize.width - 364),
|
||
),
|
||
top: clamp(
|
||
viewport.y + characterAnimationSourceLayer.y * viewport.scale,
|
||
12,
|
||
Math.max(12, canvasSize.height - 520),
|
||
),
|
||
}
|
||
: null;
|
||
const imageContextMenuLayer = imageContextMenu
|
||
? (layers.find((layer) => layer.id === imageContextMenu.layerId) ?? null)
|
||
: null;
|
||
const getContextTargetLayerIds = useCallback(
|
||
(menu: CanvasContextMenuState | null = contextMenu) =>
|
||
resolveContextTargetLayerIds(menu, selectedLayerIdsRef.current),
|
||
[contextMenu],
|
||
);
|
||
const contextTargetIds = getContextTargetLayerIds(contextMenu);
|
||
const contextTargetLayers = getCanvasLayersByIds(layers, contextTargetIds);
|
||
const contextShouldShowLayer = contextTargetLayers.some(
|
||
(layer) => layer.hidden,
|
||
);
|
||
const contextShouldUnlockLayer = contextTargetLayers.some(
|
||
(layer) => layer.locked,
|
||
);
|
||
const canvasHistoryRefs = useMemo(
|
||
() => ({
|
||
layersRef,
|
||
viewportRef,
|
||
generateDialogRef,
|
||
inactiveGenerateDialogsRef,
|
||
selectedLayerIdRef,
|
||
selectedLayerIdsRef,
|
||
}),
|
||
[],
|
||
);
|
||
const canvasHistorySetters = useMemo(
|
||
() => ({
|
||
setLayers,
|
||
setViewport,
|
||
setGenerateDialog,
|
||
setInactiveGenerateDialogs,
|
||
setSelectedLayerId,
|
||
setSelectedLayerIds,
|
||
}),
|
||
[],
|
||
);
|
||
const clearHistoryDragState = useCallback(() => {
|
||
dragStateRef.current = null;
|
||
}, []);
|
||
const canvasHistoryResetters = useMemo(
|
||
() => ({
|
||
setHoveredLayerId,
|
||
setMetadataLayer,
|
||
setCanvasMarquee,
|
||
setSnapGuide,
|
||
setImageContextMenu,
|
||
setContextMenu,
|
||
setIsPanning,
|
||
clearDragState: clearHistoryDragState,
|
||
}),
|
||
[clearHistoryDragState],
|
||
);
|
||
const {
|
||
canUndo,
|
||
canRedo,
|
||
captureCanvasHistory,
|
||
undoCanvasChange,
|
||
redoCanvasChange,
|
||
} = useCanvasHistory({
|
||
refs: canvasHistoryRefs,
|
||
setters: canvasHistorySetters,
|
||
resetters: canvasHistoryResetters,
|
||
});
|
||
const groupedAssets = useMemo(
|
||
() =>
|
||
assetFolders.map((folder) => ({
|
||
...folder,
|
||
assets: assets.filter((asset) => asset.folderId === folder.id),
|
||
})),
|
||
[assetFolders, assets],
|
||
);
|
||
const selectableAssets = useMemo(
|
||
() => assets.filter((asset) => asset.sourceKind === 'uploaded'),
|
||
[assets],
|
||
);
|
||
const allSelectableAssetsSelected =
|
||
selectableAssets.length > 0 &&
|
||
selectableAssets.every((asset) => selectedAssetIds.has(asset.id));
|
||
|
||
const selectSingleLayer = useCallback((layerId: string | null) => {
|
||
setSelectedLayerId(layerId);
|
||
setSelectedLayerIds(layerId ? [layerId] : []);
|
||
if (layerId) {
|
||
setGenerateDialog((currentDialog) =>
|
||
currentDialog?.mode === 'generate' ||
|
||
currentDialog?.mode === 'spec' ||
|
||
currentDialog?.mode === 'character' ||
|
||
currentDialog?.mode === 'icon'
|
||
? {
|
||
...currentDialog,
|
||
composerOpen: false,
|
||
}
|
||
: currentDialog,
|
||
);
|
||
}
|
||
}, []);
|
||
const projectPersistenceRefs = useMemo(
|
||
() => ({
|
||
layersRef,
|
||
viewportRef,
|
||
}),
|
||
[],
|
||
);
|
||
const projectPersistenceSetters = useMemo(
|
||
() => ({
|
||
setProjectTitle,
|
||
setProjectRenameValue,
|
||
setViewport,
|
||
setLayers,
|
||
selectSingleLayer,
|
||
setLayerCounter: (value: number) => {
|
||
layerCounterRef.current = value;
|
||
},
|
||
}),
|
||
[selectSingleLayer],
|
||
);
|
||
const { projectId, appendCanvasLayersWithResources } =
|
||
useImageCanvasProjectPersistence({
|
||
refs: projectPersistenceRefs,
|
||
setters: projectPersistenceSetters,
|
||
layers,
|
||
viewport,
|
||
openEditorLoginModal,
|
||
});
|
||
|
||
const hideGeneratedLayerPanelAfterBlur = useCallback(() => {
|
||
setGenerateDialog((currentDialog) =>
|
||
(currentDialog?.mode === 'generate' ||
|
||
currentDialog?.mode === 'spec' ||
|
||
currentDialog?.mode === 'character' ||
|
||
currentDialog?.mode === 'icon') &&
|
||
currentDialog.status !== 'generating'
|
||
? {
|
||
...currentDialog,
|
||
composerOpen: false,
|
||
}
|
||
: currentDialog,
|
||
);
|
||
}, []);
|
||
|
||
const clearCanvasFocus = useCallback(() => {
|
||
selectSingleLayer(null);
|
||
hideGeneratedLayerPanelAfterBlur();
|
||
setImageContextMenu(null);
|
||
setContextMenu(null);
|
||
}, [hideGeneratedLayerPanelAfterBlur, selectSingleLayer]);
|
||
|
||
const minimapModel = useMemo(
|
||
() => createMinimapModel({ layers, viewport, canvasSize }),
|
||
[canvasSize, layers, viewport],
|
||
);
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
loadEditorAssetLibrary()
|
||
.then((library) => {
|
||
if (cancelled) {
|
||
return;
|
||
}
|
||
const nextLibrary = normalizeAssetLibrary(library);
|
||
setAssetFolders(nextLibrary.folders);
|
||
setAssets(nextLibrary.assets);
|
||
const defaultFolder = nextLibrary.folders.find(
|
||
(folder) => folder.systemDefault,
|
||
);
|
||
setActiveUploadFolderId(
|
||
defaultFolder?.id ?? nextLibrary.folders[0]?.id ?? 'project',
|
||
);
|
||
})
|
||
.catch((error: unknown) => {
|
||
if (!cancelled && isEditorAuthError(error)) {
|
||
openEditorLoginModal();
|
||
}
|
||
});
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [openEditorLoginModal]);
|
||
|
||
useEffect(() => {
|
||
const viewportElement = canvasViewportRef.current;
|
||
if (!viewportElement) {
|
||
return undefined;
|
||
}
|
||
|
||
const updateCanvasSize = () => {
|
||
setCanvasSize({
|
||
width: viewportElement.clientWidth || DEFAULT_CANVAS_SIZE.width,
|
||
height: viewportElement.clientHeight || DEFAULT_CANVAS_SIZE.height,
|
||
});
|
||
};
|
||
|
||
updateCanvasSize();
|
||
|
||
if (typeof ResizeObserver === 'undefined') {
|
||
window.addEventListener('resize', updateCanvasSize);
|
||
return () => window.removeEventListener('resize', updateCanvasSize);
|
||
}
|
||
|
||
const observer = new ResizeObserver(updateCanvasSize);
|
||
observer.observe(viewportElement);
|
||
return () => observer.disconnect();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const handleKeyDown = (event: KeyboardEvent) => {
|
||
if (
|
||
(event.ctrlKey || event.metaKey) &&
|
||
event.code === 'KeyZ' &&
|
||
!isEditableTarget(event)
|
||
) {
|
||
event.preventDefault();
|
||
if (event.shiftKey) {
|
||
redoCanvasChange();
|
||
} else {
|
||
undoCanvasChange();
|
||
}
|
||
return;
|
||
}
|
||
if (event.key === 'Shift') {
|
||
isShiftPressedRef.current = true;
|
||
}
|
||
if (
|
||
(event.key === 'Backspace' || event.key === 'Delete') &&
|
||
!event.repeat &&
|
||
!isEditableTarget(event)
|
||
) {
|
||
const currentDialog = generateDialogRef.current;
|
||
const currentSelectedLayerId = selectedLayerIdRef.current;
|
||
if (currentSelectedLayerId) {
|
||
event.preventDefault();
|
||
deleteLayerByIdRef.current(currentSelectedLayerId);
|
||
return;
|
||
}
|
||
if (
|
||
currentDialog?.placeholder &&
|
||
currentDialog.status !== 'generating' &&
|
||
(currentDialog.mode === 'generate' ||
|
||
currentDialog.mode === 'spec' ||
|
||
currentDialog.mode === 'character' ||
|
||
currentDialog.mode === 'icon')
|
||
) {
|
||
event.preventDefault();
|
||
setGenerateDialog(null);
|
||
setActiveTool('select');
|
||
setIsCharacterSpecMenuOpen(false);
|
||
setIsPickingCharacterSpecFromCanvas(false);
|
||
setIsIconSpecMenuOpen(false);
|
||
setIsPickingIconSpecFromCanvas(false);
|
||
return;
|
||
}
|
||
}
|
||
if (event.key === 'Escape') {
|
||
setActiveSidebarPanel(null);
|
||
setIsZoomMenuOpen(false);
|
||
setIsBackgroundSettingsOpen(false);
|
||
setIsSpecMenuOpen(false);
|
||
setImageContextMenu(null);
|
||
setContextMenu(null);
|
||
setQuickEditPanel((currentPanel) =>
|
||
currentPanel?.status === 'generating' ? currentPanel : null,
|
||
);
|
||
setIsCharacterSpecMenuOpen(false);
|
||
setIsPickingCharacterSpecFromCanvas(false);
|
||
setIsIconSpecMenuOpen(false);
|
||
setIsPickingIconSpecFromCanvas(false);
|
||
setGenerateDialog((currentDialog) => {
|
||
if (!currentDialog || currentDialog.status === 'generating') {
|
||
return currentDialog;
|
||
}
|
||
if (
|
||
currentDialog.mode === 'generate' ||
|
||
currentDialog.mode === 'spec'
|
||
) {
|
||
return {
|
||
...currentDialog,
|
||
composerOpen: false,
|
||
};
|
||
}
|
||
if (currentDialog.mode === 'character') {
|
||
return currentDialog;
|
||
}
|
||
if (currentDialog.mode === 'icon') {
|
||
return currentDialog;
|
||
}
|
||
return null;
|
||
});
|
||
return;
|
||
}
|
||
if (event.code !== 'Space' || event.repeat || isEditableTarget(event)) {
|
||
return;
|
||
}
|
||
event.preventDefault();
|
||
setIsSpacePanning(true);
|
||
};
|
||
const handleKeyUp = (event: KeyboardEvent) => {
|
||
if (event.key === 'Shift') {
|
||
isShiftPressedRef.current = false;
|
||
}
|
||
if (event.code !== 'Space') {
|
||
return;
|
||
}
|
||
event.preventDefault();
|
||
setIsSpacePanning(false);
|
||
};
|
||
|
||
window.addEventListener('keydown', handleKeyDown);
|
||
window.addEventListener('keyup', handleKeyUp);
|
||
return () => {
|
||
window.removeEventListener('keydown', handleKeyDown);
|
||
window.removeEventListener('keyup', handleKeyUp);
|
||
};
|
||
}, [redoCanvasChange, undoCanvasChange]);
|
||
|
||
useEffect(() => {
|
||
const blockBrowserZoom = (event: WheelEvent) => {
|
||
const editorElement = editorRootRef.current;
|
||
if (
|
||
editorElement &&
|
||
event.target instanceof Node &&
|
||
editorElement.contains(event.target) &&
|
||
(event.ctrlKey || event.metaKey)
|
||
) {
|
||
event.preventDefault();
|
||
}
|
||
};
|
||
window.addEventListener('wheel', blockBrowserZoom, {
|
||
capture: true,
|
||
passive: false,
|
||
});
|
||
return () => {
|
||
window.removeEventListener('wheel', blockBrowserZoom, { capture: true });
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const updatePointerDrag = (event: PointerEvent) => {
|
||
const currentDrag = assetPointerDragRef.current;
|
||
if (!currentDrag || currentDrag.pointerId !== event.pointerId) {
|
||
return;
|
||
}
|
||
const distance = Math.hypot(
|
||
event.clientX - currentDrag.startClientX,
|
||
event.clientY - currentDrag.startClientY,
|
||
);
|
||
const dropFolderId = resolveAssetFolderId(event.clientX, event.clientY);
|
||
const nextDrag: AssetPointerDragState = {
|
||
...currentDrag,
|
||
currentClientX: event.clientX,
|
||
currentClientY: event.clientY,
|
||
active: currentDrag.active || distance > 4,
|
||
dropFolderId,
|
||
};
|
||
assetPointerDragRef.current = nextDrag;
|
||
setAssetPointerDrag(nextDrag);
|
||
setUploadDropTarget(
|
||
resolveCanvasPoint(event.clientX, event.clientY) ? 'canvas' : null,
|
||
);
|
||
updateAssetMoveDropFolder(dropFolderId);
|
||
};
|
||
|
||
const finishPointerDrag = (event: PointerEvent) => {
|
||
const currentDrag = assetPointerDragRef.current;
|
||
if (!currentDrag || currentDrag.pointerId !== event.pointerId) {
|
||
return;
|
||
}
|
||
const canvasPoint = resolveCanvasPoint(event.clientX, event.clientY);
|
||
const dropFolderId =
|
||
resolveAssetFolderId(event.clientX, event.clientY) ??
|
||
currentDrag.dropFolderId;
|
||
const draggedAsset = assetsRef.current.find(
|
||
(asset) => asset.id === currentDrag.assetId,
|
||
);
|
||
assetPointerDragRef.current = null;
|
||
setAssetPointerDrag(null);
|
||
setUploadDropTarget(null);
|
||
updateAssetMoveDropFolder(null);
|
||
if (!currentDrag.active || !draggedAsset) {
|
||
return;
|
||
}
|
||
suppressAssetClickRef.current = true;
|
||
window.setTimeout(() => {
|
||
suppressAssetClickRef.current = false;
|
||
}, 0);
|
||
if (dropFolderId && dropFolderId !== draggedAsset.folderId) {
|
||
moveAssetToFolderRef.current(draggedAsset.id, dropFolderId);
|
||
return;
|
||
}
|
||
if (canvasPoint) {
|
||
addAssetLayerRef.current(draggedAsset, canvasPoint);
|
||
}
|
||
};
|
||
|
||
window.addEventListener('pointermove', updatePointerDrag);
|
||
window.addEventListener('pointerup', finishPointerDrag);
|
||
window.addEventListener('pointercancel', finishPointerDrag);
|
||
return () => {
|
||
window.removeEventListener('pointermove', updatePointerDrag);
|
||
window.removeEventListener('pointerup', finishPointerDrag);
|
||
window.removeEventListener('pointercancel', finishPointerDrag);
|
||
};
|
||
}, []);
|
||
|
||
const fitLayers = useCallback(
|
||
(targetLayers: CanvasLayer[] = layers) => {
|
||
const nextViewport = fitViewportToLayers({
|
||
layers: targetLayers,
|
||
canvasSize,
|
||
});
|
||
if (!nextViewport) {
|
||
return;
|
||
}
|
||
|
||
captureCanvasHistory();
|
||
setViewport(nextViewport);
|
||
},
|
||
[captureCanvasHistory, canvasSize, layers],
|
||
);
|
||
|
||
const updateScaleFromCenter = (nextScale: number) => {
|
||
const viewportElement = canvasViewportRef.current;
|
||
if (!viewportElement) {
|
||
captureCanvasHistory();
|
||
setViewport((currentViewport) =>
|
||
scaleViewportFromScreenPoint({
|
||
viewport: currentViewport,
|
||
nextScale,
|
||
screenPoint: null,
|
||
}),
|
||
);
|
||
return;
|
||
}
|
||
|
||
const rect = viewportElement.getBoundingClientRect();
|
||
const centerX = rect.width > 0 ? rect.width / 2 : canvasSize.width / 2;
|
||
const centerY = rect.height > 0 ? rect.height / 2 : canvasSize.height / 2;
|
||
captureCanvasHistory();
|
||
setViewport((currentViewport) =>
|
||
scaleViewportFromScreenPoint({
|
||
viewport: currentViewport,
|
||
nextScale,
|
||
screenPoint: { x: centerX, y: centerY },
|
||
}),
|
||
);
|
||
};
|
||
|
||
const resolveCanvasPoint = (clientX: number, clientY: number) => {
|
||
const rect = canvasViewportRef.current?.getBoundingClientRect() ?? null;
|
||
return resolveCanvasPointFromClient({ clientX, clientY, rect });
|
||
};
|
||
|
||
const getCanvasDropPoint = (event: ReactDragEvent<HTMLDivElement>) =>
|
||
resolveCanvasDropPoint({
|
||
clientX: event.clientX,
|
||
clientY: event.clientY,
|
||
rect: canvasViewportRef.current?.getBoundingClientRect() ?? null,
|
||
canvasSize,
|
||
});
|
||
|
||
const getCanvasPointFromClient = (clientX: number, clientY: number) => {
|
||
return getWorldPointFromClient({
|
||
clientX,
|
||
clientY,
|
||
rect: canvasViewportRef.current?.getBoundingClientRect() ?? null,
|
||
viewport,
|
||
});
|
||
};
|
||
|
||
const duplicateLayersToPoint = (
|
||
sourceLayers: CanvasLayer[],
|
||
canvasPoint?: { x: number; y: number },
|
||
options: { renameCopies?: boolean } = {},
|
||
) =>
|
||
duplicateCanvasLayers({
|
||
sourceLayers,
|
||
allLayers: layersRef.current,
|
||
canvasPoint,
|
||
renameCopies: options.renameCopies !== false,
|
||
});
|
||
|
||
const pasteCanvasClipboard = (canvasPoint?: { x: number; y: number }) => {
|
||
if (!canvasClipboard?.layers.length) {
|
||
return;
|
||
}
|
||
const nextLayers = duplicateLayersToPoint(
|
||
canvasClipboard.layers,
|
||
canvasPoint,
|
||
{
|
||
renameCopies: canvasClipboard.mode !== 'cut',
|
||
},
|
||
);
|
||
if (!nextLayers.length) {
|
||
return;
|
||
}
|
||
captureCanvasHistory();
|
||
setLayers((currentLayers) => [...currentLayers, ...nextLayers]);
|
||
setSelectedLayerIds(nextLayers.map((layer) => layer.id));
|
||
setSelectedLayerId(nextLayers[0]?.id ?? null);
|
||
setActiveTool('select');
|
||
setContextMenu(null);
|
||
};
|
||
|
||
const copyContextLayers = (options: { cut?: boolean } = {}) => {
|
||
const targetIds = getContextTargetLayerIds();
|
||
const clipboard = createCanvasLayerClipboard(
|
||
layers,
|
||
targetIds,
|
||
options.cut ? 'cut' : 'copy',
|
||
);
|
||
if (!clipboard) {
|
||
return;
|
||
}
|
||
setCanvasClipboard(clipboard);
|
||
if (options.cut) {
|
||
captureCanvasHistory();
|
||
setLayers((currentLayers) =>
|
||
removeCanvasLayers(currentLayers, targetIds),
|
||
);
|
||
selectSingleLayer(null);
|
||
setMetadataLayer((currentLayer) =>
|
||
currentLayer && targetIds.includes(currentLayer.id)
|
||
? null
|
||
: currentLayer,
|
||
);
|
||
}
|
||
setContextMenu(null);
|
||
};
|
||
|
||
const duplicateContextLayers = () => {
|
||
const targetIds = getContextTargetLayerIds();
|
||
const targetLayers = getCanvasLayersByIds(layers, targetIds);
|
||
const nextLayers = duplicateLayersToPoint(targetLayers);
|
||
if (!nextLayers.length) {
|
||
return;
|
||
}
|
||
captureCanvasHistory();
|
||
setLayers((currentLayers) => [...currentLayers, ...nextLayers]);
|
||
setSelectedLayerIds(nextLayers.map((layer) => layer.id));
|
||
setSelectedLayerId(nextLayers[0]?.id ?? null);
|
||
setContextMenu(null);
|
||
};
|
||
|
||
const updateContextLayers = (
|
||
updater: (layer: CanvasLayer, targetIds: string[]) => CanvasLayer,
|
||
) => {
|
||
const targetIds = getContextTargetLayerIds();
|
||
if (!targetIds.length) {
|
||
return;
|
||
}
|
||
captureCanvasHistory();
|
||
setLayers((currentLayers) =>
|
||
updateCanvasLayersByIds(currentLayers, targetIds, updater),
|
||
);
|
||
setContextMenu(null);
|
||
};
|
||
|
||
const moveContextLayers = (mode: CanvasLayerMoveMode) => {
|
||
const targetIds = getContextTargetLayerIds();
|
||
if (!targetIds.length) {
|
||
return;
|
||
}
|
||
captureCanvasHistory();
|
||
setLayers((currentLayers) =>
|
||
moveCanvasLayers(currentLayers, targetIds, mode),
|
||
);
|
||
setContextMenu(null);
|
||
};
|
||
|
||
const groupContextLayers = () => {
|
||
const targetIds = getContextTargetLayerIds();
|
||
if (!targetIds.length) {
|
||
return;
|
||
}
|
||
const groupId = `layer-group-${Date.now()}`;
|
||
captureCanvasHistory();
|
||
setLayers((currentLayers) =>
|
||
groupCanvasLayers(currentLayers, targetIds, groupId),
|
||
);
|
||
setContextMenu(null);
|
||
};
|
||
|
||
const ungroupContextLayers = () => {
|
||
const targetIds = getContextTargetLayerIds();
|
||
if (!targetIds.length) {
|
||
return;
|
||
}
|
||
captureCanvasHistory();
|
||
setLayers((currentLayers) => ungroupCanvasLayers(currentLayers, targetIds));
|
||
setContextMenu(null);
|
||
};
|
||
|
||
const toggleContextLayerVisibility = () => {
|
||
const targetIds = getContextTargetLayerIds();
|
||
if (!targetIds.length) {
|
||
return;
|
||
}
|
||
captureCanvasHistory();
|
||
setLayers((currentLayers) =>
|
||
toggleCanvasLayersVisibility(currentLayers, targetIds),
|
||
);
|
||
setContextMenu(null);
|
||
};
|
||
|
||
const toggleContextLayerLock = () => {
|
||
const targetIds = getContextTargetLayerIds();
|
||
if (!targetIds.length) {
|
||
return;
|
||
}
|
||
captureCanvasHistory();
|
||
setLayers((currentLayers) =>
|
||
toggleCanvasLayersLock(currentLayers, targetIds),
|
||
);
|
||
setContextMenu(null);
|
||
};
|
||
|
||
const flipContextLayers = (axis: CanvasLayerFlipAxis) => {
|
||
const targetIds = getContextTargetLayerIds();
|
||
if (!targetIds.length) {
|
||
return;
|
||
}
|
||
captureCanvasHistory();
|
||
setLayers((currentLayers) =>
|
||
flipCanvasLayers(currentLayers, targetIds, axis),
|
||
);
|
||
setContextMenu(null);
|
||
};
|
||
|
||
const deleteContextLayers = () => {
|
||
const targetIds = getContextTargetLayerIds();
|
||
if (!targetIds.length) {
|
||
return;
|
||
}
|
||
captureCanvasHistory();
|
||
setLayers((currentLayers) => removeCanvasLayers(currentLayers, targetIds));
|
||
selectSingleLayer(null);
|
||
setHoveredLayerId(null);
|
||
setMetadataLayer((currentLayer) =>
|
||
currentLayer && targetIds.includes(currentLayer.id) ? null : currentLayer,
|
||
);
|
||
setContextMenu(null);
|
||
};
|
||
|
||
const exportContextLayer = () => {
|
||
const targetIds = getContextTargetLayerIds();
|
||
const targetLayer = layers.find((layer) => targetIds.includes(layer.id));
|
||
if (!targetLayer) {
|
||
return;
|
||
}
|
||
const link = document.createElement('a');
|
||
link.href = targetLayer.src;
|
||
link.download = `${sanitizeExportFilePart(targetLayer.title, 'canvas-layer')}.png`;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
link.remove();
|
||
setContextMenu(null);
|
||
};
|
||
|
||
const resolveAssetFolderId = (clientX: number, clientY: number) => {
|
||
const listElement = assetListRef.current;
|
||
if (!listElement) {
|
||
return null;
|
||
}
|
||
const listRect = listElement.getBoundingClientRect();
|
||
if (
|
||
clientX < listRect.left ||
|
||
clientX > listRect.right ||
|
||
clientY < listRect.top ||
|
||
clientY > listRect.bottom
|
||
) {
|
||
return null;
|
||
}
|
||
const folderElements = [
|
||
...listElement.querySelectorAll<HTMLElement>('[data-asset-folder-id]'),
|
||
];
|
||
const matchedFolder = folderElements.find((element) => {
|
||
const rect = element.getBoundingClientRect();
|
||
return (
|
||
clientX >= rect.left &&
|
||
clientX <= rect.right &&
|
||
clientY >= rect.top &&
|
||
clientY <= rect.bottom
|
||
);
|
||
});
|
||
return matchedFolder?.dataset.assetFolderId ?? null;
|
||
};
|
||
|
||
const updateAssetMoveDropFolder = (folderId: string | null) => {
|
||
setAssetMoveDropFolderId(folderId);
|
||
if (!folderId) {
|
||
setPinnedAssetMoveFolderId(null);
|
||
return;
|
||
}
|
||
const listElement = assetListRef.current;
|
||
const header = listElement?.querySelector<HTMLElement>(
|
||
`[data-asset-folder-header-id="${escapeCssIdentifier(folderId)}"]`,
|
||
);
|
||
const listRect = listElement?.getBoundingClientRect();
|
||
const headerRect = header?.getBoundingClientRect();
|
||
setPinnedAssetMoveFolderId(
|
||
listRect &&
|
||
headerRect &&
|
||
(headerRect.bottom < listRect.top || headerRect.top > listRect.bottom)
|
||
? folderId
|
||
: null,
|
||
);
|
||
};
|
||
|
||
const addAssetLayer = (
|
||
asset: EditorAsset,
|
||
position?: { x: number; y: number },
|
||
) => {
|
||
setActiveUploadFolderId(asset.folderId);
|
||
layerCounterRef.current += 1;
|
||
const nextLayer = createLayerFromAsset(
|
||
asset,
|
||
layerCounterRef.current,
|
||
viewport,
|
||
{
|
||
x: position?.x ?? canvasSize.width / 2,
|
||
y: position?.y ?? canvasSize.height / 2,
|
||
},
|
||
);
|
||
captureCanvasHistory();
|
||
appendCanvasLayersWithResources([nextLayer]);
|
||
selectSingleLayer(nextLayer.id);
|
||
setHoveredLayerId(null);
|
||
};
|
||
addAssetLayerRef.current = addAssetLayer;
|
||
|
||
const exportCanvasAssets = async () => {
|
||
if (isExportingAssets) {
|
||
return;
|
||
}
|
||
const exportableLayers = layers
|
||
.filter((layer) => layer.src.trim().length > 0)
|
||
.sort((left, right) => left.zIndex - right.zIndex);
|
||
if (!exportableLayers.length) {
|
||
setAssetExportStatus({
|
||
tone: 'info',
|
||
message: '当前画布没有可导出的素材',
|
||
});
|
||
return;
|
||
}
|
||
|
||
setIsExportingAssets(true);
|
||
setAssetExportStatus(null);
|
||
|
||
try {
|
||
const exportedAt = new Date();
|
||
const projectName = sanitizeExportFilePart(projectTitle, '未命名画布');
|
||
const rootFolderName = `${projectName}-画布素材`;
|
||
const zip = new JSZip();
|
||
const rootFolder = zip.folder(rootFolderName) ?? zip;
|
||
const imagesFolder = rootFolder.folder('images') ?? rootFolder;
|
||
const imageByKey = new Map<string, CanvasAssetExportImage>();
|
||
const usedFileNames = new Map<string, number>();
|
||
|
||
for (const layer of exportableLayers) {
|
||
const key = getLayerExportKey(layer);
|
||
if (imageByKey.has(key)) {
|
||
continue;
|
||
}
|
||
const index = imageByKey.size + 1;
|
||
const safeTitle = sanitizeExportFilePart(layer.title, '画布素材');
|
||
const baseFileName = `${String(index).padStart(3, '0')}-${safeTitle}`;
|
||
const duplicateCount = usedFileNames.get(baseFileName) ?? 0;
|
||
usedFileNames.set(baseFileName, duplicateCount + 1);
|
||
const indexedFileName =
|
||
duplicateCount > 0
|
||
? `${baseFileName}-${duplicateCount + 1}`
|
||
: baseFileName;
|
||
|
||
try {
|
||
const blob = await readLayerImageBlob(layer);
|
||
const extension = getImageExtensionFromTypeOrSrc(
|
||
blob.type,
|
||
layer.src,
|
||
);
|
||
const file = `images/${indexedFileName}.${extension}`;
|
||
imageByKey.set(key, {
|
||
key,
|
||
file,
|
||
layer,
|
||
blob,
|
||
});
|
||
imagesFolder.file(
|
||
`${indexedFileName}.${extension}`,
|
||
await blobToUint8Array(blob),
|
||
);
|
||
} catch (error) {
|
||
imageByKey.set(key, {
|
||
key,
|
||
file: `images/${indexedFileName}.png`,
|
||
layer,
|
||
error: error instanceof Error ? error.message : '图片读取失败',
|
||
});
|
||
}
|
||
}
|
||
|
||
const failedImages = [...imageByKey.values()].filter(
|
||
(image) => image.error,
|
||
);
|
||
const successfulImages = [...imageByKey.values()].filter(
|
||
(image) => image.blob,
|
||
);
|
||
if (!successfulImages.length) {
|
||
setAssetExportStatus({
|
||
tone: 'error',
|
||
message: '素材导出失败',
|
||
});
|
||
return;
|
||
}
|
||
|
||
const metadata: CanvasAssetExportMetadata = {
|
||
projectId,
|
||
projectTitle,
|
||
exportedAt: exportedAt.toISOString(),
|
||
layers: exportableLayers.map((layer) => {
|
||
const image = imageByKey.get(getLayerExportKey(layer));
|
||
return buildLayerExportMetadata(
|
||
layer,
|
||
image?.blob ? image.file : null,
|
||
image?.error,
|
||
);
|
||
}),
|
||
failedImages: failedImages.map((image) => ({
|
||
key: image.key,
|
||
title: image.layer.title,
|
||
src: image.layer.src,
|
||
error: image.error ?? '图片读取失败',
|
||
})),
|
||
};
|
||
const manifest = [
|
||
`项目：${projectTitle}`,
|
||
`导出时间：${metadata.exportedAt}`,
|
||
`素材数量：${successfulImages.length}`,
|
||
`图层数量：${exportableLayers.length}`,
|
||
failedImages.length ? `失败素材数量：${failedImages.length}` : null,
|
||
]
|
||
.filter(Boolean)
|
||
.join('\n');
|
||
|
||
rootFolder.file('metadata.json', JSON.stringify(metadata, null, 2));
|
||
rootFolder.file('manifest.txt', manifest);
|
||
|
||
const zipBlob = await zip.generateAsync({ type: 'blob' });
|
||
if (
|
||
typeof URL.createObjectURL !== 'function' ||
|
||
typeof URL.revokeObjectURL !== 'function'
|
||
) {
|
||
setAssetExportStatus({
|
||
tone: 'error',
|
||
message: '当前浏览器不支持素材下载',
|
||
});
|
||
return;
|
||
}
|
||
|
||
const downloadUrl = URL.createObjectURL(zipBlob);
|
||
const link = document.createElement('a');
|
||
link.href = downloadUrl;
|
||
link.download = `${rootFolderName}-${formatExportDate(exportedAt)}.zip`;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
link.remove();
|
||
URL.revokeObjectURL(downloadUrl);
|
||
setAssetExportStatus({
|
||
tone: failedImages.length ? 'error' : 'success',
|
||
message: failedImages.length ? '部分素材未能导出' : '画布素材已导出',
|
||
});
|
||
} catch {
|
||
setAssetExportStatus({
|
||
tone: 'error',
|
||
message: '素材导出失败',
|
||
});
|
||
} finally {
|
||
setIsExportingAssets(false);
|
||
}
|
||
};
|
||
|
||
const startProjectRename = () => {
|
||
setProjectRenameValue(projectTitle);
|
||
setProjectRenameError(null);
|
||
setIsRenamingProject(true);
|
||
};
|
||
|
||
const cancelProjectRename = () => {
|
||
setProjectRenameValue(projectTitle);
|
||
setProjectRenameError(null);
|
||
setIsRenamingProject(false);
|
||
};
|
||
|
||
const submitProjectRename = () => {
|
||
const nextTitle = projectRenameValue.trim();
|
||
if (!nextTitle) {
|
||
setProjectRenameError('项目名称不能为空');
|
||
return;
|
||
}
|
||
if (!projectId || nextTitle === projectTitle) {
|
||
setProjectRenameValue(projectTitle);
|
||
setProjectRenameError(null);
|
||
setIsRenamingProject(false);
|
||
return;
|
||
}
|
||
setIsProjectRenameSaving(true);
|
||
setProjectRenameError(null);
|
||
renameEditorProject(projectId, nextTitle)
|
||
.then((project) => {
|
||
const savedTitle = project.title?.trim() || nextTitle;
|
||
setProjectTitle(savedTitle);
|
||
setProjectRenameValue(savedTitle);
|
||
setIsRenamingProject(false);
|
||
})
|
||
.catch((error: unknown) => {
|
||
if (isEditorAuthError(error)) {
|
||
openEditorLoginModal();
|
||
}
|
||
setProjectRenameError(
|
||
error instanceof Error ? error.message : '重命名项目失败',
|
||
);
|
||
})
|
||
.finally(() => setIsProjectRenameSaving(false));
|
||
};
|
||
|
||
const startRenamingAsset = (asset: EditorAsset) => {
|
||
setRenamingAsset({
|
||
assetId: asset.id,
|
||
value: asset.label,
|
||
});
|
||
};
|
||
|
||
const commitAssetRename = (asset: EditorAsset) => {
|
||
const nextLabel = renamingAsset?.value.trim();
|
||
if (!nextLabel) {
|
||
setRenamingAsset(null);
|
||
return;
|
||
}
|
||
setAssets((currentAssets) =>
|
||
currentAssets.map((currentAsset) =>
|
||
currentAsset.id === asset.id
|
||
? {
|
||
...currentAsset,
|
||
label: nextLabel,
|
||
}
|
||
: currentAsset,
|
||
),
|
||
);
|
||
if (asset.persisted) {
|
||
updateEditorAsset(asset.id, { label: nextLabel }).catch(() => {});
|
||
}
|
||
setRenamingAsset(null);
|
||
};
|
||
|
||
const toggleAssetFolder = (folderId: string) => {
|
||
const nextFolder = assetFolders.find((folder) => folder.id === folderId);
|
||
const nextCollapsed = !(nextFolder?.collapsed ?? false);
|
||
setAssetFolders((currentFolders) =>
|
||
currentFolders.map((folder) =>
|
||
folder.id === folderId
|
||
? {
|
||
...folder,
|
||
collapsed: !folder.collapsed,
|
||
}
|
||
: folder,
|
||
),
|
||
);
|
||
if (nextFolder?.persisted) {
|
||
updateEditorAssetFolder(folderId, { collapsed: nextCollapsed }).catch(
|
||
() => {},
|
||
);
|
||
}
|
||
};
|
||
|
||
const commitNewAssetFolder = async () => {
|
||
const label = newFolderName.trim();
|
||
if (!label) {
|
||
setCreatingFolder(false);
|
||
setNewFolderName('');
|
||
return;
|
||
}
|
||
const folderId = `folder-${Date.now()}`;
|
||
setAssetFolders((currentFolders) => [
|
||
...currentFolders,
|
||
{
|
||
id: folderId,
|
||
label,
|
||
collapsed: false,
|
||
systemDefault: false,
|
||
persisted: false,
|
||
},
|
||
]);
|
||
setActiveUploadFolderId(folderId);
|
||
setCreatingFolder(false);
|
||
setNewFolderName('');
|
||
try {
|
||
const folder = await createEditorAssetFolder(
|
||
label,
|
||
assetFolders.length + 100,
|
||
);
|
||
setAssetFolders((currentFolders) =>
|
||
currentFolders.map((currentFolder) =>
|
||
currentFolder.id === folderId
|
||
? {
|
||
id: folder.folderId,
|
||
label: folder.label,
|
||
collapsed: folder.collapsed,
|
||
systemDefault: folder.systemDefault,
|
||
persisted: true,
|
||
}
|
||
: currentFolder,
|
||
),
|
||
);
|
||
setAssets((currentAssets) =>
|
||
currentAssets.map((asset) =>
|
||
asset.folderId === folderId
|
||
? {
|
||
...asset,
|
||
folderId: folder.folderId,
|
||
}
|
||
: asset,
|
||
),
|
||
);
|
||
setActiveUploadFolderId(folder.folderId);
|
||
} catch {
|
||
// 本地临时文件夹仍可继续使用；下次刷新以后端为准。
|
||
}
|
||
};
|
||
|
||
const deleteUploadedAsset = (asset: EditorAsset) => {
|
||
if (asset.sourceKind !== 'uploaded') {
|
||
return;
|
||
}
|
||
setAssets((currentAssets) =>
|
||
currentAssets.filter((currentAsset) => currentAsset.id !== asset.id),
|
||
);
|
||
setLayers((currentLayers) =>
|
||
currentLayers.filter((layer) => !isLayerLinkedToAsset(layer, asset)),
|
||
);
|
||
setSelectedLayerIds((currentIds) =>
|
||
currentIds.filter((layerId) =>
|
||
layers.every(
|
||
(layer) =>
|
||
layer.id !== layerId || !isLayerLinkedToAsset(layer, asset),
|
||
),
|
||
),
|
||
);
|
||
setSelectedLayerId((currentId) => {
|
||
if (!currentId) {
|
||
return currentId;
|
||
}
|
||
const currentLayer = layers.find((layer) => layer.id === currentId);
|
||
return currentLayer && isLayerLinkedToAsset(currentLayer, asset)
|
||
? null
|
||
: currentId;
|
||
});
|
||
setRenamingAsset((currentRename) =>
|
||
currentRename?.assetId === asset.id ? null : currentRename,
|
||
);
|
||
if (asset.persisted) {
|
||
deleteEditorAsset(asset.id).catch(() => {});
|
||
}
|
||
};
|
||
|
||
const startRenamingFolder = (folder: EditorAssetFolder) => {
|
||
setRenamingFolder({
|
||
folderId: folder.id,
|
||
value: folder.label,
|
||
});
|
||
};
|
||
|
||
const commitFolderRename = (folder: EditorAssetFolder) => {
|
||
const nextLabel = renamingFolder?.value.trim();
|
||
if (!nextLabel) {
|
||
setRenamingFolder(null);
|
||
return;
|
||
}
|
||
setAssetFolders((currentFolders) =>
|
||
currentFolders.map((currentFolder) =>
|
||
currentFolder.id === folder.id
|
||
? {
|
||
...currentFolder,
|
||
label: nextLabel,
|
||
}
|
||
: currentFolder,
|
||
),
|
||
);
|
||
if (folder.persisted) {
|
||
updateEditorAssetFolder(folder.id, { label: nextLabel }).catch(() => {});
|
||
}
|
||
setRenamingFolder(null);
|
||
};
|
||
|
||
const deleteAssetFolder = (folder: EditorAssetFolder) => {
|
||
if (folder.systemDefault) {
|
||
return;
|
||
}
|
||
const defaultFolder =
|
||
assetFolders.find((currentFolder) => currentFolder.systemDefault) ??
|
||
assetFolders[0];
|
||
if (!defaultFolder) {
|
||
return;
|
||
}
|
||
setAssetFolders((currentFolders) =>
|
||
currentFolders.filter((currentFolder) => currentFolder.id !== folder.id),
|
||
);
|
||
setAssets((currentAssets) =>
|
||
currentAssets.map((asset) =>
|
||
asset.folderId === folder.id
|
||
? {
|
||
...asset,
|
||
folderId: defaultFolder.id,
|
||
}
|
||
: asset,
|
||
),
|
||
);
|
||
if (folder.persisted) {
|
||
deleteEditorAssetFolder(folder.id)
|
||
.then((library) => {
|
||
const nextLibrary = normalizeAssetLibrary(library);
|
||
setAssetFolders(nextLibrary.folders);
|
||
setAssets(nextLibrary.assets);
|
||
})
|
||
.catch(() => {});
|
||
}
|
||
};
|
||
|
||
const toggleAssetSelected = (assetId: string) => {
|
||
setSelectedAssetIds((currentIds) => {
|
||
const nextIds = new Set(currentIds);
|
||
if (nextIds.has(assetId)) {
|
||
nextIds.delete(assetId);
|
||
} else {
|
||
nextIds.add(assetId);
|
||
}
|
||
return nextIds;
|
||
});
|
||
};
|
||
|
||
const toggleAllAssetsSelected = () => {
|
||
setSelectedAssetIds(
|
||
allSelectableAssetsSelected
|
||
? new Set()
|
||
: new Set(selectableAssets.map((asset) => asset.id)),
|
||
);
|
||
};
|
||
|
||
const deleteSelectedAssets = () => {
|
||
const ids = [...selectedAssetIds];
|
||
const deletedAssets = assets.filter((asset) =>
|
||
selectedAssetIds.has(asset.id),
|
||
);
|
||
setAssets((currentAssets) =>
|
||
currentAssets.filter((asset) => !selectedAssetIds.has(asset.id)),
|
||
);
|
||
setLayers((currentLayers) =>
|
||
currentLayers.filter(
|
||
(layer) =>
|
||
!deletedAssets.some((asset) => isLayerLinkedToAsset(layer, asset)),
|
||
),
|
||
);
|
||
setSelectedAssetIds(new Set());
|
||
ids.forEach((assetId) => {
|
||
void deleteEditorAsset(assetId);
|
||
});
|
||
};
|
||
|
||
const moveAssetToFolder = (assetId: string, folderId: string) => {
|
||
const asset = assets.find((currentAsset) => currentAsset.id === assetId);
|
||
if (!asset || asset.folderId === folderId) {
|
||
return;
|
||
}
|
||
setAssets((currentAssets) =>
|
||
currentAssets.map((currentAsset) =>
|
||
currentAsset.id === assetId
|
||
? {
|
||
...currentAsset,
|
||
folderId,
|
||
}
|
||
: currentAsset,
|
||
),
|
||
);
|
||
if (asset.persisted) {
|
||
updateEditorAsset(asset.id, { folderId }).catch(() => {});
|
||
}
|
||
};
|
||
|
||
moveAssetToFolderRef.current = moveAssetToFolder;
|
||
|
||
const closeAssetSelectionMode = () => {
|
||
setIsAssetSelectionMode(false);
|
||
setSelectedAssetIds(new Set());
|
||
setAssetMarquee(null);
|
||
};
|
||
|
||
const updateAssetSelectionFromMarquee = (selectionRect: {
|
||
left: number;
|
||
right: number;
|
||
top: number;
|
||
bottom: number;
|
||
}) => {
|
||
const nextSelectedIds = new Set<string>();
|
||
assetListRef.current
|
||
?.querySelectorAll<HTMLElement>('[data-asset-id]')
|
||
.forEach((element) => {
|
||
const assetId = element.dataset.assetId;
|
||
if (!assetId) {
|
||
return;
|
||
}
|
||
const asset = assets.find(
|
||
(currentAsset) => currentAsset.id === assetId,
|
||
);
|
||
if (!asset || asset.sourceKind !== 'uploaded') {
|
||
return;
|
||
}
|
||
const rect = element.getBoundingClientRect();
|
||
const intersects =
|
||
rect.left <= selectionRect.right &&
|
||
rect.right >= selectionRect.left &&
|
||
rect.top <= selectionRect.bottom &&
|
||
rect.bottom >= selectionRect.top;
|
||
if (intersects) {
|
||
nextSelectedIds.add(assetId);
|
||
}
|
||
});
|
||
setSelectedAssetIds(nextSelectedIds);
|
||
};
|
||
|
||
const handleAssetMarqueePointerDown = (
|
||
event: ReactPointerEvent<HTMLDivElement>,
|
||
) => {
|
||
if (!isAssetSelectionMode || event.button !== 0) {
|
||
return;
|
||
}
|
||
const target = event.target as HTMLElement;
|
||
if (target.closest('button, input, textarea, select, [data-asset-id]')) {
|
||
return;
|
||
}
|
||
event.preventDefault();
|
||
assetListRef.current?.setPointerCapture?.(event.pointerId);
|
||
const rect = assetListRef.current?.getBoundingClientRect();
|
||
const startX = event.clientX - (rect?.left ?? 0);
|
||
const startY = event.clientY - (rect?.top ?? 0);
|
||
setAssetMarquee({
|
||
pointerId: event.pointerId,
|
||
startX,
|
||
startY,
|
||
currentX: startX,
|
||
currentY: startY,
|
||
});
|
||
setSelectedAssetIds(new Set());
|
||
};
|
||
|
||
const handleAssetMarqueePointerMove = (
|
||
event: ReactPointerEvent<HTMLDivElement>,
|
||
) => {
|
||
if (!assetMarquee || assetMarquee.pointerId !== event.pointerId) {
|
||
return;
|
||
}
|
||
event.preventDefault();
|
||
const containerRect = assetListRef.current?.getBoundingClientRect();
|
||
const currentX = event.clientX - (containerRect?.left ?? 0);
|
||
const currentY = event.clientY - (containerRect?.top ?? 0);
|
||
const startClientX = (containerRect?.left ?? 0) + assetMarquee.startX;
|
||
const startClientY = (containerRect?.top ?? 0) + assetMarquee.startY;
|
||
setAssetMarquee((currentMarquee) =>
|
||
currentMarquee
|
||
? {
|
||
...currentMarquee,
|
||
currentX,
|
||
currentY,
|
||
}
|
||
: null,
|
||
);
|
||
updateAssetSelectionFromMarquee({
|
||
left: Math.min(startClientX, event.clientX),
|
||
right: Math.max(startClientX, event.clientX),
|
||
top: Math.min(startClientY, event.clientY),
|
||
bottom: Math.max(startClientY, event.clientY),
|
||
});
|
||
};
|
||
|
||
const handleAssetMarqueePointerUp = (
|
||
event: ReactPointerEvent<HTMLDivElement>,
|
||
) => {
|
||
if (!assetMarquee || assetMarquee.pointerId !== event.pointerId) {
|
||
return;
|
||
}
|
||
event.preventDefault();
|
||
if (assetListRef.current?.hasPointerCapture?.(event.pointerId)) {
|
||
assetListRef.current.releasePointerCapture?.(event.pointerId);
|
||
}
|
||
setAssetMarquee(null);
|
||
};
|
||
|
||
const readImageFileAsDataUrl = (file: File) =>
|
||
new Promise<string>((resolve, reject) => {
|
||
const reader = new FileReader();
|
||
reader.onload = () => {
|
||
if (typeof reader.result === 'string') {
|
||
resolve(reader.result);
|
||
return;
|
||
}
|
||
reject(new Error('图片读取失败'));
|
||
};
|
||
reader.onerror = () => reject(reader.error ?? new Error('图片读取失败'));
|
||
reader.readAsDataURL(file);
|
||
});
|
||
|
||
const setCharacterGenerationIdle = (dialog: GenerateDialogState) => ({
|
||
...dialog,
|
||
status: dialog.status === 'failed' ? 'idle' : dialog.status,
|
||
errorMessage: dialog.status === 'failed' ? undefined : dialog.errorMessage,
|
||
});
|
||
|
||
const addCharacterSpecReferenceFiles = async (files: FileList | File[]) => {
|
||
const imageFile = Array.from(files).find(isImageFile);
|
||
if (!imageFile) {
|
||
window.alert('请选择图片文件');
|
||
return;
|
||
}
|
||
|
||
const imageSrc = await readImageFileAsDataUrl(imageFile);
|
||
setGenerateDialog((currentDialog) =>
|
||
currentDialog?.mode === 'character'
|
||
? {
|
||
...setCharacterGenerationIdle(currentDialog),
|
||
characterSpecReference: {
|
||
id: `upload-character-spec-${Date.now()}`,
|
||
label: imageFile.name || '角色形象规范',
|
||
src: imageSrc,
|
||
},
|
||
}
|
||
: currentDialog,
|
||
);
|
||
};
|
||
|
||
const addCharacterReferenceFiles = async (files: FileList | File[]) => {
|
||
const imageFiles = Array.from(files).filter(isImageFile);
|
||
if (!imageFiles.length) {
|
||
window.alert('请选择图片文件');
|
||
return;
|
||
}
|
||
|
||
const references = await Promise.all(
|
||
imageFiles.map(async (file, index) => ({
|
||
id: `upload-character-reference-${Date.now()}-${index}`,
|
||
label: file.name || `参考图${index + 1}`,
|
||
src: await readImageFileAsDataUrl(file),
|
||
})),
|
||
);
|
||
setGenerateDialog((currentDialog) =>
|
||
currentDialog?.mode === 'character'
|
||
? {
|
||
...setCharacterGenerationIdle(currentDialog),
|
||
characterReferences: [
|
||
...(currentDialog.characterReferences ?? []),
|
||
...references,
|
||
],
|
||
}
|
||
: currentDialog,
|
||
);
|
||
};
|
||
|
||
const pickCharacterSpecFromLayer = (layer: CanvasLayer) => {
|
||
setGenerateDialog((currentDialog) =>
|
||
currentDialog?.mode === 'character'
|
||
? {
|
||
...setCharacterGenerationIdle(currentDialog),
|
||
characterSpecReference: createCanvasLayerReference(layer),
|
||
composerOpen: true,
|
||
}
|
||
: currentDialog,
|
||
);
|
||
setIsPickingCharacterSpecFromCanvas(false);
|
||
setIsCharacterSpecMenuOpen(false);
|
||
setImageContextMenu(null);
|
||
};
|
||
|
||
const setIconGenerationIdle = (dialog: GenerateDialogState) => ({
|
||
...dialog,
|
||
status: dialog.status === 'failed' ? 'idle' : dialog.status,
|
||
errorMessage: dialog.status === 'failed' ? undefined : dialog.errorMessage,
|
||
});
|
||
|
||
const addIconSpecReferenceFiles = async (files: FileList | File[]) => {
|
||
const imageFile = Array.from(files).find(isImageFile);
|
||
if (!imageFile) {
|
||
window.alert('请选择图片文件');
|
||
return;
|
||
}
|
||
|
||
const imageSrc = await readImageFileAsDataUrl(imageFile);
|
||
setGenerateDialog((currentDialog) =>
|
||
currentDialog?.mode === 'icon'
|
||
? {
|
||
...setIconGenerationIdle(currentDialog),
|
||
iconSpecReference: {
|
||
id: `upload-icon-spec-${Date.now()}`,
|
||
label: imageFile.name || '图标素材规范',
|
||
src: imageSrc,
|
||
},
|
||
}
|
||
: currentDialog,
|
||
);
|
||
};
|
||
|
||
const pickIconSpecFromLayer = (layer: CanvasLayer) => {
|
||
if (layer.assetKind !== 'icon-spec') {
|
||
return;
|
||
}
|
||
setGenerateDialog((currentDialog) =>
|
||
currentDialog?.mode === 'icon'
|
||
? {
|
||
...setIconGenerationIdle(currentDialog),
|
||
iconSpecReference: createCanvasLayerReference(layer),
|
||
composerOpen: true,
|
||
}
|
||
: currentDialog,
|
||
);
|
||
setIsPickingIconSpecFromCanvas(false);
|
||
setIsIconSpecMenuOpen(false);
|
||
setImageContextMenu(null);
|
||
};
|
||
|
||
const addUploadedLayer = async (
|
||
file: File,
|
||
options: {
|
||
folderId?: string;
|
||
canvasPoint?: { x: number; y: number };
|
||
uploadIndex?: number;
|
||
addToCanvas?: boolean;
|
||
} = {},
|
||
) => {
|
||
if (!file.type.startsWith('image/')) {
|
||
window.alert('请选择图片文件');
|
||
return;
|
||
}
|
||
|
||
const fallbackWidth = 420;
|
||
const fallbackHeight = 315;
|
||
const uploadFolderId = assetFolders.some(
|
||
(folder) => folder.id === (options.folderId ?? activeUploadFolderId),
|
||
)
|
||
? (options.folderId ?? activeUploadFolderId)
|
||
: 'project';
|
||
const uploadIndex = options.uploadIndex ?? layerCounterRef.current + 1;
|
||
layerCounterRef.current = Math.max(layerCounterRef.current, uploadIndex);
|
||
const uploadedAsset: EditorAsset = {
|
||
id: `upload-${uploadIndex}`,
|
||
label: file.name || '上传图片',
|
||
src: '',
|
||
width: fallbackWidth,
|
||
height: fallbackHeight,
|
||
folderId: uploadFolderId,
|
||
sourceKind: 'uploaded',
|
||
sourceType: 'uploaded',
|
||
persisted: false,
|
||
uploadStatus: 'uploading',
|
||
uploadProgress: 8,
|
||
uploadMessage: '准备上传',
|
||
};
|
||
setAssets((currentAssets) => [...currentAssets, uploadedAsset]);
|
||
setAssetFolders((currentFolders) =>
|
||
currentFolders.map((folder) =>
|
||
folder.id === uploadFolderId
|
||
? {
|
||
...folder,
|
||
collapsed: false,
|
||
}
|
||
: folder,
|
||
),
|
||
);
|
||
|
||
let imageSrc = '';
|
||
try {
|
||
imageSrc = await readImageFileAsDataUrl(file);
|
||
setAssets((currentAssets) =>
|
||
currentAssets.map((asset) =>
|
||
asset.id === uploadedAsset.id
|
||
? {
|
||
...asset,
|
||
src: imageSrc,
|
||
uploadProgress: 42,
|
||
uploadMessage: '读取图片',
|
||
}
|
||
: asset,
|
||
),
|
||
);
|
||
} catch {
|
||
setAssets((currentAssets) =>
|
||
currentAssets.map((asset) =>
|
||
asset.id === uploadedAsset.id
|
||
? {
|
||
...asset,
|
||
uploadStatus: 'failed',
|
||
uploadProgress: 100,
|
||
uploadMessage: '读取失败',
|
||
}
|
||
: asset,
|
||
),
|
||
);
|
||
return;
|
||
}
|
||
const screenPoint = options.canvasPoint ?? {
|
||
x: canvasSize.width / 2,
|
||
y: canvasSize.height / 2,
|
||
};
|
||
const fallbackScreenPoint = {
|
||
x: canvasSize.width > 0 ? canvasSize.width / 2 : 640,
|
||
y: canvasSize.height > 0 ? canvasSize.height / 2 : 360,
|
||
};
|
||
const normalizedScreenPoint = {
|
||
x: Number.isFinite(screenPoint.x) ? screenPoint.x : fallbackScreenPoint.x,
|
||
y: Number.isFinite(screenPoint.y) ? screenPoint.y : fallbackScreenPoint.y,
|
||
};
|
||
const safeScale = viewport.scale > 0 ? viewport.scale : 1;
|
||
const worldCenterX = (normalizedScreenPoint.x - viewport.x) / safeScale;
|
||
const worldCenterY = (normalizedScreenPoint.y - viewport.y) / safeScale;
|
||
const nextLayer: CanvasLayer = {
|
||
id: `layer-upload-${uploadIndex}`,
|
||
resourceId: `local-resource-upload-${uploadIndex}`,
|
||
title: file.name || '上传图片',
|
||
src: imageSrc,
|
||
x: worldCenterX - fallbackWidth / 2,
|
||
y: worldCenterY - fallbackHeight / 2,
|
||
width: fallbackWidth,
|
||
height: fallbackHeight,
|
||
originalWidth: fallbackWidth,
|
||
originalHeight: fallbackHeight,
|
||
zIndex: uploadIndex + 10,
|
||
sourceType: 'uploaded',
|
||
sourceAssetId: `upload-${uploadIndex}`,
|
||
};
|
||
|
||
if (options.addToCanvas) {
|
||
appendCanvasLayersWithResources([nextLayer]);
|
||
}
|
||
if (options.addToCanvas) {
|
||
selectSingleLayer(nextLayer.id);
|
||
setActiveSidebarPanel('layers');
|
||
}
|
||
|
||
setAssets((currentAssets) =>
|
||
currentAssets.map((asset) =>
|
||
asset.id === uploadedAsset.id
|
||
? {
|
||
...asset,
|
||
uploadProgress: 68,
|
||
uploadMessage: '上传中',
|
||
}
|
||
: asset,
|
||
),
|
||
);
|
||
createEditorAsset({
|
||
folderId: uploadFolderId,
|
||
label: uploadedAsset.label,
|
||
imageSrc,
|
||
width: fallbackWidth,
|
||
height: fallbackHeight,
|
||
sourceType: 'uploaded',
|
||
})
|
||
.then((asset) => {
|
||
setAssets((currentAssets) =>
|
||
currentAssets.map((currentAsset) =>
|
||
currentAsset.id === uploadedAsset.id
|
||
? {
|
||
...currentAsset,
|
||
id: asset.assetId,
|
||
folderId: asset.folderId,
|
||
label: asset.label,
|
||
src: asset.imageSrc,
|
||
width: asset.width,
|
||
height: asset.height,
|
||
objectKey: asset.objectKey ?? undefined,
|
||
assetObjectId: asset.assetObjectId ?? undefined,
|
||
persisted: true,
|
||
uploadStatus: undefined,
|
||
uploadProgress: undefined,
|
||
uploadMessage: undefined,
|
||
}
|
||
: currentAsset,
|
||
),
|
||
);
|
||
if (options.addToCanvas) {
|
||
setLayers((currentLayers) =>
|
||
currentLayers.map((currentLayer) =>
|
||
currentLayer.id === nextLayer.id
|
||
? {
|
||
...currentLayer,
|
||
sourceAssetId: asset.assetId,
|
||
objectKey: asset.objectKey ?? currentLayer.objectKey,
|
||
assetObjectId:
|
||
asset.assetObjectId ?? currentLayer.assetObjectId,
|
||
}
|
||
: currentLayer,
|
||
),
|
||
);
|
||
}
|
||
})
|
||
.catch((error: unknown) => {
|
||
const isAuthError = isEditorAuthError(error);
|
||
if (isAuthError) {
|
||
openEditorLoginModal();
|
||
}
|
||
setAssets((currentAssets) =>
|
||
currentAssets.map((asset) =>
|
||
asset.id === uploadedAsset.id
|
||
? {
|
||
...asset,
|
||
uploadStatus: 'failed',
|
||
uploadProgress: 100,
|
||
uploadMessage: isAuthError ? '请先登录' : '上传失败',
|
||
}
|
||
: asset,
|
||
),
|
||
);
|
||
});
|
||
|
||
if (imageSrc) {
|
||
const uploadedImage = new Image();
|
||
uploadedImage.onload = () => {
|
||
const originalWidth = uploadedImage.naturalWidth || fallbackWidth;
|
||
const originalHeight = uploadedImage.naturalHeight || fallbackHeight;
|
||
const { width, height } = resolveLayerResolutionSize(
|
||
originalWidth,
|
||
originalHeight,
|
||
{ width: fallbackWidth, height: fallbackHeight },
|
||
);
|
||
if (options.addToCanvas) {
|
||
setLayers((currentLayers) =>
|
||
currentLayers.map((layer) =>
|
||
layer.id === nextLayer.id
|
||
? {
|
||
...layer,
|
||
width,
|
||
height,
|
||
originalWidth,
|
||
originalHeight,
|
||
x: worldCenterX - width / 2,
|
||
y: worldCenterY - height / 2,
|
||
}
|
||
: layer,
|
||
),
|
||
);
|
||
}
|
||
setAssets((currentAssets) =>
|
||
currentAssets.map((asset) =>
|
||
asset.id === uploadedAsset.id
|
||
? {
|
||
...asset,
|
||
width: originalWidth,
|
||
height: originalHeight,
|
||
}
|
||
: asset,
|
||
),
|
||
);
|
||
};
|
||
uploadedImage.src = imageSrc;
|
||
}
|
||
};
|
||
|
||
const addUploadedFiles = (
|
||
files: FileList | File[],
|
||
options: {
|
||
folderId?: string;
|
||
canvasPoint?: { x: number; y: number };
|
||
addToCanvas?: boolean;
|
||
} = {},
|
||
) => {
|
||
const imageFiles = Array.from(files);
|
||
const currentAuthUi = authUiRef.current;
|
||
if (currentAuthUi && !currentAuthUi.canAccessProtectedData) {
|
||
openEditorLoginModal(() => {
|
||
addUploadedFiles(imageFiles, options);
|
||
});
|
||
return;
|
||
}
|
||
imageFiles.forEach((file, index) => {
|
||
layerCounterRef.current += 1;
|
||
const uploadIndex = layerCounterRef.current;
|
||
void addUploadedLayer(file, {
|
||
...options,
|
||
addToCanvas: options.addToCanvas ?? false,
|
||
uploadIndex,
|
||
canvasPoint: options.canvasPoint
|
||
? {
|
||
x: options.canvasPoint.x + index * 28,
|
||
y: options.canvasPoint.y + index * 28,
|
||
}
|
||
: undefined,
|
||
});
|
||
});
|
||
};
|
||
|
||
const deleteLayerById = (targetLayerId: string | null) => {
|
||
if (!targetLayerId) {
|
||
return;
|
||
}
|
||
setImageContextMenu(null);
|
||
setContextMenu(null);
|
||
captureCanvasHistory();
|
||
setLayers((currentLayers) => {
|
||
const nextLayers = currentLayers.filter(
|
||
(layer) => layer.id !== targetLayerId,
|
||
);
|
||
const nextSelectedLayer = nextLayers
|
||
.slice()
|
||
.sort((left, right) => right.zIndex - left.zIndex)[0];
|
||
selectSingleLayer(nextSelectedLayer?.id ?? null);
|
||
return nextLayers;
|
||
});
|
||
setHoveredLayerId(null);
|
||
setMetadataLayer((currentLayer) =>
|
||
currentLayer?.id === targetLayerId ? null : currentLayer,
|
||
);
|
||
setQuickEditPanel((currentPanel) =>
|
||
currentPanel?.sourceLayerId === targetLayerId ? null : currentPanel,
|
||
);
|
||
setCharacterAnimationPanel((currentPanel) =>
|
||
currentPanel?.sourceLayerId === targetLayerId ? null : currentPanel,
|
||
);
|
||
setGenerateDialog((currentDialog) =>
|
||
currentDialog?.mode === 'edit' &&
|
||
currentDialog.sourceLayerId === targetLayerId
|
||
? null
|
||
: currentDialog,
|
||
);
|
||
removeCanvasGenerationDialogsByLayerId(targetLayerId);
|
||
};
|
||
|
||
deleteLayerByIdRef.current = deleteLayerById;
|
||
|
||
const deleteSelectedLayer = () => {
|
||
const targetIds = selectedLayerIds.length
|
||
? selectedLayerIds
|
||
: selectedLayerId
|
||
? [selectedLayerId]
|
||
: [];
|
||
if (targetIds.length <= 1) {
|
||
deleteLayerById(targetIds[0] ?? null);
|
||
return;
|
||
}
|
||
captureCanvasHistory();
|
||
setImageContextMenu(null);
|
||
setContextMenu(null);
|
||
setLayers((currentLayers) => {
|
||
const nextLayers = currentLayers.filter(
|
||
(layer) => !targetIds.includes(layer.id),
|
||
);
|
||
const nextSelectedLayer = nextLayers
|
||
.slice()
|
||
.sort((left, right) => right.zIndex - left.zIndex)[0];
|
||
selectSingleLayer(nextSelectedLayer?.id ?? null);
|
||
return nextLayers;
|
||
});
|
||
setHoveredLayerId(null);
|
||
setMetadataLayer((currentLayer) =>
|
||
currentLayer && targetIds.includes(currentLayer.id) ? null : currentLayer,
|
||
);
|
||
setQuickEditPanel((currentPanel) =>
|
||
currentPanel && targetIds.includes(currentPanel.sourceLayerId)
|
||
? null
|
||
: currentPanel,
|
||
);
|
||
setCharacterAnimationPanel((currentPanel) =>
|
||
currentPanel && targetIds.includes(currentPanel.sourceLayerId)
|
||
? null
|
||
: currentPanel,
|
||
);
|
||
targetIds.forEach(removeCanvasGenerationDialogsByLayerId);
|
||
};
|
||
|
||
const openGenerateDialog = () => {
|
||
const placeholderWidth = 420;
|
||
const placeholderHeight = 420;
|
||
const worldCenterX = (canvasSize.width / 2 - viewport.x) / viewport.scale;
|
||
const worldCenterY = (canvasSize.height / 2 - viewport.y) / viewport.scale;
|
||
openCanvasGenerationDialog({
|
||
mode: 'generate',
|
||
prompt: '',
|
||
status: 'idle',
|
||
composerOpen: true,
|
||
placeholder: {
|
||
x: worldCenterX - placeholderWidth / 2,
|
||
y: worldCenterY - placeholderHeight / 2,
|
||
width: placeholderWidth,
|
||
height: placeholderHeight,
|
||
originalWidth: 2048,
|
||
originalHeight: 2048,
|
||
},
|
||
});
|
||
setActiveTool('generate');
|
||
selectSingleLayer(null);
|
||
setQuickEditPanel(null);
|
||
};
|
||
|
||
const openSpecDialog = (specType: SpecGenerationType) => {
|
||
const worldCenterX = (canvasSize.width / 2 - viewport.x) / viewport.scale;
|
||
const worldCenterY = (canvasSize.height / 2 - viewport.y) / viewport.scale;
|
||
openCanvasGenerationDialog({
|
||
mode: 'spec',
|
||
prompt: '',
|
||
status: 'idle',
|
||
composerOpen: true,
|
||
specType,
|
||
specValues: { ...DEFAULT_SPEC_FORM_VALUES[specType] },
|
||
placeholder: {
|
||
x: worldCenterX - SPEC_FRAME_DISPLAY_SIZE.width / 2,
|
||
y: worldCenterY - SPEC_FRAME_DISPLAY_SIZE.height / 2,
|
||
width: SPEC_FRAME_DISPLAY_SIZE.width,
|
||
height: SPEC_FRAME_DISPLAY_SIZE.height,
|
||
originalWidth: SPEC_FRAME_ORIGINAL_SIZE.width,
|
||
originalHeight: SPEC_FRAME_ORIGINAL_SIZE.height,
|
||
},
|
||
});
|
||
setIsSpecMenuOpen(false);
|
||
setActiveTool('generate');
|
||
selectSingleLayer(null);
|
||
setQuickEditPanel(null);
|
||
};
|
||
|
||
const openCharacterAnimationPanel = (layer: CanvasLayer) => {
|
||
if (layer.assetKind !== 'character') {
|
||
return;
|
||
}
|
||
setImageContextMenu(null);
|
||
setQuickEditPanel(null);
|
||
setCharacterAnimationPanel({
|
||
sourceLayerId: layer.id,
|
||
promptText: '',
|
||
resolution: '480p',
|
||
ratio: 'same',
|
||
frameCount: 32,
|
||
durationSeconds: 4,
|
||
status: 'idle',
|
||
});
|
||
selectSingleLayer(layer.id);
|
||
};
|
||
|
||
const openCharacterGenerationDialog = () => {
|
||
const worldCenterX = (canvasSize.width / 2 - viewport.x) / viewport.scale;
|
||
const worldCenterY = (canvasSize.height / 2 - viewport.y) / viewport.scale;
|
||
setIsSpecMenuOpen(false);
|
||
setIsPickingCharacterSpecFromCanvas(false);
|
||
openCanvasGenerationDialog({
|
||
mode: 'character',
|
||
prompt: '',
|
||
status: 'idle',
|
||
composerOpen: true,
|
||
characterSpecReference: null,
|
||
characterReferences: [],
|
||
placeholder: {
|
||
x: worldCenterX - CHARACTER_FRAME_DISPLAY_SIZE.width / 2,
|
||
y: worldCenterY - CHARACTER_FRAME_DISPLAY_SIZE.height / 2,
|
||
width: CHARACTER_FRAME_DISPLAY_SIZE.width,
|
||
height: CHARACTER_FRAME_DISPLAY_SIZE.height,
|
||
originalWidth: CHARACTER_FRAME_ORIGINAL_SIZE.width,
|
||
originalHeight: CHARACTER_FRAME_ORIGINAL_SIZE.height,
|
||
},
|
||
});
|
||
setActiveTool('character');
|
||
selectSingleLayer(null);
|
||
setQuickEditPanel(null);
|
||
};
|
||
|
||
const openIconGenerationDialog = () => {
|
||
const worldCenterX = (canvasSize.width / 2 - viewport.x) / viewport.scale;
|
||
const worldCenterY = (canvasSize.height / 2 - viewport.y) / viewport.scale;
|
||
setIsSpecMenuOpen(false);
|
||
setIsPickingCharacterSpecFromCanvas(false);
|
||
setIsPickingIconSpecFromCanvas(false);
|
||
openCanvasGenerationDialog({
|
||
mode: 'icon',
|
||
prompt: '',
|
||
status: 'idle',
|
||
composerOpen: true,
|
||
iconSpecReference: null,
|
||
iconDescriptions: [...DEFAULT_ICON_DESCRIPTIONS],
|
||
placeholder: {
|
||
x: worldCenterX - ICON_FRAME_DISPLAY_SIZE.width / 2,
|
||
y: worldCenterY - ICON_FRAME_DISPLAY_SIZE.height / 2,
|
||
width: ICON_FRAME_DISPLAY_SIZE.width,
|
||
height: ICON_FRAME_DISPLAY_SIZE.height,
|
||
originalWidth: ICON_FRAME_ORIGINAL_SIZE.width,
|
||
originalHeight: ICON_FRAME_ORIGINAL_SIZE.height,
|
||
},
|
||
});
|
||
setActiveTool('icon');
|
||
selectSingleLayer(null);
|
||
setQuickEditPanel(null);
|
||
setCharacterAnimationPanel(null);
|
||
};
|
||
|
||
const openEditDialog = (sourceLayer: CanvasLayer) => {
|
||
setMetadataLayer(null);
|
||
setImageContextMenu(null);
|
||
setQuickEditPanel(null);
|
||
setGenerateDialog({
|
||
mode: 'edit',
|
||
prompt: sourceLayer.prompt
|
||
? `${sourceLayer.prompt}，在保持主体结构的基础上优化画面细节`
|
||
: '',
|
||
status: 'idle',
|
||
composerOpen: true,
|
||
sourceLayerId: sourceLayer.id,
|
||
});
|
||
setActiveTool('generate');
|
||
};
|
||
|
||
const openQuickEditPanel = (sourceLayer: CanvasLayer) => {
|
||
setImageContextMenu(null);
|
||
setMetadataLayer(null);
|
||
setGenerateDialog(null);
|
||
setCharacterAnimationPanel(null);
|
||
setQuickEditPanel({
|
||
sourceLayerId: sourceLayer.id,
|
||
prompt: '',
|
||
size: formatImageSizeValue(
|
||
sourceLayer.originalWidth,
|
||
sourceLayer.originalHeight,
|
||
),
|
||
model: sourceLayer.model?.trim() || DEFAULT_IMAGE_MODEL,
|
||
status: 'idle',
|
||
});
|
||
selectSingleLayer(sourceLayer.id);
|
||
setActiveTool('generate');
|
||
};
|
||
|
||
const addGeneratedResultLayer = (
|
||
generated: EditorImageGenerationResult,
|
||
options: {
|
||
sourceLayer?: CanvasLayer;
|
||
frame?: GenerateDialogState['placeholder'];
|
||
assetKind?: CanvasLayer['assetKind'];
|
||
title?: string;
|
||
dialogId?: string;
|
||
generationInputs?: CanvasGenerationInputs;
|
||
} = {},
|
||
) => {
|
||
layerCounterRef.current += 1;
|
||
const generatedIndex = layerCounterRef.current;
|
||
const originalWidth = generated.width || 1024;
|
||
const originalHeight = generated.height || 1024;
|
||
const { width, height } = resolveLayerResolutionSize(
|
||
originalWidth,
|
||
originalHeight,
|
||
{ width: 1024, height: 1024 },
|
||
);
|
||
const worldCenterX = (canvasSize.width / 2 - viewport.x) / viewport.scale;
|
||
const worldCenterY = (canvasSize.height / 2 - viewport.y) / viewport.scale;
|
||
const frameX =
|
||
options.frame && options.frame.width > 0
|
||
? options.frame.x + options.frame.width / 2 - width / 2
|
||
: undefined;
|
||
const frameY =
|
||
options.frame && options.frame.height > 0
|
||
? options.frame.y + options.frame.height / 2 - height / 2
|
||
: undefined;
|
||
const nextLayer: CanvasLayer = {
|
||
id: options.sourceLayer
|
||
? `layer-edit-${generatedIndex}`
|
||
: `layer-generated-${generatedIndex}`,
|
||
resourceId: options.sourceLayer
|
||
? `local-resource-edit-${generatedIndex}`
|
||
: `local-resource-generated-${generatedIndex}`,
|
||
title: options.sourceLayer
|
||
? `${options.sourceLayer.title} 修改结果`
|
||
: (options.title ?? `生成图片 ${generatedIndex}`),
|
||
src: generated.imageSrc,
|
||
x: options.sourceLayer
|
||
? options.sourceLayer.x + options.sourceLayer.width + 32
|
||
: (frameX ?? worldCenterX - width / 2),
|
||
y: options.sourceLayer
|
||
? options.sourceLayer.y
|
||
: (frameY ?? worldCenterY - height / 2),
|
||
width,
|
||
height,
|
||
originalWidth,
|
||
originalHeight,
|
||
zIndex: generatedIndex + 10,
|
||
sourceType: generated.sourceType,
|
||
assetKind: options.assetKind,
|
||
prompt: generated.prompt,
|
||
actualPrompt: generated.actualPrompt ?? generated.prompt,
|
||
model: generated.model,
|
||
provider: generated.provider,
|
||
taskId: generated.taskId,
|
||
objectKey: generated.objectKey,
|
||
assetObjectId: generated.assetObjectId,
|
||
sourceResourceId: options.sourceLayer?.resourceId,
|
||
generationInputs: options.generationInputs,
|
||
};
|
||
|
||
appendCanvasLayersWithResources([nextLayer]);
|
||
selectSingleLayer(nextLayer.id);
|
||
setActiveSidebarPanel('layers');
|
||
if (options.sourceLayer) {
|
||
setGenerateDialog(null);
|
||
setActiveTool('select');
|
||
} else if (options.dialogId) {
|
||
updateCanvasGenerationDialogById(options.dialogId, (currentDialog) =>
|
||
currentDialog.mode === 'character' || currentDialog.mode === 'icon'
|
||
? null
|
||
: {
|
||
...currentDialog,
|
||
status: 'idle',
|
||
composerOpen: true,
|
||
generatedLayerId: nextLayer.id,
|
||
placeholder: undefined,
|
||
errorMessage: undefined,
|
||
},
|
||
);
|
||
}
|
||
if (options.sourceLayer) {
|
||
fitLayers([options.sourceLayer, nextLayer]);
|
||
}
|
||
};
|
||
|
||
const addQuickEditResultLayer = (
|
||
generated: EditorImageGenerationResult,
|
||
sourceLayer: CanvasLayer,
|
||
generationInputs: CanvasGenerationInputs,
|
||
) => {
|
||
layerCounterRef.current += 1;
|
||
const generatedIndex = layerCounterRef.current;
|
||
const originalWidth = generated.width || sourceLayer.originalWidth || 1024;
|
||
const originalHeight =
|
||
generated.height || sourceLayer.originalHeight || 1024;
|
||
const { width, height } = resolveLayerResolutionSize(
|
||
originalWidth,
|
||
originalHeight,
|
||
{
|
||
width: sourceLayer.width,
|
||
height: sourceLayer.height,
|
||
},
|
||
);
|
||
const nextLayer: CanvasLayer = {
|
||
id: `layer-quick-edit-${generatedIndex}`,
|
||
resourceId: `local-resource-quick-edit-${generatedIndex}`,
|
||
title: `${sourceLayer.title} 快速编辑`,
|
||
src: generated.imageSrc,
|
||
x: sourceLayer.x + sourceLayer.width + 32,
|
||
y: sourceLayer.y,
|
||
width,
|
||
height,
|
||
originalWidth,
|
||
originalHeight,
|
||
zIndex: generatedIndex + 10,
|
||
sourceType: generated.sourceType,
|
||
prompt: generated.prompt,
|
||
actualPrompt: generated.actualPrompt ?? generated.prompt,
|
||
model: generated.model,
|
||
provider: generated.provider,
|
||
taskId: generated.taskId,
|
||
objectKey: generated.objectKey,
|
||
assetObjectId: generated.assetObjectId,
|
||
sourceResourceId: sourceLayer.resourceId,
|
||
groupId: sourceLayer.groupId,
|
||
assetKind: sourceLayer.assetKind,
|
||
generationInputs,
|
||
};
|
||
|
||
appendCanvasLayersWithResources([nextLayer]);
|
||
selectSingleLayer(nextLayer.id);
|
||
setActiveSidebarPanel('layers');
|
||
setQuickEditPanel(null);
|
||
setActiveTool('select');
|
||
fitLayers([sourceLayer, nextLayer]);
|
||
};
|
||
|
||
const addIconSpritesheetResultLayers = (
|
||
generated: EditorIconSpritesheetGenerationResult,
|
||
iconResults: EditorIconSpritesheetIconResult[],
|
||
generationInputs: CanvasGenerationInputs,
|
||
frame?: GenerateDialogState['placeholder'],
|
||
dialogId?: string,
|
||
) => {
|
||
const startX =
|
||
frame?.x ??
|
||
(canvasSize.width / 2 - viewport.x) / viewport.scale -
|
||
ICON_FRAME_DISPLAY_SIZE.width / 2;
|
||
const startY =
|
||
frame?.y ??
|
||
(canvasSize.height / 2 - viewport.y) / viewport.scale -
|
||
ICON_FRAME_DISPLAY_SIZE.height / 2;
|
||
const spacing = 24;
|
||
const maxRowWidth = 560;
|
||
let cursorX = startX;
|
||
let cursorY = startY;
|
||
let rowHeight = 0;
|
||
const nextLayers: CanvasLayer[] = [];
|
||
|
||
iconResults.forEach((icon) => {
|
||
const originalWidth = icon.width || 128;
|
||
const originalHeight = icon.height || 128;
|
||
const { width, height } = resolveLayerResolutionSize(
|
||
originalWidth,
|
||
originalHeight,
|
||
{ width: 128, height: 128 },
|
||
);
|
||
if (cursorX > startX && cursorX + width - startX > maxRowWidth) {
|
||
cursorX = startX;
|
||
cursorY += rowHeight + spacing;
|
||
rowHeight = 0;
|
||
}
|
||
|
||
layerCounterRef.current += 1;
|
||
const generatedIndex = layerCounterRef.current;
|
||
nextLayers.push({
|
||
id: `layer-icon-${generatedIndex}`,
|
||
resourceId: `local-resource-icon-${generatedIndex}`,
|
||
title: icon.name,
|
||
src: icon.imageSrc,
|
||
x: cursorX,
|
||
y: cursorY,
|
||
width,
|
||
height,
|
||
originalWidth,
|
||
originalHeight,
|
||
zIndex: generatedIndex + 10,
|
||
sourceType: 'generated',
|
||
prompt: generated.prompt,
|
||
actualPrompt: generated.actualPrompt ?? generated.prompt,
|
||
model: generated.model,
|
||
provider: generated.provider,
|
||
taskId: generated.taskId,
|
||
assetKind: 'icon',
|
||
generationInputs,
|
||
});
|
||
|
||
cursorX += width + spacing;
|
||
rowHeight = Math.max(rowHeight, height);
|
||
});
|
||
|
||
if (!nextLayers.length) {
|
||
return;
|
||
}
|
||
appendCanvasLayersWithResources(nextLayers);
|
||
selectSingleLayer(nextLayers[0]?.id ?? null);
|
||
setActiveSidebarPanel('layers');
|
||
if (dialogId) {
|
||
removeCanvasGenerationDialogById(dialogId);
|
||
}
|
||
setActiveTool('select');
|
||
};
|
||
|
||
const updateIconDescription = (index: number, value: string) => {
|
||
setGenerateDialog((currentDialog) =>
|
||
currentDialog?.mode === 'icon'
|
||
? {
|
||
...setIconGenerationIdle(currentDialog),
|
||
iconDescriptions: (
|
||
currentDialog.iconDescriptions ?? DEFAULT_ICON_DESCRIPTIONS
|
||
).map((description, descriptionIndex) =>
|
||
descriptionIndex === index ? value : description,
|
||
),
|
||
}
|
||
: currentDialog,
|
||
);
|
||
};
|
||
|
||
const addIconDescription = () => {
|
||
setGenerateDialog((currentDialog) => {
|
||
if (currentDialog?.mode !== 'icon') {
|
||
return currentDialog;
|
||
}
|
||
const descriptions =
|
||
currentDialog.iconDescriptions ?? DEFAULT_ICON_DESCRIPTIONS;
|
||
if (descriptions.length >= ICON_DESCRIPTION_LIMIT) {
|
||
return currentDialog;
|
||
}
|
||
return {
|
||
...setIconGenerationIdle(currentDialog),
|
||
iconDescriptions: [...descriptions, ''],
|
||
};
|
||
});
|
||
};
|
||
|
||
const submitIconSpritesheetGeneration = async (
|
||
dialog: GenerateDialogState,
|
||
) => {
|
||
if (dialog.mode !== 'icon') {
|
||
return;
|
||
}
|
||
const canvasDialog = isCanvasGenerationDialog(dialog) ? dialog : null;
|
||
const setSubmittingIconDialog = (
|
||
nextDialog: CanvasGenerationDialogState,
|
||
) => {
|
||
updateCanvasGenerationDialogById(nextDialog.id, () => nextDialog);
|
||
};
|
||
const iconDescriptions = (
|
||
dialog.iconDescriptions ?? DEFAULT_ICON_DESCRIPTIONS
|
||
)
|
||
.map((description) => description.trim())
|
||
.filter(Boolean);
|
||
if (!dialog.iconSpecReference) {
|
||
if (canvasDialog) {
|
||
setSubmittingIconDialog({
|
||
...canvasDialog,
|
||
status: 'failed',
|
||
composerOpen: true,
|
||
errorMessage: '请选择图标素材规范',
|
||
});
|
||
}
|
||
return;
|
||
}
|
||
if (!iconDescriptions.length) {
|
||
if (canvasDialog) {
|
||
setSubmittingIconDialog({
|
||
...canvasDialog,
|
||
status: 'failed',
|
||
composerOpen: true,
|
||
errorMessage: '请填写素材描述',
|
||
});
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (!canvasDialog) {
|
||
return;
|
||
}
|
||
|
||
setSubmittingIconDialog({
|
||
...canvasDialog,
|
||
iconDescriptions,
|
||
status: 'generating',
|
||
composerOpen: false,
|
||
errorMessage: undefined,
|
||
});
|
||
|
||
try {
|
||
const generated = await generateEditorIconSpritesheet({
|
||
referenceImageSrc: dialog.iconSpecReference.src,
|
||
iconDescriptions,
|
||
});
|
||
addIconSpritesheetResultLayers(
|
||
generated,
|
||
generated.iconImageSrcs,
|
||
buildIconGenerationInputs(iconDescriptions, dialog.iconSpecReference),
|
||
getGeneratingDialogPlaceholder(dialog),
|
||
canvasDialog.id,
|
||
);
|
||
} catch (error) {
|
||
setSubmittingIconDialog({
|
||
...canvasDialog,
|
||
iconDescriptions,
|
||
status: 'failed',
|
||
composerOpen: true,
|
||
errorMessage: resolveImageGenerationErrorMessage(error),
|
||
});
|
||
}
|
||
};
|
||
|
||
const submitQuickEdit = async () => {
|
||
if (!quickEditPanel || !quickEditSourceLayer) {
|
||
return;
|
||
}
|
||
|
||
const normalizedPrompt = quickEditPanel.prompt.trim() || '快速编辑图片';
|
||
setQuickEditPanel({
|
||
...quickEditPanel,
|
||
prompt: normalizedPrompt,
|
||
status: 'generating',
|
||
errorMessage: undefined,
|
||
});
|
||
|
||
try {
|
||
const referenceImageSrc = await resolveEditorImageReferenceDataUrl(
|
||
quickEditSourceLayer.src,
|
||
);
|
||
const generated = await generateEditorImage({
|
||
prompt: normalizedPrompt,
|
||
size: quickEditPanel.size,
|
||
kind: 'quick-edit',
|
||
model: quickEditPanel.model,
|
||
referenceImageSrcs: [referenceImageSrc],
|
||
});
|
||
addQuickEditResultLayer(
|
||
generated,
|
||
quickEditSourceLayer,
|
||
buildEditGenerationInputs(
|
||
'快速编辑提示词',
|
||
normalizedPrompt,
|
||
quickEditSourceLayer,
|
||
),
|
||
);
|
||
} catch (error) {
|
||
setQuickEditPanel({
|
||
...quickEditPanel,
|
||
prompt: normalizedPrompt,
|
||
status: 'failed',
|
||
errorMessage: resolveImageGenerationErrorMessage(error),
|
||
});
|
||
}
|
||
};
|
||
|
||
const submitImageGeneration = async (dialog: GenerateDialogState) => {
|
||
const normalizedPrompt =
|
||
dialog.prompt.trim() ||
|
||
(dialog.mode === 'edit' ? '修改当前图片' : 'AI 生成图片');
|
||
const canvasDialog = isCanvasGenerationDialog(dialog) ? dialog : null;
|
||
if (canvasDialog) {
|
||
updateCanvasGenerationDialogById(canvasDialog.id, (currentDialog) => ({
|
||
...currentDialog,
|
||
prompt: normalizedPrompt,
|
||
status: 'generating',
|
||
composerOpen: false,
|
||
}));
|
||
} else {
|
||
setGenerateDialog({
|
||
...dialog,
|
||
prompt: normalizedPrompt,
|
||
status: 'generating',
|
||
composerOpen: dialog.mode === 'edit',
|
||
});
|
||
}
|
||
|
||
try {
|
||
if (dialog.mode === 'edit') {
|
||
const sourceLayer = layers.find(
|
||
(layer) => layer.id === dialog.sourceLayerId,
|
||
);
|
||
if (!sourceLayer) {
|
||
throw new Error('未找到要修改的图片');
|
||
}
|
||
const referenceImageSrc = await resolveEditorImageReferenceDataUrl(
|
||
sourceLayer.src,
|
||
);
|
||
const generated = await editEditorImage({
|
||
prompt: normalizedPrompt,
|
||
sourceImageSrc: referenceImageSrc,
|
||
});
|
||
addGeneratedResultLayer(generated, {
|
||
sourceLayer,
|
||
generationInputs: buildEditGenerationInputs(
|
||
'修改要求',
|
||
normalizedPrompt,
|
||
sourceLayer,
|
||
),
|
||
});
|
||
} else if (dialog.mode === 'spec') {
|
||
const specType = dialog.specType ?? 'custom';
|
||
const specValues =
|
||
dialog.specValues ?? DEFAULT_SPEC_FORM_VALUES[specType];
|
||
const specPrompt = buildSpecPrompt(specType, specValues);
|
||
const generated = await generateEditorImage({
|
||
prompt: specPrompt,
|
||
size: SPEC_GENERATION_SIZE,
|
||
model: DEFAULT_IMAGE_MODEL,
|
||
kind: 'spec',
|
||
});
|
||
addGeneratedResultLayer(generated, {
|
||
frame: getGeneratingDialogPlaceholder(dialog),
|
||
assetKind: specType === 'icon' ? 'icon-spec' : 'spec',
|
||
title: `${SPEC_TYPE_LABEL[specType]} ${layerCounterRef.current + 1}`,
|
||
dialogId: canvasDialog?.id,
|
||
generationInputs: buildSpecGenerationInputs(specType, specValues),
|
||
});
|
||
} else if (dialog.mode === 'character') {
|
||
const referenceImageSrcs = [
|
||
dialog.characterSpecReference?.src,
|
||
...(dialog.characterReferences ?? []).map(
|
||
(reference) => reference.src,
|
||
),
|
||
].filter((src): src is string => Boolean(src));
|
||
const generated = await generateEditorImage({
|
||
prompt: normalizedPrompt,
|
||
kind: 'character',
|
||
...(referenceImageSrcs.length ? { referenceImageSrcs } : {}),
|
||
});
|
||
addGeneratedResultLayer(generated, {
|
||
frame: getGeneratingDialogPlaceholder(dialog),
|
||
assetKind: 'character',
|
||
title: `角色形象 ${layerCounterRef.current + 1}`,
|
||
dialogId: canvasDialog?.id,
|
||
generationInputs: buildCharacterGenerationInputs(
|
||
normalizedPrompt,
|
||
dialog.characterSpecReference,
|
||
dialog.characterReferences,
|
||
),
|
||
});
|
||
} else {
|
||
const generated = await generateEditorImage({
|
||
prompt: normalizedPrompt,
|
||
});
|
||
addGeneratedResultLayer(generated, {
|
||
frame: getGeneratingDialogPlaceholder(dialog),
|
||
dialogId: canvasDialog?.id,
|
||
generationInputs: buildImageGenerationInputs(normalizedPrompt),
|
||
});
|
||
}
|
||
} catch (error) {
|
||
if (canvasDialog) {
|
||
updateCanvasGenerationDialogById(canvasDialog.id, () => ({
|
||
...canvasDialog,
|
||
prompt: normalizedPrompt,
|
||
status: 'failed',
|
||
composerOpen: true,
|
||
errorMessage: resolveImageGenerationErrorMessage(error),
|
||
}));
|
||
} else {
|
||
setGenerateDialog({
|
||
...dialog,
|
||
prompt: normalizedPrompt,
|
||
status: 'failed',
|
||
composerOpen: true,
|
||
errorMessage: resolveImageGenerationErrorMessage(error),
|
||
});
|
||
}
|
||
}
|
||
};
|
||
|
||
const handleNativeWheel = useCallback((event: WheelEvent) => {
|
||
event.preventDefault();
|
||
const viewportElement = canvasViewportRef.current;
|
||
if (!viewportElement) {
|
||
return;
|
||
}
|
||
|
||
if (!event.ctrlKey && !event.metaKey) {
|
||
setViewport((currentViewport) =>
|
||
scrollViewportVertically(currentViewport, event.deltaY),
|
||
);
|
||
return;
|
||
}
|
||
|
||
const rect = viewportElement.getBoundingClientRect();
|
||
const screenPoint = {
|
||
x: event.clientX - rect.left,
|
||
y: event.clientY - rect.top,
|
||
};
|
||
setViewport((currentViewport) =>
|
||
zoomViewportFromWheel({
|
||
viewport: currentViewport,
|
||
deltaY: event.deltaY,
|
||
screenPoint,
|
||
}),
|
||
);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const viewportElement = canvasViewportRef.current;
|
||
if (!viewportElement) {
|
||
return undefined;
|
||
}
|
||
viewportElement.addEventListener('wheel', handleNativeWheel, {
|
||
passive: false,
|
||
});
|
||
return () => {
|
||
viewportElement.removeEventListener('wheel', handleNativeWheel);
|
||
};
|
||
}, [handleNativeWheel]);
|
||
|
||
const startPan = (event: ReactPointerEvent<HTMLDivElement>) => {
|
||
event.preventDefault();
|
||
const pointer = getPointerClient(event);
|
||
canvasViewportRef.current?.setPointerCapture?.(event.pointerId);
|
||
setIsPanning(true);
|
||
dragStateRef.current = {
|
||
kind: 'pan',
|
||
pointerId: getPointerId(event),
|
||
startClientX: pointer.x,
|
||
startClientY: pointer.y,
|
||
startViewport: viewport,
|
||
};
|
||
};
|
||
|
||
const handleCanvasPointerDown = (
|
||
event: ReactPointerEvent<HTMLDivElement>,
|
||
) => {
|
||
const button = getPointerButton(event);
|
||
if (button !== 0 || effectiveTool === 'hand') {
|
||
startPan(event);
|
||
return;
|
||
}
|
||
|
||
if (button !== 0) {
|
||
return;
|
||
}
|
||
const target = event.target as HTMLElement;
|
||
if (
|
||
effectiveTool === 'select' &&
|
||
(event.target === event.currentTarget ||
|
||
target.classList.contains('image-canvas-editor__world'))
|
||
) {
|
||
event.preventDefault();
|
||
const rect = canvasViewportRef.current?.getBoundingClientRect();
|
||
const startX = event.clientX - (rect?.left ?? 0);
|
||
const startY = event.clientY - (rect?.top ?? 0);
|
||
canvasViewportRef.current?.setPointerCapture?.(event.pointerId);
|
||
setCanvasMarquee({
|
||
pointerId: event.pointerId,
|
||
startX,
|
||
startY,
|
||
currentX: startX,
|
||
currentY: startY,
|
||
});
|
||
clearCanvasFocus();
|
||
return;
|
||
}
|
||
clearCanvasFocus();
|
||
};
|
||
|
||
const handleCanvasDragOver = (event: ReactDragEvent<HTMLDivElement>) => {
|
||
if (hasDataTransferType(event.dataTransfer, ASSET_DRAG_MIME_TYPE)) {
|
||
event.preventDefault();
|
||
setUploadDropTarget('canvas');
|
||
event.dataTransfer.dropEffect = 'copy';
|
||
return;
|
||
}
|
||
if (hasDataTransferType(event.dataTransfer, 'Files')) {
|
||
event.preventDefault();
|
||
setUploadDropTarget('canvas');
|
||
event.dataTransfer.dropEffect = 'copy';
|
||
}
|
||
};
|
||
|
||
const handleCanvasDragLeave = (event: ReactDragEvent<HTMLDivElement>) => {
|
||
if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
|
||
setUploadDropTarget((currentTarget) =>
|
||
currentTarget === 'canvas' ? null : currentTarget,
|
||
);
|
||
}
|
||
};
|
||
|
||
const handleCanvasDrop = (event: ReactDragEvent<HTMLDivElement>) => {
|
||
const draggedAssetId = getDraggedAssetId(event.dataTransfer);
|
||
if (draggedAssetId) {
|
||
const draggedAsset = assets.find((asset) => asset.id === draggedAssetId);
|
||
if (!draggedAsset) {
|
||
return;
|
||
}
|
||
event.preventDefault();
|
||
setUploadDropTarget(null);
|
||
updateAssetMoveDropFolder(null);
|
||
addAssetLayer(draggedAsset, getCanvasDropPoint(event));
|
||
return;
|
||
}
|
||
const files = event.dataTransfer.files;
|
||
if (!files.length) {
|
||
return;
|
||
}
|
||
event.preventDefault();
|
||
setUploadDropTarget(null);
|
||
updateAssetMoveDropFolder(null);
|
||
const canvasPoint = getCanvasDropPoint(event);
|
||
const defaultFolder =
|
||
assetFolders.find((folder) => folder.systemDefault) ?? assetFolders[0];
|
||
addUploadedFiles(files, {
|
||
folderId: defaultFolder?.id,
|
||
canvasPoint,
|
||
addToCanvas: true,
|
||
});
|
||
};
|
||
|
||
const handleCanvasContextMenu = (event: ReactMouseEvent<HTMLDivElement>) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
const position = resolveContextMenuPosition(
|
||
event.clientX,
|
||
event.clientY,
|
||
'blank',
|
||
);
|
||
setImageContextMenu(null);
|
||
setContextMenu({
|
||
kind: 'blank',
|
||
...position,
|
||
canvasPoint: getCanvasPointFromClient(event.clientX, event.clientY),
|
||
});
|
||
};
|
||
|
||
const handleLayerPointerDown = (
|
||
event: ReactPointerEvent<HTMLButtonElement>,
|
||
layer: CanvasLayer,
|
||
) => {
|
||
const button = getPointerButton(event);
|
||
if (button === 1 || effectiveTool === 'hand') {
|
||
event.stopPropagation();
|
||
startPan(event as unknown as ReactPointerEvent<HTMLDivElement>);
|
||
return;
|
||
}
|
||
if (button !== 0) {
|
||
event.stopPropagation();
|
||
return;
|
||
}
|
||
if (
|
||
isPickingCharacterSpecFromCanvas &&
|
||
generateDialog?.mode === 'character'
|
||
) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
pickCharacterSpecFromLayer(layer);
|
||
return;
|
||
}
|
||
if (isPickingIconSpecFromCanvas && generateDialog?.mode === 'icon') {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
pickIconSpecFromLayer(layer);
|
||
return;
|
||
}
|
||
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
const pointer = getPointerClient(event);
|
||
canvasViewportRef.current?.setPointerCapture?.(event.pointerId);
|
||
const isMultiSelectGesture = event.shiftKey || isShiftPressedRef.current;
|
||
const nextSelectedIds = isMultiSelectGesture
|
||
? selectedLayerIds.includes(layer.id)
|
||
? selectedLayerIds.length > 1
|
||
? selectedLayerIds.filter((layerId) => layerId !== layer.id)
|
||
: [layer.id]
|
||
: [...selectedLayerIds, layer.id]
|
||
: [layer.id];
|
||
setSelectedLayerId(layer.id);
|
||
setSelectedLayerIds(nextSelectedIds);
|
||
setGenerateDialog((currentDialog) => {
|
||
if (
|
||
currentDialog?.mode !== 'generate' &&
|
||
currentDialog?.mode !== 'spec' &&
|
||
currentDialog?.mode !== 'character' &&
|
||
currentDialog?.mode !== 'icon'
|
||
) {
|
||
return currentDialog;
|
||
}
|
||
if (currentDialog.generatedLayerId === layer.id) {
|
||
return {
|
||
...currentDialog,
|
||
composerOpen: true,
|
||
};
|
||
}
|
||
return {
|
||
...currentDialog,
|
||
composerOpen: false,
|
||
};
|
||
});
|
||
const dragLayerIds = nextSelectedIds.includes(layer.id)
|
||
? nextSelectedIds
|
||
: [layer.id];
|
||
const startLayers = layers
|
||
.filter((currentLayer) => dragLayerIds.includes(currentLayer.id))
|
||
.map((currentLayer) => ({
|
||
id: currentLayer.id,
|
||
x: currentLayer.x,
|
||
y: currentLayer.y,
|
||
}));
|
||
dragStateRef.current = {
|
||
kind: 'layer',
|
||
pointerId: getPointerId(event),
|
||
layerId: layer.id,
|
||
layerIds: dragLayerIds,
|
||
startClientX: pointer.x,
|
||
startClientY: pointer.y,
|
||
startLayerX: layer.x,
|
||
startLayerY: layer.y,
|
||
startLayers,
|
||
startScale: viewport.scale,
|
||
};
|
||
};
|
||
|
||
const handleLayerClick = (
|
||
event: ReactMouseEvent<HTMLButtonElement>,
|
||
layer: CanvasLayer,
|
||
) => {
|
||
// 测试环境和辅助技术可能只触发 click；
|
||
// 用 click 兜底选中，真实拖拽仍由 pointerDown 负责。
|
||
event.stopPropagation();
|
||
if (isPickingCharacterSpecFromCanvas) {
|
||
return;
|
||
}
|
||
if (isPickingIconSpecFromCanvas) {
|
||
return;
|
||
}
|
||
if (event.shiftKey || isShiftPressedRef.current) {
|
||
return;
|
||
}
|
||
selectSingleLayer(layer.id);
|
||
setImageContextMenu(null);
|
||
};
|
||
|
||
const handleLayerContextMenu = (
|
||
event: ReactMouseEvent<HTMLButtonElement>,
|
||
layer: CanvasLayer,
|
||
) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
if (!selectedLayerIds.includes(layer.id)) {
|
||
selectSingleLayer(layer.id);
|
||
}
|
||
const position = resolveContextMenuPosition(
|
||
event.clientX,
|
||
event.clientY,
|
||
'layer',
|
||
);
|
||
setContextMenu({
|
||
kind: 'layer',
|
||
layerId: layer.id,
|
||
...position,
|
||
canvasPoint: getCanvasPointFromClient(event.clientX, event.clientY),
|
||
});
|
||
setImageContextMenu({
|
||
layerId: layer.id,
|
||
...position,
|
||
});
|
||
};
|
||
|
||
const handleCanvasBackgroundHexChange = (nextValue: string) => {
|
||
setCanvasBackgroundHexValue(nextValue);
|
||
const normalizedColor = normalizeCanvasBackgroundHex(nextValue);
|
||
if (normalizedColor) {
|
||
setCanvasBackgroundColor(normalizedColor);
|
||
setCanvasBackgroundHexValue(normalizedColor);
|
||
}
|
||
};
|
||
|
||
const handleGenerationFramePointerDown = (
|
||
event: ReactPointerEvent<HTMLDivElement>,
|
||
dialog: CanvasGenerationDialogState,
|
||
) => {
|
||
if (!dialog.placeholder) {
|
||
return;
|
||
}
|
||
const button = getPointerButton(event);
|
||
if (button === 1 || effectiveTool === 'hand') {
|
||
event.stopPropagation();
|
||
startPan(event as unknown as ReactPointerEvent<HTMLDivElement>);
|
||
return;
|
||
}
|
||
if (button !== 0) {
|
||
return;
|
||
}
|
||
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
const pointer = getPointerClient(event);
|
||
canvasViewportRef.current?.setPointerCapture?.(event.pointerId);
|
||
activateCanvasGenerationDialog(dialog);
|
||
dragStateRef.current = {
|
||
kind: 'generation-frame',
|
||
dialogId: dialog.id,
|
||
pointerId: getPointerId(event),
|
||
startClientX: pointer.x,
|
||
startClientY: pointer.y,
|
||
startFrameX: dialog.placeholder.x,
|
||
startFrameY: dialog.placeholder.y,
|
||
startScale: viewport.scale,
|
||
};
|
||
};
|
||
|
||
const moveViewportFromMinimapPointer = (clientX: number, clientY: number) => {
|
||
if (!minimapModel) {
|
||
return;
|
||
}
|
||
const minimapElement = document.querySelector(
|
||
'.image-canvas-editor__minimap',
|
||
) as HTMLElement | null;
|
||
const rect = minimapElement?.getBoundingClientRect();
|
||
if (!rect) {
|
||
return;
|
||
}
|
||
setViewport((currentViewport) =>
|
||
resolveViewportFromMinimapPointer({
|
||
viewport: currentViewport,
|
||
canvasSize,
|
||
minimapModel,
|
||
pointer: {
|
||
x: clientX - rect.left,
|
||
y: clientY - rect.top,
|
||
},
|
||
}),
|
||
);
|
||
};
|
||
|
||
const updateViewportFromMinimapDrag = (
|
||
dragState: Extract<DragState, { kind: 'minimap' }>,
|
||
clientX: number,
|
||
clientY: number,
|
||
) => {
|
||
setViewport(
|
||
resolveViewportFromMinimapDrag(dragState, {
|
||
x: clientX,
|
||
y: clientY,
|
||
}),
|
||
);
|
||
};
|
||
|
||
const handleMinimapPointerDown = (
|
||
event: ReactPointerEvent<HTMLButtonElement>,
|
||
) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
const pointer = getPointerClient(event);
|
||
canvasViewportRef.current?.setPointerCapture?.(event.pointerId);
|
||
dragStateRef.current = {
|
||
kind: 'minimap',
|
||
pointerId: getPointerId(event),
|
||
startClientX: pointer.x,
|
||
startClientY: pointer.y,
|
||
startViewport: { ...viewport },
|
||
minimapScale: minimapModel?.scale ?? 1,
|
||
moved: false,
|
||
};
|
||
};
|
||
|
||
const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
|
||
if (canvasMarquee && canvasMarquee.pointerId === event.pointerId) {
|
||
event.preventDefault();
|
||
const rect = canvasViewportRef.current?.getBoundingClientRect();
|
||
const currentX = event.clientX - (rect?.left ?? 0);
|
||
const currentY = event.clientY - (rect?.top ?? 0);
|
||
setCanvasMarquee((currentMarquee) =>
|
||
currentMarquee
|
||
? {
|
||
...currentMarquee,
|
||
currentX,
|
||
currentY,
|
||
}
|
||
: null,
|
||
);
|
||
const selectedIds = selectLayersInsideMarquee({
|
||
marquee: canvasMarquee,
|
||
currentPoint: { x: currentX, y: currentY },
|
||
layers,
|
||
viewport,
|
||
});
|
||
setSelectedLayerIds(selectedIds);
|
||
setSelectedLayerId(selectedIds[0] ?? null);
|
||
return;
|
||
}
|
||
|
||
const dragState = dragStateRef.current;
|
||
const pointerId = getPointerId(event);
|
||
if (
|
||
!dragState ||
|
||
(dragState.pointerId >= 0 &&
|
||
pointerId >= 0 &&
|
||
dragState.pointerId !== pointerId)
|
||
) {
|
||
return;
|
||
}
|
||
|
||
if (dragState.kind === 'pan') {
|
||
const pointer = getPointerClient(event);
|
||
setViewport(moveViewportFromPan(dragState, pointer));
|
||
return;
|
||
}
|
||
|
||
if (dragState.kind === 'generation-frame') {
|
||
const pointer = getPointerClient(event);
|
||
const nextFramePoint = moveGenerationFrameFromDrag(dragState, pointer);
|
||
updateCanvasGenerationDialogById(dragState.dialogId, (currentDialog) =>
|
||
currentDialog.placeholder
|
||
? {
|
||
...currentDialog,
|
||
placeholder: {
|
||
...currentDialog.placeholder,
|
||
x: nextFramePoint.x,
|
||
y: nextFramePoint.y,
|
||
},
|
||
}
|
||
: currentDialog,
|
||
);
|
||
return;
|
||
}
|
||
|
||
if (dragState.kind === 'minimap') {
|
||
const pointer = getPointerClient(event);
|
||
const deltaX = pointer.x - dragState.startClientX;
|
||
const deltaY = pointer.y - dragState.startClientY;
|
||
if (!dragState.moved && Math.hypot(deltaX, deltaY) >= 2) {
|
||
dragState.moved = true;
|
||
}
|
||
if (dragState.moved) {
|
||
updateViewportFromMinimapDrag(dragState, pointer.x, pointer.y);
|
||
}
|
||
return;
|
||
}
|
||
|
||
const pointer = getPointerClient(event);
|
||
const movedLayers = moveLayersFromDrag({ dragState, layers, pointer });
|
||
if (!movedLayers) {
|
||
return;
|
||
}
|
||
setSnapGuide(movedLayers.snapGuide);
|
||
setLayers(movedLayers.layers);
|
||
};
|
||
|
||
const finishDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
|
||
if (canvasMarquee && canvasMarquee.pointerId === event.pointerId) {
|
||
event.preventDefault();
|
||
setCanvasMarquee(null);
|
||
if (canvasViewportRef.current?.hasPointerCapture?.(event.pointerId)) {
|
||
canvasViewportRef.current.releasePointerCapture?.(event.pointerId);
|
||
}
|
||
return;
|
||
}
|
||
|
||
const dragState = dragStateRef.current;
|
||
const pointerId = getPointerId(event);
|
||
if (
|
||
dragState &&
|
||
(dragState.pointerId < 0 ||
|
||
pointerId < 0 ||
|
||
dragState.pointerId === pointerId)
|
||
) {
|
||
if (dragState.kind === 'minimap' && !dragState.moved) {
|
||
const pointer = getPointerClient(event);
|
||
moveViewportFromMinimapPointer(pointer.x, pointer.y);
|
||
}
|
||
dragStateRef.current = null;
|
||
setIsPanning(false);
|
||
setSnapGuide(null);
|
||
if (canvasViewportRef.current?.hasPointerCapture?.(event.pointerId)) {
|
||
canvasViewportRef.current.releasePointerCapture?.(event.pointerId);
|
||
}
|
||
}
|
||
};
|
||
|
||
const switchTool = (tool: CanvasTool) => {
|
||
dragStateRef.current = null;
|
||
setIsPanning(false);
|
||
setSnapGuide(null);
|
||
if (tool === 'upload') {
|
||
setUploadTarget('asset');
|
||
uploadInputRef.current?.click();
|
||
return;
|
||
}
|
||
if (tool === 'generate') {
|
||
openGenerateDialog();
|
||
return;
|
||
}
|
||
if (tool === 'spec') {
|
||
setIsSpecMenuOpen((open) => !open);
|
||
setActiveTool('spec');
|
||
return;
|
||
}
|
||
if (tool === 'character') {
|
||
openCharacterGenerationDialog();
|
||
return;
|
||
}
|
||
if (tool === 'icon') {
|
||
openIconGenerationDialog();
|
||
return;
|
||
}
|
||
setActiveTool(tool);
|
||
};
|
||
|
||
const toggleSidebarPanel = (panel: SidebarPanel) => {
|
||
setActiveSidebarPanel((currentPanel) =>
|
||
currentPanel === panel ? null : panel,
|
||
);
|
||
};
|
||
|
||
const groupSelectedLayers = () => {
|
||
const targetIds = selectedLayerIds.length
|
||
? selectedLayerIds
|
||
: selectedLayerId
|
||
? [selectedLayerId]
|
||
: [];
|
||
if (!targetIds.length) {
|
||
return;
|
||
}
|
||
const groupId = `layer-group-${Date.now()}`;
|
||
captureCanvasHistory();
|
||
setLayers((currentLayers) =>
|
||
currentLayers.map((layer) =>
|
||
targetIds.includes(layer.id)
|
||
? {
|
||
...layer,
|
||
groupId,
|
||
}
|
||
: layer,
|
||
),
|
||
);
|
||
};
|
||
|
||
const updateSpecFormValue = (key: keyof SpecFormValues, value: string) => {
|
||
setGenerateDialog((currentDialog) => {
|
||
if (currentDialog?.mode !== 'spec') {
|
||
return currentDialog;
|
||
}
|
||
const specType = currentDialog.specType ?? 'custom';
|
||
return {
|
||
...currentDialog,
|
||
specValues: {
|
||
...DEFAULT_SPEC_FORM_VALUES[specType],
|
||
...currentDialog.specValues,
|
||
[key]: value,
|
||
},
|
||
status:
|
||
currentDialog.status === 'failed' ? 'idle' : currentDialog.status,
|
||
errorMessage:
|
||
currentDialog.status === 'failed'
|
||
? undefined
|
||
: currentDialog.errorMessage,
|
||
};
|
||
});
|
||
};
|
||
|
||
const updateCharacterAnimationDuration = (frameCountValue: string) => {
|
||
const option = CHARACTER_ANIMATION_DURATION_OPTIONS.find(
|
||
(item) => String(item.frameCount) === frameCountValue,
|
||
);
|
||
if (!option) {
|
||
return;
|
||
}
|
||
setCharacterAnimationPanel((currentPanel) =>
|
||
currentPanel
|
||
? {
|
||
...currentPanel,
|
||
frameCount: option.frameCount,
|
||
durationSeconds: option.durationSeconds,
|
||
status:
|
||
currentPanel.status === 'failed' ? 'idle' : currentPanel.status,
|
||
errorMessage:
|
||
currentPanel.status === 'failed'
|
||
? undefined
|
||
: currentPanel.errorMessage,
|
||
}
|
||
: currentPanel,
|
||
);
|
||
};
|
||
|
||
const submitCharacterAnimation = async () => {
|
||
if (!characterAnimationPanel || !characterAnimationSourceLayer) {
|
||
return;
|
||
}
|
||
const promptText = characterAnimationPanel.promptText.trim();
|
||
const nextPanel = {
|
||
...characterAnimationPanel,
|
||
promptText,
|
||
status: 'generating' as const,
|
||
errorMessage: undefined,
|
||
result: undefined,
|
||
};
|
||
setCharacterAnimationPanel(nextPanel);
|
||
|
||
try {
|
||
const result = await generateEditorCharacterAnimation({
|
||
sourceLayerId: characterAnimationSourceLayer.id,
|
||
sourceImageSrc: resolveCharacterAnimationSourceImageSrc(
|
||
characterAnimationSourceLayer,
|
||
),
|
||
sourceWidth: characterAnimationSourceLayer.originalWidth,
|
||
sourceHeight: characterAnimationSourceLayer.originalHeight,
|
||
promptText,
|
||
resolution: nextPanel.resolution,
|
||
ratio: nextPanel.ratio,
|
||
frameCount: nextPanel.frameCount,
|
||
durationSeconds: nextPanel.durationSeconds,
|
||
priceMudPoints: calculateCharacterAnimationPrice(
|
||
nextPanel.resolution,
|
||
nextPanel.durationSeconds,
|
||
),
|
||
model: CHARACTER_ANIMATION_MODEL,
|
||
});
|
||
setCharacterAnimationPanel((currentPanel) =>
|
||
currentPanel
|
||
? {
|
||
...currentPanel,
|
||
status: 'completed',
|
||
result,
|
||
}
|
||
: currentPanel,
|
||
);
|
||
} catch (error) {
|
||
setCharacterAnimationPanel((currentPanel) =>
|
||
currentPanel
|
||
? {
|
||
...currentPanel,
|
||
status: 'failed',
|
||
errorMessage:
|
||
error instanceof Error && error.message.trim()
|
||
? error.message
|
||
: '生成角色动画失败',
|
||
}
|
||
: currentPanel,
|
||
);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<section
|
||
ref={editorRootRef}
|
||
className="image-canvas-editor"
|
||
aria-label="图片画布编辑器"
|
||
onContextMenu={(event) => event.preventDefault()}
|
||
>
|
||
<input
|
||
ref={uploadInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
multiple
|
||
aria-label="上传图片文件"
|
||
hidden
|
||
onChange={(event) => {
|
||
const files = event.currentTarget.files;
|
||
if (files?.length) {
|
||
if (uploadTarget === 'character-spec') {
|
||
void addCharacterSpecReferenceFiles(files);
|
||
} else if (uploadTarget === 'character-reference') {
|
||
void addCharacterReferenceFiles(files);
|
||
} else if (uploadTarget === 'icon-spec') {
|
||
void addIconSpecReferenceFiles(files);
|
||
} else {
|
||
addUploadedFiles(files, { addToCanvas: activeTool === 'upload' });
|
||
}
|
||
}
|
||
setUploadTarget('asset');
|
||
event.currentTarget.value = '';
|
||
}}
|
||
/>
|
||
{assetPointerDrag?.active ? (
|
||
<div
|
||
className="image-canvas-editor__asset-drag-preview"
|
||
style={{
|
||
left: Number.isFinite(assetPointerDrag.currentClientX)
|
||
? assetPointerDrag.currentClientX
|
||
: 0,
|
||
top: Number.isFinite(assetPointerDrag.currentClientY)
|
||
? assetPointerDrag.currentClientY
|
||
: 0,
|
||
}}
|
||
aria-hidden="true"
|
||
>
|
||
{assets.find((asset) => asset.id === assetPointerDrag.assetId)
|
||
?.label ?? '素材'}
|
||
</div>
|
||
) : null}
|
||
<ImageCanvasSidebarView
|
||
activeSidebarPanel={activeSidebarPanel}
|
||
assetListRef={assetListRef}
|
||
uploadInputRef={uploadInputRef}
|
||
assetPointerDragRef={assetPointerDragRef}
|
||
suppressAssetClickRef={suppressAssetClickRef}
|
||
assets={assets}
|
||
groupedAssets={groupedAssets}
|
||
assetFolders={assetFolders}
|
||
layers={layers}
|
||
selectedLayerId={selectedLayerId}
|
||
selectedLayerIds={selectedLayerIds}
|
||
isAssetSelectionMode={isAssetSelectionMode}
|
||
selectedAssetIds={selectedAssetIds}
|
||
assetMoveDropFolderId={assetMoveDropFolderId}
|
||
pinnedAssetMoveFolderId={pinnedAssetMoveFolderId}
|
||
creatingFolder={creatingFolder}
|
||
newFolderName={newFolderName}
|
||
renamingFolder={renamingFolder}
|
||
renamingAsset={renamingAsset}
|
||
allSelectableAssetsSelected={allSelectableAssetsSelected}
|
||
assetMarquee={assetMarquee}
|
||
setIsAssetSelectionMode={setIsAssetSelectionMode}
|
||
setCreatingFolder={setCreatingFolder}
|
||
setNewFolderName={setNewFolderName}
|
||
setRenamingFolder={setRenamingFolder}
|
||
setRenamingAsset={setRenamingAsset}
|
||
setActiveUploadFolderId={setActiveUploadFolderId}
|
||
setUploadTarget={setUploadTarget}
|
||
setUploadDropTarget={setUploadDropTarget}
|
||
setAssetPointerDrag={setAssetPointerDrag}
|
||
setSelectedAssetIds={setSelectedAssetIds}
|
||
setImageContextMenu={setImageContextMenu}
|
||
setContextMenu={setContextMenu}
|
||
onAssetMarqueePointerDown={handleAssetMarqueePointerDown}
|
||
onAssetMarqueePointerMove={handleAssetMarqueePointerMove}
|
||
onAssetMarqueePointerUp={handleAssetMarqueePointerUp}
|
||
updateAssetMoveDropFolder={updateAssetMoveDropFolder}
|
||
addUploadedFiles={addUploadedFiles}
|
||
moveAssetToFolder={moveAssetToFolder}
|
||
commitNewAssetFolder={commitNewAssetFolder}
|
||
toggleAssetFolder={toggleAssetFolder}
|
||
startRenamingFolder={startRenamingFolder}
|
||
commitFolderRename={commitFolderRename}
|
||
deleteAssetFolder={deleteAssetFolder}
|
||
startRenamingAsset={startRenamingAsset}
|
||
commitAssetRename={commitAssetRename}
|
||
deleteUploadedAsset={deleteUploadedAsset}
|
||
toggleAssetSelected={toggleAssetSelected}
|
||
addAssetLayer={addAssetLayer}
|
||
toggleAllAssetsSelected={toggleAllAssetsSelected}
|
||
deleteSelectedAssets={deleteSelectedAssets}
|
||
closeAssetSelectionMode={closeAssetSelectionMode}
|
||
groupSelectedLayers={groupSelectedLayers}
|
||
selectSingleLayer={selectSingleLayer}
|
||
resolveContextMenuPosition={resolveContextMenuPosition}
|
||
getCanvasPointFromClient={getCanvasPointFromClient}
|
||
/>
|
||
|
||
<div className="image-canvas-editor__main">
|
||
<div className="image-canvas-editor__topbar">
|
||
<a
|
||
className="image-canvas-editor__project-back-button"
|
||
href="/project"
|
||
aria-label="返回项目页面"
|
||
title="返回项目"
|
||
>
|
||
<ChevronLeft className="h-4 w-4" aria-hidden="true" />
|
||
</a>
|
||
<div className="image-canvas-editor__title-block">
|
||
{isRenamingProject ? (
|
||
<form
|
||
className="image-canvas-editor__project-title-form"
|
||
onSubmit={(event) => {
|
||
event.preventDefault();
|
||
submitProjectRename();
|
||
}}
|
||
>
|
||
<PlatformTextField
|
||
aria-label="项目名称"
|
||
value={projectRenameValue}
|
||
autoFocus
|
||
disabled={isProjectRenameSaving}
|
||
className="image-canvas-editor__project-title-input"
|
||
onChange={(event) => {
|
||
setProjectRenameValue(event.target.value);
|
||
setProjectRenameError(null);
|
||
}}
|
||
onKeyDown={(event) => {
|
||
if (event.key === 'Escape') {
|
||
event.preventDefault();
|
||
cancelProjectRename();
|
||
}
|
||
}}
|
||
/>
|
||
<EditorIconButton
|
||
type="submit"
|
||
label="保存项目名称"
|
||
title="保存"
|
||
icon={Check}
|
||
disabled={isProjectRenameSaving}
|
||
/>
|
||
<EditorIconButton
|
||
label="取消修改项目名称"
|
||
title="取消"
|
||
icon={X}
|
||
disabled={isProjectRenameSaving}
|
||
onClick={cancelProjectRename}
|
||
/>
|
||
{projectRenameError ? (
|
||
<span
|
||
className="image-canvas-editor__project-title-error"
|
||
role="alert"
|
||
>
|
||
{projectRenameError}
|
||
</span>
|
||
) : null}
|
||
</form>
|
||
) : (
|
||
<div className="image-canvas-editor__project-title-row">
|
||
<button
|
||
type="button"
|
||
className="image-canvas-editor__project-title-button"
|
||
onDoubleClick={startProjectRename}
|
||
aria-label={`编辑项目名称${projectTitle}`}
|
||
>
|
||
<h1>{projectTitle}</h1>
|
||
</button>
|
||
<EditorIconButton
|
||
className="image-canvas-editor__project-rename-button"
|
||
label="编辑项目名称"
|
||
title="编辑项目名称"
|
||
icon={Pencil}
|
||
onClick={startProjectRename}
|
||
/>
|
||
</div>
|
||
)}
|
||
<span>画布</span>
|
||
</div>
|
||
<div className="image-canvas-editor__topbar-actions">
|
||
<EditorIconButton
|
||
label="下载画布素材"
|
||
title="下载画布素材"
|
||
icon={Download}
|
||
disabled={
|
||
isExportingAssets ||
|
||
!layers.some((layer) => layer.src.trim().length > 0)
|
||
}
|
||
onClick={() => void exportCanvasAssets()}
|
||
/>
|
||
{assetExportStatus ? (
|
||
<PlatformStatusMessage
|
||
tone={assetExportStatus.tone}
|
||
surface="platform"
|
||
size="xs"
|
||
role={assetExportStatus.tone === 'error' ? 'alert' : 'status'}
|
||
>
|
||
{assetExportStatus.message}
|
||
</PlatformStatusMessage>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
|
||
<ImageCanvasStageView
|
||
canvasViewportRef={canvasViewportRef}
|
||
specToolWrapRef={specToolWrapRef}
|
||
isPanning={isPanning}
|
||
effectiveTool={effectiveTool}
|
||
canvasBackgroundColor={canvasBackgroundColor}
|
||
canvasBackgroundHexValue={canvasBackgroundHexValue}
|
||
viewport={viewport}
|
||
snapGuide={snapGuide}
|
||
layers={layers}
|
||
selectedLayer={selectedLayer}
|
||
selectedLayerIds={selectedLayerIds}
|
||
hoveredLayerId={hoveredLayerId}
|
||
canvasMarquee={canvasMarquee}
|
||
canvasGenerationDialogs={canvasGenerationDialogs}
|
||
generateDialog={generateDialog}
|
||
quickEditPanel={quickEditPanel}
|
||
generationComposerStyle={generationComposerStyle}
|
||
selectedToolbarStyle={selectedToolbarStyle}
|
||
uploadDropTarget={uploadDropTarget}
|
||
contextMenu={contextMenu}
|
||
canvasClipboard={canvasClipboard}
|
||
imageContextMenu={imageContextMenu}
|
||
imageContextMenuLayer={imageContextMenuLayer}
|
||
contextShouldShowLayer={contextShouldShowLayer}
|
||
contextShouldUnlockLayer={contextShouldUnlockLayer}
|
||
canUndo={canUndo}
|
||
canRedo={canRedo}
|
||
isZoomMenuOpen={isZoomMenuOpen}
|
||
isBackgroundSettingsOpen={isBackgroundSettingsOpen}
|
||
activeSidebarPanel={activeSidebarPanel}
|
||
isMinimapOpen={isMinimapOpen}
|
||
minimapModel={minimapModel}
|
||
onCanvasPointerDown={handleCanvasPointerDown}
|
||
onCanvasPointerMove={handlePointerMove}
|
||
onCanvasPointerUp={finishDrag}
|
||
onCanvasDragOver={handleCanvasDragOver}
|
||
onCanvasDragLeave={handleCanvasDragLeave}
|
||
onCanvasDrop={handleCanvasDrop}
|
||
onCanvasContextMenu={handleCanvasContextMenu}
|
||
onLayerPointerDown={handleLayerPointerDown}
|
||
onLayerClick={handleLayerClick}
|
||
onLayerContextMenu={handleLayerContextMenu}
|
||
onLayerMouseEnter={setHoveredLayerId}
|
||
onLayerMouseLeave={(layerId) =>
|
||
setHoveredLayerId((currentId) =>
|
||
currentId === layerId ? null : currentId,
|
||
)
|
||
}
|
||
onOpenLayerMetadata={(layer) => {
|
||
setMetadataLayer(layer);
|
||
selectSingleLayer(layer.id);
|
||
}}
|
||
onGenerationFramePointerDown={handleGenerationFramePointerDown}
|
||
onActivateGenerationDialog={activateCanvasGenerationDialog}
|
||
onDeleteSelectedLayer={deleteSelectedLayer}
|
||
onOpenQuickEditPanel={openQuickEditPanel}
|
||
onOpenEditDialog={openEditDialog}
|
||
onOpenCharacterAnimationPanel={openCharacterAnimationPanel}
|
||
onPasteCanvasClipboard={pasteCanvasClipboard}
|
||
onCopyContextLayers={copyContextLayers}
|
||
onDuplicateContextLayers={duplicateContextLayers}
|
||
onMoveContextLayers={moveContextLayers}
|
||
onGroupContextLayers={groupContextLayers}
|
||
onUngroupContextLayers={ungroupContextLayers}
|
||
onToggleContextLayerVisibility={toggleContextLayerVisibility}
|
||
onToggleContextLayerLock={toggleContextLayerLock}
|
||
onFlipContextLayers={flipContextLayers}
|
||
onExportContextLayer={exportContextLayer}
|
||
onDeleteContextLayers={deleteContextLayers}
|
||
onDeleteLayerById={deleteLayerById}
|
||
onCloseContextMenu={() => setContextMenu(null)}
|
||
onCloseImageContextMenu={() => setImageContextMenu(null)}
|
||
onUpdateScaleFromCenter={updateScaleFromCenter}
|
||
onFitLayers={fitLayers}
|
||
onUndoCanvasChange={undoCanvasChange}
|
||
onRedoCanvasChange={redoCanvasChange}
|
||
onToggleZoomMenu={() => setIsZoomMenuOpen((open) => !open)}
|
||
onCloseZoomMenu={() => setIsZoomMenuOpen(false)}
|
||
onToggleBackgroundSettings={() =>
|
||
setIsBackgroundSettingsOpen((isOpen) => !isOpen)
|
||
}
|
||
onApplyCanvasBackgroundColor={applyCanvasBackgroundColor}
|
||
onCanvasBackgroundHexChange={handleCanvasBackgroundHexChange}
|
||
onToggleSidebarPanel={toggleSidebarPanel}
|
||
onToggleMinimap={() => setIsMinimapOpen((open) => !open)}
|
||
onMinimapPointerDown={handleMinimapPointerDown}
|
||
onSwitchTool={switchTool}
|
||
>
|
||
<ImageCanvasGenerationComposerView
|
||
specToolWrapRef={specToolWrapRef}
|
||
characterSpecButtonRef={characterSpecButtonRef}
|
||
iconSpecButtonRef={iconSpecButtonRef}
|
||
isSpecMenuOpen={isSpecMenuOpen}
|
||
isCharacterSpecMenuOpen={isCharacterSpecMenuOpen}
|
||
isIconSpecMenuOpen={isIconSpecMenuOpen}
|
||
isPickingCharacterSpecFromCanvas={isPickingCharacterSpecFromCanvas}
|
||
isPickingIconSpecFromCanvas={isPickingIconSpecFromCanvas}
|
||
generateDialog={generateDialog}
|
||
generationComposerStyle={generationComposerStyle}
|
||
iconComposerStyle={iconComposerStyle}
|
||
quickEditPanel={quickEditPanel}
|
||
quickEditSourceLayer={quickEditSourceLayer}
|
||
quickEditPanelStyle={quickEditPanelStyle}
|
||
quickEditSizeOptions={quickEditSizeOptions}
|
||
quickEditModelOptions={quickEditModelOptions}
|
||
characterAnimationPanel={characterAnimationPanel}
|
||
characterAnimationSourceLayer={characterAnimationSourceLayer}
|
||
characterAnimationPanelStyle={characterAnimationPanelStyle}
|
||
characterAnimationPrice={characterAnimationPrice}
|
||
setGenerateDialog={setGenerateDialog}
|
||
setQuickEditPanel={setQuickEditPanel}
|
||
setCharacterAnimationPanel={setCharacterAnimationPanel}
|
||
setIsCharacterSpecMenuOpen={setIsCharacterSpecMenuOpen}
|
||
setIsIconSpecMenuOpen={setIsIconSpecMenuOpen}
|
||
setIsPickingCharacterSpecFromCanvas={
|
||
setIsPickingCharacterSpecFromCanvas
|
||
}
|
||
setIsPickingIconSpecFromCanvas={setIsPickingIconSpecFromCanvas}
|
||
onOpenSpecDialog={openSpecDialog}
|
||
onRequestUpload={(target) => {
|
||
setUploadTarget(target);
|
||
uploadInputRef.current?.click();
|
||
}}
|
||
onSubmitImageGeneration={(dialog) =>
|
||
void submitImageGeneration(dialog)
|
||
}
|
||
onSubmitIconSpritesheetGeneration={(dialog) =>
|
||
void submitIconSpritesheetGeneration(dialog)
|
||
}
|
||
onSubmitQuickEdit={() => void submitQuickEdit()}
|
||
onSubmitCharacterAnimation={() => void submitCharacterAnimation()}
|
||
onCloseGenerateComposer={() => {
|
||
setGenerateDialog((currentDialog) =>
|
||
currentDialog?.mode === 'generate'
|
||
? {
|
||
...currentDialog,
|
||
composerOpen: false,
|
||
}
|
||
: currentDialog,
|
||
);
|
||
setActiveTool('select');
|
||
}}
|
||
onUpdateSpecFormValue={updateSpecFormValue}
|
||
onUpdateIconDescription={updateIconDescription}
|
||
onAddIconDescription={addIconDescription}
|
||
onUpdateCharacterAnimationDuration={
|
||
updateCharacterAnimationDuration
|
||
}
|
||
/>
|
||
</ImageCanvasStageView>
|
||
</div>
|
||
|
||
<UnifiedModal
|
||
open={Boolean(metadataLayer)}
|
||
title={metadataLayer ? `${metadataLayer.title}图片信息` : '图片信息'}
|
||
size="sm"
|
||
closeLabel="关闭图片信息"
|
||
onClose={() => setMetadataLayer(null)}
|
||
panelClassName="image-canvas-editor__metadata-dialog"
|
||
bodyClassName="image-canvas-editor__metadata-body"
|
||
>
|
||
{metadataLayer ? (
|
||
<dl className="image-canvas-editor__metadata-grid">
|
||
<dt>图片类型</dt>
|
||
<dd>{formatLayerImageType(metadataLayer)}</dd>
|
||
<dt>生成输入</dt>
|
||
<dd className="image-canvas-editor__metadata-inputs">
|
||
{metadataLayer.generationInputs?.fields.length ||
|
||
metadataLayer.generationInputs?.references.length ? (
|
||
<>
|
||
{metadataLayer.generationInputs.fields.map((field) => (
|
||
<div
|
||
key={`${field.title}-${field.value}`}
|
||
className="image-canvas-editor__metadata-input-field"
|
||
>
|
||
<span className="image-canvas-editor__metadata-input-title">
|
||
{field.title}
|
||
</span>
|
||
<span>{field.value}</span>
|
||
</div>
|
||
))}
|
||
{metadataLayer.generationInputs.references.length ? (
|
||
<div className="image-canvas-editor__metadata-reference-list">
|
||
{metadataLayer.generationInputs.references.map(
|
||
(reference) => (
|
||
<div
|
||
key={`${reference.title}-${reference.label}-${reference.src}`}
|
||
className="image-canvas-editor__metadata-reference-card"
|
||
>
|
||
<img
|
||
src={reference.src}
|
||
alt=""
|
||
aria-hidden="true"
|
||
/>
|
||
<span className="image-canvas-editor__metadata-reference-copy">
|
||
<span className="image-canvas-editor__metadata-input-title">
|
||
{reference.title}
|
||
</span>
|
||
<span>{reference.label}</span>
|
||
</span>
|
||
</div>
|
||
),
|
||
)}
|
||
</div>
|
||
) : null}
|
||
</>
|
||
) : (
|
||
'-'
|
||
)}
|
||
</dd>
|
||
<dt>Model</dt>
|
||
<dd>{metadataLayer.model ?? '-'}</dd>
|
||
<dt>Resolution</dt>
|
||
<dd>
|
||
{metadataLayer.originalWidth} x {metadataLayer.originalHeight} px
|
||
</dd>
|
||
<dt>Provider</dt>
|
||
<dd>{metadataLayer.provider ?? '-'}</dd>
|
||
<dt>Task</dt>
|
||
<dd>{metadataLayer.taskId ?? '-'}</dd>
|
||
<dt>Object</dt>
|
||
<dd>
|
||
{metadataLayer.objectKey ?? metadataLayer.assetObjectId ?? '-'}
|
||
</dd>
|
||
</dl>
|
||
) : null}
|
||
</UnifiedModal>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export default ImageCanvasEditorView;
|