fix(snapshot): 修复相对路径图片导出问题

Author: DymoneLewis

examples/feature-examples/public/images/test.jpeg

@@ -38,6 +38,16 @@ export default {
       y: 100,
       text: '菱形',
     },
+    {
+      id: 'test_image_1',
+      type: 'test-image',
+      x: 300,
+      y: 200,
+      properties: {
+        width: 82,
+        height: 96,
+      },
+    },
   ],
   edges: [
     {

examples/feature-examples/src/pages/extensions/snapshot/data.ts

@@ -28,8 +28,43 @@ class ImageNode extends RectNode {
   }
 }
 
-export default {
+class TestImageModel extends RectNodeModel {
+  initNodeData(data: any) {
+    super.initNodeData(data)
+    this.width = 100
+    this.height = 75
+  }
+}
+
+class TestImageNode extends RectNode {
+  getImageHref() {
+    return '/images/test.jpeg'
+  }
+  getShape() {
+    const { x, y, width, height } = this.props.model
+    const href = this.getImageHref()
+    const attrs = {
+      x: x - (1 / 2) * width,
+      y: y - (1 / 2) * height,
+      width,
+      height,
+      href,
+      preserveAspectRatio: 'none meet',
+    }
+    return h('g', {}, [h('image', { ...attrs })])
+  }
+}
+
+const defaultImageNode = {
   type: 'image',
   view: ImageNode,
   model: ImageModel,
 }
+
+export const testImage = {
+  type: 'test-image',
+  view: TestImageNode,
+  model: TestImageModel,
+}
+
+export default defaultImageNode

examples/feature-examples/src/pages/extensions/snapshot/imageNode.ts

@@ -15,8 +15,8 @@ import {
   InputNumber,
   Switch,
 } from 'antd'
-import ImageNode from './imageNode'
 import CustomHtml from '@/components/nodes/custom-html/Html'
+import ImageNode, { testImage } from './imageNode'
 import data from './data'
 import { circle as circleSvgUrl, rect as rectSvgUrl } from './svg'
 
@@ -89,6 +89,7 @@ export default function SnapshotExample() {
       })
       lf.register(CustomHtml)
       lf.register(ImageNode)
+      lf.register(testImage)
 
       lf.setPatternItems([
         {
@@ -103,6 +104,12 @@ export default function SnapshotExample() {
           text: 'circle',
           icon: rectSvgUrl,
         },
+        {
+          type: 'test-image',
+          label: 'Test Image',
+          text: 'Test Image',
+          icon: rectSvgUrl,
+        },
       ])
 
       lf.on('custom:button-click', (model: any) => {