@svgedit/svgcanvas 7.2.7 → 7.4.1

package/core/path-method.js

@@ -16,6 +16,190 @@ import {
   getElement
 } from './utilities.js'
 
+const TYPE_TO_CMD = {
+  1: 'Z',
+  2: 'M',
+  3: 'm',
+  4: 'L',
+  5: 'l',
+  6: 'C',
+  7: 'c',
+  8: 'Q',
+  9: 'q',
+  10: 'A',
+  11: 'a',
+  12: 'H',
+  13: 'h',
+  14: 'V',
+  15: 'v',
+  16: 'S',
+  17: 's',
+  18: 'T',
+  19: 't'
+}
+
+const CMD_TO_TYPE = Object.fromEntries(
+  Object.entries(TYPE_TO_CMD).map(([k, v]) => [v, Number(k)])
+)
+
+class PathDataListShim {
+  constructor (elem) {
+    this.elem = elem
+  }
+
+  _getData () {
+    return this.elem.getPathData()
+  }
+
+  _setData (data) {
+    this.elem.setPathData(data)
+  }
+
+  get numberOfItems () {
+    return this._getData().length
+  }
+
+  _entryToSeg (entry) {
+    const { type, values = [] } = entry
+    const cmd = CMD_TO_TYPE[type] || CMD_TO_TYPE[type?.toUpperCase?.()]
+    const seg = { pathSegType: cmd }
+    const U = String(type).toUpperCase()
+    switch (U) {
+      case 'H':
+        [seg.x] = values
+        break
+      case 'V':
+        [seg.y] = values
+        break
+      case 'M':
+      case 'L':
+      case 'T':
+        [seg.x, seg.y] = values
+        break
+      case 'S':
+        [seg.x2, seg.y2, seg.x, seg.y] = values
+        break
+      case 'C':
+        [seg.x1, seg.y1, seg.x2, seg.y2, seg.x, seg.y] = values
+        break
+      case 'Q':
+        [seg.x1, seg.y1, seg.x, seg.y] = values
+        break
+      case 'A':
+        [
+          seg.r1,
+          seg.r2,
+          seg.angle,
+          seg.largeArcFlag,
+          seg.sweepFlag,
+          seg.x,
+          seg.y
+        ] = values
+        break
+      default:
+        break
+    }
+    return seg
+  }
+
+  _segToEntry (seg) {
+    const type = TYPE_TO_CMD[seg.pathSegType] || seg.type
+    if (!type) {
+      return { type: 'Z', values: [] }
+    }
+    const U = String(type).toUpperCase()
+    let values = []
+    switch (U) {
+      case 'H':
+        values = [seg.x]
+        break
+      case 'V':
+        values = [seg.y]
+        break
+      case 'M':
+      case 'L':
+      case 'T':
+        values = [seg.x, seg.y]
+        break
+      case 'S':
+        values = [seg.x2, seg.y2, seg.x, seg.y]
+        break
+      case 'C':
+        values = [seg.x1, seg.y1, seg.x2, seg.y2, seg.x, seg.y]
+        break
+      case 'Q':
+        values = [seg.x1, seg.y1, seg.x, seg.y]
+        break
+      case 'A':
+        values = [
+          seg.r1,
+          seg.r2,
+          seg.angle,
+          Number(seg.largeArcFlag),
+          Number(seg.sweepFlag),
+          seg.x,
+          seg.y
+        ]
+        break
+      default:
+        values = []
+    }
+    return { type, values }
+  }
+
+  getItem (index) {
+    const entry = this._getData()[index]
+    return entry ? this._entryToSeg(entry) : null
+  }
+
+  replaceItem (seg, index) {
+    const data = this._getData()
+    data[index] = this._segToEntry(seg)
+    this._setData(data)
+    return seg
+  }
+
+  insertItemBefore (seg, index) {
+    const data = this._getData()
+    data.splice(index, 0, this._segToEntry(seg))
+    this._setData(data)
+    return seg
+  }
+
+  appendItem (seg) {
+    const data = this._getData()
+    data.push(this._segToEntry(seg))
+    this._setData(data)
+    return seg
+  }
+
+  removeItem (index) {
+    const data = this._getData()
+    data.splice(index, 1)
+    this._setData(data)
+  }
+
+  clear () {
+    this._setData([])
+  }
+}
+
+if (
+  typeof SVGPathElement !== 'undefined' &&
+  typeof SVGPathElement.prototype.getPathData === 'function' &&
+  typeof SVGPathElement.prototype.setPathData === 'function' &&
+  !('pathSegList' in SVGPathElement.prototype)
+) {
+  Object.defineProperty(SVGPathElement.prototype, 'pathSegList', {
+    get () {
+      if (!this._pathSegListShim) {
+        this._pathSegListShim = new PathDataListShim(this)
+      }
+      return this._pathSegListShim
+    }
+  })
+}
+
 let svgCanvas = null
 
 /**
@@ -36,7 +220,7 @@ export const init = (canvas) => {
 * @returns {ArgumentsArray}
 */
 /* eslint-enable max-len */
