background page

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>
     );
   });

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>

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;
 };
 

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,
     };
   });
 }