@svgedit/svgcanvas 7.1.4

package/math.js

@@ -0,0 +1,221 @@
+/**
+ * Mathematical utilities.
+ * @module math
+ * @license MIT
+ *
+ * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
+ */
+
+/**
+* @typedef {PlainObject} module:math.AngleCoord45
+* @property {Float} x - The angle-snapped x value
+* @property {Float} y - The angle-snapped y value
+* @property {Integer} a - The angle at which to snap
+*/
+
+/**
+* @typedef {PlainObject} module:math.XYObject
+* @property {Float} x
+* @property {Float} y
+*/
+
+import { NS } from './namespaces.js'
+
+// Constants
+const NEAR_ZERO = 1e-14
+
+// Throw away SVGSVGElement used for creating matrices/transforms.
+const svg = document.createElementNS(NS.SVG, 'svg')
+
+/**
+ * A (hopefully) quicker function to transform a point by a matrix
+ * (this function avoids any DOM calls and just does the math).
+ * @function module:math.transformPoint
+ * @param {Float} x - Float representing the x coordinate
+ * @param {Float} y - Float representing the y coordinate
+ * @param {SVGMatrix} m - Matrix object to transform the point with
+ * @returns {module:math.XYObject} An x, y object representing the transformed point
+*/
+export const transformPoint = function (x, y, m) {
+  return { x: m.a * x + m.c * y + m.e, y: m.b * x + m.d * y + m.f }
+}
+
+/**
+ * Helper function to check if the matrix performs no actual transform
+ * (i.e. exists for identity purposes).
+ * @function module:math.isIdentity
+ * @param {SVGMatrix} m - The matrix object to check
+ * @returns {boolean} Indicates whether or not the matrix is 1,0,0,1,0,0
+*/
+export const isIdentity = function (m) {
+  return (m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && m.e === 0 && m.f === 0)
+}
+
+/**
+ * This function tries to return a `SVGMatrix` that is the multiplication `m1 * m2`.
+ * We also round to zero when it's near zero.
+ * @function module:math.matrixMultiply
+ * @param {...SVGMatrix} args - Matrix objects to multiply
+ * @returns {SVGMatrix} The matrix object resulting from the calculation
+*/
+export const matrixMultiply = function (...args) {
+  const m = args.reduceRight((prev, m1) => {
+    return m1.multiply(prev)
+  })
+
+  if (Math.abs(m.a) < NEAR_ZERO) { m.a = 0 }
+  if (Math.abs(m.b) < NEAR_ZERO) { m.b = 0 }
+  if (Math.abs(m.c) < NEAR_ZERO) { m.c = 0 }
+  if (Math.abs(m.d) < NEAR_ZERO) { m.d = 0 }
+  if (Math.abs(m.e) < NEAR_ZERO) { m.e = 0 }
+  if (Math.abs(m.f) < NEAR_ZERO) { m.f = 0 }
+
+  return m
+}
+
+/**
+ * See if the given transformlist includes a non-indentity matrix transform.
+ * @function module:math.hasMatrixTransform
+ * @param {SVGTransformList} [tlist] - The transformlist to check
+ * @returns {boolean} Whether or not a matrix transform was found
+*/
+export const hasMatrixTransform = function (tlist) {
+  if (!tlist) { return false }
+  let num = tlist.numberOfItems
+  while (num--) {
+    const xform = tlist.getItem(num)
+    if (xform.type === 1 && !isIdentity(xform.matrix)) { return true }
+  }
+  return false
+}
+
+/**
+* @typedef {PlainObject} module:math.TransformedBox An object with the following values
+* @property {module:math.XYObject} tl - The top left coordinate
+* @property {module:math.XYObject} tr - The top right coordinate
+* @property {module:math.XYObject} bl - The bottom left coordinate
+* @property {module:math.XYObject} br - The bottom right coordinate
+* @property {PlainObject} aabox - Object with the following values:
+* @property {Float} aabox.x - Float with the axis-aligned x coordinate
+* @property {Float} aabox.y - Float with the axis-aligned y coordinate
+* @property {Float} aabox.width - Float with the axis-aligned width coordinate
+* @property {Float} aabox.height - Float with the axis-aligned height coordinate
+*/
+
+/**
+ * Transforms a rectangle based on the given matrix.
+ * @function module:math.transformBox
+ * @param {Float} l - Float with the box's left coordinate
+ * @param {Float} t - Float with the box's top coordinate
+ * @param {Float} w - Float with the box width
+ * @param {Float} h - Float with the box height
+ * @param {SVGMatrix} m - Matrix object to transform the box by
+ * @returns {module:math.TransformedBox}
+*/
+export const transformBox = function (l, t, w, h, m) {
+  const tl = transformPoint(l, t, m)
+  const tr = transformPoint((l + w), t, m)
+  const bl = transformPoint(l, (t + h), m)
+  const br = transformPoint((l + w), (t + h), m)
+
+  const minx = Math.min(tl.x, tr.x, bl.x, br.x)
+  const maxx = Math.max(tl.x, tr.x, bl.x, br.x)
+  const miny = Math.min(tl.y, tr.y, bl.y, br.y)
+  const maxy = Math.max(tl.y, tr.y, bl.y, br.y)
+
+  return {
+    tl,
+    tr,
+    bl,
+    br,
+    aabox: {
+      x: minx,
+      y: miny,
+      width: (maxx - minx),
+      height: (maxy - miny)
+    }
+  }
+}
+
+/**
+ * This returns a single matrix Transform for a given Transform List
+ * (this is the equivalent of `SVGTransformList.consolidate()` but unlike
+ * that method, this one does not modify the actual `SVGTransformList`).
+ * This function is very liberal with its `min`, `max` arguments.
+ * @function module:math.transformListToTransform
+ * @param {SVGTransformList} tlist - The transformlist object
+ * @param {Integer} [min=0] - Optional integer indicating start transform position
+ * @param {Integer} [max] - Optional integer indicating end transform position;
+ *   defaults to one less than the tlist's `numberOfItems`
+ * @returns {SVGTransform} A single matrix transform object
+*/
+export const transformListToTransform = function (tlist, min, max) {
+  if (!tlist) {
+    // Or should tlist = null have been prevented before this?
+    return svg.createSVGTransformFromMatrix(svg.createSVGMatrix())
+  }
+  min = min || 0
+  max = max || (tlist.numberOfItems - 1)
+  min = Number.parseInt(min)
+  max = Number.parseInt(max)
+  if (min > max) { const temp = max; max = min; min = temp }
+  let m = svg.createSVGMatrix()
+  for (let i = min; i <= max; ++i) {
+    // if our indices are out of range, just use a harmless identity matrix
+    const mtom = (i >= 0 && i < tlist.numberOfItems
+      ? tlist.getItem(i).matrix
+      : svg.createSVGMatrix())
+    m = matrixMultiply(m, mtom)
+  }
+  return svg.createSVGTransformFromMatrix(m)
+}
+
+/**
+ * Get the matrix object for a given element.
+ * @function module:math.getMatrix
+ * @param {Element} elem - The DOM element to check
+ * @returns {SVGMatrix} The matrix object associated with the element's transformlist
+*/
+export const getMatrix = (elem) => {
+  const tlist = elem.transform.baseVal
+  return transformListToTransform(tlist).matrix
+}
+
+/**
+ * Returns a 45 degree angle coordinate associated with the two given
+ * coordinates.
+ * @function module:math.snapToAngle
+ * @param {Integer} x1 - First coordinate's x value
+ * @param {Integer} y1 - First coordinate's y value
+ * @param {Integer} x2 - Second coordinate's x value
+ * @param {Integer} y2 - Second coordinate's y value
+ * @returns {module:math.AngleCoord45}
+*/
+export const snapToAngle = (x1, y1, x2, y2) => {
+  const snap = Math.PI / 4 // 45 degrees
+  const dx = x2 - x1
+  const dy = y2 - y1
+  const angle = Math.atan2(dy, dx)
+  const dist = Math.sqrt(dx * dx + dy * dy)
+  const snapangle = Math.round(angle / snap) * snap
+
+  return {
+    x: x1 + dist * Math.cos(snapangle),
+    y: y1 + dist * Math.sin(snapangle),
+    a: snapangle
+  }
+}
+
+/**
+ * Check if two rectangles (BBoxes objects) intersect each other.
+ * @function module:math.rectsIntersect
+ * @param {SVGRect} r1 - The first BBox-like object
+ * @param {SVGRect} r2 - The second BBox-like object
+ * @returns {boolean} True if rectangles intersect
+ */
+export const rectsIntersect = (r1, r2) => {
+  return r2.x < (r1.x + r1.width) &&
+    (r2.x + r2.width) > r1.x &&
+    r2.y < (r1.y + r1.height) &&
+    (r2.y + r2.height) > r1.y
+}

