From f42fc170257724f4fb13e2d59bd44ca3cd6d5d54 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Wed, 6 May 2026 15:25:26 +0330
Subject: [PATCH] background page

---
 src/index.css                              | 19 ++-----------------
 src/pages/home/hooks/useHomeData.ts        | 17 +++++++++++++++--
 src/pages/viewer/components/BookPage.tsx   | 15 +++++++++++++--
 src/pages/viewer/components/BookViewer.tsx |  6 +++---
 src/pages/viewer/types/index.ts            |  3 +++
 src/pages/viewer/utils/dataTransformer.ts  |  6 ++++++
 6 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/src/index.css b/src/index.css
index 9cca77e..6b233b2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -90,23 +90,7 @@ html {
   filter: brightness(0) invert(0);
 }
 
-/* استایل برای صفحات کتاب - بکگراند سفید */
-.stf__item.page,
-.stf__item[class*="page"],
-.page.stf__item,
-div.stf__item.page,
-.stf__block .stf__item,
-.stf__parent .stf__item,
-.stf__wrapper .stf__item {
-  background-color: #ffffff !important;
-  background: #ffffff !important;
-}
-
-/* برای اطمینان بیشتر - تمام صفحات با کلاس page */
-.page {
-  background-color: #ffffff !important;
-  background: #ffffff !important;
-}
+/* رنگ پس‌زمینه باید از خود BookPage بیاید (per-page). */
 
 /* استایل برای ظاهر کتاب */
 .flipbook-container {
@@ -139,6 +123,7 @@ div.stf__item.page,
   border-radius: 0;
 }
 
+
 /* جلوگیری از نمایش محتوای صفحات غیرفعال هنگام هاور */
 .flipbook-container .stf__item {
   overflow: hidden !important;
diff --git a/src/pages/home/hooks/useHomeData.ts b/src/pages/home/hooks/useHomeData.ts
index ff99844..08394b9 100644
--- a/src/pages/home/hooks/useHomeData.ts
+++ b/src/pages/home/hooks/useHomeData.ts
@@ -35,6 +35,7 @@ export const useUpdateCatalog = () => {
   });
 
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pendingParamsRef = useRef<Parameters<typeof api.updateCatalog>[0] | null>(null);
   const [isScheduledSaving, setIsScheduledSaving] = useState(false);
 
   const scheduleUpdate = useCallback(
@@ -42,12 +43,17 @@ export const useUpdateCatalog = () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
+      pendingParamsRef.current = params;
       setIsScheduledSaving(true);
 
       timeoutRef.current = setTimeout(() => {
+        const pendingParams = pendingParamsRef.current;
         timeoutRef.current = null;
+        pendingParamsRef.current = null;
         setIsScheduledSaving(false);
-        mutation.mutate(params);
+        if (pendingParams) {
+          mutation.mutate(pendingParams);
+        }
       }, delayMs);
     },
     [mutation],
@@ -57,10 +63,17 @@ export const useUpdateCatalog = () => {
     () => () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      // اگر کاربر قبل از پایان debounce از ادیتور خارج شد،
+      // آخرین تغییرات معلق را همان لحظه ذخیره کن.
+      if (pendingParamsRef.current) {
+        mutation.mutate(pendingParamsRef.current);
+        pendingParamsRef.current = null;
       }
       setIsScheduledSaving(false);
     },
-    [],
+    [mutation],
   );
 
   return {
diff --git a/src/pages/viewer/components/BookPage.tsx b/src/pages/viewer/components/BookPage.tsx
index 55b12df..b6cdf95 100644
--- a/src/pages/viewer/components/BookPage.tsx
+++ b/src/pages/viewer/components/BookPage.tsx
@@ -505,7 +505,6 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
         data-density="soft"
         style={{
           position: 'relative',
-          ...bgStyle,
           overflow: 'hidden',
           boxSizing: 'border-box',
           width: `${width}px`,
@@ -514,7 +513,19 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
           zIndex: 1,
         }}
       >
-        {page.elements.map((element, index) => renderObject(element, index))}
+        <div
+          aria-hidden
+          style={{
+            position: 'absolute',
+            inset: 0,
+            ...bgStyle,
+            pointerEvents: 'none',
+            zIndex: 0,
+          }}
+        />
+        <div style={{ position: 'absolute', inset: 0, zIndex: 1 }}>
+          {page.elements.map((element, index) => renderObject(element, index))}
+        </div>
       </div>
     );
   });
diff --git a/src/pages/viewer/components/BookViewer.tsx b/src/pages/viewer/components/BookViewer.tsx
index 70e764f..0ec7e38 100644
--- a/src/pages/viewer/components/BookViewer.tsx
+++ b/src/pages/viewer/components/BookViewer.tsx
@@ -456,9 +456,9 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
                                 pageWidth={pagePixelWidth}
                                 pageHeight={pagePixelHeight}
                                 onLinkClick={handleLinkClick}
-                                backgroundType={backgroundType}
-                                backgroundColor={backgroundColor}
-                                backgroundImageUrl={backgroundImageUrl}
+                                backgroundType={page.backgroundType ?? backgroundType}
+                                backgroundColor={page.backgroundColor ?? backgroundColor}
+                                backgroundImageUrl={page.backgroundImageUrl ?? backgroundImageUrl}
                             />
                         ))}
                     </HTMLFlipBook>
diff --git a/src/pages/viewer/types/index.ts b/src/pages/viewer/types/index.ts
index 99b6a69..0c0b8c2 100644
--- a/src/pages/viewer/types/index.ts
+++ b/src/pages/viewer/types/index.ts
@@ -5,5 +5,8 @@ export type PageData = {
   width: number;
   height: number;
   elements: EditorObject[];
+  backgroundType?: "color" | "image";
+  backgroundColor?: string;
+  backgroundImageUrl?: string;
 };
 
diff --git a/src/pages/viewer/utils/dataTransformer.ts b/src/pages/viewer/utils/dataTransformer.ts
index b483d83..0be4f4d 100644
--- a/src/pages/viewer/utils/dataTransformer.ts
+++ b/src/pages/viewer/utils/dataTransformer.ts
@@ -4,6 +4,9 @@ import type { PageData } from "../types";
 type ViewerDataPage = {
   id: string;
   name: string;
+  backgroundType?: "color" | "image";
+  backgroundColor?: string;
+  backgroundImageUrl?: string;
   objects: Array<{
     id: string;
     type: string;
@@ -126,6 +129,9 @@ export function transformViewerDataToPages(data: ViewerData): PageData[] {
       width: 794,
       height: 1123,
       elements: objects,
+      backgroundType: page.backgroundType,
+      backgroundColor: page.backgroundColor,
+      backgroundImageUrl: page.backgroundImageUrl,
     };
   });
 }