@svgedit/svgcanvas 7.2.6 → 7.4.1

package/core/blur-event.js

@@ -16,44 +16,92 @@ export const init = (canvas) => {
   svgCanvas = canvas
 }
 
+/**
+ * @param {Element} filterElem
+ * @returns {?Element}
+ */
+const getFeGaussianBlurElem = (filterElem) => {
+  if (!filterElem || filterElem.nodeType !== 1) return null
+  return filterElem.querySelector('feGaussianBlur') || filterElem.firstElementChild
+}
+
 /**
 * Sets the `stdDeviation` blur value on the selected element without being undoable.
 * @function module:svgcanvas.SvgCanvas#setBlurNoUndo
 * @param {Float} val - The new `stdDeviation` value
 * @returns {void}
 */
-export const setBlurNoUndo = function (val) {
+export const setBlurNoUndo = (val) => {
   const selectedElements = svgCanvas.getSelectedElements()
-  if (!svgCanvas.getFilter()) {
-    svgCanvas.setBlur(val)
-    return
+  const elem = selectedElements[0]
+  if (!elem) return
+
+  let filter = svgCanvas.getFilter()
+  if (!filter) {
+    filter = svgCanvas.getElement(`${elem.id}_blur`)
   }
+
   if (val === 0) {
     // Don't change the StdDev, as that will hide the element.
     // Instead, just remove the value for "filter"
     svgCanvas.changeSelectedAttributeNoUndo('filter', '')
     svgCanvas.setFilterHidden(true)
   } else {
-    const elem = selectedElements[0]
-    if (svgCanvas.getFilterHidden()) {
-      svgCanvas.changeSelectedAttributeNoUndo('filter', 'url(#' + elem.id + '_blur)')
+    if (!filter) {
+      // Create the filter if missing, but don't add history.
+      const blurElem = svgCanvas.addSVGElementsFromJson({
+        element: 'feGaussianBlur',
+        attr: {
+          in: 'SourceGraphic',
+          stdDeviation: val
+        }
+      })
+      filter = svgCanvas.addSVGElementsFromJson({
+        element: 'filter',
+        attr: {
+          id: `${elem.id}_blur`
+        }
+      })
+      filter.append(blurElem)
+      svgCanvas.findDefs().append(filter)
     }
-    const filter = svgCanvas.getFilter()
-    svgCanvas.changeSelectedAttributeNoUndo('stdDeviation', val, [filter.firstChild])
+
+    if (svgCanvas.getFilterHidden() || !elem.getAttribute('filter')) {
+      svgCanvas.changeSelectedAttributeNoUndo('filter', `url(#${filter.id})`)
+      svgCanvas.setFilterHidden(false)
+    }
+
+    const blurElem = getFeGaussianBlurElem(filter)
+    if (!blurElem) {
+      return
+    }
+    svgCanvas.changeSelectedAttributeNoUndo('stdDeviation', val, [blurElem])
     svgCanvas.setBlurOffsets(filter, val)
   }
 }
 
 /**
-*
+* Finishes the blur change command and adds it to history if not empty.
 * @returns {void}
 */
-function finishChange () {
+const finishChange = () => {
+  const curCommand = svgCanvas.getCurCommand()
+  if (!curCommand) {
+    svgCanvas.setCurCommand(null)
+    svgCanvas.setFilter(null)
+    svgCanvas.setFilterHidden(false)
+    return
+  }
   const bCmd = svgCanvas.undoMgr.finishUndoableChange()
-  svgCanvas.getCurCommand().addSubCommand(bCmd)
-  svgCanvas.addCommandToHistory(svgCanvas.getCurCommand())
+  if (!bCmd.isEmpty()) {
+    curCommand.addSubCommand(bCmd)
+  }
+  if (!curCommand.isEmpty()) {
+    svgCanvas.addCommandToHistory(curCommand)
+  }
   svgCanvas.setCurCommand(null)
   svgCanvas.setFilter(null)
+  svgCanvas.setFilterHidden(false)
 }
 
 /**
@@ -64,7 +112,13 @@ function finishChange () {
 * @param {Float} stdDev - The standard deviation value on which to base the offset size
 * @returns {void}
 */
-export const setBlurOffsets = function (filterElem, stdDev) {
+export const setBlurOffsets = (filterElem, stdDev) => {
+  if (!filterElem || filterElem.nodeType !== 1) {
+    return
+  }
+
+  stdDev = Number(stdDev) || 0
+
   if (stdDev > 3) {
     // TODO: Create algorithm here where size is based on expected blur
     svgCanvas.assignAttributes(filterElem, {
@@ -88,7 +142,7 @@ export const setBlurOffsets = function (filterElem, stdDev) {
 * @param {boolean} complete - Whether or not the action should be completed (to add to the undo manager)
 * @returns {void}
 */
-export const setBlur = function (val, complete) {
+export const setBlur = (val, complete) => {
   const {
     InsertElementCommand, ChangeElementCommand, BatchCommand
   } = svgCanvas.history
@@ -101,20 +155,33 @@ export const setBlur = function (val, complete) {
 
   // Looks for associated blur, creates one if not found
   const elem = selectedElements[0]
+  if (!elem) {
+    return
+  }
   const elemId = elem.id
-  svgCanvas.setFilter(svgCanvas.getElement(elemId + '_blur'))
+  let filter = svgCanvas.getElement(`${elemId}_blur`)
+  svgCanvas.setFilter(filter)
 
-  val -= 0
+  val = Number(val) || 0
 
-  const batchCmd = new BatchCommand()
+  const batchCmd = new BatchCommand('Change blur')
 
-  // Blur found!
-  if (svgCanvas.getFilter()) {
-    if (val === 0) {
-      svgCanvas.setFilter(null)
+  if (val === 0) {
+    const oldFilter = elem.getAttribute('filter')
+    if (!oldFilter) {
+      return
     }
-  } else {
-    // Not found, so create
+    const changes = { filter: oldFilter }
+    elem.removeAttribute('filter')
+    batchCmd.addSubCommand(new ChangeElementCommand(elem, changes))
+    svgCanvas.addCommandToHistory(batchCmd)
+    svgCanvas.setFilter(null)
+    svgCanvas.setFilterHidden(true)
+    return
+  }
+
+  // Ensure blur filter exists.
+  if (!filter) {
     const newblur = svgCanvas.addSVGElementsFromJson({
       element: 'feGaussianBlur',
       attr: {
@@ -123,32 +190,29 @@ export const setBlur = function (val, complete) {
       }
     })
 
-    svgCanvas.setFilter(svgCanvas.addSVGElementsFromJson({
+    filter = svgCanvas.addSVGElementsFromJson({
       element: 'filter',
       attr: {
-        id: elemId + '_blur'
+        id: `${elemId}_blur`
       }
-    }))
-    svgCanvas.getFilter().append(newblur)
-    svgCanvas.findDefs().append(svgCanvas.getFilter())
-
-    batchCmd.addSubCommand(new InsertElementCommand(svgCanvas.getFilter()))
+    })
+    filter.append(newblur)
+    const defs = svgCanvas.findDefs()
+    if (defs && defs.ownerDocument === filter.ownerDocument) {
+      defs.append(filter)
+    }
+    svgCanvas.setFilter(filter)
+    batchCmd.addSubCommand(new InsertElementCommand(filter))
   }
 
   const changes = { filter: elem.getAttribute('filter') }
-
-  if (val === 0) {
-    elem.removeAttribute('filter')
-    batchCmd.addSubCommand(new ChangeElementCommand(elem, changes))
-    return
-  }
-
-  svgCanvas.changeSelectedAttribute('filter', 'url(#' + elemId + '_blur)')
+  svgCanvas.changeSelectedAttributeNoUndo('filter', `url(#${filter.id})`)
   batchCmd.addSubCommand(new ChangeElementCommand(elem, changes))
-  svgCanvas.setBlurOffsets(svgCanvas.getFilter(), val)
-  const filter = svgCanvas.getFilter()
+  svgCanvas.setBlurOffsets(filter, val)
   svgCanvas.setCurCommand(batchCmd)
-  svgCanvas.undoMgr.beginUndoableChange('stdDeviation', [filter ? filter.firstChild : null])
+
+  const blurElem = getFeGaussianBlurElem(filter)
+  svgCanvas.undoMgr.beginUndoableChange('stdDeviation', [blurElem])
   if (complete) {
     svgCanvas.setBlurNoUndo(val)
     finishChange()

package/core/clear.js

@@ -24,7 +24,15 @@ export const clearSvgContentElementInit = () => {
   // empty
   while (el.firstChild) { el.removeChild(el.firstChild) }
 
-  // TODO: Clear out all other attributes first?
+  // Reset any stale attributes from the previous document.
+  for (const attr of Array.from(el.attributes)) {
+    if (attr.namespaceURI) {
+      el.removeAttributeNS(attr.namespaceURI, attr.localName)
+    } else {
+      el.removeAttribute(attr.name)
+    }
+  }
+
   const pel = svgCanvas.getSvgRoot()
   el.setAttribute('id', 'svgcontent')
   el.setAttribute('width', dimensions[0])
@@ -35,9 +43,11 @@ export const clearSvgContentElementInit = () => {
   el.setAttribute('xmlns', NS.SVG)
   el.setAttribute('xmlns:se', NS.SE)
   el.setAttribute('xmlns:xlink', NS.XLINK)
-  pel.appendChild(el)
+  if (el.parentNode !== pel) {
+    pel.appendChild(el)
+  }
 
   // TODO: make this string optional and set by the client
   const comment = svgCanvas.getDOMDocument().createComment(' Created with SVG-edit - https://github.com/SVG-Edit/svgedit')
-  svgCanvas.getSvgContent().append(comment)
+  el.append(comment)
 }

package/core/coords.js

@@ -4,6 +4,8 @@
  * @license MIT
  */
 
+import { warn } from '../common/logger.js'
+
 import {
   snapToGrid,
   assignAttributes,
@@ -22,6 +24,30 @@ import { convertToNum } from './units.js'
 
 let svgCanvas = null
 
+const flipBoxCoordinate = (value) => {
+  if (value === null || value === undefined) return null
+  const str = String(value).trim()
+  if (!str) return null
+
+  if (str.endsWith('%')) {
+    const num = Number.parseFloat(str.slice(0, -1))
+    return Number.isNaN(num) ? str : `${100 - num}%`
+  }
+
+  const num = Number.parseFloat(str)
+  return Number.isNaN(num) ? str : String(1 - num)
+}
+
+const flipAttributeInBoxUnits = (elem, attr) => {
+  const value = elem.getAttribute(attr)
+  if (value === null || value === undefined) return
+
+  const flipped = flipBoxCoordinate(value)
+  if (flipped !== null && flipped !== undefined) {
+    elem.setAttribute(attr, flipped)
+  }
+}
+
 /**
  * Initialize the coords module with the SVG canvas.
  * @function module:coords.init
@@ -32,28 +58,9 @@ export const init = canvas => {
   svgCanvas = canvas
 }
 
-// This is how we map path segment types to their corresponding commands
+// 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'
+  0, 'z', 'M', 'm', 'L', 'l', 'C', 'c', 'Q', 'q', 'A', 'a', 'H', 'h', 'V', 'v', 'S', 's', 'T', 't'
 ]
 
 /**
@@ -66,19 +73,21 @@ const pathMap = [
  */
 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 scalew = (w) => m.a * w
+  const scaleh = (h) => m.d * h
   const doSnapping =
-    svgCanvas.getGridSnapping() &&
-    selected.parentNode.parentNode.localName === 'svg'
+    svgCanvas.getGridSnapping?.() &&
+    selected?.parentNode?.parentNode?.localName === 'svg'
+
   const finishUp = () => {
     if (doSnapping) {
-      Object.entries(changes).forEach(([attr, value]) => {
+      for (const [attr, value] of Object.entries(changes)) {
         changes[attr] = snapToGrid(value)
-      })
+      }
     }
     assignAttributes(selected, changes, 1000, true)
   }
+
   const box = getBBox(selected)
 
   // Handle gradients and patterns
@@ -86,25 +95,47 @@ export const remapElement = (selected, changes, m) => {
     const attrVal = selected.getAttribute(type)
     if (attrVal?.startsWith('url(') && (m.a < 0 || m.d < 0)) {
       const grad = getRefElem(attrVal)
+      if (!grad) return
+
+      const tagName = (grad.tagName || '').toLowerCase()
+      if (!['lineargradient', 'radialgradient'].includes(tagName)) return
+
+      // userSpaceOnUse gradients do not need object-bounding-box correction.
+      if (grad.getAttribute('gradientUnits') === 'userSpaceOnUse') return
+
       const newgrad = grad.cloneNode(true)
       if (m.a < 0) {
         // Flip x
-        const x1 = newgrad.getAttribute('x1')
-        const x2 = newgrad.getAttribute('x2')
-        newgrad.setAttribute('x1', -(x1 - 1))
-        newgrad.setAttribute('x2', -(x2 - 1))
+        if (tagName === 'lineargradient') {
+          flipAttributeInBoxUnits(newgrad, 'x1')
+          flipAttributeInBoxUnits(newgrad, 'x2')
+        } else {
+          flipAttributeInBoxUnits(newgrad, 'cx')
+          flipAttributeInBoxUnits(newgrad, 'fx')
+        }
       }
 
       if (m.d < 0) {
         // Flip y
-        const y1 = newgrad.getAttribute('y1')
-        const y2 = newgrad.getAttribute('y2')
-        newgrad.setAttribute('y1', -(y1 - 1))
-        newgrad.setAttribute('y2', -(y2 - 1))
+        if (tagName === 'lineargradient') {
+          flipAttributeInBoxUnits(newgrad, 'y1')
+          flipAttributeInBoxUnits(newgrad, 'y2')
+        } else {
+          flipAttributeInBoxUnits(newgrad, 'cy')
+          flipAttributeInBoxUnits(newgrad, 'fy')
+        }
       }
-      newgrad.id = svgCanvas.getCurrentDrawing().getNextId()
+
+      const drawing = svgCanvas.getCurrentDrawing?.() || svgCanvas.getDrawing?.()
+      const generatedId = drawing?.getNextId?.() ??
+        (grad.id ? `${grad.id}-mirrored` : `mirrored-grad-${Date.now()}`)
+      if (!generatedId) {
+        warn('Unable to mirror gradient: no drawing context available', null, 'coords')
+        return
+      }
+      newgrad.id = generatedId
       findDefs().append(newgrad)
-      selected.setAttribute(type, 'url(#' + newgrad.id + ')')
+      selected.setAttribute(type, `url(#${newgrad.id})`)
     }
   })
 
@@ -265,25 +296,79 @@ export const remapElement = (selected, changes, m) => {
       break
     }
     case 'path': {
+      const supportsPathData =
+        typeof selected.getPathData === 'function' &&
+        typeof selected.setPathData === 'function'
+
       // Handle path segments
-      const segList = selected.pathSegList
-      const len = segList.numberOfItems
+      const segList = supportsPathData ? null : selected.pathSegList
+      const len = supportsPathData ? selected.getPathData().length : segList.numberOfItems
+      const det = m.a * m.d - m.b * m.c
+      const shouldToggleArcSweep = det < 0
       changes.d = []
-      for (let i = 0; i < len; ++i) {
-        const seg = segList.getItem(i)
-        changes.d[i] = {
-          type: seg.pathSegType,
-          x: seg.x,
-          y: seg.y,
-          x1: seg.x1,
-          y1: seg.y1,
-          x2: seg.x2,
-          y2: seg.y2,
-          r1: seg.r1,
-          r2: seg.r2,
-          angle: seg.angle,
-          largeArcFlag: seg.largeArcFlag,
-          sweepFlag: seg.sweepFlag
+      if (supportsPathData) {
+        const pathDataSegments = selected.getPathData()
+        for (let i = 0; i < len; ++i) {
+          const seg = pathDataSegments[i]
+          const t = seg.type
+          const type = pathMap.indexOf(t)
+          if (type === -1) continue
+          const values = seg.values || []
+          const entry = { type }
+          switch (t.toUpperCase()) {
+            case 'M':
+            case 'L':
+            case 'T':
+              [entry.x, entry.y] = values
+              break
+            case 'H':
+              [entry.x] = values
+              break
+            case 'V':
+              [entry.y] = values
+              break
+            case 'C':
+              [entry.x1, entry.y1, entry.x2, entry.y2, entry.x, entry.y] = values
+              break
+            case 'S':
+              [entry.x2, entry.y2, entry.x, entry.y] = values
+              break
+            case 'Q':
+              [entry.x1, entry.y1, entry.x, entry.y] = values
+              break
+            case 'A':
+              [
+                entry.r1,
+                entry.r2,
+                entry.angle,
+                entry.largeArcFlag,
+                entry.sweepFlag,
+                entry.x,
+                entry.y
+              ] = values
+              break
+            default:
+              break
+          }
+          changes.d[i] = entry
+        }
+      } else {
+        for (let i = 0; i < len; ++i) {
+          const seg = segList.getItem(i)
+          changes.d[i] = {
+            type: seg.pathSegType,
+            x: seg.x,
+            y: seg.y,
+            x1: seg.x1,
+            y1: seg.y1,
+            x2: seg.x2,
+            y2: seg.y2,
+            r1: seg.r1,
+            r2: seg.r2,
+            angle: seg.angle,
+            largeArcFlag: seg.largeArcFlag,
+            sweepFlag: seg.sweepFlag
+          }
         }
       }
 
@@ -302,41 +387,65 @@ export const remapElement = (selected, changes, m) => {
           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)
           seg.x = pt.x
           seg.y = pt.y
-          seg.x1 = pt1.x
-          seg.y1 = pt1.y
-          seg.x2 = pt2.x
-          seg.y2 = pt2.y
-          seg.r1 = scalew(seg.r1)
-          seg.r2 = scaleh(seg.r2)
+          if (seg.x1 !== undefined && seg.y1 !== undefined) {
+            const pt1 = remap(seg.x1, seg.y1)
+            seg.x1 = pt1.x
+            seg.y1 = pt1.y
+          }
+          if (seg.x2 !== undefined && seg.y2 !== undefined) {
+            const pt2 = remap(seg.x2, seg.y2)
+            seg.x2 = pt2.x
+            seg.y2 = pt2.y
+          }
+          if (type === 10) {
+            seg.r1 = Math.abs(scalew(seg.r1))
+            seg.r2 = Math.abs(scaleh(seg.r2))
+            if (shouldToggleArcSweep) {
+              seg.sweepFlag = Number(seg.sweepFlag) ? 0 : 1
+              if (typeof seg.angle === 'number') {
+                seg.angle = -seg.angle
+              }
+            }
+          }
         } 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)
-          seg.y1 = scaleh(seg.y1)
-          seg.x2 = scalew(seg.x2)
-          seg.y2 = scaleh(seg.y2)
-          seg.r1 = scalew(seg.r1)
-          seg.r2 = scaleh(seg.r2)
+          if (seg.x !== undefined) seg.x = scalew(seg.x)
+          if (seg.y !== undefined) seg.y = scaleh(seg.y)
+          if (seg.x1 !== undefined) seg.x1 = scalew(seg.x1)
+          if (seg.y1 !== undefined) seg.y1 = scaleh(seg.y1)
+          if (seg.x2 !== undefined) seg.x2 = scalew(seg.x2)
+          if (seg.y2 !== undefined) seg.y2 = scaleh(seg.y2)
+          if (type === 11) {
+            seg.r1 = Math.abs(scalew(seg.r1))
+            seg.r2 = Math.abs(scaleh(seg.r2))
+            if (shouldToggleArcSweep) {
+              seg.sweepFlag = Number(seg.sweepFlag) ? 0 : 1
+              if (typeof seg.angle === 'number') {
+                seg.angle = -seg.angle
+              }
+            }
+          }
         }
       }
 
       let dstr = ''
+      const newPathData = []
       changes.d.forEach(seg => {
         const { type } = seg
-        dstr += pathMap[type]
+        const letter = pathMap[type]
+        dstr += letter
         switch (type) {
           case 13: // relative horizontal line (h)
           case 12: // absolute horizontal line (H)
-            dstr += seg.x + ' '
+            dstr += `${seg.x} `
+            newPathData.push({ type: letter, values: [seg.x] })
             break
           case 15: // relative vertical line (v)
           case 14: // absolute vertical line (V)
-            dstr += seg.y + ' '
+            dstr += `${seg.y} `
+            newPathData.push({ type: letter, values: [seg.y] })
             break
           case 3: // relative move (m)
           case 5: // relative line (l)
@@ -344,27 +453,21 @@ export const remapElement = (selected, changes, m) => {
           case 2: // absolute move (M)
           case 4: // absolute line (L)
           case 18: // absolute smooth quad (T)
-            dstr += seg.x + ',' + seg.y + ' '
+            dstr += `${seg.x},${seg.y} `
+            newPathData.push({ type: letter, values: [seg.x, seg.y] })
             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} `
+            newPathData.push({
+              type: letter,
+              values: [seg.x1, seg.y1, seg.x2, seg.y2, seg.x, seg.y]
+            })
             break
           case 9: // relative quad (q)
           case 8: // absolute quad (Q)
-            dstr += seg.x1 + ',' + seg.y1 + ' ' + seg.x + ',' + seg.y + ' '
+            dstr += `${seg.x1},${seg.y1} ${seg.x},${seg.y} `
+            newPathData.push({ type: letter, values: [seg.x1, seg.y1, seg.x, seg.y] })
             break
           case 11: // relative elliptical arc (a)
           case 10: // absolute elliptical arc (A)
@@ -383,17 +486,38 @@ export const remapElement = (selected, changes, m) => {
               ',' +
               seg.y +
               ' '
+            newPathData.push({
+              type: letter,
+              values: [
+                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 + ' '
+            dstr += `${seg.x2},${seg.y2} ${seg.x},${seg.y} `
+            newPathData.push({ type: letter, values: [seg.x2, seg.y2, seg.x, seg.y] })
             break
           default:
             break
         }
       })
 
-      selected.setAttribute('d', dstr.trim())
+      const d = dstr.trim()
+      selected.setAttribute('d', d)
+      if (supportsPathData) {
+        try {
+          selected.setPathData(newPathData)
+        } catch (e) {
+          // Fallback to 'd' attribute if setPathData is unavailable or throws.
+        }
+      }
       break
     }
     default: