feat: 导出功能实现（html、vue2、vue3、React）

public/view/js/index.js

@@ -1,4 +1,11 @@
-const meta2d = new Meta2d('meta2d');
+const meta2d = new Meta2d('meta2d',{
+  background: '#1e2430',
+  x: 32,
+  y: 32,
+  width: 1920,
+  height: 1080,
+  color: '#bdc7db',
+});
 
 registerCommonDiagram();
 
@@ -33,4 +40,12 @@ _fetch(id + '.json', function(text) {
   var data = JSON.parse(text);
   data.locked = 1;
   meta2d.open(data);
+  let fit =
+      meta2d.store.data.scaleMode === '3'
+      ? 'height'
+      : meta2d.store.data.scaleMode === '2'
+      ? 'width'
+      : true;
+  meta2d.fitSizeView(fit, 10);
 });
+

public/view/react/Meta2d.jsx

@@ -8,12 +8,26 @@ export default class Meta2d extends React.Component {
   }
 
   componentDidMount() {
-    meta2d = new window.Meta2d("meta2d");
+    meta2d = new window.Meta2d("meta2d",{
+      background: '#1e2430',
+      x: 32,
+      y: 32,
+      width: 1920,
+      height: 1080,
+      color: '#bdc7db',
+    });
     window.registerCommonDiagram();
     this._fetch("/json/data.json", function (text) {
       var data = JSON.parse(text);
       data.locked = 1;
       meta2d.open(data);
+      let fit =
+          meta2d.store.data.scaleMode === '3'
+              ? 'height'
+              : meta2d.store.data.scaleMode === '2'
+                  ? 'width'
+                  : true;
+      meta2d.fitSizeView(fit, 10);
     });
   }
 

public/view/vue2/Meta2d.vue

@@ -21,13 +21,27 @@ export default {
   },
   methods: {
     initMeta2d() {
-      meta2d = new window.Meta2d("meta2d");
+      meta2d = new window.Meta2d("meta2d",{
+        background: '#1e2430',
+        x: 10,
+        y: 10,
+        width: 1920,
+        color: '#bdc7db',
+        height: 1080,
+      });
       window.registerCommonDiagram();
 
       this._fetch("/json/data.json", function (text) {
         var data = JSON.parse(text);
         data.locked = 1;
         meta2d.open(data);
+        let fit =
+            meta2d.store.data.scaleMode === '3'
+                ? 'height'
+                : meta2d.store.data.scaleMode === '2'
+                    ? 'width'
+                    : true;
+        meta2d.fitSizeView(fit, 10);
       });
     },
 

public/view/vue3/Meta2d.vue

@@ -9,13 +9,27 @@ import { onMounted, onUnmounted } from 'vue';
 let meta2d: any = null;
 
 onMounted(async () => {
-  meta2d = new (window as any).Meta2d('meta2d');
+  meta2d = new (window as any).Meta2d('meta2d',{
+    background: '#1e2430',
+    x: 10,
+    y: 10,
+    width: 1920,
+    color: '#bdc7db',
+    height: 1080,
+  });
   (window as any).registerCommonDiagram();
 
   _fetch('/json/data.json', function (text) {
     var data = JSON.parse(text);
     data.locked = 1;
     meta2d.open(data);
+    let fit =
+        meta2d.store.data.scaleMode === '3'
+            ? 'height'
+            : meta2d.store.data.scaleMode === '2'
+                ? 'width'
+                : true;
+    meta2d.fitSizeView(fit, 10);
   });
 });
 

src/views/Preview.vue

@@ -23,6 +23,7 @@ const meta2dOptions: Options = {
   x: 10,
   y: 10,
   width: 1920,
+  color: '#bdc7db',
   height: 1080,
   defaultFormat: { ...defaultFormat },
 };