labellife-design-tool 0.8.0 → 0.9.0

package/README.md

@@ -66,6 +66,57 @@ setUnsplashAccessKey('your-unsplash-access-key');
 // UNSPLASH_ACCESS_KEY=your-key npm start
 ```
 
+### Using Refs with CanvasEditor
+
+The `CanvasEditor` component supports React refs, allowing you to access internal methods and properties:
+
+```tsx
+import { useRef } from 'react';
+import { CanvasEditor, CanvasEditorRef } from 'labellife-design-tool';
+
+function MyEditor() {
+  const editorRef = useRef<CanvasEditorRef>(null);
+  
+  const handleExport = () => {
+    // Access methods via the ref
+    if (editorRef.current) {
+      // Export to PNG
+      editorRef.current.exportToPNG();
+      
+      // Or get the current design
+      const currentDesign = editorRef.current.getDesign();
+      console.log('Current design:', currentDesign);
+      
+      // Access the Konva Stage directly
+      const stage = editorRef.current.stage;
+      // Do something with the stage...
+    }
+  };
+  
+  return (
+    <div>
+      <CanvasEditor
+        ref={editorRef}
+        name="Editor with Ref"
+        config={{
+          export: { png: true, jpg: true, json: true },
+          multiPage: true
+        }}
+      />
+      <button onClick={handleExport}>Export</button>
+    </div>
+  );
+}
+```
+
+The `CanvasEditorRef` interface provides the following properties and methods:
+
+- `stage`: Direct access to the Konva.Stage instance
+- `exportToPNG()`: Export the canvas to a PNG file
+- `exportToJPG()`: Export the canvas to a JPG file
+- `exportToJSON()`: Export the design to a JSON file
+- `getDesign()`: Get the current design object
+
 ### Advanced Usage with Types
 
 ```tsx

package/dist/lib/CanvasEditor.d.ts

@@ -1,8 +1,17 @@
 import React from "react";
+import Konva from "konva";
+import { CanvasDesign } from "./types";
 import { Config } from "./types/Config";
-declare const CanvasEditor: React.FC<{
+export interface CanvasEditorRef {
+    stage: Konva.Stage | null;
+    exportToPNG: () => void;
+    exportToJPG: () => void;
+    exportToJSON: () => void;
+    getDesign: () => CanvasDesign;
+}
+declare const CanvasEditor: React.ForwardRefExoticComponent<{
     name: string;
     config?: Config;
-}>;
+} & React.RefAttributes<CanvasEditorRef>>;
 export default CanvasEditor;
 //# sourceMappingURL=CanvasEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAmFxE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CA88B7D,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAGzG,OAAO,KAAK,MAAM,OAAO,CAAC;AAyC1B,OAAO,EAEL,YAAY,EAKb,MAAM,SAAS,CAAC;AAgCjB,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,YAAY,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY;UAAuC,MAAM;aAAW,MAAM;yCA29B9E,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/dist/lib/index.js

@@ -1,5 +1,5 @@
 // src/CanvasEditor.tsx
-import { useState as useState3, useRef as useRef5, useEffect as useEffect4, useCallback as useCallback2 } from "react";
+import { useState as useState3, useRef as useRef5, useEffect as useEffect4, useCallback as useCallback2, forwardRef, useImperativeHandle } from "react";
 import { Stage, Layer, Rect as Rect2 } from "react-konva";
 import {
   PlusCircle
@@ -3596,10 +3596,10 @@ var TemplateInputModal_default = TemplateInputModal;
 
 // src/CanvasEditor.tsx
 import { jsxDEV as jsxDEV18 } from "react/jsx-dev-runtime";
-var CanvasEditor = ({
+var CanvasEditor = forwardRef(({
   name,
   config
-}) => {
+}, ref) => {
   const [design, setDesign] = useState3({
     id: Date.now().toString(),
     name: "Untitled Design",
@@ -3632,6 +3632,19 @@ var CanvasEditor = ({
   const [showInputModal, setShowInputModal] = useState3(false);
   const [pendingInputs, setPendingInputs] = useState3([]);
   const stageRef = useRef5(null);
+  useImperativeHandle(ref, () => ({
+    stage: stageRef.current,
+    exportToPNG: () => {
+      if (stageRef.current)
+        exportToPNG(stageRef.current, design);
+    },
+    exportToJPG: () => {
+      if (stageRef.current)
+        exportToJPG(stageRef.current, design);
+    },
+    exportToJSON: () => exportToJSON(design),
+    getDesign: () => design
+  }), [design]);
   const fileInputRef = useRef5(null);
   const jsonInputRef = useRef5(null);
   const containerRef = useRef5(null);
@@ -4393,7 +4406,7 @@ var CanvasEditor = ({
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
-};
+});
 var CanvasEditor_default = CanvasEditor;
 export {
   setUnsplashAccessKey,

package/package.json

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