@8btc/whiteboard 0.0.7 → 0.0.8

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, _animation, _RectNode_instances, initAnimation_fn, destroyAnimation_fn, setupEventHandlers_fn, _ImageNode_instances, loadImage_fn, setupEventHandlers_fn2, syncImageMarkers_fn, syncImageMarkersToState_fn, _rect, _markerGroup, _circle, _text, _ImageMarkerNode_instances, setupEventHandlers_fn3, _canvasStage, _mainLayer, _canvasTransformer, _draftNode;
+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, _animation, _RectNode_instances, initAnimation_fn, destroyAnimation_fn, _toolTypeChangeHandler, setupEventHandlers_fn, _ImageNode_instances, loadImage_fn, _toolTypeChangeHandler2, setupEventHandlers_fn2, syncImageMarkers_fn, syncImageMarkersToState_fn, _rect, _markerGroup, _circle, _text, _ImageMarkerNode_instances, setupEventHandlers_fn3, _canvasStage, _mainLayer, _canvasTransformer, _draftNode;
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from "react";
 import Konva from "konva";
@@ -269,7 +269,6 @@ class CanvasTransformer {
      * 处理 transform 事件
      */
     __privateAdd(this, _handleTransform, () => {
-      console.log("transforming...");
       this.emitPositionChange();
     });
     /**
@@ -521,6 +520,9 @@ const IMAGE = {
 const RECT = {
   MIN_SIZE: 10
 };
+function clamp(value, range) {
+  return Math.min(Math.max(value, range[0]), range[1]);
+}
 function calculatePerimeter(width, height, cornerRadius) {
   return 2 * (height + width - cornerRadius * (4 - Math.PI));
 }
@@ -573,16 +575,9 @@ class BaseCanvasNode {
     __publicField(this, "core");
     __publicField(this, "node");
     __publicField(this, "element");
-    __publicField(this, "toolTypeChangeHandler");
     this.core = core;
     this.node = node;
     this.element = this.createElement();
-    this.toolTypeChangeHandler = (toolType) => {
-      const isSelect = toolType === "select";
-      this.element.listening(isSelect);
-    };
-    this.toolTypeChangeHandler(this.core.getToolType());
-    this.core.on("toolType:change", this.toolTypeChangeHandler);
   }
   /**
    * 获取 Konva 元素
@@ -596,13 +591,6 @@ class BaseCanvasNode {
   getNode() {
     return this.node;
   }
-  /**
-   * 销毁节点
-   */
-  destroy() {
-    this.core.off("toolType:change", this.toolTypeChangeHandler);
-    this.element.destroy();
-  }
 }
 function createRectAnimation(rect, totalDashLength) {
   if (!totalDashLength || totalDashLength === 0) {
@@ -624,6 +612,10 @@ class RectNode extends BaseCanvasNode {
     super(core, node);
     __privateAdd(this, _RectNode_instances);
     __privateAdd(this, _animation, null);
+    __privateAdd(this, _toolTypeChangeHandler, (toolType) => {
+      const isSelect = toolType === "select";
+      this.element.listening(isSelect);
+    });
     if (node.style.animated) {
       __privateMethod(this, _RectNode_instances, initAnimation_fn).call(this);
     }
@@ -702,8 +694,9 @@ class RectNode extends BaseCanvasNode {
    * 销毁
    */
   destroy() {
+    this.core.off("toolType:change", __privateGet(this, _toolTypeChangeHandler));
     __privateMethod(this, _RectNode_instances, destroyAnimation_fn).call(this);
-    super.destroy();
+    this.element.destroy();
   }
 }
 _animation = new WeakMap();
@@ -730,11 +723,13 @@ destroyAnimation_fn = function() {
     __privateSet(this, _animation, null);
   }
 };
+_toolTypeChangeHandler = new WeakMap();
 /**
  * 设置事件处理器
  */
-setupEventHandlers_fn = function(rect = void 0) {
-  const element = rect ?? this.getElement();
+setupEventHandlers_fn = function(rect) {
+  const element = rect;
+  this.core.on("toolType:change", __privateGet(this, _toolTypeChangeHandler));
   element.on("transformstart", () => {
     if (this.node.style.animated && __privateGet(this, _animation)) {
       __privateGet(this, _animation).stop();
@@ -790,6 +785,10 @@ class ImageNode extends BaseCanvasNode {
   constructor(core, node) {
     super(core, node);
     __privateAdd(this, _ImageNode_instances);
+    __privateAdd(this, _toolTypeChangeHandler2, (toolType) => {
+      const isSelect = toolType === "select";
+      this.element.listening(isSelect);
+    });
     __privateMethod(this, _ImageNode_instances, loadImage_fn).call(this);
     __privateMethod(this, _ImageNode_instances, setupEventHandlers_fn2).call(this, this.getElement());
   }
@@ -853,7 +852,8 @@ class ImageNode extends BaseCanvasNode {
    * 销毁
    */
   destroy() {
-    super.destroy();
+    this.core.off("toolType:change", __privateGet(this, _toolTypeChangeHandler2));
+    this.element.destroy();
   }
 }
 _ImageNode_instances = new WeakSet();
@@ -880,10 +880,12 @@ loadImage_fn = function() {
     console.error("Failed to load image:", imageUrl);
   };
 };
+_toolTypeChangeHandler2 = new WeakMap();
 /**
  * 设置事件处理器
  */
 setupEventHandlers_fn2 = function(img) {
+  this.core.on("toolType:change", __privateGet(this, _toolTypeChangeHandler2));
   img.on("transform", (event) => {
     const img2 = event.target;
     const width = Math.max(IMAGE.MIN_SIZE, img2.width() * img2.scaleX());
@@ -1017,7 +1019,8 @@ class ImageMarkerNode extends BaseCanvasNode {
       x: this.node.props.x,
       y: this.node.props.y,
       width,
-      height
+      height,
+      listening: false
     });
     const rect = new Konva.Rect({
       name: "rect",
@@ -1115,7 +1118,7 @@ class ImageMarkerNode extends BaseCanvasNode {
    * 销毁
    */
   destroy() {
-    super.destroy();
+    this.element.destroy();
   }
   /**
    * 更新焦点状态（hover 或 selected）
@@ -1182,7 +1185,10 @@ const createNodeByType = (type, position, style, meta) => {
       rotation: 0,
       visible: true
     },
-    meta: meta ?? {}
+    meta: {
+      ...meta,
+      startPoint: position
+    }
   };
   if (type === "image-marker") {
     return {
@@ -1196,19 +1202,21 @@ const createNodeByType = (type, position, style, meta) => {
   }
   return baseNode;
 };
-function updateNodeByType(node, position, bounds) {
+function updateNodeByType(node, position) {
   let finalPosition = position;
-  if (node.type === "image-marker" && bounds) {
+  if (node.type === "image-marker" && node.meta.bounds) {
+    const bounds = node.meta.bounds;
     finalPosition = {
-      x: Math.max(bounds.x, Math.min(bounds.x + bounds.width, position.x)),
-      y: Math.max(bounds.y, Math.min(bounds.y + bounds.height, position.y))
+      x: clamp(position.x, [bounds.x, bounds.x + bounds.width]),
+      y: clamp(position.y, [bounds.y, bounds.y + bounds.height])
     };
   }
-  const [p1, p2] = normalizePoints(
-    { x: node.props.x, y: node.props.y },
-    finalPosition
-  );
   if (node.type === "rectangle" || node.type === "image-marker") {
+    const startPoint = node.meta.startPoint ?? {
+      x: node.props.x,
+      y: node.props.y
+    };
+    const [p1, p2] = normalizePoints(startPoint, finalPosition);
     return {
       ...node,
       props: {
@@ -1217,6 +1225,11 @@ function updateNodeByType(node, position, bounds) {
         y: p1.y,
         width: Math.max(p2.x - p1.x, RECT$1.MIN_SIZE),
         height: Math.max(p2.y - p1.y, RECT$1.MIN_SIZE)
+      },
+      meta: {
+        ...node.meta,
+        // 保存初始起点，以便后续更新使用
+        startPoint
       }
     };
   }
@@ -1477,17 +1490,16 @@ class CanvasCore extends CanvasState {
     }
     const node = createNodeByType(type, position, void 0, meta);
     __privateSet(this, _draftNode, createCanvasNodeByType(this, type, node));
-    console.log(__privateGet(this, _draftNode));
     if (!__privateGet(this, _draftNode)) return;
     __privateGet(this, _mainLayer).add(__privateGet(this, _draftNode).getElement());
   }
   /**
    * @internal 仅供内部使用
    */
-  updateDraftNode(position, bounds) {
+  updateDraftNode(position) {
     if (!__privateGet(this, _draftNode)) return;
     const node = __privateGet(this, _draftNode).getNode();
-    const updatedNode = updateNodeByType(node, position, bounds);
+    const updatedNode = updateNodeByType(node, position);
     __privateGet(this, _draftNode).updateNode(updatedNode);
   }
   /**
@@ -1884,11 +1896,11 @@ class CanvasApi extends CanvasCore {
     this.updateViewport({ x, y, scale: newScale }, true);
   }
 }
-function modulate(value, rangeA, rangeB, clamp = false) {
+function modulate(value, rangeA, rangeB, clamp2 = false) {
   const [fromLow, fromHigh] = rangeA;
   const [v0, v1] = rangeB;
   const result = v0 + (value - fromLow) / (fromHigh - fromLow) * (v1 - v0);
-  return clamp ? v0 < v1 ? Math.max(Math.min(result, v1), v0) : Math.max(Math.min(result, v0), v1) : result;
+  return clamp2 ? v0 < v1 ? Math.max(Math.min(result, v1), v0) : Math.max(Math.min(result, v0), v1) : result;
 }
 const gridSteps = [
   {
@@ -2130,9 +2142,6 @@ function PureCanvas({ setApi }) {
     core.on("viewport:change", (newViewport) => {
       setViewport(newViewport);
     });
-    core.on("transformer:positionChange", (position) => {
-      console.log("Transformer position changed:", position);
-    });
     return () => {
       core.dispose();
     };

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, _animation, _RectNode_instances, initAnimation_fn, destroyAnimation_fn, setupEventHandlers_fn, _ImageNode_instances, loadImage_fn, setupEventHandlers_fn2, syncImageMarkers_fn, syncImageMarkersToState_fn, _rect, _markerGroup, _circle, _text, _ImageMarkerNode_instances, setupEventHandlers_fn3, _canvasStage, _mainLayer, _canvasTransformer, _draftNode;
+  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, _animation, _RectNode_instances, initAnimation_fn, destroyAnimation_fn, _toolTypeChangeHandler, setupEventHandlers_fn, _ImageNode_instances, loadImage_fn, _toolTypeChangeHandler2, setupEventHandlers_fn2, syncImageMarkers_fn, syncImageMarkersToState_fn, _rect, _markerGroup, _circle, _text, _ImageMarkerNode_instances, setupEventHandlers_fn3, _canvasStage, _mainLayer, _canvasTransformer, _draftNode;
   var __vite_style__ = document.createElement("style");
   __vite_style__.textContent = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
 @layer properties {
@@ -1588,7 +1588,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
        * 处理 transform 事件
        */
       __privateAdd(this, _handleTransform, () => {
-        console.log("transforming...");
         this.emitPositionChange();
       });
       /**
@@ -1840,6 +1839,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   const RECT = {
     MIN_SIZE: 10
   };
+  function clamp(value, range) {
+    return Math.min(Math.max(value, range[0]), range[1]);
+  }
   function calculatePerimeter(width, height, cornerRadius) {
     return 2 * (height + width - cornerRadius * (4 - Math.PI));
   }
@@ -1892,16 +1894,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __publicField(this, "core");
       __publicField(this, "node");
       __publicField(this, "element");
-      __publicField(this, "toolTypeChangeHandler");
       this.core = core;
       this.node = node;
       this.element = this.createElement();
-      this.toolTypeChangeHandler = (toolType) => {
-        const isSelect = toolType === "select";
-        this.element.listening(isSelect);
-      };
-      this.toolTypeChangeHandler(this.core.getToolType());
-      this.core.on("toolType:change", this.toolTypeChangeHandler);
     }
     /**
      * 获取 Konva 元素
@@ -1915,13 +1910,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     getNode() {
       return this.node;
     }
-    /**
-     * 销毁节点
-     */
-    destroy() {
-      this.core.off("toolType:change", this.toolTypeChangeHandler);
-      this.element.destroy();
-    }
   }
   function createRectAnimation(rect, totalDashLength) {
     if (!totalDashLength || totalDashLength === 0) {
@@ -1943,6 +1931,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       super(core, node);
       __privateAdd(this, _RectNode_instances);
       __privateAdd(this, _animation, null);
+      __privateAdd(this, _toolTypeChangeHandler, (toolType) => {
+        const isSelect = toolType === "select";
+        this.element.listening(isSelect);
+      });
       if (node.style.animated) {
         __privateMethod(this, _RectNode_instances, initAnimation_fn).call(this);
       }
@@ -2021,8 +2013,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
      * 销毁
      */
     destroy() {
+      this.core.off("toolType:change", __privateGet(this, _toolTypeChangeHandler));
       __privateMethod(this, _RectNode_instances, destroyAnimation_fn).call(this);
-      super.destroy();
+      this.element.destroy();
     }
   }
   _animation = new WeakMap();
@@ -2049,11 +2042,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __privateSet(this, _animation, null);
     }
   };
+  _toolTypeChangeHandler = new WeakMap();
   /**
    * 设置事件处理器
    */
-  setupEventHandlers_fn = function(rect = void 0) {
-    const element = rect ?? this.getElement();
+  setupEventHandlers_fn = function(rect) {
+    const element = rect;
+    this.core.on("toolType:change", __privateGet(this, _toolTypeChangeHandler));
     element.on("transformstart", () => {
       if (this.node.style.animated && __privateGet(this, _animation)) {
         __privateGet(this, _animation).stop();
@@ -2109,6 +2104,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     constructor(core, node) {
       super(core, node);
       __privateAdd(this, _ImageNode_instances);
+      __privateAdd(this, _toolTypeChangeHandler2, (toolType) => {
+        const isSelect = toolType === "select";
+        this.element.listening(isSelect);
+      });
       __privateMethod(this, _ImageNode_instances, loadImage_fn).call(this);
       __privateMethod(this, _ImageNode_instances, setupEventHandlers_fn2).call(this, this.getElement());
     }
@@ -2172,7 +2171,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
      * 销毁
      */
     destroy() {
-      super.destroy();
+      this.core.off("toolType:change", __privateGet(this, _toolTypeChangeHandler2));
+      this.element.destroy();
     }
   }
   _ImageNode_instances = new WeakSet();
@@ -2199,10 +2199,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       console.error("Failed to load image:", imageUrl);
     };
   };
+  _toolTypeChangeHandler2 = new WeakMap();
   /**
    * 设置事件处理器
    */
   setupEventHandlers_fn2 = function(img) {
+    this.core.on("toolType:change", __privateGet(this, _toolTypeChangeHandler2));
     img.on("transform", (event) => {
       const img2 = event.target;
       const width = Math.max(IMAGE.MIN_SIZE, img2.width() * img2.scaleX());
@@ -2336,7 +2338,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         x: this.node.props.x,
         y: this.node.props.y,
         width,
-        height
+        height,
+        listening: false
       });
       const rect = new Konva.Rect({
         name: "rect",
@@ -2434,7 +2437,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
      * 销毁
      */
     destroy() {
-      super.destroy();
+      this.element.destroy();
     }
     /**
      * 更新焦点状态（hover 或 selected）
@@ -2501,7 +2504,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         rotation: 0,
         visible: true
       },
-      meta: meta ?? {}
+      meta: {
+        ...meta,
+        startPoint: position
+      }
     };
     if (type === "image-marker") {
       return {
@@ -2515,19 +2521,21 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     return baseNode;
   };
-  function updateNodeByType(node, position, bounds) {
+  function updateNodeByType(node, position) {
     let finalPosition = position;
-    if (node.type === "image-marker" && bounds) {
+    if (node.type === "image-marker" && node.meta.bounds) {
+      const bounds = node.meta.bounds;
       finalPosition = {
-        x: Math.max(bounds.x, Math.min(bounds.x + bounds.width, position.x)),
-        y: Math.max(bounds.y, Math.min(bounds.y + bounds.height, position.y))
+        x: clamp(position.x, [bounds.x, bounds.x + bounds.width]),
+        y: clamp(position.y, [bounds.y, bounds.y + bounds.height])
       };
     }
-    const [p1, p2] = normalizePoints(
-      { x: node.props.x, y: node.props.y },
-      finalPosition
-    );
     if (node.type === "rectangle" || node.type === "image-marker") {
+      const startPoint = node.meta.startPoint ?? {
+        x: node.props.x,
+        y: node.props.y
+      };
+      const [p1, p2] = normalizePoints(startPoint, finalPosition);
       return {
         ...node,
         props: {
@@ -2536,6 +2544,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           y: p1.y,
           width: Math.max(p2.x - p1.x, RECT$1.MIN_SIZE),
           height: Math.max(p2.y - p1.y, RECT$1.MIN_SIZE)
+        },
+        meta: {
+          ...node.meta,
+          // 保存初始起点，以便后续更新使用
+          startPoint
         }
       };
     }
@@ -2796,17 +2809,16 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       }
       const node = createNodeByType(type, position, void 0, meta);
       __privateSet(this, _draftNode, createCanvasNodeByType(this, type, node));
-      console.log(__privateGet(this, _draftNode));
       if (!__privateGet(this, _draftNode)) return;
       __privateGet(this, _mainLayer).add(__privateGet(this, _draftNode).getElement());
     }
     /**
      * @internal 仅供内部使用
      */
-    updateDraftNode(position, bounds) {
+    updateDraftNode(position) {
       if (!__privateGet(this, _draftNode)) return;
       const node = __privateGet(this, _draftNode).getNode();
-      const updatedNode = updateNodeByType(node, position, bounds);
+      const updatedNode = updateNodeByType(node, position);
       __privateGet(this, _draftNode).updateNode(updatedNode);
     }
     /**
@@ -3203,11 +3215,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this.updateViewport({ x, y, scale: newScale }, true);
     }
   }
-  function modulate(value, rangeA, rangeB, clamp = false) {
+  function modulate(value, rangeA, rangeB, clamp2 = false) {
     const [fromLow, fromHigh] = rangeA;
     const [v0, v1] = rangeB;
     const result = v0 + (value - fromLow) / (fromHigh - fromLow) * (v1 - v0);
-    return clamp ? v0 < v1 ? Math.max(Math.min(result, v1), v0) : Math.max(Math.min(result, v0), v1) : result;
+    return clamp2 ? v0 < v1 ? Math.max(Math.min(result, v1), v0) : Math.max(Math.min(result, v0), v1) : result;
   }
   const gridSteps = [
     {
@@ -3449,9 +3461,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       core.on("viewport:change", (newViewport) => {
         setViewport(newViewport);
       });
-      core.on("transformer:positionChange", (position) => {
-        console.log("Transformer position changed:", position);
-      });
       return () => {
         core.dispose();
       };

package/package.json

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