@svgedit/svgcanvas 7.1.4

package/blur-event.js

@@ -0,0 +1,156 @@
+/**
+ * Tools for blur event.
+ * @module blur
+ * @license MIT
+ * @copyright 2011 Jeff Schiller
+ */
+
+let svgCanvas = null
+
+/**
+* @function module:blur.init
+* @param {module:blur.blurContext} blurContext
+* @returns {void}
+*/
+export const init = (canvas) => {
+  svgCanvas = canvas
+}
+
+/**
+* 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) {
+  const selectedElements = svgCanvas.getSelectedElements()
+  if (!svgCanvas.getFilter()) {
+    svgCanvas.setBlur(val)
+    return
+  }
+  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)')
+    }
+    const filter = svgCanvas.getFilter()
+    svgCanvas.changeSelectedAttributeNoUndo('stdDeviation', val, [filter.firstChild])
+    svgCanvas.setBlurOffsets(filter, val)
+  }
+}
+
+/**
+*
+* @returns {void}
+*/
+function finishChange () {
+  const bCmd = svgCanvas.undoMgr.finishUndoableChange()
+  svgCanvas.getCurCommand().addSubCommand(bCmd)
+  svgCanvas.addCommandToHistory(svgCanvas.getCurCommand())
+  svgCanvas.setCurCommand(null)
+  svgCanvas.setFilter(null)
+}
+
+/**
+* Sets the `x`, `y`, `width`, `height` values of the filter element in order to
+* make the blur not be clipped. Removes them if not neeeded.
+* @function module:svgcanvas.SvgCanvas#setBlurOffsets
+* @param {Element} filterElem - The filter DOM element to update
+* @param {Float} stdDev - The standard deviation value on which to base the offset size
+* @returns {void}
+*/
+export const setBlurOffsets = function (filterElem, stdDev) {
+  if (stdDev > 3) {
+    // TODO: Create algorithm here where size is based on expected blur
+    svgCanvas.assignAttributes(filterElem, {
+      x: '-50%',
+      y: '-50%',
+      width: '200%',
+      height: '200%'
+    }, 100)
+  } else {
+    filterElem.removeAttribute('x')
+    filterElem.removeAttribute('y')
+    filterElem.removeAttribute('width')
+    filterElem.removeAttribute('height')
+  }
+}
+
+/**
+* Adds/updates the blur filter to the selected element.
+* @function module:svgcanvas.SvgCanvas#setBlur
+* @param {Float} val - Float with the new `stdDeviation` blur value
+* @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) {
+  const {
+    InsertElementCommand, ChangeElementCommand, BatchCommand
+  } = svgCanvas.history
+
+  const selectedElements = svgCanvas.getSelectedElements()
+  if (svgCanvas.getCurCommand()) {
+    finishChange()
+    return
+  }
+
+  // Looks for associated blur, creates one if not found
+  const elem = selectedElements[0]
+  const elemId = elem.id
+  svgCanvas.setFilter(svgCanvas.getElement(elemId + '_blur'))
+
+  val -= 0
+
+  const batchCmd = new BatchCommand()
+
+  // Blur found!
+  if (svgCanvas.getFilter()) {
+    if (val === 0) {
+      svgCanvas.setFilter(null)
+    }
+  } else {
+    // Not found, so create
+    const newblur = svgCanvas.addSVGElementsFromJson({
+      element: 'feGaussianBlur',
+      attr: {
+        in: 'SourceGraphic',
+        stdDeviation: val
+      }
+    })
+
+    svgCanvas.setFilter(svgCanvas.addSVGElementsFromJson({
+      element: 'filter',
+      attr: {
+        id: elemId + '_blur'
+      }
+    }))
+    svgCanvas.getFilter().append(newblur)
+    svgCanvas.findDefs().append(svgCanvas.getFilter())
+
+    batchCmd.addSubCommand(new InsertElementCommand(svgCanvas.getFilter()))
+  }
+
+  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)')
+  batchCmd.addSubCommand(new ChangeElementCommand(elem, changes))
+  svgCanvas.setBlurOffsets(svgCanvas.getFilter(), val)
+  const filter = svgCanvas.getFilter()
+  svgCanvas.setCurCommand(batchCmd)
+  svgCanvas.undoMgr.beginUndoableChange('stdDeviation', [filter ? filter.firstChild : null])
+  if (complete) {
+    svgCanvas.setBlurNoUndo(val)
+    finishChange()
+  }
+}

package/clear.js

@@ -0,0 +1,43 @@
+/**
+ * Tools for clear.
+ * @module clear
+ * @license MIT
+ * @copyright 2011 Jeff Schiller
+ */
+import { NS } from './namespaces.js'
+
+let svgCanvas = null
+
+/**
+* @function module:clear.init
+* @param {module:clear.SvgCanvas#init} clearContext
+* @returns {void}
+*/
+export const init = (canvas) => {
+  svgCanvas = canvas
+}
+
+export const clearSvgContentElementInit = () => {
+  const curConfig = svgCanvas.getCurConfig()
+  const { dimensions } = curConfig
+  const el = svgCanvas.getSvgContent()
+  // empty
+  while (el.firstChild) { el.removeChild(el.firstChild) }
+
+  // TODO: Clear out all other attributes first?
+  const pel = svgCanvas.getSvgRoot()
+  el.setAttribute('id', 'svgcontent')
+  el.setAttribute('width', dimensions[0])
+  el.setAttribute('height', dimensions[1])
+  el.setAttribute('x', dimensions[0])
+  el.setAttribute('y', dimensions[1])
+  el.setAttribute('overflow', curConfig.show_outside_canvas ? 'visible' : 'hidden')
+  el.setAttribute('xmlns', NS.SVG)
+  el.setAttribute('xmlns:se', NS.SE)
+  el.setAttribute('xmlns:xlink', NS.XLINK)
+  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)
+}

