labellife-design-tool 1.2.1 → 1.2.2

package/dist/lib/lib/index.js

@@ -3331,27 +3331,53 @@ var CanvasEditor = ({
     width: 800,
     height: 600
   });
-  const [design, setDesign] = useState3({
-    id: Date.now().toString(),
-    name: "Untitled Design",
-    width: 800,
-    height: 600,
-    pages: [
-      {
-        id: "1",
-        name: "Page 1",
-        elements: [],
-        background: "#ffffff"
-      }
-    ],
-    fonts: FONT_FAMILIES,
-    colors: DEFAULT_COLORS
+  const [design, setDesign] = useState3(() => {
+    if (externalStore) {
+      return externalStore.design;
+    }
+    return {
+      id: Date.now().toString(),
+      name: "Untitled Design",
+      width: 800,
+      height: 600,
+      pages: [
+        {
+          id: "1",
+          name: "Page 1",
+          elements: [],
+          background: "#ffffff"
+        }
+      ],
+      fonts: FONT_FAMILIES,
+      colors: DEFAULT_COLORS
+    };
   });
-  const [currentPageId, setCurrentPageId] = useState3("1");
+  const [currentPageId, setCurrentPageId] = useState3(() => externalStore?.activePageId || "1");
   const [selectedId, setSelectedId] = useState3(null);
   const [selectedIds, setSelectedIds] = useState3([]);
   const [tool, setTool] = useState3("select");
   const [activePanelId, setActivePanelId] = useState3("elements");
+  useEffect4(() => {
+    if (externalStore) {
+      const handleDesignChange = (newDesign) => {
+        setDesign(newDesign);
+      };
+      const handleActivePageChange = (pageId) => {
+        setCurrentPageId(pageId);
+      };
+      const handleActivePanelChange = (panelId) => {
+        setActivePanelId(panelId || "elements");
+      };
+      externalStore.on("designChanged", handleDesignChange);
+      externalStore.on("activePageChanged", handleActivePageChange);
+      externalStore.on("activePanelChanged", handleActivePanelChange);
+      return () => {
+        externalStore.off("designChanged");
+        externalStore.off("activePageChanged");
+        externalStore.off("activePanelChanged");
+      };
+    }
+  }, [externalStore]);
   const [showUnsplash, setShowUnsplash] = useState3(false);
   const [unsplashQuery, setUnsplashQuery] = useState3("");
   const [unsplashResults, setUnsplashResults] = useState3([]);
@@ -3407,17 +3433,18 @@ var CanvasEditor = ({
       textCase: "none",
       strikethrough: false
     };
-    setDesign((prev) => {
-      const newDesign = {
-        ...prev,
-        pages: prev.pages.map((page) => page.id === currentPageId ? { ...page, elements: [...page.elements, newElement] } : page)
-      };
-      saveToHistory(newDesign);
-      return newDesign;
-    });
+    const newDesign = {
+      ...design,
+      pages: design.pages.map((page) => page.id === currentPageId ? { ...page, elements: [...page.elements, newElement] } : page)
+    };
+    setDesign(newDesign);
+    saveToHistory(newDesign);
+    if (externalStore) {
+      externalStore.setDesign(newDesign);
+    }
     setSelectedId(newElement.id);
     setTool("select");
-  }, [currentPageId, saveToHistory, design.width, design.height]);
+  }, [currentPageId, saveToHistory, design.width, design.height, externalStore]);
   const addShape = useCallback4((shapeType) => {
     const newElement = {
       id: Date.now().toString(),

package/dist/lib/wordpress.js

@@ -3331,27 +3331,53 @@ var CanvasEditor = ({
     width: 800,
     height: 600
   });
-  const [design, setDesign] = useState3({
-    id: Date.now().toString(),
-    name: "Untitled Design",
-    width: 800,
-    height: 600,
-    pages: [
-      {
-        id: "1",
-        name: "Page 1",
-        elements: [],
-        background: "#ffffff"
-      }
-    ],
-    fonts: FONT_FAMILIES,
-    colors: DEFAULT_COLORS
+  const [design, setDesign] = useState3(() => {
+    if (externalStore) {
+      return externalStore.design;
+    }
+    return {
+      id: Date.now().toString(),
+      name: "Untitled Design",
+      width: 800,
+      height: 600,
+      pages: [
+        {
+          id: "1",
+          name: "Page 1",
+          elements: [],
+          background: "#ffffff"
+        }
+      ],
+      fonts: FONT_FAMILIES,
+      colors: DEFAULT_COLORS
+    };
   });
-  const [currentPageId, setCurrentPageId] = useState3("1");
+  const [currentPageId, setCurrentPageId] = useState3(() => externalStore?.activePageId || "1");
   const [selectedId, setSelectedId] = useState3(null);
   const [selectedIds, setSelectedIds] = useState3([]);
   const [tool, setTool] = useState3("select");
   const [activePanelId, setActivePanelId] = useState3("elements");
+  useEffect4(() => {
+    if (externalStore) {
+      const handleDesignChange = (newDesign) => {
+        setDesign(newDesign);
+      };
+      const handleActivePageChange = (pageId) => {
+        setCurrentPageId(pageId);
+      };
+      const handleActivePanelChange = (panelId) => {
+        setActivePanelId(panelId || "elements");
+      };
+      externalStore.on("designChanged", handleDesignChange);
+      externalStore.on("activePageChanged", handleActivePageChange);
+      externalStore.on("activePanelChanged", handleActivePanelChange);
+      return () => {
+        externalStore.off("designChanged");
+        externalStore.off("activePageChanged");
+        externalStore.off("activePanelChanged");
+      };
+    }
+  }, [externalStore]);
   const [showUnsplash, setShowUnsplash] = useState3(false);
   const [unsplashQuery, setUnsplashQuery] = useState3("");
   const [unsplashResults, setUnsplashResults] = useState3([]);
@@ -3407,17 +3433,18 @@ var CanvasEditor = ({
       textCase: "none",
       strikethrough: false
     };
-    setDesign((prev) => {
-      const newDesign = {
-        ...prev,
-        pages: prev.pages.map((page) => page.id === currentPageId ? { ...page, elements: [...page.elements, newElement] } : page)
-      };
-      saveToHistory(newDesign);
-      return newDesign;
-    });
+    const newDesign = {
+      ...design,
+      pages: design.pages.map((page) => page.id === currentPageId ? { ...page, elements: [...page.elements, newElement] } : page)
+    };
+    setDesign(newDesign);
+    saveToHistory(newDesign);
+    if (externalStore) {
+      externalStore.setDesign(newDesign);
+    }
     setSelectedId(newElement.id);
     setTool("select");
-  }, [currentPageId, saveToHistory, design.width, design.height]);
+  }, [currentPageId, saveToHistory, design.width, design.height, externalStore]);
   const addShape = useCallback4((shapeType) => {
     const newElement = {
       id: Date.now().toString(),

package/dist/types/CanvasEditor.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
-import { Config, CanvasStore } from "./types/Config";
+import { Config } from "./types/Config";
+import { SimpleCanvasStore } from "./store/simpleStore";
 declare const CanvasEditor: React.FC<{
     name: string;
     config?: Config;
-    store?: CanvasStore;
+    store?: SimpleCanvasStore;
 }>;
 export default CanvasEditor;
 //# sourceMappingURL=CanvasEditor.d.ts.map

package/dist/types/CanvasEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAkFlH,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGrD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,WAAW,CAAA;CAAE,CA6+BlF,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAkFlH,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAqB,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE3E,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAqhCxF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "labellife-design-tool",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Professional canvas editor built with React, TypeScript, and Konva",
   "main": "./dist/lib/lib/index.js",
   "module": "./dist/lib/lib/index.js",