@8btc/whiteboard 0.0.8 → 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, _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 _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";
@@ -510,66 +510,13 @@ 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 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));
-}
-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");
@@ -592,43 +539,30 @@ class BaseCanvasNode {
     return this.node;
   }
 }
-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);
     __privateAdd(this, _toolTypeChangeHandler, (toolType) => {
       const isSelect = toolType === "select";
       this.element.listening(isSelect);
     });
-    if (node.style.animated) {
-      __privateMethod(this, _RectNode_instances, initAnimation_fn).call(this);
-    }
     __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,
@@ -636,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",
@@ -675,79 +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() {
     this.core.off("toolType:change", __privateGet(this, _toolTypeChangeHandler));
-    __privateMethod(this, _RectNode_instances, destroyAnimation_fn).call(this);
     this.element.destroy();
   }
 }
-_animation = 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);
-  }
-};
 _toolTypeChangeHandler = new WeakMap();
+_RectNode_instances = new WeakSet();
 /**
  * 设置事件处理器
  */
 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();
-    }
-  });
   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;
@@ -764,9 +657,6 @@ setupEventHandlers_fn = function(rect) {
     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;
@@ -1006,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,
@@ -1032,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",
@@ -1094,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);
@@ -1167,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,
@@ -1223,8 +1116,8 @@ function updateNodeByType(node, position) {
         ...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,
@@ -1401,6 +1294,7 @@ class CanvasCore extends CanvasState {
       },
       true
     );
+    this.emit("nodes:created", nodes);
   }
   /**
    * 创建图片标注节点（内部使用）
@@ -1819,6 +1713,7 @@ class CanvasApi extends CanvasCore {
       },
       true
     );
+    this.emit("nodes:deleted", Array.from(idsToDelete));
   }
   /**
    * 滚动到内容区域

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, _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 _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));
   }
@@ -1829,66 +1821,13 @@ 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 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));
-  }
-  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");
@@ -1911,43 +1850,30 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       return this.node;
     }
   }
-  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);
       __privateAdd(this, _toolTypeChangeHandler, (toolType) => {
         const isSelect = toolType === "select";
         this.element.listening(isSelect);
       });
-      if (node.style.animated) {
-        __privateMethod(this, _RectNode_instances, initAnimation_fn).call(this);
-      }
       __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,
@@ -1955,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",
@@ -1994,79 +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() {
       this.core.off("toolType:change", __privateGet(this, _toolTypeChangeHandler));
-      __privateMethod(this, _RectNode_instances, destroyAnimation_fn).call(this);
       this.element.destroy();
     }
   }
-  _animation = 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);
-    }
-  };
   _toolTypeChangeHandler = new WeakMap();
+  _RectNode_instances = new WeakSet();
   /**
    * 设置事件处理器
    */
   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();
-      }
-    });
     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;
@@ -2083,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;
@@ -2325,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,
@@ -2351,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",
@@ -2413,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);
@@ -2486,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,
@@ -2542,8 +2427,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           ...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,
@@ -2720,6 +2605,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         },
         true
       );
+      this.emit("nodes:created", nodes);
     }
     /**
      * 创建图片标注节点（内部使用）
@@ -3138,6 +3024,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         },
         true
       );
+      this.emit("nodes:deleted", Array.from(idsToDelete));
     }
     /**
      * 滚动到内容区域

package/package.json

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