@logicflow/core 2.2.0-alpha.7 → 2.2.1

package/src/util/theme.ts

@@ -1,84 +0,0 @@
-import { cloneDeep, merge, assign } from 'lodash-es'
-import LogicFlow from '../LogicFlow'
-import {
-  themeModeMap,
-  backgroundModeMap,
-  defaultBackground,
-  gridModeMap,
-  defaultGrid,
-} from '../constant/theme'
-
-/* 主题（全局样式）相关工具方法 */
-export const setupTheme = (
-  customTheme?: Partial<LogicFlow.Theme>,
-  themeMode?: LogicFlow.ThemeMode | string,
-): LogicFlow.Theme => {
-  let theme =
-    cloneDeep(themeModeMap[themeMode || 'default']) ||
-    cloneDeep(themeModeMap.default)
-  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
-}
-
-export const addThemeMode = (
-  themeMode: string,
-  style: Partial<LogicFlow.Theme>,
-): void => {
-  if (themeModeMap[themeMode]) {
-    console.warn(`theme mode ${themeMode} already exists`)
-    return
-  }
-  themeModeMap[themeMode] = style
-  backgroundModeMap[themeMode] = style.background || defaultBackground
-  gridModeMap[themeMode] = style.grid || defaultGrid
-}
-
-export const removeThemeMode = (themeMode: string): void => {
-  delete themeModeMap[themeMode]
-  delete backgroundModeMap[themeMode]
-  delete gridModeMap[themeMode]
-}
-
-export const clearThemeMode = (): void => {
-  const resetTheme = {
-    colorful: {},
-    dark: {},
-    retro: {},
-    default: {},
-  }
-  assign(themeModeMap, resetTheme)
-  assign(backgroundModeMap, resetTheme)
-  assign(gridModeMap, resetTheme)
-}
-
-/* 更新 theme 方法 */
-export const updateTheme = setupTheme

package/src/util/uuid.ts

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

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

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

package/src/view/Anchor.tsx

@@ -1,462 +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
-
-      this.validateAndSetState(
-        targetNode,
-        anchorId,
-        info.anchor,
-        nodeModel,
-        anchorData,
-      )
-
-      // 人工触发进入目标节点事件，同步设置 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
-    }
-  }
-
-  // 校验 source/target 连接规则并设置目标节点状态
-  validateAndSetState(
-    targetNode: BaseNodeModel,
-    anchorId: string | undefined,
-    targetAnchor: AnchorConfig,
-    nodeModel: BaseNodeModel,
-    anchorData: AnchorConfig,
-  ) {
-    const targetInfoId = `${nodeModel.id}_${targetNode.id}_${anchorId}_${anchorData.id}`
-    if (!this.targetRuleResults.has(targetInfoId)) {
-      // 首次计算并缓存源/目标两侧的规则校验结果
-      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)
-    }
-  }
-
-  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