aldehyde 0.2.472 → 0.2.474

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

@@ -0,0 +1,385 @@
+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 {
+  // @ts-ignore
+  static readonly name = 'Selection';
+  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
+   */
+  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)) {
+                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 });
+                }
+              }
+            }
+          }
+          // 更新坐标记录
+          for (const group of groups) {
+            this.render.setAssetSettings(group, this.render.getAssetSettings(group), false);
+          }
+          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();
+        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)
+          });
+        }
+        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 = isAttract
+                  ? manualPointsBefore.map((o: ManualPoint) => ({
+                    x: o.x + this.render.toStageValue(transformerPos.x - this.transformerMousedownPos.x),
+                    y: o.y + this.render.toStageValue(transformerPos.y - this.transformerMousedownPos.y)
+                  }))
+                  : manualPointsBefore.map((o: ManualPoint) => ({
+                    x: o.x + this.render.toStageValue(rect.x - this.transformerMousedownPos.x),
+                    y: o.y + this.render.toStageValue(rect.y - this.transformerMousedownPos.y)
+                  }));
+                fromGroup.setAttr('manualPointsMap', { ...fromGroup.attrs.manualPointsMap, [pair.id]: manualPoints });
+              }
+            }
+          }
+        }
+        for (const group of groups) { // 更新坐标记录
+          this.render.setAssetSettings(group, this.render.getAssetSettings(group), false);
+        }
+        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;  // 不磁贴
+    }
+  };
+}

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

@@ -0,0 +1,46 @@
+import { Render } from '../index';
+import { Handler, ShutcutKey } from '../types';
+
+export class ShutcutHandlers implements Handler {
+  // @ts-ignore
+  static readonly name = 'Shutcut';
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+  handlers = {
+    dom: {
+      keydown: (e: GlobalEventHandlersEventMap['keydown']) => {
+        if (!this.render.config.readonly) {
+          if (e.ctrlKey || e.metaKey) {
+            if (e.code === ShutcutKey.C) {
+              this.render.copyTool.pasteStart();
+            } else if (e.code === ShutcutKey.V) {
+              this.render.copyTool.pasteEnd();
+            } else if (e.code === ShutcutKey.Z) {
+              if (e.shiftKey) {
+                this.render.nextHistory();
+              } else {
+                this.render.prevHistory();
+              }
+            } else if (e.code === ShutcutKey.A) {
+              this.render.selectionTool.selectAll();
+            }
+          } else if (e.code === ShutcutKey["删除"] || e.code === ShutcutKey.Backspace) {
+            this.render.remove(this.render.selectionTool.selectingNodes);
+            // 删除 连接线
+            this.render.linkTool.remove();
+          } else if (e.code === ShutcutKey.Esc) {
+            this.render.selectionTool.selectingClear();
+            this.render.linkTool.selectingClear();
+          }
+        }
+        if (e.code === ShutcutKey.R) {
+          if (e.ctrlKey || e.metaKey) {
+            window.location.reload();
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,82 @@
+import Konva from 'konva';
+import { Render } from '../index';
+import { Handler } from '../types';
+
+// 文本创建操作
+
+export class TextHandlers implements Handler {
+  // @ts-ignore
+  static readonly name = 'Text';
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+  // 获取鼠标位置，并处理为相对大小
+  getStagePoint(attract = false) {
+    const pos = this.render.stage.getPointerPosition();
+    if (pos) {
+      const stageState = this.render.getStageState();
+      if (attract) {
+        const { pos: transformerPos } = this.render.attractTool.attractPoint(pos);
+        return {
+          x: this.render.toStageValue(transformerPos.x - stageState.x),
+          y: this.render.toStageValue(transformerPos.y - stageState.y)
+        };
+      } else {
+        return {
+          x: this.render.toStageValue(pos.x - stageState.x),
+          y: this.render.toStageValue(pos.y - stageState.y)
+        };
+      }
+    }
+    return null;
+  }
+  group: Konva.Group | null = null;
+  handlers = {
+    stage: {
+      mousedown: (e: Konva.KonvaEventObject<MouseEvent>) => {
+        // 只有在 texting 模式且点击空白区域时才创建文本
+        if (!this.render.texting) return;
+        const target = e.target;
+        // 检查是否点击在 stage 背景上（不是其他元素）
+        const isBackground = target === this.render.stage ||
+          (target.attrs && target.attrs.name && target.attrs.name.includes('background'));
+        if (!isBackground) return;
+        try {
+          // 清除当前选择
+          this.render.selectionTool.selectingClear();
+          this.render.linkTool.selectingClear();
+          const point = this.getStagePoint();
+          if (point) {
+            this.group = this.render.importExportTool.addTextAsset(point);
+            if (this.group) {
+              // 创建成功后立即选中文本
+              this.render.selectionTool.select([this.group]);
+            }
+          }
+        } catch (err) {
+          console.error('Failed to create text asset:', err);
+          this.group = null;
+        }
+      },
+      mouseup: () => {  // 重置 texting 状态
+        this.render.changeTexting(false);
+        this.group = null;
+      },
+      click: (e: Konva.KonvaEventObject<MouseEvent>) => { // 点击空白区域时，如果有文本创建了一半，也取消
+        if (!this.render.texting) return;
+        const target = e.target;
+        const isBackground = target === this.render.stage ||
+          (target.attrs && target.attrs.name && target.attrs.name.includes('background'));
+        if (isBackground) {
+          this.render.changeTexting(false);
+        }
+      }
+    },
+    transformer: {
+      dblclick: () => {
+        // 双击文本时显示编辑面板
+      }
+    }
+  }
+}

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

@@ -0,0 +1,60 @@
+import Konva from 'konva';
+import { Render } from '../index';
+import { Handler } from '../types';
+import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw, RefLineDraw, BgDraw } from '../draws';
+
+// 缩放
+
+export class ZoomHandlers implements Handler {
+  // @ts-ignore
+  static readonly name = 'Zoom';
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+  scaleBy = 0.1; // zoom 速度
+  // zoom 范围
+  scaleMin = 0.2;
+  scaleMax = 5;
+
+  handlers = {
+    stage: {
+      wheel: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['wheel']>) => {
+        const { scale: oldScale } = this.render.getStageState();
+        const isPinchToZoom = e.evt.ctrlKey;
+        const newScale = isPinchToZoom ? oldScale + (e.evt.deltaY < 0 ? this.scaleBy : -this.scaleBy) : oldScale;
+        const finalScale = Math.max(this.scaleMin, Math.min(this.scaleMax, newScale));
+        if (finalScale !== oldScale) {
+          const position = this.render.stage.getPosition();
+          const point = { x: e.evt.offsetX, y: e.evt.offsetY };
+          const mousePointTo = {
+            x: (point.x - position.x) / oldScale,
+            y: (point.y - position.y) / oldScale
+          };
+          const newPosition = {
+            x: -(mousePointTo.x * finalScale - point.x),
+            y: -(mousePointTo.y * finalScale - point.y)
+          };
+          this.render.emit('scale-change', finalScale);
+          this.render.stage.scale({ x: finalScale, y: finalScale });
+          this.render.stage.position(newPosition);
+        } else if (!isPinchToZoom) {
+          const position = this.render.stage.getPosition();
+          this.render.stage.position({
+            x: position.x - e.evt.deltaX,
+            y: position.y - e.evt.deltaY
+          });
+        }
+        // 重绘
+        this.render.redraw([
+          BgDraw.name,
+          GraphDraw.name,
+          LinkDraw.name,
+          RulerDraw.name,
+          RefLineDraw.name,
+          PreviewDraw.name
+        ]);
+      }
+    }
+  }
+}