@logicflow/core 2.2.0-alpha.7 → 2.2.1

package/src/view/edge/AdjustPoint.tsx

@@ -1,425 +0,0 @@
-import { createElement as h, Component } from 'preact/compat'
-import LogicFlow from '../../LogicFlow'
-import { GraphModel, BaseNodeModel, BaseEdgeModel, Model } from '../../model'
-import {
-  IDragParams,
-  StepDrag,
-  formatAnchorConnectValidateData,
-  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: PointerEvent) => {
-    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) {
-      const { startPoint, endPoint, sourceNode, targetNode } = edgeModel
-      const params =
-        type === AdjustType.SOURCE
-          ? {
-              startPoint: {
-                x: info.anchor.x,
-                y: info.anchor.y,
-              },
-              endPoint: {
-                x: endPoint.x,
-                y: endPoint.y,
-              },
-              sourceNode: info.node,
-              targetNode,
-            }
-          : {
-              startPoint: {
-                x: startPoint.x,
-                y: startPoint.y,
-              },
-              endPoint: {
-                x: info.anchor.x,
-                y: info.anchor.y,
-              },
-              sourceNode,
-              targetNode: info.node,
-            }
-      edgeModel.updateAfterAdjustStartAndEnd(params)
-    } else {
-      // 如果没有找到目标节点，更新起终点为当前坐标
-      type === AdjustType.SOURCE
-        ? edgeModel.updateStartPoint({ x, y })
-        : 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,
-        formatAnchorConnectValidateData(sourceRuleResult),
-      )
-      this.targetRuleResults.set(
-        targetInfoId,
-        formatAnchorConnectValidateData(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' : ''}
-        onPointerDown={this.handleMouseDown}
-      >
-        {!dragging ? getAdjustPointShape(x, y, edgeModel) : ''}
-      </g>
-    )
-  }
-}
-
-export default AdjustPoint

package/src/view/edge/Arrow.tsx

@@ -1,54 +0,0 @@
-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