@logicflow/core 1.2.27 → 2.0.0-beta.0

package/src/view/behavior/dnd.ts

@@ -0,0 +1,116 @@
+import { get } from 'lodash-es'
+import LogicFlow from '../../LogicFlow'
+import { BaseNodeModel } from '../../model'
+import { snapToGrid } from '../../util'
+import { EventType } from '../../constant'
+
+import Position = LogicFlow.Position
+import OnDragNodeConfig = LogicFlow.OnDragNodeConfig
+
+export class Dnd {
+  nodeConfig: OnDragNodeConfig | null = null
+  lf: LogicFlow
+  fakeNode: BaseNodeModel | null = null
+
+  constructor(params: { lf: LogicFlow }) {
+    const { lf } = params
+    this.lf = lf
+  }
+
+  clientToLocalPoint({ x, y }: Position): Position {
+    const gridSize = get(this.lf.options, ['grid', 'size'])
+    // 处理 container 的 offset 等
+    const position = this.lf.graphModel.getPointByClient({
+      x,
+      y,
+    })
+    // 处理缩放和偏移
+    const { x: x1, y: y1 } = position.canvasOverlayPosition
+    // x, y 对齐到网格的 size
+    return {
+      x: snapToGrid(x1, gridSize),
+      y: snapToGrid(y1, gridSize),
+    }
+  }
+
+  startDrag(nodeConfig: OnDragNodeConfig) {
+    const { editConfigModel } = this.lf.graphModel
+    if (!editConfigModel?.isSilentMode) {
+      this.nodeConfig = nodeConfig
+      window.document.addEventListener('mouseup', this.stopDrag)
+    }
+  }
+
+  stopDrag = () => {
+    this.nodeConfig = null
+    window.document.removeEventListener('mouseup', this.stopDrag)
+  }
+  dragEnter = (e: MouseEvent) => {
+    if (!this.nodeConfig || this.fakeNode) return
+    this.fakeNode = this.lf.createFakeNode({
+      ...this.nodeConfig,
+      ...this.clientToLocalPoint({
+        x: e.clientX,
+        y: e.clientY,
+      }),
+    })
+  }
+  onDragOver = (e: MouseEvent) => {
+    e.preventDefault()
+    if (this.fakeNode) {
+      const { x, y } = this.clientToLocalPoint({
+        x: e.clientX,
+        y: e.clientY,
+      })
+      this.fakeNode.moveTo(x, y)
+      const nodeData = this.fakeNode.getData()
+      this.lf.setNodeSnapLine(nodeData)
+      this.lf.graphModel.eventCenter.emit(EventType.NODE_DND_DRAG, {
+        data: nodeData,
+      })
+    }
+    return false
+  }
+  onDragLeave = () => {
+    if (this.fakeNode) {
+      this.lf.removeNodeSnapLine()
+      this.lf.graphModel.removeFakeNode()
+      this.fakeNode = null
+    }
+  }
+  onDrop = (e: MouseEvent) => {
+    if (!this.lf.graphModel || !e || !this.nodeConfig) {
+      return
+    }
+    this.lf.addNode(
+      {
+        ...this.nodeConfig,
+        ...this.clientToLocalPoint({
+          x: e.clientX,
+          y: e.clientY,
+        }),
+      },
+      EventType.NODE_DND_ADD,
+      e,
+    )
+    e.preventDefault()
+    e.stopPropagation()
+    this.nodeConfig = null
+    this.lf.removeNodeSnapLine()
+    this.lf.graphModel.removeFakeNode()
+    this.fakeNode = null
+  }
+
+  eventMap() {
+    return {
+      onMouseEnter: this.dragEnter,
+      onMouseOver: this.dragEnter, // IE11
+      onMouseMove: this.onDragOver,
+      onMouseLeave: this.onDragLeave,
+      // onMouseOut: this.onDragLeave, // IE11
+      onMouseUp: this.onDrop,
+    }
+  }
+}
+
+export default Dnd

package/src/view/edge/AdjustPoint.tsx

