npm update + associated fixes

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) {