Hamid
89 lines
3.5 KiB
TypeScript
89 lines
3.5 KiB
TypeScript
import { type FC, useEffect, 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 { loadPages, pages, documentSettings, objects, currentPageId } = useEditorStore()
|
|
const { data, isFetched } = useGetCatalogById(id!)
|
|
const { scheduleUpdate, isSaving } = useUpdateCatalog()
|
|
|
|
useEffect(() => {
|
|
if (!isFetched) return
|
|
|
|
if (data?.data?.content) {
|
|
try {
|
|
const json = JSON.parse(data.data.content)
|
|
if (Array.isArray(json)) {
|
|
loadPages(json)
|
|
} else if (json?.pages) {
|
|
loadPages(json.pages, json.documentSettings)
|
|
}
|
|
} catch (error) {
|
|
console.error('Invalid catalog content JSON:', error)
|
|
}
|
|
}
|
|
|
|
setIsInitialContentReady(true)
|
|
}, [data?.data?.content, isFetched, loadPages])
|
|
|
|
useEffect(() => {
|
|
if (!id) return
|
|
if (!isInitialContentReady) return
|
|
if (!pages || pages.length === 0) 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" />
|
|
{/* <span>در حال ذخیره ...</span> */}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<LayersPanel isOpen={isLayersPanelOpen} setIsOpen={setIsLayersPanelOpen} />
|
|
<EditorCanvas catalogSize={data?.data?.size} />
|
|
<EditorSidebar catalogSize={data?.data?.size} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Editor |