#85 JavaScript conversion changes (#87)

* #85 javascript convertion changes

* #85 package json updated

* #85 extension context_tools code  again added

* #85 lint issue fixed

* #84 path tool draw issue fixed

package.json

@@ -181,8 +181,8 @@
     "nyc": "15.1.0",
     "open-cli": "6.0.1",
     "promise-fs": "2.1.1",
-    "qr-manipulation": "github:brettz9/qr-manipulation",
+    "qr-manipulation": "^0.7.0",
-    "query-result": "github:WebReflection/query-result",
+    "query-result": "^1.0.5",
     "remark-cli": "9.0.0",
     "remark-lint-ordered-list-marker-value": "2.0.1",
     "requirejs": "2.3.6",

src/editor/Editor.js

@@ -359,8 +359,8 @@ class Editor extends EditorStartup {
         element.classList.add('tool_button_current');
         element.classList.remove('tool_button')
       });
-      $id('#tool_select').classList.add('tool_button_current')
+      $id('tool_select').classList.add('tool_button_current')
-      $id('#tool_select').classList.remove('tool_button');
+      $id('tool_select').classList.remove('tool_button');
       this.multiselected = false;
       if (elems.length) {
         this.selectedElement = this.elems[0];
@@ -793,7 +793,8 @@ class Editor extends EditorStartup {
   async extAdded (win, ext) {
    
     const self = this;
-    const btnSelects = [];
+    // eslint-disable-next-line sonarjs/no-unused-collection
+    let btnSelects = [];
     if (!ext) {
       return undefined;
     }
@@ -815,6 +816,95 @@ class Editor extends EditorStartup {
       }
     };
 
+    if (ext.context_tools) {
+      $.each(ext.context_tools, function (i, tool) {
+        // Add select tool
+        const contId = tool.container_id ? (' id="' + tool.container_id + '"') : '';
+
+        let panel = $('#' + tool.panel);
+        // create the panel if it doesn't exist
+        if (!panel.length) {
+          panel = $('<div>', {id: tool.panel}).appendTo('#tools_top');
+        }
+
+        let html;
+        // TODO: Allow support for other types, or adding to existing tool
+        switch (tool.type) {
+        case 'tool_button': {
+          html = '<div class="tool_button">' + tool.id + '</div>';
+          const div = $(html).appendTo(panel);
+          if (tool.events) {
+            $.each(tool.events, function (evt, func) {
+              $(div).bind(evt, func);
+            });
+          }
+          break;
+        } case 'select': {
+          html = '<label' + contId + '>' +
+            '<select id="' + tool.id + '">';
+          $.each(tool.options, function (val, text) {
+            const sel = (val === tool.defval) ? ' selected' : '';
+            html += '<option value="' + val + '"' + sel + '>' + text + '</option>';
+          });
+          html += '</select></label>';
+          // Creates the tool, hides & adds it, returns the select element
+          const sel = $(html).appendTo(panel).find('select');
+
+          $.each(tool.events, function (evt, func) {
+            $(sel).bind(evt, func);
+          });
+          break;
+        } case 'button-select': {
+          html = '<div id="' + tool.id + '" class="dropdown toolset" title="' + tool.title + '">' +
+            '<div id="cur_' + tool.id + '" class="icon_label"></div><button></button></div>';
+
+          const list = $('<ul id="' + tool.id + '_opts"></ul>').appendTo('#option_lists');
+
+          if (tool.colnum) {
+            list.addClass('optcols' + tool.colnum);
+          }
+
+          // Creates the tool, hides & adds it, returns the select element
+          /* const dropdown = */ $(html).appendTo(panel).children();
+
+          btnSelects.push({
+            elem: ('#' + tool.id),
+            list: ('#' + tool.id + '_opts'),
+            title: tool.title,
+            callback: tool.events.change,
+            cur: ('#cur_' + tool.id)
+          });
+
+          break;
+        } case 'input': {
+          html = '<label' + contId + '>' +
+            '<span id="' + tool.id + '_label">' +
+            tool.label + ':</span>' +
+            '<input id="' + tool.id + '" title="' + tool.title +
+            '" size="' + (tool.size || '4') +
+            '" value="' + (tool.defval || '') + '" type="text"/></label>';
+
+          // Creates the tool, hides & adds it, returns the select element
+
+          // Add to given tool.panel
+          const inp = $(html).appendTo(panel).find('input');
+
+          if (tool.spindata) {
+            inp.SpinButton(tool.spindata);
+          }
+
+          if (tool.events) {
+            $.each(tool.events, function (evt, func) {
+              inp.bind(evt, func);
+            });
+          }
+          break;
+        } default:
+          break;
+        }
+      });
+    }
+
     if (ext.events) {
       this.leftPanel.add(ext.events.id, ext.events.click);
     }

src/editor/panels/LayersPanel.js

@@ -30,8 +30,8 @@ class LayersPanel {
    */
   changeSidePanelWidth(delta) {
     const rulerX = document.querySelector("#ruler_x");
-    $("#sidepanels").width("+=" + delta);
+    $id("sidepanels").style.width = (parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", "")) + delta) + "px";
-    $("#layerpanel").width("+=" + delta);
+    $id("layerpanel").style.width = (parseFloat(getComputedStyle($id("layerpanel"), null).width.replace("px", "")) + delta) + "px";
     rulerX.style.right =
       parseFloat(getComputedStyle(rulerX, null).right.replace("px", "")) +
       delta +
@@ -247,8 +247,12 @@ class LayersPanel {
       // This matches what this.editor.svgCanvas does
       // TODO: make this behavior less brittle (svg-editor should get which
       // layer is selected from the canvas and then select that one in the UI)
-      $("#layerlist tr.layer").removeClass("layersel");
+      const elements = document.querySelectorAll('#layerlist tr.layer');
-      $("#layerlist tr.layer:first").addClass("layersel");
+      Array.prototype.forEach.call(elements, function(el, i){
+        el.classList.remove('layersel');
+      });
+      document.querySelector('#layerlist tr.layer').classList.add('layersel');
+
     }
   }
 
@@ -276,13 +280,22 @@ class LayersPanel {
     this.populateLayers();
   }
 
+  index(el) {
+    if (!el) return -1;
+    var i = 0;
+    do {
+      i++;
+    } while (el = el.previousElementSibling);
+    return i;
+  }
+
   /**
    *
    * @returns {void}
    */
   mergeLayer() {
     if (
-      $("#layerlist tr.layersel").index() ===
+      (this.index(document.querySelector("#layerlist tr.layersel"))-1) ===
       this.editor.svgCanvas.getCurrentDrawing().getNumLayers() - 1
     ) {
       return;
@@ -299,7 +312,7 @@ class LayersPanel {
   moveLayer(pos) {
     const total = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
 
-    let curIndex = $("#layerlist tr.layersel").index();
+    let curIndex = (this.index(document.querySelector("#layerlist tr.layersel"))-1);
     if (curIndex > 0 || curIndex < total - 1) {
       curIndex += pos;
       this.editor.svgCanvas.setCurrentLayerPosition(total - curIndex - 1);
@@ -312,7 +325,7 @@ class LayersPanel {
    */
   layerRename() {
     // const curIndex = $('#layerlist tr.layersel').prevAll().length; // Currently unused
-    const oldName = $("#layerlist tr.layersel td.layername").text();
+    const oldName = document.querySelector("#layerlist tr.layersel td.layername").textContent;
     const newName = prompt(this.uiStrings.notification.enterNewLayerName, "");
     if (!newName) {
       return;