September updates (#992)

* fix deprecated apple-mobile -web-app-capable
* fix issue #974
* update dependencies
* fix a trailing space for points
* fix issue with tspan recalculation

packages/svgcanvas/core/coords.js

@@ -5,68 +5,92 @@
  */
 
 import {
-  snapToGrid, assignAttributes, getBBox, getRefElem, findDefs
+  snapToGrid,
+  assignAttributes,
+  getBBox,
+  getRefElem,
+  findDefs
 } from './utilities.js'
 import {
-  transformPoint, transformListToTransform, matrixMultiply, transformBox, getTransformList
+  transformPoint,
+  transformListToTransform,
+  matrixMultiply,
+  transformBox,
+  getTransformList
 } from './math.js'
-
-// this is how we map paths to our preferred relative segment types
-const pathMap = [
-  0, 'z', 'M', 'm', 'L', 'l', 'C', 'c', 'Q', 'q', 'A', 'a',
-  'H', 'h', 'V', 'v', 'S', 's', 'T', 't'
-]
-
-/**
- * @interface module:coords.EditorContext
- */
-/**
- * @function module:coords.EditorContext#getGridSnapping
- * @returns {boolean}
- */
-/**
- * @function module:coords.EditorContext#getSvgRoot
- * @returns {SVGSVGElement}
-*/
+import {
+  convertToNum
+} from './units.js'
 
 let svgCanvas = null
 
 /**
-* @function module:coords.init
-* @param {module:svgcanvas.SvgCanvas#event:pointsAdded} editorContext
-* @returns {void}
-*/
-export const init = (canvas) => {
+ * Initialize the coords module with the SVG canvas.
+ * @function module:coords.init
+ * @param {Object} canvas - The SVG canvas object
+ * @returns {void}
+ */
+export const init = canvas => {
   svgCanvas = canvas
 }
 
+// This is how we map path segment types to their corresponding commands
+const pathMap = [
+  0,
+  'z',
+  'M',
+  'm',
+  'L',
+  'l',
+  'C',
+  'c',
+  'Q',
+  'q',
+  'A',
+  'a',
+  'H',
+  'h',
+  'V',
+  'v',
+  'S',
+  's',
+  'T',
+  't'
+]
+
 /**
  * Applies coordinate changes to an element based on the given matrix.
- * @name module:coords.remapElement
- * @type {module:path.EditorContext#remapElement}
-*/
+ * @function module:coords.remapElement
+ * @param {Element} selected - The DOM element to remap
+ * @param {Object} changes - An object containing attribute changes
+ * @param {SVGMatrix} m - The transformation matrix
+ * @returns {void}
+ */
 export const remapElement = (selected, changes, m) => {
   const remap = (x, y) => transformPoint(x, y, m)
-  const scalew = (w) => m.a * w
-  const scaleh = (h) => m.d * h
-  const doSnapping = svgCanvas.getGridSnapping() && selected.parentNode.parentNode.localName === 'svg'
+  const scalew = w => m.a * w
+  const scaleh = h => m.d * h
+  const doSnapping =
+    svgCanvas.getGridSnapping() &&
+    selected.parentNode.parentNode.localName === 'svg'
   const finishUp = () => {
     if (doSnapping) {
-      Object.entries(changes).forEach(([o, value]) => {
-        changes[o] = snapToGrid(value)
+      Object.entries(changes).forEach(([attr, value]) => {
+        changes[attr] = snapToGrid(value)
       })
     }
     assignAttributes(selected, changes, 1000, true)
   }
-  const box = getBBox(selected);
+  const box = getBBox(selected)
 
-  ['fill', 'stroke'].forEach((type) => {
+  // Handle gradients and patterns
+  ;['fill', 'stroke'].forEach(type => {
     const attrVal = selected.getAttribute(type)
     if (attrVal?.startsWith('url(') && (m.a < 0 || m.d < 0)) {
       const grad = getRefElem(attrVal)
       const newgrad = grad.cloneNode(true)
       if (m.a < 0) {
-        // flip x
+        // Flip x
         const x1 = newgrad.getAttribute('x1')
         const x2 = newgrad.getAttribute('x2')
         newgrad.setAttribute('x1', -(x1 - 1))
@@ -74,7 +98,7 @@ export const remapElement = (selected, changes, m) => {
       }
 
       if (m.d < 0) {
-        // flip y
+        // Flip y
         const y1 = newgrad.getAttribute('y1')
         const y2 = newgrad.getAttribute('y2')
         newgrad.setAttribute('y1', -(y1 - 1))
@@ -87,34 +111,22 @@ export const remapElement = (selected, changes, m) => {
   })
 
   const elName = selected.tagName
-  if (elName === 'g' || elName === 'text' || elName === 'tspan' || elName === 'use') {
-    // if it was a translate, then just update x,y
-    if (m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && (m.e !== 0 || m.f !== 0)) {
-      // [T][M] = [M][T']
-      // therefore [T'] = [M_inv][T][M]
-      const existing = transformListToTransform(selected).matrix
-      const tNew = matrixMultiply(existing.inverse(), m, existing)
-      changes.x = Number.parseFloat(changes.x) + tNew.e
-      changes.y = Number.parseFloat(changes.y) + tNew.f
-    } else {
-      // we just absorb all matrices into the element and don't do any remapping
-      const chlist = getTransformList(selected)
-      const mt = svgCanvas.getSvgRoot().createSVGTransform()
-      mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m))
-      chlist.clear()
-      chlist.appendItem(mt)
-    }
+
+  // Skip remapping for '<use>' elements
+  if (elName === 'use') {
+    // Do not remap '<use>' elements; transformations are handled via 'transform' attribute
+    return
   }
 
-  // now we have a set of changes and an applied reduced transform list
-  // we apply the changes directly to the DOM
+  // Now we have a set of changes and an applied reduced transform list
+  // We apply the changes directly to the DOM
   switch (elName) {
     case 'foreignObject':
     case 'rect':
     case 'image': {
-    // Allow images to be inverted (give them matrix when flipped)
+      // Allow images to be inverted (give them matrix when flipped)
       if (elName === 'image' && (m.a < 0 || m.d < 0)) {
-      // Convert to matrix
+        // Convert to matrix
         const chlist = getTransformList(selected)
         const mt = svgCanvas.getSvgRoot().createSVGTransform()
         mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m))
@@ -131,66 +143,102 @@ export const remapElement = (selected, changes, m) => {
       }
       finishUp()
       break
-    } case 'ellipse': {
+    }
+    case 'ellipse': {
       const c = remap(changes.cx, changes.cy)
       changes.cx = c.x
       changes.cy = c.y
-      changes.rx = scalew(changes.rx)
-      changes.ry = scaleh(changes.ry)
-      changes.rx = Math.abs(changes.rx)
-      changes.ry = Math.abs(changes.ry)
+      changes.rx = Math.abs(scalew(changes.rx))
+      changes.ry = Math.abs(scaleh(changes.ry))
       finishUp()
       break
-    } case 'circle': {
+    }
+    case 'circle': {
       const c = remap(changes.cx, changes.cy)
       changes.cx = c.x
       changes.cy = c.y
-      // take the minimum of the new selected box's dimensions for the new circle radius
+      // Take the minimum of the new dimensions for the new circle radius
       const tbox = transformBox(box.x, box.y, box.width, box.height, m)
-      const w = tbox.tr.x - tbox.tl.x; const h = tbox.bl.y - tbox.tl.y
-      changes.r = Math.min(w / 2, h / 2)
-
-      if (changes.r) { changes.r = Math.abs(changes.r) }
+      const w = tbox.tr.x - tbox.tl.x
+      const h = tbox.bl.y - tbox.tl.y
+      changes.r = Math.min(Math.abs(w / 2), Math.abs(h / 2))
       finishUp()
       break
-    } case 'line': {
+    }
+    case 'line': {
       const pt1 = remap(changes.x1, changes.y1)
       const pt2 = remap(changes.x2, changes.y2)
       changes.x1 = pt1.x
       changes.y1 = pt1.y
       changes.x2 = pt2.x
       changes.y2 = pt2.y
-    } // Fallthrough
-    case 'text':
-    case 'tspan':
-    case 'use': {
       finishUp()
       break
-    } case 'g': {
+    }
+    case 'text': {
+      const pt = remap(changes.x, changes.y)
+      changes.x = pt.x
+      changes.y = pt.y
+      finishUp()
+
+      // Handle child 'tspan' elements
+      const childNodes = selected.childNodes
+      for (let i = 0; i < childNodes.length; i++) {
+        const child = childNodes[i]
+        if (child.nodeType === 1 && child.tagName === 'tspan') {
+          const childChanges = {}
+          const childX = child.getAttribute('x')
+          const childY = child.getAttribute('y')
+          if (childX !== null) {
+            childChanges.x = convertToNum('x', childX)
+          } else {
+            // If 'x' is not set, inherit from parent
+            childChanges.x = changes.x
+          }
+          if (childY !== null) {
+            childChanges.y = convertToNum('y', childY)
+          } else {
+            // If 'y' is not set, inherit from parent
+            childChanges.y = changes.y
+          }
+          const childPt = remap(childChanges.x, childChanges.y)
+          childChanges.x = childPt.x
+          childChanges.y = childPt.y
+          assignAttributes(child, childChanges, 1000, true)
+        }
+      }
+      break
+    }
+    case 'tspan': {
+      const pt = remap(changes.x, changes.y)
+      changes.x = pt.x
+      changes.y = pt.y
+      finishUp()
+      break
+    }
+    case 'g': {
       const dataStorage = svgCanvas.getDataStorage()
       const gsvg = dataStorage.get(selected, 'gsvg')
       if (gsvg) {
         assignAttributes(gsvg, changes, 1000, true)
       }
       break
-    } case 'polyline':
+    }
+    case 'polyline':
     case 'polygon': {
-      changes.points.forEach((pt) => {
+      changes.points.forEach(pt => {
         const { x, y } = remap(pt.x, pt.y)
         pt.x = x
         pt.y = y
       })
-
-      // const len = changes.points.length;
-      let pstr = ''
-      changes.points.forEach((pt) => {
-        pstr += pt.x + ',' + pt.y + ' '
-      })
+      const pstr = changes.points.map(pt => `${pt.x},${pt.y}`).join(' ')
       selected.setAttribute('points', pstr)
       break
-    } case 'path': {
+    }
+    case 'path': {
+      // Handle path segments
       const segList = selected.pathSegList
-      let len = segList.numberOfItems
+      const len = segList.numberOfItems
       changes.d = []
       for (let i = 0; i < len; ++i) {
         const seg = segList.getItem(i)
@@ -210,7 +258,6 @@ export const remapElement = (selected, changes, m) => {
         }
       }
 
-      len = changes.d.length
       const firstseg = changes.d[0]
       let currentpt
       if (len > 0) {
@@ -221,11 +268,10 @@ export const remapElement = (selected, changes, m) => {
       for (let i = 1; i < len; ++i) {
         const seg = changes.d[i]
         const { type } = seg
-        // if absolute or first segment, we want to remap x, y, x1, y1, x2, y2
-        // if relative, we want to scalew, scaleh
-        if (type % 2 === 0) { // absolute
-          const thisx = (seg.x !== undefined) ? seg.x : currentpt.x // for V commands
-          const thisy = (seg.y !== undefined) ? seg.y : currentpt.y // for H commands
+        // If absolute or first segment, remap x, y, x1, y1, x2, y2
+        if (type % 2 === 0) {
+          const thisx = seg.x !== undefined ? seg.x : currentpt.x // For V commands
+          const thisy = seg.y !== undefined ? seg.y : currentpt.y // For H commands
           const pt = remap(thisx, thisy)
           const pt1 = remap(seg.x1, seg.y1)
           const pt2 = remap(seg.x2, seg.y2)
@@ -237,7 +283,8 @@ export const remapElement = (selected, changes, m) => {
           seg.y2 = pt2.y
           seg.r1 = scalew(seg.r1)
           seg.r2 = scaleh(seg.r2)
-        } else { // relative
+        } else {
+          // For relative segments, scale x, y, x1, y1, x2, y2
           seg.x = scalew(seg.x)
           seg.y = scaleh(seg.y)
           seg.x1 = scalew(seg.x1)
@@ -247,10 +294,10 @@ export const remapElement = (selected, changes, m) => {
           seg.r1 = scalew(seg.r1)
           seg.r2 = scaleh(seg.r2)
         }
-      } // for each segment
+      }
 
       let dstr = ''
-      changes.d.forEach((seg) => {
+      changes.d.forEach(seg => {
         const { type } = seg
         dstr += pathMap[type]
         switch (type) {
@@ -272,8 +319,19 @@ export const remapElement = (selected, changes, m) => {
             break
           case 7: // relative cubic (c)
           case 6: // absolute cubic (C)
-            dstr += seg.x1 + ',' + seg.y1 + ' ' + seg.x2 + ',' + seg.y2 + ' ' +
-              seg.x + ',' + seg.y + ' '
+            dstr +=
+              seg.x1 +
+              ',' +
+              seg.y1 +
+              ' ' +
+              seg.x2 +
+              ',' +
+              seg.y2 +
+              ' ' +
+              seg.x +
+              ',' +
+              seg.y +
+              ' '
             break
           case 9: // relative quad (q)
           case 8: // absolute quad (Q)
@@ -281,18 +339,35 @@ export const remapElement = (selected, changes, m) => {
             break
           case 11: // relative elliptical arc (a)
           case 10: // absolute elliptical arc (A)
-            dstr += seg.r1 + ',' + seg.r2 + ' ' + seg.angle + ' ' + Number(seg.largeArcFlag) +
-              ' ' + Number(seg.sweepFlag) + ' ' + seg.x + ',' + seg.y + ' '
+            dstr +=
+              seg.r1 +
+              ',' +
+              seg.r2 +
+              ' ' +
+              seg.angle +
+              ' ' +
+              Number(seg.largeArcFlag) +
+              ' ' +
+              Number(seg.sweepFlag) +
+              ' ' +
+              seg.x +
+              ',' +
+              seg.y +
+              ' '
             break
           case 17: // relative smooth cubic (s)
           case 16: // absolute smooth cubic (S)
             dstr += seg.x2 + ',' + seg.y2 + ' ' + seg.x + ',' + seg.y + ' '
             break
+          default:
+            break
         }
       })
 
-      selected.setAttribute('d', dstr)
+      selected.setAttribute('d', dstr.trim())
       break
     }
+    default:
+      break
   }
 }