@8btc/whiteboard 0.0.7 → 0.0.9

package/dist/index.css

@@ -358,10 +358,6 @@
     pointer-events: auto;
   }
 
-  .pointer-events-none {
-    pointer-events: none;
-  }
-
   .visible {
     visibility: visible;
   }
@@ -561,10 +557,6 @@
     touch-action: none;
   }
 
-  .resize {
-    resize: both;
-  }
-
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }

package/dist/index.d.ts

@@ -93,7 +93,7 @@ declare class CanvasCore extends CanvasState_2 {
     /**
      * 发射事件（供内部类使用）
      */
-    emitEvent<K extends keyof StateEvents>(event: K, data: StateEvents[K]): void;
+    emitEvent<StageEvent extends keyof StateEvents>(event: StageEvent, data: StateEvents[StageEvent]): void;
     /**
      * 获取 Konva.Stage 实例
      */
@@ -385,6 +385,8 @@ declare type StateEvents = {
     "viewport:change": ICoreState["viewport"];
     "transformer:positionChange": TransformerPosition | null;
     "toolType:change": ICoreState["toolType"];
+    "nodes:created": ICoreState["nodes"];
+    "nodes:deleted": string[];
 };
 
 export declare type ToolType = "select" | "hand" | "rectangle" | "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, _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, _toolTypeChangeHandler, _RectNode_instances, 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();
     });
     /**
@@ -511,78 +510,21 @@ class CanvasState {
   }
 }
 const NODE_NAME_FOR_SELECT = "shapeNameForSelect";
-const RECT$1 = {
+const RECT = {
   CORNER_RADIUS: 6,
   MIN_SIZE: 10
 };
 const IMAGE = {
   MIN_SIZE: 10
 };
-const RECT = {
-  MIN_SIZE: 10
-};
-function calculatePerimeter(width, height, cornerRadius) {
-  return 2 * (height + width - cornerRadius * (4 - Math.PI));
-}
-function getDashValue(shapeLength, strokeWidth, lineStyle) {
-  let ratio = 1;
-  let dashLength = 0;
-  let dashGap = 0;
-  switch (lineStyle) {
-    case "dashed":
-      dashLength = Math.min(strokeWidth * 2, shapeLength / 4);
-      break;
-    case "dotted":
-      ratio = 8;
-      dashLength = strokeWidth / ratio;
-      break;
-    default:
-      return [];
-  }
-  let dashCount = Math.floor(shapeLength / dashLength / (2 * ratio));
-  dashCount = Math.max(dashCount, 3);
-  dashLength = shapeLength / dashCount / (2 * ratio);
-  dashGap = (shapeLength - dashCount * dashLength) / dashCount;
-  return [dashLength, dashGap];
-}
-function getSizeValue(key) {
-  switch (key) {
-    case "small":
-      return 2;
-    case "medium":
-      return 3;
-    case "large":
-      return 5;
-    case "extra-large":
-      return 8;
-    default:
-      return 3;
-  }
-}
-function getTotalDashLength(dash) {
-  return Array.isArray(dash) && dash.length > 1 ? dash[0] + dash[1] : 0;
-}
-function getRectSize(rect) {
-  return {
-    width: Math.max(RECT.MIN_SIZE, rect.width() * rect.scaleX()),
-    height: Math.max(RECT.MIN_SIZE, rect.height() * rect.scaleY())
-  };
-}
 class BaseCanvasNode {
   constructor(core, node) {
     __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,47 +538,31 @@ 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) {
-    return null;
-  }
-  const anim = new Konva.Animation((frame) => {
-    if (!frame) return;
-    const dashOffset = -frame.time / 10 % totalDashLength;
-    rect.dashOffset(dashOffset);
-  }, rect.getLayer());
+function getRectSize(rect) {
   return {
-    start: () => anim.start(),
-    stop: () => anim.stop(),
-    isRunning: () => anim.isRunning()
+    width: Math.max(RECT.MIN_SIZE, rect.width() * rect.scaleX()),
+    height: Math.max(RECT.MIN_SIZE, rect.height() * rect.scaleY())
   };
 }
 class RectNode extends BaseCanvasNode {
   constructor(core, node) {
     super(core, node);
     __privateAdd(this, _RectNode_instances);
-    __privateAdd(this, _animation, null);
-    if (node.style.animated) {
-      __privateMethod(this, _RectNode_instances, initAnimation_fn).call(this);
-    }
+    __privateAdd(this, _toolTypeChangeHandler, (toolType) => {
+      const isSelect = toolType === "select";
+      this.element.listening(isSelect);
+    });
     __privateMethod(this, _RectNode_instances, setupEventHandlers_fn).call(this, this.getElement());
   }
   createElement() {
     const width = Math.max(
-      this.node.props.width ?? RECT$1.MIN_SIZE,
-      RECT$1.MIN_SIZE
+      this.node.props.width ?? RECT.MIN_SIZE,
+      RECT.MIN_SIZE
     );
     const height = Math.max(
-      this.node.props.height ?? RECT$1.MIN_SIZE,
-      RECT$1.MIN_SIZE
+      this.node.props.height ?? RECT.MIN_SIZE,
+      RECT.MIN_SIZE
     );
     const config = {
       id: this.node.id,
@@ -644,7 +570,7 @@ class RectNode extends BaseCanvasNode {
       ...this.node.style,
       width,
       height,
-      cornerRadius: RECT$1.CORNER_RADIUS,
+      cornerRadius: RECT.CORNER_RADIUS,
       name: NODE_NAME_FOR_SELECT,
       draggable: true,
       stroke: "black",
@@ -683,76 +609,38 @@ class RectNode extends BaseCanvasNode {
     rect.x(this.node.props.x);
     rect.y(this.node.props.y);
     const width = Math.max(
-      this.node.props.width ?? RECT$1.MIN_SIZE,
-      RECT$1.MIN_SIZE
+      this.node.props.width ?? RECT.MIN_SIZE,
+      RECT.MIN_SIZE
     );
     const height = Math.max(
-      this.node.props.height ?? RECT$1.MIN_SIZE,
-      RECT$1.MIN_SIZE
+      this.node.props.height ?? RECT.MIN_SIZE,
+      RECT.MIN_SIZE
     );
     rect.width(width);
     rect.height(height);
-    if (this.node.style.animated && !__privateGet(this, _animation)) {
-      __privateMethod(this, _RectNode_instances, initAnimation_fn).call(this);
-    } else if (!this.node.style.animated && __privateGet(this, _animation)) {
-      __privateMethod(this, _RectNode_instances, destroyAnimation_fn).call(this);
-    }
   }
   /**
    * 销毁
    */
   destroy() {
-    __privateMethod(this, _RectNode_instances, destroyAnimation_fn).call(this);
-    super.destroy();
+    this.core.off("toolType:change", __privateGet(this, _toolTypeChangeHandler));
+    this.element.destroy();
   }
 }
