partially implemented chat bubbles

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 lines = split_text_into_lines(message_text, 28);
-  let tspans = [];
+  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}%`);
+    });
   }
 }