aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/draw-canvas-edit/components/render/handlers/selection-handlers.ts

@@ -1,397 +1,397 @@
-import Konva from 'konva';
-import { Render } from '../index';
-import { Handler, LinkDrawPoint, LinkDrawPair, ManualPointsMap, MouseButton, ManualPoint } from '../types';
-import { GraphDraw, LinkDraw, PreviewDraw, RulerDraw } from '../draws';
-
-export class SelectionHandlers implements Handler {
-  private render: Render;
-  constructor(render: Render) {
-    this.render = render;
-  }
-  // selectRect 拉动的开始和结束坐标
-  selectRectStartX = 0;
-  selectRectStartY = 0;
-  selectRectEndX = 0;
-  selectRectEndY = 0;
-  selecting = false;  // 是否正在使用 selectRect
-  transformerMousedownPos: Konva.Vector2d = { x: 0, y: 0 }; // 拖动前的位置
-  alignLines: Konva.Line[] = []; // 对齐线
-  alignLinesClear() { // 对齐线清除
-    for (const line of this.alignLines) {
-      line.destroy();
-    }
-    this.alignLines = [];
-  }
-  // 通过偏移量移动【目标节点】
-  selectingNodesPositionByOffset(offset: Konva.Vector2d) {
-    for (const node of this.render.selectionTool.selectingNodes) {
-      if (node.attrs.nodeMousedownPos) {
-        const x = node.attrs.nodeMousedownPos.x + offset.x;
-        const y = node.attrs.nodeMousedownPos.y + offset.y;
-        node.x(x);
-        node.y(y);
-      }
-    }
-  }
-  // 重置【目标节点】的 nodeMousedownPos
-  selectingNodesPositionReset() {
-    for (const node of this.render.selectionTool.selectingNodes) {
-      if (node.attrs.nodeMousedownPos) {
-        node.attrs.nodeMousedownPos.x = node.x();
-        node.attrs.nodeMousedownPos.y = node.y();
-      }
-    }
-  }
-  // 重置 transformer 状态
-  transformerStateReset() {
-    // 记录 transformer pos
-    const rect = this.render.transformer.findOne('.back')!.getClientRect();
-    this.transformerMousedownPos = { x: rect.x, y: rect.y };
-    const groups = this.render.transformer.nodes(); // 记录 拐点 移动之前的 坐标
-    const points = groups.reduce((ps, group) => ps.concat(Array.isArray(group.getAttr('points')) ? group.getAttr('points') : []), [] as LinkDrawPoint[]);
-    const pairs = points.reduce((ps, point) => ps.concat(point.pairs ? point.pairs.filter((o) => !o.disabled) : []), [] as LinkDrawPair[]);
-    for (const pair of pairs) {
-      const fromGroup = groups.find((o) => o.id() === pair.from.groupId);
-      const toGroup = groups.find((o) => o.id() === pair.to.groupId);
-      if (fromGroup && toGroup) { // 必须成对移动才记录
-        // 移动之前的 坐标
-        fromGroup.setAttr('manualPointsMapBefore', fromGroup.getAttr('manualPointsMap') ?? ({} as ManualPointsMap));
-      }
-    }
-  }
-
-  reset() { // 重置
-    this.render.attractTool.alignLinesClear(); // 对齐线清除
-    this.transformerStateReset();
-    this.selectingNodesPositionReset();
-  }
-
-  /**
-   * 矩阵变换：坐标系中的一个点，围绕着另外一个点进行旋转
-   * -  -   -        - -   -   - -
-   * |x`|   |cos -sin| |x-a|   |a|
-   * |  | = |        | |   | +
-   * |y`|   |sin  cos| |y-b|   |b|
-   * -  -   -        - -   -   - -
-   * @param x 目标节点坐标 x
-   * @param y 目标节点坐标 y
-   * @param centerX 围绕的点坐标 x
-   * @param centerY 围绕的点坐标 y
-   * @param angle 旋转角度
-   * @returns
-   */
-
-  // 拖动时更新位置
-  private updateManualPointsByDrag(rect: { x: number; y: number }, transformerPos?: Konva.Vector2d, isAttract = false) {
-    const groups = this.render.transformer.nodes();
-    const points = groups.reduce((ps, group) => ps.concat(Array.isArray(group.getAttr('points')) ? group.getAttr('points') : []), [] as LinkDrawPoint[]);
-    const pairs = points.reduce((ps, point) => ps.concat(point.pairs ? point.pairs.filter((o) => !o.disabled) : []), [] as LinkDrawPair[]);
-    for (const pair of pairs) {
-      const fromGroup = groups.find((o) => o.id() === pair.from.groupId);
-      const toGroup = groups.find((o) => o.id() === pair.to.groupId);
-      if (fromGroup && toGroup) {
-        if (fromGroup.attrs.manualPointsMap && fromGroup.attrs.manualPointsMapBefore) {
-          let manualPoints = fromGroup.attrs.manualPointsMap[pair.id];
-          const manualPointsBefore = fromGroup.attrs.manualPointsMapBefore[pair.id];
-          if (Array.isArray(manualPoints) && Array.isArray(manualPointsBefore)) {
-            const offsetX = this.render.toStageValue((isAttract ? transformerPos.x : rect.x) - this.transformerMousedownPos.x);
-            const offsetY = this.render.toStageValue((isAttract ? transformerPos.y : rect.y) - this.transformerMousedownPos.y);
-            manualPoints = manualPointsBefore.map((o: ManualPoint) => ({ x: o.x + offsetX, y: o.y + offsetY }));
-            fromGroup.setAttr('manualPointsMap', { ...fromGroup.attrs.manualPointsMap, [pair.id]: manualPoints });
-          }
-        }
-      }
-    }
-  }
-
-  rotatePoint(x: number, y: number, centerX: number, centerY: number, angle: number) {
-    const radians = (angle * Math.PI) / 180; // 将角度转换为弧度
-    // 计算旋转后的坐标
-    const newX = Math.cos(radians) * (x - centerX) - Math.sin(radians) * (y - centerY) + centerX;
-    const newY = Math.sin(radians) * (x - centerX) + Math.cos(radians) * (y - centerY) + centerY;
-    return { x: newX, y: newY };
-  }
-
-  lastRotation = 0;
-
-  handlers = { // 选择相关
-    stage: {
-      mousedown: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['mousedown']>) => {
-        if (!this.render.graphType) {  // 并非在新建并拖动图形
-          const parent = e.target.getParent();
-          if (e.target === this.render.stage) {
-            // 点击空白处 清除选择
-            this.render.selectionTool.selectingClear();
-            this.render.linkTool.selectingClear();
-            // 选择框（判断 ctrlKey 为了排查 mac 拖动快捷键）
-            if (e.evt.button === MouseButton["左键"] && !e.evt.ctrlKey) {
-              const pos = this.render.stage.getPointerPosition();
-              if (pos) {  // 初始化状态值
-                this.selectRectStartX = pos.x;
-                this.selectRectStartY = pos.y;
-                this.selectRectEndX = pos.x;
-                this.selectRectEndY = pos.y;
-              }
-              // 初始化大小
-              this.render.selectRect.width(0);
-              this.render.selectRect.height(0);
-              this.selecting = true; // 开始选择
-            }
-            this.render.linkTool.pointsVisible(false); // 隐藏连接点
-          } else if (parent instanceof Konva.Transformer) {
-            // transformer 点击事件交给 transformer 自己的 handler
-          } else if (parent instanceof Konva.Group) {
-            // （判断 ctrlKey 为了排查 mac 拖动快捷键）
-            if (e.evt.button === MouseButton["左键"] && !e.evt.ctrlKey) {
-              if (!this.render.ignore(parent) && !this.render.ignoreDraw(e.target)) {
-                // 锁定节点：在 select 之前先禁用 Konva 内置拖拽，防止 race condition
-                if (parent.attrs.locked) {
-                  parent.draggable(false);
-                }
-                if (e.evt.ctrlKey || e.evt.metaKey) { // 新增多选
-                  this.render.selectionTool.select([...this.render.selectionTool.selectingNodes, parent]);
-                } else {  // 单选
-                  this.render.selectionTool.select([parent]);
-                  // 单选时无法通过 transformer 获取拖动初始位置 transformerMousedownPos
-                  // 此时直接取目标的 getClientRect 位置
-                  const rect = parent.getClientRect();
-                  this.transformerMousedownPos = { x: rect.x, y: rect.y };
-                }
-              }
-            } else {
-              this.render.selectionTool.selectingClear();
-            }
-          }
-        }
-      },
-      mousemove: () => {
-        const stageState = this.render.getStageState();
-        if (this.selecting) {  // 选择框
-          // 选择区域中
-          const pos = this.render.stage.getPointerPosition();
-          if (pos) {  // 选择移动后的坐标
-            this.selectRectEndX = pos.x;
-            this.selectRectEndY = pos.y;
-          }
-          // 调整【选择框】的位置和大小
-          this.render.selectRect.setAttrs({
-            visible: true,
-            x: this.render.toStageValue(Math.min(this.selectRectStartX, this.selectRectEndX) - stageState.x),
-            y: this.render.toStageValue(Math.min(this.selectRectStartY, this.selectRectEndY) - stageState.y),
-            width: this.render.toStageValue(Math.abs(this.selectRectEndX - this.selectRectStartX)),
-            height: this.render.toStageValue(Math.abs(this.selectRectEndY - this.selectRectStartY))
-          });
-        }
-      },
-      mouseup: () => { // 选择框 重叠计算
-        const box = this.render.selectRect.getClientRect();
-        if (box.width > 0 && box.height > 0) {
-          // 区域有面积 获取所有图形
-          const shapes = this.render.layer.getChildren((node) => !this.render.ignore(node));
-          // 提取重叠部分
-          const selected = shapes.filter((shape) => Konva.Util.haveIntersection(box, shape.getClientRect()));
-          this.render.selectionTool.select(selected);  // 多选
-        }
-        // 重置
-        this.render.selectRect.setAttrs({ visible: false, x: 0, y: 0, width: 0, height: 0 });
-        this.selecting = false;  // 选择区域结束
-      }
-    },
-    transformer: {  // 记录初始状态
-      mousedown: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['mousedown']>) => {
-        const anchor = this.render.transformer.getActiveAnchor();
-        if (!anchor) { // 非变换
-          if (e.evt.ctrlKey || e.evt.metaKey) { // 选择
-            if (this.render.selectionTool.selectingNodes.length > 0) {
-              const pos = this.render.stage.getPointerPosition();
-              if (pos) {
-                const keeps: Konva.Node[] = [];
-                const removes: Konva.Node[] = [];
-                // 从高到低，逐个判断 已选节点 和 鼠标点击位置 是否重叠
-                let finded = false;
-                for (const node of this.render.selectionTool.selectingNodes.sort((a, b) => b.zIndex() - a.zIndex())) {
-                  if (!finded && Konva.Util.haveIntersection(node.getClientRect(), { ...pos, width: 1, height: 1 })) {
-                    // 记录需要移除选择的节点
-                    removes.unshift(node);
-                    finded = true;
-                  } else {
-                    keeps.unshift(node);
-                  }
-                }
-                if (removes.length > 0) {  // 取消选择
-                  this.render.selectionTool.select(keeps);
-                } else {
-                  // 从高到低，逐个判断 未选节点 和 鼠标点击位置 是否重叠
-                  let finded = false;
-                  const adds: Konva.Node[] = [];
-                  for (const node of this.render.layer.getChildren().filter((node) => !this.render.ignore(node)).sort((a, b) => b.zIndex() - a.zIndex())) {
-                    if (!finded && Konva.Util.haveIntersection(node.getClientRect(), { ...pos, width: 1, height: 1 })) {
-                      // 记录需要增加选择的节点
-                      adds.unshift(node);
-                      finded = true;
-                    }
-                  }
-                  if (adds.length > 0) {  // 新增选择
-                    this.render.selectionTool.select([...this.render.selectionTool.selectingNodes, ...adds]);
-                  }
-                }
-              }
-            }
-          } else {
-            if (this.render.selectionTool.selectingNodes.length > 0) {
-              // 拖动前 重置状态
-              this.reset();
-            }
-          }
-        } else {
-          // 变换前  重置状态
-          this.reset();
-        }
-      },
-      transformstart: () => {
-        const back = this.render.transformer.findOne('.back');
-        if (back) {
-          this.lastRotation = back.getAbsoluteRotation();
-        }
-      },
-      transform: () => {  // 旋转时，拐点也要跟着动
-        const back = this.render.transformer.findOne('.back');
-        if (back) {
-          const stageState = this.render.getStageState();
-          const { x, y, width, height } = back.getClientRect();
-          const rotation = back.getAbsoluteRotation() - this.lastRotation;
-          const centerX = x + width / 2;
-          const centerY = y + height / 2;
-          const groups = this.render.transformer.nodes();
-          const points = groups.reduce((ps, group) => ps.concat(Array.isArray(group.getAttr('points')) ? group.getAttr('points') : []), [] as LinkDrawPoint[]);
-          const pairs = points.reduce((ps, point) => ps.concat(point.pairs ? point.pairs.filter((o) => !o.disabled) : []), [] as LinkDrawPair[]);
-          for (const pair of pairs) {
-            const fromGroup = groups.find((o) => o.id() === pair.from.groupId);
-            const toGroup = groups.find((o) => o.id() === pair.to.groupId);
-            if (fromGroup && toGroup) { // 必须成对移动才记录
-              if (fromGroup.attrs.manualPointsMap && fromGroup.attrs.manualPointsMapBefore) {
-                let manualPoints = fromGroup.attrs.manualPointsMap[pair.id];
-                const manualPointsBefore = fromGroup.attrs.manualPointsMapBefore[pair.id];
-                if (Array.isArray(manualPoints) && Array.isArray(manualPointsBefore)) {
-                  manualPoints = manualPointsBefore.map((o: ManualPoint) => {
-                    const { x, y } = this.rotatePoint(this.render.toBoardValue(o.x) + stageState.x, this.render.toBoardValue(o.y) + stageState.y, centerX, centerY, rotation);
-                    return { x: this.render.toStageValue(x - stageState.x), y: this.render.toStageValue(y - stageState.y) };
-                  });
-                  fromGroup.setAttr('manualPointsMap', { ...fromGroup.attrs.manualPointsMap, [pair.id]: manualPoints });
-                }
-              }
-            }
-          }
-          // 更新坐标记录（仅记录属性，不干预Konva位置，避免toFixed截断与Konva精确值冲突累积）
-          for (const group of groups as Konva.Group[]) {
-            group.setAttr('assetSettings', this.render.getAssetSettings(group));
-            // 存在tooltip，则tooltip始终箭头朝下，不受group旋转影响
-            group.findOne('.tooltip')?.rotation(-group.rotation());
-          }
-          this.render.emit('asset-position-change', groups);
-          this.render.emit('asset-rotation-change', groups);
-        }
-        this.render.redraw([GraphDraw.name, LinkDraw.name, PreviewDraw.name]);
-      },
-      transformend: () => {
-        this.reset();  // 变换结束 重置状态
-        this.render.updateHistory();  // 更新历史
-        this.render.redraw([GraphDraw.name, LinkDraw.name, PreviewDraw.name]);
-      },
-      dragstart: () => {
-      },
-      dragmove: () => { // 拖动
-        const rect = this.render.transformer.findOne('.back')!.getClientRect();
-        // 磁吸控制：关闭时跳过磁吸逻辑，让 transformer 自由拖动
-        if (this.render.showAttract) {
-          const { pos: transformerPos, isAttract } = this.render.attractTool.attractTransformer(rect);
-          if (isAttract) {  // 磁吸偏移
-            this.selectingNodesPositionByOffset({
-              x: this.render.toStageValue(transformerPos.x - this.transformerMousedownPos.x),
-              y: this.render.toStageValue(transformerPos.y - this.transformerMousedownPos.y)
-            });
-          }
-          // 拐点磁吸偏移
-          this.updateManualPointsByDrag(rect, transformerPos, isAttract);
-        } else {
-          // 拐点跟随拖动偏移
-          this.updateManualPointsByDrag(rect, undefined, false);
-        }
-        const groups = this.render.transformer.nodes();
-        for (const group of groups) { // 更新坐标记录（仅记录属性，不干预Konva位置）
-          group.setAttr('assetSettings', this.render.getAssetSettings(group));
-        }
-        this.render.emit('asset-position-change', groups);
-        this.render.redraw([GraphDraw.name, LinkDraw.name, RulerDraw.name, PreviewDraw.name]);
-      },
-      dragend: () => {
-        this.reset();  // 拖动结束 重置状态
-        this.render.updateHistory();
-        this.render.redraw([GraphDraw.name, LinkDraw.name, RulerDraw.name, PreviewDraw.name]);
-      },
-      mousemove: () => { // 子节点 hover
-        const pos = this.render.stage.getPointerPosition();
-        if (pos) {
-          // 获取所有图形
-          const shapes = this.render.transformer.nodes();
-          // 隐藏 hover 框
-          for (const shape of shapes) {
-            if (shape instanceof Konva.Group) {
-              shape.findOne('#hoverRect')?.visible(false);
-            }
-          }
-          if (shapes.length > 1) { // 多选
-            // zIndex 倒序（大的优先）
-            shapes.sort((a, b) => b.zIndex() - a.zIndex());
-            // 提取重叠目标
-            const selected = shapes.find((shape) => Konva.Util.haveIntersection({ ...pos, width: 1, height: 1 }, shape.getClientRect()));
-            if (selected) {  // 显示 hover 框
-              if (selected instanceof Konva.Group) {
-                selected.findOne('#hoverRect')?.visible(true);
-              }
-            }
-          }
-        }
-      },
-      mouseleave: () => {  // 隐藏 hover 框
-        for (const shape of this.render.transformer.nodes()) {
-          if (shape instanceof Konva.Group) {
-            shape.findOne('#hoverRect')?.visible(false);
-          }
-        }
-      }
-    }
-  };
-
-  transformerConfig = { // transformer config
-    // 变换中
-    anchorDragBoundFunc: (oldPos: Konva.Vector2d, newPos: Konva.Vector2d) => {
-      // 磁贴逻辑
-      if (!this.render.config.readonly && this.render.config.attractResize) {
-        // transformer 锚点按钮
-        const anchor = this.render.transformer.getActiveAnchor();
-        // 非旋转（就是放大缩小时）
-        if (anchor && anchor !== 'rotater') {
-          const stageState = this.render.getStageState();
-          const logicX = this.render.toStageValue(newPos.x - stageState.x); // x坐标
-          const logicNumX = Math.round(logicX / this.render.bgSize); // x单元格个数
-          const logicClosestX = logicNumX * this.render.bgSize; // x磁贴目标坐标
-          const logicDiffX = Math.abs(logicX - logicClosestX); // x磁贴偏移量
-          const snappedX = logicDiffX < 5; // x磁贴阈值
-          const logicY = this.render.toStageValue(newPos.y - stageState.y); // y坐标
-          const logicNumY = Math.round(logicY / this.render.bgSize); // y单元格个数
-          const logicClosestY = logicNumY * this.render.bgSize; // y磁贴目标坐标
-          const logicDiffY = Math.abs(logicY - logicClosestY); // y磁贴偏移量
-          const snappedY = logicDiffY < 5; // y磁贴阈值
-          if (snappedX || snappedY) { // xy磁贴
-            return {
-              x: snappedX ? this.render.toBoardValue(logicClosestX) + stageState.x : newPos.x,
-              y: snappedY ? this.render.toBoardValue(logicClosestY) + stageState.y : newPos.y
-            };
-          }
-        }
-      }
-      return newPos;  // 不磁贴
-    }
-  };
+import Konva from 'konva';
+import { Render } from '../index';
+import { Handler, LinkDrawPoint, LinkDrawPair, ManualPointsMap, MouseButton, ManualPoint } from '../types';
+import { GraphDraw, LinkDraw, PreviewDraw, RulerDraw } from '../draws';
+
+export class SelectionHandlers implements Handler {
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+  // selectRect 拉动的开始和结束坐标
+  selectRectStartX = 0;
+  selectRectStartY = 0;
+  selectRectEndX = 0;
+  selectRectEndY = 0;
+  selecting = false;  // 是否正在使用 selectRect
+  transformerMousedownPos: Konva.Vector2d = { x: 0, y: 0 }; // 拖动前的位置
+  alignLines: Konva.Line[] = []; // 对齐线
+  alignLinesClear() { // 对齐线清除
+    for (const line of this.alignLines) {
+      line.destroy();
+    }
+    this.alignLines = [];
+  }
+  // 通过偏移量移动【目标节点】
+  selectingNodesPositionByOffset(offset: Konva.Vector2d) {
+    for (const node of this.render.selectionTool.selectingNodes) {
+      if (node.attrs.nodeMousedownPos) {
+        const x = node.attrs.nodeMousedownPos.x + offset.x;
+        const y = node.attrs.nodeMousedownPos.y + offset.y;
+        node.x(x);
+        node.y(y);
+      }
+    }
+  }
+  // 重置【目标节点】的 nodeMousedownPos
+  selectingNodesPositionReset() {
+    for (const node of this.render.selectionTool.selectingNodes) {
+      if (node.attrs.nodeMousedownPos) {
+        node.attrs.nodeMousedownPos.x = node.x();
+        node.attrs.nodeMousedownPos.y = node.y();
+      }
+    }
+  }
+  // 重置 transformer 状态
+  transformerStateReset() {
+    // 记录 transformer pos
+    const rect = this.render.transformer.findOne('.back')!.getClientRect();
+    this.transformerMousedownPos = { x: rect.x, y: rect.y };
+    const groups = this.render.transformer.nodes(); // 记录 拐点 移动之前的 坐标
+    const points = groups.reduce((ps, group) => ps.concat(Array.isArray(group.getAttr('points')) ? group.getAttr('points') : []), [] as LinkDrawPoint[]);
+    const pairs = points.reduce((ps, point) => ps.concat(point.pairs ? point.pairs.filter((o) => !o.disabled) : []), [] as LinkDrawPair[]);
+    for (const pair of pairs) {
+      const fromGroup = groups.find((o) => o.id() === pair.from.groupId);
+      const toGroup = groups.find((o) => o.id() === pair.to.groupId);
+      if (fromGroup && toGroup) { // 必须成对移动才记录
+        // 移动之前的 坐标
+        fromGroup.setAttr('manualPointsMapBefore', fromGroup.getAttr('manualPointsMap') ?? ({} as ManualPointsMap));
+      }
+    }
+  }
+
+  reset() { // 重置
+    this.render.attractTool.alignLinesClear(); // 对齐线清除
+    this.transformerStateReset();
+    this.selectingNodesPositionReset();
+  }
+
+  /**
+   * 矩阵变换：坐标系中的一个点，围绕着另外一个点进行旋转
+   * -  -   -        - -   -   - -
+   * |x`|   |cos -sin| |x-a|   |a|
+   * |  | = |        | |   | +
+   * |y`|   |sin  cos| |y-b|   |b|
+   * -  -   -        - -   -   - -
+   * @param x 目标节点坐标 x
+   * @param y 目标节点坐标 y
+   * @param centerX 围绕的点坐标 x
+   * @param centerY 围绕的点坐标 y
+   * @param angle 旋转角度
+   * @returns
+   */
+
+  // 拖动时更新位置
+  private updateManualPointsByDrag(rect: { x: number; y: number }, transformerPos?: Konva.Vector2d, isAttract = false) {
+    const groups = this.render.transformer.nodes();
+    const points = groups.reduce((ps, group) => ps.concat(Array.isArray(group.getAttr('points')) ? group.getAttr('points') : []), [] as LinkDrawPoint[]);
+    const pairs = points.reduce((ps, point) => ps.concat(point.pairs ? point.pairs.filter((o) => !o.disabled) : []), [] as LinkDrawPair[]);
+    for (const pair of pairs) {
+      const fromGroup = groups.find((o) => o.id() === pair.from.groupId);
+      const toGroup = groups.find((o) => o.id() === pair.to.groupId);
+      if (fromGroup && toGroup) {
+        if (fromGroup.attrs.manualPointsMap && fromGroup.attrs.manualPointsMapBefore) {
+          let manualPoints = fromGroup.attrs.manualPointsMap[pair.id];
+          const manualPointsBefore = fromGroup.attrs.manualPointsMapBefore[pair.id];
+          if (Array.isArray(manualPoints) && Array.isArray(manualPointsBefore)) {
+            const offsetX = this.render.toStageValue((isAttract ? transformerPos.x : rect.x) - this.transformerMousedownPos.x);
+            const offsetY = this.render.toStageValue((isAttract ? transformerPos.y : rect.y) - this.transformerMousedownPos.y);
+            manualPoints = manualPointsBefore.map((o: ManualPoint) => ({ x: o.x + offsetX, y: o.y + offsetY }));
+            fromGroup.setAttr('manualPointsMap', { ...fromGroup.attrs.manualPointsMap, [pair.id]: manualPoints });
+          }
+        }
+      }
+    }
+  }
+
+  rotatePoint(x: number, y: number, centerX: number, centerY: number, angle: number) {
+    const radians = (angle * Math.PI) / 180; // 将角度转换为弧度
+    // 计算旋转后的坐标
+    const newX = Math.cos(radians) * (x - centerX) - Math.sin(radians) * (y - centerY) + centerX;
+    const newY = Math.sin(radians) * (x - centerX) + Math.cos(radians) * (y - centerY) + centerY;
+    return { x: newX, y: newY };
+  }
+
+  lastRotation = 0;
+
+  handlers = { // 选择相关
+    stage: {
+      mousedown: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['mousedown']>) => {
+        if (!this.render.graphType) {  // 并非在新建并拖动图形
+          const parent = e.target.getParent();
+          if (e.target === this.render.stage) {
+            // 点击空白处 清除选择
+            this.render.selectionTool.selectingClear();
+            this.render.linkTool.selectingClear();
+            // 选择框（判断 ctrlKey 为了排查 mac 拖动快捷键）
+            if (e.evt.button === MouseButton["左键"] && !e.evt.ctrlKey) {
+              const pos = this.render.stage.getPointerPosition();
+              if (pos) {  // 初始化状态值
+                this.selectRectStartX = pos.x;
+                this.selectRectStartY = pos.y;
+                this.selectRectEndX = pos.x;
+                this.selectRectEndY = pos.y;
+              }
+              // 初始化大小
+              this.render.selectRect.width(0);
+              this.render.selectRect.height(0);
+              this.selecting = true; // 开始选择
+            }
+            this.render.linkTool.pointsVisible(false); // 隐藏连接点
+          } else if (parent instanceof Konva.Transformer) {
+            // transformer 点击事件交给 transformer 自己的 handler
+          } else if (parent instanceof Konva.Group) {
+            // （判断 ctrlKey 为了排查 mac 拖动快捷键）
+            if (e.evt.button === MouseButton["左键"] && !e.evt.ctrlKey) {
+              if (!this.render.ignore(parent) && !this.render.ignoreDraw(e.target)) {
+                // 锁定节点：在 select 之前先禁用 Konva 内置拖拽，防止 race condition
+                if (parent.attrs.locked) {
+                  parent.draggable(false);
+                }
+                if (e.evt.ctrlKey || e.evt.metaKey) { // 新增多选
+                  this.render.selectionTool.select([...this.render.selectionTool.selectingNodes, parent]);
+                } else {  // 单选
+                  this.render.selectionTool.select([parent]);
+                  // 单选时无法通过 transformer 获取拖动初始位置 transformerMousedownPos
+                  // 此时直接取目标的 getClientRect 位置
+                  const rect = parent.getClientRect();
+                  this.transformerMousedownPos = { x: rect.x, y: rect.y };
+                }
+              }
+            } else {
+              this.render.selectionTool.selectingClear();
+            }
+          }
+        }
+      },
+      mousemove: () => {
+        const stageState = this.render.getStageState();
+        if (this.selecting) {  // 选择框
+          // 选择区域中
+          const pos = this.render.stage.getPointerPosition();
+          if (pos) {  // 选择移动后的坐标
+            this.selectRectEndX = pos.x;
+            this.selectRectEndY = pos.y;
+          }
+          // 调整【选择框】的位置和大小
+          this.render.selectRect.setAttrs({
+            visible: true,
+            x: this.render.toStageValue(Math.min(this.selectRectStartX, this.selectRectEndX) - stageState.x),
+            y: this.render.toStageValue(Math.min(this.selectRectStartY, this.selectRectEndY) - stageState.y),
+            width: this.render.toStageValue(Math.abs(this.selectRectEndX - this.selectRectStartX)),
+            height: this.render.toStageValue(Math.abs(this.selectRectEndY - this.selectRectStartY))
+          });
+        }
+      },
+      mouseup: () => { // 选择框 重叠计算
+        const box = this.render.selectRect.getClientRect();
+        if (box.width > 0 && box.height > 0) {
+          // 区域有面积 获取所有图形
+          const shapes = this.render.layer.getChildren((node) => !this.render.ignore(node));
+          // 提取重叠部分
+          const selected = shapes.filter((shape) => Konva.Util.haveIntersection(box, shape.getClientRect()));
+          this.render.selectionTool.select(selected);  // 多选
+        }
+        // 重置
+        this.render.selectRect.setAttrs({ visible: false, x: 0, y: 0, width: 0, height: 0 });
+        this.selecting = false;  // 选择区域结束
+      }
+    },
+    transformer: {  // 记录初始状态
+      mousedown: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['mousedown']>) => {
+        const anchor = this.render.transformer.getActiveAnchor();
+        if (!anchor) { // 非变换
+          if (e.evt.ctrlKey || e.evt.metaKey) { // 选择
+            if (this.render.selectionTool.selectingNodes.length > 0) {
+              const pos = this.render.stage.getPointerPosition();
+              if (pos) {
+                const keeps: Konva.Node[] = [];
+                const removes: Konva.Node[] = [];
+                // 从高到低，逐个判断 已选节点 和 鼠标点击位置 是否重叠
+                let finded = false;
+                for (const node of this.render.selectionTool.selectingNodes.sort((a, b) => b.zIndex() - a.zIndex())) {
+                  if (!finded && Konva.Util.haveIntersection(node.getClientRect(), { ...pos, width: 1, height: 1 })) {
+                    // 记录需要移除选择的节点
+                    removes.unshift(node);
+                    finded = true;
+                  } else {
+                    keeps.unshift(node);
+                  }
+                }
+                if (removes.length > 0) {  // 取消选择
+                  this.render.selectionTool.select(keeps);
+                } else {
+                  // 从高到低，逐个判断 未选节点 和 鼠标点击位置 是否重叠
+                  let finded = false;
+                  const adds: Konva.Node[] = [];
+                  for (const node of this.render.layer.getChildren().filter((node) => !this.render.ignore(node)).sort((a, b) => b.zIndex() - a.zIndex())) {
+                    if (!finded && Konva.Util.haveIntersection(node.getClientRect(), { ...pos, width: 1, height: 1 })) {
+                      // 记录需要增加选择的节点
+                      adds.unshift(node);
+                      finded = true;
+                    }
+                  }
+                  if (adds.length > 0) {  // 新增选择
+                    this.render.selectionTool.select([...this.render.selectionTool.selectingNodes, ...adds]);
+                  }
+                }
+              }
+            }
+          } else {
+            if (this.render.selectionTool.selectingNodes.length > 0) {
+              // 拖动前 重置状态
+              this.reset();
+            }
+          }
+        } else {
+          // 变换前  重置状态
+          this.reset();
+        }
+      },
+      transformstart: () => {
+        const back = this.render.transformer.findOne('.back');
+        if (back) {
+          this.lastRotation = back.getAbsoluteRotation();
+        }
+      },
+      transform: () => {  // 旋转时，拐点也要跟着动
+        const back = this.render.transformer.findOne('.back');
+        if (back) {
+          const stageState = this.render.getStageState();
+          const { x, y, width, height } = back.getClientRect();
+          const rotation = back.getAbsoluteRotation() - this.lastRotation;
+          const centerX = x + width / 2;
+          const centerY = y + height / 2;
+          const groups = this.render.transformer.nodes();
+          const points = groups.reduce((ps, group) => ps.concat(Array.isArray(group.getAttr('points')) ? group.getAttr('points') : []), [] as LinkDrawPoint[]);
+          const pairs = points.reduce((ps, point) => ps.concat(point.pairs ? point.pairs.filter((o) => !o.disabled) : []), [] as LinkDrawPair[]);
+          for (const pair of pairs) {
+            const fromGroup = groups.find((o) => o.id() === pair.from.groupId);
+            const toGroup = groups.find((o) => o.id() === pair.to.groupId);
+            if (fromGroup && toGroup) { // 必须成对移动才记录
+              if (fromGroup.attrs.manualPointsMap && fromGroup.attrs.manualPointsMapBefore) {
+                let manualPoints = fromGroup.attrs.manualPointsMap[pair.id];
+                const manualPointsBefore = fromGroup.attrs.manualPointsMapBefore[pair.id];
+                if (Array.isArray(manualPoints) && Array.isArray(manualPointsBefore)) {
+                  manualPoints = manualPointsBefore.map((o: ManualPoint) => {
+                    const { x, y } = this.rotatePoint(this.render.toBoardValue(o.x) + stageState.x, this.render.toBoardValue(o.y) + stageState.y, centerX, centerY, rotation);
+                    return { x: this.render.toStageValue(x - stageState.x), y: this.render.toStageValue(y - stageState.y) };
+                  });
+                  fromGroup.setAttr('manualPointsMap', { ...fromGroup.attrs.manualPointsMap, [pair.id]: manualPoints });
+                }
+              }
+            }
+          }
+          // 更新坐标记录（仅记录属性，不干预Konva位置，避免toFixed截断与Konva精确值冲突累积）
+          for (const group of groups as Konva.Group[]) {
+            group.setAttr('assetSettings', this.render.getAssetSettings(group));
+            // 存在tooltip，则tooltip始终箭头朝下，不受group旋转影响
+            group.findOne('.tooltip')?.rotation(-group.rotation());
+          }
+          this.render.emit('asset-position-change', groups);
+          this.render.emit('asset-rotation-change', groups);
+        }
+        this.render.redraw([GraphDraw.name, LinkDraw.name, PreviewDraw.name]);
+      },
+      transformend: () => {
+        this.reset();  // 变换结束 重置状态
+        this.render.updateHistory();  // 更新历史
+        this.render.redraw([GraphDraw.name, LinkDraw.name, PreviewDraw.name]);
+      },
+      dragstart: () => {
+      },
+      dragmove: () => { // 拖动
+        const rect = this.render.transformer.findOne('.back')!.getClientRect();
+        // 磁吸控制：关闭时跳过磁吸逻辑，让 transformer 自由拖动
+        if (this.render.showAttract) {
+          const { pos: transformerPos, isAttract } = this.render.attractTool.attractTransformer(rect);
+          if (isAttract) {  // 磁吸偏移
+            this.selectingNodesPositionByOffset({
+              x: this.render.toStageValue(transformerPos.x - this.transformerMousedownPos.x),
+              y: this.render.toStageValue(transformerPos.y - this.transformerMousedownPos.y)
+            });
+          }
+          // 拐点磁吸偏移
+          this.updateManualPointsByDrag(rect, transformerPos, isAttract);
+        } else {
+          // 拐点跟随拖动偏移
+          this.updateManualPointsByDrag(rect, undefined, false);
+        }
+        const groups = this.render.transformer.nodes();
+        for (const group of groups) { // 更新坐标记录（仅记录属性，不干预Konva位置）
+          group.setAttr('assetSettings', this.render.getAssetSettings(group));
+        }
+        this.render.emit('asset-position-change', groups);
+        this.render.redraw([GraphDraw.name, LinkDraw.name, RulerDraw.name, PreviewDraw.name]);
+      },
+      dragend: () => {
+        this.reset();  // 拖动结束 重置状态
+        this.render.updateHistory();
+        this.render.redraw([GraphDraw.name, LinkDraw.name, RulerDraw.name, PreviewDraw.name]);
+      },
+      mousemove: () => { // 子节点 hover
+        const pos = this.render.stage.getPointerPosition();
+        if (pos) {
+          // 获取所有图形
+          const shapes = this.render.transformer.nodes();
+          // 隐藏 hover 框
+          for (const shape of shapes) {
+            if (shape instanceof Konva.Group) {
+              shape.findOne('#hoverRect')?.visible(false);
+            }
+          }
+          if (shapes.length > 1) { // 多选
+            // zIndex 倒序（大的优先）
+            shapes.sort((a, b) => b.zIndex() - a.zIndex());
+            // 提取重叠目标
+            const selected = shapes.find((shape) => Konva.Util.haveIntersection({ ...pos, width: 1, height: 1 }, shape.getClientRect()));
+            if (selected) {  // 显示 hover 框
+              if (selected instanceof Konva.Group) {
+                selected.findOne('#hoverRect')?.visible(true);
+              }
+            }
+          }
+        }
+      },
+      mouseleave: () => {  // 隐藏 hover 框
+        for (const shape of this.render.transformer.nodes()) {
+          if (shape instanceof Konva.Group) {
+            shape.findOne('#hoverRect')?.visible(false);
+          }
+        }
+      }
+    }
+  };
+
+  transformerConfig = { // transformer config
+    // 变换中
+    anchorDragBoundFunc: (oldPos: Konva.Vector2d, newPos: Konva.Vector2d) => {
+      // 磁贴逻辑
+      if (!this.render.config.readonly && this.render.config.attractResize) {
+        // transformer 锚点按钮
+        const anchor = this.render.transformer.getActiveAnchor();
+        // 非旋转（就是放大缩小时）
+        if (anchor && anchor !== 'rotater') {
+          const stageState = this.render.getStageState();
+          const logicX = this.render.toStageValue(newPos.x - stageState.x); // x坐标
+          const logicNumX = Math.round(logicX / this.render.bgSize); // x单元格个数
+          const logicClosestX = logicNumX * this.render.bgSize; // x磁贴目标坐标
+          const logicDiffX = Math.abs(logicX - logicClosestX); // x磁贴偏移量
+          const snappedX = logicDiffX < 5; // x磁贴阈值
+          const logicY = this.render.toStageValue(newPos.y - stageState.y); // y坐标
+          const logicNumY = Math.round(logicY / this.render.bgSize); // y单元格个数
+          const logicClosestY = logicNumY * this.render.bgSize; // y磁贴目标坐标
+          const logicDiffY = Math.abs(logicY - logicClosestY); // y磁贴偏移量
+          const snappedY = logicDiffY < 5; // y磁贴阈值
+          if (snappedX || snappedY) { // xy磁贴
+            return {
+              x: snappedX ? this.render.toBoardValue(logicClosestX) + stageState.x : newPos.x,
+              y: snappedY ? this.render.toBoardValue(logicClosestY) + stageState.y : newPos.y
+            };
+          }
+        }
+      }
+      return newPos;  // 不磁贴
+    }
+  };
 }