@logicflow/extension 2.2.0 → 2.2.1

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

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

@@ -1,141 +0,0 @@
-import LogicFlow from '@logicflow/core'
-
-type ControlItem = {
-  key: string
-  iconClass: string
-  title: string
-  text: string
-  onClick?: (lf: LogicFlow, e: MouseEvent) => void
-  onMouseEnter?: (lf: LogicFlow, e: MouseEvent) => void
-  onMouseLeave?: (lf: LogicFlow, e: MouseEvent) => 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.IExtensionProps) {
-    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

@@ -1,137 +0,0 @@
-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.panelEl.addEventListener(
-      'touchmove',
-      (e) => {
-        e.preventDefault()
-      },
-      { passive: false },
-    )
-    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.onpointerdown = () => {
-        if (shapeItem.callback) {
-          shapeItem.callback(this.lf, this.domContainer)
-        }
-      }
-      return el
-    }
-    el.onpointerdown = (e: PointerEvent) => {
-      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)
-      }
-      e.preventDefault()
-    }
-    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