@@ -0,0 +1,439 @@
+import { createElement as h, Component } from 'preact/compat'
+import LogicFlow from '../../LogicFlow'
+import { GraphModel, BaseNodeModel, BaseEdgeModel, Model } from '../../model'
+import {
+  IDragParams,
+  StepDrag,
+  formateAnchorConnectValidateData,
+  targetNodeInfo,
+  NodeContaint,
+} from '../../util'
+import { ElementState, EventType, ModelType } from '../../constant'
+import Point = LogicFlow.Point
+import NodeData = LogicFlow.NodeData
+import AnchorConfig = Model.AnchorConfig
+
+interface IProps {
+  x: number
+  y: number
+  type: AdjustType
+  id?: string
+  getAdjustPointShape: (
+    x: number,
+    y: number,
+    model: BaseEdgeModel,
+  ) => h.JSX.Element | null
+  graphModel: GraphModel
+  edgeModel: BaseEdgeModel
+}
+
+interface IState {
+  dragging: boolean
+  endX: number
+  endY: number
+}
+
+interface OldEdge {
+  startPoint: Point
+  endPoint: Point
+  pointsList: Point[]
+}
+
+export enum AdjustType {
+  SOURCE = 'SOURCE',
+  TARGET = 'TARGET',
+}
+
+export class AdjustPoint extends Component<IProps, IState> {
+  stepDragData: any
+  stepDrag: StepDrag
+  oldEdge?: OldEdge
+  preTargetNode: any
+  targetRuleResults: Map<any, any>
+  sourceRuleResults: Map<any, any>
+
+  constructor(props: IProps) {
+    super()
+    this.state = {
+      dragging: false,
+      endX: 0,
+      endY: 0,
+    }
+    this.targetRuleResults = new Map()
+    this.sourceRuleResults = new Map()
+    const { type, edgeModel, graphModel } = props
+    const { eventCenter } = graphModel
+    this.stepDragData = {
+      type,
+      edgeData: edgeModel.getData(),
+    }
+    this.stepDrag = new StepDrag({
+      onDragStart: this.onDragStart,
+      onDragging: this.onDragging,
+      onDragEnd: this.onDragEnd,
+      eventType: 'ADJUST_POINT',
+      isStopPropagation: false,
+      eventCenter,
+      data: this.stepDragData,
+    })
+  }
+
+  handleMouseDown = (ev: MouseEvent) => {
+    if (this.stepDrag) {
+      this.stepDrag.handleMouseDown(ev)
+    }
+  }
+  onDragStart = () => {
+    const { x, y, edgeModel } = this.props
+    const { startPoint, endPoint, pointsList } = edgeModel
+    // 记录下原始路径信息，在调整中，如果放弃调整，进行路径还原
+    this.oldEdge = {
+      startPoint,
+      endPoint,
+      pointsList,
+    }
+    this.setState({
+      endX: x,
+      endY: y,
+      dragging: true,
+    })
+    // 拖拽AdjustPoint时不修改edgeModel.isHitable，避免偶尔会出现边不能点击问题(https://github.com/didi/LogicFlow/issues/974)
+    // edgeModel.isHitable = false;
+  }
+  onDragging = ({ deltaX, deltaY }: IDragParams) => {
+    const { endX, endY } = this.state
+    const { graphModel, type } = this.props
+    const { transformModel, editConfigModel } = graphModel
+    const [x, y] = transformModel.moveCanvasPointByHtml(
+      [endX, endY],
+      deltaX,
+      deltaY,
+    )
+    this.setState({
+      endX: x,
+      endY: y,
+      dragging: true,
+    })
+    // 调整过程中实时更新路径
+    const { edgeModel } = this.props
+    const info = targetNodeInfo(
+      {
+        x: endX,
+        y: endY,
+      },
+      graphModel,
+    )
+    // 如果一定的坐标能够找到目标节点，预结算当前节点与目标节点的路径进行展示
+    if (info && info.node && this.isAllowAdjust(info).pass) {
+      let params: {
+        startPoint: Point
+        endPoint: Point
+        sourceNode: BaseNodeModel
+        targetNode: BaseNodeModel
+      }
+      const { startPoint, endPoint, sourceNode, targetNode } = edgeModel
+      if (type === AdjustType.SOURCE) {
+        params = {
+          startPoint: {
+            x: info.anchor.x,
+            y: info.anchor.y,
+          },
+          endPoint: {
+            x: endPoint.x,
+            y: endPoint.y,
+          },
+          sourceNode: info.node,
+          targetNode,
+        }
+      } else if (type === AdjustType.TARGET) {
+        params = {
+          startPoint: {
+            x: startPoint.x,
+            y: startPoint.y,
+          },
+          endPoint: {
+            x: info.anchor.x,
+            y: info.anchor.y,
+          },
+          sourceNode,
+          targetNode: info.node,
+        }
+      }
+      edgeModel.updateAfterAdjustStartAndEnd(params!)
+    } else if (type === AdjustType.SOURCE) {
+      // 如果没有找到目标节点，更显起终点为当前坐标
+      edgeModel.updateStartPoint({
+        x,
+        y,
+      })
+    } else if (type === AdjustType.TARGET) {
+      edgeModel.updateEndPoint({
+        x,
+        y,
+      })
+    }
+
+    if (edgeModel.text.value && editConfigModel.adjustEdge) {
+      edgeModel.setText(
+        Object.assign({}, edgeModel.text, edgeModel.textPosition),
+      )
+    }
+  }
+  onDragEnd = ({ event }: Partial<IDragParams>) => {
+    try {
+      // 将状态置为非拖拽状态
+      this.setState({
+        dragging: false,
+      })
+      const { graphModel, edgeModel, type } = this.props
+      // 拖拽AdjustPoint时不修改edgeModel.isHitable，避免偶尔会出现边不能点击问题(https://github.com/didi/LogicFlow/issues/974)
+      // edgeModel.isHitable = true;
+      const { endX, endY, dragging } = this.state
+      const info = targetNodeInfo(
+        {
+          x: endX,
+          y: endY,
+        },
+        graphModel,
+      )
+      // 没有dragging就结束边
+      if (!dragging) return
+      // 如果找到目标节点，删除老边，创建新边
+      let needRecoveryEdge = false
+      let createEdgeInfo: LogicFlow.EdgeConfig
+      if (info && info.node) {
+        const { pass, msg, newTargetNode } = this.isAllowAdjust(info)
+        if (pass) {
+          const {
+            text,
+            sourceAnchorId = '',
+            targetAnchorId = '',
+            ...rest
+          } = edgeModel.getData()
+          createEdgeInfo = {
+            sourceAnchorId,
+            targetAnchorId,
+            ...rest,
+            text: text?.value || '',
+          }
+          // 根据调整点是边的起点或重点，计算创建边需要的参数
+          if (type === AdjustType.SOURCE) {
+            const sourceNode = graphModel.getNodeModelById(info.node.id)
+            const targetNode = graphModel.getNodeModelById(
+              edgeModel.targetNodeId,
+            )
+            const edgeInfo = graphModel.edgeGenerator?.(
+              sourceNode?.getData() as NodeData,
+              targetNode?.getData() as NodeData,
+              createEdgeInfo,
+            )
+            createEdgeInfo = {
+              ...edgeInfo,
+              sourceNodeId: info.node.id,
+              sourceAnchorId: info.anchor.id,
+              startPoint: {
+                x: info.anchor.x,
+                y: info.anchor.y,
+              },
+              targetNodeId: edgeModel.targetNodeId,
+              endPoint: { ...edgeModel.endPoint },
+            }
+            // 找到的是原有的源节点上的原锚点时，还原边
+            if (
+              edgeModel.sourceNodeId === info.node.id &&
+              edgeModel.sourceAnchorId === info.anchor.id
+            ) {
+              needRecoveryEdge = true
+            }
+          } else if (type === AdjustType.TARGET) {
+            const sourceNode = graphModel.getNodeModelById(
+              edgeModel.sourceNodeId,
+            )
+            const targetNode = graphModel.getNodeModelById(info.node.id)
+            const edgeInfo = graphModel.edgeGenerator?.(
+              sourceNode?.getData() as NodeData,
+              targetNode?.getData() as NodeData,
+              createEdgeInfo,
+            )
+            createEdgeInfo = {
+              ...edgeInfo,
+              sourceNodeId: edgeModel.sourceNodeId,
+              startPoint: { ...edgeModel.startPoint },
+              targetNodeId: info.node.id,
+              targetAnchorId: info.anchor.id,
+              endPoint: {
+                x: info.anchor.x,
+                y: info.anchor.y,
+              },
+            }
+            // 找到的是原有的目标节点上的原锚点时，还原边
+            if (
+              edgeModel.targetNodeId === info.node.id &&
+              edgeModel.targetAnchorId === info.anchor.id
+            ) {
+              needRecoveryEdge = true
+            }
+          }
+        } else {
+          // 如果没有通过校验，还原边并抛出CONNECTION_NOT_ALLOWED事件
+          needRecoveryEdge = true
+          const nodeData = newTargetNode.getData()
+          graphModel.eventCenter.emit(EventType.CONNECTION_NOT_ALLOWED, {
+            data: nodeData,
+            msg,
+          })
+        }
+      } else {
+        // 如果没有找到目标节点，还原边
+        needRecoveryEdge = true
+      }
+      if (!needRecoveryEdge) {
+        // 为了保证id不变必须要先删除老边，再创建新边，创建新边是会判断是否有重复的id
+        // 删除老边
+        const oldEdgeData = edgeModel.getData()
+        graphModel.deleteEdgeById(edgeModel.id)
+        // 创建新边
+        const edge = graphModel.addEdge({ ...createEdgeInfo! })
+        // 向外抛出事件
+        graphModel.eventCenter.emit(EventType.EDGE_EXCHANGE_NODE, {
+          data: {
+            newEdge: edge.getData(),
+            oldEdge: oldEdgeData,
+          },
+        })
+      } else {
+        // 如果没有找到目标节点或者没有通过校验，还原边
+        this.recoveryEdge()
+      }
+      this.preTargetNode?.setElementState(ElementState.DEFAULT)
+    } finally {
+      const { graphModel } = this.props
+      graphModel.eventCenter.emit(EventType.ADJUST_POINT_DRAGEND, {
+        e: event,
+        data: this.stepDragData,
+      })
+    }
+  }
+  // 还原边
+  recoveryEdge = () => {
+    const { edgeModel } = this.props
+    const { startPoint, endPoint, pointsList } = this.oldEdge!
+    edgeModel.updateStartPoint(startPoint)
+    edgeModel.updateEndPoint(endPoint)
+    // 折线和曲线还需要更新其pointsList
+    if (edgeModel.modelType !== ModelType.LINE_EDGE) {
+      edgeModel.pointsList = pointsList ?? []
+      edgeModel.initPoints()
+    }
+  }
+  // 调整点的样式默认从主题中读取， 可以复写此方法进行更加个性化的自定义
+  // 目前仅支持圆形图标进行标识，可以从圆形的r和颜色上进行调整
+  getAdjustPointStyle = () => {
+    const {
+      graphModel: { theme },
+    } = this.props
+    const { edgeAdjust } = theme
+
+    return edgeAdjust
+  }
+
+  isAllowAdjust(info: NodeContaint): {
+    pass: boolean
+    msg?: string
+    newTargetNode: BaseNodeModel
+  } {
+    const {
+      edgeModel: { id, sourceNode, targetNode, sourceAnchorId, targetAnchorId },
+      type,
+    } = this.props
+    // const newTargetNode = info.node;
+    let newSourceNode: BaseNodeModel
+    let newTargetNode: BaseNodeModel
+    let newSourceAnchor: AnchorConfig
+    let newTargetAnchor: AnchorConfig
+
+    // 如果调整的是连线起点
+    if (type === AdjustType.SOURCE) {
+      newSourceNode = info.node
+      newTargetNode = targetNode
+      newSourceAnchor = info.anchor
+      newTargetAnchor = targetNode.getAnchorInfo(targetAnchorId)!
+    } else {
+      newSourceNode = sourceNode
+      newTargetNode = info.node
+      newTargetAnchor = info.anchor
+      newSourceAnchor = sourceNode.getAnchorInfo(sourceAnchorId)!
+    }
+    // 如果前一个接触的节点和此时接触的节点不相等，则将前一个节点状态重新设置为默认状态。
+    if (this.preTargetNode && this.preTargetNode !== info.node) {
+      this.preTargetNode.setElementState(ElementState.DEFAULT)
+    }
+    this.preTargetNode = info.node
+    // #500 不允许锚点自己连自己, 在锚点一开始连接的时候, 不触发自己连接自己的校验。
+    if (newTargetAnchor.id === newSourceAnchor.id) {
+      return {
+        pass: false,
+        msg: '',
+        newTargetNode,
+      }
+    }
+    const targetInfoId = `${newSourceNode.id}_${newTargetNode.id}_${newSourceAnchor.id}_${newTargetAnchor.id}`
+    // 查看鼠标是否进入过target，若有检验结果，表示进入过, 就不重复计算了。
+    if (!this.targetRuleResults.has(targetInfoId)) {
+      const sourceRuleResult = newSourceNode.isAllowConnectedAsSource(
+        newTargetNode,
+        newSourceAnchor,
+        newTargetAnchor,
+        id,
+      )
+      const targetRuleResult = newTargetNode.isAllowConnectedAsTarget(
+        newSourceNode,
+        newSourceAnchor,
+        newTargetAnchor,
+        id,
+      )
+      this.sourceRuleResults.set(
+        targetInfoId,
+        formateAnchorConnectValidateData(sourceRuleResult),
+      )
+      this.targetRuleResults.set(
+        targetInfoId,
+        formateAnchorConnectValidateData(targetRuleResult),
+      )
+    }
+    const { isAllPass: isSourcePass, msg: sourceMsg } =
+      this.sourceRuleResults.get(targetInfoId)
+    const { isAllPass: isTargetPass, msg: targetMsg } =
+      this.targetRuleResults.get(targetInfoId)
+    // 实时提示出即将连接的节点是否允许连接
+    const state =
+      isSourcePass && isTargetPass
+        ? ElementState.ALLOW_CONNECT
+        : ElementState.NOT_ALLOW_CONNECT
+    if (type === AdjustType.SOURCE) {
+      newSourceNode.setElementState(state)
+    } else {
+      newTargetNode.setElementState(state)
+    }
+    return {
+      pass: isSourcePass && isTargetPass,
+      msg: targetMsg || sourceMsg,
+      newTargetNode,
+    }
+  }
+
+  render() {
+    const { x, y, getAdjustPointShape, edgeModel } = this.props
+    const { dragging } = this.state
+    return (
+      <g
+        pointerEvents={dragging ? 'none' : ''}
+        onMouseDown={this.handleMouseDown}
+      >
+        {!dragging ? getAdjustPointShape(x, y, edgeModel) : ''}
+      </g>
+    )
+  }
+}
+
+export default AdjustPoint

