client/typeselection: switch from absolute positioning to child of node

means that the text moves with the node now, plus allows for setting the
node position asynchronously with setting the typeselection.

2 files changed, 19 insertions, 15 deletions

diff --git a/res/templates/index.html b/res/templates/index.html
index 42c83a94..e50bff95 100644
--- a/res/templates/index.html
+++ b/res/templates/index.html
@@ -135,7 +135,7 @@ var rz_config = { // set as a global variable
       </div>
     </div>
     <div id="graph-view__canvas"></div>
-    <div class="type_selection" style="display:none">
+    <div class="type_selection" style="display:none; width:400px; top: 20px">
       <div class="type_selection__row" id="type_selection__intro">Change node type with <span class="kbd-button">Shift</span>+<span class="kbd-button">Up</span> and <span class="kbd-button">Shift</span>+<span class="kbd-button">Down</span></div>
       <div class="type_selection__row" id="type_selection__chosen_type_label">Chosen Type: <span id="type_selection__chosen_type_name"/></div>
       <div class="type_selection__row" id="type_selection__chosen_type_desc"></div>
diff --git a/src/client/textanalysis.ui.js b/src/client/textanalysis.ui.js
index d5345c43..bf1b50fb 100644
--- a/src/client/textanalysis.ui.js
+++ b/src/client/textanalysis.ui.js
@@ -21,31 +21,32 @@ function get_svg__body_position(node_id)
 }
 
 var typeselection = function TypeSelectionDialog() {
-    var e = $('.type_selection'),
+    var fo = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'),
+        e = $('.type_selection'),
         e_intro = e.find('#type_selection__intro'),
         e_label = e.find('#type_selection__chosen_type_label'),
         e_name = e.find('#type_selection__chosen_type_name'),
         e_desc = e.find('#type_selection__chosen_type_desc'),
         typeselection = {};
 
+    fo.appendChild(e[0]);
     typeselection.analysisNodeStart = function(node_id) {
         typeselection.show(node_id);
     }
-    function set_position(node_id)
-    {
-        var x,
-            y,
-            node_location;
+    function attach_to(node_id) {
+        var node = document.getElementById(node_id);
 
-        node_location = get_svg__body_position(node_id);
-        x = node_location.x - 20; // subtract average node size
-        y = node_location.y + 25;
-        e.css({ left: x,
-                top: y,
-              });
+        if (node === undefined) {
+            console.log('cannot show type selection since node does not exist: ' + node_id);
+            return;
+        }
+        node.appendChild(fo);
     }
     typeselection.show = function(node_id) {
-        set_position(node_id);
+        if (document.getElementById(node_id) === null) {
+            return;
+        }
+        attach_to(node_id);
         e_label.hide();
         e_desc.hide();
         e_intro.show();
@@ -57,7 +58,10 @@ var typeselection = function TypeSelectionDialog() {
     typeselection.showChosenType = function(node_id, nodetype) {
         var desc = description[nodetype];
 
-        set_position(node_id);
+        if (document.getElementById(node_id) === null) {
+            return;
+        }
+        attach_to(node_id);
         e_intro.hide();
         e_label.show();
         e_name.html(nodetype);