partially implemented chat bubbles

This commit is contained in:
AsbjornOlling 2022-08-16 21:35:51 +02:00
parent 067afdb187
commit 4054d6ac48

View file

@ -6,7 +6,7 @@
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" width="300"
height="500" height="500"
viewBox="300 0 300 500" viewBox="0 0 300 500"
onload="start_chat('Ven')" onload="start_chat('Ven')"
overflow="auto" overflow="auto"
> >
@ -65,16 +65,19 @@ function split_text_into_lines(text, upper_line_length) {
/// ///
/// ChatMessages's are owned by a Dialog. /// ChatMessages's are owned by a Dialog.
function ChatMessage(message_text, is_myself) { function ChatMessage(message_text, is_myself) {
let lines = split_text_into_lines(message_text, 14); let lines = split_text_into_lines(message_text, 28);
let tspans = []; let tspans = []
let bubbles = [];
let container = document.getElementById('messages'); let container = document.getElementById('messages');
/// Render the chat message on the screen /// Render the chat message on the screen
this.draw = function() { this.draw = function() {
let text = document.createElementNS(svgns, 'text'); let text = document.createElementNS(svgns, 'text');
let x = 100 + (is_myself ? 10 : 50); let x = (is_myself ? 190 : 110);
text.setAttribute('x', `${x}%`); text.setAttribute('x', `${x}%`);
text.setAttribute('font-size', '14px');
text.setAttribute('text-anchor', is_myself ? 'end' : 'start');
lines.forEach(function(line) { lines.forEach(function(line) {
let y = tspan_y_pos(chat_lines_count++); let y = tspan_y_pos(chat_lines_count++);
@ -90,6 +93,26 @@ function ChatMessage(message_text, is_myself) {
tspans.push(tspan); tspans.push(tspan);
}); });
// done making text
// it must be in the DOM for getBBox() to work
container.appendChild(text);
// make chat bubble
const padding = 7;
const textbox = text.getBBox();
const y_percent = Math.round(((textbox.y - padding) / height) * 100);
const bubble = document.createElementNS(svgns, 'rect');
bubble.setAttribute('x', textbox.x-padding);
bubble.setAttribute('y', `${y_percent}%`);
bubble.setAttribute('width', textbox.width + 2*padding);
bubble.setAttribute('height', textbox.height + 2*padding);
bubble.setAttribute('rx', 8);
bubble.setAttribute('fill', 'black');
bubbles.push(bubble);
// put stuff in dom in the right order
container.appendChild(bubble);
container.removeChild(text);
container.appendChild(text); container.appendChild(text);
} }
@ -115,6 +138,11 @@ function ChatMessage(message_text, is_myself) {
} }
tspan.setAttribute('visibility', visibility); tspan.setAttribute('visibility', visibility);
}); });
bubbles.forEach(bubble => {
const old = parseInt(bubble.getAttribute('y').split('%')[0]);
const new_value = old + by;
bubble.setAttribute('y', `${new_value}%`);
});
} }
} }

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB