@svgedit/svgcanvas 7.1.4 → 7.1.5

package/elem-get-set.js

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

package/event.js

@@ -10,7 +10,7 @@ import {
 } from './utilities.js'
 import {
   convertAttrs
-} from '../../src/common/units.js'
+} from './units.js'
 import {
   transformPoint, hasMatrixTransform, getMatrix, snapToAngle
 } from './math.js'

package/package.json

@@ -1,19 +1,19 @@
 {
     "name": "@svgedit/svgcanvas",
-    "version": "7.1.4",
+    "version": "7.1.5",
     "description": "SVG Canvas",
     "main": "dist/svgcanvas.js",
     "author": "Narendra Sisodiya",
     "publishConfig": {
         "access": "public"
-      },
+    },
     "bugs": {
         "url": "https://github.com/SVG-Edit/svgedit/issues"
     },
     "repository": {
         "type": "git",
         "url": "git+https://github.com/SVG-Edit/svgedit.git"
-      },
+    },
     "homepage": "https://github.com/SVG-Edit/svgedit#readme",
     "contributors": [
         "Pavol Rusnak",
@@ -51,4 +51,4 @@
     "scripts": {
         "build": "rollup -c"
     }
-}
+}

package/path-actions.js

@@ -7,7 +7,7 @@
  */
 
 import { NS } from './namespaces.js'
