Update packages and remove the instrument step (#854)

* several updates
* avoid the instrumented step in tests

packages/svgcanvas/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_

packages/svgcanvas/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
+}

packages/svgcanvas/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(',')
 

packages/svgcanvas/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
 

packages/svgcanvas/core/event.js

@@ -17,7 +17,7 @@ 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

packages/svgcanvas/core/recalculate.js

@@ -15,7 +15,7 @@ import {
 } from './math.js'
 import {
   mergeDeep
-} from '../../src/common/util.js'
+} from '../common/util.js'
 
 let svgCanvas
 

packages/svgcanvas/core/select.js

@@ -6,7 +6,7 @@
  * @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, matrixMultiply } from './math.js'
 import { NS } from './namespaces'

packages/svgcanvas/core/selected-elem.js

@@ -29,8 +29,8 @@ import {
   transformListToTransform
 } from './math.js'
 import { recalculateDimensions } from './recalculate.js'
-import { isGecko } from '../../src/common/browser.js'
-import { getParents } from '../../src/common/util.js'
+import { isGecko } from '../common/browser.js'
+import { getParents } from '../common/util.js'
 
 const {
   MoveElementCommand,

packages/svgcanvas/core/selection.js

@@ -16,7 +16,7 @@ import {
   rectsIntersect
 } from './math.js'
 import * as hstry from './history.js'
-import { getClosest } from '../../src/common/util.js'
+import { getClosest } from '../common/util.js'
 
 const { BatchCommand } = hstry
 let svgCanvas = null

packages/svgcanvas/core/svg-exec.js

@@ -25,12 +25,12 @@ import {
 } from './utilities.js'
 import { transformPoint, transformListToTransform } from './math.js'
 import { convertUnit, shortFloat, convertToNum } from './units.js'
-import { isGecko, isChrome, isWebkit } from '../../src/common/browser.js'
+import { isGecko, isChrome, isWebkit } from '../common/browser.js'
 import * as pathModule from './path.js'
 import { NS } from './namespaces.js'
 import * as draw from './draw.js'
 import { recalculateDimensions } from './recalculate.js'
-import { getParents, getClosest } from '../../src/common/util.js'
+import { getParents, getClosest } from '../common/util.js'
 
 const {
   InsertElementCommand,

packages/svgcanvas/core/text-actions.js

@@ -14,7 +14,7 @@ import {
 } from './utilities.js'
 import {
   supportsGoodTextCharPos
-} from '../../src/common/browser.js'
+} from '../common/browser.js'
 
 let svgCanvas = null
 

packages/svgcanvas/core/undo.js

@@ -11,7 +11,7 @@ import {
 } from './utilities.js'
 import {
   isGecko
-} from '../../src/common/browser.js'
+} from '../common/browser.js'
 import {
   transformPoint, transformListToTransform
 } from './math.js'

packages/svgcanvas/core/utilities.js

@@ -11,7 +11,7 @@ import { setUnitAttr, getTypeMap } from './units.js'
 import {
   hasMatrixTransform, transformListToTransform, transformBox
 } from './math.js'
-import { getClosest, mergeDeep } from '../../src/common/util.js'
+import { getClosest, mergeDeep } from '../common/util.js'
 
 // Much faster than running getBBox() every time
 const visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use,clipPath'

packages/svgcanvas/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@svgedit/svgcanvas",
-    "version": "7.1.6",
+    "version": "7.2.0",
     "description": "SVG Canvas",
     "main": "dist/svgcanvas.js",
     "author": "Narendra Sisodiya",

packages/svgcanvas/svgcanvas.js

@@ -9,36 +9,36 @@
  */
 import 'pathseg' // SVGPathSeg Polyfill (see https://github.com/progers/pathseg)
 
-import Paint from './paint.js'
-import * as pathModule from './path.js'
-import * as history from './history.js'
-import * as draw from './draw.js'
-import { init as pasteInit, pasteElementsMethod } from './paste-elem.js'
-import { init as touchInit } from './touch.js'
-import { svgRootElement } from './svgroot.js'
+import Paint from './core/paint.js'
+import * as pathModule from './core/path.js'
+import * as history from './core/history.js'
+import * as draw from './core/draw.js'
+import { init as pasteInit, pasteElementsMethod } from './core/paste-elem.js'
+import { init as touchInit } from './core/touch.js'
+import { svgRootElement } from './core/svgroot.js'
 import {
   init as undoInit,
   changeSelectedAttributeNoUndoMethod,
   changeSelectedAttributeMethod
-} from './undo.js'
-import { init as selectionInit } from './selection.js'
-import { init as textActionsInit, textActionsMethod } from './text-actions.js'
-import { init as eventInit } from './event.js'
+} from './core/undo.js'
+import { init as selectionInit } from './core/selection.js'
+import { init as textActionsInit, textActionsMethod } from './core/text-actions.js'
+import { init as eventInit } from './core/event.js'
 import {
   init as jsonInit,
   getJsonFromSvgElements,
   addSVGElementsFromJson
-} from './json.js'
-import * as elemGetSet from './elem-get-set.js'
-import { init as selectedElemInit } from './selected-elem.js'
+} from './core/json.js'
+import * as elemGetSet from './core/elem-get-set.js'
+import { init as selectedElemInit } from './core/selected-elem.js'
 import {
   init as blurInit,
   setBlurNoUndo,
   setBlurOffsets,
   setBlur
-} from './blur-event.js'
-import { sanitizeSvg } from './sanitize.js'
-import { getReverseNS, NS } from './namespaces.js'
+} from './core/blur-event.js'
+import { sanitizeSvg } from './core/sanitize.js'
+import { getReverseNS, NS } from './core/namespaces.js'
 import {
   assignAttributes,
   cleanupElement,
@@ -65,28 +65,28 @@ import {
   getFeGaussianBlur,
   stringToHTML,
   insertChildAtIndex
-} from './utilities.js'
+} from './core/utilities.js'
 import {
   matrixMultiply,
   hasMatrixTransform,
   transformListToTransform
-} from './math.js'
-import { convertToNum, init as unitsInit, getTypeMap, isValidUnit, convertUnit } from './units.js'
-import { init as svgInit } from './svg-exec.js'
-import { remapElement, init as coordsInit } from './coords.js'
+} from './core/math.js'
+import { convertToNum, init as unitsInit, getTypeMap, isValidUnit, convertUnit } from './core/units.js'
+import { init as svgInit } from './core/svg-exec.js'
+import { remapElement, init as coordsInit } from './core/coords.js'
 import {
   recalculateDimensions,
   init as recalculateInit
-} from './recalculate.js'
-import { getSelectorManager, Selector, init as selectInit } from './select.js'
-import { clearSvgContentElementInit, init as clearInit } from './clear.js'
+} from './core/recalculate.js'
+import { getSelectorManager, Selector, init as selectInit } from './core/select.js'
+import { clearSvgContentElementInit, init as clearInit } from './core/clear.js'
 import {
   getClosest,
   getParents,
   mergeDeep
-} from '../../src/common/util.js'
+} from './common/util.js'
 
-import dataStorage from './dataStorage.js'
+import dataStorage from './core/dataStorage.js'
 
 const visElems =
   'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use'