Merge branch 'main' of github.com:le5le-com/visualization-design

src/views/Index.vue

@@ -15,10 +15,6 @@
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, nextTick } from 'vue';
-import axios from 'axios';
-// import { Pen } from "@meta2d/core";
-
 import Header from './components/Header.vue';
 import Graphics from './components/Graphics.vue';
 import View from './components/View.vue';
@@ -29,66 +25,6 @@ import PensProps from './components/PensProps.vue';
 import { useSelection, SelectionMode } from '@/services/selections';
 
 const { selections } = useSelection();
-
-const active = (oldPens: Pen[]) => {
-  setTimeout(() => {
-    const pens = getPenRectPens(oldPens);
-    checkPropType(pens);
-    selections.pens = oldPens;
-  }, 10);
-};
-
-/**
- * 根据当前传入的 pens 判断属性面板的类型
- */
-const checkPropType = (pens: Pen[]) => {
-  if (pens.length === 1) {
-    selections.mode = SelectionMode.Pen;
-    if (Array.isArray(pens[0].frames)) {
-      (pens[0] as any).showDuration = meta2d.calcAnimateDuration(pens[0]);
-    }
-    selections.pen = pens[0];
-  } else if (pens.length > 1) {
-    selections.mode = SelectionMode.Pens;
-  } else {
-    selections.mode = SelectionMode.File;
-  }
-};
-
-function getPenRectPens(oldPens: Pen[]): Pen[] {
-  return oldPens.map((pen) => {
-    const rect = meta2d.getPenRect(pen);
-    return {
-      ...pen,
-      ...rect,
-    };
-  });
-}
-
-const inactive = (pens: Pen[]) => {
-  setTimeout(() => {
-    active(meta2d.store.active as Pen[]);
-  });
-};
-
-// onMounted(() => {
-//   meta2d.on("active", active);
-//   meta2d.on("inactive", inactive);
-// });
-
-nextTick(() => {
-  // @ts-ignore
-  meta2d.on('active', active);
-  // @ts-ignore
-  meta2d.on('inactive', inactive);
-});
-
-onUnmounted(() => {
-  // @ts-ignore
-  meta2d.off('active', active);
-  // @ts-ignore
-  meta2d.off('inactive', inactive);
-});
 </script>
 
 <style lang="postcss" scoped>

src/views/components/View.vue

@@ -103,7 +103,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Meta2d, Options } from '@meta2d/core';
+import { Meta2d, Options, Pen } from '@meta2d/core';
 import { onMounted, onUnmounted, watch } from 'vue';
 import { registerBasicDiagram } from '@/services/register';
 import { useRouter, useRoute } from 'vue-router';
@@ -111,11 +111,13 @@ import { useUser } from '@/services/user';
 import { getLe5le2d } from '@/services/api';
 import { useDot } from '@/services/common';
 import { save, newFile } from './Header.vue';
+import { useSelection, SelectionMode } from '@/services/selections';
 
 const router = useRouter();
 const route = useRoute();
 const { user, message, getUser, getMessage, signout } = useUser();
 const { dot, setDot, getDot } = useDot();
+const { selections } = useSelection();
 
 const meta2dOptions: Options = {
   cdn: 'https://assets.le5lecdn.com',
@@ -130,6 +132,10 @@ onMounted(() => {
   meta2d = new Meta2d('meta2d', meta2dOptions);
   registerBasicDiagram();
   open();
+  // @ts-ignore
+  meta2d.on('active', active);
+  // @ts-ignore
+  meta2d.on('inactive', inactive);
 });
 
 const watcher = watch(
@@ -151,9 +157,54 @@ const open = async () => {
 onUnmounted(() => {
   watcher();
   if (meta2d) {
+    // @ts-ignore
+    meta2d.off('active', active);
+    // @ts-ignore
+    meta2d.off('inactive', inactive);
     meta2d.destroy();
   }
 });
+
+function getPenRectPens(oldPens: Pen[]): Pen[] {
+  return oldPens.map((pen) => {
+    const rect = meta2d.getPenRect(pen);
+    return {
+      ...pen,
+      ...rect,
+    };
+  });
+}
+
+const inactive = (pens: Pen[]) => {
+  setTimeout(() => {
+    active(meta2d.store.active as Pen[]);
+  });
+};
+
+const active = (oldPens: Pen[]) => {
+  setTimeout(() => {
+    const pens = getPenRectPens(oldPens);
+    checkPropType(pens);
+    selections.pens = oldPens;
+  }, 10);
+};
+
+/**
+ * 根据当前传入的 pens 判断属性面板的类型
+ */
+const checkPropType = (pens: Pen[]) => {
+  if (pens.length === 1) {
+    selections.mode = SelectionMode.Pen;
+    if (Array.isArray(pens[0].frames)) {
+      (pens[0] as any).showDuration = meta2d.calcAnimateDuration(pens[0]);
+    }
+    selections.pen = pens[0];
+  } else if (pens.length > 1) {
+    selections.mode = SelectionMode.Pens;
+  } else {
+    selections.mode = SelectionMode.File;
+  }
+};
 </script>
 <style lang="postcss" scoped>
 .meta2d {