@logicflow/extension 2.0.0-beta.1 → 2.0.0-beta.11

package/src/tools/snapshot/index.ts

@@ -1,12 +1,58 @@
+import LogicFlow from '@logicflow/core'
+import { updateImageSource, copyCanvas } from './utils'
+
+// 导出图片
+export type ToImageOptions = {
+  /**
+   * 导出图片的格式，可选值为：`png`、`webp`、`gif`、`jpeg`、`svg`，默认值为 `png`
+   */
+  fileType?: string
+  /**
+   * 导出图片的宽度，通常无需设置，设置后可能会拉伸图形
+   */
+  width?: number
+  /**
+   * 导出图片的高度，通常无需设置，设置后可能会拉伸图形
+   */
+  height?: number
+  /**
+   * 导出图片的背景色，默认为透明
+   */
+  backgroundColor?: string
+  /**
+   * 导出图片的质量。
+   *
+   * 在指定图片格式为 `jpeg` 或 `webp` 的情况下，可以从 0 到 1 的区间内选择图片的质量，如果超出取值范围，将会使用默认值 0.92。导出为其他格式的图片时，该参数会被忽略。
+   */
+  quality?: number
+  /**
+   * 导出图片的内边距，即元素内容所在区域边界与图片边界的距离，单位为像素，默认为 40
+   */
+  padding?: number
+  /**
+   * 导出图片时是否开启局部渲染
+   * - `false`：将导出画布上所有的元素
+   * - `true`：只导出画面区域内的可见元素
+   */
+  partial?: boolean
+}
+
+// Blob | base64
+export type SnapshotResponse = {
+  data: Blob | string
+  width: number
+  height: number
+}
+
 /**
  * 快照插件，生成视图
  */
 export class Snapshot {
   static pluginName = 'snapshot'
-  lf: any
+  lf: LogicFlow
   offsetX?: number
   offsetY?: number
-  fileName: string = 'snapshot.png'
+  fileName?: string // 默认是 logic-flow.当前时间戳
   customCssRules: string
   useGlobalRules: boolean
 
@@ -14,38 +60,58 @@ export class Snapshot {
     this.lf = lf
     this.customCssRules = ''
     this.useGlobalRules = true
+
+    // TODO: 设置fileType为gif但是下载下来的还是png
+    // TODO: 完善静默模式不允许添加、操作元素能力
     /* 下载快照 */
-    lf.getSnapshot = (fileName: string, backgroundColor: string) => {
-      this.getSnapshot(fileName, backgroundColor)
-    }
+    lf.getSnapshot = async (
+      fileName?: string,
+      toImageOptions?: ToImageOptions,
+    ) => await this.getSnapshot(fileName, toImageOptions)
+
     /* 获取Blob对象，用户图片上传 */
-    lf.getSnapshotBlob = (backgroundColor: string) =>
-      this.getSnapshotBlob(backgroundColor)
+    lf.getSnapshotBlob = async (backgroundColor?: string, fileType?: string) =>
+      await this.getSnapshotBlob(backgroundColor, fileType)
+
     /* 获取Base64对象，用户图片上传 */
-    lf.getSnapshotBase64 = (backgroundColor: string) =>
-      this.getSnapshotBase64(backgroundColor)
+    lf.getSnapshotBase64 = async (
+      backgroundColor?: string,
+      fileType?: string,
+    ) => await this.getSnapshotBase64(backgroundColor, fileType)
   }
 
-  /* 获取svgRoot对象 */
-  getSvgRootElement(lf) {
-    const svgRootElement = lf.container.querySelector('.lf-canvas-overlay')
+  /**
+   * 获取svgRoot对象dom: 画布元素（不包含grid背景）
+   * @param lf
+   * @returns
+   */
+  private getSvgRootElement(lf: LogicFlow) {
+    const svgRootElement = lf.container.querySelector('.lf-canvas-overlay')!
     return svgRootElement
   }
 
-  triggerDownload(imgURI: string) {
+  /**
+   * 通过 imgUrl 下载图片
+   * @param imgUrl
+   */
+  private triggerDownload(imgUrl: 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('download', this.fileName!)
+    a.setAttribute('href', imgUrl)
     a.setAttribute('target', '_blank')
     a.dispatchEvent(evt)
   }
 
-  removeAnchor(element) {
+  /**
+   * 删除锚点
+   * @param element
+   */
+  private removeAnchor(element: ChildNode) {
     const { childNodes } = element
     let childLength = element.childNodes && element.childNodes.length
     for (let i = 0; i < childLength; i++) {
@@ -59,7 +125,11 @@ export class Snapshot {
     }
   }
 
-  removeRotateControl(element) {
+  /**
+   * 删除旋转按钮
+   * @param element
+   */
+  private removeRotateControl(element: ChildNode) {
     const { childNodes } = element
     let childLength = element.childNodes && element.childNodes.length
     for (let i = 0; i < childLength; i++) {
@@ -73,27 +143,84 @@ export class Snapshot {
     }
   }
 
-  /* 下载图片 */
-  getSnapshot(fileName: string, backgroundColor: string) {
-    this.fileName = fileName || `logic-flow.${Date.now()}.png`
+  /**
+   * 下载前的处理画布工作：局部渲染模式处理、静默模式处理
+   * @param fileName
+   * @param toImageOptions
+   */
+  async getSnapshot(fileName?: string, toImageOptions?: ToImageOptions) {
+    const curPartial = this.lf.graphModel.getPartial()
+    const { partial = curPartial } = toImageOptions ?? {}
+    // 获取流程图配置
+    const editConfig = this.lf.getEditConfig()
+    // 开启静默模式：如果元素多的话 避免用户交互 感知卡顿
+    this.lf.updateEditConfig({
+      isSilentMode: true,
+      stopScrollGraph: true,
+      stopMoveGraph: true,
+    })
+    // 画布当前渲染模式和用户导出渲染模式不一致时，需要更新画布
+    if (curPartial !== partial) {
+      this.lf.graphModel.setPartial(partial)
+      this.lf.graphModel.eventCenter.once('graph:updated', async () => {
+        await this.snapshot(fileName, toImageOptions)
+        // 恢复原来渲染模式
+        this.lf.graphModel.setPartial(curPartial)
+      })
+    } else {
+      await this.snapshot(fileName, toImageOptions)
+    }
+    // 恢复原来配置
+    this.lf.updateEditConfig(editConfig)
+  }
+
+  /**
+   * 下载图片
+   * @param fileName
+   * @param toImageOptions
+   */
+  private async snapshot(fileName?: string, toImageOptions?: ToImageOptions) {
+    const { fileType = 'png', quality } = toImageOptions ?? {}
+    this.fileName = `${fileName ?? `logic-flow.${Date.now()}`}.${fileType}`
     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)
-      },
-    )
+    await updateImageSource(svg as SVGElement)
+    if (fileType === 'svg') {
+      const copy = this.cloneSvg(svg)
+      const svgString = new XMLSerializer().serializeToString(copy)
+      const blob = new Blob([svgString], {
+        type: 'image/svg+xml;charset=utf-8',
+      })
+      const url = URL.createObjectURL(blob)
+      this.triggerDownload(url)
+    } else {
+      this.getCanvasData(svg, toImageOptions ?? {}).then(
+        (canvas: HTMLCanvasElement) => {
+          // canvas元素 => url   image/octet-stream: 确保所有浏览器都能正常下载
+          const imgUrl = canvas
+            .toDataURL(`image/${fileType}`, quality)
+            .replace(`image/${fileType}`, 'image/octet-stream')
+          this.triggerDownload(imgUrl)
+        },
+      )
+    }
   }
 
-  /* 获取base64对象 */
-  getSnapshotBase64(backgroundColor: string) {
+  /**
+   * 获取base64对象
+   * @param backgroundColor
+   * @param fileType
+   * @returns
+   */
+  private async getSnapshotBase64(
+    backgroundColor?: string,
+    fileType?: string,
+  ): Promise<SnapshotResponse> {
     const svg = this.getSvgRootElement(this.lf)
+    await updateImageSource(svg as SVGElement)
     return new Promise((resolve) => {
-      this.getCanvasData(svg, backgroundColor).then(
+      this.getCanvasData(svg, { backgroundColor }).then(
         (canvas: HTMLCanvasElement) => {
-          const base64 = canvas.toDataURL('image/png')
+          const base64 = canvas.toDataURL(`image/${fileType ?? 'png'}`)
           // 输出图片数据以及图片宽高
           resolve({
             data: base64,
@@ -105,33 +232,56 @@ export class Snapshot {
     })
   }
 
-  /* 获取Blob对象 */
-  getSnapshotBlob(backgroundColor: string) {
+  /**
+   * 获取Blob对象
+   * @param backgroundColor
+   * @param fileType
+   * @returns
+   */
+  private async getSnapshotBlob(
+    backgroundColor?: string,
+    fileType?: string,
+  ): Promise<SnapshotResponse> {
     const svg = this.getSvgRootElement(this.lf)
+    await updateImageSource(svg as SVGElement)
     return new Promise((resolve) => {
-      this.getCanvasData(svg, backgroundColor).then(
+      this.getCanvasData(svg, { backgroundColor }).then(
         (canvas: HTMLCanvasElement) => {
-          canvas.toBlob((blob) => {
-            // 输出图片数据以及图片宽高
-            resolve({
-              data: blob,
-              width: canvas.width,
-              height: canvas.height,
-            })
-          }, 'image/png')
+          canvas.toBlob(
+            (blob) => {
+              // 输出图片数据以及图片宽高
+              resolve({
+                data: blob!,
+                width: canvas.width,
+                height: canvas.height,
+              })
+            },
+            `image/${fileType ?? 'png'}`,
+          )
         },
       )
     })
   }
 
-  getClassRules() {
+  /**
+   * 获取脚本css样式
+   * @returns
+   */
+  private getClassRules(): string {
     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
+        // 这里是为了过滤掉不同源css脚本
+        try {
+          for (let j = 0; j < sheet.cssRules.length; j++) {
+            rules += sheet.cssRules[j].cssText
+          }
+        } catch (error) {
+          console.log(
+            'CSS scripts from different sources have been filtered out',
+          )
         }
       }
     }
@@ -141,37 +291,19 @@ export class Snapshot {
     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)
-            })
-        }
-      }
-    }
+  /**
+   * 获取图片生成中间产物canvas对象，用户转换为其他需要的格式
+   * @param svg
+   * @param toImageOptions
+   * @returns
+   */
+  private async getCanvasData(
+    svg: Element,
+    toImageOptions: ToImageOptions,
+  ): Promise<HTMLCanvasElement> {
+    const { width, height, backgroundColor, padding = 40 } = toImageOptions
+    const copy = this.cloneSvg(svg, false)
+
     let dpr = window.devicePixelRatio || 1
     if (dpr < 1) {
       // https://github.com/didi/LogicFlow/issues/1222
@@ -187,46 +319,50 @@ export class Snapshot {
       // 当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 layoutCanvas = this.lf.container.querySelector('.lf-canvas-overlay')!
+    const layout = layoutCanvas.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})`
+    ;(copy.lastChild as SVGElement).style.transform = `matrix(1, 0, 0, 1, ${
+      (-offsetX + TRANSLATE_X) * (1 / SCALE_X)
+    }, ${(-offsetY + TRANSLATE_Y) * (1 / SCALE_Y)})`
+    // 包含所有元素的最小宽高
     const bboxWidth = Math.ceil(bbox.width / SCALE_X)
     const bboxHeight = Math.ceil(bbox.height / SCALE_Y)
-    // width,height 值加40，保证图形不会紧贴着下载图片的右边和下边
+    const canvas = document.createElement('canvas')
     canvas.style.width = `${bboxWidth}px`
     canvas.style.height = `${bboxHeight}px`
-    canvas.width = bboxWidth * dpr + 80
-    canvas.height = bboxHeight * dpr + 80
+    // 宽高值 默认加padding 40，保证图形不会紧贴着下载图片
+    canvas.width = bboxWidth * dpr + padding * 2
+    canvas.height = bboxHeight * dpr + padding * 2
     const ctx = canvas.getContext('2d')
     if (ctx) {
+      // 清空canvas
       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)
+        ctx.fillRect(0, 0, canvas.width, canvas.height)
       } else {
-        ctx.clearRect(0, 0, bboxWidth, bboxHeight)
+        ctx.clearRect(0, 0, canvas.width, canvas.height)
       }
     }
+
     const img = new Image()
+
+    // 设置css样式
     const style = document.createElement('style')
     style.innerHTML = this.getClassRules()
     const foreignObject = document.createElement('foreignObject')
@@ -238,26 +374,35 @@ export class Snapshot {
         try {
           if (isFirefox) {
             createImageBitmap(img, {
-              resizeWidth: canvas.width,
-              resizeHeight: canvas.height,
+              resizeWidth:
+                width && height
+                  ? copyCanvas(canvas, width, height).width
+                  : canvas.width,
+              resizeHeight:
+                width && height
+                  ? copyCanvas(canvas, width, height).height
+                  : canvas.height,
             }).then((imageBitmap) => {
-              // 在回调函数中使用 drawImage() 方法绘制图像
-              ctx?.drawImage(imageBitmap, 0, 0)
-              resolve(canvas)
+              ctx?.drawImage(imageBitmap, padding / dpr, padding / dpr)
+              resolve(
+                width && height ? copyCanvas(canvas, width, height) : canvas,
+              )
             })
           } else {
-            ctx?.drawImage(img, 0, 0)
-            resolve(canvas)
+            ctx?.drawImage(img, padding / dpr, padding / dpr)
+            resolve(
+              width && height ? copyCanvas(canvas, width, height) : canvas,
+            )
           }
         } catch (e) {
-          ctx?.drawImage(img, 0, 0)
-          resolve(canvas)
+          ctx?.drawImage(img, padding / dpr, padding / dpr)
+          resolve(width && height ? copyCanvas(canvas, width, height) : canvas)
         }
       }
+
       /*
       因为svg中存在dom存放在foreignObject元素中
-      SVG图形转成img对象
-      todo: 会导致一些清晰度问题这个需要再解决
+      svg dom => Base64编码字符串 挂载到img上
       fixme: XMLSerializer的中的css background url不会下载图片
       */
       const svg2Img = `data:image/svg+xml;charset=utf-8,${new XMLSerializer().serializeToString(
@@ -270,6 +415,48 @@ export class Snapshot {
       img.src = imgSrc
     })
   }
+
+  /**
+   * 克隆并处理画布节点
+   * @param svg
+   * @returns
+   */
+  private cloneSvg(svg: Element, addStyle: boolean = true): Node {
+    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!)
+            })
+        }
+      }
+    }
+    // 设置css样式
+    if (addStyle) {
+      const style = document.createElement('style')
+      style.innerHTML = this.getClassRules()
+      const foreignObject = document.createElement('foreignObject')
+      foreignObject.appendChild(style)
+      copy.appendChild(foreignObject)
+    }
+    return copy
+  }
 }
 
 export default Snapshot

package/src/tools/snapshot/utils.ts

@@ -0,0 +1,163 @@
+/**
+ * 图片缓存, 已请求过的图片直接从缓存中获取
+ */
+const imageCache: Record<string, string> = {}
+
+/**
+ * 当获取图片失败时会返回失败信息，是 text/plain 类型的数据
+ * @param str - 图片内容
+ * @returns
+ */
+export function isTextPlainBase64(str: string) {
+  return str.startsWith('data:text/plain')
+}
+
+/**
+ * 将网络图片转为 base64
+ * @param url - 图片地址
+ * @returns
+ */
+export async function convertImageToBase64(url: string): Promise<string> {
+  if (imageCache[url]) {
+    return imageCache[url]
+  }
+  return new Promise((resolve, reject) => {
+    try {
+      fetch(url)
+        .then((response) => response.blob())
+        .then((blob) => {
+          const reader = new FileReader()
+          reader.onloadend = () => {
+            resolve((imageCache[url] = reader.result as string))
+          }
+          reader.onerror = reject
+          reader.readAsDataURL(blob)
+        })
+        .catch(() => {
+          resolve((imageCache[url] = url))
+        })
+    } catch (error) {
+      // 如果转换失败，后续大概率仍然会失败，因此直接缓存
+      return (imageCache[url] = url)
+    }
+  })
+}
+
+/**
+ * 使用 base64 的图片替换 img 标签的 src 或 image 标签的 href
+ * @param node - html 节点或 svg 节点
+ */
+export async function updateImageSrcOrHrefWithBase64Image(
+  node: HTMLImageElement | SVGImageElement,
+  attrName: 'src' | 'href',
+) {
+  try {
+    const url = node.getAttribute(attrName) || ''
+    // 已经是 base64 图片，不需要处理
+    if (url.startsWith('data:')) {
+      return
+    }
+    const base64Image = await convertImageToBase64(url)
+    if (isTextPlainBase64(base64Image)) {
+      return
+    }
+    node.setAttribute(attrName, base64Image)
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+/**
+ * 使用 base64 的图片替换背景图片
+ * @param node - html 节点
+ * @param styleAttr - 样式属性名称
+ */
+export async function updateBackgroundImageWithBase64Image(
+  node: HTMLElement,
+  url: string,
+) {
+  try {
+    // 已经是 base64 图片，不需要处理
+    if (url.startsWith('data:')) {
+      return
+    }
+    const base64Image = await convertImageToBase64(url)
+    if (isTextPlainBase64(base64Image)) {
+      return
+    }
+    node.style.backgroundImage = `url(${base64Image})`
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+/**
+ * 更新图片数据
+ * @param node - 节点
+ */
+export async function updateImageSource(node: HTMLElement | SVGElement) {
+  const nodes = [node]
+  let nodePtr
+  const promises: any[] = []
+  while (nodes.length) {
+    nodePtr = nodes.shift()
+    if (nodePtr.children.length) {
+      nodes.push(...nodePtr.children)
+    }
+    if (nodePtr instanceof HTMLElement) {
+      // 如果有 style 的 background, backgroundImage 属性中有 url(xxx), 尝试替换为 base64 图片
+      const { background, backgroundImage } = nodePtr.style
+      const backgroundUrlMatch = background.match(/url\(["']?(.*?)["']?\)/)
+      if (backgroundUrlMatch && backgroundUrlMatch[1]) {
+        const imageUrl = backgroundUrlMatch[1]
+        promises.push(updateBackgroundImageWithBase64Image(nodePtr, imageUrl))
+      }
+      const backgroundImageUrlMatch = backgroundImage.match(
+        /url\(["']?(.*?)["']?\)/,
+      )
+      if (backgroundImageUrlMatch && backgroundImageUrlMatch[1]) {
+        const imageUrl = backgroundImageUrlMatch[1]
+        promises.push(updateBackgroundImageWithBase64Image(nodePtr, imageUrl))
+      }
+    }
+    // 如果有 img 和 image 标签，尝试将 src 和 href 替换为 base64 图片
+    if (nodePtr instanceof HTMLImageElement) {
+      promises.push(updateImageSrcOrHrefWithBase64Image(nodePtr, 'src'))
+    } else if (nodePtr instanceof SVGImageElement) {
+      promises.push(updateImageSrcOrHrefWithBase64Image(nodePtr, 'href'))
+    }
+  }
+  await Promise.all(promises)
+}
+
+/**
+ * 重新复制canvas 用于在不裁剪原canvas的基础上通过拉伸方式达到自定义宽高目的
+ * @param originCanvas HTMLCanvasElement
+ * @param targetWidth number
+ * @param targetHeight number
+ */
+export function copyCanvas(
+  originCanvas: HTMLCanvasElement,
+  targetWidth: number,
+  targetHeight: number,
+): HTMLCanvasElement {
+  const newCanvas = document.createElement('canvas')
+  newCanvas.width = targetWidth
+  newCanvas.height = targetHeight
+  const newCtx = newCanvas.getContext('2d')
+  if (newCtx) {
+    // 注意: 自定义宽高时，可能会拉伸图形，这时候padding也会被拉伸导致不准确
+    newCtx.drawImage(
+      originCanvas,
+      0,
+      0,
+      originCanvas.width,
+      originCanvas.height,
+      0,
+      0,
+      targetWidth,
+      targetHeight,
+    )
+  }
+  return newCanvas
+}