@logicflow/extension 2.2.0-alpha.7 → 2.2.1

package/src/insert-node-in-polyline/index.ts

@@ -1,193 +0,0 @@
-import LogicFlow, {
-  BaseNodeModel,
-  PolylineEdgeModel,
-  EventType,
-  formatAnchorConnectValidateData,
-  getClosestAnchor,
-} from '@logicflow/core'
-import { cloneDeep } from 'lodash-es'
-import { isNodeInSegment } from './edge'
-
-import NodeData = LogicFlow.NodeData
-
-export class InsertNodeInPolyline {
-  static pluginName = 'insertNodeInPolyline'
-  _lf: LogicFlow
-  dndAdd: boolean // dnd 添加节点到折线上的开关
-  dropAdd: boolean // 移动节点到折线上的开关
-  deviation: number // 节点中心距离直接距离小于该值时，认为节点在折线上
-  constructor({ lf }) {
-    this._lf = lf
-    // fix https://github.com/didi/LogicFlow/issues/754
-    this.deviation = 20
-    this.dndAdd = true
-    this.dropAdd = true
-    this.eventHandler()
-  }
-
-  eventHandler() {
-    // 监听事件
-    if (this.dndAdd) {
-      this._lf.on('node:dnd-add', ({ data }: { data: NodeData }) => {
-        this.insetNode(data)
-      })
-    }
-    if (this.dropAdd) {
-      this._lf.on('node:drop', ({ data }: { data: NodeData }) => {
-        const { edges } = this._lf.graphModel
-        const { id } = data
-        // 只有游离节点才能插入到连线上
-        let pureNode = true
-        for (let i = 0; i < edges.length; i++) {
-          if (edges[i].sourceNodeId === id || edges[i].targetNodeId === id) {
-            pureNode = false
-            break
-          }
-        }
-        if (pureNode) {
-          this.insetNode(data)
-        }
-      })
-    }
-  }
-
-  /**
-   * 插入节点前校验规则
-   * @param sourceNodeId
-   * @param targetNodeId
-   * @param sourceAnchorId
-   * @param targetAnchorId
-   * @param nodeData
-   */
-  // fix: https://github.com/didi/LogicFlow/issues/1078
-  checkRuleBeforeInsetNode(
-    sourceNodeId: string,
-    targetNodeId: string,
-    sourceAnchorId: string,
-    targetAnchorId: string,
-    nodeData: NodeData,
-  ) {
-    const sourceNodeModel = this._lf.getNodeModelById(sourceNodeId)!
-    const targetNodeModel = this._lf.getNodeModelById(targetNodeId)!
-
-    const sourceAnchorInfo = sourceNodeModel.getAnchorInfo(sourceAnchorId)!
-    const targetAnchorInfo = targetNodeModel.getAnchorInfo(targetAnchorId)!
-
-    // TODO: nodeData 与 isAllowConnectedAsSource 方法需要的类型 BaseNodeModel 不一致，少了 target 属性等，需要验证是否可用。
-    const sourceRuleResultData = sourceNodeModel.isAllowConnectedAsSource(
-      nodeData as BaseNodeModel,
-      sourceAnchorInfo,
-      targetAnchorInfo,
-    )
-    const targetRuleResultData = targetNodeModel.isAllowConnectedAsTarget(
-      nodeData as BaseNodeModel,
-      sourceAnchorInfo,
-      targetAnchorInfo,
-    )
-
-    const { isAllPass: isSourcePass, msg: sourceMsg } =
-      formatAnchorConnectValidateData(sourceRuleResultData)
-    const { isAllPass: isTargetPass, msg: targetMsg } =
-      formatAnchorConnectValidateData(targetRuleResultData)
-
-    return {
-      isPass: isSourcePass && isTargetPass,
-      sourceMsg,
-      targetMsg,
-    }
-  }
-
-  insetNode(nodeData: NodeData): void {
-    const { edges } = this._lf.graphModel
-    const nodeModel = this._lf.getNodeModelById(nodeData.id)
-
-    // fix: https://github.com/didi/LogicFlow/issues/1077
-    // 参照https://github.com/didi/LogicFlow/issues/454=>当getDefaultAnchor(){return []}表示：不显示锚点，也不允许其他节点连接到此节点
-    // 当getDefaultAnchor=[]，直接阻止下面进行edges的截断插入node相关逻辑
-    const anchorArray = nodeModel?.getDefaultAnchor()
-    const isNotAllowConnect = !anchorArray || anchorArray.length === 0
-    if (isNotAllowConnect) {
-      this._lf.graphModel.eventCenter.emit(EventType.CONNECTION_NOT_ALLOWED, {
-        data: nodeData,
-        msg: '自定义类型节点不显示锚点，也不允许其他节点连接到此节点',
-      })
-      return
-    }
-
-    if (!nodeModel) return
-    for (let i = 0; i < edges.length; i++) {
-      const { crossIndex, crossPoints } = isNodeInSegment(
-        nodeModel,
-        edges[i] as PolylineEdgeModel,
-        this.deviation,
-      )
-      if (crossIndex >= 0) {
-        const {
-          sourceNodeId,
-          targetNodeId,
-          id,
-          type,
-          pointsList,
-          sourceAnchorId,
-          targetAnchorId,
-        } = edges[i]
-        // fix https://github.com/didi/LogicFlow/issues/996
-        const startPoint = cloneDeep(pointsList[0])
-        this._lf.deleteEdge(id)
-        const checkResult = this.checkRuleBeforeInsetNode(
-          sourceNodeId,
-          targetNodeId,
-          sourceAnchorId!,
-          targetAnchorId!,
-          nodeData,
-        )
-        // 基于插入节点的进入交点计算出最近的“进入锚点”，用于重连原边的前半段
-        const entryAnchorInfo = getClosestAnchor(
-          crossPoints.startCrossPoint,
-          nodeModel,
-        )
-        const entryAnchor = entryAnchorInfo.anchor
-        // 构造第一条边：原 source → 插入节点（终点为进入锚点）
-        this._lf.addEdge({
-          type,
-          sourceNodeId,
-          targetNodeId: nodeData.id,
-          startPoint,
-          endPoint: entryAnchor,
-        })
-        // 基于插入节点的离开交点计算出最近的“离开锚点”，用于重连原边的后半段
-        const exitAnchorInfo = getClosestAnchor(
-          crossPoints.endCrossPoint,
-          nodeModel,
-        )
-        const exitAnchor = exitAnchorInfo.anchor
-        // 构造第二条边：插入节点 → 原 target（起点为离开锚点）
-        this._lf.addEdge({
-          type,
-          sourceNodeId: nodeData.id,
-          targetNodeId,
-          startPoint: cloneDeep(exitAnchor),
-          endPoint: cloneDeep(pointsList[pointsList.length - 1]),
-        })
-        if (!checkResult.isPass) {
-          this._lf.graphModel.eventCenter.emit(
-            EventType.CONNECTION_NOT_ALLOWED,
-            {
-              data: nodeData,
-              msg: checkResult.targetMsg || checkResult.sourceMsg,
-            },
-          )
-          // FIXME:在关闭了历史记录的情况下，撤销操作会不生效。
-          setTimeout(() => {
-            this._lf.undo()
-          }, 200)
-          break
-        } else {
-          break
-        }
-      }
-    }
-  }
-}
-
-export default InsertNodeInPolyline

