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

add animation loop [messageItem render bug]

Browse source
This commit is contained in:
riqo 2020-10-10 15:40:52 -05:00
commit 1646eca195
3 changed files with 161 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/components/UI/UIDetails/messageItem.vue
View file

@ -2,7 +2,7 @@
<g
:id="item.id"
:class="item.modifier"
:transform="startingOffset"
:transform = "startingOffset"
>
<rect
ref="bubble"
@ -54,7 +54,7 @@
</template>
<script lang="ts">
import { defineComponent, computed, onMounted, ref } from 'vue';
import { defineComponent, computed, onMounted, ref, reactive, onBeforeMount } from 'vue';
export default defineComponent({
name: "MessageItem",
props: {
@ -64,23 +64,12 @@ import { defineComponent, computed, onMounted, ref } from 'vue';
},
},
setup(props) {
interface ProtectedRef {
readonly el: SVGElement | HTMLElement;
reference: any;
height: number | null;
}
let textArr: string[] = [];
let signature = "";
const bubble: ProtectedRef = {
el: document.createElement("rect"),
reference: ref(null),
height: 0,
};
const content: ProtectedRef = {
el: document.createElement("text"),
reference: ref(null),
height: 0,
}
let textArr: string[] = reactive([]);
const signature = ref("");
let bubble: any;
let content: any;
const textFill = computed(() => {
switch (props.item.modifier) {
@ -114,10 +103,10 @@ import { defineComponent, computed, onMounted, ref } from 'vue';
})
function signaturePosition(): void {
if (bubble.reference.value.getAttribute("height") !== null) {
const height = Number(bubble.reference.value.getAttribute("height"));
if (bubble.getAttribute("height") !== null) {
const height = Number(bubble.getAttribute("height"));
const p = -10;
signature = `translate(-10 ${height + p})`;
signature.value = `translate(-10 ${height + p})`;
}
}
@ -134,19 +123,20 @@ import { defineComponent, computed, onMounted, ref } from 'vue';
function adjustRect(): void {
// must get dimensions of text box to fit bubble around
const padding = 20;
const bbox = content.reference.value.getBBox();
bubble.reference.value.setAttribute("x", bbox.x - padding);
bubble.reference.value.setAttribute("y", bbox.y - padding);
bubble.reference.value.setAttribute("width", bbox.width + 2 * padding);
bubble.reference.value.setAttribute("height", bbox.height + 2 * padding);
const bbox = content.getBBox();
bubble.setAttribute("x", bbox.x - padding);
bubble.setAttribute("y", bbox.y - padding);
bubble.setAttribute("width", bbox.width + 2 * padding);
bubble.setAttribute("height", bbox.height + 2 * padding);
}
createTextBox(props.item.content, 32);
onMounted(async () => {
await createTextBox(props.item.content, 32);
await adjustRect();
signaturePosition();
})
bubble = document.getElementById("#bubble");
content = document.getElementById("#message");
await adjustRect();
signaturePosition();
})
return {
bubble,
textFill,
@ -154,7 +144,8 @@ import { defineComponent, computed, onMounted, ref } from 'vue';
startingOffset,
signaturePosition,
textArr,
signature
signature,
content
}
},