-export const ptObjToArrMethod = function (type, segItem) {
+export const ptObjToArrMethod = (type, segItem) => {
   const segData = svgCanvas.getSegData()
   const props = segData[type]
   return props.map((prop) => {
@@ -50,7 +234,7 @@ export const ptObjToArrMethod = function (type, segItem) {
 * @param {module:math.XYObject} altPt
 * @returns {module:math.XYObject}
 */
-export const getGripPtMethod = function (seg, altPt) {
+export const getGripPtMethod = (seg, altPt) => {
   const { path: pth } = seg
   let out = {
     x: altPt ? altPt.x : seg.item.x,
@@ -73,7 +257,7 @@ export const getGripPtMethod = function (seg, altPt) {
 * @param {module:path.Path} pth
 * @returns {module:math.XYObject}
 */
-export const getPointFromGripMethod = function (pt, pth) {
+export const getPointFromGripMethod = (pt, pth) => {
   const out = {
     x: pt.x,
     y: pt.y
@@ -94,7 +278,7 @@ export const getPointFromGripMethod = function (pt, pth) {
 * @function module:path.getGripContainer
 * @returns {Element}
 */
-export const getGripContainerMethod = function () {
+export const getGripContainerMethod = () => {
   let c = getElement('pathpointgrip_container')
   if (!c) {
     const parentElement = getElement('selectorParentGroup')
@@ -113,16 +297,16 @@ export const getGripContainerMethod = function () {
 * @param {Integer} y
 * @returns {SVGCircleElement}
 */
-export const addPointGripMethod = function (index, x, y) {
+export const addPointGripMethod = (index, x, y) => {
   // create the container of all the point grips
   const pointGripContainer = getGripContainerMethod()
 
-  let pointGrip = getElement('pathpointgrip_' + index)
+  let pointGrip = getElement(`pathpointgrip_${index}`)
   // create it
   if (!pointGrip) {
     pointGrip = document.createElementNS(NS.SVG, 'circle')
     const atts = {
-      id: 'pathpointgrip_' + index,
+      id: `pathpointgrip_${index}`,
       display: 'none',
       r: 4,
       fill: '#0FF',
@@ -163,7 +347,7 @@ export const addPointGripMethod = function (index, x, y) {
 * @param {string} id
 * @returns {SVGCircleElement}
 */
-export const addCtrlGripMethod = function (id) {
+export const addCtrlGripMethod = (id) => {
   let pointGrip = getElement('ctrlpointgrip_' + id)
   if (pointGrip) { return pointGrip }
 
@@ -191,7 +375,7 @@ export const addCtrlGripMethod = function (id) {
 * @param {string} id
 * @returns {SVGLineElement}
 */
-export const getCtrlLineMethod = function (id) {
+export const getCtrlLineMethod = (id) => {
   let ctrlLine = getElement('ctrlLine_' + id)
   if (ctrlLine) { return ctrlLine }
 
@@ -211,7 +395,7 @@ export const getCtrlLineMethod = function (id) {
 * @param {boolean} update
 * @returns {SVGCircleElement}
 */
-export const getPointGripMethod = function (seg, update) {
+export const getPointGripMethod = (seg, update) => {
   const { index } = seg
   const pointGrip = addPointGripMethod(index)
 
@@ -231,7 +415,7 @@ export const getPointGripMethod = function (seg, update) {
 * @param {Segment} seg
 * @returns {PlainObject<string, SVGLineElement|SVGCircleElement>}
 */
-export const getControlPointsMethod = function (seg) {
+export const getControlPointsMethod = (seg) => {
   const { item, index } = seg
   if (!('x1' in item) || !('x2' in item)) { return null }
   const cpt = {}
@@ -246,7 +430,7 @@ export const getControlPointsMethod = function (seg) {
   for (let i = 1; i < 3; i++) {
     const id = index + 'c' + i
 
-    const ctrlLine = cpt['c' + i + '_line'] = getCtrlLineMethod(id)
+    const ctrlLine = cpt[`c${i}_line`] = getCtrlLineMethod(id)
 
     const pt = getGripPtMethod(seg, { x: item['x' + i], y: item['y' + i] })
     const gpt = getGripPtMethod(seg, { x: segItems[i - 1].x, y: segItems[i - 1].y })
@@ -259,10 +443,10 @@ export const getControlPointsMethod = function (seg) {
       display: 'inline'
     })
 
-    cpt['c' + i + '_line'] = ctrlLine
+    cpt[`c${i}_line`] = ctrlLine
 
     // create it
-    const pointGrip = cpt['c' + i] = addCtrlGripMethod(id)
+    const pointGrip = cpt[`c${i}`] = addCtrlGripMethod(id)
 
     assignAttributes(pointGrip, {
       cx: pt.x,
@@ -282,12 +466,29 @@ export const getControlPointsMethod = function (seg) {
 * @param {SVGPathElement} elem
 * @returns {void}
 */
-export const replacePathSegMethod = function (type, index, pts, elem) {
+export const replacePathSegMethod = (type, index, pts, elem) => {
   const path = svgCanvas.getPathObj()
   const pth = elem || path.elem
   const pathFuncs = svgCanvas.getPathFuncs()
   const func = 'createSVGPathSeg' + pathFuncs[type]
-  const seg = pth[func](...pts)
+  const segData = svgCanvas.getSegData?.()
+  const props = segData?.[type] || segData?.[type - 1]
+  if (props && pts.length < props.length) {
+    const currentSeg = pth.pathSegList?.getItem?.(index)
+    if (currentSeg) {
+      pts = props.map((prop, i) => (pts[i] !== undefined ? pts[i] : currentSeg[prop]))
+    }
+  }
+  let seg
+  if (typeof pth[func] === 'function') {
+    seg = pth[func](...pts)
+  } else {
+    const safeProps = props || []
+    seg = { pathSegType: type }
+    safeProps.forEach((prop, i) => {
+      seg[prop] = pts[i]
+    })
+  }
 
   pth.pathSegList.replaceItem(seg, index)
 }
@@ -297,15 +498,15 @@ export const replacePathSegMethod = function (type, index, pts, elem) {
 * @param {boolean} update
 * @returns {SVGPathElement}
 */
-export const getSegSelectorMethod = function (seg, update) {
+export const getSegSelectorMethod = (seg, update) => {
   const { index } = seg
-  let segLine = getElement('segline_' + index)
+  let segLine = getElement(`segline_${index}`)
   if (!segLine) {
     const pointGripContainer = getGripContainerMethod()
     // create segline
     segLine = document.createElementNS(NS.SVG, 'path')
     assignAttributes(segLine, {
-      id: 'segline_' + index,
+      id: `segline_${index}`,
       display: 'none',
       fill: 'none',
       stroke: '#0FF',
@@ -353,7 +554,7 @@ export class Segment {
     this.item = item
     this.type = item.pathSegType
 
-    this.ctrlpts = []
+    this.ctrlpts = null
     this.ptgrip = null
     this.segsel = null
   }
@@ -375,8 +576,8 @@ export class Segment {
    * @returns {void}
    */
   selectCtrls (y) {
-    document.getElementById('ctrlpointgrip_' + this.index + 'c1').setAttribute('fill', y ? '#0FF' : '#EEE')
-    document.getElementById('ctrlpointgrip_' + this.index + 'c2').setAttribute('fill', y ? '#0FF' : '#EEE')
+    document.getElementById(`ctrlpointgrip_${this.index}c1`)?.setAttribute('fill', y ? '#0FF' : '#EEE')
+    document.getElementById(`ctrlpointgrip_${this.index}c2`)?.setAttribute('fill', y ? '#0FF' : '#EEE')
   }
 
   /**
@@ -450,27 +651,25 @@ export class Segment {
   move (dx, dy) {
     const { item } = this
 
-    const curPts = this.ctrlpts
-      ? [
-          item.x += dx, item.y += dy,
-          item.x1, item.y1, item.x2 += dx, item.y2 += dy
-        ]
-      : [item.x += dx, item.y += dy]
+    item.x += dx
+    item.y += dy
+
+    // `x2/y2` are the control point attached to this node (when present)
+    if ('x2' in item) { item.x2 += dx }
+    if ('y2' in item) { item.y2 += dy }
 
     replacePathSegMethod(
       this.type,
       this.index,
-      // type 10 means ARC
-      this.type === 10 ? ptObjToArrMethod(this.type, item) : curPts
+      ptObjToArrMethod(this.type, item)
     )
 
-    if (this.next?.ctrlpts) {
-      const next = this.next.item
-      const nextPts = [
-        next.x, next.y,
-        next.x1 += dx, next.y1 += dy, next.x2, next.y2
-      ]
-      replacePathSegMethod(this.next.type, this.next.index, nextPts)
+    const next = this.next?.item
+    // `x1/y1` are the control point attached to this node on the next segment (when present)
+    if (next && 'x1' in next && 'y1' in next) {
+      next.x1 += dx
+      next.y1 += dy
+      replacePathSegMethod(this.next.type, this.next.index, ptObjToArrMethod(this.next.type, next))
     }
 
     if (this.mate) {

package/core/path.js

@@ -236,6 +236,7 @@ export const init = (canvas) => {
   svgCanvas.getPointFromGrip = getPointFromGripMethod
   svgCanvas.setLinkControlPoints = setLinkControlPoints
   svgCanvas.reorientGrads = reorientGrads
+  svgCanvas.recalcRotatedPath = recalcRotatedPath
   svgCanvas.getSegData = () => { return segData }
   svgCanvas.getUIStrings = () => { return uiStrings }
   svgCanvas.getPathObj = () => { return path }
@@ -466,14 +467,17 @@ const getRotVals = (x, y) => {
 * @returns {void}
 */
 export const recalcRotatedPath = () => {
-  const currentPath = path.elem
+  const currentPath = path?.elem
+  if (!currentPath) { return }
   angle = getRotationAngle(currentPath, true)
   if (!angle) { return }
   // selectedBBoxes[0] = path.oldbbox;
   const oldbox = path.oldbbox // selectedBBoxes[0],
+  if (!oldbox) { return }
   oldcx = oldbox.x + oldbox.width / 2
   oldcy = oldbox.y + oldbox.height / 2
   const box = getBBox(currentPath)
+  if (!box) { return }
   newcx = box.x + box.width / 2
   newcy = box.y + box.height / 2
 
@@ -487,6 +491,7 @@ export const recalcRotatedPath = () => {
   newcy = r * Math.sin(theta) + oldcy
 
   const list = currentPath.pathSegList
+  if (!list) { return }
 
   let i = list.numberOfItems
   while (i) {
@@ -495,13 +500,33 @@ export const recalcRotatedPath = () => {
     const type = seg.pathSegType
     if (type === 1) { continue }
 
-    const rvals = getRotVals(seg.x, seg.y)
-    const points = [rvals.x, rvals.y]
-    if (seg.x1 && seg.x2) {
+    const props = segData[type]
+    if (!props) { continue }
+
+    const newVals = {}
+    if (seg.x !== null && seg.x !== undefined && seg.y !== null && seg.y !== undefined) {
+      const rvals = getRotVals(seg.x, seg.y)
+      newVals.x = rvals.x
+      newVals.y = rvals.y
+    }
+    if (seg.x1 !== null && seg.x1 !== undefined && seg.y1 !== null && seg.y1 !== undefined) {
       const cVals1 = getRotVals(seg.x1, seg.y1)
+      newVals.x1 = cVals1.x
+      newVals.y1 = cVals1.y
+    }
+    if (seg.x2 !== null && seg.x2 !== undefined && seg.y2 !== null && seg.y2 !== undefined) {
       const cVals2 = getRotVals(seg.x2, seg.y2)
-      points.splice(points.length, 0, cVals1.x, cVals1.y, cVals2.x, cVals2.y)
+      newVals.x2 = cVals2.x
+      newVals.y2 = cVals2.y
     }
+
+    const points = props.map((prop) => {
+      if (Object.prototype.hasOwnProperty.call(newVals, prop)) {
+        return newVals[prop]
+      }
+      const val = seg[prop]
+      return val === null || val === undefined ? 0 : val
+    })
     replacePathSeg(type, i, points)
   } // loop for each point
 
@@ -512,8 +537,18 @@ export const recalcRotatedPath = () => {
   // now we must set the new transform to be rotated around the new center
   const Rnc = svgCanvas.getSvgRoot().createSVGTransform()
   const tlist = getTransformList(currentPath)
+  if (!tlist) { return }
   Rnc.setRotate((angle * 180.0 / Math.PI), newcx, newcy)
-  tlist.replaceItem(Rnc, 0)
+  if (tlist.numberOfItems) {
+    if (typeof tlist.replaceItem === 'function') {
+      tlist.replaceItem(Rnc, 0)
+    } else {
+      tlist.removeItem(0)
+      tlist.insertItemBefore(Rnc, 0)
+    }
+  } else {
+    tlist.appendItem(Rnc)
+  }
 }
 
 // ====================================
@@ -571,7 +606,7 @@ export const reorientGrads = (elem, m) => {
         }
         newgrad.id = svgCanvas.getNextId()
         findDefs().append(newgrad)
-        elem.setAttribute(type, 'url(#' + newgrad.id + ')')
+        elem.setAttribute(type, `url(#${newgrad.id})`)
       }
     }
   }
@@ -618,7 +653,7 @@ export const convertPath = (pth, toRel) => {
     switch (type) {
       case 1: // z,Z closepath (Z/z)
         d += 'z'
-        if (lastM && !toRel) {
+        if (lastM) {
           curx = lastM[0]
           cury = lastM[1]
         }
@@ -765,10 +800,10 @@ const pathDSegment = (letter, points, morePoints, lastPoint) => {
   })
   let segment = letter + points.join(' ')
   if (morePoints) {
-    segment += ' ' + morePoints.join(' ')
+    segment += ` ${morePoints.join(' ')}`
   }
   if (lastPoint) {
-    segment += ' ' + shortFloat(lastPoint)
+    segment += ` ${shortFloat(lastPoint)}`
   }
   return segment
 }