add setting

src/pages/editor/store/editorStore.ts

@@ -18,6 +18,7 @@ import type {
   TableCell,
   TableData,
   ToolType,
+  DocumentSettings,
 } from "./editorStore.types";
 
 const MAX_OBJECT_HISTORY = 50;
@@ -38,6 +39,9 @@ export type {
   TableCell,
   TableData,
   ToolType,
+  DocumentSettings,
+  DisplayStyle,
+  BackgroundType,
 } from "./editorStore.types";
 
 type EditorStoreType = {
@@ -117,7 +121,7 @@ type EditorStoreType = {
   toggleObjectVisibility: (id: string) => void;
   groupObjects: (objectIds: string[]) => void;
   ungroupObjects: (groupId: string) => void;
-  loadPages: (pages: Page[]) => void;
+  loadPages: (pages: Page[], documentSettings?: Partial<DocumentSettings>) => void;
   clipboardObjects: EditorObject[];
   objectHistoryPast: EditorObject[][];
   objectHistoryFuture: EditorObject[][];
@@ -128,6 +132,8 @@ type EditorStoreType = {
   redoObjects: () => void;
   bringObjectForward: (id: string) => void;
   sendObjectBackward: (id: string) => void;
+  documentSettings: DocumentSettings;
+  updateDocumentSettings: (updates: Partial<DocumentSettings>) => void;
 };
 
 export const useEditorStore = create<EditorStoreType>((set, get) => {
@@ -172,6 +178,19 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
   };
 
   return {
+    documentSettings: {
+      displayStyle: 'double',
+      autoPlay: false,
+      pageFlipSound: true,
+      leftToRightFlip: false,
+      backgroundType: 'color',
+      backgroundColor: '#ffffff',
+      backgroundImageUrl: '',
+    },
+    updateDocumentSettings: (updates) =>
+      set((state) => ({
+        documentSettings: { ...state.documentSettings, ...updates },
+      })),
     tool: "select",
     setTool: (tool) =>
       set((state) => ({
@@ -957,7 +976,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
       const state = get();
       return state.objects.filter((obj) => obj.groupId === groupId);
     },
-    loadPages: (pages) => {
+    loadPages: (pages, documentSettings) => {
       if (pages.length === 0) return;
       const normalizedPages = pages.map((page) => ({
         ...page,
@@ -966,6 +985,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
         objects: ensureMissingGroupObjects(page.objects || []),
       }));
       const firstPage = normalizedPages[0];
+      const currentSettings = get().documentSettings;
       set({
         pages: normalizedPages,
         currentPageId: firstPage.id,
@@ -975,6 +995,9 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
         selectedObjectIds: [],
         objectHistoryPast: [],
         objectHistoryFuture: [],
+        ...(documentSettings && {
+          documentSettings: { ...currentSettings, ...documentSettings },
+        }),
       });
     },
   };

src/pages/editor/store/editorStore.types.ts

@@ -81,3 +81,16 @@ export type Page = {
   objects: EditorObject[];
   guides: PageGuide[];
 };
+
+export type DisplayStyle = 'single' | 'double';
+export type BackgroundType = 'color' | 'image';
+
+export type DocumentSettings = {
+  displayStyle: DisplayStyle;
+  autoPlay: boolean;
+  pageFlipSound: boolean;
+  leftToRightFlip: boolean;
+  backgroundType: BackgroundType;
+  backgroundColor: string;
+  backgroundImageUrl: string;
+};