fix(core): node => rotate+正常模式resize(#1428)

examples/feature-examples/src/pages/graph/index.tsx

@@ -551,6 +551,20 @@ export default function BasicNode() {
         >
           删除节点
         </Button>
+        <Button
+          type="primary"
+          onClick={() => {
+            if (lfRef.current) {
+              const graphData = lfRef.current?.getEditConfig()
+              const { allowResize } = graphData
+              lfRef.current.updateEditConfig({
+                allowResize: !allowResize,
+              })
+            }
+          }}
+        >
+          切换allowResize
+        </Button>
       </Flex>
       <Divider orientation="left" orientationMargin="5" plain>
         节点面板

packages/core/src/algorithm/rotate.ts

@@ -0,0 +1,55 @@
+export interface SimplePoint {
+  x: number
+  y: number
+}
+
+/**
+ * 根据两个点获取中心点坐标
+ */
+export function getNewCenter(startPoint: SimplePoint, endPoint: SimplePoint) {
+  const { x: x1, y: y1 } = startPoint
+  const { x: x2, y: y2 } = endPoint
+  const newCenter = {
+    x: x1 + (x2 - x1) / 2,
+    y: y1 + (y2 - y1) / 2,
+  }
+  return newCenter
+}
+
+/**
+ * 旋转矩阵公式，可以获取某一个坐标旋转angle后的坐标
+ * @param p 当前坐标
+ * @param center 旋转中心
+ * @param angle 旋转角度（不是弧度）
+ */
+export function calculatePointAfterRotateAngle(
+  p: SimplePoint,
+  center: SimplePoint,
+  angle: number,
+) {
+  const radian = angleToRadian(angle)
+  const dx = p.x - center.x
+  const dy = p.y - center.y
+  const x = dx * Math.cos(radian) - dy * Math.sin(radian) + center.x
+  const y = dx * Math.sin(radian) + dy * Math.cos(radian) + center.y
+  return {
+    x,
+    y,
+  }
+}
+
+/**
+ * 角度转弧度
+ * @param angle 角度
+ */
+export function angleToRadian(angle: number) {
+  return (angle * Math.PI) / 180
+}
+
+/**
+ * 弧度转角度
+ * @param radian 弧度
+ */
+export function radianToAngle(radian: number) {
+  return (radian / Math.PI) * 180
+}

packages/core/src/model/node/BaseNodeModel.ts

@@ -699,6 +699,10 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
       this.y = this.y + deltaY
       this.text && this.moveText(0, deltaY)
     }
+    if (isAllowMoveX || isAllowMoveY) {
+      // 更新x和y的同时也要更新对应的transform旋转矩阵（依赖x、y)
+      this.rotate = this._rotate
+    }
     return isAllowMoveX || isAllowMoveY
   }