feat: snapshot能力增强

fanyang · fanyang · commit bd012e27188c · 2024-07-13T03:39:07.000+08:00
diff --git a/examples/feature-examples/src/pages/extensions/snapshot/data.ts b/examples/feature-examples/src/pages/extensions/snapshot/data.ts
@@ -2,8 +2,8 @@ export default {
   nodes: [
     {
       type: 'uml',
-      x: 100,
-      y: 100,
+      x: 0,
+      y: 0,
       id: 'uml_1',
       properties: {
         name: 'haod',
@@ -12,34 +12,34 @@ export default {
     },
     {
       type: 'rect',
-      x: 300,
-      y: 200,
+      x: 150,
+      y: 0,
       text: {
         value: '你好',
-        x: 300,
-        y: 200,
+        x: 150,
+        y: 0,
       },
       id: 'rect_1',
     },
     {
       type: 'rect',
-      x: 500,
-      y: 300,
+      x: 400,
+      y: 100,
       text: {
         value: '你好2',
-        x: 500,
-        y: 300,
+        x: 400,
+        y: 100,
       },
       id: 'rect_2',
     },
     {
       type: 'rect',
-      x: 700,
-      y: 300,
+      x: 300,
+      y: 200,
       text: {
         value: '你好3',
-        x: 700,
-        y: 300,
+        x: 300,
+        y: 200,
       },
       id: 'rect_3',
     },
diff --git a/examples/feature-examples/src/pages/extensions/snapshot/index.less b/examples/feature-examples/src/pages/extensions/snapshot/index.less
@@ -1,4 +1,4 @@
 #graph {
-  width: 100%;
-  height: 70vh;
+  width: 800px;
+  height: 500px;
 }
diff --git a/examples/feature-examples/src/pages/extensions/snapshot/index.tsx b/examples/feature-examples/src/pages/extensions/snapshot/index.tsx
@@ -1,7 +1,7 @@
-import { Card, Divider, Button, Space } from 'antd'
+import { Card, Divider, Button, Space, Select, Input } from 'antd'
 import LogicFlow from '@logicflow/core'
-import { useEffect, useRef } from 'react'
-import { FlowPath } from '@logicflow/extension'
+import { useEffect, useRef, useState } from 'react'
+import { Snapshot, DndPanel } from '@logicflow/extension'
 
 import './index.less'
 import '@logicflow/core/es/index.css'
@@ -11,17 +11,16 @@ import data from './data'
 import Uml from './uml'
 
 const config: Partial<LogicFlow.Options> = {
-  stopScrollGraph: true,
-  stopZoomGraph: true,
+  partial: true,
   grid: {
     type: 'dot',
     size: 20,
   },
-  plugins: [FlowPath],
+  plugins: [Snapshot, DndPanel],
 }
 
-interface Snapshot {
-  data: LogicFlow.GraphConfigData
+interface SnapshotResponse {
+  data: Blob
   width: number
   height: number
 }
@@ -30,74 +29,163 @@ export default function HighLightExtension() {
   const containerRef = useRef<HTMLDivElement | null>(null)
   const imgRef = useRef<HTMLImageElement | null>(null)
 
-  let lf: LogicFlow
-  useEffect(() => {
-    lf = new LogicFlow({
-      container: containerRef.current!,
-      ...config,
-    })
-
-    lf.register(Uml)
+  const [fileName, setFileName] = useState<undefined | string>(undefined) // 文件名
+  const [fileType, setFileType] = useState<string>('png') // 下载的图片类型
+  const [width, setWidth] = useState<string | undefined>() // 宽度
+  const [height, setHeight] = useState<string | undefined>(undefined) // 高度
+  const [padding, setPaddding] = useState<string | undefined>(undefined) //padding
 
-    lf.render(data)
-    lf.translateCenter()
+  const lfRef = useRef<LogicFlow | null>(null)
+  useEffect(() => {
+    if (!lfRef.current) {
+      lfRef.current = new LogicFlow({
+        container: containerRef.current!,
+        ...config,
+      })
+
+      lfRef.current.register(Uml)
+
+      lfRef.current.setPatternItems([
+        {
+          type: 'circle',
+          text: '开始',
+          label: '开始节点',
+          icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAnBJREFUOBGdVL1rU1EcPfdGBddmaZLiEhdx1MHZQXApraCzQ7GKLgoRBxMfcRELuihWKcXFRcEWF8HBf0DdDCKYRZpnl7p0svLe9Zzbd29eQhTbC8nv+9zf130AT63jvooOGS8Vf9Nt5zxba7sXQwODfkWpkbjTQfCGUd9gIp3uuPP8bZ946g56dYQvnBg+b1HB8VIQmMFrazKcKSvFW2dQTxJnJdQ77urmXWOMBCmXM2Rke4S7UAW+/8ywwFoewmBps2tu7mbTdp8VMOkIRAkKfrVawalJTtIliclFbaOBqa0M2xImHeVIfd/nKAfVq/LGnPss5Kh00VEdSzfwnBXPUpmykNss4lUI9C1ga+8PNrBD5YeqRY2Zz8PhjooIbfJXjowvQJBqkmEkVnktWhwu2SM7SMx7Cj0N9IC0oQXRo8xwAGzQms+xrB/nNSUWVveI48ayrFGyC2+E2C+aWrZHXvOuz+CiV6iycWe1Rd1Q6+QUG07nb5SbPrL4426d+9E1axKjY3AoRrlEeSQo2Eu0T6BWAAr6COhTcWjRaYfKG5csnvytvUr/WY4rrPMB53Uo7jZRjXaG6/CFfNMaXEu75nG47X+oepU7PKJvvzGDY1YLSKHJrK7vFUwXKkaxwhCW3u+sDFMVrIju54RYYbFKpALZAo7sB6wcKyyrd+aBMryMT2gPyD6GsQoRFkGHr14TthZni9ck0z+Pnmee460mHXbRAypKNy3nuMdrWgVKj8YVV8E7PSzp1BZ9SJnJAsXdryw/h5ctboUVi4AFiCd+lQaYMw5z3LGTBKjLQOeUF35k89f58Vv/tGh+l+PE/wG0rgfIUbZK5AAAAABJRU5ErkJggg==',
+        },
+        {
+          type: 'rect',
+          label: '用户任务',
+          icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==',
+          className: 'important-node',
+        },
+        {
+          type: 'rect',
+          label: '系统任务',
+          icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==',
+          className: 'import_icon',
+        },
+        {
+          type: 'diamond',
+          label: '条件判断',
+          icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAAHeEJUAAAAABGdBTUEAALGPC/xhBQAAAvVJREFUOBGNVEFrE0EU/mY3bQoiFlOkaUJrQUQoWMGePLX24EH0IIoHKQiCV0G8iE1covgLiqA/QTzVm1JPogc9tIJYFaQtlhQxqYjSpunu+L7JvmUTU3AgmTfvffPNN++9WSA1DO182f6xwILzD5btfAoQmwL5KJEwiQyVbSVZ0IgRyV6PTpIJ81E5ZvqfHQR0HUOBHW4L5Et2kQ6Zf7iAOhTFAA8s0pEP7AXO1uAA52SbqGk6h/6J45LaLhO64ByfcUzM39V7ZiAdS2yCePPEIQYvTUHqM/n7dgQNfBKWPjpF4ISk8q3J4nB11qw6X8l+FsF3EhlkEMfrjIer3wJTLwS2aCNcj4DbGxXTw00JmAuO+Ni6bBxVUCvS5d9aa04+so4pHW5jLTywuXAL7jJ+D06sl82Sgl2JuVBQn498zkc2bGKxULHjCnSMadBKYDYYHAtsby1EQ5lNGrQd4Y3v4Zo0XdGEmDno46yCM9Tk+RiJmUYHS/aXHPNTcjxcbTFna000PFJHIVZ5lFRqRpJWk9/+QtlOUYJj9HG5pVFEU7zqIYDVsw2s+AJaD8wTd2umgSCCyUxgGsS1Y6TBwXQQTFuZaHcd8gAGioE90hlsY+wMcs30RduYtxanjMGal8H5dMW67dmT1JFtYUEe8LiQLRsPZ6IIc7A4J5tqco3T0pnv/4u0kyzrYUq7gASuEyI8VXKvB9Odytv6jS/PNaZBln0nioJG/AVQRZvApOdhjj3Jt8QC8Im09SafwdBdvIpztpxWxpeKCC+EsFdS8DCyuCn2munFpL7ctHKp+Xc5cMybeIyMAN33SPL3ZR9QV1XVwLyzHm6Iv0/yeUuUb7PPlZC4D4HZkeu6dpF4v9j9MreGtMbxMMRLIcjJic9yHi7WQ3yVKzZVWUr5UrViJvn1FfUlwe/KYVfYyWRLSGNu16hR01U9IacajXPei0wx/5BqgInvJN+MMNtNme7ReU9SBbgntovn0kKHpFg7UogZvaZiOue/q1SBo9ktHzQAAAAASUVORK5CYII=',
+        },
+        {
+          type: 'circle',
+          text: '结束',
+          label: '结束节点',
+          icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAA1BJREFUOBFtVE1IVUEYPXOf+tq40Y3vPcmFIdSjIorWoRG0ERWUgnb5FwVhYQSl72oUoZAboxKNFtWiwKRN0M+jpfSzqJAQclHo001tKkjl3emc8V69igP3znzfnO/M9zcDcKT67azmjYWTwl9Vn7Vumeqzj1DVb6cleQY4oAVnIOPb+mKAGxQmKI5CWNJ2aLPatxWa3aB9K7/fB+/Z0jUF6TmMlFLQqrkECWQzOZxYGjTlOl8eeKaIY5yHnFn486xBustDjWT6dG7pmjHOJd+33t0iitTPkK6tEvjxq4h2MozQ6WFSX/LkDUGfFwfhEZj1Auz/U4pyAi5Sznd7uKzznXeVHlI/Aywmk6j7fsUsEuCGADrWARXXwjxWQsUbIupDHJI7kF5dRktg0eN81IbiZXiTESic50iwS+t1oJgL83jAiBupLDCQqwziaWSoAFSeIR3P5Xv5az00wyIn35QRYTwdSYbz8pH8fxUUAtxnFvYmEmgI0wYXUXcCCSpeEVpXlsRhBnCEATxWylL9+EKCAYhe1NGstUa6356kS9NVvt3DU2fd+Wtbm/+lSbylJqsqkSm9CRhvoJVlvKPvF1RKY/FcPn5j4UfIMLn8D4UYb54BNsilTDXKnF4CfTobA0FpoW/LSp306wkXM+XaOJhZaFkcNM82ASNAWMrhrUbRfmyeI1FvRBTpN06WKxa9BK0o2E4Pd3zfBBEwPsv9sQBnmLVbLEIZ/Xe9LYwJu/Er17W6HYVBc7vmuk0xUQ+pqxdom5Fnp55SiytXLPYoMXNM4u4SNSCFWnrVIzKG3EGyMXo6n/BQOe+bX3FClY4PwydVhthOZ9NnS+ntiLh0fxtlUJHAuGaFoVmttpVMeum0p3WEXbcll94l1wM/gZ0Ccczop77VvN2I7TlsZCsuXf1WHvWEhjO8DPtyOVg2/mvK9QqboEth+7pD6NUQC1HN/TwvydGBARi9MZSzLE4b8Ru3XhX2PBxf8E1er2A6516o0w4sIA+lwURhAON82Kwe2iDAC1Watq4XHaGQ7skLcFOtI5lDxuM2gZe6WFIotPAhbaeYlU4to5cuarF1QrcZ/lwrLaCJl66JBocYZnrNlvm2+MBCTmUymPrYZVbjdlr/BxlMjmNmNI3SAAAAAElFTkSuQmCC',
+        },
+      ])
+      lfRef.current.render(data)
+      lfRef.current.translateCenter()
+
+      lfRef.current.extension.snapshot.useGlobalRules = false
+      lfRef.current.extension.snapshot.customCssRules = `
+          .uml-wrapper {
+            line-height: 1.2;
+            text-align: center;
+            color: blue;
+          }
+        `
+    }
   }, [])
 
+  // 下载
   const downLoad = () => {
-    lf.getSnapshot()
+    lfRef.current &&
+      lfRef.current.getSnapshot(fileName, {
+        fileType,
+        height: height,
+        padding: padding,
+        backgroundColor: 'yellow',
+        partialElement: true,
+        ...(width ? { width } : {}),
+        ...(height ? { height } : {}),
+        ...(padding ? { padding } : {}),
+      })
   }
 
+  // 预览
   const preview = () => {
-    lf.getSnapshotBlob('#FFFFFF').then(({ data, width, height }: Snapshot) => {
-      // imgRef.current && imgRef.current.src = window.URL.createObjectURL(data);
-      console.log(width, height, data)
-    })
+    lfRef.current &&
+      lfRef.current
+        .getSnapshotBlob('#FFFFFF', fileType)
+        .then(({ data }: SnapshotResponse) => {
+          if (imgRef.current) {
+            imgRef.current.width = 500
+            imgRef.current.height = 400
+            imgRef.current.src = window.URL.createObjectURL(data)
+          }
+        })
   }
 
+  // 打印base64地址
   const logBase64 = () => {
-    lf.getSnapshotBase64().then(({ data, width, height }: Snapshot) => {
-      // document.getElementById('img').src = data
-      console.log(width, height, data)
-    })
-  }
-
-  const downloadXml = () => {
-    const data = lf.getGraphData()
-    console.log(lfJson2Xml(data))
-    download('logicflow.xml', lfJson2Xml(data))
-
-    function download(filename, text) {
-      const element = document.createElement('a')
-      element.setAttribute(
-        'href',
-        'data:text/plain;charset=utf-8,' + encodeURIComponent(text),
-      )
-      element.setAttribute('download', filename)
-
-      element.style.display = 'none'
-      document.body.appendChild(element)
-
-      element.click()
-
-      document.body.removeChild(element)
-    }
+    lfRef.current &&
+      lfRef.current
+        .getSnapshotBase64(undefined, fileType)
+        .then(({ data, width, height }: SnapshotResponse) => {
+          // document.getElementById('img').src = data
+          console.log(width, height, data)
+        })
   }
 
   return (
     <Card title="LogicFlow Extension - Snapshot">
+      <div style={{ marginBottom: '10px' }}>
+        <Space>
+          <span>文件名：</span>
+          <Input
+            placeholder="文件名"
+            value={fileName}
+            onChange={(e) => setFileName(e.target.value)}
+          />
+          <span>文件类型(默认png)：</span>
+          <Select
+            defaultValue={fileType}
+            style={{ width: 120 }}
+            onChange={(value) => setFileType(value)}
+            options={[
+              { value: 'png', label: 'png' },
+              { value: 'jpeg', label: 'jpeg' },
+              { value: 'webp', label: 'webp' },
+              { value: 'gif', label: 'gif' },
+            ]}
+          />
+          <span>宽度</span>
+          <Input
+            placeholder="width"
+            value={width}
+            onChange={(e) => setWidth(e.target.value)}
+          />
+          <span>高度</span>
+          <Input
+            placeholder="height"
+            value={height}
+            onChange={(e) => setHeight(e.target.value)}
+          />
+          <span>padding</span>
+          <Input
+            placeholder="padding"
+            value={padding}
+            onChange={(e) => setPaddding(e.target.value)}
+          />
+          <Button id="download" onClick={downLoad}>
+            下载快照
+          </Button>
+        </Space>
+      </div>
+      <Divider />
       <Space>
-        <Button id="download" onClick={downLoad}>
-          下载快照
-        </Button>
         <Button id="preview" onClick={preview}>
           预览
         </Button>
         <Button id="base64" onClick={logBase64}>
           打印base64
         </Button>
-        <Button id="downloadXml" onClick={downloadXml}>
+        {/* <Button id="downloadXml" onClick={downloadXml}>
           获取xml
-        </Button>
+        </Button> */}
       </Space>
       <Divider />
       <div ref={containerRef} id="graph"></div>
diff --git a/packages/core/src/model/GraphModel.ts b/packages/core/src/model/GraphModel.ts
@@ -1484,6 +1484,21 @@ export class GraphModel {
     const edgeModel = this.getEdgeModelById(edgeId)
     edgeModel?.closeEdgeAnimation()
   }
+
+  /**
+   * 设置是否开启局部渲染模式，返回重新渲染后promise
+   * @param partial boolean
+   * @returns Promise<boolean>
+   */
+  @action setPartial(partial: boolean): Promise<boolean> {
+    this.partial = partial
+    return new Promise((resolve, reject) => {
+      this.eventCenter.on('graph: partialRendered', ({ isRendered }) => {
+        isRendered ? resolve(isRendered) : reject(isRendered)
+        this.eventCenter.off('graph: partialRendered')
+      })
+    })
+  }
 }
 
 export namespace GraphModel {
diff --git a/packages/core/src/view/Graph.tsx b/packages/core/src/view/Graph.tsx
@@ -71,7 +71,7 @@ class Graph extends Component<IGraphProps> {
     const grid = options.grid && Grid.getGridOptions(options.grid)
     const { fakeNode, editConfigModel } = graphModel
     const { adjustEdge } = editConfigModel
-
+    graphModel.eventCenter.emit('graph: partialRendered', { isRendered: true })
     return (
       <div className="lf-graph" flow-id={graphModel.flowId} style={style}>
         <CanvasOverlay graphModel={graphModel} dnd={dnd}>
diff --git a/packages/extension/src/tools/snapshot/README.md b/packages/extension/src/tools/snapshot/README.md
@@ -1,3 +1,5 @@
+# Snapshot 导出图片插件
+
 ## 截取logic-flow内部图形保存为文件并下载
 
 ## 往logicflow上下文中添加api getSnapshot
diff --git a/packages/extension/src/tools/snapshot/index.ts b/packages/extension/src/tools/snapshot/index.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`	`1`	`#graph {`
`2`		`- width: 100%;`
`3`		`- height: 70vh;`
	`2`	`+ width: 800px;`
	`3`	`+ height: 500px;`
`4`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+# Snapshot 导出图片插件`
	`2`	`+`
`1`	`3`	`## 截取logic-flow内部图形保存为文件并下载`
`2`	`4`
`3`	`5`	`## 往logicflow上下文中添加api getSnapshot`