labellife-design-tool 1.3.1 → 1.3.2

package/dist/lib/lib/index.js

@@ -547,7 +547,7 @@ function initJsxCompat() {
 }
 
 // src/CanvasEditor.tsx
-import React17, { useRef as useRef4, useEffect as useEffect4, useMemo, useCallback as useCallback4 } from "react";
+import React17, { useRef as useRef4, useEffect as useEffect4, useMemo, useCallback as useCallback4, forwardRef, useImperativeHandle } from "react";
 import { Stage, Layer, Rect as Rect2 } from "react-konva";
 
 // src/elements/EditableTextElement.tsx
@@ -2716,16 +2716,16 @@ var RightSidebar = ({
 var RightSidebar_default = RightSidebar;
 
 // src/CanvasEditor.tsx
-var CanvasEditor = ({
-  name,
-  config,
-  store
-}) => {
+var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
+  if (!store) {
+    console.error("CanvasEditor: store prop is required but was not provided");
+    return /* @__PURE__ */ React17.createElement("div", null, "Error: Store is required");
+  }
   const stageRef = useRef4(null);
   const fileInputRef = useRef4(null);
   const jsonInputRef = useRef4(null);
   const containerRef = useRef4(null);
-  const currentPage = store.design.pages.find((p) => p.id === store.activePageId) || store.design.pages[0] || null;
+  const currentPage = store.design?.pages.find((p) => p.id === store.activePageId) || store.design?.pages[0] || null;
   const selectedElement = currentPage?.elements.find((el) => el.id === store.selectedId) || null;
   useEffect4(() => {
     const handleDesignChange = (newDesign) => {};
@@ -2763,25 +2763,25 @@ var CanvasEditor = ({
     }
   }, [store]);
   const addText = useCallback4(() => {
-    if (!store.activePage)
+    if (!store?.activePage)
       return;
     store.activePage.addElement({
       type: "text",
       text: "Edit this text",
-      x: store.design.width / 2 - 50,
-      y: store.design.height / 2 - 15,
+      x: (store.design?.width || 800) / 2 - 50,
+      y: (store.design?.height || 600) / 2 - 15,
       width: 100,
       height: 30
     });
   }, [store]);
   const addShape = useCallback4((shapeType) => {
-    if (!store.activePage)
+    if (!store?.activePage)
       return;
     store.activePage.addElement({
       type: "shape",
       shapeType,
-      x: store.design.width / 2 - 50,
-      y: store.design.height / 2 - 50,
+      x: (store.design?.width || 800) / 2 - 50,
+      y: (store.design?.height || 600) / 2 - 50,
       width: 100,
       height: 100
     });
@@ -2900,12 +2900,12 @@ var CanvasEditor = ({
       reader.onload = (event) => {
         const img = new window.Image;
         img.onload = () => {
-          if (store.activePage) {
+          if (store?.activePage) {
             store.activePage.addElement({
               type: "image",
               src: event.target?.result,
-              x: store.design.width / 2 - img.width / 2,
-              y: store.design.height / 2 - img.height / 2,
+              x: (store.design?.width || 800) / 2 - img.width / 2,
+              y: (store.design?.height || 600) / 2 - img.height / 2,
               width: img.width,
               height: img.height
             });
@@ -2916,6 +2916,31 @@ var CanvasEditor = ({
       reader.readAsDataURL(file);
     }
   }, [store]);
+  useImperativeHandle(ref, () => ({
+    stage: stageRef.current,
+    exportToPNG: () => {
+      Promise.resolve().then(() => exports_exportImportUtils).then(({ exportToPNG: exportToPNG2 }) => {
+        exportToPNG2(stageRef.current, store.design);
+      });
+    },
+    exportToJPG: () => {
+      Promise.resolve().then(() => exports_exportImportUtils).then(({ exportToJPG: exportToJPG2 }) => {
+        exportToJPG2(stageRef.current, store.design);
+      });
+    },
+    exportToJSON: () => {
+      Promise.resolve().then(() => exports_exportImportUtils).then(({ exportToJSON: exportToJSON2 }) => {
+        exportToJSON2(store.design);
+      });
+    },
+    getDesign: () => store.design,
+    setCanvasSize: (width, height) => {
+      store.updateDesign({ width, height });
+    },
+    loadDesign: async (jsonData) => {
+      await store.loadJSON(jsonData);
+    }
+  }), [stageRef.current, store.design]);
   return /* @__PURE__ */ React17.createElement("div", {
     className: "w-full h-full flex flex-col bg-gray-900"
   }, /* @__PURE__ */ React17.createElement(Header_default, {
@@ -2962,15 +2987,15 @@ var CanvasEditor = ({
     }
   }, /* @__PURE__ */ React17.createElement(Stage, {
     ref: stageRef,
-    width: store.design.width,
-    height: store.design.height,
+    width: store.design?.width || 800,
+    height: store.design?.height || 600,
     onClick: handleStageClick,
     onTap: handleStageClick
   }, /* @__PURE__ */ React17.createElement(Layer, null, /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Rect2, {
     x: 0,
     y: 0,
-    width: store.design.width,
-    height: store.design.height,
+    width: store.design?.width || 800,
+    height: store.design?.height || 600,
     fill: currentPage.backgroundImageObject ? undefined : currentPage.background,
     fillPatternImage: currentPage.backgroundImageObject,
     fillPatternRepeat: "no-repeat"
@@ -3014,7 +3039,7 @@ var CanvasEditor = ({
     }
   })))))), config?.multiPage && /* @__PURE__ */ React17.createElement("div", {
     className: "absolute bottom-4 left-4 flex items-center space-x-2"
-  }, store.design.pages.map((page, index) => /* @__PURE__ */ React17.createElement("button", {
+  }, (store.design?.pages || []).map((page, index) => /* @__PURE__ */ React17.createElement("button", {
     key: page.id,
     onClick: () => store.setActivePage(page.id),
     className: `px-3 py-1 rounded text-sm ${page.id === store.activePageId ? "bg-blue-600 text-white" : "bg-gray-800 text-gray-300 hover:bg-gray-700"}`
@@ -3041,7 +3066,8 @@ var CanvasEditor = ({
     onChange: handleImportJSON,
     style: { display: "none" }
   }));
-};
+});
+CanvasEditor.displayName = "CanvasEditor";
 var CanvasEditor_default = CanvasEditor;
 // src/store/simpleStore.ts
 class SimpleCanvasStore {

package/dist/lib/wordpress.js

@@ -547,7 +547,7 @@ function initJsxCompat() {
 }
 
 // src/CanvasEditor.tsx
-import React17, { useRef as useRef4, useEffect as useEffect4, useMemo, useCallback as useCallback4 } from "react";
+import React17, { useRef as useRef4, useEffect as useEffect4, useMemo, useCallback as useCallback4, forwardRef, useImperativeHandle } from "react";
 import { Stage, Layer, Rect as Rect2 } from "react-konva";
 
 // src/elements/EditableTextElement.tsx
@@ -2716,16 +2716,16 @@ var RightSidebar = ({
 var RightSidebar_default = RightSidebar;
 
 // src/CanvasEditor.tsx
-var CanvasEditor = ({
-  name,
-  config,
-  store
-}) => {
+var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
+  if (!store) {
+    console.error("CanvasEditor: store prop is required but was not provided");
+    return /* @__PURE__ */ React17.createElement("div", null, "Error: Store is required");
+  }
   const stageRef = useRef4(null);
   const fileInputRef = useRef4(null);
   const jsonInputRef = useRef4(null);
   const containerRef = useRef4(null);
-  const currentPage = store.design.pages.find((p) => p.id === store.activePageId) || store.design.pages[0] || null;
+  const currentPage = store.design?.pages.find((p) => p.id === store.activePageId) || store.design?.pages[0] || null;
   const selectedElement = currentPage?.elements.find((el) => el.id === store.selectedId) || null;
   useEffect4(() => {
     const handleDesignChange = (newDesign) => {};
@@ -2763,25 +2763,25 @@ var CanvasEditor = ({
     }
   }, [store]);
   const addText = useCallback4(() => {
-    if (!store.activePage)
+    if (!store?.activePage)
       return;
     store.activePage.addElement({
       type: "text",
       text: "Edit this text",
-      x: store.design.width / 2 - 50,
-      y: store.design.height / 2 - 15,
+      x: (store.design?.width || 800) / 2 - 50,
+      y: (store.design?.height || 600) / 2 - 15,
       width: 100,
       height: 30
     });
   }, [store]);
   const addShape = useCallback4((shapeType) => {
-    if (!store.activePage)
+    if (!store?.activePage)
       return;
     store.activePage.addElement({
       type: "shape",
       shapeType,
-      x: store.design.width / 2 - 50,
-      y: store.design.height / 2 - 50,
+      x: (store.design?.width || 800) / 2 - 50,
+      y: (store.design?.height || 600) / 2 - 50,
       width: 100,
       height: 100
     });
@@ -2900,12 +2900,12 @@ var CanvasEditor = ({
       reader.onload = (event) => {
         const img = new window.Image;
         img.onload = () => {
-          if (store.activePage) {
+          if (store?.activePage) {
             store.activePage.addElement({
               type: "image",
               src: event.target?.result,
-              x: store.design.width / 2 - img.width / 2,
-              y: store.design.height / 2 - img.height / 2,
+              x: (store.design?.width || 800) / 2 - img.width / 2,
+              y: (store.design?.height || 600) / 2 - img.height / 2,
               width: img.width,
               height: img.height
             });
@@ -2916,6 +2916,31 @@ var CanvasEditor = ({
       reader.readAsDataURL(file);
     }
   }, [store]);
+  useImperativeHandle(ref, () => ({
+    stage: stageRef.current,
+    exportToPNG: () => {
+      Promise.resolve().then(() => exports_exportImportUtils).then(({ exportToPNG: exportToPNG2 }) => {
+        exportToPNG2(stageRef.current, store.design);
+      });
+    },
+    exportToJPG: () => {
+      Promise.resolve().then(() => exports_exportImportUtils).then(({ exportToJPG: exportToJPG2 }) => {
+        exportToJPG2(stageRef.current, store.design);
+      });
+    },
+    exportToJSON: () => {
+      Promise.resolve().then(() => exports_exportImportUtils).then(({ exportToJSON: exportToJSON2 }) => {
+        exportToJSON2(store.design);
+      });
+    },
+    getDesign: () => store.design,
+    setCanvasSize: (width, height) => {
+      store.updateDesign({ width, height });
+    },
+    loadDesign: async (jsonData) => {
+      await store.loadJSON(jsonData);
+    }
+  }), [stageRef.current, store.design]);
   return /* @__PURE__ */ React17.createElement("div", {
     className: "w-full h-full flex flex-col bg-gray-900"
   }, /* @__PURE__ */ React17.createElement(Header_default, {
@@ -2962,15 +2987,15 @@ var CanvasEditor = ({
     }
   }, /* @__PURE__ */ React17.createElement(Stage, {
     ref: stageRef,
-    width: store.design.width,
-    height: store.design.height,
+    width: store.design?.width || 800,
+    height: store.design?.height || 600,
     onClick: handleStageClick,
     onTap: handleStageClick
   }, /* @__PURE__ */ React17.createElement(Layer, null, /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Rect2, {
     x: 0,
     y: 0,
-    width: store.design.width,
-    height: store.design.height,
+    width: store.design?.width || 800,
+    height: store.design?.height || 600,
     fill: currentPage.backgroundImageObject ? undefined : currentPage.background,
     fillPatternImage: currentPage.backgroundImageObject,
     fillPatternRepeat: "no-repeat"
@@ -3014,7 +3039,7 @@ var CanvasEditor = ({
     }
   })))))), config?.multiPage && /* @__PURE__ */ React17.createElement("div", {
     className: "absolute bottom-4 left-4 flex items-center space-x-2"
-  }, store.design.pages.map((page, index) => /* @__PURE__ */ React17.createElement("button", {
+  }, (store.design?.pages || []).map((page, index) => /* @__PURE__ */ React17.createElement("button", {
     key: page.id,
     onClick: () => store.setActivePage(page.id),
     className: `px-3 py-1 rounded text-sm ${page.id === store.activePageId ? "bg-blue-600 text-white" : "bg-gray-800 text-gray-300 hover:bg-gray-700"}`
@@ -3041,7 +3066,8 @@ var CanvasEditor = ({
     onChange: handleImportJSON,
     style: { display: "none" }
   }));
-};
+});
+CanvasEditor.displayName = "CanvasEditor";
 var CanvasEditor_default = CanvasEditor;
 // src/store/simpleStore.ts
 class SimpleCanvasStore {

package/dist/types/CanvasEditor.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
 import { Config } from "./types/Config";
 import { SimpleCanvasStore } from "./store/simpleStore";
-declare const CanvasEditor: React.FC<{
+import type { CanvasEditorRef } from "./lib/index";
+declare const CanvasEditor: React.ForwardRefExoticComponent<{
     name: string;
     config?: Config;
     store: SimpleCanvasStore;
-}>;
+} & React.RefAttributes<CanvasEditorRef>>;
 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,KAAmF,MAAM,OAAO,CAAC;AA4ExG,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,EAAE,iBAAiB,CAAA;CAAE,CA0cvF,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmF,MAAM,OAAO,CAAC;AA4ExG,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAqB,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,QAAA,MAAM,YAAY;UAAuC,MAAM;aAAW,MAAM;WAAS,iBAAiB;yCA6exG,CAAC;AAIH,eAAe,YAAY,CAAC"}

package/package.json

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