package/namespaces.js

@@ -0,0 +1,40 @@
+/**
+ * Namespaces or tools therefor.
+ * @module namespaces
+ * @license MIT
+*/
+
+/**
+* Common namepaces constants in alpha order.
+* @enum {string}
+* @type {PlainObject}
+* @memberof module:namespaces
+*/
+export const NS = {
+  HTML: 'http://www.w3.org/1999/xhtml',
+  MATH: 'http://www.w3.org/1998/Math/MathML',
+  SE: 'http://svg-edit.googlecode.com',
+  SVG: 'http://www.w3.org/2000/svg',
+  XLINK: 'http://www.w3.org/1999/xlink',
+  OI: 'http://www.optimistik.fr/namespace/svg/OIdata',
+  XML: 'http://www.w3.org/XML/1998/namespace',
+  XMLNS: 'http://www.w3.org/2000/xmlns/' // see http://www.w3.org/TR/REC-xml-names/#xmlReserved
+  // SODIPODI: 'http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd',
+  // INKSCAPE: 'http://www.inkscape.org/namespaces/inkscape',
+  // RDF: 'http://www.w3.org/1999/02/22-rdf-syntax-ns#',
+  // OSB: 'http://www.openswatchbook.org/uri/2009/osb',
+  // CC: 'http://creativecommons.org/ns#',
+  // DC: 'http://purl.org/dc/elements/1.1/'
+}
+
+/**
+* @function module:namespaces.getReverseNS
+* @returns {string} The NS with key values switched and lowercase
+*/
+export const getReverseNS = function () {
+  const reverseNS = {}
+  Object.entries(NS).forEach(([name, URI]) => {
+    reverseNS[URI] = name.toLowerCase()
+  })
+  return reverseNS
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+    "name": "@svgedit/svgcanvas",
+    "version": "7.1.4",
+    "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",
+        "Jeff Schiller",
+        "Vidar Hokstad",
+        "Alexis Deveria",
+        "Brett Zamir",
+        "Fabien Jacq",
+        "OptimistikSAS"
+    ],
+    "keywords": [
+        "svg-editor",
+        "javascript",
+        "svg-edit",
+        "svg",
+        "svgcanvas"
+    ],
+    "license": "MIT",
+    "browserslist": [
+        "defaults",
+        "not IE 11",
+        "not OperaMini all"
+    ],
+    "standard": {
+        "ignore": [],
+        "globals": [
+            "cy",
+            "assert"
+        ],
+        "env": [
+            "mocha",
+            "browser"
+        ]
+    },
+    "scripts": {
+        "build": "rollup -c"
+    }
+}

