@8btc/whiteboard 0.0.12 → 0.0.14

package/dist/index.css

@@ -372,10 +372,6 @@
     position: relative;
   }
 
-  .static {
-    position: static;
-  }
-
   .top-0 {
     top: calc(var(--spacing) * 0);
   }

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，将指定的节点居中显示
@@ -157,6 +165,8 @@ declare class CanvasCore extends CanvasState_2 {
     /* Excluded from this release type: updateDraftNode */
     /* Excluded from this release type: finalizeDraftNode */
     /* Excluded from this release type: selectNode */
+    /* Excluded from this release type: deleteNodes */
+    /* Excluded from this release type: deleteSelectedNodes */
     /**
      * 销毁 canvas
      */
@@ -367,7 +377,13 @@ declare interface IViewport {
     scale: number;
 }
 
-export declare const NODE_NAME_FOR_SELECT = "shapeNameForSelect";
+export declare const NODE_NAMES: {
+    nodeRoot: string;
+    selectable: string;
+    rect: string;
+    image: string;
+    imageMarker: string;
+};
 
 export declare type NodeType = "rectangle" | "image" | "image-marker";
 
@@ -394,10 +410,12 @@ declare type StateEvents = {
     "state:redo": ICoreState;
     "state:reset": ICoreState;
     "viewport:change": ICoreState["viewport"];
+    "viewport:scale:change": number;
     "transformer:positionChange": TransformerPosition | null;
     "toolType:change": ICoreState["toolType"];
     "nodes:created": ICoreState["nodes"];
     "nodes:deleted": INode[];
+    "nodes:selected": 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, _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 _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, _handleViewportChange, _handleNodesSelected, _ImageMarkerNode_instances, updateMarkerScale_fn, setupEventHandlers_fn3, _canvasStage, _mainLayer, _canvasTransformer, _draftNode, _container, _handleKeyDown, _CanvasCore_instances, setupKeyboardEvents_fn;
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from "react";
 import Konva from "konva";
@@ -509,7 +509,13 @@ class CanvasState {
     this._emitter.all.clear();
   }
 }
-const NODE_NAME_FOR_SELECT = "shapeNameForSelect";
+const NODE_NAMES = {
+  nodeRoot: "nodeRoot_intrinsic",
+  selectable: "selectable_intrinsic",
+  rect: "rect_intrinsic",
+  image: "image_intrinsic",
+  imageMarker: "image_marker_intrinsic"
+};
 const RECT = {
   CORNER_RADIUS: 6,
   MIN_SIZE: 10
@@ -573,7 +579,7 @@ class RectNode extends BaseCanvasNode {
       width,
       height,
       cornerRadius: RECT.CORNER_RADIUS,
-      name: NODE_NAME_FOR_SELECT,
+      name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.selectable} ${NODE_NAMES.rect}`,
       draggable: true,
       stroke: "black",
       strokeWidth: 2
@@ -692,7 +698,7 @@ class ImageNode extends BaseCanvasNode {
       id: this.node.id,
       x: this.node.props.x,
       y: this.node.props.y,
-      name: NODE_NAME_FOR_SELECT,
+      name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.selectable} ${NODE_NAMES.image}`,
       draggable: true,
       image: placeholder
     });
