@logicflow/extension 1.2.26 → 2.0.0-beta.0

package/src/components/context-menu/index.ts

@@ -0,0 +1,253 @@
+import LogicFlow from '@logicflow/core'
+
+type MenuItem = {
+  icon: string
+  callback?: (data) => void
+  type?: string
+  className?: string
+  properties: Record<string, any>
+}
+
+export type ContextMenuNodeData = {
+  sourceId: string
+  x: number
+  y: number
+  properties: Record<string, unknown>
+  type?: string
+}
+
+const COMMON_TYPE_KEY = 'menu-common'
+const NEXT_X_DISTANCE = 200
+const NEXT_Y_DISTANCE = 100
+
+export class ContextMenu {
+  static pluginName = 'contextMenu'
+  private __menuDOM: HTMLElement
+  private lf: LogicFlow
+  private _activeData: any
+  private menuTypeMap: Map<string, MenuItem[]> = new Map()
+  container: any
+  isShow?: boolean
+
+  constructor({ lf }) {
+    this.lf = lf
+    this.__menuDOM = document.createElement('div')
+    this.__menuDOM.className = 'lf-inner-context'
+    this.menuTypeMap.set(COMMON_TYPE_KEY, [])
+    this.lf.setContextMenuByType = (type, menus) => {
+      this.setContextMenuByType(type, menus)
+    }
+    this.lf.setContextMenuItems = (menus) => {
+      this.setContextMenuItems(menus)
+    }
+    this.lf.showContextMenu = (data) => {
+      this.showContextMenu(data)
+    }
+    this.lf.hideContextMenu = () => {
+      this.hideContextMenu()
+    }
+  }
+
+  render(lf, container) {
+    this.container = container
+    lf.on('node:click', ({ data }) => {
+      this._activeData = data
+      this.createContextMenu()
+    })
+    lf.on('edge:click', ({ data }) => {
+      // 获取右上角坐标
+      this._activeData = data
+      this.createContextMenu()
+    })
+    lf.on('blank:click', () => {
+      this.hideContextMenu()
+    })
+  }
+
+  setContextMenuByType(type, menus) {
+    this.menuTypeMap.set(type, menus)
+  }
+
+  /**
+   * 隐藏菜单
+   */
+  hideContextMenu() {
+    this.__menuDOM.innerHTML = ''
+    this.__menuDOM.style.display = 'none'
+    if (this.isShow) {
+      this.container.removeChild(this.__menuDOM)
+    }
+    this.lf.off(
+      'node:delete,edge:delete,node:drag,graph:transform',
+      this.listenDelete,
+    )
+    this.isShow = false
+  }
+
+  /**
+   * 显示指定元素菜单
+   * @param data 节点id、节点类型、菜单位置
+   */
+  showContextMenu(data) {
+    if (!data || !data.id) {
+      console.warn('请检查传入的参数')
+      return
+    }
+    this._activeData = data
+    this.createContextMenu()
+  }
+
+  setContextMenuItems(menus) {
+    this.menuTypeMap.set(COMMON_TYPE_KEY, menus)
+  }
+
+  /**
+   * 获取新菜单位置
+   */
+  private getContextMenuPosition() {
+    const data = this._activeData
+    const Model = this.lf.graphModel.getElement(data.id)
+    if (Model) {
+      let x
+      let y
+      if (Model.BaseType === 'edge') {
+        x = Number.MIN_SAFE_INTEGER
+        y = Number.MAX_SAFE_INTEGER
+        const edgeData = Model.getData()
+        x = Math.max(edgeData.startPoint.x, x)
+        y = Math.min(edgeData.startPoint.y, y)
+        x = Math.max(edgeData.endPoint.x, x)
+        y = Math.min(edgeData.endPoint.y, y)
+        if (edgeData.pointsList) {
+          edgeData.pointsList.forEach((point) => {
+            x = Math.max(point.x, x)
+            y = Math.min(point.y, y)
+          })
+        }
+      }
+      if (Model.BaseType === 'node') {
+        x = data.x + Model.width / 2
+        y = data.y - Model.height / 2
+      }
+      return this.lf.graphModel.transformModel.CanvasPointToHtmlPoint([x, y])
+    }
+  }
+
+  private createContextMenu() {
+    const { isSilentMode } = this.lf.options
+    // 静默模式不显示菜单
+    if (isSilentMode) {
+      return
+    }
+    const items = [
+      ...(this.menuTypeMap.get(this._activeData.type) || []),
+      ...(this.menuTypeMap.get(COMMON_TYPE_KEY) || []),
+    ]
+
+    const menus = document.createDocumentFragment()
+    items.forEach((item) => {
+      const menuItem = document.createElement('div')
+      menuItem.className = 'lf-context-item'
+      const img = document.createElement('img')
+      img.src = item.icon
+      img.className = 'lf-context-img'
+      if (item.className) {
+        menuItem.className = `${menuItem.className} ${item.className}`
+      }
+      img.addEventListener('click', () => {
+        this.hideContextMenu()
+        if (item.callback) {
+          item.callback(this._activeData)
+        } else {
+          this.addNode({
+            sourceId: this._activeData.id,
+            x: this._activeData.x,
+            y: this._activeData.y,
+            properties: item.properties,
+            type: item.type,
+          })
+        }
+      })
+      menuItem.appendChild(img)
+      menus.appendChild(menuItem)
+    })
+    this.__menuDOM.innerHTML = ''
+    this.__menuDOM.appendChild(menus)
+    this.showMenu()
+  }
+
+  private addNode(node: ContextMenuNodeData, y?: number) {
+    const isDeep = y !== undefined
+    if (y === undefined) {
+      y = node.y
+    }
+
+    const nodeModel = this.lf.getNodeModelById(node.sourceId)
+    if (nodeModel) {
+      const leftTopX = node.x - nodeModel.width + NEXT_X_DISTANCE
+      const leftTopY = y - node.y / 2 - 20
+      const rightBottomX = node.x + nodeModel.width + NEXT_X_DISTANCE
+      const rightBottomY = y + node.y / 2 + 20
+
+      const existElements = this.lf.getAreaElement(
+        [leftTopX, leftTopY],
+        [rightBottomX, rightBottomY],
+      )
+      if (existElements.length) {
+        y = y + NEXT_Y_DISTANCE
+        this.addNode(node, y)
+        return
+      }
+      if (node.type) {
+        const newNode = this.lf.addNode({
+          type: node.type,
+          x: node.x + 200,
+          y,
+          properties: node.properties,
+        })
+        let startPoint
+        let endPoint
+        if (isDeep) {
+          startPoint = {
+            x: node.x,
+            y: node.y + nodeModel.height / 2,
+          }
+          endPoint = {
+            x: newNode.x - newNode.width / 2,
+            y: newNode.y,
+          }
+        }
+        this.lf.addEdge({
+          sourceNodeId: node.sourceId,
+          targetNodeId: newNode.id,
+          startPoint,
+          endPoint,
+        })
+      }
+    }
+  }
+
+  private showMenu() {
+    const menuPosition = this.getContextMenuPosition()
+    if (menuPosition) {
+      const [x, y] = menuPosition
+      this.__menuDOM.style.display = 'flex'
+      this.__menuDOM.style.top = `${y}px`
+      this.__menuDOM.style.left = `${x + 10}px`
+      this.container.appendChild(this.__menuDOM)
+      // 菜单显示的时候，监听删除，同时隐藏
+      !this.isShow &&
+        this.lf.on(
+          'node:delete,edge:delete,node:drag,graph:transform',
+          this.listenDelete,
+        )
+      this.isShow = true
+    }
+  }
+
+  listenDelete = () => {
+    this.hideContextMenu()
+  }
+}
+
+export default ContextMenu

