npm update + associated fixes

src/editor/EditorStartup.js

@@ -617,7 +617,7 @@ class EditorStartup {
     * @param {Event} e
     * @returns {void}
     */
-      let editorObj = this;
+      const editorObj = this;
       const importImage = function (e) {
         document.getElementById('se-prompt-dialog').title = editorObj.uiStrings.notification.loadingImage;
         e.stopPropagation();

src/editor/components/PaintBox.js

@@ -19,7 +19,8 @@ class PaintBox {
     );
 
     let docElem = svgdocbox.documentElement;
-    docElem = container.appendChild(document.importNode(docElem, true));
+    docElem = document.importNode(docElem, true);
+    container.append(docElem);
 
     this.rect = docElem.firstElementChild;
     this.defs = docElem.getElementsByTagName('defs')[0];
@@ -46,7 +47,8 @@ class PaintBox {
     case 'linearGradient':
     case 'radialGradient': {
       this.grad.remove();
-      this.grad = this.defs.appendChild(paint[ptype]);
+      this.grad = paint[ptype];
+      this.defs.append(this.grad);
       const id = this.grad.id = 'gradbox_' + this.type;
       fillAttr = 'url(#' + id + ')';
       break;

src/editor/components/jgraduate/jQuery.jGraduate.js

@@ -1,3 +1,4 @@
+/* eslint-disable unicorn/prefer-dom-node-append */
 /**
  * @file jGraduate 0.4
  *

src/editor/components/seButton.js

@@ -54,7 +54,7 @@ export class ToolButton extends HTMLElement {
     super();
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this._shadowRoot.append(template.content.cloneNode(true));
     // locate the component
     this.$div = this._shadowRoot.querySelector('div');
     this.$img = this._shadowRoot.querySelector('img');

src/editor/components/seColorPicker.js

@@ -59,7 +59,7 @@ export class SeColorPicker extends HTMLElement {
     super();
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this._shadowRoot.append(template.content.cloneNode(true));
     this.$logo = this._shadowRoot.getElementById('logo');
     this.$label = this._shadowRoot.getElementById('label');
     this.$block = this._shadowRoot.getElementById('block');

src/editor/components/seExplorerButton.js

@@ -109,7 +109,7 @@ export class ExplorerButton extends HTMLElement {
     super();
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this._shadowRoot.append(template.content.cloneNode(true));
     // locate the component
     this.$button = this._shadowRoot.querySelector('.menu-button');
     this.$overall = this._shadowRoot.querySelector('.overall');

src/editor/components/seFlyingButton.js

@@ -91,7 +91,7 @@ export class FlyingButton extends HTMLElement {
     super();
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this._shadowRoot.append(template.content.cloneNode(true));
     // locate the component
     this.$button = this._shadowRoot.querySelector('.menu-button');
     this.$handle = this._shadowRoot.querySelector('.handle');

src/editor/components/seInput.js

@@ -31,7 +31,7 @@ export class SEInput extends HTMLElement {
     super();
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this._shadowRoot.append(template.content.cloneNode(true));
     // locate the component
     this.$img = this._shadowRoot.querySelector('img');
     this.$label = this.shadowRoot.getElementById('label');

src/editor/components/seList.js

@@ -32,7 +32,7 @@ export class SeList extends HTMLElement {
     super();
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this._shadowRoot.append(template.content.cloneNode(true));
     this.$dropdown = this._shadowRoot.querySelector('elix-dropdown-list');
     this.$label = this._shadowRoot.querySelector('label');
   }

src/editor/components/seListItem.js

@@ -20,7 +20,7 @@ export class SeListItem extends HTMLElement {
     super();
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this._shadowRoot.append(template.content.cloneNode(true));
     this.$menuitem = this._shadowRoot.querySelector('elix-menu-item');
   }
   /**

src/editor/components/seMenu.js

@@ -39,7 +39,7 @@ export class SeMenu extends HTMLElement {
     super();
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this._shadowRoot.append(template.content.cloneNode(true));
     this.$menu = this._shadowRoot.querySelector('elix-menu-button');
     this.$label = this.$menu.shadowRoot.querySelector('#popupToggle').shadowRoot;
   }

src/editor/components/seMenuItem.js

@@ -24,7 +24,7 @@ export class SeMenuItem extends HTMLElement {
     super();
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this._shadowRoot.append(template.content.cloneNode(true));
     this.$img = this._shadowRoot.querySelector('img');
     this.$label = this._shadowRoot.querySelector('span');
     this.$menuitem = this._shadowRoot.querySelector('elix-menu-item');

src/editor/components/sePalette.js

@@ -40,14 +40,14 @@ export class SEPalette extends HTMLElement {
     super();
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this._shadowRoot.append(template.content.cloneNode(true));
     this.$strip = this._shadowRoot.querySelector('elix-centered-strip');
     palette.forEach((rgb) => {
       const newDiv = document.createElement('div');
       newDiv.classList.add('square');
       newDiv.style.backgroundColor = rgb;
       newDiv.dataset.rgb = rgb;
-      this.$strip.appendChild(newDiv);
+      this.$strip.append(newDiv);
     });
   }
 

src/editor/components/seSpinInput.js

@@ -34,7 +34,7 @@ export class SESpinInput extends HTMLElement {
     super();
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this._shadowRoot.append(template.content.cloneNode(true));
     // locate the component
     this.$img = this._shadowRoot.querySelector('img');
     this.$label = this.shadowRoot.getElementById('label');

src/editor/dialogs/cmenuDialog.js

@@ -128,7 +128,7 @@ export class SeCMenuDialog extends HTMLElement {
     super();
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this._shadowRoot.append(template.content.cloneNode(true));
     this._workarea = document.getElementById('workarea');
     this.$dialog = this._shadowRoot.querySelector('#cmenu_canvas');
     this.$copyLink = this._shadowRoot.querySelector('#se-copy');

src/editor/dialogs/cmenuLayersDialog.js

@@ -81,7 +81,7 @@ export class SeCMenuLayerDialog extends HTMLElement {
     super();
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this._shadowRoot.append(template.content.cloneNode(true));
     this.source = '';
     this._workarea = undefined;
     this.$sidePanels = document.getElementById('sidepanels');

src/editor/dialogs/editorPreferencesDialog.js

@@ -243,7 +243,7 @@ export class SeEditPrefsDialog extends HTMLElement {
     // create the shadowDom and insert the template
     this.colorBlocks = ['#FFF', '#888', '#000', 'chessboard'];
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this._shadowRoot.append(template.content.cloneNode(true));
     this.$dialog = this._shadowRoot.querySelector('#svg_prefs');
     this.$saveBtn = this._shadowRoot.querySelector('#tool_prefs_save');
     this.$cancelBtn = this._shadowRoot.querySelector('#tool_prefs_cancel');

src/editor/dialogs/imagePropertiesDialog.js

@@ -129,7 +129,7 @@ export class SeImgPropDialog extends HTMLElement {
     // create the shadowDom and insert the template
     this.eventlisten = false;
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this._shadowRoot.append(template.content.cloneNode(true));
     this.$saveBtn = this._shadowRoot.querySelector('#tool_docprops_save');
     this.$cancelBtn = this._shadowRoot.querySelector('#tool_docprops_cancel');
     this.$resolution = this._shadowRoot.querySelector('#resolution');

src/editor/dialogs/svgSourceDialog.js

@@ -83,7 +83,7 @@ export class SeSvgSourceEditorDialog extends HTMLElement {
     super();
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this._shadowRoot.append(template.content.cloneNode(true));
     this.$dialog = this._shadowRoot.querySelector('#svg_source_editor');
     this.$copyBtn = this._shadowRoot.querySelector('#copy_save_done');
     this.$saveBtn = this._shadowRoot.querySelector('#tool_source_save');

src/editor/extensions/ext-connector/ext-connector.js

@@ -28,8 +28,6 @@ export default {
     const {$, svgroot} = S,
       addElem = svgCanvas.addSVGElementFromJson,
       selManager = S.selectorManager,
-      connSel = '.se_connector',
-      // connect_str = '-SE_CONNECT-',
       elData = $.data;
 
     let startX,
@@ -191,7 +189,7 @@ export default {
     * @returns {void}
     */
     function findConnectors (elems = selElems) {
-      const connectors = $(svgcontent).find(connSel);
+      const connectors = $(svgcontent).find('.se_connector');
       connections = [];
 
       // Loop through connectors to see if one is connected to the element
@@ -310,7 +308,7 @@ export default {
       const gse = svgCanvas.groupSelectedElements;
 
       svgCanvas.groupSelectedElements = function (...args) {
-        svgCanvas.removeFromSelection($(connSel).toArray());
+        svgCanvas.removeFromSelection($('.se_connector').toArray());
         return gse.apply(this, args);
       };
 
@@ -334,7 +332,7 @@ export default {
       $(svgcontent).find('*').each(function () {
         const conn = this.getAttributeNS(seNs, 'connector');
         if (conn) {
-          this.setAttribute('class', connSel.substr(1));
+          this.setAttribute('class', 'se_connector');
           const connData = conn.split(' ');
           const sbb = svgCanvas.getStrokedBBox([getElem(connData[0])]);
           const ebb = svgCanvas.getStrokedBBox([getElem(connData[1])]);
@@ -500,7 +498,7 @@ export default {
         const connStr = startId + ' ' + endId;
         const altStr = endId + ' ' + startId;
         // Don't create connector if one already exists
-        const dupe = $(svgcontent).find(connSel).filter(function () {
+        const dupe = $(svgcontent).find('.se_connector').filter(function () {
           const conn = this.getAttributeNS(seNs, 'connector');
           if (conn === connStr || conn === altStr) { return true; }
           return false;
@@ -524,7 +522,7 @@ export default {
           .data('end_bb', bb);
         seNs = svgCanvas.getEditorNS(true);
         curLine.setAttributeNS(seNs, 'se:connector', connStr);
-        curLine.setAttribute('class', connSel.substr(1));
+        curLine.setAttribute('class', 'se_connector');
         curLine.setAttribute('opacity', 1);
         svgCanvas.addToSelection([curLine]);
         svgCanvas.moveToBottomSelectedElement();
@@ -538,7 +536,7 @@ export default {
       },
       selectedChanged (opts) {
         // TODO: Find better way to skip operations if no connectors are in use
-        if (!$(svgcontent).find(connSel).length) { return; }
+        if (!$(svgcontent).find('.se_connector').length) { return; }
 
         if (svgCanvas.getMode() === 'connector') {
           svgCanvas.setMode('select');
@@ -616,7 +614,7 @@ export default {
           }
         }
         // Update line if it's a connector
-        if (elem.getAttribute('class') === connSel.substr(1)) {
+        if (elem.getAttribute('class') === 'se_connector') {
           const start = getElem(elData(elem, 'c_start'));
           updateConnectors([start]);
         } else {

src/editor/extensions/ext-imagelib/ext-imagelib.js

@@ -238,7 +238,7 @@ export default {
       case 's':
         // Import one
         if (svgStr) {
-          svgCanvas.importSvgString(response);
+          svgEditor.svgCanvas.importSvgString(response);
         } else if (imgStr) {
           importImage(response);
         }

src/editor/extensions/ext-storage/storageDialog.js

@@ -88,7 +88,7 @@ export class SeStorageDialog extends HTMLElement {
     super();
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
-    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this._shadowRoot.append(template.content.cloneNode(true));
     this.$dialog = this._shadowRoot.querySelector('#dialog_box');
     this.$storage = this._shadowRoot.querySelector('#js-storage');
     this.$okBtn = this._shadowRoot.querySelector('#storage_ok');

src/svgcanvas/elem-get-set.js

@@ -372,7 +372,8 @@ export const setGradientMethod = function (type) {
   // no duplicate found, so import gradient into defs
   if (!duplicateGrad) {
     // const origGrad = grad;
-    grad = defs.appendChild(elemContext_.getDOMDocument().importNode(grad, true));
+    grad = elemContext_.getDOMDocument().importNode(grad, true);
+    defs.append(grad);
     // get next id and set it on the grad
     grad.id = elemContext_.getCanvas().getNextId();
   } else { // use existing gradient
@@ -879,7 +880,7 @@ export const setBackgroundMethod = function (color, url) {
       'R0lGODlhEAAQAIAAAP///9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG+' +
       'gq4jM3IFLJgpswNly/XkcBpIiVaInlLJr9FZWAQA7);'
       });
-      bgPattern.appendChild(div);
+      bgPattern.append(div);
       bg.append(bgPattern);
     }
   } else if (bgPattern) {

src/svgcanvas/path-actions.js

@@ -361,7 +361,7 @@ export const pathActionsMethod = (function () {
             'stroke-width': '0.5',
             fill: 'none'
           });
-          stretchy = getElem('selectorParentGroup').appendChild(stretchy);
+          getElem('selectorParentGroup').append(stretchy);
         }
         stretchy.setAttribute('display', 'inline');
 

src/svgcanvas/path-method.js

@@ -134,7 +134,8 @@ export const getGripContainerMethod = function () {
   let c = getElem('pathpointgrip_container');
   if (!c) {
     const parentElement = getElem('selectorParentGroup');
-    c = parentElement.appendChild(document.createElementNS(NS.SVG, 'g'));
+    c = document.createElementNS(NS.SVG, 'g');
+    parentElement.append(c);
     c.id = 'pathpointgrip_container';
   }
   return c;
@@ -171,7 +172,7 @@ export const addPointGripMethod = function (index, x, y) {
       atts['xlink:title'] = uiStrings.pathNodeTooltip;
     }
     assignAttributes(pointGrip, atts);
-    pointGrip = pointGripContainer.appendChild(pointGrip);
+    pointGripContainer.append(pointGrip);
 
     const grip = $('#pathpointgrip_' + index);
     grip.dblclick(function () {

src/svgcanvas/select.js

@@ -45,20 +45,19 @@ export class Selector {
     });
 
     // this holds a reference to the path rect
-    this.selectorRect = this.selectorGroup.appendChild(
-      svgFactory_.createSVGElement({
-        element: 'path',
-        attr: {
-          id: ('selectedBox' + this.id),
-          fill: 'none',
-          stroke: '#22C',
-          'stroke-width': '1',
-          'stroke-dasharray': '5,5',
-          // need to specify this so that the rect is not selectable
-          style: 'pointer-events:none'
-        }
-      })
-    );
+    this.selectorRect = svgFactory_.createSVGElement({
+      element: 'path',
+      attr: {
+        id: ('selectedBox' + this.id),
+        fill: 'none',
+        stroke: '#22C',
+        'stroke-width': '1',
+        'stroke-dasharray': '5,5',
+        // need to specify this so that the rect is not selectable
+        style: 'pointer-events:none'
+      }
+    });
+    this.selectorGroup.append(this.selectorRect);
 
     // this holds a reference to the grip coordinates for this selector
     this.gripCoords = {
@@ -342,11 +341,12 @@ export class SelectorManager {
 
       $.data(grip, 'dir', dir);
       $.data(grip, 'type', 'resize');
-      this.selectorGrips[dir] = this.selectorGripsGroup.appendChild(grip);
+      this.selectorGrips[dir] = grip;
+      this.selectorGripsGroup.append(grip);
     });
 
     // add rotator elems
-    this.rotateGripConnector = this.selectorGripsGroup.appendChild(
+    this.rotateGripConnector =
       svgFactory_.createSVGElement({
         element: 'line',
         attr: {
@@ -354,10 +354,10 @@ export class SelectorManager {
           stroke: '#22C',
           'stroke-width': '1'
         }
-      })
-    );
+      });
+    this.selectorGripsGroup.append(this.rotateGripConnector);
 
-    this.rotateGrip = this.selectorGripsGroup.appendChild(
+    this.rotateGrip =
       svgFactory_.createSVGElement({
         element: 'circle',
         attr: {
@@ -368,8 +368,8 @@ export class SelectorManager {
           'stroke-width': 2,
           style: 'cursor:url(' + config_.imgPath + 'rotate.svg) 12 12, auto;'
         }
-      })
-    );
+      });
+    this.selectorGripsGroup.append(this.rotateGrip);
     $.data(this.rotateGrip, 'type', 'rotate');
 
     if ($('#canvasBackground').length) { return; }
@@ -477,7 +477,7 @@ export class SelectorManager {
   */
   getRubberBandBox () {
     if (!this.rubberBandBox) {
-      this.rubberBandBox = this.selectorParentGroup.appendChild(
+      this.rubberBandBox =
         svgFactory_.createSVGElement({
           element: 'rect',
           attr: {
@@ -489,8 +489,8 @@ export class SelectorManager {
             display: 'none',
             style: 'pointer-events:none'
           }
-        })
-      );
+        });
+      this.selectorParentGroup.append(this.rubberBandBox);
     }
     return this.rubberBandBox;
   }

src/svgcanvas/selected-elem.js

@@ -53,10 +53,10 @@ export const init = function (elementContext) {
 export const moveToTopSelectedElem = function () {
   const [selected] = elementContext_.getSelectedElements();
   if (!isNullish(selected)) {
-    let t = selected;
+    const t = selected;
     const oldParent = t.parentNode;
     const oldNextSibling = t.nextSibling;
-    t = t.parentNode.appendChild(t);
+    t.parentNode.append(t);
     // If the element actually moved position, add the command and fire the changed
     // event handler.
     if (oldNextSibling !== t.nextSibling) {
@@ -792,8 +792,7 @@ export const convertToGroup = function (elem) {
     });
 
     // Give ID for any visible element missing one
-    const visElems = elementContext_.getVisElems();
-    $(g).find(visElems).each(function () {
+    $(g).find(elementContext_.getVisElems()).each(function () {
       if (!this.id) { this.id = elementContext_.getNextId(); }
     });
 

src/svgcanvas/svg-exec.js

@@ -679,6 +679,7 @@ function getIssues () {
   }
 
   $.each(issueList, function (sel, descr) {
+    // eslint-disable-next-line unicorn/no-array-callback-reference
     if (content.find(sel).length) {
       issueCodes.push(sel);
       issues.push(descr);

src/svgcanvas/text-actions.js

@@ -81,7 +81,7 @@ export const textActionsMethod = (function () {
         stroke: '#333',
         'stroke-width': 1
       });
-      cursor = getElem('selectorParentGroup').appendChild(cursor);
+      getElem('selectorParentGroup').append(cursor);
     }
 
     if (!blinker) {