move_index_to_view

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';
@@ -30,65 +26,6 @@ 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

@@ -100,7 +100,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";
@@ -108,11 +108,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",
@@ -127,6 +129,10 @@ onMounted(() => {
   meta2d = new Meta2d('meta2d', meta2dOptions);
   registerBasicDiagram();
   open();
+  // @ts-ignore
+  meta2d.on('active', active);
+  // @ts-ignore
+  meta2d.on('inactive', inactive);
 });
 
 const watcher = watch(
@@ -146,11 +152,59 @@ 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 {