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

fix ts messageItem

Browse source
This commit is contained in:
riqo 2020-10-10 11:33:53 -05:00
commit 8d8cda2f03
4 changed files with 106 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

10
crate/src/utils.rs
View file

@ -0,0 +1,10 @@
pub fn set_panic_hook() {
// When the `console_error_panic_hook` feature is enabled, we can call the
// `set_panic_hook` function at least once during initialization, and then
// we will get better error messages if our code ever panics.
//
// For more details see
// https://github.com/rustwasm/console_error_panic_hook#readme
#[cfg(feature = "console_error_panic_hook")]
console_error_panic_hook::set_once();
}

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

@ -54,7 +54,7 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, computed, onMounted, ref } from 'vue';
export default defineComponent({
name: "MessageItem",
props: {
@ -63,73 +63,101 @@ import { defineComponent } from 'vue';
required: true
},
},
data() {
return {
textArr: [],
signature: ""
};
},
computed: {
textFill() {
switch (this.item.modifier) {
case "ai":
return "#fff";
default:
return "#000";
setup(props) {
interface ProtectedRef {
readonly el: SVGElement | HTMLElement;
reference: any;
height: number | null;
}
},
bubbleFill() {
switch (this.item.modifier) {
case "sf":
return "#61b4f4";
case "ai":
return "#585858";
default:
return "#fff";
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,
}
},
startingOffset() {
switch (this.item.modifier) {
case "sf":
return "translate(10, 600)";
case "ai":
return "translate(135, 600)";
default:
return "translate(20, 600)";
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.reference.value.getAttribute("height") !== null) {
const height = Number(bubble.reference.value.getAttribute("height"));
const p = -10;
signature = `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.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);
}
onMounted(async () => {
await createTextBox(props.item.content, 32);
await adjustRect();
signaturePosition();
})
return {
bubble,
textFill,
bubbleFill,
startingOffset,
signaturePosition,
textArr,
signature
}
},
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>

6
src/components/UI/index.vue
View file

@ -84,7 +84,7 @@
</template>
<script lang="ts">
import { defineComponent, inject, ref, onMounted } from "vue";
import { defineComponent, inject, onMounted } from "vue";
// import MessageItem from './UIDetails/messageItem.vue';
import Messages from "./UIDetails/messages";
export default defineComponent({
@ -100,12 +100,12 @@ import Messages from "./UIDetails/messages";
x: null,
y: null
}
const renderMsg = (i: number) => {
function renderMsg(i: number): void {
setTimeout(() => {
renderArr.push(messages[i]);
}, 2000);
}
const runAnim = () => {
function runAnim(): void {
for (let i = 0; i < messages.length; i++) {
renderMsg(i);
}

1
tsconfig.json
View file

@ -11,6 +11,7 @@
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"typeRoots": ["./node_modules/@types"],
"types": [
"webpack-env",
"jest"