@svgedit/svgcanvas 7.1.6 → 7.2.0

package/common/browser.js

@@ -0,0 +1,67 @@
+/**
+ * Browser detection.
+ * @module browser
+ * @license MIT
+ *
+ * @copyright 2010 Jeff Schiller, 2010 Alexis Deveria
+ */
+
+const NSSVG = 'http://www.w3.org/2000/svg'
+
+const { userAgent } = navigator
+
+// Note: Browser sniffing should only be used if no other detection method is possible
+const isWebkit_ = userAgent.includes('AppleWebKit')
+const isGecko_ = userAgent.includes('Gecko/')
+const isChrome_ = userAgent.includes('Chrome/')
+const isMac_ = userAgent.includes('Macintosh')
+
+// text character positioning (for IE9 and now Chrome)
+const supportsGoodTextCharPos_ = (function () {
+  const svgroot = document.createElementNS(NSSVG, 'svg')
+  const svgContent = document.createElementNS(NSSVG, 'svg')
+  document.documentElement.append(svgroot)
+  svgContent.setAttribute('x', 5)
+  svgroot.append(svgContent)
+  const text = document.createElementNS(NSSVG, 'text')
+  text.textContent = 'a'
+  svgContent.append(text)
+  try { // Chrome now fails here
+    const pos = text.getStartPositionOfChar(0).x
+    return (pos === 0)
+  } catch (err) {
+    return false
+  } finally {
+    svgroot.remove()
+  }
+}())
+
+// Public API
+
+/**
+ * @function module:browser.isWebkit
+ * @returns {boolean}
+*/
+export const isWebkit = () => isWebkit_
+/**
+ * @function module:browser.isGecko
+ * @returns {boolean}
+*/
+export const isGecko = () => isGecko_
+/**
+ * @function module:browser.isChrome
+ * @returns {boolean}
+*/
+export const isChrome = () => isChrome_
+
+/**
+ * @function module:browser.isMac
+ * @returns {boolean}
+*/
+export const isMac = () => isMac_
+
+/**
+ * @function module:browser.supportsGoodTextCharPos
+ * @returns {boolean}
+*/
+export const supportsGoodTextCharPos = () => supportsGoodTextCharPos_

package/common/util.js

