@8btc/whiteboard 0.0.9 → 0.0.11

package/dist/index.d.ts

@@ -60,8 +60,9 @@ export declare class CanvasApi extends CanvasCore {
      * 删除指定的节点
      * 如果删除的是 image 节点，会同步删除所有关联的 image-marker
      * @param nodeIds - 要删除的节点 ID 数组
+     * @returns 被删除的节点数据数组
      */
-    deleteNodes(nodeIds: string[]): void;
+    deleteNodes(nodeIds: string[]): INode[];
     /**
      * 滚动到内容区域
      * - 如果提供了 nodeIds，将指定的节点居中显示
@@ -386,7 +387,7 @@ declare type StateEvents = {
     "transformer:positionChange": TransformerPosition | null;
     "toolType:change": ICoreState["toolType"];
     "nodes:created": ICoreState["nodes"];
-    "nodes:deleted": string[];
+    "nodes:deleted": INode[];
 };
 
 export declare type ToolType = "select" | "hand" | "rectangle" | "image-marker";

package/dist/index.js

@@ -518,12 +518,14 @@ const IMAGE = {
   MIN_SIZE: 10
 };
 class BaseCanvasNode {
-  constructor(core, node) {
+  constructor(core, node, isDraft = false) {
     __publicField(this, "core");
     __publicField(this, "node");
     __publicField(this, "element");
+    __publicField(this, "isDraft");
     this.core = core;
     this.node = node;
+    this.isDraft = isDraft;
     this.element = this.createElement();
   }
   /**
@@ -546,8 +548,8 @@ function getRectSize(rect) {
   };
 }
 class RectNode extends BaseCanvasNode {
-  constructor(core, node) {
-    super(core, node);
+  constructor(core, node, isDraft = false) {
+    super(core, node, isDraft);
     __privateAdd(this, _RectNode_instances);
     __privateAdd(this, _toolTypeChangeHandler, (toolType) => {
       const isSelect = toolType === "select";
@@ -672,8 +674,8 @@ setupEventHandlers_fn = function(rect) {
   });
 };
 class ImageNode extends BaseCanvasNode {
-  constructor(core, node) {
-    super(core, node);
+  constructor(core, node, isDraft = false) {
+    super(core, node, isDraft);
     __privateAdd(this, _ImageNode_instances);
     __privateAdd(this, _toolTypeChangeHandler2, (toolType) => {
       const isSelect = toolType === "select";
@@ -880,8 +882,8 @@ syncImageMarkersToState_fn = function() {
   });
 };
 class ImageMarkerNode extends BaseCanvasNode {
-  constructor(core, node) {
-    super(core, node);
+  constructor(core, node, isDraft = false) {
+    super(core, node, isDraft);
     __privateAdd(this, _ImageMarkerNode_instances);
     __privateAdd(this, _rect);
     __privateAdd(this, _markerGroup);
@@ -905,12 +907,11 @@ class ImageMarkerNode extends BaseCanvasNode {
     );
     const group = new Konva.Group({
       id: this.node.id,
-      name: `static ${this.node.meta.parent}`,
+      name: `static ${this.node.meta.parent} imageMarker`,
       x: this.node.props.x,
       y: this.node.props.y,
       width,
-      height,
-      listening: false
+      height
     });
     const rect = new Konva.Rect({
       name: "rect",
@@ -922,12 +923,14 @@ class ImageMarkerNode extends BaseCanvasNode {
       strokeWidth: 2,
       dash: [5, 5],
       fill: "transparent",
-      cornerRadius: RECT.CORNER_RADIUS
+      cornerRadius: RECT.CORNER_RADIUS,
+      listening: false
     });
     const markerGroup = new Konva.Group({
       name: "marker-group",
       x: width,
-      y: height
+      y: height,
+      visible: this.isDraft ? false : true
     });
     const stageScale = this.core.getStageScale();
     const radius = 16 / stageScale;
@@ -1014,7 +1017,7 @@ class ImageMarkerNode extends BaseCanvasNode {
    * 更新焦点状态（hover 或 selected）
    */
   setFocusState(isFocus) {
-    const strokeWidth = isFocus ? 3 : 2;
+    const strokeWidth = isFocus ? 4 : 2;
     const scale = isFocus ? 1.2 : 1;
     __privateGet(this, _rect).strokeWidth(strokeWidth);
     __privateGet(this, _circle).strokeWidth(strokeWidth);
@@ -1045,14 +1048,14 @@ setupEventHandlers_fn3 = function() {
     this.core.selectNode(this.node.id);
   });
 };
