@logicflow/extension 2.2.0 → 2.2.1

package/src/components/highlight/index.ts

@@ -1,227 +0,0 @@
-import LogicFlow, { BaseEdgeModel, BaseNodeModel } from '@logicflow/core'
-import { uniqBy, concat } from 'lodash-es'
-
-// 后续并入FlowPath
-const getPath = (id: string, lf: LogicFlow) => {
-  const el = lf.getModelById(id)
-  return getNodePath(el?.BaseType === 'node' ? el : el?.targetNode, lf)
-}
-
-// dfs + 动态规划
-// todo 算法优化
-const getNodePath = (node, lf: LogicFlow) => {
-  const incomingPaths: any[] = []
-  const outgoingPaths: any[] = []
-
-  const getIncomingPaths = (curNode, path, prevNode?: BaseNodeModel) => {
-    if (!curNode) return
-    if (prevNode) {
-      // * 上个节点和当前节点中间边
-      path.unshift(
-        ...lf
-          .getEdgeModels({
-            sourceNodeId: curNode.id,
-            targetNodeId: prevNode?.id,
-          })
-          .map((item) => item.id),
-      )
-    }
-
-    // * 路径中存在节点，则不再继续查找，说明出现环情况
-    if (path.includes(curNode.id)) {
-      incomingPaths.push(path)
-      return
-    }
-
-    // * 路径中当前加入节点
-    path.unshift(curNode.id)
-
-    if (!curNode.incoming.nodes.length) {
-      incomingPaths.push(path)
-      return
-    }
-
-    // * 往下找
-    curNode.incoming.nodes.forEach((nextNode) => {
-      getIncomingPaths(nextNode, path.slice(), curNode)
-    })
-  }
-
-  // * 同上逻辑
-  const getOutgoingPaths = (curNode, path, prevNode?: BaseNodeModel) => {
-    if (!curNode) return
-    if (prevNode) {
-      path.push(
-        ...lf
-          .getEdgeModels({
-            sourceNodeId: prevNode?.id,
-            targetNodeId: curNode.id,
-          })
-          .map((item) => item.id),
-      )
-    }
-    if (path.includes(curNode.id)) {
-      outgoingPaths.push(path)
-      return
-    }
-
-    path.push(curNode.id)
-
-    if (!curNode.outgoing.nodes.length) {
-      outgoingPaths.push(path)
-      return
-    }
-
-    curNode.outgoing.nodes.forEach((nextNode) => {
-      getOutgoingPaths(nextNode, path.slice(), curNode)
-    })
-  }
-
-  getIncomingPaths(node, [])
-  getOutgoingPaths(node, [])
-
-  return [...new Set([...incomingPaths.flat(), ...outgoingPaths.flat()])]
-}
-
-type IMode = 'single' | 'path' | 'neighbour'
-
-export class Highlight {
-  lf: LogicFlow
-  static pluginName = 'highlight'
-  mode: IMode = 'path'
-  enable = true
-  tempStyles = {}
-
-  constructor({ lf, options }) {
-    const { mode = 'path', enable = true } = options
-    this.lf = lf
-    this.mode = mode
-    this.enable = enable
-  }
-
-  public setMode(mode: IMode) {
-    this.mode = mode
-  }
-
-  setEnable(enable: boolean) {
-    this.enable = enable
-  }
-
-  private highlightSingle(id: string) {
-    const model = this.lf.getModelById(id)
-
-    if (model?.BaseType === 'node') {
-      // 高亮节点
-      model.updateStyles(this.tempStyles[id])
-    } else if (model?.BaseType === 'edge') {
-      // 高亮边及对应的节点
-      model.updateStyles(this.tempStyles[id])
-      model.sourceNode.updateStyles(this.tempStyles[model.sourceNode.id])
-      model.targetNode.updateStyles(this.tempStyles[model.targetNode.id])
-    }
-    this.lf.emit('highlight:single', {
-      data: model,
-    })
-  }
-
-  private highlightNeighbours(id: string) {
-    const model = this.lf.getModelById(id)
-    let relateElements: (BaseNodeModel | BaseEdgeModel)[] = []
-    if (model?.BaseType === 'node') {
-      // 高亮节点
-      model.updateStyles(this.tempStyles[id])
-      const { nodes: incomingNodes, edges: incomingEdges } = model.incoming
-      const { nodes: outgoingNodes, edges: outgoingEdges } = model.outgoing
-      concat(incomingNodes, outgoingNodes).forEach((node) => {
-        node.updateStyles(this.tempStyles[node.id])
-      })
-      concat(incomingEdges, outgoingEdges).forEach((edge) => {
-        edge.updateStyles(this.tempStyles[edge.id])
-      })
-      relateElements = uniqBy(
-        concat(
-          relateElements,
-          incomingNodes,
-          outgoingNodes,
-          incomingEdges,
-          outgoingEdges,
-        ),
-        'id',
-      )
-    } else if (model?.BaseType === 'edge') {
-      // 高亮边及对应的节点
-      model.updateStyles(this.tempStyles[id])
-      model.sourceNode.updateStyles(this.tempStyles[model.sourceNode.id])
-      model.targetNode.updateStyles(this.tempStyles[model.targetNode.id])
-      relateElements = [model.sourceNode, model.targetNode]
-    }
-    this.lf.emit('highlight:neighbours', {
-      data: model,
-      relateElements,
-    })
-  }
-
-  private highlightPath(id: string) {
-    const path = getPath(id, this.lf)
-    const relateElements: any[] = []
-    path.forEach((_id) => {
-      const elementModel = this.lf.getModelById(_id)
-      // 高亮路径上所有的边和节点
-      elementModel?.updateStyles(this.tempStyles[_id])
-      relateElements.push(elementModel)
-    })
-    this.lf.emit('highlight:path', {
-      data: this.lf.getModelById(id),
-      relateElements,
-    })
-  }
-
-  highlight(id: string, mode: IMode = this.mode) {
-    if (!this.enable) return
-    if (Object.keys(this.tempStyles).length) {
-      this.restoreHighlight()
-    }
-
-    Object.values(this.lf.graphModel.modelsMap).forEach((item) => {
-      //  所有节点样式都进行备份
-      const oStyle =
-        item.BaseType === 'node' ? item.getNodeStyle() : item.getEdgeStyle()
-      this.tempStyles[item.id] = { ...oStyle }
-
-      //  所有节点都设置透明度为0.1
-      item.setStyles({ opacity: 0.1 })
-    })
-
-    const modeTrigger = {
-      single: this.highlightSingle.bind(this),
-      neighbour: this.highlightNeighbours.bind(this),
-      path: this.highlightPath.bind(this),
-    }
-
-    modeTrigger[mode](id)
-  }
-
-  restoreHighlight() {
-    // 恢复所有节点的样式
-    if (!Object.keys(this.tempStyles).length) return
-    Object.values(this.lf.graphModel.modelsMap).forEach((item) => {
-      const oStyle = this.tempStyles[item.id] ?? {}
-      item.updateStyles({ ...oStyle })
-    })
-
-    this.tempStyles = {}
-  }
-
-  render() {
-    this.lf.on('node:mouseenter', ({ data }: any) => this.highlight(data.id))
-    this.lf.on('edge:mouseenter', ({ data }: any) => this.highlight(data.id))
-
-    this.lf.on('node:mouseleave', this.restoreHighlight.bind(this))
-    this.lf.on('edge:mouseleave', this.restoreHighlight.bind(this))
-    this.lf.on('history:change', this.restoreHighlight.bind(this))
-  }
-
-  destroy() {}
-}
-
-export default Highlight