@8btc/whiteboard 0.0.11 → 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

@@ -1588,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;
+  }
   /**
    * 更新视口位置
    */
@@ -1672,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);
     }
@@ -2899,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;
+    }
     /**
      * 更新视口位置
      */
@@ -2983,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.11",
+  "version": "0.0.12",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.js",