@svgedit/svgcanvas 7.2.7 → 7.4.2

package/core/select.js

@@ -10,12 +10,37 @@ import { isWebkit } from '../common/browser.js'
 import { getRotationAngle, getBBox, getStrokedBBox } from './utilities.js'
 import { transformListToTransform, transformBox, transformPoint, matrixMultiply, getTransformList } from './math.js'
 import { NS } from './namespaces'
+import { warn } from '../common/logger.js'
 
 let svgCanvas
-let selectorManager_ // A Singleton
 // change radius if touch screen
 const gripRadius = window.ontouchstart ? 10 : 4
 
+/**
+ * Private singleton manager for selector state
+ */
+class SelectModule {
+  #selectorManager = null
+
+  /**
+   * Initialize the select module with canvas
+   * @param {Object} canvas - The SVG canvas instance
+   * @returns {void}
+   */
+  init (canvas) {
+    svgCanvas = canvas
+    this.#selectorManager = new SelectorManager()
+  }
+
+  /**
+   * Get the singleton SelectorManager instance
+   * @returns {SelectorManager} The SelectorManager instance
+   */
+  getSelectorManager () {
+    return this.#selectorManager
+  }
+}
+
 /**
 * Private class for DOM element selection boxes.
 */
@@ -38,14 +63,14 @@ export class Selector {
     // this holds a reference to the <g> element that holds all visual elements of the selector
     this.selectorGroup = svgCanvas.createSVGElement({
       element: 'g',
-      attr: { id: ('selectorGroup' + this.id) }
+      attr: { id: `selectorGroup${this.id}` }
     })
 
     // this holds a reference to the path rect
     this.selectorRect = svgCanvas.createSVGElement({
       element: 'path',
       attr: {
-        id: ('selectedBox' + this.id),
+        id: `selectedBox${this.id}`,
         fill: 'none',
         stroke: '#22C',
         'stroke-width': '1',
@@ -91,11 +116,11 @@ export class Selector {
   */
   showGrips (show) {
     const bShow = show ? 'inline' : 'none'
-    selectorManager_.selectorGripsGroup.setAttribute('display', bShow)
+    selectModule.getSelectorManager().selectorGripsGroup.setAttribute('display', bShow)
     const elem = this.selectedElement
     this.hasGrips = show
     if (elem && show) {
-      this.selectorGroup.append(selectorManager_.selectorGripsGroup)
+      this.selectorGroup.append(selectModule.getSelectorManager().selectorGripsGroup)
       Selector.updateGripCursors(getRotationAngle(elem))
     }
   }
@@ -108,7 +133,7 @@ export class Selector {
   resize (bbox) {
     const dataStorage = svgCanvas.getDataStorage()
     const selectedBox = this.selectorRect
-    const mgr = selectorManager_
+    const mgr = selectModule.getSelectorManager()
     const selectedGrips = mgr.selectorGrips
     const selected = this.selectedElement
     const zoom = svgCanvas.getZoom()
@@ -130,7 +155,7 @@ export class Selector {
     while (currentElt.parentNode) {
       if (currentElt.parentNode && currentElt.parentNode.tagName === 'g' && currentElt.parentNode.transform) {
         if (currentElt.parentNode.transform.baseVal.numberOfItems) {
-          parentTransformationMatrix = matrixMultiply(transformListToTransform(getTransformList(selected.parentNode)).matrix, parentTransformationMatrix)
+          parentTransformationMatrix = matrixMultiply(transformListToTransform(getTransformList(currentElt.parentNode)).matrix, parentTransformationMatrix)
         }
       }
       currentElt = currentElt.parentNode
@@ -213,10 +238,7 @@ export class Selector {
         nbah = (maxy - miny)
       }
 
-      const dstr = 'M' + nbax + ',' + nbay +
-        ' L' + (nbax + nbaw) + ',' + nbay +
-        ' ' + (nbax + nbaw) + ',' + (nbay + nbah) +
-        ' ' + nbax + ',' + (nbay + nbah) + 'z'
+      const dstr = `M${nbax},${nbay} L${nbax + nbaw},${nbay} ${nbax + nbaw},${nbay + nbah} ${nbax},${nbay + nbah}z`
 
       const xform = angle ? 'rotate(' + [angle, cx, cy].join(',') + ')' : ''
 
@@ -257,15 +279,15 @@ export class Selector {
   * @returns {void}
   */
   static updateGripCursors (angle) {
-    const dirArr = Object.keys(selectorManager_.selectorGrips)
+    const dirArr = Object.keys(selectModule.getSelectorManager().selectorGrips)
     let steps = Math.round(angle / 45)
     if (steps < 0) { steps += 8 }
     while (steps > 0) {
       dirArr.push(dirArr.shift())
       steps--
     }
-    Object.values(selectorManager_.selectorGrips).forEach((gripElement, i) => {
-      gripElement.setAttribute('style', ('cursor:' + dirArr[i] + '-resize'))
+    Object.values(selectModule.getSelectorManager().selectorGrips).forEach((gripElement, i) => {
+      gripElement.setAttribute('style', `cursor:${dirArr[i]}-resize`)
     })
   }
 }
@@ -341,10 +363,10 @@ export class SelectorManager {
       const grip = svgCanvas.createSVGElement({
         element: 'circle',
         attr: {
-          id: ('selectorGrip_resize_' + dir),
+          id: `selectorGrip_resize_${dir}`,
           fill: '#22C',
           r: gripRadius,
-          style: ('cursor:' + dir + '-resize'),
+          style: `cursor:${dir}-resize`,
           // This expands the mouse-able area of the grips making them
           // easier to grab with the mouse.
           // This works in Opera and WebKit, but does not work in Firefox
@@ -462,7 +484,7 @@ export class SelectorManager {
     const sel = this.selectorMap[elem.id]
     if (!sel?.locked) {
       // TODO(codedread): Ensure this exists in this module.
-      console.warn('WARNING! selector was released but was already unlocked')
+      warn('WARNING! selector was released but was already unlocked', null, 'select')
     }
     for (let i = 0; i < N; ++i) {
       if (this.selectors[i] && this.selectors[i] === sel) {
@@ -541,6 +563,9 @@ export class SelectorManager {
  * @property {module:select.Dimensions} dimensions
  */
 
+// Export singleton instance for backward compatibility
+const selectModule = new SelectModule()
+
 /**
  * Initializes this module.
  * @function module:select.init
@@ -549,12 +574,11 @@ export class SelectorManager {
  * @returns {void}
  */
 export const init = (canvas) => {
-  svgCanvas = canvas
-  selectorManager_ = new SelectorManager()
+  selectModule.init(canvas)
 }
 
 /**
  * @function module:select.getSelectorManager
  * @returns {module:select.SelectorManager} The SelectorManager instance.
  */
-export const getSelectorManager = () => selectorManager_
+export const getSelectorManager = () => selectModule.getSelectorManager()

package/core/selected-elem.js

@@ -9,6 +9,7 @@
 import { NS } from './namespaces.js'
 import * as hstry from './history.js'
 import * as pathModule from './path.js'
+import { warn, error } from '../common/logger.js'
 import {
   getStrokedBBoxDefaultVisible,
   setHref,
@@ -63,6 +64,7 @@ export const init = canvas => {
   svgCanvas.updateCanvas = updateCanvas // Updates the editor canvas width/height/position after a zoom has occurred.
   svgCanvas.cycleElement = cycleElement // Select the next/previous element within the current layer.
   svgCanvas.deleteSelectedElements = deleteSelectedElements // Removes all selected elements from the DOM and adds the change to the history
+  svgCanvas.flipSelectedElements = flipSelectedElements // Flips selected elements horizontally or vertically
 }
 
 /**
@@ -103,14 +105,17 @@ const moveToBottomSelectedElem = () => {
     let t = selected
     const oldParent = t.parentNode
     const oldNextSibling = t.nextSibling
-    let { firstChild } = t.parentNode
-    if (firstChild.tagName === 'title') {
-      firstChild = firstChild.nextSibling
+    let firstChild = t.parentNode.firstElementChild
+    if (firstChild?.tagName === 'title') {
+      firstChild = firstChild.nextElementSibling
     }
     // This can probably be removed, as the defs should not ever apppear
     // inside a layer group
-    if (firstChild.tagName === 'defs') {
-      firstChild = firstChild.nextSibling
+    if (firstChild?.tagName === 'defs') {
+      firstChild = firstChild.nextElementSibling
+    }
+    if (!firstChild) {
+      return
     }
     t = t.parentNode.insertBefore(t, firstChild)
     // If the element actually moved position, add the command and fire the changed
@@ -178,7 +183,7 @@ const moveUpDownSelected = dir => {
   // event handler.
   if (oldNextSibling !== t.nextSibling) {
     svgCanvas.addCommandToHistory(
-      new MoveElementCommand(t, oldNextSibling, oldParent, 'Move ' + dir)
+      new MoveElementCommand(t, oldNextSibling, oldParent, `Move ${dir}`)
     )
     svgCanvas.call('changed', [t])
   }
@@ -207,6 +212,9 @@ const moveSelectedElements = (dx, dy, undoable = true) => {
   const batchCmd = new BatchCommand('position')
   selectedElements.forEach((selected, i) => {
     if (selected) {
+      // Store the existing transform before modifying
+      const existingTransform = selected.getAttribute('transform') || ''
+
       const xform = svgCanvas.getSvgRoot().createSVGTransform()
       const tlist = getTransformList(selected)
 
@@ -226,6 +234,12 @@ const moveSelectedElements = (dx, dy, undoable = true) => {
       const cmd = recalculateDimensions(selected)
       if (cmd) {
         batchCmd.addSubCommand(cmd)
+      } else if ((selected.getAttribute('transform') || '') !== existingTransform) {
+        // For groups and other elements where recalculateDimensions returns null,
+        // record the transform change directly
+        batchCmd.addSubCommand(
+          new ChangeElementCommand(selected, { transform: existingTransform })
+        )
       }
 
       svgCanvas
@@ -264,9 +278,11 @@ const cloneSelectedElements = (x, y) => {
   const index = el => {
     if (!el) return -1
     let i = 0
+    let current = el
     do {
       i++
-    } while (el === el.previousElementSibling)
+      current = current.previousElementSibling
+    } while (current)
     return i
   }
 
@@ -621,13 +637,87 @@ const deleteSelectedElements = () => {
   svgCanvas.clearSelection()
 }
 
+/**
+ * Flips selected elements horizontally or vertically by transforming actual coordinates.
+ * @function module:selected-elem.SvgCanvas#flipSelectedElements
+ * @param {number} scaleX - Scale factor for X axis (-1 for horizontal flip, 1 for no flip)
+ * @param {number} scaleY - Scale factor for Y axis (1 for no flip, -1 for vertical flip)
+ * @fires module:selected-elem.SvgCanvas#event:changed
+ * @returns {void}
+ */
+const flipSelectedElements = (scaleX, scaleY) => {
+  const selectedElements = svgCanvas.getSelectedElements()
+  const batchCmd = new BatchCommand('Flip Elements')
+  const svgRoot = svgCanvas.getSvgRoot()
+
+  selectedElements.forEach(selected => {
+    if (!selected) return
+
+    const bbox = getStrokedBBoxDefaultVisible([selected])
+    if (!bbox) return
+
+    const cx = bbox.x + bbox.width / 2
+    const cy = bbox.y + bbox.height / 2
+    const existingTransform = selected.getAttribute('transform') || ''
+
+    const flipMatrix = svgRoot
+      .createSVGMatrix()
+      .translate(cx, cy)
+      .scaleNonUniform(scaleX, scaleY)
+      .translate(-cx, -cy)
+
+    const tlist = getTransformList(selected)
+    const combinedMatrix = matrixMultiply(
+      transformListToTransform(tlist).matrix,
+      flipMatrix
+    )
+
+    const flipTransform = svgRoot.createSVGTransform()
+    flipTransform.setMatrix(combinedMatrix)
+
+    tlist.clear()
+    tlist.appendItem(flipTransform)
+
+    const prevStartTransform = svgCanvas.getStartTransform
+      ? svgCanvas.getStartTransform()
+      : null
+    if (svgCanvas.setStartTransform) {
+      svgCanvas.setStartTransform(existingTransform)
+    }
+
+    const cmd = recalculateDimensions(selected)
+
+    if (svgCanvas.setStartTransform) {
+      svgCanvas.setStartTransform(prevStartTransform)
+    }
+
+    if (cmd) {
+      batchCmd.addSubCommand(cmd)
+    } else if ((selected.getAttribute('transform') || '') !== existingTransform) {
+      batchCmd.addSubCommand(
+        new ChangeElementCommand(selected, { transform: existingTransform })
+      )
+    }
+
+    svgCanvas
+      .gettingSelectorManager()
+      .requestSelector(selected)
+      .resize()
+  })
+
+  if (!batchCmd.isEmpty()) {
+    svgCanvas.addCommandToHistory(batchCmd)
+    svgCanvas.call('changed', selectedElements.filter(Boolean))
+  }
+}
+
 /**
  * Remembers the current selected elements on the clipboard.
  * @function module:selected-elem.SvgCanvas#copySelectedElements
  * @returns {void}
  */
 const copySelectedElements = () => {
-  const selectedElements = svgCanvas.getSelectedElements()
+  const selectedElements = svgCanvas.getSelectedElements().filter(Boolean)
   const data = JSON.stringify(
     selectedElements.map(x => svgCanvas.getJsonFromSvgElements(x))
   )
@@ -637,7 +727,7 @@ const copySelectedElements = () => {
 
   // Context menu might not exist (it is provided by editor.js).
   const canvMenu = document.getElementById('se-cmenu_canvas')
-  canvMenu.setAttribute('enablemenuitems', '#paste,#paste_in_place')
+  canvMenu?.setAttribute('enablemenuitems', '#paste,#paste_in_place')
 }
 
 /**
@@ -791,10 +881,10 @@ const pushGroupProperty = (g, undoable) => {
           // Change this in future for different filters
           const suffix =
             blurElem?.tagName === 'feGaussianBlur' ? 'blur' : 'filter'
-          gfilter.id = elem.id + '_' + suffix
+          gfilter.id = `${elem.id}_${suffix}`
           svgCanvas.changeSelectedAttribute(
             'filter',
-            'url(#' + gfilter.id + ')',
+            `url(#${gfilter.id})`,
             [elem]
           )
         }
@@ -901,20 +991,29 @@ const pushGroupProperty = (g, undoable) => {
         changes = {}
         changes.transform = oldxform || ''
 
+        // Simply prepend the group's transform to the child's transform list
+        // New transform = [group transform] [child transform]
+        // This preserves the correct application order
         const newxform = svgCanvas.getSvgRoot().createSVGTransform()
+        newxform.setMatrix(m)
 
-        // [ gm ] [ chm ] = [ chm ] [ gm' ]
-        // [ gm' ] = [ chmInv ] [ gm ] [ chm ]
-        const chm = transformListToTransform(chtlist).matrix
-        const chmInv = chm.inverse()
-        const gm = matrixMultiply(chmInv, m, chm)
-        newxform.setMatrix(gm)
-        chtlist.appendItem(newxform)
-      }
-      const cmd = recalculateDimensions(elem)
-      if (cmd) {
-        batchCmd.addSubCommand(cmd)
+        // Insert group's transform at the beginning of child's transform list
+        if (chtlist.numberOfItems) {
+          chtlist.insertItemBefore(newxform, 0)
+        } else {
+          chtlist.appendItem(newxform)
+        }
+
+        // Record the transform change for undo/redo
+        if (undoable) {
+          batchCmd.addSubCommand(new ChangeElementCommand(elem, changes))
+        }
       }
+      // NOTE: We intentionally do NOT call recalculateDimensions here because:
+      // 1. It reorders transforms (moves rotate before translate), changing the visual result
+      // 2. It recalculates rotation centers, causing elements to jump
+      // 3. The prepended group transform is already in the correct position
+      // Just leave the transforms as-is after prepending the group's transform
     }
   }
 
@@ -970,8 +1069,13 @@ const convertToGroup = elem => {
     tlist.appendItem(xform)
     recalculateDimensions(elem)
     svgCanvas.call('selected', [elem])
+    return elem
   } else if (dataStorage.has($elem, 'symbol')) {
     elem = dataStorage.get($elem, 'symbol')
+    if (!elem) {
+      warn('Unable to convert <use>: missing symbol reference', null, 'selected-elem')
+      return
+    }
 
     ts = $elem.getAttribute('transform') || ''
     const pos = {
@@ -990,14 +1094,15 @@ const convertToGroup = elem => {
     // Not ideal, but works
     ts += ' translate(' + (pos.x || 0) + ',' + (pos.y || 0) + ')'
 
-    const prev = $elem.previousElementSibling
+    const useParent = $elem.parentNode
+    const useNextSibling = $elem.nextSibling
 
     // Remove <use> element
     batchCmd.addSubCommand(
       new RemoveElementCommand(
         $elem,
-        $elem.nextElementSibling,
-        $elem.parentNode
+        useNextSibling,
+        useParent
       )
     )
     $elem.remove()
@@ -1049,7 +1154,9 @@ const convertToGroup = elem => {
     // now give the g itself a new id
     g.id = svgCanvas.getNextId()
 
-    prev.after(g)
+    if (useParent) {
+      useParent.insertBefore(g, useNextSibling)
+    }
 
     if (parent) {
       if (!hasMore) {
@@ -1077,7 +1184,7 @@ const convertToGroup = elem => {
       try {
         recalculateDimensions(n)
       } catch (e) {
-        console.error(e)
+        error('Error recalculating dimensions', e, 'selected-elem')
       }
     })
 
@@ -1097,8 +1204,10 @@ const convertToGroup = elem => {
     }
 
     svgCanvas.addCommandToHistory(batchCmd)
+    return g
   } else {
-    console.warn('Unexpected element to ungroup:', elem)
+    warn('Unexpected element to ungroup:', elem, 'selected-elem')
+    return null
   }
 }
 
@@ -1116,17 +1225,29 @@ const ungroupSelectedElement = () => {
     return
   }
   if (dataStorage.has(g, 'gsvg') || dataStorage.has(g, 'symbol')) {
-    // Is svg, so actually convert to group
-    convertToGroup(g)
-    return
-  }
-  if (g.tagName === 'use') {
+    // Is svg (e.g. imported content), so convert to a real group first, then
+    // fall through below to actually ungroup/flatten that new group - a
+    // single Ungroup action on imported content should ungroup it, not just
+    // silently swap its <use>/gsvg wrapper for a <g> that still needs a
+    // second Ungroup to do anything.
+    g = convertToGroup(g)
+    if (!g) { return }
+  } else if (g.tagName === 'use') {
     // Somehow doesn't have data set, so retrieve
-    const symbol = getElement(getHref(g).substr(1))
+    const href = getHref(g)
+    if (!href || !href.startsWith('#')) {
+      warn('Unexpected <use> without local reference:', g, 'selected-elem')
+      return
+    }
+    const symbol = getElement(href.slice(1))
+    if (!symbol) {
+      warn('Unexpected <use> without resolved reference:', g, 'selected-elem')
+      return
+    }
     dataStorage.put(g, 'symbol', symbol)
     dataStorage.put(g, 'ref', symbol)
-    convertToGroup(g)
-    return
+    g = convertToGroup(g)
+    if (!g) { return }
   }
   const parentsA = getParents(g.parentNode, 'a')
   if (parentsA?.length) {
@@ -1206,7 +1327,7 @@ const updateCanvas = (w, h) => {
     height: svgCanvas.contentH * zoom,
     x,
     y,
-    viewBox: '0 0 ' + svgCanvas.contentW + ' ' + svgCanvas.contentH
+    viewBox: `0 0 ${svgCanvas.contentW} ${svgCanvas.contentH}`
   })
 
   assignAttributes(bg, {
@@ -1226,7 +1347,7 @@ const updateCanvas = (w, h) => {
 
   svgCanvas.selectorManager.selectorParentGroup.setAttribute(
     'transform',
-    'translate(' + x + ',' + y + ')'
+    `translate(${x},${y})`
   )
 
   /**

package/core/selection.js

@@ -409,8 +409,11 @@ const setRotationAngle = (val, preventUndo) => {
       cy,
       transformListToTransform(tlist).matrix
     )
+    // Safety check: if center coordinates are invalid (NaN), fall back to untransformed bbox center
+    const centerX = Number.isFinite(center.x) ? center.x : cx
+    const centerY = Number.isFinite(center.y) ? center.y : cy
     const Rnc = svgCanvas.getSvgRoot().createSVGTransform()
-    Rnc.setRotate(val, center.x, center.y)
+    Rnc.setRotate(val, centerX, centerY)
     if (tlist.numberOfItems) {
       tlist.insertItemBefore(Rnc, 0)
     } else {
@@ -424,13 +427,20 @@ const setRotationAngle = (val, preventUndo) => {
     // we need to undo it, then redo it so it can be undo-able! :)
     // TODO: figure out how to make changes to transform list undo-able cross-browser?
     let newTransform = elem.getAttribute('transform')
+
     // new transform is something like: 'rotate(5 1.39625e-8 -11)'
     // we round the x so it becomes 'rotate(5 0 -11)'
-    if (newTransform) {
-      const newTransformArray = newTransform.split(/[ ,]+/)
-      const round = (num) => Math.round(Number(num) + Number.EPSILON)
-      const x = round(newTransformArray[1])
-      newTransform = `${newTransformArray[0]} ${x} ${newTransformArray[2]}`
+    // Only do this manipulation if the first transform is actually a rotation
+    if (newTransform && newTransform.startsWith('rotate(')) {
+      const match = newTransform.match(/^rotate\(([\d.\-e]+)\s+([\d.\-e]+)\s+([\d.\-e]+)\)(.*)/)
+      if (match) {
+        const angle = Number.parseFloat(match[1])
+        const round = (num) => Math.round(Number(num) + Number.EPSILON)
+        const x = round(match[2])
+        const y = round(match[3])
+        const restOfTransform = match[4] || '' // Preserve any transforms after the rotate
+        newTransform = `rotate(${angle} ${x} ${y})${restOfTransform}`
+      }
     }
 
     if (oldTransform) {