@logicflow/extension 1.2.27 → 2.0.0-beta.0

package/src/components/mini-map/index.ts

@@ -0,0 +1,666 @@
+import LogicFlow from '@logicflow/core'
+
+import Position = LogicFlow.Position
+import MiniMapOption = MiniMap.MiniMapOption
+import MiniMapPosition = MiniMap.MiniMapPosition
+
+export namespace MiniMap {
+  export type MiniMapOption = Partial<{
+    /**
+     * 小地图中画布的宽度
+     */
+    width: number
+    /**
+     * 小地图中画布的高度
+     */
+    height: number
+    /**
+     * 在小地图的画布中是否渲染边
+     */
+    showEdge: boolean
+    /**
+     * 是否显示小地图的标题栏
+     */
+    isShowHeader: boolean
+    /**
+     * 是否显示关闭按钮
+     */
+    isShowCloseIcon: boolean
+    /**
+     * 小地图标题栏的文本内容
+     */
+    headerTitle: string
+    /**
+     * 小地图与画布左边界的左边距，优先级高于`rightPosition`
+     */
+    leftPosition: number
+    /**
+     * 小地图与画布右边界的右边距，优先级低于`leftPosition`
+     */
+    rightPosition: number
+    /**
+     * 小地图与画布上边界的上边距，优先级高于`bottomPosition`
+     */
+    topPosition: number
+    /**
+     * 小地图与画布下边界的下边距，优先级低于`topPosition`
+     */
+    bottomPosition: number
+  }>
+
+  export type AbsolutePosition = Partial<
+    Record<'left' | 'right' | 'top' | 'bottom', number>
+  >
+
+  export type MiniMapPosition =
+    | 'left-top'
+    | 'right-top'
+    | 'left-bottom'
+    | 'right-bottom'
+    | AbsolutePosition
+}
+
+type Bounds = Record<'left' | 'top' | 'bottom' | 'right', number>
+
+export class MiniMap {
+  static pluginName = 'miniMap'
+
+  /**
+   * 主画布的LogicFlow实例
+   */
+  private lf: LogicFlow
+  /**
+   * LogicFlow构造函数
+   */
+  private LFCtor: LogicFlow.LogicFlowConstructor
+  /**
+   * 小地图中画布的LogicFlow实例
+   */
+  private lfMap!: LogicFlow
+
+  /**
+   * lf的工具层容器，用于挂载小地图
+   */
+  private container?: HTMLElement
+  /**
+   * 小地图的容器
+   */
+  private miniMapContainer?: HTMLDivElement
+  /**
+   * 小地图的画布容器
+   */
+  private miniMapWrap!: HTMLDivElement
+  /**
+   * 小地图的预览视窗
+   */
+  private viewport!: HTMLDivElement
+
+  /**
+   * 小地图中画布容器的宽度
+   */
+  private width = 200
+  /**
+   * 小地图中画布容器的高度
+   */
+  private height = 150
+  /**
+   * 小地图中画布的缩放比例
+   */
+  private scale = 1
+  /**
+   * 小地图中画布的水平位移
+   */
+  private translateX = 0
+  /**
+   * 小地图中画布的垂直位移
+   */
+  private translateY = 0
+  /**
+   * 在小地图的画布中是否渲染边
+   */
+  private showEdge = false
+
+  /**
+   * 小地图中画布的区域范围
+   */
+  private bounds: Bounds
+  /**
+   * 所有元素占领的区域范围
+   */
+  private elementAreaBounds: Bounds
+  /**
+   * 主画布视口的区域范围
+   */
+  private viewPortBounds: Bounds
+
+  // 小地图相对画布的绝对定位
+  private leftPosition?: number
+  private topPosition?: number
+  private rightPosition?: number
+  private bottomPosition?: number
+
+  /**
+   * 预览视窗左上角在主画布的y坐标
+   */
+  private viewPortTop = 0
+  /**
+   * 预览视窗左上角在主画布的x坐标
+   */
+  private viewPortLeft = 0
+  // 预览视窗的宽高
+  private viewPortWidth = 150
+  private viewPortHeight = 75
+
+  /**
+   * 拖拽预览视窗时，记录起始点的位置
+   */
+  private startPosition!: Position
+
+  /**
+   * 是否显示小地图
+   */
+  private isShow = false
+  /**
+   * 是否显示小地图的标题栏
+   */
+  private isShowHeader = false
+  /**
+   * 是否显示关闭按钮
+   */
+  private isShowCloseIcon = false
+  /**
+   * 小地图标题栏的文本内容
+   */
+  private headerTitle = '导航'
+  /**
+   * 小地图的logicFlow实例需要禁用的插件
+   */
+  private disabledPlugins = ['miniMap', 'control', 'selectionSelect']
+
+  constructor({ lf, LogicFlow, options }: LogicFlow.ExtensionProps) {
+    this.lf = lf
+    this.LFCtor = LogicFlow
+    if (options && options.MiniMap) {
+      this.setOption(options.MiniMap as MiniMapOption)
+    }
+    this.viewPortWidth = lf.graphModel.width
+    this.viewPortHeight = lf.graphModel.height
+    const boundsInit: Bounds = {
+      left: 0,
+      right: this.viewPortWidth,
+      top: 0,
+      bottom: this.viewPortHeight,
+    }
+    this.bounds = boundsInit
+    this.elementAreaBounds = boundsInit
+    this.viewPortBounds = boundsInit
+    this.initMiniMap()
+  }
+
+  render = (_: LogicFlow, container: HTMLElement) => {
+    this.container = container
+    this.lf.on('history:change', () => {
+      if (this.isShow) {
+        this.setView()
+      }
+    })
+    this.lf.on('graph:transform', () => {
+      if (this.isShow) {
+        this.setView(false)
+      }
+    })
+  }
+
+  /**
+   * 显示小地图
+   * @param left 相对画布的左边距
+   * @param top 相对画布的上边距
+   */
+  public show = (left?: number, top?: number) => {
+    if (!this.isShow) {
+      this.createMiniMap(left, top)
+      this.setView()
+    }
+    this.isShow = true
+  }
+  /**
+   * 隐藏小地图
+   */
+  public hide = () => {
+    if (this.isShow) {
+      this.removeMiniMap()
+      this.lf.emit('miniMap:close', {})
+    }
+    this.isShow = false
+  }
+  /**
+   * 更新小地图在画布中的位置
+   * @param {MiniMapPosition} position
+   */
+  public updatePosition = (position: MiniMapPosition) => {
+    if (typeof position === 'object') {
+      if (position.left !== undefined || position.right !== undefined) {
+        this.leftPosition = position.left
+        this.rightPosition = position.right
+      }
+      if (position.top !== undefined || position.bottom !== undefined) {
+        this.topPosition = position.top
+        this.bottomPosition = position.bottom
+      }
+    } else {
+      switch (position) {
+        case 'left-top':
+          this.leftPosition = 0
+          this.rightPosition = undefined
+          this.topPosition = 0
+          this.bottomPosition = undefined
+          break
+        case 'right-top':
+          this.leftPosition = undefined
+          this.rightPosition = 0
+          this.topPosition = 0
+          this.bottomPosition = undefined
+          break
+        case 'left-bottom':
+          this.leftPosition = 0
+          this.rightPosition = undefined
+          this.topPosition = undefined
+          this.bottomPosition = 0
+          break
+        case 'right-bottom':
+          this.leftPosition = undefined
+          this.rightPosition = 0
+          this.topPosition = undefined
+          this.bottomPosition = 0
+          break
+      }
+    }
+    this.updateMiniMapPosition()
+  }
+  /**
+   * 重置主画布的缩放和平移
+   */
+  public reset = () => {
+    this.lf.resetTranslate()
+    this.lf.resetZoom()
+  }
+  /**
+   * 设置小地图的画布中是否绘制边
+   * @param {boolean} showEdge
+   */
+  public setShowEdge = (showEdge: boolean) => {
+    if (this.showEdge !== showEdge) {
+      this.showEdge = showEdge
+      this.setView()
+    }
+  }
+
+  /**
+   * 初始化小地图的配置
+   * @param options
+   */
+  private setOption(options: MiniMapOption) {
+    const {
+      width = 150,
+      height = 220,
+      showEdge = false,
+      isShowHeader = false,
+      isShowCloseIcon = false,
+      leftPosition,
+      topPosition,
+      rightPosition = 0,
+      bottomPosition = 0,
+      headerTitle = '导航',
+    } = options
+    this.width = width
+    this.height = height
+    this.showEdge = showEdge
+    this.isShowHeader = isShowHeader
+    this.isShowCloseIcon = isShowCloseIcon
+    this.leftPosition = leftPosition
+    this.rightPosition = leftPosition !== undefined ? undefined : rightPosition
+    this.topPosition = topPosition
+    this.bottomPosition = topPosition !== undefined ? undefined : bottomPosition
+    this.headerTitle = headerTitle
+  }
+
+  /**
+   * 初始化小地图的 LogicFlow 实例
+   */
+  private initMiniMap() {
+    const miniMapWrap = document.createElement('div')
+    miniMapWrap.className = 'lf-mini-map-graph'
+    miniMapWrap.style.width = `${this.width}px`
+    miniMapWrap.style.height = `${this.height}px`
+    this.lfMap = new this.LFCtor({
+      container: miniMapWrap,
+      grid: false,
+      isSilentMode: true,
+      stopZoomGraph: true,
+      stopScrollGraph: true,
+      // 禁用画布移动会导致 transformModel.translate 无效，所以这里不禁用
+      stopMoveGraph: false,
+      history: false,
+      snapline: false,
+      disabledPlugins: this.disabledPlugins,
+    })
+    // minimap中禁用adapter。
+    // this.lfMap.adapterIn = (a) => a
+    // this.lfMap.adapterOut = (a) => a
+    this.miniMapWrap = miniMapWrap
+    this.createViewPort()
+    miniMapWrap.addEventListener('click', this.mapClick)
+  }
+
+  private createMiniMap(left?: number, top?: number) {
+    const miniMapContainer = document.createElement('div')
+    this.miniMapContainer = miniMapContainer
+    miniMapContainer.appendChild(this.miniMapWrap)
+
+    miniMapContainer.style.position = 'absolute'
+    if (left !== undefined || top !== undefined) {
+      this.leftPosition = left || 0
+      this.topPosition = top || 0
+      this.rightPosition = undefined
+      this.bottomPosition = undefined
+    }
+    this.updateMiniMapPosition()
+
+    miniMapContainer.className = 'lf-mini-map'
+    if (!this.isShowCloseIcon) {
+      miniMapContainer.classList.add('lf-mini-map-no-close-icon')
+    }
+    if (!this.isShowHeader) {
+      miniMapContainer.classList.add('lf-mini-map-no-header')
+    }
+    this.container?.appendChild(miniMapContainer)
+    this.miniMapWrap.appendChild(this.viewport)
+
+    const header = document.createElement('div')
+    header.className = 'lf-mini-map-header'
+    header.innerText = this.headerTitle
+    miniMapContainer.appendChild(header)
+
+    const close = document.createElement('span')
+    close.className = 'lf-mini-map-close'
+    close.addEventListener('click', this.hide)
+    miniMapContainer.appendChild(close)
+  }
+
+  private updateMiniMapPosition() {
+    if (this.miniMapContainer) {
+      const { style } = this.miniMapContainer
+
+      if (this.rightPosition !== undefined) {
+        style.right = `${this.rightPosition}px`
+        style.left = ''
+      } else {
+        style.left = `${this.leftPosition}px`
+        style.right = ''
+      }
+
+      if (this.bottomPosition !== undefined) {
+        style.bottom = `${this.bottomPosition}px`
+        style.top = ''
+      } else {
+        style.top = `${this.topPosition}px`
+        style.bottom = ''
+      }
+    }
+  }
+
+  private removeMiniMap() {
+    if (this.miniMapContainer) {
+      this.container?.removeChild(this.miniMapContainer)
+    }
+  }
+
+  /**
+   * 更新小地图的区域范围
+   * @param data
+   */
+  private updateBounds(data?: LogicFlow.GraphData) {
+    if (data) {
+      this.updateElementAreaBounds(data)
+    }
+    this.updateViewPortBounds()
+    this.bounds = {
+      left: Math.min(this.elementAreaBounds.left, this.viewPortBounds.left),
+      right: Math.max(this.elementAreaBounds.right, this.viewPortBounds.right),
+      top: Math.min(this.elementAreaBounds.top, this.viewPortBounds.top),
+      bottom: Math.max(
+        this.elementAreaBounds.bottom,
+        this.viewPortBounds.bottom,
+      ),
+    }
+  }
+
+  /**
+   * 计算所有图形一起，占领的区域范围。
+   * @param data
+   */
+  private updateElementAreaBounds(data: LogicFlow.GraphData) {
+    const elementAreaBounds: Bounds = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+    }
+    const { nodes } = data
+    if (nodes && nodes.length > 0) {
+      // TODO: 后续能获取节点高宽信息后，需要更新这里的计算方式
+      nodes.forEach((node) => {
+        const { x, y } = node
+        const width = (node.width as number) ?? 200
+        const height = (node.height as number) ?? 200
+
+        const nodeLeft = x - width / 2
+        const nodeRight = x + width / 2
+        const nodeTop = y - height / 2
+        const nodeBottom = y + height / 2
+
+        elementAreaBounds.left = Math.min(nodeLeft, elementAreaBounds.left)
+        elementAreaBounds.right = Math.max(nodeRight, elementAreaBounds.right)
+        elementAreaBounds.top = Math.min(nodeTop, elementAreaBounds.top)
+        elementAreaBounds.bottom = Math.max(
+          nodeBottom,
+          elementAreaBounds.bottom,
+        )
+      })
+    }
+    this.elementAreaBounds = elementAreaBounds
+  }
+
+  /**
+   * 获取视口范围
+   */
+  private updateViewPortBounds() {
+    const { TRANSLATE_X, TRANSLATE_Y, SCALE_X, SCALE_Y } =
+      this.lf.getTransform()
+    const { width, height } = this.lf.graphModel
+
+    this.viewPortBounds = {
+      left: -TRANSLATE_X / SCALE_X,
+      right: (-TRANSLATE_X + width) / SCALE_X,
+      top: -TRANSLATE_Y / SCALE_Y,
+      bottom: (-TRANSLATE_Y + height) / SCALE_Y,
+    }
+  }
+
+  /**
+   * 删除部分内容以简化渲染，包括边与节点文本
+   */
+  private resetData(data: LogicFlow.GraphData): LogicFlow.GraphData {
+    const { nodes, edges } = data
+    nodes.forEach((node) => {
+      // 删除节点文本
+      node.text = undefined
+    })
+    if (this.showEdge) {
+      edges.forEach((edge) => {
+        // 删除边上的文本
+        edge.text = undefined
+      })
+    }
+    return {
+      nodes,
+      // 是否渲染边
+      edges: this.showEdge ? edges : [],
+    }
+  }
+
+  /**
+   * MiniMap视图重绘
+   * @param reRender 是否重新渲染画布元素
+   */
+  // TODO: 确定 render 函数是否为增量渲染，如果是则不需要 reRender 参数做限制
+  private setView(reRender: boolean = true) {
+    if (reRender) {
+      // 1. 获取到图中所有的节点中的位置
+      const graphData = this.lf.getGraphRawData()
+      const data = this.resetData(graphData)
+      // 由于随时都会有新节点注册进来，需要同步将注册的
+      const { viewMap } = this.lf
+      const { modelMap } = this.lf.graphModel
+      const { viewMap: minimapViewMap } = this.lfMap
+
+      for (const key of viewMap.keys()) {
+        if (!minimapViewMap.has(key)) {
+          this.lfMap.register({
+            type: key,
+            view: viewMap.get(key)!,
+            model: modelMap.get(key)!,
+          })
+        }
+      }
+
+      // 2. 将数据渲染到小地图的画布上
+      this.lfMap.render(data)
+
+      // 3. 更新所有节点与当前视口构成的区域范围
+      this.updateBounds(data)
+    } else {
+      this.updateBounds()
+    }
+
+    // 4. 计算小地图画布相对小地图容器的缩放比例，并移动小地图的视图保证元素全部可见且整体居中。
+    const { left, top, right, bottom } = this.bounds
+    const realWidth = right - left
+    const realHeight = bottom - top
+    const realWidthScale = this.width / realWidth
+    const realHeightScale = this.height / realHeight
+    const scale = Math.min(realWidthScale, realHeightScale)
+    this.scale = scale
+
+    const translateX = left - (this.width / scale - realWidth) / 2
+    const translateY = top - (this.height / scale - realHeight) / 2
+    this.lfMap.graphModel.transformModel.translate(
+      -translateX + this.translateX,
+      -translateY + this.translateY,
+    )
+    this.translateX = translateX
+    this.translateY = translateY
+
+    // 5. 将小地图的画布缩放对应的比例。
+    if (this.miniMapWrap.firstChild) {
+      const innerStyle = (this.miniMapWrap.firstChild as HTMLElement).style
+      innerStyle.pointerEvents = 'none'
+      innerStyle.transform = `matrix(${scale}, 0, 0, ${scale}, 0, 0)`
+      innerStyle.transformOrigin = 'left top'
+      innerStyle.height = `${this.height / scale}px`
+      innerStyle.width = `${this.width / scale}px`
+      this.updateViewPort()
+    }
+  }
+
+  /**
+   * 更新预览视窗的位置
+   */
+  private updateViewPort() {
+    const viewStyle = this.viewport.style
+    const { TRANSLATE_X, TRANSLATE_Y, SCALE_X, SCALE_Y } =
+      this.lf.getTransform()
+    const { width, height } = this.lf.graphModel
+
+    this.viewPortLeft = -TRANSLATE_X / SCALE_X
+    this.viewPortTop = -TRANSLATE_Y / SCALE_Y
+    this.viewPortWidth = (width / SCALE_X) * this.scale
+    this.viewPortHeight = (height / SCALE_Y) * this.scale
+
+    viewStyle.width = `${this.viewPortWidth}px`
+    viewStyle.height = `${this.viewPortHeight}px`
+    viewStyle.left = `${(this.viewPortLeft - this.translateX) * this.scale}px`
+    viewStyle.top = `${(this.viewPortTop - this.translateY) * this.scale}px`
+  }
+
+  /**
+   * 创建预览视窗元素
+   */
+  private createViewPort() {
+    const div = document.createElement('div')
+    div.className = 'lf-minimap-viewport'
+
+    // 拖拽预览视窗，主画布视口跟随移动
+    div.addEventListener('mousedown', this.startDrag)
+
+    // 禁止预览视窗的点击事件冒泡
+    div.addEventListener('click', (e: MouseEvent) => {
+      e.stopPropagation()
+    })
+    this.viewport = div
+  }
+
+  private startDrag = (e: MouseEvent) => {
+    document.addEventListener('mousemove', this.drag)
+    document.addEventListener('mouseup', this.drop)
+    const { x, y } = e
+    this.startPosition = { x, y }
+  }
+
+  /**
+   * 拖拽预览视窗过程中，更新主画布视口
+   */
+  private drag = (e: MouseEvent) => {
+    const { x, y } = e
+    const translateX = (x - this.startPosition.x) / this.scale
+    const translateY = (y - this.startPosition.y) / this.scale
+    const centerX =
+      this.viewPortLeft + translateX + this.viewPortWidth / this.scale / 2
+    const centerY =
+      this.viewPortTop + translateY + this.viewPortHeight / this.scale / 2
+
+    // 每移动一次预览视窗都需要更新拖拽的起始点
+    this.startPosition = { x, y }
+    this.lf.focusOn({
+      coordinate: {
+        x: centerX,
+        y: centerY,
+      },
+    })
+  }
+
+  /**
+   * 拖拽预览视窗结束，移除拖拽事件
+   */
+  private drop = () => {
+    document.removeEventListener('mousemove', this.drag)
+    document.removeEventListener('mouseup', this.drop)
+  }
+
+  /**
+   * 点击小地图中非预览视窗的区域时，移动主画布视口聚焦于点击位置
+   */
+  private mapClick = (e: MouseEvent) => {
+    const { offsetX, offsetY } = e
+    const centerX = this.translateX + offsetX / this.scale
+    const centerY = this.translateY + offsetY / this.scale
+    this.lf.focusOn({
+      coordinate: {
+        x: centerX,
+        y: centerY,
+      },
+    })
+  }
+}
+
+export default MiniMap