Update build (`npm run prep` now restored)
parent
7100111d62
commit
b620eb55bb
File diff suppressed because it is too large
Load Diff
|
@ -1,22 +1,6 @@
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function _typeof(obj) {
|
|
||||||
"@babel/helpers - typeof";
|
|
||||||
|
|
||||||
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
|
||||||
_typeof = function (obj) {
|
|
||||||
return typeof obj;
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
_typeof = function (obj) {
|
|
||||||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return _typeof(obj);
|
|
||||||
}
|
|
||||||
|
|
||||||
// From https://github.com/inexorabletash/polyfill/blob/master/dom.js
|
// From https://github.com/inexorabletash/polyfill/blob/master/dom.js
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -31,7 +15,7 @@
|
||||||
*/
|
*/
|
||||||
function mixin(o, ps) {
|
function mixin(o, ps) {
|
||||||
if (!o) return;
|
if (!o) return;
|
||||||
Object.keys(ps).forEach(function (p) {
|
Object.keys(ps).forEach(p => {
|
||||||
if (p in o || p in o.prototype) {
|
if (p in o || p in o.prototype) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -52,8 +36,8 @@
|
||||||
|
|
||||||
|
|
||||||
function convertNodesIntoANode(nodes) {
|
function convertNodesIntoANode(nodes) {
|
||||||
nodes = nodes.map(function (node) {
|
nodes = nodes.map(node => {
|
||||||
var isNode = node && _typeof(node) === 'object' && 'nodeType' in node;
|
const isNode = node && typeof node === 'object' && 'nodeType' in node;
|
||||||
return isNode ? node : document.createTextNode(node);
|
return isNode ? node : document.createTextNode(node);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -61,30 +45,24 @@
|
||||||
return nodes[0];
|
return nodes[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
var node = document.createDocumentFragment();
|
const node = document.createDocumentFragment();
|
||||||
nodes.forEach(function (n) {
|
nodes.forEach(n => {
|
||||||
node.appendChild(n);
|
node.appendChild(n);
|
||||||
});
|
});
|
||||||
return node;
|
return node;
|
||||||
}
|
}
|
||||||
|
|
||||||
var ParentNode = {
|
const ParentNode = {
|
||||||
prepend: function prepend() {
|
prepend(...nodes) {
|
||||||
for (var _len = arguments.length, nodes = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
||||||
nodes[_key] = arguments[_key];
|
|
||||||
}
|
|
||||||
|
|
||||||
nodes = convertNodesIntoANode(nodes);
|
nodes = convertNodesIntoANode(nodes);
|
||||||
this.insertBefore(nodes, this.firstChild);
|
this.insertBefore(nodes, this.firstChild);
|
||||||
},
|
},
|
||||||
append: function append() {
|
|
||||||
for (var _len2 = arguments.length, nodes = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
||||||
nodes[_key2] = arguments[_key2];
|
|
||||||
}
|
|
||||||
|
|
||||||
|
append(...nodes) {
|
||||||
nodes = convertNodesIntoANode(nodes);
|
nodes = convertNodesIntoANode(nodes);
|
||||||
this.appendChild(nodes);
|
this.appendChild(nodes);
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
mixin(Document || HTMLDocument, ParentNode); // HTMLDocument for IE8
|
mixin(Document || HTMLDocument, ParentNode); // HTMLDocument for IE8
|
||||||
|
|
||||||
|
@ -92,54 +70,44 @@
|
||||||
mixin(Element, ParentNode); // Mixin ChildNode
|
mixin(Element, ParentNode); // Mixin ChildNode
|
||||||
// https://dom.spec.whatwg.org/#interface-childnode
|
// https://dom.spec.whatwg.org/#interface-childnode
|
||||||
|
|
||||||
var ChildNode = {
|
const ChildNode = {
|
||||||
before: function before() {
|
before(...nodes) {
|
||||||
var parent = this.parentNode;
|
const parent = this.parentNode;
|
||||||
if (!parent) return;
|
if (!parent) return;
|
||||||
var viablePreviousSibling = this.previousSibling;
|
let viablePreviousSibling = this.previousSibling;
|
||||||
|
|
||||||
for (var _len3 = arguments.length, nodes = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
|
||||||
nodes[_key3] = arguments[_key3];
|
|
||||||
}
|
|
||||||
|
|
||||||
while (nodes.includes(viablePreviousSibling)) {
|
while (nodes.includes(viablePreviousSibling)) {
|
||||||
viablePreviousSibling = viablePreviousSibling.previousSibling;
|
viablePreviousSibling = viablePreviousSibling.previousSibling;
|
||||||
}
|
}
|
||||||
|
|
||||||
var node = convertNodesIntoANode(nodes);
|
const node = convertNodesIntoANode(nodes);
|
||||||
parent.insertBefore(node, viablePreviousSibling ? viablePreviousSibling.nextSibling : parent.firstChild);
|
parent.insertBefore(node, viablePreviousSibling ? viablePreviousSibling.nextSibling : parent.firstChild);
|
||||||
},
|
},
|
||||||
after: function after() {
|
|
||||||
var parent = this.parentNode;
|
|
||||||
if (!parent) return;
|
|
||||||
var viableNextSibling = this.nextSibling;
|
|
||||||
|
|
||||||
for (var _len4 = arguments.length, nodes = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
|
after(...nodes) {
|
||||||
nodes[_key4] = arguments[_key4];
|
const parent = this.parentNode;
|
||||||
}
|
if (!parent) return;
|
||||||
|
let viableNextSibling = this.nextSibling;
|
||||||
|
|
||||||
while (nodes.includes(viableNextSibling)) {
|
while (nodes.includes(viableNextSibling)) {
|
||||||
viableNextSibling = viableNextSibling.nextSibling;
|
viableNextSibling = viableNextSibling.nextSibling;
|
||||||
}
|
}
|
||||||
|
|
||||||
var node = convertNodesIntoANode(nodes); // eslint-disable-next-line unicorn/prefer-modern-dom-apis
|
const node = convertNodesIntoANode(nodes); // eslint-disable-next-line unicorn/prefer-modern-dom-apis
|
||||||
|
|
||||||
parent.insertBefore(node, viableNextSibling);
|
parent.insertBefore(node, viableNextSibling);
|
||||||
},
|
},
|
||||||
replaceWith: function replaceWith() {
|
|
||||||
var parent = this.parentNode;
|
|
||||||
if (!parent) return;
|
|
||||||
var viableNextSibling = this.nextSibling;
|
|
||||||
|
|
||||||
for (var _len5 = arguments.length, nodes = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
|
replaceWith(...nodes) {
|
||||||
nodes[_key5] = arguments[_key5];
|
const parent = this.parentNode;
|
||||||
}
|
if (!parent) return;
|
||||||
|
let viableNextSibling = this.nextSibling;
|
||||||
|
|
||||||
while (nodes.includes(viableNextSibling)) {
|
while (nodes.includes(viableNextSibling)) {
|
||||||
viableNextSibling = viableNextSibling.nextSibling;
|
viableNextSibling = viableNextSibling.nextSibling;
|
||||||
}
|
}
|
||||||
|
|
||||||
var node = convertNodesIntoANode(nodes);
|
const node = convertNodesIntoANode(nodes);
|
||||||
|
|
||||||
if (this.parentNode === parent) {
|
if (this.parentNode === parent) {
|
||||||
parent.replaceChild(node, this);
|
parent.replaceChild(node, this);
|
||||||
|
@ -148,13 +116,15 @@
|
||||||
parent.insertBefore(node, viableNextSibling);
|
parent.insertBefore(node, viableNextSibling);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
remove: function remove() {
|
|
||||||
|
remove() {
|
||||||
if (!this.parentNode) {
|
if (!this.parentNode) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.parentNode.removeChild(this); // eslint-disable-line unicorn/prefer-node-remove
|
this.parentNode.removeChild(this); // eslint-disable-line unicorn/prefer-node-remove
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
mixin(DocumentType, ChildNode);
|
mixin(DocumentType, ChildNode);
|
||||||
mixin(Element, ChildNode);
|
mixin(Element, ChildNode);
|
||||||
|
|
|
@ -1,42 +1,6 @@
|
||||||
var svgEditorExtension_arrows = (function () {
|
var svgEditorExtension_arrows = (function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
||||||
try {
|
|
||||||
var info = gen[key](arg);
|
|
||||||
var value = info.value;
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (info.done) {
|
|
||||||
resolve(value);
|
|
||||||
} else {
|
|
||||||
Promise.resolve(value).then(_next, _throw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _asyncToGenerator(fn) {
|
|
||||||
return function () {
|
|
||||||
var self = this,
|
|
||||||
args = arguments;
|
|
||||||
return new Promise(function (resolve, reject) {
|
|
||||||
var gen = fn.apply(self, args);
|
|
||||||
|
|
||||||
function _next(value) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _throw(err) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
||||||
}
|
|
||||||
|
|
||||||
_next(undefined);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @file ext-arrows.js
|
* @file ext-arrows.js
|
||||||
*
|
*
|
||||||
|
@ -47,166 +11,105 @@ var svgEditorExtension_arrows = (function () {
|
||||||
*/
|
*/
|
||||||
var extArrows = {
|
var extArrows = {
|
||||||
name: 'arrows',
|
name: 'arrows',
|
||||||
init: function init(S) {
|
|
||||||
var _this = this;
|
|
||||||
|
|
||||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
|
async init(S) {
|
||||||
var strings, svgEditor, svgCanvas, addElem, nonce, $, prefix, selElems, arrowprefix, randomizeIds, setArrowNonce, unsetArrowNonce, pathdata, getLinked, showPanel, resetMarker, addMarker, setArrow, colorChanged, contextTools;
|
const strings = await S.importLocale();
|
||||||
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
const svgEditor = this;
|
||||||
while (1) {
|
const svgCanvas = svgEditor.canvas;
|
||||||
switch (_context2.prev = _context2.next) {
|
const // {svgcontent} = S,
|
||||||
case 0:
|
addElem = svgCanvas.addSVGElementFromJson,
|
||||||
colorChanged = function _colorChanged(elem) {
|
{
|
||||||
var color = elem.getAttribute('stroke');
|
nonce,
|
||||||
var mtypes = ['start', 'mid', 'end'];
|
$
|
||||||
var defs = svgCanvas.findDefs();
|
} = S,
|
||||||
$.each(mtypes, function (i, type) {
|
prefix = 'se_arrow_';
|
||||||
var marker = getLinked(elem, 'marker-' + type);
|
let selElems,
|
||||||
|
arrowprefix,
|
||||||
|
randomizeIds = S.randomize_ids;
|
||||||
|
/**
|
||||||
|
* @param {Window} win
|
||||||
|
* @param {!(string|Integer)} n
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
if (!marker) {
|
function setArrowNonce(win, n) {
|
||||||
return;
|
randomizeIds = true;
|
||||||
|
arrowprefix = prefix + n + '_';
|
||||||
|
pathdata.fw.id = arrowprefix + 'fw';
|
||||||
|
pathdata.bk.id = arrowprefix + 'bk';
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {Window} win
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function unsetArrowNonce(win) {
|
||||||
|
randomizeIds = false;
|
||||||
|
arrowprefix = prefix;
|
||||||
|
pathdata.fw.id = arrowprefix + 'fw';
|
||||||
|
pathdata.bk.id = arrowprefix + 'bk';
|
||||||
}
|
}
|
||||||
|
|
||||||
var curColor = $(marker).children().attr('fill');
|
svgCanvas.bind('setnonce', setArrowNonce);
|
||||||
var curD = $(marker).children().attr('d');
|
svgCanvas.bind('unsetnonce', unsetArrowNonce);
|
||||||
|
|
||||||
if (curColor === color) {
|
if (randomizeIds) {
|
||||||
return;
|
arrowprefix = prefix + nonce + '_';
|
||||||
|
} else {
|
||||||
|
arrowprefix = prefix;
|
||||||
}
|
}
|
||||||
|
|
||||||
var allMarkers = $(defs).find('marker');
|
const pathdata = {
|
||||||
var newMarker = null; // Different color, check if already made
|
fw: {
|
||||||
|
d: 'm0,0l10,5l-10,5l5,-5l-5,-5z',
|
||||||
allMarkers.each(function () {
|
refx: 8,
|
||||||
var attrs = $(this).children().attr(['fill', 'd']);
|
id: arrowprefix + 'fw'
|
||||||
|
},
|
||||||
if (attrs.fill === color && attrs.d === curD) {
|
bk: {
|
||||||
// Found another marker with this color and this path
|
d: 'm10,0l-10,5l10,5l-5,-5l5,-5z',
|
||||||
newMarker = this; // eslint-disable-line consistent-this
|
refx: 2,
|
||||||
|
id: arrowprefix + 'bk'
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
if (!newMarker) {
|
|
||||||
// Create a new marker with this color
|
|
||||||
var lastId = marker.id;
|
|
||||||
var dir = lastId.includes('_fw') ? 'fw' : 'bk';
|
|
||||||
newMarker = addMarker(dir, type, arrowprefix + dir + allMarkers.length);
|
|
||||||
$(newMarker).children().attr('fill', color);
|
|
||||||
}
|
|
||||||
|
|
||||||
$(elem).attr('marker-' + type, 'url(#' + newMarker.id + ')'); // Check if last marker can be removed
|
|
||||||
|
|
||||||
var remove = true;
|
|
||||||
$(S.svgcontent).find('line, polyline, path, polygon').each(function () {
|
|
||||||
var element = this; // eslint-disable-line consistent-this
|
|
||||||
|
|
||||||
$.each(mtypes, function (j, mtype) {
|
|
||||||
if ($(element).attr('marker-' + mtype) === 'url(#' + marker.id + ')') {
|
|
||||||
remove = false;
|
|
||||||
return remove;
|
|
||||||
}
|
|
||||||
|
|
||||||
return undefined;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!remove) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return undefined;
|
|
||||||
}); // Not found, so can safely remove
|
|
||||||
|
|
||||||
if (remove) {
|
|
||||||
$(marker).remove();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
/**
|
||||||
|
* Gets linked element.
|
||||||
|
* @param {Element} elem
|
||||||
|
* @param {string} attr
|
||||||
|
* @returns {Element}
|
||||||
|
*/
|
||||||
|
|
||||||
setArrow = function _setArrow() {
|
function getLinked(elem, attr) {
|
||||||
resetMarker();
|
const str = elem.getAttribute(attr);
|
||||||
var type = this.value;
|
|
||||||
|
|
||||||
if (type === 'none') {
|
if (!str) {
|
||||||
return;
|
return null;
|
||||||
} // Set marker on element
|
|
||||||
|
|
||||||
|
|
||||||
var dir = 'fw';
|
|
||||||
|
|
||||||
if (type === 'mid_bk') {
|
|
||||||
type = 'mid';
|
|
||||||
dir = 'bk';
|
|
||||||
} else if (type === 'both') {
|
|
||||||
addMarker('bk', type);
|
|
||||||
svgCanvas.changeSelectedAttribute('marker-start', 'url(#' + pathdata.bk.id + ')');
|
|
||||||
type = 'end';
|
|
||||||
dir = 'fw';
|
|
||||||
} else if (type === 'start') {
|
|
||||||
dir = 'bk';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
addMarker(dir, type);
|
const m = str.match(/\(#(.*)\)/); // const m = str.match(/\(#(?<id>.+)\)/);
|
||||||
svgCanvas.changeSelectedAttribute('marker-' + type, 'url(#' + pathdata[dir].id + ')');
|
// if (!m || !m.groups.id) {
|
||||||
svgCanvas.call('changed', selElems);
|
|
||||||
};
|
|
||||||
|
|
||||||
addMarker = function _addMarker(dir, type, id) {
|
if (!m || m.length !== 2) {
|
||||||
// TODO: Make marker (or use?) per arrow type, since refX can be different
|
return null;
|
||||||
id = id || arrowprefix + dir;
|
|
||||||
var data = pathdata[dir];
|
|
||||||
|
|
||||||
if (type === 'mid') {
|
|
||||||
data.refx = 5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var marker = svgCanvas.getElem(id);
|
return svgCanvas.getElem(m[1]); // return svgCanvas.getElem(m.groups.id);
|
||||||
|
|
||||||
if (!marker) {
|
|
||||||
marker = addElem({
|
|
||||||
element: 'marker',
|
|
||||||
attr: {
|
|
||||||
viewBox: '0 0 10 10',
|
|
||||||
id: id,
|
|
||||||
refY: 5,
|
|
||||||
markerUnits: 'strokeWidth',
|
|
||||||
markerWidth: 5,
|
|
||||||
markerHeight: 5,
|
|
||||||
orient: 'auto',
|
|
||||||
style: 'pointer-events:none' // Currently needed for Opera
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var arrow = addElem({
|
|
||||||
element: 'path',
|
|
||||||
attr: {
|
|
||||||
d: data.d,
|
|
||||||
fill: '#000000'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
marker.append(arrow);
|
|
||||||
svgCanvas.findDefs().append(marker);
|
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* @param {boolean} on
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
marker.setAttribute('refX', data.refx);
|
|
||||||
return marker;
|
|
||||||
};
|
|
||||||
|
|
||||||
resetMarker = function _resetMarker() {
|
function showPanel(on) {
|
||||||
var el = selElems[0];
|
|
||||||
el.removeAttribute('marker-start');
|
|
||||||
el.removeAttribute('marker-mid');
|
|
||||||
el.removeAttribute('marker-end');
|
|
||||||
};
|
|
||||||
|
|
||||||
showPanel = function _showPanel(on) {
|
|
||||||
$('#arrow_panel').toggle(on);
|
$('#arrow_panel').toggle(on);
|
||||||
|
|
||||||
if (on) {
|
if (on) {
|
||||||
var el = selElems[0];
|
const el = selElems[0];
|
||||||
var end = el.getAttribute('marker-end');
|
const end = el.getAttribute('marker-end');
|
||||||
var start = el.getAttribute('marker-start');
|
const start = el.getAttribute('marker-start');
|
||||||
var mid = el.getAttribute('marker-mid');
|
const mid = el.getAttribute('marker-mid');
|
||||||
var val;
|
let val;
|
||||||
|
|
||||||
if (end && start) {
|
if (end && start) {
|
||||||
val = 'both';
|
val = 'both';
|
||||||
|
@ -228,84 +131,173 @@ var svgEditorExtension_arrows = (function () {
|
||||||
|
|
||||||
$('#arrow_list').val(val);
|
$('#arrow_list').val(val);
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
getLinked = function _getLinked(elem, attr) {
|
|
||||||
var str = elem.getAttribute(attr);
|
|
||||||
|
|
||||||
if (!str) {
|
|
||||||
return null;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var m = str.match(/\(#(.*)\)/); // const m = str.match(/\(#(?<id>.+)\)/);
|
|
||||||
// if (!m || !m.groups.id) {
|
|
||||||
|
|
||||||
if (!m || m.length !== 2) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return svgCanvas.getElem(m[1]); // return svgCanvas.getElem(m.groups.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
unsetArrowNonce = function _unsetArrowNonce(win) {
|
|
||||||
randomizeIds = false;
|
|
||||||
arrowprefix = prefix;
|
|
||||||
pathdata.fw.id = arrowprefix + 'fw';
|
|
||||||
pathdata.bk.id = arrowprefix + 'bk';
|
|
||||||
};
|
|
||||||
|
|
||||||
setArrowNonce = function _setArrowNonce(win, n) {
|
|
||||||
randomizeIds = true;
|
|
||||||
arrowprefix = prefix + n + '_';
|
|
||||||
pathdata.fw.id = arrowprefix + 'fw';
|
|
||||||
pathdata.bk.id = arrowprefix + 'bk';
|
|
||||||
};
|
|
||||||
|
|
||||||
_context2.next = 10;
|
|
||||||
return S.importLocale();
|
|
||||||
|
|
||||||
case 10:
|
|
||||||
strings = _context2.sent;
|
|
||||||
svgEditor = _this;
|
|
||||||
svgCanvas = svgEditor.canvas;
|
|
||||||
// {svgcontent} = S,
|
|
||||||
addElem = svgCanvas.addSVGElementFromJson, nonce = S.nonce, $ = S.$, prefix = 'se_arrow_';
|
|
||||||
randomizeIds = S.randomize_ids;
|
|
||||||
/**
|
/**
|
||||||
* @param {Window} win
|
*
|
||||||
* @param {!(string|Integer)} n
|
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
svgCanvas.bind('setnonce', setArrowNonce);
|
|
||||||
svgCanvas.bind('unsetnonce', unsetArrowNonce);
|
|
||||||
|
|
||||||
if (randomizeIds) {
|
function resetMarker() {
|
||||||
arrowprefix = prefix + nonce + '_';
|
const el = selElems[0];
|
||||||
} else {
|
el.removeAttribute('marker-start');
|
||||||
arrowprefix = prefix;
|
el.removeAttribute('marker-mid');
|
||||||
|
el.removeAttribute('marker-end');
|
||||||
}
|
}
|
||||||
|
|
||||||
pathdata = {
|
|
||||||
fw: {
|
|
||||||
d: 'm0,0l10,5l-10,5l5,-5l-5,-5z',
|
|
||||||
refx: 8,
|
|
||||||
id: arrowprefix + 'fw'
|
|
||||||
},
|
|
||||||
bk: {
|
|
||||||
d: 'm10,0l-10,5l10,5l-5,-5l5,-5z',
|
|
||||||
refx: 2,
|
|
||||||
id: arrowprefix + 'bk'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
/**
|
||||||
* Gets linked element.
|
* @param {"bk"|"fw"} dir
|
||||||
* @param {Element} elem
|
* @param {"both"|"mid"|"end"|"start"} type
|
||||||
* @param {string} attr
|
* @param {string} id
|
||||||
* @returns {Element}
|
* @returns {Element}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
contextTools = [{
|
|
||||||
|
function addMarker(dir, type, id) {
|
||||||
|
// TODO: Make marker (or use?) per arrow type, since refX can be different
|
||||||
|
id = id || arrowprefix + dir;
|
||||||
|
const data = pathdata[dir];
|
||||||
|
|
||||||
|
if (type === 'mid') {
|
||||||
|
data.refx = 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
let marker = svgCanvas.getElem(id);
|
||||||
|
|
||||||
|
if (!marker) {
|
||||||
|
marker = addElem({
|
||||||
|
element: 'marker',
|
||||||
|
attr: {
|
||||||
|
viewBox: '0 0 10 10',
|
||||||
|
id,
|
||||||
|
refY: 5,
|
||||||
|
markerUnits: 'strokeWidth',
|
||||||
|
markerWidth: 5,
|
||||||
|
markerHeight: 5,
|
||||||
|
orient: 'auto',
|
||||||
|
style: 'pointer-events:none' // Currently needed for Opera
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const arrow = addElem({
|
||||||
|
element: 'path',
|
||||||
|
attr: {
|
||||||
|
d: data.d,
|
||||||
|
fill: '#000000'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
marker.append(arrow);
|
||||||
|
svgCanvas.findDefs().append(marker);
|
||||||
|
}
|
||||||
|
|
||||||
|
marker.setAttribute('refX', data.refx);
|
||||||
|
return marker;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function setArrow() {
|
||||||
|
resetMarker();
|
||||||
|
let type = this.value;
|
||||||
|
|
||||||
|
if (type === 'none') {
|
||||||
|
return;
|
||||||
|
} // Set marker on element
|
||||||
|
|
||||||
|
|
||||||
|
let dir = 'fw';
|
||||||
|
|
||||||
|
if (type === 'mid_bk') {
|
||||||
|
type = 'mid';
|
||||||
|
dir = 'bk';
|
||||||
|
} else if (type === 'both') {
|
||||||
|
addMarker('bk', type);
|
||||||
|
svgCanvas.changeSelectedAttribute('marker-start', 'url(#' + pathdata.bk.id + ')');
|
||||||
|
type = 'end';
|
||||||
|
dir = 'fw';
|
||||||
|
} else if (type === 'start') {
|
||||||
|
dir = 'bk';
|
||||||
|
}
|
||||||
|
|
||||||
|
addMarker(dir, type);
|
||||||
|
svgCanvas.changeSelectedAttribute('marker-' + type, 'url(#' + pathdata[dir].id + ')');
|
||||||
|
svgCanvas.call('changed', selElems);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {Element} elem
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function colorChanged(elem) {
|
||||||
|
const color = elem.getAttribute('stroke');
|
||||||
|
const mtypes = ['start', 'mid', 'end'];
|
||||||
|
const defs = svgCanvas.findDefs();
|
||||||
|
$.each(mtypes, function (i, type) {
|
||||||
|
const marker = getLinked(elem, 'marker-' + type);
|
||||||
|
|
||||||
|
if (!marker) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const curColor = $(marker).children().attr('fill');
|
||||||
|
const curD = $(marker).children().attr('d');
|
||||||
|
|
||||||
|
if (curColor === color) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const allMarkers = $(defs).find('marker');
|
||||||
|
let newMarker = null; // Different color, check if already made
|
||||||
|
|
||||||
|
allMarkers.each(function () {
|
||||||
|
const attrs = $(this).children().attr(['fill', 'd']);
|
||||||
|
|
||||||
|
if (attrs.fill === color && attrs.d === curD) {
|
||||||
|
// Found another marker with this color and this path
|
||||||
|
newMarker = this; // eslint-disable-line consistent-this
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!newMarker) {
|
||||||
|
// Create a new marker with this color
|
||||||
|
const lastId = marker.id;
|
||||||
|
const dir = lastId.includes('_fw') ? 'fw' : 'bk';
|
||||||
|
newMarker = addMarker(dir, type, arrowprefix + dir + allMarkers.length);
|
||||||
|
$(newMarker).children().attr('fill', color);
|
||||||
|
}
|
||||||
|
|
||||||
|
$(elem).attr('marker-' + type, 'url(#' + newMarker.id + ')'); // Check if last marker can be removed
|
||||||
|
|
||||||
|
let remove = true;
|
||||||
|
$(S.svgcontent).find('line, polyline, path, polygon').each(function () {
|
||||||
|
const element = this; // eslint-disable-line consistent-this
|
||||||
|
|
||||||
|
$.each(mtypes, function (j, mtype) {
|
||||||
|
if ($(element).attr('marker-' + mtype) === 'url(#' + marker.id + ')') {
|
||||||
|
remove = false;
|
||||||
|
return remove;
|
||||||
|
}
|
||||||
|
|
||||||
|
return undefined;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!remove) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return undefined;
|
||||||
|
}); // Not found, so can safely remove
|
||||||
|
|
||||||
|
if (remove) {
|
||||||
|
$(marker).remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const contextTools = [{
|
||||||
type: 'select',
|
type: 'select',
|
||||||
panel: 'arrow_panel',
|
panel: 'arrow_panel',
|
||||||
id: 'arrow_list',
|
id: 'arrow_list',
|
||||||
|
@ -314,51 +306,38 @@ var svgEditorExtension_arrows = (function () {
|
||||||
change: setArrow
|
change: setArrow
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
return _context2.abrupt("return", {
|
return {
|
||||||
name: strings.name,
|
name: strings.name,
|
||||||
context_tools: strings.contextTools.map(function (contextTool, i) {
|
context_tools: strings.contextTools.map((contextTool, i) => {
|
||||||
return Object.assign(contextTools[i], contextTool);
|
return Object.assign(contextTools[i], contextTool);
|
||||||
}),
|
}),
|
||||||
callback: function callback() {
|
|
||||||
|
callback() {
|
||||||
$('#arrow_panel').hide(); // Set ID so it can be translated in locale file
|
$('#arrow_panel').hide(); // Set ID so it can be translated in locale file
|
||||||
|
|
||||||
$('#arrow_list option')[0].id = 'connector_no_arrow';
|
$('#arrow_list option')[0].id = 'connector_no_arrow';
|
||||||
},
|
},
|
||||||
addLangData: function addLangData(_ref) {
|
|
||||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
|
||||||
var lang, importLocale, _yield$importLocale, langList;
|
|
||||||
|
|
||||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
async addLangData({
|
||||||
while (1) {
|
lang,
|
||||||
switch (_context.prev = _context.next) {
|
importLocale
|
||||||
case 0:
|
}) {
|
||||||
lang = _ref.lang, importLocale = _ref.importLocale;
|
const {
|
||||||
_context.next = 3;
|
langList
|
||||||
return importLocale();
|
} = await importLocale();
|
||||||
|
return {
|
||||||
case 3:
|
|
||||||
_yield$importLocale = _context.sent;
|
|
||||||
langList = _yield$importLocale.langList;
|
|
||||||
return _context.abrupt("return", {
|
|
||||||
data: langList
|
data: langList
|
||||||
});
|
};
|
||||||
|
|
||||||
case 6:
|
|
||||||
case "end":
|
|
||||||
return _context.stop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, _callee);
|
|
||||||
}))();
|
|
||||||
},
|
},
|
||||||
selectedChanged: function selectedChanged(opts) {
|
|
||||||
|
selectedChanged(opts) {
|
||||||
// Use this to update the current selected elements
|
// Use this to update the current selected elements
|
||||||
selElems = opts.elems;
|
selElems = opts.elems;
|
||||||
var markerElems = ['line', 'path', 'polyline', 'polygon'];
|
const markerElems = ['line', 'path', 'polyline', 'polygon'];
|
||||||
var i = selElems.length;
|
let i = selElems.length;
|
||||||
|
|
||||||
while (i--) {
|
while (i--) {
|
||||||
var elem = selElems[i];
|
const elem = selElems[i];
|
||||||
|
|
||||||
if (elem && markerElems.includes(elem.tagName)) {
|
if (elem && markerElems.includes(elem.tagName)) {
|
||||||
if (opts.selectedElement && !opts.multiselected) {
|
if (opts.selectedElement && !opts.multiselected) {
|
||||||
|
@ -371,8 +350,9 @@ var svgEditorExtension_arrows = (function () {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
elementChanged: function elementChanged(opts) {
|
|
||||||
var elem = opts.elems[0];
|
elementChanged(opts) {
|
||||||
|
const elem = opts.elems[0];
|
||||||
|
|
||||||
if (elem && (elem.getAttribute('marker-start') || elem.getAttribute('marker-mid') || elem.getAttribute('marker-end'))) {
|
if (elem && (elem.getAttribute('marker-start') || elem.getAttribute('marker-mid') || elem.getAttribute('marker-end'))) {
|
||||||
// const start = elem.getAttribute('marker-start');
|
// const start = elem.getAttribute('marker-start');
|
||||||
|
@ -382,16 +362,10 @@ var svgEditorExtension_arrows = (function () {
|
||||||
colorChanged(elem);
|
colorChanged(elem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
case 21:
|
};
|
||||||
case "end":
|
|
||||||
return _context2.stop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, _callee2);
|
|
||||||
}))();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extArrows;
|
return extArrows;
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -1,42 +1,6 @@
|
||||||
var svgEditorExtension_connector = (function () {
|
var svgEditorExtension_connector = (function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
||||||
try {
|
|
||||||
var info = gen[key](arg);
|
|
||||||
var value = info.value;
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (info.done) {
|
|
||||||
resolve(value);
|
|
||||||
} else {
|
|
||||||
Promise.resolve(value).then(_next, _throw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _asyncToGenerator(fn) {
|
|
||||||
return function () {
|
|
||||||
var self = this,
|
|
||||||
args = arguments;
|
|
||||||
return new Promise(function (resolve, reject) {
|
|
||||||
var gen = fn.apply(self, args);
|
|
||||||
|
|
||||||
function _next(value) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _throw(err) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
||||||
}
|
|
||||||
|
|
||||||
_next(undefined);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/* eslint-disable unicorn/no-fn-reference-in-iterator */
|
/* eslint-disable unicorn/no-fn-reference-in-iterator */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -49,90 +13,195 @@ var svgEditorExtension_connector = (function () {
|
||||||
*/
|
*/
|
||||||
var extConnector = {
|
var extConnector = {
|
||||||
name: 'connector',
|
name: 'connector',
|
||||||
init: function init(S) {
|
|
||||||
var _this = this;
|
|
||||||
|
|
||||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
async init(S) {
|
||||||
var svgEditor, svgCanvas, getElem, $, svgroot, importLocale, addElem, selManager, connSel, elData, strings, startX, startY, curLine, startElem, endElem, seNs, svgcontent, started, connections, selElems, getBBintersect, getOffset, showPanel, setPoint, updateLine, findConnectors, updateConnectors, init, buttons;
|
const svgEditor = this;
|
||||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
const svgCanvas = svgEditor.canvas;
|
||||||
while (1) {
|
const {
|
||||||
switch (_context.prev = _context.next) {
|
getElem
|
||||||
case 0:
|
} = svgCanvas;
|
||||||
init = function _init() {
|
const {
|
||||||
// Make sure all connectors have data set
|
$,
|
||||||
$(svgcontent).find('*').each(function () {
|
svgroot,
|
||||||
var conn = this.getAttributeNS(seNs, 'connector');
|
importLocale
|
||||||
|
} = S,
|
||||||
|
addElem = svgCanvas.addSVGElementFromJson,
|
||||||
|
selManager = S.selectorManager,
|
||||||
|
connSel = '.se_connector',
|
||||||
|
// connect_str = '-SE_CONNECT-',
|
||||||
|
elData = $.data;
|
||||||
|
const strings = await importLocale();
|
||||||
|
let startX,
|
||||||
|
startY,
|
||||||
|
curLine,
|
||||||
|
startElem,
|
||||||
|
endElem,
|
||||||
|
seNs,
|
||||||
|
{
|
||||||
|
svgcontent
|
||||||
|
} = S,
|
||||||
|
started = false,
|
||||||
|
connections = [],
|
||||||
|
selElems = [];
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {Float} x
|
||||||
|
* @param {Float} y
|
||||||
|
* @param {module:utilities.BBoxObject} bb
|
||||||
|
* @param {Float} offset
|
||||||
|
* @returns {module:math.XYObject}
|
||||||
|
*/
|
||||||
|
|
||||||
if (conn) {
|
function getBBintersect(x, y, bb, offset) {
|
||||||
this.setAttribute('class', connSel.substr(1));
|
if (offset) {
|
||||||
var connData = conn.split(' ');
|
offset -= 0;
|
||||||
var sbb = svgCanvas.getStrokedBBox([getElem(connData[0])]);
|
bb = $.extend({}, bb);
|
||||||
var ebb = svgCanvas.getStrokedBBox([getElem(connData[1])]);
|
bb.width += offset;
|
||||||
$(this).data('c_start', connData[0]).data('c_end', connData[1]).data('start_bb', sbb).data('end_bb', ebb);
|
bb.height += offset;
|
||||||
svgCanvas.getEditorNS(true);
|
bb.x -= offset / 2;
|
||||||
|
bb.y -= offset / 2;
|
||||||
}
|
}
|
||||||
}); // updateConnectors();
|
|
||||||
|
const midX = bb.x + bb.width / 2;
|
||||||
|
const midY = bb.y + bb.height / 2;
|
||||||
|
const lenX = x - midX;
|
||||||
|
const lenY = y - midY;
|
||||||
|
const slope = Math.abs(lenY / lenX);
|
||||||
|
let ratio;
|
||||||
|
|
||||||
|
if (slope < bb.height / bb.width) {
|
||||||
|
ratio = bb.width / 2 / Math.abs(lenX);
|
||||||
|
} else {
|
||||||
|
ratio = lenY ? bb.height / 2 / Math.abs(lenY) : 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
x: midX + lenX * ratio,
|
||||||
|
y: midY + lenY * ratio
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {"start"|"end"} side
|
||||||
|
* @param {Element} line
|
||||||
|
* @returns {Float}
|
||||||
|
*/
|
||||||
|
|
||||||
updateConnectors = function _updateConnectors(elems) {
|
|
||||||
// Updates connector lines based on selected elements
|
|
||||||
// Is not used on mousemove, as it runs getStrokedBBox every time,
|
|
||||||
// which isn't necessary there.
|
|
||||||
findConnectors(elems);
|
|
||||||
|
|
||||||
if (connections.length) {
|
function getOffset(side, line) {
|
||||||
|
const giveOffset = line.getAttribute('marker-' + side); // const giveOffset = $(line).data(side+'_off');
|
||||||
|
// TODO: Make this number (5) be based on marker width/height
|
||||||
|
|
||||||
|
const size = line.getAttribute('stroke-width') * 5;
|
||||||
|
return giveOffset ? size : 0;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {boolean} on
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function showPanel(on) {
|
||||||
|
let connRules = $('#connector_rules');
|
||||||
|
|
||||||
|
if (!connRules.length) {
|
||||||
|
connRules = $('<style id="connector_rules"></style>').appendTo('head');
|
||||||
|
}
|
||||||
|
|
||||||
|
connRules.text(!on ? '' : '#tool_clone, #tool_topath, #tool_angle, #xy_panel { display: none !important; }');
|
||||||
|
$('#connector_panel').toggle(on);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {Element} elem
|
||||||
|
* @param {Integer|"end"} pos
|
||||||
|
* @param {Float} x
|
||||||
|
* @param {Float} y
|
||||||
|
* @param {boolean} [setMid]
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function setPoint(elem, pos, x, y, setMid) {
|
||||||
|
const pts = elem.points;
|
||||||
|
const pt = svgroot.createSVGPoint();
|
||||||
|
pt.x = x;
|
||||||
|
pt.y = y;
|
||||||
|
|
||||||
|
if (pos === 'end') {
|
||||||
|
pos = pts.numberOfItems - 1;
|
||||||
|
} // TODO: Test for this on init, then use alt only if needed
|
||||||
|
|
||||||
|
|
||||||
|
try {
|
||||||
|
pts.replaceItem(pt, pos);
|
||||||
|
} catch (err) {
|
||||||
|
// Should only occur in FF which formats points attr as "n,n n,n", so just split
|
||||||
|
const ptArr = elem.getAttribute('points').split(' ');
|
||||||
|
|
||||||
|
for (let i = 0; i < ptArr.length; i++) {
|
||||||
|
if (i === pos) {
|
||||||
|
ptArr[i] = x + ',' + y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
elem.setAttribute('points', ptArr.join(' '));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (setMid) {
|
||||||
|
// Add center point
|
||||||
|
const ptStart = pts.getItem(0);
|
||||||
|
const ptEnd = pts.getItem(pts.numberOfItems - 1);
|
||||||
|
setPoint(elem, 1, (ptEnd.x + ptStart.x) / 2, (ptEnd.y + ptStart.y) / 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {Float} diffX
|
||||||
|
* @param {Float} diffY
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function updateLine(diffX, diffY) {
|
||||||
// Update line with element
|
// Update line with element
|
||||||
var i = connections.length;
|
let i = connections.length;
|
||||||
|
|
||||||
while (i--) {
|
while (i--) {
|
||||||
var conn = connections[i];
|
const conn = connections[i];
|
||||||
var line = conn.connector;
|
const line = conn.connector; // const {elem} = conn;
|
||||||
var elem = conn.elem; // const sw = line.getAttribute('stroke-width') * 5;
|
|
||||||
|
|
||||||
var pre = conn.is_start ? 'start' : 'end'; // Update bbox for this element
|
const pre = conn.is_start ? 'start' : 'end'; // const sw = line.getAttribute('stroke-width') * 5;
|
||||||
|
// Update bbox for this element
|
||||||
|
|
||||||
var bb = svgCanvas.getStrokedBBox([elem]);
|
const bb = elData(line, pre + '_bb');
|
||||||
bb.x = conn.start_x;
|
bb.x = conn.start_x + diffX;
|
||||||
bb.y = conn.start_y;
|
bb.y = conn.start_y + diffY;
|
||||||
elData(line, pre + '_bb', bb);
|
elData(line, pre + '_bb', bb);
|
||||||
/* const addOffset = */
|
const altPre = conn.is_start ? 'end' : 'start'; // Get center pt of connected element
|
||||||
|
|
||||||
elData(line, pre + '_off');
|
const bb2 = elData(line, altPre + '_bb');
|
||||||
var altPre = conn.is_start ? 'end' : 'start'; // Get center pt of connected element
|
const srcX = bb2.x + bb2.width / 2;
|
||||||
|
const srcY = bb2.y + bb2.height / 2; // Set point of element being moved
|
||||||
|
|
||||||
var bb2 = elData(line, altPre + '_bb');
|
const pt = getBBintersect(srcX, srcY, bb, getOffset(pre, line)); // $(line).data(pre+'_off')?sw:0
|
||||||
var srcX = bb2.x + bb2.width / 2;
|
|
||||||
var srcY = bb2.y + bb2.height / 2; // Set point of element being moved
|
|
||||||
|
|
||||||
var pt = getBBintersect(srcX, srcY, bb, getOffset(pre, line));
|
|
||||||
setPoint(line, conn.is_start ? 0 : 'end', pt.x, pt.y, true); // Set point of connected element
|
setPoint(line, conn.is_start ? 0 : 'end', pt.x, pt.y, true); // Set point of connected element
|
||||||
|
|
||||||
var pt2 = getBBintersect(pt.x, pt.y, elData(line, altPre + '_bb'), getOffset(altPre, line));
|
const pt2 = getBBintersect(pt.x, pt.y, elData(line, altPre + '_bb'), getOffset(altPre, line));
|
||||||
setPoint(line, conn.is_start ? 'end' : 0, pt2.x, pt2.y, true); // Update points attribute manually for webkit
|
setPoint(line, conn.is_start ? 'end' : 0, pt2.x, pt2.y, true);
|
||||||
|
|
||||||
if (navigator.userAgent.includes('AppleWebKit')) {
|
|
||||||
var pts = line.points;
|
|
||||||
var len = pts.numberOfItems;
|
|
||||||
var ptArr = [];
|
|
||||||
|
|
||||||
for (var j = 0; j < len; j++) {
|
|
||||||
pt = pts.getItem(j);
|
|
||||||
ptArr[j] = pt.x + ',' + pt.y;
|
|
||||||
}
|
|
||||||
|
|
||||||
line.setAttribute('points', ptArr.join(' '));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
/**
|
||||||
};
|
*
|
||||||
|
* @param {Element[]} [elems=selElems] Array of elements
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
findConnectors = function _findConnectors() {
|
|
||||||
var elems = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : selElems;
|
function findConnectors(elems = selElems) {
|
||||||
var connectors = $(svgcontent).find(connSel);
|
const connectors = $(svgcontent).find(connSel);
|
||||||
connections = []; // Loop through connectors to see if one is connected to the element
|
connections = []; // Loop through connectors to see if one is connected to the element
|
||||||
|
|
||||||
connectors.each(function () {
|
connectors.each(function () {
|
||||||
var addThis;
|
let addThis;
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
|
@ -146,10 +215,10 @@ var svgEditorExtension_connector = (function () {
|
||||||
} // Grab the ends
|
} // Grab the ends
|
||||||
|
|
||||||
|
|
||||||
var parts = [];
|
const parts = [];
|
||||||
['start', 'end'].forEach(function (pos, i) {
|
['start', 'end'].forEach(function (pos, i) {
|
||||||
var key = 'c_' + pos;
|
const key = 'c_' + pos;
|
||||||
var part = elData(this, key);
|
let part = elData(this, key);
|
||||||
|
|
||||||
if (part === null || part === undefined) {
|
if (part === null || part === undefined) {
|
||||||
// Does this ever return nullish values?
|
// Does this ever return nullish values?
|
||||||
|
@ -161,8 +230,8 @@ var svgEditorExtension_connector = (function () {
|
||||||
parts.push(part);
|
parts.push(part);
|
||||||
}, this);
|
}, this);
|
||||||
|
|
||||||
for (var i = 0; i < 2; i++) {
|
for (let i = 0; i < 2; i++) {
|
||||||
var cElem = parts[i];
|
const cElem = parts[i];
|
||||||
addThis = false; // The connected element might be part of a selected group
|
addThis = false; // The connected element might be part of a selected group
|
||||||
|
|
||||||
$(cElem).parents().each(add);
|
$(cElem).parents().each(add);
|
||||||
|
@ -173,7 +242,7 @@ var svgEditorExtension_connector = (function () {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (elems.includes(cElem) || addThis) {
|
if (elems.includes(cElem) || addThis) {
|
||||||
var bb = svgCanvas.getStrokedBBox([cElem]);
|
const bb = svgCanvas.getStrokedBBox([cElem]);
|
||||||
connections.push({
|
connections.push({
|
||||||
elem: cElem,
|
elem: cElem,
|
||||||
connector: this,
|
connector: this,
|
||||||
|
@ -184,161 +253,80 @@ var svgEditorExtension_connector = (function () {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
|
||||||
|
|
||||||
updateLine = function _updateLine(diffX, diffY) {
|
|
||||||
// Update line with element
|
|
||||||
var i = connections.length;
|
|
||||||
|
|
||||||
while (i--) {
|
|
||||||
var conn = connections[i];
|
|
||||||
var line = conn.connector; // const {elem} = conn;
|
|
||||||
|
|
||||||
var pre = conn.is_start ? 'start' : 'end'; // const sw = line.getAttribute('stroke-width') * 5;
|
|
||||||
// Update bbox for this element
|
|
||||||
|
|
||||||
var bb = elData(line, pre + '_bb');
|
|
||||||
bb.x = conn.start_x + diffX;
|
|
||||||
bb.y = conn.start_y + diffY;
|
|
||||||
elData(line, pre + '_bb', bb);
|
|
||||||
var altPre = conn.is_start ? 'end' : 'start'; // Get center pt of connected element
|
|
||||||
|
|
||||||
var bb2 = elData(line, altPre + '_bb');
|
|
||||||
var srcX = bb2.x + bb2.width / 2;
|
|
||||||
var srcY = bb2.y + bb2.height / 2; // Set point of element being moved
|
|
||||||
|
|
||||||
var pt = getBBintersect(srcX, srcY, bb, getOffset(pre, line)); // $(line).data(pre+'_off')?sw:0
|
|
||||||
|
|
||||||
setPoint(line, conn.is_start ? 0 : 'end', pt.x, pt.y, true); // Set point of connected element
|
|
||||||
|
|
||||||
var pt2 = getBBintersect(pt.x, pt.y, elData(line, altPre + '_bb'), getOffset(altPre, line));
|
|
||||||
setPoint(line, conn.is_start ? 'end' : 0, pt2.x, pt2.y, true);
|
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
setPoint = function _setPoint(elem, pos, x, y, setMid) {
|
|
||||||
var pts = elem.points;
|
|
||||||
var pt = svgroot.createSVGPoint();
|
|
||||||
pt.x = x;
|
|
||||||
pt.y = y;
|
|
||||||
|
|
||||||
if (pos === 'end') {
|
|
||||||
pos = pts.numberOfItems - 1;
|
|
||||||
} // TODO: Test for this on init, then use alt only if needed
|
|
||||||
|
|
||||||
|
|
||||||
try {
|
|
||||||
pts.replaceItem(pt, pos);
|
|
||||||
} catch (err) {
|
|
||||||
// Should only occur in FF which formats points attr as "n,n n,n", so just split
|
|
||||||
var ptArr = elem.getAttribute('points').split(' ');
|
|
||||||
|
|
||||||
for (var i = 0; i < ptArr.length; i++) {
|
|
||||||
if (i === pos) {
|
|
||||||
ptArr[i] = x + ',' + y;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
elem.setAttribute('points', ptArr.join(' '));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (setMid) {
|
|
||||||
// Add center point
|
|
||||||
var ptStart = pts.getItem(0);
|
|
||||||
var ptEnd = pts.getItem(pts.numberOfItems - 1);
|
|
||||||
setPoint(elem, 1, (ptEnd.x + ptStart.x) / 2, (ptEnd.y + ptStart.y) / 2);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
showPanel = function _showPanel(on) {
|
|
||||||
var connRules = $('#connector_rules');
|
|
||||||
|
|
||||||
if (!connRules.length) {
|
|
||||||
connRules = $('<style id="connector_rules"></style>').appendTo('head');
|
|
||||||
}
|
|
||||||
|
|
||||||
connRules.text(!on ? '' : '#tool_clone, #tool_topath, #tool_angle, #xy_panel { display: none !important; }');
|
|
||||||
$('#connector_panel').toggle(on);
|
|
||||||
};
|
|
||||||
|
|
||||||
getOffset = function _getOffset(side, line) {
|
|
||||||
var giveOffset = line.getAttribute('marker-' + side); // const giveOffset = $(line).data(side+'_off');
|
|
||||||
// TODO: Make this number (5) be based on marker width/height
|
|
||||||
|
|
||||||
var size = line.getAttribute('stroke-width') * 5;
|
|
||||||
return giveOffset ? size : 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
getBBintersect = function _getBBintersect(x, y, bb, offset) {
|
|
||||||
if (offset) {
|
|
||||||
offset -= 0;
|
|
||||||
bb = $.extend({}, bb);
|
|
||||||
bb.width += offset;
|
|
||||||
bb.height += offset;
|
|
||||||
bb.x -= offset / 2;
|
|
||||||
bb.y -= offset / 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
var midX = bb.x + bb.width / 2;
|
|
||||||
var midY = bb.y + bb.height / 2;
|
|
||||||
var lenX = x - midX;
|
|
||||||
var lenY = y - midY;
|
|
||||||
var slope = Math.abs(lenY / lenX);
|
|
||||||
var ratio;
|
|
||||||
|
|
||||||
if (slope < bb.height / bb.width) {
|
|
||||||
ratio = bb.width / 2 / Math.abs(lenX);
|
|
||||||
} else {
|
|
||||||
ratio = lenY ? bb.height / 2 / Math.abs(lenY) : 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
x: midX + lenX * ratio,
|
|
||||||
y: midY + lenY * ratio
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
svgEditor = _this;
|
|
||||||
svgCanvas = svgEditor.canvas;
|
|
||||||
getElem = svgCanvas.getElem;
|
|
||||||
$ = S.$, svgroot = S.svgroot, importLocale = S.importLocale, addElem = svgCanvas.addSVGElementFromJson, selManager = S.selectorManager, connSel = '.se_connector', elData = $.data;
|
|
||||||
_context.next = 14;
|
|
||||||
return importLocale();
|
|
||||||
|
|
||||||
case 14:
|
|
||||||
strings = _context.sent;
|
|
||||||
svgcontent = S.svgcontent, started = false, connections = [], selElems = [];
|
|
||||||
/**
|
/**
|
||||||
*
|
* @param {Element[]} [elems=selElems]
|
||||||
* @param {Float} x
|
* @returns {void}
|
||||||
* @param {Float} y
|
|
||||||
* @param {module:utilities.BBoxObject} bb
|
|
||||||
* @param {Float} offset
|
|
||||||
* @returns {module:math.XYObject}
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Do once
|
|
||||||
(function () {
|
|
||||||
var gse = svgCanvas.groupSelectedElements;
|
|
||||||
|
|
||||||
svgCanvas.groupSelectedElements = function () {
|
function updateConnectors(elems) {
|
||||||
svgCanvas.removeFromSelection($(connSel).toArray());
|
// Updates connector lines based on selected elements
|
||||||
|
// Is not used on mousemove, as it runs getStrokedBBox every time,
|
||||||
|
// which isn't necessary there.
|
||||||
|
findConnectors(elems);
|
||||||
|
|
||||||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
if (connections.length) {
|
||||||
args[_key] = arguments[_key];
|
// Update line with element
|
||||||
|
let i = connections.length;
|
||||||
|
|
||||||
|
while (i--) {
|
||||||
|
const conn = connections[i];
|
||||||
|
const line = conn.connector;
|
||||||
|
const {
|
||||||
|
elem
|
||||||
|
} = conn; // const sw = line.getAttribute('stroke-width') * 5;
|
||||||
|
|
||||||
|
const pre = conn.is_start ? 'start' : 'end'; // Update bbox for this element
|
||||||
|
|
||||||
|
const bb = svgCanvas.getStrokedBBox([elem]);
|
||||||
|
bb.x = conn.start_x;
|
||||||
|
bb.y = conn.start_y;
|
||||||
|
elData(line, pre + '_bb', bb);
|
||||||
|
/* const addOffset = */
|
||||||
|
|
||||||
|
elData(line, pre + '_off');
|
||||||
|
const altPre = conn.is_start ? 'end' : 'start'; // Get center pt of connected element
|
||||||
|
|
||||||
|
const bb2 = elData(line, altPre + '_bb');
|
||||||
|
const srcX = bb2.x + bb2.width / 2;
|
||||||
|
const srcY = bb2.y + bb2.height / 2; // Set point of element being moved
|
||||||
|
|
||||||
|
let pt = getBBintersect(srcX, srcY, bb, getOffset(pre, line));
|
||||||
|
setPoint(line, conn.is_start ? 0 : 'end', pt.x, pt.y, true); // Set point of connected element
|
||||||
|
|
||||||
|
const pt2 = getBBintersect(pt.x, pt.y, elData(line, altPre + '_bb'), getOffset(altPre, line));
|
||||||
|
setPoint(line, conn.is_start ? 'end' : 0, pt2.x, pt2.y, true); // Update points attribute manually for webkit
|
||||||
|
|
||||||
|
if (navigator.userAgent.includes('AppleWebKit')) {
|
||||||
|
const pts = line.points;
|
||||||
|
const len = pts.numberOfItems;
|
||||||
|
const ptArr = [];
|
||||||
|
|
||||||
|
for (let j = 0; j < len; j++) {
|
||||||
|
pt = pts.getItem(j);
|
||||||
|
ptArr[j] = pt.x + ',' + pt.y;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
line.setAttribute('points', ptArr.join(' '));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} // Do once
|
||||||
|
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
const gse = svgCanvas.groupSelectedElements;
|
||||||
|
|
||||||
|
svgCanvas.groupSelectedElements = function (...args) {
|
||||||
|
svgCanvas.removeFromSelection($(connSel).toArray());
|
||||||
return gse.apply(this, args);
|
return gse.apply(this, args);
|
||||||
};
|
};
|
||||||
|
|
||||||
var mse = svgCanvas.moveSelectedElements;
|
const mse = svgCanvas.moveSelectedElements;
|
||||||
|
|
||||||
svgCanvas.moveSelectedElements = function () {
|
svgCanvas.moveSelectedElements = function (...args) {
|
||||||
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
const cmd = mse.apply(this, args);
|
||||||
args[_key2] = arguments[_key2];
|
|
||||||
}
|
|
||||||
|
|
||||||
var cmd = mse.apply(this, args);
|
|
||||||
updateConnectors();
|
updateConnectors();
|
||||||
return cmd;
|
return cmd;
|
||||||
};
|
};
|
||||||
|
@ -351,7 +339,21 @@ var svgEditorExtension_connector = (function () {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// $(svgroot).parent().mousemove(function (e) {
|
function init() {
|
||||||
|
// Make sure all connectors have data set
|
||||||
|
$(svgcontent).find('*').each(function () {
|
||||||
|
const conn = this.getAttributeNS(seNs, 'connector');
|
||||||
|
|
||||||
|
if (conn) {
|
||||||
|
this.setAttribute('class', connSel.substr(1));
|
||||||
|
const connData = conn.split(' ');
|
||||||
|
const sbb = svgCanvas.getStrokedBBox([getElem(connData[0])]);
|
||||||
|
const ebb = svgCanvas.getStrokedBBox([getElem(connData[1])]);
|
||||||
|
$(this).data('c_start', connData[0]).data('c_end', connData[1]).data('start_bb', sbb).data('end_bb', ebb);
|
||||||
|
svgCanvas.getEditorNS(true);
|
||||||
|
}
|
||||||
|
}); // updateConnectors();
|
||||||
|
} // $(svgroot).parent().mousemove(function (e) {
|
||||||
// // if (started
|
// // if (started
|
||||||
// // || svgCanvas.getMode() !== 'connector'
|
// // || svgCanvas.getMode() !== 'connector'
|
||||||
// // || e.target.parentNode.parentNode !== svgcontent) return;
|
// // || e.target.parentNode.parentNode !== svgcontent) return;
|
||||||
|
@ -361,7 +363,9 @@ var svgEditorExtension_connector = (function () {
|
||||||
// //
|
// //
|
||||||
// // }
|
// // }
|
||||||
// });
|
// });
|
||||||
buttons = [{
|
|
||||||
|
|
||||||
|
const buttons = [{
|
||||||
id: 'mode_connect',
|
id: 'mode_connect',
|
||||||
type: 'mode',
|
type: 'mode',
|
||||||
icon: svgEditor.curConfig.imgPath + 'cut.png',
|
icon: svgEditor.curConfig.imgPath + 'cut.png',
|
||||||
|
@ -371,50 +375,57 @@ var svgEditorExtension_connector = (function () {
|
||||||
position: 1
|
position: 1
|
||||||
},
|
},
|
||||||
events: {
|
events: {
|
||||||
click: function click() {
|
click() {
|
||||||
svgCanvas.setMode('connector');
|
svgCanvas.setMode('connector');
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
return _context.abrupt("return", {
|
return {
|
||||||
name: strings.name,
|
name: strings.name,
|
||||||
svgicons: svgEditor.curConfig.imgPath + 'conn.svg',
|
svgicons: svgEditor.curConfig.imgPath + 'conn.svg',
|
||||||
buttons: strings.buttons.map(function (button, i) {
|
buttons: strings.buttons.map((button, i) => {
|
||||||
return Object.assign(buttons[i], button);
|
return Object.assign(buttons[i], button);
|
||||||
}),
|
}),
|
||||||
|
|
||||||
/* async */
|
/* async */
|
||||||
addLangData: function addLangData(_ref) {
|
addLangData({
|
||||||
var lang = _ref.lang;
|
lang
|
||||||
|
}) {
|
||||||
// , importLocale: importLoc
|
// , importLocale: importLoc
|
||||||
return {
|
return {
|
||||||
data: strings.langList
|
data: strings.langList
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mouseDown: function mouseDown(opts) {
|
|
||||||
var e = opts.event;
|
mouseDown(opts) {
|
||||||
|
const e = opts.event;
|
||||||
startX = opts.start_x;
|
startX = opts.start_x;
|
||||||
startY = opts.start_y;
|
startY = opts.start_y;
|
||||||
var mode = svgCanvas.getMode();
|
const mode = svgCanvas.getMode();
|
||||||
var initStroke = svgEditor.curConfig.initStroke;
|
const {
|
||||||
|
curConfig: {
|
||||||
|
initStroke
|
||||||
|
}
|
||||||
|
} = svgEditor;
|
||||||
|
|
||||||
if (mode === 'connector') {
|
if (mode === 'connector') {
|
||||||
if (started) {
|
if (started) {
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
var mouseTarget = e.target;
|
const mouseTarget = e.target;
|
||||||
var parents = $(mouseTarget).parents();
|
const parents = $(mouseTarget).parents();
|
||||||
|
|
||||||
if ($.inArray(svgcontent, parents) !== -1) {
|
if ($.inArray(svgcontent, parents) !== -1) {
|
||||||
// Connectable element
|
// Connectable element
|
||||||
// If child of foreignObject, use parent
|
// If child of foreignObject, use parent
|
||||||
var fo = $(mouseTarget).closest('foreignObject');
|
const fo = $(mouseTarget).closest('foreignObject');
|
||||||
startElem = fo.length ? fo[0] : mouseTarget; // Get center of source element
|
startElem = fo.length ? fo[0] : mouseTarget; // Get center of source element
|
||||||
|
|
||||||
var bb = svgCanvas.getStrokedBBox([startElem]);
|
const bb = svgCanvas.getStrokedBBox([startElem]);
|
||||||
var x = bb.x + bb.width / 2;
|
const x = bb.x + bb.width / 2;
|
||||||
var y = bb.y + bb.height / 2;
|
const y = bb.y + bb.height / 2;
|
||||||
started = true;
|
started = true;
|
||||||
curLine = addElem({
|
curLine = addElem({
|
||||||
element: 'polyline',
|
element: 'polyline',
|
||||||
|
@ -442,29 +453,30 @@ var svgEditorExtension_connector = (function () {
|
||||||
|
|
||||||
return undefined;
|
return undefined;
|
||||||
},
|
},
|
||||||
mouseMove: function mouseMove(opts) {
|
|
||||||
var zoom = svgCanvas.getZoom(); // const e = opts.event;
|
|
||||||
|
|
||||||
var x = opts.mouse_x / zoom;
|
mouseMove(opts) {
|
||||||
var y = opts.mouse_y / zoom;
|
const zoom = svgCanvas.getZoom(); // const e = opts.event;
|
||||||
var diffX = x - startX,
|
|
||||||
|
const x = opts.mouse_x / zoom;
|
||||||
|
const y = opts.mouse_y / zoom;
|
||||||
|
const diffX = x - startX,
|
||||||
diffY = y - startY;
|
diffY = y - startY;
|
||||||
var mode = svgCanvas.getMode();
|
const mode = svgCanvas.getMode();
|
||||||
|
|
||||||
if (mode === 'connector' && started) {
|
if (mode === 'connector' && started) {
|
||||||
// const sw = curLine.getAttribute('stroke-width') * 3;
|
// const sw = curLine.getAttribute('stroke-width') * 3;
|
||||||
// Set start point (adjusts based on bb)
|
// Set start point (adjusts based on bb)
|
||||||
var pt = getBBintersect(x, y, elData(curLine, 'start_bb'), getOffset('start', curLine));
|
const pt = getBBintersect(x, y, elData(curLine, 'start_bb'), getOffset('start', curLine));
|
||||||
startX = pt.x;
|
startX = pt.x;
|
||||||
startY = pt.y;
|
startY = pt.y;
|
||||||
setPoint(curLine, 0, pt.x, pt.y, true); // Set end point
|
setPoint(curLine, 0, pt.x, pt.y, true); // Set end point
|
||||||
|
|
||||||
setPoint(curLine, 'end', x, y, true);
|
setPoint(curLine, 'end', x, y, true);
|
||||||
} else if (mode === 'select') {
|
} else if (mode === 'select') {
|
||||||
var slen = selElems.length;
|
let slen = selElems.length;
|
||||||
|
|
||||||
while (slen--) {
|
while (slen--) {
|
||||||
var elem = selElems[slen]; // Look for selected connector elements
|
const elem = selElems[slen]; // Look for selected connector elements
|
||||||
|
|
||||||
if (elem && elData(elem, 'c_start')) {
|
if (elem && elData(elem, 'c_start')) {
|
||||||
// Remove the "translate" transform given to move
|
// Remove the "translate" transform given to move
|
||||||
|
@ -478,24 +490,25 @@ var svgEditorExtension_connector = (function () {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mouseUp: function mouseUp(opts) {
|
|
||||||
|
mouseUp(opts) {
|
||||||
// const zoom = svgCanvas.getZoom();
|
// const zoom = svgCanvas.getZoom();
|
||||||
var e = opts.event; // , x = opts.mouse_x / zoom,
|
const e = opts.event; // , x = opts.mouse_x / zoom,
|
||||||
// , y = opts.mouse_y / zoom,
|
// , y = opts.mouse_y / zoom,
|
||||||
|
|
||||||
var mouseTarget = e.target;
|
let mouseTarget = e.target;
|
||||||
|
|
||||||
if (svgCanvas.getMode() !== 'connector') {
|
if (svgCanvas.getMode() !== 'connector') {
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
var fo = $(mouseTarget).closest('foreignObject');
|
const fo = $(mouseTarget).closest('foreignObject');
|
||||||
|
|
||||||
if (fo.length) {
|
if (fo.length) {
|
||||||
mouseTarget = fo[0];
|
mouseTarget = fo[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
var parents = $(mouseTarget).parents();
|
const parents = $(mouseTarget).parents();
|
||||||
|
|
||||||
if (mouseTarget === startElem) {
|
if (mouseTarget === startElem) {
|
||||||
// Start line through click
|
// Start line through click
|
||||||
|
@ -503,7 +516,7 @@ var svgEditorExtension_connector = (function () {
|
||||||
return {
|
return {
|
||||||
keep: true,
|
keep: true,
|
||||||
element: null,
|
element: null,
|
||||||
started: started
|
started
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -514,19 +527,19 @@ var svgEditorExtension_connector = (function () {
|
||||||
return {
|
return {
|
||||||
keep: false,
|
keep: false,
|
||||||
element: null,
|
element: null,
|
||||||
started: started
|
started
|
||||||
};
|
};
|
||||||
} // Valid end element
|
} // Valid end element
|
||||||
|
|
||||||
|
|
||||||
endElem = mouseTarget;
|
endElem = mouseTarget;
|
||||||
var startId = startElem.id,
|
const startId = startElem.id,
|
||||||
endId = endElem.id;
|
endId = endElem.id;
|
||||||
var connStr = startId + ' ' + endId;
|
const connStr = startId + ' ' + endId;
|
||||||
var altStr = endId + ' ' + startId; // Don't create connector if one already exists
|
const altStr = endId + ' ' + startId; // Don't create connector if one already exists
|
||||||
|
|
||||||
var dupe = $(svgcontent).find(connSel).filter(function () {
|
const dupe = $(svgcontent).find(connSel).filter(function () {
|
||||||
var conn = this.getAttributeNS(seNs, 'connector');
|
const conn = this.getAttributeNS(seNs, 'connector');
|
||||||
|
|
||||||
if (conn === connStr || conn === altStr) {
|
if (conn === connStr || conn === altStr) {
|
||||||
return true;
|
return true;
|
||||||
|
@ -544,8 +557,8 @@ var svgEditorExtension_connector = (function () {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
var bb = svgCanvas.getStrokedBBox([endElem]);
|
const bb = svgCanvas.getStrokedBBox([endElem]);
|
||||||
var pt = getBBintersect(startX, startY, bb, getOffset('start', curLine));
|
const pt = getBBintersect(startX, startY, bb, getOffset('start', curLine));
|
||||||
setPoint(curLine, 'end', pt.x, pt.y, true);
|
setPoint(curLine, 'end', pt.x, pt.y, true);
|
||||||
$(curLine).data('c_start', startId).data('c_end', endId).data('end_bb', bb);
|
$(curLine).data('c_start', startId).data('c_end', endId).data('end_bb', bb);
|
||||||
seNs = svgCanvas.getEditorNS(true);
|
seNs = svgCanvas.getEditorNS(true);
|
||||||
|
@ -559,10 +572,11 @@ var svgEditorExtension_connector = (function () {
|
||||||
return {
|
return {
|
||||||
keep: true,
|
keep: true,
|
||||||
element: curLine,
|
element: curLine,
|
||||||
started: started
|
started
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
selectedChanged: function selectedChanged(opts) {
|
|
||||||
|
selectedChanged(opts) {
|
||||||
// TODO: Find better way to skip operations if no connectors are in use
|
// TODO: Find better way to skip operations if no connectors are in use
|
||||||
if (!$(svgcontent).find(connSel).length) {
|
if (!$(svgcontent).find(connSel).length) {
|
||||||
return;
|
return;
|
||||||
|
@ -574,10 +588,10 @@ var svgEditorExtension_connector = (function () {
|
||||||
|
|
||||||
|
|
||||||
selElems = opts.elems;
|
selElems = opts.elems;
|
||||||
var i = selElems.length;
|
let i = selElems.length;
|
||||||
|
|
||||||
while (i--) {
|
while (i--) {
|
||||||
var elem = selElems[i];
|
const elem = selElems[i];
|
||||||
|
|
||||||
if (elem && elData(elem, 'c_start')) {
|
if (elem && elData(elem, 'c_start')) {
|
||||||
selManager.requestSelector(elem).showGrips(false);
|
selManager.requestSelector(elem).showGrips(false);
|
||||||
|
@ -595,8 +609,9 @@ var svgEditorExtension_connector = (function () {
|
||||||
|
|
||||||
updateConnectors();
|
updateConnectors();
|
||||||
},
|
},
|
||||||
elementChanged: function elementChanged(opts) {
|
|
||||||
var elem = opts.elems[0];
|
elementChanged(opts) {
|
||||||
|
let elem = opts.elems[0];
|
||||||
if (!elem) return;
|
if (!elem) return;
|
||||||
|
|
||||||
if (elem.tagName === 'svg' && elem.id === 'svgcontent') {
|
if (elem.tagName === 'svg' && elem.id === 'svgcontent') {
|
||||||
|
@ -607,22 +622,23 @@ var svgEditorExtension_connector = (function () {
|
||||||
|
|
||||||
|
|
||||||
if (elem.getAttribute('marker-start') || elem.getAttribute('marker-mid') || elem.getAttribute('marker-end')) {
|
if (elem.getAttribute('marker-start') || elem.getAttribute('marker-mid') || elem.getAttribute('marker-end')) {
|
||||||
var start = elem.getAttribute('marker-start');
|
const start = elem.getAttribute('marker-start');
|
||||||
var mid = elem.getAttribute('marker-mid');
|
const mid = elem.getAttribute('marker-mid');
|
||||||
var end = elem.getAttribute('marker-end');
|
const end = elem.getAttribute('marker-end');
|
||||||
curLine = elem;
|
curLine = elem;
|
||||||
$(elem).data('start_off', Boolean(start)).data('end_off', Boolean(end));
|
$(elem).data('start_off', Boolean(start)).data('end_off', Boolean(end));
|
||||||
|
|
||||||
if (elem.tagName === 'line' && mid) {
|
if (elem.tagName === 'line' && mid) {
|
||||||
// Convert to polyline to accept mid-arrow
|
// Convert to polyline to accept mid-arrow
|
||||||
var x1 = Number(elem.getAttribute('x1'));
|
const x1 = Number(elem.getAttribute('x1'));
|
||||||
var x2 = Number(elem.getAttribute('x2'));
|
const x2 = Number(elem.getAttribute('x2'));
|
||||||
var y1 = Number(elem.getAttribute('y1'));
|
const y1 = Number(elem.getAttribute('y1'));
|
||||||
var y2 = Number(elem.getAttribute('y2'));
|
const y2 = Number(elem.getAttribute('y2'));
|
||||||
var _elem = elem,
|
const {
|
||||||
id = _elem.id;
|
id
|
||||||
var midPt = ' ' + (x1 + x2) / 2 + ',' + (y1 + y2) / 2 + ' ';
|
} = elem;
|
||||||
var pline = addElem({
|
const midPt = ' ' + (x1 + x2) / 2 + ',' + (y1 + y2) / 2 + ' ';
|
||||||
|
const pline = addElem({
|
||||||
element: 'polyline',
|
element: 'polyline',
|
||||||
attr: {
|
attr: {
|
||||||
points: x1 + ',' + y1 + midPt + x2 + ',' + y2,
|
points: x1 + ',' + y1 + midPt + x2 + ',' + y2,
|
||||||
|
@ -643,15 +659,15 @@ var svgEditorExtension_connector = (function () {
|
||||||
|
|
||||||
|
|
||||||
if (elem.getAttribute('class') === connSel.substr(1)) {
|
if (elem.getAttribute('class') === connSel.substr(1)) {
|
||||||
var _start = getElem(elData(elem, 'c_start'));
|
const start = getElem(elData(elem, 'c_start'));
|
||||||
|
updateConnectors([start]);
|
||||||
updateConnectors([_start]);
|
|
||||||
} else {
|
} else {
|
||||||
updateConnectors();
|
updateConnectors();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
IDsUpdated: function IDsUpdated(input) {
|
|
||||||
var remove = [];
|
IDsUpdated(input) {
|
||||||
|
const remove = [];
|
||||||
input.elems.forEach(function (elem) {
|
input.elems.forEach(function (elem) {
|
||||||
if ('se:connector' in elem.attr) {
|
if ('se:connector' in elem.attr) {
|
||||||
elem.attr['se:connector'] = elem.attr['se:connector'].split(' ').map(function (oldID) {
|
elem.attr['se:connector'] = elem.attr['se:connector'].split(' ').map(function (oldID) {
|
||||||
|
@ -665,10 +681,11 @@ var svgEditorExtension_connector = (function () {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return {
|
return {
|
||||||
remove: remove
|
remove
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
toolButtonStateUpdate: function toolButtonStateUpdate(opts) {
|
|
||||||
|
toolButtonStateUpdate(opts) {
|
||||||
if (opts.nostroke) {
|
if (opts.nostroke) {
|
||||||
if ($('#mode_connect').hasClass('tool_button_current')) {
|
if ($('#mode_connect').hasClass('tool_button_current')) {
|
||||||
svgEditor.clickSelect();
|
svgEditor.clickSelect();
|
||||||
|
@ -677,16 +694,10 @@ var svgEditorExtension_connector = (function () {
|
||||||
|
|
||||||
$('#mode_connect').toggleClass('disabled', opts.nostroke);
|
$('#mode_connect').toggleClass('disabled', opts.nostroke);
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
case 19:
|
};
|
||||||
case "end":
|
|
||||||
return _context.stop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, _callee);
|
|
||||||
}))();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extConnector;
|
return extConnector;
|
||||||
|
|
|
@ -1,42 +1,6 @@
|
||||||
var svgEditorExtension_eyedropper = (function () {
|
var svgEditorExtension_eyedropper = (function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
||||||
try {
|
|
||||||
var info = gen[key](arg);
|
|
||||||
var value = info.value;
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (info.done) {
|
|
||||||
resolve(value);
|
|
||||||
} else {
|
|
||||||
Promise.resolve(value).then(_next, _throw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _asyncToGenerator(fn) {
|
|
||||||
return function () {
|
|
||||||
var self = this,
|
|
||||||
args = arguments;
|
|
||||||
return new Promise(function (resolve, reject) {
|
|
||||||
var gen = fn.apply(self, args);
|
|
||||||
|
|
||||||
function _next(value) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _throw(err) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
||||||
}
|
|
||||||
|
|
||||||
_next(undefined);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @file ext-eyedropper.js
|
* @file ext-eyedropper.js
|
||||||
*
|
*
|
||||||
|
@ -47,26 +11,50 @@ var svgEditorExtension_eyedropper = (function () {
|
||||||
*/
|
*/
|
||||||
var extEyedropper = {
|
var extEyedropper = {
|
||||||
name: 'eyedropper',
|
name: 'eyedropper',
|
||||||
init: function init(S) {
|
|
||||||
var _this = this;
|
|
||||||
|
|
||||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
async init(S) {
|
||||||
var strings, svgEditor, $, ChangeElementCommand, svgCanvas, addToHistory, currentStyle, getStyle, buttons;
|
const strings = await S.importLocale();
|
||||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
const svgEditor = this;
|
||||||
while (1) {
|
|
||||||
switch (_context.prev = _context.next) {
|
const {
|
||||||
case 0:
|
$,
|
||||||
getStyle = function _getStyle(opts) {
|
ChangeElementCommand
|
||||||
|
} = S,
|
||||||
|
// , svgcontent,
|
||||||
|
// svgdoc = S.svgroot.parentNode.ownerDocument,
|
||||||
|
svgCanvas = svgEditor.canvas,
|
||||||
|
addToHistory = function (cmd) {
|
||||||
|
svgCanvas.undoMgr.addCommandToHistory(cmd);
|
||||||
|
},
|
||||||
|
currentStyle = {
|
||||||
|
fillPaint: 'red',
|
||||||
|
fillOpacity: 1.0,
|
||||||
|
strokePaint: 'black',
|
||||||
|
strokeOpacity: 1.0,
|
||||||
|
strokeWidth: 5,
|
||||||
|
strokeDashArray: null,
|
||||||
|
opacity: 1.0,
|
||||||
|
strokeLinecap: 'butt',
|
||||||
|
strokeLinejoin: 'miter'
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {module:svgcanvas.SvgCanvas#event:ext_selectedChanged|module:svgcanvas.SvgCanvas#event:ext_elementChanged} opts
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function getStyle(opts) {
|
||||||
// if we are in eyedropper mode, we don't want to disable the eye-dropper tool
|
// if we are in eyedropper mode, we don't want to disable the eye-dropper tool
|
||||||
var mode = svgCanvas.getMode();
|
const mode = svgCanvas.getMode();
|
||||||
|
|
||||||
if (mode === 'eyedropper') {
|
if (mode === 'eyedropper') {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var tool = $('#tool_eyedropper'); // enable-eye-dropper if one element is selected
|
const tool = $('#tool_eyedropper'); // enable-eye-dropper if one element is selected
|
||||||
|
|
||||||
var elem = null;
|
let elem = null;
|
||||||
|
|
||||||
if (!opts.multiselected && opts.elems[0] && !['svg', 'g', 'use'].includes(opts.elems[0].nodeName)) {
|
if (!opts.multiselected && opts.elems[0] && !['svg', 'g', 'use'].includes(opts.elems[0].nodeName)) {
|
||||||
elem = opts.elems[0];
|
elem = opts.elems[0];
|
||||||
|
@ -84,63 +72,42 @@ var svgEditorExtension_eyedropper = (function () {
|
||||||
} else {
|
} else {
|
||||||
tool.addClass('disabled');
|
tool.addClass('disabled');
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
_context.next = 3;
|
const buttons = [{
|
||||||
return S.importLocale();
|
|
||||||
|
|
||||||
case 3:
|
|
||||||
strings = _context.sent;
|
|
||||||
svgEditor = _this;
|
|
||||||
$ = S.$, ChangeElementCommand = S.ChangeElementCommand, svgCanvas = svgEditor.canvas, addToHistory = function addToHistory(cmd) {
|
|
||||||
svgCanvas.undoMgr.addCommandToHistory(cmd);
|
|
||||||
}, currentStyle = {
|
|
||||||
fillPaint: 'red',
|
|
||||||
fillOpacity: 1.0,
|
|
||||||
strokePaint: 'black',
|
|
||||||
strokeOpacity: 1.0,
|
|
||||||
strokeWidth: 5,
|
|
||||||
strokeDashArray: null,
|
|
||||||
opacity: 1.0,
|
|
||||||
strokeLinecap: 'butt',
|
|
||||||
strokeLinejoin: 'miter'
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @param {module:svgcanvas.SvgCanvas#event:ext_selectedChanged|module:svgcanvas.SvgCanvas#event:ext_elementChanged} opts
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
|
|
||||||
buttons = [{
|
|
||||||
id: 'tool_eyedropper',
|
id: 'tool_eyedropper',
|
||||||
icon: svgEditor.curConfig.extIconsPath + 'eyedropper.png',
|
icon: svgEditor.curConfig.extIconsPath + 'eyedropper.png',
|
||||||
type: 'mode',
|
type: 'mode',
|
||||||
events: {
|
events: {
|
||||||
click: function click() {
|
click() {
|
||||||
svgCanvas.setMode('eyedropper');
|
svgCanvas.setMode('eyedropper');
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
return _context.abrupt("return", {
|
return {
|
||||||
name: strings.name,
|
name: strings.name,
|
||||||
svgicons: svgEditor.curConfig.extIconsPath + 'eyedropper-icon.xml',
|
svgicons: svgEditor.curConfig.extIconsPath + 'eyedropper-icon.xml',
|
||||||
buttons: strings.buttons.map(function (button, i) {
|
buttons: strings.buttons.map((button, i) => {
|
||||||
return Object.assign(buttons[i], button);
|
return Object.assign(buttons[i], button);
|
||||||
}),
|
}),
|
||||||
// if we have selected an element, grab its paint and enable the eye dropper button
|
// if we have selected an element, grab its paint and enable the eye dropper button
|
||||||
selectedChanged: getStyle,
|
selectedChanged: getStyle,
|
||||||
elementChanged: getStyle,
|
elementChanged: getStyle,
|
||||||
mouseDown: function mouseDown(opts) {
|
|
||||||
var mode = svgCanvas.getMode();
|
mouseDown(opts) {
|
||||||
|
const mode = svgCanvas.getMode();
|
||||||
|
|
||||||
if (mode === 'eyedropper') {
|
if (mode === 'eyedropper') {
|
||||||
var e = opts.event;
|
const e = opts.event;
|
||||||
var target = e.target;
|
const {
|
||||||
|
target
|
||||||
|
} = e;
|
||||||
|
|
||||||
if (!['svg', 'g', 'use'].includes(target.nodeName)) {
|
if (!['svg', 'g', 'use'].includes(target.nodeName)) {
|
||||||
var changes = {};
|
const changes = {};
|
||||||
|
|
||||||
var change = function change(elem, attrname, newvalue) {
|
const change = function (elem, attrname, newvalue) {
|
||||||
changes[attrname] = elem.getAttribute(attrname);
|
changes[attrname] = elem.getAttribute(attrname);
|
||||||
elem.setAttribute(attrname, newvalue);
|
elem.setAttribute(attrname, newvalue);
|
||||||
};
|
};
|
||||||
|
@ -185,16 +152,10 @@ var svgEditorExtension_eyedropper = (function () {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
case 8:
|
};
|
||||||
case "end":
|
|
||||||
return _context.stop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, _callee);
|
|
||||||
}))();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extEyedropper;
|
return extEyedropper;
|
||||||
|
|
|
@ -1,42 +1,6 @@
|
||||||
var svgEditorExtension_foreignobject = (function () {
|
var svgEditorExtension_foreignobject = (function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
||||||
try {
|
|
||||||
var info = gen[key](arg);
|
|
||||||
var value = info.value;
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (info.done) {
|
|
||||||
resolve(value);
|
|
||||||
} else {
|
|
||||||
Promise.resolve(value).then(_next, _throw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _asyncToGenerator(fn) {
|
|
||||||
return function () {
|
|
||||||
var self = this,
|
|
||||||
args = arguments;
|
|
||||||
return new Promise(function (resolve, reject) {
|
|
||||||
var gen = fn.apply(self, args);
|
|
||||||
|
|
||||||
function _next(value) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _throw(err) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
||||||
}
|
|
||||||
|
|
||||||
_next(undefined);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @file ext-foreignobject.js
|
* @file ext-foreignobject.js
|
||||||
*
|
*
|
||||||
|
@ -47,43 +11,69 @@ var svgEditorExtension_foreignobject = (function () {
|
||||||
*/
|
*/
|
||||||
var extForeignobject = {
|
var extForeignobject = {
|
||||||
name: 'foreignobject',
|
name: 'foreignobject',
|
||||||
init: function init(S) {
|
|
||||||
var _this = this;
|
|
||||||
|
|
||||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
|
async init(S) {
|
||||||
var svgEditor, $, text2xml, NS, importLocale, svgCanvas, svgdoc, strings, properlySourceSizeTextArea, showPanel, toggleSourceButtons, selElems, started, newFO, editingforeign, setForeignString, showForeignEditor, setAttr, buttons, contextTools;
|
const svgEditor = this;
|
||||||
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
const {
|
||||||
while (1) {
|
$,
|
||||||
switch (_context2.prev = _context2.next) {
|
text2xml,
|
||||||
case 0:
|
NS,
|
||||||
setAttr = function _setAttr(attr, val) {
|
importLocale
|
||||||
svgCanvas.changeSelectedAttribute(attr, val);
|
} = S;
|
||||||
svgCanvas.call('changed', selElems);
|
const svgCanvas = svgEditor.canvas;
|
||||||
|
const // {svgcontent} = S,
|
||||||
|
// addElem = svgCanvas.addSVGElementFromJson,
|
||||||
|
svgdoc = S.svgroot.parentNode.ownerDocument;
|
||||||
|
const strings = await importLocale();
|
||||||
|
|
||||||
|
const properlySourceSizeTextArea = function () {
|
||||||
|
// TODO: remove magic numbers here and get values from CSS
|
||||||
|
const height = $('#svg_source_container').height() - 80;
|
||||||
|
$('#svg_source_textarea').css('height', height);
|
||||||
};
|
};
|
||||||
|
/**
|
||||||
|
* @param {boolean} on
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
showForeignEditor = function _showForeignEditor() {
|
|
||||||
var elt = selElems[0];
|
|
||||||
|
|
||||||
if (!elt || editingforeign) {
|
function showPanel(on) {
|
||||||
return;
|
let fcRules = $('#fc_rules');
|
||||||
|
|
||||||
|
if (!fcRules.length) {
|
||||||
|
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
||||||
}
|
}
|
||||||
|
|
||||||
editingforeign = true;
|
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
||||||
toggleSourceButtons(true);
|
$('#foreignObject_panel').toggle(on);
|
||||||
elt.removeAttribute('fill');
|
}
|
||||||
var str = svgCanvas.svgToString(elt, 0);
|
/**
|
||||||
$('#svg_source_textarea').val(str);
|
* @param {boolean} on
|
||||||
$('#svg_source_editor').fadeIn();
|
* @returns {void}
|
||||||
properlySourceSizeTextArea();
|
*/
|
||||||
$('#svg_source_textarea').focus();
|
|
||||||
};
|
|
||||||
|
|
||||||
setForeignString = function _setForeignString(xmlString) {
|
|
||||||
var elt = selElems[0]; // The parent `Element` to append to
|
function toggleSourceButtons(on) {
|
||||||
|
$('#tool_source_save, #tool_source_cancel').toggle(!on);
|
||||||
|
$('#foreign_save, #foreign_cancel').toggle(on);
|
||||||
|
}
|
||||||
|
|
||||||
|
let selElems,
|
||||||
|
started,
|
||||||
|
newFO,
|
||||||
|
editingforeign = false;
|
||||||
|
/**
|
||||||
|
* This function sets the content of element elt to the input XML.
|
||||||
|
* @param {string} xmlString - The XML text
|
||||||
|
* @returns {boolean} This function returns false if the set was unsuccessful, true otherwise.
|
||||||
|
*/
|
||||||
|
|
||||||
|
function setForeignString(xmlString) {
|
||||||
|
const elt = selElems[0]; // The parent `Element` to append to
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// convert string into XML document
|
// convert string into XML document
|
||||||
var newDoc = text2xml('<svg xmlns="' + NS.SVG + '" xmlns:xlink="' + NS.XLINK + '">' + xmlString + '</svg>'); // run it through our sanitizer to remove anything we do not support
|
const newDoc = text2xml('<svg xmlns="' + NS.SVG + '" xmlns:xlink="' + NS.XLINK + '">' + xmlString + '</svg>'); // run it through our sanitizer to remove anything we do not support
|
||||||
|
|
||||||
svgCanvas.sanitizeSvg(newDoc.documentElement);
|
svgCanvas.sanitizeSvg(newDoc.documentElement);
|
||||||
elt.replaceWith(svgdoc.importNode(newDoc.documentElement.firstChild, true));
|
elt.replaceWith(svgdoc.importNode(newDoc.documentElement.firstChild, true));
|
||||||
|
@ -97,60 +87,50 @@ var svgEditorExtension_foreignobject = (function () {
|
||||||
}
|
}
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
};
|
|
||||||
|
|
||||||
toggleSourceButtons = function _toggleSourceButtons(on) {
|
|
||||||
$('#tool_source_save, #tool_source_cancel').toggle(!on);
|
|
||||||
$('#foreign_save, #foreign_cancel').toggle(on);
|
|
||||||
};
|
|
||||||
|
|
||||||
showPanel = function _showPanel(on) {
|
|
||||||
var fcRules = $('#fc_rules');
|
|
||||||
|
|
||||||
if (!fcRules.length) {
|
|
||||||
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
|
||||||
$('#foreignObject_panel').toggle(on);
|
|
||||||
};
|
|
||||||
|
|
||||||
svgEditor = _this;
|
|
||||||
$ = S.$, text2xml = S.text2xml, NS = S.NS, importLocale = S.importLocale;
|
|
||||||
svgCanvas = svgEditor.canvas;
|
|
||||||
svgdoc = S.svgroot.parentNode.ownerDocument;
|
|
||||||
_context2.next = 11;
|
|
||||||
return importLocale();
|
|
||||||
|
|
||||||
case 11:
|
|
||||||
strings = _context2.sent;
|
|
||||||
|
|
||||||
properlySourceSizeTextArea = function properlySourceSizeTextArea() {
|
|
||||||
// TODO: remove magic numbers here and get values from CSS
|
|
||||||
var height = $('#svg_source_container').height() - 80;
|
|
||||||
$('#svg_source_textarea').css('height', height);
|
|
||||||
};
|
|
||||||
/**
|
/**
|
||||||
* @param {boolean} on
|
*
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
editingforeign = false;
|
function showForeignEditor() {
|
||||||
|
const elt = selElems[0];
|
||||||
|
|
||||||
|
if (!elt || editingforeign) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
editingforeign = true;
|
||||||
|
toggleSourceButtons(true);
|
||||||
|
elt.removeAttribute('fill');
|
||||||
|
const str = svgCanvas.svgToString(elt, 0);
|
||||||
|
$('#svg_source_textarea').val(str);
|
||||||
|
$('#svg_source_editor').fadeIn();
|
||||||
|
properlySourceSizeTextArea();
|
||||||
|
$('#svg_source_textarea').focus();
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* This function sets the content of element elt to the input XML.
|
* @param {string} attr
|
||||||
* @param {string} xmlString - The XML text
|
* @param {string|Float} val
|
||||||
* @returns {boolean} This function returns false if the set was unsuccessful, true otherwise.
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
buttons = [{
|
|
||||||
|
function setAttr(attr, val) {
|
||||||
|
svgCanvas.changeSelectedAttribute(attr, val);
|
||||||
|
svgCanvas.call('changed', selElems);
|
||||||
|
}
|
||||||
|
|
||||||
|
const buttons = [{
|
||||||
id: 'tool_foreign',
|
id: 'tool_foreign',
|
||||||
icon: svgEditor.curConfig.extIconsPath + 'foreignobject-tool.png',
|
icon: svgEditor.curConfig.extIconsPath + 'foreignobject-tool.png',
|
||||||
type: 'mode',
|
type: 'mode',
|
||||||
events: {
|
events: {
|
||||||
click: function click() {
|
click() {
|
||||||
svgCanvas.setMode('foreign');
|
svgCanvas.setMode('foreign');
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
id: 'edit_foreign',
|
id: 'edit_foreign',
|
||||||
|
@ -158,29 +138,32 @@ var svgEditorExtension_foreignobject = (function () {
|
||||||
type: 'context',
|
type: 'context',
|
||||||
panel: 'foreignObject_panel',
|
panel: 'foreignObject_panel',
|
||||||
events: {
|
events: {
|
||||||
click: function click() {
|
click() {
|
||||||
showForeignEditor();
|
showForeignEditor();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
contextTools = [{
|
const contextTools = [{
|
||||||
type: 'input',
|
type: 'input',
|
||||||
panel: 'foreignObject_panel',
|
panel: 'foreignObject_panel',
|
||||||
id: 'foreign_width',
|
id: 'foreign_width',
|
||||||
size: 3,
|
size: 3,
|
||||||
events: {
|
events: {
|
||||||
change: function change() {
|
change() {
|
||||||
setAttr('width', this.value);
|
setAttr('width', this.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
type: 'input',
|
type: 'input',
|
||||||
panel: 'foreignObject_panel',
|
panel: 'foreignObject_panel',
|
||||||
id: 'foreign_height',
|
id: 'foreign_height',
|
||||||
events: {
|
events: {
|
||||||
change: function change() {
|
change() {
|
||||||
setAttr('height', this.value);
|
setAttr('height', this.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
type: 'input',
|
type: 'input',
|
||||||
|
@ -189,24 +172,26 @@ var svgEditorExtension_foreignobject = (function () {
|
||||||
size: 2,
|
size: 2,
|
||||||
defval: 16,
|
defval: 16,
|
||||||
events: {
|
events: {
|
||||||
change: function change() {
|
change() {
|
||||||
setAttr('font-size', this.value);
|
setAttr('font-size', this.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
return _context2.abrupt("return", {
|
return {
|
||||||
name: strings.name,
|
name: strings.name,
|
||||||
svgicons: svgEditor.curConfig.extIconsPath + 'foreignobject-icons.xml',
|
svgicons: svgEditor.curConfig.extIconsPath + 'foreignobject-icons.xml',
|
||||||
buttons: strings.buttons.map(function (button, i) {
|
buttons: strings.buttons.map((button, i) => {
|
||||||
return Object.assign(buttons[i], button);
|
return Object.assign(buttons[i], button);
|
||||||
}),
|
}),
|
||||||
context_tools: strings.contextTools.map(function (contextTool, i) {
|
context_tools: strings.contextTools.map((contextTool, i) => {
|
||||||
return Object.assign(contextTools[i], contextTool);
|
return Object.assign(contextTools[i], contextTool);
|
||||||
}),
|
}),
|
||||||
callback: function callback() {
|
|
||||||
|
callback() {
|
||||||
$('#foreignObject_panel').hide();
|
$('#foreignObject_panel').hide();
|
||||||
|
|
||||||
var endChanges = function endChanges() {
|
const endChanges = function () {
|
||||||
$('#svg_source_editor').hide();
|
$('#svg_source_editor').hide();
|
||||||
editingforeign = false;
|
editingforeign = false;
|
||||||
$('#svg_source_textarea').blur();
|
$('#svg_source_textarea').blur();
|
||||||
|
@ -218,53 +203,24 @@ var svgEditorExtension_foreignobject = (function () {
|
||||||
// Create source save/cancel buttons
|
// Create source save/cancel buttons
|
||||||
|
|
||||||
/* const save = */
|
/* const save = */
|
||||||
$('#tool_source_save').clone().hide().attr('id', 'foreign_save').unbind().appendTo('#tool_source_back').click( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
$('#tool_source_save').clone().hide().attr('id', 'foreign_save').unbind().appendTo('#tool_source_back').click(async function () {
|
||||||
var ok;
|
if (!editingforeign) {
|
||||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
return;
|
||||||
while (1) {
|
|
||||||
switch (_context.prev = _context.next) {
|
|
||||||
case 0:
|
|
||||||
if (editingforeign) {
|
|
||||||
_context.next = 2;
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return _context.abrupt("return");
|
if (!setForeignString($('#svg_source_textarea').val())) {
|
||||||
|
const ok = await $.confirm('Errors found. Revert to original?');
|
||||||
|
|
||||||
case 2:
|
if (!ok) {
|
||||||
if (setForeignString($('#svg_source_textarea').val())) {
|
return;
|
||||||
_context.next = 11;
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_context.next = 5;
|
|
||||||
return $.confirm('Errors found. Revert to original?');
|
|
||||||
|
|
||||||
case 5:
|
|
||||||
ok = _context.sent;
|
|
||||||
|
|
||||||
if (ok) {
|
|
||||||
_context.next = 8;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
return _context.abrupt("return");
|
|
||||||
|
|
||||||
case 8:
|
|
||||||
endChanges();
|
endChanges();
|
||||||
_context.next = 12;
|
} else {
|
||||||
break;
|
|
||||||
|
|
||||||
case 11:
|
|
||||||
endChanges();
|
endChanges();
|
||||||
|
} // setSelectMode();
|
||||||
|
|
||||||
case 12:
|
});
|
||||||
case "end":
|
|
||||||
return _context.stop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, _callee);
|
|
||||||
})));
|
|
||||||
/* const cancel = */
|
/* const cancel = */
|
||||||
|
|
||||||
$('#tool_source_cancel').clone().hide().attr('id', 'foreign_cancel').unbind().appendTo('#tool_source_back').click(function () {
|
$('#tool_source_cancel').clone().hide().attr('id', 'foreign_cancel').unbind().appendTo('#tool_source_back').click(function () {
|
||||||
|
@ -272,7 +228,8 @@ var svgEditorExtension_foreignobject = (function () {
|
||||||
});
|
});
|
||||||
}, 3000);
|
}, 3000);
|
||||||
},
|
},
|
||||||
mouseDown: function mouseDown(opts) {
|
|
||||||
|
mouseDown(opts) {
|
||||||
// const e = opts.event;
|
// const e = opts.event;
|
||||||
if (svgCanvas.getMode() !== 'foreign') {
|
if (svgCanvas.getMode() !== 'foreign') {
|
||||||
return undefined;
|
return undefined;
|
||||||
|
@ -292,43 +249,45 @@ var svgEditorExtension_foreignobject = (function () {
|
||||||
style: 'pointer-events:inherit'
|
style: 'pointer-events:inherit'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
var m = svgdoc.createElementNS(NS.MATH, 'math');
|
const m = svgdoc.createElementNS(NS.MATH, 'math');
|
||||||
m.setAttributeNS(NS.XMLNS, 'xmlns', NS.MATH);
|
m.setAttributeNS(NS.XMLNS, 'xmlns', NS.MATH);
|
||||||
m.setAttribute('display', 'inline');
|
m.setAttribute('display', 'inline');
|
||||||
var mi = svgdoc.createElementNS(NS.MATH, 'mi');
|
const mi = svgdoc.createElementNS(NS.MATH, 'mi');
|
||||||
mi.setAttribute('mathvariant', 'normal');
|
mi.setAttribute('mathvariant', 'normal');
|
||||||
mi.textContent = "\u03A6";
|
mi.textContent = '\u03A6';
|
||||||
var mo = svgdoc.createElementNS(NS.MATH, 'mo');
|
const mo = svgdoc.createElementNS(NS.MATH, 'mo');
|
||||||
mo.textContent = "\u222A";
|
mo.textContent = '\u222A';
|
||||||
var mi2 = svgdoc.createElementNS(NS.MATH, 'mi');
|
const mi2 = svgdoc.createElementNS(NS.MATH, 'mi');
|
||||||
mi2.textContent = "\u2133";
|
mi2.textContent = '\u2133';
|
||||||
m.append(mi, mo, mi2);
|
m.append(mi, mo, mi2);
|
||||||
newFO.append(m);
|
newFO.append(m);
|
||||||
return {
|
return {
|
||||||
started: true
|
started: true
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mouseUp: function mouseUp(opts) {
|
|
||||||
|
mouseUp(opts) {
|
||||||
// const e = opts.event;
|
// const e = opts.event;
|
||||||
if (svgCanvas.getMode() !== 'foreign' || !started) {
|
if (svgCanvas.getMode() !== 'foreign' || !started) {
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
var attrs = $(newFO).attr(['width', 'height']);
|
const attrs = $(newFO).attr(['width', 'height']);
|
||||||
var keep = attrs.width !== '0' || attrs.height !== '0';
|
const keep = attrs.width !== '0' || attrs.height !== '0';
|
||||||
svgCanvas.addToSelection([newFO], true);
|
svgCanvas.addToSelection([newFO], true);
|
||||||
return {
|
return {
|
||||||
keep: keep,
|
keep,
|
||||||
element: newFO
|
element: newFO
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
selectedChanged: function selectedChanged(opts) {
|
|
||||||
|
selectedChanged(opts) {
|
||||||
// Use this to update the current selected elements
|
// Use this to update the current selected elements
|
||||||
selElems = opts.elems;
|
selElems = opts.elems;
|
||||||
var i = selElems.length;
|
let i = selElems.length;
|
||||||
|
|
||||||
while (i--) {
|
while (i--) {
|
||||||
var elem = selElems[i];
|
const elem = selElems[i];
|
||||||
|
|
||||||
if (elem && elem.tagName === 'foreignObject') {
|
if (elem && elem.tagName === 'foreignObject') {
|
||||||
if (opts.selectedElement && !opts.multiselected) {
|
if (opts.selectedElement && !opts.multiselected) {
|
||||||
|
@ -344,18 +303,13 @@ var svgEditorExtension_foreignobject = (function () {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
elementChanged: function elementChanged(opts) {// const elem = opts.elems[0];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
case 17:
|
elementChanged(opts) {// const elem = opts.elems[0];
|
||||||
case "end":
|
|
||||||
return _context2.stop();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}, _callee2);
|
|
||||||
}))();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extForeignobject;
|
return extForeignobject;
|
||||||
|
|
|
@ -1,42 +1,6 @@
|
||||||
var svgEditorExtension_grid = (function () {
|
var svgEditorExtension_grid = (function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
||||||
try {
|
|
||||||
var info = gen[key](arg);
|
|
||||||
var value = info.value;
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (info.done) {
|
|
||||||
resolve(value);
|
|
||||||
} else {
|
|
||||||
Promise.resolve(value).then(_next, _throw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _asyncToGenerator(fn) {
|
|
||||||
return function () {
|
|
||||||
var self = this,
|
|
||||||
args = arguments;
|
|
||||||
return new Promise(function (resolve, reject) {
|
|
||||||
var gen = fn.apply(self, args);
|
|
||||||
|
|
||||||
function _next(value) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _throw(err) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
||||||
}
|
|
||||||
|
|
||||||
_next(undefined);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @file ext-grid.js
|
* @file ext-grid.js
|
||||||
*
|
*
|
||||||
|
@ -47,84 +11,28 @@ var svgEditorExtension_grid = (function () {
|
||||||
*/
|
*/
|
||||||
var extGrid = {
|
var extGrid = {
|
||||||
name: 'grid',
|
name: 'grid',
|
||||||
init: function init(_ref) {
|
|
||||||
var _this = this;
|
|
||||||
|
|
||||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
async init({
|
||||||
var $, NS, getTypeMap, importLocale, strings, svgEditor, svgCanvas, svgdoc, assignAttributes, hcanvas, canvBG, units, intervals, showGrid, canvasGrid, gridDefs, gridPattern, gridimg, gridBox, updateGrid, gridUpdate, buttons;
|
$,
|
||||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
NS,
|
||||||
while (1) {
|
getTypeMap,
|
||||||
switch (_context.prev = _context.next) {
|
importLocale
|
||||||
case 0:
|
}) {
|
||||||
gridUpdate = function _gridUpdate() {
|
const strings = await importLocale();
|
||||||
if (showGrid) {
|
const svgEditor = this;
|
||||||
updateGrid(svgCanvas.getZoom());
|
const svgCanvas = svgEditor.canvas;
|
||||||
}
|
const svgdoc = document.getElementById('svgcanvas').ownerDocument,
|
||||||
|
{
|
||||||
$('#canvasGrid').toggle(showGrid);
|
assignAttributes
|
||||||
$('#view_grid').toggleClass('push_button_pressed tool_button');
|
} = svgCanvas,
|
||||||
};
|
hcanvas = document.createElement('canvas'),
|
||||||
|
canvBG = $('#canvasBackground'),
|
||||||
updateGrid = function _updateGrid(zoom) {
|
units = getTypeMap(),
|
||||||
// TODO: Try this with <line> elements, then compare performance difference
|
// Assumes prior `init()` call on `units.js` module
|
||||||
var unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px
|
intervals = [0.01, 0.1, 1, 10, 100, 1000];
|
||||||
|
let showGrid = svgEditor.curConfig.showGrid || false;
|
||||||
var uMulti = unit * zoom; // Calculate the main number interval
|
|
||||||
|
|
||||||
var rawM = 100 / uMulti;
|
|
||||||
var multi = 1;
|
|
||||||
intervals.some(function (num) {
|
|
||||||
multi = num;
|
|
||||||
return rawM <= num;
|
|
||||||
});
|
|
||||||
var bigInt = multi * uMulti; // Set the canvas size to the width of the container
|
|
||||||
|
|
||||||
hcanvas.width = bigInt;
|
|
||||||
hcanvas.height = bigInt;
|
|
||||||
var ctx = hcanvas.getContext('2d');
|
|
||||||
var curD = 0.5;
|
|
||||||
var part = bigInt / 10;
|
|
||||||
ctx.globalAlpha = 0.2;
|
|
||||||
ctx.strokeStyle = svgEditor.curConfig.gridColor;
|
|
||||||
|
|
||||||
for (var i = 1; i < 10; i++) {
|
|
||||||
var subD = Math.round(part * i) + 0.5; // const lineNum = (i % 2)?12:10;
|
|
||||||
|
|
||||||
var lineNum = 0;
|
|
||||||
ctx.moveTo(subD, bigInt);
|
|
||||||
ctx.lineTo(subD, lineNum);
|
|
||||||
ctx.moveTo(bigInt, subD);
|
|
||||||
ctx.lineTo(lineNum, subD);
|
|
||||||
}
|
|
||||||
|
|
||||||
ctx.stroke();
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.globalAlpha = 0.5;
|
|
||||||
ctx.moveTo(curD, bigInt);
|
|
||||||
ctx.lineTo(curD, 0);
|
|
||||||
ctx.moveTo(bigInt, curD);
|
|
||||||
ctx.lineTo(0, curD);
|
|
||||||
ctx.stroke();
|
|
||||||
var datauri = hcanvas.toDataURL('image/png');
|
|
||||||
gridimg.setAttribute('width', bigInt);
|
|
||||||
gridimg.setAttribute('height', bigInt);
|
|
||||||
gridimg.parentNode.setAttribute('width', bigInt);
|
|
||||||
gridimg.parentNode.setAttribute('height', bigInt);
|
|
||||||
svgCanvas.setHref(gridimg, datauri);
|
|
||||||
};
|
|
||||||
|
|
||||||
$ = _ref.$, NS = _ref.NS, getTypeMap = _ref.getTypeMap, importLocale = _ref.importLocale;
|
|
||||||
_context.next = 5;
|
|
||||||
return importLocale();
|
|
||||||
|
|
||||||
case 5:
|
|
||||||
strings = _context.sent;
|
|
||||||
svgEditor = _this;
|
|
||||||
svgCanvas = svgEditor.canvas;
|
|
||||||
svgdoc = document.getElementById('svgcanvas').ownerDocument, assignAttributes = svgCanvas.assignAttributes, hcanvas = document.createElement('canvas'), canvBG = $('#canvasBackground'), units = getTypeMap(), intervals = [0.01, 0.1, 1, 10, 100, 1000];
|
|
||||||
showGrid = svgEditor.curConfig.showGrid || false;
|
|
||||||
$(hcanvas).hide().appendTo('body');
|
$(hcanvas).hide().appendTo('body');
|
||||||
canvasGrid = svgdoc.createElementNS(NS.SVG, 'svg');
|
const canvasGrid = svgdoc.createElementNS(NS.SVG, 'svg');
|
||||||
assignAttributes(canvasGrid, {
|
assignAttributes(canvasGrid, {
|
||||||
id: 'canvasGrid',
|
id: 'canvasGrid',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
|
@ -135,9 +43,9 @@ var svgEditorExtension_grid = (function () {
|
||||||
display: 'none'
|
display: 'none'
|
||||||
});
|
});
|
||||||
canvBG.append(canvasGrid);
|
canvBG.append(canvasGrid);
|
||||||
gridDefs = svgdoc.createElementNS(NS.SVG, 'defs'); // grid-pattern
|
const gridDefs = svgdoc.createElementNS(NS.SVG, 'defs'); // grid-pattern
|
||||||
|
|
||||||
gridPattern = svgdoc.createElementNS(NS.SVG, 'pattern');
|
const gridPattern = svgdoc.createElementNS(NS.SVG, 'pattern');
|
||||||
assignAttributes(gridPattern, {
|
assignAttributes(gridPattern, {
|
||||||
id: 'gridpattern',
|
id: 'gridpattern',
|
||||||
patternUnits: 'userSpaceOnUse',
|
patternUnits: 'userSpaceOnUse',
|
||||||
|
@ -148,7 +56,7 @@ var svgEditorExtension_grid = (function () {
|
||||||
width: 100,
|
width: 100,
|
||||||
height: 100
|
height: 100
|
||||||
});
|
});
|
||||||
gridimg = svgdoc.createElementNS(NS.SVG, 'image');
|
const gridimg = svgdoc.createElementNS(NS.SVG, 'image');
|
||||||
assignAttributes(gridimg, {
|
assignAttributes(gridimg, {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
|
@ -159,7 +67,7 @@ var svgEditorExtension_grid = (function () {
|
||||||
gridDefs.append(gridPattern);
|
gridDefs.append(gridPattern);
|
||||||
$('#canvasGrid').append(gridDefs); // grid-box
|
$('#canvasGrid').append(gridDefs); // grid-box
|
||||||
|
|
||||||
gridBox = svgdoc.createElementNS(NS.SVG, 'rect');
|
const gridBox = svgdoc.createElementNS(NS.SVG, 'rect');
|
||||||
assignAttributes(gridBox, {
|
assignAttributes(gridBox, {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
|
@ -177,44 +85,103 @@ var svgEditorExtension_grid = (function () {
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
buttons = [{
|
function updateGrid(zoom) {
|
||||||
|
// TODO: Try this with <line> elements, then compare performance difference
|
||||||
|
const unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px
|
||||||
|
|
||||||
|
const uMulti = unit * zoom; // Calculate the main number interval
|
||||||
|
|
||||||
|
const rawM = 100 / uMulti;
|
||||||
|
let multi = 1;
|
||||||
|
intervals.some(num => {
|
||||||
|
multi = num;
|
||||||
|
return rawM <= num;
|
||||||
|
});
|
||||||
|
const bigInt = multi * uMulti; // Set the canvas size to the width of the container
|
||||||
|
|
||||||
|
hcanvas.width = bigInt;
|
||||||
|
hcanvas.height = bigInt;
|
||||||
|
const ctx = hcanvas.getContext('2d');
|
||||||
|
const curD = 0.5;
|
||||||
|
const part = bigInt / 10;
|
||||||
|
ctx.globalAlpha = 0.2;
|
||||||
|
ctx.strokeStyle = svgEditor.curConfig.gridColor;
|
||||||
|
|
||||||
|
for (let i = 1; i < 10; i++) {
|
||||||
|
const subD = Math.round(part * i) + 0.5; // const lineNum = (i % 2)?12:10;
|
||||||
|
|
||||||
|
const lineNum = 0;
|
||||||
|
ctx.moveTo(subD, bigInt);
|
||||||
|
ctx.lineTo(subD, lineNum);
|
||||||
|
ctx.moveTo(bigInt, subD);
|
||||||
|
ctx.lineTo(lineNum, subD);
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.globalAlpha = 0.5;
|
||||||
|
ctx.moveTo(curD, bigInt);
|
||||||
|
ctx.lineTo(curD, 0);
|
||||||
|
ctx.moveTo(bigInt, curD);
|
||||||
|
ctx.lineTo(0, curD);
|
||||||
|
ctx.stroke();
|
||||||
|
const datauri = hcanvas.toDataURL('image/png');
|
||||||
|
gridimg.setAttribute('width', bigInt);
|
||||||
|
gridimg.setAttribute('height', bigInt);
|
||||||
|
gridimg.parentNode.setAttribute('width', bigInt);
|
||||||
|
gridimg.parentNode.setAttribute('height', bigInt);
|
||||||
|
svgCanvas.setHref(gridimg, datauri);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function gridUpdate() {
|
||||||
|
if (showGrid) {
|
||||||
|
updateGrid(svgCanvas.getZoom());
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#canvasGrid').toggle(showGrid);
|
||||||
|
$('#view_grid').toggleClass('push_button_pressed tool_button');
|
||||||
|
}
|
||||||
|
|
||||||
|
const buttons = [{
|
||||||
id: 'view_grid',
|
id: 'view_grid',
|
||||||
icon: svgEditor.curConfig.extIconsPath + 'grid.png',
|
icon: svgEditor.curConfig.extIconsPath + 'grid.png',
|
||||||
type: 'context',
|
type: 'context',
|
||||||
panel: 'editor_panel',
|
panel: 'editor_panel',
|
||||||
events: {
|
events: {
|
||||||
click: function click() {
|
click() {
|
||||||
svgEditor.curConfig.showGrid = showGrid = !showGrid;
|
svgEditor.curConfig.showGrid = showGrid = !showGrid;
|
||||||
gridUpdate();
|
gridUpdate();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
return _context.abrupt("return", {
|
return {
|
||||||
name: strings.name,
|
name: strings.name,
|
||||||
svgicons: svgEditor.curConfig.extIconsPath + 'grid-icon.xml',
|
svgicons: svgEditor.curConfig.extIconsPath + 'grid-icon.xml',
|
||||||
zoomChanged: function zoomChanged(zoom) {
|
|
||||||
|
zoomChanged(zoom) {
|
||||||
if (showGrid) {
|
if (showGrid) {
|
||||||
updateGrid(zoom);
|
updateGrid(zoom);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
callback: function callback() {
|
|
||||||
|
callback() {
|
||||||
if (showGrid) {
|
if (showGrid) {
|
||||||
gridUpdate();
|
gridUpdate();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
buttons: strings.buttons.map(function (button, i) {
|
|
||||||
|
buttons: strings.buttons.map((button, i) => {
|
||||||
return Object.assign(buttons[i], button);
|
return Object.assign(buttons[i], button);
|
||||||
})
|
})
|
||||||
});
|
};
|
||||||
|
}
|
||||||
|
|
||||||
case 27:
|
|
||||||
case "end":
|
|
||||||
return _context.stop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, _callee);
|
|
||||||
}))();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extGrid;
|
return extGrid;
|
||||||
|
|
|
@ -1,98 +1,6 @@
|
||||||
var svgEditorExtension_helloworld = (function () {
|
var svgEditorExtension_helloworld = (function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
||||||
try {
|
|
||||||
var info = gen[key](arg);
|
|
||||||
var value = info.value;
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (info.done) {
|
|
||||||
resolve(value);
|
|
||||||
} else {
|
|
||||||
Promise.resolve(value).then(_next, _throw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _asyncToGenerator(fn) {
|
|
||||||
return function () {
|
|
||||||
var self = this,
|
|
||||||
args = arguments;
|
|
||||||
return new Promise(function (resolve, reject) {
|
|
||||||
var gen = fn.apply(self, args);
|
|
||||||
|
|
||||||
function _next(value) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _throw(err) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
||||||
}
|
|
||||||
|
|
||||||
_next(undefined);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function _slicedToArray(arr, i) {
|
|
||||||
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
||||||
}
|
|
||||||
|
|
||||||
function _arrayWithHoles(arr) {
|
|
||||||
if (Array.isArray(arr)) return arr;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _iterableToArrayLimit(arr, i) {
|
|
||||||
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
|
|
||||||
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"] != null) _i["return"]();
|
|
||||||
} finally {
|
|
||||||
if (_d) throw _e;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return _arr;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _unsupportedIterableToArray(o, minLen) {
|
|
||||||
if (!o) return;
|
|
||||||
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
||||||
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
||||||
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
||||||
if (n === "Map" || n === "Set") return Array.from(o);
|
|
||||||
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _arrayLikeToArray(arr, len) {
|
|
||||||
if (len == null || len > arr.length) len = arr.length;
|
|
||||||
|
|
||||||
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
||||||
|
|
||||||
return arr2;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _nonIterableRest() {
|
|
||||||
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @file ext-helloworld.js
|
* @file ext-helloworld.js
|
||||||
*
|
*
|
||||||
|
@ -109,24 +17,16 @@ var svgEditorExtension_helloworld = (function () {
|
||||||
*/
|
*/
|
||||||
var extHelloworld = {
|
var extHelloworld = {
|
||||||
name: 'helloworld',
|
name: 'helloworld',
|
||||||
init: function init(_ref) {
|
|
||||||
var _this = this;
|
|
||||||
|
|
||||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
async init({
|
||||||
var $, importLocale, strings, svgEditor, svgCanvas;
|
$,
|
||||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
importLocale
|
||||||
while (1) {
|
}) {
|
||||||
switch (_context.prev = _context.next) {
|
// See `/editor/extensions/ext-locale/helloworld/`
|
||||||
case 0:
|
const strings = await importLocale();
|
||||||
$ = _ref.$, importLocale = _ref.importLocale;
|
const svgEditor = this;
|
||||||
_context.next = 3;
|
const svgCanvas = svgEditor.canvas;
|
||||||
return importLocale();
|
return {
|
||||||
|
|
||||||
case 3:
|
|
||||||
strings = _context.sent;
|
|
||||||
svgEditor = _this;
|
|
||||||
svgCanvas = svgEditor.canvas;
|
|
||||||
return _context.abrupt("return", {
|
|
||||||
name: strings.name,
|
name: strings.name,
|
||||||
// For more notes on how to make an icon file, see the source of
|
// For more notes on how to make an icon file, see the source of
|
||||||
// the helloworld-icon.xml
|
// the helloworld-icon.xml
|
||||||
|
@ -144,17 +44,19 @@ var svgEditorExtension_helloworld = (function () {
|
||||||
title: strings.buttons[0].title,
|
title: strings.buttons[0].title,
|
||||||
// Events
|
// Events
|
||||||
events: {
|
events: {
|
||||||
click: function click() {
|
click() {
|
||||||
// The action taken when the button is clicked on.
|
// The action taken when the button is clicked on.
|
||||||
// For "mode" buttons, any other button will
|
// For "mode" buttons, any other button will
|
||||||
// automatically be de-pressed.
|
// automatically be de-pressed.
|
||||||
svgCanvas.setMode('hello_world');
|
svgCanvas.setMode('hello_world');
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}],
|
}],
|
||||||
|
|
||||||
// This is triggered when the main mouse button is pressed down
|
// This is triggered when the main mouse button is pressed down
|
||||||
// on the editor canvas (not the tool panels)
|
// on the editor canvas (not the tool panels)
|
||||||
mouseDown: function mouseDown() {
|
mouseDown() {
|
||||||
// Check the mode on mousedown
|
// Check the mode on mousedown
|
||||||
if (svgCanvas.getMode() === 'hello_world') {
|
if (svgCanvas.getMode() === 'hello_world') {
|
||||||
// The returned object must include "started" with
|
// The returned object must include "started" with
|
||||||
|
@ -166,38 +68,31 @@ var svgEditorExtension_helloworld = (function () {
|
||||||
|
|
||||||
return undefined;
|
return undefined;
|
||||||
},
|
},
|
||||||
|
|
||||||
// This is triggered from anywhere, but "started" must have been set
|
// This is triggered from anywhere, but "started" must have been set
|
||||||
// to true (see above). Note that "opts" is an object with event info
|
// to true (see above). Note that "opts" is an object with event info
|
||||||
mouseUp: function mouseUp(opts) {
|
mouseUp(opts) {
|
||||||
// Check the mode on mouseup
|
// Check the mode on mouseup
|
||||||
if (svgCanvas.getMode() === 'hello_world') {
|
if (svgCanvas.getMode() === 'hello_world') {
|
||||||
var zoom = svgCanvas.getZoom(); // Get the actual coordinate by dividing by the zoom value
|
const zoom = svgCanvas.getZoom(); // Get the actual coordinate by dividing by the zoom value
|
||||||
|
|
||||||
var x = opts.mouse_x / zoom;
|
const x = opts.mouse_x / zoom;
|
||||||
var y = opts.mouse_y / zoom; // We do our own formatting
|
const y = opts.mouse_y / zoom; // We do our own formatting
|
||||||
|
|
||||||
var text = strings.text;
|
|
||||||
[['x', x], ['y', y]].forEach(function (_ref2) {
|
|
||||||
var _ref3 = _slicedToArray(_ref2, 2),
|
|
||||||
prop = _ref3[0],
|
|
||||||
val = _ref3[1];
|
|
||||||
|
|
||||||
|
let {
|
||||||
|
text
|
||||||
|
} = strings;
|
||||||
|
[['x', x], ['y', y]].forEach(([prop, val]) => {
|
||||||
text = text.replace('{' + prop + '}', val);
|
text = text.replace('{' + prop + '}', val);
|
||||||
}); // Show the text using the custom alert function
|
}); // Show the text using the custom alert function
|
||||||
|
|
||||||
$.alert(text);
|
$.alert(text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
case 7:
|
};
|
||||||
case "end":
|
|
||||||
return _context.stop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, _callee);
|
|
||||||
}))();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extHelloworld;
|
return extHelloworld;
|
||||||
|
|
|
@ -1,58 +1,6 @@
|
||||||
var svgEditorExtension_imagelib = (function () {
|
var svgEditorExtension_imagelib = (function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function _typeof(obj) {
|
|
||||||
"@babel/helpers - typeof";
|
|
||||||
|
|
||||||
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
|
||||||
_typeof = function (obj) {
|
|
||||||
return typeof obj;
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
_typeof = function (obj) {
|
|
||||||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return _typeof(obj);
|
|
||||||
}
|
|
||||||
|
|
||||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
||||||
try {
|
|
||||||
var info = gen[key](arg);
|
|
||||||
var value = info.value;
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (info.done) {
|
|
||||||
resolve(value);
|
|
||||||
} else {
|
|
||||||
Promise.resolve(value).then(_next, _throw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _asyncToGenerator(fn) {
|
|
||||||
return function () {
|
|
||||||
var self = this,
|
|
||||||
args = arguments;
|
|
||||||
return new Promise(function (resolve, reject) {
|
|
||||||
var gen = fn.apply(self, args);
|
|
||||||
|
|
||||||
function _next(value) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _throw(err) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
||||||
}
|
|
||||||
|
|
||||||
_next(undefined);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @file ext-imagelib.js
|
* @file ext-imagelib.js
|
||||||
*
|
*
|
||||||
|
@ -63,184 +11,161 @@ var svgEditorExtension_imagelib = (function () {
|
||||||
*/
|
*/
|
||||||
var extImagelib = {
|
var extImagelib = {
|
||||||
name: 'imagelib',
|
name: 'imagelib',
|
||||||
init: function init(_ref) {
|
|
||||||
var _this = this;
|
|
||||||
|
|
||||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
|
async init({
|
||||||
var $, decode64, importLocale, dropXMLInternalSubset, imagelibStrings, modularVersion, svgEditor, uiStrings, svgCanvas, extIconsPath, allowedImageLibOrigins, closeBrowser, importImage, pending, mode, multiArr, transferStopped, preview, submit, onMessage, _onMessage, toggleMulti, showBrowser, buttons;
|
$,
|
||||||
|
decode64,
|
||||||
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
importLocale,
|
||||||
while (1) {
|
dropXMLInternalSubset
|
||||||
switch (_context2.prev = _context2.next) {
|
}) {
|
||||||
case 0:
|
const imagelibStrings = await importLocale();
|
||||||
showBrowser = function _showBrowser() {
|
const modularVersion = !('svgEditor' in window) || !window.svgEditor || window.svgEditor.modules !== false;
|
||||||
var browser = $('#imgbrowse');
|
const svgEditor = this;
|
||||||
|
const {
|
||||||
if (!browser.length) {
|
uiStrings,
|
||||||
$('<div id=imgbrowse_holder><div id=imgbrowse class=toolbar_button>' + '</div></div>').insertAfter('#svg_docprops');
|
canvas: svgCanvas,
|
||||||
browser = $('#imgbrowse');
|
curConfig: {
|
||||||
var allLibs = imagelibStrings.select_lib;
|
extIconsPath
|
||||||
var libOpts = $('<ul id=imglib_opts>').appendTo(browser);
|
|
||||||
var frame = $('<iframe src="javascript:0"/>').prependTo(browser).hide().wrap('<div id=lib_framewrap>');
|
|
||||||
var header = $('<h1>').prependTo(browser).text(allLibs).css({
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
width: '100%'
|
|
||||||
});
|
|
||||||
var cancel = $('<button>' + uiStrings.common.cancel + '</button>').appendTo(browser).on('click touchend', function () {
|
|
||||||
$('#imgbrowse_holder').hide();
|
|
||||||
}).css({
|
|
||||||
position: 'absolute',
|
|
||||||
top: 5,
|
|
||||||
right: -10
|
|
||||||
});
|
|
||||||
var leftBlock = $('<span>').css({
|
|
||||||
position: 'absolute',
|
|
||||||
top: 5,
|
|
||||||
left: 10
|
|
||||||
}).appendTo(browser);
|
|
||||||
var back = $('<button hidden>' + imagelibStrings.show_list + '</button>').appendTo(leftBlock).on('click touchend', function () {
|
|
||||||
frame.attr('src', 'about:blank').hide();
|
|
||||||
libOpts.show();
|
|
||||||
header.text(allLibs);
|
|
||||||
back.hide();
|
|
||||||
}).css({
|
|
||||||
'margin-right': 5
|
|
||||||
}).hide();
|
|
||||||
/* const type = */
|
|
||||||
|
|
||||||
$('<select><option value=s>' + imagelibStrings.import_single + '</option><option value=m>' + imagelibStrings.import_multi + '</option><option value=o>' + imagelibStrings.open + '</option></select>').appendTo(leftBlock).change(function () {
|
|
||||||
mode = $(this).val();
|
|
||||||
|
|
||||||
switch (mode) {
|
|
||||||
case 's':
|
|
||||||
case 'o':
|
|
||||||
toggleMulti(false);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'm':
|
|
||||||
// Import multiple
|
|
||||||
toggleMulti(true);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}).css({
|
|
||||||
'margin-top': 10
|
|
||||||
});
|
|
||||||
cancel.prepend($.getSvgIcon('cancel', true));
|
|
||||||
back.prepend($.getSvgIcon('tool_imagelib', true));
|
|
||||||
imagelibStrings.imgLibs.forEach(function (_ref5) {
|
|
||||||
var name = _ref5.name,
|
|
||||||
url = _ref5.url,
|
|
||||||
description = _ref5.description;
|
|
||||||
$('<li>').appendTo(libOpts).text(name).on('click touchend', function () {
|
|
||||||
frame.attr('src', url).show();
|
|
||||||
header.text(name);
|
|
||||||
libOpts.hide();
|
|
||||||
back.show();
|
|
||||||
}).append("<span>".concat(description, "</span>"));
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
$('#imgbrowse_holder').show();
|
|
||||||
}
|
}
|
||||||
|
} = svgEditor;
|
||||||
|
imagelibStrings.imgLibs = imagelibStrings.imgLibs.map(({
|
||||||
|
name,
|
||||||
|
url,
|
||||||
|
description
|
||||||
|
}) => {
|
||||||
|
// Todo: Adopt some standard formatting library like `fluent.js` instead
|
||||||
|
url = url // Keep these regexes as is in prep. for switching to `u` flag
|
||||||
|
// which will require escaping
|
||||||
|
// eslint-disable-next-line unicorn/better-regex
|
||||||
|
.replace(/\{path\}/g, extIconsPath).replace( // eslint-disable-next-line unicorn/better-regex
|
||||||
|
/\{modularVersion\}/g, modularVersion ? imagelibStrings.moduleEnding || '-es' : '');
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
url,
|
||||||
|
description
|
||||||
};
|
};
|
||||||
|
|
||||||
toggleMulti = function _toggleMulti(show) {
|
|
||||||
$('#lib_framewrap, #imglib_opts').css({
|
|
||||||
right: show ? 200 : 10
|
|
||||||
});
|
});
|
||||||
|
const allowedImageLibOrigins = imagelibStrings.imgLibs.map(({
|
||||||
if (!preview) {
|
url
|
||||||
preview = $('<div id=imglib_preview>').css({
|
}) => {
|
||||||
position: 'absolute',
|
try {
|
||||||
top: 45,
|
return new URL(url).origin;
|
||||||
right: 10,
|
} catch (err) {
|
||||||
width: 180,
|
return location.origin;
|
||||||
bottom: 45,
|
|
||||||
background: '#fff',
|
|
||||||
overflow: 'auto'
|
|
||||||
}).insertAfter('#lib_framewrap');
|
|
||||||
submit = $('<button disabled>Import selected</button>').appendTo('#imgbrowse').on('click touchend', function () {
|
|
||||||
$.each(multiArr, function (i) {
|
|
||||||
var type = this[0];
|
|
||||||
var data = this[1];
|
|
||||||
|
|
||||||
if (type === 'svg') {
|
|
||||||
svgCanvas.importSvgString(data);
|
|
||||||
} else {
|
|
||||||
importImage(data);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
svgCanvas.moveSelectedElements(i * 20, i * 20, false);
|
|
||||||
});
|
});
|
||||||
preview.empty();
|
/**
|
||||||
multiArr = [];
|
*
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
function closeBrowser() {
|
||||||
$('#imgbrowse_holder').hide();
|
$('#imgbrowse_holder').hide();
|
||||||
}).css({
|
document.activeElement.blur(); // make sure focus is the body to correct issue #417
|
||||||
position: 'absolute',
|
}
|
||||||
bottom: 10,
|
/**
|
||||||
right: -10
|
* @param {string} url
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function importImage(url) {
|
||||||
|
const newImage = svgCanvas.addSVGElementFromJson({
|
||||||
|
element: 'image',
|
||||||
|
attr: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
id: svgCanvas.getNextId(),
|
||||||
|
style: 'pointer-events:inherit'
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
svgCanvas.clearSelection();
|
||||||
|
svgCanvas.addToSelection([newImage]);
|
||||||
|
svgCanvas.setImageURL(url);
|
||||||
}
|
}
|
||||||
|
|
||||||
preview.toggle(show);
|
const pending = {};
|
||||||
submit.toggle(show);
|
let mode = 's';
|
||||||
};
|
let multiArr = [];
|
||||||
|
let transferStopped = false;
|
||||||
|
let preview, submit;
|
||||||
|
/**
|
||||||
|
* Contains the SVG to insert.
|
||||||
|
* @typedef {PlainObject} ImageLibMessage
|
||||||
|
* @property {"imagelib"} namespace Required to distinguish from any other messages of app.
|
||||||
|
* @property {string} href Set to same value as previous `ImageLibMetaMessage` `id`.
|
||||||
|
* @property {string} data The response (as an SVG string or URL)
|
||||||
|
*/
|
||||||
|
|
||||||
_onMessage = function _onMessage3() {
|
/**
|
||||||
_onMessage = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref4) {
|
* Used for setting meta-data before images are retrieved.
|
||||||
var origin, response, id, type, hasName, hasHref, char1, secondpos, entry, curMeta, svgStr, imgStr, name, message, pre, src, title, xml, ok;
|
* @typedef {PlainObject} ImageLibMetaMessage
|
||||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
* @property {"imagelib"} namespace Required to distinguish from any other messages of app.
|
||||||
while (1) {
|
* @property {string} name If the subsequent response is an SVG string or if `preview_url`
|
||||||
switch (_context.prev = _context.next) {
|
* is present, will be used as the title for the preview image. When an
|
||||||
case 0:
|
* SVG string is present, will default to the first `<title>`'s contents or
|
||||||
origin = _ref4.origin, response = _ref4.data;
|
* "(SVG #<Length of response>)" if none is present. Otherwise, if `preview_url`
|
||||||
|
* is present, will default to the empty string. Though `name` may be falsy,
|
||||||
|
* it is always expected to be present for meta messages.
|
||||||
|
* @property {string} id Identifier (the expected `href` for a subsequent response message);
|
||||||
|
* used for ensuring the subsequent response can be tied to this `ImageLibMetaMessage` object.
|
||||||
|
* @property {string} [preview_url] When import mode is multiple, used to set an image
|
||||||
|
* source along with the name/title. If the subsequent response is an SVG string
|
||||||
|
* and there is no `preview_url`, the default will just be to show the
|
||||||
|
* name/title. If the response is not an SVG string, the default will be to
|
||||||
|
* show that response (i.e., the URL).
|
||||||
|
* @property {string} entry Set automatically with div holding retrieving
|
||||||
|
* message (until ready to delete)
|
||||||
|
* @todo Should use a separate Map instead of `entry`
|
||||||
|
*/
|
||||||
|
|
||||||
if (!(!response || !['string', 'object'].includes(_typeof(response)))) {
|
/**
|
||||||
_context.next = 3;
|
* @param {PlainObject} cfg
|
||||||
break;
|
* @param {string} cfg.origin
|
||||||
|
* @param {ImageLibMetaMessage|ImageLibMessage|string} cfg.data String is deprecated when parsed to JSON `ImageLibMessage`
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
async function onMessage({
|
||||||
|
origin,
|
||||||
|
data: response
|
||||||
|
}) {
|
||||||
|
// eslint-disable-line no-shadow
|
||||||
|
if (!response || !['string', 'object'].includes(typeof response)) {
|
||||||
|
// Do nothing
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
return _context.abrupt("return");
|
let id;
|
||||||
|
let type;
|
||||||
|
|
||||||
case 3:
|
try {
|
||||||
_context.prev = 3;
|
|
||||||
// Todo: This block can be removed (and the above check changed to
|
// Todo: This block can be removed (and the above check changed to
|
||||||
// insist on an object) if embedAPI moves away from a string to
|
// insist on an object) if embedAPI moves away from a string to
|
||||||
// an object (if IE9 support not needed)
|
// an object (if IE9 support not needed)
|
||||||
response = _typeof(response) === 'object' ? response : JSON.parse(response);
|
response = typeof response === 'object' ? response : JSON.parse(response);
|
||||||
|
|
||||||
if (!(response.namespace !== 'imagelib')) {
|
if (response.namespace !== 'imagelib') {
|
||||||
_context.next = 7;
|
return;
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
return _context.abrupt("return");
|
|
||||||
|
|
||||||
case 7:
|
|
||||||
if (!(!allowedImageLibOrigins.includes('*') && !allowedImageLibOrigins.includes(origin))) {
|
|
||||||
_context.next = 10;
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!allowedImageLibOrigins.includes('*') && !allowedImageLibOrigins.includes(origin)) {
|
||||||
// Todo: Surface this error to user?
|
// Todo: Surface this error to user?
|
||||||
console.log("Origin ".concat(origin, " not whitelisted for posting to ").concat(window.origin)); // eslint-disable-line no-console
|
console.log(`Origin ${origin} not whitelisted for posting to ${window.origin}`); // eslint-disable-line no-console
|
||||||
|
|
||||||
return _context.abrupt("return");
|
return;
|
||||||
|
|
||||||
case 10:
|
|
||||||
hasName = 'name' in response;
|
|
||||||
hasHref = 'href' in response;
|
|
||||||
|
|
||||||
if (!(!hasName && transferStopped)) {
|
|
||||||
_context.next = 15;
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
transferStopped = false;
|
const hasName = ('name' in response);
|
||||||
return _context.abrupt("return");
|
const hasHref = ('href' in response);
|
||||||
|
|
||||||
|
if (!hasName && transferStopped) {
|
||||||
|
transferStopped = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
case 15:
|
|
||||||
if (hasHref) {
|
if (hasHref) {
|
||||||
id = response.href;
|
id = response.href;
|
||||||
response = response.data;
|
response = response.data;
|
||||||
|
@ -249,100 +174,74 @@ var svgEditorExtension_imagelib = (function () {
|
||||||
|
|
||||||
$('#dialog_box').hide();
|
$('#dialog_box').hide();
|
||||||
type = hasName ? 'meta' : response.charAt(0);
|
type = hasName ? 'meta' : response.charAt(0);
|
||||||
_context.next = 28;
|
} catch (e) {
|
||||||
break;
|
// This block is for backward compatibility (for IAN and Openclipart);
|
||||||
|
// should otherwise return
|
||||||
case 20:
|
if (typeof response === 'string') {
|
||||||
_context.prev = 20;
|
const char1 = response.charAt(0);
|
||||||
_context.t0 = _context["catch"](3);
|
|
||||||
|
|
||||||
if (!(typeof response === 'string')) {
|
|
||||||
_context.next = 28;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
char1 = response.charAt(0);
|
|
||||||
|
|
||||||
if (!(char1 !== '{' && transferStopped)) {
|
|
||||||
_context.next = 27;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
if (char1 !== '{' && transferStopped) {
|
||||||
transferStopped = false;
|
transferStopped = false;
|
||||||
return _context.abrupt("return");
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
case 27:
|
|
||||||
if (char1 === '|') {
|
if (char1 === '|') {
|
||||||
secondpos = response.indexOf('|', 1);
|
const secondpos = response.indexOf('|', 1);
|
||||||
id = response.substr(1, secondpos - 1);
|
id = response.substr(1, secondpos - 1);
|
||||||
response = response.substr(secondpos + 1);
|
response = response.substr(secondpos + 1);
|
||||||
type = response.charAt(0);
|
type = response.charAt(0);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
case 28:
|
let entry, curMeta, svgStr, imgStr;
|
||||||
_context.t1 = type;
|
|
||||||
_context.next = _context.t1 === 'meta' ? 31 : _context.t1 === '<' ? 47 : _context.t1 === 'd' ? 49 : 60;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 31:
|
switch (type) {
|
||||||
|
case 'meta':
|
||||||
|
{
|
||||||
// Metadata
|
// Metadata
|
||||||
transferStopped = false;
|
transferStopped = false;
|
||||||
curMeta = response; // Should be safe to add dynamic property as passed metadata
|
curMeta = response; // Should be safe to add dynamic property as passed metadata
|
||||||
|
|
||||||
pending[curMeta.id] = curMeta; // lgtm [js/remote-property-injection]
|
pending[curMeta.id] = curMeta; // lgtm [js/remote-property-injection]
|
||||||
|
|
||||||
name = curMeta.name || 'file';
|
const name = curMeta.name || 'file';
|
||||||
message = uiStrings.notification.retrieving.replace('%s', name);
|
const message = uiStrings.notification.retrieving.replace('%s', name);
|
||||||
|
|
||||||
if (!(mode !== 'm')) {
|
if (mode !== 'm') {
|
||||||
_context.next = 43;
|
await $.process_cancel(message);
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
_context.next = 39;
|
|
||||||
return $.process_cancel(message);
|
|
||||||
|
|
||||||
case 39:
|
|
||||||
transferStopped = true; // Should a message be sent back to the frame?
|
transferStopped = true; // Should a message be sent back to the frame?
|
||||||
|
|
||||||
$('#dialog_box').hide();
|
$('#dialog_box').hide();
|
||||||
_context.next = 46;
|
} else {
|
||||||
break;
|
|
||||||
|
|
||||||
case 43:
|
|
||||||
entry = $('<div>').text(message).data('id', curMeta.id);
|
entry = $('<div>').text(message).data('id', curMeta.id);
|
||||||
preview.append(entry);
|
preview.append(entry);
|
||||||
curMeta.entry = entry;
|
curMeta.entry = entry;
|
||||||
|
|
||||||
case 46:
|
|
||||||
return _context.abrupt("return");
|
|
||||||
|
|
||||||
case 47:
|
|
||||||
svgStr = true;
|
|
||||||
return _context.abrupt("break", 62);
|
|
||||||
|
|
||||||
case 49:
|
|
||||||
if (!response.startsWith('data:image/svg+xml')) {
|
|
||||||
_context.next = 57;
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
pre = 'data:image/svg+xml;base64,';
|
return;
|
||||||
src = response.substring(pre.length);
|
}
|
||||||
|
|
||||||
|
case '<':
|
||||||
|
svgStr = true;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'd':
|
||||||
|
{
|
||||||
|
if (response.startsWith('data:image/svg+xml')) {
|
||||||
|
const pre = 'data:image/svg+xml;base64,';
|
||||||
|
const src = response.substring(pre.length);
|
||||||
response = decode64(src);
|
response = decode64(src);
|
||||||
svgStr = true;
|
svgStr = true;
|
||||||
return _context.abrupt("break", 62);
|
break;
|
||||||
|
} else if (response.startsWith('data:image/')) {
|
||||||
case 57:
|
imgStr = true;
|
||||||
if (!response.startsWith('data:image/')) {
|
|
||||||
_context.next = 60;
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
// Else fall through
|
||||||
|
|
||||||
imgStr = true;
|
default:
|
||||||
return _context.abrupt("break", 62);
|
|
||||||
|
|
||||||
case 60:
|
|
||||||
// TODO: See if there's a way to base64 encode the binary data stream
|
// TODO: See if there's a way to base64 encode the binary data stream
|
||||||
// const str = 'data:;base64,' + svgedit.utilities.encode64(response, true);
|
// const str = 'data:;base64,' + svgedit.utilities.encode64(response, true);
|
||||||
// Assume it's raw image data
|
// Assume it's raw image data
|
||||||
|
@ -361,14 +260,11 @@ var svgEditorExtension_imagelib = (function () {
|
||||||
// });
|
// });
|
||||||
|
|
||||||
|
|
||||||
return _context.abrupt("return");
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
case 62:
|
switch (mode) {
|
||||||
_context.t2 = mode;
|
case 's':
|
||||||
_context.next = _context.t2 === 's' ? 65 : _context.t2 === 'm' ? 68 : _context.t2 === 'o' ? 72 : 83;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 65:
|
|
||||||
// Import one
|
// Import one
|
||||||
if (svgStr) {
|
if (svgStr) {
|
||||||
svgCanvas.importSvgString(response);
|
svgCanvas.importSvgString(response);
|
||||||
|
@ -377,12 +273,14 @@ var svgEditorExtension_imagelib = (function () {
|
||||||
}
|
}
|
||||||
|
|
||||||
closeBrowser();
|
closeBrowser();
|
||||||
return _context.abrupt("break", 83);
|
break;
|
||||||
|
|
||||||
case 68:
|
case 'm':
|
||||||
|
{
|
||||||
// Import multiple
|
// Import multiple
|
||||||
multiArr.push([svgStr ? 'svg' : 'img', response]);
|
multiArr.push([svgStr ? 'svg' : 'img', response]);
|
||||||
curMeta = pending[id];
|
curMeta = pending[id];
|
||||||
|
let title;
|
||||||
|
|
||||||
if (svgStr) {
|
if (svgStr) {
|
||||||
if (curMeta && curMeta.name) {
|
if (curMeta && curMeta.name) {
|
||||||
|
@ -390,7 +288,7 @@ var svgEditorExtension_imagelib = (function () {
|
||||||
} else {
|
} else {
|
||||||
// Try to find a title
|
// Try to find a title
|
||||||
// `dropXMLInternalSubset` is to help prevent the billion laughs attack
|
// `dropXMLInternalSubset` is to help prevent the billion laughs attack
|
||||||
xml = new DOMParser().parseFromString(dropXMLInternalSubset(response), 'text/xml').documentElement; // lgtm [js/xml-bomb]
|
const xml = new DOMParser().parseFromString(dropXMLInternalSubset(response), 'text/xml').documentElement; // lgtm [js/xml-bomb]
|
||||||
|
|
||||||
title = $(xml).children('title').first().text() || '(SVG #' + response.length + ')';
|
title = $(xml).children('title').first().text() || '(SVG #' + response.length + ')';
|
||||||
}
|
}
|
||||||
|
@ -432,124 +330,159 @@ var svgEditorExtension_imagelib = (function () {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return _context.abrupt("break", 83);
|
|
||||||
|
|
||||||
case 72:
|
|
||||||
if (svgStr) {
|
|
||||||
_context.next = 74;
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
return _context.abrupt("break", 83);
|
case 'o':
|
||||||
|
{
|
||||||
|
// Open
|
||||||
|
if (!svgStr) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
case 74:
|
|
||||||
closeBrowser();
|
closeBrowser();
|
||||||
_context.next = 77;
|
const ok = await svgEditor.openPrep();
|
||||||
return svgEditor.openPrep();
|
|
||||||
|
|
||||||
case 77:
|
if (!ok) {
|
||||||
ok = _context.sent;
|
return;
|
||||||
|
|
||||||
if (ok) {
|
|
||||||
_context.next = 80;
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return _context.abrupt("return");
|
|
||||||
|
|
||||||
case 80:
|
|
||||||
svgCanvas.clear();
|
svgCanvas.clear();
|
||||||
svgCanvas.setSvgString(response); // updateCanvas();
|
svgCanvas.setSvgString(response); // updateCanvas();
|
||||||
|
|
||||||
return _context.abrupt("break", 83);
|
break;
|
||||||
|
|
||||||
case 83:
|
|
||||||
case "end":
|
|
||||||
return _context.stop();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, _callee, null, [[3, 20]]);
|
} // Receive `postMessage` data
|
||||||
}));
|
|
||||||
return _onMessage.apply(this, arguments);
|
|
||||||
};
|
|
||||||
|
|
||||||
onMessage = function _onMessage2(_x) {
|
|
||||||
return _onMessage.apply(this, arguments);
|
|
||||||
};
|
|
||||||
|
|
||||||
importImage = function _importImage(url) {
|
|
||||||
var newImage = svgCanvas.addSVGElementFromJson({
|
|
||||||
element: 'image',
|
|
||||||
attr: {
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
width: 0,
|
|
||||||
height: 0,
|
|
||||||
id: svgCanvas.getNextId(),
|
|
||||||
style: 'pointer-events:inherit'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
svgCanvas.clearSelection();
|
|
||||||
svgCanvas.addToSelection([newImage]);
|
|
||||||
svgCanvas.setImageURL(url);
|
|
||||||
};
|
|
||||||
|
|
||||||
closeBrowser = function _closeBrowser() {
|
|
||||||
$('#imgbrowse_holder').hide();
|
|
||||||
document.activeElement.blur(); // make sure focus is the body to correct issue #417
|
|
||||||
};
|
|
||||||
|
|
||||||
$ = _ref.$, decode64 = _ref.decode64, importLocale = _ref.importLocale, dropXMLInternalSubset = _ref.dropXMLInternalSubset;
|
|
||||||
_context2.next = 9;
|
|
||||||
return importLocale();
|
|
||||||
|
|
||||||
case 9:
|
|
||||||
imagelibStrings = _context2.sent;
|
|
||||||
modularVersion = !('svgEditor' in window) || !window.svgEditor || window.svgEditor.modules !== false;
|
|
||||||
svgEditor = _this;
|
|
||||||
uiStrings = svgEditor.uiStrings, svgCanvas = svgEditor.canvas, extIconsPath = svgEditor.curConfig.extIconsPath;
|
|
||||||
imagelibStrings.imgLibs = imagelibStrings.imgLibs.map(function (_ref2) {
|
|
||||||
var name = _ref2.name,
|
|
||||||
url = _ref2.url,
|
|
||||||
description = _ref2.description;
|
|
||||||
// Todo: Adopt some standard formatting library like `fluent.js` instead
|
|
||||||
url = url // Keep these regexes as is in prep. for switching to `u` flag
|
|
||||||
// which will require escaping
|
|
||||||
// eslint-disable-next-line unicorn/better-regex
|
|
||||||
.replace(/\{path\}/g, extIconsPath).replace( // eslint-disable-next-line unicorn/better-regex
|
|
||||||
/\{modularVersion\}/g, modularVersion ? imagelibStrings.moduleEnding || '-es' : '');
|
|
||||||
return {
|
|
||||||
name: name,
|
|
||||||
url: url,
|
|
||||||
description: description
|
|
||||||
};
|
|
||||||
});
|
|
||||||
allowedImageLibOrigins = imagelibStrings.imgLibs.map(function (_ref3) {
|
|
||||||
var url = _ref3.url;
|
|
||||||
|
|
||||||
try {
|
|
||||||
return new URL(url).origin;
|
|
||||||
} catch (err) {
|
|
||||||
return location.origin;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
|
|
||||||
pending = {};
|
|
||||||
mode = 's';
|
|
||||||
multiArr = [];
|
|
||||||
transferStopped = false;
|
|
||||||
// Receive `postMessage` data
|
|
||||||
window.addEventListener('message', onMessage, true);
|
window.addEventListener('message', onMessage, true);
|
||||||
/**
|
/**
|
||||||
* @param {boolean} show
|
* @param {boolean} show
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
buttons = [{
|
function toggleMulti(show) {
|
||||||
|
$('#lib_framewrap, #imglib_opts').css({
|
||||||
|
right: show ? 200 : 10
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!preview) {
|
||||||
|
preview = $('<div id=imglib_preview>').css({
|
||||||
|
position: 'absolute',
|
||||||
|
top: 45,
|
||||||
|
right: 10,
|
||||||
|
width: 180,
|
||||||
|
bottom: 45,
|
||||||
|
background: '#fff',
|
||||||
|
overflow: 'auto'
|
||||||
|
}).insertAfter('#lib_framewrap');
|
||||||
|
submit = $('<button disabled>Import selected</button>').appendTo('#imgbrowse').on('click touchend', function () {
|
||||||
|
$.each(multiArr, function (i) {
|
||||||
|
const type = this[0];
|
||||||
|
const data = this[1];
|
||||||
|
|
||||||
|
if (type === 'svg') {
|
||||||
|
svgCanvas.importSvgString(data);
|
||||||
|
} else {
|
||||||
|
importImage(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
svgCanvas.moveSelectedElements(i * 20, i * 20, false);
|
||||||
|
});
|
||||||
|
preview.empty();
|
||||||
|
multiArr = [];
|
||||||
|
$('#imgbrowse_holder').hide();
|
||||||
|
}).css({
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 10,
|
||||||
|
right: -10
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
preview.toggle(show);
|
||||||
|
submit.toggle(show);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function showBrowser() {
|
||||||
|
let browser = $('#imgbrowse');
|
||||||
|
|
||||||
|
if (!browser.length) {
|
||||||
|
$('<div id=imgbrowse_holder><div id=imgbrowse class=toolbar_button>' + '</div></div>').insertAfter('#svg_docprops');
|
||||||
|
browser = $('#imgbrowse');
|
||||||
|
const allLibs = imagelibStrings.select_lib;
|
||||||
|
const libOpts = $('<ul id=imglib_opts>').appendTo(browser);
|
||||||
|
const frame = $('<iframe src="javascript:0"/>').prependTo(browser).hide().wrap('<div id=lib_framewrap>');
|
||||||
|
const header = $('<h1>').prependTo(browser).text(allLibs).css({
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: '100%'
|
||||||
|
});
|
||||||
|
const cancel = $('<button>' + uiStrings.common.cancel + '</button>').appendTo(browser).on('click touchend', function () {
|
||||||
|
$('#imgbrowse_holder').hide();
|
||||||
|
}).css({
|
||||||
|
position: 'absolute',
|
||||||
|
top: 5,
|
||||||
|
right: -10
|
||||||
|
});
|
||||||
|
const leftBlock = $('<span>').css({
|
||||||
|
position: 'absolute',
|
||||||
|
top: 5,
|
||||||
|
left: 10
|
||||||
|
}).appendTo(browser);
|
||||||
|
const back = $('<button hidden>' + imagelibStrings.show_list + '</button>').appendTo(leftBlock).on('click touchend', function () {
|
||||||
|
frame.attr('src', 'about:blank').hide();
|
||||||
|
libOpts.show();
|
||||||
|
header.text(allLibs);
|
||||||
|
back.hide();
|
||||||
|
}).css({
|
||||||
|
'margin-right': 5
|
||||||
|
}).hide();
|
||||||
|
/* const type = */
|
||||||
|
|
||||||
|
$('<select><option value=s>' + imagelibStrings.import_single + '</option><option value=m>' + imagelibStrings.import_multi + '</option><option value=o>' + imagelibStrings.open + '</option></select>').appendTo(leftBlock).change(function () {
|
||||||
|
mode = $(this).val();
|
||||||
|
|
||||||
|
switch (mode) {
|
||||||
|
case 's':
|
||||||
|
case 'o':
|
||||||
|
toggleMulti(false);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'm':
|
||||||
|
// Import multiple
|
||||||
|
toggleMulti(true);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}).css({
|
||||||
|
'margin-top': 10
|
||||||
|
});
|
||||||
|
cancel.prepend($.getSvgIcon('cancel', true));
|
||||||
|
back.prepend($.getSvgIcon('tool_imagelib', true));
|
||||||
|
imagelibStrings.imgLibs.forEach(function ({
|
||||||
|
name,
|
||||||
|
url,
|
||||||
|
description
|
||||||
|
}) {
|
||||||
|
$('<li>').appendTo(libOpts).text(name).on('click touchend', function () {
|
||||||
|
frame.attr('src', url).show();
|
||||||
|
header.text(name);
|
||||||
|
libOpts.hide();
|
||||||
|
back.show();
|
||||||
|
}).append(`<span>${description}</span>`);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$('#imgbrowse_holder').show();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const buttons = [{
|
||||||
id: 'tool_imagelib',
|
id: 'tool_imagelib',
|
||||||
type: 'app_menu',
|
type: 'app_menu',
|
||||||
// _flyout
|
// _flyout
|
||||||
|
@ -559,24 +492,19 @@ var svgEditorExtension_imagelib = (function () {
|
||||||
mouseup: showBrowser
|
mouseup: showBrowser
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
return _context2.abrupt("return", {
|
return {
|
||||||
svgicons: extIconsPath + 'ext-imagelib.xml',
|
svgicons: extIconsPath + 'ext-imagelib.xml',
|
||||||
buttons: imagelibStrings.buttons.map(function (button, i) {
|
buttons: imagelibStrings.buttons.map((button, i) => {
|
||||||
return Object.assign(buttons[i], button);
|
return Object.assign(buttons[i], button);
|
||||||
}),
|
}),
|
||||||
callback: function callback() {
|
|
||||||
|
callback() {
|
||||||
$('<style>').text('#imgbrowse_holder {' + 'position: absolute;' + 'top: 0;' + 'left: 0;' + 'width: 100%;' + 'height: 100%;' + 'background-color: rgba(0, 0, 0, .5);' + 'z-index: 5;' + '}' + '#imgbrowse {' + 'position: absolute;' + 'top: 25px;' + 'left: 25px;' + 'right: 25px;' + 'bottom: 25px;' + 'min-width: 300px;' + 'min-height: 200px;' + 'background: #B0B0B0;' + 'border: 1px outset #777;' + '}' + '#imgbrowse h1 {' + 'font-size: 20px;' + 'margin: .4em;' + 'text-align: center;' + '}' + '#lib_framewrap,' + '#imgbrowse > ul {' + 'position: absolute;' + 'top: 45px;' + 'left: 10px;' + 'right: 10px;' + 'bottom: 10px;' + 'background: white;' + 'margin: 0;' + 'padding: 0;' + '}' + '#imgbrowse > ul {' + 'overflow: auto;' + '}' + '#imgbrowse > div {' + 'border: 1px solid #666;' + '}' + '#imglib_preview > div {' + 'padding: 5px;' + 'font-size: 12px;' + '}' + '#imglib_preview img {' + 'display: block;' + 'margin: 0 auto;' + 'max-height: 100px;' + '}' + '#imgbrowse li {' + 'list-style: none;' + 'padding: .5em;' + 'background: #E8E8E8;' + 'border-bottom: 1px solid #B0B0B0;' + 'line-height: 1.2em;' + 'font-style: sans-serif;' + '}' + '#imgbrowse li > span {' + 'color: #666;' + 'font-size: 15px;' + 'display: block;' + '}' + '#imgbrowse li:hover {' + 'background: #FFC;' + 'cursor: pointer;' + '}' + '#imgbrowse iframe {' + 'width: 100%;' + 'height: 100%;' + 'border: 0;' + '}').appendTo('head');
|
$('<style>').text('#imgbrowse_holder {' + 'position: absolute;' + 'top: 0;' + 'left: 0;' + 'width: 100%;' + 'height: 100%;' + 'background-color: rgba(0, 0, 0, .5);' + 'z-index: 5;' + '}' + '#imgbrowse {' + 'position: absolute;' + 'top: 25px;' + 'left: 25px;' + 'right: 25px;' + 'bottom: 25px;' + 'min-width: 300px;' + 'min-height: 200px;' + 'background: #B0B0B0;' + 'border: 1px outset #777;' + '}' + '#imgbrowse h1 {' + 'font-size: 20px;' + 'margin: .4em;' + 'text-align: center;' + '}' + '#lib_framewrap,' + '#imgbrowse > ul {' + 'position: absolute;' + 'top: 45px;' + 'left: 10px;' + 'right: 10px;' + 'bottom: 10px;' + 'background: white;' + 'margin: 0;' + 'padding: 0;' + '}' + '#imgbrowse > ul {' + 'overflow: auto;' + '}' + '#imgbrowse > div {' + 'border: 1px solid #666;' + '}' + '#imglib_preview > div {' + 'padding: 5px;' + 'font-size: 12px;' + '}' + '#imglib_preview img {' + 'display: block;' + 'margin: 0 auto;' + 'max-height: 100px;' + '}' + '#imgbrowse li {' + 'list-style: none;' + 'padding: .5em;' + 'background: #E8E8E8;' + 'border-bottom: 1px solid #B0B0B0;' + 'line-height: 1.2em;' + 'font-style: sans-serif;' + '}' + '#imgbrowse li > span {' + 'color: #666;' + 'font-size: 15px;' + 'display: block;' + '}' + '#imgbrowse li:hover {' + 'background: #FFC;' + 'cursor: pointer;' + '}' + '#imgbrowse iframe {' + 'width: 100%;' + 'height: 100%;' + 'border: 0;' + '}').appendTo('head');
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
case 22:
|
};
|
||||||
case "end":
|
|
||||||
return _context2.stop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, _callee2);
|
|
||||||
}))();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extImagelib;
|
return extImagelib;
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -1,42 +1,6 @@
|
||||||
var svgEditorExtension_mathjax = (function () {
|
var svgEditorExtension_mathjax = (function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
||||||
try {
|
|
||||||
var info = gen[key](arg);
|
|
||||||
var value = info.value;
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (info.done) {
|
|
||||||
resolve(value);
|
|
||||||
} else {
|
|
||||||
Promise.resolve(value).then(_next, _throw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _asyncToGenerator(fn) {
|
|
||||||
return function () {
|
|
||||||
var self = this,
|
|
||||||
args = arguments;
|
|
||||||
return new Promise(function (resolve, reject) {
|
|
||||||
var gen = fn.apply(self, args);
|
|
||||||
|
|
||||||
function _next(value) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _throw(err) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
||||||
}
|
|
||||||
|
|
||||||
_next(undefined);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add any of the whitelisted attributes to the script tag.
|
* Add any of the whitelisted attributes to the script tag.
|
||||||
* @param {HTMLScriptElement} script
|
* @param {HTMLScriptElement} script
|
||||||
|
@ -46,32 +10,38 @@ var svgEditorExtension_mathjax = (function () {
|
||||||
|
|
||||||
|
|
||||||
function addScriptAtts(script, atts) {
|
function addScriptAtts(script, atts) {
|
||||||
['id', 'class', 'type'].forEach(function (prop) {
|
['id', 'class', 'type'].forEach(prop => {
|
||||||
if (prop in atts) {
|
if (prop in atts) {
|
||||||
script[prop] = atts[prop];
|
script[prop] = atts[prop];
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} // Additions by Brett
|
} // Additions by Brett
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @author Brett Zamir (other items are from `dynamic-import-polyfill`)
|
||||||
|
* @param {string|string[]} url
|
||||||
|
* @param {PlainObject} [atts={}]
|
||||||
|
* @returns {Promise<void|Error>} Resolves to `undefined` or rejects with an `Error` upon a
|
||||||
|
* script loading error
|
||||||
|
*/
|
||||||
|
|
||||||
function importScript(url) {
|
function importScript(url, atts = {}) {
|
||||||
var atts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
||||||
|
|
||||||
if (Array.isArray(url)) {
|
if (Array.isArray(url)) {
|
||||||
return Promise.all(url.map(function (u) {
|
return Promise.all(url.map(u => {
|
||||||
return importScript(u, atts);
|
return importScript(u, atts);
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
return new Promise(function (resolve, reject) {
|
return new Promise((resolve, reject) => {
|
||||||
// eslint-disable-line promise/avoid-new
|
// eslint-disable-line promise/avoid-new
|
||||||
var script = document.createElement('script');
|
const script = document.createElement('script');
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
function scriptOnError() {
|
function scriptOnError() {
|
||||||
reject(new Error("Failed to import: ".concat(url)));
|
reject(new Error(`Failed to import: ${url}`));
|
||||||
destructor();
|
destructor();
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
|
@ -85,7 +55,7 @@ var svgEditorExtension_mathjax = (function () {
|
||||||
destructor();
|
destructor();
|
||||||
}
|
}
|
||||||
|
|
||||||
var destructor = function destructor() {
|
const destructor = () => {
|
||||||
script.removeEventListener('error', scriptOnError);
|
script.removeEventListener('error', scriptOnError);
|
||||||
script.removeEventListener('load', scriptOnLoad);
|
script.removeEventListener('load', scriptOnLoad);
|
||||||
script.remove();
|
script.remove();
|
||||||
|
@ -101,79 +71,20 @@ var svgEditorExtension_mathjax = (function () {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* globals MathJax */
|
||||||
var extMathjax = {
|
var extMathjax = {
|
||||||
name: 'mathjax',
|
name: 'mathjax',
|
||||||
init: function init(_ref) {
|
|
||||||
var _this = this;
|
|
||||||
|
|
||||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
|
async init({
|
||||||
var $, importLocale, strings, svgEditor, svgCanvas, mathjaxSrcSecure, uiStrings, math, locationX, locationY, mathjaxLoaded, saveMath, buttons;
|
$,
|
||||||
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
importLocale
|
||||||
while (1) {
|
}) {
|
||||||
switch (_context2.prev = _context2.next) {
|
const strings = await importLocale();
|
||||||
case 0:
|
const svgEditor = this;
|
||||||
saveMath = function _saveMath() {
|
const svgCanvas = svgEditor.canvas; // Configuration of the MathJax extention.
|
||||||
var code = $('#mathjax_code_textarea').val(); // displaystyle to force MathJax NOT to use the inline style. Because it is
|
|
||||||
// less fancy!
|
|
||||||
|
|
||||||
MathJax.Hub.queue.Push(['Text', math, '\\displaystyle{' + code + '}']);
|
|
||||||
/*
|
|
||||||
* The MathJax library doesn't want to bloat your webpage so it creates
|
|
||||||
* every symbol (glymph) you need only once. These are saved in a `<svg>` on
|
|
||||||
* the top of your html document, just under the body tag. Each glymph has
|
|
||||||
* its unique id and is saved as a `<path>` in the `<defs>` tag of the `<svg>`
|
|
||||||
*
|
|
||||||
* Then when the symbols are needed in the rest of your html document they
|
|
||||||
* are refferd to by a `<use>` tag.
|
|
||||||
* Because of bug 1076 we can't just grab the defs tag on the top and add it
|
|
||||||
* to your formula's `<svg>` and copy the lot. So we have to replace each
|
|
||||||
* `<use>` tag by its `<path>`.
|
|
||||||
*/
|
|
||||||
|
|
||||||
MathJax.Hub.queue.Push(function () {
|
|
||||||
var mathjaxMath = $('.MathJax_SVG');
|
|
||||||
var svg = $(mathjaxMath.html());
|
|
||||||
svg.find('use').each(function () {
|
|
||||||
// TODO: find a less pragmatic and more elegant solution to this.
|
|
||||||
var id = $(this).attr('href') ? $(this).attr('href').slice(1) // Works in Chrome.
|
|
||||||
: $(this).attr('xlink:href').slice(1); // Works in Firefox.
|
|
||||||
|
|
||||||
var glymph = $('#' + id).clone().removeAttr('id');
|
|
||||||
var x = $(this).attr('x');
|
|
||||||
var y = $(this).attr('y');
|
|
||||||
var transform = $(this).attr('transform');
|
|
||||||
|
|
||||||
if (transform && (x || y)) {
|
|
||||||
glymph.attr('transform', transform + ' translate(' + x + ',' + y + ')');
|
|
||||||
} else if (transform) {
|
|
||||||
glymph.attr('transform', transform);
|
|
||||||
} else if (x || y) {
|
|
||||||
glymph.attr('transform', 'translate(' + x + ',' + y + ')');
|
|
||||||
}
|
|
||||||
|
|
||||||
$(this).replaceWith(glymph);
|
|
||||||
}); // Remove the style tag because it interferes with SVG-Edit.
|
|
||||||
|
|
||||||
svg.removeAttr('style');
|
|
||||||
svg.attr('xmlns', 'http://www.w3.org/2000/svg');
|
|
||||||
svgCanvas.importSvgString($('<div>').append(svg.clone()).html(), true);
|
|
||||||
svgCanvas.ungroupSelectedElement(); // TODO: To undo the adding of the Formula you now have to undo twice.
|
|
||||||
// This should only be once!
|
|
||||||
|
|
||||||
svgCanvas.moveSelectedElements(locationX, locationY, true);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
$ = _ref.$, importLocale = _ref.importLocale;
|
|
||||||
_context2.next = 4;
|
|
||||||
return importLocale();
|
|
||||||
|
|
||||||
case 4:
|
|
||||||
strings = _context2.sent;
|
|
||||||
svgEditor = _this;
|
|
||||||
svgCanvas = svgEditor.canvas; // Configuration of the MathJax extention.
|
|
||||||
// This will be added to the head tag before MathJax is loaded.
|
// This will be added to the head tag before MathJax is loaded.
|
||||||
|
|
||||||
|
const
|
||||||
/* mathjaxConfiguration = `<script type="text/x-mathjax-config">
|
/* mathjaxConfiguration = `<script type="text/x-mathjax-config">
|
||||||
MathJax.Hub.Config({
|
MathJax.Hub.Config({
|
||||||
extensions: ['tex2jax.js'],
|
extensions: ['tex2jax.js'],
|
||||||
|
@ -199,7 +110,13 @@ var svgEditorExtension_mathjax = (function () {
|
||||||
// mathjaxSrc = 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
|
// mathjaxSrc = 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
|
||||||
// Had been on https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG.js
|
// Had been on https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG.js
|
||||||
// Obtained Text-AMS-MML_SVG.js from https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.3/config/TeX-AMS-MML_SVG.js
|
// Obtained Text-AMS-MML_SVG.js from https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.3/config/TeX-AMS-MML_SVG.js
|
||||||
mathjaxSrcSecure = 'mathjax/MathJax.min.js?config=TeX-AMS-MML_SVG.js', uiStrings = svgEditor.uiStrings;
|
mathjaxSrcSecure = 'mathjax/MathJax.min.js?config=TeX-AMS-MML_SVG.js',
|
||||||
|
{
|
||||||
|
uiStrings
|
||||||
|
} = svgEditor;
|
||||||
|
let math,
|
||||||
|
locationX,
|
||||||
|
locationY,
|
||||||
mathjaxLoaded = false; // TODO: Implement language support. Move these uiStrings to the locale files and
|
mathjaxLoaded = false; // TODO: Implement language support. Move these uiStrings to the locale files and
|
||||||
// the code to the langReady callback. Also i18nize alert and HTML below
|
// the code to the langReady callback. Also i18nize alert and HTML below
|
||||||
|
|
||||||
|
@ -217,26 +134,69 @@ var svgEditorExtension_mathjax = (function () {
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
buttons = [{
|
function saveMath() {
|
||||||
|
const code = $('#mathjax_code_textarea').val(); // displaystyle to force MathJax NOT to use the inline style. Because it is
|
||||||
|
// less fancy!
|
||||||
|
|
||||||
|
MathJax.Hub.queue.Push(['Text', math, '\\displaystyle{' + code + '}']);
|
||||||
|
/*
|
||||||
|
* The MathJax library doesn't want to bloat your webpage so it creates
|
||||||
|
* every symbol (glymph) you need only once. These are saved in a `<svg>` on
|
||||||
|
* the top of your html document, just under the body tag. Each glymph has
|
||||||
|
* its unique id and is saved as a `<path>` in the `<defs>` tag of the `<svg>`
|
||||||
|
*
|
||||||
|
* Then when the symbols are needed in the rest of your html document they
|
||||||
|
* are refferd to by a `<use>` tag.
|
||||||
|
* Because of bug 1076 we can't just grab the defs tag on the top and add it
|
||||||
|
* to your formula's `<svg>` and copy the lot. So we have to replace each
|
||||||
|
* `<use>` tag by its `<path>`.
|
||||||
|
*/
|
||||||
|
|
||||||
|
MathJax.Hub.queue.Push(function () {
|
||||||
|
const mathjaxMath = $('.MathJax_SVG');
|
||||||
|
const svg = $(mathjaxMath.html());
|
||||||
|
svg.find('use').each(function () {
|
||||||
|
// TODO: find a less pragmatic and more elegant solution to this.
|
||||||
|
const id = $(this).attr('href') ? $(this).attr('href').slice(1) // Works in Chrome.
|
||||||
|
: $(this).attr('xlink:href').slice(1); // Works in Firefox.
|
||||||
|
|
||||||
|
const glymph = $('#' + id).clone().removeAttr('id');
|
||||||
|
const x = $(this).attr('x');
|
||||||
|
const y = $(this).attr('y');
|
||||||
|
const transform = $(this).attr('transform');
|
||||||
|
|
||||||
|
if (transform && (x || y)) {
|
||||||
|
glymph.attr('transform', transform + ' translate(' + x + ',' + y + ')');
|
||||||
|
} else if (transform) {
|
||||||
|
glymph.attr('transform', transform);
|
||||||
|
} else if (x || y) {
|
||||||
|
glymph.attr('transform', 'translate(' + x + ',' + y + ')');
|
||||||
|
}
|
||||||
|
|
||||||
|
$(this).replaceWith(glymph);
|
||||||
|
}); // Remove the style tag because it interferes with SVG-Edit.
|
||||||
|
|
||||||
|
svg.removeAttr('style');
|
||||||
|
svg.attr('xmlns', 'http://www.w3.org/2000/svg');
|
||||||
|
svgCanvas.importSvgString($('<div>').append(svg.clone()).html(), true);
|
||||||
|
svgCanvas.ungroupSelectedElement(); // TODO: To undo the adding of the Formula you now have to undo twice.
|
||||||
|
// This should only be once!
|
||||||
|
|
||||||
|
svgCanvas.moveSelectedElements(locationX, locationY, true);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const buttons = [{
|
||||||
id: 'tool_mathjax',
|
id: 'tool_mathjax',
|
||||||
type: 'mode',
|
type: 'mode',
|
||||||
icon: svgEditor.curConfig.extIconsPath + 'mathjax.png',
|
icon: svgEditor.curConfig.extIconsPath + 'mathjax.png',
|
||||||
events: {
|
events: {
|
||||||
click: function click() {
|
async click() {
|
||||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
|
||||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
|
||||||
while (1) {
|
|
||||||
switch (_context.prev = _context.next) {
|
|
||||||
case 0:
|
|
||||||
// Set the mode.
|
// Set the mode.
|
||||||
svgCanvas.setMode('mathjax'); // Only load Mathjax when needed, we don't want to strain Svg-Edit any more.
|
svgCanvas.setMode('mathjax'); // Only load Mathjax when needed, we don't want to strain Svg-Edit any more.
|
||||||
// From this point on it is very probable that it will be needed, so load it.
|
// From this point on it is very probable that it will be needed, so load it.
|
||||||
|
|
||||||
if (!(mathjaxLoaded === false)) {
|
if (mathjaxLoaded === false) {
|
||||||
_context.next = 17;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
$('<div id="mathjax">' + '<!-- Here is where MathJax creates the math -->' + '<div id="mathjax_creator" class="tex2jax_process" style="display:none">' + '$${}$$' + '</div>' + '<div id="mathjax_overlay"></div>' + '<div id="mathjax_container">' + '<div id="tool_mathjax_back" class="toolbar_button">' + '<button id="tool_mathjax_save">OK</button>' + '<button id="tool_mathjax_cancel">Cancel</button>' + '</div>' + '<fieldset>' + '<legend id="mathjax_legend">Mathematics Editor</legend>' + '<label>' + '<span id="mathjax_explication">Please type your mathematics in ' + '<a href="https://en.wikipedia.org/wiki/Help:Displaying_a_formula" target="_blank">TeX</a> code.</span></label>' + '<textarea id="mathjax_code_textarea" spellcheck="false"></textarea>' + '</fieldset>' + '</div>' + '</div>').insertAfter('#svg_prefs').hide(); // Make the MathEditor draggable.
|
$('<div id="mathjax">' + '<!-- Here is where MathJax creates the math -->' + '<div id="mathjax_creator" class="tex2jax_process" style="display:none">' + '$${}$$' + '</div>' + '<div id="mathjax_overlay"></div>' + '<div id="mathjax_container">' + '<div id="tool_mathjax_back" class="toolbar_button">' + '<button id="tool_mathjax_save">OK</button>' + '<button id="tool_mathjax_cancel">Cancel</button>' + '</div>' + '<fieldset>' + '<legend id="mathjax_legend">Mathematics Editor</legend>' + '<label>' + '<span id="mathjax_explication">Please type your mathematics in ' + '<a href="https://en.wikipedia.org/wiki/Help:Displaying_a_formula" target="_blank">TeX</a> code.</span></label>' + '<textarea id="mathjax_code_textarea" spellcheck="false"></textarea>' + '</fieldset>' + '</div>' + '</div>').insertAfter('#svg_prefs').hide(); // Make the MathEditor draggable.
|
||||||
|
|
||||||
$('#mathjax_container').draggable({
|
$('#mathjax_container').draggable({
|
||||||
|
@ -276,12 +236,9 @@ var svgEditorExtension_mathjax = (function () {
|
||||||
// We use `extIconsPath` here for now as it does not vary with
|
// We use `extIconsPath` here for now as it does not vary with
|
||||||
// the modular type as does `extPath`
|
// the modular type as does `extPath`
|
||||||
|
|
||||||
_context.prev = 7;
|
try {
|
||||||
_context.next = 10;
|
await importScript(svgEditor.curConfig.extIconsPath + mathjaxSrcSecure); // When MathJax is loaded get the div where the math will be rendered.
|
||||||
return importScript(svgEditor.curConfig.extIconsPath + mathjaxSrcSecure);
|
|
||||||
|
|
||||||
case 10:
|
|
||||||
// When MathJax is loaded get the div where the math will be rendered.
|
|
||||||
MathJax.Hub.queue.Push(function () {
|
MathJax.Hub.queue.Push(function () {
|
||||||
math = MathJax.Hub.getAllJax('#mathjax_creator')[0];
|
math = MathJax.Hub.getAllJax('#mathjax_creator')[0];
|
||||||
console.log(math); // eslint-disable-line no-console
|
console.log(math); // eslint-disable-line no-console
|
||||||
|
@ -289,33 +246,24 @@ var svgEditorExtension_mathjax = (function () {
|
||||||
mathjaxLoaded = true;
|
mathjaxLoaded = true;
|
||||||
console.log('MathJax Loaded'); // eslint-disable-line no-console
|
console.log('MathJax Loaded'); // eslint-disable-line no-console
|
||||||
});
|
});
|
||||||
_context.next = 17;
|
} catch (e) {
|
||||||
break;
|
|
||||||
|
|
||||||
case 13:
|
|
||||||
_context.prev = 13;
|
|
||||||
_context.t0 = _context["catch"](7);
|
|
||||||
console.log('Failed loading MathJax.'); // eslint-disable-line no-console
|
console.log('Failed loading MathJax.'); // eslint-disable-line no-console
|
||||||
|
|
||||||
$.alert('Failed loading MathJax. You will not be able to change the mathematics.');
|
$.alert('Failed loading MathJax. You will not be able to change the mathematics.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
case 17:
|
|
||||||
case "end":
|
|
||||||
return _context.stop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, _callee, null, [[7, 13]]);
|
|
||||||
}))();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
return _context2.abrupt("return", {
|
return {
|
||||||
name: strings.name,
|
name: strings.name,
|
||||||
svgicons: svgEditor.curConfig.extIconsPath + 'mathjax-icons.xml',
|
svgicons: svgEditor.curConfig.extIconsPath + 'mathjax-icons.xml',
|
||||||
buttons: strings.buttons.map(function (button, i) {
|
buttons: strings.buttons.map((button, i) => {
|
||||||
return Object.assign(buttons[i], button);
|
return Object.assign(buttons[i], button);
|
||||||
}),
|
}),
|
||||||
mouseDown: function mouseDown() {
|
|
||||||
|
mouseDown() {
|
||||||
if (svgCanvas.getMode() === 'mathjax') {
|
if (svgCanvas.getMode() === 'mathjax') {
|
||||||
return {
|
return {
|
||||||
started: true
|
started: true
|
||||||
|
@ -324,10 +272,11 @@ var svgEditorExtension_mathjax = (function () {
|
||||||
|
|
||||||
return undefined;
|
return undefined;
|
||||||
},
|
},
|
||||||
mouseUp: function mouseUp(opts) {
|
|
||||||
|
mouseUp(opts) {
|
||||||
if (svgCanvas.getMode() === 'mathjax') {
|
if (svgCanvas.getMode() === 'mathjax') {
|
||||||
// Get the coordinates from your mouse.
|
// Get the coordinates from your mouse.
|
||||||
var zoom = svgCanvas.getZoom(); // Get the actual coordinate by dividing by the zoom value
|
const zoom = svgCanvas.getZoom(); // Get the actual coordinate by dividing by the zoom value
|
||||||
|
|
||||||
locationX = opts.mouse_x / zoom;
|
locationX = opts.mouse_x / zoom;
|
||||||
locationY = opts.mouse_y / zoom;
|
locationY = opts.mouse_y / zoom;
|
||||||
|
@ -339,20 +288,15 @@ var svgEditorExtension_mathjax = (function () {
|
||||||
|
|
||||||
return undefined;
|
return undefined;
|
||||||
},
|
},
|
||||||
callback: function callback() {
|
|
||||||
|
callback() {
|
||||||
$('<style>').text('#mathjax fieldset{' + 'padding: 5px;' + 'margin: 5px;' + 'border: 1px solid #DDD;' + '}' + '#mathjax label{' + 'display: block;' + 'margin: .5em;' + '}' + '#mathjax legend {' + 'max-width:195px;' + '}' + '#mathjax_overlay {' + 'position: absolute;' + 'top: 0;' + 'left: 0;' + 'right: 0;' + 'bottom: 0;' + 'background-color: black;' + 'opacity: 0.6;' + 'z-index: 20000;' + '}' + '#mathjax_container {' + 'position: absolute;' + 'top: 50px;' + 'padding: 10px;' + 'background-color: #B0B0B0;' + 'border: 1px outset #777;' + 'opacity: 1.0;' + 'font-family: Verdana, Helvetica, sans-serif;' + 'font-size: .8em;' + 'z-index: 20001;' + '}' + '#tool_mathjax_back {' + 'margin-left: 1em;' + 'overflow: auto;' + '}' + '#mathjax_legend{' + 'font-weight: bold;' + 'font-size:1.1em;' + '}' + '#mathjax_code_textarea {\\n' + 'margin: 5px .7em;' + 'overflow: hidden;' + 'width: 416px;' + 'display: block;' + 'height: 100px;' + '}').appendTo('head'); // Add the MathJax configuration.
|
$('<style>').text('#mathjax fieldset{' + 'padding: 5px;' + 'margin: 5px;' + 'border: 1px solid #DDD;' + '}' + '#mathjax label{' + 'display: block;' + 'margin: .5em;' + '}' + '#mathjax legend {' + 'max-width:195px;' + '}' + '#mathjax_overlay {' + 'position: absolute;' + 'top: 0;' + 'left: 0;' + 'right: 0;' + 'bottom: 0;' + 'background-color: black;' + 'opacity: 0.6;' + 'z-index: 20000;' + '}' + '#mathjax_container {' + 'position: absolute;' + 'top: 50px;' + 'padding: 10px;' + 'background-color: #B0B0B0;' + 'border: 1px outset #777;' + 'opacity: 1.0;' + 'font-family: Verdana, Helvetica, sans-serif;' + 'font-size: .8em;' + 'z-index: 20001;' + '}' + '#tool_mathjax_back {' + 'margin-left: 1em;' + 'overflow: auto;' + '}' + '#mathjax_legend{' + 'font-weight: bold;' + 'font-size:1.1em;' + '}' + '#mathjax_code_textarea {\\n' + 'margin: 5px .7em;' + 'overflow: hidden;' + 'width: 416px;' + 'display: block;' + 'height: 100px;' + '}').appendTo('head'); // Add the MathJax configuration.
|
||||||
// $(mathjaxConfiguration).appendTo('head');
|
// $(mathjaxConfiguration).appendTo('head');
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
case 12:
|
};
|
||||||
case "end":
|
|
||||||
return _context2.stop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, _callee2);
|
|
||||||
}))();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extMathjax;
|
return extMathjax;
|
||||||
|
|
|
@ -11,16 +11,18 @@ var svgEditorExtension_overview_window = (function () {
|
||||||
*/
|
*/
|
||||||
var extOverview_window = {
|
var extOverview_window = {
|
||||||
name: 'overview_window',
|
name: 'overview_window',
|
||||||
init: function init(_ref) {
|
|
||||||
var $ = _ref.$,
|
init({
|
||||||
isChrome = _ref.isChrome,
|
$,
|
||||||
isIE = _ref.isIE;
|
isChrome,
|
||||||
var overviewWindowGlobals = {}; // Disabled in Chrome 48-, see https://github.com/SVG-Edit/svgedit/issues/26 and
|
isIE
|
||||||
|
}) {
|
||||||
|
const overviewWindowGlobals = {}; // Disabled in Chrome 48-, see https://github.com/SVG-Edit/svgedit/issues/26 and
|
||||||
// https://code.google.com/p/chromium/issues/detail?id=565120.
|
// https://code.google.com/p/chromium/issues/detail?id=565120.
|
||||||
|
|
||||||
if (isChrome()) {
|
if (isChrome()) {
|
||||||
var verIndex = navigator.userAgent.indexOf('Chrome/') + 7;
|
const verIndex = navigator.userAgent.indexOf('Chrome/') + 7;
|
||||||
var chromeVersion = Number.parseInt(navigator.userAgent.substring(verIndex));
|
const chromeVersion = Number.parseInt(navigator.userAgent.substring(verIndex));
|
||||||
|
|
||||||
if (chromeVersion < 49) {
|
if (chromeVersion < 49) {
|
||||||
return undefined;
|
return undefined;
|
||||||
|
@ -28,22 +30,22 @@ var svgEditorExtension_overview_window = (function () {
|
||||||
} // Define and insert the base html element.
|
} // Define and insert the base html element.
|
||||||
|
|
||||||
|
|
||||||
var propsWindowHtml = '<div id="overview_window_content_pane" style="width:100%; word-wrap:break-word; display:inline-block; margin-top:20px;">' + '<div id="overview_window_content" style="position:relative; left:12px; top:0px;">' + '<div style="background-color:#A0A0A0; display:inline-block; overflow:visible;">' + '<svg id="overviewMiniView" width="150" height="100" x="0" y="0" viewBox="0 0 4800 3600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' + '<use x="0" y="0" xlink:href="#svgroot"> </use>' + '</svg>' + '<div id="overview_window_view_box" style="min-width:50px; min-height:50px; position:absolute; top:30px; left:30px; z-index:5; background-color:rgba(255,0,102,0.3);">' + '</div>' + '</div>' + '</div>' + '</div>';
|
const propsWindowHtml = '<div id="overview_window_content_pane" style="width:100%; word-wrap:break-word; display:inline-block; margin-top:20px;">' + '<div id="overview_window_content" style="position:relative; left:12px; top:0px;">' + '<div style="background-color:#A0A0A0; display:inline-block; overflow:visible;">' + '<svg id="overviewMiniView" width="150" height="100" x="0" y="0" viewBox="0 0 4800 3600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' + '<use x="0" y="0" xlink:href="#svgroot"> </use>' + '</svg>' + '<div id="overview_window_view_box" style="min-width:50px; min-height:50px; position:absolute; top:30px; left:30px; z-index:5; background-color:rgba(255,0,102,0.3);">' + '</div>' + '</div>' + '</div>' + '</div>';
|
||||||
$('#sidepanels').append(propsWindowHtml); // Define dynamic animation of the view box.
|
$('#sidepanels').append(propsWindowHtml); // Define dynamic animation of the view box.
|
||||||
|
|
||||||
var updateViewBox = function updateViewBox() {
|
const updateViewBox = function () {
|
||||||
var portHeight = Number.parseFloat($('#workarea').css('height'));
|
const portHeight = Number.parseFloat($('#workarea').css('height'));
|
||||||
var portWidth = Number.parseFloat($('#workarea').css('width'));
|
const portWidth = Number.parseFloat($('#workarea').css('width'));
|
||||||
var portX = $('#workarea').scrollLeft();
|
const portX = $('#workarea').scrollLeft();
|
||||||
var portY = $('#workarea').scrollTop();
|
const portY = $('#workarea').scrollTop();
|
||||||
var windowWidth = Number.parseFloat($('#svgcanvas').css('width'));
|
const windowWidth = Number.parseFloat($('#svgcanvas').css('width'));
|
||||||
var windowHeight = Number.parseFloat($('#svgcanvas').css('height'));
|
const windowHeight = Number.parseFloat($('#svgcanvas').css('height'));
|
||||||
var overviewWidth = $('#overviewMiniView').attr('width');
|
const overviewWidth = $('#overviewMiniView').attr('width');
|
||||||
var overviewHeight = $('#overviewMiniView').attr('height');
|
const overviewHeight = $('#overviewMiniView').attr('height');
|
||||||
var viewBoxX = portX / windowWidth * overviewWidth;
|
const viewBoxX = portX / windowWidth * overviewWidth;
|
||||||
var viewBoxY = portY / windowHeight * overviewHeight;
|
const viewBoxY = portY / windowHeight * overviewHeight;
|
||||||
var viewBoxWidth = portWidth / windowWidth * overviewWidth;
|
const viewBoxWidth = portWidth / windowWidth * overviewWidth;
|
||||||
var viewBoxHeight = portHeight / windowHeight * overviewHeight;
|
const viewBoxHeight = portHeight / windowHeight * overviewHeight;
|
||||||
$('#overview_window_view_box').css('min-width', viewBoxWidth + 'px');
|
$('#overview_window_view_box').css('min-width', viewBoxWidth + 'px');
|
||||||
$('#overview_window_view_box').css('min-height', viewBoxHeight + 'px');
|
$('#overview_window_view_box').css('min-height', viewBoxHeight + 'px');
|
||||||
$('#overview_window_view_box').css('top', viewBoxY + 'px');
|
$('#overview_window_view_box').css('top', viewBoxY + 'px');
|
||||||
|
@ -58,11 +60,11 @@ var svgEditorExtension_overview_window = (function () {
|
||||||
$('#workarea').resize(updateViewBox);
|
$('#workarea').resize(updateViewBox);
|
||||||
updateViewBox(); // Compensate for changes in zoom and canvas size.
|
updateViewBox(); // Compensate for changes in zoom and canvas size.
|
||||||
|
|
||||||
var updateViewDimensions = function updateViewDimensions() {
|
const updateViewDimensions = function () {
|
||||||
var viewWidth = $('#svgroot').attr('width');
|
const viewWidth = $('#svgroot').attr('width');
|
||||||
var viewHeight = $('#svgroot').attr('height');
|
const viewHeight = $('#svgroot').attr('height');
|
||||||
var viewX = 640;
|
let viewX = 640;
|
||||||
var viewY = 480;
|
let viewY = 480;
|
||||||
|
|
||||||
if (isIE()) {
|
if (isIE()) {
|
||||||
// This has only been tested with Firefox 10 and IE 9 (without chrome frame).
|
// This has only been tested with Firefox 10 and IE 9 (without chrome frame).
|
||||||
|
@ -75,8 +77,8 @@ var svgEditorExtension_overview_window = (function () {
|
||||||
viewY = 0;
|
viewY = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
var svgWidthOld = $('#overviewMiniView').attr('width');
|
const svgWidthOld = $('#overviewMiniView').attr('width');
|
||||||
var svgHeightNew = viewHeight / viewWidth * svgWidthOld;
|
const svgHeightNew = viewHeight / viewWidth * svgWidthOld;
|
||||||
$('#overviewMiniView').attr('viewBox', viewX + ' ' + viewY + ' ' + viewWidth + ' ' + viewHeight);
|
$('#overviewMiniView').attr('viewBox', viewX + ' ' + viewY + ' ' + viewWidth + ' ' + viewHeight);
|
||||||
$('#overviewMiniView').attr('height', svgHeightNew);
|
$('#overviewMiniView').attr('height', svgHeightNew);
|
||||||
updateViewBox();
|
updateViewBox();
|
||||||
|
@ -86,15 +88,15 @@ var svgEditorExtension_overview_window = (function () {
|
||||||
|
|
||||||
overviewWindowGlobals.viewBoxDragging = false;
|
overviewWindowGlobals.viewBoxDragging = false;
|
||||||
|
|
||||||
var updateViewPortFromViewBox = function updateViewPortFromViewBox() {
|
const updateViewPortFromViewBox = function () {
|
||||||
var windowWidth = Number.parseFloat($('#svgcanvas').css('width'));
|
const windowWidth = Number.parseFloat($('#svgcanvas').css('width'));
|
||||||
var windowHeight = Number.parseFloat($('#svgcanvas').css('height'));
|
const windowHeight = Number.parseFloat($('#svgcanvas').css('height'));
|
||||||
var overviewWidth = $('#overviewMiniView').attr('width');
|
const overviewWidth = $('#overviewMiniView').attr('width');
|
||||||
var overviewHeight = $('#overviewMiniView').attr('height');
|
const overviewHeight = $('#overviewMiniView').attr('height');
|
||||||
var viewBoxX = Number.parseFloat($('#overview_window_view_box').css('left'));
|
const viewBoxX = Number.parseFloat($('#overview_window_view_box').css('left'));
|
||||||
var viewBoxY = Number.parseFloat($('#overview_window_view_box').css('top'));
|
const viewBoxY = Number.parseFloat($('#overview_window_view_box').css('top'));
|
||||||
var portX = viewBoxX / overviewWidth * windowWidth;
|
const portX = viewBoxX / overviewWidth * windowWidth;
|
||||||
var portY = viewBoxY / overviewHeight * windowHeight;
|
const portY = viewBoxY / overviewHeight * windowHeight;
|
||||||
$('#workarea').scrollLeft(portX);
|
$('#workarea').scrollLeft(portX);
|
||||||
$('#workarea').scrollTop(portY);
|
$('#workarea').scrollTop(portY);
|
||||||
};
|
};
|
||||||
|
@ -102,23 +104,26 @@ var svgEditorExtension_overview_window = (function () {
|
||||||
$('#overview_window_view_box').draggable({
|
$('#overview_window_view_box').draggable({
|
||||||
containment: 'parent',
|
containment: 'parent',
|
||||||
drag: updateViewPortFromViewBox,
|
drag: updateViewPortFromViewBox,
|
||||||
start: function start() {
|
|
||||||
|
start() {
|
||||||
overviewWindowGlobals.viewBoxDragging = true;
|
overviewWindowGlobals.viewBoxDragging = true;
|
||||||
},
|
},
|
||||||
stop: function stop() {
|
|
||||||
|
stop() {
|
||||||
overviewWindowGlobals.viewBoxDragging = false;
|
overviewWindowGlobals.viewBoxDragging = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
$('#overviewMiniView').click(function (evt) {
|
$('#overviewMiniView').click(function (evt) {
|
||||||
// Firefox doesn't support evt.offsetX and evt.offsetY.
|
// Firefox doesn't support evt.offsetX and evt.offsetY.
|
||||||
var mouseX = evt.offsetX || evt.originalEvent.layerX;
|
const mouseX = evt.offsetX || evt.originalEvent.layerX;
|
||||||
var mouseY = evt.offsetY || evt.originalEvent.layerY;
|
const mouseY = evt.offsetY || evt.originalEvent.layerY;
|
||||||
var overviewWidth = $('#overviewMiniView').attr('width');
|
const overviewWidth = $('#overviewMiniView').attr('width');
|
||||||
var overviewHeight = $('#overviewMiniView').attr('height');
|
const overviewHeight = $('#overviewMiniView').attr('height');
|
||||||
var viewBoxWidth = Number.parseFloat($('#overview_window_view_box').css('min-width'));
|
const viewBoxWidth = Number.parseFloat($('#overview_window_view_box').css('min-width'));
|
||||||
var viewBoxHeight = Number.parseFloat($('#overview_window_view_box').css('min-height'));
|
const viewBoxHeight = Number.parseFloat($('#overview_window_view_box').css('min-height'));
|
||||||
var viewBoxX = mouseX - 0.5 * viewBoxWidth;
|
let viewBoxX = mouseX - 0.5 * viewBoxWidth;
|
||||||
var viewBoxY = mouseY - 0.5 * viewBoxHeight; // deal with constraints
|
let viewBoxY = mouseY - 0.5 * viewBoxHeight; // deal with constraints
|
||||||
|
|
||||||
if (viewBoxX < 0) {
|
if (viewBoxX < 0) {
|
||||||
viewBoxX = 0;
|
viewBoxX = 0;
|
||||||
|
@ -146,6 +151,7 @@ var svgEditorExtension_overview_window = (function () {
|
||||||
workareaResized: updateViewBox
|
workareaResized: updateViewBox
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extOverview_window;
|
return extOverview_window;
|
||||||
|
|
|
@ -1,42 +1,6 @@
|
||||||
var svgEditorExtension_panning = (function () {
|
var svgEditorExtension_panning = (function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
||||||
try {
|
|
||||||
var info = gen[key](arg);
|
|
||||||
var value = info.value;
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (info.done) {
|
|
||||||
resolve(value);
|
|
||||||
} else {
|
|
||||||
Promise.resolve(value).then(_next, _throw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _asyncToGenerator(fn) {
|
|
||||||
return function () {
|
|
||||||
var self = this,
|
|
||||||
args = arguments;
|
|
||||||
return new Promise(function (resolve, reject) {
|
|
||||||
var gen = fn.apply(self, args);
|
|
||||||
|
|
||||||
function _next(value) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _throw(err) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
||||||
}
|
|
||||||
|
|
||||||
_next(undefined);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @file ext-panning.js
|
* @file ext-panning.js
|
||||||
*
|
*
|
||||||
|
@ -51,40 +15,32 @@ var svgEditorExtension_panning = (function () {
|
||||||
*/
|
*/
|
||||||
var extPanning = {
|
var extPanning = {
|
||||||
name: 'panning',
|
name: 'panning',
|
||||||
init: function init(_ref) {
|
|
||||||
var _this = this;
|
|
||||||
|
|
||||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
async init({
|
||||||
var importLocale, strings, svgEditor, svgCanvas, buttons;
|
importLocale
|
||||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
}) {
|
||||||
while (1) {
|
const strings = await importLocale();
|
||||||
switch (_context.prev = _context.next) {
|
const svgEditor = this;
|
||||||
case 0:
|
const svgCanvas = svgEditor.canvas;
|
||||||
importLocale = _ref.importLocale;
|
const buttons = [{
|
||||||
_context.next = 3;
|
|
||||||
return importLocale();
|
|
||||||
|
|
||||||
case 3:
|
|
||||||
strings = _context.sent;
|
|
||||||
svgEditor = _this;
|
|
||||||
svgCanvas = svgEditor.canvas;
|
|
||||||
buttons = [{
|
|
||||||
id: 'ext-panning',
|
id: 'ext-panning',
|
||||||
icon: svgEditor.curConfig.extIconsPath + 'panning.png',
|
icon: svgEditor.curConfig.extIconsPath + 'panning.png',
|
||||||
type: 'mode',
|
type: 'mode',
|
||||||
events: {
|
events: {
|
||||||
click: function click() {
|
click() {
|
||||||
svgCanvas.setMode('ext-panning');
|
svgCanvas.setMode('ext-panning');
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
return _context.abrupt("return", {
|
return {
|
||||||
name: strings.name,
|
name: strings.name,
|
||||||
svgicons: svgEditor.curConfig.extIconsPath + 'ext-panning.xml',
|
svgicons: svgEditor.curConfig.extIconsPath + 'ext-panning.xml',
|
||||||
buttons: strings.buttons.map(function (button, i) {
|
buttons: strings.buttons.map((button, i) => {
|
||||||
return Object.assign(buttons[i], button);
|
return Object.assign(buttons[i], button);
|
||||||
}),
|
}),
|
||||||
mouseDown: function mouseDown() {
|
|
||||||
|
mouseDown() {
|
||||||
if (svgCanvas.getMode() === 'ext-panning') {
|
if (svgCanvas.getMode() === 'ext-panning') {
|
||||||
svgEditor.setPanning(true);
|
svgEditor.setPanning(true);
|
||||||
return {
|
return {
|
||||||
|
@ -94,7 +50,8 @@ var svgEditorExtension_panning = (function () {
|
||||||
|
|
||||||
return undefined;
|
return undefined;
|
||||||
},
|
},
|
||||||
mouseUp: function mouseUp() {
|
|
||||||
|
mouseUp() {
|
||||||
if (svgCanvas.getMode() === 'ext-panning') {
|
if (svgCanvas.getMode() === 'ext-panning') {
|
||||||
svgEditor.setPanning(false);
|
svgEditor.setPanning(false);
|
||||||
return {
|
return {
|
||||||
|
@ -105,16 +62,10 @@ var svgEditorExtension_panning = (function () {
|
||||||
|
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
case 8:
|
};
|
||||||
case "end":
|
|
||||||
return _context.stop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, _callee);
|
|
||||||
}))();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extPanning;
|
return extPanning;
|
||||||
|
|
|
@ -5,33 +5,41 @@ var svgEditorExtension_php_savefile = (function () {
|
||||||
// handler as in "ext-server_opensave.js" (and in savefile.php)
|
// handler as in "ext-server_opensave.js" (and in savefile.php)
|
||||||
var extPhp_savefile = {
|
var extPhp_savefile = {
|
||||||
name: 'php_savefile',
|
name: 'php_savefile',
|
||||||
init: function init(_ref) {
|
|
||||||
var $ = _ref.$;
|
init({
|
||||||
var svgEditor = this;
|
$
|
||||||
var extPath = svgEditor.curConfig.extPath,
|
}) {
|
||||||
svgCanvas = svgEditor.canvas;
|
const svgEditor = this;
|
||||||
|
const {
|
||||||
|
curConfig: {
|
||||||
|
extPath
|
||||||
|
},
|
||||||
|
canvas: svgCanvas
|
||||||
|
} = svgEditor;
|
||||||
/**
|
/**
|
||||||
* Get file name out of SVGEdit document title.
|
* Get file name out of SVGEdit document title.
|
||||||
* @returns {string}
|
* @returns {string}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
function getFileNameFromTitle() {
|
function getFileNameFromTitle() {
|
||||||
var title = svgCanvas.getDocumentTitle();
|
const title = svgCanvas.getDocumentTitle();
|
||||||
return title.trim();
|
return title.trim();
|
||||||
}
|
}
|
||||||
|
|
||||||
var saveSvgAction = extPath + 'savefile.php';
|
const saveSvgAction = extPath + 'savefile.php';
|
||||||
svgEditor.setCustomHandlers({
|
svgEditor.setCustomHandlers({
|
||||||
save: function save(win, data) {
|
save(win, data) {
|
||||||
var svg = '<?xml version="1.0" encoding="UTF-8"?>\n' + data,
|
const svg = '<?xml version="1.0" encoding="UTF-8"?>\n' + data,
|
||||||
filename = getFileNameFromTitle();
|
filename = getFileNameFromTitle();
|
||||||
$.post(saveSvgAction, {
|
$.post(saveSvgAction, {
|
||||||
output_svg: svg,
|
output_svg: svg,
|
||||||
filename: filename
|
filename
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extPhp_savefile;
|
return extPhp_savefile;
|
||||||
|
|
|
@ -1,98 +1,6 @@
|
||||||
var svgEditorExtension_placemark = (function () {
|
var svgEditorExtension_placemark = (function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
||||||
try {
|
|
||||||
var info = gen[key](arg);
|
|
||||||
var value = info.value;
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (info.done) {
|
|
||||||
resolve(value);
|
|
||||||
} else {
|
|
||||||
Promise.resolve(value).then(_next, _throw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _asyncToGenerator(fn) {
|
|
||||||
return function () {
|
|
||||||
var self = this,
|
|
||||||
args = arguments;
|
|
||||||
return new Promise(function (resolve, reject) {
|
|
||||||
var gen = fn.apply(self, args);
|
|
||||||
|
|
||||||
function _next(value) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _throw(err) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
||||||
}
|
|
||||||
|
|
||||||
_next(undefined);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function _slicedToArray(arr, i) {
|
|
||||||
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
||||||
}
|
|
||||||
|
|
||||||
function _arrayWithHoles(arr) {
|
|
||||||
if (Array.isArray(arr)) return arr;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _iterableToArrayLimit(arr, i) {
|
|
||||||
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
|
|
||||||
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"] != null) _i["return"]();
|
|
||||||
} finally {
|
|
||||||
if (_d) throw _e;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return _arr;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _unsupportedIterableToArray(o, minLen) {
|
|
||||||
if (!o) return;
|
|
||||||
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
||||||
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
||||||
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
||||||
if (n === "Map" || n === "Set") return Array.from(o);
|
|
||||||
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _arrayLikeToArray(arr, len) {
|
|
||||||
if (len == null || len > arr.length) len = arr.length;
|
|
||||||
|
|
||||||
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
||||||
|
|
||||||
return arr2;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _nonIterableRest() {
|
|
||||||
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @file ext-placemark.js
|
* @file ext-placemark.js
|
||||||
*
|
*
|
||||||
|
@ -102,269 +10,25 @@ var svgEditorExtension_placemark = (function () {
|
||||||
*/
|
*/
|
||||||
var extPlacemark = {
|
var extPlacemark = {
|
||||||
name: 'placemark',
|
name: 'placemark',
|
||||||
init: function init(S) {
|
|
||||||
var _this = this;
|
|
||||||
|
|
||||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
async init(S) {
|
||||||
var svgEditor, svgCanvas, addElem, $, importLocale, selElems, started, newPM, strings, markerTypes, showPanel, getLinked, updateText, updateFont, addMarker, setMarker, colorChanged, updateReferences, setArrowFromButton, getTitle, addMarkerButtons, buttons, contextTools;
|
const svgEditor = this;
|
||||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
const svgCanvas = svgEditor.canvas;
|
||||||
while (1) {
|
const addElem = svgCanvas.addSVGElementFromJson;
|
||||||
switch (_context.prev = _context.next) {
|
const {
|
||||||
case 0:
|
$,
|
||||||
addMarkerButtons = function _addMarkerButtons(buttons) {
|
importLocale
|
||||||
Object.keys(markerTypes).forEach(function (id) {
|
} = S; // {svgcontent},
|
||||||
var title = getTitle(String(id));
|
|
||||||
buttons.push({
|
|
||||||
id: 'placemark_marker_' + id,
|
|
||||||
svgicon: id,
|
|
||||||
icon: svgEditor.curConfig.extIconsPath + 'markers-' + id + '.png',
|
|
||||||
title: title,
|
|
||||||
type: 'context',
|
|
||||||
events: {
|
|
||||||
click: setArrowFromButton
|
|
||||||
},
|
|
||||||
panel: 'placemark_panel',
|
|
||||||
list: 'placemark_marker',
|
|
||||||
isDefault: id === 'leftarrow'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return buttons;
|
|
||||||
};
|
|
||||||
|
|
||||||
getTitle = function _getTitle(id) {
|
let selElems, // editingitex = false,
|
||||||
var langList = strings.langList;
|
// svgdoc = S.svgroot.parentNode.ownerDocument,
|
||||||
var item = langList.find(function (itm) {
|
started, newPM; // edg = 0,
|
||||||
return itm.id === id;
|
// newFOG, newFOGParent, newDef, newImageName, newMaskID,
|
||||||
});
|
// undoCommand = 'Not image',
|
||||||
return item ? item.title : id;
|
// modeChangeG, ccZoom, wEl, hEl, wOffset, hOffset, ccRgbEl, brushW, brushH;
|
||||||
};
|
|
||||||
|
|
||||||
setArrowFromButton = function _setArrowFromButton(ev) {
|
const strings = await importLocale();
|
||||||
var parts = this.id.split('_');
|
const markerTypes = {
|
||||||
var val = parts[2];
|
|
||||||
|
|
||||||
if (parts[3]) {
|
|
||||||
val += '_' + parts[3];
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#placemark_marker').attr('value', val);
|
|
||||||
};
|
|
||||||
|
|
||||||
updateReferences = function _updateReferences(el) {
|
|
||||||
var id = 'placemark_marker_' + el.id;
|
|
||||||
var markerName = 'marker-start';
|
|
||||||
var marker = getLinked(el, markerName);
|
|
||||||
|
|
||||||
if (!marker || !marker.attributes["class"]) {
|
|
||||||
return;
|
|
||||||
} // not created by this extension
|
|
||||||
|
|
||||||
|
|
||||||
var url = el.getAttribute(markerName);
|
|
||||||
|
|
||||||
if (url) {
|
|
||||||
var len = el.id.length;
|
|
||||||
var linkid = url.substr(-len - 1, len);
|
|
||||||
|
|
||||||
if (el.id !== linkid) {
|
|
||||||
var val = $('#placemark_marker').attr('value') || 'leftarrow';
|
|
||||||
addMarker(id, val);
|
|
||||||
svgCanvas.changeSelectedAttribute(markerName, 'url(#' + id + ')');
|
|
||||||
svgCanvas.call('changed', selElems);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
colorChanged = function _colorChanged(el) {
|
|
||||||
var color = el.getAttribute('stroke');
|
|
||||||
var marker = getLinked(el, 'marker-start'); // console.log(marker);
|
|
||||||
|
|
||||||
if (!marker) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!marker.attributes["class"]) {
|
|
||||||
return;
|
|
||||||
} // not created by this extension
|
|
||||||
|
|
||||||
|
|
||||||
var ch = marker.lastElementChild;
|
|
||||||
|
|
||||||
if (!ch) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var curfill = ch.getAttribute('fill');
|
|
||||||
var curstroke = ch.getAttribute('stroke');
|
|
||||||
|
|
||||||
if (curfill && curfill !== 'none') {
|
|
||||||
ch.setAttribute('fill', color);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (curstroke && curstroke !== 'none') {
|
|
||||||
ch.setAttribute('stroke', color);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
setMarker = function _setMarker(el, val) {
|
|
||||||
var markerName = 'marker-start';
|
|
||||||
var marker = getLinked(el, markerName);
|
|
||||||
|
|
||||||
if (marker) {
|
|
||||||
$(marker).remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
el.removeAttribute(markerName);
|
|
||||||
|
|
||||||
if (val === 'nomarker') {
|
|
||||||
svgCanvas.call('changed', [el]);
|
|
||||||
return;
|
|
||||||
} // Set marker on element
|
|
||||||
|
|
||||||
|
|
||||||
var id = 'placemark_marker_' + el.id;
|
|
||||||
addMarker(id, val);
|
|
||||||
el.setAttribute(markerName, 'url(#' + id + ')');
|
|
||||||
svgCanvas.call('changed', [el]);
|
|
||||||
};
|
|
||||||
|
|
||||||
addMarker = function _addMarker(id, val) {
|
|
||||||
var marker = svgCanvas.getElem(id);
|
|
||||||
|
|
||||||
if (marker) {
|
|
||||||
return undefined;
|
|
||||||
} // console.log(id);
|
|
||||||
|
|
||||||
|
|
||||||
if (val === '' || val === 'nomarker') {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
var color = svgCanvas.getColor('stroke'); // NOTE: Safari didn't like a negative value in viewBox
|
|
||||||
// so we use a standardized 0 0 100 100
|
|
||||||
// with 50 50 being mapped to the marker position
|
|
||||||
|
|
||||||
var scale = 2; // parseFloat($('#marker_size').val());
|
|
||||||
|
|
||||||
var strokeWidth = 10;
|
|
||||||
var refX = 50;
|
|
||||||
var refY = 50;
|
|
||||||
var viewBox = '0 0 100 100';
|
|
||||||
var markerWidth = 5 * scale;
|
|
||||||
var markerHeight = 5 * scale;
|
|
||||||
var seType = val;
|
|
||||||
|
|
||||||
if (!markerTypes[seType]) {
|
|
||||||
return undefined;
|
|
||||||
} // an unknown type!
|
|
||||||
// positional markers(arrows) at end of line
|
|
||||||
|
|
||||||
|
|
||||||
if (seType.includes('left')) refX = 0;
|
|
||||||
if (seType.includes('right')) refX = 100; // create a generic marker
|
|
||||||
|
|
||||||
marker = addElem({
|
|
||||||
element: 'marker',
|
|
||||||
attr: {
|
|
||||||
id: id,
|
|
||||||
markerUnits: 'strokeWidth',
|
|
||||||
orient: 'auto',
|
|
||||||
style: 'pointer-events:none',
|
|
||||||
"class": seType
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var mel = addElem(markerTypes[seType]);
|
|
||||||
var fillcolor = seType.substr(-2) === '_o' ? 'none' : color;
|
|
||||||
mel.setAttribute('fill', fillcolor);
|
|
||||||
mel.setAttribute('stroke', color);
|
|
||||||
mel.setAttribute('stroke-width', strokeWidth);
|
|
||||||
marker.append(mel);
|
|
||||||
marker.setAttribute('viewBox', viewBox);
|
|
||||||
marker.setAttribute('markerWidth', markerWidth);
|
|
||||||
marker.setAttribute('markerHeight', markerHeight);
|
|
||||||
marker.setAttribute('refX', refX);
|
|
||||||
marker.setAttribute('refY', refY);
|
|
||||||
svgCanvas.findDefs().append(marker);
|
|
||||||
return marker;
|
|
||||||
};
|
|
||||||
|
|
||||||
updateFont = function _updateFont(font) {
|
|
||||||
font = font.split(' ');
|
|
||||||
var fontSize = Number.parseInt(font.pop());
|
|
||||||
font = font.join(' ');
|
|
||||||
selElems.forEach(function (elem) {
|
|
||||||
if (elem && elem.getAttribute('class').includes('placemark')) {
|
|
||||||
$(elem).children().each(function (_, i) {
|
|
||||||
var _i$id$split3 = i.id.split('_'),
|
|
||||||
_i$id$split4 = _slicedToArray(_i$id$split3, 3),
|
|
||||||
type = _i$id$split4[2];
|
|
||||||
|
|
||||||
if (type === 'txt') {
|
|
||||||
$(i).attr({
|
|
||||||
'font-family': font,
|
|
||||||
'font-size': fontSize
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
updateText = function _updateText(txt) {
|
|
||||||
var items = txt.split(';');
|
|
||||||
selElems.forEach(function (elem) {
|
|
||||||
if (elem && elem.getAttribute('class').includes('placemark')) {
|
|
||||||
$(elem).children().each(function (_, i) {
|
|
||||||
var _i$id$split = i.id.split('_'),
|
|
||||||
_i$id$split2 = _slicedToArray(_i$id$split, 4),
|
|
||||||
type = _i$id$split2[2],
|
|
||||||
n = _i$id$split2[3];
|
|
||||||
|
|
||||||
if (type === 'txt') {
|
|
||||||
$(i).text(items[n]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
getLinked = function _getLinked(elem, attr) {
|
|
||||||
if (!elem) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
var str = elem.getAttribute(attr);
|
|
||||||
|
|
||||||
if (!str) {
|
|
||||||
return null;
|
|
||||||
} // const m = str.match(/\(#(?<id>.+)\)/);
|
|
||||||
// if (!m || !m.groups.id) {
|
|
||||||
|
|
||||||
|
|
||||||
var m = str.match(/\(#(.*)\)/);
|
|
||||||
|
|
||||||
if (!m || m.length !== 2) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return svgCanvas.getElem(m[1]); // return svgCanvas.getElem(m.groups.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
showPanel = function _showPanel(on) {
|
|
||||||
$('#placemark_panel').toggle(on);
|
|
||||||
};
|
|
||||||
|
|
||||||
svgEditor = _this;
|
|
||||||
svgCanvas = svgEditor.canvas;
|
|
||||||
addElem = svgCanvas.addSVGElementFromJson;
|
|
||||||
$ = S.$, importLocale = S.importLocale; // {svgcontent},
|
|
||||||
|
|
||||||
_context.next = 17;
|
|
||||||
return importLocale();
|
|
||||||
|
|
||||||
case 17:
|
|
||||||
strings = _context.sent;
|
|
||||||
markerTypes = {
|
|
||||||
nomarker: {},
|
nomarker: {},
|
||||||
forwardslash: {
|
forwardslash: {
|
||||||
element: 'path',
|
element: 'path',
|
||||||
|
@ -430,7 +94,7 @@ var svgEditorExtension_placemark = (function () {
|
||||||
}
|
}
|
||||||
}; // duplicate shapes to support unfilled (open) marker types with an _o suffix
|
}; // duplicate shapes to support unfilled (open) marker types with an _o suffix
|
||||||
|
|
||||||
['leftarrow', 'rightarrow', 'box', 'star', 'mcircle', 'triangle'].forEach(function (v) {
|
['leftarrow', 'rightarrow', 'box', 'star', 'mcircle', 'triangle'].forEach(v => {
|
||||||
markerTypes[v + '_o'] = markerTypes[v];
|
markerTypes[v + '_o'] = markerTypes[v];
|
||||||
});
|
});
|
||||||
/**
|
/**
|
||||||
|
@ -439,19 +103,320 @@ var svgEditorExtension_placemark = (function () {
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
buttons = [{
|
function showPanel(on) {
|
||||||
|
$('#placemark_panel').toggle(on);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {Element} elem - A graphic element will have an attribute like marker-start
|
||||||
|
* @param {"marker-start"|"marker-mid"|"marker-end"} attr
|
||||||
|
* @returns {Element} The marker element that is linked to the graphic element
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function getLinked(elem, attr) {
|
||||||
|
if (!elem) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const str = elem.getAttribute(attr);
|
||||||
|
|
||||||
|
if (!str) {
|
||||||
|
return null;
|
||||||
|
} // const m = str.match(/\(#(?<id>.+)\)/);
|
||||||
|
// if (!m || !m.groups.id) {
|
||||||
|
|
||||||
|
|
||||||
|
const m = str.match(/\(#(.*)\)/);
|
||||||
|
|
||||||
|
if (!m || m.length !== 2) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return svgCanvas.getElem(m[1]); // return svgCanvas.getElem(m.groups.id);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Called when text is changed.
|
||||||
|
* @param {string} txt
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function updateText(txt) {
|
||||||
|
const items = txt.split(';');
|
||||||
|
selElems.forEach(elem => {
|
||||||
|
if (elem && elem.getAttribute('class').includes('placemark')) {
|
||||||
|
$(elem).children().each((_, i) => {
|
||||||
|
const [,, type, n] = i.id.split('_');
|
||||||
|
|
||||||
|
if (type === 'txt') {
|
||||||
|
$(i).text(items[n]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Called when font is changed.
|
||||||
|
* @param {string} font
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function updateFont(font) {
|
||||||
|
font = font.split(' ');
|
||||||
|
const fontSize = Number.parseInt(font.pop());
|
||||||
|
font = font.join(' ');
|
||||||
|
selElems.forEach(elem => {
|
||||||
|
if (elem && elem.getAttribute('class').includes('placemark')) {
|
||||||
|
$(elem).children().each((_, i) => {
|
||||||
|
const [,, type] = i.id.split('_');
|
||||||
|
|
||||||
|
if (type === 'txt') {
|
||||||
|
$(i).attr({
|
||||||
|
'font-family': font,
|
||||||
|
'font-size': fontSize
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {string} id
|
||||||
|
* @param {""|"\\nomarker"|"nomarker"|"leftarrow"|"rightarrow"|"textmarker"|"textmarker_top"|"textmarker_bottom"|"forwardslash"|"reverseslash"|"verticalslash"|"box"|"star"|"xmark"|"triangle"|"mcircle"} val
|
||||||
|
* @returns {SVGMarkerElement}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function addMarker(id, val) {
|
||||||
|
let marker = svgCanvas.getElem(id);
|
||||||
|
|
||||||
|
if (marker) {
|
||||||
|
return undefined;
|
||||||
|
} // console.log(id);
|
||||||
|
|
||||||
|
|
||||||
|
if (val === '' || val === 'nomarker') {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const color = svgCanvas.getColor('stroke'); // NOTE: Safari didn't like a negative value in viewBox
|
||||||
|
// so we use a standardized 0 0 100 100
|
||||||
|
// with 50 50 being mapped to the marker position
|
||||||
|
|
||||||
|
const scale = 2; // parseFloat($('#marker_size').val());
|
||||||
|
|
||||||
|
const strokeWidth = 10;
|
||||||
|
let refX = 50;
|
||||||
|
const refY = 50;
|
||||||
|
const viewBox = '0 0 100 100';
|
||||||
|
const markerWidth = 5 * scale;
|
||||||
|
const markerHeight = 5 * scale;
|
||||||
|
const seType = val;
|
||||||
|
|
||||||
|
if (!markerTypes[seType]) {
|
||||||
|
return undefined;
|
||||||
|
} // an unknown type!
|
||||||
|
// positional markers(arrows) at end of line
|
||||||
|
|
||||||
|
|
||||||
|
if (seType.includes('left')) refX = 0;
|
||||||
|
if (seType.includes('right')) refX = 100; // create a generic marker
|
||||||
|
|
||||||
|
marker = addElem({
|
||||||
|
element: 'marker',
|
||||||
|
attr: {
|
||||||
|
id,
|
||||||
|
markerUnits: 'strokeWidth',
|
||||||
|
orient: 'auto',
|
||||||
|
style: 'pointer-events:none',
|
||||||
|
class: seType
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const mel = addElem(markerTypes[seType]);
|
||||||
|
const fillcolor = seType.substr(-2) === '_o' ? 'none' : color;
|
||||||
|
mel.setAttribute('fill', fillcolor);
|
||||||
|
mel.setAttribute('stroke', color);
|
||||||
|
mel.setAttribute('stroke-width', strokeWidth);
|
||||||
|
marker.append(mel);
|
||||||
|
marker.setAttribute('viewBox', viewBox);
|
||||||
|
marker.setAttribute('markerWidth', markerWidth);
|
||||||
|
marker.setAttribute('markerHeight', markerHeight);
|
||||||
|
marker.setAttribute('refX', refX);
|
||||||
|
marker.setAttribute('refY', refY);
|
||||||
|
svgCanvas.findDefs().append(marker);
|
||||||
|
return marker;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {Element} el
|
||||||
|
* @param {string} val
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function setMarker(el, val) {
|
||||||
|
const markerName = 'marker-start';
|
||||||
|
const marker = getLinked(el, markerName);
|
||||||
|
|
||||||
|
if (marker) {
|
||||||
|
$(marker).remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
el.removeAttribute(markerName);
|
||||||
|
|
||||||
|
if (val === 'nomarker') {
|
||||||
|
svgCanvas.call('changed', [el]);
|
||||||
|
return;
|
||||||
|
} // Set marker on element
|
||||||
|
|
||||||
|
|
||||||
|
const id = 'placemark_marker_' + el.id;
|
||||||
|
addMarker(id, val);
|
||||||
|
el.setAttribute(markerName, 'url(#' + id + ')');
|
||||||
|
svgCanvas.call('changed', [el]);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Called when the main system modifies an object. This routine changes
|
||||||
|
* the associated markers to be the same color.
|
||||||
|
* @param {Element} el
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function colorChanged(el) {
|
||||||
|
const color = el.getAttribute('stroke');
|
||||||
|
const marker = getLinked(el, 'marker-start'); // console.log(marker);
|
||||||
|
|
||||||
|
if (!marker) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!marker.attributes.class) {
|
||||||
|
return;
|
||||||
|
} // not created by this extension
|
||||||
|
|
||||||
|
|
||||||
|
const ch = marker.lastElementChild;
|
||||||
|
|
||||||
|
if (!ch) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const curfill = ch.getAttribute('fill');
|
||||||
|
const curstroke = ch.getAttribute('stroke');
|
||||||
|
|
||||||
|
if (curfill && curfill !== 'none') {
|
||||||
|
ch.setAttribute('fill', color);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (curstroke && curstroke !== 'none') {
|
||||||
|
ch.setAttribute('stroke', color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Called when the main system creates or modifies an object.
|
||||||
|
* Its primary purpose is to create new markers for cloned objects.
|
||||||
|
* @param {Element} el
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function updateReferences(el) {
|
||||||
|
const id = 'placemark_marker_' + el.id;
|
||||||
|
const markerName = 'marker-start';
|
||||||
|
const marker = getLinked(el, markerName);
|
||||||
|
|
||||||
|
if (!marker || !marker.attributes.class) {
|
||||||
|
return;
|
||||||
|
} // not created by this extension
|
||||||
|
|
||||||
|
|
||||||
|
const url = el.getAttribute(markerName);
|
||||||
|
|
||||||
|
if (url) {
|
||||||
|
const len = el.id.length;
|
||||||
|
const linkid = url.substr(-len - 1, len);
|
||||||
|
|
||||||
|
if (el.id !== linkid) {
|
||||||
|
const val = $('#placemark_marker').attr('value') || 'leftarrow';
|
||||||
|
addMarker(id, val);
|
||||||
|
svgCanvas.changeSelectedAttribute(markerName, 'url(#' + id + ')');
|
||||||
|
svgCanvas.call('changed', selElems);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {Event} ev
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function setArrowFromButton(ev) {
|
||||||
|
const parts = this.id.split('_');
|
||||||
|
let val = parts[2];
|
||||||
|
|
||||||
|
if (parts[3]) {
|
||||||
|
val += '_' + parts[3];
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#placemark_marker').attr('value', val);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {"nomarker"|"leftarrow"|"rightarrow"|"textmarker"|"forwardslash"|"reverseslash"|"verticalslash"|"box"|"star"|"xmark"|"triangle"|"mcircle"} id
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function getTitle(id) {
|
||||||
|
const {
|
||||||
|
langList
|
||||||
|
} = strings;
|
||||||
|
const item = langList.find(itm => {
|
||||||
|
return itm.id === id;
|
||||||
|
});
|
||||||
|
return item ? item.title : id;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Build the toolbar button array from the marker definitions.
|
||||||
|
* @param {module:SVGEditor.Button[]} buttons
|
||||||
|
* @returns {module:SVGEditor.Button[]}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function addMarkerButtons(buttons) {
|
||||||
|
Object.keys(markerTypes).forEach(function (id) {
|
||||||
|
const title = getTitle(String(id));
|
||||||
|
buttons.push({
|
||||||
|
id: 'placemark_marker_' + id,
|
||||||
|
svgicon: id,
|
||||||
|
icon: svgEditor.curConfig.extIconsPath + 'markers-' + id + '.png',
|
||||||
|
title,
|
||||||
|
type: 'context',
|
||||||
|
events: {
|
||||||
|
click: setArrowFromButton
|
||||||
|
},
|
||||||
|
panel: 'placemark_panel',
|
||||||
|
list: 'placemark_marker',
|
||||||
|
isDefault: id === 'leftarrow'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return buttons;
|
||||||
|
}
|
||||||
|
|
||||||
|
const buttons = [{
|
||||||
id: 'tool_placemark',
|
id: 'tool_placemark',
|
||||||
icon: svgEditor.curConfig.extIconsPath + 'placemark.png',
|
icon: svgEditor.curConfig.extIconsPath + 'placemark.png',
|
||||||
type: 'mode',
|
type: 'mode',
|
||||||
position: 12,
|
position: 12,
|
||||||
events: {
|
events: {
|
||||||
click: function click() {
|
click() {
|
||||||
showPanel(true);
|
showPanel(true);
|
||||||
svgCanvas.setMode('placemark');
|
svgCanvas.setMode('placemark');
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
contextTools = [{
|
const contextTools = [{
|
||||||
type: 'button-select',
|
type: 'button-select',
|
||||||
panel: 'placemark_panel',
|
panel: 'placemark_panel',
|
||||||
id: 'placemark_marker',
|
id: 'placemark_marker',
|
||||||
|
@ -466,9 +431,10 @@ var svgEditorExtension_placemark = (function () {
|
||||||
size: 20,
|
size: 20,
|
||||||
defval: '',
|
defval: '',
|
||||||
events: {
|
events: {
|
||||||
change: function change() {
|
change() {
|
||||||
updateText(this.value);
|
updateText(this.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
type: 'input',
|
type: 'input',
|
||||||
|
@ -477,39 +443,42 @@ var svgEditorExtension_placemark = (function () {
|
||||||
size: 7,
|
size: 7,
|
||||||
defval: 'Arial 10',
|
defval: 'Arial 10',
|
||||||
events: {
|
events: {
|
||||||
change: function change() {
|
change() {
|
||||||
updateFont(this.value);
|
updateFont(this.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
return _context.abrupt("return", {
|
return {
|
||||||
name: strings.name,
|
name: strings.name,
|
||||||
svgicons: svgEditor.curConfig.extIconsPath + 'placemark-icons.xml',
|
svgicons: svgEditor.curConfig.extIconsPath + 'placemark-icons.xml',
|
||||||
buttons: addMarkerButtons(strings.buttons.map(function (button, i) {
|
buttons: addMarkerButtons(strings.buttons.map((button, i) => {
|
||||||
return Object.assign(buttons[i], button);
|
return Object.assign(buttons[i], button);
|
||||||
})),
|
})),
|
||||||
context_tools: strings.contextTools.map(function (contextTool, i) {
|
context_tools: strings.contextTools.map((contextTool, i) => {
|
||||||
return Object.assign(contextTools[i], contextTool);
|
return Object.assign(contextTools[i], contextTool);
|
||||||
}),
|
}),
|
||||||
callback: function callback() {
|
|
||||||
|
callback() {
|
||||||
$('#placemark_panel').hide(); // const endChanges = function(){};
|
$('#placemark_panel').hide(); // const endChanges = function(){};
|
||||||
},
|
},
|
||||||
mouseDown: function mouseDown(opts) {
|
|
||||||
|
mouseDown(opts) {
|
||||||
// const rgb = svgCanvas.getColor('fill');
|
// const rgb = svgCanvas.getColor('fill');
|
||||||
var sRgb = svgCanvas.getColor('stroke');
|
const sRgb = svgCanvas.getColor('stroke');
|
||||||
var sWidth = svgCanvas.getStrokeWidth();
|
const sWidth = svgCanvas.getStrokeWidth();
|
||||||
|
|
||||||
if (svgCanvas.getMode() === 'placemark') {
|
if (svgCanvas.getMode() === 'placemark') {
|
||||||
started = true;
|
started = true;
|
||||||
var id = svgCanvas.getNextId();
|
const id = svgCanvas.getNextId();
|
||||||
var items = $('#placemarkText').val().split(';');
|
const items = $('#placemarkText').val().split(';');
|
||||||
var font = $('#placemarkFont').val().split(' ');
|
let font = $('#placemarkFont').val().split(' ');
|
||||||
var fontSize = Number.parseInt(font.pop());
|
const fontSize = Number.parseInt(font.pop());
|
||||||
font = font.join(' ');
|
font = font.join(' ');
|
||||||
var x0 = opts.start_x + 10,
|
const x0 = opts.start_x + 10,
|
||||||
y0 = opts.start_y + 10;
|
y0 = opts.start_y + 10;
|
||||||
var maxlen = 0;
|
let maxlen = 0;
|
||||||
var children = [{
|
const children = [{
|
||||||
element: 'line',
|
element: 'line',
|
||||||
attr: {
|
attr: {
|
||||||
id: id + '_pline_0',
|
id: id + '_pline_0',
|
||||||
|
@ -523,7 +492,7 @@ var svgEditorExtension_placemark = (function () {
|
||||||
y2: y0
|
y2: y0
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
items.forEach(function (i, n) {
|
items.forEach((i, n) => {
|
||||||
maxlen = Math.max(maxlen, i.length);
|
maxlen = Math.max(maxlen, i.length);
|
||||||
children.push({
|
children.push({
|
||||||
element: 'line',
|
element: 'line',
|
||||||
|
@ -576,17 +545,17 @@ var svgEditorExtension_placemark = (function () {
|
||||||
newPM = svgCanvas.addSVGElementFromJson({
|
newPM = svgCanvas.addSVGElementFromJson({
|
||||||
element: 'g',
|
element: 'g',
|
||||||
attr: {
|
attr: {
|
||||||
id: id,
|
id,
|
||||||
"class": 'placemark',
|
class: 'placemark',
|
||||||
fontSize: fontSize,
|
fontSize,
|
||||||
maxlen: maxlen,
|
maxlen,
|
||||||
lines: items.length,
|
lines: items.length,
|
||||||
x: opts.start_x,
|
x: opts.start_x,
|
||||||
y: opts.start_y,
|
y: opts.start_y,
|
||||||
px: opts.start_x,
|
px: opts.start_x,
|
||||||
py: opts.start_y
|
py: opts.start_y
|
||||||
},
|
},
|
||||||
children: children
|
children
|
||||||
});
|
});
|
||||||
setMarker(newPM.firstElementChild, $('#placemark_marker').attr('value') || 'leftarrow');
|
setMarker(newPM.firstElementChild, $('#placemark_marker').attr('value') || 'leftarrow');
|
||||||
return {
|
return {
|
||||||
|
@ -596,36 +565,32 @@ var svgEditorExtension_placemark = (function () {
|
||||||
|
|
||||||
return undefined;
|
return undefined;
|
||||||
},
|
},
|
||||||
mouseMove: function mouseMove(opts) {
|
|
||||||
|
mouseMove(opts) {
|
||||||
if (!started) {
|
if (!started) {
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (svgCanvas.getMode() === 'placemark') {
|
if (svgCanvas.getMode() === 'placemark') {
|
||||||
var x = opts.mouse_x / svgCanvas.getZoom();
|
const x = opts.mouse_x / svgCanvas.getZoom();
|
||||||
var y = opts.mouse_y / svgCanvas.getZoom();
|
const y = opts.mouse_y / svgCanvas.getZoom();
|
||||||
|
const {
|
||||||
var _$$attr = $(newPM).attr(['fontSize', 'maxlen', 'lines', 'px', 'py']),
|
fontSize,
|
||||||
fontSize = _$$attr.fontSize,
|
maxlen,
|
||||||
maxlen = _$$attr.maxlen,
|
lines,
|
||||||
lines = _$$attr.lines,
|
px,
|
||||||
px = _$$attr.px,
|
py
|
||||||
py = _$$attr.py;
|
} = $(newPM).attr(['fontSize', 'maxlen', 'lines', 'px', 'py']);
|
||||||
|
|
||||||
$(newPM).attr({
|
$(newPM).attr({
|
||||||
x: x,
|
x,
|
||||||
y: y
|
y
|
||||||
});
|
});
|
||||||
$(newPM).children().each(function (_, i) {
|
$(newPM).children().each((_, i) => {
|
||||||
var _i$id$split5 = i.id.split('_'),
|
const [,, type, n] = i.id.split('_');
|
||||||
_i$id$split6 = _slicedToArray(_i$id$split5, 4),
|
const y0 = y + (fontSize + 6) * n,
|
||||||
type = _i$id$split6[2],
|
|
||||||
n = _i$id$split6[3];
|
|
||||||
|
|
||||||
var y0 = y + (fontSize + 6) * n,
|
|
||||||
x0 = x + maxlen * fontSize * 0.5 + fontSize;
|
x0 = x + maxlen * fontSize * 0.5 + fontSize;
|
||||||
var nx = x + (x0 - x) / 2 < px ? x0 : x;
|
const nx = x + (x0 - x) / 2 < px ? x0 : x;
|
||||||
var ny = y + (fontSize + 6) * (lines - 1) / 2 < py ? y + (fontSize + 6) * (lines - 1) : y;
|
const ny = y + (fontSize + 6) * (lines - 1) / 2 < py ? y + (fontSize + 6) * (lines - 1) : y;
|
||||||
|
|
||||||
if (type === 'pline') {
|
if (type === 'pline') {
|
||||||
i.setAttribute('x2', nx);
|
i.setAttribute('x2', nx);
|
||||||
|
@ -658,14 +623,15 @@ var svgEditorExtension_placemark = (function () {
|
||||||
|
|
||||||
return undefined;
|
return undefined;
|
||||||
},
|
},
|
||||||
mouseUp: function mouseUp() {
|
|
||||||
if (svgCanvas.getMode() === 'placemark') {
|
|
||||||
var _$$attr2 = $(newPM).attr(['x', 'y', 'px', 'py']),
|
|
||||||
x = _$$attr2.x,
|
|
||||||
y = _$$attr2.y,
|
|
||||||
px = _$$attr2.px,
|
|
||||||
py = _$$attr2.py;
|
|
||||||
|
|
||||||
|
mouseUp() {
|
||||||
|
if (svgCanvas.getMode() === 'placemark') {
|
||||||
|
const {
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
px,
|
||||||
|
py
|
||||||
|
} = $(newPM).attr(['x', 'y', 'px', 'py']);
|
||||||
return {
|
return {
|
||||||
keep: x != px && y != py,
|
keep: x != px && y != py,
|
||||||
// eslint-disable-line eqeqeq
|
// eslint-disable-line eqeqeq
|
||||||
|
@ -675,16 +641,15 @@ var svgEditorExtension_placemark = (function () {
|
||||||
|
|
||||||
return undefined;
|
return undefined;
|
||||||
},
|
},
|
||||||
selectedChanged: function selectedChanged(opts) {
|
|
||||||
|
selectedChanged(opts) {
|
||||||
// Use this to update the current selected elements
|
// Use this to update the current selected elements
|
||||||
selElems = opts.elems;
|
selElems = opts.elems;
|
||||||
selElems.forEach(function (elem) {
|
selElems.forEach(elem => {
|
||||||
if (elem && elem.getAttribute('class').includes('placemark')) {
|
if (elem && elem.getAttribute('class').includes('placemark')) {
|
||||||
var txt = [];
|
const txt = [];
|
||||||
$(elem).children().each(function (n, i) {
|
$(elem).children().each((n, i) => {
|
||||||
var _i$id$split7 = i.id.split('_'),
|
const [,, type] = i.id.split('_');
|
||||||
_i$id$split8 = _slicedToArray(_i$id$split7, 3),
|
|
||||||
type = _i$id$split8[2];
|
|
||||||
|
|
||||||
if (type === 'txt') {
|
if (type === 'txt') {
|
||||||
$('#placemarkFont').val(i.getAttribute('font-family') + ' ' + i.getAttribute('font-size'));
|
$('#placemarkFont').val(i.getAttribute('font-family') + ' ' + i.getAttribute('font-size'));
|
||||||
|
@ -698,8 +663,9 @@ var svgEditorExtension_placemark = (function () {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
elementChanged: function elementChanged(opts) {
|
|
||||||
opts.elems.forEach(function (elem) {
|
elementChanged(opts) {
|
||||||
|
opts.elems.forEach(elem => {
|
||||||
if (elem.id.includes('pline_0')) {
|
if (elem.id.includes('pline_0')) {
|
||||||
// need update marker of pline_0
|
// need update marker of pline_0
|
||||||
colorChanged(elem);
|
colorChanged(elem);
|
||||||
|
@ -707,16 +673,10 @@ var svgEditorExtension_placemark = (function () {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
case 23:
|
};
|
||||||
case "end":
|
|
||||||
return _context.stop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, _callee);
|
|
||||||
}))();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extPlacemark;
|
return extPlacemark;
|
||||||
|
|
|
@ -1,42 +1,6 @@
|
||||||
var svgEditorExtension_polygon = (function () {
|
var svgEditorExtension_polygon = (function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
||||||
try {
|
|
||||||
var info = gen[key](arg);
|
|
||||||
var value = info.value;
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (info.done) {
|
|
||||||
resolve(value);
|
|
||||||
} else {
|
|
||||||
Promise.resolve(value).then(_next, _throw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _asyncToGenerator(fn) {
|
|
||||||
return function () {
|
|
||||||
var self = this,
|
|
||||||
args = arguments;
|
|
||||||
return new Promise(function (resolve, reject) {
|
|
||||||
var gen = fn.apply(self, args);
|
|
||||||
|
|
||||||
function _next(value) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _throw(err) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
||||||
}
|
|
||||||
|
|
||||||
_next(undefined);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @file ext-polygon.js
|
* @file ext-polygon.js
|
||||||
*
|
*
|
||||||
|
@ -46,30 +10,40 @@ var svgEditorExtension_polygon = (function () {
|
||||||
*/
|
*/
|
||||||
var extPolygon = {
|
var extPolygon = {
|
||||||
name: 'polygon',
|
name: 'polygon',
|
||||||
init: function init(S) {
|
|
||||||
var _this = this;
|
|
||||||
|
|
||||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
async init(S) {
|
||||||
var svgEditor, svgCanvas, $, importLocale, editingitex, strings, selElems, started, newFO, showPanel, setAttr, cot, sec, buttons, contextTools;
|
const svgEditor = this;
|
||||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
const svgCanvas = svgEditor.canvas;
|
||||||
while (1) {
|
const {
|
||||||
switch (_context.prev = _context.next) {
|
$,
|
||||||
case 0:
|
importLocale
|
||||||
sec = function _sec(n) {
|
} = S;
|
||||||
return 1 / Math.cos(n);
|
const strings = await importLocale();
|
||||||
};
|
let selElems, // svgdoc = S.svgroot.parentNode.ownerDocument,
|
||||||
|
// newFOG, newFOGParent, newDef, newImageName, newMaskID, modeChangeG,
|
||||||
|
// edg = 0,
|
||||||
|
// undoCommand = 'Not image';
|
||||||
|
started, newFO; // const ccZoom;
|
||||||
|
// const wEl, hEl;
|
||||||
|
// const wOffset, hOffset;
|
||||||
|
// const ccRBG;
|
||||||
|
// const ccOpacity;
|
||||||
|
// const brushW, brushH;
|
||||||
|
// const ccDebug = document.getElementById('debugpanel');
|
||||||
|
|
||||||
cot = function _cot(n) {
|
/* const properlySourceSizeTextArea = function(){
|
||||||
return 1 / Math.tan(n);
|
// TODO: remove magic numbers here and get values from CSS
|
||||||
};
|
const height = $('#svg_source_container').height() - 80;
|
||||||
|
$('#svg_source_textarea').css('height', height);
|
||||||
|
}; */
|
||||||
|
|
||||||
setAttr = function _setAttr(attr, val) {
|
/**
|
||||||
svgCanvas.changeSelectedAttribute(attr, val);
|
* @param {boolean} on
|
||||||
svgCanvas.call('changed', selElems);
|
* @returns {void}
|
||||||
};
|
*/
|
||||||
|
|
||||||
showPanel = function _showPanel(on) {
|
function showPanel(on) {
|
||||||
var fcRules = $('#fc_rules');
|
let fcRules = $('#fc_rules');
|
||||||
|
|
||||||
if (!fcRules.length) {
|
if (!fcRules.length) {
|
||||||
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
||||||
|
@ -77,17 +51,43 @@ var svgEditorExtension_polygon = (function () {
|
||||||
|
|
||||||
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
||||||
$('#polygon_panel').toggle(on);
|
$('#polygon_panel').toggle(on);
|
||||||
};
|
}
|
||||||
|
/*
|
||||||
|
function toggleSourceButtons(on){
|
||||||
|
$('#tool_source_save, #tool_source_cancel').toggle(!on);
|
||||||
|
$('#polygon_save, #polygon_cancel').toggle(on);
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
svgEditor = _this;
|
/**
|
||||||
svgCanvas = svgEditor.canvas;
|
* @param {string} attr
|
||||||
$ = S.$, importLocale = S.importLocale, editingitex = false;
|
* @param {string|Float} val
|
||||||
_context.next = 9;
|
* @returns {void}
|
||||||
return importLocale();
|
*/
|
||||||
|
|
||||||
case 9:
|
|
||||||
strings = _context.sent;
|
|
||||||
|
|
||||||
|
function setAttr(attr, val) {
|
||||||
|
svgCanvas.changeSelectedAttribute(attr, val);
|
||||||
|
svgCanvas.call('changed', selElems);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {Float} n
|
||||||
|
* @returns {Float}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function cot(n) {
|
||||||
|
return 1 / Math.tan(n);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {Float} n
|
||||||
|
* @returns {Float}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function sec(n) {
|
||||||
|
return 1 / Math.cos(n);
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* Obtained from http://code.google.com/p/passenger-top/source/browse/instiki/public/svg-edit/editor/extensions/ext-itex.js?r=3
|
* Obtained from http://code.google.com/p/passenger-top/source/browse/instiki/public/svg-edit/editor/extensions/ext-itex.js?r=3
|
||||||
* This function sets the content of of the currently-selected foreignObject element,
|
* This function sets the content of of the currently-selected foreignObject element,
|
||||||
|
@ -132,40 +132,45 @@ var svgEditorExtension_polygon = (function () {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
buttons = [{
|
|
||||||
|
|
||||||
|
const buttons = [{
|
||||||
id: 'tool_polygon',
|
id: 'tool_polygon',
|
||||||
icon: svgEditor.curConfig.extIconsPath + 'polygon.png',
|
icon: svgEditor.curConfig.extIconsPath + 'polygon.png',
|
||||||
type: 'mode',
|
type: 'mode',
|
||||||
position: 11,
|
position: 11,
|
||||||
events: {
|
events: {
|
||||||
click: function click() {
|
click() {
|
||||||
svgCanvas.setMode('polygon');
|
svgCanvas.setMode('polygon');
|
||||||
showPanel(true);
|
showPanel(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
contextTools = [{
|
const contextTools = [{
|
||||||
type: 'input',
|
type: 'input',
|
||||||
panel: 'polygon_panel',
|
panel: 'polygon_panel',
|
||||||
id: 'polySides',
|
id: 'polySides',
|
||||||
size: 3,
|
size: 3,
|
||||||
defval: 5,
|
defval: 5,
|
||||||
events: {
|
events: {
|
||||||
change: function change() {
|
change() {
|
||||||
setAttr('sides', this.value);
|
setAttr('sides', this.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
return _context.abrupt("return", {
|
return {
|
||||||
name: strings.name,
|
name: strings.name,
|
||||||
svgicons: svgEditor.curConfig.extIconsPath + 'polygon-icons.svg',
|
svgicons: svgEditor.curConfig.extIconsPath + 'polygon-icons.svg',
|
||||||
buttons: strings.buttons.map(function (button, i) {
|
buttons: strings.buttons.map((button, i) => {
|
||||||
return Object.assign(buttons[i], button);
|
return Object.assign(buttons[i], button);
|
||||||
}),
|
}),
|
||||||
context_tools: strings.contextTools.map(function (contextTool, i) {
|
context_tools: strings.contextTools.map((contextTool, i) => {
|
||||||
return Object.assign(contextTools[i], contextTool);
|
return Object.assign(contextTools[i], contextTool);
|
||||||
}),
|
}),
|
||||||
callback: function callback() {
|
|
||||||
|
callback() {
|
||||||
$('#polygon_panel').hide();
|
$('#polygon_panel').hide();
|
||||||
|
|
||||||
|
|
||||||
|
@ -174,7 +179,7 @@ var svgEditorExtension_polygon = (function () {
|
||||||
|
|
||||||
/* const save = */
|
/* const save = */
|
||||||
$('#tool_source_save').clone().hide().attr('id', 'polygon_save').unbind().appendTo('#tool_source_back').click(function () {
|
$('#tool_source_save').clone().hide().attr('id', 'polygon_save').unbind().appendTo('#tool_source_back').click(function () {
|
||||||
if (!editingitex) {
|
{
|
||||||
return;
|
return;
|
||||||
} // Todo: Uncomment the setItexString() function above and handle ajaxEndpoint?
|
} // Todo: Uncomment the setItexString() function above and handle ajaxEndpoint?
|
||||||
// setSelectMode();
|
// setSelectMode();
|
||||||
|
@ -185,17 +190,18 @@ var svgEditorExtension_polygon = (function () {
|
||||||
});
|
});
|
||||||
}, 3000);
|
}, 3000);
|
||||||
},
|
},
|
||||||
mouseDown: function mouseDown(opts) {
|
|
||||||
|
mouseDown(opts) {
|
||||||
if (svgCanvas.getMode() !== 'polygon') {
|
if (svgCanvas.getMode() !== 'polygon') {
|
||||||
return undefined;
|
return undefined;
|
||||||
} // const e = opts.event;
|
} // const e = opts.event;
|
||||||
|
|
||||||
|
|
||||||
var rgb = svgCanvas.getColor('fill'); // const ccRgbEl = rgb.substring(1, rgb.length);
|
const rgb = svgCanvas.getColor('fill'); // const ccRgbEl = rgb.substring(1, rgb.length);
|
||||||
|
|
||||||
var sRgb = svgCanvas.getColor('stroke'); // ccSRgbEl = sRgb.substring(1, rgb.length);
|
const sRgb = svgCanvas.getColor('stroke'); // ccSRgbEl = sRgb.substring(1, rgb.length);
|
||||||
|
|
||||||
var sWidth = svgCanvas.getStrokeWidth();
|
const sWidth = svgCanvas.getStrokeWidth();
|
||||||
started = true;
|
started = true;
|
||||||
newFO = svgCanvas.addSVGElementFromJson({
|
newFO = svgCanvas.addSVGElementFromJson({
|
||||||
element: 'polygon',
|
element: 'polygon',
|
||||||
|
@ -216,29 +222,33 @@ var svgEditorExtension_polygon = (function () {
|
||||||
started: true
|
started: true
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mouseMove: function mouseMove(opts) {
|
|
||||||
|
mouseMove(opts) {
|
||||||
if (!started || svgCanvas.getMode() !== 'polygon') {
|
if (!started || svgCanvas.getMode() !== 'polygon') {
|
||||||
return undefined;
|
return undefined;
|
||||||
} // const e = opts.event;
|
} // const e = opts.event;
|
||||||
|
|
||||||
|
|
||||||
var c = $(newFO).attr(['cx', 'cy', 'sides', 'orient', 'fill', 'strokecolor', 'strokeWidth']);
|
const c = $(newFO).attr(['cx', 'cy', 'sides', 'orient', 'fill', 'strokecolor', 'strokeWidth']);
|
||||||
var x = opts.mouse_x;
|
let x = opts.mouse_x;
|
||||||
var y = opts.mouse_y;
|
let y = opts.mouse_y;
|
||||||
var cx = c.cx,
|
const {
|
||||||
cy = c.cy,
|
cx,
|
||||||
fill = c.fill,
|
cy,
|
||||||
strokecolor = c.strokecolor,
|
fill,
|
||||||
strokeWidth = c.strokeWidth,
|
strokecolor,
|
||||||
sides = c.sides,
|
strokeWidth,
|
||||||
|
sides
|
||||||
|
} = c,
|
||||||
|
// {orient} = c,
|
||||||
edg = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) / 1.5;
|
edg = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) / 1.5;
|
||||||
newFO.setAttribute('edge', edg);
|
newFO.setAttribute('edge', edg);
|
||||||
var inradius = edg / 2 * cot(Math.PI / sides);
|
const inradius = edg / 2 * cot(Math.PI / sides);
|
||||||
var circumradius = inradius * sec(Math.PI / sides);
|
const circumradius = inradius * sec(Math.PI / sides);
|
||||||
var points = '';
|
let points = '';
|
||||||
|
|
||||||
for (var s = 0; sides >= s; s++) {
|
for (let s = 0; sides >= s; s++) {
|
||||||
var angle = 2.0 * Math.PI * s / sides;
|
const angle = 2.0 * Math.PI * s / sides;
|
||||||
x = circumradius * Math.cos(angle) + cx;
|
x = circumradius * Math.cos(angle) + cx;
|
||||||
y = circumradius * Math.sin(angle) + cy;
|
y = circumradius * Math.sin(angle) + cy;
|
||||||
points += x + ',' + y + ' ';
|
points += x + ',' + y + ' ';
|
||||||
|
@ -257,26 +267,28 @@ var svgEditorExtension_polygon = (function () {
|
||||||
started: true
|
started: true
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mouseUp: function mouseUp(opts) {
|
|
||||||
|
mouseUp(opts) {
|
||||||
if (svgCanvas.getMode() !== 'polygon') {
|
if (svgCanvas.getMode() !== 'polygon') {
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
var attrs = $(newFO).attr('edge');
|
const attrs = $(newFO).attr('edge');
|
||||||
var keep = attrs.edge !== '0'; // svgCanvas.addToSelection([newFO], true);
|
const keep = attrs.edge !== '0'; // svgCanvas.addToSelection([newFO], true);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
keep: keep,
|
keep,
|
||||||
element: newFO
|
element: newFO
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
selectedChanged: function selectedChanged(opts) {
|
|
||||||
|
selectedChanged(opts) {
|
||||||
// Use this to update the current selected elements
|
// Use this to update the current selected elements
|
||||||
selElems = opts.elems;
|
selElems = opts.elems;
|
||||||
var i = selElems.length;
|
let i = selElems.length;
|
||||||
|
|
||||||
while (i--) {
|
while (i--) {
|
||||||
var elem = selElems[i];
|
const elem = selElems[i];
|
||||||
|
|
||||||
if (elem && elem.getAttribute('shape') === 'regularPoly') {
|
if (elem && elem.getAttribute('shape') === 'regularPoly') {
|
||||||
if (opts.selectedElement && !opts.multiselected) {
|
if (opts.selectedElement && !opts.multiselected) {
|
||||||
|
@ -290,18 +302,13 @@ var svgEditorExtension_polygon = (function () {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
elementChanged: function elementChanged(opts) {// const elem = opts.elems[0];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
case 13:
|
elementChanged(opts) {// const elem = opts.elems[0];
|
||||||
case "end":
|
|
||||||
return _context.stop();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}, _callee);
|
|
||||||
}))();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extPolygon;
|
return extPolygon;
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
@ -1,98 +1,6 @@
|
||||||
var svgEditorExtension_shapes = (function () {
|
var svgEditorExtension_shapes = (function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
||||||
try {
|
|
||||||
var info = gen[key](arg);
|
|
||||||
var value = info.value;
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (info.done) {
|
|
||||||
resolve(value);
|
|
||||||
} else {
|
|
||||||
Promise.resolve(value).then(_next, _throw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _asyncToGenerator(fn) {
|
|
||||||
return function () {
|
|
||||||
var self = this,
|
|
||||||
args = arguments;
|
|
||||||
return new Promise(function (resolve, reject) {
|
|
||||||
var gen = fn.apply(self, args);
|
|
||||||
|
|
||||||
function _next(value) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _throw(err) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
||||||
}
|
|
||||||
|
|
||||||
_next(undefined);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function _slicedToArray(arr, i) {
|
|
||||||
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
||||||
}
|
|
||||||
|
|
||||||
function _arrayWithHoles(arr) {
|
|
||||||
if (Array.isArray(arr)) return arr;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _iterableToArrayLimit(arr, i) {
|
|
||||||
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
|
|
||||||
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"] != null) _i["return"]();
|
|
||||||
} finally {
|
|
||||||
if (_d) throw _e;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return _arr;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _unsupportedIterableToArray(o, minLen) {
|
|
||||||
if (!o) return;
|
|
||||||
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
||||||
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
||||||
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
||||||
if (n === "Map" || n === "Set") return Array.from(o);
|
|
||||||
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _arrayLikeToArray(arr, len) {
|
|
||||||
if (len == null || len > arr.length) len = arr.length;
|
|
||||||
|
|
||||||
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
||||||
|
|
||||||
return arr2;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _nonIterableRest() {
|
|
||||||
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @file ext-shapes.js
|
* @file ext-shapes.js
|
||||||
*
|
*
|
||||||
|
@ -103,87 +11,21 @@ var svgEditorExtension_shapes = (function () {
|
||||||
*/
|
*/
|
||||||
var extShapes = {
|
var extShapes = {
|
||||||
name: 'shapes',
|
name: 'shapes',
|
||||||
init: function init(_ref) {
|
|
||||||
var _this = this;
|
|
||||||
|
|
||||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
async init({
|
||||||
var $, importLocale, strings, svgEditor, canv, svgroot, lastBBox, categories, library, modeId, startClientPos, currentD, curShapeId, curShape, startX, startY, curLib, loadIcons, makeButtons, loadLibrary, buttons;
|
$,
|
||||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
importLocale
|
||||||
while (1) {
|
}) {
|
||||||
switch (_context.prev = _context.next) {
|
const strings = await importLocale();
|
||||||
case 0:
|
const svgEditor = this;
|
||||||
loadLibrary = function _loadLibrary(catId) {
|
const canv = svgEditor.canvas;
|
||||||
var lib = library[catId];
|
const svgroot = canv.getRootElem();
|
||||||
|
let lastBBox = {}; // This populates the category list
|
||||||
|
|
||||||
if (!lib) {
|
const {
|
||||||
$('#shape_buttons').html(strings.loading);
|
categories
|
||||||
$.getJSON(svgEditor.curConfig.extIconsPath + 'shapelib/' + catId + '.json', function (result) {
|
} = strings;
|
||||||
curLib = library[catId] = {
|
const library = {
|
||||||
data: result.data,
|
|
||||||
size: result.size,
|
|
||||||
fill: result.fill
|
|
||||||
};
|
|
||||||
makeButtons(catId, result);
|
|
||||||
loadIcons();
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
curLib = lib;
|
|
||||||
|
|
||||||
if (!lib.buttons.length) {
|
|
||||||
makeButtons(catId, lib);
|
|
||||||
}
|
|
||||||
|
|
||||||
loadIcons();
|
|
||||||
};
|
|
||||||
|
|
||||||
makeButtons = function _makeButtons(cat, shapes) {
|
|
||||||
var size = curLib.size || 300;
|
|
||||||
var fill = curLib.fill || false;
|
|
||||||
var off = size * 0.05;
|
|
||||||
var vb = [-off, -off, size + off * 2, size + off * 2].join(' ');
|
|
||||||
var stroke = fill ? 0 : size / 30;
|
|
||||||
var shapeIcon = new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg">' + '<svg viewBox="' + vb + '">' + '<path fill="' + (fill ? '#333' : 'none') + '" stroke="#000" stroke-width="' + stroke + '" /></svg></svg>', 'text/xml');
|
|
||||||
var width = 24;
|
|
||||||
var height = 24;
|
|
||||||
shapeIcon.documentElement.setAttribute('width', width);
|
|
||||||
shapeIcon.documentElement.setAttribute('height', height);
|
|
||||||
var svgElem = $(document.importNode(shapeIcon.documentElement, true));
|
|
||||||
var data = shapes.data;
|
|
||||||
curLib.buttons = Object.entries(data).map(function (_ref2) {
|
|
||||||
var _ref3 = _slicedToArray(_ref2, 2),
|
|
||||||
id = _ref3[0],
|
|
||||||
pathD = _ref3[1];
|
|
||||||
|
|
||||||
var icon = svgElem.clone();
|
|
||||||
icon.find('path').attr('d', pathD);
|
|
||||||
var iconBtn = icon.wrap('<div class="tool_button">').parent().attr({
|
|
||||||
id: modeId + '_' + id,
|
|
||||||
title: id
|
|
||||||
}); // Store for later use
|
|
||||||
|
|
||||||
return iconBtn[0];
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
loadIcons = function _loadIcons() {
|
|
||||||
$('#shape_buttons').empty().append(curLib.buttons);
|
|
||||||
};
|
|
||||||
|
|
||||||
$ = _ref.$, importLocale = _ref.importLocale;
|
|
||||||
_context.next = 6;
|
|
||||||
return importLocale();
|
|
||||||
|
|
||||||
case 6:
|
|
||||||
strings = _context.sent;
|
|
||||||
svgEditor = _this;
|
|
||||||
canv = svgEditor.canvas;
|
|
||||||
svgroot = canv.getRootElem();
|
|
||||||
lastBBox = {}; // This populates the category list
|
|
||||||
|
|
||||||
categories = strings.categories;
|
|
||||||
library = {
|
|
||||||
basic: {
|
basic: {
|
||||||
data: {
|
data: {
|
||||||
heart: 'm150,73c61,-175 300,0 0,225c-300,-225 -61,-400 0,-225z',
|
heart: 'm150,73c61,-175 300,0 0,225c-300,-225 -61,-400 0,-225z',
|
||||||
|
@ -218,46 +60,151 @@ var svgEditorExtension_shapes = (function () {
|
||||||
buttons: []
|
buttons: []
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
modeId = 'shapelib';
|
const modeId = 'shapelib';
|
||||||
startClientPos = {};
|
const startClientPos = {};
|
||||||
curLib = library.basic;
|
let currentD, curShapeId, curShape, startX, startY;
|
||||||
|
let curLib = library.basic;
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
buttons = [{
|
function loadIcons() {
|
||||||
|
$('#shape_buttons').empty().append(curLib.buttons);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @typedef {PlainObject} module:Extension.Shapes.Shapes
|
||||||
|
* @property {PlainObject<string, string>} data
|
||||||
|
* @property {Integer} [size]
|
||||||
|
* @property {boolean} [fill]
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string|"basic"} cat Category ID
|
||||||
|
* @param {module:Extension.Shapes.Shapes} shapes
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function makeButtons(cat, shapes) {
|
||||||
|
const size = curLib.size || 300;
|
||||||
|
const fill = curLib.fill || false;
|
||||||
|
const off = size * 0.05;
|
||||||
|
const vb = [-off, -off, size + off * 2, size + off * 2].join(' ');
|
||||||
|
const stroke = fill ? 0 : size / 30;
|
||||||
|
const shapeIcon = new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg">' + '<svg viewBox="' + vb + '">' + '<path fill="' + (fill ? '#333' : 'none') + '" stroke="#000" stroke-width="' + stroke + '" /></svg></svg>', 'text/xml');
|
||||||
|
const width = 24;
|
||||||
|
const height = 24;
|
||||||
|
shapeIcon.documentElement.setAttribute('width', width);
|
||||||
|
shapeIcon.documentElement.setAttribute('height', height);
|
||||||
|
const svgElem = $(document.importNode(shapeIcon.documentElement, true));
|
||||||
|
const {
|
||||||
|
data
|
||||||
|
} = shapes;
|
||||||
|
curLib.buttons = Object.entries(data).map(([id, pathD]) => {
|
||||||
|
const icon = svgElem.clone();
|
||||||
|
icon.find('path').attr('d', pathD);
|
||||||
|
const iconBtn = icon.wrap('<div class="tool_button">').parent().attr({
|
||||||
|
id: modeId + '_' + id,
|
||||||
|
title: id
|
||||||
|
}); // Store for later use
|
||||||
|
|
||||||
|
return iconBtn[0];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {string|"basic"} catId
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function loadLibrary(catId) {
|
||||||
|
const lib = library[catId];
|
||||||
|
|
||||||
|
if (!lib) {
|
||||||
|
$('#shape_buttons').html(strings.loading);
|
||||||
|
$.getJSON(svgEditor.curConfig.extIconsPath + 'shapelib/' + catId + '.json', function (result) {
|
||||||
|
curLib = library[catId] = {
|
||||||
|
data: result.data,
|
||||||
|
size: result.size,
|
||||||
|
fill: result.fill
|
||||||
|
};
|
||||||
|
makeButtons(catId, result);
|
||||||
|
loadIcons();
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
curLib = lib;
|
||||||
|
|
||||||
|
if (!lib.buttons.length) {
|
||||||
|
makeButtons(catId, lib);
|
||||||
|
}
|
||||||
|
|
||||||
|
loadIcons();
|
||||||
|
}
|
||||||
|
|
||||||
|
const buttons = [{
|
||||||
id: 'tool_shapelib',
|
id: 'tool_shapelib',
|
||||||
icon: svgEditor.curConfig.extIconsPath + 'shapes.png',
|
icon: svgEditor.curConfig.extIconsPath + 'shapes.png',
|
||||||
type: 'mode_flyout',
|
type: 'mode_flyout',
|
||||||
// _flyout
|
// _flyout
|
||||||
position: 6,
|
position: 6,
|
||||||
events: {
|
events: {
|
||||||
click: function click() {
|
click() {
|
||||||
canv.setMode(modeId);
|
canv.setMode(modeId);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
return _context.abrupt("return", {
|
return {
|
||||||
svgicons: svgEditor.curConfig.extIconsPath + 'ext-shapes.xml',
|
svgicons: svgEditor.curConfig.extIconsPath + 'ext-shapes.xml',
|
||||||
buttons: strings.buttons.map(function (button, i) {
|
buttons: strings.buttons.map((button, i) => {
|
||||||
return Object.assign(buttons[i], button);
|
return Object.assign(buttons[i], button);
|
||||||
}),
|
}),
|
||||||
callback: function callback() {
|
|
||||||
$('<style>').text("\n #shape_buttons {\n overflow: auto;\n width: 180px;\n max-height: 300px;\n display: table-cell;\n vertical-align: middle;\n }\n #shape_cats {\n min-width: 110px;\n display: table-cell;\n vertical-align: middle;\n height: 300px;\n }\n #shape_cats > div {\n line-height: 1em;\n padding: .5em;\n border:1px solid #B0B0B0;\n background: #E8E8E8;\n margin-bottom: -1px;\n }\n #shape_cats div:hover {\n background: #FFFFCC;\n }\n #shape_cats div.current {\n font-weight: bold;\n }\n ").appendTo('head');
|
callback() {
|
||||||
var btnDiv = $('<div id="shape_buttons">');
|
$('<style>').text(`
|
||||||
|
#shape_buttons {
|
||||||
|
overflow: auto;
|
||||||
|
width: 180px;
|
||||||
|
max-height: 300px;
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
#shape_cats {
|
||||||
|
min-width: 110px;
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
#shape_cats > div {
|
||||||
|
line-height: 1em;
|
||||||
|
padding: .5em;
|
||||||
|
border:1px solid #B0B0B0;
|
||||||
|
background: #E8E8E8;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
}
|
||||||
|
#shape_cats div:hover {
|
||||||
|
background: #FFFFCC;
|
||||||
|
}
|
||||||
|
#shape_cats div.current {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
`).appendTo('head');
|
||||||
|
const btnDiv = $('<div id="shape_buttons">');
|
||||||
$('#tools_shapelib > *').wrapAll(btnDiv);
|
$('#tools_shapelib > *').wrapAll(btnDiv);
|
||||||
var shower = $('#tools_shapelib_show');
|
const shower = $('#tools_shapelib_show');
|
||||||
loadLibrary('basic'); // Do mouseup on parent element rather than each button
|
loadLibrary('basic'); // Do mouseup on parent element rather than each button
|
||||||
|
|
||||||
$('#shape_buttons').mouseup(function (evt) {
|
$('#shape_buttons').mouseup(function (evt) {
|
||||||
var btn = $(evt.target).closest('div.tool_button');
|
const btn = $(evt.target).closest('div.tool_button');
|
||||||
|
|
||||||
if (!btn.length) {
|
if (!btn.length) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var copy = btn.children().clone();
|
const copy = btn.children().clone();
|
||||||
shower.children(':not(.flyout_arrow_horiz)').remove();
|
shower.children(':not(.flyout_arrow_horiz)').remove();
|
||||||
shower.append(copy).attr('data-curopt', '#' + btn[0].id) // This sets the current mode
|
shower.append(copy).attr('data-curopt', '#' + btn[0].id) // This sets the current mode
|
||||||
.mouseup();
|
.mouseup();
|
||||||
|
@ -266,13 +213,13 @@ var svgEditorExtension_shapes = (function () {
|
||||||
currentD = curLib.data[curShapeId];
|
currentD = curLib.data[curShapeId];
|
||||||
$('.tools_flyout').fadeOut();
|
$('.tools_flyout').fadeOut();
|
||||||
});
|
});
|
||||||
var shapeCats = $('<div id="shape_cats">');
|
const shapeCats = $('<div id="shape_cats">');
|
||||||
var catStr = '';
|
let catStr = '';
|
||||||
$.each(categories, function (id, label) {
|
$.each(categories, function (id, label) {
|
||||||
catStr += '<div data-cat=' + id + '>' + label + '</div>';
|
catStr += '<div data-cat=' + id + '>' + label + '</div>';
|
||||||
});
|
});
|
||||||
shapeCats.html(catStr).children().bind('mouseup', function () {
|
shapeCats.html(catStr).children().bind('mouseup', function () {
|
||||||
var catlink = $(this);
|
const catlink = $(this);
|
||||||
catlink.siblings().removeClass('current');
|
catlink.siblings().removeClass('current');
|
||||||
catlink.addClass('current');
|
catlink.addClass('current');
|
||||||
loadLibrary(catlink.attr('data-cat')); // Get stuff
|
loadLibrary(catlink.attr('data-cat')); // Get stuff
|
||||||
|
@ -285,34 +232,31 @@ var svgEditorExtension_shapes = (function () {
|
||||||
canv.setMode(currentD ? modeId : 'select');
|
canv.setMode(currentD ? modeId : 'select');
|
||||||
});
|
});
|
||||||
$('#tool_shapelib').remove();
|
$('#tool_shapelib').remove();
|
||||||
var h = $('#tools_shapelib').height();
|
const h = $('#tools_shapelib').height();
|
||||||
$('#tools_shapelib').css({
|
$('#tools_shapelib').css({
|
||||||
'margin-top': -(h / 2 - 15),
|
'margin-top': -(h / 2 - 15),
|
||||||
'margin-left': 3
|
'margin-left': 3
|
||||||
}); // Now add shape categories from locale
|
}); // Now add shape categories from locale
|
||||||
|
|
||||||
var cats = {};
|
const cats = {};
|
||||||
Object.entries(categories).forEach(function (_ref4) {
|
Object.entries(categories).forEach(([o, categoryName]) => {
|
||||||
var _ref5 = _slicedToArray(_ref4, 2),
|
|
||||||
o = _ref5[0],
|
|
||||||
categoryName = _ref5[1];
|
|
||||||
|
|
||||||
cats['#shape_cats [data-cat="' + o + '"]'] = categoryName;
|
cats['#shape_cats [data-cat="' + o + '"]'] = categoryName;
|
||||||
});
|
});
|
||||||
this.setStrings('content', cats);
|
this.setStrings('content', cats);
|
||||||
},
|
},
|
||||||
mouseDown: function mouseDown(opts) {
|
|
||||||
var mode = canv.getMode();
|
mouseDown(opts) {
|
||||||
|
const mode = canv.getMode();
|
||||||
|
|
||||||
if (mode !== modeId) {
|
if (mode !== modeId) {
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
startX = opts.start_x;
|
startX = opts.start_x;
|
||||||
var x = startX;
|
const x = startX;
|
||||||
startY = opts.start_y;
|
startY = opts.start_y;
|
||||||
var y = startY;
|
const y = startY;
|
||||||
var curStyle = canv.getStyle();
|
const curStyle = canv.getStyle();
|
||||||
startClientPos.x = opts.event.clientX;
|
startClientPos.x = opts.event.clientX;
|
||||||
startClientPos.y = opts.event.clientY;
|
startClientPos.y = opts.event.clientY;
|
||||||
curShape = canv.addSVGElementFromJson({
|
curShape = canv.addSVGElementFromJson({
|
||||||
|
@ -342,24 +286,25 @@ var svgEditorExtension_shapes = (function () {
|
||||||
started: true
|
started: true
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mouseMove: function mouseMove(opts) {
|
|
||||||
var mode = canv.getMode();
|
mouseMove(opts) {
|
||||||
|
const mode = canv.getMode();
|
||||||
|
|
||||||
if (mode !== modeId) {
|
if (mode !== modeId) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var zoom = canv.getZoom();
|
const zoom = canv.getZoom();
|
||||||
var evt = opts.event;
|
const evt = opts.event;
|
||||||
var x = opts.mouse_x / zoom;
|
const x = opts.mouse_x / zoom;
|
||||||
var y = opts.mouse_y / zoom;
|
const y = opts.mouse_y / zoom;
|
||||||
var tlist = canv.getTransformList(curShape),
|
const tlist = canv.getTransformList(curShape),
|
||||||
box = curShape.getBBox(),
|
box = curShape.getBBox(),
|
||||||
left = box.x,
|
left = box.x,
|
||||||
top = box.y; // {width, height} = box,
|
top = box.y; // {width, height} = box,
|
||||||
// const dx = (x - startX), dy = (y - startY);
|
// const dx = (x - startX), dy = (y - startY);
|
||||||
|
|
||||||
var newbox = {
|
const newbox = {
|
||||||
x: Math.min(startX, x),
|
x: Math.min(startX, x),
|
||||||
y: Math.min(startY, y),
|
y: Math.min(startY, y),
|
||||||
width: Math.abs(x - startX),
|
width: Math.abs(x - startX),
|
||||||
|
@ -371,29 +316,29 @@ var svgEditorExtension_shapes = (function () {
|
||||||
sx = width ? (width + dx) / width : 1;
|
sx = width ? (width + dx) / width : 1;
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var sx = newbox.width / lastBBox.width || 1;
|
let sx = newbox.width / lastBBox.width || 1;
|
||||||
var sy = newbox.height / lastBBox.height || 1; // Not perfect, but mostly works...
|
let sy = newbox.height / lastBBox.height || 1; // Not perfect, but mostly works...
|
||||||
|
|
||||||
var tx = 0;
|
let tx = 0;
|
||||||
|
|
||||||
if (x < startX) {
|
if (x < startX) {
|
||||||
tx = lastBBox.width;
|
tx = lastBBox.width;
|
||||||
}
|
}
|
||||||
|
|
||||||
var ty = 0;
|
let ty = 0;
|
||||||
|
|
||||||
if (y < startY) {
|
if (y < startY) {
|
||||||
ty = lastBBox.height;
|
ty = lastBBox.height;
|
||||||
} // update the transform list with translate,scale,translate
|
} // update the transform list with translate,scale,translate
|
||||||
|
|
||||||
|
|
||||||
var translateOrigin = svgroot.createSVGTransform(),
|
const translateOrigin = svgroot.createSVGTransform(),
|
||||||
scale = svgroot.createSVGTransform(),
|
scale = svgroot.createSVGTransform(),
|
||||||
translateBack = svgroot.createSVGTransform();
|
translateBack = svgroot.createSVGTransform();
|
||||||
translateOrigin.setTranslate(-(left + tx), -(top + ty));
|
translateOrigin.setTranslate(-(left + tx), -(top + ty));
|
||||||
|
|
||||||
if (!evt.shiftKey) {
|
if (!evt.shiftKey) {
|
||||||
var max = Math.min(Math.abs(sx), Math.abs(sy));
|
const max = Math.min(Math.abs(sx), Math.abs(sy));
|
||||||
sx = max * (sx < 0 ? -1 : 1);
|
sx = max * (sx < 0 ? -1 : 1);
|
||||||
sy = max * (sy < 0 ? -1 : 1);
|
sy = max * (sy < 0 ? -1 : 1);
|
||||||
}
|
}
|
||||||
|
@ -406,30 +351,25 @@ var svgEditorExtension_shapes = (function () {
|
||||||
canv.recalculateDimensions(curShape);
|
canv.recalculateDimensions(curShape);
|
||||||
lastBBox = curShape.getBBox();
|
lastBBox = curShape.getBBox();
|
||||||
},
|
},
|
||||||
mouseUp: function mouseUp(opts) {
|
|
||||||
var mode = canv.getMode();
|
mouseUp(opts) {
|
||||||
|
const mode = canv.getMode();
|
||||||
|
|
||||||
if (mode !== modeId) {
|
if (mode !== modeId) {
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
var keepObject = opts.event.clientX !== startClientPos.x && opts.event.clientY !== startClientPos.y;
|
const keepObject = opts.event.clientX !== startClientPos.x && opts.event.clientY !== startClientPos.y;
|
||||||
return {
|
return {
|
||||||
keep: keepObject,
|
keep: keepObject,
|
||||||
element: curShape,
|
element: curShape,
|
||||||
started: false
|
started: false
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
case 18:
|
};
|
||||||
case "end":
|
|
||||||
return _context.stop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, _callee);
|
|
||||||
}))();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extShapes;
|
return extShapes;
|
||||||
|
|
|
@ -1,42 +1,6 @@
|
||||||
var svgEditorExtension_star = (function () {
|
var svgEditorExtension_star = (function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
||||||
try {
|
|
||||||
var info = gen[key](arg);
|
|
||||||
var value = info.value;
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (info.done) {
|
|
||||||
resolve(value);
|
|
||||||
} else {
|
|
||||||
Promise.resolve(value).then(_next, _throw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _asyncToGenerator(fn) {
|
|
||||||
return function () {
|
|
||||||
var self = this,
|
|
||||||
args = arguments;
|
|
||||||
return new Promise(function (resolve, reject) {
|
|
||||||
var gen = fn.apply(self, args);
|
|
||||||
|
|
||||||
function _next(value) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _throw(err) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
||||||
}
|
|
||||||
|
|
||||||
_next(undefined);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @file ext-star.js
|
* @file ext-star.js
|
||||||
*
|
*
|
||||||
|
@ -46,22 +10,31 @@ var svgEditorExtension_star = (function () {
|
||||||
*/
|
*/
|
||||||
var extStar = {
|
var extStar = {
|
||||||
name: 'star',
|
name: 'star',
|
||||||
init: function init(S) {
|
|
||||||
var _this = this;
|
|
||||||
|
|
||||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
async init(S) {
|
||||||
var svgEditor, svgCanvas, $, importLocale, selElems, started, newFO, strings, showPanel, setAttr, buttons, contextTools;
|
const svgEditor = this;
|
||||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
const svgCanvas = svgEditor.canvas;
|
||||||
while (1) {
|
const {
|
||||||
switch (_context.prev = _context.next) {
|
$,
|
||||||
case 0:
|
importLocale
|
||||||
setAttr = function _setAttr(attr, val) {
|
} = S; // {svgcontent},
|
||||||
svgCanvas.changeSelectedAttribute(attr, val);
|
|
||||||
svgCanvas.call('changed', selElems);
|
|
||||||
};
|
|
||||||
|
|
||||||
showPanel = function _showPanel(on) {
|
let selElems, // editingitex = false,
|
||||||
var fcRules = $('#fc_rules');
|
// svgdoc = S.svgroot.parentNode.ownerDocument,
|
||||||
|
started, newFO; // edg = 0,
|
||||||
|
// newFOG, newFOGParent, newDef, newImageName, newMaskID,
|
||||||
|
// undoCommand = 'Not image',
|
||||||
|
// modeChangeG, ccZoom, wEl, hEl, wOffset, hOffset, ccRgbEl, brushW, brushH;
|
||||||
|
|
||||||
|
const strings = await importLocale();
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {boolean} on
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
|
function showPanel(on) {
|
||||||
|
let fcRules = $('#fc_rules');
|
||||||
|
|
||||||
if (!fcRules.length) {
|
if (!fcRules.length) {
|
||||||
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
||||||
|
@ -69,18 +42,25 @@ var svgEditorExtension_star = (function () {
|
||||||
|
|
||||||
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
||||||
$('#star_panel').toggle(on);
|
$('#star_panel').toggle(on);
|
||||||
};
|
}
|
||||||
|
/*
|
||||||
|
function toggleSourceButtons(on){
|
||||||
|
$('#star_save, #star_cancel').toggle(on);
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
svgEditor = _this;
|
/**
|
||||||
svgCanvas = svgEditor.canvas;
|
*
|
||||||
$ = S.$, importLocale = S.importLocale; // {svgcontent},
|
* @param {string} attr
|
||||||
|
* @param {string|Float} val
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
|
||||||
_context.next = 7;
|
|
||||||
return importLocale();
|
|
||||||
|
|
||||||
case 7:
|
|
||||||
strings = _context.sent;
|
|
||||||
|
|
||||||
|
function setAttr(attr, val) {
|
||||||
|
svgCanvas.changeSelectedAttribute(attr, val);
|
||||||
|
svgCanvas.call('changed', selElems);
|
||||||
|
}
|
||||||
/*
|
/*
|
||||||
function cot(n){
|
function cot(n){
|
||||||
return 1 / Math.tan(n);
|
return 1 / Math.tan(n);
|
||||||
|
@ -89,28 +69,32 @@ var svgEditorExtension_star = (function () {
|
||||||
return 1 / Math.cos(n);
|
return 1 / Math.cos(n);
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
buttons = [{
|
|
||||||
|
|
||||||
|
const buttons = [{
|
||||||
id: 'tool_star',
|
id: 'tool_star',
|
||||||
icon: svgEditor.curConfig.extIconsPath + 'star.png',
|
icon: svgEditor.curConfig.extIconsPath + 'star.png',
|
||||||
type: 'mode',
|
type: 'mode',
|
||||||
position: 12,
|
position: 12,
|
||||||
events: {
|
events: {
|
||||||
click: function click() {
|
click() {
|
||||||
showPanel(true);
|
showPanel(true);
|
||||||
svgCanvas.setMode('star');
|
svgCanvas.setMode('star');
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
contextTools = [{
|
const contextTools = [{
|
||||||
type: 'input',
|
type: 'input',
|
||||||
panel: 'star_panel',
|
panel: 'star_panel',
|
||||||
id: 'starNumPoints',
|
id: 'starNumPoints',
|
||||||
size: 3,
|
size: 3,
|
||||||
defval: 5,
|
defval: 5,
|
||||||
events: {
|
events: {
|
||||||
change: function change() {
|
change() {
|
||||||
setAttr('point', this.value);
|
setAttr('point', this.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
type: 'input',
|
type: 'input',
|
||||||
|
@ -125,29 +109,32 @@ var svgEditorExtension_star = (function () {
|
||||||
size: 3,
|
size: 3,
|
||||||
defval: 0,
|
defval: 0,
|
||||||
events: {
|
events: {
|
||||||
change: function change() {
|
change() {
|
||||||
setAttr('radialshift', this.value);
|
setAttr('radialshift', this.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
return _context.abrupt("return", {
|
return {
|
||||||
name: strings.name,
|
name: strings.name,
|
||||||
svgicons: svgEditor.curConfig.extIconsPath + 'star-icons.svg',
|
svgicons: svgEditor.curConfig.extIconsPath + 'star-icons.svg',
|
||||||
buttons: strings.buttons.map(function (button, i) {
|
buttons: strings.buttons.map((button, i) => {
|
||||||
return Object.assign(buttons[i], button);
|
return Object.assign(buttons[i], button);
|
||||||
}),
|
}),
|
||||||
context_tools: strings.contextTools.map(function (contextTool, i) {
|
context_tools: strings.contextTools.map((contextTool, i) => {
|
||||||
return Object.assign(contextTools[i], contextTool);
|
return Object.assign(contextTools[i], contextTool);
|
||||||
}),
|
}),
|
||||||
callback: function callback() {
|
|
||||||
|
callback() {
|
||||||
$('#star_panel').hide(); // const endChanges = function(){};
|
$('#star_panel').hide(); // const endChanges = function(){};
|
||||||
},
|
},
|
||||||
mouseDown: function mouseDown(opts) {
|
|
||||||
var rgb = svgCanvas.getColor('fill'); // const ccRgbEl = rgb.substring(1, rgb.length);
|
|
||||||
|
|
||||||
var sRgb = svgCanvas.getColor('stroke'); // const ccSRgbEl = sRgb.substring(1, rgb.length);
|
mouseDown(opts) {
|
||||||
|
const rgb = svgCanvas.getColor('fill'); // const ccRgbEl = rgb.substring(1, rgb.length);
|
||||||
|
|
||||||
var sWidth = svgCanvas.getStrokeWidth();
|
const sRgb = svgCanvas.getColor('stroke'); // const ccSRgbEl = sRgb.substring(1, rgb.length);
|
||||||
|
|
||||||
|
const sWidth = svgCanvas.getStrokeWidth();
|
||||||
|
|
||||||
if (svgCanvas.getMode() === 'star') {
|
if (svgCanvas.getMode() === 'star') {
|
||||||
started = true;
|
started = true;
|
||||||
|
@ -175,31 +162,34 @@ var svgEditorExtension_star = (function () {
|
||||||
|
|
||||||
return undefined;
|
return undefined;
|
||||||
},
|
},
|
||||||
mouseMove: function mouseMove(opts) {
|
|
||||||
|
mouseMove(opts) {
|
||||||
if (!started) {
|
if (!started) {
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (svgCanvas.getMode() === 'star') {
|
if (svgCanvas.getMode() === 'star') {
|
||||||
var c = $(newFO).attr(['cx', 'cy', 'point', 'orient', 'fill', 'strokecolor', 'strokeWidth', 'radialshift']);
|
const c = $(newFO).attr(['cx', 'cy', 'point', 'orient', 'fill', 'strokecolor', 'strokeWidth', 'radialshift']);
|
||||||
var x = opts.mouse_x;
|
let x = opts.mouse_x;
|
||||||
var y = opts.mouse_y;
|
let y = opts.mouse_y;
|
||||||
var cx = c.cx,
|
const {
|
||||||
cy = c.cy,
|
cx,
|
||||||
fill = c.fill,
|
cy,
|
||||||
strokecolor = c.strokecolor,
|
fill,
|
||||||
strokeWidth = c.strokeWidth,
|
strokecolor,
|
||||||
radialshift = c.radialshift,
|
strokeWidth,
|
||||||
point = c.point,
|
radialshift,
|
||||||
orient = c.orient,
|
point,
|
||||||
|
orient
|
||||||
|
} = c,
|
||||||
circumradius = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) / 1.5,
|
circumradius = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) / 1.5,
|
||||||
inradius = circumradius / document.getElementById('starRadiusMulitplier').value;
|
inradius = circumradius / document.getElementById('starRadiusMulitplier').value;
|
||||||
newFO.setAttribute('r', circumradius);
|
newFO.setAttribute('r', circumradius);
|
||||||
newFO.setAttribute('r2', inradius);
|
newFO.setAttribute('r2', inradius);
|
||||||
var polyPoints = '';
|
let polyPoints = '';
|
||||||
|
|
||||||
for (var s = 0; point >= s; s++) {
|
for (let s = 0; point >= s; s++) {
|
||||||
var angle = 2.0 * Math.PI * (s / point);
|
let angle = 2.0 * Math.PI * (s / point);
|
||||||
|
|
||||||
if (orient === 'point') {
|
if (orient === 'point') {
|
||||||
angle -= Math.PI / 2;
|
angle -= Math.PI / 2;
|
||||||
|
@ -241,9 +231,10 @@ var svgEditorExtension_star = (function () {
|
||||||
|
|
||||||
return undefined;
|
return undefined;
|
||||||
},
|
},
|
||||||
mouseUp: function mouseUp() {
|
|
||||||
|
mouseUp() {
|
||||||
if (svgCanvas.getMode() === 'star') {
|
if (svgCanvas.getMode() === 'star') {
|
||||||
var attrs = $(newFO).attr(['r']); // svgCanvas.addToSelection([newFO], true);
|
const attrs = $(newFO).attr(['r']); // svgCanvas.addToSelection([newFO], true);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
keep: attrs.r !== '0',
|
keep: attrs.r !== '0',
|
||||||
|
@ -253,13 +244,14 @@ var svgEditorExtension_star = (function () {
|
||||||
|
|
||||||
return undefined;
|
return undefined;
|
||||||
},
|
},
|
||||||
selectedChanged: function selectedChanged(opts) {
|
|
||||||
|
selectedChanged(opts) {
|
||||||
// Use this to update the current selected elements
|
// Use this to update the current selected elements
|
||||||
selElems = opts.elems;
|
selElems = opts.elems;
|
||||||
var i = selElems.length;
|
let i = selElems.length;
|
||||||
|
|
||||||
while (i--) {
|
while (i--) {
|
||||||
var elem = selElems[i];
|
const elem = selElems[i];
|
||||||
|
|
||||||
if (elem && elem.getAttribute('shape') === 'star') {
|
if (elem && elem.getAttribute('shape') === 'star') {
|
||||||
if (opts.selectedElement && !opts.multiselected) {
|
if (opts.selectedElement && !opts.multiselected) {
|
||||||
|
@ -275,18 +267,13 @@ var svgEditorExtension_star = (function () {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
elementChanged: function elementChanged(opts) {// const elem = opts.elems[0];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
case 11:
|
elementChanged(opts) {// const elem = opts.elems[0];
|
||||||
case "end":
|
|
||||||
return _context.stop();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}, _callee);
|
|
||||||
}))();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extStar;
|
return extStar;
|
||||||
|
|
|
@ -1,98 +1,6 @@
|
||||||
var svgEditorExtension_storage = (function () {
|
var svgEditorExtension_storage = (function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
||||||
try {
|
|
||||||
var info = gen[key](arg);
|
|
||||||
var value = info.value;
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (info.done) {
|
|
||||||
resolve(value);
|
|
||||||
} else {
|
|
||||||
Promise.resolve(value).then(_next, _throw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _asyncToGenerator(fn) {
|
|
||||||
return function () {
|
|
||||||
var self = this,
|
|
||||||
args = arguments;
|
|
||||||
return new Promise(function (resolve, reject) {
|
|
||||||
var gen = fn.apply(self, args);
|
|
||||||
|
|
||||||
function _next(value) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _throw(err) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
||||||
}
|
|
||||||
|
|
||||||
_next(undefined);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function _slicedToArray(arr, i) {
|
|
||||||
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
||||||
}
|
|
||||||
|
|
||||||
function _arrayWithHoles(arr) {
|
|
||||||
if (Array.isArray(arr)) return arr;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _iterableToArrayLimit(arr, i) {
|
|
||||||
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
|
|
||||||
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"] != null) _i["return"]();
|
|
||||||
} finally {
|
|
||||||
if (_d) throw _e;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return _arr;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _unsupportedIterableToArray(o, minLen) {
|
|
||||||
if (!o) return;
|
|
||||||
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
||||||
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
||||||
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
||||||
if (n === "Map" || n === "Set") return Array.from(o);
|
|
||||||
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _arrayLikeToArray(arr, len) {
|
|
||||||
if (len == null || len > arr.length) len = arr.length;
|
|
||||||
|
|
||||||
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
||||||
|
|
||||||
return arr2;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _nonIterableRest() {
|
|
||||||
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @file ext-storage.js
|
* @file ext-storage.js
|
||||||
*
|
*
|
||||||
|
@ -115,21 +23,35 @@ var svgEditorExtension_storage = (function () {
|
||||||
*/
|
*/
|
||||||
var extStorage = {
|
var extStorage = {
|
||||||
name: 'storage',
|
name: 'storage',
|
||||||
init: function init(_ref) {
|
|
||||||
var $ = _ref.$;
|
init({
|
||||||
var svgEditor = this;
|
$
|
||||||
var svgCanvas = svgEditor.canvas; // We could empty any already-set data for users when they decline storage,
|
}) {
|
||||||
|
const svgEditor = this;
|
||||||
|
const svgCanvas = svgEditor.canvas; // We could empty any already-set data for users when they decline storage,
|
||||||
// but it would be a risk for users who wanted to store but accidentally
|
// but it would be a risk for users who wanted to store but accidentally
|
||||||
// said "no"; instead, we'll let those who already set it, delete it themselves;
|
// said "no"; instead, we'll let those who already set it, delete it themselves;
|
||||||
// to change, set the "emptyStorageOnDecline" config setting to true
|
// to change, set the "emptyStorageOnDecline" config setting to true
|
||||||
// in svgedit-config-iife.js/svgedit-config-es.js.
|
// in svgedit-config-iife.js/svgedit-config-es.js.
|
||||||
|
|
||||||
var _svgEditor$curConfig = svgEditor.curConfig,
|
const {
|
||||||
emptyStorageOnDecline = _svgEditor$curConfig.emptyStorageOnDecline,
|
emptyStorageOnDecline,
|
||||||
noStorageOnLoad = _svgEditor$curConfig.noStorageOnLoad,
|
// When the code in svg-editor.js prevents local storage on load per
|
||||||
forceStorage = _svgEditor$curConfig.forceStorage;
|
// user request, we also prevent storing on unload here so as to
|
||||||
var storage = svgEditor.storage,
|
// avoid third-party sites making XSRF requests or providing links
|
||||||
updateCanvas = svgEditor.updateCanvas;
|
// which would cause the user's local storage not to load and then
|
||||||
|
// upon page unload (such as the user closing the window), the storage
|
||||||
|
// would thereby be set with an empty value, erasing any of the
|
||||||
|
// user's prior work. To change this behavior so that no use of storage
|
||||||
|
// or adding of new storage takes place regardless of settings, set
|
||||||
|
// the "noStorageOnLoad" config setting to true in svgedit-config-*.js.
|
||||||
|
noStorageOnLoad,
|
||||||
|
forceStorage
|
||||||
|
} = svgEditor.curConfig;
|
||||||
|
const {
|
||||||
|
storage,
|
||||||
|
updateCanvas
|
||||||
|
} = svgEditor;
|
||||||
/**
|
/**
|
||||||
* Replace `storagePrompt` parameter within URL.
|
* Replace `storagePrompt` parameter within URL.
|
||||||
* @param {string} val
|
* @param {string} val
|
||||||
|
@ -139,7 +61,7 @@ var svgEditorExtension_storage = (function () {
|
||||||
|
|
||||||
function replaceStoragePrompt(val) {
|
function replaceStoragePrompt(val) {
|
||||||
val = val ? 'storagePrompt=' + val : '';
|
val = val ? 'storagePrompt=' + val : '';
|
||||||
var loc = top.location; // Allow this to work with the embedded editor as well
|
const loc = top.location; // Allow this to work with the embedded editor as well
|
||||||
|
|
||||||
if (loc.href.includes('storagePrompt=')) {
|
if (loc.href.includes('storagePrompt=')) {
|
||||||
/*
|
/*
|
||||||
|
@ -164,7 +86,7 @@ var svgEditorExtension_storage = (function () {
|
||||||
|
|
||||||
function setSVGContentStorage(val) {
|
function setSVGContentStorage(val) {
|
||||||
if (storage) {
|
if (storage) {
|
||||||
var name = 'svgedit-' + svgEditor.curConfig.canvasName;
|
const name = 'svgedit-' + svgEditor.curConfig.canvasName;
|
||||||
|
|
||||||
if (!val) {
|
if (!val) {
|
||||||
storage.removeItem(name);
|
storage.removeItem(name);
|
||||||
|
@ -200,7 +122,7 @@ var svgEditorExtension_storage = (function () {
|
||||||
|
|
||||||
function emptyStorage() {
|
function emptyStorage() {
|
||||||
setSVGContentStorage('');
|
setSVGContentStorage('');
|
||||||
Object.keys(svgEditor.curPrefs).forEach(function (name) {
|
Object.keys(svgEditor.curPrefs).forEach(name => {
|
||||||
name = 'svg-edit-' + name;
|
name = 'svg-edit-' + name;
|
||||||
|
|
||||||
if (storage) {
|
if (storage) {
|
||||||
|
@ -238,13 +160,11 @@ var svgEditorExtension_storage = (function () {
|
||||||
}); // No need for explicit saving at all once storage is on
|
}); // No need for explicit saving at all once storage is on
|
||||||
// svgEditor.showSaveWarning = false;
|
// svgEditor.showSaveWarning = false;
|
||||||
|
|
||||||
var curPrefs = svgEditor.curPrefs;
|
const {
|
||||||
Object.entries(curPrefs).forEach(function (_ref2) {
|
curPrefs
|
||||||
var _ref3 = _slicedToArray(_ref2, 2),
|
} = svgEditor;
|
||||||
key = _ref3[0],
|
Object.entries(curPrefs).forEach(([key, val]) => {
|
||||||
val = _ref3[1];
|
const store = val !== undefined;
|
||||||
|
|
||||||
var store = val !== undefined;
|
|
||||||
key = 'svg-edit-' + key;
|
key = 'svg-edit-' + key;
|
||||||
|
|
||||||
if (!store) {
|
if (!store) {
|
||||||
|
@ -263,41 +183,37 @@ var svgEditorExtension_storage = (function () {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
var loaded = false;
|
let loaded = false;
|
||||||
return {
|
return {
|
||||||
name: 'storage',
|
name: 'storage',
|
||||||
langReady: function langReady(_ref4) {
|
|
||||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
|
||||||
var importLocale, storagePrompt, confirmSetStorage, message, storagePrefsAndContent, storagePrefsOnly, storagePrefs, storageNoPrefsOrContent, storageNoPrefs, rememberLabel, rememberTooltip, options, oldContainerWidth, oldContainerMarginLeft, oldContentHeight, oldContainerHeight, _yield$$$select, pref, checked;
|
|
||||||
|
|
||||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
async langReady({
|
||||||
while (1) {
|
importLocale
|
||||||
switch (_context.prev = _context.next) {
|
}) {
|
||||||
case 0:
|
const storagePrompt = new URL(top.location).searchParams.get('storagePrompt');
|
||||||
importLocale = _ref4.importLocale;
|
const confirmSetStorage = await importLocale();
|
||||||
storagePrompt = new URL(top.location).searchParams.get('storagePrompt');
|
const {
|
||||||
_context.next = 4;
|
message,
|
||||||
return importLocale();
|
storagePrefsAndContent,
|
||||||
|
storagePrefsOnly,
|
||||||
case 4:
|
storagePrefs,
|
||||||
confirmSetStorage = _context.sent;
|
storageNoPrefsOrContent,
|
||||||
message = confirmSetStorage.message, storagePrefsAndContent = confirmSetStorage.storagePrefsAndContent, storagePrefsOnly = confirmSetStorage.storagePrefsOnly, storagePrefs = confirmSetStorage.storagePrefs, storageNoPrefsOrContent = confirmSetStorage.storageNoPrefsOrContent, storageNoPrefs = confirmSetStorage.storageNoPrefs, rememberLabel = confirmSetStorage.rememberLabel, rememberTooltip = confirmSetStorage.rememberTooltip; // No need to run this one-time dialog again just because the user
|
storageNoPrefs,
|
||||||
|
rememberLabel,
|
||||||
|
rememberTooltip
|
||||||
|
} = confirmSetStorage; // No need to run this one-time dialog again just because the user
|
||||||
// changes the language
|
// changes the language
|
||||||
|
|
||||||
if (!loaded) {
|
if (loaded) {
|
||||||
_context.next = 8;
|
return;
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return _context.abrupt("return");
|
|
||||||
|
|
||||||
case 8:
|
|
||||||
loaded = true; // Note that the following can load even if "noStorageOnLoad" is
|
loaded = true; // Note that the following can load even if "noStorageOnLoad" is
|
||||||
// set to false; to avoid any chance of storage, avoid this
|
// set to false; to avoid any chance of storage, avoid this
|
||||||
// extension! (and to avoid using any prior storage, set the
|
// extension! (and to avoid using any prior storage, set the
|
||||||
// config option "noStorageOnLoad" to true).
|
// config option "noStorageOnLoad" to true).
|
||||||
|
|
||||||
if (!(!forceStorage && ( // If the URL has been explicitly set to always prompt the
|
if (!forceStorage && ( // If the URL has been explicitly set to always prompt the
|
||||||
// user (e.g., so one can be pointed to a URL where one
|
// user (e.g., so one can be pointed to a URL where one
|
||||||
// can alter one's settings, say to prevent future storage)...
|
// can alter one's settings, say to prevent future storage)...
|
||||||
storagePrompt === 'true' || // ...or...if the URL at least doesn't explicitly prevent a
|
storagePrompt === 'true' || // ...or...if the URL at least doesn't explicitly prevent a
|
||||||
|
@ -306,12 +222,8 @@ var svgEditorExtension_storage = (function () {
|
||||||
// continual prompts about it)...
|
// continual prompts about it)...
|
||||||
storagePrompt !== 'false' && // ...and this user hasn't previously indicated a desire for storage
|
storagePrompt !== 'false' && // ...and this user hasn't previously indicated a desire for storage
|
||||||
!document.cookie.match(/(?:^|;\s*)svgeditstore=(?:prefsAndContent|prefsOnly)/) // ...then show the storage prompt.
|
!document.cookie.match(/(?:^|;\s*)svgeditstore=(?:prefsAndContent|prefsOnly)/) // ...then show the storage prompt.
|
||||||
))) {
|
)) {
|
||||||
_context.next = 44;
|
const options = [];
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
options = [];
|
|
||||||
|
|
||||||
if (storage) {
|
if (storage) {
|
||||||
options.unshift({
|
options.unshift({
|
||||||
|
@ -335,7 +247,10 @@ var svgEditorExtension_storage = (function () {
|
||||||
} // Hack to temporarily provide a wide and high enough dialog
|
} // Hack to temporarily provide a wide and high enough dialog
|
||||||
|
|
||||||
|
|
||||||
oldContainerWidth = $('#dialog_container')[0].style.width, oldContainerMarginLeft = $('#dialog_container')[0].style.marginLeft, oldContentHeight = $('#dialog_content')[0].style.height, oldContainerHeight = $('#dialog_container')[0].style.height;
|
const oldContainerWidth = $('#dialog_container')[0].style.width,
|
||||||
|
oldContainerMarginLeft = $('#dialog_container')[0].style.marginLeft,
|
||||||
|
oldContentHeight = $('#dialog_content')[0].style.height,
|
||||||
|
oldContainerHeight = $('#dialog_container')[0].style.height;
|
||||||
$('#dialog_content')[0].style.height = '120px';
|
$('#dialog_content')[0].style.height = '120px';
|
||||||
$('#dialog_container')[0].style.height = '170px';
|
$('#dialog_container')[0].style.height = '170px';
|
||||||
$('#dialog_container')[0].style.width = '800px';
|
$('#dialog_container')[0].style.width = '800px';
|
||||||
|
@ -343,23 +258,16 @@ var svgEditorExtension_storage = (function () {
|
||||||
// From svg-editor.js
|
// From svg-editor.js
|
||||||
|
|
||||||
svgEditor.storagePromptState = 'waiting';
|
svgEditor.storagePromptState = 'waiting';
|
||||||
_context.next = 20;
|
const {
|
||||||
return $.select(message, options, null, null, {
|
response: pref,
|
||||||
|
checked
|
||||||
|
} = await $.select(message, options, null, null, {
|
||||||
label: rememberLabel,
|
label: rememberLabel,
|
||||||
checked: true,
|
checked: true,
|
||||||
tooltip: rememberTooltip
|
tooltip: rememberTooltip
|
||||||
});
|
});
|
||||||
|
|
||||||
case 20:
|
if (pref && pref !== 'noPrefsOrContent') {
|
||||||
_yield$$$select = _context.sent;
|
|
||||||
pref = _yield$$$select.response;
|
|
||||||
checked = _yield$$$select.checked;
|
|
||||||
|
|
||||||
if (!(pref && pref !== 'noPrefsOrContent')) {
|
|
||||||
_context.next = 30;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Regardless of whether the user opted
|
// Regardless of whether the user opted
|
||||||
// to remember the choice (and move to a URL which won't
|
// to remember the choice (and move to a URL which won't
|
||||||
// ask them again), we have to assume the user
|
// ask them again), we have to assume the user
|
||||||
|
@ -372,19 +280,11 @@ var svgEditorExtension_storage = (function () {
|
||||||
// don't want ask them again upon page refresh so move
|
// don't want ask them again upon page refresh so move
|
||||||
// them instead to a URL which does not always prompt
|
// them instead to a URL which does not always prompt
|
||||||
|
|
||||||
if (!(storagePrompt === 'true' && checked)) {
|
if (storagePrompt === 'true' && checked) {
|
||||||
_context.next = 28;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
replaceStoragePrompt();
|
replaceStoragePrompt();
|
||||||
return _context.abrupt("return");
|
return;
|
||||||
|
}
|
||||||
case 28:
|
} else {
|
||||||
_context.next = 35;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 30:
|
|
||||||
// The user does not wish storage (or cancelled, which we treat equivalently)
|
// The user does not wish storage (or cancelled, which we treat equivalently)
|
||||||
removeStoragePrefCookie();
|
removeStoragePrefCookie();
|
||||||
|
|
||||||
|
@ -393,17 +293,14 @@ var svgEditorExtension_storage = (function () {
|
||||||
emptyStorage();
|
emptyStorage();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!(pref && checked)) {
|
if (pref && checked) {
|
||||||
_context.next = 35;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Open a URL which won't set storage and won't prompt user about storage
|
// Open a URL which won't set storage and won't prompt user about storage
|
||||||
replaceStoragePrompt('false');
|
replaceStoragePrompt('false');
|
||||||
return _context.abrupt("return");
|
return;
|
||||||
|
}
|
||||||
|
} // Reset width/height of dialog (e.g., for use by Export)
|
||||||
|
|
||||||
|
|
||||||
case 35:
|
|
||||||
// Reset width/height of dialog (e.g., for use by Export)
|
|
||||||
$('#dialog_container')[0].style.width = oldContainerWidth;
|
$('#dialog_container')[0].style.width = oldContainerWidth;
|
||||||
$('#dialog_container')[0].style.marginLeft = oldContainerMarginLeft;
|
$('#dialog_container')[0].style.marginLeft = oldContainerMarginLeft;
|
||||||
$('#dialog_content')[0].style.height = oldContentHeight;
|
$('#dialog_content')[0].style.height = oldContentHeight;
|
||||||
|
@ -419,24 +316,14 @@ var svgEditorExtension_storage = (function () {
|
||||||
setupBeforeUnloadListener();
|
setupBeforeUnloadListener();
|
||||||
svgEditor.storagePromptState = 'closed';
|
svgEditor.storagePromptState = 'closed';
|
||||||
updateCanvas(true);
|
updateCanvas(true);
|
||||||
_context.next = 45;
|
} else if (!noStorageOnLoad || forceStorage) {
|
||||||
break;
|
|
||||||
|
|
||||||
case 44:
|
|
||||||
if (!noStorageOnLoad || forceStorage) {
|
|
||||||
setupBeforeUnloadListener();
|
setupBeforeUnloadListener();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
case 45:
|
|
||||||
case "end":
|
|
||||||
return _context.stop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, _callee);
|
|
||||||
}))();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extStorage;
|
return extStorage;
|
||||||
|
|
|
@ -1,42 +1,6 @@
|
||||||
var svgEditorExtension_webappfind = (function () {
|
var svgEditorExtension_webappfind = (function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
||||||
try {
|
|
||||||
var info = gen[key](arg);
|
|
||||||
var value = info.value;
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (info.done) {
|
|
||||||
resolve(value);
|
|
||||||
} else {
|
|
||||||
Promise.resolve(value).then(_next, _throw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _asyncToGenerator(fn) {
|
|
||||||
return function () {
|
|
||||||
var self = this,
|
|
||||||
args = arguments;
|
|
||||||
return new Promise(function (resolve, reject) {
|
|
||||||
var gen = fn.apply(self, args);
|
|
||||||
|
|
||||||
function _next(value) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _throw(err) {
|
|
||||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
||||||
}
|
|
||||||
|
|
||||||
_next(undefined);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Depends on Firefox add-on and executables from
|
* Depends on Firefox add-on and executables from
|
||||||
* {@link https://github.com/brettz9/webappfind}.
|
* {@link https://github.com/brettz9/webappfind}.
|
||||||
|
@ -46,25 +10,18 @@ var svgEditorExtension_webappfind = (function () {
|
||||||
*/
|
*/
|
||||||
var extWebappfind = {
|
var extWebappfind = {
|
||||||
name: 'webappfind',
|
name: 'webappfind',
|
||||||
init: function init(_ref) {
|
|
||||||
var _this = this;
|
|
||||||
|
|
||||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
async init({
|
||||||
var importLocale, $, strings, svgEditor, saveMessage, readMessage, excludedMessages, pathID, buttons;
|
importLocale,
|
||||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
$
|
||||||
while (1) {
|
}) {
|
||||||
switch (_context.prev = _context.next) {
|
const strings = await importLocale();
|
||||||
case 0:
|
const svgEditor = this;
|
||||||
importLocale = _ref.importLocale, $ = _ref.$;
|
const saveMessage = 'save',
|
||||||
_context.next = 3;
|
readMessage = 'read',
|
||||||
return importLocale();
|
excludedMessages = [readMessage, saveMessage];
|
||||||
|
let pathID;
|
||||||
case 3:
|
this.canvas.bind('message',
|
||||||
strings = _context.sent;
|
|
||||||
svgEditor = _this;
|
|
||||||
saveMessage = 'save', readMessage = 'read', excludedMessages = [readMessage, saveMessage];
|
|
||||||
|
|
||||||
_this.canvas.bind('message',
|
|
||||||
/**
|
/**
|
||||||
* @param {external:Window} win
|
* @param {external:Window} win
|
||||||
* @param {PlainObject} info
|
* @param {PlainObject} info
|
||||||
|
@ -74,20 +31,21 @@ var svgEditorExtension_webappfind = (function () {
|
||||||
* @throws {Error} Unexpected event type
|
* @throws {Error} Unexpected event type
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
function (win, _ref2) {
|
(win, {
|
||||||
var data = _ref2.data,
|
data,
|
||||||
origin = _ref2.origin;
|
origin
|
||||||
|
}) => {
|
||||||
// eslint-disable-line no-shadow
|
// eslint-disable-line no-shadow
|
||||||
// console.log('data, origin', data, origin);
|
// console.log('data, origin', data, origin);
|
||||||
var type, content;
|
let type, content;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
var _data$webappfind = data.webappfind;
|
({
|
||||||
type = _data$webappfind.type;
|
type,
|
||||||
pathID = _data$webappfind.pathID;
|
pathID,
|
||||||
content = _data$webappfind.content;
|
content
|
||||||
|
} = data.webappfind); // May throw if data is not an object
|
||||||
|
|
||||||
// May throw if data is not an object
|
|
||||||
if (origin !== location.origin || // We are only interested in a message sent as though within this URL by our browser add-on
|
if (origin !== location.origin || // We are only interested in a message sent as though within this URL by our browser add-on
|
||||||
excludedMessages.includes(type) // Avoid our post below (other messages might be possible in the future which may also need to be excluded if your subsequent code makes assumptions on the type of message this is)
|
excludedMessages.includes(type) // Avoid our post below (other messages might be possible in the future which may also need to be excluded if your subsequent code makes assumptions on the type of message this is)
|
||||||
) {
|
) {
|
||||||
|
@ -108,7 +66,7 @@ var svgEditorExtension_webappfind = (function () {
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'save-end':
|
case 'save-end':
|
||||||
$.alert("save complete for pathID ".concat(pathID, "!"));
|
$.alert(`save complete for pathID ${pathID}!`);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
|
@ -128,8 +86,7 @@ var svgEditorExtension_webappfind = (function () {
|
||||||
);
|
);
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
const buttons = [{
|
||||||
buttons = [{
|
|
||||||
id: 'webappfind_save',
|
id: 'webappfind_save',
|
||||||
//
|
//
|
||||||
icon: svgEditor.curConfig.extIconsPath + 'webappfind.png',
|
icon: svgEditor.curConfig.extIconsPath + 'webappfind.png',
|
||||||
|
@ -137,7 +94,7 @@ var svgEditorExtension_webappfind = (function () {
|
||||||
position: 4,
|
position: 4,
|
||||||
// Before 0-based index position 4 (after the regular "Save Image (S)")
|
// Before 0-based index position 4 (after the regular "Save Image (S)")
|
||||||
events: {
|
events: {
|
||||||
click: function click() {
|
click() {
|
||||||
if (!pathID) {
|
if (!pathID) {
|
||||||
// Not ready yet as haven't received first payload
|
// Not ready yet as haven't received first payload
|
||||||
return;
|
return;
|
||||||
|
@ -146,31 +103,25 @@ var svgEditorExtension_webappfind = (function () {
|
||||||
window.postMessage({
|
window.postMessage({
|
||||||
webappfind: {
|
webappfind: {
|
||||||
type: saveMessage,
|
type: saveMessage,
|
||||||
pathID: pathID,
|
pathID,
|
||||||
content: svgEditor.canvas.getSvgString()
|
content: svgEditor.canvas.getSvgString()
|
||||||
}
|
}
|
||||||
}, window.location.origin === 'null' // Avoid "null" string error for `file:` protocol (even
|
}, window.location.origin === 'null' // Avoid "null" string error for `file:` protocol (even
|
||||||
// though file protocol not currently supported by add-on)
|
// though file protocol not currently supported by add-on)
|
||||||
? '*' : window.location.origin);
|
? '*' : window.location.origin);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
return _context.abrupt("return", {
|
return {
|
||||||
name: strings.name,
|
name: strings.name,
|
||||||
svgicons: svgEditor.curConfig.extIconsPath + 'webappfind-icon.svg',
|
svgicons: svgEditor.curConfig.extIconsPath + 'webappfind-icon.svg',
|
||||||
buttons: strings.buttons.map(function (button, i) {
|
buttons: strings.buttons.map((button, i) => {
|
||||||
return Object.assign(buttons[i], button);
|
return Object.assign(buttons[i], button);
|
||||||
})
|
})
|
||||||
});
|
};
|
||||||
|
}
|
||||||
|
|
||||||
case 9:
|
|
||||||
case "end":
|
|
||||||
return _context.stop();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, _callee);
|
|
||||||
}))();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extWebappfind;
|
return extWebappfind;
|
||||||
|
|
|
@ -1,55 +1,6 @@
|
||||||
var svgEditorExtension_xdomain_messaging = (function () {
|
var svgEditorExtension_xdomain_messaging = (function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function _typeof(obj) {
|
|
||||||
"@babel/helpers - typeof";
|
|
||||||
|
|
||||||
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
|
||||||
_typeof = function (obj) {
|
|
||||||
return typeof obj;
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
_typeof = function (obj) {
|
|
||||||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return _typeof(obj);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _toConsumableArray(arr) {
|
|
||||||
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
|
||||||
}
|
|
||||||
|
|
||||||
function _arrayWithoutHoles(arr) {
|
|
||||||
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _iterableToArray(iter) {
|
|
||||||
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _unsupportedIterableToArray(o, minLen) {
|
|
||||||
if (!o) return;
|
|
||||||
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
||||||
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
||||||
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
||||||
if (n === "Map" || n === "Set") return Array.from(o);
|
|
||||||
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _arrayLikeToArray(arr, len) {
|
|
||||||
if (len == null || len > arr.length) len = arr.length;
|
|
||||||
|
|
||||||
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
||||||
|
|
||||||
return arr2;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _nonIterableSpread() {
|
|
||||||
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Should not be needed for same domain control (just call via child frame),
|
* Should not be needed for same domain control (just call via child frame),
|
||||||
* but an API common for cross-domain and same domain use can be found
|
* but an API common for cross-domain and same domain use can be found
|
||||||
|
@ -57,38 +8,43 @@ var svgEditorExtension_xdomain_messaging = (function () {
|
||||||
*/
|
*/
|
||||||
var extXdomainMessaging = {
|
var extXdomainMessaging = {
|
||||||
name: 'xdomain-messaging',
|
name: 'xdomain-messaging',
|
||||||
init: function init() {
|
|
||||||
var svgEditor = this;
|
init() {
|
||||||
var svgCanvas = svgEditor.canvas;
|
const svgEditor = this;
|
||||||
|
const svgCanvas = svgEditor.canvas;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
window.addEventListener('message', function (e) {
|
window.addEventListener('message', function (e) {
|
||||||
// We accept and post strings for the sake of IE9 support
|
// We accept and post strings for the sake of IE9 support
|
||||||
if (!e.data || !['string', 'object'].includes(_typeof(e.data)) || e.data.charAt() === '|') {
|
if (!e.data || !['string', 'object'].includes(typeof e.data) || e.data.charAt() === '|') {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var data = _typeof(e.data) === 'object' ? e.data : JSON.parse(e.data);
|
const data = typeof e.data === 'object' ? e.data : JSON.parse(e.data);
|
||||||
|
|
||||||
if (!data || _typeof(data) !== 'object' || data.namespace !== 'svgCanvas') {
|
if (!data || typeof data !== 'object' || data.namespace !== 'svgCanvas') {
|
||||||
return;
|
return;
|
||||||
} // The default is not to allow any origins, including even the same domain or
|
} // The default is not to allow any origins, including even the same domain or
|
||||||
// if run on a `file:///` URL. See `svgedit-config-es.js` for an example of how
|
// if run on a `file:///` URL. See `svgedit-config-es.js` for an example of how
|
||||||
// to configure
|
// to configure
|
||||||
|
|
||||||
|
|
||||||
var allowedOrigins = svgEditor.curConfig.allowedOrigins;
|
const {
|
||||||
|
allowedOrigins
|
||||||
|
} = svgEditor.curConfig;
|
||||||
|
|
||||||
if (!allowedOrigins.includes('*') && !allowedOrigins.includes(e.origin)) {
|
if (!allowedOrigins.includes('*') && !allowedOrigins.includes(e.origin)) {
|
||||||
console.log("Origin ".concat(e.origin, " not whitelisted for posting to ").concat(window.origin)); // eslint-disable-line no-console
|
console.log(`Origin ${e.origin} not whitelisted for posting to ${window.origin}`); // eslint-disable-line no-console
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var cbid = data.id;
|
const cbid = data.id;
|
||||||
var name = data.name,
|
const {
|
||||||
args = data.args;
|
name,
|
||||||
var message = {
|
args
|
||||||
|
} = data;
|
||||||
|
const message = {
|
||||||
namespace: 'svg-edit',
|
namespace: 'svg-edit',
|
||||||
id: cbid
|
id: cbid
|
||||||
};
|
};
|
||||||
|
@ -96,7 +52,7 @@ var svgEditorExtension_xdomain_messaging = (function () {
|
||||||
try {
|
try {
|
||||||
// Now that we know the origin is trusted, we perform otherwise
|
// Now that we know the origin is trusted, we perform otherwise
|
||||||
// unsafe arbitrary canvas method execution
|
// unsafe arbitrary canvas method execution
|
||||||
message.result = svgCanvas[name].apply(svgCanvas, _toConsumableArray(args)); // lgtm [js/remote-property-injection]
|
message.result = svgCanvas[name](...args); // lgtm [js/remote-property-injection]
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
message.error = err.message;
|
message.error = err.message;
|
||||||
}
|
}
|
||||||
|
@ -107,6 +63,7 @@ var svgEditorExtension_xdomain_messaging = (function () {
|
||||||
console.log('Error with xdomain message listener: ' + err); // eslint-disable-line no-console
|
console.log('Error with xdomain message listener: ' + err); // eslint-disable-line no-console
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return extXdomainMessaging;
|
return extXdomainMessaging;
|
||||||
|
|
|
@ -20,12 +20,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* globals jQuery */
|
/* globals jQuery */
|
||||||
var $ = jQuery;
|
const $ = jQuery;
|
||||||
$('a').click(function () {
|
$('a').click(function () {
|
||||||
var href = this.href;
|
const {
|
||||||
var target = window.parent;
|
href
|
||||||
|
} = this;
|
||||||
|
const target = window.parent;
|
||||||
|
|
||||||
var post = function post(message) {
|
const post = message => {
|
||||||
// Todo: Make origin customizable as set by opening window
|
// Todo: Make origin customizable as set by opening window
|
||||||
// Todo: If dropping IE9, avoid stringifying
|
// Todo: If dropping IE9, avoid stringifying
|
||||||
target.postMessage(JSON.stringify(_extends({
|
target.postMessage(JSON.stringify(_extends({
|
||||||
|
@ -42,15 +44,15 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!href.includes('.svg')) {
|
if (!href.includes('.svg')) {
|
||||||
var img = new Image();
|
const img = new Image();
|
||||||
img.addEventListener('load', function () {
|
img.addEventListener('load', function () {
|
||||||
var canvas = document.createElement('canvas');
|
const canvas = document.createElement('canvas');
|
||||||
canvas.width = this.width;
|
canvas.width = this.width;
|
||||||
canvas.height = this.height; // load the raster image into the canvas
|
canvas.height = this.height; // load the raster image into the canvas
|
||||||
|
|
||||||
canvas.getContext('2d').drawImage(this, 0, 0); // retrieve the data: URL
|
canvas.getContext('2d').drawImage(this, 0, 0); // retrieve the data: URL
|
||||||
|
|
||||||
var data;
|
let data;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
data = canvas.toDataURL();
|
data = canvas.toDataURL();
|
||||||
|
@ -63,8 +65,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
post({
|
post({
|
||||||
href: href,
|
href,
|
||||||
data: data
|
data
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
img.src = href;
|
img.src = href;
|
||||||
|
@ -72,8 +74,8 @@
|
||||||
// Do ajax request for image's href value
|
// Do ajax request for image's href value
|
||||||
$.get(href, function (data) {
|
$.get(href, function (data) {
|
||||||
post({
|
post({
|
||||||
href: href,
|
href,
|
||||||
data: data
|
data
|
||||||
});
|
});
|
||||||
}, 'html'); // 'html' is necessary to keep returned data as a string
|
}, 'html'); // 'html' is necessary to keep returned data as a string
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,100 +1,6 @@
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function _classCallCheck(instance, Constructor) {
|
|
||||||
if (!(instance instanceof Constructor)) {
|
|
||||||
throw new TypeError("Cannot call a class as a 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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _createClass(Constructor, protoProps, staticProps) {
|
|
||||||
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
|
||||||
if (staticProps) _defineProperties(Constructor, staticProps);
|
|
||||||
return Constructor;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _slicedToArray(arr, i) {
|
|
||||||
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
||||||
}
|
|
||||||
|
|
||||||
function _toConsumableArray(arr) {
|
|
||||||
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
|
||||||
}
|
|
||||||
|
|
||||||
function _arrayWithoutHoles(arr) {
|
|
||||||
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _arrayWithHoles(arr) {
|
|
||||||
if (Array.isArray(arr)) return arr;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _iterableToArray(iter) {
|
|
||||||
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _iterableToArrayLimit(arr, i) {
|
|
||||||
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
|
|
||||||
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"] != null) _i["return"]();
|
|
||||||
} finally {
|
|
||||||
if (_d) throw _e;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return _arr;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _unsupportedIterableToArray(o, minLen) {
|
|
||||||
if (!o) return;
|
|
||||||
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
||||||
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
||||||
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
||||||
if (n === "Map" || n === "Set") return Array.from(o);
|
|
||||||
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _arrayLikeToArray(arr, len) {
|
|
||||||
if (len == null || len > arr.length) len = arr.length;
|
|
||||||
|
|
||||||
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
||||||
|
|
||||||
return arr2;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _nonIterableSpread() {
|
|
||||||
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
||||||
}
|
|
||||||
|
|
||||||
function _nonIterableRest() {
|
|
||||||
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* For parsing color values.
|
* For parsing color values.
|
||||||
* @module RGBColor
|
* @module RGBColor
|
||||||
|
@ -102,7 +8,7 @@
|
||||||
* @see https://www.phpied.com/rgb-color-parser-in-javascript/
|
* @see https://www.phpied.com/rgb-color-parser-in-javascript/
|
||||||
* @license MIT
|
* @license MIT
|
||||||
*/
|
*/
|
||||||
var simpleColors = {
|
const simpleColors = {
|
||||||
aliceblue: 'f0f8ff',
|
aliceblue: 'f0f8ff',
|
||||||
antiquewhite: 'faebd7',
|
antiquewhite: 'faebd7',
|
||||||
aqua: '00ffff',
|
aqua: '00ffff',
|
||||||
|
@ -248,59 +154,43 @@
|
||||||
yellowgreen: '9acd32'
|
yellowgreen: '9acd32'
|
||||||
}; // array of color definition objects
|
}; // array of color definition objects
|
||||||
|
|
||||||
var colorDefs = [{
|
const colorDefs = [{
|
||||||
re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
|
re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
|
||||||
// re: /^rgb\((?<r>\d{1,3}),\s*(?<g>\d{1,3}),\s*(?<b>\d{1,3})\)$/,
|
// re: /^rgb\((?<r>\d{1,3}),\s*(?<g>\d{1,3}),\s*(?<b>\d{1,3})\)$/,
|
||||||
example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'],
|
example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'],
|
||||||
process: function process(_) {
|
|
||||||
for (var _len = arguments.length, bits = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
process(_, ...bits) {
|
||||||
bits[_key - 1] = arguments[_key];
|
return bits.map(b => Number.parseInt(b));
|
||||||
}
|
}
|
||||||
|
|
||||||
return bits.map(function (b) {
|
|
||||||
return Number.parseInt(b);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, {
|
}, {
|
||||||
re: /^(\w{2})(\w{2})(\w{2})$/,
|
re: /^(\w{2})(\w{2})(\w{2})$/,
|
||||||
// re: /^(?<r>\w{2})(?<g>\w{2})(?<b>\w{2})$/,
|
// re: /^(?<r>\w{2})(?<g>\w{2})(?<b>\w{2})$/,
|
||||||
example: ['#00ff00', '336699'],
|
example: ['#00ff00', '336699'],
|
||||||
process: function process(_) {
|
|
||||||
for (var _len2 = arguments.length, bits = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
process(_, ...bits) {
|
||||||
bits[_key2 - 1] = arguments[_key2];
|
return bits.map(b => Number.parseInt(b, 16));
|
||||||
}
|
}
|
||||||
|
|
||||||
return bits.map(function (b) {
|
|
||||||
return Number.parseInt(b, 16);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, {
|
}, {
|
||||||
re: /^(\w)(\w)(\w)$/,
|
re: /^(\w)(\w)(\w)$/,
|
||||||
// re: /^(?<r>\w{1})(?<g>\w{1})(?<b>\w{1})$/,
|
// re: /^(?<r>\w{1})(?<g>\w{1})(?<b>\w{1})$/,
|
||||||
example: ['#fb0', 'f0f'],
|
example: ['#fb0', 'f0f'],
|
||||||
process: function process(_) {
|
|
||||||
for (var _len3 = arguments.length, bits = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
|
process(_, ...bits) {
|
||||||
bits[_key3 - 1] = arguments[_key3];
|
return bits.map(b => Number.parseInt(b + b, 16));
|
||||||
}
|
}
|
||||||
|
|
||||||
return bits.map(function (b) {
|
|
||||||
return Number.parseInt(b + b, 16);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}];
|
}];
|
||||||
/**
|
/**
|
||||||
* A class to parse color values.
|
* A class to parse color values.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var RGBColor = /*#__PURE__*/function () {
|
class RGBColor {
|
||||||
/**
|
/**
|
||||||
* @param {string} colorString
|
* @param {string} colorString
|
||||||
*/
|
*/
|
||||||
function RGBColor(colorString) {
|
constructor(colorString) {
|
||||||
var _this = this;
|
|
||||||
|
|
||||||
_classCallCheck(this, RGBColor);
|
|
||||||
|
|
||||||
this.ok = false; // strip any leading #
|
this.ok = false; // strip any leading #
|
||||||
|
|
||||||
if (colorString.charAt(0) === '#') {
|
if (colorString.charAt(0) === '#') {
|
||||||
|
@ -318,24 +208,20 @@
|
||||||
// search through the definitions to find a match
|
// search through the definitions to find a match
|
||||||
|
|
||||||
|
|
||||||
colorDefs.forEach(function (_ref) {
|
colorDefs.forEach(({
|
||||||
var re = _ref.re,
|
re,
|
||||||
processor = _ref.process;
|
process: processor
|
||||||
var bits = re.exec(colorString);
|
}) => {
|
||||||
|
const bits = re.exec(colorString);
|
||||||
|
|
||||||
if (bits) {
|
if (bits) {
|
||||||
var _processor = processor.apply(void 0, _toConsumableArray(bits)),
|
const [r, g, b] = processor(...bits);
|
||||||
_processor2 = _slicedToArray(_processor, 3),
|
Object.assign(this, {
|
||||||
r = _processor2[0],
|
r,
|
||||||
g = _processor2[1],
|
g,
|
||||||
b = _processor2[2];
|
b
|
||||||
|
|
||||||
Object.assign(_this, {
|
|
||||||
r: r,
|
|
||||||
g: g,
|
|
||||||
b: b
|
|
||||||
});
|
});
|
||||||
_this.ok = true;
|
this.ok = true;
|
||||||
}
|
}
|
||||||
}); // validate/cleanup values
|
}); // validate/cleanup values
|
||||||
|
|
||||||
|
@ -349,21 +235,18 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
_createClass(RGBColor, [{
|
toRGB() {
|
||||||
key: "toRGB",
|
|
||||||
value: function toRGB() {
|
|
||||||
return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
|
return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* @returns {string}
|
* @returns {string}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
}, {
|
|
||||||
key: "toHex",
|
toHex() {
|
||||||
value: function toHex() {
|
let r = this.r.toString(16);
|
||||||
var r = this.r.toString(16);
|
let g = this.g.toString(16);
|
||||||
var g = this.g.toString(16);
|
let b = this.b.toString(16);
|
||||||
var b = this.b.toString(16);
|
|
||||||
|
|
||||||
if (r.length === 1) {
|
if (r.length === 1) {
|
||||||
r = '0' + r;
|
r = '0' + r;
|
||||||
|
@ -384,38 +267,43 @@
|
||||||
* @returns {HTMLUListElement}
|
* @returns {HTMLUListElement}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
}], [{
|
|
||||||
key: "getHelpXML",
|
static getHelpXML() {
|
||||||
value: function getHelpXML() {
|
const examples = [// add regexps
|
||||||
var examples = [].concat(_toConsumableArray(colorDefs.flatMap(function (_ref2) {
|
...colorDefs.flatMap(({
|
||||||
var example = _ref2.example;
|
example
|
||||||
|
}) => {
|
||||||
return example;
|
return example;
|
||||||
})), _toConsumableArray(Object.keys(simpleColors)));
|
}), // add type-in colors
|
||||||
var xml = document.createElement('ul');
|
...Object.keys(simpleColors)];
|
||||||
|
const xml = document.createElement('ul');
|
||||||
xml.setAttribute('id', 'rgbcolor-examples');
|
xml.setAttribute('id', 'rgbcolor-examples');
|
||||||
xml.append.apply(xml, _toConsumableArray(examples.map(function (example) {
|
xml.append(...examples.map(example => {
|
||||||
try {
|
try {
|
||||||
var listItem = document.createElement('li');
|
const listItem = document.createElement('li');
|
||||||
var listColor = new RGBColor(example);
|
const listColor = new RGBColor(example);
|
||||||
var exampleDiv = document.createElement('div');
|
const exampleDiv = document.createElement('div');
|
||||||
exampleDiv.style.cssText = "\n margin: 3px;\n border: 1px solid black;\n background: ".concat(listColor.toHex(), ";\n color: ").concat(listColor.toHex(), ";");
|
exampleDiv.style.cssText = `
|
||||||
|
margin: 3px;
|
||||||
|
border: 1px solid black;
|
||||||
|
background: ${listColor.toHex()};
|
||||||
|
color: ${listColor.toHex()};`;
|
||||||
exampleDiv.append('test');
|
exampleDiv.append('test');
|
||||||
var listItemValue = " ".concat(example, " -> ").concat(listColor.toRGB(), " -> ").concat(listColor.toHex());
|
const listItemValue = ` ${example} -> ${listColor.toRGB()} -> ${listColor.toHex()}`;
|
||||||
listItem.append(exampleDiv, listItemValue);
|
listItem.append(exampleDiv, listItemValue);
|
||||||
return listItem;
|
return listItem;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
})));
|
}));
|
||||||
return xml;
|
return xml;
|
||||||
}
|
}
|
||||||
}]);
|
|
||||||
|
|
||||||
return RGBColor;
|
}
|
||||||
}();
|
|
||||||
|
|
||||||
var jsPDFAPI = jsPDF.API;
|
/* globals jsPDF */
|
||||||
var pdfSvgAttr = {
|
const jsPDFAPI = jsPDF.API;
|
||||||
|
const pdfSvgAttr = {
|
||||||
// allowed attributes. all others are removed from the preview.
|
// allowed attributes. all others are removed from the preview.
|
||||||
g: ['stroke', 'fill', 'stroke-width'],
|
g: ['stroke', 'fill', 'stroke-width'],
|
||||||
line: ['x1', 'y1', 'x2', 'y2', 'stroke', 'stroke-width'],
|
line: ['x1', 'y1', 'x2', 'y2', 'stroke', 'stroke-width'],
|
||||||
|
@ -428,37 +316,35 @@
|
||||||
text: ['x', 'y', 'font-size', 'font-family', 'text-anchor', 'font-weight', 'font-style', 'fill']
|
text: ['x', 'y', 'font-size', 'font-family', 'text-anchor', 'font-weight', 'font-style', 'fill']
|
||||||
};
|
};
|
||||||
|
|
||||||
var attributeIsNotEmpty = function attributeIsNotEmpty(node, attr) {
|
const attributeIsNotEmpty = function (node, attr) {
|
||||||
var attVal = attr ? node.getAttribute(attr) : node;
|
const attVal = attr ? node.getAttribute(attr) : node;
|
||||||
return attVal !== '' && attVal !== null && attVal !== 'null';
|
return attVal !== '' && attVal !== null && attVal !== 'null';
|
||||||
};
|
};
|
||||||
|
|
||||||
var nodeIs = function nodeIs(node, possible) {
|
const nodeIs = function (node, possible) {
|
||||||
return possible.includes(node.tagName.toLowerCase());
|
return possible.includes(node.tagName.toLowerCase());
|
||||||
};
|
};
|
||||||
|
|
||||||
var removeAttributes = function removeAttributes(node, attributes) {
|
const removeAttributes = function (node, attributes) {
|
||||||
var toRemove = [];
|
const toRemove = [];
|
||||||
[].forEach.call(node.attributes, function (a) {
|
[].forEach.call(node.attributes, function (a) {
|
||||||
if (attributeIsNotEmpty(a) && !attributes.includes(a.name.toLowerCase())) {
|
if (attributeIsNotEmpty(a) && !attributes.includes(a.name.toLowerCase())) {
|
||||||
toRemove.push(a.name);
|
toRemove.push(a.name);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
toRemove.forEach(function (a) {
|
toRemove.forEach(a => {
|
||||||
node.removeAttribute(a.name);
|
node.removeAttribute(a.name);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
var numRgx = /[+-]?(?:\d+\.\d*|\d+|\.\d+)(?:[eE]\d+|[eE][+-]\d+|)/g;
|
const numRgx = /[+-]?(?:\d+\.\d*|\d+|\.\d+)(?:[eE]\d+|[eE][+-]\d+|)/g;
|
||||||
|
|
||||||
var getLinesOptionsOfPoly = function getLinesOptionsOfPoly(node) {
|
const getLinesOptionsOfPoly = function (node) {
|
||||||
var nums = node.getAttribute('points');
|
let nums = node.getAttribute('points');
|
||||||
nums = nums && nums.match(numRgx) || [];
|
nums = nums && nums.match(numRgx) || [];
|
||||||
|
|
||||||
if (nums && nums.length) {
|
if (nums && nums.length) {
|
||||||
nums = nums.map(function (n) {
|
nums = nums.map(n => Number(n));
|
||||||
return Number(n);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (nums.length % 2) {
|
if (nums.length % 2) {
|
||||||
nums.length--;
|
nums.length--;
|
||||||
|
@ -471,43 +357,40 @@
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
var _nums = nums,
|
const [x, y] = nums,
|
||||||
_nums2 = _slicedToArray(_nums, 2),
|
|
||||||
x = _nums2[0],
|
|
||||||
y = _nums2[1],
|
|
||||||
lines = [];
|
lines = [];
|
||||||
|
|
||||||
for (var i = 2; i < nums.length; i += 2) {
|
for (let i = 2; i < nums.length; i += 2) {
|
||||||
lines.push([nums[i] - nums[i - 2], nums[i + 1] - nums[i - 1]]);
|
lines.push([nums[i] - nums[i - 2], nums[i + 1] - nums[i - 1]]);
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
x: x,
|
x,
|
||||||
y: y,
|
y,
|
||||||
lines: lines
|
lines
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
var getLinesOptionsOfPath = function getLinesOptionsOfPath(node) {
|
const getLinesOptionsOfPath = function (node) {
|
||||||
var segList = node.pathSegList,
|
const segList = node.pathSegList,
|
||||||
n = segList.numberOfItems,
|
n = segList.numberOfItems,
|
||||||
opsList = [];
|
opsList = [];
|
||||||
var ops = {
|
let ops = {
|
||||||
lines: []
|
lines: []
|
||||||
};
|
};
|
||||||
var curr = {
|
const curr = {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0
|
y: 0
|
||||||
};
|
};
|
||||||
var reflectControl = {
|
const reflectControl = {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0
|
y: 0
|
||||||
};
|
};
|
||||||
|
|
||||||
var toRelative = function toRelative(nums, relativeTo) {
|
const toRelative = function (nums, relativeTo) {
|
||||||
var re = [];
|
const re = [];
|
||||||
|
|
||||||
for (var i = 0; i < nums.length - 1; i += 2) {
|
for (let i = 0; i < nums.length - 1; i += 2) {
|
||||||
re[i] = nums[i] - relativeTo.x;
|
re[i] = nums[i] - relativeTo.x;
|
||||||
re[i + 1] = nums[i + 1] - relativeTo.y;
|
re[i + 1] = nums[i + 1] - relativeTo.y;
|
||||||
}
|
}
|
||||||
|
@ -515,22 +398,24 @@
|
||||||
return re;
|
return re;
|
||||||
};
|
};
|
||||||
|
|
||||||
var curveQToC = function curveQToC(nums) {
|
const curveQToC = function (nums) {
|
||||||
var a = 2 / 3;
|
const a = 2 / 3;
|
||||||
var re = [nums[0] * a, nums[1] * a, nums[2] + (nums[0] - nums[2]) * a, nums[3] + (nums[1] - nums[3]) * a, nums[2], nums[3]];
|
const re = [nums[0] * a, nums[1] * a, nums[2] + (nums[0] - nums[2]) * a, nums[3] + (nums[1] - nums[3]) * a, nums[2], nums[3]];
|
||||||
return re;
|
return re;
|
||||||
};
|
};
|
||||||
|
|
||||||
for (var i = 0, letterPrev; i < n; i++) {
|
for (let i = 0, letterPrev; i < n; i++) {
|
||||||
var seg = segList.getItem(i);
|
const seg = segList.getItem(i);
|
||||||
var x1 = seg.x1,
|
const {
|
||||||
y1 = seg.y1,
|
x1,
|
||||||
x2 = seg.x2,
|
y1,
|
||||||
y2 = seg.y2,
|
x2,
|
||||||
x = seg.x,
|
y2,
|
||||||
y = seg.y,
|
x,
|
||||||
letter = seg.pathSegTypeAsLetter;
|
y,
|
||||||
var isRelative = letter >= 'a'; // lowercase letter
|
pathSegTypeAsLetter: letter
|
||||||
|
} = seg;
|
||||||
|
const isRelative = letter >= 'a'; // lowercase letter
|
||||||
|
|
||||||
switch (letter) {
|
switch (letter) {
|
||||||
case 'M':
|
case 'M':
|
||||||
|
@ -604,7 +489,7 @@
|
||||||
|
|
||||||
case 'T':
|
case 'T':
|
||||||
{
|
{
|
||||||
var p1 = letterPrev && 'QqTt'.includes(letterPrev) ? reflectControl : {
|
const p1 = letterPrev && 'QqTt'.includes(letterPrev) ? reflectControl : {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0
|
y: 0
|
||||||
};
|
};
|
||||||
|
@ -616,14 +501,13 @@
|
||||||
|
|
||||||
case 't':
|
case 't':
|
||||||
{
|
{
|
||||||
var _p = letterPrev && 'QqTt'.includes(letterPrev) ? reflectControl : {
|
const p1 = letterPrev && 'QqTt'.includes(letterPrev) ? reflectControl : {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0
|
y: 0
|
||||||
};
|
};
|
||||||
|
ops.lines.push([p1.x, p1.y, x, y]);
|
||||||
ops.lines.push([_p.x, _p.y, x, y]);
|
reflectControl.x = x - p1.x;
|
||||||
reflectControl.x = x - _p.x;
|
reflectControl.y = y - p1.y;
|
||||||
reflectControl.y = y - _p.y;
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -642,15 +526,15 @@
|
||||||
case 'S':
|
case 'S':
|
||||||
case 's':
|
case 's':
|
||||||
{
|
{
|
||||||
var _p2 = letterPrev && 'CcSs'.includes(letterPrev) ? reflectControl : {
|
const p1 = letterPrev && 'CcSs'.includes(letterPrev) ? reflectControl : {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0
|
y: 0
|
||||||
};
|
};
|
||||||
|
|
||||||
if (isRelative) {
|
if (isRelative) {
|
||||||
ops.lines.push([_p2.x, _p2.y, x2, y2, x, y]);
|
ops.lines.push([p1.x, p1.y, x2, y2, x, y]);
|
||||||
} else {
|
} else {
|
||||||
ops.lines.push([_p2.x, _p2.y].concat(toRelative([x2, y2, x, y], curr)));
|
ops.lines.push([p1.x, p1.y].concat(toRelative([x2, y2, x, y], curr)));
|
||||||
}
|
}
|
||||||
|
|
||||||
reflectControl.x = x - x2;
|
reflectControl.x = x - x2;
|
||||||
|
@ -708,21 +592,21 @@
|
||||||
return opsList;
|
return opsList;
|
||||||
};
|
};
|
||||||
|
|
||||||
var svgElementToPdf = function svgElementToPdf(element, pdf, options) {
|
const svgElementToPdf = function (element, pdf, options) {
|
||||||
// pdf is a jsPDF object
|
// pdf is a jsPDF object
|
||||||
// console.log('options =', options);
|
// console.log('options =', options);
|
||||||
var remove = options.removeInvalid === undefined ? false : options.removeInvalid;
|
const remove = options.removeInvalid === undefined ? false : options.removeInvalid;
|
||||||
var k = options.scale === undefined ? 1.0 : options.scale;
|
const k = options.scale === undefined ? 1.0 : options.scale;
|
||||||
var colorMode = null;
|
let colorMode = null;
|
||||||
[].forEach.call(element.children, function (node) {
|
[].forEach.call(element.children, function (node) {
|
||||||
// console.log('passing: ', node);
|
// console.log('passing: ', node);
|
||||||
// let hasStrokeColor = false;
|
// let hasStrokeColor = false;
|
||||||
var hasFillColor = false;
|
let hasFillColor = false;
|
||||||
var fillRGB;
|
let fillRGB;
|
||||||
colorMode = null;
|
colorMode = null;
|
||||||
|
|
||||||
if (nodeIs(node, ['g', 'line', 'rect', 'ellipse', 'circle', 'polygon', 'polyline', 'path', 'text'])) {
|
if (nodeIs(node, ['g', 'line', 'rect', 'ellipse', 'circle', 'polygon', 'polyline', 'path', 'text'])) {
|
||||||
var fillColor = node.getAttribute('fill');
|
const fillColor = node.getAttribute('fill');
|
||||||
|
|
||||||
if (attributeIsNotEmpty(fillColor) && node.getAttribute('fill-opacity') !== '0') {
|
if (attributeIsNotEmpty(fillColor) && node.getAttribute('fill-opacity') !== '0') {
|
||||||
fillRGB = new RGBColor(fillColor);
|
fillRGB = new RGBColor(fillColor);
|
||||||
|
@ -745,10 +629,10 @@
|
||||||
pdf.setLineWidth(k * Number.parseInt(node.getAttribute('stroke-width')));
|
pdf.setLineWidth(k * Number.parseInt(node.getAttribute('stroke-width')));
|
||||||
}
|
}
|
||||||
|
|
||||||
var strokeColor = node.getAttribute('stroke');
|
const strokeColor = node.getAttribute('stroke');
|
||||||
|
|
||||||
if (attributeIsNotEmpty(strokeColor) && node.getAttribute('stroke-width') !== '0' && node.getAttribute('stroke-opacity') !== '0') {
|
if (attributeIsNotEmpty(strokeColor) && node.getAttribute('stroke-width') !== '0' && node.getAttribute('stroke-opacity') !== '0') {
|
||||||
var strokeRGB = new RGBColor(strokeColor);
|
const strokeRGB = new RGBColor(strokeColor);
|
||||||
|
|
||||||
if (strokeRGB.ok) {
|
if (strokeRGB.ok) {
|
||||||
// hasStrokeColor = true;
|
// hasStrokeColor = true;
|
||||||
|
@ -765,7 +649,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var tag = node.tagName.toLowerCase();
|
const tag = node.tagName.toLowerCase();
|
||||||
|
|
||||||
switch (tag) {
|
switch (tag) {
|
||||||
case 'svg':
|
case 'svg':
|
||||||
|
@ -798,7 +682,7 @@
|
||||||
case 'polygon':
|
case 'polygon':
|
||||||
case 'polyline':
|
case 'polyline':
|
||||||
{
|
{
|
||||||
var linesOptions = getLinesOptionsOfPoly(node);
|
const linesOptions = getLinesOptionsOfPoly(node);
|
||||||
|
|
||||||
if (linesOptions) {
|
if (linesOptions) {
|
||||||
pdf.lines(linesOptions.lines, k * linesOptions.x, k * linesOptions.y, [k, k], colorMode, tag === 'polygon' // polygon is closed, polyline is not closed
|
pdf.lines(linesOptions.lines, k * linesOptions.x, k * linesOptions.y, [k, k], colorMode, tag === 'polygon' // polygon is closed, polyline is not closed
|
||||||
|
@ -812,14 +696,14 @@
|
||||||
case 'path':
|
case 'path':
|
||||||
{
|
{
|
||||||
if (colorMode) {
|
if (colorMode) {
|
||||||
var linesOptionsList = getLinesOptionsOfPath(node);
|
const linesOptionsList = getLinesOptionsOfPath(node);
|
||||||
|
|
||||||
if (linesOptionsList.length > 0) {
|
if (linesOptionsList.length > 0) {
|
||||||
linesOptionsList.forEach(function (linesOptions) {
|
linesOptionsList.forEach(function (linesOptions) {
|
||||||
pdf.lines(linesOptions.lines, k * linesOptions.x, k * linesOptions.y, [k, k], null, linesOptions.closed);
|
pdf.lines(linesOptions.lines, k * linesOptions.x, k * linesOptions.y, [k, k], null, linesOptions.closed);
|
||||||
}); // svg fill rule default is nonzero
|
}); // svg fill rule default is nonzero
|
||||||
|
|
||||||
var fillRule = node.getAttribute('fill-rule');
|
const fillRule = node.getAttribute('fill-rule');
|
||||||
|
|
||||||
if (fillRule === 'evenodd') {
|
if (fillRule === 'evenodd') {
|
||||||
// f* : fill using even-odd rule
|
// f* : fill using even-odd rule
|
||||||
|
@ -873,7 +757,7 @@
|
||||||
pdf.setTextColor(fillRGB.r, fillRGB.g, fillRGB.b);
|
pdf.setTextColor(fillRGB.r, fillRGB.g, fillRGB.b);
|
||||||
}
|
}
|
||||||
|
|
||||||
var fontType = '';
|
let fontType = '';
|
||||||
|
|
||||||
if (node.hasAttribute('font-weight')) {
|
if (node.hasAttribute('font-weight')) {
|
||||||
if (node.getAttribute('font-weight') === 'bold') {
|
if (node.getAttribute('font-weight') === 'bold') {
|
||||||
|
@ -892,22 +776,22 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
pdf.setFontType(fontType);
|
pdf.setFontType(fontType);
|
||||||
var pdfFontSize = node.hasAttribute('font-size') ? Number.parseInt(node.getAttribute('font-size')) : 16;
|
const pdfFontSize = node.hasAttribute('font-size') ? Number.parseInt(node.getAttribute('font-size')) : 16;
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @param {Element} elem
|
* @param {Element} elem
|
||||||
* @returns {Float}
|
* @returns {Float}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var getWidth = function getWidth(elem) {
|
const getWidth = elem => {
|
||||||
var box;
|
let box;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
box = elem.getBBox(); // Firefox on MacOS will raise error here
|
box = elem.getBBox(); // Firefox on MacOS will raise error here
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
// copy and append to body so that getBBox is available
|
// copy and append to body so that getBBox is available
|
||||||
var nodeCopy = elem.cloneNode(true);
|
const nodeCopy = elem.cloneNode(true);
|
||||||
var svg = elem.ownerSVGElement.cloneNode(false);
|
const svg = elem.ownerSVGElement.cloneNode(false);
|
||||||
svg.appendChild(nodeCopy);
|
svg.appendChild(nodeCopy);
|
||||||
document.body.appendChild(svg);
|
document.body.appendChild(svg);
|
||||||
|
|
||||||
|
@ -926,7 +810,7 @@
|
||||||
}; // TODO: use more accurate positioning!!
|
}; // TODO: use more accurate positioning!!
|
||||||
|
|
||||||
|
|
||||||
var x,
|
let x,
|
||||||
y,
|
y,
|
||||||
xOffset = 0;
|
xOffset = 0;
|
||||||
|
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_af = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_af = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Verwyder Laag',
|
del: 'Verwyder Laag',
|
||||||
move_down: 'Beweeg afbreek Down',
|
move_down: 'Beweeg afbreek Down',
|
||||||
"new": 'Nuwe Layer',
|
new: 'Nuwe Layer',
|
||||||
rename: 'Rename Layer',
|
rename: 'Rename Layer',
|
||||||
move_up: 'Beweeg afbreek Up',
|
move_up: 'Beweeg afbreek Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_ar = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_ar = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'حذف طبقة',
|
del: 'حذف طبقة',
|
||||||
move_down: 'تحرك لأسفل طبقة',
|
move_down: 'تحرك لأسفل طبقة',
|
||||||
"new": 'طبقة جديدة',
|
new: 'طبقة جديدة',
|
||||||
rename: 'تسمية الطبقة',
|
rename: 'تسمية الطبقة',
|
||||||
move_up: 'تحرك لأعلى طبقة',
|
move_up: 'تحرك لأعلى طبقة',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_az = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_az = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Delete Layer',
|
del: 'Delete Layer',
|
||||||
move_down: 'Move Layer Down',
|
move_down: 'Move Layer Down',
|
||||||
"new": 'New Layer',
|
new: 'New Layer',
|
||||||
rename: 'Rename Layer',
|
rename: 'Rename Layer',
|
||||||
move_up: 'Move Layer Up',
|
move_up: 'Move Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_be = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_be = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Выдаліць слой',
|
del: 'Выдаліць слой',
|
||||||
move_down: 'Перамясціць слой на',
|
move_down: 'Перамясціць слой на',
|
||||||
"new": 'Новы слой',
|
new: 'Новы слой',
|
||||||
rename: 'Перайменаваць Слой',
|
rename: 'Перайменаваць Слой',
|
||||||
move_up: 'Перамяшчэнне слоя да',
|
move_up: 'Перамяшчэнне слоя да',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_bg = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_bg = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Изтриване на слой',
|
del: 'Изтриване на слой',
|
||||||
move_down: 'Move слой надолу',
|
move_down: 'Move слой надолу',
|
||||||
"new": 'Нов слой',
|
new: 'Нов слой',
|
||||||
rename: 'Преименуване Layer',
|
rename: 'Преименуване Layer',
|
||||||
move_up: 'Move Up Layer',
|
move_up: 'Move Up Layer',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_ca = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_ca = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Eliminar capa',
|
del: 'Eliminar capa',
|
||||||
move_down: 'Mou la capa de Down',
|
move_down: 'Mou la capa de Down',
|
||||||
"new": 'Nova capa',
|
new: 'Nova capa',
|
||||||
rename: 'Canvieu el nom de la capa',
|
rename: 'Canvieu el nom de la capa',
|
||||||
move_up: 'Mou la capa Up',
|
move_up: 'Mou la capa Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_cs = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_cs = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Odstranit vrstvu',
|
del: 'Odstranit vrstvu',
|
||||||
move_down: 'Přesunout vrstvu níž',
|
move_down: 'Přesunout vrstvu níž',
|
||||||
"new": 'Přidat vrstvu',
|
new: 'Přidat vrstvu',
|
||||||
rename: 'Přejmenovat vrstvu',
|
rename: 'Přejmenovat vrstvu',
|
||||||
move_up: 'Přesunout vrstvu výš',
|
move_up: 'Přesunout vrstvu výš',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_cy = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_cy = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Dileu Haen',
|
del: 'Dileu Haen',
|
||||||
move_down: 'Symud Haen i Lawr',
|
move_down: 'Symud Haen i Lawr',
|
||||||
"new": 'Haen Newydd',
|
new: 'Haen Newydd',
|
||||||
rename: 'Ail-enwi Haen',
|
rename: 'Ail-enwi Haen',
|
||||||
move_up: 'Symud Haen Up',
|
move_up: 'Symud Haen Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_da = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_da = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Slet Layer',
|
del: 'Slet Layer',
|
||||||
move_down: 'Flyt lag ned',
|
move_down: 'Flyt lag ned',
|
||||||
"new": 'New Layer',
|
new: 'New Layer',
|
||||||
rename: 'Omdøb Layer',
|
rename: 'Omdøb Layer',
|
||||||
move_up: 'Flyt Layer Up',
|
move_up: 'Flyt Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_de = (function () {
|
||||||
copy: 'Kopieren',
|
copy: 'Kopieren',
|
||||||
paste: 'Einfügen',
|
paste: 'Einfügen',
|
||||||
paste_in_place: 'Bei Originalposition einfügen',
|
paste_in_place: 'Bei Originalposition einfügen',
|
||||||
"delete": 'Löschen',
|
delete: 'Löschen',
|
||||||
group: 'Gruppieren',
|
group: 'Gruppieren',
|
||||||
move_front: 'Nach ganz oben verschieben',
|
move_front: 'Nach ganz oben verschieben',
|
||||||
move_up: 'Hochschieben',
|
move_up: 'Hochschieben',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_de = (function () {
|
||||||
layers: 'Ebenen',
|
layers: 'Ebenen',
|
||||||
del: 'Ebene löschen',
|
del: 'Ebene löschen',
|
||||||
move_down: 'Ebene nach unten verschieben',
|
move_down: 'Ebene nach unten verschieben',
|
||||||
"new": 'Neue Ebene',
|
new: 'Neue Ebene',
|
||||||
rename: 'Ebene umbenennen',
|
rename: 'Ebene umbenennen',
|
||||||
move_up: 'Ebene nach oben verschieben',
|
move_up: 'Ebene nach oben verschieben',
|
||||||
dupe: 'Ebene duplizieren',
|
dupe: 'Ebene duplizieren',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_el = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_el = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Διαγραφήστρώματος',
|
del: 'Διαγραφήστρώματος',
|
||||||
move_down: 'Μετακίνηση Layer Down',
|
move_down: 'Μετακίνηση Layer Down',
|
||||||
"new": 'Νέο Layer',
|
new: 'Νέο Layer',
|
||||||
rename: 'Μετονομασία Layer',
|
rename: 'Μετονομασία Layer',
|
||||||
move_up: 'Μετακίνηση Layer Up',
|
move_up: 'Μετακίνηση Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_en = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_en = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Delete Layer',
|
del: 'Delete Layer',
|
||||||
move_down: 'Move Layer Down',
|
move_down: 'Move Layer Down',
|
||||||
"new": 'New Layer',
|
new: 'New Layer',
|
||||||
rename: 'Rename Layer',
|
rename: 'Rename Layer',
|
||||||
move_up: 'Move Layer Up',
|
move_up: 'Move Layer Up',
|
||||||
dupe: 'Duplicate Layer...',
|
dupe: 'Duplicate Layer...',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_es = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_es = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Suprimir capa',
|
del: 'Suprimir capa',
|
||||||
move_down: 'Mover la capa hacia abajo',
|
move_down: 'Mover la capa hacia abajo',
|
||||||
"new": 'Nueva capa',
|
new: 'Nueva capa',
|
||||||
rename: 'Renombrar capa',
|
rename: 'Renombrar capa',
|
||||||
move_up: 'Mover la capa hacia arriba',
|
move_up: 'Mover la capa hacia arriba',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_et = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_et = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Kustuta Kiht',
|
del: 'Kustuta Kiht',
|
||||||
move_down: 'Liiguta kiht alla',
|
move_down: 'Liiguta kiht alla',
|
||||||
"new": 'Uus kiht',
|
new: 'Uus kiht',
|
||||||
rename: 'Nimeta kiht',
|
rename: 'Nimeta kiht',
|
||||||
move_up: 'Liiguta kiht üles',
|
move_up: 'Liiguta kiht üles',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_fa = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'حذف',
|
delete: 'حذف',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_fa = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'حذف لایه',
|
del: 'حذف لایه',
|
||||||
move_down: 'انتقال لایه به پایین',
|
move_down: 'انتقال لایه به پایین',
|
||||||
"new": 'لایه جدید',
|
new: 'لایه جدید',
|
||||||
rename: 'تغییر نام لایه',
|
rename: 'تغییر نام لایه',
|
||||||
move_up: 'انتقال لایه به بالا',
|
move_up: 'انتقال لایه به بالا',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_fi = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_fi = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Poista Layer',
|
del: 'Poista Layer',
|
||||||
move_down: 'Siirrä Layer alas',
|
move_down: 'Siirrä Layer alas',
|
||||||
"new": 'New Layer',
|
new: 'New Layer',
|
||||||
rename: 'Nimeä Layer',
|
rename: 'Nimeä Layer',
|
||||||
move_up: 'Siirrä Layer',
|
move_up: 'Siirrä Layer',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_fr = (function () {
|
||||||
copy: 'Copier',
|
copy: 'Copier',
|
||||||
paste: 'Coller',
|
paste: 'Coller',
|
||||||
paste_in_place: 'Coller sur place',
|
paste_in_place: 'Coller sur place',
|
||||||
"delete": 'Supprimer',
|
delete: 'Supprimer',
|
||||||
group: 'Grouper',
|
group: 'Grouper',
|
||||||
move_front: 'Placer au premier plan',
|
move_front: 'Placer au premier plan',
|
||||||
move_up: "Avancer d'un plan",
|
move_up: "Avancer d'un plan",
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_fr = (function () {
|
||||||
layers: 'Calques',
|
layers: 'Calques',
|
||||||
del: 'Supprimer le calque',
|
del: 'Supprimer le calque',
|
||||||
move_down: 'Descendre le calque',
|
move_down: 'Descendre le calque',
|
||||||
"new": 'Nouveau calque',
|
new: 'Nouveau calque',
|
||||||
rename: 'Renommer le calque',
|
rename: 'Renommer le calque',
|
||||||
move_up: 'Monter le calque',
|
move_up: 'Monter le calque',
|
||||||
dupe: 'Dupliquer le calque',
|
dupe: 'Dupliquer le calque',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_fy = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_fy = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Laach fuortsmite',
|
del: 'Laach fuortsmite',
|
||||||
move_down: 'Laach omleech bringe',
|
move_down: 'Laach omleech bringe',
|
||||||
"new": 'Nije laach',
|
new: 'Nije laach',
|
||||||
rename: 'Laach omneame',
|
rename: 'Laach omneame',
|
||||||
move_up: 'Laach omheech bringe',
|
move_up: 'Laach omheech bringe',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_ga = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_ga = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Scrios Sraith',
|
del: 'Scrios Sraith',
|
||||||
move_down: 'Bog Sraith Síos',
|
move_down: 'Bog Sraith Síos',
|
||||||
"new": 'Sraith Nua',
|
new: 'Sraith Nua',
|
||||||
rename: 'Athainmnigh Sraith',
|
rename: 'Athainmnigh Sraith',
|
||||||
move_up: 'Bog Sraith Suas',
|
move_up: 'Bog Sraith Suas',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_gl = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_gl = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Delete Layer',
|
del: 'Delete Layer',
|
||||||
move_down: 'Move capa inferior',
|
move_down: 'Move capa inferior',
|
||||||
"new": 'New Layer',
|
new: 'New Layer',
|
||||||
rename: 'Rename Layer',
|
rename: 'Rename Layer',
|
||||||
move_up: 'Move Layer Up',
|
move_up: 'Move Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_he = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_he = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'מחיקת שכבה',
|
del: 'מחיקת שכבה',
|
||||||
move_down: 'הזז למטה שכבה',
|
move_down: 'הזז למטה שכבה',
|
||||||
"new": 'שכבהחדשה',
|
new: 'שכבהחדשה',
|
||||||
rename: 'שינוי שם שכבה',
|
rename: 'שינוי שם שכבה',
|
||||||
move_up: 'העבר שכבה Up',
|
move_up: 'העבר שכבה Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_hi = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_hi = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'परत हटाएँ',
|
del: 'परत हटाएँ',
|
||||||
move_down: 'परत नीचे ले जाएँ',
|
move_down: 'परत नीचे ले जाएँ',
|
||||||
"new": 'नई परत',
|
new: 'नई परत',
|
||||||
rename: 'परत का नाम बदलें',
|
rename: 'परत का नाम बदलें',
|
||||||
move_up: 'परत ऊपर ले जाएँ',
|
move_up: 'परत ऊपर ले जाएँ',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_hr = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_hr = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Brisanje sloja',
|
del: 'Brisanje sloja',
|
||||||
move_down: 'Move Layer Down',
|
move_down: 'Move Layer Down',
|
||||||
"new": 'New Layer',
|
new: 'New Layer',
|
||||||
rename: 'Preimenuj Layer',
|
rename: 'Preimenuj Layer',
|
||||||
move_up: 'Move Layer Up',
|
move_up: 'Move Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_hu = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_hu = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Réteg törlése',
|
del: 'Réteg törlése',
|
||||||
move_down: 'Mozgatása lefelé',
|
move_down: 'Mozgatása lefelé',
|
||||||
"new": 'Új réteg',
|
new: 'Új réteg',
|
||||||
rename: 'Réteg átnevezése',
|
rename: 'Réteg átnevezése',
|
||||||
move_up: 'Move Layer Up',
|
move_up: 'Move Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_hy = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_hy = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Delete Layer',
|
del: 'Delete Layer',
|
||||||
move_down: 'Move Layer Down',
|
move_down: 'Move Layer Down',
|
||||||
"new": 'New Layer',
|
new: 'New Layer',
|
||||||
rename: 'Rename Layer',
|
rename: 'Rename Layer',
|
||||||
move_up: 'Move Layer Up',
|
move_up: 'Move Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_id = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_id = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Hapus Layer',
|
del: 'Hapus Layer',
|
||||||
move_down: 'Pindahkan Layer Bawah',
|
move_down: 'Pindahkan Layer Bawah',
|
||||||
"new": 'New Layer',
|
new: 'New Layer',
|
||||||
rename: 'Rename Layer',
|
rename: 'Rename Layer',
|
||||||
move_up: 'Pindahkan Layer Up',
|
move_up: 'Pindahkan Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_is = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_is = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Eyða Lag',
|
del: 'Eyða Lag',
|
||||||
move_down: 'Færa Layer Down',
|
move_down: 'Færa Layer Down',
|
||||||
"new": 'Lag',
|
new: 'Lag',
|
||||||
rename: 'Endurnefna Lag',
|
rename: 'Endurnefna Lag',
|
||||||
move_up: 'Færa Lag Up',
|
move_up: 'Færa Lag Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_it = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_it = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Elimina il livello',
|
del: 'Elimina il livello',
|
||||||
move_down: 'Sposta indietro il livello',
|
move_down: 'Sposta indietro il livello',
|
||||||
"new": 'Nuovo livello',
|
new: 'Nuovo livello',
|
||||||
rename: 'Rinomina il livello',
|
rename: 'Rinomina il livello',
|
||||||
move_up: 'Sposta avanti il livello',
|
move_up: 'Sposta avanti il livello',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_ja = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_ja = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'レイヤの削除',
|
del: 'レイヤの削除',
|
||||||
move_down: 'レイヤを下へ移動',
|
move_down: 'レイヤを下へ移動',
|
||||||
"new": '新規レイヤ',
|
new: '新規レイヤ',
|
||||||
rename: 'レイヤの名前を変更',
|
rename: 'レイヤの名前を変更',
|
||||||
move_up: 'レイヤを上へ移動',
|
move_up: 'レイヤを上へ移動',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_ko = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_ko = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: '레이어 삭제',
|
del: '레이어 삭제',
|
||||||
move_down: '레이어 아래로 이동',
|
move_down: '레이어 아래로 이동',
|
||||||
"new": '새 레이어',
|
new: '새 레이어',
|
||||||
rename: '레이어 이름 바꾸기',
|
rename: '레이어 이름 바꾸기',
|
||||||
move_up: '레이어 위로 이동',
|
move_up: '레이어 위로 이동',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_lt = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_lt = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Ištrinti Layer',
|
del: 'Ištrinti Layer',
|
||||||
move_down: 'Perkelti sluoksnį Žemyn',
|
move_down: 'Perkelti sluoksnį Žemyn',
|
||||||
"new": 'New Layer',
|
new: 'New Layer',
|
||||||
rename: 'Pervadinti sluoksnį',
|
rename: 'Pervadinti sluoksnį',
|
||||||
move_up: 'Perkelti sluoksnį Up',
|
move_up: 'Perkelti sluoksnį Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_lv = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_lv = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Dzēst Layer',
|
del: 'Dzēst Layer',
|
||||||
move_down: 'Pārvietot slāni uz leju',
|
move_down: 'Pārvietot slāni uz leju',
|
||||||
"new": 'New Layer',
|
new: 'New Layer',
|
||||||
rename: 'Pārdēvēt Layer',
|
rename: 'Pārdēvēt Layer',
|
||||||
move_up: 'Pārvietot slāni uz augšu',
|
move_up: 'Pārvietot slāni uz augšu',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_mk = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_mk = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Избриши Слој',
|
del: 'Избриши Слој',
|
||||||
move_down: 'Премести слој долу',
|
move_down: 'Премести слој долу',
|
||||||
"new": 'Нов слој',
|
new: 'Нов слој',
|
||||||
rename: 'Преименувај слој',
|
rename: 'Преименувај слој',
|
||||||
move_up: 'Премести слој горе',
|
move_up: 'Премести слој горе',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_ms = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_ms = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Padam Layer',
|
del: 'Padam Layer',
|
||||||
move_down: 'Pindah Layer Bawah',
|
move_down: 'Pindah Layer Bawah',
|
||||||
"new": 'New Layer',
|
new: 'New Layer',
|
||||||
rename: 'Rename Layer',
|
rename: 'Rename Layer',
|
||||||
move_up: 'Pindah Layer Up',
|
move_up: 'Pindah Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_mt = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_mt = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Ħassar Layer',
|
del: 'Ħassar Layer',
|
||||||
move_down: 'Move Layer Down',
|
move_down: 'Move Layer Down',
|
||||||
"new": 'New Layer',
|
new: 'New Layer',
|
||||||
rename: 'Semmi mill-ġdid Layer',
|
rename: 'Semmi mill-ġdid Layer',
|
||||||
move_up: 'Move Layer Up',
|
move_up: 'Move Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_nl = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_nl = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Delete laag',
|
del: 'Delete laag',
|
||||||
move_down: 'Beweeg laag omlaag',
|
move_down: 'Beweeg laag omlaag',
|
||||||
"new": 'Nieuwe laag',
|
new: 'Nieuwe laag',
|
||||||
rename: 'Hernoem laag',
|
rename: 'Hernoem laag',
|
||||||
move_up: 'Beweeg laag omhoog',
|
move_up: 'Beweeg laag omhoog',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_no = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_no = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Slett laget',
|
del: 'Slett laget',
|
||||||
move_down: 'Flytt laget ned',
|
move_down: 'Flytt laget ned',
|
||||||
"new": 'Nytt lag',
|
new: 'Nytt lag',
|
||||||
rename: 'Rename Layer',
|
rename: 'Rename Layer',
|
||||||
move_up: 'Flytt Layer Up',
|
move_up: 'Flytt Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -143,7 +143,7 @@ var svgEditorLang_pl = (function () {
|
||||||
copy: 'Kopiuj',
|
copy: 'Kopiuj',
|
||||||
paste: 'Wklej',
|
paste: 'Wklej',
|
||||||
paste_in_place: 'Wklej w miejscu',
|
paste_in_place: 'Wklej w miejscu',
|
||||||
"delete": 'Usuń',
|
delete: 'Usuń',
|
||||||
group: 'Grupuj',
|
group: 'Grupuj',
|
||||||
move_front: 'Przenieś do przodu',
|
move_front: 'Przenieś do przodu',
|
||||||
move_up: 'Przenieś warstwę w górę',
|
move_up: 'Przenieś warstwę w górę',
|
||||||
|
@ -155,7 +155,7 @@ var svgEditorLang_pl = (function () {
|
||||||
layers: 'Warstwy',
|
layers: 'Warstwy',
|
||||||
del: 'Usuń warstwę',
|
del: 'Usuń warstwę',
|
||||||
move_down: 'Przenieś warstwę w dół',
|
move_down: 'Przenieś warstwę w dół',
|
||||||
"new": 'Nowa warstwa',
|
new: 'Nowa warstwa',
|
||||||
rename: 'Zmień nazwę warstwy',
|
rename: 'Zmień nazwę warstwy',
|
||||||
move_up: 'Przenieś warstwę w górę',
|
move_up: 'Przenieś warstwę w górę',
|
||||||
dupe: 'Duplikuj warstwę',
|
dupe: 'Duplikuj warstwę',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_pt_BR = (function () {
|
||||||
copy: 'Copiar',
|
copy: 'Copiar',
|
||||||
paste: 'Colar',
|
paste: 'Colar',
|
||||||
paste_in_place: 'Colar no mesmo local',
|
paste_in_place: 'Colar no mesmo local',
|
||||||
"delete": 'Deletar',
|
delete: 'Deletar',
|
||||||
group: 'Agrupar',
|
group: 'Agrupar',
|
||||||
move_front: 'Trazer para Frente',
|
move_front: 'Trazer para Frente',
|
||||||
move_up: 'Avançar',
|
move_up: 'Avançar',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_pt_BR = (function () {
|
||||||
layers: 'Camadas',
|
layers: 'Camadas',
|
||||||
del: 'Deletar Camada',
|
del: 'Deletar Camada',
|
||||||
move_down: 'Enviar Camada para Trás',
|
move_down: 'Enviar Camada para Trás',
|
||||||
"new": 'Nova Camada',
|
new: 'Nova Camada',
|
||||||
rename: 'Renomear Camada',
|
rename: 'Renomear Camada',
|
||||||
move_up: 'Trazer Camada para Frente',
|
move_up: 'Trazer Camada para Frente',
|
||||||
dupe: 'Duplicar Camada',
|
dupe: 'Duplicar Camada',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_pt_PT = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_pt_PT = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Delete Layer',
|
del: 'Delete Layer',
|
||||||
move_down: 'Move camada para baixo',
|
move_down: 'Move camada para baixo',
|
||||||
"new": 'New Layer',
|
new: 'New Layer',
|
||||||
rename: 'Rename Layer',
|
rename: 'Rename Layer',
|
||||||
move_up: 'Move Layer Up',
|
move_up: 'Move Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_ro = (function () {
|
||||||
copy: 'Copiere',
|
copy: 'Copiere',
|
||||||
paste: 'Reproducere',
|
paste: 'Reproducere',
|
||||||
paste_in_place: 'Reproducere pe loc',
|
paste_in_place: 'Reproducere pe loc',
|
||||||
"delete": 'Ştergere',
|
delete: 'Ştergere',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Pune in faţa',
|
move_front: 'Pune in faţa',
|
||||||
move_up: 'Pune in spate',
|
move_up: 'Pune in spate',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_ro = (function () {
|
||||||
layers: 'Straturi',
|
layers: 'Straturi',
|
||||||
del: 'Ştergeţi Strat',
|
del: 'Ştergeţi Strat',
|
||||||
move_down: 'Mutare Strat în Jos',
|
move_down: 'Mutare Strat în Jos',
|
||||||
"new": 'Strat Nou',
|
new: 'Strat Nou',
|
||||||
rename: 'Redenumiţi Stratul',
|
rename: 'Redenumiţi Stratul',
|
||||||
move_up: 'Mutare Strat în Sus',
|
move_up: 'Mutare Strat în Sus',
|
||||||
dupe: 'Duplicaţi Stratul',
|
dupe: 'Duplicaţi Stratul',
|
||||||
|
|
|
@ -154,7 +154,7 @@ var svgEditorLang_ru = (function () {
|
||||||
layers: 'Слои',
|
layers: 'Слои',
|
||||||
del: 'Удалить слой',
|
del: 'Удалить слой',
|
||||||
move_down: 'Опустить слой',
|
move_down: 'Опустить слой',
|
||||||
"new": 'Создать слой',
|
new: 'Создать слой',
|
||||||
rename: 'Переименовать Слой',
|
rename: 'Переименовать Слой',
|
||||||
move_up: 'Поднять слой',
|
move_up: 'Поднять слой',
|
||||||
dupe: 'Копировать слой',
|
dupe: 'Копировать слой',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_sk = (function () {
|
||||||
copy: 'Kópia',
|
copy: 'Kópia',
|
||||||
paste: 'Vloženie',
|
paste: 'Vloženie',
|
||||||
paste_in_place: 'Vloženie na pôvodnom mieste',
|
paste_in_place: 'Vloženie na pôvodnom mieste',
|
||||||
"delete": 'Zmazanie',
|
delete: 'Zmazanie',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Vysuň navrch',
|
move_front: 'Vysuň navrch',
|
||||||
move_up: 'Vysuň vpred',
|
move_up: 'Vysuň vpred',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_sk = (function () {
|
||||||
layers: 'Vrstvy',
|
layers: 'Vrstvy',
|
||||||
del: 'Odstrániť vrstvu',
|
del: 'Odstrániť vrstvu',
|
||||||
move_down: 'Presunúť vrstvu dole',
|
move_down: 'Presunúť vrstvu dole',
|
||||||
"new": 'Nová vrstva',
|
new: 'Nová vrstva',
|
||||||
rename: 'Premenovať vrstvu',
|
rename: 'Premenovať vrstvu',
|
||||||
move_up: 'Presunúť vrstvu hore',
|
move_up: 'Presunúť vrstvu hore',
|
||||||
dupe: 'Zduplikovať vrstvu',
|
dupe: 'Zduplikovať vrstvu',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_sl = (function () {
|
||||||
copy: 'Kopiraj',
|
copy: 'Kopiraj',
|
||||||
paste: 'Prilepi',
|
paste: 'Prilepi',
|
||||||
paste_in_place: 'Prilepi na mesto',
|
paste_in_place: 'Prilepi na mesto',
|
||||||
"delete": 'Izbriši',
|
delete: 'Izbriši',
|
||||||
group: 'Združi',
|
group: 'Združi',
|
||||||
move_front: 'Postavi v ospredje',
|
move_front: 'Postavi v ospredje',
|
||||||
move_up: 'Pomakni naporej',
|
move_up: 'Pomakni naporej',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_sl = (function () {
|
||||||
layers: 'Sloji',
|
layers: 'Sloji',
|
||||||
del: 'Izbriši sloj',
|
del: 'Izbriši sloj',
|
||||||
move_down: 'Premakni navzdol',
|
move_down: 'Premakni navzdol',
|
||||||
"new": 'Nov sloj',
|
new: 'Nov sloj',
|
||||||
rename: 'Preimenuj sloj',
|
rename: 'Preimenuj sloj',
|
||||||
move_up: 'Premakni navzgor',
|
move_up: 'Premakni navzgor',
|
||||||
dupe: 'Podvoji sloj',
|
dupe: 'Podvoji sloj',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_sq = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_sq = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Delete Layer',
|
del: 'Delete Layer',
|
||||||
move_down: 'Move Down Layer',
|
move_down: 'Move Down Layer',
|
||||||
"new": 'Re Shtresa',
|
new: 'Re Shtresa',
|
||||||
rename: 'Rename Layer',
|
rename: 'Rename Layer',
|
||||||
move_up: 'Move Up Layer',
|
move_up: 'Move Up Layer',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_sr = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_sr = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Избриши слој',
|
del: 'Избриши слој',
|
||||||
move_down: 'Помери слој доле',
|
move_down: 'Помери слој доле',
|
||||||
"new": 'Нови слој',
|
new: 'Нови слој',
|
||||||
rename: 'Преименуј слој',
|
rename: 'Преименуј слој',
|
||||||
move_up: 'Помери слој Горе',
|
move_up: 'Помери слој Горе',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_sv = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_sv = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Radera Layer',
|
del: 'Radera Layer',
|
||||||
move_down: 'Flytta Layer Down',
|
move_down: 'Flytta Layer Down',
|
||||||
"new": 'New Layer',
|
new: 'New Layer',
|
||||||
rename: 'Byt namn på Layer',
|
rename: 'Byt namn på Layer',
|
||||||
move_up: 'Flytta Layer Up',
|
move_up: 'Flytta Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_sw = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_sw = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Delete Layer',
|
del: 'Delete Layer',
|
||||||
move_down: 'Move Layer Down',
|
move_down: 'Move Layer Down',
|
||||||
"new": 'Mpya Layer',
|
new: 'Mpya Layer',
|
||||||
rename: 'Rename Layer',
|
rename: 'Rename Layer',
|
||||||
move_up: 'Move Layer Up',
|
move_up: 'Move Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_test = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Move Layer Up',
|
move_up: 'Move Layer Up',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_test = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Delete Layer',
|
del: 'Delete Layer',
|
||||||
move_down: 'Move Layer Down',
|
move_down: 'Move Layer Down',
|
||||||
"new": 'New Layer',
|
new: 'New Layer',
|
||||||
rename: 'Rename Layer',
|
rename: 'Rename Layer',
|
||||||
move_up: 'Move Layer Up',
|
move_up: 'Move Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_th = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_th = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Delete Layer',
|
del: 'Delete Layer',
|
||||||
move_down: 'ย้าย Layer ลง',
|
move_down: 'ย้าย Layer ลง',
|
||||||
"new": 'Layer ใหม่',
|
new: 'Layer ใหม่',
|
||||||
rename: 'Layer เปลี่ยนชื่อ',
|
rename: 'Layer เปลี่ยนชื่อ',
|
||||||
move_up: 'ย้าย Layer Up',
|
move_up: 'ย้าย Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_tl = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_tl = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Tanggalin Layer',
|
del: 'Tanggalin Layer',
|
||||||
move_down: 'Ilipat Layer Down',
|
move_down: 'Ilipat Layer Down',
|
||||||
"new": 'Bagong Layer',
|
new: 'Bagong Layer',
|
||||||
rename: 'Palitan ang pangalan ng Layer',
|
rename: 'Palitan ang pangalan ng Layer',
|
||||||
move_up: 'Ilipat Layer Up',
|
move_up: 'Ilipat Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_tr = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_tr = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Delete Layer',
|
del: 'Delete Layer',
|
||||||
move_down: 'Katman Aşağı Taşı',
|
move_down: 'Katman Aşağı Taşı',
|
||||||
"new": 'Yeni Katman',
|
new: 'Yeni Katman',
|
||||||
rename: 'Rename Katman',
|
rename: 'Rename Katman',
|
||||||
move_up: 'Up Katman Taşı',
|
move_up: 'Up Katman Taşı',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_uk = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_uk = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Видалити шар',
|
del: 'Видалити шар',
|
||||||
move_down: 'Перемістити шар на',
|
move_down: 'Перемістити шар на',
|
||||||
"new": 'Новий шар',
|
new: 'Новий шар',
|
||||||
rename: 'Перейменувати Шар',
|
rename: 'Перейменувати Шар',
|
||||||
move_up: 'Переміщення шару до',
|
move_up: 'Переміщення шару до',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_vi = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_vi = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'Xoá Layer',
|
del: 'Xoá Layer',
|
||||||
move_down: 'Move Layer Down',
|
move_down: 'Move Layer Down',
|
||||||
"new": 'New Layer',
|
new: 'New Layer',
|
||||||
rename: 'Đổi tên Layer',
|
rename: 'Đổi tên Layer',
|
||||||
move_up: 'Di chuyển Layer Up',
|
move_up: 'Di chuyển Layer Up',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_yi = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_yi = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: 'ויסמעקן לייַער',
|
del: 'ויסמעקן לייַער',
|
||||||
move_down: 'קער לייַער דאָוון',
|
move_down: 'קער לייַער דאָוון',
|
||||||
"new": 'ניו לייַער',
|
new: 'ניו לייַער',
|
||||||
rename: 'רענאַמע לייַער',
|
rename: 'רענאַמע לייַער',
|
||||||
move_up: 'באַוועגן לייַער אַרויף',
|
move_up: 'באַוועגן לייַער אַרויף',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_zh_CN = (function () {
|
||||||
copy: '复制',
|
copy: '复制',
|
||||||
paste: '粘贴',
|
paste: '粘贴',
|
||||||
paste_in_place: '粘贴到原位置',
|
paste_in_place: '粘贴到原位置',
|
||||||
"delete": '删除',
|
delete: '删除',
|
||||||
group: '组合',
|
group: '组合',
|
||||||
move_front: '移至顶部',
|
move_front: '移至顶部',
|
||||||
move_up: '向上移动',
|
move_up: '向上移动',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_zh_CN = (function () {
|
||||||
layers: '图层',
|
layers: '图层',
|
||||||
del: '删除图层',
|
del: '删除图层',
|
||||||
move_down: '向下移动图层',
|
move_down: '向下移动图层',
|
||||||
"new": '新建图层',
|
new: '新建图层',
|
||||||
rename: '重命名图层',
|
rename: '重命名图层',
|
||||||
move_up: '向上移动图层',
|
move_up: '向上移动图层',
|
||||||
dupe: '复制图层',
|
dupe: '复制图层',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_zh_HK = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_zh_HK = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: '删除层',
|
del: '删除层',
|
||||||
move_down: '层向下移动',
|
move_down: '层向下移动',
|
||||||
"new": '新层',
|
new: '新层',
|
||||||
rename: '重命名层',
|
rename: '重命名层',
|
||||||
move_up: '移动层最多',
|
move_up: '移动层最多',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_zh_TW = (function () {
|
||||||
copy: 'Copy',
|
copy: 'Copy',
|
||||||
paste: 'Paste',
|
paste: 'Paste',
|
||||||
paste_in_place: 'Paste in Place',
|
paste_in_place: 'Paste in Place',
|
||||||
"delete": 'Delete',
|
delete: 'Delete',
|
||||||
group: 'Group',
|
group: 'Group',
|
||||||
move_front: 'Bring to Front',
|
move_front: 'Bring to Front',
|
||||||
move_up: 'Bring Forward',
|
move_up: 'Bring Forward',
|
||||||
|
@ -154,7 +154,7 @@ var svgEditorLang_zh_TW = (function () {
|
||||||
layers: 'Layers',
|
layers: 'Layers',
|
||||||
del: '刪除圖層',
|
del: '刪除圖層',
|
||||||
move_down: '向下移動圖層',
|
move_down: '向下移動圖層',
|
||||||
"new": '新增圖層',
|
new: '新增圖層',
|
||||||
rename: '重新命名圖層',
|
rename: '重新命名圖層',
|
||||||
move_up: '向上移動圖層',
|
move_up: '向上移動圖層',
|
||||||
dupe: 'Duplicate Layer',
|
dupe: 'Duplicate Layer',
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue