labellife-design-tool 0.7.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
@@ -3045,6 +3045,31 @@ var exportToJSON = (design) => {
   document.body.removeChild(link);
   URL.revokeObjectURL(url);
 };
+var canvasToBlob = (stage, format = "png", options) => {
+  if (!stage) {
+    return Promise.reject(new Error("Stage is required"));
+  }
+  const oldScale = stage.scaleX();
+  stage.scale({ x: 1, y: 1 });
+  const pixelRatio = options?.pixelRatio ?? 2;
+  const quality = options?.quality ?? 0.9;
+  const dataUrl = stage.toDataURL({
+    pixelRatio,
+    mimeType: format === "jpg" ? "image/jpeg" : "image/png",
+    quality: format === "jpg" ? quality : undefined
+  });
+  stage.scale({ x: oldScale, y: oldScale });
+  return new Promise((resolve, reject) => {
+    const byteString = atob(dataUrl.split(",")[1]);
+    const mimeType = format === "jpg" ? "image/jpeg" : "image/png";
+    const arrayBuffer = new ArrayBuffer(byteString.length);
+    const uint8Array = new Uint8Array(arrayBuffer);
+    for (let i = 0;i < byteString.length; i++) {
+      uint8Array[i] = byteString.charCodeAt(i);
+    }
+    resolve(new Blob([arrayBuffer], { type: mimeType }));
+  });
+};
 var importFromJSON = (event, onLoad, onError, onInputsRequired) => {
   const file = event.target.files?.[0];
   if (file) {
@@ -3571,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",
@@ -3607,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);
@@ -4368,7 +4406,7 @@ var CanvasEditor = ({
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
-};
+});
 var CanvasEditor_default = CanvasEditor;
 export {
   setUnsplashAccessKey,
@@ -4380,6 +4418,7 @@ export {
   exportToJSON,
   exportToJPG,
   convertTemplateToCanvasDesign,
+  canvasToBlob,
   UrlImageElement,
   ShapeElement,
   FONT_FAMILIES,

package/dist/lib/lib/index.d.ts

@@ -4,7 +4,7 @@
  */
 export { default as CanvasEditor } from '../CanvasEditor';
 export * from '../types';
-export { exportToPNG, exportToJPG, exportToJSON, importFromJSON, findRequiredInputs, replaceUserInputs, convertTemplateToCanvasDesign, } from '../utils/exportImportUtils';
+export { exportToPNG, exportToJPG, exportToJSON, importFromJSON, findRequiredInputs, replaceUserInputs, convertTemplateToCanvasDesign, canvasToBlob, } from '../utils/exportImportUtils';
 export * from '../elements';
 export { FONT_FAMILIES, DEFAULT_COLORS, CANVAS_PRESETS } from '../constants';
 export { setUnsplashAccessKey, getUnsplashAccessKey } from '../config';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG1D,cAAc,UAAU,CAAC;AAGzB,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EACjB,6BAA6B,GAC9B,MAAM,4BAA4B,CAAC;AAGpC,cAAc,aAAa,CAAC;AAG5B,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG7E,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG1D,cAAc,UAAU,CAAC;AAGzB,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EACjB,6BAA6B,EAC7B,YAAY,GACb,MAAM,4BAA4B,CAAC;AAGpC,cAAc,aAAa,CAAC;AAG5B,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG7E,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "labellife-design-tool",
-  "version": "0.7.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",