diff --git a/src/pages/editor/Editor.tsx b/src/pages/editor/Editor.tsx index 368ce82..fc6fa88 100644 --- a/src/pages/editor/Editor.tsx +++ b/src/pages/editor/Editor.tsx @@ -1,4 +1,4 @@ -import { type FC, useEffect, useState } from 'react' +import { type FC, useEffect, useRef, useState } from 'react' import Konva from 'konva' import { clx } from '@/helpers/utils' import EditorSidebar from './components/EditorSidebar' @@ -23,33 +23,59 @@ const Editor: FC = () => { }, []) const [isLayersPanelOpen, setIsLayersPanelOpen] = useState(false) const [isInitialContentReady, setIsInitialContentReady] = useState(false) - const { loadPages, pages, documentSettings, objects, currentPageId } = useEditorStore() + const loadedCatalogIdRef = useRef(null) + const skipNextAutosaveRef = useRef(true) + const { loadPages, resetEditor, pages, documentSettings, objects, currentPageId } = useEditorStore() const { data, isFetched } = useGetCatalogById(id!) - const { scheduleUpdate, isSaving } = useUpdateCatalog() + const { scheduleUpdate, cancelPendingUpdate, isSaving } = useUpdateCatalog() + // هنگام تعویض کاتالوگ: لغو ذخیرهٔ معلق، پاک‌سازی store، و منتظر بارگذاری مجدد بمان useEffect(() => { - if (!isFetched) return + cancelPendingUpdate() + loadedCatalogIdRef.current = null + skipNextAutosaveRef.current = true + setIsInitialContentReady(false) + resetEditor() + }, [id, cancelPendingUpdate, resetEditor]) - if (data?.data?.content) { + // بارگذاری محتوا فقط یک‌بار برای هر id (نه در هر refetch) + useEffect(() => { + if (!id || !isFetched) return + if (loadedCatalogIdRef.current === id) return + + const rawContent = data?.data?.content + if (rawContent) { try { - const json = JSON.parse(data.data.content) + 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) - }, [data?.data?.content, isFetched, loadPages]) + }, [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) => @@ -75,7 +101,6 @@ const Editor: FC = () => {
- {/* در حال ذخیره ... */}
) : null} diff --git a/src/pages/editor/store/editorStore.ts b/src/pages/editor/store/editorStore.ts index 8aecf61..24c24ba 100644 --- a/src/pages/editor/store/editorStore.ts +++ b/src/pages/editor/store/editorStore.ts @@ -150,6 +150,7 @@ type EditorStoreType = { pages: Page[], documentSettings?: Partial, ) => void; + resetEditor: () => void; clipboardObjects: EditorObject[]; objectHistoryPast: EditorObject[][]; objectHistoryFuture: EditorObject[][]; @@ -167,6 +168,22 @@ type EditorStoreType = { ) => void; }; +const DEFAULT_DOCUMENT_SETTINGS: DocumentSettings = { + displayStyle: "double", + autoPlay: false, + pageFlipSound: true, + leftToRightFlip: false, + smartGuide: true, + backgroundType: "color", + backgroundColor: "#ffffff", + backgroundGradient: { + from: "#ffffff", + to: "#e2e8f0", + angle: 135, + }, + backgroundImageUrl: "", +}; + export const useEditorStore = create((set, get) => { const initialPage = createInitialPage("جلد"); const cloneObjectsForPaste = ( @@ -209,21 +226,7 @@ export const useEditorStore = create((set, get) => { }; return { - documentSettings: { - displayStyle: "double", - autoPlay: false, - pageFlipSound: true, - leftToRightFlip: false, - smartGuide: true, - backgroundType: "color", - backgroundColor: "#ffffff", - backgroundGradient: { - from: "#ffffff", - to: "#e2e8f0", - angle: 135, - }, - backgroundImageUrl: "", - }, + documentSettings: { ...DEFAULT_DOCUMENT_SETTINGS }, updateDocumentSettings: (updates) => set((state) => ({ documentSettings: { ...state.documentSettings, ...updates }, @@ -984,6 +987,20 @@ export const useEditorStore = create((set, get) => { const state = get(); return state.objects.filter((obj) => obj.groupId === groupId); }, + resetEditor: () => { + const page = createInitialPage("جلد"); + set({ + pages: [page], + currentPageId: page.id, + objects: page.objects, + guides: [], + selectedObjectId: null, + selectedObjectIds: [], + objectHistoryPast: [], + objectHistoryFuture: [], + documentSettings: { ...DEFAULT_DOCUMENT_SETTINGS }, + }); + }, loadPages: (pages, documentSettings) => { if (pages.length === 0) return; const fallbackSettings = documentSettings ?? {}; diff --git a/src/pages/home/hooks/useHomeData.ts b/src/pages/home/hooks/useHomeData.ts index 08394b9..c9183fd 100644 --- a/src/pages/home/hooks/useHomeData.ts +++ b/src/pages/home/hooks/useHomeData.ts @@ -26,6 +26,9 @@ export const useGetCatalogById = (id: string) => { queryKey: ["catalog", id], queryFn: () => api.getCatalogById(id), enabled: !!id, + // جلوگیری از بازنویسی state محلی با refetch هنگام فوکوس پنجره (مثلاً دو کاربر همزمان) + refetchOnWindowFocus: false, + staleTime: 5 * 60 * 1000, }); }; @@ -38,6 +41,15 @@ export const useUpdateCatalog = () => { const pendingParamsRef = useRef[0] | null>(null); const [isScheduledSaving, setIsScheduledSaving] = useState(false); + const cancelPendingUpdate = useCallback(() => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + timeoutRef.current = null; + } + pendingParamsRef.current = null; + setIsScheduledSaving(false); + }, []); + const scheduleUpdate = useCallback( (params: Parameters[0], delayMs = 3000) => { if (timeoutRef.current) { @@ -79,6 +91,7 @@ export const useUpdateCatalog = () => { return { ...mutation, scheduleUpdate, + cancelPendingUpdate, isSaving: isScheduledSaving || mutation.isPending, }; };