labellife-design-tool 1.3.2 → 1.3.4

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 +75 -38
  2. package/dist/lib/wordpress.js +75 -38
  3. package/dist/types/CanvasEditor.d.ts.map +1 -1
  4. package/package.json +1 -1
package/dist/lib/lib/index.js CHANGED
@@ -2721,6 +2721,12 @@ var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
2721
2721
  console.error("CanvasEditor: store prop is required but was not provided");
2722
2722
  return /* @__PURE__ */ React17.createElement("div", null, "Error: Store is required");
2723
2723
  }
2724
+ console.log("CanvasEditor store state:", {
2725
+ activePanelId: store.activePanelId,
2726
+ hasDesign: !!store.design,
2727
+ designPages: store.design?.pages?.length || 0,
2728
+ activePageId: store.activePageId
2729
+ });
2724
2730
  const stageRef = useRef4(null);
2725
2731
  const fileInputRef = useRef4(null);
2726
2732
  const jsonInputRef = useRef4(null);
@@ -2812,20 +2818,60 @@ var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
2812
2818
  }, [selectedElement, store]);
2813
2819
  const moveElementUp = useCallback4((id) => {}, [store]);
2814
2820
  const moveElementDown = useCallback4((id) => {}, [store]);
2821
+ const handleExportPNG = useCallback4(() => {
2822
+ exportToPNG(stageRef.current, store.design);
2823
+ }, [store.design]);
2824
+ const handleExportJPG = useCallback4(() => {
2825
+ exportToJPG(stageRef.current, store.design);
2826
+ }, [store.design]);
2827
+ const handleExportJSON = useCallback4(() => {
2828
+ exportToJSON(store.design);
2829
+ }, [store.design]);
2830
+ const handleImportJSON = useCallback4((e) => {
2831
+ const file = e.target.files?.[0];
2832
+ if (file) {
2833
+ const reader = new FileReader;
2834
+ reader.onload = (event) => {
2835
+ try {
2836
+ const jsonData = JSON.parse(event.target?.result);
2837
+ importFromJSON(jsonData, (loadedDesign) => {
2838
+ store.setDesign(loadedDesign);
2839
+ }, (errorMessage) => {
2840
+ console.error("Import error:", errorMessage);
2841
+ }, () => {
2842
+ console.log("Import requires user inputs - not implemented");
2843
+ });
2844
+ } catch (error) {
2845
+ console.error("Invalid JSON file:", error);
2846
+ }
2847
+ };
2848
+ reader.readAsText(file);
2849
+ }
2850
+ }, [store]);
2815
2851
  const panelConfigs = useMemo(() => {
2816
2852
  const builtInConfigs = {
2817
2853
  elements: { id: "elements", title: "Elements", component: ElementPanel_default, props: { onAddShape: addShape, store } },
2818
2854
  text: { id: "text", title: "Text", component: TextPanel_default, props: { selectedElement, updateElement, onAddText: addText, store } },
2819
2855
  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 } }
2856
+ background: { id: "background", title: "Background", component: BackgroundPanel_default, props: { design: store.design, currentPage: currentPage || null, setDesign: (design) => store.setDesign(design), onSetUnsplashBackground: () => {} } },
2857
+ 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 || {} } },
2858
+ variables: { id: "variables", title: "Variables", component: VariablesPanel_default, props: { config: config || {}, design: store.design, setDesign: (design) => store.setDesign(design) } },
2859
+ export: { id: "export", title: "Export", component: ExportPanel_default, props: { onExportToPNG: handleExportPNG, onExportToJPG: handleExportJPG, onExportToJSON: handleExportJSON, onImportJSON: handleImportJSON } }
2824
2860
  };
2861
+ console.log("Built-in panels:", Object.entries(builtInConfigs).map(([id, config2]) => ({
2862
+ id,
2863
+ componentType: typeof config2.component,
2864
+ componentName: config2.component.name || "anonymous"
2865
+ })));
2825
2866
  const mergedConfigs = { ...builtInConfigs };