-_animation = new WeakMap();
+_toolTypeChangeHandler = new WeakMap();
 _RectNode_instances = new WeakSet();
-/**
- * 初始化动画
- */
-initAnimation_fn = function() {
-  const rect = this.getElement();
-  const dash = rect.dash();
-  if (!dash || dash.length === 0) return;
-  const totalDashLength = getTotalDashLength(dash);
-  __privateSet(this, _animation, createRectAnimation(rect, totalDashLength));
-  if (__privateGet(this, _animation)) {
-    __privateGet(this, _animation).start();
-  }
-};
-/**
- * 销毁动画
- */
-destroyAnimation_fn = function() {
-  if (__privateGet(this, _animation)) {
-    __privateGet(this, _animation).stop();
-    __privateSet(this, _animation, null);
-  }
-};
 /**
  * 设置事件处理器
  */
-setupEventHandlers_fn = function(rect = void 0) {
-  const element = rect ?? this.getElement();
-  element.on("transformstart", () => {
-    if (this.node.style.animated && __privateGet(this, _animation)) {
-      __privateGet(this, _animation).stop();
-    }
-  });
+setupEventHandlers_fn = function(rect) {
+  const element = rect;
+  this.core.on("toolType:change", __privateGet(this, _toolTypeChangeHandler));
   element.on("transform", (event) => {
     const rect2 = event.target;
     const { width, height } = getRectSize(rect2);
-    const totalLength = calculatePerimeter(width, height, RECT$1.CORNER_RADIUS);
-    const dash = getDashValue(
-      totalLength,
-      getSizeValue(this.node.style.size),
-      this.node.style.line
-    );
     rect2.scale({ x: 1, y: 1 });
     rect2.width(width);
     rect2.height(height);
-    rect2.dash(dash.map((d) => d * this.core.getStageScale()));
   });
   element.on("transformend", (event) => {
     const rect2 = event.target;
@@ -769,9 +657,6 @@ setupEventHandlers_fn = function(rect = void 0) {
     this.core._syncNodeFromElement(this.node.id, {
       props: newProps
     });
-    if (this.node.style.animated && __privateGet(this, _animation)?.isRunning() === false) {
-      __privateGet(this, _animation).start();
-    }
   });
   element.on("dragend", (event) => {
     const rect2 = event.target;
@@ -790,6 +675,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 +742,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 +770,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());
@@ -1004,12 +896,12 @@ class ImageMarkerNode extends BaseCanvasNode {
   }
   createElement() {
     const width = Math.max(
-      this.node.props.width ?? RECT$1.MIN_SIZE,
-      RECT$1.MIN_SIZE
+      this.node.props.width ?? RECT.MIN_SIZE,
+      RECT.MIN_SIZE
     );
     const height = Math.max(
-      this.node.props.height ?? RECT$1.MIN_SIZE,
-      RECT$1.MIN_SIZE
+      this.node.props.height ?? RECT.MIN_SIZE,
+      RECT.MIN_SIZE
     );
     const group = new Konva.Group({
       id: this.node.id,
@@ -1017,7 +909,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",
@@ -1029,7 +922,7 @@ class ImageMarkerNode extends BaseCanvasNode {
       strokeWidth: 2,
       dash: [5, 5],
       fill: "transparent",
-      cornerRadius: RECT$1.CORNER_RADIUS
+      cornerRadius: RECT.CORNER_RADIUS
     });
     const markerGroup = new Konva.Group({
       name: "marker-group",
@@ -1091,12 +984,12 @@ class ImageMarkerNode extends BaseCanvasNode {
     group.x(this.node.props.x);
     group.y(this.node.props.y);
     const width = Math.max(
-      this.node.props.width ?? RECT$1.MIN_SIZE,
-      RECT$1.MIN_SIZE
+      this.node.props.width ?? RECT.MIN_SIZE,
+      RECT.MIN_SIZE
     );
     const height = Math.max(
-      this.node.props.height ?? RECT$1.MIN_SIZE,
-      RECT$1.MIN_SIZE
+      this.node.props.height ?? RECT.MIN_SIZE,
+      RECT.MIN_SIZE
     );
     group.width(width);
     group.height(height);
@@ -1115,7 +1008,7 @@ class ImageMarkerNode extends BaseCanvasNode {
    * 销毁
    */
   destroy() {
-    super.destroy();
+    this.element.destroy();
   }
   /**
    * 更新焦点状态（hover 或 selected）
@@ -1164,6 +1057,9 @@ function createCanvasNodeByType(core, type, config) {
       return null;
   }
 }
+function clamp(value, range) {
+  return Math.min(Math.max(value, range[0]), range[1]);
+}
 const createNodeByType = (type, position, style, meta) => {
   const baseNode = {
     type,
@@ -1182,7 +1078,10 @@ const createNodeByType = (type, position, style, meta) => {
       rotation: 0,
       visible: true
     },
-    meta: meta ?? {}
+    meta: {
+      ...meta,
+      startPoint: position
+    }
   };
   if (type === "image-marker") {
     return {
@@ -1196,27 +1095,34 @@ 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: {
         ...node.props,
         x: p1.x,
         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)
+        width: Math.max(p2.x - p1.x, RECT.MIN_SIZE),
+        height: Math.max(p2.y - p1.y, RECT.MIN_SIZE)
+      },
+      meta: {
+        ...node.meta,
+        // 保存初始起点，以便后续更新使用
+        startPoint
       }
     };
   }
@@ -1388,6 +1294,7 @@ class CanvasCore extends CanvasState {
       },
       true
     );
+    this.emit("nodes:created", nodes);
   }
   /**
    * 创建图片标注节点（内部使用）
@@ -1477,17 +1384,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);
   }
   /**
@@ -1807,6 +1713,7 @@ class CanvasApi extends CanvasCore {
       },
       true
     );
+    this.emit("nodes:deleted", Array.from(idsToDelete));
   }
   /**
    * 滚动到内容区域
@@ -1884,11 +1791,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 +2037,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, _toolTypeChangeHandler, _RectNode_instances, 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 {
@@ -375,10 +375,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     pointer-events: auto;
   }
 
-  .pointer-events-none {
-    pointer-events: none;
-  }
-
   .visible {
     visibility: visible;
   }
@@ -578,10 +574,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     touch-action: none;
   }
 
-  .resize {
-    resize: both;
-  }
-
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1588,7 +1580,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
        * 处理 transform 事件
        */
       __privateAdd(this, _handleTransform, () => {
-        console.log("transforming...");
         this.emitPositionChange();
       });
       /**
@@ -1830,78 +1821,21 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
   }
   const NODE_NAME_FOR_SELECT = "shapeNameForSelect";
-  const RECT$1 = {
+  const RECT = {
     CORNER_RADIUS: 6,
     MIN_SIZE: 10
   };
   const IMAGE = {
     MIN_SIZE: 10
   };
-  const RECT = {
-    MIN_SIZE: 10
-  };
-  function calculatePerimeter(width, height, cornerRadius) {
-    return 2 * (height + width - cornerRadius * (4 - Math.PI));
-  }
-  function getDashValue(shapeLength, strokeWidth, lineStyle) {
-    let ratio = 1;
-    let dashLength = 0;
-    let dashGap = 0;
-    switch (lineStyle) {
-      case "dashed":
-        dashLength = Math.min(strokeWidth * 2, shapeLength / 4);
-        break;
-      case "dotted":
-        ratio = 8;
-        dashLength = strokeWidth / ratio;
-        break;
-      default:
-        return [];
-    }
-    let dashCount = Math.floor(shapeLength / dashLength / (2 * ratio));
-    dashCount = Math.max(dashCount, 3);
-    dashLength = shapeLength / dashCount / (2 * ratio);
-    dashGap = (shapeLength - dashCount * dashLength) / dashCount;
-    return [dashLength, dashGap];
-  }
-  function getSizeValue(key) {
-    switch (key) {
-      case "small":
-        return 2;
-      case "medium":
-        return 3;
-      case "large":
-        return 5;
-      case "extra-large":
-        return 8;
-      default:
-        return 3;
-    }
-  }
-  function getTotalDashLength(dash) {
-    return Array.isArray(dash) && dash.length > 1 ? dash[0] + dash[1] : 0;
-  }
-  function getRectSize(rect) {
-    return {
-      width: Math.max(RECT.MIN_SIZE, rect.width() * rect.scaleX()),
-      height: Math.max(RECT.MIN_SIZE, rect.height() * rect.scaleY())
-    };
-  }
   class BaseCanvasNode {
     constructor(core, node) {
       __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,47 +1849,31 @@ 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) {
-      return null;
-    }
-    const anim = new Konva.Animation((frame) => {
-      if (!frame) return;
-      const dashOffset = -frame.time / 10 % totalDashLength;
-      rect.dashOffset(dashOffset);
-    }, rect.getLayer());
+  function getRectSize(rect) {
     return {
-      start: () => anim.start(),
-      stop: () => anim.stop(),
-      isRunning: () => anim.isRunning()
+      width: Math.max(RECT.MIN_SIZE, rect.width() * rect.scaleX()),
+      height: Math.max(RECT.MIN_SIZE, rect.height() * rect.scaleY())
     };
   }
   class RectNode extends BaseCanvasNode {
     constructor(core, node) {
       super(core, node);
       __privateAdd(this, _RectNode_instances);
-      __privateAdd(this, _animation, null);
-      if (node.style.animated) {
-        __privateMethod(this, _RectNode_instances, initAnimation_fn).call(this);
-      }
+      __privateAdd(this, _toolTypeChangeHandler, (toolType) => {
+        const isSelect = toolType === "select";
+        this.element.listening(isSelect);
+      });
       __privateMethod(this, _RectNode_instances, setupEventHandlers_fn).call(this, this.getElement());
     }
     createElement() {
       const width = Math.max(
-        this.node.props.width ?? RECT$1.MIN_SIZE,
-        RECT$1.MIN_SIZE
+        this.node.props.width ?? RECT.MIN_SIZE,
+        RECT.MIN_SIZE
       );
       const height = Math.max(
-        this.node.props.height ?? RECT$1.MIN_SIZE,
-        RECT$1.MIN_SIZE
+        this.node.props.height ?? RECT.MIN_SIZE,
+        RECT.MIN_SIZE
       );
       const config = {
         id: this.node.id,
@@ -1963,7 +1881,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         ...this.node.style,
         width,
         height,
-        cornerRadius: RECT$1.CORNER_RADIUS,
+        cornerRadius: RECT.CORNER_RADIUS,
         name: NODE_NAME_FOR_SELECT,
         draggable: true,
         stroke: "black",
@@ -2002,76 +1920,38 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       rect.x(this.node.props.x);
       rect.y(this.node.props.y);
       const width = Math.max(
-        this.node.props.width ?? RECT$1.MIN_SIZE,
-        RECT$1.MIN_SIZE
+        this.node.props.width ?? RECT.MIN_SIZE,
+        RECT.MIN_SIZE
       );
       const height = Math.max(
-        this.node.props.height ?? RECT$1.MIN_SIZE,
-        RECT$1.MIN_SIZE
+        this.node.props.height ?? RECT.MIN_SIZE,
+        RECT.MIN_SIZE
       );
       rect.width(width);
       rect.height(height);
-      if (this.node.style.animated && !__privateGet(this, _animation)) {
-        __privateMethod(this, _RectNode_instances, initAnimation_fn).call(this);
-      } else if (!this.node.style.animated && __privateGet(this, _animation)) {
-        __privateMethod(this, _RectNode_instances, destroyAnimation_fn).call(this);
-      }
     }
     /**
      * 销毁
      */
     destroy() {
-      __privateMethod(this, _RectNode_instances, destroyAnimation_fn).call(this);
-      super.destroy();
+      this.core.off("toolType:change", __privateGet(this, _toolTypeChangeHandler));
+      this.element.destroy();
     }
   }
-  _animation = new WeakMap();
+  _toolTypeChangeHandler = new WeakMap();
   _RectNode_instances = new WeakSet();
-  /**
-   * 初始化动画
-   */
-  initAnimation_fn = function() {
-    const rect = this.getElement();
-    const dash = rect.dash();
-    if (!dash || dash.length === 0) return;
-    const totalDashLength = getTotalDashLength(dash);
-    __privateSet(this, _animation, createRectAnimation(rect, totalDashLength));
-    if (__privateGet(this, _animation)) {
-      __privateGet(this, _animation).start();
-    }
-  };
-  /**
-   * 销毁动画
-   */
-  destroyAnimation_fn = function() {
-    if (__privateGet(this, _animation)) {
-      __privateGet(this, _animation).stop();
-      __privateSet(this, _animation, null);
-    }
-  };
   /**
    * 设置事件处理器
    */
-  setupEventHandlers_fn = function(rect = void 0) {
-    const element = rect ?? this.getElement();
-    element.on("transformstart", () => {
-      if (this.node.style.animated && __privateGet(this, _animation)) {
-        __privateGet(this, _animation).stop();
-      }
-    });
+  setupEventHandlers_fn = function(rect) {
+    const element = rect;
+    this.core.on("toolType:change", __privateGet(this, _toolTypeChangeHandler));
     element.on("transform", (event) => {
       const rect2 = event.target;
       const { width, height } = getRectSize(rect2);
-      const totalLength = calculatePerimeter(width, height, RECT$1.CORNER_RADIUS);
-      const dash = getDashValue(
-        totalLength,
-        getSizeValue(this.node.style.size),
-        this.node.style.line
-      );
       rect2.scale({ x: 1, y: 1 });
       rect2.width(width);
       rect2.height(height);
-      rect2.dash(dash.map((d) => d * this.core.getStageScale()));
     });
     element.on("transformend", (event) => {
       const rect2 = event.target;
@@ -2088,9 +1968,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this.core._syncNodeFromElement(this.node.id, {
         props: newProps
       });
-      if (this.node.style.animated && __privateGet(this, _animation)?.isRunning() === false) {
-        __privateGet(this, _animation).start();
-      }
     });
     element.on("dragend", (event) => {
       const rect2 = event.target;
@@ -2109,6 +1986,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 +2053,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 +2081,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());
@@ -2323,12 +2207,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     createElement() {
       const width = Math.max(
-        this.node.props.width ?? RECT$1.MIN_SIZE,
-        RECT$1.MIN_SIZE
+        this.node.props.width ?? RECT.MIN_SIZE,
+        RECT.MIN_SIZE
       );
       const height = Math.max(
-        this.node.props.height ?? RECT$1.MIN_SIZE,
-        RECT$1.MIN_SIZE
+        this.node.props.height ?? RECT.MIN_SIZE,
+        RECT.MIN_SIZE
       );
       const group = new Konva.Group({
         id: this.node.id,
@@ -2336,7 +2220,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",
@@ -2348,7 +2233,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         strokeWidth: 2,
         dash: [5, 5],
         fill: "transparent",
-        cornerRadius: RECT$1.CORNER_RADIUS
+        cornerRadius: RECT.CORNER_RADIUS
       });
       const markerGroup = new Konva.Group({
         name: "marker-group",
@@ -2410,12 +2295,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       group.x(this.node.props.x);
       group.y(this.node.props.y);
       const width = Math.max(
-        this.node.props.width ?? RECT$1.MIN_SIZE,
-        RECT$1.MIN_SIZE
+        this.node.props.width ?? RECT.MIN_SIZE,
+        RECT.MIN_SIZE
       );
       const height = Math.max(
-        this.node.props.height ?? RECT$1.MIN_SIZE,
-        RECT$1.MIN_SIZE
+        this.node.props.height ?? RECT.MIN_SIZE,
+        RECT.MIN_SIZE
       );
       group.width(width);
       group.height(height);
@@ -2434,7 +2319,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
      * 销毁
      */
     destroy() {
-      super.destroy();
+      this.element.destroy();
     }
     /**
      * 更新焦点状态（hover 或 selected）
@@ -2483,6 +2368,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         return null;
     }
   }
+  function clamp(value, range) {
+    return Math.min(Math.max(value, range[0]), range[1]);
+  }
   const createNodeByType = (type, position, style, meta) => {
     const baseNode = {
       type,
@@ -2501,7 +2389,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,27 +2406,34 @@ 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: {
           ...node.props,
           x: p1.x,
           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)
+          width: Math.max(p2.x - p1.x, RECT.MIN_SIZE),
+          height: Math.max(p2.y - p1.y, RECT.MIN_SIZE)
+        },
+        meta: {
+          ...node.meta,
+          // 保存初始起点，以便后续更新使用
+          startPoint
         }
       };
     }
@@ -2707,6 +2605,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         },
         true
       );
+      this.emit("nodes:created", nodes);
     }
     /**
      * 创建图片标注节点（内部使用）
@@ -2796,17 +2695,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);
     }
     /**
@@ -3126,6 +3024,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         },
         true
       );
+      this.emit("nodes:deleted", Array.from(idsToDelete));
     }
     /**
      * 滚动到内容区域
@@ -3203,11 +3102,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 +3348,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.9",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.js",