package/paint.js

@@ -0,0 +1,88 @@
+/**
+ *
+ */
+export default class Paint {
+  /**
+   * @param {module:jGraduate.jGraduatePaintOptions} [opt]
+  */
+  constructor (opt) {
+    const options = opt || {}
+    this.alpha = isNaN(options.alpha) ? 100 : options.alpha
+    // copy paint object
+    if (options.copy) {
+      /**
+       * @name module:jGraduate~Paint#type
+       * @type {"none"|"solidColor"|"linearGradient"|"radialGradient"}
+       */
+      this.type = options.copy.type
+      /**
+       * Represents opacity (0-100).
+       * @name module:jGraduate~Paint#alpha
+       * @type {Float}
+       */
+      this.alpha = options.copy.alpha
+      /**
+       * Represents #RRGGBB hex of color.
+       * @name module:jGraduate~Paint#solidColor
+       * @type {string}
+       */
+      this.solidColor = null
+      /**
+       * @name module:jGraduate~Paint#linearGradient
+       * @type {SVGLinearGradientElement}
+       */
+      this.linearGradient = null
+      /**
+       * @name module:jGraduate~Paint#radialGradient
+       * @type {SVGRadialGradientElement}
+       */
+      this.radialGradient = null
+
+      switch (this.type) {
+        case 'none':
+          break
+        case 'solidColor':
+          this.solidColor = options.copy.solidColor
+          break
+        case 'linearGradient':
+          this.linearGradient = options.copy.linearGradient.cloneNode(true)
+          break
+        case 'radialGradient':
+          this.radialGradient = options.copy.radialGradient.cloneNode(true)
+          break
+      }
+    // create linear gradient paint
+    } else if (options.linearGradient) {
+      this.type = 'linearGradient'
+      this.solidColor = null
+      this.radialGradient = null
+      if (options.linearGradient.hasAttribute('xlink:href')) {
+        const xhref = document.getElementById(options.linearGradient.getAttribute('xlink:href').substr(1))
+        this.linearGradient = xhref.cloneNode(true)
+      } else {
+        this.linearGradient = options.linearGradient.cloneNode(true)
+      }
+    // create linear gradient paint
+    } else if (options.radialGradient) {
+      this.type = 'radialGradient'
+      this.solidColor = null
+      this.linearGradient = null
+      if (options.radialGradient.hasAttribute('xlink:href')) {
+        const xhref = document.getElementById(options.radialGradient.getAttribute('xlink:href').substr(1))
+        this.radialGradient = xhref.cloneNode(true)
+      } else {
+        this.radialGradient = options.radialGradient.cloneNode(true)
+      }
+    // create solid color paint
+    } else if (options.solidColor) {
+      this.type = 'solidColor'
+      this.solidColor = options.solidColor
+    // create empty paint
+    } else {
+      this.type = 'none'
+      this.solidColor = null
+      this.linearGradient = null
+      this.radialGradient = null
+    }
+  }
+}

