diff --git a/src/components/messageView/anime.ts b/src/components/messageView/anime.ts deleted file mode 100644 index 0e56eb4..0000000 --- a/src/components/messageView/anime.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { inject } from "vue"; -import AnimeFunc from "@/types/animejs/index"; - -/** - * anime js animations used by message view transitions - */ -export default function useMessageViewAnims() { - // imports animejs safely - let anime: AnimeFunc; - const animeInject: AnimeFunc | undefined = inject("animejs"); - if (animeInject) anime = animeInject; - - // update message View bottom bound - const shiftView = (el: SVGGElement, transform: string) => { - anime({ - targets: el, - transform: transform, - easing: "easeInOutQuad", - duration: 500, - }); - } - - // stacks message from top to bottom - const stackAnimate = (el: Element, transform: string) => { - return new Promise((resolve, _reject) => { - anime({ - targets: el, - transform: transform, - easing: "easeInOutQuad", - duration: 1000, - complete: function() { - resolve(); - } - }); - }) - } - - // adds new message at the bottom of the list and shifts existing message list - const shiftAnimate = (el: Element, transform: string, view: SVGGElement, viewTransform: string) => { - return new Promise((resolve, _reject) => { - anime({ - targets: el, - transform: transform, - easing: "easeInOutQuad", - duration: 800, - begin: function() { - shiftView(view, viewTransform); - }, - complete: function() { - resolve(); - } - }); - }) - } - - return { - shiftAnimate, - stackAnimate, - }; -} diff --git a/src/components/messageView/index.vue b/src/components/messageView/index.vue deleted file mode 100644 index 262303c..0000000 --- a/src/components/messageView/index.vue +++ /dev/null @@ -1,90 +0,0 @@ - - - - - diff --git a/src/components/messageView/message/calcPosition.ts b/src/components/messageView/message/calcPosition.ts deleted file mode 100644 index ada379c..0000000 --- a/src/components/messageView/message/calcPosition.ts +++ /dev/null @@ -1,33 +0,0 @@ -import {computed} from "vue"; - -// Size of "side-gutters" of message window. -const margin = 20; -const messagePadding = 15; -const firstChildMargin = 45; - - -function calcXPosition(messageWidth: number, windowWidth: number, modifier: string) { - let offset = margin; - - if (modifier == "sf") { - offset = windowWidth - messageWidth - margin; - } - - return offset -} - -function calcMessagePosition(modifier: string, messageWidth: number, - windowWidth: number, anchorPosition: any) { - - const X = calcXPosition(messageWidth, windowWidth, modifier); - - // Depends on if first child. - let Y = firstChildMargin; - if (anchorPosition != "none") { - Y = anchorPosition + messagePadding; - } - - return `translate(${X} ${Y})`; -} - -export default calcMessagePosition; \ No newline at end of file diff --git a/src/components/messageView/message/message.vue b/src/components/messageView/message/message.vue deleted file mode 100644 index bd8e804..0000000 --- a/src/components/messageView/message/message.vue +++ /dev/null @@ -1,101 +0,0 @@ - - - diff --git a/src/components/messageView/messageView.vue b/src/components/messageView/messageView.vue deleted file mode 100644 index 5b19dfa..0000000 --- a/src/components/messageView/messageView.vue +++ /dev/null @@ -1,120 +0,0 @@ - - - - - - - diff --git a/src/components/messageView/offsetCalculator.ts b/src/components/messageView/offsetCalculator.ts deleted file mode 100644 index 01be800..0000000 --- a/src/components/messageView/offsetCalculator.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { ref } from "vue"; -/** - * Calculates vertical and horizontal message offsets - */ -export default function useOffsetCalculator() { - const xOffset = ref(0); - const yOffset = ref(0); - const firstChildMarginTop = 45; - let previousMessageHeight = 0; - const messagePadding = 15; - - function calculateX(message: HTMLElement| SVGGElement): void { - const computedQuery = window.getComputedStyle(message); - const matrix = new WebKitCSSMatrix(computedQuery.webkitTransform); - xOffset.value = matrix.m41; - } - - function calculateY(messageHeight: number): void { - if (previousMessageHeight === 0) { - yOffset.value = firstChildMarginTop; - } else { - yOffset.value += previousMessageHeight + messagePadding; - } - previousMessageHeight = messageHeight; - } - - const calculateMessageOffsets = (msg: HTMLElement): { x: number; y: number } => { - const msgRect = msg.getBoundingClientRect(); - calculateX(msg); - calculateY(msgRect.height); - const offsets = { - x: xOffset.value as number, - y: yOffset.value as number - }; - return offsets; - } - - return { - calculateMessageOffsets, - } -} diff --git a/src/components/messageView/textBubble/computed.ts b/src/components/messageView/textBubble/computed.ts deleted file mode 100644 index e26ba0f..0000000 --- a/src/components/messageView/textBubble/computed.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { computed, onMounted, ref } from "vue"; - -/** - * single message svg item computed properties - */ -export default function useComputedBubble(m: string, id: string) { - const yMargin = 0; - const messageMargin = 20; - const messageWidth = ref(0); - - - // const textFill = computed(() => { - // switch (m) { - // case "sf": - // return "#fff"; - // default: - // return "#000"; - // } - // }); - - // const bubbleFill = computed(() => { - // switch (m) { - // case "sf": - // return "#61b4f4"; - // default: - // return "#fff"; - // } - // }); - - // const setMessageWidthRef = () => { - // const msg = document.getElementById(id); - - // if (msg) { - // messageWidth.value = msg.getBoundingClientRect().width; - // } - - // } - - const calculateXoffset = (w: number) => { - let offset = messageMargin; - - // If self message, render on righthand side. - if (m == "sf") { - offset = w - messageMargin - 232 - - // Else, render on left. - } - - console.log(`${m} : ${offset}`); - return offset - } - - const calculateYoffset = (h: number) => { - - // Bubble will render a little bit below the screen. - return h + yMargin - } - - // Where the textBubble is going to initially render. - const startingOffset = computed(() => { - - // Get current dimensions of the messenger. - const parentView = document.getElementById('messagesView'); - - if (parentView) { - const dimensions = parentView.getBoundingClientRect(); - - const X = calculateXoffset(dimensions.width); - const Y = calculateYoffset(dimensions.height); - - return `translate(${X} ${Y})`; - } - - }); - - return { - startingOffset - }; -} diff --git a/src/components/messageView/textBubble/drawer.ts b/src/components/messageView/textBubble/drawer.ts deleted file mode 100644 index 9f6ee20..0000000 --- a/src/components/messageView/textBubble/drawer.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { ref, onMounted } from "vue"; -import { Ref } from "@/types/vueRef/index"; - -/** - * handles visualization of single message svg items - */ -export default function useBubbleDrawer({ - mr, - tr, -}: { - mr: Ref; - tr: Ref; -}) { - const signatureTranslate = ref(""); - let messageRect: SVGSVGElement & SVGRectElement; - let messageText: SVGSVGElement & SVGTextElement; - - onMounted(async () => { - messageRect = (mr.value as unknown) as SVGSVGElement & SVGRectElement; - messageText = (tr.value as unknown) as SVGSVGElement & SVGTextElement; - }); - - function adjustMessageRect(): void { - // must get dimensions of text box to fit bubble around - const padding = 12.5; - const textBox = messageText.getBBox(); - messageRect.setAttribute("x", String(textBox.x - padding)); - messageRect.setAttribute("y", String(textBox.y - padding)); - messageRect.setAttribute("width", String(textBox.width + 2 * padding)); - messageRect.setAttribute("height", String(textBox.height + 2 * padding)); - } - - function translateMsgSignature(): void { - if (messageRect.getAttribute("height") !== null) { - const height = Number(messageRect.getAttribute("height")); - signatureTranslate.value = `translate(-10 ${height})`; - } - } - - async function drawMessage() { - // ignore lint error: await needed for proper render - await adjustMessageRect(); - translateMsgSignature(); - } - - return { - drawMessage, - signatureTranslate, - }; -} diff --git a/src/components/messageView/textBubble/textBubble.vue b/src/components/messageView/textBubble/textBubble.vue deleted file mode 100644 index fd778f9..0000000 --- a/src/components/messageView/textBubble/textBubble.vue +++ /dev/null @@ -1,116 +0,0 @@ - - - diff --git a/src/components/messageView/transitions.ts b/src/components/messageView/transitions.ts deleted file mode 100644 index 43e3078..0000000 --- a/src/components/messageView/transitions.ts +++ /dev/null @@ -1,100 +0,0 @@ -/** - * Do stuff before, on, and after message enters the view. - * Rendering Process consists of the execution of the above - * mentioned callbacks followed by the shift or stack animation. - * The animation called depends on the height of the message view - * relative to the window height. Additionally, the animation will - * always be called on the after enter callback, after all the neccesary - * calculations have been completed. While all of this is hapenning, - * the rendering state is updated throughout the process. - */ - -import { VueTransitionCallback } from '@/types/vue3/vueTransitionCallback/index'; -import useMessageViewAnims from "./anime"; -import useOffsetCalculator from './offsetCalculator'; -import { ref } from 'vue'; - -const wH = 500; // window Height -const vP = 10; // view padding -const mP = 15; // message padding -let mH: number; // message Height -let vH: number; // view Height -let vB: number; // view Bottom Bound -let message: HTMLElement | null; -let messageOffset = { x: 0, y: 0 }; -let shift = false; -let beforeEnterVH: number; -let messageView: SVGGElement; - -export default function useTransitions() { - const { calculateMessageOffsets } = useOffsetCalculator(); - const { shiftAnimate, stackAnimate } = useMessageViewAnims(); - const rendering = ref(false); - - const animateMessage = async (el: SVGGElement) => { - - // Where the message gets translated to. - const elTransform = `translate(${messageOffset.x} ${messageOffset.y})`; - - const viewTransform = `translate(0 ${-vB})`; - - // Shift of view height > window height. - if (shift) { - await shiftAnimate(el, elTransform, messageView, viewTransform); - } else { - await stackAnimate(el, elTransform) - } - rendering.value = false; - } - - // const beforeEnter: VueTransitionCallback = () => { - // const parentView = document.getElementById('messagesView'); - - // if (parentView) { - // const dimensions = parentView.getBoundingClientRect(); - - // } - // } - - - - // Get height of messageView. - const beforeEnter: VueTransitionCallback = () => { - rendering.value = true; - // query DOM for messageView element - const messageViewQuery = document.querySelectorAll("#messageView"); - messageView = messageViewQuery[0] as SVGGElement; - if (messageViewQuery) { - beforeEnterVH = messageView.getBBox().height; - } - } - - const enter: VueTransitionCallback = (el) => { - // query DOM for latest message - if (el) { - message = document.getElementById(el.id); - } - } - - const afterEnter: VueTransitionCallback = (el) => { - - if (message) messageOffset = calculateMessageOffsets(message); - - if (el) { - // calculate message & view heights, as well as view bottom bound - mH = el.getBoundingClientRect().height; - vH = mH + beforeEnterVH + mP; - vB = Math.abs(vH - wH) + vP; - - shift = vH > wH ? true : false; - animateMessage(el); - } - } - - return { - beforeEnter, - enter, - afterEnter, - rendering - }; -} diff --git a/src/components/textBubble/bubbleDetails/computed.ts b/src/components/textBubble/bubbleDetails/computed.ts deleted file mode 100644 index 7c3eacf..0000000 --- a/src/components/textBubble/bubbleDetails/computed.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { computed, onMounted, ref } from "vue"; - -/** - * single message svg item computed properties - */ -export default function useComputedBubble(m: string, id: string) { - const x = ref(0) - const paddingLeft = 30; - - let winW = 350; - const messageWidth = ref(0); - const messageMarginTop = 75; - - const textFill = computed(() => { - switch (m) { - case "sf": - return "#fff"; - default: - return "#000"; - } - }); - - const bubbleFill = computed(() => { - switch (m) { - case "sf": - return "#61b4f4"; - default: - return "#fff"; - } - }); - - const updatewinW = computed(() => { - const parentView = document.getElementById('messageView'); - if (parentView) { - winW = parentView.getBoundingClientRect().width; - } - }) - - const setMessageWidthRef = async () => { - const msg = await document.getElementById(id); - if (msg) { - messageWidth.value = msg.getBoundingClientRect().width; - } - } - - const selfMessageMarginRight = 2.5; - const calculateXoffset = async () => { - switch (m) { - case "sf": - x.value = winW - messageWidth.value - selfMessageMarginRight; - break; - default: - x.value = paddingLeft; - // to center a message - // x = messageMargin + (winW -messageWidth) / 2; - } - } - - const startingOffset = computed(() => { - const parentView = document.getElementById('messageView'); - if (parentView) { - const rect = parentView.getBoundingClientRect(); - let Y = 600; - if (rect.height > 500) { - Y = rect.height + messageMarginTop; - } - return `translate(${x.value} ${Y})`; - } - }); - - onMounted(async () => { - await setMessageWidthRef(); - calculateXoffset(); - }) - - return { - textFill, - bubbleFill, - startingOffset - }; -}