@logicflow/extension 2.2.0 → 2.2.1

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

@@ -1,187 +0,0 @@
-import LogicFlow, {
-  BaseNodeModel,
-  PolylineEdgeModel,
-  EventType,
-  formatAnchorConnectValidateData,
-} 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])
-        const endPoint = cloneDeep(crossPoints.startCrossPoint)
-        this._lf.deleteEdge(id)
-        const checkResult = this.checkRuleBeforeInsetNode(
-          sourceNodeId,
-          targetNodeId,
-          sourceAnchorId!,
-          targetAnchorId!,
-          nodeData,
-        )
-        this._lf.addEdge({
-          type,
-          sourceNodeId,
-          targetNodeId: nodeData.id,
-          startPoint,
-          endPoint,
-          pointsList: [
-            ...pointsList.slice(0, crossIndex),
-            crossPoints.startCrossPoint,
-          ],
-        })
-        this._lf.addEdge({
-          type,
-          sourceNodeId: nodeData.id,
-          targetNodeId,
-          startPoint: cloneDeep(crossPoints.endCrossPoint),
-          endPoint: cloneDeep(pointsList[pointsList.length - 1]),
-          pointsList: [
-            crossPoints.endCrossPoint,
-            ...pointsList.slice(crossIndex),
-          ],
-        })
-        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,185 +0,0 @@
-import { PolylineEdge, PolylineEdgeModel, h, LogicFlow } from '@logicflow/core'
-import PointTuple = LogicFlow.PointTuple
-
-type DirectionType = 't' | 'b' | 'l' | 'r' | ''
-type ArcQuadrantType = 'tl' | 'tr' | 'bl' | 'br' | '-'
-
-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 []
-  }
-}
-
-function getPartialPath(
-  prev: PointTuple,
-  cur: PointTuple,
-  next: PointTuple,
-  radius: number,
-): string {
-  let dir1: DirectionType = ''
-  let dir2: DirectionType = ''
-
-  if (prev[0] === cur[0]) {
-    dir1 = prev[1] > cur[1] ? 't' : 'b'
-  } else if (prev[1] === cur[1]) {
-    dir1 = prev[0] > cur[0] ? 'l' : 'r'
-  }
-
-  if (cur[0] === next[0]) {
-    dir2 = cur[1] > next[1] ? 't' : 'b'
-  } else if (cur[1] === next[1]) {
-    dir2 = cur[0] > next[0] ? 'l' : 'r'
-  }
-
-  const r =
-    Math.min(
-      Math.hypot(cur[0] - prev[0], cur[1] - prev[1]) / 2,
-      Math.hypot(next[0] - cur[0], next[1] - cur[1]) / 2,
-      radius,
-    ) || (1 / 5) * radius
-
-  const key = `${dir1}${dir2}`
-  const orientation: ArcQuadrantType = directionMap[key] || '-'
-  let path = `L ${prev[0]} ${prev[1]}`
-
-  if (orientation === '-') {
-    path += `L ${cur[0]} ${cur[1]} L ${next[0]} ${next[1]}`
-  } else {
-    const [mid1, mid2] = getMidPoints(cur, key, orientation, r)
-    if (mid1 && mid2) {
-      path += `L ${mid1[0]} ${mid1[1]} Q ${cur[0]} ${cur[1]} ${mid2[0]} ${mid2[1]}`
-      ;[cur[0], cur[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 }