81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<template>
|
|
<g :id="item.id" :class="item.modifier" :transform="startingOffset">
|
|
<rect ref="messageRect" x="30" y="10" width="196" height="63" rx="10" :fill="bubbleFill" />
|
|
<text font-size="14" font-family="SF Pro Text" ref="messageText" :fill="textFill">
|
|
<tspan dy="16" x="0" v-for="(item, index) in textArr" :key="index">{{ item }}</tspan>
|
|
</text>
|
|
<g :transform="signatureTranslate">
|
|
<text
|
|
transform="translate(0, 5)"
|
|
fill="#000"
|
|
font-size="10"
|
|
font-family="SFCompactDisplay-Bold, SF Compact Display"
|
|
font-weight="700"
|
|
>
|
|
<tspan xml:space="preserve">{{ item.context }}</tspan>
|
|
</text>
|
|
<text
|
|
transform="translate(0, 20)"
|
|
fill="#6f6f6f"
|
|
font-size="9"
|
|
font-family="SFCompactDisplay, SF Compact Display"
|
|
>
|
|
<tspan v-if="item.subContext">{{item.subContext}}</tspan>
|
|
</text>
|
|
</g>
|
|
</g>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import useComputedBubble from "./bubbleDetails/computed";
|
|
import useBubbleDrawer from "./bubbleDetails/drawer";
|
|
import useTextWrap from "@/modules/textWrap";
|
|
import { defineComponent, onMounted, ref, reactive } from "vue";
|
|
|
|
export default defineComponent({
|
|
name: "TextBubble",
|
|
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 } = useComputedBubble(
|
|
props.item.modifier,
|
|
props.item.id
|
|
);
|
|
const { textWrap } = useTextWrap();
|
|
const { drawMessage, signatureTranslate } = useBubbleDrawer({
|
|
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>
|