@8btc/whiteboard 0.0.13 → 0.0.15

package/dist/index.d.ts

@@ -73,6 +73,14 @@ export declare class CanvasApi extends CanvasCore {
      * @returns 被删除的节点数据数组
      */
     deleteNodes(nodeIds: string[]): INode[];
+    /**
+     * 将节点移动到最上层
+     */
+    moveNodesToTop(nodeIds: string[]): void;
+    /**
+     * 将节点移动到最下层
+     */
+    moveNodesToBottom(nodeIds: string[]): void;
     /**
      * 滚动到内容区域
      * - 如果提供了 nodeIds，将指定的节点居中显示

package/dist/index.js

@@ -691,13 +691,18 @@ class ImageNode extends BaseCanvasNode {
     __privateMethod(this, _ImageNode_instances, setupEventHandlers_fn2).call(this, this.getElement());
   }
   createElement() {
+    const width = this.node.props.width || IMAGE.MIN_SIZE;
+    const height = this.node.props.height || IMAGE.MIN_SIZE;
     const placeholder = document.createElement("canvas");
-    placeholder.width = 1;
-    placeholder.height = 1;
+    placeholder.width = width;
+    placeholder.height = height;
     const img = new Konva.Image({
       id: this.node.id,
       x: this.node.props.x,
       y: this.node.props.y,
+      width,
+      height,
+      rotation: this.node.props.rotation || 0,
       name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.selectable} ${NODE_NAMES.image}`,
       draggable: true,
       image: placeholder
@@ -924,7 +929,7 @@ class ImageMarkerNode extends BaseCanvasNode {
     );
     const group = new Konva.Group({
       id: this.node.id,
-      name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.imageMarker} ${this.node.meta.parent} ${NODE_NAMES.selectable}`,
+      name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.imageMarker} ${this.node.meta.parent}`,
       x: this.node.props.x,
       y: this.node.props.y,
       width,
@@ -1041,7 +1046,8 @@ class ImageMarkerNode extends BaseCanvasNode {
    * 更新焦点状态（hover 或 selected）
    */
   setFocusState(isFocus) {
-    const strokeWidth = isFocus ? 4 : 3;
+    const stageScale = this.core.getStageScale();
+    const strokeWidth = isFocus ? 4 / stageScale : 3 / stageScale;
     const scale = isFocus ? 1.2 : 1;
     __privateGet(this, _rect).strokeWidth(strokeWidth);
     __privateGet(this, _circle).strokeWidth(strokeWidth);
@@ -1833,7 +1839,8 @@ class CanvasApi extends CanvasCore {
    * 如果删除的是 image 节点，会同步删除所有关联的 image-marker
    */
   deleteSelectedNodes() {
-    super.deleteSelectedNodes();
+    const selectedNodeIds = this.getState().selectedNodeIds || [];
+    this.deleteNodes(selectedNodeIds);
   }
   /**
    * 删除指定的节点
@@ -1844,6 +1851,30 @@ class CanvasApi extends CanvasCore {
   deleteNodes(nodeIds) {
     return super.deleteNodes(nodeIds);
   }
+  /**
+   * 将节点移动到最上层
+   */
+  moveNodesToTop(nodeIds) {
+    if (nodeIds.length === 0) return;
+    nodeIds.forEach((id) => {
+      const shape = this.getStage().findOne(`#${id}`);
+      if (shape) {
+        shape.moveToTop();
+      }
+    });
+  }
+  /**
+   * 将节点移动到最下层
+   */
+  moveNodesToBottom(nodeIds) {
+    if (nodeIds.length === 0) return;
+    nodeIds.forEach((id) => {
+      const shape = this.getStage().findOne(`#${id}`);
+      if (shape) {
+        shape.moveToBottom();
+      }
+    });
+  }
   /**
    * 滚动到内容区域
    * - 如果提供了 nodeIds，将指定的节点居中显示

package/dist/index.umd.js

@@ -2008,13 +2008,18 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __privateMethod(this, _ImageNode_instances, setupEventHandlers_fn2).call(this, this.getElement());
     }
     createElement() {
+      const width = this.node.props.width || IMAGE.MIN_SIZE;
+      const height = this.node.props.height || IMAGE.MIN_SIZE;
       const placeholder = document.createElement("canvas");
-      placeholder.width = 1;
-      placeholder.height = 1;
+      placeholder.width = width;
+      placeholder.height = height;
       const img = new Konva.Image({
         id: this.node.id,
         x: this.node.props.x,
         y: this.node.props.y,
+        width,
+        height,
+        rotation: this.node.props.rotation || 0,
         name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.selectable} ${NODE_NAMES.image}`,
         draggable: true,
         image: placeholder
@@ -2241,7 +2246,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       );
       const group = new Konva.Group({
         id: this.node.id,
-        name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.imageMarker} ${this.node.meta.parent} ${NODE_NAMES.selectable}`,
+        name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.imageMarker} ${this.node.meta.parent}`,
         x: this.node.props.x,
         y: this.node.props.y,
         width,
@@ -2358,7 +2363,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
      * 更新焦点状态（hover 或 selected）
      */
     setFocusState(isFocus) {
-      const strokeWidth = isFocus ? 4 : 3;
+      const stageScale = this.core.getStageScale();
+      const strokeWidth = isFocus ? 4 / stageScale : 3 / stageScale;
       const scale = isFocus ? 1.2 : 1;
       __privateGet(this, _rect).strokeWidth(strokeWidth);
       __privateGet(this, _circle).strokeWidth(strokeWidth);
@@ -3150,7 +3156,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
      * 如果删除的是 image 节点，会同步删除所有关联的 image-marker
      */
     deleteSelectedNodes() {
-      super.deleteSelectedNodes();
+      const selectedNodeIds = this.getState().selectedNodeIds || [];
+      this.deleteNodes(selectedNodeIds);
     }
     /**
      * 删除指定的节点
@@ -3161,6 +3168,30 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     deleteNodes(nodeIds) {
       return super.deleteNodes(nodeIds);
     }
+    /**
+     * 将节点移动到最上层
+     */
+    moveNodesToTop(nodeIds) {
+      if (nodeIds.length === 0) return;
+      nodeIds.forEach((id) => {
+        const shape = this.getStage().findOne(`#${id}`);
+        if (shape) {
+          shape.moveToTop();
+        }
+      });
+    }
+    /**
+     * 将节点移动到最下层
+     */
+    moveNodesToBottom(nodeIds) {
+      if (nodeIds.length === 0) return;
+      nodeIds.forEach((id) => {
+        const shape = this.getStage().findOne(`#${id}`);
+        if (shape) {
+          shape.moveToBottom();
+        }
+      });
+    }
     /**
      * 滚动到内容区域
      * - 如果提供了 nodeIds，将指定的节点居中显示

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@8btc/whiteboard",
   "private": false,
-  "version": "0.0.13",
+  "version": "0.0.15",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.js",
@@ -20,7 +20,7 @@
     "**/*.css"
   ],
   "scripts": {
-    "dev": "vite --port 6999",
+    "dev": "vite --port 6999 --host",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",