49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
import { ref, computed, inject } from 'vue';
|
|
import useTextInputAnims from "./textAnime";
|
|
import { Ref } from "@/types/vueRef/index";
|
|
/*
|
|
* text rendering logic used by inputController
|
|
*/
|
|
export default function useTextVisualizer(input: Ref<string>) {
|
|
const inputHeight = ref(42);
|
|
const inputWidth = ref(0);
|
|
|
|
const emitter: any = inject("mitt");
|
|
const { animateSend, verticalShiftInput, inputAppear } = useTextInputAnims();
|
|
|
|
async function renderTextInput() {
|
|
// first, get input dimensions
|
|
const inputDivs = await document.getElementsByClassName("inputBubble");
|
|
const height = inputDivs[0].getBoundingClientRect().height;
|
|
inputWidth.value = inputDivs[0].getBoundingClientRect().width;
|
|
// then, query for foreignObject div
|
|
const foreignObjectDiv = document.getElementsByClassName(
|
|
"inputContainer"
|
|
);
|
|
const foreignEl = foreignObjectDiv[0] as HTMLElement;
|
|
if (height !== inputHeight.value) {
|
|
inputHeight.value = height;
|
|
}
|
|
if (inputHeight.value === 0) {
|
|
inputAppear(foreignEl)
|
|
} else if (inputHeight.value > 36) {
|
|
const yTrans = -inputHeight.value + 30;
|
|
verticalShiftInput(foreignEl, yTrans);
|
|
}
|
|
}
|
|
|
|
emitter.on("user-message", () => {
|
|
const inputEl = document.getElementsByClassName("inputContainer");
|
|
const foreignEl = inputEl[0] as HTMLElement;
|
|
animateSend(foreignEl, inputHeight.value, input);
|
|
});
|
|
|
|
const textInputXoffset = computed(() => {
|
|
return `calc(50% - ${inputWidth.value / 2})`;
|
|
});
|
|
|
|
return {
|
|
textInputXoffset,
|
|
renderTextInput
|
|
}
|
|
}
|