(function () {
'use strict';
// http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/
/**
*
* @param {Event} ev
* @returns {void}
*/
function touchHandler(ev) {
const {
changedTouches
} = ev,
first = changedTouches[0];
let type = '';
switch (ev.type) {
case 'touchstart':
type = 'mousedown';
break;
case 'touchmove':
type = 'mousemove';
break;
case 'touchend':
type = 'mouseup';
break;
default:
return;
}
const {
screenX,
screenY,
clientX,
clientY
} = first; // eslint-disable-line no-shadow
const simulatedEvent = new MouseEvent(type, {
// Event interface
bubbles: true,
cancelable: true,
// UIEvent interface
view: window,
detail: 1,
// click count
// MouseEvent interface (customized)
screenX,
screenY,
clientX,
clientY,
// MouseEvent interface (defaults) - these could be removed
ctrlKey: false,
altKey: false,
shiftKey: false,
metaKey: false,
button: 0,
// main button (usually left)
relatedTarget: null
});
if (changedTouches.length < 2) {
first.target.dispatchEvent(simulatedEvent);
ev.preventDefault();
}
}
document.addEventListener('touchstart', touchHandler, true);
document.addEventListener('touchmove', touchHandler, true);
document.addEventListener('touchend', touchHandler, true);
document.addEventListener('touchcancel', touchHandler, true);
/**
* Namespaces or tools therefor.
* @module namespaces
* @license MIT
*/
/**
* Common namepaces constants in alpha order.
* @enum {string}
* @type {PlainObject}
* @memberof module:namespaces
*/
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',
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
};
/**
* @function module:namespaces.getReverseNS
* @returns {string} The NS with key values switched and lowercase
*/
const getReverseNS = function () {
const reverseNS = {};
Object.entries(NS).forEach(([name, URI]) => {
reverseNS[URI] = name.toLowerCase();
});
return reverseNS;
};
/* eslint-disable import/unambiguous */
/* globals SVGPathSeg, SVGPathSegMovetoRel, SVGPathSegMovetoAbs,
SVGPathSegMovetoRel, SVGPathSegLinetoRel, SVGPathSegLinetoAbs,
SVGPathSegLinetoHorizontalRel, SVGPathSegLinetoHorizontalAbs,
SVGPathSegLinetoVerticalRel, SVGPathSegLinetoVerticalAbs,
SVGPathSegClosePath, SVGPathSegCurvetoCubicRel,
SVGPathSegCurvetoCubicAbs, SVGPathSegCurvetoCubicSmoothRel,
SVGPathSegCurvetoCubicSmoothAbs, SVGPathSegCurvetoQuadraticRel,
SVGPathSegCurvetoQuadraticAbs, SVGPathSegCurvetoQuadraticSmoothRel,
SVGPathSegCurvetoQuadraticSmoothAbs, SVGPathSegArcRel, SVGPathSegArcAbs */
/**
* SVGPathSeg API polyfill
* https://github.com/progers/pathseg
*
* This is a drop-in replacement for the `SVGPathSeg` and `SVGPathSegList` APIs
* that were removed from SVG2 ({@link https://lists.w3.org/Archives/Public/www-svg/2015Jun/0044.html}),
* including the latest spec changes which were implemented in Firefox 43 and
* Chrome 46.
*/
/* eslint-disable no-shadow, class-methods-use-this, jsdoc/require-jsdoc */
// Linting: We avoid `no-shadow` as ESLint thinks these are still available globals
// Linting: We avoid `class-methods-use-this` as this is a polyfill that must
// follow the conventions
(() => {
if (!('SVGPathSeg' in window)) {
// Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSeg
class SVGPathSeg {
constructor(type, typeAsLetter, owningPathSegList) {
this.pathSegType = type;
this.pathSegTypeAsLetter = typeAsLetter;
this._owningPathSegList = owningPathSegList;
} // Notify owning PathSegList on any changes so they can be synchronized back to the path element.
_segmentChanged() {
if (this._owningPathSegList) {
this._owningPathSegList.segmentChanged(this);
}
}
}
SVGPathSeg.prototype.classname = 'SVGPathSeg';
SVGPathSeg.PATHSEG_UNKNOWN = 0;
SVGPathSeg.PATHSEG_CLOSEPATH = 1;
SVGPathSeg.PATHSEG_MOVETO_ABS = 2;
SVGPathSeg.PATHSEG_MOVETO_REL = 3;
SVGPathSeg.PATHSEG_LINETO_ABS = 4;
SVGPathSeg.PATHSEG_LINETO_REL = 5;
SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS = 6;
SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL = 7;
SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS = 8;
SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL = 9;
SVGPathSeg.PATHSEG_ARC_ABS = 10;
SVGPathSeg.PATHSEG_ARC_REL = 11;
SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS = 12;
SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL = 13;
SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS = 14;
SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL = 15;
SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS = 16;
SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL = 17;
SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS = 18;
SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL = 19;
class SVGPathSegClosePath extends SVGPathSeg {
constructor(owningPathSegList) {
super(SVGPathSeg.PATHSEG_CLOSEPATH, 'z', owningPathSegList);
}
toString() {
return '[object SVGPathSegClosePath]';
}
_asPathString() {
return this.pathSegTypeAsLetter;
}
clone() {
return new SVGPathSegClosePath(undefined);
}
}
class SVGPathSegMovetoAbs extends SVGPathSeg {
constructor(owningPathSegList, x, y) {
super(SVGPathSeg.PATHSEG_MOVETO_ABS, 'M', owningPathSegList);
this._x = x;
this._y = y;
}
toString() {
return '[object SVGPathSegMovetoAbs]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y;
}
clone() {
return new SVGPathSegMovetoAbs(undefined, this._x, this._y);
}
}
Object.defineProperties(SVGPathSegMovetoAbs.prototype, {
x: {
get() {
return this._x;
},
set(x) {
this._x = x;
this._segmentChanged();
},
enumerable: true
},
y: {
get() {
return this._y;
},
set(y) {
this._y = y;
this._segmentChanged();
},
enumerable: true
}
});
class SVGPathSegMovetoRel extends SVGPathSeg {
constructor(owningPathSegList, x, y) {
super(SVGPathSeg.PATHSEG_MOVETO_REL, 'm', owningPathSegList);
this._x = x;
this._y = y;
}
toString() {
return '[object SVGPathSegMovetoRel]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y;
}
clone() {
return new SVGPathSegMovetoRel(undefined, this._x, this._y);
}
}
Object.defineProperties(SVGPathSegMovetoRel.prototype, {
x: {
get() {
return this._x;
},
set(x) {
this._x = x;
this._segmentChanged();
},
enumerable: true
},
y: {
get() {
return this._y;
},
set(y) {
this._y = y;
this._segmentChanged();
},
enumerable: true
}
});
class SVGPathSegLinetoAbs extends SVGPathSeg {
constructor(owningPathSegList, x, y) {
super(SVGPathSeg.PATHSEG_LINETO_ABS, 'L', owningPathSegList);
this._x = x;
this._y = y;
}
toString() {
return '[object SVGPathSegLinetoAbs]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y;
}
clone() {
return new SVGPathSegLinetoAbs(undefined, this._x, this._y);
}
}
Object.defineProperties(SVGPathSegLinetoAbs.prototype, {
x: {
get() {
return this._x;
},
set(x) {
this._x = x;
this._segmentChanged();
},
enumerable: true
},
y: {
get() {
return this._y;
},
set(y) {
this._y = y;
this._segmentChanged();
},
enumerable: true
}
});
class SVGPathSegLinetoRel extends SVGPathSeg {
constructor(owningPathSegList, x, y) {
super(SVGPathSeg.PATHSEG_LINETO_REL, 'l', owningPathSegList);
this._x = x;
this._y = y;
}
toString() {
return '[object SVGPathSegLinetoRel]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y;
}
clone() {
return new SVGPathSegLinetoRel(undefined, this._x, this._y);
}
}
Object.defineProperties(SVGPathSegLinetoRel.prototype, {
x: {
get() {
return this._x;
},
set(x) {
this._x = x;
this._segmentChanged();
},
enumerable: true
},
y: {
get() {
return this._y;
},
set(y) {
this._y = y;
this._segmentChanged();
},
enumerable: true
}
});
class SVGPathSegCurvetoCubicAbs extends SVGPathSeg {
constructor(owningPathSegList, x, y, x1, y1, x2, y2) {
super(SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS, 'C', owningPathSegList);
this._x = x;
this._y = y;
this._x1 = x1;
this._y1 = y1;
this._x2 = x2;
this._y2 = y2;
}
toString() {
return '[object SVGPathSegCurvetoCubicAbs]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y;
}
clone() {
return new SVGPathSegCurvetoCubicAbs(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2);
}
}
Object.defineProperties(SVGPathSegCurvetoCubicAbs.prototype, {
x: {
get() {
return this._x;
},
set(x) {
this._x = x;
this._segmentChanged();
},
enumerable: true
},
y: {
get() {
return this._y;
},
set(y) {
this._y = y;
this._segmentChanged();
},
enumerable: true
},
x1: {
get() {
return this._x1;
},
set(x1) {
this._x1 = x1;
this._segmentChanged();
},
enumerable: true
},
y1: {
get() {
return this._y1;
},
set(y1) {
this._y1 = y1;
this._segmentChanged();
},
enumerable: true
},
x2: {
get() {
return this._x2;
},
set(x2) {
this._x2 = x2;
this._segmentChanged();
},
enumerable: true
},
y2: {
get() {
return this._y2;
},
set(y2) {
this._y2 = y2;
this._segmentChanged();
},
enumerable: true
}
});
class SVGPathSegCurvetoCubicRel extends SVGPathSeg {
constructor(owningPathSegList, x, y, x1, y1, x2, y2) {
super(SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL, 'c', owningPathSegList);
this._x = x;
this._y = y;
this._x1 = x1;
this._y1 = y1;
this._x2 = x2;
this._y2 = y2;
}
toString() {
return '[object SVGPathSegCurvetoCubicRel]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y;
}
clone() {
return new SVGPathSegCurvetoCubicRel(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2);
}
}
Object.defineProperties(SVGPathSegCurvetoCubicRel.prototype, {
x: {
get() {
return this._x;
},
set(x) {
this._x = x;
this._segmentChanged();
},
enumerable: true
},
y: {
get() {
return this._y;
},
set(y) {
this._y = y;
this._segmentChanged();
},
enumerable: true
},
x1: {
get() {
return this._x1;
},
set(x1) {
this._x1 = x1;
this._segmentChanged();
},
enumerable: true
},
y1: {
get() {
return this._y1;
},
set(y1) {
this._y1 = y1;
this._segmentChanged();
},
enumerable: true
},
x2: {
get() {
return this._x2;
},
set(x2) {
this._x2 = x2;
this._segmentChanged();
},
enumerable: true
},
y2: {
get() {
return this._y2;
},
set(y2) {
this._y2 = y2;
this._segmentChanged();
},
enumerable: true
}
});
class SVGPathSegCurvetoQuadraticAbs extends SVGPathSeg {
constructor(owningPathSegList, x, y, x1, y1) {
super(SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS, 'Q', owningPathSegList);
this._x = x;
this._y = y;
this._x1 = x1;
this._y1 = y1;
}
toString() {
return '[object SVGPathSegCurvetoQuadraticAbs]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x + ' ' + this._y;
}
clone() {
return new SVGPathSegCurvetoQuadraticAbs(undefined, this._x, this._y, this._x1, this._y1);
}
}
Object.defineProperties(SVGPathSegCurvetoQuadraticAbs.prototype, {
x: {
get() {
return this._x;
},
set(x) {
this._x = x;
this._segmentChanged();
},
enumerable: true
},
y: {
get() {
return this._y;
},
set(y) {
this._y = y;
this._segmentChanged();
},
enumerable: true
},
x1: {
get() {
return this._x1;
},
set(x1) {
this._x1 = x1;
this._segmentChanged();
},
enumerable: true
},
y1: {
get() {
return this._y1;
},
set(y1) {
this._y1 = y1;
this._segmentChanged();
},
enumerable: true
}
});
class SVGPathSegCurvetoQuadraticRel extends SVGPathSeg {
constructor(owningPathSegList, x, y, x1, y1) {
super(SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL, 'q', owningPathSegList);
this._x = x;
this._y = y;
this._x1 = x1;
this._y1 = y1;
}
toString() {
return '[object SVGPathSegCurvetoQuadraticRel]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x + ' ' + this._y;
}
clone() {
return new SVGPathSegCurvetoQuadraticRel(undefined, this._x, this._y, this._x1, this._y1);
}
}
Object.defineProperties(SVGPathSegCurvetoQuadraticRel.prototype, {
x: {
get() {
return this._x;
},
set(x) {
this._x = x;
this._segmentChanged();
},
enumerable: true
},
y: {
get() {
return this._y;
},
set(y) {
this._y = y;
this._segmentChanged();
},
enumerable: true
},
x1: {
get() {
return this._x1;
},
set(x1) {
this._x1 = x1;
this._segmentChanged();
},
enumerable: true
},
y1: {
get() {
return this._y1;
},
set(y1) {
this._y1 = y1;
this._segmentChanged();
},
enumerable: true
}
});
class SVGPathSegArcAbs extends SVGPathSeg {
constructor(owningPathSegList, x, y, r1, r2, angle, largeArcFlag, sweepFlag) {
super(SVGPathSeg.PATHSEG_ARC_ABS, 'A', owningPathSegList);
this._x = x;
this._y = y;
this._r1 = r1;
this._r2 = r2;
this._angle = angle;
this._largeArcFlag = largeArcFlag;
this._sweepFlag = sweepFlag;
}
toString() {
return '[object SVGPathSegArcAbs]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._r1 + ' ' + this._r2 + ' ' + this._angle + ' ' + (this._largeArcFlag ? '1' : '0') + ' ' + (this._sweepFlag ? '1' : '0') + ' ' + this._x + ' ' + this._y;
}
clone() {
return new SVGPathSegArcAbs(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag);
}
}
Object.defineProperties(SVGPathSegArcAbs.prototype, {
x: {
get() {
return this._x;
},
set(x) {
this._x = x;
this._segmentChanged();
},
enumerable: true
},
y: {
get() {
return this._y;
},
set(y) {
this._y = y;
this._segmentChanged();
},
enumerable: true
},
r1: {
get() {
return this._r1;
},
set(r1) {
this._r1 = r1;
this._segmentChanged();
},
enumerable: true
},
r2: {
get() {
return this._r2;
},
set(r2) {
this._r2 = r2;
this._segmentChanged();
},
enumerable: true
},
angle: {
get() {
return this._angle;
},
set(angle) {
this._angle = angle;
this._segmentChanged();
},
enumerable: true
},
largeArcFlag: {
get() {
return this._largeArcFlag;
},
set(largeArcFlag) {
this._largeArcFlag = largeArcFlag;
this._segmentChanged();
},
enumerable: true
},
sweepFlag: {
get() {
return this._sweepFlag;
},
set(sweepFlag) {
this._sweepFlag = sweepFlag;
this._segmentChanged();
},
enumerable: true
}
});
class SVGPathSegArcRel extends SVGPathSeg {
constructor(owningPathSegList, x, y, r1, r2, angle, largeArcFlag, sweepFlag) {
super(SVGPathSeg.PATHSEG_ARC_REL, 'a', owningPathSegList);
this._x = x;
this._y = y;
this._r1 = r1;
this._r2 = r2;
this._angle = angle;
this._largeArcFlag = largeArcFlag;
this._sweepFlag = sweepFlag;
}
toString() {
return '[object SVGPathSegArcRel]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._r1 + ' ' + this._r2 + ' ' + this._angle + ' ' + (this._largeArcFlag ? '1' : '0') + ' ' + (this._sweepFlag ? '1' : '0') + ' ' + this._x + ' ' + this._y;
}
clone() {
return new SVGPathSegArcRel(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag);
}
}
Object.defineProperties(SVGPathSegArcRel.prototype, {
x: {
get() {
return this._x;
},
set(x) {
this._x = x;
this._segmentChanged();
},
enumerable: true
},
y: {
get() {
return this._y;
},
set(y) {
this._y = y;
this._segmentChanged();
},
enumerable: true
},
r1: {
get() {
return this._r1;
},
set(r1) {
this._r1 = r1;
this._segmentChanged();
},
enumerable: true
},
r2: {
get() {
return this._r2;
},
set(r2) {
this._r2 = r2;
this._segmentChanged();
},
enumerable: true
},
angle: {
get() {
return this._angle;
},
set(angle) {
this._angle = angle;
this._segmentChanged();
},
enumerable: true
},
largeArcFlag: {
get() {
return this._largeArcFlag;
},
set(largeArcFlag) {
this._largeArcFlag = largeArcFlag;
this._segmentChanged();
},
enumerable: true
},
sweepFlag: {
get() {
return this._sweepFlag;
},
set(sweepFlag) {
this._sweepFlag = sweepFlag;
this._segmentChanged();
},
enumerable: true
}
});
class SVGPathSegLinetoHorizontalAbs extends SVGPathSeg {
constructor(owningPathSegList, x) {
super(SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS, 'H', owningPathSegList);
this._x = x;
}
toString() {
return '[object SVGPathSegLinetoHorizontalAbs]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._x;
}
clone() {
return new SVGPathSegLinetoHorizontalAbs(undefined, this._x);
}
}
Object.defineProperty(SVGPathSegLinetoHorizontalAbs.prototype, 'x', {
get() {
return this._x;
},
set(x) {
this._x = x;
this._segmentChanged();
},
enumerable: true
});
class SVGPathSegLinetoHorizontalRel extends SVGPathSeg {
constructor(owningPathSegList, x) {
super(SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL, 'h', owningPathSegList);
this._x = x;
}
toString() {
return '[object SVGPathSegLinetoHorizontalRel]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._x;
}
clone() {
return new SVGPathSegLinetoHorizontalRel(undefined, this._x);
}
}
Object.defineProperty(SVGPathSegLinetoHorizontalRel.prototype, 'x', {
get() {
return this._x;
},
set(x) {
this._x = x;
this._segmentChanged();
},
enumerable: true
});
class SVGPathSegLinetoVerticalAbs extends SVGPathSeg {
constructor(owningPathSegList, y) {
super(SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS, 'V', owningPathSegList);
this._y = y;
}
toString() {
return '[object SVGPathSegLinetoVerticalAbs]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._y;
}
clone() {
return new SVGPathSegLinetoVerticalAbs(undefined, this._y);
}
}
Object.defineProperty(SVGPathSegLinetoVerticalAbs.prototype, 'y', {
get() {
return this._y;
},
set(y) {
this._y = y;
this._segmentChanged();
},
enumerable: true
});
class SVGPathSegLinetoVerticalRel extends SVGPathSeg {
constructor(owningPathSegList, y) {
super(SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL, 'v', owningPathSegList);
this._y = y;
}
toString() {
return '[object SVGPathSegLinetoVerticalRel]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._y;
}
clone() {
return new SVGPathSegLinetoVerticalRel(undefined, this._y);
}
}
Object.defineProperty(SVGPathSegLinetoVerticalRel.prototype, 'y', {
get() {
return this._y;
},
set(y) {
this._y = y;
this._segmentChanged();
},
enumerable: true
});
class SVGPathSegCurvetoCubicSmoothAbs extends SVGPathSeg {
constructor(owningPathSegList, x, y, x2, y2) {
super(SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS, 'S', owningPathSegList);
this._x = x;
this._y = y;
this._x2 = x2;
this._y2 = y2;
}
toString() {
return '[object SVGPathSegCurvetoCubicSmoothAbs]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y;
}
clone() {
return new SVGPathSegCurvetoCubicSmoothAbs(undefined, this._x, this._y, this._x2, this._y2);
}
}
Object.defineProperties(SVGPathSegCurvetoCubicSmoothAbs.prototype, {
x: {
get() {
return this._x;
},
set(x) {
this._x = x;
this._segmentChanged();
},
enumerable: true
},
y: {
get() {
return this._y;
},
set(y) {
this._y = y;
this._segmentChanged();
},
enumerable: true
},
x2: {
get() {
return this._x2;
},
set(x2) {
this._x2 = x2;
this._segmentChanged();
},
enumerable: true
},
y2: {
get() {
return this._y2;
},
set(y2) {
this._y2 = y2;
this._segmentChanged();
},
enumerable: true
}
});
class SVGPathSegCurvetoCubicSmoothRel extends SVGPathSeg {
constructor(owningPathSegList, x, y, x2, y2) {
super(SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL, 's', owningPathSegList);
this._x = x;
this._y = y;
this._x2 = x2;
this._y2 = y2;
}
toString() {
return '[object SVGPathSegCurvetoCubicSmoothRel]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y;
}
clone() {
return new SVGPathSegCurvetoCubicSmoothRel(undefined, this._x, this._y, this._x2, this._y2);
}
}
Object.defineProperties(SVGPathSegCurvetoCubicSmoothRel.prototype, {
x: {
get() {
return this._x;
},
set(x) {
this._x = x;
this._segmentChanged();
},
enumerable: true
},
y: {
get() {
return this._y;
},
set(y) {
this._y = y;
this._segmentChanged();
},
enumerable: true
},
x2: {
get() {
return this._x2;
},
set(x2) {
this._x2 = x2;
this._segmentChanged();
},
enumerable: true
},
y2: {
get() {
return this._y2;
},
set(y2) {
this._y2 = y2;
this._segmentChanged();
},
enumerable: true
}
});
class SVGPathSegCurvetoQuadraticSmoothAbs extends SVGPathSeg {
constructor(owningPathSegList, x, y) {
super(SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS, 'T', owningPathSegList);
this._x = x;
this._y = y;
}
toString() {
return '[object SVGPathSegCurvetoQuadraticSmoothAbs]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y;
}
clone() {
return new SVGPathSegCurvetoQuadraticSmoothAbs(undefined, this._x, this._y);
}
}
Object.defineProperties(SVGPathSegCurvetoQuadraticSmoothAbs.prototype, {
x: {
get() {
return this._x;
},
set(x) {
this._x = x;
this._segmentChanged();
},
enumerable: true
},
y: {
get() {
return this._y;
},
set(y) {
this._y = y;
this._segmentChanged();
},
enumerable: true
}
});
class SVGPathSegCurvetoQuadraticSmoothRel extends SVGPathSeg {
constructor(owningPathSegList, x, y) {
super(SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL, 't', owningPathSegList);
this._x = x;
this._y = y;
}
toString() {
return '[object SVGPathSegCurvetoQuadraticSmoothRel]';
}
_asPathString() {
return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y;
}
clone() {
return new SVGPathSegCurvetoQuadraticSmoothRel(undefined, this._x, this._y);
}
}
Object.defineProperties(SVGPathSegCurvetoQuadraticSmoothRel.prototype, {
x: {
get() {
return this._x;
},
set(x) {
this._x = x;
this._segmentChanged();
},
enumerable: true
},
y: {
get() {
return this._y;
},
set(y) {
this._y = y;
this._segmentChanged();
},
enumerable: true
}
}); // Add createSVGPathSeg* functions to SVGPathElement.
// Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathElement.
SVGPathElement.prototype.createSVGPathSegClosePath = function () {
return new SVGPathSegClosePath(undefined);
};
SVGPathElement.prototype.createSVGPathSegMovetoAbs = function (x, y) {
return new SVGPathSegMovetoAbs(undefined, x, y);
};
SVGPathElement.prototype.createSVGPathSegMovetoRel = function (x, y) {
return new SVGPathSegMovetoRel(undefined, x, y);
};
SVGPathElement.prototype.createSVGPathSegLinetoAbs = function (x, y) {
return new SVGPathSegLinetoAbs(undefined, x, y);
};
SVGPathElement.prototype.createSVGPathSegLinetoRel = function (x, y) {
return new SVGPathSegLinetoRel(undefined, x, y);
};
SVGPathElement.prototype.createSVGPathSegCurvetoCubicAbs = function (x, y, x1, y1, x2, y2) {
return new SVGPathSegCurvetoCubicAbs(undefined, x, y, x1, y1, x2, y2);
};
SVGPathElement.prototype.createSVGPathSegCurvetoCubicRel = function (x, y, x1, y1, x2, y2) {
return new SVGPathSegCurvetoCubicRel(undefined, x, y, x1, y1, x2, y2);
};
SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticAbs = function (x, y, x1, y1) {
return new SVGPathSegCurvetoQuadraticAbs(undefined, x, y, x1, y1);
};
SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticRel = function (x, y, x1, y1) {
return new SVGPathSegCurvetoQuadraticRel(undefined, x, y, x1, y1);
};
SVGPathElement.prototype.createSVGPathSegArcAbs = function (x, y, r1, r2, angle, largeArcFlag, sweepFlag) {
return new SVGPathSegArcAbs(undefined, x, y, r1, r2, angle, largeArcFlag, sweepFlag);
};
SVGPathElement.prototype.createSVGPathSegArcRel = function (x, y, r1, r2, angle, largeArcFlag, sweepFlag) {
return new SVGPathSegArcRel(undefined, x, y, r1, r2, angle, largeArcFlag, sweepFlag);
};
SVGPathElement.prototype.createSVGPathSegLinetoHorizontalAbs = function (x) {
return new SVGPathSegLinetoHorizontalAbs(undefined, x);
};
SVGPathElement.prototype.createSVGPathSegLinetoHorizontalRel = function (x) {
return new SVGPathSegLinetoHorizontalRel(undefined, x);
};
SVGPathElement.prototype.createSVGPathSegLinetoVerticalAbs = function (y) {
return new SVGPathSegLinetoVerticalAbs(undefined, y);
};
SVGPathElement.prototype.createSVGPathSegLinetoVerticalRel = function (y) {
return new SVGPathSegLinetoVerticalRel(undefined, y);
};
SVGPathElement.prototype.createSVGPathSegCurvetoCubicSmoothAbs = function (x, y, x2, y2) {
return new SVGPathSegCurvetoCubicSmoothAbs(undefined, x, y, x2, y2);
};
SVGPathElement.prototype.createSVGPathSegCurvetoCubicSmoothRel = function (x, y, x2, y2) {
return new SVGPathSegCurvetoCubicSmoothRel(undefined, x, y, x2, y2);
};
SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticSmoothAbs = function (x, y) {
return new SVGPathSegCurvetoQuadraticSmoothAbs(undefined, x, y);
};
SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticSmoothRel = function (x, y) {
return new SVGPathSegCurvetoQuadraticSmoothRel(undefined, x, y);
};
if (!('getPathSegAtLength' in SVGPathElement.prototype)) {
// Add getPathSegAtLength to SVGPathElement.
// Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-__svg__SVGPathElement__getPathSegAtLength
// This polyfill requires SVGPathElement.getTotalLength to implement the distance-along-a-path algorithm.
SVGPathElement.prototype.getPathSegAtLength = function (distance) {
if (distance === undefined || !isFinite(distance)) {
throw new Error('Invalid arguments.');
}
const measurementElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
measurementElement.setAttribute('d', this.getAttribute('d'));
let lastPathSegment = measurementElement.pathSegList.numberOfItems - 1; // If the path is empty, return 0.
if (lastPathSegment <= 0) {
return 0;
}
do {
measurementElement.pathSegList.removeItem(lastPathSegment);
if (distance > measurementElement.getTotalLength()) {
break;
}
lastPathSegment--;
} while (lastPathSegment > 0);
return lastPathSegment;
};
}
window.SVGPathSeg = SVGPathSeg;
window.SVGPathSegClosePath = SVGPathSegClosePath;
window.SVGPathSegMovetoAbs = SVGPathSegMovetoAbs;
window.SVGPathSegMovetoRel = SVGPathSegMovetoRel;
window.SVGPathSegLinetoAbs = SVGPathSegLinetoAbs;
window.SVGPathSegLinetoRel = SVGPathSegLinetoRel;
window.SVGPathSegCurvetoCubicAbs = SVGPathSegCurvetoCubicAbs;
window.SVGPathSegCurvetoCubicRel = SVGPathSegCurvetoCubicRel;
window.SVGPathSegCurvetoQuadraticAbs = SVGPathSegCurvetoQuadraticAbs;
window.SVGPathSegCurvetoQuadraticRel = SVGPathSegCurvetoQuadraticRel;
window.SVGPathSegArcAbs = SVGPathSegArcAbs;
window.SVGPathSegArcRel = SVGPathSegArcRel;
window.SVGPathSegLinetoHorizontalAbs = SVGPathSegLinetoHorizontalAbs;
window.SVGPathSegLinetoHorizontalRel = SVGPathSegLinetoHorizontalRel;
window.SVGPathSegLinetoVerticalAbs = SVGPathSegLinetoVerticalAbs;
window.SVGPathSegLinetoVerticalRel = SVGPathSegLinetoVerticalRel;
window.SVGPathSegCurvetoCubicSmoothAbs = SVGPathSegCurvetoCubicSmoothAbs;
window.SVGPathSegCurvetoCubicSmoothRel = SVGPathSegCurvetoCubicSmoothRel;
window.SVGPathSegCurvetoQuadraticSmoothAbs = SVGPathSegCurvetoQuadraticSmoothAbs;
window.SVGPathSegCurvetoQuadraticSmoothRel = SVGPathSegCurvetoQuadraticSmoothRel;
} // Checking for SVGPathSegList in window checks for the case of an implementation without the
// SVGPathSegList API.
// The second check for appendItem is specific to Firefox 59+ which removed only parts of the
// SVGPathSegList API (e.g., appendItem). In this case we need to re-implement the entire API
// so the polyfill data (i.e., _list) is used throughout.
if (!('SVGPathSegList' in window) || !('appendItem' in window.SVGPathSegList.prototype)) {
// Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList
class SVGPathSegList {
constructor(pathElement) {
this._pathElement = pathElement;
this._list = this._parsePath(this._pathElement.getAttribute('d')); // Use a MutationObserver to catch changes to the path's "d" attribute.
this._mutationObserverConfig = {
attributes: true,
attributeFilter: ['d']
};
this._pathElementMutationObserver = new MutationObserver(this._updateListFromPathMutations.bind(this));
this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig);
} // Process any pending mutations to the path element and update the list as needed.
// This should be the first call of all public functions and is needed because
// MutationObservers are not synchronous so we can have pending asynchronous mutations.
_checkPathSynchronizedToList() {
this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords());
}
_updateListFromPathMutations(mutationRecords) {
if (!this._pathElement) {
return;
}
let hasPathMutations = false;
mutationRecords.forEach(record => {
if (record.attributeName === 'd') {
hasPathMutations = true;
}
});
if (hasPathMutations) {
this._list = this._parsePath(this._pathElement.getAttribute('d'));
}
} // Serialize the list and update the path's 'd' attribute.
_writeListToPath() {
this._pathElementMutationObserver.disconnect();
this._pathElement.setAttribute('d', SVGPathSegList._pathSegArrayAsString(this._list));
this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig);
} // When a path segment changes the list needs to be synchronized back to the path element.
segmentChanged(pathSeg) {
this._writeListToPath();
}
clear() {
this._checkPathSynchronizedToList();
this._list.forEach(pathSeg => {
pathSeg._owningPathSegList = null;
});
this._list = [];
this._writeListToPath();
}
initialize(newItem) {
this._checkPathSynchronizedToList();
this._list = [newItem];
newItem._owningPathSegList = this;
this._writeListToPath();
return newItem;
}
_checkValidIndex(index) {
if (isNaN(index) || index < 0 || index >= this.numberOfItems) {
throw new Error('INDEX_SIZE_ERR');
}
}
getItem(index) {
this._checkPathSynchronizedToList();
this._checkValidIndex(index);
return this._list[index];
}
insertItemBefore(newItem, index) {
this._checkPathSynchronizedToList(); // Spec: If the index is greater than or equal to numberOfItems, then the new item is appended to the end of the list.
if (index > this.numberOfItems) {
index = this.numberOfItems;
}
if (newItem._owningPathSegList) {
// SVG2 spec says to make a copy.
newItem = newItem.clone();
}
this._list.splice(index, 0, newItem);
newItem._owningPathSegList = this;
this._writeListToPath();
return newItem;
}
replaceItem(newItem, index) {
this._checkPathSynchronizedToList();
if (newItem._owningPathSegList) {
// SVG2 spec says to make a copy.
newItem = newItem.clone();
}
this._checkValidIndex(index);
this._list[index] = newItem;
newItem._owningPathSegList = this;
this._writeListToPath();
return newItem;
}
removeItem(index) {
this._checkPathSynchronizedToList();
this._checkValidIndex(index);
const item = this._list[index];
this._list.splice(index, 1);
this._writeListToPath();
return item;
}
appendItem(newItem) {
this._checkPathSynchronizedToList();
if (newItem._owningPathSegList) {
// SVG2 spec says to make a copy.
newItem = newItem.clone();
}
this._list.push(newItem);
newItem._owningPathSegList = this; // TODO: Optimize this to just append to the existing attribute.
this._writeListToPath();
return newItem;
} // This closely follows SVGPathParser::parsePath from Source/core/svg/SVGPathParser.cpp.
_parsePath(string) {
if (!string || !string.length) {
return [];
}
const owningPathSegList = this; // eslint-disable-line consistent-this
class Builder {
constructor() {
this.pathSegList = [];
}
appendSegment(pathSeg) {
this.pathSegList.push(pathSeg);
}
}
class Source {
constructor(string) {
this._string = string;
this._currentIndex = 0;
this._endIndex = this._string.length;
this._previousCommand = SVGPathSeg.PATHSEG_UNKNOWN;
this._skipOptionalSpaces();
}
_isCurrentSpace() {
const character = this._string[this._currentIndex];
return character <= ' ' && (character === ' ' || character === '\n' || character === '\t' || character === '\r' || character === '\f');
}
_skipOptionalSpaces() {
while (this._currentIndex < this._endIndex && this._isCurrentSpace()) {
this._currentIndex++;
}
return this._currentIndex < this._endIndex;
}
_skipOptionalSpacesOrDelimiter() {
if (this._currentIndex < this._endIndex && !this._isCurrentSpace() && this._string.charAt(this._currentIndex) !== ',') {
return false;
}
if (this._skipOptionalSpaces()) {
if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) === ',') {
this._currentIndex++;
this._skipOptionalSpaces();
}
}
return this._currentIndex < this._endIndex;
}
hasMoreData() {
return this._currentIndex < this._endIndex;
}
peekSegmentType() {
const lookahead = this._string[this._currentIndex];
return this._pathSegTypeFromChar(lookahead);
}
_pathSegTypeFromChar(lookahead) {
switch (lookahead) {
case 'Z':
case 'z':
return SVGPathSeg.PATHSEG_CLOSEPATH;
case 'M':
return SVGPathSeg.PATHSEG_MOVETO_ABS;
case 'm':
return SVGPathSeg.PATHSEG_MOVETO_REL;
case 'L':
return SVGPathSeg.PATHSEG_LINETO_ABS;
case 'l':
return SVGPathSeg.PATHSEG_LINETO_REL;
case 'C':
return SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS;
case 'c':
return SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL;
case 'Q':
return SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS;
case 'q':
return SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL;
case 'A':
return SVGPathSeg.PATHSEG_ARC_ABS;
case 'a':
return SVGPathSeg.PATHSEG_ARC_REL;
case 'H':
return SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS;
case 'h':
return SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL;
case 'V':
return SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS;
case 'v':
return SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL;
case 'S':
return SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS;
case 's':
return SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL;
case 'T':
return SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS;
case 't':
return SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL;
default:
return SVGPathSeg.PATHSEG_UNKNOWN;
}
}
_nextCommandHelper(lookahead, previousCommand) {
// Check for remaining coordinates in the current command.
if ((lookahead === '+' || lookahead === '-' || lookahead === '.' || lookahead >= '0' && lookahead <= '9') && previousCommand !== SVGPathSeg.PATHSEG_CLOSEPATH) {
if (previousCommand === SVGPathSeg.PATHSEG_MOVETO_ABS) {
return SVGPathSeg.PATHSEG_LINETO_ABS;
}
if (previousCommand === SVGPathSeg.PATHSEG_MOVETO_REL) {
return SVGPathSeg.PATHSEG_LINETO_REL;
}
return previousCommand;
}
return SVGPathSeg.PATHSEG_UNKNOWN;
}
initialCommandIsMoveTo() {
// If the path is empty it is still valid, so return true.
if (!this.hasMoreData()) {
return true;
}
const command = this.peekSegmentType(); // Path must start with moveTo.
return command === SVGPathSeg.PATHSEG_MOVETO_ABS || command === SVGPathSeg.PATHSEG_MOVETO_REL;
} // Parse a number from an SVG path. This very closely follows genericParseNumber(...) from Source/core/svg/SVGParserUtilities.cpp.
// Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-PathDataBNF
_parseNumber() {
let exponent = 0;
let integer = 0;
let frac = 1;
let decimal = 0;
let sign = 1;
let expsign = 1;
const startIndex = this._currentIndex;
this._skipOptionalSpaces(); // Read the sign.
if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) === '+') {
this._currentIndex++;
} else if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) === '-') {
this._currentIndex++;
sign = -1;
}
if (this._currentIndex === this._endIndex || (this._string.charAt(this._currentIndex) < '0' || this._string.charAt(this._currentIndex) > '9') && this._string.charAt(this._currentIndex) !== '.') {
// The first character of a number must be one of [0-9+-.].
return undefined;
} // Read the integer part, build right-to-left.
const startIntPartIndex = this._currentIndex;
while (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) >= '0' && this._string.charAt(this._currentIndex) <= '9') {
this._currentIndex++; // Advance to first non-digit.
}
if (this._currentIndex !== startIntPartIndex) {
let scanIntPartIndex = this._currentIndex - 1;
let multiplier = 1;
while (scanIntPartIndex >= startIntPartIndex) {
integer += multiplier * (this._string.charAt(scanIntPartIndex--) - '0');
multiplier *= 10;
}
} // Read the decimals.
if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) === '.') {
this._currentIndex++; // There must be a least one digit following the .
if (this._currentIndex >= this._endIndex || this._string.charAt(this._currentIndex) < '0' || this._string.charAt(this._currentIndex) > '9') {
return undefined;
}
while (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) >= '0' && this._string.charAt(this._currentIndex) <= '9') {
frac *= 10;
decimal += (this._string.charAt(this._currentIndex) - '0') / frac;
this._currentIndex += 1;
}
} // Read the exponent part.
if (this._currentIndex !== startIndex && this._currentIndex + 1 < this._endIndex && (this._string.charAt(this._currentIndex) === 'e' || this._string.charAt(this._currentIndex) === 'E') && this._string.charAt(this._currentIndex + 1) !== 'x' && this._string.charAt(this._currentIndex + 1) !== 'm') {
this._currentIndex++; // Read the sign of the exponent.
if (this._string.charAt(this._currentIndex) === '+') {
this._currentIndex++;
} else if (this._string.charAt(this._currentIndex) === '-') {
this._currentIndex++;
expsign = -1;
} // There must be an exponent.
if (this._currentIndex >= this._endIndex || this._string.charAt(this._currentIndex) < '0' || this._string.charAt(this._currentIndex) > '9') {
return undefined;
}
while (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) >= '0' && this._string.charAt(this._currentIndex) <= '9') {
exponent *= 10;
exponent += this._string.charAt(this._currentIndex) - '0';
this._currentIndex++;
}
}
let number = integer + decimal;
number *= sign;
if (exponent) {
number *= 10 ** (expsign * exponent);
}
if (startIndex === this._currentIndex) {
return undefined;
}
this._skipOptionalSpacesOrDelimiter();
return number;
}
_parseArcFlag() {
if (this._currentIndex >= this._endIndex) {
return undefined;
}
let flag = false;
const flagChar = this._string.charAt(this._currentIndex++);
if (flagChar === '0') {
flag = false;
} else if (flagChar === '1') {
flag = true;
} else {
return undefined;
}
this._skipOptionalSpacesOrDelimiter();
return flag;
}
parseSegment() {
const lookahead = this._string[this._currentIndex];
let command = this._pathSegTypeFromChar(lookahead);
if (command === SVGPathSeg.PATHSEG_UNKNOWN) {
// Possibly an implicit command. Not allowed if this is the first command.
if (this._previousCommand === SVGPathSeg.PATHSEG_UNKNOWN) {
return null;
}
command = this._nextCommandHelper(lookahead, this._previousCommand);
if (command === SVGPathSeg.PATHSEG_UNKNOWN) {
return null;
}
} else {
this._currentIndex++;
}
this._previousCommand = command;
switch (command) {
case SVGPathSeg.PATHSEG_MOVETO_REL:
return new SVGPathSegMovetoRel(owningPathSegList, this._parseNumber(), this._parseNumber());
case SVGPathSeg.PATHSEG_MOVETO_ABS:
return new SVGPathSegMovetoAbs(owningPathSegList, this._parseNumber(), this._parseNumber());
case SVGPathSeg.PATHSEG_LINETO_REL:
return new SVGPathSegLinetoRel(owningPathSegList, this._parseNumber(), this._parseNumber());
case SVGPathSeg.PATHSEG_LINETO_ABS:
return new SVGPathSegLinetoAbs(owningPathSegList, this._parseNumber(), this._parseNumber());
case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL:
return new SVGPathSegLinetoHorizontalRel(owningPathSegList, this._parseNumber());
case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS:
return new SVGPathSegLinetoHorizontalAbs(owningPathSegList, this._parseNumber());
case SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL:
return new SVGPathSegLinetoVerticalRel(owningPathSegList, this._parseNumber());
case SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS:
return new SVGPathSegLinetoVerticalAbs(owningPathSegList, this._parseNumber());
case SVGPathSeg.PATHSEG_CLOSEPATH:
this._skipOptionalSpaces();
return new SVGPathSegClosePath(owningPathSegList);
case SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL:
{
const points = {
x1: this._parseNumber(),
y1: this._parseNumber(),
x2: this._parseNumber(),
y2: this._parseNumber(),
x: this._parseNumber(),
y: this._parseNumber()
};
return new SVGPathSegCurvetoCubicRel(owningPathSegList, points.x, points.y, points.x1, points.y1, points.x2, points.y2);
}
case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS:
{
const points = {
x1: this._parseNumber(),
y1: this._parseNumber(),
x2: this._parseNumber(),
y2: this._parseNumber(),
x: this._parseNumber(),
y: this._parseNumber()
};
return new SVGPathSegCurvetoCubicAbs(owningPathSegList, points.x, points.y, points.x1, points.y1, points.x2, points.y2);
}
case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:
{
const points = {
x2: this._parseNumber(),
y2: this._parseNumber(),
x: this._parseNumber(),
y: this._parseNumber()
};
return new SVGPathSegCurvetoCubicSmoothRel(owningPathSegList, points.x, points.y, points.x2, points.y2);
}
case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:
{
const points = {
x2: this._parseNumber(),
y2: this._parseNumber(),
x: this._parseNumber(),
y: this._parseNumber()
};
return new SVGPathSegCurvetoCubicSmoothAbs(owningPathSegList, points.x, points.y, points.x2, points.y2);
}
case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:
{
const points = {
x1: this._parseNumber(),
y1: this._parseNumber(),
x: this._parseNumber(),
y: this._parseNumber()
};
return new SVGPathSegCurvetoQuadraticRel(owningPathSegList, points.x, points.y, points.x1, points.y1);
}
case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:
{
const points = {
x1: this._parseNumber(),
y1: this._parseNumber(),
x: this._parseNumber(),
y: this._parseNumber()
};
return new SVGPathSegCurvetoQuadraticAbs(owningPathSegList, points.x, points.y, points.x1, points.y1);
}
case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL:
return new SVGPathSegCurvetoQuadraticSmoothRel(owningPathSegList, this._parseNumber(), this._parseNumber());
case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS:
return new SVGPathSegCurvetoQuadraticSmoothAbs(owningPathSegList, this._parseNumber(), this._parseNumber());
case SVGPathSeg.PATHSEG_ARC_REL:
{
const points = {
x1: this._parseNumber(),
y1: this._parseNumber(),
arcAngle: this._parseNumber(),
arcLarge: this._parseArcFlag(),
arcSweep: this._parseArcFlag(),
x: this._parseNumber(),
y: this._parseNumber()
};
return new SVGPathSegArcRel(owningPathSegList, points.x, points.y, points.x1, points.y1, points.arcAngle, points.arcLarge, points.arcSweep);
}
case SVGPathSeg.PATHSEG_ARC_ABS:
{
const points = {
x1: this._parseNumber(),
y1: this._parseNumber(),
arcAngle: this._parseNumber(),
arcLarge: this._parseArcFlag(),
arcSweep: this._parseArcFlag(),
x: this._parseNumber(),
y: this._parseNumber()
};
return new SVGPathSegArcAbs(owningPathSegList, points.x, points.y, points.x1, points.y1, points.arcAngle, points.arcLarge, points.arcSweep);
}
default:
throw new Error('Unknown path seg type.');
}
}
}
const builder = new Builder();
const source = new Source(string);
if (!source.initialCommandIsMoveTo()) {
return [];
}
while (source.hasMoreData()) {
const pathSeg = source.parseSegment();
if (!pathSeg) {
return [];
}
builder.appendSegment(pathSeg);
}
return builder.pathSegList;
} // STATIC
static _pathSegArrayAsString(pathSegArray) {
let string = '';
let first = true;
pathSegArray.forEach(pathSeg => {
if (first) {
first = false;
string += pathSeg._asPathString();
} else {
string += ' ' + pathSeg._asPathString();
}
});
return string;
}
}
SVGPathSegList.prototype.classname = 'SVGPathSegList';
Object.defineProperty(SVGPathSegList.prototype, 'numberOfItems', {
get() {
this._checkPathSynchronizedToList();
return this._list.length;
},
enumerable: true
}); // Add the pathSegList accessors to SVGPathElement.
// Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGAnimatedPathData
Object.defineProperties(SVGPathElement.prototype, {
pathSegList: {
get() {
if (!this._pathSegList) {
this._pathSegList = new SVGPathSegList(this);
}
return this._pathSegList;
},
enumerable: true
},
// TODO: The following are not implemented and simply return SVGPathElement.pathSegList.
normalizedPathSegList: {
get() {
return this.pathSegList;
},
enumerable: true
},
animatedPathSegList: {
get() {
return this.pathSegList;
},
enumerable: true
},
animatedNormalizedPathSegList: {
get() {
return this.pathSegList;
},
enumerable: true
}
});
window.SVGPathSegList = SVGPathSegList;
}
})();
/* globals jQuery */
const $ = jQuery;
const supportsSVG_ = function () {
return Boolean(document.createElementNS && document.createElementNS(NS.SVG, 'svg').createSVGRect);
}();
const {
userAgent
} = navigator;
const svg = document.createElementNS(NS.SVG, 'svg'); // Note: Browser sniffing should only be used if no other detection method is possible
const isOpera_ = Boolean(window.opera);
const isWebkit_ = userAgent.includes('AppleWebKit');
const isGecko_ = userAgent.includes('Gecko/');
const isIE_ = userAgent.includes('MSIE');
const isChrome_ = userAgent.includes('Chrome/');
const isWindows_ = userAgent.includes('Windows');
const isMac_ = userAgent.includes('Macintosh');
const isTouch_ = ('ontouchstart' in window);
const supportsSelectors_ = function () {
return Boolean(svg.querySelector);
}();
const supportsXpath_ = function () {
return Boolean(document.evaluate);
}(); // segList functions (for FF1.5 and 2.0)
const supportsPathReplaceItem_ = function () {
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 10,10');
const seglist = path.pathSegList;
const seg = path.createSVGPathSegLinetoAbs(5, 5);
try {
seglist.replaceItem(seg, 1);
return true;
} catch (err) {}
return false;
}();
const supportsPathInsertItemBefore_ = function () {
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 10,10');
const seglist = path.pathSegList;
const seg = path.createSVGPathSegLinetoAbs(5, 5);
try {
seglist.insertItemBefore(seg, 1);
return true;
} catch (err) {}
return false;
}(); // text character positioning (for IE9 and now Chrome)
const supportsGoodTextCharPos_ = function () {
const svgroot = document.createElementNS(NS.SVG, 'svg');
const svgcontent = document.createElementNS(NS.SVG, 'svg');
document.documentElement.append(svgroot);
svgcontent.setAttribute('x', 5);
svgroot.append(svgcontent);
const text = document.createElementNS(NS.SVG, '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();
}
}();
const supportsPathBBox_ = function () {
const svgcontent = document.createElementNS(NS.SVG, 'svg');
document.documentElement.append(svgcontent);
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 C0,0 10,10 10,0');
svgcontent.append(path);
const bbox = path.getBBox();
svgcontent.remove();
return bbox.height > 4 && bbox.height < 5;
}(); // Support for correct bbox sizing on groups with horizontal/vertical lines
const supportsHVLineContainerBBox_ = function () {
const svgcontent = document.createElementNS(NS.SVG, 'svg');
document.documentElement.append(svgcontent);
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 10,0');
const path2 = document.createElementNS(NS.SVG, 'path');
path2.setAttribute('d', 'M5,0 15,0');
const g = document.createElementNS(NS.SVG, 'g');
g.append(path, path2);
svgcontent.append(g);
const bbox = g.getBBox();
svgcontent.remove(); // Webkit gives 0, FF gives 10, Opera (correctly) gives 15
return bbox.width === 15;
}();
const supportsGoodDecimals_ = function () {
// Correct decimals on clone attributes (Opera < 10.5/win/non-en)
const rect = document.createElementNS(NS.SVG, 'rect');
rect.setAttribute('x', 0.1);
const crect = rect.cloneNode(false);
const retValue = !crect.getAttribute('x').includes(',');
if (!retValue) {
// Todo: i18nize or remove
$.alert('NOTE: This version of Opera is known to contain bugs in SVG-edit.\n' + 'Please upgrade to the latest version in which the problems have been fixed.');
}
return retValue;
}();
const supportsNonScalingStroke_ = function () {
const rect = document.createElementNS(NS.SVG, 'rect');
rect.setAttribute('style', 'vector-effect:non-scaling-stroke');
return rect.style.vectorEffect === 'non-scaling-stroke';
}();
let supportsNativeSVGTransformLists_ = function () {
const rect = document.createElementNS(NS.SVG, 'rect');
const rxform = rect.transform.baseVal;
const t1 = svg.createSVGTransform();
rxform.appendItem(t1);
const r1 = rxform.getItem(0);
const isSVGTransform = o => {
// https://developer.mozilla.org/en-US/docs/Web/API/SVGTransform
return o && typeof o === 'object' && typeof o.setMatrix === 'function' && 'angle' in o;
};
return isSVGTransform(r1) && isSVGTransform(t1) && r1.type === t1.type && r1.angle === t1.angle && r1.matrix.a === t1.matrix.a && r1.matrix.b === t1.matrix.b && r1.matrix.c === t1.matrix.c && r1.matrix.d === t1.matrix.d && r1.matrix.e === t1.matrix.e && r1.matrix.f === t1.matrix.f;
}(); // Public API
/**
* @function module:browser.isOpera
* @returns {boolean}
*/
const isOpera = () => isOpera_;
/**
* @function module:browser.isWebkit
* @returns {boolean}
*/
const isWebkit = () => isWebkit_;
/**
* @function module:browser.isGecko
* @returns {boolean}
*/
const isGecko = () => isGecko_;
/**
* @function module:browser.isIE
* @returns {boolean}
*/
const isIE = () => isIE_;
/**
* @function module:browser.isChrome
* @returns {boolean}
*/
const isChrome = () => isChrome_;
/**
* @function module:browser.isMac
* @returns {boolean}
*/
const isMac = () => isMac_;
/**
* @function module:browser.isTouch
* @returns {boolean}
*/
const isTouch = () => isTouch_;
/**
* @function module:browser.supportsSelectors
* @returns {boolean}
*/
const supportsSelectors = () => supportsSelectors_;
/**
* @function module:browser.supportsXpath
* @returns {boolean}
*/
const supportsXpath = () => supportsXpath_;
/**
* @function module:browser.supportsPathReplaceItem
* @returns {boolean}
*/
const supportsPathReplaceItem = () => supportsPathReplaceItem_;
/**
* @function module:browser.supportsPathInsertItemBefore
* @returns {boolean}
*/
const supportsPathInsertItemBefore = () => supportsPathInsertItemBefore_;
/**
* @function module:browser.supportsPathBBox
* @returns {boolean}
*/
const supportsPathBBox = () => supportsPathBBox_;
/**
* @function module:browser.supportsHVLineContainerBBox
* @returns {boolean}
*/
const supportsHVLineContainerBBox = () => supportsHVLineContainerBBox_;
/**
* @function module:browser.supportsGoodTextCharPos
* @returns {boolean}
*/
const supportsGoodTextCharPos = () => supportsGoodTextCharPos_;
/**
* @function module:browser.supportsNonScalingStroke
* @returns {boolean}
*/
const supportsNonScalingStroke = () => supportsNonScalingStroke_;
/**
* @function module:browser.supportsNativeTransformLists
* @returns {boolean}
*/
const supportsNativeTransformLists = () => supportsNativeSVGTransformLists_;
/**
* A jQuery module to work with SVG attributes.
* @module jQueryAttr
* @license MIT
*/
/**
* This fixes `$(...).attr()` to work as expected with SVG elements.
* Does not currently use `*AttributeNS()` since we rarely need that.
* Adds {@link external:jQuery.fn.attr}.
* See {@link https://api.jquery.com/attr/} for basic documentation of `.attr()`.
*
* Additional functionality:
* - When getting attributes, a string that's a number is returned as type number.
* - If an array is supplied as the first parameter, multiple values are returned
* as an object with values for each given attribute.
* @function module:jQueryAttr.jQueryAttr
* @param {external:jQuery} $ The jQuery object to which to add the plug-in
* @returns {external:jQuery}
*/
function jQueryPluginSVG($) {
const proxied = $.fn.attr,
svgns = 'http://www.w3.org/2000/svg';
/**
* @typedef {PlainObject} module:jQueryAttr.Attributes
*/
/**
* @function external:jQuery.fn.attr
* @param {string|string[]|PlainObject} key
* @param {string} value
* @returns {external:jQuery|module:jQueryAttr.Attributes}
*/
$.fn.attr = function (key, value) {
const len = this.length;
if (!len) {
return proxied.call(this, key, value);
}
for (let i = 0; i < len; ++i) {
const elem = this[i]; // set/get SVG attribute
if (elem.namespaceURI === svgns) {
// Setting attribute
if (value !== undefined) {
elem.setAttribute(key, value);
} else if (Array.isArray(key)) {
// Getting attributes from array
const obj = {};
let j = key.length;
while (j--) {
const aname = key[j];
let attr = elem.getAttribute(aname); // This returns a number when appropriate
if (attr || attr === '0') {
attr = isNaN(attr) ? attr : attr - 0;
}
obj[aname] = attr;
}
return obj;
}
if (typeof key === 'object') {
// Setting attributes from object
for (const [name, val] of Object.entries(key)) {
elem.setAttribute(name, val);
} // Getting attribute
} else {
let attr = elem.getAttribute(key);
if (attr || attr === '0') {
attr = isNaN(attr) ? attr : attr - 0;
}
return attr;
}
} else {
return proxied.call(this, key, value);
}
}
return this;
};
return $;
}
/**
* Partial polyfill of `SVGTransformList`
* @module SVGTransformList
*
* @license MIT
*
* @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
*/
const svgroot = document.createElementNS(NS.SVG, 'svg');
/**
* Helper function to convert `SVGTransform` to a string.
* @param {SVGTransform} xform
* @returns {string}
*/
function transformToString(xform) {
const m = xform.matrix;
let text = '';
switch (xform.type) {
case 1:
// MATRIX
text = 'matrix(' + [m.a, m.b, m.c, m.d, m.e, m.f].join(',') + ')';
break;
case 2:
// TRANSLATE
text = 'translate(' + m.e + ',' + m.f + ')';
break;
case 3:
// SCALE
if (m.a === m.d) {
text = 'scale(' + m.a + ')';
} else {
text = 'scale(' + m.a + ',' + m.d + ')';
}
break;
case 4:
{
// ROTATE
let cx = 0;
let cy = 0; // this prevents divide by zero
if (xform.angle !== 0) {
const K = 1 - m.a;
cy = (K * m.f + m.b * m.e) / (K * K + m.b * m.b);
cx = (m.e - m.b * cy) / K;
}
text = 'rotate(' + xform.angle + ' ' + cx + ',' + cy + ')';
break;
}
}
return text;
}
/**
* Map of SVGTransformList objects.
*/
let listMap_ = {};
/**
* @interface module:SVGTransformList.SVGEditTransformList
* @property {Integer} numberOfItems unsigned long
*/
/**
* @function module:SVGTransformList.SVGEditTransformList#clear
* @returns {void}
*/
/**
* @function module:SVGTransformList.SVGEditTransformList#initialize
* @param {SVGTransform} newItem
* @returns {SVGTransform}
*/
/**
* DOES NOT THROW DOMException, INDEX_SIZE_ERR.
* @function module:SVGTransformList.SVGEditTransformList#getItem
* @param {Integer} index unsigned long
* @returns {SVGTransform}
*/
/**
* DOES NOT THROW DOMException, INDEX_SIZE_ERR.
* @function module:SVGTransformList.SVGEditTransformList#insertItemBefore
* @param {SVGTransform} newItem
* @param {Integer} index unsigned long
* @returns {SVGTransform}
*/
/**
* DOES NOT THROW DOMException, INDEX_SIZE_ERR.
* @function module:SVGTransformList.SVGEditTransformList#replaceItem
* @param {SVGTransform} newItem
* @param {Integer} index unsigned long
* @returns {SVGTransform}
*/
/**
* DOES NOT THROW DOMException, INDEX_SIZE_ERR.
* @function module:SVGTransformList.SVGEditTransformList#removeItem
* @param {Integer} index unsigned long
* @returns {SVGTransform}
*/
/**
* @function module:SVGTransformList.SVGEditTransformList#appendItem
* @param {SVGTransform} newItem
* @returns {SVGTransform}
*/
/**
* NOT IMPLEMENTED.
* @ignore
* @function module:SVGTransformList.SVGEditTransformList#createSVGTransformFromMatrix
* @param {SVGMatrix} matrix
* @returns {SVGTransform}
*/
/**
* NOT IMPLEMENTED.
* @ignore
* @function module:SVGTransformList.SVGEditTransformList#consolidate
* @returns {SVGTransform}
*/
/**
* SVGTransformList implementation for Webkit.
* These methods do not currently raise any exceptions.
* These methods also do not check that transforms are being inserted. This is basically
* implementing as much of SVGTransformList that we need to get the job done.
* @implements {module:SVGTransformList.SVGEditTransformList}
*/
class SVGTransformList {
// eslint-disable-line no-shadow
/**
* @param {Element} elem
* @returns {SVGTransformList}
*/
constructor(elem) {
this._elem = elem || null;
this._xforms = []; // TODO: how do we capture the undo-ability in the changed transform list?
this._update = function () {
let tstr = ''; // /* const concatMatrix = */ svgroot.createSVGMatrix();
for (let i = 0; i < this.numberOfItems; ++i) {
const xform = this._list.getItem(i);
tstr += transformToString(xform) + ' ';
}
this._elem.setAttribute('transform', tstr);
};
this._list = this;
this._init = function () {
// Transform attribute parser
let str = this._elem.getAttribute('transform');
if (!str) {
return;
} // TODO: Add skew support in future
const re = /\s*((scale|matrix|rotate|translate)\s*\(.*?\))\s*,?\s*/; // const re = /\s*(?(?:scale|matrix|rotate|translate)\s*\(.*?\))\s*,?\s*/;
let m = true;
while (m) {
m = str.match(re);
str = str.replace(re, '');
if (m && m[1]) {
const x = m[1];
const bits = x.split(/\s*\(/);
const name = bits[0];
const valBits = bits[1].match(/\s*(.*?)\s*\)/);
valBits[1] = valBits[1].replace(/(\d)-/g, '$1 -');
const valArr = valBits[1].split(/[, ]+/);
const letters = 'abcdef'.split('');
/*
if (m && m.groups.xform) {
const x = m.groups.xform;
const [name, bits] = x.split(/\s*\(/);
const valBits = bits.match(/\s*(?.*?)\s*\)/);
valBits.groups.nonWhitespace = valBits.groups.nonWhitespace.replace(
/(?\d)-/g, '$ -'
);
const valArr = valBits.groups.nonWhitespace.split(/[, ]+/);
const letters = [...'abcdef'];
*/
const mtx = svgroot.createSVGMatrix();
Object.values(valArr).forEach(function (item, i) {
valArr[i] = Number.parseFloat(item);
if (name === 'matrix') {
mtx[letters[i]] = valArr[i];
}
});
const xform = svgroot.createSVGTransform();
const fname = 'set' + name.charAt(0).toUpperCase() + name.slice(1);
const values = name === 'matrix' ? [mtx] : valArr;
if (name === 'scale' && values.length === 1) {
values.push(values[0]);
} else if (name === 'translate' && values.length === 1) {
values.push(0);
} else if (name === 'rotate' && values.length === 1) {
values.push(0, 0);
}
xform[fname](...values);
this._list.appendItem(xform);
}
}
};
this._removeFromOtherLists = function (item) {
if (item) {
// Check if this transform is already in a transformlist, and
// remove it if so.
Object.values(listMap_).some(tl => {
for (let i = 0, len = tl._xforms.length; i < len; ++i) {
if (tl._xforms[i] === item) {
tl.removeItem(i);
return true;
}
}
return false;
});
}
};
this.numberOfItems = 0;
}
/**
* @returns {void}
*/
clear() {
this.numberOfItems = 0;
this._xforms = [];
}
/**
* @param {SVGTransform} newItem
* @returns {void}
*/
initialize(newItem) {
this.numberOfItems = 1;
this._removeFromOtherLists(newItem);
this._xforms = [newItem];
}
/**
* @param {Integer} index unsigned long
* @throws {Error}
* @returns {SVGTransform}
*/
getItem(index) {
if (index < this.numberOfItems && index >= 0) {
return this._xforms[index];
}
const err = new Error('DOMException with code=INDEX_SIZE_ERR');
err.code = 1;
throw err;
}
/**
* @param {SVGTransform} newItem
* @param {Integer} index unsigned long
* @returns {SVGTransform}
*/
insertItemBefore(newItem, index) {
let retValue = null;
if (index >= 0) {
if (index < this.numberOfItems) {
this._removeFromOtherLists(newItem);
const newxforms = new Array(this.numberOfItems + 1); // TODO: use array copying and slicing
let i;
for (i = 0; i < index; ++i) {
newxforms[i] = this._xforms[i];
}
newxforms[i] = newItem;
for (let j = i + 1; i < this.numberOfItems; ++j, ++i) {
newxforms[j] = this._xforms[i];
}
this.numberOfItems++;
this._xforms = newxforms;
retValue = newItem;
this._list._update();
} else {
retValue = this._list.appendItem(newItem);
}
}
return retValue;
}
/**
* @param {SVGTransform} newItem
* @param {Integer} index unsigned long
* @returns {SVGTransform}
*/
replaceItem(newItem, index) {
let retValue = null;
if (index < this.numberOfItems && index >= 0) {
this._removeFromOtherLists(newItem);
this._xforms[index] = newItem;
retValue = newItem;
this._list._update();
}
return retValue;
}
/**
* @param {Integer} index unsigned long
* @throws {Error}
* @returns {SVGTransform}
*/
removeItem(index) {
if (index < this.numberOfItems && index >= 0) {
const retValue = this._xforms[index];
const newxforms = new Array(this.numberOfItems - 1);
let i;
for (i = 0; i < index; ++i) {
newxforms[i] = this._xforms[i];
}
for (let j = i; j < this.numberOfItems - 1; ++j, ++i) {
newxforms[j] = this._xforms[i + 1];
}
this.numberOfItems--;
this._xforms = newxforms;
this._list._update();
return retValue;
}
const err = new Error('DOMException with code=INDEX_SIZE_ERR');
err.code = 1;
throw err;
}
/**
* @param {SVGTransform} newItem
* @returns {SVGTransform}
*/
appendItem(newItem) {
this._removeFromOtherLists(newItem);
this._xforms.push(newItem);
this.numberOfItems++;
this._list._update();
return newItem;
}
}
/**
* @function module:SVGTransformList.resetListMap
* @returns {void}
*/
const resetListMap = function () {
listMap_ = {};
};
/**
* Removes transforms of the given element from the map.
* @function module:SVGTransformList.removeElementFromListMap
* @param {Element} elem - a DOM Element
* @returns {void}
*/
let removeElementFromListMap = function (elem) {
// eslint-disable-line import/no-mutable-exports
if (elem.id && listMap_[elem.id]) {
delete listMap_[elem.id];
}
};
/**
* Returns an object that behaves like a `SVGTransformList` for the given DOM element.
* @function module:SVGTransformList.getTransformList
* @param {Element} elem - DOM element to get a transformlist from
* @todo The polyfill should have `SVGAnimatedTransformList` and this should use it
* @returns {SVGAnimatedTransformList|SVGTransformList}
*/
const getTransformList = function (elem) {
if (!supportsNativeTransformLists()) {
const id = elem.id || 'temp';
let t = listMap_[id];
if (!t || id === 'temp') {
listMap_[id] = new SVGTransformList(elem);
listMap_[id]._init();
t = listMap_[id];
}
return t;
}
if (elem.transform) {
return elem.transform.baseVal;
}
if (elem.gradientTransform) {
return elem.gradientTransform.baseVal;
}
if (elem.patternTransform) {
return elem.patternTransform.baseVal;
}
return null;
};
/**
* Tools for working with units.
* @module units
* @license MIT
*
* @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
*/
const wAttrs = ['x', 'x1', 'cx', 'rx', 'width'];
const hAttrs = ['y', 'y1', 'cy', 'ry', 'height'];
const unitAttrs = ['r', 'radius', ...wAttrs, ...hAttrs]; // unused
/*
const unitNumMap = {
'%': 2,
em: 3,
ex: 4,
px: 5,
cm: 6,
mm: 7,
in: 8,
pt: 9,
pc: 10
};
*/
// 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
*/
/* eslint-disable jsdoc/valid-types */
/**
* @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} %
*/
/* eslint-enable jsdoc/valid-types */
/**
* Initializes this module.
*
* @function module:units.init
* @param {module:units.ElementContainer} elementContainer - An object implementing the ElementContainer interface.
* @returns {void}
*/
const init = function (elementContainer) {
elementContainer_ = elementContainer; // Get correct em/ex values by creating a temporary SVG.
const svg = document.createElementNS(NS.SVG, 'svg');
document.body.append(svg);
const rect = document.createElementNS(NS.SVG, '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
*/
const getTypeMap = function () {
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
*/
const shortFloat = function (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}
*/
const convertUnit = function (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}
*/
const setUnitAttr = function (elem, attr, val) {
// if (!isNaN(val)) {
// New value is a number, so check currently used unit
// const oldVal = elem.getAttribute(attr);
// Enable this for alternate mode
// if (oldVal !== null && (isNaN(oldVal) || elementContainer_.getBaseUnit() !== 'px')) {
// // Old value was a number, so get unit, then convert
// let unit;
// if (oldVal.substr(-1) === '%') {
// const res = getResolution();
// unit = '%';
// val *= 100;
// if (wAttrs.includes(attr)) {
// val = val / res.w;
// } else if (hAttrs.includes(attr)) {
// val = val / res.h;
// } else {
// return val / Math.sqrt((res.w*res.w) + (res.h*res.h))/Math.sqrt(2);
// }
// } else {
// if (elementContainer_.getBaseUnit() !== 'px') {
// unit = elementContainer_.getBaseUnit();
// } else {
// unit = oldVal.substr(-2);
// }
// val = val / typeMap_[unit];
// }
//
// val += unit;
// }
// }
elem.setAttribute(attr, val);
};
/**
* 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
*/
const convertToNum = function (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
*/
const isValidUnit = function (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 getElem() 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 = isNullish(elem) || elem === selectedElement;
} catch (e) {}
return result;
}
return true;
};
/**
* Mathematical utilities.
* @module math
* @license MIT
*
* @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
*/
const NEAR_ZERO = 1e-14; // Throw away SVGSVGElement used for creating matrices/transforms.
const svg$1 = 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
*/
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
*/
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
*/
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;
};
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}
*/
const transformBox = function (l, t, w, h, m) {
const tl = transformPoint(l, t, m),
tr = transformPoint(l + w, t, m),
bl = transformPoint(l, t + h, m),
br = transformPoint(l + w, t + h, m),
minx = Math.min(tl.x, tr.x, bl.x, br.x),
maxx = Math.max(tl.x, tr.x, bl.x, br.x),
miny = Math.min(tl.y, tr.y, bl.y, br.y),
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
*/
const transformListToTransform = function (tlist, min, max) {
if (isNullish(tlist)) {
// Or should tlist = null have been prevented before this?
return svg$1.createSVGTransformFromMatrix(svg$1.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$1.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$1.createSVGMatrix();
m = matrixMultiply(m, mtom);
}
return svg$1.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
*/
const getMatrix = function (elem) {
const tlist = getTransformList(elem);
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}
*/
const snapToAngle = function (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
*/
const rectsIntersect = function (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;
};
/* eslint-disable node/no-unsupported-features/node-builtins */
const $$1 = jQueryPluginSVG(jQuery); // String used to encode base64.
const KEYSTR = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='; // 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';
const visElemsArr = visElems.split(','); // const hidElems = 'defs,desc,feGaussianBlur,filter,linearGradient,marker,mask,metadata,pattern,radialGradient,stop,switch,symbol,title,textPath';
let editorContext_ = null;
let domdoc_ = null;
let domcontainer_ = null;
let svgroot_ = null;
/**
* Object with the following keys/values.
* @typedef {PlainObject} module:utilities.SVGElementJSON
* @property {string} element - Tag name of the SVG element to create
* @property {PlainObject} attr - Has key-value attributes to assign to the new element. An `id` should be set so that {@link module:utilities.EditorContext#addSVGElementFromJson} can later re-identify the element for modification or replacement.
* @property {boolean} [curStyles=false] - Indicates whether current style attributes should be applied first
* @property {module:utilities.SVGElementJSON[]} [children] - Data objects to be added recursively as children
* @property {string} [namespace="http://www.w3.org/2000/svg"] - Indicate a (non-SVG) namespace
*/
/**
* An object that creates SVG elements for the canvas.
*
* @interface module:utilities.EditorContext
* @property {module:path.pathActions} pathActions
*/
/**
* @function module:utilities.EditorContext#getSVGContent
* @returns {SVGSVGElement}
*/
/**
* Create a new SVG element based on the given object keys/values and add it
* to the current layer.
* The element will be run through `cleanupElement` before being returned.
* @function module:utilities.EditorContext#addSVGElementFromJson
* @param {module:utilities.SVGElementJSON} data
* @returns {Element} The new element
*/
/**
* @function module:utilities.EditorContext#getSelectedElements
* @returns {Element[]} the array with selected DOM elements
*/
/**
* @function module:utilities.EditorContext#getDOMDocument
* @returns {HTMLDocument}
*/
/**
* @function module:utilities.EditorContext#getDOMContainer
* @returns {HTMLElement}
*/
/**
* @function module:utilities.EditorContext#getSVGRoot
* @returns {SVGSVGElement}
*/
/**
* @function module:utilities.EditorContext#getBaseUnit
* @returns {string}
*/
/**
* @function module:utilities.EditorContext#getSnappingStep
* @returns {Float|string}
*/
/**
* @function module:utilities.init
* @param {module:utilities.EditorContext} editorContext
* @returns {void}
*/
const init$1 = function (editorContext) {
editorContext_ = editorContext;
domdoc_ = editorContext.getDOMDocument();
domcontainer_ = editorContext.getDOMContainer();
svgroot_ = editorContext.getSVGRoot();
};
/**
* Used to prevent the [Billion laughs attack]{@link https://en.wikipedia.org/wiki/Billion_laughs_attack}.
* @function module:utilities.dropXMLInternalSubset
* @param {string} str String to be processed
* @returns {string} The string with entity declarations in the internal subset removed
* @todo This might be needed in other places `parseFromString` is used even without LGTM flagging
*/
const dropXMLInternalSubset = str => {
return str.replace(/()/, '$1$2'); // return str.replace(/(?\?\]>)/, '$$');
};
/**
* Converts characters in a string to XML-friendly entities.
* @function module:utilities.toXml
* @example `&` becomes `&`
* @param {string} str - The string to be converted
* @returns {string} The converted string
*/
const toXml = function (str) {
// ' is ok in XML, but not HTML
// > does not normally need escaping, though it can if within a CDATA expression (and preceded by "]]")
return str.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, '''); // Note: `'` is XML only
};
/**
* Converts XML entities in a string to single characters.
* @function module:utilities.fromXml
* @example `&` becomes `&`
* @param {string} str - The string to be converted
* @returns {string} The converted string
*/
function fromXml(str) {
return $$1('').html(str).text();
} // This code was written by Tyler Akins and has been placed in the
// public domain. It would be nice if you left this header intact.
// Base64 code from Tyler Akins -- http://rumkin.com
// schiller: Removed string concatenation in favour of Array.join() optimization,
// also precalculate the size of the array needed.
/**
* Converts a string to base64.
* @function module:utilities.encode64
* @param {string} input
* @returns {string} Base64 output
*/
function encode64(input) {
// base64 strings are 4/3 larger than the original string
input = encodeUTF8(input); // convert non-ASCII characters
// input = convertToXMLReferences(input);
if (window.btoa) {
return window.btoa(input); // Use native if available
}
const output = new Array(Math.floor((input.length + 2) / 3) * 4);
let i = 0,
p = 0;
do {
const chr1 = input.charCodeAt(i++);
const chr2 = input.charCodeAt(i++);
const chr3 = input.charCodeAt(i++);
/* eslint-disable no-bitwise */
const enc1 = chr1 >> 2;
const enc2 = (chr1 & 3) << 4 | chr2 >> 4;
let enc3 = (chr2 & 15) << 2 | chr3 >> 6;
let enc4 = chr3 & 63;
/* eslint-enable no-bitwise */
if (Number.isNaN(chr2)) {
enc3 = 64;
enc4 = 64;
} else if (Number.isNaN(chr3)) {
enc4 = 64;
}
output[p++] = KEYSTR.charAt(enc1);
output[p++] = KEYSTR.charAt(enc2);
output[p++] = KEYSTR.charAt(enc3);
output[p++] = KEYSTR.charAt(enc4);
} while (i < input.length);
return output.join('');
}
/**
* Converts a string from base64.
* @function module:utilities.decode64
* @param {string} input Base64-encoded input
* @returns {string} Decoded output
*/
function decode64(input) {
if (window.atob) {
return decodeUTF8(window.atob(input));
} // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
input = input.replace(/[^A-Za-z\d+/=]/g, '');
let output = '';
let i = 0;
do {
const enc1 = KEYSTR.indexOf(input.charAt(i++));
const enc2 = KEYSTR.indexOf(input.charAt(i++));
const enc3 = KEYSTR.indexOf(input.charAt(i++));
const enc4 = KEYSTR.indexOf(input.charAt(i++));
/* eslint-disable no-bitwise */
const chr1 = enc1 << 2 | enc2 >> 4;
const chr2 = (enc2 & 15) << 4 | enc3 >> 2;
const chr3 = (enc3 & 3) << 6 | enc4;
/* eslint-enable no-bitwise */
output += String.fromCharCode(chr1);
if (enc3 !== 64) {
output += String.fromCharCode(chr2);
}
if (enc4 !== 64) {
output += String.fromCharCode(chr3);
}
} while (i < input.length);
return decodeUTF8(output);
}
/**
* @function module:utilities.decodeUTF8
* @param {string} argString
* @returns {string}
*/
function decodeUTF8(argString) {
return decodeURIComponent(escape(argString));
} // codedread:does not seem to work with webkit-based browsers on OSX // Brettz9: please test again as function upgraded
/**
* @function module:utilities.encodeUTF8
* @param {string} argString
* @returns {string}
*/
const encodeUTF8 = function (argString) {
return unescape(encodeURIComponent(argString));
};
/**
* Convert dataURL to object URL.
* @function module:utilities.dataURLToObjectURL
* @param {string} dataurl
* @returns {string} object URL or empty string
*/
const dataURLToObjectURL = function (dataurl) {
if (typeof Uint8Array === 'undefined' || typeof Blob === 'undefined' || typeof URL === 'undefined' || !URL.createObjectURL) {
return '';
}
const arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]);
/*
const [prefix, suffix] = dataurl.split(','),
{groups: {mime}} = prefix.match(/:(?.*?);/),
bstr = atob(suffix);
*/
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
const blob = new Blob([u8arr], {
type: mime
});
return URL.createObjectURL(blob);
};
/**
* Get object URL for a blob object.
* @function module:utilities.createObjectURL
* @param {Blob} blob A Blob object or File object
* @returns {string} object URL or empty string
*/
const createObjectURL = function (blob) {
if (!blob || typeof URL === 'undefined' || !URL.createObjectURL) {
return '';
}
return URL.createObjectURL(blob);
};
/**
* @property {string} blankPageObjectURL
*/
const blankPageObjectURL = function () {
if (typeof Blob === 'undefined') {
return '';
}
const blob = new Blob(['SVG-edit '], {
type: 'text/html'
});
return createObjectURL(blob);
}();
/**
* Converts a string to use XML references (for non-ASCII).
* @function module:utilities.convertToXMLReferences
* @param {string} input
* @returns {string} Decimal numeric character references
*/
const convertToXMLReferences = function (input) {
let output = '';
[...input].forEach(ch => {
const c = ch.charCodeAt();
if (c <= 127) {
output += ch;
} else {
output += `&#${c};`;
}
});
return output;
};
/**
* Cross-browser compatible method of converting a string to an XML tree.
* Found this function [here]{@link http://groups.google.com/group/jquery-dev/browse_thread/thread/c6d11387c580a77f}.
* @function module:utilities.text2xml
* @param {string} sXML
* @throws {Error}
* @returns {XMLDocument}
*/
const text2xml = function (sXML) {
if (sXML.includes('`
* - ``
* - ``
* @function module:utilities.getUrlFromAttr
* @param {string} attrVal The attribute value as a string
* @returns {string} String with just the URL, like "someFile.svg#foo"
*/
const getUrlFromAttr = function (attrVal) {
if (attrVal) {
// url('#somegrad')
if (attrVal.startsWith('url("')) {
return attrVal.substring(5, attrVal.indexOf('"', 6));
} // url('#somegrad')
if (attrVal.startsWith("url('")) {
return attrVal.substring(5, attrVal.indexOf("'", 6));
}
if (attrVal.startsWith('url(')) {
return attrVal.substring(4, attrVal.indexOf(')'));
}
}
return null;
};
/**
* @function module:utilities.getHref
* @param {Element} elem
* @returns {string} The given element's `xlink:href` value
*/
let getHref = function (elem) {
// eslint-disable-line import/no-mutable-exports
return elem.getAttributeNS(NS.XLINK, 'href');
};
/**
* Sets the given element's `xlink:href` value.
* @function module:utilities.setHref
* @param {Element} elem
* @param {string} val
* @returns {void}
*/
let setHref = function (elem, val) {
// eslint-disable-line import/no-mutable-exports
elem.setAttributeNS(NS.XLINK, 'xlink:href', val);
};
/**
* @function module:utilities.findDefs
* @returns {SVGDefsElement} The document's `` element, creating it first if necessary
*/
const findDefs = function () {
const svgElement = editorContext_.getSVGContent();
let defs = svgElement.getElementsByTagNameNS(NS.SVG, 'defs');
if (defs.length > 0) {
defs = defs[0];
} else {
defs = svgElement.ownerDocument.createElementNS(NS.SVG, 'defs');
if (svgElement.firstChild) {
// first child is a comment, so call nextSibling
svgElement.insertBefore(defs, svgElement.firstChild.nextSibling); // svgElement.firstChild.nextSibling.before(defs); // Not safe
} else {
svgElement.append(defs);
}
}
return defs;
}; // TODO(codedread): Consider moving the next to functions to bbox.js
/**
* Get correct BBox for a path in Webkit.
* Converted from code found [here]{@link http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html}.
* @function module:utilities.getPathBBox
* @param {SVGPathElement} path - The path DOM element to get the BBox for
* @returns {module:utilities.BBoxObject} A BBox-like object
*/
const getPathBBox = function (path) {
const seglist = path.pathSegList;
const tot = seglist.numberOfItems;
const bounds = [[], []];
const start = seglist.getItem(0);
let P0 = [start.x, start.y];
const getCalc = function (j, P1, P2, P3) {
return function (t) {
return 1 - t ** 3 * P0[j] + 3 * 1 - t ** 2 * t * P1[j] + 3 * (1 - t) * t ** 2 * P2[j] + t ** 3 * P3[j];
};
};
for (let i = 0; i < tot; i++) {
const seg = seglist.getItem(i);
if (seg.x === undefined) {
continue;
} // Add actual points to limits
bounds[0].push(P0[0]);
bounds[1].push(P0[1]);
if (seg.x1) {
const P1 = [seg.x1, seg.y1],
P2 = [seg.x2, seg.y2],
P3 = [seg.x, seg.y];
for (let j = 0; j < 2; j++) {
const calc = getCalc(j, P1, P2, P3);
const b = 6 * P0[j] - 12 * P1[j] + 6 * P2[j];
const a = -3 * P0[j] + 9 * P1[j] - 9 * P2[j] + 3 * P3[j];
const c = 3 * P1[j] - 3 * P0[j];
if (a === 0) {
if (b === 0) {
continue;
}
const t = -c / b;
if (t > 0 && t < 1) {
bounds[j].push(calc(t));
}
continue;
}
const b2ac = b ** 2 - 4 * c * a;
if (b2ac < 0) {
continue;
}
const t1 = (-b + Math.sqrt(b2ac)) / (2 * a);
if (t1 > 0 && t1 < 1) {
bounds[j].push(calc(t1));
}
const t2 = (-b - Math.sqrt(b2ac)) / (2 * a);
if (t2 > 0 && t2 < 1) {
bounds[j].push(calc(t2));
}
}
P0 = P3;
} else {
bounds[0].push(seg.x);
bounds[1].push(seg.y);
}
}
const x = Math.min.apply(null, bounds[0]);
const w = Math.max.apply(null, bounds[0]) - x;
const y = Math.min.apply(null, bounds[1]);
const h = Math.max.apply(null, bounds[1]) - y;
return {
x,
y,
width: w,
height: h
};
};
/**
* Get the given/selected element's bounding box object, checking for
* horizontal/vertical lines (see issue 717)
* Note that performance is currently terrible, so some way to improve would
* be great.
* @param {Element} selected - Container or `