49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import useRendererAnims from "./useRendererAnims";
|
|
import useOffsetCalculator from './useOffsetCalculator';
|
|
export default function useMessageRenderer() {
|
|
|
|
const { calculateMessageOffsets } = useOffsetCalculator();
|
|
const { shiftAnimate, stackAnimate } = useRendererAnims();
|
|
|
|
let messageList: NodeList;
|
|
let message: HTMLElement | null;
|
|
let messageOffset = { x: 0, y: 0 };
|
|
let shift = false;
|
|
let shiftValue = 0;
|
|
|
|
function animateMessage(el: SVGGElement): void {
|
|
const transform = {
|
|
initialTranslate: `translate(${messageOffset.x} ${messageOffset.y})`,
|
|
finalTranslate: `translate(${messageOffset.x} ${messageOffset.y})`
|
|
}
|
|
shift ? shiftAnimate(el, transform, shiftValue, messageList) : stackAnimate(el, transform);
|
|
}
|
|
|
|
function beforeEnter(el: SVGGElement): void {
|
|
const queryResult = document.querySelectorAll(".messageList");
|
|
if (queryResult.length) messageList = queryResult;
|
|
}
|
|
|
|
function enter(el: SVGGElement): void {
|
|
message = document.getElementById(el.id);
|
|
}
|
|
|
|
function afterEnter(el: SVGGElement) {
|
|
const messagePadding = 15;
|
|
|
|
if (message) {
|
|
messageOffset = calculateMessageOffsets(message);
|
|
shift = messageOffset.y > 445 ? true : false;
|
|
}
|
|
if (shift) {
|
|
shiftValue -= el.getBBox().height + messagePadding;
|
|
}
|
|
animateMessage(el);
|
|
}
|
|
|
|
return {
|
|
beforeEnter,
|
|
enter,
|
|
afterEnter
|
|
};
|
|
}
|