163 lines
3.9 KiB
Vue
163 lines
3.9 KiB
Vue
<template>
|
|
<g
|
|
:id="item.id"
|
|
:class="item.modifier"
|
|
:transform = "startingOffset"
|
|
>
|
|
<rect
|
|
ref="bubbleTag"
|
|
id="#bubble"
|
|
x="30"
|
|
y="10"
|
|
width="196"
|
|
height="63"
|
|
rx="20"
|
|
:fill="bubbleFill"
|
|
/>
|
|
<text
|
|
font-size="14"
|
|
font-family="SF Pro"
|
|
id="#message"
|
|
ref="contentTag"
|
|
:fill="textFill"
|
|
>
|
|
<tspan
|
|
dy="16"
|
|
x="0"
|
|
v-for="(item, index) in textArr"
|
|
:key="index"
|
|
>
|
|
{{ item }}
|
|
</tspan>
|
|
</text>
|
|
<g :transform="signature">
|
|
<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, computed, onMounted, ref, reactive, onBeforeMount } from 'vue';
|
|
export default defineComponent({
|
|
name: "MessageItem",
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
},
|
|
setup(props) {
|
|
|
|
let textArr: string[] = reactive([]);
|
|
const signature = ref("");
|
|
const msgID = ref(props.item.id);
|
|
const bubbleTag = ref(`bubble${msgID.value}`);
|
|
const contentTag = ref(`content${msgID.value}`);
|
|
|
|
|
|
let bubble: any;
|
|
let content: any;
|
|
|
|
const textFill = computed(() => {
|
|
switch (props.item.modifier) {
|
|
case "ai":
|
|
return "#fff";
|
|
default:
|
|
return "#000";
|
|
}
|
|
});
|
|
|
|
const bubbleFill = computed(() => {
|
|
switch (props.item.modifier) {
|
|
case "sf":
|
|
return "#61b4f4";
|
|
case "ai":
|
|
return "#585858";
|
|
default:
|
|
return "#fff";
|
|
}
|
|
});
|
|
|
|
const startingOffset = computed(() => {
|
|
switch (props.item.modifier) {
|
|
case "sf":
|
|
return "translate(10, 600)";
|
|
case "ai":
|
|
return "translate(135, 600)";
|
|
default:
|
|
return "translate(20, 600)";
|
|
}
|
|
})
|
|
|
|
function signaturePosition(): void {
|
|
if (bubble.getAttribute("height") !== null) {
|
|
const height = Number(bubble.getAttribute("height"));
|
|
const p = -10;
|
|
signature.value = `translate(-10 ${height + p})`;
|
|
}
|
|
}
|
|
|
|
function createTextBox(s: string, w: number): void {
|
|
// return tspan elements for text with correct size
|
|
const wrap = (s: string, w: number) =>
|
|
s.replace(
|
|
new RegExp(`(?![^\\n]{1,${w}}$)([^\\n]{1,${w}})\\s`, "g"),
|
|
"$1\n"
|
|
);
|
|
textArr = wrap(s, w).split("\n");
|
|
}
|
|
|
|
function adjustRect(): void {
|
|
// must get dimensions of text box to fit bubble around
|
|
const padding = 20;
|
|
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 () => {
|
|
console.log(bubbleTag.value);
|
|
console.log(contentTag.value)
|
|
bubble = bubbleTag.value;
|
|
content = contentTag.value;
|
|
await adjustRect();
|
|
signaturePosition();
|
|
|
|
})
|
|
return {
|
|
bubble,
|
|
textFill,
|
|
bubbleFill,
|
|
startingOffset,
|
|
signaturePosition,
|
|
textArr,
|
|
signature,
|
|
contentTag,
|
|
msgID,
|
|
bubbleTag
|
|
}
|
|
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style></style>
|