2826
2867
  if (config?.panels) {
2827
2868
  config.panels.forEach((panelConfig) => {
2828
2869
  if (typeof panelConfig === "string") {} else {
2870
+ console.log("Processing custom panel:", panelConfig.id, panelConfig);
2871
+ if (typeof panelConfig.component !== "function") {
2872
+ console.error("Invalid panel component for", panelConfig.id, panelConfig.component);
2873
+ return;
2874
+ }
2829
2875
  const customPanelConfig = {
2830
2876
  id: panelConfig.id,
2831
2877
  title: panelConfig.title,
@@ -2852,47 +2898,38 @@ var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
2852
2898
  });
2853
2899
  }
2854
2900
  return orderedConfigs.length > 0 ? orderedConfigs : Object.values(builtInConfigs);
2855
- }, [addShape, addText, config, selectedElement, updateElement, store]);
2901
+ }, [addShape, addText, config, selectedElement, updateElement, store, currentPage, handleExportPNG, handleExportJPG, handleExportJSON, handleImportJSON]);
2856
2902
  const DynamicPanelRenderer = useMemo(() => {
2857
- const activePanel = panelConfigs.find((panel) => panel.id === store.activePanelId);
2858
- if (!activePanel)
2859
- return null;
2903
+ const activePanelId = store.activePanelId;
2904
+ console.log("DynamicPanelRenderer: activePanelId =", activePanelId);
2905
+ console.log("DynamicPanelRenderer: available panels =", panelConfigs.map((p) => ({ id: p.id, component: typeof p.component })));
2906
+ const activePanel = panelConfigs.find((panel) => panel.id === activePanelId);
2907
+ if (!activePanel) {
2908
+ console.log("DynamicPanelRenderer: No active panel found, returning fallback");
2909
+ return /* @__PURE__ */ React17.createElement("div", {
2910
+ className: "text-gray-400 text-center p-4"
2911
+ }, "No panel selected");
2912
+ }
2913
+ console.log("DynamicPanelRenderer: Found active panel:", activePanel.id, typeof activePanel.component);
2860
2914
  const PanelComponent = activePanel.component;
2915
+ if (!PanelComponent) {
2916
+ console.log("DynamicPanelRenderer: PanelComponent is null/undefined");
2917
+ return /* @__PURE__ */ React17.createElement("div", {
2918
+ className: "text-red-400 text-center p-4"
2919
+ }, "Panel component not found");
2920
+ }
2921
+ if (typeof PanelComponent !== "function") {
2922
+ console.error("DynamicPanelRenderer: PanelComponent is not a function:", PanelComponent);
2923
+ return /* @__PURE__ */ React17.createElement("div", {
2924
+ className: "text-red-400 text-center p-4"
2925
+ }, "Invalid panel component");
2926
+ }
2927
+ console.log("DynamicPanelRenderer: Rendering panel:", activePanel.id);
2861
2928
  return /* @__PURE__ */ React17.createElement(PanelComponent, {
2862
2929
  key: activePanel.id,
2863
2930
  ...activePanel.props
2864
2931
  });
2865
2932
  }, [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
2933
  const handleImageUpload = useCallback4((e) => {
2897
2934
  const file = e.target.files?.[0];
2898
2935
  if (file) {
package/dist/lib/wordpress.js CHANGED
@@ -2721,6 +2721,12 @@ var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
2721
2721
  console.error("CanvasEditor: store prop is required but was not provided");
2722
2722
  return /* @__PURE__ */ React17.createElement("div", null, "Error: Store is required");
2723
2723
  }
2724
+ console.log("CanvasEditor store state:", {
2725
+ activePanelId: store.activePanelId,
2726
+ hasDesign: !!store.design,
2727
+ designPages: store.design?.pages?.length || 0,
2728
+ activePageId: store.activePageId
2729
+ });
2724
2730
  const stageRef = useRef4(null);
2725
2731
  const fileInputRef = useRef4(null);
2726
2732
  const jsonInputRef = useRef4(null);
@@ -2812,20 +2818,60 @@ var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
2812
2818
  }, [selectedElement, store]);
2813
2819
  const moveElementUp = useCallback4((id) => {}, [store]);
2814
2820
  const moveElementDown = useCallback4((id) => {}, [store]);
2821
+ const handleExportPNG = useCallback4(() => {
2822
+ exportToPNG(stageRef.current, store.design);
2823
+ }, [store.design]);
2824
+ const handleExportJPG = useCallback4(() => {
2825
+ exportToJPG(stageRef.current, store.design);
2826
+ }, [store.design]);
2827
+ const handleExportJSON = useCallback4(() => {
2828
+ exportToJSON(store.design);
2829
+ }, [store.design]);
2830
+ const handleImportJSON = useCallback4((e) => {
2831
+ const file = e.target.files?.[0];
2832
+ if (file) {
2833
+ const reader = new FileReader;
2834
+ reader.onload = (event) => {
2835
+ try {
2836
+ const jsonData = JSON.parse(event.target?.result);
2837
+ importFromJSON(jsonData, (loadedDesign) => {
2838
+ store.setDesign(loadedDesign);
2839
+ }, (errorMessage) => {
2840
+ console.error("Import error:", errorMessage);
2841
+ }, () => {
2842
+ console.log("Import requires user inputs - not implemented");
2843
+ });
2844
+ } catch (error) {
2845
+ console.error("Invalid JSON file:", error);
2846
+ }
2847
+ };
2848
+ reader.readAsText(file);
2849
+ }
2850
+ }, [store]);
2815
2851
  const panelConfigs = useMemo(() => {
2816
2852
  const builtInConfigs = {
2817
2853
  elements: { id: "elements", title: "Elements", component: ElementPanel_default, props: { onAddShape: addShape, store } },
2818
2854
  text: { id: "text", title: "Text", component: TextPanel_default, props: { selectedElement, updateElement, onAddText: addText, store } },
2819
2855
  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 } }
2856
+ background: { id: "background", title: "Background", component: BackgroundPanel_default, props: { design: store.design, currentPage: currentPage || null, setDesign: (design) => store.setDesign(design), onSetUnsplashBackground: () => {} } },
2857
+ 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 || {} } },
2858
+ variables: { id: "variables", title: "Variables", component: VariablesPanel_default, props: { config: config || {}, design: store.design, setDesign: (design) => store.setDesign(design) } },
2859
+ export: { id: "export", title: "Export", component: ExportPanel_default, props: { onExportToPNG: handleExportPNG, onExportToJPG: handleExportJPG, onExportToJSON: handleExportJSON, onImportJSON: handleImportJSON } }
2824
2860
  };
