@logicflow/core 2.1.1 → 2.1.3

package/src/model/NestedTransformModel.ts

@@ -0,0 +1,121 @@
+import LogicFlow from '../LogicFlow'
+import { TransformModel } from './TransformModel'
+import { Options as LFOptions } from '../options'
+import EventEmitter from '../event/eventEmitter'
+type PointTuple = LogicFlow.PointTuple
+
+export class NestedTransformModel extends TransformModel {
+  parentTransform?: TransformModel
+
+  constructor(eventCenter: EventEmitter, options: LFOptions.Common) {
+    super(eventCenter, options)
+    this.parentTransform = options.parentTransform
+  }
+
+  /**
+   * 设置父级变换
+   * @param parentTransform 父级变换模型
+   */
+  setParentTransform(parentTransform: TransformModel) {
+    this.parentTransform = parentTransform
+  }
+
+  /**
+   * 获取累积的缩放值
+   * 计算包括所有父级的累积缩放
+   */
+  private getCumulativeScale(): { scaleX: number; scaleY: number } {
+    let scaleX = this.SCALE_X
+    let scaleY = this.SCALE_Y
+
+    if (this.parentTransform) {
+      if (this.parentTransform instanceof NestedTransformModel) {
+        const parentScale = this.parentTransform.getCumulativeScale()
+        scaleX *= parentScale.scaleX
+        scaleY *= parentScale.scaleY
+      } else {
+        scaleX *= this.parentTransform.SCALE_X
+        scaleY *= this.parentTransform.SCALE_Y
+      }
+    }
+
+    return { scaleX, scaleY }
+  }
+
+  /**
+   * 获取累积的平移值
+   * 计算包括所有父级的累积平移
+   */
+  private getCumulativeTranslate(): { translateX: number; translateY: number } {
+    let translateX = this.TRANSLATE_X
+    let translateY = this.TRANSLATE_Y
+
+    if (
+      this.parentTransform &&
+      this.parentTransform instanceof NestedTransformModel
+    ) {
+      const { scaleX, scaleY } = this.parentTransform.getCumulativeScale()
+      translateX = scaleX * translateX
+      translateY = scaleY * translateY
+    }
+
+    return { translateX, translateY }
+  }
+
+  /**
+   * 将最外层graph上的点基于缩放转换为canvasOverlay层上的点。
+   * 重写以支持嵌套变换
+   * @param point HTML点
+   */
+  HtmlPointToCanvasPoint(point: PointTuple): PointTuple {
+    const [x, y] = point
+    const { scaleX, scaleY } = this.getCumulativeScale()
+    const { translateX, translateY } = this.getCumulativeTranslate()
+
+    return [(x - translateX) / scaleX, (y - translateY) / scaleY]
+  }
+
+  /**
+   * 将最外层canvasOverlay层上的点基于缩放转换为graph上的点。
+   * 重写以支持嵌套变换
+   * @param point Canvas点
+   */
+  CanvasPointToHtmlPoint(point: PointTuple): PointTuple {
+    const [x, y] = point
+    const { scaleX, scaleY } = this.getCumulativeScale()
+    const { translateX, translateY } = this.getCumulativeTranslate()
+
+    return [x * scaleX + translateX, y * scaleY + translateY]
+  }
+
+  /**
+   * 将一个在canvas上的点，向x轴方向移动directionX距离，向y轴方向移动directionY距离。
+   * 重写以支持嵌套变换
+   * @param point 点
+   * @param directionX x轴距离
+   * @param directionY y轴距离
+   */
+  moveCanvasPointByHtml(
+    point: PointTuple,
+    directionX: number,
+    directionY: number,
+  ): PointTuple {
+    const [x, y] = point
+    const { scaleX, scaleY } = this.getCumulativeScale()
+
+    return [x + directionX / scaleX, y + directionY / scaleY]
+  }
+
+  /**
+   * 根据缩放情况，获取缩放后的delta距离
+   * 重写以支持嵌套变换
+   * @param deltaX x轴距离变化
+   * @param deltaY y轴距离变化
+   */
+  fixDeltaXY(deltaX: number, deltaY: number): PointTuple {
+    const { scaleX, scaleY } = this.getCumulativeScale()
+    return [deltaX / scaleX, deltaY / scaleY]
+  }
+}
+
+export default NestedTransformModel

package/src/model/index.ts

@@ -4,5 +4,6 @@ export * from './node'
 export * from './BaseModel'
 export * from './EditConfigModel'
 export * from './GraphModel'
+export * from './NestedTransformModel'
 export * from './SnaplineModel'
 export * from './TransformModel'

package/src/options.ts

@@ -1,3 +1,5 @@
+import type { TransformModel } from './model'
+
 import { assign } from 'lodash-es'
 import { createElement as h } from 'preact/compat'
 import LogicFlow from './LogicFlow'
@@ -104,6 +106,9 @@ export namespace Options {
 
     customTrajectory?: (props: CustomAnchorLineProps) => h.JSX.Element
     themeMode?: 'radius' | 'dark' | 'colorful' // 主题模式
+
+    parentTransform?: TransformModel // 父级变换模型，用于嵌套变换
+
     [key: string]: unknown
   }
 

package/src/view/edge/BaseEdge.tsx

@@ -124,14 +124,23 @@ export abstract class BaseEdge<P extends IProps> extends Component<
     const { refY = 0, refX = 2 } = model.getArrowStyle()
     const [start, end] = this.getLastTwoPoints()
     let theta: string | number = 'auto'
-    if (start !== null && end !== null) {
-      theta = degrees(
-        getThetaOfVector({
-          x: end.x - start.x,
-          y: end.y - start.y,
-          z: 0,
-        }),
-      )
+    // 防止无效点和零长度向量以避免 NaN 方向
+    if (start && end) {
+      const dx = end.x - start.x
+      const dy = end.y - start.y
+      // 仅在有实际方向时才计算
+      if (dx !== 0 || dy !== 0) {
+        const computed = degrees(
+          getThetaOfVector({
+            x: dx,
+            y: dy,
+            z: 0,
+          }),
+        )
+        if (Number.isFinite(computed) && !Number.isNaN(computed)) {
+          theta = computed
+        }
+      }
     }
     return (
       <g>