-function createCanvasNodeByType(core, type, config) {
+function createCanvasNodeByType(core, type, config, isDraft = false) {
   switch (type) {
     case "rectangle":
-      return new RectNode(core, config);
+      return new RectNode(core, config, isDraft);
     case "image":
-      return new ImageNode(core, config);
+      return new ImageNode(core, config, isDraft);
     case "image-marker":
-      return new ImageMarkerNode(core, config);
+      return new ImageMarkerNode(core, config, isDraft);
     default:
       return null;
   }
@@ -1283,7 +1286,7 @@ class CanvasCore extends CanvasState {
     __privateGet(this, _canvasTransformer).emitPositionChange();
   }
   createNodes(nodes) {
-    const canvasNodes = nodes.map((node) => createCanvasNodeByType(this, node.type, node)).filter((node) => node !== null);
+    const canvasNodes = nodes.map((node) => createCanvasNodeByType(this, node.type, node, false)).filter((node) => node !== null);
     canvasNodes.forEach((node) => {
       __privateGet(this, _mainLayer).add(node.getElement());
     });
@@ -1354,26 +1357,25 @@ class CanvasCore extends CanvasState {
    * @internal 仅供内部使用
    */
   findImageAtPosition(position) {
-    const layer = __privateGet(this, _mainLayer).getLayer();
-    const imageShapes = layer.find(
-      (node) => node.getClassName() === "Image"
-    );
-    const originalListeningStates = imageShapes.map(
-      (shape) => shape.listening()
+    const layer = __privateGet(this, _mainLayer);
+    const shapes = layer.getChildren();
+    const filteredShapes = shapes.filter(
+      (shape) => !shape.name().includes("imageMarker")
     );
-    imageShapes.forEach((shape) => shape.listening(true));
-    layer.draw();
-    try {
-      const shape = layer.getIntersection(position);
-      if (shape?.getClassName() === "Image") {
-        return shape;
+    const sortedShapes = filteredShapes.slice().sort((a, b) => b.zIndex() - a.zIndex());
+    for (const shape of sortedShapes) {
+      const x = shape.x();
+      const y = shape.y();
+      const width = shape.width();
+      const height = shape.height();
+      if (position.x >= x && position.x <= x + width && position.y >= y && position.y <= y + height) {
+        if (shape.getClassName() === "Image") {
+          return shape;
+        }
+        return null;
       }
-      return null;
-    } finally {
-      imageShapes.forEach((shape, index) => {
-        shape.listening(originalListeningStates[index]);
-      });
     }
+    return null;
   }
   /**
    * @internal 仅供内部使用
@@ -1383,7 +1385,7 @@ class CanvasCore extends CanvasState {
       __privateGet(this, _draftNode).destroy();
     }
     const node = createNodeByType(type, position, void 0, meta);
-    __privateSet(this, _draftNode, createCanvasNodeByType(this, type, node));
+    __privateSet(this, _draftNode, createCanvasNodeByType(this, type, node, true));
     if (!__privateGet(this, _draftNode)) return;
     __privateGet(this, _mainLayer).add(__privateGet(this, _draftNode).getElement());
   }
@@ -1683,9 +1685,10 @@ class CanvasApi extends CanvasCore {
    * 删除指定的节点
    * 如果删除的是 image 节点，会同步删除所有关联的 image-marker
    * @param nodeIds - 要删除的节点 ID 数组
+   * @returns 被删除的节点数据数组
    */
   deleteNodes(nodeIds) {
-    if (nodeIds.length === 0) return;
+    if (nodeIds.length === 0) return [];
     const nodes = this.getState().nodes || [];
     const idsToDelete = new Set(nodeIds);
     nodeIds.forEach((id) => {
@@ -1698,6 +1701,7 @@ class CanvasApi extends CanvasCore {
         });
       }
     });
+    const deletedNodes = nodes.filter((n) => idsToDelete.has(n.id));
     idsToDelete.forEach((id) => {
       const shape = this.getStage().findOne(`#${id}`);
       if (shape) {
@@ -1713,7 +1717,8 @@ class CanvasApi extends CanvasCore {
       },
       true
     );
-    this.emit("nodes:deleted", Array.from(idsToDelete));
+    this.emit("nodes:deleted", deletedNodes);
+    return deletedNodes;
   }
   /**
    * 滚动到内容区域

package/dist/index.umd.js

@@ -1829,12 +1829,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     MIN_SIZE: 10
   };
   class BaseCanvasNode {
-    constructor(core, node) {
+    constructor(core, node, isDraft = false) {
       __publicField(this, "core");
       __publicField(this, "node");
       __publicField(this, "element");
+      __publicField(this, "isDraft");
       this.core = core;
       this.node = node;
+      this.isDraft = isDraft;
       this.element = this.createElement();
     }
     /**
@@ -1857,8 +1859,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     };
   }
   class RectNode extends BaseCanvasNode {
-    constructor(core, node) {
-      super(core, node);
+    constructor(core, node, isDraft = false) {
+      super(core, node, isDraft);
       __privateAdd(this, _RectNode_instances);
       __privateAdd(this, _toolTypeChangeHandler, (toolType) => {
         const isSelect = toolType === "select";
@@ -1983,8 +1985,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   };
   class ImageNode extends BaseCanvasNode {
-    constructor(core, node) {
-      super(core, node);
+    constructor(core, node, isDraft = false) {
+      super(core, node, isDraft);
       __privateAdd(this, _ImageNode_instances);
       __privateAdd(this, _toolTypeChangeHandler2, (toolType) => {
         const isSelect = toolType === "select";
@@ -2191,8 +2193,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   };
   class ImageMarkerNode extends BaseCanvasNode {
-    constructor(core, node) {
-      super(core, node);
+    constructor(core, node, isDraft = false) {
+      super(core, node, isDraft);
       __privateAdd(this, _ImageMarkerNode_instances);
       __privateAdd(this, _rect);
       __privateAdd(this, _markerGroup);
@@ -2216,12 +2218,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       );
       const group = new Konva.Group({
         id: this.node.id,
-        name: `static ${this.node.meta.parent}`,
+        name: `static ${this.node.meta.parent} imageMarker`,
         x: this.node.props.x,
         y: this.node.props.y,
         width,
-        height,
-        listening: false
+        height
       });
       const rect = new Konva.Rect({
         name: "rect",
@@ -2233,12 +2234,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         strokeWidth: 2,
         dash: [5, 5],
         fill: "transparent",
-        cornerRadius: RECT.CORNER_RADIUS
+        cornerRadius: RECT.CORNER_RADIUS,
+        listening: false
       });
       const markerGroup = new Konva.Group({
         name: "marker-group",
         x: width,
-        y: height
+        y: height,
+        visible: this.isDraft ? false : true
       });
       const stageScale = this.core.getStageScale();
       const radius = 16 / stageScale;
@@ -2325,7 +2328,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
      * 更新焦点状态（hover 或 selected）
      */
     setFocusState(isFocus) {
-      const strokeWidth = isFocus ? 3 : 2;
+      const strokeWidth = isFocus ? 4 : 2;
       const scale = isFocus ? 1.2 : 1;
       __privateGet(this, _rect).strokeWidth(strokeWidth);
       __privateGet(this, _circle).strokeWidth(strokeWidth);
@@ -2356,14 +2359,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this.core.selectNode(this.node.id);
     });
   };
-  function createCanvasNodeByType(core, type, config) {
+  function createCanvasNodeByType(core, type, config, isDraft = false) {
     switch (type) {
       case "rectangle":
-        return new RectNode(core, config);
+        return new RectNode(core, config, isDraft);
       case "image":
-        return new ImageNode(core, config);
+        return new ImageNode(core, config, isDraft);
       case "image-marker":
-        return new ImageMarkerNode(core, config);
+        return new ImageMarkerNode(core, config, isDraft);
       default:
         return null;
     }
@@ -2594,7 +2597,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __privateGet(this, _canvasTransformer).emitPositionChange();
     }
     createNodes(nodes) {
-      const canvasNodes = nodes.map((node) => createCanvasNodeByType(this, node.type, node)).filter((node) => node !== null);
+      const canvasNodes = nodes.map((node) => createCanvasNodeByType(this, node.type, node, false)).filter((node) => node !== null);
       canvasNodes.forEach((node) => {
         __privateGet(this, _mainLayer).add(node.getElement());
       });
@@ -2665,26 +2668,25 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
      * @internal 仅供内部使用
      */
     findImageAtPosition(position) {
-      const layer = __privateGet(this, _mainLayer).getLayer();
-      const imageShapes = layer.find(
-        (node) => node.getClassName() === "Image"
-      );
-      const originalListeningStates = imageShapes.map(
-        (shape) => shape.listening()
+      const layer = __privateGet(this, _mainLayer);
+      const shapes = layer.getChildren();
+      const filteredShapes = shapes.filter(
+        (shape) => !shape.name().includes("imageMarker")
       );
-      imageShapes.forEach((shape) => shape.listening(true));
-      layer.draw();
-      try {
-        const shape = layer.getIntersection(position);
-        if (shape?.getClassName() === "Image") {
-          return shape;
+      const sortedShapes = filteredShapes.slice().sort((a, b) => b.zIndex() - a.zIndex());
+      for (const shape of sortedShapes) {
+        const x = shape.x();
+        const y = shape.y();
+        const width = shape.width();
+        const height = shape.height();
+        if (position.x >= x && position.x <= x + width && position.y >= y && position.y <= y + height) {
+          if (shape.getClassName() === "Image") {
+            return shape;
+          }
+          return null;
         }
-        return null;
-      } finally {
-        imageShapes.forEach((shape, index) => {
-          shape.listening(originalListeningStates[index]);
-        });
       }
+      return null;
     }
     /**
      * @internal 仅供内部使用
@@ -2694,7 +2696,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         __privateGet(this, _draftNode).destroy();
       }
       const node = createNodeByType(type, position, void 0, meta);
-      __privateSet(this, _draftNode, createCanvasNodeByType(this, type, node));
+      __privateSet(this, _draftNode, createCanvasNodeByType(this, type, node, true));
       if (!__privateGet(this, _draftNode)) return;
       __privateGet(this, _mainLayer).add(__privateGet(this, _draftNode).getElement());
     }
@@ -2994,9 +2996,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
      * 删除指定的节点
      * 如果删除的是 image 节点，会同步删除所有关联的 image-marker
      * @param nodeIds - 要删除的节点 ID 数组
+     * @returns 被删除的节点数据数组
      */
     deleteNodes(nodeIds) {
-      if (nodeIds.length === 0) return;
+      if (nodeIds.length === 0) return [];
       const nodes = this.getState().nodes || [];
       const idsToDelete = new Set(nodeIds);
       nodeIds.forEach((id) => {
@@ -3009,6 +3012,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           });
         }
       });
+      const deletedNodes = nodes.filter((n) => idsToDelete.has(n.id));
       idsToDelete.forEach((id) => {
         const shape = this.getStage().findOne(`#${id}`);
         if (shape) {
@@ -3024,7 +3028,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         },
         true
       );
-      this.emit("nodes:deleted", Array.from(idsToDelete));
+      this.emit("nodes:deleted", deletedNodes);
+      return deletedNodes;
     }
     /**
      * 滚动到内容区域

package/package.json

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