@logicflow/core 1.2.27 → 2.0.0-beta.1

package/src/util/theme.ts

@@ -0,0 +1,180 @@
+import { cloneDeep, merge } from 'lodash-es'
+import LogicFlow from '../LogicFlow'
+
+export const defaultTheme: LogicFlow.Theme = {
+  baseNode: {
+    fill: '#fff',
+    stroke: '#000',
+    strokeWidth: 2,
+  },
+
+  baseEdge: {
+    stroke: '#000',
+    strokeWidth: 2,
+  },
+
+  rect: {},
+  circle: {},
+  diamond: {},
+  ellipse: {},
+  polygon: {},
+
+  text: {
+    color: '#000',
+    stroke: 'none',
+    fontSize: 12,
+    background: {
+      fill: 'transparent',
+    },
+  },
+
+  anchor: {
+    stroke: '#000',
+    fill: '#fff',
+    r: 4,
+    hover: {
+      r: 10,
+      fill: '#949494',
+      fillOpacity: 0.5,
+      stroke: '#949494',
+    },
+  },
+
+  anchorLine: {
+    stroke: '#000',
+    strokeWidth: 2,
+    strokeDasharray: '3,2',
+  },
+
+  nodeText: {
+    color: '#000',
+    overflowMode: 'default',
+    fontSize: 12,
+    lineHeight: 1.2,
+  },
+
+  edgeText: {
+    textWidth: 100,
+    overflowMode: 'default',
+    fontSize: 12,
+    background: {
+      fill: '#fff',
+    },
+  },
+
+  line: {},
+  polyline: {},
+
+  bezier: {
+    fill: 'none',
+    adjustLine: {
+      stroke: '#949494',
+    },
+    adjustAnchor: {
+      r: 4,
+      fill: '#949494',
+      fillOpacity: 1,
+      stroke: '#949494',
+    },
+  },
+
+  arrow: {
+    offset: 10,
+    verticalLength: 5, // 箭头垂直于边的距离
+  },
+
+  snapline: {
+    stroke: '#949494',
+    strokeWidth: 1,
+  },
+
+  edgeAdjust: {
+    r: 4,
+    fill: '#fff',
+    stroke: '#949494',
+    strokeWidth: 2,
+  },
+
+  outline: {
+    fill: 'transparent',
+    stroke: '#949494',
+    strokeDasharray: '3,3',
+    hover: {
+      stroke: '#949494',
+    },
+  },
+
+  edgeAnimation: {
+    stroke: 'red',
+    strokeDasharray: '10,10',
+    strokeDashoffset: '100%',
+    animationName: 'lf_animate_dash',
+    animationDuration: '20s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: 'linear',
+    animationDirection: 'normal',
+  },
+
+  rotateControl: {
+    stroke: '#000',
+    fill: '#fff',
+    strokeWidth: 1.5,
+  },
+
+  resizeControl: {
+    width: 7,
+    height: 7,
+    fill: '#fff',
+    stroke: '#000',
+  },
+
+  resizeOutline: {
+    fill: 'none',
+    stroke: 'transparent', // 矩形默认不显示调整边框
+    strokeWidth: 1,
+    strokeDasharray: '3,3',
+  },
+}
+
+/* 主题（全局样式）相关工具方法 */
+export const setupTheme = (
+  customTheme?: Partial<LogicFlow.Theme>,
+): LogicFlow.Theme => {
+  let theme = cloneDeep(defaultTheme)
+
+  if (customTheme) {
+    /**
+     * 为了不让默认样式被覆盖，使用 merge 方法
+     * @docs https://lodash.com/docs/4.17.15#merge
+     * 例如：锚点主题 hover，用户传入如下 ->
+     * lf.setTheme({
+     *   anchor: {
+     *     fill: 'red'
+     *   }
+     * })
+     *
+     * 预期得到的结果如下：
+     * {
+     *   // ...
+     *   anchor: {
+     *     stroke: '#000',
+     *     fill: 'red',
+     *     r: 4,
+     *     hover: {
+     *       r: 10,
+     *       fill: '#949494',
+     *       fillOpacity: 0.5,
+     *       stroke: '#949494',
+     *     },
+     *   },
+     *   // ...
+     * }
+     */
+    theme = merge(theme, customTheme)
+  }
+
+  return theme
+}
+
+/* 更新 theme 方法 */
+export const updateTheme = setupTheme

package/src/util/uuid.ts

@@ -0,0 +1,26 @@
+import { v4 as uuidV4 } from 'uuid'
+import LogicFlow from '../LogicFlow'
+
+import GraphData = LogicFlow.GraphData
+
+export const createUuid = (): string => uuidV4()
+
+/**
+ * 重新刷新流程图的所有id
+ */
+export const refreshGraphId = (
+  graphData: GraphData,
+  prefix = '',
+): GraphData => {
+  const nodeIdMap = graphData.nodes.reduce((nMap, node) => {
+    nMap[node.id] = prefix + uuidV4()
+    node.id = nMap[node.id]
+    return nMap
+  }, {})
+  graphData.edges.forEach((edge) => {
+    edge.id = prefix + uuidV4()
+    edge.sourceNodeId = nodeIdMap[edge.sourceNodeId]
+    edge.targetNodeId = nodeIdMap[edge.targetNodeId]
+  })
+  return graphData
+}

