From d13fc5c50dcc25727ca8646ea1afe9a250d444d5 Mon Sep 17 00:00:00 2001 From: wumail <1059037014@qq.com> Date: Thu, 7 Sep 2023 15:57:22 +0800 Subject: [PATCH] feat(core): optimize the using of matrix --- packages/core/src/model/node/BaseNodeModel.ts | 9 +++++---- packages/core/src/util/matrix.ts | 9 +++++++++ packages/core/src/view/Rotate.tsx | 4 ++-- packages/core/src/view/node/BaseNode.tsx | 4 +--- 4 files changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/core/src/model/node/BaseNodeModel.ts b/packages/core/src/model/node/BaseNodeModel.ts index 67cfd6984..84ab3a550 100644 --- 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 index 7263ea48c..18f63e8ff 100644 --- 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 index 76ba0c1f4..ffe31ce9d 100644 --- 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 { }); 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 index c8d9bafbb..884d08a9e 100644 --- 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 { 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); // 未被选中的节点也可以拖动