136 lines
3 KiB
Vue
136 lines
3 KiB
Vue
<template>
|
|
<g
|
|
:id="item.id"
|
|
:class="item.modifier"
|
|
:transform="startingOffset"
|
|
>
|
|
<rect
|
|
ref="bubble"
|
|
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="content"
|
|
: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 } from 'vue';
|
|
export default defineComponent({
|
|
name: "MessageItem",
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
textArr: [],
|
|
signature: ""
|
|
};
|
|
},
|
|
computed: {
|
|
textFill() {
|
|
switch (this.item.modifier) {
|
|
case "ai":
|
|
return "#fff";
|
|
default:
|
|
return "#000";
|
|
}
|
|
},
|
|
bubbleFill() {
|
|
switch (this.item.modifier) {
|
|
case "sf":
|
|
return "#61b4f4";
|
|
case "ai":
|
|
return "#585858";
|
|
default:
|
|
return "#fff";
|
|
}
|
|
},
|
|
startingOffset() {
|
|
switch (this.item.modifier) {
|
|
case "sf":
|
|
return "translate(10, 600)";
|
|
case "ai":
|
|
return "translate(135, 600)";
|
|
default:
|
|
return "translate(20, 600)";
|
|
}
|
|
}
|
|
},
|
|
async mounted() {
|
|
await this.createTextBox(this.item.content, 32);
|
|
await this.adjustRect();
|
|
this.signaturePosition();
|
|
},
|
|
methods: {
|
|
signaturePosition() {
|
|
const height = Number(this.$refs.bubble.getAttribute("height"));
|
|
const p = -10;
|
|
this.signature = `translate(-10 ${height + p})`;
|
|
},
|
|
createTextBox(s, w) {
|
|
// return tspan elements for text with correct size
|
|
const wrap = (s, w) =>
|
|
s.replace(
|
|
new RegExp(`(?![^\\n]{1,${w}}$)([^\\n]{1,${w}})\\s`, "g"),
|
|
"$1\n"
|
|
);
|
|
this.textArr = wrap(s, w).split("\n");
|
|
},
|
|
adjustRect() {
|
|
// must get dimensions of text box to fit bubble around
|
|
const padding = 20;
|
|
const bbox = this.$refs.content.getBBox();
|
|
const bubble = this.$refs.bubble;
|
|
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);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style></style>
|