102 lines
2.3 KiB
Vue
102 lines
2.3 KiB
Vue
<template>
|
|
<g
|
|
:id="item.id"
|
|
:class="item.modifier"
|
|
:transform = "startingOffset"
|
|
>
|
|
<rect
|
|
ref="messageRect"
|
|
x="30"
|
|
y="10"
|
|
width="196"
|
|
height="63"
|
|
rx="20"
|
|
:fill="bubbleFill"
|
|
/>
|
|
<text
|
|
font-size="14"
|
|
font-family="SF Pro"
|
|
ref="messageText"
|
|
:fill="textFill"
|
|
>
|
|
<tspan
|
|
dy="16"
|
|
x="0"
|
|
v-for="(item, index) in textArr"
|
|
:key="index"
|
|
>
|
|
{{ item }}
|
|
</tspan>
|
|
</text>
|
|
<g :transform="signatureTranslate">
|
|
<image
|
|
xlink:href="profile.png"
|
|
width="29"
|
|
height="29"
|
|
fill="#b5b5b5"
|
|
clip-path="url(#clip)"
|
|
/>
|
|
<text
|
|
transform="translate(36, 17)"
|
|
fill="#888"
|
|
font-size="10"
|
|
font-family="SFCompactDisplay-Bold, SF Compact Display"
|
|
font-weight="700"
|
|
>
|
|
<tspan v-if="item.outgoing">You to</tspan>
|
|
<tspan v-else>From</tspan>
|
|
<tspan xml:space="preserve" fill="#000"> {{ item.signature }}</tspan>
|
|
</text>
|
|
</g>
|
|
</g>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, onMounted, ref, reactive } from 'vue';
|
|
import useMessageItemComp from "@/composables/computed/useMessageItemComp";
|
|
import useMessageItemAnims from "@/composables/anims/useMessageItemAnims";
|
|
import useTextWrap from "@/composables/textWrap/useTextWrap";
|
|
export default defineComponent({
|
|
name: "MessageItem",
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
},
|
|
setup(props) {
|
|
let textArr: string[] = reactive([]);
|
|
|
|
const msgID = ref(props.item.id);
|
|
const messageRect = ref(`message${msgID.value}`);
|
|
const messageText = ref(`text${msgID.value}`);
|
|
|
|
const { textFill, bubbleFill, startingOffset } = useMessageItemComp(props.item.modifier);
|
|
const { textWrap } = useTextWrap();
|
|
const { drawMessage, signatureTranslate } = useMessageItemAnims({
|
|
mr: messageRect,
|
|
tr: messageText
|
|
})
|
|
|
|
// wraps message text before render
|
|
textArr = textWrap({
|
|
s: props.item.content,
|
|
w: 32
|
|
});
|
|
|
|
onMounted(() => {
|
|
drawMessage();
|
|
})
|
|
|
|
return {
|
|
textFill,
|
|
bubbleFill,
|
|
startingOffset,
|
|
textArr,
|
|
signatureTranslate,
|
|
messageText,
|
|
messageRect
|
|
}
|
|
},
|
|
});
|
|
</script>
|