labellife-design-tool 1.3.2 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/lib/lib/index.js +42 -36
  2. package/dist/lib/wordpress.js +42 -36
  3. package/dist/types/CanvasEditor.d.ts.map +1 -1
  4. package/package.json +1 -1
package/dist/lib/lib/index.js CHANGED
@@ -2812,15 +2812,45 @@ var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
2812
2812
  }, [selectedElement, store]);
2813
2813
  const moveElementUp = useCallback4((id) => {}, [store]);
2814
2814
  const moveElementDown = useCallback4((id) => {}, [store]);
2815
+ const handleExportPNG = useCallback4(() => {
2816
+ exportToPNG(stageRef.current, store.design);
2817
+ }, [store.design]);
2818
+ const handleExportJPG = useCallback4(() => {
2819
+ exportToJPG(stageRef.current, store.design);
2820
+ }, [store.design]);
2821
+ const handleExportJSON = useCallback4(() => {
2822
+ exportToJSON(store.design);
2823
+ }, [store.design]);
2824
+ const handleImportJSON = useCallback4((e) => {
2825
+ const file = e.target.files?.[0];
2826
+ if (file) {
2827
+ const reader = new FileReader;
2828
+ reader.onload = (event) => {
2829
+ try {
2830
+ const jsonData = JSON.parse(event.target?.result);
2831
+ importFromJSON(jsonData, (loadedDesign) => {
2832
+ store.setDesign(loadedDesign);
2833
+ }, (errorMessage) => {
2834
+ console.error("Import error:", errorMessage);
2835
+ }, () => {
2836
+ console.log("Import requires user inputs - not implemented");
2837
+ });
2838
+ } catch (error) {
2839
+ console.error("Invalid JSON file:", error);
2840
+ }
2841
+ };
2842
+ reader.readAsText(file);
2843
+ }
2844
+ }, [store]);
2815
2845
  const panelConfigs = useMemo(() => {
2816
2846
  const builtInConfigs = {
2817
2847
  elements: { id: "elements", title: "Elements", component: ElementPanel_default, props: { onAddShape: addShape, store } },
2818
2848
  text: { id: "text", title: "Text", component: TextPanel_default, props: { selectedElement, updateElement, onAddText: addText, store } },
2819
2849
  image: { id: "image", title: "Image", component: ImagePanel_default, props: { selectedElement, updateElement, store } },
2820
- background: { id: "background", title: "Background", component: BackgroundPanel_default, props: { store } },
2821
- design: { id: "design", title: "Design", component: DesignPanel_default, props: { store } },
2822
- variables: { id: "variables", title: "Variables", component: VariablesPanel_default, props: { store } },
2823
- export: { id: "export", title: "Export", component: ExportPanel_default, props: { store } }
2850
+ background: { id: "background", title: "Background", component: BackgroundPanel_default, props: { design: store.design, currentPage: currentPage || null, setDesign: (design) => store.setDesign(design), onSetUnsplashBackground: () => {} } },
2851
+ design: { id: "design", title: "Design", component: DesignPanel_default, props: { design: store.design, currentPage: currentPage || null, selectedElement, setDesign: (design) => store.setDesign(design), updateElement, onSetUnsplashBackground: () => {}, config: config || {} } },
2852
+ variables: { id: "variables", title: "Variables", component: VariablesPanel_default, props: { config: config || {}, design: store.design, setDesign: (design) => store.setDesign(design) } },
2853
+ export: { id: "export", title: "Export", component: ExportPanel_default, props: { onExportToPNG: handleExportPNG, onExportToJPG: handleExportJPG, onExportToJSON: handleExportJSON, onImportJSON: handleImportJSON } }
2824
2854
  };
2825
2855
  const mergedConfigs = { ...builtInConfigs };
2826
2856
  if (config?.panels) {
@@ -2852,47 +2882,23 @@ var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
2852
2882
  });
2853
2883
  }
2854
2884
  return orderedConfigs.length > 0 ? orderedConfigs : Object.values(builtInConfigs);