@@ -0,0 +1,198 @@
+/**
+ * @param {any} obj
+ * @returns {any}
+ */
+export function findPos (obj) {
+  let curleft = 0
+  let curtop = 0
+  if (obj.offsetParent) {
+    do {
+      curleft += obj.offsetLeft
+      curtop += obj.offsetTop
+    // eslint-disable-next-line no-cond-assign
+    } while (obj = obj.offsetParent)
+    return { left: curleft, top: curtop }
+  }
+  return { left: curleft, top: curtop }
+}
+
+export function isObject (item) {
+  return (item && typeof item === 'object' && !Array.isArray(item))
+}
+
+export function mergeDeep (target, source) {
+  const output = Object.assign({}, target)
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach((key) => {
+      if (isObject(source[key])) {
+        if (!(key in target)) { Object.assign(output, { [key]: source[key] }) } else { output[key] = mergeDeep(target[key], source[key]) }
+      } else {
+        Object.assign(output, { [key]: source[key] })
+      }
+    })
+  }
+  return output
+}
+
+/**
+ * Get the closest matching element up the DOM tree.
+ * @param  {Element} elem     Starting element
+ * @param  {String}  selector Selector to match against (class, ID, data attribute, or tag)
+ * @return {Boolean|Element}  Returns null if not match found
+ */
+export function getClosest (elem, selector) {
+  const firstChar = selector.charAt(0)
+  const supports = 'classList' in document.documentElement
+  let attribute; let value
+  // If selector is a data attribute, split attribute from value
+  if (firstChar === '[') {
+    selector = selector.substr(1, selector.length - 2)
+    attribute = selector.split('=')
+    if (attribute.length > 1) {
+      value = true
+      attribute[1] = attribute[1].replace(/"/g, '').replace(/'/g, '')
+    }
+  }
+  // Get closest match
+  for (; elem && elem !== document && elem.nodeType === 1; elem = elem.parentNode) {
+    // If selector is a class
+    if (firstChar === '.') {
+      if (supports) {
+        if (elem.classList.contains(selector.substr(1))) {
+          return elem
+        }
+      } else {
+        if (new RegExp('(^|\\s)' + selector.substr(1) + '(\\s|$)').test(elem.className)) {
+          return elem
+        }
+      }
+    }
+    // If selector is an ID
+    if (firstChar === '#') {
+      if (elem.id === selector.substr(1)) {
+        return elem
+      }
+    }
+    // If selector is a data attribute
+    if (firstChar === '[') {
+      if (elem.hasAttribute(attribute[0])) {
+        if (value) {
+          if (elem.getAttribute(attribute[0]) === attribute[1]) {
+            return elem
+          }
+        } else {
+          return elem
+        }
+      }
+    }
+    // If selector is a tag
+    if (elem.tagName.toLowerCase() === selector) {
+      return elem
+    }
+  }
+  return null
+}
+
+/**
+ * Get all DOM element up the tree that contain a class, ID, or data attribute
+ * @param  {Node} elem The base element
+ * @param  {String} selector The class, id, data attribute, or tag to look for
+ * @return {Array} Null if no match
+ */
+export function getParents (elem, selector) {
+  const parents = []
+  const firstChar = selector?.charAt(0)
+  // Get matches
+  for (; elem && elem !== document; elem = elem.parentNode) {
+    if (selector) {
+      // If selector is a class
+      if (firstChar === '.') {
+        if (elem.classList.contains(selector.substr(1))) {
+          parents.push(elem)
+        }
+      }
+      // If selector is an ID
+      if (firstChar === '#') {
+        if (elem.id === selector.substr(1)) {
+          parents.push(elem)
+        }
+      }
+      // If selector is a data attribute
+      if (firstChar === '[') {
+        if (elem.hasAttribute(selector.substr(1, selector.length - 1))) {
+          parents.push(elem)
+        }
+      }
+      // If selector is a tag
+      if (elem.tagName.toLowerCase() === selector) {
+        parents.push(elem)
+      }
+    } else {
+      parents.push(elem)
+    }
+  }
+  // Return parents if any exist
+  return parents.length ? parents : null
+}
+
+export function getParentsUntil (elem, parent, selector) {
+  const parents = []
+  const parentType = parent?.charAt(0)
+  const selectorType = selector?.selector.charAt(0)
+  // Get matches
+  for (; elem && elem !== document; elem = elem.parentNode) {
+    // Check if parent has been reached
+    if (parent) {
+      // If parent is a class
+      if (parentType === '.') {
+        if (elem.classList.contains(parent.substr(1))) {
+          break
+        }
+      }
+      // If parent is an ID
+      if (parentType === '#') {
+        if (elem.id === parent.substr(1)) {
+          break
+        }
+      }
+      // If parent is a data attribute
+      if (parentType === '[') {
+        if (elem.hasAttribute(parent.substr(1, parent.length - 1))) {
+          break
+        }
+      }
+      // If parent is a tag
+      if (elem.tagName.toLowerCase() === parent) {
+        break
+      }
+    }
+    if (selector) {
+      // If selector is a class
+      if (selectorType === '.') {
+        if (elem.classList.contains(selector.substr(1))) {
+          parents.push(elem)
+        }
+      }
+      // If selector is an ID
+      if (selectorType === '#') {
+        if (elem.id === selector.substr(1)) {
+          parents.push(elem)
+        }
+      }
+      // If selector is a data attribute
+      if (selectorType === '[') {
+        if (elem.hasAttribute(selector.substr(1, selector.length - 1))) {
+          parents.push(elem)
+        }
+      }
+      // If selector is a tag
+      if (elem.tagName.toLowerCase() === selector) {
+        parents.push(elem)
+      }
+    } else {
+      parents.push(elem)
+    }
+  }
+  // Return parents if any exist
+  return parents.length ? parents : null
+}

package/{draw.js → core/draw.js}

@@ -15,7 +15,7 @@ import {
 import {
   copyElem as utilCopyElem
 } from './copy-elem.js'
-import { getParentsUntil } from '../../src/common/util.js'
+import { getParentsUntil } from '../common/util.js'
 
 const visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use'.split(',')
 

package/{elem-get-set.js → core/elem-get-set.js}

@@ -13,7 +13,7 @@ import {
 import {
   convertToNum
 } from './units.js'
-import { getParents } from '../../src/common/util.js'
+import { getParents } from '../common/util.js'
 
 let svgCanvas = null
 

package/{event.js → core/event.js}

@@ -17,13 +17,14 @@ import {
 import * as draw from './draw.js'
 import * as pathModule from './path.js'
 import * as hstry from './history.js'
-import { findPos } from '../../src/common/util.js'
+import { findPos } from '../../svgcanvas/common/util.js'
 
 const {
   InsertElementCommand
 } = hstry
 
 let svgCanvas = null
+let moveSelectionThresholdReached = false
 
 /**
 * @function module:undo.init
@@ -155,7 +156,13 @@ const mouseMoveEvent = (evt) => {
           dy = snapToGrid(dy)
         }
 
-        if (dx || dy) {
+        // Enable moving selection only if mouse has been moved at least 4 px in any direction
+        // This prevents objects from being accidentally moved when (initially) selected
+        const deltaThreshold = 4
+        const deltaThresholdReached = Math.abs(dx) > deltaThreshold || Math.abs(dy) > deltaThreshold
+        moveSelectionThresholdReached = moveSelectionThresholdReached || deltaThresholdReached
+
+        if (moveSelectionThresholdReached) {
           selectedElements.forEach((el) => {
             if (el) {
               updateTransformList(svgRoot, el, dx, dy)
@@ -277,7 +284,9 @@ const mouseMoveEvent = (evt) => {
       }
 
       translateOrigin.setTranslate(-(left + tx), -(top + ty))
-      if (evt.shiftKey) {
+      // For images, we maintain aspect ratio by default and relax when shift pressed
+      const maintainAspectRatio = (selected.tagName !== 'image' && evt.shiftKey) || (selected.tagName === 'image' && !evt.shiftKey)
+      if (maintainAspectRatio) {
         if (sx === 1) {
           sx = sy
         } else { sy = sx }
@@ -343,12 +352,16 @@ const mouseMoveEvent = (evt) => {
     case 'square':
     case 'rect':
     case 'image': {
-      const square = (svgCanvas.getCurrentMode() === 'square') || evt.shiftKey
+      // For images, we maintain aspect ratio by default and relax when shift pressed
+      const maintainAspectRatio = (svgCanvas.getCurrentMode() === 'square') ||
+        (svgCanvas.getCurrentMode() === 'image' && !evt.shiftKey) ||
+        (svgCanvas.getCurrentMode() !== 'image' && evt.shiftKey)
+
       let
         w = Math.abs(x - svgCanvas.getStartX())
       let h = Math.abs(y - svgCanvas.getStartY())
       let newX; let newY
-      if (square) {
+      if (maintainAspectRatio) {
         w = h = Math.max(w, h)
         newX = svgCanvas.getStartX() < x ? svgCanvas.getStartX() : svgCanvas.getStartX() - w
         newY = svgCanvas.getStartY() < y ? svgCanvas.getStartY() : svgCanvas.getStartY() - h
@@ -557,6 +570,7 @@ const mouseOutEvent = () => {
 * @returns {void}
 */
 const mouseUpEvent = (evt) => {
+  moveSelectionThresholdReached = false
   if (evt.button === 2) { return }
   if (!svgCanvas.getStarted()) { return }
 

package/{recalculate.js → core/recalculate.js}

@@ -15,7 +15,7 @@ import {
 } from './math.js'
 import {
   mergeDeep
-} from '../../src/common/util.js'
+} from '../common/util.js'
 
 let svgCanvas
 
@@ -359,7 +359,10 @@ export const recalculateDimensions = (selected) => {
             childTlist.appendItem(scale)
             childTlist.appendItem(translateOrigin)
           } // not rotated
-          batchCmd.addSubCommand(recalculateDimensions(child))
+          const recalculatedDimensions = recalculateDimensions(child)
+          if (recalculatedDimensions) {
+            batchCmd.addSubCommand(recalculatedDimensions)
+          }
           svgCanvas.setStartTransform(oldStartTransform)
         } // element
       } // for each child
@@ -420,7 +423,10 @@ export const recalculateDimensions = (selected) => {
               } else {
                 childTlist.appendItem(newxlate)
               }
-              batchCmd.addSubCommand(recalculateDimensions(child))
+              const recalculatedDimensions = recalculateDimensions(child)
+              if (recalculatedDimensions) {
+                batchCmd.addSubCommand(recalculatedDimensions)
+              }
               // If any <use> have this group as a parent and are
               // referencing this child, then impose a reverse translate on it
               // so that when it won't get double-translated
@@ -464,7 +470,10 @@ export const recalculateDimensions = (selected) => {
           childTlist.clear()
           childTlist.appendItem(e2m, 0)
 
-          batchCmd.addSubCommand(recalculateDimensions(child))
+          const recalculatedDimensions = recalculateDimensions(child)
+          if (recalculatedDimensions) {
+            batchCmd.addSubCommand(recalculatedDimensions)
+          }
           svgCanvas.setStartTransform(oldStartTransform)
 
           // Convert stroke
@@ -544,7 +553,10 @@ export const recalculateDimensions = (selected) => {
               childTlist.appendItem(newxlate)
             }
 
-            batchCmd.addSubCommand(recalculateDimensions(child))
+            const recalculatedDimensions = recalculateDimensions(child)
+            if (recalculatedDimensions) {
+              batchCmd.addSubCommand(recalculatedDimensions)
+            }
             svgCanvas.setStartTransform(oldStartTransform)
           }
         }

package/{select.js → core/select.js}

@@ -6,9 +6,10 @@
  * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
  */
 
-import { isWebkit } from '../../src/common/browser.js'
+import { isWebkit } from '../common/browser.js'
 import { getRotationAngle, getBBox, getStrokedBBox } from './utilities.js'
-import { transformListToTransform, transformBox, transformPoint } from './math.js'
+import { transformListToTransform, transformBox, transformPoint, matrixMultiply } from './math.js'
+import { NS } from './namespaces'
 
 let svgCanvas
 let selectorManager_ // A Singleton
@@ -122,9 +123,24 @@ export class Selector {
       offset += 2 / zoom
     }
 
+    // find the transformations applied to the parent of the selected element
+    const svg = document.createElementNS(NS.SVG, 'svg')
+    let parentTransformationMatrix = svg.createSVGMatrix()
+    let currentElt = selected
+    while (currentElt.parentNode) {
+      if (currentElt.parentNode && currentElt.parentNode.tagName === 'g' && currentElt.parentNode.transform) {
+        if (currentElt.parentNode.transform.baseVal.numberOfItems) {
+          parentTransformationMatrix = matrixMultiply(transformListToTransform(selected.parentNode.transform.baseVal).matrix, parentTransformationMatrix)
+        }
+      }
+      currentElt = currentElt.parentNode
+    }
+
     // loop and transform our bounding box until we reach our first rotation
     const tlist = selected.transform.baseVal
-    const m = transformListToTransform(tlist).matrix
+
+    // combines the parent transformation with that of the selected element if necessary
+    const m = parentTransformationMatrix ? matrixMultiply(parentTransformationMatrix, transformListToTransform(tlist).matrix) : transformListToTransform(tlist).matrix
 
     // This should probably be handled somewhere else, but for now
     // it keeps the selection box correctly positioned when zoomed
@@ -145,92 +161,93 @@ export class Selector {
       }
     }
 
