From 4054d6ac48d7059a3fb190ee0d64a35b7d041579 Mon Sep 17 00:00:00 2001 From: AsbjornOlling Date: Tue, 16 Aug 2022 21:35:51 +0200 Subject: [PATCH] partially implemented chat bubbles --- chatapp.svg | 36 ++++++++++++++++++++++++++++++++---- 1 file changed, 32 insertions(+), 4 deletions(-) diff --git a/chatapp.svg b/chatapp.svg index 7df9cb7..4f25ba5 100644 --- a/chatapp.svg +++ b/chatapp.svg @@ -6,7 +6,7 @@ xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="500" - viewBox="300 0 300 500" + viewBox="0 0 300 500" onload="start_chat('Ven')" overflow="auto" > @@ -65,16 +65,19 @@ function split_text_into_lines(text, upper_line_length) { /// /// ChatMessages's are owned by a Dialog. function ChatMessage(message_text, is_myself) { - let lines = split_text_into_lines(message_text, 14); - let tspans = []; + let lines = split_text_into_lines(message_text, 28); + let tspans = [] + let bubbles = []; let container = document.getElementById('messages'); /// Render the chat message on the screen this.draw = function() { 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('font-size', '14px'); + text.setAttribute('text-anchor', is_myself ? 'end' : 'start'); lines.forEach(function(line) { let y = tspan_y_pos(chat_lines_count++); @@ -90,6 +93,26 @@ function ChatMessage(message_text, is_myself) { 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); } @@ -115,6 +138,11 @@ function ChatMessage(message_text, is_myself) { } 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}%`); + }); } }