es6 improvements

src/common/units.js

@@ -98,7 +98,7 @@ export const init = function (elementContainer) {
  * @function module:units.getTypeMap
  * @returns {module:units.TypeMap} The unit object with values for each unit
 */
-export const getTypeMap = function () {
+export const getTypeMap = () => {
   return typeMap_
 }
 
@@ -118,7 +118,7 @@ export const getTypeMap = function () {
 * @returns {Float|string} If a string/number was given, returns a Float. If an array, return a string
 * with comma-separated floats
 */
-export const shortFloat = function (val) {
+export const shortFloat = (val) => {
   const digits = elementContainer_.getRoundDigits()
   if (!isNaN(val)) {
     return Number(Number(val).toFixed(digits))
@@ -136,7 +136,7 @@ export const shortFloat = function (val) {
 * @param {"em"|"ex"|"in"|"cm"|"mm"|"pt"|"pc"|"px"|"%"} [unit]
 * @returns {Float}
 */
-export const convertUnit = function (val, unit) {
+export const convertUnit = (val, unit) => {
   unit = unit || elementContainer_.getBaseUnit()
   // baseVal.convertToSpecifiedUnits(unitNumMap[unit]);
   // const val = baseVal.valueInSpecifiedUnits;
@@ -153,38 +153,7 @@ export const convertUnit = function (val, unit) {
 * @param {string} val - Attribute value to convert
 * @returns {void}
 */
-export const setUnitAttr = function (elem, attr, val) {
+export const setUnitAttr = (elem, attr, val) => {
-  //  if (!isNaN(val)) {
-  // New value is a number, so check currently used unit
-  // const oldVal = elem.getAttribute(attr);
-
-  // Enable this for alternate mode
-  // if (oldVal !== null && (isNaN(oldVal) || elementContainer_.getBaseUnit() !== 'px')) {
-  //   // Old value was a number, so get unit, then convert
-  //   let unit;
-  //   if (oldVal.substr(-1) === '%') {
-  //     const res = getResolution();
-  //     unit = '%';
-  //     val *= 100;
-  //     if (wAttrs.includes(attr)) {
-  //       val = val / res.w;
-  //     } else if (hAttrs.includes(attr)) {
-  //       val = val / res.h;
-  //     } else {
-  //       return val / Math.sqrt((res.w*res.w) + (res.h*res.h))/Math.sqrt(2);
-  //     }
-  //   } else {
-  //     if (elementContainer_.getBaseUnit() !== 'px') {
-  //       unit = elementContainer_.getBaseUnit();
-  //     } else {
-  //       unit = oldVal.substr(-2);
-  //     }
-  //     val = val / typeMap_[unit];
-  //   }
-  //
-  // val += unit;
-  // }
-  // }
   elem.setAttribute(attr, val)
 }
 
@@ -205,7 +174,7 @@ const attrsToConvert = {
 * @param {Element} element - A DOM element whose attributes should be converted
 * @returns {void}
 */
-export const convertAttrs = function (element) {
+export const convertAttrs = (element) => {
   const elName = element.tagName
   const unit = elementContainer_.getBaseUnit()
   const attrs = attrsToConvert[elName]
@@ -228,7 +197,7 @@ export const convertAttrs = function (element) {
 * @param {string} val - Attribute value to convert
 * @returns {Float} The converted number
 */
-export const convertToNum = function (attr, val) {
+export const convertToNum = (attr, val) => {
   // Return a number if that's what it already is
   if (!isNaN(val)) { return val - 0 }
   if (val.substr(-1) === '%') {

src/editor/ConfigObj.js

@@ -291,7 +291,7 @@ export default class ConfigObj {
         let { source } = this.urldata
         if (!source) { // urldata.source may have been null if it ended with '='
           const src = searchParams.get('source')
-          if (src && src.startsWith('data:')) {
+          if (src?.startsWith('data:')) {
             source = src
           }
         }

src/editor/Editor.js

@@ -29,7 +29,7 @@ import LayersPanel from './panels/LayersPanel.js'
 import MainMenu from './MainMenu.js'
 import { getParentsUntil } from './components/jgraduate/Util.js'
 
-const { $id, $qa, isNullish, decode64, blankPageObjectURL } = SvgCanvas
+const { $id, $qa, decode64, blankPageObjectURL } = SvgCanvas
 
 /**
  *
@@ -487,8 +487,8 @@ class Editor extends EditorStartup {
     }
     const isNode = mode === 'pathedit'
     // if this.elems[1] is present, then we have more than one element
-    this.selectedElement = (elems.length === 1 || isNullish(elems[1]) ? elems[0] : null)
+    this.selectedElement = (elems.length === 1 || !elems[1] ? elems[0] : null)
-    this.multiselected = (elems.length >= 2 && !isNullish(elems[1]))
+    this.multiselected = (elems.length >= 2 && elems[1])
     if (this.selectedElement && !isNode) {
       this.topPanel.update()
     } // if (elem)
@@ -520,7 +520,7 @@ class Editor extends EditorStartup {
       return
     }
 
-    this.multiselected = (elems.length >= 2 && !isNullish(elems[1]))
+    this.multiselected = (elems.length >= 2 && elems[1])
     // Only updating fields for single elements for now
     if (!this.multiselected) {
       switch (mode) {
@@ -552,7 +552,7 @@ class Editor extends EditorStartup {
     }
 
     elems.forEach((elem) => {
-      const isSvgElem = (elem && elem.tagName === 'svg')
+      const isSvgElem = (elem?.tagName === 'svg')
       if (isSvgElem || this.svgCanvas.isLayer(elem)) {
         this.layersPanel.populateLayers()
         // if the element changed was the svg, then it could be a resolution change
@@ -561,8 +561,7 @@ class Editor extends EditorStartup {
         }
         // Update selectedElement if element is no longer part of the image.
         // This occurs for the text elements in Firefox
-      } else if (elem && this.selectedElement && isNullish(this.selectedElement.parentNode)) {
+      } else if (elem && !this.selectedElement?.parentNode) {
-        // || elem && elem.tagName == "path" && !multiselected) { // This was added in r1430, but not sure why
         this.selectedElement = elem
       }
     })

src/editor/MainMenu.js

@@ -167,7 +167,7 @@ class MainMenu {
           </head>
           <body><h1>${loadingImage}</h1></body>
         <html>`
-        if (typeof URL !== 'undefined' && URL.createObjectURL) {
+        if (URL?.createObjectURL) {
           const blob = new Blob([popHTML], { type: 'text/html' })
           popURL = URL.createObjectURL(blob)
         } else {

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

@@ -127,7 +127,7 @@ function setAttrs (elem, attrs) {
   } else {
     Object.entries(attrs).forEach(([aname, val]) => {
       const prop = elem[aname]
-      if (prop && prop.constructor === 'SVGLength') {
+      if (prop?.constructor === 'SVGLength') {
         prop.baseVal.value = val
       } else {
         elem.setAttribute(aname, val)

src/editor/components/seMenu.js

@@ -112,19 +112,6 @@ export class SeMenu extends HTMLElement {
   set src (value) {
     this.setAttribute('src', value)
   }
-  /**
-   * @function connectedCallback
-   * @returns {void}
-   */
-  /* connectedCallback () {
-    this.$menu.addEventListener('openedchange', (e) => {
-      e.preventDefault();
-      const selectedItem = e?.detail?.closeResult;
-      if (selectedItem !== undefined && selectedItem?.id !== undefined) {
-        document.getElementById(selectedItem.id).click();
-      }
-    });
-  } */
 }
 
 // Register

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

@@ -269,7 +269,7 @@ export default {
           curMeta = pending[id]
           let title
           if (svgStr) {
-            if (curMeta && curMeta.name) {
+            if (curMeta?.name) {
               title = curMeta.name
             } else {
             // Try to find a title
@@ -299,7 +299,7 @@ export default {
               submit.removeAttribute('disabled')
             }
           } else {
-            if (curMeta && curMeta.preview_url) {
+            if (curMeta?.preview_url) {
               title = curMeta.name || ''
               entry = document.createElement('span')
               const img = document.createElement('img')

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

@@ -421,7 +421,7 @@ export default {
         let i = selElems.length
         while (i--) {
           const elem = selElems[i]
-          if (elem && elem.getAttribute('shape') === 'star') {
+          if (elem?.getAttribute('shape') === 'star') {
             if (opts.selectedElement && !opts.multiselected) {
               $id('starNumPoints').value = elem.getAttribute('point')
               $id('radialShift').value = elem.getAttribute('radialshift')
@@ -429,7 +429,7 @@ export default {
             } else {
               showPanel(false, 'star')
             }
-          } else if (elem && elem.getAttribute('shape') === 'regularPoly') {
+          } else if (elem?.getAttribute('shape') === 'regularPoly') {
             if (opts.selectedElement && !opts.multiselected) {
               $id('polySides').value = elem.getAttribute('sides')
               showPanel(true, 'polygon')

src/editor/panels/TopPanel.js

@@ -187,7 +187,7 @@ class TopPanel {
         ? this.editor.configObj.curConfig.baseUnit
         : null
 
-    const isNode = currentMode === 'pathedit' // elem ? (elem.id && elem.id.startsWith('pathpointgrip')) : false;
+    const isNode = currentMode === 'pathedit'
     const menuItems = document.getElementById('se-cmenu_canvas')
     this.hideTool('selected_panel')
     this.hideTool('multiselected_panel')

src/svgcanvas/draw.js

@@ -482,7 +482,7 @@ export class Drawing {
     for (let i = 0; i < numchildren; ++i) {
       const child = this.svgElem_.childNodes.item(i)
       // for each g, find its layer name
-      if (child && child.nodeType === 1) {
+      if (child?.nodeType === 1) {
         if (child.tagName === 'g') {
           childgroups = true
           const name = findLayerNameInGroup(child)

src/svgcanvas/elem-get-set.js

@@ -708,7 +708,7 @@ export const setFontFamilyMethod = (val) => {
   const selectedElements = svgCanvas.getSelectedElements()
   svgCanvas.setCurText('font_family', val)
   svgCanvas.changeSelectedAttribute('font-family', val)
-  if (selectedElements[0] && !selectedElements[0].textContent) {
+  if (!selectedElements[0]?.textContent) {
     svgCanvas.textActions.setCursor()
   }
 }
@@ -750,7 +750,7 @@ export const setFontSizeMethod = (val) => {
   const selectedElements = svgCanvas.getSelectedElements()
   svgCanvas.setCurText('font_size', val)
   svgCanvas.changeSelectedAttribute('font-size', val)
-  if (selectedElements[0] && !selectedElements[0].textContent) {
+  if (!selectedElements[0]?.textContent) {
     svgCanvas.textActions.setCursor()
   }
 }
@@ -895,9 +895,6 @@ export const setRectRadiusMethod = (val) => {
 */
 export const makeHyperlinkMethod = (url) => {
   svgCanvas.groupSelectedElements('a', url)
-
-  // TODO: If element is a single "g", convert to "a"
-  //  if (selectedElements.length > 1 && selectedElements[1]) {
 }
 
 /**

src/svgcanvas/event.js

@@ -6,7 +6,7 @@
  */
 import {
   assignAttributes, cleanupElement, getElement, getRotationAngle, snapToGrid, walkTree,
-  isNullish, preventClickDefault, setHref, getBBox
+  preventClickDefault, setHref, getBBox
 } from './utilities.js'
 import {
   convertAttrs
@@ -465,7 +465,7 @@ const mouseMoveEvent = (evt) => {
         ({ x, y } = xya)
       }
 
-      if (svgCanvas.getRubberBox() && svgCanvas.getRubberBox().getAttribute('display') !== 'none') {
+      if (svgCanvas.getRubberBox()?.getAttribute('display') !== 'none') {
         realX *= zoom
         realY *= zoom
         assignAttributes(svgCanvas.getRubberBox(), {
@@ -482,15 +482,6 @@ const mouseMoveEvent = (evt) => {
     case 'textedit': {
       x *= zoom
       y *= zoom
-      // if (svgCanvas.getRubberBox() && svgCanvas.getRubberBox().getAttribute('display') !== 'none') {
-      //   assignAttributes(svgCanvas.getRubberBox(), {
-      //     x: Math.min(svgCanvas.getStartX(), x),
-      //     y: Math.min(svgCanvas.getStartY(), y),
-      //     width: Math.abs(x - svgCanvas.getStartX()),
-      //     height: Math.abs(y - svgCanvas.getStartY())
-      //   }, 100);
-      // }
-
       svgCanvas.textActions.mouseMove(mouseX, mouseY)
 
       break
@@ -638,7 +629,7 @@ const mouseUpEvent = (evt) => {
           // no change in position/size, so maybe we should move to pathedit
         } else {
           t = evt.target
-          if (selectedElements[0].nodeName === 'path' && isNullish(selectedElements[1])) {
+          if (selectedElements[0].nodeName === 'path' && !selectedElements[1]) {
             svgCanvas.pathActions.select(selectedElements[0])
             // if it was a path
             // else, if it was selected and this is a shift-click, remove it from selection
@@ -832,8 +823,8 @@ const mouseUpEvent = (evt) => {
     // then go to Select mode.
     // WebKit returns <div> when the canvas is clicked, Firefox/Opera return <svg>
     if ((svgCanvas.getCurrentMode() !== 'path' || !svgCanvas.getDrawnPath()) &&
-      t && t.parentNode &&
+      t &&
-      t.parentNode.id !== 'selectorParentGroup' &&
+      t.parentNode?.id !== 'selectorParentGroup' &&
       t.id !== 'svgcanvas' && t.id !== 'svgroot'
     ) {
       // switch into "select" mode if we've clicked on an element
@@ -1078,7 +1069,7 @@ const mouseDownEvent = (evt) => {
       break
     case 'zoom':
       svgCanvas.setStarted(true)
-      if (isNullish(svgCanvas.getRubberBox())) {
+      if (!svgCanvas.getRubberBox()) {
         svgCanvas.setRubberBox(svgCanvas.selectorManager.getRubberBandBox())
       }
       assignAttributes(svgCanvas.getRubberBox(), {
@@ -1299,7 +1290,7 @@ const mouseDownEvent = (evt) => {
   }, true)
 
   extResult.forEach((r) => {
-    if (r && r.started) {
+    if (r?.started) {
       svgCanvas.setStarted(true)
     }
   })

src/svgcanvas/layer.js

@@ -150,7 +150,7 @@ class Layer {
     const len = this.group_.childNodes.length
     for (let i = 0; i < len; ++i) {
       const child = this.group_.childNodes.item(i)
-      if (child && child.tagName === 'title') {
+      if (child?.tagName === 'title') {
         return child
       }
     }

src/svgcanvas/paste-elem.js

@@ -51,7 +51,7 @@ export const pasteElementsMethod = function (type, x, y) {
 * @returns {void}
 */
   function checkIDs (elem) {
-    if (elem.attr && elem.attr.id) {
+    if (elem.attr?.id) {
       changedIDs[elem.attr.id] = svgCanvas.getNextId()
       elem.attr.id = changedIDs[elem.attr.id]
     }

src/svgcanvas/path-actions.js

@@ -284,7 +284,7 @@ export const pathActionsMethod = (function () {
         // the control points on both sides
         if (prevCtlPt) {
           const newpts = svgCanvas.smoothControlPoints(prevCtlPt, ct1, curpos)
-          if (newpts && newpts.length === 2) {
+          if (newpts?.length === 2) {
             const prevArr = d[d.length - 1].split(',')
             prevArr[2] = newpts[0].x
             prevArr[3] = newpts[0].y
@@ -736,7 +736,7 @@ export const pathActionsMethod = (function () {
         if (!evt.shiftKey && !hasMoved) {
           path.selectPt(lastPt)
         }
-      } else if (rubberBox && rubberBox.getAttribute('display') !== 'none') {
+      } else if (rubberBox?.getAttribute('display') !== 'none') {
         // Done with multi-node-select
         rubberBox.setAttribute('display', 'none')
 

src/svgcanvas/path-method.js

@@ -464,7 +464,7 @@ export class Segment {
       this.type === 10 ? ptObjToArrMethod(this.type, item) : curPts
     )
 
-    if (this.next && this.next.ctrlpts) {
+    if (this.next?.ctrlpts) {
       const next = this.next.item
       const nextPts = [
         next.x, next.y,
@@ -626,7 +626,7 @@ export class Path {
         }
         // Remember that this is a starter seg
         startI = i
-      } else if (nextSeg && nextSeg.type === 1) {
+      } else if (nextSeg?.type === 1) {
         // This is the last real segment of a closed sub-path
         // Next is first seg after "M"
         seg.next = segs[startI + 1]

src/svgcanvas/recalculate.js

@@ -77,7 +77,7 @@ export const recalculateDimensions = (selected) => {
   const dataStorage = svgCanvas.getDataStorage()
   const tlist = selected.transform?.baseVal
   // remove any unnecessary transforms
-  if (tlist && tlist.numberOfItems > 0) {
+  if (tlist?.numberOfItems > 0) {
     let k = tlist.numberOfItems
     const noi = k
     while (k--) {
@@ -608,7 +608,7 @@ export const recalculateDimensions = (selected) => {
     // adjust it by recalculating the matrix transform.
 
     const fill = selected.getAttribute('fill')
-    if (fill && fill.startsWith('url(')) {
+    if (fill?.startsWith('url(')) {
       const paint = getRefElem(fill)
       if (paint) {
         let type = 'pattern'

src/svgcanvas/select.js

@@ -298,7 +298,7 @@ export class SelectorManager {
   initGroup () {
     const dataStorage = svgCanvas.getDataStorage()
     // remove old selector parent group if it existed
-    if (this.selectorParentGroup && this.selectorParentGroup.parentNode) {
+    if (this.selectorParentGroup?.parentNode) {
       this.selectorParentGroup.remove()
     }
 
@@ -418,7 +418,7 @@ export class SelectorManager {
       return this.selectorMap[elem.id]
     }
     for (let i = 0; i < N; ++i) {
-      if (this.selectors[i] && !this.selectors[i].locked) {
+      if (!this.selectors[i]?.locked) {
         this.selectors[i].locked = true
         this.selectors[i].reset(elem, bbox)
         this.selectorMap[elem.id] = this.selectors[i]
@@ -442,7 +442,7 @@ export class SelectorManager {
     if (!elem) { return }
     const N = this.selectors.length
     const sel = this.selectorMap[elem.id]
-    if (sel && !sel.locked) {
+    if (!sel?.locked) {
       // TODO(codedread): Ensure this exists in this module.
       console.warn('WARNING! selector was released but was already unlocked')
     }

src/svgcanvas/svg-exec.js

@@ -1088,7 +1088,7 @@ export const convertGradientsMethod = function (elem) {
 
         // If has transform, convert
         const tlist = grad.gradientTransform.baseVal
-        if (tlist && tlist.numberOfItems > 0) {
+        if (tlist?.numberOfItems > 0) {
           const m = transformListToTransform(tlist).matrix
           const pt1 = transformPoint(gCoords.x1, gCoords.y1, m)
           const pt2 = transformPoint(gCoords.x2, gCoords.y2, m)

src/svgcanvas/svgcanvas.js

@@ -44,7 +44,7 @@ import {
   findDefs, getHref, setHref, getRefElem, getRotationAngle,
   getBBoxOfElementAsPath, convertToPath, encode64, decode64,
   getVisibleElements, init as utilsInit,
-  getBBox as utilsGetBBox, getStrokedBBoxDefaultVisible, isNullish, blankPageObjectURL,
+  getBBox as utilsGetBBox, getStrokedBBoxDefaultVisible, blankPageObjectURL,
   $id, $qa, $qq, getFeGaussianBlur, stringToHTML, insertChildAtIndex
 } from './utilities.js'
 import {
@@ -191,9 +191,9 @@ class SvgCanvas {
     allProperties.text = SvgCanvas.mergeDeep({}, allProperties.shape)
     allProperties.text = SvgCanvas.mergeDeep(allProperties.text, {
       fill: '#000000',
-      stroke_width: this.curConfig.text && this.curConfig.text.stroke_width,
+      stroke_width: this.curConfig.text?.stroke_width,
-      font_size: this.curConfig.text && this.curConfig.text.font_size,
+      font_size: this.curConfig.text?.font_size,
-      font_family: this.curConfig.text && this.curConfig.text.font_family
+      font_family: this.curConfig.text?.font_family
     })
     this.curText = allProperties.text // Current text style properties
 
@@ -450,7 +450,7 @@ class SvgCanvas {
   setMode (name) {
     this.pathActions.clear(true)
     this.textActions.clear()
-    this.curProperties = (this.selectedElements[0] && this.selectedElements[0].nodeName === 'text') ? this.curText : this.curShape
+    this.curProperties = (this.selectedElements[0]?.nodeName === 'text') ? this.curText : this.curShape
     this.currentMode = name
   }
 
@@ -512,7 +512,7 @@ class SvgCanvas {
       attrs[item] = elem.getAttribute(item)
     })
     Object.values(attrs).forEach((val) => {
-      if (val && val.startsWith('url(')) {
+      if (val?.startsWith('url(')) {
         const id = getUrlFromAttr(val).substr(1)
         const ref = getElement(id)
         if (!ref) {
@@ -955,7 +955,6 @@ class SvgCanvas {
 SvgCanvas.$id = $id
 SvgCanvas.$qq = $qq
 SvgCanvas.$qa = $qa
-SvgCanvas.isNullish = isNullish
 SvgCanvas.encode64 = encode64
 SvgCanvas.decode64 = decode64
 SvgCanvas.mergeDeep = mergeDeep

src/svgcanvas/text-actions.js

@@ -426,7 +426,7 @@ export const textActionsMethod = (function () {
         svgCanvas.call('selected', [curtext])
         svgCanvas.addToSelection([curtext], true)
       }
-      if (curtext && !curtext.textContent.length) {
+      if (!curtext?.textContent.length) {
         // No content, so delete
         svgCanvas.deleteSelectedElements()
       }

src/svgcanvas/undo.js

@@ -7,7 +7,7 @@
 import * as draw from './draw.js'
 import * as hstry from './history.js'
 import {
-  getRotationAngle, getBBox as utilsGetBBox, isNullish, setHref, getStrokedBBoxDefaultVisible
+  getRotationAngle, getBBox as utilsGetBBox, setHref, getStrokedBBoxDefaultVisible
 } from './utilities.js'
 import {
   isGecko
@@ -67,7 +67,7 @@ export const getUndoManager = () => {
           } else if (!isApply) {
             svgCanvas.restoreRefElements(cmd.elem)
           }
-          if (cmd.elem && cmd.elem.tagName === 'use') {
+          if (cmd.elem?.tagName === 'use') {
             svgCanvas.setUseData(cmd.elem)
           }
         } else if (cmdType === 'ChangeElementCommand') {
@@ -149,7 +149,7 @@ export const changeSelectedAttributeNoUndoMethod = function (attr, newValue, ele
 
   while (i--) {
     let elem = elems[i]
-    if (isNullish(elem)) { continue }
+    if (!elem) { continue }
 
     // Set x,y vals on elements that don't have them
     if ((attr === 'x' || attr === 'y') && noXYElems.includes(elem.tagName)) {
@@ -164,7 +164,7 @@ export const changeSelectedAttributeNoUndoMethod = function (attr, newValue, ele
     // TODO: Missing statement body
     // if (elem.tagName === 'g' && goodGAttrs.includes(attr)) {}
     let oldval = attr === '#text' ? elem.textContent : elem.getAttribute(attr)
-    if (isNullish(oldval)) { oldval = '' }
+    if (!oldval) { oldval = '' }
     if (oldval !== String(newValue)) {
       if (attr === '#text') {
         // const oldW = utilsGetBBox(elem).width;

src/svgcanvas/utilities.js

@@ -287,7 +287,7 @@ export const bboxToObj = function ({ x, y, width, height }) {
 * @returns {void}
 */
 export const walkTree = function (elem, cbFn) {
-  if (elem && elem.nodeType === 1) {
+  if (elem?.nodeType === 1) {
     cbFn(elem)
     let i = elem.childNodes.length
     while (i--) {
@@ -1061,7 +1061,7 @@ export const assignAttributes = function (elem, attrs, suspendLength, unitCheck)
     const ns = (key.substr(0, 4) === 'xml:'
       ? NS.XML
       : key.substr(0, 6) === 'xlink:' ? NS.XLINK : null)
-    if (isNullish(value)) {
+    if (!value) {
       if (ns) {
         elem.removeAttributeNS(ns, key)
       } else {