enforce a few eslint rules

src/editor/panels/BottomPanel.js

@@ -1,7 +1,7 @@
 import SvgCanvas from '../../svgcanvas/svgcanvas.js';
-import {jGraduate} from '../components/jgraduate/jQuery.jGraduate.js';
+import { jGraduate } from '../components/jgraduate/jQuery.jGraduate.js';
 
-const {$id} = SvgCanvas;
+const { $id } = SvgCanvas;
 
 /*
  * register actions for left panel
@@ -28,18 +28,18 @@ class BottomPanel {
     get multiselected () {
       return this.editor.multiselected;
     }
-  
+
     /**
     * @type {module}
     */
     changeStrokeWidth (e) {
       let val = e.target.value;
-      if (val === 0 && this.editor.selectedElement && ['line', 'polyline'].includes(this.editor.selectedElement.nodeName)) {
+      if (val === 0 && this.editor.selectedElement && [ 'line', 'polyline' ].includes(this.editor.selectedElement.nodeName)) {
         val = 1;
       }
       this.editor.svgCanvas.setStrokeWidth(val);
     }
-  
+
     /**
     * @type {module}
     */
@@ -60,7 +60,7 @@ class BottomPanel {
         }
         const zoom = this.editor.svgCanvas.getZoom();
         const wArea = this.editor.workarea;
-  
+
         this.editor.zoomChanged(window, {
           width: 0,
           height: 0,
@@ -79,7 +79,7 @@ class BottomPanel {
     updateToolButtonState () {
       const bNoFill = (this.editor.svgCanvas.getColor('fill') === 'none');
       const bNoStroke = (this.editor.svgCanvas.getColor('stroke') === 'none');
-      const buttonsNeedingStroke = ['tool_fhpath', 'tool_line'];
+      const buttonsNeedingStroke = [ 'tool_fhpath', 'tool_line' ];
       const buttonsNeedingFillAndStroke = [
         'tools_rect', 'tools_ellipse',
         'tool_text', 'tool_path'
@@ -98,7 +98,7 @@ class BottomPanel {
           $id(btn).disabled = false;
         });
       }
-  
+
       if (bNoStroke && bNoFill) {
         // eslint-disable-next-line sonarjs/no-identical-functions
         buttonsNeedingFillAndStroke.forEach((btn) => {
@@ -113,7 +113,7 @@ class BottomPanel {
           $id(btn).disabled = false;
         });
       }
-  
+
       this.editor.svgCanvas.runExtensions(
         'toolButtonStateUpdate',
         /** @type {module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate} */ {
@@ -122,12 +122,12 @@ class BottomPanel {
         }
       );
     }
-  
+
     /**
     * @type {module}
     */
     handleColorPicker (type, evt) {
-      const {paint} = evt.detail;
+      const { paint } = evt.detail;
       this.editor.svgCanvas.setPaint(type, paint);
       this.updateToolButtonState();
     }
@@ -150,9 +150,9 @@ class BottomPanel {
    handlePalette (e) {
     e.preventDefault();
     // shift key or right click for stroke
-    const {picker, color} = e.detail;
+    const { picker, color } = e.detail;
     // Webkit-based browsers returned 'initial' here for no stroke
-    const paint = color === 'none' ? new jGraduate.Paint() : new jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
+    const paint = color === 'none' ? new jGraduate.Paint() : new jGraduate.Paint({ alpha: 100, solidColor: color.substr(1) });
     if (picker === 'fill') {
       $id('fill_color').setPaint(paint);
     } else {
@@ -164,7 +164,7 @@ class BottomPanel {
     }
     this.updateToolButtonState();
   }
-  
+
   /**
   * @type {module}
   */
@@ -220,9 +220,9 @@ class BottomPanel {
     `;
     this.editor.$svgEditor.append(template.content.cloneNode(true));
     $id('palette').addEventListener('change', this.handlePalette.bind(this));
-    const {curConfig} = this.editor.configObj;
-    $id('fill_color').setPaint(new jGraduate.Paint({alpha: 100, solidColor: curConfig.initFill.color}));
-    $id('stroke_color').setPaint(new jGraduate.Paint({alpha: 100, solidColor: curConfig.initStroke.color}));
+    const { curConfig } = this.editor.configObj;
+    $id('fill_color').setPaint(new jGraduate.Paint({ alpha: 100, solidColor: curConfig.initFill.color }));
+    $id('stroke_color').setPaint(new jGraduate.Paint({ alpha: 100, solidColor: curConfig.initStroke.color }));
     $id('zoom').addEventListener('change', (e) => this.changeZoom.bind(this)(e.detail.value));
     $id('stroke_color').addEventListener('change', (evt) => this.handleColorPicker.bind(this)('stroke', evt));
     $id('fill_color').addEventListener('change', (evt) => this.handleColorPicker.bind(this)('fill', evt));

src/editor/panels/LayersPanel.js

@@ -387,7 +387,7 @@ class LayersPanel {
     // we get the layers in the reverse z-order (the layer rendered on top is listed first)
     while (layer--) {
       const name = drawing.getLayerName(layer);
-      const layerTr = document.createElement("tr");      
+      const layerTr = document.createElement("tr");
       layerTr.className = (name === currentLayerName) ? 'layer layersel' : 'layer';
       const layerVis = document.createElement("td");
       layerVis.className = (!drawing.getLayerVisibility(name)) ? "layerinvis layervis" : 'layervis';
@@ -410,7 +410,7 @@ class LayersPanel {
         });
         evt.currentTarget.parentNode.classList.add("layersel");
         self.editor.svgCanvas.setCurrentLayer(evt.currentTarget.textContent);
-        evt.preventDefault();        
+        evt.preventDefault();
       });
       element.addEventListener('mouseup', function(evt) {
         self.toggleHighlightLayer(

src/editor/panels/TopPanel.js

@@ -45,7 +45,7 @@ class TopPanel {
   setStrokeOpt(opt, changeElem) {
     const { id } = opt;
     const bits = id.split('_');
-    const [pre, val] = bits;
+    const [ pre, val ] = bits;
 
     if (changeElem) {
       this.svgCanvas.setStrokeAttr('stroke-' + pre, val);
@@ -206,14 +206,14 @@ class TopPanel {
       if (!isNode && currentMode !== "pathedit") {
         $id("selected_panel").style.display = 'block';
         // Elements in this array already have coord fields
-        if (["line", "circle", "ellipse"].includes(elname)) {
+        if ([ "line", "circle", "ellipse" ].includes(elname)) {
           $id("xy_panel").style.display = 'none';
         } else {
           let x, y;
 
           // Get BBox vals for g, polyline and path
-          if (["g", "polyline", "path"].includes(elname)) {
-            const bb = this.editor.svgCanvas.getStrokedBBox([elem]);
+          if ([ "g", "polyline", "path" ].includes(elname)) {
+            const bb = this.editor.svgCanvas.getStrokedBBox([ elem ]);
             if (bb) {
               ({ x, y } = bb);
             }
@@ -276,11 +276,11 @@ class TopPanel {
       const panels = {
         g: [],
         a: [],
-        rect: ["rx", "width", "height"],
-        image: ["width", "height"],
-        circle: ["cx", "cy", "r"],
-        ellipse: ["cx", "cy", "rx", "ry"],
-        line: ["x1", "y1", "x2", "y2"],
+        rect: [ "rx", "width", "height" ],
+        image: [ "width", "height" ],
+        circle: [ "cx", "cy", "r" ],
+        ellipse: [ "cx", "cy", "rx", "ry" ],
+        line: [ "x1", "y1", "x2", "y2" ],
         text: [],
         use: []
       };
@@ -292,7 +292,7 @@ class TopPanel {
         linkHref = this.editor.svgCanvas.getHref(elem);
         $id("g_panel").style.display = 'block';
       }
-      // siblings 
+      // siblings
       const selements = Array.prototype.filter.call(elem.parentNode.children, function(child){
         return child !== elem;
       });
@@ -587,7 +587,7 @@ class TopPanel {
       const elem = this.editor.selectedElement;
       this.editor.svgCanvas.clearSelection();
       elem.id = val;
-      this.editor.svgCanvas.addToSelection([elem], true);
+      this.editor.svgCanvas.addToSelection([ elem ], true);
     } else {
       this.editor.svgCanvas.changeSelectedAttribute(attr, val);
     }
@@ -742,7 +742,7 @@ class TopPanel {
   init() {
     // add Top panel
     const template = document.createElement("template");
-    const {i18next} = this.editor;
+    const { i18next } = this.editor;
     // eslint-disable-next-line no-unsanitized/property
     template.innerHTML = `
        <div id="tools_top">