me/mime-chat
Watch
1
0
Fork
You've already forked mime-chat
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor messageView transitions

Browse source
This commit is contained in:
Enrique Hernandez 2021-02-16 12:37:39 -06:00
commit c27dd5ca95
2 changed files with 6 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/messageView/index.vue
View file

@ -7,11 +7,7 @@
id="test" id="test"
> >
<g id="messageView" transform="translate(0, 20)"> <g id="messageView" transform="translate(0, 20)">
<g <g v-for="(item, index) in renderArr" :key="index" preserverAspectRatio="none">
v-for="(item, index) in renderArr"
:key="index"
preserverAspectRatio="none"
>
<transition <transition
appear appear
v-on:before-appear="beforeEnter" v-on:before-appear="beforeEnter"
@ -26,11 +22,11 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import useMessageView from "./viewDetails/visualizer"; import useTransitions from "./viewDetails/transitions";
import useScrollView from "@/modules/scrollView"; import useScrollView from "@/modules/scrollView";
import TextBubble from "@/components/textBubble/index.vue"; import TextBubble from "@/components/textBubble/index.vue";
import { Message } from "@/types/message/index"; 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 useMitt from "@/modules/mitt";
import { useIpc } from "@/modules/ipc"; import { useIpc } from "@/modules/ipc";
@ -64,7 +60,7 @@ export default defineComponent({
emitter.all.clear(); emitter.all.clear();
}); });
const { beforeEnter, enter, afterEnter } = useMessageView(); const { beforeEnter, enter, afterEnter } = useTransitions();
const { scrollView } = useScrollView({ const { scrollView } = useScrollView({
targetId: "messageView", targetId: "messageView",
}); });

4
src/components/messageView/viewDetails/visualizer.ts → src/components/messageView/viewDetails/transitions.ts
View file

@ -19,7 +19,7 @@ let shift = false;
let beforeEnterVH: number; let beforeEnterVH: number;
let messageView: SVGGElement; let messageView: SVGGElement;
export default function useMessageView() { export default function useTransitions() {
const { calculateMessageOffsets } = useOffsetCalculator(); const { calculateMessageOffsets } = useOffsetCalculator();
const { shiftAnimate, stackAnimate } = useMessageViewAnims(); const { shiftAnimate, stackAnimate } = useMessageViewAnims();
@ -40,7 +40,7 @@ export default function useMessageView() {
// query DOM for messageView element // query DOM for messageView element
const messageViewQuery = document.querySelectorAll("#messageView"); const messageViewQuery = document.querySelectorAll("#messageView");
messageView = messageViewQuery[0] as SVGGElement; messageView = messageViewQuery[0] as SVGGElement;
if (messageViewQuery){ if (messageViewQuery) {
beforeEnterVH = messageView.getBBox().height; beforeEnterVH = messageView.getBBox().height;
} }
} }