@logicflow/core 2.2.0 → 2.2.1

package/src/view/Anchor.tsx

@@ -1,445 +0,0 @@
-import { Component } from 'preact/compat'
-import { Circle, Line } from './shape'
-import { BaseNode } from './node'
-import LogicFlow from '../LogicFlow'
-import { ElementState, EventType } from '../constant'
-import { GraphModel, BaseNodeModel, Model } from '../model'
-import {
-  StepDrag,
-  formatAnchorConnectValidateData,
-  targetNodeInfo,
-  distance,
-  cancelRaf,
-  createRaf,
-  IDragParams,
-} from '../util'
-
-import AnchorConfig = Model.AnchorConfig
-import NodeData = LogicFlow.NodeData
-
-interface IProps {
-  // x: number;
-  // y: number;
-  // id?: string;
-  anchorData: AnchorConfig
-  node: BaseNode<any>
-  style?: Record<string, any>
-  hoverStyle?: Record<string, any>
-  edgeStyle?: Record<string, any>
-  anchorIndex: number
-  graphModel: GraphModel
-  nodeModel: BaseNodeModel
-  setHoverOff: (e: PointerEvent) => void
-}
-
-interface IState {
-  startX: number
-  startY: number
-  endX: number
-  endY: number
-  dragging: boolean
-}
-
-class Anchor extends Component<IProps, IState> {
-  preTargetNode?: BaseNodeModel
-  sourceRuleResults: Map<string, Model.ConnectRuleResult> // 不同的target，source的校验规则产生的结果不同
-  targetRuleResults: Map<string, Model.ConnectRuleResult> // 不同的target，target的校验规则不同
-  dragHandler: StepDrag
-  t: any
-
-  constructor() {
-    super()
-    this.sourceRuleResults = new Map()
-    this.targetRuleResults = new Map()
-
-    this.state = {
-      startX: 0,
-      startY: 0,
-      endX: 0,
-      endY: 0,
-      dragging: false,
-    }
-    this.dragHandler = new StepDrag({
-      onDragStart: this.onDragStart,
-      onDragging: this.onDragging,
-      onDragEnd: this.onDragEnd,
-    })
-  }
-
-  getAnchorShape() {
-    const { anchorData, style, node } = this.props
-    const anchorShape = node.getAnchorShape(anchorData)
-    if (anchorShape) return anchorShape
-    const { x, y } = anchorData
-    const hoverStyle = {
-      ...style,
-      ...style?.hover,
-    }
-    return (
-      <g>
-        <Circle
-          className="lf-node-anchor-hover"
-          {...hoverStyle}
-          {...{
-            x,
-            y,
-          }}
-        />
-        <Circle
-          className="lf-node-anchor"
-          {...style}
-          {...{
-            x,
-            y,
-          }}
-        />
-      </g>
-    )
-  }
-
-  // TODO: 确定 event 是否会有 null 和 undefined 的情况，事件类型做相应的适配
-  onDragStart = ({ event }: Partial<IDragParams>) => {
-    const { anchorData, nodeModel, graphModel } = this.props
-    graphModel.selectNodeById(nodeModel.id)
-    if (nodeModel.autoToFront) {
-      graphModel.toFront(nodeModel.id)
-    }
-    graphModel.eventCenter.emit(EventType.ANCHOR_DRAGSTART, {
-      data: anchorData,
-      e: event!,
-      nodeModel,
-    })
-    this.setState({
-      startX: anchorData.x,
-      startY: anchorData.y,
-      endX: anchorData.x,
-      endY: anchorData.y,
-    })
-  }
-  onDragging = ({ event }: IDragParams) => {
-    const { graphModel, nodeModel, anchorData } = this.props
-    const {
-      transformModel,
-      eventCenter,
-      width,
-      height,
-      editConfigModel: { autoExpand, stopMoveGraph },
-    } = graphModel
-    // TODO：确认该方法是否有影响！理论上 onDragging 时 event 必有值
-    if (!event) return
-    const { clientX, clientY } = event
-    const {
-      domOverlayPosition: { x, y },
-      canvasOverlayPosition: { x: x1, y: y1 },
-    } = graphModel.getPointByClient({
-      x: clientX,
-      y: clientY,
-    })
-    if (this.t) {
-      cancelRaf(this.t)
-    }
-    let nearBoundary: number[] = [] // TODO: 定义元组类型 Tuple
-    const size = 10
-    if (x < 10) {
-      nearBoundary = [size, 0]
-    } else if (x + 10 > width) {
-      nearBoundary = [-size, 0]
-    } else if (y < 10) {
-      nearBoundary = [0, size]
-    } else if (y + 10 > height) {
-      nearBoundary = [0, -size]
-    }
-    this.setState({
-      endX: x1,
-      endY: y1,
-      dragging: true,
-    })
-    this.moveAnchorEnd(x1, y1, event)
-    if (nearBoundary.length > 0 && !stopMoveGraph && autoExpand) {
-      this.t = createRaf(() => {
-        const [translateX, translateY] = nearBoundary
-        transformModel.translate(translateX, translateY)
-        const { endX, endY } = this.state
-        this.setState({
-          endX: endX - translateX,
-          endY: endY - translateY,
-        })
-        this.moveAnchorEnd(endX - translateX, endY - translateY, event)
-      })
-    }
-    eventCenter.emit(EventType.ANCHOR_DRAG, {
-      data: anchorData,
-      e: event,
-      nodeModel,
-    })
-  }
-  onDragEnd = ({ event }: Partial<IDragParams>) => {
-    if (this.t) {
-      cancelRaf(this.t)
-    }
-    const edgeModel = this.checkEnd(event)
-    this.setState({
-      startX: 0,
-      startY: 0,
-      endX: 0,
-      endY: 0,
-      dragging: false,
-    })
-    // 清除掉缓存结果 fix:#320 因为创建边之后，会影响校验结果变化，所以需要重新校验
-    this.sourceRuleResults.clear()
-    this.targetRuleResults.clear()
-    const { graphModel, nodeModel, anchorData } = this.props
-    // 拖拽结束清理：取消悬浮态
-    if (this.preTargetNode) {
-      this.preTargetNode.setHovered(false)
-      this.preTargetNode = undefined
-    }
-
-    graphModel.eventCenter.emit(EventType.ANCHOR_DRAGEND, {
-      data: anchorData,
-      e: event!,
-      nodeModel,
-      edgeModel: edgeModel ?? undefined,
-    })
-  }
-
-  get customTrajectory() {
-    const {
-      graphModel: { customTrajectory },
-    } = this.props
-    return customTrajectory
-  }
-
-  get relateEdges() {
-    const {
-      graphModel: { getAnchorIncomingEdge, getAnchorOutgoingEdge },
-      anchorData: { id },
-    } = this.props
-    return {
-      incomingEdgeList: getAnchorIncomingEdge(id),
-      outgoingEdgeList: getAnchorOutgoingEdge(id),
-    }
-  }
-
-  checkEnd = (event: PointerEvent | null | undefined) => {
-    const {
-      graphModel,
-      nodeModel,
-      anchorData: { x, y, id },
-    } = this.props
-    // nodeModel.setSelected(false);
-    /* 创建边 */
-    const { endX, endY, dragging } = this.state
-    const info = targetNodeInfo(
-      {
-        x: endX,
-        y: endY,
-      },
-      graphModel,
-    )
-    // 为了保证鼠标离开的时候，将上一个节点状态重置为正常状态。
-    if (
-      this.preTargetNode &&
-      this.preTargetNode.state !== ElementState.DEFAULT
-    ) {
-      this.preTargetNode.setElementState(ElementState.DEFAULT)
-    }
-    // 没有dragging就结束边
-    if (!dragging) return
-    if (info && info.node) {
-      const targetNode = info.node
-      const anchorId = info.anchor.id
-      const targetInfoId = `${nodeModel.id}_${targetNode.id}_${anchorId}_${id}`
-      const { isAllPass: isSourcePass, msg: sourceMsg } =
-        this.sourceRuleResults.get(targetInfoId) || {}
-      const { isAllPass: isTargetPass, msg: targetMsg } =
-        this.targetRuleResults.get(targetInfoId) || {}
-      if (isSourcePass && isTargetPass) {
-        targetNode.setElementState(ElementState.DEFAULT)
-        const targetNodeModel = graphModel.getNodeModelById(info.node.id)
-        const edgeData = graphModel.edgeGenerator?.(
-          nodeModel.getData(),
-          targetNodeModel?.getData() as NodeData,
-        )
-        const edgeModel = graphModel.addEdge({
-          ...edgeData,
-          sourceNodeId: nodeModel.id,
-          sourceAnchorId: id,
-          startPoint: {
-            x,
-            y,
-          },
-          targetNodeId: info.node.id,
-          targetAnchorId: info.anchor.id,
-          endPoint: {
-            x: info.anchor.x,
-            y: info.anchor.y,
-          },
-        })
-        const { anchorData } = this.props
-        graphModel.eventCenter.emit(EventType.ANCHOR_DROP, {
-          data: anchorData,
-          e: event!,
-          nodeModel,
-          edgeModel,
-        })
-        return edgeModel
-      }
-      const nodeData = targetNode.getData()
-      graphModel.eventCenter.emit(EventType.CONNECTION_NOT_ALLOWED, {
-        data: nodeData,
-        msg: targetMsg || sourceMsg || '不允许添加连线',
-      })
-      return null
-    }
-  }
-
-  moveAnchorEnd(endX: number, endY: number, event?: PointerEvent) {
-    const { graphModel, nodeModel, anchorData } = this.props
-    const info = targetNodeInfo(
-      {
-        x: endX,
-        y: endY,
-      },
-      graphModel,
-    )
-    if (info) {
-      const targetNode = info.node
-      const anchorId = info.anchor.id
-      if (this.preTargetNode && this.preTargetNode !== info.node) {
-        this.preTargetNode.setElementState(ElementState.DEFAULT)
-      }
-      // #500 不允许锚点自己连自己, 在锚点一开始连接的时候, 不触发自己连接自己的校验。
-      if (anchorData.id === anchorId) {
-        return
-      }
-      this.preTargetNode = targetNode
-      // 支持节点的每个锚点单独设置是否可连接，因此规则key去nodeId + anchorId作为唯一值
-      const targetInfoId = `${nodeModel.id}_${targetNode.id}_${anchorId}_${anchorData.id}`
-
-      // 查看鼠标是否进入过target，若有检验结果，表示进入过, 就不重复计算了。
-      if (!this.targetRuleResults.has(targetInfoId)) {
-        const targetAnchor = info.anchor
-        const sourceRuleResult = nodeModel.isAllowConnectedAsSource(
-          targetNode,
-          anchorData,
-          targetAnchor,
-        )
-        const targetRuleResult = targetNode.isAllowConnectedAsTarget(
-          nodeModel,
-          anchorData,
-          targetAnchor,
-        )
-        this.sourceRuleResults.set(
-          targetInfoId,
-          formatAnchorConnectValidateData(sourceRuleResult),
-        )
-        this.targetRuleResults.set(
-          targetInfoId,
-          formatAnchorConnectValidateData(targetRuleResult),
-        )
-      }
-      const { isAllPass: isSourcePass } =
-        this.sourceRuleResults.get(targetInfoId) ?? {}
-      const { isAllPass: isTargetPass } =
-        this.targetRuleResults.get(targetInfoId) ?? {}
-      // 实时提示出即将链接的锚点
-      if (isSourcePass && isTargetPass) {
-        targetNode.setElementState(ElementState.ALLOW_CONNECT)
-      } else {
-        targetNode.setElementState(ElementState.NOT_ALLOW_CONNECT)
-      }
-      // 人工触发进入目标节点事件，同步设置 hovered 以驱动锚点显隐和样式
-      if (!targetNode.isHovered) {
-        const nodeData = targetNode.getData()
-        if (event) {
-          graphModel.eventCenter.emit(EventType.NODE_MOUSEENTER, {
-            data: nodeData,
-            e: event,
-          })
-        }
-        targetNode.setHovered(true)
-      }
-    } else if (
-      this.preTargetNode &&
-      this.preTargetNode.state !== ElementState.DEFAULT
-    ) {
-      // 为了保证鼠标离开的时候，将上一个节点状态重置为正常状态。
-      this.preTargetNode.setElementState(ElementState.DEFAULT)
-      // 未命中任何节点：人工派发离开事件并取消悬浮，避免状态残留
-      const prevData = this.preTargetNode.getData()
-      if (event) {
-        graphModel.eventCenter.emit(EventType.NODE_MOUSELEAVE, {
-          data: prevData,
-          e: event,
-        })
-      }
-      this.preTargetNode.setHovered(false)
-      this.preTargetNode = undefined
-    }
-  }
-
-  isShowLine() {
-    const { startX, startY, endX, endY } = this.state
-    const v = distance(startX, startY, endX, endY)
-    return v > 10
-  }
-
-  render() {
-    const { startX, startY, endX, endY } = this.state
-    const { anchorData, edgeStyle, nodeModel, graphModel } = this.props
-    const { edgeAddable } = anchorData
-    return (
-      // className="lf-anchor" 作为下载时，需要将锚点删除的依据，不要修改类名
-      <g className="lf-anchor">
-        <g
-          onClick={(ev) => {
-            ev.stopPropagation()
-            graphModel.eventCenter.emit(EventType.ANCHOR_CLICK, {
-              data: anchorData,
-              e: ev!,
-              nodeModel,
-            })
-          }}
-          onPointerDown={(ev) => {
-            graphModel.eventCenter.emit(EventType.ANCHOR_MOUSEDOWN, {
-              data: anchorData,
-              e: ev!,
-              nodeModel,
-            })
-            if (edgeAddable !== false) {
-              this.dragHandler.handleMouseDown(ev)
-            }
-          }}
-        >
-          {this.getAnchorShape()}
-        </g>
-        {this.isShowLine() &&
-          (this.customTrajectory ? (
-            this.customTrajectory({
-              sourcePoint: {
-                x: startX,
-                y: startY,
-              },
-              targetPoint: {
-                x: endX,
-                y: endY,
-              },
-              ...edgeStyle,
-            })
-          ) : (
-            <Line
-              x1={startX}
-              y1={startY}
-              x2={endX}
-              y2={endY}
-              {...edgeStyle}
-              pointer-events="none"
-            />
-          ))}
-      </g>
-    )
-  }
-}
-
-export default Anchor