@logicflow/extension 1.2.26 → 2.0.0-beta.0

package/src/components/selection-select/index.ts

@@ -0,0 +1,184 @@
+import LogicFlow from '@logicflow/core'
+
+import Position = LogicFlow.Position
+import PointTuple = LogicFlow.PointTuple
+
+export class SelectionSelect {
+  static pluginName = 'selectionSelect'
+  private container?: HTMLElement
+  private wrapper?: HTMLElement
+  private lf: LogicFlow
+  private startPoint?: Position
+  private endPoint?: Position
+  private disabled = true
+  private isDefaultStopMoveGraph = false
+  private isWholeNode = true
+  private isWholeEdge = true
+
+  constructor({ lf }: LogicFlow.ExtensionProps) {
+    this.lf = lf
+    // 初始化isDefaultStopMoveGraph取值
+    const { stopMoveGraph } = lf.getEditConfig()
+    this.isDefaultStopMoveGraph = stopMoveGraph!
+    // TODO: 有没有既能将方法挂载到lf上，又能提供类型提示的方法？
+    lf.openSelectionSelect = () => {
+      this.openSelectionSelect()
+    }
+    lf.closeSelectionSelect = () => {
+      this.closeSelectionSelect()
+    }
+  }
+
+  render(lf: LogicFlow, domContainer: HTMLElement) {
+    this.container = domContainer
+    lf.on('blank:mousedown', ({ e }: { e: MouseEvent }) => {
+      const config = lf.getEditConfig()
+      // 鼠标控制滚动移动画布的时候，不能选区。
+      if (!config.stopMoveGraph || this.disabled) {
+        return
+      }
+      // 禁用右键框选，修复可能导致画布出现多个框选框不消失的问题，见https://github.com/didi/LogicFlow/issues/985
+      const isRightClick = e.button === 2
+      if (isRightClick) {
+        return
+      }
+      const {
+        domOverlayPosition: { x, y },
+      } = lf.getPointByClient(e.clientX, e.clientY)
+      this.startPoint = {
+        x,
+        y,
+      }
+      this.endPoint = {
+        x,
+        y,
+      }
+      const wrapper = document.createElement('div')
+      wrapper.className = 'lf-selection-select'
+      wrapper.oncontextmenu = function prevent(ev: MouseEvent) {
+        ev.preventDefault()
+      }
+      wrapper.style.top = `${this.startPoint.y}px`
+      wrapper.style.left = `${this.startPoint.x}px`
+      domContainer.appendChild(wrapper)
+      this.wrapper = wrapper
+      document.addEventListener('mousemove', this.draw)
+      document.addEventListener('mouseup', this.drawOff)
+    })
+  }
+
+  /**
+   * 设置选中的灵敏度
+   * @param isWholeEdge 是否要边的起点终点都在选区范围才算选中。默认true
+   * @param isWholeNode 是否要节点的全部点都在选区范围才算选中。默认true
+   */
+  setSelectionSense(isWholeEdge = true, isWholeNode = true) {
+    this.isWholeEdge = isWholeEdge
+    this.isWholeNode = isWholeNode
+  }
+
+  /**
+   * 开启选区
+   */
+  openSelectionSelect() {
+    const { stopMoveGraph } = this.lf.getEditConfig()
+    if (!stopMoveGraph) {
+      this.isDefaultStopMoveGraph = false
+      this.lf.updateEditConfig({
+        stopMoveGraph: true,
+      })
+    }
+    this.open()
+  }
+
+  /**
+   * 关闭选区
+   */
+  closeSelectionSelect() {
+    if (!this.isDefaultStopMoveGraph) {
+      this.lf.updateEditConfig({
+        stopMoveGraph: false,
+      })
+    }
+    this.close()
+  }
+
+  private draw = (ev: MouseEvent) => {
+    const {
+      domOverlayPosition: { x: x1, y: y1 },
+    } = this.lf.getPointByClient(ev.clientX, ev.clientY)
+    this.endPoint = {
+      x: x1,
+      y: y1,
+    }
+    if (this.startPoint) {
+      const { x, y } = this.startPoint
+      let left = x
+      let top = y
+      let width = x1 - x
+      let height = y1 - y
+      if (x1 < x) {
+        left = x1
+        width = x - x1
+      }
+      if (y1 < y) {
+        top = y1
+        height = y - y1
+      }
+      if (this.wrapper) {
+        this.wrapper.style.left = `${left}px`
+        this.wrapper.style.top = `${top}px`
+        this.wrapper.style.width = `${width}px`
+        this.wrapper.style.height = `${height}px`
+      }
+    }
+  }
+  private drawOff = () => {
+    document.removeEventListener('mousemove', this.draw)
+    document.removeEventListener('mouseup', this.drawOff)
+    if (this.wrapper) {
+      this.wrapper.oncontextmenu = null
+      this.container?.removeChild(this.wrapper)
+    }
+    if (this.startPoint && this.endPoint) {
+      const { x, y } = this.startPoint
+      const { x: x1, y: y1 } = this.endPoint
+      // 返回框选范围，左上角和右下角的坐标
+      const lt: PointTuple = [Math.min(x, x1), Math.min(y, y1)]
+      const rt: PointTuple = [Math.max(x, x1), Math.max(y, y1)]
+      this.lf.emit('selection:selected-area', {
+        topLeft: lt,
+        bottomRight: rt,
+      })
+      // 选区太小的情况就忽略
+      if (Math.abs(x1 - x) < 10 && Math.abs(y1 - y) < 10) {
+        return
+      }
+      const elements = this.lf.graphModel.getAreaElement(
+        lt,
+        rt,
+        this.isWholeEdge,
+        this.isWholeNode,
+        true,
+      )
+      const { group } = this.lf.graphModel
+      elements.forEach((element) => {
+        // 如果节点属于分组，则不不选中节点
+        if (!group || !group.getNodeGroup(element.id)) {
+          this.lf.selectElementById(element.id, true)
+        }
+      })
+      this.lf.emit('selection:selected', elements)
+    }
+  }
+
+  private open() {
+    this.disabled = false
+  }
+
+  private close() {
+    this.disabled = true
+  }
+}
+
+export default SelectionSelect