-    // apply the transforms
-    const l = bbox.x; const t = bbox.y; const w = bbox.width; const h = bbox.height
-    // bbox = {x: l, y: t, width: w, height: h}; // Not in use
-
-    // we need to handle temporary transforms too
-    // if skewed, get its transformed box, then find its axis-aligned bbox
-
-    // *
-    offset *= zoom
-
-    const nbox = transformBox(l * zoom, t * zoom, w * zoom, h * zoom, m)
-    const { aabox } = nbox
-    let nbax = aabox.x - offset
-    let nbay = aabox.y - offset
-    let nbaw = aabox.width + (offset * 2)
-    let nbah = aabox.height + (offset * 2)
-
-    // now if the shape is rotated, un-rotate it
-    const cx = nbax + nbaw / 2
-    const cy = nbay + nbah / 2
-
-    const angle = getRotationAngle(selected)
-    if (angle) {
-      const rot = svgCanvas.getSvgRoot().createSVGTransform()
-      rot.setRotate(-angle, cx, cy)
-      const rotm = rot.matrix
-      nbox.tl = transformPoint(nbox.tl.x, nbox.tl.y, rotm)
-      nbox.tr = transformPoint(nbox.tr.x, nbox.tr.y, rotm)
-      nbox.bl = transformPoint(nbox.bl.x, nbox.bl.y, rotm)
-      nbox.br = transformPoint(nbox.br.x, nbox.br.y, rotm)
-
-      // calculate the axis-aligned bbox
-      const { tl } = nbox
-      let minx = tl.x
-      let miny = tl.y
-      let maxx = tl.x
-      let maxy = tl.y
-
-      const { min, max } = Math
-
-      minx = min(minx, min(nbox.tr.x, min(nbox.bl.x, nbox.br.x))) - offset
-      miny = min(miny, min(nbox.tr.y, min(nbox.bl.y, nbox.br.y))) - offset
-      maxx = max(maxx, max(nbox.tr.x, max(nbox.bl.x, nbox.br.x))) + offset
-      maxy = max(maxy, max(nbox.tr.y, max(nbox.bl.y, nbox.br.y))) + offset
-
-      nbax = minx
-      nbay = miny
-      nbaw = (maxx - minx)
-      nbah = (maxy - miny)
-    }
+    if (bbox) {
+      // apply the transforms
+      const l = bbox.x; const t = bbox.y; const w = bbox.width; const h = bbox.height
+      // bbox = {x: l, y: t, width: w, height: h}; // Not in use
+
+      // we need to handle temporary transforms too
+      // if skewed, get its transformed box, then find its axis-aligned bbox
+
+      // *
+      offset *= zoom
+
+      const nbox = transformBox(l * zoom, t * zoom, w * zoom, h * zoom, m)
+      const { aabox } = nbox
+      let nbax = aabox.x - offset
+      let nbay = aabox.y - offset
+      let nbaw = aabox.width + (offset * 2)
+      let nbah = aabox.height + (offset * 2)
+
+      // now if the shape is rotated, un-rotate it
+      const cx = nbax + nbaw / 2
+      const cy = nbay + nbah / 2
+
+      const angle = getRotationAngle(selected)
+      if (angle) {
+        const rot = svgCanvas.getSvgRoot().createSVGTransform()
+        rot.setRotate(-angle, cx, cy)
+        const rotm = rot.matrix
+        nbox.tl = transformPoint(nbox.tl.x, nbox.tl.y, rotm)
+        nbox.tr = transformPoint(nbox.tr.x, nbox.tr.y, rotm)
+        nbox.bl = transformPoint(nbox.bl.x, nbox.bl.y, rotm)
+        nbox.br = transformPoint(nbox.br.x, nbox.br.y, rotm)
+
+        // calculate the axis-aligned bbox
+        const { tl } = nbox
+        let minx = tl.x
+        let miny = tl.y
+        let maxx = tl.x
+        let maxy = tl.y
+
+        const { min, max } = Math
+
+        minx = min(minx, min(nbox.tr.x, min(nbox.bl.x, nbox.br.x))) - offset
+        miny = min(miny, min(nbox.tr.y, min(nbox.bl.y, nbox.br.y))) - offset
+        maxx = max(maxx, max(nbox.tr.x, max(nbox.bl.x, nbox.br.x))) + offset
+        maxy = max(maxy, max(nbox.tr.y, max(nbox.bl.y, nbox.br.y))) + offset
+
+        nbax = minx
+        nbay = miny
+        nbaw = (maxx - minx)
+        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(',') + ')' : ''
+
+      // TODO(codedread): Is this needed?
+      //  if (selected === selectedElements[0]) {
+      this.gripCoords = {
+        nw: [nbax, nbay],
+        ne: [nbax + nbaw, nbay],
+        sw: [nbax, nbay + nbah],
+        se: [nbax + nbaw, nbay + nbah],
+        n: [nbax + (nbaw) / 2, nbay],
+        w: [nbax, nbay + (nbah) / 2],
+        e: [nbax + nbaw, nbay + (nbah) / 2],
+        s: [nbax + (nbaw) / 2, nbay + nbah]
+      }
+      selectedBox.setAttribute('d', dstr)
+      this.selectorGroup.setAttribute('transform', xform)
+      Object.entries(this.gripCoords).forEach(([dir, coords]) => {
+        selectedGrips[dir].setAttribute('cx', coords[0])
+        selectedGrips[dir].setAttribute('cy', coords[1])
+      })
 
-    const xform = angle ? 'rotate(' + [angle, cx, cy].join(',') + ')' : ''
+      // we want to go 20 pixels in the negative transformed y direction, ignoring scale
+      mgr.rotateGripConnector.setAttribute('x1', nbax + (nbaw) / 2)
+      mgr.rotateGripConnector.setAttribute('y1', nbay)
+      mgr.rotateGripConnector.setAttribute('x2', nbax + (nbaw) / 2)
+      mgr.rotateGripConnector.setAttribute('y2', nbay - (gripRadius * 5))
 
-    // TODO(codedread): Is this needed?
-    //  if (selected === selectedElements[0]) {
-    this.gripCoords = {
-      nw: [nbax, nbay],
-      ne: [nbax + nbaw, nbay],
-      sw: [nbax, nbay + nbah],
-      se: [nbax + nbaw, nbay + nbah],
-      n: [nbax + (nbaw) / 2, nbay],
-      w: [nbax, nbay + (nbah) / 2],
-      e: [nbax + nbaw, nbay + (nbah) / 2],
-      s: [nbax + (nbaw) / 2, nbay + nbah]
+      mgr.rotateGrip.setAttribute('cx', nbax + (nbaw) / 2)
+      mgr.rotateGrip.setAttribute('cy', nbay - (gripRadius * 5))
     }
-    selectedBox.setAttribute('d', dstr)
-    this.selectorGroup.setAttribute('transform', xform)
-    Object.entries(this.gripCoords).forEach(([dir, coords]) => {
-      selectedGrips[dir].setAttribute('cx', coords[0])
-      selectedGrips[dir].setAttribute('cy', coords[1])
-    })
-
-    // we want to go 20 pixels in the negative transformed y direction, ignoring scale
-    mgr.rotateGripConnector.setAttribute('x1', nbax + (nbaw) / 2)
-    mgr.rotateGripConnector.setAttribute('y1', nbay)
-    mgr.rotateGripConnector.setAttribute('x2', nbax + (nbaw) / 2)
-    mgr.rotateGripConnector.setAttribute('y2', nbay - (gripRadius * 5))
-
-    mgr.rotateGrip.setAttribute('cx', nbax + (nbaw) / 2)
-    mgr.rotateGrip.setAttribute('cy', nbay - (gripRadius * 5))
-    // }
   }
 
   // STATIC methods