fix(extension): 合并snapshot冲突

Author: fanyang

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,36 +12,39 @@ 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,
-      text: {
-        value: '你好3',
-        x: 700,
-        y: 300,
-      },
-      id: 'rect_3',
+      id: '3',
+      type: 'image',
+      x: 550,
+      y: 100,
+      text: '云',
+    },
+    {
+      id: '5',
+      type: 'image',
+      x: 350,
+      y: 250,
+      text: '菱形',
     },
   ],
   edges: [
@@ -51,5 +54,11 @@ export default {
       sourceNodeId: 'rect_1',
       targetNodeId: 'rect_2',
     },
+    {
+      id: 'e_3',
+      type: 'polyline',
+      sourceNodeId: '4',
+      targetNodeId: '5',
+    },
   ],
 }

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

@@ -1,4 +1,4 @@
-.viewport {
-  height: calc(100vh - 250px);
-  overflow: hidden;
+#graph {
+  width: 800px;
+  height: 500px;
 }

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

@@ -1,9 +1,21 @@
 import LogicFlow from '@logicflow/core'
-import { Snapshot } from '@logicflow/extension'
-
-import { Button, Card, Col, Divider, Flex, Row, Space } from 'antd'
 import { useEffect, useRef, useState } from 'react'
+import { Snapshot, DndPanel } from '@logicflow/extension'
+
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Flex,
+  Row,
+  Space,
+  Select,
+  Input,
+} from 'antd'
 import ImageNode from './imageNode'
+import Uml from './uml'
+import data from './data'
 
 import styles from './index.less'
 import '@logicflow/core/es/index.css'
@@ -13,7 +25,7 @@ const config: Partial<LogicFlow.Options> = {
   isSilentMode: false,
   stopScrollGraph: false,
   stopZoomGraph: false,
-  stopMoveGraph: true,
+  stopMoveGraph: false,
   style: {
     rect: {
       rx: 5,
@@ -41,80 +53,15 @@ const config: Partial<LogicFlow.Options> = {
       fontSize: 12,
     },
   },
+  grid: {
+    size: 20,
+  },
 }
 
-const data = {
-  nodes: [
-    {
-      id: '1',
-      type: 'rect',
-      x: 150,
-      y: 100,
-      text: '矩形',
-    },
-    {
-      id: '2',
-      type: 'circle',
-      x: 350,
-      y: 100,
-      text: '圆形',
-    },
-    {
-      id: '3',
-      type: 'image',
-      x: 550,
-      y: 100,
-      text: '云',
-    },
-    {
-      id: '4',
-      type: 'polygon',
-      x: 150,
-      y: 250,
-      text: '多边形',
-    },
-    {
-      id: '5',
-      type: 'image',
-      x: 350,
-      y: 250,
-      text: '菱形',
-    },
-    {
-      id: '6',
-      type: 'text',
-      x: 550,
-      y: 250,
-      text: '纯文本节点',
-    },
-    {
-      id: '7',
-      type: 'html',
-      x: 150,
-      y: 400,
-      text: 'html节点',
-    },
-  ],
-  edges: [
-    {
-      id: 'e_1',
-      type: 'polyline',
-      sourceNodeId: '1',
-      targetNodeId: '2',
-    },
-    {
-      id: 'e_2',
-      type: 'polyline',
-      sourceNodeId: '2',
-      targetNodeId: '3',
-    },
-    {
-      id: 'e_3',
-      type: 'polyline',
-      sourceNodeId: '4',
-      targetNodeId: '5',
-    },
-  ],
+interface SnapshotResponse {
+  data: Blob
+  width: number
+  height: number
 }
 
 /**
@@ -123,6 +70,13 @@ const data = {
 export default function SnapshotExample() {
   const lfRef = useRef<LogicFlow>()
   const containerRef = useRef<HTMLDivElement>(null)
+
+  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 [blobData, setBlobData] = useState('')
   const [base64Data, setBase64Data] = useState('')
 
@@ -132,12 +86,10 @@ export default function SnapshotExample() {
       const lf = new LogicFlow({
         ...config,
         container: containerRef.current!,
-        grid: {
-          size: 20,
-        },
-        stopMoveGraph: false,
-        plugins: [Snapshot],
+        plugins: [Snapshot, DndPanel],
       })
+
+      lf.register(Uml)
       lf.register(ImageNode)
 
       lf.on(
@@ -146,8 +98,34 @@ export default function SnapshotExample() {
           console.log('get selection area:', topLeft, bottomRight)
         },
       )
+
+      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==',
+        },
+        {
+          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==',
+        },
+      ])
+
+      lf.extension.snapshot.useGlobalRules = false
+      lf.extension.snapshot.customCssRules = `
+          .uml-wrapper {
+            line-height: 1.2;
+            text-align: center;
+            color: blue;
+          }
+        `
+
       lf.render(data)
-      lf.fitView()
+      lf.translateCenter()
+
       lfRef.current = lf
     }
   }, [])
@@ -201,17 +179,108 @@ export default function SnapshotExample() {
         )
     }
   }
+  // 下载
+  const downLoad = () => {
+    lfRef.current &&
+      lfRef.current.getSnapshot(fileName, {
+        fileType,
+        height: height,
+        padding: padding,
+        backgroundColor: 'yellow',
+        partialElement: true,
+        ...(width ? { width } : {}),
+        ...(height ? { height } : {}),
+        ...(padding ? { padding } : {}),
+      })
+  }
+
+  // 预览
+  // const preview = () => {
+  //   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 = () => {
+    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="preview" onClick={preview}>
+          预览
+        </Button> */}
+        <Button id="base64" onClick={logBase64}>
+          打印base64
+        </Button>
+      </Space>
+      <Divider />
       <Flex wrap="wrap" gap="middle" align="center" justify="space-between">
         <Space>
           <Button onClick={handleGetSnapshot}>下载快照</Button>
           <Button onClick={handlePreviewSnapshotBlob}>预览(blob)</Button>
           <Button onClick={handlePreviewSnapshotBase64}>预览(base64)</Button>
         </Space>
       </Flex>
-      <Divider />
       <Row>
         <Col span={12}>
           <div ref={containerRef} id="graph" className={styles.viewport}></div>