2861
+ console.log("Built-in panels:", Object.entries(builtInConfigs).map(([id, config2]) => ({
2862
+ id,
2863
+ componentType: typeof config2.component,
2864
+ componentName: config2.component.name || "anonymous"
2865
+ })));
2825
2866
  const mergedConfigs = { ...builtInConfigs };
2826
2867
  if (config?.panels) {
2827
2868
  config.panels.forEach((panelConfig) => {
2828
2869
  if (typeof panelConfig === "string") {} else {
2870
+ console.log("Processing custom panel:", panelConfig.id, panelConfig);
2871
+ if (typeof panelConfig.component !== "function") {
2872
+ console.error("Invalid panel component for", panelConfig.id, panelConfig.component);
2873
+ return;
2874
+ }
2829
2875
  const customPanelConfig = {
2830
2876
  id: panelConfig.id,
2831
2877
  title: panelConfig.title,
@@ -2852,47 +2898,38 @@ var CanvasEditor = forwardRef(({ name, config, store }, ref) => {
2852
2898
  });
2853
2899
  }
2854
2900
  return orderedConfigs.length > 0 ? orderedConfigs : Object.values(builtInConfigs);
2855
- }, [addShape, addText, config, selectedElement, updateElement, store]);
2901
+ }, [addShape, addText, config, selectedElement, updateElement, store, currentPage, handleExportPNG, handleExportJPG, handleExportJSON, handleImportJSON]);
2856
2902
  const DynamicPanelRenderer = useMemo(() => {
2857
- const activePanel = panelConfigs.find((panel) => panel.id === store.activePanelId);
2858
- if (!activePanel)
2859
- return null;
2903
+ const activePanelId = store.activePanelId;
2904
+ console.log("DynamicPanelRenderer: activePanelId =", activePanelId);
2905
+ console.log("DynamicPanelRenderer: available panels =", panelConfigs.map((p) => ({ id: p.id, component: typeof p.component })));
2906
+ const activePanel = panelConfigs.find((panel) => panel.id === activePanelId);
2907
+ if (!activePanel) {
2908
+ console.log("DynamicPanelRenderer: No active panel found, returning fallback");
2909
+ return /* @__PURE__ */ React17.createElement("div", {
2910
+ className: "text-gray-400 text-center p-4"
2911
+ }, "No panel selected");
2912
+ }
2913
+ console.log("DynamicPanelRenderer: Found active panel:", activePanel.id, typeof activePanel.component);
2860
2914
  const PanelComponent = activePanel.component;
2915
+ if (!PanelComponent) {
2916
+ console.log("DynamicPanelRenderer: PanelComponent is null/undefined");
2917
+ return /* @__PURE__ */ React17.createElement("div", {
2918
+ className: "text-red-400 text-center p-4"
2919
+ }, "Panel component not found");
2920
+ }
2921
+ if (typeof PanelComponent !== "function") {
2922
+ console.error("DynamicPanelRenderer: PanelComponent is not a function:", PanelComponent);
2923
+ return /* @__PURE__ */ React17.createElement("div", {
2924
+ className: "text-red-400 text-center p-4"
2925
+ }, "Invalid panel component");
2926
+ }
2927
+ console.log("DynamicPanelRenderer: Rendering panel:", activePanel.id);
2861
2928
  return /* @__PURE__ */ React17.createElement(PanelComponent, {
2862
2929
  key: activePanel.id,
2863
2930
  ...activePanel.props
2864
2931
  });
2865
2932
  }, [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
2933
  const handleImageUpload = useCallback4((e) => {
2897
2934
  const file = e.target.files?.[0];
2898
2935
  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;yCAwhBxG,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.4",
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",