@logicflow/extension 1.2.27 → 2.0.0-beta.1

package/src/tools/flow-path/index.ts

@@ -0,0 +1,234 @@
+/**
+ * 路径插件，此插件支持获取绘制的图中所有的路径。
+ * 需要指定开始节点类型。
+ */
+
+import LogicFlow from '@logicflow/core'
+import { getBpmnId } from '../../bpmn/getBpmnId'
+
+type Path = {
+  routeId: string
+  name: string
+  elements: string[]
+  type: number
+}
+
+type RawPath = Path & {
+  similarElement: RawPath
+  weight: number
+}
+
+type PathNodeData = {
+  id: string
+  data: any
+  nextNodes: string[]
+}
+
+export class FlowPath {
+  lf: LogicFlow
+  paths: RawPath[]
+  startNodeType?: string
+  static pluginName = 'flowPath'
+
+  constructor({ lf }) {
+    this.lf = lf
+    this.paths = []
+    // 给lf添加方法
+    lf.getPathes = () => {
+      if (!this.startNodeType) {
+        throw new Error('需要预先指定开始节点类型')
+      }
+      return this.getPathes()
+    }
+
+    lf.setRawPaths = (paths: Path[]) => {
+      this.setPathes(paths)
+    }
+
+    lf.getRawPathes = () => this.paths
+
+    lf.setStartNodeType = (type: string) => {
+      this.startNodeType = type
+    }
+  }
+
+  setPathes(paths) {
+    this.paths = paths.map(({ routeId, name, elements, type }) => ({
+      routeId,
+      name,
+      elements,
+      type,
+      similarElement: null,
+      weight: 0,
+    }))
+  }
+
+  getPathes() {
+    const graphData = this.lf.getGraphRawData()
+    const nodesMap: Map<string, PathNodeData> = new Map()
+    const startNodeIds: string[] = []
+    graphData.nodes.forEach((node) => {
+      nodesMap.set(node.id, {
+        id: node.id,
+        data: node,
+        nextNodes: [],
+      })
+      if (node.type === this.startNodeType) {
+        startNodeIds.push(node.id)
+      }
+    })
+    graphData.edges.forEach((edge) => {
+      const node = nodesMap.get(edge.sourceNodeId)
+      node?.nextNodes.push(edge.targetNodeId)
+    })
+    let pathElements: string[][] = []
+    startNodeIds.forEach((id) => {
+      const node = nodesMap.get(id)
+      if (node) {
+        pathElements = pathElements.concat(
+          this.findPathElements(node, nodesMap, []),
+        )
+      }
+    })
+    return this.getNewPathes(pathElements)
+  }
+
+  private findPathElements(
+    node: PathNodeData,
+    nodesMap: Map<string, PathNodeData>,
+    elements: string[] = [],
+  ) {
+    const newPaths: string[] = [...elements]
+    newPaths.push(node.id)
+    if (node.nextNodes.length === 0) {
+      return [newPaths]
+    }
+    let subPath = []
+    for (let i = 0; i < node.nextNodes.length; i++) {
+      const n = nodesMap.get(node.nextNodes[i])
+      let p
+      // 循环路径
+      if (n) {
+        const idx = newPaths.indexOf(n.id)
+        if (idx !== -1) {
+          p = [[...newPaths.slice(idx), n.id]]
+        } else {
+          p = this.findPathElements(n, nodesMap, [...newPaths])
+        }
+        subPath = subPath.concat(p)
+      }
+    }
+    return subPath
+  }
+
+  /**
+   * 设置路径id
+   * 如果存在原始路径Id, 则需要比较新路径是否在原始路径中存在相似路径
+   * 如果有，则尽量使用原始路径。
+   * 相似路径
+   * 1. 如果所有的节点都相同，则必定为同一路径。(包括顺序不同)
+   * 2. 如果新路径比原来路径少了或者多了部分节点，则记录为相似路径。基于不同的差异，标记不同的权重。
+   * 3. 基于新路径在旧路径占用权限，设置新路径Id.
+   * 4. 如果某一条旧路径被多条新路径标记为相同的权重，则这两条新路径都使用新Id.
+   */
+  private getNewPathes(pathElements) {
+    const paths: any = []
+    // 由于循环路径不包括开始，所以存在重复的情况，此处去重。
+    const LoopSet = new Set()
+    pathElements.forEach((elements) => {
+      console.log('elements', elements)
+      const routeId = this.getNewId('path')
+      const name = this.getNewId('路径')
+      const isLoop = this.isLoopPath(elements)
+      const elementStr = elements.join(',')
+      if (!LoopSet.has(elementStr)) {
+        LoopSet.add(elementStr)
+        paths.push({
+          routeId,
+          name,
+          elements,
+          type: isLoop,
+          weight: 0,
+          similarElement: '',
+        })
+      }
+    })
+    const oldPaths = JSON.parse(JSON.stringify(this.paths))
+    // 1) 找到所有路径最相似的路径, 给旧路径标记其最接近的路径
+    paths.forEach((newPath) => {
+      for (let i = 0; i < oldPaths.length; i++) {
+        const oldPath = oldPaths[i]
+        const weight = this.similar2Path(
+          [...newPath.elements],
+          [...oldPath.elements],
+        )
+        if (weight > newPath.weight && oldPath.weight <= weight) {
+          newPath.weight = weight
+          newPath.similarElement = oldPath
+          if (weight === oldPath.weight && oldPath.similarElement) {
+            // 特殊处理，如果两个路径都与同一条旧路径有相似的权重，则这两个路径的相似路径都置空
+            oldPath.similarElement.similarElement = null
+            oldPath.similarElement.weight = 0
+            oldPath.similarElement = null
+            oldPath.weight = 0
+          } else {
+            oldPath.similarElement = newPath
+            oldPath.weight = weight
+          }
+        }
+      }
+    })
+    // 2) 再次遍历所有路径，如果该路径的相似路径对应的相似路径是自己，那么就设置该路径id和name为其相似路径。
+    paths.forEach((newPath) => {
+      if (
+        newPath.similarElement &&
+        newPath.similarElement.similarElement === newPath
+      ) {
+        newPath.routeId = newPath.similarElement.routeId
+        newPath.name = newPath.similarElement.name
+      }
+      delete newPath.similarElement
+      delete newPath.weight
+    })
+
+    this.setPathes(paths)
+    return paths
+  }
+
+  private similar2Path(x, y) {
+    let z = 0
+    const s = x.length + y.length
+
+    x.sort()
+    y.sort()
+    let a = x.shift()
+    let b = y.shift()
+
+    while (a !== undefined && b !== undefined) {
+      if (a === b) {
+        z++
+        a = x.shift()
+        b = y.shift()
+      } else if (a < b) {
+        a = x.shift()
+      } else if (a > b) {
+        b = y.shift()
+      }
+    }
+    return (z / s) * 200
+  }
+
+  private getNewId(prefix) {
+    return `${prefix}_${getBpmnId()}`
+  }
+
+  /**
+   * 判断是否为循环路径
+   * 由于前面进行了特殊处理，将循环部分单独提出来作为路径
+   * 所有循环路径必定开始节点等于结束节点。
+   */
+  private isLoopPath(elements) {
+    const { length } = elements
+    return elements.indexOf(elements[length - 1]) !== length - 1 ? 1 : 0
+  }
+}