2855
- }, [addShape, addText, config, selectedElement, updateElement, store]);
2885
+ }, [addShape, addText, config, selectedElement, updateElement, store, currentPage, handleExportPNG, handleExportJPG, handleExportJSON, handleImportJSON]);
2856
2886
  const DynamicPanelRenderer = useMemo(() => {
2857
2887
  const activePanel = panelConfigs.find((panel) => panel.id === store.activePanelId);
2858
2888
  if (!activePanel)
2859
- return null;
2889
+ return /* @__PURE__ */ React17.createElement("div", {
2890
+ className: "text-gray-400 text-center p-4"
2891
+ }, "No panel selected");
2860
2892
  const PanelComponent = activePanel.component;
2893
+ if (!PanelComponent)
2894
+ return /* @__PURE__ */ React17.createElement("div", {
2895
+ className: "text-red-400 text-center p-4"
2896
+ }, "Panel component not found");
2861
2897
  return /* @__PURE__ */ React17.createElement(PanelComponent, {
2862
2898
  key: activePanel.id,
2863
2899
  ...activePanel.props
2864
2900
  });
2865
2901
  }, [panelConfigs, store.activePanelId]);
2866
- const handleExportPNG = useCallback4(() => {
2867
- exportToPNG(stageRef.current, store.design);
2868
- }, [store.design]);
2869
- const handleExportJPG = useCallback4(() => {
2870
- exportToJPG(stageRef.current, store.design);
2871
- }, [store.design]);
2872
- const handleExportJSON = useCallback4(() => {
2873
- exportToJSON(store.design);
2874
- }, [store.design]);
2875
- const handleImportJSON = useCallback4((e) => {
2876
- const file = e.target.files?.[0];
2877
- if (file) {
2878
- const reader = new FileReader;
2879
- reader.onload = (event) => {
2880
- try {
2881
- const jsonData = JSON.parse(event.target?.result);
2882
- importFromJSON(jsonData, (loadedDesign) => {
2883
- store.setDesign(loadedDesign);
2884
- }, (errorMessage) => {
2885
- console.error("Import error:", errorMessage);
2886
- }, () => {
2887
- console.log("Import requires user inputs - not implemented");
2888
- });
2889
- } catch (error) {
2890
- console.error("Invalid JSON file:", error);
2891
- }
2892
- };
2893
- reader.readAsText(file);
2894
- }
2895
- }, [store]);
2896
2902
  const handleImageUpload = useCallback4((e) => {
2897
2903
  const file = e.target.files?.[0];
2898
2904
  if (file) {
package/dist/lib/wordpress.js CHANGED
@@ -2812,15 +2812,45 @@ var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
2812
2812
  }, [selectedElement, store]);
2813
2813
  const moveElementUp = useCallback4((id) => {}, [store]);
2814
2814
  const moveElementDown = useCallback4((id) => {}, [store]);
2815
+ const handleExportPNG = useCallback4(() => {
2816
+ exportToPNG(stageRef.current, store.design);
2817
+ }, [store.design]);
2818
+ const handleExportJPG = useCallback4(() => {
2819
+ exportToJPG(stageRef.current, store.design);
2820
+ }, [store.design]);
2821
+ const handleExportJSON = useCallback4(() => {
2822
+ exportToJSON(store.design);
2823
+ }, [store.design]);
2824
+ const handleImportJSON = useCallback4((e) => {
2825
+ const file = e.target.files?.[0];
2826
+ if (file) {
2827
+ const reader = new FileReader;
2828
+ reader.onload = (event) => {
2829
+ try {
2830
+ const jsonData = JSON.parse(event.target?.result);
2831
+ importFromJSON(jsonData, (loadedDesign) => {
2832
+ store.setDesign(loadedDesign);
2833
+ }, (errorMessage) => {
2834
+ console.error("Import error:", errorMessage);
2835
+ }, () => {
2836
+ console.log("Import requires user inputs - not implemented");
2837
+ });
2838
+ } catch (error) {
2839
+ console.error("Invalid JSON file:", error);
2840
+ }
2841
+ };
2842
+ reader.readAsText(file);
2843
+ }
2844
+ }, [store]);
2815
2845
  const panelConfigs = useMemo(() => {
2816
2846
  const builtInConfigs = {
2817
2847
  elements: { id: "elements", title: "Elements", component: ElementPanel_default, props: { onAddShape: addShape, store } },
2818
2848
  text: { id: "text", title: "Text", component: TextPanel_default, props: { selectedElement, updateElement, onAddText: addText, store } },
2819
2849
  image: { id: "image", title: "Image", component: ImagePanel_default, props: { selectedElement, updateElement, store } },
2820
- background: { id: "background", title: "Background", component: BackgroundPanel_default, props: { store } },
2821
- design: { id: "design", title: "Design", component: DesignPanel_default, props: { store } },
2822
- variables: { id: "variables", title: "Variables", component: VariablesPanel_default, props: { store } },
2823
- export: { id: "export", title: "Export", component: ExportPanel_default, props: { store } }
2850
+ background: { id: "background", title: "Background", component: BackgroundPanel_default, props: { design: store.design, currentPage: currentPage || null, setDesign: (design) => store.setDesign(design), onSetUnsplashBackground: () => {} } },
2851
+ design: { id: "design", title: "Design", component: DesignPanel_default, props: { design: store.design, currentPage: currentPage || null, selectedElement, setDesign: (design) => store.setDesign(design), updateElement, onSetUnsplashBackground: () => {}, config: config || {} } },
2852
+ variables: { id: "variables", title: "Variables", component: VariablesPanel_default, props: { config: config || {}, design: store.design, setDesign: (design) => store.setDesign(design) } },
2853
+ export: { id: "export", title: "Export", component: ExportPanel_default, props: { onExportToPNG: handleExportPNG, onExportToJPG: handleExportJPG, onExportToJSON: handleExportJSON, onImportJSON: handleImportJSON } }
2824
2854
  };
2825
2855
  const mergedConfigs = { ...builtInConfigs };
2826
2856
  if (config?.panels) {
@@ -2852,47 +2882,23 @@ var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
2852
2882
  });
2853
2883
  }
2854
2884
  return orderedConfigs.length > 0 ? orderedConfigs : Object.values(builtInConfigs);
2855
- }, [addShape, addText, config, selectedElement, updateElement, store]);
2885
+ }, [addShape, addText, config, selectedElement, updateElement, store, currentPage, handleExportPNG, handleExportJPG, handleExportJSON, handleImportJSON]);
2856
2886
  const DynamicPanelRenderer = useMemo(() => {
2857
2887
  const activePanel = panelConfigs.find((panel) => panel.id === store.activePanelId);
2858
2888
  if (!activePanel)
2859
- return null;
2889
+ return /* @__PURE__ */ React17.createElement("div", {
2890
+ className: "text-gray-400 text-center p-4"
2891
+ }, "No panel selected");
2860
2892
  const PanelComponent = activePanel.component;
2893
+ if (!PanelComponent)
2894
+ return /* @__PURE__ */ React17.createElement("div", {
2895
+ className: "text-red-400 text-center p-4"
2896
+ }, "Panel component not found");
2861
2897
  return /* @__PURE__ */ React17.createElement(PanelComponent, {
2862
2898
  key: activePanel.id,
2863
2899
  ...activePanel.props
2864
2900
  });
2865
2901
  }, [panelConfigs, store.activePanelId]);