@@ -889,12 +895,23 @@ class ImageMarkerNode extends BaseCanvasNode {
     __privateAdd(this, _markerGroup);
     __privateAdd(this, _circle);
     __privateAdd(this, _text);
+    __privateAdd(this, _handleViewportChange);
+    __privateAdd(this, _handleNodesSelected);
     const group = this.getElement();
     __privateSet(this, _rect, group.findOne(".rect"));
     __privateSet(this, _markerGroup, group.findOne(".marker-group"));
     __privateSet(this, _circle, __privateGet(this, _markerGroup).findOne("Circle"));
     __privateSet(this, _text, __privateGet(this, _markerGroup).findOne("Text"));
     __privateMethod(this, _ImageMarkerNode_instances, setupEventHandlers_fn3).call(this);
+    __privateSet(this, _handleViewportChange, () => {
+      __privateMethod(this, _ImageMarkerNode_instances, updateMarkerScale_fn).call(this);
+    });
+    this.core.on("viewport:scale:change", __privateGet(this, _handleViewportChange));
+    __privateSet(this, _handleNodesSelected, (selectedIds) => {
+      const isSelected = selectedIds.includes(this.node.id);
+      this.setFocusState(isSelected);
+    });
+    this.core.on("nodes:selected", __privateGet(this, _handleNodesSelected));
   }
   createElement() {
     const width = Math.max(
@@ -907,23 +924,27 @@ class ImageMarkerNode extends BaseCanvasNode {
     );
     const group = new Konva.Group({
       id: this.node.id,
-      name: `static ${this.node.meta.parent} imageMarker`,
+      name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.imageMarker} ${this.node.meta.parent}`,
       x: this.node.props.x,
       y: this.node.props.y,
       width,
       height
     });
+    const stageScale = this.core.getStageScale();
+    const rectStrokeWidth = 2 / stageScale;
+    const rectDash = [5 / stageScale, 5 / stageScale];
+    const rectCornerRadius = RECT.CORNER_RADIUS / stageScale;
     const rect = new Konva.Rect({
       name: "rect",
       x: 0,
       y: 0,
       width,
       height,
-      stroke: this.node.style.color,
-      strokeWidth: 2,
-      dash: [5, 5],
+      stroke: "#3B82F6",
+      strokeWidth: rectStrokeWidth,
+      dash: rectDash,
       fill: "transparent",
-      cornerRadius: RECT.CORNER_RADIUS,
+      cornerRadius: rectCornerRadius,
       listening: false
     });
     const markerGroup = new Konva.Group({
@@ -932,13 +953,14 @@ class ImageMarkerNode extends BaseCanvasNode {
       y: height,
       visible: this.isDraft ? false : true
     });
-    const stageScale = this.core.getStageScale();
-    const radius = 16 / stageScale;
+    const radius = 14 / stageScale;
+    const strokeWidth = 3 / stageScale;
+    const fontSize = 16 / stageScale;
     const circle = new Konva.Circle({
       radius,
-      fill: "red",
-      stroke: "black",
-      strokeWidth: 2
+      fill: "#3B82F6",
+      stroke: "white",
+      strokeWidth
     });
     const text = new Konva.Text({
       x: -radius,
@@ -948,7 +970,7 @@ class ImageMarkerNode extends BaseCanvasNode {
       text: String(this.node.meta.markerNumber || ""),
       align: "center",
       verticalAlign: "middle",
-      fontSize: 16,
+      fontSize,
       fill: "white"
     });
     markerGroup.add(circle);
@@ -1011,13 +1033,16 @@ class ImageMarkerNode extends BaseCanvasNode {
    * 销毁
    */
   destroy() {
+    this.core.off("viewport:scale:change", __privateGet(this, _handleViewportChange));
+    this.core.off("nodes:selected", __privateGet(this, _handleNodesSelected));
     this.element.destroy();
   }
   /**
    * 更新焦点状态（hover 或 selected）
    */
   setFocusState(isFocus) {
-    const strokeWidth = isFocus ? 4 : 2;
+    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);
@@ -1029,7 +1054,31 @@ _rect = new WeakMap();
 _markerGroup = new WeakMap();
 _circle = new WeakMap();
 _text = new WeakMap();
+_handleViewportChange = new WeakMap();
+_handleNodesSelected = new WeakMap();
 _ImageMarkerNode_instances = new WeakSet();
+/**
+ * 更新标记点的缩放以保持视觉大小不变
+ */
+updateMarkerScale_fn = function() {
+  const stageScale = this.core.getStageScale();
+  const radius = 14 / stageScale;
+  const strokeWidth = 3 / stageScale;
+  const fontSize = 16 / stageScale;
+  const rectStrokeWidth = 3 / stageScale;
+  const rectDash = [5 / stageScale, 5 / stageScale];
+  const rectCornerRadius = RECT.CORNER_RADIUS / stageScale;
+  __privateGet(this, _rect).strokeWidth(rectStrokeWidth);
+  __privateGet(this, _rect).dash(rectDash);
+  __privateGet(this, _rect).cornerRadius(rectCornerRadius);
+  __privateGet(this, _circle).radius(radius);
+  __privateGet(this, _circle).strokeWidth(strokeWidth);
+  __privateGet(this, _text).x(-radius);
+  __privateGet(this, _text).y(-radius);
+  __privateGet(this, _text).width(radius * 2);
+  __privateGet(this, _text).height(radius * 2);
+  __privateGet(this, _text).fontSize(fontSize);
+};
 /**
  * 设置事件处理器
  */
@@ -1091,8 +1140,7 @@ const createNodeByType = (type, position, style, meta) => {
       ...baseNode,
       style: {
         ...baseNode.style,
-        color: "#ff0000",
-        line: "dashed"
+        color: "#3B82F6"
       }
     };
   }
@@ -1161,10 +1209,19 @@ class CanvasCore extends CanvasState {
       toolType: "select",
       nodes: []
     });
+    __privateAdd(this, _CanvasCore_instances);
     __privateAdd(this, _canvasStage);
     __privateAdd(this, _mainLayer);
     __privateAdd(this, _canvasTransformer);
     __privateAdd(this, _draftNode, null);
+    __privateAdd(this, _container);
+    __privateAdd(this, _handleKeyDown, (e) => {
+      if (e.key === "Delete" || e.key === "Backspace") {
+        e.preventDefault();
+        this.deleteSelectedNodes();
+      }
+    });
+    __privateSet(this, _container, el);
     __privateSet(this, _canvasStage, new CanvasStage(this, {
       container: el,
       width: el.clientWidth,
@@ -1177,6 +1234,7 @@ class CanvasCore extends CanvasState {
     __privateGet(this, _canvasStage).getStage().add(__privateGet(this, _mainLayer));
     __privateGet(this, _mainLayer).add(__privateGet(this, _canvasTransformer).getTransformer());
     this.updateViewport(this.getState().viewport, false);
+    __privateMethod(this, _CanvasCore_instances, setupKeyboardEvents_fn).call(this);
   }
   /**
    * 获取 CanvasStage 实例
@@ -1272,8 +1330,9 @@ class CanvasCore extends CanvasState {
    */
   updateViewport(viewport, addToHistory = false) {
     __privateGet(this, _canvasStage).setViewport(viewport);
+    const oldViewport = this.getState().viewport;
     const newViewport = {
-      ...this.getState().viewport,
+      ...oldViewport,
       ...viewport
     };
     this._updateState(
@@ -1283,6 +1342,9 @@ class CanvasCore extends CanvasState {
       addToHistory
     );
     this.emit("viewport:change", newViewport);
+    if (oldViewport.scale !== newViewport.scale) {
+      this.emit("viewport:scale:change", newViewport.scale);
+    }
     __privateGet(this, _canvasTransformer).emitPositionChange();
   }
   createNodes(nodes) {
@@ -1330,7 +1392,7 @@ class CanvasCore extends CanvasState {
         visible: true
       },
       style: {
-        color: "#ff0000",
+        color: "#3B82F6",
         line: "dashed",
         size: "medium",
         opacity: 1
@@ -1478,41 +1540,79 @@ class CanvasCore extends CanvasState {
    */
   selectNode(nodeId, multiSelect = false) {
     const curSelectedNodeIds = this.getState().selectedNodeIds ?? [];
-    if (curSelectedNodeIds.length === 0 && !nodeId) {
+    let selectedNodeIds = [];
+    if (nodeId) {
+      if (multiSelect && curSelectedNodeIds.length > 0) {
+        selectedNodeIds = [...curSelectedNodeIds, nodeId];
+      } else {
+        selectedNodeIds = [nodeId];
+      }
+    } else if (curSelectedNodeIds.length === 0) {
       return;
     }
-    if (!nodeId) {
+    if (selectedNodeIds.length === 0) {
       __privateGet(this, _canvasTransformer).clearNodes();
-      this._updateState(
-        {
-          selectedNodeIds: []
-        },
-        false
-      );
-      return;
-    }
-    let selectedNodeIds = [];
-    if (multiSelect) {
-      selectedNodeIds = curSelectedNodeIds.length ? [...curSelectedNodeIds, nodeId] : [nodeId];
     } else {
-      selectedNodeIds = [nodeId];
+      const nodes = this.getStage().find(`.${NODE_NAMES.selectable}`).filter((node) => selectedNodeIds.includes(node.id()));
+      __privateGet(this, _canvasTransformer).setNodes(nodes);
     }
-    const nodes = this.getStage().find(`.${NODE_NAME_FOR_SELECT}`).filter((node) => {
-      const id = node.id();
-      return selectedNodeIds.includes(id);
+    this._updateState({ selectedNodeIds }, false);
+    this.emit("nodes:selected", selectedNodeIds);
+  }
+  /**
+   * 删除指定的节点（内部使用）
+   * 如果删除的是 image 节点，会同步删除所有关联的 image-marker
+   * @internal 仅供内部使用，外部请使用 CanvasApi
+   * @param nodeIds - 要删除的节点 ID 数组
+   * @returns 被删除的节点数据数组
+   */
+  deleteNodes(nodeIds) {
+    if (nodeIds.length === 0) return [];
+    const nodes = this.getState().nodes || [];
+    const idsToDelete = new Set(nodeIds);
+    nodeIds.forEach((id) => {
+      const node = nodes.find((n) => n.id === id);
+      if (node?.type === "image") {
+        nodes.forEach((n) => {
+          if (n.type === "image-marker" && n.meta.parent === id) {
+            idsToDelete.add(n.id);
+          }
+        });
+      }
     });
-    __privateGet(this, _canvasTransformer).setNodes(nodes);
+    const deletedNodes = nodes.filter((n) => idsToDelete.has(n.id));
+    idsToDelete.forEach((id) => {
+      const shape = this.getStage().findOne(`#${id}`);
+      if (shape) {
+        shape.destroy();
+      }
+    });
+    const newNodes = nodes.filter((n) => !idsToDelete.has(n.id));
+    __privateGet(this, _canvasTransformer).clearNodes();
     this._updateState(
       {
-        selectedNodeIds
+        nodes: newNodes,
+        selectedNodeIds: []
       },
-      false
+      true
     );
+    this.emit("nodes:deleted", deletedNodes);
+    return deletedNodes;
+  }
+  /**
+   * 删除选中的节点（内部使用）
+   * @internal 仅供内部使用，外部请使用 CanvasApi
+   */
+  deleteSelectedNodes() {
+    const selectedNodeIds = this.getState().selectedNodeIds || [];
+    if (selectedNodeIds.length === 0) return;
+    this.deleteNodes(selectedNodeIds);
   }
   /**
    * 销毁 canvas
    */
   dispose() {
+    __privateGet(this, _container).removeEventListener("keydown", __privateGet(this, _handleKeyDown));
     this.getCanvasTransformer().destroy();
     this.getMainLayer().destroy();
     this.getCanvasStage().destroy();
@@ -1568,6 +1668,16 @@ _canvasStage = new WeakMap();
 _mainLayer = new WeakMap();
 _canvasTransformer = new WeakMap();
 _draftNode = new WeakMap();
+_container = new WeakMap();
+_handleKeyDown = new WeakMap();
+_CanvasCore_instances = new WeakSet();
+/**
+ * 设置键盘事件监听
+ */
+setupKeyboardEvents_fn = function() {
+  __privateGet(this, _container).tabIndex = 0;
+  __privateGet(this, _container).addEventListener("keydown", __privateGet(this, _handleKeyDown));
+};
 class CanvasApi extends CanvasCore {
   /**
    * 获取所有可用的工具类型
@@ -1656,29 +1766,32 @@ class CanvasApi extends CanvasCore {
    * @returns DataURL 格式的图片数据，如果没有选区则返回 null
    */
   exportSelectionAsImage(options) {
-    const position = this.getCanvasTransformer().getPosition();
-    if (!position) {
+    const selectedNodeIds = this.getState().selectedNodeIds || [];
+    if (selectedNodeIds.length === 0) {
       console.warn("No selection to export");
       return null;
     }
-    const stage = this.getStage();
     const padding = options?.padding ?? 0;
-    const transformer = this.getCanvasTransformer().getTransformer();
-    const transformerVisible = transformer.visible();
-    transformer.visible(false);
-    try {
-      return stage.toDataURL({
-        x: position.x - padding,
-        y: position.y - padding,
-        width: position.width + padding * 2,
-        height: position.height + padding * 2,
-        pixelRatio: options?.pixelRatio ?? 1,
-        mimeType: options?.mimeType ?? "image/png",
-        quality: options?.quality ?? 1
-      });
-    } finally {
-      transformer.visible(transformerVisible);
-    }
+    const tempGroup = new Konva.Group();
+    selectedNodeIds.forEach((id) => {
+      const shape = this.getStage().findOne(`#${id}`);
+      if (shape) {
+        const clone = shape.clone();
+        tempGroup.add(clone);
+      }
+    });
+    const box = tempGroup.getClientRect();
+    const dataURL = tempGroup.toDataURL({
+      x: box.x - padding,
+      y: box.y - padding,
+      width: box.width + padding * 2,
+      height: box.height + padding * 2,
+      pixelRatio: options?.pixelRatio ?? 2,
+      mimeType: options?.mimeType ?? "image/png",
+      quality: options?.quality ?? 1
+    });
+    tempGroup.destroy();
+    return dataURL;
   }
   /**
    * 导出带有标注的图片节点为图片
@@ -1722,7 +1835,6 @@ class CanvasApi extends CanvasCore {
    */
   deleteSelectedNodes() {
     const selectedNodeIds = this.getState().selectedNodeIds || [];
-    if (selectedNodeIds.length === 0) return;
     this.deleteNodes(selectedNodeIds);
   }
   /**
@@ -1732,37 +1844,31 @@ class CanvasApi extends CanvasCore {
    * @returns 被删除的节点数据数组
    */
   deleteNodes(nodeIds) {
-    if (nodeIds.length === 0) return [];
-    const nodes = this.getState().nodes || [];
-    const idsToDelete = new Set(nodeIds);
+    return super.deleteNodes(nodeIds);
+  }
+  /**
+   * 将节点移动到最上层
+   */
+  moveNodesToTop(nodeIds) {
+    if (nodeIds.length === 0) return;
     nodeIds.forEach((id) => {
-      const node = nodes.find((n) => n.id === id);
-      if (node?.type === "image") {
-        nodes.forEach((n) => {
-          if (n.type === "image-marker" && n.meta.parent === id) {
-            idsToDelete.add(n.id);
-          }
-        });
+      const shape = this.getStage().findOne(`#${id}`);
+      if (shape) {
+        shape.moveToTop();
       }
     });
-    const deletedNodes = nodes.filter((n) => idsToDelete.has(n.id));
-    idsToDelete.forEach((id) => {
+  }
+  /**
+   * 将节点移动到最下层
+   */
+  moveNodesToBottom(nodeIds) {
+    if (nodeIds.length === 0) return;
+    nodeIds.forEach((id) => {
       const shape = this.getStage().findOne(`#${id}`);
       if (shape) {
-        shape.destroy();
+        shape.moveToBottom();
       }
     });
-    const newNodes = nodes.filter((n) => !idsToDelete.has(n.id));
-    this.getCanvasTransformer().clearNodes();
-    this._updateState(
-      {
-        nodes: newNodes,
-        selectedNodeIds: []
-      },
-      true
-    );
-    this.emit("nodes:deleted", deletedNodes);
-    return deletedNodes;
   }
   /**
    * 滚动到内容区域
@@ -1790,7 +1896,7 @@ class CanvasApi extends CanvasCore {
     const hasSelection = !hasTargetIds && selectedNodeIds.length > 0;
     const idsToShow = hasTargetIds ? targetNodeIds : hasSelection ? selectedNodeIds : null;
     mainLayer.children.forEach((child) => {
-      if (child.visible() && child.getClassName() !== "Transformer" && child.hasName(NODE_NAME_FOR_SELECT)) {
+      if (child.visible() && child.getClassName() !== "Transformer" && child.hasName(NODE_NAMES.selectable)) {
         if (idsToShow) {
           const id = child.id();
           if (!idsToShow.includes(id)) return;
@@ -2108,6 +2214,6 @@ function PureCanvas({ setApi }) {
 }
 export {
   CanvasApi,
-  NODE_NAME_FOR_SELECT,
+  NODE_NAMES,
   PureCanvas
 };

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, _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 _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, _handleViewportChange, _handleNodesSelected, _ImageMarkerNode_instances, updateMarkerScale_fn, setupEventHandlers_fn3, _canvasStage, _mainLayer, _canvasTransformer, _draftNode, _container, _handleKeyDown, _CanvasCore_instances, setupKeyboardEvents_fn;
   var __vite_style__ = document.createElement("style");
   __vite_style__.textContent = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
 @layer properties {
@@ -389,10 +389,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     position: relative;
   }
 
-  .static {
-    position: static;
-  }
-
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -1830,7 +1826,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this._emitter.all.clear();
     }
   }
-  const NODE_NAME_FOR_SELECT = "shapeNameForSelect";
+  const NODE_NAMES = {
+    nodeRoot: "nodeRoot_intrinsic",
+    selectable: "selectable_intrinsic",
+    rect: "rect_intrinsic",
+    image: "image_intrinsic",
+    imageMarker: "image_marker_intrinsic"
+  };
   const RECT = {
     CORNER_RADIUS: 6,
     MIN_SIZE: 10
@@ -1894,7 +1896,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         width,
         height,
         cornerRadius: RECT.CORNER_RADIUS,
-        name: NODE_NAME_FOR_SELECT,
+        name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.selectable} ${NODE_NAMES.rect}`,
         draggable: true,
         stroke: "black",
         strokeWidth: 2
@@ -2013,7 +2015,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         id: this.node.id,
         x: this.node.props.x,
         y: this.node.props.y,
-        name: NODE_NAME_FOR_SELECT,
+        name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.selectable} ${NODE_NAMES.image}`,
         draggable: true,
         image: placeholder
       });
@@ -2210,12 +2212,23 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __privateAdd(this, _markerGroup);
       __privateAdd(this, _circle);
       __privateAdd(this, _text);
+      __privateAdd(this, _handleViewportChange);
+      __privateAdd(this, _handleNodesSelected);
       const group = this.getElement();
       __privateSet(this, _rect, group.findOne(".rect"));
       __privateSet(this, _markerGroup, group.findOne(".marker-group"));
       __privateSet(this, _circle, __privateGet(this, _markerGroup).findOne("Circle"));
       __privateSet(this, _text, __privateGet(this, _markerGroup).findOne("Text"));
       __privateMethod(this, _ImageMarkerNode_instances, setupEventHandlers_fn3).call(this);
+      __privateSet(this, _handleViewportChange, () => {
+        __privateMethod(this, _ImageMarkerNode_instances, updateMarkerScale_fn).call(this);
+      });
+      this.core.on("viewport:scale:change", __privateGet(this, _handleViewportChange));
+      __privateSet(this, _handleNodesSelected, (selectedIds) => {
+        const isSelected = selectedIds.includes(this.node.id);
+        this.setFocusState(isSelected);
+      });
+      this.core.on("nodes:selected", __privateGet(this, _handleNodesSelected));
     }
     createElement() {
       const width = Math.max(
@@ -2228,23 +2241,27 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       );
       const group = new Konva.Group({
         id: this.node.id,
-        name: `static ${this.node.meta.parent} imageMarker`,
+        name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.imageMarker} ${this.node.meta.parent}`,
         x: this.node.props.x,
         y: this.node.props.y,
         width,
         height
       });
+      const stageScale = this.core.getStageScale();
+      const rectStrokeWidth = 2 / stageScale;
+      const rectDash = [5 / stageScale, 5 / stageScale];
+      const rectCornerRadius = RECT.CORNER_RADIUS / stageScale;
       const rect = new Konva.Rect({
         name: "rect",
         x: 0,
         y: 0,
         width,
         height,
-        stroke: this.node.style.color,
-        strokeWidth: 2,
-        dash: [5, 5],
+        stroke: "#3B82F6",
+        strokeWidth: rectStrokeWidth,
+        dash: rectDash,
         fill: "transparent",
-        cornerRadius: RECT.CORNER_RADIUS,
+        cornerRadius: rectCornerRadius,
         listening: false
       });
       const markerGroup = new Konva.Group({
@@ -2253,13 +2270,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         y: height,
         visible: this.isDraft ? false : true
       });
-      const stageScale = this.core.getStageScale();
-      const radius = 16 / stageScale;
+      const radius = 14 / stageScale;
+      const strokeWidth = 3 / stageScale;
+      const fontSize = 16 / stageScale;
       const circle = new Konva.Circle({
         radius,
-        fill: "red",
-        stroke: "black",
-        strokeWidth: 2
+        fill: "#3B82F6",
+        stroke: "white",
+        strokeWidth
       });
       const text = new Konva.Text({
         x: -radius,
@@ -2269,7 +2287,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         text: String(this.node.meta.markerNumber || ""),
         align: "center",
         verticalAlign: "middle",
-        fontSize: 16,
+        fontSize,
         fill: "white"
       });
       markerGroup.add(circle);
@@ -2332,13 +2350,16 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
      * 销毁
      */
     destroy() {
+      this.core.off("viewport:scale:change", __privateGet(this, _handleViewportChange));
+      this.core.off("nodes:selected", __privateGet(this, _handleNodesSelected));
       this.element.destroy();
     }
     /**
      * 更新焦点状态（hover 或 selected）
      */
     setFocusState(isFocus) {
-      const strokeWidth = isFocus ? 4 : 2;
+      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);
@@ -2350,7 +2371,31 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   _markerGroup = new WeakMap();
   _circle = new WeakMap();
   _text = new WeakMap();
+  _handleViewportChange = new WeakMap();
+  _handleNodesSelected = new WeakMap();
   _ImageMarkerNode_instances = new WeakSet();
+  /**
+   * 更新标记点的缩放以保持视觉大小不变
+   */
+  updateMarkerScale_fn = function() {
+    const stageScale = this.core.getStageScale();
+    const radius = 14 / stageScale;
+    const strokeWidth = 3 / stageScale;
+    const fontSize = 16 / stageScale;
+    const rectStrokeWidth = 3 / stageScale;
+    const rectDash = [5 / stageScale, 5 / stageScale];
+    const rectCornerRadius = RECT.CORNER_RADIUS / stageScale;
+    __privateGet(this, _rect).strokeWidth(rectStrokeWidth);
+    __privateGet(this, _rect).dash(rectDash);
+    __privateGet(this, _rect).cornerRadius(rectCornerRadius);
+    __privateGet(this, _circle).radius(radius);
+    __privateGet(this, _circle).strokeWidth(strokeWidth);
+    __privateGet(this, _text).x(-radius);
+    __privateGet(this, _text).y(-radius);
+    __privateGet(this, _text).width(radius * 2);
+    __privateGet(this, _text).height(radius * 2);
+    __privateGet(this, _text).fontSize(fontSize);
+  };
   /**
    * 设置事件处理器
    */
@@ -2412,8 +2457,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         ...baseNode,
         style: {
           ...baseNode.style,
-          color: "#ff0000",
-          line: "dashed"
+          color: "#3B82F6"
         }
       };
     }
@@ -2482,10 +2526,19 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         toolType: "select",
         nodes: []
       });
+      __privateAdd(this, _CanvasCore_instances);
       __privateAdd(this, _canvasStage);
       __privateAdd(this, _mainLayer);
       __privateAdd(this, _canvasTransformer);
       __privateAdd(this, _draftNode, null);
+      __privateAdd(this, _container);
+      __privateAdd(this, _handleKeyDown, (e) => {
+        if (e.key === "Delete" || e.key === "Backspace") {
+          e.preventDefault();
+          this.deleteSelectedNodes();
+        }
+      });
+      __privateSet(this, _container, el);
       __privateSet(this, _canvasStage, new CanvasStage(this, {
         container: el,
         width: el.clientWidth,
@@ -2498,6 +2551,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __privateGet(this, _canvasStage).getStage().add(__privateGet(this, _mainLayer));
       __privateGet(this, _mainLayer).add(__privateGet(this, _canvasTransformer).getTransformer());
       this.updateViewport(this.getState().viewport, false);
+      __privateMethod(this, _CanvasCore_instances, setupKeyboardEvents_fn).call(this);
     }
     /**
      * 获取 CanvasStage 实例
@@ -2593,8 +2647,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
      */
     updateViewport(viewport, addToHistory = false) {
       __privateGet(this, _canvasStage).setViewport(viewport);
+      const oldViewport = this.getState().viewport;
       const newViewport = {
-        ...this.getState().viewport,
+        ...oldViewport,
         ...viewport
       };
       this._updateState(
@@ -2604,6 +2659,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         addToHistory
       );
       this.emit("viewport:change", newViewport);
+      if (oldViewport.scale !== newViewport.scale) {
+        this.emit("viewport:scale:change", newViewport.scale);
+      }
       __privateGet(this, _canvasTransformer).emitPositionChange();
     }
     createNodes(nodes) {
@@ -2651,7 +2709,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           visible: true
         },
         style: {
-          color: "#ff0000",
+          color: "#3B82F6",
           line: "dashed",
           size: "medium",
           opacity: 1
@@ -2799,41 +2857,79 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
      */
     selectNode(nodeId, multiSelect = false) {
       const curSelectedNodeIds = this.getState().selectedNodeIds ?? [];
-      if (curSelectedNodeIds.length === 0 && !nodeId) {
+      let selectedNodeIds = [];
+      if (nodeId) {
+        if (multiSelect && curSelectedNodeIds.length > 0) {
+          selectedNodeIds = [...curSelectedNodeIds, nodeId];
+        } else {
+          selectedNodeIds = [nodeId];
+        }
+      } else if (curSelectedNodeIds.length === 0) {
         return;
       }
-      if (!nodeId) {
+      if (selectedNodeIds.length === 0) {
         __privateGet(this, _canvasTransformer).clearNodes();
-        this._updateState(
-          {
-            selectedNodeIds: []
-          },
-          false
-        );
-        return;
-      }
-      let selectedNodeIds = [];
-      if (multiSelect) {
-        selectedNodeIds = curSelectedNodeIds.length ? [...curSelectedNodeIds, nodeId] : [nodeId];
       } else {
-        selectedNodeIds = [nodeId];
+        const nodes = this.getStage().find(`.${NODE_NAMES.selectable}`).filter((node) => selectedNodeIds.includes(node.id()));
+        __privateGet(this, _canvasTransformer).setNodes(nodes);
       }
-      const nodes = this.getStage().find(`.${NODE_NAME_FOR_SELECT}`).filter((node) => {
-        const id = node.id();
-        return selectedNodeIds.includes(id);
+      this._updateState({ selectedNodeIds }, false);
+      this.emit("nodes:selected", selectedNodeIds);
+    }
+    /**
+     * 删除指定的节点（内部使用）
+     * 如果删除的是 image 节点，会同步删除所有关联的 image-marker
+     * @internal 仅供内部使用，外部请使用 CanvasApi
+     * @param nodeIds - 要删除的节点 ID 数组
+     * @returns 被删除的节点数据数组
+     */
+    deleteNodes(nodeIds) {
+      if (nodeIds.length === 0) return [];
+      const nodes = this.getState().nodes || [];
+      const idsToDelete = new Set(nodeIds);
+      nodeIds.forEach((id) => {
+        const node = nodes.find((n) => n.id === id);
+        if (node?.type === "image") {
+          nodes.forEach((n) => {
+            if (n.type === "image-marker" && n.meta.parent === id) {
+              idsToDelete.add(n.id);
+            }
+          });
+        }
       });
-      __privateGet(this, _canvasTransformer).setNodes(nodes);
+      const deletedNodes = nodes.filter((n) => idsToDelete.has(n.id));
+      idsToDelete.forEach((id) => {
+        const shape = this.getStage().findOne(`#${id}`);
+        if (shape) {
+          shape.destroy();
+        }
+      });
+      const newNodes = nodes.filter((n) => !idsToDelete.has(n.id));
+      __privateGet(this, _canvasTransformer).clearNodes();
       this._updateState(
         {
-          selectedNodeIds
+          nodes: newNodes,
+          selectedNodeIds: []
         },
-        false
+        true
       );
+      this.emit("nodes:deleted", deletedNodes);
+      return deletedNodes;
+    }
+    /**
+     * 删除选中的节点（内部使用）
+     * @internal 仅供内部使用，外部请使用 CanvasApi
+     */
+    deleteSelectedNodes() {
+      const selectedNodeIds = this.getState().selectedNodeIds || [];
+      if (selectedNodeIds.length === 0) return;
+      this.deleteNodes(selectedNodeIds);
     }
     /**
      * 销毁 canvas
      */
     dispose() {
+      __privateGet(this, _container).removeEventListener("keydown", __privateGet(this, _handleKeyDown));
       this.getCanvasTransformer().destroy();
       this.getMainLayer().destroy();
       this.getCanvasStage().destroy();
@@ -2889,6 +2985,16 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   _mainLayer = new WeakMap();
   _canvasTransformer = new WeakMap();
   _draftNode = new WeakMap();
+  _container = new WeakMap();
+  _handleKeyDown = new WeakMap();
+  _CanvasCore_instances = new WeakSet();
+  /**
+   * 设置键盘事件监听
+   */
+  setupKeyboardEvents_fn = function() {
+    __privateGet(this, _container).tabIndex = 0;
+    __privateGet(this, _container).addEventListener("keydown", __privateGet(this, _handleKeyDown));
+  };
   class CanvasApi extends CanvasCore {
     /**
      * 获取所有可用的工具类型
@@ -2977,29 +3083,32 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
      * @returns DataURL 格式的图片数据，如果没有选区则返回 null
      */
     exportSelectionAsImage(options) {
-      const position = this.getCanvasTransformer().getPosition();
-      if (!position) {
+      const selectedNodeIds = this.getState().selectedNodeIds || [];
+      if (selectedNodeIds.length === 0) {
         console.warn("No selection to export");
         return null;
       }
-      const stage = this.getStage();
       const padding = options?.padding ?? 0;
-      const transformer = this.getCanvasTransformer().getTransformer();
-      const transformerVisible = transformer.visible();
-      transformer.visible(false);
-      try {
-        return stage.toDataURL({
-          x: position.x - padding,
-          y: position.y - padding,
-          width: position.width + padding * 2,
-          height: position.height + padding * 2,
-          pixelRatio: options?.pixelRatio ?? 1,
-          mimeType: options?.mimeType ?? "image/png",
-          quality: options?.quality ?? 1
-        });
-      } finally {
-        transformer.visible(transformerVisible);
-      }
+      const tempGroup = new Konva.Group();
+      selectedNodeIds.forEach((id) => {
+        const shape = this.getStage().findOne(`#${id}`);
+        if (shape) {
+          const clone = shape.clone();
+          tempGroup.add(clone);
+        }
+      });
+      const box = tempGroup.getClientRect();
+      const dataURL = tempGroup.toDataURL({
+        x: box.x - padding,
+        y: box.y - padding,
+        width: box.width + padding * 2,
+        height: box.height + padding * 2,
+        pixelRatio: options?.pixelRatio ?? 2,
+        mimeType: options?.mimeType ?? "image/png",
+        quality: options?.quality ?? 1
+      });
+      tempGroup.destroy();
+      return dataURL;
     }
     /**
      * 导出带有标注的图片节点为图片
@@ -3043,7 +3152,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
      */
     deleteSelectedNodes() {
       const selectedNodeIds = this.getState().selectedNodeIds || [];
-      if (selectedNodeIds.length === 0) return;
       this.deleteNodes(selectedNodeIds);
     }
     /**
@@ -3053,37 +3161,31 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
      * @returns 被删除的节点数据数组
      */
     deleteNodes(nodeIds) {
-      if (nodeIds.length === 0) return [];
-      const nodes = this.getState().nodes || [];
-      const idsToDelete = new Set(nodeIds);
+      return super.deleteNodes(nodeIds);
+    }
+    /**
+     * 将节点移动到最上层
+     */
+    moveNodesToTop(nodeIds) {
+      if (nodeIds.length === 0) return;
       nodeIds.forEach((id) => {
-        const node = nodes.find((n) => n.id === id);
-        if (node?.type === "image") {
-          nodes.forEach((n) => {
-            if (n.type === "image-marker" && n.meta.parent === id) {
-              idsToDelete.add(n.id);
-            }
-          });
+        const shape = this.getStage().findOne(`#${id}`);
+        if (shape) {
+          shape.moveToTop();
         }
       });
-      const deletedNodes = nodes.filter((n) => idsToDelete.has(n.id));
-      idsToDelete.forEach((id) => {
+    }
+    /**
+     * 将节点移动到最下层
+     */
+    moveNodesToBottom(nodeIds) {
+      if (nodeIds.length === 0) return;
+      nodeIds.forEach((id) => {
         const shape = this.getStage().findOne(`#${id}`);
         if (shape) {
-          shape.destroy();
+          shape.moveToBottom();
         }
       });
-      const newNodes = nodes.filter((n) => !idsToDelete.has(n.id));
-      this.getCanvasTransformer().clearNodes();
-      this._updateState(
-        {
-          nodes: newNodes,
-          selectedNodeIds: []
-        },
-        true
-      );
-      this.emit("nodes:deleted", deletedNodes);
-      return deletedNodes;
     }
     /**
      * 滚动到内容区域
@@ -3111,7 +3213,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       const hasSelection = !hasTargetIds && selectedNodeIds.length > 0;
       const idsToShow = hasTargetIds ? targetNodeIds : hasSelection ? selectedNodeIds : null;
       mainLayer.children.forEach((child) => {
-        if (child.visible() && child.getClassName() !== "Transformer" && child.hasName(NODE_NAME_FOR_SELECT)) {
+        if (child.visible() && child.getClassName() !== "Transformer" && child.hasName(NODE_NAMES.selectable)) {
           if (idsToShow) {
             const id = child.id();
             if (!idsToShow.includes(id)) return;
@@ -3428,7 +3530,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     ] });
   }
   exports2.CanvasApi = CanvasApi;
-  exports2.NODE_NAME_FOR_SELECT = NODE_NAME_FOR_SELECT;
+  exports2.NODE_NAMES = NODE_NAMES;
   exports2.PureCanvas = PureCanvas;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 }));

package/package.json

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