refactor messageView transitions

diff --git a/src/components/messageView/index.vue b/src/components/messageView/index.vue
index 3447b3506dfd9b8438e58158292ddddd61a0d3b3..9a31f278319902b88c82efc73b7ffd074d2c9b6e 100644 (file)
--- a/src/components/messageView/index.vue
+++ b/src/components/messageView/index.vue
@@ -7,11 +7,7 @@
     id="test"
   >
     <g id="messageView" transform="translate(0, 20)">
-      <g
-        v-for="(item, index) in renderArr"
-        :key="index"
-        preserverAspectRatio="none"
-      >
+      <g v-for="(item, index) in renderArr" :key="index" preserverAspectRatio="none">
         <transition
           appear
           v-on:before-appear="beforeEnter"
@@ -26,11 +22,11 @@
 </template>
 
 <script lang="ts">
-import useMessageView from "./viewDetails/visualizer";
+import useTransitions from "./viewDetails/transitions";
 import useScrollView from "@/modules/scrollView";
 import TextBubble from "@/components/textBubble/index.vue";
 import { Message } from "@/types/message/index";
-import { defineComponent, reactive, onMounted, onUnmounted, watch, ref, computed } from "vue";
+import { defineComponent, reactive, onMounted, onUnmounted } from "vue";
 import useMitt from "@/modules/mitt";
 import { useIpc } from "@/modules/ipc";
 
@@ -64,7 +60,7 @@ export default defineComponent({
       emitter.all.clear();
     });
 
-    const { beforeEnter, enter, afterEnter } = useMessageView();
+    const { beforeEnter, enter, afterEnter } = useTransitions();
     const { scrollView } = useScrollView({
       targetId: "messageView",
     });

diff --git a/src/components/messageView/viewDetails/visualizer.ts b/src/components/messageView/viewDetails/transitions.ts
similarity index 96%
rename from src/components/messageView/viewDetails/visualizer.ts
rename to src/components/messageView/viewDetails/transitions.ts
index 5f82c619c81b94311770c1d0e9bf44207701ded1..2562dac5c7bc2d88f81b119a4e783ab4e5c396a8 100644 (file)
--- a/src/components/messageView/viewDetails/visualizer.ts
+++ b/src/components/messageView/viewDetails/transitions.ts
@@ -19,7 +19,7 @@ let shift = false;
 let beforeEnterVH: number;
 let messageView: SVGGElement;
 
-export default function useMessageView() {
+export default function useTransitions() {
     const { calculateMessageOffsets } = useOffsetCalculator();
     const { shiftAnimate, stackAnimate } = useMessageViewAnims();
 
@@ -40,7 +40,7 @@ export default function useMessageView() {
         // query DOM for messageView element
         const messageViewQuery = document.querySelectorAll("#messageView");
         messageView = messageViewQuery[0] as SVGGElement;
-        if (messageViewQuery){
+        if (messageViewQuery) {
             beforeEnterVH = messageView.getBBox().height;
         }
     }