@svgedit/svgcanvas 7.2.3 → 7.2.4

package/CHANGES.md

@@ -1,5 +1,9 @@
 # svgcanvas CHANGES
 
+## 7.2.4
+- bug fixes 
+- update dependencies
+
 ## 7.2.3
 - update dependencies
 

package/core/coords.js

@@ -5,68 +5,90 @@
  */
 
 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 +96,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 +109,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 if flipped
         const chlist = getTransformList(selected)
         const mt = svgCanvas.getSvgRoot().createSVGTransform()
         mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m))
@@ -131,66 +141,133 @@ 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
+
+      // Scale font-size
+      let fontSize = selected.getAttribute('font-size')
+      if (!fontSize) {
+        // If not directly set, try computed style
+        fontSize = window.getComputedStyle(selected).fontSize
+      }
+      const fontSizeNum = parseFloat(fontSize)
+      if (!isNaN(fontSizeNum)) {
+        // Assume uniform scaling and use m.a
+        changes['font-size'] = fontSizeNum * Math.abs(m.a)
+      }
+
+      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 hasX = child.hasAttribute('x')
+          const hasY = child.hasAttribute('y')
+          if (hasX) {
+            const childX = convertToNum('x', child.getAttribute('x'))
+            const childPtX = remap(childX, changes.y).x
+            childChanges.x = childPtX
+          }
+          if (hasY) {
+            const childY = convertToNum('y', child.getAttribute('y'))
+            const childPtY = remap(changes.x, childY).y
+            childChanges.y = childPtY
+          }
+
+          let tspanFS = child.getAttribute('font-size')
+          if (!tspanFS) {
+            tspanFS = window.getComputedStyle(child).fontSize
+          }
+          const tspanFSNum = parseFloat(tspanFS)
+          if (!isNaN(tspanFSNum)) {
+            childChanges['font-size'] = tspanFSNum * Math.abs(m.a)
+          }
+
+          if (hasX || hasY || childChanges['font-size']) {
+            assignAttributes(child, childChanges, 1000, true)
+          }
+        }
+      }
+      break
+    }
+    case 'tspan': {
+      const pt = remap(changes.x, changes.y)
+      changes.x = pt.x
+      changes.y = pt.y
+
+      // Handle tspan font-size scaling
+      let tspanFS = selected.getAttribute('font-size')
+      if (!tspanFS) {
+        tspanFS = window.getComputedStyle(selected).fontSize
+      }
+      const tspanFSNum = parseFloat(tspanFS)
+      if (!isNaN(tspanFSNum)) {
+        changes['font-size'] = tspanFSNum * Math.abs(m.a)
+      }
+
+      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 +287,6 @@ export const remapElement = (selected, changes, m) => {
         }
       }
 
-      len = changes.d.length
       const firstseg = changes.d[0]
       let currentpt
       if (len > 0) {
@@ -221,11 +297,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 +312,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 +323,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 +348,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 +368,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
   }
 }