@8btc/whiteboard 0.0.10 → 0.0.12

package/dist/index.css

@@ -54,6 +54,8 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     --color-red-500: oklch(63.7% .237 25.331);
     --color-red-600: oklch(57.7% .245 27.325);
+    --color-orange-500: oklch(70.5% .213 47.604);
+    --color-orange-600: oklch(64.6% .222 41.116);
     --color-green-500: oklch(72.3% .219 149.579);
     --color-green-600: oklch(62.7% .194 149.214);
     --color-cyan-500: oklch(71.5% .143 215.221);
@@ -643,6 +645,10 @@
     background-color: var(--color-indigo-500);
   }
 
+  .bg-orange-500 {
+    background-color: var(--color-orange-500);
+  }
+
   .bg-primary {
     background-color: var(--primary);
   }
@@ -820,6 +826,10 @@
       background-color: var(--color-indigo-600);
     }
 
+    .hover\:bg-orange-600:hover {
+      background-color: var(--color-orange-600);
+    }
+
     .hover\:bg-primary\/90:hover {
       background-color: var(--primary);
     }

package/dist/index.d.ts

@@ -19,6 +19,10 @@ export declare class CanvasApi extends CanvasCore {
      * 如果你不知道自己在干什么，请使用更高层的封装方法，如 createImageNode
      */
     createNodes(nodes: INode[]): void;
+    /**
+     * 根据 ID 获取节点
+     */
+    getNodeById<T extends INode = INode>(id: string): T | null;
     /**
      * 更新视口位置
      */
@@ -51,6 +55,12 @@ export declare class CanvasApi extends CanvasCore {
         quality?: number;
         padding?: number;
     }): string | null;
+    /**
+     * 导出带有标注的图片节点为图片
+     * @param id - 图片节点 ID
+     * @returns DataURL 格式的图片数据，如果节点不存在则返回 null
+     */
+    exportImageWithMarker(id: string): string | null;
     /**
      * 删除当前选中的节点
      * 如果删除的是 image 节点，会同步删除所有关联的 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());
   }
@@ -1586,6 +1588,14 @@ class CanvasApi extends CanvasCore {
   createNodes(nodes) {
     super.createNodes(nodes);
   }
+  /**
+   * 根据 ID 获取节点
+   */
+  getNodeById(id) {
+    const nodes = this.getState().nodes || [];
+    const node = nodes.find((n) => n.id === id);
+    return node || null;
+  }
   /**
    * 更新视口位置
    */
@@ -1670,6 +1680,42 @@ class CanvasApi extends CanvasCore {
       transformer.visible(transformerVisible);
     }
   }
+  /**
+   * 导出带有标注的图片节点为图片
+   * @param id - 图片节点 ID
+   * @returns DataURL 格式的图片数据，如果节点不存在则返回 null
+   */
+  exportImageWithMarker(id) {
+    const imageShape = this.getStage().findOne(`#${id}`);
+    if (!imageShape) {
+      console.warn("Image shape not found on stage");
+      return null;
+    }
+    const nodes = this.getState().nodes || [];
+    const markerNodes = nodes.filter(
+      (n) => n.type === "image-marker" && n.meta.parent === id
+    );
+    const tempGroup = new Konva.Group();
+    const imageClone = imageShape.clone();
+    tempGroup.add(imageClone);
+    markerNodes.forEach((markerNode) => {
+      const markerShape = this.getStage().findOne(`#${markerNode.id}`);
+      if (markerShape) {
+        const markerClone = markerShape.clone();
+        tempGroup.add(markerClone);
+      }
+    });
+    const box = tempGroup.getClientRect();
+    const dataURL = tempGroup.toDataURL({
+      x: box.x,
+      y: box.y,
+      width: box.width,
+      height: box.height,
+      pixelRatio: 2
+    });
+    tempGroup.destroy();
+    return dataURL;
+  }
   /**
    * 删除当前选中的节点
    * 如果删除的是 image 节点，会同步删除所有关联的 image-marker

package/dist/index.umd.js

@@ -71,6 +71,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     --color-red-500: oklch(63.7% .237 25.331);
     --color-red-600: oklch(57.7% .245 27.325);
+    --color-orange-500: oklch(70.5% .213 47.604);
+    --color-orange-600: oklch(64.6% .222 41.116);
     --color-green-500: oklch(72.3% .219 149.579);
     --color-green-600: oklch(62.7% .194 149.214);
     --color-cyan-500: oklch(71.5% .143 215.221);
@@ -660,6 +662,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     background-color: var(--color-indigo-500);
   }
 
+  .bg-orange-500 {
+    background-color: var(--color-orange-500);
+  }
+
   .bg-primary {
     background-color: var(--primary);
   }
@@ -837,6 +843,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       background-color: var(--color-indigo-600);
     }
 
+    .hover\\:bg-orange-600:hover {
+      background-color: var(--color-orange-600);
+    }
+
     .hover\\:bg-primary\\/90:hover {
       background-color: var(--primary);
     }
@@ -1829,12 +1839,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 +1869,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 +1995,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 +2203,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 +2228,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 +2244,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 +2338,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 +2369,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 +2607,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 +2678,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 layer = __privateGet(this, _mainLayer);
+      const shapes = layer.getChildren();
+      const filteredShapes = shapes.filter(
+        (shape) => !shape.name().includes("imageMarker")
       );
-      const originalListeningStates = imageShapes.map(
-        (shape) => shape.listening()
-      );
-      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 +2706,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());
     }
@@ -2897,6 +2909,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     createNodes(nodes) {
       super.createNodes(nodes);
     }
+    /**
+     * 根据 ID 获取节点
+     */
+    getNodeById(id) {
+      const nodes = this.getState().nodes || [];
+      const node = nodes.find((n) => n.id === id);
+      return node || null;
+    }
     /**
      * 更新视口位置
      */
@@ -2981,6 +3001,42 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         transformer.visible(transformerVisible);
       }
     }
+    /**
+     * 导出带有标注的图片节点为图片
+     * @param id - 图片节点 ID
+     * @returns DataURL 格式的图片数据，如果节点不存在则返回 null
+     */
+    exportImageWithMarker(id) {
+      const imageShape = this.getStage().findOne(`#${id}`);
+      if (!imageShape) {
+        console.warn("Image shape not found on stage");
+        return null;
+      }
+      const nodes = this.getState().nodes || [];
+      const markerNodes = nodes.filter(
+        (n) => n.type === "image-marker" && n.meta.parent === id
+      );
+      const tempGroup = new Konva.Group();
+      const imageClone = imageShape.clone();
+      tempGroup.add(imageClone);
+      markerNodes.forEach((markerNode) => {
+        const markerShape = this.getStage().findOne(`#${markerNode.id}`);
+        if (markerShape) {
+          const markerClone = markerShape.clone();
+          tempGroup.add(markerClone);
+        }
+      });
+      const box = tempGroup.getClientRect();
+      const dataURL = tempGroup.toDataURL({
+        x: box.x,
+        y: box.y,
+        width: box.width,
+        height: box.height,
+        pixelRatio: 2
+      });
+      tempGroup.destroy();
+      return dataURL;
+    }
     /**
      * 删除当前选中的节点
      * 如果删除的是 image 节点，会同步删除所有关联的 image-marker

package/package.json

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