-import { shortFloat } from '../../src/common/units.js'
+import { shortFloat } from './units.js'
 import { ChangeElementCommand, BatchCommand } from './history.js'
 import {
   transformPoint, snapToAngle, rectsIntersect,

package/path.js

@@ -6,7 +6,7 @@
  * @copyright 2011 Alexis Deveria, 2011 Jeff Schiller
  */
 
-import { shortFloat } from '../../src/common/units.js'
+import { shortFloat } from './units.js'
 import { transformPoint } from './math.js'
 import {
   getRotationAngle, getBBox,

package/recalculate.js

@@ -5,7 +5,7 @@
  */
 
 import { NS } from './namespaces.js'
-import { convertToNum } from '../../src/common/units.js'
+import { convertToNum } from './units.js'
 import { getRotationAngle, getHref, getBBox, getRefElem } from './utilities.js'
 import { BatchCommand, ChangeElementCommand } from './history.js'
 import { remapElement } from './coords.js'

package/rollup.config.js

@@ -10,8 +10,6 @@ import { terser } from 'rollup-plugin-terser'
 // import progress from 'rollup-plugin-progress';
 import filesize from 'rollup-plugin-filesize'
 
-const dest = ['dist/svgcanvas']
-
 // remove existing distribution
 rimraf('./dist', () => console.info('recreating dist'))
 

package/svg-exec.js

@@ -24,7 +24,7 @@ import {
   hashCode
 } from './utilities.js'
 import { transformPoint, transformListToTransform } from './math.js'
-import { convertUnit, shortFloat, convertToNum } from '../../src/common/units.js'
+import { convertUnit, shortFloat, convertToNum } from './units.js'
 import { isGecko, isChrome, isWebkit } from '../../src/common/browser.js'
 import * as pathModule from './path.js'
 import { NS } from './namespaces.js'

package/svgcanvas.js

@@ -71,7 +71,7 @@ import {
   hasMatrixTransform,
   transformListToTransform
 } from './math.js'
-import { convertToNum, init as unitsInit, getTypeMap } from '../../src/common/units.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'
 import {
@@ -118,6 +118,7 @@ class SvgCanvas {
   constructor (container, config) {
     // imported function made available as methods
     this.initializeSvgCanvasMethods()
+    unitsInit(this)
     const { pathActions } = pathModule
 
     // initialize class variables
@@ -228,7 +229,6 @@ class SvgCanvas {
     this.selectedElements = []
 
     jsonInit(this)
-    unitsInit(this)
     utilsInit(this)
     coordsInit(this)
     recalculateInit(this)
@@ -1343,5 +1343,9 @@ SvgCanvas.getClosest = getClosest
 SvgCanvas.getParents = getParents
 SvgCanvas.blankPageObjectURL = blankPageObjectURL
 SvgCanvas.Paint = Paint
+SvgCanvas.getTypeMap = getTypeMap
+SvgCanvas.convertToNum = convertToNum
+SvgCanvas.isValidUnit = isValidUnit
+SvgCanvas.convertUnit = convertUnit
 
 export default SvgCanvas

package/units.js

@@ -0,0 +1,260 @@
+/**
+ * Tools for working with units.
+ * @module units
+ * @license MIT
+ *
+ * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
+ */
+
+const NSSVG = 'http://www.w3.org/2000/svg'
+
+const wAttrs = ['x', 'x1', 'cx', 'rx', 'width']
+const hAttrs = ['y', 'y1', 'cy', 'ry', 'height']
+const unitAttrs = ['r', 'radius', ...wAttrs, ...hAttrs]
+
+// Container of elements.
+let elementContainer_
+
+// Stores mapping of unit type to user coordinates.
+let typeMap_ = {}
+
+/**
+ * @interface module:units.ElementContainer
+ */
+/**
+ * @function module:units.ElementContainer#getBaseUnit
+ * @returns {string} The base unit type of the container ('em')
+ */
+/**
+ * @function module:units.ElementContainer#getElement
+ * @returns {?Element} An element in the container given an id
+ */
+/**
+ * @function module:units.ElementContainer#getHeight
+ * @returns {Float} The container's height
+ */
+/**
+ * @function module:units.ElementContainer#getWidth
+ * @returns {Float} The container's width
+ */
+/**
+ * @function module:units.ElementContainer#getRoundDigits
+ * @returns {Integer} The number of digits number should be rounded to
+ */
+
+/**
+ * @typedef {PlainObject} module:units.TypeMap
+ * @property {Float} em
+ * @property {Float} ex
+ * @property {Float} in
+ * @property {Float} cm
+ * @property {Float} mm
+ * @property {Float} pt
+ * @property {Float} pc
+ * @property {Integer} px
+ * @property {0} %
+ */
+
+/**
+ * Initializes this module.
+ *
+ * @function module:units.init
+ * @param {module:units.ElementContainer} elementContainer - An object implementing the ElementContainer interface.
+ * @returns {void}
+ */
+export const init = function (elementContainer) {
+  elementContainer_ = elementContainer
+
+  // Get correct em/ex values by creating a temporary SVG.
+  const svg = document.createElementNS(NSSVG, 'svg')
+  document.body.append(svg)
+  const rect = document.createElementNS(NSSVG, 'rect')
+  rect.setAttribute('width', '1em')
+  rect.setAttribute('height', '1ex')
+  rect.setAttribute('x', '1in')
+  svg.append(rect)
+  const bb = rect.getBBox()
+  svg.remove()
+
+  const inch = bb.x
+  typeMap_ = {
+    em: bb.width,
+    ex: bb.height,
+    in: inch,
+    cm: inch / 2.54,
+    mm: inch / 25.4,
+    pt: inch / 72,
+    pc: inch / 6,
+    px: 1,
+    '%': 0
+  }
+}
+
+/**
+* Group: Unit conversion functions.
+*/
+
+/**
+ * @function module:units.getTypeMap
+ * @returns {module:units.TypeMap} The unit object with values for each unit
+*/
+export const getTypeMap = () => {
+  return typeMap_
+}
+
+/**
+* @typedef {GenericArray} module:units.CompareNumbers
+* @property {Integer} length 2
+* @property {Float} 0
+* @property {Float} 1
+*/
+
+/**
+* Rounds a given value to a float with number of digits defined in
+* `round_digits` of `saveOptions`
+*
+* @function module:units.shortFloat
+* @param {string|Float|module:units.CompareNumbers} val - The value (or Array of two numbers) to be rounded
+* @returns {Float|string} If a string/number was given, returns a Float. If an array, return a string
+* with comma-separated floats
+*/
+export const shortFloat = (val) => {
+  const digits = elementContainer_.getRoundDigits()
+  if (!isNaN(val)) {
+    return Number(Number(val).toFixed(digits))
+  }
+  if (Array.isArray(val)) {
+    return shortFloat(val[0]) + ',' + shortFloat(val[1])
+  }
+  return Number.parseFloat(val).toFixed(digits) - 0
+}
+
+/**
+* Converts the number to given unit or baseUnit.
+* @function module:units.convertUnit
+* @param {string|Float} val
+* @param {"em"|"ex"|"in"|"cm"|"mm"|"pt"|"pc"|"px"|"%"} [unit]
+* @returns {Float}
+*/
+export const convertUnit = (val, unit) => {
+  unit = unit || elementContainer_.getBaseUnit()
+  // baseVal.convertToSpecifiedUnits(unitNumMap[unit]);
+  // const val = baseVal.valueInSpecifiedUnits;
+  // baseVal.convertToSpecifiedUnits(1);
+  return shortFloat(val / typeMap_[unit])
+}
+
+/**
+* Sets an element's attribute based on the unit in its current value.
+*
+* @function module:units.setUnitAttr
+* @param {Element} elem - DOM element to be changed
+* @param {string} attr - Name of the attribute associated with the value
+* @param {string} val - Attribute value to convert
+* @returns {void}
+*/
+export const setUnitAttr = (elem, attr, val) => {
+  elem.setAttribute(attr, val)
+}
+
+const attrsToConvert = {
+  line: ['x1', 'x2', 'y1', 'y2'],
+  circle: ['cx', 'cy', 'r'],
+  ellipse: ['cx', 'cy', 'rx', 'ry'],
+  foreignObject: ['x', 'y', 'width', 'height'],
+  rect: ['x', 'y', 'width', 'height'],
+  image: ['x', 'y', 'width', 'height'],
+  use: ['x', 'y', 'width', 'height'],
+  text: ['x', 'y']
+}
+
+/**
+* Converts all applicable attributes to the configured baseUnit.
+* @function module:units.convertAttrs
+* @param {Element} element - A DOM element whose attributes should be converted
+* @returns {void}
+*/
+export const convertAttrs = (element) => {
+  const elName = element.tagName
+  const unit = elementContainer_.getBaseUnit()
+  const attrs = attrsToConvert[elName]
+  if (!attrs) { return }
+
+  attrs.forEach((attr) => {
+    const cur = element.getAttribute(attr)
+    if (cur && !isNaN(cur)) {
+      element.setAttribute(attr, (cur / typeMap_[unit]) + unit)
+    }
+  })
+}
+
+/**
+* Converts given values to numbers. Attributes must be supplied in
+* case a percentage is given.
+*
+* @function module:units.convertToNum
+* @param {string} attr - Name of the attribute associated with the value
+* @param {string} val - Attribute value to convert
+* @returns {Float} The converted number
+*/
+export const convertToNum = (attr, val) => {
+  // Return a number if that's what it already is
+  if (!isNaN(val)) { return val - 0 }
+  if (val.substr(-1) === '%') {
+    // Deal with percentage, depends on attribute
+    const num = val.substr(0, val.length - 1) / 100
+    const width = elementContainer_.getWidth()
+    const height = elementContainer_.getHeight()
+
+    if (wAttrs.includes(attr)) {
+      return num * width
+    }
+    if (hAttrs.includes(attr)) {
+      return num * height
+    }
+    return num * Math.sqrt((width * width) + (height * height)) / Math.sqrt(2)
+  }
+  const unit = val.substr(-2)
+  const num = val.substr(0, val.length - 2)
+  // Note that this multiplication turns the string into a number
+  return num * typeMap_[unit]
+}
+
+/**
+* Check if an attribute's value is in a valid format.
+* @function module:units.isValidUnit
+* @param {string} attr - The name of the attribute associated with the value
+* @param {string} val - The attribute value to check
+* @param {Element} selectedElement
+* @returns {boolean} Whether the unit is valid
+*/
+export const isValidUnit = (attr, val, selectedElement) => {
+  if (unitAttrs.includes(attr)) {
+    // True if it's just a number
+    if (!isNaN(val)) {
+      return true
+    }
+    // Not a number, check if it has a valid unit
+    val = val.toLowerCase()
+    return Object.keys(typeMap_).some((unit) => {
+      const re = new RegExp('^-?[\\d\\.]+' + unit + '$')
+      return re.test(val)
+    })
+  }
+  if (attr === 'id') {
+    // if we're trying to change the id, make sure it's not already present in the doc
+    // and the id value is valid.
+
+    let result = false
+    // because getElement() can throw an exception in the case of an invalid id
+    // (according to https://www.w3.org/TR/xml-id/ IDs must be a NCName)
+    // we wrap it in an exception and only return true if the ID was valid and
+    // not already present
+    try {
+      const elem = elementContainer_.getElement(val)
+      result = (!elem || elem === selectedElement)
+    } catch (e) { console.error(e) }
+    return result
+  }
+  return true
+}

package/utilities.js

@@ -7,7 +7,7 @@
  */
 
 import { NS } from './namespaces.js'
-import { setUnitAttr, getTypeMap } from '../../src/common/units.js'
+import { setUnitAttr, getTypeMap } from './units.js'
 import {
   hasMatrixTransform, transformListToTransform, transformBox
 } from './math.js'