package/src/components/control/index.ts

@@ -0,0 +1,141 @@
+import LogicFlow from '@logicflow/core'
+
+type ControlItem = {
+  key: string
+  iconClass: string
+  title: string
+  text: string
+  onClick?: (lf: LogicFlow) => void
+  onMouseEnter?: (lf: LogicFlow) => void
+  onMouseLeave?: (lf: LogicFlow) => void
+}
+
+export class Control {
+  static pluginName = 'control'
+
+  private readonly lf: LogicFlow
+  private controlItems: ControlItem[] = [
+    {
+      key: 'zoom-out',
+      iconClass: 'lf-control-zoomOut',
+      title: '缩小流程图',
+      text: '缩小',
+      onClick: () => {
+        this.lf.zoom(false)
+      },
+    },
+    {
+      key: 'zoom-in',
+      iconClass: 'lf-control-zoomIn',
+      title: '放大流程图',
+      text: '放大',
+      onClick: () => {
+        this.lf.zoom(true)
+      },
+    },
+    {
+      key: 'reset',
+      iconClass: 'lf-control-fit',
+      title: '恢复流程原有尺寸',
+      text: '适应',
+      onClick: () => {
+        this.lf.resetZoom()
+      },
+    },
+    {
+      key: 'undo',
+      iconClass: 'lf-control-undo',
+      title: '回到上一步',
+      text: '上一步',
+      onClick: () => {
+        this.lf.undo()
+      },
+    },
+    {
+      key: 'redo',
+      iconClass: 'lf-control-redo',
+      title: '移到下一步',
+      text: '下一步',
+      onClick: () => {
+        this.lf.redo()
+      },
+    },
+  ]
+  private domContainer?: HTMLElement
+  private toolEl?: HTMLElement
+
+  constructor({ lf }: LogicFlow.ExtensionProps) {
+    this.lf = lf
+  }
+
+  render(_: LogicFlow, domContainer: HTMLElement) {
+    this.destroy()
+    const toolEl = this.getControlTool()
+    this.toolEl = toolEl
+    domContainer.appendChild(toolEl)
+    this.domContainer = domContainer
+  }
+
+  destroy() {
+    if (
+      this.domContainer &&
+      this.toolEl &&
+      this.domContainer.contains(this.toolEl)
+    ) {
+      this.domContainer.removeChild(this.toolEl)
+    }
+  }
+
+  addItem(item: ControlItem) {
+    this.controlItems.push(item)
+  }
+
+  removeItem(key: string) {
+    const index = this.controlItems.findIndex((item) => item.key === key)
+    return index == -1 ? null : this.controlItems.splice(index, 1)[0]
+  }
+
+  private getControlTool(): HTMLElement {
+    const NORMAL = 'lf-control-item'
+    const DISABLED = 'lf-control-item disabled'
+    const controlTool = document.createElement('div')
+    const controlElements: HTMLDivElement[] = []
+    controlTool.className = 'lf-control'
+    this.controlItems.forEach((item) => {
+      const itemContainer = document.createElement('div')
+      const icon = document.createElement('i')
+      const text = document.createElement('span')
+      itemContainer.className = DISABLED
+      item.onClick && (itemContainer.onclick = item.onClick.bind(null, this.lf))
+      item.onMouseEnter &&
+        (itemContainer.onmouseenter = item.onMouseEnter.bind(null, this.lf))
+      item.onMouseLeave &&
+        (itemContainer.onmouseleave = item.onMouseLeave.bind(null, this.lf))
+      icon.className = item.iconClass
+      text.className = 'lf-control-text'
+      text.title = item.title
+      text.innerText = item.text
+      itemContainer.append(icon, text)
+      switch (item.text) {
+        case '上一步':
+          this.lf.on('history:change', ({ data: { undoAble } }: any) => {
+            itemContainer.className = undoAble ? NORMAL : DISABLED
+          })
+          break
+        case '下一步':
+          this.lf.on('history:change', ({ data: { redoAble } }: any) => {
+            itemContainer.className = redoAble ? NORMAL : DISABLED
+          })
+          break
+        default:
+          itemContainer.className = NORMAL
+          break
+      }
+      controlElements.push(itemContainer)
+    })
+    controlTool.append(...controlElements)
+    return controlTool
+  }
+}
+
+export default Control