package/src/tools/snapshot/README.md

@@ -0,0 +1,9 @@
+## 截取logic-flow内部图形保存为文件并下载
+
+## 往logicflow上下文中添加api getSnapshot
+
+```ts
+LogicFlow.use(Snapshot);
+const lf = new LogicFlow({});
+lf.getSnapshot();
+```

package/src/tools/snapshot/index.ts

@@ -0,0 +1,275 @@
+/**
+ * 快照插件，生成视图
+ */
+export class Snapshot {
+  static pluginName = 'snapshot'
+  lf: any
+  offsetX?: number
+  offsetY?: number
+  fileName: string = 'snapshot.png'
+  customCssRules: string
+  useGlobalRules: boolean
+
+  constructor({ lf }) {
+    this.lf = lf
+    this.customCssRules = ''
+    this.useGlobalRules = true
+    /* 下载快照 */
+    lf.getSnapshot = (fileName: string, backgroundColor: string) => {
+      this.getSnapshot(fileName, backgroundColor)
+    }
+    /* 获取Blob对象，用户图片上传 */
+    lf.getSnapshotBlob = (backgroundColor: string) =>
+      this.getSnapshotBlob(backgroundColor)
+    /* 获取Base64对象，用户图片上传 */
+    lf.getSnapshotBase64 = (backgroundColor: string) =>
+      this.getSnapshotBase64(backgroundColor)
+  }
+
+  /* 获取svgRoot对象 */
+  getSvgRootElement(lf) {
+    const svgRootElement = lf.container.querySelector('.lf-canvas-overlay')
+    return svgRootElement
+  }
+
+  triggerDownload(imgURI: string) {
+    const evt = new MouseEvent('click', {
+      view: document.defaultView,
+      bubbles: false,
+      cancelable: true,
+    })
+    const a = document.createElement('a')
+    a.setAttribute('download', this.fileName)
+    a.setAttribute('href', imgURI)
+    a.setAttribute('target', '_blank')
+    a.dispatchEvent(evt)
+  }
+
+  removeAnchor(element) {
+    const { childNodes } = element
+    let childLength = element.childNodes && element.childNodes.length
+    for (let i = 0; i < childLength; i++) {
+      const child = childNodes[i] as SVGGraphicsElement
+      const classList = (child.classList && Array.from(child.classList)) || []
+      if (classList.indexOf('lf-anchor') > -1) {
+        element.removeChild(element.childNodes[i])
+        childLength--
+        i--
+      }
+    }
+  }
+
+  removeRotateControl(element) {
+    const { childNodes } = element
+    let childLength = element.childNodes && element.childNodes.length
+    for (let i = 0; i < childLength; i++) {
+      const child = childNodes[i] as SVGGraphicsElement
+      const classList = (child.classList && Array.from(child.classList)) || []
+      if (classList.indexOf('lf-rotate-control') > -1) {
+        element.removeChild(element.childNodes[i])
+        childLength--
+        i--
+      }
+    }
+  }
+
+  /* 下载图片 */
+  getSnapshot(fileName: string, backgroundColor: string) {
+    this.fileName = fileName || `logic-flow.${Date.now()}.png`
+    const svg = this.getSvgRootElement(this.lf)
+    this.getCanvasData(svg, backgroundColor).then(
+      (canvas: HTMLCanvasElement) => {
+        const imgURI = canvas
+          .toDataURL('image/png')
+          .replace('image/png', 'image/octet-stream')
+        this.triggerDownload(imgURI)
+      },
+    )
+  }
+
+  /* 获取base64对象 */
+  getSnapshotBase64(backgroundColor: string) {
+    const svg = this.getSvgRootElement(this.lf)
+    return new Promise((resolve) => {
+      this.getCanvasData(svg, backgroundColor).then(
+        (canvas: HTMLCanvasElement) => {
+          const base64 = canvas.toDataURL('image/png')
+          // 输出图片数据以及图片宽高
+          resolve({
+            data: base64,
+            width: canvas.width,
+            height: canvas.height,
+          })
+        },
+      )
+    })
+  }
+
+  /* 获取Blob对象 */
+  getSnapshotBlob(backgroundColor: string) {
+    const svg = this.getSvgRootElement(this.lf)
+    return new Promise((resolve) => {
+      this.getCanvasData(svg, backgroundColor).then(
+        (canvas: HTMLCanvasElement) => {
+          canvas.toBlob((blob) => {
+            // 输出图片数据以及图片宽高
+            resolve({
+              data: blob,
+              width: canvas.width,
+              height: canvas.height,
+            })
+          }, 'image/png')
+        },
+      )
+    })
+  }
+
+  getClassRules() {
+    let rules = ''
+    if (this.useGlobalRules) {
+      const { styleSheets } = document
+      for (let i = 0; i < styleSheets.length; i++) {
+        const sheet = styleSheets[i]
+        for (let j = 0; j < sheet.cssRules.length; j++) {
+          rules += sheet.cssRules[j].cssText
+        }
+      }
+    }
+    if (this.customCssRules) {
+      rules += this.customCssRules
+    }
+    return rules
+  }
+
+  // 获取图片生成中中间产物canvas对象，用户转换为其他需要的格式
+  getCanvasData(
+    svg: SVGGraphicsElement,
+    backgroundColor: string,
+  ): Promise<any> {
+    // TODO: 确认返回 Promise 的类型
+    const copy = svg.cloneNode(true)
+    const graph = copy.lastChild
+    let childLength = graph?.childNodes?.length
+    if (childLength) {
+      for (let i = 0; i < childLength; i++) {
+        const lfLayer = graph?.childNodes[i] as SVGGraphicsElement
+        // 只保留包含节点和边的基础图层进行下载，其他图层删除
+        const layerClassList =
+          lfLayer.classList && Array.from(lfLayer.classList)
+        if (layerClassList && layerClassList.indexOf('lf-base') < 0) {
+          graph?.removeChild(graph.childNodes[i])
+          childLength--
+          i--
+        } else {
+          // 删除锚点
+          const lfBase = graph?.childNodes[i]
+          lfBase &&
+            lfBase.childNodes.forEach((item) => {
+              const element = item as SVGGraphicsElement
+              this.removeAnchor(element.firstChild)
+              this.removeRotateControl(element.firstChild)
+            })
+        }
+      }
+    }
+    let dpr = window.devicePixelRatio || 1
+    if (dpr < 1) {
+      // https://github.com/didi/LogicFlow/issues/1222
+      // canvas.width = bboxWidth * dpr配合ctx.scale(dpr, dpr)是为了解决绘制模糊
+      // 比如dpr=2，先让canvas.width放大到等同于屏幕的物理像素宽高，然后自适应缩放适配canvas.style.width
+      // 由于所有元素都缩放了一半，因此需要ctx.scale(dpr, dpr)放大2倍整体绘制的内容
+      // 当用户缩放浏览器时，window.devicePixelRatio会随着变小
+      // 当window.devicePixelRatio变小到一定程度，会导致canvas.width<canvas.style.width
+      // 由于导出图片的svg的大小是canvas.style.width+canvas.style.height
+      // 因此会导致导出的svg图片无法完整绘制到canvas（因为canvas.width小于svg的宽）
+      // 从而导致canvas导出图片是缺失的svg
+      // 而dpr>=1就能保证canvas.width>=canvas.style.width
+      // 当dpr小于1的时候，我们强制转化为1，并不会产生绘制模糊等问题
+      dpr = 1
+    }
+    const canvas = document.createElement('canvas')
+    /*
+    为了计算真实宽高需要取图的真实dom
+    真实dom存在缩放影响其宽高数值
+    在得到真实宽高后除以缩放比例即可得到正常宽高
+    */
+    const base = this.lf.graphModel.rootEl.querySelector('.lf-base')
+    const bbox = (base as Element).getBoundingClientRect()
+    const layout = this.lf.container
+      .querySelector('.lf-canvas-overlay')
+      .getBoundingClientRect()
+    const offsetX = bbox.x - layout.x
+    const offsetY = bbox.y - layout.y
+    const { graphModel } = this.lf
+    const { transformModel } = graphModel
+    const { SCALE_X, SCALE_Y, TRANSLATE_X, TRANSLATE_Y } = transformModel
+    // offset值加10，保证图形不会紧贴着下载图片的左边和上边
+    ;(copy.lastChild as SVGGElement).style.transform = `matrix(1, 0, 0, 1, ${
+      (-offsetX + TRANSLATE_X) * (1 / SCALE_X) + 10
+    }, ${(-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) + 10})`
+    const bboxWidth = Math.ceil(bbox.width / SCALE_X)
+    const bboxHeight = Math.ceil(bbox.height / SCALE_Y)
+    // width,height 值加40，保证图形不会紧贴着下载图片的右边和下边
+    canvas.style.width = `${bboxWidth}px`
+    canvas.style.height = `${bboxHeight}px`
+    canvas.width = bboxWidth * dpr + 80
+    canvas.height = bboxHeight * dpr + 80
+    const ctx = canvas.getContext('2d')
+    if (ctx) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      ctx.scale(dpr, dpr)
+      // 如果有背景色，设置流程图导出的背景色
+      if (backgroundColor) {
+        ctx.fillStyle = backgroundColor
+        ctx.fillRect(0, 0, bboxWidth * dpr + 80, bboxHeight * dpr + 80)
+      } else {
+        ctx.clearRect(0, 0, bboxWidth, bboxHeight)
+      }
+    }
+    const img = new Image()
+    const style = document.createElement('style')
+    style.innerHTML = this.getClassRules()
+    const foreignObject = document.createElement('foreignObject')
+    foreignObject.appendChild(style)
+    copy.appendChild(foreignObject)
+    return new Promise((resolve) => {
+      img.onload = () => {
+        const isFirefox = navigator.userAgent.indexOf('Firefox') > -1
+        try {
+          if (isFirefox) {
+            createImageBitmap(img, {
+              resizeWidth: canvas.width,
+              resizeHeight: canvas.height,
+            }).then((imageBitmap) => {
+              // 在回调函数中使用 drawImage() 方法绘制图像
+              ctx?.drawImage(imageBitmap, 0, 0)
+              resolve(canvas)
+            })
+          } else {
+            ctx?.drawImage(img, 0, 0)
+            resolve(canvas)
+          }
+        } catch (e) {
+          ctx?.drawImage(img, 0, 0)
+          resolve(canvas)
+        }
+      }
+      /*
+      因为svg中存在dom存放在foreignObject元素中
+      SVG图形转成img对象
+      todo: 会导致一些清晰度问题这个需要再解决
+      fixme: XMLSerializer的中的css background url不会下载图片
+      */
+      const svg2Img = `data:image/svg+xml;charset=utf-8,${new XMLSerializer().serializeToString(
+        copy,
+      )}`
+      const imgSrc = svg2Img
+        .replace(/\n/g, '')
+        .replace(/\t/g, '')
+        .replace(/#/g, '%23')
+      img.src = imgSrc
+    })
+  }
+}
+
+export default Snapshot