package/src/view/edge/Arrow.tsx

@@ -0,0 +1,54 @@
+import { Component } from 'preact/compat'
+import { Path } from '../shape'
+import LogicFlow from '../../LogicFlow'
+import { getVerticalPointOfLine } from '../../algorithm'
+import ArrowInfo = LogicFlow.ArrowInfo
+
+export type ArrowStyle = {
+  stroke?: string
+  fill?: string
+  strokeWidth?: number
+  offset: number
+  refX?: number
+  refY?: number
+  verticalLength: number
+}
+
+type ArrowAttributesType = {
+  d: string
+} & ArrowStyle
+
+type IProps = {
+  arrowInfo: ArrowInfo
+  style: ArrowStyle
+}
+
+export class Arrow extends Component<IProps> {
+  getArrowAttributes(): ArrowAttributesType {
+    const { arrowInfo, style } = this.props
+    const { start, end } = arrowInfo
+    const config = {
+      start,
+      end,
+      offset: style.offset,
+      verticalLength: style.verticalLength,
+      type: 'end',
+    }
+    const { leftX, leftY, rightX, rightY } = getVerticalPointOfLine(config)
+    return {
+      d: `M${leftX} ${leftY} L${end.x} ${end.y} L${rightX} ${rightY} z`,
+      ...style,
+    }
+  }
+
+  getShape() {
+    const { d, strokeWidth, stroke, fill } = this.getArrowAttributes()
+    return <Path d={d} fill={fill} strokeWidth={strokeWidth} stroke={stroke} />
+  }
+
+  render() {
+    return <g className="lf-arrow">{this.getShape()}</g>
+  }
+}
+
+export default Arrow