hamid zarghami
118 lines
4.6 KiB
TypeScript
118 lines
4.6 KiB
TypeScript
import { type FC, useEffect, useRef, useState } from 'react'
|
|
import Konva from 'konva'
|
|
import { clx } from '@/helpers/utils'
|
|
import EditorSidebar from './components/EditorSidebar'
|
|
import EditorCanvas from './components/EditorCanvas'
|
|
import LayersPanel from './components/LayersPanel'
|
|
import { useGetCatalogById, useUpdateCatalog } from '../home/hooks/useHomeData'
|
|
import { useParams } from 'react-router-dom'
|
|
import { useEditorStore } from './store/editorStore'
|
|
|
|
const Editor: FC = () => {
|
|
|
|
const { id } = useParams()
|
|
|
|
// Konva 10 با legacyTextRendering=false متن را با baseline جدید میکشد ولی getWidth/getHeight
|
|
// و کادر ترنسفورمر هنوز بر اساس جعبهٔ قدیمیاند؛ نتیجه: متن از کادر آبی بیرون میزند.
|
|
useEffect(() => {
|
|
const prev = Konva.legacyTextRendering
|
|
Konva.legacyTextRendering = true
|
|
return () => {
|
|
Konva.legacyTextRendering = prev
|
|
}
|
|
}, [])
|
|
const [isLayersPanelOpen, setIsLayersPanelOpen] = useState(false)
|
|
const [isInitialContentReady, setIsInitialContentReady] = useState(false)
|
|
const loadedCatalogIdRef = useRef<string | null>(null)
|
|
const skipNextAutosaveRef = useRef(true)
|
|
const { loadPages, resetEditor, pages, documentSettings, objects, currentPageId } = useEditorStore()
|
|
const { data, isFetched } = useGetCatalogById(id!)
|
|
const { scheduleUpdate, cancelPendingUpdate, isSaving } = useUpdateCatalog()
|
|
|
|
// هنگام تعویض کاتالوگ: لغو ذخیرهٔ معلق، پاکسازی store، و منتظر بارگذاری مجدد بمان
|
|
useEffect(() => {
|
|
cancelPendingUpdate()
|
|
loadedCatalogIdRef.current = null
|
|
skipNextAutosaveRef.current = true
|
|
setIsInitialContentReady(false)
|
|
resetEditor()
|
|
}, [id, cancelPendingUpdate, resetEditor])
|
|
|
|
// بارگذاری محتوا فقط یکبار برای هر id (نه در هر refetch)
|
|
useEffect(() => {
|
|
if (!id || !isFetched) return
|
|
if (loadedCatalogIdRef.current === id) return
|
|
|
|
const rawContent = data?.data?.content
|
|
if (rawContent) {
|
|
try {
|
|
const json = JSON.parse(rawContent)
|
|
if (Array.isArray(json)) {
|
|
loadPages(json)
|
|
} else if (json?.pages) {
|
|
loadPages(json.pages, json.documentSettings)
|
|
} else {
|
|
console.error('Invalid catalog content JSON: missing pages')
|
|
return
|
|
}
|
|
} catch (error) {
|
|
console.error('Invalid catalog content JSON:', error)
|
|
return
|
|
}
|
|
} else {
|
|
resetEditor()
|
|
}
|
|
|
|
loadedCatalogIdRef.current = id
|
|
skipNextAutosaveRef.current = true
|
|
setIsInitialContentReady(true)
|
|
}, [id, isFetched, data?.data?.content, loadPages, resetEditor])
|
|
|
|
useEffect(() => {
|
|
if (!id) return
|
|
if (!isInitialContentReady) return
|
|
if (!pages || pages.length === 0) return
|
|
if (skipNextAutosaveRef.current) {
|
|
skipNextAutosaveRef.current = false
|
|
return
|
|
}
|
|
|
|
const pagesToSave = currentPageId
|
|
? pages.map((p) =>
|
|
p.id === currentPageId ? { ...p, objects } : p,
|
|
)
|
|
: pages
|
|
|
|
scheduleUpdate({
|
|
id,
|
|
content: JSON.stringify({ pages: pagesToSave, documentSettings }),
|
|
})
|
|
// عمداً scheduleUpdate را در وابستگیها نیاوردیم تا از لوپ ذخیرهسازی جلوگیری شود
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [id, isInitialContentReady, pages, documentSettings, objects, currentPageId])
|
|
|
|
|
|
return (
|
|
<div className={clx(
|
|
"flex h-full w-full",
|
|
isLayersPanelOpen ? "xl:pl-[296px]" : "xl:pl-[80px]"
|
|
)}>
|
|
{isSaving ? (
|
|
<div className="fixed bottom-10 left-10 z-50 rounded-full shadow-sm">
|
|
<div className="flex items-center gap-2 text-sm text-gray-700">
|
|
<span className="h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-black" />
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<LayersPanel
|
|
isOpen={isLayersPanelOpen}
|
|
setIsOpen={setIsLayersPanelOpen}
|
|
catalogSize={data?.data?.size}
|
|
/>
|
|
<EditorCanvas catalogSize={data?.data?.size} />
|
|
<EditorSidebar catalogSize={data?.data?.size} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Editor |