refactor(extension): snapshot重构

fanyang · fanyang · commit 6880f5f53165 · 2024-07-15T17:18:57.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
@@ -1,12 +1,12 @@
 export default {
   nodes: [
     {
-      type: 'uml',
+      type: 'customHtml',
       x: 0,
       y: 50,
       id: 'uml_1',
       properties: {
-        name: 'haod',
+        name: 'hello',
         body: '哈哈哈哈',
       },
     },
diff --git a/examples/feature-examples/src/pages/extensions/snapshot/index.tsx b/examples/feature-examples/src/pages/extensions/snapshot/index.tsx
@@ -12,15 +12,20 @@ import {
   Space,
   Select,
   Input,
+  InputNumber,
+  Switch,
 } from 'antd'
 import ImageNode from './imageNode'
-import Uml from './uml'
+import CustomHtml from '../../../components/nodes/custom-html/Html'
 import data from './data'
+import { circle as circleSvgUrl, rect as rectSvgUrl } from './svg'
 
 import './index.less'
 import '@logicflow/core/es/index.css'
 import '@logicflow/extension/es/index.css'
 
+import type { ToImageOptions } from '@logicflow/extension'
+
 const config: Partial<LogicFlow.Options> = {
   style: {
     rect: {
@@ -52,6 +57,7 @@ const config: Partial<LogicFlow.Options> = {
   grid: {
     size: 20,
   },
+  partial: true,
 }
 
 /**
@@ -63,10 +69,11 @@ export default function SnapshotExample() {
 
   const [fileName, setFileName] = useState<string>() // 文件名
   const [fileType, setFileType] = useState<string>('png') // 下载的图片类型
-  const [width, setWidth] = useState<string>() // 宽度
-  const [height, setHeight] = useState<string>() // 高度
-  const [padding, setPaddding] = useState<string>() //padding
-  const [quality, setQuality] = useState<string>() // 图片质量
+  const [width, setWidth] = useState<number>() // 宽度
+  const [height, setHeight] = useState<number>() // 高度
+  const [padding, setPadding] = useState<number>() //padding
+  const [quality, setQuality] = useState<number>() // 图片质量
+  const [partial, setPartial] = useState<boolean>(true) // 导出局部渲染
 
   const [blobData, setBlobData] = useState('')
   const [base64Data, setBase64Data] = useState('')
@@ -80,24 +87,30 @@ export default function SnapshotExample() {
         plugins: [Snapshot, DndPanel],
       })
 
-      lf.register(Uml)
+      lf.register(CustomHtml)
       lf.register(ImageNode)
 
       lf.setPatternItems([
         {
           type: 'circle',
           text: 'circle',
           label: 'circle',
-          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==',
+          icon: circleSvgUrl,
         },
         {
           type: 'rect',
           label: 'rect',
           text: 'circle',
-          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==',
+          icon: rectSvgUrl,
         },
       ])
 
+      lf.on('custom:button-click', (model: any) => {
+        lf.setProperties(model.id, {
+          body: 'LogicFlow',
+        })
+      })
+
       // 默认开启css样式
       lf.extension.snapshot.useGlobalRules = true
       // 不会覆盖css样式，会叠加，customCssRules优先级高
@@ -118,14 +131,14 @@ export default function SnapshotExample() {
 
   // 下载
   const downLoad = () => {
-    const params = {
+    const params: ToImageOptions = {
       fileType,
       backgroundColor: 'yellow',
-      partialElement: true,
-      ...(width ? { width: Number(width) } : {}),
-      ...(height ? { height: Number(height) } : {}),
-      ...(padding ? { padding: Number(padding) } : {}),
-      ...(quality ? { quality: Number(quality) } : {}),
+      partial,
+      width,
+      height,
+      padding,
+      quality,
     }
     console.log(params, 'params')
     lfRef.current && lfRef.current.getSnapshot(fileName, params)
@@ -177,6 +190,38 @@ export default function SnapshotExample() {
     }
   }
 
+  const handleWidthChange = (value: number | null | undefined) => {
+    if (value === null || value === undefined) {
+      setWidth(undefined) // 处理 null 或 undefined 的情况
+    } else {
+      setWidth(value) // 设置有效的数字值
+    }
+  }
+
+  const handleHeightChange = (value: number | null | undefined) => {
+    if (value === null || value === undefined) {
+      setHeight(undefined) // 处理 null 或 undefined 的情况
+    } else {
+      setHeight(value) // 设置有效的数字值
+    }
+  }
+
+  const handlePaddingChange = (value: number | null | undefined) => {
+    if (value === null || value === undefined) {
+      setPadding(undefined) // 处理 null 或 undefined 的情况
+    } else {
+      setPadding(value) // 设置有效的数字值
+    }
+  }
+
+  const handleQualityChange = (value: number | null | undefined) => {
+    if (value === null || value === undefined) {
+      setQuality(undefined) // 处理 null 或 undefined 的情况
+    } else {
+      setQuality(value) // 设置有效的数字值
+    }
+  }
+
   return (
     <Card title="LogicFlow Extension - Snapshot">
       <Space>
@@ -198,29 +243,31 @@ export default function SnapshotExample() {
             { value: 'svg', label: 'svg' },
           ]}
         />
-        <Input
+        <InputNumber
           addonBefore="宽度："
           value={width}
-          onChange={(e) => setWidth(e.target.value)}
+          onChange={handleWidthChange}
         />
-        <Input
+        <InputNumber
           addonBefore="高度："
           value={height}
-          onChange={(e) => setHeight(e.target.value)}
+          onChange={handleHeightChange}
         />
       </Space>
       <p></p>
       <Space>
-        <Input
+        <InputNumber
           addonBefore="padding："
           value={padding}
-          onChange={(e) => setPaddding(e.target.value)}
+          onChange={handlePaddingChange}
         />
-        <Input
+        <InputNumber
           addonBefore="图片质量："
           value={quality}
-          onChange={(e) => setQuality(e.target.value)}
+          onChange={handleQualityChange}
         />
+        <span>导出局部渲染：</span>
+        <Switch defaultChecked onChange={(partial) => setPartial(partial)} />
       </Space>
       <Divider />
       <Space>
diff --git a/examples/feature-examples/src/pages/extensions/snapshot/svg.ts b/examples/feature-examples/src/pages/extensions/snapshot/svg.ts
@@ -0,0 +1,7 @@
+const circle =
+  '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=='
+
+const rect =
+  '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=='
+
+export { circle, rect }
diff --git a/packages/core/src/constant/index.ts b/packages/core/src/constant/index.ts
@@ -114,6 +114,7 @@ export enum EventType {
   TEXT_UPDATE = 'text:update',
   GRAPH_TRANSFORM = 'graph:transform',
   GRAPH_RENDERED = 'graph:rendered',
+  GRAPH_UPDATED = 'graph:updated',
 }
 
 export enum OverlapMode {
diff --git a/packages/core/src/event/eventArgs.ts b/packages/core/src/event/eventArgs.ts
@@ -282,6 +282,15 @@ interface CommonEventArgs {
      */
     data: GraphData
   }
+  /**
+   * 画布渲染数据更新后后触发，即改变画布上的属性，比如partial。
+   */
+  'graph:updated': {
+    /**
+     * 渲染后的画布数据
+     */
+    data: GraphData
+  }
 }
 
 type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> =
diff --git a/packages/core/src/event/eventEmitter.ts b/packages/core/src/event/eventEmitter.ts
@@ -74,10 +74,9 @@ export default class EventEmitter {
    */
   emit<T extends keyof EventArgs>(evts: T, eventArgs: CallbackArgs<T>): void
   emit<T extends string>(evts: T, eventArgs: CallbackArgs<T>): void
-  emit(evts: string, eventArgs: EventCallback) {
+  emit(evts: string, eventArgs?: EventCallback) {
     evts?.split(',').forEach((evt) => {
       const events = this._events[evt] || []
-      // TODO: 这是什么？？？ +1
       const wildcardEvents = this._events[WILDCARD] || []
       // 实际的处理 emit 方法
       const doEmit = (es: EventType[]) => {
diff --git a/packages/core/src/model/GraphModel.ts b/packages/core/src/model/GraphModel.ts
@@ -1489,18 +1489,20 @@ export class GraphModel {
   }
 
   /**
-   * 设置是否开启局部渲染模式，返回重新渲染后promise
+   * 获取当前局部渲染模式
+   * @returns boolean
+   */
+  getPartial(): boolean {
+    return this.partial
+  }
+
+  /**
+   * 设置是否开启局部渲染模式
    * @param partial boolean
-   * @returns Promise<boolean>
+   * @returns
    */
-  @action setPartial(partial: boolean): Promise<boolean> {
+  @action setPartial(partial: boolean): void {
     this.partial = partial
-    return new Promise((resolve, reject) => {
-      this.eventCenter.on('graph: partialRendered', ({ isRendered }) => {
-        isRendered ? resolve(isRendered) : reject(isRendered)
-        this.eventCenter.off('graph: partialRendered')
-      })
-    })
   }
 }
 
diff --git a/packages/core/src/view/Graph.tsx b/packages/core/src/view/Graph.tsx
@@ -20,6 +20,7 @@ import {
   BaseNodeModel,
   SnaplineModel,
 } from '../model'
+import { EventType } from '../constant'
 
 type IGraphProps = {
   getView: (type: string) => ComponentType<any> | undefined
@@ -45,6 +46,12 @@ class Graph extends Component<IGraphProps> {
     window.addEventListener('resize', throttle(this.handleResize, 200))
   }
 
+  componentDidUpdate() {
+    this.props.graphModel.eventCenter.emit(EventType.GRAPH_UPDATED, {
+      data: this.props.graphModel,
+    })
+  }
+
   componentWillUnmount() {
     window.removeEventListener('resize', throttle(this.handleResize, 200))
   }
@@ -83,7 +90,6 @@ 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}>
         <CanvasOverlay graphModel={graphModel} dnd={dnd}>
diff --git a/packages/extension/src/tools/snapshot/README.md b/packages/extension/src/tools/snapshot/README.md
@@ -84,7 +84,7 @@ getSnapshot(fileName?: string, toImageOptions?: ToImageOptions) : Promise<void>
 | backgroundColor | string | - | | 图片背景，不设置背景默认透明 |
 | quality | number | - | | 图片质量，在指定图片格式为 jpeg 或 webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他不合法参数会被忽略 |
 | padding | number | 40 | | 图片内边距: 元素内容所在区之外空白空间，不设置默认有40的内边距 |
-| partialElement | boolean | false |  |开启局部渲染后，默认不会导出已经移出画布区域的元素，开启后，将会导出 |
+| partial | boolean | - |  | 导出时是否开启局部渲染，false：将导出画布上所有的元素，true：只导出画面区域内的可见元素，不设置默认为lf实例身上partial值 |
 
 注意：
 -  `svg`目前暂不支持`width`，`height`， `backgroundColor`， `padding` 属性。
diff --git a/packages/extension/src/tools/snapshot/index.ts b/packages/extension/src/tools/snapshot/index.ts
diff --git a/packages/extension/src/tools/snapshot/utils.ts b/packages/extension/src/tools/snapshot/utils.ts

Original file line number	Diff line number	Diff line change
`@@ -114,6 +114,7 @@ export enum EventType {`
`114`	`114`	`TEXT_UPDATE = 'text:update',`
`115`	`115`	`GRAPH_TRANSFORM = 'graph:transform',`
`116`	`116`	`GRAPH_RENDERED = 'graph:rendered',`
	`117`	`+ GRAPH_UPDATED = 'graph:updated',`
`117`	`118`	`}`
`118`	`119`
`119`	`120`	`export enum OverlapMode {`