@svgedit/svgcanvas 7.1.4

package/path-actions.js

@@ -0,0 +1,1237 @@
+/**
+ * Path functionality.
+ * @module path
+ * @license MIT
+ *
+ * @copyright 2011 Alexis Deveria, 2011 Jeff Schiller
+ */
+
+import { NS } from './namespaces.js'
+import { shortFloat } from '../../src/common/units.js'
+import { ChangeElementCommand, BatchCommand } from './history.js'
+import {
+  transformPoint, snapToAngle, rectsIntersect,
+  transformListToTransform
+} from './math.js'
+import {
+  assignAttributes, getElement, getRotationAngle, snapToGrid,
+  getBBox
+} from './utilities.js'
+
+let svgCanvas = null
+let path = null
+
+/**
+* @function module:path-actions.init
+* @param {module:path-actions.svgCanvas} pathActionsContext
+* @returns {void}
+*/
+export const init = (canvas) => {
+  svgCanvas = canvas
+}
+
+/**
+ * Convert a path to one with only absolute or relative values.
+ * @todo move to pathActions.js
+ * @function module:path.convertPath
+ * @param {SVGPathElement} pth - the path to convert
+ * @param {boolean} toRel - true of convert to relative
+ * @returns {string}
+ */
+export const convertPath = function (pth, toRel) {
+  const { pathSegList } = pth
+  const len = pathSegList.numberOfItems
+  let curx = 0; let cury = 0
+  let d = ''
+  let lastM = null
+
+  for (let i = 0; i < len; ++i) {
+    const seg = pathSegList.getItem(i)
+    // if these properties are not in the segment, set them to zero
+    let x = seg.x || 0
+    let y = seg.y || 0
+    let x1 = seg.x1 || 0
+    let y1 = seg.y1 || 0
+    let x2 = seg.x2 || 0
+    let y2 = seg.y2 || 0
+
+    // const type = seg.pathSegType;
+    // const pathMap = svgCanvas.getPathMap();
+    // let letter = pathMap[type][toRel ? 'toLowerCase' : 'toUpperCase']();
+    let letter = seg.pathSegTypeAsLetter
+
+    switch (letter) {
+      case 'z': // z,Z closepath (Z/z)
+      case 'Z':
+        d += 'z'
+        if (lastM && !toRel) {
+          curx = lastM[0]
+          cury = lastM[1]
+        }
+        break
+      case 'H': // absolute horizontal line (H)
+        x -= curx
+      // Fallthrough
+      case 'h': // relative horizontal line (h)
+        if (toRel) {
+          y = 0
+          curx += x
+          letter = 'l'
+        } else {
+          y = cury
+          x += curx
+          curx = x
+          letter = 'L'
+        }
+        // Convert to "line" for easier editing
+        d += pathDSegment(letter, [[x, y]])
+        break
+      case 'V': // absolute vertical line (V)
+        y -= cury
+      // Fallthrough
+      case 'v': // relative vertical line (v)
+        if (toRel) {
+          x = 0
+          cury += y
+          letter = 'l'
+        } else {
+          x = curx
+          y += cury
+          cury = y
+          letter = 'L'
+        }
+        // Convert to "line" for easier editing
+        d += pathDSegment(letter, [[x, y]])
+        break
+      case 'M': // absolute move (M)
+      case 'L': // absolute line (L)
+      case 'T': // absolute smooth quad (T)
+        x -= curx
+        y -= cury
+      // Fallthrough
+      case 'l': // relative line (l)
+      case 'm': // relative move (m)
+      case 't': // relative smooth quad (t)
+        if (toRel) {
+          curx += x
+          cury += y
+          letter = letter.toLowerCase()
+        } else {
+          x += curx
+          y += cury
+          curx = x
+          cury = y
+          letter = letter.toUpperCase()
+        }
+        if (letter === 'm' || letter === 'M') { lastM = [curx, cury] }
+
+        d += pathDSegment(letter, [[x, y]])
+        break
+      case 'C': // absolute cubic (C)
+        x -= curx; x1 -= curx; x2 -= curx
+        y -= cury; y1 -= cury; y2 -= cury
+      // Fallthrough
+      case 'c': // relative cubic (c)
+        if (toRel) {
+          curx += x
+          cury += y
+          letter = 'c'
+        } else {
+          x += curx; x1 += curx; x2 += curx
+          y += cury; y1 += cury; y2 += cury
+          curx = x
+          cury = y
+          letter = 'C'
+        }
+        d += pathDSegment(letter, [[x1, y1], [x2, y2], [x, y]])
+        break
+      case 'Q': // absolute quad (Q)
+        x -= curx; x1 -= curx
+        y -= cury; y1 -= cury
+      // Fallthrough
+      case 'q': // relative quad (q)
+        if (toRel) {
+          curx += x
+          cury += y
+          letter = 'q'
+        } else {
+          x += curx; x1 += curx
+          y += cury; y1 += cury
+          curx = x
+          cury = y
+          letter = 'Q'
+        }
+        d += pathDSegment(letter, [[x1, y1], [x, y]])
+        break
+      case 'A':
+        x -= curx
+        y -= cury
+      // fallthrough
+      case 'a': // relative elliptical arc (a)
+        if (toRel) {
+          curx += x
+          cury += y
+          letter = 'a'
+        } else {
+          x += curx
+          y += cury
+          curx = x
+          cury = y
+          letter = 'A'
+        }
+        d += pathDSegment(letter, [[seg.r1, seg.r2]], [
+          seg.angle,
+          (seg.largeArcFlag ? 1 : 0),
+          (seg.sweepFlag ? 1 : 0)
+        ], [x, y])
+        break
+      case 'S': // absolute smooth cubic (S)
+        x -= curx; x2 -= curx
+        y -= cury; y2 -= cury
+      // Fallthrough
+      case 's': // relative smooth cubic (s)
+        if (toRel) {
+          curx += x
+          cury += y
+          letter = 's'
+        } else {
+          x += curx; x2 += curx
+          y += cury; y2 += cury
+          curx = x
+          cury = y
+          letter = 'S'
+        }
+        d += pathDSegment(letter, [[x2, y2], [x, y]])
+        break
+    } // switch on path segment type
+  } // for each segment
+  return d
+}
+
+/**
+ * TODO: refactor callers in `convertPath` to use `getPathDFromSegments` instead of this function.
+ * Legacy code refactored from `svgcanvas.pathActions.convertPath`.
+ * @param {string} letter - path segment command (letter in potentially either case from {@link module:path.pathMap}; see [SVGPathSeg#pathSegTypeAsLetter]{@link https://www.w3.org/TR/SVG/single-page.html#paths-__svg__SVGPathSeg__pathSegTypeAsLetter})
+ * @param {GenericArray<GenericArray<Integer>>} points - x,y points
+ * @param {GenericArray<GenericArray<Integer>>} [morePoints] - x,y points
+ * @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
+}
+
+/**
+* Group: Path edit functions.
+* Functions relating to editing path elements.
+* @namespace {PlainObject} 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);
+
+  /**
+  * This function converts a polyline (created by the fh_path tool) into
+  * a path element and coverts every three line segments into a single bezier
+  * curve in an attempt to smooth out the free-hand.
+  * @function smoothPolylineIntoPath
+  * @param {Element} element
+  * @returns {Element}
+  */
+  const smoothPolylineIntoPath = function (element) {
+    let i
+    const { points } = element
+    const N = points.numberOfItems
+    if (N >= 4) {
+      // loop through every 3 points and convert to a cubic bezier curve segment
+      //
+      // NOTE: this is cheating, it means that every 3 points has the potential to
+      // be a corner instead of treating each point in an equal manner. In general,
+      // this technique does not look that good.
+      //
+      // I am open to better ideas!
+      //
+      // Reading:
+      // - http://www.efg2.com/Lab/Graphics/Jean-YvesQueinecBezierCurves.htm
+      // - 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 d = []
+      d.push(['M', curpos.x, ',', curpos.y, ' C'].join(''))
+      for (i = 1; i <= (N - 4); i += 3) {
+        let ct1 = points.getItem(i)
+        const ct2 = points.getItem(i + 1)
+        const end = points.getItem(i + 2)
+
+        // if the previous segment had a control point, we want to smooth out
+        // the control points on both sides
+        if (prevCtlPt) {
+          const newpts = svgCanvas.smoothControlPoints(prevCtlPt, ct1, curpos)
+          if (newpts?.length === 2) {
+            const prevArr = d[d.length - 1].split(',')
+            prevArr[2] = newpts[0].x
+            prevArr[3] = newpts[0].y
+            d[d.length - 1] = prevArr.join(',')
+            ct1 = newpts[1]
+          }
+        }
+
+        d.push([ct1.x, ct1.y, ct2.x, ct2.y, end.x, end.y].join(','))
+
+        curpos = end
+        prevCtlPt = ct2
+      }
+      // handle remaining line segments
+      d.push('L')
+      while (i < N) {
+        const pt = points.getItem(i)
+        d.push([pt.x, pt.y].join(','))
+        i++
+      }
+      d = d.join(' ')
+
+      element = svgCanvas.addSVGElementsFromJson({
+        element: 'path',
+        curStyles: true,
+        attr: {
+          id: svgCanvas.getId(),
+          d,
+          fill: 'none'
+        }
+      })
+      // No need to call "changed", as this is already done under mouseUp
+    }
+    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)
+        }
+
+        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) &&
+              y >= (py - FUZZ) && y <= (py + FUZZ)
+            ) {
+              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()
+
+            // 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
+            }
+          // 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
+
+            if (evt.shiftKey) {
+              const xya = snapToAngle(lastx, lasty, x, y);
+              ({ x, y } = xya)
+            }
+
+            // 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)
+          }
+          // keep = true;
+        }
+
+        return undefined
+      }
+
+      // TODO: Make sure currentPath isn't null at this point
+      if (!path) { return undefined }
+
+      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]
+
+        // 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)
+        }
+      } 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)
+      }
+
+      // 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)
+      }
+      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)
+          }
+        } 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)
+            }
+          }
+        }
+        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)
+
+          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
+        }
+      }
+
+      // Edit mode
+      const rubberBox = svgCanvas.getRubberBox()
+      if (path.dragging) {
+        const lastPt = path.cur_pt
+
+        path.dragging = false
+        path.dragctrl = false
+        path.update()
+
+        if (hasMoved) {
+          path.endChanges('Move path point(s)')
+        }
+
+        if (!evt.shiftKey && !hasMoved) {
+          path.selectPt(lastPt)
+        }
+      } else if (rubberBox?.getAttribute('display') !== 'none') {
+        // Done with multi-node-select
+        rubberBox.setAttribute('display', 'none')
+
+        if (rubberBox.getAttribute('width') <= 2 && rubberBox.getAttribute('height') <= 2) {
+          pathActionsMethod.toSelectMode(evt.target)
+        }
+
+      // else, move back to select mode
+      } else {
+        pathActionsMethod.toSelectMode(evt.target)
+      }
+      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
+    },
+    /**
+    * @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()
+      }
+
+      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)
+      }
+    },
+    /**
+    * @param {Element} target
+    * @returns {void}
+    */
+    select (target) {
+      if (currentPath === target) {
+        pathActionsMethod.toEditMode(target)
+        svgCanvas.setCurrentMode('pathedit')
+      // going into pathedit mode
+      } else {
+        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)
+
+      svgCanvas.addCommandToHistory(batchCmd)
+
+      // Set matrix to null
+      svgCanvas.getPath_(elem).show(false).matrix = null
+
+      this.clear()
+
+      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()
+      }
+      if (path) { path.init().show(false) }
+    },
+    /**
+    * @param {?(Element|SVGPathElement)} pth
+    * @returns {false|void}
+    */
+    resetOrientation (pth) {
+      if (pth?.nodeName !== 'path') { return false }
+      const tlist = pth.transform.baseVal
+      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)
+      }
+
+      svgCanvas.reorientGrads(pth, m)
+      return undefined
+    },
+    /**
+    * @returns {void}
+    */
+    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
+
+      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)
+    },
+    /**
+    * @returns {void}
+    */
+    clonePathNode () {
+      path.storeD()
+
+      const selPts = path.selected_pts
+      // const {segs} = path;
+
+      let i = selPts.length
+      const nums = []
+
+      while (i--) {
+        const pt = selPts[i]
+        path.addSeg(pt)
+
+        nums.push(pt + i)
+        nums.push(pt + i + 1)
+      }
+      path.init().addPtsToSelection(nums)
+
+      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 }
+
+      const { elem } = path
+      const list = elem.pathSegList
+
+      // const len = list.numberOfItems;
+
+      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
+      })
+
+      if (!openPt) {
+        // Single path, so close last seg
+        openPt = path.segs.length - 1
+      }
+
+      if (openPt !== false) {
+        // Close this path
+
+        // Create a line going to the previous "M"
+        const newseg = elem.createSVGPathSegLinetoAbs(startItem.x, startItem.y)
+
+        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)
+        }
+
+        path.init().selectPt(openPt + 1)
+        return
+      }
+
+      // 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
+
+      // 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
+
+      const seg = path.segs[index]
+
+      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
+
+      while (num--) {
+        list.insertItemBefore(list.getItem(lastM), zSeg)
+      }
+
+      const pt = list.getItem(lastM)
+
+      // 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?
+
+      path.init().selectPt(0)
+    },
+    /**
+    * @returns {void}
+    */
+    deletePathNode () {
+      if (!pathActionsMethod.canDeleteNodes) { return }
+      path.storeD()
+
+      const selPts = path.selected_pts
+
+      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
+
+        const remItems = function (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
+            }
+          }
+        }
+        return false
+      }
+
+      cleanup()
+
+      // 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()
+
+      // 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 }
+
+      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
+  })
+})()
+// end pathActions