2866
- const handleExportPNG = useCallback4(() => {
2867
- exportToPNG(stageRef.current, store.design);
2868
- }, [store.design]);
2869
- const handleExportJPG = useCallback4(() => {
2870
- exportToJPG(stageRef.current, store.design);
2871
- }, [store.design]);
2872
- const handleExportJSON = useCallback4(() => {
2873
- exportToJSON(store.design);
2874
- }, [store.design]);
2875
- const handleImportJSON = useCallback4((e) => {
2876
- const file = e.target.files?.[0];
2877
- if (file) {
2878
- const reader = new FileReader;
2879
- reader.onload = (event) => {
2880
- try {
2881
- const jsonData = JSON.parse(event.target?.result);
2882
- importFromJSON(jsonData, (loadedDesign) => {
2883
- store.setDesign(loadedDesign);
2884
- }, (errorMessage) => {
2885
- console.error("Import error:", errorMessage);
2886
- }, () => {
2887
- console.log("Import requires user inputs - not implemented");
2888
- });
2889
- } catch (error) {
2890
- console.error("Invalid JSON file:", error);
2891
- }
2892
- };
2893
- reader.readAsText(file);
2894
- }
2895
- }, [store]);
2896
2902
  const handleImageUpload = useCallback4((e) => {
2897
2903
  const file = e.target.files?.[0];
2898
2904
  if (file) {
package/dist/types/CanvasEditor.d.ts.map CHANGED
@@ -1 +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;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"}
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;AAC3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,QAAA,MAAM,YAAY;UAAuC,MAAM;aAAW,MAAM;WAAS,iBAAiB;yCA+exG,CAAC;AAIH,eAAe,YAAY,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "labellife-design-tool",
3
- "version": "1.3.2",
3
+ "version": "1.3.3",
4
4
  "description": "Professional canvas editor built with React, TypeScript, and Konva",
5
5
  "main": "./dist/lib/lib/index.js",
6
6
  "module": "./dist/lib/lib/index.js",