package/src/components/dnd-panel/index.ts

@@ -0,0 +1,129 @@
+import LogicFlow from '@logicflow/core'
+
+export type ShapeItem = {
+  type?: string
+  text?: string
+  icon?: string
+  label?: string
+  className?: string
+  disabled?: boolean
+  properties?: Record<string, unknown>
+  callback?: (lf: LogicFlow, container?: HTMLElement) => void
+  [key: string]: unknown
+}
+
+export class DndPanel {
+  lf: LogicFlow
+  static pluginName = 'dndPanel'
+
+  shapeList?: ShapeItem[]
+  panelEl?: HTMLDivElement
+  domContainer?: HTMLElement
+
+  constructor({ lf }) {
+    this.lf = lf
+    this.lf.setPatternItems = (shapeList) => {
+      this.setPatternItems(shapeList)
+    }
+  }
+
+  render(_lf: LogicFlow, domContainer) {
+    this.destroy()
+    if (!this.shapeList || this.shapeList.length === 0) {
+      // 首次render后失败后，后续调用setPatternItems支持渲染
+      this.domContainer = domContainer
+      return
+    }
+    this.panelEl = document.createElement('div')
+    this.panelEl.className = 'lf-dndpanel'
+    this.shapeList.forEach((shapeItem) => {
+      this.panelEl?.appendChild(this.createDndItem(shapeItem))
+    })
+    domContainer.appendChild(this.panelEl)
+    this.domContainer = domContainer
+  }
+
+  destroy() {
+    if (
+      this.domContainer &&
+      this.panelEl &&
+      this.domContainer.contains(this.panelEl)
+    ) {
+      this.domContainer.removeChild(this.panelEl)
+    }
+  }
+
+  setPatternItems(shapeList) {
+    this.shapeList = shapeList
+    // 支持渲染后重新设置拖拽面板
+    if (this.domContainer) {
+      this.render(this.lf, this.domContainer)
+    }
+  }
+
+  private createDndItem(shapeItem: ShapeItem): HTMLElement {
+    const el = document.createElement('div')
+    el.className = shapeItem.className
+      ? `lf-dnd-item ${shapeItem.className}`
+      : 'lf-dnd-item'
+    const shape = document.createElement('div')
+    shape.className = 'lf-dnd-shape'
+    // if (typeof shapeItem.icon === 'string') {
+    if (shapeItem.icon) {
+      shape.style.backgroundImage = `url(${shapeItem.icon})`
+      // shape.style.backgroundSize = 'contain'
+      // } else {
+      //   shape.appendChild(shapeItem.icon);
+    }
+    el.appendChild(shape)
+    if (shapeItem.label) {
+      const text = document.createElement('div')
+      text.innerText = shapeItem.label
+      text.className = 'lf-dnd-text'
+      el.appendChild(text)
+    }
+    if (shapeItem.disabled) {
+      el.classList.add('disabled')
+      // 保留callback的执行，可用于界面提示当前shapeItem的禁用状态
+      el.onmousedown = () => {
+        if (shapeItem.callback) {
+          shapeItem.callback(this.lf, this.domContainer)
+        }
+      }
+      return el
+    }
+    el.onmousedown = () => {
+      if (shapeItem.type) {
+        this.lf.dnd.startDrag({
+          type: shapeItem.type,
+          properties: shapeItem.properties,
+          text: shapeItem.text,
+        })
+      }
+      if (shapeItem.callback) {
+        shapeItem.callback(this.lf, this.domContainer)
+      }
+    }
+    el.ondblclick = (e) => {
+      this.lf.graphModel.eventCenter.emit('dnd:panel-dbclick', {
+        e,
+        data: shapeItem,
+      })
+    }
+    el.onclick = (e) => {
+      this.lf.graphModel.eventCenter.emit('dnd:panel-click', {
+        e,
+        data: shapeItem,
+      })
+    }
+    el.oncontextmenu = (e) => {
+      this.lf.graphModel.eventCenter.emit('dnd:panel-contextmenu', {
+        e,
+        data: shapeItem,
+      })
+    }
+    return el
+  }
+}
+
+export default DndPanel

package/src/components/highlight/index.ts

@@ -0,0 +1,173 @@
+import LogicFlow, { BaseNodeModel } from '@logicflow/core'
+
+// 后续并入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 (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 (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'
+
+export class Highlight {
+  lf: LogicFlow
+  static pluginName = 'highlight'
+  mode: IMode = 'path'
+  manual = false
+  tempStyles = {}
+
+  constructor({ lf }) {
+    this.lf = lf
+  }
+
+  setMode(mode: IMode) {
+    this.mode = mode
+  }
+
+  setManual(manual: boolean) {
+    this.manual = manual
+  }
+
+  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])
+    }
+  }
+
+  private highlightPath(id: string) {
+    const path = getPath(id, this.lf)
+    path.forEach((_id) => {
+      // 高亮路径上所有的边和节点
+      this.lf.getModelById(_id)?.updateStyles(this.tempStyles[_id])
+    })
+  }
+
+  highlight(id: string, mode: IMode = this.mode) {
+    if (this.manual) 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),
+      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