@8btc/whiteboard 0.0.15 → 0.0.17

package/dist/index.d.ts

@@ -58,9 +58,13 @@ export declare class CanvasApi extends CanvasCore {
     /**
      * 导出带有标注的图片节点为图片
      * @param id - 图片节点 ID
-     * @returns DataURL 格式的图片数据，如果节点不存在则返回 null
+     * @returns DataURL 格式的图片数据，如果节点或者 marker 不存在则返回 null
      */
-    exportImageWithMarker(id: string): string | null;
+    exportImageWithMarker(id: string, options?: {
+        pixelRatio?: number;
+        mimeType?: string;
+        quality?: number;
+    }): string | null;
     /**
      * 删除当前选中的节点
      * 如果删除的是 image 节点，会同步删除所有关联的 image-marker

package/dist/index.js

@@ -9,7 +9,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _core, _stage, _viewport, _handleWheel, _handlePointerDown, _handlePointerMove, _handlePointerUp, _handleDragStart, _handleDragMove, _handleDragEnd, _CanvasStage_instances, setupEventListeners_fn, _core2, _transformer, _handleTransformStart, _handleTransform, _handleTransformEnd, _handleDragStart2, _handleDragMove2, _handleDragEnd2, _CanvasTransformer_instances, setupEventListeners_fn2, _toolTypeChangeHandler, _RectNode_instances, setupEventHandlers_fn, _ImageNode_instances, loadImage_fn, _toolTypeChangeHandler2, setupEventHandlers_fn2, syncImageMarkers_fn, syncImageMarkersToState_fn, _rect, _markerGroup, _circle, _text, _handleViewportChange, _handleNodesSelected, _ImageMarkerNode_instances, updateMarkerScale_fn, setupEventHandlers_fn3, _canvasStage, _mainLayer, _canvasTransformer, _draftNode, _container, _handleKeyDown, _CanvasCore_instances, setupKeyboardEvents_fn;
+var _core, _stage, _viewport, _handleWheel, _handlePointerDown, _handlePointerMove, _handlePointerUp, _handleDragStart, _handleDragMove, _handleDragEnd, _CanvasStage_instances, setupEventListeners_fn, _core2, _transformer, _handleTransformStart, _handleTransform, _handleTransformEnd, _handleDragStart2, _handleDragMove2, _handleDragEnd2, _CanvasTransformer_instances, setupEventListeners_fn2, _toolTypeChangeHandler, _RectNode_instances, setupEventHandlers_fn, _ImageNode_instances, loadImage_fn, _toolTypeChangeHandler2, setupEventHandlers_fn2, syncImageMarkers_fn, syncImageMarkersToState_fn, _rect, _markerGroup, _circle, _text, _handleViewportChange, _handleNodesSelected, _ImageMarkerNode_instances, changeVisulStyle_fn, setupEventHandlers_fn3, _canvasStage, _mainLayer, _canvasTransformer, _draftNode, _container, _handleKeyDown, _CanvasCore_instances, setupKeyboardEvents_fn;
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from "react";
 import Konva from "konva";
@@ -909,7 +909,7 @@ class ImageMarkerNode extends BaseCanvasNode {
     __privateSet(this, _text, __privateGet(this, _markerGroup).findOne("Text"));
     __privateMethod(this, _ImageMarkerNode_instances, setupEventHandlers_fn3).call(this);
     __privateSet(this, _handleViewportChange, () => {
-      __privateMethod(this, _ImageMarkerNode_instances, updateMarkerScale_fn).call(this);
+      __privateMethod(this, _ImageMarkerNode_instances, changeVisulStyle_fn).call(this);
     });
     this.core.on("viewport:scale:change", __privateGet(this, _handleViewportChange));
     __privateSet(this, _handleNodesSelected, (selectedIds) => {
@@ -1065,7 +1065,7 @@ _ImageMarkerNode_instances = new WeakSet();
 /**
  * 更新标记点的缩放以保持视觉大小不变
  */
-updateMarkerScale_fn = function() {
+changeVisulStyle_fn = function() {
   const stageScale = this.core.getStageScale();
   const radius = 14 / stageScale;
   const strokeWidth = 3 / stageScale;
@@ -1101,6 +1101,9 @@ setupEventHandlers_fn3 = function() {
   __privateGet(this, _markerGroup).on("pointerdown", () => {
     this.core.selectNode(this.node.id);
   });
+  __privateGet(this, _markerGroup).on("transform", () => {
+    console.log("image marker group on transform called");
+  });
 };
 function createCanvasNodeByType(core, type, config, isDraft = false) {
   switch (type) {
@@ -1801,9 +1804,9 @@ class CanvasApi extends CanvasCore {
   /**
    * 导出带有标注的图片节点为图片
    * @param id - 图片节点 ID
-   * @returns DataURL 格式的图片数据，如果节点不存在则返回 null
+   * @returns DataURL 格式的图片数据，如果节点或者 marker 不存在则返回 null
    */
-  exportImageWithMarker(id) {
+  exportImageWithMarker(id, options) {
     const imageShape = this.getStage().findOne(`#${id}`);
     if (!imageShape) {
       console.warn("Image shape not found on stage");
@@ -1813,6 +1816,10 @@ class CanvasApi extends CanvasCore {
     const markerNodes = nodes.filter(
       (n) => n.type === "image-marker" && n.meta.parent === id
     );
+    if (markerNodes.length === 0) {
+      console.warn("No image-marker nodes found for the given image ID");
+      return null;
+    }
     const tempGroup = new Konva.Group();
     const imageClone = imageShape.clone();
     tempGroup.add(imageClone);
@@ -1820,16 +1827,42 @@ class CanvasApi extends CanvasCore {
       const markerShape = this.getStage().findOne(`#${markerNode.id}`);
       if (markerShape) {
         const markerClone = markerShape.clone();
+        const rect = markerClone.findOne(".rect");
+        const markerGroup = markerClone.findOne(".marker-group");
+        if (rect) {
+          rect.strokeWidth(3);
+          rect.dash([5, 5]);
+          rect.cornerRadius(6);
+        }
+        if (markerGroup) {
+          const circle = markerGroup.findOne("Circle");
+          const text = markerGroup.findOne("Text");
+          if (circle) {
+            circle.radius(14);
+            circle.strokeWidth(3);
+          }
+          if (text) {
+            const radius = 14;
+            text.x(-radius);
+            text.y(-radius);
+            text.width(radius * 2);
+            text.height(radius * 2);
+            text.fontSize(16);
+          }
+        }
         tempGroup.add(markerClone);
       }
     });
     const box = tempGroup.getClientRect();
+    console.log("Exporting image with markers, bounding box:", box);
     const dataURL = tempGroup.toDataURL({
       x: box.x,
       y: box.y,
       width: box.width,
       height: box.height,
-      pixelRatio: 2
+      pixelRatio: options?.pixelRatio ?? 2,
+      mimeType: options?.mimeType ?? "image/png",
+      quality: options?.quality ?? 1
     });
     tempGroup.destroy();
     return dataURL;

package/dist/index.umd.js

@@ -13,7 +13,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 
-  var _core, _stage, _viewport, _handleWheel, _handlePointerDown, _handlePointerMove, _handlePointerUp, _handleDragStart, _handleDragMove, _handleDragEnd, _CanvasStage_instances, setupEventListeners_fn, _core2, _transformer, _handleTransformStart, _handleTransform, _handleTransformEnd, _handleDragStart2, _handleDragMove2, _handleDragEnd2, _CanvasTransformer_instances, setupEventListeners_fn2, _toolTypeChangeHandler, _RectNode_instances, setupEventHandlers_fn, _ImageNode_instances, loadImage_fn, _toolTypeChangeHandler2, setupEventHandlers_fn2, syncImageMarkers_fn, syncImageMarkersToState_fn, _rect, _markerGroup, _circle, _text, _handleViewportChange, _handleNodesSelected, _ImageMarkerNode_instances, updateMarkerScale_fn, setupEventHandlers_fn3, _canvasStage, _mainLayer, _canvasTransformer, _draftNode, _container, _handleKeyDown, _CanvasCore_instances, setupKeyboardEvents_fn;
+  var _core, _stage, _viewport, _handleWheel, _handlePointerDown, _handlePointerMove, _handlePointerUp, _handleDragStart, _handleDragMove, _handleDragEnd, _CanvasStage_instances, setupEventListeners_fn, _core2, _transformer, _handleTransformStart, _handleTransform, _handleTransformEnd, _handleDragStart2, _handleDragMove2, _handleDragEnd2, _CanvasTransformer_instances, setupEventListeners_fn2, _toolTypeChangeHandler, _RectNode_instances, setupEventHandlers_fn, _ImageNode_instances, loadImage_fn, _toolTypeChangeHandler2, setupEventHandlers_fn2, syncImageMarkers_fn, syncImageMarkersToState_fn, _rect, _markerGroup, _circle, _text, _handleViewportChange, _handleNodesSelected, _ImageMarkerNode_instances, changeVisulStyle_fn, setupEventHandlers_fn3, _canvasStage, _mainLayer, _canvasTransformer, _draftNode, _container, _handleKeyDown, _CanvasCore_instances, setupKeyboardEvents_fn;
   var __vite_style__ = document.createElement("style");
   __vite_style__.textContent = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
 @layer properties {
@@ -2226,7 +2226,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __privateSet(this, _text, __privateGet(this, _markerGroup).findOne("Text"));
       __privateMethod(this, _ImageMarkerNode_instances, setupEventHandlers_fn3).call(this);
       __privateSet(this, _handleViewportChange, () => {
-        __privateMethod(this, _ImageMarkerNode_instances, updateMarkerScale_fn).call(this);
+        __privateMethod(this, _ImageMarkerNode_instances, changeVisulStyle_fn).call(this);
       });
       this.core.on("viewport:scale:change", __privateGet(this, _handleViewportChange));
       __privateSet(this, _handleNodesSelected, (selectedIds) => {
@@ -2382,7 +2382,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   /**
    * 更新标记点的缩放以保持视觉大小不变
    */
-  updateMarkerScale_fn = function() {
+  changeVisulStyle_fn = function() {
     const stageScale = this.core.getStageScale();
     const radius = 14 / stageScale;
     const strokeWidth = 3 / stageScale;
@@ -2418,6 +2418,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     __privateGet(this, _markerGroup).on("pointerdown", () => {
       this.core.selectNode(this.node.id);
     });
+    __privateGet(this, _markerGroup).on("transform", () => {
+      console.log("image marker group on transform called");
+    });
   };
   function createCanvasNodeByType(core, type, config, isDraft = false) {
     switch (type) {
@@ -3118,9 +3121,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     /**
      * 导出带有标注的图片节点为图片
      * @param id - 图片节点 ID
-     * @returns DataURL 格式的图片数据，如果节点不存在则返回 null
+     * @returns DataURL 格式的图片数据，如果节点或者 marker 不存在则返回 null
      */
-    exportImageWithMarker(id) {
+    exportImageWithMarker(id, options) {
       const imageShape = this.getStage().findOne(`#${id}`);
       if (!imageShape) {
         console.warn("Image shape not found on stage");
@@ -3130,6 +3133,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       const markerNodes = nodes.filter(
         (n) => n.type === "image-marker" && n.meta.parent === id
       );
+      if (markerNodes.length === 0) {
+        console.warn("No image-marker nodes found for the given image ID");
+        return null;
+      }
       const tempGroup = new Konva.Group();
       const imageClone = imageShape.clone();
       tempGroup.add(imageClone);
@@ -3137,16 +3144,42 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         const markerShape = this.getStage().findOne(`#${markerNode.id}`);
         if (markerShape) {
           const markerClone = markerShape.clone();
+          const rect = markerClone.findOne(".rect");
+          const markerGroup = markerClone.findOne(".marker-group");
+          if (rect) {
+            rect.strokeWidth(3);
+            rect.dash([5, 5]);
+            rect.cornerRadius(6);
+          }
+          if (markerGroup) {
+            const circle = markerGroup.findOne("Circle");
+            const text = markerGroup.findOne("Text");
+            if (circle) {
+              circle.radius(14);
+              circle.strokeWidth(3);
+            }
+            if (text) {
+              const radius = 14;
+              text.x(-radius);
+              text.y(-radius);
+              text.width(radius * 2);
+              text.height(radius * 2);
+              text.fontSize(16);
+            }
+          }
           tempGroup.add(markerClone);
         }
       });
       const box = tempGroup.getClientRect();
+      console.log("Exporting image with markers, bounding box:", box);
       const dataURL = tempGroup.toDataURL({
         x: box.x,
         y: box.y,
         width: box.width,
         height: box.height,
-        pixelRatio: 2
+        pixelRatio: options?.pixelRatio ?? 2,
+        mimeType: options?.mimeType ?? "image/png",
+        quality: options?.quality ?? 1
       });
       tempGroup.destroy();
       return dataURL;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@8btc/whiteboard",
   "private": false,
-  "version": "0.0.15",
+  "version": "0.0.17",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.js",