package/coords.js

@@ -0,0 +1,298 @@
+/**
+ * Manipulating coordinates.
+ * @module coords
+ * @license MIT
+ */
+
+import {
+  snapToGrid, assignAttributes, getBBox, getRefElem, findDefs
+} from './utilities.js'
+import {
+  transformPoint, transformListToTransform, matrixMultiply, transformBox
+} 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}
+*/
+
+let svgCanvas = null
+
+/**
+* @function module:coords.init
+* @param {module:svgcanvas.SvgCanvas#event:pointsAdded} editorContext
+* @returns {void}
+*/
+export const init = (canvas) => {
+  svgCanvas = canvas
+}
+
+/**
+ * Applies coordinate changes to an element based on the given matrix.
+ * @name module:coords.remapElement
+ * @type {module:path.EditorContext#remapElement}
+*/
+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 finishUp = () => {
+    if (doSnapping) {
+      Object.entries(changes).forEach(([o, value]) => {
+        changes[o] = snapToGrid(value)
+      })
+    }
+    assignAttributes(selected, changes, 1000, true)
+  }
+  const box = getBBox(selected);
+
+  ['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
+        const x1 = newgrad.getAttribute('x1')
+        const x2 = newgrad.getAttribute('x2')
+        newgrad.setAttribute('x1', -(x1 - 1))
+        newgrad.setAttribute('x2', -(x2 - 1))
+      }
+
+      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))
+      }
+      newgrad.id = svgCanvas.getCurrentDrawing().getNextId()
+      findDefs().append(newgrad)
+      selected.setAttribute(type, 'url(#' + newgrad.id + ')')
+    }
+  })
+
+  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 = selected.transform.baseVal
+      const mt = svgCanvas.getSvgRoot().createSVGTransform()
+      mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m))
+      chlist.clear()
+      chlist.appendItem(mt)
+    }
+  }
+
+  // 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)
+      if (elName === 'image' && (m.a < 0 || m.d < 0)) {
+      // Convert to matrix
+        const chlist = selected.transform.baseVal
+        const mt = svgCanvas.getSvgRoot().createSVGTransform()
+        mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m))
+        chlist.clear()
+        chlist.appendItem(mt)
+      } else {
+        const pt1 = remap(changes.x, changes.y)
+        changes.width = scalew(changes.width)
+        changes.height = scaleh(changes.height)
+        changes.x = pt1.x + Math.min(0, changes.width)
+        changes.y = pt1.y + Math.min(0, changes.height)
+        changes.width = Math.abs(changes.width)
+        changes.height = Math.abs(changes.height)
+      }
+      finishUp()
+      break
+    } 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)
+      finishUp()
+      break
+    } 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
+      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) }
+      finishUp()
+      break
+    } 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': {
+      const dataStorage = svgCanvas.getDataStorage()
+      const gsvg = dataStorage.get(selected, 'gsvg')
+      if (gsvg) {
+        assignAttributes(gsvg, changes, 1000, true)
+      }
+      break
+    } case 'polyline':
+    case 'polygon': {
+      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 + ' '
+      })
+      selected.setAttribute('points', pstr)
+      break
+    } case 'path': {
+      const segList = selected.pathSegList
+      let len = segList.numberOfItems
+      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
+        }
+      }
+
+      len = changes.d.length
+      const firstseg = changes.d[0]
+      let currentpt
+      if (len > 0) {
+        currentpt = remap(firstseg.x, firstseg.y)
+        changes.d[0].x = currentpt.x
+        changes.d[0].y = currentpt.y
+      }
+      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
+          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)
+        } else { // relative
+          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)
+        }
+      } // for each segment
+
+      let dstr = ''
+      changes.d.forEach((seg) => {
+        const { type } = seg
+        dstr += pathMap[type]
+        switch (type) {
+          case 13: // relative horizontal line (h)
+          case 12: // absolute horizontal line (H)
+            dstr += seg.x + ' '
+            break
+          case 15: // relative vertical line (v)
+          case 14: // absolute vertical line (V)
+            dstr += seg.y + ' '
+            break
+          case 3: // relative move (m)
+          case 5: // relative line (l)
+          case 19: // relative smooth quad (t)
+          case 2: // absolute move (M)
+          case 4: // absolute line (L)
+          case 18: // absolute smooth quad (T)
+            dstr += 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 + ' '
+            break
+          case 9: // relative quad (q)
+          case 8: // absolute quad (Q)
+            dstr += seg.x1 + ',' + seg.y1 + ' ' + seg.x + ',' + seg.y + ' '
+            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 + ' '
+            break
+          case 17: // relative smooth cubic (s)
+          case 16: // absolute smooth cubic (S)
+            dstr += seg.x2 + ',' + seg.y2 + ' ' + seg.x + ',' + seg.y + ' '
+            break
+        }
+      })
+
+      selected.setAttribute('d', dstr)
+      break
+    }
+  }
+}

