30686 lines
1.0 MiB
30686 lines
1.0 MiB
(function (global, factory) {
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
|
typeof define === 'function' && define.amd ? define(factory) :
|
|
(global.svgEditor = factory());
|
|
}(this, (function () { 'use strict';
|
|
|
|
// http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/
|
|
function touchHandler(event) {
|
|
var touches = event.changedTouches,
|
|
first = touches[0];
|
|
var type = '';
|
|
switch (event.type) {
|
|
case 'touchstart':
|
|
type = 'mousedown';break;
|
|
case 'touchmove':
|
|
type = 'mousemove';break;
|
|
case 'touchend':
|
|
type = 'mouseup';break;
|
|
default:
|
|
return;
|
|
}
|
|
|
|
// initMouseEvent(type, canBubble, cancelable, view, clickCount,
|
|
// screenX, screenY, clientX, clientY, ctrlKey,
|
|
// altKey, shiftKey, metaKey, button, relatedTarget);
|
|
|
|
var simulatedEvent = document.createEvent('MouseEvent');
|
|
simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0 /* left */, null);
|
|
if (touches.length < 2) {
|
|
first.target.dispatchEvent(simulatedEvent);
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
|
|
document.addEventListener('touchstart', touchHandler, true);
|
|
document.addEventListener('touchmove', touchHandler, true);
|
|
document.addEventListener('touchend', touchHandler, true);
|
|
document.addEventListener('touchcancel', touchHandler, true);
|
|
|
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
|
|
return typeof obj;
|
|
} : function (obj) {
|
|
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
};
|
|
|
|
var classCallCheck = function (instance, Constructor) {
|
|
if (!(instance instanceof Constructor)) {
|
|
throw new TypeError("Cannot call a class as a function");
|
|
}
|
|
};
|
|
|
|
var createClass = function () {
|
|
function defineProperties(target, props) {
|
|
for (var i = 0; i < props.length; i++) {
|
|
var descriptor = props[i];
|
|
descriptor.enumerable = descriptor.enumerable || false;
|
|
descriptor.configurable = true;
|
|
if ("value" in descriptor) descriptor.writable = true;
|
|
Object.defineProperty(target, descriptor.key, descriptor);
|
|
}
|
|
}
|
|
|
|
return function (Constructor, protoProps, staticProps) {
|
|
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
|
if (staticProps) defineProperties(Constructor, staticProps);
|
|
return Constructor;
|
|
};
|
|
}();
|
|
|
|
var inherits = function (subClass, superClass) {
|
|
if (typeof superClass !== "function" && superClass !== null) {
|
|
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
|
|
}
|
|
|
|
subClass.prototype = Object.create(superClass && superClass.prototype, {
|
|
constructor: {
|
|
value: subClass,
|
|
enumerable: false,
|
|
writable: true,
|
|
configurable: true
|
|
}
|
|
});
|
|
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
|
|
};
|
|
|
|
var possibleConstructorReturn = function (self, call) {
|
|
if (!self) {
|
|
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
}
|
|
|
|
return call && (typeof call === "object" || typeof call === "function") ? call : self;
|
|
};
|
|
|
|
var slicedToArray = function () {
|
|
function sliceIterator(arr, i) {
|
|
var _arr = [];
|
|
var _n = true;
|
|
var _d = false;
|
|
var _e = undefined;
|
|
|
|
try {
|
|
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
|
_arr.push(_s.value);
|
|
|
|
if (i && _arr.length === i) break;
|
|
}
|
|
} catch (err) {
|
|
_d = true;
|
|
_e = err;
|
|
} finally {
|
|
try {
|
|
if (!_n && _i["return"]) _i["return"]();
|
|
} finally {
|
|
if (_d) throw _e;
|
|
}
|
|
}
|
|
|
|
return _arr;
|
|
}
|
|
|
|
return function (arr, i) {
|
|
if (Array.isArray(arr)) {
|
|
return arr;
|
|
} else if (Symbol.iterator in Object(arr)) {
|
|
return sliceIterator(arr, i);
|
|
} else {
|
|
throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
|
}
|
|
};
|
|
}();
|
|
|
|
var toConsumableArray = function (arr) {
|
|
if (Array.isArray(arr)) {
|
|
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
|
|
|
|
return arr2;
|
|
} else {
|
|
return Array.from(arr);
|
|
}
|
|
};
|
|
|
|
/**
|
|
*
|
|
* Licensed under the MIT License
|
|
*/
|
|
|
|
/**
|
|
* Common namepaces constants in alpha order
|
|
*/
|
|
var 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
|
|
};
|
|
|
|
/**
|
|
* @returns The NS with key values switched and lowercase
|
|
*/
|
|
var getReverseNS = function getReverseNS() {
|
|
var reverseNS = {};
|
|
Object.entries(NS).forEach(function (_ref) {
|
|
var _ref2 = slicedToArray(_ref, 2),
|
|
name = _ref2[0],
|
|
URI = _ref2[1];
|
|
|
|
reverseNS[URI] = name.toLowerCase();
|
|
});
|
|
return reverseNS;
|
|
};
|
|
|
|
// 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 (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.
|
|
|
|
(function () {
|
|
if (!('SVGPathSeg' in window)) {
|
|
// Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSeg
|
|
var _SVGPathSeg = function () {
|
|
function _SVGPathSeg(type, typeAsLetter, owningPathSegList) {
|
|
classCallCheck(this, _SVGPathSeg);
|
|
|
|
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.
|
|
|
|
|
|
createClass(_SVGPathSeg, [{
|
|
key: '_segmentChanged',
|
|
value: function _segmentChanged() {
|
|
if (this._owningPathSegList) {
|
|
this._owningPathSegList.segmentChanged(this);
|
|
}
|
|
}
|
|
}]);
|
|
return _SVGPathSeg;
|
|
}();
|
|
|
|
_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;
|
|
|
|
var _SVGPathSegClosePath = function (_SVGPathSeg2) {
|
|
inherits(_SVGPathSegClosePath, _SVGPathSeg2);
|
|
|
|
function _SVGPathSegClosePath(owningPathSegList) {
|
|
classCallCheck(this, _SVGPathSegClosePath);
|
|
return possibleConstructorReturn(this, (_SVGPathSegClosePath.__proto__ || Object.getPrototypeOf(_SVGPathSegClosePath)).call(this, _SVGPathSeg.PATHSEG_CLOSEPATH, 'z', owningPathSegList));
|
|
}
|
|
|
|
createClass(_SVGPathSegClosePath, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegClosePath]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegClosePath(undefined);
|
|
}
|
|
}]);
|
|
return _SVGPathSegClosePath;
|
|
}(_SVGPathSeg);
|
|
|
|
var _SVGPathSegMovetoAbs = function (_SVGPathSeg3) {
|
|
inherits(_SVGPathSegMovetoAbs, _SVGPathSeg3);
|
|
|
|
function _SVGPathSegMovetoAbs(owningPathSegList, x, y) {
|
|
classCallCheck(this, _SVGPathSegMovetoAbs);
|
|
|
|
var _this2 = possibleConstructorReturn(this, (_SVGPathSegMovetoAbs.__proto__ || Object.getPrototypeOf(_SVGPathSegMovetoAbs)).call(this, _SVGPathSeg.PATHSEG_MOVETO_ABS, 'M', owningPathSegList));
|
|
|
|
_this2._x = x;
|
|
_this2._y = y;
|
|
return _this2;
|
|
}
|
|
|
|
createClass(_SVGPathSegMovetoAbs, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegMovetoAbs]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegMovetoAbs(undefined, this._x, this._y);
|
|
}
|
|
}]);
|
|
return _SVGPathSegMovetoAbs;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperties(_SVGPathSegMovetoAbs.prototype, {
|
|
x: {
|
|
get: function get$$1() {
|
|
return this._x;
|
|
},
|
|
set: function set$$1(x) {
|
|
this._x = x;this._segmentChanged();
|
|
},
|
|
enumerable: true
|
|
},
|
|
y: {
|
|
get: function get$$1() {
|
|
return this._y;
|
|
},
|
|
set: function set$$1(y) {
|
|
this._y = y;this._segmentChanged();
|
|
},
|
|
enumerable: true
|
|
}
|
|
});
|
|
|
|
var _SVGPathSegMovetoRel = function (_SVGPathSeg4) {
|
|
inherits(_SVGPathSegMovetoRel, _SVGPathSeg4);
|
|
|
|
function _SVGPathSegMovetoRel(owningPathSegList, x, y) {
|
|
classCallCheck(this, _SVGPathSegMovetoRel);
|
|
|
|
var _this3 = possibleConstructorReturn(this, (_SVGPathSegMovetoRel.__proto__ || Object.getPrototypeOf(_SVGPathSegMovetoRel)).call(this, _SVGPathSeg.PATHSEG_MOVETO_REL, 'm', owningPathSegList));
|
|
|
|
_this3._x = x;
|
|
_this3._y = y;
|
|
return _this3;
|
|
}
|
|
|
|
createClass(_SVGPathSegMovetoRel, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegMovetoRel]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegMovetoRel(undefined, this._x, this._y);
|
|
}
|
|
}]);
|
|
return _SVGPathSegMovetoRel;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperties(_SVGPathSegMovetoRel.prototype, {
|
|
x: {
|
|
get: function get$$1() {
|
|
return this._x;
|
|
},
|
|
set: function set$$1(x) {
|
|
this._x = x;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y: {
|
|
get: function get$$1() {
|
|
return this._y;
|
|
},
|
|
set: function set$$1(y) {
|
|
this._y = y;this._segmentChanged();
|
|
},
|
|
enumerable: true }
|
|
});
|
|
|
|
var _SVGPathSegLinetoAbs = function (_SVGPathSeg5) {
|
|
inherits(_SVGPathSegLinetoAbs, _SVGPathSeg5);
|
|
|
|
function _SVGPathSegLinetoAbs(owningPathSegList, x, y) {
|
|
classCallCheck(this, _SVGPathSegLinetoAbs);
|
|
|
|
var _this4 = possibleConstructorReturn(this, (_SVGPathSegLinetoAbs.__proto__ || Object.getPrototypeOf(_SVGPathSegLinetoAbs)).call(this, _SVGPathSeg.PATHSEG_LINETO_ABS, 'L', owningPathSegList));
|
|
|
|
_this4._x = x;
|
|
_this4._y = y;
|
|
return _this4;
|
|
}
|
|
|
|
createClass(_SVGPathSegLinetoAbs, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegLinetoAbs]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegLinetoAbs(undefined, this._x, this._y);
|
|
}
|
|
}]);
|
|
return _SVGPathSegLinetoAbs;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperties(_SVGPathSegLinetoAbs.prototype, {
|
|
x: {
|
|
get: function get$$1() {
|
|
return this._x;
|
|
},
|
|
set: function set$$1(x) {
|
|
this._x = x;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y: {
|
|
get: function get$$1() {
|
|
return this._y;
|
|
},
|
|
set: function set$$1(y) {
|
|
this._y = y;this._segmentChanged();
|
|
},
|
|
enumerable: true }
|
|
});
|
|
|
|
var _SVGPathSegLinetoRel = function (_SVGPathSeg6) {
|
|
inherits(_SVGPathSegLinetoRel, _SVGPathSeg6);
|
|
|
|
function _SVGPathSegLinetoRel(owningPathSegList, x, y) {
|
|
classCallCheck(this, _SVGPathSegLinetoRel);
|
|
|
|
var _this5 = possibleConstructorReturn(this, (_SVGPathSegLinetoRel.__proto__ || Object.getPrototypeOf(_SVGPathSegLinetoRel)).call(this, _SVGPathSeg.PATHSEG_LINETO_REL, 'l', owningPathSegList));
|
|
|
|
_this5._x = x;
|
|
_this5._y = y;
|
|
return _this5;
|
|
}
|
|
|
|
createClass(_SVGPathSegLinetoRel, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegLinetoRel]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegLinetoRel(undefined, this._x, this._y);
|
|
}
|
|
}]);
|
|
return _SVGPathSegLinetoRel;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperties(_SVGPathSegLinetoRel.prototype, {
|
|
x: {
|
|
get: function get$$1() {
|
|
return this._x;
|
|
},
|
|
set: function set$$1(x) {
|
|
this._x = x;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y: {
|
|
get: function get$$1() {
|
|
return this._y;
|
|
},
|
|
set: function set$$1(y) {
|
|
this._y = y;this._segmentChanged();
|
|
},
|
|
enumerable: true }
|
|
});
|
|
|
|
var _SVGPathSegCurvetoCubicAbs = function (_SVGPathSeg7) {
|
|
inherits(_SVGPathSegCurvetoCubicAbs, _SVGPathSeg7);
|
|
|
|
function _SVGPathSegCurvetoCubicAbs(owningPathSegList, x, y, x1, y1, x2, y2) {
|
|
classCallCheck(this, _SVGPathSegCurvetoCubicAbs);
|
|
|
|
var _this6 = possibleConstructorReturn(this, (_SVGPathSegCurvetoCubicAbs.__proto__ || Object.getPrototypeOf(_SVGPathSegCurvetoCubicAbs)).call(this, _SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS, 'C', owningPathSegList));
|
|
|
|
_this6._x = x;
|
|
_this6._y = y;
|
|
_this6._x1 = x1;
|
|
_this6._y1 = y1;
|
|
_this6._x2 = x2;
|
|
_this6._y2 = y2;
|
|
return _this6;
|
|
}
|
|
|
|
createClass(_SVGPathSegCurvetoCubicAbs, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegCurvetoCubicAbs]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegCurvetoCubicAbs(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2);
|
|
}
|
|
}]);
|
|
return _SVGPathSegCurvetoCubicAbs;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperties(_SVGPathSegCurvetoCubicAbs.prototype, {
|
|
x: {
|
|
get: function get$$1() {
|
|
return this._x;
|
|
},
|
|
set: function set$$1(x) {
|
|
this._x = x;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y: {
|
|
get: function get$$1() {
|
|
return this._y;
|
|
},
|
|
set: function set$$1(y) {
|
|
this._y = y;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
x1: {
|
|
get: function get$$1() {
|
|
return this._x1;
|
|
},
|
|
set: function set$$1(x1) {
|
|
this._x1 = x1;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y1: {
|
|
get: function get$$1() {
|
|
return this._y1;
|
|
},
|
|
set: function set$$1(y1) {
|
|
this._y1 = y1;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
x2: {
|
|
get: function get$$1() {
|
|
return this._x2;
|
|
},
|
|
set: function set$$1(x2) {
|
|
this._x2 = x2;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y2: {
|
|
get: function get$$1() {
|
|
return this._y2;
|
|
},
|
|
set: function set$$1(y2) {
|
|
this._y2 = y2;this._segmentChanged();
|
|
},
|
|
enumerable: true }
|
|
});
|
|
|
|
var _SVGPathSegCurvetoCubicRel = function (_SVGPathSeg8) {
|
|
inherits(_SVGPathSegCurvetoCubicRel, _SVGPathSeg8);
|
|
|
|
function _SVGPathSegCurvetoCubicRel(owningPathSegList, x, y, x1, y1, x2, y2) {
|
|
classCallCheck(this, _SVGPathSegCurvetoCubicRel);
|
|
|
|
var _this7 = possibleConstructorReturn(this, (_SVGPathSegCurvetoCubicRel.__proto__ || Object.getPrototypeOf(_SVGPathSegCurvetoCubicRel)).call(this, _SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL, 'c', owningPathSegList));
|
|
|
|
_this7._x = x;
|
|
_this7._y = y;
|
|
_this7._x1 = x1;
|
|
_this7._y1 = y1;
|
|
_this7._x2 = x2;
|
|
_this7._y2 = y2;
|
|
return _this7;
|
|
}
|
|
|
|
createClass(_SVGPathSegCurvetoCubicRel, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegCurvetoCubicRel]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegCurvetoCubicRel(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2);
|
|
}
|
|
}]);
|
|
return _SVGPathSegCurvetoCubicRel;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperties(_SVGPathSegCurvetoCubicRel.prototype, {
|
|
x: {
|
|
get: function get$$1() {
|
|
return this._x;
|
|
},
|
|
set: function set$$1(x) {
|
|
this._x = x;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y: {
|
|
get: function get$$1() {
|
|
return this._y;
|
|
},
|
|
set: function set$$1(y) {
|
|
this._y = y;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
x1: {
|
|
get: function get$$1() {
|
|
return this._x1;
|
|
},
|
|
set: function set$$1(x1) {
|
|
this._x1 = x1;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y1: {
|
|
get: function get$$1() {
|
|
return this._y1;
|
|
},
|
|
set: function set$$1(y1) {
|
|
this._y1 = y1;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
x2: {
|
|
get: function get$$1() {
|
|
return this._x2;
|
|
},
|
|
set: function set$$1(x2) {
|
|
this._x2 = x2;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y2: {
|
|
get: function get$$1() {
|
|
return this._y2;
|
|
},
|
|
set: function set$$1(y2) {
|
|
this._y2 = y2;this._segmentChanged();
|
|
},
|
|
enumerable: true }
|
|
});
|
|
|
|
var _SVGPathSegCurvetoQuadraticAbs = function (_SVGPathSeg9) {
|
|
inherits(_SVGPathSegCurvetoQuadraticAbs, _SVGPathSeg9);
|
|
|
|
function _SVGPathSegCurvetoQuadraticAbs(owningPathSegList, x, y, x1, y1) {
|
|
classCallCheck(this, _SVGPathSegCurvetoQuadraticAbs);
|
|
|
|
var _this8 = possibleConstructorReturn(this, (_SVGPathSegCurvetoQuadraticAbs.__proto__ || Object.getPrototypeOf(_SVGPathSegCurvetoQuadraticAbs)).call(this, _SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS, 'Q', owningPathSegList));
|
|
|
|
_this8._x = x;
|
|
_this8._y = y;
|
|
_this8._x1 = x1;
|
|
_this8._y1 = y1;
|
|
return _this8;
|
|
}
|
|
|
|
createClass(_SVGPathSegCurvetoQuadraticAbs, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegCurvetoQuadraticAbs]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x + ' ' + this._y;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegCurvetoQuadraticAbs(undefined, this._x, this._y, this._x1, this._y1);
|
|
}
|
|
}]);
|
|
return _SVGPathSegCurvetoQuadraticAbs;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperties(_SVGPathSegCurvetoQuadraticAbs.prototype, {
|
|
x: {
|
|
get: function get$$1() {
|
|
return this._x;
|
|
},
|
|
set: function set$$1(x) {
|
|
this._x = x;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y: {
|
|
get: function get$$1() {
|
|
return this._y;
|
|
},
|
|
set: function set$$1(y) {
|
|
this._y = y;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
x1: {
|
|
get: function get$$1() {
|
|
return this._x1;
|
|
},
|
|
set: function set$$1(x1) {
|
|
this._x1 = x1;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y1: {
|
|
get: function get$$1() {
|
|
return this._y1;
|
|
},
|
|
set: function set$$1(y1) {
|
|
this._y1 = y1;this._segmentChanged();
|
|
},
|
|
enumerable: true }
|
|
});
|
|
|
|
var _SVGPathSegCurvetoQuadraticRel = function (_SVGPathSeg10) {
|
|
inherits(_SVGPathSegCurvetoQuadraticRel, _SVGPathSeg10);
|
|
|
|
function _SVGPathSegCurvetoQuadraticRel(owningPathSegList, x, y, x1, y1) {
|
|
classCallCheck(this, _SVGPathSegCurvetoQuadraticRel);
|
|
|
|
var _this9 = possibleConstructorReturn(this, (_SVGPathSegCurvetoQuadraticRel.__proto__ || Object.getPrototypeOf(_SVGPathSegCurvetoQuadraticRel)).call(this, _SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL, 'q', owningPathSegList));
|
|
|
|
_this9._x = x;
|
|
_this9._y = y;
|
|
_this9._x1 = x1;
|
|
_this9._y1 = y1;
|
|
return _this9;
|
|
}
|
|
|
|
createClass(_SVGPathSegCurvetoQuadraticRel, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegCurvetoQuadraticRel]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x + ' ' + this._y;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegCurvetoQuadraticRel(undefined, this._x, this._y, this._x1, this._y1);
|
|
}
|
|
}]);
|
|
return _SVGPathSegCurvetoQuadraticRel;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperties(_SVGPathSegCurvetoQuadraticRel.prototype, {
|
|
x: {
|
|
get: function get$$1() {
|
|
return this._x;
|
|
},
|
|
set: function set$$1(x) {
|
|
this._x = x;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y: {
|
|
get: function get$$1() {
|
|
return this._y;
|
|
},
|
|
set: function set$$1(y) {
|
|
this._y = y;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
x1: {
|
|
get: function get$$1() {
|
|
return this._x1;
|
|
},
|
|
set: function set$$1(x1) {
|
|
this._x1 = x1;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y1: {
|
|
get: function get$$1() {
|
|
return this._y1;
|
|
},
|
|
set: function set$$1(y1) {
|
|
this._y1 = y1;this._segmentChanged();
|
|
},
|
|
enumerable: true }
|
|
});
|
|
|
|
var _SVGPathSegArcAbs = function (_SVGPathSeg11) {
|
|
inherits(_SVGPathSegArcAbs, _SVGPathSeg11);
|
|
|
|
function _SVGPathSegArcAbs(owningPathSegList, x, y, r1, r2, angle, largeArcFlag, sweepFlag) {
|
|
classCallCheck(this, _SVGPathSegArcAbs);
|
|
|
|
var _this10 = possibleConstructorReturn(this, (_SVGPathSegArcAbs.__proto__ || Object.getPrototypeOf(_SVGPathSegArcAbs)).call(this, _SVGPathSeg.PATHSEG_ARC_ABS, 'A', owningPathSegList));
|
|
|
|
_this10._x = x;
|
|
_this10._y = y;
|
|
_this10._r1 = r1;
|
|
_this10._r2 = r2;
|
|
_this10._angle = angle;
|
|
_this10._largeArcFlag = largeArcFlag;
|
|
_this10._sweepFlag = sweepFlag;
|
|
return _this10;
|
|
}
|
|
|
|
createClass(_SVGPathSegArcAbs, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegArcAbs]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._r1 + ' ' + this._r2 + ' ' + this._angle + ' ' + (this._largeArcFlag ? '1' : '0') + ' ' + (this._sweepFlag ? '1' : '0') + ' ' + this._x + ' ' + this._y;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegArcAbs(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag);
|
|
}
|
|
}]);
|
|
return _SVGPathSegArcAbs;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperties(_SVGPathSegArcAbs.prototype, {
|
|
x: {
|
|
get: function get$$1() {
|
|
return this._x;
|
|
},
|
|
set: function set$$1(x) {
|
|
this._x = x;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y: {
|
|
get: function get$$1() {
|
|
return this._y;
|
|
},
|
|
set: function set$$1(y) {
|
|
this._y = y;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
r1: {
|
|
get: function get$$1() {
|
|
return this._r1;
|
|
},
|
|
set: function set$$1(r1) {
|
|
this._r1 = r1;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
r2: {
|
|
get: function get$$1() {
|
|
return this._r2;
|
|
},
|
|
set: function set$$1(r2) {
|
|
this._r2 = r2;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
angle: {
|
|
get: function get$$1() {
|
|
return this._angle;
|
|
},
|
|
set: function set$$1(angle) {
|
|
this._angle = angle;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
largeArcFlag: {
|
|
get: function get$$1() {
|
|
return this._largeArcFlag;
|
|
},
|
|
set: function set$$1(largeArcFlag) {
|
|
this._largeArcFlag = largeArcFlag;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
sweepFlag: {
|
|
get: function get$$1() {
|
|
return this._sweepFlag;
|
|
},
|
|
set: function set$$1(sweepFlag) {
|
|
this._sweepFlag = sweepFlag;this._segmentChanged();
|
|
},
|
|
enumerable: true }
|
|
});
|
|
|
|
var _SVGPathSegArcRel = function (_SVGPathSeg12) {
|
|
inherits(_SVGPathSegArcRel, _SVGPathSeg12);
|
|
|
|
function _SVGPathSegArcRel(owningPathSegList, x, y, r1, r2, angle, largeArcFlag, sweepFlag) {
|
|
classCallCheck(this, _SVGPathSegArcRel);
|
|
|
|
var _this11 = possibleConstructorReturn(this, (_SVGPathSegArcRel.__proto__ || Object.getPrototypeOf(_SVGPathSegArcRel)).call(this, _SVGPathSeg.PATHSEG_ARC_REL, 'a', owningPathSegList));
|
|
|
|
_this11._x = x;
|
|
_this11._y = y;
|
|
_this11._r1 = r1;
|
|
_this11._r2 = r2;
|
|
_this11._angle = angle;
|
|
_this11._largeArcFlag = largeArcFlag;
|
|
_this11._sweepFlag = sweepFlag;
|
|
return _this11;
|
|
}
|
|
|
|
createClass(_SVGPathSegArcRel, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegArcRel]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._r1 + ' ' + this._r2 + ' ' + this._angle + ' ' + (this._largeArcFlag ? '1' : '0') + ' ' + (this._sweepFlag ? '1' : '0') + ' ' + this._x + ' ' + this._y;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegArcRel(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag);
|
|
}
|
|
}]);
|
|
return _SVGPathSegArcRel;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperties(_SVGPathSegArcRel.prototype, {
|
|
x: {
|
|
get: function get$$1() {
|
|
return this._x;
|
|
},
|
|
set: function set$$1(x) {
|
|
this._x = x;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y: {
|
|
get: function get$$1() {
|
|
return this._y;
|
|
},
|
|
set: function set$$1(y) {
|
|
this._y = y;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
r1: {
|
|
get: function get$$1() {
|
|
return this._r1;
|
|
},
|
|
set: function set$$1(r1) {
|
|
this._r1 = r1;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
r2: {
|
|
get: function get$$1() {
|
|
return this._r2;
|
|
},
|
|
set: function set$$1(r2) {
|
|
this._r2 = r2;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
angle: {
|
|
get: function get$$1() {
|
|
return this._angle;
|
|
},
|
|
set: function set$$1(angle) {
|
|
this._angle = angle;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
largeArcFlag: {
|
|
get: function get$$1() {
|
|
return this._largeArcFlag;
|
|
},
|
|
set: function set$$1(largeArcFlag) {
|
|
this._largeArcFlag = largeArcFlag;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
sweepFlag: {
|
|
get: function get$$1() {
|
|
return this._sweepFlag;
|
|
},
|
|
set: function set$$1(sweepFlag) {
|
|
this._sweepFlag = sweepFlag;this._segmentChanged();
|
|
},
|
|
enumerable: true }
|
|
});
|
|
|
|
var _SVGPathSegLinetoHorizontalAbs = function (_SVGPathSeg13) {
|
|
inherits(_SVGPathSegLinetoHorizontalAbs, _SVGPathSeg13);
|
|
|
|
function _SVGPathSegLinetoHorizontalAbs(owningPathSegList, x) {
|
|
classCallCheck(this, _SVGPathSegLinetoHorizontalAbs);
|
|
|
|
var _this12 = possibleConstructorReturn(this, (_SVGPathSegLinetoHorizontalAbs.__proto__ || Object.getPrototypeOf(_SVGPathSegLinetoHorizontalAbs)).call(this, _SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS, 'H', owningPathSegList));
|
|
|
|
_this12._x = x;
|
|
return _this12;
|
|
}
|
|
|
|
createClass(_SVGPathSegLinetoHorizontalAbs, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegLinetoHorizontalAbs]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._x;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegLinetoHorizontalAbs(undefined, this._x);
|
|
}
|
|
}]);
|
|
return _SVGPathSegLinetoHorizontalAbs;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperty(_SVGPathSegLinetoHorizontalAbs.prototype, 'x', {
|
|
get: function get$$1() {
|
|
return this._x;
|
|
},
|
|
set: function set$$1(x) {
|
|
this._x = x;this._segmentChanged();
|
|
},
|
|
enumerable: true });
|
|
|
|
var _SVGPathSegLinetoHorizontalRel = function (_SVGPathSeg14) {
|
|
inherits(_SVGPathSegLinetoHorizontalRel, _SVGPathSeg14);
|
|
|
|
function _SVGPathSegLinetoHorizontalRel(owningPathSegList, x) {
|
|
classCallCheck(this, _SVGPathSegLinetoHorizontalRel);
|
|
|
|
var _this13 = possibleConstructorReturn(this, (_SVGPathSegLinetoHorizontalRel.__proto__ || Object.getPrototypeOf(_SVGPathSegLinetoHorizontalRel)).call(this, _SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL, 'h', owningPathSegList));
|
|
|
|
_this13._x = x;
|
|
return _this13;
|
|
}
|
|
|
|
createClass(_SVGPathSegLinetoHorizontalRel, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegLinetoHorizontalRel]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._x;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegLinetoHorizontalRel(undefined, this._x);
|
|
}
|
|
}]);
|
|
return _SVGPathSegLinetoHorizontalRel;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperty(_SVGPathSegLinetoHorizontalRel.prototype, 'x', {
|
|
get: function get$$1() {
|
|
return this._x;
|
|
},
|
|
set: function set$$1(x) {
|
|
this._x = x;this._segmentChanged();
|
|
},
|
|
enumerable: true });
|
|
|
|
var _SVGPathSegLinetoVerticalAbs = function (_SVGPathSeg15) {
|
|
inherits(_SVGPathSegLinetoVerticalAbs, _SVGPathSeg15);
|
|
|
|
function _SVGPathSegLinetoVerticalAbs(owningPathSegList, y) {
|
|
classCallCheck(this, _SVGPathSegLinetoVerticalAbs);
|
|
|
|
var _this14 = possibleConstructorReturn(this, (_SVGPathSegLinetoVerticalAbs.__proto__ || Object.getPrototypeOf(_SVGPathSegLinetoVerticalAbs)).call(this, _SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS, 'V', owningPathSegList));
|
|
|
|
_this14._y = y;
|
|
return _this14;
|
|
}
|
|
|
|
createClass(_SVGPathSegLinetoVerticalAbs, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegLinetoVerticalAbs]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._y;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegLinetoVerticalAbs(undefined, this._y);
|
|
}
|
|
}]);
|
|
return _SVGPathSegLinetoVerticalAbs;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperty(_SVGPathSegLinetoVerticalAbs.prototype, 'y', {
|
|
get: function get$$1() {
|
|
return this._y;
|
|
},
|
|
set: function set$$1(y) {
|
|
this._y = y;this._segmentChanged();
|
|
},
|
|
enumerable: true });
|
|
|
|
var _SVGPathSegLinetoVerticalRel = function (_SVGPathSeg16) {
|
|
inherits(_SVGPathSegLinetoVerticalRel, _SVGPathSeg16);
|
|
|
|
function _SVGPathSegLinetoVerticalRel(owningPathSegList, y) {
|
|
classCallCheck(this, _SVGPathSegLinetoVerticalRel);
|
|
|
|
var _this15 = possibleConstructorReturn(this, (_SVGPathSegLinetoVerticalRel.__proto__ || Object.getPrototypeOf(_SVGPathSegLinetoVerticalRel)).call(this, _SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL, 'v', owningPathSegList));
|
|
|
|
_this15._y = y;
|
|
return _this15;
|
|
}
|
|
|
|
createClass(_SVGPathSegLinetoVerticalRel, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegLinetoVerticalRel]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._y;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegLinetoVerticalRel(undefined, this._y);
|
|
}
|
|
}]);
|
|
return _SVGPathSegLinetoVerticalRel;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperty(_SVGPathSegLinetoVerticalRel.prototype, 'y', {
|
|
get: function get$$1() {
|
|
return this._y;
|
|
},
|
|
set: function set$$1(y) {
|
|
this._y = y;this._segmentChanged();
|
|
},
|
|
enumerable: true });
|
|
|
|
var _SVGPathSegCurvetoCubicSmoothAbs = function (_SVGPathSeg17) {
|
|
inherits(_SVGPathSegCurvetoCubicSmoothAbs, _SVGPathSeg17);
|
|
|
|
function _SVGPathSegCurvetoCubicSmoothAbs(owningPathSegList, x, y, x2, y2) {
|
|
classCallCheck(this, _SVGPathSegCurvetoCubicSmoothAbs);
|
|
|
|
var _this16 = possibleConstructorReturn(this, (_SVGPathSegCurvetoCubicSmoothAbs.__proto__ || Object.getPrototypeOf(_SVGPathSegCurvetoCubicSmoothAbs)).call(this, _SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS, 'S', owningPathSegList));
|
|
|
|
_this16._x = x;
|
|
_this16._y = y;
|
|
_this16._x2 = x2;
|
|
_this16._y2 = y2;
|
|
return _this16;
|
|
}
|
|
|
|
createClass(_SVGPathSegCurvetoCubicSmoothAbs, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegCurvetoCubicSmoothAbs]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegCurvetoCubicSmoothAbs(undefined, this._x, this._y, this._x2, this._y2);
|
|
}
|
|
}]);
|
|
return _SVGPathSegCurvetoCubicSmoothAbs;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperties(_SVGPathSegCurvetoCubicSmoothAbs.prototype, {
|
|
x: {
|
|
get: function get$$1() {
|
|
return this._x;
|
|
},
|
|
set: function set$$1(x) {
|
|
this._x = x;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y: {
|
|
get: function get$$1() {
|
|
return this._y;
|
|
},
|
|
set: function set$$1(y) {
|
|
this._y = y;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
x2: {
|
|
get: function get$$1() {
|
|
return this._x2;
|
|
},
|
|
set: function set$$1(x2) {
|
|
this._x2 = x2;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y2: {
|
|
get: function get$$1() {
|
|
return this._y2;
|
|
},
|
|
set: function set$$1(y2) {
|
|
this._y2 = y2;this._segmentChanged();
|
|
},
|
|
enumerable: true }
|
|
});
|
|
|
|
var _SVGPathSegCurvetoCubicSmoothRel = function (_SVGPathSeg18) {
|
|
inherits(_SVGPathSegCurvetoCubicSmoothRel, _SVGPathSeg18);
|
|
|
|
function _SVGPathSegCurvetoCubicSmoothRel(owningPathSegList, x, y, x2, y2) {
|
|
classCallCheck(this, _SVGPathSegCurvetoCubicSmoothRel);
|
|
|
|
var _this17 = possibleConstructorReturn(this, (_SVGPathSegCurvetoCubicSmoothRel.__proto__ || Object.getPrototypeOf(_SVGPathSegCurvetoCubicSmoothRel)).call(this, _SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL, 's', owningPathSegList));
|
|
|
|
_this17._x = x;
|
|
_this17._y = y;
|
|
_this17._x2 = x2;
|
|
_this17._y2 = y2;
|
|
return _this17;
|
|
}
|
|
|
|
createClass(_SVGPathSegCurvetoCubicSmoothRel, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegCurvetoCubicSmoothRel]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegCurvetoCubicSmoothRel(undefined, this._x, this._y, this._x2, this._y2);
|
|
}
|
|
}]);
|
|
return _SVGPathSegCurvetoCubicSmoothRel;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperties(_SVGPathSegCurvetoCubicSmoothRel.prototype, {
|
|
x: {
|
|
get: function get$$1() {
|
|
return this._x;
|
|
},
|
|
set: function set$$1(x) {
|
|
this._x = x;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y: {
|
|
get: function get$$1() {
|
|
return this._y;
|
|
},
|
|
set: function set$$1(y) {
|
|
this._y = y;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
x2: {
|
|
get: function get$$1() {
|
|
return this._x2;
|
|
},
|
|
set: function set$$1(x2) {
|
|
this._x2 = x2;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y2: {
|
|
get: function get$$1() {
|
|
return this._y2;
|
|
},
|
|
set: function set$$1(y2) {
|
|
this._y2 = y2;this._segmentChanged();
|
|
},
|
|
enumerable: true }
|
|
});
|
|
|
|
var _SVGPathSegCurvetoQuadraticSmoothAbs = function (_SVGPathSeg19) {
|
|
inherits(_SVGPathSegCurvetoQuadraticSmoothAbs, _SVGPathSeg19);
|
|
|
|
function _SVGPathSegCurvetoQuadraticSmoothAbs(owningPathSegList, x, y) {
|
|
classCallCheck(this, _SVGPathSegCurvetoQuadraticSmoothAbs);
|
|
|
|
var _this18 = possibleConstructorReturn(this, (_SVGPathSegCurvetoQuadraticSmoothAbs.__proto__ || Object.getPrototypeOf(_SVGPathSegCurvetoQuadraticSmoothAbs)).call(this, _SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS, 'T', owningPathSegList));
|
|
|
|
_this18._x = x;
|
|
_this18._y = y;
|
|
return _this18;
|
|
}
|
|
|
|
createClass(_SVGPathSegCurvetoQuadraticSmoothAbs, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegCurvetoQuadraticSmoothAbs]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegCurvetoQuadraticSmoothAbs(undefined, this._x, this._y);
|
|
}
|
|
}]);
|
|
return _SVGPathSegCurvetoQuadraticSmoothAbs;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperties(_SVGPathSegCurvetoQuadraticSmoothAbs.prototype, {
|
|
x: {
|
|
get: function get$$1() {
|
|
return this._x;
|
|
},
|
|
set: function set$$1(x) {
|
|
this._x = x;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y: {
|
|
get: function get$$1() {
|
|
return this._y;
|
|
},
|
|
set: function set$$1(y) {
|
|
this._y = y;this._segmentChanged();
|
|
},
|
|
enumerable: true }
|
|
});
|
|
|
|
var _SVGPathSegCurvetoQuadraticSmoothRel = function (_SVGPathSeg20) {
|
|
inherits(_SVGPathSegCurvetoQuadraticSmoothRel, _SVGPathSeg20);
|
|
|
|
function _SVGPathSegCurvetoQuadraticSmoothRel(owningPathSegList, x, y) {
|
|
classCallCheck(this, _SVGPathSegCurvetoQuadraticSmoothRel);
|
|
|
|
var _this19 = possibleConstructorReturn(this, (_SVGPathSegCurvetoQuadraticSmoothRel.__proto__ || Object.getPrototypeOf(_SVGPathSegCurvetoQuadraticSmoothRel)).call(this, _SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL, 't', owningPathSegList));
|
|
|
|
_this19._x = x;
|
|
_this19._y = y;
|
|
return _this19;
|
|
}
|
|
|
|
createClass(_SVGPathSegCurvetoQuadraticSmoothRel, [{
|
|
key: 'toString',
|
|
value: function toString() {
|
|
return '[object SVGPathSegCurvetoQuadraticSmoothRel]';
|
|
}
|
|
}, {
|
|
key: '_asPathString',
|
|
value: function _asPathString() {
|
|
return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y;
|
|
}
|
|
}, {
|
|
key: 'clone',
|
|
value: function clone() {
|
|
return new _SVGPathSegCurvetoQuadraticSmoothRel(undefined, this._x, this._y);
|
|
}
|
|
}]);
|
|
return _SVGPathSegCurvetoQuadraticSmoothRel;
|
|
}(_SVGPathSeg);
|
|
|
|
Object.defineProperties(_SVGPathSegCurvetoQuadraticSmoothRel.prototype, {
|
|
x: {
|
|
get: function get$$1() {
|
|
return this._x;
|
|
},
|
|
set: function set$$1(x) {
|
|
this._x = x;this._segmentChanged();
|
|
},
|
|
enumerable: true },
|
|
y: {
|
|
get: function get$$1() {
|
|
return this._y;
|
|
},
|
|
set: function set$$1(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.');
|
|
}
|
|
|
|
var measurementElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
measurementElement.setAttribute('d', this.getAttribute('d'));
|
|
var 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 SVGPathSegList.prototype)) {
|
|
// Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList
|
|
var _SVGPathSegList = function () {
|
|
function _SVGPathSegList(pathElement) {
|
|
classCallCheck(this, _SVGPathSegList);
|
|
|
|
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.
|
|
|
|
|
|
createClass(_SVGPathSegList, [{
|
|
key: '_checkPathSynchronizedToList',
|
|
value: function _checkPathSynchronizedToList() {
|
|
this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords());
|
|
}
|
|
}, {
|
|
key: '_updateListFromPathMutations',
|
|
value: function _updateListFromPathMutations(mutationRecords) {
|
|
if (!this._pathElement) {
|
|
return;
|
|
}
|
|
var hasPathMutations = false;
|
|
mutationRecords.forEach(function (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.
|
|
|
|
}, {
|
|
key: '_writeListToPath',
|
|
value: function _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.
|
|
|
|
}, {
|
|
key: 'segmentChanged',
|
|
value: function segmentChanged(pathSeg) {
|
|
this._writeListToPath();
|
|
}
|
|
}, {
|
|
key: 'clear',
|
|
value: function clear() {
|
|
this._checkPathSynchronizedToList();
|
|
|
|
this._list.forEach(function (pathSeg) {
|
|
pathSeg._owningPathSegList = null;
|
|
});
|
|
this._list = [];
|
|
this._writeListToPath();
|
|
}
|
|
}, {
|
|
key: 'initialize',
|
|
value: function initialize(newItem) {
|
|
this._checkPathSynchronizedToList();
|
|
|
|
this._list = [newItem];
|
|
newItem._owningPathSegList = this;
|
|
this._writeListToPath();
|
|
return newItem;
|
|
}
|
|
}, {
|
|
key: '_checkValidIndex',
|
|
value: function _checkValidIndex(index) {
|
|
if (isNaN(index) || index < 0 || index >= this.numberOfItems) {
|
|
throw new Error('INDEX_SIZE_ERR');
|
|
}
|
|
}
|
|
}, {
|
|
key: 'getItem',
|
|
value: function getItem(index) {
|
|
this._checkPathSynchronizedToList();
|
|
|
|
this._checkValidIndex(index);
|
|
return this._list[index];
|
|
}
|
|
}, {
|
|
key: 'insertItemBefore',
|
|
value: function 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;
|
|
}
|
|
}, {
|
|
key: 'replaceItem',
|
|
value: function 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;
|
|
}
|
|
}, {
|
|
key: 'removeItem',
|
|
value: function removeItem(index) {
|
|
this._checkPathSynchronizedToList();
|
|
|
|
this._checkValidIndex(index);
|
|
var item = this._list[index];
|
|
this._list.splice(index, 1);
|
|
this._writeListToPath();
|
|
return item;
|
|
}
|
|
}, {
|
|
key: 'appendItem',
|
|
value: function 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.
|
|
|
|
}, {
|
|
key: '_parsePath',
|
|
value: function _parsePath(string) {
|
|
if (!string || !string.length) {
|
|
return [];
|
|
}
|
|
|
|
var owningPathSegList = this;
|
|
|
|
var Builder = function () {
|
|
function Builder() {
|
|
classCallCheck(this, Builder);
|
|
|
|
this.pathSegList = [];
|
|
}
|
|
|
|
createClass(Builder, [{
|
|
key: 'appendSegment',
|
|
value: function appendSegment(pathSeg) {
|
|
this.pathSegList.push(pathSeg);
|
|
}
|
|
}]);
|
|
return Builder;
|
|
}();
|
|
|
|
var Source = function () {
|
|
function Source(string) {
|
|
classCallCheck(this, Source);
|
|
|
|
this._string = string;
|
|
this._currentIndex = 0;
|
|
this._endIndex = this._string.length;
|
|
this._previousCommand = SVGPathSeg.PATHSEG_UNKNOWN;
|
|
|
|
this._skipOptionalSpaces();
|
|
}
|
|
|
|
createClass(Source, [{
|
|
key: '_isCurrentSpace',
|
|
value: function _isCurrentSpace() {
|
|
var character = this._string[this._currentIndex];
|
|
return character <= ' ' && (character === ' ' || character === '\n' || character === '\t' || character === '\r' || character === '\f');
|
|
}
|
|
}, {
|
|
key: '_skipOptionalSpaces',
|
|
value: function _skipOptionalSpaces() {
|
|
while (this._currentIndex < this._endIndex && this._isCurrentSpace()) {
|
|
this._currentIndex++;
|
|
}
|
|
return this._currentIndex < this._endIndex;
|
|
}
|
|
}, {
|
|
key: '_skipOptionalSpacesOrDelimiter',
|
|
value: function _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;
|
|
}
|
|
}, {
|
|
key: 'hasMoreData',
|
|
value: function hasMoreData() {
|
|
return this._currentIndex < this._endIndex;
|
|
}
|
|
}, {
|
|
key: 'peekSegmentType',
|
|
value: function peekSegmentType() {
|
|
var lookahead = this._string[this._currentIndex];
|
|
return this._pathSegTypeFromChar(lookahead);
|
|
}
|
|
}, {
|
|
key: '_pathSegTypeFromChar',
|
|
value: function _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;
|
|
}
|
|
}
|
|
}, {
|
|
key: '_nextCommandHelper',
|
|
value: function _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;
|
|
}
|
|
}, {
|
|
key: 'initialCommandIsMoveTo',
|
|
value: function initialCommandIsMoveTo() {
|
|
// If the path is empty it is still valid, so return true.
|
|
if (!this.hasMoreData()) {
|
|
return true;
|
|
}
|
|
var 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
|
|
|
|
}, {
|
|
key: '_parseNumber',
|
|
value: function _parseNumber() {
|
|
var exponent = 0;
|
|
var integer = 0;
|
|
var frac = 1;
|
|
var decimal = 0;
|
|
var sign = 1;
|
|
var expsign = 1;
|
|
|
|
var 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.
|
|
var 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) {
|
|
var scanIntPartIndex = this._currentIndex - 1;
|
|
var 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++;
|
|
}
|
|
}
|
|
|
|
var number = integer + decimal;
|
|
number *= sign;
|
|
|
|
if (exponent) {
|
|
number *= Math.pow(10, expsign * exponent);
|
|
}
|
|
|
|
if (startIndex === this._currentIndex) {
|
|
return undefined;
|
|
}
|
|
|
|
this._skipOptionalSpacesOrDelimiter();
|
|
|
|
return number;
|
|
}
|
|
}, {
|
|
key: '_parseArcFlag',
|
|
value: function _parseArcFlag() {
|
|
if (this._currentIndex >= this._endIndex) {
|
|
return undefined;
|
|
}
|
|
var flag = false;
|
|
var flagChar = this._string.charAt(this._currentIndex++);
|
|
if (flagChar === '0') {
|
|
flag = false;
|
|
} else if (flagChar === '1') {
|
|
flag = true;
|
|
} else {
|
|
return undefined;
|
|
}
|
|
|
|
this._skipOptionalSpacesOrDelimiter();
|
|
return flag;
|
|
}
|
|
}, {
|
|
key: 'parseSegment',
|
|
value: function parseSegment() {
|
|
var lookahead = this._string[this._currentIndex];
|
|
var 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:
|
|
{
|
|
var _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:
|
|
{
|
|
var _points2 = { x1: this._parseNumber(), y1: this._parseNumber(), x2: this._parseNumber(), y2: this._parseNumber(), x: this._parseNumber(), y: this._parseNumber() };
|
|
return new SVGPathSegCurvetoCubicAbs(owningPathSegList, _points2.x, _points2.y, _points2.x1, _points2.y1, _points2.x2, _points2.y2);
|
|
}case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:
|
|
{
|
|
var _points3 = { x2: this._parseNumber(), y2: this._parseNumber(), x: this._parseNumber(), y: this._parseNumber() };
|
|
return new SVGPathSegCurvetoCubicSmoothRel(owningPathSegList, _points3.x, _points3.y, _points3.x2, _points3.y2);
|
|
}case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:
|
|
{
|
|
var _points4 = { x2: this._parseNumber(), y2: this._parseNumber(), x: this._parseNumber(), y: this._parseNumber() };
|
|
return new SVGPathSegCurvetoCubicSmoothAbs(owningPathSegList, _points4.x, _points4.y, _points4.x2, _points4.y2);
|
|
}case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:
|
|
{
|
|
var _points5 = { x1: this._parseNumber(), y1: this._parseNumber(), x: this._parseNumber(), y: this._parseNumber() };
|
|
return new SVGPathSegCurvetoQuadraticRel(owningPathSegList, _points5.x, _points5.y, _points5.x1, _points5.y1);
|
|
}case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:
|
|
var 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:
|
|
{
|
|
var _points6 = { 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, _points6.x, _points6.y, _points6.x1, _points6.y1, _points6.arcAngle, _points6.arcLarge, _points6.arcSweep);
|
|
}case SVGPathSeg.PATHSEG_ARC_ABS:
|
|
{
|
|
var _points7 = { 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, _points7.x, _points7.y, _points7.x1, _points7.y1, _points7.arcAngle, _points7.arcLarge, _points7.arcSweep);
|
|
}default:
|
|
throw new Error('Unknown path seg type.');
|
|
}
|
|
}
|
|
}]);
|
|
return Source;
|
|
}();
|
|
|
|
var builder = new Builder();
|
|
var source = new Source(string);
|
|
|
|
if (!source.initialCommandIsMoveTo()) {
|
|
return [];
|
|
}
|
|
while (source.hasMoreData()) {
|
|
var pathSeg = source.parseSegment();
|
|
if (!pathSeg) {
|
|
return [];
|
|
}
|
|
builder.appendSegment(pathSeg);
|
|
}
|
|
|
|
return builder.pathSegList;
|
|
}
|
|
}]);
|
|
return _SVGPathSegList;
|
|
}();
|
|
|
|
_SVGPathSegList.prototype.classname = 'SVGPathSegList';
|
|
|
|
Object.defineProperty(_SVGPathSegList.prototype, 'numberOfItems', {
|
|
get: function get$$1() {
|
|
this._checkPathSynchronizedToList();
|
|
return this._list.length;
|
|
},
|
|
|
|
enumerable: true
|
|
});
|
|
|
|
_SVGPathSegList._pathSegArrayAsString = function (pathSegArray) {
|
|
var string = '';
|
|
var first = true;
|
|
pathSegArray.forEach(function (pathSeg) {
|
|
if (first) {
|
|
first = false;
|
|
string += pathSeg._asPathString();
|
|
} else {
|
|
string += ' ' + pathSeg._asPathString();
|
|
}
|
|
});
|
|
return string;
|
|
};
|
|
|
|
// Add the pathSegList accessors to SVGPathElement.
|
|
// Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGAnimatedPathData
|
|
Object.defineProperties(SVGPathElement.prototype, {
|
|
pathSegList: {
|
|
get: function get$$1() {
|
|
if (!this._pathSegList) {
|
|
this._pathSegList = new _SVGPathSegList(this);
|
|
}
|
|
return this._pathSegList;
|
|
},
|
|
|
|
enumerable: true
|
|
},
|
|
// FIXME: The following are not implemented and simply return SVGPathElement.pathSegList.
|
|
normalizedPathSegList: {
|
|
get: function get$$1() {
|
|
return this.pathSegList;
|
|
},
|
|
enumerable: true },
|
|
animatedPathSegList: {
|
|
get: function get$$1() {
|
|
return this.pathSegList;
|
|
},
|
|
enumerable: true },
|
|
animatedNormalizedPathSegList: {
|
|
get: function get$$1() {
|
|
return this.pathSegList;
|
|
},
|
|
enumerable: true }
|
|
});
|
|
window.SVGPathSegList = _SVGPathSegList;
|
|
}
|
|
})();
|
|
|
|
/* globals jQuery */
|
|
|
|
var $ = jQuery;
|
|
|
|
var supportsSvg_ = function () {
|
|
return !!document.createElementNS && !!document.createElementNS(NS.SVG, 'svg').createSVGRect;
|
|
}();
|
|
|
|
var _navigator = navigator,
|
|
userAgent = _navigator.userAgent;
|
|
|
|
var svg = document.createElementNS(NS.SVG, 'svg');
|
|
|
|
// Note: Browser sniffing should only be used if no other detection method is possible
|
|
var isOpera_ = !!window.opera;
|
|
var isWebkit_ = userAgent.includes('AppleWebKit');
|
|
var isGecko_ = userAgent.includes('Gecko/');
|
|
var isIE_ = userAgent.includes('MSIE');
|
|
var isChrome_ = userAgent.includes('Chrome/');
|
|
var isWindows_ = userAgent.includes('Windows');
|
|
var isMac_ = userAgent.includes('Macintosh');
|
|
var isTouch_ = 'ontouchstart' in window;
|
|
|
|
var supportsSelectors_ = function () {
|
|
return !!svg.querySelector;
|
|
}();
|
|
|
|
var supportsXpath_ = function () {
|
|
return !!document.evaluate;
|
|
}();
|
|
|
|
// segList functions (for FF1.5 and 2.0)
|
|
var supportsPathReplaceItem_ = function () {
|
|
var path = document.createElementNS(NS.SVG, 'path');
|
|
path.setAttribute('d', 'M0,0 10,10');
|
|
var seglist = path.pathSegList;
|
|
var seg = path.createSVGPathSegLinetoAbs(5, 5);
|
|
try {
|
|
seglist.replaceItem(seg, 1);
|
|
return true;
|
|
} catch (err) {}
|
|
return false;
|
|
}();
|
|
|
|
var supportsPathInsertItemBefore_ = function () {
|
|
var path = document.createElementNS(NS.SVG, 'path');
|
|
path.setAttribute('d', 'M0,0 10,10');
|
|
var seglist = path.pathSegList;
|
|
var seg = path.createSVGPathSegLinetoAbs(5, 5);
|
|
try {
|
|
seglist.insertItemBefore(seg, 1);
|
|
return true;
|
|
} catch (err) {}
|
|
return false;
|
|
}();
|
|
|
|
// text character positioning (for IE9)
|
|
var supportsGoodTextCharPos_ = function () {
|
|
var svgroot = document.createElementNS(NS.SVG, 'svg');
|
|
var svgcontent = document.createElementNS(NS.SVG, 'svg');
|
|
document.documentElement.appendChild(svgroot);
|
|
svgcontent.setAttribute('x', 5);
|
|
svgroot.appendChild(svgcontent);
|
|
var text = document.createElementNS(NS.SVG, 'text');
|
|
text.textContent = 'a';
|
|
svgcontent.appendChild(text);
|
|
var pos = text.getStartPositionOfChar(0).x;
|
|
document.documentElement.removeChild(svgroot);
|
|
return pos === 0;
|
|
}();
|
|
|
|
var supportsPathBBox_ = function () {
|
|
var svgcontent = document.createElementNS(NS.SVG, 'svg');
|
|
document.documentElement.appendChild(svgcontent);
|
|
var path = document.createElementNS(NS.SVG, 'path');
|
|
path.setAttribute('d', 'M0,0 C0,0 10,10 10,0');
|
|
svgcontent.appendChild(path);
|
|
var bbox = path.getBBox();
|
|
document.documentElement.removeChild(svgcontent);
|
|
return bbox.height > 4 && bbox.height < 5;
|
|
}();
|
|
|
|
// Support for correct bbox sizing on groups with horizontal/vertical lines
|
|
var supportsHVLineContainerBBox_ = function () {
|
|
var svgcontent = document.createElementNS(NS.SVG, 'svg');
|
|
document.documentElement.appendChild(svgcontent);
|
|
var path = document.createElementNS(NS.SVG, 'path');
|
|
path.setAttribute('d', 'M0,0 10,0');
|
|
var path2 = document.createElementNS(NS.SVG, 'path');
|
|
path2.setAttribute('d', 'M5,0 15,0');
|
|
var g = document.createElementNS(NS.SVG, 'g');
|
|
g.appendChild(path);
|
|
g.appendChild(path2);
|
|
svgcontent.appendChild(g);
|
|
var bbox = g.getBBox();
|
|
document.documentElement.removeChild(svgcontent);
|
|
// Webkit gives 0, FF gives 10, Opera (correctly) gives 15
|
|
return bbox.width === 15;
|
|
}();
|
|
|
|
var supportsGoodDecimals_ = function () {
|
|
// Correct decimals on clone attributes (Opera < 10.5/win/non-en)
|
|
var rect = document.createElementNS(NS.SVG, 'rect');
|
|
rect.setAttribute('x', 0.1);
|
|
var crect = rect.cloneNode(false);
|
|
var 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 <a href="http://opera.com">latest version</a> in which the problems have been fixed.');
|
|
}
|
|
return retValue;
|
|
}();
|
|
|
|
var supportsNonScalingStroke_ = function () {
|
|
var rect = document.createElementNS(NS.SVG, 'rect');
|
|
rect.setAttribute('style', 'vector-effect:non-scaling-stroke');
|
|
return rect.style.vectorEffect === 'non-scaling-stroke';
|
|
}();
|
|
|
|
var supportsNativeSVGTransformLists_ = function () {
|
|
var rect = document.createElementNS(NS.SVG, 'rect');
|
|
var rxform = rect.transform.baseVal;
|
|
var t1 = svg.createSVGTransform();
|
|
rxform.appendItem(t1);
|
|
var r1 = rxform.getItem(0);
|
|
// Todo: Do frame-independent instance checking
|
|
return r1 instanceof SVGTransform && t1 instanceof SVGTransform && 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
|
|
|
|
var isOpera = function isOpera() {
|
|
return isOpera_;
|
|
};
|
|
var isWebkit = function isWebkit() {
|
|
return isWebkit_;
|
|
};
|
|
var isGecko = function isGecko() {
|
|
return isGecko_;
|
|
};
|
|
var isIE = function isIE() {
|
|
return isIE_;
|
|
};
|
|
var isChrome = function isChrome() {
|
|
return isChrome_;
|
|
};
|
|
var isMac = function isMac() {
|
|
return isMac_;
|
|
};
|
|
var isTouch = function isTouch() {
|
|
return isTouch_;
|
|
};
|
|
|
|
var supportsSelectors = function supportsSelectors() {
|
|
return supportsSelectors_;
|
|
};
|
|
var supportsXpath = function supportsXpath() {
|
|
return supportsXpath_;
|
|
};
|
|
|
|
var supportsPathReplaceItem = function supportsPathReplaceItem() {
|
|
return supportsPathReplaceItem_;
|
|
};
|
|
var supportsPathInsertItemBefore = function supportsPathInsertItemBefore() {
|
|
return supportsPathInsertItemBefore_;
|
|
};
|
|
var supportsPathBBox = function supportsPathBBox() {
|
|
return supportsPathBBox_;
|
|
};
|
|
var supportsHVLineContainerBBox = function supportsHVLineContainerBBox() {
|
|
return supportsHVLineContainerBBox_;
|
|
};
|
|
var supportsGoodTextCharPos = function supportsGoodTextCharPos() {
|
|
return supportsGoodTextCharPos_;
|
|
};
|
|
var supportsNonScalingStroke = function supportsNonScalingStroke() {
|
|
return supportsNonScalingStroke_;
|
|
};
|
|
var supportsNativeTransformLists = function supportsNativeTransformLists() {
|
|
return supportsNativeSVGTransformLists_;
|
|
};
|
|
|
|
/**
|
|
* A class to parse color values
|
|
* @author Stoyan Stefanov <sstoo@gmail.com>
|
|
* @link https://www.phpied.com/rgb-color-parser-in-javascript/
|
|
* @license MIT
|
|
*/
|
|
function RGBColor(colorString) {
|
|
this.ok = false;
|
|
|
|
// strip any leading #
|
|
if (colorString.charAt(0) === '#') {
|
|
// remove # if any
|
|
colorString = colorString.substr(1, 6);
|
|
}
|
|
|
|
colorString = colorString.replace(/ /g, '');
|
|
colorString = colorString.toLowerCase();
|
|
|
|
// before getting into regexps, try simple matches
|
|
// and overwrite the input
|
|
var simpleColors = {
|
|
aliceblue: 'f0f8ff',
|
|
antiquewhite: 'faebd7',
|
|
aqua: '00ffff',
|
|
aquamarine: '7fffd4',
|
|
azure: 'f0ffff',
|
|
beige: 'f5f5dc',
|
|
bisque: 'ffe4c4',
|
|
black: '000000',
|
|
blanchedalmond: 'ffebcd',
|
|
blue: '0000ff',
|
|
blueviolet: '8a2be2',
|
|
brown: 'a52a2a',
|
|
burlywood: 'deb887',
|
|
cadetblue: '5f9ea0',
|
|
chartreuse: '7fff00',
|
|
chocolate: 'd2691e',
|
|
coral: 'ff7f50',
|
|
cornflowerblue: '6495ed',
|
|
cornsilk: 'fff8dc',
|
|
crimson: 'dc143c',
|
|
cyan: '00ffff',
|
|
darkblue: '00008b',
|
|
darkcyan: '008b8b',
|
|
darkgoldenrod: 'b8860b',
|
|
darkgray: 'a9a9a9',
|
|
darkgreen: '006400',
|
|
darkkhaki: 'bdb76b',
|
|
darkmagenta: '8b008b',
|
|
darkolivegreen: '556b2f',
|
|
darkorange: 'ff8c00',
|
|
darkorchid: '9932cc',
|
|
darkred: '8b0000',
|
|
darksalmon: 'e9967a',
|
|
darkseagreen: '8fbc8f',
|
|
darkslateblue: '483d8b',
|
|
darkslategray: '2f4f4f',
|
|
darkturquoise: '00ced1',
|
|
darkviolet: '9400d3',
|
|
deeppink: 'ff1493',
|
|
deepskyblue: '00bfff',
|
|
dimgray: '696969',
|
|
dodgerblue: '1e90ff',
|
|
feldspar: 'd19275',
|
|
firebrick: 'b22222',
|
|
floralwhite: 'fffaf0',
|
|
forestgreen: '228b22',
|
|
fuchsia: 'ff00ff',
|
|
gainsboro: 'dcdcdc',
|
|
ghostwhite: 'f8f8ff',
|
|
gold: 'ffd700',
|
|
goldenrod: 'daa520',
|
|
gray: '808080',
|
|
green: '008000',
|
|
greenyellow: 'adff2f',
|
|
honeydew: 'f0fff0',
|
|
hotpink: 'ff69b4',
|
|
indianred: 'cd5c5c',
|
|
indigo: '4b0082',
|
|
ivory: 'fffff0',
|
|
khaki: 'f0e68c',
|
|
lavender: 'e6e6fa',
|
|
lavenderblush: 'fff0f5',
|
|
lawngreen: '7cfc00',
|
|
lemonchiffon: 'fffacd',
|
|
lightblue: 'add8e6',
|
|
lightcoral: 'f08080',
|
|
lightcyan: 'e0ffff',
|
|
lightgoldenrodyellow: 'fafad2',
|
|
lightgrey: 'd3d3d3',
|
|
lightgreen: '90ee90',
|
|
lightpink: 'ffb6c1',
|
|
lightsalmon: 'ffa07a',
|
|
lightseagreen: '20b2aa',
|
|
lightskyblue: '87cefa',
|
|
lightslateblue: '8470ff',
|
|
lightslategray: '778899',
|
|
lightsteelblue: 'b0c4de',
|
|
lightyellow: 'ffffe0',
|
|
lime: '00ff00',
|
|
limegreen: '32cd32',
|
|
linen: 'faf0e6',
|
|
magenta: 'ff00ff',
|
|
maroon: '800000',
|
|
mediumaquamarine: '66cdaa',
|
|
mediumblue: '0000cd',
|
|
mediumorchid: 'ba55d3',
|
|
mediumpurple: '9370d8',
|
|
mediumseagreen: '3cb371',
|
|
mediumslateblue: '7b68ee',
|
|
mediumspringgreen: '00fa9a',
|
|
mediumturquoise: '48d1cc',
|
|
mediumvioletred: 'c71585',
|
|
midnightblue: '191970',
|
|
mintcream: 'f5fffa',
|
|
mistyrose: 'ffe4e1',
|
|
moccasin: 'ffe4b5',
|
|
navajowhite: 'ffdead',
|
|
navy: '000080',
|
|
oldlace: 'fdf5e6',
|
|
olive: '808000',
|
|
olivedrab: '6b8e23',
|
|
orange: 'ffa500',
|
|
orangered: 'ff4500',
|
|
orchid: 'da70d6',
|
|
palegoldenrod: 'eee8aa',
|
|
palegreen: '98fb98',
|
|
paleturquoise: 'afeeee',
|
|
palevioletred: 'd87093',
|
|
papayawhip: 'ffefd5',
|
|
peachpuff: 'ffdab9',
|
|
peru: 'cd853f',
|
|
pink: 'ffc0cb',
|
|
plum: 'dda0dd',
|
|
powderblue: 'b0e0e6',
|
|
purple: '800080',
|
|
red: 'ff0000',
|
|
rosybrown: 'bc8f8f',
|
|
royalblue: '4169e1',
|
|
saddlebrown: '8b4513',
|
|
salmon: 'fa8072',
|
|
sandybrown: 'f4a460',
|
|
seagreen: '2e8b57',
|
|
seashell: 'fff5ee',
|
|
sienna: 'a0522d',
|
|
silver: 'c0c0c0',
|
|
skyblue: '87ceeb',
|
|
slateblue: '6a5acd',
|
|
slategray: '708090',
|
|
snow: 'fffafa',
|
|
springgreen: '00ff7f',
|
|
steelblue: '4682b4',
|
|
tan: 'd2b48c',
|
|
teal: '008080',
|
|
thistle: 'd8bfd8',
|
|
tomato: 'ff6347',
|
|
turquoise: '40e0d0',
|
|
violet: 'ee82ee',
|
|
violetred: 'd02090',
|
|
wheat: 'f5deb3',
|
|
white: 'ffffff',
|
|
whitesmoke: 'f5f5f5',
|
|
yellow: 'ffff00',
|
|
yellowgreen: '9acd32'
|
|
};
|
|
for (var key in simpleColors) {
|
|
if (simpleColors.hasOwnProperty(key)) {
|
|
if (colorString === key) {
|
|
colorString = simpleColors[key];
|
|
}
|
|
}
|
|
}
|
|
// emd of simple type-in colors
|
|
|
|
// array of color definition objects
|
|
var colorDefs = [{
|
|
re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
|
|
example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'],
|
|
process: function process(bits) {
|
|
return [parseInt(bits[1], 10), parseInt(bits[2], 10), parseInt(bits[3], 10)];
|
|
}
|
|
}, {
|
|
re: /^(\w{2})(\w{2})(\w{2})$/,
|
|
example: ['#00ff00', '336699'],
|
|
process: function process(bits) {
|
|
return [parseInt(bits[1], 16), parseInt(bits[2], 16), parseInt(bits[3], 16)];
|
|
}
|
|
}, {
|
|
re: /^(\w{1})(\w{1})(\w{1})$/,
|
|
example: ['#fb0', 'f0f'],
|
|
process: function process(bits) {
|
|
return [parseInt(bits[1] + bits[1], 16), parseInt(bits[2] + bits[2], 16), parseInt(bits[3] + bits[3], 16)];
|
|
}
|
|
}];
|
|
|
|
// search through the definitions to find a match
|
|
for (var i = 0; i < colorDefs.length; i++) {
|
|
var re = colorDefs[i].re;
|
|
|
|
var processor = colorDefs[i].process;
|
|
var bits = re.exec(colorString);
|
|
if (bits) {
|
|
var channels = processor(bits);
|
|
this.r = channels[0];
|
|
this.g = channels[1];
|
|
this.b = channels[2];
|
|
this.ok = true;
|
|
}
|
|
}
|
|
|
|
// validate/cleanup values
|
|
this.r = this.r < 0 || isNaN(this.r) ? 0 : this.r > 255 ? 255 : this.r;
|
|
this.g = this.g < 0 || isNaN(this.g) ? 0 : this.g > 255 ? 255 : this.g;
|
|
this.b = this.b < 0 || isNaN(this.b) ? 0 : this.b > 255 ? 255 : this.b;
|
|
|
|
// some getters
|
|
this.toRGB = function () {
|
|
return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
|
|
};
|
|
this.toHex = function () {
|
|
var r = this.r.toString(16);
|
|
var g = this.g.toString(16);
|
|
var b = this.b.toString(16);
|
|
if (r.length === 1) {
|
|
r = '0' + r;
|
|
}
|
|
if (g.length === 1) {
|
|
g = '0' + g;
|
|
}
|
|
if (b.length === 1) {
|
|
b = '0' + b;
|
|
}
|
|
return '#' + r + g + b;
|
|
};
|
|
|
|
// help
|
|
this.getHelpXML = function () {
|
|
var examples = [];
|
|
// add regexps
|
|
for (var _i = 0; _i < colorDefs.length; _i++) {
|
|
var example = colorDefs[_i].example;
|
|
|
|
for (var j = 0; j < example.length; j++) {
|
|
examples[examples.length] = example[j];
|
|
}
|
|
}
|
|
// add type-in colors
|
|
for (var sc in simpleColors) {
|
|
if (simpleColors.hasOwnProperty(sc)) {
|
|
examples[examples.length] = sc;
|
|
}
|
|
}
|
|
|
|
var xml = document.createElement('ul');
|
|
xml.setAttribute('id', 'rgbcolor-examples');
|
|
for (var _i2 = 0; _i2 < examples.length; _i2++) {
|
|
try {
|
|
var listItem = document.createElement('li');
|
|
var listColor = new RGBColor(examples[_i2]);
|
|
var exampleDiv = document.createElement('div');
|
|
exampleDiv.style.cssText = 'margin: 3px; ' + 'border: 1px solid black; ' + 'background:' + listColor.toHex() + '; ' + 'color:' + listColor.toHex();
|
|
exampleDiv.appendChild(document.createTextNode('test'));
|
|
var listItemValue = document.createTextNode(' ' + examples[_i2] + ' -> ' + listColor.toRGB() + ' -> ' + listColor.toHex());
|
|
listItem.appendChild(exampleDiv);
|
|
listItem.appendChild(listItemValue);
|
|
xml.appendChild(listItem);
|
|
} catch (e) {}
|
|
}
|
|
return xml;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* jQuery module to work with SVG.
|
|
*
|
|
* Licensed under the MIT License
|
|
*
|
|
*/
|
|
|
|
// This fixes $(...).attr() to work as expected with SVG elements.
|
|
// Does not currently use *AttributeNS() since we rarely need that.
|
|
|
|
// See 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 jqPluginSVG ($) {
|
|
var proxied = $.fn.attr,
|
|
svgns = 'http://www.w3.org/2000/svg';
|
|
$.fn.attr = function (key, value) {
|
|
var len = this.length;
|
|
if (!len) {
|
|
return proxied.apply(this, arguments);
|
|
}
|
|
for (var i = 0; i < len; ++i) {
|
|
var 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
|
|
var obj = {};
|
|
var j = key.length;
|
|
|
|
while (j--) {
|
|
var aname = key[j];
|
|
var 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 === 'undefined' ? 'undefined' : _typeof(key)) === 'object') {
|
|
// Setting attributes from object
|
|
for (var v in key) {
|
|
elem.setAttribute(v, key[v]);
|
|
}
|
|
// Getting attribute
|
|
} else {
|
|
var _attr = elem.getAttribute(key);
|
|
if (_attr || _attr === '0') {
|
|
_attr = isNaN(_attr) ? _attr : _attr - 0;
|
|
}
|
|
return _attr;
|
|
}
|
|
} else {
|
|
return proxied.apply(this, arguments);
|
|
}
|
|
}
|
|
return this;
|
|
};
|
|
return $;
|
|
}
|
|
|
|
// MIT License
|
|
// From: https://github.com/uupaa/dynamic-import-polyfill/blob/master/importModule.js
|
|
|
|
function toAbsoluteURL(url) {
|
|
var a = document.createElement("a");
|
|
a.setAttribute("href", url); // <a href="hoge.html">
|
|
return a.cloneNode(false).href; // -> "http://example.com/hoge.html"
|
|
}
|
|
|
|
// My own addition
|
|
function importScript(url) {
|
|
return new Promise(function (resolve, reject) {
|
|
var script = document.createElement("script");
|
|
var destructor = function destructor() {
|
|
script.onerror = null;
|
|
script.onload = null;
|
|
script.remove();
|
|
script.src = "";
|
|
};
|
|
script.defer = "defer";
|
|
script.onerror = function () {
|
|
reject(new Error("Failed to import: " + url));
|
|
destructor();
|
|
};
|
|
script.onload = function () {
|
|
resolve();
|
|
destructor();
|
|
};
|
|
script.src = url;
|
|
|
|
document.head.appendChild(script);
|
|
});
|
|
}
|
|
|
|
function importModule(url) {
|
|
return new Promise(function (resolve, reject) {
|
|
var vector = "$importModule$" + Math.random().toString(32).slice(2);
|
|
var script = document.createElement("script");
|
|
var destructor = function destructor() {
|
|
delete window[vector];
|
|
script.onerror = null;
|
|
script.onload = null;
|
|
script.remove();
|
|
URL.revokeObjectURL(script.src);
|
|
script.src = "";
|
|
};
|
|
script.defer = "defer";
|
|
script.type = "module";
|
|
script.onerror = function () {
|
|
reject(new Error("Failed to import: " + url));
|
|
destructor();
|
|
};
|
|
script.onload = function () {
|
|
resolve(window[vector]);
|
|
destructor();
|
|
};
|
|
var absURL = toAbsoluteURL(url);
|
|
var loader = "import * as m from \"" + absURL + "\"; window." + vector + " = m;"; // export Module
|
|
var blob = new Blob([loader], { type: "text/javascript" });
|
|
script.src = URL.createObjectURL(blob);
|
|
|
|
document.head.appendChild(script);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* SVGTransformList
|
|
*
|
|
* Licensed under the MIT License
|
|
*
|
|
* Copyright(c) 2010 Alexis Deveria
|
|
* Copyright(c) 2010 Jeff Schiller
|
|
*/
|
|
|
|
var svgroot = document.createElementNS(NS.SVG, 'svg');
|
|
|
|
// Helper function.
|
|
function transformToString(xform) {
|
|
var m = xform.matrix;
|
|
var 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
|
|
var cx = 0;
|
|
var cy = 0;
|
|
// this prevents divide by zero
|
|
if (xform.angle !== 0) {
|
|
var 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.
|
|
*/
|
|
var listMap_ = {};
|
|
|
|
// **************************************************************************************
|
|
// 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.
|
|
//
|
|
// interface SVGEditTransformList {
|
|
// attribute unsigned long numberOfItems;
|
|
// void clear ( )
|
|
// SVGTransform initialize ( in SVGTransform newItem )
|
|
// SVGTransform getItem ( in unsigned long index ) (DOES NOT THROW DOMException, INDEX_SIZE_ERR)
|
|
// SVGTransform insertItemBefore ( in SVGTransform newItem, in unsigned long index ) (DOES NOT THROW DOMException, INDEX_SIZE_ERR)
|
|
// SVGTransform replaceItem ( in SVGTransform newItem, in unsigned long index ) (DOES NOT THROW DOMException, INDEX_SIZE_ERR)
|
|
// SVGTransform removeItem ( in unsigned long index ) (DOES NOT THROW DOMException, INDEX_SIZE_ERR)
|
|
// SVGTransform appendItem ( in SVGTransform newItem )
|
|
// NOT IMPLEMENTED: SVGTransform createSVGTransformFromMatrix ( in SVGMatrix matrix );
|
|
// NOT IMPLEMENTED: SVGTransform consolidate ( );
|
|
// }
|
|
// **************************************************************************************
|
|
var SVGTransformList = function SVGTransformList(elem) {
|
|
classCallCheck(this, SVGTransformList);
|
|
|
|
this._elem = elem || null;
|
|
this._xforms = [];
|
|
// TODO: how do we capture the undo-ability in the changed transform list?
|
|
this._update = function () {
|
|
var tstr = '';
|
|
/* const concatMatrix = */svgroot.createSVGMatrix();
|
|
for (var i = 0; i < this.numberOfItems; ++i) {
|
|
var xform = this._list.getItem(i);
|
|
tstr += transformToString(xform) + ' ';
|
|
}
|
|
this._elem.setAttribute('transform', tstr);
|
|
};
|
|
this._list = this;
|
|
this._init = function () {
|
|
var _this = this;
|
|
|
|
// Transform attribute parser
|
|
var str = this._elem.getAttribute('transform');
|
|
if (!str) {
|
|
return;
|
|
}
|
|
|
|
// TODO: Add skew support in future
|
|
var re = /\s*((scale|matrix|rotate|translate)\s*\(.*?\))\s*,?\s*/;
|
|
var m = true;
|
|
while (m) {
|
|
m = str.match(re);
|
|
str = str.replace(re, '');
|
|
if (m && m[1]) {
|
|
(function () {
|
|
var x = m[1];
|
|
var bits = x.split(/\s*\(/);
|
|
var name = bits[0];
|
|
var valBits = bits[1].match(/\s*(.*?)\s*\)/);
|
|
valBits[1] = valBits[1].replace(/(\d)-/g, '$1 -');
|
|
var valArr = valBits[1].split(/[, ]+/);
|
|
var letters = 'abcdef'.split('');
|
|
var mtx = svgroot.createSVGMatrix();
|
|
Object.values(valArr).forEach(function (item, i) {
|
|
valArr[i] = parseFloat(item);
|
|
if (name === 'matrix') {
|
|
mtx[letters[i]] = valArr[i];
|
|
}
|
|
});
|
|
var xform = svgroot.createSVGTransform();
|
|
var fname = 'set' + name.charAt(0).toUpperCase() + name.slice(1);
|
|
var 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].apply(xform, 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.
|
|
var found = false;
|
|
for (var id in listMap_) {
|
|
var tl = listMap_[id];
|
|
for (var i = 0, len = tl._xforms.length; i < len; ++i) {
|
|
if (tl._xforms[i] === item) {
|
|
found = true;
|
|
tl.removeItem(i);
|
|
break;
|
|
}
|
|
}
|
|
if (found) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
this.numberOfItems = 0;
|
|
this.clear = function () {
|
|
this.numberOfItems = 0;
|
|
this._xforms = [];
|
|
};
|
|
|
|
this.initialize = function (newItem) {
|
|
this.numberOfItems = 1;
|
|
this._removeFromOtherLists(newItem);
|
|
this._xforms = [newItem];
|
|
};
|
|
|
|
this.getItem = function (index) {
|
|
if (index < this.numberOfItems && index >= 0) {
|
|
return this._xforms[index];
|
|
}
|
|
var err = new Error('DOMException with code=INDEX_SIZE_ERR');
|
|
err.code = 1;
|
|
throw err;
|
|
};
|
|
|
|
this.insertItemBefore = function (newItem, index) {
|
|
var retValue = null;
|
|
if (index >= 0) {
|
|
if (index < this.numberOfItems) {
|
|
this._removeFromOtherLists(newItem);
|
|
var newxforms = new Array(this.numberOfItems + 1);
|
|
// TODO: use array copying and slicing
|
|
var i = void 0;
|
|
for (i = 0; i < index; ++i) {
|
|
newxforms[i] = this._xforms[i];
|
|
}
|
|
newxforms[i] = newItem;
|
|
for (var 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;
|
|
};
|
|
|
|
this.replaceItem = function (newItem, index) {
|
|
var retValue = null;
|
|
if (index < this.numberOfItems && index >= 0) {
|
|
this._removeFromOtherLists(newItem);
|
|
this._xforms[index] = newItem;
|
|
retValue = newItem;
|
|
this._list._update();
|
|
}
|
|
return retValue;
|
|
};
|
|
|
|
this.removeItem = function (index) {
|
|
if (index < this.numberOfItems && index >= 0) {
|
|
var retValue = this._xforms[index];
|
|
var newxforms = new Array(this.numberOfItems - 1);
|
|
var i = void 0;
|
|
for (i = 0; i < index; ++i) {
|
|
newxforms[i] = this._xforms[i];
|
|
}
|
|
for (var j = i; j < this.numberOfItems - 1; ++j, ++i) {
|
|
newxforms[j] = this._xforms[i + 1];
|
|
}
|
|
this.numberOfItems--;
|
|
this._xforms = newxforms;
|
|
this._list._update();
|
|
return retValue;
|
|
}
|
|
var err = new Error('DOMException with code=INDEX_SIZE_ERR');
|
|
err.code = 1;
|
|
throw err;
|
|
};
|
|
|
|
this.appendItem = function (newItem) {
|
|
this._removeFromOtherLists(newItem);
|
|
this._xforms.push(newItem);
|
|
this.numberOfItems++;
|
|
this._list._update();
|
|
return newItem;
|
|
};
|
|
};
|
|
|
|
var resetListMap = function resetListMap() {
|
|
listMap_ = {};
|
|
};
|
|
|
|
/**
|
|
* Removes transforms of the given element from the map.
|
|
* Parameters:
|
|
* elem - a DOM Element
|
|
*/
|
|
var removeElementFromListMap = function removeElementFromListMap(elem) {
|
|
if (elem.id && listMap_[elem.id]) {
|
|
delete listMap_[elem.id];
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Returns an object that behaves like a SVGTransformList for the given DOM element
|
|
* @param elem - DOM element to get a transformlist from
|
|
*/
|
|
var getTransformList = function getTransformList(elem) {
|
|
if (!supportsNativeTransformLists()) {
|
|
var id = elem.id || 'temp';
|
|
var 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;
|
|
};
|
|
|
|
/**
|
|
* Package: svgedit.units
|
|
*
|
|
* Licensed under the MIT License
|
|
*
|
|
* Copyright(c) 2010 Alexis Deveria
|
|
* Copyright(c) 2010 Jeff Schiller
|
|
*/
|
|
|
|
var wAttrs = ['x', 'x1', 'cx', 'rx', 'width'];
|
|
var hAttrs = ['y', 'y1', 'cy', 'ry', 'height'];
|
|
var unitAttrs = ['r', 'radius'].concat(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.
|
|
var elementContainer_ = void 0;
|
|
|
|
/**
|
|
* Stores mapping of unit type to user coordinates.
|
|
*/
|
|
var typeMap_ = {};
|
|
|
|
/**
|
|
* ElementContainer interface
|
|
*
|
|
* function getBaseUnit() - Returns a string of the base unit type of the container ('em')
|
|
* function getElement() - Returns an element in the container given an id
|
|
* function getHeight() - Returns the container's height
|
|
* function getWidth() - Returns the container's width
|
|
* function getRoundDigits() - Returns the number of digits number should be rounded to
|
|
*/
|
|
|
|
/**
|
|
* Initializes this module.
|
|
*
|
|
* @param elementContainer - An object implementing the ElementContainer interface.
|
|
*/
|
|
var init = function init(elementContainer) {
|
|
elementContainer_ = elementContainer;
|
|
|
|
// Get correct em/ex values by creating a temporary SVG.
|
|
var svg = document.createElementNS(NS.SVG, 'svg');
|
|
document.body.appendChild(svg);
|
|
var rect = document.createElementNS(NS.SVG, 'rect');
|
|
rect.setAttribute('width', '1em');
|
|
rect.setAttribute('height', '1ex');
|
|
rect.setAttribute('x', '1in');
|
|
svg.appendChild(rect);
|
|
var bb = rect.getBBox();
|
|
document.body.removeChild(svg);
|
|
|
|
var 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
|
|
*/
|
|
|
|
/**
|
|
* @returns The unit object with values for each unit
|
|
*/
|
|
var getTypeMap = function getTypeMap() {
|
|
return typeMap_;
|
|
};
|
|
|
|
/**
|
|
* Rounds a given value to a float with number of digits defined in save_options
|
|
*
|
|
* @param val - The value as a String, Number or Array of two numbers to be rounded
|
|
*
|
|
* @returns
|
|
* If a string/number was given, returns a Float. If an array, return a string
|
|
* with comma-separated floats
|
|
*/
|
|
var shortFloat = function shortFloat(val) {
|
|
var digits = elementContainer_.getRoundDigits();
|
|
if (!isNaN(val)) {
|
|
// Note that + converts to Number
|
|
return +(+val).toFixed(digits);
|
|
}
|
|
if (Array.isArray(val)) {
|
|
return shortFloat(val[0]) + ',' + shortFloat(val[1]);
|
|
}
|
|
return parseFloat(val).toFixed(digits) - 0;
|
|
};
|
|
|
|
/**
|
|
* Converts the number to given unit or baseUnit
|
|
* @returns {number}
|
|
*/
|
|
var convertUnit = function convertUnit(val, unit) {
|
|
unit = unit || elementContainer_.getBaseUnit();
|
|
// baseVal.convertToSpecifiedUnits(unitNumMap[unit]);
|
|
// const val = baseVal.valueInSpecifiedUnits;
|
|
// baseVal.convertToSpecifiedUnits(1);
|
|
return shortFloat(val / typeMap_[unit]);
|
|
};
|
|
|
|
/**
|
|
* Sets an element's attribute based on the unit in its current value.
|
|
*
|
|
* @param elem - DOM element to be changed
|
|
* @param attr - String with the name of the attribute associated with the value
|
|
* @param val - String with the attribute value to convert
|
|
*/
|
|
var setUnitAttr = function setUnitAttr(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
|
|
*
|
|
* @param attr - String with the name of the attribute associated with the value
|
|
* @param val - String with the attribute value to convert
|
|
*/
|
|
var convertToNum = function convertToNum(attr, val) {
|
|
// Return a number if that's what it already is
|
|
if (!isNaN(val)) {
|
|
return val - 0;
|
|
}
|
|
if (val.substr(-1) === '%') {
|
|
// Deal with percentage, depends on attribute
|
|
var _num = val.substr(0, val.length - 1) / 100;
|
|
var width = elementContainer_.getWidth();
|
|
var 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);
|
|
}
|
|
var unit = val.substr(-2);
|
|
var 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
|
|
* @param attr - String with the name of the attribute associated with the value
|
|
* @param val - String with the attribute value to check
|
|
*/
|
|
var isValidUnit = function isValidUnit(attr, val, selectedElement) {
|
|
var valid = false;
|
|
if (unitAttrs.includes(attr)) {
|
|
// True if it's just a number
|
|
if (!isNaN(val)) {
|
|
valid = true;
|
|
} else {
|
|
// Not a number, check if it has a valid unit
|
|
val = val.toLowerCase();
|
|
Object.keys(typeMap_).forEach(function (unit) {
|
|
if (valid) {
|
|
return;
|
|
}
|
|
var re = new RegExp('^-?[\\d\\.]+' + unit + '$');
|
|
if (re.test(val)) {
|
|
valid = true;
|
|
}
|
|
});
|
|
}
|
|
} else 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.
|
|
|
|
var 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 {
|
|
var elem = elementContainer_.getElement(val);
|
|
result = elem == null || elem === selectedElement;
|
|
} catch (e) {}
|
|
return result;
|
|
}
|
|
valid = true;
|
|
|
|
return valid;
|
|
};
|
|
|
|
/**
|
|
* Package: svedit.history
|
|
*
|
|
* Licensed under the MIT License
|
|
*
|
|
* Copyright(c) 2010 Jeff Schiller
|
|
*/
|
|
|
|
/**
|
|
* Group: Undo/Redo history management
|
|
*/
|
|
var HistoryEventTypes = {
|
|
BEFORE_APPLY: 'before_apply',
|
|
AFTER_APPLY: 'after_apply',
|
|
BEFORE_UNAPPLY: 'before_unapply',
|
|
AFTER_UNAPPLY: 'after_unapply'
|
|
};
|
|
|
|
// const removedElements = {};
|
|
|
|
/**
|
|
* An interface that all command objects must implement.
|
|
* @typedef {Object} svgedit.history.HistoryCommand
|
|
* void apply(svgedit.history.HistoryEventHandler);
|
|
* void unapply(svgedit.history.HistoryEventHandler);
|
|
* Element[] elements();
|
|
* String getText();
|
|
*
|
|
* static String type();
|
|
* }
|
|
*
|
|
* Interface: svgedit.history.HistoryEventHandler
|
|
* An interface for objects that will handle history events.
|
|
*
|
|
* interface svgedit.history.HistoryEventHandler {
|
|
* void handleHistoryEvent(eventType, command);
|
|
* }
|
|
*
|
|
* eventType is a string conforming to one of the HistoryEvent types.
|
|
* command is an object fulfilling the HistoryCommand interface.
|
|
*/
|
|
|
|
/**
|
|
* @class svgedit.history.MoveElementCommand
|
|
* @implements svgedit.history.HistoryCommand
|
|
* History command for an element that had its DOM position changed
|
|
* @param {Element} elem - The DOM element that was moved
|
|
* @param {Element} oldNextSibling - The element's next sibling before it was moved
|
|
* @param {Element} oldParent - The element's parent before it was moved
|
|
* @param {string} [text] - An optional string visible to user related to this change
|
|
*/
|
|
var MoveElementCommand = function () {
|
|
function MoveElementCommand(elem, oldNextSibling, oldParent, text) {
|
|
classCallCheck(this, MoveElementCommand);
|
|
|
|
this.elem = elem;
|
|
this.text = text ? 'Move ' + elem.tagName + ' to ' + text : 'Move ' + elem.tagName;
|
|
this.oldNextSibling = oldNextSibling;
|
|
this.oldParent = oldParent;
|
|
this.newNextSibling = elem.nextSibling;
|
|
this.newParent = elem.parentNode;
|
|
}
|
|
|
|
createClass(MoveElementCommand, [{
|
|
key: 'getText',
|
|
value: function getText() {
|
|
return this.text;
|
|
}
|
|
}, {
|
|
key: 'type',
|
|
value: function type() {
|
|
return 'svgedit.history.MoveElementCommand';
|
|
}
|
|
|
|
/**
|
|
* Re-positions the element
|
|
* @param {{handleHistoryEvent: function}} handler
|
|
*/
|
|
|
|
}, {
|
|
key: 'apply',
|
|
value: function apply(handler) {
|
|
// TODO(codedread): Refactor this common event code into a base HistoryCommand class.
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.BEFORE_APPLY, this);
|
|
}
|
|
|
|
this.elem = this.newParent.insertBefore(this.elem, this.newNextSibling);
|
|
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.AFTER_APPLY, this);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Positions the element back to its original location
|
|
* @param {{handleHistoryEvent: function}} handler
|
|
*/
|
|
|
|
}, {
|
|
key: 'unapply',
|
|
value: function unapply(handler) {
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.BEFORE_UNAPPLY, this);
|
|
}
|
|
|
|
this.elem = this.oldParent.insertBefore(this.elem, this.oldNextSibling);
|
|
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.AFTER_UNAPPLY, this);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @returns {Array} Array with element associated with this command
|
|
*/
|
|
|
|
}, {
|
|
key: 'elements',
|
|
value: function elements() {
|
|
return [this.elem];
|
|
}
|
|
}]);
|
|
return MoveElementCommand;
|
|
}();
|
|
MoveElementCommand.type = MoveElementCommand.prototype.type;
|
|
|
|
/**
|
|
* @implements svgedit.history.HistoryCommand
|
|
* History command for an element that was added to the DOM
|
|
*
|
|
* @param elem - The newly added DOM element
|
|
* @param text - An optional string visible to user related to this change
|
|
*/
|
|
var InsertElementCommand = function () {
|
|
function InsertElementCommand(elem, text) {
|
|
classCallCheck(this, InsertElementCommand);
|
|
|
|
this.elem = elem;
|
|
this.text = text || 'Create ' + elem.tagName;
|
|
this.parent = elem.parentNode;
|
|
this.nextSibling = this.elem.nextSibling;
|
|
}
|
|
|
|
createClass(InsertElementCommand, [{
|
|
key: 'type',
|
|
value: function type() {
|
|
return 'svgedit.history.InsertElementCommand';
|
|
}
|
|
}, {
|
|
key: 'getText',
|
|
value: function getText() {
|
|
return this.text;
|
|
}
|
|
|
|
// Re-Inserts the new element
|
|
|
|
}, {
|
|
key: 'apply',
|
|
value: function apply(handler) {
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.BEFORE_APPLY, this);
|
|
}
|
|
|
|
this.elem = this.parent.insertBefore(this.elem, this.nextSibling);
|
|
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.AFTER_APPLY, this);
|
|
}
|
|
}
|
|
|
|
// Removes the element
|
|
|
|
}, {
|
|
key: 'unapply',
|
|
value: function unapply(handler) {
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.BEFORE_UNAPPLY, this);
|
|
}
|
|
|
|
this.parent = this.elem.parentNode;
|
|
this.elem = this.elem.parentNode.removeChild(this.elem);
|
|
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.AFTER_UNAPPLY, this);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @returns {Array} Array with element associated with this command
|
|
*/
|
|
|
|
}, {
|
|
key: 'elements',
|
|
value: function elements() {
|
|
return [this.elem];
|
|
}
|
|
}]);
|
|
return InsertElementCommand;
|
|
}();
|
|
InsertElementCommand.type = InsertElementCommand.prototype.type;
|
|
|
|
/**
|
|
* @implements svgedit.history.HistoryCommand
|
|
* History command for an element removed from the DOM
|
|
* @param elem - The removed DOM element
|
|
* @param oldNextSibling - The DOM element's nextSibling when it was in the DOM
|
|
* @param oldParent - The DOM element's parent
|
|
* @param {String} [text] - An optional string visible to user related to this change
|
|
*/
|
|
var RemoveElementCommand = function () {
|
|
function RemoveElementCommand(elem, oldNextSibling, oldParent, text) {
|
|
classCallCheck(this, RemoveElementCommand);
|
|
|
|
this.elem = elem;
|
|
this.text = text || 'Delete ' + elem.tagName;
|
|
this.nextSibling = oldNextSibling;
|
|
this.parent = oldParent;
|
|
|
|
// special hack for webkit: remove this element's entry in the svgTransformLists map
|
|
removeElementFromListMap(elem);
|
|
}
|
|
|
|
createClass(RemoveElementCommand, [{
|
|
key: 'type',
|
|
value: function type() {
|
|
return 'svgedit.history.RemoveElementCommand';
|
|
}
|
|
}, {
|
|
key: 'getText',
|
|
value: function getText() {
|
|
return this.text;
|
|
}
|
|
|
|
// Re-removes the new element
|
|
|
|
}, {
|
|
key: 'apply',
|
|
value: function apply(handler) {
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.BEFORE_APPLY, this);
|
|
}
|
|
|
|
removeElementFromListMap(this.elem);
|
|
this.parent = this.elem.parentNode;
|
|
this.elem = this.parent.removeChild(this.elem);
|
|
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.AFTER_APPLY, this);
|
|
}
|
|
}
|
|
|
|
// Re-adds the new element
|
|
|
|
}, {
|
|
key: 'unapply',
|
|
value: function unapply(handler) {
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.BEFORE_UNAPPLY, this);
|
|
}
|
|
|
|
removeElementFromListMap(this.elem);
|
|
if (this.nextSibling == null) {
|
|
if (window.console) {
|
|
console.log('Error: reference element was lost');
|
|
}
|
|
}
|
|
this.parent.insertBefore(this.elem, this.nextSibling);
|
|
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.AFTER_UNAPPLY, this);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @returns {Array} Array with element associated with this command
|
|
*/
|
|
|
|
}, {
|
|
key: 'elements',
|
|
value: function elements() {
|
|
return [this.elem];
|
|
}
|
|
}]);
|
|
return RemoveElementCommand;
|
|
}();
|
|
RemoveElementCommand.type = RemoveElementCommand.prototype.type;
|
|
|
|
/**
|
|
* @implements svgedit.history.HistoryCommand
|
|
* History command to make a change to an element.
|
|
* Usually an attribute change, but can also be textcontent.
|
|
* @param elem - The DOM element that was changed
|
|
* @param attrs - An object with the attributes to be changed and the values they had *before* the change
|
|
* @param {String} text - An optional string visible to user related to this change
|
|
*/
|
|
var ChangeElementCommand = function () {
|
|
function ChangeElementCommand(elem, attrs, text) {
|
|
classCallCheck(this, ChangeElementCommand);
|
|
|
|
this.elem = elem;
|
|
this.text = text ? 'Change ' + elem.tagName + ' ' + text : 'Change ' + elem.tagName;
|
|
this.newValues = {};
|
|
this.oldValues = attrs;
|
|
for (var attr in attrs) {
|
|
if (attr === '#text') {
|
|
this.newValues[attr] = elem.textContent;
|
|
} else if (attr === '#href') {
|
|
this.newValues[attr] = getHref(elem);
|
|
} else {
|
|
this.newValues[attr] = elem.getAttribute(attr);
|
|
}
|
|
}
|
|
}
|
|
|
|
createClass(ChangeElementCommand, [{
|
|
key: 'type',
|
|
value: function type() {
|
|
return 'svgedit.history.ChangeElementCommand';
|
|
}
|
|
}, {
|
|
key: 'getText',
|
|
value: function getText() {
|
|
return this.text;
|
|
}
|
|
|
|
// Performs the stored change action
|
|
|
|
}, {
|
|
key: 'apply',
|
|
value: function apply(handler) {
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.BEFORE_APPLY, this);
|
|
}
|
|
|
|
var bChangedTransform = false;
|
|
for (var attr in this.newValues) {
|
|
if (this.newValues[attr]) {
|
|
if (attr === '#text') {
|
|
this.elem.textContent = this.newValues[attr];
|
|
} else if (attr === '#href') {
|
|
setHref(this.elem, this.newValues[attr]);
|
|
} else {
|
|
this.elem.setAttribute(attr, this.newValues[attr]);
|
|
}
|
|
} else {
|
|
if (attr === '#text') {
|
|
this.elem.textContent = '';
|
|
} else {
|
|
this.elem.setAttribute(attr, '');
|
|
this.elem.removeAttribute(attr);
|
|
}
|
|
}
|
|
|
|
if (attr === 'transform') {
|
|
bChangedTransform = true;
|
|
}
|
|
}
|
|
|
|
// relocate rotational transform, if necessary
|
|
if (!bChangedTransform) {
|
|
var angle = getRotationAngle(this.elem);
|
|
if (angle) {
|
|
var bbox = this.elem.getBBox();
|
|
var cx = bbox.x + bbox.width / 2,
|
|
cy = bbox.y + bbox.height / 2;
|
|
var rotate = ['rotate(', angle, ' ', cx, ',', cy, ')'].join('');
|
|
if (rotate !== this.elem.getAttribute('transform')) {
|
|
this.elem.setAttribute('transform', rotate);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.AFTER_APPLY, this);
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
// Reverses the stored change action
|
|
|
|
}, {
|
|
key: 'unapply',
|
|
value: function unapply(handler) {
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.BEFORE_UNAPPLY, this);
|
|
}
|
|
|
|
var bChangedTransform = false;
|
|
for (var attr in this.oldValues) {
|
|
if (this.oldValues[attr]) {
|
|
if (attr === '#text') {
|
|
this.elem.textContent = this.oldValues[attr];
|
|
} else if (attr === '#href') {
|
|
setHref(this.elem, this.oldValues[attr]);
|
|
} else {
|
|
this.elem.setAttribute(attr, this.oldValues[attr]);
|
|
}
|
|
} else {
|
|
if (attr === '#text') {
|
|
this.elem.textContent = '';
|
|
} else {
|
|
this.elem.removeAttribute(attr);
|
|
}
|
|
}
|
|
if (attr === 'transform') {
|
|
bChangedTransform = true;
|
|
}
|
|
}
|
|
// relocate rotational transform, if necessary
|
|
if (!bChangedTransform) {
|
|
var angle = getRotationAngle(this.elem);
|
|
if (angle) {
|
|
var bbox = this.elem.getBBox();
|
|
var cx = bbox.x + bbox.width / 2,
|
|
cy = bbox.y + bbox.height / 2;
|
|
var rotate = ['rotate(', angle, ' ', cx, ',', cy, ')'].join('');
|
|
if (rotate !== this.elem.getAttribute('transform')) {
|
|
this.elem.setAttribute('transform', rotate);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Remove transformlist to prevent confusion that causes bugs like 575.
|
|
removeElementFromListMap(this.elem);
|
|
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.AFTER_UNAPPLY, this);
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* @returns {Array} Array with element associated with this command
|
|
*/
|
|
|
|
}, {
|
|
key: 'elements',
|
|
value: function elements() {
|
|
return [this.elem];
|
|
}
|
|
}]);
|
|
return ChangeElementCommand;
|
|
}();
|
|
ChangeElementCommand.type = ChangeElementCommand.prototype.type;
|
|
|
|
// TODO: create a 'typing' command object that tracks changes in text
|
|
// if a new Typing command is created and the top command on the stack is also a Typing
|
|
// and they both affect the same element, then collapse the two commands into one
|
|
|
|
/**
|
|
* @implements svgedit.history.HistoryCommand
|
|
* History command that can contain/execute multiple other commands
|
|
* @param {String} [text] - An optional string visible to user related to this change
|
|
*/
|
|
var BatchCommand = function () {
|
|
function BatchCommand(text) {
|
|
classCallCheck(this, BatchCommand);
|
|
|
|
this.text = text || 'Batch Command';
|
|
this.stack = [];
|
|
}
|
|
|
|
createClass(BatchCommand, [{
|
|
key: 'type',
|
|
value: function type() {
|
|
return 'svgedit.history.BatchCommand';
|
|
}
|
|
}, {
|
|
key: 'getText',
|
|
value: function getText() {
|
|
return this.text;
|
|
}
|
|
|
|
// Runs "apply" on all subcommands
|
|
|
|
}, {
|
|
key: 'apply',
|
|
value: function apply(handler) {
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.BEFORE_APPLY, this);
|
|
}
|
|
|
|
var len = this.stack.length;
|
|
for (var i = 0; i < len; ++i) {
|
|
this.stack[i].apply(handler);
|
|
}
|
|
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.AFTER_APPLY, this);
|
|
}
|
|
}
|
|
|
|
// Runs "unapply" on all subcommands
|
|
|
|
}, {
|
|
key: 'unapply',
|
|
value: function unapply(handler) {
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.BEFORE_UNAPPLY, this);
|
|
}
|
|
|
|
for (var i = this.stack.length - 1; i >= 0; i--) {
|
|
this.stack[i].unapply(handler);
|
|
}
|
|
|
|
if (handler) {
|
|
handler.handleHistoryEvent(HistoryEventTypes.AFTER_UNAPPLY, this);
|
|
}
|
|
}
|
|
|
|
// Iterate through all our subcommands and returns all the elements we are changing
|
|
|
|
}, {
|
|
key: 'elements',
|
|
value: function elements() {
|
|
var elems = [];
|
|
var cmd = this.stack.length;
|
|
while (cmd--) {
|
|
var thisElems = this.stack[cmd].elements();
|
|
var elem = thisElems.length;
|
|
while (elem--) {
|
|
if (!elems.includes(thisElems[elem])) {
|
|
elems.push(thisElems[elem]);
|
|
}
|
|
}
|
|
}
|
|
return elems;
|
|
}
|
|
|
|
/**
|
|
* Adds a given command to the history stack
|
|
* @param cmd - The undo command object to add
|
|
*/
|
|
|
|
}, {
|
|
key: 'addSubCommand',
|
|
value: function addSubCommand(cmd) {
|
|
this.stack.push(cmd);
|
|
}
|
|
|
|
/**
|
|
* @returns {Boolean} Indicates whether or not the batch command is empty
|
|
*/
|
|
|
|
}, {
|
|
key: 'isEmpty',
|
|
value: function isEmpty() {
|
|
return !this.stack.length;
|
|
}
|
|
}]);
|
|
return BatchCommand;
|
|
}();
|
|
BatchCommand.type = BatchCommand.prototype.type;
|
|
|
|
/**
|
|
* @param historyEventHandler - an object that conforms to the HistoryEventHandler interface
|
|
* (see above)
|
|
*/
|
|
var UndoManager = function () {
|
|
function UndoManager(historyEventHandler) {
|
|
classCallCheck(this, UndoManager);
|
|
|
|
this.handler_ = historyEventHandler || null;
|
|
this.undoStackPointer = 0;
|
|
this.undoStack = [];
|
|
|
|
// this is the stack that stores the original values, the elements and
|
|
// the attribute name for begin/finish
|
|
this.undoChangeStackPointer = -1;
|
|
this.undoableChangeStack = [];
|
|
}
|
|
|
|
// Resets the undo stack, effectively clearing the undo/redo history
|
|
|
|
|
|
createClass(UndoManager, [{
|
|
key: 'resetUndoStack',
|
|
value: function resetUndoStack() {
|
|
this.undoStack = [];
|
|
this.undoStackPointer = 0;
|
|
}
|
|
|
|
/**
|
|
* @returns {Number} Integer with the current size of the undo history stack
|
|
*/
|
|
|
|
}, {
|
|
key: 'getUndoStackSize',
|
|
value: function getUndoStackSize() {
|
|
return this.undoStackPointer;
|
|
}
|
|
|
|
/**
|
|
* @returns {Number} Integer with the current size of the redo history stack
|
|
*/
|
|
|
|
}, {
|
|
key: 'getRedoStackSize',
|
|
value: function getRedoStackSize() {
|
|
return this.undoStack.length - this.undoStackPointer;
|
|
}
|
|
|
|
/**
|
|
* @returns {String} String associated with the next undo command
|
|
*/
|
|
|
|
}, {
|
|
key: 'getNextUndoCommandText',
|
|
value: function getNextUndoCommandText() {
|
|
return this.undoStackPointer > 0 ? this.undoStack[this.undoStackPointer - 1].getText() : '';
|
|
}
|
|
|
|
/**
|
|
* @returns {String} String associated with the next redo command
|
|
*/
|
|
|
|
}, {
|
|
key: 'getNextRedoCommandText',
|
|
value: function getNextRedoCommandText() {
|
|
return this.undoStackPointer < this.undoStack.length ? this.undoStack[this.undoStackPointer].getText() : '';
|
|
}
|
|
|
|
// Performs an undo step
|
|
|
|
}, {
|
|
key: 'undo',
|
|
value: function undo() {
|
|
if (this.undoStackPointer > 0) {
|
|
var cmd = this.undoStack[--this.undoStackPointer];
|
|
cmd.unapply(this.handler_);
|
|
}
|
|
}
|
|
|
|
// Performs a redo step
|
|
|
|
}, {
|
|
key: 'redo',
|
|
value: function redo() {
|
|
if (this.undoStackPointer < this.undoStack.length && this.undoStack.length > 0) {
|
|
var cmd = this.undoStack[this.undoStackPointer++];
|
|
cmd.apply(this.handler_);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Adds a command object to the undo history stack
|
|
* @param cmd - The command object to add
|
|
*/
|
|
|
|
}, {
|
|
key: 'addCommandToHistory',
|
|
value: function addCommandToHistory(cmd) {
|
|
// FIXME: we MUST compress consecutive text changes to the same element
|
|
// (right now each keystroke is saved as a separate command that includes the
|
|
// entire text contents of the text element)
|
|
// TODO: consider limiting the history that we store here (need to do some slicing)
|
|
|
|
// if our stack pointer is not at the end, then we have to remove
|
|
// all commands after the pointer and insert the new command
|
|
if (this.undoStackPointer < this.undoStack.length && this.undoStack.length > 0) {
|
|
this.undoStack = this.undoStack.splice(0, this.undoStackPointer);
|
|
}
|
|
this.undoStack.push(cmd);
|
|
this.undoStackPointer = this.undoStack.length;
|
|
}
|
|
|
|
/**
|
|
* This function tells the canvas to remember the old values of the
|
|
* attrName attribute for each element sent in. The elements and values
|
|
* are stored on a stack, so the next call to finishUndoableChange() will
|
|
* pop the elements and old values off the stack, gets the current values
|
|
* from the DOM and uses all of these to construct the undo-able command.
|
|
* @param attrName - The name of the attribute being changed
|
|
* @param elems - Array of DOM elements being changed
|
|
*/
|
|
|
|
}, {
|
|
key: 'beginUndoableChange',
|
|
value: function beginUndoableChange(attrName, elems) {
|
|
var p = ++this.undoChangeStackPointer;
|
|
var i = elems.length;
|
|
var oldValues = new Array(i),
|
|
elements = new Array(i);
|
|
while (i--) {
|
|
var elem = elems[i];
|
|
if (elem == null) {
|
|
continue;
|
|
}
|
|
elements[i] = elem;
|
|
oldValues[i] = elem.getAttribute(attrName);
|
|
}
|
|
this.undoableChangeStack[p] = {
|
|
attrName: attrName,
|
|
oldValues: oldValues,
|
|
elements: elements
|
|
};
|
|
}
|
|
|
|
/**
|
|
* This function returns a BatchCommand object which summarizes the
|
|
* change since beginUndoableChange was called. The command can then
|
|
* be added to the command history
|
|
* @returns Batch command object with resulting changes
|
|
*/
|
|
|
|
}, {
|
|
key: 'finishUndoableChange',
|
|
value: function finishUndoableChange() {
|
|
var p = this.undoChangeStackPointer--;
|
|
var changeset = this.undoableChangeStack[p];
|
|
var attrName = changeset.attrName;
|
|
|
|
var batchCmd = new BatchCommand('Change ' + attrName);
|
|
var i = changeset.elements.length;
|
|
while (i--) {
|
|
var elem = changeset.elements[i];
|
|
if (elem == null) {
|
|
continue;
|
|
}
|
|
var changes = {};
|
|
changes[attrName] = changeset.oldValues[i];
|
|
if (changes[attrName] !== elem.getAttribute(attrName)) {
|
|
batchCmd.addSubCommand(new ChangeElementCommand(elem, changes, attrName));
|
|
}
|
|
}
|
|
this.undoableChangeStack[p] = null;
|
|
return batchCmd;
|
|
}
|
|
}]);
|
|
return UndoManager;
|
|
}();
|
|
|
|
var history = /*#__PURE__*/Object.freeze({
|
|
HistoryEventTypes: HistoryEventTypes,
|
|
MoveElementCommand: MoveElementCommand,
|
|
InsertElementCommand: InsertElementCommand,
|
|
RemoveElementCommand: RemoveElementCommand,
|
|
ChangeElementCommand: ChangeElementCommand,
|
|
BatchCommand: BatchCommand,
|
|
UndoManager: UndoManager
|
|
});
|
|
|
|
/**
|
|
* Package: svedit.math
|
|
*
|
|
* Licensed under the MIT License
|
|
*
|
|
* Copyright(c) 2010 Alexis Deveria
|
|
* Copyright(c) 2010 Jeff Schiller
|
|
*/
|
|
|
|
// Constants
|
|
var NEAR_ZERO = 1e-14;
|
|
|
|
// Throw away SVGSVGElement used for creating matrices/transforms.
|
|
var 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)
|
|
* @param {number} x - Float representing the x coordinate
|
|
* @param {number} y - Float representing the y coordinate
|
|
* @param {SVGMatrix} m - Matrix object to transform the point with
|
|
* @returns {Object} An x, y object representing the transformed point
|
|
*/
|
|
var transformPoint = function transformPoint(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)
|
|
* @param {SVGMatrix} m - The matrix object to check
|
|
* @returns {boolean} Indicates whether or not the matrix is 1,0,0,1,0,0
|
|
*/
|
|
var isIdentity = function isIdentity(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
|
|
* @param {...SVGMatrix} args - Matrix objects to multiply
|
|
* @returns {SVGMatrix} The matrix object resulting from the calculation
|
|
*/
|
|
var matrixMultiply = function matrixMultiply() {
|
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
var m = args.reduceRight(function (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
|
|
* @param {Object} [tlist] - The transformlist to check
|
|
* @returns {boolean} Whether or not a matrix transform was found
|
|
*/
|
|
var hasMatrixTransform = function hasMatrixTransform(tlist) {
|
|
if (!tlist) {
|
|
return false;
|
|
}
|
|
var num = tlist.numberOfItems;
|
|
while (num--) {
|
|
var xform = tlist.getItem(num);
|
|
if (xform.type === 1 && !isIdentity(xform.matrix)) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Transforms a rectangle based on the given matrix
|
|
* @param {number} l - Float with the box's left coordinate
|
|
* @param {number} t - Float with the box's top coordinate
|
|
* @param {number} w - Float with the box width
|
|
* @param {number} h - Float with the box height
|
|
* @param {SVGMatrix} m - Matrix object to transform the box by
|
|
* @returns {Object} An object with the following values:
|
|
* tl - The top left coordinate (x,y object)
|
|
* tr - The top right coordinate (x,y object)
|
|
* bl - The bottom left coordinate (x,y object)
|
|
* br - The bottom right coordinate (x,y object)
|
|
* aabox - Object with the following values:
|
|
* x - Float with the axis-aligned x coordinate
|
|
* y - Float with the axis-aligned y coordinate
|
|
* width - Float with the axis-aligned width coordinate
|
|
* height - Float with the axis-aligned height coordinate
|
|
*/
|
|
var transformBox = function transformBox(l, t, w, h, m) {
|
|
var 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: tl,
|
|
tr: tr,
|
|
bl: bl,
|
|
br: 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
|
|
* @param {Object} 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 {Object} A single matrix transform object
|
|
*/
|
|
var transformListToTransform = function transformListToTransform(tlist, min, max) {
|
|
if (tlist == null) {
|
|
// 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 = parseInt(min, 10);
|
|
max = parseInt(max, 10);
|
|
if (min > max) {
|
|
var temp = max;max = min;min = temp;
|
|
}
|
|
var m = svg$1.createSVGMatrix();
|
|
for (var i = min; i <= max; ++i) {
|
|
// if our indices are out of range, just use a harmless identity matrix
|
|
var 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
|
|
* @param {Element} elem - The DOM element to check
|
|
* @returns {SVGMatrix} The matrix object associated with the element's transformlist
|
|
*/
|
|
var getMatrix = function getMatrix(elem) {
|
|
var tlist = getTransformList(elem);
|
|
return transformListToTransform(tlist).matrix;
|
|
};
|
|
|
|
/**
|
|
* Returns a 45 degree angle coordinate associated with the two given
|
|
* coordinates
|
|
* @param {number} x1 - First coordinate's x value
|
|
* @param {number} x2 - Second coordinate's x value
|
|
* @param {number} y1 - First coordinate's y value
|
|
* @param {number} y2 - Second coordinate's y value
|
|
* @returns {AngleCoord45}
|
|
*/
|
|
var snapToAngle = function snapToAngle(x1, y1, x2, y2) {
|
|
var snap = Math.PI / 4; // 45 degrees
|
|
var dx = x2 - x1;
|
|
var dy = y2 - y1;
|
|
var angle = Math.atan2(dy, dx);
|
|
var dist = Math.sqrt(dx * dx + dy * dy);
|
|
var 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
|
|
* @param {SVGRect} r1 - The first BBox-like object
|
|
* @param {SVGRect} r2 - The second BBox-like object
|
|
* @returns {boolean} True if rectangles intersect
|
|
*/
|
|
var rectsIntersect = function 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;
|
|
};
|
|
|
|
/* globals jQuery */
|
|
|
|
var $$1 = jQuery;
|
|
|
|
var segData = {
|
|
2: ['x', 'y'],
|
|
4: ['x', 'y'],
|
|
6: ['x', 'y', 'x1', 'y1', 'x2', 'y2'],
|
|
8: ['x', 'y', 'x1', 'y1'],
|
|
10: ['x', 'y', 'r1', 'r2', 'angle', 'largeArcFlag', 'sweepFlag'],
|
|
12: ['x'],
|
|
14: ['y'],
|
|
16: ['x', 'y', 'x2', 'y2'],
|
|
18: ['x', 'y']
|
|
};
|
|
|
|
var uiStrings = {};
|
|
var setUiStrings = function setUiStrings(strs) {
|
|
Object.assign(uiStrings, strs.ui);
|
|
};
|
|
|
|
var pathFuncs = [];
|
|
|
|
var linkControlPts = true;
|
|
|
|
// Stores references to paths via IDs.
|
|
// TODO: Make this cross-document happy.
|
|
var pathData = {};
|
|
|
|
var setLinkControlPoints = function setLinkControlPoints(lcp) {
|
|
linkControlPts = lcp;
|
|
};
|
|
|
|
var path = null;
|
|
|
|
var editorContext_ = null;
|
|
|
|
var init$1 = function init$$1(editorContext) {
|
|
editorContext_ = editorContext;
|
|
|
|
pathFuncs = [0, 'ClosePath'];
|
|
var pathFuncsStrs = ['Moveto', 'Lineto', 'CurvetoCubic', 'CurvetoQuadratic', 'Arc', 'LinetoHorizontal', 'LinetoVertical', 'CurvetoCubicSmooth', 'CurvetoQuadraticSmooth'];
|
|
$$1.each(pathFuncsStrs, function (i, s) {
|
|
pathFuncs.push(s + 'Abs');
|
|
pathFuncs.push(s + 'Rel');
|
|
});
|
|
};
|
|
|
|
var insertItemBefore = function insertItemBefore(elem, newseg, index) {
|
|
// Support insertItemBefore on paths for FF2
|
|
var list = elem.pathSegList;
|
|
|
|
if (supportsPathInsertItemBefore()) {
|
|
list.insertItemBefore(newseg, index);
|
|
return;
|
|
}
|
|
var len = list.numberOfItems;
|
|
var arr = [];
|
|
for (var i = 0; i < len; i++) {
|
|
var curSeg = list.getItem(i);
|
|
arr.push(curSeg);
|
|
}
|
|
list.clear();
|
|
for (var _i = 0; _i < len; _i++) {
|
|
if (_i === index) {
|
|
// index + 1
|
|
list.appendItem(newseg);
|
|
}
|
|
list.appendItem(arr[_i]);
|
|
}
|
|
};
|
|
|
|
// TODO: See if this should just live in replacePathSeg
|
|
var ptObjToArr = function ptObjToArr(type, segItem) {
|
|
var arr = segData[type],
|
|
len = arr.length;
|
|
var out = [];
|
|
for (var i = 0; i < len; i++) {
|
|
out[i] = segItem[arr[i]];
|
|
}
|
|
return out;
|
|
};
|
|
|
|
var getGripPt = function getGripPt(seg, altPt) {
|
|
var path = seg.path;
|
|
|
|
var out = {
|
|
x: altPt ? altPt.x : seg.item.x,
|
|
y: altPt ? altPt.y : seg.item.y
|
|
};
|
|
|
|
if (path.matrix) {
|
|
var pt = transformPoint(out.x, out.y, path.matrix);
|
|
out = pt;
|
|
}
|
|
|
|
var currentZoom = editorContext_.getCurrentZoom();
|
|
out.x *= currentZoom;
|
|
out.y *= currentZoom;
|
|
|
|
return out;
|
|
};
|
|
|
|
var getPointFromGrip = function getPointFromGrip(pt, path) {
|
|
var out = {
|
|
x: pt.x,
|
|
y: pt.y
|
|
};
|
|
|
|
if (path.matrix) {
|
|
pt = transformPoint(out.x, out.y, path.imatrix);
|
|
out.x = pt.x;
|
|
out.y = pt.y;
|
|
}
|
|
|
|
var currentZoom = editorContext_.getCurrentZoom();
|
|
out.x /= currentZoom;
|
|
out.y /= currentZoom;
|
|
|
|
return out;
|
|
};
|
|
|
|
/**
|
|
* Requires prior call to `setUiStrings` if `xlink:title`
|
|
* to be set on the grip
|
|
*/
|
|
var addPointGrip = function addPointGrip(index, x, y) {
|
|
// create the container of all the point grips
|
|
var pointGripContainer = getGripContainer();
|
|
|
|
var pointGrip = getElem('pathpointgrip_' + index);
|
|
// create it
|
|
if (!pointGrip) {
|
|
pointGrip = document.createElementNS(NS.SVG, 'circle');
|
|
var atts = {
|
|
id: 'pathpointgrip_' + index,
|
|
display: 'none',
|
|
r: 4,
|
|
fill: '#0FF',
|
|
stroke: '#00F',
|
|
'stroke-width': 2,
|
|
cursor: 'move',
|
|
style: 'pointer-events:all'
|
|
};
|
|
if ('pathNodeTooltip' in uiStrings) {
|
|
// May be empty if running path.js without svg-editor
|
|
atts['xlink:title'] = uiStrings.pathNodeTooltip;
|
|
}
|
|
assignAttributes(pointGrip, atts);
|
|
pointGrip = pointGripContainer.appendChild(pointGrip);
|
|
|
|
var grip = $$1('#pathpointgrip_' + index);
|
|
grip.dblclick(function () {
|
|
if (path) {
|
|
path.setSegType();
|
|
}
|
|
});
|
|
}
|
|
if (x && y) {
|
|
// set up the point grip element and display it
|
|
assignAttributes(pointGrip, {
|
|
cx: x,
|
|
cy: y,
|
|
display: 'inline'
|
|
});
|
|
}
|
|
return pointGrip;
|
|
};
|
|
|
|
var getGripContainer = function getGripContainer() {
|
|
var c = getElem('pathpointgrip_container');
|
|
if (!c) {
|
|
var parent = getElem('selectorParentGroup');
|
|
c = parent.appendChild(document.createElementNS(NS.SVG, 'g'));
|
|
c.id = 'pathpointgrip_container';
|
|
}
|
|
return c;
|
|
};
|
|
|
|
/**
|
|
* Requires prior call to `setUiStrings` if `xlink:title`
|
|
* to be set on the grip
|
|
*/
|
|
var addCtrlGrip = function addCtrlGrip(id) {
|
|
var pointGrip = getElem('ctrlpointgrip_' + id);
|
|
if (pointGrip) {
|
|
return pointGrip;
|
|
}
|
|
|
|
pointGrip = document.createElementNS(NS.SVG, 'circle');
|
|
var atts = {
|
|
id: 'ctrlpointgrip_' + id,
|
|
display: 'none',
|
|
r: 4,
|
|
fill: '#0FF',
|
|
stroke: '#55F',
|
|
'stroke-width': 1,
|
|
cursor: 'move',
|
|
style: 'pointer-events:all'
|
|
};
|
|
if ('pathCtrlPtTooltip' in uiStrings) {
|
|
// May be empty if running path.js without svg-editor
|
|
atts['xlink:title'] = uiStrings.pathCtrlPtTooltip;
|
|
}
|
|
assignAttributes(pointGrip, atts);
|
|
getGripContainer().appendChild(pointGrip);
|
|
return pointGrip;
|
|
};
|
|
|
|
var getCtrlLine = function getCtrlLine(id) {
|
|
var ctrlLine = getElem('ctrlLine_' + id);
|
|
if (ctrlLine) {
|
|
return ctrlLine;
|
|
}
|
|
|
|
ctrlLine = document.createElementNS(NS.SVG, 'line');
|
|
assignAttributes(ctrlLine, {
|
|
id: 'ctrlLine_' + id,
|
|
stroke: '#555',
|
|
'stroke-width': 1,
|
|
style: 'pointer-events:none'
|
|
});
|
|
getGripContainer().appendChild(ctrlLine);
|
|
return ctrlLine;
|
|
};
|
|
|
|
var getPointGrip = function getPointGrip(seg, update) {
|
|
var index = seg.index;
|
|
|
|
var pointGrip = addPointGrip(index);
|
|
|
|
if (update) {
|
|
var pt = getGripPt(seg);
|
|
assignAttributes(pointGrip, {
|
|
cx: pt.x,
|
|
cy: pt.y,
|
|
display: 'inline'
|
|
});
|
|
}
|
|
|
|
return pointGrip;
|
|
};
|
|
|
|
var getControlPoints = function getControlPoints(seg) {
|
|
var item = seg.item,
|
|
index = seg.index;
|
|
|
|
if (!('x1' in item) || !('x2' in item)) {
|
|
return null;
|
|
}
|
|
var cpt = {};
|
|
/* const pointGripContainer = */getGripContainer();
|
|
|
|
// Note that this is intentionally not seg.prev.item
|
|
var prev = path.segs[index - 1].item;
|
|
|
|
var segItems = [prev, item];
|
|
|
|
for (var i = 1; i < 3; i++) {
|
|
var id = index + 'c' + i;
|
|
|
|
var ctrlLine = cpt['c' + i + '_line'] = getCtrlLine(id);
|
|
|
|
var pt = getGripPt(seg, { x: item['x' + i], y: item['y' + i] });
|
|
var gpt = getGripPt(seg, { x: segItems[i - 1].x, y: segItems[i - 1].y });
|
|
|
|
assignAttributes(ctrlLine, {
|
|
x1: pt.x,
|
|
y1: pt.y,
|
|
x2: gpt.x,
|
|
y2: gpt.y,
|
|
display: 'inline'
|
|
});
|
|
|
|
cpt['c' + i + '_line'] = ctrlLine;
|
|
|
|
// create it
|
|
var pointGrip = cpt['c' + i] = addCtrlGrip(id);
|
|
|
|
assignAttributes(pointGrip, {
|
|
cx: pt.x,
|
|
cy: pt.y,
|
|
display: 'inline'
|
|
});
|
|
cpt['c' + i] = pointGrip;
|
|
}
|
|
return cpt;
|
|
};
|
|
|
|
// This replaces the segment at the given index. Type is given as number.
|
|
var replacePathSeg = function replacePathSeg(type, index, pts, elem) {
|
|
var pth = elem || path.elem;
|
|
|
|
var func = 'createSVGPathSeg' + pathFuncs[type];
|
|
var seg = pth[func].apply(pth, pts);
|
|
|
|
if (supportsPathReplaceItem()) {
|
|
pth.pathSegList.replaceItem(seg, index);
|
|
} else {
|
|
var segList = pth.pathSegList;
|
|
var len = segList.numberOfItems;
|
|
var arr = [];
|
|
for (var i = 0; i < len; i++) {
|
|
var curSeg = segList.getItem(i);
|
|
arr.push(curSeg);
|
|
}
|
|
segList.clear();
|
|
for (var _i2 = 0; _i2 < len; _i2++) {
|
|
if (_i2 === index) {
|
|
segList.appendItem(seg);
|
|
} else {
|
|
segList.appendItem(arr[_i2]);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
var getSegSelector = function getSegSelector(seg, update) {
|
|
var index = seg.index;
|
|
|
|
var segLine = getElem('segline_' + index);
|
|
if (!segLine) {
|
|
var pointGripContainer = getGripContainer();
|
|
// create segline
|
|
segLine = document.createElementNS(NS.SVG, 'path');
|
|
assignAttributes(segLine, {
|
|
id: 'segline_' + index,
|
|
display: 'none',
|
|
fill: 'none',
|
|
stroke: '#0FF',
|
|
'stroke-width': 2,
|
|
style: 'pointer-events:none',
|
|
d: 'M0,0 0,0'
|
|
});
|
|
pointGripContainer.appendChild(segLine);
|
|
}
|
|
|
|
if (update) {
|
|
var prev = seg.prev;
|
|
|
|
if (!prev) {
|
|
segLine.setAttribute('display', 'none');
|
|
return segLine;
|
|
}
|
|
|
|
var pt = getGripPt(prev);
|
|
// Set start point
|
|
replacePathSeg(2, 0, [pt.x, pt.y], segLine);
|
|
|
|
var pts = ptObjToArr(seg.type, seg.item, true);
|
|
for (var i = 0; i < pts.length; i += 2) {
|
|
var _pt = getGripPt(seg, { x: pts[i], y: pts[i + 1] });
|
|
pts[i] = _pt.x;
|
|
pts[i + 1] = _pt.y;
|
|
}
|
|
|
|
replacePathSeg(seg.type, 1, pts, segLine);
|
|
}
|
|
return segLine;
|
|
};
|
|
|
|
/**
|
|
* Takes three points and creates a smoother line based on them
|
|
* @param ct1 - Object with x and y values (first control point)
|
|
* @param ct2 - Object with x and y values (second control point)
|
|
* @param pt - Object with x and y values (third point)
|
|
* @returns Array of two "smoothed" point objects
|
|
*/
|
|
var smoothControlPoints = function smoothControlPoints(ct1, ct2, pt) {
|
|
// each point must not be the origin
|
|
var x1 = ct1.x - pt.x,
|
|
y1 = ct1.y - pt.y,
|
|
x2 = ct2.x - pt.x,
|
|
y2 = ct2.y - pt.y;
|
|
|
|
if ((x1 !== 0 || y1 !== 0) && (x2 !== 0 || y2 !== 0)) {
|
|
var r1 = Math.sqrt(x1 * x1 + y1 * y1),
|
|
r2 = Math.sqrt(x2 * x2 + y2 * y2),
|
|
nct1 = editorContext_.getSVGRoot().createSVGPoint(),
|
|
nct2 = editorContext_.getSVGRoot().createSVGPoint();
|
|
var anglea = Math.atan2(y1, x1),
|
|
angleb = Math.atan2(y2, x2);
|
|
if (anglea < 0) {
|
|
anglea += 2 * Math.PI;
|
|
}
|
|
if (angleb < 0) {
|
|
angleb += 2 * Math.PI;
|
|
}
|
|
|
|
var angleBetween = Math.abs(anglea - angleb),
|
|
angleDiff = Math.abs(Math.PI - angleBetween) / 2;
|
|
|
|
var newAnglea = void 0,
|
|
newAngleb = void 0;
|
|
if (anglea - angleb > 0) {
|
|
newAnglea = angleBetween < Math.PI ? anglea + angleDiff : anglea - angleDiff;
|
|
newAngleb = angleBetween < Math.PI ? angleb - angleDiff : angleb + angleDiff;
|
|
} else {
|
|
newAnglea = angleBetween < Math.PI ? anglea - angleDiff : anglea + angleDiff;
|
|
newAngleb = angleBetween < Math.PI ? angleb + angleDiff : angleb - angleDiff;
|
|
}
|
|
|
|
// rotate the points
|
|
nct1.x = r1 * Math.cos(newAnglea) + pt.x;
|
|
nct1.y = r1 * Math.sin(newAnglea) + pt.y;
|
|
nct2.x = r2 * Math.cos(newAngleb) + pt.x;
|
|
nct2.y = r2 * Math.sin(newAngleb) + pt.y;
|
|
|
|
return [nct1, nct2];
|
|
}
|
|
return undefined;
|
|
};
|
|
|
|
var Segment = function () {
|
|
function Segment(index, item) {
|
|
classCallCheck(this, Segment);
|
|
|
|
this.selected = false;
|
|
this.index = index;
|
|
this.item = item;
|
|
this.type = item.pathSegType;
|
|
|
|
this.ctrlpts = [];
|
|
this.ptgrip = null;
|
|
this.segsel = null;
|
|
}
|
|
|
|
createClass(Segment, [{
|
|
key: 'showCtrlPts',
|
|
value: function showCtrlPts(y) {
|
|
for (var i in this.ctrlpts) {
|
|
if (this.ctrlpts.hasOwnProperty(i)) {
|
|
this.ctrlpts[i].setAttribute('display', y ? 'inline' : 'none');
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: 'selectCtrls',
|
|
value: function selectCtrls(y) {
|
|
$$1('#ctrlpointgrip_' + this.index + 'c1, #ctrlpointgrip_' + this.index + 'c2').attr('fill', y ? '#0FF' : '#EEE');
|
|
}
|
|
}, {
|
|
key: 'show',
|
|
value: function show(y) {
|
|
if (this.ptgrip) {
|
|
this.ptgrip.setAttribute('display', y ? 'inline' : 'none');
|
|
this.segsel.setAttribute('display', y ? 'inline' : 'none');
|
|
// Show/hide all control points if available
|
|
this.showCtrlPts(y);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'select',
|
|
value: function select(y) {
|
|
if (this.ptgrip) {
|
|
this.ptgrip.setAttribute('stroke', y ? '#0FF' : '#00F');
|
|
this.segsel.setAttribute('display', y ? 'inline' : 'none');
|
|
if (this.ctrlpts) {
|
|
this.selectCtrls(y);
|
|
}
|
|
this.selected = y;
|
|
}
|
|
}
|
|
}, {
|
|
key: 'addGrip',
|
|
value: function addGrip() {
|
|
this.ptgrip = getPointGrip(this, true);
|
|
this.ctrlpts = getControlPoints(this, true);
|
|
this.segsel = getSegSelector(this, true);
|
|
}
|
|
}, {
|
|
key: 'update',
|
|
value: function update(full) {
|
|
if (this.ptgrip) {
|
|
var pt = getGripPt(this);
|
|
assignAttributes(this.ptgrip, {
|
|
cx: pt.x,
|
|
cy: pt.y
|
|
});
|
|
|
|
getSegSelector(this, true);
|
|
|
|
if (this.ctrlpts) {
|
|
if (full) {
|
|
this.item = path.elem.pathSegList.getItem(this.index);
|
|
this.type = this.item.pathSegType;
|
|
}
|
|
getControlPoints(this);
|
|
}
|
|
// this.segsel.setAttribute('display', y ? 'inline' : 'none');
|
|
}
|
|
}
|
|
}, {
|
|
key: 'move',
|
|
value: function move(dx, dy) {
|
|
var item = this.item;
|
|
|
|
|
|
var curPts = this.ctrlpts ? [item.x += dx, item.y += dy, item.x1, item.y1, item.x2 += dx, item.y2 += dy] : [item.x += dx, item.y += dy];
|
|
|
|
replacePathSeg(this.type, this.index, curPts);
|
|
|
|
if (this.next && this.next.ctrlpts) {
|
|
var next = this.next.item;
|
|
var nextPts = [next.x, next.y, next.x1 += dx, next.y1 += dy, next.x2, next.y2];
|
|
replacePathSeg(this.next.type, this.next.index, nextPts);
|
|
}
|
|
|
|
if (this.mate) {
|
|
// The last point of a closed subpath has a 'mate',
|
|
// which is the 'M' segment of the subpath
|
|
var _item = this.mate.item;
|
|
|
|
var pts = [_item.x += dx, _item.y += dy];
|
|
replacePathSeg(this.mate.type, this.mate.index, pts);
|
|
// Has no grip, so does not need 'updating'?
|
|
}
|
|
|
|
this.update(true);
|
|
if (this.next) {
|
|
this.next.update(true);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'setLinked',
|
|
value: function setLinked(num) {
|
|
var seg = void 0,
|
|
anum = void 0,
|
|
pt = void 0;
|
|
if (num === 2) {
|
|
anum = 1;
|
|
seg = this.next;
|
|
if (!seg) {
|
|
return;
|
|
}
|
|
pt = this.item;
|
|
} else {
|
|
anum = 2;
|
|
seg = this.prev;
|
|
if (!seg) {
|
|
return;
|
|
}
|
|
pt = seg.item;
|
|
}
|
|
|
|
var _seg = seg,
|
|
item = _seg.item;
|
|
|
|
item['x' + anum] = pt.x + (pt.x - this.item['x' + num]);
|
|
item['y' + anum] = pt.y + (pt.y - this.item['y' + num]);
|
|
|
|
var pts = [item.x, item.y, item.x1, item.y1, item.x2, item.y2];
|
|
|
|
replacePathSeg(seg.type, seg.index, pts);
|
|
seg.update(true);
|
|
}
|
|
}, {
|
|
key: 'moveCtrl',
|
|
value: function moveCtrl(num, dx, dy) {
|
|
var item = this.item;
|
|
|
|
item['x' + num] += dx;
|
|
item['y' + num] += dy;
|
|
|
|
var pts = [item.x, item.y, item.x1, item.y1, item.x2, item.y2];
|
|
|
|
replacePathSeg(this.type, this.index, pts);
|
|
this.update(true);
|
|
}
|
|
}, {
|
|
key: 'setType',
|
|
value: function setType(newType, pts) {
|
|
replacePathSeg(newType, this.index, pts);
|
|
this.type = newType;
|
|
this.item = path.elem.pathSegList.getItem(this.index);
|
|
this.showCtrlPts(newType === 6);
|
|
this.ctrlpts = getControlPoints(this);
|
|
this.update(true);
|
|
}
|
|
}]);
|
|
return Segment;
|
|
}();
|
|
|
|
var Path = function () {
|
|
function Path(elem) {
|
|
classCallCheck(this, Path);
|
|
|
|
if (!elem || elem.tagName !== 'path') {
|
|
throw new Error('svgedit.path.Path constructed without a <path> element');
|
|
}
|
|
|
|
this.elem = elem;
|
|
this.segs = [];
|
|
this.selected_pts = [];
|
|
path = this;
|
|
|
|
this.init();
|
|
}
|
|
|
|
// Reset path data
|
|
|
|
|
|
createClass(Path, [{
|
|
key: 'init',
|
|
value: function init$$1() {
|
|
// Hide all grips, etc
|
|
|
|
// fixed, needed to work on all found elements, not just first
|
|
$$1(getGripContainer()).find('*').each(function () {
|
|
$$1(this).attr('display', 'none');
|
|
});
|
|
|
|
var segList = this.elem.pathSegList;
|
|
var len = segList.numberOfItems;
|
|
this.segs = [];
|
|
this.selected_pts = [];
|
|
this.first_seg = null;
|
|
|
|
// Set up segs array
|
|
for (var i = 0; i < len; i++) {
|
|
var item = segList.getItem(i);
|
|
var segment = new Segment(i, item);
|
|
segment.path = this;
|
|
this.segs.push(segment);
|
|
}
|
|
|
|
var segs = this.segs;
|
|
|
|
|
|
var startI = null;
|
|
for (var _i3 = 0; _i3 < len; _i3++) {
|
|
var seg = segs[_i3];
|
|
var nextSeg = _i3 + 1 >= len ? null : segs[_i3 + 1];
|
|
var prevSeg = _i3 - 1 < 0 ? null : segs[_i3 - 1];
|
|
if (seg.type === 2) {
|
|
if (prevSeg && prevSeg.type !== 1) {
|
|
// New sub-path, last one is open,
|
|
// so add a grip to last sub-path's first point
|
|
var startSeg = segs[startI];
|
|
startSeg.next = segs[startI + 1];
|
|
startSeg.next.prev = startSeg;
|
|
startSeg.addGrip();
|
|
}
|
|
// Remember that this is a starter seg
|
|
startI = _i3;
|
|
} else if (nextSeg && nextSeg.type === 1) {
|
|
// This is the last real segment of a closed sub-path
|
|
// Next is first seg after "M"
|
|
seg.next = segs[startI + 1];
|
|
|
|
// First seg after "M"'s prev is this
|
|
seg.next.prev = seg;
|
|
seg.mate = segs[startI];
|
|
seg.addGrip();
|
|
if (this.first_seg == null) {
|
|
this.first_seg = seg;
|
|
}
|
|
} else if (!nextSeg) {
|
|
if (seg.type !== 1) {
|
|
// Last seg, doesn't close so add a grip
|
|
// to last sub-path's first point
|
|
var _startSeg = segs[startI];
|
|
_startSeg.next = segs[startI + 1];
|
|
_startSeg.next.prev = _startSeg;
|
|
_startSeg.addGrip();
|
|
seg.addGrip();
|
|
|
|
if (!this.first_seg) {
|
|
// Open path, so set first as real first and add grip
|
|
this.first_seg = segs[startI];
|
|
}
|
|
}
|
|
} else if (seg.type !== 1) {
|
|
// Regular segment, so add grip and its "next"
|
|
seg.addGrip();
|
|
|
|
// Don't set its "next" if it's an "M"
|
|
if (nextSeg && nextSeg.type !== 2) {
|
|
seg.next = nextSeg;
|
|
seg.next.prev = seg;
|
|
}
|
|
}
|
|
}
|
|
return this;
|
|
}
|
|
}, {
|
|
key: 'eachSeg',
|
|
value: function eachSeg(fn) {
|
|
var len = this.segs.length;
|
|
for (var i = 0; i < len; i++) {
|
|
var ret = fn.call(this.segs[i], i);
|
|
if (ret === false) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: 'addSeg',
|
|
value: function addSeg(index) {
|
|
// Adds a new segment
|
|
var seg = this.segs[index];
|
|
if (!seg.prev) {
|
|
return;
|
|
}
|
|
|
|
var prev = seg.prev;
|
|
|
|
var newseg = void 0,
|
|
newX = void 0,
|
|
newY = void 0;
|
|
switch (seg.item.pathSegType) {
|
|
case 4:
|
|
{
|
|
newX = (seg.item.x + prev.item.x) / 2;
|
|
newY = (seg.item.y + prev.item.y) / 2;
|
|
newseg = this.elem.createSVGPathSegLinetoAbs(newX, newY);
|
|
break;
|
|
}case 6:
|
|
{
|
|
// make it a curved segment to preserve the shape (WRS)
|
|
// https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm#Geometric_interpretation
|
|
var p0x = (prev.item.x + seg.item.x1) / 2;
|
|
var p1x = (seg.item.x1 + seg.item.x2) / 2;
|
|
var p2x = (seg.item.x2 + seg.item.x) / 2;
|
|
var p01x = (p0x + p1x) / 2;
|
|
var p12x = (p1x + p2x) / 2;
|
|
newX = (p01x + p12x) / 2;
|
|
var p0y = (prev.item.y + seg.item.y1) / 2;
|
|
var p1y = (seg.item.y1 + seg.item.y2) / 2;
|
|
var p2y = (seg.item.y2 + seg.item.y) / 2;
|
|
var p01y = (p0y + p1y) / 2;
|
|
var p12y = (p1y + p2y) / 2;
|
|
newY = (p01y + p12y) / 2;
|
|
newseg = this.elem.createSVGPathSegCurvetoCubicAbs(newX, newY, p0x, p0y, p01x, p01y);
|
|
var pts = [seg.item.x, seg.item.y, p12x, p12y, p2x, p2y];
|
|
replacePathSeg(seg.type, index, pts);
|
|
break;
|
|
}
|
|
}
|
|
|
|
insertItemBefore(this.elem, newseg, index);
|
|
}
|
|
}, {
|
|
key: 'deleteSeg',
|
|
value: function deleteSeg(index) {
|
|
var seg = this.segs[index];
|
|
var list = this.elem.pathSegList;
|
|
|
|
seg.show(false);
|
|
var next = seg.next;
|
|
|
|
if (seg.mate) {
|
|
// Make the next point be the "M" point
|
|
var pt = [next.item.x, next.item.y];
|
|
replacePathSeg(2, next.index, pt);
|
|
|
|
// Reposition last node
|
|
replacePathSeg(4, seg.index, pt);
|
|
|
|
list.removeItem(seg.mate.index);
|
|
} else if (!seg.prev) {
|
|
// First node of open path, make next point the M
|
|
// const {item} = seg;
|
|
var _pt2 = [next.item.x, next.item.y];
|
|
replacePathSeg(2, seg.next.index, _pt2);
|
|
list.removeItem(index);
|
|
} else {
|
|
list.removeItem(index);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'subpathIsClosed',
|
|
value: function subpathIsClosed(index) {
|
|
var closed = false;
|
|
// Check if subpath is already open
|
|
path.eachSeg(function (i) {
|
|
if (i <= index) {
|
|
return true;
|
|
}
|
|
if (this.type === 2) {
|
|
// Found M first, so open
|
|
return false;
|
|
}
|
|
if (this.type === 1) {
|
|
// Found Z first, so closed
|
|
closed = true;
|
|
return false;
|
|
}
|
|
});
|
|
|
|
return closed;
|
|
}
|
|
}, {
|
|
key: 'removePtFromSelection',
|
|
value: function removePtFromSelection(index) {
|
|
var pos = this.selected_pts.indexOf(index);
|
|
if (pos === -1) {
|
|
return;
|
|
}
|
|
this.segs[index].select(false);
|
|
this.selected_pts.splice(pos, 1);
|
|
}
|
|
}, {
|
|
key: 'clearSelection',
|
|
value: function clearSelection() {
|
|
this.eachSeg(function () {
|
|
// 'this' is the segment here
|
|
this.select(false);
|
|
});
|
|
this.selected_pts = [];
|
|
}
|
|
}, {
|
|
key: 'storeD',
|
|
value: function storeD() {
|
|
this.last_d = this.elem.getAttribute('d');
|
|
}
|
|
}, {
|
|
key: 'show',
|
|
value: function show(y) {
|
|
// Shows this path's segment grips
|
|
this.eachSeg(function () {
|
|
// 'this' is the segment here
|
|
this.show(y);
|
|
});
|
|
if (y) {
|
|
this.selectPt(this.first_seg.index);
|
|
}
|
|
return this;
|
|
}
|
|
|
|
// Move selected points
|
|
|
|
}, {
|
|
key: 'movePts',
|
|
value: function movePts(dx, dy) {
|
|
var i = this.selected_pts.length;
|
|
while (i--) {
|
|
var seg = this.segs[this.selected_pts[i]];
|
|
seg.move(dx, dy);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'moveCtrl',
|
|
value: function moveCtrl(dx, dy) {
|
|
var seg = this.segs[this.selected_pts[0]];
|
|
seg.moveCtrl(this.dragctrl, dx, dy);
|
|
if (linkControlPts) {
|
|
seg.setLinked(this.dragctrl);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'setSegType',
|
|
value: function setSegType(newType) {
|
|
this.storeD();
|
|
var i = this.selected_pts.length;
|
|
var text = void 0;
|
|
while (i--) {
|
|
var selPt = this.selected_pts[i];
|
|
|
|
// Selected seg
|
|
var cur = this.segs[selPt];
|
|
var prev = cur.prev;
|
|
|
|
if (!prev) {
|
|
continue;
|
|
}
|
|
|
|
if (!newType) {
|
|
// double-click, so just toggle
|
|
text = 'Toggle Path Segment Type';
|
|
|
|
// Toggle segment to curve/straight line
|
|
var oldType = cur.type;
|
|
|
|
newType = oldType === 6 ? 4 : 6;
|
|
}
|
|
|
|
newType = Number(newType);
|
|
|
|
var curX = cur.item.x;
|
|
var curY = cur.item.y;
|
|
var prevX = prev.item.x;
|
|
var prevY = prev.item.y;
|
|
var points = void 0;
|
|
switch (newType) {
|
|
case 6:
|
|
{
|
|
if (cur.olditem) {
|
|
var old = cur.olditem;
|
|
points = [curX, curY, old.x1, old.y1, old.x2, old.y2];
|
|
} else {
|
|
var diffX = curX - prevX;
|
|
var diffY = curY - prevY;
|
|
// get control points from straight line segment
|
|
/*
|
|
const ct1x = (prevX + (diffY/2));
|
|
const ct1y = (prevY - (diffX/2));
|
|
const ct2x = (curX + (diffY/2));
|
|
const ct2y = (curY - (diffX/2));
|
|
*/
|
|
// create control points on the line to preserve the shape (WRS)
|
|
var ct1x = prevX + diffX / 3;
|
|
var ct1y = prevY + diffY / 3;
|
|
var ct2x = curX - diffX / 3;
|
|
var ct2y = curY - diffY / 3;
|
|
points = [curX, curY, ct1x, ct1y, ct2x, ct2y];
|
|
}
|
|
break;
|
|
}case 4:
|
|
{
|
|
points = [curX, curY];
|
|
|
|
// Store original prevve segment nums
|
|
cur.olditem = cur.item;
|
|
break;
|
|
}
|
|
}
|
|
|
|
cur.setType(newType, points);
|
|
}
|
|
path.endChanges(text);
|
|
}
|
|
}, {
|
|
key: 'selectPt',
|
|
value: function selectPt(pt, ctrlNum) {
|
|
this.clearSelection();
|
|
if (pt == null) {
|
|
this.eachSeg(function (i) {
|
|
// 'this' is the segment here.
|
|
if (this.prev) {
|
|
pt = i;
|
|
}
|
|
});
|
|
}
|
|
this.addPtsToSelection(pt);
|
|
if (ctrlNum) {
|
|
this.dragctrl = ctrlNum;
|
|
|
|
if (linkControlPts) {
|
|
this.segs[pt].setLinked(ctrlNum);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Update position of all points
|
|
|
|
}, {
|
|
key: 'update',
|
|
value: function update() {
|
|
var elem = this.elem;
|
|
|
|
if (getRotationAngle(elem)) {
|
|
this.matrix = getMatrix(elem);
|
|
this.imatrix = this.matrix.inverse();
|
|
} else {
|
|
this.matrix = null;
|
|
this.imatrix = null;
|
|
}
|
|
|
|
this.eachSeg(function (i) {
|
|
this.item = elem.pathSegList.getItem(i);
|
|
this.update();
|
|
});
|
|
|
|
return this;
|
|
}
|
|
}, {
|
|
key: 'endChanges',
|
|
value: function endChanges(text) {
|
|
if (isWebkit()) {
|
|
editorContext_.resetD(this.elem);
|
|
}
|
|
var cmd = new ChangeElementCommand(this.elem, { d: this.last_d }, text);
|
|
editorContext_.endChanges({ cmd: cmd, elem: this.elem });
|
|
}
|
|
}, {
|
|
key: 'addPtsToSelection',
|
|
value: function addPtsToSelection(indexes) {
|
|
if (!Array.isArray(indexes)) {
|
|
indexes = [indexes];
|
|
}
|
|
for (var _i4 = 0; _i4 < indexes.length; _i4++) {
|
|
var index = indexes[_i4];
|
|
var seg = this.segs[index];
|
|
if (seg.ptgrip) {
|
|
if (!this.selected_pts.includes(index) && index >= 0) {
|
|
this.selected_pts.push(index);
|
|
}
|
|
}
|
|
}
|
|
this.selected_pts.sort();
|
|
var i = this.selected_pts.length;
|
|
var grips = [];
|
|
grips.length = i;
|
|
// Loop through points to be selected and highlight each
|
|
while (i--) {
|
|
var pt = this.selected_pts[i];
|
|
var _seg2 = this.segs[pt];
|
|
_seg2.select(true);
|
|
grips[i] = _seg2.ptgrip;
|
|
}
|
|
|
|
var closedSubpath = this.subpathIsClosed(this.selected_pts[0]);
|
|
editorContext_.addPtsToSelection({ grips: grips, closedSubpath: closedSubpath });
|
|
}
|
|
}]);
|
|
return Path;
|
|
}();
|
|
|
|
var getPath_ = function getPath_(elem) {
|
|
var p = pathData[elem.id];
|
|
if (!p) {
|
|
p = pathData[elem.id] = new Path(elem);
|
|
}
|
|
return p;
|
|
};
|
|
|
|
var removePath_ = function removePath_(id) {
|
|
if (id in pathData) {
|
|
delete pathData[id];
|
|
}
|
|
};
|
|
|
|
var newcx = void 0,
|
|
newcy = void 0,
|
|
oldcx = void 0,
|
|
oldcy = void 0,
|
|
angle = void 0;
|
|
|
|
var getRotVals = function getRotVals(x, y) {
|
|
var dx = x - oldcx;
|
|
var dy = y - oldcy;
|
|
|
|
// rotate the point around the old center
|
|
var r = Math.sqrt(dx * dx + dy * dy);
|
|
var theta = Math.atan2(dy, dx) + angle;
|
|
dx = r * Math.cos(theta) + oldcx;
|
|
dy = r * Math.sin(theta) + oldcy;
|
|
|
|
// dx,dy should now hold the actual coordinates of each
|
|
// point after being rotated
|
|
|
|
// now we want to rotate them around the new center in the reverse direction
|
|
dx -= newcx;
|
|
dy -= newcy;
|
|
|
|
r = Math.sqrt(dx * dx + dy * dy);
|
|
theta = Math.atan2(dy, dx) - angle;
|
|
|
|
return { x: r * Math.cos(theta) + newcx,
|
|
y: r * Math.sin(theta) + newcy };
|
|
};
|
|
|
|
// If the path was rotated, we must now pay the piper:
|
|
// Every path point must be rotated into the rotated coordinate system of
|
|
// its old center, then determine the new center, then rotate it back
|
|
// This is because we want the path to remember its rotation
|
|
|
|
// TODO: This is still using ye olde transform methods, can probably
|
|
// be optimized or even taken care of by `recalculateDimensions`
|
|
var recalcRotatedPath = function recalcRotatedPath() {
|
|
var currentPath = path.elem;
|
|
angle = getRotationAngle(currentPath, true);
|
|
if (!angle) {
|
|
return;
|
|
}
|
|
// selectedBBoxes[0] = path.oldbbox;
|
|
var oldbox = path.oldbbox; // selectedBBoxes[0],
|
|
oldcx = oldbox.x + oldbox.width / 2;
|
|
oldcy = oldbox.y + oldbox.height / 2;
|
|
var box = getBBox(currentPath);
|
|
newcx = box.x + box.width / 2;
|
|
newcy = box.y + box.height / 2;
|
|
|
|
// un-rotate the new center to the proper position
|
|
var dx = newcx - oldcx,
|
|
dy = newcy - oldcy,
|
|
r = Math.sqrt(dx * dx + dy * dy),
|
|
theta = Math.atan2(dy, dx) + angle;
|
|
|
|
newcx = r * Math.cos(theta) + oldcx;
|
|
newcy = r * Math.sin(theta) + oldcy;
|
|
|
|
var list = currentPath.pathSegList;
|
|
|
|
var i = list.numberOfItems;
|
|
while (i) {
|
|
i -= 1;
|
|
var seg = list.getItem(i),
|
|
type = seg.pathSegType;
|
|
if (type === 1) {
|
|
continue;
|
|
}
|
|
|
|
var rvals = getRotVals(seg.x, seg.y),
|
|
points = [rvals.x, rvals.y];
|
|
if (seg.x1 != null && seg.x2 != null) {
|
|
var cVals1 = getRotVals(seg.x1, seg.y1);
|
|
var cVals2 = getRotVals(seg.x2, seg.y2);
|
|
points.splice(points.length, 0, cVals1.x, cVals1.y, cVals2.x, cVals2.y);
|
|
}
|
|
replacePathSeg(type, i, points);
|
|
} // loop for each point
|
|
|
|
box = getBBox(currentPath);
|
|
// selectedBBoxes[0].x = box.x; selectedBBoxes[0].y = box.y;
|
|
// selectedBBoxes[0].width = box.width; selectedBBoxes[0].height = box.height;
|
|
|
|
// now we must set the new transform to be rotated around the new center
|
|
var Rnc = editorContext_.getSVGRoot().createSVGTransform(),
|
|
tlist = getTransformList(currentPath);
|
|
Rnc.setRotate(angle * 180.0 / Math.PI, newcx, newcy);
|
|
tlist.replaceItem(Rnc, 0);
|
|
};
|
|
|
|
// ====================================
|
|
// Public API starts here
|
|
|
|
var clearData = function clearData() {
|
|
pathData = {};
|
|
};
|
|
|
|
// Making public for mocking
|
|
var reorientGrads = function reorientGrads(elem, m) {
|
|
var bb = getBBox(elem);
|
|
for (var i = 0; i < 2; i++) {
|
|
var type = i === 0 ? 'fill' : 'stroke';
|
|
var attrVal = elem.getAttribute(type);
|
|
if (attrVal && attrVal.startsWith('url(')) {
|
|
var grad = getRefElem(attrVal);
|
|
if (grad.tagName === 'linearGradient') {
|
|
var x1 = grad.getAttribute('x1') || 0;
|
|
var y1 = grad.getAttribute('y1') || 0;
|
|
var x2 = grad.getAttribute('x2') || 1;
|
|
var y2 = grad.getAttribute('y2') || 0;
|
|
|
|
// Convert to USOU points
|
|
x1 = bb.width * x1 + bb.x;
|
|
y1 = bb.height * y1 + bb.y;
|
|
x2 = bb.width * x2 + bb.x;
|
|
y2 = bb.height * y2 + bb.y;
|
|
|
|
// Transform those points
|
|
var pt1 = transformPoint(x1, y1, m);
|
|
var pt2 = transformPoint(x2, y2, m);
|
|
|
|
// Convert back to BB points
|
|
var gCoords = {};
|
|
|
|
gCoords.x1 = (pt1.x - bb.x) / bb.width;
|
|
gCoords.y1 = (pt1.y - bb.y) / bb.height;
|
|
gCoords.x2 = (pt2.x - bb.x) / bb.width;
|
|
gCoords.y2 = (pt2.y - bb.y) / bb.height;
|
|
|
|
var newgrad = grad.cloneNode(true);
|
|
$$1(newgrad).attr(gCoords);
|
|
|
|
newgrad.id = editorContext_.getNextId();
|
|
findDefs().appendChild(newgrad);
|
|
elem.setAttribute(type, 'url(#' + newgrad.id + ')');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// this is how we map paths to our preferred relative segment types
|
|
var pathMap = [0, 'z', 'M', 'm', 'L', 'l', 'C', 'c', 'Q', 'q', 'A', 'a', 'H', 'h', 'V', 'v', 'S', 's', 'T', 't'];
|
|
|
|
/**
|
|
* TODO: move to pathActions.js when migrating rest of pathActions out of svgcanvas.js
|
|
* Convert a path to one with only absolute or relative values
|
|
* @param {Object} path - the path to convert
|
|
* @param {boolean} toRel - true of convert to relative
|
|
* @returns {string}
|
|
*/
|
|
var convertPath = function convertPath(path, toRel) {
|
|
var segList = path.pathSegList;
|
|
var len = segList.numberOfItems;
|
|
var curx = 0,
|
|
cury = 0;
|
|
var d = '';
|
|
var lastM = null;
|
|
|
|
for (var i = 0; i < len; ++i) {
|
|
var seg = segList.getItem(i);
|
|
// if these properties are not in the segment, set them to zero
|
|
var x = seg.x || 0,
|
|
y = seg.y || 0,
|
|
x1 = seg.x1 || 0,
|
|
y1 = seg.y1 || 0,
|
|
x2 = seg.x2 || 0,
|
|
y2 = seg.y2 || 0;
|
|
|
|
var type = seg.pathSegType;
|
|
var letter = pathMap[type]['to' + (toRel ? 'Lower' : 'Upper') + 'Case']();
|
|
|
|
switch (type) {
|
|
case 1:
|
|
// z,Z closepath (Z/z)
|
|
d += 'z';
|
|
if (lastM && !toRel) {
|
|
curx = lastM[0];
|
|
cury = lastM[1];
|
|
}
|
|
break;
|
|
case 12:
|
|
// absolute horizontal line (H)
|
|
x -= curx;
|
|
// Fallthrough
|
|
case 13:
|
|
// relative horizontal line (h)
|
|
if (toRel) {
|
|
curx += x;
|
|
letter = 'l';
|
|
} else {
|
|
x += curx;
|
|
curx = x;
|
|
letter = 'L';
|
|
}
|
|
// Convert to "line" for easier editing
|
|
d += pathDSegment(letter, [[x, cury]]);
|
|
break;
|
|
case 14:
|
|
// absolute vertical line (V)
|
|
y -= cury;
|
|
// Fallthrough
|
|
case 15:
|
|
// relative vertical line (v)
|
|
if (toRel) {
|
|
cury += y;
|
|
letter = 'l';
|
|
} else {
|
|
y += cury;
|
|
cury = y;
|
|
letter = 'L';
|
|
}
|
|
// Convert to "line" for easier editing
|
|
d += pathDSegment(letter, [[curx, y]]);
|
|
break;
|
|
case 2: // absolute move (M)
|
|
case 4: // absolute line (L)
|
|
case 18:
|
|
// absolute smooth quad (T)
|
|
x -= curx;
|
|
y -= cury;
|
|
// Fallthrough
|
|
case 5: // relative line (l)
|
|
case 3: // relative move (m)
|
|
case 19:
|
|
// relative smooth quad (t)
|
|
if (toRel) {
|
|
curx += x;
|
|
cury += y;
|
|
} else {
|
|
x += curx;
|
|
y += cury;
|
|
curx = x;
|
|
cury = y;
|
|
}
|
|
if (type === 2 || type === 3) {
|
|
lastM = [curx, cury];
|
|
}
|
|
|
|
d += pathDSegment(letter, [[x, y]]);
|
|
break;
|
|
case 6:
|
|
// absolute cubic (C)
|
|
x -= curx;x1 -= curx;x2 -= curx;
|
|
y -= cury;y1 -= cury;y2 -= cury;
|
|
// Fallthrough
|
|
case 7:
|
|
// relative cubic (c)
|
|
if (toRel) {
|
|
curx += x;
|
|
cury += y;
|
|
} else {
|
|
x += curx;x1 += curx;x2 += curx;
|
|
y += cury;y1 += cury;y2 += cury;
|
|
curx = x;
|
|
cury = y;
|
|
}
|
|
d += pathDSegment(letter, [[x1, y1], [x2, y2], [x, y]]);
|
|
break;
|
|
case 8:
|
|
// absolute quad (Q)
|
|
x -= curx;x1 -= curx;
|
|
y -= cury;y1 -= cury;
|
|
// Fallthrough
|
|
case 9:
|
|
// relative quad (q)
|
|
if (toRel) {
|
|
curx += x;
|
|
cury += y;
|
|
} else {
|
|
x += curx;x1 += curx;
|
|
y += cury;y1 += cury;
|
|
curx = x;
|
|
cury = y;
|
|
}
|
|
d += pathDSegment(letter, [[x1, y1], [x, y]]);
|
|
break;
|
|
case 10:
|
|
// absolute elliptical arc (A)
|
|
x -= curx;
|
|
y -= cury;
|
|
// Fallthrough
|
|
case 11:
|
|
// relative elliptical arc (a)
|
|
if (toRel) {
|
|
curx += x;
|
|
cury += y;
|
|
} else {
|
|
x += curx;
|
|
y += cury;
|
|
curx = x;
|
|
cury = y;
|
|
}
|
|
d += pathDSegment(letter, [[seg.r1, seg.r2]], [seg.angle, seg.largeArcFlag ? 1 : 0, seg.sweepFlag ? 1 : 0], [x, y]);
|
|
break;
|
|
case 16:
|
|
// absolute smooth cubic (S)
|
|
x -= curx;x2 -= curx;
|
|
y -= cury;y2 -= cury;
|
|
// Fallthrough
|
|
case 17:
|
|
// relative smooth cubic (s)
|
|
if (toRel) {
|
|
curx += x;
|
|
cury += y;
|
|
} else {
|
|
x += curx;x2 += curx;
|
|
y += cury;y2 += cury;
|
|
curx = x;
|
|
cury = y;
|
|
}
|
|
d += pathDSegment(letter, [[x2, y2], [x, y]]);
|
|
break;
|
|
} // switch on path segment type
|
|
} // for each segment
|
|
return d;
|
|
};
|
|
|
|
/**
|
|
* TODO: refactor callers in convertPath to use getPathDFromSegments instead of this function.
|
|
* Legacy code refactored from svgcanvas.pathActions.convertPath
|
|
* @param letter - path segment command
|
|
* @param {Array.<Array.<number>>} points - x,y points.
|
|
* @param {Array.<Array.<number>>=} morePoints - x,y points
|
|
* @param {Array.<number>=}lastPoint - x,y point
|
|
* @returns {string}
|
|
*/
|
|
function pathDSegment(letter, points, morePoints, lastPoint) {
|
|
$$1.each(points, function (i, pnt) {
|
|
points[i] = shortFloat(pnt);
|
|
});
|
|
var segment = letter + points.join(' ');
|
|
if (morePoints) {
|
|
segment += ' ' + morePoints.join(' ');
|
|
}
|
|
if (lastPoint) {
|
|
segment += ' ' + shortFloat(lastPoint);
|
|
}
|
|
return segment;
|
|
}
|
|
|
|
/**
|
|
* Group: Path edit functions
|
|
* Functions relating to editing path elements
|
|
*/
|
|
var pathActions = function () {
|
|
var subpath = false;
|
|
var newPoint = void 0,
|
|
firstCtrl = void 0;
|
|
|
|
var currentPath = null;
|
|
var hasMoved = false;
|
|
// No `editorContext_` yet but should be ok as is `null` by default
|
|
// editorContext_.setDrawnPath(null);
|
|
|
|
// This function converts a polyline (created by the fh_path tool) into
|
|
// a path element and coverts every three line segments into a single bezier
|
|
// curve in an attempt to smooth out the free-hand
|
|
var smoothPolylineIntoPath = function smoothPolylineIntoPath(element) {
|
|
var i = void 0;
|
|
var _element = element,
|
|
points = _element.points;
|
|
|
|
var N = points.numberOfItems;
|
|
if (N >= 4) {
|
|
// loop through every 3 points and convert to a cubic bezier curve segment
|
|
//
|
|
// NOTE: this is cheating, it means that every 3 points has the potential to
|
|
// be a corner instead of treating each point in an equal manner. In general,
|
|
// this technique does not look that good.
|
|
//
|
|
// I am open to better ideas!
|
|
//
|
|
// Reading:
|
|
// - http://www.efg2.com/Lab/Graphics/Jean-YvesQueinecBezierCurves.htm
|
|
// - https://www.codeproject.com/KB/graphics/BezierSpline.aspx?msg=2956963
|
|
// - https://www.ian-ko.com/ET_GeoWizards/UserGuide/smooth.htm
|
|
// - https://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/Bezier/bezier-der.html
|
|
var curpos = points.getItem(0),
|
|
prevCtlPt = null;
|
|
var d = [];
|
|
d.push(['M', curpos.x, ',', curpos.y, ' C'].join(''));
|
|
for (i = 1; i <= N - 4; i += 3) {
|
|
var ct1 = points.getItem(i);
|
|
var ct2 = points.getItem(i + 1);
|
|
var end = points.getItem(i + 2);
|
|
|
|
// if the previous segment had a control point, we want to smooth out
|
|
// the control points on both sides
|
|
if (prevCtlPt) {
|
|
var newpts = smoothControlPoints(prevCtlPt, ct1, curpos);
|
|
if (newpts && newpts.length === 2) {
|
|
var prevArr = d[d.length - 1].split(',');
|
|
prevArr[2] = newpts[0].x;
|
|
prevArr[3] = newpts[0].y;
|
|
d[d.length - 1] = prevArr.join(',');
|
|
ct1 = newpts[1];
|
|
}
|
|
}
|
|
|
|
d.push([ct1.x, ct1.y, ct2.x, ct2.y, end.x, end.y].join(','));
|
|
|
|
curpos = end;
|
|
prevCtlPt = ct2;
|
|
}
|
|
// handle remaining line segments
|
|
d.push('L');
|
|
while (i < N) {
|
|
var pt = points.getItem(i);
|
|
d.push([pt.x, pt.y].join(','));
|
|
i++;
|
|
}
|
|
d = d.join(' ');
|
|
|
|
// create new path element
|
|
element = editorContext_.addSvgElementFromJson({
|
|
element: 'path',
|
|
curStyles: true,
|
|
attr: {
|
|
id: editorContext_.getId(),
|
|
d: d,
|
|
fill: 'none'
|
|
}
|
|
});
|
|
// No need to call "changed", as this is already done under mouseUp
|
|
}
|
|
return element;
|
|
};
|
|
|
|
return {
|
|
mouseDown: function mouseDown(evt, mouseTarget, startX, startY) {
|
|
var id = void 0;
|
|
if (editorContext_.getCurrentMode() === 'path') {
|
|
var mouseX = startX; // Was this meant to work with the other `mouseX`? (was defined globally so adding `let` to at least avoid a global)
|
|
var mouseY = startY; // Was this meant to work with the other `mouseY`? (was defined globally so adding `let` to at least avoid a global)
|
|
|
|
var currentZoom = editorContext_.getCurrentZoom();
|
|
var x = mouseX / currentZoom,
|
|
y = mouseY / currentZoom,
|
|
stretchy = getElem('path_stretch_line');
|
|
newPoint = [x, y];
|
|
|
|
if (editorContext_.getGridSnapping()) {
|
|
x = snapToGrid(x);
|
|
y = snapToGrid(y);
|
|
mouseX = snapToGrid(mouseX);
|
|
mouseY = snapToGrid(mouseY);
|
|
}
|
|
|
|
if (!stretchy) {
|
|
stretchy = document.createElementNS(NS.SVG, 'path');
|
|
assignAttributes(stretchy, {
|
|
id: 'path_stretch_line',
|
|
stroke: '#22C',
|
|
'stroke-width': '0.5',
|
|
fill: 'none'
|
|
});
|
|
stretchy = getElem('selectorParentGroup').appendChild(stretchy);
|
|
}
|
|
stretchy.setAttribute('display', 'inline');
|
|
|
|
var keep = null;
|
|
var index = void 0;
|
|
// if pts array is empty, create path element with M at current point
|
|
var drawnPath = editorContext_.getDrawnPath();
|
|
if (!drawnPath) {
|
|
var dAttr = 'M' + x + ',' + y + ' '; // Was this meant to work with the other `dAttr`? (was defined globally so adding `var` to at least avoid a global)
|
|
drawnPath = editorContext_.setDrawnPath(editorContext_.addSvgElementFromJson({
|
|
element: 'path',
|
|
curStyles: true,
|
|
attr: {
|
|
d: dAttr,
|
|
id: editorContext_.getNextId(),
|
|
opacity: editorContext_.getOpacity() / 2
|
|
}
|
|
}));
|
|
// set stretchy line to first point
|
|
stretchy.setAttribute('d', ['M', mouseX, mouseY, mouseX, mouseY].join(' '));
|
|
index = subpath ? path.segs.length : 0;
|
|
addPointGrip(index, mouseX, mouseY);
|
|
} else {
|
|
// determine if we clicked on an existing point
|
|
var seglist = drawnPath.pathSegList;
|
|
var i = seglist.numberOfItems;
|
|
var FUZZ = 6 / currentZoom;
|
|
var clickOnPoint = false;
|
|
while (i) {
|
|
i--;
|
|
var item = seglist.getItem(i);
|
|
var px = item.x,
|
|
py = item.y;
|
|
// found a matching point
|
|
if (x >= px - FUZZ && x <= px + FUZZ && y >= py - FUZZ && y <= py + FUZZ) {
|
|
clickOnPoint = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// get path element that we are in the process of creating
|
|
id = editorContext_.getId();
|
|
|
|
// Remove previous path object if previously created
|
|
removePath_(id);
|
|
|
|
var newpath = getElem(id);
|
|
var newseg = void 0;
|
|
var sSeg = void 0;
|
|
var len = seglist.numberOfItems;
|
|
// if we clicked on an existing point, then we are done this path, commit it
|
|
// (i, i+1) are the x,y that were clicked on
|
|
if (clickOnPoint) {
|
|
// if clicked on any other point but the first OR
|
|
// the first point was clicked on and there are less than 3 points
|
|
// then leave the path open
|
|
// otherwise, close the path
|
|
if (i <= 1 && len >= 2) {
|
|
// Create end segment
|
|
var absX = seglist.getItem(0).x;
|
|
var absY = seglist.getItem(0).y;
|
|
|
|
sSeg = stretchy.pathSegList.getItem(1);
|
|
if (sSeg.pathSegType === 4) {
|
|
newseg = drawnPath.createSVGPathSegLinetoAbs(absX, absY);
|
|
} else {
|
|
newseg = drawnPath.createSVGPathSegCurvetoCubicAbs(absX, absY, sSeg.x1 / currentZoom, sSeg.y1 / currentZoom, absX, absY);
|
|
}
|
|
|
|
var endseg = drawnPath.createSVGPathSegClosePath();
|
|
seglist.appendItem(newseg);
|
|
seglist.appendItem(endseg);
|
|
} else if (len < 3) {
|
|
keep = false;
|
|
return keep;
|
|
}
|
|
$$1(stretchy).remove();
|
|
|
|
// This will signal to commit the path
|
|
// const element = newpath; // Other event handlers define own `element`, so this was probably not meant to interact with them or one which shares state (as there were none); I therefore adding a missing `var` to avoid a global
|
|
drawnPath = editorContext_.setDrawnPath(null);
|
|
editorContext_.setStarted(false);
|
|
|
|
if (subpath) {
|
|
if (path.matrix) {
|
|
editorContext_.remapElement(newpath, {}, path.matrix.inverse());
|
|
}
|
|
|
|
var newD = newpath.getAttribute('d');
|
|
var origD = $$1(path.elem).attr('d');
|
|
$$1(path.elem).attr('d', origD + newD);
|
|
$$1(newpath).remove();
|
|
if (path.matrix) {
|
|
recalcRotatedPath();
|
|
}
|
|
init$1();
|
|
pathActions.toEditMode(path.elem);
|
|
path.selectPt();
|
|
return false;
|
|
}
|
|
// else, create a new point, update path element
|
|
} else {
|
|
// Checks if current target or parents are #svgcontent
|
|
if (!$$1.contains(editorContext_.getContainer(), editorContext_.getMouseTarget(evt))) {
|
|
// Clicked outside canvas, so don't make point
|
|
console.log('Clicked outside canvas');
|
|
return false;
|
|
}
|
|
|
|
var num = drawnPath.pathSegList.numberOfItems;
|
|
var last = drawnPath.pathSegList.getItem(num - 1);
|
|
var lastx = last.x,
|
|
lasty = last.y;
|
|
|
|
if (evt.shiftKey) {
|
|
var xya = snapToAngle(lastx, lasty, x, y);
|
|
x = xya.x;
|
|
y = xya.y;
|
|
}
|
|
|
|
// Use the segment defined by stretchy
|
|
sSeg = stretchy.pathSegList.getItem(1);
|
|
if (sSeg.pathSegType === 4) {
|
|
newseg = drawnPath.createSVGPathSegLinetoAbs(editorContext_.round(x), editorContext_.round(y));
|
|
} else {
|
|
newseg = drawnPath.createSVGPathSegCurvetoCubicAbs(editorContext_.round(x), editorContext_.round(y), sSeg.x1 / currentZoom, sSeg.y1 / currentZoom, sSeg.x2 / currentZoom, sSeg.y2 / currentZoom);
|
|
}
|
|
|
|
drawnPath.pathSegList.appendItem(newseg);
|
|
|
|
x *= currentZoom;
|
|
y *= currentZoom;
|
|
|
|
// set stretchy line to latest point
|
|
stretchy.setAttribute('d', ['M', x, y, x, y].join(' '));
|
|
index = num;
|
|
if (subpath) {
|
|
index += path.segs.length;
|
|
}
|
|
addPointGrip(index, x, y);
|
|
}
|
|
// keep = true;
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
// TODO: Make sure currentPath isn't null at this point
|
|
if (!path) {
|
|
return;
|
|
}
|
|
|
|
path.storeD();
|
|
|
|
id = evt.target.id;
|
|
|
|
var curPt = void 0;
|
|
if (id.substr(0, 14) === 'pathpointgrip_') {
|
|
// Select this point
|
|
curPt = path.cur_pt = parseInt(id.substr(14), 10);
|
|
path.dragging = [startX, startY];
|
|
var seg = path.segs[curPt];
|
|
|
|
// only clear selection if shift is not pressed (otherwise, add
|
|
// node to selection)
|
|
if (!evt.shiftKey) {
|
|
if (path.selected_pts.length <= 1 || !seg.selected) {
|
|
path.clearSelection();
|
|
}
|
|
path.addPtsToSelection(curPt);
|
|
} else if (seg.selected) {
|
|
path.removePtFromSelection(curPt);
|
|
} else {
|
|
path.addPtsToSelection(curPt);
|
|
}
|
|
} else if (id.startsWith('ctrlpointgrip_')) {
|
|
path.dragging = [startX, startY];
|
|
|
|
var parts = id.split('_')[1].split('c');
|
|
curPt = Number(parts[0]);
|
|
var ctrlNum = Number(parts[1]);
|
|
path.selectPt(curPt, ctrlNum);
|
|
}
|
|
|
|
// Start selection box
|
|
if (!path.dragging) {
|
|
var rubberBox = editorContext_.getRubberBox();
|
|
if (rubberBox == null) {
|
|
rubberBox = editorContext_.setRubberBox(editorContext_.selectorManager.getRubberBandBox());
|
|
}
|
|
var _currentZoom = editorContext_.getCurrentZoom();
|
|
assignAttributes(rubberBox, {
|
|
x: startX * _currentZoom,
|
|
y: startY * _currentZoom,
|
|
width: 0,
|
|
height: 0,
|
|
display: 'inline'
|
|
}, 100);
|
|
}
|
|
},
|
|
mouseMove: function mouseMove(mouseX, mouseY) {
|
|
var currentZoom = editorContext_.getCurrentZoom();
|
|
hasMoved = true;
|
|
var drawnPath = editorContext_.getDrawnPath();
|
|
if (editorContext_.getCurrentMode() === 'path') {
|
|
if (!drawnPath) {
|
|
return;
|
|
}
|
|
var seglist = drawnPath.pathSegList;
|
|
var index = seglist.numberOfItems - 1;
|
|
|
|
if (newPoint) {
|
|
// First point
|
|
// if (!index) { return; }
|
|
|
|
// Set control points
|
|
var pointGrip1 = addCtrlGrip('1c1');
|
|
var pointGrip2 = addCtrlGrip('0c2');
|
|
|
|
// dragging pointGrip1
|
|
pointGrip1.setAttribute('cx', mouseX);
|
|
pointGrip1.setAttribute('cy', mouseY);
|
|
pointGrip1.setAttribute('display', 'inline');
|
|
|
|
var ptX = newPoint[0];
|
|
var ptY = newPoint[1];
|
|
|
|
// set curve
|
|
// const seg = seglist.getItem(index);
|
|
var curX = mouseX / currentZoom;
|
|
var curY = mouseY / currentZoom;
|
|
var altX = ptX + (ptX - curX);
|
|
var altY = ptY + (ptY - curY);
|
|
|
|
pointGrip2.setAttribute('cx', altX * currentZoom);
|
|
pointGrip2.setAttribute('cy', altY * currentZoom);
|
|
pointGrip2.setAttribute('display', 'inline');
|
|
|
|
var ctrlLine = getCtrlLine(1);
|
|
assignAttributes(ctrlLine, {
|
|
x1: mouseX,
|
|
y1: mouseY,
|
|
x2: altX * currentZoom,
|
|
y2: altY * currentZoom,
|
|
display: 'inline'
|
|
});
|
|
|
|
if (index === 0) {
|
|
firstCtrl = [mouseX, mouseY];
|
|
} else {
|
|
var last = seglist.getItem(index - 1);
|
|
var lastX = last.x;
|
|
var lastY = last.y;
|
|
|
|
if (last.pathSegType === 6) {
|
|
lastX += lastX - last.x2;
|
|
lastY += lastY - last.y2;
|
|
} else if (firstCtrl) {
|
|
lastX = firstCtrl[0] / currentZoom;
|
|
lastY = firstCtrl[1] / currentZoom;
|
|
}
|
|
replacePathSeg(6, index, [ptX, ptY, lastX, lastY, altX, altY], drawnPath);
|
|
}
|
|
} else {
|
|
var stretchy = getElem('path_stretch_line');
|
|
if (stretchy) {
|
|
var prev = seglist.getItem(index);
|
|
if (prev.pathSegType === 6) {
|
|
var prevX = prev.x + (prev.x - prev.x2);
|
|
var prevY = prev.y + (prev.y - prev.y2);
|
|
replacePathSeg(6, 1, [mouseX, mouseY, prevX * currentZoom, prevY * currentZoom, mouseX, mouseY], stretchy);
|
|
} else if (firstCtrl) {
|
|
replacePathSeg(6, 1, [mouseX, mouseY, firstCtrl[0], firstCtrl[1], mouseX, mouseY], stretchy);
|
|
} else {
|
|
replacePathSeg(4, 1, [mouseX, mouseY], stretchy);
|
|
}
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
// if we are dragging a point, let's move it
|
|
if (path.dragging) {
|
|
var pt = getPointFromGrip({
|
|
x: path.dragging[0],
|
|
y: path.dragging[1]
|
|
}, path);
|
|
var mpt = getPointFromGrip({
|
|
x: mouseX,
|
|
y: mouseY
|
|
}, path);
|
|
var diffX = mpt.x - pt.x;
|
|
var diffY = mpt.y - pt.y;
|
|
path.dragging = [mouseX, mouseY];
|
|
|
|
if (path.dragctrl) {
|
|
path.moveCtrl(diffX, diffY);
|
|
} else {
|
|
path.movePts(diffX, diffY);
|
|
}
|
|
} else {
|
|
path.selected_pts = [];
|
|
path.eachSeg(function (i) {
|
|
var seg = this;
|
|
if (!seg.next && !seg.prev) {
|
|
return;
|
|
}
|
|
|
|
// const {item} = seg;
|
|
var rubberBox = editorContext_.getRubberBox();
|
|
var rbb = rubberBox.getBBox();
|
|
|
|
var pt = getGripPt(seg);
|
|
var ptBb = {
|
|
x: pt.x,
|
|
y: pt.y,
|
|
width: 0,
|
|
height: 0
|
|
};
|
|
|
|
var sel = rectsIntersect(rbb, ptBb);
|
|
|
|
this.select(sel);
|
|
// Note that addPtsToSelection is not being run
|
|
if (sel) {
|
|
path.selected_pts.push(seg.index);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
mouseUp: function mouseUp(evt, element, mouseX, mouseY) {
|
|
var drawnPath = editorContext_.getDrawnPath();
|
|
// Create mode
|
|
if (editorContext_.getCurrentMode() === 'path') {
|
|
newPoint = null;
|
|
if (!drawnPath) {
|
|
element = getElem(editorContext_.getId());
|
|
editorContext_.setStarted(false);
|
|
firstCtrl = null;
|
|
}
|
|
|
|
return {
|
|
keep: true,
|
|
element: element
|
|
};
|
|
}
|
|
|
|
// Edit mode
|
|
var rubberBox = editorContext_.getRubberBox();
|
|
if (path.dragging) {
|
|
var lastPt = path.cur_pt;
|
|
|
|
path.dragging = false;
|
|
path.dragctrl = false;
|
|
path.update();
|
|
|
|
if (hasMoved) {
|
|
path.endChanges('Move path point(s)');
|
|
}
|
|
|
|
if (!evt.shiftKey && !hasMoved) {
|
|
path.selectPt(lastPt);
|
|
}
|
|
} else if (rubberBox && rubberBox.getAttribute('display') !== 'none') {
|
|
// Done with multi-node-select
|
|
rubberBox.setAttribute('display', 'none');
|
|
|
|
if (rubberBox.getAttribute('width') <= 2 && rubberBox.getAttribute('height') <= 2) {
|
|
pathActions.toSelectMode(evt.target);
|
|
}
|
|
|
|
// else, move back to select mode
|
|
} else {
|
|
pathActions.toSelectMode(evt.target);
|
|
}
|
|
hasMoved = false;
|
|
},
|
|
toEditMode: function toEditMode(element) {
|
|
path = getPath_(element);
|
|
editorContext_.setCurrentMode('pathedit');
|
|
editorContext_.clearSelection();
|
|
path.show(true).update();
|
|
path.oldbbox = getBBox(path.elem);
|
|
subpath = false;
|
|
},
|
|
toSelectMode: function toSelectMode(elem) {
|
|
var selPath = elem === path.elem;
|
|
editorContext_.setCurrentMode('select');
|
|
path.show(false);
|
|
currentPath = false;
|
|
editorContext_.clearSelection();
|
|
|
|
if (path.matrix) {
|
|
// Rotated, so may need to re-calculate the center
|
|
recalcRotatedPath();
|
|
}
|
|
|
|
if (selPath) {
|
|
editorContext_.call('selected', [elem]);
|
|
editorContext_.addToSelection([elem], true);
|
|
}
|
|
},
|
|
addSubPath: function addSubPath(on) {
|
|
if (on) {
|
|
// Internally we go into "path" mode, but in the UI it will
|
|
// still appear as if in "pathedit" mode.
|
|
editorContext_.setCurrentMode('path');
|
|
subpath = true;
|
|
} else {
|
|
pathActions.clear(true);
|
|
pathActions.toEditMode(path.elem);
|
|
}
|
|
},
|
|
select: function select(target) {
|
|
if (currentPath === target) {
|
|
pathActions.toEditMode(target);
|
|
editorContext_.setCurrentMode('pathedit');
|
|
// going into pathedit mode
|
|
} else {
|
|
currentPath = target;
|
|
}
|
|
},
|
|
reorient: function reorient() {
|
|
var elem = editorContext_.getSelectedElements()[0];
|
|
if (!elem) {
|
|
return;
|
|
}
|
|
var angle = getRotationAngle(elem);
|
|
if (angle === 0) {
|
|
return;
|
|
}
|
|
|
|
var batchCmd = new BatchCommand('Reorient path');
|
|
var changes = {
|
|
d: elem.getAttribute('d'),
|
|
transform: elem.getAttribute('transform')
|
|
};
|
|
batchCmd.addSubCommand(new ChangeElementCommand(elem, changes));
|
|
editorContext_.clearSelection();
|
|
this.resetOrientation(elem);
|
|
|
|
editorContext_.addCommandToHistory(batchCmd);
|
|
|
|
// Set matrix to null
|
|
getPath_(elem).show(false).matrix = null;
|
|
|
|
this.clear();
|
|
|
|
editorContext_.addToSelection([elem], true);
|
|
editorContext_.call('changed', editorContext_.getSelectedElements());
|
|
},
|
|
clear: function clear(remove) {
|
|
var drawnPath = editorContext_.getDrawnPath();
|
|
currentPath = null;
|
|
if (drawnPath) {
|
|
var elem = getElem(editorContext_.getId());
|
|
$$1(getElem('path_stretch_line')).remove();
|
|
$$1(elem).remove();
|
|
$$1(getElem('pathpointgrip_container')).find('*').attr('display', 'none');
|
|
firstCtrl = null;
|
|
editorContext_.setDrawnPath(null);
|
|
editorContext_.setStarted(false);
|
|
} else if (editorContext_.getCurrentMode() === 'pathedit') {
|
|
this.toSelectMode();
|
|
}
|
|
if (path) {
|
|
path.init().show(false);
|
|
}
|
|
},
|
|
resetOrientation: function resetOrientation(pth) {
|
|
if (pth == null || pth.nodeName !== 'path') {
|
|
return false;
|
|
}
|
|
var tlist = getTransformList(pth);
|
|
var m = transformListToTransform(tlist).matrix;
|
|
tlist.clear();
|
|
pth.removeAttribute('transform');
|
|
var segList = pth.pathSegList;
|
|
|
|
// Opera/win/non-EN throws an error here.
|
|
// TODO: Find out why!
|
|
// Presumed fixed in Opera 10.5, so commented out for now
|
|
|
|
// try {
|
|
var len = segList.numberOfItems;
|
|
// } catch(err) {
|
|
// const fixed_d = pathActions.convertPath(pth);
|
|
// pth.setAttribute('d', fixed_d);
|
|
// segList = pth.pathSegList;
|
|
// const len = segList.numberOfItems;
|
|
// }
|
|
// let lastX, lastY;
|
|
|
|
var _loop = function _loop(i) {
|
|
var seg = segList.getItem(i);
|
|
var type = seg.pathSegType;
|
|
if (type === 1) {
|
|
return 'continue';
|
|
}
|
|
var pts = [];
|
|
$$1.each(['', 1, 2], function (j, n) {
|
|
var x = seg['x' + n],
|
|
y = seg['y' + n];
|
|
if (x !== undefined && y !== undefined) {
|
|
var pt = transformPoint(x, y, m);
|
|
pts.splice(pts.length, 0, pt.x, pt.y);
|
|
}
|
|
});
|
|
replacePathSeg(type, i, pts, pth);
|
|
};
|
|
|
|
for (var i = 0; i < len; ++i) {
|
|
var _ret = _loop(i);
|
|
|
|
if (_ret === 'continue') continue;
|
|
}
|
|
|
|
reorientGrads(pth, m);
|
|
},
|
|
zoomChange: function zoomChange() {
|
|
if (editorContext_.getCurrentMode() === 'pathedit') {
|
|
path.update();
|
|
}
|
|
},
|
|
getNodePoint: function getNodePoint() {
|
|
var selPt = path.selected_pts.length ? path.selected_pts[0] : 1;
|
|
|
|
var seg = path.segs[selPt];
|
|
return {
|
|
x: seg.item.x,
|
|
y: seg.item.y,
|
|
type: seg.type
|
|
};
|
|
},
|
|
linkControlPoints: function linkControlPoints(linkPoints) {
|
|
setLinkControlPoints(linkPoints);
|
|
},
|
|
clonePathNode: function clonePathNode() {
|
|
path.storeD();
|
|
|
|
var selPts = path.selected_pts;
|
|
// const {segs} = path;
|
|
|
|
var i = selPts.length;
|
|
var nums = [];
|
|
|
|
while (i--) {
|
|
var pt = selPts[i];
|
|
path.addSeg(pt);
|
|
|
|
nums.push(pt + i);
|
|
nums.push(pt + i + 1);
|
|
}
|
|
path.init().addPtsToSelection(nums);
|
|
|
|
path.endChanges('Clone path node(s)');
|
|
},
|
|
opencloseSubPath: function opencloseSubPath() {
|
|
var selPts = path.selected_pts;
|
|
// Only allow one selected node for now
|
|
if (selPts.length !== 1) {
|
|
return;
|
|
}
|
|
|
|
var _path = path,
|
|
elem = _path.elem;
|
|
|
|
var list = elem.pathSegList;
|
|
|
|
// const len = list.numberOfItems;
|
|
|
|
var index = selPts[0];
|
|
|
|
var openPt = null;
|
|
var startItem = null;
|
|
|
|
// Check if subpath is already open
|
|
path.eachSeg(function (i) {
|
|
if (this.type === 2 && i <= index) {
|
|
startItem = this.item;
|
|
}
|
|
if (i <= index) {
|
|
return true;
|
|
}
|
|
if (this.type === 2) {
|
|
// Found M first, so open
|
|
openPt = i;
|
|
return false;
|
|
}
|
|
if (this.type === 1) {
|
|
// Found Z first, so closed
|
|
openPt = false;
|
|
return false;
|
|
}
|
|
});
|
|
|
|
if (openPt == null) {
|
|
// Single path, so close last seg
|
|
openPt = path.segs.length - 1;
|
|
}
|
|
|
|
if (openPt !== false) {
|
|
// Close this path
|
|
|
|
// Create a line going to the previous "M"
|
|
var newseg = elem.createSVGPathSegLinetoAbs(startItem.x, startItem.y);
|
|
|
|
var closer = elem.createSVGPathSegClosePath();
|
|
if (openPt === path.segs.length - 1) {
|
|
list.appendItem(newseg);
|
|
list.appendItem(closer);
|
|
} else {
|
|
insertItemBefore(elem, closer, openPt);
|
|
insertItemBefore(elem, newseg, openPt);
|
|
}
|
|
|
|
path.init().selectPt(openPt + 1);
|
|
return;
|
|
}
|
|
|
|
// M 1,1 L 2,2 L 3,3 L 1,1 z // open at 2,2
|
|
// M 2,2 L 3,3 L 1,1
|
|
|
|
// M 1,1 L 2,2 L 1,1 z M 4,4 L 5,5 L6,6 L 5,5 z
|
|
// M 1,1 L 2,2 L 1,1 z [M 4,4] L 5,5 L(M)6,6 L 5,5 z
|
|
|
|
var seg = path.segs[index];
|
|
|
|
if (seg.mate) {
|
|
list.removeItem(index); // Removes last "L"
|
|
list.removeItem(index); // Removes the "Z"
|
|
path.init().selectPt(index - 1);
|
|
return;
|
|
}
|
|
|
|
var lastM = void 0,
|
|
zSeg = void 0;
|
|
|
|
// Find this sub-path's closing point and remove
|
|
for (var i = 0; i < list.numberOfItems; i++) {
|
|
var item = list.getItem(i);
|
|
|
|
if (item.pathSegType === 2) {
|
|
// Find the preceding M
|
|
lastM = i;
|
|
} else if (i === index) {
|
|
// Remove it
|
|
list.removeItem(lastM);
|
|
// index--;
|
|
} else if (item.pathSegType === 1 && index < i) {
|
|
// Remove the closing seg of this subpath
|
|
zSeg = i - 1;
|
|
list.removeItem(i);
|
|
break;
|
|
}
|
|
}
|
|
|
|
var num = index - lastM - 1;
|
|
|
|
while (num--) {
|
|
insertItemBefore(elem, list.getItem(lastM), zSeg);
|
|
}
|
|
|
|
var pt = list.getItem(lastM);
|
|
|
|
// Make this point the new "M"
|
|
replacePathSeg(2, lastM, [pt.x, pt.y]);
|
|
|
|
// i = index; // i is local here, so has no effect; what was the intent for this?
|
|
|
|
path.init().selectPt(0);
|
|
},
|
|
deletePathNode: function deletePathNode() {
|
|
if (!pathActions.canDeleteNodes) {
|
|
return;
|
|
}
|
|
path.storeD();
|
|
|
|
var selPts = path.selected_pts;
|
|
|
|
var i = selPts.length;
|
|
while (i--) {
|
|
var pt = selPts[i];
|
|
path.deleteSeg(pt);
|
|
}
|
|
|
|
// Cleanup
|
|
var cleanup = function cleanup() {
|
|
var segList = path.elem.pathSegList;
|
|
var len = segList.numberOfItems;
|
|
|
|
var remItems = function remItems(pos, count) {
|
|
while (count--) {
|
|
segList.removeItem(pos);
|
|
}
|
|
};
|
|
|
|
if (len <= 1) {
|
|
return true;
|
|
}
|
|
|
|
while (len--) {
|
|
var item = segList.getItem(len);
|
|
if (item.pathSegType === 1) {
|
|
var prev = segList.getItem(len - 1);
|
|
var nprev = segList.getItem(len - 2);
|
|
if (prev.pathSegType === 2) {
|
|
remItems(len - 1, 2);
|
|
cleanup();
|
|
break;
|
|
} else if (nprev.pathSegType === 2) {
|
|
remItems(len - 2, 3);
|
|
cleanup();
|
|
break;
|
|
}
|
|
} else if (item.pathSegType === 2) {
|
|
if (len > 0) {
|
|
var prevType = segList.getItem(len - 1).pathSegType;
|
|
// Path has M M
|
|
if (prevType === 2) {
|
|
remItems(len - 1, 1);
|
|
cleanup();
|
|
break;
|
|
// Entire path ends with Z M
|
|
} else if (prevType === 1 && segList.numberOfItems - 1 === len) {
|
|
remItems(len, 1);
|
|
cleanup();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
|
|
cleanup();
|
|
|
|
// Completely delete a path with 1 or 0 segments
|
|
if (path.elem.pathSegList.numberOfItems <= 1) {
|
|
pathActions.toSelectMode(path.elem);
|
|
editorContext_.canvas.deleteSelectedElements();
|
|
return;
|
|
}
|
|
|
|
path.init();
|
|
path.clearSelection();
|
|
|
|
// TODO: Find right way to select point now
|
|
// path.selectPt(selPt);
|
|
if (window.opera) {
|
|
// Opera repaints incorrectly
|
|
var cp = $$1(path.elem);
|
|
cp.attr('d', cp.attr('d'));
|
|
}
|
|
path.endChanges('Delete path node(s)');
|
|
},
|
|
|
|
smoothPolylineIntoPath: smoothPolylineIntoPath,
|
|
setSegType: function setSegType(v) {
|
|
path.setSegType(v);
|
|
},
|
|
moveNode: function moveNode(attr, newValue) {
|
|
var selPts = path.selected_pts;
|
|
if (!selPts.length) {
|
|
return;
|
|
}
|
|
|
|
path.storeD();
|
|
|
|
// Get first selected point
|
|
var seg = path.segs[selPts[0]];
|
|
var diff = { x: 0, y: 0 };
|
|
diff[attr] = newValue - seg.item[attr];
|
|
|
|
seg.move(diff.x, diff.y);
|
|
path.endChanges('Move path point');
|
|
},
|
|
fixEnd: function fixEnd(elem) {
|
|
// Adds an extra segment if the last seg before a Z doesn't end
|
|
// at its M point
|
|
// M0,0 L0,100 L100,100 z
|
|
var segList = elem.pathSegList;
|
|
var len = segList.numberOfItems;
|
|
var lastM = void 0;
|
|
for (var i = 0; i < len; ++i) {
|
|
var item = segList.getItem(i);
|
|
if (item.pathSegType === 2) {
|
|
lastM = item;
|
|
}
|
|
|
|
if (item.pathSegType === 1) {
|
|
var prev = segList.getItem(i - 1);
|
|
if (prev.x !== lastM.x || prev.y !== lastM.y) {
|
|
// Add an L segment here
|
|
var newseg = elem.createSVGPathSegLinetoAbs(lastM.x, lastM.y);
|
|
insertItemBefore(elem, newseg, i);
|
|
// Can this be done better?
|
|
pathActions.fixEnd(elem);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (isWebkit()) {
|
|
editorContext_.resetD(elem);
|
|
}
|
|
},
|
|
|
|
// Convert a path to one with only absolute or relative values
|
|
convertPath: convertPath
|
|
};
|
|
}();
|
|
|
|
/* globals jQuery, ActiveXObject */
|
|
|
|
// Constants
|
|
var $$2 = jqPluginSVG(jQuery);
|
|
|
|
// String used to encode base64.
|
|
var KEYSTR = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
|
|
|
|
// Much faster than running getBBox() every time
|
|
var visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use';
|
|
var visElemsArr = visElems.split(',');
|
|
// const hidElems = 'clipPath,defs,desc,feGaussianBlur,filter,linearGradient,marker,mask,metadata,pattern,radialGradient,stop,switch,symbol,title,textPath';
|
|
|
|
var editorContext_$1 = null;
|
|
var domdoc_ = null;
|
|
var domcontainer_ = null;
|
|
var svgroot_ = null;
|
|
|
|
var init$2 = function init$$1(editorContext) {
|
|
editorContext_$1 = editorContext;
|
|
domdoc_ = editorContext.getDOMDocument();
|
|
domcontainer_ = editorContext.getDOMContainer();
|
|
svgroot_ = editorContext.getSVGRoot();
|
|
};
|
|
|
|
/**
|
|
* Converts characters in a string to XML-friendly entities.
|
|
* @example: '&' becomes '&'
|
|
* @param str - The string to be converted
|
|
* @returns {String} The converted string
|
|
*/
|
|
var toXml = function toXml(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, '"').replace(/'/, ''');
|
|
};
|
|
|
|
// 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
|
|
var encode64 = 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
|
|
}
|
|
var output = [];
|
|
output.length = Math.floor((input.length + 2) / 3) * 4;
|
|
|
|
var i = 0,
|
|
p = 0;
|
|
do {
|
|
var chr1 = input.charCodeAt(i++);
|
|
var chr2 = input.charCodeAt(i++);
|
|
var chr3 = input.charCodeAt(i++);
|
|
|
|
var enc1 = chr1 >> 2;
|
|
var enc2 = (chr1 & 3) << 4 | chr2 >> 4;
|
|
|
|
var enc3 = (chr2 & 15) << 2 | chr3 >> 6;
|
|
var enc4 = chr3 & 63;
|
|
|
|
if (isNaN(chr2)) {
|
|
enc3 = enc4 = 64;
|
|
} else if (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
|
|
var decode64 = 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-z0-9+/=]/g, '');
|
|
|
|
var output = '';
|
|
var i = 0;
|
|
|
|
do {
|
|
var enc1 = KEYSTR.indexOf(input.charAt(i++));
|
|
var enc2 = KEYSTR.indexOf(input.charAt(i++));
|
|
var enc3 = KEYSTR.indexOf(input.charAt(i++));
|
|
var enc4 = KEYSTR.indexOf(input.charAt(i++));
|
|
|
|
var chr1 = enc1 << 2 | enc2 >> 4;
|
|
var chr2 = (enc2 & 15) << 4 | enc3 >> 2;
|
|
var chr3 = (enc3 & 3) << 6 | enc4;
|
|
|
|
output += String.fromCharCode(chr1);
|
|
|
|
if (enc3 !== 64) {
|
|
output = output + String.fromCharCode(chr2);
|
|
}
|
|
if (enc4 !== 64) {
|
|
output = output + String.fromCharCode(chr3);
|
|
}
|
|
} while (i < input.length);
|
|
return decodeUTF8(output);
|
|
};
|
|
|
|
var decodeUTF8 = 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
|
|
var encodeUTF8 = function encodeUTF8(argString) {
|
|
return unescape(encodeURIComponent(argString));
|
|
};
|
|
|
|
/**
|
|
* convert dataURL to object URL
|
|
* @param {string} dataurl
|
|
* @return {string} object URL or empty string
|
|
*/
|
|
var dataURLToObjectURL = function dataURLToObjectURL(dataurl) {
|
|
if (typeof Uint8Array === 'undefined' || typeof Blob === 'undefined' || typeof URL === 'undefined' || !URL.createObjectURL) {
|
|
return '';
|
|
}
|
|
var arr = dataurl.split(','),
|
|
mime = arr[0].match(/:(.*?);/)[1],
|
|
bstr = atob(arr[1]);
|
|
var n = bstr.length;
|
|
var u8arr = new Uint8Array(n);
|
|
while (n--) {
|
|
u8arr[n] = bstr.charCodeAt(n);
|
|
}
|
|
var blob = new Blob([u8arr], { type: mime });
|
|
return URL.createObjectURL(blob);
|
|
};
|
|
|
|
/**
|
|
* get object URL for a blob object
|
|
* @param {Blob} blob A Blob object or File object
|
|
* @return {string} object URL or empty string
|
|
*/
|
|
var createObjectURL = function createObjectURL(blob) {
|
|
if (!blob || typeof URL === 'undefined' || !URL.createObjectURL) {
|
|
return '';
|
|
}
|
|
return URL.createObjectURL(blob);
|
|
};
|
|
|
|
/**
|
|
* @property {string} blankPageObjectURL
|
|
*/
|
|
var blankPageObjectURL = function () {
|
|
if (typeof Blob === 'undefined') {
|
|
return '';
|
|
}
|
|
var blob = new Blob(['<html><head><title>SVG-edit</title></head><body> </body></html>'], { type: 'text/html' });
|
|
return createObjectURL(blob);
|
|
}();
|
|
|
|
// Cross-browser compatible method of converting a string to an XML tree
|
|
// found this function here: http://groups.google.com/group/jquery-dev/browse_thread/thread/c6d11387c580a77f
|
|
var text2xml = function text2xml(sXML) {
|
|
if (sXML.includes('<svg:svg')) {
|
|
sXML = sXML.replace(/<(\/?)svg:/g, '<$1').replace('xmlns:svg', 'xmlns');
|
|
}
|
|
|
|
var out = void 0,
|
|
dXML = void 0;
|
|
try {
|
|
dXML = window.DOMParser ? new DOMParser() : new ActiveXObject('Microsoft.XMLDOM');
|
|
dXML.async = false;
|
|
} catch (e) {
|
|
throw new Error('XML Parser could not be instantiated');
|
|
}
|
|
try {
|
|
if (dXML.loadXML) {
|
|
out = dXML.loadXML(sXML) ? dXML : false;
|
|
} else {
|
|
out = dXML.parseFromString(sXML, 'text/xml');
|
|
}
|
|
} catch (e2) {
|
|
throw new Error('Error parsing XML string');
|
|
}
|
|
return out;
|
|
};
|
|
|
|
/**
|
|
* Converts a SVGRect into an object.
|
|
* @param bbox - a SVGRect
|
|
* @returns An object with properties names x, y, width, height.
|
|
*/
|
|
var bboxToObj = function bboxToObj(bbox) {
|
|
return {
|
|
x: bbox.x,
|
|
y: bbox.y,
|
|
width: bbox.width,
|
|
height: bbox.height
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Walks the tree and executes the callback on each element in a top-down fashion
|
|
* @param elem - DOM element to traverse
|
|
* @param {Function} cbFn - Callback function to run on each element
|
|
*/
|
|
var walkTree = function walkTree(elem, cbFn) {
|
|
if (elem && elem.nodeType === 1) {
|
|
cbFn(elem);
|
|
var i = elem.childNodes.length;
|
|
while (i--) {
|
|
walkTree(elem.childNodes.item(i), cbFn);
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Walks the tree and executes the callback on each element in a depth-first fashion
|
|
* @todo FIXME: Shouldn't this be calling walkTreePost?
|
|
* @param elem - DOM element to traverse
|
|
* @param {Function} cbFn - Callback function to run on each element
|
|
*/
|
|
var walkTreePost = function walkTreePost(elem, cbFn) {
|
|
if (elem && elem.nodeType === 1) {
|
|
var i = elem.childNodes.length;
|
|
while (i--) {
|
|
walkTree(elem.childNodes.item(i), cbFn);
|
|
}
|
|
cbFn(elem);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Extracts the URL from the url(...) syntax of some attributes.
|
|
* Three variants:
|
|
* - <circle fill="url(someFile.svg#foo)" />
|
|
* - <circle fill="url('someFile.svg#foo')" />
|
|
* - <circle fill='url("someFile.svg#foo")' />
|
|
* @param attrVal - The attribute value as a string
|
|
* @returns {String} String with just the URL, like "someFile.svg#foo"
|
|
*/
|
|
var getUrlFromAttr = function getUrlFromAttr(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;
|
|
};
|
|
|
|
/**
|
|
* @returns The given element's xlink:href value
|
|
*/
|
|
var getHref = function getHref(elem) {
|
|
return elem.getAttributeNS(NS.XLINK, 'href');
|
|
};
|
|
|
|
/**
|
|
* Sets the given element's xlink:href value
|
|
* @param elem
|
|
* @param {String} val
|
|
*/
|
|
var setHref = function setHref(elem, val) {
|
|
elem.setAttributeNS(NS.XLINK, 'xlink:href', val);
|
|
};
|
|
|
|
/**
|
|
* @returns The document's <defs> element, create it first if necessary
|
|
*/
|
|
var findDefs = function findDefs() {
|
|
var svgElement = editorContext_$1.getSVGContent();
|
|
var 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);
|
|
} else {
|
|
svgElement.appendChild(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:
|
|
* http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html
|
|
* @param path - The path DOM element to get the BBox for
|
|
* @returns A BBox-like object
|
|
*/
|
|
var getPathBBox = function getPathBBox(path$$1) {
|
|
var seglist = path$$1.pathSegList;
|
|
var tot = seglist.numberOfItems;
|
|
|
|
var bounds = [[], []];
|
|
var start = seglist.getItem(0);
|
|
var P0 = [start.x, start.y];
|
|
|
|
for (var i = 0; i < tot; i++) {
|
|
var 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) {
|
|
(function () {
|
|
var P1 = [seg.x1, seg.y1],
|
|
P2 = [seg.x2, seg.y2],
|
|
P3 = [seg.x, seg.y];
|
|
|
|
var _loop = function _loop(j) {
|
|
var calc = function calc(t) {
|
|
return Math.pow(1 - t, 3) * P0[j] + 3 * Math.pow(1 - t, 2) * t * P1[j] + 3 * (1 - t) * Math.pow(t, 2) * P2[j] + Math.pow(t, 3) * P3[j];
|
|
};
|
|
|
|
var b = 6 * P0[j] - 12 * P1[j] + 6 * P2[j];
|
|
var a = -3 * P0[j] + 9 * P1[j] - 9 * P2[j] + 3 * P3[j];
|
|
var c = 3 * P1[j] - 3 * P0[j];
|
|
|
|
if (a === 0) {
|
|
if (b === 0) {
|
|
return 'continue';
|
|
}
|
|
var t = -c / b;
|
|
if (t > 0 && t < 1) {
|
|
bounds[j].push(calc(t));
|
|
}
|
|
return 'continue';
|
|
}
|
|
var b2ac = Math.pow(b, 2) - 4 * c * a;
|
|
if (b2ac < 0) {
|
|
return 'continue';
|
|
}
|
|
var t1 = (-b + Math.sqrt(b2ac)) / (2 * a);
|
|
if (t1 > 0 && t1 < 1) {
|
|
bounds[j].push(calc(t1));
|
|
}
|
|
var t2 = (-b - Math.sqrt(b2ac)) / (2 * a);
|
|
if (t2 > 0 && t2 < 1) {
|
|
bounds[j].push(calc(t2));
|
|
}
|
|
};
|
|
|
|
for (var j = 0; j < 2; j++) {
|
|
var _ret2 = _loop(j);
|
|
|
|
if (_ret2 === 'continue') continue;
|
|
}
|
|
P0 = P3;
|
|
})();
|
|
} else {
|
|
bounds[0].push(seg.x);
|
|
bounds[1].push(seg.y);
|
|
}
|
|
}
|
|
|
|
var x = Math.min.apply(null, bounds[0]);
|
|
var w = Math.max.apply(null, bounds[0]) - x;
|
|
var y = Math.min.apply(null, bounds[1]);
|
|
var h = Math.max.apply(null, bounds[1]) - y;
|
|
return {
|
|
x: x,
|
|
y: 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 selected - Container or <use> DOM element
|
|
* @returns Bounding box object
|
|
*/
|
|
function groupBBFix(selected) {
|
|
if (supportsHVLineContainerBBox()) {
|
|
try {
|
|
return selected.getBBox();
|
|
} catch (e) {}
|
|
}
|
|
var ref = $$2.data(selected, 'ref');
|
|
var matched = null;
|
|
var ret = void 0,
|
|
copy = void 0;
|
|
|
|
if (ref) {
|
|
copy = $$2(ref).children().clone().attr('visibility', 'hidden');
|
|
$$2(svgroot_).append(copy);
|
|
matched = copy.filter('line, path');
|
|
} else {
|
|
matched = $$2(selected).find('line, path');
|
|
}
|
|
|
|
var issue = false;
|
|
if (matched.length) {
|
|
matched.each(function () {
|
|
var bb = this.getBBox();
|
|
if (!bb.width || !bb.height) {
|
|
issue = true;
|
|
}
|
|
});
|
|
if (issue) {
|
|
var elems = ref ? copy : $$2(selected).children();
|
|
ret = getStrokedBBox(elems); // getStrokedBBox defined in svgcanvas
|
|
} else {
|
|
ret = selected.getBBox();
|
|
}
|
|
} else {
|
|
ret = selected.getBBox();
|
|
}
|
|
if (ref) {
|
|
copy.remove();
|
|
}
|
|
return ret;
|
|
}
|
|
|
|
/**
|
|
* Get the given/selected element's bounding box object, convert it to be more
|
|
* usable when necessary
|
|
* @param elem - Optional DOM element to get the BBox for
|
|
* @returns Bounding box object
|
|
*/
|
|
var getBBox = function getBBox(elem) {
|
|
var selected = elem || editorContext_$1.geSelectedElements()[0];
|
|
if (elem.nodeType !== 1) {
|
|
return null;
|
|
}
|
|
var elname = selected.nodeName;
|
|
|
|
var ret = null;
|
|
switch (elname) {
|
|
case 'text':
|
|
if (selected.textContent === '') {
|
|
selected.textContent = 'a'; // Some character needed for the selector to use.
|
|
ret = selected.getBBox();
|
|
selected.textContent = '';
|
|
} else {
|
|
if (selected.getBBox) {
|
|
ret = selected.getBBox();
|
|
}
|
|
}
|
|
break;
|
|
case 'path':
|
|
if (!supportsPathBBox()) {
|
|
ret = getPathBBox(selected);
|
|
} else {
|
|
if (selected.getBBox) {
|
|
ret = selected.getBBox();
|
|
}
|
|
}
|
|
break;
|
|
case 'g':
|
|
case 'a':
|
|
ret = groupBBFix(selected);
|
|
break;
|
|
default:
|
|
|
|
if (elname === 'use') {
|
|
ret = groupBBFix(selected, true);
|
|
}
|
|
if (elname === 'use' || elname === 'foreignObject' && isWebkit()) {
|
|
if (!ret) {
|
|
ret = selected.getBBox();
|
|
}
|
|
// This is resolved in later versions of webkit, perhaps we should
|
|
// have a featured detection for correct 'use' behavior?
|
|
// ——————————
|
|
if (!isWebkit()) {
|
|
var bb = {};
|
|
bb.width = ret.width;
|
|
bb.height = ret.height;
|
|
bb.x = ret.x + parseFloat(selected.getAttribute('x') || 0);
|
|
bb.y = ret.y + parseFloat(selected.getAttribute('y') || 0);
|
|
ret = bb;
|
|
}
|
|
} else if (visElemsArr.includes(elname)) {
|
|
if (selected) {
|
|
try {
|
|
ret = selected.getBBox();
|
|
} catch (err) {
|
|
// tspan (and textPath apparently) have no `getBBox` in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=937268
|
|
// Re: Chrome returning bbox for containing text element, see: https://bugs.chromium.org/p/chromium/issues/detail?id=349835
|
|
var extent = selected.getExtentOfChar(0); // pos+dimensions of the first glyph
|
|
var width = selected.getComputedTextLength(); // width of the tspan
|
|
ret = {
|
|
x: extent.x,
|
|
y: extent.y,
|
|
width: width,
|
|
height: extent.height
|
|
};
|
|
}
|
|
} else {
|
|
// Check if element is child of a foreignObject
|
|
var fo = $$2(selected).closest('foreignObject');
|
|
if (fo.length) {
|
|
if (fo[0].getBBox) {
|
|
ret = fo[0].getBBox();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (ret) {
|
|
ret = bboxToObj(ret);
|
|
}
|
|
|
|
// get the bounding box from the DOM (which is in that element's coordinate system)
|
|
return ret;
|
|
};
|
|
|
|
/**
|
|
* Create a path 'd' attribute from path segments.
|
|
* Each segment is an array of the form: [singleChar, [x,y, x,y, ...]]
|
|
* @param pathSegments - An array of path segments to be converted
|
|
* @returns The converted path d attribute.
|
|
*/
|
|
var getPathDFromSegments = function getPathDFromSegments(pathSegments) {
|
|
var d = '';
|
|
|
|
$$2.each(pathSegments, function (j, seg) {
|
|
var pts = seg[1];
|
|
d += seg[0];
|
|
for (var i = 0; i < pts.length; i += 2) {
|
|
d += pts[i] + ',' + pts[i + 1] + ' ';
|
|
}
|
|
});
|
|
|
|
return d;
|
|
};
|
|
|
|
/**
|
|
* Make a path 'd' attribute from a simple SVG element shape.
|
|
* @param elem - The element to be converted
|
|
* @returns The path d attribute or `undefined` if the element type is unknown.
|
|
*/
|
|
var getPathDFromElement = function getPathDFromElement(elem) {
|
|
// Possibly the cubed root of 6, but 1.81 works best
|
|
var num = 1.81;
|
|
var d = void 0,
|
|
a = void 0,
|
|
rx = void 0,
|
|
ry = void 0;
|
|
switch (elem.tagName) {
|
|
case 'ellipse':
|
|
case 'circle':
|
|
a = $$2(elem).attr(['rx', 'ry', 'cx', 'cy']);
|
|
var _a = a,
|
|
cx = _a.cx,
|
|
cy = _a.cy;
|
|
var _a2 = a;
|
|
rx = _a2.rx;
|
|
ry = _a2.ry;
|
|
|
|
if (elem.tagName === 'circle') {
|
|
rx = ry = $$2(elem).attr('r');
|
|
}
|
|
|
|
d = getPathDFromSegments([['M', [cx - rx, cy]], ['C', [cx - rx, cy - ry / num, cx - rx / num, cy - ry, cx, cy - ry]], ['C', [cx + rx / num, cy - ry, cx + rx, cy - ry / num, cx + rx, cy]], ['C', [cx + rx, cy + ry / num, cx + rx / num, cy + ry, cx, cy + ry]], ['C', [cx - rx / num, cy + ry, cx - rx, cy + ry / num, cx - rx, cy]], ['Z', []]]);
|
|
break;
|
|
case 'path':
|
|
d = elem.getAttribute('d');
|
|
break;
|
|
case 'line':
|
|
a = $$2(elem).attr(['x1', 'y1', 'x2', 'y2']);
|
|
d = 'M' + a.x1 + ',' + a.y1 + 'L' + a.x2 + ',' + a.y2;
|
|
break;
|
|
case 'polyline':
|
|
d = 'M' + elem.getAttribute('points');
|
|
break;
|
|
case 'polygon':
|
|
d = 'M' + elem.getAttribute('points') + ' Z';
|
|
break;
|
|
case 'rect':
|
|
var r = $$2(elem).attr(['rx', 'ry']);
|
|
rx = r.rx;
|
|
ry = r.ry;
|
|
|
|
var _b = elem.getBBox();
|
|
var x = _b.x,
|
|
y = _b.y,
|
|
w = _b.width,
|
|
h = _b.height;
|
|
|
|
num = 4 - num; // Why? Because!
|
|
|
|
if (!rx && !ry) {
|
|
// Regular rect
|
|
d = getPathDFromSegments([['M', [x, y]], ['L', [x + w, y]], ['L', [x + w, y + h]], ['L', [x, y + h]], ['L', [x, y]], ['Z', []]]);
|
|
} else {
|
|
d = getPathDFromSegments([['M', [x, y + ry]], ['C', [x, y + ry / num, x + rx / num, y, x + rx, y]], ['L', [x + w - rx, y]], ['C', [x + w - rx / num, y, x + w, y + ry / num, x + w, y + ry]], ['L', [x + w, y + h - ry]], ['C', [x + w, y + h - ry / num, x + w - rx / num, y + h, x + w - rx, y + h]], ['L', [x + rx, y + h]], ['C', [x + rx / num, y + h, x, y + h - ry / num, x, y + h - ry]], ['L', [x, y + ry]], ['Z', []]]);
|
|
}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
return d;
|
|
};
|
|
|
|
/**
|
|
* Get a set of attributes from an element that is useful for convertToPath.
|
|
* @param elem - The element to be probed
|
|
* @returns {Object} An object with attributes.
|
|
*/
|
|
var getExtraAttributesForConvertToPath = function getExtraAttributesForConvertToPath(elem) {
|
|
var attrs = {};
|
|
// TODO: make this list global so that we can properly maintain it
|
|
// TODO: what about @transform, @clip-rule, @fill-rule, etc?
|
|
$$2.each(['marker-start', 'marker-end', 'marker-mid', 'filter', 'clip-path'], function () {
|
|
var a = elem.getAttribute(this);
|
|
if (a) {
|
|
attrs[this] = a;
|
|
}
|
|
});
|
|
return attrs;
|
|
};
|
|
|
|
/**
|
|
* Get the BBox of an element-as-path
|
|
* @param elem - The DOM element to be probed
|
|
* @param addSvgElementFromJson - Function to add the path element to the current layer. See canvas.addSvgElementFromJson
|
|
* @param pathActions - If a transform exists, `pathActions.resetOrientation()` is used. See: canvas.pathActions.
|
|
* @returns The resulting path's bounding box object.
|
|
*/
|
|
var getBBoxOfElementAsPath = function getBBoxOfElementAsPath(elem, addSvgElementFromJson, pathActions$$1) {
|
|
var path$$1 = addSvgElementFromJson({
|
|
element: 'path',
|
|
attr: getExtraAttributesForConvertToPath(elem)
|
|
});
|
|
|
|
var eltrans = elem.getAttribute('transform');
|
|
if (eltrans) {
|
|
path$$1.setAttribute('transform', eltrans);
|
|
}
|
|
|
|
var parent = elem.parentNode;
|
|
if (elem.nextSibling) {
|
|
parent.insertBefore(path$$1, elem);
|
|
} else {
|
|
parent.appendChild(path$$1);
|
|
}
|
|
|
|
var d = getPathDFromElement(elem);
|
|
if (d) path$$1.setAttribute('d', d);else path$$1.parentNode.removeChild(path$$1);
|
|
|
|
// Get the correct BBox of the new path, then discard it
|
|
pathActions$$1.resetOrientation(path$$1);
|
|
var bb = false;
|
|
try {
|
|
bb = path$$1.getBBox();
|
|
} catch (e) {
|
|
// Firefox fails
|
|
}
|
|
path$$1.parentNode.removeChild(path$$1);
|
|
return bb;
|
|
};
|
|
|
|
/**
|
|
* Convert selected element to a path.
|
|
* @param elem - The DOM element to be converted
|
|
* @param attrs - Apply attributes to new path. see canvas.convertToPath
|
|
* @param addSvgElementFromJson - Function to add the path element to the current layer. See canvas.addSvgElementFromJson
|
|
* @param pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions.
|
|
* @param clearSelection - see canvas.clearSelection
|
|
* @param addToSelection - see canvas.addToSelection
|
|
* @param history - see svgedit.history
|
|
* @param addCommandToHistory - see canvas.addCommandToHistory
|
|
* @returns The converted path element or null if the DOM element was not recognized.
|
|
*/
|
|
var convertToPath = function convertToPath(elem, attrs, addSvgElementFromJson, pathActions$$1, clearSelection, addToSelection, history, addCommandToHistory) {
|
|
var batchCmd = new history.BatchCommand('Convert element to Path');
|
|
|
|
// Any attribute on the element not covered by the passed-in attributes
|
|
attrs = $$2.extend({}, attrs, getExtraAttributesForConvertToPath(elem));
|
|
|
|
var path$$1 = addSvgElementFromJson({
|
|
element: 'path',
|
|
attr: attrs
|
|
});
|
|
|
|
var eltrans = elem.getAttribute('transform');
|
|
if (eltrans) {
|
|
path$$1.setAttribute('transform', eltrans);
|
|
}
|
|
|
|
var id = elem.id;
|
|
|
|
var parent = elem.parentNode;
|
|
if (elem.nextSibling) {
|
|
parent.insertBefore(path$$1, elem);
|
|
} else {
|
|
parent.appendChild(path$$1);
|
|
}
|
|
|
|
var d = getPathDFromElement(elem);
|
|
if (d) {
|
|
path$$1.setAttribute('d', d);
|
|
|
|
// Replace the current element with the converted one
|
|
|
|
// Reorient if it has a matrix
|
|
if (eltrans) {
|
|
var tlist = getTransformList(path$$1);
|
|
if (hasMatrixTransform(tlist)) {
|
|
pathActions$$1.resetOrientation(path$$1);
|
|
}
|
|
}
|
|
|
|
var nextSibling = elem.nextSibling;
|
|
|
|
batchCmd.addSubCommand(new history.RemoveElementCommand(elem, nextSibling, parent));
|
|
batchCmd.addSubCommand(new history.InsertElementCommand(path$$1));
|
|
|
|
clearSelection();
|
|
elem.parentNode.removeChild(elem);
|
|
path$$1.setAttribute('id', id);
|
|
path$$1.removeAttribute('visibility');
|
|
addToSelection([path$$1], true);
|
|
|
|
addCommandToHistory(batchCmd);
|
|
|
|
return path$$1;
|
|
} else {
|
|
// the elem.tagName was not recognized, so no "d" attribute. Remove it, so we've haven't changed anything.
|
|
path$$1.parentNode.removeChild(path$$1);
|
|
return null;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Can the bbox be optimized over the native getBBox? The optimized bbox is the same as the native getBBox when
|
|
* the rotation angle is a multiple of 90 degrees and there are no complex transforms.
|
|
* Getting an optimized bbox can be dramatically slower, so we want to make sure it's worth it.
|
|
*
|
|
* The best example for this is a circle rotate 45 degrees. The circle doesn't get wider or taller when rotated
|
|
* about it's center.
|
|
*
|
|
* The standard, unoptimized technique gets the native bbox of the circle, rotates the box 45 degrees, uses
|
|
* that width and height, and applies any transforms to get the final bbox. This means the calculated bbox
|
|
* is much wider than the original circle. If the angle had been 0, 90, 180, etc. both techniques render the
|
|
* same bbox.
|
|
*
|
|
* The optimization is not needed if the rotation is a multiple 90 degrees. The default technique is to call
|
|
* getBBox then apply the angle and any transforms.
|
|
*
|
|
* @param angle - The rotation angle in degrees
|
|
* @param {Boolean} hasMatrixTransform - True if there is a matrix transform
|
|
* @returns {Boolean} True if the bbox can be optimized.
|
|
*/
|
|
function bBoxCanBeOptimizedOverNativeGetBBox(angle, hasMatrixTransform$$1) {
|
|
var angleModulo90 = angle % 90;
|
|
var closeTo90 = angleModulo90 < -89.99 || angleModulo90 > 89.99;
|
|
var closeTo0 = angleModulo90 > -0.001 && angleModulo90 < 0.001;
|
|
return hasMatrixTransform$$1 || !(closeTo0 || closeTo90);
|
|
}
|
|
|
|
/**
|
|
* Get bounding box that includes any transforms.
|
|
* @param elem - The DOM element to be converted
|
|
* @param addSvgElementFromJson - Function to add the path element to the current layer. See canvas.addSvgElementFromJson
|
|
* @param pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions.
|
|
* @returns A single bounding box object
|
|
*/
|
|
var getBBoxWithTransform = function getBBoxWithTransform(elem, addSvgElementFromJson, pathActions$$1) {
|
|
// TODO: Fix issue with rotated groups. Currently they work
|
|
// fine in FF, but not in other browsers (same problem mentioned
|
|
// in Issue 339 comment #2).
|
|
|
|
var bb = getBBox(elem);
|
|
|
|
if (!bb) {
|
|
return null;
|
|
}
|
|
|
|
var tlist = getTransformList(elem);
|
|
var angle = getRotationAngleFromTransformList(tlist);
|
|
var hasMatrixXForm = hasMatrixTransform(tlist);
|
|
|
|
if (angle || hasMatrixXForm) {
|
|
var goodBb = false;
|
|
if (bBoxCanBeOptimizedOverNativeGetBBox(angle, hasMatrixXForm)) {
|
|
// Get the BBox from the raw path for these elements
|
|
// TODO: why ellipse and not circle
|
|
var elemNames = ['ellipse', 'path', 'line', 'polyline', 'polygon'];
|
|
if (elemNames.includes(elem.tagName)) {
|
|
bb = goodBb = getBBoxOfElementAsPath(elem, addSvgElementFromJson, pathActions$$1);
|
|
} else if (elem.tagName === 'rect') {
|
|
// Look for radius
|
|
var rx = elem.getAttribute('rx');
|
|
var ry = elem.getAttribute('ry');
|
|
if (rx || ry) {
|
|
bb = goodBb = getBBoxOfElementAsPath(elem, addSvgElementFromJson, pathActions$$1);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!goodBb) {
|
|
var _transformListToTrans = transformListToTransform(tlist),
|
|
matrix = _transformListToTrans.matrix;
|
|
|
|
bb = transformBox(bb.x, bb.y, bb.width, bb.height, matrix).aabox;
|
|
|
|
// Old technique that was exceedingly slow with large documents.
|
|
//
|
|
// Accurate way to get BBox of rotated element in Firefox:
|
|
// Put element in group and get its BBox
|
|
//
|
|
// Must use clone else FF freaks out
|
|
// const clone = elem.cloneNode(true);
|
|
// const g = document.createElementNS(NS.SVG, 'g');
|
|
// const parent = elem.parentNode;
|
|
// parent.appendChild(g);
|
|
// g.appendChild(clone);
|
|
// const bb2 = bboxToObj(g.getBBox());
|
|
// parent.removeChild(g);
|
|
}
|
|
}
|
|
return bb;
|
|
};
|
|
|
|
// TODO: This is problematic with large stroke-width and, for example, a single horizontal line. The calculated BBox extends way beyond left and right sides.
|
|
function getStrokeOffsetForBBox(elem) {
|
|
var sw = elem.getAttribute('stroke-width');
|
|
return !isNaN(sw) && elem.getAttribute('stroke') !== 'none' ? sw / 2 : 0;
|
|
}
|
|
|
|
/**
|
|
* Get the bounding box for one or more stroked and/or transformed elements
|
|
* @param elems - Array with DOM elements to check
|
|
* @param addSvgElementFromJson - Function to add the path element to the current layer. See canvas.addSvgElementFromJson
|
|
* @param pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions.
|
|
* @returns A single bounding box object
|
|
*/
|
|
var getStrokedBBox = function getStrokedBBox(elems, addSvgElementFromJson, pathActions$$1) {
|
|
if (!elems || !elems.length) {
|
|
return false;
|
|
}
|
|
|
|
var fullBb = void 0;
|
|
$$2.each(elems, function () {
|
|
if (fullBb) {
|
|
return;
|
|
}
|
|
if (!this.parentNode) {
|
|
return;
|
|
}
|
|
fullBb = getBBoxWithTransform(this, addSvgElementFromJson, pathActions$$1);
|
|
});
|
|
|
|
// This shouldn't ever happen...
|
|
if (fullBb === undefined) {
|
|
return null;
|
|
}
|
|
|
|
// fullBb doesn't include the stoke, so this does no good!
|
|
// if (elems.length == 1) return fullBb;
|
|
|
|
var maxX = fullBb.x + fullBb.width;
|
|
var maxY = fullBb.y + fullBb.height;
|
|
var minX = fullBb.x;
|
|
var minY = fullBb.y;
|
|
|
|
// If only one elem, don't call the potentially slow getBBoxWithTransform method again.
|
|
if (elems.length === 1) {
|
|
var offset = getStrokeOffsetForBBox(elems[0]);
|
|
minX -= offset;
|
|
minY -= offset;
|
|
maxX += offset;
|
|
maxY += offset;
|
|
} else {
|
|
$$2.each(elems, function (i, elem) {
|
|
var curBb = getBBoxWithTransform(elem, addSvgElementFromJson, pathActions$$1);
|
|
if (curBb) {
|
|
var _offset = getStrokeOffsetForBBox(elem);
|
|
minX = Math.min(minX, curBb.x - _offset);
|
|
minY = Math.min(minY, curBb.y - _offset);
|
|
// TODO: The old code had this test for max, but not min. I suspect this test should be for both min and max
|
|
if (elem.nodeType === 1) {
|
|
maxX = Math.max(maxX, curBb.x + curBb.width + _offset);
|
|
maxY = Math.max(maxY, curBb.y + curBb.height + _offset);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
fullBb.x = minX;
|
|
fullBb.y = minY;
|
|
fullBb.width = maxX - minX;
|
|
fullBb.height = maxY - minY;
|
|
return fullBb;
|
|
};
|
|
|
|
/**
|
|
* Get all elements that have a BBox (excludes `<defs>`, `<title>`, etc).
|
|
* Note that 0-opacity, off-screen etc elements are still considered "visible"
|
|
* for this function
|
|
* @param parent - The parent DOM element to search within
|
|
* @returns {Array} All "visible" elements.
|
|
*/
|
|
var getVisibleElements = function getVisibleElements(parent) {
|
|
if (!parent) {
|
|
parent = $$2(editorContext_$1.getSVGContent()).children(); // Prevent layers from being included
|
|
}
|
|
|
|
var contentElems = [];
|
|
$$2(parent).children().each(function (i, elem) {
|
|
if (elem.getBBox) {
|
|
contentElems.push(elem);
|
|
}
|
|
});
|
|
return contentElems.reverse();
|
|
};
|
|
|
|
/**
|
|
* Get the bounding box for one or more stroked and/or transformed elements
|
|
* @param elems - Array with DOM elements to check
|
|
* @returns A single bounding box object
|
|
*/
|
|
var getStrokedBBoxDefaultVisible = function getStrokedBBoxDefaultVisible(elems) {
|
|
if (!elems) {
|
|
elems = getVisibleElements();
|
|
}
|
|
return getStrokedBBox(elems, editorContext_$1.addSvgElementFromJson, editorContext_$1.pathActions);
|
|
};
|
|
|
|
/**
|
|
* Get the rotation angle of the given transform list.
|
|
* @param tlist - List of transforms
|
|
* @param {Boolean} toRad - When true returns the value in radians rather than degrees
|
|
* @returns {Number} Float with the angle in degrees or radians
|
|
*/
|
|
var getRotationAngleFromTransformList = function getRotationAngleFromTransformList(tlist, toRad) {
|
|
if (!tlist) {
|
|
return 0;
|
|
} // <svg> elements have no tlist
|
|
var N = tlist.numberOfItems;
|
|
for (var i = 0; i < N; ++i) {
|
|
var xform = tlist.getItem(i);
|
|
if (xform.type === 4) {
|
|
return toRad ? xform.angle * Math.PI / 180.0 : xform.angle;
|
|
}
|
|
}
|
|
return 0.0;
|
|
};
|
|
|
|
/**
|
|
* Get the rotation angle of the given/selected DOM element
|
|
* @param elem - Optional DOM element to get the angle for
|
|
* @param {Boolean} toRad - When true returns the value in radians rather than degrees
|
|
* @returns {Number} Float with the angle in degrees or radians
|
|
*/
|
|
var getRotationAngle = function getRotationAngle(elem, toRad) {
|
|
var selected = elem || editorContext_$1.getSelectedElements()[0];
|
|
// find the rotation transform (if any) and set it
|
|
var tlist = getTransformList(selected);
|
|
return getRotationAngleFromTransformList(tlist, toRad);
|
|
};
|
|
|
|
/**
|
|
* Get the reference element associated with the given attribute value
|
|
* @param {String} attrVal - The attribute value as a string
|
|
* @returns Reference element
|
|
*/
|
|
var getRefElem = function getRefElem(attrVal) {
|
|
return getElem(getUrlFromAttr(attrVal).substr(1));
|
|
};
|
|
|
|
/**
|
|
* Get a DOM element by ID within the SVG root element.
|
|
* @param {String} id - String with the element's new ID
|
|
*/
|
|
var getElem = supportsSelectors() ? function (id) {
|
|
// querySelector lookup
|
|
return svgroot_.querySelector('#' + id);
|
|
} : supportsXpath() ? function (id) {
|
|
// xpath lookup
|
|
return domdoc_.evaluate('svg:svg[@id="svgroot"]//svg:*[@id="' + id + '"]', domcontainer_, function () {
|
|
return NS.SVG;
|
|
}, 9, null).singleNodeValue;
|
|
} : function (id) {
|
|
// jQuery lookup: twice as slow as xpath in FF
|
|
return $$2(svgroot_).find('[id=' + id + ']')[0];
|
|
};
|
|
|
|
/**
|
|
* Assigns multiple attributes to an element.
|
|
* @param node - DOM element to apply new attribute values to
|
|
* @param {Object} attrs - Object with attribute keys/values
|
|
* @param {Number} suspendLength - Optional integer of milliseconds to suspend redraw
|
|
* @param {Boolean} unitCheck - Boolean to indicate the need to use svgedit.units.setUnitAttr
|
|
*/
|
|
var assignAttributes = function assignAttributes(node, attrs, suspendLength, unitCheck) {
|
|
for (var i in attrs) {
|
|
var ns = i.substr(0, 4) === 'xml:' ? NS.XML : i.substr(0, 6) === 'xlink:' ? NS.XLINK : null;
|
|
|
|
if (ns) {
|
|
node.setAttributeNS(ns, i, attrs[i]);
|
|
} else if (!unitCheck) {
|
|
node.setAttribute(i, attrs[i]);
|
|
} else {
|
|
setUnitAttr(node, i, attrs[i]);
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Remove unneeded (default) attributes, makes resulting SVG smaller
|
|
* @param element - DOM element to clean up
|
|
*/
|
|
var cleanupElement = function cleanupElement(element) {
|
|
var defaults = {
|
|
'fill-opacity': 1,
|
|
'stop-opacity': 1,
|
|
opacity: 1,
|
|
stroke: 'none',
|
|
'stroke-dasharray': 'none',
|
|
'stroke-linejoin': 'miter',
|
|
'stroke-linecap': 'butt',
|
|
'stroke-opacity': 1,
|
|
'stroke-width': 1,
|
|
rx: 0,
|
|
ry: 0
|
|
};
|
|
|
|
if (element.nodeName === 'ellipse') {
|
|
// Ellipse elements requires rx and ry attributes
|
|
delete defaults.rx;
|
|
delete defaults.ry;
|
|
}
|
|
|
|
for (var attr in defaults) {
|
|
var val = defaults[attr];
|
|
if (element.getAttribute(attr) === String(val)) {
|
|
element.removeAttribute(attr);
|
|
}
|
|
}
|
|
};
|
|
|
|
// round value to for snapping
|
|
var snapToGrid = function snapToGrid(value) {
|
|
var unit = editorContext_$1.getBaseUnit();
|
|
var stepSize = editorContext_$1.getSnappingStep();
|
|
if (unit !== 'px') {
|
|
stepSize *= getTypeMap()[unit];
|
|
}
|
|
value = Math.round(value / stepSize) * stepSize;
|
|
return value;
|
|
};
|
|
|
|
var regexEscape = function regexEscape(str, delimiter) {
|
|
// From: http://phpjs.org/functions
|
|
return String(str).replace(new RegExp('[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\' + (delimiter || '') + '-]', 'g'), '\\$&');
|
|
};
|
|
|
|
var loadedScripts = {};
|
|
/**
|
|
* @param {string} name A global which can be used to determine if the script is already loaded
|
|
* @param {array} scripts An array of scripts to preload (in order)
|
|
* @param {function} cb The callback to execute upon load.
|
|
* @param {object} options Object with `globals` boolean property (if it is not a module)
|
|
*/
|
|
var executeAfterLoads = function executeAfterLoads(name, scripts, cb) {
|
|
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : { globals: false };
|
|
|
|
return function () {
|
|
var args = arguments;
|
|
function endCallback() {
|
|
cb.apply(null, args);
|
|
}
|
|
var modularVersion = !('svgEditor' in window) || !window.svgEditor || window.svgEditor.modules !== false;
|
|
if (loadedScripts[name] === true) {
|
|
endCallback();
|
|
} else if (Array.isArray(loadedScripts[name])) {
|
|
// Still loading
|
|
loadedScripts[name].push(endCallback);
|
|
} else {
|
|
loadedScripts[name] = [];
|
|
var importer = modularVersion && !options.globals ? importModule : importScript;
|
|
scripts.reduce(function (oldProm, script) {
|
|
// Todo: Once `import()` and modules widely supported, switch to it
|
|
return oldProm.then(function () {
|
|
return importer(script);
|
|
});
|
|
}, Promise.resolve()).then(function () {
|
|
endCallback();
|
|
loadedScripts[name].forEach(function (cb) {
|
|
cb();
|
|
});
|
|
loadedScripts[name] = true;
|
|
})();
|
|
}
|
|
};
|
|
};
|
|
|
|
var buildCanvgCallback = function buildCanvgCallback(callCanvg) {
|
|
return executeAfterLoads('canvg', ['canvg/rgbcolor.js', 'canvg/canvg.js'], callCanvg);
|
|
};
|
|
|
|
var buildJSPDFCallback = function buildJSPDFCallback(callJSPDF) {
|
|
return executeAfterLoads('RGBColor', ['canvg/rgbcolor.js'], function () {
|
|
var arr = [];
|
|
if (!RGBColor || RGBColor.ok === undefined) {
|
|
// It's not our RGBColor, so we'll need to load it
|
|
arr.push('canvg/rgbcolor.js');
|
|
}
|
|
executeAfterLoads('jsPDF', [].concat(arr, ['jspdf/underscore-min.js', 'jspdf/jspdf.min.js', 'jspdf/jspdf.plugin.svgToPdf.js']), callJSPDF, { globals: true })();
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Prevents default browser click behaviour on the given element
|
|
* @param img - The DOM element to prevent the click on
|
|
*/
|
|
var preventClickDefault = function preventClickDefault(img) {
|
|
$$2(img).click(function (e) {
|
|
e.preventDefault();
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Create a clone of an element, updating its ID and its children's IDs when needed
|
|
* @param {Element} el - DOM element to clone
|
|
* @param {function()} getNextId - function the get the next unique ID.
|
|
* @returns {Element}
|
|
*/
|
|
var copyElem = function copyElem(el, getNextId) {
|
|
// manually create a copy of the element
|
|
var newEl = document.createElementNS(el.namespaceURI, el.nodeName);
|
|
$$2.each(el.attributes, function (i, attr) {
|
|
if (attr.localName !== '-moz-math-font-style') {
|
|
newEl.setAttributeNS(attr.namespaceURI, attr.nodeName, attr.value);
|
|
}
|
|
});
|
|
// set the copied element's new id
|
|
newEl.removeAttribute('id');
|
|
newEl.id = getNextId();
|
|
|
|
// Opera's "d" value needs to be reset for Opera/Win/non-EN
|
|
// Also needed for webkit (else does not keep curved segments on clone)
|
|
if (isWebkit() && el.nodeName === 'path') {
|
|
var fixedD = convertPath(el);
|
|
newEl.setAttribute('d', fixedD);
|
|
}
|
|
|
|
// now create copies of all children
|
|
$$2.each(el.childNodes, function (i, child) {
|
|
switch (child.nodeType) {
|
|
case 1:
|
|
// element node
|
|
newEl.appendChild(copyElem(child, getNextId));
|
|
break;
|
|
case 3:
|
|
// text node
|
|
newEl.textContent = child.nodeValue;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
|
|
if ($$2(el).data('gsvg')) {
|
|
$$2(newEl).data('gsvg', newEl.firstChild);
|
|
} else if ($$2(el).data('symbol')) {
|
|
var ref = $$2(el).data('symbol');
|
|
$$2(newEl).data('ref', ref).data('symbol', ref);
|
|
} else if (newEl.tagName === 'image') {
|
|
preventClickDefault(newEl);
|
|
}
|
|
|
|
return newEl;
|
|
};
|
|
|
|
/* globals jQuery */
|
|
/**
|
|
* Package: svgedit.contextmenu
|
|
*
|
|
* Licensed under the Apache License, Version 2
|
|
*
|
|
* Author: Adam Bender
|
|
*/
|
|
// Dependencies:
|
|
// 1) jQuery (for dom injection of context menus)
|
|
|
|
var $$3 = jQuery;
|
|
|
|
var contextMenuExtensions = {};
|
|
var hasCustomHandler = function hasCustomHandler(handlerKey) {
|
|
return Boolean(contextMenuExtensions[handlerKey]);
|
|
};
|
|
var getCustomHandler = function getCustomHandler(handlerKey) {
|
|
return contextMenuExtensions[handlerKey].action;
|
|
};
|
|
var injectExtendedContextMenuItemIntoDom = function injectExtendedContextMenuItemIntoDom(menuItem) {
|
|
if (!Object.keys(contextMenuExtensions).length) {
|
|
// all menuItems appear at the bottom of the menu in their own container.
|
|
// if this is the first extension menu we need to add the separator.
|
|
$$3('#cmenu_canvas').append("<li class='separator'>");
|
|
}
|
|
var shortcut = menuItem.shortcut || '';
|
|
$$3('#cmenu_canvas').append("<li class='disabled'><a href='#" + menuItem.id + "'>" + menuItem.label + "<span class='shortcut'>" + shortcut + '</span></a></li>');
|
|
};
|
|
|
|
var injectExtendedContextMenuItemsIntoDom = function injectExtendedContextMenuItemsIntoDom() {
|
|
for (var menuItem in contextMenuExtensions) {
|
|
injectExtendedContextMenuItemIntoDom(contextMenuExtensions[menuItem]);
|
|
}
|
|
};
|
|
|
|
/* eslint-disable new-cap */
|
|
|
|
// canvg(target, s)
|
|
// empty parameters: replace all 'svg' elements on page with 'canvas' elements
|
|
// target: canvas element or the id of a canvas element
|
|
// s: svg string, url to svg file, or xml document
|
|
// opts: optional hash of options
|
|
// ignoreMouse: true => ignore mouse events
|
|
// ignoreAnimation: true => ignore animations
|
|
// ignoreDimensions: true => does not try to resize canvas
|
|
// ignoreClear: true => does not clear canvas
|
|
// offsetX: int => draws at a x offset
|
|
// offsetY: int => draws at a y offset
|
|
// scaleWidth: int => scales horizontally to width
|
|
// scaleHeight: int => scales vertically to height
|
|
// renderCallback: function => will call the function after the first render is completed
|
|
// forceRedraw: function => will call the function on every frame, if it returns true, will redraw
|
|
function canvg(target, s, opts) {
|
|
// no parameters
|
|
if (target == null && s == null && opts == null) {
|
|
var svgTags = document.querySelectorAll('svg');
|
|
for (var i = 0; i < svgTags.length; i++) {
|
|
var svgTag = svgTags[i];
|
|
var c = document.createElement('canvas');
|
|
c.width = svgTag.clientWidth;
|
|
c.height = svgTag.clientHeight;
|
|
svgTag.parentNode.insertBefore(c, svgTag);
|
|
svgTag.parentNode.removeChild(svgTag);
|
|
var div = document.createElement('div');
|
|
div.appendChild(svgTag);
|
|
canvg(c, div.innerHTML);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (typeof target === 'string') {
|
|
target = document.getElementById(target);
|
|
}
|
|
|
|
// store class on canvas
|
|
if (target.svg != null) target.svg.stop();
|
|
var svg = build(opts || {});
|
|
// on i.e. 8 for flash canvas, we can't assign the property so check for it
|
|
if (!(target.childNodes.length === 1 && target.childNodes[0].nodeName === 'OBJECT')) {
|
|
target.svg = svg;
|
|
}
|
|
|
|
var ctx = target.getContext('2d');
|
|
if (typeof s.documentElement !== 'undefined') {
|
|
// load from xml doc
|
|
svg.loadXmlDoc(ctx, s);
|
|
} else if (s.substr(0, 1) === '<') {
|
|
// load from xml string
|
|
svg.loadXml(ctx, s);
|
|
} else {
|
|
// load from url
|
|
svg.load(ctx, s);
|
|
}
|
|
}
|
|
|
|
function build(opts) {
|
|
var svg = { opts: opts };
|
|
|
|
svg.FRAMERATE = 30;
|
|
svg.MAX_VIRTUAL_PIXELS = 30000;
|
|
|
|
svg.log = function (msg) {};
|
|
if (svg.opts.log === true && typeof console !== 'undefined') {
|
|
svg.log = function (msg) {
|
|
console.log(msg);
|
|
};
|
|
}
|
|
|
|
// globals
|
|
svg.init = function (ctx) {
|
|
var uniqueId = 0;
|
|
svg.UniqueId = function () {
|
|
uniqueId++;return 'canvg' + uniqueId;
|
|
};
|
|
svg.Definitions = {};
|
|
svg.Styles = {};
|
|
svg.Animations = [];
|
|
svg.Images = [];
|
|
svg.ctx = ctx;
|
|
svg.ViewPort = new function () {
|
|
this.viewPorts = [];
|
|
this.Clear = function () {
|
|
this.viewPorts = [];
|
|
};
|
|
this.SetCurrent = function (width, height) {
|
|
this.viewPorts.push({ width: width, height: height });
|
|
};
|
|
this.RemoveCurrent = function () {
|
|
this.viewPorts.pop();
|
|
};
|
|
this.Current = function () {
|
|
return this.viewPorts[this.viewPorts.length - 1];
|
|
};
|
|
this.width = function () {
|
|
return this.Current().width;
|
|
};
|
|
this.height = function () {
|
|
return this.Current().height;
|
|
};
|
|
this.ComputeSize = function (d) {
|
|
if (d != null && typeof d === 'number') return d;
|
|
if (d === 'x') return this.width();
|
|
if (d === 'y') return this.height();
|
|
return Math.sqrt(Math.pow(this.width(), 2) + Math.pow(this.height(), 2)) / Math.sqrt(2);
|
|
};
|
|
}();
|
|
};
|
|
svg.init();
|
|
|
|
// images loaded
|
|
svg.ImagesLoaded = function () {
|
|
for (var i = 0; i < svg.Images.length; i++) {
|
|
if (!svg.Images[i].loaded) return false;
|
|
}
|
|
return true;
|
|
};
|
|
|
|
// trim
|
|
svg.trim = function (s) {
|
|
return s.replace(/^\s+|\s+$/g, '');
|
|
};
|
|
|
|
// compress spaces
|
|
svg.compressSpaces = function (s) {
|
|
return s.replace(/[\s\r\t\n]+/gm, ' ');
|
|
};
|
|
|
|
// ajax
|
|
svg.ajax = function (url) {
|
|
var AJAX = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
|
|
|
|
if (AJAX) {
|
|
AJAX.open('GET', url, false);
|
|
AJAX.send(null);
|
|
return AJAX.responseText;
|
|
}
|
|
return null;
|
|
};
|
|
|
|
// parse xml
|
|
svg.parseXml = function (xml) {
|
|
if (window.DOMParser) {
|
|
var parser = new DOMParser();
|
|
return parser.parseFromString(xml, 'text/xml');
|
|
} else {
|
|
xml = xml.replace(/<!DOCTYPE svg[^>]*>/, '');
|
|
var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
|
|
xmlDoc.async = 'false';
|
|
xmlDoc.loadXML(xml);
|
|
return xmlDoc;
|
|
}
|
|
};
|
|
|
|
// text extensions
|
|
// get the text baseline
|
|
var textBaselineMapping = {
|
|
baseline: 'alphabetic',
|
|
'before-edge': 'top',
|
|
'text-before-edge': 'top',
|
|
middle: 'middle',
|
|
central: 'middle',
|
|
'after-edge': 'bottom',
|
|
'text-after-edge': 'bottom',
|
|
ideographic: 'ideographic',
|
|
alphabetic: 'alphabetic',
|
|
hanging: 'hanging',
|
|
mathematical: 'alphabetic'
|
|
};
|
|
|
|
svg.Property = function () {
|
|
function Property(name, value) {
|
|
classCallCheck(this, Property);
|
|
|
|
this.name = name;
|
|
this.value = value;
|
|
}
|
|
|
|
createClass(Property, [{
|
|
key: 'getValue',
|
|
value: function getValue() {
|
|
return this.value;
|
|
}
|
|
}, {
|
|
key: 'hasValue',
|
|
value: function hasValue() {
|
|
return this.value != null && this.value !== '';
|
|
}
|
|
|
|
// return the numerical value of the property
|
|
|
|
}, {
|
|
key: 'numValue',
|
|
value: function numValue() {
|
|
if (!this.hasValue()) return 0;
|
|
|
|
var n = parseFloat(this.value);
|
|
if ((this.value + '').match(/%$/)) {
|
|
n = n / 100.0;
|
|
}
|
|
return n;
|
|
}
|
|
}, {
|
|
key: 'valueOrDefault',
|
|
value: function valueOrDefault(def) {
|
|
if (this.hasValue()) return this.value;
|
|
return def;
|
|
}
|
|
}, {
|
|
key: 'numValueOrDefault',
|
|
value: function numValueOrDefault(def) {
|
|
if (this.hasValue()) return this.numValue();
|
|
return def;
|
|
}
|
|
|
|
// color extensions
|
|
// augment the current color value with the opacity
|
|
|
|
}, {
|
|
key: 'addOpacity',
|
|
value: function addOpacity(opacityProp) {
|
|
var newValue = this.value;
|
|
if (opacityProp.value != null && opacityProp.value !== '' && typeof this.value === 'string') {
|
|
// can only add opacity to colors, not patterns
|
|
var color = new RGBColor(this.value);
|
|
if (color.ok) {
|
|
newValue = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + opacityProp.numValue() + ')';
|
|
}
|
|
}
|
|
return new svg.Property(this.name, newValue);
|
|
}
|
|
|
|
// definition extensions
|
|
// get the definition from the definitions table
|
|
|
|
}, {
|
|
key: 'getDefinition',
|
|
value: function getDefinition() {
|
|
var name = this.value.match(/#([^)'"]+)/);
|
|
if (name) {
|
|
name = name[1];
|
|
}
|
|
if (!name) {
|
|
name = this.value;
|
|
}
|
|
return svg.Definitions[name];
|
|
}
|
|
}, {
|
|
key: 'isUrlDefinition',
|
|
value: function isUrlDefinition() {
|
|
return this.value.startsWith('url(');
|
|
}
|
|
}, {
|
|
key: 'getFillStyleDefinition',
|
|
value: function getFillStyleDefinition(e, opacityProp) {
|
|
var def = this.getDefinition();
|
|
|
|
// gradient
|
|
if (def != null && def.createGradient) {
|
|
return def.createGradient(svg.ctx, e, opacityProp);
|
|
}
|
|
|
|
// pattern
|
|
if (def != null && def.createPattern) {
|
|
if (def.getHrefAttribute().hasValue()) {
|
|
var pt = def.attribute('patternTransform');
|
|
def = def.getHrefAttribute().getDefinition();
|
|
if (pt.hasValue()) {
|
|
def.attribute('patternTransform', true).value = pt.value;
|
|
}
|
|
}
|
|
return def.createPattern(svg.ctx, e);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
// length extensions
|
|
|
|
}, {
|
|
key: 'getDPI',
|
|
value: function getDPI(viewPort) {
|
|
return 96.0; // TODO: compute?
|
|
}
|
|
}, {
|
|
key: 'getEM',
|
|
value: function getEM(viewPort) {
|
|
var em = 12;
|
|
|
|
var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize);
|
|
if (fontSize.hasValue()) em = fontSize.toPixels(viewPort);
|
|
|
|
return em;
|
|
}
|
|
}, {
|
|
key: 'getUnits',
|
|
value: function getUnits() {
|
|
var s = this.value + '';
|
|
return s.replace(/[0-9.-]/g, '');
|
|
}
|
|
|
|
// get the length as pixels
|
|
|
|
}, {
|
|
key: 'toPixels',
|
|
value: function toPixels(viewPort, processPercent) {
|
|
if (!this.hasValue()) return 0;
|
|
var s = this.value + '';
|
|
if (s.match(/em$/)) return this.numValue() * this.getEM(viewPort);
|
|
if (s.match(/ex$/)) return this.numValue() * this.getEM(viewPort) / 2.0;
|
|
if (s.match(/px$/)) return this.numValue();
|
|
if (s.match(/pt$/)) return this.numValue() * this.getDPI(viewPort) * (1.0 / 72.0);
|
|
if (s.match(/pc$/)) return this.numValue() * 15;
|
|
if (s.match(/cm$/)) return this.numValue() * this.getDPI(viewPort) / 2.54;
|
|
if (s.match(/mm$/)) return this.numValue() * this.getDPI(viewPort) / 25.4;
|
|
if (s.match(/in$/)) return this.numValue() * this.getDPI(viewPort);
|
|
if (s.match(/%$/)) return this.numValue() * svg.ViewPort.ComputeSize(viewPort);
|
|
var n = this.numValue();
|
|
if (processPercent && n < 1.0) return n * svg.ViewPort.ComputeSize(viewPort);
|
|
return n;
|
|
}
|
|
|
|
// time extensions
|
|
// get the time as milliseconds
|
|
|
|
}, {
|
|
key: 'toMilliseconds',
|
|
value: function toMilliseconds() {
|
|
if (!this.hasValue()) return 0;
|
|
var s = this.value + '';
|
|
if (s.match(/s$/)) return this.numValue() * 1000;
|
|
if (s.match(/ms$/)) return this.numValue();
|
|
return this.numValue();
|
|
}
|
|
|
|
// angle extensions
|
|
// get the angle as radians
|
|
|
|
}, {
|
|
key: 'toRadians',
|
|
value: function toRadians() {
|
|
if (!this.hasValue()) return 0;
|
|
var s = this.value + '';
|
|
if (s.match(/deg$/)) return this.numValue() * (Math.PI / 180.0);
|
|
if (s.match(/grad$/)) return this.numValue() * (Math.PI / 200.0);
|
|
if (s.match(/rad$/)) return this.numValue();
|
|
return this.numValue() * (Math.PI / 180.0);
|
|
}
|
|
}, {
|
|
key: 'toTextBaseline',
|
|
value: function toTextBaseline() {
|
|
if (!this.hasValue()) return null;
|
|
return textBaselineMapping[this.value];
|
|
}
|
|
}]);
|
|
return Property;
|
|
}();
|
|
|
|
// fonts
|
|
svg.Font = new function () {
|
|
this.Styles = 'normal|italic|oblique|inherit';
|
|
this.Variants = 'normal|small-caps|inherit';
|
|
this.Weights = 'normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit';
|
|
|
|
this.CreateFont = function (fontStyle, fontVariant, fontWeight, fontSize, fontFamily, inherit) {
|
|
var f = inherit != null ? this.Parse(inherit) : this.CreateFont('', '', '', '', '', svg.ctx.font);
|
|
return {
|
|
fontFamily: fontFamily || f.fontFamily,
|
|
fontSize: fontSize || f.fontSize,
|
|
fontStyle: fontStyle || f.fontStyle,
|
|
fontWeight: fontWeight || f.fontWeight,
|
|
fontVariant: fontVariant || f.fontVariant,
|
|
toString: function toString() {
|
|
return [this.fontStyle, this.fontVariant, this.fontWeight, this.fontSize, this.fontFamily].join(' ');
|
|
}
|
|
};
|
|
};
|
|
|
|
var that = this;
|
|
this.Parse = function (s) {
|
|
var f = {};
|
|
var d = svg.trim(svg.compressSpaces(s || '')).split(' ');
|
|
var set$$1 = { fontSize: false, fontStyle: false, fontWeight: false, fontVariant: false };
|
|
var ff = '';
|
|
for (var i = 0; i < d.length; i++) {
|
|
if (!set$$1.fontStyle && that.Styles.includes(d[i])) {
|
|
if (d[i] !== 'inherit') f.fontStyle = d[i];set$$1.fontStyle = true;
|
|
} else if (!set$$1.fontVariant && that.Variants.includes(d[i])) {
|
|
if (d[i] !== 'inherit') f.fontVariant = d[i];set$$1.fontStyle = set$$1.fontVariant = true;
|
|
} else if (!set$$1.fontWeight && that.Weights.includes(d[i])) {
|
|
if (d[i] !== 'inherit') f.fontWeight = d[i];set$$1.fontStyle = set$$1.fontVariant = set$$1.fontWeight = true;
|
|
} else if (!set$$1.fontSize) {
|
|
if (d[i] !== 'inherit') f.fontSize = d[i].split('/')[0];set$$1.fontStyle = set$$1.fontVariant = set$$1.fontWeight = set$$1.fontSize = true;
|
|
} else {
|
|
if (d[i] !== 'inherit') ff += d[i];
|
|
}
|
|
}
|
|
if (ff !== '') f.fontFamily = ff;
|
|
return f;
|
|
};
|
|
}();
|
|
|
|
// points and paths
|
|
svg.ToNumberArray = function (s) {
|
|
var a = svg.trim(svg.compressSpaces((s || '').replace(/,/g, ' '))).split(' ');
|
|
for (var i = 0; i < a.length; i++) {
|
|
a[i] = parseFloat(a[i]);
|
|
}
|
|
return a;
|
|
};
|
|
svg.Point = function () {
|
|
function _class(x, y) {
|
|
classCallCheck(this, _class);
|
|
|
|
this.x = x;
|
|
this.y = y;
|
|
}
|
|
|
|
createClass(_class, [{
|
|
key: 'angleTo',
|
|
value: function angleTo(p) {
|
|
return Math.atan2(p.y - this.y, p.x - this.x);
|
|
}
|
|
}, {
|
|
key: 'applyTransform',
|
|
value: function applyTransform(v) {
|
|
var xp = this.x * v[0] + this.y * v[2] + v[4];
|
|
var yp = this.x * v[1] + this.y * v[3] + v[5];
|
|
this.x = xp;
|
|
this.y = yp;
|
|
}
|
|
}]);
|
|
return _class;
|
|
}();
|
|
|
|
svg.CreatePoint = function (s) {
|
|
var a = svg.ToNumberArray(s);
|
|
return new svg.Point(a[0], a[1]);
|
|
};
|
|
svg.CreatePath = function (s) {
|
|
var a = svg.ToNumberArray(s);
|
|
var path = [];
|
|
for (var i = 0; i < a.length; i += 2) {
|
|
path.push(new svg.Point(a[i], a[i + 1]));
|
|
}
|
|
return path;
|
|
};
|
|
|
|
// bounding box
|
|
svg.BoundingBox = function (x1, y1, x2, y2) {
|
|
// pass in initial points if you want
|
|
this.x1 = Number.NaN;
|
|
this.y1 = Number.NaN;
|
|
this.x2 = Number.NaN;
|
|
this.y2 = Number.NaN;
|
|
|
|
this.x = function () {
|
|
return this.x1;
|
|
};
|
|
this.y = function () {
|
|
return this.y1;
|
|
};
|
|
this.width = function () {
|
|
return this.x2 - this.x1;
|
|
};
|
|
this.height = function () {
|
|
return this.y2 - this.y1;
|
|
};
|
|
|
|
this.addPoint = function (x, y) {
|
|
if (x != null) {
|
|
if (isNaN(this.x1) || isNaN(this.x2)) {
|
|
this.x1 = x;
|
|
this.x2 = x;
|
|
}
|
|
if (x < this.x1) this.x1 = x;
|
|
if (x > this.x2) this.x2 = x;
|
|
}
|
|
|
|
if (y != null) {
|
|
if (isNaN(this.y1) || isNaN(this.y2)) {
|
|
this.y1 = y;
|
|
this.y2 = y;
|
|
}
|
|
if (y < this.y1) this.y1 = y;
|
|
if (y > this.y2) this.y2 = y;
|
|
}
|
|
};
|
|
this.addX = function (x) {
|
|
this.addPoint(x, null);
|
|
};
|
|
this.addY = function (y) {
|
|
this.addPoint(null, y);
|
|
};
|
|
|
|
this.addBoundingBox = function (bb) {
|
|
this.addPoint(bb.x1, bb.y1);
|
|
this.addPoint(bb.x2, bb.y2);
|
|
};
|
|
|
|
this.addQuadraticCurve = function (p0x, p0y, p1x, p1y, p2x, p2y) {
|
|
var cp1x = p0x + 2 / 3 * (p1x - p0x); // CP1 = QP0 + 2/3 *(QP1-QP0)
|
|
var cp1y = p0y + 2 / 3 * (p1y - p0y); // CP1 = QP0 + 2/3 *(QP1-QP0)
|
|
var cp2x = cp1x + 1 / 3 * (p2x - p0x); // CP2 = CP1 + 1/3 *(QP2-QP0)
|
|
var cp2y = cp1y + 1 / 3 * (p2y - p0y); // CP2 = CP1 + 1/3 *(QP2-QP0)
|
|
this.addBezierCurve(p0x, p0y, cp1x, cp2x, cp1y, cp2y, p2x, p2y);
|
|
};
|
|
|
|
this.addBezierCurve = function (p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {
|
|
var _this = this;
|
|
|
|
// from http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html
|
|
var p0 = [p0x, p0y],
|
|
p1 = [p1x, p1y],
|
|
p2 = [p2x, p2y],
|
|
p3 = [p3x, p3y];
|
|
this.addPoint(p0[0], p0[1]);
|
|
this.addPoint(p3[0], p3[1]);
|
|
|
|
var _loop = function _loop(i) {
|
|
var f = function f(t) {
|
|
return Math.pow(1 - t, 3) * p0[i] + 3 * Math.pow(1 - t, 2) * t * p1[i] + 3 * (1 - t) * Math.pow(t, 2) * p2[i] + Math.pow(t, 3) * p3[i];
|
|
};
|
|
|
|
var b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
|
|
var a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
|
|
var c = 3 * p1[i] - 3 * p0[i];
|
|
|
|
if (a === 0) {
|
|
if (b === 0) return 'continue';
|
|
var t = -c / b;
|
|
if (t > 0 && t < 1) {
|
|
if (i === 0) _this.addX(f(t));
|
|
if (i === 1) _this.addY(f(t));
|
|
}
|
|
return 'continue';
|
|
}
|
|
|
|
var b2ac = Math.pow(b, 2) - 4 * c * a;
|
|
if (b2ac < 0) return 'continue';
|
|
var t1 = (-b + Math.sqrt(b2ac)) / (2 * a);
|
|
if (t1 > 0 && t1 < 1) {
|
|
if (i === 0) _this.addX(f(t1));
|
|
if (i === 1) _this.addY(f(t1));
|
|
}
|
|
var t2 = (-b - Math.sqrt(b2ac)) / (2 * a);
|
|
if (t2 > 0 && t2 < 1) {
|
|
if (i === 0) _this.addX(f(t2));
|
|
if (i === 1) _this.addY(f(t2));
|
|
}
|
|
};
|
|
|
|
for (var i = 0; i <= 1; i++) {
|
|
var _ret = _loop(i);
|
|
|
|
if (_ret === 'continue') continue;
|
|
}
|
|
};
|
|
|
|
this.isPointInBox = function (x, y) {
|
|
return this.x1 <= x && x <= this.x2 && this.y1 <= y && y <= this.y2;
|
|
};
|
|
|
|
this.addPoint(x1, y1);
|
|
this.addPoint(x2, y2);
|
|
};
|
|
|
|
// transforms
|
|
svg.Transform = function (v) {
|
|
this.Type = {};
|
|
|
|
// translate
|
|
this.Type.translate = function (s) {
|
|
this.p = svg.CreatePoint(s);
|
|
this.apply = function (ctx) {
|
|
ctx.translate(this.p.x || 0.0, this.p.y || 0.0);
|
|
};
|
|
this.unapply = function (ctx) {
|
|
ctx.translate(-1.0 * this.p.x || 0.0, -1.0 * this.p.y || 0.0);
|
|
};
|
|
this.applyToPoint = function (p) {
|
|
p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]);
|
|
};
|
|
};
|
|
|
|
// rotate
|
|
this.Type.rotate = function (s) {
|
|
var a = svg.ToNumberArray(s);
|
|
this.angle = new svg.Property('angle', a[0]);
|
|
this.cx = a[1] || 0;
|
|
this.cy = a[2] || 0;
|
|
this.apply = function (ctx) {
|
|
ctx.translate(this.cx, this.cy);
|
|
ctx.rotate(this.angle.toRadians());
|
|
ctx.translate(-this.cx, -this.cy);
|
|
};
|
|
this.unapply = function (ctx) {
|
|
ctx.translate(this.cx, this.cy);
|
|
ctx.rotate(-1.0 * this.angle.toRadians());
|
|
ctx.translate(-this.cx, -this.cy);
|
|
};
|
|
this.applyToPoint = function (p) {
|
|
var a = this.angle.toRadians();
|
|
p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]);
|
|
p.applyTransform([Math.cos(a), Math.sin(a), -Math.sin(a), Math.cos(a), 0, 0]);
|
|
p.applyTransform([1, 0, 0, 1, -this.p.x || 0.0, -this.p.y || 0.0]);
|
|
};
|
|
};
|
|
|
|
this.Type.scale = function (s) {
|
|
this.p = svg.CreatePoint(s);
|
|
this.apply = function (ctx) {
|
|
ctx.scale(this.p.x || 1.0, this.p.y || this.p.x || 1.0);
|
|
};
|
|
this.unapply = function (ctx) {
|
|
ctx.scale(1.0 / this.p.x || 1.0, 1.0 / this.p.y || this.p.x || 1.0);
|
|
};
|
|
this.applyToPoint = function (p) {
|
|
p.applyTransform([this.p.x || 0.0, 0, 0, this.p.y || 0.0, 0, 0]);
|
|
};
|
|
};
|
|
|
|
this.Type.matrix = function (s) {
|
|
this.m = svg.ToNumberArray(s);
|
|
this.apply = function (ctx) {
|
|
ctx.transform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]);
|
|
};
|
|
this.applyToPoint = function (p) {
|
|
p.applyTransform(this.m);
|
|
};
|
|
};
|
|
|
|
this.Type.SkewBase = function (_Type$matrix) {
|
|
inherits(_class2, _Type$matrix);
|
|
|
|
function _class2(s) {
|
|
classCallCheck(this, _class2);
|
|
|
|
var _this2 = possibleConstructorReturn(this, (_class2.__proto__ || Object.getPrototypeOf(_class2)).call(this, s));
|
|
|
|
_this2.angle = new svg.Property('angle', s);
|
|
return _this2;
|
|
}
|
|
|
|
return _class2;
|
|
}(this.Type.matrix);
|
|
|
|
this.Type.skewX = function (_Type$SkewBase) {
|
|
inherits(_class3, _Type$SkewBase);
|
|
|
|
function _class3(s) {
|
|
classCallCheck(this, _class3);
|
|
|
|
var _this3 = possibleConstructorReturn(this, (_class3.__proto__ || Object.getPrototypeOf(_class3)).call(this, s));
|
|
|
|
_this3.m = [1, 0, Math.tan(_this3.angle.toRadians()), 1, 0, 0];
|
|
return _this3;
|
|
}
|
|
|
|
return _class3;
|
|
}(this.Type.SkewBase);
|
|
|
|
this.Type.skewY = function (_Type$SkewBase2) {
|
|
inherits(_class4, _Type$SkewBase2);
|
|
|
|
function _class4(s) {
|
|
classCallCheck(this, _class4);
|
|
|
|
var _this4 = possibleConstructorReturn(this, (_class4.__proto__ || Object.getPrototypeOf(_class4)).call(this, s));
|
|
|
|
_this4.m = [1, Math.tan(_this4.angle.toRadians()), 0, 1, 0, 0];
|
|
return _this4;
|
|
}
|
|
|
|
return _class4;
|
|
}(this.Type.SkewBase);
|
|
|
|
this.transforms = [];
|
|
|
|
this.apply = function (ctx) {
|
|
for (var i = 0; i < this.transforms.length; i++) {
|
|
this.transforms[i].apply(ctx);
|
|
}
|
|
};
|
|
|
|
this.unapply = function (ctx) {
|
|
for (var i = this.transforms.length - 1; i >= 0; i--) {
|
|
this.transforms[i].unapply(ctx);
|
|
}
|
|
};
|
|
|
|
this.applyToPoint = function (p) {
|
|
for (var i = 0; i < this.transforms.length; i++) {
|
|
this.transforms[i].applyToPoint(p);
|
|
}
|
|
};
|
|
|
|
var data = svg.trim(svg.compressSpaces(v)).replace(/\)([a-zA-Z])/g, ') $1').replace(/\)(\s?,\s?)/g, ') ').split(/\s(?=[a-z])/);
|
|
for (var i = 0; i < data.length; i++) {
|
|
var type = svg.trim(data[i].split('(')[0]);
|
|
var s = data[i].split('(')[1].replace(')', '');
|
|
var transform = new this.Type[type](s);
|
|
transform.type = type;
|
|
this.transforms.push(transform);
|
|
}
|
|
};
|
|
|
|
// aspect ratio
|
|
svg.AspectRatio = function (ctx, aspectRatio, width, desiredWidth, height, desiredHeight, minX, minY, refX, refY) {
|
|
// aspect ratio - https://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
|
|
aspectRatio = svg.compressSpaces(aspectRatio);
|
|
aspectRatio = aspectRatio.replace(/^defer\s/, ''); // ignore defer
|
|
var align = aspectRatio.split(' ')[0] || 'xMidYMid';
|
|
var meetOrSlice = aspectRatio.split(' ')[1] || 'meet';
|
|
|
|
// calculate scale
|
|
var scaleX = width / desiredWidth;
|
|
var scaleY = height / desiredHeight;
|
|
var scaleMin = Math.min(scaleX, scaleY);
|
|
var scaleMax = Math.max(scaleX, scaleY);
|
|
if (meetOrSlice === 'meet') {
|
|
desiredWidth *= scaleMin;desiredHeight *= scaleMin;
|
|
}
|
|
if (meetOrSlice === 'slice') {
|
|
desiredWidth *= scaleMax;desiredHeight *= scaleMax;
|
|
}
|
|
|
|
refX = new svg.Property('refX', refX);
|
|
refY = new svg.Property('refY', refY);
|
|
if (refX.hasValue() && refY.hasValue()) {
|
|
ctx.translate(-scaleMin * refX.toPixels('x'), -scaleMin * refY.toPixels('y'));
|
|
} else {
|
|
// align
|
|
if (align.match(/^xMid/) && (meetOrSlice === 'meet' && scaleMin === scaleY || meetOrSlice === 'slice' && scaleMax === scaleY)) ctx.translate(width / 2.0 - desiredWidth / 2.0, 0);
|
|
if (align.match(/YMid$/) && (meetOrSlice === 'meet' && scaleMin === scaleX || meetOrSlice === 'slice' && scaleMax === scaleX)) ctx.translate(0, height / 2.0 - desiredHeight / 2.0);
|
|
if (align.match(/^xMax/) && (meetOrSlice === 'meet' && scaleMin === scaleY || meetOrSlice === 'slice' && scaleMax === scaleY)) ctx.translate(width - desiredWidth, 0);
|
|
if (align.match(/YMax$/) && (meetOrSlice === 'meet' && scaleMin === scaleX || meetOrSlice === 'slice' && scaleMax === scaleX)) ctx.translate(0, height - desiredHeight);
|
|
}
|
|
|
|
// scale
|
|
if (align === 'none') ctx.scale(scaleX, scaleY);else if (meetOrSlice === 'meet') ctx.scale(scaleMin, scaleMin);else if (meetOrSlice === 'slice') ctx.scale(scaleMax, scaleMax);
|
|
|
|
// translate
|
|
ctx.translate(minX == null ? 0 : -minX, minY == null ? 0 : -minY);
|
|
};
|
|
|
|
// elements
|
|
svg.Element = {};
|
|
|
|
svg.EmptyProperty = new svg.Property('EMPTY', '');
|
|
|
|
svg.Element.ElementBase = function (node) {
|
|
this.attributes = {};
|
|
this.styles = {};
|
|
this.children = [];
|
|
|
|
// get or create attribute
|
|
this.attribute = function (name, createIfNotExists) {
|
|
var a = this.attributes[name];
|
|
if (a != null) return a;
|
|
|
|
if (createIfNotExists === true) {
|
|
a = new svg.Property(name, '');this.attributes[name] = a;
|
|
}
|
|
return a || svg.EmptyProperty;
|
|
};
|
|
|
|
this.getHrefAttribute = function () {
|
|
for (var a in this.attributes) {
|
|
if (a.match(/:href$/)) {
|
|
return this.attributes[a];
|
|
}
|
|
}
|
|
return svg.EmptyProperty;
|
|
};
|
|
|
|
// get or create style, crawls up node tree
|
|
this.style = function (name, createIfNotExists, skipAncestors) {
|
|
var s = this.styles[name];
|
|
if (s != null) return s;
|
|
|
|
var a = this.attribute(name);
|
|
if (a != null && a.hasValue()) {
|
|
this.styles[name] = a; // move up to me to cache
|
|
return a;
|
|
}
|
|
|
|
if (skipAncestors !== true) {
|
|
var p = this.parent;
|
|
if (p != null) {
|
|
var ps = p.style(name);
|
|
if (ps != null && ps.hasValue()) {
|
|
return ps;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (createIfNotExists === true) {
|
|
s = new svg.Property(name, '');this.styles[name] = s;
|
|
}
|
|
return s || svg.EmptyProperty;
|
|
};
|
|
|
|
// base render
|
|
this.render = function (ctx) {
|
|
// don't render display=none
|
|
if (this.style('display').value === 'none') return;
|
|
|
|
// don't render visibility=hidden
|
|
if (this.style('visibility').value === 'hidden') return;
|
|
|
|
ctx.save();
|
|
if (this.attribute('mask').hasValue()) {
|
|
// mask
|
|
var mask = this.attribute('mask').getDefinition();
|
|
if (mask != null) mask.apply(ctx, this);
|
|
} else if (this.style('filter').hasValue()) {
|
|
// filter
|
|
var filter = this.style('filter').getDefinition();
|
|
if (filter != null) filter.apply(ctx, this);
|
|
} else {
|
|
this.setContext(ctx);
|
|
this.renderChildren(ctx);
|
|
this.clearContext(ctx);
|
|
}
|
|
ctx.restore();
|
|
};
|
|
|
|
// base set context
|
|
this.setContext = function (ctx) {
|
|
// OVERRIDE ME!
|
|
};
|
|
|
|
// base clear context
|
|
this.clearContext = function (ctx) {
|
|
// OVERRIDE ME!
|
|
};
|
|
|
|
// base render children
|
|
this.renderChildren = function (ctx) {
|
|
for (var i = 0; i < this.children.length; i++) {
|
|
this.children[i].render(ctx);
|
|
}
|
|
};
|
|
|
|
this.addChild = function (childNode, create) {
|
|
var child = create ? svg.CreateElement(childNode) : childNode;
|
|
child.parent = this;
|
|
if (child.type !== 'title') {
|
|
this.children.push(child);
|
|
}
|
|
};
|
|
|
|
if (node != null && node.nodeType === 1) {
|
|
// ELEMENT_NODE
|
|
// add children
|
|
for (var i = 0, childNode; childNode = node.childNodes[i]; i++) {
|
|
if (childNode.nodeType === 1) this.addChild(childNode, true); // ELEMENT_NODE
|
|
if (this.captureTextNodes && (childNode.nodeType === 3 || childNode.nodeType === 4)) {
|
|
var text = childNode.nodeValue || childNode.text || '';
|
|
if (svg.trim(svg.compressSpaces(text)) !== '') {
|
|
this.addChild(new svg.Element.tspan(childNode), false); // TEXT_NODE
|
|
}
|
|
}
|
|
}
|
|
|
|
// add attributes
|
|
for (var _i = 0; _i < node.attributes.length; _i++) {
|
|
var attribute = node.attributes[_i];
|
|
this.attributes[attribute.nodeName] = new svg.Property(attribute.nodeName, attribute.nodeValue);
|
|
}
|
|
|
|
// add tag styles
|
|
var styles = svg.Styles[node.nodeName];
|
|
if (styles != null) {
|
|
for (var name in styles) {
|
|
this.styles[name] = styles[name];
|
|
}
|
|
}
|
|
|
|
// add class styles
|
|
if (this.attribute('class').hasValue()) {
|
|
var classes = svg.compressSpaces(this.attribute('class').value).split(' ');
|
|
for (var j = 0; j < classes.length; j++) {
|
|
styles = svg.Styles['.' + classes[j]];
|
|
if (styles != null) {
|
|
for (var _name in styles) {
|
|
this.styles[_name] = styles[_name];
|
|
}
|
|
}
|
|
styles = svg.Styles[node.nodeName + '.' + classes[j]];
|
|
if (styles != null) {
|
|
for (var _name2 in styles) {
|
|
this.styles[_name2] = styles[_name2];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// add id styles
|
|
if (this.attribute('id').hasValue()) {
|
|
var _styles = svg.Styles['#' + this.attribute('id').value];
|
|
if (_styles != null) {
|
|
for (var _name3 in _styles) {
|
|
this.styles[_name3] = _styles[_name3];
|
|
}
|
|
}
|
|
}
|
|
|
|
// add inline styles
|
|
if (this.attribute('style').hasValue()) {
|
|
var _styles2 = this.attribute('style').value.split(';');
|
|
for (var _i2 = 0; _i2 < _styles2.length; _i2++) {
|
|
if (svg.trim(_styles2[_i2]) !== '') {
|
|
var style = _styles2[_i2].split(':');
|
|
var _name4 = svg.trim(style[0]);
|
|
var value = svg.trim(style[1]);
|
|
this.styles[_name4] = new svg.Property(_name4, value);
|
|
}
|
|
}
|
|
}
|
|
|
|
// add id
|
|
if (this.attribute('id').hasValue()) {
|
|
if (svg.Definitions[this.attribute('id').value] == null) {
|
|
svg.Definitions[this.attribute('id').value] = this;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
svg.Element.RenderedElementBase = function (_svg$Element$ElementB) {
|
|
inherits(_class5, _svg$Element$ElementB);
|
|
|
|
function _class5(node) {
|
|
classCallCheck(this, _class5);
|
|
|
|
var _this5 = possibleConstructorReturn(this, (_class5.__proto__ || Object.getPrototypeOf(_class5)).call(this, node));
|
|
|
|
_this5.setContext = function (ctx) {
|
|
// fill
|
|
if (this.style('fill').isUrlDefinition()) {
|
|
var fs = this.style('fill').getFillStyleDefinition(this, this.style('fill-opacity'));
|
|
if (fs != null) ctx.fillStyle = fs;
|
|
} else if (this.style('fill').hasValue()) {
|
|
var fillStyle = this.style('fill');
|
|
if (fillStyle.value === 'currentColor') fillStyle.value = this.style('color').value;
|
|
ctx.fillStyle = fillStyle.value === 'none' ? 'rgba(0,0,0,0)' : fillStyle.value;
|
|
}
|
|
if (this.style('fill-opacity').hasValue()) {
|
|
var _fillStyle = new svg.Property('fill', ctx.fillStyle);
|
|
_fillStyle = _fillStyle.addOpacity(this.style('fill-opacity'));
|
|
ctx.fillStyle = _fillStyle.value;
|
|
}
|
|
|
|
// stroke
|
|
if (this.style('stroke').isUrlDefinition()) {
|
|
var _fs = this.style('stroke').getFillStyleDefinition(this, this.style('stroke-opacity'));
|
|
if (_fs != null) ctx.strokeStyle = _fs;
|
|
} else if (this.style('stroke').hasValue()) {
|
|
var strokeStyle = this.style('stroke');
|
|
if (strokeStyle.value === 'currentColor') strokeStyle.value = this.style('color').value;
|
|
ctx.strokeStyle = strokeStyle.value === 'none' ? 'rgba(0,0,0,0)' : strokeStyle.value;
|
|
}
|
|
if (this.style('stroke-opacity').hasValue()) {
|
|
var _strokeStyle = new svg.Property('stroke', ctx.strokeStyle);
|
|
_strokeStyle = _strokeStyle.addOpacity(this.style('stroke-opacity'));
|
|
ctx.strokeStyle = _strokeStyle.value;
|
|
}
|
|
if (this.style('stroke-width').hasValue()) {
|
|
var newLineWidth = this.style('stroke-width').toPixels();
|
|
ctx.lineWidth = newLineWidth === 0 ? 0.001 : newLineWidth; // browsers don't respect 0
|
|
}
|
|
if (this.style('stroke-linecap').hasValue()) ctx.lineCap = this.style('stroke-linecap').value;
|
|
if (this.style('stroke-linejoin').hasValue()) ctx.lineJoin = this.style('stroke-linejoin').value;
|
|
if (this.style('stroke-miterlimit').hasValue()) ctx.miterLimit = this.style('stroke-miterlimit').value;
|
|
if (this.style('stroke-dasharray').hasValue() && this.style('stroke-dasharray').value !== 'none') {
|
|
var gaps = svg.ToNumberArray(this.style('stroke-dasharray').value);
|
|
if (typeof ctx.setLineDash !== 'undefined') {
|
|
ctx.setLineDash(gaps);
|
|
} else if (typeof ctx.webkitLineDash !== 'undefined') {
|
|
ctx.webkitLineDash = gaps;
|
|
} else if (typeof ctx.mozDash !== 'undefined' && !(gaps.length === 1 && gaps[0] === 0)) {
|
|
ctx.mozDash = gaps;
|
|
}
|
|
|
|
var offset = this.style('stroke-dashoffset').numValueOrDefault(1);
|
|
if (typeof ctx.lineDashOffset !== 'undefined') {
|
|
ctx.lineDashOffset = offset;
|
|
} else if (typeof ctx.webkitLineDashOffset !== 'undefined') {
|
|
ctx.webkitLineDashOffset = offset;
|
|
} else if (typeof ctx.mozDashOffset !== 'undefined') {
|
|
ctx.mozDashOffset = offset;
|
|
}
|
|
}
|
|
|
|
// font
|
|
if (typeof ctx.font !== 'undefined') {
|
|
ctx.font = svg.Font.CreateFont(this.style('font-style').value, this.style('font-variant').value, this.style('font-weight').value, this.style('font-size').hasValue() ? this.style('font-size').toPixels() + 'px' : '', this.style('font-family').value).toString();
|
|
}
|
|
|
|
// transform
|
|
if (this.attribute('transform').hasValue()) {
|
|
var transform = new svg.Transform(this.attribute('transform').value);
|
|
transform.apply(ctx);
|
|
}
|
|
|
|
// clip
|
|
if (this.style('clip-path', false, true).hasValue()) {
|
|
var clip = this.style('clip-path', false, true).getDefinition();
|
|
if (clip != null) clip.apply(ctx);
|
|
}
|
|
|
|
// opacity
|
|
if (this.style('opacity').hasValue()) {
|
|
ctx.globalAlpha = this.style('opacity').numValue();
|
|
}
|
|
};
|
|
return _this5;
|
|
}
|
|
|
|
return _class5;
|
|
}(svg.Element.ElementBase);
|
|
|
|
svg.Element.PathElementBase = function (_svg$Element$Rendered) {
|
|
inherits(_class6, _svg$Element$Rendered);
|
|
|
|
function _class6(node) {
|
|
classCallCheck(this, _class6);
|
|
|
|
var _this6 = possibleConstructorReturn(this, (_class6.__proto__ || Object.getPrototypeOf(_class6)).call(this, node));
|
|
|
|
_this6.path = function (ctx) {
|
|
if (ctx != null) ctx.beginPath();
|
|
return new svg.BoundingBox();
|
|
};
|
|
|
|
_this6.renderChildren = function (ctx) {
|
|
this.path(ctx);
|
|
svg.Mouse.checkPath(this, ctx);
|
|
if (ctx.fillStyle !== '') {
|
|
if (this.style('fill-rule').valueOrDefault('inherit') !== 'inherit') {
|
|
ctx.fill(this.style('fill-rule').value);
|
|
} else {
|
|
ctx.fill();
|
|
}
|
|
}
|
|
if (ctx.strokeStyle !== '') ctx.stroke();
|
|
|
|
var markers = this.getMarkers();
|
|
if (markers != null) {
|
|
if (this.style('marker-start').isUrlDefinition()) {
|
|
var marker = this.style('marker-start').getDefinition();
|
|
marker.render(ctx, markers[0][0], markers[0][1]);
|
|
}
|
|
if (this.style('marker-mid').isUrlDefinition()) {
|
|
var _marker = this.style('marker-mid').getDefinition();
|
|
for (var i = 1; i < markers.length - 1; i++) {
|
|
_marker.render(ctx, markers[i][0], markers[i][1]);
|
|
}
|
|
}
|
|
if (this.style('marker-end').isUrlDefinition()) {
|
|
var _marker2 = this.style('marker-end').getDefinition();
|
|
_marker2.render(ctx, markers[markers.length - 1][0], markers[markers.length - 1][1]);
|
|
}
|
|
}
|
|
};
|
|
|
|
_this6.getBoundingBox = function () {
|
|
return this.path();
|
|
};
|
|
|
|
_this6.getMarkers = function () {
|
|
return null;
|
|
};
|
|
return _this6;
|
|
}
|
|
|
|
return _class6;
|
|
}(svg.Element.RenderedElementBase);
|
|
|
|
// svg element
|
|
svg.Element.svg = function (_svg$Element$Rendered2) {
|
|
inherits(_class7, _svg$Element$Rendered2);
|
|
|
|
function _class7(node) {
|
|
classCallCheck(this, _class7);
|
|
|
|
var _this7 = possibleConstructorReturn(this, (_class7.__proto__ || Object.getPrototypeOf(_class7)).call(this, node));
|
|
|
|
_this7.baseClearContext = _this7.clearContext;
|
|
_this7.clearContext = function (ctx) {
|
|
this.baseClearContext(ctx);
|
|
svg.ViewPort.RemoveCurrent();
|
|
};
|
|
|
|
_this7.baseSetContext = _this7.setContext;
|
|
_this7.setContext = function (ctx) {
|
|
// initial values and defaults
|
|
ctx.strokeStyle = 'rgba(0,0,0,0)';
|
|
ctx.lineCap = 'butt';
|
|
ctx.lineJoin = 'miter';
|
|
ctx.miterLimit = 4;
|
|
if (typeof ctx.font !== 'undefined' && typeof window.getComputedStyle !== 'undefined') {
|
|
ctx.font = window.getComputedStyle(ctx.canvas).getPropertyValue('font');
|
|
}
|
|
|
|
this.baseSetContext(ctx);
|
|
|
|
// create new view port
|
|
if (!this.attribute('x').hasValue()) this.attribute('x', true).value = 0;
|
|
if (!this.attribute('y').hasValue()) this.attribute('y', true).value = 0;
|
|
ctx.translate(this.attribute('x').toPixels('x'), this.attribute('y').toPixels('y'));
|
|
|
|
var width = svg.ViewPort.width();
|
|
var height = svg.ViewPort.height();
|
|
|
|
if (!this.attribute('width').hasValue()) this.attribute('width', true).value = '100%';
|
|
if (!this.attribute('height').hasValue()) this.attribute('height', true).value = '100%';
|
|
if (typeof this.root === 'undefined') {
|
|
width = this.attribute('width').toPixels('x');
|
|
height = this.attribute('height').toPixels('y');
|
|
|
|
var x = 0;
|
|
var y = 0;
|
|
if (this.attribute('refX').hasValue() && this.attribute('refY').hasValue()) {
|
|
x = -this.attribute('refX').toPixels('x');
|
|
y = -this.attribute('refY').toPixels('y');
|
|
}
|
|
|
|
if (this.attribute('overflow').valueOrDefault('hidden') !== 'visible') {
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
ctx.lineTo(width, y);
|
|
ctx.lineTo(width, height);
|
|
ctx.lineTo(x, height);
|
|
ctx.closePath();
|
|
ctx.clip();
|
|
}
|
|
}
|
|
svg.ViewPort.SetCurrent(width, height);
|
|
|
|
// viewbox
|
|
if (this.attribute('viewBox').hasValue()) {
|
|
var viewBox = svg.ToNumberArray(this.attribute('viewBox').value);
|
|
var minX = viewBox[0];
|
|
var minY = viewBox[1];
|
|
width = viewBox[2];
|
|
height = viewBox[3];
|
|
|
|
svg.AspectRatio(ctx, this.attribute('preserveAspectRatio').value, svg.ViewPort.width(), width, svg.ViewPort.height(), height, minX, minY, this.attribute('refX').value, this.attribute('refY').value);
|
|
|
|
svg.ViewPort.RemoveCurrent();
|
|
svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]);
|
|
}
|
|
};
|
|
return _this7;
|
|
}
|
|
|
|
return _class7;
|
|
}(svg.Element.RenderedElementBase);
|
|
|
|
// rect element
|
|
svg.Element.rect = function (_svg$Element$PathElem) {
|
|
inherits(_class8, _svg$Element$PathElem);
|
|
|
|
function _class8(node) {
|
|
classCallCheck(this, _class8);
|
|
|
|
var _this8 = possibleConstructorReturn(this, (_class8.__proto__ || Object.getPrototypeOf(_class8)).call(this, node));
|
|
|
|
_this8.path = function (ctx) {
|
|
var x = this.attribute('x').toPixels('x');
|
|
var y = this.attribute('y').toPixels('y');
|
|
var width = this.attribute('width').toPixels('x');
|
|
var height = this.attribute('height').toPixels('y');
|
|
var rx = this.attribute('rx').toPixels('x');
|
|
var ry = this.attribute('ry').toPixels('y');
|
|
if (this.attribute('rx').hasValue() && !this.attribute('ry').hasValue()) ry = rx;
|
|
if (this.attribute('ry').hasValue() && !this.attribute('rx').hasValue()) rx = ry;
|
|
rx = Math.min(rx, width / 2.0);
|
|
ry = Math.min(ry, height / 2.0);
|
|
if (ctx != null) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(x + rx, y);
|
|
ctx.lineTo(x + width - rx, y);
|
|
ctx.quadraticCurveTo(x + width, y, x + width, y + ry);
|
|
ctx.lineTo(x + width, y + height - ry);
|
|
ctx.quadraticCurveTo(x + width, y + height, x + width - rx, y + height);
|
|
ctx.lineTo(x + rx, y + height);
|
|
ctx.quadraticCurveTo(x, y + height, x, y + height - ry);
|
|
ctx.lineTo(x, y + ry);
|
|
ctx.quadraticCurveTo(x, y, x + rx, y);
|
|
ctx.closePath();
|
|
}
|
|
|
|
return new svg.BoundingBox(x, y, x + width, y + height);
|
|
};
|
|
return _this8;
|
|
}
|
|
|
|
return _class8;
|
|
}(svg.Element.PathElementBase);
|
|
|
|
// circle element
|
|
svg.Element.circle = function (_svg$Element$PathElem2) {
|
|
inherits(_class9, _svg$Element$PathElem2);
|
|
|
|
function _class9(node) {
|
|
classCallCheck(this, _class9);
|
|
|
|
var _this9 = possibleConstructorReturn(this, (_class9.__proto__ || Object.getPrototypeOf(_class9)).call(this, node));
|
|
|
|
_this9.path = function (ctx) {
|
|
var cx = this.attribute('cx').toPixels('x');
|
|
var cy = this.attribute('cy').toPixels('y');
|
|
var r = this.attribute('r').toPixels();
|
|
|
|
if (ctx != null) {
|
|
ctx.beginPath();
|
|
ctx.arc(cx, cy, r, 0, Math.PI * 2, true);
|
|
ctx.closePath();
|
|
}
|
|
|
|
return new svg.BoundingBox(cx - r, cy - r, cx + r, cy + r);
|
|
};
|
|
return _this9;
|
|
}
|
|
|
|
return _class9;
|
|
}(svg.Element.PathElementBase);
|
|
|
|
// ellipse element
|
|
svg.Element.ellipse = function (_svg$Element$PathElem3) {
|
|
inherits(_class10, _svg$Element$PathElem3);
|
|
|
|
function _class10(node) {
|
|
classCallCheck(this, _class10);
|
|
|
|
var _this10 = possibleConstructorReturn(this, (_class10.__proto__ || Object.getPrototypeOf(_class10)).call(this, node));
|
|
|
|
_this10.path = function (ctx) {
|
|
var KAPPA = 4 * ((Math.sqrt(2) - 1) / 3);
|
|
var rx = this.attribute('rx').toPixels('x');
|
|
var ry = this.attribute('ry').toPixels('y');
|
|
var cx = this.attribute('cx').toPixels('x');
|
|
var cy = this.attribute('cy').toPixels('y');
|
|
|
|
if (ctx != null) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(cx, cy - ry);
|
|
ctx.bezierCurveTo(cx + KAPPA * rx, cy - ry, cx + rx, cy - KAPPA * ry, cx + rx, cy);
|
|
ctx.bezierCurveTo(cx + rx, cy + KAPPA * ry, cx + KAPPA * rx, cy + ry, cx, cy + ry);
|
|
ctx.bezierCurveTo(cx - KAPPA * rx, cy + ry, cx - rx, cy + KAPPA * ry, cx - rx, cy);
|
|
ctx.bezierCurveTo(cx - rx, cy - KAPPA * ry, cx - KAPPA * rx, cy - ry, cx, cy - ry);
|
|
ctx.closePath();
|
|
}
|
|
|
|
return new svg.BoundingBox(cx - rx, cy - ry, cx + rx, cy + ry);
|
|
};
|
|
return _this10;
|
|
}
|
|
|
|
return _class10;
|
|
}(svg.Element.PathElementBase);
|
|
|
|
// line element
|
|
svg.Element.line = function (_svg$Element$PathElem4) {
|
|
inherits(_class11, _svg$Element$PathElem4);
|
|
|
|
function _class11(node) {
|
|
classCallCheck(this, _class11);
|
|
|
|
var _this11 = possibleConstructorReturn(this, (_class11.__proto__ || Object.getPrototypeOf(_class11)).call(this, node));
|
|
|
|
_this11.getPoints = function () {
|
|
return [new svg.Point(this.attribute('x1').toPixels('x'), this.attribute('y1').toPixels('y')), new svg.Point(this.attribute('x2').toPixels('x'), this.attribute('y2').toPixels('y'))];
|
|
};
|
|
|
|
_this11.path = function (ctx) {
|
|
var points = this.getPoints();
|
|
|
|
if (ctx != null) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(points[0].x, points[0].y);
|
|
ctx.lineTo(points[1].x, points[1].y);
|
|
}
|
|
|
|
return new svg.BoundingBox(points[0].x, points[0].y, points[1].x, points[1].y);
|
|
};
|
|
|
|
_this11.getMarkers = function () {
|
|
var points = this.getPoints();
|
|
var a = points[0].angleTo(points[1]);
|
|
return [[points[0], a], [points[1], a]];
|
|
};
|
|
return _this11;
|
|
}
|
|
|
|
return _class11;
|
|
}(svg.Element.PathElementBase);
|
|
|
|
// polyline element
|
|
svg.Element.polyline = function (_svg$Element$PathElem5) {
|
|
inherits(_class12, _svg$Element$PathElem5);
|
|
|
|
function _class12(node) {
|
|
classCallCheck(this, _class12);
|
|
|
|
var _this12 = possibleConstructorReturn(this, (_class12.__proto__ || Object.getPrototypeOf(_class12)).call(this, node));
|
|
|
|
_this12.points = svg.CreatePath(_this12.attribute('points').value);
|
|
_this12.path = function (ctx) {
|
|
var bb = new svg.BoundingBox(this.points[0].x, this.points[0].y);
|
|
if (ctx != null) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(this.points[0].x, this.points[0].y);
|
|
}
|
|
for (var i = 1; i < this.points.length; i++) {
|
|
bb.addPoint(this.points[i].x, this.points[i].y);
|
|
if (ctx != null) ctx.lineTo(this.points[i].x, this.points[i].y);
|
|
}
|
|
return bb;
|
|
};
|
|
|
|
_this12.getMarkers = function () {
|
|
var markers = [];
|
|
for (var i = 0; i < this.points.length - 1; i++) {
|
|
markers.push([this.points[i], this.points[i].angleTo(this.points[i + 1])]);
|
|
}
|
|
markers.push([this.points[this.points.length - 1], markers[markers.length - 1][1]]);
|
|
return markers;
|
|
};
|
|
return _this12;
|
|
}
|
|
|
|
return _class12;
|
|
}(svg.Element.PathElementBase);
|
|
|
|
// polygon element
|
|
svg.Element.polygon = function (_svg$Element$polyline) {
|
|
inherits(_class13, _svg$Element$polyline);
|
|
|
|
function _class13(node) {
|
|
classCallCheck(this, _class13);
|
|
|
|
var _this13 = possibleConstructorReturn(this, (_class13.__proto__ || Object.getPrototypeOf(_class13)).call(this, node));
|
|
|
|
_this13.basePath = _this13.path;
|
|
_this13.path = function (ctx) {
|
|
var bb = this.basePath(ctx);
|
|
if (ctx != null) {
|
|
ctx.lineTo(this.points[0].x, this.points[0].y);
|
|
ctx.closePath();
|
|
}
|
|
return bb;
|
|
};
|
|
return _this13;
|
|
}
|
|
|
|
return _class13;
|
|
}(svg.Element.polyline);
|
|
|
|
// path element
|
|
svg.Element.path = function (_svg$Element$PathElem6) {
|
|
inherits(_class14, _svg$Element$PathElem6);
|
|
|
|
function _class14(node) {
|
|
classCallCheck(this, _class14);
|
|
|
|
var _this14 = possibleConstructorReturn(this, (_class14.__proto__ || Object.getPrototypeOf(_class14)).call(this, node));
|
|
|
|
var d = _this14.attribute('d').value;
|
|
// TODO: convert to real lexer based on https://www.w3.org/TR/SVG11/paths.html#PathDataBNF
|
|
d = d.replace(/,/gm, ' '); // get rid of all commas
|
|
d = d.replace(/([MmZzLlHhVvCcSsQqTtAa])([MmZzLlHhVvCcSsQqTtAa])/gm, '$1 $2'); // separate commands from commands
|
|
d = d.replace(/([MmZzLlHhVvCcSsQqTtAa])([MmZzLlHhVvCcSsQqTtAa])/gm, '$1 $2'); // separate commands from commands
|
|
d = d.replace(/([MmZzLlHhVvCcSsQqTtAa])([^\s])/gm, '$1 $2'); // separate commands from points
|
|
d = d.replace(/([^\s])([MmZzLlHhVvCcSsQqTtAa])/gm, '$1 $2'); // separate commands from points
|
|
d = d.replace(/([0-9])([+-])/gm, '$1 $2'); // separate digits when no comma
|
|
d = d.replace(/(\.[0-9]*)(\.)/gm, '$1 $2'); // separate digits when no comma
|
|
d = d.replace(/([Aa](\s+[0-9]+){3})\s+([01])\s*([01])/gm, '$1 $3 $4 '); // shorthand elliptical arc path syntax
|
|
d = svg.compressSpaces(d); // compress multiple spaces
|
|
d = svg.trim(d);
|
|
_this14.PathParser = new function (d) {
|
|
this.tokens = d.split(' ');
|
|
|
|
this.reset = function () {
|
|
this.i = -1;
|
|
this.command = '';
|
|
this.previousCommand = '';
|
|
this.start = new svg.Point(0, 0);
|
|
this.control = new svg.Point(0, 0);
|
|
this.current = new svg.Point(0, 0);
|
|
this.points = [];
|
|
this.angles = [];
|
|
};
|
|
|
|
this.isEnd = function () {
|
|
return this.i >= this.tokens.length - 1;
|
|
};
|
|
|
|
this.isCommandOrEnd = function () {
|
|
if (this.isEnd()) return true;
|
|
return this.tokens[this.i + 1].match(/^[A-Za-z]$/) != null;
|
|
};
|
|
|
|
this.isRelativeCommand = function () {
|
|
switch (this.command) {
|
|
case 'm':
|
|
case 'l':
|
|
case 'h':
|
|
case 'v':
|
|
case 'c':
|
|
case 's':
|
|
case 'q':
|
|
case 't':
|
|
case 'a':
|
|
case 'z':
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
this.getToken = function () {
|
|
this.i++;
|
|
return this.tokens[this.i];
|
|
};
|
|
|
|
this.getScalar = function () {
|
|
return parseFloat(this.getToken());
|
|
};
|
|
|
|
this.nextCommand = function () {
|
|
this.previousCommand = this.command;
|
|
this.command = this.getToken();
|
|
};
|
|
|
|
this.getPoint = function () {
|
|
var p = new svg.Point(this.getScalar(), this.getScalar());
|
|
return this.makeAbsolute(p);
|
|
};
|
|
|
|
this.getAsControlPoint = function () {
|
|
var p = this.getPoint();
|
|
this.control = p;
|
|
return p;
|
|
};
|
|
|
|
this.getAsCurrentPoint = function () {
|
|
var p = this.getPoint();
|
|
this.current = p;
|
|
return p;
|
|
};
|
|
|
|
this.getReflectedControlPoint = function () {
|
|
if (this.previousCommand.toLowerCase() !== 'c' && this.previousCommand.toLowerCase() !== 's' && this.previousCommand.toLowerCase() !== 'q' && this.previousCommand.toLowerCase() !== 't') {
|
|
return this.current;
|
|
}
|
|
|
|
// reflect point
|
|
var p = new svg.Point(2 * this.current.x - this.control.x, 2 * this.current.y - this.control.y);
|
|
return p;
|
|
};
|
|
|
|
this.makeAbsolute = function (p) {
|
|
if (this.isRelativeCommand()) {
|
|
p.x += this.current.x;
|
|
p.y += this.current.y;
|
|
}
|
|
return p;
|
|
};
|
|
|
|
this.addMarker = function (p, from, priorTo) {
|
|
// if the last angle isn't filled in because we didn't have this point yet ...
|
|
if (priorTo != null && this.angles.length > 0 && this.angles[this.angles.length - 1] == null) {
|
|
this.angles[this.angles.length - 1] = this.points[this.points.length - 1].angleTo(priorTo);
|
|
}
|
|
this.addMarkerAngle(p, from == null ? null : from.angleTo(p));
|
|
};
|
|
|
|
this.addMarkerAngle = function (p, a) {
|
|
this.points.push(p);
|
|
this.angles.push(a);
|
|
};
|
|
|
|
this.getMarkerPoints = function () {
|
|
return this.points;
|
|
};
|
|
this.getMarkerAngles = function () {
|
|
for (var i = 0; i < this.angles.length; i++) {
|
|
if (this.angles[i] == null) {
|
|
for (var j = i + 1; j < this.angles.length; j++) {
|
|
if (this.angles[j] != null) {
|
|
this.angles[i] = this.angles[j];
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return this.angles;
|
|
};
|
|
}(d);
|
|
|
|
_this14.path = function (ctx) {
|
|
var pp = this.PathParser;
|
|
pp.reset();
|
|
|
|
var bb = new svg.BoundingBox();
|
|
if (ctx != null) ctx.beginPath();
|
|
while (!pp.isEnd()) {
|
|
pp.nextCommand();
|
|
switch (pp.command) {
|
|
case 'M':
|
|
case 'm':
|
|
var p = pp.getAsCurrentPoint();
|
|
pp.addMarker(p);
|
|
bb.addPoint(p.x, p.y);
|
|
if (ctx != null) ctx.moveTo(p.x, p.y);
|
|
pp.start = pp.current;
|
|
while (!pp.isCommandOrEnd()) {
|
|
var _p = pp.getAsCurrentPoint();
|
|
pp.addMarker(_p, pp.start);
|
|
bb.addPoint(_p.x, _p.y);
|
|
if (ctx != null) ctx.lineTo(_p.x, _p.y);
|
|
}
|
|
break;
|
|
case 'L':
|
|
case 'l':
|
|
while (!pp.isCommandOrEnd()) {
|
|
var _c = pp.current;
|
|
var _p2 = pp.getAsCurrentPoint();
|
|
pp.addMarker(_p2, _c);
|
|
bb.addPoint(_p2.x, _p2.y);
|
|
if (ctx != null) ctx.lineTo(_p2.x, _p2.y);
|
|
}
|
|
break;
|
|
case 'H':
|
|
case 'h':
|
|
while (!pp.isCommandOrEnd()) {
|
|
var newP = new svg.Point((pp.isRelativeCommand() ? pp.current.x : 0) + pp.getScalar(), pp.current.y);
|
|
pp.addMarker(newP, pp.current);
|
|
pp.current = newP;
|
|
bb.addPoint(pp.current.x, pp.current.y);
|
|
if (ctx != null) ctx.lineTo(pp.current.x, pp.current.y);
|
|
}
|
|
break;
|
|
case 'V':
|
|
case 'v':
|
|
while (!pp.isCommandOrEnd()) {
|
|
var _newP = new svg.Point(pp.current.x, (pp.isRelativeCommand() ? pp.current.y : 0) + pp.getScalar());
|
|
pp.addMarker(_newP, pp.current);
|
|
pp.current = _newP;
|
|
bb.addPoint(pp.current.x, pp.current.y);
|
|
if (ctx != null) ctx.lineTo(pp.current.x, pp.current.y);
|
|
}
|
|
break;
|
|
case 'C':
|
|
case 'c':
|
|
while (!pp.isCommandOrEnd()) {
|
|
var curr = pp.current;
|
|
var p1 = pp.getPoint();
|
|
var cntrl = pp.getAsControlPoint();
|
|
var cp = pp.getAsCurrentPoint();
|
|
pp.addMarker(cp, cntrl, p1);
|
|
bb.addBezierCurve(curr.x, curr.y, p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
|
|
if (ctx != null) ctx.bezierCurveTo(p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
|
|
}
|
|
break;
|
|
case 'S':
|
|
case 's':
|
|
while (!pp.isCommandOrEnd()) {
|
|
var _curr = pp.current;
|
|
var _p3 = pp.getReflectedControlPoint();
|
|
var _cntrl = pp.getAsControlPoint();
|
|
var _cp = pp.getAsCurrentPoint();
|
|
pp.addMarker(_cp, _cntrl, _p3);
|
|
bb.addBezierCurve(_curr.x, _curr.y, _p3.x, _p3.y, _cntrl.x, _cntrl.y, _cp.x, _cp.y);
|
|
if (ctx != null) ctx.bezierCurveTo(_p3.x, _p3.y, _cntrl.x, _cntrl.y, _cp.x, _cp.y);
|
|
}
|
|
break;
|
|
case 'Q':
|
|
case 'q':
|
|
while (!pp.isCommandOrEnd()) {
|
|
var _curr2 = pp.current;
|
|
var _cntrl2 = pp.getAsControlPoint();
|
|
var _cp2 = pp.getAsCurrentPoint();
|
|
pp.addMarker(_cp2, _cntrl2, _cntrl2);
|
|
bb.addQuadraticCurve(_curr2.x, _curr2.y, _cntrl2.x, _cntrl2.y, _cp2.x, _cp2.y);
|
|
if (ctx != null) ctx.quadraticCurveTo(_cntrl2.x, _cntrl2.y, _cp2.x, _cp2.y);
|
|
}
|
|
break;
|
|
case 'T':
|
|
case 't':
|
|
while (!pp.isCommandOrEnd()) {
|
|
var _curr3 = pp.current;
|
|
var _cntrl3 = pp.getReflectedControlPoint();
|
|
pp.control = _cntrl3;
|
|
var _cp3 = pp.getAsCurrentPoint();
|
|
pp.addMarker(_cp3, _cntrl3, _cntrl3);
|
|
bb.addQuadraticCurve(_curr3.x, _curr3.y, _cntrl3.x, _cntrl3.y, _cp3.x, _cp3.y);
|
|
if (ctx != null) ctx.quadraticCurveTo(_cntrl3.x, _cntrl3.y, _cp3.x, _cp3.y);
|
|
}
|
|
break;
|
|
case 'A':
|
|
case 'a':
|
|
var _loop2 = function _loop2() {
|
|
var curr = pp.current;
|
|
var rx = pp.getScalar();
|
|
var ry = pp.getScalar();
|
|
var xAxisRotation = pp.getScalar() * (Math.PI / 180.0);
|
|
var largeArcFlag = pp.getScalar();
|
|
var sweepFlag = pp.getScalar();
|
|
var cp = pp.getAsCurrentPoint();
|
|
|
|
// Conversion from endpoint to center parameterization
|
|
// https://www.w3.org/TR/SVG11/implnote.html#ArcConversionEndpointToCenter
|
|
|
|
// x1', y1'
|
|
var currp = new svg.Point(Math.cos(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.sin(xAxisRotation) * (curr.y - cp.y) / 2.0, -Math.sin(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.cos(xAxisRotation) * (curr.y - cp.y) / 2.0);
|
|
// adjust radii
|
|
var l = Math.pow(currp.x, 2) / Math.pow(rx, 2) + Math.pow(currp.y, 2) / Math.pow(ry, 2);
|
|
if (l > 1) {
|
|
rx *= Math.sqrt(l);
|
|
ry *= Math.sqrt(l);
|
|
}
|
|
// cx', cy'
|
|
var s = (largeArcFlag === sweepFlag ? -1 : 1) * Math.sqrt((Math.pow(rx, 2) * Math.pow(ry, 2) - Math.pow(rx, 2) * Math.pow(currp.y, 2) - Math.pow(ry, 2) * Math.pow(currp.x, 2)) / (Math.pow(rx, 2) * Math.pow(currp.y, 2) + Math.pow(ry, 2) * Math.pow(currp.x, 2)));
|
|
if (isNaN(s)) s = 0;
|
|
var cpp = new svg.Point(s * rx * currp.y / ry, s * -ry * currp.x / rx);
|
|
// cx, cy
|
|
var centp = new svg.Point((curr.x + cp.x) / 2.0 + Math.cos(xAxisRotation) * cpp.x - Math.sin(xAxisRotation) * cpp.y, (curr.y + cp.y) / 2.0 + Math.sin(xAxisRotation) * cpp.x + Math.cos(xAxisRotation) * cpp.y);
|
|
// vector magnitude
|
|
var m = function m(v) {
|
|
return Math.sqrt(Math.pow(v[0], 2) + Math.pow(v[1], 2));
|
|
};
|
|
// ratio between two vectors
|
|
var r = function r(u, v) {
|
|
return (u[0] * v[0] + u[1] * v[1]) / (m(u) * m(v));
|
|
};
|
|
// angle between two vectors
|
|
var a = function a(u, v) {
|
|
return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(r(u, v));
|
|
};
|
|
// initial angle
|
|
var a1 = a([1, 0], [(currp.x - cpp.x) / rx, (currp.y - cpp.y) / ry]);
|
|
// angle delta
|
|
var u = [(currp.x - cpp.x) / rx, (currp.y - cpp.y) / ry];
|
|
var v = [(-currp.x - cpp.x) / rx, (-currp.y - cpp.y) / ry];
|
|
var ad = a(u, v);
|
|
if (r(u, v) <= -1) ad = Math.PI;
|
|
if (r(u, v) >= 1) ad = 0;
|
|
|
|
// for markers
|
|
var dir = 1 - sweepFlag ? 1.0 : -1.0;
|
|
var ah = a1 + dir * (ad / 2.0);
|
|
var halfWay = new svg.Point(centp.x + rx * Math.cos(ah), centp.y + ry * Math.sin(ah));
|
|
pp.addMarkerAngle(halfWay, ah - dir * Math.PI / 2);
|
|
pp.addMarkerAngle(cp, ah - dir * Math.PI);
|
|
|
|
bb.addPoint(cp.x, cp.y); // TODO: this is too naive, make it better
|
|
if (ctx != null) {
|
|
var _r = rx > ry ? rx : ry;
|
|
var sx = rx > ry ? 1 : rx / ry;
|
|
var sy = rx > ry ? ry / rx : 1;
|
|
|
|
ctx.translate(centp.x, centp.y);
|
|
ctx.rotate(xAxisRotation);
|
|
ctx.scale(sx, sy);
|
|
ctx.arc(0, 0, _r, a1, a1 + ad, 1 - sweepFlag);
|
|
ctx.scale(1 / sx, 1 / sy);
|
|
ctx.rotate(-xAxisRotation);
|
|
ctx.translate(-centp.x, -centp.y);
|
|
}
|
|
};
|
|
|
|
while (!pp.isCommandOrEnd()) {
|
|
_loop2();
|
|
}
|
|
break;
|
|
case 'Z':
|
|
case 'z':
|
|
if (ctx != null) ctx.closePath();
|
|
pp.current = pp.start;
|
|
}
|
|
}
|
|
|
|
return bb;
|
|
};
|
|
|
|
_this14.getMarkers = function () {
|
|
var points = this.PathParser.getMarkerPoints();
|
|
var angles = this.PathParser.getMarkerAngles();
|
|
|
|
var markers = [];
|
|
for (var i = 0; i < points.length; i++) {
|
|
markers.push([points[i], angles[i]]);
|
|
}
|
|
return markers;
|
|
};
|
|
return _this14;
|
|
}
|
|
|
|
return _class14;
|
|
}(svg.Element.PathElementBase);
|
|
|
|
// pattern element
|
|
svg.Element.pattern = function (_svg$Element$ElementB2) {
|
|
inherits(_class15, _svg$Element$ElementB2);
|
|
|
|
function _class15(node) {
|
|
classCallCheck(this, _class15);
|
|
|
|
var _this15 = possibleConstructorReturn(this, (_class15.__proto__ || Object.getPrototypeOf(_class15)).call(this, node));
|
|
|
|
_this15.createPattern = function (ctx, element) {
|
|
var width = this.attribute('width').toPixels('x', true);
|
|
var height = this.attribute('height').toPixels('y', true);
|
|
|
|
// render me using a temporary svg element
|
|
var tempSvg = new svg.Element.svg();
|
|
tempSvg.attributes['viewBox'] = new svg.Property('viewBox', this.attribute('viewBox').value);
|
|
tempSvg.attributes['width'] = new svg.Property('width', width + 'px');
|
|
tempSvg.attributes['height'] = new svg.Property('height', height + 'px');
|
|
tempSvg.attributes['transform'] = new svg.Property('transform', this.attribute('patternTransform').value);
|
|
tempSvg.children = this.children;
|
|
|
|
var c = document.createElement('canvas');
|
|
c.width = width;
|
|
c.height = height;
|
|
var cctx = c.getContext('2d');
|
|
if (this.attribute('x').hasValue() && this.attribute('y').hasValue()) {
|
|
cctx.translate(this.attribute('x').toPixels('x', true), this.attribute('y').toPixels('y', true));
|
|
}
|
|
// render 3x3 grid so when we transform there's no white space on edges
|
|
for (var x = -1; x <= 1; x++) {
|
|
for (var y = -1; y <= 1; y++) {
|
|
cctx.save();
|
|
cctx.translate(x * c.width, y * c.height);
|
|
tempSvg.render(cctx);
|
|
cctx.restore();
|
|
}
|
|
}
|
|
var pattern = ctx.createPattern(c, 'repeat');
|
|
return pattern;
|
|
};
|
|
return _this15;
|
|
}
|
|
|
|
return _class15;
|
|
}(svg.Element.ElementBase);
|
|
|
|
// marker element
|
|
svg.Element.marker = function (_svg$Element$ElementB3) {
|
|
inherits(_class16, _svg$Element$ElementB3);
|
|
|
|
function _class16(node) {
|
|
classCallCheck(this, _class16);
|
|
|
|
var _this16 = possibleConstructorReturn(this, (_class16.__proto__ || Object.getPrototypeOf(_class16)).call(this, node));
|
|
|
|
_this16.baseRender = _this16.render;
|
|
_this16.render = function (ctx, point, angle) {
|
|
ctx.translate(point.x, point.y);
|
|
if (this.attribute('orient').valueOrDefault('auto') === 'auto') ctx.rotate(angle);
|
|
if (this.attribute('markerUnits').valueOrDefault('strokeWidth') === 'strokeWidth') ctx.scale(ctx.lineWidth, ctx.lineWidth);
|
|
ctx.save();
|
|
|
|
// render me using a temporary svg element
|
|
var tempSvg = new svg.Element.svg();
|
|
tempSvg.attributes['viewBox'] = new svg.Property('viewBox', this.attribute('viewBox').value);
|
|
tempSvg.attributes['refX'] = new svg.Property('refX', this.attribute('refX').value);
|
|
tempSvg.attributes['refY'] = new svg.Property('refY', this.attribute('refY').value);
|
|
tempSvg.attributes['width'] = new svg.Property('width', this.attribute('markerWidth').value);
|
|
tempSvg.attributes['height'] = new svg.Property('height', this.attribute('markerHeight').value);
|
|
tempSvg.attributes['fill'] = new svg.Property('fill', this.attribute('fill').valueOrDefault('black'));
|
|
tempSvg.attributes['stroke'] = new svg.Property('stroke', this.attribute('stroke').valueOrDefault('none'));
|
|
tempSvg.children = this.children;
|
|
tempSvg.render(ctx);
|
|
|
|
ctx.restore();
|
|
if (this.attribute('markerUnits').valueOrDefault('strokeWidth') === 'strokeWidth') ctx.scale(1 / ctx.lineWidth, 1 / ctx.lineWidth);
|
|
if (this.attribute('orient').valueOrDefault('auto') === 'auto') ctx.rotate(-angle);
|
|
ctx.translate(-point.x, -point.y);
|
|
};
|
|
return _this16;
|
|
}
|
|
|
|
return _class16;
|
|
}(svg.Element.ElementBase);
|
|
|
|
// definitions element
|
|
svg.Element.defs = function (_svg$Element$ElementB4) {
|
|
inherits(_class17, _svg$Element$ElementB4);
|
|
|
|
function _class17(node) {
|
|
classCallCheck(this, _class17);
|
|
|
|
var _this17 = possibleConstructorReturn(this, (_class17.__proto__ || Object.getPrototypeOf(_class17)).call(this, node));
|
|
|
|
_this17.render = function (ctx) {
|
|
// NOOP
|
|
};
|
|
return _this17;
|
|
}
|
|
|
|
return _class17;
|
|
}(svg.Element.ElementBase);
|
|
|
|
// base for gradients
|
|
svg.Element.GradientBase = function (_svg$Element$ElementB5) {
|
|
inherits(_class18, _svg$Element$ElementB5);
|
|
|
|
function _class18(node) {
|
|
classCallCheck(this, _class18);
|
|
|
|
var _this18 = possibleConstructorReturn(this, (_class18.__proto__ || Object.getPrototypeOf(_class18)).call(this, node));
|
|
|
|
_this18.gradientUnits = _this18.attribute('gradientUnits').valueOrDefault('objectBoundingBox');
|
|
|
|
_this18.stops = [];
|
|
for (var i = 0; i < _this18.children.length; i++) {
|
|
var child = _this18.children[i];
|
|
if (child.type === 'stop') _this18.stops.push(child);
|
|
}
|
|
|
|
_this18.getGradient = function () {
|
|
// OVERRIDE ME!
|
|
};
|
|
|
|
_this18.createGradient = function (ctx, element, parentOpacityProp) {
|
|
var stopsContainer = this.getHrefAttribute().hasValue() ? this.getHrefAttribute().getDefinition() : this;
|
|
|
|
var addParentOpacity = function addParentOpacity(color) {
|
|
if (parentOpacityProp.hasValue()) {
|
|
var p = new svg.Property('color', color);
|
|
return p.addOpacity(parentOpacityProp).value;
|
|
}
|
|
return color;
|
|
};
|
|
|
|
var g = this.getGradient(ctx, element);
|
|
if (g == null) return addParentOpacity(stopsContainer.stops[stopsContainer.stops.length - 1].color);
|
|
for (var _i3 = 0; _i3 < stopsContainer.stops.length; _i3++) {
|
|
g.addColorStop(stopsContainer.stops[_i3].offset, addParentOpacity(stopsContainer.stops[_i3].color));
|
|
}
|
|
|
|
if (this.attribute('gradientTransform').hasValue()) {
|
|
// render as transformed pattern on temporary canvas
|
|
var rootView = svg.ViewPort.viewPorts[0];
|
|
|
|
var rect = new svg.Element.rect();
|
|
rect.attributes['x'] = new svg.Property('x', -svg.MAX_VIRTUAL_PIXELS / 3.0);
|
|
rect.attributes['y'] = new svg.Property('y', -svg.MAX_VIRTUAL_PIXELS / 3.0);
|
|
rect.attributes['width'] = new svg.Property('width', svg.MAX_VIRTUAL_PIXELS);
|
|
rect.attributes['height'] = new svg.Property('height', svg.MAX_VIRTUAL_PIXELS);
|
|
|
|
var group = new svg.Element.g();
|
|
group.attributes['transform'] = new svg.Property('transform', this.attribute('gradientTransform').value);
|
|
group.children = [rect];
|
|
|
|
var tempSvg = new svg.Element.svg();
|
|
tempSvg.attributes['x'] = new svg.Property('x', 0);
|
|
tempSvg.attributes['y'] = new svg.Property('y', 0);
|
|
tempSvg.attributes['width'] = new svg.Property('width', rootView.width);
|
|
tempSvg.attributes['height'] = new svg.Property('height', rootView.height);
|
|
tempSvg.children = [group];
|
|
|
|
var _c2 = document.createElement('canvas');
|
|
_c2.width = rootView.width;
|
|
_c2.height = rootView.height;
|
|
var tempCtx = _c2.getContext('2d');
|
|
tempCtx.fillStyle = g;
|
|
tempSvg.render(tempCtx);
|
|
return tempCtx.createPattern(_c2, 'no-repeat');
|
|
}
|
|
|
|
return g;
|
|
};
|
|
return _this18;
|
|
}
|
|
|
|
return _class18;
|
|
}(svg.Element.ElementBase);
|
|
|
|
// linear gradient element
|
|
svg.Element.linearGradient = function (_svg$Element$Gradient) {
|
|
inherits(_class19, _svg$Element$Gradient);
|
|
|
|
function _class19(node) {
|
|
classCallCheck(this, _class19);
|
|
|
|
var _this19 = possibleConstructorReturn(this, (_class19.__proto__ || Object.getPrototypeOf(_class19)).call(this, node));
|
|
|
|
_this19.getGradient = function (ctx, element) {
|
|
var bb = this.gradientUnits === 'objectBoundingBox' ? element.getBoundingBox() : null;
|
|
|
|
if (!this.attribute('x1').hasValue() && !this.attribute('y1').hasValue() && !this.attribute('x2').hasValue() && !this.attribute('y2').hasValue()) {
|
|
this.attribute('x1', true).value = 0;
|
|
this.attribute('y1', true).value = 0;
|
|
this.attribute('x2', true).value = 1;
|
|
this.attribute('y2', true).value = 0;
|
|
}
|
|
|
|
var x1 = this.gradientUnits === 'objectBoundingBox' ? bb.x() + bb.width() * this.attribute('x1').numValue() : this.attribute('x1').toPixels('x');
|
|
var y1 = this.gradientUnits === 'objectBoundingBox' ? bb.y() + bb.height() * this.attribute('y1').numValue() : this.attribute('y1').toPixels('y');
|
|
var x2 = this.gradientUnits === 'objectBoundingBox' ? bb.x() + bb.width() * this.attribute('x2').numValue() : this.attribute('x2').toPixels('x');
|
|
var y2 = this.gradientUnits === 'objectBoundingBox' ? bb.y() + bb.height() * this.attribute('y2').numValue() : this.attribute('y2').toPixels('y');
|
|
|
|
if (x1 === x2 && y1 === y2) return null;
|
|
return ctx.createLinearGradient(x1, y1, x2, y2);
|
|
};
|
|
return _this19;
|
|
}
|
|
|
|
return _class19;
|
|
}(svg.Element.GradientBase);
|
|
|
|
// radial gradient element
|
|
svg.Element.radialGradient = function (_svg$Element$Gradient2) {
|
|
inherits(_class20, _svg$Element$Gradient2);
|
|
|
|
function _class20(node) {
|
|
classCallCheck(this, _class20);
|
|
|
|
var _this20 = possibleConstructorReturn(this, (_class20.__proto__ || Object.getPrototypeOf(_class20)).call(this, node));
|
|
|
|
_this20.getGradient = function (ctx, element) {
|
|
var bb = element.getBoundingBox();
|
|
|
|
if (!this.attribute('cx').hasValue()) this.attribute('cx', true).value = '50%';
|
|
if (!this.attribute('cy').hasValue()) this.attribute('cy', true).value = '50%';
|
|
if (!this.attribute('r').hasValue()) this.attribute('r', true).value = '50%';
|
|
|
|
var cx = this.gradientUnits === 'objectBoundingBox' ? bb.x() + bb.width() * this.attribute('cx').numValue() : this.attribute('cx').toPixels('x');
|
|
var cy = this.gradientUnits === 'objectBoundingBox' ? bb.y() + bb.height() * this.attribute('cy').numValue() : this.attribute('cy').toPixels('y');
|
|
|
|
var fx = cx;
|
|
var fy = cy;
|
|
if (this.attribute('fx').hasValue()) {
|
|
fx = this.gradientUnits === 'objectBoundingBox' ? bb.x() + bb.width() * this.attribute('fx').numValue() : this.attribute('fx').toPixels('x');
|
|
}
|
|
if (this.attribute('fy').hasValue()) {
|
|
fy = this.gradientUnits === 'objectBoundingBox' ? bb.y() + bb.height() * this.attribute('fy').numValue() : this.attribute('fy').toPixels('y');
|
|
}
|
|
|
|
var r = this.gradientUnits === 'objectBoundingBox' ? (bb.width() + bb.height()) / 2.0 * this.attribute('r').numValue() : this.attribute('r').toPixels();
|
|
|
|
return ctx.createRadialGradient(fx, fy, 0, cx, cy, r);
|
|
};
|
|
return _this20;
|
|
}
|
|
|
|
return _class20;
|
|
}(svg.Element.GradientBase);
|
|
|
|
// gradient stop element
|
|
svg.Element.stop = function (_svg$Element$ElementB6) {
|
|
inherits(_class21, _svg$Element$ElementB6);
|
|
|
|
function _class21(node) {
|
|
classCallCheck(this, _class21);
|
|
|
|
var _this21 = possibleConstructorReturn(this, (_class21.__proto__ || Object.getPrototypeOf(_class21)).call(this, node));
|
|
|
|
_this21.offset = _this21.attribute('offset').numValue();
|
|
if (_this21.offset < 0) _this21.offset = 0;
|
|
if (_this21.offset > 1) _this21.offset = 1;
|
|
|
|
var stopColor = _this21.style('stop-color');
|
|
if (_this21.style('stop-opacity').hasValue()) {
|
|
stopColor = stopColor.addOpacity(_this21.style('stop-opacity'));
|
|
}
|
|
_this21.color = stopColor.value;
|
|
return _this21;
|
|
}
|
|
|
|
return _class21;
|
|
}(svg.Element.ElementBase);
|
|
|
|
// animation base element
|
|
svg.Element.AnimateBase = function (_svg$Element$ElementB7) {
|
|
inherits(_class22, _svg$Element$ElementB7);
|
|
|
|
function _class22(node) {
|
|
classCallCheck(this, _class22);
|
|
|
|
var _this22 = possibleConstructorReturn(this, (_class22.__proto__ || Object.getPrototypeOf(_class22)).call(this, node));
|
|
|
|
svg.Animations.push(_this22);
|
|
|
|
_this22.duration = 0.0;
|
|
_this22.begin = _this22.attribute('begin').toMilliseconds();
|
|
_this22.maxDuration = _this22.begin + _this22.attribute('dur').toMilliseconds();
|
|
|
|
_this22.getProperty = function () {
|
|
var attributeType = this.attribute('attributeType').value;
|
|
var attributeName = this.attribute('attributeName').value;
|
|
|
|
if (attributeType === 'CSS') {
|
|
return this.parent.style(attributeName, true);
|
|
}
|
|
return this.parent.attribute(attributeName, true);
|
|
};
|
|
|
|
_this22.initialValue = null;
|
|
_this22.initialUnits = '';
|
|
_this22.removed = false;
|
|
|
|
_this22.calcValue = function () {
|
|
// OVERRIDE ME!
|
|
return '';
|
|
};
|
|
|
|
_this22.update = function (delta) {
|
|
// set initial value
|
|
if (this.initialValue == null) {
|
|
this.initialValue = this.getProperty().value;
|
|
this.initialUnits = this.getProperty().getUnits();
|
|
}
|
|
|
|
// if we're past the end time
|
|
if (this.duration > this.maxDuration) {
|
|
// loop for indefinitely repeating animations
|
|
if (this.attribute('repeatCount').value === 'indefinite' || this.attribute('repeatDur').value === 'indefinite') {
|
|
this.duration = 0.0;
|
|
} else if (this.attribute('fill').valueOrDefault('remove') === 'freeze' && !this.frozen) {
|
|
this.frozen = true;
|
|
this.parent.animationFrozen = true;
|
|
this.parent.animationFrozenValue = this.getProperty().value;
|
|
} else if (this.attribute('fill').valueOrDefault('remove') === 'remove' && !this.removed) {
|
|
this.removed = true;
|
|
this.getProperty().value = this.parent.animationFrozen ? this.parent.animationFrozenValue : this.initialValue;
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
this.duration = this.duration + delta;
|
|
|
|
// if we're past the begin time
|
|
var updated = false;
|
|
if (this.begin < this.duration) {
|
|
var newValue = this.calcValue(); // tween
|
|
|
|
if (this.attribute('type').hasValue()) {
|
|
// for transform, etc.
|
|
var type = this.attribute('type').value;
|
|
newValue = type + '(' + newValue + ')';
|
|
}
|
|
|
|
this.getProperty().value = newValue;
|
|
updated = true;
|
|
}
|
|
|
|
return updated;
|
|
};
|
|
|
|
_this22.from = _this22.attribute('from');
|
|
_this22.to = _this22.attribute('to');
|
|
_this22.values = _this22.attribute('values');
|
|
if (_this22.values.hasValue()) _this22.values.value = _this22.values.value.split(';');
|
|
|
|
// fraction of duration we've covered
|
|
_this22.progress = function () {
|
|
var ret = { progress: (this.duration - this.begin) / (this.maxDuration - this.begin) };
|
|
if (this.values.hasValue()) {
|
|
var p = ret.progress * (this.values.value.length - 1);
|
|
var lb = Math.floor(p),
|
|
ub = Math.ceil(p);
|
|
ret.from = new svg.Property('from', parseFloat(this.values.value[lb]));
|
|
ret.to = new svg.Property('to', parseFloat(this.values.value[ub]));
|
|
ret.progress = (p - lb) / (ub - lb);
|
|
} else {
|
|
ret.from = this.from;
|
|
ret.to = this.to;
|
|
}
|
|
return ret;
|
|
};
|
|
return _this22;
|
|
}
|
|
|
|
return _class22;
|
|
}(svg.Element.ElementBase);
|
|
|
|
// animate element
|
|
svg.Element.animate = function (_svg$Element$AnimateB) {
|
|
inherits(_class23, _svg$Element$AnimateB);
|
|
|
|
function _class23(node) {
|
|
classCallCheck(this, _class23);
|
|
|
|
var _this23 = possibleConstructorReturn(this, (_class23.__proto__ || Object.getPrototypeOf(_class23)).call(this, node));
|
|
|
|
_this23.calcValue = function () {
|
|
var p = this.progress();
|
|
|
|
// tween value linearly
|
|
var newValue = p.from.numValue() + (p.to.numValue() - p.from.numValue()) * p.progress;
|
|
return newValue + this.initialUnits;
|
|
};
|
|
return _this23;
|
|
}
|
|
|
|
return _class23;
|
|
}(svg.Element.AnimateBase);
|
|
|
|
// animate color element
|
|
svg.Element.animateColor = function (_svg$Element$AnimateB2) {
|
|
inherits(_class24, _svg$Element$AnimateB2);
|
|
|
|
function _class24(node) {
|
|
classCallCheck(this, _class24);
|
|
|
|
var _this24 = possibleConstructorReturn(this, (_class24.__proto__ || Object.getPrototypeOf(_class24)).call(this, node));
|
|
|
|
_this24.calcValue = function () {
|
|
var p = this.progress();
|
|
var from = new RGBColor(p.from.value);
|
|
var to = new RGBColor(p.to.value);
|
|
|
|
if (from.ok && to.ok) {
|
|
// tween color linearly
|
|
var _r2 = from.r + (to.r - from.r) * p.progress;
|
|
var g = from.g + (to.g - from.g) * p.progress;
|
|
var _b = from.b + (to.b - from.b) * p.progress;
|
|
return 'rgb(' + parseInt(_r2, 10) + ',' + parseInt(g, 10) + ',' + parseInt(_b, 10) + ')';
|
|
}
|
|
return this.attribute('from').value;
|
|
};
|
|
return _this24;
|
|
}
|
|
|
|
return _class24;
|
|
}(svg.Element.AnimateBase);
|
|
|
|
// animate transform element
|
|
svg.Element.animateTransform = function (_svg$Element$animate) {
|
|
inherits(_class25, _svg$Element$animate);
|
|
|
|
function _class25(node) {
|
|
classCallCheck(this, _class25);
|
|
|
|
var _this25 = possibleConstructorReturn(this, (_class25.__proto__ || Object.getPrototypeOf(_class25)).call(this, node));
|
|
|
|
_this25.calcValue = function () {
|
|
var p = this.progress();
|
|
|
|
// tween value linearly
|
|
var from = svg.ToNumberArray(p.from.value);
|
|
var to = svg.ToNumberArray(p.to.value);
|
|
var newValue = '';
|
|
for (var i = 0; i < from.length; i++) {
|
|
newValue += from[i] + (to[i] - from[i]) * p.progress + ' ';
|
|
}
|
|
return newValue;
|
|
};
|
|
return _this25;
|
|
}
|
|
|
|
return _class25;
|
|
}(svg.Element.animate);
|
|
|
|
// font element
|
|
svg.Element.font = function (_svg$Element$ElementB8) {
|
|
inherits(_class26, _svg$Element$ElementB8);
|
|
|
|
function _class26(node) {
|
|
classCallCheck(this, _class26);
|
|
|
|
var _this26 = possibleConstructorReturn(this, (_class26.__proto__ || Object.getPrototypeOf(_class26)).call(this, node));
|
|
|
|
_this26.horizAdvX = _this26.attribute('horiz-adv-x').numValue();
|
|
|
|
_this26.isRTL = false;
|
|
_this26.isArabic = false;
|
|
_this26.fontFace = null;
|
|
_this26.missingGlyph = null;
|
|
_this26.glyphs = [];
|
|
for (var i = 0; i < _this26.children.length; i++) {
|
|
var child = _this26.children[i];
|
|
if (child.type === 'font-face') {
|
|
_this26.fontFace = child;
|
|
if (child.style('font-family').hasValue()) {
|
|
svg.Definitions[child.style('font-family').value] = _this26;
|
|
}
|
|
} else if (child.type === 'missing-glyph') {
|
|
_this26.missingGlyph = child;
|
|
} else if (child.type === 'glyph') {
|
|
if (child.arabicForm !== '') {
|
|
_this26.isRTL = true;
|
|
_this26.isArabic = true;
|
|
if (typeof _this26.glyphs[child.unicode] === 'undefined') {
|
|
_this26.glyphs[child.unicode] = [];
|
|
}
|
|
_this26.glyphs[child.unicode][child.arabicForm] = child;
|
|
} else {
|
|
_this26.glyphs[child.unicode] = child;
|
|
}
|
|
}
|
|
}
|
|
return _this26;
|
|
}
|
|
|
|
return _class26;
|
|
}(svg.Element.ElementBase);
|
|
|
|
// font-face element
|
|
svg.Element.fontface = function (_svg$Element$ElementB9) {
|
|
inherits(_class27, _svg$Element$ElementB9);
|
|
|
|
function _class27(node) {
|
|
classCallCheck(this, _class27);
|
|
|
|
var _this27 = possibleConstructorReturn(this, (_class27.__proto__ || Object.getPrototypeOf(_class27)).call(this, node));
|
|
|
|
_this27.ascent = _this27.attribute('ascent').value;
|
|
_this27.descent = _this27.attribute('descent').value;
|
|
_this27.unitsPerEm = _this27.attribute('units-per-em').numValue();
|
|
return _this27;
|
|
}
|
|
|
|
return _class27;
|
|
}(svg.Element.ElementBase);
|
|
|
|
// missing-glyph element
|
|
svg.Element.missingglyph = function (_svg$Element$path) {
|
|
inherits(_class28, _svg$Element$path);
|
|
|
|
function _class28(node) {
|
|
classCallCheck(this, _class28);
|
|
|
|
var _this28 = possibleConstructorReturn(this, (_class28.__proto__ || Object.getPrototypeOf(_class28)).call(this, node));
|
|
|
|
_this28.horizAdvX = 0;
|
|
return _this28;
|
|
}
|
|
|
|
return _class28;
|
|
}(svg.Element.path);
|
|
|
|
// glyph element
|
|
svg.Element.glyph = function (_svg$Element$path2) {
|
|
inherits(_class29, _svg$Element$path2);
|
|
|
|
function _class29(node) {
|
|
classCallCheck(this, _class29);
|
|
|
|
var _this29 = possibleConstructorReturn(this, (_class29.__proto__ || Object.getPrototypeOf(_class29)).call(this, node));
|
|
|
|
_this29.horizAdvX = _this29.attribute('horiz-adv-x').numValue();
|
|
_this29.unicode = _this29.attribute('unicode').value;
|
|
_this29.arabicForm = _this29.attribute('arabic-form').value;
|
|
return _this29;
|
|
}
|
|
|
|
return _class29;
|
|
}(svg.Element.path);
|
|
|
|
// text element
|
|
svg.Element.text = function (_svg$Element$Rendered3) {
|
|
inherits(_class30, _svg$Element$Rendered3);
|
|
|
|
function _class30(node) {
|
|
classCallCheck(this, _class30);
|
|
|
|
var _this30 = possibleConstructorReturn(this, (_class30.__proto__ || Object.getPrototypeOf(_class30)).call(this, node));
|
|
|
|
_this30.captureTextNodes = true;
|
|
|
|
_this30.baseSetContext = _this30.setContext;
|
|
_this30.setContext = function (ctx) {
|
|
this.baseSetContext(ctx);
|
|
|
|
var textBaseline = this.style('dominant-baseline').toTextBaseline();
|
|
if (textBaseline == null) textBaseline = this.style('alignment-baseline').toTextBaseline();
|
|
if (textBaseline != null) ctx.textBaseline = textBaseline;
|
|
};
|
|
|
|
_this30.getBoundingBox = function () {
|
|
var x = this.attribute('x').toPixels('x');
|
|
var y = this.attribute('y').toPixels('y');
|
|
var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize);
|
|
return new svg.BoundingBox(x, y - fontSize, x + Math.floor(fontSize * 2.0 / 3.0) * this.children[0].getText().length, y);
|
|
};
|
|
|
|
_this30.renderChildren = function (ctx) {
|
|
this.x = this.attribute('x').toPixels('x');
|
|
this.y = this.attribute('y').toPixels('y');
|
|
this.x += this.getAnchorDelta(ctx, this, 0);
|
|
for (var i = 0; i < this.children.length; i++) {
|
|
this.renderChild(ctx, this, i);
|
|
}
|
|
};
|
|
|
|
_this30.getAnchorDelta = function (ctx, parent, startI) {
|
|
var textAnchor = this.style('text-anchor').valueOrDefault('start');
|
|
if (textAnchor !== 'start') {
|
|
var width = 0;
|
|
for (var i = startI; i < parent.children.length; i++) {
|
|
var child = parent.children[i];
|
|
if (i > startI && child.attribute('x').hasValue()) break; // new group
|
|
width += child.measureTextRecursive(ctx);
|
|
}
|
|
return -1 * (textAnchor === 'end' ? width : width / 2.0);
|
|
}
|
|
return 0;
|
|
};
|
|
|
|
_this30.renderChild = function (ctx, parent, i) {
|
|
var child = parent.children[i];
|
|
if (child.attribute('x').hasValue()) {
|
|
child.x = child.attribute('x').toPixels('x') + this.getAnchorDelta(ctx, parent, i);
|
|
if (child.attribute('dx').hasValue()) child.x += child.attribute('dx').toPixels('x');
|
|
} else {
|
|
if (this.attribute('dx').hasValue()) this.x += this.attribute('dx').toPixels('x');
|
|
if (child.attribute('dx').hasValue()) this.x += child.attribute('dx').toPixels('x');
|
|
child.x = this.x;
|
|
}
|
|
this.x = child.x + child.measureText(ctx);
|
|
|
|
if (child.attribute('y').hasValue()) {
|
|
child.y = child.attribute('y').toPixels('y');
|
|
if (child.attribute('dy').hasValue()) child.y += child.attribute('dy').toPixels('y');
|
|
} else {
|
|
if (this.attribute('dy').hasValue()) this.y += this.attribute('dy').toPixels('y');
|
|
if (child.attribute('dy').hasValue()) this.y += child.attribute('dy').toPixels('y');
|
|
child.y = this.y;
|
|
}
|
|
this.y = child.y;
|
|
|
|
child.render(ctx);
|
|
|
|
for (var _i4 = 0; _i4 < child.children.length; _i4++) {
|
|
this.renderChild(ctx, child, _i4);
|
|
}
|
|
};
|
|
return _this30;
|
|
}
|
|
|
|
return _class30;
|
|
}(svg.Element.RenderedElementBase);
|
|
|
|
// text base
|
|
svg.Element.TextElementBase = function (_svg$Element$Rendered4) {
|
|
inherits(_class31, _svg$Element$Rendered4);
|
|
|
|
function _class31(node) {
|
|
classCallCheck(this, _class31);
|
|
|
|
var _this31 = possibleConstructorReturn(this, (_class31.__proto__ || Object.getPrototypeOf(_class31)).call(this, node));
|
|
|
|
_this31.getGlyph = function (font, text, i) {
|
|
var c = text[i];
|
|
var glyph = null;
|
|
if (font.isArabic) {
|
|
var arabicForm = 'isolated';
|
|
if ((i === 0 || text[i - 1] === ' ') && i < text.length - 2 && text[i + 1] !== ' ') arabicForm = 'terminal';
|
|
if (i > 0 && text[i - 1] !== ' ' && i < text.length - 2 && text[i + 1] !== ' ') arabicForm = 'medial';
|
|
if (i > 0 && text[i - 1] !== ' ' && (i === text.length - 1 || text[i + 1] === ' ')) arabicForm = 'initial';
|
|
if (typeof font.glyphs[c] !== 'undefined') {
|
|
glyph = font.glyphs[c][arabicForm];
|
|
if (glyph == null && font.glyphs[c].type === 'glyph') glyph = font.glyphs[c];
|
|
}
|
|
} else {
|
|
glyph = font.glyphs[c];
|
|
}
|
|
if (glyph == null) glyph = font.missingGlyph;
|
|
return glyph;
|
|
};
|
|
|
|
_this31.renderChildren = function (ctx) {
|
|
var customFont = this.parent.style('font-family').getDefinition();
|
|
if (customFont != null) {
|
|
var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize);
|
|
var fontStyle = this.parent.style('font-style').valueOrDefault(svg.Font.Parse(svg.ctx.font).fontStyle);
|
|
var text = this.getText();
|
|
if (customFont.isRTL) text = text.split('').reverse().join('');
|
|
|
|
var dx = svg.ToNumberArray(this.parent.attribute('dx').value);
|
|
for (var i = 0; i < text.length; i++) {
|
|
var glyph = this.getGlyph(customFont, text, i);
|
|
var scale = fontSize / customFont.fontFace.unitsPerEm;
|
|
ctx.translate(this.x, this.y);
|
|
ctx.scale(scale, -scale);
|
|
var lw = ctx.lineWidth;
|
|
ctx.lineWidth = ctx.lineWidth * customFont.fontFace.unitsPerEm / fontSize;
|
|
if (fontStyle === 'italic') ctx.transform(1, 0, 0.4, 1, 0, 0);
|
|
glyph.render(ctx);
|
|
if (fontStyle === 'italic') ctx.transform(1, 0, -0.4, 1, 0, 0);
|
|
ctx.lineWidth = lw;
|
|
ctx.scale(1 / scale, -1 / scale);
|
|
ctx.translate(-this.x, -this.y);
|
|
|
|
this.x += fontSize * (glyph.horizAdvX || customFont.horizAdvX) / customFont.fontFace.unitsPerEm;
|
|
if (typeof dx[i] !== 'undefined' && !isNaN(dx[i])) {
|
|
this.x += dx[i];
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (ctx.fillStyle !== '') ctx.fillText(svg.compressSpaces(this.getText()), this.x, this.y);
|
|
if (ctx.strokeStyle !== '') ctx.strokeText(svg.compressSpaces(this.getText()), this.x, this.y);
|
|
};
|
|
|
|
_this31.getText = function () {
|
|
// OVERRIDE ME
|
|
};
|
|
|
|
_this31.measureTextRecursive = function (ctx) {
|
|
var width = this.measureText(ctx);
|
|
for (var i = 0; i < this.children.length; i++) {
|
|
width += this.children[i].measureTextRecursive(ctx);
|
|
}
|
|
return width;
|
|
};
|
|
|
|
_this31.measureText = function (ctx) {
|
|
var customFont = this.parent.style('font-family').getDefinition();
|
|
if (customFont != null) {
|
|
var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize);
|
|
var measure = 0;
|
|
var text = this.getText();
|
|
if (customFont.isRTL) text = text.split('').reverse().join('');
|
|
var dx = svg.ToNumberArray(this.parent.attribute('dx').value);
|
|
for (var i = 0; i < text.length; i++) {
|
|
var glyph = this.getGlyph(customFont, text, i);
|
|
measure += (glyph.horizAdvX || customFont.horizAdvX) * fontSize / customFont.fontFace.unitsPerEm;
|
|
if (typeof dx[i] !== 'undefined' && !isNaN(dx[i])) {
|
|
measure += dx[i];
|
|
}
|
|
}
|
|
return measure;
|
|
}
|
|
|
|
var textToMeasure = svg.compressSpaces(this.getText());
|
|
if (!ctx.measureText) return textToMeasure.length * 10;
|
|
|
|
ctx.save();
|
|
this.setContext(ctx);
|
|
|
|
var _ctx$measureText = ctx.measureText(textToMeasure),
|
|
width = _ctx$measureText.width;
|
|
|
|
ctx.restore();
|
|
return width;
|
|
};
|
|
return _this31;
|
|
}
|
|
|
|
return _class31;
|
|
}(svg.Element.RenderedElementBase);
|
|
|
|
// tspan
|
|
svg.Element.tspan = function (_svg$Element$TextElem) {
|
|
inherits(_class32, _svg$Element$TextElem);
|
|
|
|
function _class32(node) {
|
|
classCallCheck(this, _class32);
|
|
|
|
var _this32 = possibleConstructorReturn(this, (_class32.__proto__ || Object.getPrototypeOf(_class32)).call(this, node));
|
|
|
|
_this32.captureTextNodes = true;
|
|
|
|
_this32.text = node.nodeValue || node.text || '';
|
|
_this32.getText = function () {
|
|
return this.text;
|
|
};
|
|
return _this32;
|
|
}
|
|
|
|
return _class32;
|
|
}(svg.Element.TextElementBase);
|
|
|
|
// tref
|
|
svg.Element.tref = function (_svg$Element$TextElem2) {
|
|
inherits(_class33, _svg$Element$TextElem2);
|
|
|
|
function _class33(node) {
|
|
classCallCheck(this, _class33);
|
|
|
|
var _this33 = possibleConstructorReturn(this, (_class33.__proto__ || Object.getPrototypeOf(_class33)).call(this, node));
|
|
|
|
_this33.getText = function () {
|
|
var element = this.getHrefAttribute().getDefinition();
|
|
if (element != null) return element.children[0].getText();
|
|
};
|
|
return _this33;
|
|
}
|
|
|
|
return _class33;
|
|
}(svg.Element.TextElementBase);
|
|
|
|
// a element
|
|
svg.Element.a = function (_svg$Element$TextElem3) {
|
|
inherits(_class34, _svg$Element$TextElem3);
|
|
|
|
function _class34(node) {
|
|
classCallCheck(this, _class34);
|
|
|
|
var _this34 = possibleConstructorReturn(this, (_class34.__proto__ || Object.getPrototypeOf(_class34)).call(this, node));
|
|
|
|
_this34.hasText = true;
|
|
for (var i = 0, childNode; childNode = node.childNodes[i]; i++) {
|
|
if (childNode.nodeType !== 3) _this34.hasText = false;
|
|
}
|
|
|
|
// this might contain text
|
|
_this34.text = _this34.hasText ? node.childNodes[0].nodeValue : '';
|
|
_this34.getText = function () {
|
|
return this.text;
|
|
};
|
|
|
|
_this34.baseRenderChildren = _this34.renderChildren;
|
|
_this34.renderChildren = function (ctx) {
|
|
if (this.hasText) {
|
|
// render as text element
|
|
this.baseRenderChildren(ctx);
|
|
var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize);
|
|
svg.Mouse.checkBoundingBox(this, new svg.BoundingBox(this.x, this.y - fontSize.toPixels('y'), this.x + this.measureText(ctx), this.y));
|
|
} else {
|
|
// render as temporary group
|
|
var g = new svg.Element.g();
|
|
g.children = this.children;
|
|
g.parent = this;
|
|
g.render(ctx);
|
|
}
|
|
};
|
|
|
|
_this34.onclick = function () {
|
|
window.open(this.getHrefAttribute().value);
|
|
};
|
|
|
|
_this34.onmousemove = function () {
|
|
svg.ctx.canvas.style.cursor = 'pointer';
|
|
};
|
|
return _this34;
|
|
}
|
|
|
|
return _class34;
|
|
}(svg.Element.TextElementBase);
|
|
|
|
// image element
|
|
svg.Element.image = function (_svg$Element$Rendered5) {
|
|
inherits(_class35, _svg$Element$Rendered5);
|
|
|
|
function _class35(node) {
|
|
classCallCheck(this, _class35);
|
|
|
|
var _this35 = possibleConstructorReturn(this, (_class35.__proto__ || Object.getPrototypeOf(_class35)).call(this, node));
|
|
|
|
var href = _this35.getHrefAttribute().value;
|
|
if (href === '') {
|
|
return possibleConstructorReturn(_this35);
|
|
}
|
|
var isSvg = href.match(/\.svg$/);
|
|
|
|
svg.Images.push(_this35);
|
|
_this35.loaded = false;
|
|
if (!isSvg) {
|
|
_this35.img = document.createElement('img');
|
|
if (svg.opts['useCORS'] === true) {
|
|
_this35.img.crossOrigin = 'Anonymous';
|
|
}
|
|
var self = _this35;
|
|
_this35.img.onload = function () {
|
|
self.loaded = true;
|
|
};
|
|
_this35.img.onerror = function () {
|
|
svg.log('ERROR: image "' + href + '" not found');self.loaded = true;
|
|
};
|
|
_this35.img.src = href;
|
|
} else {
|
|
_this35.img = svg.ajax(href);
|
|
_this35.loaded = true;
|
|
}
|
|
|
|
_this35.renderChildren = function (ctx) {
|
|
var x = this.attribute('x').toPixels('x');
|
|
var y = this.attribute('y').toPixels('y');
|
|
|
|
var width = this.attribute('width').toPixels('x');
|
|
var height = this.attribute('height').toPixels('y');
|
|
if (width === 0 || height === 0) return;
|
|
|
|
ctx.save();
|
|
if (isSvg) {
|
|
ctx.drawSvg(this.img, x, y, width, height);
|
|
} else {
|
|
ctx.translate(x, y);
|
|
svg.AspectRatio(ctx, this.attribute('preserveAspectRatio').value, width, this.img.width, height, this.img.height, 0, 0);
|
|
ctx.drawImage(this.img, 0, 0);
|
|
}
|
|
ctx.restore();
|
|
};
|
|
|
|
_this35.getBoundingBox = function () {
|
|
var x = this.attribute('x').toPixels('x');
|
|
var y = this.attribute('y').toPixels('y');
|
|
var width = this.attribute('width').toPixels('x');
|
|
var height = this.attribute('height').toPixels('y');
|
|
return new svg.BoundingBox(x, y, x + width, y + height);
|
|
};
|
|
return _this35;
|
|
}
|
|
|
|
return _class35;
|
|
}(svg.Element.RenderedElementBase);
|
|
|
|
// group element
|
|
svg.Element.g = function (_svg$Element$Rendered6) {
|
|
inherits(_class36, _svg$Element$Rendered6);
|
|
|
|
function _class36(node) {
|
|
classCallCheck(this, _class36);
|
|
|
|
var _this36 = possibleConstructorReturn(this, (_class36.__proto__ || Object.getPrototypeOf(_class36)).call(this, node));
|
|
|
|
_this36.getBoundingBox = function () {
|
|
var bb = new svg.BoundingBox();
|
|
for (var i = 0; i < this.children.length; i++) {
|
|
bb.addBoundingBox(this.children[i].getBoundingBox());
|
|
}
|
|
return bb;
|
|
};
|
|
return _this36;
|
|
}
|
|
|
|
return _class36;
|
|
}(svg.Element.RenderedElementBase);
|
|
|
|
// symbol element
|
|
svg.Element.symbol = function (_svg$Element$Rendered7) {
|
|
inherits(_class37, _svg$Element$Rendered7);
|
|
|
|
function _class37(node) {
|
|
classCallCheck(this, _class37);
|
|
|
|
var _this37 = possibleConstructorReturn(this, (_class37.__proto__ || Object.getPrototypeOf(_class37)).call(this, node));
|
|
|
|
_this37.render = function (ctx) {
|
|
// NO RENDER
|
|
};
|
|
return _this37;
|
|
}
|
|
|
|
return _class37;
|
|
}(svg.Element.RenderedElementBase);
|
|
|
|
// style element
|
|
svg.Element.style = function (_svg$Element$ElementB10) {
|
|
inherits(_class38, _svg$Element$ElementB10);
|
|
|
|
function _class38(node) {
|
|
classCallCheck(this, _class38);
|
|
|
|
// text, or spaces then CDATA
|
|
var _this38 = possibleConstructorReturn(this, (_class38.__proto__ || Object.getPrototypeOf(_class38)).call(this, node));
|
|
|
|
var css = '';
|
|
for (var i = 0, childNode; childNode = node.childNodes[i]; i++) {
|
|
css += childNode.nodeValue;
|
|
}
|
|
css = css.replace(/(\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+\/)|(^[\s]*\/\/.*)/gm, ''); // remove comments
|
|
css = svg.compressSpaces(css); // replace whitespace
|
|
var cssDefs = css.split('}');
|
|
for (var _i5 = 0; _i5 < cssDefs.length; _i5++) {
|
|
if (svg.trim(cssDefs[_i5]) !== '') {
|
|
var cssDef = cssDefs[_i5].split('{');
|
|
var cssClasses = cssDef[0].split(',');
|
|
var cssProps = cssDef[1].split(';');
|
|
for (var j = 0; j < cssClasses.length; j++) {
|
|
var cssClass = svg.trim(cssClasses[j]);
|
|
if (cssClass !== '') {
|
|
var props = {};
|
|
for (var k = 0; k < cssProps.length; k++) {
|
|
var prop = cssProps[k].indexOf(':');
|
|
var name = cssProps[k].substr(0, prop);
|
|
var value = cssProps[k].substr(prop + 1, cssProps[k].length - prop);
|
|
if (name != null && value != null) {
|
|
props[svg.trim(name)] = new svg.Property(svg.trim(name), svg.trim(value));
|
|
}
|
|
}
|
|
svg.Styles[cssClass] = props;
|
|
if (cssClass === '@font-face') {
|
|
var fontFamily = props['font-family'].value.replace(/"/g, '');
|
|
var srcs = props['src'].value.split(',');
|
|
for (var s = 0; s < srcs.length; s++) {
|
|
if (srcs[s].includes('format("svg")')) {
|
|
var urlStart = srcs[s].indexOf('url');
|
|
var urlEnd = srcs[s].indexOf(')', urlStart);
|
|
var url = srcs[s].substr(urlStart + 5, urlEnd - urlStart - 6);
|
|
var doc = svg.parseXml(svg.ajax(url));
|
|
var fonts = doc.getElementsByTagName('font');
|
|
for (var _f = 0; _f < fonts.length; _f++) {
|
|
var font = svg.CreateElement(fonts[_f]);
|
|
svg.Definitions[fontFamily] = font;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return _this38;
|
|
}
|
|
|
|
return _class38;
|
|
}(svg.Element.ElementBase);
|
|
|
|
// use element
|
|
svg.Element.use = function (_svg$Element$Rendered8) {
|
|
inherits(_class39, _svg$Element$Rendered8);
|
|
|
|
function _class39(node) {
|
|
classCallCheck(this, _class39);
|
|
|
|
var _this39 = possibleConstructorReturn(this, (_class39.__proto__ || Object.getPrototypeOf(_class39)).call(this, node));
|
|
|
|
_this39.baseSetContext = _this39.setContext;
|
|
_this39.setContext = function (ctx) {
|
|
this.baseSetContext(ctx);
|
|
if (this.attribute('x').hasValue()) ctx.translate(this.attribute('x').toPixels('x'), 0);
|
|
if (this.attribute('y').hasValue()) ctx.translate(0, this.attribute('y').toPixels('y'));
|
|
};
|
|
|
|
var element = _this39.getHrefAttribute().getDefinition();
|
|
|
|
_this39.path = function (ctx) {
|
|
if (element != null) element.path(ctx);
|
|
};
|
|
|
|
_this39.getBoundingBox = function () {
|
|
if (element != null) return element.getBoundingBox();
|
|
};
|
|
|
|
_this39.renderChildren = function (ctx) {
|
|
if (element != null) {
|
|
var tempSvg = element;
|
|
if (element.type === 'symbol') {
|
|
// render me using a temporary svg element in symbol cases (https://www.w3.org/TR/SVG/struct.html#UseElement)
|
|
tempSvg = new svg.Element.svg();
|
|
tempSvg.type = 'svg';
|
|
tempSvg.attributes['viewBox'] = new svg.Property('viewBox', element.attribute('viewBox').value);
|
|
tempSvg.attributes['preserveAspectRatio'] = new svg.Property('preserveAspectRatio', element.attribute('preserveAspectRatio').value);
|
|
tempSvg.attributes['overflow'] = new svg.Property('overflow', element.attribute('overflow').value);
|
|
tempSvg.children = element.children;
|
|
}
|
|
if (tempSvg.type === 'svg') {
|
|
// if symbol or svg, inherit width/height from me
|
|
if (this.attribute('width').hasValue()) tempSvg.attributes['width'] = new svg.Property('width', this.attribute('width').value);
|
|
if (this.attribute('height').hasValue()) tempSvg.attributes['height'] = new svg.Property('height', this.attribute('height').value);
|
|
}
|
|
var oldParent = tempSvg.parent;
|
|
tempSvg.parent = null;
|
|
tempSvg.render(ctx);
|
|
tempSvg.parent = oldParent;
|
|
}
|
|
};
|
|
return _this39;
|
|
}
|
|
|
|
return _class39;
|
|
}(svg.Element.RenderedElementBase);
|
|
|
|
// mask element
|
|
svg.Element.mask = function (_svg$Element$ElementB11) {
|
|
inherits(_class40, _svg$Element$ElementB11);
|
|
|
|
function _class40(node) {
|
|
classCallCheck(this, _class40);
|
|
|
|
var _this40 = possibleConstructorReturn(this, (_class40.__proto__ || Object.getPrototypeOf(_class40)).call(this, node));
|
|
|
|
_this40.apply = function (ctx, element) {
|
|
// render as temp svg
|
|
var x = this.attribute('x').toPixels('x');
|
|
var y = this.attribute('y').toPixels('y');
|
|
var width = this.attribute('width').toPixels('x');
|
|
var height = this.attribute('height').toPixels('y');
|
|
|
|
if (width === 0 && height === 0) {
|
|
var bb = new svg.BoundingBox();
|
|
for (var i = 0; i < this.children.length; i++) {
|
|
bb.addBoundingBox(this.children[i].getBoundingBox());
|
|
}
|
|
x = Math.floor(bb.x1);
|
|
y = Math.floor(bb.y1);
|
|
width = Math.floor(bb.width());
|
|
height = Math.floor(bb.height());
|
|
}
|
|
|
|
// temporarily remove mask to avoid recursion
|
|
var mask = element.attribute('mask').value;
|
|
element.attribute('mask').value = '';
|
|
|
|
var cMask = document.createElement('canvas');
|
|
cMask.width = x + width;
|
|
cMask.height = y + height;
|
|
var maskCtx = cMask.getContext('2d');
|
|
this.renderChildren(maskCtx);
|
|
|
|
var c = document.createElement('canvas');
|
|
c.width = x + width;
|
|
c.height = y + height;
|
|
var tempCtx = c.getContext('2d');
|
|
element.render(tempCtx);
|
|
tempCtx.globalCompositeOperation = 'destination-in';
|
|
tempCtx.fillStyle = maskCtx.createPattern(cMask, 'no-repeat');
|
|
tempCtx.fillRect(0, 0, x + width, y + height);
|
|
|
|
ctx.fillStyle = tempCtx.createPattern(c, 'no-repeat');
|
|
ctx.fillRect(0, 0, x + width, y + height);
|
|
|
|
// reassign mask
|
|
element.attribute('mask').value = mask;
|
|
};
|
|
|
|
_this40.render = function (ctx) {
|
|
// NO RENDER
|
|
};
|
|
return _this40;
|
|
}
|
|
|
|
return _class40;
|
|
}(svg.Element.ElementBase);
|
|
|
|
// clip element
|
|
svg.Element.clipPath = function (_svg$Element$ElementB12) {
|
|
inherits(_class41, _svg$Element$ElementB12);
|
|
|
|
function _class41(node) {
|
|
classCallCheck(this, _class41);
|
|
|
|
var _this41 = possibleConstructorReturn(this, (_class41.__proto__ || Object.getPrototypeOf(_class41)).call(this, node));
|
|
|
|
_this41.apply = function (ctx) {
|
|
for (var i = 0; i < this.children.length; i++) {
|
|
var child = this.children[i];
|
|
if (typeof child.path !== 'undefined') {
|
|
var transform = null;
|
|
if (child.attribute('transform').hasValue()) {
|
|
transform = new svg.Transform(child.attribute('transform').value);
|
|
transform.apply(ctx);
|
|
}
|
|
child.path(ctx);
|
|
ctx.clip();
|
|
if (transform) {
|
|
transform.unapply(ctx);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
_this41.render = function (ctx) {
|
|
// NO RENDER
|
|
};
|
|
return _this41;
|
|
}
|
|
|
|
return _class41;
|
|
}(svg.Element.ElementBase);
|
|
|
|
// filters
|
|
svg.Element.filter = function (_svg$Element$ElementB13) {
|
|
inherits(_class42, _svg$Element$ElementB13);
|
|
|
|
function _class42(node) {
|
|
classCallCheck(this, _class42);
|
|
|
|
var _this42 = possibleConstructorReturn(this, (_class42.__proto__ || Object.getPrototypeOf(_class42)).call(this, node));
|
|
|
|
_this42.apply = function (ctx, element) {
|
|
// render as temp svg
|
|
var bb = element.getBoundingBox();
|
|
var x = Math.floor(bb.x1);
|
|
var y = Math.floor(bb.y1);
|
|
var width = Math.floor(bb.width());
|
|
var height = Math.floor(bb.height());
|
|
|
|
// temporarily remove filter to avoid recursion
|
|
var filter = element.style('filter').value;
|
|
element.style('filter').value = '';
|
|
|
|
var px = 0,
|
|
py = 0;
|
|
for (var i = 0; i < this.children.length; i++) {
|
|
var efd = this.children[i].extraFilterDistance || 0;
|
|
px = Math.max(px, efd);
|
|
py = Math.max(py, efd);
|
|
}
|
|
|
|
var c = document.createElement('canvas');
|
|
c.width = width + 2 * px;
|
|
c.height = height + 2 * py;
|
|
var tempCtx = c.getContext('2d');
|
|
tempCtx.translate(-x + px, -y + py);
|
|
element.render(tempCtx);
|
|
|
|
// apply filters
|
|
for (var _i6 = 0; _i6 < this.children.length; _i6++) {
|
|
this.children[_i6].apply(tempCtx, 0, 0, width + 2 * px, height + 2 * py);
|
|
}
|
|
|
|
// render on me
|
|
ctx.drawImage(c, 0, 0, width + 2 * px, height + 2 * py, x - px, y - py, width + 2 * px, height + 2 * py);
|
|
|
|
// reassign filter
|
|
element.style('filter', true).value = filter;
|
|
};
|
|
|
|
_this42.render = function (ctx) {
|
|
// NO RENDER
|
|
};
|
|
return _this42;
|
|
}
|
|
|
|
return _class42;
|
|
}(svg.Element.ElementBase);
|
|
|
|
svg.Element.feMorphology = function (_svg$Element$ElementB14) {
|
|
inherits(_class43, _svg$Element$ElementB14);
|
|
|
|
function _class43(node) {
|
|
classCallCheck(this, _class43);
|
|
|
|
var _this43 = possibleConstructorReturn(this, (_class43.__proto__ || Object.getPrototypeOf(_class43)).call(this, node));
|
|
|
|
_this43.apply = function (ctx, x, y, width, height) {
|
|
// TODO: implement
|
|
};
|
|
return _this43;
|
|
}
|
|
|
|
return _class43;
|
|
}(svg.Element.ElementBase);
|
|
|
|
svg.Element.feComposite = function (_svg$Element$ElementB15) {
|
|
inherits(_class44, _svg$Element$ElementB15);
|
|
|
|
function _class44(node) {
|
|
classCallCheck(this, _class44);
|
|
|
|
var _this44 = possibleConstructorReturn(this, (_class44.__proto__ || Object.getPrototypeOf(_class44)).call(this, node));
|
|
|
|
_this44.apply = function (ctx, x, y, width, height) {
|
|
// TODO: implement
|
|
};
|
|
return _this44;
|
|
}
|
|
|
|
return _class44;
|
|
}(svg.Element.ElementBase);
|
|
|
|
svg.Element.feColorMatrix = function (_svg$Element$ElementB16) {
|
|
inherits(_class45, _svg$Element$ElementB16);
|
|
|
|
function _class45(node) {
|
|
classCallCheck(this, _class45);
|
|
|
|
var _this45 = possibleConstructorReturn(this, (_class45.__proto__ || Object.getPrototypeOf(_class45)).call(this, node));
|
|
|
|
var matrix = svg.ToNumberArray(_this45.attribute('values').value);
|
|
switch (_this45.attribute('type').valueOrDefault('matrix')) {// https://www.w3.org/TR/SVG/filters.html#feColorMatrixElement
|
|
case 'saturate':
|
|
var s = matrix[0];
|
|
matrix = [0.213 + 0.787 * s, 0.715 - 0.715 * s, 0.072 - 0.072 * s, 0, 0, 0.213 - 0.213 * s, 0.715 + 0.285 * s, 0.072 - 0.072 * s, 0, 0, 0.213 - 0.213 * s, 0.715 - 0.715 * s, 0.072 + 0.928 * s, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1];
|
|
break;
|
|
case 'hueRotate':
|
|
var a = matrix[0] * Math.PI / 180.0;
|
|
var _c3 = function _c3(m1, m2, m3) {
|
|
return m1 + Math.cos(a) * m2 + Math.sin(a) * m3;
|
|
};
|
|
matrix = [_c3(0.213, 0.787, -0.213), _c3(0.715, -0.715, -0.715), _c3(0.072, -0.072, 0.928), 0, 0, _c3(0.213, -0.213, 0.143), _c3(0.715, 0.285, 0.140), _c3(0.072, -0.072, -0.283), 0, 0, _c3(0.213, -0.213, -0.787), _c3(0.715, -0.715, 0.715), _c3(0.072, 0.928, 0.072), 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1];
|
|
break;
|
|
case 'luminanceToAlpha':
|
|
matrix = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.2125, 0.7154, 0.0721, 0, 0, 0, 0, 0, 0, 1];
|
|
break;
|
|
}
|
|
|
|
function imGet(img, x, y, width, height, rgba) {
|
|
return img[y * width * 4 + x * 4 + rgba];
|
|
}
|
|
|
|
function imSet(img, x, y, width, height, rgba, val) {
|
|
img[y * width * 4 + x * 4 + rgba] = val;
|
|
}
|
|
|
|
function m(i, v) {
|
|
var mi = matrix[i];
|
|
return mi * (mi < 0 ? v - 255 : v);
|
|
}
|
|
|
|
_this45.apply = function (ctx, x, y, width, height) {
|
|
// assuming x==0 && y==0 for now
|
|
var srcData = ctx.getImageData(0, 0, width, height);
|
|
for (var _y = 0; _y < height; _y++) {
|
|
for (var _x = 0; _x < width; _x++) {
|
|
var _r3 = imGet(srcData.data, _x, _y, width, height, 0);
|
|
var g = imGet(srcData.data, _x, _y, width, height, 1);
|
|
var _b2 = imGet(srcData.data, _x, _y, width, height, 2);
|
|
var _a = imGet(srcData.data, _x, _y, width, height, 3);
|
|
imSet(srcData.data, _x, _y, width, height, 0, m(0, _r3) + m(1, g) + m(2, _b2) + m(3, _a) + m(4, 1));
|
|
imSet(srcData.data, _x, _y, width, height, 1, m(5, _r3) + m(6, g) + m(7, _b2) + m(8, _a) + m(9, 1));
|
|
imSet(srcData.data, _x, _y, width, height, 2, m(10, _r3) + m(11, g) + m(12, _b2) + m(13, _a) + m(14, 1));
|
|
imSet(srcData.data, _x, _y, width, height, 3, m(15, _r3) + m(16, g) + m(17, _b2) + m(18, _a) + m(19, 1));
|
|
}
|
|
}
|
|
ctx.clearRect(0, 0, width, height);
|
|
ctx.putImageData(srcData, 0, 0);
|
|
};
|
|
return _this45;
|
|
}
|
|
|
|
return _class45;
|
|
}(svg.Element.ElementBase);
|
|
|
|
svg.Element.feGaussianBlur = function (_svg$Element$ElementB17) {
|
|
inherits(_class46, _svg$Element$ElementB17);
|
|
|
|
function _class46(node) {
|
|
classCallCheck(this, _class46);
|
|
|
|
var _this46 = possibleConstructorReturn(this, (_class46.__proto__ || Object.getPrototypeOf(_class46)).call(this, node));
|
|
|
|
_this46.blurRadius = Math.floor(_this46.attribute('stdDeviation').numValue());
|
|
_this46.extraFilterDistance = _this46.blurRadius;
|
|
|
|
_this46.apply = function (ctx, x, y, width, height) {
|
|
if (typeof stackBlurCanvasRGBA === 'undefined') {
|
|
svg.log('ERROR: StackBlur.js must be included for blur to work');
|
|
return;
|
|
}
|
|
|
|
// StackBlur requires canvas be on document
|
|
ctx.canvas.id = svg.UniqueId();
|
|
ctx.canvas.style.display = 'none';
|
|
document.body.appendChild(ctx.canvas);
|
|
stackBlurCanvasRGBA(ctx.canvas.id, x, y, width, height, this.blurRadius);
|
|
document.body.removeChild(ctx.canvas);
|
|
};
|
|
return _this46;
|
|
}
|
|
|
|
return _class46;
|
|
}(svg.Element.ElementBase);
|
|
|
|
// title element, do nothing
|
|
svg.Element.title = function (_svg$Element$ElementB18) {
|
|
inherits(_class47, _svg$Element$ElementB18);
|
|
|
|
function _class47(node) {
|
|
classCallCheck(this, _class47);
|
|
return possibleConstructorReturn(this, (_class47.__proto__ || Object.getPrototypeOf(_class47)).call(this));
|
|
}
|
|
|
|
return _class47;
|
|
}(svg.Element.ElementBase);
|
|
|
|
// desc element, do nothing
|
|
svg.Element.desc = function (_svg$Element$ElementB19) {
|
|
inherits(_class48, _svg$Element$ElementB19);
|
|
|
|
function _class48(node) {
|
|
classCallCheck(this, _class48);
|
|
return possibleConstructorReturn(this, (_class48.__proto__ || Object.getPrototypeOf(_class48)).call(this));
|
|
}
|
|
|
|
return _class48;
|
|
}(svg.Element.ElementBase);
|
|
|
|
svg.Element.MISSING = function (_svg$Element$ElementB20) {
|
|
inherits(_class49, _svg$Element$ElementB20);
|
|
|
|
function _class49(node) {
|
|
classCallCheck(this, _class49);
|
|
|
|
var _this49 = possibleConstructorReturn(this, (_class49.__proto__ || Object.getPrototypeOf(_class49)).call(this));
|
|
|
|
svg.log('ERROR: Element \'' + node.nodeName + '\' not yet implemented.');
|
|
return _this49;
|
|
}
|
|
|
|
return _class49;
|
|
}(svg.Element.ElementBase);
|
|
|
|
// element factory
|
|
svg.CreateElement = function (node) {
|
|
var className = node.nodeName.replace(/^[^:]+:/, '') // remove namespace
|
|
.replace(/-/g, ''); // remove dashes
|
|
var e = void 0;
|
|
if (typeof svg.Element[className] !== 'undefined') {
|
|
e = new svg.Element[className](node);
|
|
} else {
|
|
e = new svg.Element.MISSING(node);
|
|
}
|
|
|
|
e.type = node.nodeName;
|
|
return e;
|
|
};
|
|
|
|
// load from url
|
|
svg.load = function (ctx, url) {
|
|
svg.loadXml(ctx, svg.ajax(url));
|
|
};
|
|
|
|
// load from xml
|
|
svg.loadXml = function (ctx, xml) {
|
|
svg.loadXmlDoc(ctx, svg.parseXml(xml));
|
|
};
|
|
|
|
svg.loadXmlDoc = function (ctx, dom) {
|
|
svg.init(ctx);
|
|
|
|
var mapXY = function mapXY(p) {
|
|
var e = ctx.canvas;
|
|
while (e) {
|
|
p.x -= e.offsetLeft;
|
|
p.y -= e.offsetTop;
|
|
e = e.offsetParent;
|
|
}
|
|
if (window.scrollX) p.x += window.scrollX;
|
|
if (window.scrollY) p.y += window.scrollY;
|
|
return p;
|
|
};
|
|
|
|
// bind mouse
|
|
if (svg.opts['ignoreMouse'] !== true) {
|
|
ctx.canvas.onclick = function (e) {
|
|
var p = mapXY(new svg.Point(e != null ? e.clientX : event.clientX, e != null ? e.clientY : event.clientY));
|
|
svg.Mouse.onclick(p.x, p.y);
|
|
};
|
|
ctx.canvas.onmousemove = function (e) {
|
|
var p = mapXY(new svg.Point(e != null ? e.clientX : event.clientX, e != null ? e.clientY : event.clientY));
|
|
svg.Mouse.onmousemove(p.x, p.y);
|
|
};
|
|
}
|
|
|
|
var e = svg.CreateElement(dom.documentElement);
|
|
e.root = true;
|
|
|
|
// render loop
|
|
var isFirstRender = true;
|
|
var draw = function draw() {
|
|
svg.ViewPort.Clear();
|
|
if (ctx.canvas.parentNode) svg.ViewPort.SetCurrent(ctx.canvas.parentNode.clientWidth, ctx.canvas.parentNode.clientHeight);
|
|
|
|
if (svg.opts['ignoreDimensions'] !== true) {
|
|
// set canvas size
|
|
if (e.style('width').hasValue()) {
|
|
ctx.canvas.width = e.style('width').toPixels('x');
|
|
ctx.canvas.style.width = ctx.canvas.width + 'px';
|
|
}
|
|
if (e.style('height').hasValue()) {
|
|
ctx.canvas.height = e.style('height').toPixels('y');
|
|
ctx.canvas.style.height = ctx.canvas.height + 'px';
|
|
}
|
|
}
|
|
var cWidth = ctx.canvas.clientWidth || ctx.canvas.width;
|
|
var cHeight = ctx.canvas.clientHeight || ctx.canvas.height;
|
|
if (svg.opts['ignoreDimensions'] === true && e.style('width').hasValue() && e.style('height').hasValue()) {
|
|
cWidth = e.style('width').toPixels('x');
|
|
cHeight = e.style('height').toPixels('y');
|
|
}
|
|
svg.ViewPort.SetCurrent(cWidth, cHeight);
|
|
|
|
if (svg.opts['offsetX'] != null) e.attribute('x', true).value = svg.opts['offsetX'];
|
|
if (svg.opts['offsetY'] != null) e.attribute('y', true).value = svg.opts['offsetY'];
|
|
if (svg.opts['scaleWidth'] != null || svg.opts['scaleHeight'] != null) {
|
|
var viewBox = svg.ToNumberArray(e.attribute('viewBox').value);
|
|
var xRatio = null,
|
|
yRatio = null;
|
|
|
|
if (svg.opts['scaleWidth'] != null) {
|
|
if (e.attribute('width').hasValue()) xRatio = e.attribute('width').toPixels('x') / svg.opts['scaleWidth'];else if (!isNaN(viewBox[2])) xRatio = viewBox[2] / svg.opts['scaleWidth'];
|
|
}
|
|
|
|
if (svg.opts['scaleHeight'] != null) {
|
|
if (e.attribute('height').hasValue()) yRatio = e.attribute('height').toPixels('y') / svg.opts['scaleHeight'];else if (!isNaN(viewBox[3])) yRatio = viewBox[3] / svg.opts['scaleHeight'];
|
|
}
|
|
|
|
if (xRatio == null) {
|
|
xRatio = yRatio;
|
|
}
|
|
if (yRatio == null) {
|
|
yRatio = xRatio;
|
|
}
|
|
|
|
e.attribute('width', true).value = svg.opts['scaleWidth'];
|
|
e.attribute('height', true).value = svg.opts['scaleHeight'];
|
|
e.attribute('viewBox', true).value = '0 0 ' + cWidth * xRatio + ' ' + cHeight * yRatio;
|
|
e.attribute('preserveAspectRatio', true).value = 'none';
|
|
}
|
|
|
|
// clear and render
|
|
if (svg.opts['ignoreClear'] !== true) {
|
|
ctx.clearRect(0, 0, cWidth, cHeight);
|
|
}
|
|
e.render(ctx);
|
|
if (isFirstRender) {
|
|
isFirstRender = false;
|
|
if (typeof svg.opts['renderCallback'] === 'function') {
|
|
svg.opts['renderCallback'](dom);
|
|
}
|
|
}
|
|
};
|
|
|
|
var waitingForImages = true;
|
|
if (svg.ImagesLoaded()) {
|
|
waitingForImages = false;
|
|
draw();
|
|
}
|
|
svg.intervalID = setInterval(function () {
|
|
var needUpdate = false;
|
|
|
|
if (waitingForImages && svg.ImagesLoaded()) {
|
|
waitingForImages = false;
|
|
needUpdate = true;
|
|
}
|
|
|
|
// need update from mouse events?
|
|
if (svg.opts['ignoreMouse'] !== true) {
|
|
needUpdate = needUpdate | svg.Mouse.hasEvents();
|
|
}
|
|
|
|
// need update from animations?
|
|
if (svg.opts['ignoreAnimation'] !== true) {
|
|
for (var i = 0; i < svg.Animations.length; i++) {
|
|
needUpdate = needUpdate | svg.Animations[i].update(1000 / svg.FRAMERATE);
|
|
}
|
|
}
|
|
|
|
// need update from redraw?
|
|
if (typeof svg.opts['forceRedraw'] === 'function') {
|
|
if (svg.opts['forceRedraw']() === true) needUpdate = true;
|
|
}
|
|
|
|
// render if needed
|
|
if (needUpdate) {
|
|
draw();
|
|
svg.Mouse.runEvents(); // run and clear our events
|
|
}
|
|
}, 1000 / svg.FRAMERATE);
|
|
};
|
|
|
|
svg.stop = function () {
|
|
if (svg.intervalID) {
|
|
clearInterval(svg.intervalID);
|
|
}
|
|
};
|
|
|
|
svg.Mouse = new function () {
|
|
this.events = [];
|
|
this.hasEvents = function () {
|
|
return this.events.length !== 0;
|
|
};
|
|
|
|
this.onclick = function (x, y) {
|
|
this.events.push({ type: 'onclick', x: x, y: y,
|
|
run: function run(e) {
|
|
if (e.onclick) e.onclick();
|
|
}
|
|
});
|
|
};
|
|
|
|
this.onmousemove = function (x, y) {
|
|
this.events.push({ type: 'onmousemove', x: x, y: y,
|
|
run: function run(e) {
|
|
if (e.onmousemove) e.onmousemove();
|
|
}
|
|
});
|
|
};
|
|
|
|
this.eventElements = [];
|
|
|
|
this.checkPath = function (element, ctx) {
|
|
for (var i = 0; i < this.events.length; i++) {
|
|
var e = this.events[i];
|
|
if (ctx.isPointInPath && ctx.isPointInPath(e.x, e.y)) this.eventElements[i] = element;
|
|
}
|
|
};
|
|
|
|
this.checkBoundingBox = function (element, bb) {
|
|
for (var i = 0; i < this.events.length; i++) {
|
|
var e = this.events[i];
|
|
if (bb.isPointInBox(e.x, e.y)) this.eventElements[i] = element;
|
|
}
|
|
};
|
|
|
|
this.runEvents = function () {
|
|
svg.ctx.canvas.style.cursor = '';
|
|
|
|
for (var i = 0; i < this.events.length; i++) {
|
|
var e = this.events[i];
|
|
var element = this.eventElements[i];
|
|
while (element) {
|
|
e.run(element);
|
|
element = element.parent;
|
|
}
|
|
}
|
|
|
|
// done running, clear
|
|
this.events = [];
|
|
this.eventElements = [];
|
|
};
|
|
}();
|
|
|
|
return svg;
|
|
}
|
|
|
|
if (typeof CanvasRenderingContext2D !== 'undefined') {
|
|
CanvasRenderingContext2D.prototype.drawSvg = function (s, dx, dy, dw, dh) {
|
|
canvg(this.canvas, s, {
|
|
ignoreMouse: true,
|
|
ignoreAnimation: true,
|
|
ignoreDimensions: true,
|
|
ignoreClear: true,
|
|
offsetX: dx,
|
|
offsetY: dy,
|
|
scaleWidth: dw,
|
|
scaleHeight: dh
|
|
});
|
|
};
|
|
}
|
|
|
|
/* globals jQuery */
|
|
|
|
var $$4 = jQuery;
|
|
|
|
/**
|
|
* This class encapsulates the concept of a layer in the drawing. It can be constructed with
|
|
* an existing group element or, with three parameters, will create a new layer group element.
|
|
*
|
|
* Usage:
|
|
* new Layer'name', group) // Use the existing group for this layer.
|
|
* new Layer('name', group, svgElem) // Create a new group and add it to the DOM after group.
|
|
* new Layer('name', null, svgElem) // Create a new group and add it to the DOM as the last layer.
|
|
*
|
|
* @param {string} name - Layer name
|
|
* @param {SVGGElement|null} group - An existing SVG group element or null.
|
|
* If group and no svgElem, use group for this layer.
|
|
* If group and svgElem, create a new group element and insert it in the DOM after group.
|
|
* If no group and svgElem, create a new group element and insert it in the DOM as the last layer.
|
|
* @param {SVGGElement=} svgElem - The SVG DOM element. If defined, use this to add
|
|
* a new layer to the document.
|
|
*/
|
|
|
|
var Layer = function () {
|
|
function Layer(name, group, svgElem) {
|
|
classCallCheck(this, Layer);
|
|
|
|
this.name_ = name;
|
|
this.group_ = svgElem ? null : group;
|
|
|
|
if (svgElem) {
|
|
// Create a group element with title and add it to the DOM.
|
|
var svgdoc = svgElem.ownerDocument;
|
|
this.group_ = svgdoc.createElementNS(NS.SVG, 'g');
|
|
var layerTitle = svgdoc.createElementNS(NS.SVG, 'title');
|
|
layerTitle.textContent = name;
|
|
this.group_.appendChild(layerTitle);
|
|
if (group) {
|
|
$$4(group).after(this.group_);
|
|
} else {
|
|
svgElem.appendChild(this.group_);
|
|
}
|
|
}
|
|
|
|
addLayerClass(this.group_);
|
|
walkTree(this.group_, function (e) {
|
|
e.setAttribute('style', 'pointer-events:inherit');
|
|
});
|
|
|
|
this.group_.setAttribute('style', svgElem ? 'pointer-events:all' : 'pointer-events:none');
|
|
}
|
|
|
|
/**
|
|
* Get the layer's name.
|
|
* @returns {string} The layer name
|
|
*/
|
|
|
|
|
|
createClass(Layer, [{
|
|
key: 'getName',
|
|
value: function getName() {
|
|
return this.name_;
|
|
}
|
|
|
|
/**
|
|
* Get the group element for this layer.
|
|
* @returns {SVGGElement} The layer SVG group
|
|
*/
|
|
|
|
}, {
|
|
key: 'getGroup',
|
|
value: function getGroup() {
|
|
return this.group_;
|
|
}
|
|
|
|
/**
|
|
* Active this layer so it takes pointer events.
|
|
*/
|
|
|
|
}, {
|
|
key: 'activate',
|
|
value: function activate() {
|
|
this.group_.setAttribute('style', 'pointer-events:all');
|
|
}
|
|
|
|
/**
|
|
* Deactive this layer so it does NOT take pointer events.
|
|
*/
|
|
|
|
}, {
|
|
key: 'deactivate',
|
|
value: function deactivate() {
|
|
this.group_.setAttribute('style', 'pointer-events:none');
|
|
}
|
|
|
|
/**
|
|
* Set this layer visible or hidden based on 'visible' parameter.
|
|
* @param {boolean} visible - If true, make visible; otherwise, hide it.
|
|
*/
|
|
|
|
}, {
|
|
key: 'setVisible',
|
|
value: function setVisible(visible) {
|
|
var expected = visible === undefined || visible ? 'inline' : 'none';
|
|
var oldDisplay = this.group_.getAttribute('display');
|
|
if (oldDisplay !== expected) {
|
|
this.group_.setAttribute('display', expected);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Is this layer visible?
|
|
* @returns {boolean} True if visible.
|
|
*/
|
|
|
|
}, {
|
|
key: 'isVisible',
|
|
value: function isVisible() {
|
|
return this.group_.getAttribute('display') !== 'none';
|
|
}
|
|
|
|
/**
|
|
* Get layer opacity.
|
|
* @returns {number} Opacity value.
|
|
*/
|
|
|
|
}, {
|
|
key: 'getOpacity',
|
|
value: function getOpacity() {
|
|
var opacity = this.group_.getAttribute('opacity');
|
|
if (opacity === null || opacity === undefined) {
|
|
return 1;
|
|
}
|
|
return parseFloat(opacity);
|
|
}
|
|
|
|
/**
|
|
* Sets the opacity of this layer. If opacity is not a value between 0.0 and 1.0,
|
|
* nothing happens.
|
|
* @param {number} opacity - A float value in the range 0.0-1.0
|
|
*/
|
|
|
|
}, {
|
|
key: 'setOpacity',
|
|
value: function setOpacity(opacity) {
|
|
if (typeof opacity === 'number' && opacity >= 0.0 && opacity <= 1.0) {
|
|
this.group_.setAttribute('opacity', opacity);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Append children to this layer.
|
|
* @param {SVGGElement} children - The children to append to this layer.
|
|
*/
|
|
|
|
}, {
|
|
key: 'appendChildren',
|
|
value: function appendChildren(children) {
|
|
for (var i = 0; i < children.length; ++i) {
|
|
this.group_.appendChild(children[i]);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'getTitleElement',
|
|
value: function getTitleElement() {
|
|
var len = this.group_.childNodes.length;
|
|
for (var i = 0; i < len; ++i) {
|
|
var child = this.group_.childNodes.item(i);
|
|
if (child && child.tagName === 'title') {
|
|
return child;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Set the name of this layer.
|
|
* @param {string} name - The new name.
|
|
* @param {svgedit.history.HistoryRecordingService} hrService - History recording service
|
|
* @returns {string|null} The new name if changed; otherwise, null.
|
|
*/
|
|
|
|
}, {
|
|
key: 'setName',
|
|
value: function setName(name, hrService) {
|
|
var previousName = this.name_;
|
|
name = toXml(name);
|
|
// now change the underlying title element contents
|
|
var title = this.getTitleElement();
|
|
if (title) {
|
|
$$4(title).empty();
|
|
title.textContent = name;
|
|
this.name_ = name;
|
|
if (hrService) {
|
|
hrService.changeElement(title, { '#text': previousName });
|
|
}
|
|
return this.name_;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Remove this layer's group from the DOM. No more functions on group can be called after this.
|
|
* @param {SVGGElement} children - The children to append to this layer.
|
|
* @returns {SVGGElement} The layer SVG group that was just removed.
|
|
*/
|
|
|
|
}, {
|
|
key: 'removeGroup',
|
|
value: function removeGroup() {
|
|
var parent = this.group_.parentNode;
|
|
var group = parent.removeChild(this.group_);
|
|
this.group_ = undefined;
|
|
return group;
|
|
}
|
|
}]);
|
|
return Layer;
|
|
}();
|
|
/**
|
|
* @property {string} CLASS_NAME - class attribute assigned to all layer groups.
|
|
*/
|
|
|
|
|
|
Layer.CLASS_NAME = 'layer';
|
|
|
|
/**
|
|
* @property {RegExp} CLASS_REGEX - Used to test presence of class Layer.CLASS_NAME
|
|
*/
|
|
Layer.CLASS_REGEX = new RegExp('(\\s|^)' + Layer.CLASS_NAME + '(\\s|$)');
|
|
|
|
/**
|
|
* Add class Layer.CLASS_NAME to the element (usually class='layer').
|
|
*
|
|
* Parameters:
|
|
* @param {SVGGElement} elem - The SVG element to update
|
|
*/
|
|
function addLayerClass(elem) {
|
|
var classes = elem.getAttribute('class');
|
|
if (classes === null || classes === undefined || !classes.length) {
|
|
elem.setAttribute('class', Layer.CLASS_NAME);
|
|
} else if (!Layer.CLASS_REGEX.test(classes)) {
|
|
elem.setAttribute('class', classes + ' ' + Layer.CLASS_NAME);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Package: svgedit.history
|
|
*
|
|
* Licensed under the MIT License
|
|
*
|
|
* Copyright(c) 2016 Flint O'Brien
|
|
*/
|
|
|
|
/**
|
|
* History recording service.
|
|
*
|
|
* A self-contained service interface for recording history. Once injected, no other dependencies
|
|
* or globals are required (example: UndoManager, command types, etc.). Easy to mock for unit tests.
|
|
* Built on top of history classes in history.js.
|
|
*
|
|
* There is a simple start/end interface for batch commands.
|
|
*
|
|
* HistoryRecordingService.NO_HISTORY is a singleton that can be passed in to functions
|
|
* that record history. This helps when the caller requires that no history be recorded.
|
|
*
|
|
* Usage:
|
|
* The following will record history: insert, batch, insert.
|
|
* ```
|
|
* hrService = new svgedit.history.HistoryRecordingService(this.undoMgr);
|
|
* hrService.insertElement(elem, text); // add simple command to history.
|
|
* hrService.startBatchCommand('create two elements');
|
|
* hrService.changeElement(elem, attrs, text); // add to batchCommand
|
|
* hrService.changeElement(elem, attrs2, text); // add to batchCommand
|
|
* hrService.endBatchCommand(); // add batch command with two change commands to history.
|
|
* hrService.insertElement(elem, text); // add simple command to history.
|
|
* ```
|
|
*
|
|
* Note that all functions return this, so commands can be chained, like so:
|
|
*
|
|
* ```
|
|
* hrService
|
|
* .startBatchCommand('create two elements')
|
|
* .insertElement(elem, text)
|
|
* .changeElement(elem, attrs, text)
|
|
* .endBatchCommand();
|
|
* ```
|
|
*
|
|
* @param {svgedit.history.UndoManager} undoManager - The undo manager.
|
|
* A value of null is valid for cases where no history recording is required.
|
|
* See singleton: HistoryRecordingService.NO_HISTORY
|
|
*/
|
|
|
|
var HistoryRecordingService = function () {
|
|
function HistoryRecordingService(undoManager) {
|
|
classCallCheck(this, HistoryRecordingService);
|
|
|
|
this.undoManager_ = undoManager;
|
|
this.currentBatchCommand_ = null;
|
|
this.batchCommandStack_ = [];
|
|
}
|
|
|
|
/**
|
|
* Start a batch command so multiple commands can recorded as a single history command.
|
|
* Requires a corresponding call to endBatchCommand. Start and end commands can be nested.
|
|
*
|
|
* @param {string} text - Optional string describing the batch command.
|
|
* @returns {svgedit.history.HistoryRecordingService}
|
|
*/
|
|
|
|
|
|
createClass(HistoryRecordingService, [{
|
|
key: 'startBatchCommand',
|
|
value: function startBatchCommand(text) {
|
|
if (!this.undoManager_) {
|
|
return this;
|
|
}
|
|
this.currentBatchCommand_ = new BatchCommand(text);
|
|
this.batchCommandStack_.push(this.currentBatchCommand_);
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* End a batch command and add it to the history or a parent batch command.
|
|
* @returns {svgedit.history.HistoryRecordingService}
|
|
*/
|
|
|
|
}, {
|
|
key: 'endBatchCommand',
|
|
value: function endBatchCommand() {
|
|
if (!this.undoManager_) {
|
|
return this;
|
|
}
|
|
if (this.currentBatchCommand_) {
|
|
var batchCommand = this.currentBatchCommand_;
|
|
this.batchCommandStack_.pop();
|
|
var length = this.batchCommandStack_.length;
|
|
|
|
this.currentBatchCommand_ = length ? this.batchCommandStack_[length - 1] : null;
|
|
this.addCommand_(batchCommand);
|
|
}
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Add a MoveElementCommand to the history or current batch command
|
|
* @param {Element} elem - The DOM element that was moved
|
|
* @param {Element} oldNextSibling - The element's next sibling before it was moved
|
|
* @param {Element} oldParent - The element's parent before it was moved
|
|
* @param {string} [text] - An optional string visible to user related to this change
|
|
* @returns {svgedit.history.HistoryRecordingService}
|
|
*/
|
|
|
|
}, {
|
|
key: 'moveElement',
|
|
value: function moveElement(elem, oldNextSibling, oldParent, text) {
|
|
if (!this.undoManager_) {
|
|
return this;
|
|
}
|
|
this.addCommand_(new MoveElementCommand(elem, oldNextSibling, oldParent, text));
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Add an InsertElementCommand to the history or current batch command
|
|
* @param {Element} elem - The DOM element that was added
|
|
* @param {string} [text] - An optional string visible to user related to this change
|
|
* @returns {svgedit.history.HistoryRecordingService}
|
|
*/
|
|
|
|
}, {
|
|
key: 'insertElement',
|
|
value: function insertElement(elem, text) {
|
|
if (!this.undoManager_) {
|
|
return this;
|
|
}
|
|
this.addCommand_(new InsertElementCommand(elem, text));
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Add a RemoveElementCommand to the history or current batch command
|
|
* @param {Element} elem - The DOM element that was removed
|
|
* @param {Element} oldNextSibling - The element's next sibling before it was removed
|
|
* @param {Element} oldParent - The element's parent before it was removed
|
|
* @param {string} [text] - An optional string visible to user related to this change
|
|
* @returns {svgedit.history.HistoryRecordingService}
|
|
*/
|
|
|
|
}, {
|
|
key: 'removeElement',
|
|
value: function removeElement(elem, oldNextSibling, oldParent, text) {
|
|
if (!this.undoManager_) {
|
|
return this;
|
|
}
|
|
this.addCommand_(new RemoveElementCommand(elem, oldNextSibling, oldParent, text));
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Add a ChangeElementCommand to the history or current batch command
|
|
* @param {Element} elem - The DOM element that was changed
|
|
* @param {Object} attrs - An object with the attributes to be changed and the values they had *before* the change
|
|
* @param {string} [text] - An optional string visible to user related to this change
|
|
* @returns {svgedit.history.HistoryRecordingService}
|
|
*/
|
|
|
|
}, {
|
|
key: 'changeElement',
|
|
value: function changeElement(elem, attrs, text) {
|
|
if (!this.undoManager_) {
|
|
return this;
|
|
}
|
|
this.addCommand_(new ChangeElementCommand(elem, attrs, text));
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Private function to add a command to the history or current batch command.
|
|
* @param cmd
|
|
* @returns {svgedit.history.HistoryRecordingService}
|
|
* @private
|
|
*/
|
|
|
|
}, {
|
|
key: 'addCommand_',
|
|
value: function addCommand_(cmd) {
|
|
if (!this.undoManager_) {
|
|
return this;
|
|
}
|
|
if (this.currentBatchCommand_) {
|
|
this.currentBatchCommand_.addSubCommand(cmd);
|
|
} else {
|
|
this.undoManager_.addCommandToHistory(cmd);
|
|
}
|
|
}
|
|
}]);
|
|
return HistoryRecordingService;
|
|
}();
|
|
/**
|
|
* @property {HistoryRecordingService} NO_HISTORY - Singleton that can be passed to functions that record history, but the caller requires that no history be recorded.
|
|
*/
|
|
|
|
|
|
HistoryRecordingService.NO_HISTORY = new HistoryRecordingService();
|
|
|
|
/* globals jQuery */
|
|
|
|
var $$5 = jQuery;
|
|
|
|
var visElems$1 = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use'.split(',');
|
|
|
|
var RandomizeModes = {
|
|
LET_DOCUMENT_DECIDE: 0,
|
|
ALWAYS_RANDOMIZE: 1,
|
|
NEVER_RANDOMIZE: 2
|
|
};
|
|
var randIds = RandomizeModes.LET_DOCUMENT_DECIDE;
|
|
// Array with current disabled elements (for in-group editing)
|
|
var disabledElems = [];
|
|
|
|
/**
|
|
* Get a HistoryRecordingService.
|
|
* @param {svgedit.history.HistoryRecordingService=} hrService - if exists, return it instead of creating a new service.
|
|
* @returns {svgedit.history.HistoryRecordingService}
|
|
*/
|
|
function historyRecordingService(hrService) {
|
|
return hrService || new HistoryRecordingService(canvas_.undoMgr);
|
|
}
|
|
|
|
/**
|
|
* Find the layer name in a group element.
|
|
* @param group The group element to search in.
|
|
* @returns {string} The layer name or empty string.
|
|
*/
|
|
function findLayerNameInGroup(group) {
|
|
return $$5('title', group).text() || (isOpera() && group.querySelectorAll
|
|
// Hack for Opera 10.60
|
|
? $$5(group.querySelectorAll('title')).text() : '');
|
|
}
|
|
|
|
/**
|
|
* Given a set of names, return a new unique name.
|
|
* @param {Array.<string>} existingLayerNames - Existing layer names.
|
|
* @returns {string} - The new name.
|
|
*/
|
|
function getNewLayerName(existingLayerNames) {
|
|
var i = 1;
|
|
// TODO(codedread): What about internationalization of "Layer"?
|
|
while (existingLayerNames.includes('Layer ' + i)) {
|
|
i++;
|
|
}
|
|
return 'Layer ' + i;
|
|
}
|
|
|
|
/**
|
|
* This class encapsulates the concept of a SVG-edit drawing
|
|
* @param {SVGSVGElement} svgElem - The SVG DOM Element that this JS object
|
|
* encapsulates. If the svgElem has a se:nonce attribute on it, then
|
|
* IDs will use the nonce as they are generated.
|
|
* @param {String} [optIdPrefix=svg_] - The ID prefix to use.
|
|
*/
|
|
var Drawing = function () {
|
|
function Drawing(svgElem, optIdPrefix) {
|
|
classCallCheck(this, Drawing);
|
|
|
|
if (!svgElem || !svgElem.tagName || !svgElem.namespaceURI || svgElem.tagName !== 'svg' || svgElem.namespaceURI !== NS.SVG) {
|
|
throw new Error('Error: svgedit.draw.Drawing instance initialized without a <svg> element');
|
|
}
|
|
|
|
/**
|
|
* The SVG DOM Element that represents this drawing.
|
|
* @type {SVGSVGElement}
|
|
*/
|
|
this.svgElem_ = svgElem;
|
|
|
|
/**
|
|
* The latest object number used in this drawing.
|
|
* @type {number}
|
|
*/
|
|
this.obj_num = 0;
|
|
|
|
/**
|
|
* The prefix to prepend to each element id in the drawing.
|
|
* @type {String}
|
|
*/
|
|
this.idPrefix = optIdPrefix || 'svg_';
|
|
|
|
/**
|
|
* An array of released element ids to immediately reuse.
|
|
* @type {Array.<number>}
|
|
*/
|
|
this.releasedNums = [];
|
|
|
|
/**
|
|
* The z-ordered array of Layer objects. Each layer has a name
|
|
* and group element.
|
|
* The first layer is the one at the bottom of the rendering.
|
|
* @type {Array.<Layer>}
|
|
*/
|
|
this.all_layers = [];
|
|
|
|
/**
|
|
* Map of all_layers by name.
|
|
*
|
|
* Note: Layers are ordered, but referenced externally by name; so, we need both container
|
|
* types depending on which function is called (i.e. all_layers and layer_map).
|
|
*
|
|
* @type {Object.<string, Layer>}
|
|
*/
|
|
this.layer_map = {};
|
|
|
|
/**
|
|
* The current layer being used.
|
|
* @type {Layer}
|
|
*/
|
|
this.current_layer = null;
|
|
|
|
/**
|
|
* The nonce to use to uniquely identify elements across drawings.
|
|
* @type {!String}
|
|
*/
|
|
this.nonce_ = '';
|
|
var n = this.svgElem_.getAttributeNS(NS.SE, 'nonce');
|
|
// If already set in the DOM, use the nonce throughout the document
|
|
// else, if randomizeIds(true) has been called, create and set the nonce.
|
|
if (!!n && randIds !== RandomizeModes.NEVER_RANDOMIZE) {
|
|
this.nonce_ = n;
|
|
} else if (randIds === RandomizeModes.ALWAYS_RANDOMIZE) {
|
|
this.setNonce(Math.floor(Math.random() * 100001));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {string} id Element ID to retrieve
|
|
* @returns {Element} SVG element within the root SVGSVGElement
|
|
*/
|
|
|
|
|
|
createClass(Drawing, [{
|
|
key: 'getElem_',
|
|
value: function getElem_(id) {
|
|
if (this.svgElem_.querySelector) {
|
|
// querySelector lookup
|
|
return this.svgElem_.querySelector('#' + id);
|
|
}
|
|
// jQuery lookup: twice as slow as xpath in FF
|
|
return $$5(this.svgElem_).find('[id=' + id + ']')[0];
|
|
}
|
|
|
|
/**
|
|
* @returns {SVGSVGElement}
|
|
*/
|
|
|
|
}, {
|
|
key: 'getSvgElem',
|
|
value: function getSvgElem() {
|
|
return this.svgElem_;
|
|
}
|
|
|
|
/**
|
|
* @returns {!string|number} The previously set nonce
|
|
*/
|
|
|
|
}, {
|
|
key: 'getNonce',
|
|
value: function getNonce() {
|
|
return this.nonce_;
|
|
}
|
|
|
|
/**
|
|
* @param {!string|number} n The nonce to set
|
|
*/
|
|
|
|
}, {
|
|
key: 'setNonce',
|
|
value: function setNonce(n) {
|
|
this.svgElem_.setAttributeNS(NS.XMLNS, 'xmlns:se', NS.SE);
|
|
this.svgElem_.setAttributeNS(NS.SE, 'se:nonce', n);
|
|
this.nonce_ = n;
|
|
}
|
|
|
|
/**
|
|
* Clears any previously set nonce
|
|
*/
|
|
|
|
}, {
|
|
key: 'clearNonce',
|
|
value: function clearNonce() {
|
|
// We deliberately leave any se:nonce attributes alone,
|
|
// we just don't use it to randomize ids.
|
|
this.nonce_ = '';
|
|
}
|
|
|
|
/**
|
|
* Returns the latest object id as a string.
|
|
* @return {String} The latest object Id.
|
|
*/
|
|
|
|
}, {
|
|
key: 'getId',
|
|
value: function getId() {
|
|
return this.nonce_ ? this.idPrefix + this.nonce_ + '_' + this.obj_num : this.idPrefix + this.obj_num;
|
|
}
|
|
|
|
/**
|
|
* Returns the next object Id as a string.
|
|
* @return {String} The next object Id to use.
|
|
*/
|
|
|
|
}, {
|
|
key: 'getNextId',
|
|
value: function getNextId() {
|
|
var oldObjNum = this.obj_num;
|
|
var restoreOldObjNum = false;
|
|
|
|
// If there are any released numbers in the release stack,
|
|
// use the last one instead of the next obj_num.
|
|
// We need to temporarily use obj_num as that is what getId() depends on.
|
|
if (this.releasedNums.length > 0) {
|
|
this.obj_num = this.releasedNums.pop();
|
|
restoreOldObjNum = true;
|
|
} else {
|
|
// If we are not using a released id, then increment the obj_num.
|
|
this.obj_num++;
|
|
}
|
|
|
|
// Ensure the ID does not exist.
|
|
var id = this.getId();
|
|
while (this.getElem_(id)) {
|
|
if (restoreOldObjNum) {
|
|
this.obj_num = oldObjNum;
|
|
restoreOldObjNum = false;
|
|
}
|
|
this.obj_num++;
|
|
id = this.getId();
|
|
}
|
|
// Restore the old object number if required.
|
|
if (restoreOldObjNum) {
|
|
this.obj_num = oldObjNum;
|
|
}
|
|
return id;
|
|
}
|
|
|
|
/**
|
|
* Releases the object Id, letting it be used as the next id in getNextId().
|
|
* This method DOES NOT remove any elements from the DOM, it is expected
|
|
* that client code will do this.
|
|
* @param {string} id - The id to release.
|
|
* @returns {boolean} True if the id was valid to be released, false otherwise.
|
|
*/
|
|
|
|
}, {
|
|
key: 'releaseId',
|
|
value: function releaseId(id) {
|
|
// confirm if this is a valid id for this Document, else return false
|
|
var front = this.idPrefix + (this.nonce_ ? this.nonce_ + '_' : '');
|
|
if (typeof id !== 'string' || !id.startsWith(front)) {
|
|
return false;
|
|
}
|
|
// extract the obj_num of this id
|
|
var num = parseInt(id.substr(front.length), 10);
|
|
|
|
// if we didn't get a positive number or we already released this number
|
|
// then return false.
|
|
if (typeof num !== 'number' || num <= 0 || this.releasedNums.includes(num)) {
|
|
return false;
|
|
}
|
|
|
|
// push the released number into the released queue
|
|
this.releasedNums.push(num);
|
|
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Returns the number of layers in the current drawing.
|
|
* @returns {integer} The number of layers in the current drawing.
|
|
*/
|
|
|
|
}, {
|
|
key: 'getNumLayers',
|
|
value: function getNumLayers() {
|
|
return this.all_layers.length;
|
|
}
|
|
|
|
/**
|
|
* Check if layer with given name already exists
|
|
* @param {string} name - The layer name to check
|
|
*/
|
|
|
|
}, {
|
|
key: 'hasLayer',
|
|
value: function hasLayer(name) {
|
|
return this.layer_map[name] !== undefined;
|
|
}
|
|
|
|
/**
|
|
* Returns the name of the ith layer. If the index is out of range, an empty string is returned.
|
|
* @param {integer} i - The zero-based index of the layer you are querying.
|
|
* @returns {string} The name of the ith layer (or the empty string if none found)
|
|
*/
|
|
|
|
}, {
|
|
key: 'getLayerName',
|
|
value: function getLayerName(i) {
|
|
return i >= 0 && i < this.getNumLayers() ? this.all_layers[i].getName() : '';
|
|
}
|
|
|
|
/**
|
|
* @returns {SVGGElement} The SVGGElement representing the current layer.
|
|
*/
|
|
|
|
}, {
|
|
key: 'getCurrentLayer',
|
|
value: function getCurrentLayer() {
|
|
return this.current_layer ? this.current_layer.getGroup() : null;
|
|
}
|
|
|
|
/**
|
|
* Get a layer by name.
|
|
* @returns {SVGGElement} The SVGGElement representing the named layer or null.
|
|
*/
|
|
|
|
}, {
|
|
key: 'getLayerByName',
|
|
value: function getLayerByName(name) {
|
|
var layer = this.layer_map[name];
|
|
return layer ? layer.getGroup() : null;
|
|
}
|
|
|
|
/**
|
|
* Returns the name of the currently selected layer. If an error occurs, an empty string
|
|
* is returned.
|
|
* @returns {string} The name of the currently active layer (or the empty string if none found).
|
|
*/
|
|
|
|
}, {
|
|
key: 'getCurrentLayerName',
|
|
value: function getCurrentLayerName() {
|
|
return this.current_layer ? this.current_layer.getName() : '';
|
|
}
|
|
|
|
/**
|
|
* Set the current layer's name.
|
|
* @param {string} name - The new name.
|
|
* @param {svgedit.history.HistoryRecordingService} hrService - History recording service
|
|
* @returns {string|null} The new name if changed; otherwise, null.
|
|
*/
|
|
|
|
}, {
|
|
key: 'setCurrentLayerName',
|
|
value: function setCurrentLayerName(name, hrService) {
|
|
var finalName = null;
|
|
if (this.current_layer) {
|
|
var oldName = this.current_layer.getName();
|
|
finalName = this.current_layer.setName(name, hrService);
|
|
if (finalName) {
|
|
delete this.layer_map[oldName];
|
|
this.layer_map[finalName] = this.current_layer;
|
|
}
|
|
}
|
|
return finalName;
|
|
}
|
|
|
|
/**
|
|
* Set the current layer's position.
|
|
* @param {number} newpos - The zero-based index of the new position of the layer. Range should be 0 to layers-1
|
|
* @returns {Object} If the name was changed, returns {title:SVGGElement, previousName:string}; otherwise null.
|
|
*/
|
|
|
|
}, {
|
|
key: 'setCurrentLayerPosition',
|
|
value: function setCurrentLayerPosition(newpos) {
|
|
var layerCount = this.getNumLayers();
|
|
if (!this.current_layer || newpos < 0 || newpos >= layerCount) {
|
|
return null;
|
|
}
|
|
|
|
var oldpos = void 0;
|
|
for (oldpos = 0; oldpos < layerCount; ++oldpos) {
|
|
if (this.all_layers[oldpos] === this.current_layer) {
|
|
break;
|
|
}
|
|
}
|
|
// some unknown error condition (current_layer not in all_layers)
|
|
if (oldpos === layerCount) {
|
|
return null;
|
|
}
|
|
|
|
if (oldpos !== newpos) {
|
|
// if our new position is below us, we need to insert before the node after newpos
|
|
var currentGroup = this.current_layer.getGroup();
|
|
var oldNextSibling = currentGroup.nextSibling;
|
|
|
|
var refGroup = null;
|
|
if (newpos > oldpos) {
|
|
if (newpos < layerCount - 1) {
|
|
refGroup = this.all_layers[newpos + 1].getGroup();
|
|
}
|
|
// if our new position is above us, we need to insert before the node at newpos
|
|
} else {
|
|
refGroup = this.all_layers[newpos].getGroup();
|
|
}
|
|
this.svgElem_.insertBefore(currentGroup, refGroup);
|
|
|
|
this.identifyLayers();
|
|
this.setCurrentLayer(this.getLayerName(newpos));
|
|
|
|
return {
|
|
currentGroup: currentGroup,
|
|
oldNextSibling: oldNextSibling
|
|
};
|
|
}
|
|
return null;
|
|
}
|
|
}, {
|
|
key: 'mergeLayer',
|
|
value: function mergeLayer(hrService) {
|
|
var currentGroup = this.current_layer.getGroup();
|
|
var prevGroup = $$5(currentGroup).prev()[0];
|
|
if (!prevGroup) {
|
|
return;
|
|
}
|
|
|
|
hrService.startBatchCommand('Merge Layer');
|
|
|
|
var layerNextSibling = currentGroup.nextSibling;
|
|
hrService.removeElement(currentGroup, layerNextSibling, this.svgElem_);
|
|
|
|
while (currentGroup.firstChild) {
|
|
var child = currentGroup.firstChild;
|
|
if (child.localName === 'title') {
|
|
hrService.removeElement(child, child.nextSibling, currentGroup);
|
|
currentGroup.removeChild(child);
|
|
continue;
|
|
}
|
|
var oldNextSibling = child.nextSibling;
|
|
prevGroup.appendChild(child);
|
|
hrService.moveElement(child, oldNextSibling, currentGroup);
|
|
}
|
|
|
|
// Remove current layer's group
|
|
this.current_layer.removeGroup();
|
|
// Remove the current layer and set the previous layer as the new current layer
|
|
var index = this.all_layers.indexOf(this.current_layer);
|
|
if (index > 0) {
|
|
var _name = this.current_layer.getName();
|
|
this.current_layer = this.all_layers[index - 1];
|
|
this.all_layers.splice(index, 1);
|
|
delete this.layer_map[_name];
|
|
}
|
|
|
|
hrService.endBatchCommand();
|
|
}
|
|
}, {
|
|
key: 'mergeAllLayers',
|
|
value: function mergeAllLayers(hrService) {
|
|
// Set the current layer to the last layer.
|
|
this.current_layer = this.all_layers[this.all_layers.length - 1];
|
|
|
|
hrService.startBatchCommand('Merge all Layers');
|
|
while (this.all_layers.length > 1) {
|
|
this.mergeLayer(hrService);
|
|
}
|
|
hrService.endBatchCommand();
|
|
}
|
|
|
|
/**
|
|
* Sets the current layer. If the name is not a valid layer name, then this
|
|
* function returns false. Otherwise it returns true. This is not an
|
|
* undo-able action.
|
|
* @param {string} name - The name of the layer you want to switch to.
|
|
* @returns {boolean} true if the current layer was switched, otherwise false
|
|
*/
|
|
|
|
}, {
|
|
key: 'setCurrentLayer',
|
|
value: function setCurrentLayer(name) {
|
|
var layer = this.layer_map[name];
|
|
if (layer) {
|
|
if (this.current_layer) {
|
|
this.current_layer.deactivate();
|
|
}
|
|
this.current_layer = layer;
|
|
this.current_layer.activate();
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* Deletes the current layer from the drawing and then clears the selection.
|
|
* This function then calls the 'changed' handler. This is an undoable action.
|
|
* @returns {SVGGElement} The SVGGElement of the layer removed or null.
|
|
*/
|
|
|
|
}, {
|
|
key: 'deleteCurrentLayer',
|
|
value: function deleteCurrentLayer() {
|
|
if (this.current_layer && this.getNumLayers() > 1) {
|
|
var oldLayerGroup = this.current_layer.removeGroup();
|
|
this.identifyLayers();
|
|
return oldLayerGroup;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Updates layer system and sets the current layer to the
|
|
* top-most layer (last <g> child of this drawing).
|
|
*/
|
|
|
|
}, {
|
|
key: 'identifyLayers',
|
|
value: function identifyLayers() {
|
|
this.all_layers = [];
|
|
this.layer_map = {};
|
|
var numchildren = this.svgElem_.childNodes.length;
|
|
// loop through all children of SVG element
|
|
var orphans = [],
|
|
layernames = [];
|
|
var layer = null;
|
|
var childgroups = false;
|
|
for (var i = 0; i < numchildren; ++i) {
|
|
var child = this.svgElem_.childNodes.item(i);
|
|
// for each g, find its layer name
|
|
if (child && child.nodeType === 1) {
|
|
if (child.tagName === 'g') {
|
|
childgroups = true;
|
|
var _name2 = findLayerNameInGroup(child);
|
|
if (_name2) {
|
|
layernames.push(_name2);
|
|
layer = new Layer(_name2, child);
|
|
this.all_layers.push(layer);
|
|
this.layer_map[_name2] = layer;
|
|
} else {
|
|
// if group did not have a name, it is an orphan
|
|
orphans.push(child);
|
|
}
|
|
} else if (visElems$1.includes(child.nodeName)) {
|
|
// Child is "visible" (i.e. not a <title> or <defs> element), so it is an orphan
|
|
orphans.push(child);
|
|
}
|
|
}
|
|
}
|
|
|
|
// If orphans or no layers found, create a new layer and add all the orphans to it
|
|
if (orphans.length > 0 || !childgroups) {
|
|
layer = new Layer(getNewLayerName(layernames), null, this.svgElem_);
|
|
layer.appendChildren(orphans);
|
|
this.all_layers.push(layer);
|
|
this.layer_map[name] = layer;
|
|
} else {
|
|
layer.activate();
|
|
}
|
|
this.current_layer = layer;
|
|
}
|
|
|
|
/**
|
|
* Creates a new top-level layer in the drawing with the given name and
|
|
* makes it the current layer.
|
|
* @param {string} name - The given name. If the layer name exists, a new name will be generated.
|
|
* @param {svgedit.history.HistoryRecordingService} hrService - History recording service
|
|
* @returns {SVGGElement} The SVGGElement of the new layer, which is
|
|
* also the current layer of this drawing.
|
|
*/
|
|
|
|
}, {
|
|
key: 'createLayer',
|
|
value: function createLayer(name, hrService) {
|
|
if (this.current_layer) {
|
|
this.current_layer.deactivate();
|
|
}
|
|
// Check for duplicate name.
|
|
if (name === undefined || name === null || name === '' || this.layer_map[name]) {
|
|
name = getNewLayerName(Object.keys(this.layer_map));
|
|
}
|
|
|
|
// Crate new layer and add to DOM as last layer
|
|
var layer = new Layer(name, null, this.svgElem_);
|
|
// Like to assume hrService exists, but this is backwards compatible with old version of createLayer.
|
|
if (hrService) {
|
|
hrService.startBatchCommand('Create Layer');
|
|
hrService.insertElement(layer.getGroup());
|
|
hrService.endBatchCommand();
|
|
}
|
|
|
|
this.all_layers.push(layer);
|
|
this.layer_map[name] = layer;
|
|
this.current_layer = layer;
|
|
return layer.getGroup();
|
|
}
|
|
|
|
/**
|
|
* Creates a copy of the current layer with the given name and makes it the current layer.
|
|
* @param {string} name - The given name. If the layer name exists, a new name will be generated.
|
|
* @param {svgedit.history.HistoryRecordingService} hrService - History recording service
|
|
* @returns {SVGGElement} The SVGGElement of the new layer, which is
|
|
* also the current layer of this drawing.
|
|
*/
|
|
|
|
}, {
|
|
key: 'cloneLayer',
|
|
value: function cloneLayer(name, hrService) {
|
|
if (!this.current_layer) {
|
|
return null;
|
|
}
|
|
this.current_layer.deactivate();
|
|
// Check for duplicate name.
|
|
if (name === undefined || name === null || name === '' || this.layer_map[name]) {
|
|
name = getNewLayerName(Object.keys(this.layer_map));
|
|
}
|
|
|
|
// Create new group and add to DOM just after current_layer
|
|
var currentGroup = this.current_layer.getGroup();
|
|
var layer = new Layer(name, currentGroup, this.svgElem_);
|
|
var group = layer.getGroup();
|
|
|
|
// Clone children
|
|
var children = currentGroup.childNodes;
|
|
for (var _index = 0; _index < children.length; _index++) {
|
|
var ch = children[_index];
|
|
if (ch.localName === 'title') {
|
|
continue;
|
|
}
|
|
group.appendChild(this.copyElem(ch));
|
|
}
|
|
|
|
if (hrService) {
|
|
hrService.startBatchCommand('Duplicate Layer');
|
|
hrService.insertElement(group);
|
|
hrService.endBatchCommand();
|
|
}
|
|
|
|
// Update layer containers and current_layer.
|
|
var index = this.all_layers.indexOf(this.current_layer);
|
|
if (index >= 0) {
|
|
this.all_layers.splice(index + 1, 0, layer);
|
|
} else {
|
|
this.all_layers.push(layer);
|
|
}
|
|
this.layer_map[name] = layer;
|
|
this.current_layer = layer;
|
|
return group;
|
|
}
|
|
|
|
/**
|
|
* Returns whether the layer is visible. If the layer name is not valid,
|
|
* then this function returns false.
|
|
* @param {string} layername - The name of the layer which you want to query.
|
|
* @returns {boolean} The visibility state of the layer, or false if the layer name was invalid.
|
|
*/
|
|
|
|
}, {
|
|
key: 'getLayerVisibility',
|
|
value: function getLayerVisibility(layername) {
|
|
var layer = this.layer_map[layername];
|
|
return layer ? layer.isVisible() : false;
|
|
}
|
|
|
|
/**
|
|
* Sets the visibility of the layer. If the layer name is not valid, this
|
|
* function returns false, otherwise it returns true. This is an
|
|
* undo-able action.
|
|
* @param {string} layername - The name of the layer to change the visibility
|
|
* @param {boolean} bVisible - Whether the layer should be visible
|
|
* @returns {?SVGGElement} The SVGGElement representing the layer if the
|
|
* layername was valid, otherwise null.
|
|
*/
|
|
|
|
}, {
|
|
key: 'setLayerVisibility',
|
|
value: function setLayerVisibility(layername, bVisible) {
|
|
if (typeof bVisible !== 'boolean') {
|
|
return null;
|
|
}
|
|
var layer = this.layer_map[layername];
|
|
if (!layer) {
|
|
return null;
|
|
}
|
|
layer.setVisible(bVisible);
|
|
return layer.getGroup();
|
|
}
|
|
|
|
/**
|
|
* Returns the opacity of the given layer. If the input name is not a layer, null is returned.
|
|
* @param {string} layername - name of the layer on which to get the opacity
|
|
* @returns {?number} The opacity value of the given layer. This will be a value between 0.0 and 1.0, or null
|
|
* if layername is not a valid layer
|
|
*/
|
|
|
|
}, {
|
|
key: 'getLayerOpacity',
|
|
value: function getLayerOpacity(layername) {
|
|
var layer = this.layer_map[layername];
|
|
if (!layer) {
|
|
return null;
|
|
}
|
|
return layer.getOpacity();
|
|
}
|
|
|
|
/**
|
|
* Sets the opacity of the given layer. If the input name is not a layer,
|
|
* nothing happens. If opacity is not a value between 0.0 and 1.0, then
|
|
* nothing happens.
|
|
* @param {string} layername - Name of the layer on which to set the opacity
|
|
* @param {number} opacity - A float value in the range 0.0-1.0
|
|
*/
|
|
|
|
}, {
|
|
key: 'setLayerOpacity',
|
|
value: function setLayerOpacity(layername, opacity) {
|
|
if (typeof opacity !== 'number' || opacity < 0.0 || opacity > 1.0) {
|
|
return;
|
|
}
|
|
var layer = this.layer_map[layername];
|
|
if (layer) {
|
|
layer.setOpacity(opacity);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Create a clone of an element, updating its ID and its children's IDs when needed
|
|
* @param {Element} el - DOM element to clone
|
|
* @returns {Element}
|
|
*/
|
|
|
|
}, {
|
|
key: 'copyElem',
|
|
value: function copyElem$$1(el) {
|
|
var self = this;
|
|
var getNextIdClosure = function getNextIdClosure() {
|
|
return self.getNextId();
|
|
};
|
|
return copyElem(el, getNextIdClosure);
|
|
}
|
|
}]);
|
|
return Drawing;
|
|
}();
|
|
|
|
/**
|
|
* Called to ensure that drawings will or will not have randomized ids.
|
|
* The currentDrawing will have its nonce set if it doesn't already.
|
|
* @param {boolean} enableRandomization - flag indicating if documents should have randomized ids
|
|
* @param {svgedit.draw.Drawing} currentDrawing
|
|
*/
|
|
var randomizeIds = function randomizeIds(enableRandomization, currentDrawing) {
|
|
randIds = enableRandomization === false ? RandomizeModes.NEVER_RANDOMIZE : RandomizeModes.ALWAYS_RANDOMIZE;
|
|
|
|
if (randIds === RandomizeModes.ALWAYS_RANDOMIZE && !currentDrawing.getNonce()) {
|
|
currentDrawing.setNonce(Math.floor(Math.random() * 100001));
|
|
} else if (randIds === RandomizeModes.NEVER_RANDOMIZE && currentDrawing.getNonce()) {
|
|
currentDrawing.clearNonce();
|
|
}
|
|
};
|
|
|
|
// Layer API Functions
|
|
|
|
/**
|
|
* Group: Layers
|
|
*/
|
|
|
|
var canvas_ = void 0;
|
|
var init$3 = function init(canvas) {
|
|
canvas_ = canvas;
|
|
};
|
|
|
|
// Updates layer system
|
|
var identifyLayers = function identifyLayers() {
|
|
leaveContext();
|
|
canvas_.getCurrentDrawing().identifyLayers();
|
|
};
|
|
|
|
/**
|
|
* Creates a new top-level layer in the drawing with the given name, sets the current layer
|
|
* to it, and then clears the selection. This function then calls the 'changed' handler.
|
|
* This is an undoable action.
|
|
* @param name - The given name
|
|
* @param hrService
|
|
*/
|
|
var createLayer = function createLayer(name, hrService) {
|
|
var newLayer = canvas_.getCurrentDrawing().createLayer(name, historyRecordingService(hrService));
|
|
canvas_.clearSelection();
|
|
canvas_.call('changed', [newLayer]);
|
|
};
|
|
|
|
/**
|
|
* Creates a new top-level layer in the drawing with the given name, copies all the current layer's contents
|
|
* to it, and then clears the selection. This function then calls the 'changed' handler.
|
|
* This is an undoable action.
|
|
* @param {string} name - The given name. If the layer name exists, a new name will be generated.
|
|
* @param {svgedit.history.HistoryRecordingService} hrService - History recording service
|
|
*/
|
|
var cloneLayer = function cloneLayer(name, hrService) {
|
|
// Clone the current layer and make the cloned layer the new current layer
|
|
var newLayer = canvas_.getCurrentDrawing().cloneLayer(name, historyRecordingService(hrService));
|
|
|
|
canvas_.clearSelection();
|
|
leaveContext();
|
|
canvas_.call('changed', [newLayer]);
|
|
};
|
|
|
|
/**
|
|
* Deletes the current layer from the drawing and then clears the selection. This function
|
|
* then calls the 'changed' handler. This is an undoable action.
|
|
*/
|
|
var deleteCurrentLayer = function deleteCurrentLayer() {
|
|
var currentLayer = canvas_.getCurrentDrawing().getCurrentLayer();
|
|
var _currentLayer = currentLayer,
|
|
nextSibling = _currentLayer.nextSibling;
|
|
|
|
var parent = currentLayer.parentNode;
|
|
currentLayer = canvas_.getCurrentDrawing().deleteCurrentLayer();
|
|
if (currentLayer) {
|
|
var batchCmd = new BatchCommand('Delete Layer');
|
|
// store in our Undo History
|
|
batchCmd.addSubCommand(new RemoveElementCommand(currentLayer, nextSibling, parent));
|
|
canvas_.addCommandToHistory(batchCmd);
|
|
canvas_.clearSelection();
|
|
canvas_.call('changed', [parent]);
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Sets the current layer. If the name is not a valid layer name, then this function returns
|
|
* false. Otherwise it returns true. This is not an undo-able action.
|
|
* @param name - The name of the layer you want to switch to.
|
|
*
|
|
* @returns true if the current layer was switched, otherwise false
|
|
*/
|
|
var setCurrentLayer = function setCurrentLayer(name) {
|
|
var result = canvas_.getCurrentDrawing().setCurrentLayer(toXml(name));
|
|
if (result) {
|
|
canvas_.clearSelection();
|
|
}
|
|
return result;
|
|
};
|
|
|
|
/**
|
|
* Renames the current layer. If the layer name is not valid (i.e. unique), then this function
|
|
* does nothing and returns false, otherwise it returns true. This is an undo-able action.
|
|
*
|
|
* @param newname - the new name you want to give the current layer. This name must be unique
|
|
* among all layer names.
|
|
* @returns {Boolean} Whether the rename succeeded
|
|
*/
|
|
var renameCurrentLayer = function renameCurrentLayer(newname) {
|
|
var drawing = canvas_.getCurrentDrawing();
|
|
var layer = drawing.getCurrentLayer();
|
|
if (layer) {
|
|
var result = drawing.setCurrentLayerName(newname, historyRecordingService());
|
|
if (result) {
|
|
canvas_.call('changed', [layer]);
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Changes the position of the current layer to the new value. If the new index is not valid,
|
|
* this function does nothing and returns false, otherwise it returns true. This is an
|
|
* undo-able action.
|
|
* @param newpos - The zero-based index of the new position of the layer. This should be between
|
|
* 0 and (number of layers - 1)
|
|
*
|
|
* @returns {Boolean} true if the current layer position was changed, false otherwise.
|
|
*/
|
|
var setCurrentLayerPosition = function setCurrentLayerPosition(newpos) {
|
|
var drawing = canvas_.getCurrentDrawing();
|
|
var result = drawing.setCurrentLayerPosition(newpos);
|
|
if (result) {
|
|
canvas_.addCommandToHistory(new MoveElementCommand(result.currentGroup, result.oldNextSibling, canvas_.getSVGContent()));
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Sets the visibility of the layer. If the layer name is not valid, this function return
|
|
* false, otherwise it returns true. This is an undo-able action.
|
|
* @param layername - The name of the layer to change the visibility
|
|
* @param {Boolean} bVisible - Whether the layer should be visible
|
|
* @returns {Boolean} true if the layer's visibility was set, false otherwise
|
|
*/
|
|
var setLayerVisibility = function setLayerVisibility(layername, bVisible) {
|
|
var drawing = canvas_.getCurrentDrawing();
|
|
var prevVisibility = drawing.getLayerVisibility(layername);
|
|
var layer = drawing.setLayerVisibility(layername, bVisible);
|
|
if (layer) {
|
|
var oldDisplay = prevVisibility ? 'inline' : 'none';
|
|
canvas_.addCommandToHistory(new ChangeElementCommand(layer, { display: oldDisplay }, 'Layer Visibility'));
|
|
} else {
|
|
return false;
|
|
}
|
|
|
|
if (layer === drawing.getCurrentLayer()) {
|
|
canvas_.clearSelection();
|
|
canvas_.pathActions.clear();
|
|
}
|
|
// call('changed', [selected]);
|
|
return true;
|
|
};
|
|
|
|
/**
|
|
* Moves the selected elements to layername. If the name is not a valid layer name, then false
|
|
* is returned. Otherwise it returns true. This is an undo-able action.
|
|
*
|
|
* @param layername - The name of the layer you want to which you want to move the selected elements
|
|
* @returns {Boolean} Whether the selected elements were moved to the layer.
|
|
*/
|
|
var moveSelectedToLayer = function moveSelectedToLayer(layername) {
|
|
// find the layer
|
|
var drawing = canvas_.getCurrentDrawing();
|
|
var layer = drawing.getLayerByName(layername);
|
|
if (!layer) {
|
|
return false;
|
|
}
|
|
|
|
var batchCmd = new BatchCommand('Move Elements to Layer');
|
|
|
|
// loop for each selected element and move it
|
|
var selElems = canvas_.getSelectedElements();
|
|
var i = selElems.length;
|
|
while (i--) {
|
|
var elem = selElems[i];
|
|
if (!elem) {
|
|
continue;
|
|
}
|
|
var oldNextSibling = elem.nextSibling;
|
|
// TODO: this is pretty brittle!
|
|
var oldLayer = elem.parentNode;
|
|
layer.appendChild(elem);
|
|
batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldLayer));
|
|
}
|
|
|
|
canvas_.addCommandToHistory(batchCmd);
|
|
|
|
return true;
|
|
};
|
|
|
|
var mergeLayer = function mergeLayer(hrService) {
|
|
canvas_.getCurrentDrawing().mergeLayer(historyRecordingService(hrService));
|
|
canvas_.clearSelection();
|
|
leaveContext();
|
|
canvas_.changeSvgcontent();
|
|
};
|
|
|
|
var mergeAllLayers = function mergeAllLayers(hrService) {
|
|
canvas_.getCurrentDrawing().mergeAllLayers(historyRecordingService(hrService));
|
|
canvas_.clearSelection();
|
|
leaveContext();
|
|
canvas_.changeSvgcontent();
|
|
};
|
|
|
|
// Return from a group context to the regular kind, make any previously
|
|
// disabled elements enabled again
|
|
var leaveContext = function leaveContext() {
|
|
var len = disabledElems.length;
|
|
if (len) {
|
|
for (var i = 0; i < len; i++) {
|
|
var elem = disabledElems[i];
|
|
var orig = canvas_.elData(elem, 'orig_opac');
|
|
if (orig !== 1) {
|
|
elem.setAttribute('opacity', orig);
|
|
} else {
|
|
elem.removeAttribute('opacity');
|
|
}
|
|
elem.setAttribute('style', 'pointer-events: inherit');
|
|
}
|
|
disabledElems = [];
|
|
canvas_.clearSelection(true);
|
|
canvas_.call('contextset', null);
|
|
}
|
|
canvas_.setCurrentGroup(null);
|
|
};
|
|
|
|
// Set the current context (for in-group editing)
|
|
var setContext = function setContext(elem) {
|
|
leaveContext();
|
|
if (typeof elem === 'string') {
|
|
elem = getElem(elem);
|
|
}
|
|
|
|
// Edit inside this group
|
|
canvas_.setCurrentGroup(elem);
|
|
|
|
// Disable other elements
|
|
$$5(elem).parentsUntil('#svgcontent').andSelf().siblings().each(function () {
|
|
var opac = this.getAttribute('opacity') || 1;
|
|
// Store the original's opacity
|
|
canvas_.elData(this, 'orig_opac', opac);
|
|
this.setAttribute('opacity', opac * 0.33);
|
|
this.setAttribute('style', 'pointer-events: none');
|
|
disabledElems.push(this);
|
|
});
|
|
|
|
canvas_.clearSelection();
|
|
canvas_.call('contextset', canvas_.getCurrentGroup());
|
|
};
|
|
|
|
var draw = /*#__PURE__*/Object.freeze({
|
|
Drawing: Drawing,
|
|
randomizeIds: randomizeIds,
|
|
init: init$3,
|
|
identifyLayers: identifyLayers,
|
|
createLayer: createLayer,
|
|
cloneLayer: cloneLayer,
|
|
deleteCurrentLayer: deleteCurrentLayer,
|
|
setCurrentLayer: setCurrentLayer,
|
|
renameCurrentLayer: renameCurrentLayer,
|
|
setCurrentLayerPosition: setCurrentLayerPosition,
|
|
setLayerVisibility: setLayerVisibility,
|
|
moveSelectedToLayer: moveSelectedToLayer,
|
|
mergeLayer: mergeLayer,
|
|
mergeAllLayers: mergeAllLayers,
|
|
leaveContext: leaveContext,
|
|
setContext: setContext,
|
|
Layer: Layer
|
|
});
|
|
|
|
/**
|
|
* Package: svgedit.sanitize
|
|
*
|
|
* Licensed under the MIT License
|
|
*
|
|
* Copyright(c) 2010 Alexis Deveria
|
|
* Copyright(c) 2010 Jeff Schiller
|
|
*/
|
|
|
|
var REVERSE_NS = getReverseNS();
|
|
|
|
// this defines which elements and attributes that we support
|
|
var svgWhiteList_ = {
|
|
// SVG Elements
|
|
a: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'mask', 'opacity', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'xlink:href', 'xlink:title'],
|
|
circle: ['class', 'clip-path', 'clip-rule', 'cx', 'cy', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'mask', 'opacity', 'r', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform'],
|
|
clipPath: ['class', 'clipPathUnits', 'id'],
|
|
defs: [],
|
|
style: ['type'],
|
|
desc: [],
|
|
ellipse: ['class', 'clip-path', 'clip-rule', 'cx', 'cy', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'mask', 'opacity', 'requiredFeatures', 'rx', 'ry', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform'],
|
|
feGaussianBlur: ['class', 'color-interpolation-filters', 'id', 'requiredFeatures', 'stdDeviation'],
|
|
filter: ['class', 'color-interpolation-filters', 'filterRes', 'filterUnits', 'height', 'id', 'primitiveUnits', 'requiredFeatures', 'width', 'x', 'xlink:href', 'y'],
|
|
foreignObject: ['class', 'font-size', 'height', 'id', 'opacity', 'requiredFeatures', 'style', 'transform', 'width', 'x', 'y'],
|
|
g: ['class', 'clip-path', 'clip-rule', 'id', 'display', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'font-family', 'font-size', 'font-style', 'font-weight', 'text-anchor'],
|
|
image: ['class', 'clip-path', 'clip-rule', 'filter', 'height', 'id', 'mask', 'opacity', 'requiredFeatures', 'style', 'systemLanguage', 'transform', 'width', 'x', 'xlink:href', 'xlink:title', 'y'],
|
|
line: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'x1', 'x2', 'y1', 'y2'],
|
|
linearGradient: ['class', 'id', 'gradientTransform', 'gradientUnits', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'x1', 'x2', 'xlink:href', 'y1', 'y2'],
|
|
marker: ['id', 'class', 'markerHeight', 'markerUnits', 'markerWidth', 'orient', 'preserveAspectRatio', 'refX', 'refY', 'systemLanguage', 'viewBox'],
|
|
mask: ['class', 'height', 'id', 'maskContentUnits', 'maskUnits', 'width', 'x', 'y'],
|
|
metadata: ['class', 'id'],
|
|
path: ['class', 'clip-path', 'clip-rule', 'd', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform'],
|
|
pattern: ['class', 'height', 'id', 'patternContentUnits', 'patternTransform', 'patternUnits', 'requiredFeatures', 'style', 'systemLanguage', 'viewBox', 'width', 'x', 'xlink:href', 'y'],
|
|
polygon: ['class', 'clip-path', 'clip-rule', 'id', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'class', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform'],
|
|
polyline: ['class', 'clip-path', 'clip-rule', 'id', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform'],
|
|
radialGradient: ['class', 'cx', 'cy', 'fx', 'fy', 'gradientTransform', 'gradientUnits', 'id', 'r', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'xlink:href'],
|
|
rect: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'id', 'mask', 'opacity', 'requiredFeatures', 'rx', 'ry', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'width', 'x', 'y'],
|
|
stop: ['class', 'id', 'offset', 'requiredFeatures', 'stop-color', 'stop-opacity', 'style', 'systemLanguage'],
|
|
svg: ['class', 'clip-path', 'clip-rule', 'filter', 'id', 'height', 'mask', 'preserveAspectRatio', 'requiredFeatures', 'style', 'systemLanguage', 'viewBox', 'width', 'x', 'xmlns', 'xmlns:se', 'xmlns:xlink', 'y'],
|
|
switch: ['class', 'id', 'requiredFeatures', 'systemLanguage'],
|
|
symbol: ['class', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'opacity', 'preserveAspectRatio', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'viewBox'],
|
|
text: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'text-anchor', 'transform', 'x', 'xml:space', 'y'],
|
|
textPath: ['class', 'id', 'method', 'requiredFeatures', 'spacing', 'startOffset', 'style', 'systemLanguage', 'transform', 'xlink:href'],
|
|
title: [],
|
|
tspan: ['class', 'clip-path', 'clip-rule', 'dx', 'dy', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'rotate', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'text-anchor', 'textLength', 'transform', 'x', 'xml:space', 'y'],
|
|
use: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'id', 'mask', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'transform', 'width', 'x', 'xlink:href', 'y'],
|
|
|
|
// MathML Elements
|
|
annotation: ['encoding'],
|
|
'annotation-xml': ['encoding'],
|
|
maction: ['actiontype', 'other', 'selection'],
|
|
math: ['class', 'id', 'display', 'xmlns'],
|
|
menclose: ['notation'],
|
|
merror: [],
|
|
mfrac: ['linethickness'],
|
|
mi: ['mathvariant'],
|
|
mmultiscripts: [],
|
|
mn: [],
|
|
mo: ['fence', 'lspace', 'maxsize', 'minsize', 'rspace', 'stretchy'],
|
|
mover: [],
|
|
mpadded: ['lspace', 'width', 'height', 'depth', 'voffset'],
|
|
mphantom: [],
|
|
mprescripts: [],
|
|
mroot: [],
|
|
mrow: ['xlink:href', 'xlink:type', 'xmlns:xlink'],
|
|
mspace: ['depth', 'height', 'width'],
|
|
msqrt: [],
|
|
mstyle: ['displaystyle', 'mathbackground', 'mathcolor', 'mathvariant', 'scriptlevel'],
|
|
msub: [],
|
|
msubsup: [],
|
|
msup: [],
|
|
mtable: ['align', 'columnalign', 'columnlines', 'columnspacing', 'displaystyle', 'equalcolumns', 'equalrows', 'frame', 'rowalign', 'rowlines', 'rowspacing', 'width'],
|
|
mtd: ['columnalign', 'columnspan', 'rowalign', 'rowspan'],
|
|
mtext: [],
|
|
mtr: ['columnalign', 'rowalign'],
|
|
munder: [],
|
|
munderover: [],
|
|
none: [],
|
|
semantics: []
|
|
};
|
|
|
|
// Produce a Namespace-aware version of svgWhitelist
|
|
var svgWhiteListNS_ = {};
|
|
Object.entries(svgWhiteList_).forEach(function (_ref) {
|
|
var _ref2 = slicedToArray(_ref, 2),
|
|
elt = _ref2[0],
|
|
atts = _ref2[1];
|
|
|
|
var attNS = {};
|
|
Object.entries(atts).forEach(function (_ref3) {
|
|
var _ref4 = slicedToArray(_ref3, 2),
|
|
i = _ref4[0],
|
|
att = _ref4[1];
|
|
|
|
if (att.includes(':')) {
|
|
var v = att.split(':');
|
|
attNS[v[1]] = NS[v[0].toUpperCase()];
|
|
} else {
|
|
attNS[att] = att === 'xmlns' ? NS.XMLNS : null;
|
|
}
|
|
});
|
|
svgWhiteListNS_[elt] = attNS;
|
|
});
|
|
|
|
/**
|
|
* Sanitizes the input node and its children
|
|
* It only keeps what is allowed from our whitelist defined above
|
|
* @param node - The DOM element to be checked (we'll also check its children)
|
|
*/
|
|
var sanitizeSvg = function sanitizeSvg(node) {
|
|
// Cleanup text nodes
|
|
if (node.nodeType === 3) {
|
|
// 3 === TEXT_NODE
|
|
// Trim whitespace
|
|
node.nodeValue = node.nodeValue.replace(/^\s+|\s+$/g, '');
|
|
// Remove if empty
|
|
if (!node.nodeValue.length) {
|
|
node.parentNode.removeChild(node);
|
|
}
|
|
}
|
|
|
|
// We only care about element nodes.
|
|
// Automatically return for all non-element nodes, such as comments, etc.
|
|
if (node.nodeType !== 1) {
|
|
// 1 == ELEMENT_NODE
|
|
return;
|
|
}
|
|
|
|
var doc = node.ownerDocument;
|
|
var parent = node.parentNode;
|
|
// can parent ever be null here? I think the root node's parent is the document...
|
|
if (!doc || !parent) {
|
|
return;
|
|
}
|
|
|
|
var allowedAttrs = svgWhiteList_[node.nodeName];
|
|
var allowedAttrsNS = svgWhiteListNS_[node.nodeName];
|
|
// if this element is supported, sanitize it
|
|
if (typeof allowedAttrs !== 'undefined') {
|
|
var seAttrs = [];
|
|
var i = node.attributes.length;
|
|
while (i--) {
|
|
// if the attribute is not in our whitelist, then remove it
|
|
// could use jQuery's inArray(), but I don't know if that's any better
|
|
var attr = node.attributes.item(i);
|
|
var attrName = attr.nodeName;
|
|
var attrLocalName = attr.localName;
|
|
var attrNsURI = attr.namespaceURI;
|
|
// Check that an attribute with the correct localName in the correct namespace is on
|
|
// our whitelist or is a namespace declaration for one of our allowed namespaces
|
|
if (!(allowedAttrsNS.hasOwnProperty(attrLocalName) && attrNsURI === allowedAttrsNS[attrLocalName] && attrNsURI !== NS.XMLNS) && !(attrNsURI === NS.XMLNS && REVERSE_NS[attr.value])) {
|
|
// TODO(codedread): Programmatically add the se: attributes to the NS-aware whitelist.
|
|
// Bypassing the whitelist to allow se: prefixes.
|
|
// Is there a more appropriate way to do this?
|
|
if (attrName.startsWith('se:') || attrName.startsWith('data-')) {
|
|
seAttrs.push([attrName, attr.value]);
|
|
}
|
|
node.removeAttributeNS(attrNsURI, attrLocalName);
|
|
}
|
|
|
|
// Add spaces before negative signs where necessary
|
|
if (isGecko()) {
|
|
switch (attrName) {
|
|
case 'transform':
|
|
case 'gradientTransform':
|
|
case 'patternTransform':
|
|
var val = attr.value.replace(/(\d)-/g, '$1 -');
|
|
node.setAttribute(attrName, val);
|
|
break;
|
|
}
|
|
}
|
|
|
|
// For the style attribute, rewrite it in terms of XML presentational attributes
|
|
if (attrName === 'style') {
|
|
var props = attr.value.split(';');
|
|
var p = props.length;
|
|
while (p--) {
|
|
var _props$p$split = props[p].split(':'),
|
|
_props$p$split2 = slicedToArray(_props$p$split, 2),
|
|
name = _props$p$split2[0],
|
|
_val = _props$p$split2[1];
|
|
|
|
var styleAttrName = (name || '').trim();
|
|
var styleAttrVal = (_val || '').trim();
|
|
// Now check that this attribute is supported
|
|
if (allowedAttrs.includes(styleAttrName)) {
|
|
node.setAttribute(styleAttrName, styleAttrVal);
|
|
}
|
|
}
|
|
node.removeAttribute('style');
|
|
}
|
|
}
|
|
|
|
Object.values(seAttrs).forEach(function (attr) {
|
|
node.setAttributeNS(NS.SE, attr[0], attr[1]);
|
|
});
|
|
|
|
// for some elements that have a xlink:href, ensure the URI refers to a local element
|
|
// (but not for links)
|
|
var href = getHref(node);
|
|
if (href && ['filter', 'linearGradient', 'pattern', 'radialGradient', 'textPath', 'use'].includes(node.nodeName)) {
|
|
// TODO: we simply check if the first character is a #, is this bullet-proof?
|
|
if (href[0] !== '#') {
|
|
// remove the attribute (but keep the element)
|
|
setHref(node, '');
|
|
node.removeAttributeNS(NS.XLINK, 'href');
|
|
}
|
|
}
|
|
|
|
// Safari crashes on a <use> without a xlink:href, so we just remove the node here
|
|
if (node.nodeName === 'use' && !getHref(node)) {
|
|
parent.removeChild(node);
|
|
return;
|
|
}
|
|
// if the element has attributes pointing to a non-local reference,
|
|
// need to remove the attribute
|
|
Object.values(['clip-path', 'fill', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'stroke'], function (attr) {
|
|
var val = node.getAttribute(attr);
|
|
if (val) {
|
|
val = getUrlFromAttr(val);
|
|
// simply check for first character being a '#'
|
|
if (val && val[0] !== '#') {
|
|
node.setAttribute(attr, '');
|
|
node.removeAttribute(attr);
|
|
}
|
|
}
|
|
});
|
|
|
|
// recurse to children
|
|
i = node.childNodes.length;
|
|
while (i--) {
|
|
sanitizeSvg(node.childNodes.item(i));
|
|
}
|
|
// else (element not supported), remove it
|
|
} else {
|
|
// remove all children from this node and insert them before this node
|
|
// FIXME: in the case of animation elements this will hardly ever be correct
|
|
var children = [];
|
|
while (node.hasChildNodes()) {
|
|
children.push(parent.insertBefore(node.firstChild, node));
|
|
}
|
|
|
|
// remove this node from the document altogether
|
|
parent.removeChild(node);
|
|
|
|
// call sanitizeSvg on each of those children
|
|
var _i = children.length;
|
|
while (_i--) {
|
|
sanitizeSvg(children[_i]);
|
|
}
|
|
}
|
|
};
|
|
|
|
/* globals jQuery */
|
|
|
|
var $$6 = jQuery;
|
|
|
|
// this is how we map paths to our preferred relative segment types
|
|
var pathMap$1 = [0, 'z', 'M', 'm', 'L', 'l', 'C', 'c', 'Q', 'q', 'A', 'a', 'H', 'h', 'V', 'v', 'S', 's', 'T', 't'];
|
|
|
|
/**
|
|
* @typedef editorContext
|
|
* @type {?object}
|
|
* @property {function} getGridSnapping
|
|
* @property {function} getDrawing
|
|
*/
|
|
var editorContext_$2 = null;
|
|
|
|
/**
|
|
* @param {editorContext} editorContext
|
|
*/
|
|
var init$4 = function init(editorContext) {
|
|
editorContext_$2 = editorContext;
|
|
};
|
|
|
|
/**
|
|
* Applies coordinate changes to an element based on the given matrix
|
|
* @param {Element} selected - DOM element to be changed
|
|
* @param {Object} changes - Object with changes to be remapped
|
|
* @param {SVGMatrix} m - Matrix object to use for remapping coordinates
|
|
*/
|
|
var remapElement = function remapElement(selected, changes, m) {
|
|
var remap = function remap(x, y) {
|
|
return transformPoint(x, y, m);
|
|
},
|
|
scalew = function scalew(w) {
|
|
return m.a * w;
|
|
},
|
|
scaleh = function scaleh(h) {
|
|
return m.d * h;
|
|
},
|
|
doSnapping = editorContext_$2.getGridSnapping() && selected.parentNode.parentNode.localName === 'svg',
|
|
finishUp = function finishUp() {
|
|
if (doSnapping) {
|
|
for (var o in changes) {
|
|
changes[o] = snapToGrid(changes[o]);
|
|
}
|
|
}
|
|
assignAttributes(selected, changes, 1000, true);
|
|
},
|
|
box = getBBox(selected);
|
|
|
|
for (var i = 0; i < 2; i++) {
|
|
var type = i === 0 ? 'fill' : 'stroke';
|
|
var attrVal = selected.getAttribute(type);
|
|
if (attrVal && attrVal.startsWith('url(')) {
|
|
if (m.a < 0 || m.d < 0) {
|
|
var grad = getRefElem(attrVal);
|
|
var newgrad = grad.cloneNode(true);
|
|
if (m.a < 0) {
|
|
// flip x
|
|
var x1 = newgrad.getAttribute('x1');
|
|
var x2 = newgrad.getAttribute('x2');
|
|
newgrad.setAttribute('x1', -(x1 - 1));
|
|
newgrad.setAttribute('x2', -(x2 - 1));
|
|
}
|
|
|
|
if (m.d < 0) {
|
|
// flip y
|
|
var y1 = newgrad.getAttribute('y1');
|
|
var y2 = newgrad.getAttribute('y2');
|
|
newgrad.setAttribute('y1', -(y1 - 1));
|
|
newgrad.setAttribute('y2', -(y2 - 1));
|
|
}
|
|
newgrad.id = editorContext_$2.getDrawing().getNextId();
|
|
findDefs().appendChild(newgrad);
|
|
selected.setAttribute(type, 'url(#' + newgrad.id + ')');
|
|
}
|
|
|
|
// Not really working :(
|
|
// if (selected.tagName === 'path') {
|
|
// reorientGrads(selected, m);
|
|
// }
|
|
}
|
|
}
|
|
|
|
var elName = selected.tagName;
|
|
if (elName === 'g' || elName === 'text' || elName === 'tspan' || elName === 'use') {
|
|
// if it was a translate, then just update x,y
|
|
if (m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && (m.e !== 0 || m.f !== 0)) {
|
|
// [T][M] = [M][T']
|
|
// therefore [T'] = [M_inv][T][M]
|
|
var existing = transformListToTransform(selected).matrix,
|
|
tNew = matrixMultiply(existing.inverse(), m, existing);
|
|
changes.x = parseFloat(changes.x) + tNew.e;
|
|
changes.y = parseFloat(changes.y) + tNew.f;
|
|
} else {
|
|
// we just absorb all matrices into the element and don't do any remapping
|
|
var chlist = getTransformList(selected);
|
|
var mt = editorContext_$2.getSVGRoot().createSVGTransform();
|
|
mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m));
|
|
chlist.clear();
|
|
chlist.appendItem(mt);
|
|
}
|
|
}
|
|
|
|
// now we have a set of changes and an applied reduced transform list
|
|
// we apply the changes directly to the DOM
|
|
switch (elName) {
|
|
case 'foreignObject':
|
|
case 'rect':
|
|
case 'image':
|
|
{
|
|
// Allow images to be inverted (give them matrix when flipped)
|
|
if (elName === 'image' && (m.a < 0 || m.d < 0)) {
|
|
// Convert to matrix
|
|
var _chlist = getTransformList(selected);
|
|
var _mt = editorContext_$2.getSVGRoot().createSVGTransform();
|
|
_mt.setMatrix(matrixMultiply(transformListToTransform(_chlist).matrix, m));
|
|
_chlist.clear();
|
|
_chlist.appendItem(_mt);
|
|
} else {
|
|
var pt1 = remap(changes.x, changes.y);
|
|
changes.width = scalew(changes.width);
|
|
changes.height = scaleh(changes.height);
|
|
changes.x = pt1.x + Math.min(0, changes.width);
|
|
changes.y = pt1.y + Math.min(0, changes.height);
|
|
changes.width = Math.abs(changes.width);
|
|
changes.height = Math.abs(changes.height);
|
|
}
|
|
finishUp();
|
|
break;
|
|
}case 'ellipse':
|
|
{
|
|
var c = remap(changes.cx, changes.cy);
|
|
changes.cx = c.x;
|
|
changes.cy = c.y;
|
|
changes.rx = scalew(changes.rx);
|
|
changes.ry = scaleh(changes.ry);
|
|
changes.rx = Math.abs(changes.rx);
|
|
changes.ry = Math.abs(changes.ry);
|
|
finishUp();
|
|
break;
|
|
}case 'circle':
|
|
{
|
|
var _c = remap(changes.cx, changes.cy);
|
|
changes.cx = _c.x;
|
|
changes.cy = _c.y;
|
|
// take the minimum of the new selected box's dimensions for the new circle radius
|
|
var tbox = transformBox(box.x, box.y, box.width, box.height, m);
|
|
var w = tbox.tr.x - tbox.tl.x,
|
|
h = tbox.bl.y - tbox.tl.y;
|
|
changes.r = Math.min(w / 2, h / 2);
|
|
|
|
if (changes.r) {
|
|
changes.r = Math.abs(changes.r);
|
|
}
|
|
finishUp();
|
|
break;
|
|
}case 'line':
|
|
{
|
|
var _pt = remap(changes.x1, changes.y1);
|
|
var pt2 = remap(changes.x2, changes.y2);
|
|
changes.x1 = _pt.x;
|
|
changes.y1 = _pt.y;
|
|
changes.x2 = pt2.x;
|
|
changes.y2 = pt2.y;
|
|
} // Fallthrough
|
|
case 'text':
|
|
case 'tspan':
|
|
case 'use':
|
|
{
|
|
finishUp();
|
|
break;
|
|
}case 'g':
|
|
{
|
|
var gsvg = $$6(selected).data('gsvg');
|
|
if (gsvg) {
|
|
assignAttributes(gsvg, changes, 1000, true);
|
|
}
|
|
break;
|
|
}case 'polyline':
|
|
case 'polygon':
|
|
{
|
|
var len = changes.points.length;
|
|
for (var _i = 0; _i < len; ++_i) {
|
|
var pt = changes.points[_i];
|
|
|
|
var _remap = remap(pt.x, pt.y),
|
|
x = _remap.x,
|
|
y = _remap.y;
|
|
|
|
changes.points[_i].x = x;
|
|
changes.points[_i].y = y;
|
|
}
|
|
|
|
// const len = changes.points.length;
|
|
var pstr = '';
|
|
for (var _i2 = 0; _i2 < len; ++_i2) {
|
|
var _pt2 = changes.points[_i2];
|
|
pstr += _pt2.x + ',' + _pt2.y + ' ';
|
|
}
|
|
selected.setAttribute('points', pstr);
|
|
break;
|
|
}case 'path':
|
|
{
|
|
var segList = selected.pathSegList;
|
|
var _len = segList.numberOfItems;
|
|
changes.d = [];
|
|
for (var _i3 = 0; _i3 < _len; ++_i3) {
|
|
var seg = segList.getItem(_i3);
|
|
changes.d[_i3] = {
|
|
type: seg.pathSegType,
|
|
x: seg.x,
|
|
y: seg.y,
|
|
x1: seg.x1,
|
|
y1: seg.y1,
|
|
x2: seg.x2,
|
|
y2: seg.y2,
|
|
r1: seg.r1,
|
|
r2: seg.r2,
|
|
angle: seg.angle,
|
|
largeArcFlag: seg.largeArcFlag,
|
|
sweepFlag: seg.sweepFlag
|
|
};
|
|
}
|
|
|
|
_len = changes.d.length;
|
|
var firstseg = changes.d[0],
|
|
currentpt = remap(firstseg.x, firstseg.y);
|
|
changes.d[0].x = currentpt.x;
|
|
changes.d[0].y = currentpt.y;
|
|
for (var _i4 = 1; _i4 < _len; ++_i4) {
|
|
var _seg = changes.d[_i4];
|
|
var _type = _seg.type;
|
|
// if absolute or first segment, we want to remap x, y, x1, y1, x2, y2
|
|
// if relative, we want to scalew, scaleh
|
|
|
|
if (_type % 2 === 0) {
|
|
// absolute
|
|
var thisx = _seg.x !== undefined ? _seg.x : currentpt.x,
|
|
// for V commands
|
|
thisy = _seg.y !== undefined ? _seg.y : currentpt.y; // for H commands
|
|
var _pt3 = remap(thisx, thisy);
|
|
var _pt4 = remap(_seg.x1, _seg.y1);
|
|
var _pt5 = remap(_seg.x2, _seg.y2);
|
|
_seg.x = _pt3.x;
|
|
_seg.y = _pt3.y;
|
|
_seg.x1 = _pt4.x;
|
|
_seg.y1 = _pt4.y;
|
|
_seg.x2 = _pt5.x;
|
|
_seg.y2 = _pt5.y;
|
|
_seg.r1 = scalew(_seg.r1);
|
|
_seg.r2 = scaleh(_seg.r2);
|
|
} else {
|
|
// relative
|
|
_seg.x = scalew(_seg.x);
|
|
_seg.y = scaleh(_seg.y);
|
|
_seg.x1 = scalew(_seg.x1);
|
|
_seg.y1 = scaleh(_seg.y1);
|
|
_seg.x2 = scalew(_seg.x2);
|
|
_seg.y2 = scaleh(_seg.y2);
|
|
_seg.r1 = scalew(_seg.r1);
|
|
_seg.r2 = scaleh(_seg.r2);
|
|
}
|
|
} // for each segment
|
|
|
|
var dstr = '';
|
|
_len = changes.d.length;
|
|
for (var _i5 = 0; _i5 < _len; ++_i5) {
|
|
var _seg2 = changes.d[_i5];
|
|
var _type2 = _seg2.type;
|
|
|
|
dstr += pathMap$1[_type2];
|
|
switch (_type2) {
|
|
case 13: // relative horizontal line (h)
|
|
case 12:
|
|
// absolute horizontal line (H)
|
|
dstr += _seg2.x + ' ';
|
|
break;
|
|
case 15: // relative vertical line (v)
|
|
case 14:
|
|
// absolute vertical line (V)
|
|
dstr += _seg2.y + ' ';
|
|
break;
|
|
case 3: // relative move (m)
|
|
case 5: // relative line (l)
|
|
case 19: // relative smooth quad (t)
|
|
case 2: // absolute move (M)
|
|
case 4: // absolute line (L)
|
|
case 18:
|
|
// absolute smooth quad (T)
|
|
dstr += _seg2.x + ',' + _seg2.y + ' ';
|
|
break;
|
|
case 7: // relative cubic (c)
|
|
case 6:
|
|
// absolute cubic (C)
|
|
dstr += _seg2.x1 + ',' + _seg2.y1 + ' ' + _seg2.x2 + ',' + _seg2.y2 + ' ' + _seg2.x + ',' + _seg2.y + ' ';
|
|
break;
|
|
case 9: // relative quad (q)
|
|
case 8:
|
|
// absolute quad (Q)
|
|
dstr += _seg2.x1 + ',' + _seg2.y1 + ' ' + _seg2.x + ',' + _seg2.y + ' ';
|
|
break;
|
|
case 11: // relative elliptical arc (a)
|
|
case 10:
|
|
// absolute elliptical arc (A)
|
|
dstr += _seg2.r1 + ',' + _seg2.r2 + ' ' + _seg2.angle + ' ' + +_seg2.largeArcFlag + ' ' + +_seg2.sweepFlag + ' ' + _seg2.x + ',' + _seg2.y + ' ';
|
|
break;
|
|
case 17: // relative smooth cubic (s)
|
|
case 16:
|
|
// absolute smooth cubic (S)
|
|
dstr += _seg2.x2 + ',' + _seg2.y2 + ' ' + _seg2.x + ',' + _seg2.y + ' ';
|
|
break;
|
|
}
|
|
}
|
|
|
|
selected.setAttribute('d', dstr);
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
/* globals jQuery */
|
|
|
|
var $$7 = jqPluginSVG(jQuery);
|
|
|
|
var context_ = void 0;
|
|
|
|
/**
|
|
* @param editorContext
|
|
*/
|
|
var init$5 = function init$$1(editorContext) {
|
|
context_ = editorContext;
|
|
};
|
|
|
|
/**
|
|
* Updates a <clipPath>s values based on the given translation of an element
|
|
* @param attr - The clip-path attribute value with the clipPath's ID
|
|
* @param tx - The translation's x value
|
|
* @param ty - The translation's y value
|
|
*/
|
|
var updateClipPath = function updateClipPath(attr, tx, ty) {
|
|
var path = getRefElem(attr).firstChild;
|
|
var cpXform = getTransformList(path);
|
|
var newxlate = context_.getSVGRoot().createSVGTransform();
|
|
newxlate.setTranslate(tx, ty);
|
|
|
|
cpXform.appendItem(newxlate);
|
|
|
|
// Update clipPath's dimensions
|
|
recalculateDimensions(path);
|
|
};
|
|
|
|
/**
|
|
* Decides the course of action based on the element's transform list
|
|
* @param selected - The DOM element to recalculate
|
|
* @returns Undo command object with the resulting change
|
|
*/
|
|
var recalculateDimensions = function recalculateDimensions(selected) {
|
|
if (selected == null) {
|
|
return null;
|
|
}
|
|
|
|
// Firefox Issue - 1081
|
|
if (selected.nodeName === 'svg' && navigator.userAgent.includes('Firefox/20')) {
|
|
return null;
|
|
}
|
|
|
|
var svgroot = context_.getSVGRoot();
|
|
var tlist = getTransformList(selected);
|
|
|
|
// remove any unnecessary transforms
|
|
if (tlist && tlist.numberOfItems > 0) {
|
|
var k = tlist.numberOfItems;
|
|
var noi = k;
|
|
while (k--) {
|
|
var xform = tlist.getItem(k);
|
|
if (xform.type === 0) {
|
|
tlist.removeItem(k);
|
|
// remove identity matrices
|
|
} else if (xform.type === 1) {
|
|
if (isIdentity(xform.matrix)) {
|
|
if (noi === 1) {
|
|
// Overcome Chrome bug (though only when noi is 1) with
|
|
// `removeItem` preventing `removeAttribute` from
|
|
// subsequently working
|
|
// See https://bugs.chromium.org/p/chromium/issues/detail?id=843901
|
|
selected.removeAttribute('transform');
|
|
return null;
|
|
}
|
|
tlist.removeItem(k);
|
|
}
|
|
// remove zero-degree rotations
|
|
} else if (xform.type === 4) {
|
|
if (xform.angle === 0) {
|
|
tlist.removeItem(k);
|
|
}
|
|
}
|
|
}
|
|
// End here if all it has is a rotation
|
|
if (tlist.numberOfItems === 1 && getRotationAngle(selected)) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// if this element had no transforms, we are done
|
|
if (!tlist || tlist.numberOfItems === 0) {
|
|
// Chrome apparently had a bug that requires clearing the attribute first.
|
|
selected.setAttribute('transform', '');
|
|
// However, this still next line currently doesn't work at all in Chrome
|
|
selected.removeAttribute('transform');
|
|
// selected.transform.baseVal.clear(); // Didn't help for Chrome bug
|
|
return null;
|
|
}
|
|
|
|
// TODO: Make this work for more than 2
|
|
if (tlist) {
|
|
var mxs = [];
|
|
var _k = tlist.numberOfItems;
|
|
while (_k--) {
|
|
var _xform = tlist.getItem(_k);
|
|
if (_xform.type === 1) {
|
|
mxs.push([_xform.matrix, _k]);
|
|
} else if (mxs.length) {
|
|
mxs = [];
|
|
}
|
|
}
|
|
if (mxs.length === 2) {
|
|
var mNew = svgroot.createSVGTransformFromMatrix(matrixMultiply(mxs[1][0], mxs[0][0]));
|
|
tlist.removeItem(mxs[0][1]);
|
|
tlist.removeItem(mxs[1][1]);
|
|
tlist.insertItemBefore(mNew, mxs[1][1]);
|
|
}
|
|
|
|
// combine matrix + translate
|
|
_k = tlist.numberOfItems;
|
|
if (_k >= 2 && tlist.getItem(_k - 2).type === 1 && tlist.getItem(_k - 1).type === 2) {
|
|
var mt = svgroot.createSVGTransform();
|
|
|
|
var m = matrixMultiply(tlist.getItem(_k - 2).matrix, tlist.getItem(_k - 1).matrix);
|
|
mt.setMatrix(m);
|
|
tlist.removeItem(_k - 2);
|
|
tlist.removeItem(_k - 2);
|
|
tlist.appendItem(mt);
|
|
}
|
|
}
|
|
|
|
// If it still has a single [M] or [R][M], return null too (prevents BatchCommand from being returned).
|
|
switch (selected.tagName) {
|
|
// Ignore these elements, as they can absorb the [M]
|
|
case 'line':
|
|
case 'polyline':
|
|
case 'polygon':
|
|
case 'path':
|
|
break;
|
|
default:
|
|
if (tlist.numberOfItems === 1 && tlist.getItem(0).type === 1 || tlist.numberOfItems === 2 && tlist.getItem(0).type === 1 && tlist.getItem(0).type === 4) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// Grouped SVG element
|
|
var gsvg = $$7(selected).data('gsvg');
|
|
|
|
// we know we have some transforms, so set up return variable
|
|
var batchCmd = new BatchCommand('Transform');
|
|
|
|
// store initial values that will be affected by reducing the transform list
|
|
var changes = {};
|
|
var initial = null;
|
|
var attrs = [];
|
|
switch (selected.tagName) {
|
|
case 'line':
|
|
attrs = ['x1', 'y1', 'x2', 'y2'];
|
|
break;
|
|
case 'circle':
|
|
attrs = ['cx', 'cy', 'r'];
|
|
break;
|
|
case 'ellipse':
|
|
attrs = ['cx', 'cy', 'rx', 'ry'];
|
|
break;
|
|
case 'foreignObject':
|
|
case 'rect':
|
|
case 'image':
|
|
attrs = ['width', 'height', 'x', 'y'];
|
|
break;
|
|
case 'use':
|
|
case 'text':
|
|
case 'tspan':
|
|
attrs = ['x', 'y'];
|
|
break;
|
|
case 'polygon':
|
|
case 'polyline':
|
|
{
|
|
initial = {};
|
|
initial.points = selected.getAttribute('points');
|
|
var list = selected.points;
|
|
var len = list.numberOfItems;
|
|
changes.points = new Array(len);
|
|
for (var i = 0; i < len; ++i) {
|
|
var pt = list.getItem(i);
|
|
changes.points[i] = { x: pt.x, y: pt.y };
|
|
}
|
|
break;
|
|
}case 'path':
|
|
initial = {};
|
|
initial.d = selected.getAttribute('d');
|
|
changes.d = selected.getAttribute('d');
|
|
break;
|
|
} // switch on element type to get initial values
|
|
|
|
if (attrs.length) {
|
|
changes = $$7(selected).attr(attrs);
|
|
$$7.each(changes, function (attr, val) {
|
|
changes[attr] = convertToNum(attr, val);
|
|
});
|
|
} else if (gsvg) {
|
|
// GSVG exception
|
|
changes = {
|
|
x: $$7(gsvg).attr('x') || 0,
|
|
y: $$7(gsvg).attr('y') || 0
|
|
};
|
|
}
|
|
|
|
// if we haven't created an initial array in polygon/polyline/path, then
|
|
// make a copy of initial values and include the transform
|
|
if (initial == null) {
|
|
initial = $$7.extend(true, {}, changes);
|
|
$$7.each(initial, function (attr, val) {
|
|
initial[attr] = convertToNum(attr, val);
|
|
});
|
|
}
|
|
// save the start transform value too
|
|
initial.transform = context_.getStartTransform() || '';
|
|
|
|
var oldcenter = void 0,
|
|
newcenter = void 0;
|
|
|
|
// if it's a regular group, we have special processing to flatten transforms
|
|
if (selected.tagName === 'g' && !gsvg || selected.tagName === 'a') {
|
|
var box = getBBox(selected);
|
|
|
|
oldcenter = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
|
|
newcenter = transformPoint(box.x + box.width / 2, box.y + box.height / 2, transformListToTransform(tlist).matrix);
|
|
var _m = svgroot.createSVGMatrix();
|
|
|
|
// temporarily strip off the rotate and save the old center
|
|
var gangle = getRotationAngle(selected);
|
|
if (gangle) {
|
|
var a = gangle * Math.PI / 180;
|
|
var s = void 0;
|
|
if (Math.abs(a) > 1.0e-10) {
|
|
s = Math.sin(a) / (1 - Math.cos(a));
|
|
} else {
|
|
// FIXME: This blows up if the angle is exactly 0!
|
|
s = 2 / a;
|
|
}
|
|
for (var _i = 0; _i < tlist.numberOfItems; ++_i) {
|
|
var _xform2 = tlist.getItem(_i);
|
|
if (_xform2.type === 4) {
|
|
// extract old center through mystical arts
|
|
var rm = _xform2.matrix;
|
|
oldcenter.y = (s * rm.e + rm.f) / 2;
|
|
oldcenter.x = (rm.e - s * rm.f) / 2;
|
|
tlist.removeItem(_i);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
var N = tlist.numberOfItems;
|
|
var tx = 0,
|
|
ty = 0,
|
|
operation = 0;
|
|
|
|
var firstM = void 0;
|
|
if (N) {
|
|
firstM = tlist.getItem(0).matrix;
|
|
}
|
|
|
|
var oldStartTransform = void 0;
|
|
// first, if it was a scale then the second-last transform will be it
|
|
if (N >= 3 && tlist.getItem(N - 2).type === 3 && tlist.getItem(N - 3).type === 2 && tlist.getItem(N - 1).type === 2) {
|
|
operation = 3; // scale
|
|
|
|
// if the children are unrotated, pass the scale down directly
|
|
// otherwise pass the equivalent matrix() down directly
|
|
var tm = tlist.getItem(N - 3).matrix,
|
|
sm = tlist.getItem(N - 2).matrix,
|
|
tmn = tlist.getItem(N - 1).matrix;
|
|
|
|
var children = selected.childNodes;
|
|
var c = children.length;
|
|
while (c--) {
|
|
var child = children.item(c);
|
|
tx = 0;
|
|
ty = 0;
|
|
if (child.nodeType === 1) {
|
|
var childTlist = getTransformList(child);
|
|
|
|
// some children might not have a transform (<metadata>, <defs>, etc)
|
|
if (!childTlist) {
|
|
continue;
|
|
}
|
|
|
|
var _m2 = transformListToTransform(childTlist).matrix;
|
|
|
|
// Convert a matrix to a scale if applicable
|
|
// if (hasMatrixTransform(childTlist) && childTlist.numberOfItems == 1) {
|
|
// if (m.b==0 && m.c==0 && m.e==0 && m.f==0) {
|
|
// childTlist.removeItem(0);
|
|
// const translateOrigin = svgroot.createSVGTransform(),
|
|
// scale = svgroot.createSVGTransform(),
|
|
// translateBack = svgroot.createSVGTransform();
|
|
// translateOrigin.setTranslate(0, 0);
|
|
// scale.setScale(m.a, m.d);
|
|
// translateBack.setTranslate(0, 0);
|
|
// childTlist.appendItem(translateBack);
|
|
// childTlist.appendItem(scale);
|
|
// childTlist.appendItem(translateOrigin);
|
|
// }
|
|
// }
|
|
|
|
var angle = getRotationAngle(child);
|
|
oldStartTransform = context_.getStartTransform();
|
|
context_.setStartTransform(child.getAttribute('transform'));
|
|
if (angle || hasMatrixTransform(childTlist)) {
|
|
var e2t = svgroot.createSVGTransform();
|
|
e2t.setMatrix(matrixMultiply(tm, sm, tmn, _m2));
|
|
childTlist.clear();
|
|
childTlist.appendItem(e2t);
|
|
// if not rotated or skewed, push the [T][S][-T] down to the child
|
|
} else {
|
|
// update the transform list with translate,scale,translate
|
|
|
|
// slide the [T][S][-T] from the front to the back
|
|
// [T][S][-T][M] = [M][T2][S2][-T2]
|
|
|
|
// (only bringing [-T] to the right of [M])
|
|
// [T][S][-T][M] = [T][S][M][-T2]
|
|
// [-T2] = [M_inv][-T][M]
|
|
var t2n = matrixMultiply(_m2.inverse(), tmn, _m2);
|
|
// [T2] is always negative translation of [-T2]
|
|
var t2 = svgroot.createSVGMatrix();
|
|
t2.e = -t2n.e;
|
|
t2.f = -t2n.f;
|
|
|
|
// [T][S][-T][M] = [M][T2][S2][-T2]
|
|
// [S2] = [T2_inv][M_inv][T][S][-T][M][-T2_inv]
|
|
var s2 = matrixMultiply(t2.inverse(), _m2.inverse(), tm, sm, tmn, _m2, t2n.inverse());
|
|
|
|
var translateOrigin = svgroot.createSVGTransform(),
|
|
scale = svgroot.createSVGTransform(),
|
|
translateBack = svgroot.createSVGTransform();
|
|
translateOrigin.setTranslate(t2n.e, t2n.f);
|
|
scale.setScale(s2.a, s2.d);
|
|
translateBack.setTranslate(t2.e, t2.f);
|
|
childTlist.appendItem(translateBack);
|
|
childTlist.appendItem(scale);
|
|
childTlist.appendItem(translateOrigin);
|
|
// logMatrix(translateBack.matrix);
|
|
// logMatrix(scale.matrix);
|
|
} // not rotated
|
|
batchCmd.addSubCommand(recalculateDimensions(child));
|
|
// TODO: If any <use> have this group as a parent and are
|
|
// referencing this child, then we need to impose a reverse
|
|
// scale on it so that when it won't get double-translated
|
|
// const uses = selected.getElementsByTagNameNS(NS.SVG, 'use');
|
|
// const href = '#' + child.id;
|
|
// let u = uses.length;
|
|
// while (u--) {
|
|
// const useElem = uses.item(u);
|
|
// if (href == getHref(useElem)) {
|
|
// const usexlate = svgroot.createSVGTransform();
|
|
// usexlate.setTranslate(-tx,-ty);
|
|
// getTransformList(useElem).insertItemBefore(usexlate,0);
|
|
// batchCmd.addSubCommand( recalculateDimensions(useElem) );
|
|
// }
|
|
// }
|
|
context_.setStartTransform(oldStartTransform);
|
|
} // element
|
|
} // for each child
|
|
// Remove these transforms from group
|
|
tlist.removeItem(N - 1);
|
|
tlist.removeItem(N - 2);
|
|
tlist.removeItem(N - 3);
|
|
} else if (N >= 3 && tlist.getItem(N - 1).type === 1) {
|
|
operation = 3; // scale
|
|
_m = transformListToTransform(tlist).matrix;
|
|
var _e2t = svgroot.createSVGTransform();
|
|
_e2t.setMatrix(_m);
|
|
tlist.clear();
|
|
tlist.appendItem(_e2t);
|
|
// next, check if the first transform was a translate
|
|
// if we had [ T1 ] [ M ] we want to transform this into [ M ] [ T2 ]
|
|
// therefore [ T2 ] = [ M_inv ] [ T1 ] [ M ]
|
|
} else if ((N === 1 || N > 1 && tlist.getItem(1).type !== 3) && tlist.getItem(0).type === 2) {
|
|
operation = 2; // translate
|
|
var T_M = transformListToTransform(tlist).matrix;
|
|
tlist.removeItem(0);
|
|
var mInv = transformListToTransform(tlist).matrix.inverse();
|
|
var M2 = matrixMultiply(mInv, T_M);
|
|
|
|
tx = M2.e;
|
|
ty = M2.f;
|
|
|
|
if (tx !== 0 || ty !== 0) {
|
|
// we pass the translates down to the individual children
|
|
var _children = selected.childNodes;
|
|
var _c = _children.length;
|
|
|
|
var clipPathsDone = [];
|
|
|
|
while (_c--) {
|
|
var _child = _children.item(_c);
|
|
if (_child.nodeType === 1) {
|
|
// Check if child has clip-path
|
|
if (_child.getAttribute('clip-path')) {
|
|
// tx, ty
|
|
var attr = _child.getAttribute('clip-path');
|
|
if (!clipPathsDone.includes(attr)) {
|
|
updateClipPath(attr, tx, ty);
|
|
clipPathsDone.push(attr);
|
|
}
|
|
}
|
|
|
|
oldStartTransform = context_.getStartTransform();
|
|
context_.setStartTransform(_child.getAttribute('transform'));
|
|
|
|
var _childTlist = getTransformList(_child);
|
|
// some children might not have a transform (<metadata>, <defs>, etc)
|
|
if (_childTlist) {
|
|
var newxlate = svgroot.createSVGTransform();
|
|
newxlate.setTranslate(tx, ty);
|
|
if (_childTlist.numberOfItems) {
|
|
_childTlist.insertItemBefore(newxlate, 0);
|
|
} else {
|
|
_childTlist.appendItem(newxlate);
|
|
}
|
|
batchCmd.addSubCommand(recalculateDimensions(_child));
|
|
// If any <use> have this group as a parent and are
|
|
// referencing this child, then impose a reverse translate on it
|
|
// so that when it won't get double-translated
|
|
var uses = selected.getElementsByTagNameNS(NS.SVG, 'use');
|
|
var href = '#' + _child.id;
|
|
var u = uses.length;
|
|
while (u--) {
|
|
var useElem = uses.item(u);
|
|
if (href === getHref(useElem)) {
|
|
var usexlate = svgroot.createSVGTransform();
|
|
usexlate.setTranslate(-tx, -ty);
|
|
getTransformList(useElem).insertItemBefore(usexlate, 0);
|
|
batchCmd.addSubCommand(recalculateDimensions(useElem));
|
|
}
|
|
}
|
|
context_.setStartTransform(oldStartTransform);
|
|
}
|
|
}
|
|
}
|
|
|
|
clipPathsDone = [];
|
|
context_.setStartTransform(oldStartTransform);
|
|
}
|
|
// else, a matrix imposition from a parent group
|
|
// keep pushing it down to the children
|
|
} else if (N === 1 && tlist.getItem(0).type === 1 && !gangle) {
|
|
operation = 1;
|
|
var _m3 = tlist.getItem(0).matrix,
|
|
_children2 = selected.childNodes;
|
|
var _c2 = _children2.length;
|
|
while (_c2--) {
|
|
var _child2 = _children2.item(_c2);
|
|
if (_child2.nodeType === 1) {
|
|
oldStartTransform = context_.getStartTransform();
|
|
context_.setStartTransform(_child2.getAttribute('transform'));
|
|
var _childTlist2 = getTransformList(_child2);
|
|
|
|
if (!_childTlist2) {
|
|
continue;
|
|
}
|
|
|
|
var em = matrixMultiply(_m3, transformListToTransform(_childTlist2).matrix);
|
|
var e2m = svgroot.createSVGTransform();
|
|
e2m.setMatrix(em);
|
|
_childTlist2.clear();
|
|
_childTlist2.appendItem(e2m, 0);
|
|
|
|
batchCmd.addSubCommand(recalculateDimensions(_child2));
|
|
context_.setStartTransform(oldStartTransform);
|
|
|
|
// Convert stroke
|
|
// TODO: Find out if this should actually happen somewhere else
|
|
var sw = _child2.getAttribute('stroke-width');
|
|
if (_child2.getAttribute('stroke') !== 'none' && !isNaN(sw)) {
|
|
var avg = (Math.abs(em.a) + Math.abs(em.d)) / 2;
|
|
_child2.setAttribute('stroke-width', sw * avg);
|
|
}
|
|
}
|
|
}
|
|
tlist.clear();
|
|
// else it was just a rotate
|
|
} else {
|
|
if (gangle) {
|
|
var newRot = svgroot.createSVGTransform();
|
|
newRot.setRotate(gangle, newcenter.x, newcenter.y);
|
|
if (tlist.numberOfItems) {
|
|
tlist.insertItemBefore(newRot, 0);
|
|
} else {
|
|
tlist.appendItem(newRot);
|
|
}
|
|
}
|
|
if (tlist.numberOfItems === 0) {
|
|
selected.removeAttribute('transform');
|
|
}
|
|
return null;
|
|
}
|
|
|
|
// if it was a translate, put back the rotate at the new center
|
|
if (operation === 2) {
|
|
if (gangle) {
|
|
newcenter = {
|
|
x: oldcenter.x + firstM.e,
|
|
y: oldcenter.y + firstM.f
|
|
};
|
|
|
|
var _newRot = svgroot.createSVGTransform();
|
|
_newRot.setRotate(gangle, newcenter.x, newcenter.y);
|
|
if (tlist.numberOfItems) {
|
|
tlist.insertItemBefore(_newRot, 0);
|
|
} else {
|
|
tlist.appendItem(_newRot);
|
|
}
|
|
}
|
|
// if it was a resize
|
|
} else if (operation === 3) {
|
|
var _m4 = transformListToTransform(tlist).matrix;
|
|
var roldt = svgroot.createSVGTransform();
|
|
roldt.setRotate(gangle, oldcenter.x, oldcenter.y);
|
|
var rold = roldt.matrix;
|
|
var rnew = svgroot.createSVGTransform();
|
|
rnew.setRotate(gangle, newcenter.x, newcenter.y);
|
|
var rnewInv = rnew.matrix.inverse(),
|
|
_mInv = _m4.inverse(),
|
|
extrat = matrixMultiply(_mInv, rnewInv, rold, _m4);
|
|
|
|
tx = extrat.e;
|
|
ty = extrat.f;
|
|
|
|
if (tx !== 0 || ty !== 0) {
|
|
// now push this transform down to the children
|
|
// we pass the translates down to the individual children
|
|
var _children3 = selected.childNodes;
|
|
var _c3 = _children3.length;
|
|
while (_c3--) {
|
|
var _child3 = _children3.item(_c3);
|
|
if (_child3.nodeType === 1) {
|
|
oldStartTransform = context_.getStartTransform();
|
|
context_.setStartTransform(_child3.getAttribute('transform'));
|
|
var _childTlist3 = getTransformList(_child3);
|
|
var _newxlate = svgroot.createSVGTransform();
|
|
_newxlate.setTranslate(tx, ty);
|
|
if (_childTlist3.numberOfItems) {
|
|
_childTlist3.insertItemBefore(_newxlate, 0);
|
|
} else {
|
|
_childTlist3.appendItem(_newxlate);
|
|
}
|
|
|
|
batchCmd.addSubCommand(recalculateDimensions(_child3));
|
|
context_.setStartTransform(oldStartTransform);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (gangle) {
|
|
if (tlist.numberOfItems) {
|
|
tlist.insertItemBefore(rnew, 0);
|
|
} else {
|
|
tlist.appendItem(rnew);
|
|
}
|
|
}
|
|
}
|
|
// else, it's a non-group
|
|
} else {
|
|
// FIXME: box might be null for some elements (<metadata> etc), need to handle this
|
|
var _box = getBBox(selected);
|
|
|
|
// Paths (and possbly other shapes) will have no BBox while still in <defs>,
|
|
// but we still may need to recalculate them (see issue 595).
|
|
// TODO: Figure out how to get BBox from these elements in case they
|
|
// have a rotation transform
|
|
|
|
if (!_box && selected.tagName !== 'path') return null;
|
|
|
|
var _m5 = svgroot.createSVGMatrix();
|
|
// temporarily strip off the rotate and save the old center
|
|
var _angle = getRotationAngle(selected);
|
|
if (_angle) {
|
|
oldcenter = { x: _box.x + _box.width / 2, y: _box.y + _box.height / 2 };
|
|
newcenter = transformPoint(_box.x + _box.width / 2, _box.y + _box.height / 2, transformListToTransform(tlist).matrix);
|
|
|
|
var _a = _angle * Math.PI / 180;
|
|
var _s = Math.abs(_a) > 1.0e-10 ? Math.sin(_a) / (1 - Math.cos(_a))
|
|
// FIXME: This blows up if the angle is exactly 0!
|
|
: 2 / _a;
|
|
|
|
for (var _i2 = 0; _i2 < tlist.numberOfItems; ++_i2) {
|
|
var _xform3 = tlist.getItem(_i2);
|
|
if (_xform3.type === 4) {
|
|
// extract old center through mystical arts
|
|
var _rm = _xform3.matrix;
|
|
oldcenter.y = (_s * _rm.e + _rm.f) / 2;
|
|
oldcenter.x = (_rm.e - _s * _rm.f) / 2;
|
|
tlist.removeItem(_i2);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 2 = translate, 3 = scale, 4 = rotate, 1 = matrix imposition
|
|
var _operation = 0;
|
|
var _N = tlist.numberOfItems;
|
|
|
|
// Check if it has a gradient with userSpaceOnUse, in which case
|
|
// adjust it by recalculating the matrix transform.
|
|
// TODO: Make this work in Webkit using svgedit.transformlist.SVGTransformList
|
|
if (!isWebkit()) {
|
|
var fill = selected.getAttribute('fill');
|
|
if (fill && fill.startsWith('url(')) {
|
|
var paint = getRefElem(fill);
|
|
var type = 'pattern';
|
|
if (paint.tagName !== type) type = 'gradient';
|
|
var attrVal = paint.getAttribute(type + 'Units');
|
|
if (attrVal === 'userSpaceOnUse') {
|
|
// Update the userSpaceOnUse element
|
|
_m5 = transformListToTransform(tlist).matrix;
|
|
var gtlist = getTransformList(paint);
|
|
var gmatrix = transformListToTransform(gtlist).matrix;
|
|
_m5 = matrixMultiply(_m5, gmatrix);
|
|
var mStr = 'matrix(' + [_m5.a, _m5.b, _m5.c, _m5.d, _m5.e, _m5.f].join(',') + ')';
|
|
paint.setAttribute(type + 'Transform', mStr);
|
|
}
|
|
}
|
|
}
|
|
|
|
// first, if it was a scale of a non-skewed element, then the second-last
|
|
// transform will be the [S]
|
|
// if we had [M][T][S][T] we want to extract the matrix equivalent of
|
|
// [T][S][T] and push it down to the element
|
|
if (_N >= 3 && tlist.getItem(_N - 2).type === 3 && tlist.getItem(_N - 3).type === 2 && tlist.getItem(_N - 1).type === 2) {
|
|
// Removed this so a <use> with a given [T][S][T] would convert to a matrix.
|
|
// Is that bad?
|
|
// && selected.nodeName != 'use'
|
|
_operation = 3; // scale
|
|
_m5 = transformListToTransform(tlist, _N - 3, _N - 1).matrix;
|
|
tlist.removeItem(_N - 1);
|
|
tlist.removeItem(_N - 2);
|
|
tlist.removeItem(_N - 3);
|
|
// if we had [T][S][-T][M], then this was a skewed element being resized
|
|
// Thus, we simply combine it all into one matrix
|
|
} else if (_N === 4 && tlist.getItem(_N - 1).type === 1) {
|
|
_operation = 3; // scale
|
|
_m5 = transformListToTransform(tlist).matrix;
|
|
var _e2t2 = svgroot.createSVGTransform();
|
|
_e2t2.setMatrix(_m5);
|
|
tlist.clear();
|
|
tlist.appendItem(_e2t2);
|
|
// reset the matrix so that the element is not re-mapped
|
|
_m5 = svgroot.createSVGMatrix();
|
|
// if we had [R][T][S][-T][M], then this was a rotated matrix-element
|
|
// if we had [T1][M] we want to transform this into [M][T2]
|
|
// therefore [ T2 ] = [ M_inv ] [ T1 ] [ M ] and we can push [T2]
|
|
// down to the element
|
|
} else if ((_N === 1 || _N > 1 && tlist.getItem(1).type !== 3) && tlist.getItem(0).type === 2) {
|
|
_operation = 2; // translate
|
|
var oldxlate = tlist.getItem(0).matrix,
|
|
meq = transformListToTransform(tlist, 1).matrix,
|
|
meqInv = meq.inverse();
|
|
_m5 = matrixMultiply(meqInv, oldxlate, meq);
|
|
tlist.removeItem(0);
|
|
// else if this child now has a matrix imposition (from a parent group)
|
|
// we might be able to simplify
|
|
} else if (_N === 1 && tlist.getItem(0).type === 1 && !_angle) {
|
|
// Remap all point-based elements
|
|
_m5 = transformListToTransform(tlist).matrix;
|
|
switch (selected.tagName) {
|
|
case 'line':
|
|
changes = $$7(selected).attr(['x1', 'y1', 'x2', 'y2']);
|
|
// Fallthrough
|
|
case 'polyline':
|
|
case 'polygon':
|
|
changes.points = selected.getAttribute('points');
|
|
if (changes.points) {
|
|
var _list = selected.points;
|
|
var _len = _list.numberOfItems;
|
|
changes.points = new Array(_len);
|
|
for (var _i3 = 0; _i3 < _len; ++_i3) {
|
|
var _pt = _list.getItem(_i3);
|
|
changes.points[_i3] = { x: _pt.x, y: _pt.y };
|
|
}
|
|
}
|
|
// Fallthrough
|
|
case 'path':
|
|
changes.d = selected.getAttribute('d');
|
|
_operation = 1;
|
|
tlist.clear();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
// if it was a rotation, put the rotate back and return without a command
|
|
// (this function has zero work to do for a rotate())
|
|
} else {
|
|
_operation = 4; // rotation
|
|
if (_angle) {
|
|
var _newRot2 = svgroot.createSVGTransform();
|
|
_newRot2.setRotate(_angle, newcenter.x, newcenter.y);
|
|
|
|
if (tlist.numberOfItems) {
|
|
tlist.insertItemBefore(_newRot2, 0);
|
|
} else {
|
|
tlist.appendItem(_newRot2);
|
|
}
|
|
}
|
|
if (tlist.numberOfItems === 0) {
|
|
selected.removeAttribute('transform');
|
|
}
|
|
return null;
|
|
}
|
|
|
|
// if it was a translate or resize, we need to remap the element and absorb the xform
|
|
if (_operation === 1 || _operation === 2 || _operation === 3) {
|
|
remapElement(selected, changes, _m5);
|
|
} // if we are remapping
|
|
|
|
// if it was a translate, put back the rotate at the new center
|
|
if (_operation === 2) {
|
|
if (_angle) {
|
|
if (!hasMatrixTransform(tlist)) {
|
|
newcenter = {
|
|
x: oldcenter.x + _m5.e,
|
|
y: oldcenter.y + _m5.f
|
|
};
|
|
}
|
|
var _newRot3 = svgroot.createSVGTransform();
|
|
_newRot3.setRotate(_angle, newcenter.x, newcenter.y);
|
|
if (tlist.numberOfItems) {
|
|
tlist.insertItemBefore(_newRot3, 0);
|
|
} else {
|
|
tlist.appendItem(_newRot3);
|
|
}
|
|
}
|
|
// We have special processing for tspans: Tspans are not transformable
|
|
// but they can have x,y coordinates (sigh). Thus, if this was a translate,
|
|
// on a text element, also translate any tspan children.
|
|
if (selected.tagName === 'text') {
|
|
var _children4 = selected.childNodes;
|
|
var _c4 = _children4.length;
|
|
while (_c4--) {
|
|
var _child4 = _children4.item(_c4);
|
|
if (_child4.tagName === 'tspan') {
|
|
var tspanChanges = {
|
|
x: $$7(_child4).attr('x') || 0,
|
|
y: $$7(_child4).attr('y') || 0
|
|
};
|
|
remapElement(_child4, tspanChanges, _m5);
|
|
}
|
|
}
|
|
}
|
|
// [Rold][M][T][S][-T] became [Rold][M]
|
|
// we want it to be [Rnew][M][Tr] where Tr is the
|
|
// translation required to re-center it
|
|
// Therefore, [Tr] = [M_inv][Rnew_inv][Rold][M]
|
|
} else if (_operation === 3 && _angle) {
|
|
var _m6 = transformListToTransform(tlist).matrix;
|
|
var _roldt = svgroot.createSVGTransform();
|
|
_roldt.setRotate(_angle, oldcenter.x, oldcenter.y);
|
|
var _rold = _roldt.matrix;
|
|
var _rnew = svgroot.createSVGTransform();
|
|
_rnew.setRotate(_angle, newcenter.x, newcenter.y);
|
|
var _rnewInv = _rnew.matrix.inverse();
|
|
var _mInv2 = _m6.inverse();
|
|
var _extrat = matrixMultiply(_mInv2, _rnewInv, _rold, _m6);
|
|
|
|
remapElement(selected, changes, _extrat);
|
|
if (_angle) {
|
|
if (tlist.numberOfItems) {
|
|
tlist.insertItemBefore(_rnew, 0);
|
|
} else {
|
|
tlist.appendItem(_rnew);
|
|
}
|
|
}
|
|
}
|
|
} // a non-group
|
|
|
|
// if the transform list has been emptied, remove it
|
|
if (tlist.numberOfItems === 0) {
|
|
selected.removeAttribute('transform');
|
|
}
|
|
|
|
batchCmd.addSubCommand(new ChangeElementCommand(selected, initial));
|
|
|
|
return batchCmd;
|
|
};
|
|
|
|
/* globals jQuery */
|
|
|
|
var $$8 = jQuery;
|
|
|
|
var svgFactory_ = void 0;
|
|
var config_ = void 0;
|
|
var selectorManager_ = void 0; // A Singleton
|
|
var gripRadius = isTouch() ? 10 : 4;
|
|
|
|
/**
|
|
* Private class for DOM element selection boxes
|
|
* @param id - integer to internally indentify the selector
|
|
* @param elem - DOM element associated with this selector
|
|
* @param bbox - Optional bbox to use for initialization (prevents duplicate getBBox call).
|
|
*/
|
|
var Selector = function () {
|
|
function Selector(id, elem, bbox) {
|
|
classCallCheck(this, Selector);
|
|
|
|
// this is the selector's unique number
|
|
this.id = id;
|
|
|
|
// this holds a reference to the element for which this selector is being used
|
|
this.selectedElement = elem;
|
|
|
|
// this is a flag used internally to track whether the selector is being used or not
|
|
this.locked = true;
|
|
|
|
// this holds a reference to the <g> element that holds all visual elements of the selector
|
|
this.selectorGroup = svgFactory_.createSVGElement({
|
|
element: 'g',
|
|
attr: { id: 'selectorGroup' + this.id }
|
|
});
|
|
|
|
// this holds a reference to the path rect
|
|
this.selectorRect = this.selectorGroup.appendChild(svgFactory_.createSVGElement({
|
|
element: 'path',
|
|
attr: {
|
|
id: 'selectedBox' + this.id,
|
|
fill: 'none',
|
|
stroke: '#22C',
|
|
'stroke-width': '1',
|
|
'stroke-dasharray': '5,5',
|
|
// need to specify this so that the rect is not selectable
|
|
style: 'pointer-events:none'
|
|
}
|
|
}));
|
|
|
|
// this holds a reference to the grip coordinates for this selector
|
|
this.gripCoords = {
|
|
nw: null,
|
|
n: null,
|
|
ne: null,
|
|
e: null,
|
|
se: null,
|
|
s: null,
|
|
sw: null,
|
|
w: null
|
|
};
|
|
|
|
this.reset(this.selectedElement, bbox);
|
|
}
|
|
|
|
/**
|
|
* Used to reset the id and element that the selector is attached to
|
|
* @param e - DOM element associated with this selector
|
|
* @param bbox - Optional bbox to use for reset (prevents duplicate getBBox call).
|
|
*/
|
|
|
|
|
|
createClass(Selector, [{
|
|
key: 'reset',
|
|
value: function reset(e, bbox) {
|
|
this.locked = true;
|
|
this.selectedElement = e;
|
|
this.resize(bbox);
|
|
this.selectorGroup.setAttribute('display', 'inline');
|
|
}
|
|
|
|
/**
|
|
* Updates cursors for corner grips on rotation so arrows point the right way
|
|
* @param {Number} angle - Float indicating current rotation angle in degrees
|
|
*/
|
|
|
|
}, {
|
|
key: 'updateGripCursors',
|
|
value: function updateGripCursors(angle) {
|
|
var dir = void 0;
|
|
var dirArr = [];
|
|
var steps = Math.round(angle / 45);
|
|
if (steps < 0) {
|
|
steps += 8;
|
|
}
|
|
for (dir in selectorManager_.selectorGrips) {
|
|
dirArr.push(dir);
|
|
}
|
|
while (steps > 0) {
|
|
dirArr.push(dirArr.shift());
|
|
steps--;
|
|
}
|
|
var i = 0;
|
|
for (dir in selectorManager_.selectorGrips) {
|
|
selectorManager_.selectorGrips[dir].setAttribute('style', 'cursor:' + dirArr[i] + '-resize');
|
|
i++;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Show the resize grips of this selector
|
|
*
|
|
* @param {Boolean} show - Indicates whether grips should be shown or not
|
|
*/
|
|
|
|
}, {
|
|
key: 'showGrips',
|
|
value: function showGrips(show) {
|
|
var bShow = show ? 'inline' : 'none';
|
|
selectorManager_.selectorGripsGroup.setAttribute('display', bShow);
|
|
var elem = this.selectedElement;
|
|
this.hasGrips = show;
|
|
if (elem && show) {
|
|
this.selectorGroup.appendChild(selectorManager_.selectorGripsGroup);
|
|
this.updateGripCursors(getRotationAngle(elem));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Updates the selector to match the element's size
|
|
* @param bbox - Optional bbox to use for resize (prevents duplicate getBBox call).
|
|
*/
|
|
|
|
}, {
|
|
key: 'resize',
|
|
value: function resize(bbox) {
|
|
var selectedBox = this.selectorRect,
|
|
mgr = selectorManager_,
|
|
selectedGrips = mgr.selectorGrips,
|
|
selected = this.selectedElement,
|
|
sw = selected.getAttribute('stroke-width'),
|
|
currentZoom = svgFactory_.getCurrentZoom();
|
|
var offset = 1 / currentZoom;
|
|
if (selected.getAttribute('stroke') !== 'none' && !isNaN(sw)) {
|
|
offset += sw / 2;
|
|
}
|
|
|
|
var tagName = selected.tagName;
|
|
|
|
if (tagName === 'text') {
|
|
offset += 2 / currentZoom;
|
|
}
|
|
|
|
// loop and transform our bounding box until we reach our first rotation
|
|
var tlist = getTransformList(selected);
|
|
var m = transformListToTransform(tlist).matrix;
|
|
|
|
// This should probably be handled somewhere else, but for now
|
|
// it keeps the selection box correctly positioned when zoomed
|
|
m.e *= currentZoom;
|
|
m.f *= currentZoom;
|
|
|
|
if (!bbox) {
|
|
bbox = getBBox(selected);
|
|
}
|
|
// TODO: getBBox (previous line) already knows to call getStrokedBBox when tagName === 'g'. Remove this?
|
|
// TODO: getBBox doesn't exclude 'gsvg' and calls getStrokedBBox for any 'g'. Should getBBox be updated?
|
|
if (tagName === 'g' && !$$8.data(selected, 'gsvg')) {
|
|
// The bbox for a group does not include stroke vals, so we
|
|
// get the bbox based on its children.
|
|
var strokedBbox = getStrokedBBox([selected.childNodes]);
|
|
if (strokedBbox) {
|
|
bbox = strokedBbox;
|
|
}
|
|
}
|
|
|
|
// apply the transforms
|
|
var l = bbox.x,
|
|
t = bbox.y,
|
|
w = bbox.width,
|
|
h = bbox.height;
|
|
bbox = { x: l, y: t, width: w, height: h };
|
|
|
|
// we need to handle temporary transforms too
|
|
// if skewed, get its transformed box, then find its axis-aligned bbox
|
|
|
|
// *
|
|
offset *= currentZoom;
|
|
|
|
var nbox = transformBox(l * currentZoom, t * currentZoom, w * currentZoom, h * currentZoom, m),
|
|
aabox = nbox.aabox;
|
|
|
|
var nbax = aabox.x - offset,
|
|
nbay = aabox.y - offset,
|
|
nbaw = aabox.width + offset * 2,
|
|
nbah = aabox.height + offset * 2;
|
|
|
|
// now if the shape is rotated, un-rotate it
|
|
var cx = nbax + nbaw / 2,
|
|
cy = nbay + nbah / 2;
|
|
|
|
var angle = getRotationAngle(selected);
|
|
if (angle) {
|
|
var rot = svgFactory_.svgRoot().createSVGTransform();
|
|
rot.setRotate(-angle, cx, cy);
|
|
var rotm = rot.matrix;
|
|
nbox.tl = transformPoint(nbox.tl.x, nbox.tl.y, rotm);
|
|
nbox.tr = transformPoint(nbox.tr.x, nbox.tr.y, rotm);
|
|
nbox.bl = transformPoint(nbox.bl.x, nbox.bl.y, rotm);
|
|
nbox.br = transformPoint(nbox.br.x, nbox.br.y, rotm);
|
|
|
|
// calculate the axis-aligned bbox
|
|
var tl = nbox.tl;
|
|
|
|
var minx = tl.x,
|
|
miny = tl.y,
|
|
maxx = tl.x,
|
|
maxy = tl.y;
|
|
|
|
var min = Math.min,
|
|
max = Math.max;
|
|
|
|
|
|
minx = min(minx, min(nbox.tr.x, min(nbox.bl.x, nbox.br.x))) - offset;
|
|
miny = min(miny, min(nbox.tr.y, min(nbox.bl.y, nbox.br.y))) - offset;
|
|
maxx = max(maxx, max(nbox.tr.x, max(nbox.bl.x, nbox.br.x))) + offset;
|
|
maxy = max(maxy, max(nbox.tr.y, max(nbox.bl.y, nbox.br.y))) + offset;
|
|
|
|
nbax = minx;
|
|
nbay = miny;
|
|
nbaw = maxx - minx;
|
|
nbah = maxy - miny;
|
|
}
|
|
|
|
var dstr = 'M' + nbax + ',' + nbay + ' L' + (nbax + nbaw) + ',' + nbay + ' ' + (nbax + nbaw) + ',' + (nbay + nbah) + ' ' + nbax + ',' + (nbay + nbah) + 'z';
|
|
selectedBox.setAttribute('d', dstr);
|
|
|
|
var xform = angle ? 'rotate(' + [angle, cx, cy].join(',') + ')' : '';
|
|
this.selectorGroup.setAttribute('transform', xform);
|
|
|
|
// TODO(codedread): Is this needed?
|
|
// if (selected === selectedElements[0]) {
|
|
this.gripCoords = {
|
|
nw: [nbax, nbay],
|
|
ne: [nbax + nbaw, nbay],
|
|
sw: [nbax, nbay + nbah],
|
|
se: [nbax + nbaw, nbay + nbah],
|
|
n: [nbax + nbaw / 2, nbay],
|
|
w: [nbax, nbay + nbah / 2],
|
|
e: [nbax + nbaw, nbay + nbah / 2],
|
|
s: [nbax + nbaw / 2, nbay + nbah]
|
|
};
|
|
for (var dir in this.gripCoords) {
|
|
var coords = this.gripCoords[dir];
|
|
selectedGrips[dir].setAttribute('cx', coords[0]);
|
|
selectedGrips[dir].setAttribute('cy', coords[1]);
|
|
}
|
|
|
|
// we want to go 20 pixels in the negative transformed y direction, ignoring scale
|
|
mgr.rotateGripConnector.setAttribute('x1', nbax + nbaw / 2);
|
|
mgr.rotateGripConnector.setAttribute('y1', nbay);
|
|
mgr.rotateGripConnector.setAttribute('x2', nbax + nbaw / 2);
|
|
mgr.rotateGripConnector.setAttribute('y2', nbay - gripRadius * 5);
|
|
|
|
mgr.rotateGrip.setAttribute('cx', nbax + nbaw / 2);
|
|
mgr.rotateGrip.setAttribute('cy', nbay - gripRadius * 5);
|
|
// }
|
|
}
|
|
}]);
|
|
return Selector;
|
|
}();
|
|
|
|
/**
|
|
*
|
|
*/
|
|
var SelectorManager = function () {
|
|
function SelectorManager() {
|
|
classCallCheck(this, SelectorManager);
|
|
|
|
// this will hold the <g> element that contains all selector rects/grips
|
|
this.selectorParentGroup = null;
|
|
|
|
// this is a special rect that is used for multi-select
|
|
this.rubberBandBox = null;
|
|
|
|
// this will hold objects of type Selector (see above)
|
|
this.selectors = [];
|
|
|
|
// this holds a map of SVG elements to their Selector object
|
|
this.selectorMap = {};
|
|
|
|
// this holds a reference to the grip elements
|
|
this.selectorGrips = {
|
|
nw: null,
|
|
n: null,
|
|
ne: null,
|
|
e: null,
|
|
se: null,
|
|
s: null,
|
|
sw: null,
|
|
w: null
|
|
};
|
|
|
|
this.selectorGripsGroup = null;
|
|
this.rotateGripConnector = null;
|
|
this.rotateGrip = null;
|
|
|
|
this.initGroup();
|
|
}
|
|
|
|
/**
|
|
* Resets the parent selector group element
|
|
*/
|
|
|
|
|
|
createClass(SelectorManager, [{
|
|
key: 'initGroup',
|
|
value: function initGroup() {
|
|
// remove old selector parent group if it existed
|
|
if (this.selectorParentGroup && this.selectorParentGroup.parentNode) {
|
|
this.selectorParentGroup.parentNode.removeChild(this.selectorParentGroup);
|
|
}
|
|
|
|
// create parent selector group and add it to svgroot
|
|
this.selectorParentGroup = svgFactory_.createSVGElement({
|
|
element: 'g',
|
|
attr: { id: 'selectorParentGroup' }
|
|
});
|
|
this.selectorGripsGroup = svgFactory_.createSVGElement({
|
|
element: 'g',
|
|
attr: { display: 'none' }
|
|
});
|
|
this.selectorParentGroup.appendChild(this.selectorGripsGroup);
|
|
svgFactory_.svgRoot().appendChild(this.selectorParentGroup);
|
|
|
|
this.selectorMap = {};
|
|
this.selectors = [];
|
|
this.rubberBandBox = null;
|
|
|
|
// add the corner grips
|
|
for (var dir in this.selectorGrips) {
|
|
var grip = svgFactory_.createSVGElement({
|
|
element: 'circle',
|
|
attr: {
|
|
id: 'selectorGrip_resize_' + dir,
|
|
fill: '#22C',
|
|
r: gripRadius,
|
|
style: 'cursor:' + dir + '-resize',
|
|
// This expands the mouse-able area of the grips making them
|
|
// easier to grab with the mouse.
|
|
// This works in Opera and WebKit, but does not work in Firefox
|
|
// see https://bugzilla.mozilla.org/show_bug.cgi?id=500174
|
|
'stroke-width': 2,
|
|
'pointer-events': 'all'
|
|
}
|
|
});
|
|
|
|
$$8.data(grip, 'dir', dir);
|
|
$$8.data(grip, 'type', 'resize');
|
|
this.selectorGrips[dir] = this.selectorGripsGroup.appendChild(grip);
|
|
}
|
|
|
|
// add rotator elems
|
|
this.rotateGripConnector = this.selectorGripsGroup.appendChild(svgFactory_.createSVGElement({
|
|
element: 'line',
|
|
attr: {
|
|
id: 'selectorGrip_rotateconnector',
|
|
stroke: '#22C',
|
|
'stroke-width': '1'
|
|
}
|
|
}));
|
|
|
|
this.rotateGrip = this.selectorGripsGroup.appendChild(svgFactory_.createSVGElement({
|
|
element: 'circle',
|
|
attr: {
|
|
id: 'selectorGrip_rotate',
|
|
fill: 'lime',
|
|
r: gripRadius,
|
|
stroke: '#22C',
|
|
'stroke-width': 2,
|
|
style: 'cursor:url(' + config_.imgPath + 'rotate.png) 12 12, auto;'
|
|
}
|
|
}));
|
|
$$8.data(this.rotateGrip, 'type', 'rotate');
|
|
|
|
if ($$8('#canvasBackground').length) {
|
|
return;
|
|
}
|
|
|
|
var dims = config_.dimensions;
|
|
var canvasbg = svgFactory_.createSVGElement({
|
|
element: 'svg',
|
|
attr: {
|
|
id: 'canvasBackground',
|
|
width: dims[0],
|
|
height: dims[1],
|
|
x: 0,
|
|
y: 0,
|
|
overflow: isWebkit() ? 'none' : 'visible', // Chrome 7 has a problem with this when zooming out
|
|
style: 'pointer-events:none'
|
|
}
|
|
});
|
|
|
|
var rect = svgFactory_.createSVGElement({
|
|
element: 'rect',
|
|
attr: {
|
|
width: '100%',
|
|
height: '100%',
|
|
x: 0,
|
|
y: 0,
|
|
'stroke-width': 1,
|
|
stroke: '#000',
|
|
fill: '#FFF',
|
|
style: 'pointer-events:none'
|
|
}
|
|
});
|
|
|
|
// Both Firefox and WebKit are too slow with this filter region (especially at higher
|
|
// zoom levels) and Opera has at least one bug
|
|
// if (!isOpera()) rect.setAttribute('filter', 'url(#canvashadow)');
|
|
canvasbg.appendChild(rect);
|
|
svgFactory_.svgRoot().insertBefore(canvasbg, svgFactory_.svgContent());
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param elem - DOM element to get the selector for
|
|
* @param [bbox] - Optional bbox to use for reset (prevents duplicate getBBox call).
|
|
* @returns The selector based on the given element
|
|
*/
|
|
|
|
}, {
|
|
key: 'requestSelector',
|
|
value: function requestSelector(elem, bbox) {
|
|
if (elem == null) {
|
|
return null;
|
|
}
|
|
|
|
var N = this.selectors.length;
|
|
// If we've already acquired one for this element, return it.
|
|
if (_typeof(this.selectorMap[elem.id]) === 'object') {
|
|
this.selectorMap[elem.id].locked = true;
|
|
return this.selectorMap[elem.id];
|
|
}
|
|
for (var i = 0; i < N; ++i) {
|
|
if (this.selectors[i] && !this.selectors[i].locked) {
|
|
this.selectors[i].locked = true;
|
|
this.selectors[i].reset(elem, bbox);
|
|
this.selectorMap[elem.id] = this.selectors[i];
|
|
return this.selectors[i];
|
|
}
|
|
}
|
|
// if we reached here, no available selectors were found, we create one
|
|
this.selectors[N] = new Selector(N, elem, bbox);
|
|
this.selectorParentGroup.appendChild(this.selectors[N].selectorGroup);
|
|
this.selectorMap[elem.id] = this.selectors[N];
|
|
return this.selectors[N];
|
|
}
|
|
|
|
/**
|
|
* Removes the selector of the given element (hides selection box)
|
|
*
|
|
* @param elem - DOM element to remove the selector for
|
|
*/
|
|
|
|
}, {
|
|
key: 'releaseSelector',
|
|
value: function releaseSelector(elem) {
|
|
if (elem == null) {
|
|
return;
|
|
}
|
|
var N = this.selectors.length,
|
|
sel = this.selectorMap[elem.id];
|
|
if (!sel.locked) {
|
|
// TODO(codedread): Ensure this exists in this module.
|
|
console.log('WARNING! selector was released but was already unlocked');
|
|
}
|
|
for (var i = 0; i < N; ++i) {
|
|
if (this.selectors[i] && this.selectors[i] === sel) {
|
|
delete this.selectorMap[elem.id];
|
|
sel.locked = false;
|
|
sel.selectedElement = null;
|
|
sel.showGrips(false);
|
|
|
|
// remove from DOM and store reference in JS but only if it exists in the DOM
|
|
try {
|
|
sel.selectorGroup.setAttribute('display', 'none');
|
|
} catch (e) {}
|
|
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @returns The rubberBandBox DOM element. This is the rectangle drawn by
|
|
* the user for selecting/zooming
|
|
*/
|
|
|
|
}, {
|
|
key: 'getRubberBandBox',
|
|
value: function getRubberBandBox() {
|
|
if (!this.rubberBandBox) {
|
|
this.rubberBandBox = this.selectorParentGroup.appendChild(svgFactory_.createSVGElement({
|
|
element: 'rect',
|
|
attr: {
|
|
id: 'selectorRubberBand',
|
|
fill: '#22C',
|
|
'fill-opacity': 0.15,
|
|
stroke: '#22C',
|
|
'stroke-width': 0.5,
|
|
display: 'none',
|
|
style: 'pointer-events:none'
|
|
}
|
|
}));
|
|
}
|
|
return this.rubberBandBox;
|
|
}
|
|
}]);
|
|
return SelectorManager;
|
|
}();
|
|
|
|
/**
|
|
* An object that creates SVG elements for the canvas.
|
|
*
|
|
* interface svgedit.select.SVGFactory {
|
|
* SVGElement createSVGElement(jsonMap);
|
|
* SVGSVGElement svgRoot();
|
|
* SVGSVGElement svgContent();
|
|
*
|
|
* Number currentZoom();
|
|
* }
|
|
*/
|
|
|
|
/**
|
|
* Initializes this module.
|
|
*
|
|
* @param config - An object containing configurable parameters (imgPath)
|
|
* @param svgFactory - An object implementing the SVGFactory interface (see above).
|
|
*/
|
|
var init$6 = function init(config, svgFactory) {
|
|
config_ = config;
|
|
svgFactory_ = svgFactory;
|
|
selectorManager_ = new SelectorManager();
|
|
};
|
|
|
|
/**
|
|
*
|
|
* @returns The SelectorManager instance.
|
|
*/
|
|
var getSelectorManager = function getSelectorManager() {
|
|
return selectorManager_;
|
|
};
|
|
|
|
/* eslint-disable indent */
|
|
|
|
var $$9 = jqPluginSVG(jQuery);
|
|
var MoveElementCommand$1 = MoveElementCommand,
|
|
InsertElementCommand$1 = InsertElementCommand,
|
|
RemoveElementCommand$1 = RemoveElementCommand,
|
|
ChangeElementCommand$1 = ChangeElementCommand,
|
|
BatchCommand$1 = BatchCommand,
|
|
UndoManager$1 = UndoManager,
|
|
HistoryEventTypes$1 = HistoryEventTypes;
|
|
|
|
|
|
if (!window.console) {
|
|
window.console = {};
|
|
window.console.log = function (str) {};
|
|
window.console.dir = function (str) {};
|
|
}
|
|
|
|
if (window.opera) {
|
|
window.console.log = function (str) {
|
|
opera.postError(str);
|
|
};
|
|
window.console.dir = function (str) {};
|
|
}
|
|
|
|
/**
|
|
* The main SvgCanvas class that manages all SVG-related functions
|
|
* @param container - The container HTML element that should hold the SVG root element
|
|
* @param {Object} config - An object that contains configuration data
|
|
*/
|
|
|
|
var SvgCanvas = function SvgCanvas(container, config) {
|
|
classCallCheck(this, SvgCanvas);
|
|
|
|
// Alias Namespace constants
|
|
|
|
// Default configuration options
|
|
var curConfig = {
|
|
show_outside_canvas: true,
|
|
selectNew: true,
|
|
dimensions: [640, 480]
|
|
};
|
|
|
|
// Update config with new one if given
|
|
if (config) {
|
|
$$9.extend(curConfig, config);
|
|
}
|
|
|
|
// Array with width/height of canvas
|
|
var dimensions = curConfig.dimensions;
|
|
|
|
|
|
var canvas = this;
|
|
|
|
// "document" element associated with the container (same as window.document using default svg-editor.js)
|
|
// NOTE: This is not actually a SVG document, but an HTML document.
|
|
var svgdoc = container.ownerDocument;
|
|
|
|
// This is a container for the document being edited, not the document itself.
|
|
var svgroot = svgdoc.importNode(text2xml('<svg id="svgroot" xmlns="' + NS.SVG + '" xlinkns="' + NS.XLINK + '" ' + 'width="' + dimensions[0] + '" height="' + dimensions[1] + '" x="' + dimensions[0] + '" y="' + dimensions[1] + '" overflow="visible">' + '<defs>' + '<filter id="canvashadow" filterUnits="objectBoundingBox">' + '<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>' + '<feOffset in="blur" dx="5" dy="5" result="offsetBlur"/>' + '<feMerge>' + '<feMergeNode in="offsetBlur"/>' + '<feMergeNode in="SourceGraphic"/>' + '</feMerge>' + '</filter>' + '</defs>' + '</svg>').documentElement, true);
|
|
container.appendChild(svgroot);
|
|
|
|
// The actual element that represents the final output SVG element
|
|
var svgcontent = svgdoc.createElementNS(NS.SVG, 'svg');
|
|
|
|
// This function resets the svgcontent element while keeping it in the DOM.
|
|
var clearSvgContentElement = canvas.clearSvgContentElement = function () {
|
|
$$9(svgcontent).empty();
|
|
|
|
// TODO: Clear out all other attributes first?
|
|
$$9(svgcontent).attr({
|
|
id: 'svgcontent',
|
|
width: dimensions[0],
|
|
height: dimensions[1],
|
|
x: dimensions[0],
|
|
y: dimensions[1],
|
|
overflow: curConfig.show_outside_canvas ? 'visible' : 'hidden',
|
|
xmlns: NS.SVG,
|
|
'xmlns:se': NS.SE,
|
|
'xmlns:xlink': NS.XLINK
|
|
}).appendTo(svgroot);
|
|
|
|
// TODO: make this string optional and set by the client
|
|
var comment = svgdoc.createComment(' Created with SVG-edit - https://github.com/SVG-Edit/svgedit');
|
|
svgcontent.appendChild(comment);
|
|
};
|
|
clearSvgContentElement();
|
|
|
|
// Prefix string for element IDs
|
|
var idprefix = 'svg_';
|
|
|
|
/**
|
|
* Changes the ID prefix to the given value
|
|
* @param {String} p - String with the new prefix
|
|
*/
|
|
canvas.setIdPrefix = function (p) {
|
|
idprefix = p;
|
|
};
|
|
|
|
// Current svgedit.draw.Drawing object
|
|
// @type {svgedit.draw.Drawing}
|
|
canvas.current_drawing_ = new Drawing(svgcontent, idprefix);
|
|
|
|
/**
|
|
* Returns the current Drawing.
|
|
* @returns {svgedit.draw.Drawing}
|
|
*/
|
|
var getCurrentDrawing = canvas.getCurrentDrawing = function () {
|
|
return canvas.current_drawing_;
|
|
};
|
|
|
|
// Float displaying the current zoom level (1 = 100%, .5 = 50%, etc)
|
|
var currentZoom = 1;
|
|
|
|
// pointer to current group (for in-group editing)
|
|
var currentGroup = null;
|
|
|
|
// Object containing data for the currently selected styles
|
|
var allProperties = {
|
|
shape: {
|
|
fill: (curConfig.initFill.color === 'none' ? '' : '#') + curConfig.initFill.color,
|
|
fill_paint: null,
|
|
fill_opacity: curConfig.initFill.opacity,
|
|
stroke: '#' + curConfig.initStroke.color,
|
|
stroke_paint: null,
|
|
stroke_opacity: curConfig.initStroke.opacity,
|
|
stroke_width: curConfig.initStroke.width,
|
|
stroke_dasharray: 'none',
|
|
stroke_linejoin: 'miter',
|
|
stroke_linecap: 'butt',
|
|
opacity: curConfig.initOpacity
|
|
}
|
|
};
|
|
|
|
allProperties.text = $$9.extend(true, {}, allProperties.shape);
|
|
$$9.extend(allProperties.text, {
|
|
fill: '#000000',
|
|
stroke_width: curConfig.text && curConfig.text.stroke_width,
|
|
font_size: curConfig.text && curConfig.text.font_size,
|
|
font_family: curConfig.text && curConfig.text.font_family
|
|
});
|
|
|
|
// Current shape style properties
|
|
var curShape = allProperties.shape;
|
|
|
|
// Array with all the currently selected elements
|
|
// default size of 1 until it needs to grow bigger
|
|
var selectedElements = [];
|
|
|
|
var getJsonFromSvgElement = this.getJsonFromSvgElement = function (data) {
|
|
// Text node
|
|
if (data.nodeType === 3) return data.nodeValue;
|
|
|
|
var retval = {
|
|
element: data.tagName,
|
|
// namespace: nsMap[data.namespaceURI],
|
|
attr: {},
|
|
children: []
|
|
};
|
|
|
|
// Iterate attributes
|
|
for (var i = 0, attr; attr = data.attributes[i]; i++) {
|
|
retval.attr[attr.name] = attr.value;
|
|
}
|
|
|
|
// Iterate children
|
|
for (var _i = 0, node; node = data.childNodes[_i]; _i++) {
|
|
retval.children[_i] = getJsonFromSvgElement(node);
|
|
}
|
|
|
|
return retval;
|
|
};
|
|
|
|
/**
|
|
* Create a new SVG element based on the given object keys/values and add it to the current layer
|
|
* The element will be ran through cleanupElement before being returned
|
|
*
|
|
* @param data - Object with the following keys/values:
|
|
* @param {String} data.element - tag name of the SVG element to create
|
|
* @param {Object} data.attr - Has key-value attributes to assign to the new element
|
|
* @param {Boolean} [data.curStyles] - Indicates whether current style attributes should be applied first
|
|
* @param {Array} [data.children] - Data objects to be added recursively as children
|
|
* @param {String} [data.namespace="http://www.w3.org/2000/svg"] - Indicate a (non-SVG) namespace
|
|
*
|
|
* @returns The new element
|
|
*/
|
|
var addSvgElementFromJson = this.addSvgElementFromJson = function (data) {
|
|
if (typeof data === 'string') return svgdoc.createTextNode(data);
|
|
|
|
var shape = getElem(data.attr.id);
|
|
// if shape is a path but we need to create a rect/ellipse, then remove the path
|
|
var currentLayer = getCurrentDrawing().getCurrentLayer();
|
|
if (shape && data.element !== shape.tagName) {
|
|
currentLayer.removeChild(shape);
|
|
shape = null;
|
|
}
|
|
if (!shape) {
|
|
var ns = data.namespace || NS.SVG;
|
|
shape = svgdoc.createElementNS(ns, data.element);
|
|
if (currentLayer) {
|
|
(currentGroup || currentLayer).appendChild(shape);
|
|
}
|
|
}
|
|
if (data.curStyles) {
|
|
assignAttributes(shape, {
|
|
fill: curShape.fill,
|
|
stroke: curShape.stroke,
|
|
'stroke-width': curShape.stroke_width,
|
|
'stroke-dasharray': curShape.stroke_dasharray,
|
|
'stroke-linejoin': curShape.stroke_linejoin,
|
|
'stroke-linecap': curShape.stroke_linecap,
|
|
'stroke-opacity': curShape.stroke_opacity,
|
|
'fill-opacity': curShape.fill_opacity,
|
|
opacity: curShape.opacity / 2,
|
|
style: 'pointer-events:inherit'
|
|
}, 100);
|
|
}
|
|
assignAttributes(shape, data.attr, 100);
|
|
cleanupElement(shape);
|
|
|
|
// Children
|
|
if (data.children) {
|
|
data.children.forEach(function (child) {
|
|
shape.appendChild(addSvgElementFromJson(child));
|
|
});
|
|
}
|
|
|
|
return shape;
|
|
};
|
|
|
|
canvas.getTransformList = getTransformList;
|
|
|
|
canvas.matrixMultiply = matrixMultiply;
|
|
canvas.hasMatrixTransform = hasMatrixTransform;
|
|
canvas.transformListToTransform = transformListToTransform;
|
|
|
|
// initialize from units.js
|
|
// send in an object implementing the ElementContainer interface (see units.js)
|
|
init({
|
|
getBaseUnit: function getBaseUnit() {
|
|
return curConfig.baseUnit;
|
|
},
|
|
|
|
getElement: getElem,
|
|
getHeight: function getHeight() {
|
|
return svgcontent.getAttribute('height') / currentZoom;
|
|
},
|
|
getWidth: function getWidth() {
|
|
return svgcontent.getAttribute('width') / currentZoom;
|
|
},
|
|
getRoundDigits: function getRoundDigits() {
|
|
return saveOptions.round_digits;
|
|
}
|
|
});
|
|
|
|
canvas.convertToNum = convertToNum;
|
|
|
|
var getSVGContent = function getSVGContent() {
|
|
return svgcontent;
|
|
};
|
|
|
|
/**
|
|
* @returns {Array} the array with selected DOM elements
|
|
*/
|
|
var getSelectedElements = this.getSelectedElems = function () {
|
|
return selectedElements;
|
|
};
|
|
|
|
var pathActions$$1 = pathActions;
|
|
|
|
init$2({
|
|
pathActions: pathActions$$1, // Ok since not modifying
|
|
getSVGContent: getSVGContent,
|
|
addSvgElementFromJson: addSvgElementFromJson,
|
|
getSelectedElements: getSelectedElements,
|
|
getDOMDocument: function getDOMDocument() {
|
|
return svgdoc;
|
|
},
|
|
getDOMContainer: function getDOMContainer() {
|
|
return container;
|
|
},
|
|
getSVGRoot: function getSVGRoot() {
|
|
return svgroot;
|
|
},
|
|
|
|
// TODO: replace this mostly with a way to get the current drawing.
|
|
getBaseUnit: function getBaseUnit() {
|
|
return curConfig.baseUnit;
|
|
},
|
|
getSnappingStep: function getSnappingStep() {
|
|
return curConfig.snappingStep;
|
|
}
|
|
});
|
|
|
|
canvas.findDefs = findDefs;
|
|
canvas.getUrlFromAttr = getUrlFromAttr;
|
|
canvas.getHref = getHref;
|
|
canvas.setHref = setHref;
|
|
/* const getBBox = */canvas.getBBox = getBBox;
|
|
canvas.getRotationAngle = getRotationAngle;
|
|
canvas.getElem = getElem;
|
|
canvas.getRefElem = getRefElem;
|
|
canvas.assignAttributes = assignAttributes;
|
|
this.cleanupElement = cleanupElement;
|
|
|
|
var getGridSnapping = function getGridSnapping() {
|
|
return curConfig.gridSnapping;
|
|
};
|
|
init$4({
|
|
getDrawing: function getDrawing() {
|
|
return getCurrentDrawing();
|
|
},
|
|
getSVGRoot: function getSVGRoot() {
|
|
return svgroot;
|
|
},
|
|
|
|
getGridSnapping: getGridSnapping
|
|
});
|
|
this.remapElement = remapElement;
|
|
|
|
init$5({
|
|
getSVGRoot: function getSVGRoot() {
|
|
return svgroot;
|
|
},
|
|
getStartTransform: function getStartTransform() {
|
|
return startTransform;
|
|
},
|
|
setStartTransform: function setStartTransform(transform) {
|
|
startTransform = transform;
|
|
}
|
|
});
|
|
this.recalculateDimensions = recalculateDimensions;
|
|
|
|
// import from sanitize.js
|
|
var nsMap = getReverseNS();
|
|
canvas.sanitizeSvg = sanitizeSvg;
|
|
|
|
// Implement the svgedit.history.HistoryEventHandler interface.
|
|
var undoMgr = canvas.undoMgr = new UndoManager$1({
|
|
handleHistoryEvent: function handleHistoryEvent(eventType, cmd) {
|
|
var EventTypes = HistoryEventTypes$1;
|
|
// TODO: handle setBlurOffsets.
|
|
if (eventType === EventTypes.BEFORE_UNAPPLY || eventType === EventTypes.BEFORE_APPLY) {
|
|
canvas.clearSelection();
|
|
} else if (eventType === EventTypes.AFTER_APPLY || eventType === EventTypes.AFTER_UNAPPLY) {
|
|
var elems = cmd.elements();
|
|
canvas.pathActions.clear();
|
|
call('changed', elems);
|
|
var cmdType = cmd.type();
|
|
var isApply = eventType === EventTypes.AFTER_APPLY;
|
|
if (cmdType === MoveElementCommand$1.type()) {
|
|
var parent = isApply ? cmd.newParent : cmd.oldParent;
|
|
if (parent === svgcontent) {
|
|
identifyLayers();
|
|
}
|
|
} else if (cmdType === InsertElementCommand$1.type() || cmdType === RemoveElementCommand$1.type()) {
|
|
if (cmd.parent === svgcontent) {
|
|
identifyLayers();
|
|
}
|
|
if (cmdType === InsertElementCommand$1.type()) {
|
|
if (isApply) {
|
|
restoreRefElems(cmd.elem);
|
|
}
|
|
} else {
|
|
if (!isApply) {
|
|
restoreRefElems(cmd.elem);
|
|
}
|
|
}
|
|
if (cmd.elem.tagName === 'use') {
|
|
setUseData(cmd.elem);
|
|
}
|
|
} else if (cmdType === ChangeElementCommand$1.type()) {
|
|
// if we are changing layer names, re-identify all layers
|
|
if (cmd.elem.tagName === 'title' && cmd.elem.parentNode.parentNode === svgcontent) {
|
|
identifyLayers();
|
|
}
|
|
var values = isApply ? cmd.newValues : cmd.oldValues;
|
|
// If stdDeviation was changed, update the blur.
|
|
if (values.stdDeviation) {
|
|
canvas.setBlurOffsets(cmd.elem.parentNode, values.stdDeviation);
|
|
}
|
|
// This is resolved in later versions of webkit, perhaps we should
|
|
// have a featured detection for correct 'use' behavior?
|
|
// ——————————
|
|
// Remove & Re-add hack for Webkit (issue 775)
|
|
// if (cmd.elem.tagName === 'use' && isWebkit()) {
|
|
// const {elem} = cmd;
|
|
// if (!elem.getAttribute('x') && !elem.getAttribute('y')) {
|
|
// const parent = elem.parentNode;
|
|
// const sib = elem.nextSibling;
|
|
// parent.removeChild(elem);
|
|
// parent.insertBefore(elem, sib);
|
|
// }
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
var addCommandToHistory = function addCommandToHistory(cmd) {
|
|
canvas.undoMgr.addCommandToHistory(cmd);
|
|
};
|
|
|
|
/**
|
|
* @returns The current zoom level
|
|
*/
|
|
var getCurrentZoom = this.getZoom = function () {
|
|
return currentZoom;
|
|
};
|
|
|
|
/**
|
|
* This method rounds the incoming value to the nearest value based on the `currentZoom`
|
|
* @param {Number} val
|
|
* @returns Rounded value to nearest value based on `currentZoom`
|
|
*/
|
|
var round = this.round = function (val) {
|
|
return parseInt(val * currentZoom, 10) / currentZoom;
|
|
};
|
|
|
|
// import from select.js
|
|
init$6(curConfig, {
|
|
createSVGElement: function createSVGElement(jsonMap) {
|
|
return canvas.addSvgElementFromJson(jsonMap);
|
|
},
|
|
svgRoot: function svgRoot() {
|
|
return svgroot;
|
|
},
|
|
svgContent: function svgContent() {
|
|
return svgcontent;
|
|
},
|
|
|
|
getCurrentZoom: getCurrentZoom
|
|
});
|
|
// this object manages selectors for us
|
|
var selectorManager = this.selectorManager = getSelectorManager();
|
|
|
|
var getNextId = canvas.getNextId = function () {
|
|
return getCurrentDrawing().getNextId();
|
|
};
|
|
var getId = canvas.getId = function () {
|
|
return getCurrentDrawing().getId();
|
|
};
|
|
|
|
/**
|
|
* Run the callback function associated with the given event
|
|
* @param ev - String with the event name
|
|
* @param arg - Argument to pass through to the callback function
|
|
*/
|
|
var call = function call(ev, arg) {
|
|
if (events[ev]) {
|
|
return events[ev](window, arg);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Clears the selection. The 'selected' handler is then called.
|
|
* @param {Boolean} [noCall] - When true does not call the "selected" handler
|
|
*/
|
|
var clearSelection = function clearSelection(noCall) {
|
|
selectedElements.map(function (elem) {
|
|
if (elem == null) return;
|
|
|
|
selectorManager.releaseSelector(elem);
|
|
});
|
|
selectedElements = [];
|
|
|
|
if (!noCall) {
|
|
call('selected', selectedElements);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Adds a list of elements to the selection. The 'selected' handler is then called.
|
|
* @param {Array} elemsToAdd - An array of DOM elements to add to the selection
|
|
* @param {Boolean} showGrips - Indicates whether the resize grips should be shown
|
|
*/
|
|
var addToSelection = function addToSelection(elemsToAdd, showGrips) {
|
|
if (!elemsToAdd.length) {
|
|
return;
|
|
}
|
|
// find the first null in our selectedElements array
|
|
|
|
var j = 0;
|
|
while (j < selectedElements.length) {
|
|
if (selectedElements[j] == null) {
|
|
break;
|
|
}
|
|
++j;
|
|
}
|
|
|
|
// now add each element consecutively
|
|
var i = elemsToAdd.length;
|
|
while (i--) {
|
|
var elem = elemsToAdd[i];
|
|
if (!elem) {
|
|
continue;
|
|
}
|
|
var bbox = getBBox(elem);
|
|
if (!bbox) {
|
|
continue;
|
|
}
|
|
|
|
if (elem.tagName === 'a' && elem.childNodes.length === 1) {
|
|
// Make "a" element's child be the selected element
|
|
elem = elem.firstChild;
|
|
}
|
|
|
|
// if it's not already there, add it
|
|
if (!selectedElements.includes(elem)) {
|
|
selectedElements[j] = elem;
|
|
|
|
// only the first selectedBBoxes element is ever used in the codebase these days
|
|
// if (j === 0) selectedBBoxes[0] = utilsGetBBox(elem);
|
|
j++;
|
|
var sel = selectorManager.requestSelector(elem, bbox);
|
|
|
|
if (selectedElements.length > 1) {
|
|
sel.showGrips(false);
|
|
}
|
|
}
|
|
}
|
|
call('selected', selectedElements);
|
|
|
|
if (showGrips || selectedElements.length === 1) {
|
|
selectorManager.requestSelector(selectedElements[0]).showGrips(true);
|
|
} else {
|
|
selectorManager.requestSelector(selectedElements[0]).showGrips(false);
|
|
}
|
|
|
|
// make sure the elements are in the correct order
|
|
// See: https://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition
|
|
|
|
selectedElements.sort(function (a, b) {
|
|
if (a && b && a.compareDocumentPosition) {
|
|
return 3 - (b.compareDocumentPosition(a) & 6);
|
|
}
|
|
if (a == null) {
|
|
return 1;
|
|
}
|
|
});
|
|
|
|
// Make sure first elements are not null
|
|
while (selectedElements[0] == null) {
|
|
selectedElements.shift(0);
|
|
}
|
|
};
|
|
|
|
var getOpacity = function getOpacity() {
|
|
return curShape.opacity;
|
|
};
|
|
|
|
/**
|
|
* Gets the desired element from a mouse event
|
|
* @param evt - Event object from the mouse event
|
|
* @returns DOM element we want
|
|
*/
|
|
var getMouseTarget = this.getMouseTarget = function (evt) {
|
|
if (evt == null) {
|
|
return null;
|
|
}
|
|
var mouseTarget = evt.target;
|
|
|
|
// if it was a <use>, Opera and WebKit return the SVGElementInstance
|
|
if (mouseTarget.correspondingUseElement) {
|
|
mouseTarget = mouseTarget.correspondingUseElement;
|
|
}
|
|
|
|
// for foreign content, go up until we find the foreignObject
|
|
// WebKit browsers set the mouse target to the svgcanvas div
|
|
if ([NS.MATH, NS.HTML].includes(mouseTarget.namespaceURI) && mouseTarget.id !== 'svgcanvas') {
|
|
while (mouseTarget.nodeName !== 'foreignObject') {
|
|
mouseTarget = mouseTarget.parentNode;
|
|
if (!mouseTarget) {
|
|
return svgroot;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Get the desired mouseTarget with jQuery selector-fu
|
|
// If it's root-like, select the root
|
|
var currentLayer = getCurrentDrawing().getCurrentLayer();
|
|
if ([svgroot, container, svgcontent, currentLayer].includes(mouseTarget)) {
|
|
return svgroot;
|
|
}
|
|
|
|
var $target = $$9(mouseTarget);
|
|
|
|
// If it's a selection grip, return the grip parent
|
|
if ($target.closest('#selectorParentGroup').length) {
|
|
// While we could instead have just returned mouseTarget,
|
|
// this makes it easier to indentify as being a selector grip
|
|
return selectorManager.selectorParentGroup;
|
|
}
|
|
|
|
while (mouseTarget.parentNode !== (currentGroup || currentLayer)) {
|
|
mouseTarget = mouseTarget.parentNode;
|
|
}
|
|
|
|
//
|
|
// // go up until we hit a child of a layer
|
|
// while (mouseTarget.parentNode.parentNode.tagName == 'g') {
|
|
// mouseTarget = mouseTarget.parentNode;
|
|
// }
|
|
// Webkit bubbles the mouse event all the way up to the div, so we
|
|
// set the mouseTarget to the svgroot like the other browsers
|
|
// if (mouseTarget.nodeName.toLowerCase() == 'div') {
|
|
// mouseTarget = svgroot;
|
|
// }
|
|
|
|
return mouseTarget;
|
|
};
|
|
|
|
canvas.pathActions = pathActions$$1;
|
|
function resetD(p) {
|
|
p.setAttribute('d', pathActions$$1.convertPath(p));
|
|
}
|
|
init$1({
|
|
selectorManager: selectorManager, // Ok since not changing
|
|
canvas: canvas, // Ok since not changing
|
|
call: call,
|
|
resetD: resetD,
|
|
round: round,
|
|
clearSelection: clearSelection,
|
|
addToSelection: addToSelection,
|
|
addCommandToHistory: addCommandToHistory,
|
|
remapElement: remapElement,
|
|
addSvgElementFromJson: addSvgElementFromJson,
|
|
getGridSnapping: getGridSnapping,
|
|
getOpacity: getOpacity,
|
|
getSelectedElements: getSelectedElements,
|
|
getContainer: function getContainer() {
|
|
return container;
|
|
},
|
|
setStarted: function setStarted(s) {
|
|
started = s;
|
|
},
|
|
getRubberBox: function getRubberBox() {
|
|
return rubberBox;
|
|
},
|
|
setRubberBox: function setRubberBox(rb) {
|
|
rubberBox = rb;
|
|
return rubberBox;
|
|
},
|
|
addPtsToSelection: function addPtsToSelection(_ref) {
|
|
var closedSubpath = _ref.closedSubpath,
|
|
grips = _ref.grips;
|
|
|
|
// TODO: Correct this:
|
|
pathActions$$1.canDeleteNodes = true;
|
|
pathActions$$1.closed_subpath = closedSubpath;
|
|
call('selected', grips);
|
|
},
|
|
endChanges: function endChanges(_ref2) {
|
|
var cmd = _ref2.cmd,
|
|
elem = _ref2.elem;
|
|
|
|
addCommandToHistory(cmd);
|
|
call('changed', [elem]);
|
|
},
|
|
|
|
getCurrentZoom: getCurrentZoom,
|
|
getId: getId,
|
|
getNextId: getNextId,
|
|
getMouseTarget: getMouseTarget,
|
|
getCurrentMode: function getCurrentMode() {
|
|
return currentMode;
|
|
},
|
|
setCurrentMode: function setCurrentMode(cm) {
|
|
currentMode = cm;
|
|
return currentMode;
|
|
},
|
|
getDrawnPath: function getDrawnPath() {
|
|
return drawnPath;
|
|
},
|
|
setDrawnPath: function setDrawnPath(dp) {
|
|
drawnPath = dp;
|
|
return drawnPath;
|
|
},
|
|
getSVGRoot: function getSVGRoot() {
|
|
return svgroot;
|
|
}
|
|
});
|
|
|
|
// Interface strings, usually for title elements
|
|
var uiStrings = {};
|
|
|
|
var visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use';
|
|
var refAttrs = ['clip-path', 'fill', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'stroke'];
|
|
|
|
var elData = $$9.data;
|
|
|
|
// Animation element to change the opacity of any newly created element
|
|
var opacAni = document.createElementNS(NS.SVG, 'animate');
|
|
$$9(opacAni).attr({
|
|
attributeName: 'opacity',
|
|
begin: 'indefinite',
|
|
dur: 1,
|
|
fill: 'freeze'
|
|
}).appendTo(svgroot);
|
|
|
|
var restoreRefElems = function restoreRefElems(elem) {
|
|
// Look for missing reference elements, restore any found
|
|
var attrs = $$9(elem).attr(refAttrs);
|
|
for (var o in attrs) {
|
|
var val = attrs[o];
|
|
if (val && val.startsWith('url(')) {
|
|
var id = getUrlFromAttr(val).substr(1);
|
|
var ref = getElem(id);
|
|
if (!ref) {
|
|
findDefs().appendChild(removedElements[id]);
|
|
delete removedElements[id];
|
|
}
|
|
}
|
|
}
|
|
|
|
var childs = elem.getElementsByTagName('*');
|
|
|
|
if (childs.length) {
|
|
for (var i = 0, l = childs.length; i < l; i++) {
|
|
restoreRefElems(childs[i]);
|
|
}
|
|
}
|
|
};
|
|
|
|
// (function () {
|
|
// TODO For Issue 208: this is a start on a thumbnail
|
|
// const svgthumb = svgdoc.createElementNS(NS.SVG, 'use');
|
|
// svgthumb.setAttribute('width', '100');
|
|
// svgthumb.setAttribute('height', '100');
|
|
// setHref(svgthumb, '#svgcontent');
|
|
// svgroot.appendChild(svgthumb);
|
|
// }());
|
|
|
|
// Object to contain image data for raster images that were found encodable
|
|
var encodableImages = {},
|
|
|
|
|
|
// Object with save options
|
|
saveOptions = { round_digits: 5 },
|
|
|
|
|
|
// Object with IDs for imported files, to see if one was already added
|
|
importIds = {},
|
|
|
|
|
|
// Current text style properties
|
|
curText = allProperties.text,
|
|
|
|
|
|
// Object to contain all included extensions
|
|
extensions = {},
|
|
|
|
|
|
// Map of deleted reference elements
|
|
removedElements = {};
|
|
|
|
var
|
|
// String with image URL of last loadable image
|
|
lastGoodImgUrl = curConfig.imgPath + 'logo.png',
|
|
|
|
|
|
// Boolean indicating whether or not a draw action has been started
|
|
started = false,
|
|
|
|
|
|
// String with an element's initial transform attribute value
|
|
startTransform = null,
|
|
|
|
|
|
// String indicating the current editor mode
|
|
currentMode = 'select',
|
|
|
|
|
|
// String with the current direction in which an element is being resized
|
|
currentResizeMode = 'none',
|
|
|
|
|
|
// Current general properties
|
|
curProperties = curShape,
|
|
|
|
|
|
// Array with selected elements' Bounding box object
|
|
// selectedBBoxes = new Array(1),
|
|
|
|
// The DOM element that was just selected
|
|
justSelected = null,
|
|
|
|
|
|
// DOM element for selection rectangle drawn by the user
|
|
rubberBox = null,
|
|
|
|
|
|
// Array of current BBoxes, used in getIntersectionList().
|
|
curBBoxes = [],
|
|
|
|
|
|
// Canvas point for the most recent right click
|
|
lastClickPoint = null;
|
|
|
|
// Should this return an array by default, so extension results aren't overwritten?
|
|
var runExtensions = this.runExtensions = function (action, vars, returnArray) {
|
|
var result = returnArray ? [] : false;
|
|
$$9.each(extensions, function (name, opts) {
|
|
if (opts && action in opts) {
|
|
if (returnArray) {
|
|
result.push(opts[action](vars));
|
|
} else {
|
|
result = opts[action](vars);
|
|
}
|
|
}
|
|
});
|
|
return result;
|
|
};
|
|
|
|
/**
|
|
* Add an extension to the editor
|
|
* @param {String} name - String with the ID of the extension
|
|
* @param {Function} extFunc - Function supplied by the extension with its data
|
|
*/
|
|
this.addExtension = function (name, extFunc) {
|
|
var ext = void 0;
|
|
if (!(name in extensions)) {
|
|
// Provide private vars/funcs here. Is there a better way to do this?
|
|
var argObj = $$9.extend(canvas.getPrivateMethods(), {
|
|
svgroot: svgroot,
|
|
svgcontent: svgcontent,
|
|
nonce: getCurrentDrawing().getNonce(),
|
|
selectorManager: selectorManager
|
|
});
|
|
if (typeof extFunc === 'function') {
|
|
ext = extFunc(argObj);
|
|
} else {
|
|
ext = extFunc;
|
|
if (ext.callback) {
|
|
ext.callback = ext.callback.bind(ext, argObj);
|
|
}
|
|
}
|
|
extensions[name] = ext;
|
|
call('extension_added', ext);
|
|
} else {
|
|
console.log('Cannot add extension "' + name + '", an extension by that name already exists.');
|
|
}
|
|
};
|
|
|
|
/**
|
|
* This method sends back an array or a NodeList full of elements that
|
|
* intersect the multi-select rubber-band-box on the currentLayer only.
|
|
*
|
|
* We brute-force getIntersectionList for browsers that do not support it (Firefox).
|
|
*
|
|
* Reference:
|
|
* Firefox does not implement getIntersectionList(), see https://bugzilla.mozilla.org/show_bug.cgi?id=501421
|
|
* @param rect
|
|
* @returns {Array|NodeList} Bbox elements
|
|
*/
|
|
var getIntersectionList = this.getIntersectionList = function (rect) {
|
|
if (rubberBox == null) {
|
|
return null;
|
|
}
|
|
|
|
var parent = currentGroup || getCurrentDrawing().getCurrentLayer();
|
|
|
|
var rubberBBox = void 0;
|
|
if (!rect) {
|
|
rubberBBox = rubberBox.getBBox();
|
|
var bb = svgcontent.createSVGRect();
|
|
|
|
for (var o in rubberBBox) {
|
|
bb[o] = rubberBBox[o] / currentZoom;
|
|
}
|
|
rubberBBox = bb;
|
|
} else {
|
|
rubberBBox = svgcontent.createSVGRect();
|
|
rubberBBox.x = rect.x;
|
|
rubberBBox.y = rect.y;
|
|
rubberBBox.width = rect.width;
|
|
rubberBBox.height = rect.height;
|
|
}
|
|
|
|
var resultList = null;
|
|
if (!isIE) {
|
|
if (typeof svgroot.getIntersectionList === 'function') {
|
|
// Offset the bbox of the rubber box by the offset of the svgcontent element.
|
|
rubberBBox.x += parseInt(svgcontent.getAttribute('x'), 10);
|
|
rubberBBox.y += parseInt(svgcontent.getAttribute('y'), 10);
|
|
|
|
resultList = svgroot.getIntersectionList(rubberBBox, parent);
|
|
}
|
|
}
|
|
|
|
if (resultList == null || typeof resultList.item !== 'function') {
|
|
resultList = [];
|
|
|
|
if (!curBBoxes.length) {
|
|
// Cache all bboxes
|
|
curBBoxes = getVisibleElementsAndBBoxes(parent);
|
|
}
|
|
var i = curBBoxes.length;
|
|
while (i--) {
|
|
if (!rubberBBox.width) {
|
|
continue;
|
|
}
|
|
if (rectsIntersect(rubberBBox, curBBoxes[i].bbox)) {
|
|
resultList.push(curBBoxes[i].elem);
|
|
}
|
|
}
|
|
}
|
|
|
|
// addToSelection expects an array, but it's ok to pass a NodeList
|
|
// because using square-bracket notation is allowed:
|
|
// https://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html
|
|
return resultList;
|
|
};
|
|
|
|
this.getStrokedBBox = getStrokedBBoxDefaultVisible;
|
|
|
|
this.getVisibleElements = getVisibleElements;
|
|
|
|
/**
|
|
* Get all elements that have a BBox (excludes <defs>, <title>, etc).
|
|
* Note that 0-opacity, off-screen etc elements are still considered "visible"
|
|
* for this function
|
|
* @param parent - The parent DOM element to search within
|
|
* @returns {Array} An array with objects that include:
|
|
* - elem - The element
|
|
* - bbox - The element's BBox as retrieved from `getStrokedBBoxDefaultVisible`
|
|
*/
|
|
var getVisibleElementsAndBBoxes = this.getVisibleElementsAndBBoxes = function (parent) {
|
|
if (!parent) {
|
|
parent = $$9(svgcontent).children(); // Prevent layers from being included
|
|
}
|
|
var contentElems = [];
|
|
$$9(parent).children().each(function (i, elem) {
|
|
if (elem.getBBox) {
|
|
contentElems.push({ elem: elem, bbox: getStrokedBBoxDefaultVisible([elem]) });
|
|
}
|
|
});
|
|
return contentElems.reverse();
|
|
};
|
|
|
|
/**
|
|
* Wrap an SVG element into a group element, mark the group as 'gsvg'
|
|
* @param elem - SVG element to wrap
|
|
*/
|
|
var groupSvgElem = this.groupSvgElem = function (elem) {
|
|
var g = document.createElementNS(NS.SVG, 'g');
|
|
elem.parentNode.replaceChild(g, elem);
|
|
$$9(g).append(elem).data('gsvg', elem)[0].id = getNextId();
|
|
};
|
|
|
|
// Set scope for these functions
|
|
|
|
// Object to contain editor event names and callback functions
|
|
var events = {};
|
|
|
|
canvas.call = call;
|
|
|
|
/**
|
|
* Attaches a callback function to an event
|
|
* @param {String} ev - String indicating the name of the event
|
|
* @param {Function} f - The callback function to bind to the event
|
|
* @returns The previous event
|
|
*/
|
|
canvas.bind = function (ev, f) {
|
|
var old = events[ev];
|
|
events[ev] = f;
|
|
return old;
|
|
};
|
|
|
|
/**
|
|
* Runs the SVG Document through the sanitizer and then updates its paths.
|
|
* @param newDoc - The SVG DOM document
|
|
*/
|
|
this.prepareSvg = function (newDoc) {
|
|
this.sanitizeSvg(newDoc.documentElement);
|
|
|
|
// convert paths into absolute commands
|
|
var paths = newDoc.getElementsByTagNameNS(NS.SVG, 'path');
|
|
for (var i = 0, len = paths.length; i < len; ++i) {
|
|
var path$$1 = paths[i];
|
|
path$$1.setAttribute('d', pathActions$$1.convertPath(path$$1));
|
|
pathActions$$1.fixEnd(path$$1);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Hack for Firefox bugs where text element features aren't updated or get
|
|
* messed up. See issue 136 and issue 137.
|
|
* This function clones the element and re-selects it
|
|
* @todo Test for this bug on load and add it to "support" object instead of
|
|
* browser sniffing
|
|
* @param elem - The (text) DOM element to clone
|
|
* @returns Cloned element
|
|
*/
|
|
var ffClone = function ffClone(elem) {
|
|
if (!isGecko()) {
|
|
return elem;
|
|
}
|
|
var clone = elem.cloneNode(true);
|
|
elem.parentNode.insertBefore(clone, elem);
|
|
elem.parentNode.removeChild(elem);
|
|
selectorManager.releaseSelector(elem);
|
|
selectedElements[0] = clone;
|
|
selectorManager.requestSelector(clone).showGrips(true);
|
|
return clone;
|
|
};
|
|
|
|
// this.each is deprecated, if any extension used this it can be recreated by doing this:
|
|
// $(canvas.getRootElem()).children().each(...)
|
|
|
|
// this.each = function (cb) {
|
|
// $(svgroot).children().each(cb);
|
|
// };
|
|
|
|
/**
|
|
* Removes any old rotations if present, prepends a new rotation at the
|
|
* transformed center
|
|
* @param val - The new rotation angle in degrees
|
|
* @param {Boolean} preventUndo - Indicates whether the action should be undoable or not
|
|
*/
|
|
this.setRotationAngle = function (val, preventUndo) {
|
|
// ensure val is the proper type
|
|
val = parseFloat(val);
|
|
var elem = selectedElements[0];
|
|
var oldTransform = elem.getAttribute('transform');
|
|
var bbox = getBBox(elem);
|
|
var cx = bbox.x + bbox.width / 2,
|
|
cy = bbox.y + bbox.height / 2;
|
|
var tlist = getTransformList(elem);
|
|
|
|
// only remove the real rotational transform if present (i.e. at index=0)
|
|
if (tlist.numberOfItems > 0) {
|
|
var xform = tlist.getItem(0);
|
|
if (xform.type === 4) {
|
|
tlist.removeItem(0);
|
|
}
|
|
}
|
|
// find Rnc and insert it
|
|
if (val !== 0) {
|
|
var center = transformPoint(cx, cy, transformListToTransform(tlist).matrix);
|
|
var Rnc = svgroot.createSVGTransform();
|
|
Rnc.setRotate(val, center.x, center.y);
|
|
if (tlist.numberOfItems) {
|
|
tlist.insertItemBefore(Rnc, 0);
|
|
} else {
|
|
tlist.appendItem(Rnc);
|
|
}
|
|
} else if (tlist.numberOfItems === 0) {
|
|
elem.removeAttribute('transform');
|
|
}
|
|
|
|
if (!preventUndo) {
|
|
// we need to undo it, then redo it so it can be undo-able! :)
|
|
// TODO: figure out how to make changes to transform list undo-able cross-browser?
|
|
var newTransform = elem.getAttribute('transform');
|
|
elem.setAttribute('transform', oldTransform);
|
|
changeSelectedAttribute('transform', newTransform, selectedElements);
|
|
call('changed', selectedElements);
|
|
}
|
|
// const pointGripContainer = getElem('pathpointgrip_container');
|
|
// if (elem.nodeName === 'path' && pointGripContainer) {
|
|
// pathActions.setPointContainerTransform(elem.getAttribute('transform'));
|
|
// }
|
|
var selector = selectorManager.requestSelector(selectedElements[0]);
|
|
selector.resize();
|
|
selector.updateGripCursors(val);
|
|
};
|
|
|
|
// Runs recalculateDimensions on the selected elements,
|
|
// adding the changes to a single batch command
|
|
var recalculateAllSelectedDimensions = this.recalculateAllSelectedDimensions = function () {
|
|
var text = currentResizeMode === 'none' ? 'position' : 'size';
|
|
var batchCmd = new BatchCommand$1(text);
|
|
|
|
var i = selectedElements.length;
|
|
while (i--) {
|
|
var elem = selectedElements[i];
|
|
// if (getRotationAngle(elem) && !hasMatrixTransform(getTransformList(elem))) { continue; }
|
|
var cmd = recalculateDimensions(elem);
|
|
if (cmd) {
|
|
batchCmd.addSubCommand(cmd);
|
|
}
|
|
}
|
|
|
|
if (!batchCmd.isEmpty()) {
|
|
addCommandToHistory(batchCmd);
|
|
call('changed', selectedElements);
|
|
}
|
|
};
|
|
|
|
// Debug tool to easily see the current matrix in the browser's console
|
|
var logMatrix = function logMatrix(m) {
|
|
console.log([m.a, m.b, m.c, m.d, m.e, m.f]);
|
|
};
|
|
|
|
// Root Current Transformation Matrix in user units
|
|
var rootSctm = null;
|
|
|
|
/**
|
|
* Group: Selection
|
|
*/
|
|
|
|
this.clearSelection = clearSelection;
|
|
|
|
// TODO: do we need to worry about selectedBBoxes here?
|
|
|
|
this.addToSelection = addToSelection;
|
|
|
|
/**
|
|
* Selects only the given elements, shortcut for clearSelection(); addToSelection()
|
|
* @param {Array} elems - an array of DOM elements to be selected
|
|
*/
|
|
var selectOnly = this.selectOnly = function (elems, showGrips) {
|
|
clearSelection(true);
|
|
addToSelection(elems, showGrips);
|
|
};
|
|
|
|
// TODO: could use slice here to make this faster?
|
|
// TODO: should the 'selected' handler
|
|
|
|
/**
|
|
* Removes elements from the selection.
|
|
* @param {Array} elemsToRemove - an array of elements to remove from selection
|
|
*/
|
|
/* const removeFromSelection = */this.removeFromSelection = function (elemsToRemove) {
|
|
if (selectedElements[0] == null) {
|
|
return;
|
|
}
|
|
if (!elemsToRemove.length) {
|
|
return;
|
|
}
|
|
|
|
// find every element and remove it from our array copy
|
|
var j = 0;
|
|
var newSelectedItems = [],
|
|
len = selectedElements.length;
|
|
newSelectedItems.length = len;
|
|
for (var i = 0; i < len; ++i) {
|
|
var elem = selectedElements[i];
|
|
if (elem) {
|
|
// keep the item
|
|
if (!elemsToRemove.includes(elem)) {
|
|
newSelectedItems[j] = elem;
|
|
j++;
|
|
} else {
|
|
// remove the item and its selector
|
|
selectorManager.releaseSelector(elem);
|
|
}
|
|
}
|
|
}
|
|
// the copy becomes the master now
|
|
selectedElements = newSelectedItems;
|
|
};
|
|
|
|
// Clears the selection, then adds all elements in the current layer to the selection.
|
|
this.selectAllInCurrentLayer = function () {
|
|
var currentLayer = getCurrentDrawing().getCurrentLayer();
|
|
if (currentLayer) {
|
|
currentMode = 'select';
|
|
selectOnly($$9(currentGroup || currentLayer).children());
|
|
}
|
|
};
|
|
|
|
var drawnPath = null;
|
|
|
|
// Mouse events
|
|
(function () {
|
|
var freehand = {
|
|
minx: null,
|
|
miny: null,
|
|
maxx: null,
|
|
maxy: null
|
|
};
|
|
var THRESHOLD_DIST = 0.8,
|
|
STEP_COUNT = 10;
|
|
var dAttr = null,
|
|
startX = null,
|
|
startY = null,
|
|
rStartX = null,
|
|
rStartY = null,
|
|
initBbox = {},
|
|
sumDistance = 0,
|
|
controllPoint2 = { x: 0, y: 0 },
|
|
controllPoint1 = { x: 0, y: 0 },
|
|
start = { x: 0, y: 0 },
|
|
end = { x: 0, y: 0 },
|
|
bSpline = { x: 0, y: 0 },
|
|
nextPos = { x: 0, y: 0 },
|
|
parameter = void 0,
|
|
nextParameter = void 0;
|
|
|
|
var getBsplinePoint = function getBsplinePoint(t) {
|
|
var spline = { x: 0, y: 0 },
|
|
p0 = controllPoint2,
|
|
p1 = controllPoint1,
|
|
p2 = start,
|
|
p3 = end,
|
|
S = 1.0 / 6.0,
|
|
t2 = t * t,
|
|
t3 = t2 * t;
|
|
|
|
var m = [[-1, 3, -3, 1], [3, -6, 3, 0], [-3, 0, 3, 0], [1, 4, 1, 0]];
|
|
|
|
spline.x = S * ((p0.x * m[0][0] + p1.x * m[0][1] + p2.x * m[0][2] + p3.x * m[0][3]) * t3 + (p0.x * m[1][0] + p1.x * m[1][1] + p2.x * m[1][2] + p3.x * m[1][3]) * t2 + (p0.x * m[2][0] + p1.x * m[2][1] + p2.x * m[2][2] + p3.x * m[2][3]) * t + (p0.x * m[3][0] + p1.x * m[3][1] + p2.x * m[3][2] + p3.x * m[3][3]));
|
|
spline.y = S * ((p0.y * m[0][0] + p1.y * m[0][1] + p2.y * m[0][2] + p3.y * m[0][3]) * t3 + (p0.y * m[1][0] + p1.y * m[1][1] + p2.y * m[1][2] + p3.y * m[1][3]) * t2 + (p0.y * m[2][0] + p1.y * m[2][1] + p2.y * m[2][2] + p3.y * m[2][3]) * t + (p0.y * m[3][0] + p1.y * m[3][1] + p2.y * m[3][2] + p3.y * m[3][3]));
|
|
|
|
return {
|
|
x: spline.x,
|
|
y: spline.y
|
|
};
|
|
};
|
|
// - when we are in a create mode, the element is added to the canvas
|
|
// but the action is not recorded until mousing up
|
|
// - when we are in select mode, select the element, remember the position
|
|
// and do nothing else
|
|
var mouseDown = function mouseDown(evt) {
|
|
if (canvas.spaceKey || evt.button === 1) {
|
|
return;
|
|
}
|
|
|
|
var rightClick = evt.button === 2;
|
|
|
|
if (evt.altKey) {
|
|
// duplicate when dragging
|
|
canvas.cloneSelectedElements(0, 0);
|
|
}
|
|
|
|
rootSctm = $$9('#svgcontent g')[0].getScreenCTM().inverse();
|
|
|
|
var pt = transformPoint(evt.pageX, evt.pageY, rootSctm),
|
|
mouseX = pt.x * currentZoom,
|
|
mouseY = pt.y * currentZoom;
|
|
|
|
evt.preventDefault();
|
|
|
|
if (rightClick) {
|
|
currentMode = 'select';
|
|
lastClickPoint = pt;
|
|
}
|
|
|
|
// This would seem to be unnecessary...
|
|
// if (!['select', 'resize'].includes(currentMode)) {
|
|
// setGradient();
|
|
// }
|
|
|
|
var x = mouseX / currentZoom,
|
|
y = mouseY / currentZoom;
|
|
var mouseTarget = getMouseTarget(evt);
|
|
|
|
if (mouseTarget.tagName === 'a' && mouseTarget.childNodes.length === 1) {
|
|
mouseTarget = mouseTarget.firstChild;
|
|
}
|
|
|
|
// realX/y ignores grid-snap value
|
|
var realX = x;
|
|
rStartX = startX = x;
|
|
var realY = y;
|
|
rStartY = startY = y;
|
|
|
|
if (curConfig.gridSnapping) {
|
|
x = snapToGrid(x);
|
|
y = snapToGrid(y);
|
|
startX = snapToGrid(startX);
|
|
startY = snapToGrid(startY);
|
|
}
|
|
|
|
// if it is a selector grip, then it must be a single element selected,
|
|
// set the mouseTarget to that and update the mode to rotate/resize
|
|
|
|
if (mouseTarget === selectorManager.selectorParentGroup && selectedElements[0] != null) {
|
|
var grip = evt.target;
|
|
var griptype = elData(grip, 'type');
|
|
// rotating
|
|
if (griptype === 'rotate') {
|
|
currentMode = 'rotate';
|
|
// resizing
|
|
} else if (griptype === 'resize') {
|
|
currentMode = 'resize';
|
|
currentResizeMode = elData(grip, 'dir');
|
|
}
|
|
mouseTarget = selectedElements[0];
|
|
}
|
|
|
|
startTransform = mouseTarget.getAttribute('transform');
|
|
var i = void 0,
|
|
strokeW = void 0;
|
|
var tlist = getTransformList(mouseTarget);
|
|
switch (currentMode) {
|
|
case 'select':
|
|
started = true;
|
|
currentResizeMode = 'none';
|
|
if (rightClick) {
|
|
started = false;
|
|
}
|
|
|
|
if (mouseTarget !== svgroot) {
|
|
// if this element is not yet selected, clear selection and select it
|
|
if (!selectedElements.includes(mouseTarget)) {
|
|
// only clear selection if shift is not pressed (otherwise, add
|
|
// element to selection)
|
|
if (!evt.shiftKey) {
|
|
// No need to do the call here as it will be done on addToSelection
|
|
clearSelection(true);
|
|
}
|
|
addToSelection([mouseTarget]);
|
|
justSelected = mouseTarget;
|
|
pathActions$$1.clear();
|
|
}
|
|
// else if it's a path, go into pathedit mode in mouseup
|
|
|
|
if (!rightClick) {
|
|
// insert a dummy transform so if the element(s) are moved it will have
|
|
// a transform to use for its translate
|
|
for (i = 0; i < selectedElements.length; ++i) {
|
|
if (selectedElements[i] == null) {
|
|
continue;
|
|
}
|
|
var slist = getTransformList(selectedElements[i]);
|
|
if (slist.numberOfItems) {
|
|
slist.insertItemBefore(svgroot.createSVGTransform(), 0);
|
|
} else {
|
|
slist.appendItem(svgroot.createSVGTransform());
|
|
}
|
|
}
|
|
}
|
|
} else if (!rightClick) {
|
|
clearSelection();
|
|
currentMode = 'multiselect';
|
|
if (rubberBox == null) {
|
|
rubberBox = selectorManager.getRubberBandBox();
|
|
}
|
|
rStartX *= currentZoom;
|
|
rStartY *= currentZoom;
|
|
// console.log('p',[evt.pageX, evt.pageY]);
|
|
// console.log('c',[evt.clientX, evt.clientY]);
|
|
// console.log('o',[evt.offsetX, evt.offsetY]);
|
|
// console.log('s',[startX, startY]);
|
|
|
|
assignAttributes(rubberBox, {
|
|
x: rStartX,
|
|
y: rStartY,
|
|
width: 0,
|
|
height: 0,
|
|
display: 'inline'
|
|
}, 100);
|
|
}
|
|
break;
|
|
case 'zoom':
|
|
started = true;
|
|
if (rubberBox == null) {
|
|
rubberBox = selectorManager.getRubberBandBox();
|
|
}
|
|
assignAttributes(rubberBox, {
|
|
x: realX * currentZoom,
|
|
y: realX * currentZoom,
|
|
width: 0,
|
|
height: 0,
|
|
display: 'inline'
|
|
}, 100);
|
|
break;
|
|
case 'resize':
|
|
started = true;
|
|
startX = x;
|
|
startY = y;
|
|
|
|
// Getting the BBox from the selection box, since we know we
|
|
// want to orient around it
|
|
initBbox = getBBox($$9('#selectedBox0')[0]);
|
|
var bb = {};
|
|
$$9.each(initBbox, function (key, val) {
|
|
bb[key] = val / currentZoom;
|
|
});
|
|
initBbox = bb;
|
|
|
|
// append three dummy transforms to the tlist so that
|
|
// we can translate,scale,translate in mousemove
|
|
var pos = getRotationAngle(mouseTarget) ? 1 : 0;
|
|
|
|
if (hasMatrixTransform(tlist)) {
|
|
tlist.insertItemBefore(svgroot.createSVGTransform(), pos);
|
|
tlist.insertItemBefore(svgroot.createSVGTransform(), pos);
|
|
tlist.insertItemBefore(svgroot.createSVGTransform(), pos);
|
|
} else {
|
|
tlist.appendItem(svgroot.createSVGTransform());
|
|
tlist.appendItem(svgroot.createSVGTransform());
|
|
tlist.appendItem(svgroot.createSVGTransform());
|
|
|
|
if (supportsNonScalingStroke()) {
|
|
// Handle crash for newer Chrome and Safari 6 (Mobile and Desktop):
|
|
// https://code.google.com/p/svg-edit/issues/detail?id=904
|
|
// Chromium issue: https://code.google.com/p/chromium/issues/detail?id=114625
|
|
// TODO: Remove this workaround once vendor fixes the issue
|
|
var iswebkit = isWebkit();
|
|
|
|
var delayedStroke = void 0;
|
|
if (iswebkit) {
|
|
delayedStroke = function delayedStroke(ele) {
|
|
var _stroke = ele.getAttributeNS(null, 'stroke');
|
|
ele.removeAttributeNS(null, 'stroke');
|
|
// Re-apply stroke after delay. Anything higher than 1 seems to cause flicker
|
|
if (_stroke !== null) setTimeout(function () {
|
|
ele.setAttributeNS(null, 'stroke', _stroke);
|
|
}, 0);
|
|
};
|
|
}
|
|
mouseTarget.style.vectorEffect = 'non-scaling-stroke';
|
|
if (iswebkit) {
|
|
delayedStroke(mouseTarget);
|
|
}
|
|
|
|
var all = mouseTarget.getElementsByTagName('*'),
|
|
len = all.length;
|
|
for (i = 0; i < len; i++) {
|
|
all[i].style.vectorEffect = 'non-scaling-stroke';
|
|
if (iswebkit) {
|
|
delayedStroke(all[i]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
case 'fhellipse':
|
|
case 'fhrect':
|
|
case 'fhpath':
|
|
start.x = realX;
|
|
start.y = realY;
|
|
started = true;
|
|
dAttr = realX + ',' + realY + ' ';
|
|
strokeW = parseFloat(curShape.stroke_width) === 0 ? 1 : curShape.stroke_width;
|
|
addSvgElementFromJson({
|
|
element: 'polyline',
|
|
curStyles: true,
|
|
attr: {
|
|
points: dAttr,
|
|
id: getNextId(),
|
|
fill: 'none',
|
|
opacity: curShape.opacity / 2,
|
|
'stroke-linecap': 'round',
|
|
style: 'pointer-events:none'
|
|
}
|
|
});
|
|
freehand.minx = realX;
|
|
freehand.maxx = realX;
|
|
freehand.miny = realY;
|
|
freehand.maxy = realY;
|
|
break;
|
|
case 'image':
|
|
started = true;
|
|
var newImage = addSvgElementFromJson({
|
|
element: 'image',
|
|
attr: {
|
|
x: x,
|
|
y: y,
|
|
width: 0,
|
|
height: 0,
|
|
id: getNextId(),
|
|
opacity: curShape.opacity / 2,
|
|
style: 'pointer-events:inherit'
|
|
}
|
|
});
|
|
setHref(newImage, lastGoodImgUrl);
|
|
preventClickDefault(newImage);
|
|
break;
|
|
case 'square':
|
|
// FIXME: once we create the rect, we lose information that this was a square
|
|
// (for resizing purposes this could be important)
|
|
// Fallthrough
|
|
case 'rect':
|
|
started = true;
|
|
startX = x;
|
|
startY = y;
|
|
addSvgElementFromJson({
|
|
element: 'rect',
|
|
curStyles: true,
|
|
attr: {
|
|
x: x,
|
|
y: y,
|
|
width: 0,
|
|
height: 0,
|
|
id: getNextId(),
|
|
opacity: curShape.opacity / 2
|
|
}
|
|
});
|
|
break;
|
|
case 'line':
|
|
started = true;
|
|
strokeW = Number(curShape.stroke_width) === 0 ? 1 : curShape.stroke_width;
|
|
addSvgElementFromJson({
|
|
element: 'line',
|
|
curStyles: true,
|
|
attr: {
|
|
x1: x,
|
|
y1: y,
|
|
x2: x,
|
|
y2: y,
|
|
id: getNextId(),
|
|
stroke: curShape.stroke,
|
|
'stroke-width': strokeW,
|
|
'stroke-dasharray': curShape.stroke_dasharray,
|
|
'stroke-linejoin': curShape.stroke_linejoin,
|
|
'stroke-linecap': curShape.stroke_linecap,
|
|
'stroke-opacity': curShape.stroke_opacity,
|
|
fill: 'none',
|
|
opacity: curShape.opacity / 2,
|
|
style: 'pointer-events:none'
|
|
}
|
|
});
|
|
break;
|
|
case 'circle':
|
|
started = true;
|
|
addSvgElementFromJson({
|
|
element: 'circle',
|
|
curStyles: true,
|
|
attr: {
|
|
cx: x,
|
|
cy: y,
|
|
r: 0,
|
|
id: getNextId(),
|
|
opacity: curShape.opacity / 2
|
|
}
|
|
});
|
|
break;
|
|
case 'ellipse':
|
|
started = true;
|
|
addSvgElementFromJson({
|
|
element: 'ellipse',
|
|
curStyles: true,
|
|
attr: {
|
|
cx: x,
|
|
cy: y,
|
|
rx: 0,
|
|
ry: 0,
|
|
id: getNextId(),
|
|
opacity: curShape.opacity / 2
|
|
}
|
|
});
|
|
break;
|
|
case 'text':
|
|
started = true;
|
|
/* const newText = */addSvgElementFromJson({
|
|
element: 'text',
|
|
curStyles: true,
|
|
attr: {
|
|
x: x,
|
|
y: y,
|
|
id: getNextId(),
|
|
fill: curText.fill,
|
|
'stroke-width': curText.stroke_width,
|
|
'font-size': curText.font_size,
|
|
'font-family': curText.font_family,
|
|
'text-anchor': 'middle',
|
|
'xml:space': 'preserve',
|
|
opacity: curShape.opacity
|
|
}
|
|
});
|
|
// newText.textContent = 'text';
|
|
break;
|
|
case 'path':
|
|
// Fall through
|
|
case 'pathedit':
|
|
startX *= currentZoom;
|
|
startY *= currentZoom;
|
|
pathActions$$1.mouseDown(evt, mouseTarget, startX, startY);
|
|
started = true;
|
|
break;
|
|
case 'textedit':
|
|
startX *= currentZoom;
|
|
startY *= currentZoom;
|
|
textActions.mouseDown(evt, mouseTarget, startX, startY);
|
|
started = true;
|
|
break;
|
|
case 'rotate':
|
|
started = true;
|
|
// we are starting an undoable change (a drag-rotation)
|
|
canvas.undoMgr.beginUndoableChange('transform', selectedElements);
|
|
break;
|
|
default:
|
|
// This could occur in an extension
|
|
break;
|
|
}
|
|
|
|
var extResult = runExtensions('mouseDown', {
|
|
event: evt,
|
|
start_x: startX,
|
|
start_y: startY,
|
|
selectedElements: selectedElements
|
|
}, true);
|
|
|
|
$$9.each(extResult, function (i, r) {
|
|
if (r && r.started) {
|
|
started = true;
|
|
}
|
|
});
|
|
};
|
|
|
|
// in this function we do not record any state changes yet (but we do update
|
|
// any elements that are still being created, moved or resized on the canvas)
|
|
var mouseMove = function mouseMove(evt) {
|
|
if (!started) {
|
|
return;
|
|
}
|
|
if (evt.button === 1 || canvas.spaceKey) {
|
|
return;
|
|
}
|
|
|
|
var i = void 0,
|
|
xya = void 0,
|
|
c = void 0,
|
|
cx = void 0,
|
|
cy = void 0,
|
|
dx = void 0,
|
|
dy = void 0,
|
|
len = void 0,
|
|
angle = void 0,
|
|
box = void 0,
|
|
selected = selectedElements[0];
|
|
var pt = transformPoint(evt.pageX, evt.pageY, rootSctm),
|
|
mouseX = pt.x * currentZoom,
|
|
mouseY = pt.y * currentZoom,
|
|
shape = getElem(getId());
|
|
|
|
var realX = mouseX / currentZoom;
|
|
var x = realX;
|
|
var realY = mouseY / currentZoom;
|
|
var y = realY;
|
|
|
|
if (curConfig.gridSnapping) {
|
|
x = snapToGrid(x);
|
|
y = snapToGrid(y);
|
|
}
|
|
|
|
evt.preventDefault();
|
|
var tlist = void 0;
|
|
switch (currentMode) {
|
|
case 'select':
|
|
{
|
|
// we temporarily use a translate on the element(s) being dragged
|
|
// this transform is removed upon mousing up and the element is
|
|
// relocated to the new location
|
|
if (selectedElements[0] !== null) {
|
|
dx = x - startX;
|
|
dy = y - startY;
|
|
|
|
if (curConfig.gridSnapping) {
|
|
dx = snapToGrid(dx);
|
|
dy = snapToGrid(dy);
|
|
}
|
|
|
|
if (evt.shiftKey) {
|
|
xya = snapToAngle(startX, startY, x, y);
|
|
var _xya = xya;
|
|
x = _xya.x;
|
|
y = _xya.y;
|
|
}
|
|
|
|
if (dx !== 0 || dy !== 0) {
|
|
len = selectedElements.length;
|
|
for (i = 0; i < len; ++i) {
|
|
selected = selectedElements[i];
|
|
if (selected == null) {
|
|
break;
|
|
}
|
|
// if (i === 0) {
|
|
// const box = utilsGetBBox(selected);
|
|
// selectedBBoxes[i].x = box.x + dx;
|
|
// selectedBBoxes[i].y = box.y + dy;
|
|
// }
|
|
|
|
// update the dummy transform in our transform list
|
|
// to be a translate
|
|
var xform = svgroot.createSVGTransform();
|
|
tlist = getTransformList(selected);
|
|
// Note that if Webkit and there's no ID for this
|
|
// element, the dummy transform may have gotten lost.
|
|
// This results in unexpected behaviour
|
|
|
|
xform.setTranslate(dx, dy);
|
|
if (tlist.numberOfItems) {
|
|
tlist.replaceItem(xform, 0);
|
|
} else {
|
|
tlist.appendItem(xform);
|
|
}
|
|
|
|
// update our internal bbox that we're tracking while dragging
|
|
selectorManager.requestSelector(selected).resize();
|
|
}
|
|
|
|
call('transition', selectedElements);
|
|
}
|
|
}
|
|
break;
|
|
}case 'multiselect':
|
|
{
|
|
realX *= currentZoom;
|
|
realY *= currentZoom;
|
|
assignAttributes(rubberBox, {
|
|
x: Math.min(rStartX, realX),
|
|
y: Math.min(rStartY, realY),
|
|
width: Math.abs(realX - rStartX),
|
|
height: Math.abs(realY - rStartY)
|
|
}, 100);
|
|
|
|
// for each selected:
|
|
// - if newList contains selected, do nothing
|
|
// - if newList doesn't contain selected, remove it from selected
|
|
// - for any newList that was not in selectedElements, add it to selected
|
|
var elemsToRemove = selectedElements.slice(),
|
|
elemsToAdd = [],
|
|
newList = getIntersectionList();
|
|
|
|
// For every element in the intersection, add if not present in selectedElements.
|
|
len = newList.length;
|
|
for (i = 0; i < len; ++i) {
|
|
var intElem = newList[i];
|
|
// Found an element that was not selected before, so we should add it.
|
|
if (!selectedElements.includes(intElem)) {
|
|
elemsToAdd.push(intElem);
|
|
}
|
|
// Found an element that was already selected, so we shouldn't remove it.
|
|
var foundInd = elemsToRemove.indexOf(intElem);
|
|
if (foundInd !== -1) {
|
|
elemsToRemove.splice(foundInd, 1);
|
|
}
|
|
}
|
|
|
|
if (elemsToRemove.length > 0) {
|
|
canvas.removeFromSelection(elemsToRemove);
|
|
}
|
|
|
|
if (elemsToAdd.length > 0) {
|
|
canvas.addToSelection(elemsToAdd);
|
|
}
|
|
|
|
break;
|
|
}case 'resize':
|
|
{
|
|
// we track the resize bounding box and translate/scale the selected element
|
|
// while the mouse is down, when mouse goes up, we use this to recalculate
|
|
// the shape's coordinates
|
|
tlist = getTransformList(selected);
|
|
var hasMatrix = hasMatrixTransform(tlist);
|
|
box = hasMatrix ? initBbox : getBBox(selected);
|
|
var left = box.x,
|
|
top = box.y,
|
|
_box = box,
|
|
width = _box.width,
|
|
height = _box.height;
|
|
|
|
dx = x - startX;
|
|
dy = y - startY;
|
|
|
|
if (curConfig.gridSnapping) {
|
|
dx = snapToGrid(dx);
|
|
dy = snapToGrid(dy);
|
|
height = snapToGrid(height);
|
|
width = snapToGrid(width);
|
|
}
|
|
|
|
// if rotated, adjust the dx,dy values
|
|
angle = getRotationAngle(selected);
|
|
if (angle) {
|
|
var r = Math.sqrt(dx * dx + dy * dy),
|
|
theta = Math.atan2(dy, dx) - angle * Math.PI / 180.0;
|
|
dx = r * Math.cos(theta);
|
|
dy = r * Math.sin(theta);
|
|
}
|
|
|
|
// if not stretching in y direction, set dy to 0
|
|
// if not stretching in x direction, set dx to 0
|
|
if (!currentResizeMode.includes('n') && !currentResizeMode.includes('s')) {
|
|
dy = 0;
|
|
}
|
|
if (!currentResizeMode.includes('e') && !currentResizeMode.includes('w')) {
|
|
dx = 0;
|
|
}
|
|
|
|
var // ts = null,
|
|
tx = 0,
|
|
ty = 0,
|
|
sy = height ? (height + dy) / height : 1,
|
|
sx = width ? (width + dx) / width : 1;
|
|
// if we are dragging on the north side, then adjust the scale factor and ty
|
|
if (currentResizeMode.includes('n')) {
|
|
sy = height ? (height - dy) / height : 1;
|
|
ty = height;
|
|
}
|
|
|
|
// if we dragging on the east side, then adjust the scale factor and tx
|
|
if (currentResizeMode.includes('w')) {
|
|
sx = width ? (width - dx) / width : 1;
|
|
tx = width;
|
|
}
|
|
|
|
// update the transform list with translate,scale,translate
|
|
var translateOrigin = svgroot.createSVGTransform(),
|
|
scale = svgroot.createSVGTransform(),
|
|
translateBack = svgroot.createSVGTransform();
|
|
|
|
if (curConfig.gridSnapping) {
|
|
left = snapToGrid(left);
|
|
tx = snapToGrid(tx);
|
|
top = snapToGrid(top);
|
|
ty = snapToGrid(ty);
|
|
}
|
|
|
|
translateOrigin.setTranslate(-(left + tx), -(top + ty));
|
|
if (evt.shiftKey) {
|
|
if (sx === 1) {
|
|
sx = sy;
|
|
} else {
|
|
sy = sx;
|
|
}
|
|
}
|
|
scale.setScale(sx, sy);
|
|
|
|
translateBack.setTranslate(left + tx, top + ty);
|
|
if (hasMatrix) {
|
|
var diff = angle ? 1 : 0;
|
|
tlist.replaceItem(translateOrigin, 2 + diff);
|
|
tlist.replaceItem(scale, 1 + diff);
|
|
tlist.replaceItem(translateBack, Number(diff));
|
|
} else {
|
|
var N = tlist.numberOfItems;
|
|
tlist.replaceItem(translateBack, N - 3);
|
|
tlist.replaceItem(scale, N - 2);
|
|
tlist.replaceItem(translateOrigin, N - 1);
|
|
}
|
|
|
|
selectorManager.requestSelector(selected).resize();
|
|
|
|
call('transition', selectedElements);
|
|
|
|
break;
|
|
}case 'zoom':
|
|
{
|
|
realX *= currentZoom;
|
|
realY *= currentZoom;
|
|
assignAttributes(rubberBox, {
|
|
x: Math.min(rStartX * currentZoom, realX),
|
|
y: Math.min(rStartY * currentZoom, realY),
|
|
width: Math.abs(realX - rStartX * currentZoom),
|
|
height: Math.abs(realY - rStartY * currentZoom)
|
|
}, 100);
|
|
break;
|
|
}case 'text':
|
|
{
|
|
assignAttributes(shape, {
|
|
x: x,
|
|
y: y
|
|
}, 1000);
|
|
break;
|
|
}case 'line':
|
|
{
|
|
if (curConfig.gridSnapping) {
|
|
x = snapToGrid(x);
|
|
y = snapToGrid(y);
|
|
}
|
|
|
|
var x2 = x;
|
|
var y2 = y;
|
|
|
|
if (evt.shiftKey) {
|
|
xya = snapToAngle(startX, startY, x2, y2);
|
|
x2 = xya.x;
|
|
y2 = xya.y;
|
|
}
|
|
|
|
shape.setAttributeNS(null, 'x2', x2);
|
|
shape.setAttributeNS(null, 'y2', y2);
|
|
break;
|
|
}case 'foreignObject':
|
|
// fall through
|
|
case 'square':
|
|
// fall through
|
|
case 'rect':
|
|
// fall through
|
|
case 'image':
|
|
{
|
|
var square = currentMode === 'square' || evt.shiftKey;
|
|
var w = Math.abs(x - startX),
|
|
h = Math.abs(y - startY);
|
|
var newX = void 0,
|
|
newY = void 0;
|
|
if (square) {
|
|
w = h = Math.max(w, h);
|
|
newX = startX < x ? startX : startX - w;
|
|
newY = startY < y ? startY : startY - h;
|
|
} else {
|
|
newX = Math.min(startX, x);
|
|
newY = Math.min(startY, y);
|
|
}
|
|
|
|
if (curConfig.gridSnapping) {
|
|
w = snapToGrid(w);
|
|
h = snapToGrid(h);
|
|
newX = snapToGrid(newX);
|
|
newY = snapToGrid(newY);
|
|
}
|
|
|
|
assignAttributes(shape, {
|
|
width: w,
|
|
height: h,
|
|
x: newX,
|
|
y: newY
|
|
}, 1000);
|
|
|
|
break;
|
|
}case 'circle':
|
|
{
|
|
c = $$9(shape).attr(['cx', 'cy']);
|
|
var _c = c;
|
|
cx = _c.cx;
|
|
cy = _c.cy;
|
|
|
|
var rad = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy));
|
|
if (curConfig.gridSnapping) {
|
|
rad = snapToGrid(rad);
|
|
}
|
|
shape.setAttributeNS(null, 'r', rad);
|
|
break;
|
|
}case 'ellipse':
|
|
{
|
|
c = $$9(shape).attr(['cx', 'cy']);
|
|
var _c2 = c;
|
|
cx = _c2.cx;
|
|
cy = _c2.cy;
|
|
|
|
if (curConfig.gridSnapping) {
|
|
x = snapToGrid(x);
|
|
cx = snapToGrid(cx);
|
|
y = snapToGrid(y);
|
|
cy = snapToGrid(cy);
|
|
}
|
|
shape.setAttributeNS(null, 'rx', Math.abs(x - cx));
|
|
var ry = Math.abs(evt.shiftKey ? x - cx : y - cy);
|
|
shape.setAttributeNS(null, 'ry', ry);
|
|
break;
|
|
}
|
|
case 'fhellipse':
|
|
case 'fhrect':
|
|
{
|
|
freehand.minx = Math.min(realX, freehand.minx);
|
|
freehand.maxx = Math.max(realX, freehand.maxx);
|
|
freehand.miny = Math.min(realY, freehand.miny);
|
|
freehand.maxy = Math.max(realY, freehand.maxy);
|
|
}
|
|
// Fallthrough
|
|
case 'fhpath':
|
|
{
|
|
// dAttr += + realX + ',' + realY + ' ';
|
|
// shape.setAttributeNS(null, 'points', dAttr);
|
|
end.x = realX;end.y = realY;
|
|
if (controllPoint2.x && controllPoint2.y) {
|
|
for (i = 0; i < STEP_COUNT - 1; i++) {
|
|
parameter = i / STEP_COUNT;
|
|
nextParameter = (i + 1) / STEP_COUNT;
|
|
bSpline = getBsplinePoint(nextParameter);
|
|
nextPos = bSpline;
|
|
bSpline = getBsplinePoint(parameter);
|
|
sumDistance += Math.sqrt((nextPos.x - bSpline.x) * (nextPos.x - bSpline.x) + (nextPos.y - bSpline.y) * (nextPos.y - bSpline.y));
|
|
if (sumDistance > THRESHOLD_DIST) {
|
|
dAttr += +bSpline.x + ',' + bSpline.y + ' ';
|
|
shape.setAttributeNS(null, 'points', dAttr);
|
|
sumDistance -= THRESHOLD_DIST;
|
|
}
|
|
}
|
|
}
|
|
controllPoint2 = { x: controllPoint1.x, y: controllPoint1.y };
|
|
controllPoint1 = { x: start.x, y: start.y };
|
|
start = { x: end.x, y: end.y };
|
|
break;
|
|
// update path stretch line coordinates
|
|
}case 'path':
|
|
|
|
// fall through
|
|
case 'pathedit':
|
|
{
|
|
x *= currentZoom;
|
|
y *= currentZoom;
|
|
|
|
if (curConfig.gridSnapping) {
|
|
x = snapToGrid(x);
|
|
y = snapToGrid(y);
|
|
startX = snapToGrid(startX);
|
|
startY = snapToGrid(startY);
|
|
}
|
|
if (evt.shiftKey) {
|
|
var path$$1 = path;
|
|
|
|
var x1 = void 0,
|
|
y1 = void 0;
|
|
if (path$$1) {
|
|
x1 = path$$1.dragging ? path$$1.dragging[0] : startX;
|
|
y1 = path$$1.dragging ? path$$1.dragging[1] : startY;
|
|
} else {
|
|
x1 = startX;
|
|
y1 = startY;
|
|
}
|
|
xya = snapToAngle(x1, y1, x, y);
|
|
var _xya2 = xya;
|
|
x = _xya2.x;
|
|
y = _xya2.y;
|
|
}
|
|
|
|
if (rubberBox && rubberBox.getAttribute('display') !== 'none') {
|
|
realX *= currentZoom;
|
|
realY *= currentZoom;
|
|
assignAttributes(rubberBox, {
|
|
x: Math.min(rStartX * currentZoom, realX),
|
|
y: Math.min(rStartY * currentZoom, realY),
|
|
width: Math.abs(realX - rStartX * currentZoom),
|
|
height: Math.abs(realY - rStartY * currentZoom)
|
|
}, 100);
|
|
}
|
|
pathActions$$1.mouseMove(x, y);
|
|
|
|
break;
|
|
}case 'textedit':
|
|
{
|
|
x *= currentZoom;
|
|
y *= currentZoom;
|
|
// if (rubberBox && rubberBox.getAttribute('display') !== 'none') {
|
|
// assignAttributes(rubberBox, {
|
|
// x: Math.min(startX, x),
|
|
// y: Math.min(startY, y),
|
|
// width: Math.abs(x - startX),
|
|
// height: Math.abs(y - startY)
|
|
// }, 100);
|
|
// }
|
|
|
|
textActions.mouseMove(mouseX, mouseY);
|
|
|
|
break;
|
|
}case 'rotate':
|
|
{
|
|
box = getBBox(selected);
|
|
cx = box.x + box.width / 2;
|
|
cy = box.y + box.height / 2;
|
|
var m = getMatrix(selected),
|
|
center = transformPoint(cx, cy, m);
|
|
cx = center.x;
|
|
cy = center.y;
|
|
angle = (Math.atan2(cy - y, cx - x) * (180 / Math.PI) - 90) % 360;
|
|
if (curConfig.gridSnapping) {
|
|
angle = snapToGrid(angle);
|
|
}
|
|
if (evt.shiftKey) {
|
|
// restrict rotations to nice angles (WRS)
|
|
var snap = 45;
|
|
angle = Math.round(angle / snap) * snap;
|
|
}
|
|
|
|
canvas.setRotationAngle(angle < -180 ? 360 + angle : angle, true);
|
|
call('transition', selectedElements);
|
|
break;
|
|
}default:
|
|
break;
|
|
}
|
|
|
|
runExtensions('mouseMove', {
|
|
event: evt,
|
|
mouse_x: mouseX,
|
|
mouse_y: mouseY,
|
|
selected: selected
|
|
});
|
|
}; // mouseMove()
|
|
|
|
// - in create mode, the element's opacity is set properly, we create an InsertElementCommand
|
|
// and store it on the Undo stack
|
|
// - in move/resize mode, the element's attributes which were affected by the move/resize are
|
|
// identified, a ChangeElementCommand is created and stored on the stack for those attrs
|
|
// this is done in when we recalculate the selected dimensions()
|
|
var mouseUp = function mouseUp(evt) {
|
|
if (evt.button === 2) {
|
|
return;
|
|
}
|
|
var tempJustSelected = justSelected;
|
|
justSelected = null;
|
|
if (!started) {
|
|
return;
|
|
}
|
|
var pt = transformPoint(evt.pageX, evt.pageY, rootSctm),
|
|
mouseX = pt.x * currentZoom,
|
|
mouseY = pt.y * currentZoom,
|
|
x = mouseX / currentZoom,
|
|
y = mouseY / currentZoom;
|
|
|
|
var element = getElem(getId());
|
|
var keep = false;
|
|
|
|
var realX = x;
|
|
var realY = y;
|
|
started = false;
|
|
var attrs = void 0,
|
|
t = void 0;
|
|
switch (currentMode) {
|
|
// intentionally fall-through to select here
|
|
case 'resize':
|
|
case 'multiselect':
|
|
if (rubberBox != null) {
|
|
rubberBox.setAttribute('display', 'none');
|
|
curBBoxes = [];
|
|
}
|
|
currentMode = 'select';
|
|
// Fallthrough
|
|
case 'select':
|
|
if (selectedElements[0] != null) {
|
|
// if we only have one selected element
|
|
if (selectedElements[1] == null) {
|
|
// set our current stroke/fill properties to the element's
|
|
var selected = selectedElements[0];
|
|
switch (selected.tagName) {
|
|
case 'g':
|
|
case 'use':
|
|
case 'image':
|
|
case 'foreignObject':
|
|
break;
|
|
default:
|
|
curProperties.fill = selected.getAttribute('fill');
|
|
curProperties.fill_opacity = selected.getAttribute('fill-opacity');
|
|
curProperties.stroke = selected.getAttribute('stroke');
|
|
curProperties.stroke_opacity = selected.getAttribute('stroke-opacity');
|
|
curProperties.stroke_width = selected.getAttribute('stroke-width');
|
|
curProperties.stroke_dasharray = selected.getAttribute('stroke-dasharray');
|
|
curProperties.stroke_linejoin = selected.getAttribute('stroke-linejoin');
|
|
curProperties.stroke_linecap = selected.getAttribute('stroke-linecap');
|
|
}
|
|
|
|
if (selected.tagName === 'text') {
|
|
curText.font_size = selected.getAttribute('font-size');
|
|
curText.font_family = selected.getAttribute('font-family');
|
|
}
|
|
selectorManager.requestSelector(selected).showGrips(true);
|
|
|
|
// This shouldn't be necessary as it was done on mouseDown...
|
|
// call('selected', [selected]);
|
|
}
|
|
// always recalculate dimensions to strip off stray identity transforms
|
|
recalculateAllSelectedDimensions();
|
|
// if it was being dragged/resized
|
|
if (realX !== rStartX || realY !== rStartY) {
|
|
var len = selectedElements.length;
|
|
for (var i = 0; i < len; ++i) {
|
|
if (selectedElements[i] == null) {
|
|
break;
|
|
}
|
|
if (!selectedElements[i].firstChild) {
|
|
// Not needed for groups (incorrectly resizes elems), possibly not needed at all?
|
|
selectorManager.requestSelector(selectedElements[i]).resize();
|
|
}
|
|
}
|
|
// no change in position/size, so maybe we should move to pathedit
|
|
} else {
|
|
t = evt.target;
|
|
if (selectedElements[0].nodeName === 'path' && selectedElements[1] == null) {
|
|
pathActions$$1.select(selectedElements[0]);
|
|
// if it was a path
|
|
// else, if it was selected and this is a shift-click, remove it from selection
|
|
} else if (evt.shiftKey) {
|
|
if (tempJustSelected !== t) {
|
|
canvas.removeFromSelection([t]);
|
|
}
|
|
}
|
|
} // no change in mouse position
|
|
|
|
// Remove non-scaling stroke
|
|
if (supportsNonScalingStroke()) {
|
|
var elem = selectedElements[0];
|
|
if (elem) {
|
|
elem.removeAttribute('style');
|
|
walkTree(elem, function (elem) {
|
|
elem.removeAttribute('style');
|
|
});
|
|
}
|
|
}
|
|
}
|
|
return;
|
|
case 'zoom':
|
|
if (rubberBox != null) {
|
|
rubberBox.setAttribute('display', 'none');
|
|
}
|
|
var factor = evt.shiftKey ? 0.5 : 2;
|
|
call('zoomed', {
|
|
x: Math.min(rStartX, realX),
|
|
y: Math.min(rStartY, realY),
|
|
width: Math.abs(realX - rStartX),
|
|
height: Math.abs(realY - rStartY),
|
|
factor: factor
|
|
});
|
|
return;
|
|
case 'fhpath':
|
|
// Check that the path contains at least 2 points; a degenerate one-point path
|
|
// causes problems.
|
|
// Webkit ignores how we set the points attribute with commas and uses space
|
|
// to separate all coordinates, see https://bugs.webkit.org/show_bug.cgi?id=29870
|
|
sumDistance = 0;
|
|
controllPoint2 = { x: 0, y: 0 };
|
|
controllPoint1 = { x: 0, y: 0 };
|
|
start = { x: 0, y: 0 };
|
|
end = { x: 0, y: 0 };
|
|
var coords = element.getAttribute('points');
|
|
var commaIndex = coords.indexOf(',');
|
|
if (commaIndex >= 0) {
|
|
keep = coords.indexOf(',', commaIndex + 1) >= 0;
|
|
} else {
|
|
keep = coords.indexOf(' ', coords.indexOf(' ') + 1) >= 0;
|
|
}
|
|
if (keep) {
|
|
element = pathActions$$1.smoothPolylineIntoPath(element);
|
|
}
|
|
break;
|
|
case 'line':
|
|
attrs = $$9(element).attr(['x1', 'x2', 'y1', 'y2']);
|
|
keep = attrs.x1 !== attrs.x2 || attrs.y1 !== attrs.y2;
|
|
break;
|
|
case 'foreignObject':
|
|
case 'square':
|
|
case 'rect':
|
|
case 'image':
|
|
attrs = $$9(element).attr(['width', 'height']);
|
|
// Image should be kept regardless of size (use inherit dimensions later)
|
|
keep = attrs.width !== '0' || attrs.height !== '0' || currentMode === 'image';
|
|
break;
|
|
case 'circle':
|
|
keep = element.getAttribute('r') !== '0';
|
|
break;
|
|
case 'ellipse':
|
|
attrs = $$9(element).attr(['rx', 'ry']);
|
|
keep = attrs.rx != null || attrs.ry != null;
|
|
break;
|
|
case 'fhellipse':
|
|
if (freehand.maxx - freehand.minx > 0 && freehand.maxy - freehand.miny > 0) {
|
|
element = addSvgElementFromJson({
|
|
element: 'ellipse',
|
|
curStyles: true,
|
|
attr: {
|
|
cx: (freehand.minx + freehand.maxx) / 2,
|
|
cy: (freehand.miny + freehand.maxy) / 2,
|
|
rx: (freehand.maxx - freehand.minx) / 2,
|
|
ry: (freehand.maxy - freehand.miny) / 2,
|
|
id: getId()
|
|
}
|
|
});
|
|
call('changed', [element]);
|
|
keep = true;
|
|
}
|
|
break;
|
|
case 'fhrect':
|
|
if (freehand.maxx - freehand.minx > 0 && freehand.maxy - freehand.miny > 0) {
|
|
element = addSvgElementFromJson({
|
|
element: 'rect',
|
|
curStyles: true,
|
|
attr: {
|
|
x: freehand.minx,
|
|
y: freehand.miny,
|
|
width: freehand.maxx - freehand.minx,
|
|
height: freehand.maxy - freehand.miny,
|
|
id: getId()
|
|
}
|
|
});
|
|
call('changed', [element]);
|
|
keep = true;
|
|
}
|
|
break;
|
|
case 'text':
|
|
keep = true;
|
|
selectOnly([element]);
|
|
textActions.start(element);
|
|
break;
|
|
case 'path':
|
|
// set element to null here so that it is not removed nor finalized
|
|
element = null;
|
|
// continue to be set to true so that mouseMove happens
|
|
started = true;
|
|
|
|
var res = pathActions$$1.mouseUp(evt, element, mouseX, mouseY);
|
|
element = res.element;
|
|
keep = res.keep;
|
|
|
|
break;
|
|
case 'pathedit':
|
|
keep = true;
|
|
element = null;
|
|
pathActions$$1.mouseUp(evt);
|
|
break;
|
|
case 'textedit':
|
|
keep = false;
|
|
element = null;
|
|
textActions.mouseUp(evt, mouseX, mouseY);
|
|
break;
|
|
case 'rotate':
|
|
keep = true;
|
|
element = null;
|
|
currentMode = 'select';
|
|
var batchCmd = canvas.undoMgr.finishUndoableChange();
|
|
if (!batchCmd.isEmpty()) {
|
|
addCommandToHistory(batchCmd);
|
|
}
|
|
// perform recalculation to weed out any stray identity transforms that might get stuck
|
|
recalculateAllSelectedDimensions();
|
|
call('changed', selectedElements);
|
|
break;
|
|
default:
|
|
// This could occur in an extension
|
|
break;
|
|
}
|
|
|
|
var extResult = runExtensions('mouseUp', {
|
|
event: evt,
|
|
mouse_x: mouseX,
|
|
mouse_y: mouseY
|
|
}, true);
|
|
|
|
$$9.each(extResult, function (i, r) {
|
|
if (r) {
|
|
keep = r.keep || keep;
|
|
element = r.element;
|
|
|
|
started = r.started || started;
|
|
}
|
|
});
|
|
|
|
if (!keep && element != null) {
|
|
getCurrentDrawing().releaseId(getId());
|
|
element.parentNode.removeChild(element);
|
|
element = null;
|
|
|
|
t = evt.target;
|
|
|
|
// if this element is in a group, go up until we reach the top-level group
|
|
// just below the layer groups
|
|
// TODO: once we implement links, we also would have to check for <a> elements
|
|
while (t && t.parentNode && t.parentNode.parentNode && t.parentNode.parentNode.tagName === 'g') {
|
|
t = t.parentNode;
|
|
}
|
|
// if we are not in the middle of creating a path, and we've clicked on some shape,
|
|
// then go to Select mode.
|
|
// WebKit returns <div> when the canvas is clicked, Firefox/Opera return <svg>
|
|
if ((currentMode !== 'path' || !drawnPath) && t && t.parentNode && t.parentNode.id !== 'selectorParentGroup' && t.id !== 'svgcanvas' && t.id !== 'svgroot') {
|
|
// switch into "select" mode if we've clicked on an element
|
|
canvas.setMode('select');
|
|
selectOnly([t], true);
|
|
}
|
|
} else if (element != null) {
|
|
canvas.addedNew = true;
|
|
|
|
var aniDur = 0.2;
|
|
var cAni = void 0;
|
|
if (opacAni.beginElement && parseFloat(element.getAttribute('opacity')) !== curShape.opacity) {
|
|
cAni = $$9(opacAni).clone().attr({
|
|
to: curShape.opacity,
|
|
dur: aniDur
|
|
}).appendTo(element);
|
|
try {
|
|
// Fails in FF4 on foreignObject
|
|
cAni[0].beginElement();
|
|
} catch (e) {}
|
|
} else {
|
|
aniDur = 0;
|
|
}
|
|
|
|
// Ideally this would be done on the endEvent of the animation,
|
|
// but that doesn't seem to be supported in Webkit
|
|
setTimeout(function () {
|
|
if (cAni) {
|
|
cAni.remove();
|
|
}
|
|
element.setAttribute('opacity', curShape.opacity);
|
|
element.setAttribute('style', 'pointer-events:inherit');
|
|
cleanupElement(element);
|
|
if (currentMode === 'path') {
|
|
pathActions$$1.toEditMode(element);
|
|
} else if (curConfig.selectNew) {
|
|
selectOnly([element], true);
|
|
}
|
|
// we create the insert command that is stored on the stack
|
|
// undo means to call cmd.unapply(), redo means to call cmd.apply()
|
|
addCommandToHistory(new InsertElementCommand$1(element));
|
|
|
|
call('changed', [element]);
|
|
}, aniDur * 1000);
|
|
}
|
|
|
|
startTransform = null;
|
|
};
|
|
|
|
var dblClick = function dblClick(evt) {
|
|
var evtTarget = evt.target;
|
|
var parent = evtTarget.parentNode;
|
|
|
|
// Do nothing if already in current group
|
|
if (parent === currentGroup) {
|
|
return;
|
|
}
|
|
|
|
var mouseTarget = getMouseTarget(evt);
|
|
var _mouseTarget = mouseTarget,
|
|
tagName = _mouseTarget.tagName;
|
|
|
|
|
|
if (tagName === 'text' && currentMode !== 'textedit') {
|
|
var pt = transformPoint(evt.pageX, evt.pageY, rootSctm);
|
|
textActions.select(mouseTarget, pt.x, pt.y);
|
|
}
|
|
|
|
if ((tagName === 'g' || tagName === 'a') && getRotationAngle(mouseTarget)) {
|
|
// TODO: Allow method of in-group editing without having to do
|
|
// this (similar to editing rotated paths)
|
|
|
|
// Ungroup and regroup
|
|
pushGroupProperties(mouseTarget);
|
|
mouseTarget = selectedElements[0];
|
|
clearSelection(true);
|
|
}
|
|
// Reset context
|
|
if (currentGroup) {
|
|
leaveContext();
|
|
}
|
|
|
|
if (parent.tagName !== 'g' && parent.tagName !== 'a' || parent === getCurrentDrawing().getCurrentLayer() || mouseTarget === selectorManager.selectorParentGroup) {
|
|
// Escape from in-group edit
|
|
return;
|
|
}
|
|
setContext(mouseTarget);
|
|
};
|
|
|
|
// prevent links from being followed in the canvas
|
|
var handleLinkInCanvas = function handleLinkInCanvas(e) {
|
|
e.preventDefault();
|
|
return false;
|
|
};
|
|
|
|
// Added mouseup to the container here.
|
|
// TODO(codedread): Figure out why after the Closure compiler, the window mouseup is ignored.
|
|
$$9(container).mousedown(mouseDown).mousemove(mouseMove).click(handleLinkInCanvas).dblclick(dblClick).mouseup(mouseUp);
|
|
// $(window).mouseup(mouseUp);
|
|
|
|
// TODO(rafaelcastrocouto): User preference for shift key and zoom factor
|
|
$$9(container).bind('mousewheel DOMMouseScroll', function (e) {
|
|
if (!e.shiftKey) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
var evt = e.originalEvent;
|
|
|
|
rootSctm = $$9('#svgcontent g')[0].getScreenCTM().inverse();
|
|
|
|
var workarea = $$9('#workarea');
|
|
var scrbar = 15;
|
|
var rulerwidth = curConfig.showRulers ? 16 : 0;
|
|
|
|
// mouse relative to content area in content pixels
|
|
var pt = transformPoint(evt.pageX, evt.pageY, rootSctm);
|
|
|
|
// full work area width in screen pixels
|
|
var editorFullW = workarea.width();
|
|
var editorFullH = workarea.height();
|
|
|
|
// work area width minus scroll and ruler in screen pixels
|
|
var editorW = editorFullW - scrbar - rulerwidth;
|
|
var editorH = editorFullH - scrbar - rulerwidth;
|
|
|
|
// work area width in content pixels
|
|
var workareaViewW = editorW * rootSctm.a;
|
|
var workareaViewH = editorH * rootSctm.d;
|
|
|
|
// content offset from canvas in screen pixels
|
|
var wOffset = workarea.offset();
|
|
var wOffsetLeft = wOffset['left'] + rulerwidth;
|
|
var wOffsetTop = wOffset['top'] + rulerwidth;
|
|
|
|
var delta = evt.wheelDelta ? evt.wheelDelta : evt.detail ? -evt.detail : 0;
|
|
if (!delta) {
|
|
return;
|
|
}
|
|
|
|
var factor = Math.max(3 / 4, Math.min(4 / 3, delta));
|
|
|
|
var wZoom = void 0,
|
|
hZoom = void 0;
|
|
if (factor > 1) {
|
|
wZoom = Math.ceil(editorW / workareaViewW * factor * 100) / 100;
|
|
hZoom = Math.ceil(editorH / workareaViewH * factor * 100) / 100;
|
|
} else {
|
|
wZoom = Math.floor(editorW / workareaViewW * factor * 100) / 100;
|
|
hZoom = Math.floor(editorH / workareaViewH * factor * 100) / 100;
|
|
}
|
|
var zoomlevel = Math.min(wZoom, hZoom);
|
|
zoomlevel = Math.min(10, Math.max(0.01, zoomlevel));
|
|
if (zoomlevel === currentZoom) {
|
|
return;
|
|
}
|
|
factor = zoomlevel / currentZoom;
|
|
|
|
// top left of workarea in content pixels before zoom
|
|
var topLeftOld = transformPoint(wOffsetLeft, wOffsetTop, rootSctm);
|
|
|
|
// top left of workarea in content pixels after zoom
|
|
var topLeftNew = {
|
|
x: pt.x - (pt.x - topLeftOld.x) / factor,
|
|
y: pt.y - (pt.y - topLeftOld.y) / factor
|
|
};
|
|
|
|
// top left of workarea in canvas pixels relative to content after zoom
|
|
var topLeftNewCanvas = {
|
|
x: topLeftNew.x * zoomlevel,
|
|
y: topLeftNew.y * zoomlevel
|
|
};
|
|
|
|
// new center in canvas pixels
|
|
var newCtr = {
|
|
x: topLeftNewCanvas.x - rulerwidth + editorFullW / 2,
|
|
y: topLeftNewCanvas.y - rulerwidth + editorFullH / 2
|
|
};
|
|
|
|
canvas.setZoom(zoomlevel);
|
|
$$9('#zoom').val((zoomlevel * 100).toFixed(1));
|
|
|
|
call('updateCanvas', { center: false, newCtr: newCtr });
|
|
call('zoomDone');
|
|
});
|
|
})();
|
|
|
|
/**
|
|
* Group: Text edit functions
|
|
* Functions relating to editing text elements
|
|
*/
|
|
var textActions = canvas.textActions = function () {
|
|
var curtext = void 0;
|
|
var textinput = void 0;
|
|
var cursor = void 0;
|
|
var selblock = void 0;
|
|
var blinker = void 0;
|
|
var chardata = [];
|
|
var textbb = void 0; // , transbb;
|
|
var matrix = void 0;
|
|
var lastX = void 0,
|
|
lastY = void 0;
|
|
var allowDbl = void 0;
|
|
|
|
function setCursor(index) {
|
|
var empty = textinput.value === '';
|
|
$$9(textinput).focus();
|
|
|
|
if (!arguments.length) {
|
|
if (empty) {
|
|
index = 0;
|
|
} else {
|
|
if (textinput.selectionEnd !== textinput.selectionStart) {
|
|
return;
|
|
}
|
|
index = textinput.selectionEnd;
|
|
}
|
|
}
|
|
|
|
var charbb = chardata[index];
|
|
if (!empty) {
|
|
textinput.setSelectionRange(index, index);
|
|
}
|
|
cursor = getElem('text_cursor');
|
|
if (!cursor) {
|
|
cursor = document.createElementNS(NS.SVG, 'line');
|
|
assignAttributes(cursor, {
|
|
id: 'text_cursor',
|
|
stroke: '#333',
|
|
'stroke-width': 1
|
|
});
|
|
cursor = getElem('selectorParentGroup').appendChild(cursor);
|
|
}
|
|
|
|
if (!blinker) {
|
|
blinker = setInterval(function () {
|
|
var show = cursor.getAttribute('display') === 'none';
|
|
cursor.setAttribute('display', show ? 'inline' : 'none');
|
|
}, 600);
|
|
}
|
|
|
|
var startPt = ptToScreen(charbb.x, textbb.y);
|
|
var endPt = ptToScreen(charbb.x, textbb.y + textbb.height);
|
|
|
|
assignAttributes(cursor, {
|
|
x1: startPt.x,
|
|
y1: startPt.y,
|
|
x2: endPt.x,
|
|
y2: endPt.y,
|
|
visibility: 'visible',
|
|
display: 'inline'
|
|
});
|
|
|
|
if (selblock) {
|
|
selblock.setAttribute('d', '');
|
|
}
|
|
}
|
|
|
|
function setSelection(start, end, skipInput) {
|
|
if (start === end) {
|
|
setCursor(end);
|
|
return;
|
|
}
|
|
|
|
if (!skipInput) {
|
|
textinput.setSelectionRange(start, end);
|
|
}
|
|
|
|
selblock = getElem('text_selectblock');
|
|
if (!selblock) {
|
|
selblock = document.createElementNS(NS.SVG, 'path');
|
|
assignAttributes(selblock, {
|
|
id: 'text_selectblock',
|
|
fill: 'green',
|
|
opacity: 0.5,
|
|
style: 'pointer-events:none'
|
|
});
|
|
getElem('selectorParentGroup').appendChild(selblock);
|
|
}
|
|
|
|
var startbb = chardata[start];
|
|
var endbb = chardata[end];
|
|
|
|
cursor.setAttribute('visibility', 'hidden');
|
|
|
|
var tl = ptToScreen(startbb.x, textbb.y),
|
|
tr = ptToScreen(startbb.x + (endbb.x - startbb.x), textbb.y),
|
|
bl = ptToScreen(startbb.x, textbb.y + textbb.height),
|
|
br = ptToScreen(startbb.x + (endbb.x - startbb.x), textbb.y + textbb.height);
|
|
|
|
var dstr = 'M' + tl.x + ',' + tl.y + ' L' + tr.x + ',' + tr.y + ' ' + br.x + ',' + br.y + ' ' + bl.x + ',' + bl.y + 'z';
|
|
|
|
assignAttributes(selblock, {
|
|
d: dstr,
|
|
display: 'inline'
|
|
});
|
|
}
|
|
|
|
function getIndexFromPoint(mouseX, mouseY) {
|
|
// Position cursor here
|
|
var pt = svgroot.createSVGPoint();
|
|
pt.x = mouseX;
|
|
pt.y = mouseY;
|
|
|
|
// No content, so return 0
|
|
if (chardata.length === 1) {
|
|
return 0;
|
|
}
|
|
// Determine if cursor should be on left or right of character
|
|
var charpos = curtext.getCharNumAtPosition(pt);
|
|
if (charpos < 0) {
|
|
// Out of text range, look at mouse coords
|
|
charpos = chardata.length - 2;
|
|
if (mouseX <= chardata[0].x) {
|
|
charpos = 0;
|
|
}
|
|
} else if (charpos >= chardata.length - 2) {
|
|
charpos = chardata.length - 2;
|
|
}
|
|
var charbb = chardata[charpos];
|
|
var mid = charbb.x + charbb.width / 2;
|
|
if (mouseX > mid) {
|
|
charpos++;
|
|
}
|
|
return charpos;
|
|
}
|
|
|
|
function setCursorFromPoint(mouseX, mouseY) {
|
|
setCursor(getIndexFromPoint(mouseX, mouseY));
|
|
}
|
|
|
|
function setEndSelectionFromPoint(x, y, apply) {
|
|
var i1 = textinput.selectionStart;
|
|
var i2 = getIndexFromPoint(x, y);
|
|
|
|
var start = Math.min(i1, i2);
|
|
var end = Math.max(i1, i2);
|
|
setSelection(start, end, !apply);
|
|
}
|
|
|
|
function screenToPt(xIn, yIn) {
|
|
var out = {
|
|
x: xIn,
|
|
y: yIn
|
|
};
|
|
|
|
out.x /= currentZoom;
|
|
out.y /= currentZoom;
|
|
|
|
if (matrix) {
|
|
var pt = transformPoint(out.x, out.y, matrix.inverse());
|
|
out.x = pt.x;
|
|
out.y = pt.y;
|
|
}
|
|
|
|
return out;
|
|
}
|
|
|
|
function ptToScreen(xIn, yIn) {
|
|
var out = {
|
|
x: xIn,
|
|
y: yIn
|
|
};
|
|
|
|
if (matrix) {
|
|
var pt = transformPoint(out.x, out.y, matrix);
|
|
out.x = pt.x;
|
|
out.y = pt.y;
|
|
}
|
|
|
|
out.x *= currentZoom;
|
|
out.y *= currentZoom;
|
|
|
|
return out;
|
|
}
|
|
|
|
/*
|
|
// Not currently in use
|
|
function hideCursor () {
|
|
if (cursor) {
|
|
cursor.setAttribute('visibility', 'hidden');
|
|
}
|
|
}
|
|
*/
|
|
|
|
function selectAll(evt) {
|
|
setSelection(0, curtext.textContent.length);
|
|
$$9(this).unbind(evt);
|
|
}
|
|
|
|
function selectWord(evt) {
|
|
if (!allowDbl || !curtext) {
|
|
return;
|
|
}
|
|
|
|
var ept = transformPoint(evt.pageX, evt.pageY, rootSctm),
|
|
mouseX = ept.x * currentZoom,
|
|
mouseY = ept.y * currentZoom;
|
|
var pt = screenToPt(mouseX, mouseY);
|
|
|
|
var index = getIndexFromPoint(pt.x, pt.y);
|
|
var str = curtext.textContent;
|
|
var first = str.substr(0, index).replace(/[a-z0-9]+$/i, '').length;
|
|
var m = str.substr(index).match(/^[a-z0-9]+/i);
|
|
var last = (m ? m[0].length : 0) + index;
|
|
setSelection(first, last);
|
|
|
|
// Set tripleclick
|
|
$$9(evt.target).click(selectAll);
|
|
setTimeout(function () {
|
|
$$9(evt.target).unbind('click', selectAll);
|
|
}, 300);
|
|
}
|
|
|
|
return {
|
|
select: function select(target, x, y) {
|
|
curtext = target;
|
|
textActions.toEditMode(x, y);
|
|
},
|
|
start: function start(elem) {
|
|
curtext = elem;
|
|
textActions.toEditMode();
|
|
},
|
|
mouseDown: function mouseDown(evt, mouseTarget, startX, startY) {
|
|
var pt = screenToPt(startX, startY);
|
|
|
|
textinput.focus();
|
|
setCursorFromPoint(pt.x, pt.y);
|
|
lastX = startX;
|
|
lastY = startY;
|
|
|
|
// TODO: Find way to block native selection
|
|
},
|
|
mouseMove: function mouseMove(mouseX, mouseY) {
|
|
var pt = screenToPt(mouseX, mouseY);
|
|
setEndSelectionFromPoint(pt.x, pt.y);
|
|
},
|
|
mouseUp: function mouseUp(evt, mouseX, mouseY) {
|
|
var pt = screenToPt(mouseX, mouseY);
|
|
|
|
setEndSelectionFromPoint(pt.x, pt.y, true);
|
|
|
|
// TODO: Find a way to make this work: Use transformed BBox instead of evt.target
|
|
// if (lastX === mouseX && lastY === mouseY
|
|
// && !rectsIntersect(transbb, {x: pt.x, y: pt.y, width: 0, height: 0})) {
|
|
// textActions.toSelectMode(true);
|
|
// }
|
|
|
|
if (evt.target !== curtext && mouseX < lastX + 2 && mouseX > lastX - 2 && mouseY < lastY + 2 && mouseY > lastY - 2) {
|
|
textActions.toSelectMode(true);
|
|
}
|
|
},
|
|
|
|
setCursor: setCursor,
|
|
toEditMode: function toEditMode(x, y) {
|
|
allowDbl = false;
|
|
currentMode = 'textedit';
|
|
selectorManager.requestSelector(curtext).showGrips(false);
|
|
// Make selector group accept clicks
|
|
/* const selector = */selectorManager.requestSelector(curtext); // Do we need this? Has side effect of setting lock, so keeping for now, but next line wasn't being used
|
|
// const sel = selector.selectorRect;
|
|
|
|
textActions.init();
|
|
|
|
$$9(curtext).css('cursor', 'text');
|
|
|
|
// if (supportsEditableText()) {
|
|
// curtext.setAttribute('editable', 'simple');
|
|
// return;
|
|
// }
|
|
|
|
if (!arguments.length) {
|
|
setCursor();
|
|
} else {
|
|
var pt = screenToPt(x, y);
|
|
setCursorFromPoint(pt.x, pt.y);
|
|
}
|
|
|
|
setTimeout(function () {
|
|
allowDbl = true;
|
|
}, 300);
|
|
},
|
|
toSelectMode: function toSelectMode(selectElem) {
|
|
currentMode = 'select';
|
|
clearInterval(blinker);
|
|
blinker = null;
|
|
if (selblock) {
|
|
$$9(selblock).attr('display', 'none');
|
|
}
|
|
if (cursor) {
|
|
$$9(cursor).attr('visibility', 'hidden');
|
|
}
|
|
$$9(curtext).css('cursor', 'move');
|
|
|
|
if (selectElem) {
|
|
clearSelection();
|
|
$$9(curtext).css('cursor', 'move');
|
|
|
|
call('selected', [curtext]);
|
|
addToSelection([curtext], true);
|
|
}
|
|
if (curtext && !curtext.textContent.length) {
|
|
// No content, so delete
|
|
canvas.deleteSelectedElements();
|
|
}
|
|
|
|
$$9(textinput).blur();
|
|
|
|
curtext = false;
|
|
|
|
// if (supportsEditableText()) {
|
|
// curtext.removeAttribute('editable');
|
|
// }
|
|
},
|
|
setInputElem: function setInputElem(elem) {
|
|
textinput = elem;
|
|
// $(textinput).blur(hideCursor);
|
|
},
|
|
clear: function clear() {
|
|
if (currentMode === 'textedit') {
|
|
textActions.toSelectMode();
|
|
}
|
|
},
|
|
init: function init$$1(inputElem) {
|
|
if (!curtext) {
|
|
return;
|
|
}
|
|
var i = void 0,
|
|
end = void 0;
|
|
// if (supportsEditableText()) {
|
|
// curtext.select();
|
|
// return;
|
|
// }
|
|
|
|
if (!curtext.parentNode) {
|
|
// Result of the ffClone, need to get correct element
|
|
curtext = selectedElements[0];
|
|
selectorManager.requestSelector(curtext).showGrips(false);
|
|
}
|
|
|
|
var str = curtext.textContent;
|
|
var len = str.length;
|
|
|
|
var xform = curtext.getAttribute('transform');
|
|
|
|
textbb = getBBox(curtext);
|
|
|
|
matrix = xform ? getMatrix(curtext) : null;
|
|
|
|
chardata = [];
|
|
chardata.length = len;
|
|
textinput.focus();
|
|
|
|
$$9(curtext).unbind('dblclick', selectWord).dblclick(selectWord);
|
|
|
|
if (!len) {
|
|
end = { x: textbb.x + textbb.width / 2, width: 0 };
|
|
}
|
|
|
|
for (i = 0; i < len; i++) {
|
|
var start = curtext.getStartPositionOfChar(i);
|
|
end = curtext.getEndPositionOfChar(i);
|
|
|
|
if (!supportsGoodTextCharPos()) {
|
|
var offset = canvas.contentW * currentZoom;
|
|
start.x -= offset;
|
|
end.x -= offset;
|
|
|
|
start.x /= currentZoom;
|
|
end.x /= currentZoom;
|
|
}
|
|
|
|
// Get a "bbox" equivalent for each character. Uses the
|
|
// bbox data of the actual text for y, height purposes
|
|
|
|
// TODO: Decide if y, width and height are actually necessary
|
|
chardata[i] = {
|
|
x: start.x,
|
|
y: textbb.y, // start.y?
|
|
width: end.x - start.x,
|
|
height: textbb.height
|
|
};
|
|
}
|
|
|
|
// Add a last bbox for cursor at end of text
|
|
chardata.push({
|
|
x: end.x,
|
|
width: 0
|
|
});
|
|
setSelection(textinput.selectionStart, textinput.selectionEnd, true);
|
|
}
|
|
};
|
|
}();
|
|
|
|
/**
|
|
* Group: Serialization
|
|
*/
|
|
|
|
/**
|
|
* Looks at DOM elements inside the <defs> to see if they are referred to,
|
|
* removes them from the DOM if they are not.
|
|
* @returns The amount of elements that were removed
|
|
*/
|
|
var removeUnusedDefElems = this.removeUnusedDefElems = function () {
|
|
var defs = svgcontent.getElementsByTagNameNS(NS.SVG, 'defs');
|
|
if (!defs || !defs.length) {
|
|
return 0;
|
|
}
|
|
|
|
// if (!defs.firstChild) { return; }
|
|
|
|
var defelemUses = [];
|
|
var numRemoved = 0;
|
|
var attrs = ['fill', 'stroke', 'filter', 'marker-start', 'marker-mid', 'marker-end'];
|
|
var alen = attrs.length;
|
|
|
|
var allEls = svgcontent.getElementsByTagNameNS(NS.SVG, '*');
|
|
var allLen = allEls.length;
|
|
|
|
var i = void 0,
|
|
j = void 0;
|
|
for (i = 0; i < allLen; i++) {
|
|
var el = allEls[i];
|
|
for (j = 0; j < alen; j++) {
|
|
var ref = getUrlFromAttr(el.getAttribute(attrs[j]));
|
|
if (ref) {
|
|
defelemUses.push(ref.substr(1));
|
|
}
|
|
}
|
|
|
|
// gradients can refer to other gradients
|
|
var href = getHref(el);
|
|
if (href && href.startsWith('#')) {
|
|
defelemUses.push(href.substr(1));
|
|
}
|
|
}
|
|
|
|
var defelems = $$9(defs).find('linearGradient, radialGradient, filter, marker, svg, symbol');
|
|
i = defelems.length;
|
|
while (i--) {
|
|
var defelem = defelems[i];
|
|
var id = defelem.id;
|
|
|
|
if (!defelemUses.includes(id)) {
|
|
// Not found, so remove (but remember)
|
|
removedElements[id] = defelem;
|
|
defelem.parentNode.removeChild(defelem);
|
|
numRemoved++;
|
|
}
|
|
}
|
|
|
|
return numRemoved;
|
|
};
|
|
|
|
/**
|
|
* Main function to set up the SVG content for output
|
|
* @returns {String} The SVG image for output
|
|
*/
|
|
this.svgCanvasToString = function () {
|
|
// keep calling it until there are none to remove
|
|
while (removeUnusedDefElems() > 0) {}
|
|
|
|
pathActions$$1.clear(true);
|
|
|
|
// Keep SVG-Edit comment on top
|
|
$$9.each(svgcontent.childNodes, function (i, node) {
|
|
if (i && node.nodeType === 8 && node.data.includes('Created with')) {
|
|
svgcontent.insertBefore(node, svgcontent.firstChild);
|
|
}
|
|
});
|
|
|
|
// Move out of in-group editing mode
|
|
if (currentGroup) {
|
|
leaveContext();
|
|
selectOnly([currentGroup]);
|
|
}
|
|
|
|
var nakedSvgs = [];
|
|
|
|
// Unwrap gsvg if it has no special attributes (only id and style)
|
|
$$9(svgcontent).find('g:data(gsvg)').each(function () {
|
|
var attrs = this.attributes;
|
|
var len = attrs.length;
|
|
for (var i = 0; i < len; i++) {
|
|
if (attrs[i].nodeName === 'id' || attrs[i].nodeName === 'style') {
|
|
len--;
|
|
}
|
|
}
|
|
// No significant attributes, so ungroup
|
|
if (len <= 0) {
|
|
var svg = this.firstChild;
|
|
nakedSvgs.push(svg);
|
|
$$9(this).replaceWith(svg);
|
|
}
|
|
});
|
|
var output = this.svgToString(svgcontent, 0);
|
|
|
|
// Rewrap gsvg
|
|
if (nakedSvgs.length) {
|
|
$$9(nakedSvgs).each(function () {
|
|
groupSvgElem(this);
|
|
});
|
|
}
|
|
|
|
return output;
|
|
};
|
|
|
|
/**
|
|
* Sub function ran on each SVG element to convert it to a string as desired
|
|
* @param elem - The SVG element to convert
|
|
* @param {Number} indent - Integer with the amount of spaces to indent this tag
|
|
* @returns {String} The given element as an SVG tag
|
|
*/
|
|
this.svgToString = function (elem, indent) {
|
|
var out = [];
|
|
var unit = curConfig.baseUnit;
|
|
var unitRe = new RegExp('^-?[\\d\\.]+' + unit + '$');
|
|
|
|
if (elem) {
|
|
cleanupElement(elem);
|
|
var attrs = elem.attributes;
|
|
var attr = void 0,
|
|
i = void 0;
|
|
var childs = elem.childNodes;
|
|
|
|
for (i = 0; i < indent; i++) {
|
|
out.push(' ');
|
|
}
|
|
out.push('<');out.push(elem.nodeName);
|
|
if (elem.id === 'svgcontent') {
|
|
// Process root element separately
|
|
var res = getResolution();
|
|
|
|
var vb = '';
|
|
// TODO: Allow this by dividing all values by current baseVal
|
|
// Note that this also means we should properly deal with this on import
|
|
// if (curConfig.baseUnit !== 'px') {
|
|
// const unit = curConfig.baseUnit;
|
|
// const unitM = getTypeMap()[unit];
|
|
// res.w = shortFloat(res.w / unitM);
|
|
// res.h = shortFloat(res.h / unitM);
|
|
// vb = ' viewBox="' + [0, 0, res.w, res.h].join(' ') + '"';
|
|
// res.w += unit;
|
|
// res.h += unit;
|
|
// }
|
|
|
|
if (unit !== 'px') {
|
|
res.w = convertUnit(res.w, unit) + unit;
|
|
res.h = convertUnit(res.h, unit) + unit;
|
|
}
|
|
|
|
out.push(' width="' + res.w + '" height="' + res.h + '"' + vb + ' xmlns="' + NS.SVG + '"');
|
|
|
|
var nsuris = {};
|
|
|
|
// Check elements for namespaces, add if found
|
|
$$9(elem).find('*').andSelf().each(function () {
|
|
// const el = this;
|
|
// for some elements have no attribute
|
|
var uri = this.namespaceURI;
|
|
if (uri && !nsuris[uri] && nsMap[uri] && nsMap[uri] !== 'xmlns' && nsMap[uri] !== 'xml') {
|
|
nsuris[uri] = true;
|
|
out.push(' xmlns:' + nsMap[uri] + '="' + uri + '"');
|
|
}
|
|
|
|
$$9.each(this.attributes, function (i, attr) {
|
|
var uri = attr.namespaceURI;
|
|
if (uri && !nsuris[uri] && nsMap[uri] !== 'xmlns' && nsMap[uri] !== 'xml') {
|
|
nsuris[uri] = true;
|
|
out.push(' xmlns:' + nsMap[uri] + '="' + uri + '"');
|
|
}
|
|
});
|
|
});
|
|
|
|
i = attrs.length;
|
|
var attrNames = ['width', 'height', 'xmlns', 'x', 'y', 'viewBox', 'id', 'overflow'];
|
|
while (i--) {
|
|
attr = attrs.item(i);
|
|
var attrVal = toXml(attr.value);
|
|
|
|
// Namespaces have already been dealt with, so skip
|
|
if (attr.nodeName.startsWith('xmlns:')) {
|
|
continue;
|
|
}
|
|
|
|
// only serialize attributes we don't use internally
|
|
if (attrVal !== '' && !attrNames.includes(attr.localName)) {
|
|
if (!attr.namespaceURI || nsMap[attr.namespaceURI]) {
|
|
out.push(' ');
|
|
out.push(attr.nodeName);out.push('="');
|
|
out.push(attrVal);out.push('"');
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
// Skip empty defs
|
|
if (elem.nodeName === 'defs' && !elem.firstChild) {
|
|
return;
|
|
}
|
|
|
|
var mozAttrs = ['-moz-math-font-style', '_moz-math-font-style'];
|
|
for (i = attrs.length - 1; i >= 0; i--) {
|
|
attr = attrs.item(i);
|
|
var _attrVal = toXml(attr.value);
|
|
// remove bogus attributes added by Gecko
|
|
if (mozAttrs.includes(attr.localName)) {
|
|
continue;
|
|
}
|
|
if (_attrVal !== '') {
|
|
if (_attrVal.startsWith('pointer-events')) {
|
|
continue;
|
|
}
|
|
if (attr.localName === 'class' && _attrVal.startsWith('se_')) {
|
|
continue;
|
|
}
|
|
out.push(' ');
|
|
if (attr.localName === 'd') {
|
|
_attrVal = pathActions$$1.convertPath(elem, true);
|
|
}
|
|
if (!isNaN(_attrVal)) {
|
|
_attrVal = shortFloat(_attrVal);
|
|
} else if (unitRe.test(_attrVal)) {
|
|
_attrVal = shortFloat(_attrVal) + unit;
|
|
}
|
|
|
|
// Embed images when saving
|
|
if (saveOptions.apply && elem.nodeName === 'image' && attr.localName === 'href' && saveOptions.images && saveOptions.images === 'embed') {
|
|
var img = encodableImages[_attrVal];
|
|
if (img) {
|
|
_attrVal = img;
|
|
}
|
|
}
|
|
|
|
// map various namespaces to our fixed namespace prefixes
|
|
// (the default xmlns attribute itself does not get a prefix)
|
|
if (!attr.namespaceURI || attr.namespaceURI === NS.SVG || nsMap[attr.namespaceURI]) {
|
|
out.push(attr.nodeName);out.push('="');
|
|
out.push(_attrVal);out.push('"');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (elem.hasChildNodes()) {
|
|
out.push('>');
|
|
indent++;
|
|
var bOneLine = false;
|
|
|
|
for (i = 0; i < childs.length; i++) {
|
|
var child = childs.item(i);
|
|
switch (child.nodeType) {
|
|
case 1:
|
|
// element node
|
|
out.push('\n');
|
|
out.push(this.svgToString(childs.item(i), indent));
|
|
break;
|
|
case 3:
|
|
// text node
|
|
var str = child.nodeValue.replace(/^\s+|\s+$/g, '');
|
|
if (str !== '') {
|
|
bOneLine = true;
|
|
out.push(String(toXml(str)));
|
|
}
|
|
break;
|
|
case 4:
|
|
// cdata node
|
|
out.push('\n');
|
|
out.push(new Array(indent + 1).join(' '));
|
|
out.push('<![CDATA[');
|
|
out.push(child.nodeValue);
|
|
out.push(']]>');
|
|
break;
|
|
case 8:
|
|
// comment
|
|
out.push('\n');
|
|
out.push(new Array(indent + 1).join(' '));
|
|
out.push('<!--');
|
|
out.push(child.data);
|
|
out.push('-->');
|
|
break;
|
|
} // switch on node type
|
|
}
|
|
indent--;
|
|
if (!bOneLine) {
|
|
out.push('\n');
|
|
for (i = 0; i < indent; i++) {
|
|
out.push(' ');
|
|
}
|
|
}
|
|
out.push('</');out.push(elem.nodeName);out.push('>');
|
|
} else {
|
|
out.push('/>');
|
|
}
|
|
}
|
|
return out.join('');
|
|
}; // end svgToString()
|
|
|
|
/**
|
|
* Converts a given image file to a data URL when possible, then runs a given callback
|
|
* @param {String} val - String with the path/URL of the image
|
|
* @param {Function} callback - Optional function to run when image data is found, supplies the
|
|
* result (data URL or false) as first parameter.
|
|
*/
|
|
this.embedImage = function (val, callback) {
|
|
// load in the image and once it's loaded, get the dimensions
|
|
$$9(new Image()).load(function () {
|
|
// create a canvas the same size as the raster image
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = this.width;
|
|
canvas.height = this.height;
|
|
// load the raster image into the canvas
|
|
canvas.getContext('2d').drawImage(this, 0, 0);
|
|
// retrieve the data: URL
|
|
try {
|
|
var urldata = ';svgedit_url=' + encodeURIComponent(val);
|
|
urldata = canvas.toDataURL().replace(';base64', urldata + ';base64');
|
|
encodableImages[val] = urldata;
|
|
} catch (e) {
|
|
encodableImages[val] = false;
|
|
}
|
|
lastGoodImgUrl = val;
|
|
if (callback) {
|
|
callback(encodableImages[val]);
|
|
}
|
|
}).attr('src', val);
|
|
};
|
|
|
|
/**
|
|
* Sets a given URL to be a "last good image" URL
|
|
*/
|
|
this.setGoodImage = function (val) {
|
|
lastGoodImgUrl = val;
|
|
};
|
|
|
|
/**
|
|
*
|
|
*/
|
|
this.open = function () {
|
|
// Nothing by default, handled by optional widget/extension
|
|
};
|
|
|
|
/**
|
|
* Serializes the current drawing into SVG XML text and returns it to the 'saved' handler.
|
|
* This function also includes the XML prolog. Clients of the SvgCanvas bind their save
|
|
* function to the 'saved' event.
|
|
*/
|
|
this.save = function (opts) {
|
|
// remove the selected outline before serializing
|
|
clearSelection();
|
|
// Update save options if provided
|
|
if (opts) {
|
|
$$9.extend(saveOptions, opts);
|
|
}
|
|
saveOptions.apply = true;
|
|
|
|
// no need for doctype, see https://jwatt.org/svg/authoring/#doctype-declaration
|
|
var str = this.svgCanvasToString();
|
|
call('saved', str);
|
|
};
|
|
|
|
/**
|
|
* Codes only is useful for locale-independent detection
|
|
*/
|
|
function getIssues() {
|
|
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
_ref3$codesOnly = _ref3.codesOnly,
|
|
codesOnly = _ref3$codesOnly === undefined ? false : _ref3$codesOnly;
|
|
|
|
// remove the selected outline before serializing
|
|
clearSelection();
|
|
|
|
// Check for known CanVG issues
|
|
var issues = [];
|
|
|
|
// Selector and notice
|
|
var issueList = {
|
|
feGaussianBlur: uiStrings.exportNoBlur,
|
|
foreignObject: uiStrings.exportNoforeignObject,
|
|
'[stroke-dasharray]': uiStrings.exportNoDashArray
|
|
};
|
|
var content = $$9(svgcontent);
|
|
|
|
// Add font/text check if Canvas Text API is not implemented
|
|
if (!('font' in $$9('<canvas>')[0].getContext('2d'))) {
|
|
issueList.text = uiStrings.exportNoText;
|
|
}
|
|
|
|
$$9.each(issueList, function (sel, descr) {
|
|
if (content.find(sel).length) {
|
|
issues.push(codesOnly ? sel : descr);
|
|
}
|
|
});
|
|
return issues;
|
|
}
|
|
|
|
// Generates a Data URL based on the current image, then calls "exported"
|
|
// with an object including the string, image information, and any issues found
|
|
this.rasterExport = function (imgType, quality, exportWindowName, cb) {
|
|
var mimeType = 'image/' + imgType.toLowerCase();
|
|
var issues = getIssues();
|
|
var issueCodes = getIssues({ codesOnly: true });
|
|
var str = this.svgCanvasToString();
|
|
|
|
return new Promise(function (resolve, reject) {
|
|
buildCanvgCallback(function () {
|
|
var type = imgType || 'PNG';
|
|
if (!$$9('#export_canvas').length) {
|
|
$$9('<canvas>', { id: 'export_canvas' }).hide().appendTo('body');
|
|
}
|
|
var c = $$9('#export_canvas')[0];
|
|
c.width = canvas.contentW;
|
|
c.height = canvas.contentH;
|
|
|
|
canvg(c, str, {
|
|
renderCallback: function renderCallback() {
|
|
var dataURLType = (type === 'ICO' ? 'BMP' : type).toLowerCase();
|
|
var datauri = quality ? c.toDataURL('image/' + dataURLType, quality) : c.toDataURL('image/' + dataURLType);
|
|
var bloburl = void 0;
|
|
function done() {
|
|
var obj = { datauri: datauri, bloburl: bloburl, svg: str, issues: issues, issueCodes: issueCodes, type: imgType, mimeType: mimeType, quality: quality, exportWindowName: exportWindowName };
|
|
call('exported', obj);
|
|
if (cb) {
|
|
cb(obj);
|
|
}
|
|
resolve(obj);
|
|
}
|
|
if (c.toBlob) {
|
|
c.toBlob(function (blob) {
|
|
bloburl = createObjectURL(blob);
|
|
done();
|
|
}, mimeType, quality);
|
|
return;
|
|
}
|
|
bloburl = dataURLToObjectURL(datauri);
|
|
done();
|
|
}
|
|
});
|
|
})();
|
|
});
|
|
};
|
|
|
|
this.exportPDF = function (exportWindowName, outputType, cb) {
|
|
var that = this;
|
|
return new Promise(function (resolve, reject) {
|
|
buildJSPDFCallback(function () {
|
|
var res = getResolution();
|
|
var orientation = res.w > res.h ? 'landscape' : 'portrait';
|
|
var unit = 'pt'; // curConfig.baseUnit; // We could use baseUnit, but that is presumably not intended for export purposes
|
|
var doc = jsPDF({
|
|
orientation: orientation,
|
|
unit: unit,
|
|
format: [res.w, res.h]
|
|
// , compressPdf: true
|
|
}); // Todo: Give options to use predefined jsPDF formats like "a4", etc. from pull-down (with option to keep customizable)
|
|
var docTitle = getDocumentTitle();
|
|
doc.setProperties({
|
|
title: docTitle /* ,
|
|
subject: '',
|
|
author: '',
|
|
keywords: '',
|
|
creator: '' */
|
|
});
|
|
var issues = getIssues();
|
|
var issueCodes = getIssues({ codesOnly: true });
|
|
var str = that.svgCanvasToString();
|
|
doc.addSVG(str, 0, 0);
|
|
|
|
// doc.output('save'); // Works to open in a new
|
|
// window; todo: configure this and other export
|
|
// options to optionally work in this manner as
|
|
// opposed to opening a new tab
|
|
var obj = { svg: str, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName };
|
|
var method = outputType || 'dataurlstring';
|
|
obj[method] = doc.output(method);
|
|
if (cb) {
|
|
cb(obj);
|
|
}
|
|
resolve(obj);
|
|
call('exportedPDF', obj);
|
|
})();
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Returns the current drawing as raw SVG XML text.
|
|
* @returns The current drawing as raw SVG XML text.
|
|
*/
|
|
this.getSvgString = function () {
|
|
saveOptions.apply = false;
|
|
return this.svgCanvasToString();
|
|
};
|
|
|
|
/**
|
|
* This function determines whether to use a nonce in the prefix, when
|
|
* generating IDs for future documents in SVG-Edit.
|
|
* @param {Boolean} [enableRandomization] If true, adds a nonce to the prefix. Thus
|
|
* svgCanvas.randomizeIds() <==> svgCanvas.randomizeIds(true)
|
|
*
|
|
* if you're controlling SVG-Edit externally, and want randomized IDs, call
|
|
* this BEFORE calling svgCanvas.setSvgString
|
|
*/
|
|
this.randomizeIds = function (enableRandomization) {
|
|
if (arguments.length > 0 && enableRandomization === false) {
|
|
randomizeIds(false, getCurrentDrawing());
|
|
} else {
|
|
randomizeIds(true, getCurrentDrawing());
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Ensure each element has a unique ID
|
|
* @param g - The parent element of the tree to give unique IDs
|
|
*/
|
|
var uniquifyElems = this.uniquifyElems = function (g) {
|
|
var ids = {};
|
|
// TODO: Handle markers and connectors. These are not yet re-identified properly
|
|
// as their referring elements do not get remapped.
|
|
//
|
|
// <marker id='se_marker_end_svg_7'/>
|
|
// <polyline id='svg_7' se:connector='svg_1 svg_6' marker-end='url(#se_marker_end_svg_7)'/>
|
|
//
|
|
// Problem #1: if svg_1 gets renamed, we do not update the polyline's se:connector attribute
|
|
// Problem #2: if the polyline svg_7 gets renamed, we do not update the marker id nor the polyline's marker-end attribute
|
|
var refElems = ['filter', 'linearGradient', 'pattern', 'radialGradient', 'symbol', 'textPath', 'use'];
|
|
|
|
walkTree(g, function (n) {
|
|
// if it's an element node
|
|
if (n.nodeType === 1) {
|
|
// and the element has an ID
|
|
if (n.id) {
|
|
// and we haven't tracked this ID yet
|
|
if (!(n.id in ids)) {
|
|
// add this id to our map
|
|
ids[n.id] = { elem: null, attrs: [], hrefs: [] };
|
|
}
|
|
ids[n.id].elem = n;
|
|
}
|
|
|
|
// now search for all attributes on this element that might refer
|
|
// to other elements
|
|
$$9.each(refAttrs, function (i, attr) {
|
|
var attrnode = n.getAttributeNode(attr);
|
|
if (attrnode) {
|
|
// the incoming file has been sanitized, so we should be able to safely just strip off the leading #
|
|
var url = getUrlFromAttr(attrnode.value),
|
|
refid = url ? url.substr(1) : null;
|
|
if (refid) {
|
|
if (!(refid in ids)) {
|
|
// add this id to our map
|
|
ids[refid] = { elem: null, attrs: [], hrefs: [] };
|
|
}
|
|
ids[refid].attrs.push(attrnode);
|
|
}
|
|
}
|
|
});
|
|
|
|
// check xlink:href now
|
|
var href = getHref(n);
|
|
// TODO: what if an <image> or <a> element refers to an element internally?
|
|
if (href && refElems.includes(n.nodeName)) {
|
|
var refid = href.substr(1);
|
|
if (refid) {
|
|
if (!(refid in ids)) {
|
|
// add this id to our map
|
|
ids[refid] = { elem: null, attrs: [], hrefs: [] };
|
|
}
|
|
ids[refid].hrefs.push(n);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// in ids, we now have a map of ids, elements and attributes, let's re-identify
|
|
for (var oldid in ids) {
|
|
if (!oldid) {
|
|
continue;
|
|
}
|
|
var elem = ids[oldid].elem;
|
|
|
|
if (elem) {
|
|
var newid = getNextId();
|
|
|
|
// assign element its new id
|
|
elem.id = newid;
|
|
|
|
// remap all url() attributes
|
|
var attrs = ids[oldid].attrs;
|
|
|
|
var j = attrs.length;
|
|
while (j--) {
|
|
var attr = attrs[j];
|
|
attr.ownerElement.setAttribute(attr.name, 'url(#' + newid + ')');
|
|
}
|
|
|
|
// remap all href attributes
|
|
var hreffers = ids[oldid].hrefs;
|
|
var k = hreffers.length;
|
|
while (k--) {
|
|
var hreffer = hreffers[k];
|
|
setHref(hreffer, '#' + newid);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Assigns reference data for each use element
|
|
*/
|
|
var setUseData = this.setUseData = function (parent) {
|
|
var elems = $$9(parent);
|
|
|
|
if (parent.tagName !== 'use') {
|
|
elems = elems.find('use');
|
|
}
|
|
|
|
elems.each(function () {
|
|
var id = getHref(this).substr(1);
|
|
var refElem = getElem(id);
|
|
if (!refElem) {
|
|
return;
|
|
}
|
|
$$9(this).data('ref', refElem);
|
|
if (refElem.tagName === 'symbol' || refElem.tagName === 'svg') {
|
|
$$9(this).data('symbol', refElem).data('ref', refElem);
|
|
}
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Converts gradients from userSpaceOnUse to objectBoundingBox
|
|
* @param elem
|
|
*/
|
|
var convertGradients = this.convertGradients = function (elem) {
|
|
var elems = $$9(elem).find('linearGradient, radialGradient');
|
|
if (!elems.length && isWebkit()) {
|
|
// Bug in webkit prevents regular *Gradient selector search
|
|
elems = $$9(elem).find('*').filter(function () {
|
|
return this.tagName.includes('Gradient');
|
|
});
|
|
}
|
|
|
|
elems.each(function () {
|
|
var grad = this;
|
|
if ($$9(grad).attr('gradientUnits') === 'userSpaceOnUse') {
|
|
// TODO: Support more than one element with this ref by duplicating parent grad
|
|
var _elems = $$9(svgcontent).find('[fill="url(#' + grad.id + ')"],[stroke="url(#' + grad.id + ')"]');
|
|
if (!_elems.length) {
|
|
return;
|
|
}
|
|
|
|
// get object's bounding box
|
|
var bb = getBBox(_elems[0]);
|
|
|
|
// This will occur if the element is inside a <defs> or a <symbol>,
|
|
// in which we shouldn't need to convert anyway.
|
|
if (!bb) {
|
|
return;
|
|
}
|
|
|
|
if (grad.tagName === 'linearGradient') {
|
|
var gCoords = $$9(grad).attr(['x1', 'y1', 'x2', 'y2']);
|
|
|
|
// If has transform, convert
|
|
var tlist = grad.gradientTransform.baseVal;
|
|
if (tlist && tlist.numberOfItems > 0) {
|
|
var m = transformListToTransform(tlist).matrix;
|
|
var pt1 = transformPoint(gCoords.x1, gCoords.y1, m);
|
|
var pt2 = transformPoint(gCoords.x2, gCoords.y2, m);
|
|
|
|
gCoords.x1 = pt1.x;
|
|
gCoords.y1 = pt1.y;
|
|
gCoords.x2 = pt2.x;
|
|
gCoords.y2 = pt2.y;
|
|
grad.removeAttribute('gradientTransform');
|
|
}
|
|
|
|
$$9(grad).attr({
|
|
x1: (gCoords.x1 - bb.x) / bb.width,
|
|
y1: (gCoords.y1 - bb.y) / bb.height,
|
|
x2: (gCoords.x2 - bb.x) / bb.width,
|
|
y2: (gCoords.y2 - bb.y) / bb.height
|
|
});
|
|
grad.removeAttribute('gradientUnits');
|
|
}
|
|
// else {
|
|
// Note: radialGradient elements cannot be easily converted
|
|
// because userSpaceOnUse will keep circular gradients, while
|
|
// objectBoundingBox will x/y scale the gradient according to
|
|
// its bbox.
|
|
//
|
|
// For now we'll do nothing, though we should probably have
|
|
// the gradient be updated as the element is moved, as
|
|
// inkscape/illustrator do.
|
|
//
|
|
// const gCoords = $(grad).attr(['cx', 'cy', 'r']);
|
|
//
|
|
// $(grad).attr({
|
|
// cx: (gCoords.cx - bb.x) / bb.width,
|
|
// cy: (gCoords.cy - bb.y) / bb.height,
|
|
// r: gCoords.r
|
|
// });
|
|
//
|
|
// grad.removeAttribute('gradientUnits');
|
|
// }
|
|
}
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Converts selected/given <use> or child SVG element to a group
|
|
* @param elem
|
|
*/
|
|
var convertToGroup = this.convertToGroup = function (elem) {
|
|
if (!elem) {
|
|
elem = selectedElements[0];
|
|
}
|
|
var $elem = $$9(elem);
|
|
var batchCmd = new BatchCommand$1();
|
|
var ts = void 0;
|
|
|
|
if ($elem.data('gsvg')) {
|
|
// Use the gsvg as the new group
|
|
var svg = elem.firstChild;
|
|
var pt = $$9(svg).attr(['x', 'y']);
|
|
|
|
$$9(elem.firstChild.firstChild).unwrap();
|
|
$$9(elem).removeData('gsvg');
|
|
|
|
var tlist = getTransformList(elem);
|
|
var xform = svgroot.createSVGTransform();
|
|
xform.setTranslate(pt.x, pt.y);
|
|
tlist.appendItem(xform);
|
|
recalculateDimensions(elem);
|
|
call('selected', [elem]);
|
|
} else if ($elem.data('symbol')) {
|
|
elem = $elem.data('symbol');
|
|
|
|
ts = $elem.attr('transform');
|
|
var pos = $elem.attr(['x', 'y']);
|
|
|
|
var vb = elem.getAttribute('viewBox');
|
|
|
|
if (vb) {
|
|
var nums = vb.split(' ');
|
|
pos.x -= +nums[0];
|
|
pos.y -= +nums[1];
|
|
}
|
|
|
|
// Not ideal, but works
|
|
ts += ' translate(' + (pos.x || 0) + ',' + (pos.y || 0) + ')';
|
|
|
|
var prev = $elem.prev();
|
|
|
|
// Remove <use> element
|
|
batchCmd.addSubCommand(new RemoveElementCommand$1($elem[0], $elem[0].nextSibling, $elem[0].parentNode));
|
|
$elem.remove();
|
|
|
|
// See if other elements reference this symbol
|
|
var hasMore = $$9(svgcontent).find('use:data(symbol)').length;
|
|
|
|
var g = svgdoc.createElementNS(NS.SVG, 'g');
|
|
var childs = elem.childNodes;
|
|
|
|
var i = void 0;
|
|
for (i = 0; i < childs.length; i++) {
|
|
g.appendChild(childs[i].cloneNode(true));
|
|
}
|
|
|
|
// Duplicate the gradients for Gecko, since they weren't included in the <symbol>
|
|
if (isGecko()) {
|
|
var dupeGrads = $$9(findDefs()).children('linearGradient,radialGradient,pattern').clone();
|
|
$$9(g).append(dupeGrads);
|
|
}
|
|
|
|
if (ts) {
|
|
g.setAttribute('transform', ts);
|
|
}
|
|
|
|
var parent = elem.parentNode;
|
|
|
|
uniquifyElems(g);
|
|
|
|
// Put the dupe gradients back into <defs> (after uniquifying them)
|
|
if (isGecko()) {
|
|
$$9(findDefs()).append($$9(g).find('linearGradient,radialGradient,pattern'));
|
|
}
|
|
|
|
// now give the g itself a new id
|
|
g.id = getNextId();
|
|
|
|
prev.after(g);
|
|
|
|
if (parent) {
|
|
if (!hasMore) {
|
|
// remove symbol/svg element
|
|
var _elem = elem,
|
|
nextSibling = _elem.nextSibling;
|
|
|
|
parent.removeChild(elem);
|
|
batchCmd.addSubCommand(new RemoveElementCommand$1(elem, nextSibling, parent));
|
|
}
|
|
batchCmd.addSubCommand(new InsertElementCommand$1(g));
|
|
}
|
|
|
|
setUseData(g);
|
|
|
|
if (isGecko()) {
|
|
convertGradients(findDefs());
|
|
} else {
|
|
convertGradients(g);
|
|
}
|
|
|
|
// recalculate dimensions on the top-level children so that unnecessary transforms
|
|
// are removed
|
|
walkTreePost(g, function (n) {
|
|
try {
|
|
recalculateDimensions(n);
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
});
|
|
|
|
// Give ID for any visible element missing one
|
|
$$9(g).find(visElems).each(function () {
|
|
if (!this.id) {
|
|
this.id = getNextId();
|
|
}
|
|
});
|
|
|
|
selectOnly([g]);
|
|
|
|
var cm = pushGroupProperties(g, true);
|
|
if (cm) {
|
|
batchCmd.addSubCommand(cm);
|
|
}
|
|
|
|
addCommandToHistory(batchCmd);
|
|
} else {
|
|
console.log('Unexpected element to ungroup:', elem);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* This function sets the current drawing as the input SVG XML.
|
|
* @param {String} xmlString - The SVG as XML text.
|
|
* @param {Boolean} [preventUndo=false] - Indicates if we want to do the
|
|
* changes without adding them to the undo stack - e.g. for initializing a
|
|
* drawing on page load.
|
|
* @returns {Boolean} This function returns false if the set was
|
|
* unsuccessful, true otherwise.
|
|
*/
|
|
this.setSvgString = function (xmlString, preventUndo) {
|
|
try {
|
|
// convert string into XML document
|
|
var newDoc = text2xml(xmlString);
|
|
if (newDoc.firstElementChild && newDoc.firstElementChild.namespaceURI !== NS.SVG) {
|
|
return false;
|
|
}
|
|
|
|
this.prepareSvg(newDoc);
|
|
|
|
var batchCmd = new BatchCommand$1('Change Source');
|
|
|
|
// remove old svg document
|
|
var _svgcontent = svgcontent,
|
|
nextSibling = _svgcontent.nextSibling;
|
|
|
|
var oldzoom = svgroot.removeChild(svgcontent);
|
|
batchCmd.addSubCommand(new RemoveElementCommand$1(oldzoom, nextSibling, svgroot));
|
|
|
|
// set new svg document
|
|
// If DOM3 adoptNode() available, use it. Otherwise fall back to DOM2 importNode()
|
|
if (svgdoc.adoptNode) {
|
|
svgcontent = svgdoc.adoptNode(newDoc.documentElement);
|
|
} else {
|
|
svgcontent = svgdoc.importNode(newDoc.documentElement, true);
|
|
}
|
|
|
|
svgroot.appendChild(svgcontent);
|
|
var content = $$9(svgcontent);
|
|
|
|
canvas.current_drawing_ = new Drawing(svgcontent, idprefix);
|
|
|
|
// retrieve or set the nonce
|
|
var nonce = getCurrentDrawing().getNonce();
|
|
if (nonce) {
|
|
call('setnonce', nonce);
|
|
} else {
|
|
call('unsetnonce');
|
|
}
|
|
|
|
// change image href vals if possible
|
|
content.find('image').each(function () {
|
|
var image = this;
|
|
preventClickDefault(image);
|
|
var val = getHref(this);
|
|
if (val) {
|
|
if (val.startsWith('data:')) {
|
|
// Check if an SVG-edit data URI
|
|
var m = val.match(/svgedit_url=(.*?);/);
|
|
if (m) {
|
|
var url = decodeURIComponent(m[1]);
|
|
$$9(new Image()).load(function () {
|
|
image.setAttributeNS(NS.XLINK, 'xlink:href', url);
|
|
}).attr('src', url);
|
|
}
|
|
}
|
|
// Add to encodableImages if it loads
|
|
canvas.embedImage(val);
|
|
}
|
|
});
|
|
|
|
// Wrap child SVGs in group elements
|
|
content.find('svg').each(function () {
|
|
// Skip if it's in a <defs>
|
|
if ($$9(this).closest('defs').length) {
|
|
return;
|
|
}
|
|
|
|
uniquifyElems(this);
|
|
|
|
// Check if it already has a gsvg group
|
|
var pa = this.parentNode;
|
|
if (pa.childNodes.length === 1 && pa.nodeName === 'g') {
|
|
$$9(pa).data('gsvg', this);
|
|
pa.id = pa.id || getNextId();
|
|
} else {
|
|
groupSvgElem(this);
|
|
}
|
|
});
|
|
|
|
// For Firefox: Put all paint elems in defs
|
|
if (isGecko()) {
|
|
content.find('linearGradient, radialGradient, pattern').appendTo(findDefs());
|
|
}
|
|
|
|
// Set ref element for <use> elements
|
|
|
|
// TODO: This should also be done if the object is re-added through "redo"
|
|
setUseData(content);
|
|
|
|
convertGradients(content[0]);
|
|
|
|
var attrs = {
|
|
id: 'svgcontent',
|
|
overflow: curConfig.show_outside_canvas ? 'visible' : 'hidden'
|
|
};
|
|
|
|
var percs = false;
|
|
|
|
// determine proper size
|
|
if (content.attr('viewBox')) {
|
|
var vb = content.attr('viewBox').split(' ');
|
|
attrs.width = vb[2];
|
|
attrs.height = vb[3];
|
|
// handle content that doesn't have a viewBox
|
|
} else {
|
|
$$9.each(['width', 'height'], function (i, dim) {
|
|
// Set to 100 if not given
|
|
var val = content.attr(dim) || '100%';
|
|
|
|
if (String(val).substr(-1) === '%') {
|
|
// Use user units if percentage given
|
|
percs = true;
|
|
} else {
|
|
attrs[dim] = convertToNum(dim, val);
|
|
}
|
|
});
|
|
}
|
|
|
|
// identify layers
|
|
identifyLayers();
|
|
|
|
// Give ID for any visible layer children missing one
|
|
content.children().find(visElems).each(function () {
|
|
if (!this.id) {
|
|
this.id = getNextId();
|
|
}
|
|
});
|
|
|
|
// Percentage width/height, so let's base it on visible elements
|
|
if (percs) {
|
|
var bb = getStrokedBBoxDefaultVisible();
|
|
attrs.width = bb.width + bb.x;
|
|
attrs.height = bb.height + bb.y;
|
|
}
|
|
|
|
// Just in case negative numbers are given or
|
|
// result from the percs calculation
|
|
if (attrs.width <= 0) {
|
|
attrs.width = 100;
|
|
}
|
|
if (attrs.height <= 0) {
|
|
attrs.height = 100;
|
|
}
|
|
|
|
content.attr(attrs);
|
|
this.contentW = attrs.width;
|
|
this.contentH = attrs.height;
|
|
|
|
batchCmd.addSubCommand(new InsertElementCommand$1(svgcontent));
|
|
// update root to the correct size
|
|
var changes = content.attr(['width', 'height']);
|
|
batchCmd.addSubCommand(new ChangeElementCommand$1(svgroot, changes));
|
|
|
|
// reset zoom
|
|
currentZoom = 1;
|
|
|
|
// reset transform lists
|
|
resetListMap();
|
|
clearSelection();
|
|
clearData();
|
|
svgroot.appendChild(selectorManager.selectorParentGroup);
|
|
|
|
if (!preventUndo) addCommandToHistory(batchCmd);
|
|
call('changed', [svgcontent]);
|
|
} catch (e) {
|
|
console.log(e);
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
/**
|
|
* This function imports the input SVG XML as a <symbol> in the <defs>, then adds a
|
|
* <use> to the current layer.
|
|
* @param {String} xmlString - The SVG as XML text.
|
|
* @returns This function returns null if the import was unsuccessful, or the element otherwise.
|
|
* @todo
|
|
* - properly handle if namespace is introduced by imported content (must add to svgcontent
|
|
* and update all prefixes in the imported node)
|
|
* - properly handle recalculating dimensions, recalculateDimensions() doesn't handle
|
|
* arbitrary transform lists, but makes some assumptions about how the transform list
|
|
* was obtained
|
|
* - import should happen in top-left of current zoomed viewport
|
|
*/
|
|
this.importSvgString = function (xmlString) {
|
|
var j = void 0,
|
|
ts = void 0,
|
|
useEl = void 0;
|
|
try {
|
|
// Get unique ID
|
|
var uid = encode64(xmlString.length + xmlString).substr(0, 32);
|
|
|
|
var useExisting = false;
|
|
// Look for symbol and make sure symbol exists in image
|
|
if (importIds[uid]) {
|
|
if ($$9(importIds[uid].symbol).parents('#svgroot').length) {
|
|
useExisting = true;
|
|
}
|
|
}
|
|
|
|
var batchCmd = new BatchCommand$1('Import Image');
|
|
var symbol = void 0;
|
|
if (useExisting) {
|
|
symbol = importIds[uid].symbol;
|
|
|
|
ts = importIds[uid].xform;
|
|
} else {
|
|
// convert string into XML document
|
|
var newDoc = text2xml(xmlString);
|
|
|
|
this.prepareSvg(newDoc);
|
|
|
|
// import new svg document into our document
|
|
var svg = void 0;
|
|
// If DOM3 adoptNode() available, use it. Otherwise fall back to DOM2 importNode()
|
|
if (svgdoc.adoptNode) {
|
|
svg = svgdoc.adoptNode(newDoc.documentElement);
|
|
} else {
|
|
svg = svgdoc.importNode(newDoc.documentElement, true);
|
|
}
|
|
|
|
uniquifyElems(svg);
|
|
|
|
var innerw = convertToNum('width', svg.getAttribute('width')),
|
|
innerh = convertToNum('height', svg.getAttribute('height')),
|
|
innervb = svg.getAttribute('viewBox'),
|
|
|
|
// if no explicit viewbox, create one out of the width and height
|
|
vb = innervb ? innervb.split(' ') : [0, 0, innerw, innerh];
|
|
for (j = 0; j < 4; ++j) {
|
|
vb[j] = +vb[j];
|
|
}
|
|
|
|
// TODO: properly handle preserveAspectRatio
|
|
var // canvasw = +svgcontent.getAttribute('width'),
|
|
canvash = +svgcontent.getAttribute('height');
|
|
// imported content should be 1/3 of the canvas on its largest dimension
|
|
|
|
if (innerh > innerw) {
|
|
ts = 'scale(' + canvash / 3 / vb[3] + ')';
|
|
} else {
|
|
ts = 'scale(' + canvash / 3 / vb[2] + ')';
|
|
}
|
|
|
|
// Hack to make recalculateDimensions understand how to scale
|
|
ts = 'translate(0) ' + ts + ' translate(0)';
|
|
|
|
symbol = svgdoc.createElementNS(NS.SVG, 'symbol');
|
|
var defs = findDefs();
|
|
|
|
if (isGecko()) {
|
|
// Move all gradients into root for Firefox, workaround for this bug:
|
|
// https://bugzilla.mozilla.org/show_bug.cgi?id=353575
|
|
// TODO: Make this properly undo-able.
|
|
$$9(svg).find('linearGradient, radialGradient, pattern').appendTo(defs);
|
|
}
|
|
|
|
while (svg.firstChild) {
|
|
var first = svg.firstChild;
|
|
symbol.appendChild(first);
|
|
}
|
|
var attrs = svg.attributes;
|
|
for (var i = 0; i < attrs.length; i++) {
|
|
var attr = attrs[i];
|
|
symbol.setAttribute(attr.nodeName, attr.value);
|
|
}
|
|
symbol.id = getNextId();
|
|
|
|
// Store data
|
|
importIds[uid] = {
|
|
symbol: symbol,
|
|
xform: ts
|
|
};
|
|
|
|
findDefs().appendChild(symbol);
|
|
batchCmd.addSubCommand(new InsertElementCommand$1(symbol));
|
|
}
|
|
|
|
useEl = svgdoc.createElementNS(NS.SVG, 'use');
|
|
useEl.id = getNextId();
|
|
setHref(useEl, '#' + symbol.id);
|
|
|
|
(currentGroup || getCurrentDrawing().getCurrentLayer()).appendChild(useEl);
|
|
batchCmd.addSubCommand(new InsertElementCommand$1(useEl));
|
|
clearSelection();
|
|
|
|
useEl.setAttribute('transform', ts);
|
|
recalculateDimensions(useEl);
|
|
$$9(useEl).data('symbol', symbol).data('ref', symbol);
|
|
addToSelection([useEl]);
|
|
|
|
// TODO: Find way to add this in a recalculateDimensions-parsable way
|
|
// if (vb[0] !== 0 || vb[1] !== 0) {
|
|
// ts = 'translate(' + (-vb[0]) + ',' + (-vb[1]) + ') ' + ts;
|
|
// }
|
|
addCommandToHistory(batchCmd);
|
|
call('changed', [svgcontent]);
|
|
} catch (e) {
|
|
console.log(e);
|
|
return null;
|
|
}
|
|
|
|
// we want to return the element so we can automatically select it
|
|
return useEl;
|
|
};
|
|
|
|
// Could deprecate, but besides external uses, their usage makes clear that
|
|
// canvas is a dependency for all of these
|
|
['identifyLayers', 'createLayer', 'cloneLayer', 'deleteCurrentLayer', 'setCurrentLayer', 'renameCurrentLayer', 'setCurrentLayerPosition', 'setLayerVisibility', 'moveSelectedToLayer', 'mergeLayer', 'mergeAllLayers', 'leaveContext', 'setContext'].forEach(function (prop) {
|
|
canvas[prop] = draw[prop];
|
|
});
|
|
init$3({
|
|
pathActions: pathActions$$1,
|
|
getCurrentGroup: function getCurrentGroup() {
|
|
return currentGroup;
|
|
},
|
|
setCurrentGroup: function setCurrentGroup(cg) {
|
|
currentGroup = cg;
|
|
},
|
|
|
|
getSelectedElements: getSelectedElements,
|
|
getSVGContent: getSVGContent,
|
|
undoMgr: undoMgr,
|
|
elData: elData,
|
|
getCurrentDrawing: getCurrentDrawing,
|
|
clearSelection: clearSelection,
|
|
call: call,
|
|
addCommandToHistory: addCommandToHistory,
|
|
changeSvgcontent: function changeSvgcontent() {
|
|
call('changed', [svgcontent]);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Group: Document functions
|
|
*/
|
|
|
|
/**
|
|
* Clears the current document. This is not an undoable action.
|
|
*/
|
|
this.clear = function () {
|
|
pathActions$$1.clear();
|
|
|
|
clearSelection();
|
|
|
|
// clear the svgcontent node
|
|
canvas.clearSvgContentElement();
|
|
|
|
// create new document
|
|
canvas.current_drawing_ = new Drawing(svgcontent);
|
|
|
|
// create empty first layer
|
|
canvas.createLayer('Layer 1');
|
|
|
|
// clear the undo stack
|
|
canvas.undoMgr.resetUndoStack();
|
|
|
|
// reset the selector manager
|
|
selectorManager.initGroup();
|
|
|
|
// reset the rubber band box
|
|
rubberBox = selectorManager.getRubberBandBox();
|
|
|
|
call('cleared');
|
|
};
|
|
|
|
/**
|
|
* Alias function
|
|
*/
|
|
this.linkControlPoints = pathActions$$1.linkControlPoints;
|
|
|
|
/**
|
|
* @returns The content DOM element
|
|
*/
|
|
this.getContentElem = function () {
|
|
return svgcontent;
|
|
};
|
|
|
|
/**
|
|
* @returns The root DOM element
|
|
*/
|
|
this.getRootElem = function () {
|
|
return svgroot;
|
|
};
|
|
|
|
/**
|
|
* @returns {Object} The current dimensions and zoom level in an object
|
|
*/
|
|
var getResolution = this.getResolution = function () {
|
|
// const vb = svgcontent.getAttribute('viewBox').split(' ');
|
|
// return {w:vb[2], h:vb[3], zoom: currentZoom};
|
|
|
|
var w = svgcontent.getAttribute('width') / currentZoom;
|
|
var h = svgcontent.getAttribute('height') / currentZoom;
|
|
|
|
return {
|
|
w: w,
|
|
h: h,
|
|
zoom: currentZoom
|
|
};
|
|
};
|
|
|
|
/**
|
|
* @returns The current snap to grid setting
|
|
*/
|
|
this.getSnapToGrid = function () {
|
|
return curConfig.gridSnapping;
|
|
};
|
|
|
|
/**
|
|
* @returns {String} A string which describes the revision number of SvgCanvas.
|
|
*/
|
|
this.getVersion = function () {
|
|
return 'svgcanvas.js ($Rev$)';
|
|
};
|
|
|
|
/**
|
|
* Update interface strings with given values
|
|
* @param strs - Object with strings (see locales file)
|
|
*/
|
|
this.setUiStrings = function (strs) {
|
|
Object.assign(uiStrings, strs.notification);
|
|
setUiStrings(strs);
|
|
};
|
|
|
|
/**
|
|
* Update configuration options with given values
|
|
* @param {Object} opts - Object with options (see curConfig for examples)
|
|
*/
|
|
this.setConfig = function (opts) {
|
|
Object.assign(curConfig, opts);
|
|
};
|
|
|
|
/**
|
|
* @param elem
|
|
* @returns {String|undefined} the current group/SVG's title contents
|
|
*/
|
|
this.getTitle = function (elem) {
|
|
elem = elem || selectedElements[0];
|
|
if (!elem) {
|
|
return;
|
|
}
|
|
elem = $$9(elem).data('gsvg') || $$9(elem).data('symbol') || elem;
|
|
var childs = elem.childNodes;
|
|
for (var i = 0; i < childs.length; i++) {
|
|
if (childs[i].nodeName === 'title') {
|
|
return childs[i].textContent;
|
|
}
|
|
}
|
|
return '';
|
|
};
|
|
|
|
/**
|
|
* Sets the group/SVG's title content
|
|
* @param val
|
|
* @todo Combine this with `setDocumentTitle`
|
|
*/
|
|
this.setGroupTitle = function (val) {
|
|
var elem = selectedElements[0];
|
|
elem = $$9(elem).data('gsvg') || elem;
|
|
|
|
var ts = $$9(elem).children('title');
|
|
|
|
var batchCmd = new BatchCommand$1('Set Label');
|
|
|
|
var title = void 0;
|
|
if (!val.length) {
|
|
// Remove title element
|
|
var tsNextSibling = ts.nextSibling;
|
|
batchCmd.addSubCommand(new RemoveElementCommand$1(ts[0], tsNextSibling, elem));
|
|
ts.remove();
|
|
} else if (ts.length) {
|
|
// Change title contents
|
|
title = ts[0];
|
|
batchCmd.addSubCommand(new ChangeElementCommand$1(title, { '#text': title.textContent }));
|
|
title.textContent = val;
|
|
} else {
|
|
// Add title element
|
|
title = svgdoc.createElementNS(NS.SVG, 'title');
|
|
title.textContent = val;
|
|
$$9(elem).prepend(title);
|
|
batchCmd.addSubCommand(new InsertElementCommand$1(title));
|
|
}
|
|
|
|
addCommandToHistory(batchCmd);
|
|
};
|
|
|
|
/**
|
|
* @returns {String|undefined} The current document title or an empty string if not found
|
|
*/
|
|
var getDocumentTitle = this.getDocumentTitle = function () {
|
|
return canvas.getTitle(svgcontent);
|
|
};
|
|
|
|
/**
|
|
* Adds/updates a title element for the document with the given name.
|
|
* This is an undoable action
|
|
* @param {String} newtitle - String with the new title
|
|
*/
|
|
this.setDocumentTitle = function (newtitle) {
|
|
var childs = svgcontent.childNodes;
|
|
var docTitle = false,
|
|
oldTitle = '';
|
|
|
|
var batchCmd = new BatchCommand$1('Change Image Title');
|
|
|
|
for (var i = 0; i < childs.length; i++) {
|
|
if (childs[i].nodeName === 'title') {
|
|
docTitle = childs[i];
|
|
oldTitle = docTitle.textContent;
|
|
break;
|
|
}
|
|
}
|
|
if (!docTitle) {
|
|
docTitle = svgdoc.createElementNS(NS.SVG, 'title');
|
|
svgcontent.insertBefore(docTitle, svgcontent.firstChild);
|
|
}
|
|
|
|
if (newtitle.length) {
|
|
docTitle.textContent = newtitle;
|
|
} else {
|
|
// No title given, so element is not necessary
|
|
docTitle.parentNode.removeChild(docTitle);
|
|
}
|
|
batchCmd.addSubCommand(new ChangeElementCommand$1(docTitle, { '#text': oldTitle }));
|
|
addCommandToHistory(batchCmd);
|
|
};
|
|
|
|
/**
|
|
* Returns the editor's namespace URL, optionally adds it to root element
|
|
* @param {Boolean} add - Indicates whether or not to add the namespace value
|
|
* @returns {String} The editor's namespace URL
|
|
*/
|
|
this.getEditorNS = function (add) {
|
|
if (add) {
|
|
svgcontent.setAttribute('xmlns:se', NS.SE);
|
|
}
|
|
return NS.SE;
|
|
};
|
|
|
|
/**
|
|
* Changes the document's dimensions to the given size
|
|
* @param x - Number with the width of the new dimensions in user units.
|
|
* Can also be the string "fit" to indicate "fit to content"
|
|
* @param y - Number with the height of the new dimensions in user units.
|
|
* @returns {Boolean} Indicates if resolution change was succesful.
|
|
* It will fail on "fit to content" option with no content to fit to.
|
|
*/
|
|
this.setResolution = function (x, y) {
|
|
var res = getResolution();
|
|
var w = res.w,
|
|
h = res.h;
|
|
|
|
var batchCmd = void 0;
|
|
|
|
if (x === 'fit') {
|
|
// Get bounding box
|
|
var bbox = getStrokedBBoxDefaultVisible();
|
|
|
|
if (bbox) {
|
|
batchCmd = new BatchCommand$1('Fit Canvas to Content');
|
|
var visEls = getVisibleElements();
|
|
addToSelection(visEls);
|
|
var dx = [],
|
|
dy = [];
|
|
$$9.each(visEls, function (i, item) {
|
|
dx.push(bbox.x * -1);
|
|
dy.push(bbox.y * -1);
|
|
});
|
|
|
|
var cmd = canvas.moveSelectedElements(dx, dy, true);
|
|
batchCmd.addSubCommand(cmd);
|
|
clearSelection();
|
|
|
|
x = Math.round(bbox.width);
|
|
y = Math.round(bbox.height);
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
if (x !== w || y !== h) {
|
|
if (!batchCmd) {
|
|
batchCmd = new BatchCommand$1('Change Image Dimensions');
|
|
}
|
|
|
|
x = convertToNum('width', x);
|
|
y = convertToNum('height', y);
|
|
|
|
svgcontent.setAttribute('width', x);
|
|
svgcontent.setAttribute('height', y);
|
|
|
|
this.contentW = x;
|
|
this.contentH = y;
|
|
batchCmd.addSubCommand(new ChangeElementCommand$1(svgcontent, { width: w, height: h }));
|
|
|
|
svgcontent.setAttribute('viewBox', [0, 0, x / currentZoom, y / currentZoom].join(' '));
|
|
batchCmd.addSubCommand(new ChangeElementCommand$1(svgcontent, { viewBox: ['0 0', w, h].join(' ') }));
|
|
|
|
addCommandToHistory(batchCmd);
|
|
call('changed', [svgcontent]);
|
|
}
|
|
return true;
|
|
};
|
|
|
|
/**
|
|
* @returns An object with x, y values indicating the svgcontent element's
|
|
* position in the editor's canvas.
|
|
*/
|
|
this.getOffset = function () {
|
|
return $$9(svgcontent).attr(['x', 'y']);
|
|
};
|
|
|
|
/**
|
|
* Sets the zoom level on the canvas-side based on the given value
|
|
* @param val - Bounding box object to zoom to or string indicating zoom option
|
|
* @param {Number} editorW - Integer with the editor's workarea box's width
|
|
* @param {Number} editorH - Integer with the editor's workarea box's height
|
|
* @returns {Object|undefined}
|
|
*/
|
|
this.setBBoxZoom = function (val, editorW, editorH) {
|
|
var spacer = 0.85;
|
|
var bb = void 0;
|
|
var calcZoom = function calcZoom(bb) {
|
|
if (!bb) {
|
|
return false;
|
|
}
|
|
var wZoom = Math.round(editorW / bb.width * 100 * spacer) / 100;
|
|
var hZoom = Math.round(editorH / bb.height * 100 * spacer) / 100;
|
|
var zoom = Math.min(wZoom, hZoom);
|
|
canvas.setZoom(zoom);
|
|
return { zoom: zoom, bbox: bb };
|
|
};
|
|
|
|
if ((typeof val === 'undefined' ? 'undefined' : _typeof(val)) === 'object') {
|
|
bb = val;
|
|
if (bb.width === 0 || bb.height === 0) {
|
|
var newzoom = bb.zoom ? bb.zoom : currentZoom * bb.factor;
|
|
canvas.setZoom(newzoom);
|
|
return { zoom: currentZoom, bbox: bb };
|
|
}
|
|
return calcZoom(bb);
|
|
}
|
|
|
|
switch (val) {
|
|
case 'selection':
|
|
if (!selectedElements[0]) {
|
|
return;
|
|
}
|
|
var selectedElems = $$9.map(selectedElements, function (n) {
|
|
if (n) {
|
|
return n;
|
|
}
|
|
});
|
|
bb = getStrokedBBoxDefaultVisible(selectedElems);
|
|
break;
|
|
case 'canvas':
|
|
var res = getResolution();
|
|
spacer = 0.95;
|
|
bb = { width: res.w, height: res.h, x: 0, y: 0 };
|
|
break;
|
|
case 'content':
|
|
bb = getStrokedBBoxDefaultVisible();
|
|
break;
|
|
case 'layer':
|
|
bb = getStrokedBBoxDefaultVisible(getVisibleElements(getCurrentDrawing().getCurrentLayer()));
|
|
break;
|
|
default:
|
|
return;
|
|
}
|
|
return calcZoom(bb);
|
|
};
|
|
|
|
/**
|
|
* Sets the zoom to the given level
|
|
* @param {Number} zoomlevel - Float indicating the zoom level to change to
|
|
*/
|
|
this.setZoom = function (zoomlevel) {
|
|
var res = getResolution();
|
|
svgcontent.setAttribute('viewBox', '0 0 ' + res.w / zoomlevel + ' ' + res.h / zoomlevel);
|
|
currentZoom = zoomlevel;
|
|
$$9.each(selectedElements, function (i, elem) {
|
|
if (!elem) {
|
|
return;
|
|
}
|
|
selectorManager.requestSelector(elem).resize();
|
|
});
|
|
pathActions$$1.zoomChange();
|
|
runExtensions('zoomChanged', zoomlevel);
|
|
};
|
|
|
|
/**
|
|
* @returns {String} The current editor mode string
|
|
*/
|
|
this.getMode = function () {
|
|
return currentMode;
|
|
};
|
|
|
|
/**
|
|
* Sets the editor's mode to the given string
|
|
* @param {String} name - String with the new mode to change to
|
|
*/
|
|
this.setMode = function (name) {
|
|
pathActions$$1.clear(true);
|
|
textActions.clear();
|
|
curProperties = selectedElements[0] && selectedElements[0].nodeName === 'text' ? curText : curShape;
|
|
currentMode = name;
|
|
};
|
|
|
|
/**
|
|
* Group: Element Styling
|
|
*/
|
|
|
|
/**
|
|
* @returns The current fill/stroke option
|
|
*/
|
|
this.getColor = function (type) {
|
|
return curProperties[type];
|
|
};
|
|
|
|
/**
|
|
* Change the current stroke/fill color/gradient value
|
|
* @param {String} type - String indicating fill or stroke
|
|
* @param val - The value to set the stroke attribute to
|
|
* @param {Boolean} preventUndo - Boolean indicating whether or not this should be and undoable option
|
|
*/
|
|
this.setColor = function (type, val, preventUndo) {
|
|
curShape[type] = val;
|
|
curProperties[type + '_paint'] = { type: 'solidColor' };
|
|
var elems = [];
|
|
function addNonG(e) {
|
|
if (e.nodeName !== 'g') {
|
|
elems.push(e);
|
|
}
|
|
}
|
|
var i = selectedElements.length;
|
|
while (i--) {
|
|
var elem = selectedElements[i];
|
|
if (elem) {
|
|
if (elem.tagName === 'g') {
|
|
walkTree(elem, addNonG);
|
|
} else {
|
|
if (type === 'fill') {
|
|
if (elem.tagName !== 'polyline' && elem.tagName !== 'line') {
|
|
elems.push(elem);
|
|
}
|
|
} else {
|
|
elems.push(elem);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (elems.length > 0) {
|
|
if (!preventUndo) {
|
|
changeSelectedAttribute(type, val, elems);
|
|
call('changed', elems);
|
|
} else {
|
|
changeSelectedAttributeNoUndo(type, val, elems);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Apply the current gradient to selected element's fill or stroke
|
|
//
|
|
// Parameters
|
|
// type - String indicating "fill" or "stroke" to apply to an element
|
|
var setGradient = this.setGradient = function (type) {
|
|
if (!curProperties[type + '_paint'] || curProperties[type + '_paint'].type === 'solidColor') {
|
|
return;
|
|
}
|
|
var grad = canvas[type + 'Grad'];
|
|
// find out if there is a duplicate gradient already in the defs
|
|
var duplicateGrad = findDuplicateGradient(grad);
|
|
var defs = findDefs();
|
|
// no duplicate found, so import gradient into defs
|
|
if (!duplicateGrad) {
|
|
// const origGrad = grad;
|
|
grad = defs.appendChild(svgdoc.importNode(grad, true));
|
|
// get next id and set it on the grad
|
|
grad.id = getNextId();
|
|
} else {
|
|
// use existing gradient
|
|
grad = duplicateGrad;
|
|
}
|
|
canvas.setColor(type, 'url(#' + grad.id + ')');
|
|
};
|
|
|
|
/**
|
|
* Check if exact gradient already exists
|
|
* @param grad - The gradient DOM element to compare to others
|
|
* @returns The existing gradient if found, null if not
|
|
*/
|
|
var findDuplicateGradient = function findDuplicateGradient(grad) {
|
|
var defs = findDefs();
|
|
var existingGrads = $$9(defs).find('linearGradient, radialGradient');
|
|
var i = existingGrads.length;
|
|
var radAttrs = ['r', 'cx', 'cy', 'fx', 'fy'];
|
|
while (i--) {
|
|
var og = existingGrads[i];
|
|
if (grad.tagName === 'linearGradient') {
|
|
if (grad.getAttribute('x1') !== og.getAttribute('x1') || grad.getAttribute('y1') !== og.getAttribute('y1') || grad.getAttribute('x2') !== og.getAttribute('x2') || grad.getAttribute('y2') !== og.getAttribute('y2')) {
|
|
continue;
|
|
}
|
|
} else {
|
|
var _ret = function () {
|
|
var gradAttrs = $$9(grad).attr(radAttrs);
|
|
var ogAttrs = $$9(og).attr(radAttrs);
|
|
|
|
var diff = false;
|
|
$$9.each(radAttrs, function (i, attr) {
|
|
if (gradAttrs[attr] !== ogAttrs[attr]) {
|
|
diff = true;
|
|
}
|
|
});
|
|
|
|
if (diff) {
|
|
return 'continue';
|
|
}
|
|
}();
|
|
|
|
if (_ret === 'continue') continue;
|
|
}
|
|
|
|
// else could be a duplicate, iterate through stops
|
|
var stops = grad.getElementsByTagNameNS(NS.SVG, 'stop');
|
|
var ostops = og.getElementsByTagNameNS(NS.SVG, 'stop');
|
|
|
|
if (stops.length !== ostops.length) {
|
|
continue;
|
|
}
|
|
|
|
var j = stops.length;
|
|
while (j--) {
|
|
var stop = stops[j];
|
|
var ostop = ostops[j];
|
|
|
|
if (stop.getAttribute('offset') !== ostop.getAttribute('offset') || stop.getAttribute('stop-opacity') !== ostop.getAttribute('stop-opacity') || stop.getAttribute('stop-color') !== ostop.getAttribute('stop-color')) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (j === -1) {
|
|
return og;
|
|
}
|
|
} // for each gradient in defs
|
|
|
|
return null;
|
|
};
|
|
|
|
/**
|
|
* Set a color/gradient to a fill/stroke
|
|
* @param {"fill"|"stroke"} type - String with "fill" or "stroke"
|
|
* @param paint - The jGraduate paint object to apply
|
|
*/
|
|
this.setPaint = function (type, paint) {
|
|
// make a copy
|
|
var p = new $$9.jGraduate.Paint(paint);
|
|
this.setPaintOpacity(type, p.alpha / 100, true);
|
|
|
|
// now set the current paint object
|
|
curProperties[type + '_paint'] = p;
|
|
switch (p.type) {
|
|
case 'solidColor':
|
|
this.setColor(type, p.solidColor !== 'none' ? '#' + p.solidColor : 'none');
|
|
break;
|
|
case 'linearGradient':
|
|
case 'radialGradient':
|
|
canvas[type + 'Grad'] = p[p.type];
|
|
setGradient(type);
|
|
break;
|
|
}
|
|
};
|
|
|
|
// alias
|
|
this.setStrokePaint = function (paint) {
|
|
this.setPaint('stroke', paint);
|
|
};
|
|
|
|
this.setFillPaint = function (paint) {
|
|
this.setPaint('fill', paint);
|
|
};
|
|
|
|
/**
|
|
* @returns The current stroke-width value
|
|
*/
|
|
this.getStrokeWidth = function () {
|
|
return curProperties.stroke_width;
|
|
};
|
|
|
|
/**
|
|
* Sets the stroke width for the current selected elements
|
|
* When attempting to set a line's width to 0, this changes it to 1 instead
|
|
* @param {Number} val - A Float indicating the new stroke width value
|
|
*/
|
|
this.setStrokeWidth = function (val) {
|
|
if (val === 0 && ['line', 'path'].includes(currentMode)) {
|
|
canvas.setStrokeWidth(1);
|
|
return;
|
|
}
|
|
curProperties.stroke_width = val;
|
|
|
|
var elems = [];
|
|
function addNonG(e) {
|
|
if (e.nodeName !== 'g') {
|
|
elems.push(e);
|
|
}
|
|
}
|
|
var i = selectedElements.length;
|
|
while (i--) {
|
|
var elem = selectedElements[i];
|
|
if (elem) {
|
|
if (elem.tagName === 'g') {
|
|
walkTree(elem, addNonG);
|
|
} else {
|
|
elems.push(elem);
|
|
}
|
|
}
|
|
}
|
|
if (elems.length > 0) {
|
|
changeSelectedAttribute('stroke-width', val, elems);
|
|
call('changed', selectedElements);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Set the given stroke-related attribute the given value for selected elements
|
|
* @param {String} attr - String with the attribute name
|
|
* @param {String|Number} val - String or number with the attribute value
|
|
*/
|
|
this.setStrokeAttr = function (attr, val) {
|
|
curShape[attr.replace('-', '_')] = val;
|
|
var elems = [];
|
|
|
|
var i = selectedElements.length;
|
|
while (i--) {
|
|
var elem = selectedElements[i];
|
|
if (elem) {
|
|
if (elem.tagName === 'g') {
|
|
walkTree(elem, function (e) {
|
|
if (e.nodeName !== 'g') {
|
|
elems.push(e);
|
|
}
|
|
});
|
|
} else {
|
|
elems.push(elem);
|
|
}
|
|
}
|
|
}
|
|
if (elems.length > 0) {
|
|
changeSelectedAttribute(attr, val, elems);
|
|
call('changed', selectedElements);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @returns current style options
|
|
*/
|
|
this.getStyle = function () {
|
|
return curShape;
|
|
};
|
|
|
|
/**
|
|
* @returns the current opacity
|
|
*/
|
|
this.getOpacity = getOpacity;
|
|
|
|
/**
|
|
* Sets the given opacity to the current selected elements
|
|
* @param val
|
|
*/
|
|
this.setOpacity = function (val) {
|
|
curShape.opacity = val;
|
|
changeSelectedAttribute('opacity', val);
|
|
};
|
|
|
|
/**
|
|
* @returns the current fill opacity
|
|
*/
|
|
this.getFillOpacity = function () {
|
|
return curShape.fill_opacity;
|
|
};
|
|
|
|
/**
|
|
* @returns the current stroke opacity
|
|
*/
|
|
this.getStrokeOpacity = function () {
|
|
return curShape.stroke_opacity;
|
|
};
|
|
|
|
/**
|
|
* Sets the current fill/stroke opacity
|
|
* @param {String} type - String with "fill" or "stroke"
|
|
* @param {Number} val - Float with the new opacity value
|
|
* @param {Boolean} preventUndo - Indicates whether or not this should be an undoable action
|
|
*/
|
|
this.setPaintOpacity = function (type, val, preventUndo) {
|
|
curShape[type + '_opacity'] = val;
|
|
if (!preventUndo) {
|
|
changeSelectedAttribute(type + '-opacity', val);
|
|
} else {
|
|
changeSelectedAttributeNoUndo(type + '-opacity', val);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Gets the current fill/stroke opacity
|
|
* @param {"fill"|"stroke"} type - String with "fill" or "stroke"
|
|
* @returns Fill/stroke opacity
|
|
*/
|
|
this.getPaintOpacity = function (type) {
|
|
return type === 'fill' ? this.getFillOpacity() : this.getStrokeOpacity();
|
|
};
|
|
|
|
/**
|
|
* Gets the stdDeviation blur value of the given element
|
|
* @param elem - The element to check the blur value for
|
|
* @returns stdDeviation blur attribute value
|
|
*/
|
|
this.getBlur = function (elem) {
|
|
var val = 0;
|
|
// const elem = selectedElements[0];
|
|
|
|
if (elem) {
|
|
var filterUrl = elem.getAttribute('filter');
|
|
if (filterUrl) {
|
|
var blur = getElem(elem.id + '_blur');
|
|
if (blur) {
|
|
val = blur.firstChild.getAttribute('stdDeviation');
|
|
}
|
|
}
|
|
}
|
|
return val;
|
|
};
|
|
|
|
(function () {
|
|
var curCommand = null;
|
|
var filter = null;
|
|
var filterHidden = false;
|
|
|
|
/**
|
|
* Sets the stdDeviation blur value on the selected element without being undoable
|
|
* @param val - The new stdDeviation value
|
|
*/
|
|
canvas.setBlurNoUndo = function (val) {
|
|
if (!filter) {
|
|
canvas.setBlur(val);
|
|
return;
|
|
}
|
|
if (val === 0) {
|
|
// Don't change the StdDev, as that will hide the element.
|
|
// Instead, just remove the value for "filter"
|
|
changeSelectedAttributeNoUndo('filter', '');
|
|
filterHidden = true;
|
|
} else {
|
|
var elem = selectedElements[0];
|
|
if (filterHidden) {
|
|
changeSelectedAttributeNoUndo('filter', 'url(#' + elem.id + '_blur)');
|
|
}
|
|
if (isWebkit()) {
|
|
console.log('e', elem);
|
|
elem.removeAttribute('filter');
|
|
elem.setAttribute('filter', 'url(#' + elem.id + '_blur)');
|
|
}
|
|
changeSelectedAttributeNoUndo('stdDeviation', val, [filter.firstChild]);
|
|
canvas.setBlurOffsets(filter, val);
|
|
}
|
|
};
|
|
|
|
function finishChange() {
|
|
var bCmd = canvas.undoMgr.finishUndoableChange();
|
|
curCommand.addSubCommand(bCmd);
|
|
addCommandToHistory(curCommand);
|
|
curCommand = null;
|
|
filter = null;
|
|
}
|
|
|
|
/**
|
|
* Sets the x, y, with, height values of the filter element in order to
|
|
* make the blur not be clipped. Removes them if not neeeded
|
|
* @param filter - The filter DOM element to update
|
|
* @param stdDev - The standard deviation value on which to base the offset size
|
|
*/
|
|
canvas.setBlurOffsets = function (filter, stdDev) {
|
|
if (stdDev > 3) {
|
|
// TODO: Create algorithm here where size is based on expected blur
|
|
assignAttributes(filter, {
|
|
x: '-50%',
|
|
y: '-50%',
|
|
width: '200%',
|
|
height: '200%'
|
|
}, 100);
|
|
} else {
|
|
// Removing these attributes hides text in Chrome (see Issue 579)
|
|
if (!isWebkit()) {
|
|
filter.removeAttribute('x');
|
|
filter.removeAttribute('y');
|
|
filter.removeAttribute('width');
|
|
filter.removeAttribute('height');
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Adds/updates the blur filter to the selected element
|
|
* @param {Number} val - Float with the new stdDeviation blur value
|
|
* @param {Boolean} complete - Boolean indicating whether or not the action should be completed (to add to the undo manager)
|
|
*/
|
|
canvas.setBlur = function (val, complete) {
|
|
if (curCommand) {
|
|
finishChange();
|
|
return;
|
|
}
|
|
|
|
// Looks for associated blur, creates one if not found
|
|
var elem = selectedElements[0];
|
|
var elemId = elem.id;
|
|
filter = getElem(elemId + '_blur');
|
|
|
|
val -= 0;
|
|
|
|
var batchCmd = new BatchCommand$1();
|
|
|
|
// Blur found!
|
|
if (filter) {
|
|
if (val === 0) {
|
|
filter = null;
|
|
}
|
|
} else {
|
|
// Not found, so create
|
|
var newblur = addSvgElementFromJson({ element: 'feGaussianBlur',
|
|
attr: {
|
|
in: 'SourceGraphic',
|
|
stdDeviation: val
|
|
}
|
|
});
|
|
|
|
filter = addSvgElementFromJson({ element: 'filter',
|
|
attr: {
|
|
id: elemId + '_blur'
|
|
}
|
|
});
|
|
|
|
filter.appendChild(newblur);
|
|
findDefs().appendChild(filter);
|
|
|
|
batchCmd.addSubCommand(new InsertElementCommand$1(filter));
|
|
}
|
|
|
|
var changes = { filter: elem.getAttribute('filter') };
|
|
|
|
if (val === 0) {
|
|
elem.removeAttribute('filter');
|
|
batchCmd.addSubCommand(new ChangeElementCommand$1(elem, changes));
|
|
return;
|
|
}
|
|
|
|
changeSelectedAttribute('filter', 'url(#' + elemId + '_blur)');
|
|
batchCmd.addSubCommand(new ChangeElementCommand$1(elem, changes));
|
|
canvas.setBlurOffsets(filter, val);
|
|
|
|
curCommand = batchCmd;
|
|
canvas.undoMgr.beginUndoableChange('stdDeviation', [filter ? filter.firstChild : null]);
|
|
if (complete) {
|
|
canvas.setBlurNoUndo(val);
|
|
finishChange();
|
|
}
|
|
};
|
|
})();
|
|
|
|
/**
|
|
* Check whether selected element is bold or not
|
|
* @returns {Boolean} Indicates whether or not element is bold
|
|
*/
|
|
this.getBold = function () {
|
|
// should only have one element selected
|
|
var selected = selectedElements[0];
|
|
if (selected != null && selected.tagName === 'text' && selectedElements[1] == null) {
|
|
return selected.getAttribute('font-weight') === 'bold';
|
|
}
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Make the selected element bold or normal
|
|
* @param {Boolean} b - Indicates bold (true) or normal (false)
|
|
*/
|
|
this.setBold = function (b) {
|
|
var selected = selectedElements[0];
|
|
if (selected != null && selected.tagName === 'text' && selectedElements[1] == null) {
|
|
changeSelectedAttribute('font-weight', b ? 'bold' : 'normal');
|
|
}
|
|
if (!selectedElements[0].textContent) {
|
|
textActions.setCursor();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Check whether selected element is italic or not
|
|
* @returns {Boolean} Indicates whether or not element is italic
|
|
*/
|
|
this.getItalic = function () {
|
|
var selected = selectedElements[0];
|
|
if (selected != null && selected.tagName === 'text' && selectedElements[1] == null) {
|
|
return selected.getAttribute('font-style') === 'italic';
|
|
}
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Make the selected element italic or normal
|
|
* @param {Boolean} b - Indicates italic (true) or normal (false)
|
|
*/
|
|
this.setItalic = function (i) {
|
|
var selected = selectedElements[0];
|
|
if (selected != null && selected.tagName === 'text' && selectedElements[1] == null) {
|
|
changeSelectedAttribute('font-style', i ? 'italic' : 'normal');
|
|
}
|
|
if (!selectedElements[0].textContent) {
|
|
textActions.setCursor();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @returns The current font family
|
|
*/
|
|
this.getFontFamily = function () {
|
|
return curText.font_family;
|
|
};
|
|
|
|
/**
|
|
* Set the new font family
|
|
* @param {String} val - String with the new font family
|
|
*/
|
|
this.setFontFamily = function (val) {
|
|
curText.font_family = val;
|
|
changeSelectedAttribute('font-family', val);
|
|
if (selectedElements[0] && !selectedElements[0].textContent) {
|
|
textActions.setCursor();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Set the new font color
|
|
* @param {String} val - String with the new font color
|
|
*/
|
|
this.setFontColor = function (val) {
|
|
curText.fill = val;
|
|
changeSelectedAttribute('fill', val);
|
|
};
|
|
|
|
/**
|
|
* @returns The current font color
|
|
*/
|
|
this.getFontColor = function () {
|
|
return curText.fill;
|
|
};
|
|
|
|
/**
|
|
* Returns the current font size
|
|
*/
|
|
this.getFontSize = function () {
|
|
return curText.font_size;
|
|
};
|
|
|
|
/**
|
|
* Applies the given font size to the selected element
|
|
* @param {Number} val - Float with the new font size
|
|
*/
|
|
this.setFontSize = function (val) {
|
|
curText.font_size = val;
|
|
changeSelectedAttribute('font-size', val);
|
|
if (!selectedElements[0].textContent) {
|
|
textActions.setCursor();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @returns The current text (textContent) of the selected element
|
|
*/
|
|
this.getText = function () {
|
|
var selected = selectedElements[0];
|
|
if (selected == null) {
|
|
return '';
|
|
}
|
|
return selected.textContent;
|
|
};
|
|
|
|
/**
|
|
* Updates the text element with the given string
|
|
* @param {String} val - String with the new text
|
|
*/
|
|
this.setTextContent = function (val) {
|
|
changeSelectedAttribute('#text', val);
|
|
textActions.init(val);
|
|
textActions.setCursor();
|
|
};
|
|
|
|
/**
|
|
* Sets the new image URL for the selected image element. Updates its size if
|
|
* a new URL is given
|
|
* @param {String} val - String with the image URL/path
|
|
*/
|
|
this.setImageURL = function (val) {
|
|
var elem = selectedElements[0];
|
|
if (!elem) {
|
|
return;
|
|
}
|
|
|
|
var attrs = $$9(elem).attr(['width', 'height']);
|
|
var setsize = !attrs.width || !attrs.height;
|
|
|
|
var curHref = getHref(elem);
|
|
|
|
// Do nothing if no URL change or size change
|
|
if (curHref !== val) {
|
|
setsize = true;
|
|
} else if (!setsize) {
|
|
return;
|
|
}
|
|
|
|
var batchCmd = new BatchCommand$1('Change Image URL');
|
|
|
|
setHref(elem, val);
|
|
batchCmd.addSubCommand(new ChangeElementCommand$1(elem, {
|
|
'#href': curHref
|
|
}));
|
|
|
|
if (setsize) {
|
|
$$9(new Image()).load(function () {
|
|
var changes = $$9(elem).attr(['width', 'height']);
|
|
|
|
$$9(elem).attr({
|
|
width: this.width,
|
|
height: this.height
|
|
});
|
|
|
|
selectorManager.requestSelector(elem).resize();
|
|
|
|
batchCmd.addSubCommand(new ChangeElementCommand$1(elem, changes));
|
|
addCommandToHistory(batchCmd);
|
|
call('changed', [elem]);
|
|
}).attr('src', val);
|
|
} else {
|
|
addCommandToHistory(batchCmd);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Sets the new link URL for the selected anchor element.
|
|
* @param {String} val - String with the link URL/path
|
|
*/
|
|
this.setLinkURL = function (val) {
|
|
var elem = selectedElements[0];
|
|
if (!elem) {
|
|
return;
|
|
}
|
|
if (elem.tagName !== 'a') {
|
|
// See if parent is an anchor
|
|
var parentsA = $$9(elem).parents('a');
|
|
if (parentsA.length) {
|
|
elem = parentsA[0];
|
|
} else {
|
|
return;
|
|
}
|
|
}
|
|
|
|
var curHref = getHref(elem);
|
|
|
|
if (curHref === val) {
|
|
return;
|
|
}
|
|
|
|
var batchCmd = new BatchCommand$1('Change Link URL');
|
|
|
|
setHref(elem, val);
|
|
batchCmd.addSubCommand(new ChangeElementCommand$1(elem, {
|
|
'#href': curHref
|
|
}));
|
|
|
|
addCommandToHistory(batchCmd);
|
|
};
|
|
|
|
/**
|
|
* Sets the rx & ry values to the selected rect element to change its corner radius
|
|
* @param val - The new radius
|
|
*/
|
|
this.setRectRadius = function (val) {
|
|
var selected = selectedElements[0];
|
|
if (selected != null && selected.tagName === 'rect') {
|
|
var r = selected.getAttribute('rx');
|
|
if (r !== String(val)) {
|
|
selected.setAttribute('rx', val);
|
|
selected.setAttribute('ry', val);
|
|
addCommandToHistory(new ChangeElementCommand$1(selected, { rx: r, ry: r }, 'Radius'));
|
|
call('changed', [selected]);
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Wraps the selected element(s) in an anchor element or converts group to one
|
|
* @param url
|
|
*/
|
|
this.makeHyperlink = function (url) {
|
|
canvas.groupSelectedElements('a', url);
|
|
|
|
// TODO: If element is a single "g", convert to "a"
|
|
// if (selectedElements.length > 1 && selectedElements[1]) {
|
|
};
|
|
|
|
/**
|
|
*
|
|
*/
|
|
this.removeHyperlink = function () {
|
|
canvas.ungroupSelectedElement();
|
|
};
|
|
|
|
/**
|
|
* Group: Element manipulation
|
|
*/
|
|
|
|
/**
|
|
* Sets the new segment type to the selected segment(s).
|
|
* @param {Number} newType - Integer with the new segment type
|
|
* See https://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg for list
|
|
*/
|
|
this.setSegType = function (newType) {
|
|
pathActions$$1.setSegType(newType);
|
|
};
|
|
|
|
/**
|
|
* @todo (codedread): Remove the getBBox argument and split this function into two.
|
|
* Convert selected element to a path, or get the BBox of an element-as-path
|
|
* @param elem - The DOM element to be converted
|
|
* @param getBBox - Boolean on whether or not to only return the path's BBox
|
|
* @returns If the getBBox flag is true, the resulting path's bounding box object.
|
|
* Otherwise the resulting path element is returned.
|
|
*/
|
|
this.convertToPath = function (elem, getBBox$$1) {
|
|
if (elem == null) {
|
|
var elems = selectedElements;
|
|
$$9.each(elems, function (i, elem) {
|
|
if (elem) {
|
|
canvas.convertToPath(elem);
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
if (getBBox$$1) {
|
|
return getBBoxOfElementAsPath(elem, addSvgElementFromJson, pathActions$$1);
|
|
} else {
|
|
// TODO: Why is this applying attributes from curShape, then inside utilities.convertToPath it's pulling addition attributes from elem?
|
|
// TODO: If convertToPath is called with one elem, curShape and elem are probably the same; but calling with multiple is a bug or cool feature.
|
|
var attrs = {
|
|
fill: curShape.fill,
|
|
'fill-opacity': curShape.fill_opacity,
|
|
stroke: curShape.stroke,
|
|
'stroke-width': curShape.stroke_width,
|
|
'stroke-dasharray': curShape.stroke_dasharray,
|
|
'stroke-linejoin': curShape.stroke_linejoin,
|
|
'stroke-linecap': curShape.stroke_linecap,
|
|
'stroke-opacity': curShape.stroke_opacity,
|
|
opacity: curShape.opacity,
|
|
visibility: 'hidden'
|
|
};
|
|
return convertToPath(elem, attrs, addSvgElementFromJson, pathActions$$1, clearSelection, addToSelection, history, addCommandToHistory);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* This function makes the changes to the elements. It does not add the change
|
|
* to the history stack.
|
|
* @param {String} attr - Attribute name
|
|
* @param {String|Number} newValue - String or number with the new attribute value
|
|
* @param elems - The DOM elements to apply the change to
|
|
*/
|
|
var changeSelectedAttributeNoUndo = function changeSelectedAttributeNoUndo(attr, newValue, elems) {
|
|
if (currentMode === 'pathedit') {
|
|
// Editing node
|
|
pathActions$$1.moveNode(attr, newValue);
|
|
}
|
|
elems = elems || selectedElements;
|
|
var i = elems.length;
|
|
var noXYElems = ['g', 'polyline', 'path'];
|
|
var goodGAttrs = ['transform', 'opacity', 'filter'];
|
|
|
|
var _loop = function _loop() {
|
|
var elem = elems[i];
|
|
if (elem == null) {
|
|
return 'continue';
|
|
}
|
|
|
|
// Set x,y vals on elements that don't have them
|
|
if ((attr === 'x' || attr === 'y') && noXYElems.includes(elem.tagName)) {
|
|
var bbox = getStrokedBBoxDefaultVisible([elem]);
|
|
var diffX = attr === 'x' ? newValue - bbox.x : 0;
|
|
var diffY = attr === 'y' ? newValue - bbox.y : 0;
|
|
canvas.moveSelectedElements(diffX * currentZoom, diffY * currentZoom, true);
|
|
return 'continue';
|
|
}
|
|
|
|
// only allow the transform/opacity/filter attribute to change on <g> elements, slightly hacky
|
|
// TODO: FIXME: This doesn't seem right. Where's the body of this if statement?
|
|
if (elem.tagName === 'g' && goodGAttrs.includes(attr)) ;
|
|
var oldval = attr === '#text' ? elem.textContent : elem.getAttribute(attr);
|
|
if (oldval == null) {
|
|
oldval = '';
|
|
}
|
|
if (oldval !== String(newValue)) {
|
|
if (attr === '#text') {
|
|
// const oldW = utilsGetBBox(elem).width;
|
|
elem.textContent = newValue;
|
|
|
|
// FF bug occurs on on rotated elements
|
|
if (/rotate/.test(elem.getAttribute('transform'))) {
|
|
elem = ffClone(elem);
|
|
}
|
|
// Hoped to solve the issue of moving text with text-anchor="start",
|
|
// but this doesn't actually fix it. Hopefully on the right track, though. -Fyrd
|
|
// const box = getBBox(elem), left = box.x, top = box.y, {width, height} = box,
|
|
// dx = width - oldW, dy = 0;
|
|
// const angle = getRotationAngle(elem, true);
|
|
// if (angle) {
|
|
// const r = Math.sqrt(dx * dx + dy * dy);
|
|
// const theta = Math.atan2(dy, dx) - angle;
|
|
// dx = r * Math.cos(theta);
|
|
// dy = r * Math.sin(theta);
|
|
//
|
|
// elem.setAttribute('x', elem.getAttribute('x') - dx);
|
|
// elem.setAttribute('y', elem.getAttribute('y') - dy);
|
|
// }
|
|
} else if (attr === '#href') {
|
|
setHref(elem, newValue);
|
|
} else {
|
|
elem.setAttribute(attr, newValue);
|
|
}
|
|
|
|
// Go into "select" mode for text changes
|
|
// NOTE: Important that this happens AFTER elem.setAttribute() or else attributes like
|
|
// font-size can get reset to their old value, ultimately by svgEditor.updateContextPanel(),
|
|
// after calling textActions.toSelectMode() below
|
|
if (currentMode === 'textedit' && attr !== '#text' && elem.textContent.length) {
|
|
textActions.toSelectMode(elem);
|
|
}
|
|
|
|
// if (i === 0) {
|
|
// selectedBBoxes[0] = utilsGetBBox(elem);
|
|
// }
|
|
|
|
// Use the Firefox ffClone hack for text elements with gradients or
|
|
// where other text attributes are changed.
|
|
if (isGecko() && elem.nodeName === 'text' && /rotate/.test(elem.getAttribute('transform'))) {
|
|
if (String(newValue).startsWith('url') || ['font-size', 'font-family', 'x', 'y'].includes(attr) && elem.textContent) {
|
|
elem = ffClone(elem);
|
|
}
|
|
}
|
|
// Timeout needed for Opera & Firefox
|
|
// codedread: it is now possible for this function to be called with elements
|
|
// that are not in the selectedElements array, we need to only request a
|
|
// selector if the element is in that array
|
|
if (selectedElements.includes(elem)) {
|
|
setTimeout(function () {
|
|
// Due to element replacement, this element may no longer
|
|
// be part of the DOM
|
|
if (!elem.parentNode) {
|
|
return;
|
|
}
|
|
selectorManager.requestSelector(elem).resize();
|
|
}, 0);
|
|
}
|
|
// if this element was rotated, and we changed the position of this element
|
|
// we need to update the rotational transform attribute
|
|
var angle = getRotationAngle(elem);
|
|
if (angle !== 0 && attr !== 'transform') {
|
|
var tlist = getTransformList(elem);
|
|
var n = tlist.numberOfItems;
|
|
while (n--) {
|
|
var xform = tlist.getItem(n);
|
|
if (xform.type === 4) {
|
|
// remove old rotate
|
|
tlist.removeItem(n);
|
|
|
|
var box = getBBox(elem);
|
|
var center = transformPoint(box.x + box.width / 2, box.y + box.height / 2, transformListToTransform(tlist).matrix);
|
|
var cx = center.x,
|
|
cy = center.y;
|
|
var newrot = svgroot.createSVGTransform();
|
|
newrot.setRotate(angle, cx, cy);
|
|
tlist.insertItemBefore(newrot, n);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
} // if oldValue != newValue
|
|
};
|
|
|
|
while (i--) {
|
|
var _ret2 = _loop();
|
|
|
|
if (_ret2 === 'continue') continue;
|
|
} // for each elem
|
|
};
|
|
|
|
/**
|
|
* Change the given/selected element and add the original value to the history stack
|
|
* If you want to change all selectedElements, ignore the elems argument.
|
|
* If you want to change only a subset of selectedElements, then send the
|
|
* subset to this function in the elems argument.
|
|
* @param {String} attr - String with the attribute name
|
|
* @param {String|Number} newValue - String or number with the new attribute value
|
|
* @param elems - The DOM elements to apply the change to
|
|
*/
|
|
var changeSelectedAttribute = this.changeSelectedAttribute = function (attr, val, elems) {
|
|
elems = elems || selectedElements;
|
|
canvas.undoMgr.beginUndoableChange(attr, elems);
|
|
// const i = elems.length;
|
|
|
|
changeSelectedAttributeNoUndo(attr, val, elems);
|
|
|
|
var batchCmd = canvas.undoMgr.finishUndoableChange();
|
|
if (!batchCmd.isEmpty()) {
|
|
addCommandToHistory(batchCmd);
|
|
}
|
|
};
|
|
|
|
// Removes all selected elements from the DOM and adds the change to the
|
|
// history stack
|
|
this.deleteSelectedElements = function () {
|
|
var batchCmd = new BatchCommand$1('Delete Elements');
|
|
var len = selectedElements.length;
|
|
var selectedCopy = []; // selectedElements is being deleted
|
|
|
|
for (var i = 0; i < len; ++i) {
|
|
var selected = selectedElements[i];
|
|
if (selected == null) {
|
|
break;
|
|
}
|
|
|
|
var parent = selected.parentNode;
|
|
var t = selected;
|
|
|
|
// this will unselect the element and remove the selectedOutline
|
|
selectorManager.releaseSelector(t);
|
|
|
|
// Remove the path if present.
|
|
removePath_(t.id);
|
|
|
|
// Get the parent if it's a single-child anchor
|
|
if (parent.tagName === 'a' && parent.childNodes.length === 1) {
|
|
t = parent;
|
|
parent = parent.parentNode;
|
|
}
|
|
|
|
var _t = t,
|
|
nextSibling = _t.nextSibling;
|
|
|
|
var _elem2 = parent.removeChild(t);
|
|
selectedCopy.push(selected); // for the copy
|
|
batchCmd.addSubCommand(new RemoveElementCommand$1(_elem2, nextSibling, parent));
|
|
}
|
|
selectedElements = [];
|
|
|
|
if (!batchCmd.isEmpty()) {
|
|
addCommandToHistory(batchCmd);
|
|
}
|
|
call('changed', selectedCopy);
|
|
clearSelection();
|
|
};
|
|
|
|
/**
|
|
* Removes all selected elements from the DOM and adds the change to the
|
|
* history stack. Remembers removed elements on the clipboard
|
|
*/
|
|
this.cutSelectedElements = function () {
|
|
canvas.copySelectedElements();
|
|
canvas.deleteSelectedElements();
|
|
};
|
|
|
|
/**
|
|
* Remembers the current selected elements on the clipboard
|
|
*/
|
|
this.copySelectedElements = function () {
|
|
localStorage.setItem('svgedit_clipboard', JSON.stringify(selectedElements.map(function (x) {
|
|
return getJsonFromSvgElement(x);
|
|
})));
|
|
|
|
$$9('#cmenu_canvas').enableContextMenuItems('#paste,#paste_in_place');
|
|
};
|
|
|
|
/**
|
|
* @param {"in_place"|"point"|undefined} type
|
|
* @param {Number|undefined} x Expected if type is "point"
|
|
* @param {Number|undefined} y Expected if type is "point"
|
|
*/
|
|
this.pasteElements = function (type, x, y) {
|
|
var cb = JSON.parse(localStorage.getItem('svgedit_clipboard'));
|
|
var len = cb.length;
|
|
if (!len) {
|
|
return;
|
|
}
|
|
|
|
var pasted = [];
|
|
var batchCmd = new BatchCommand$1('Paste elements');
|
|
// const drawing = getCurrentDrawing();
|
|
var changedIDs = {};
|
|
|
|
// Recursively replace IDs and record the changes
|
|
function checkIDs(elem) {
|
|
if (elem.attr && elem.attr.id) {
|
|
changedIDs[elem.attr.id] = getNextId();
|
|
elem.attr.id = changedIDs[elem.attr.id];
|
|
}
|
|
if (elem.children) elem.children.forEach(checkIDs);
|
|
}
|
|
cb.forEach(checkIDs);
|
|
|
|
// Give extensions like the connector extension a chance to reflect new IDs and remove invalid elements
|
|
runExtensions('IDsUpdated', { elems: cb, changes: changedIDs }, true).forEach(function (extChanges) {
|
|
if (!extChanges || !('remove' in extChanges)) return;
|
|
|
|
extChanges.remove.forEach(function (removeID) {
|
|
cb = cb.filter(function (cbItem) {
|
|
return cbItem.attr.id !== removeID;
|
|
});
|
|
});
|
|
});
|
|
|
|
// Move elements to lastClickPoint
|
|
while (len--) {
|
|
var _elem3 = cb[len];
|
|
if (!_elem3) {
|
|
continue;
|
|
}
|
|
|
|
var copy = addSvgElementFromJson(_elem3);
|
|
pasted.push(copy);
|
|
batchCmd.addSubCommand(new InsertElementCommand$1(copy));
|
|
|
|
restoreRefElems(copy);
|
|
}
|
|
|
|
selectOnly(pasted);
|
|
|
|
if (type !== 'in_place') {
|
|
var ctrX = void 0,
|
|
ctrY = void 0;
|
|
|
|
if (!type) {
|
|
ctrX = lastClickPoint.x;
|
|
ctrY = lastClickPoint.y;
|
|
} else if (type === 'point') {
|
|
ctrX = x;
|
|
ctrY = y;
|
|
}
|
|
|
|
var bbox = getStrokedBBoxDefaultVisible(pasted);
|
|
var cx = ctrX - (bbox.x + bbox.width / 2),
|
|
cy = ctrY - (bbox.y + bbox.height / 2),
|
|
dx = [],
|
|
dy = [];
|
|
|
|
$$9.each(pasted, function (i, item) {
|
|
dx.push(cx);
|
|
dy.push(cy);
|
|
});
|
|
|
|
var cmd = canvas.moveSelectedElements(dx, dy, false);
|
|
if (cmd) batchCmd.addSubCommand(cmd);
|
|
}
|
|
|
|
addCommandToHistory(batchCmd);
|
|
call('changed', pasted);
|
|
};
|
|
|
|
/**
|
|
* Wraps all the selected elements in a group (g) element
|
|
* @param type - type of element to group into, defaults to <g>
|
|
*/
|
|
this.groupSelectedElements = function (type, urlArg) {
|
|
if (!type) {
|
|
type = 'g';
|
|
}
|
|
var cmdStr = '';
|
|
var url = void 0;
|
|
|
|
switch (type) {
|
|
case 'a':
|
|
{
|
|
cmdStr = 'Make hyperlink';
|
|
url = '';
|
|
if (arguments.length > 1) {
|
|
url = urlArg;
|
|
}
|
|
break;
|
|
}default:
|
|
{
|
|
type = 'g';
|
|
cmdStr = 'Group Elements';
|
|
break;
|
|
}
|
|
}
|
|
|
|
var batchCmd = new BatchCommand$1(cmdStr);
|
|
|
|
// create and insert the group element
|
|
var g = addSvgElementFromJson({
|
|
element: type,
|
|
attr: {
|
|
id: getNextId()
|
|
}
|
|
});
|
|
if (type === 'a') {
|
|
setHref(g, url);
|
|
}
|
|
batchCmd.addSubCommand(new InsertElementCommand$1(g));
|
|
|
|
// now move all children into the group
|
|
var i = selectedElements.length;
|
|
while (i--) {
|
|
var _elem4 = selectedElements[i];
|
|
if (_elem4 == null) {
|
|
continue;
|
|
}
|
|
|
|
if (_elem4.parentNode.tagName === 'a' && _elem4.parentNode.childNodes.length === 1) {
|
|
_elem4 = _elem4.parentNode;
|
|
}
|
|
|
|
var oldNextSibling = _elem4.nextSibling;
|
|
var oldParent = _elem4.parentNode;
|
|
g.appendChild(_elem4);
|
|
batchCmd.addSubCommand(new MoveElementCommand$1(_elem4, oldNextSibling, oldParent));
|
|
}
|
|
if (!batchCmd.isEmpty()) {
|
|
addCommandToHistory(batchCmd);
|
|
}
|
|
|
|
// update selection
|
|
selectOnly([g], true);
|
|
};
|
|
|
|
// Pushes all appropriate parent group properties down to its children, then
|
|
// removes them from the group
|
|
var pushGroupProperties = this.pushGroupProperties = function (g, undoable) {
|
|
var children = g.childNodes;
|
|
var len = children.length;
|
|
var xform = g.getAttribute('transform');
|
|
|
|
var glist = getTransformList(g);
|
|
var m = transformListToTransform(glist).matrix;
|
|
|
|
var batchCmd = new BatchCommand$1('Push group properties');
|
|
|
|
// TODO: get all fill/stroke properties from the group that we are about to destroy
|
|
// "fill", "fill-opacity", "fill-rule", "stroke", "stroke-dasharray", "stroke-dashoffset",
|
|
// "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity",
|
|
// "stroke-width"
|
|
// and then for each child, if they do not have the attribute (or the value is 'inherit')
|
|
// then set the child's attribute
|
|
|
|
var gangle = getRotationAngle(g);
|
|
|
|
var gattrs = $$9(g).attr(['filter', 'opacity']);
|
|
var gfilter = void 0,
|
|
gblur = void 0,
|
|
changes = void 0;
|
|
var drawing = getCurrentDrawing();
|
|
|
|
for (var i = 0; i < len; i++) {
|
|
var _elem5 = children[i];
|
|
|
|
if (_elem5.nodeType !== 1) {
|
|
continue;
|
|
}
|
|
|
|
if (gattrs.opacity !== null && gattrs.opacity !== 1) {
|
|
// const c_opac = elem.getAttribute('opacity') || 1;
|
|
var newOpac = Math.round((_elem5.getAttribute('opacity') || 1) * gattrs.opacity * 100) / 100;
|
|
changeSelectedAttribute('opacity', newOpac, [_elem5]);
|
|
}
|
|
|
|
if (gattrs.filter) {
|
|
var cblur = this.getBlur(_elem5);
|
|
var origCblur = cblur;
|
|
if (!gblur) {
|
|
gblur = this.getBlur(g);
|
|
}
|
|
if (cblur) {
|
|
// Is this formula correct?
|
|
cblur = Number(gblur) + Number(cblur);
|
|
} else if (cblur === 0) {
|
|
cblur = gblur;
|
|
}
|
|
|
|
// If child has no current filter, get group's filter or clone it.
|
|
if (!origCblur) {
|
|
// Set group's filter to use first child's ID
|
|
if (!gfilter) {
|
|
gfilter = getRefElem(gattrs.filter);
|
|
} else {
|
|
// Clone the group's filter
|
|
gfilter = drawing.copyElem(gfilter);
|
|
findDefs().appendChild(gfilter);
|
|
}
|
|
} else {
|
|
gfilter = getRefElem(_elem5.getAttribute('filter'));
|
|
}
|
|
|
|
// Change this in future for different filters
|
|
var suffix = gfilter.firstChild.tagName === 'feGaussianBlur' ? 'blur' : 'filter';
|
|
gfilter.id = _elem5.id + '_' + suffix;
|
|
changeSelectedAttribute('filter', 'url(#' + gfilter.id + ')', [_elem5]);
|
|
|
|
// Update blur value
|
|
if (cblur) {
|
|
changeSelectedAttribute('stdDeviation', cblur, [gfilter.firstChild]);
|
|
canvas.setBlurOffsets(gfilter, cblur);
|
|
}
|
|
}
|
|
|
|
var chtlist = getTransformList(_elem5);
|
|
|
|
// Don't process gradient transforms
|
|
if (_elem5.tagName.includes('Gradient')) {
|
|
chtlist = null;
|
|
}
|
|
|
|
// Hopefully not a problem to add this. Necessary for elements like <desc/>
|
|
if (!chtlist) {
|
|
continue;
|
|
}
|
|
|
|
// Apparently <defs> can get get a transformlist, but we don't want it to have one!
|
|
if (_elem5.tagName === 'defs') {
|
|
continue;
|
|
}
|
|
|
|
if (glist.numberOfItems) {
|
|
// TODO: if the group's transform is just a rotate, we can always transfer the
|
|
// rotate() down to the children (collapsing consecutive rotates and factoring
|
|
// out any translates)
|
|
if (gangle && glist.numberOfItems === 1) {
|
|
// [Rg] [Rc] [Mc]
|
|
// we want [Tr] [Rc2] [Mc] where:
|
|
// - [Rc2] is at the child's current center but has the
|
|
// sum of the group and child's rotation angles
|
|
// - [Tr] is the equivalent translation that this child
|
|
// undergoes if the group wasn't there
|
|
|
|
// [Tr] = [Rg] [Rc] [Rc2_inv]
|
|
|
|
// get group's rotation matrix (Rg)
|
|
var rgm = glist.getItem(0).matrix;
|
|
|
|
// get child's rotation matrix (Rc)
|
|
var rcm = svgroot.createSVGMatrix();
|
|
var cangle = getRotationAngle(_elem5);
|
|
if (cangle) {
|
|
rcm = chtlist.getItem(0).matrix;
|
|
}
|
|
|
|
// get child's old center of rotation
|
|
var cbox = getBBox(_elem5);
|
|
var ceqm = transformListToTransform(chtlist).matrix;
|
|
var coldc = transformPoint(cbox.x + cbox.width / 2, cbox.y + cbox.height / 2, ceqm);
|
|
|
|
// sum group and child's angles
|
|
var sangle = gangle + cangle;
|
|
|
|
// get child's rotation at the old center (Rc2_inv)
|
|
var r2 = svgroot.createSVGTransform();
|
|
r2.setRotate(sangle, coldc.x, coldc.y);
|
|
|
|
// calculate equivalent translate
|
|
var trm = matrixMultiply(rgm, rcm, r2.matrix.inverse());
|
|
|
|
// set up tlist
|
|
if (cangle) {
|
|
chtlist.removeItem(0);
|
|
}
|
|
|
|
if (sangle) {
|
|
if (chtlist.numberOfItems) {
|
|
chtlist.insertItemBefore(r2, 0);
|
|
} else {
|
|
chtlist.appendItem(r2);
|
|
}
|
|
}
|
|
|
|
if (trm.e || trm.f) {
|
|
var tr = svgroot.createSVGTransform();
|
|
tr.setTranslate(trm.e, trm.f);
|
|
if (chtlist.numberOfItems) {
|
|
chtlist.insertItemBefore(tr, 0);
|
|
} else {
|
|
chtlist.appendItem(tr);
|
|
}
|
|
}
|
|
} else {
|
|
// more complicated than just a rotate
|
|
// transfer the group's transform down to each child and then
|
|
// call recalculateDimensions()
|
|
var oldxform = _elem5.getAttribute('transform');
|
|
changes = {};
|
|
changes.transform = oldxform || '';
|
|
|
|
var newxform = svgroot.createSVGTransform();
|
|
|
|
// [ gm ] [ chm ] = [ chm ] [ gm' ]
|
|
// [ gm' ] = [ chmInv ] [ gm ] [ chm ]
|
|
var chm = transformListToTransform(chtlist).matrix,
|
|
chmInv = chm.inverse();
|
|
var gm = matrixMultiply(chmInv, m, chm);
|
|
newxform.setMatrix(gm);
|
|
chtlist.appendItem(newxform);
|
|
}
|
|
var cmd = recalculateDimensions(_elem5);
|
|
if (cmd) {
|
|
batchCmd.addSubCommand(cmd);
|
|
}
|
|
}
|
|
}
|
|
|
|
// remove transform and make it undo-able
|
|
if (xform) {
|
|
changes = {};
|
|
changes.transform = xform;
|
|
g.setAttribute('transform', '');
|
|
g.removeAttribute('transform');
|
|
batchCmd.addSubCommand(new ChangeElementCommand$1(g, changes));
|
|
}
|
|
|
|
if (undoable && !batchCmd.isEmpty()) {
|
|
return batchCmd;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Unwraps all the elements in a selected group (g) element. This requires
|
|
* significant recalculations to apply group's transforms, etc to its children
|
|
*/
|
|
this.ungroupSelectedElement = function () {
|
|
var g = selectedElements[0];
|
|
if (!g) {
|
|
return;
|
|
}
|
|
if ($$9(g).data('gsvg') || $$9(g).data('symbol')) {
|
|
// Is svg, so actually convert to group
|
|
convertToGroup(g);
|
|
return;
|
|
}
|
|
if (g.tagName === 'use') {
|
|
// Somehow doesn't have data set, so retrieve
|
|
var symbol = getElem(getHref(g).substr(1));
|
|
$$9(g).data('symbol', symbol).data('ref', symbol);
|
|
convertToGroup(g);
|
|
return;
|
|
}
|
|
var parentsA = $$9(g).parents('a');
|
|
if (parentsA.length) {
|
|
g = parentsA[0];
|
|
}
|
|
|
|
// Look for parent "a"
|
|
if (g.tagName === 'g' || g.tagName === 'a') {
|
|
var batchCmd = new BatchCommand$1('Ungroup Elements');
|
|
var cmd = pushGroupProperties(g, true);
|
|
if (cmd) {
|
|
batchCmd.addSubCommand(cmd);
|
|
}
|
|
|
|
var parent = g.parentNode;
|
|
var anchor = g.nextSibling;
|
|
var children = new Array(g.childNodes.length);
|
|
|
|
var i = 0;
|
|
while (g.firstChild) {
|
|
var _elem6 = g.firstChild;
|
|
var oldNextSibling = _elem6.nextSibling;
|
|
var oldParent = _elem6.parentNode;
|
|
|
|
// Remove child title elements
|
|
if (_elem6.tagName === 'title') {
|
|
var _elem7 = _elem6,
|
|
nextSibling = _elem7.nextSibling;
|
|
|
|
batchCmd.addSubCommand(new RemoveElementCommand$1(_elem6, nextSibling, oldParent));
|
|
oldParent.removeChild(_elem6);
|
|
continue;
|
|
}
|
|
|
|
children[i++] = _elem6 = parent.insertBefore(_elem6, anchor);
|
|
batchCmd.addSubCommand(new MoveElementCommand$1(_elem6, oldNextSibling, oldParent));
|
|
}
|
|
|
|
// remove the group from the selection
|
|
clearSelection();
|
|
|
|
// delete the group element (but make undo-able)
|
|
var gNextSibling = g.nextSibling;
|
|
g = parent.removeChild(g);
|
|
batchCmd.addSubCommand(new RemoveElementCommand$1(g, gNextSibling, parent));
|
|
|
|
if (!batchCmd.isEmpty()) {
|
|
addCommandToHistory(batchCmd);
|
|
}
|
|
|
|
// update selection
|
|
addToSelection(children);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Repositions the selected element to the bottom in the DOM to appear on top of
|
|
* other elements
|
|
*/
|
|
this.moveToTopSelectedElement = function () {
|
|
var selected = selectedElements[0];
|
|
if (selected != null) {
|
|
var t = selected;
|
|
var oldParent = t.parentNode;
|
|
var oldNextSibling = t.nextSibling;
|
|
t = t.parentNode.appendChild(t);
|
|
// If the element actually moved position, add the command and fire the changed
|
|
// event handler.
|
|
if (oldNextSibling !== t.nextSibling) {
|
|
addCommandToHistory(new MoveElementCommand$1(t, oldNextSibling, oldParent, 'top'));
|
|
call('changed', [t]);
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Repositions the selected element to the top in the DOM to appear under
|
|
* other elements
|
|
*/
|
|
this.moveToBottomSelectedElement = function () {
|
|
var selected = selectedElements[0];
|
|
if (selected != null) {
|
|
var t = selected;
|
|
var oldParent = t.parentNode;
|
|
var oldNextSibling = t.nextSibling;
|
|
var firstChild = t.parentNode.firstChild;
|
|
|
|
if (firstChild.tagName === 'title') {
|
|
firstChild = firstChild.nextSibling;
|
|
}
|
|
// This can probably be removed, as the defs should not ever apppear
|
|
// inside a layer group
|
|
if (firstChild.tagName === 'defs') {
|
|
firstChild = firstChild.nextSibling;
|
|
}
|
|
t = t.parentNode.insertBefore(t, firstChild);
|
|
// If the element actually moved position, add the command and fire the changed
|
|
// event handler.
|
|
if (oldNextSibling !== t.nextSibling) {
|
|
addCommandToHistory(new MoveElementCommand$1(t, oldNextSibling, oldParent, 'bottom'));
|
|
call('changed', [t]);
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Moves the select element up or down the stack, based on the visibly
|
|
* intersecting elements
|
|
* @param {"Up"|"Down"} dir - String that's either 'Up' or 'Down'
|
|
*/
|
|
this.moveUpDownSelected = function (dir) {
|
|
var selected = selectedElements[0];
|
|
if (!selected) {
|
|
return;
|
|
}
|
|
|
|
curBBoxes = [];
|
|
var closest = void 0,
|
|
foundCur = void 0;
|
|
// jQuery sorts this list
|
|
var list = $$9(getIntersectionList(getStrokedBBoxDefaultVisible([selected]))).toArray();
|
|
if (dir === 'Down') {
|
|
list.reverse();
|
|
}
|
|
|
|
$$9.each(list, function () {
|
|
if (!foundCur) {
|
|
if (this === selected) {
|
|
foundCur = true;
|
|
}
|
|
return;
|
|
}
|
|
closest = this;
|
|
return false;
|
|
});
|
|
if (!closest) {
|
|
return;
|
|
}
|
|
|
|
var t = selected;
|
|
var oldParent = t.parentNode;
|
|
var oldNextSibling = t.nextSibling;
|
|
$$9(closest)[dir === 'Down' ? 'before' : 'after'](t);
|
|
// If the element actually moved position, add the command and fire the changed
|
|
// event handler.
|
|
if (oldNextSibling !== t.nextSibling) {
|
|
addCommandToHistory(new MoveElementCommand$1(t, oldNextSibling, oldParent, 'Move ' + dir));
|
|
call('changed', [t]);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Moves selected elements on the X/Y axis
|
|
* @param {Number} dx - Float with the distance to move on the x-axis
|
|
* @param {Number} dy - Float with the distance to move on the y-axis
|
|
* @param {Boolean} undoable - Boolean indicating whether or not the action should be undoable
|
|
* @returns Batch command for the move
|
|
*/
|
|
this.moveSelectedElements = function (dx, dy, undoable) {
|
|
// if undoable is not sent, default to true
|
|
// if single values, scale them to the zoom
|
|
if (dx.constructor !== Array) {
|
|
dx /= currentZoom;
|
|
dy /= currentZoom;
|
|
}
|
|
undoable = undoable || true;
|
|
var batchCmd = new BatchCommand$1('position');
|
|
var i = selectedElements.length;
|
|
while (i--) {
|
|
var selected = selectedElements[i];
|
|
if (selected != null) {
|
|
// if (i === 0) {
|
|
// selectedBBoxes[0] = utilsGetBBox(selected);
|
|
// }
|
|
// const b = {};
|
|
// for (const j in selectedBBoxes[i]) b[j] = selectedBBoxes[i][j];
|
|
// selectedBBoxes[i] = b;
|
|
|
|
var xform = svgroot.createSVGTransform();
|
|
var tlist = getTransformList(selected);
|
|
|
|
// dx and dy could be arrays
|
|
if (dx.constructor === Array) {
|
|
// if (i === 0) {
|
|
// selectedBBoxes[0].x += dx[0];
|
|
// selectedBBoxes[0].y += dy[0];
|
|
// }
|
|
xform.setTranslate(dx[i], dy[i]);
|
|
} else {
|
|
// if (i === 0) {
|
|
// selectedBBoxes[0].x += dx;
|
|
// selectedBBoxes[0].y += dy;
|
|
// }
|
|
xform.setTranslate(dx, dy);
|
|
}
|
|
|
|
if (tlist.numberOfItems) {
|
|
tlist.insertItemBefore(xform, 0);
|
|
} else {
|
|
tlist.appendItem(xform);
|
|
}
|
|
|
|
var cmd = recalculateDimensions(selected);
|
|
if (cmd) {
|
|
batchCmd.addSubCommand(cmd);
|
|
}
|
|
|
|
selectorManager.requestSelector(selected).resize();
|
|
}
|
|
}
|
|
if (!batchCmd.isEmpty()) {
|
|
if (undoable) {
|
|
addCommandToHistory(batchCmd);
|
|
}
|
|
call('changed', selectedElements);
|
|
return batchCmd;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Create deep DOM copies (clones) of all selected elements and move them slightly
|
|
* from their originals
|
|
*/
|
|
this.cloneSelectedElements = function (x, y) {
|
|
var i = void 0,
|
|
elem = void 0;
|
|
var batchCmd = new BatchCommand$1('Clone Elements');
|
|
// find all the elements selected (stop at first null)
|
|
var len = selectedElements.length;
|
|
function sortfunction(a, b) {
|
|
return $$9(b).index() - $$9(a).index(); // causes an array to be sorted numerically and ascending
|
|
}
|
|
selectedElements.sort(sortfunction);
|
|
for (i = 0; i < len; ++i) {
|
|
elem = selectedElements[i];
|
|
if (elem == null) {
|
|
break;
|
|
}
|
|
}
|
|
// use slice to quickly get the subset of elements we need
|
|
var copiedElements = selectedElements.slice(0, i);
|
|
this.clearSelection(true);
|
|
// note that we loop in the reverse way because of the way elements are added
|
|
// to the selectedElements array (top-first)
|
|
var drawing = getCurrentDrawing();
|
|
i = copiedElements.length;
|
|
while (i--) {
|
|
// clone each element and replace it within copiedElements
|
|
elem = copiedElements[i] = drawing.copyElem(copiedElements[i]);
|
|
(currentGroup || drawing.getCurrentLayer()).appendChild(elem);
|
|
batchCmd.addSubCommand(new InsertElementCommand$1(elem));
|
|
}
|
|
|
|
if (!batchCmd.isEmpty()) {
|
|
addToSelection(copiedElements.reverse()); // Need to reverse for correct selection-adding
|
|
this.moveSelectedElements(x, y, false);
|
|
addCommandToHistory(batchCmd);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Aligns selected elements
|
|
* @param {String} type - String with single character indicating the alignment type
|
|
* @param {"selected"|"largest"|"smallest"|"page"} relativeTo
|
|
*/
|
|
this.alignSelectedElements = function (type, relativeTo) {
|
|
var bboxes = []; // angles = [];
|
|
var len = selectedElements.length;
|
|
if (!len) {
|
|
return;
|
|
}
|
|
var minx = Number.MAX_VALUE,
|
|
maxx = Number.MIN_VALUE,
|
|
miny = Number.MAX_VALUE,
|
|
maxy = Number.MIN_VALUE;
|
|
var curwidth = Number.MIN_VALUE,
|
|
curheight = Number.MIN_VALUE;
|
|
for (var i = 0; i < len; ++i) {
|
|
if (selectedElements[i] == null) {
|
|
break;
|
|
}
|
|
var _elem8 = selectedElements[i];
|
|
bboxes[i] = getStrokedBBoxDefaultVisible([_elem8]);
|
|
|
|
// now bbox is axis-aligned and handles rotation
|
|
switch (relativeTo) {
|
|
case 'smallest':
|
|
if ((type === 'l' || type === 'c' || type === 'r') && (curwidth === Number.MIN_VALUE || curwidth > bboxes[i].width) || (type === 't' || type === 'm' || type === 'b') && (curheight === Number.MIN_VALUE || curheight > bboxes[i].height)) {
|
|
minx = bboxes[i].x;
|
|
miny = bboxes[i].y;
|
|
maxx = bboxes[i].x + bboxes[i].width;
|
|
maxy = bboxes[i].y + bboxes[i].height;
|
|
curwidth = bboxes[i].width;
|
|
curheight = bboxes[i].height;
|
|
}
|
|
break;
|
|
case 'largest':
|
|
if ((type === 'l' || type === 'c' || type === 'r') && (curwidth === Number.MIN_VALUE || curwidth < bboxes[i].width) || (type === 't' || type === 'm' || type === 'b') && (curheight === Number.MIN_VALUE || curheight < bboxes[i].height)) {
|
|
minx = bboxes[i].x;
|
|
miny = bboxes[i].y;
|
|
maxx = bboxes[i].x + bboxes[i].width;
|
|
maxy = bboxes[i].y + bboxes[i].height;
|
|
curwidth = bboxes[i].width;
|
|
curheight = bboxes[i].height;
|
|
}
|
|
break;
|
|
default:
|
|
// 'selected'
|
|
if (bboxes[i].x < minx) {
|
|
minx = bboxes[i].x;
|
|
}
|
|
if (bboxes[i].y < miny) {
|
|
miny = bboxes[i].y;
|
|
}
|
|
if (bboxes[i].x + bboxes[i].width > maxx) {
|
|
maxx = bboxes[i].x + bboxes[i].width;
|
|
}
|
|
if (bboxes[i].y + bboxes[i].height > maxy) {
|
|
maxy = bboxes[i].y + bboxes[i].height;
|
|
}
|
|
break;
|
|
}
|
|
} // loop for each element to find the bbox and adjust min/max
|
|
|
|
if (relativeTo === 'page') {
|
|
minx = 0;
|
|
miny = 0;
|
|
maxx = canvas.contentW;
|
|
maxy = canvas.contentH;
|
|
}
|
|
|
|
var dx = new Array(len);
|
|
var dy = new Array(len);
|
|
for (var _i2 = 0; _i2 < len; ++_i2) {
|
|
if (selectedElements[_i2] == null) {
|
|
break;
|
|
}
|
|
// const elem = selectedElements[i];
|
|
var bbox = bboxes[_i2];
|
|
dx[_i2] = 0;
|
|
dy[_i2] = 0;
|
|
switch (type) {
|
|
case 'l':
|
|
// left (horizontal)
|
|
dx[_i2] = minx - bbox.x;
|
|
break;
|
|
case 'c':
|
|
// center (horizontal)
|
|
dx[_i2] = (minx + maxx) / 2 - (bbox.x + bbox.width / 2);
|
|
break;
|
|
case 'r':
|
|
// right (horizontal)
|
|
dx[_i2] = maxx - (bbox.x + bbox.width);
|
|
break;
|
|
case 't':
|
|
// top (vertical)
|
|
dy[_i2] = miny - bbox.y;
|
|
break;
|
|
case 'm':
|
|
// middle (vertical)
|
|
dy[_i2] = (miny + maxy) / 2 - (bbox.y + bbox.height / 2);
|
|
break;
|
|
case 'b':
|
|
// bottom (vertical)
|
|
dy[_i2] = maxy - (bbox.y + bbox.height);
|
|
break;
|
|
}
|
|
}
|
|
this.moveSelectedElements(dx, dy);
|
|
};
|
|
|
|
/**
|
|
* Group: Additional editor tools
|
|
*/
|
|
|
|
this.contentW = getResolution().w;
|
|
this.contentH = getResolution().h;
|
|
|
|
/**
|
|
* Updates the editor canvas width/height/position after a zoom has occurred
|
|
* @param {Number} w - Float with the new width
|
|
* @param {Number} h - Float with the new height
|
|
* @returns Object with the following values:
|
|
* - x - The canvas' new x coordinate
|
|
* - y - The canvas' new y coordinate
|
|
* - oldX - The canvas' old x coordinate
|
|
* - oldY - The canvas' old y coordinate
|
|
* - d_x - The x position difference
|
|
* - d_y - The y position difference
|
|
*/
|
|
this.updateCanvas = function (w, h) {
|
|
svgroot.setAttribute('width', w);
|
|
svgroot.setAttribute('height', h);
|
|
var bg = $$9('#canvasBackground')[0];
|
|
var oldX = svgcontent.getAttribute('x');
|
|
var oldY = svgcontent.getAttribute('y');
|
|
var x = w / 2 - this.contentW * currentZoom / 2;
|
|
var y = h / 2 - this.contentH * currentZoom / 2;
|
|
|
|
assignAttributes(svgcontent, {
|
|
width: this.contentW * currentZoom,
|
|
height: this.contentH * currentZoom,
|
|
x: x,
|
|
y: y,
|
|
viewBox: '0 0 ' + this.contentW + ' ' + this.contentH
|
|
});
|
|
|
|
assignAttributes(bg, {
|
|
width: svgcontent.getAttribute('width'),
|
|
height: svgcontent.getAttribute('height'),
|
|
x: x,
|
|
y: y
|
|
});
|
|
|
|
var bgImg = getElem('background_image');
|
|
if (bgImg) {
|
|
assignAttributes(bgImg, {
|
|
width: '100%',
|
|
height: '100%'
|
|
});
|
|
}
|
|
|
|
selectorManager.selectorParentGroup.setAttribute('transform', 'translate(' + x + ',' + y + ')');
|
|
runExtensions('canvasUpdated', { new_x: x, new_y: y, old_x: oldX, old_y: oldY, d_x: x - oldX, d_y: y - oldY });
|
|
return { x: x, y: y, old_x: oldX, old_y: oldY, d_x: x - oldX, d_y: y - oldY };
|
|
};
|
|
|
|
/**
|
|
* Set the background of the editor (NOT the actual document)
|
|
* @param {String} color - String with fill color to apply
|
|
* @param url - URL or path to image to use
|
|
*/
|
|
this.setBackground = function (color, url) {
|
|
var bg = getElem('canvasBackground');
|
|
var border = $$9(bg).find('rect')[0];
|
|
var bgImg = getElem('background_image');
|
|
border.setAttribute('fill', color);
|
|
if (url) {
|
|
if (!bgImg) {
|
|
bgImg = svgdoc.createElementNS(NS.SVG, 'image');
|
|
assignAttributes(bgImg, {
|
|
id: 'background_image',
|
|
width: '100%',
|
|
height: '100%',
|
|
preserveAspectRatio: 'xMinYMin',
|
|
style: 'pointer-events:none'
|
|
});
|
|
}
|
|
setHref(bgImg, url);
|
|
bg.appendChild(bgImg);
|
|
} else if (bgImg) {
|
|
bgImg.parentNode.removeChild(bgImg);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Select the next/previous element within the current layer
|
|
* @param {Boolean} next - true = next and false = previous element
|
|
*/
|
|
this.cycleElement = function (next) {
|
|
var num = void 0;
|
|
var curElem = selectedElements[0];
|
|
var elem = false;
|
|
var allElems = getVisibleElements(currentGroup || getCurrentDrawing().getCurrentLayer());
|
|
if (!allElems.length) {
|
|
return;
|
|
}
|
|
if (curElem == null) {
|
|
num = next ? allElems.length - 1 : 0;
|
|
elem = allElems[num];
|
|
} else {
|
|
var i = allElems.length;
|
|
while (i--) {
|
|
if (allElems[i] === curElem) {
|
|
num = next ? i - 1 : i + 1;
|
|
if (num >= allElems.length) {
|
|
num = 0;
|
|
} else if (num < 0) {
|
|
num = allElems.length - 1;
|
|
}
|
|
elem = allElems[num];
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
selectOnly([elem], true);
|
|
call('selected', selectedElements);
|
|
};
|
|
|
|
this.clear();
|
|
|
|
/**
|
|
* @deprecated getPrivateMethods
|
|
* Since all methods are/should be public somehow, this function should be removed;
|
|
* we might require `import` in place of this in the future once ES6 Modules
|
|
* widespread
|
|
|
|
* Being able to access private methods publicly seems wrong somehow,
|
|
* but currently appears to be the best way to allow testing and provide
|
|
* access to them to plugins.
|
|
*/
|
|
this.getPrivateMethods = function () {
|
|
var obj = {
|
|
addCommandToHistory: addCommandToHistory,
|
|
setGradient: setGradient,
|
|
addSvgElementFromJson: addSvgElementFromJson,
|
|
assignAttributes: assignAttributes,
|
|
BatchCommand: BatchCommand$1,
|
|
buildCanvgCallback: buildCanvgCallback,
|
|
call: call,
|
|
canvg: canvg,
|
|
ChangeElementCommand: ChangeElementCommand$1,
|
|
copyElem: function copyElem$$1(elem) {
|
|
return getCurrentDrawing().copyElem(elem);
|
|
},
|
|
|
|
decode64: decode64,
|
|
encode64: encode64,
|
|
executeAfterLoads: executeAfterLoads,
|
|
ffClone: ffClone,
|
|
findDefs: findDefs,
|
|
findDuplicateGradient: findDuplicateGradient,
|
|
getElem: getElem,
|
|
getId: getId,
|
|
getIntersectionList: getIntersectionList,
|
|
getMouseTarget: getMouseTarget,
|
|
getNextId: getNextId,
|
|
getPathBBox: getPathBBox,
|
|
getTypeMap: getTypeMap,
|
|
getUrlFromAttr: getUrlFromAttr,
|
|
hasMatrixTransform: hasMatrixTransform,
|
|
identifyLayers: identifyLayers,
|
|
InsertElementCommand: InsertElementCommand$1,
|
|
isChrome: isChrome,
|
|
isIdentity: isIdentity,
|
|
isIE: isIE,
|
|
logMatrix: logMatrix,
|
|
matrixMultiply: matrixMultiply,
|
|
MoveElementCommand: MoveElementCommand$1,
|
|
NS: NS,
|
|
preventClickDefault: preventClickDefault,
|
|
recalculateAllSelectedDimensions: recalculateAllSelectedDimensions,
|
|
recalculateDimensions: recalculateDimensions,
|
|
remapElement: remapElement,
|
|
RemoveElementCommand: RemoveElementCommand$1,
|
|
removeUnusedDefElems: removeUnusedDefElems,
|
|
round: round,
|
|
runExtensions: runExtensions,
|
|
sanitizeSvg: sanitizeSvg,
|
|
SVGEditTransformList: SVGTransformList,
|
|
text2xml: text2xml,
|
|
toString: toString,
|
|
transformBox: transformBox,
|
|
transformListToTransform: transformListToTransform,
|
|
transformPoint: transformPoint,
|
|
walkTree: walkTree
|
|
};
|
|
return obj;
|
|
};
|
|
} // End constructor
|
|
; // End class
|
|
|
|
// Todo: Update: https://github.com/jeresig/jquery.hotkeys
|
|
/*
|
|
* jQuery Hotkeys Plugin
|
|
* Copyright 2010, John Resig
|
|
* Dual licensed under the MIT or GPL Version 2 licenses.
|
|
*
|
|
* http://github.com/jeresig/jquery.hotkeys
|
|
*
|
|
* Based upon the plugin by Tzury Bar Yochay:
|
|
* http://github.com/tzuryby/hotkeys
|
|
*
|
|
* Original idea by:
|
|
* Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/
|
|
*/
|
|
|
|
function jqPluginJSHotkeys (b) {
|
|
b.hotkeys = { version: "0.8", specialKeys: { 8: "backspace", 9: "tab", 13: "return", 16: "shift", 17: "ctrl", 18: "alt", 19: "pause", 20: "capslock", 27: "esc", 32: "space", 33: "pageup", 34: "pagedown", 35: "end", 36: "home", 37: "left", 38: "up", 39: "right", 40: "down", 45: "insert", 46: "del", 96: "0", 97: "1", 98: "2", 99: "3", 100: "4", 101: "5", 102: "6", 103: "7", 104: "8", 105: "9", 106: "*", 107: "+", 109: "-", 110: ".", 111: "/", 112: "f1", 113: "f2", 114: "f3", 115: "f4", 116: "f5", 117: "f6", 118: "f7", 119: "f8", 120: "f9", 121: "f10", 122: "f11", 123: "f12", 144: "numlock", 145: "scroll", 191: "/", 224: "meta", 219: "[", 221: "]" }, shiftNums: { "`": "~", "1": "!", "2": "@", "3": "#", "4": "$", "5": "%", "6": "^", "7": "&", "8": "*", "9": "(", "0": ")", "-": "_", "=": "+", ";": ": ", "'": '"', ",": "<", ".": ">", "/": "?", "\\": "|" } };function a(d) {
|
|
if (typeof d.data !== "string") {
|
|
return;
|
|
}var c = d.handler,
|
|
e = d.data.toLowerCase().split(" ");d.handler = function (n) {
|
|
if (this !== n.target && (/textarea|select/i.test(n.target.nodeName) || n.target.type === "text")) {
|
|
return;
|
|
}var h = n.type !== "keypress" && b.hotkeys.specialKeys[n.which],
|
|
o = String.fromCharCode(n.which).toLowerCase(),
|
|
m = "",
|
|
g = {};if (n.altKey && h !== "alt") {
|
|
m += "alt+";
|
|
}if (n.ctrlKey && h !== "ctrl") {
|
|
m += "ctrl+";
|
|
}if (n.metaKey && !n.ctrlKey && h !== "meta") {
|
|
m += "meta+";
|
|
}if (n.shiftKey && h !== "shift") {
|
|
m += "shift+";
|
|
}if (h) {
|
|
g[m + h] = true;
|
|
} else {
|
|
g[m + o] = true;g[m + b.hotkeys.shiftNums[o]] = true;if (m === "shift+") {
|
|
g[b.hotkeys.shiftNums[o]] = true;
|
|
}
|
|
}for (var j = 0, f = e.length; j < f; j++) {
|
|
if (g[e[j]]) {
|
|
return c.apply(this, arguments);
|
|
}
|
|
}
|
|
};
|
|
}b.each(["keydown", "keyup", "keypress"], function () {
|
|
b.event.special[this] = { add: a };
|
|
});
|
|
|
|
return b;
|
|
}
|
|
|
|
/*
|
|
* Todo: Update to latest at https://github.com/cowboy/jquery-bbq ?
|
|
* jQuery BBQ: Back Button & Query Library - v1.2.1 - 2/17/2010
|
|
* http://benalman.com/projects/jquery-bbq-plugin/
|
|
*
|
|
* Copyright (c) 2010 "Cowboy" Ben Alman
|
|
* Dual licensed under the MIT and GPL licenses.
|
|
* http://benalman.com/about/license/
|
|
*/
|
|
|
|
// For sake of modules, added this wrapping export and changed `this` to `window`
|
|
function jqPluginBBQ (jQuery) {
|
|
|
|
(function ($, p) {
|
|
var i,
|
|
m = Array.prototype.slice,
|
|
r = decodeURIComponent,
|
|
a = $.param,
|
|
c,
|
|
l,
|
|
v,
|
|
b = $.bbq = $.bbq || {},
|
|
q,
|
|
u,
|
|
j,
|
|
e = $.event.special,
|
|
d = "hashchange",
|
|
A = "querystring",
|
|
D = "fragment",
|
|
y = "elemUrlAttr",
|
|
g = "location",
|
|
k = "href",
|
|
t = "src",
|
|
x = /^.*\?|#.*$/g,
|
|
w = /^.*\#/,
|
|
h,
|
|
C = {};function E(F) {
|
|
return typeof F === "string";
|
|
}function B(G) {
|
|
var F = m.call(arguments, 1);return function () {
|
|
return G.apply(this, F.concat(m.call(arguments)));
|
|
};
|
|
}function n(F) {
|
|
return F.replace(/^[^#]*#?(.*)$/, "$1");
|
|
}function o(F) {
|
|
return F.replace(/(?:^[^?#]*\?([^#]*).*$)?.*/, "$1");
|
|
}function f(H, M, F, I, G) {
|
|
var O, L, K, N, J;if (I !== i) {
|
|
K = F.match(H ? /^([^#]*)\#?(.*)$/ : /^([^#?]*)\??([^#]*)(#?.*)/);J = K[3] || "";if (G === 2 && E(I)) {
|
|
L = I.replace(H ? w : x, "");
|
|
} else {
|
|
N = l(K[2]);I = E(I) ? l[H ? D : A](I) : I;L = G === 2 ? I : G === 1 ? $.extend({}, I, N) : $.extend({}, N, I);L = a(L);if (H) {
|
|
L = L.replace(h, r);
|
|
}
|
|
}O = K[1] + (H ? "#" : L || !K[1] ? "?" : "") + L + J;
|
|
} else {
|
|
O = M(F !== i ? F : p[g][k]);
|
|
}return O;
|
|
}a[A] = B(f, 0, o);a[D] = c = B(f, 1, n);c.noEscape = function (G) {
|
|
G = G || "";var F = $.map(G.split(""), encodeURIComponent);h = new RegExp(F.join("|"), "g");
|
|
};c.noEscape(",/");$.deparam = l = function l(I, F) {
|
|
var H = {},
|
|
G = { "true": !0, "false": !1, "null": null };$.each(I.replace(/\+/g, " ").split("&"), function (L, Q) {
|
|
var K = Q.split("="),
|
|
P = r(K[0]),
|
|
J,
|
|
O = H,
|
|
M = 0,
|
|
R = P.split("]["),
|
|
N = R.length - 1;if (/\[/.test(R[0]) && /\]$/.test(R[N])) {
|
|
R[N] = R[N].replace(/\]$/, "");R = R.shift().split("[").concat(R);N = R.length - 1;
|
|
} else {
|
|
N = 0;
|
|
}if (K.length === 2) {
|
|
J = r(K[1]);if (F) {
|
|
J = J && !isNaN(J) ? +J : J === "undefined" ? i : G[J] !== i ? G[J] : J;
|
|
}if (N) {
|
|
for (; M <= N; M++) {
|
|
P = R[M] === "" ? O.length : R[M];O = O[P] = M < N ? O[P] || (R[M + 1] && isNaN(R[M + 1]) ? {} : []) : J;
|
|
}
|
|
} else {
|
|
if ($.isArray(H[P])) {
|
|
H[P].push(J);
|
|
} else {
|
|
if (H[P] !== i) {
|
|
H[P] = [H[P], J];
|
|
} else {
|
|
H[P] = J;
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
if (P) {
|
|
H[P] = F ? i : "";
|
|
}
|
|
}
|
|
});return H;
|
|
};function z(H, F, G) {
|
|
if (F === i || typeof F === "boolean") {
|
|
G = F;F = a[H ? D : A]();
|
|
} else {
|
|
F = E(F) ? F.replace(H ? w : x, "") : F;
|
|
}return l(F, G);
|
|
}l[A] = B(z, 0);l[D] = v = B(z, 1);$[y] || ($[y] = function (F) {
|
|
return $.extend(C, F);
|
|
})({ a: k, base: k, iframe: t, img: t, input: t, form: "action", link: k, script: t });j = $[y];function s(I, G, H, F) {
|
|
if (!E(H) && (typeof H === "undefined" ? "undefined" : _typeof(H)) !== "object") {
|
|
F = H;H = G;G = i;
|
|
}return this.each(function () {
|
|
var L = $(this),
|
|
J = G || j()[(this.nodeName || "").toLowerCase()] || "",
|
|
K = J && L.attr(J) || "";L.attr(J, a[I](K, H, F));
|
|
});
|
|
}$.fn[A] = B(s, A);$.fn[D] = B(s, D);b.pushState = q = function q(I, F) {
|
|
if (E(I) && /^#/.test(I) && F === i) {
|
|
F = 2;
|
|
}var H = I !== i,
|
|
G = c(p[g][k], H ? I : {}, H ? F : 2);p[g][k] = G + (/#/.test(G) ? "" : "#");
|
|
};b.getState = u = function u(F, G) {
|
|
return F === i || typeof F === "boolean" ? v(F) : v(G)[F];
|
|
};b.removeState = function (F) {
|
|
var G = {};if (F !== i) {
|
|
G = u();$.each($.isArray(F) ? F : arguments, function (I, H) {
|
|
delete G[H];
|
|
});
|
|
}q(G, 2);
|
|
};e[d] = $.extend(e[d], { add: function add(F) {
|
|
var H;function G(J) {
|
|
var I = J[D] = c();J.getState = function (K, L) {
|
|
return K === i || typeof K === "boolean" ? l(I, K) : l(I, L)[K];
|
|
};H.apply(this, arguments);
|
|
}if ($.isFunction(F)) {
|
|
H = F;return G;
|
|
} else {
|
|
H = F.handler;F.handler = G;
|
|
}
|
|
} });
|
|
})(jQuery, window);
|
|
/*
|
|
* jQuery hashchange event - v1.2 - 2/11/2010
|
|
* http://benalman.com/projects/jquery-hashchange-plugin/
|
|
*
|
|
* Copyright (c) 2010 "Cowboy" Ben Alman
|
|
* Dual licensed under the MIT and GPL licenses.
|
|
* http://benalman.com/about/license/
|
|
*/
|
|
(function ($, i, b) {
|
|
var j,
|
|
k = $.event.special,
|
|
c = "location",
|
|
d = "hashchange",
|
|
l = "href",
|
|
f = $.browser,
|
|
g = document.documentMode,
|
|
h = f.msie && (g === b || g < 8),
|
|
e = "on" + d in i && !h;function a(m) {
|
|
m = m || i[c][l];return m.replace(/^[^#]*#?(.*)$/, "$1");
|
|
}$[d + "Delay"] = 100;k[d] = $.extend(k[d], { setup: function setup() {
|
|
if (e) {
|
|
return false;
|
|
}$(j.start);
|
|
}, teardown: function teardown() {
|
|
if (e) {
|
|
return false;
|
|
}$(j.stop);
|
|
} });j = function () {
|
|
var m = {},
|
|
r,
|
|
n,
|
|
o,
|
|
q;function p() {
|
|
o = q = function q(s) {
|
|
return s;
|
|
};if (h) {
|
|
n = $('<iframe src="javascript:0"/>').hide().insertAfter("body")[0].contentWindow;q = function q() {
|
|
return a(n.document[c][l]);
|
|
};o = function o(u, s) {
|
|
if (u !== s) {
|
|
var t = n.document;t.open().close();t[c].hash = "#" + u;
|
|
}
|
|
};o(a());
|
|
}
|
|
}m.start = function () {
|
|
if (r) {
|
|
return;
|
|
}var t = a();o || p();(function s() {
|
|
var v = a(),
|
|
u = q(t);if (v !== t) {
|
|
o(t = v, u);$(i).trigger(d);
|
|
} else {
|
|
if (u !== t) {
|
|
i[c][l] = i[c][l].replace(/#.*/, "") + "#" + u;
|
|
}
|
|
}r = setTimeout(s, $[d + "Delay"]);
|
|
})();
|
|
};m.stop = function () {
|
|
if (!n) {
|
|
r && clearTimeout(r);r = 0;
|
|
}
|
|
};return m;
|
|
}();
|
|
})(jQuery, window);
|
|
|
|
return jQuery;
|
|
}
|
|
|
|
/*
|
|
* SVG Icon Loader 2.0
|
|
*
|
|
* jQuery Plugin for loading SVG icons from a single file
|
|
*
|
|
* Copyright (c) 2009 Alexis Deveria
|
|
* http://a.deveria.com
|
|
*
|
|
* MIT License
|
|
|
|
How to use:
|
|
|
|
1. Create the SVG master file that includes all icons:
|
|
|
|
The master SVG icon-containing file is an SVG file that contains
|
|
<g> elements. Each <g> element should contain the markup of an SVG
|
|
icon. The <g> element has an ID that should
|
|
correspond with the ID of the HTML element used on the page that should contain
|
|
or optionally be replaced by the icon. Additionally, one empty element should be
|
|
added at the end with id "svg_eof".
|
|
|
|
2. Optionally create fallback raster images for each SVG icon.
|
|
|
|
3. Include the jQuery and the SVG Icon Loader scripts on your page.
|
|
|
|
4. Run $.svgIcons() when the document is ready:
|
|
|
|
$.svgIcons( file [string], options [object literal]);
|
|
|
|
File is the location of a local SVG or SVGz file.
|
|
|
|
All options are optional and can include:
|
|
|
|
- 'w (number)': The icon widths
|
|
|
|
- 'h (number)': The icon heights
|
|
|
|
- 'fallback (object literal)': List of raster images with each
|
|
key being the SVG icon ID to replace, and the value the image file name.
|
|
|
|
- 'fallback_path (string)': The path to use for all images
|
|
listed under "fallback"
|
|
|
|
- 'replace (boolean)': If set to true, HTML elements will be replaced by,
|
|
rather than include the SVG icon.
|
|
|
|
- 'placement (object literal)': List with selectors for keys and SVG icon ids
|
|
as values. This provides a custom method of adding icons.
|
|
|
|
- 'resize (object literal)': List with selectors for keys and numbers
|
|
as values. This allows an easy way to resize specific icons.
|
|
|
|
- 'callback (function)': A function to call when all icons have been loaded.
|
|
Includes an object literal as its argument with as keys all icon IDs and the
|
|
icon as a jQuery object as its value.
|
|
|
|
- 'id_match (boolean)': Automatically attempt to match SVG icon ids with
|
|
corresponding HTML id (default: true)
|
|
|
|
- 'no_img (boolean)': Prevent attempting to convert the icon into an <img>
|
|
element (may be faster, help for browser consistency)
|
|
|
|
- 'svgz (boolean)': Indicate that the file is an SVGZ file, and thus not to
|
|
parse as XML. SVGZ files add compression benefits, but getting data from
|
|
them fails in Firefox 2 and older.
|
|
|
|
5. To access an icon at a later point without using the callback, use this:
|
|
$.getSvgIcon(id (string));
|
|
|
|
This will return the icon (as jQuery object) with a given ID.
|
|
|
|
6. To resize icons at a later point without using the callback, use this:
|
|
$.resizeSvgIcons(resizeOptions) (use the same way as the "resize" parameter)
|
|
|
|
Example usage #1:
|
|
|
|
$(function() {
|
|
$.svgIcons('my_icon_set.svg'); // The SVG file that contains all icons
|
|
// No options have been set, so all icons will automatically be inserted
|
|
// into HTML elements that match the same IDs.
|
|
});
|
|
|
|
Example usage #2:
|
|
|
|
$(function() {
|
|
$.svgIcons('my_icon_set.svg', { // The SVG file that contains all icons
|
|
callback (icons) { // Custom callback function that sets click
|
|
// events for each icon
|
|
$.each(icons, function(id, icon) {
|
|
icon.click(function() {
|
|
alert('You clicked on the icon with id ' + id);
|
|
});
|
|
});
|
|
}
|
|
}); //The SVG file that contains all icons
|
|
});
|
|
|
|
Example usage #3:
|
|
|
|
$(function() {
|
|
$.svgIcons('my_icon_set.svgz', { // The SVGZ file that contains all icons
|
|
w: 32, // All icons will be 32px wide
|
|
h: 32, // All icons will be 32px high
|
|
fallback_path: 'icons/', // All fallback files can be found here
|
|
fallback: {
|
|
'#open_icon': 'open.png', // The "open.png" will be appended to the
|
|
// HTML element with ID "open_icon"
|
|
'#close_icon': 'close.png',
|
|
'#save_icon': 'save.png'
|
|
},
|
|
placement: {'.open_icon','open'}, // The "open" icon will be added
|
|
// to all elements with class "open_icon"
|
|
resize () {
|
|
'#save_icon .svg_icon': 64 // The "save" icon will be resized to 64 x 64px
|
|
},
|
|
|
|
callback (icons) { // Sets background color for "close" icon
|
|
icons['close'].css('background','red');
|
|
},
|
|
|
|
svgz: true // Indicates that an SVGZ file is being used
|
|
|
|
})
|
|
});
|
|
*/
|
|
|
|
function jqPluginSVGIcons ($) {
|
|
var svgIcons = {};
|
|
|
|
var fixIDs = void 0;
|
|
$.svgIcons = function (file, opts) {
|
|
var svgns = 'http://www.w3.org/2000/svg',
|
|
xlinkns = 'http://www.w3.org/1999/xlink',
|
|
iconW = opts.w || 24,
|
|
iconH = opts.h || 24;
|
|
var elems = void 0,
|
|
svgdoc = void 0,
|
|
testImg = void 0,
|
|
iconsMade = false,
|
|
dataLoaded = false,
|
|
loadAttempts = 0;
|
|
var isOpera = !!window.opera,
|
|
|
|
// ua = navigator.userAgent,
|
|
// isSafari = (ua.includes('Safari/') && !ua.includes('Chrome/')),
|
|
dataPre = 'data:image/svg+xml;charset=utf-8;base64,';
|
|
|
|
var dataEl = void 0;
|
|
if (opts.svgz) {
|
|
dataEl = $('<object data="' + file + '" type=image/svg+xml>').appendTo('body').hide();
|
|
try {
|
|
svgdoc = dataEl[0].contentDocument;
|
|
dataEl.load(getIcons);
|
|
getIcons(0, true); // Opera will not run "load" event if file is already cached
|
|
} catch (err1) {
|
|
useFallback();
|
|
}
|
|
} else {
|
|
var parser = new DOMParser();
|
|
$.ajax({
|
|
url: file,
|
|
dataType: 'string',
|
|
success: function success(data) {
|
|
if (!data) {
|
|
$(useFallback);
|
|
return;
|
|
}
|
|
svgdoc = parser.parseFromString(data, 'text/xml');
|
|
$(function () {
|
|
getIcons('ajax');
|
|
});
|
|
},
|
|
error: function error(err) {
|
|
// TODO: Fix Opera widget icon bug
|
|
if (window.opera) {
|
|
$(function () {
|
|
useFallback();
|
|
});
|
|
} else {
|
|
if (err.responseText) {
|
|
svgdoc = parser.parseFromString(err.responseText, 'text/xml');
|
|
|
|
if (!svgdoc.childNodes.length) {
|
|
$(useFallback);
|
|
}
|
|
$(function () {
|
|
getIcons('ajax');
|
|
});
|
|
} else {
|
|
$(useFallback);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function getIcons(evt, noWait) {
|
|
if (evt !== 'ajax') {
|
|
if (dataLoaded) return;
|
|
// Webkit sometimes says svgdoc is undefined, other times
|
|
// it fails to load all nodes. Thus we must make sure the "eof"
|
|
// element is loaded.
|
|
svgdoc = dataEl[0].contentDocument; // Needed again for Webkit
|
|
var isReady = svgdoc && svgdoc.getElementById('svg_eof');
|
|
if (!isReady && !(noWait && isReady)) {
|
|
loadAttempts++;
|
|
if (loadAttempts < 50) {
|
|
setTimeout(getIcons, 20);
|
|
} else {
|
|
useFallback();
|
|
dataLoaded = true;
|
|
}
|
|
return;
|
|
}
|
|
dataLoaded = true;
|
|
}
|
|
|
|
elems = $(svgdoc.firstChild).children(); // .getElementsByTagName('foreignContent');
|
|
|
|
if (!opts.no_img) {
|
|
var testSrc = dataPre + 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
|
|
|
|
testImg = $(new Image()).attr({
|
|
src: testSrc,
|
|
width: 0,
|
|
height: 0
|
|
}).appendTo('body').load(function () {
|
|
// Safari 4 crashes, Opera and Chrome don't
|
|
makeIcons(true);
|
|
}).error(function () {
|
|
makeIcons();
|
|
});
|
|
} else {
|
|
setTimeout(function () {
|
|
if (!iconsMade) makeIcons();
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
var setIcon = function setIcon(target, icon, id, setID) {
|
|
if (isOpera) icon.css('visibility', 'hidden');
|
|
if (opts.replace) {
|
|
if (setID) icon.attr('id', id);
|
|
var cl = target.attr('class');
|
|
if (cl) icon.attr('class', 'svg_icon ' + cl);
|
|
target.replaceWith(icon);
|
|
} else {
|
|
target.append(icon);
|
|
}
|
|
if (isOpera) {
|
|
setTimeout(function () {
|
|
icon.removeAttr('style');
|
|
}, 1);
|
|
}
|
|
};
|
|
|
|
var holder = void 0;
|
|
var addIcon = function addIcon(icon, id) {
|
|
if (opts.id_match === undefined || opts.id_match !== false) {
|
|
setIcon(holder, icon, id, true);
|
|
}
|
|
svgIcons[id] = icon;
|
|
};
|
|
|
|
function makeIcons(toImage, fallback) {
|
|
if (iconsMade) return;
|
|
if (opts.no_img) toImage = false;
|
|
|
|
var tempHolder = void 0;
|
|
if (toImage) {
|
|
tempHolder = $(document.createElement('div'));
|
|
tempHolder.hide().appendTo('body');
|
|
}
|
|
if (fallback) {
|
|
var path = opts.fallback_path || '';
|
|
$.each(fallback, function (id, imgsrc) {
|
|
holder = $('#' + id);
|
|
var icon = $(new Image()).attr({
|
|
class: 'svg_icon',
|
|
src: path + imgsrc,
|
|
width: iconW,
|
|
height: iconH,
|
|
alt: 'icon'
|
|
});
|
|
|
|
addIcon(icon, id);
|
|
});
|
|
} else {
|
|
var len = elems.length;
|
|
for (var i = 0; i < len; i++) {
|
|
var elem = elems[i];
|
|
var id = elem.id;
|
|
|
|
if (id === 'svg_eof') break;
|
|
holder = $('#' + id);
|
|
var svgroot = document.createElementNS(svgns, 'svg');
|
|
// Per https://www.w3.org/TR/xml-names11/#defaulting, the namespace for
|
|
// attributes should have no value.
|
|
svgroot.setAttributeNS(null, 'viewBox', [0, 0, iconW, iconH].join(' '));
|
|
|
|
var svg = elem.getElementsByTagNameNS(svgns, 'svg')[0];
|
|
|
|
// Make flexible by converting width/height to viewBox
|
|
var w = svg.getAttribute('width');
|
|
var h = svg.getAttribute('height');
|
|
svg.removeAttribute('width');
|
|
svg.removeAttribute('height');
|
|
|
|
var vb = svg.getAttribute('viewBox');
|
|
if (!vb) {
|
|
svg.setAttribute('viewBox', [0, 0, w, h].join(' '));
|
|
}
|
|
|
|
// Not using jQuery to be a bit faster
|
|
svgroot.setAttribute('xmlns', svgns);
|
|
svgroot.setAttribute('width', iconW);
|
|
svgroot.setAttribute('height', iconH);
|
|
svgroot.setAttribute('xmlns:xlink', xlinkns);
|
|
svgroot.setAttribute('class', 'svg_icon');
|
|
|
|
// Without cloning, Firefox will make another GET request.
|
|
// With cloning, causes issue in Opera/Win/Non-EN
|
|
if (!isOpera) svg = svg.cloneNode(true);
|
|
|
|
svgroot.appendChild(svg);
|
|
|
|
var icon = void 0;
|
|
if (toImage) {
|
|
tempHolder.empty().append(svgroot);
|
|
var str = dataPre + encode64(unescape(encodeURIComponent(new XMLSerializer().serializeToString(svgroot))));
|
|
icon = $(new Image()).attr({ class: 'svg_icon', src: str });
|
|
} else {
|
|
icon = fixIDs($(svgroot), i);
|
|
}
|
|
addIcon(icon, id);
|
|
}
|
|
}
|
|
|
|
if (opts.placement) {
|
|
$.each(opts.placement, function (sel, id) {
|
|
if (!svgIcons[id]) return;
|
|
$(sel).each(function (i) {
|
|
var copy = svgIcons[id].clone();
|
|
if (i > 0 && !toImage) copy = fixIDs(copy, i, true);
|
|
setIcon($(this), copy, id);
|
|
});
|
|
});
|
|
}
|
|
if (!fallback) {
|
|
if (toImage) tempHolder.remove();
|
|
if (dataEl) dataEl.remove();
|
|
if (testImg) testImg.remove();
|
|
}
|
|
if (opts.resize) $.resizeSvgIcons(opts.resize);
|
|
iconsMade = true;
|
|
|
|
if (opts.callback) opts.callback(svgIcons);
|
|
}
|
|
|
|
fixIDs = function fixIDs(svgEl, svgNum, force) {
|
|
var defs = svgEl.find('defs');
|
|
if (!defs.length) return svgEl;
|
|
|
|
var idElems = void 0;
|
|
if (isOpera) {
|
|
idElems = defs.find('*').filter(function () {
|
|
return !!this.id;
|
|
});
|
|
} else {
|
|
idElems = defs.find('[id]');
|
|
}
|
|
|
|
var allElems = svgEl[0].getElementsByTagName('*'),
|
|
len = allElems.length;
|
|
|
|
idElems.each(function (i) {
|
|
var id = this.id;
|
|
/*
|
|
const noDupes = ($(svgdoc).find('#' + id).length <= 1);
|
|
if (isOpera) noDupes = false; // Opera didn't clone svgEl, so not reliable
|
|
if(!force && noDupes) return;
|
|
*/
|
|
|
|
var newId = 'x' + id + svgNum + i;
|
|
this.id = newId;
|
|
|
|
var oldVal = 'url(#' + id + ')';
|
|
var newVal = 'url(#' + newId + ')';
|
|
|
|
// Selector method, possibly faster but fails in Opera / jQuery 1.4.3
|
|
// svgEl.find('[fill="url(#' + id + ')"]').each(function() {
|
|
// this.setAttribute('fill', 'url(#' + newId + ')');
|
|
// }).end().find('[stroke="url(#' + id + ')"]').each(function() {
|
|
// this.setAttribute('stroke', 'url(#' + newId + ')');
|
|
// }).end().find('use').each(function() {
|
|
// if(this.getAttribute('xlink:href') == '#' + id) {
|
|
// this.setAttributeNS(xlinkns,'href','#' + newId);
|
|
// }
|
|
// }).end().find('[filter="url(#' + id + ')"]').each(function() {
|
|
// this.setAttribute('filter', 'url(#' + newId + ')');
|
|
// });
|
|
|
|
for (i = 0; i < len; i++) {
|
|
var elem = allElems[i];
|
|
if (elem.getAttribute('fill') === oldVal) {
|
|
elem.setAttribute('fill', newVal);
|
|
}
|
|
if (elem.getAttribute('stroke') === oldVal) {
|
|
elem.setAttribute('stroke', newVal);
|
|
}
|
|
if (elem.getAttribute('filter') === oldVal) {
|
|
elem.setAttribute('filter', newVal);
|
|
}
|
|
}
|
|
});
|
|
return svgEl;
|
|
};
|
|
|
|
function useFallback() {
|
|
if (file.includes('.svgz')) {
|
|
var regFile = file.replace('.svgz', '.svg');
|
|
if (window.console) {
|
|
console.log('.svgz failed, trying with .svg');
|
|
}
|
|
$.svgIcons(regFile, opts);
|
|
} else if (opts.fallback) {
|
|
makeIcons(false, opts.fallback);
|
|
}
|
|
}
|
|
|
|
function encode64(input) {
|
|
// base64 strings are 4/3 larger than the original string
|
|
if (window.btoa) return window.btoa(input);
|
|
var _keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
|
|
var output = new Array(Math.floor((input.length + 2) / 3) * 4);
|
|
|
|
var i = 0,
|
|
p = 0;
|
|
do {
|
|
var chr1 = input.charCodeAt(i++);
|
|
var chr2 = input.charCodeAt(i++);
|
|
var chr3 = input.charCodeAt(i++);
|
|
|
|
var enc1 = chr1 >> 2;
|
|
var enc2 = (chr1 & 3) << 4 | chr2 >> 4;
|
|
|
|
var enc3 = (chr2 & 15) << 2 | chr3 >> 6;
|
|
var enc4 = chr3 & 63;
|
|
if (isNaN(chr2)) {
|
|
enc3 = enc4 = 64;
|
|
} else if (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('');
|
|
}
|
|
};
|
|
|
|
$.getSvgIcon = function (id, uniqueClone) {
|
|
var icon = svgIcons[id];
|
|
if (uniqueClone && icon) {
|
|
icon = fixIDs(icon, 0, true).clone(true);
|
|
}
|
|
return icon;
|
|
};
|
|
|
|
$.resizeSvgIcons = function (obj) {
|
|
// FF2 and older don't detect .svg_icon, so we change it detect svg elems instead
|
|
var changeSel = !$('.svg_icon:first').length;
|
|
$.each(obj, function (sel, size) {
|
|
var arr = Array.isArray(size);
|
|
var w = arr ? size[0] : size,
|
|
h = arr ? size[1] : size;
|
|
if (changeSel) {
|
|
sel = sel.replace(/\.svg_icon/g, 'svg');
|
|
}
|
|
$(sel).each(function () {
|
|
this.setAttribute('width', w);
|
|
this.setAttribute('height', h);
|
|
if (window.opera && window.widget) {
|
|
this.parentNode.style.width = w + 'px';
|
|
this.parentNode.style.height = h + 'px';
|
|
}
|
|
});
|
|
});
|
|
};
|
|
return $;
|
|
}
|
|
|
|
/**
|
|
* jGraduate 0.4
|
|
*
|
|
* jQuery Plugin for a gradient picker
|
|
*
|
|
* Copyright (c) 2010 Jeff Schiller
|
|
* http://blog.codedread.com/
|
|
* Copyright (c) 2010 Alexis Deveria
|
|
* http://a.deveria.com/
|
|
*
|
|
* Apache 2 License
|
|
|
|
jGraduate(options, okCallback, cancelCallback)
|
|
|
|
where options is an object literal:
|
|
{
|
|
window: { title: "Pick the start color and opacity for the gradient" },
|
|
images: { clientPath: "images/" },
|
|
paint: a Paint object,
|
|
newstop: String of value "same", "inverse", "black" or "white"
|
|
OR object with one or both values {color: #Hex color, opac: number 0-1}
|
|
}
|
|
|
|
- the Paint object is:
|
|
Paint {
|
|
type: String, // one of "none", "solidColor", "linearGradient", "radialGradient"
|
|
alpha: Number representing opacity (0-100),
|
|
solidColor: String representing #RRGGBB hex of color,
|
|
linearGradient: object of interface SVGLinearGradientElement,
|
|
radialGradient: object of interface SVGRadialGradientElement,
|
|
}
|
|
|
|
$.jGraduate.Paint() -> constructs a 'none' color
|
|
$.jGraduate.Paint({copy: o}) -> creates a copy of the paint o
|
|
$.jGraduate.Paint({hex: "#rrggbb"}) -> creates a solid color paint with hex = "#rrggbb"
|
|
$.jGraduate.Paint({linearGradient: o, a: 50}) -> creates a linear gradient paint with opacity=0.5
|
|
$.jGraduate.Paint({radialGradient: o, a: 7}) -> creates a radial gradient paint with opacity=0.07
|
|
$.jGraduate.Paint({hex: "#rrggbb", linearGradient: o}) -> throws an exception?
|
|
|
|
- picker accepts the following object as input:
|
|
{
|
|
okCallback: function to call when Ok is pressed
|
|
cancelCallback: function to call when Cancel is pressed
|
|
paint: object describing the paint to display initially, if not set, then default to opaque white
|
|
}
|
|
|
|
- okCallback receives a Paint object
|
|
|
|
*
|
|
*/
|
|
var ns = {
|
|
svg: 'http://www.w3.org/2000/svg',
|
|
xlink: 'http://www.w3.org/1999/xlink'
|
|
};
|
|
|
|
if (!window.console) {
|
|
window.console = {
|
|
log: function log(str) {},
|
|
dir: function dir(str) {}
|
|
};
|
|
}
|
|
|
|
function jqPluginJGraduate ($) {
|
|
if (!$.loadingStylesheets) {
|
|
$.loadingStylesheets = [];
|
|
}
|
|
var stylesheet = 'jgraduate/css/jgraduate.css';
|
|
if (!$.loadingStylesheets.includes(stylesheet)) {
|
|
$.loadingStylesheets.push(stylesheet);
|
|
}
|
|
$.jGraduate = {
|
|
Paint: function Paint(opt) {
|
|
var options = opt || {};
|
|
this.alpha = isNaN(options.alpha) ? 100 : options.alpha;
|
|
// copy paint object
|
|
if (options.copy) {
|
|
this.type = options.copy.type;
|
|
this.alpha = options.copy.alpha;
|
|
this.solidColor = null;
|
|
this.linearGradient = null;
|
|
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;
|
|
this.linearGradient = options.linearGradient.cloneNode(true);
|
|
// create linear gradient paint
|
|
} else if (options.radialGradient) {
|
|
this.type = 'radialGradient';
|
|
this.solidColor = null;
|
|
this.linearGradient = null;
|
|
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;
|
|
}
|
|
}
|
|
};
|
|
|
|
$.fn.jGraduateDefaults = {
|
|
paint: new $.jGraduate.Paint(),
|
|
window: {
|
|
pickerTitle: 'Drag markers to pick a paint'
|
|
},
|
|
images: {
|
|
clientPath: 'images/'
|
|
},
|
|
newstop: 'inverse' // same, inverse, black, white
|
|
};
|
|
|
|
var isGecko = navigator.userAgent.includes('Gecko/');
|
|
|
|
function setAttrs(elem, attrs) {
|
|
if (isGecko) {
|
|
for (var aname in attrs) {
|
|
elem.setAttribute(aname, attrs[aname]);
|
|
}
|
|
} else {
|
|
for (var _aname in attrs) {
|
|
var val = attrs[_aname],
|
|
prop = elem[_aname];
|
|
if (prop && prop.constructor === 'SVGLength') {
|
|
prop.baseVal.value = val;
|
|
} else {
|
|
elem.setAttribute(_aname, val);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function mkElem(name, attrs, newparent) {
|
|
var elem = document.createElementNS(ns.svg, name);
|
|
setAttrs(elem, attrs);
|
|
if (newparent) newparent.appendChild(elem);
|
|
return elem;
|
|
}
|
|
|
|
$.fn.jGraduate = function (options) {
|
|
var $arguments = arguments;
|
|
return this.each(function () {
|
|
var $this = $(this),
|
|
$settings = $.extend(true, {}, $.fn.jGraduateDefaults, options),
|
|
id = $this.attr('id'),
|
|
idref = '#' + $this.attr('id') + ' ';
|
|
|
|
if (!idref) {
|
|
alert('Container element must have an id attribute to maintain unique id strings for sub-elements.');
|
|
return;
|
|
}
|
|
|
|
var okClicked = function okClicked() {
|
|
switch ($this.paint.type) {
|
|
case 'radialGradient':
|
|
$this.paint.linearGradient = null;
|
|
break;
|
|
case 'linearGradient':
|
|
$this.paint.radialGradient = null;
|
|
break;
|
|
case 'solidColor':
|
|
$this.paint.radialGradient = $this.paint.linearGradient = null;
|
|
break;
|
|
}
|
|
typeof $this.okCallback === 'function' && $this.okCallback($this.paint);
|
|
$this.hide();
|
|
};
|
|
var cancelClicked = function cancelClicked() {
|
|
typeof $this.cancelCallback === 'function' && $this.cancelCallback();
|
|
$this.hide();
|
|
};
|
|
|
|
$.extend(true, $this, { // public properties, methods, and callbacks
|
|
// make a copy of the incoming paint
|
|
paint: new $.jGraduate.Paint({ copy: $settings.paint }),
|
|
okCallback: typeof $arguments[1] === 'function' && $arguments[1] || null,
|
|
cancelCallback: typeof $arguments[2] === 'function' && $arguments[2] || null
|
|
});
|
|
|
|
var // pos = $this.position(),
|
|
color = null;
|
|
var $win = $(window);
|
|
|
|
if ($this.paint.type === 'none') {
|
|
$this.paint = $.jGraduate.Paint({ solidColor: 'ffffff' });
|
|
}
|
|
|
|
$this.addClass('jGraduate_Picker');
|
|
$this.html('<ul class="jGraduate_tabs">' + '<li class="jGraduate_tab_color jGraduate_tab_current" data-type="col">Solid Color</li>' + '<li class="jGraduate_tab_lingrad" data-type="lg">Linear Gradient</li>' + '<li class="jGraduate_tab_radgrad" data-type="rg">Radial Gradient</li>' + '</ul>' + '<div class="jGraduate_colPick"></div>' + '<div class="jGraduate_gradPick"></div>' + '<div class="jGraduate_LightBox"></div>' + '<div id="' + id + '_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>');
|
|
var colPicker = $(idref + '> .jGraduate_colPick');
|
|
var gradPicker = $(idref + '> .jGraduate_gradPick');
|
|
|
|
gradPicker.html('<div id="' + id + '_jGraduate_Swatch" class="jGraduate_Swatch">' + '<h2 class="jGraduate_Title">' + $settings.window.pickerTitle + '</h2>' + '<div id="' + id + '_jGraduate_GradContainer" class="jGraduate_GradContainer"></div>' + '<div id="' + id + '_jGraduate_StopSlider" class="jGraduate_StopSlider"></div>' + '</div>' + '<div class="jGraduate_Form jGraduate_Points jGraduate_lg_field">' + '<div class="jGraduate_StopSection">' + '<label class="jGraduate_Form_Heading">Begin Point</label>' + '<div class="jGraduate_Form_Section">' + '<label>x:</label>' + '<input type="text" id="' + id + '_jGraduate_x1" size="3" title="Enter starting x value between 0.0 and 1.0"/>' + '<label>y:</label>' + '<input type="text" id="' + id + '_jGraduate_y1" size="3" title="Enter starting y value between 0.0 and 1.0"/>' + '</div>' + '</div>' + '<div class="jGraduate_StopSection">' + '<label class="jGraduate_Form_Heading">End Point</label>' + '<div class="jGraduate_Form_Section">' + '<label>x:</label>' + '<input type="text" id="' + id + '_jGraduate_x2" size="3" title="Enter ending x value between 0.0 and 1.0"/>' + '<label>y:</label>' + '<input type="text" id="' + id + '_jGraduate_y2" size="3" title="Enter ending y value between 0.0 and 1.0"/>' + '</div>' + '</div>' + '</div>' + '<div class="jGraduate_Form jGraduate_Points jGraduate_rg_field">' + '<div class="jGraduate_StopSection">' + '<label class="jGraduate_Form_Heading">Center Point</label>' + '<div class="jGraduate_Form_Section">' + '<label>x:</label>' + '<input type="text" id="' + id + '_jGraduate_cx" size="3" title="Enter x value between 0.0 and 1.0"/>' + '<label>y:</label>' + '<input type="text" id="' + id + '_jGraduate_cy" size="3" title="Enter y value between 0.0 and 1.0"/>' + '</div>' + '</div>' + '<div class="jGraduate_StopSection">' + '<label class="jGraduate_Form_Heading">Focal Point</label>' + '<div class="jGraduate_Form_Section">' + '<label>Match center: <input type="checkbox" checked="checked" id="' + id + '_jGraduate_match_ctr"/></label><br/>' + '<label>x:</label>' + '<input type="text" id="' + id + '_jGraduate_fx" size="3" title="Enter x value between 0.0 and 1.0"/>' + '<label>y:</label>' + '<input type="text" id="' + id + '_jGraduate_fy" size="3" title="Enter y value between 0.0 and 1.0"/>' + '</div>' + '</div>' + '</div>' + '<div class="jGraduate_StopSection jGraduate_SpreadMethod">' + '<label class="jGraduate_Form_Heading">Spread method</label>' + '<div class="jGraduate_Form_Section">' + '<select class="jGraduate_spreadMethod">' + '<option value=pad selected>Pad</option>' + '<option value=reflect>Reflect</option>' + '<option value=repeat>Repeat</option>' + '</select>' + '</div>' + '</div>' + '<div class="jGraduate_Form">' + '<div class="jGraduate_Slider jGraduate_RadiusField jGraduate_rg_field">' + '<label class="prelabel">Radius:</label>' + '<div id="' + id + '_jGraduate_Radius" class="jGraduate_SliderBar jGraduate_Radius" title="Click to set radius">' + '<img id="' + id + '_jGraduate_RadiusArrows" class="jGraduate_RadiusArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif">' + '</div>' + '<label><input type="text" id="' + id + '_jGraduate_RadiusInput" size="3" value="100"/>%</label>' + '</div>' + '<div class="jGraduate_Slider jGraduate_EllipField jGraduate_rg_field">' + '<label class="prelabel">Ellip:</label>' + '<div id="' + id + '_jGraduate_Ellip" class="jGraduate_SliderBar jGraduate_Ellip" title="Click to set Ellip">' + '<img id="' + id + '_jGraduate_EllipArrows" class="jGraduate_EllipArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif">' + '</div>' + '<label><input type="text" id="' + id + '_jGraduate_EllipInput" size="3" value="0"/>%</label>' + '</div>' + '<div class="jGraduate_Slider jGraduate_AngleField jGraduate_rg_field">' + '<label class="prelabel">Angle:</label>' + '<div id="' + id + '_jGraduate_Angle" class="jGraduate_SliderBar jGraduate_Angle" title="Click to set Angle">' + '<img id="' + id + '_jGraduate_AngleArrows" class="jGraduate_AngleArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif">' + '</div>' + '<label><input type="text" id="' + id + '_jGraduate_AngleInput" size="3" value="0"/>deg</label>' + '</div>' + '<div class="jGraduate_Slider jGraduate_OpacField">' + '<label class="prelabel">Opac:</label>' + '<div id="' + id + '_jGraduate_Opac" class="jGraduate_SliderBar jGraduate_Opac" title="Click to set Opac">' + '<img id="' + id + '_jGraduate_OpacArrows" class="jGraduate_OpacArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif">' + '</div>' + '<label><input type="text" id="' + id + '_jGraduate_OpacInput" size="3" value="100"/>%</label>' + '</div>' + '</div>' + '<div class="jGraduate_OkCancel">' + '<input type="button" id="' + id + '_jGraduate_Ok" class="jGraduate_Ok" value="OK"/>' + '<input type="button" id="' + id + '_jGraduate_Cancel" class="jGraduate_Cancel" value="Cancel"/>' + '</div>');
|
|
|
|
// --------------
|
|
// Set up all the SVG elements (the gradient, stops and rectangle)
|
|
var MAX = 256,
|
|
MARGINX = 0,
|
|
MARGINY = 0,
|
|
|
|
// STOP_RADIUS = 15 / 2,
|
|
SIZEX = MAX - 2 * MARGINX,
|
|
SIZEY = MAX - 2 * MARGINY;
|
|
|
|
var attrInput = {};
|
|
|
|
var SLIDERW = 145;
|
|
$('.jGraduate_SliderBar').width(SLIDERW);
|
|
|
|
var container = $('#' + id + '_jGraduate_GradContainer')[0];
|
|
|
|
var svg = mkElem('svg', {
|
|
id: id + '_jgraduate_svg',
|
|
width: MAX,
|
|
height: MAX,
|
|
xmlns: ns.svg
|
|
}, container);
|
|
|
|
// This wasn't working as designed
|
|
// let curType;
|
|
// curType = curType || $this.paint.type;
|
|
|
|
// if we are sent a gradient, import it
|
|
var curType = $this.paint.type;
|
|
|
|
var grad = $this.paint[curType];
|
|
var curGradient = grad;
|
|
|
|
var gradalpha = $this.paint.alpha;
|
|
|
|
var isSolid = curType === 'solidColor';
|
|
|
|
// Make any missing gradients
|
|
switch (curType) {
|
|
case 'solidColor':
|
|
// fall through
|
|
case 'linearGradient':
|
|
if (!isSolid) {
|
|
curGradient.id = id + '_lg_jgraduate_grad';
|
|
grad = curGradient = svg.appendChild(curGradient); // .cloneNode(true));
|
|
}
|
|
mkElem('radialGradient', {
|
|
id: id + '_rg_jgraduate_grad'
|
|
}, svg);
|
|
if (curType === 'linearGradient') {
|
|
break;
|
|
}
|
|
// fall through
|
|
case 'radialGradient':
|
|
if (!isSolid) {
|
|
curGradient.id = id + '_rg_jgraduate_grad';
|
|
grad = curGradient = svg.appendChild(curGradient); // .cloneNode(true));
|
|
}
|
|
mkElem('linearGradient', {
|
|
id: id + '_lg_jgraduate_grad'
|
|
}, svg);
|
|
}
|
|
|
|
var stopGroup = void 0; // eslint-disable-line prefer-const
|
|
if (isSolid) {
|
|
grad = curGradient = $('#' + id + '_lg_jgraduate_grad')[0];
|
|
color = $this.paint[curType];
|
|
mkStop(0, '#' + color, 1);
|
|
|
|
var type = _typeof($settings.newstop);
|
|
|
|
if (type === 'string') {
|
|
switch ($settings.newstop) {
|
|
case 'same':
|
|
mkStop(1, '#' + color, 1);
|
|
break;
|
|
|
|
case 'inverse':
|
|
// Invert current color for second stop
|
|
var inverted = '';
|
|
for (var i = 0; i < 6; i += 2) {
|
|
// const ch = color.substr(i, 2);
|
|
var inv = (255 - parseInt(color.substr(i, 2), 16)).toString(16);
|
|
if (inv.length < 2) inv = 0 + inv;
|
|
inverted += inv;
|
|
}
|
|
mkStop(1, '#' + inverted, 1);
|
|
break;
|
|
|
|
case 'white':
|
|
mkStop(1, '#ffffff', 1);
|
|
break;
|
|
|
|
case 'black':
|
|
mkStop(1, '#000000', 1);
|
|
break;
|
|
}
|
|
} else if (type === 'object') {
|
|
var opac = 'opac' in $settings.newstop ? $settings.newstop.opac : 1;
|
|
mkStop(1, $settings.newstop.color || '#' + color, opac);
|
|
}
|
|
}
|
|
|
|
var x1 = parseFloat(grad.getAttribute('x1') || 0.0),
|
|
y1 = parseFloat(grad.getAttribute('y1') || 0.0),
|
|
x2 = parseFloat(grad.getAttribute('x2') || 1.0),
|
|
y2 = parseFloat(grad.getAttribute('y2') || 0.0);
|
|
|
|
var cx = parseFloat(grad.getAttribute('cx') || 0.5),
|
|
cy = parseFloat(grad.getAttribute('cy') || 0.5),
|
|
fx = parseFloat(grad.getAttribute('fx') || cx),
|
|
fy = parseFloat(grad.getAttribute('fy') || cy);
|
|
|
|
var previewRect = mkElem('rect', {
|
|
id: id + '_jgraduate_rect',
|
|
x: MARGINX,
|
|
y: MARGINY,
|
|
width: SIZEX,
|
|
height: SIZEY,
|
|
fill: 'url(#' + id + '_jgraduate_grad)',
|
|
'fill-opacity': gradalpha / 100
|
|
}, svg);
|
|
|
|
// stop visuals created here
|
|
var beginCoord = $('<div/>').attr({
|
|
class: 'grad_coord jGraduate_lg_field',
|
|
title: 'Begin Stop'
|
|
}).text(1).css({
|
|
top: y1 * MAX,
|
|
left: x1 * MAX
|
|
}).data('coord', 'start').appendTo(container);
|
|
|
|
var endCoord = beginCoord.clone().text(2).css({
|
|
top: y2 * MAX,
|
|
left: x2 * MAX
|
|
}).attr('title', 'End stop').data('coord', 'end').appendTo(container);
|
|
|
|
var centerCoord = $('<div/>').attr({
|
|
class: 'grad_coord jGraduate_rg_field',
|
|
title: 'Center stop'
|
|
}).text('C').css({
|
|
top: cy * MAX,
|
|
left: cx * MAX
|
|
}).data('coord', 'center').appendTo(container);
|
|
|
|
var focusCoord = centerCoord.clone().text('F').css({
|
|
top: fy * MAX,
|
|
left: fx * MAX,
|
|
display: 'none'
|
|
}).attr('title', 'Focus point').data('coord', 'focus').appendTo(container);
|
|
|
|
focusCoord[0].id = id + '_jGraduate_focusCoord';
|
|
|
|
// const coords = $(idref + ' .grad_coord');
|
|
|
|
// $(container).hover(function () {
|
|
// coords.animate({
|
|
// opacity: 1
|
|
// }, 500);
|
|
// }, function () {
|
|
// coords.animate({
|
|
// opacity: .2
|
|
// }, 500);
|
|
// });
|
|
|
|
var showFocus = void 0;
|
|
$.each(['x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy'], function (i, attr) {
|
|
var isRadial = isNaN(attr[1]);
|
|
|
|
var attrval = curGradient.getAttribute(attr);
|
|
if (!attrval) {
|
|
// Set defaults
|
|
if (isRadial) {
|
|
// For radial points
|
|
attrval = '0.5';
|
|
} else {
|
|
// Only x2 is 1
|
|
attrval = attr === 'x2' ? '1.0' : '0.0';
|
|
}
|
|
}
|
|
|
|
attrInput[attr] = $('#' + id + '_jGraduate_' + attr).val(attrval).change(function () {
|
|
// TODO: Support values < 0 and > 1 (zoomable preview?)
|
|
if (isNaN(parseFloat(this.value)) || this.value < 0) {
|
|
this.value = 0.0;
|
|
} else if (this.value > 1) {
|
|
this.value = 1.0;
|
|
}
|
|
|
|
if (!(attr[0] === 'f' && !showFocus)) {
|
|
if (isRadial && curType === 'radialGradient' || !isRadial && curType === 'linearGradient') {
|
|
curGradient.setAttribute(attr, this.value);
|
|
}
|
|
}
|
|
|
|
var $elem = isRadial ? attr[0] === 'c' ? centerCoord : focusCoord : attr[1] === '1' ? beginCoord : endCoord;
|
|
|
|
var cssName = attr.includes('x') ? 'left' : 'top';
|
|
|
|
$elem.css(cssName, this.value * MAX);
|
|
}).change();
|
|
});
|
|
|
|
function mkStop(n, color, opac, sel, stopElem) {
|
|
var stop = stopElem || mkElem('stop', { 'stop-color': color, 'stop-opacity': opac, offset: n }, curGradient);
|
|
if (stopElem) {
|
|
color = stopElem.getAttribute('stop-color');
|
|
opac = stopElem.getAttribute('stop-opacity');
|
|
n = stopElem.getAttribute('offset');
|
|
} else {
|
|
curGradient.appendChild(stop);
|
|
}
|
|
if (opac === null) opac = 1;
|
|
|
|
var pickerD = 'M-6.2,0.9c3.6-4,6.7-4.3,6.7-12.4c-0.2,7.9,3.1,8.8,6.5,12.4c3.5,3.8,2.9,9.6,0,12.3c-3.1,2.8-10.4,2.7-13.2,0C-9.6,9.9-9.4,4.4-6.2,0.9z';
|
|
|
|
var pathbg = mkElem('path', {
|
|
d: pickerD,
|
|
fill: 'url(#jGraduate_trans)',
|
|
transform: 'translate(' + (10 + n * MAX) + ', 26)'
|
|
}, stopGroup);
|
|
|
|
var path = mkElem('path', {
|
|
d: pickerD,
|
|
fill: color,
|
|
'fill-opacity': opac,
|
|
transform: 'translate(' + (10 + n * MAX) + ', 26)',
|
|
stroke: '#000',
|
|
'stroke-width': 1.5
|
|
}, stopGroup);
|
|
|
|
$(path).mousedown(function (e) {
|
|
selectStop(this);
|
|
drag = curStop;
|
|
$win.mousemove(dragColor).mouseup(remDrags);
|
|
stopOffset = stopMakerDiv.offset();
|
|
e.preventDefault();
|
|
return false;
|
|
}).data('stop', stop).data('bg', pathbg).dblclick(function () {
|
|
$('div.jGraduate_LightBox').show();
|
|
var colorhandle = this;
|
|
var stopOpacity = +stop.getAttribute('stop-opacity') || 1;
|
|
var stopColor = stop.getAttribute('stop-color') || 1;
|
|
var thisAlpha = (parseFloat(stopOpacity) * 255).toString(16);
|
|
while (thisAlpha.length < 2) {
|
|
thisAlpha = '0' + thisAlpha;
|
|
}
|
|
color = stopColor.substr(1) + thisAlpha;
|
|
$('#' + id + '_jGraduate_stopPicker').css({ left: 100, bottom: 15 }).jPicker({
|
|
window: { title: 'Pick the start color and opacity for the gradient' },
|
|
images: { clientPath: $settings.images.clientPath },
|
|
color: { active: color, alphaSupport: true }
|
|
}, function (color, arg2) {
|
|
stopColor = color.val('hex') ? '#' + color.val('hex') : 'none';
|
|
stopOpacity = color.val('a') !== null ? color.val('a') / 256 : 1;
|
|
colorhandle.setAttribute('fill', stopColor);
|
|
colorhandle.setAttribute('fill-opacity', stopOpacity);
|
|
stop.setAttribute('stop-color', stopColor);
|
|
stop.setAttribute('stop-opacity', stopOpacity);
|
|
$('div.jGraduate_LightBox').hide();
|
|
$('#' + id + '_jGraduate_stopPicker').hide();
|
|
}, null, function () {
|
|
$('div.jGraduate_LightBox').hide();
|
|
$('#' + id + '_jGraduate_stopPicker').hide();
|
|
});
|
|
});
|
|
|
|
$(curGradient).find('stop').each(function () {
|
|
var curS = $(this);
|
|
if (+this.getAttribute('offset') > n) {
|
|
if (!color) {
|
|
var newcolor = this.getAttribute('stop-color');
|
|
var newopac = this.getAttribute('stop-opacity');
|
|
stop.setAttribute('stop-color', newcolor);
|
|
path.setAttribute('fill', newcolor);
|
|
stop.setAttribute('stop-opacity', newopac === null ? 1 : newopac);
|
|
path.setAttribute('fill-opacity', newopac === null ? 1 : newopac);
|
|
}
|
|
curS.before(stop);
|
|
return false;
|
|
}
|
|
});
|
|
if (sel) selectStop(path);
|
|
return stop;
|
|
}
|
|
|
|
function remStop() {
|
|
delStop.setAttribute('display', 'none');
|
|
var path = $(curStop);
|
|
var stop = path.data('stop');
|
|
var bg = path.data('bg');
|
|
$([curStop, stop, bg]).remove();
|
|
}
|
|
|
|
var stopMakerDiv = $('#' + id + '_jGraduate_StopSlider');
|
|
|
|
var stops = void 0,
|
|
curStop = void 0,
|
|
drag = void 0;
|
|
|
|
var delStop = mkElem('path', {
|
|
d: 'm9.75,-6l-19.5,19.5m0,-19.5l19.5,19.5',
|
|
fill: 'none',
|
|
stroke: '#D00',
|
|
'stroke-width': 5,
|
|
display: 'none'
|
|
}, undefined); // stopMakerSVG);
|
|
|
|
function selectStop(item) {
|
|
if (curStop) curStop.setAttribute('stroke', '#000');
|
|
item.setAttribute('stroke', 'blue');
|
|
curStop = item;
|
|
curStop.parentNode.appendChild(curStop);
|
|
// stops = $('stop');
|
|
// opac_select.val(curStop.attr('fill-opacity') || 1);
|
|
// root.append(delStop);
|
|
}
|
|
|
|
var stopOffset = void 0;
|
|
|
|
function remDrags() {
|
|
$win.unbind('mousemove', dragColor);
|
|
if (delStop.getAttribute('display') !== 'none') {
|
|
remStop();
|
|
}
|
|
drag = null;
|
|
}
|
|
|
|
var scaleX = 1,
|
|
scaleY = 1,
|
|
angle = 0;
|
|
|
|
var cX = cx;
|
|
var cY = cy;
|
|
function xform() {
|
|
var rot = angle ? 'rotate(' + angle + ',' + cX + ',' + cY + ') ' : '';
|
|
if (scaleX === 1 && scaleY === 1) {
|
|
curGradient.removeAttribute('gradientTransform');
|
|
// $('#ang').addClass('dis');
|
|
} else {
|
|
var x = -cX * (scaleX - 1);
|
|
var y = -cY * (scaleY - 1);
|
|
curGradient.setAttribute('gradientTransform', rot + 'translate(' + x + ',' + y + ') scale(' + scaleX + ',' + scaleY + ')');
|
|
// $('#ang').removeClass('dis');
|
|
}
|
|
}
|
|
|
|
function dragColor(evt) {
|
|
var x = evt.pageX - stopOffset.left;
|
|
var y = evt.pageY - stopOffset.top;
|
|
x = x < 10 ? 10 : x > MAX + 10 ? MAX + 10 : x;
|
|
|
|
var xfStr = 'translate(' + x + ', 26)';
|
|
if (y < -60 || y > 130) {
|
|
delStop.setAttribute('display', 'block');
|
|
delStop.setAttribute('transform', xfStr);
|
|
} else {
|
|
delStop.setAttribute('display', 'none');
|
|
}
|
|
|
|
drag.setAttribute('transform', xfStr);
|
|
$.data(drag, 'bg').setAttribute('transform', xfStr);
|
|
var stop = $.data(drag, 'stop');
|
|
var sX = (x - 10) / MAX;
|
|
|
|
stop.setAttribute('offset', sX);
|
|
|
|
var last = 0;
|
|
$(curGradient).find('stop').each(function (i) {
|
|
var cur = this.getAttribute('offset');
|
|
var t = $(this);
|
|
if (cur < last) {
|
|
t.prev().before(t);
|
|
stops = $(curGradient).find('stop');
|
|
}
|
|
last = cur;
|
|
});
|
|
}
|
|
|
|
var stopMakerSVG = mkElem('svg', {
|
|
width: '100%',
|
|
height: 45
|
|
}, stopMakerDiv[0]);
|
|
|
|
var transPattern = mkElem('pattern', {
|
|
width: 16,
|
|
height: 16,
|
|
patternUnits: 'userSpaceOnUse',
|
|
id: 'jGraduate_trans'
|
|
}, stopMakerSVG);
|
|
|
|
var transImg = mkElem('image', {
|
|
width: 16,
|
|
height: 16
|
|
}, transPattern);
|
|
|
|
var bgImage = $settings.images.clientPath + 'map-opacity.png';
|
|
|
|
transImg.setAttributeNS(ns.xlink, 'xlink:href', bgImage);
|
|
|
|
$(stopMakerSVG).click(function (evt) {
|
|
stopOffset = stopMakerDiv.offset();
|
|
var target = evt.target;
|
|
|
|
if (target.tagName === 'path') return;
|
|
var x = evt.pageX - stopOffset.left - 8;
|
|
x = x < 10 ? 10 : x > MAX + 10 ? MAX + 10 : x;
|
|
mkStop(x / MAX, 0, 0, true);
|
|
evt.stopPropagation();
|
|
});
|
|
|
|
$(stopMakerSVG).mouseover(function () {
|
|
stopMakerSVG.appendChild(delStop);
|
|
});
|
|
|
|
stopGroup = mkElem('g', {}, stopMakerSVG);
|
|
|
|
mkElem('line', {
|
|
x1: 10,
|
|
y1: 15,
|
|
x2: MAX + 10,
|
|
y2: 15,
|
|
'stroke-width': 2,
|
|
stroke: '#000'
|
|
}, stopMakerSVG);
|
|
|
|
var spreadMethodOpt = gradPicker.find('.jGraduate_spreadMethod').change(function () {
|
|
curGradient.setAttribute('spreadMethod', $(this).val());
|
|
});
|
|
|
|
// handle dragging the stop around the swatch
|
|
var draggingCoord = null;
|
|
|
|
var onCoordDrag = function onCoordDrag(evt) {
|
|
var x = evt.pageX - offset.left;
|
|
var y = evt.pageY - offset.top;
|
|
|
|
// clamp stop to the swatch
|
|
x = x < 0 ? 0 : x > MAX ? MAX : x;
|
|
y = y < 0 ? 0 : y > MAX ? MAX : y;
|
|
|
|
draggingCoord.css('left', x).css('top', y);
|
|
|
|
// calculate stop offset
|
|
var fracx = x / SIZEX;
|
|
var fracy = y / SIZEY;
|
|
|
|
var type = draggingCoord.data('coord');
|
|
var grad = curGradient;
|
|
|
|
switch (type) {
|
|
case 'start':
|
|
attrInput.x1.val(fracx);
|
|
attrInput.y1.val(fracy);
|
|
grad.setAttribute('x1', fracx);
|
|
grad.setAttribute('y1', fracy);
|
|
break;
|
|
case 'end':
|
|
attrInput.x2.val(fracx);
|
|
attrInput.y2.val(fracy);
|
|
grad.setAttribute('x2', fracx);
|
|
grad.setAttribute('y2', fracy);
|
|
break;
|
|
case 'center':
|
|
attrInput.cx.val(fracx);
|
|
attrInput.cy.val(fracy);
|
|
grad.setAttribute('cx', fracx);
|
|
grad.setAttribute('cy', fracy);
|
|
cX = fracx;
|
|
cY = fracy;
|
|
xform();
|
|
break;
|
|
case 'focus':
|
|
attrInput.fx.val(fracx);
|
|
attrInput.fy.val(fracy);
|
|
grad.setAttribute('fx', fracx);
|
|
grad.setAttribute('fy', fracy);
|
|
xform();
|
|
}
|
|
|
|
evt.preventDefault();
|
|
};
|
|
|
|
var onCoordUp = function onCoordUp() {
|
|
draggingCoord = null;
|
|
$win.unbind('mousemove', onCoordDrag).unbind('mouseup', onCoordUp);
|
|
};
|
|
|
|
// Linear gradient
|
|
// (function () {
|
|
|
|
stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
|
|
|
|
var numstops = stops.length;
|
|
// if there are not at least two stops, then
|
|
if (numstops < 2) {
|
|
while (numstops < 2) {
|
|
curGradient.appendChild(document.createElementNS(ns.svg, 'stop'));
|
|
++numstops;
|
|
}
|
|
stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
|
|
}
|
|
|
|
for (var _i = 0; _i < numstops; _i++) {
|
|
mkStop(0, 0, 0, 0, stops[_i]);
|
|
}
|
|
|
|
spreadMethodOpt.val(curGradient.getAttribute('spreadMethod') || 'pad');
|
|
|
|
var offset = void 0;
|
|
|
|
// No match, so show focus point
|
|
showFocus = false;
|
|
|
|
previewRect.setAttribute('fill-opacity', gradalpha / 100);
|
|
|
|
$('#' + id + ' div.grad_coord').mousedown(function (evt) {
|
|
evt.preventDefault();
|
|
draggingCoord = $(this);
|
|
// const sPos = draggingCoord.offset();
|
|
offset = draggingCoord.parent().offset();
|
|
$win.mousemove(onCoordDrag).mouseup(onCoordUp);
|
|
});
|
|
|
|
// bind GUI elements
|
|
$('#' + id + '_jGraduate_Ok').bind('click', function () {
|
|
$this.paint.type = curType;
|
|
$this.paint[curType] = curGradient.cloneNode(true);
|
|
$this.paint.solidColor = null;
|
|
okClicked();
|
|
});
|
|
$('#' + id + '_jGraduate_Cancel').bind('click', function (paint) {
|
|
cancelClicked();
|
|
});
|
|
|
|
if (curType === 'radialGradient') {
|
|
if (showFocus) {
|
|
focusCoord.show();
|
|
} else {
|
|
focusCoord.hide();
|
|
attrInput.fx.val('');
|
|
attrInput.fy.val('');
|
|
}
|
|
}
|
|
|
|
$('#' + id + '_jGraduate_match_ctr')[0].checked = !showFocus;
|
|
|
|
var lastfx = void 0,
|
|
lastfy = void 0;
|
|
|
|
$('#' + id + '_jGraduate_match_ctr').change(function () {
|
|
showFocus = !this.checked;
|
|
focusCoord.toggle(showFocus);
|
|
attrInput.fx.val('');
|
|
attrInput.fy.val('');
|
|
var grad = curGradient;
|
|
if (!showFocus) {
|
|
lastfx = grad.getAttribute('fx');
|
|
lastfy = grad.getAttribute('fy');
|
|
grad.removeAttribute('fx');
|
|
grad.removeAttribute('fy');
|
|
} else {
|
|
var _fx = lastfx || 0.5;
|
|
var _fy = lastfy || 0.5;
|
|
grad.setAttribute('fx', _fx);
|
|
grad.setAttribute('fy', _fy);
|
|
attrInput.fx.val(_fx);
|
|
attrInput.fy.val(_fy);
|
|
}
|
|
});
|
|
|
|
stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
|
|
numstops = stops.length;
|
|
// if there are not at least two stops, then
|
|
if (numstops < 2) {
|
|
while (numstops < 2) {
|
|
curGradient.appendChild(document.createElementNS(ns.svg, 'stop'));
|
|
++numstops;
|
|
}
|
|
stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
|
|
}
|
|
|
|
var slider = void 0;
|
|
|
|
var setSlider = function setSlider(e) {
|
|
var _slider = slider,
|
|
offset = _slider.offset;
|
|
|
|
var div = slider.parent;
|
|
var x = e.pageX - offset.left - parseInt(div.css('border-left-width'));
|
|
if (x > SLIDERW) x = SLIDERW;
|
|
if (x <= 0) x = 0;
|
|
var posx = x - 5;
|
|
x /= SLIDERW;
|
|
|
|
switch (slider.type) {
|
|
case 'radius':
|
|
x = Math.pow(x * 2, 2.5);
|
|
if (x > 0.98 && x < 1.02) x = 1;
|
|
if (x <= 0.01) x = 0.01;
|
|
curGradient.setAttribute('r', x);
|
|
break;
|
|
case 'opacity':
|
|
$this.paint.alpha = parseInt(x * 100);
|
|
previewRect.setAttribute('fill-opacity', x);
|
|
break;
|
|
case 'ellip':
|
|
scaleX = 1;
|
|
scaleY = 1;
|
|
if (x < 0.5) {
|
|
x /= 0.5; // 0.001
|
|
scaleX = x <= 0 ? 0.01 : x;
|
|
} else if (x > 0.5) {
|
|
x /= 0.5; // 2
|
|
x = 2 - x;
|
|
scaleY = x <= 0 ? 0.01 : x;
|
|
}
|
|
xform();
|
|
x -= 1;
|
|
if (scaleY === x + 1) {
|
|
x = Math.abs(x);
|
|
}
|
|
break;
|
|
case 'angle':
|
|
x = x - 0.5;
|
|
angle = x *= 180;
|
|
xform();
|
|
x /= 100;
|
|
break;
|
|
}
|
|
slider.elem.css({ 'margin-left': posx });
|
|
x = Math.round(x * 100);
|
|
slider.input.val(x);
|
|
};
|
|
|
|
var ellipVal = 0,
|
|
angleVal = 0;
|
|
|
|
if (curType === 'radialGradient') {
|
|
var tlist = curGradient.gradientTransform.baseVal;
|
|
if (tlist.numberOfItems === 2) {
|
|
var t = tlist.getItem(0);
|
|
var s = tlist.getItem(1);
|
|
if (t.type === 2 && s.type === 3) {
|
|
var m = s.matrix;
|
|
if (m.a !== 1) {
|
|
ellipVal = Math.round(-(1 - m.a) * 100);
|
|
} else if (m.d !== 1) {
|
|
ellipVal = Math.round((1 - m.d) * 100);
|
|
}
|
|
}
|
|
} else if (tlist.numberOfItems === 3) {
|
|
// Assume [R][T][S]
|
|
var r = tlist.getItem(0);
|
|
var _t = tlist.getItem(1);
|
|
var _s = tlist.getItem(2);
|
|
|
|
if (r.type === 4 && _t.type === 2 && _s.type === 3) {
|
|
angleVal = Math.round(r.angle);
|
|
var _m = _s.matrix;
|
|
if (_m.a !== 1) {
|
|
ellipVal = Math.round(-(1 - _m.a) * 100);
|
|
} else if (_m.d !== 1) {
|
|
ellipVal = Math.round((1 - _m.d) * 100);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
var sliders = {
|
|
radius: {
|
|
handle: '#' + id + '_jGraduate_RadiusArrows',
|
|
input: '#' + id + '_jGraduate_RadiusInput',
|
|
val: (curGradient.getAttribute('r') || 0.5) * 100
|
|
},
|
|
opacity: {
|
|
handle: '#' + id + '_jGraduate_OpacArrows',
|
|
input: '#' + id + '_jGraduate_OpacInput',
|
|
val: $this.paint.alpha || 100
|
|
},
|
|
ellip: {
|
|
handle: '#' + id + '_jGraduate_EllipArrows',
|
|
input: '#' + id + '_jGraduate_EllipInput',
|
|
val: ellipVal
|
|
},
|
|
angle: {
|
|
handle: '#' + id + '_jGraduate_AngleArrows',
|
|
input: '#' + id + '_jGraduate_AngleInput',
|
|
val: angleVal
|
|
}
|
|
};
|
|
|
|
$.each(sliders, function (type, data) {
|
|
var handle = $(data.handle);
|
|
handle.mousedown(function (evt) {
|
|
var parent = handle.parent();
|
|
slider = {
|
|
type: type,
|
|
elem: handle,
|
|
input: $(data.input),
|
|
parent: parent,
|
|
offset: parent.offset()
|
|
};
|
|
$win.mousemove(dragSlider).mouseup(stopSlider);
|
|
evt.preventDefault();
|
|
});
|
|
|
|
$(data.input).val(data.val).change(function () {
|
|
var isRad = curType === 'radialGradient';
|
|
var val = +this.value;
|
|
var xpos = 0;
|
|
switch (type) {
|
|
case 'radius':
|
|
if (isRad) curGradient.setAttribute('r', val / 100);
|
|
xpos = Math.pow(val / 100, 1 / 2.5) / 2 * SLIDERW;
|
|
break;
|
|
|
|
case 'opacity':
|
|
$this.paint.alpha = val;
|
|
previewRect.setAttribute('fill-opacity', val / 100);
|
|
xpos = val * (SLIDERW / 100);
|
|
break;
|
|
|
|
case 'ellip':
|
|
scaleX = scaleY = 1;
|
|
if (val === 0) {
|
|
xpos = SLIDERW * 0.5;
|
|
break;
|
|
}
|
|
if (val > 99.5) val = 99.5;
|
|
if (val > 0) {
|
|
scaleY = 1 - val / 100;
|
|
} else {
|
|
scaleX = -(val / 100) - 1;
|
|
}
|
|
|
|
xpos = SLIDERW * ((val + 100) / 2) / 100;
|
|
if (isRad) xform();
|
|
break;
|
|
|
|
case 'angle':
|
|
angle = val;
|
|
xpos = angle / 180;
|
|
xpos += 0.5;
|
|
xpos *= SLIDERW;
|
|
if (isRad) xform();
|
|
}
|
|
if (xpos > SLIDERW) {
|
|
xpos = SLIDERW;
|
|
} else if (xpos < 0) {
|
|
xpos = 0;
|
|
}
|
|
handle.css({ 'margin-left': xpos - 5 });
|
|
}).change();
|
|
});
|
|
|
|
var dragSlider = function dragSlider(evt) {
|
|
setSlider(evt);
|
|
evt.preventDefault();
|
|
};
|
|
|
|
var stopSlider = function stopSlider(evt) {
|
|
$win.unbind('mousemove', dragSlider).unbind('mouseup', stopSlider);
|
|
slider = null;
|
|
};
|
|
|
|
// --------------
|
|
var thisAlpha = ($this.paint.alpha * 255 / 100).toString(16);
|
|
while (thisAlpha.length < 2) {
|
|
thisAlpha = '0' + thisAlpha;
|
|
}
|
|
thisAlpha = thisAlpha.split('.')[0];
|
|
color = $this.paint.solidColor === 'none' ? '' : $this.paint.solidColor + thisAlpha;
|
|
|
|
if (!isSolid) {
|
|
color = stops[0].getAttribute('stop-color');
|
|
}
|
|
|
|
// This should be done somewhere else, probably
|
|
$.extend($.fn.jPicker.defaults.window, {
|
|
alphaSupport: true, effects: { type: 'show', speed: 0 }
|
|
});
|
|
|
|
colPicker.jPicker({
|
|
window: { title: $settings.window.pickerTitle },
|
|
images: { clientPath: $settings.images.clientPath },
|
|
color: { active: color, alphaSupport: true }
|
|
}, function (color) {
|
|
$this.paint.type = 'solidColor';
|
|
$this.paint.alpha = color.val('ahex') ? Math.round(color.val('a') / 255 * 100) : 100;
|
|
$this.paint.solidColor = color.val('hex') ? color.val('hex') : 'none';
|
|
$this.paint.radialGradient = null;
|
|
okClicked();
|
|
}, null, function () {
|
|
cancelClicked();
|
|
});
|
|
|
|
var tabs = $(idref + ' .jGraduate_tabs li');
|
|
tabs.click(function () {
|
|
tabs.removeClass('jGraduate_tab_current');
|
|
$(this).addClass('jGraduate_tab_current');
|
|
$(idref + ' > div').hide();
|
|
var type = $(this).attr('data-type');
|
|
/* const container = */$(idref + ' .jGraduate_gradPick').show();
|
|
if (type === 'rg' || type === 'lg') {
|
|
// Show/hide appropriate fields
|
|
$('.jGraduate_' + type + '_field').show();
|
|
$('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field').hide();
|
|
|
|
$('#' + id + '_jgraduate_rect')[0].setAttribute('fill', 'url(#' + id + '_' + type + '_jgraduate_grad)');
|
|
|
|
// Copy stops
|
|
|
|
curType = type === 'lg' ? 'linearGradient' : 'radialGradient';
|
|
|
|
$('#' + id + '_jGraduate_OpacInput').val($this.paint.alpha).change();
|
|
|
|
var newGrad = $('#' + id + '_' + type + '_jgraduate_grad')[0];
|
|
|
|
if (curGradient !== newGrad) {
|
|
var curStops = $(curGradient).find('stop');
|
|
$(newGrad).empty().append(curStops);
|
|
curGradient = newGrad;
|
|
var sm = spreadMethodOpt.val();
|
|
curGradient.setAttribute('spreadMethod', sm);
|
|
}
|
|
showFocus = type === 'rg' && curGradient.getAttribute('fx') != null && !(cx === fx && cy === fy);
|
|
$('#' + id + '_jGraduate_focusCoord').toggle(showFocus);
|
|
if (showFocus) {
|
|
$('#' + id + '_jGraduate_match_ctr')[0].checked = false;
|
|
}
|
|
} else {
|
|
$(idref + ' .jGraduate_gradPick').hide();
|
|
$(idref + ' .jGraduate_colPick').show();
|
|
}
|
|
});
|
|
$(idref + ' > div').hide();
|
|
tabs.removeClass('jGraduate_tab_current');
|
|
var tab = void 0;
|
|
switch ($this.paint.type) {
|
|
case 'linearGradient':
|
|
tab = $(idref + ' .jGraduate_tab_lingrad');
|
|
break;
|
|
case 'radialGradient':
|
|
tab = $(idref + ' .jGraduate_tab_radgrad');
|
|
break;
|
|
default:
|
|
tab = $(idref + ' .jGraduate_tab_color');
|
|
break;
|
|
}
|
|
$this.show();
|
|
|
|
// jPicker will try to show after a 0ms timeout, so need to fire this after that
|
|
setTimeout(function () {
|
|
tab.addClass('jGraduate_tab_current').click();
|
|
}, 10);
|
|
});
|
|
};
|
|
return $;
|
|
}
|
|
|
|
/* SpinButton control
|
|
*
|
|
* Adds bells and whistles to any ordinary textbox to
|
|
* make it look and feel like a SpinButton Control.
|
|
*
|
|
* Originally written by George Adamson, Software Unity (george.jquery@softwareunity.com) August 2006.
|
|
* - Added min/max options
|
|
* - Added step size option
|
|
* - Added bigStep (page up/down) option
|
|
*
|
|
* Modifications made by Mark Gibson, (mgibson@designlinks.net) September 2006:
|
|
* - Converted to jQuery plugin
|
|
* - Allow limited or unlimited min/max values
|
|
* - Allow custom class names, and add class to input element
|
|
* - Removed global vars
|
|
* - Reset (to original or through config) when invalid value entered
|
|
* - Repeat whilst holding mouse button down (with initial pause, like keyboard repeat)
|
|
* - Support mouse wheel in Firefox
|
|
* - Fix double click in IE
|
|
* - Refactored some code and renamed some vars
|
|
*
|
|
* Modifications by Jeff Schiller, June 2009:
|
|
* - provide callback function for when the value changes based on the following
|
|
* https://www.mail-archive.com/jquery-en@googlegroups.com/msg36070.html
|
|
* Modifications by Jeff Schiller, July 2009:
|
|
* - improve styling for widget in Opera
|
|
* - consistent key-repeat handling cross-browser
|
|
* Modifications by Alexis Deveria, October 2009:
|
|
* - provide "stepfunc" callback option to allow custom function to run when changing a value
|
|
* - Made adjustValue(0) only run on certain keyup events, not all.
|
|
*
|
|
* Tested in IE6, Opera9, Firefox 1.5
|
|
* v1.0 11 Aug 2006 - George Adamson - First release
|
|
* v1.1 Aug 2006 - George Adamson - Minor enhancements
|
|
* v1.2 27 Sep 2006 - Mark Gibson - Major enhancements
|
|
* v1.3a 28 Sep 2006 - George Adamson - Minor enhancements
|
|
* v1.4 18 Jun 2009 - Jeff Schiller - Added callback function
|
|
* v1.5 06 Jul 2009 - Jeff Schiller - Fixes for Opera.
|
|
* v1.6 13 Oct 2009 - Alexis Deveria - Added stepfunc function
|
|
* v1.7 21 Oct 2009 - Alexis Deveria - Minor fixes
|
|
* Fast-repeat for keys and live updating as you type.
|
|
* v1.8 12 Jan 2010 - Benjamin Thomas - Fixes for mouseout behavior.
|
|
* Added smallStep
|
|
* ? 20 May 2018 - Brett Zamir - Avoid SVGEdit dependency via `stateObj` config;
|
|
convert to ES6 module
|
|
Sample usage:
|
|
|
|
// Create group of settings to initialise spinbutton(s). (Optional)
|
|
const myOptions = {
|
|
min: 0, // Set lower limit.
|
|
max: 100, // Set upper limit.
|
|
step: 1, // Set increment size.
|
|
smallStep: 0.5, // Set shift-click increment size.
|
|
stateObj: {tool_scale: 1}, // Object to allow passing in live-updating scale
|
|
spinClass: mySpinBtnClass, // CSS class to style the spinbutton. (Class also specifies url of the up/down button image.)
|
|
upClass: mySpinUpClass, // CSS class for style when mouse over up button.
|
|
downClass: mySpinDnClass // CSS class for style when mouse over down button.
|
|
};
|
|
|
|
$(function () {
|
|
// Initialise INPUT element(s) as SpinButtons: (passing options if desired)
|
|
$("#myInputElement").SpinButton(myOptions);
|
|
});
|
|
*/
|
|
function jqPluginSpinBtn ($) {
|
|
if (!$.loadingStylesheets) {
|
|
$.loadingStylesheets = [];
|
|
}
|
|
var stylesheet = 'spinbtn/JQuerySpinBtn.css';
|
|
if (!$.loadingStylesheets.includes(stylesheet)) {
|
|
$.loadingStylesheets.push(stylesheet);
|
|
}
|
|
$.fn.SpinButton = function (cfg) {
|
|
cfg = cfg || {};
|
|
function coord(el, prop) {
|
|
var b = document.body;
|
|
|
|
var c = el[prop];
|
|
while ((el = el.offsetParent) && el !== b) {
|
|
if (!$.browser.msie || el.currentStyle.position !== 'relative') {
|
|
c += el[prop];
|
|
}
|
|
}
|
|
|
|
return c;
|
|
}
|
|
|
|
return this.each(function () {
|
|
this.repeating = false;
|
|
|
|
// Apply specified options or defaults:
|
|
// (Ought to refactor this some day to use $.extend() instead)
|
|
this.spinCfg = {
|
|
// min: cfg.min ? Number(cfg.min) : null,
|
|
// max: cfg.max ? Number(cfg.max) : null,
|
|
min: !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null, // Fixes bug with min:0
|
|
max: !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
|
|
step: cfg.step ? Number(cfg.step) : 1,
|
|
stepfunc: cfg.stepfunc || false,
|
|
page: cfg.page ? Number(cfg.page) : 10,
|
|
upClass: cfg.upClass || 'up',
|
|
downClass: cfg.downClass || 'down',
|
|
reset: cfg.reset || this.value,
|
|
delay: cfg.delay ? Number(cfg.delay) : 500,
|
|
interval: cfg.interval ? Number(cfg.interval) : 100,
|
|
_btn_width: 20,
|
|
_direction: null,
|
|
_delay: null,
|
|
_repeat: null,
|
|
callback: cfg.callback || null
|
|
};
|
|
|
|
// if a smallStep isn't supplied, use half the regular step
|
|
this.spinCfg.smallStep = cfg.smallStep || this.spinCfg.step / 2;
|
|
|
|
this.adjustValue = function (i) {
|
|
var v = void 0;
|
|
if (isNaN(this.value)) {
|
|
v = this.spinCfg.reset;
|
|
} else if (typeof this.spinCfg.stepfunc === 'function') {
|
|
v = this.spinCfg.stepfunc(this, i);
|
|
} else {
|
|
// weirdest JavaScript bug ever: 5.1 + 0.1 = 5.199999999
|
|
v = Number((Number(this.value) + Number(i)).toFixed(5));
|
|
}
|
|
if (this.spinCfg.min !== null) {
|
|
v = Math.max(v, this.spinCfg.min);
|
|
}
|
|
if (this.spinCfg.max !== null) {
|
|
v = Math.min(v, this.spinCfg.max);
|
|
}
|
|
this.value = v;
|
|
if (typeof this.spinCfg.callback === 'function') {
|
|
this.spinCfg.callback(this);
|
|
}
|
|
};
|
|
|
|
$(this).addClass(cfg.spinClass || 'spin-button').mousemove(function (e) {
|
|
// Determine which button mouse is over, or not (spin direction):
|
|
var x = e.pageX || e.x;
|
|
var y = e.pageY || e.y;
|
|
var el = e.target;
|
|
var scale = cfg.stateObj.tool_scale || 1;
|
|
var height = $(el).height() / 2;
|
|
|
|
var direction = x > coord(el, 'offsetLeft') + el.offsetWidth * scale - this.spinCfg._btn_width ? y < coord(el, 'offsetTop') + height * scale ? 1 : -1 : 0;
|
|
|
|
if (direction !== this.spinCfg._direction) {
|
|
// Style up/down buttons:
|
|
switch (direction) {
|
|
case 1:
|
|
// Up arrow:
|
|
$(this).removeClass(this.spinCfg.downClass).addClass(this.spinCfg.upClass);
|
|
break;
|
|
case -1:
|
|
// Down arrow:
|
|
$(this).removeClass(this.spinCfg.upClass).addClass(this.spinCfg.downClass);
|
|
break;
|
|
default:
|
|
// Mouse is elsewhere in the textbox
|
|
$(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass);
|
|
}
|
|
|
|
// Set spin direction:
|
|
this.spinCfg._direction = direction;
|
|
}
|
|
}).mouseout(function () {
|
|
// Reset up/down buttons to their normal appearance when mouse moves away:
|
|
$(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass);
|
|
this.spinCfg._direction = null;
|
|
window.clearInterval(this.spinCfg._repeat);
|
|
window.clearTimeout(this.spinCfg._delay);
|
|
}).mousedown(function (e) {
|
|
var _this = this;
|
|
|
|
if (e.button === 0 && this.spinCfg._direction !== 0) {
|
|
// Respond to click on one of the buttons:
|
|
var stepSize = e.shiftKey ? this.spinCfg.smallStep : this.spinCfg.step;
|
|
|
|
var adjust = function adjust() {
|
|
_this.adjustValue(_this.spinCfg._direction * stepSize);
|
|
};
|
|
|
|
adjust();
|
|
|
|
// Initial delay before repeating adjustment
|
|
this.spinCfg._delay = window.setTimeout(function () {
|
|
adjust();
|
|
// Repeat adjust at regular intervals
|
|
_this.spinCfg._repeat = window.setInterval(adjust, _this.spinCfg.interval);
|
|
}, this.spinCfg.delay);
|
|
}
|
|
}).mouseup(function (e) {
|
|
// Cancel repeating adjustment
|
|
window.clearInterval(this.spinCfg._repeat);
|
|
window.clearTimeout(this.spinCfg._delay);
|
|
}).dblclick(function (e) {
|
|
if ($.browser.msie) {
|
|
this.adjustValue(this.spinCfg._direction * this.spinCfg.step);
|
|
}
|
|
}).keydown(function (e) {
|
|
// Respond to up/down arrow keys.
|
|
switch (e.keyCode) {
|
|
case 38:
|
|
this.adjustValue(this.spinCfg.step);break; // Up
|
|
case 40:
|
|
this.adjustValue(-this.spinCfg.step);break; // Down
|
|
case 33:
|
|
this.adjustValue(this.spinCfg.page);break; // PageUp
|
|
case 34:
|
|
this.adjustValue(-this.spinCfg.page);break; // PageDown
|
|
}
|
|
})
|
|
|
|
/*
|
|
http://unixpapa.com/js/key.html describes the current state-of-affairs for
|
|
key repeat events:
|
|
- Safari 3.1 changed their model so that keydown is reliably repeated going forward
|
|
- Firefox and Opera still only repeat the keypress event, not the keydown
|
|
*/
|
|
.keypress(function (e) {
|
|
if (this.repeating) {
|
|
// Respond to up/down arrow keys.
|
|
switch (e.keyCode) {
|
|
case 38:
|
|
this.adjustValue(this.spinCfg.step);break; // Up
|
|
case 40:
|
|
this.adjustValue(-this.spinCfg.step);break; // Down
|
|
case 33:
|
|
this.adjustValue(this.spinCfg.page);break; // PageUp
|
|
case 34:
|
|
this.adjustValue(-this.spinCfg.page);break; // PageDown
|
|
}
|
|
// we always ignore the first keypress event (use the keydown instead)
|
|
} else {
|
|
this.repeating = true;
|
|
}
|
|
})
|
|
|
|
// clear the 'repeating' flag
|
|
.keyup(function (e) {
|
|
this.repeating = false;
|
|
switch (e.keyCode) {
|
|
case 38: // Up
|
|
case 40: // Down
|
|
case 33: // PageUp
|
|
case 34: // PageDown
|
|
case 13:
|
|
this.adjustValue(0);break; // Enter/Return
|
|
}
|
|
}).bind('mousewheel', function (e) {
|
|
// Respond to mouse wheel in IE. (It returns up/dn motion in multiples of 120)
|
|
if (e.wheelDelta >= 120) {
|
|
this.adjustValue(this.spinCfg.step);
|
|
} else if (e.wheelDelta <= -120) {
|
|
this.adjustValue(-this.spinCfg.step);
|
|
}
|
|
|
|
e.preventDefault();
|
|
}).change(function (e) {
|
|
this.adjustValue(0);
|
|
});
|
|
|
|
if (this.addEventListener) {
|
|
// Respond to mouse wheel in Firefox
|
|
this.addEventListener('DOMMouseScroll', function (e) {
|
|
if (e.detail > 0) {
|
|
this.adjustValue(-this.spinCfg.step);
|
|
} else if (e.detail < 0) {
|
|
this.adjustValue(this.spinCfg.step);
|
|
}
|
|
|
|
e.preventDefault();
|
|
}, false);
|
|
}
|
|
});
|
|
};
|
|
return $;
|
|
}
|
|
|
|
// Todo: Update to latest version and adapt (and needs jQuery update as well): https://github.com/swisnl/jQuery-contextMenu
|
|
|
|
function jqPluginContextMenu ($) {
|
|
var win = $(window);
|
|
var doc = $(document);
|
|
|
|
$.extend($.fn, {
|
|
contextMenu: function contextMenu(o, callback) {
|
|
// Defaults
|
|
if (o.menu === undefined) return false;
|
|
if (o.inSpeed === undefined) o.inSpeed = 150;
|
|
if (o.outSpeed === undefined) o.outSpeed = 75;
|
|
// 0 needs to be -1 for expected results (no fade)
|
|
if (o.inSpeed === 0) o.inSpeed = -1;
|
|
if (o.outSpeed === 0) o.outSpeed = -1;
|
|
// Loop each context menu
|
|
$(this).each(function () {
|
|
var el = $(this);
|
|
var offset = $(el).offset();
|
|
|
|
var menu = $('#' + o.menu);
|
|
|
|
// Add contextMenu class
|
|
menu.addClass('contextMenu');
|
|
// Simulate a true right click
|
|
$(this).bind('mousedown', function (e) {
|
|
var evt = e;
|
|
$(this).mouseup(function (e) {
|
|
var srcElement = $(this);
|
|
srcElement.unbind('mouseup');
|
|
if (evt.button === 2 || o.allowLeft || evt.ctrlKey && isMac()) {
|
|
e.stopPropagation();
|
|
// Hide context menus that may be showing
|
|
$('.contextMenu').hide();
|
|
// Get this context menu
|
|
|
|
if (el.hasClass('disabled')) return false;
|
|
|
|
// Detect mouse position
|
|
var x = e.pageX,
|
|
y = e.pageY;
|
|
|
|
var xOff = win.width() - menu.width(),
|
|
yOff = win.height() - menu.height();
|
|
|
|
if (x > xOff - 15) x = xOff - 15;
|
|
if (y > yOff - 30) y = yOff - 30; // 30 is needed to prevent scrollbars in FF
|
|
|
|
// Show the menu
|
|
doc.unbind('click');
|
|
menu.css({ top: y, left: x }).fadeIn(o.inSpeed);
|
|
// Hover events
|
|
menu.find('A').mouseover(function () {
|
|
menu.find('LI.hover').removeClass('hover');
|
|
$(this).parent().addClass('hover');
|
|
}).mouseout(function () {
|
|
menu.find('LI.hover').removeClass('hover');
|
|
});
|
|
|
|
// Keyboard
|
|
doc.keypress(function (e) {
|
|
switch (e.keyCode) {
|
|
case 38:
|
|
// up
|
|
if (!menu.find('LI.hover').length) {
|
|
menu.find('LI:last').addClass('hover');
|
|
} else {
|
|
menu.find('LI.hover').removeClass('hover').prevAll('LI:not(.disabled)').eq(0).addClass('hover');
|
|
if (!menu.find('LI.hover').length) menu.find('LI:last').addClass('hover');
|
|
}
|
|
break;
|
|
case 40:
|
|
// down
|
|
if (!menu.find('LI.hover').length) {
|
|
menu.find('LI:first').addClass('hover');
|
|
} else {
|
|
menu.find('LI.hover').removeClass('hover').nextAll('LI:not(.disabled)').eq(0).addClass('hover');
|
|
if (!menu.find('LI.hover').length) menu.find('LI:first').addClass('hover');
|
|
}
|
|
break;
|
|
case 13:
|
|
// enter
|
|
menu.find('LI.hover A').trigger('click');
|
|
break;
|
|
case 27:
|
|
// esc
|
|
doc.trigger('click');
|
|
break;
|
|
}
|
|
});
|
|
|
|
// When items are selected
|
|
menu.find('A').unbind('mouseup');
|
|
menu.find('LI:not(.disabled) A').mouseup(function () {
|
|
doc.unbind('click').unbind('keypress');
|
|
$('.contextMenu').hide();
|
|
// Callback
|
|
if (callback) callback($(this).attr('href').substr(1), $(srcElement), { x: x - offset.left, y: y - offset.top, docX: x, docY: y });
|
|
return false;
|
|
});
|
|
|
|
// Hide bindings
|
|
setTimeout(function () {
|
|
// Delay for Mozilla
|
|
doc.click(function () {
|
|
doc.unbind('click').unbind('keypress');
|
|
menu.fadeOut(o.outSpeed);
|
|
return false;
|
|
});
|
|
}, 0);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Disable text selection
|
|
if ($.browser.mozilla) {
|
|
$('#' + o.menu).each(function () {
|
|
$(this).css({ MozUserSelect: 'none' });
|
|
});
|
|
} else if ($.browser.msie) {
|
|
$('#' + o.menu).each(function () {
|
|
$(this).bind('selectstart.disableTextSelect', function () {
|
|
return false;
|
|
});
|
|
});
|
|
} else {
|
|
$('#' + o.menu).each(function () {
|
|
$(this).bind('mousedown.disableTextSelect', function () {
|
|
return false;
|
|
});
|
|
});
|
|
}
|
|
// Disable browser context menu (requires both selectors to work in IE/Safari + FF/Chrome)
|
|
$(el).add($('UL.contextMenu')).bind('contextmenu', function () {
|
|
return false;
|
|
});
|
|
});
|
|
return $(this);
|
|
},
|
|
|
|
|
|
// Disable context menu items on the fly
|
|
disableContextMenuItems: function disableContextMenuItems(o) {
|
|
if (o === undefined) {
|
|
// Disable all
|
|
$(this).find('LI').addClass('disabled');
|
|
return $(this);
|
|
}
|
|
$(this).each(function () {
|
|
if (o !== undefined) {
|
|
var d = o.split(',');
|
|
for (var i = 0; i < d.length; i++) {
|
|
$(this).find('A[href="' + d[i] + '"]').parent().addClass('disabled');
|
|
}
|
|
}
|
|
});
|
|
return $(this);
|
|
},
|
|
|
|
|
|
// Enable context menu items on the fly
|
|
enableContextMenuItems: function enableContextMenuItems(o) {
|
|
if (o === undefined) {
|
|
// Enable all
|
|
$(this).find('LI.disabled').removeClass('disabled');
|
|
return $(this);
|
|
}
|
|
$(this).each(function () {
|
|
if (o !== undefined) {
|
|
var d = o.split(',');
|
|
for (var i = 0; i < d.length; i++) {
|
|
$(this).find('A[href="' + d[i] + '"]').parent().removeClass('disabled');
|
|
}
|
|
}
|
|
});
|
|
return $(this);
|
|
},
|
|
|
|
|
|
// Disable context menu(s)
|
|
disableContextMenu: function disableContextMenu() {
|
|
$(this).each(function () {
|
|
$(this).addClass('disabled');
|
|
});
|
|
return $(this);
|
|
},
|
|
|
|
|
|
// Enable context menu(s)
|
|
enableContextMenu: function enableContextMenu() {
|
|
$(this).each(function () {
|
|
$(this).removeClass('disabled');
|
|
});
|
|
return $(this);
|
|
},
|
|
|
|
|
|
// Destroy context menu(s)
|
|
destroyContextMenu: function destroyContextMenu() {
|
|
// Destroy specified context menus
|
|
$(this).each(function () {
|
|
// Disable action
|
|
$(this).unbind('mousedown').unbind('mouseup');
|
|
});
|
|
return $(this);
|
|
}
|
|
});
|
|
return $;
|
|
}
|
|
|
|
/*
|
|
* jPicker (Adapted from version 1.1.6)
|
|
*
|
|
* jQuery Plugin for Photoshop style color picker
|
|
*
|
|
* Copyright (c) 2010 Christopher T. Tillman
|
|
* Digital Magic Productions, Inc. (http://www.digitalmagicpro.com/)
|
|
* MIT style license, FREE to use, alter, copy, sell, and especially ENHANCE
|
|
*
|
|
* Painstakingly ported from John Dyers' excellent work on his own color picker based on the Prototype framework.
|
|
*
|
|
* John Dyers' website: (http://johndyer.name)
|
|
* Color Picker page: (http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-Color-Picker.aspx)
|
|
*
|
|
*/
|
|
|
|
Math.precision = function (value, precision) {
|
|
if (precision === undefined) precision = 0;
|
|
return Math.round(value * Math.pow(10, precision)) / Math.pow(10, precision);
|
|
};
|
|
|
|
var jPicker = function jPicker($) {
|
|
if (!$.loadingStylesheets) {
|
|
$.loadingStylesheets = [];
|
|
}
|
|
var stylesheet = 'jgraduate/css/jPicker.css';
|
|
if (!$.loadingStylesheets.includes(stylesheet)) {
|
|
$.loadingStylesheets.push(stylesheet);
|
|
}
|
|
/**
|
|
* Encapsulate slider functionality for the ColorMap and ColorBar -
|
|
* could be useful to use a jQuery UI draggable for this with certain extensions
|
|
*/
|
|
function Slider(bar, options) {
|
|
var $this = this;
|
|
function fireChangeEvents(context) {
|
|
for (var i = 0; i < changeEvents.length; i++) {
|
|
changeEvents[i].call($this, $this, context);
|
|
}
|
|
}
|
|
// bind the mousedown to the bar not the arrow for quick snapping to the clicked location
|
|
function mouseDown(e) {
|
|
var off = bar.offset();
|
|
offset = { l: off.left | 0, t: off.top | 0 };
|
|
clearTimeout(timeout);
|
|
// using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run
|
|
timeout = setTimeout(function () {
|
|
setValuesFromMousePosition.call($this, e);
|
|
}, 0);
|
|
// Bind mousemove and mouseup event to the document so it responds when dragged of of the bar - we will unbind these when on mouseup to save processing
|
|
$(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp);
|
|
e.preventDefault(); // don't try to select anything or drag the image to the desktop
|
|
}
|
|
// set the values as the mouse moves
|
|
function mouseMove(e) {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(function () {
|
|
setValuesFromMousePosition.call($this, e);
|
|
}, 0);
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
// unbind the document events - they aren't needed when not dragging
|
|
function mouseUp(e) {
|
|
$(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
// calculate mouse position and set value within the current range
|
|
function setValuesFromMousePosition(e) {
|
|
var barW = bar.w,
|
|
// local copies for YUI compressor
|
|
barH = bar.h;
|
|
var locX = e.pageX - offset.l,
|
|
locY = e.pageY - offset.t;
|
|
// keep the arrow within the bounds of the bar
|
|
if (locX < 0) locX = 0;else if (locX > barW) locX = barW;
|
|
if (locY < 0) locY = 0;else if (locY > barH) locY = barH;
|
|
val.call($this, 'xy', { x: locX / barW * rangeX + minX, y: locY / barH * rangeY + minY });
|
|
}
|
|
function draw() {
|
|
var barW = bar.w,
|
|
barH = bar.h,
|
|
arrowW = arrow.w,
|
|
arrowH = arrow.h;
|
|
var arrowOffsetX = 0,
|
|
arrowOffsetY = 0;
|
|
setTimeout(function () {
|
|
if (rangeX > 0) {
|
|
// range is greater than zero
|
|
// constrain to bounds
|
|
if (x === maxX) arrowOffsetX = barW;else arrowOffsetX = x / rangeX * barW | 0;
|
|
}
|
|
if (rangeY > 0) {
|
|
// range is greater than zero
|
|
// constrain to bounds
|
|
if (y === maxY) arrowOffsetY = barH;else arrowOffsetY = y / rangeY * barH | 0;
|
|
}
|
|
// if arrow width is greater than bar width, center arrow and prevent horizontal dragging
|
|
if (arrowW >= barW) arrowOffsetX = (barW >> 1) - (arrowW >> 1); // number >> 1 - superfast bitwise divide by two and truncate (move bits over one bit discarding lowest)
|
|
else arrowOffsetX -= arrowW >> 1;
|
|
// if arrow height is greater than bar height, center arrow and prevent vertical dragging
|
|
if (arrowH >= barH) arrowOffsetY = (barH >> 1) - (arrowH >> 1);else arrowOffsetY -= arrowH >> 1;
|
|
// set the arrow position based on these offsets
|
|
arrow.css({ left: arrowOffsetX + 'px', top: arrowOffsetY + 'px' });
|
|
}, 0);
|
|
}
|
|
function val(name, value, context) {
|
|
var set$$1 = value !== undefined;
|
|
if (!set$$1) {
|
|
if (name === undefined || name == null) name = 'xy';
|
|
switch (name.toLowerCase()) {
|
|
case 'x':
|
|
return x;
|
|
case 'y':
|
|
return y;
|
|
case 'xy':
|
|
default:
|
|
return { x: x, y: y };
|
|
}
|
|
}
|
|
if (context != null && context === $this) return;
|
|
var changed = false;
|
|
|
|
var newX = void 0,
|
|
newY = void 0;
|
|
if (name == null) name = 'xy';
|
|
switch (name.toLowerCase()) {
|
|
case 'x':
|
|
newX = value && (value.x && value.x | 0 || value | 0) || 0;
|
|
break;
|
|
case 'y':
|
|
newY = value && (value.y && value.y | 0 || value | 0) || 0;
|
|
break;
|
|
case 'xy':
|
|
default:
|
|
newX = value && value.x && value.x | 0 || 0;
|
|
newY = value && value.y && value.y | 0 || 0;
|
|
break;
|
|
}
|
|
if (newX != null) {
|
|
if (newX < minX) newX = minX;else if (newX > maxX) newX = maxX;
|
|
if (x !== newX) {
|
|
x = newX;
|
|
changed = true;
|
|
}
|
|
}
|
|
if (newY != null) {
|
|
if (newY < minY) newY = minY;else if (newY > maxY) newY = maxY;
|
|
if (y !== newY) {
|
|
y = newY;
|
|
changed = true;
|
|
}
|
|
}
|
|
changed && fireChangeEvents.call($this, context || $this);
|
|
}
|
|
function range(name, value) {
|
|
var set$$1 = value !== undefined;
|
|
if (!set$$1) {
|
|
if (name === undefined || name == null) name = 'all';
|
|
switch (name.toLowerCase()) {
|
|
case 'minx':
|
|
return minX;
|
|
case 'maxx':
|
|
return maxX;
|
|
case 'rangex':
|
|
return { minX: minX, maxX: maxX, rangeX: rangeX };
|
|
case 'miny':
|
|
return minY;
|
|
case 'maxy':
|
|
return maxY;
|
|
case 'rangey':
|
|
return { minY: minY, maxY: maxY, rangeY: rangeY };
|
|
case 'all':
|
|
default:
|
|
return { minX: minX, maxX: maxX, rangeX: rangeX, minY: minY, maxY: maxY, rangeY: rangeY };
|
|
}
|
|
}
|
|
var // changed = false,
|
|
newMinX = void 0,
|
|
newMaxX = void 0,
|
|
newMinY = void 0,
|
|
newMaxY = void 0;
|
|
if (name == null) name = 'all';
|
|
switch (name.toLowerCase()) {
|
|
case 'minx':
|
|
newMinX = value && (value.minX && value.minX | 0 || value | 0) || 0;
|
|
break;
|
|
case 'maxx':
|
|
newMaxX = value && (value.maxX && value.maxX | 0 || value | 0) || 0;
|
|
break;
|
|
case 'rangex':
|
|
newMinX = value && value.minX && value.minX | 0 || 0;
|
|
newMaxX = value && value.maxX && value.maxX | 0 || 0;
|
|
break;
|
|
case 'miny':
|
|
newMinY = value && (value.minY && value.minY | 0 || value | 0) || 0;
|
|
break;
|
|
case 'maxy':
|
|
newMaxY = value && (value.maxY && value.maxY | 0 || value | 0) || 0;
|
|
break;
|
|
case 'rangey':
|
|
newMinY = value && value.minY && value.minY | 0 || 0;
|
|
newMaxY = value && value.maxY && value.maxY | 0 || 0;
|
|
break;
|
|
case 'all':
|
|
default:
|
|
newMinX = value && value.minX && value.minX | 0 || 0;
|
|
newMaxX = value && value.maxX && value.maxX | 0 || 0;
|
|
newMinY = value && value.minY && value.minY | 0 || 0;
|
|
newMaxY = value && value.maxY && value.maxY | 0 || 0;
|
|
break;
|
|
}
|
|
if (newMinX != null && minX !== newMinX) {
|
|
minX = newMinX;
|
|
rangeX = maxX - minX;
|
|
}
|
|
if (newMaxX != null && maxX !== newMaxX) {
|
|
maxX = newMaxX;
|
|
rangeX = maxX - minX;
|
|
}
|
|
if (newMinY != null && minY !== newMinY) {
|
|
minY = newMinY;
|
|
rangeY = maxY - minY;
|
|
}
|
|
if (newMaxY != null && maxY !== newMaxY) {
|
|
maxY = newMaxY;
|
|
rangeY = maxY - minY;
|
|
}
|
|
}
|
|
function bind(callback) {
|
|
if (typeof callback === 'function') changeEvents.push(callback);
|
|
}
|
|
function unbind(callback) {
|
|
if (typeof callback !== 'function') return;
|
|
var i = void 0;
|
|
while (i = changeEvents.includes(callback)) {
|
|
changeEvents.splice(i, 1);
|
|
}
|
|
}
|
|
function destroy() {
|
|
// unbind all possible events and null objects
|
|
$(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
|
|
bar.unbind('mousedown', mouseDown);
|
|
bar = null;
|
|
arrow = null;
|
|
changeEvents = null;
|
|
}
|
|
var offset = void 0,
|
|
timeout = void 0,
|
|
x = 0,
|
|
y = 0,
|
|
minX = 0,
|
|
maxX = 100,
|
|
rangeX = 100,
|
|
minY = 0,
|
|
maxY = 100,
|
|
rangeY = 100,
|
|
arrow = bar.find('img:first'),
|
|
// the arrow image to drag
|
|
changeEvents = [];
|
|
|
|
$.extend(true, $this, // public properties, methods, and event bindings - these we need to access from other controls
|
|
{
|
|
val: val,
|
|
range: range,
|
|
bind: bind,
|
|
unbind: unbind,
|
|
destroy: destroy
|
|
});
|
|
// initialize this control
|
|
arrow.src = options.arrow && options.arrow.image;
|
|
arrow.w = options.arrow && options.arrow.width || arrow.width();
|
|
arrow.h = options.arrow && options.arrow.height || arrow.height();
|
|
bar.w = options.map && options.map.width || bar.width();
|
|
bar.h = options.map && options.map.height || bar.height();
|
|
// bind mousedown event
|
|
bar.bind('mousedown', mouseDown);
|
|
bind.call($this, draw);
|
|
}
|
|
// controls for all the input elements for the typing in color values
|
|
function ColorValuePicker(picker, color, bindedHex, alphaPrecision) {
|
|
var $this = this; // private properties and methods
|
|
var inputs = picker.find('td.Text input');
|
|
// input box key down - use arrows to alter color
|
|
function keyDown(e) {
|
|
if (e.target.value === '' && e.target !== hex.get(0) && (bindedHex != null && e.target !== bindedHex.get(0) || bindedHex == null)) return;
|
|
if (!validateKey(e)) return e;
|
|
switch (e.target) {
|
|
case red.get(0):
|
|
switch (e.keyCode) {
|
|
case 38:
|
|
red.val(setValueInRange.call($this, (red.val() << 0) + 1, 0, 255));
|
|
color.val('r', red.val(), e.target);
|
|
return false;
|
|
case 40:
|
|
red.val(setValueInRange.call($this, (red.val() << 0) - 1, 0, 255));
|
|
color.val('r', red.val(), e.target);
|
|
return false;
|
|
}
|
|
break;
|
|
case green.get(0):
|
|
switch (e.keyCode) {
|
|
case 38:
|
|
green.val(setValueInRange.call($this, (green.val() << 0) + 1, 0, 255));
|
|
color.val('g', green.val(), e.target);
|
|
return false;
|
|
case 40:
|
|
green.val(setValueInRange.call($this, (green.val() << 0) - 1, 0, 255));
|
|
color.val('g', green.val(), e.target);
|
|
return false;
|
|
}
|
|
break;
|
|
case blue.get(0):
|
|
switch (e.keyCode) {
|
|
case 38:
|
|
blue.val(setValueInRange.call($this, (blue.val() << 0) + 1, 0, 255));
|
|
color.val('b', blue.val(), e.target);
|
|
return false;
|
|
case 40:
|
|
blue.val(setValueInRange.call($this, (blue.val() << 0) - 1, 0, 255));
|
|
color.val('b', blue.val(), e.target);
|
|
return false;
|
|
}
|
|
break;
|
|
case alpha && alpha.get(0):
|
|
switch (e.keyCode) {
|
|
case 38:
|
|
alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) + 1, 0, 100));
|
|
color.val('a', Math.precision(alpha.val() * 255 / 100, alphaPrecision), e.target);
|
|
return false;
|
|
case 40:
|
|
alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) - 1, 0, 100));
|
|
color.val('a', Math.precision(alpha.val() * 255 / 100, alphaPrecision), e.target);
|
|
return false;
|
|
}
|
|
break;
|
|
case hue.get(0):
|
|
switch (e.keyCode) {
|
|
case 38:
|
|
hue.val(setValueInRange.call($this, (hue.val() << 0) + 1, 0, 360));
|
|
color.val('h', hue.val(), e.target);
|
|
return false;
|
|
case 40:
|
|
hue.val(setValueInRange.call($this, (hue.val() << 0) - 1, 0, 360));
|
|
color.val('h', hue.val(), e.target);
|
|
return false;
|
|
}
|
|
break;
|
|
case saturation.get(0):
|
|
switch (e.keyCode) {
|
|
case 38:
|
|
saturation.val(setValueInRange.call($this, (saturation.val() << 0) + 1, 0, 100));
|
|
color.val('s', saturation.val(), e.target);
|
|
return false;
|
|
case 40:
|
|
saturation.val(setValueInRange.call($this, (saturation.val() << 0) - 1, 0, 100));
|
|
color.val('s', saturation.val(), e.target);
|
|
return false;
|
|
}
|
|
break;
|
|
case value.get(0):
|
|
switch (e.keyCode) {
|
|
case 38:
|
|
value.val(setValueInRange.call($this, (value.val() << 0) + 1, 0, 100));
|
|
color.val('v', value.val(), e.target);
|
|
return false;
|
|
case 40:
|
|
value.val(setValueInRange.call($this, (value.val() << 0) - 1, 0, 100));
|
|
color.val('v', value.val(), e.target);
|
|
return false;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
// input box key up - validate value and set color
|
|
function keyUp(e) {
|
|
if (e.target.value === '' && e.target !== hex.get(0) && (bindedHex != null && e.target !== bindedHex.get(0) || bindedHex == null)) return;
|
|
if (!validateKey(e)) return e;
|
|
switch (e.target) {
|
|
case red.get(0):
|
|
red.val(setValueInRange.call($this, red.val(), 0, 255));
|
|
color.val('r', red.val(), e.target);
|
|
break;
|
|
case green.get(0):
|
|
green.val(setValueInRange.call($this, green.val(), 0, 255));
|
|
color.val('g', green.val(), e.target);
|
|
break;
|
|
case blue.get(0):
|
|
blue.val(setValueInRange.call($this, blue.val(), 0, 255));
|
|
color.val('b', blue.val(), e.target);
|
|
break;
|
|
case alpha && alpha.get(0):
|
|
alpha.val(setValueInRange.call($this, alpha.val(), 0, 100));
|
|
color.val('a', Math.precision(alpha.val() * 255 / 100, alphaPrecision), e.target);
|
|
break;
|
|
case hue.get(0):
|
|
hue.val(setValueInRange.call($this, hue.val(), 0, 360));
|
|
color.val('h', hue.val(), e.target);
|
|
break;
|
|
case saturation.get(0):
|
|
saturation.val(setValueInRange.call($this, saturation.val(), 0, 100));
|
|
color.val('s', saturation.val(), e.target);
|
|
break;
|
|
case value.get(0):
|
|
value.val(setValueInRange.call($this, value.val(), 0, 100));
|
|
color.val('v', value.val(), e.target);
|
|
break;
|
|
case hex.get(0):
|
|
hex.val(hex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
|
|
bindedHex && bindedHex.val(hex.val());
|
|
color.val('hex', hex.val() !== '' ? hex.val() : null, e.target);
|
|
break;
|
|
case bindedHex && bindedHex.get(0):
|
|
bindedHex.val(bindedHex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
|
|
hex.val(bindedHex.val());
|
|
color.val('hex', bindedHex.val() !== '' ? bindedHex.val() : null, e.target);
|
|
break;
|
|
case ahex && ahex.get(0):
|
|
ahex.val(ahex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 2));
|
|
color.val('a', ahex.val() != null ? parseInt(ahex.val(), 16) : null, e.target);
|
|
break;
|
|
}
|
|
}
|
|
// input box blur - reset to original if value empty
|
|
function blur(e) {
|
|
if (color.val() != null) {
|
|
switch (e.target) {
|
|
case red.get(0):
|
|
red.val(color.val('r'));break;
|
|
case green.get(0):
|
|
green.val(color.val('g'));break;
|
|
case blue.get(0):
|
|
blue.val(color.val('b'));break;
|
|
case alpha && alpha.get(0):
|
|
alpha.val(Math.precision(color.val('a') * 100 / 255, alphaPrecision));break;
|
|
case hue.get(0):
|
|
hue.val(color.val('h'));break;
|
|
case saturation.get(0):
|
|
saturation.val(color.val('s'));break;
|
|
case value.get(0):
|
|
value.val(color.val('v'));break;
|
|
case hex.get(0):
|
|
case bindedHex && bindedHex.get(0):
|
|
hex.val(color.val('hex'));
|
|
bindedHex && bindedHex.val(color.val('hex'));
|
|
break;
|
|
case ahex && ahex.get(0):
|
|
ahex.val(color.val('ahex').substring(6));break;
|
|
}
|
|
}
|
|
}
|
|
function validateKey(e) {
|
|
switch (e.keyCode) {
|
|
case 9:
|
|
case 16:
|
|
case 29:
|
|
case 37:
|
|
case 39:
|
|
return false;
|
|
case 'c'.charCodeAt():
|
|
case 'v'.charCodeAt():
|
|
if (e.ctrlKey) return false;
|
|
}
|
|
return true;
|
|
}
|
|
// constrain value within range
|
|
function setValueInRange(value, min, max) {
|
|
if (value === '' || isNaN(value)) return min;
|
|
if (value > max) return max;
|
|
if (value < min) return min;
|
|
return value;
|
|
}
|
|
function colorChanged(ui, context) {
|
|
var all = ui.val('all');
|
|
if (context !== red.get(0)) red.val(all != null ? all.r : '');
|
|
if (context !== green.get(0)) green.val(all != null ? all.g : '');
|
|
if (context !== blue.get(0)) blue.val(all != null ? all.b : '');
|
|
if (alpha && context !== alpha.get(0)) alpha.val(all != null ? Math.precision(all.a * 100 / 255, alphaPrecision) : '');
|
|
if (context !== hue.get(0)) hue.val(all != null ? all.h : '');
|
|
if (context !== saturation.get(0)) saturation.val(all != null ? all.s : '');
|
|
if (context !== value.get(0)) value.val(all != null ? all.v : '');
|
|
if (context !== hex.get(0) && (bindedHex && context !== bindedHex.get(0) || !bindedHex)) hex.val(all != null ? all.hex : '');
|
|
if (bindedHex && context !== bindedHex.get(0) && context !== hex.get(0)) bindedHex.val(all != null ? all.hex : '');
|
|
if (ahex && context !== ahex.get(0)) ahex.val(all != null ? all.ahex.substring(6) : '');
|
|
}
|
|
function destroy() {
|
|
// unbind all events and null objects
|
|
red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).unbind('keyup', keyUp).unbind('blur', blur);
|
|
red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).unbind('keydown', keyDown);
|
|
color.unbind(colorChanged);
|
|
red = null;
|
|
green = null;
|
|
blue = null;
|
|
alpha = null;
|
|
hue = null;
|
|
saturation = null;
|
|
value = null;
|
|
hex = null;
|
|
ahex = null;
|
|
}
|
|
var red = inputs.eq(3),
|
|
green = inputs.eq(4),
|
|
blue = inputs.eq(5),
|
|
alpha = inputs.length > 7 ? inputs.eq(6) : null,
|
|
hue = inputs.eq(0),
|
|
saturation = inputs.eq(1),
|
|
value = inputs.eq(2),
|
|
hex = inputs.eq(inputs.length > 7 ? 7 : 6),
|
|
ahex = inputs.length > 7 ? inputs.eq(8) : null;
|
|
$.extend(true, $this, {
|
|
// public properties and methods
|
|
destroy: destroy
|
|
});
|
|
red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).bind('keyup', keyUp).bind('blur', blur);
|
|
red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).bind('keydown', keyDown);
|
|
color.bind(colorChanged);
|
|
}
|
|
|
|
$.jPicker = {
|
|
List: [], // array holding references to each active instance of the control
|
|
// color object - we will be able to assign by any color space type or retrieve any color space info
|
|
// we want this public so we can optionally assign new color objects to initial values using inputs other than a string hex value (also supported)
|
|
Color: function Color(init) {
|
|
classCallCheck(this, Color);
|
|
|
|
var $this = this;
|
|
function fireChangeEvents(context) {
|
|
for (var i = 0; i < changeEvents.length; i++) {
|
|
changeEvents[i].call($this, $this, context);
|
|
}
|
|
}
|
|
function val(name, value, context) {
|
|
// Kind of ugly
|
|
var set$$1 = Boolean(value);
|
|
if (set$$1 && value.ahex === '') value.ahex = '00000000';
|
|
if (!set$$1) {
|
|
if (name === undefined || name == null || name === '') name = 'all';
|
|
if (r == null) return null;
|
|
switch (name.toLowerCase()) {
|
|
case 'ahex':
|
|
return ColorMethods.rgbaToHex({ r: r, g: g, b: b, a: a });
|
|
case 'hex':
|
|
return val('ahex').substring(0, 6);
|
|
case 'all':
|
|
return { r: r, g: g, b: b, a: a, h: h, s: s, v: v, hex: val.call($this, 'hex'), ahex: val.call($this, 'ahex') };
|
|
default:
|
|
var ret = {};
|
|
for (var i = 0; i < name.length; i++) {
|
|
switch (name.charAt(i)) {
|
|
case 'r':
|
|
if (name.length === 1) ret = r;else ret.r = r;
|
|
break;
|
|
case 'g':
|
|
if (name.length === 1) ret = g;else ret.g = g;
|
|
break;
|
|
case 'b':
|
|
if (name.length === 1) ret = b;else ret.b = b;
|
|
break;
|
|
case 'a':
|
|
if (name.length === 1) ret = a;else ret.a = a;
|
|
break;
|
|
case 'h':
|
|
if (name.length === 1) ret = h;else ret.h = h;
|
|
break;
|
|
case 's':
|
|
if (name.length === 1) ret = s;else ret.s = s;
|
|
break;
|
|
case 'v':
|
|
if (name.length === 1) ret = v;else ret.v = v;
|
|
break;
|
|
}
|
|
}
|
|
return !name.length ? val.call($this, 'all') : ret;
|
|
}
|
|
}
|
|
if (context != null && context === $this) return;
|
|
if (name == null) name = '';
|
|
|
|
var changed = false;
|
|
if (value == null) {
|
|
if (r != null) {
|
|
r = null;
|
|
changed = true;
|
|
}
|
|
if (g != null) {
|
|
g = null;
|
|
changed = true;
|
|
}
|
|
if (b != null) {
|
|
b = null;
|
|
changed = true;
|
|
}
|
|
if (a != null) {
|
|
a = null;
|
|
changed = true;
|
|
}
|
|
if (h != null) {
|
|
h = null;
|
|
changed = true;
|
|
}
|
|
if (s != null) {
|
|
s = null;
|
|
changed = true;
|
|
}
|
|
if (v != null) {
|
|
v = null;
|
|
changed = true;
|
|
}
|
|
changed && fireChangeEvents.call($this, context || $this);
|
|
return;
|
|
}
|
|
switch (name.toLowerCase()) {
|
|
case 'ahex':
|
|
case 'hex':
|
|
var _ret = ColorMethods.hexToRgba(value && (value.ahex || value.hex) || value || 'none');
|
|
val.call($this, 'rgba', { r: _ret.r, g: _ret.g, b: _ret.b, a: name === 'ahex' ? _ret.a : a != null ? a : 255 }, context);
|
|
break;
|
|
default:
|
|
if (value && (value.ahex != null || value.hex != null)) {
|
|
val.call($this, 'ahex', value.ahex || value.hex || '00000000', context);
|
|
return;
|
|
}
|
|
var newV = {};
|
|
var rgb = false,
|
|
hsv = false;
|
|
if (value.r !== undefined && !name.includes('r')) name += 'r';
|
|
if (value.g !== undefined && !name.includes('g')) name += 'g';
|
|
if (value.b !== undefined && !name.includes('b')) name += 'b';
|
|
if (value.a !== undefined && !name.includes('a')) name += 'a';
|
|
if (value.h !== undefined && !name.includes('h')) name += 'h';
|
|
if (value.s !== undefined && !name.includes('s')) name += 's';
|
|
if (value.v !== undefined && !name.includes('v')) name += 'v';
|
|
for (var _i = 0; _i < name.length; _i++) {
|
|
switch (name.charAt(_i)) {
|
|
case 'r':
|
|
if (hsv) continue;
|
|
rgb = true;
|
|
newV.r = value && value.r && value.r | 0 || value && value | 0 || 0;
|
|
if (newV.r < 0) newV.r = 0;else if (newV.r > 255) newV.r = 255;
|
|
if (r !== newV.r) {
|
|
r = newV.r;
|
|
|
|
changed = true;
|
|
}
|
|
break;
|
|
case 'g':
|
|
if (hsv) continue;
|
|
rgb = true;
|
|
newV.g = value && value.g && value.g | 0 || value && value | 0 || 0;
|
|
if (newV.g < 0) newV.g = 0;else if (newV.g > 255) newV.g = 255;
|
|
if (g !== newV.g) {
|
|
g = newV.g;
|
|
|
|
changed = true;
|
|
}
|
|
break;
|
|
case 'b':
|
|
if (hsv) continue;
|
|
rgb = true;
|
|
newV.b = value && value.b && value.b | 0 || value && value | 0 || 0;
|
|
if (newV.b < 0) newV.b = 0;else if (newV.b > 255) newV.b = 255;
|
|
if (b !== newV.b) {
|
|
b = newV.b;
|
|
|
|
changed = true;
|
|
}
|
|
break;
|
|
case 'a':
|
|
newV.a = value && value.a != null ? value.a | 0 : value != null ? value | 0 : 255;
|
|
if (newV.a < 0) newV.a = 0;else if (newV.a > 255) newV.a = 255;
|
|
if (a !== newV.a) {
|
|
a = newV.a;
|
|
|
|
changed = true;
|
|
}
|
|
break;
|
|
case 'h':
|
|
if (rgb) continue;
|
|
hsv = true;
|
|
newV.h = value && value.h && value.h | 0 || value && value | 0 || 0;
|
|
if (newV.h < 0) newV.h = 0;else if (newV.h > 360) newV.h = 360;
|
|
if (h !== newV.h) {
|
|
h = newV.h;
|
|
|
|
changed = true;
|
|
}
|
|
break;
|
|
case 's':
|
|
if (rgb) continue;
|
|
hsv = true;
|
|
newV.s = value && value.s != null ? value.s | 0 : value != null ? value | 0 : 100;
|
|
if (newV.s < 0) newV.s = 0;else if (newV.s > 100) newV.s = 100;
|
|
if (s !== newV.s) {
|
|
s = newV.s;
|
|
|
|
changed = true;
|
|
}
|
|
break;
|
|
case 'v':
|
|
if (rgb) continue;
|
|
hsv = true;
|
|
newV.v = value && value.v != null ? value.v | 0 : value != null ? value | 0 : 100;
|
|
if (newV.v < 0) newV.v = 0;else if (newV.v > 100) newV.v = 100;
|
|
if (v !== newV.v) {
|
|
v = newV.v;
|
|
|
|
changed = true;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
if (changed) {
|
|
if (rgb) {
|
|
r = r || 0;
|
|
g = g || 0;
|
|
b = b || 0;
|
|
var _ret2 = ColorMethods.rgbToHsv({ r: r, g: g, b: b });
|
|
h = _ret2.h;
|
|
s = _ret2.s;
|
|
v = _ret2.v;
|
|
} else if (hsv) {
|
|
h = h || 0;
|
|
s = s != null ? s : 100;
|
|
v = v != null ? v : 100;
|
|
var _ret3 = ColorMethods.hsvToRgb({ h: h, s: s, v: v });
|
|
r = _ret3.r;
|
|
g = _ret3.g;
|
|
b = _ret3.b;
|
|
}
|
|
a = a != null ? a : 255;
|
|
fireChangeEvents.call($this, context || $this);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
function bind(callback) {
|
|
if (typeof callback === 'function') changeEvents.push(callback);
|
|
}
|
|
function unbind(callback) {
|
|
if (typeof callback !== 'function') return;
|
|
var i = void 0;
|
|
while (i = changeEvents.includes(callback)) {
|
|
changeEvents.splice(i, 1);
|
|
}
|
|
}
|
|
function destroy() {
|
|
changeEvents = null;
|
|
}
|
|
var r = void 0,
|
|
g = void 0,
|
|
b = void 0,
|
|
a = void 0,
|
|
h = void 0,
|
|
s = void 0,
|
|
v = void 0,
|
|
changeEvents = [];
|
|
|
|
$.extend(true, $this, {
|
|
// public properties and methods
|
|
val: val,
|
|
bind: bind,
|
|
unbind: unbind,
|
|
destroy: destroy
|
|
});
|
|
if (init) {
|
|
if (init.ahex != null) {
|
|
val('ahex', init);
|
|
} else if (init.hex != null) {
|
|
val((init.a != null ? 'a' : '') + 'hex', init.a != null ? { ahex: init.hex + ColorMethods.intToHex(init.a) } : init);
|
|
} else if (init.r != null && init.g != null && init.b != null) {
|
|
val('rgb' + (init.a != null ? 'a' : ''), init);
|
|
} else if (init.h != null && init.s != null && init.v != null) {
|
|
val('hsv' + (init.a != null ? 'a' : ''), init);
|
|
}
|
|
}
|
|
},
|
|
// color conversion methods - make public to give use to external scripts
|
|
ColorMethods: {
|
|
hexToRgba: function hexToRgba(hex) {
|
|
if (hex === '' || hex === 'none') return { r: null, g: null, b: null, a: null };
|
|
hex = this.validateHex(hex);
|
|
var r = '00',
|
|
g = '00',
|
|
b = '00',
|
|
a = '255';
|
|
if (hex.length === 6) hex += 'ff';
|
|
if (hex.length > 6) {
|
|
r = hex.substring(0, 2);
|
|
g = hex.substring(2, 4);
|
|
b = hex.substring(4, 6);
|
|
a = hex.substring(6, hex.length);
|
|
} else {
|
|
if (hex.length > 4) {
|
|
r = hex.substring(4, hex.length);
|
|
hex = hex.substring(0, 4);
|
|
}
|
|
if (hex.length > 2) {
|
|
g = hex.substring(2, hex.length);
|
|
hex = hex.substring(0, 2);
|
|
}
|
|
if (hex.length > 0) b = hex.substring(0, hex.length);
|
|
}
|
|
return { r: this.hexToInt(r), g: this.hexToInt(g), b: this.hexToInt(b), a: this.hexToInt(a) };
|
|
},
|
|
validateHex: function validateHex(hex) {
|
|
// if (typeof hex === "object") return "";
|
|
hex = hex.toLowerCase().replace(/[^a-f0-9]/g, '');
|
|
if (hex.length > 8) hex = hex.substring(0, 8);
|
|
return hex;
|
|
},
|
|
rgbaToHex: function rgbaToHex(rgba) {
|
|
return this.intToHex(rgba.r) + this.intToHex(rgba.g) + this.intToHex(rgba.b) + this.intToHex(rgba.a);
|
|
},
|
|
intToHex: function intToHex(dec) {
|
|
var result = (dec | 0).toString(16);
|
|
if (result.length === 1) result = '0' + result;
|
|
return result.toLowerCase();
|
|
},
|
|
hexToInt: function hexToInt(hex) {
|
|
return parseInt(hex, 16);
|
|
},
|
|
rgbToHsv: function rgbToHsv(rgb) {
|
|
var r = rgb.r / 255,
|
|
g = rgb.g / 255,
|
|
b = rgb.b / 255,
|
|
hsv = { h: 0, s: 0, v: 0 };
|
|
var min = 0,
|
|
max = 0;
|
|
if (r >= g && r >= b) {
|
|
max = r;
|
|
min = g > b ? b : g;
|
|
} else if (g >= b && g >= r) {
|
|
max = g;
|
|
min = r > b ? b : r;
|
|
} else {
|
|
max = b;
|
|
min = g > r ? r : g;
|
|
}
|
|
hsv.v = max;
|
|
hsv.s = max ? (max - min) / max : 0;
|
|
var delta = void 0;
|
|
if (!hsv.s) hsv.h = 0;else {
|
|
delta = max - min;
|
|
if (r === max) hsv.h = (g - b) / delta;else if (g === max) hsv.h = 2 + (b - r) / delta;else hsv.h = 4 + (r - g) / delta;
|
|
hsv.h = parseInt(hsv.h * 60);
|
|
if (hsv.h < 0) hsv.h += 360;
|
|
}
|
|
hsv.s = hsv.s * 100 | 0;
|
|
hsv.v = hsv.v * 100 | 0;
|
|
return hsv;
|
|
},
|
|
hsvToRgb: function hsvToRgb(hsv) {
|
|
var rgb = { r: 0, g: 0, b: 0, a: 100 };
|
|
var h = hsv.h,
|
|
s = hsv.s,
|
|
v = hsv.v;
|
|
|
|
if (s === 0) {
|
|
if (v === 0) rgb.r = rgb.g = rgb.b = 0;else rgb.r = rgb.g = rgb.b = v * 255 / 100 | 0;
|
|
} else {
|
|
if (h === 360) h = 0;
|
|
h /= 60;
|
|
s = s / 100;
|
|
v = v / 100;
|
|
var i = h | 0,
|
|
f = h - i,
|
|
p = v * (1 - s),
|
|
q = v * (1 - s * f),
|
|
t = v * (1 - s * (1 - f));
|
|
switch (i) {
|
|
case 0:
|
|
rgb.r = v;
|
|
rgb.g = t;
|
|
rgb.b = p;
|
|
break;
|
|
case 1:
|
|
rgb.r = q;
|
|
rgb.g = v;
|
|
rgb.b = p;
|
|
break;
|
|
case 2:
|
|
rgb.r = p;
|
|
rgb.g = v;
|
|
rgb.b = t;
|
|
break;
|
|
case 3:
|
|
rgb.r = p;
|
|
rgb.g = q;
|
|
rgb.b = v;
|
|
break;
|
|
case 4:
|
|
rgb.r = t;
|
|
rgb.g = p;
|
|
rgb.b = v;
|
|
break;
|
|
case 5:
|
|
rgb.r = v;
|
|
rgb.g = p;
|
|
rgb.b = q;
|
|
break;
|
|
}
|
|
rgb.r = rgb.r * 255 | 0;
|
|
rgb.g = rgb.g * 255 | 0;
|
|
rgb.b = rgb.b * 255 | 0;
|
|
}
|
|
return rgb;
|
|
}
|
|
}
|
|
};
|
|
var _$$jPicker = $.jPicker,
|
|
Color = _$$jPicker.Color,
|
|
List = _$$jPicker.List,
|
|
ColorMethods = _$$jPicker.ColorMethods; // local copies for YUI compressor
|
|
|
|
$.fn.jPicker = function (options) {
|
|
var $arguments = arguments;
|
|
return this.each(function () {
|
|
var $this = this,
|
|
settings = $.extend(true, {}, $.fn.jPicker.defaults, options); // local copies for YUI compressor
|
|
if ($($this).get(0).nodeName.toLowerCase() === 'input') {
|
|
// Add color picker icon if binding to an input element and bind the events to the input
|
|
$.extend(true, settings, {
|
|
window: {
|
|
bindToInput: true,
|
|
expandable: true,
|
|
input: $($this)
|
|
}
|
|
});
|
|
if ($($this).val() === '') {
|
|
settings.color.active = new Color({ hex: null });
|
|
settings.color.current = new Color({ hex: null });
|
|
} else if (ColorMethods.validateHex($($this).val())) {
|
|
settings.color.active = new Color({ hex: $($this).val(), a: settings.color.active.val('a') });
|
|
settings.color.current = new Color({ hex: $($this).val(), a: settings.color.active.val('a') });
|
|
}
|
|
}
|
|
if (settings.window.expandable) {
|
|
$($this).after('<span class="jPicker"><span class="Icon"><span class="Color"> </span><span class="Alpha"> </span><span class="Image" title="Click To Open Color Picker"> </span><span class="Container"> </span></span></span>');
|
|
} else {
|
|
settings.window.liveUpdate = false; // Basic control binding for inline use - You will need to override the liveCallback or commitCallback function to retrieve results
|
|
}
|
|
var isLessThanIE7 = parseFloat(navigator.appVersion.split('MSIE')[1]) < 7 && document.body.filters; // needed to run the AlphaImageLoader function for IE6
|
|
// set color mode and update visuals for the new color mode
|
|
function setColorMode(colorMode) {
|
|
var active = color.active,
|
|
hex = active.val('hex');
|
|
var rgbMap = void 0,
|
|
rgbBar = void 0;
|
|
settings.color.mode = colorMode;
|
|
switch (colorMode) {
|
|
case 'h':
|
|
setTimeout(function () {
|
|
setBG.call($this, colorMapDiv, 'transparent');
|
|
setImgLoc.call($this, colorMapL1, 0);
|
|
setAlpha.call($this, colorMapL1, 100);
|
|
setImgLoc.call($this, colorMapL2, 260);
|
|
setAlpha.call($this, colorMapL2, 100);
|
|
setBG.call($this, colorBarDiv, 'transparent');
|
|
setImgLoc.call($this, colorBarL1, 0);
|
|
setAlpha.call($this, colorBarL1, 100);
|
|
setImgLoc.call($this, colorBarL2, 260);
|
|
setAlpha.call($this, colorBarL2, 100);
|
|
setImgLoc.call($this, colorBarL3, 260);
|
|
setAlpha.call($this, colorBarL3, 100);
|
|
setImgLoc.call($this, colorBarL4, 260);
|
|
setAlpha.call($this, colorBarL4, 100);
|
|
setImgLoc.call($this, colorBarL6, 260);
|
|
setAlpha.call($this, colorBarL6, 100);
|
|
}, 0);
|
|
colorMap.range('all', { minX: 0, maxX: 100, minY: 0, maxY: 100 });
|
|
colorBar.range('rangeY', { minY: 0, maxY: 360 });
|
|
if (active.val('ahex') == null) break;
|
|
colorMap.val('xy', { x: active.val('s'), y: 100 - active.val('v') }, colorMap);
|
|
colorBar.val('y', 360 - active.val('h'), colorBar);
|
|
break;
|
|
case 's':
|
|
setTimeout(function () {
|
|
setBG.call($this, colorMapDiv, 'transparent');
|
|
setImgLoc.call($this, colorMapL1, -260);
|
|
setImgLoc.call($this, colorMapL2, -520);
|
|
setImgLoc.call($this, colorBarL1, -260);
|
|
setImgLoc.call($this, colorBarL2, -520);
|
|
setImgLoc.call($this, colorBarL6, 260);
|
|
setAlpha.call($this, colorBarL6, 100);
|
|
}, 0);
|
|
colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
|
|
colorBar.range('rangeY', { minY: 0, maxY: 100 });
|
|
if (active.val('ahex') == null) break;
|
|
colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap);
|
|
colorBar.val('y', 100 - active.val('s'), colorBar);
|
|
break;
|
|
case 'v':
|
|
setTimeout(function () {
|
|
setBG.call($this, colorMapDiv, '000000');
|
|
setImgLoc.call($this, colorMapL1, -780);
|
|
setImgLoc.call($this, colorMapL2, 260);
|
|
setBG.call($this, colorBarDiv, hex);
|
|
setImgLoc.call($this, colorBarL1, -520);
|
|
setImgLoc.call($this, colorBarL2, 260);
|
|
setAlpha.call($this, colorBarL2, 100);
|
|
setImgLoc.call($this, colorBarL6, 260);
|
|
setAlpha.call($this, colorBarL6, 100);
|
|
}, 0);
|
|
colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
|
|
colorBar.range('rangeY', { minY: 0, maxY: 100 });
|
|
if (active.val('ahex') == null) break;
|
|
colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('s') }, colorMap);
|
|
colorBar.val('y', 100 - active.val('v'), colorBar);
|
|
break;
|
|
case 'r':
|
|
rgbMap = -1040;
|
|
rgbBar = -780;
|
|
colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
|
|
colorBar.range('rangeY', { minY: 0, maxY: 255 });
|
|
if (active.val('ahex') == null) break;
|
|
colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('g') }, colorMap);
|
|
colorBar.val('y', 255 - active.val('r'), colorBar);
|
|
break;
|
|
case 'g':
|
|
rgbMap = -1560;
|
|
rgbBar = -1820;
|
|
colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
|
|
colorBar.range('rangeY', { minY: 0, maxY: 255 });
|
|
if (active.val('ahex') == null) break;
|
|
colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('r') }, colorMap);
|
|
colorBar.val('y', 255 - active.val('g'), colorBar);
|
|
break;
|
|
case 'b':
|
|
rgbMap = -2080;
|
|
rgbBar = -2860;
|
|
colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
|
|
colorBar.range('rangeY', { minY: 0, maxY: 255 });
|
|
if (active.val('ahex') == null) break;
|
|
colorMap.val('xy', { x: active.val('r'), y: 255 - active.val('g') }, colorMap);
|
|
colorBar.val('y', 255 - active.val('b'), colorBar);
|
|
break;
|
|
case 'a':
|
|
setTimeout(function () {
|
|
setBG.call($this, colorMapDiv, 'transparent');
|
|
setImgLoc.call($this, colorMapL1, -260);
|
|
setImgLoc.call($this, colorMapL2, -520);
|
|
setImgLoc.call($this, colorBarL1, 260);
|
|
setImgLoc.call($this, colorBarL2, 260);
|
|
setAlpha.call($this, colorBarL2, 100);
|
|
setImgLoc.call($this, colorBarL6, 0);
|
|
setAlpha.call($this, colorBarL6, 100);
|
|
}, 0);
|
|
colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
|
|
colorBar.range('rangeY', { minY: 0, maxY: 255 });
|
|
if (active.val('ahex') == null) break;
|
|
colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap);
|
|
colorBar.val('y', 255 - active.val('a'), colorBar);
|
|
break;
|
|
default:
|
|
throw new Error('Invalid Mode');
|
|
}
|
|
switch (colorMode) {
|
|
case 'h':
|
|
break;
|
|
case 's':
|
|
case 'v':
|
|
case 'a':
|
|
setTimeout(function () {
|
|
setAlpha.call($this, colorMapL1, 100);
|
|
setAlpha.call($this, colorBarL1, 100);
|
|
setImgLoc.call($this, colorBarL3, 260);
|
|
setAlpha.call($this, colorBarL3, 100);
|
|
setImgLoc.call($this, colorBarL4, 260);
|
|
setAlpha.call($this, colorBarL4, 100);
|
|
}, 0);
|
|
break;
|
|
case 'r':
|
|
case 'g':
|
|
case 'b':
|
|
setTimeout(function () {
|
|
setBG.call($this, colorMapDiv, 'transparent');
|
|
setBG.call($this, colorBarDiv, 'transparent');
|
|
setAlpha.call($this, colorBarL1, 100);
|
|
setAlpha.call($this, colorMapL1, 100);
|
|
setImgLoc.call($this, colorMapL1, rgbMap);
|
|
setImgLoc.call($this, colorMapL2, rgbMap - 260);
|
|
setImgLoc.call($this, colorBarL1, rgbBar - 780);
|
|
setImgLoc.call($this, colorBarL2, rgbBar - 520);
|
|
setImgLoc.call($this, colorBarL3, rgbBar);
|
|
setImgLoc.call($this, colorBarL4, rgbBar - 260);
|
|
setImgLoc.call($this, colorBarL6, 260);
|
|
setAlpha.call($this, colorBarL6, 100);
|
|
}, 0);
|
|
break;
|
|
}
|
|
if (active.val('ahex') == null) return;
|
|
activeColorChanged.call($this, active);
|
|
}
|
|
// Update color when user changes text values
|
|
function activeColorChanged(ui, context) {
|
|
if (context == null || context !== colorBar && context !== colorMap) positionMapAndBarArrows.call($this, ui, context);
|
|
setTimeout(function () {
|
|
updatePreview.call($this, ui);
|
|
updateMapVisuals.call($this, ui);
|
|
updateBarVisuals.call($this, ui);
|
|
}, 0);
|
|
}
|
|
// user has dragged the ColorMap pointer
|
|
function mapValueChanged(ui, context) {
|
|
var active = color.active;
|
|
|
|
if (context !== colorMap && active.val() == null) return;
|
|
var xy = ui.val('all');
|
|
switch (settings.color.mode) {
|
|
case 'h':
|
|
active.val('sv', { s: xy.x, v: 100 - xy.y }, context);
|
|
break;
|
|
case 's':
|
|
case 'a':
|
|
active.val('hv', { h: xy.x, v: 100 - xy.y }, context);
|
|
break;
|
|
case 'v':
|
|
active.val('hs', { h: xy.x, s: 100 - xy.y }, context);
|
|
break;
|
|
case 'r':
|
|
active.val('gb', { g: 255 - xy.y, b: xy.x }, context);
|
|
break;
|
|
case 'g':
|
|
active.val('rb', { r: 255 - xy.y, b: xy.x }, context);
|
|
break;
|
|
case 'b':
|
|
active.val('rg', { r: xy.x, g: 255 - xy.y }, context);
|
|
break;
|
|
}
|
|
}
|
|
// user has dragged the ColorBar slider
|
|
function colorBarValueChanged(ui, context) {
|
|
var active = color.active;
|
|
|
|
if (context !== colorBar && active.val() == null) return;
|
|
switch (settings.color.mode) {
|
|
case 'h':
|
|
active.val('h', { h: 360 - ui.val('y') }, context);
|
|
break;
|
|
case 's':
|
|
active.val('s', { s: 100 - ui.val('y') }, context);
|
|
break;
|
|
case 'v':
|
|
active.val('v', { v: 100 - ui.val('y') }, context);
|
|
break;
|
|
case 'r':
|
|
active.val('r', { r: 255 - ui.val('y') }, context);
|
|
break;
|
|
case 'g':
|
|
active.val('g', { g: 255 - ui.val('y') }, context);
|
|
break;
|
|
case 'b':
|
|
active.val('b', { b: 255 - ui.val('y') }, context);
|
|
break;
|
|
case 'a':
|
|
active.val('a', 255 - ui.val('y'), context);
|
|
break;
|
|
}
|
|
}
|
|
// position map and bar arrows to match current color
|
|
function positionMapAndBarArrows(ui, context) {
|
|
if (context !== colorMap) {
|
|
switch (settings.color.mode) {
|
|
case 'h':
|
|
var sv = ui.val('sv');
|
|
colorMap.val('xy', { x: sv != null ? sv.s : 100, y: 100 - (sv != null ? sv.v : 100) }, context);
|
|
break;
|
|
case 's':
|
|
case 'a':
|
|
var hv = ui.val('hv');
|
|
colorMap.val('xy', { x: hv && hv.h || 0, y: 100 - (hv != null ? hv.v : 100) }, context);
|
|
break;
|
|
case 'v':
|
|
var hs = ui.val('hs');
|
|
colorMap.val('xy', { x: hs && hs.h || 0, y: 100 - (hs != null ? hs.s : 100) }, context);
|
|
break;
|
|
case 'r':
|
|
var bg = ui.val('bg');
|
|
colorMap.val('xy', { x: bg && bg.b || 0, y: 255 - (bg && bg.g || 0) }, context);
|
|
break;
|
|
case 'g':
|
|
var br = ui.val('br');
|
|
colorMap.val('xy', { x: br && br.b || 0, y: 255 - (br && br.r || 0) }, context);
|
|
break;
|
|
case 'b':
|
|
var rg = ui.val('rg');
|
|
colorMap.val('xy', { x: rg && rg.r || 0, y: 255 - (rg && rg.g || 0) }, context);
|
|
break;
|
|
}
|
|
}
|
|
if (context !== colorBar) {
|
|
switch (settings.color.mode) {
|
|
case 'h':
|
|
colorBar.val('y', 360 - (ui.val('h') || 0), context);
|
|
break;
|
|
case 's':
|
|
var _s = ui.val('s');
|
|
colorBar.val('y', 100 - (_s != null ? _s : 100), context);
|
|
break;
|
|
case 'v':
|
|
var _v = ui.val('v');
|
|
colorBar.val('y', 100 - (_v != null ? _v : 100), context);
|
|
break;
|
|
case 'r':
|
|
colorBar.val('y', 255 - (ui.val('r') || 0), context);
|
|
break;
|
|
case 'g':
|
|
colorBar.val('y', 255 - (ui.val('g') || 0), context);
|
|
break;
|
|
case 'b':
|
|
colorBar.val('y', 255 - (ui.val('b') || 0), context);
|
|
break;
|
|
case 'a':
|
|
var _a = ui.val('a');
|
|
colorBar.val('y', 255 - (_a != null ? _a : 255), context);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
function updatePreview(ui) {
|
|
try {
|
|
var all = ui.val('all');
|
|
activePreview.css({ backgroundColor: all && '#' + all.hex || 'transparent' });
|
|
setAlpha.call($this, activePreview, all && Math.precision(all.a * 100 / 255, 4) || 0);
|
|
} catch (e) {}
|
|
}
|
|
function updateMapVisuals(ui) {
|
|
switch (settings.color.mode) {
|
|
case 'h':
|
|
setBG.call($this, colorMapDiv, new Color({ h: ui.val('h') || 0, s: 100, v: 100 }).val('hex'));
|
|
break;
|
|
case 's':
|
|
case 'a':
|
|
var _s2 = ui.val('s');
|
|
setAlpha.call($this, colorMapL2, 100 - (_s2 != null ? _s2 : 100));
|
|
break;
|
|
case 'v':
|
|
var _v2 = ui.val('v');
|
|
setAlpha.call($this, colorMapL1, _v2 != null ? _v2 : 100);
|
|
break;
|
|
case 'r':
|
|
setAlpha.call($this, colorMapL2, Math.precision((ui.val('r') || 0) / 255 * 100, 4));
|
|
break;
|
|
case 'g':
|
|
setAlpha.call($this, colorMapL2, Math.precision((ui.val('g') || 0) / 255 * 100, 4));
|
|
break;
|
|
case 'b':
|
|
setAlpha.call($this, colorMapL2, Math.precision((ui.val('b') || 0) / 255 * 100));
|
|
break;
|
|
}
|
|
var a = ui.val('a');
|
|
setAlpha.call($this, colorMapL3, Math.precision((255 - (a || 0)) * 100 / 255, 4));
|
|
}
|
|
function updateBarVisuals(ui) {
|
|
switch (settings.color.mode) {
|
|
case 'h':
|
|
var _a2 = ui.val('a');
|
|
setAlpha.call($this, colorBarL5, Math.precision((255 - (_a2 || 0)) * 100 / 255, 4));
|
|
break;
|
|
case 's':
|
|
var hva = ui.val('hva'),
|
|
saturatedColor = new Color({ h: hva && hva.h || 0, s: 100, v: hva != null ? hva.v : 100 });
|
|
setBG.call($this, colorBarDiv, saturatedColor.val('hex'));
|
|
setAlpha.call($this, colorBarL2, 100 - (hva != null ? hva.v : 100));
|
|
setAlpha.call($this, colorBarL5, Math.precision((255 - (hva && hva.a || 0)) * 100 / 255, 4));
|
|
break;
|
|
case 'v':
|
|
var hsa = ui.val('hsa'),
|
|
valueColor = new Color({ h: hsa && hsa.h || 0, s: hsa != null ? hsa.s : 100, v: 100 });
|
|
setBG.call($this, colorBarDiv, valueColor.val('hex'));
|
|
setAlpha.call($this, colorBarL5, Math.precision((255 - (hsa && hsa.a || 0)) * 100 / 255, 4));
|
|
break;
|
|
case 'r':
|
|
case 'g':
|
|
case 'b':
|
|
var rgba = ui.val('rgba');
|
|
var hValue = 0,
|
|
vValue = 0;
|
|
if (settings.color.mode === 'r') {
|
|
hValue = rgba && rgba.b || 0;
|
|
vValue = rgba && rgba.g || 0;
|
|
} else if (settings.color.mode === 'g') {
|
|
hValue = rgba && rgba.b || 0;
|
|
vValue = rgba && rgba.r || 0;
|
|
} else if (settings.color.mode === 'b') {
|
|
hValue = rgba && rgba.r || 0;
|
|
vValue = rgba && rgba.g || 0;
|
|
}
|
|
var middle = vValue > hValue ? hValue : vValue;
|
|
setAlpha.call($this, colorBarL2, hValue > vValue ? Math.precision((hValue - vValue) / (255 - vValue) * 100, 4) : 0);
|
|
setAlpha.call($this, colorBarL3, vValue > hValue ? Math.precision((vValue - hValue) / (255 - hValue) * 100, 4) : 0);
|
|
setAlpha.call($this, colorBarL4, Math.precision(middle / 255 * 100, 4));
|
|
setAlpha.call($this, colorBarL5, Math.precision((255 - (rgba && rgba.a || 0)) * 100 / 255, 4));
|
|
break;
|
|
case 'a':
|
|
{
|
|
var _a3 = ui.val('a');
|
|
setBG.call($this, colorBarDiv, ui.val('hex') || '000000');
|
|
setAlpha.call($this, colorBarL5, _a3 != null ? 0 : 100);
|
|
setAlpha.call($this, colorBarL6, _a3 != null ? 100 : 0);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
function setBG(el, c) {
|
|
el.css({ backgroundColor: c && c.length === 6 && '#' + c || 'transparent' });
|
|
}
|
|
function setImg(img, src) {
|
|
if (isLessThanIE7 && (src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png'))) {
|
|
img.attr('pngSrc', src);
|
|
img.css({ backgroundImage: 'none', filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' });
|
|
} else img.css({ backgroundImage: 'url(\'' + src + '\')' });
|
|
}
|
|
function setImgLoc(img, y) {
|
|
img.css({ top: y + 'px' });
|
|
}
|
|
function setAlpha(obj, alpha) {
|
|
obj.css({ visibility: alpha > 0 ? 'visible' : 'hidden' });
|
|
if (alpha > 0 && alpha < 100) {
|
|
if (isLessThanIE7) {
|
|
var src = obj.attr('pngSrc');
|
|
if (src != null && (src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png'))) {
|
|
obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')' });
|
|
} else obj.css({ opacity: Math.precision(alpha / 100, 4) });
|
|
} else obj.css({ opacity: Math.precision(alpha / 100, 4) });
|
|
} else if (alpha === 0 || alpha === 100) {
|
|
if (isLessThanIE7) {
|
|
var _src = obj.attr('pngSrc');
|
|
if (_src != null && (_src.includes('AlphaBar.png') || _src.includes('Bars.png') || _src.includes('Maps.png'))) {
|
|
obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + _src + '\', sizingMethod=\'scale\')' });
|
|
} else obj.css({ opacity: '' });
|
|
} else obj.css({ opacity: '' });
|
|
}
|
|
}
|
|
// revert color to original color when opened
|
|
function revertColor() {
|
|
color.active.val('ahex', color.current.val('ahex'));
|
|
}
|
|
// commit the color changes
|
|
function commitColor() {
|
|
color.current.val('ahex', color.active.val('ahex'));
|
|
}
|
|
function radioClicked(e) {
|
|
$(this).parents('tbody:first').find('input:radio[value!="' + e.target.value + '"]').removeAttr('checked');
|
|
setColorMode.call($this, e.target.value);
|
|
}
|
|
function currentClicked() {
|
|
revertColor.call($this);
|
|
}
|
|
function cancelClicked() {
|
|
revertColor.call($this);
|
|
settings.window.expandable && hide.call($this);
|
|
typeof cancelCallback === 'function' && cancelCallback.call($this, color.active, cancelButton);
|
|
}
|
|
function okClicked() {
|
|
commitColor.call($this);
|
|
settings.window.expandable && hide.call($this);
|
|
typeof commitCallback === 'function' && commitCallback.call($this, color.active, okButton);
|
|
}
|
|
function iconImageClicked() {
|
|
show.call($this);
|
|
}
|
|
function currentColorChanged(ui, context) {
|
|
var hex = ui.val('hex');
|
|
currentPreview.css({ backgroundColor: hex && '#' + hex || 'transparent' });
|
|
setAlpha.call($this, currentPreview, Math.precision((ui.val('a') || 0) * 100 / 255, 4));
|
|
}
|
|
function expandableColorChanged(ui, context) {
|
|
var hex = ui.val('hex');
|
|
var va = ui.val('va');
|
|
iconColor.css({ backgroundColor: hex && '#' + hex || 'transparent' });
|
|
setAlpha.call($this, iconAlpha, Math.precision((255 - (va && va.a || 0)) * 100 / 255, 4));
|
|
if (settings.window.bindToInput && settings.window.updateInputColor) {
|
|
settings.window.input.css({
|
|
backgroundColor: hex && '#' + hex || 'transparent',
|
|
color: va == null || va.v > 75 ? '#000000' : '#ffffff'
|
|
});
|
|
}
|
|
}
|
|
function moveBarMouseDown(e) {
|
|
// const {element} = settings.window, // local copies for YUI compressor
|
|
// {page} = settings.window;
|
|
elementStartX = parseInt(container.css('left'));
|
|
elementStartY = parseInt(container.css('top'));
|
|
pageStartX = e.pageX;
|
|
pageStartY = e.pageY;
|
|
// bind events to document to move window - we will unbind these on mouseup
|
|
$(document).bind('mousemove', documentMouseMove).bind('mouseup', documentMouseUp);
|
|
e.preventDefault(); // prevent attempted dragging of the column
|
|
}
|
|
function documentMouseMove(e) {
|
|
container.css({ left: elementStartX - (pageStartX - e.pageX) + 'px', top: elementStartY - (pageStartY - e.pageY) + 'px' });
|
|
if (settings.window.expandable && !$.support.boxModel) container.prev().css({ left: container.css('left'), top: container.css('top') });
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
function documentMouseUp(e) {
|
|
$(document).unbind('mousemove', documentMouseMove).unbind('mouseup', documentMouseUp);
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
function quickPickClicked(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
color.active.val('ahex', $(this).attr('title') || null, e.target);
|
|
return false;
|
|
}
|
|
function show() {
|
|
color.current.val('ahex', color.active.val('ahex'));
|
|
function attachIFrame() {
|
|
if (!settings.window.expandable || $.support.boxModel) return;
|
|
var table = container.find('table:first');
|
|
container.before('<iframe/>');
|
|
container.prev().css({ width: table.width(), height: container.height(), opacity: 0, position: 'absolute', left: container.css('left'), top: container.css('top') });
|
|
}
|
|
if (settings.window.expandable) {
|
|
$(document.body).children('div.jPicker.Container').css({ zIndex: 10 });
|
|
container.css({ zIndex: 20 });
|
|
}
|
|
switch (settings.window.effects.type) {
|
|
case 'fade':
|
|
container.fadeIn(settings.window.effects.speed.show, attachIFrame);
|
|
break;
|
|
case 'slide':
|
|
container.slideDown(settings.window.effects.speed.show, attachIFrame);
|
|
break;
|
|
case 'show':
|
|
default:
|
|
container.show(settings.window.effects.speed.show, attachIFrame);
|
|
break;
|
|
}
|
|
}
|
|
function hide() {
|
|
function removeIFrame() {
|
|
if (settings.window.expandable) container.css({ zIndex: 10 });
|
|
if (!settings.window.expandable || $.support.boxModel) return;
|
|
container.prev().remove();
|
|
}
|
|
switch (settings.window.effects.type) {
|
|
case 'fade':
|
|
container.fadeOut(settings.window.effects.speed.hide, removeIFrame);
|
|
break;
|
|
case 'slide':
|
|
container.slideUp(settings.window.effects.speed.hide, removeIFrame);
|
|
break;
|
|
case 'show':
|
|
default:
|
|
container.hide(settings.window.effects.speed.hide, removeIFrame);
|
|
break;
|
|
}
|
|
}
|
|
function initialize() {
|
|
var win = settings.window,
|
|
popup = win.expandable ? $($this).next().find('.Container:first') : null;
|
|
container = win.expandable ? $('<div/>') : $($this);
|
|
container.addClass('jPicker Container');
|
|
if (win.expandable) container.hide();
|
|
container.get(0).onselectstart = function (event) {
|
|
if (event.target.nodeName.toLowerCase() !== 'input') return false;
|
|
};
|
|
// inject html source code - we are using a single table for this control - I know tables are considered bad, but it takes care of equal height columns and
|
|
// this control really is tabular data, so I believe it is the right move
|
|
var all = color.active.val('all');
|
|
if (win.alphaPrecision < 0) win.alphaPrecision = 0;else if (win.alphaPrecision > 2) win.alphaPrecision = 2;
|
|
var controlHtml = '<table class="jPicker" cellpadding="0" cellspacing="0"><tbody>' + (win.expandable ? '<tr><td class="Move" colspan="5"> </td></tr>' : '') + '<tr><td rowspan="9"><h2 class="Title">' + (win.title || localization.text.title) + '</h2><div class="Map"><span class="Map1"> </span><span class="Map2"> </span><span class="Map3"> </span><img src="' + images.clientPath + images.colorMap.arrow.file + '" class="Arrow"/></div></td><td rowspan="9"><div class="Bar"><span class="Map1"> </span><span class="Map2"> </span><span class="Map3"> </span><span class="Map4"> </span><span class="Map5"> </span><span class="Map6"> </span><img src="' + images.clientPath + images.colorBar.arrow.file + '" class="Arrow"/></div></td><td colspan="2" class="Preview">' + localization.text.newColor + '<div><span class="Active" title="' + localization.tooltips.colors.newColor + '"> </span><span class="Current" title="' + localization.tooltips.colors.currentColor + '"> </span></div>' + localization.text.currentColor + '</td><td rowspan="9" class="Button"><input type="button" class="Ok" value="' + localization.text.ok + '" title="' + localization.tooltips.buttons.ok + '"/><input type="button" class="Cancel" value="' + localization.text.cancel + '" title="' + localization.tooltips.buttons.cancel + '"/><hr/><div class="Grid"> </div></td></tr><tr class="Hue"><td class="Radio"><label title="' + localization.tooltips.hue.radio + '"><input type="radio" value="h"' + (settings.color.mode === 'h' ? ' checked="checked"' : '') + '/>H:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.h : '') + '" title="' + localization.tooltips.hue.textbox + '"/> °</td></tr><tr class="Saturation"><td class="Radio"><label title="' + localization.tooltips.saturation.radio + '"><input type="radio" value="s"' + (settings.color.mode === 's' ? ' checked="checked"' : '') + '/>S:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.s : '') + '" title="' + localization.tooltips.saturation.textbox + '"/> %</td></tr><tr class="Value"><td class="Radio"><label title="' + localization.tooltips.value.radio + '"><input type="radio" value="v"' + (settings.color.mode === 'v' ? ' checked="checked"' : '') + '/>V:</label><br/><br/></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.v : '') + '" title="' + localization.tooltips.value.textbox + '"/> %<br/><br/></td></tr><tr class="Red"><td class="Radio"><label title="' + localization.tooltips.red.radio + '"><input type="radio" value="r"' + (settings.color.mode === 'r' ? ' checked="checked"' : '') + '/>R:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.r : '') + '" title="' + localization.tooltips.red.textbox + '"/></td></tr><tr class="Green"><td class="Radio"><label title="' + localization.tooltips.green.radio + '"><input type="radio" value="g"' + (settings.color.mode === 'g' ? ' checked="checked"' : '') + '/>G:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.g : '') + '" title="' + localization.tooltips.green.textbox + '"/></td></tr><tr class="Blue"><td class="Radio"><label title="' + localization.tooltips.blue.radio + '"><input type="radio" value="b"' + (settings.color.mode === 'b' ? ' checked="checked"' : '') + '/>B:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.b : '') + '" title="' + localization.tooltips.blue.textbox + '"/></td></tr><tr class="Alpha"><td class="Radio">' + (win.alphaSupport ? '<label title="' + localization.tooltips.alpha.radio + '"><input type="radio" value="a"' + (settings.color.mode === 'a' ? ' checked="checked"' : '') + '/>A:</label>' : ' ') + '</td><td class="Text">' + (win.alphaSupport ? '<input type="text" maxlength="' + (3 + win.alphaPrecision) + '" value="' + (all != null ? Math.precision(all.a * 100 / 255, win.alphaPrecision) : '') + '" title="' + localization.tooltips.alpha.textbox + '"/> %' : ' ') + '</td></tr><tr class="Hex"><td colspan="2" class="Text"><label title="' + localization.tooltips.hex.textbox + '">#:<input type="text" maxlength="6" class="Hex" value="' + (all != null ? all.hex : '') + '"/></label>' + (win.alphaSupport ? '<input type="text" maxlength="2" class="AHex" value="' + (all != null ? all.ahex.substring(6) : '') + '" title="' + localization.tooltips.hex.alpha + '"/></td>' : ' ') + '</tr></tbody></table>';
|
|
if (win.expandable) {
|
|
container.html(controlHtml);
|
|
if (!$(document.body).children('div.jPicker.Container').length) {
|
|
$(document.body).prepend(container);
|
|
} else {
|
|
$(document.body).children('div.jPicker.Container:last').after(container);
|
|
}
|
|
container.mousedown(function () {
|
|
$(document.body).children('div.jPicker.Container').css({ zIndex: 10 });
|
|
container.css({ zIndex: 20 });
|
|
});
|
|
container.css( // positions must be set and display set to absolute before source code injection or IE will size the container to fit the window
|
|
{
|
|
left: win.position.x === 'left' ? popup.offset().left - 530 - (win.position.y === 'center' ? 25 : 0) + 'px' : win.position.x === 'center' ? popup.offset().left - 260 + 'px' : win.position.x === 'right' ? popup.offset().left - 10 + (win.position.y === 'center' ? 25 : 0) + 'px' : win.position.x === 'screenCenter' ? ($(document).width() >> 1) - 260 + 'px' : popup.offset().left + parseInt(win.position.x) + 'px',
|
|
position: 'absolute',
|
|
top: win.position.y === 'top' ? popup.offset().top - 312 + 'px' : win.position.y === 'center' ? popup.offset().top - 156 + 'px' : win.position.y === 'bottom' ? popup.offset().top + 25 + 'px' : popup.offset().top + parseInt(win.position.y) + 'px'
|
|
});
|
|
} else {
|
|
container = $($this);
|
|
container.html(controlHtml);
|
|
}
|
|
// initialize the objects to the source code just injected
|
|
var tbody = container.find('tbody:first');
|
|
colorMapDiv = tbody.find('div.Map:first');
|
|
colorBarDiv = tbody.find('div.Bar:first');
|
|
var MapMaps = colorMapDiv.find('span');
|
|
var BarMaps = colorBarDiv.find('span');
|
|
colorMapL1 = MapMaps.filter('.Map1:first');
|
|
colorMapL2 = MapMaps.filter('.Map2:first');
|
|
colorMapL3 = MapMaps.filter('.Map3:first');
|
|
colorBarL1 = BarMaps.filter('.Map1:first');
|
|
colorBarL2 = BarMaps.filter('.Map2:first');
|
|
colorBarL3 = BarMaps.filter('.Map3:first');
|
|
colorBarL4 = BarMaps.filter('.Map4:first');
|
|
colorBarL5 = BarMaps.filter('.Map5:first');
|
|
colorBarL6 = BarMaps.filter('.Map6:first');
|
|
// create color pickers and maps
|
|
colorMap = new Slider(colorMapDiv, {
|
|
map: {
|
|
width: images.colorMap.width,
|
|
height: images.colorMap.height
|
|
},
|
|
arrow: {
|
|
image: images.clientPath + images.colorMap.arrow.file,
|
|
width: images.colorMap.arrow.width,
|
|
height: images.colorMap.arrow.height
|
|
}
|
|
});
|
|
colorMap.bind(mapValueChanged);
|
|
colorBar = new Slider(colorBarDiv, {
|
|
map: {
|
|
width: images.colorBar.width,
|
|
height: images.colorBar.height
|
|
},
|
|
arrow: {
|
|
image: images.clientPath + images.colorBar.arrow.file,
|
|
width: images.colorBar.arrow.width,
|
|
height: images.colorBar.arrow.height
|
|
}
|
|
});
|
|
colorBar.bind(colorBarValueChanged);
|
|
colorPicker = new ColorValuePicker(tbody, color.active, win.expandable && win.bindToInput ? win.input : null, win.alphaPrecision);
|
|
var hex = all != null ? all.hex : null,
|
|
preview = tbody.find('.Preview'),
|
|
button = tbody.find('.Button');
|
|
activePreview = preview.find('.Active:first').css({ backgroundColor: hex && '#' + hex || 'transparent' });
|
|
currentPreview = preview.find('.Current:first').css({ backgroundColor: hex && '#' + hex || 'transparent' }).bind('click', currentClicked);
|
|
setAlpha.call($this, currentPreview, Math.precision(color.current.val('a') * 100) / 255, 4);
|
|
okButton = button.find('.Ok:first').bind('click', okClicked);
|
|
cancelButton = button.find('.Cancel:first').bind('click', cancelClicked);
|
|
grid = button.find('.Grid:first');
|
|
setTimeout(function () {
|
|
setImg.call($this, colorMapL1, images.clientPath + 'Maps.png');
|
|
setImg.call($this, colorMapL2, images.clientPath + 'Maps.png');
|
|
setImg.call($this, colorMapL3, images.clientPath + 'map-opacity.png');
|
|
setImg.call($this, colorBarL1, images.clientPath + 'Bars.png');
|
|
setImg.call($this, colorBarL2, images.clientPath + 'Bars.png');
|
|
setImg.call($this, colorBarL3, images.clientPath + 'Bars.png');
|
|
setImg.call($this, colorBarL4, images.clientPath + 'Bars.png');
|
|
setImg.call($this, colorBarL5, images.clientPath + 'bar-opacity.png');
|
|
setImg.call($this, colorBarL6, images.clientPath + 'AlphaBar.png');
|
|
setImg.call($this, preview.find('div:first'), images.clientPath + 'preview-opacity.png');
|
|
}, 0);
|
|
tbody.find('td.Radio input').bind('click', radioClicked);
|
|
// initialize quick list
|
|
if (color.quickList && color.quickList.length > 0) {
|
|
var html = '';
|
|
for (var i = 0; i < color.quickList.length; i++) {
|
|
/* if default colors are hex strings, change them to color objects */
|
|
if (_typeof(color.quickList[i]).toString().toLowerCase() === 'string') color.quickList[i] = new Color({ hex: color.quickList[i] });
|
|
var alpha = color.quickList[i].val('a');
|
|
var ahex = color.quickList[i].val('ahex');
|
|
if (!win.alphaSupport && ahex) ahex = ahex.substring(0, 6) + 'ff';
|
|
var quickHex = color.quickList[i].val('hex');
|
|
if (!ahex) ahex = '00000000';
|
|
html += '<span class="QuickColor"' + (ahex && ' title="#' + ahex + '"' || 'none') + ' style="background-color:' + (quickHex && '#' + quickHex || '') + ';' + (quickHex ? '' : 'background-image:url(' + images.clientPath + 'NoColor.png)') + (win.alphaSupport && alpha && alpha < 255 ? ';opacity:' + Math.precision(alpha / 255, 4) + ';filter:Alpha(opacity=' + Math.precision(alpha / 2.55, 4) + ')' : '') + '"> </span>';
|
|
}
|
|
setImg.call($this, grid, images.clientPath + 'bar-opacity.png');
|
|
grid.html(html);
|
|
grid.find('.QuickColor').click(quickPickClicked);
|
|
}
|
|
setColorMode.call($this, settings.color.mode);
|
|
color.active.bind(activeColorChanged);
|
|
typeof liveCallback === 'function' && color.active.bind(liveCallback);
|
|
color.current.bind(currentColorChanged);
|
|
// bind to input
|
|
if (win.expandable) {
|
|
$this.icon = popup.parents('.Icon:first');
|
|
iconColor = $this.icon.find('.Color:first').css({ backgroundColor: hex && '#' + hex || 'transparent' });
|
|
iconAlpha = $this.icon.find('.Alpha:first');
|
|
setImg.call($this, iconAlpha, images.clientPath + 'bar-opacity.png');
|
|
setAlpha.call($this, iconAlpha, Math.precision((255 - (all != null ? all.a : 0)) * 100 / 255, 4));
|
|
iconImage = $this.icon.find('.Image:first').css({
|
|
backgroundImage: 'url(\'' + images.clientPath + images.picker.file + '\')'
|
|
}).bind('click', iconImageClicked);
|
|
if (win.bindToInput && win.updateInputColor) {
|
|
win.input.css({
|
|
backgroundColor: hex && '#' + hex || 'transparent',
|
|
color: all == null || all.v > 75 ? '#000000' : '#ffffff'
|
|
});
|
|
}
|
|
moveBar = tbody.find('.Move:first').bind('mousedown', moveBarMouseDown);
|
|
color.active.bind(expandableColorChanged);
|
|
} else show.call($this);
|
|
}
|
|
function destroy() {
|
|
container.find('td.Radio input').unbind('click', radioClicked);
|
|
currentPreview.unbind('click', currentClicked);
|
|
cancelButton.unbind('click', cancelClicked);
|
|
okButton.unbind('click', okClicked);
|
|
if (settings.window.expandable) {
|
|
iconImage.unbind('click', iconImageClicked);
|
|
moveBar.unbind('mousedown', moveBarMouseDown);
|
|
$this.icon = null;
|
|
}
|
|
container.find('.QuickColor').unbind('click', quickPickClicked);
|
|
colorMapDiv = null;
|
|
colorBarDiv = null;
|
|
colorMapL1 = null;
|
|
colorMapL2 = null;
|
|
colorMapL3 = null;
|
|
colorBarL1 = null;
|
|
colorBarL2 = null;
|
|
colorBarL3 = null;
|
|
colorBarL4 = null;
|
|
colorBarL5 = null;
|
|
colorBarL6 = null;
|
|
colorMap.destroy();
|
|
colorMap = null;
|
|
colorBar.destroy();
|
|
colorBar = null;
|
|
colorPicker.destroy();
|
|
colorPicker = null;
|
|
activePreview = null;
|
|
currentPreview = null;
|
|
okButton = null;
|
|
cancelButton = null;
|
|
grid = null;
|
|
commitCallback = null;
|
|
cancelCallback = null;
|
|
liveCallback = null;
|
|
container.html('');
|
|
for (var i = 0; i < List.length; i++) {
|
|
if (List[i] === $this) {
|
|
List.splice(i, 1);
|
|
}
|
|
}
|
|
}
|
|
var images = settings.images,
|
|
localization = settings.localization; // local copies for YUI compressor
|
|
|
|
var color = {
|
|
active: _typeof(settings.color.active).toString().toLowerCase() === 'string' ? new Color({ ahex: !settings.window.alphaSupport && settings.color.active ? settings.color.active.substring(0, 6) + 'ff' : settings.color.active
|
|
}) : new Color({ ahex: !settings.window.alphaSupport && settings.color.active.val('ahex') ? settings.color.active.val('ahex').substring(0, 6) + 'ff' : settings.color.active.val('ahex')
|
|
}),
|
|
current: _typeof(settings.color.active).toString().toLowerCase() === 'string' ? new Color({ ahex: !settings.window.alphaSupport && settings.color.active ? settings.color.active.substring(0, 6) + 'ff' : settings.color.active }) : new Color({ ahex: !settings.window.alphaSupport && settings.color.active.val('ahex') ? settings.color.active.val('ahex').substring(0, 6) + 'ff' : settings.color.active.val('ahex')
|
|
}),
|
|
quickList: settings.color.quickList
|
|
};
|
|
|
|
var elementStartX = null,
|
|
// Used to record the starting css positions for dragging the control
|
|
elementStartY = null,
|
|
pageStartX = null,
|
|
// Used to record the mousedown coordinates for dragging the control
|
|
pageStartY = null,
|
|
container = null,
|
|
colorMapDiv = null,
|
|
colorBarDiv = null,
|
|
colorMapL1 = null,
|
|
// different layers of colorMap and colorBar
|
|
colorMapL2 = null,
|
|
colorMapL3 = null,
|
|
colorBarL1 = null,
|
|
colorBarL2 = null,
|
|
colorBarL3 = null,
|
|
colorBarL4 = null,
|
|
colorBarL5 = null,
|
|
colorBarL6 = null,
|
|
colorMap = null,
|
|
// color maps
|
|
colorBar = null,
|
|
colorPicker = null,
|
|
activePreview = null,
|
|
// color boxes above the radio buttons
|
|
currentPreview = null,
|
|
okButton = null,
|
|
cancelButton = null,
|
|
grid = null,
|
|
// preset colors grid
|
|
iconColor = null,
|
|
// iconColor for popup icon
|
|
iconAlpha = null,
|
|
// iconAlpha for popup icon
|
|
iconImage = null,
|
|
// iconImage popup icon
|
|
moveBar = null,
|
|
// drag bar
|
|
commitCallback = typeof $arguments[1] === 'function' ? $arguments[1] : null,
|
|
liveCallback = typeof $arguments[2] === 'function' ? $arguments[2] : null,
|
|
cancelCallback = typeof $arguments[3] === 'function' ? $arguments[3] : null;
|
|
|
|
$.extend(true, $this, {
|
|
// public properties, methods, and callbacks
|
|
commitCallback: commitCallback, // commitCallback function can be overridden to return the selected color to a method you specify when the user clicks "OK"
|
|
liveCallback: liveCallback, // liveCallback function can be overridden to return the selected color to a method you specify in live mode (continuous update)
|
|
cancelCallback: cancelCallback, // cancelCallback function can be overridden to a method you specify when the user clicks "Cancel"
|
|
color: color,
|
|
show: show,
|
|
hide: hide,
|
|
destroy: destroy // destroys this control entirely, removing all events and objects, and removing itself from the List
|
|
});
|
|
List.push($this);
|
|
setTimeout(function () {
|
|
initialize.call($this);
|
|
}, 0);
|
|
});
|
|
};
|
|
/**
|
|
* jPicker defaults - you can change anything in this section (such as the
|
|
* clientPath to your images) without fear of breaking the program
|
|
*/
|
|
$.fn.jPicker.defaults = {
|
|
window: {
|
|
title: null, /* any title for the jPicker window itself - displays "Drag Markers To Pick A Color" if left null */
|
|
effects: {
|
|
type: 'slide', /* effect used to show/hide an expandable picker. Acceptable values "slide", "show", "fade" */
|
|
speed: {
|
|
show: 'slow', /* duration of "show" effect. Acceptable values are "fast", "slow", or time in ms */
|
|
hide: 'fast' /* duration of "hide" effect. Acceptable values are "fast", "slow", or time in ms */
|
|
}
|
|
},
|
|
position: {
|
|
x: 'screenCenter', /* acceptable values "left", "center", "right", "screenCenter", or relative px value */
|
|
y: 'top' /* acceptable values "top", "bottom", "center", or relative px value */
|
|
},
|
|
expandable: false, /* default to large static picker - set to true to make an expandable picker (small icon with popup) - set automatically when binded to input element */
|
|
liveUpdate: true, /* set false if you want the user to have to click "OK" before the binded input box updates values (always "true" for expandable picker) */
|
|
alphaSupport: false, /* set to true to enable alpha picking */
|
|
alphaPrecision: 0, /* set decimal precision for alpha percentage display - hex codes do not map directly to percentage integers - range 0-2 */
|
|
updateInputColor: true /* set to false to prevent binded input colors from changing */
|
|
},
|
|
color: {
|
|
mode: 'h', /* acceptabled values "h" (hue), "s" (saturation), "v" (value), "r" (red), "g" (green), "b" (blue), "a" (alpha) */
|
|
active: new Color({ ahex: '#ffcc00ff' }), /* acceptable values are any declared $.jPicker.Color object or string HEX value (e.g. #ffc000) WITH OR WITHOUT the "#" prefix */
|
|
// the quick pick color list
|
|
quickList: [new Color({ h: 360, s: 33, v: 100 }), /* acceptable values are any declared $.jPicker.Color object or string HEX value (e.g. #ffc000) WITH OR WITHOUT the "#" prefix */
|
|
new Color({ h: 360, s: 66, v: 100 }), new Color({ h: 360, s: 100, v: 100 }), new Color({ h: 360, s: 100, v: 75 }), new Color({ h: 360, s: 100, v: 50 }), new Color({ h: 180, s: 0, v: 100 }), new Color({ h: 30, s: 33, v: 100 }), new Color({ h: 30, s: 66, v: 100 }), new Color({ h: 30, s: 100, v: 100 }), new Color({ h: 30, s: 100, v: 75 }), new Color({ h: 30, s: 100, v: 50 }), new Color({ h: 180, s: 0, v: 90 }), new Color({ h: 60, s: 33, v: 100 }), new Color({ h: 60, s: 66, v: 100 }), new Color({ h: 60, s: 100, v: 100 }), new Color({ h: 60, s: 100, v: 75 }), new Color({ h: 60, s: 100, v: 50 }), new Color({ h: 180, s: 0, v: 80 }), new Color({ h: 90, s: 33, v: 100 }), new Color({ h: 90, s: 66, v: 100 }), new Color({ h: 90, s: 100, v: 100 }), new Color({ h: 90, s: 100, v: 75 }), new Color({ h: 90, s: 100, v: 50 }), new Color({ h: 180, s: 0, v: 70 }), new Color({ h: 120, s: 33, v: 100 }), new Color({ h: 120, s: 66, v: 100 }), new Color({ h: 120, s: 100, v: 100 }), new Color({ h: 120, s: 100, v: 75 }), new Color({ h: 120, s: 100, v: 50 }), new Color({ h: 180, s: 0, v: 60 }), new Color({ h: 150, s: 33, v: 100 }), new Color({ h: 150, s: 66, v: 100 }), new Color({ h: 150, s: 100, v: 100 }), new Color({ h: 150, s: 100, v: 75 }), new Color({ h: 150, s: 100, v: 50 }), new Color({ h: 180, s: 0, v: 50 }), new Color({ h: 180, s: 33, v: 100 }), new Color({ h: 180, s: 66, v: 100 }), new Color({ h: 180, s: 100, v: 100 }), new Color({ h: 180, s: 100, v: 75 }), new Color({ h: 180, s: 100, v: 50 }), new Color({ h: 180, s: 0, v: 40 }), new Color({ h: 210, s: 33, v: 100 }), new Color({ h: 210, s: 66, v: 100 }), new Color({ h: 210, s: 100, v: 100 }), new Color({ h: 210, s: 100, v: 75 }), new Color({ h: 210, s: 100, v: 50 }), new Color({ h: 180, s: 0, v: 30 }), new Color({ h: 240, s: 33, v: 100 }), new Color({ h: 240, s: 66, v: 100 }), new Color({ h: 240, s: 100, v: 100 }), new Color({ h: 240, s: 100, v: 75 }), new Color({ h: 240, s: 100, v: 50 }), new Color({ h: 180, s: 0, v: 20 }), new Color({ h: 270, s: 33, v: 100 }), new Color({ h: 270, s: 66, v: 100 }), new Color({ h: 270, s: 100, v: 100 }), new Color({ h: 270, s: 100, v: 75 }), new Color({ h: 270, s: 100, v: 50 }), new Color({ h: 180, s: 0, v: 10 }), new Color({ h: 300, s: 33, v: 100 }), new Color({ h: 300, s: 66, v: 100 }), new Color({ h: 300, s: 100, v: 100 }), new Color({ h: 300, s: 100, v: 75 }), new Color({ h: 300, s: 100, v: 50 }), new Color({ h: 180, s: 0, v: 0 }), new Color({ h: 330, s: 33, v: 100 }), new Color({ h: 330, s: 66, v: 100 }), new Color({ h: 330, s: 100, v: 100 }), new Color({ h: 330, s: 100, v: 75 }), new Color({ h: 330, s: 100, v: 50 }), new Color()]
|
|
},
|
|
images: {
|
|
clientPath: '/jPicker/images/', /* Path to image files */
|
|
colorMap: {
|
|
width: 256,
|
|
height: 256,
|
|
arrow: {
|
|
file: 'mappoint.gif', /* ColorMap arrow icon */
|
|
width: 15,
|
|
height: 15
|
|
}
|
|
},
|
|
colorBar: {
|
|
width: 20,
|
|
height: 256,
|
|
arrow: {
|
|
file: 'rangearrows.gif', /* ColorBar arrow icon */
|
|
width: 20,
|
|
height: 7
|
|
}
|
|
},
|
|
picker: {
|
|
file: 'picker.gif', /* Color Picker icon */
|
|
width: 25,
|
|
height: 24
|
|
}
|
|
},
|
|
// alter these to change the text presented by the picker (e.g. different language) */
|
|
localization: {
|
|
text: {
|
|
title: 'Drag Markers To Pick A Color',
|
|
newColor: 'new',
|
|
currentColor: 'current',
|
|
ok: 'OK',
|
|
cancel: 'Cancel'
|
|
},
|
|
tooltips: {
|
|
colors: {
|
|
newColor: 'New Color - Press “OK” To Commit',
|
|
currentColor: 'Click To Revert To Original Color'
|
|
},
|
|
buttons: {
|
|
ok: 'Commit To This Color Selection',
|
|
cancel: 'Cancel And Revert To Original Color'
|
|
},
|
|
hue: {
|
|
radio: 'Set To “Hue” Color Mode',
|
|
textbox: 'Enter A “Hue” Value (0-360°)'
|
|
},
|
|
saturation: {
|
|
radio: 'Set To “Saturation” Color Mode',
|
|
textbox: 'Enter A “Saturation” Value (0-100%)'
|
|
},
|
|
value: {
|
|
radio: 'Set To “Value” Color Mode',
|
|
textbox: 'Enter A “Value” Value (0-100%)'
|
|
},
|
|
red: {
|
|
radio: 'Set To “Red” Color Mode',
|
|
textbox: 'Enter A “Red” Value (0-255)'
|
|
},
|
|
green: {
|
|
radio: 'Set To “Green” Color Mode',
|
|
textbox: 'Enter A “Green” Value (0-255)'
|
|
},
|
|
blue: {
|
|
radio: 'Set To “Blue” Color Mode',
|
|
textbox: 'Enter A “Blue” Value (0-255)'
|
|
},
|
|
alpha: {
|
|
radio: 'Set To “Alpha” Color Mode',
|
|
textbox: 'Enter A “Alpha” Value (0-100)'
|
|
},
|
|
hex: {
|
|
textbox: 'Enter A “Hex” Color Value (#000000-#ffffff)',
|
|
alpha: 'Enter A “Alpha” Value (#00-#ff)'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
return $;
|
|
};
|
|
|
|
/* globals jQuery */
|
|
/*
|
|
* Localizing script for SVG-edit UI
|
|
*
|
|
* Licensed under the MIT License
|
|
*
|
|
* Copyright(c) 2010 Narendra Sisodya
|
|
* Copyright(c) 2010 Alexis Deveria
|
|
*
|
|
*/
|
|
|
|
var $$a = jQuery;
|
|
|
|
var langParam = void 0;
|
|
function setStrings(type, obj, ids) {
|
|
// Root element to look for element from
|
|
var parent = $$a('#svg_editor').parent();
|
|
for (var sel in obj) {
|
|
var val = obj[sel];
|
|
if (!val) {
|
|
console.log(sel);
|
|
}
|
|
|
|
if (ids) {
|
|
sel = '#' + sel;
|
|
}
|
|
var $elem = parent.find(sel);
|
|
if ($elem.length) {
|
|
var elem = parent.find(sel)[0];
|
|
|
|
switch (type) {
|
|
case 'content':
|
|
for (var i = 0, node; node = elem.childNodes[i]; i++) {
|
|
if (node.nodeType === 3 && node.textContent.trim()) {
|
|
node.textContent = val;
|
|
break;
|
|
}
|
|
}
|
|
break;
|
|
|
|
case 'title':
|
|
elem.title = val;
|
|
break;
|
|
}
|
|
} else {
|
|
console.log('Missing: ' + sel);
|
|
}
|
|
}
|
|
}
|
|
|
|
var editor_ = void 0;
|
|
var init$7 = function init(editor) {
|
|
editor_ = editor;
|
|
};
|
|
|
|
var readLang = function readLang(langData) {
|
|
var more = editor_.addLangData(langParam);
|
|
$$a.each(more, function (i, m) {
|
|
if (m.data) {
|
|
langData = $$a.merge(langData, m.data);
|
|
}
|
|
});
|
|
|
|
// Old locale file, do nothing for now.
|
|
if (!langData.tools) {
|
|
return;
|
|
}
|
|
|
|
var _langData = langData,
|
|
tools = _langData.tools,
|
|
properties = _langData.properties,
|
|
config = _langData.config,
|
|
layers = _langData.layers,
|
|
common = _langData.common,
|
|
ui = _langData.ui;
|
|
|
|
|
|
setStrings('content', {
|
|
// copyrightLabel: misc.powered_by, // Currently commented out in svg-editor.html
|
|
curve_segments: properties.curve_segments,
|
|
fitToContent: tools.fitToContent,
|
|
fit_to_all: tools.fit_to_all,
|
|
fit_to_canvas: tools.fit_to_canvas,
|
|
fit_to_layer_content: tools.fit_to_layer_content,
|
|
fit_to_sel: tools.fit_to_sel,
|
|
|
|
icon_large: config.icon_large,
|
|
icon_medium: config.icon_medium,
|
|
icon_small: config.icon_small,
|
|
icon_xlarge: config.icon_xlarge,
|
|
image_opt_embed: config.image_opt_embed,
|
|
image_opt_ref: config.image_opt_ref,
|
|
includedImages: config.included_images,
|
|
|
|
largest_object: tools.largest_object,
|
|
|
|
layersLabel: layers.layers,
|
|
page: tools.page,
|
|
relativeToLabel: tools.relativeTo,
|
|
selLayerLabel: layers.move_elems_to,
|
|
selectedPredefined: config.select_predefined,
|
|
|
|
selected_objects: tools.selected_objects,
|
|
smallest_object: tools.smallest_object,
|
|
straight_segments: properties.straight_segments,
|
|
|
|
svginfo_bg_url: config.editor_img_url + ':',
|
|
svginfo_bg_note: config.editor_bg_note,
|
|
svginfo_change_background: config.background,
|
|
svginfo_dim: config.doc_dims,
|
|
svginfo_editor_prefs: config.editor_prefs,
|
|
svginfo_height: common.height,
|
|
svginfo_icons: config.icon_size,
|
|
svginfo_image_props: config.image_props,
|
|
svginfo_lang: config.language,
|
|
svginfo_title: config.doc_title,
|
|
svginfo_width: common.width,
|
|
|
|
tool_docprops_cancel: common.cancel,
|
|
tool_docprops_save: common.ok,
|
|
|
|
tool_source_cancel: common.cancel,
|
|
tool_source_save: common.ok,
|
|
|
|
tool_prefs_cancel: common.cancel,
|
|
tool_prefs_save: common.ok,
|
|
|
|
sidepanel_handle: layers.layers.split('').join(' '),
|
|
|
|
tool_clear: tools.new_doc,
|
|
tool_docprops: tools.docprops,
|
|
tool_export: tools.export_img,
|
|
tool_import: tools.import_doc,
|
|
tool_imagelib: tools.imagelib,
|
|
tool_open: tools.open_doc,
|
|
tool_save: tools.save_doc,
|
|
|
|
svginfo_units_rulers: config.units_and_rulers,
|
|
svginfo_rulers_onoff: config.show_rulers,
|
|
svginfo_unit: config.base_unit,
|
|
|
|
svginfo_grid_settings: config.grid,
|
|
svginfo_snap_onoff: config.snapping_onoff,
|
|
svginfo_snap_step: config.snapping_stepsize,
|
|
svginfo_grid_color: config.grid_color
|
|
}, true);
|
|
|
|
// Shape categories
|
|
var cats = {};
|
|
for (var o in langData.shape_cats) {
|
|
cats['#shape_cats [data-cat="' + o + '"]'] = langData.shape_cats[o];
|
|
}
|
|
|
|
// TODO: Find way to make this run after shapelib ext has loaded
|
|
setTimeout(function () {
|
|
setStrings('content', cats);
|
|
}, 2000);
|
|
|
|
// Context menus
|
|
var opts = {};
|
|
$$a.each(['cut', 'copy', 'paste', 'paste_in_place', 'delete', 'group', 'ungroup', 'move_front', 'move_up', 'move_down', 'move_back'], function () {
|
|
opts['#cmenu_canvas a[href="#' + this + '"]'] = tools[this];
|
|
});
|
|
|
|
$$a.each(['dupe', 'merge_down', 'merge_all'], function () {
|
|
opts['#cmenu_layers a[href="#' + this + '"]'] = layers[this];
|
|
});
|
|
|
|
opts['#cmenu_layers a[href="#delete"]'] = layers.del;
|
|
|
|
setStrings('content', opts);
|
|
|
|
setStrings('title', {
|
|
align_relative_to: tools.align_relative_to,
|
|
circle_cx: properties.circle_cx,
|
|
circle_cy: properties.circle_cy,
|
|
circle_r: properties.circle_r,
|
|
cornerRadiusLabel: properties.corner_radius,
|
|
ellipse_cx: properties.ellipse_cx,
|
|
ellipse_cy: properties.ellipse_cy,
|
|
ellipse_rx: properties.ellipse_rx,
|
|
ellipse_ry: properties.ellipse_ry,
|
|
fill_color: properties.fill_color,
|
|
font_family: properties.font_family,
|
|
idLabel: properties.id,
|
|
image_height: properties.image_height,
|
|
image_url: properties.image_url,
|
|
image_width: properties.image_width,
|
|
layer_delete: layers.del,
|
|
layer_down: layers.move_down,
|
|
layer_new: layers['new'],
|
|
layer_rename: layers.rename,
|
|
layer_moreopts: common.more_opts,
|
|
layer_up: layers.move_up,
|
|
line_x1: properties.line_x1,
|
|
line_x2: properties.line_x2,
|
|
line_y1: properties.line_y1,
|
|
line_y2: properties.line_y2,
|
|
linecap_butt: properties.linecap_butt,
|
|
linecap_round: properties.linecap_round,
|
|
linecap_square: properties.linecap_square,
|
|
linejoin_bevel: properties.linejoin_bevel,
|
|
linejoin_miter: properties.linejoin_miter,
|
|
linejoin_round: properties.linejoin_round,
|
|
main_icon: tools.main_menu,
|
|
mode_connect: tools.mode_connect,
|
|
tools_shapelib_show: tools.mode_shapelib,
|
|
palette: ui.palette_info,
|
|
zoom_panel: ui.zoom_level,
|
|
path_node_x: properties.node_x,
|
|
path_node_y: properties.node_y,
|
|
rect_height_tool: properties.rect_height,
|
|
rect_width_tool: properties.rect_width,
|
|
seg_type: properties.seg_type,
|
|
selLayerNames: layers.move_selected,
|
|
selected_x: properties.pos_x,
|
|
selected_y: properties.pos_y,
|
|
stroke_color: properties.stroke_color,
|
|
stroke_style: properties.stroke_style,
|
|
stroke_width: properties.stroke_width,
|
|
svginfo_title: config.doc_title,
|
|
text: properties.text_contents,
|
|
toggle_stroke_tools: ui.toggle_stroke_tools,
|
|
tool_add_subpath: tools.add_subpath,
|
|
tool_alignbottom: tools.align_bottom,
|
|
tool_aligncenter: tools.align_center,
|
|
tool_alignleft: tools.align_left,
|
|
tool_alignmiddle: tools.align_middle,
|
|
tool_alignright: tools.align_right,
|
|
tool_aligntop: tools.align_top,
|
|
tool_angle: properties.angle,
|
|
tool_blur: properties.blur,
|
|
tool_bold: properties.bold,
|
|
tool_circle: tools.mode_circle,
|
|
tool_clone: tools.clone,
|
|
tool_clone_multi: tools.clone,
|
|
tool_delete: tools.del,
|
|
tool_delete_multi: tools.del,
|
|
tool_ellipse: tools.mode_ellipse,
|
|
tool_eyedropper: tools.mode_eyedropper,
|
|
tool_fhellipse: tools.mode_fhellipse,
|
|
tool_fhpath: tools.mode_fhpath,
|
|
tool_fhrect: tools.mode_fhrect,
|
|
tool_font_size: properties.font_size,
|
|
tool_group_elements: tools.group_elements,
|
|
tool_make_link: tools.make_link,
|
|
tool_link_url: tools.set_link_url,
|
|
tool_image: tools.mode_image,
|
|
tool_italic: properties.italic,
|
|
tool_line: tools.mode_line,
|
|
tool_move_bottom: tools.move_bottom,
|
|
tool_move_top: tools.move_top,
|
|
tool_node_clone: tools.node_clone,
|
|
tool_node_delete: tools.node_delete,
|
|
tool_node_link: tools.node_link,
|
|
tool_opacity: properties.opacity,
|
|
tool_openclose_path: tools.openclose_path,
|
|
tool_path: tools.mode_path,
|
|
tool_position: tools.align_to_page,
|
|
tool_rect: tools.mode_rect,
|
|
tool_redo: tools.redo,
|
|
tool_reorient: tools.reorient_path,
|
|
tool_select: tools.mode_select,
|
|
tool_source: tools.source_save,
|
|
tool_square: tools.mode_square,
|
|
tool_text: tools.mode_text,
|
|
tool_topath: tools.to_path,
|
|
tool_undo: tools.undo,
|
|
tool_ungroup: tools.ungroup,
|
|
tool_wireframe: tools.wireframe_mode,
|
|
view_grid: tools.toggle_grid,
|
|
tool_zoom: tools.mode_zoom,
|
|
url_notice: tools.no_embed
|
|
|
|
}, true);
|
|
|
|
editor_.setLang(langParam, langData);
|
|
};
|
|
|
|
var putLocale = function putLocale(givenParam, goodLangs, conf) {
|
|
if (givenParam) {
|
|
langParam = givenParam;
|
|
} else {
|
|
langParam = $$a.pref('lang');
|
|
if (!langParam) {
|
|
if (navigator.userLanguage) {
|
|
// Explorer
|
|
langParam = navigator.userLanguage;
|
|
} else if (navigator.language) {
|
|
// FF, Opera, ...
|
|
langParam = navigator.language;
|
|
}
|
|
}
|
|
|
|
console.log('Lang: ' + langParam);
|
|
|
|
// Set to English if language is not in list of good langs
|
|
if (!goodLangs.includes(langParam) && langParam !== 'test') {
|
|
langParam = 'en';
|
|
}
|
|
|
|
// don't bother on first run if language is English
|
|
// The following line prevents setLang from running
|
|
// extensions which depend on updated uiStrings,
|
|
// so commenting it out.
|
|
// if (langParam.startsWith('en')) {return;}
|
|
}
|
|
|
|
// $.getScript(url, function (d) {
|
|
// Fails locally in Chrome 5+
|
|
// if (!d) {
|
|
var s = document.createElement('script');
|
|
var modularVersion = !('svgEditor' in window) || !window.svgEditor || window.svgEditor.modules !== false;
|
|
var url = conf.langPath + 'lang.' + langParam + '.js';
|
|
if (modularVersion) {
|
|
s.type = 'module'; // Make this the default when widely supported
|
|
}
|
|
s.src = url;
|
|
document.querySelector('head').appendChild(s);
|
|
// }
|
|
// });
|
|
};
|
|
|
|
function loadStylesheets(stylesheets) {
|
|
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
|
beforeDefault = _ref.before,
|
|
afterDefault = _ref.after,
|
|
faviconDefault = _ref.favicon,
|
|
canvasDefault = _ref.canvas,
|
|
_ref$image = _ref.image,
|
|
imageDefault = _ref$image === undefined ? true : _ref$image,
|
|
acceptErrors = _ref.acceptErrors;
|
|
|
|
stylesheets = Array.isArray(stylesheets) ? stylesheets : [stylesheets];
|
|
|
|
function setupLink(stylesheetURL) {
|
|
var options = {};
|
|
if (Array.isArray(stylesheetURL)) {
|
|
var _stylesheetURL = stylesheetURL;
|
|
|
|
var _stylesheetURL2 = slicedToArray(_stylesheetURL, 2);
|
|
|
|
stylesheetURL = _stylesheetURL2[0];
|
|
var _stylesheetURL2$ = _stylesheetURL2[1];
|
|
options = _stylesheetURL2$ === undefined ? {} : _stylesheetURL2$;
|
|
}
|
|
var _options = options,
|
|
_options$favicon = _options.favicon,
|
|
favicon = _options$favicon === undefined ? faviconDefault : _options$favicon;
|
|
var _options2 = options,
|
|
_options2$before = _options2.before,
|
|
before = _options2$before === undefined ? beforeDefault : _options2$before,
|
|
_options2$after = _options2.after,
|
|
after = _options2$after === undefined ? afterDefault : _options2$after,
|
|
_options2$canvas = _options2.canvas,
|
|
canvas = _options2$canvas === undefined ? canvasDefault : _options2$canvas,
|
|
_options2$image = _options2.image,
|
|
image = _options2$image === undefined ? imageDefault : _options2$image;
|
|
|
|
function addLink() {
|
|
if (before) {
|
|
before.before(link);
|
|
} else if (after) {
|
|
after.after(link);
|
|
} else {
|
|
document.head.appendChild(link);
|
|
}
|
|
}
|
|
|
|
var link = document.createElement('link');
|
|
return new Promise(function (resolve, reject) {
|
|
if (acceptErrors) {
|
|
reject = typeof acceptErrors === 'function' ? function (error) {
|
|
acceptErrors({ error: error, stylesheetURL: stylesheetURL, options: options, resolve: resolve, reject: reject });
|
|
} : resolve;
|
|
}
|
|
if (stylesheetURL.endsWith('.css')) {
|
|
favicon = false;
|
|
} else if (stylesheetURL.endsWith('.ico')) {
|
|
favicon = true;
|
|
}
|
|
if (favicon) {
|
|
link.rel = 'shortcut icon';
|
|
link.type = 'image/x-icon';
|
|
|
|
if (image === false) {
|
|
link.href = stylesheetURL;
|
|
addLink();
|
|
resolve(link);
|
|
return;
|
|
}
|
|
|
|
var cnv = document.createElement('canvas');
|
|
cnv.width = 16;
|
|
cnv.height = 16;
|
|
var context = cnv.getContext('2d');
|
|
var img = document.createElement('img');
|
|
img.addEventListener('error', function (error) {
|
|
reject(error);
|
|
});
|
|
img.addEventListener('load', function () {
|
|
context.drawImage(img, 0, 0);
|
|
link.href = canvas ? cnv.toDataURL('image/x-icon') : stylesheetURL;
|
|
addLink();
|
|
resolve(link);
|
|
});
|
|
img.src = stylesheetURL;
|
|
return;
|
|
}
|
|
link.rel = 'stylesheet';
|
|
link.type = 'text/css';
|
|
link.href = stylesheetURL;
|
|
addLink();
|
|
link.addEventListener('error', function (error) {
|
|
reject(error);
|
|
});
|
|
link.addEventListener('load', function () {
|
|
resolve(link);
|
|
});
|
|
});
|
|
}
|
|
|
|
return Promise.all(stylesheets.map(setupLink));
|
|
}
|
|
|
|
/* globals jQuery */
|
|
|
|
var $$b = [jqPluginJSHotkeys, jqPluginBBQ, jqPluginSVGIcons, jqPluginJGraduate, jqPluginSpinBtn, jqPluginSVG, jqPluginContextMenu, jPicker].reduce(function ($, cb) {
|
|
return cb($);
|
|
}, jQuery);
|
|
|
|
/*
|
|
if (!$.loadingStylesheets) {
|
|
$.loadingStylesheets = [];
|
|
}
|
|
*/
|
|
var stylesheet = 'svg-editor.css';
|
|
if (!$$b.loadingStylesheets.includes(stylesheet)) {
|
|
$$b.loadingStylesheets.push(stylesheet);
|
|
}
|
|
var favicon = 'images/logo.png';
|
|
if ($$b.loadingStylesheets.some(function (item) {
|
|
return !Array.isArray(item) || item[0] !== favicon;
|
|
})) {
|
|
$$b.loadingStylesheets.push([favicon, { favicon: true }]);
|
|
}
|
|
|
|
var editor = {};
|
|
|
|
// EDITOR PROPERTIES: (defined below)
|
|
// curPrefs, curConfig, canvas, storage, uiStrings
|
|
//
|
|
// STATE MAINTENANCE PROPERTIES
|
|
editor.tool_scale = 1; // Dependent on icon size, so any use to making configurable instead? Used by JQuerySpinBtn.js
|
|
editor.exportWindowCt = 0;
|
|
editor.langChanged = false;
|
|
editor.showSaveWarning = false;
|
|
editor.storagePromptClosed = false; // For use with ext-storage.js
|
|
|
|
var callbacks = [],
|
|
|
|
/**
|
|
* PREFS AND CONFIG
|
|
*/
|
|
// The iteration algorithm for defaultPrefs does not currently support array/objects
|
|
defaultPrefs = {
|
|
// EDITOR OPTIONS (DIALOG)
|
|
lang: '', // Default to "en" if locale.js detection does not detect another language
|
|
iconsize: '', // Will default to 's' if the window height is smaller than the minimum height and 'm' otherwise
|
|
bkgd_color: '#FFF',
|
|
bkgd_url: '',
|
|
// DOCUMENT PROPERTIES (DIALOG)
|
|
img_save: 'embed',
|
|
// ALERT NOTICES
|
|
// Only shows in UI as far as alert notices, but useful to remember, so keeping as pref
|
|
save_notice_done: false,
|
|
export_notice_done: false
|
|
},
|
|
defaultExtensions = ['ext-overview_window.js', 'ext-markers.js', 'ext-connector.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-imagelib.js', 'ext-grid.js', 'ext-polygon.js', 'ext-star.js', 'ext-panning.js', 'ext-storage.js'],
|
|
defaultConfig = {
|
|
// Todo: svgcanvas.js also sets and checks: show_outside_canvas, selectNew; add here?
|
|
// Change the following to preferences and add pref controls to the UI (e.g., initTool, wireframe, showlayers)?
|
|
canvasName: 'default',
|
|
canvas_expansion: 3,
|
|
initFill: {
|
|
color: 'FF0000', // solid red
|
|
opacity: 1
|
|
},
|
|
initStroke: {
|
|
width: 5,
|
|
color: '000000', // solid black
|
|
opacity: 1
|
|
},
|
|
text: {
|
|
stroke_width: 0,
|
|
font_size: 24,
|
|
font_family: 'serif'
|
|
},
|
|
initOpacity: 1,
|
|
colorPickerCSS: null, // Defaults to 'left' with a position equal to that of the fill_color or stroke_color element minus 140, and a 'bottom' equal to 40
|
|
initTool: 'select',
|
|
exportWindowType: 'new', // 'same' (todo: also support 'download')
|
|
wireframe: false,
|
|
showlayers: false,
|
|
no_save_warning: false,
|
|
// PATH CONFIGURATION
|
|
// The following path configuration items are disallowed in the URL (as should any future path configurations)
|
|
imgPath: 'images/',
|
|
langPath: 'locale/', // Default will be changed if this is a modular load
|
|
extPath: 'extensions/', // Default will be changed if this is a modular load
|
|
extIconsPath: 'extensions/',
|
|
jGraduatePath: 'jgraduate/images/',
|
|
// DOCUMENT PROPERTIES
|
|
// Change the following to a preference (already in the Document Properties dialog)?
|
|
dimensions: [640, 480],
|
|
// EDITOR OPTIONS
|
|
// Change the following to preferences (already in the Editor Options dialog)?
|
|
gridSnapping: false,
|
|
gridColor: '#000',
|
|
baseUnit: 'px',
|
|
snappingStep: 10,
|
|
showRulers: true,
|
|
// URL BEHAVIOR CONFIGURATION
|
|
preventAllURLConfig: false,
|
|
preventURLContentLoading: false,
|
|
// EXTENSION CONFIGURATION (see also preventAllURLConfig)
|
|
lockExtensions: false, // Disallowed in URL setting
|
|
noDefaultExtensions: false, // noDefaultExtensions can only be meaningfully used in `svgedit-config-iife.js` or in the URL
|
|
// EXTENSION-RELATED (GRID)
|
|
showGrid: false, // Set by ext-grid.js
|
|
// EXTENSION-RELATED (STORAGE)
|
|
noStorageOnLoad: false, // Some interaction with ext-storage.js; prevent even the loading of previously saved local storage
|
|
forceStorage: false, // Some interaction with ext-storage.js; strongly discouraged from modification as it bypasses user privacy by preventing them from choosing whether to keep local storage or not
|
|
emptyStorageOnDecline: false // Used by ext-storage.js; empty any prior storage if the user declines to store
|
|
},
|
|
|
|
/**
|
|
* LOCALE
|
|
*/
|
|
uiStrings$1 = editor.uiStrings = {};
|
|
|
|
var svgCanvas = void 0,
|
|
urldata = void 0,
|
|
isReady = false,
|
|
customExportImage = false,
|
|
customExportPDF = false,
|
|
curPrefs = {},
|
|
|
|
// Note: The difference between Prefs and Config is that Prefs
|
|
// can be changed in the UI and are stored in the browser,
|
|
// while config cannot
|
|
curConfig = {
|
|
// We do not put on defaultConfig to simplify object copying
|
|
// procedures (we obtain instead from defaultExtensions)
|
|
extensions: [],
|
|
stylesheets: [],
|
|
/**
|
|
* Can use window.location.origin to indicate the current
|
|
* origin. Can contain a '*' to allow all domains or 'null' (as
|
|
* a string) to support all file:// URLs. Cannot be set by
|
|
* URL for security reasons (not safe, at least for
|
|
* privacy or data integrity of SVG content).
|
|
* Might have been fairly safe to allow
|
|
* `new URL(window.location.href).origin` by default but
|
|
* avoiding it ensures some more security that even third
|
|
* party apps on the same domain also cannot communicate
|
|
* with this app by default.
|
|
* For use with ext-xdomain-messaging.js
|
|
* @todo We might instead make as a user-facing preference.
|
|
*/
|
|
allowedOrigins: []
|
|
};
|
|
|
|
function loadSvgString(str, callback) {
|
|
var success = svgCanvas.setSvgString(str) !== false;
|
|
callback = callback || $$b.noop;
|
|
if (success) {
|
|
callback(true); // eslint-disable-line standard/no-callback-literal
|
|
} else {
|
|
$$b.alert(uiStrings$1.notification.errorLoadingSVG, function () {
|
|
callback(false); // eslint-disable-line standard/no-callback-literal
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* EXPORTS
|
|
*/
|
|
|
|
/**
|
|
* Store and retrieve preferences
|
|
* @param {string} key The preference name to be retrieved or set
|
|
* @param {string} [val] The value. If the value supplied is missing or falsey, no change to the preference will be made.
|
|
* @returns {string} If val is missing or falsey, the value of the previously stored preference will be returned.
|
|
* @todo Can we change setting on the jQuery namespace (onto editor) to avoid conflicts?
|
|
* @todo Review whether any remaining existing direct references to
|
|
* getting curPrefs can be changed to use $.pref() getting to ensure
|
|
* defaultPrefs fallback (also for sake of allowInitialUserOverride); specifically, bkgd_color could be changed so that
|
|
* the pref dialog has a button to auto-calculate background, but otherwise uses $.pref() to be able to get default prefs
|
|
* or overridable settings
|
|
*/
|
|
$$b.pref = function (key, val) {
|
|
if (val) {
|
|
curPrefs[key] = val;
|
|
editor.curPrefs = curPrefs; // Update exported value
|
|
return;
|
|
}
|
|
return key in curPrefs ? curPrefs[key] : defaultPrefs[key];
|
|
};
|
|
|
|
/**
|
|
* EDITOR PUBLIC METHODS
|
|
* @todo Sort these methods per invocation order, ideally with init at the end
|
|
* @todo Prevent execution until init executes if dependent on it?
|
|
*/
|
|
editor.putLocale = putLocale;
|
|
editor.readLang = readLang;
|
|
|
|
/**
|
|
* Where permitted, sets canvas and/or defaultPrefs based on previous
|
|
* storage. This will override URL settings (for security reasons) but
|
|
* not `svgedit-config-iife.js` configuration (unless initial user
|
|
* overriding is explicitly permitted there via `allowInitialUserOverride`).
|
|
* @todo Split `allowInitialUserOverride` into `allowOverrideByURL` and
|
|
* `allowOverrideByUserStorage` so `svgedit-config-iife.js` can disallow some
|
|
* individual items for URL setting but allow for user storage AND/OR
|
|
* change URL setting so that it always uses a different namespace,
|
|
* so it won't affect pre-existing user storage (but then if users saves
|
|
* that, it will then be subject to tampering
|
|
*/
|
|
editor.loadContentAndPrefs = function () {
|
|
if (!curConfig.forceStorage && (curConfig.noStorageOnLoad || !document.cookie.match(/(?:^|;\s*)store=(?:prefsAndContent|prefsOnly)/))) {
|
|
return;
|
|
}
|
|
|
|
// LOAD CONTENT
|
|
if (editor.storage && ( // Cookies do not have enough available memory to hold large documents
|
|
curConfig.forceStorage || !curConfig.noStorageOnLoad && document.cookie.match(/(?:^|;\s*)store=prefsAndContent/))) {
|
|
var name = 'svgedit-' + curConfig.canvasName;
|
|
var cached = editor.storage.getItem(name);
|
|
if (cached) {
|
|
editor.loadFromString(cached);
|
|
}
|
|
}
|
|
|
|
// LOAD PREFS
|
|
for (var key in defaultPrefs) {
|
|
if (defaultPrefs.hasOwnProperty(key)) {
|
|
// It's our own config, so we don't need to iterate up the prototype chain
|
|
var storeKey = 'svg-edit-' + key;
|
|
if (editor.storage) {
|
|
var val = editor.storage.getItem(storeKey);
|
|
if (val) {
|
|
defaultPrefs[key] = String(val); // Convert to string for FF (.value fails in Webkit)
|
|
}
|
|
} else if (window.widget) {
|
|
defaultPrefs[key] = window.widget.preferenceForKey(storeKey);
|
|
} else {
|
|
var result = document.cookie.match(new RegExp('(?:^|;\\s*)' + regexEscape(encodeURIComponent(storeKey)) + '=([^;]+)'));
|
|
defaultPrefs[key] = result ? decodeURIComponent(result[1]) : '';
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Allows setting of preferences or configuration (including extensions).
|
|
* @param {Object} opts The preferences or configuration (including extensions)
|
|
* @param {Object} [cfgCfg] Describes configuration which applies to the
|
|
* particular batch of supplied options
|
|
* @param {boolean} [cfgCfg.allowInitialUserOverride=false] Set to true if you wish
|
|
* to allow initial overriding of settings by the user via the URL
|
|
* (if permitted) or previously stored preferences (if permitted);
|
|
* note that it will be too late if you make such calls in extension
|
|
* code because the URL or preference storage settings will
|
|
* have already taken place.
|
|
* @param {boolean} [cfgCfg.overwrite=true] Set to false if you wish to
|
|
* prevent the overwriting of prior-set preferences or configuration
|
|
* (URL settings will always follow this requirement for security
|
|
* reasons, so `svgedit-config-iife.js` settings cannot be overridden unless it
|
|
* explicitly permits via `allowInitialUserOverride` but extension config
|
|
* can be overridden as they will run after URL settings). Should
|
|
* not be needed in `svgedit-config-iife.js`.
|
|
*/
|
|
editor.setConfig = function (opts, cfgCfg) {
|
|
cfgCfg = cfgCfg || {};
|
|
function extendOrAdd(cfgObj, key, val) {
|
|
if (cfgObj[key] && _typeof(cfgObj[key]) === 'object') {
|
|
$$b.extend(true, cfgObj[key], val);
|
|
} else {
|
|
cfgObj[key] = val;
|
|
}
|
|
}
|
|
$$b.each(opts, function (key, val) {
|
|
if (opts.hasOwnProperty(key)) {
|
|
// Only allow prefs defined in defaultPrefs
|
|
if (defaultPrefs.hasOwnProperty(key)) {
|
|
if (cfgCfg.overwrite === false && (curConfig.preventAllURLConfig || curPrefs.hasOwnProperty(key))) {
|
|
return;
|
|
}
|
|
if (cfgCfg.allowInitialUserOverride === true) {
|
|
defaultPrefs[key] = val;
|
|
} else {
|
|
$$b.pref(key, val);
|
|
}
|
|
} else if (['extensions', 'stylesheets', 'allowedOrigins'].includes(key)) {
|
|
if (cfgCfg.overwrite === false && (curConfig.preventAllURLConfig || ['allowedOrigins', 'stylesheets'].includes(key) || key === 'extensions' && curConfig.lockExtensions)) {
|
|
return;
|
|
}
|
|
curConfig[key] = curConfig[key].concat(val); // We will handle any dupes later
|
|
// Only allow other curConfig if defined in defaultConfig
|
|
} else if (defaultConfig.hasOwnProperty(key)) {
|
|
if (cfgCfg.overwrite === false && (curConfig.preventAllURLConfig || curConfig.hasOwnProperty(key))) {
|
|
return;
|
|
}
|
|
// Potentially overwriting of previously set config
|
|
if (curConfig.hasOwnProperty(key)) {
|
|
if (cfgCfg.overwrite === false) {
|
|
return;
|
|
}
|
|
extendOrAdd(curConfig, key, val);
|
|
} else {
|
|
if (cfgCfg.allowInitialUserOverride === true) {
|
|
extendOrAdd(defaultConfig, key, val);
|
|
} else {
|
|
if (defaultConfig[key] && _typeof(defaultConfig[key]) === 'object') {
|
|
curConfig[key] = {};
|
|
$$b.extend(true, curConfig[key], val); // Merge properties recursively, e.g., on initFill, initStroke objects
|
|
} else {
|
|
curConfig[key] = val;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
editor.curConfig = curConfig; // Update exported value
|
|
};
|
|
|
|
/**
|
|
* @param {Object} opts Extension mechanisms may call setCustomHandlers with three functions: opts.open, opts.save, and opts.exportImage
|
|
* opts.open's responsibilities are:
|
|
* - invoke a file chooser dialog in 'open' mode
|
|
* - let user pick a SVG file
|
|
* - calls svgCanvas.setSvgString() with the string contents of that file
|
|
* opts.save's responsibilities are:
|
|
* - accept the string contents of the current document
|
|
* - invoke a file chooser dialog in 'save' mode
|
|
* - save the file to location chosen by the user
|
|
* opts.exportImage's responsibilities (with regard to the object it is supplied in its 2nd argument) are:
|
|
* - inform user of any issues supplied via the "issues" property
|
|
* - convert the "svg" property SVG string into an image for export;
|
|
* utilize the properties "type" (currently 'PNG', 'JPEG', 'BMP',
|
|
* 'WEBP', 'PDF'), "mimeType", and "quality" (for 'JPEG' and 'WEBP'
|
|
* types) to determine the proper output.
|
|
*/
|
|
editor.setCustomHandlers = function (opts) {
|
|
editor.ready(function () {
|
|
if (opts.open) {
|
|
$$b('#tool_open > input[type="file"]').remove();
|
|
$$b('#tool_open').show();
|
|
svgCanvas.open = opts.open;
|
|
}
|
|
if (opts.save) {
|
|
editor.showSaveWarning = false;
|
|
svgCanvas.bind('saved', opts.save);
|
|
}
|
|
if (opts.exportImage) {
|
|
customExportImage = opts.exportImage;
|
|
svgCanvas.bind('exported', customExportImage); // canvg and our RGBColor will be available to the method
|
|
}
|
|
if (opts.exportPDF) {
|
|
customExportPDF = opts.exportPDF;
|
|
svgCanvas.bind('exportedPDF', customExportPDF); // jsPDF and our RGBColor will be available to the method
|
|
}
|
|
});
|
|
};
|
|
|
|
editor.randomizeIds = function () {
|
|
svgCanvas.randomizeIds(arguments);
|
|
};
|
|
|
|
editor.init = function () {
|
|
var modularVersion = !('svgEditor' in window) || !window.svgEditor || window.svgEditor.modules !== false;
|
|
if (!modularVersion) {
|
|
Object.assign(defaultConfig, {
|
|
langPath: '../dist/locale/',
|
|
extPath: '../dist/extensions/'
|
|
});
|
|
}
|
|
|
|
// const host = location.hostname,
|
|
// onWeb = host && host.includes('.');
|
|
// Some FF versions throw security errors here when directly accessing
|
|
try {
|
|
if ('localStorage' in window) {
|
|
// && onWeb removed so Webkit works locally
|
|
editor.storage = localStorage;
|
|
}
|
|
} catch (err) {}
|
|
|
|
// Todo: Avoid var-defined functions and group functions together, etc. where possible
|
|
var goodLangs = [];
|
|
$$b('#lang_select option').each(function () {
|
|
goodLangs.push(this.value);
|
|
});
|
|
|
|
function setupCurPrefs() {
|
|
curPrefs = $$b.extend(true, {}, defaultPrefs, curPrefs); // Now safe to merge with priority for curPrefs in the event any are already set
|
|
// Export updated prefs
|
|
editor.curPrefs = curPrefs;
|
|
}
|
|
function setupCurConfig() {
|
|
curConfig = $$b.extend(true, {}, defaultConfig, curConfig); // Now safe to merge with priority for curConfig in the event any are already set
|
|
|
|
// Now deal with extensions and other array config
|
|
if (!curConfig.noDefaultExtensions) {
|
|
curConfig.extensions = curConfig.extensions.concat(defaultExtensions);
|
|
}
|
|
// ...and remove any dupes
|
|
$$b.each(['extensions', 'stylesheets', 'allowedOrigins'], function (i, cfg) {
|
|
curConfig[cfg] = $$b.grep(curConfig[cfg], function (n, i) {
|
|
// Supposedly faster than filter per http://amandeep1986.blogspot.hk/2015/02/jquery-grep-vs-js-filter.html
|
|
return i === curConfig[cfg].indexOf(n);
|
|
});
|
|
});
|
|
// Export updated config
|
|
editor.curConfig = curConfig;
|
|
}
|
|
(function () {
|
|
// Load config/data from URL if given
|
|
var src = void 0,
|
|
qstr = void 0;
|
|
urldata = $$b.deparam.querystring(true);
|
|
if (!$$b.isEmptyObject(urldata)) {
|
|
if (urldata.dimensions) {
|
|
urldata.dimensions = urldata.dimensions.split(',');
|
|
}
|
|
|
|
if (urldata.bkgd_color) {
|
|
urldata.bkgd_color = '#' + urldata.bkgd_color;
|
|
}
|
|
|
|
if (urldata.extensions) {
|
|
// For security reasons, disallow cross-domain or cross-folder extensions via URL
|
|
urldata.extensions = urldata.extensions.match(/[:/\\]/) ? '' : urldata.extensions.split(',');
|
|
}
|
|
|
|
// Disallowing extension paths via URL for
|
|
// security reasons, even for same-domain
|
|
// ones given potential to interact in undesirable
|
|
// ways with other script resources
|
|
$$b.each(['extPath', 'imgPath', 'extIconsPath', 'langPath', 'jGraduatePath'], function (pathConfig) {
|
|
if (urldata[pathConfig]) {
|
|
delete urldata[pathConfig];
|
|
}
|
|
});
|
|
|
|
editor.setConfig(urldata, { overwrite: false }); // Note: source and url (as with storagePrompt later) are not set on config but are used below
|
|
|
|
setupCurConfig();
|
|
|
|
if (!curConfig.preventURLContentLoading) {
|
|
src = urldata.source;
|
|
qstr = $$b.param.querystring();
|
|
if (!src) {
|
|
// urldata.source may have been null if it ended with '='
|
|
if (qstr.includes('source=data:')) {
|
|
src = qstr.match(/source=(data:[^&]*)/)[1];
|
|
}
|
|
}
|
|
if (src) {
|
|
if (src.startsWith('data:')) {
|
|
editor.loadFromDataURI(src);
|
|
} else {
|
|
editor.loadFromString(src);
|
|
}
|
|
return;
|
|
}
|
|
if (urldata.url) {
|
|
editor.loadFromURL(urldata.url);
|
|
return;
|
|
}
|
|
}
|
|
if (!urldata.noStorageOnLoad || curConfig.forceStorage) {
|
|
editor.loadContentAndPrefs();
|
|
}
|
|
setupCurPrefs();
|
|
} else {
|
|
setupCurConfig();
|
|
editor.loadContentAndPrefs();
|
|
setupCurPrefs();
|
|
}
|
|
})();
|
|
|
|
var setIcon = editor.setIcon = function (elem, iconId, forcedSize) {
|
|
var icon = typeof iconId === 'string' ? $$b.getSvgIcon(iconId, true) : iconId.clone();
|
|
if (!icon) {
|
|
console.log('NOTE: Icon image missing: ' + iconId);
|
|
return;
|
|
}
|
|
$$b(elem).empty().append(icon);
|
|
};
|
|
|
|
var extFunc = function extFunc() {
|
|
$$b.each(curConfig.extensions, function () {
|
|
var extname = this;
|
|
if (!extname.match(/^ext-.*\.js/)) {
|
|
// Ensure URL cannot specify some other unintended file in the extPath
|
|
return;
|
|
}
|
|
var s = document.createElement('script');
|
|
if (modularVersion) {
|
|
s.type = 'module'; // Make this the default when widely supported
|
|
}
|
|
var url = curConfig.extPath + extname;
|
|
s.src = url;
|
|
document.querySelector('head').appendChild(s);
|
|
/*
|
|
// Todo: Insert script with type=module instead when modules widely supported
|
|
$.getScript(curConfig.extPath + extname, function (d) {
|
|
// Fails locally in Chrome 5
|
|
if (!d) {
|
|
const s = document.createElement('script');
|
|
s.src = curConfig.extPath + extname;
|
|
document.querySelector('head').appendChild(s);
|
|
}
|
|
}).fail((jqxhr, settings, exception) => {
|
|
console.log(exception);
|
|
});
|
|
*/
|
|
});
|
|
|
|
// const lang = ('lang' in curPrefs) ? curPrefs.lang : null;
|
|
editor.putLocale(null, goodLangs, curConfig);
|
|
};
|
|
|
|
var stateObj = { tool_scale: editor.tool_scale };
|
|
|
|
var setFlyoutPositions = function setFlyoutPositions() {
|
|
$$b('.tools_flyout').each(function () {
|
|
var shower = $$b('#' + this.id + '_show');
|
|
var pos = shower.offset();
|
|
var w = shower.outerWidth();
|
|
$$b(this).css({ left: (pos.left + w) * editor.tool_scale, top: pos.top });
|
|
});
|
|
};
|
|
|
|
var scaleElements = function scaleElements(elems, scale) {
|
|
// const prefix = '-' + uaPrefix.toLowerCase() + '-'; // Currently unused
|
|
var sides = ['top', 'left', 'bottom', 'right'];
|
|
|
|
elems.each(function () {
|
|
// Handled in CSS
|
|
// this.style[uaPrefix + 'Transform'] = 'scale(' + scale + ')';
|
|
var el = $$b(this);
|
|
var w = el.outerWidth() * (scale - 1);
|
|
var h = el.outerHeight() * (scale - 1);
|
|
// const margins = {}; // Currently unused
|
|
|
|
for (var i = 0; i < 4; i++) {
|
|
var s = sides[i];
|
|
var cur = el.data('orig_margin-' + s);
|
|
if (cur == null) {
|
|
cur = parseInt(el.css('margin-' + s), 10);
|
|
// Cache the original margin
|
|
el.data('orig_margin-' + s, cur);
|
|
}
|
|
var val = cur * scale;
|
|
if (s === 'right') {
|
|
val += w;
|
|
} else if (s === 'bottom') {
|
|
val += h;
|
|
}
|
|
|
|
el.css('margin-' + s, val);
|
|
// el.css('outline', '1px solid red');
|
|
}
|
|
});
|
|
};
|
|
|
|
var setIconSize = editor.setIconSize = function (size) {
|
|
// const elems = $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open');
|
|
var selToscale = '#tools_top .toolset, #editor_panel > *, #history_panel > *,' + ' #main_button, #tools_left > *, #path_node_panel > *, #multiselected_panel > *,' + ' #g_panel > *, #tool_font_size > *, .tools_flyout';
|
|
|
|
var elems = $$b(selToscale);
|
|
|
|
var scale = 1;
|
|
if (typeof size === 'number') {
|
|
scale = size;
|
|
} else {
|
|
var iconSizes = { s: 0.75, m: 1, l: 1.25, xl: 1.5 };
|
|
scale = iconSizes[size];
|
|
}
|
|
|
|
stateObj.tool_scale = editor.tool_scale = scale;
|
|
|
|
setFlyoutPositions();
|
|
// $('.tools_flyout').each(function () {
|
|
// const pos = $(this).position();
|
|
// console.log($(this), pos.left+(34 * scale));
|
|
// $(this).css({left: pos.left+(34 * scale), top: pos.top+(77 * scale)});
|
|
// console.log('l', $(this).css('left'));
|
|
// });
|
|
//
|
|
// const scale = .75;
|
|
|
|
var hiddenPs = elems.parents(':hidden');
|
|
hiddenPs.css('visibility', 'hidden').show();
|
|
scaleElements(elems, scale);
|
|
hiddenPs.css('visibility', 'visible').hide();
|
|
// return;
|
|
|
|
$$b.pref('iconsize', size);
|
|
$$b('#iconsize').val(size);
|
|
|
|
// Change icon size
|
|
// $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open')
|
|
// .find('> svg, > img').each(function () {
|
|
// this.setAttribute('width',size_num);
|
|
// this.setAttribute('height',size_num);
|
|
// });
|
|
//
|
|
// $.resizeSvgIcons({
|
|
// '.flyout_arrow_horiz > svg, .flyout_arrow_horiz > img': size_num / 5,
|
|
// '#logo > svg, #logo > img': size_num * 1.3,
|
|
// '#tools_bottom .icon_label > *': (size_num === 16 ? 18 : size_num * .75)
|
|
// });
|
|
// if (size != 's') {
|
|
// $.resizeSvgIcons({'#layerbuttons svg, #layerbuttons img': size_num * .6});
|
|
// }
|
|
|
|
// Note that all rules will be prefixed with '#svg_editor' when parsed
|
|
var cssResizeRules = {
|
|
// '.tool_button,\
|
|
// .push_button,\
|
|
// .tool_button_current,\
|
|
// .push_button_pressed,\
|
|
// .disabled,\
|
|
// .icon_label,\
|
|
// .tools_flyout .tool_button': {
|
|
// width: {s: '16px', l: '32px', xl: '48px'},
|
|
// height: {s: '16px', l: '32px', xl: '48px'},
|
|
// padding: {s: '1px', l: '2px', xl: '3px'}
|
|
// },
|
|
// '.tool_sep': {
|
|
// height: {s: '16px', l: '32px', xl: '48px'},
|
|
// margin: {s: '2px 2px', l: '2px 5px', xl: '2px 8px'}
|
|
// },
|
|
// '#main_icon': {
|
|
// width: {s: '31px', l: '53px', xl: '75px'},
|
|
// height: {s: '22px', l: '42px', xl: '64px'}
|
|
// },
|
|
'#tools_top': {
|
|
left: 50 + $$b('#main_button').width(),
|
|
height: 72
|
|
},
|
|
'#tools_left': {
|
|
width: 31,
|
|
top: 74
|
|
},
|
|
'div#workarea': {
|
|
left: 38,
|
|
top: 74
|
|
// '#tools_bottom': {
|
|
// left: {s: '27px', l: '46px', xl: '65px'},
|
|
// height: {s: '58px', l: '98px', xl: '145px'}
|
|
// },
|
|
// '#color_tools': {
|
|
// 'border-spacing': {s: '0 1px'},
|
|
// 'margin-top': {s: '-1px'}
|
|
// },
|
|
// '#color_tools .icon_label': {
|
|
// width: {l:'43px', xl: '60px'}
|
|
// },
|
|
// '.color_tool': {
|
|
// height: {s: '20px'}
|
|
// },
|
|
// '#tool_opacity': {
|
|
// top: {s: '1px'},
|
|
// height: {s: 'auto', l:'auto', xl:'auto'}
|
|
// },
|
|
// '#tools_top input, #tools_bottom input': {
|
|
// 'margin-top': {s: '2px', l: '4px', xl: '5px'},
|
|
// height: {s: 'auto', l: 'auto', xl: 'auto'},
|
|
// border: {s: '1px solid #555', l: 'auto', xl: 'auto'},
|
|
// 'font-size': {s: '.9em', l: '1.2em', xl: '1.4em'}
|
|
// },
|
|
// '#zoom_panel': {
|
|
// 'margin-top': {s: '3px', l: '4px', xl: '5px'}
|
|
// },
|
|
// '#copyright, #tools_bottom .label': {
|
|
// 'font-size': {l: '1.5em', xl: '2em'},
|
|
// 'line-height': {s: '15px'}
|
|
// },
|
|
// '#tools_bottom_2': {
|
|
// width: {l: '295px', xl: '355px'},
|
|
// top: {s: '4px'}
|
|
// },
|
|
// '#tools_top > div, #tools_top': {
|
|
// 'line-height': {s: '17px', l: '34px', xl: '50px'}
|
|
// },
|
|
// '.dropdown button': {
|
|
// height: {s: '18px', l: '34px', xl: '40px'},
|
|
// 'line-height': {s: '18px', l: '34px', xl: '40px'},
|
|
// 'margin-top': {s: '3px'}
|
|
// },
|
|
// '#tools_top label, #tools_bottom label': {
|
|
// 'font-size': {s: '1em', l: '1.5em', xl: '2em'},
|
|
// height: {s: '25px', l: '42px', xl: '64px'}
|
|
// },
|
|
// 'div.toolset': {
|
|
// height: {s: '25px', l: '42px', xl: '64px'}
|
|
// },
|
|
// '#tool_bold, #tool_italic': {
|
|
// 'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
|
|
// },
|
|
// '#sidepanels': {
|
|
// top: {s: '50px', l: '88px', xl: '125px'},
|
|
// bottom: {s: '51px', l: '68px', xl: '65px'}
|
|
// },
|
|
// '#layerbuttons': {
|
|
// width: {l: '130px', xl: '175px'},
|
|
// height: {l: '24px', xl: '30px'}
|
|
// },
|
|
// '#layerlist': {
|
|
// width: {l: '128px', xl: '150px'}
|
|
// },
|
|
// '.layer_button': {
|
|
// width: {l: '19px', xl: '28px'},
|
|
// height: {l: '19px', xl: '28px'}
|
|
// },
|
|
// 'input.spin-button': {
|
|
// 'background-image': {l: 'url('images/spinbtn_updn_big.png')', xl: 'url('images/spinbtn_updn_big.png')'},
|
|
// 'background-position': {l: '100% -5px', xl: '100% -2px'},
|
|
// 'padding-right': {l: '24px', xl: '24px' }
|
|
// },
|
|
// 'input.spin-button.up': {
|
|
// 'background-position': {l: '100% -45px', xl: '100% -42px'}
|
|
// },
|
|
// 'input.spin-button.down': {
|
|
// 'background-position': {l: '100% -85px', xl: '100% -82px'}
|
|
// },
|
|
// '#position_opts': {
|
|
// width: {all: (size_num*4) +'px'}
|
|
// }
|
|
} };
|
|
|
|
var ruleElem = $$b('#tool_size_rules');
|
|
if (!ruleElem.length) {
|
|
ruleElem = $$b('<style id="tool_size_rules"></style>').appendTo('head');
|
|
} else {
|
|
ruleElem.empty();
|
|
}
|
|
|
|
if (size !== 'm') {
|
|
var styleStr = '';
|
|
$$b.each(cssResizeRules, function (selector, rules) {
|
|
selector = '#svg_editor ' + selector.replace(/,/g, ', #svg_editor');
|
|
styleStr += selector + '{';
|
|
$$b.each(rules, function (prop, values) {
|
|
var val = void 0;
|
|
if (typeof values === 'number') {
|
|
val = values * scale + 'px';
|
|
} else if (values[size] || values.all) {
|
|
val = values[size] || values.all;
|
|
}
|
|
styleStr += prop + ':' + val + ';';
|
|
});
|
|
styleStr += '}';
|
|
});
|
|
// this.style[uaPrefix + 'Transform'] = 'scale(' + scale + ')';
|
|
var prefix = '-' + uaPrefix.toLowerCase() + '-';
|
|
styleStr += selToscale + '{' + prefix + 'transform: scale(' + scale + ');}' + ' #svg_editor div.toolset .toolset {' + prefix + 'transform: scale(1); margin: 1px !important;}' + // Hack for markers
|
|
' #svg_editor .ui-slider {' + prefix + 'transform: scale(' + 1 / scale + ');}' // Hack for sliders
|
|
;
|
|
ruleElem.text(styleStr);
|
|
}
|
|
|
|
setFlyoutPositions();
|
|
};
|
|
$$b.svgIcons(curConfig.imgPath + 'svg_edit_icons.svg', {
|
|
w: 24, h: 24,
|
|
id_match: false,
|
|
no_img: !isWebkit(), // Opera & Firefox 4 gives odd behavior w/images
|
|
fallback_path: curConfig.imgPath,
|
|
fallback: {
|
|
new_image: 'clear.png',
|
|
save: 'save.png',
|
|
open: 'open.png',
|
|
source: 'source.png',
|
|
docprops: 'document-properties.png',
|
|
wireframe: 'wireframe.png',
|
|
|
|
undo: 'undo.png',
|
|
redo: 'redo.png',
|
|
|
|
select: 'select.png',
|
|
select_node: 'select_node.png',
|
|
pencil: 'fhpath.png',
|
|
pen: 'line.png',
|
|
square: 'square.png',
|
|
rect: 'rect.png',
|
|
fh_rect: 'freehand-square.png',
|
|
circle: 'circle.png',
|
|
ellipse: 'ellipse.png',
|
|
fh_ellipse: 'freehand-circle.png',
|
|
path: 'path.png',
|
|
text: 'text.png',
|
|
image: 'image.png',
|
|
zoom: 'zoom.png',
|
|
|
|
clone: 'clone.png',
|
|
node_clone: 'node_clone.png',
|
|
delete: 'delete.png',
|
|
node_delete: 'node_delete.png',
|
|
group: 'shape_group_elements.png',
|
|
ungroup: 'shape_ungroup.png',
|
|
move_top: 'move_top.png',
|
|
move_bottom: 'move_bottom.png',
|
|
to_path: 'to_path.png',
|
|
link_controls: 'link_controls.png',
|
|
reorient: 'reorient.png',
|
|
|
|
align_left: 'align-left.png',
|
|
align_center: 'align-center.png',
|
|
align_right: 'align-right.png',
|
|
align_top: 'align-top.png',
|
|
align_middle: 'align-middle.png',
|
|
align_bottom: 'align-bottom.png',
|
|
|
|
go_up: 'go-up.png',
|
|
go_down: 'go-down.png',
|
|
|
|
ok: 'save.png',
|
|
cancel: 'cancel.png',
|
|
|
|
arrow_right: 'flyouth.png',
|
|
arrow_down: 'dropdown.gif'
|
|
},
|
|
placement: {
|
|
'#logo': 'logo',
|
|
|
|
'#tool_clear div,#layer_new': 'new_image',
|
|
'#tool_save div': 'save',
|
|
'#tool_export div': 'export',
|
|
'#tool_open div div': 'open',
|
|
'#tool_import div div': 'import',
|
|
'#tool_source': 'source',
|
|
'#tool_docprops > div': 'docprops',
|
|
'#tool_wireframe': 'wireframe',
|
|
|
|
'#tool_undo': 'undo',
|
|
'#tool_redo': 'redo',
|
|
|
|
'#tool_select': 'select',
|
|
'#tool_fhpath': 'pencil',
|
|
'#tool_line': 'pen',
|
|
'#tool_rect,#tools_rect_show': 'rect',
|
|
'#tool_square': 'square',
|
|
'#tool_fhrect': 'fh_rect',
|
|
'#tool_ellipse,#tools_ellipse_show': 'ellipse',
|
|
'#tool_circle': 'circle',
|
|
'#tool_fhellipse': 'fh_ellipse',
|
|
'#tool_path': 'path',
|
|
'#tool_text,#layer_rename': 'text',
|
|
'#tool_image': 'image',
|
|
'#tool_zoom': 'zoom',
|
|
|
|
'#tool_clone,#tool_clone_multi': 'clone',
|
|
'#tool_node_clone': 'node_clone',
|
|
'#layer_delete,#tool_delete,#tool_delete_multi': 'delete',
|
|
'#tool_node_delete': 'node_delete',
|
|
'#tool_add_subpath': 'add_subpath',
|
|
'#tool_openclose_path': 'open_path',
|
|
'#tool_move_top': 'move_top',
|
|
'#tool_move_bottom': 'move_bottom',
|
|
'#tool_topath': 'to_path',
|
|
'#tool_node_link': 'link_controls',
|
|
'#tool_reorient': 'reorient',
|
|
'#tool_group_elements': 'group_elements',
|
|
'#tool_ungroup': 'ungroup',
|
|
'#tool_unlink_use': 'unlink_use',
|
|
|
|
'#tool_alignleft, #tool_posleft': 'align_left',
|
|
'#tool_aligncenter, #tool_poscenter': 'align_center',
|
|
'#tool_alignright, #tool_posright': 'align_right',
|
|
'#tool_aligntop, #tool_postop': 'align_top',
|
|
'#tool_alignmiddle, #tool_posmiddle': 'align_middle',
|
|
'#tool_alignbottom, #tool_posbottom': 'align_bottom',
|
|
'#cur_position': 'align',
|
|
|
|
'#linecap_butt,#cur_linecap': 'linecap_butt',
|
|
'#linecap_round': 'linecap_round',
|
|
'#linecap_square': 'linecap_square',
|
|
|
|
'#linejoin_miter,#cur_linejoin': 'linejoin_miter',
|
|
'#linejoin_round': 'linejoin_round',
|
|
'#linejoin_bevel': 'linejoin_bevel',
|
|
|
|
'#url_notice': 'warning',
|
|
|
|
'#layer_up': 'go_up',
|
|
'#layer_down': 'go_down',
|
|
'#layer_moreopts': 'context_menu',
|
|
'#layerlist td.layervis': 'eye',
|
|
|
|
'#tool_source_save,#tool_docprops_save,#tool_prefs_save': 'ok',
|
|
'#tool_source_cancel,#tool_docprops_cancel,#tool_prefs_cancel': 'cancel',
|
|
|
|
'#rwidthLabel, #iwidthLabel': 'width',
|
|
'#rheightLabel, #iheightLabel': 'height',
|
|
'#cornerRadiusLabel span': 'c_radius',
|
|
'#angleLabel': 'angle',
|
|
'#linkLabel,#tool_make_link,#tool_make_link_multi': 'globe_link',
|
|
'#zoomLabel': 'zoom',
|
|
'#tool_fill label': 'fill',
|
|
'#tool_stroke .icon_label': 'stroke',
|
|
'#group_opacityLabel': 'opacity',
|
|
'#blurLabel': 'blur',
|
|
'#font_sizeLabel': 'fontsize',
|
|
|
|
'.flyout_arrow_horiz': 'arrow_right',
|
|
'.dropdown button, #main_button .dropdown': 'arrow_down',
|
|
'#palette .palette_item:first, #fill_bg, #stroke_bg': 'no_color'
|
|
},
|
|
resize: {
|
|
'#logo .svg_icon': 28,
|
|
'.flyout_arrow_horiz .svg_icon': 5,
|
|
'.layer_button .svg_icon, #layerlist td.layervis .svg_icon': 14,
|
|
'.dropdown button .svg_icon': 7,
|
|
'#main_button .dropdown .svg_icon': 9,
|
|
'.palette_item:first .svg_icon': 15,
|
|
'#fill_bg .svg_icon, #stroke_bg .svg_icon': 16,
|
|
'.toolbar_button button .svg_icon': 16,
|
|
'.stroke_tool div div .svg_icon': 20,
|
|
'#tools_bottom label .svg_icon': 18
|
|
},
|
|
callback: function callback(icons) {
|
|
$$b('.toolbar_button button > svg, .toolbar_button button > img').each(function () {
|
|
$$b(this).parent().prepend(this);
|
|
});
|
|
|
|
var tleft = $$b('#tools_left');
|
|
|
|
var minHeight = void 0;
|
|
if (tleft.length) {
|
|
minHeight = tleft.offset().top + tleft.outerHeight();
|
|
}
|
|
|
|
var size = $$b.pref('iconsize');
|
|
editor.setIconSize(size || ($$b(window).height() < minHeight ? 's' : 'm'));
|
|
|
|
// Look for any missing flyout icons from plugins
|
|
$$b('.tools_flyout').each(function () {
|
|
var shower = $$b('#' + this.id + '_show');
|
|
var sel = shower.attr('data-curopt');
|
|
// Check if there's an icon here
|
|
if (!shower.children('svg, img').length) {
|
|
var clone = $$b(sel).children().clone();
|
|
if (clone.length) {
|
|
clone[0].removeAttribute('style'); // Needed for Opera
|
|
shower.append(clone);
|
|
}
|
|
}
|
|
});
|
|
|
|
function getStylesheetPriority(stylesheet) {
|
|
switch (stylesheet) {
|
|
case 'jgraduate/css/jPicker.css':
|
|
return 1;
|
|
case 'jgraduate/css/jgraduate.css':
|
|
return 2;
|
|
case 'svg-editor.css':
|
|
return 3;
|
|
case 'spinbtn/JQuerySpinBtn.css':
|
|
return 4;
|
|
default:
|
|
return Infinity;
|
|
}
|
|
}
|
|
var stylesheets = $$b.loadingStylesheets.sort(function (a, b) {
|
|
var priorityA = getStylesheetPriority(a);
|
|
var priorityB = getStylesheetPriority(b);
|
|
if (priorityA === priorityB) {
|
|
return 0;
|
|
}
|
|
return priorityA > priorityB;
|
|
});
|
|
if (curConfig.stylesheets.length) {
|
|
// Ensure a copy with unique items
|
|
stylesheets = [].concat(toConsumableArray(new Set(curConfig.stylesheets)));
|
|
var idx = stylesheets.indexOf('@default');
|
|
if (idx > -1) {
|
|
var _stylesheets;
|
|
|
|
(_stylesheets = stylesheets).splice.apply(_stylesheets, [idx, 1].concat(toConsumableArray($$b.loadingStylesheets)));
|
|
}
|
|
}
|
|
loadStylesheets(stylesheets, { acceptErrors: function acceptErrors(_ref) {
|
|
var stylesheetURL = _ref.stylesheetURL,
|
|
reject = _ref.reject,
|
|
resolve = _ref.resolve;
|
|
|
|
if ($$b.loadingStylesheets.includes(stylesheetURL)) {
|
|
reject(new Error('Missing expected stylesheet: ' + stylesheetURL));
|
|
return;
|
|
}
|
|
resolve();
|
|
} }).then(function () {
|
|
$$b('#svg_container')[0].style.visibility = 'visible';
|
|
editor.runCallbacks();
|
|
|
|
setTimeout(function () {
|
|
$$b('.flyout_arrow_horiz:empty').each(function () {
|
|
$$b(this).append($$b.getSvgIcon('arrow_right').width(5).height(5));
|
|
});
|
|
}, 1);
|
|
});
|
|
}
|
|
});
|
|
|
|
editor.canvas = svgCanvas = new SvgCanvas(document.getElementById('svgcanvas'), curConfig);
|
|
var palette = [// Todo: Make into configuration item?
|
|
'#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff', '#ff0000', '#ff7f00', '#ffff00', '#7fff00', '#00ff00', '#00ff7f', '#00ffff', '#007fff', '#0000ff', '#7f00ff', '#ff00ff', '#ff007f', '#7f0000', '#7f3f00', '#7f7f00', '#3f7f00', '#007f00', '#007f3f', '#007f7f', '#003f7f', '#00007f', '#3f007f', '#7f007f', '#7f003f', '#ffaaaa', '#ffd4aa', '#ffffaa', '#d4ffaa', '#aaffaa', '#aaffd4', '#aaffff', '#aad4ff', '#aaaaff', '#d4aaff', '#ffaaff', '#ffaad4'],
|
|
modKey = isMac() ? 'meta+' : 'ctrl+',
|
|
path = svgCanvas.pathActions,
|
|
_svgCanvas = svgCanvas,
|
|
undoMgr = _svgCanvas.undoMgr,
|
|
workarea = $$b('#workarea'),
|
|
canvMenu = $$b('#cmenu_canvas'),
|
|
paintBox = { fill: null, stroke: null };
|
|
|
|
|
|
var resizeTimer = void 0,
|
|
curScrollPos = void 0;
|
|
var exportWindow = null,
|
|
defaultImageURL = curConfig.imgPath + 'logo.png',
|
|
zoomInIcon = 'crosshair',
|
|
zoomOutIcon = 'crosshair',
|
|
uiContext = 'toolbars';
|
|
|
|
// For external openers
|
|
(function () {
|
|
// let the opener know SVG Edit is ready (now that config is set up)
|
|
var w = window.opener || window.parent;
|
|
var svgEditorReadyEvent = void 0;
|
|
if (w) {
|
|
try {
|
|
svgEditorReadyEvent = w.document.createEvent('Event');
|
|
svgEditorReadyEvent.initEvent('svgEditorReady', true, true);
|
|
w.document.documentElement.dispatchEvent(svgEditorReadyEvent);
|
|
} catch (e) {}
|
|
}
|
|
})();
|
|
|
|
// This sets up alternative dialog boxes. They mostly work the same way as
|
|
// their UI counterparts, expect instead of returning the result, a callback
|
|
// needs to be included that returns the result as its first parameter.
|
|
// In the future we may want to add additional types of dialog boxes, since
|
|
// they should be easy to handle this way.
|
|
(function () {
|
|
$$b('#dialog_container').draggable({
|
|
cancel: '#dialog_content, #dialog_buttons *',
|
|
containment: 'window'
|
|
}).css('position', 'absolute');
|
|
var box = $$b('#dialog_box'),
|
|
btnHolder = $$b('#dialog_buttons'),
|
|
dialogContent = $$b('#dialog_content'),
|
|
dbox = function dbox(type, msg, callback, defaultVal, opts, changeCb, checkbox) {
|
|
dialogContent.html('<p>' + msg.replace(/\n/g, '</p><p>') + '</p>').toggleClass('prompt', type === 'prompt');
|
|
btnHolder.empty();
|
|
|
|
var ok = $$b('<input type="button" value="' + uiStrings$1.common.ok + '">').appendTo(btnHolder);
|
|
|
|
if (type !== 'alert') {
|
|
$$b('<input type="button" value="' + uiStrings$1.common.cancel + '">').appendTo(btnHolder).click(function () {
|
|
box.hide();
|
|
if (callback) {
|
|
callback(false); // eslint-disable-line standard/no-callback-literal
|
|
}
|
|
});
|
|
}
|
|
|
|
var ctrl = void 0,
|
|
chkbx = void 0;
|
|
if (type === 'prompt') {
|
|
ctrl = $$b('<input type="text">').prependTo(btnHolder);
|
|
ctrl.val(defaultVal || '');
|
|
ctrl.bind('keydown', 'return', function () {
|
|
ok.click();
|
|
});
|
|
} else if (type === 'select') {
|
|
var div = $$b('<div style="text-align:center;">');
|
|
ctrl = $$b('<select>').appendTo(div);
|
|
if (checkbox) {
|
|
var label = $$b('<label>').text(checkbox.label);
|
|
chkbx = $$b('<input type="checkbox">').appendTo(label);
|
|
chkbx.val(checkbox.value);
|
|
if (checkbox.tooltip) {
|
|
label.attr('title', checkbox.tooltip);
|
|
}
|
|
chkbx.prop('checked', !!checkbox.checked);
|
|
div.append($$b('<div>').append(label));
|
|
}
|
|
$$b.each(opts || [], function (opt, val) {
|
|
if ((typeof val === 'undefined' ? 'undefined' : _typeof(val)) === 'object') {
|
|
ctrl.append($$b('<option>').val(val.value).html(val.text));
|
|
} else {
|
|
ctrl.append($$b('<option>').html(val));
|
|
}
|
|
});
|
|
dialogContent.append(div);
|
|
if (defaultVal) {
|
|
ctrl.val(defaultVal);
|
|
}
|
|
if (changeCb) {
|
|
ctrl.bind('change', 'return', changeCb);
|
|
}
|
|
ctrl.bind('keydown', 'return', function () {
|
|
ok.click();
|
|
});
|
|
} else if (type === 'process') {
|
|
ok.hide();
|
|
}
|
|
|
|
box.show();
|
|
|
|
ok.click(function () {
|
|
box.hide();
|
|
var resp = type === 'prompt' || type === 'select' ? ctrl.val() : true;
|
|
if (callback) {
|
|
if (chkbx) {
|
|
callback(resp, chkbx.prop('checked'));
|
|
} else {
|
|
callback(resp);
|
|
}
|
|
}
|
|
}).focus();
|
|
|
|
if (type === 'prompt' || type === 'select') {
|
|
ctrl.focus();
|
|
}
|
|
};
|
|
|
|
$$b.alert = function (msg, cb) {
|
|
dbox('alert', msg, cb);
|
|
};
|
|
$$b.confirm = function (msg, cb) {
|
|
dbox('confirm', msg, cb);
|
|
};
|
|
$$b.process_cancel = function (msg, cb) {
|
|
dbox('process', msg, cb);
|
|
};
|
|
$$b.prompt = function (msg, txt, cb) {
|
|
dbox('prompt', msg, cb, txt);
|
|
};
|
|
$$b.select = function (msg, opts, cb, changeCb, txt, checkbox) {
|
|
dbox('select', msg, cb, txt, opts, changeCb, checkbox);
|
|
};
|
|
})();
|
|
|
|
var setSelectMode = function setSelectMode() {
|
|
var curr = $$b('.tool_button_current');
|
|
if (curr.length && curr[0].id !== 'tool_select') {
|
|
curr.removeClass('tool_button_current').addClass('tool_button');
|
|
$$b('#tool_select').addClass('tool_button_current').removeClass('tool_button');
|
|
$$b('#styleoverrides').text('#svgcanvas svg *{cursor:move;pointer-events:all} #svgcanvas svg{cursor:default}');
|
|
}
|
|
svgCanvas.setMode('select');
|
|
workarea.css('cursor', 'auto');
|
|
};
|
|
|
|
// used to make the flyouts stay on the screen longer the very first time
|
|
// const flyoutspeed = 1250; // Currently unused
|
|
// let textBeingEntered = false; // Currently unused
|
|
var origTitle = $$b('title:first').text();
|
|
// Make [1,2,5] array
|
|
var rIntervals = [];
|
|
for (var i = 0.1; i < 1E5; i *= 10) {
|
|
rIntervals.push(i);
|
|
rIntervals.push(2 * i);
|
|
rIntervals.push(5 * i);
|
|
}
|
|
|
|
// This function highlights the layer passed in (by fading out the other layers)
|
|
// if no layer is passed in, this function restores the other layers
|
|
var toggleHighlightLayer = function toggleHighlightLayer(layerNameToHighlight) {
|
|
var i = void 0;
|
|
var curNames = [],
|
|
numLayers = svgCanvas.getCurrentDrawing().getNumLayers();
|
|
for (i = 0; i < numLayers; i++) {
|
|
curNames[i] = svgCanvas.getCurrentDrawing().getLayerName(i);
|
|
}
|
|
|
|
if (layerNameToHighlight) {
|
|
for (i = 0; i < numLayers; ++i) {
|
|
if (curNames[i] !== layerNameToHighlight) {
|
|
svgCanvas.getCurrentDrawing().setLayerOpacity(curNames[i], 0.5);
|
|
}
|
|
}
|
|
} else {
|
|
for (i = 0; i < numLayers; ++i) {
|
|
svgCanvas.getCurrentDrawing().setLayerOpacity(curNames[i], 1.0);
|
|
}
|
|
}
|
|
};
|
|
|
|
var populateLayers = function populateLayers() {
|
|
svgCanvas.clearSelection();
|
|
var layerlist = $$b('#layerlist tbody').empty();
|
|
var selLayerNames = $$b('#selLayerNames').empty();
|
|
var drawing = svgCanvas.getCurrentDrawing();
|
|
var currentLayerName = drawing.getCurrentLayerName();
|
|
var icon = $$b.getSvgIcon('eye');
|
|
var layer = svgCanvas.getCurrentDrawing().getNumLayers();
|
|
// we get the layers in the reverse z-order (the layer rendered on top is listed first)
|
|
while (layer--) {
|
|
var name = drawing.getLayerName(layer);
|
|
var layerTr = $$b('<tr class="layer">').toggleClass('layersel', name === currentLayerName);
|
|
var layerVis = $$b('<td class="layervis">').toggleClass('layerinvis', !drawing.getLayerVisibility(name));
|
|
var layerName = $$b('<td class="layername">' + name + '</td>');
|
|
layerlist.append(layerTr.append(layerVis, layerName));
|
|
selLayerNames.append('<option value="' + name + '">' + name + '</option>');
|
|
}
|
|
if (icon !== undefined) {
|
|
var copy = icon.clone();
|
|
$$b('td.layervis', layerlist).append(copy);
|
|
$$b.resizeSvgIcons({ 'td.layervis .svg_icon': 14 });
|
|
}
|
|
// handle selection of layer
|
|
$$b('#layerlist td.layername').mouseup(function (evt) {
|
|
$$b('#layerlist tr.layer').removeClass('layersel');
|
|
$$b(this.parentNode).addClass('layersel');
|
|
svgCanvas.setCurrentLayer(this.textContent);
|
|
evt.preventDefault();
|
|
}).mouseover(function () {
|
|
toggleHighlightLayer(this.textContent);
|
|
}).mouseout(function () {
|
|
toggleHighlightLayer();
|
|
});
|
|
$$b('#layerlist td.layervis').click(function () {
|
|
var row = $$b(this.parentNode).prevAll().length;
|
|
var name = $$b('#layerlist tr.layer:eq(' + row + ') td.layername').text();
|
|
var vis = $$b(this).hasClass('layerinvis');
|
|
svgCanvas.setLayerVisibility(name, vis);
|
|
$$b(this).toggleClass('layerinvis');
|
|
});
|
|
|
|
// if there were too few rows, let's add a few to make it not so lonely
|
|
var num = 5 - $$b('#layerlist tr.layer').size();
|
|
while (num-- > 0) {
|
|
// FIXME: there must a better way to do this
|
|
layerlist.append('<tr><td style="color:white">_</td><td/></tr>');
|
|
}
|
|
};
|
|
|
|
var editingsource = false;
|
|
var origSource = '';
|
|
var showSourceEditor = function showSourceEditor(e, forSaving) {
|
|
if (editingsource) {
|
|
return;
|
|
}
|
|
|
|
editingsource = true;
|
|
origSource = svgCanvas.getSvgString();
|
|
$$b('#save_output_btns').toggle(!!forSaving);
|
|
$$b('#tool_source_back').toggle(!forSaving);
|
|
$$b('#svg_source_textarea').val(origSource);
|
|
$$b('#svg_source_editor').fadeIn();
|
|
$$b('#svg_source_textarea').focus();
|
|
};
|
|
|
|
var selectedElement = null;
|
|
var multiselected = false;
|
|
|
|
var togglePathEditMode = function togglePathEditMode(editmode, elems) {
|
|
$$b('#path_node_panel').toggle(editmode);
|
|
$$b('#tools_bottom_2,#tools_bottom_3').toggle(!editmode);
|
|
if (editmode) {
|
|
// Change select icon
|
|
$$b('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
|
|
$$b('#tool_select').addClass('tool_button_current').removeClass('tool_button');
|
|
setIcon('#tool_select', 'select_node');
|
|
multiselected = false;
|
|
if (elems.length) {
|
|
selectedElement = elems[0];
|
|
}
|
|
} else {
|
|
setTimeout(function () {
|
|
setIcon('#tool_select', 'select');
|
|
}, 1000);
|
|
}
|
|
};
|
|
|
|
var saveHandler = function saveHandler(wind, svg) {
|
|
editor.showSaveWarning = false;
|
|
|
|
// by default, we add the XML prolog back, systems integrating SVG-edit (wikis, CMSs)
|
|
// can just provide their own custom save handler and might not want the XML prolog
|
|
svg = '<?xml version="1.0"?>\n' + svg;
|
|
|
|
// IE9 doesn't allow standalone Data URLs
|
|
// https://connect.microsoft.com/IE/feedback/details/542600/data-uri-images-fail-when-loaded-by-themselves
|
|
if (isIE()) {
|
|
showSourceEditor(0, true);
|
|
return;
|
|
}
|
|
|
|
// Since saving SVGs by opening a new window was removed in Chrome use artificial link-click
|
|
// https://stackoverflow.com/questions/45603201/window-is-not-allowed-to-navigate-top-frame-navigations-to-data-urls
|
|
var a = document.createElement('a');
|
|
a.href = 'data:image/svg+xml;base64,' + encode64(svg);
|
|
a.download = 'icon.svg';
|
|
|
|
a.click();
|
|
|
|
// Alert will only appear the first time saved OR the
|
|
// first time the bug is encountered
|
|
var done = $$b.pref('save_notice_done');
|
|
if (done !== 'all') {
|
|
var note = uiStrings$1.notification.saveFromBrowser.replace('%s', 'SVG');
|
|
// Check if FF and has <defs/>
|
|
if (isGecko()) {
|
|
if (svg.includes('<defs')) {
|
|
// warning about Mozilla bug #308590 when applicable (seems to be fixed now in Feb 2013)
|
|
note += '\n\n' + uiStrings$1.notification.defsFailOnSave;
|
|
$$b.pref('save_notice_done', 'all');
|
|
done = 'all';
|
|
} else {
|
|
$$b.pref('save_notice_done', 'part');
|
|
}
|
|
} else {
|
|
$$b.pref('save_notice_done', 'all');
|
|
}
|
|
if (done !== 'part') {
|
|
alert(note);
|
|
}
|
|
}
|
|
};
|
|
|
|
var exportHandler = function exportHandler(win, data) {
|
|
var issues = data.issues,
|
|
exportWindowName = data.exportWindowName;
|
|
|
|
|
|
if (exportWindowName) {
|
|
exportWindow = window.open(blankPageObjectURL || '', exportWindowName); // A hack to get the window via JSON-able name without opening a new one
|
|
}
|
|
|
|
if (!exportWindow || exportWindow.closed) {
|
|
$$b.alert(uiStrings$1.notification.popupWindowBlocked);
|
|
return;
|
|
}
|
|
|
|
exportWindow.location.href = data.bloburl || data.datauri;
|
|
var done = $$b.pref('export_notice_done');
|
|
if (done !== 'all') {
|
|
var note = uiStrings$1.notification.saveFromBrowser.replace('%s', data.type);
|
|
|
|
// Check if there are issues
|
|
if (issues.length) {
|
|
var pre = '\n \u2022 ';
|
|
note += '\n\n' + uiStrings$1.notification.noteTheseIssues + pre + issues.join(pre);
|
|
}
|
|
|
|
// Note that this will also prevent the notice even though new issues may appear later.
|
|
// May want to find a way to deal with that without annoying the user
|
|
$$b.pref('export_notice_done', 'all');
|
|
exportWindow.alert(note);
|
|
}
|
|
};
|
|
|
|
var operaRepaint = function operaRepaint() {
|
|
// Repaints canvas in Opera. Needed for stroke-dasharray change as well as fill change
|
|
if (!window.opera) {
|
|
return;
|
|
}
|
|
$$b('<p/>').hide().appendTo('body').remove();
|
|
};
|
|
|
|
function setStrokeOpt(opt, changeElem) {
|
|
var id = opt.id;
|
|
|
|
var bits = id.split('_');
|
|
var pre = bits[0];
|
|
var val = bits[1];
|
|
|
|
if (changeElem) {
|
|
svgCanvas.setStrokeAttr('stroke-' + pre, val);
|
|
}
|
|
operaRepaint();
|
|
setIcon('#cur_' + pre, id, 20);
|
|
$$b(opt).addClass('current').siblings().removeClass('current');
|
|
}
|
|
|
|
// This is a common function used when a tool has been clicked (chosen)
|
|
// It does several common things:
|
|
// - removes the tool_button_current class from whatever tool currently has it
|
|
// - hides any flyouts
|
|
// - adds the tool_button_current class to the button passed in
|
|
var toolButtonClick = editor.toolButtonClick = function (button, noHiding) {
|
|
if ($$b(button).hasClass('disabled')) {
|
|
return false;
|
|
}
|
|
if ($$b(button).parent().hasClass('tools_flyout')) {
|
|
return true;
|
|
}
|
|
var fadeFlyouts = 'normal';
|
|
if (!noHiding) {
|
|
$$b('.tools_flyout').fadeOut(fadeFlyouts);
|
|
}
|
|
$$b('#styleoverrides').text('');
|
|
workarea.css('cursor', 'auto');
|
|
$$b('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
|
|
$$b(button).addClass('tool_button_current').removeClass('tool_button');
|
|
return true;
|
|
};
|
|
|
|
var clickSelect = editor.clickSelect = function () {
|
|
if (toolButtonClick('#tool_select')) {
|
|
svgCanvas.setMode('select');
|
|
$$b('#styleoverrides').text('#svgcanvas svg *{cursor:move;pointer-events:all}, #svgcanvas svg{cursor:default}');
|
|
}
|
|
};
|
|
|
|
var setImageURL = editor.setImageURL = function (url) {
|
|
if (!url) {
|
|
url = defaultImageURL;
|
|
}
|
|
svgCanvas.setImageURL(url);
|
|
$$b('#image_url').val(url);
|
|
|
|
if (url.startsWith('data:')) {
|
|
// data URI found
|
|
$$b('#image_url').hide();
|
|
$$b('#change_image_url').show();
|
|
} else {
|
|
// regular URL
|
|
svgCanvas.embedImage(url, function (dataURI) {
|
|
// Couldn't embed, so show warning
|
|
$$b('#url_notice').toggle(!dataURI);
|
|
defaultImageURL = url;
|
|
});
|
|
$$b('#image_url').show();
|
|
$$b('#change_image_url').hide();
|
|
}
|
|
};
|
|
|
|
function setBackground(color, url) {
|
|
// if (color == $.pref('bkgd_color') && url == $.pref('bkgd_url')) { return; }
|
|
$$b.pref('bkgd_color', color);
|
|
$$b.pref('bkgd_url', url);
|
|
|
|
// This should be done in svgcanvas.js for the borderRect fill
|
|
svgCanvas.setBackground(color, url);
|
|
}
|
|
|
|
function promptImgURL() {
|
|
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
_ref2$cancelDeletes = _ref2.cancelDeletes,
|
|
cancelDeletes = _ref2$cancelDeletes === undefined ? false : _ref2$cancelDeletes;
|
|
|
|
var curhref = svgCanvas.getHref(selectedElement);
|
|
curhref = curhref.startsWith('data:') ? '' : curhref;
|
|
$$b.prompt(uiStrings$1.notification.enterNewImgURL, curhref, function (url) {
|
|
if (url) {
|
|
setImageURL(url);
|
|
} else if (cancelDeletes) {
|
|
svgCanvas.deleteSelectedElements();
|
|
}
|
|
});
|
|
}
|
|
|
|
var setInputWidth = function setInputWidth(elem) {
|
|
var w = Math.min(Math.max(12 + elem.value.length * 6, 50), 300);
|
|
$$b(elem).width(w);
|
|
};
|
|
|
|
function updateRulers(scanvas, zoom) {
|
|
if (!zoom) {
|
|
zoom = svgCanvas.getZoom();
|
|
}
|
|
if (!scanvas) {
|
|
scanvas = $$b('#svgcanvas');
|
|
}
|
|
|
|
var d = void 0,
|
|
i = void 0;
|
|
var limit = 30000;
|
|
var contentElem = svgCanvas.getContentElem();
|
|
var units = getTypeMap();
|
|
var unit = units[curConfig.baseUnit]; // 1 = 1px
|
|
|
|
// draw x ruler then y ruler
|
|
for (d = 0; d < 2; d++) {
|
|
var isX = d === 0;
|
|
var dim = isX ? 'x' : 'y';
|
|
var lentype = isX ? 'width' : 'height';
|
|
var contentDim = Number(contentElem.getAttribute(dim));
|
|
|
|
var $hcanvOrig = $$b('#ruler_' + dim + ' canvas:first');
|
|
|
|
// Bit of a hack to fully clear the canvas in Safari & IE9
|
|
var $hcanv = $hcanvOrig.clone();
|
|
$hcanvOrig.replaceWith($hcanv);
|
|
|
|
var hcanv = $hcanv[0];
|
|
|
|
// Set the canvas size to the width of the container
|
|
var rulerLen = scanvas[lentype]();
|
|
var totalLen = rulerLen;
|
|
hcanv.parentNode.style[lentype] = totalLen + 'px';
|
|
var ctx = hcanv.getContext('2d');
|
|
var ctxArr = void 0,
|
|
num = void 0,
|
|
ctxArrNum = void 0;
|
|
|
|
ctx.fillStyle = 'rgb(200,0,0)';
|
|
ctx.fillRect(0, 0, hcanv.width, hcanv.height);
|
|
|
|
// Remove any existing canvasses
|
|
$hcanv.siblings().remove();
|
|
|
|
// Create multiple canvases when necessary (due to browser limits)
|
|
if (rulerLen >= limit) {
|
|
ctxArrNum = parseInt(rulerLen / limit, 10) + 1;
|
|
ctxArr = [];
|
|
ctxArr[0] = ctx;
|
|
var copy = void 0;
|
|
for (i = 1; i < ctxArrNum; i++) {
|
|
hcanv[lentype] = limit;
|
|
copy = hcanv.cloneNode(true);
|
|
hcanv.parentNode.appendChild(copy);
|
|
ctxArr[i] = copy.getContext('2d');
|
|
}
|
|
|
|
copy[lentype] = rulerLen % limit;
|
|
|
|
// set copy width to last
|
|
rulerLen = limit;
|
|
}
|
|
|
|
hcanv[lentype] = rulerLen;
|
|
|
|
var uMulti = unit * zoom;
|
|
|
|
// Calculate the main number interval
|
|
var rawM = 50 / uMulti;
|
|
var multi = 1;
|
|
for (i = 0; i < rIntervals.length; i++) {
|
|
num = rIntervals[i];
|
|
multi = num;
|
|
if (rawM <= num) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
var bigInt = multi * uMulti;
|
|
|
|
ctx.font = '9px sans-serif';
|
|
|
|
var rulerD = contentDim / uMulti % multi * uMulti;
|
|
var labelPos = rulerD - bigInt;
|
|
// draw big intervals
|
|
var ctxNum = 0;
|
|
while (rulerD < totalLen) {
|
|
labelPos += bigInt;
|
|
// const realD = rulerD - contentDim; // Currently unused
|
|
|
|
var curD = Math.round(rulerD) + 0.5;
|
|
if (isX) {
|
|
ctx.moveTo(curD, 15);
|
|
ctx.lineTo(curD, 0);
|
|
} else {
|
|
ctx.moveTo(15, curD);
|
|
ctx.lineTo(0, curD);
|
|
}
|
|
|
|
num = (labelPos - contentDim) / uMulti;
|
|
var label = void 0;
|
|
if (multi >= 1) {
|
|
label = Math.round(num);
|
|
} else {
|
|
var decs = String(multi).split('.')[1].length;
|
|
label = num.toFixed(decs);
|
|
}
|
|
|
|
// Change 1000s to Ks
|
|
if (label !== 0 && label !== 1000 && label % 1000 === 0) {
|
|
label = label / 1000 + 'K';
|
|
}
|
|
|
|
if (isX) {
|
|
ctx.fillText(label, rulerD + 2, 8);
|
|
} else {
|
|
// draw label vertically
|
|
var _str = String(label).split('');
|
|
for (i = 0; i < _str.length; i++) {
|
|
ctx.fillText(_str[i], 1, rulerD + 9 + i * 9);
|
|
}
|
|
}
|
|
|
|
var part = bigInt / 10;
|
|
// draw the small intervals
|
|
for (i = 1; i < 10; i++) {
|
|
var subD = Math.round(rulerD + part * i) + 0.5;
|
|
if (ctxArr && subD > rulerLen) {
|
|
ctxNum++;
|
|
ctx.stroke();
|
|
if (ctxNum >= ctxArrNum) {
|
|
i = 10;
|
|
rulerD = totalLen;
|
|
continue;
|
|
}
|
|
ctx = ctxArr[ctxNum];
|
|
rulerD -= limit;
|
|
subD = Math.round(rulerD + part * i) + 0.5;
|
|
}
|
|
|
|
// odd lines are slighly longer
|
|
var lineNum = i % 2 ? 12 : 10;
|
|
if (isX) {
|
|
ctx.moveTo(subD, 15);
|
|
ctx.lineTo(subD, lineNum);
|
|
} else {
|
|
ctx.moveTo(15, subD);
|
|
ctx.lineTo(lineNum, subD);
|
|
}
|
|
}
|
|
rulerD += bigInt;
|
|
}
|
|
ctx.strokeStyle = '#000';
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
var updateCanvas = editor.updateCanvas = function (center, newCtr) {
|
|
var zoom = svgCanvas.getZoom();
|
|
var wArea = workarea;
|
|
var cnvs = $$b('#svgcanvas');
|
|
|
|
var w = workarea.width(),
|
|
h = workarea.height();
|
|
var wOrig = w,
|
|
hOrig = h;
|
|
var oldCtr = {
|
|
x: wArea[0].scrollLeft + wOrig / 2,
|
|
y: wArea[0].scrollTop + hOrig / 2
|
|
};
|
|
var multi = curConfig.canvas_expansion;
|
|
w = Math.max(wOrig, svgCanvas.contentW * zoom * multi);
|
|
h = Math.max(hOrig, svgCanvas.contentH * zoom * multi);
|
|
|
|
if (w === wOrig && h === hOrig) {
|
|
workarea.css('overflow', 'hidden');
|
|
} else {
|
|
workarea.css('overflow', 'scroll');
|
|
}
|
|
|
|
var oldCanY = cnvs.height() / 2;
|
|
var oldCanX = cnvs.width() / 2;
|
|
cnvs.width(w).height(h);
|
|
var newCanY = h / 2;
|
|
var newCanX = w / 2;
|
|
var offset = svgCanvas.updateCanvas(w, h);
|
|
|
|
var ratio = newCanX / oldCanX;
|
|
|
|
var scrollX = w / 2 - wOrig / 2;
|
|
var scrollY = h / 2 - hOrig / 2;
|
|
|
|
if (!newCtr) {
|
|
var oldDistX = oldCtr.x - oldCanX;
|
|
var newX = newCanX + oldDistX * ratio;
|
|
|
|
var oldDistY = oldCtr.y - oldCanY;
|
|
var newY = newCanY + oldDistY * ratio;
|
|
|
|
newCtr = {
|
|
x: newX,
|
|
y: newY
|
|
};
|
|
} else {
|
|
newCtr.x += offset.x;
|
|
newCtr.y += offset.y;
|
|
}
|
|
|
|
if (center) {
|
|
// Go to top-left for larger documents
|
|
if (svgCanvas.contentW > wArea.width()) {
|
|
// Top-left
|
|
workarea[0].scrollLeft = offset.x - 10;
|
|
workarea[0].scrollTop = offset.y - 10;
|
|
} else {
|
|
// Center
|
|
wArea[0].scrollLeft = scrollX;
|
|
wArea[0].scrollTop = scrollY;
|
|
}
|
|
} else {
|
|
wArea[0].scrollLeft = newCtr.x - wOrig / 2;
|
|
wArea[0].scrollTop = newCtr.y - hOrig / 2;
|
|
}
|
|
if (curConfig.showRulers) {
|
|
updateRulers(cnvs, zoom);
|
|
workarea.scroll();
|
|
}
|
|
if (urldata.storagePrompt !== true && !editor.storagePromptClosed) {
|
|
$$b('#dialog_box').hide();
|
|
}
|
|
};
|
|
|
|
var updateToolButtonState = function updateToolButtonState() {
|
|
var index = void 0,
|
|
button = void 0;
|
|
var bNoFill = svgCanvas.getColor('fill') === 'none';
|
|
var bNoStroke = svgCanvas.getColor('stroke') === 'none';
|
|
var buttonsNeedingStroke = ['#tool_fhpath', '#tool_line'];
|
|
var buttonsNeedingFillAndStroke = ['#tools_rect .tool_button', '#tools_ellipse .tool_button', '#tool_text', '#tool_path'];
|
|
if (bNoStroke) {
|
|
for (index in buttonsNeedingStroke) {
|
|
button = buttonsNeedingStroke[index];
|
|
if ($$b(button).hasClass('tool_button_current')) {
|
|
clickSelect();
|
|
}
|
|
$$b(button).addClass('disabled');
|
|
}
|
|
} else {
|
|
for (index in buttonsNeedingStroke) {
|
|
button = buttonsNeedingStroke[index];
|
|
$$b(button).removeClass('disabled');
|
|
}
|
|
}
|
|
|
|
if (bNoStroke && bNoFill) {
|
|
for (index in buttonsNeedingFillAndStroke) {
|
|
button = buttonsNeedingFillAndStroke[index];
|
|
if ($$b(button).hasClass('tool_button_current')) {
|
|
clickSelect();
|
|
}
|
|
$$b(button).addClass('disabled');
|
|
}
|
|
} else {
|
|
for (index in buttonsNeedingFillAndStroke) {
|
|
button = buttonsNeedingFillAndStroke[index];
|
|
$$b(button).removeClass('disabled');
|
|
}
|
|
}
|
|
|
|
svgCanvas.runExtensions('toolButtonStateUpdate', {
|
|
nofill: bNoFill,
|
|
nostroke: bNoStroke
|
|
});
|
|
|
|
// Disable flyouts if all inside are disabled
|
|
$$b('.tools_flyout').each(function () {
|
|
var shower = $$b('#' + this.id + '_show');
|
|
var hasEnabled = false;
|
|
$$b(this).children().each(function () {
|
|
if (!$$b(this).hasClass('disabled')) {
|
|
hasEnabled = true;
|
|
}
|
|
});
|
|
shower.toggleClass('disabled', !hasEnabled);
|
|
});
|
|
|
|
operaRepaint();
|
|
};
|
|
|
|
// Updates the toolbar (colors, opacity, etc) based on the selected element
|
|
// This function also updates the opacity and id elements that are in the context panel
|
|
var updateToolbar = function updateToolbar() {
|
|
var i = void 0,
|
|
len = void 0;
|
|
if (selectedElement != null) {
|
|
switch (selectedElement.tagName) {
|
|
case 'use':
|
|
case 'image':
|
|
case 'foreignObject':
|
|
break;
|
|
case 'g':
|
|
case 'a':
|
|
// Look for common styles
|
|
var childs = selectedElement.getElementsByTagName('*');
|
|
var gWidth = null;
|
|
for (i = 0, len = childs.length; i < len; i++) {
|
|
var swidth = childs[i].getAttribute('stroke-width');
|
|
|
|
if (i === 0) {
|
|
gWidth = swidth;
|
|
} else if (gWidth !== swidth) {
|
|
gWidth = null;
|
|
}
|
|
}
|
|
|
|
$$b('#stroke_width').val(gWidth === null ? '' : gWidth);
|
|
|
|
paintBox.fill.update(true);
|
|
paintBox.stroke.update(true);
|
|
|
|
break;
|
|
default:
|
|
paintBox.fill.update(true);
|
|
paintBox.stroke.update(true);
|
|
|
|
$$b('#stroke_width').val(selectedElement.getAttribute('stroke-width') || 1);
|
|
$$b('#stroke_style').val(selectedElement.getAttribute('stroke-dasharray') || 'none');
|
|
|
|
var attr = selectedElement.getAttribute('stroke-linejoin') || 'miter';
|
|
|
|
if ($$b('#linejoin_' + attr).length) {
|
|
setStrokeOpt($$b('#linejoin_' + attr)[0]);
|
|
}
|
|
|
|
attr = selectedElement.getAttribute('stroke-linecap') || 'butt';
|
|
|
|
if ($$b('#linecap_' + attr).length) {
|
|
setStrokeOpt($$b('#linecap_' + attr)[0]);
|
|
}
|
|
}
|
|
}
|
|
|
|
// All elements including image and group have opacity
|
|
if (selectedElement != null) {
|
|
var opacPerc = (selectedElement.getAttribute('opacity') || 1.0) * 100;
|
|
$$b('#group_opacity').val(opacPerc);
|
|
$$b('#opac_slider').slider('option', 'value', opacPerc);
|
|
$$b('#elem_id').val(selectedElement.id);
|
|
$$b('#elem_class').val(selectedElement.getAttribute('class'));
|
|
}
|
|
|
|
updateToolButtonState();
|
|
};
|
|
|
|
// updates the context panel tools based on the selected element
|
|
var updateContextPanel = function updateContextPanel() {
|
|
var elem = selectedElement;
|
|
// If element has just been deleted, consider it null
|
|
if (elem != null && !elem.parentNode) {
|
|
elem = null;
|
|
}
|
|
var currentLayerName = svgCanvas.getCurrentDrawing().getCurrentLayerName();
|
|
var currentMode = svgCanvas.getMode();
|
|
var unit = curConfig.baseUnit !== 'px' ? curConfig.baseUnit : null;
|
|
|
|
var isNode = currentMode === 'pathedit'; // elem ? (elem.id && elem.id.startsWith('pathpointgrip')) : false;
|
|
var menuItems = $$b('#cmenu_canvas li');
|
|
$$b('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,' + '#ellipse_panel, #line_panel, #text_panel, #image_panel, #container_panel,' + ' #use_panel, #a_panel').hide();
|
|
if (elem != null) {
|
|
var elname = elem.nodeName;
|
|
// If this is a link with no transform and one child, pretend
|
|
// its child is selected
|
|
// if (elname === 'a') { // && !$(elem).attr('transform')) {
|
|
// elem = elem.firstChild;
|
|
// }
|
|
|
|
var angle = svgCanvas.getRotationAngle(elem);
|
|
$$b('#angle').val(angle);
|
|
|
|
var blurval = svgCanvas.getBlur(elem);
|
|
$$b('#blur').val(blurval);
|
|
$$b('#blur_slider').slider('option', 'value', blurval);
|
|
|
|
if (svgCanvas.addedNew) {
|
|
if (elname === 'image' && svgCanvas.getMode() === 'image') {
|
|
// Prompt for URL if not a data URL
|
|
if (!svgCanvas.getHref(elem).startsWith('data:')) {
|
|
promptImgURL({ cancelDeletes: true });
|
|
}
|
|
}
|
|
/* else if (elname == 'text') {
|
|
// TODO: Do something here for new text
|
|
} */
|
|
}
|
|
|
|
if (!isNode && currentMode !== 'pathedit') {
|
|
$$b('#selected_panel').show();
|
|
// Elements in this array already have coord fields
|
|
if (['line', 'circle', 'ellipse'].includes(elname)) {
|
|
$$b('#xy_panel').hide();
|
|
} else {
|
|
var x = void 0,
|
|
y = void 0;
|
|
|
|
// Get BBox vals for g, polyline and path
|
|
if (['g', 'polyline', 'path'].includes(elname)) {
|
|
var bb = svgCanvas.getStrokedBBox([elem]);
|
|
if (bb) {
|
|
x = bb.x;
|
|
y = bb.y;
|
|
}
|
|
} else {
|
|
x = elem.getAttribute('x');
|
|
y = elem.getAttribute('y');
|
|
}
|
|
|
|
if (unit) {
|
|
x = convertUnit(x);
|
|
y = convertUnit(y);
|
|
}
|
|
|
|
$$b('#selected_x').val(x || 0);
|
|
$$b('#selected_y').val(y || 0);
|
|
$$b('#xy_panel').show();
|
|
}
|
|
|
|
// Elements in this array cannot be converted to a path
|
|
var noPath = !['image', 'text', 'path', 'g', 'use'].includes(elname);
|
|
$$b('#tool_topath').toggle(noPath);
|
|
$$b('#tool_reorient').toggle(elname === 'path');
|
|
$$b('#tool_reorient').toggleClass('disabled', angle === 0);
|
|
} else {
|
|
var point = path.getNodePoint();
|
|
$$b('#tool_add_subpath').removeClass('push_button_pressed').addClass('tool_button');
|
|
$$b('#tool_node_delete').toggleClass('disabled', !path.canDeleteNodes);
|
|
|
|
// Show open/close button based on selected point
|
|
setIcon('#tool_openclose_path', path.closed_subpath ? 'open_path' : 'close_path');
|
|
|
|
if (point) {
|
|
var segType = $$b('#seg_type');
|
|
if (unit) {
|
|
point.x = convertUnit(point.x);
|
|
point.y = convertUnit(point.y);
|
|
}
|
|
$$b('#path_node_x').val(point.x);
|
|
$$b('#path_node_y').val(point.y);
|
|
if (point.type) {
|
|
segType.val(point.type).removeAttr('disabled');
|
|
} else {
|
|
segType.val(4).attr('disabled', 'disabled');
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
// update contextual tools here
|
|
var panels = {
|
|
g: [],
|
|
a: [],
|
|
rect: ['rx', 'width', 'height'],
|
|
image: ['width', 'height'],
|
|
circle: ['cx', 'cy', 'r'],
|
|
ellipse: ['cx', 'cy', 'rx', 'ry'],
|
|
line: ['x1', 'y1', 'x2', 'y2'],
|
|
text: [],
|
|
use: []
|
|
};
|
|
|
|
var _elem = elem,
|
|
tagName = _elem.tagName;
|
|
|
|
// if ($(elem).data('gsvg')) {
|
|
// $('#g_panel').show();
|
|
// }
|
|
|
|
var linkHref = null;
|
|
if (tagName === 'a') {
|
|
linkHref = svgCanvas.getHref(elem);
|
|
$$b('#g_panel').show();
|
|
}
|
|
|
|
if (elem.parentNode.tagName === 'a') {
|
|
if (!$$b(elem).siblings().length) {
|
|
$$b('#a_panel').show();
|
|
linkHref = svgCanvas.getHref(elem.parentNode);
|
|
}
|
|
}
|
|
|
|
// Hide/show the make_link buttons
|
|
$$b('#tool_make_link, #tool_make_link').toggle(!linkHref);
|
|
|
|
if (linkHref) {
|
|
$$b('#link_url').val(linkHref);
|
|
}
|
|
|
|
if (panels[tagName]) {
|
|
var curPanel = panels[tagName];
|
|
|
|
$$b('#' + tagName + '_panel').show();
|
|
|
|
$$b.each(curPanel, function (i, item) {
|
|
var attrVal = elem.getAttribute(item);
|
|
if (curConfig.baseUnit !== 'px' && elem[item]) {
|
|
var bv = elem[item].baseVal.value;
|
|
attrVal = convertUnit(bv);
|
|
}
|
|
$$b('#' + tagName + '_' + item).val(attrVal || 0);
|
|
});
|
|
|
|
if (tagName === 'text') {
|
|
$$b('#text_panel').css('display', 'inline');
|
|
$$b('#tool_font_size').css('display', 'inline');
|
|
if (svgCanvas.getItalic()) {
|
|
$$b('#tool_italic').addClass('push_button_pressed').removeClass('tool_button');
|
|
} else {
|
|
$$b('#tool_italic').removeClass('push_button_pressed').addClass('tool_button');
|
|
}
|
|
if (svgCanvas.getBold()) {
|
|
$$b('#tool_bold').addClass('push_button_pressed').removeClass('tool_button');
|
|
} else {
|
|
$$b('#tool_bold').removeClass('push_button_pressed').addClass('tool_button');
|
|
}
|
|
$$b('#font_family').val(elem.getAttribute('font-family'));
|
|
$$b('#font_size').val(elem.getAttribute('font-size'));
|
|
$$b('#text').val(elem.textContent);
|
|
if (svgCanvas.addedNew) {
|
|
// Timeout needed for IE9
|
|
setTimeout(function () {
|
|
$$b('#text').focus().select();
|
|
}, 100);
|
|
}
|
|
// text
|
|
} else if (tagName === 'image' && svgCanvas.getMode() === 'image') {
|
|
setImageURL(svgCanvas.getHref(elem));
|
|
// image
|
|
} else if (tagName === 'g' || tagName === 'use') {
|
|
$$b('#container_panel').show();
|
|
var title = svgCanvas.getTitle();
|
|
var label = $$b('#g_title')[0];
|
|
label.value = title;
|
|
setInputWidth(label);
|
|
$$b('#g_title').prop('disabled', tagName === 'use');
|
|
}
|
|
}
|
|
menuItems[(tagName === 'g' ? 'en' : 'dis') + 'ableContextMenuItems']('#ungroup');
|
|
menuItems[(tagName === 'g' || !multiselected ? 'dis' : 'en') + 'ableContextMenuItems']('#group');
|
|
// if (elem != null)
|
|
} else if (multiselected) {
|
|
$$b('#multiselected_panel').show();
|
|
menuItems.enableContextMenuItems('#group').disableContextMenuItems('#ungroup');
|
|
} else {
|
|
menuItems.disableContextMenuItems('#delete,#cut,#copy,#group,#ungroup,#move_front,#move_up,#move_down,#move_back');
|
|
}
|
|
|
|
// update history buttons
|
|
$$b('#tool_undo').toggleClass('disabled', undoMgr.getUndoStackSize() === 0);
|
|
$$b('#tool_redo').toggleClass('disabled', undoMgr.getRedoStackSize() === 0);
|
|
|
|
svgCanvas.addedNew = false;
|
|
|
|
if (elem && !isNode || multiselected) {
|
|
// update the selected elements' layer
|
|
$$b('#selLayerNames').removeAttr('disabled').val(currentLayerName);
|
|
|
|
// Enable regular menu options
|
|
canvMenu.enableContextMenuItems('#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back');
|
|
} else {
|
|
$$b('#selLayerNames').attr('disabled', 'disabled');
|
|
}
|
|
};
|
|
|
|
var updateWireFrame = function updateWireFrame() {
|
|
// Test support
|
|
if (supportsNonSS) {
|
|
return;
|
|
}
|
|
|
|
var rule = '#workarea.wireframe #svgcontent * { stroke-width: ' + 1 / svgCanvas.getZoom() + 'px; }';
|
|
$$b('#wireframe_rules').text(workarea.hasClass('wireframe') ? rule : '');
|
|
};
|
|
|
|
var curContext = '';
|
|
|
|
var updateTitle = function updateTitle(title) {
|
|
title = title || svgCanvas.getDocumentTitle();
|
|
var newTitle = origTitle + (title ? ': ' + title : '');
|
|
|
|
// Remove title update with current context info, isn't really necessary
|
|
// if (curContext) {
|
|
// new_title = new_title + curContext;
|
|
// }
|
|
$$b('title:first').text(newTitle);
|
|
};
|
|
|
|
// called when we've selected a different element
|
|
/**
|
|
*
|
|
* @param win
|
|
* @param elems Array of elements that were selected
|
|
*/
|
|
var selectedChanged = function selectedChanged(win, elems) {
|
|
var mode = svgCanvas.getMode();
|
|
if (mode === 'select') {
|
|
setSelectMode();
|
|
}
|
|
var isNode = mode === 'pathedit';
|
|
// if elems[1] is present, then we have more than one element
|
|
selectedElement = elems.length === 1 || elems[1] == null ? elems[0] : null;
|
|
multiselected = elems.length >= 2 && elems[1] != null;
|
|
if (selectedElement != null) {
|
|
// unless we're already in always set the mode of the editor to select because
|
|
// upon creation of a text element the editor is switched into
|
|
// select mode and this event fires - we need our UI to be in sync
|
|
|
|
if (!isNode) {
|
|
updateToolbar();
|
|
}
|
|
} // if (elem != null)
|
|
|
|
// Deal with pathedit mode
|
|
togglePathEditMode(isNode, elems);
|
|
updateContextPanel();
|
|
svgCanvas.runExtensions('selectedChanged', {
|
|
elems: elems,
|
|
selectedElement: selectedElement,
|
|
multiselected: multiselected
|
|
});
|
|
};
|
|
|
|
// Call when part of element is in process of changing, generally
|
|
// on mousemove actions like rotate, move, etc.
|
|
var elementTransition = function elementTransition(win, elems) {
|
|
var mode = svgCanvas.getMode();
|
|
var elem = elems[0];
|
|
|
|
if (!elem) {
|
|
return;
|
|
}
|
|
|
|
multiselected = elems.length >= 2 && elems[1] != null;
|
|
// Only updating fields for single elements for now
|
|
if (!multiselected) {
|
|
switch (mode) {
|
|
case 'rotate':
|
|
var ang = svgCanvas.getRotationAngle(elem);
|
|
$$b('#angle').val(ang);
|
|
$$b('#tool_reorient').toggleClass('disabled', ang === 0);
|
|
break;
|
|
|
|
// TODO: Update values that change on move/resize, etc
|
|
// case "select":
|
|
// case "resize":
|
|
// break;
|
|
}
|
|
}
|
|
svgCanvas.runExtensions('elementTransition', {
|
|
elems: elems
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Test whether an element is a layer or not.
|
|
* @param {SVGGElement} elem - The SVGGElement to test.
|
|
* @returns {boolean} True if the element is a layer
|
|
*/
|
|
function isLayer(elem) {
|
|
return elem && elem.tagName === 'g' && Layer.CLASS_REGEX.test(elem.getAttribute('class'));
|
|
}
|
|
|
|
// called when any element has changed
|
|
var elementChanged = function elementChanged(win, elems) {
|
|
var mode = svgCanvas.getMode();
|
|
if (mode === 'select') {
|
|
setSelectMode();
|
|
}
|
|
|
|
for (var _i = 0; _i < elems.length; ++_i) {
|
|
var elem = elems[_i];
|
|
|
|
var isSvgElem = elem && elem.tagName === 'svg';
|
|
if (isSvgElem || isLayer(elem)) {
|
|
populateLayers();
|
|
// if the element changed was the svg, then it could be a resolution change
|
|
if (isSvgElem) {
|
|
updateCanvas();
|
|
}
|
|
// Update selectedElement if element is no longer part of the image.
|
|
// This occurs for the text elements in Firefox
|
|
} else if (elem && selectedElement && selectedElement.parentNode == null) {
|
|
// || elem && elem.tagName == "path" && !multiselected) { // This was added in r1430, but not sure why
|
|
selectedElement = elem;
|
|
}
|
|
}
|
|
|
|
editor.showSaveWarning = true;
|
|
|
|
// we update the contextual panel with potentially new
|
|
// positional/sizing information (we DON'T want to update the
|
|
// toolbar here as that creates an infinite loop)
|
|
// also this updates the history buttons
|
|
|
|
// we tell it to skip focusing the text control if the
|
|
// text element was previously in focus
|
|
updateContextPanel();
|
|
|
|
// In the event a gradient was flipped:
|
|
if (selectedElement && mode === 'select') {
|
|
paintBox.fill.update();
|
|
paintBox.stroke.update();
|
|
}
|
|
|
|
svgCanvas.runExtensions('elementChanged', {
|
|
elems: elems
|
|
});
|
|
};
|
|
|
|
var zoomDone = function zoomDone() {
|
|
updateWireFrame();
|
|
// updateCanvas(); // necessary?
|
|
};
|
|
|
|
var zoomChanged = svgCanvas.zoomChanged = function (win, bbox, autoCenter) {
|
|
var scrbar = 15,
|
|
|
|
// res = svgCanvas.getResolution(), // Currently unused
|
|
wArea = workarea;
|
|
// const canvasPos = $('#svgcanvas').position(); // Currently unused
|
|
var zInfo = svgCanvas.setBBoxZoom(bbox, wArea.width() - scrbar, wArea.height() - scrbar);
|
|
if (!zInfo) {
|
|
return;
|
|
}
|
|
var zoomlevel = zInfo.zoom,
|
|
bb = zInfo.bbox;
|
|
|
|
if (zoomlevel < 0.001) {
|
|
changeZoom({ value: 0.1 });
|
|
return;
|
|
}
|
|
|
|
$$b('#zoom').val((zoomlevel * 100).toFixed(1));
|
|
|
|
if (autoCenter) {
|
|
updateCanvas();
|
|
} else {
|
|
updateCanvas(false, { x: bb.x * zoomlevel + bb.width * zoomlevel / 2, y: bb.y * zoomlevel + bb.height * zoomlevel / 2 });
|
|
}
|
|
|
|
if (svgCanvas.getMode() === 'zoom' && bb.width) {
|
|
// Go to select if a zoom box was drawn
|
|
setSelectMode();
|
|
}
|
|
|
|
zoomDone();
|
|
};
|
|
|
|
var changeZoom = function changeZoom(ctl) {
|
|
var zoomlevel = ctl.value / 100;
|
|
if (zoomlevel < 0.001) {
|
|
ctl.value = 0.1;
|
|
return;
|
|
}
|
|
var zoom = svgCanvas.getZoom();
|
|
var wArea = workarea;
|
|
|
|
zoomChanged(window, {
|
|
width: 0,
|
|
height: 0,
|
|
// center pt of scroll position
|
|
x: (wArea[0].scrollLeft + wArea.width() / 2) / zoom,
|
|
y: (wArea[0].scrollTop + wArea.height() / 2) / zoom,
|
|
zoom: zoomlevel
|
|
}, true);
|
|
};
|
|
|
|
$$b('#cur_context_panel').delegate('a', 'click', function () {
|
|
var link = $$b(this);
|
|
if (link.attr('data-root')) {
|
|
svgCanvas.leaveContext();
|
|
} else {
|
|
svgCanvas.setContext(link.text());
|
|
}
|
|
svgCanvas.clearSelection();
|
|
return false;
|
|
});
|
|
|
|
var contextChanged = function contextChanged(win, context) {
|
|
var linkStr = '';
|
|
if (context) {
|
|
var _str2 = '';
|
|
linkStr = '<a href="#" data-root="y">' + svgCanvas.getCurrentDrawing().getCurrentLayerName() + '</a>';
|
|
|
|
$$b(context).parentsUntil('#svgcontent > g').andSelf().each(function () {
|
|
if (this.id) {
|
|
_str2 += ' > ' + this.id;
|
|
if (this !== context) {
|
|
linkStr += ' > <a href="#">' + this.id + '</a>';
|
|
} else {
|
|
linkStr += ' > ' + this.id;
|
|
}
|
|
}
|
|
});
|
|
|
|
curContext = _str2;
|
|
} else {
|
|
curContext = null;
|
|
}
|
|
$$b('#cur_context_panel').toggle(!!context).html(linkStr);
|
|
|
|
updateTitle();
|
|
};
|
|
|
|
// Makes sure the current selected paint is available to work with
|
|
var prepPaints = function prepPaints() {
|
|
paintBox.fill.prep();
|
|
paintBox.stroke.prep();
|
|
};
|
|
|
|
var flyoutFuncs = {};
|
|
|
|
var setFlyoutTitles = function setFlyoutTitles() {
|
|
$$b('.tools_flyout').each(function () {
|
|
var shower = $$b('#' + this.id + '_show');
|
|
if (shower.data('isLibrary')) {
|
|
return;
|
|
}
|
|
|
|
var tooltips = [];
|
|
$$b(this).children().each(function () {
|
|
tooltips.push(this.title);
|
|
});
|
|
shower[0].title = tooltips.join(' / ');
|
|
});
|
|
};
|
|
|
|
var setupFlyouts = function setupFlyouts(holders) {
|
|
$$b.each(holders, function (holdSel, btnOpts) {
|
|
var buttons = $$b(holdSel).children();
|
|
var showSel = holdSel + '_show';
|
|
var shower = $$b(showSel);
|
|
var def = false;
|
|
buttons.addClass('tool_button').unbind('click mousedown mouseup') // may not be necessary
|
|
.each(function (i) {
|
|
// Get this buttons options
|
|
var opts = btnOpts[i];
|
|
|
|
// Remember the function that goes with this ID
|
|
flyoutFuncs[opts.sel] = opts.fn;
|
|
|
|
if (opts.isDefault) {
|
|
def = i;
|
|
}
|
|
|
|
// Clicking the icon in flyout should set this set's icon
|
|
var func = function func(event) {
|
|
var options = opts;
|
|
// Find the currently selected tool if comes from keystroke
|
|
if (event.type === 'keydown') {
|
|
var flyoutIsSelected = $$b(options.parent + '_show').hasClass('tool_button_current');
|
|
var currentOperation = $$b(options.parent + '_show').attr('data-curopt');
|
|
$$b.each(holders[opts.parent], function (i, tool) {
|
|
if (tool.sel === currentOperation) {
|
|
if (!event.shiftKey || !flyoutIsSelected) {
|
|
options = tool;
|
|
} else {
|
|
options = holders[opts.parent][i + 1] || holders[opts.parent][0];
|
|
}
|
|
}
|
|
});
|
|
}
|
|
if ($$b(this).hasClass('disabled')) {
|
|
return false;
|
|
}
|
|
if (toolButtonClick(showSel)) {
|
|
options.fn();
|
|
}
|
|
var icon = void 0;
|
|
if (options.icon) {
|
|
icon = $$b.getSvgIcon(options.icon, true);
|
|
} else {
|
|
icon = $$b(options.sel).children().eq(0).clone();
|
|
}
|
|
|
|
icon[0].setAttribute('width', shower.width());
|
|
icon[0].setAttribute('height', shower.height());
|
|
shower.children(':not(.flyout_arrow_horiz)').remove();
|
|
shower.append(icon).attr('data-curopt', options.sel); // This sets the current mode
|
|
};
|
|
|
|
$$b(this).mouseup(func);
|
|
|
|
if (opts.key) {
|
|
$$b(document).bind('keydown', opts.key[0] + ' shift+' + opts.key[0], func);
|
|
}
|
|
});
|
|
|
|
if (def) {
|
|
shower.attr('data-curopt', btnOpts[def].sel);
|
|
} else if (!shower.attr('data-curopt')) {
|
|
// Set first as default
|
|
shower.attr('data-curopt', btnOpts[0].sel);
|
|
}
|
|
|
|
var timer = void 0;
|
|
var pos = $$b(showSel).position();
|
|
|
|
// Clicking the "show" icon should set the current mode
|
|
shower.mousedown(function (evt) {
|
|
if (shower.hasClass('disabled')) {
|
|
return false;
|
|
}
|
|
var holder = $$b(holdSel);
|
|
var l = pos.left + 34;
|
|
var w = holder.width() * -1;
|
|
var time = holder.data('shown_popop') ? 200 : 0;
|
|
timer = setTimeout(function () {
|
|
// Show corresponding menu
|
|
if (!shower.data('isLibrary')) {
|
|
holder.css('left', w).show().animate({
|
|
left: l
|
|
}, 150);
|
|
} else {
|
|
holder.css('left', l).show();
|
|
}
|
|
holder.data('shown_popop', true);
|
|
}, time);
|
|
evt.preventDefault();
|
|
}).mouseup(function (evt) {
|
|
clearTimeout(timer);
|
|
var opt = $$b(this).attr('data-curopt');
|
|
// Is library and popped up, so do nothing
|
|
if (shower.data('isLibrary') && $$b(showSel.replace('_show', '')).is(':visible')) {
|
|
toolButtonClick(showSel, true);
|
|
return;
|
|
}
|
|
if (toolButtonClick(showSel) && flyoutFuncs[opt]) {
|
|
flyoutFuncs[opt]();
|
|
}
|
|
});
|
|
// $('#tools_rect').mouseleave(function () { $('#tools_rect').fadeOut(); });
|
|
});
|
|
setFlyoutTitles();
|
|
setFlyoutPositions();
|
|
};
|
|
|
|
var makeFlyoutHolder = function makeFlyoutHolder(id, child) {
|
|
var div = $$b('<div>', {
|
|
class: 'tools_flyout',
|
|
id: id
|
|
}).appendTo('#svg_editor').append(child);
|
|
|
|
return div;
|
|
};
|
|
|
|
var uaPrefix = function () {
|
|
var prop = void 0;
|
|
var regex = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/;
|
|
var someScript = document.getElementsByTagName('script')[0];
|
|
for (prop in someScript.style) {
|
|
if (regex.test(prop)) {
|
|
// test is faster than match, so it's better to perform
|
|
// that on the lot and match only when necessary
|
|
return prop.match(regex)[0];
|
|
}
|
|
}
|
|
// Nothing found so far?
|
|
if ('WebkitOpacity' in someScript.style) {
|
|
return 'Webkit';
|
|
}
|
|
if ('KhtmlOpacity' in someScript.style) {
|
|
return 'Khtml';
|
|
}
|
|
|
|
return '';
|
|
}();
|
|
|
|
// TODO: Combine this with addDropDown or find other way to optimize
|
|
var addAltDropDown = function addAltDropDown(elem, list, callback, opts) {
|
|
var button = $$b(elem);
|
|
var dropUp = opts.dropUp;
|
|
|
|
list = $$b(list);
|
|
if (dropUp) {
|
|
$$b(elem).addClass('dropup');
|
|
}
|
|
list.find('li').bind('mouseup', function () {
|
|
if (opts.seticon) {
|
|
setIcon('#cur_' + button[0].id, $$b(this).children());
|
|
$$b(this).addClass('current').siblings().removeClass('current');
|
|
}
|
|
callback.apply(this, arguments);
|
|
});
|
|
|
|
var onButton = false;
|
|
$$b(window).mouseup(function (evt) {
|
|
if (!onButton) {
|
|
button.removeClass('down');
|
|
list.hide();
|
|
list.css({ top: 0, left: 0 });
|
|
}
|
|
onButton = false;
|
|
});
|
|
|
|
// const height = list.height(); // Currently unused
|
|
button.bind('mousedown', function () {
|
|
var off = button.offset();
|
|
if (dropUp) {
|
|
off.top -= list.height();
|
|
off.left += 8;
|
|
} else {
|
|
off.top += button.height();
|
|
}
|
|
list.offset(off);
|
|
|
|
if (!button.hasClass('down')) {
|
|
list.show();
|
|
onButton = true;
|
|
} else {
|
|
// CSS position must be reset for Webkit
|
|
list.hide();
|
|
list.css({ top: 0, left: 0 });
|
|
}
|
|
button.toggleClass('down');
|
|
}).hover(function () {
|
|
onButton = true;
|
|
}).mouseout(function () {
|
|
onButton = false;
|
|
});
|
|
|
|
if (opts.multiclick) {
|
|
list.mousedown(function () {
|
|
onButton = true;
|
|
});
|
|
}
|
|
};
|
|
|
|
var extsPreLang = [];
|
|
var extAdded = function extAdded(win, ext) {
|
|
if (!ext) {
|
|
return;
|
|
}
|
|
var cbCalled = false;
|
|
var resizeDone = false;
|
|
var cbReady = true; // Set to false to delay callback (e.g. wait for $.svgIcons)
|
|
|
|
if (ext.langReady) {
|
|
if (editor.langChanged) {
|
|
// We check for this since the "lang" pref could have been set by storage
|
|
var lang = $$b.pref('lang');
|
|
ext.langReady({ lang: lang, uiStrings: uiStrings$1 });
|
|
} else {
|
|
extsPreLang.push(ext);
|
|
}
|
|
}
|
|
|
|
function prepResize() {
|
|
if (resizeTimer) {
|
|
clearTimeout(resizeTimer);
|
|
resizeTimer = null;
|
|
}
|
|
if (!resizeDone) {
|
|
resizeTimer = setTimeout(function () {
|
|
resizeDone = true;
|
|
setIconSize($$b.pref('iconsize'));
|
|
}, 50);
|
|
}
|
|
}
|
|
|
|
var runCallback = function runCallback() {
|
|
if (ext.callback && !cbCalled && cbReady) {
|
|
cbCalled = true;
|
|
ext.callback();
|
|
}
|
|
};
|
|
|
|
var btnSelects = [];
|
|
|
|
if (ext.context_tools) {
|
|
$$b.each(ext.context_tools, function (i, tool) {
|
|
// Add select tool
|
|
var contId = tool.container_id ? ' id="' + tool.container_id + '"' : '';
|
|
|
|
var panel = $$b('#' + tool.panel);
|
|
// create the panel if it doesn't exist
|
|
if (!panel.length) {
|
|
panel = $$b('<div>', { id: tool.panel }).appendTo('#tools_top');
|
|
}
|
|
|
|
var html = void 0;
|
|
// TODO: Allow support for other types, or adding to existing tool
|
|
switch (tool.type) {
|
|
case 'tool_button':
|
|
html = '<div class="tool_button">' + tool.id + '</div>';
|
|
var div = $$b(html).appendTo(panel);
|
|
if (tool.events) {
|
|
$$b.each(tool.events, function (evt, func) {
|
|
$$b(div).bind(evt, func);
|
|
});
|
|
}
|
|
break;
|
|
case 'select':
|
|
html = '<label' + contId + '>' + '<select id="' + tool.id + '">';
|
|
$$b.each(tool.options, function (val, text) {
|
|
var sel = val === tool.defval ? ' selected' : '';
|
|
html += '<option value="' + val + '"' + sel + '>' + text + '</option>';
|
|
});
|
|
html += '</select></label>';
|
|
// Creates the tool, hides & adds it, returns the select element
|
|
var sel = $$b(html).appendTo(panel).find('select');
|
|
|
|
$$b.each(tool.events, function (evt, func) {
|
|
$$b(sel).bind(evt, func);
|
|
});
|
|
break;
|
|
case 'button-select':
|
|
html = '<div id="' + tool.id + '" class="dropdown toolset" title="' + tool.title + '">' + '<div id="cur_' + tool.id + '" class="icon_label"></div><button></button></div>';
|
|
|
|
var list = $$b('<ul id="' + tool.id + '_opts"></ul>').appendTo('#option_lists');
|
|
|
|
if (tool.colnum) {
|
|
list.addClass('optcols' + tool.colnum);
|
|
}
|
|
|
|
// Creates the tool, hides & adds it, returns the select element
|
|
/* const dropdown = */$$b(html).appendTo(panel).children();
|
|
|
|
btnSelects.push({
|
|
elem: '#' + tool.id,
|
|
list: '#' + tool.id + '_opts',
|
|
title: tool.title,
|
|
callback: tool.events.change,
|
|
cur: '#cur_' + tool.id
|
|
});
|
|
|
|
break;
|
|
case 'input':
|
|
html = '<label' + contId + '>' + '<span id="' + tool.id + '_label">' + tool.label + ':</span>' + '<input id="' + tool.id + '" title="' + tool.title + '" size="' + (tool.size || '4') + '" value="' + (tool.defval || '') + '" type="text"/></label>';
|
|
|
|
// Creates the tool, hides & adds it, returns the select element
|
|
|
|
// Add to given tool.panel
|
|
var inp = $$b(html).appendTo(panel).find('input');
|
|
|
|
if (tool.spindata) {
|
|
inp.SpinButton(tool.spindata);
|
|
}
|
|
|
|
if (tool.events) {
|
|
$$b.each(tool.events, function (evt, func) {
|
|
inp.bind(evt, func);
|
|
});
|
|
}
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
|
|
if (ext.buttons) {
|
|
var fallbackObj = {},
|
|
placementObj = {},
|
|
svgicons = ext.svgicons,
|
|
holders = {};
|
|
|
|
// Add buttons given by extension
|
|
$$b.each(ext.buttons, function (i, btn) {
|
|
var icon = void 0,
|
|
svgicon = void 0,
|
|
tlsId = void 0;
|
|
|
|
var id = btn.id;
|
|
|
|
var num = i;
|
|
// Give button a unique ID
|
|
while ($$b('#' + id).length) {
|
|
id = btn.id + '_' + ++num;
|
|
}
|
|
|
|
if (!svgicons) {
|
|
icon = $$b('<img src="' + btn.icon + '">');
|
|
} else {
|
|
fallbackObj[id] = btn.icon;
|
|
svgicon = btn.svgicon || btn.id;
|
|
if (btn.type === 'app_menu') {
|
|
placementObj['#' + id + ' > div'] = svgicon;
|
|
} else {
|
|
placementObj['#' + id] = svgicon;
|
|
}
|
|
}
|
|
|
|
var cls = void 0,
|
|
parent = void 0;
|
|
|
|
// Set button up according to its type
|
|
switch (btn.type) {
|
|
case 'mode_flyout':
|
|
case 'mode':
|
|
cls = 'tool_button';
|
|
parent = '#tools_left';
|
|
break;
|
|
case 'context':
|
|
cls = 'tool_button';
|
|
parent = '#' + btn.panel;
|
|
// create the panel if it doesn't exist
|
|
if (!$$b(parent).length) {
|
|
$$b('<div>', { id: btn.panel }).appendTo('#tools_top');
|
|
}
|
|
break;
|
|
case 'app_menu':
|
|
cls = '';
|
|
parent = '#main_menu ul';
|
|
break;
|
|
}
|
|
var flyoutHolder = void 0,
|
|
curH = void 0,
|
|
showBtn = void 0,
|
|
refData = void 0,
|
|
refBtn = void 0;
|
|
var button = $$b(btn.list || btn.type === 'app_menu' ? '<li/>' : '<div/>').attr('id', id).attr('title', btn.title).addClass(cls);
|
|
if (!btn.includeWith && !btn.list) {
|
|
if ('position' in btn) {
|
|
if ($$b(parent).children().eq(btn.position).length) {
|
|
$$b(parent).children().eq(btn.position).before(button);
|
|
} else {
|
|
$$b(parent).children().last().before(button);
|
|
}
|
|
} else {
|
|
button.appendTo(parent);
|
|
}
|
|
|
|
if (btn.type === 'mode_flyout') {
|
|
// Add to flyout menu / make flyout menu
|
|
// const opts = btn.includeWith;
|
|
// // opts.button, default, position
|
|
refBtn = $$b(button);
|
|
|
|
flyoutHolder = refBtn.parent();
|
|
// Create a flyout menu if there isn't one already
|
|
if (!refBtn.parent().hasClass('tools_flyout')) {
|
|
// Create flyout placeholder
|
|
tlsId = refBtn[0].id.replace('tool_', 'tools_');
|
|
showBtn = refBtn.clone().attr('id', tlsId + '_show').append($$b('<div>', { class: 'flyout_arrow_horiz' }));
|
|
|
|
refBtn.before(showBtn);
|
|
|
|
// Create a flyout div
|
|
flyoutHolder = makeFlyoutHolder(tlsId, refBtn);
|
|
flyoutHolder.data('isLibrary', true);
|
|
showBtn.data('isLibrary', true);
|
|
}
|
|
// refData = Actions.getButtonData(opts.button);
|
|
|
|
placementObj['#' + tlsId + '_show'] = btn.id;
|
|
// TODO: Find way to set the current icon using the iconloader if this is not default
|
|
|
|
// Include data for extension button as well as ref button
|
|
curH = holders['#' + flyoutHolder[0].id] = [{
|
|
sel: '#' + id,
|
|
fn: btn.events.click,
|
|
icon: btn.id,
|
|
// key: btn.key,
|
|
isDefault: true
|
|
}, refData];
|
|
//
|
|
// // {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}
|
|
//
|
|
// const pos = ('position' in opts)?opts.position:'last';
|
|
// const len = flyoutHolder.children().length;
|
|
//
|
|
// // Add at given position or end
|
|
// if (!isNaN(pos) && pos >= 0 && pos < len) {
|
|
// flyoutHolder.children().eq(pos).before(button);
|
|
// } else {
|
|
// flyoutHolder.append(button);
|
|
// curH.reverse();
|
|
// }
|
|
} else if (btn.type === 'app_menu') {
|
|
button.append('<div>').append(btn.title);
|
|
}
|
|
} else if (btn.list) {
|
|
// Add button to list
|
|
button.addClass('push_button');
|
|
$$b('#' + btn.list + '_opts').append(button);
|
|
if (btn.isDefault) {
|
|
$$b('#cur_' + btn.list).append(button.children().clone());
|
|
svgicon = btn.svgicon || btn.id;
|
|
placementObj['#cur_' + btn.list] = svgicon;
|
|
}
|
|
} else if (btn.includeWith) {
|
|
// Add to flyout menu / make flyout menu
|
|
var opts = btn.includeWith;
|
|
// opts.button, default, position
|
|
refBtn = $$b(opts.button);
|
|
|
|
flyoutHolder = refBtn.parent();
|
|
// Create a flyout menu if there isn't one already
|
|
if (!refBtn.parent().hasClass('tools_flyout')) {
|
|
// Create flyout placeholder
|
|
tlsId = refBtn[0].id.replace('tool_', 'tools_');
|
|
showBtn = refBtn.clone().attr('id', tlsId + '_show').append($$b('<div>', { class: 'flyout_arrow_horiz' }));
|
|
|
|
refBtn.before(showBtn);
|
|
|
|
// Create a flyout div
|
|
flyoutHolder = makeFlyoutHolder(tlsId, refBtn);
|
|
}
|
|
|
|
refData = Actions.getButtonData(opts.button);
|
|
|
|
if (opts.isDefault) {
|
|
placementObj['#' + tlsId + '_show'] = btn.id;
|
|
}
|
|
// TODO: Find way to set the current icon using the iconloader if this is not default
|
|
|
|
// Include data for extension button as well as ref button
|
|
curH = holders['#' + flyoutHolder[0].id] = [{
|
|
sel: '#' + id,
|
|
fn: btn.events.click,
|
|
icon: btn.id,
|
|
key: btn.key,
|
|
isDefault: btn.includeWith ? btn.includeWith.isDefault : 0
|
|
}, refData];
|
|
|
|
// {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}
|
|
|
|
var pos = 'position' in opts ? opts.position : 'last';
|
|
var len = flyoutHolder.children().length;
|
|
|
|
// Add at given position or end
|
|
if (!isNaN(pos) && pos >= 0 && pos < len) {
|
|
flyoutHolder.children().eq(pos).before(button);
|
|
} else {
|
|
flyoutHolder.append(button);
|
|
curH.reverse();
|
|
}
|
|
}
|
|
|
|
if (!svgicons) {
|
|
button.append(icon);
|
|
}
|
|
|
|
if (!btn.list) {
|
|
// Add given events to button
|
|
$$b.each(btn.events, function (name, func) {
|
|
if (name === 'click' && btn.type === 'mode') {
|
|
if (btn.includeWith) {
|
|
button.bind(name, func);
|
|
} else {
|
|
button.bind(name, function () {
|
|
if (toolButtonClick(button)) {
|
|
func();
|
|
}
|
|
});
|
|
}
|
|
if (btn.key) {
|
|
$$b(document).bind('keydown', btn.key, func);
|
|
if (btn.title) {
|
|
button.attr('title', btn.title + ' [' + btn.key + ']');
|
|
}
|
|
}
|
|
} else {
|
|
button.bind(name, func);
|
|
}
|
|
});
|
|
}
|
|
|
|
setupFlyouts(holders);
|
|
});
|
|
|
|
$$b.each(btnSelects, function () {
|
|
addAltDropDown(this.elem, this.list, this.callback, { seticon: true });
|
|
});
|
|
|
|
if (svgicons) {
|
|
cbReady = false; // Delay callback
|
|
}
|
|
|
|
$$b.svgIcons(svgicons, {
|
|
w: 24, h: 24,
|
|
id_match: false,
|
|
no_img: !isWebkit(),
|
|
fallback: fallbackObj,
|
|
placement: placementObj,
|
|
callback: function callback(icons) {
|
|
// Non-ideal hack to make the icon match the current size
|
|
// if (curPrefs.iconsize && curPrefs.iconsize !== 'm') {
|
|
if ($$b.pref('iconsize') !== 'm') {
|
|
prepResize();
|
|
}
|
|
cbReady = true; // Ready for callback
|
|
runCallback();
|
|
}
|
|
});
|
|
}
|
|
|
|
runCallback();
|
|
};
|
|
|
|
var getPaint = function getPaint(color, opac, type) {
|
|
// update the editor's fill paint
|
|
var opts = { alpha: opac };
|
|
if (color.startsWith('url(#')) {
|
|
var refElem = svgCanvas.getRefElem(color);
|
|
if (refElem) {
|
|
refElem = refElem.cloneNode(true);
|
|
} else {
|
|
refElem = $$b('#' + type + '_color defs *')[0];
|
|
}
|
|
opts[refElem.tagName] = refElem;
|
|
} else if (color.startsWith('#')) {
|
|
opts.solidColor = color.substr(1);
|
|
} else {
|
|
opts.solidColor = 'none';
|
|
}
|
|
return new $$b.jGraduate.Paint(opts);
|
|
};
|
|
|
|
// $('#text').focus(function () { textBeingEntered = true; });
|
|
// $('#text').blur(function () { textBeingEntered = false; });
|
|
|
|
// bind the selected event to our function that handles updates to the UI
|
|
svgCanvas.bind('selected', selectedChanged);
|
|
svgCanvas.bind('transition', elementTransition);
|
|
svgCanvas.bind('changed', elementChanged);
|
|
svgCanvas.bind('saved', saveHandler);
|
|
svgCanvas.bind('exported', exportHandler);
|
|
svgCanvas.bind('exportedPDF', function (win, data) {
|
|
var exportWindowName = data.exportWindowName;
|
|
|
|
if (exportWindowName) {
|
|
exportWindow = window.open('', exportWindowName); // A hack to get the window via JSON-able name without opening a new one
|
|
}
|
|
exportWindow.location.href = data.dataurlstring;
|
|
});
|
|
svgCanvas.bind('zoomed', zoomChanged);
|
|
svgCanvas.bind('zoomDone', zoomDone);
|
|
svgCanvas.bind('updateCanvas', function (win, _ref3) {
|
|
var center = _ref3.center,
|
|
newCtr = _ref3.newCtr;
|
|
|
|
updateCanvas(center, newCtr);
|
|
});
|
|
svgCanvas.bind('contextset', contextChanged);
|
|
svgCanvas.bind('extension_added', extAdded);
|
|
svgCanvas.textActions.setInputElem($$b('#text')[0]);
|
|
|
|
var str = '<div class="palette_item" data-rgb="none"></div>';
|
|
$$b.each(palette, function (i, item) {
|
|
str += '<div class="palette_item" style="background-color: ' + item + ';" data-rgb="' + item + '"></div>';
|
|
});
|
|
$$b('#palette').append(str);
|
|
|
|
// Set up editor background functionality
|
|
// TODO add checkerboard as "pattern"
|
|
var colorBlocks = ['#FFF', '#888', '#000']; // ,'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP%2F%2F%2F9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG%2Bgq4jM3IFLJgpswNly%2FXkcBpIiVaInlLJr9FZWAQA7)'];
|
|
str = '';
|
|
$$b.each(colorBlocks, function () {
|
|
str += '<div class="color_block" style="background-color:' + this + ';"></div>';
|
|
});
|
|
$$b('#bg_blocks').append(str);
|
|
var blocks = $$b('#bg_blocks div');
|
|
var curBg = 'cur_background';
|
|
blocks.each(function () {
|
|
var blk = $$b(this);
|
|
blk.click(function () {
|
|
blocks.removeClass(curBg);
|
|
$$b(this).addClass(curBg);
|
|
});
|
|
});
|
|
|
|
setBackground($$b.pref('bkgd_color'), $$b.pref('bkgd_url'));
|
|
|
|
$$b('#image_save_opts input').val([$$b.pref('img_save')]);
|
|
|
|
var changeRectRadius = function changeRectRadius(ctl) {
|
|
svgCanvas.setRectRadius(ctl.value);
|
|
};
|
|
|
|
var changeFontSize = function changeFontSize(ctl) {
|
|
svgCanvas.setFontSize(ctl.value);
|
|
};
|
|
|
|
var changeStrokeWidth = function changeStrokeWidth(ctl) {
|
|
var val = ctl.value;
|
|
if (val === 0 && selectedElement && ['line', 'polyline'].includes(selectedElement.nodeName)) {
|
|
val = ctl.value = 1;
|
|
}
|
|
svgCanvas.setStrokeWidth(val);
|
|
};
|
|
|
|
var changeRotationAngle = function changeRotationAngle(ctl) {
|
|
svgCanvas.setRotationAngle(ctl.value);
|
|
$$b('#tool_reorient').toggleClass('disabled', parseInt(ctl.value, 10) === 0);
|
|
};
|
|
|
|
var changeOpacity = function changeOpacity(ctl, val) {
|
|
if (val == null) {
|
|
val = ctl.value;
|
|
}
|
|
$$b('#group_opacity').val(val);
|
|
if (!ctl || !ctl.handle) {
|
|
$$b('#opac_slider').slider('option', 'value', val);
|
|
}
|
|
svgCanvas.setOpacity(val / 100);
|
|
};
|
|
|
|
var changeBlur = function changeBlur(ctl, val, noUndo) {
|
|
if (val == null) {
|
|
val = ctl.value;
|
|
}
|
|
$$b('#blur').val(val);
|
|
var complete = false;
|
|
if (!ctl || !ctl.handle) {
|
|
$$b('#blur_slider').slider('option', 'value', val);
|
|
complete = true;
|
|
}
|
|
if (noUndo) {
|
|
svgCanvas.setBlurNoUndo(val);
|
|
} else {
|
|
svgCanvas.setBlur(val, complete);
|
|
}
|
|
};
|
|
|
|
$$b('#stroke_style').change(function () {
|
|
svgCanvas.setStrokeAttr('stroke-dasharray', $$b(this).val());
|
|
operaRepaint();
|
|
});
|
|
|
|
$$b('#stroke_linejoin').change(function () {
|
|
svgCanvas.setStrokeAttr('stroke-linejoin', $$b(this).val());
|
|
operaRepaint();
|
|
});
|
|
|
|
// Lose focus for select elements when changed (Allows keyboard shortcuts to work better)
|
|
$$b('select').change(function () {
|
|
$$b(this).blur();
|
|
});
|
|
|
|
// fired when user wants to move elements to another layer
|
|
var promptMoveLayerOnce = false;
|
|
$$b('#selLayerNames').change(function () {
|
|
var destLayer = this.options[this.selectedIndex].value;
|
|
var confirmStr = uiStrings$1.notification.QmoveElemsToLayer.replace('%s', destLayer);
|
|
var moveToLayer = function moveToLayer(ok) {
|
|
if (!ok) {
|
|
return;
|
|
}
|
|
promptMoveLayerOnce = true;
|
|
svgCanvas.moveSelectedToLayer(destLayer);
|
|
svgCanvas.clearSelection();
|
|
populateLayers();
|
|
};
|
|
if (destLayer) {
|
|
if (promptMoveLayerOnce) {
|
|
moveToLayer(true);
|
|
} else {
|
|
$$b.confirm(confirmStr, moveToLayer);
|
|
}
|
|
}
|
|
});
|
|
|
|
$$b('#font_family').change(function () {
|
|
svgCanvas.setFontFamily(this.value);
|
|
});
|
|
|
|
$$b('#seg_type').change(function () {
|
|
svgCanvas.setSegType($$b(this).val());
|
|
});
|
|
|
|
$$b('#text').bind('keyup input', function () {
|
|
svgCanvas.setTextContent(this.value);
|
|
});
|
|
|
|
$$b('#image_url').change(function () {
|
|
setImageURL(this.value);
|
|
});
|
|
|
|
$$b('#link_url').change(function () {
|
|
if (this.value.length) {
|
|
svgCanvas.setLinkURL(this.value);
|
|
} else {
|
|
svgCanvas.removeHyperlink();
|
|
}
|
|
});
|
|
|
|
$$b('#g_title').change(function () {
|
|
svgCanvas.setGroupTitle(this.value);
|
|
});
|
|
|
|
$$b('.attr_changer').change(function () {
|
|
var attr = this.getAttribute('data-attr');
|
|
var val = this.value;
|
|
var valid = isValidUnit(attr, val, selectedElement);
|
|
|
|
if (!valid) {
|
|
$$b.alert(uiStrings$1.notification.invalidAttrValGiven);
|
|
this.value = selectedElement.getAttribute(attr);
|
|
return false;
|
|
}
|
|
|
|
if (attr !== 'id' && attr !== 'class') {
|
|
if (isNaN(val)) {
|
|
val = svgCanvas.convertToNum(attr, val);
|
|
} else if (curConfig.baseUnit !== 'px') {
|
|
// Convert unitless value to one with given unit
|
|
|
|
var unitData = getTypeMap();
|
|
|
|
if (selectedElement[attr] || svgCanvas.getMode() === 'pathedit' || attr === 'x' || attr === 'y') {
|
|
val *= unitData[curConfig.baseUnit];
|
|
}
|
|
}
|
|
}
|
|
|
|
// if the user is changing the id, then de-select the element first
|
|
// change the ID, then re-select it with the new ID
|
|
if (attr === 'id') {
|
|
var elem = selectedElement;
|
|
svgCanvas.clearSelection();
|
|
elem.id = val;
|
|
svgCanvas.addToSelection([elem], true);
|
|
} else {
|
|
svgCanvas.changeSelectedAttribute(attr, val);
|
|
}
|
|
this.blur();
|
|
});
|
|
|
|
// Prevent selection of elements when shift-clicking
|
|
$$b('#palette').mouseover(function () {
|
|
var inp = $$b('<input type="hidden">');
|
|
$$b(this).append(inp);
|
|
inp.focus().remove();
|
|
});
|
|
|
|
$$b('.palette_item').mousedown(function (evt) {
|
|
// shift key or right click for stroke
|
|
var picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';
|
|
var color = $$b(this).data('rgb');
|
|
var paint = void 0;
|
|
|
|
// Webkit-based browsers returned 'initial' here for no stroke
|
|
if (color === 'none' || color === 'transparent' || color === 'initial') {
|
|
color = 'none';
|
|
paint = new $$b.jGraduate.Paint();
|
|
} else {
|
|
paint = new $$b.jGraduate.Paint({ alpha: 100, solidColor: color.substr(1) });
|
|
}
|
|
|
|
paintBox[picker].setPaint(paint);
|
|
svgCanvas.setColor(picker, color);
|
|
|
|
if (color !== 'none' && svgCanvas.getPaintOpacity(picker) !== 1) {
|
|
svgCanvas.setPaintOpacity(picker, 1.0);
|
|
}
|
|
updateToolButtonState();
|
|
}).bind('contextmenu', function (e) {
|
|
e.preventDefault();
|
|
});
|
|
|
|
$$b('#toggle_stroke_tools').on('click', function () {
|
|
$$b('#tools_bottom').toggleClass('expanded');
|
|
});
|
|
|
|
(function () {
|
|
var wArea = workarea[0];
|
|
|
|
var lastX = null,
|
|
lastY = null,
|
|
panning = false,
|
|
keypan = false;
|
|
|
|
$$b('#svgcanvas').bind('mousemove mouseup', function (evt) {
|
|
if (panning === false) {
|
|
return;
|
|
}
|
|
|
|
wArea.scrollLeft -= evt.clientX - lastX;
|
|
wArea.scrollTop -= evt.clientY - lastY;
|
|
|
|
lastX = evt.clientX;
|
|
lastY = evt.clientY;
|
|
|
|
if (evt.type === 'mouseup') {
|
|
panning = false;
|
|
}
|
|
return false;
|
|
}).mousedown(function (evt) {
|
|
if (evt.button === 1 || keypan === true) {
|
|
panning = true;
|
|
lastX = evt.clientX;
|
|
lastY = evt.clientY;
|
|
return false;
|
|
}
|
|
});
|
|
|
|
$$b(window).mouseup(function () {
|
|
panning = false;
|
|
});
|
|
|
|
$$b(document).bind('keydown', 'space', function (evt) {
|
|
svgCanvas.spaceKey = keypan = true;
|
|
evt.preventDefault();
|
|
}).bind('keyup', 'space', function (evt) {
|
|
evt.preventDefault();
|
|
svgCanvas.spaceKey = keypan = false;
|
|
}).bind('keydown', 'shift', function (evt) {
|
|
if (svgCanvas.getMode() === 'zoom') {
|
|
workarea.css('cursor', zoomOutIcon);
|
|
}
|
|
}).bind('keyup', 'shift', function (evt) {
|
|
if (svgCanvas.getMode() === 'zoom') {
|
|
workarea.css('cursor', zoomInIcon);
|
|
}
|
|
});
|
|
|
|
editor.setPanning = function (active) {
|
|
svgCanvas.spaceKey = keypan = active;
|
|
};
|
|
})();
|
|
|
|
(function () {
|
|
var button = $$b('#main_icon');
|
|
var overlay = $$b('#main_icon span');
|
|
var list = $$b('#main_menu');
|
|
|
|
var onButton = false;
|
|
var height = 0;
|
|
var jsHover = true;
|
|
var setClick = false;
|
|
|
|
/*
|
|
// Currently unused
|
|
const hideMenu = function () {
|
|
list.fadeOut(200);
|
|
};
|
|
*/
|
|
|
|
$$b(window).mouseup(function (evt) {
|
|
if (!onButton) {
|
|
button.removeClass('buttondown');
|
|
// do not hide if it was the file input as that input needs to be visible
|
|
// for its change event to fire
|
|
if (evt.target.tagName !== 'INPUT') {
|
|
list.fadeOut(200);
|
|
} else if (!setClick) {
|
|
setClick = true;
|
|
$$b(evt.target).click(function () {
|
|
list.css('margin-left', '-9999px').show();
|
|
});
|
|
}
|
|
}
|
|
onButton = false;
|
|
}).mousedown(function (evt) {
|
|
// $('.contextMenu').hide();
|
|
var islib = $$b(evt.target).closest('div.tools_flyout, .contextMenu').length;
|
|
if (!islib) {
|
|
$$b('.tools_flyout:visible,.contextMenu').fadeOut(250);
|
|
}
|
|
});
|
|
|
|
overlay.bind('mousedown', function () {
|
|
if (!button.hasClass('buttondown')) {
|
|
// Margin must be reset in case it was changed before;
|
|
list.css('margin-left', 0).show();
|
|
if (!height) {
|
|
height = list.height();
|
|
}
|
|
// Using custom animation as slideDown has annoying 'bounce effect'
|
|
list.css('height', 0).animate({
|
|
height: height
|
|
}, 200);
|
|
onButton = true;
|
|
} else {
|
|
list.fadeOut(200);
|
|
}
|
|
button.toggleClass('buttondown buttonup');
|
|
}).hover(function () {
|
|
onButton = true;
|
|
}).mouseout(function () {
|
|
onButton = false;
|
|
});
|
|
|
|
var listItems = $$b('#main_menu li');
|
|
|
|
// Check if JS method of hovering needs to be used (Webkit bug)
|
|
listItems.mouseover(function () {
|
|
jsHover = $$b(this).css('background-color') === 'rgba(0, 0, 0, 0)';
|
|
|
|
listItems.unbind('mouseover');
|
|
if (jsHover) {
|
|
listItems.mouseover(function () {
|
|
this.style.backgroundColor = '#FFC';
|
|
}).mouseout(function () {
|
|
this.style.backgroundColor = 'transparent';
|
|
return true;
|
|
});
|
|
}
|
|
});
|
|
})();
|
|
// Made public for UI customization.
|
|
// TODO: Group UI functions into a public editor.ui interface.
|
|
editor.addDropDown = function (elem, callback, dropUp) {
|
|
if (!$$b(elem).length) {
|
|
return;
|
|
} // Quit if called on non-existant element
|
|
var button = $$b(elem).find('button');
|
|
var list = $$b(elem).find('ul').attr('id', $$b(elem)[0].id + '-list');
|
|
if (dropUp) {
|
|
$$b(elem).addClass('dropup');
|
|
} else {
|
|
// Move list to place where it can overflow container
|
|
$$b('#option_lists').append(list);
|
|
}
|
|
list.find('li').bind('mouseup', callback);
|
|
|
|
var onButton = false;
|
|
$$b(window).mouseup(function (evt) {
|
|
if (!onButton) {
|
|
button.removeClass('down');
|
|
list.hide();
|
|
}
|
|
onButton = false;
|
|
});
|
|
|
|
button.bind('mousedown', function () {
|
|
if (!button.hasClass('down')) {
|
|
if (!dropUp) {
|
|
var pos = $$b(elem).position();
|
|
list.css({
|
|
top: pos.top + 24,
|
|
left: pos.left - 10
|
|
});
|
|
}
|
|
list.show();
|
|
onButton = true;
|
|
} else {
|
|
list.hide();
|
|
}
|
|
button.toggleClass('down');
|
|
}).hover(function () {
|
|
onButton = true;
|
|
}).mouseout(function () {
|
|
onButton = false;
|
|
});
|
|
};
|
|
|
|
editor.addDropDown('#font_family_dropdown', function () {
|
|
$$b('#font_family').val($$b(this).text()).change();
|
|
});
|
|
|
|
editor.addDropDown('#opacity_dropdown', function () {
|
|
if ($$b(this).find('div').length) {
|
|
return;
|
|
}
|
|
var perc = parseInt($$b(this).text().split('%')[0], 10);
|
|
changeOpacity(false, perc);
|
|
}, true);
|
|
|
|
// For slider usage, see: http://jqueryui.com/demos/slider/
|
|
$$b('#opac_slider').slider({
|
|
start: function start() {
|
|
$$b('#opacity_dropdown li:not(.special)').hide();
|
|
},
|
|
stop: function stop() {
|
|
$$b('#opacity_dropdown li').show();
|
|
$$b(window).mouseup();
|
|
},
|
|
slide: function slide(evt, ui) {
|
|
changeOpacity(ui);
|
|
}
|
|
});
|
|
|
|
editor.addDropDown('#blur_dropdown', $$b.noop);
|
|
|
|
var slideStart = false;
|
|
$$b('#blur_slider').slider({
|
|
max: 10,
|
|
step: 0.1,
|
|
stop: function stop(evt, ui) {
|
|
slideStart = false;
|
|
changeBlur(ui);
|
|
$$b('#blur_dropdown li').show();
|
|
$$b(window).mouseup();
|
|
},
|
|
start: function start() {
|
|
slideStart = true;
|
|
},
|
|
slide: function slide(evt, ui) {
|
|
changeBlur(ui, null, slideStart);
|
|
}
|
|
});
|
|
|
|
editor.addDropDown('#zoom_dropdown', function () {
|
|
var item = $$b(this);
|
|
var val = item.data('val');
|
|
if (val) {
|
|
zoomChanged(window, val);
|
|
} else {
|
|
changeZoom({ value: parseFloat(item.text()) });
|
|
}
|
|
}, true);
|
|
|
|
addAltDropDown('#stroke_linecap', '#linecap_opts', function () {
|
|
setStrokeOpt(this, true);
|
|
}, { dropUp: true });
|
|
|
|
addAltDropDown('#stroke_linejoin', '#linejoin_opts', function () {
|
|
setStrokeOpt(this, true);
|
|
}, { dropUp: true });
|
|
|
|
addAltDropDown('#tool_position', '#position_opts', function () {
|
|
var letter = this.id.replace('tool_pos', '').charAt(0);
|
|
svgCanvas.alignSelectedElements(letter, 'page');
|
|
}, { multiclick: true });
|
|
|
|
/*
|
|
When a flyout icon is selected
|
|
(if flyout) {
|
|
- Change the icon
|
|
- Make pressing the button run its stuff
|
|
}
|
|
- Run its stuff
|
|
When its shortcut key is pressed
|
|
- If not current in list, do as above
|
|
, else:
|
|
- Just run its stuff
|
|
*/
|
|
|
|
// Unfocus text input when workarea is mousedowned.
|
|
(function () {
|
|
var inp = void 0;
|
|
var unfocus = function unfocus() {
|
|
$$b(inp).blur();
|
|
};
|
|
|
|
$$b('#svg_editor').find('button, select, input:not(#text)').focus(function () {
|
|
inp = this;
|
|
uiContext = 'toolbars';
|
|
workarea.mousedown(unfocus);
|
|
}).blur(function () {
|
|
uiContext = 'canvas';
|
|
workarea.unbind('mousedown', unfocus);
|
|
// Go back to selecting text if in textedit mode
|
|
if (svgCanvas.getMode() === 'textedit') {
|
|
$$b('#text').focus();
|
|
}
|
|
});
|
|
})();
|
|
|
|
var clickFHPath = function clickFHPath() {
|
|
if (toolButtonClick('#tool_fhpath')) {
|
|
svgCanvas.setMode('fhpath');
|
|
}
|
|
};
|
|
|
|
var clickLine = function clickLine() {
|
|
if (toolButtonClick('#tool_line')) {
|
|
svgCanvas.setMode('line');
|
|
}
|
|
};
|
|
|
|
var clickSquare = function clickSquare() {
|
|
if (toolButtonClick('#tool_square')) {
|
|
svgCanvas.setMode('square');
|
|
}
|
|
};
|
|
|
|
var clickRect = function clickRect() {
|
|
if (toolButtonClick('#tool_rect')) {
|
|
svgCanvas.setMode('rect');
|
|
}
|
|
};
|
|
|
|
var clickFHRect = function clickFHRect() {
|
|
if (toolButtonClick('#tool_fhrect')) {
|
|
svgCanvas.setMode('fhrect');
|
|
}
|
|
};
|
|
|
|
var clickCircle = function clickCircle() {
|
|
if (toolButtonClick('#tool_circle')) {
|
|
svgCanvas.setMode('circle');
|
|
}
|
|
};
|
|
|
|
var clickEllipse = function clickEllipse() {
|
|
if (toolButtonClick('#tool_ellipse')) {
|
|
svgCanvas.setMode('ellipse');
|
|
}
|
|
};
|
|
|
|
var clickFHEllipse = function clickFHEllipse() {
|
|
if (toolButtonClick('#tool_fhellipse')) {
|
|
svgCanvas.setMode('fhellipse');
|
|
}
|
|
};
|
|
|
|
var clickImage = function clickImage() {
|
|
if (toolButtonClick('#tool_image')) {
|
|
svgCanvas.setMode('image');
|
|
}
|
|
};
|
|
|
|
var clickZoom = function clickZoom() {
|
|
if (toolButtonClick('#tool_zoom')) {
|
|
svgCanvas.setMode('zoom');
|
|
workarea.css('cursor', zoomInIcon);
|
|
}
|
|
};
|
|
|
|
var zoomImage = function zoomImage(multiplier) {
|
|
var res = svgCanvas.getResolution();
|
|
multiplier = multiplier ? res.zoom * multiplier : 1;
|
|
// setResolution(res.w * multiplier, res.h * multiplier, true);
|
|
$$b('#zoom').val(multiplier * 100);
|
|
svgCanvas.setZoom(multiplier);
|
|
zoomDone();
|
|
updateCanvas(true);
|
|
};
|
|
|
|
var dblclickZoom = function dblclickZoom() {
|
|
if (toolButtonClick('#tool_zoom')) {
|
|
zoomImage();
|
|
setSelectMode();
|
|
}
|
|
};
|
|
|
|
var clickText = function clickText() {
|
|
if (toolButtonClick('#tool_text')) {
|
|
svgCanvas.setMode('text');
|
|
}
|
|
};
|
|
|
|
var clickPath = function clickPath() {
|
|
if (toolButtonClick('#tool_path')) {
|
|
svgCanvas.setMode('path');
|
|
}
|
|
};
|
|
|
|
// Delete is a contextual tool that only appears in the ribbon if
|
|
// an element has been selected
|
|
var deleteSelected = function deleteSelected() {
|
|
if (selectedElement != null || multiselected) {
|
|
svgCanvas.deleteSelectedElements();
|
|
}
|
|
};
|
|
|
|
var cutSelected = function cutSelected() {
|
|
if (selectedElement != null || multiselected) {
|
|
svgCanvas.cutSelectedElements();
|
|
}
|
|
};
|
|
|
|
var copySelected = function copySelected() {
|
|
if (selectedElement != null || multiselected) {
|
|
svgCanvas.copySelectedElements();
|
|
}
|
|
};
|
|
|
|
var pasteInCenter = function pasteInCenter() {
|
|
var zoom = svgCanvas.getZoom();
|
|
var x = (workarea[0].scrollLeft + workarea.width() / 2) / zoom - svgCanvas.contentW;
|
|
var y = (workarea[0].scrollTop + workarea.height() / 2) / zoom - svgCanvas.contentH;
|
|
svgCanvas.pasteElements('point', x, y);
|
|
};
|
|
|
|
var moveToTopSelected = function moveToTopSelected() {
|
|
if (selectedElement != null) {
|
|
svgCanvas.moveToTopSelectedElement();
|
|
}
|
|
};
|
|
|
|
var moveToBottomSelected = function moveToBottomSelected() {
|
|
if (selectedElement != null) {
|
|
svgCanvas.moveToBottomSelectedElement();
|
|
}
|
|
};
|
|
|
|
var moveUpDownSelected = function moveUpDownSelected(dir) {
|
|
if (selectedElement != null) {
|
|
svgCanvas.moveUpDownSelected(dir);
|
|
}
|
|
};
|
|
|
|
var convertToPath$$1 = function convertToPath$$1() {
|
|
if (selectedElement != null) {
|
|
svgCanvas.convertToPath();
|
|
}
|
|
};
|
|
|
|
var reorientPath = function reorientPath() {
|
|
if (selectedElement != null) {
|
|
path.reorient();
|
|
}
|
|
};
|
|
|
|
var makeHyperlink = function makeHyperlink() {
|
|
if (selectedElement != null || multiselected) {
|
|
$$b.prompt(uiStrings$1.notification.enterNewLinkURL, 'http://', function (url) {
|
|
if (url) {
|
|
svgCanvas.makeHyperlink(url);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
var moveSelected = function moveSelected(dx, dy) {
|
|
if (selectedElement != null || multiselected) {
|
|
if (curConfig.gridSnapping) {
|
|
// Use grid snap value regardless of zoom level
|
|
var multi = svgCanvas.getZoom() * curConfig.snappingStep;
|
|
dx *= multi;
|
|
dy *= multi;
|
|
}
|
|
svgCanvas.moveSelectedElements(dx, dy);
|
|
}
|
|
};
|
|
|
|
var linkControlPoints = function linkControlPoints() {
|
|
$$b('#tool_node_link').toggleClass('push_button_pressed tool_button');
|
|
var linked = $$b('#tool_node_link').hasClass('push_button_pressed');
|
|
path.linkControlPoints(linked);
|
|
};
|
|
|
|
var clonePathNode = function clonePathNode() {
|
|
if (path.getNodePoint()) {
|
|
path.clonePathNode();
|
|
}
|
|
};
|
|
|
|
var deletePathNode = function deletePathNode() {
|
|
if (path.getNodePoint()) {
|
|
path.deletePathNode();
|
|
}
|
|
};
|
|
|
|
var addSubPath = function addSubPath() {
|
|
var button = $$b('#tool_add_subpath');
|
|
var sp = !button.hasClass('push_button_pressed');
|
|
button.toggleClass('push_button_pressed tool_button');
|
|
path.addSubPath(sp);
|
|
};
|
|
|
|
var opencloseSubPath = function opencloseSubPath() {
|
|
path.opencloseSubPath();
|
|
};
|
|
|
|
var selectNext = function selectNext() {
|
|
svgCanvas.cycleElement(1);
|
|
};
|
|
|
|
var selectPrev = function selectPrev() {
|
|
svgCanvas.cycleElement(0);
|
|
};
|
|
|
|
var rotateSelected = function rotateSelected(cw, step) {
|
|
if (selectedElement == null || multiselected) {
|
|
return;
|
|
}
|
|
if (!cw) {
|
|
step *= -1;
|
|
}
|
|
var angle = parseFloat($$b('#angle').val()) + step;
|
|
svgCanvas.setRotationAngle(angle);
|
|
updateContextPanel();
|
|
};
|
|
|
|
var clickClear = function clickClear() {
|
|
var dims = curConfig.dimensions;
|
|
$$b.confirm(uiStrings$1.notification.QwantToClear, function (ok) {
|
|
if (!ok) {
|
|
return;
|
|
}
|
|
setSelectMode();
|
|
svgCanvas.clear();
|
|
svgCanvas.setResolution(dims[0], dims[1]);
|
|
updateCanvas(true);
|
|
zoomImage();
|
|
populateLayers();
|
|
updateContextPanel();
|
|
prepPaints();
|
|
svgCanvas.runExtensions('onNewDocument');
|
|
});
|
|
};
|
|
|
|
var clickBold = function clickBold() {
|
|
svgCanvas.setBold(!svgCanvas.getBold());
|
|
updateContextPanel();
|
|
return false;
|
|
};
|
|
|
|
var clickItalic = function clickItalic() {
|
|
svgCanvas.setItalic(!svgCanvas.getItalic());
|
|
updateContextPanel();
|
|
return false;
|
|
};
|
|
|
|
var clickSave = function clickSave() {
|
|
// In the future, more options can be provided here
|
|
var saveOpts = {
|
|
images: $$b.pref('img_save'),
|
|
round_digits: 6
|
|
};
|
|
svgCanvas.save(saveOpts);
|
|
};
|
|
|
|
var loadingURL = void 0;
|
|
var clickExport = function clickExport() {
|
|
$$b.select('Select an image type for export: ', [
|
|
// See http://kangax.github.io/jstests/toDataUrl_mime_type_test/ for a useful list of MIME types and browser support
|
|
// 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG'
|
|
'PNG', 'JPEG', 'BMP', 'WEBP', 'PDF'], function (imgType) {
|
|
// todo: replace hard-coded msg with uiStrings.notification.
|
|
if (!imgType) {
|
|
return;
|
|
}
|
|
// Open placeholder window (prevents popup)
|
|
var exportWindowName = void 0;
|
|
function openExportWindow() {
|
|
var str = uiStrings$1.notification.loadingImage;
|
|
if (curConfig.exportWindowType === 'new') {
|
|
editor.exportWindowCt++;
|
|
}
|
|
exportWindowName = curConfig.canvasName + editor.exportWindowCt;
|
|
var popHTML = void 0,
|
|
popURL = void 0;
|
|
if (loadingURL) {
|
|
popURL = loadingURL;
|
|
} else {
|
|
popHTML = '<!DOCTYPE html><html><head><meta charset="utf-8"><title>' + str + '</title></head><body><h1>' + str + '</h1></body><html>';
|
|
if ((typeof URL === 'undefined' ? 'undefined' : _typeof(URL)) && URL.createObjectURL) {
|
|
var blob = new Blob([popHTML], { type: 'text/html' });
|
|
popURL = URL.createObjectURL(blob);
|
|
} else {
|
|
popURL = 'data:text/html;base64;charset=utf-8,' + encode64(popHTML);
|
|
}
|
|
loadingURL = popURL;
|
|
}
|
|
exportWindow = window.open(popURL, exportWindowName);
|
|
}
|
|
if (imgType === 'PDF') {
|
|
if (!customExportPDF) {
|
|
openExportWindow();
|
|
}
|
|
svgCanvas.exportPDF(exportWindowName);
|
|
} else {
|
|
if (!customExportImage) {
|
|
openExportWindow();
|
|
}
|
|
var quality = parseInt($$b('#image-slider').val(), 10) / 100;
|
|
svgCanvas.rasterExport(imgType, quality, exportWindowName);
|
|
}
|
|
}, function () {
|
|
var sel = $$b(this);
|
|
if (sel.val() === 'JPEG' || sel.val() === 'WEBP') {
|
|
if (!$$b('#image-slider').length) {
|
|
$$b('<div><label>' + uiStrings$1.ui.quality + '\n <input id="image-slider"\n type="range" min="1" max="100" value="92" />\n </label></div>').appendTo(sel.parent());
|
|
}
|
|
} else {
|
|
$$b('#image-slider').parent().remove();
|
|
}
|
|
});
|
|
};
|
|
|
|
// by default, svgCanvas.open() is a no-op.
|
|
// it is up to an extension mechanism (opera widget, etc)
|
|
// to call setCustomHandlers() which will make it do something
|
|
var clickOpen = function clickOpen() {
|
|
svgCanvas.open();
|
|
};
|
|
|
|
var clickImport = function clickImport() {};
|
|
|
|
var clickUndo = function clickUndo() {
|
|
if (undoMgr.getUndoStackSize() > 0) {
|
|
undoMgr.undo();
|
|
populateLayers();
|
|
}
|
|
};
|
|
|
|
var clickRedo = function clickRedo() {
|
|
if (undoMgr.getRedoStackSize() > 0) {
|
|
undoMgr.redo();
|
|
populateLayers();
|
|
}
|
|
};
|
|
|
|
var clickGroup = function clickGroup() {
|
|
// group
|
|
if (multiselected) {
|
|
svgCanvas.groupSelectedElements();
|
|
// ungroup
|
|
} else if (selectedElement) {
|
|
svgCanvas.ungroupSelectedElement();
|
|
}
|
|
};
|
|
|
|
var clickClone = function clickClone() {
|
|
svgCanvas.cloneSelectedElements(20, 20);
|
|
};
|
|
|
|
var clickAlign = function clickAlign() {
|
|
var letter = this.id.replace('tool_align', '').charAt(0);
|
|
svgCanvas.alignSelectedElements(letter, $$b('#align_relative_to').val());
|
|
};
|
|
|
|
var clickWireframe = function clickWireframe() {
|
|
$$b('#tool_wireframe').toggleClass('push_button_pressed tool_button');
|
|
workarea.toggleClass('wireframe');
|
|
|
|
if (supportsNonSS) {
|
|
return;
|
|
}
|
|
var wfRules = $$b('#wireframe_rules');
|
|
if (!wfRules.length) {
|
|
wfRules = $$b('<style id="wireframe_rules"></style>').appendTo('head');
|
|
} else {
|
|
wfRules.empty();
|
|
}
|
|
|
|
updateWireFrame();
|
|
};
|
|
|
|
$$b('#svg_docprops_container, #svg_prefs_container').draggable({ cancel: 'button,fieldset', containment: 'window' });
|
|
|
|
var docprops = false;
|
|
var preferences = false;
|
|
|
|
var showDocProperties = function showDocProperties() {
|
|
if (docprops) {
|
|
return;
|
|
}
|
|
docprops = true;
|
|
|
|
// This selects the correct radio button by using the array notation
|
|
$$b('#image_save_opts input').val([$$b.pref('img_save')]);
|
|
|
|
// update resolution option with actual resolution
|
|
var res = svgCanvas.getResolution();
|
|
if (curConfig.baseUnit !== 'px') {
|
|
res.w = convertUnit(res.w) + curConfig.baseUnit;
|
|
res.h = convertUnit(res.h) + curConfig.baseUnit;
|
|
}
|
|
|
|
$$b('#canvas_width').val(res.w);
|
|
$$b('#canvas_height').val(res.h);
|
|
$$b('#canvas_title').val(svgCanvas.getDocumentTitle());
|
|
|
|
$$b('#svg_docprops').show();
|
|
};
|
|
|
|
var showPreferences = function showPreferences() {
|
|
if (preferences) {
|
|
return;
|
|
}
|
|
preferences = true;
|
|
$$b('#main_menu').hide();
|
|
|
|
// Update background color with current one
|
|
var blocks = $$b('#bg_blocks div');
|
|
var curBg = 'cur_background';
|
|
var canvasBg = curPrefs.bkgd_color;
|
|
var url = $$b.pref('bkgd_url');
|
|
blocks.each(function () {
|
|
var blk = $$b(this);
|
|
var isBg = blk.css('background-color') === canvasBg;
|
|
blk.toggleClass(curBg, isBg);
|
|
if (isBg) {
|
|
$$b('#canvas_bg_url').removeClass(curBg);
|
|
}
|
|
});
|
|
if (!canvasBg) {
|
|
blocks.eq(0).addClass(curBg);
|
|
}
|
|
if (url) {
|
|
$$b('#canvas_bg_url').val(url);
|
|
}
|
|
$$b('#grid_snapping_on').prop('checked', curConfig.gridSnapping);
|
|
$$b('#grid_snapping_step').attr('value', curConfig.snappingStep);
|
|
$$b('#grid_color').attr('value', curConfig.gridColor);
|
|
|
|
$$b('#svg_prefs').show();
|
|
};
|
|
|
|
var hideSourceEditor = function hideSourceEditor() {
|
|
$$b('#svg_source_editor').hide();
|
|
editingsource = false;
|
|
$$b('#svg_source_textarea').blur();
|
|
};
|
|
|
|
var saveSourceEditor = function saveSourceEditor() {
|
|
if (!editingsource) {
|
|
return;
|
|
}
|
|
|
|
var saveChanges = function saveChanges() {
|
|
svgCanvas.clearSelection();
|
|
hideSourceEditor();
|
|
zoomImage();
|
|
populateLayers();
|
|
updateTitle();
|
|
prepPaints();
|
|
};
|
|
|
|
if (!svgCanvas.setSvgString($$b('#svg_source_textarea').val())) {
|
|
$$b.confirm(uiStrings$1.notification.QerrorsRevertToSource, function (ok) {
|
|
if (!ok) {
|
|
return false;
|
|
}
|
|
saveChanges();
|
|
});
|
|
} else {
|
|
saveChanges();
|
|
}
|
|
setSelectMode();
|
|
};
|
|
|
|
var hideDocProperties = function hideDocProperties() {
|
|
$$b('#svg_docprops').hide();
|
|
$$b('#canvas_width,#canvas_height').removeAttr('disabled');
|
|
$$b('#resolution')[0].selectedIndex = 0;
|
|
$$b('#image_save_opts input').val([$$b.pref('img_save')]);
|
|
docprops = false;
|
|
};
|
|
|
|
var hidePreferences = function hidePreferences() {
|
|
$$b('#svg_prefs').hide();
|
|
preferences = false;
|
|
};
|
|
|
|
var saveDocProperties = function saveDocProperties() {
|
|
// set title
|
|
var newTitle = $$b('#canvas_title').val();
|
|
updateTitle(newTitle);
|
|
svgCanvas.setDocumentTitle(newTitle);
|
|
|
|
// update resolution
|
|
var width = $$b('#canvas_width'),
|
|
w = width.val();
|
|
var height = $$b('#canvas_height'),
|
|
h = height.val();
|
|
|
|
if (w !== 'fit' && !isValidUnit('width', w)) {
|
|
$$b.alert(uiStrings$1.notification.invalidAttrValGiven);
|
|
width.parent().addClass('error');
|
|
return false;
|
|
}
|
|
|
|
width.parent().removeClass('error');
|
|
|
|
if (h !== 'fit' && !isValidUnit('height', h)) {
|
|
$$b.alert(uiStrings$1.notification.invalidAttrValGiven);
|
|
height.parent().addClass('error');
|
|
return false;
|
|
}
|
|
|
|
height.parent().removeClass('error');
|
|
|
|
if (!svgCanvas.setResolution(w, h)) {
|
|
$$b.alert(uiStrings$1.notification.noContentToFitTo);
|
|
return false;
|
|
}
|
|
|
|
// Set image save option
|
|
$$b.pref('img_save', $$b('#image_save_opts :checked').val());
|
|
updateCanvas();
|
|
hideDocProperties();
|
|
};
|
|
|
|
var savePreferences = editor.savePreferences = function () {
|
|
// Set background
|
|
var color = $$b('#bg_blocks div.cur_background').css('background-color') || '#FFF';
|
|
setBackground(color, $$b('#canvas_bg_url').val());
|
|
|
|
// set language
|
|
var lang = $$b('#lang_select').val();
|
|
if (lang !== $$b.pref('lang')) {
|
|
editor.putLocale(lang, goodLangs, curConfig);
|
|
}
|
|
|
|
// set icon size
|
|
setIconSize($$b('#iconsize').val());
|
|
|
|
// set grid setting
|
|
curConfig.gridSnapping = $$b('#grid_snapping_on')[0].checked;
|
|
curConfig.snappingStep = $$b('#grid_snapping_step').val();
|
|
curConfig.gridColor = $$b('#grid_color').val();
|
|
curConfig.showRulers = $$b('#show_rulers')[0].checked;
|
|
|
|
$$b('#rulers').toggle(curConfig.showRulers);
|
|
if (curConfig.showRulers) {
|
|
updateRulers();
|
|
}
|
|
curConfig.baseUnit = $$b('#base_unit').val();
|
|
|
|
svgCanvas.setConfig(curConfig);
|
|
|
|
updateCanvas();
|
|
hidePreferences();
|
|
};
|
|
|
|
var resetScrollPos = $$b.noop;
|
|
|
|
var cancelOverlays = function cancelOverlays() {
|
|
$$b('#dialog_box').hide();
|
|
if (!editingsource && !docprops && !preferences) {
|
|
if (curContext) {
|
|
svgCanvas.leaveContext();
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (editingsource) {
|
|
if (origSource !== $$b('#svg_source_textarea').val()) {
|
|
$$b.confirm(uiStrings$1.notification.QignoreSourceChanges, function (ok) {
|
|
if (ok) {
|
|
hideSourceEditor();
|
|
}
|
|
});
|
|
} else {
|
|
hideSourceEditor();
|
|
}
|
|
} else if (docprops) {
|
|
hideDocProperties();
|
|
} else if (preferences) {
|
|
hidePreferences();
|
|
}
|
|
resetScrollPos();
|
|
};
|
|
|
|
var winWh = { width: $$b(window).width(), height: $$b(window).height() };
|
|
|
|
// Fix for Issue 781: Drawing area jumps to top-left corner on window resize (IE9)
|
|
if (isIE()) {
|
|
(function () {
|
|
resetScrollPos = function resetScrollPos() {
|
|
if (workarea[0].scrollLeft === 0 && workarea[0].scrollTop === 0) {
|
|
workarea[0].scrollLeft = curScrollPos.left;
|
|
workarea[0].scrollTop = curScrollPos.top;
|
|
}
|
|
};
|
|
|
|
curScrollPos = {
|
|
left: workarea[0].scrollLeft,
|
|
top: workarea[0].scrollTop
|
|
};
|
|
|
|
$$b(window).resize(resetScrollPos);
|
|
editor.ready(function () {
|
|
// TODO: Find better way to detect when to do this to minimize
|
|
// flickering effect
|
|
setTimeout(function () {
|
|
resetScrollPos();
|
|
}, 500);
|
|
});
|
|
|
|
workarea.scroll(function () {
|
|
curScrollPos = {
|
|
left: workarea[0].scrollLeft,
|
|
top: workarea[0].scrollTop
|
|
};
|
|
});
|
|
})();
|
|
}
|
|
|
|
$$b(window).resize(function (evt) {
|
|
$$b.each(winWh, function (type, val) {
|
|
var curval = $$b(window)[type]();
|
|
workarea[0]['scroll' + (type === 'width' ? 'Left' : 'Top')] -= (curval - val) / 2;
|
|
winWh[type] = curval;
|
|
});
|
|
setFlyoutPositions();
|
|
});
|
|
|
|
(function () {
|
|
workarea.scroll(function () {
|
|
// TODO: jQuery's scrollLeft/Top() wouldn't require a null check
|
|
if ($$b('#ruler_x').length) {
|
|
$$b('#ruler_x')[0].scrollLeft = workarea[0].scrollLeft;
|
|
}
|
|
if ($$b('#ruler_y').length) {
|
|
$$b('#ruler_y')[0].scrollTop = workarea[0].scrollTop;
|
|
}
|
|
});
|
|
})();
|
|
|
|
$$b('#url_notice').click(function () {
|
|
$$b.alert(this.title);
|
|
});
|
|
|
|
$$b('#change_image_url').click(promptImgURL);
|
|
|
|
// added these event handlers for all the push buttons so they
|
|
// behave more like buttons being pressed-in and not images
|
|
(function () {
|
|
var toolnames = ['clear', 'open', 'save', 'source', 'delete', 'delete_multi', 'paste', 'clone', 'clone_multi', 'move_top', 'move_bottom'];
|
|
var curClass = 'tool_button_current';
|
|
|
|
var allTools = '';
|
|
|
|
$$b.each(toolnames, function (i, item) {
|
|
allTools += (i ? ',' : '') + '#tool_' + item;
|
|
});
|
|
|
|
$$b(allTools).mousedown(function () {
|
|
$$b(this).addClass(curClass);
|
|
}).bind('mousedown mouseout', function () {
|
|
$$b(this).removeClass(curClass);
|
|
});
|
|
|
|
$$b('#tool_undo, #tool_redo').mousedown(function () {
|
|
if (!$$b(this).hasClass('disabled')) {
|
|
$$b(this).addClass(curClass);
|
|
}
|
|
}).bind('mousedown mouseout', function () {
|
|
$$b(this).removeClass(curClass);
|
|
});
|
|
})();
|
|
|
|
// switch modifier key in tooltips if mac
|
|
// NOTE: This code is not used yet until I can figure out how to successfully bind ctrl/meta
|
|
// in Opera and Chrome
|
|
if (isMac() && !window.opera) {
|
|
var shortcutButtons = ['tool_clear', 'tool_save', 'tool_source', 'tool_undo', 'tool_redo', 'tool_clone'];
|
|
var _i2 = shortcutButtons.length;
|
|
while (_i2--) {
|
|
var button = document.getElementById(shortcutButtons[_i2]);
|
|
if (button) {
|
|
var title = button.title;
|
|
|
|
var index = title.indexOf('Ctrl+');
|
|
button.title = [title.substr(0, index), 'Cmd+', title.substr(index + 5)].join('');
|
|
}
|
|
}
|
|
}
|
|
|
|
// TODO: go back to the color boxes having white background-color and then setting
|
|
// background-image to none.png (otherwise partially transparent gradients look weird)
|
|
var colorPicker = function colorPicker(elem) {
|
|
var picker = elem.attr('id') === 'stroke_color' ? 'stroke' : 'fill';
|
|
// const opacity = (picker == 'stroke' ? $('#stroke_opacity') : $('#fill_opacity'));
|
|
var title = picker === 'stroke' ? 'Pick a Stroke Paint and Opacity' : 'Pick a Fill Paint and Opacity';
|
|
// let wasNone = false; // Currently unused
|
|
var pos = elem.offset();
|
|
var paint = paintBox[picker].paint;
|
|
|
|
$$b('#color_picker').draggable({ cancel: '.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker', containment: 'window' }).css(curConfig.colorPickerCSS || { left: pos.left - 140, bottom: 40 }).jGraduate({
|
|
paint: paint,
|
|
window: { pickerTitle: title },
|
|
images: { clientPath: curConfig.jGraduatePath },
|
|
newstop: 'inverse'
|
|
}, function (p) {
|
|
paint = new $$b.jGraduate.Paint(p);
|
|
paintBox[picker].setPaint(paint);
|
|
svgCanvas.setPaint(picker, paint);
|
|
$$b('#color_picker').hide();
|
|
}, function () {
|
|
$$b('#color_picker').hide();
|
|
});
|
|
};
|
|
|
|
var PaintBox = function PaintBox(container, type) {
|
|
var paintColor = void 0,
|
|
paintOpacity = void 0;
|
|
var cur = curConfig[type === 'fill' ? 'initFill' : 'initStroke'];
|
|
// set up gradients to be used for the buttons
|
|
var svgdocbox = new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg"><rect width="16.5" height="16.5"' + ' fill="#' + cur.color + '" opacity="' + cur.opacity + '"/>' + ' <defs><linearGradient id="gradbox_"/></defs></svg>', 'text/xml');
|
|
|
|
var docElem = svgdocbox.documentElement;
|
|
docElem = $$b(container)[0].appendChild(document.importNode(docElem, true));
|
|
docElem.setAttribute('width', 16.5);
|
|
|
|
this.rect = docElem.firstChild;
|
|
this.defs = docElem.getElementsByTagName('defs')[0];
|
|
this.grad = this.defs.firstChild;
|
|
this.paint = new $$b.jGraduate.Paint({ solidColor: cur.color });
|
|
this.type = type;
|
|
|
|
this.setPaint = function (paint, apply) {
|
|
this.paint = paint;
|
|
|
|
var ptype = paint.type;
|
|
var opac = paint.alpha / 100;
|
|
|
|
var fillAttr = 'none';
|
|
switch (ptype) {
|
|
case 'solidColor':
|
|
fillAttr = paint[ptype] !== 'none' ? '#' + paint[ptype] : paint[ptype];
|
|
break;
|
|
case 'linearGradient':
|
|
case 'radialGradient':
|
|
this.defs.removeChild(this.grad);
|
|
this.grad = this.defs.appendChild(paint[ptype]);
|
|
var id = this.grad.id = 'gradbox_' + this.type;
|
|
fillAttr = 'url(#' + id + ')';
|
|
break;
|
|
}
|
|
|
|
this.rect.setAttribute('fill', fillAttr);
|
|
this.rect.setAttribute('opacity', opac);
|
|
|
|
if (apply) {
|
|
svgCanvas.setColor(this.type, paintColor, true);
|
|
svgCanvas.setPaintOpacity(this.type, paintOpacity, true);
|
|
}
|
|
};
|
|
|
|
this.update = function (apply) {
|
|
if (!selectedElement) {
|
|
return;
|
|
}
|
|
|
|
var type = this.type;
|
|
|
|
switch (selectedElement.tagName) {
|
|
case 'use':
|
|
case 'image':
|
|
case 'foreignObject':
|
|
// These elements don't have fill or stroke, so don't change
|
|
// the current value
|
|
return;
|
|
case 'g':
|
|
case 'a':
|
|
{
|
|
var childs = selectedElement.getElementsByTagName('*');
|
|
|
|
var gPaint = null;
|
|
for (var _i3 = 0, len = childs.length; _i3 < len; _i3++) {
|
|
var elem = childs[_i3];
|
|
var p = elem.getAttribute(type);
|
|
if (_i3 === 0) {
|
|
gPaint = p;
|
|
} else if (gPaint !== p) {
|
|
gPaint = null;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (gPaint === null) {
|
|
// No common color, don't update anything
|
|
paintColor = null;
|
|
return;
|
|
}
|
|
paintColor = gPaint;
|
|
paintOpacity = 1;
|
|
break;
|
|
}default:
|
|
paintOpacity = parseFloat(selectedElement.getAttribute(type + '-opacity'));
|
|
if (isNaN(paintOpacity)) {
|
|
paintOpacity = 1.0;
|
|
}
|
|
|
|
var defColor = type === 'fill' ? 'black' : 'none';
|
|
paintColor = selectedElement.getAttribute(type) || defColor;
|
|
}
|
|
|
|
if (apply) {
|
|
svgCanvas.setColor(type, paintColor, true);
|
|
svgCanvas.setPaintOpacity(type, paintOpacity, true);
|
|
}
|
|
|
|
paintOpacity *= 100;
|
|
|
|
var paint = getPaint(paintColor, paintOpacity, type);
|
|
// update the rect inside #fill_color/#stroke_color
|
|
this.setPaint(paint);
|
|
};
|
|
|
|
this.prep = function () {
|
|
var ptype = this.paint.type;
|
|
|
|
switch (ptype) {
|
|
case 'linearGradient':
|
|
case 'radialGradient':
|
|
var paint = new $$b.jGraduate.Paint({ copy: this.paint });
|
|
svgCanvas.setPaint(type, paint);
|
|
break;
|
|
}
|
|
};
|
|
};
|
|
|
|
paintBox.fill = new PaintBox('#fill_color', 'fill');
|
|
paintBox.stroke = new PaintBox('#stroke_color', 'stroke');
|
|
|
|
$$b('#stroke_width').val(curConfig.initStroke.width);
|
|
$$b('#group_opacity').val(curConfig.initOpacity * 100);
|
|
|
|
// Use this SVG elem to test vectorEffect support
|
|
var testEl = paintBox.fill.rect.cloneNode(false);
|
|
testEl.setAttribute('style', 'vector-effect:non-scaling-stroke');
|
|
var supportsNonSS = testEl.style.vectorEffect === 'non-scaling-stroke';
|
|
testEl.removeAttribute('style');
|
|
var svgdocbox = paintBox.fill.rect.ownerDocument;
|
|
// Use this to test support for blur element. Seems to work to test support in Webkit
|
|
var blurTest = svgdocbox.createElementNS(NS.SVG, 'feGaussianBlur');
|
|
if (blurTest.stdDeviationX === undefined) {
|
|
$$b('#tool_blur').hide();
|
|
}
|
|
$$b(blurTest).remove();
|
|
|
|
// Test for zoom icon support
|
|
(function () {
|
|
var pre = '-' + uaPrefix.toLowerCase() + '-zoom-';
|
|
var zoom = pre + 'in';
|
|
workarea.css('cursor', zoom);
|
|
if (workarea.css('cursor') === zoom) {
|
|
zoomInIcon = zoom;
|
|
zoomOutIcon = pre + 'out';
|
|
}
|
|
workarea.css('cursor', 'auto');
|
|
})();
|
|
|
|
// Test for embedImage support (use timeout to not interfere with page load)
|
|
setTimeout(function () {
|
|
svgCanvas.embedImage('images/logo.png', function (datauri) {
|
|
if (!datauri) {
|
|
// Disable option
|
|
$$b('#image_save_opts [value=embed]').attr('disabled', 'disabled');
|
|
$$b('#image_save_opts input').val(['ref']);
|
|
$$b.pref('img_save', 'ref');
|
|
$$b('#image_opt_embed').css('color', '#666').attr('title', uiStrings$1.notification.featNotSupported);
|
|
}
|
|
});
|
|
}, 1000);
|
|
|
|
$$b('#fill_color, #tool_fill .icon_label').click(function () {
|
|
colorPicker($$b('#fill_color'));
|
|
updateToolButtonState();
|
|
});
|
|
|
|
$$b('#stroke_color, #tool_stroke .icon_label').click(function () {
|
|
colorPicker($$b('#stroke_color'));
|
|
updateToolButtonState();
|
|
});
|
|
|
|
$$b('#group_opacityLabel').click(function () {
|
|
$$b('#opacity_dropdown button').mousedown();
|
|
$$b(window).mouseup();
|
|
});
|
|
|
|
$$b('#zoomLabel').click(function () {
|
|
$$b('#zoom_dropdown button').mousedown();
|
|
$$b(window).mouseup();
|
|
});
|
|
|
|
$$b('#tool_move_top').mousedown(function (evt) {
|
|
$$b('#tools_stacking').show();
|
|
evt.preventDefault();
|
|
});
|
|
|
|
$$b('.layer_button').mousedown(function () {
|
|
$$b(this).addClass('layer_buttonpressed');
|
|
}).mouseout(function () {
|
|
$$b(this).removeClass('layer_buttonpressed');
|
|
}).mouseup(function () {
|
|
$$b(this).removeClass('layer_buttonpressed');
|
|
});
|
|
|
|
$$b('.push_button').mousedown(function () {
|
|
if (!$$b(this).hasClass('disabled')) {
|
|
$$b(this).addClass('push_button_pressed').removeClass('push_button');
|
|
}
|
|
}).mouseout(function () {
|
|
$$b(this).removeClass('push_button_pressed').addClass('push_button');
|
|
}).mouseup(function () {
|
|
$$b(this).removeClass('push_button_pressed').addClass('push_button');
|
|
});
|
|
|
|
// ask for a layer name
|
|
$$b('#layer_new').click(function () {
|
|
var uniqName = void 0,
|
|
i = svgCanvas.getCurrentDrawing().getNumLayers();
|
|
do {
|
|
uniqName = uiStrings$1.layers.layer + ' ' + ++i;
|
|
} while (svgCanvas.getCurrentDrawing().hasLayer(uniqName));
|
|
|
|
$$b.prompt(uiStrings$1.notification.enterUniqueLayerName, uniqName, function (newName) {
|
|
if (!newName) {
|
|
return;
|
|
}
|
|
if (svgCanvas.getCurrentDrawing().hasLayer(newName)) {
|
|
$$b.alert(uiStrings$1.notification.dupeLayerName);
|
|
return;
|
|
}
|
|
svgCanvas.createLayer(newName);
|
|
updateContextPanel();
|
|
populateLayers();
|
|
});
|
|
});
|
|
|
|
function deleteLayer() {
|
|
if (svgCanvas.deleteCurrentLayer()) {
|
|
updateContextPanel();
|
|
populateLayers();
|
|
// This matches what SvgCanvas does
|
|
// TODO: make this behavior less brittle (svg-editor should get which
|
|
// layer is selected from the canvas and then select that one in the UI)
|
|
$$b('#layerlist tr.layer').removeClass('layersel');
|
|
$$b('#layerlist tr.layer:first').addClass('layersel');
|
|
}
|
|
}
|
|
|
|
function cloneLayer() {
|
|
var name = svgCanvas.getCurrentDrawing().getCurrentLayerName() + ' copy';
|
|
|
|
$$b.prompt(uiStrings$1.notification.enterUniqueLayerName, name, function (newName) {
|
|
if (!newName) {
|
|
return;
|
|
}
|
|
if (svgCanvas.getCurrentDrawing().hasLayer(newName)) {
|
|
$$b.alert(uiStrings$1.notification.dupeLayerName);
|
|
return;
|
|
}
|
|
svgCanvas.cloneLayer(newName);
|
|
updateContextPanel();
|
|
populateLayers();
|
|
});
|
|
}
|
|
|
|
function mergeLayer() {
|
|
if ($$b('#layerlist tr.layersel').index() === svgCanvas.getCurrentDrawing().getNumLayers() - 1) {
|
|
return;
|
|
}
|
|
svgCanvas.mergeLayer();
|
|
updateContextPanel();
|
|
populateLayers();
|
|
}
|
|
|
|
function moveLayer(pos) {
|
|
var total = svgCanvas.getCurrentDrawing().getNumLayers();
|
|
|
|
var curIndex = $$b('#layerlist tr.layersel').index();
|
|
if (curIndex > 0 || curIndex < total - 1) {
|
|
curIndex += pos;
|
|
svgCanvas.setCurrentLayerPosition(total - curIndex - 1);
|
|
populateLayers();
|
|
}
|
|
}
|
|
|
|
$$b('#layer_delete').click(deleteLayer);
|
|
|
|
$$b('#layer_up').click(function () {
|
|
moveLayer(-1);
|
|
});
|
|
|
|
$$b('#layer_down').click(function () {
|
|
moveLayer(1);
|
|
});
|
|
|
|
$$b('#layer_rename').click(function () {
|
|
// const curIndex = $('#layerlist tr.layersel').prevAll().length; // Currently unused
|
|
var oldName = $$b('#layerlist tr.layersel td.layername').text();
|
|
$$b.prompt(uiStrings$1.notification.enterNewLayerName, '', function (newName) {
|
|
if (!newName) {
|
|
return;
|
|
}
|
|
if (oldName === newName || svgCanvas.getCurrentDrawing().hasLayer(newName)) {
|
|
$$b.alert(uiStrings$1.notification.layerHasThatName);
|
|
return;
|
|
}
|
|
|
|
svgCanvas.renameCurrentLayer(newName);
|
|
populateLayers();
|
|
});
|
|
});
|
|
|
|
var SIDEPANEL_MAXWIDTH = 300;
|
|
var SIDEPANEL_OPENWIDTH = 150;
|
|
var sidedrag = -1,
|
|
sidedragging = false,
|
|
allowmove = false;
|
|
|
|
var changeSidePanelWidth = function changeSidePanelWidth(delta) {
|
|
var rulerX = $$b('#ruler_x');
|
|
$$b('#sidepanels').width('+=' + delta);
|
|
$$b('#layerpanel').width('+=' + delta);
|
|
rulerX.css('right', parseInt(rulerX.css('right'), 10) + delta);
|
|
workarea.css('right', parseInt(workarea.css('right'), 10) + delta);
|
|
svgCanvas.runExtensions('workareaResized');
|
|
};
|
|
|
|
var resizeSidePanel = function resizeSidePanel(evt) {
|
|
if (!allowmove) {
|
|
return;
|
|
}
|
|
if (sidedrag === -1) {
|
|
return;
|
|
}
|
|
sidedragging = true;
|
|
var deltaX = sidedrag - evt.pageX;
|
|
var sideWidth = $$b('#sidepanels').width();
|
|
if (sideWidth + deltaX > SIDEPANEL_MAXWIDTH) {
|
|
deltaX = SIDEPANEL_MAXWIDTH - sideWidth;
|
|
sideWidth = SIDEPANEL_MAXWIDTH;
|
|
} else if (sideWidth + deltaX < 2) {
|
|
deltaX = 2 - sideWidth;
|
|
sideWidth = 2;
|
|
}
|
|
if (deltaX === 0) {
|
|
return;
|
|
}
|
|
sidedrag -= deltaX;
|
|
changeSidePanelWidth(deltaX);
|
|
};
|
|
|
|
// if width is non-zero, then fully close it, otherwise fully open it
|
|
// the optional close argument forces the side panel closed
|
|
var toggleSidePanel = function toggleSidePanel(close) {
|
|
var w = $$b('#sidepanels').width();
|
|
var deltaX = (w > 2 || close ? 2 : SIDEPANEL_OPENWIDTH) - w;
|
|
changeSidePanelWidth(deltaX);
|
|
};
|
|
|
|
$$b('#sidepanel_handle').mousedown(function (evt) {
|
|
sidedrag = evt.pageX;
|
|
$$b(window).mousemove(resizeSidePanel);
|
|
allowmove = false;
|
|
// Silly hack for Chrome, which always runs mousemove right after mousedown
|
|
setTimeout(function () {
|
|
allowmove = true;
|
|
}, 20);
|
|
}).mouseup(function (evt) {
|
|
if (!sidedragging) {
|
|
toggleSidePanel();
|
|
}
|
|
sidedrag = -1;
|
|
sidedragging = false;
|
|
});
|
|
|
|
$$b(window).mouseup(function () {
|
|
sidedrag = -1;
|
|
sidedragging = false;
|
|
$$b('#svg_editor').unbind('mousemove', resizeSidePanel);
|
|
});
|
|
|
|
populateLayers();
|
|
|
|
// function changeResolution (x,y) {
|
|
// const {zoom} = svgCanvas.getResolution();
|
|
// setResolution(x * zoom, y * zoom);
|
|
// }
|
|
|
|
var centerCanvas = function centerCanvas() {
|
|
// this centers the canvas vertically in the workarea (horizontal handled in CSS)
|
|
workarea.css('line-height', workarea.height() + 'px');
|
|
};
|
|
|
|
$$b(window).bind('load resize', centerCanvas);
|
|
|
|
function stepFontSize(elem, step) {
|
|
var origVal = Number(elem.value);
|
|
var sugVal = origVal + step;
|
|
var increasing = sugVal >= origVal;
|
|
if (step === 0) {
|
|
return origVal;
|
|
}
|
|
|
|
if (origVal >= 24) {
|
|
if (increasing) {
|
|
return Math.round(origVal * 1.1);
|
|
}
|
|
return Math.round(origVal / 1.1);
|
|
}
|
|
if (origVal <= 1) {
|
|
if (increasing) {
|
|
return origVal * 2;
|
|
}
|
|
return origVal / 2;
|
|
}
|
|
return sugVal;
|
|
}
|
|
|
|
function stepZoom(elem, step) {
|
|
var origVal = Number(elem.value);
|
|
if (origVal === 0) {
|
|
return 100;
|
|
}
|
|
var sugVal = origVal + step;
|
|
if (step === 0) {
|
|
return origVal;
|
|
}
|
|
|
|
if (origVal >= 100) {
|
|
return sugVal;
|
|
}
|
|
if (sugVal >= origVal) {
|
|
return origVal * 2;
|
|
}
|
|
return origVal / 2;
|
|
}
|
|
|
|
// function setResolution (w, h, center) {
|
|
// updateCanvas();
|
|
// // w -= 0; h -= 0;
|
|
// // $('#svgcanvas').css({width: w, height: h});
|
|
// // $('#canvas_width').val(w);
|
|
// // $('#canvas_height').val(h);
|
|
// //
|
|
// // if (center) {
|
|
// // const wArea = workarea;
|
|
// // const scrollY = h/2 - wArea.height()/2;
|
|
// // const scrollX = w/2 - wArea.width()/2;
|
|
// // wArea[0].scrollTop = scrollY;
|
|
// // wArea[0].scrollLeft = scrollX;
|
|
// // }
|
|
// }
|
|
|
|
$$b('#resolution').change(function () {
|
|
var wh = $$b('#canvas_width,#canvas_height');
|
|
if (!this.selectedIndex) {
|
|
if ($$b('#canvas_width').val() === 'fit') {
|
|
wh.removeAttr('disabled').val(100);
|
|
}
|
|
} else if (this.value === 'content') {
|
|
wh.val('fit').attr('disabled', 'disabled');
|
|
} else {
|
|
var dims = this.value.split('x');
|
|
$$b('#canvas_width').val(dims[0]);
|
|
$$b('#canvas_height').val(dims[1]);
|
|
wh.removeAttr('disabled');
|
|
}
|
|
});
|
|
|
|
// Prevent browser from erroneously repopulating fields
|
|
$$b('input,select').attr('autocomplete', 'off');
|
|
|
|
// Associate all button actions as well as non-button keyboard shortcuts
|
|
var Actions = function () {
|
|
// sel:'selector', fn:function, evt:'event', key:[key, preventDefault, NoDisableInInput]
|
|
var toolButtons = [{ sel: '#tool_select', fn: clickSelect, evt: 'click', key: ['V', true] }, { sel: '#tool_fhpath', fn: clickFHPath, evt: 'click', key: ['Q', true] }, { sel: '#tool_line', fn: clickLine, evt: 'click', key: ['L', true] }, { sel: '#tool_rect', fn: clickRect, evt: 'mouseup', key: ['R', true], parent: '#tools_rect', icon: 'rect' }, { sel: '#tool_square', fn: clickSquare, evt: 'mouseup', parent: '#tools_rect', icon: 'square' }, { sel: '#tool_fhrect', fn: clickFHRect, evt: 'mouseup', parent: '#tools_rect', icon: 'fh_rect' }, { sel: '#tool_ellipse', fn: clickEllipse, evt: 'mouseup', key: ['E', true], parent: '#tools_ellipse', icon: 'ellipse' }, { sel: '#tool_circle', fn: clickCircle, evt: 'mouseup', parent: '#tools_ellipse', icon: 'circle' }, { sel: '#tool_fhellipse', fn: clickFHEllipse, evt: 'mouseup', parent: '#tools_ellipse', icon: 'fh_ellipse' }, { sel: '#tool_path', fn: clickPath, evt: 'click', key: ['P', true] }, { sel: '#tool_text', fn: clickText, evt: 'click', key: ['T', true] }, { sel: '#tool_image', fn: clickImage, evt: 'mouseup' }, { sel: '#tool_zoom', fn: clickZoom, evt: 'mouseup', key: ['Z', true] }, { sel: '#tool_clear', fn: clickClear, evt: 'mouseup', key: ['N', true] }, { sel: '#tool_save', fn: function fn() {
|
|
if (editingsource) {
|
|
saveSourceEditor();
|
|
} else {
|
|
clickSave();
|
|
}
|
|
},
|
|
evt: 'mouseup', key: ['S', true] }, { sel: '#tool_export', fn: clickExport, evt: 'mouseup' }, { sel: '#tool_open', fn: clickOpen, evt: 'mouseup', key: ['O', true] }, { sel: '#tool_import', fn: clickImport, evt: 'mouseup' }, { sel: '#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true] }, { sel: '#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true] }, { sel: '#tool_source_cancel,.overlay,#tool_docprops_cancel,#tool_prefs_cancel', fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true }, { sel: '#tool_source_save', fn: saveSourceEditor, evt: 'click' }, { sel: '#tool_docprops_save', fn: saveDocProperties, evt: 'click' }, { sel: '#tool_docprops', fn: showDocProperties, evt: 'mouseup' }, { sel: '#tool_prefs_save', fn: savePreferences, evt: 'click' }, { sel: '#tool_prefs_option', fn: function fn() {
|
|
showPreferences();return false;
|
|
},
|
|
evt: 'mouseup' }, { sel: '#tool_delete,#tool_delete_multi', fn: deleteSelected, evt: 'click', key: ['del/backspace', true] }, { sel: '#tool_reorient', fn: reorientPath, evt: 'click' }, { sel: '#tool_node_link', fn: linkControlPoints, evt: 'click' }, { sel: '#tool_node_clone', fn: clonePathNode, evt: 'click' }, { sel: '#tool_node_delete', fn: deletePathNode, evt: 'click' }, { sel: '#tool_openclose_path', fn: opencloseSubPath, evt: 'click' }, { sel: '#tool_add_subpath', fn: addSubPath, evt: 'click' }, { sel: '#tool_move_top', fn: moveToTopSelected, evt: 'click', key: 'ctrl+shift+]' }, { sel: '#tool_move_bottom', fn: moveToBottomSelected, evt: 'click', key: 'ctrl+shift+[' }, { sel: '#tool_topath', fn: convertToPath$$1, evt: 'click' }, { sel: '#tool_make_link,#tool_make_link_multi', fn: makeHyperlink, evt: 'click' }, { sel: '#tool_undo', fn: clickUndo, evt: 'click' }, { sel: '#tool_redo', fn: clickRedo, evt: 'click' }, { sel: '#tool_clone,#tool_clone_multi', fn: clickClone, evt: 'click', key: ['D', true] }, { sel: '#tool_group_elements', fn: clickGroup, evt: 'click', key: ['G', true] }, { sel: '#tool_ungroup', fn: clickGroup, evt: 'click' }, { sel: '#tool_unlink_use', fn: clickGroup, evt: 'click' }, { sel: '[id^=tool_align]', fn: clickAlign, evt: 'click' },
|
|
// these two lines are required to make Opera work properly with the flyout mechanism
|
|
// {sel: '#tools_rect_show', fn: clickRect, evt: 'click'},
|
|
// {sel: '#tools_ellipse_show', fn: clickEllipse, evt: 'click'},
|
|
{ sel: '#tool_bold', fn: clickBold, evt: 'mousedown' }, { sel: '#tool_italic', fn: clickItalic, evt: 'mousedown' }, { sel: '#sidepanel_handle', fn: toggleSidePanel, key: ['X'] }, { sel: '#copy_save_done', fn: cancelOverlays, evt: 'click' },
|
|
|
|
// Shortcuts not associated with buttons
|
|
|
|
{ key: 'ctrl+left', fn: function fn() {
|
|
rotateSelected(0, 1);
|
|
}
|
|
}, { key: 'ctrl+right', fn: function fn() {
|
|
rotateSelected(1, 1);
|
|
}
|
|
}, { key: 'ctrl+shift+left', fn: function fn() {
|
|
rotateSelected(0, 5);
|
|
}
|
|
}, { key: 'ctrl+shift+right', fn: function fn() {
|
|
rotateSelected(1, 5);
|
|
}
|
|
}, { key: 'shift+O', fn: selectPrev }, { key: 'shift+P', fn: selectNext }, { key: [modKey + 'up', true], fn: function fn() {
|
|
zoomImage(2);
|
|
}
|
|
}, { key: [modKey + 'down', true], fn: function fn() {
|
|
zoomImage(0.5);
|
|
}
|
|
}, { key: [modKey + ']', true], fn: function fn() {
|
|
moveUpDownSelected('Up');
|
|
}
|
|
}, { key: [modKey + '[', true], fn: function fn() {
|
|
moveUpDownSelected('Down');
|
|
}
|
|
}, { key: ['up', true], fn: function fn() {
|
|
moveSelected(0, -1);
|
|
}
|
|
}, { key: ['down', true], fn: function fn() {
|
|
moveSelected(0, 1);
|
|
}
|
|
}, { key: ['left', true], fn: function fn() {
|
|
moveSelected(-1, 0);
|
|
}
|
|
}, { key: ['right', true], fn: function fn() {
|
|
moveSelected(1, 0);
|
|
}
|
|
}, { key: 'shift+up', fn: function fn() {
|
|
moveSelected(0, -10);
|
|
}
|
|
}, { key: 'shift+down', fn: function fn() {
|
|
moveSelected(0, 10);
|
|
}
|
|
}, { key: 'shift+left', fn: function fn() {
|
|
moveSelected(-10, 0);
|
|
}
|
|
}, { key: 'shift+right', fn: function fn() {
|
|
moveSelected(10, 0);
|
|
}
|
|
}, { key: ['alt+up', true], fn: function fn() {
|
|
svgCanvas.cloneSelectedElements(0, -1);
|
|
}
|
|
}, { key: ['alt+down', true], fn: function fn() {
|
|
svgCanvas.cloneSelectedElements(0, 1);
|
|
}
|
|
}, { key: ['alt+left', true], fn: function fn() {
|
|
svgCanvas.cloneSelectedElements(-1, 0);
|
|
}
|
|
}, { key: ['alt+right', true], fn: function fn() {
|
|
svgCanvas.cloneSelectedElements(1, 0);
|
|
}
|
|
}, { key: ['alt+shift+up', true], fn: function fn() {
|
|
svgCanvas.cloneSelectedElements(0, -10);
|
|
}
|
|
}, { key: ['alt+shift+down', true], fn: function fn() {
|
|
svgCanvas.cloneSelectedElements(0, 10);
|
|
}
|
|
}, { key: ['alt+shift+left', true], fn: function fn() {
|
|
svgCanvas.cloneSelectedElements(-10, 0);
|
|
}
|
|
}, { key: ['alt+shift+right', true], fn: function fn() {
|
|
svgCanvas.cloneSelectedElements(10, 0);
|
|
}
|
|
}, { key: 'A', fn: function fn() {
|
|
svgCanvas.selectAllInCurrentLayer();
|
|
}
|
|
},
|
|
|
|
// Standard shortcuts
|
|
{ key: modKey + 'z', fn: clickUndo }, { key: modKey + 'shift+z', fn: clickRedo }, { key: modKey + 'y', fn: clickRedo }, { key: modKey + 'x', fn: cutSelected }, { key: modKey + 'c', fn: copySelected }, { key: modKey + 'v', fn: pasteInCenter }];
|
|
|
|
// Tooltips not directly associated with a single function
|
|
var keyAssocs = {
|
|
'4/Shift+4': '#tools_rect_show',
|
|
'5/Shift+5': '#tools_ellipse_show'
|
|
};
|
|
|
|
return {
|
|
setAll: function setAll() {
|
|
var flyouts = {};
|
|
|
|
$$b.each(toolButtons, function (i, opts) {
|
|
// Bind function to button
|
|
var btn = void 0;
|
|
if (opts.sel) {
|
|
btn = $$b(opts.sel);
|
|
if (!btn.length) {
|
|
return true;
|
|
} // Skip if markup does not exist
|
|
if (opts.evt) {
|
|
if (isTouch() && opts.evt === 'click') {
|
|
opts.evt = 'mousedown';
|
|
}
|
|
btn[opts.evt](opts.fn);
|
|
}
|
|
|
|
// Add to parent flyout menu, if able to be displayed
|
|
if (opts.parent && $$b(opts.parent + '_show').length) {
|
|
var fH = $$b(opts.parent);
|
|
if (!fH.length) {
|
|
fH = makeFlyoutHolder(opts.parent.substr(1));
|
|
}
|
|
|
|
fH.append(btn);
|
|
|
|
if (!Array.isArray(flyouts[opts.parent])) {
|
|
flyouts[opts.parent] = [];
|
|
}
|
|
flyouts[opts.parent].push(opts);
|
|
}
|
|
}
|
|
|
|
// Bind function to shortcut key
|
|
if (opts.key) {
|
|
// Set shortcut based on options
|
|
var keyval = void 0,
|
|
|
|
// disInInp = true,
|
|
pd = false;
|
|
if (Array.isArray(opts.key)) {
|
|
keyval = opts.key[0];
|
|
if (opts.key.length > 1) {
|
|
pd = opts.key[1];
|
|
}
|
|
// if (opts.key.length > 2) { disInInp = opts.key[2]; }
|
|
} else {
|
|
keyval = opts.key;
|
|
}
|
|
keyval += '';
|
|
|
|
var fn = opts.fn;
|
|
|
|
$$b.each(keyval.split('/'), function (i, key) {
|
|
$$b(document).bind('keydown', key, function (e) {
|
|
fn();
|
|
if (pd) {
|
|
e.preventDefault();
|
|
}
|
|
// Prevent default on ALL keys?
|
|
return false;
|
|
});
|
|
});
|
|
|
|
// Put shortcut in title
|
|
if (opts.sel && !opts.hidekey && btn.attr('title')) {
|
|
var newTitle = btn.attr('title').split('[')[0] + ' (' + keyval + ')';
|
|
keyAssocs[keyval] = opts.sel;
|
|
// Disregard for menu items
|
|
if (!btn.parents('#main_menu').length) {
|
|
btn.attr('title', newTitle);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Setup flyouts
|
|
setupFlyouts(flyouts);
|
|
|
|
// Misc additional actions
|
|
|
|
// Make 'return' keypress trigger the change event
|
|
$$b('.attr_changer, #image_url').bind('keydown', 'return', function (evt) {
|
|
$$b(this).change();
|
|
evt.preventDefault();
|
|
});
|
|
|
|
$$b(window).bind('keydown', 'tab', function (e) {
|
|
if (uiContext === 'canvas') {
|
|
e.preventDefault();
|
|
selectNext();
|
|
}
|
|
}).bind('keydown', 'shift+tab', function (e) {
|
|
if (uiContext === 'canvas') {
|
|
e.preventDefault();
|
|
selectPrev();
|
|
}
|
|
});
|
|
|
|
$$b('#tool_zoom').dblclick(dblclickZoom);
|
|
},
|
|
setTitles: function setTitles() {
|
|
$$b.each(keyAssocs, function (keyval, sel) {
|
|
var menu = $$b(sel).parents('#main_menu').length;
|
|
|
|
$$b(sel).each(function () {
|
|
var t = void 0;
|
|
if (menu) {
|
|
t = $$b(this).text().split(' [')[0];
|
|
} else {
|
|
t = this.title.split(' [')[0];
|
|
}
|
|
var keyStr = '';
|
|
// Shift+Up
|
|
$$b.each(keyval.split('/'), function (i, key) {
|
|
var modBits = key.split('+');
|
|
var mod = '';
|
|
if (modBits.length > 1) {
|
|
mod = modBits[0] + '+';
|
|
key = modBits[1];
|
|
}
|
|
keyStr += (i ? '/' : '') + mod + (uiStrings$1['key_' + key] || key);
|
|
});
|
|
if (menu) {
|
|
this.lastChild.textContent = t + ' [' + keyStr + ']';
|
|
} else {
|
|
this.title = t + ' [' + keyStr + ']';
|
|
}
|
|
});
|
|
});
|
|
},
|
|
getButtonData: function getButtonData(sel) {
|
|
var b = void 0;
|
|
$$b.each(toolButtons, function (i, btn) {
|
|
if (btn.sel === sel) {
|
|
b = btn;
|
|
}
|
|
});
|
|
return b;
|
|
}
|
|
};
|
|
}();
|
|
|
|
Actions.setAll();
|
|
|
|
// Select given tool
|
|
editor.ready(function () {
|
|
var tool = void 0;
|
|
var itool = curConfig.initTool,
|
|
container = $$b('#tools_left, #svg_editor .tools_flyout'),
|
|
preTool = container.find('#tool_' + itool),
|
|
regTool = container.find('#' + itool);
|
|
if (preTool.length) {
|
|
tool = preTool;
|
|
} else if (regTool.length) {
|
|
tool = regTool;
|
|
} else {
|
|
tool = $$b('#tool_select');
|
|
}
|
|
tool.click().mouseup();
|
|
|
|
if (curConfig.wireframe) {
|
|
$$b('#tool_wireframe').click();
|
|
}
|
|
|
|
if (curConfig.showlayers) {
|
|
toggleSidePanel();
|
|
}
|
|
|
|
$$b('#rulers').toggle(!!curConfig.showRulers);
|
|
|
|
if (curConfig.showRulers) {
|
|
$$b('#show_rulers')[0].checked = true;
|
|
}
|
|
|
|
if (curConfig.baseUnit) {
|
|
$$b('#base_unit').val(curConfig.baseUnit);
|
|
}
|
|
|
|
if (curConfig.gridSnapping) {
|
|
$$b('#grid_snapping_on')[0].checked = true;
|
|
}
|
|
|
|
if (curConfig.snappingStep) {
|
|
$$b('#grid_snapping_step').val(curConfig.snappingStep);
|
|
}
|
|
|
|
if (curConfig.gridColor) {
|
|
$$b('#grid_color').val(curConfig.gridColor);
|
|
}
|
|
});
|
|
|
|
// init SpinButtons
|
|
$$b('#rect_rx').SpinButton({ min: 0, max: 1000, stateObj: stateObj, callback: changeRectRadius });
|
|
$$b('#stroke_width').SpinButton({ min: 0, max: 99, smallStep: 0.1, stateObj: stateObj, callback: changeStrokeWidth });
|
|
$$b('#angle').SpinButton({ min: -180, max: 180, step: 5, stateObj: stateObj, callback: changeRotationAngle });
|
|
$$b('#font_size').SpinButton({ min: 0.001, stepfunc: stepFontSize, stateObj: stateObj, callback: changeFontSize });
|
|
$$b('#group_opacity').SpinButton({ min: 0, max: 100, step: 5, stateObj: stateObj, callback: changeOpacity });
|
|
$$b('#blur').SpinButton({ min: 0, max: 10, step: 0.1, stateObj: stateObj, callback: changeBlur });
|
|
$$b('#zoom').SpinButton({ min: 0.001, max: 10000, step: 50, stepfunc: stepZoom, stateObj: stateObj, callback: changeZoom })
|
|
// Set default zoom
|
|
.val(svgCanvas.getZoom() * 100);
|
|
|
|
$$b('#workarea').contextMenu({
|
|
menu: 'cmenu_canvas',
|
|
inSpeed: 0
|
|
}, function (action, el, pos) {
|
|
switch (action) {
|
|
case 'delete':
|
|
deleteSelected();
|
|
break;
|
|
case 'cut':
|
|
cutSelected();
|
|
break;
|
|
case 'copy':
|
|
copySelected();
|
|
break;
|
|
case 'paste':
|
|
svgCanvas.pasteElements();
|
|
break;
|
|
case 'paste_in_place':
|
|
svgCanvas.pasteElements('in_place');
|
|
break;
|
|
case 'group':
|
|
case 'group_elements':
|
|
svgCanvas.groupSelectedElements();
|
|
break;
|
|
case 'ungroup':
|
|
svgCanvas.ungroupSelectedElement();
|
|
break;
|
|
case 'move_front':
|
|
moveToTopSelected();
|
|
break;
|
|
case 'move_up':
|
|
moveUpDownSelected('Up');
|
|
break;
|
|
case 'move_down':
|
|
moveUpDownSelected('Down');
|
|
break;
|
|
case 'move_back':
|
|
moveToBottomSelected();
|
|
break;
|
|
default:
|
|
if (hasCustomHandler(action)) {
|
|
getCustomHandler(action).call();
|
|
}
|
|
break;
|
|
}
|
|
});
|
|
|
|
var lmenuFunc = function lmenuFunc(action, el, pos) {
|
|
switch (action) {
|
|
case 'dupe':
|
|
cloneLayer();
|
|
break;
|
|
case 'delete':
|
|
deleteLayer();
|
|
break;
|
|
case 'merge_down':
|
|
mergeLayer();
|
|
break;
|
|
case 'merge_all':
|
|
svgCanvas.mergeAllLayers();
|
|
updateContextPanel();
|
|
populateLayers();
|
|
break;
|
|
}
|
|
};
|
|
|
|
$$b('#layerlist').contextMenu({
|
|
menu: 'cmenu_layers',
|
|
inSpeed: 0
|
|
}, lmenuFunc);
|
|
|
|
$$b('#layer_moreopts').contextMenu({
|
|
menu: 'cmenu_layers',
|
|
inSpeed: 0,
|
|
allowLeft: true
|
|
}, lmenuFunc);
|
|
|
|
$$b('.contextMenu li').mousedown(function (ev) {
|
|
ev.preventDefault();
|
|
});
|
|
|
|
$$b('#cmenu_canvas li').disableContextMenu();
|
|
canvMenu.enableContextMenuItems('#delete,#cut,#copy');
|
|
|
|
function enableOrDisableClipboard() {
|
|
var svgeditClipboard = void 0;
|
|
try {
|
|
svgeditClipboard = localStorage.getItem('svgedit_clipboard');
|
|
} catch (err) {}
|
|
canvMenu[(svgeditClipboard ? 'en' : 'dis') + 'ableContextMenuItems']('#paste,#paste_in_place');
|
|
}
|
|
enableOrDisableClipboard();
|
|
|
|
window.addEventListener('storage', function (e) {
|
|
if (e.key !== 'svgedit_clipboard') {
|
|
return;
|
|
}
|
|
|
|
enableOrDisableClipboard();
|
|
});
|
|
|
|
window.addEventListener('beforeunload', function (e) {
|
|
// Suppress warning if page is empty
|
|
if (undoMgr.getUndoStackSize() === 0) {
|
|
editor.showSaveWarning = false;
|
|
}
|
|
|
|
// showSaveWarning is set to 'false' when the page is saved.
|
|
if (!curConfig.no_save_warning && editor.showSaveWarning) {
|
|
// Browser already asks question about closing the page
|
|
e.returnValue = uiStrings$1.notification.unsavedChanges; // Firefox needs this when beforeunload set by addEventListener (even though message is not used)
|
|
return uiStrings$1.notification.unsavedChanges;
|
|
}
|
|
}, false);
|
|
|
|
editor.canvas.getUIStrings = function () {
|
|
return uiStrings$1;
|
|
};
|
|
|
|
editor.openPrep = function (func) {
|
|
$$b('#main_menu').hide();
|
|
if (undoMgr.getUndoStackSize() === 0) {
|
|
func(true);
|
|
} else {
|
|
$$b.confirm(uiStrings$1.notification.QwantToOpen, func);
|
|
}
|
|
};
|
|
|
|
function onDragEnter(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
// and indicator should be displayed here, such as "drop files here"
|
|
}
|
|
|
|
function onDragOver(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
}
|
|
|
|
function onDragLeave(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
// hypothetical indicator should be removed here
|
|
}
|
|
// Use HTML5 File API: http://www.w3.org/TR/FileAPI/
|
|
// if browser has HTML5 File API support, then we will show the open menu item
|
|
// and provide a file input to click. When that change event fires, it will
|
|
// get the text contents of the file and send it to the canvas
|
|
if (window.FileReader) {
|
|
var importImage = function importImage(e) {
|
|
$$b.process_cancel(uiStrings$1.notification.loadingImage);
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
$$b('#workarea').removeAttr('style');
|
|
$$b('#main_menu').hide();
|
|
var file = e.type === 'drop' ? e.dataTransfer.files[0] : this.files[0];
|
|
if (!file) {
|
|
$$b('#dialog_box').hide();
|
|
return;
|
|
}
|
|
/* if (file.type === 'application/pdf') { // Todo: Handle PDF imports
|
|
}
|
|
else */
|
|
if (file.type.includes('image')) {
|
|
// Detected an image
|
|
// svg handling
|
|
var reader = void 0;
|
|
if (file.type.includes('svg')) {
|
|
reader = new FileReader();
|
|
reader.onloadend = function (e) {
|
|
var newElement = svgCanvas.importSvgString(e.target.result, true);
|
|
svgCanvas.ungroupSelectedElement();
|
|
svgCanvas.ungroupSelectedElement();
|
|
svgCanvas.groupSelectedElements();
|
|
svgCanvas.alignSelectedElements('m', 'page');
|
|
svgCanvas.alignSelectedElements('c', 'page');
|
|
// highlight imported element, otherwise we get strange empty selectbox
|
|
svgCanvas.selectOnly([newElement]);
|
|
$$b('#dialog_box').hide();
|
|
};
|
|
reader.readAsText(file);
|
|
} else {
|
|
// bitmap handling
|
|
reader = new FileReader();
|
|
reader.onloadend = function (e) {
|
|
// let's insert the new image until we know its dimensions
|
|
var insertNewImage = function insertNewImage(width, height) {
|
|
var newImage = svgCanvas.addSvgElementFromJson({
|
|
element: 'image',
|
|
attr: {
|
|
x: 0,
|
|
y: 0,
|
|
width: width,
|
|
height: height,
|
|
id: svgCanvas.getNextId(),
|
|
style: 'pointer-events:inherit'
|
|
}
|
|
});
|
|
svgCanvas.setHref(newImage, e.target.result);
|
|
svgCanvas.selectOnly([newImage]);
|
|
svgCanvas.alignSelectedElements('m', 'page');
|
|
svgCanvas.alignSelectedElements('c', 'page');
|
|
updateContextPanel();
|
|
$$b('#dialog_box').hide();
|
|
};
|
|
// create dummy img so we know the default dimensions
|
|
var imgWidth = 100;
|
|
var imgHeight = 100;
|
|
var img = new Image();
|
|
img.src = e.target.result;
|
|
img.style.opacity = 0;
|
|
img.onload = function () {
|
|
imgWidth = img.offsetWidth;
|
|
imgHeight = img.offsetHeight;
|
|
insertNewImage(imgWidth, imgHeight);
|
|
};
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
}
|
|
};
|
|
|
|
workarea[0].addEventListener('dragenter', onDragEnter, false);
|
|
workarea[0].addEventListener('dragover', onDragOver, false);
|
|
workarea[0].addEventListener('dragleave', onDragLeave, false);
|
|
workarea[0].addEventListener('drop', importImage, false);
|
|
|
|
var open = $$b('<input type="file">').change(function () {
|
|
var f = this;
|
|
editor.openPrep(function (ok) {
|
|
if (!ok) {
|
|
return;
|
|
}
|
|
svgCanvas.clear();
|
|
if (f.files.length === 1) {
|
|
$$b.process_cancel(uiStrings$1.notification.loadingImage);
|
|
var reader = new FileReader();
|
|
reader.onloadend = function (e) {
|
|
loadSvgString(e.target.result);
|
|
updateCanvas();
|
|
};
|
|
reader.readAsText(f.files[0]);
|
|
}
|
|
});
|
|
});
|
|
$$b('#tool_open').show().prepend(open);
|
|
|
|
var imgImport = $$b('<input type="file">').change(importImage);
|
|
$$b('#tool_import').show().prepend(imgImport);
|
|
}
|
|
|
|
// $(function () {
|
|
updateCanvas(true);
|
|
// });
|
|
|
|
// const revnums = "svg-editor.js ($Rev$) ";
|
|
// revnums += svgCanvas.getVersion();
|
|
// $('#copyright')[0].setAttribute('title', revnums);
|
|
|
|
// For Compatibility with older extensions
|
|
// $(function () {
|
|
window.svgCanvas = svgCanvas;
|
|
svgCanvas.ready = editor.ready;
|
|
// });
|
|
|
|
var setLang = editor.setLang = function (lang, allStrings) {
|
|
editor.langChanged = true;
|
|
$$b.pref('lang', lang);
|
|
$$b('#lang_select').val(lang);
|
|
if (!allStrings) {
|
|
return;
|
|
}
|
|
$$b.extend(uiStrings$1, allStrings);
|
|
|
|
// const notif = allStrings.notification; // Currently unused
|
|
// $.extend will only replace the given strings
|
|
var oldLayerName = $$b('#layerlist tr.layersel td.layername').text();
|
|
var renameLayer = oldLayerName === uiStrings$1.common.layer + ' 1';
|
|
|
|
svgCanvas.setUiStrings(allStrings);
|
|
Actions.setTitles();
|
|
|
|
if (renameLayer) {
|
|
svgCanvas.renameCurrentLayer(uiStrings$1.common.layer + ' 1');
|
|
populateLayers();
|
|
}
|
|
|
|
// In case extensions loaded before the locale, now we execute a callback on them
|
|
if (extsPreLang.length) {
|
|
while (extsPreLang.length) {
|
|
var ext = extsPreLang.shift();
|
|
ext.langReady({ lang: lang, uiStrings: uiStrings$1 });
|
|
}
|
|
} else {
|
|
svgCanvas.runExtensions('langReady', { lang: lang, uiStrings: uiStrings$1 });
|
|
}
|
|
svgCanvas.runExtensions('langChanged', lang);
|
|
|
|
// Update flyout tooltips
|
|
setFlyoutTitles();
|
|
|
|
// Copy title for certain tool elements
|
|
var elems = {
|
|
'#stroke_color': '#tool_stroke .icon_label, #tool_stroke .color_block',
|
|
'#fill_color': '#tool_fill label, #tool_fill .color_block',
|
|
'#linejoin_miter': '#cur_linejoin',
|
|
'#linecap_butt': '#cur_linecap'
|
|
};
|
|
|
|
$$b.each(elems, function (source, dest) {
|
|
$$b(dest).attr('title', $$b(source)[0].title);
|
|
});
|
|
|
|
// Copy alignment titles
|
|
$$b('#multiselected_panel div[id^=tool_align]').each(function () {
|
|
$$b('#tool_pos' + this.id.substr(10))[0].title = this.title;
|
|
});
|
|
};
|
|
init$7({
|
|
addLangData: function addLangData(langParam) {
|
|
return editor.canvas.runExtensions('addlangData', langParam, true);
|
|
},
|
|
|
|
curConfig: curConfig,
|
|
setLang: setLang
|
|
});
|
|
// Load extensions
|
|
// Bit of a hack to run extensions in local Opera/IE9
|
|
if (document.location.protocol === 'file:') {
|
|
setTimeout(extFunc, 100);
|
|
} else {
|
|
extFunc();
|
|
}
|
|
};
|
|
|
|
editor.ready = function (cb) {
|
|
if (!isReady) {
|
|
callbacks.push(cb);
|
|
} else {
|
|
cb();
|
|
}
|
|
};
|
|
|
|
editor.runCallbacks = function () {
|
|
// Todo: See if there is any benefit to refactoring some
|
|
// of the existing `editor.ready()` calls to return Promises
|
|
Promise.all(callbacks.map(function (cb) {
|
|
return cb();
|
|
})).then(function () {
|
|
isReady = true;
|
|
});
|
|
};
|
|
|
|
editor.loadFromString = function (str) {
|
|
editor.ready(function () {
|
|
loadSvgString(str);
|
|
});
|
|
};
|
|
|
|
editor.disableUI = function (featList) {
|
|
// $(function () {
|
|
// $('#tool_wireframe, #tool_image, #main_button, #tool_source, #sidepanels').remove();
|
|
// $('#tools_top').css('left', 5);
|
|
// });
|
|
};
|
|
|
|
editor.loadFromURL = function (url, opts) {
|
|
if (!opts) {
|
|
opts = {};
|
|
}
|
|
|
|
var _opts = opts,
|
|
cache = _opts.cache,
|
|
cb = _opts.callback;
|
|
|
|
|
|
editor.ready(function () {
|
|
$$b.ajax({
|
|
url: url,
|
|
dataType: 'text',
|
|
cache: !!cache,
|
|
beforeSend: function beforeSend() {
|
|
$$b.process_cancel(uiStrings$1.notification.loadingImage);
|
|
},
|
|
success: function success(str) {
|
|
loadSvgString(str, cb);
|
|
},
|
|
error: function error(xhr, stat, err) {
|
|
if (xhr.status !== 404 && xhr.responseText) {
|
|
loadSvgString(xhr.responseText, cb);
|
|
} else {
|
|
$$b.alert(uiStrings$1.notification.URLloadFail + ': \n' + err, cb);
|
|
}
|
|
},
|
|
complete: function complete() {
|
|
$$b('#dialog_box').hide();
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
editor.loadFromDataURI = function (str) {
|
|
editor.ready(function () {
|
|
var base64 = false;
|
|
var pre = str.match(/^data:image\/svg\+xml;base64,/);
|
|
if (pre) {
|
|
base64 = true;
|
|
} else {
|
|
pre = str.match(/^data:image\/svg\+xml(?:;(?:utf8)?)?,/);
|
|
}
|
|
if (pre) {
|
|
pre = pre[0];
|
|
}
|
|
var src = str.slice(pre.length);
|
|
loadSvgString(base64 ? decode64(src) : decodeURIComponent(src));
|
|
});
|
|
};
|
|
|
|
editor.addExtension = function () {
|
|
var args = arguments;
|
|
|
|
// Note that we don't want this on editor.ready since some extensions
|
|
// may want to run before then (like server_opensave).
|
|
// $(function () {
|
|
if (svgCanvas) {
|
|
svgCanvas.addExtension.apply(this, args);
|
|
}
|
|
// });
|
|
};
|
|
|
|
// Defer injection to wait out initial menu processing. This probably goes
|
|
// away once all context menu behavior is brought to context menu.
|
|
editor.ready(function () {
|
|
injectExtendedContextMenuItemsIntoDom();
|
|
});
|
|
|
|
// Run init once DOM is loaded
|
|
// jQuery(editor.init);
|
|
Promise.resolve().then(function () {
|
|
// We wait a micro-task to let the svgEditor variable be defined for module checks
|
|
editor.init();
|
|
});
|
|
|
|
return editor;
|
|
|
|
})));
|