package/src/materials/curved-edge/__test__/curved-edge.test.ts

@@ -1,46 +0,0 @@
-import { getCurvedEdgePath } from '../index'
-
-describe('test curved edge ', () => {
-  test('path calculation', () => {
-    const radius = 5
-
-    const points1 = '460,150 670,150'
-    const path1 = 'M460 150 L 670 150'
-    expect(
-      getCurvedEdgePath(
-        points1.split(' ').map((p) => p.split(',').map((a) => +a)),
-        radius,
-      ),
-    ).toBe(path1)
-
-    const points2 = '510,250 540,250 540,175 490,175 490,100 520,100'
-    const path2 =
-      'M510 250L 510 250L 535 250 Q 540 250 540 245L 540 245L 540 180 Q 540 175 535 175L 535 175L 495 175 Q 490 175 490 170L 490 170L 490 105 Q 490 100 495 100L 520 100'
-    expect(
-      getCurvedEdgePath(
-        points2.split(' ').map((p) => p.split(',').map((a) => +a)),
-        radius,
-      ),
-    ).toBe(path2)
-
-    const points3 = '690,120 720,120 720,50 560,50 560,260 690,260'
-    const path3 =
-      'M690 120L 690 120L 715 120 Q 720 120 720 115L 720 115L 720 55 Q 720 50 715 50L 715 50L 565 50 Q 560 50 560 55L 560 55L 560 255 Q 560 260 565 260L 690 260'
-    expect(
-      getCurvedEdgePath(
-        points3.split(' ').map((p) => p.split(',').map((a) => +a)),
-        radius,
-      ),
-    ).toBe(path3)
-
-    const point4 = '690,180 690,210 660,210 660,190 630,190 630,220'
-    const path4 =
-      'M690 180L 690 180L 690 205 Q 690 210 685 210L 685 210L 665 210 Q 660 210 660 205L 660 205L 660 195 Q 660 190 655 190L 655 190L 635 190 Q 630 190 630 195L 630 220'
-    expect(
-      getCurvedEdgePath(
-        point4.split(' ').map((p) => p.split(',').map((a) => +a)),
-        radius,
-      ),
-    ).toBe(path4)
-  })
-})