package/copy-elem.js

@@ -0,0 +1,45 @@
+import { preventClickDefault } from './utilities.js'
+
+/**
+ * Create a clone of an element, updating its ID and its children's IDs when needed.
+ * @function module:utilities.copyElem
+ * @param {Element} el - DOM element to clone
+ * @param {module:utilities.GetNextID} getNextId - The getter of the next unique ID.
+ * @returns {Element} The cloned element
+ */
+export const copyElem = function (el, getNextId) {
+  // manually create a copy of the element
+  const newEl = document.createElementNS(el.namespaceURI, el.nodeName)
+  Object.values(el.attributes).forEach((attr) => {
+    newEl.setAttributeNS(attr.namespaceURI, attr.nodeName, attr.value)
+  })
+  // set the copied element's new id
+  newEl.removeAttribute('id')
+  newEl.id = getNextId()
+
+  // now create copies of all children
+  el.childNodes.forEach(function (child) {
+    switch (child.nodeType) {
+      case 1: // element node
+        newEl.append(copyElem(child, getNextId))
+        break
+      case 3: // text node
+        newEl.textContent = child.nodeValue
+        break
+      default:
+        break
+    }
+  })
+
+  if (el.dataset.gsvg) {
+    newEl.dataset.gsvg = newEl.firstChild
+  } else if (el.dataset.symbol) {
+    const ref = el.dataset.symbol
+    newEl.dataset.ref = ref
+    newEl.dataset.symbol = ref
+  } else if (newEl.tagName === 'image') {
+    preventClickDefault(newEl)
+  }
+
+  return newEl
+}

package/dataStorage.js

@@ -0,0 +1,28 @@
+/** A storage solution aimed at replacing jQuerys data function.
+* Implementation Note: Elements are stored in a (WeakMap)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap].
+* This makes sure the data is garbage collected when the node is removed.
+*/
+const dataStorage = {
+  _storage: new WeakMap(),
+  put: function (element, key, obj) {
+    if (!this._storage.has(element)) {
+      this._storage.set(element, new Map())
+    }
+    this._storage.get(element).set(key, obj)
+  },
+  get: function (element, key) {
+    return this._storage.get(element)?.get(key)
+  },
+  has: function (element, key) {
+    return this._storage.has(element) && this._storage.get(element).has(key)
+  },
+  remove: function (element, key) {
+    const ret = this._storage.get(element).delete(key)
+    if (this._storage.get(element).size === 0) {
+      this._storage.delete(element)
+    }
+    return ret
+  }
+}
+
+export default dataStorage