package/paste-elem.js

@@ -0,0 +1,127 @@
+import {
+  getStrokedBBoxDefaultVisible
+} from './utilities.js'
+import * as hstry from './history.js'
+
+const {
+  InsertElementCommand, BatchCommand
+} = hstry
+
+let svgCanvas = null
+
+/**
+* @function module:paste-elem.init
+* @param {module:paste-elem.pasteContext} pasteContext
+* @returns {void}
+*/
+export const init = (canvas) => {
+  svgCanvas = canvas
+}
+
+/**
+* @function module:svgcanvas.SvgCanvas#pasteElements
+* @param {"in_place"|"point"|void} type
+* @param {Integer|void} x Expected if type is "point"
+* @param {Integer|void} y Expected if type is "point"
+* @fires module:svgcanvas.SvgCanvas#event:changed
+* @fires module:svgcanvas.SvgCanvas#event:ext_IDsUpdated
+* @returns {void}
+*/
+export const pasteElementsMethod = function (type, x, y) {
+  let clipb = JSON.parse(sessionStorage.getItem(svgCanvas.getClipboardID()))
+  if (!clipb) return
+  let len = clipb.length
+  if (!len) return
+
+  const pasted = []
+  const batchCmd = new BatchCommand('Paste elements')
+  // const drawing = getCurrentDrawing();
+  /**
+* @typedef {PlainObject<string, string>} module:svgcanvas.ChangedIDs
+*/
+  /**
+* @type {module:svgcanvas.ChangedIDs}
+*/
+  const changedIDs = {}
+
+  // Recursively replace IDs and record the changes
+  /**
+*
+* @param {module:svgcanvas.SVGAsJSON} elem
+* @returns {void}
+*/
+  function checkIDs (elem) {
+    if (elem.attr?.id) {
+      changedIDs[elem.attr.id] = svgCanvas.getNextId()
+      elem.attr.id = changedIDs[elem.attr.id]
+    }
+    if (elem.children) elem.children.forEach((child) => checkIDs(child))
+  }
+  clipb.forEach((elem) => checkIDs(elem))
+
+  // Give extensions like the connector extension a chance to reflect new IDs and remove invalid elements
+  /**
+* Triggered when `pasteElements` is called from a paste action (context menu or key).
+* @event module:svgcanvas.SvgCanvas#event:ext_IDsUpdated
+* @type {PlainObject}
+* @property {module:svgcanvas.SVGAsJSON[]} elems
+* @property {module:svgcanvas.ChangedIDs} changes Maps past ID (on attribute) to current ID
+*/
+  svgCanvas.runExtensions(
+    'IDsUpdated',
+    /** @type {module:svgcanvas.SvgCanvas#event:ext_IDsUpdated} */
+    { elems: clipb, changes: changedIDs },
+    true
+  ).forEach(function (extChanges) {
+    if (!extChanges || !('remove' in extChanges)) return
+
+    extChanges.remove.forEach(function (removeID) {
+      clipb = clipb.filter(function (clipBoardItem) {
+        return clipBoardItem.attr.id !== removeID
+      })
+    })
+  })
+
+  // Move elements to lastClickPoint
+  while (len--) {
+    const elem = clipb[len]
+    if (!elem) { continue }
+
+    const copy = svgCanvas.addSVGElementsFromJson(elem)
+    pasted.push(copy)
+    batchCmd.addSubCommand(new InsertElementCommand(copy))
+
+    svgCanvas.restoreRefElements(copy)
+  }
+
+  svgCanvas.selectOnly(pasted)
+
+  if (type !== 'in_place') {
+    let ctrX; let ctrY
+
+    if (!type) {
+      ctrX = svgCanvas.getLastClickPoint('x')
+      ctrY = svgCanvas.getLastClickPoint('y')
+    } else if (type === 'point') {
+      ctrX = x
+      ctrY = y
+    }
+
+    const bbox = getStrokedBBoxDefaultVisible(pasted)
+    const cx = ctrX - (bbox.x + bbox.width / 2)
+    const cy = ctrY - (bbox.y + bbox.height / 2)
+    const dx = []
+    const dy = []
+
+    pasted.forEach(function (_item) {
+      dx.push(cx)
+      dy.push(cy)
+    })
+
+    const cmd = svgCanvas.moveSelectedElements(dx, dy, false)
+    if (cmd) batchCmd.addSubCommand(cmd)
+  }
+
+  svgCanvas.addCommandToHistory(batchCmd)
+  svgCanvas.call('changed', pasted)
+}