-
)
}
diff --git a/src/components/Lightbox.tsx b/src/components/Lightbox.tsx
index 1f3e35fc..e34fdcb6 100644
--- a/src/components/Lightbox.tsx
+++ b/src/components/Lightbox.tsx
@@ -1,8 +1,10 @@
-import { useEffect, useState, useRef, useCallback } from 'react'
+import { Suspense, lazy, useEffect, useState, useRef, useCallback } from 'react'
import { useStore, getCachedImage, ensureImageCached } from '../store'
import { useCloseOnEscape } from '../hooks/useCloseOnEscape'
import { createMaskPreviewDataUrl } from '../lib/canvasImage'
+const ReferenceImageEditorModal = lazy(() => import('./ReferenceImageEditorModal'))
+
const MIN_SCALE = 1
const MAX_SCALE = 10
@@ -10,14 +12,22 @@ function clamp(v: number, min: number, max: number) {
return Math.max(min, Math.min(max, v))
}
+function isLightboxControl(target: EventTarget | null) {
+ return target instanceof Element && Boolean(target.closest('[data-lightbox-control]'))
+}
+
export default function Lightbox() {
const lightboxImageId = useStore((s) => s.lightboxImageId)
const lightboxImageList = useStore((s) => s.lightboxImageList)
+ const lightboxStartEditor = useStore((s) => s.lightboxStartEditor)
const setLightboxImageId = useStore((s) => s.setLightboxImageId)
+ const setLightboxStartEditor = useStore((s) => s.setLightboxStartEditor)
+ const inputImages = useStore((s) => s.inputImages)
+ const [src, setSrc] = useState('')
+ const [showEditor, setShowEditor] = useState(false)
const maskDraft = useStore((s) => s.maskDraft)
const tasks = useStore((s) => s.tasks)
- const [src, setSrc] = useState('')
const [maskImageSrc, setMaskImageSrc] = useState('')
const [maskPreviewSrc, setMaskPreviewSrc] = useState('')
@@ -28,6 +38,8 @@ export default function Lightbox() {
useEffect(() => {
if (!lightboxImageId) {
setSrc('')
+ setShowEditor(false)
+ setLightboxStartEditor(false)
return
}
const cached = getCachedImage(lightboxImageId)
@@ -38,7 +50,15 @@ export default function Lightbox() {
if (url) setSrc(url)
})
}
- }, [lightboxImageId])
+ }, [lightboxImageId, setLightboxStartEditor])
+
+ const isReferenceImage = Boolean(lightboxImageId && inputImages.some((image) => image.id === lightboxImageId))
+
+ useEffect(() => {
+ if (!lightboxImageId || !src || !lightboxStartEditor) return
+ setShowEditor(true)
+ setLightboxStartEditor(false)
+ }, [lightboxImageId, lightboxStartEditor, setLightboxStartEditor, src])
// 遮罩图加载
useEffect(() => {
@@ -116,16 +136,36 @@ export default function Lightbox() {
if (!lightboxImageId || !src) return null
return (
- setLightboxImageId(img.id, inputImages.map((i) => i.id))}
+ onClick={() => handleInputImageClick(img.id)}
+ aria-pressed={selected}
+ aria-label={selected ? '取消选择参考图' : '选择参考图'}
>
)}
{canEdit && (
-
)}
-
-
+
+