@8btc/whiteboard 0.0.14 → 0.0.16

package/dist/index.d.ts

@@ -60,7 +60,11 @@ export declare class CanvasApi extends CanvasCore {
      * @param id - 图片节点 ID
      * @returns DataURL 格式的图片数据，如果节点不存在则返回 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";
@@ -691,13 +691,18 @@ class ImageNode extends BaseCanvasNode {
     __privateMethod(this, _ImageNode_instances, setupEventHandlers_fn2).call(this, this.getElement());
   }
   createElement() {
+    const width = this.node.props.width || IMAGE.MIN_SIZE;
+    const height = this.node.props.height || IMAGE.MIN_SIZE;
     const placeholder = document.createElement("canvas");
-    placeholder.width = 1;
-    placeholder.height = 1;
+    placeholder.width = width;
+    placeholder.height = height;
     const img = new Konva.Image({
       id: this.node.id,
       x: this.node.props.x,
       y: this.node.props.y,
+      width,
+      height,
+      rotation: this.node.props.rotation || 0,
       name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.selectable} ${NODE_NAMES.image}`,
       draggable: true,
       image: placeholder
@@ -904,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) => {
@@ -1060,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;
@@ -1096,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) {
@@ -1798,7 +1806,7 @@ class CanvasApi extends CanvasCore {
    * @param id - 图片节点 ID
    * @returns DataURL 格式的图片数据，如果节点不存在则返回 null
    */
-  exportImageWithMarker(id) {
+  exportImageWithMarker(id, options) {
     const imageShape = this.getStage().findOne(`#${id}`);
     if (!imageShape) {
       console.warn("Image shape not found on stage");
@@ -1815,16 +1823,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 {
@@ -2008,13 +2008,18 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __privateMethod(this, _ImageNode_instances, setupEventHandlers_fn2).call(this, this.getElement());
     }
     createElement() {
+      const width = this.node.props.width || IMAGE.MIN_SIZE;
+      const height = this.node.props.height || IMAGE.MIN_SIZE;
       const placeholder = document.createElement("canvas");
-      placeholder.width = 1;
-      placeholder.height = 1;
+      placeholder.width = width;
+      placeholder.height = height;
       const img = new Konva.Image({
         id: this.node.id,
         x: this.node.props.x,
         y: this.node.props.y,
+        width,
+        height,
+        rotation: this.node.props.rotation || 0,
         name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.selectable} ${NODE_NAMES.image}`,
         draggable: true,
         image: placeholder
@@ -2221,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) => {
@@ -2377,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;
@@ -2413,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) {
@@ -3115,7 +3123,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
      * @param id - 图片节点 ID
      * @returns DataURL 格式的图片数据，如果节点不存在则返回 null
      */
-    exportImageWithMarker(id) {
+    exportImageWithMarker(id, options) {
       const imageShape = this.getStage().findOne(`#${id}`);
       if (!imageShape) {
         console.warn("Image shape not found on stage");
@@ -3132,16 +3140,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.14",
+  "version": "0.0.16",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.js",
@@ -20,7 +20,7 @@
     "**/*.css"
   ],
   "scripts": {
-    "dev": "vite --port 6999",
+    "dev": "vite --port 6999 --host",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",