package/src/util/vector.ts

@@ -0,0 +1,93 @@
+function isVector(a1: any, a2: any): boolean {
+  return !!(a1 instanceof Vector && a2 instanceof Vector)
+}
+
+class Base extends Array<number> {
+  x: number
+  y: number
+  z: number
+
+  constructor(x: number, y: number, z: number) {
+    super(3)
+    this[0] = x
+    this[1] = y
+    this[2] = z
+    this.x = x
+    this.y = y
+    this.z = z
+    Object.setPrototypeOf(this, Base.prototype)
+  }
+
+  add(v1: Vector | Point): Vector | Point {
+    if (isVector(this, v1)) {
+      return new Vector(this.x + v1.x, this.y + v1.y)
+    }
+    const z = this.z + v1.z
+    return new Point((this.x + v1.x) / z, (this.y + v1.y) / z)
+  }
+
+  subtract(v1: Vector | Point): Vector | Point {
+    if (isVector(this, v1)) {
+      return new Vector(this.x - v1.x, this.y - v1.y)
+    }
+    const z = this.z - v1.z
+    return z === 0
+      ? new Vector(this.x - v1.x, this.y - v1.y)
+      : new Point((this.x - v1.x) / z, (this.y - v1.y) / z)
+  }
+}
+
+class Vector extends Base {
+  constructor(x: number, y: number, z?: number) {
+    super(x, y, z ?? 0)
+    Object.setPrototypeOf(this, Vector.prototype)
+  }
+
+  toString(): string {
+    return 'Vector'
+  }
+
+  dot(v1: Vector) {
+    return v1.reduce((prev, cur, index) => prev + cur * this[index])
+  }
+
+  cross(v1: Vector) {
+    return new Vector(
+      this.y * v1.z - this.z * v1.y,
+      this.z * v1.x - this.x * v1.z,
+      this.x * v1.y - this.y * v1.x,
+    )
+  }
+
+  getLength() {
+    return Math.hypot(this.x, this.y)
+  }
+
+  normalize() {
+    const len = this.getLength()
+    return new Vector(this.x / len, this.y / len)
+  }
+
+  crossZ(v1: Vector) {
+    return this.x * v1.y - this.y * v1.x
+  }
+
+  angle(v1: Vector) {
+    const negative = this.crossZ(v1)
+    const r = Math.acos(this.normalize().dot(v1.normalize()))
+    return negative >= 0 ? r : -r
+  }
+}
+
+class Point extends Base {
+  constructor(x: number, y: number) {
+    super(x, y, 1)
+    Object.setPrototypeOf(this, Point.prototype)
+  }
+
+  toString(): string {
+    return 'Point'
+  }
+}
+
+export { Vector, Point }

package/src/util/zIndex.ts

@@ -0,0 +1,6 @@
+let maxIndex = 1000
+let minIndex = 999
+
+export const getZIndex = () => ++maxIndex
+
+export const getMinIndex = () => --minIndex

package/src/view/Anchor.tsx

@@ -0,0 +1,407 @@
+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,
+  formateAnchorConnectValidateData,
+  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: MouseEvent) => 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 }) => {
+    const { graphModel, nodeModel, anchorData } = this.props
+    const {
+      transformModel,
+      eventCenter,
+      width,
+      height,
+      editConfigModel: { autoExpand, stopMoveGraph },
+    } = graphModel
+    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)
+    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)
+      })
+    }
+    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 (edgeModel) {
+      graphModel.eventCenter.emit(EventType.ANCHOR_DRAGEND, {
+        data: anchorData,
+        e: event!,
+        nodeModel,
+        edgeModel,
+      })
+    }
+  }
+
+  get customTrajectory() {
+    const {
+      graphModel: { customTrajectory },
+    } = this.props
+    return customTrajectory
+  }
+
+  get relateEdges() {
+    const {
+      graphModel: { getAnchorIncomingEdge, getAnchorOutcomingEdge },
+      anchorData: { id },
+    } = this.props
+    return {
+      incomingEdgeList: getAnchorIncomingEdge(id),
+      outcomingEdgeList: getAnchorOutcomingEdge(id),
+    }
+  }
+
+  checkEnd = (event: MouseEvent | 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) {
+    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,
+          formateAnchorConnectValidateData(sourceRuleResult),
+        )
+        this.targetRuleResults.set(
+          targetInfoId,
+          formateAnchorConnectValidateData(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)
+      }
+    } else if (
+      this.preTargetNode &&
+      this.preTargetNode.state !== ElementState.DEFAULT
+    ) {
+      // 为了保证鼠标离开的时候，将上一个节点状态重置为正常状态。
+      this.preTargetNode.setElementState(ElementState.DEFAULT)
+    }
+  }
+
+  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: { edgeAddable },
+      edgeStyle,
+    } = this.props
+    return (
+      // className="lf-anchor" 作为下载时，需要将锚点删除的依据，不要修改类名
+      <g className="lf-anchor">
+        <g
+          onMouseDown={(ev) => {
+            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