package/src/materials/curved-edge/index.ts

@@ -1,217 +0,0 @@
-import { PolylineEdge, PolylineEdgeModel, h, LogicFlow } from '@logicflow/core'
-import PointTuple = LogicFlow.PointTuple
-
-// 方向类型：t=上(top), b=下(bottom), l=左(left), r=右(right)，'' 表示未确定
-type DirectionType = 't' | 'b' | 'l' | 'r' | ''
-// 圆弧所在象限：tl=左上，tr=右上，bl=左下，br=右下，'-' 表示不需要圆弧
-type ArcQuadrantType = 'tl' | 'tr' | 'bl' | 'br' | '-'
-
-// 方向组合到圆弧象限的映射。
-// key 由进入方向(dir1)和离开方向(dir2)拼接，例如 'tr' 表示从上(t)到右(r)的拐角。
-// 通过该映射确定在拐点处应该绘制的圆弧象限，用于计算中间控制点。
-const directionMap: {
-  [key: string]: ArcQuadrantType
-} = {
-  tr: 'tl',
-  lb: 'tl',
-  tl: 'tr',
-  rb: 'tr',
-  br: 'bl',
-  lt: 'bl',
-  bl: 'br',
-  rt: 'br',
-}
-
-// 过滤折线中的共线中间点，减少不必要的顶点
-function pointFilter(points: number[][]) {
-  // 原地修改传入的数组
-  const all = points
-  // 从第二个点开始，检查三点是否共线
-  let i = 1
-  while (i < all.length - 1) {
-    const [x, y] = all[i - 1]
-    const [x1, y1] = all[i]
-    const [x2, y2] = all[i + 1]
-    // 如果三点在同一条水平或垂直直线上，删除中间点
-    if ((x === x1 && x1 === x2) || (y === y1 && y1 === y2)) {
-      all.splice(i, 1)
-    } else {
-      i++
-    }
-  }
-  // 返回精简后的点集
-  return all
-}
-
-function getMidPoints(
-  cur: PointTuple,
-  key: string,
-  orientation: ArcQuadrantType,
-  radius: number,
-) {
-  const mid1 = [cur[0], cur[1]]
-  const mid2 = [cur[0], cur[1]]
-  switch (orientation) {
-    case 'tl': {
-      if (key === 'tr') {
-        mid1[1] += radius
-        mid2[0] += radius
-      } else if (key === 'lb') {
-        mid1[0] += radius
-        mid2[1] += radius
-      }
-      return [mid1, mid2]
-    }
-    case 'tr': {
-      if (key === 'tl') {
-        mid1[1] += radius
-        mid2[0] -= radius
-      } else if (key === 'rb') {
-        mid1[0] -= radius
-        mid2[1] += radius
-      }
-      return [mid1, mid2]
-    }
-    case 'bl': {
-      if (key === 'br') {
-        mid1[1] -= radius
-        mid2[0] += radius
-      } else if (key === 'lt') {
-        mid1[0] += radius
-        mid2[1] -= radius
-      }
-      return [mid1, mid2]
-    }
-    case 'br': {
-      if (key === 'bl') {
-        mid1[1] -= radius
-        mid2[0] -= radius
-      } else if (key === 'rt') {
-        mid1[0] -= radius
-        mid2[1] -= radius
-      }
-      return [mid1, mid2]
-    }
-    default:
-      return []
-  }
-}
-
-/**
- * 生成局部路径片段（包含圆角）
- * - 输入为上一个顶点、当前拐点、下一个顶点，计算方向组合并选择圆弧象限
- * - 将圆角半径限制在相邻两段长度的一半以内，避免过度弯曲
- * @param prevPoint 上一个顶点
- * @param cornerPoint 当前拐点（圆角所在拐点）
- * @param nextPoint 下一个顶点
- * @param cornerRadius 圆角半径上限
- * @returns 局部 path 字符串（包含 L/Q 操作）
- */
-function getPartialPath(
-  prevPoint: PointTuple,
-  cornerPoint: PointTuple,
-  nextPoint: PointTuple,
-  cornerRadius: number,
-): string {
-  // 轴对齐容差（像素），用于消除微小误差
-  const epsilon = 1
-
-  const resolveDir = (a: PointTuple, b: PointTuple): DirectionType => {
-    const dx = b[0] - a[0]
-    const dy = b[1] - a[1]
-    const adx = Math.abs(dx)
-    const ady = Math.abs(dy)
-    if (ady <= epsilon && adx > epsilon) {
-      return dx < 0 ? 'l' : 'r'
-    }
-    if (adx <= epsilon && ady > epsilon) {
-      return dy < 0 ? 't' : 'b'
-    }
-    if (adx <= epsilon && ady <= epsilon) {
-      return ''
-    }
-    // 非严格对齐时，选择更接近的轴
-    return adx < ady ? (dx < 0 ? 'l' : 'r') : dy < 0 ? 't' : 'b'
-  }
-
-  const dir1: DirectionType = resolveDir(prevPoint, cornerPoint)
-  const dir2: DirectionType = resolveDir(cornerPoint, nextPoint)
-
-  const r =
-    Math.min(
-      Math.hypot(cornerPoint[0] - prevPoint[0], cornerPoint[1] - prevPoint[1]) /
-        2,
-      Math.hypot(nextPoint[0] - cornerPoint[0], nextPoint[1] - cornerPoint[1]) /
-        2,
-      cornerRadius,
-    ) || (1 / 5) * cornerRadius
-
-  const key = `${dir1}${dir2}`
-  const orientation: ArcQuadrantType = directionMap[key] || '-'
-  let path = ''
-
-  if (orientation === '-') {
-    // 仅移动到当前拐点，由下一次迭代决定如何从拐点继续（直线或圆角）
-    path += `L ${cornerPoint[0]} ${cornerPoint[1]}`
-  } else {
-    const [mid1, mid2] = getMidPoints(cornerPoint, key, orientation, r)
-    if (mid1 && mid2) {
-      path += `L ${mid1[0]} ${mid1[1]} Q ${cornerPoint[0]} ${cornerPoint[1]} ${mid2[0]} ${mid2[1]}`
-      ;[cornerPoint[0], cornerPoint[1]] = mid2
-    }
-  }
-  return path
-}
-
-function getCurvedEdgePath(points: number[][], radius: number): string {
-  let i = 0
-  let d = ''
-  if (points.length === 2) {
-    d += `M${points[i][0]} ${points[i++][1]} L ${points[i][0]} ${points[i][1]}`
-  } else {
-    d += `M${points[i][0]} ${points[i++][1]}`
-    for (; i + 1 < points.length; ) {
-      const prev = points[i - 1] as PointTuple
-      const cur = points[i] as PointTuple
-      const next = points[i++ + 1] as PointTuple
-      d += getPartialPath(prev, cur, next, radius as number)
-    }
-    d += `L ${points[i][0]} ${points[i][1]}`
-  }
-  return d
-}
-
-class CurvedEdge extends PolylineEdge {
-  getEdge(): h.JSX.Element {
-    const { model } = this.props
-    const { points: pointsStr, isAnimation, arrowConfig, radius = 5 } = model
-    const style = model.getEdgeStyle()
-    const animationStyle = model.getEdgeAnimationStyle()
-    const points = pointFilter(
-      pointsStr.split(' ').map((p) => p.split(',').map((a) => +a)),
-    )
-    const d = getCurvedEdgePath(points, radius as number)
-    const attrs = {
-      style: isAnimation ? animationStyle : {},
-      ...style,
-      ...arrowConfig,
-      fill: 'none',
-    }
-    return h('path', {
-      d,
-      ...attrs,
-    })
-  }
-}
-
-class CurvedEdgeModel extends PolylineEdgeModel {}
-
-const defaultCurvedEdge = {
-  type: 'curved-edge',
-  view: CurvedEdge,
-  model: CurvedEdgeModel,
-}
-
-export default defaultCurvedEdge
-
-export { CurvedEdge, CurvedEdgeModel, getCurvedEdgePath }