package/src/index.less

@@ -0,0 +1 @@
+@import url('./style/index');

package/src/index.ts

@@ -0,0 +1,22 @@
+export * from './bpmn'
+export * from './bpmn-adapter'
+export * from './bpmn-elements'
+export * from './bpmn-elements-adapter'
+
+export * from './tools/snapshot'
+export * from './turbo-adapter'
+export * from './insert-node-in-polyline'
+export * from './components/control'
+export * from './components/menu'
+export * from './components/context-menu'
+export * from './components/dnd-panel'
+export * from './components/selection-select'
+export * from './components/mini-map'
+export * from './materials/curved-edge'
+export * from './materials/group'
+export * from './NodeResize'
+export * from './tools/flow-path'
+export * from './tools/auto-layout'
+export * from './bpmn-adapter/xml2json'
+export * from './bpmn-adapter/json2xml'
+export * from './components/highlight'

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

@@ -0,0 +1,175 @@
+import LogicFlow, { PolylineEdgeModel, BaseNodeModel } from '@logicflow/core'
+
+import Point = LogicFlow.Point
+
+// 这个里面的函数有些在core中已经存在，为了解耦关系，没有引用
+
+enum SegmentDirection {
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical',
+}
+
+/**
+ * 判断一个点是否在线段中
+ * @param point 判断的点
+ * @param start 线段的起点
+ * @param end 线段的终点
+ * @param deviation 误差范围
+ * @returns boolean
+ */
+export const isInSegment = (point, start, end, deviation = 0) => {
+  const distance = distToSegment(point, start, end)
+  return distance <= deviation
+}
+
+function sqr(x) {
+  return x * x
+}
+
+function dist2(v, w) {
+  return sqr(v.x - w.x) + sqr(v.y - w.y)
+}
+
+export const distToSegmentSquared = (p, v, w) => {
+  const l2 = dist2(v, w)
+  if (l2 === 0) return dist2(p, v)
+  let t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2
+  t = Math.max(0, Math.min(1, t))
+  return dist2(p, {
+    x: v.x + t * (w.x - v.x),
+    y: v.y + t * (w.y - v.y),
+  })
+}
+
+export const distToSegment = (point: Point, start: Point, end: Point) =>
+  Math.sqrt(distToSegmentSquared(point, start, end))
+
+/* 获取节点bbox */
+const getNodeBBox = (node: BaseNodeModel) => {
+  const { x, y, width, height } = node
+  const bBox = {
+    minX: x - width / 2,
+    minY: y - height / 2,
+    maxX: x + width / 2,
+    maxY: y + height / 2,
+    x,
+    y,
+    width,
+    height,
+    centerX: x,
+    centerY: y,
+  }
+  return bBox
+}
+
+/* 判断线段的方向 */
+const segmentDirection = (start: Point, end: Point) => {
+  let direction
+  if (start.x === end.x) {
+    direction = SegmentDirection.VERTICAL
+  } else if (start.y === end.y) {
+    direction = SegmentDirection.HORIZONTAL
+  }
+  return direction
+}
+
+// 节点是够在线段内，求出节点与线段的交点
+export const crossPointInSegment = (
+  node: BaseNodeModel,
+  start: Point,
+  end: Point,
+) => {
+  const bBox = getNodeBBox(node)
+  const direction = segmentDirection(start, end)
+  const maxX = Math.max(start.x, end.x)
+  const minX = Math.min(start.x, end.x)
+  const maxY = Math.max(start.y, end.y)
+  const minY = Math.min(start.y, end.y)
+  const { x, y, width, height } = node
+  if (direction === SegmentDirection.HORIZONTAL) {
+    // 同一水平线
+    if (maxX >= bBox.maxX && minX <= bBox.minX) {
+      return {
+        startCrossPoint: {
+          x: start.x > end.x ? x + width / 2 : x - width / 2,
+          y: start.y,
+        },
+        endCrossPoint: {
+          x: start.x > end.x ? x - width / 2 : x + width / 2,
+          y: start.y,
+        },
+      }
+    }
+  } else if (direction === SegmentDirection.VERTICAL) {
+    // 同一垂直线
+    if (maxY >= bBox.maxY && minY <= bBox.minY) {
+      return {
+        startCrossPoint: {
+          x: start.x,
+          y: start.y > end.y ? y + height / 2 : y - height / 2,
+        },
+        endCrossPoint: {
+          x: start.x,
+          y: start.y > end.y ? y - height / 2 : y + height / 2,
+        },
+      }
+    }
+  }
+}
+
+interface SegmentCross {
+  crossIndex: number
+  crossPoints: {
+    startCrossPoint: Point
+    endCrossPoint: Point
+  }
+}
+
+// 节点是否在线段内
+// eslint-disable-next-line max-len
+export const isNodeInSegment = (
+  node: BaseNodeModel,
+  polyline: PolylineEdgeModel,
+  deviation = 0,
+): SegmentCross => {
+  const { x, y } = node
+  const { pointsList } = polyline
+  for (let i = 0; i < pointsList.length - 1; i++) {
+    if (
+      isInSegment(
+        {
+          x,
+          y,
+        },
+        pointsList[i],
+        pointsList[i + 1],
+        deviation,
+      )
+    ) {
+      const bBoxCross = crossPointInSegment(
+        node,
+        pointsList[i],
+        pointsList[i + 1],
+      )
+      if (bBoxCross) {
+        return {
+          crossIndex: i + 1,
+          crossPoints: bBoxCross,
+        }
+      }
+    }
+  }
+  return {
+    crossIndex: -1,
+    crossPoints: {
+      startCrossPoint: {
+        x: 0,
+        y: 0,
+      },
+      endCrossPoint: {
+        x: 0,
+        y: 0,
+      },
+    },
+  }
+}

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

@@ -0,0 +1,187 @@
+import LogicFlow, {
+  BaseNodeModel,
+  PolylineEdgeModel,
+  EventType,
+  formateAnchorConnectValidateData,
+} 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 } =
+      formateAnchorConnectValidateData(sourceRuleResultData)
+    const { isAllPass: isTargetPass, msg: targetMsg } =
+      formateAnchorConnectValidateData(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

@@ -0,0 +1,43 @@
+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);
+  });
+});