@svgedit/svgcanvas 7.2.6 → 7.4.1

package/core/path-actions.js

@@ -38,7 +38,7 @@ export const init = (canvas) => {
  * @param {boolean} toRel - true of convert to relative
  * @returns {string}
  */
-export const convertPath = function (pth, toRel) {
+export const convertPath = (pth, toRel) => {
   const { pathSegList } = pth
   const len = pathSegList.numberOfItems
   let curx = 0; let cury = 0
@@ -64,7 +64,7 @@ export const convertPath = function (pth, toRel) {
       case 'z': // z,Z closepath (Z/z)
       case 'Z':
         d += 'z'
-        if (lastM && !toRel) {
+        if (lastM) {
           curx = lastM[0]
           cury = lastM[1]
         }
@@ -217,34 +217,27 @@ export const convertPath = function (pth, toRel) {
  * @param {Integer[]} [lastPoint] - x,y point
  * @returns {string}
  */
-function pathDSegment (letter, points, morePoints, lastPoint) {
-  points.forEach(function (pnt, i) {
-    points[i] = shortFloat(pnt)
-  })
-  let segment = letter + points.join(' ')
-  if (morePoints) {
-    segment += ' ' + morePoints.join(' ')
-  }
-  if (lastPoint) {
-    segment += ' ' + shortFloat(lastPoint)
-  }
-  return segment
+const pathDSegment = (letter, points, morePoints, lastPoint) => {
+  const parts = [
+    letter + points.map(pnt => shortFloat(pnt)).join(' '),
+    morePoints ? morePoints.join(' ') : null,
+    lastPoint ? shortFloat(lastPoint) : null
+  ].filter(Boolean)
+  return parts.join(' ')
 }
 
 /**
 * Group: Path edit functions.
 * Functions relating to editing path elements.
-* @namespace {PlainObject} pathActions
+* @class PathActions
 * @memberof module:path
 */
-export const pathActionsMethod = (function () {
-  let subpath = false
-  let newPoint; let firstCtrl
-
-  let currentPath = null
-  let hasMoved = false
-  // No `svgCanvas` yet but should be ok as is `null` by default
-  // svgCanvas.setDrawnPath(null);
+class PathActions {
+  #subpath = false
+  #newPoint = null
+  #firstCtrl = null
+  #currentPath = null
+  #hasMoved = false
 
   /**
   * This function converts a polyline (created by the fh_path tool) into
@@ -253,9 +246,9 @@ export const pathActionsMethod = (function () {
   * @function smoothPolylineIntoPath
   * @param {Element} element
   * @returns {Element}
+  * @private
   */
-  const smoothPolylineIntoPath = function (element) {
-    let i
+  #smoothPolylineIntoPath = (element) => {
     const { points } = element
     const N = points.numberOfItems
     if (N >= 4) {
@@ -272,9 +265,11 @@ export const pathActionsMethod = (function () {
       // - https://www.codeproject.com/KB/graphics/BezierSpline.aspx?msg=2956963
       // - https://www.ian-ko.com/ET_GeoWizards/UserGuide/smooth.htm
       // - https://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/Bezier/bezier-der.html
-      let curpos = points.getItem(0); let prevCtlPt = null
+      let curpos = points.getItem(0)
+      let prevCtlPt = null
       let d = []
-      d.push(['M', curpos.x, ',', curpos.y, ' C'].join(''))
+      d.push(`M${curpos.x},${curpos.y} C`)
+      let i
       for (i = 1; i <= (N - 4); i += 3) {
         let ct1 = points.getItem(i)
         const ct2 = points.getItem(i + 1)
@@ -321,917 +316,943 @@ export const pathActionsMethod = (function () {
     return element
   }
 
-  return (/** @lends module:path.pathActions */ {
-    /**
-    * @param {MouseEvent} evt
-    * @param {Element} mouseTarget
-    * @param {Float} startX
-    * @param {Float} startY
-    * @returns {boolean|void}
-    */
-    mouseDown (evt, mouseTarget, startX, startY) {
-      let id
-      if (svgCanvas.getCurrentMode() === 'path') {
-        let mouseX = startX // Was this meant to work with the other `mouseX`? (was defined globally so adding `let` to at least avoid a global)
-        let mouseY = startY // Was this meant to work with the other `mouseY`? (was defined globally so adding `let` to at least avoid a global)
-
-        const zoom = svgCanvas.getZoom()
-        let x = mouseX / zoom
-        let y = mouseY / zoom
-        let stretchy = getElement('path_stretch_line')
-        newPoint = [x, y]
-
-        if (svgCanvas.getGridSnapping()) {
-          x = snapToGrid(x)
-          y = snapToGrid(y)
-          mouseX = snapToGrid(mouseX)
-          mouseY = snapToGrid(mouseY)
-        }
+  /**
+  * @param {MouseEvent} evt
+  * @param {Element} mouseTarget
+  * @param {Float} startX
+  * @param {Float} startY
+  * @returns {boolean|void}
+  */
+  mouseDown (evt, mouseTarget, startX, startY) {
+    let id
+    if (svgCanvas.getCurrentMode() === 'path') {
+      let mouseX = startX // Was this meant to work with the other `mouseX`? (was defined globally so adding `let` to at least avoid a global)
+      let mouseY = startY // Was this meant to work with the other `mouseY`? (was defined globally so adding `let` to at least avoid a global)
 
-        if (!stretchy) {
-          stretchy = document.createElementNS(NS.SVG, 'path')
-          assignAttributes(stretchy, {
-            id: 'path_stretch_line',
-            stroke: '#22C',
-            'stroke-width': '0.5',
-            fill: 'none'
-          })
-          getElement('selectorParentGroup').append(stretchy)
-        }
-        stretchy.setAttribute('display', 'inline')
-
-        let keep = null
-        let index
-        // if pts array is empty, create path element with M at current point
-        const drawnPath = svgCanvas.getDrawnPath()
-        if (!drawnPath) {
-          const dAttr = 'M' + x + ',' + y + ' ' // Was this meant to work with the other `dAttr`? (was defined globally so adding `var` to at least avoid a global)
-          /* drawnPath = */ svgCanvas.setDrawnPath(svgCanvas.addSVGElementsFromJson({
-            element: 'path',
-            curStyles: true,
-            attr: {
-              d: dAttr,
-              id: svgCanvas.getNextId(),
-              opacity: svgCanvas.getOpacity() / 2
-            }
-          }))
-          // set stretchy line to first point
-          stretchy.setAttribute('d', ['M', mouseX, mouseY, mouseX, mouseY].join(' '))
-          index = subpath ? path.segs.length : 0
-          svgCanvas.addPointGrip(index, mouseX, mouseY)
-        } else {
-          // determine if we clicked on an existing point
-          const seglist = drawnPath.pathSegList
-          let i = seglist.numberOfItems
-          const FUZZ = 6 / zoom
-          let clickOnPoint = false
-          while (i) {
-            i--
-            const item = seglist.getItem(i)
-            const px = item.x; const py = item.y
-            // found a matching point
-            if (x >= (px - FUZZ) && x <= (px + FUZZ) &&
+      const zoom = svgCanvas.getZoom()
+      let x = mouseX / zoom
+      let y = mouseY / zoom
+      let stretchy = getElement('path_stretch_line')
+      this.#newPoint = [x, y]
+
+      if (svgCanvas.getGridSnapping()) {
+        x = snapToGrid(x)
+        y = snapToGrid(y)
+        mouseX = snapToGrid(mouseX)
+        mouseY = snapToGrid(mouseY)
+      }
+
+      if (!stretchy) {
+        stretchy = document.createElementNS(NS.SVG, 'path')
+        assignAttributes(stretchy, {
+          id: 'path_stretch_line',
+          stroke: '#22C',
+          'stroke-width': '0.5',
+          fill: 'none'
+        })
+        getElement('selectorParentGroup').append(stretchy)
+      }
+      stretchy.setAttribute('display', 'inline')
+
+      let keep = null
+      let index
+      // if pts array is empty, create path element with M at current point
+      const drawnPath = svgCanvas.getDrawnPath()
+      if (!drawnPath) {
+        const dAttr = `M${x},${y} `
+        /* drawnPath = */ svgCanvas.setDrawnPath(svgCanvas.addSVGElementsFromJson({
+          element: 'path',
+          curStyles: true,
+          attr: {
+            d: dAttr,
+            id: svgCanvas.getNextId(),
+            opacity: svgCanvas.getOpacity() / 2
+          }
+        }))
+        // set stretchy line to first point
+        stretchy.setAttribute('d', `M${mouseX} ${mouseY} ${mouseX} ${mouseY}`)
+        index = this.#subpath ? path.segs.length : 0
+        svgCanvas.addPointGrip(index, mouseX, mouseY)
+      } else {
+        // determine if we clicked on an existing point
+        const seglist = drawnPath.pathSegList
+        let i = seglist.numberOfItems
+        const FUZZ = 6 / zoom
+        let clickOnPoint = false
+        while (i) {
+          i--
+          const item = seglist.getItem(i)
+          const px = item.x; const py = item.y
+          // found a matching point
+          if (x >= (px - FUZZ) && x <= (px + FUZZ) &&
               y >= (py - FUZZ) && y <= (py + FUZZ)
-            ) {
-              clickOnPoint = true
-              break
-            }
+          ) {
+            clickOnPoint = true
+            break
+          }
+        }
+
+        // get path element that we are in the process of creating
+        id = svgCanvas.getId()
+
+        // Remove previous path object if previously created
+        svgCanvas.removePath_(id)
+
+        const newpath = getElement(id)
+        let newseg
+        let sSeg
+        const len = seglist.numberOfItems
+        // if we clicked on an existing point, then we are done this path, commit it
+        // (i, i+1) are the x,y that were clicked on
+        if (clickOnPoint) {
+          // if clicked on any other point but the first OR
+          // the first point was clicked on and there are less than 3 points
+          // then leave the path open
+          // otherwise, close the path
+          if (i <= 1 && len >= 2) {
+            // Create end segment
+            const absX = seglist.getItem(0).x
+            const absY = seglist.getItem(0).y
+
+            sSeg = stretchy.pathSegList.getItem(1)
+            newseg = sSeg.pathSegType === 4
+              ? drawnPath.createSVGPathSegLinetoAbs(absX, absY)
+              : drawnPath.createSVGPathSegCurvetoCubicAbs(absX, absY, sSeg.x1 / zoom, sSeg.y1 / zoom, absX, absY)
+
+            const endseg = drawnPath.createSVGPathSegClosePath()
+            seglist.appendItem(newseg)
+            seglist.appendItem(endseg)
+          } else if (len < 3) {
+            keep = false
+            return keep
           }
+          stretchy.remove()
 
-          // get path element that we are in the process of creating
-          id = svgCanvas.getId()
-
-          // Remove previous path object if previously created
-          svgCanvas.removePath_(id)
-
-          const newpath = getElement(id)
-          let newseg
-          let sSeg
-          const len = seglist.numberOfItems
-          // if we clicked on an existing point, then we are done this path, commit it
-          // (i, i+1) are the x,y that were clicked on
-          if (clickOnPoint) {
-            // if clicked on any other point but the first OR
-            // the first point was clicked on and there are less than 3 points
-            // then leave the path open
-            // otherwise, close the path
-            if (i <= 1 && len >= 2) {
-              // Create end segment
-              const absX = seglist.getItem(0).x
-              const absY = seglist.getItem(0).y
-
-              sSeg = stretchy.pathSegList.getItem(1)
-              newseg = sSeg.pathSegType === 4
-                ? drawnPath.createSVGPathSegLinetoAbs(absX, absY)
-                : drawnPath.createSVGPathSegCurvetoCubicAbs(absX, absY, sSeg.x1 / zoom, sSeg.y1 / zoom, absX, absY)
-
-              const endseg = drawnPath.createSVGPathSegClosePath()
-              seglist.appendItem(newseg)
-              seglist.appendItem(endseg)
-            } else if (len < 3) {
-              keep = false
-              return keep
+          // This will signal to commit the path
+          // const element = newpath; // Other event handlers define own `element`, so this was probably not meant to interact with them or one which shares state (as there were none); I therefore adding a missing `var` to avoid a global
+          /* drawnPath = */ svgCanvas.setDrawnPath(null)
+          svgCanvas.setStarted(false)
+
+          if (this.#subpath) {
+            if (path.matrix) {
+              svgCanvas.remapElement(newpath, {}, path.matrix.inverse())
             }
-            stretchy.remove()
-
-            // This will signal to commit the path
-            // const element = newpath; // Other event handlers define own `element`, so this was probably not meant to interact with them or one which shares state (as there were none); I therefore adding a missing `var` to avoid a global
-            /* drawnPath = */ svgCanvas.setDrawnPath(null)
-            svgCanvas.setStarted(false)
-
-            if (subpath) {
-              if (path.matrix) {
-                svgCanvas.remapElement(newpath, {}, path.matrix.inverse())
-              }
-
-              const newD = newpath.getAttribute('d')
-              const origD = path.elem.getAttribute('d')
-              path.elem.setAttribute('d', origD + newD)
-              newpath.parentNode.removeChild(newpath)
-              if (path.matrix) {
-                svgCanvas.recalcRotatedPath()
-              }
-              pathActionsMethod.toEditMode(path.elem)
-              path.selectPt()
-              return false
+
+            const newD = newpath.getAttribute('d')
+            const origD = path.elem.getAttribute('d')
+            path.elem.setAttribute('d', origD + newD)
+            newpath.parentNode.removeChild(newpath)
+            if (path.matrix) {
+              svgCanvas.recalcRotatedPath()
             }
+            pathActionsMethod.toEditMode(path.elem)
+            path.selectPt()
+            return false
+          }
           // else, create a new point, update path element
-          } else {
-            // Checks if current target or parents are #svgcontent
-            if (!(svgCanvas.getContainer() !== svgCanvas.getMouseTarget(evt) && svgCanvas.getContainer().contains(
-              svgCanvas.getMouseTarget(evt)
-            ))) {
-              // Clicked outside canvas, so don't make point
-              return false
-            }
-
-            const num = drawnPath.pathSegList.numberOfItems
-            const last = drawnPath.pathSegList.getItem(num - 1)
-            const lastx = last.x; const lasty = last.y
+        } else {
+          // Checks if current target or parents are #svgcontent
+          if (!(svgCanvas.getContainer() !== svgCanvas.getMouseTarget(evt) && svgCanvas.getContainer().contains(
+            svgCanvas.getMouseTarget(evt)
+          ))) {
+            // Clicked outside canvas, so don't make point
+            return false
+          }
 
-            if (evt.shiftKey) {
-              const xya = snapToAngle(lastx, lasty, x, y);
-              ({ x, y } = xya)
-            }
+          const num = drawnPath.pathSegList.numberOfItems
+          const last = drawnPath.pathSegList.getItem(num - 1)
+          const lastx = last.x; const lasty = last.y
 
-            // Use the segment defined by stretchy
-            sSeg = stretchy.pathSegList.getItem(1)
-            newseg = sSeg.pathSegType === 4
-              ? drawnPath.createSVGPathSegLinetoAbs(svgCanvas.round(x), svgCanvas.round(y))
-              : drawnPath.createSVGPathSegCurvetoCubicAbs(
-                svgCanvas.round(x),
-                svgCanvas.round(y),
-                sSeg.x1 / zoom,
-                sSeg.y1 / zoom,
-                sSeg.x2 / zoom,
-                sSeg.y2 / zoom
-              )
-
-            drawnPath.pathSegList.appendItem(newseg)
-
-            x *= zoom
-            y *= zoom
-
-            // set stretchy line to latest point
-            stretchy.setAttribute('d', ['M', x, y, x, y].join(' '))
-            index = num
-            if (subpath) { index += path.segs.length }
-            svgCanvas.addPointGrip(index, x, y)
+          if (evt.shiftKey) {
+            const xya = snapToAngle(lastx, lasty, x, y);
+            ({ x, y } = xya)
           }
-          // keep = true;
-        }
 
-        return undefined
+          // Use the segment defined by stretchy
+          sSeg = stretchy.pathSegList.getItem(1)
+          newseg = sSeg.pathSegType === 4
+            ? drawnPath.createSVGPathSegLinetoAbs(svgCanvas.round(x), svgCanvas.round(y))
+            : drawnPath.createSVGPathSegCurvetoCubicAbs(
+              svgCanvas.round(x),
+              svgCanvas.round(y),
+              sSeg.x1 / zoom,
+              sSeg.y1 / zoom,
+              sSeg.x2 / zoom,
+              sSeg.y2 / zoom
+            )
+
+          drawnPath.pathSegList.appendItem(newseg)
+
+          x *= zoom
+          y *= zoom
+
+          // set stretchy line to latest point
+          stretchy.setAttribute('d', ['M', x, y, x, y].join(' '))
+          index = num
+          if (this.#subpath) { index += path.segs.length }
+          svgCanvas.addPointGrip(index, x, y)
+        }
+        // keep = true;
       }
 
-      // TODO: Make sure currentPath isn't null at this point
-      if (!path) { return undefined }
+      return undefined
+    }
+
+    // TODO: Make sure currentPath isn't null at this point
+    if (!path) { return undefined }
 
-      path.storeD();
+    path.storeD();
 
-      ({ id } = evt.target)
-      let curPt
-      if (id.substr(0, 14) === 'pathpointgrip_') {
-        // Select this point
-        curPt = path.cur_pt = Number.parseInt(id.substr(14))
-        path.dragging = [startX, startY]
-        const seg = path.segs[curPt]
+    ({ id } = evt.target)
+    let curPt
+    if (id.startsWith('pathpointgrip_')) {
+      // Select this point
+      curPt = path.cur_pt = Number.parseInt(id.slice(14))
+      path.dragging = [startX, startY]
+      const seg = path.segs[curPt]
 
-        // only clear selection if shift is not pressed (otherwise, add
-        // node to selection)
-        if (!evt.shiftKey) {
-          if (path.selected_pts.length <= 1 || !seg.selected) {
-            path.clearSelection()
-          }
-          path.addPtsToSelection(curPt)
-        } else if (seg.selected) {
-          path.removePtFromSelection(curPt)
-        } else {
-          path.addPtsToSelection(curPt)
+      // only clear selection if shift is not pressed (otherwise, add
+      // node to selection)
+      if (!evt.shiftKey) {
+        if (path.selected_pts.length <= 1 || !seg.selected) {
+          path.clearSelection()
         }
-      } else if (id.startsWith('ctrlpointgrip_')) {
-        path.dragging = [startX, startY]
-
-        const parts = id.split('_')[1].split('c')
-        curPt = Number(parts[0])
-        const ctrlNum = Number(parts[1])
-        path.selectPt(curPt, ctrlNum)
+        path.addPtsToSelection(curPt)
+      } else if (seg.selected) {
+        path.removePtFromSelection(curPt)
+      } else {
+        path.addPtsToSelection(curPt)
       }
+    } else if (id.startsWith('ctrlpointgrip_')) {
+      path.dragging = [startX, startY]
 
-      // Start selection box
-      if (!path.dragging) {
-        let rubberBox = svgCanvas.getRubberBox()
-        if (!rubberBox) {
-          rubberBox = svgCanvas.setRubberBox(
-            svgCanvas.selectorManager.getRubberBandBox()
-          )
-        }
-        const zoom = svgCanvas.getZoom()
-        assignAttributes(rubberBox, {
-          x: startX * zoom,
-          y: startY * zoom,
-          width: 0,
-          height: 0,
-          display: 'inline'
-        }, 100)
+      const parts = id.split('_')[1].split('c')
+      curPt = Number(parts[0])
+      const ctrlNum = Number(parts[1])
+      path.selectPt(curPt, ctrlNum)
+    }
+
+    // Start selection box
+    if (!path.dragging) {
+      let rubberBox = svgCanvas.getRubberBox()
+      if (!rubberBox) {
+        rubberBox = svgCanvas.setRubberBox(
+          svgCanvas.selectorManager.getRubberBandBox()
+        )
       }
-      return undefined
-    },
-    /**
+      const zoom = svgCanvas.getZoom()
+      assignAttributes(rubberBox, {
+        x: startX * zoom,
+        y: startY * zoom,
+        width: 0,
+        height: 0,
+        display: 'inline'
+      }, 100)
+    }
+    return undefined
+  }
+
+  /**
     * @param {Float} mouseX
     * @param {Float} mouseY
     * @returns {void}
     */
-    mouseMove (mouseX, mouseY) {
-      const zoom = svgCanvas.getZoom()
-      hasMoved = true
-      const drawnPath = svgCanvas.getDrawnPath()
-      if (svgCanvas.getCurrentMode() === 'path') {
-        if (!drawnPath) { return }
-        const seglist = drawnPath.pathSegList
-        const index = seglist.numberOfItems - 1
-
-        if (newPoint) {
-          // First point
-          // if (!index) { return; }
-
-          // Set control points
-          const pointGrip1 = svgCanvas.addCtrlGrip('1c1')
-          const pointGrip2 = svgCanvas.addCtrlGrip('0c2')
-
-          // dragging pointGrip1
-          pointGrip1.setAttribute('cx', mouseX)
-          pointGrip1.setAttribute('cy', mouseY)
-          pointGrip1.setAttribute('display', 'inline')
-
-          const ptX = newPoint[0]
-          const ptY = newPoint[1]
-
-          // set curve
-          // const seg = seglist.getItem(index);
-          const curX = mouseX / zoom
-          const curY = mouseY / zoom
-          const altX = (ptX + (ptX - curX))
-          const altY = (ptY + (ptY - curY))
-
-          pointGrip2.setAttribute('cx', altX * zoom)
-          pointGrip2.setAttribute('cy', altY * zoom)
-          pointGrip2.setAttribute('display', 'inline')
-
-          const ctrlLine = svgCanvas.getCtrlLine(1)
-          assignAttributes(ctrlLine, {
-            x1: mouseX,
-            y1: mouseY,
-            x2: altX * zoom,
-            y2: altY * zoom,
-            display: 'inline'
-          })
-
-          if (index === 0) {
-            firstCtrl = [mouseX, mouseY]
-          } else {
-            const last = seglist.getItem(index - 1)
-            let lastX = last.x
-            let lastY = last.y
-
-            if (last.pathSegType === 6) {
-              lastX += (lastX - last.x2)
-              lastY += (lastY - last.y2)
-            } else if (firstCtrl) {
-              lastX = firstCtrl[0] / zoom
-              lastY = firstCtrl[1] / zoom
-            }
-            svgCanvas.replacePathSeg(6, index, [ptX, ptY, lastX, lastY, altX, altY], drawnPath)
-          }
+  mouseMove (mouseX, mouseY) {
+    const zoom = svgCanvas.getZoom()
+    this.#hasMoved = true
+    const drawnPath = svgCanvas.getDrawnPath()
+    if (svgCanvas.getCurrentMode() === 'path') {
+      if (!drawnPath) { return }
+      const seglist = drawnPath.pathSegList
+      const index = seglist.numberOfItems - 1
+
+      if (this.#newPoint) {
+        // First point
+        // if (!index) { return; }
+
+        // Set control points
+        const pointGrip1 = svgCanvas.addCtrlGrip('1c1')
+        const pointGrip2 = svgCanvas.addCtrlGrip('0c2')
+
+        // dragging pointGrip1
+        pointGrip1.setAttribute('cx', mouseX)
+        pointGrip1.setAttribute('cy', mouseY)
+        pointGrip1.setAttribute('display', 'inline')
+
+        const ptX = this.#newPoint[0]
+        const ptY = this.#newPoint[1]
+
+        // set curve
+        // const seg = seglist.getItem(index);
+        const curX = mouseX / zoom
+        const curY = mouseY / zoom
+        const altX = (ptX + (ptX - curX))
+        const altY = (ptY + (ptY - curY))
+
+        pointGrip2.setAttribute('cx', altX * zoom)
+        pointGrip2.setAttribute('cy', altY * zoom)
+        pointGrip2.setAttribute('display', 'inline')
+
+        const ctrlLine = svgCanvas.getCtrlLine(1)
+        assignAttributes(ctrlLine, {
+          x1: mouseX,
+          y1: mouseY,
+          x2: altX * zoom,
+          y2: altY * zoom,
+          display: 'inline'
+        })
+
+        if (index === 0) {
+          this.#firstCtrl = [mouseX, mouseY]
         } else {
-          const stretchy = getElement('path_stretch_line')
-          if (stretchy) {
-            const prev = seglist.getItem(index)
-            if (prev.pathSegType === 6) {
-              const prevX = prev.x + (prev.x - prev.x2)
-              const prevY = prev.y + (prev.y - prev.y2)
-              svgCanvas.replacePathSeg(
-                6,
-                1,
-                [mouseX, mouseY, prevX * zoom, prevY * zoom, mouseX, mouseY],
-                stretchy
-              )
-            } else if (firstCtrl) {
-              svgCanvas.replacePathSeg(6, 1, [mouseX, mouseY, firstCtrl[0], firstCtrl[1], mouseX, mouseY], stretchy)
-            } else {
-              svgCanvas.replacePathSeg(4, 1, [mouseX, mouseY], stretchy)
-            }
+          const last = seglist.getItem(index - 1)
+          let lastX = last.x
+          let lastY = last.y
+
+          if (last.pathSegType === 6) {
+            lastX += (lastX - last.x2)
+            lastY += (lastY - last.y2)
+          } else if (this.#firstCtrl) {
+            lastX = this.#firstCtrl[0] / zoom
+            lastY = this.#firstCtrl[1] / zoom
           }
-        }
-        return
-      }
-      // if we are dragging a point, let's move it
-      if (path.dragging) {
-        const pt = svgCanvas.getPointFromGrip({
-          x: path.dragging[0],
-          y: path.dragging[1]
-        }, path)
-        const mpt = svgCanvas.getPointFromGrip({
-          x: mouseX,
-          y: mouseY
-        }, path)
-        const diffX = mpt.x - pt.x
-        const diffY = mpt.y - pt.y
-        path.dragging = [mouseX, mouseY]
-
-        if (path.dragctrl) {
-          path.moveCtrl(diffX, diffY)
-        } else {
-          path.movePts(diffX, diffY)
+          svgCanvas.replacePathSeg(6, index, [ptX, ptY, lastX, lastY, altX, altY], drawnPath)
         }
       } else {
-        path.selected_pts = []
-        path.eachSeg(function (_i) {
-          const seg = this
-          if (!seg.next && !seg.prev) { return }
-
-          // const {item} = seg;
-          const rubberBox = svgCanvas.getRubberBox()
-          const rbb = getBBox(rubberBox)
-
-          const pt = svgCanvas.getGripPt(seg)
-          const ptBb = {
-            x: pt.x,
-            y: pt.y,
-            width: 0,
-            height: 0
+        const stretchy = getElement('path_stretch_line')
+        if (stretchy) {
+          const prev = seglist.getItem(index)
+          if (prev.pathSegType === 6) {
+            const prevX = prev.x + (prev.x - prev.x2)
+            const prevY = prev.y + (prev.y - prev.y2)
+            svgCanvas.replacePathSeg(
+              6,
+              1,
+              [mouseX, mouseY, prevX * zoom, prevY * zoom, mouseX, mouseY],
+              stretchy
+            )
+          } else if (this.#firstCtrl) {
+            svgCanvas.replacePathSeg(6, 1, [mouseX, mouseY, this.#firstCtrl[0], this.#firstCtrl[1], mouseX, mouseY], stretchy)
+          } else {
+            svgCanvas.replacePathSeg(4, 1, [mouseX, mouseY], stretchy)
           }
+        }
+      }
+      return
+    }
+    // if we are dragging a point, let's move it
+    if (path.dragging) {
+      const pt = svgCanvas.getPointFromGrip({
+        x: path.dragging[0],
+        y: path.dragging[1]
+      }, path)
+      const mpt = svgCanvas.getPointFromGrip({
+        x: mouseX,
+        y: mouseY
+      }, path)
+      const diffX = mpt.x - pt.x
+      const diffY = mpt.y - pt.y
+      path.dragging = [mouseX, mouseY]
+
+      if (path.dragctrl) {
+        path.moveCtrl(diffX, diffY)
+      } else {
+        path.movePts(diffX, diffY)
+      }
+    } else {
+      path.selected_pts = []
+      path.eachSeg(function (_i) {
+        const seg = this
+        if (!seg.next && !seg.prev) return
+
+        // const {item} = seg;
+        const rubberBox = svgCanvas.getRubberBox()
+        const rbb = getBBox(rubberBox)
+
+        const pt = svgCanvas.getGripPt(seg)
+        const ptBb = {
+          x: pt.x,
+          y: pt.y,
+          width: 0,
+          height: 0
+        }
 
-          const sel = rectsIntersect(rbb, ptBb)
+        const sel = rectsIntersect(rbb, ptBb)
 
-          this.select(sel)
-          // Note that addPtsToSelection is not being run
-          if (sel) { path.selected_pts.push(seg.index) }
-        })
-      }
-    },
-    /**
+        this.select(sel)
+        // Note that addPtsToSelection is not being run
+        if (sel) { path.selected_pts.push(seg.index) }
+      })
+    }
+  }
+
+  /**
      * @typedef module:path.keepElement
      * @type {PlainObject}
      * @property {boolean} keep
      * @property {Element} element
      */
-    /**
+  /**
     * @param {Event} evt
     * @param {Element} element
     * @param {Float} _mouseX
     * @param {Float} _mouseY
     * @returns {module:path.keepElement|void}
     */
-    mouseUp (evt, element, _mouseX, _mouseY) {
-      const drawnPath = svgCanvas.getDrawnPath()
-      // Create mode
-      if (svgCanvas.getCurrentMode() === 'path') {
-        newPoint = null
-        if (!drawnPath) {
-          element = getElement(svgCanvas.getId())
-          svgCanvas.setStarted(false)
-          firstCtrl = null
-        }
-
-        return {
-          keep: true,
-          element
-        }
+  mouseUp (evt, element, _mouseX, _mouseY) {
+    const drawnPath = svgCanvas.getDrawnPath()
+    // Create mode
+    if (svgCanvas.getCurrentMode() === 'path') {
+      this.#newPoint = null
+      if (!drawnPath) {
+        element = getElement(svgCanvas.getId())
+        svgCanvas.setStarted(false)
+        this.#firstCtrl = null
       }
 
-      // Edit mode
-      const rubberBox = svgCanvas.getRubberBox()
-      if (path.dragging) {
-        const lastPt = path.cur_pt
+      return {
+        keep: true,
+        element
+      }
+    }
 
-        path.dragging = false
-        path.dragctrl = false
-        path.update()
+    // Edit mode
+    const rubberBox = svgCanvas.getRubberBox()
+    if (path.dragging) {
+      const lastPt = path.cur_pt
 
-        if (hasMoved) {
-          path.endChanges('Move path point(s)')
-        }
+      path.dragging = false
+      path.dragctrl = false
+      path.update()
 
-        if (!evt.shiftKey && !hasMoved) {
-          path.selectPt(lastPt)
-        }
-      } else if (rubberBox?.getAttribute('display') !== 'none') {
-        // Done with multi-node-select
-        rubberBox.setAttribute('display', 'none')
+      if (this.#hasMoved) {
+        path.endChanges('Move path point(s)')
+      }
 
-        if (rubberBox.getAttribute('width') <= 2 && rubberBox.getAttribute('height') <= 2) {
-          pathActionsMethod.toSelectMode(evt.target)
-        }
+      if (!evt.shiftKey && !this.#hasMoved) {
+        path.selectPt(lastPt)
+      }
+    } else if (rubberBox?.getAttribute('display') !== 'none') {
+      // Done with multi-node-select
+      rubberBox.setAttribute('display', 'none')
 
-      // else, move back to select mode
-      } else {
+      if (rubberBox.getAttribute('width') <= 2 && rubberBox.getAttribute('height') <= 2) {
         pathActionsMethod.toSelectMode(evt.target)
       }
-      hasMoved = false
-      return undefined
-    },
-    /**
+
+      // else, move back to select mode
+    } else {
+      pathActionsMethod.toSelectMode(evt.target)
+    }
+    this.#hasMoved = false
+    return undefined
+  }
+
+  /**
     * @param {Element} element
     * @returns {void}
     */
-    toEditMode (element) {
-      path = svgCanvas.getPath_(element)
-      svgCanvas.setCurrentMode('pathedit')
-      svgCanvas.clearSelection()
-      path.setPathContext()
-      path.show(true).update()
-      path.oldbbox = getBBox(path.elem)
-      subpath = false
-    },
-    /**
+  toEditMode (element) {
+    path = svgCanvas.getPath_(element)
+    svgCanvas.setCurrentMode('pathedit')
+    svgCanvas.clearSelection()
+    path.setPathContext()
+    path.show(true).update()
+    path.oldbbox = getBBox(path.elem)
+    this.#subpath = false
+  }
+
+  /**
     * @param {Element} elem
     * @fires module:svgcanvas.SvgCanvas#event:selected
     * @returns {void}
     */
-    toSelectMode (elem) {
-      const selPath = (elem === path.elem)
-      svgCanvas.setCurrentMode('select')
-      path.setPathContext()
-      path.show(false)
-      currentPath = false
-      svgCanvas.clearSelection()
-
-      if (path.matrix) {
-        // Rotated, so may need to re-calculate the center
-        svgCanvas.recalcRotatedPath()
-      }
+  toSelectMode (elem) {
+    const selPath = (elem === path.elem)
+    svgCanvas.setCurrentMode('select')
+    path.setPathContext()
+    path.show(false)
+    this.#currentPath = false
+    svgCanvas.clearSelection()
+
+    if (path.matrix) {
+      // Rotated, so may need to re-calculate the center
+      svgCanvas.recalcRotatedPath()
+    }
 
-      if (selPath) {
-        svgCanvas.call('selected', [elem])
-        svgCanvas.addToSelection([elem], true)
-      }
-    },
-    /**
+    if (selPath) {
+      svgCanvas.call('selected', [elem])
+      svgCanvas.addToSelection([elem], true)
+    }
+  }
+
+  /**
     * @param {boolean} on
     * @returns {void}
     */
-    addSubPath (on) {
-      if (on) {
-        // Internally we go into "path" mode, but in the UI it will
-        // still appear as if in "pathedit" mode.
-        svgCanvas.setCurrentMode('path')
-        subpath = true
-      } else {
-        pathActionsMethod.clear(true)
-        pathActionsMethod.toEditMode(path.elem)
-      }
-    },
-    /**
+  addSubPath (on) {
+    if (on) {
+      // Internally we go into "path" mode, but in the UI it will
+      // still appear as if in "pathedit" mode.
+      svgCanvas.setCurrentMode('path')
+      this.#subpath = true
+    } else {
+      pathActionsMethod.clear(true)
+      pathActionsMethod.toEditMode(path.elem)
+    }
+  }
+
+  /**
     * @param {Element} target
     * @returns {void}
     */
-    select (target) {
-      if (currentPath === target) {
-        pathActionsMethod.toEditMode(target)
-        svgCanvas.setCurrentMode('pathedit')
+  select (target) {
+    if (this.#currentPath === target) {
+      pathActionsMethod.toEditMode(target)
+      svgCanvas.setCurrentMode('pathedit')
       // going into pathedit mode
-      } else {
-        currentPath = target
-      }
-    },
-    /**
+    } else {
+      this.#currentPath = target
+    }
+  }
+
+  /**
     * @fires module:svgcanvas.SvgCanvas#event:changed
     * @returns {void}
     */
-    reorient () {
-      const elem = svgCanvas.getSelectedElements()[0]
-      if (!elem) { return }
-      const angl = getRotationAngle(elem)
-      if (angl === 0) { return }
-
-      const batchCmd = new BatchCommand('Reorient path')
-      const changes = {
-        d: elem.getAttribute('d'),
-        transform: elem.getAttribute('transform')
-      }
-      batchCmd.addSubCommand(new ChangeElementCommand(elem, changes))
-      svgCanvas.clearSelection()
-      this.resetOrientation(elem)
+  reorient () {
+    const elem = svgCanvas.getSelectedElements()[0]
+    if (!elem) { return }
+    if (elem.nodeName !== 'path') { return }
+    const angl = getRotationAngle(elem)
+    if (angl === 0) { return }
+
+    const batchCmd = new BatchCommand('Reorient path')
+    const changes = {
+      d: elem.getAttribute('d'),
+      transform: elem.getAttribute('transform')
+    }
+    batchCmd.addSubCommand(new ChangeElementCommand(elem, changes))
+    svgCanvas.clearSelection()
+    this.resetOrientation(elem)
 
-      svgCanvas.addCommandToHistory(batchCmd)
+    svgCanvas.addCommandToHistory(batchCmd)
 
-      // Set matrix to null
-      svgCanvas.getPath_(elem).show(false).matrix = null
+    // Set matrix to null
+    svgCanvas.getPath_(elem).show(false).matrix = null
 
-      this.clear()
+    this.clear()
 
-      svgCanvas.addToSelection([elem], true)
-      svgCanvas.call('changed', svgCanvas.getSelectedElements())
-    },
+    svgCanvas.addToSelection([elem], true)
+    svgCanvas.call('changed', svgCanvas.getSelectedElements())
+  }
 
-    /**
+  /**
     * @param {boolean} remove Not in use
     * @returns {void}
     */
-    clear () {
-      const drawnPath = svgCanvas.getDrawnPath()
-      currentPath = null
-      if (drawnPath) {
-        const elem = getElement(svgCanvas.getId())
-        const psl = getElement('path_stretch_line')
-        psl.parentNode.removeChild(psl)
-        elem.parentNode.removeChild(elem)
-        const pathpointgripContainer = getElement('pathpointgrip_container')
-        const elements = pathpointgripContainer.querySelectorAll('*')
-        Array.prototype.forEach.call(elements, function (el) {
-          el.setAttribute('display', 'none')
-        })
-        firstCtrl = null
-        svgCanvas.setDrawnPath(null)
-        svgCanvas.setStarted(false)
-      } else if (svgCanvas.getCurrentMode() === 'pathedit') {
-        this.toSelectMode()
+  clear () {
+    const drawnPath = svgCanvas.getDrawnPath()
+    this.#currentPath = null
+    if (drawnPath) {
+      const elem = getElement(svgCanvas.getId())
+      const psl = getElement('path_stretch_line')
+      psl.parentNode.removeChild(psl)
+      elem.parentNode.removeChild(elem)
+      const pathpointgripContainer = getElement('pathpointgrip_container')
+      const elements = pathpointgripContainer.querySelectorAll('*')
+      for (const el of elements) {
+        el.setAttribute('display', 'none')
       }
-      if (path) { path.init().show(false) }
-    },
-    /**
+      this.#firstCtrl = null
+      svgCanvas.setDrawnPath(null)
+      svgCanvas.setStarted(false)
+    } else if (svgCanvas.getCurrentMode() === 'pathedit') {
+      this.toSelectMode()
+    }
+    if (path) { path.init().show(false) }
+  }
+
+  /**
     * @param {?(Element|SVGPathElement)} pth
     * @returns {false|void}
     */
-    resetOrientation (pth) {
-      if (pth?.nodeName !== 'path') { return false }
-      const tlist = getTransformList(pth)
-      const m = transformListToTransform(tlist).matrix
-      tlist.clear()
-      pth.removeAttribute('transform')
-      const segList = pth.pathSegList
-
-      // Opera/win/non-EN throws an error here.
-      // TODO: Find out why!
-      // Presumed fixed in Opera 10.5, so commented out for now
-
-      // try {
-      const len = segList.numberOfItems
-      // } catch(err) {
-      //   const fixed_d = pathActions.convertPath(pth);
-      //   pth.setAttribute('d', fixed_d);
-      //   segList = pth.pathSegList;
-      //   const len = segList.numberOfItems;
-      // }
-      // let lastX, lastY;
-      for (let i = 0; i < len; ++i) {
-        const seg = segList.getItem(i)
-        const type = seg.pathSegType
-        if (type === 1) { continue }
-        const pts = [];
-        ['', 1, 2].forEach(function (n) {
-          const x = seg['x' + n]; const y = seg['y' + n]
-          if (x !== undefined && y !== undefined) {
-            const pt = transformPoint(x, y, m)
-            pts.splice(pts.length, 0, pt.x, pt.y)
-          }
-        })
-        svgCanvas.replacePathSeg(type, i, pts, pth)
+  resetOrientation (pth) {
+    if (pth?.nodeName !== 'path') { return false }
+    const tlist = getTransformList(pth)
+    const m = transformListToTransform(tlist).matrix
+    tlist.clear()
+    pth.removeAttribute('transform')
+    const segList = pth.pathSegList
+
+    // Opera/win/non-EN throws an error here.
+    // TODO: Find out why!
+    // Presumed fixed in Opera 10.5, so commented out for now
+
+    // try {
+    const len = segList.numberOfItems
+    // } catch(err) {
+    //   const fixed_d = pathActions.convertPath(pth);
+    //   pth.setAttribute('d', fixed_d);
+    //   segList = pth.pathSegList;
+    //   const len = segList.numberOfItems;
+    // }
+    // let lastX, lastY;
+    for (let i = 0; i < len; ++i) {
+      const seg = segList.getItem(i)
+      const type = seg.pathSegType
+      if (type === 1) { continue }
+      const pts = []
+      for (const n of ['', 1, 2]) {
+        const x = seg['x' + n]
+        const y = seg['y' + n]
+        if (x !== undefined && y !== undefined) {
+          const pt = transformPoint(x, y, m)
+          pts.push(pt.x, pt.y)
+        }
       }
+      svgCanvas.replacePathSeg(type, i, pts, pth)
+    }
 
-      svgCanvas.reorientGrads(pth, m)
-      return undefined
-    },
-    /**
+    svgCanvas.reorientGrads(pth, m)
+    return undefined
+  }
+
+  /**
     * @returns {void}
     */
-    zoomChange () {
-      if (svgCanvas.getCurrentMode() === 'pathedit') {
-        path.update()
-      }
-    },
-    /**
+  zoomChange () {
+    if (svgCanvas.getCurrentMode() === 'pathedit') {
+      path.update()
+    }
+  }
+
+  /**
     * @typedef {PlainObject} module:path.NodePoint
     * @property {Float} x
     * @property {Float} y
     * @property {Integer} type
     */
-    /**
+  /**
     * @returns {module:path.NodePoint}
     */
-    getNodePoint () {
-      const selPt = path.selected_pts.length ? path.selected_pts[0] : 1
+  getNodePoint () {
+    const selPt = path.selected_pts.length ? path.selected_pts[0] : 1
+
+    const seg = path.segs[selPt]
+    return {
+      x: seg.item.x,
+      y: seg.item.y,
+      type: seg.type
+    }
+  }
 
-      const seg = path.segs[selPt]
-      return {
-        x: seg.item.x,
-        y: seg.item.y,
-        type: seg.type
-      }
-    },
-    /**
+  /**
     * @param {boolean} linkPoints
     * @returns {void}
     */
-    linkControlPoints (linkPoints) {
-      svgCanvas.setLinkControlPoints(linkPoints)
-    },
-    /**
+  linkControlPoints (linkPoints) {
+    svgCanvas.setLinkControlPoints(linkPoints)
+  }
+
+  /**
     * @returns {void}
     */
-    clonePathNode () {
-      path.storeD()
+  clonePathNode () {
+    path.storeD()
 
-      const selPts = path.selected_pts
-      // const {segs} = path;
+    const selPts = path.selected_pts
+    // const {segs} = path;
 
-      let i = selPts.length
-      const nums = []
+    let i = selPts.length
+    const nums = []
 
-      while (i--) {
-        const pt = selPts[i]
-        path.addSeg(pt)
+    while (i--) {
+      const pt = selPts[i]
+      path.addSeg(pt)
 
-        nums.push(pt + i)
-        nums.push(pt + i + 1)
-      }
-      path.init().addPtsToSelection(nums)
+      nums.push(pt + i)
+      nums.push(pt + i + 1)
+    }
+    path.init().addPtsToSelection(nums)
+
+    path.endChanges('Clone path node(s)')
+  }
 
-      path.endChanges('Clone path node(s)')
-    },
-    /**
+  /**
     * @returns {void}
     */
-    opencloseSubPath () {
-      const selPts = path.selected_pts
-      // Only allow one selected node for now
-      if (selPts.length !== 1) { return }
+  opencloseSubPath () {
+    const selPts = path.selected_pts
+    // Only allow one selected node for now
+    if (selPts.length !== 1) { return }
 
-      const { elem } = path
-      const list = elem.pathSegList
+    const { elem } = path
+    const list = elem.pathSegList
 
-      // const len = list.numberOfItems;
+    // const len = list.numberOfItems;
 
-      const index = selPts[0]
+    const index = selPts[0]
 
-      let openPt = null
-      let startItem = null
-
-      // Check if subpath is already open
-      path.eachSeg(function (i) {
-        if (this.type === 2 && i <= index) {
-          startItem = this.item
-        }
-        if (i <= index) { return true }
-        if (this.type === 2) {
-          // Found M first, so open
-          openPt = i
-          return false
-        }
-        if (this.type === 1) {
-          // Found Z first, so closed
-          openPt = false
-          return false
-        }
-        return true
-      })
+    let openPt = null
+    let startItem = null
 
-      if (!openPt) {
-        // Single path, so close last seg
-        openPt = path.segs.length - 1
+    // Check if subpath is already open
+    path.eachSeg(function (i) {
+      if (this.type === 2 && i <= index) {
+        startItem = this.item
+      }
+      if (i <= index) return true
+      if (this.type === 2) {
+        // Found M first, so open
+        openPt = i
+        return false
+      }
+      if (this.type === 1) {
+        // Found Z first, so closed
+        openPt = false
+        return false
       }
+      return true
+    })
 
-      if (openPt !== false) {
-        // Close this path
+    if (!openPt) {
+      // Single path, so close last seg
+      openPt = path.segs.length - 1
+    }
 
-        // Create a line going to the previous "M"
-        const newseg = elem.createSVGPathSegLinetoAbs(startItem.x, startItem.y)
+    if (openPt !== false) {
+      // Close this path
 
-        const closer = elem.createSVGPathSegClosePath()
-        if (openPt === path.segs.length - 1) {
-          list.appendItem(newseg)
-          list.appendItem(closer)
-        } else {
-          list.insertItemBefore(closer, openPt)
-          list.insertItemBefore(newseg, openPt)
-        }
+      // Create a line going to the previous "M"
+      const newseg = elem.createSVGPathSegLinetoAbs(startItem.x, startItem.y)
 
-        path.init().selectPt(openPt + 1)
-        return
+      const closer = elem.createSVGPathSegClosePath()
+      if (openPt === path.segs.length - 1) {
+        list.appendItem(newseg)
+        list.appendItem(closer)
+      } else {
+        list.insertItemBefore(closer, openPt)
+        list.insertItemBefore(newseg, openPt)
       }
 
-      // M 1,1 L 2,2 L 3,3 L 1,1 z // open at 2,2
-      // M 2,2 L 3,3 L 1,1
+      path.init().selectPt(openPt + 1)
+      return
+    }
 
-      // M 1,1 L 2,2 L 1,1 z M 4,4 L 5,5 L6,6 L 5,5 z
-      // M 1,1 L 2,2 L 1,1 z [M 4,4] L 5,5 L(M)6,6 L 5,5 z
+    // M 1,1 L 2,2 L 3,3 L 1,1 z // open at 2,2
+    // M 2,2 L 3,3 L 1,1
 
-      const seg = path.segs[index]
+    // M 1,1 L 2,2 L 1,1 z M 4,4 L 5,5 L6,6 L 5,5 z
+    // M 1,1 L 2,2 L 1,1 z [M 4,4] L 5,5 L(M)6,6 L 5,5 z
 
-      if (seg.mate) {
-        list.removeItem(index) // Removes last "L"
-        list.removeItem(index) // Removes the "Z"
-        path.init().selectPt(index - 1)
-        return
-      }
+    const seg = path.segs[index]
 
-      let lastM; let zSeg
-
-      // Find this sub-path's closing point and remove
-      for (let i = 0; i < list.numberOfItems; i++) {
-        const item = list.getItem(i)
-
-        if (item.pathSegType === 2) {
-          // Find the preceding M
-          lastM = i
-        } else if (i === index) {
-          // Remove it
-          list.removeItem(lastM)
-          // index--;
-        } else if (item.pathSegType === 1 && index < i) {
-          // Remove the closing seg of this subpath
-          zSeg = i - 1
-          list.removeItem(i)
-          break
-        }
+    if (seg.mate) {
+      list.removeItem(index) // Removes last "L"
+      list.removeItem(index) // Removes the "Z"
+      path.init().selectPt(index - 1)
+      return
+    }
+
+    let lastM; let zSeg
+
+    // Find this sub-path's closing point and remove
+    for (let i = 0; i < list.numberOfItems; i++) {
+      const item = list.getItem(i)
+
+      if (item.pathSegType === 2) {
+        // Find the preceding M
+        lastM = i
+      } else if (i === index) {
+        // Remove it
+        list.removeItem(lastM)
+        // index--;
+      } else if (item.pathSegType === 1 && index < i) {
+        // Remove the closing seg of this subpath
+        zSeg = i - 1
+        list.removeItem(i)
+        break
       }
+    }
 
-      let num = (index - lastM) - 1
+    let num = (index - lastM) - 1
 
-      while (num--) {
-        list.insertItemBefore(list.getItem(lastM), zSeg)
-      }
+    while (num--) {
+      list.insertItemBefore(list.getItem(lastM), zSeg)
+    }
+
+    const pt = list.getItem(lastM)
 
-      const pt = list.getItem(lastM)
+    // Make this point the new "M"
+    svgCanvas.replacePathSeg(2, lastM, [pt.x, pt.y])
 
-      // Make this point the new "M"
-      svgCanvas.replacePathSeg(2, lastM, [pt.x, pt.y])
+    // i = index; // i is local here, so has no effect; what was the intent for this?
 
-      // i = index; // i is local here, so has no effect; what was the intent for this?
+    path.init().selectPt(0)
+  }
 
-      path.init().selectPt(0)
-    },
-    /**
+  /**
     * @returns {void}
     */
-    deletePathNode () {
-      if (!pathActionsMethod.canDeleteNodes) { return }
-      path.storeD()
+  deletePathNode () {
+    if (!pathActionsMethod.canDeleteNodes) { return }
+    path.storeD()
 
-      const selPts = path.selected_pts
+    const selPts = path.selected_pts
 
-      let i = selPts.length
-      while (i--) {
-        const pt = selPts[i]
-        path.deleteSeg(pt)
-      }
+    let i = selPts.length
+    while (i--) {
+      const pt = selPts[i]
+      path.deleteSeg(pt)
+    }
 
-      // Cleanup
-      const cleanup = function () {
-        const segList = path.elem.pathSegList
-        let len = segList.numberOfItems
+    // Cleanup
+    const cleanup = () => {
+      const segList = path.elem.pathSegList
+      let len = segList.numberOfItems
 
-        const remItems = function (pos, count) {
-          while (count--) {
-            segList.removeItem(pos)
-          }
+      const remItems = (pos, count) => {
+        while (count--) {
+          segList.removeItem(pos)
         }
+      }
 
-        if (len <= 1) { return true }
-
-        while (len--) {
-          const item = segList.getItem(len)
-          if (item.pathSegType === 1) {
-            const prev = segList.getItem(len - 1)
-            const nprev = segList.getItem(len - 2)
-            if (prev.pathSegType === 2) {
-              remItems(len - 1, 2)
-              cleanup()
-              break
-            } else if (nprev.pathSegType === 2) {
-              remItems(len - 2, 3)
-              cleanup()
-              break
-            }
-          } else if (item.pathSegType === 2 && len > 0) {
-            const prevType = segList.getItem(len - 1).pathSegType
-            // Path has M M
-            if (prevType === 2) {
-              remItems(len - 1, 1)
-              cleanup()
-              break
-              // Entire path ends with Z M
-            } else if (prevType === 1 && segList.numberOfItems - 1 === len) {
-              remItems(len, 1)
-              cleanup()
-              break
-            }
+      if (len <= 1) { return true }
+
+      while (len--) {
+        const item = segList.getItem(len)
+        if (item.pathSegType === 1) {
+          const prev = segList.getItem(len - 1)
+          const nprev = segList.getItem(len - 2)
+          if (prev.pathSegType === 2) {
+            remItems(len - 1, 2)
+            cleanup()
+            break
+          } else if (nprev.pathSegType === 2) {
+            remItems(len - 2, 3)
+            cleanup()
+            break
+          }
+        } else if (item.pathSegType === 2 && len > 0) {
+          const prevType = segList.getItem(len - 1).pathSegType
+          // Path has M M
+          if (prevType === 2) {
+            remItems(len - 1, 1)
+            cleanup()
+            break
+            // Entire path ends with Z M
+          } else if (prevType === 1 && segList.numberOfItems - 1 === len) {
+            remItems(len, 1)
+            cleanup()
+            break
           }
         }
-        return false
       }
+      return false
+    }
 
-      cleanup()
+    cleanup()
 
-      // Completely delete a path with 1 or 0 segments
-      if (path.elem.pathSegList.numberOfItems <= 1) {
-        pathActionsMethod.toSelectMode(path.elem)
-        svgCanvas.canvas.deleteSelectedElements()
-        return
-      }
+    // Completely delete a path with 1 or 0 segments
+    if (path.elem.pathSegList.numberOfItems <= 1) {
+      pathActionsMethod.toSelectMode(path.elem)
+      svgCanvas.canvas.deleteSelectedElements()
+      return
+    }
 
-      path.init()
-      path.clearSelection()
+    path.init()
+    path.clearSelection()
 
-      // TODO: Find right way to select point now
-      // path.selectPt(selPt);
-      if (window.opera) { // Opera repaints incorrectly
-        path.elem.setAttribute('d', path.elem.getAttribute('d'))
-      }
-      path.endChanges('Delete path node(s)')
-    },
-    // Can't seem to use `@borrows` here, so using `@see`
-    /**
-    * Smooth polyline into path.
-    * @function module:path.pathActions.smoothPolylineIntoPath
-    * @see module:path~smoothPolylineIntoPath
-    */
-    smoothPolylineIntoPath,
-    /* eslint-enable  */
-    /**
-    * @param {?Integer} v See {@link https://www.w3.org/TR/SVG/single-page.html#paths-InterfaceSVGPathSeg}
-    * @returns {void}
-    */
-    setSegType (v) {
-      path?.setSegType(v)
-    },
-    /**
-    * @param {string} attr
-    * @param {Float} newValue
-    * @returns {void}
-    */
-    moveNode (attr, newValue) {
-      const selPts = path.selected_pts
-      if (!selPts.length) { return }
+    // TODO: Find right way to select point now
+    // path.selectPt(selPt);
+    if (window.opera) { // Opera repaints incorrectly
+      path.elem.setAttribute('d', path.elem.getAttribute('d'))
+    }
+    path.endChanges('Delete path node(s)')
+  }
 
-      path.storeD()
+  // Can't seem to use `@borrows` here, so using `@see`
+  /**
+  * Smooth polyline into path.
+  * @function module:path.pathActions.smoothPolylineIntoPath
+  * @see module:path~smoothPolylineIntoPath
+  */
+  smoothPolylineIntoPath (element) {
+    return this.#smoothPolylineIntoPath(element)
+  }
 
-      // Get first selected point
-      const seg = path.segs[selPts[0]]
-      const diff = { x: 0, y: 0 }
-      diff[attr] = newValue - seg.item[attr]
+  /* eslint-enable  */
+  /**
+  * @param {?Integer} v See {@link https://www.w3.org/TR/SVG/single-page.html#paths-InterfaceSVGPathSeg}
+  * @returns {void}
+  */
+  setSegType (v) {
+    path?.setSegType(v)
+  }
 
-      seg.move(diff.x, diff.y)
-      path.endChanges('Move path point')
-    },
-    /**
-    * @param {Element} elem
-    * @returns {void}
-    */
-    fixEnd (elem) {
-      // Adds an extra segment if the last seg before a Z doesn't end
-      // at its M point
-      // M0,0 L0,100 L100,100 z
-      const segList = elem.pathSegList
-      const len = segList.numberOfItems
-      let lastM
-      for (let i = 0; i < len; ++i) {
-        const item = segList.getItem(i)
-        if (item.pathSegType === 2) { // 2 => M segment type (move to)
-          lastM = item
-        }
+  /**
+  * @param {string} attr
+  * @param {Float} newValue
+  * @returns {void}
+  */
+  moveNode (attr, newValue) {
+    const selPts = path.selected_pts
+    if (!selPts.length) { return }
 
-        if (item.pathSegType === 1) { // 1 => Z segment type (close path)
-          const prev = segList.getItem(i - 1)
-          if (prev.x !== lastM.x || prev.y !== lastM.y) {
-            // Add an L segment here
-            const newseg = elem.createSVGPathSegLinetoAbs(lastM.x, lastM.y)
-            segList.insertItemBefore(newseg, i)
-            // Can this be done better?
-            pathActionsMethod.fixEnd(elem)
-            break
-          }
+    path.storeD()
+
+    // Get first selected point
+    const seg = path.segs[selPts[0]]
+    const diff = { x: 0, y: 0 }
+    diff[attr] = newValue - seg.item[attr]
+
+    seg.move(diff.x, diff.y)
+    path.endChanges('Move path point')
+  }
+
+  /**
+  * @param {Element} elem
+  * @returns {void}
+  */
+  fixEnd (elem) {
+    // Adds an extra segment if the last seg before a Z doesn't end
+    // at its M point
+    // M0,0 L0,100 L100,100 z
+    const segList = elem.pathSegList
+    const len = segList.numberOfItems
+    let lastM
+    for (let i = 0; i < len; ++i) {
+      const item = segList.getItem(i)
+      if (item.pathSegType === 2) { // 2 => M segment type (move to)
+        lastM = item
+      }
+
+      if (item.pathSegType === 1) { // 1 => Z segment type (close path)
+        const prev = segList.getItem(i - 1)
+        if (prev.x !== lastM.x || prev.y !== lastM.y) {
+          // Add an L segment here
+          const newseg = elem.createSVGPathSegLinetoAbs(lastM.x, lastM.y)
+          segList.insertItemBefore(newseg, i)
+          // Can this be done better?
+          pathActionsMethod.fixEnd(elem)
+          break
         }
       }
-    },
-    // Can't seem to use `@borrows` here, so using `@see`
-    /**
-    * Convert a path to one with only absolute or relative values.
-    * @function module:path.pathActions.convertPath
-    * @see module:path.convertPath
-    */
-    convertPath
-  })
-})()
+    }
+  }
+
+  // Can't seem to use `@borrows` here, so using `@see`
+  /**
+  * Convert a path to one with only absolute or relative values.
+  * @function module:path.pathActions.convertPath
+  * @see module:path.convertPath
+  */
+  convertPath (pth, toRel) {
+    return convertPath(pth, toRel)
+  }
+}
+
+// Export singleton instance for backward compatibility
+export const pathActionsMethod = new PathActions()
 // end pathActions