feat(core): optimize the using of matrix

didi · Sep 11, 2023 · d13fc5c · d13fc5c
1 parent 8aa6053
commit d13fc5c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git a/packages/core/src/model/node/BaseNodeModel.ts b/packages/core/src/model/node/BaseNodeModel.ts
@@ -27,7 +27,7 @@ import { formatData } from '../../util/compatible';
 import { getClosestAnchor, pickNodeConfig } from '../../util/node';
 import { getZIndex } from '../../util/zIndex';
 import { BaseEdgeModel } from '../edge';
-import { Matrix, TranslateMatrix, RotateMatrix } from '../../util';
+import { Matrix } from '../../util';
 
 export type ConnectRule = {
   message: string;
@@ -482,12 +482,13 @@ export default class BaseNodeModel implements IBaseNodeModel {
 
   get anchors(): PointAnchor[] {
     const anchors = this.getAnchorsByOffset();
+    const { x, y, rotate } = this;
     anchors.forEach((anchor) => {
       const { x: anchorX, y: anchorY } = anchor;
       const [e, f] = new Matrix([anchorX, anchorY, 1])
-        .cross(new TranslateMatrix(-this.x, -this.y))
-        .cross(new RotateMatrix(this.rotate))
-        .cross(new TranslateMatrix(this.x, this.y))[0];
+        .translate(-x, -y)
+        .rotate(rotate)
+        .translate(x, y)[0];
       anchor.x = e;
       anchor.y = f;
     });

diff --git a/packages/core/src/util/matrix.ts b/packages/core/src/util/matrix.ts
@@ -59,6 +59,15 @@ export class Matrix extends Array {
     const [e, f] = this[2];
     return `matrix(${a} ${b} ${c} ${d} ${e} ${f})`;
   }
+  translate(tx: number, ty: number): Matrix {
+    return this.cross(new TranslateMatrix(tx, ty));
+  }
+  rotate(angle: number): Matrix {
+    return this.cross(new RotateMatrix(angle));
+  }
+  scale(sx: number, sy: number): Matrix {
+    return this.cross(new ScaleMatrix(sx, sy));
+  }
 }
 
 export class RotateMatrix extends Matrix {

diff --git a/packages/core/src/view/Rotate.tsx b/packages/core/src/view/Rotate.tsx
@@ -3,7 +3,7 @@ import { Component, h } from 'preact';
 import { map, reduce } from 'lodash';
 import Circle from './basic-shape/Circle';
 import { GraphModel, BaseNodeModel } from '../model';
-import { RotateMatrix, StepDrag, TranslateMatrix, Vector } from '../util';
+import { StepDrag, TranslateMatrix, Vector } from '../util';
 import EventEmitter from '../event/eventEmitter';
 import { CommonTheme } from '../constant/DefaultTheme';
 import { EventType } from '../constant/constant';
@@ -42,7 +42,7 @@ class RotateControlPoint extends Component<IProps> {
     });
     const v = new Vector(cx - x, cy - y);
     const angle = this.normal?.angle(v) - this.defaultAngle;
-    const matrix = new TranslateMatrix(-x, -y).cross(new RotateMatrix(angle)).cross(new TranslateMatrix(x, y)).toString();
+    const matrix = new TranslateMatrix(-x, -y).rotate(angle).translate(x, y).toString();
     nodeModel.gMatrix = matrix;
     nodeModel.rotate = angle;
 

diff --git a/packages/core/src/view/node/BaseNode.tsx b/packages/core/src/view/node/BaseNode.tsx
@@ -218,9 +218,7 @@ export default abstract class BaseNode extends Component<IProps, IState> {
     if (this.t) {
       cancelRaf(this.t);
     }
-    const matrix = new TranslateMatrix(-x, -y)
-      .cross(new RotateMatrix(model.rotate))
-      .cross(new TranslateMatrix(x, y)).toString();
+    const matrix = new TranslateMatrix(-x, -y).rotate(model.rotate).translate(x, y).toString();
     model.gMatrix = matrix;
     let moveNodes = selectNodes.map(node => node.id);
     // 未被选中的节点也可以拖动