refactor(extension): snapshot细节问题优化和官网细节问题优化

Author: fanyang

examples/feature-examples/src/pages/extensions/snapshot/index.tsx

@@ -16,7 +16,7 @@ import {
   Switch,
 } from 'antd'
 import ImageNode from './imageNode'
-import CustomHtml from '../../../components/nodes/custom-html/Html'
+import CustomHtml from '@/components/nodes/custom-html/Html'
 import data from './data'
 import { circle as circleSvgUrl, rect as rectSvgUrl } from './svg'
 
@@ -141,7 +141,7 @@ export default function SnapshotExample() {
       quality,
     }
     console.log(params, 'params')
-    lfRef.current && lfRef.current.getSnapshot(fileName, params)
+    lfRef.current?.getSnapshot(fileName, params)
   }
 
   // 预览 blob
@@ -172,7 +172,7 @@ export default function SnapshotExample() {
     if (lfRef.current) {
       setBlobData('')
       lfRef.current
-        .getSnapshotBase64('#FFFFFF')
+        .getSnapshotBase64('#fff')
         .then(
           ({
             data,
@@ -190,35 +190,44 @@ export default function SnapshotExample() {
     }
   }
 
-  const handleWidthChange = (value: number | null | undefined) => {
+  const handleInputChange = (
+    value: number | null | undefined,
+    prop: string,
+  ) => {
     if (value === null || value === undefined) {
-      setWidth(undefined) // 处理 null 或 undefined 的情况
+      switch (
+        prop // 处理 null 或 undefined 的情况
+      ) {
+        case 'width':
+          setWidth(undefined)
+          break
+        case 'height':
+          setHeight(undefined)
+          break
+        case 'padding':
+          setPadding(undefined)
+          break
+        case 'quality':
+          setQuality(undefined)
+          break
+      }
     } 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) // 设置有效的数字值
+      switch (
+        prop // 设置有效的数字值
+      ) {
+        case 'width':
+          setWidth(value)
+          break
+        case 'height':
+          setHeight(value)
+          break
+        case 'padding':
+          setPadding(value)
+          break
+        case 'quality':
+          setQuality(value)
+          break
+      }
     }
   }
 
@@ -246,25 +255,25 @@ export default function SnapshotExample() {
         <InputNumber
           addonBefore="宽度："
           value={width}
-          onChange={handleWidthChange}
+          onChange={(value) => handleInputChange(value, 'width')}
         />
         <InputNumber
           addonBefore="高度："
           value={height}
-          onChange={handleHeightChange}
+          onChange={(value) => handleInputChange(value, 'height')}
         />
       </Space>
       <p></p>
       <Space>
         <InputNumber
           addonBefore="padding："
           value={padding}
-          onChange={handlePaddingChange}
+          onChange={(value) => handleInputChange(value, 'padding')}
         />
         <InputNumber
           addonBefore="图片质量："
           value={quality}
-          onChange={handleQualityChange}
+          onChange={(value) => handleInputChange(value, 'quality')}
         />
         <span>导出局部渲染：</span>
         <Switch defaultChecked onChange={(partial) => setPartial(partial)} />

packages/core/src/event/eventArgs.ts

@@ -283,14 +283,11 @@ interface CommonEventArgs {
     data: GraphData
   }
   /**
-   * 画布渲染数据更新后后触发，即改变画布上的属性，比如partial。
+   * 画布重新更新后触发. 即 lf.render(graphData)方法被调用后或者改变画布（garphModel）上的属性后触发。
+   * 如果是主动修改某个特定属性导致画布更新，想要在画布更新后做一些操作，建议注册事件后在回调函数中及时注销该事件，或者使用once事件代替on事件。
+   * 因为其他属性也可能导致画布更新，触发该事件。
    */
-  'graph:updated': {
-    /**
-     * 渲染后的画布数据
-     */
-    data: GraphData
-  }
+  'graph:updated': Record<string, undefined>
 }
 
 type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> =

packages/core/src/view/Graph.tsx

@@ -47,9 +47,7 @@ class Graph extends Component<IGraphProps> {
   }
 
   componentDidUpdate() {
-    this.props.graphModel.eventCenter.emit(EventType.GRAPH_UPDATED, {
-      data: this.props.graphModel,
-    })
+    this.props.graphModel.eventCenter.emit(EventType.GRAPH_UPDATED, {})
   }
 
   componentWillUnmount() {

packages/extension/src/tools/snapshot/index.ts

@@ -50,8 +50,6 @@ export class Snapshot {
         this.lf.graphModel.eventCenter.on('graph:updated', async () => {
           await this.getSnapshot(fileName, toImageOptions)
           this.lf.graphModel.eventCenter.off('graph:updated')
-          // TODO: 这里用这种方式会报错，不太理解 - fy
-          // this.lf.off('graph:updated')
           // 恢复原来渲染模式
           this.lf.graphModel.setPartial(curPartial)
         })
@@ -82,18 +80,18 @@ export class Snapshot {
   }
 
   /**
-   * 通过 imgURI 下载图片
-   * @param imgURI
+   * 通过 imgUrl 下载图片
+   * @param imgUrl
    */
-  triggerDownload(imgURI?: string) {
+  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('href', imgUrl)
     a.setAttribute('target', '_blank')
     a.dispatchEvent(evt)
   }
@@ -159,10 +157,10 @@ export class Snapshot {
       this.getCanvasData(svg, toImageOptions ?? {}).then(
         (canvas: HTMLCanvasElement) => {
           // canvas元素 => url   image/octet-stream: 确保所有浏览器都能正常下载
-          const imgURI = canvas
+          const imgUrl = canvas
             .toDataURL(`image/${fileType}`, quality)
             .replace(`image/${fileType}`, 'image/octet-stream')
-          this.triggerDownload(imgURI)
+          this.triggerDownload(imgUrl)
         },
       )
     }
@@ -340,15 +338,15 @@ export class Snapshot {
         ctx.clearRect(0, 0, canvas.width, canvas.height)
       }
     }
+
+    const img = new Image()
+    // TODO: question1: 初步排查是css这块上移后不生效，但不知道为什么
     // 设置css样式
     const style = document.createElement('style')
     style.innerHTML = this.getClassRules()
     const foreignObject = document.createElement('foreignObject')
     foreignObject.appendChild(style)
     copy.appendChild(foreignObject)
-    const img = new Image()
-    // TODO: question1: 初步排查是css这块上移后不生效，但不知道为什么
-
     return new Promise((resolve) => {
       img.onload = () => {
         const isFirefox = navigator.userAgent.indexOf('Firefox') > -1
@@ -386,7 +384,6 @@ export class Snapshot {
       /*
       因为svg中存在dom存放在foreignObject元素中
       svg dom => Base64编码字符串 挂载到img上
-      TODO: 会导致一些清晰度问题这个需要再解决
       fixme: XMLSerializer的中的css background url不会下载图片
       */
       const svg2Img = `data:image/svg+xml;charset=utf-8,${new XMLSerializer().serializeToString(

sites/docs/docs/api/eventCenterApi.en-US.md

@@ -108,6 +108,7 @@ The event object contains the following:
 | text:update       | Update text        | data        |
 | graph:transform   | Triggered when panning or zooming the canvas      | data        |
 | graph:rendered    | Triggered after the canvas renders data, i.e. after the lf.render(graphData) method is called. `Add in v1.1.0`| graphData   |
+| graph:updated   | Triggered after the canvas is updated. That is, it is triggered after the lf.render(graphData) method is called or after the properties on the canvas (graphModel) are changed. If the canvas is updated due to active modification of a property, and you want to do something after the canvas is updated, it is recommended to register the event and unregister the event in the callback function in time, or use the once event instead of the on event, because as other properties may also cause the canvas to update, trigger this event. `Add inv2.0.0`  | -|
 
 The event object contains the following:
 

sites/docs/docs/api/eventCenterApi.md

@@ -109,6 +109,7 @@ table td:first-of-type {
 | text:update       | 文案更新                                                                   | data        |
 | graph:transform   | 画布平移或者缩放触发                                                       | data        |
 | graph:rendered    | 画布渲染数据后触发. 即 lf.render(graphData)方法被调用后触发。 `v1.1.0新增` | graphData   |
+| graph:updated    | 画布重新更新后触发. 即 lf.render(graphData)方法被调用后或者改变画布（garphModel）上的属性后触发。如果是主动修改某个属性导致画布更新，想要在画布更新后做一些操作，建议注册事件后在回调函数中及时注销该事件，或者使用once事件代替on事件，因为其他属性也可能导致画布更新，触发该事件。`v2.0.0新增` | -   |
 
 事件对象包含如下内容：
 

sites/docs/docs/tutorial/getting-started.en-US.md

@@ -17,14 +17,23 @@ toc: content
 
 ```bash [npm]
 npm install @logicflow/core --save
+
+# extension package（No need to import when not using plugins）
+npm install @logicflow/extension --save
 ```
 
 ```bash [yarn]
 yarn add @logicflow/core
+
+# extension package（No need to import when not using plugins）
+yarn add @logicflow/extension
 ```
 
 ```bash [pnpm]
 pnpm add @logicflow/core
+
+# extension package（No need to import when not using plugins）
+pnpm add @logicflow/extension
 ```
 
 :::
@@ -38,8 +47,12 @@ pnpm add @logicflow/core
 <script src="https://cdn.jsdelivr.net/npm/@logicflow/[email protected]/dist/index.min.js"></script>
 <link href="https://cdn.jsdelivr.net/npm/@logicflow/[email protected]/lib/style/index.min.css" rel="stylesheet">
 
+<!-- Import extension package. -->
+<script src="https://cdn.jsdelivr.net/npm/@logicflow/[email protected]/dist/index.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/[email protected]/lib/style/index.min.css" />
+
 ```
-  The current latest version is 2.0.0-beta.2. For other versions, please check: https://www.jsdelivr.com/package/npm/@logicflow/core
+  The curren tversion is 2.0.0-beta.2. For other versions, please check: <a href="https://www.jsdelivr.com/package/npm/@logicflow/core" target="_blank">jsDelivr</a>
 
 ## Getting Started
 

sites/docs/docs/tutorial/getting-started.md

@@ -53,7 +53,7 @@ pnpm add @logicflow/extension
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/[email protected]/lib/style/index.min.css" />
 
 ```
-  当前最新版本是2.0.0-beta.2，其他版本请查看：<a href="https://www.jsdelivr.com/package/npm/@logicflow/core" target="_blank">jsDelivr</a>
+  当前引入的版本是2.0.0-beta.2，其他版本请查看：<a href="https://www.jsdelivr.com/package/npm/@logicflow/core" target="_blank">jsDelivr</a>
 
 ## 开始使用