hamid zarghami
75 lines
2.8 KiB
TypeScript
75 lines
2.8 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 { loadPages, pages } = useEditorStore()
|
|
const { data } = useGetCatalogById(id!)
|
|
const { scheduleUpdate, isSaving } = useUpdateCatalog()
|
|
|
|
useEffect(() => {
|
|
if (data?.data && data?.data?.content) {
|
|
const json = JSON.parse(data?.data?.content)
|
|
console.log(json);
|
|
|
|
if (json) {
|
|
loadPages(json)
|
|
}
|
|
}
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [data?.data])
|
|
|
|
useEffect(() => {
|
|
if (!id) return
|
|
if (!pages || pages.length === 0) return
|
|
|
|
scheduleUpdate({
|
|
id,
|
|
content: JSON.stringify(pages),
|
|
})
|
|
// عمداً scheduleUpdate را در وابستگیها نیاوردیم تا از لوپ ذخیرهسازی جلوگیری شود
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [id, pages])
|
|
|
|
|
|
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 |