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 () {
|
||||
'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
|
||||
|
||||
/**
|
||||
|
@ -31,7 +15,7 @@
|
|||
*/
|
||||
function mixin(o, ps) {
|
||||
if (!o) return;
|
||||
Object.keys(ps).forEach(function (p) {
|
||||
Object.keys(ps).forEach(p => {
|
||||
if (p in o || p in o.prototype) {
|
||||
return;
|
||||
}
|
||||
|
@ -52,8 +36,8 @@
|
|||
|
||||
|
||||
function convertNodesIntoANode(nodes) {
|
||||
nodes = nodes.map(function (node) {
|
||||
var isNode = node && _typeof(node) === 'object' && 'nodeType' in node;
|
||||
nodes = nodes.map(node => {
|
||||
const isNode = node && typeof node === 'object' && 'nodeType' in node;
|
||||
return isNode ? node : document.createTextNode(node);
|
||||
});
|
||||
|
||||
|
@ -61,30 +45,24 @@
|
|||
return nodes[0];
|
||||
}
|
||||
|
||||
var node = document.createDocumentFragment();
|
||||
nodes.forEach(function (n) {
|
||||
const node = document.createDocumentFragment();
|
||||
nodes.forEach(n => {
|
||||
node.appendChild(n);
|
||||
});
|
||||
return node;
|
||||
}
|
||||
|
||||
var ParentNode = {
|
||||
prepend: function prepend() {
|
||||
for (var _len = arguments.length, nodes = new Array(_len), _key = 0; _key < _len; _key++) {
|
||||
nodes[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
const ParentNode = {
|
||||
prepend(...nodes) {
|
||||
nodes = convertNodesIntoANode(nodes);
|
||||
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);
|
||||
this.appendChild(nodes);
|
||||
}
|
||||
|
||||
};
|
||||
mixin(Document || HTMLDocument, ParentNode); // HTMLDocument for IE8
|
||||
|
||||
|
@ -92,54 +70,44 @@
|
|||
mixin(Element, ParentNode); // Mixin ChildNode
|
||||
// https://dom.spec.whatwg.org/#interface-childnode
|
||||
|
||||
var ChildNode = {
|
||||
before: function before() {
|
||||
var parent = this.parentNode;
|
||||
const ChildNode = {
|
||||
before(...nodes) {
|
||||
const parent = this.parentNode;
|
||||
if (!parent) return;
|
||||
var viablePreviousSibling = this.previousSibling;
|
||||
|
||||
for (var _len3 = arguments.length, nodes = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
||||
nodes[_key3] = arguments[_key3];
|
||||
}
|
||||
let viablePreviousSibling = this.previousSibling;
|
||||
|
||||
while (nodes.includes(viablePreviousSibling)) {
|
||||
viablePreviousSibling = viablePreviousSibling.previousSibling;
|
||||
}
|
||||
|
||||
var node = convertNodesIntoANode(nodes);
|
||||
const node = convertNodesIntoANode(nodes);
|
||||
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++) {
|
||||
nodes[_key4] = arguments[_key4];
|
||||
}
|
||||
after(...nodes) {
|
||||
const parent = this.parentNode;
|
||||
if (!parent) return;
|
||||
let viableNextSibling = this.nextSibling;
|
||||
|
||||
while (nodes.includes(viableNextSibling)) {
|
||||
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);
|
||||
},
|
||||
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++) {
|
||||
nodes[_key5] = arguments[_key5];
|
||||
}
|
||||
replaceWith(...nodes) {
|
||||
const parent = this.parentNode;
|
||||
if (!parent) return;
|
||||
let viableNextSibling = this.nextSibling;
|
||||
|
||||
while (nodes.includes(viableNextSibling)) {
|
||||
viableNextSibling = viableNextSibling.nextSibling;
|
||||
}
|
||||
|
||||
var node = convertNodesIntoANode(nodes);
|
||||
const node = convertNodesIntoANode(nodes);
|
||||
|
||||
if (this.parentNode === parent) {
|
||||
parent.replaceChild(node, this);
|
||||
|
@ -148,13 +116,15 @@
|
|||
parent.insertBefore(node, viableNextSibling);
|
||||
}
|
||||
},
|
||||
remove: function remove() {
|
||||
|
||||
remove() {
|
||||
if (!this.parentNode) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.parentNode.removeChild(this); // eslint-disable-line unicorn/prefer-node-remove
|
||||
}
|
||||
|
||||
};
|
||||
mixin(DocumentType, ChildNode);
|
||||
mixin(Element, ChildNode);
|
||||
|
|
|
@ -1,42 +1,6 @@
|
|||
var svgEditorExtension_arrows = (function () {
|
||||
'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
|
||||
*
|
||||
|
@ -47,351 +11,361 @@ var svgEditorExtension_arrows = (function () {
|
|||
*/
|
||||
var extArrows = {
|
||||
name: 'arrows',
|
||||
init: function init(S) {
|
||||
var _this = this;
|
||||
|
||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
|
||||
var strings, svgEditor, svgCanvas, addElem, nonce, $, prefix, selElems, arrowprefix, randomizeIds, setArrowNonce, unsetArrowNonce, pathdata, getLinked, showPanel, resetMarker, addMarker, setArrow, colorChanged, contextTools;
|
||||
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
||||
while (1) {
|
||||
switch (_context2.prev = _context2.next) {
|
||||
case 0:
|
||||
colorChanged = function _colorChanged(elem) {
|
||||
var color = elem.getAttribute('stroke');
|
||||
var mtypes = ['start', 'mid', 'end'];
|
||||
var defs = svgCanvas.findDefs();
|
||||
$.each(mtypes, function (i, type) {
|
||||
var marker = getLinked(elem, 'marker-' + type);
|
||||
async init(S) {
|
||||
const strings = await S.importLocale();
|
||||
const svgEditor = this;
|
||||
const svgCanvas = svgEditor.canvas;
|
||||
const // {svgcontent} = S,
|
||||
addElem = svgCanvas.addSVGElementFromJson,
|
||||
{
|
||||
nonce,
|
||||
$
|
||||
} = S,
|
||||
prefix = 'se_arrow_';
|
||||
let selElems,
|
||||
arrowprefix,
|
||||
randomizeIds = S.randomize_ids;
|
||||
/**
|
||||
* @param {Window} win
|
||||
* @param {!(string|Integer)} n
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
if (!marker) {
|
||||
return;
|
||||
}
|
||||
|
||||
var curColor = $(marker).children().attr('fill');
|
||||
var curD = $(marker).children().attr('d');
|
||||
|
||||
if (curColor === color) {
|
||||
return;
|
||||
}
|
||||
|
||||
var allMarkers = $(defs).find('marker');
|
||||
var newMarker = null; // Different color, check if already made
|
||||
|
||||
allMarkers.each(function () {
|
||||
var 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
|
||||
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();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
setArrow = function _setArrow() {
|
||||
resetMarker();
|
||||
var type = this.value;
|
||||
|
||||
if (type === 'none') {
|
||||
return;
|
||||
} // Set marker on element
|
||||
function setArrowNonce(win, n) {
|
||||
randomizeIds = true;
|
||||
arrowprefix = prefix + n + '_';
|
||||
pathdata.fw.id = arrowprefix + 'fw';
|
||||
pathdata.bk.id = arrowprefix + 'bk';
|
||||
}
|
||||
/**
|
||||
* @param {Window} win
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
|
||||
var dir = 'fw';
|
||||
function unsetArrowNonce(win) {
|
||||
randomizeIds = false;
|
||||
arrowprefix = prefix;
|
||||
pathdata.fw.id = arrowprefix + 'fw';
|
||||
pathdata.bk.id = arrowprefix + 'bk';
|
||||
}
|
||||
|
||||
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';
|
||||
}
|
||||
svgCanvas.bind('setnonce', setArrowNonce);
|
||||
svgCanvas.bind('unsetnonce', unsetArrowNonce);
|
||||
|
||||
addMarker(dir, type);
|
||||
svgCanvas.changeSelectedAttribute('marker-' + type, 'url(#' + pathdata[dir].id + ')');
|
||||
svgCanvas.call('changed', selElems);
|
||||
};
|
||||
if (randomizeIds) {
|
||||
arrowprefix = prefix + nonce + '_';
|
||||
} else {
|
||||
arrowprefix = prefix;
|
||||
}
|
||||
|
||||
addMarker = function _addMarker(dir, type, id) {
|
||||
// TODO: Make marker (or use?) per arrow type, since refX can be different
|
||||
id = id || arrowprefix + dir;
|
||||
var data = pathdata[dir];
|
||||
const 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 {Element} elem
|
||||
* @param {string} attr
|
||||
* @returns {Element}
|
||||
*/
|
||||
|
||||
if (type === 'mid') {
|
||||
data.refx = 5;
|
||||
}
|
||||
function getLinked(elem, attr) {
|
||||
const str = elem.getAttribute(attr);
|
||||
|
||||
var marker = svgCanvas.getElem(id);
|
||||
if (!str) {
|
||||
return null;
|
||||
}
|
||||
|
||||
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
|
||||
const m = str.match(/\(#(.*)\)/); // const m = str.match(/\(#(?<id>.+)\)/);
|
||||
// if (!m || !m.groups.id) {
|
||||
|
||||
}
|
||||
});
|
||||
var arrow = addElem({
|
||||
element: 'path',
|
||||
attr: {
|
||||
d: data.d,
|
||||
fill: '#000000'
|
||||
}
|
||||
});
|
||||
marker.append(arrow);
|
||||
svgCanvas.findDefs().append(marker);
|
||||
}
|
||||
if (!m || m.length !== 2) {
|
||||
return null;
|
||||
}
|
||||
|
||||
marker.setAttribute('refX', data.refx);
|
||||
return marker;
|
||||
};
|
||||
return svgCanvas.getElem(m[1]); // return svgCanvas.getElem(m.groups.id);
|
||||
}
|
||||
/**
|
||||
* @param {boolean} on
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
resetMarker = function _resetMarker() {
|
||||
var el = selElems[0];
|
||||
el.removeAttribute('marker-start');
|
||||
el.removeAttribute('marker-mid');
|
||||
el.removeAttribute('marker-end');
|
||||
};
|
||||
|
||||
showPanel = function _showPanel(on) {
|
||||
$('#arrow_panel').toggle(on);
|
||||
function showPanel(on) {
|
||||
$('#arrow_panel').toggle(on);
|
||||
|
||||
if (on) {
|
||||
var el = selElems[0];
|
||||
var end = el.getAttribute('marker-end');
|
||||
var start = el.getAttribute('marker-start');
|
||||
var mid = el.getAttribute('marker-mid');
|
||||
var val;
|
||||
if (on) {
|
||||
const el = selElems[0];
|
||||
const end = el.getAttribute('marker-end');
|
||||
const start = el.getAttribute('marker-start');
|
||||
const mid = el.getAttribute('marker-mid');
|
||||
let val;
|
||||
|
||||
if (end && start) {
|
||||
val = 'both';
|
||||
} else if (end) {
|
||||
val = 'end';
|
||||
} else if (start) {
|
||||
val = 'start';
|
||||
} else if (mid) {
|
||||
val = 'mid';
|
||||
if (end && start) {
|
||||
val = 'both';
|
||||
} else if (end) {
|
||||
val = 'end';
|
||||
} else if (start) {
|
||||
val = 'start';
|
||||
} else if (mid) {
|
||||
val = 'mid';
|
||||
|
||||
if (mid.includes('bk')) {
|
||||
val = 'mid_bk';
|
||||
}
|
||||
}
|
||||
|
||||
if (!start && !mid && !end) {
|
||||
val = 'none';
|
||||
}
|
||||
|
||||
$('#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}
|
||||
*/
|
||||
|
||||
svgCanvas.bind('setnonce', setArrowNonce);
|
||||
svgCanvas.bind('unsetnonce', unsetArrowNonce);
|
||||
|
||||
if (randomizeIds) {
|
||||
arrowprefix = prefix + nonce + '_';
|
||||
} else {
|
||||
arrowprefix = prefix;
|
||||
}
|
||||
|
||||
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 {Element} elem
|
||||
* @param {string} attr
|
||||
* @returns {Element}
|
||||
*/
|
||||
|
||||
contextTools = [{
|
||||
type: 'select',
|
||||
panel: 'arrow_panel',
|
||||
id: 'arrow_list',
|
||||
defval: 'none',
|
||||
events: {
|
||||
change: setArrow
|
||||
}
|
||||
}];
|
||||
return _context2.abrupt("return", {
|
||||
name: strings.name,
|
||||
context_tools: strings.contextTools.map(function (contextTool, i) {
|
||||
return Object.assign(contextTools[i], contextTool);
|
||||
}),
|
||||
callback: function callback() {
|
||||
$('#arrow_panel').hide(); // Set ID so it can be translated in locale file
|
||||
|
||||
$('#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) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
lang = _ref.lang, importLocale = _ref.importLocale;
|
||||
_context.next = 3;
|
||||
return importLocale();
|
||||
|
||||
case 3:
|
||||
_yield$importLocale = _context.sent;
|
||||
langList = _yield$importLocale.langList;
|
||||
return _context.abrupt("return", {
|
||||
data: langList
|
||||
});
|
||||
|
||||
case 6:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
},
|
||||
selectedChanged: function selectedChanged(opts) {
|
||||
// Use this to update the current selected elements
|
||||
selElems = opts.elems;
|
||||
var markerElems = ['line', 'path', 'polyline', 'polygon'];
|
||||
var i = selElems.length;
|
||||
|
||||
while (i--) {
|
||||
var elem = selElems[i];
|
||||
|
||||
if (elem && markerElems.includes(elem.tagName)) {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
elementChanged: function elementChanged(opts) {
|
||||
var elem = opts.elems[0];
|
||||
|
||||
if (elem && (elem.getAttribute('marker-start') || elem.getAttribute('marker-mid') || elem.getAttribute('marker-end'))) {
|
||||
// const start = elem.getAttribute('marker-start');
|
||||
// const mid = elem.getAttribute('marker-mid');
|
||||
// const end = elem.getAttribute('marker-end');
|
||||
// Has marker, so see if it should match color
|
||||
colorChanged(elem);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
case 21:
|
||||
case "end":
|
||||
return _context2.stop();
|
||||
if (mid.includes('bk')) {
|
||||
val = 'mid_bk';
|
||||
}
|
||||
}
|
||||
}, _callee2);
|
||||
}))();
|
||||
|
||||
if (!start && !mid && !end) {
|
||||
val = 'none';
|
||||
}
|
||||
|
||||
$('#arrow_list').val(val);
|
||||
}
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
|
||||
function resetMarker() {
|
||||
const el = selElems[0];
|
||||
el.removeAttribute('marker-start');
|
||||
el.removeAttribute('marker-mid');
|
||||
el.removeAttribute('marker-end');
|
||||
}
|
||||
/**
|
||||
* @param {"bk"|"fw"} dir
|
||||
* @param {"both"|"mid"|"end"|"start"} type
|
||||
* @param {string} id
|
||||
* @returns {Element}
|
||||
*/
|
||||
|
||||
|
||||
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',
|
||||
panel: 'arrow_panel',
|
||||
id: 'arrow_list',
|
||||
defval: 'none',
|
||||
events: {
|
||||
change: setArrow
|
||||
}
|
||||
}];
|
||||
return {
|
||||
name: strings.name,
|
||||
context_tools: strings.contextTools.map((contextTool, i) => {
|
||||
return Object.assign(contextTools[i], contextTool);
|
||||
}),
|
||||
|
||||
callback() {
|
||||
$('#arrow_panel').hide(); // Set ID so it can be translated in locale file
|
||||
|
||||
$('#arrow_list option')[0].id = 'connector_no_arrow';
|
||||
},
|
||||
|
||||
async addLangData({
|
||||
lang,
|
||||
importLocale
|
||||
}) {
|
||||
const {
|
||||
langList
|
||||
} = await importLocale();
|
||||
return {
|
||||
data: langList
|
||||
};
|
||||
},
|
||||
|
||||
selectedChanged(opts) {
|
||||
// Use this to update the current selected elements
|
||||
selElems = opts.elems;
|
||||
const markerElems = ['line', 'path', 'polyline', 'polygon'];
|
||||
let i = selElems.length;
|
||||
|
||||
while (i--) {
|
||||
const elem = selElems[i];
|
||||
|
||||
if (elem && markerElems.includes(elem.tagName)) {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
elementChanged(opts) {
|
||||
const elem = opts.elems[0];
|
||||
|
||||
if (elem && (elem.getAttribute('marker-start') || elem.getAttribute('marker-mid') || elem.getAttribute('marker-end'))) {
|
||||
// const start = elem.getAttribute('marker-start');
|
||||
// const mid = elem.getAttribute('marker-mid');
|
||||
// const end = elem.getAttribute('marker-end');
|
||||
// Has marker, so see if it should match color
|
||||
colorChanged(elem);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return extArrows;
|
||||
|
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
@ -1,42 +1,6 @@
|
|||
var svgEditorExtension_eyedropper = (function () {
|
||||
'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
|
||||
*
|
||||
|
@ -47,154 +11,151 @@ var svgEditorExtension_eyedropper = (function () {
|
|||
*/
|
||||
var extEyedropper = {
|
||||
name: 'eyedropper',
|
||||
init: function init(S) {
|
||||
var _this = this;
|
||||
|
||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
||||
var strings, svgEditor, $, ChangeElementCommand, svgCanvas, addToHistory, currentStyle, getStyle, buttons;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
getStyle = function _getStyle(opts) {
|
||||
// if we are in eyedropper mode, we don't want to disable the eye-dropper tool
|
||||
var mode = svgCanvas.getMode();
|
||||
async init(S) {
|
||||
const strings = await S.importLocale();
|
||||
const svgEditor = this;
|
||||
|
||||
if (mode === 'eyedropper') {
|
||||
return;
|
||||
}
|
||||
const {
|
||||
$,
|
||||
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}
|
||||
*/
|
||||
|
||||
var tool = $('#tool_eyedropper'); // enable-eye-dropper if one element is selected
|
||||
|
||||
var elem = null;
|
||||
function getStyle(opts) {
|
||||
// if we are in eyedropper mode, we don't want to disable the eye-dropper tool
|
||||
const mode = svgCanvas.getMode();
|
||||
|
||||
if (!opts.multiselected && opts.elems[0] && !['svg', 'g', 'use'].includes(opts.elems[0].nodeName)) {
|
||||
elem = opts.elems[0];
|
||||
tool.removeClass('disabled'); // grab the current style
|
||||
if (mode === 'eyedropper') {
|
||||
return;
|
||||
}
|
||||
|
||||
currentStyle.fillPaint = elem.getAttribute('fill') || 'black';
|
||||
currentStyle.fillOpacity = elem.getAttribute('fill-opacity') || 1.0;
|
||||
currentStyle.strokePaint = elem.getAttribute('stroke');
|
||||
currentStyle.strokeOpacity = elem.getAttribute('stroke-opacity') || 1.0;
|
||||
currentStyle.strokeWidth = elem.getAttribute('stroke-width');
|
||||
currentStyle.strokeDashArray = elem.getAttribute('stroke-dasharray');
|
||||
currentStyle.strokeLinecap = elem.getAttribute('stroke-linecap');
|
||||
currentStyle.strokeLinejoin = elem.getAttribute('stroke-linejoin');
|
||||
currentStyle.opacity = elem.getAttribute('opacity') || 1.0; // disable eye-dropper tool
|
||||
} else {
|
||||
tool.addClass('disabled');
|
||||
}
|
||||
};
|
||||
const tool = $('#tool_eyedropper'); // enable-eye-dropper if one element is selected
|
||||
|
||||
_context.next = 3;
|
||||
return S.importLocale();
|
||||
let elem = null;
|
||||
|
||||
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}
|
||||
*/
|
||||
if (!opts.multiselected && opts.elems[0] && !['svg', 'g', 'use'].includes(opts.elems[0].nodeName)) {
|
||||
elem = opts.elems[0];
|
||||
tool.removeClass('disabled'); // grab the current style
|
||||
|
||||
buttons = [{
|
||||
id: 'tool_eyedropper',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'eyedropper.png',
|
||||
type: 'mode',
|
||||
events: {
|
||||
click: function click() {
|
||||
svgCanvas.setMode('eyedropper');
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context.abrupt("return", {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'eyedropper-icon.xml',
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
// if we have selected an element, grab its paint and enable the eye dropper button
|
||||
selectedChanged: getStyle,
|
||||
elementChanged: getStyle,
|
||||
mouseDown: function mouseDown(opts) {
|
||||
var mode = svgCanvas.getMode();
|
||||
currentStyle.fillPaint = elem.getAttribute('fill') || 'black';
|
||||
currentStyle.fillOpacity = elem.getAttribute('fill-opacity') || 1.0;
|
||||
currentStyle.strokePaint = elem.getAttribute('stroke');
|
||||
currentStyle.strokeOpacity = elem.getAttribute('stroke-opacity') || 1.0;
|
||||
currentStyle.strokeWidth = elem.getAttribute('stroke-width');
|
||||
currentStyle.strokeDashArray = elem.getAttribute('stroke-dasharray');
|
||||
currentStyle.strokeLinecap = elem.getAttribute('stroke-linecap');
|
||||
currentStyle.strokeLinejoin = elem.getAttribute('stroke-linejoin');
|
||||
currentStyle.opacity = elem.getAttribute('opacity') || 1.0; // disable eye-dropper tool
|
||||
} else {
|
||||
tool.addClass('disabled');
|
||||
}
|
||||
}
|
||||
|
||||
if (mode === 'eyedropper') {
|
||||
var e = opts.event;
|
||||
var target = e.target;
|
||||
const buttons = [{
|
||||
id: 'tool_eyedropper',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'eyedropper.png',
|
||||
type: 'mode',
|
||||
events: {
|
||||
click() {
|
||||
svgCanvas.setMode('eyedropper');
|
||||
}
|
||||
|
||||
if (!['svg', 'g', 'use'].includes(target.nodeName)) {
|
||||
var changes = {};
|
||||
}
|
||||
}];
|
||||
return {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'eyedropper-icon.xml',
|
||||
buttons: strings.buttons.map((button, i) => {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
// if we have selected an element, grab its paint and enable the eye dropper button
|
||||
selectedChanged: getStyle,
|
||||
elementChanged: getStyle,
|
||||
|
||||
var change = function change(elem, attrname, newvalue) {
|
||||
changes[attrname] = elem.getAttribute(attrname);
|
||||
elem.setAttribute(attrname, newvalue);
|
||||
};
|
||||
mouseDown(opts) {
|
||||
const mode = svgCanvas.getMode();
|
||||
|
||||
if (currentStyle.fillPaint) {
|
||||
change(target, 'fill', currentStyle.fillPaint);
|
||||
}
|
||||
if (mode === 'eyedropper') {
|
||||
const e = opts.event;
|
||||
const {
|
||||
target
|
||||
} = e;
|
||||
|
||||
if (currentStyle.fillOpacity) {
|
||||
change(target, 'fill-opacity', currentStyle.fillOpacity);
|
||||
}
|
||||
if (!['svg', 'g', 'use'].includes(target.nodeName)) {
|
||||
const changes = {};
|
||||
|
||||
if (currentStyle.strokePaint) {
|
||||
change(target, 'stroke', currentStyle.strokePaint);
|
||||
}
|
||||
const change = function (elem, attrname, newvalue) {
|
||||
changes[attrname] = elem.getAttribute(attrname);
|
||||
elem.setAttribute(attrname, newvalue);
|
||||
};
|
||||
|
||||
if (currentStyle.strokeOpacity) {
|
||||
change(target, 'stroke-opacity', currentStyle.strokeOpacity);
|
||||
}
|
||||
if (currentStyle.fillPaint) {
|
||||
change(target, 'fill', currentStyle.fillPaint);
|
||||
}
|
||||
|
||||
if (currentStyle.strokeWidth) {
|
||||
change(target, 'stroke-width', currentStyle.strokeWidth);
|
||||
}
|
||||
if (currentStyle.fillOpacity) {
|
||||
change(target, 'fill-opacity', currentStyle.fillOpacity);
|
||||
}
|
||||
|
||||
if (currentStyle.strokeDashArray) {
|
||||
change(target, 'stroke-dasharray', currentStyle.strokeDashArray);
|
||||
}
|
||||
if (currentStyle.strokePaint) {
|
||||
change(target, 'stroke', currentStyle.strokePaint);
|
||||
}
|
||||
|
||||
if (currentStyle.opacity) {
|
||||
change(target, 'opacity', currentStyle.opacity);
|
||||
}
|
||||
if (currentStyle.strokeOpacity) {
|
||||
change(target, 'stroke-opacity', currentStyle.strokeOpacity);
|
||||
}
|
||||
|
||||
if (currentStyle.strokeLinecap) {
|
||||
change(target, 'stroke-linecap', currentStyle.strokeLinecap);
|
||||
}
|
||||
if (currentStyle.strokeWidth) {
|
||||
change(target, 'stroke-width', currentStyle.strokeWidth);
|
||||
}
|
||||
|
||||
if (currentStyle.strokeLinejoin) {
|
||||
change(target, 'stroke-linejoin', currentStyle.strokeLinejoin);
|
||||
}
|
||||
if (currentStyle.strokeDashArray) {
|
||||
change(target, 'stroke-dasharray', currentStyle.strokeDashArray);
|
||||
}
|
||||
|
||||
addToHistory(new ChangeElementCommand(target, changes));
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
if (currentStyle.opacity) {
|
||||
change(target, 'opacity', currentStyle.opacity);
|
||||
}
|
||||
|
||||
case 8:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
if (currentStyle.strokeLinecap) {
|
||||
change(target, 'stroke-linecap', currentStyle.strokeLinecap);
|
||||
}
|
||||
|
||||
if (currentStyle.strokeLinejoin) {
|
||||
change(target, 'stroke-linejoin', currentStyle.strokeLinejoin);
|
||||
}
|
||||
|
||||
addToHistory(new ChangeElementCommand(target, changes));
|
||||
}
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return extEyedropper;
|
||||
|
|
|
@ -1,42 +1,6 @@
|
|||
var svgEditorExtension_foreignobject = (function () {
|
||||
'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
|
||||
*
|
||||
|
@ -47,315 +11,305 @@ var svgEditorExtension_foreignobject = (function () {
|
|||
*/
|
||||
var extForeignobject = {
|
||||
name: 'foreignobject',
|
||||
init: function init(S) {
|
||||
var _this = this;
|
||||
|
||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
|
||||
var svgEditor, $, text2xml, NS, importLocale, svgCanvas, svgdoc, strings, properlySourceSizeTextArea, showPanel, toggleSourceButtons, selElems, started, newFO, editingforeign, setForeignString, showForeignEditor, setAttr, buttons, contextTools;
|
||||
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
||||
while (1) {
|
||||
switch (_context2.prev = _context2.next) {
|
||||
case 0:
|
||||
setAttr = function _setAttr(attr, val) {
|
||||
svgCanvas.changeSelectedAttribute(attr, val);
|
||||
svgCanvas.call('changed', selElems);
|
||||
};
|
||||
async init(S) {
|
||||
const svgEditor = this;
|
||||
const {
|
||||
$,
|
||||
text2xml,
|
||||
NS,
|
||||
importLocale
|
||||
} = S;
|
||||
const svgCanvas = svgEditor.canvas;
|
||||
const // {svgcontent} = S,
|
||||
// addElem = svgCanvas.addSVGElementFromJson,
|
||||
svgdoc = S.svgroot.parentNode.ownerDocument;
|
||||
const strings = await importLocale();
|
||||
|
||||
showForeignEditor = function _showForeignEditor() {
|
||||
var elt = selElems[0];
|
||||
|
||||
if (!elt || editingforeign) {
|
||||
return;
|
||||
}
|
||||
|
||||
editingforeign = true;
|
||||
toggleSourceButtons(true);
|
||||
elt.removeAttribute('fill');
|
||||
var str = svgCanvas.svgToString(elt, 0);
|
||||
$('#svg_source_textarea').val(str);
|
||||
$('#svg_source_editor').fadeIn();
|
||||
properlySourceSizeTextArea();
|
||||
$('#svg_source_textarea').focus();
|
||||
};
|
||||
|
||||
setForeignString = function _setForeignString(xmlString) {
|
||||
var elt = selElems[0]; // The parent `Element` to append to
|
||||
|
||||
try {
|
||||
// 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
|
||||
|
||||
svgCanvas.sanitizeSvg(newDoc.documentElement);
|
||||
elt.replaceWith(svgdoc.importNode(newDoc.documentElement.firstChild, true));
|
||||
svgCanvas.call('changed', [elt]);
|
||||
svgCanvas.clearSelection();
|
||||
} catch (e) {
|
||||
// Todo: Surface error to user
|
||||
console.log(e); // eslint-disable-line no-console
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
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}
|
||||
*/
|
||||
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}
|
||||
*/
|
||||
|
||||
|
||||
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 showPanel(on) {
|
||||
let fcRules = $('#fc_rules');
|
||||
|
||||
buttons = [{
|
||||
id: 'tool_foreign',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'foreignobject-tool.png',
|
||||
type: 'mode',
|
||||
events: {
|
||||
click: function click() {
|
||||
svgCanvas.setMode('foreign');
|
||||
}
|
||||
}
|
||||
}, {
|
||||
id: 'edit_foreign',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'foreignobject-edit.png',
|
||||
type: 'context',
|
||||
panel: 'foreignObject_panel',
|
||||
events: {
|
||||
click: function click() {
|
||||
showForeignEditor();
|
||||
}
|
||||
}
|
||||
}];
|
||||
contextTools = [{
|
||||
type: 'input',
|
||||
panel: 'foreignObject_panel',
|
||||
id: 'foreign_width',
|
||||
size: 3,
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('width', this.value);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
type: 'input',
|
||||
panel: 'foreignObject_panel',
|
||||
id: 'foreign_height',
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('height', this.value);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
type: 'input',
|
||||
panel: 'foreignObject_panel',
|
||||
id: 'foreign_font_size',
|
||||
size: 2,
|
||||
defval: 16,
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('font-size', this.value);
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context2.abrupt("return", {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'foreignobject-icons.xml',
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
context_tools: strings.contextTools.map(function (contextTool, i) {
|
||||
return Object.assign(contextTools[i], contextTool);
|
||||
}),
|
||||
callback: function callback() {
|
||||
$('#foreignObject_panel').hide();
|
||||
if (!fcRules.length) {
|
||||
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
||||
}
|
||||
|
||||
var endChanges = function endChanges() {
|
||||
$('#svg_source_editor').hide();
|
||||
editingforeign = false;
|
||||
$('#svg_source_textarea').blur();
|
||||
toggleSourceButtons(false);
|
||||
}; // TODO: Needs to be done after orig icon loads
|
||||
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
||||
$('#foreignObject_panel').toggle(on);
|
||||
}
|
||||
/**
|
||||
* @param {boolean} on
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
// Create source save/cancel buttons
|
||||
function toggleSourceButtons(on) {
|
||||
$('#tool_source_save, #tool_source_cancel').toggle(!on);
|
||||
$('#foreign_save, #foreign_cancel').toggle(on);
|
||||
}
|
||||
|
||||
/* const save = */
|
||||
$('#tool_source_save').clone().hide().attr('id', 'foreign_save').unbind().appendTo('#tool_source_back').click( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
||||
var ok;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
if (editingforeign) {
|
||||
_context.next = 2;
|
||||
break;
|
||||
}
|
||||
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.
|
||||
*/
|
||||
|
||||
return _context.abrupt("return");
|
||||
function setForeignString(xmlString) {
|
||||
const elt = selElems[0]; // The parent `Element` to append to
|
||||
|
||||
case 2:
|
||||
if (setForeignString($('#svg_source_textarea').val())) {
|
||||
_context.next = 11;
|
||||
break;
|
||||
}
|
||||
try {
|
||||
// convert string into XML document
|
||||
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
|
||||
|
||||
_context.next = 5;
|
||||
return $.confirm('Errors found. Revert to original?');
|
||||
svgCanvas.sanitizeSvg(newDoc.documentElement);
|
||||
elt.replaceWith(svgdoc.importNode(newDoc.documentElement.firstChild, true));
|
||||
svgCanvas.call('changed', [elt]);
|
||||
svgCanvas.clearSelection();
|
||||
} catch (e) {
|
||||
// Todo: Surface error to user
|
||||
console.log(e); // eslint-disable-line no-console
|
||||
|
||||
case 5:
|
||||
ok = _context.sent;
|
||||
return false;
|
||||
}
|
||||
|
||||
if (ok) {
|
||||
_context.next = 8;
|
||||
break;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
return _context.abrupt("return");
|
||||
|
||||
case 8:
|
||||
endChanges();
|
||||
_context.next = 12;
|
||||
break;
|
||||
function showForeignEditor() {
|
||||
const elt = selElems[0];
|
||||
|
||||
case 11:
|
||||
endChanges();
|
||||
if (!elt || editingforeign) {
|
||||
return;
|
||||
}
|
||||
|
||||
case 12:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, _callee);
|
||||
})));
|
||||
/* const cancel = */
|
||||
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();
|
||||
}
|
||||
/**
|
||||
* @param {string} attr
|
||||
* @param {string|Float} val
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
$('#tool_source_cancel').clone().hide().attr('id', 'foreign_cancel').unbind().appendTo('#tool_source_back').click(function () {
|
||||
endChanges();
|
||||
});
|
||||
}, 3000);
|
||||
},
|
||||
mouseDown: function mouseDown(opts) {
|
||||
// const e = opts.event;
|
||||
if (svgCanvas.getMode() !== 'foreign') {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
started = true;
|
||||
newFO = svgCanvas.addSVGElementFromJson({
|
||||
element: 'foreignObject',
|
||||
attr: {
|
||||
x: opts.start_x,
|
||||
y: opts.start_y,
|
||||
id: svgCanvas.getNextId(),
|
||||
'font-size': 16,
|
||||
// cur_text.font_size,
|
||||
width: '48',
|
||||
height: '20',
|
||||
style: 'pointer-events:inherit'
|
||||
}
|
||||
});
|
||||
var m = svgdoc.createElementNS(NS.MATH, 'math');
|
||||
m.setAttributeNS(NS.XMLNS, 'xmlns', NS.MATH);
|
||||
m.setAttribute('display', 'inline');
|
||||
var mi = svgdoc.createElementNS(NS.MATH, 'mi');
|
||||
mi.setAttribute('mathvariant', 'normal');
|
||||
mi.textContent = "\u03A6";
|
||||
var mo = svgdoc.createElementNS(NS.MATH, 'mo');
|
||||
mo.textContent = "\u222A";
|
||||
var mi2 = svgdoc.createElementNS(NS.MATH, 'mi');
|
||||
mi2.textContent = "\u2133";
|
||||
m.append(mi, mo, mi2);
|
||||
newFO.append(m);
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
},
|
||||
mouseUp: function mouseUp(opts) {
|
||||
// const e = opts.event;
|
||||
if (svgCanvas.getMode() !== 'foreign' || !started) {
|
||||
return undefined;
|
||||
}
|
||||
function setAttr(attr, val) {
|
||||
svgCanvas.changeSelectedAttribute(attr, val);
|
||||
svgCanvas.call('changed', selElems);
|
||||
}
|
||||
|
||||
var attrs = $(newFO).attr(['width', 'height']);
|
||||
var keep = attrs.width !== '0' || attrs.height !== '0';
|
||||
svgCanvas.addToSelection([newFO], true);
|
||||
return {
|
||||
keep: keep,
|
||||
element: newFO
|
||||
};
|
||||
},
|
||||
selectedChanged: function selectedChanged(opts) {
|
||||
// Use this to update the current selected elements
|
||||
selElems = opts.elems;
|
||||
var i = selElems.length;
|
||||
const buttons = [{
|
||||
id: 'tool_foreign',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'foreignobject-tool.png',
|
||||
type: 'mode',
|
||||
events: {
|
||||
click() {
|
||||
svgCanvas.setMode('foreign');
|
||||
}
|
||||
|
||||
while (i--) {
|
||||
var elem = selElems[i];
|
||||
}
|
||||
}, {
|
||||
id: 'edit_foreign',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'foreignobject-edit.png',
|
||||
type: 'context',
|
||||
panel: 'foreignObject_panel',
|
||||
events: {
|
||||
click() {
|
||||
showForeignEditor();
|
||||
}
|
||||
|
||||
if (elem && elem.tagName === 'foreignObject') {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
$('#foreign_font_size').val(elem.getAttribute('font-size'));
|
||||
$('#foreign_width').val(elem.getAttribute('width'));
|
||||
$('#foreign_height').val(elem.getAttribute('height'));
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
elementChanged: function elementChanged(opts) {// const elem = opts.elems[0];
|
||||
}
|
||||
});
|
||||
}
|
||||
}];
|
||||
const contextTools = [{
|
||||
type: 'input',
|
||||
panel: 'foreignObject_panel',
|
||||
id: 'foreign_width',
|
||||
size: 3,
|
||||
events: {
|
||||
change() {
|
||||
setAttr('width', this.value);
|
||||
}
|
||||
|
||||
case 17:
|
||||
case "end":
|
||||
return _context2.stop();
|
||||
}
|
||||
}, {
|
||||
type: 'input',
|
||||
panel: 'foreignObject_panel',
|
||||
id: 'foreign_height',
|
||||
events: {
|
||||
change() {
|
||||
setAttr('height', this.value);
|
||||
}
|
||||
|
||||
}
|
||||
}, {
|
||||
type: 'input',
|
||||
panel: 'foreignObject_panel',
|
||||
id: 'foreign_font_size',
|
||||
size: 2,
|
||||
defval: 16,
|
||||
events: {
|
||||
change() {
|
||||
setAttr('font-size', this.value);
|
||||
}
|
||||
|
||||
}
|
||||
}];
|
||||
return {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'foreignobject-icons.xml',
|
||||
buttons: strings.buttons.map((button, i) => {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
context_tools: strings.contextTools.map((contextTool, i) => {
|
||||
return Object.assign(contextTools[i], contextTool);
|
||||
}),
|
||||
|
||||
callback() {
|
||||
$('#foreignObject_panel').hide();
|
||||
|
||||
const endChanges = function () {
|
||||
$('#svg_source_editor').hide();
|
||||
editingforeign = false;
|
||||
$('#svg_source_textarea').blur();
|
||||
toggleSourceButtons(false);
|
||||
}; // TODO: Needs to be done after orig icon loads
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
// Create source save/cancel buttons
|
||||
|
||||
/* const save = */
|
||||
$('#tool_source_save').clone().hide().attr('id', 'foreign_save').unbind().appendTo('#tool_source_back').click(async function () {
|
||||
if (!editingforeign) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!setForeignString($('#svg_source_textarea').val())) {
|
||||
const ok = await $.confirm('Errors found. Revert to original?');
|
||||
|
||||
if (!ok) {
|
||||
return;
|
||||
}
|
||||
|
||||
endChanges();
|
||||
} else {
|
||||
endChanges();
|
||||
} // setSelectMode();
|
||||
|
||||
});
|
||||
/* const cancel = */
|
||||
|
||||
$('#tool_source_cancel').clone().hide().attr('id', 'foreign_cancel').unbind().appendTo('#tool_source_back').click(function () {
|
||||
endChanges();
|
||||
});
|
||||
}, 3000);
|
||||
},
|
||||
|
||||
mouseDown(opts) {
|
||||
// const e = opts.event;
|
||||
if (svgCanvas.getMode() !== 'foreign') {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
started = true;
|
||||
newFO = svgCanvas.addSVGElementFromJson({
|
||||
element: 'foreignObject',
|
||||
attr: {
|
||||
x: opts.start_x,
|
||||
y: opts.start_y,
|
||||
id: svgCanvas.getNextId(),
|
||||
'font-size': 16,
|
||||
// cur_text.font_size,
|
||||
width: '48',
|
||||
height: '20',
|
||||
style: 'pointer-events:inherit'
|
||||
}
|
||||
});
|
||||
const m = svgdoc.createElementNS(NS.MATH, 'math');
|
||||
m.setAttributeNS(NS.XMLNS, 'xmlns', NS.MATH);
|
||||
m.setAttribute('display', 'inline');
|
||||
const mi = svgdoc.createElementNS(NS.MATH, 'mi');
|
||||
mi.setAttribute('mathvariant', 'normal');
|
||||
mi.textContent = '\u03A6';
|
||||
const mo = svgdoc.createElementNS(NS.MATH, 'mo');
|
||||
mo.textContent = '\u222A';
|
||||
const mi2 = svgdoc.createElementNS(NS.MATH, 'mi');
|
||||
mi2.textContent = '\u2133';
|
||||
m.append(mi, mo, mi2);
|
||||
newFO.append(m);
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
},
|
||||
|
||||
mouseUp(opts) {
|
||||
// const e = opts.event;
|
||||
if (svgCanvas.getMode() !== 'foreign' || !started) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const attrs = $(newFO).attr(['width', 'height']);
|
||||
const keep = attrs.width !== '0' || attrs.height !== '0';
|
||||
svgCanvas.addToSelection([newFO], true);
|
||||
return {
|
||||
keep,
|
||||
element: newFO
|
||||
};
|
||||
},
|
||||
|
||||
selectedChanged(opts) {
|
||||
// Use this to update the current selected elements
|
||||
selElems = opts.elems;
|
||||
let i = selElems.length;
|
||||
|
||||
while (i--) {
|
||||
const elem = selElems[i];
|
||||
|
||||
if (elem && elem.tagName === 'foreignObject') {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
$('#foreign_font_size').val(elem.getAttribute('font-size'));
|
||||
$('#foreign_width').val(elem.getAttribute('width'));
|
||||
$('#foreign_height').val(elem.getAttribute('height'));
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
}
|
||||
}, _callee2);
|
||||
}))();
|
||||
},
|
||||
|
||||
elementChanged(opts) {// const elem = opts.elems[0];
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return extForeignobject;
|
||||
|
|
|
@ -1,42 +1,6 @@
|
|||
var svgEditorExtension_grid = (function () {
|
||||
'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
|
||||
*
|
||||
|
@ -47,174 +11,177 @@ var svgEditorExtension_grid = (function () {
|
|||
*/
|
||||
var extGrid = {
|
||||
name: 'grid',
|
||||
init: function init(_ref) {
|
||||
var _this = this;
|
||||
|
||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
||||
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) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
gridUpdate = function _gridUpdate() {
|
||||
if (showGrid) {
|
||||
updateGrid(svgCanvas.getZoom());
|
||||
}
|
||||
async init({
|
||||
$,
|
||||
NS,
|
||||
getTypeMap,
|
||||
importLocale
|
||||
}) {
|
||||
const strings = await importLocale();
|
||||
const svgEditor = this;
|
||||
const svgCanvas = svgEditor.canvas;
|
||||
const svgdoc = document.getElementById('svgcanvas').ownerDocument,
|
||||
{
|
||||
assignAttributes
|
||||
} = svgCanvas,
|
||||
hcanvas = document.createElement('canvas'),
|
||||
canvBG = $('#canvasBackground'),
|
||||
units = getTypeMap(),
|
||||
// Assumes prior `init()` call on `units.js` module
|
||||
intervals = [0.01, 0.1, 1, 10, 100, 1000];
|
||||
let showGrid = svgEditor.curConfig.showGrid || false;
|
||||
$(hcanvas).hide().appendTo('body');
|
||||
const canvasGrid = svgdoc.createElementNS(NS.SVG, 'svg');
|
||||
assignAttributes(canvasGrid, {
|
||||
id: 'canvasGrid',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
x: 0,
|
||||
y: 0,
|
||||
overflow: 'visible',
|
||||
display: 'none'
|
||||
});
|
||||
canvBG.append(canvasGrid);
|
||||
const gridDefs = svgdoc.createElementNS(NS.SVG, 'defs'); // grid-pattern
|
||||
|
||||
$('#canvasGrid').toggle(showGrid);
|
||||
$('#view_grid').toggleClass('push_button_pressed tool_button');
|
||||
};
|
||||
const gridPattern = svgdoc.createElementNS(NS.SVG, 'pattern');
|
||||
assignAttributes(gridPattern, {
|
||||
id: 'gridpattern',
|
||||
patternUnits: 'userSpaceOnUse',
|
||||
x: 0,
|
||||
// -(value.strokeWidth / 2), // position for strokewidth
|
||||
y: 0,
|
||||
// -(value.strokeWidth / 2), // position for strokewidth
|
||||
width: 100,
|
||||
height: 100
|
||||
});
|
||||
const gridimg = svgdoc.createElementNS(NS.SVG, 'image');
|
||||
assignAttributes(gridimg, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 100
|
||||
});
|
||||
gridPattern.append(gridimg);
|
||||
gridDefs.append(gridPattern);
|
||||
$('#canvasGrid').append(gridDefs); // grid-box
|
||||
|
||||
updateGrid = function _updateGrid(zoom) {
|
||||
// TODO: Try this with <line> elements, then compare performance difference
|
||||
var unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px
|
||||
const gridBox = svgdoc.createElementNS(NS.SVG, 'rect');
|
||||
assignAttributes(gridBox, {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
x: 0,
|
||||
y: 0,
|
||||
'stroke-width': 0,
|
||||
stroke: 'none',
|
||||
fill: 'url(#gridpattern)',
|
||||
style: 'pointer-events: none; display:visible;'
|
||||
});
|
||||
$('#canvasGrid').append(gridBox);
|
||||
/**
|
||||
*
|
||||
* @param {Float} zoom
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
var uMulti = unit * zoom; // Calculate the main number interval
|
||||
function updateGrid(zoom) {
|
||||
// TODO: Try this with <line> elements, then compare performance difference
|
||||
const unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px
|
||||
|
||||
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
|
||||
const uMulti = unit * zoom; // Calculate the main number interval
|
||||
|
||||
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;
|
||||
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
|
||||
|
||||
for (var i = 1; i < 10; i++) {
|
||||
var subD = Math.round(part * i) + 0.5; // const lineNum = (i % 2)?12:10;
|
||||
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;
|
||||
|
||||
var lineNum = 0;
|
||||
ctx.moveTo(subD, bigInt);
|
||||
ctx.lineTo(subD, lineNum);
|
||||
ctx.moveTo(bigInt, subD);
|
||||
ctx.lineTo(lineNum, subD);
|
||||
}
|
||||
for (let i = 1; i < 10; i++) {
|
||||
const subD = Math.round(part * i) + 0.5; // const lineNum = (i % 2)?12:10;
|
||||
|
||||
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);
|
||||
};
|
||||
const lineNum = 0;
|
||||
ctx.moveTo(subD, bigInt);
|
||||
ctx.lineTo(subD, lineNum);
|
||||
ctx.moveTo(bigInt, subD);
|
||||
ctx.lineTo(lineNum, subD);
|
||||
}
|
||||
|
||||
$ = _ref.$, NS = _ref.NS, getTypeMap = _ref.getTypeMap, importLocale = _ref.importLocale;
|
||||
_context.next = 5;
|
||||
return importLocale();
|
||||
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}
|
||||
*/
|
||||
|
||||
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');
|
||||
canvasGrid = svgdoc.createElementNS(NS.SVG, 'svg');
|
||||
assignAttributes(canvasGrid, {
|
||||
id: 'canvasGrid',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
x: 0,
|
||||
y: 0,
|
||||
overflow: 'visible',
|
||||
display: 'none'
|
||||
});
|
||||
canvBG.append(canvasGrid);
|
||||
gridDefs = svgdoc.createElementNS(NS.SVG, 'defs'); // grid-pattern
|
||||
|
||||
gridPattern = svgdoc.createElementNS(NS.SVG, 'pattern');
|
||||
assignAttributes(gridPattern, {
|
||||
id: 'gridpattern',
|
||||
patternUnits: 'userSpaceOnUse',
|
||||
x: 0,
|
||||
// -(value.strokeWidth / 2), // position for strokewidth
|
||||
y: 0,
|
||||
// -(value.strokeWidth / 2), // position for strokewidth
|
||||
width: 100,
|
||||
height: 100
|
||||
});
|
||||
gridimg = svgdoc.createElementNS(NS.SVG, 'image');
|
||||
assignAttributes(gridimg, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 100
|
||||
});
|
||||
gridPattern.append(gridimg);
|
||||
gridDefs.append(gridPattern);
|
||||
$('#canvasGrid').append(gridDefs); // grid-box
|
||||
function gridUpdate() {
|
||||
if (showGrid) {
|
||||
updateGrid(svgCanvas.getZoom());
|
||||
}
|
||||
|
||||
gridBox = svgdoc.createElementNS(NS.SVG, 'rect');
|
||||
assignAttributes(gridBox, {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
x: 0,
|
||||
y: 0,
|
||||
'stroke-width': 0,
|
||||
stroke: 'none',
|
||||
fill: 'url(#gridpattern)',
|
||||
style: 'pointer-events: none; display:visible;'
|
||||
});
|
||||
$('#canvasGrid').append(gridBox);
|
||||
/**
|
||||
*
|
||||
* @param {Float} zoom
|
||||
* @returns {void}
|
||||
*/
|
||||
$('#canvasGrid').toggle(showGrid);
|
||||
$('#view_grid').toggleClass('push_button_pressed tool_button');
|
||||
}
|
||||
|
||||
buttons = [{
|
||||
id: 'view_grid',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'grid.png',
|
||||
type: 'context',
|
||||
panel: 'editor_panel',
|
||||
events: {
|
||||
click: function click() {
|
||||
svgEditor.curConfig.showGrid = showGrid = !showGrid;
|
||||
gridUpdate();
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context.abrupt("return", {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'grid-icon.xml',
|
||||
zoomChanged: function zoomChanged(zoom) {
|
||||
if (showGrid) {
|
||||
updateGrid(zoom);
|
||||
}
|
||||
},
|
||||
callback: function callback() {
|
||||
if (showGrid) {
|
||||
gridUpdate();
|
||||
}
|
||||
},
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
})
|
||||
});
|
||||
|
||||
case 27:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
}
|
||||
const buttons = [{
|
||||
id: 'view_grid',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'grid.png',
|
||||
type: 'context',
|
||||
panel: 'editor_panel',
|
||||
events: {
|
||||
click() {
|
||||
svgEditor.curConfig.showGrid = showGrid = !showGrid;
|
||||
gridUpdate();
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
|
||||
}
|
||||
}];
|
||||
return {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'grid-icon.xml',
|
||||
|
||||
zoomChanged(zoom) {
|
||||
if (showGrid) {
|
||||
updateGrid(zoom);
|
||||
}
|
||||
},
|
||||
|
||||
callback() {
|
||||
if (showGrid) {
|
||||
gridUpdate();
|
||||
}
|
||||
},
|
||||
|
||||
buttons: strings.buttons.map((button, i) => {
|
||||
return Object.assign(buttons[i], button);
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return extGrid;
|
||||
|
|
|
@ -1,98 +1,6 @@
|
|||
var svgEditorExtension_helloworld = (function () {
|
||||
'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
|
||||
*
|
||||
|
@ -109,95 +17,82 @@ var svgEditorExtension_helloworld = (function () {
|
|||
*/
|
||||
var extHelloworld = {
|
||||
name: 'helloworld',
|
||||
init: function init(_ref) {
|
||||
var _this = this;
|
||||
|
||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
||||
var $, importLocale, strings, svgEditor, svgCanvas;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
$ = _ref.$, importLocale = _ref.importLocale;
|
||||
_context.next = 3;
|
||||
return importLocale();
|
||||
|
||||
case 3:
|
||||
strings = _context.sent;
|
||||
svgEditor = _this;
|
||||
svgCanvas = svgEditor.canvas;
|
||||
return _context.abrupt("return", {
|
||||
name: strings.name,
|
||||
// For more notes on how to make an icon file, see the source of
|
||||
// the helloworld-icon.xml
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'helloworld-icon.xml',
|
||||
// Multiple buttons can be added in this array
|
||||
buttons: [{
|
||||
// Must match the icon ID in helloworld-icon.xml
|
||||
id: 'hello_world',
|
||||
// Fallback, e.g., for `file:///` access
|
||||
icon: svgEditor.curConfig.extIconsPath + 'helloworld.png',
|
||||
// This indicates that the button will be added to the "mode"
|
||||
// button panel on the left side
|
||||
type: 'mode',
|
||||
// Tooltip text
|
||||
title: strings.buttons[0].title,
|
||||
// Events
|
||||
events: {
|
||||
click: function click() {
|
||||
// The action taken when the button is clicked on.
|
||||
// For "mode" buttons, any other button will
|
||||
// automatically be de-pressed.
|
||||
svgCanvas.setMode('hello_world');
|
||||
}
|
||||
}
|
||||
}],
|
||||
// This is triggered when the main mouse button is pressed down
|
||||
// on the editor canvas (not the tool panels)
|
||||
mouseDown: function mouseDown() {
|
||||
// Check the mode on mousedown
|
||||
if (svgCanvas.getMode() === 'hello_world') {
|
||||
// The returned object must include "started" with
|
||||
// a value of true in order for mouseUp to be triggered
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
// This is triggered from anywhere, but "started" must have been set
|
||||
// to true (see above). Note that "opts" is an object with event info
|
||||
mouseUp: function mouseUp(opts) {
|
||||
// Check the mode on mouseup
|
||||
if (svgCanvas.getMode() === 'hello_world') {
|
||||
var zoom = svgCanvas.getZoom(); // Get the actual coordinate by dividing by the zoom value
|
||||
|
||||
var x = opts.mouse_x / zoom;
|
||||
var 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];
|
||||
|
||||
text = text.replace('{' + prop + '}', val);
|
||||
}); // Show the text using the custom alert function
|
||||
|
||||
$.alert(text);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
case 7:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
async init({
|
||||
$,
|
||||
importLocale
|
||||
}) {
|
||||
// See `/editor/extensions/ext-locale/helloworld/`
|
||||
const strings = await importLocale();
|
||||
const svgEditor = this;
|
||||
const svgCanvas = svgEditor.canvas;
|
||||
return {
|
||||
name: strings.name,
|
||||
// For more notes on how to make an icon file, see the source of
|
||||
// the helloworld-icon.xml
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'helloworld-icon.xml',
|
||||
// Multiple buttons can be added in this array
|
||||
buttons: [{
|
||||
// Must match the icon ID in helloworld-icon.xml
|
||||
id: 'hello_world',
|
||||
// Fallback, e.g., for `file:///` access
|
||||
icon: svgEditor.curConfig.extIconsPath + 'helloworld.png',
|
||||
// This indicates that the button will be added to the "mode"
|
||||
// button panel on the left side
|
||||
type: 'mode',
|
||||
// Tooltip text
|
||||
title: strings.buttons[0].title,
|
||||
// Events
|
||||
events: {
|
||||
click() {
|
||||
// The action taken when the button is clicked on.
|
||||
// For "mode" buttons, any other button will
|
||||
// automatically be de-pressed.
|
||||
svgCanvas.setMode('hello_world');
|
||||
}
|
||||
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
}],
|
||||
|
||||
// This is triggered when the main mouse button is pressed down
|
||||
// on the editor canvas (not the tool panels)
|
||||
mouseDown() {
|
||||
// Check the mode on mousedown
|
||||
if (svgCanvas.getMode() === 'hello_world') {
|
||||
// The returned object must include "started" with
|
||||
// a value of true in order for mouseUp to be triggered
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
|
||||
// This is triggered from anywhere, but "started" must have been set
|
||||
// to true (see above). Note that "opts" is an object with event info
|
||||
mouseUp(opts) {
|
||||
// Check the mode on mouseup
|
||||
if (svgCanvas.getMode() === 'hello_world') {
|
||||
const zoom = svgCanvas.getZoom(); // Get the actual coordinate by dividing by the zoom value
|
||||
|
||||
const x = opts.mouse_x / zoom;
|
||||
const y = opts.mouse_y / zoom; // We do our own formatting
|
||||
|
||||
let {
|
||||
text
|
||||
} = strings;
|
||||
[['x', x], ['y', y]].forEach(([prop, val]) => {
|
||||
text = text.replace('{' + prop + '}', val);
|
||||
}); // Show the text using the custom alert function
|
||||
|
||||
$.alert(text);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return extHelloworld;
|
||||
|
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
@ -1,42 +1,6 @@
|
|||
var svgEditorExtension_mathjax = (function () {
|
||||
'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.
|
||||
* @param {HTMLScriptElement} script
|
||||
|
@ -46,32 +10,38 @@ var svgEditorExtension_mathjax = (function () {
|
|||
|
||||
|
||||
function addScriptAtts(script, atts) {
|
||||
['id', 'class', 'type'].forEach(function (prop) {
|
||||
['id', 'class', 'type'].forEach(prop => {
|
||||
if (prop in atts) {
|
||||
script[prop] = atts[prop];
|
||||
}
|
||||
});
|
||||
} // 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) {
|
||||
var atts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
function importScript(url, atts = {}) {
|
||||
if (Array.isArray(url)) {
|
||||
return Promise.all(url.map(function (u) {
|
||||
return Promise.all(url.map(u => {
|
||||
return importScript(u, atts);
|
||||
}));
|
||||
}
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// eslint-disable-line promise/avoid-new
|
||||
var script = document.createElement('script');
|
||||
const script = document.createElement('script');
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
function scriptOnError() {
|
||||
reject(new Error("Failed to import: ".concat(url)));
|
||||
reject(new Error(`Failed to import: ${url}`));
|
||||
destructor();
|
||||
}
|
||||
/**
|
||||
|
@ -85,7 +55,7 @@ var svgEditorExtension_mathjax = (function () {
|
|||
destructor();
|
||||
}
|
||||
|
||||
var destructor = function destructor() {
|
||||
const destructor = () => {
|
||||
script.removeEventListener('error', scriptOnError);
|
||||
script.removeEventListener('load', scriptOnLoad);
|
||||
script.remove();
|
||||
|
@ -101,258 +71,232 @@ var svgEditorExtension_mathjax = (function () {
|
|||
});
|
||||
}
|
||||
|
||||
/* globals MathJax */
|
||||
var extMathjax = {
|
||||
name: 'mathjax',
|
||||
init: function init(_ref) {
|
||||
var _this = this;
|
||||
|
||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
|
||||
var $, importLocale, strings, svgEditor, svgCanvas, mathjaxSrcSecure, uiStrings, math, locationX, locationY, mathjaxLoaded, saveMath, buttons;
|
||||
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
||||
while (1) {
|
||||
switch (_context2.prev = _context2.next) {
|
||||
case 0:
|
||||
saveMath = function _saveMath() {
|
||||
var code = $('#mathjax_code_textarea').val(); // displaystyle to force MathJax NOT to use the inline style. Because it is
|
||||
// less fancy!
|
||||
async init({
|
||||
$,
|
||||
importLocale
|
||||
}) {
|
||||
const strings = await importLocale();
|
||||
const svgEditor = this;
|
||||
const svgCanvas = svgEditor.canvas; // Configuration of the MathJax extention.
|
||||
// This will be added to the head tag before MathJax is loaded.
|
||||
|
||||
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>`.
|
||||
*/
|
||||
const
|
||||
/* mathjaxConfiguration = `<script type="text/x-mathjax-config">
|
||||
MathJax.Hub.Config({
|
||||
extensions: ['tex2jax.js'],
|
||||
jax: ['input/TeX', 'output/SVG'],
|
||||
showProcessingMessages: true,
|
||||
showMathMenu: false,
|
||||
showMathMenuMSIE: false,
|
||||
errorSettings: {
|
||||
message: ['[Math Processing Error]'],
|
||||
style: {color: '#CC0000', 'font-style': 'italic'}
|
||||
},
|
||||
elements: [],
|
||||
tex2jax: {
|
||||
ignoreClass: 'tex2jax_ignore2', processClass: 'tex2jax_process2',
|
||||
},
|
||||
TeX: {
|
||||
extensions: ['AMSmath.js', 'AMSsymbols.js', 'noErrors.js', 'noUndefined.js']
|
||||
},
|
||||
SVG: {
|
||||
}
|
||||
});
|
||||
</script>`, */
|
||||
// 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
|
||||
// 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;
|
||||
let math,
|
||||
locationX,
|
||||
locationY,
|
||||
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
|
||||
|
||||
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.
|
||||
$.extend(uiStrings, {
|
||||
mathjax: {
|
||||
embed_svg: 'Save as mathematics',
|
||||
embed_mathml: 'Save as figure',
|
||||
svg_save_warning: 'The math will be transformed into a figure is manipulatable like everything else. You will not be able to manipulate the TeX-code anymore. ',
|
||||
mathml_save_warning: 'Advised. The math will be saved as a figure.',
|
||||
title: 'Mathematics code editor'
|
||||
}
|
||||
});
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
var glymph = $('#' + id).clone().removeAttr('id');
|
||||
var x = $(this).attr('x');
|
||||
var y = $(this).attr('y');
|
||||
var transform = $(this).attr('transform');
|
||||
function saveMath() {
|
||||
const code = $('#mathjax_code_textarea').val(); // displaystyle to force MathJax NOT to use the inline style. Because it is
|
||||
// less fancy!
|
||||
|
||||
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 + ')');
|
||||
}
|
||||
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>`.
|
||||
*/
|
||||
|
||||
$(this).replaceWith(glymph);
|
||||
}); // Remove the style tag because it interferes with SVG-Edit.
|
||||
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.
|
||||
|
||||
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!
|
||||
const glymph = $('#' + id).clone().removeAttr('id');
|
||||
const x = $(this).attr('x');
|
||||
const y = $(this).attr('y');
|
||||
const transform = $(this).attr('transform');
|
||||
|
||||
svgCanvas.moveSelectedElements(locationX, locationY, true);
|
||||
});
|
||||
};
|
||||
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 + ')');
|
||||
}
|
||||
|
||||
$ = _ref.$, importLocale = _ref.importLocale;
|
||||
_context2.next = 4;
|
||||
return importLocale();
|
||||
$(this).replaceWith(glymph);
|
||||
}); // Remove the style tag because it interferes with SVG-Edit.
|
||||
|
||||
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.
|
||||
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!
|
||||
|
||||
/* mathjaxConfiguration = `<script type="text/x-mathjax-config">
|
||||
MathJax.Hub.Config({
|
||||
extensions: ['tex2jax.js'],
|
||||
jax: ['input/TeX', 'output/SVG'],
|
||||
showProcessingMessages: true,
|
||||
showMathMenu: false,
|
||||
showMathMenuMSIE: false,
|
||||
errorSettings: {
|
||||
message: ['[Math Processing Error]'],
|
||||
style: {color: '#CC0000', 'font-style': 'italic'}
|
||||
},
|
||||
elements: [],
|
||||
tex2jax: {
|
||||
ignoreClass: 'tex2jax_ignore2', processClass: 'tex2jax_process2',
|
||||
},
|
||||
TeX: {
|
||||
extensions: ['AMSmath.js', 'AMSsymbols.js', 'noErrors.js', 'noUndefined.js']
|
||||
},
|
||||
SVG: {
|
||||
}
|
||||
svgCanvas.moveSelectedElements(locationX, locationY, true);
|
||||
});
|
||||
}
|
||||
|
||||
const buttons = [{
|
||||
id: 'tool_mathjax',
|
||||
type: 'mode',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'mathjax.png',
|
||||
events: {
|
||||
async click() {
|
||||
// Set the mode.
|
||||
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.
|
||||
|
||||
if (mathjaxLoaded === false) {
|
||||
$('<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({
|
||||
cancel: 'button,fieldset',
|
||||
containment: 'window'
|
||||
}); // Add functionality and picture to cancel button.
|
||||
|
||||
$('#tool_mathjax_cancel').prepend($.getSvgIcon('cancel', true)).on('click touched', function () {
|
||||
$('#mathjax').hide();
|
||||
}); // Add functionality and picture to the save button.
|
||||
|
||||
$('#tool_mathjax_save').prepend($.getSvgIcon('ok', true)).on('click touched', function () {
|
||||
saveMath();
|
||||
$('#mathjax').hide();
|
||||
}); // MathJax preprocessing has to ignore most of the page.
|
||||
|
||||
$('body').addClass('tex2jax_ignore'); // Now get (and run) the MathJax Library.
|
||||
// Todo: insert script with modules once widely supported
|
||||
// and if MathJax (and its `TeX-AMS-MML_SVG.js` dependency) ends up
|
||||
// providing an ES6 module export: https://github.com/mathjax/MathJax/issues/1998
|
||||
|
||||
/*
|
||||
const modularVersion = !('svgEditor' in window) ||
|
||||
!window.svgEditor ||
|
||||
window.svgEditor.modules !== false;
|
||||
// Add as second argument to `importScript`
|
||||
{
|
||||
type: modularVersion
|
||||
? 'module' // Make this the default when widely supported
|
||||
: 'text/javascript'
|
||||
}
|
||||
// If only using modules, just use this:
|
||||
const {default: MathJax} = await importModule( // or `import()` when widely supported
|
||||
svgEditor.curConfig.extIconsPath + mathjaxSrcSecure
|
||||
);
|
||||
*/
|
||||
// We use `extIconsPath` here for now as it does not vary with
|
||||
// the modular type as does `extPath`
|
||||
|
||||
try {
|
||||
await importScript(svgEditor.curConfig.extIconsPath + mathjaxSrcSecure); // When MathJax is loaded get the div where the math will be rendered.
|
||||
|
||||
MathJax.Hub.queue.Push(function () {
|
||||
math = MathJax.Hub.getAllJax('#mathjax_creator')[0];
|
||||
console.log(math); // eslint-disable-line no-console
|
||||
|
||||
mathjaxLoaded = true;
|
||||
console.log('MathJax Loaded'); // eslint-disable-line no-console
|
||||
});
|
||||
</script>`, */
|
||||
// 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
|
||||
// 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;
|
||||
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
|
||||
} catch (e) {
|
||||
console.log('Failed loading MathJax.'); // eslint-disable-line no-console
|
||||
|
||||
$.extend(uiStrings, {
|
||||
mathjax: {
|
||||
embed_svg: 'Save as mathematics',
|
||||
embed_mathml: 'Save as figure',
|
||||
svg_save_warning: 'The math will be transformed into a figure is manipulatable like everything else. You will not be able to manipulate the TeX-code anymore. ',
|
||||
mathml_save_warning: 'Advised. The math will be saved as a figure.',
|
||||
title: 'Mathematics code editor'
|
||||
}
|
||||
});
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
buttons = [{
|
||||
id: 'tool_mathjax',
|
||||
type: 'mode',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'mathjax.png',
|
||||
events: {
|
||||
click: function 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.
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
$('#mathjax_container').draggable({
|
||||
cancel: 'button,fieldset',
|
||||
containment: 'window'
|
||||
}); // Add functionality and picture to cancel button.
|
||||
|
||||
$('#tool_mathjax_cancel').prepend($.getSvgIcon('cancel', true)).on('click touched', function () {
|
||||
$('#mathjax').hide();
|
||||
}); // Add functionality and picture to the save button.
|
||||
|
||||
$('#tool_mathjax_save').prepend($.getSvgIcon('ok', true)).on('click touched', function () {
|
||||
saveMath();
|
||||
$('#mathjax').hide();
|
||||
}); // MathJax preprocessing has to ignore most of the page.
|
||||
|
||||
$('body').addClass('tex2jax_ignore'); // Now get (and run) the MathJax Library.
|
||||
// Todo: insert script with modules once widely supported
|
||||
// and if MathJax (and its `TeX-AMS-MML_SVG.js` dependency) ends up
|
||||
// providing an ES6 module export: https://github.com/mathjax/MathJax/issues/1998
|
||||
|
||||
/*
|
||||
const modularVersion = !('svgEditor' in window) ||
|
||||
!window.svgEditor ||
|
||||
window.svgEditor.modules !== false;
|
||||
// Add as second argument to `importScript`
|
||||
{
|
||||
type: modularVersion
|
||||
? 'module' // Make this the default when widely supported
|
||||
: 'text/javascript'
|
||||
}
|
||||
// If only using modules, just use this:
|
||||
const {default: MathJax} = await importModule( // or `import()` when widely supported
|
||||
svgEditor.curConfig.extIconsPath + mathjaxSrcSecure
|
||||
);
|
||||
*/
|
||||
// We use `extIconsPath` here for now as it does not vary with
|
||||
// the modular type as does `extPath`
|
||||
|
||||
_context.prev = 7;
|
||||
_context.next = 10;
|
||||
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 () {
|
||||
math = MathJax.Hub.getAllJax('#mathjax_creator')[0];
|
||||
console.log(math); // eslint-disable-line no-console
|
||||
|
||||
mathjaxLoaded = true;
|
||||
console.log('MathJax Loaded'); // eslint-disable-line no-console
|
||||
});
|
||||
_context.next = 17;
|
||||
break;
|
||||
|
||||
case 13:
|
||||
_context.prev = 13;
|
||||
_context.t0 = _context["catch"](7);
|
||||
console.log('Failed loading MathJax.'); // eslint-disable-line no-console
|
||||
|
||||
$.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", {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'mathjax-icons.xml',
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
mouseDown: function mouseDown() {
|
||||
if (svgCanvas.getMode() === 'mathjax') {
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
mouseUp: function mouseUp(opts) {
|
||||
if (svgCanvas.getMode() === 'mathjax') {
|
||||
// Get the coordinates from your mouse.
|
||||
var zoom = svgCanvas.getZoom(); // Get the actual coordinate by dividing by the zoom value
|
||||
|
||||
locationX = opts.mouse_x / zoom;
|
||||
locationY = opts.mouse_y / zoom;
|
||||
$('#mathjax').show();
|
||||
return {
|
||||
started: false
|
||||
}; // Otherwise the last selected object dissapears.
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
callback: function 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.
|
||||
// $(mathjaxConfiguration).appendTo('head');
|
||||
}
|
||||
});
|
||||
|
||||
case 12:
|
||||
case "end":
|
||||
return _context2.stop();
|
||||
$.alert('Failed loading MathJax. You will not be able to change the mathematics.');
|
||||
}
|
||||
}
|
||||
}
|
||||
}, _callee2);
|
||||
}))();
|
||||
|
||||
}
|
||||
}];
|
||||
return {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'mathjax-icons.xml',
|
||||
buttons: strings.buttons.map((button, i) => {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
|
||||
mouseDown() {
|
||||
if (svgCanvas.getMode() === 'mathjax') {
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
|
||||
mouseUp(opts) {
|
||||
if (svgCanvas.getMode() === 'mathjax') {
|
||||
// Get the coordinates from your mouse.
|
||||
const zoom = svgCanvas.getZoom(); // Get the actual coordinate by dividing by the zoom value
|
||||
|
||||
locationX = opts.mouse_x / zoom;
|
||||
locationY = opts.mouse_y / zoom;
|
||||
$('#mathjax').show();
|
||||
return {
|
||||
started: false
|
||||
}; // Otherwise the last selected object dissapears.
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
|
||||
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.
|
||||
// $(mathjaxConfiguration).appendTo('head');
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return extMathjax;
|
||||
|
|
|
@ -11,16 +11,18 @@ var svgEditorExtension_overview_window = (function () {
|
|||
*/
|
||||
var extOverview_window = {
|
||||
name: 'overview_window',
|
||||
init: function init(_ref) {
|
||||
var $ = _ref.$,
|
||||
isChrome = _ref.isChrome,
|
||||
isIE = _ref.isIE;
|
||||
var overviewWindowGlobals = {}; // Disabled in Chrome 48-, see https://github.com/SVG-Edit/svgedit/issues/26 and
|
||||
|
||||
init({
|
||||
$,
|
||||
isChrome,
|
||||
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.
|
||||
|
||||
if (isChrome()) {
|
||||
var verIndex = navigator.userAgent.indexOf('Chrome/') + 7;
|
||||
var chromeVersion = Number.parseInt(navigator.userAgent.substring(verIndex));
|
||||
const verIndex = navigator.userAgent.indexOf('Chrome/') + 7;
|
||||
const chromeVersion = Number.parseInt(navigator.userAgent.substring(verIndex));
|
||||
|
||||
if (chromeVersion < 49) {
|
||||
return undefined;
|
||||
|
@ -28,22 +30,22 @@ var svgEditorExtension_overview_window = (function () {
|
|||
} // 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.
|
||||
|
||||
var updateViewBox = function updateViewBox() {
|
||||
var portHeight = Number.parseFloat($('#workarea').css('height'));
|
||||
var portWidth = Number.parseFloat($('#workarea').css('width'));
|
||||
var portX = $('#workarea').scrollLeft();
|
||||
var portY = $('#workarea').scrollTop();
|
||||
var windowWidth = Number.parseFloat($('#svgcanvas').css('width'));
|
||||
var windowHeight = Number.parseFloat($('#svgcanvas').css('height'));
|
||||
var overviewWidth = $('#overviewMiniView').attr('width');
|
||||
var overviewHeight = $('#overviewMiniView').attr('height');
|
||||
var viewBoxX = portX / windowWidth * overviewWidth;
|
||||
var viewBoxY = portY / windowHeight * overviewHeight;
|
||||
var viewBoxWidth = portWidth / windowWidth * overviewWidth;
|
||||
var viewBoxHeight = portHeight / windowHeight * overviewHeight;
|
||||
const updateViewBox = function () {
|
||||
const portHeight = Number.parseFloat($('#workarea').css('height'));
|
||||
const portWidth = Number.parseFloat($('#workarea').css('width'));
|
||||
const portX = $('#workarea').scrollLeft();
|
||||
const portY = $('#workarea').scrollTop();
|
||||
const windowWidth = Number.parseFloat($('#svgcanvas').css('width'));
|
||||
const windowHeight = Number.parseFloat($('#svgcanvas').css('height'));
|
||||
const overviewWidth = $('#overviewMiniView').attr('width');
|
||||
const overviewHeight = $('#overviewMiniView').attr('height');
|
||||
const viewBoxX = portX / windowWidth * overviewWidth;
|
||||
const viewBoxY = portY / windowHeight * overviewHeight;
|
||||
const viewBoxWidth = portWidth / windowWidth * overviewWidth;
|
||||
const viewBoxHeight = portHeight / windowHeight * overviewHeight;
|
||||
$('#overview_window_view_box').css('min-width', viewBoxWidth + 'px');
|
||||
$('#overview_window_view_box').css('min-height', viewBoxHeight + 'px');
|
||||
$('#overview_window_view_box').css('top', viewBoxY + 'px');
|
||||
|
@ -58,11 +60,11 @@ var svgEditorExtension_overview_window = (function () {
|
|||
$('#workarea').resize(updateViewBox);
|
||||
updateViewBox(); // Compensate for changes in zoom and canvas size.
|
||||
|
||||
var updateViewDimensions = function updateViewDimensions() {
|
||||
var viewWidth = $('#svgroot').attr('width');
|
||||
var viewHeight = $('#svgroot').attr('height');
|
||||
var viewX = 640;
|
||||
var viewY = 480;
|
||||
const updateViewDimensions = function () {
|
||||
const viewWidth = $('#svgroot').attr('width');
|
||||
const viewHeight = $('#svgroot').attr('height');
|
||||
let viewX = 640;
|
||||
let viewY = 480;
|
||||
|
||||
if (isIE()) {
|
||||
// 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;
|
||||
}
|
||||
|
||||
var svgWidthOld = $('#overviewMiniView').attr('width');
|
||||
var svgHeightNew = viewHeight / viewWidth * svgWidthOld;
|
||||
const svgWidthOld = $('#overviewMiniView').attr('width');
|
||||
const svgHeightNew = viewHeight / viewWidth * svgWidthOld;
|
||||
$('#overviewMiniView').attr('viewBox', viewX + ' ' + viewY + ' ' + viewWidth + ' ' + viewHeight);
|
||||
$('#overviewMiniView').attr('height', svgHeightNew);
|
||||
updateViewBox();
|
||||
|
@ -86,15 +88,15 @@ var svgEditorExtension_overview_window = (function () {
|
|||
|
||||
overviewWindowGlobals.viewBoxDragging = false;
|
||||
|
||||
var updateViewPortFromViewBox = function updateViewPortFromViewBox() {
|
||||
var windowWidth = Number.parseFloat($('#svgcanvas').css('width'));
|
||||
var windowHeight = Number.parseFloat($('#svgcanvas').css('height'));
|
||||
var overviewWidth = $('#overviewMiniView').attr('width');
|
||||
var overviewHeight = $('#overviewMiniView').attr('height');
|
||||
var viewBoxX = Number.parseFloat($('#overview_window_view_box').css('left'));
|
||||
var viewBoxY = Number.parseFloat($('#overview_window_view_box').css('top'));
|
||||
var portX = viewBoxX / overviewWidth * windowWidth;
|
||||
var portY = viewBoxY / overviewHeight * windowHeight;
|
||||
const updateViewPortFromViewBox = function () {
|
||||
const windowWidth = Number.parseFloat($('#svgcanvas').css('width'));
|
||||
const windowHeight = Number.parseFloat($('#svgcanvas').css('height'));
|
||||
const overviewWidth = $('#overviewMiniView').attr('width');
|
||||
const overviewHeight = $('#overviewMiniView').attr('height');
|
||||
const viewBoxX = Number.parseFloat($('#overview_window_view_box').css('left'));
|
||||
const viewBoxY = Number.parseFloat($('#overview_window_view_box').css('top'));
|
||||
const portX = viewBoxX / overviewWidth * windowWidth;
|
||||
const portY = viewBoxY / overviewHeight * windowHeight;
|
||||
$('#workarea').scrollLeft(portX);
|
||||
$('#workarea').scrollTop(portY);
|
||||
};
|
||||
|
@ -102,23 +104,26 @@ var svgEditorExtension_overview_window = (function () {
|
|||
$('#overview_window_view_box').draggable({
|
||||
containment: 'parent',
|
||||
drag: updateViewPortFromViewBox,
|
||||
start: function start() {
|
||||
|
||||
start() {
|
||||
overviewWindowGlobals.viewBoxDragging = true;
|
||||
},
|
||||
stop: function stop() {
|
||||
|
||||
stop() {
|
||||
overviewWindowGlobals.viewBoxDragging = false;
|
||||
}
|
||||
|
||||
});
|
||||
$('#overviewMiniView').click(function (evt) {
|
||||
// Firefox doesn't support evt.offsetX and evt.offsetY.
|
||||
var mouseX = evt.offsetX || evt.originalEvent.layerX;
|
||||
var mouseY = evt.offsetY || evt.originalEvent.layerY;
|
||||
var overviewWidth = $('#overviewMiniView').attr('width');
|
||||
var overviewHeight = $('#overviewMiniView').attr('height');
|
||||
var viewBoxWidth = Number.parseFloat($('#overview_window_view_box').css('min-width'));
|
||||
var viewBoxHeight = Number.parseFloat($('#overview_window_view_box').css('min-height'));
|
||||
var viewBoxX = mouseX - 0.5 * viewBoxWidth;
|
||||
var viewBoxY = mouseY - 0.5 * viewBoxHeight; // deal with constraints
|
||||
const mouseX = evt.offsetX || evt.originalEvent.layerX;
|
||||
const mouseY = evt.offsetY || evt.originalEvent.layerY;
|
||||
const overviewWidth = $('#overviewMiniView').attr('width');
|
||||
const overviewHeight = $('#overviewMiniView').attr('height');
|
||||
const viewBoxWidth = Number.parseFloat($('#overview_window_view_box').css('min-width'));
|
||||
const viewBoxHeight = Number.parseFloat($('#overview_window_view_box').css('min-height'));
|
||||
let viewBoxX = mouseX - 0.5 * viewBoxWidth;
|
||||
let viewBoxY = mouseY - 0.5 * viewBoxHeight; // deal with constraints
|
||||
|
||||
if (viewBoxX < 0) {
|
||||
viewBoxX = 0;
|
||||
|
@ -146,6 +151,7 @@ var svgEditorExtension_overview_window = (function () {
|
|||
workareaResized: updateViewBox
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return extOverview_window;
|
||||
|
|
|
@ -1,42 +1,6 @@
|
|||
var svgEditorExtension_panning = (function () {
|
||||
'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
|
||||
*
|
||||
|
@ -51,70 +15,57 @@ var svgEditorExtension_panning = (function () {
|
|||
*/
|
||||
var extPanning = {
|
||||
name: 'panning',
|
||||
init: function init(_ref) {
|
||||
var _this = this;
|
||||
|
||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
||||
var importLocale, strings, svgEditor, svgCanvas, buttons;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
importLocale = _ref.importLocale;
|
||||
_context.next = 3;
|
||||
return importLocale();
|
||||
|
||||
case 3:
|
||||
strings = _context.sent;
|
||||
svgEditor = _this;
|
||||
svgCanvas = svgEditor.canvas;
|
||||
buttons = [{
|
||||
id: 'ext-panning',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'panning.png',
|
||||
type: 'mode',
|
||||
events: {
|
||||
click: function click() {
|
||||
svgCanvas.setMode('ext-panning');
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context.abrupt("return", {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'ext-panning.xml',
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
mouseDown: function mouseDown() {
|
||||
if (svgCanvas.getMode() === 'ext-panning') {
|
||||
svgEditor.setPanning(true);
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
mouseUp: function mouseUp() {
|
||||
if (svgCanvas.getMode() === 'ext-panning') {
|
||||
svgEditor.setPanning(false);
|
||||
return {
|
||||
keep: false,
|
||||
element: null
|
||||
};
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
});
|
||||
|
||||
case 8:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
}
|
||||
async init({
|
||||
importLocale
|
||||
}) {
|
||||
const strings = await importLocale();
|
||||
const svgEditor = this;
|
||||
const svgCanvas = svgEditor.canvas;
|
||||
const buttons = [{
|
||||
id: 'ext-panning',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'panning.png',
|
||||
type: 'mode',
|
||||
events: {
|
||||
click() {
|
||||
svgCanvas.setMode('ext-panning');
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
|
||||
}
|
||||
}];
|
||||
return {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'ext-panning.xml',
|
||||
buttons: strings.buttons.map((button, i) => {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
|
||||
mouseDown() {
|
||||
if (svgCanvas.getMode() === 'ext-panning') {
|
||||
svgEditor.setPanning(true);
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
|
||||
mouseUp() {
|
||||
if (svgCanvas.getMode() === 'ext-panning') {
|
||||
svgEditor.setPanning(false);
|
||||
return {
|
||||
keep: false,
|
||||
element: null
|
||||
};
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return extPanning;
|
||||
|
|
|
@ -5,33 +5,41 @@ var svgEditorExtension_php_savefile = (function () {
|
|||
// handler as in "ext-server_opensave.js" (and in savefile.php)
|
||||
var extPhp_savefile = {
|
||||
name: 'php_savefile',
|
||||
init: function init(_ref) {
|
||||
var $ = _ref.$;
|
||||
var svgEditor = this;
|
||||
var extPath = svgEditor.curConfig.extPath,
|
||||
svgCanvas = svgEditor.canvas;
|
||||
|
||||
init({
|
||||
$
|
||||
}) {
|
||||
const svgEditor = this;
|
||||
const {
|
||||
curConfig: {
|
||||
extPath
|
||||
},
|
||||
canvas: svgCanvas
|
||||
} = svgEditor;
|
||||
/**
|
||||
* Get file name out of SVGEdit document title.
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
function getFileNameFromTitle() {
|
||||
var title = svgCanvas.getDocumentTitle();
|
||||
const title = svgCanvas.getDocumentTitle();
|
||||
return title.trim();
|
||||
}
|
||||
|
||||
var saveSvgAction = extPath + 'savefile.php';
|
||||
const saveSvgAction = extPath + 'savefile.php';
|
||||
svgEditor.setCustomHandlers({
|
||||
save: function save(win, data) {
|
||||
var svg = '<?xml version="1.0" encoding="UTF-8"?>\n' + data,
|
||||
filename = getFileNameFromTitle();
|
||||
save(win, data) {
|
||||
const svg = '<?xml version="1.0" encoding="UTF-8"?>\n' + data,
|
||||
filename = getFileNameFromTitle();
|
||||
$.post(saveSvgAction, {
|
||||
output_svg: svg,
|
||||
filename: filename
|
||||
filename
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return extPhp_savefile;
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -1,42 +1,6 @@
|
|||
var svgEditorExtension_polygon = (function () {
|
||||
'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
|
||||
*
|
||||
|
@ -46,262 +10,305 @@ var svgEditorExtension_polygon = (function () {
|
|||
*/
|
||||
var extPolygon = {
|
||||
name: 'polygon',
|
||||
init: function init(S) {
|
||||
var _this = this;
|
||||
|
||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
||||
var svgEditor, svgCanvas, $, importLocale, editingitex, strings, selElems, started, newFO, showPanel, setAttr, cot, sec, buttons, contextTools;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
sec = function _sec(n) {
|
||||
return 1 / Math.cos(n);
|
||||
};
|
||||
async init(S) {
|
||||
const svgEditor = this;
|
||||
const svgCanvas = svgEditor.canvas;
|
||||
const {
|
||||
$,
|
||||
importLocale
|
||||
} = S;
|
||||
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) {
|
||||
return 1 / Math.tan(n);
|
||||
};
|
||||
/* 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);
|
||||
}; */
|
||||
|
||||
setAttr = function _setAttr(attr, val) {
|
||||
svgCanvas.changeSelectedAttribute(attr, val);
|
||||
svgCanvas.call('changed', selElems);
|
||||
};
|
||||
/**
|
||||
* @param {boolean} on
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
showPanel = function _showPanel(on) {
|
||||
var fcRules = $('#fc_rules');
|
||||
function showPanel(on) {
|
||||
let fcRules = $('#fc_rules');
|
||||
|
||||
if (!fcRules.length) {
|
||||
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
||||
}
|
||||
if (!fcRules.length) {
|
||||
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
||||
}
|
||||
|
||||
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
||||
$('#polygon_panel').toggle(on);
|
||||
};
|
||||
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
||||
$('#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;
|
||||
$ = S.$, importLocale = S.importLocale, editingitex = false;
|
||||
_context.next = 9;
|
||||
return importLocale();
|
||||
|
||||
case 9:
|
||||
strings = _context.sent;
|
||||
|
||||
/**
|
||||
* 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,
|
||||
* based on the itex contained in string.
|
||||
* @param {string} tex The itex text.
|
||||
* @returns {boolean} This function returns false if the set was unsuccessful, true otherwise.
|
||||
*/
|
||||
|
||||
/*
|
||||
function setItexString(tex) {
|
||||
const mathns = 'http://www.w3.org/1998/Math/MathML',
|
||||
xmlnsns = 'http://www.w3.org/2000/xmlns/',
|
||||
ajaxEndpoint = '../../itex';
|
||||
const elt = selElems[0];
|
||||
try {
|
||||
const math = svgdoc.createElementNS(mathns, 'math');
|
||||
math.setAttributeNS(xmlnsns, 'xmlns', mathns);
|
||||
math.setAttribute('display', 'inline');
|
||||
const semantics = document.createElementNS(mathns, 'semantics');
|
||||
const annotation = document.createElementNS(mathns, 'annotation');
|
||||
annotation.setAttribute('encoding', 'application/x-tex');
|
||||
annotation.textContent = tex;
|
||||
const mrow = document.createElementNS(mathns, 'mrow');
|
||||
semantics.append(mrow, annotation);
|
||||
math.append(semantics);
|
||||
// make an AJAX request to the server, to get the MathML
|
||||
$.post(ajaxEndpoint, {tex, display: 'inline'}, function(data){
|
||||
const children = data.documentElement.childNodes;
|
||||
while (children.length > 0) {
|
||||
mrow.append(svgdoc.adoptNode(children[0], true));
|
||||
}
|
||||
svgCanvas.sanitizeSvg(math);
|
||||
svgCanvas.call('changed', [elt]);
|
||||
});
|
||||
elt.firstChild.replaceWith(math);
|
||||
svgCanvas.call('changed', [elt]);
|
||||
svgCanvas.clearSelection();
|
||||
} catch(e) {
|
||||
console.log(e);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
*/
|
||||
buttons = [{
|
||||
id: 'tool_polygon',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'polygon.png',
|
||||
type: 'mode',
|
||||
position: 11,
|
||||
events: {
|
||||
click: function click() {
|
||||
svgCanvas.setMode('polygon');
|
||||
showPanel(true);
|
||||
}
|
||||
}
|
||||
}];
|
||||
contextTools = [{
|
||||
type: 'input',
|
||||
panel: 'polygon_panel',
|
||||
id: 'polySides',
|
||||
size: 3,
|
||||
defval: 5,
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('sides', this.value);
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context.abrupt("return", {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'polygon-icons.svg',
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
context_tools: strings.contextTools.map(function (contextTool, i) {
|
||||
return Object.assign(contextTools[i], contextTool);
|
||||
}),
|
||||
callback: function callback() {
|
||||
$('#polygon_panel').hide();
|
||||
/**
|
||||
* @param {string} attr
|
||||
* @param {string|Float} val
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
// Create source save/cancel buttons
|
||||
|
||||
/* const save = */
|
||||
$('#tool_source_save').clone().hide().attr('id', 'polygon_save').unbind().appendTo('#tool_source_back').click(function () {
|
||||
if (!editingitex) {
|
||||
return;
|
||||
} // Todo: Uncomment the setItexString() function above and handle ajaxEndpoint?
|
||||
// setSelectMode();
|
||||
});
|
||||
/* const cancel = */
|
||||
|
||||
$('#tool_source_cancel').clone().hide().attr('id', 'polygon_cancel').unbind().appendTo('#tool_source_back').click(function () {
|
||||
});
|
||||
}, 3000);
|
||||
},
|
||||
mouseDown: function mouseDown(opts) {
|
||||
if (svgCanvas.getMode() !== 'polygon') {
|
||||
return undefined;
|
||||
} // const e = opts.event;
|
||||
function setAttr(attr, val) {
|
||||
svgCanvas.changeSelectedAttribute(attr, val);
|
||||
svgCanvas.call('changed', selElems);
|
||||
}
|
||||
/**
|
||||
* @param {Float} n
|
||||
* @returns {Float}
|
||||
*/
|
||||
|
||||
|
||||
var rgb = svgCanvas.getColor('fill'); // const ccRgbEl = rgb.substring(1, rgb.length);
|
||||
|
||||
var sRgb = svgCanvas.getColor('stroke'); // ccSRgbEl = sRgb.substring(1, rgb.length);
|
||||
|
||||
var sWidth = svgCanvas.getStrokeWidth();
|
||||
started = true;
|
||||
newFO = svgCanvas.addSVGElementFromJson({
|
||||
element: 'polygon',
|
||||
attr: {
|
||||
cx: opts.start_x,
|
||||
cy: opts.start_y,
|
||||
id: svgCanvas.getNextId(),
|
||||
shape: 'regularPoly',
|
||||
sides: document.getElementById('polySides').value,
|
||||
orient: 'x',
|
||||
edge: 0,
|
||||
fill: rgb,
|
||||
strokecolor: sRgb,
|
||||
strokeWidth: sWidth
|
||||
}
|
||||
});
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
},
|
||||
mouseMove: function mouseMove(opts) {
|
||||
if (!started || svgCanvas.getMode() !== 'polygon') {
|
||||
return undefined;
|
||||
} // const e = opts.event;
|
||||
function cot(n) {
|
||||
return 1 / Math.tan(n);
|
||||
}
|
||||
/**
|
||||
* @param {Float} n
|
||||
* @returns {Float}
|
||||
*/
|
||||
|
||||
|
||||
var c = $(newFO).attr(['cx', 'cy', 'sides', 'orient', 'fill', 'strokecolor', 'strokeWidth']);
|
||||
var x = opts.mouse_x;
|
||||
var y = opts.mouse_y;
|
||||
var cx = c.cx,
|
||||
cy = c.cy,
|
||||
fill = c.fill,
|
||||
strokecolor = c.strokecolor,
|
||||
strokeWidth = c.strokeWidth,
|
||||
sides = c.sides,
|
||||
edg = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) / 1.5;
|
||||
newFO.setAttribute('edge', edg);
|
||||
var inradius = edg / 2 * cot(Math.PI / sides);
|
||||
var circumradius = inradius * sec(Math.PI / sides);
|
||||
var points = '';
|
||||
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
|
||||
* This function sets the content of of the currently-selected foreignObject element,
|
||||
* based on the itex contained in string.
|
||||
* @param {string} tex The itex text.
|
||||
* @returns {boolean} This function returns false if the set was unsuccessful, true otherwise.
|
||||
*/
|
||||
|
||||
for (var s = 0; sides >= s; s++) {
|
||||
var angle = 2.0 * Math.PI * s / sides;
|
||||
x = circumradius * Math.cos(angle) + cx;
|
||||
y = circumradius * Math.sin(angle) + cy;
|
||||
points += x + ',' + y + ' ';
|
||||
} // const poly = newFO.createElementNS(NS.SVG, 'polygon');
|
||||
/*
|
||||
function setItexString(tex) {
|
||||
const mathns = 'http://www.w3.org/1998/Math/MathML',
|
||||
xmlnsns = 'http://www.w3.org/2000/xmlns/',
|
||||
ajaxEndpoint = '../../itex';
|
||||
const elt = selElems[0];
|
||||
try {
|
||||
const math = svgdoc.createElementNS(mathns, 'math');
|
||||
math.setAttributeNS(xmlnsns, 'xmlns', mathns);
|
||||
math.setAttribute('display', 'inline');
|
||||
const semantics = document.createElementNS(mathns, 'semantics');
|
||||
const annotation = document.createElementNS(mathns, 'annotation');
|
||||
annotation.setAttribute('encoding', 'application/x-tex');
|
||||
annotation.textContent = tex;
|
||||
const mrow = document.createElementNS(mathns, 'mrow');
|
||||
semantics.append(mrow, annotation);
|
||||
math.append(semantics);
|
||||
// make an AJAX request to the server, to get the MathML
|
||||
$.post(ajaxEndpoint, {tex, display: 'inline'}, function(data){
|
||||
const children = data.documentElement.childNodes;
|
||||
while (children.length > 0) {
|
||||
mrow.append(svgdoc.adoptNode(children[0], true));
|
||||
}
|
||||
svgCanvas.sanitizeSvg(math);
|
||||
svgCanvas.call('changed', [elt]);
|
||||
});
|
||||
elt.firstChild.replaceWith(math);
|
||||
svgCanvas.call('changed', [elt]);
|
||||
svgCanvas.clearSelection();
|
||||
} catch(e) {
|
||||
console.log(e);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
newFO.setAttribute('points', points);
|
||||
newFO.setAttribute('fill', fill);
|
||||
newFO.setAttribute('stroke', strokecolor);
|
||||
newFO.setAttribute('stroke-width', strokeWidth); // newFO.setAttribute('transform', 'rotate(-90)');
|
||||
// const shape = newFO.getAttribute('shape');
|
||||
// newFO.append(poly);
|
||||
// DrawPoly(cx, cy, sides, edg, orient);
|
||||
const buttons = [{
|
||||
id: 'tool_polygon',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'polygon.png',
|
||||
type: 'mode',
|
||||
position: 11,
|
||||
events: {
|
||||
click() {
|
||||
svgCanvas.setMode('polygon');
|
||||
showPanel(true);
|
||||
}
|
||||
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
},
|
||||
mouseUp: function mouseUp(opts) {
|
||||
if (svgCanvas.getMode() !== 'polygon') {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
}];
|
||||
const contextTools = [{
|
||||
type: 'input',
|
||||
panel: 'polygon_panel',
|
||||
id: 'polySides',
|
||||
size: 3,
|
||||
defval: 5,
|
||||
events: {
|
||||
change() {
|
||||
setAttr('sides', this.value);
|
||||
}
|
||||
|
||||
var attrs = $(newFO).attr('edge');
|
||||
var keep = attrs.edge !== '0'; // svgCanvas.addToSelection([newFO], true);
|
||||
}
|
||||
}];
|
||||
return {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'polygon-icons.svg',
|
||||
buttons: strings.buttons.map((button, i) => {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
context_tools: strings.contextTools.map((contextTool, i) => {
|
||||
return Object.assign(contextTools[i], contextTool);
|
||||
}),
|
||||
|
||||
return {
|
||||
keep: keep,
|
||||
element: newFO
|
||||
};
|
||||
},
|
||||
selectedChanged: function selectedChanged(opts) {
|
||||
// Use this to update the current selected elements
|
||||
selElems = opts.elems;
|
||||
var i = selElems.length;
|
||||
callback() {
|
||||
$('#polygon_panel').hide();
|
||||
|
||||
while (i--) {
|
||||
var elem = selElems[i];
|
||||
|
||||
if (elem && elem.getAttribute('shape') === 'regularPoly') {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
$('#polySides').val(elem.getAttribute('sides'));
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
elementChanged: function elementChanged(opts) {// const elem = opts.elems[0];
|
||||
}
|
||||
});
|
||||
setTimeout(function () {
|
||||
// Create source save/cancel buttons
|
||||
|
||||
case 13:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
/* const save = */
|
||||
$('#tool_source_save').clone().hide().attr('id', 'polygon_save').unbind().appendTo('#tool_source_back').click(function () {
|
||||
{
|
||||
return;
|
||||
} // Todo: Uncomment the setItexString() function above and handle ajaxEndpoint?
|
||||
// setSelectMode();
|
||||
});
|
||||
/* const cancel = */
|
||||
|
||||
$('#tool_source_cancel').clone().hide().attr('id', 'polygon_cancel').unbind().appendTo('#tool_source_back').click(function () {
|
||||
});
|
||||
}, 3000);
|
||||
},
|
||||
|
||||
mouseDown(opts) {
|
||||
if (svgCanvas.getMode() !== 'polygon') {
|
||||
return undefined;
|
||||
} // const e = opts.event;
|
||||
|
||||
|
||||
const rgb = svgCanvas.getColor('fill'); // const ccRgbEl = rgb.substring(1, rgb.length);
|
||||
|
||||
const sRgb = svgCanvas.getColor('stroke'); // ccSRgbEl = sRgb.substring(1, rgb.length);
|
||||
|
||||
const sWidth = svgCanvas.getStrokeWidth();
|
||||
started = true;
|
||||
newFO = svgCanvas.addSVGElementFromJson({
|
||||
element: 'polygon',
|
||||
attr: {
|
||||
cx: opts.start_x,
|
||||
cy: opts.start_y,
|
||||
id: svgCanvas.getNextId(),
|
||||
shape: 'regularPoly',
|
||||
sides: document.getElementById('polySides').value,
|
||||
orient: 'x',
|
||||
edge: 0,
|
||||
fill: rgb,
|
||||
strokecolor: sRgb,
|
||||
strokeWidth: sWidth
|
||||
}
|
||||
});
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
},
|
||||
|
||||
mouseMove(opts) {
|
||||
if (!started || svgCanvas.getMode() !== 'polygon') {
|
||||
return undefined;
|
||||
} // const e = opts.event;
|
||||
|
||||
|
||||
const c = $(newFO).attr(['cx', 'cy', 'sides', 'orient', 'fill', 'strokecolor', 'strokeWidth']);
|
||||
let x = opts.mouse_x;
|
||||
let y = opts.mouse_y;
|
||||
const {
|
||||
cx,
|
||||
cy,
|
||||
fill,
|
||||
strokecolor,
|
||||
strokeWidth,
|
||||
sides
|
||||
} = c,
|
||||
// {orient} = c,
|
||||
edg = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) / 1.5;
|
||||
newFO.setAttribute('edge', edg);
|
||||
const inradius = edg / 2 * cot(Math.PI / sides);
|
||||
const circumradius = inradius * sec(Math.PI / sides);
|
||||
let points = '';
|
||||
|
||||
for (let s = 0; sides >= s; s++) {
|
||||
const angle = 2.0 * Math.PI * s / sides;
|
||||
x = circumradius * Math.cos(angle) + cx;
|
||||
y = circumradius * Math.sin(angle) + cy;
|
||||
points += x + ',' + y + ' ';
|
||||
} // const poly = newFO.createElementNS(NS.SVG, 'polygon');
|
||||
|
||||
|
||||
newFO.setAttribute('points', points);
|
||||
newFO.setAttribute('fill', fill);
|
||||
newFO.setAttribute('stroke', strokecolor);
|
||||
newFO.setAttribute('stroke-width', strokeWidth); // newFO.setAttribute('transform', 'rotate(-90)');
|
||||
// const shape = newFO.getAttribute('shape');
|
||||
// newFO.append(poly);
|
||||
// DrawPoly(cx, cy, sides, edg, orient);
|
||||
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
},
|
||||
|
||||
mouseUp(opts) {
|
||||
if (svgCanvas.getMode() !== 'polygon') {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const attrs = $(newFO).attr('edge');
|
||||
const keep = attrs.edge !== '0'; // svgCanvas.addToSelection([newFO], true);
|
||||
|
||||
return {
|
||||
keep,
|
||||
element: newFO
|
||||
};
|
||||
},
|
||||
|
||||
selectedChanged(opts) {
|
||||
// Use this to update the current selected elements
|
||||
selElems = opts.elems;
|
||||
let i = selElems.length;
|
||||
|
||||
while (i--) {
|
||||
const elem = selElems[i];
|
||||
|
||||
if (elem && elem.getAttribute('shape') === 'regularPoly') {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
$('#polySides').val(elem.getAttribute('sides'));
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
},
|
||||
|
||||
elementChanged(opts) {// const elem = opts.elems[0];
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
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 () {
|
||||
'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
|
||||
*
|
||||
|
@ -103,333 +11,365 @@ var svgEditorExtension_shapes = (function () {
|
|||
*/
|
||||
var extShapes = {
|
||||
name: 'shapes',
|
||||
init: function init(_ref) {
|
||||
var _this = this;
|
||||
|
||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
||||
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) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
loadLibrary = function _loadLibrary(catId) {
|
||||
var lib = library[catId];
|
||||
async init({
|
||||
$,
|
||||
importLocale
|
||||
}) {
|
||||
const strings = await importLocale();
|
||||
const svgEditor = this;
|
||||
const canv = svgEditor.canvas;
|
||||
const svgroot = canv.getRootElem();
|
||||
let lastBBox = {}; // This populates the category list
|
||||
|
||||
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;
|
||||
}
|
||||
const {
|
||||
categories
|
||||
} = strings;
|
||||
const library = {
|
||||
basic: {
|
||||
data: {
|
||||
heart: 'm150,73c61,-175 300,0 0,225c-300,-225 -61,-400 0,-225z',
|
||||
frame: 'm0,0l300,0l0,300l-300,0zm35,-265l0,230l230,0l0,-230z',
|
||||
donut: 'm1,150l0,0c0,-82.29042 66.70958,-149 149,-149l0,0c39.51724,0 77.41599,15.69816 105.35889,43.64108c27.94293,27.94293 43.64111,65.84165 43.64111,105.35892l0,0c0,82.29041 -66.70958,149 -149,149l0,0c-82.29041,0 -149,-66.70959 -149,-149zm74.5,0l0,0c0,41.1452 33.35481,74.5 74.5,74.5c41.14522,0 74.5,-33.3548 74.5,-74.5c0,-41.1452 -33.3548,-74.5 -74.5,-74.5l0,0c-41.14519,0 -74.5,33.35481 -74.5,74.5z',
|
||||
triangle: 'm1,280.375l149,-260.75l149,260.75z',
|
||||
right_triangle: 'm1,299l0,-298l298,298z',
|
||||
diamond: 'm1,150l149,-149l149,149l-149,149l-149,-149z',
|
||||
pentagon: 'm1.00035,116.97758l148.99963,-108.4053l148.99998,108.4053l-56.91267,175.4042l-184.1741,0l-56.91284,-175.4042z',
|
||||
hexagon: 'm1,149.99944l63.85715,-127.71428l170.28572,0l63.85713,127.71428l-63.85713,127.71428l-170.28572,0l-63.85715,-127.71428z',
|
||||
septagon1: 'm0.99917,191.06511l29.51249,-127.7108l119.48833,-56.83673l119.48836,56.83673l29.51303,127.7108l-82.69087,102.41679l-132.62103,0l-82.69031,-102.41679z',
|
||||
heptagon: 'm1,88.28171l87.28172,-87.28171l123.43653,0l87.28172,87.28171l0,123.43654l-87.28172,87.28172l-123.43653,0l-87.28172,-87.28172l0,-123.43654z',
|
||||
decagon: 'm1,150.00093l28.45646,-88.40318l74.49956,-54.63682l92.08794,0l74.50002,54.63682l28.45599,88.40318l-28.45599,88.40318l-74.50002,54.63681l-92.08794,0l-74.49956,-54.63681l-28.45646,-88.40318z',
|
||||
dodecagon: 'm1,110.07421l39.92579,-69.14842l69.14842,-39.92579l79.85159,0l69.14842,39.92579l39.92578,69.14842l0,79.85159l-39.92578,69.14842l-69.14842,39.92578l-79.85159,0l-69.14842,-39.92578l-39.92579,-69.14842l0,-79.85159z',
|
||||
star_points_5: 'm1,116.58409l113.82668,0l35.17332,-108.13487l35.17334,108.13487l113.82666,0l-92.08755,66.83026l35.17514,108.13487l-92.08759,-66.83208l-92.08757,66.83208l35.17515,-108.13487l-92.08758,-66.83026z',
|
||||
trapezoid: 'm1,299l55.875,-298l186.25001,0l55.87498,298z',
|
||||
arrow_up: 'm1.49805,149.64304l148.50121,-148.00241l148.50121,148.00241l-74.25061,0l0,148.71457l-148.5012,0l0,-148.71457z',
|
||||
vertical_scrool: 'm37.375,261.625l0,-242.9375l0,0c0,-10.32083 8.36669,-18.6875 18.6875,-18.6875l224.25,0c10.32083,0 18.6875,8.36667 18.6875,18.6875c0,10.32081 -8.36667,18.6875 -18.6875,18.6875l-18.6875,0l0,242.9375c0,10.32083 -8.36668,18.6875 -18.6875,18.6875l-224.25,0l0,0c-10.32083,0 -18.6875,-8.36667 -18.6875,-18.6875c0,-10.32083 8.36667,-18.6875 18.6875,-18.6875zm37.375,-261.625l0,0c10.32081,0 18.6875,8.36667 18.6875,18.6875c0,10.32081 -8.36669,18.6875 -18.6875,18.6875c-5.1604,0 -9.34375,-4.18335 -9.34375,-9.34375c0,-5.16041 4.18335,-9.34375 9.34375,-9.34375l18.6875,0m186.875,18.6875l-205.5625,0m-37.375,224.25l0,0c5.1604,0 9.34375,4.18335 9.34375,9.34375c0,5.1604 -4.18335,9.34375 -9.34375,9.34375l18.6875,0m-18.6875,18.6875l0,0c10.32081,0 18.6875,-8.36667 18.6875,-18.6875l0,-18.6875',
|
||||
smiley: 'm68.49886,214.78838q81.06408,55.67332 161.93891,0m-144.36983,-109.9558c0,-8.60432 6.97517,-15.57949 15.57948,-15.57949c8.60431,0 15.57948,6.97517 15.57948,15.57949c0,8.60431 -6.97517,15.57947 -15.57948,15.57947c-8.60431,0 -15.57948,-6.97516 -15.57948,-15.57947m95.83109,0c0,-8.60432 6.97517,-15.57949 15.57948,-15.57949c8.60431,0 15.57947,6.97517 15.57947,15.57949c0,8.60431 -6.97516,15.57947 -15.57947,15.57947c-8.60429,0 -15.57948,-6.97516 -15.57948,-15.57947m-181.89903,44.73038l0,0c0,-82.60133 66.96162,-149.56296 149.56296,-149.56296c82.60135,0 149.56296,66.96162 149.56296,149.56296c0,82.60135 -66.96161,149.56296 -149.56296,149.56296c-82.60133,0 -149.56296,-66.96161 -149.56296,-149.56296zm0,0l0,0c0,-82.60133 66.96162,-149.56296 149.56296,-149.56296c82.60135,0 149.56296,66.96162 149.56296,149.56296c0,82.60135 -66.96161,149.56296 -149.56296,149.56296c-82.60133,0 -149.56296,-66.96161 -149.56296,-149.56296z',
|
||||
left_braket: 'm174.24565,298.5c-13.39009,0 -24.24489,-1.80908 -24.24489,-4.04065l0,-140.4187c0,-2.23158 -10.85481,-4.04065 -24.2449,-4.04065l0,0c13.39009,0 24.2449,-1.80907 24.2449,-4.04065l0,-140.4187l0,0c0,-2.23159 10.8548,-4.04066 24.24489,-4.04066',
|
||||
uml_actor: 'm40.5,100l219,0m-108.99991,94.00006l107,105m-107.00009,-106.00006l-100,106m99.5,-231l0,125m33.24219,-158.75781c0,18.35916 -14.88303,33.24219 -33.24219,33.24219c-18.35916,0 -33.2422,-14.88303 -33.2422,-33.24219c0.00002,-18.35915 14.88304,-33.24219 33.2422,-33.24219c18.35916,0 33.24219,14.88304 33.24219,33.24219z',
|
||||
dialog_balloon_1: 'm0.99786,35.96579l0,0c0,-19.31077 15.28761,-34.96524 34.14583,-34.96524l15.52084,0l0,0l74.50001,0l139.68748,0c9.05606,0 17.74118,3.68382 24.14478,10.24108c6.40356,6.55726 10.00107,15.45081 10.00107,24.72416l0,87.41311l0,0l0,52.44785l0,0c0,19.31078 -15.2876,34.96524 -34.14584,34.96524l-139.68748,0l-97.32507,88.90848l22.82506,-88.90848l-15.52084,0c-18.85822,0 -34.14583,-15.65446 -34.14583,-34.96524l0,0l0,-52.44785l0,0z',
|
||||
cloud: 'm182.05086,34.31005c-0.64743,0.02048 -1.27309,0.07504 -1.92319,0.13979c-10.40161,1.03605 -19.58215,7.63722 -24.24597,17.4734l-2.47269,7.44367c0.53346,-2.57959 1.35258,-5.08134 2.47269,-7.44367c-8.31731,-8.61741 -19.99149,-12.59487 -31.52664,-10.72866c-11.53516,1.8662 -21.55294,9.3505 -27.02773,20.19925c-15.45544,-9.51897 -34.72095,-8.94245 -49.62526,1.50272c-14.90431,10.44516 -22.84828,28.93916 -20.43393,47.59753l1.57977,7.58346c-0.71388,-2.48442 -1.24701,-5.01186 -1.57977,-7.58346l-0.2404,0.69894c-12.95573,1.4119 -23.58103,11.46413 -26.34088,24.91708c-2.75985,13.45294 2.9789,27.25658 14.21789,34.21291l17.54914,4.26352c-6.1277,0.50439 -12.24542,-0.9808 -17.54914,-4.26352c-8.66903,9.71078 -10.6639,24.08736 -4.94535,35.96027c5.71854,11.87289 17.93128,18.70935 30.53069,17.15887l7.65843,-2.02692c-2.46413,1.0314 -5.02329,1.70264 -7.65843,2.02692c7.15259,13.16728 19.01251,22.77237 32.93468,26.5945c13.92217,3.82214 28.70987,1.56322 41.03957,-6.25546c10.05858,15.86252 27.91113,24.19412 45.81322,21.38742c17.90208,-2.8067 32.66954,-16.26563 37.91438,-34.52742l1.82016,-10.20447c-0.27254,3.46677 -0.86394,6.87508 -1.82016,10.20447c12.31329,8.07489 27.80199,8.52994 40.52443,1.18819c12.72244,-7.34175 20.6609,-21.34155 20.77736,-36.58929l-4.56108,-22.7823l-17.96776,-15.41455c13.89359,8.70317 22.6528,21.96329 22.52884,38.19685c16.5202,0.17313 30.55292,-13.98268 36.84976,-30.22897c6.29684,-16.24631 3.91486,-34.76801 -6.2504,-48.68089c4.21637,-10.35873 3.96622,-22.14172 -0.68683,-32.29084c-4.65308,-10.14912 -13.23602,-17.69244 -23.55914,-20.65356c-2.31018,-13.45141 -11.83276,-24.27162 -24.41768,-27.81765c-12.58492,-3.54603 -25.98557,0.82654 -34.41142,11.25287l-5.11707,8.63186c1.30753,-3.12148 3.01521,-6.03101 5.11707,-8.63186c-5.93959,-8.19432 -15.2556,-12.8181 -24.96718,-12.51096z',
|
||||
cylinder: 'm299.0007,83.77844c0,18.28676 -66.70958,33.11111 -149.00002,33.11111m149.00002,-33.11111l0,0c0,18.28676 -66.70958,33.11111 -149.00002,33.11111c-82.29041,0 -148.99997,-14.82432 -148.99997,-33.11111m0,0l0,0c0,-18.28674 66.70956,-33.1111 148.99997,-33.1111c82.29044,0 149.00002,14.82436 149.00002,33.1111l0,132.44449c0,18.28674 -66.70958,33.11105 -149.00002,33.11105c-82.29041,0 -148.99997,-14.82431 -148.99997,-33.11105z',
|
||||
arrow_u_turn: 'm1.00059,299.00055l0,-167.62497l0,0c0,-72.00411 58.37087,-130.37499 130.375,-130.37499l0,0l0,0c34.57759,0 67.73898,13.7359 92.18906,38.18595c24.45006,24.45005 38.18593,57.61144 38.18593,92.18904l0,18.625l37.24997,0l-74.49995,74.50002l-74.50002,-74.50002l37.25,0l0,-18.625c0,-30.8589 -25.0161,-55.87498 -55.87498,-55.87498l0,0l0,0c-30.85892,0 -55.875,25.01608 -55.875,55.87498l0,167.62497z',
|
||||
arrow_left_up: 'm0.99865,224.5l74.50004,-74.5l0,37.25l111.74991,0l0,-111.75l-37.25,0l74.5,-74.5l74.5,74.5l-37.25,0l0,186.25l-186.24989,0l0,37.25l-74.50005,-74.5z',
|
||||
maximize: 'm1.00037,150.34581l55.30305,-55.30267l0,27.65093l22.17356,0l0,-44.21833l44.21825,0l0,-22.17357l-27.65095,0l55.30267,-55.30292l55.3035,55.30292l-27.65175,0l0,22.17357l44.21835,0l0,44.21833l22.17357,0l0,-27.65093l55.30345,55.30267l-55.30345,55.3035l0,-27.65175l-22.17357,0l0,44.21834l-44.21835,0l0,22.17355l27.65175,0l-55.3035,55.30348l-55.30267,-55.30348l27.65095,0l0,-22.17355l-44.21825,0l0,-44.21834l-22.17356,0l0,27.65175l-55.30305,-55.3035z',
|
||||
cross: 'm0.99844,99.71339l98.71494,0l0,-98.71495l101.26279,0l0,98.71495l98.71495,0l0,101.2628l-98.71495,0l0,98.71494l-101.26279,0l0,-98.71494l-98.71494,0z',
|
||||
plaque: 'm-0.00197,49.94376l0,0c27.5829,0 49.94327,-22.36036 49.94327,-49.94327l199.76709,0l0,0c0,27.5829 22.36037,49.94327 49.94325,49.94327l0,199.7671l0,0c-27.58289,0 -49.94325,22.36034 -49.94325,49.94325l-199.76709,0c0,-27.58292 -22.36037,-49.94325 -49.94327,-49.94325z',
|
||||
page: 'm249.3298,298.99744l9.9335,-39.73413l39.73413,-9.93355l-49.66763,49.66768l-248.33237,0l0,-298.00001l298.00001,0l0,248.33234'
|
||||
},
|
||||
buttons: []
|
||||
}
|
||||
};
|
||||
const modeId = 'shapelib';
|
||||
const startClientPos = {};
|
||||
let currentD, curShapeId, curShape, startX, startY;
|
||||
let curLib = library.basic;
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
curLib = lib;
|
||||
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]
|
||||
*/
|
||||
|
||||
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: {
|
||||
data: {
|
||||
heart: 'm150,73c61,-175 300,0 0,225c-300,-225 -61,-400 0,-225z',
|
||||
frame: 'm0,0l300,0l0,300l-300,0zm35,-265l0,230l230,0l0,-230z',
|
||||
donut: 'm1,150l0,0c0,-82.29042 66.70958,-149 149,-149l0,0c39.51724,0 77.41599,15.69816 105.35889,43.64108c27.94293,27.94293 43.64111,65.84165 43.64111,105.35892l0,0c0,82.29041 -66.70958,149 -149,149l0,0c-82.29041,0 -149,-66.70959 -149,-149zm74.5,0l0,0c0,41.1452 33.35481,74.5 74.5,74.5c41.14522,0 74.5,-33.3548 74.5,-74.5c0,-41.1452 -33.3548,-74.5 -74.5,-74.5l0,0c-41.14519,0 -74.5,33.35481 -74.5,74.5z',
|
||||
triangle: 'm1,280.375l149,-260.75l149,260.75z',
|
||||
right_triangle: 'm1,299l0,-298l298,298z',
|
||||
diamond: 'm1,150l149,-149l149,149l-149,149l-149,-149z',
|
||||
pentagon: 'm1.00035,116.97758l148.99963,-108.4053l148.99998,108.4053l-56.91267,175.4042l-184.1741,0l-56.91284,-175.4042z',
|
||||
hexagon: 'm1,149.99944l63.85715,-127.71428l170.28572,0l63.85713,127.71428l-63.85713,127.71428l-170.28572,0l-63.85715,-127.71428z',
|
||||
septagon1: 'm0.99917,191.06511l29.51249,-127.7108l119.48833,-56.83673l119.48836,56.83673l29.51303,127.7108l-82.69087,102.41679l-132.62103,0l-82.69031,-102.41679z',
|
||||
heptagon: 'm1,88.28171l87.28172,-87.28171l123.43653,0l87.28172,87.28171l0,123.43654l-87.28172,87.28172l-123.43653,0l-87.28172,-87.28172l0,-123.43654z',
|
||||
decagon: 'm1,150.00093l28.45646,-88.40318l74.49956,-54.63682l92.08794,0l74.50002,54.63682l28.45599,88.40318l-28.45599,88.40318l-74.50002,54.63681l-92.08794,0l-74.49956,-54.63681l-28.45646,-88.40318z',
|
||||
dodecagon: 'm1,110.07421l39.92579,-69.14842l69.14842,-39.92579l79.85159,0l69.14842,39.92579l39.92578,69.14842l0,79.85159l-39.92578,69.14842l-69.14842,39.92578l-79.85159,0l-69.14842,-39.92578l-39.92579,-69.14842l0,-79.85159z',
|
||||
star_points_5: 'm1,116.58409l113.82668,0l35.17332,-108.13487l35.17334,108.13487l113.82666,0l-92.08755,66.83026l35.17514,108.13487l-92.08759,-66.83208l-92.08757,66.83208l35.17515,-108.13487l-92.08758,-66.83026z',
|
||||
trapezoid: 'm1,299l55.875,-298l186.25001,0l55.87498,298z',
|
||||
arrow_up: 'm1.49805,149.64304l148.50121,-148.00241l148.50121,148.00241l-74.25061,0l0,148.71457l-148.5012,0l0,-148.71457z',
|
||||
vertical_scrool: 'm37.375,261.625l0,-242.9375l0,0c0,-10.32083 8.36669,-18.6875 18.6875,-18.6875l224.25,0c10.32083,0 18.6875,8.36667 18.6875,18.6875c0,10.32081 -8.36667,18.6875 -18.6875,18.6875l-18.6875,0l0,242.9375c0,10.32083 -8.36668,18.6875 -18.6875,18.6875l-224.25,0l0,0c-10.32083,0 -18.6875,-8.36667 -18.6875,-18.6875c0,-10.32083 8.36667,-18.6875 18.6875,-18.6875zm37.375,-261.625l0,0c10.32081,0 18.6875,8.36667 18.6875,18.6875c0,10.32081 -8.36669,18.6875 -18.6875,18.6875c-5.1604,0 -9.34375,-4.18335 -9.34375,-9.34375c0,-5.16041 4.18335,-9.34375 9.34375,-9.34375l18.6875,0m186.875,18.6875l-205.5625,0m-37.375,224.25l0,0c5.1604,0 9.34375,4.18335 9.34375,9.34375c0,5.1604 -4.18335,9.34375 -9.34375,9.34375l18.6875,0m-18.6875,18.6875l0,0c10.32081,0 18.6875,-8.36667 18.6875,-18.6875l0,-18.6875',
|
||||
smiley: 'm68.49886,214.78838q81.06408,55.67332 161.93891,0m-144.36983,-109.9558c0,-8.60432 6.97517,-15.57949 15.57948,-15.57949c8.60431,0 15.57948,6.97517 15.57948,15.57949c0,8.60431 -6.97517,15.57947 -15.57948,15.57947c-8.60431,0 -15.57948,-6.97516 -15.57948,-15.57947m95.83109,0c0,-8.60432 6.97517,-15.57949 15.57948,-15.57949c8.60431,0 15.57947,6.97517 15.57947,15.57949c0,8.60431 -6.97516,15.57947 -15.57947,15.57947c-8.60429,0 -15.57948,-6.97516 -15.57948,-15.57947m-181.89903,44.73038l0,0c0,-82.60133 66.96162,-149.56296 149.56296,-149.56296c82.60135,0 149.56296,66.96162 149.56296,149.56296c0,82.60135 -66.96161,149.56296 -149.56296,149.56296c-82.60133,0 -149.56296,-66.96161 -149.56296,-149.56296zm0,0l0,0c0,-82.60133 66.96162,-149.56296 149.56296,-149.56296c82.60135,0 149.56296,66.96162 149.56296,149.56296c0,82.60135 -66.96161,149.56296 -149.56296,149.56296c-82.60133,0 -149.56296,-66.96161 -149.56296,-149.56296z',
|
||||
left_braket: 'm174.24565,298.5c-13.39009,0 -24.24489,-1.80908 -24.24489,-4.04065l0,-140.4187c0,-2.23158 -10.85481,-4.04065 -24.2449,-4.04065l0,0c13.39009,0 24.2449,-1.80907 24.2449,-4.04065l0,-140.4187l0,0c0,-2.23159 10.8548,-4.04066 24.24489,-4.04066',
|
||||
uml_actor: 'm40.5,100l219,0m-108.99991,94.00006l107,105m-107.00009,-106.00006l-100,106m99.5,-231l0,125m33.24219,-158.75781c0,18.35916 -14.88303,33.24219 -33.24219,33.24219c-18.35916,0 -33.2422,-14.88303 -33.2422,-33.24219c0.00002,-18.35915 14.88304,-33.24219 33.2422,-33.24219c18.35916,0 33.24219,14.88304 33.24219,33.24219z',
|
||||
dialog_balloon_1: 'm0.99786,35.96579l0,0c0,-19.31077 15.28761,-34.96524 34.14583,-34.96524l15.52084,0l0,0l74.50001,0l139.68748,0c9.05606,0 17.74118,3.68382 24.14478,10.24108c6.40356,6.55726 10.00107,15.45081 10.00107,24.72416l0,87.41311l0,0l0,52.44785l0,0c0,19.31078 -15.2876,34.96524 -34.14584,34.96524l-139.68748,0l-97.32507,88.90848l22.82506,-88.90848l-15.52084,0c-18.85822,0 -34.14583,-15.65446 -34.14583,-34.96524l0,0l0,-52.44785l0,0z',
|
||||
cloud: 'm182.05086,34.31005c-0.64743,0.02048 -1.27309,0.07504 -1.92319,0.13979c-10.40161,1.03605 -19.58215,7.63722 -24.24597,17.4734l-2.47269,7.44367c0.53346,-2.57959 1.35258,-5.08134 2.47269,-7.44367c-8.31731,-8.61741 -19.99149,-12.59487 -31.52664,-10.72866c-11.53516,1.8662 -21.55294,9.3505 -27.02773,20.19925c-15.45544,-9.51897 -34.72095,-8.94245 -49.62526,1.50272c-14.90431,10.44516 -22.84828,28.93916 -20.43393,47.59753l1.57977,7.58346c-0.71388,-2.48442 -1.24701,-5.01186 -1.57977,-7.58346l-0.2404,0.69894c-12.95573,1.4119 -23.58103,11.46413 -26.34088,24.91708c-2.75985,13.45294 2.9789,27.25658 14.21789,34.21291l17.54914,4.26352c-6.1277,0.50439 -12.24542,-0.9808 -17.54914,-4.26352c-8.66903,9.71078 -10.6639,24.08736 -4.94535,35.96027c5.71854,11.87289 17.93128,18.70935 30.53069,17.15887l7.65843,-2.02692c-2.46413,1.0314 -5.02329,1.70264 -7.65843,2.02692c7.15259,13.16728 19.01251,22.77237 32.93468,26.5945c13.92217,3.82214 28.70987,1.56322 41.03957,-6.25546c10.05858,15.86252 27.91113,24.19412 45.81322,21.38742c17.90208,-2.8067 32.66954,-16.26563 37.91438,-34.52742l1.82016,-10.20447c-0.27254,3.46677 -0.86394,6.87508 -1.82016,10.20447c12.31329,8.07489 27.80199,8.52994 40.52443,1.18819c12.72244,-7.34175 20.6609,-21.34155 20.77736,-36.58929l-4.56108,-22.7823l-17.96776,-15.41455c13.89359,8.70317 22.6528,21.96329 22.52884,38.19685c16.5202,0.17313 30.55292,-13.98268 36.84976,-30.22897c6.29684,-16.24631 3.91486,-34.76801 -6.2504,-48.68089c4.21637,-10.35873 3.96622,-22.14172 -0.68683,-32.29084c-4.65308,-10.14912 -13.23602,-17.69244 -23.55914,-20.65356c-2.31018,-13.45141 -11.83276,-24.27162 -24.41768,-27.81765c-12.58492,-3.54603 -25.98557,0.82654 -34.41142,11.25287l-5.11707,8.63186c1.30753,-3.12148 3.01521,-6.03101 5.11707,-8.63186c-5.93959,-8.19432 -15.2556,-12.8181 -24.96718,-12.51096z',
|
||||
cylinder: 'm299.0007,83.77844c0,18.28676 -66.70958,33.11111 -149.00002,33.11111m149.00002,-33.11111l0,0c0,18.28676 -66.70958,33.11111 -149.00002,33.11111c-82.29041,0 -148.99997,-14.82432 -148.99997,-33.11111m0,0l0,0c0,-18.28674 66.70956,-33.1111 148.99997,-33.1111c82.29044,0 149.00002,14.82436 149.00002,33.1111l0,132.44449c0,18.28674 -66.70958,33.11105 -149.00002,33.11105c-82.29041,0 -148.99997,-14.82431 -148.99997,-33.11105z',
|
||||
arrow_u_turn: 'm1.00059,299.00055l0,-167.62497l0,0c0,-72.00411 58.37087,-130.37499 130.375,-130.37499l0,0l0,0c34.57759,0 67.73898,13.7359 92.18906,38.18595c24.45006,24.45005 38.18593,57.61144 38.18593,92.18904l0,18.625l37.24997,0l-74.49995,74.50002l-74.50002,-74.50002l37.25,0l0,-18.625c0,-30.8589 -25.0161,-55.87498 -55.87498,-55.87498l0,0l0,0c-30.85892,0 -55.875,25.01608 -55.875,55.87498l0,167.62497z',
|
||||
arrow_left_up: 'm0.99865,224.5l74.50004,-74.5l0,37.25l111.74991,0l0,-111.75l-37.25,0l74.5,-74.5l74.5,74.5l-37.25,0l0,186.25l-186.24989,0l0,37.25l-74.50005,-74.5z',
|
||||
maximize: 'm1.00037,150.34581l55.30305,-55.30267l0,27.65093l22.17356,0l0,-44.21833l44.21825,0l0,-22.17357l-27.65095,0l55.30267,-55.30292l55.3035,55.30292l-27.65175,0l0,22.17357l44.21835,0l0,44.21833l22.17357,0l0,-27.65093l55.30345,55.30267l-55.30345,55.3035l0,-27.65175l-22.17357,0l0,44.21834l-44.21835,0l0,22.17355l27.65175,0l-55.3035,55.30348l-55.30267,-55.30348l27.65095,0l0,-22.17355l-44.21825,0l0,-44.21834l-22.17356,0l0,27.65175l-55.30305,-55.3035z',
|
||||
cross: 'm0.99844,99.71339l98.71494,0l0,-98.71495l101.26279,0l0,98.71495l98.71495,0l0,101.2628l-98.71495,0l0,98.71494l-101.26279,0l0,-98.71494l-98.71494,0z',
|
||||
plaque: 'm-0.00197,49.94376l0,0c27.5829,0 49.94327,-22.36036 49.94327,-49.94327l199.76709,0l0,0c0,27.5829 22.36037,49.94327 49.94325,49.94327l0,199.7671l0,0c-27.58289,0 -49.94325,22.36034 -49.94325,49.94325l-199.76709,0c0,-27.58292 -22.36037,-49.94325 -49.94327,-49.94325z',
|
||||
page: 'm249.3298,298.99744l9.9335,-39.73413l39.73413,-9.93355l-49.66763,49.66768l-248.33237,0l0,-298.00001l298.00001,0l0,248.33234'
|
||||
},
|
||||
buttons: []
|
||||
}
|
||||
};
|
||||
modeId = 'shapelib';
|
||||
startClientPos = {};
|
||||
curLib = library.basic;
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
buttons = [{
|
||||
id: 'tool_shapelib',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'shapes.png',
|
||||
type: 'mode_flyout',
|
||||
// _flyout
|
||||
position: 6,
|
||||
events: {
|
||||
click: function click() {
|
||||
canv.setMode(modeId);
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context.abrupt("return", {
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'ext-shapes.xml',
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
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');
|
||||
var btnDiv = $('<div id="shape_buttons">');
|
||||
$('#tools_shapelib > *').wrapAll(btnDiv);
|
||||
var shower = $('#tools_shapelib_show');
|
||||
loadLibrary('basic'); // Do mouseup on parent element rather than each button
|
||||
|
||||
$('#shape_buttons').mouseup(function (evt) {
|
||||
var btn = $(evt.target).closest('div.tool_button');
|
||||
|
||||
if (!btn.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var copy = btn.children().clone();
|
||||
shower.children(':not(.flyout_arrow_horiz)').remove();
|
||||
shower.append(copy).attr('data-curopt', '#' + btn[0].id) // This sets the current mode
|
||||
.mouseup();
|
||||
canv.setMode(modeId);
|
||||
curShapeId = btn[0].id.substr((modeId + '_').length);
|
||||
currentD = curLib.data[curShapeId];
|
||||
$('.tools_flyout').fadeOut();
|
||||
});
|
||||
var shapeCats = $('<div id="shape_cats">');
|
||||
var catStr = '';
|
||||
$.each(categories, function (id, label) {
|
||||
catStr += '<div data-cat=' + id + '>' + label + '</div>';
|
||||
});
|
||||
shapeCats.html(catStr).children().bind('mouseup', function () {
|
||||
var catlink = $(this);
|
||||
catlink.siblings().removeClass('current');
|
||||
catlink.addClass('current');
|
||||
loadLibrary(catlink.attr('data-cat')); // Get stuff
|
||||
|
||||
return false;
|
||||
});
|
||||
shapeCats.children().eq(0).addClass('current');
|
||||
$('#tools_shapelib').append(shapeCats);
|
||||
shower.mouseup(function () {
|
||||
canv.setMode(currentD ? modeId : 'select');
|
||||
});
|
||||
$('#tool_shapelib').remove();
|
||||
var h = $('#tools_shapelib').height();
|
||||
$('#tools_shapelib').css({
|
||||
'margin-top': -(h / 2 - 15),
|
||||
'margin-left': 3
|
||||
}); // Now add shape categories from locale
|
||||
|
||||
var cats = {};
|
||||
Object.entries(categories).forEach(function (_ref4) {
|
||||
var _ref5 = _slicedToArray(_ref4, 2),
|
||||
o = _ref5[0],
|
||||
categoryName = _ref5[1];
|
||||
|
||||
cats['#shape_cats [data-cat="' + o + '"]'] = categoryName;
|
||||
});
|
||||
this.setStrings('content', cats);
|
||||
},
|
||||
mouseDown: function mouseDown(opts) {
|
||||
var mode = canv.getMode();
|
||||
|
||||
if (mode !== modeId) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
startX = opts.start_x;
|
||||
var x = startX;
|
||||
startY = opts.start_y;
|
||||
var y = startY;
|
||||
var curStyle = canv.getStyle();
|
||||
startClientPos.x = opts.event.clientX;
|
||||
startClientPos.y = opts.event.clientY;
|
||||
curShape = canv.addSVGElementFromJson({
|
||||
element: 'path',
|
||||
curStyles: true,
|
||||
attr: {
|
||||
d: currentD,
|
||||
id: canv.getNextId(),
|
||||
opacity: curStyle.opacity / 2,
|
||||
style: 'pointer-events:none'
|
||||
}
|
||||
}); // Make sure shape uses absolute values
|
||||
|
||||
if (/[a-z]/.test(currentD)) {
|
||||
currentD = curLib.data[curShapeId] = canv.pathActions.convertPath(curShape);
|
||||
curShape.setAttribute('d', currentD);
|
||||
canv.pathActions.fixEnd(curShape);
|
||||
}
|
||||
|
||||
curShape.setAttribute('transform', 'translate(' + x + ',' + y + ') scale(0.005) translate(' + -x + ',' + -y + ')');
|
||||
canv.recalculateDimensions(curShape);
|
||||
/* const tlist = */
|
||||
|
||||
canv.getTransformList(curShape);
|
||||
lastBBox = curShape.getBBox();
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
},
|
||||
mouseMove: function mouseMove(opts) {
|
||||
var mode = canv.getMode();
|
||||
|
||||
if (mode !== modeId) {
|
||||
return;
|
||||
}
|
||||
|
||||
var zoom = canv.getZoom();
|
||||
var evt = opts.event;
|
||||
var x = opts.mouse_x / zoom;
|
||||
var y = opts.mouse_y / zoom;
|
||||
var tlist = canv.getTransformList(curShape),
|
||||
box = curShape.getBBox(),
|
||||
left = box.x,
|
||||
top = box.y; // {width, height} = box,
|
||||
// const dx = (x - startX), dy = (y - startY);
|
||||
|
||||
var newbox = {
|
||||
x: Math.min(startX, x),
|
||||
y: Math.min(startY, y),
|
||||
width: Math.abs(x - startX),
|
||||
height: Math.abs(y - startY)
|
||||
};
|
||||
/*
|
||||
// This is currently serving no purpose, so commenting out
|
||||
let sy = height ? (height + dy) / height : 1,
|
||||
sx = width ? (width + dx) / width : 1;
|
||||
*/
|
||||
|
||||
var sx = newbox.width / lastBBox.width || 1;
|
||||
var sy = newbox.height / lastBBox.height || 1; // Not perfect, but mostly works...
|
||||
|
||||
var tx = 0;
|
||||
|
||||
if (x < startX) {
|
||||
tx = lastBBox.width;
|
||||
}
|
||||
|
||||
var ty = 0;
|
||||
|
||||
if (y < startY) {
|
||||
ty = lastBBox.height;
|
||||
} // update the transform list with translate,scale,translate
|
||||
/**
|
||||
* @param {string|"basic"} cat Category ID
|
||||
* @param {module:Extension.Shapes.Shapes} shapes
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
|
||||
var translateOrigin = svgroot.createSVGTransform(),
|
||||
scale = svgroot.createSVGTransform(),
|
||||
translateBack = svgroot.createSVGTransform();
|
||||
translateOrigin.setTranslate(-(left + tx), -(top + ty));
|
||||
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
|
||||
|
||||
if (!evt.shiftKey) {
|
||||
var max = Math.min(Math.abs(sx), Math.abs(sy));
|
||||
sx = max * (sx < 0 ? -1 : 1);
|
||||
sy = max * (sy < 0 ? -1 : 1);
|
||||
}
|
||||
return iconBtn[0];
|
||||
});
|
||||
}
|
||||
/**
|
||||
* @param {string|"basic"} catId
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
scale.setScale(sx, sy);
|
||||
translateBack.setTranslate(left + tx, top + ty);
|
||||
tlist.appendItem(translateBack);
|
||||
tlist.appendItem(scale);
|
||||
tlist.appendItem(translateOrigin);
|
||||
canv.recalculateDimensions(curShape);
|
||||
lastBBox = curShape.getBBox();
|
||||
},
|
||||
mouseUp: function mouseUp(opts) {
|
||||
var mode = canv.getMode();
|
||||
|
||||
if (mode !== modeId) {
|
||||
return undefined;
|
||||
}
|
||||
function loadLibrary(catId) {
|
||||
const lib = library[catId];
|
||||
|
||||
var keepObject = opts.event.clientX !== startClientPos.x && opts.event.clientY !== startClientPos.y;
|
||||
return {
|
||||
keep: keepObject,
|
||||
element: curShape,
|
||||
started: false
|
||||
};
|
||||
}
|
||||
});
|
||||
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;
|
||||
}
|
||||
|
||||
case 18:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
}
|
||||
curLib = lib;
|
||||
|
||||
if (!lib.buttons.length) {
|
||||
makeButtons(catId, lib);
|
||||
}
|
||||
|
||||
loadIcons();
|
||||
}
|
||||
|
||||
const buttons = [{
|
||||
id: 'tool_shapelib',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'shapes.png',
|
||||
type: 'mode_flyout',
|
||||
// _flyout
|
||||
position: 6,
|
||||
events: {
|
||||
click() {
|
||||
canv.setMode(modeId);
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
|
||||
}
|
||||
}];
|
||||
return {
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'ext-shapes.xml',
|
||||
buttons: strings.buttons.map((button, i) => {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
|
||||
callback() {
|
||||
$('<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);
|
||||
const shower = $('#tools_shapelib_show');
|
||||
loadLibrary('basic'); // Do mouseup on parent element rather than each button
|
||||
|
||||
$('#shape_buttons').mouseup(function (evt) {
|
||||
const btn = $(evt.target).closest('div.tool_button');
|
||||
|
||||
if (!btn.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const copy = btn.children().clone();
|
||||
shower.children(':not(.flyout_arrow_horiz)').remove();
|
||||
shower.append(copy).attr('data-curopt', '#' + btn[0].id) // This sets the current mode
|
||||
.mouseup();
|
||||
canv.setMode(modeId);
|
||||
curShapeId = btn[0].id.substr((modeId + '_').length);
|
||||
currentD = curLib.data[curShapeId];
|
||||
$('.tools_flyout').fadeOut();
|
||||
});
|
||||
const shapeCats = $('<div id="shape_cats">');
|
||||
let catStr = '';
|
||||
$.each(categories, function (id, label) {
|
||||
catStr += '<div data-cat=' + id + '>' + label + '</div>';
|
||||
});
|
||||
shapeCats.html(catStr).children().bind('mouseup', function () {
|
||||
const catlink = $(this);
|
||||
catlink.siblings().removeClass('current');
|
||||
catlink.addClass('current');
|
||||
loadLibrary(catlink.attr('data-cat')); // Get stuff
|
||||
|
||||
return false;
|
||||
});
|
||||
shapeCats.children().eq(0).addClass('current');
|
||||
$('#tools_shapelib').append(shapeCats);
|
||||
shower.mouseup(function () {
|
||||
canv.setMode(currentD ? modeId : 'select');
|
||||
});
|
||||
$('#tool_shapelib').remove();
|
||||
const h = $('#tools_shapelib').height();
|
||||
$('#tools_shapelib').css({
|
||||
'margin-top': -(h / 2 - 15),
|
||||
'margin-left': 3
|
||||
}); // Now add shape categories from locale
|
||||
|
||||
const cats = {};
|
||||
Object.entries(categories).forEach(([o, categoryName]) => {
|
||||
cats['#shape_cats [data-cat="' + o + '"]'] = categoryName;
|
||||
});
|
||||
this.setStrings('content', cats);
|
||||
},
|
||||
|
||||
mouseDown(opts) {
|
||||
const mode = canv.getMode();
|
||||
|
||||
if (mode !== modeId) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
startX = opts.start_x;
|
||||
const x = startX;
|
||||
startY = opts.start_y;
|
||||
const y = startY;
|
||||
const curStyle = canv.getStyle();
|
||||
startClientPos.x = opts.event.clientX;
|
||||
startClientPos.y = opts.event.clientY;
|
||||
curShape = canv.addSVGElementFromJson({
|
||||
element: 'path',
|
||||
curStyles: true,
|
||||
attr: {
|
||||
d: currentD,
|
||||
id: canv.getNextId(),
|
||||
opacity: curStyle.opacity / 2,
|
||||
style: 'pointer-events:none'
|
||||
}
|
||||
}); // Make sure shape uses absolute values
|
||||
|
||||
if (/[a-z]/.test(currentD)) {
|
||||
currentD = curLib.data[curShapeId] = canv.pathActions.convertPath(curShape);
|
||||
curShape.setAttribute('d', currentD);
|
||||
canv.pathActions.fixEnd(curShape);
|
||||
}
|
||||
|
||||
curShape.setAttribute('transform', 'translate(' + x + ',' + y + ') scale(0.005) translate(' + -x + ',' + -y + ')');
|
||||
canv.recalculateDimensions(curShape);
|
||||
/* const tlist = */
|
||||
|
||||
canv.getTransformList(curShape);
|
||||
lastBBox = curShape.getBBox();
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
},
|
||||
|
||||
mouseMove(opts) {
|
||||
const mode = canv.getMode();
|
||||
|
||||
if (mode !== modeId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const zoom = canv.getZoom();
|
||||
const evt = opts.event;
|
||||
const x = opts.mouse_x / zoom;
|
||||
const y = opts.mouse_y / zoom;
|
||||
const tlist = canv.getTransformList(curShape),
|
||||
box = curShape.getBBox(),
|
||||
left = box.x,
|
||||
top = box.y; // {width, height} = box,
|
||||
// const dx = (x - startX), dy = (y - startY);
|
||||
|
||||
const newbox = {
|
||||
x: Math.min(startX, x),
|
||||
y: Math.min(startY, y),
|
||||
width: Math.abs(x - startX),
|
||||
height: Math.abs(y - startY)
|
||||
};
|
||||
/*
|
||||
// This is currently serving no purpose, so commenting out
|
||||
let sy = height ? (height + dy) / height : 1,
|
||||
sx = width ? (width + dx) / width : 1;
|
||||
*/
|
||||
|
||||
let sx = newbox.width / lastBBox.width || 1;
|
||||
let sy = newbox.height / lastBBox.height || 1; // Not perfect, but mostly works...
|
||||
|
||||
let tx = 0;
|
||||
|
||||
if (x < startX) {
|
||||
tx = lastBBox.width;
|
||||
}
|
||||
|
||||
let ty = 0;
|
||||
|
||||
if (y < startY) {
|
||||
ty = lastBBox.height;
|
||||
} // update the transform list with translate,scale,translate
|
||||
|
||||
|
||||
const translateOrigin = svgroot.createSVGTransform(),
|
||||
scale = svgroot.createSVGTransform(),
|
||||
translateBack = svgroot.createSVGTransform();
|
||||
translateOrigin.setTranslate(-(left + tx), -(top + ty));
|
||||
|
||||
if (!evt.shiftKey) {
|
||||
const max = Math.min(Math.abs(sx), Math.abs(sy));
|
||||
sx = max * (sx < 0 ? -1 : 1);
|
||||
sy = max * (sy < 0 ? -1 : 1);
|
||||
}
|
||||
|
||||
scale.setScale(sx, sy);
|
||||
translateBack.setTranslate(left + tx, top + ty);
|
||||
tlist.appendItem(translateBack);
|
||||
tlist.appendItem(scale);
|
||||
tlist.appendItem(translateOrigin);
|
||||
canv.recalculateDimensions(curShape);
|
||||
lastBBox = curShape.getBBox();
|
||||
},
|
||||
|
||||
mouseUp(opts) {
|
||||
const mode = canv.getMode();
|
||||
|
||||
if (mode !== modeId) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const keepObject = opts.event.clientX !== startClientPos.x && opts.event.clientY !== startClientPos.y;
|
||||
return {
|
||||
keep: keepObject,
|
||||
element: curShape,
|
||||
started: false
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return extShapes;
|
||||
|
|
|
@ -1,42 +1,6 @@
|
|||
var svgEditorExtension_star = (function () {
|
||||
'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
|
||||
*
|
||||
|
@ -46,247 +10,270 @@ var svgEditorExtension_star = (function () {
|
|||
*/
|
||||
var extStar = {
|
||||
name: 'star',
|
||||
init: function init(S) {
|
||||
var _this = this;
|
||||
|
||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
||||
var svgEditor, svgCanvas, $, importLocale, selElems, started, newFO, strings, showPanel, setAttr, buttons, contextTools;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
setAttr = function _setAttr(attr, val) {
|
||||
svgCanvas.changeSelectedAttribute(attr, val);
|
||||
svgCanvas.call('changed', selElems);
|
||||
};
|
||||
async init(S) {
|
||||
const svgEditor = this;
|
||||
const svgCanvas = svgEditor.canvas;
|
||||
const {
|
||||
$,
|
||||
importLocale
|
||||
} = S; // {svgcontent},
|
||||
|
||||
showPanel = function _showPanel(on) {
|
||||
var fcRules = $('#fc_rules');
|
||||
let selElems, // editingitex = false,
|
||||
// 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;
|
||||
|
||||
if (!fcRules.length) {
|
||||
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
||||
}
|
||||
const strings = await importLocale();
|
||||
/**
|
||||
*
|
||||
* @param {boolean} on
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
||||
$('#star_panel').toggle(on);
|
||||
};
|
||||
function showPanel(on) {
|
||||
let fcRules = $('#fc_rules');
|
||||
|
||||
svgEditor = _this;
|
||||
svgCanvas = svgEditor.canvas;
|
||||
$ = S.$, importLocale = S.importLocale; // {svgcontent},
|
||||
if (!fcRules.length) {
|
||||
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
||||
}
|
||||
|
||||
_context.next = 7;
|
||||
return importLocale();
|
||||
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
||||
$('#star_panel').toggle(on);
|
||||
}
|
||||
/*
|
||||
function toggleSourceButtons(on){
|
||||
$('#star_save, #star_cancel').toggle(on);
|
||||
}
|
||||
*/
|
||||
|
||||
case 7:
|
||||
strings = _context.sent;
|
||||
/**
|
||||
*
|
||||
* @param {string} attr
|
||||
* @param {string|Float} val
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
/*
|
||||
function cot(n){
|
||||
return 1 / Math.tan(n);
|
||||
|
||||
function setAttr(attr, val) {
|
||||
svgCanvas.changeSelectedAttribute(attr, val);
|
||||
svgCanvas.call('changed', selElems);
|
||||
}
|
||||
/*
|
||||
function cot(n){
|
||||
return 1 / Math.tan(n);
|
||||
}
|
||||
function sec(n){
|
||||
return 1 / Math.cos(n);
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
const buttons = [{
|
||||
id: 'tool_star',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'star.png',
|
||||
type: 'mode',
|
||||
position: 12,
|
||||
events: {
|
||||
click() {
|
||||
showPanel(true);
|
||||
svgCanvas.setMode('star');
|
||||
}
|
||||
|
||||
}
|
||||
}];
|
||||
const contextTools = [{
|
||||
type: 'input',
|
||||
panel: 'star_panel',
|
||||
id: 'starNumPoints',
|
||||
size: 3,
|
||||
defval: 5,
|
||||
events: {
|
||||
change() {
|
||||
setAttr('point', this.value);
|
||||
}
|
||||
|
||||
}
|
||||
}, {
|
||||
type: 'input',
|
||||
panel: 'star_panel',
|
||||
id: 'starRadiusMulitplier',
|
||||
size: 3,
|
||||
defval: 2.5
|
||||
}, {
|
||||
type: 'input',
|
||||
panel: 'star_panel',
|
||||
id: 'radialShift',
|
||||
size: 3,
|
||||
defval: 0,
|
||||
events: {
|
||||
change() {
|
||||
setAttr('radialshift', this.value);
|
||||
}
|
||||
|
||||
}
|
||||
}];
|
||||
return {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'star-icons.svg',
|
||||
buttons: strings.buttons.map((button, i) => {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
context_tools: strings.contextTools.map((contextTool, i) => {
|
||||
return Object.assign(contextTools[i], contextTool);
|
||||
}),
|
||||
|
||||
callback() {
|
||||
$('#star_panel').hide(); // const endChanges = function(){};
|
||||
},
|
||||
|
||||
mouseDown(opts) {
|
||||
const rgb = svgCanvas.getColor('fill'); // const ccRgbEl = rgb.substring(1, rgb.length);
|
||||
|
||||
const sRgb = svgCanvas.getColor('stroke'); // const ccSRgbEl = sRgb.substring(1, rgb.length);
|
||||
|
||||
const sWidth = svgCanvas.getStrokeWidth();
|
||||
|
||||
if (svgCanvas.getMode() === 'star') {
|
||||
started = true;
|
||||
newFO = svgCanvas.addSVGElementFromJson({
|
||||
element: 'polygon',
|
||||
attr: {
|
||||
cx: opts.start_x,
|
||||
cy: opts.start_y,
|
||||
id: svgCanvas.getNextId(),
|
||||
shape: 'star',
|
||||
point: document.getElementById('starNumPoints').value,
|
||||
r: 0,
|
||||
radialshift: document.getElementById('radialShift').value,
|
||||
r2: 0,
|
||||
orient: 'point',
|
||||
fill: rgb,
|
||||
strokecolor: sRgb,
|
||||
strokeWidth: sWidth
|
||||
}
|
||||
});
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
|
||||
mouseMove(opts) {
|
||||
if (!started) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (svgCanvas.getMode() === 'star') {
|
||||
const c = $(newFO).attr(['cx', 'cy', 'point', 'orient', 'fill', 'strokecolor', 'strokeWidth', 'radialshift']);
|
||||
let x = opts.mouse_x;
|
||||
let y = opts.mouse_y;
|
||||
const {
|
||||
cx,
|
||||
cy,
|
||||
fill,
|
||||
strokecolor,
|
||||
strokeWidth,
|
||||
radialshift,
|
||||
point,
|
||||
orient
|
||||
} = c,
|
||||
circumradius = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) / 1.5,
|
||||
inradius = circumradius / document.getElementById('starRadiusMulitplier').value;
|
||||
newFO.setAttribute('r', circumradius);
|
||||
newFO.setAttribute('r2', inradius);
|
||||
let polyPoints = '';
|
||||
|
||||
for (let s = 0; point >= s; s++) {
|
||||
let angle = 2.0 * Math.PI * (s / point);
|
||||
|
||||
if (orient === 'point') {
|
||||
angle -= Math.PI / 2;
|
||||
} else if (orient === 'edge') {
|
||||
angle = angle + Math.PI / point - Math.PI / 2;
|
||||
}
|
||||
|
||||
x = circumradius * Math.cos(angle) + cx;
|
||||
y = circumradius * Math.sin(angle) + cy;
|
||||
polyPoints += x + ',' + y + ' ';
|
||||
|
||||
if (!isNaN(inradius)) {
|
||||
angle = 2.0 * Math.PI * (s / point) + Math.PI / point;
|
||||
|
||||
if (orient === 'point') {
|
||||
angle -= Math.PI / 2;
|
||||
} else if (orient === 'edge') {
|
||||
angle = angle + Math.PI / point - Math.PI / 2;
|
||||
}
|
||||
function sec(n){
|
||||
return 1 / Math.cos(n);
|
||||
}
|
||||
*/
|
||||
buttons = [{
|
||||
id: 'tool_star',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'star.png',
|
||||
type: 'mode',
|
||||
position: 12,
|
||||
events: {
|
||||
click: function click() {
|
||||
showPanel(true);
|
||||
svgCanvas.setMode('star');
|
||||
}
|
||||
}
|
||||
}];
|
||||
contextTools = [{
|
||||
type: 'input',
|
||||
panel: 'star_panel',
|
||||
id: 'starNumPoints',
|
||||
size: 3,
|
||||
defval: 5,
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('point', this.value);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
type: 'input',
|
||||
panel: 'star_panel',
|
||||
id: 'starRadiusMulitplier',
|
||||
size: 3,
|
||||
defval: 2.5
|
||||
}, {
|
||||
type: 'input',
|
||||
panel: 'star_panel',
|
||||
id: 'radialShift',
|
||||
size: 3,
|
||||
defval: 0,
|
||||
events: {
|
||||
change: function change() {
|
||||
setAttr('radialshift', this.value);
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context.abrupt("return", {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'star-icons.svg',
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
}),
|
||||
context_tools: strings.contextTools.map(function (contextTool, i) {
|
||||
return Object.assign(contextTools[i], contextTool);
|
||||
}),
|
||||
callback: function callback() {
|
||||
$('#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);
|
||||
angle += radialshift;
|
||||
x = inradius * Math.cos(angle) + cx;
|
||||
y = inradius * Math.sin(angle) + cy;
|
||||
polyPoints += x + ',' + y + ' ';
|
||||
}
|
||||
}
|
||||
|
||||
var sWidth = svgCanvas.getStrokeWidth();
|
||||
newFO.setAttribute('points', polyPoints);
|
||||
newFO.setAttribute('fill', fill);
|
||||
newFO.setAttribute('stroke', strokecolor);
|
||||
newFO.setAttribute('stroke-width', strokeWidth);
|
||||
/* const shape = */
|
||||
|
||||
if (svgCanvas.getMode() === 'star') {
|
||||
started = true;
|
||||
newFO = svgCanvas.addSVGElementFromJson({
|
||||
element: 'polygon',
|
||||
attr: {
|
||||
cx: opts.start_x,
|
||||
cy: opts.start_y,
|
||||
id: svgCanvas.getNextId(),
|
||||
shape: 'star',
|
||||
point: document.getElementById('starNumPoints').value,
|
||||
r: 0,
|
||||
radialshift: document.getElementById('radialShift').value,
|
||||
r2: 0,
|
||||
orient: 'point',
|
||||
fill: rgb,
|
||||
strokecolor: sRgb,
|
||||
strokeWidth: sWidth
|
||||
}
|
||||
});
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
newFO.getAttribute('shape');
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
mouseMove: function mouseMove(opts) {
|
||||
if (!started) {
|
||||
return undefined;
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
|
||||
if (svgCanvas.getMode() === 'star') {
|
||||
var c = $(newFO).attr(['cx', 'cy', 'point', 'orient', 'fill', 'strokecolor', 'strokeWidth', 'radialshift']);
|
||||
var x = opts.mouse_x;
|
||||
var y = opts.mouse_y;
|
||||
var cx = c.cx,
|
||||
cy = c.cy,
|
||||
fill = c.fill,
|
||||
strokecolor = c.strokecolor,
|
||||
strokeWidth = c.strokeWidth,
|
||||
radialshift = c.radialshift,
|
||||
point = c.point,
|
||||
orient = c.orient,
|
||||
circumradius = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) / 1.5,
|
||||
inradius = circumradius / document.getElementById('starRadiusMulitplier').value;
|
||||
newFO.setAttribute('r', circumradius);
|
||||
newFO.setAttribute('r2', inradius);
|
||||
var polyPoints = '';
|
||||
mouseUp() {
|
||||
if (svgCanvas.getMode() === 'star') {
|
||||
const attrs = $(newFO).attr(['r']); // svgCanvas.addToSelection([newFO], true);
|
||||
|
||||
for (var s = 0; point >= s; s++) {
|
||||
var angle = 2.0 * Math.PI * (s / point);
|
||||
return {
|
||||
keep: attrs.r !== '0',
|
||||
element: newFO
|
||||
};
|
||||
}
|
||||
|
||||
if (orient === 'point') {
|
||||
angle -= Math.PI / 2;
|
||||
} else if (orient === 'edge') {
|
||||
angle = angle + Math.PI / point - Math.PI / 2;
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
|
||||
x = circumradius * Math.cos(angle) + cx;
|
||||
y = circumradius * Math.sin(angle) + cy;
|
||||
polyPoints += x + ',' + y + ' ';
|
||||
selectedChanged(opts) {
|
||||
// Use this to update the current selected elements
|
||||
selElems = opts.elems;
|
||||
let i = selElems.length;
|
||||
|
||||
if (!isNaN(inradius)) {
|
||||
angle = 2.0 * Math.PI * (s / point) + Math.PI / point;
|
||||
while (i--) {
|
||||
const elem = selElems[i];
|
||||
|
||||
if (orient === 'point') {
|
||||
angle -= Math.PI / 2;
|
||||
} else if (orient === 'edge') {
|
||||
angle = angle + Math.PI / point - Math.PI / 2;
|
||||
}
|
||||
|
||||
angle += radialshift;
|
||||
x = inradius * Math.cos(angle) + cx;
|
||||
y = inradius * Math.sin(angle) + cy;
|
||||
polyPoints += x + ',' + y + ' ';
|
||||
}
|
||||
}
|
||||
|
||||
newFO.setAttribute('points', polyPoints);
|
||||
newFO.setAttribute('fill', fill);
|
||||
newFO.setAttribute('stroke', strokecolor);
|
||||
newFO.setAttribute('stroke-width', strokeWidth);
|
||||
/* const shape = */
|
||||
|
||||
newFO.getAttribute('shape');
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
mouseUp: function mouseUp() {
|
||||
if (svgCanvas.getMode() === 'star') {
|
||||
var attrs = $(newFO).attr(['r']); // svgCanvas.addToSelection([newFO], true);
|
||||
|
||||
return {
|
||||
keep: attrs.r !== '0',
|
||||
element: newFO
|
||||
};
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
selectedChanged: function selectedChanged(opts) {
|
||||
// Use this to update the current selected elements
|
||||
selElems = opts.elems;
|
||||
var i = selElems.length;
|
||||
|
||||
while (i--) {
|
||||
var elem = selElems[i];
|
||||
|
||||
if (elem && elem.getAttribute('shape') === 'star') {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
// $('#starRadiusMulitplier').val(elem.getAttribute('r2'));
|
||||
$('#starNumPoints').val(elem.getAttribute('point'));
|
||||
$('#radialShift').val(elem.getAttribute('radialshift'));
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
elementChanged: function elementChanged(opts) {// const elem = opts.elems[0];
|
||||
}
|
||||
});
|
||||
|
||||
case 11:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
if (elem && elem.getAttribute('shape') === 'star') {
|
||||
if (opts.selectedElement && !opts.multiselected) {
|
||||
// $('#starRadiusMulitplier').val(elem.getAttribute('r2'));
|
||||
$('#starNumPoints').val(elem.getAttribute('point'));
|
||||
$('#radialShift').val(elem.getAttribute('radialshift'));
|
||||
showPanel(true);
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
} else {
|
||||
showPanel(false);
|
||||
}
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
},
|
||||
|
||||
elementChanged(opts) {// const elem = opts.elems[0];
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return extStar;
|
||||
|
|
|
@ -1,98 +1,6 @@
|
|||
var svgEditorExtension_storage = (function () {
|
||||
'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
|
||||
*
|
||||
|
@ -115,21 +23,35 @@ var svgEditorExtension_storage = (function () {
|
|||
*/
|
||||
var extStorage = {
|
||||
name: 'storage',
|
||||
init: function init(_ref) {
|
||||
var $ = _ref.$;
|
||||
var svgEditor = this;
|
||||
var svgCanvas = svgEditor.canvas; // We could empty any already-set data for users when they decline storage,
|
||||
|
||||
init({
|
||||
$
|
||||
}) {
|
||||
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
|
||||
// said "no"; instead, we'll let those who already set it, delete it themselves;
|
||||
// to change, set the "emptyStorageOnDecline" config setting to true
|
||||
// in svgedit-config-iife.js/svgedit-config-es.js.
|
||||
|
||||
var _svgEditor$curConfig = svgEditor.curConfig,
|
||||
emptyStorageOnDecline = _svgEditor$curConfig.emptyStorageOnDecline,
|
||||
noStorageOnLoad = _svgEditor$curConfig.noStorageOnLoad,
|
||||
forceStorage = _svgEditor$curConfig.forceStorage;
|
||||
var storage = svgEditor.storage,
|
||||
updateCanvas = svgEditor.updateCanvas;
|
||||
const {
|
||||
emptyStorageOnDecline,
|
||||
// When the code in svg-editor.js prevents local storage on load per
|
||||
// user request, we also prevent storing on unload here so as to
|
||||
// avoid third-party sites making XSRF requests or providing links
|
||||
// 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.
|
||||
* @param {string} val
|
||||
|
@ -139,7 +61,7 @@ var svgEditorExtension_storage = (function () {
|
|||
|
||||
function replaceStoragePrompt(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=')) {
|
||||
/*
|
||||
|
@ -164,7 +86,7 @@ var svgEditorExtension_storage = (function () {
|
|||
|
||||
function setSVGContentStorage(val) {
|
||||
if (storage) {
|
||||
var name = 'svgedit-' + svgEditor.curConfig.canvasName;
|
||||
const name = 'svgedit-' + svgEditor.curConfig.canvasName;
|
||||
|
||||
if (!val) {
|
||||
storage.removeItem(name);
|
||||
|
@ -200,7 +122,7 @@ var svgEditorExtension_storage = (function () {
|
|||
|
||||
function emptyStorage() {
|
||||
setSVGContentStorage('');
|
||||
Object.keys(svgEditor.curPrefs).forEach(function (name) {
|
||||
Object.keys(svgEditor.curPrefs).forEach(name => {
|
||||
name = 'svg-edit-' + name;
|
||||
|
||||
if (storage) {
|
||||
|
@ -238,13 +160,11 @@ var svgEditorExtension_storage = (function () {
|
|||
}); // No need for explicit saving at all once storage is on
|
||||
// svgEditor.showSaveWarning = false;
|
||||
|
||||
var curPrefs = svgEditor.curPrefs;
|
||||
Object.entries(curPrefs).forEach(function (_ref2) {
|
||||
var _ref3 = _slicedToArray(_ref2, 2),
|
||||
key = _ref3[0],
|
||||
val = _ref3[1];
|
||||
|
||||
var store = val !== undefined;
|
||||
const {
|
||||
curPrefs
|
||||
} = svgEditor;
|
||||
Object.entries(curPrefs).forEach(([key, val]) => {
|
||||
const store = val !== undefined;
|
||||
key = 'svg-edit-' + key;
|
||||
|
||||
if (!store) {
|
||||
|
@ -263,180 +183,147 @@ var svgEditorExtension_storage = (function () {
|
|||
});
|
||||
}
|
||||
|
||||
var loaded = false;
|
||||
let loaded = false;
|
||||
return {
|
||||
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) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
importLocale = _ref4.importLocale;
|
||||
storagePrompt = new URL(top.location).searchParams.get('storagePrompt');
|
||||
_context.next = 4;
|
||||
return importLocale();
|
||||
async langReady({
|
||||
importLocale
|
||||
}) {
|
||||
const storagePrompt = new URL(top.location).searchParams.get('storagePrompt');
|
||||
const confirmSetStorage = await importLocale();
|
||||
const {
|
||||
message,
|
||||
storagePrefsAndContent,
|
||||
storagePrefsOnly,
|
||||
storagePrefs,
|
||||
storageNoPrefsOrContent,
|
||||
storageNoPrefs,
|
||||
rememberLabel,
|
||||
rememberTooltip
|
||||
} = confirmSetStorage; // No need to run this one-time dialog again just because the user
|
||||
// changes the language
|
||||
|
||||
case 4:
|
||||
confirmSetStorage = _context.sent;
|
||||
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
|
||||
// changes the language
|
||||
if (loaded) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!loaded) {
|
||||
_context.next = 8;
|
||||
break;
|
||||
}
|
||||
loaded = true; // Note that the following can load even if "noStorageOnLoad" is
|
||||
// set to false; to avoid any chance of storage, avoid this
|
||||
// extension! (and to avoid using any prior storage, set the
|
||||
// config option "noStorageOnLoad" to true).
|
||||
|
||||
return _context.abrupt("return");
|
||||
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
|
||||
// can alter one's settings, say to prevent future storage)...
|
||||
storagePrompt === 'true' || // ...or...if the URL at least doesn't explicitly prevent a
|
||||
// storage prompt (as we use for users who
|
||||
// don't want to set cookies at all but who don't want
|
||||
// continual prompts about it)...
|
||||
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.
|
||||
)) {
|
||||
const options = [];
|
||||
|
||||
case 8:
|
||||
loaded = true; // Note that the following can load even if "noStorageOnLoad" is
|
||||
// set to false; to avoid any chance of storage, avoid this
|
||||
// extension! (and to avoid using any prior storage, set the
|
||||
// config option "noStorageOnLoad" to true).
|
||||
|
||||
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
|
||||
// can alter one's settings, say to prevent future storage)...
|
||||
storagePrompt === 'true' || // ...or...if the URL at least doesn't explicitly prevent a
|
||||
// storage prompt (as we use for users who
|
||||
// don't want to set cookies at all but who don't want
|
||||
// continual prompts about it)...
|
||||
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.
|
||||
))) {
|
||||
_context.next = 44;
|
||||
break;
|
||||
}
|
||||
|
||||
options = [];
|
||||
|
||||
if (storage) {
|
||||
options.unshift({
|
||||
value: 'prefsAndContent',
|
||||
text: storagePrefsAndContent
|
||||
}, {
|
||||
value: 'prefsOnly',
|
||||
text: storagePrefsOnly
|
||||
}, {
|
||||
value: 'noPrefsOrContent',
|
||||
text: storageNoPrefsOrContent
|
||||
});
|
||||
} else {
|
||||
options.unshift({
|
||||
value: 'prefsOnly',
|
||||
text: storagePrefs
|
||||
}, {
|
||||
value: 'noPrefsOrContent',
|
||||
text: storageNoPrefs
|
||||
});
|
||||
} // Hack to temporarily provide a wide and high enough dialog
|
||||
if (storage) {
|
||||
options.unshift({
|
||||
value: 'prefsAndContent',
|
||||
text: storagePrefsAndContent
|
||||
}, {
|
||||
value: 'prefsOnly',
|
||||
text: storagePrefsOnly
|
||||
}, {
|
||||
value: 'noPrefsOrContent',
|
||||
text: storageNoPrefsOrContent
|
||||
});
|
||||
} else {
|
||||
options.unshift({
|
||||
value: 'prefsOnly',
|
||||
text: storagePrefs
|
||||
}, {
|
||||
value: 'noPrefsOrContent',
|
||||
text: storageNoPrefs
|
||||
});
|
||||
} // 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;
|
||||
$('#dialog_content')[0].style.height = '120px';
|
||||
$('#dialog_container')[0].style.height = '170px';
|
||||
$('#dialog_container')[0].style.width = '800px';
|
||||
$('#dialog_container')[0].style.marginLeft = '-400px'; // Open select-with-checkbox dialog
|
||||
// From svg-editor.js
|
||||
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_container')[0].style.height = '170px';
|
||||
$('#dialog_container')[0].style.width = '800px';
|
||||
$('#dialog_container')[0].style.marginLeft = '-400px'; // Open select-with-checkbox dialog
|
||||
// From svg-editor.js
|
||||
|
||||
svgEditor.storagePromptState = 'waiting';
|
||||
_context.next = 20;
|
||||
return $.select(message, options, null, null, {
|
||||
label: rememberLabel,
|
||||
checked: true,
|
||||
tooltip: rememberTooltip
|
||||
});
|
||||
svgEditor.storagePromptState = 'waiting';
|
||||
const {
|
||||
response: pref,
|
||||
checked
|
||||
} = await $.select(message, options, null, null, {
|
||||
label: rememberLabel,
|
||||
checked: true,
|
||||
tooltip: rememberTooltip
|
||||
});
|
||||
|
||||
case 20:
|
||||
_yield$$$select = _context.sent;
|
||||
pref = _yield$$$select.response;
|
||||
checked = _yield$$$select.checked;
|
||||
if (pref && pref !== 'noPrefsOrContent') {
|
||||
// Regardless of whether the user opted
|
||||
// to remember the choice (and move to a URL which won't
|
||||
// ask them again), we have to assume the user
|
||||
// doesn't even want to remember their not wanting
|
||||
// storage, so we don't set the cookie or continue on with
|
||||
// setting storage on beforeunload
|
||||
document.cookie = 'svgeditstore=' + encodeURIComponent(pref) + '; expires=Fri, 31 Dec 9999 23:59:59 GMT'; // 'prefsAndContent' | 'prefsOnly'
|
||||
// If the URL was configured to always insist on a prompt, if
|
||||
// the user does indicate a wish to store their info, we
|
||||
// don't want ask them again upon page refresh so move
|
||||
// them instead to a URL which does not always prompt
|
||||
|
||||
if (!(pref && pref !== 'noPrefsOrContent')) {
|
||||
_context.next = 30;
|
||||
break;
|
||||
}
|
||||
|
||||
// Regardless of whether the user opted
|
||||
// to remember the choice (and move to a URL which won't
|
||||
// ask them again), we have to assume the user
|
||||
// doesn't even want to remember their not wanting
|
||||
// storage, so we don't set the cookie or continue on with
|
||||
// setting storage on beforeunload
|
||||
document.cookie = 'svgeditstore=' + encodeURIComponent(pref) + '; expires=Fri, 31 Dec 9999 23:59:59 GMT'; // 'prefsAndContent' | 'prefsOnly'
|
||||
// If the URL was configured to always insist on a prompt, if
|
||||
// the user does indicate a wish to store their info, we
|
||||
// don't want ask them again upon page refresh so move
|
||||
// them instead to a URL which does not always prompt
|
||||
|
||||
if (!(storagePrompt === 'true' && checked)) {
|
||||
_context.next = 28;
|
||||
break;
|
||||
}
|
||||
|
||||
replaceStoragePrompt();
|
||||
return _context.abrupt("return");
|
||||
|
||||
case 28:
|
||||
_context.next = 35;
|
||||
break;
|
||||
|
||||
case 30:
|
||||
// The user does not wish storage (or cancelled, which we treat equivalently)
|
||||
removeStoragePrefCookie();
|
||||
|
||||
if (pref && // If the user explicitly expresses wish for no storage
|
||||
emptyStorageOnDecline) {
|
||||
emptyStorage();
|
||||
}
|
||||
|
||||
if (!(pref && checked)) {
|
||||
_context.next = 35;
|
||||
break;
|
||||
}
|
||||
|
||||
// Open a URL which won't set storage and won't prompt user about storage
|
||||
replaceStoragePrompt('false');
|
||||
return _context.abrupt("return");
|
||||
|
||||
case 35:
|
||||
// Reset width/height of dialog (e.g., for use by Export)
|
||||
$('#dialog_container')[0].style.width = oldContainerWidth;
|
||||
$('#dialog_container')[0].style.marginLeft = oldContainerMarginLeft;
|
||||
$('#dialog_content')[0].style.height = oldContentHeight;
|
||||
$('#dialog_container')[0].style.height = oldContainerHeight; // It should be enough to (conditionally) add to storage on
|
||||
// beforeunload, but if we wished to update immediately,
|
||||
// we might wish to try setting:
|
||||
// svgEditor.setConfig({noStorageOnLoad: true});
|
||||
// and then call:
|
||||
// svgEditor.loadContentAndPrefs();
|
||||
// We don't check for noStorageOnLoad here because
|
||||
// the prompt gives the user the option to store data
|
||||
|
||||
setupBeforeUnloadListener();
|
||||
svgEditor.storagePromptState = 'closed';
|
||||
updateCanvas(true);
|
||||
_context.next = 45;
|
||||
break;
|
||||
|
||||
case 44:
|
||||
if (!noStorageOnLoad || forceStorage) {
|
||||
setupBeforeUnloadListener();
|
||||
}
|
||||
|
||||
case 45:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
}
|
||||
if (storagePrompt === 'true' && checked) {
|
||||
replaceStoragePrompt();
|
||||
return;
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
} else {
|
||||
// The user does not wish storage (or cancelled, which we treat equivalently)
|
||||
removeStoragePrefCookie();
|
||||
|
||||
if (pref && // If the user explicitly expresses wish for no storage
|
||||
emptyStorageOnDecline) {
|
||||
emptyStorage();
|
||||
}
|
||||
|
||||
if (pref && checked) {
|
||||
// Open a URL which won't set storage and won't prompt user about storage
|
||||
replaceStoragePrompt('false');
|
||||
return;
|
||||
}
|
||||
} // Reset width/height of dialog (e.g., for use by Export)
|
||||
|
||||
|
||||
$('#dialog_container')[0].style.width = oldContainerWidth;
|
||||
$('#dialog_container')[0].style.marginLeft = oldContainerMarginLeft;
|
||||
$('#dialog_content')[0].style.height = oldContentHeight;
|
||||
$('#dialog_container')[0].style.height = oldContainerHeight; // It should be enough to (conditionally) add to storage on
|
||||
// beforeunload, but if we wished to update immediately,
|
||||
// we might wish to try setting:
|
||||
// svgEditor.setConfig({noStorageOnLoad: true});
|
||||
// and then call:
|
||||
// svgEditor.loadContentAndPrefs();
|
||||
// We don't check for noStorageOnLoad here because
|
||||
// the prompt gives the user the option to store data
|
||||
|
||||
setupBeforeUnloadListener();
|
||||
svgEditor.storagePromptState = 'closed';
|
||||
updateCanvas(true);
|
||||
} else if (!noStorageOnLoad || forceStorage) {
|
||||
setupBeforeUnloadListener();
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return extStorage;
|
||||
|
|
|
@ -1,42 +1,6 @@
|
|||
var svgEditorExtension_webappfind = (function () {
|
||||
'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
|
||||
* {@link https://github.com/brettz9/webappfind}.
|
||||
|
@ -46,131 +10,118 @@ var svgEditorExtension_webappfind = (function () {
|
|||
*/
|
||||
var extWebappfind = {
|
||||
name: 'webappfind',
|
||||
init: function init(_ref) {
|
||||
var _this = this;
|
||||
|
||||
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
||||
var importLocale, $, strings, svgEditor, saveMessage, readMessage, excludedMessages, pathID, buttons;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
importLocale = _ref.importLocale, $ = _ref.$;
|
||||
_context.next = 3;
|
||||
return importLocale();
|
||||
async init({
|
||||
importLocale,
|
||||
$
|
||||
}) {
|
||||
const strings = await importLocale();
|
||||
const svgEditor = this;
|
||||
const saveMessage = 'save',
|
||||
readMessage = 'read',
|
||||
excludedMessages = [readMessage, saveMessage];
|
||||
let pathID;
|
||||
this.canvas.bind('message',
|
||||
/**
|
||||
* @param {external:Window} win
|
||||
* @param {PlainObject} info
|
||||
* @param {module:svgcanvas.SvgCanvas#event:message} info.data
|
||||
* @param {string} info.origin
|
||||
* @listens module:svgcanvas.SvgCanvas#event:message
|
||||
* @throws {Error} Unexpected event type
|
||||
* @returns {void}
|
||||
*/
|
||||
(win, {
|
||||
data,
|
||||
origin
|
||||
}) => {
|
||||
// eslint-disable-line no-shadow
|
||||
// console.log('data, origin', data, origin);
|
||||
let type, content;
|
||||
|
||||
case 3:
|
||||
strings = _context.sent;
|
||||
svgEditor = _this;
|
||||
saveMessage = 'save', readMessage = 'read', excludedMessages = [readMessage, saveMessage];
|
||||
try {
|
||||
({
|
||||
type,
|
||||
pathID,
|
||||
content
|
||||
} = data.webappfind); // May throw if data is not an object
|
||||
|
||||
_this.canvas.bind('message',
|
||||
/**
|
||||
* @param {external:Window} win
|
||||
* @param {PlainObject} info
|
||||
* @param {module:svgcanvas.SvgCanvas#event:message} info.data
|
||||
* @param {string} info.origin
|
||||
* @listens module:svgcanvas.SvgCanvas#event:message
|
||||
* @throws {Error} Unexpected event type
|
||||
* @returns {void}
|
||||
*/
|
||||
function (win, _ref2) {
|
||||
var data = _ref2.data,
|
||||
origin = _ref2.origin;
|
||||
// eslint-disable-line no-shadow
|
||||
// console.log('data, origin', data, origin);
|
||||
var type, content;
|
||||
|
||||
try {
|
||||
var _data$webappfind = data.webappfind;
|
||||
type = _data$webappfind.type;
|
||||
pathID = _data$webappfind.pathID;
|
||||
content = _data$webappfind.content;
|
||||
|
||||
// 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
|
||||
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)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case 'view':
|
||||
// Populate the contents
|
||||
svgEditor.loadFromString(content);
|
||||
/* if ($('#tool_save_file')) {
|
||||
$('#tool_save_file').disabled = false;
|
||||
} */
|
||||
|
||||
break;
|
||||
|
||||
case 'save-end':
|
||||
$.alert("save complete for pathID ".concat(pathID, "!"));
|
||||
break;
|
||||
|
||||
default:
|
||||
throw new Error('Unexpected WebAppFind event type');
|
||||
}
|
||||
});
|
||||
/*
|
||||
window.postMessage({
|
||||
webappfind: {
|
||||
type: readMessage
|
||||
}
|
||||
}, window.location.origin === 'null'
|
||||
// Avoid "null" string error for `file:` protocol (even though
|
||||
// file protocol not currently supported by Firefox)
|
||||
? '*'
|
||||
: window.location.origin
|
||||
);
|
||||
*/
|
||||
|
||||
|
||||
buttons = [{
|
||||
id: 'webappfind_save',
|
||||
//
|
||||
icon: svgEditor.curConfig.extIconsPath + 'webappfind.png',
|
||||
type: 'app_menu',
|
||||
position: 4,
|
||||
// Before 0-based index position 4 (after the regular "Save Image (S)")
|
||||
events: {
|
||||
click: function click() {
|
||||
if (!pathID) {
|
||||
// Not ready yet as haven't received first payload
|
||||
return;
|
||||
}
|
||||
|
||||
window.postMessage({
|
||||
webappfind: {
|
||||
type: saveMessage,
|
||||
pathID: pathID,
|
||||
content: svgEditor.canvas.getSvgString()
|
||||
}
|
||||
}, window.location.origin === 'null' // Avoid "null" string error for `file:` protocol (even
|
||||
// though file protocol not currently supported by add-on)
|
||||
? '*' : window.location.origin);
|
||||
}
|
||||
}
|
||||
}];
|
||||
return _context.abrupt("return", {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'webappfind-icon.svg',
|
||||
buttons: strings.buttons.map(function (button, i) {
|
||||
return Object.assign(buttons[i], button);
|
||||
})
|
||||
});
|
||||
|
||||
case 9:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
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)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case 'view':
|
||||
// Populate the contents
|
||||
svgEditor.loadFromString(content);
|
||||
/* if ($('#tool_save_file')) {
|
||||
$('#tool_save_file').disabled = false;
|
||||
} */
|
||||
|
||||
break;
|
||||
|
||||
case 'save-end':
|
||||
$.alert(`save complete for pathID ${pathID}!`);
|
||||
break;
|
||||
|
||||
default:
|
||||
throw new Error('Unexpected WebAppFind event type');
|
||||
}
|
||||
});
|
||||
/*
|
||||
window.postMessage({
|
||||
webappfind: {
|
||||
type: readMessage
|
||||
}
|
||||
}, window.location.origin === 'null'
|
||||
// Avoid "null" string error for `file:` protocol (even though
|
||||
// file protocol not currently supported by Firefox)
|
||||
? '*'
|
||||
: window.location.origin
|
||||
);
|
||||
*/
|
||||
|
||||
const buttons = [{
|
||||
id: 'webappfind_save',
|
||||
//
|
||||
icon: svgEditor.curConfig.extIconsPath + 'webappfind.png',
|
||||
type: 'app_menu',
|
||||
position: 4,
|
||||
// Before 0-based index position 4 (after the regular "Save Image (S)")
|
||||
events: {
|
||||
click() {
|
||||
if (!pathID) {
|
||||
// Not ready yet as haven't received first payload
|
||||
return;
|
||||
}
|
||||
|
||||
window.postMessage({
|
||||
webappfind: {
|
||||
type: saveMessage,
|
||||
pathID,
|
||||
content: svgEditor.canvas.getSvgString()
|
||||
}
|
||||
}, window.location.origin === 'null' // Avoid "null" string error for `file:` protocol (even
|
||||
// though file protocol not currently supported by add-on)
|
||||
? '*' : window.location.origin);
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
|
||||
}
|
||||
}];
|
||||
return {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'webappfind-icon.svg',
|
||||
buttons: strings.buttons.map((button, i) => {
|
||||
return Object.assign(buttons[i], button);
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return extWebappfind;
|
||||
|
|
|
@ -1,55 +1,6 @@
|
|||
var svgEditorExtension_xdomain_messaging = (function () {
|
||||
'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),
|
||||
* 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 = {
|
||||
name: 'xdomain-messaging',
|
||||
init: function init() {
|
||||
var svgEditor = this;
|
||||
var svgCanvas = svgEditor.canvas;
|
||||
|
||||
init() {
|
||||
const svgEditor = this;
|
||||
const svgCanvas = svgEditor.canvas;
|
||||
|
||||
try {
|
||||
window.addEventListener('message', function (e) {
|
||||
// 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;
|
||||
}
|
||||
|
||||
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;
|
||||
} // 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
|
||||
// to configure
|
||||
|
||||
|
||||
var allowedOrigins = svgEditor.curConfig.allowedOrigins;
|
||||
const {
|
||||
allowedOrigins
|
||||
} = svgEditor.curConfig;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
var cbid = data.id;
|
||||
var name = data.name,
|
||||
args = data.args;
|
||||
var message = {
|
||||
const cbid = data.id;
|
||||
const {
|
||||
name,
|
||||
args
|
||||
} = data;
|
||||
const message = {
|
||||
namespace: 'svg-edit',
|
||||
id: cbid
|
||||
};
|
||||
|
@ -96,7 +52,7 @@ var svgEditorExtension_xdomain_messaging = (function () {
|
|||
try {
|
||||
// Now that we know the origin is trusted, we perform otherwise
|
||||
// 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) {
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return extXdomainMessaging;
|
||||
|
|
|
@ -20,12 +20,14 @@
|
|||
}
|
||||
|
||||
/* globals jQuery */
|
||||
var $ = jQuery;
|
||||
const $ = jQuery;
|
||||
$('a').click(function () {
|
||||
var href = this.href;
|
||||
var target = window.parent;
|
||||
const {
|
||||
href
|
||||
} = this;
|
||||
const target = window.parent;
|
||||
|
||||
var post = function post(message) {
|
||||
const post = message => {
|
||||
// Todo: Make origin customizable as set by opening window
|
||||
// Todo: If dropping IE9, avoid stringifying
|
||||
target.postMessage(JSON.stringify(_extends({
|
||||
|
@ -42,15 +44,15 @@
|
|||
});
|
||||
|
||||
if (!href.includes('.svg')) {
|
||||
var img = new Image();
|
||||
const img = new Image();
|
||||
img.addEventListener('load', function () {
|
||||
var canvas = document.createElement('canvas');
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = this.width;
|
||||
canvas.height = this.height; // load the raster image into the canvas
|
||||
|
||||
canvas.getContext('2d').drawImage(this, 0, 0); // retrieve the data: URL
|
||||
|
||||
var data;
|
||||
let data;
|
||||
|
||||
try {
|
||||
data = canvas.toDataURL();
|
||||
|
@ -63,8 +65,8 @@
|
|||
}
|
||||
|
||||
post({
|
||||
href: href,
|
||||
data: data
|
||||
href,
|
||||
data
|
||||
});
|
||||
});
|
||||
img.src = href;
|
||||
|
@ -72,8 +74,8 @@
|
|||
// Do ajax request for image's href value
|
||||
$.get(href, function (data) {
|
||||
post({
|
||||
href: href,
|
||||
data: data
|
||||
href,
|
||||
data
|
||||
});
|
||||
}, '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 () {
|
||||
'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.
|
||||
* @module RGBColor
|
||||
|
@ -102,7 +8,7 @@
|
|||
* @see https://www.phpied.com/rgb-color-parser-in-javascript/
|
||||
* @license MIT
|
||||
*/
|
||||
var simpleColors = {
|
||||
const simpleColors = {
|
||||
aliceblue: 'f0f8ff',
|
||||
antiquewhite: 'faebd7',
|
||||
aqua: '00ffff',
|
||||
|
@ -248,59 +154,43 @@
|
|||
yellowgreen: '9acd32'
|
||||
}; // array of color definition objects
|
||||
|
||||
var colorDefs = [{
|
||||
const colorDefs = [{
|
||||
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})\)$/,
|
||||
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++) {
|
||||
bits[_key - 1] = arguments[_key];
|
||||
}
|
||||
|
||||
return bits.map(function (b) {
|
||||
return Number.parseInt(b);
|
||||
});
|
||||
process(_, ...bits) {
|
||||
return bits.map(b => Number.parseInt(b));
|
||||
}
|
||||
|
||||
}, {
|
||||
re: /^(\w{2})(\w{2})(\w{2})$/,
|
||||
// re: /^(?<r>\w{2})(?<g>\w{2})(?<b>\w{2})$/,
|
||||
example: ['#00ff00', '336699'],
|
||||
process: function process(_) {
|
||||
for (var _len2 = arguments.length, bits = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
||||
bits[_key2 - 1] = arguments[_key2];
|
||||
}
|
||||
|
||||
return bits.map(function (b) {
|
||||
return Number.parseInt(b, 16);
|
||||
});
|
||||
process(_, ...bits) {
|
||||
return bits.map(b => Number.parseInt(b, 16));
|
||||
}
|
||||
|
||||
}, {
|
||||
re: /^(\w)(\w)(\w)$/,
|
||||
// re: /^(?<r>\w{1})(?<g>\w{1})(?<b>\w{1})$/,
|
||||
example: ['#fb0', 'f0f'],
|
||||
process: function process(_) {
|
||||
for (var _len3 = arguments.length, bits = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
|
||||
bits[_key3 - 1] = arguments[_key3];
|
||||
}
|
||||
|
||||
return bits.map(function (b) {
|
||||
return Number.parseInt(b + b, 16);
|
||||
});
|
||||
process(_, ...bits) {
|
||||
return bits.map(b => Number.parseInt(b + b, 16));
|
||||
}
|
||||
|
||||
}];
|
||||
/**
|
||||
* A class to parse color values.
|
||||
*/
|
||||
|
||||
var RGBColor = /*#__PURE__*/function () {
|
||||
class RGBColor {
|
||||
/**
|
||||
* @param {string} colorString
|
||||
*/
|
||||
function RGBColor(colorString) {
|
||||
var _this = this;
|
||||
|
||||
_classCallCheck(this, RGBColor);
|
||||
|
||||
constructor(colorString) {
|
||||
this.ok = false; // strip any leading #
|
||||
|
||||
if (colorString.charAt(0) === '#') {
|
||||
|
@ -318,24 +208,20 @@
|
|||
// search through the definitions to find a match
|
||||
|
||||
|
||||
colorDefs.forEach(function (_ref) {
|
||||
var re = _ref.re,
|
||||
processor = _ref.process;
|
||||
var bits = re.exec(colorString);
|
||||
colorDefs.forEach(({
|
||||
re,
|
||||
process: processor
|
||||
}) => {
|
||||
const bits = re.exec(colorString);
|
||||
|
||||
if (bits) {
|
||||
var _processor = processor.apply(void 0, _toConsumableArray(bits)),
|
||||
_processor2 = _slicedToArray(_processor, 3),
|
||||
r = _processor2[0],
|
||||
g = _processor2[1],
|
||||
b = _processor2[2];
|
||||
|
||||
Object.assign(_this, {
|
||||
r: r,
|
||||
g: g,
|
||||
b: b
|
||||
const [r, g, b] = processor(...bits);
|
||||
Object.assign(this, {
|
||||
r,
|
||||
g,
|
||||
b
|
||||
});
|
||||
_this.ok = true;
|
||||
this.ok = true;
|
||||
}
|
||||
}); // validate/cleanup values
|
||||
|
||||
|
@ -349,73 +235,75 @@
|
|||
*/
|
||||
|
||||
|
||||
_createClass(RGBColor, [{
|
||||
key: "toRGB",
|
||||
value: function toRGB() {
|
||||
return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
|
||||
toRGB() {
|
||||
return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
|
||||
}
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
|
||||
toHex() {
|
||||
let r = this.r.toString(16);
|
||||
let g = this.g.toString(16);
|
||||
let b = this.b.toString(16);
|
||||
|
||||
if (r.length === 1) {
|
||||
r = '0' + r;
|
||||
}
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: "toHex",
|
||||
value: function toHex() {
|
||||
var r = this.r.toString(16);
|
||||
var g = this.g.toString(16);
|
||||
var b = this.b.toString(16);
|
||||
|
||||
if (r.length === 1) {
|
||||
r = '0' + r;
|
||||
}
|
||||
|
||||
if (g.length === 1) {
|
||||
g = '0' + g;
|
||||
}
|
||||
|
||||
if (b.length === 1) {
|
||||
b = '0' + b;
|
||||
}
|
||||
|
||||
return '#' + r + g + b;
|
||||
if (g.length === 1) {
|
||||
g = '0' + g;
|
||||
}
|
||||
/**
|
||||
* Offers a bulleted list of help.
|
||||
* @returns {HTMLUListElement}
|
||||
*/
|
||||
|
||||
}], [{
|
||||
key: "getHelpXML",
|
||||
value: function getHelpXML() {
|
||||
var examples = [].concat(_toConsumableArray(colorDefs.flatMap(function (_ref2) {
|
||||
var example = _ref2.example;
|
||||
return example;
|
||||
})), _toConsumableArray(Object.keys(simpleColors)));
|
||||
var xml = document.createElement('ul');
|
||||
xml.setAttribute('id', 'rgbcolor-examples');
|
||||
xml.append.apply(xml, _toConsumableArray(examples.map(function (example) {
|
||||
try {
|
||||
var listItem = document.createElement('li');
|
||||
var listColor = new RGBColor(example);
|
||||
var 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.append('test');
|
||||
var listItemValue = " ".concat(example, " -> ").concat(listColor.toRGB(), " -> ").concat(listColor.toHex());
|
||||
listItem.append(exampleDiv, listItemValue);
|
||||
return listItem;
|
||||
} catch (e) {
|
||||
return '';
|
||||
}
|
||||
})));
|
||||
return xml;
|
||||
if (b.length === 1) {
|
||||
b = '0' + b;
|
||||
}
|
||||
}]);
|
||||
|
||||
return RGBColor;
|
||||
}();
|
||||
return '#' + r + g + b;
|
||||
}
|
||||
/**
|
||||
* Offers a bulleted list of help.
|
||||
* @returns {HTMLUListElement}
|
||||
*/
|
||||
|
||||
var jsPDFAPI = jsPDF.API;
|
||||
var pdfSvgAttr = {
|
||||
|
||||
static getHelpXML() {
|
||||
const examples = [// add regexps
|
||||
...colorDefs.flatMap(({
|
||||
example
|
||||
}) => {
|
||||
return example;
|
||||
}), // add type-in colors
|
||||
...Object.keys(simpleColors)];
|
||||
const xml = document.createElement('ul');
|
||||
xml.setAttribute('id', 'rgbcolor-examples');
|
||||
xml.append(...examples.map(example => {
|
||||
try {
|
||||
const listItem = document.createElement('li');
|
||||
const listColor = new RGBColor(example);
|
||||
const exampleDiv = document.createElement('div');
|
||||
exampleDiv.style.cssText = `
|
||||
margin: 3px;
|
||||
border: 1px solid black;
|
||||
background: ${listColor.toHex()};
|
||||
color: ${listColor.toHex()};`;
|
||||
exampleDiv.append('test');
|
||||
const listItemValue = ` ${example} -> ${listColor.toRGB()} -> ${listColor.toHex()}`;
|
||||
listItem.append(exampleDiv, listItemValue);
|
||||
return listItem;
|
||||
} catch (e) {
|
||||
return '';
|
||||
}
|
||||
}));
|
||||
return xml;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* globals jsPDF */
|
||||
const jsPDFAPI = jsPDF.API;
|
||||
const pdfSvgAttr = {
|
||||
// allowed attributes. all others are removed from the preview.
|
||||
g: ['stroke', 'fill', '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']
|
||||
};
|
||||
|
||||
var attributeIsNotEmpty = function attributeIsNotEmpty(node, attr) {
|
||||
var attVal = attr ? node.getAttribute(attr) : node;
|
||||
const attributeIsNotEmpty = function (node, attr) {
|
||||
const attVal = attr ? node.getAttribute(attr) : node;
|
||||
return attVal !== '' && attVal !== null && attVal !== 'null';
|
||||
};
|
||||
|
||||
var nodeIs = function nodeIs(node, possible) {
|
||||
const nodeIs = function (node, possible) {
|
||||
return possible.includes(node.tagName.toLowerCase());
|
||||
};
|
||||
|
||||
var removeAttributes = function removeAttributes(node, attributes) {
|
||||
var toRemove = [];
|
||||
const removeAttributes = function (node, attributes) {
|
||||
const toRemove = [];
|
||||
[].forEach.call(node.attributes, function (a) {
|
||||
if (attributeIsNotEmpty(a) && !attributes.includes(a.name.toLowerCase())) {
|
||||
toRemove.push(a.name);
|
||||
}
|
||||
});
|
||||
toRemove.forEach(function (a) {
|
||||
toRemove.forEach(a => {
|
||||
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) {
|
||||
var nums = node.getAttribute('points');
|
||||
const getLinesOptionsOfPoly = function (node) {
|
||||
let nums = node.getAttribute('points');
|
||||
nums = nums && nums.match(numRgx) || [];
|
||||
|
||||
if (nums && nums.length) {
|
||||
nums = nums.map(function (n) {
|
||||
return Number(n);
|
||||
});
|
||||
nums = nums.map(n => Number(n));
|
||||
|
||||
if (nums.length % 2) {
|
||||
nums.length--;
|
||||
|
@ -471,43 +357,40 @@
|
|||
return undefined;
|
||||
}
|
||||
|
||||
var _nums = nums,
|
||||
_nums2 = _slicedToArray(_nums, 2),
|
||||
x = _nums2[0],
|
||||
y = _nums2[1],
|
||||
lines = [];
|
||||
const [x, y] = nums,
|
||||
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]]);
|
||||
}
|
||||
|
||||
return {
|
||||
x: x,
|
||||
y: y,
|
||||
lines: lines
|
||||
x,
|
||||
y,
|
||||
lines
|
||||
};
|
||||
};
|
||||
|
||||
var getLinesOptionsOfPath = function getLinesOptionsOfPath(node) {
|
||||
var segList = node.pathSegList,
|
||||
n = segList.numberOfItems,
|
||||
opsList = [];
|
||||
var ops = {
|
||||
const getLinesOptionsOfPath = function (node) {
|
||||
const segList = node.pathSegList,
|
||||
n = segList.numberOfItems,
|
||||
opsList = [];
|
||||
let ops = {
|
||||
lines: []
|
||||
};
|
||||
var curr = {
|
||||
const curr = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
var reflectControl = {
|
||||
const reflectControl = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
|
||||
var toRelative = function toRelative(nums, relativeTo) {
|
||||
var re = [];
|
||||
const toRelative = function (nums, relativeTo) {
|
||||
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 + 1] = nums[i + 1] - relativeTo.y;
|
||||
}
|
||||
|
@ -515,22 +398,24 @@
|
|||
return re;
|
||||
};
|
||||
|
||||
var curveQToC = function curveQToC(nums) {
|
||||
var 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 curveQToC = function (nums) {
|
||||
const a = 2 / 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;
|
||||
};
|
||||
|
||||
for (var i = 0, letterPrev; i < n; i++) {
|
||||
var seg = segList.getItem(i);
|
||||
var x1 = seg.x1,
|
||||
y1 = seg.y1,
|
||||
x2 = seg.x2,
|
||||
y2 = seg.y2,
|
||||
x = seg.x,
|
||||
y = seg.y,
|
||||
letter = seg.pathSegTypeAsLetter;
|
||||
var isRelative = letter >= 'a'; // lowercase letter
|
||||
for (let i = 0, letterPrev; i < n; i++) {
|
||||
const seg = segList.getItem(i);
|
||||
const {
|
||||
x1,
|
||||
y1,
|
||||
x2,
|
||||
y2,
|
||||
x,
|
||||
y,
|
||||
pathSegTypeAsLetter: letter
|
||||
} = seg;
|
||||
const isRelative = letter >= 'a'; // lowercase letter
|
||||
|
||||
switch (letter) {
|
||||
case 'M':
|
||||
|
@ -604,7 +489,7 @@
|
|||
|
||||
case 'T':
|
||||
{
|
||||
var p1 = letterPrev && 'QqTt'.includes(letterPrev) ? reflectControl : {
|
||||
const p1 = letterPrev && 'QqTt'.includes(letterPrev) ? reflectControl : {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
|
@ -616,14 +501,13 @@
|
|||
|
||||
case 't':
|
||||
{
|
||||
var _p = letterPrev && 'QqTt'.includes(letterPrev) ? reflectControl : {
|
||||
const p1 = letterPrev && 'QqTt'.includes(letterPrev) ? reflectControl : {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
|
||||
ops.lines.push([_p.x, _p.y, x, y]);
|
||||
reflectControl.x = x - _p.x;
|
||||
reflectControl.y = y - _p.y;
|
||||
ops.lines.push([p1.x, p1.y, x, y]);
|
||||
reflectControl.x = x - p1.x;
|
||||
reflectControl.y = y - p1.y;
|
||||
break;
|
||||
}
|
||||
|
||||
|
@ -642,15 +526,15 @@
|
|||
case 'S':
|
||||
case 's':
|
||||
{
|
||||
var _p2 = letterPrev && 'CcSs'.includes(letterPrev) ? reflectControl : {
|
||||
const p1 = letterPrev && 'CcSs'.includes(letterPrev) ? reflectControl : {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
|
||||
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 {
|
||||
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;
|
||||
|
@ -708,21 +592,21 @@
|
|||
return opsList;
|
||||
};
|
||||
|
||||
var svgElementToPdf = function svgElementToPdf(element, pdf, options) {
|
||||
const svgElementToPdf = function (element, pdf, options) {
|
||||
// pdf is a jsPDF object
|
||||
// console.log('options =', options);
|
||||
var remove = options.removeInvalid === undefined ? false : options.removeInvalid;
|
||||
var k = options.scale === undefined ? 1.0 : options.scale;
|
||||
var colorMode = null;
|
||||
const remove = options.removeInvalid === undefined ? false : options.removeInvalid;
|
||||
const k = options.scale === undefined ? 1.0 : options.scale;
|
||||
let colorMode = null;
|
||||
[].forEach.call(element.children, function (node) {
|
||||
// console.log('passing: ', node);
|
||||
// let hasStrokeColor = false;
|
||||
var hasFillColor = false;
|
||||
var fillRGB;
|
||||
let hasFillColor = false;
|
||||
let fillRGB;
|
||||
colorMode = null;
|
||||
|
||||
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') {
|
||||
fillRGB = new RGBColor(fillColor);
|
||||
|
@ -745,10 +629,10 @@
|
|||
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') {
|
||||
var strokeRGB = new RGBColor(strokeColor);
|
||||
const strokeRGB = new RGBColor(strokeColor);
|
||||
|
||||
if (strokeRGB.ok) {
|
||||
// hasStrokeColor = true;
|
||||
|
@ -765,7 +649,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
var tag = node.tagName.toLowerCase();
|
||||
const tag = node.tagName.toLowerCase();
|
||||
|
||||
switch (tag) {
|
||||
case 'svg':
|
||||
|
@ -798,7 +682,7 @@
|
|||
case 'polygon':
|
||||
case 'polyline':
|
||||
{
|
||||
var linesOptions = getLinesOptionsOfPoly(node);
|
||||
const linesOptions = getLinesOptionsOfPoly(node);
|
||||
|
||||
if (linesOptions) {
|
||||
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':
|
||||
{
|
||||
if (colorMode) {
|
||||
var linesOptionsList = getLinesOptionsOfPath(node);
|
||||
const linesOptionsList = getLinesOptionsOfPath(node);
|
||||
|
||||
if (linesOptionsList.length > 0) {
|
||||
linesOptionsList.forEach(function (linesOptions) {
|
||||
pdf.lines(linesOptions.lines, k * linesOptions.x, k * linesOptions.y, [k, k], null, linesOptions.closed);
|
||||
}); // svg fill rule default is nonzero
|
||||
|
||||
var fillRule = node.getAttribute('fill-rule');
|
||||
const fillRule = node.getAttribute('fill-rule');
|
||||
|
||||
if (fillRule === 'evenodd') {
|
||||
// f* : fill using even-odd rule
|
||||
|
@ -873,7 +757,7 @@
|
|||
pdf.setTextColor(fillRGB.r, fillRGB.g, fillRGB.b);
|
||||
}
|
||||
|
||||
var fontType = '';
|
||||
let fontType = '';
|
||||
|
||||
if (node.hasAttribute('font-weight')) {
|
||||
if (node.getAttribute('font-weight') === 'bold') {
|
||||
|
@ -892,22 +776,22 @@
|
|||
}
|
||||
|
||||
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
|
||||
* @returns {Float}
|
||||
*/
|
||||
|
||||
var getWidth = function getWidth(elem) {
|
||||
var box;
|
||||
const getWidth = elem => {
|
||||
let box;
|
||||
|
||||
try {
|
||||
box = elem.getBBox(); // Firefox on MacOS will raise error here
|
||||
} catch (err) {
|
||||
// copy and append to body so that getBBox is available
|
||||
var nodeCopy = elem.cloneNode(true);
|
||||
var svg = elem.ownerSVGElement.cloneNode(false);
|
||||
const nodeCopy = elem.cloneNode(true);
|
||||
const svg = elem.ownerSVGElement.cloneNode(false);
|
||||
svg.appendChild(nodeCopy);
|
||||
document.body.appendChild(svg);
|
||||
|
||||
|
@ -926,7 +810,7 @@
|
|||
}; // TODO: use more accurate positioning!!
|
||||
|
||||
|
||||
var x,
|
||||
let x,
|
||||
y,
|
||||
xOffset = 0;
|
||||
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_af = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_af = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Verwyder Laag',
|
||||
move_down: 'Beweeg afbreek Down',
|
||||
"new": 'Nuwe Layer',
|
||||
new: 'Nuwe Layer',
|
||||
rename: 'Rename Layer',
|
||||
move_up: 'Beweeg afbreek Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_ar = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_ar = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'حذف طبقة',
|
||||
move_down: 'تحرك لأسفل طبقة',
|
||||
"new": 'طبقة جديدة',
|
||||
new: 'طبقة جديدة',
|
||||
rename: 'تسمية الطبقة',
|
||||
move_up: 'تحرك لأعلى طبقة',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_az = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_az = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Delete Layer',
|
||||
move_down: 'Move Layer Down',
|
||||
"new": 'New Layer',
|
||||
new: 'New Layer',
|
||||
rename: 'Rename Layer',
|
||||
move_up: 'Move Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_be = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_be = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Выдаліць слой',
|
||||
move_down: 'Перамясціць слой на',
|
||||
"new": 'Новы слой',
|
||||
new: 'Новы слой',
|
||||
rename: 'Перайменаваць Слой',
|
||||
move_up: 'Перамяшчэнне слоя да',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_bg = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_bg = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Изтриване на слой',
|
||||
move_down: 'Move слой надолу',
|
||||
"new": 'Нов слой',
|
||||
new: 'Нов слой',
|
||||
rename: 'Преименуване Layer',
|
||||
move_up: 'Move Up Layer',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_ca = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_ca = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Eliminar capa',
|
||||
move_down: 'Mou la capa de Down',
|
||||
"new": 'Nova capa',
|
||||
new: 'Nova capa',
|
||||
rename: 'Canvieu el nom de la capa',
|
||||
move_up: 'Mou la capa Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_cs = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_cs = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Odstranit vrstvu',
|
||||
move_down: 'Přesunout vrstvu níž',
|
||||
"new": 'Přidat vrstvu',
|
||||
new: 'Přidat vrstvu',
|
||||
rename: 'Přejmenovat vrstvu',
|
||||
move_up: 'Přesunout vrstvu výš',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_cy = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_cy = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Dileu Haen',
|
||||
move_down: 'Symud Haen i Lawr',
|
||||
"new": 'Haen Newydd',
|
||||
new: 'Haen Newydd',
|
||||
rename: 'Ail-enwi Haen',
|
||||
move_up: 'Symud Haen Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_da = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_da = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Slet Layer',
|
||||
move_down: 'Flyt lag ned',
|
||||
"new": 'New Layer',
|
||||
new: 'New Layer',
|
||||
rename: 'Omdøb Layer',
|
||||
move_up: 'Flyt Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_de = (function () {
|
|||
copy: 'Kopieren',
|
||||
paste: 'Einfügen',
|
||||
paste_in_place: 'Bei Originalposition einfügen',
|
||||
"delete": 'Löschen',
|
||||
delete: 'Löschen',
|
||||
group: 'Gruppieren',
|
||||
move_front: 'Nach ganz oben verschieben',
|
||||
move_up: 'Hochschieben',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_de = (function () {
|
|||
layers: 'Ebenen',
|
||||
del: 'Ebene löschen',
|
||||
move_down: 'Ebene nach unten verschieben',
|
||||
"new": 'Neue Ebene',
|
||||
new: 'Neue Ebene',
|
||||
rename: 'Ebene umbenennen',
|
||||
move_up: 'Ebene nach oben verschieben',
|
||||
dupe: 'Ebene duplizieren',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_el = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_el = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Διαγραφήστρώματος',
|
||||
move_down: 'Μετακίνηση Layer Down',
|
||||
"new": 'Νέο Layer',
|
||||
new: 'Νέο Layer',
|
||||
rename: 'Μετονομασία Layer',
|
||||
move_up: 'Μετακίνηση Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_en = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_en = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Delete Layer',
|
||||
move_down: 'Move Layer Down',
|
||||
"new": 'New Layer',
|
||||
new: 'New Layer',
|
||||
rename: 'Rename Layer',
|
||||
move_up: 'Move Layer Up',
|
||||
dupe: 'Duplicate Layer...',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_es = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_es = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Suprimir capa',
|
||||
move_down: 'Mover la capa hacia abajo',
|
||||
"new": 'Nueva capa',
|
||||
new: 'Nueva capa',
|
||||
rename: 'Renombrar capa',
|
||||
move_up: 'Mover la capa hacia arriba',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_et = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_et = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Kustuta Kiht',
|
||||
move_down: 'Liiguta kiht alla',
|
||||
"new": 'Uus kiht',
|
||||
new: 'Uus kiht',
|
||||
rename: 'Nimeta kiht',
|
||||
move_up: 'Liiguta kiht üles',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_fa = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'حذف',
|
||||
delete: 'حذف',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_fa = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'حذف لایه',
|
||||
move_down: 'انتقال لایه به پایین',
|
||||
"new": 'لایه جدید',
|
||||
new: 'لایه جدید',
|
||||
rename: 'تغییر نام لایه',
|
||||
move_up: 'انتقال لایه به بالا',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_fi = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_fi = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Poista Layer',
|
||||
move_down: 'Siirrä Layer alas',
|
||||
"new": 'New Layer',
|
||||
new: 'New Layer',
|
||||
rename: 'Nimeä Layer',
|
||||
move_up: 'Siirrä Layer',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_fr = (function () {
|
|||
copy: 'Copier',
|
||||
paste: 'Coller',
|
||||
paste_in_place: 'Coller sur place',
|
||||
"delete": 'Supprimer',
|
||||
delete: 'Supprimer',
|
||||
group: 'Grouper',
|
||||
move_front: 'Placer au premier plan',
|
||||
move_up: "Avancer d'un plan",
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_fr = (function () {
|
|||
layers: 'Calques',
|
||||
del: 'Supprimer le calque',
|
||||
move_down: 'Descendre le calque',
|
||||
"new": 'Nouveau calque',
|
||||
new: 'Nouveau calque',
|
||||
rename: 'Renommer le calque',
|
||||
move_up: 'Monter le calque',
|
||||
dupe: 'Dupliquer le calque',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_fy = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_fy = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Laach fuortsmite',
|
||||
move_down: 'Laach omleech bringe',
|
||||
"new": 'Nije laach',
|
||||
new: 'Nije laach',
|
||||
rename: 'Laach omneame',
|
||||
move_up: 'Laach omheech bringe',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_ga = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_ga = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Scrios Sraith',
|
||||
move_down: 'Bog Sraith Síos',
|
||||
"new": 'Sraith Nua',
|
||||
new: 'Sraith Nua',
|
||||
rename: 'Athainmnigh Sraith',
|
||||
move_up: 'Bog Sraith Suas',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_gl = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_gl = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Delete Layer',
|
||||
move_down: 'Move capa inferior',
|
||||
"new": 'New Layer',
|
||||
new: 'New Layer',
|
||||
rename: 'Rename Layer',
|
||||
move_up: 'Move Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_he = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_he = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'מחיקת שכבה',
|
||||
move_down: 'הזז למטה שכבה',
|
||||
"new": 'שכבהחדשה',
|
||||
new: 'שכבהחדשה',
|
||||
rename: 'שינוי שם שכבה',
|
||||
move_up: 'העבר שכבה Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_hi = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_hi = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'परत हटाएँ',
|
||||
move_down: 'परत नीचे ले जाएँ',
|
||||
"new": 'नई परत',
|
||||
new: 'नई परत',
|
||||
rename: 'परत का नाम बदलें',
|
||||
move_up: 'परत ऊपर ले जाएँ',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_hr = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_hr = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Brisanje sloja',
|
||||
move_down: 'Move Layer Down',
|
||||
"new": 'New Layer',
|
||||
new: 'New Layer',
|
||||
rename: 'Preimenuj Layer',
|
||||
move_up: 'Move Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_hu = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_hu = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Réteg törlése',
|
||||
move_down: 'Mozgatása lefelé',
|
||||
"new": 'Új réteg',
|
||||
new: 'Új réteg',
|
||||
rename: 'Réteg átnevezése',
|
||||
move_up: 'Move Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_hy = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_hy = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Delete Layer',
|
||||
move_down: 'Move Layer Down',
|
||||
"new": 'New Layer',
|
||||
new: 'New Layer',
|
||||
rename: 'Rename Layer',
|
||||
move_up: 'Move Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_id = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_id = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Hapus Layer',
|
||||
move_down: 'Pindahkan Layer Bawah',
|
||||
"new": 'New Layer',
|
||||
new: 'New Layer',
|
||||
rename: 'Rename Layer',
|
||||
move_up: 'Pindahkan Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_is = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_is = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Eyða Lag',
|
||||
move_down: 'Færa Layer Down',
|
||||
"new": 'Lag',
|
||||
new: 'Lag',
|
||||
rename: 'Endurnefna Lag',
|
||||
move_up: 'Færa Lag Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_it = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_it = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Elimina il livello',
|
||||
move_down: 'Sposta indietro il livello',
|
||||
"new": 'Nuovo livello',
|
||||
new: 'Nuovo livello',
|
||||
rename: 'Rinomina il livello',
|
||||
move_up: 'Sposta avanti il livello',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_ja = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_ja = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'レイヤの削除',
|
||||
move_down: 'レイヤを下へ移動',
|
||||
"new": '新規レイヤ',
|
||||
new: '新規レイヤ',
|
||||
rename: 'レイヤの名前を変更',
|
||||
move_up: 'レイヤを上へ移動',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_ko = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_ko = (function () {
|
|||
layers: 'Layers',
|
||||
del: '레이어 삭제',
|
||||
move_down: '레이어 아래로 이동',
|
||||
"new": '새 레이어',
|
||||
new: '새 레이어',
|
||||
rename: '레이어 이름 바꾸기',
|
||||
move_up: '레이어 위로 이동',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_lt = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_lt = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Ištrinti Layer',
|
||||
move_down: 'Perkelti sluoksnį Žemyn',
|
||||
"new": 'New Layer',
|
||||
new: 'New Layer',
|
||||
rename: 'Pervadinti sluoksnį',
|
||||
move_up: 'Perkelti sluoksnį Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_lv = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_lv = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Dzēst Layer',
|
||||
move_down: 'Pārvietot slāni uz leju',
|
||||
"new": 'New Layer',
|
||||
new: 'New Layer',
|
||||
rename: 'Pārdēvēt Layer',
|
||||
move_up: 'Pārvietot slāni uz augšu',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_mk = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_mk = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Избриши Слој',
|
||||
move_down: 'Премести слој долу',
|
||||
"new": 'Нов слој',
|
||||
new: 'Нов слој',
|
||||
rename: 'Преименувај слој',
|
||||
move_up: 'Премести слој горе',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_ms = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_ms = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Padam Layer',
|
||||
move_down: 'Pindah Layer Bawah',
|
||||
"new": 'New Layer',
|
||||
new: 'New Layer',
|
||||
rename: 'Rename Layer',
|
||||
move_up: 'Pindah Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_mt = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_mt = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Ħassar Layer',
|
||||
move_down: 'Move Layer Down',
|
||||
"new": 'New Layer',
|
||||
new: 'New Layer',
|
||||
rename: 'Semmi mill-ġdid Layer',
|
||||
move_up: 'Move Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_nl = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_nl = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Delete laag',
|
||||
move_down: 'Beweeg laag omlaag',
|
||||
"new": 'Nieuwe laag',
|
||||
new: 'Nieuwe laag',
|
||||
rename: 'Hernoem laag',
|
||||
move_up: 'Beweeg laag omhoog',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_no = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_no = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Slett laget',
|
||||
move_down: 'Flytt laget ned',
|
||||
"new": 'Nytt lag',
|
||||
new: 'Nytt lag',
|
||||
rename: 'Rename Layer',
|
||||
move_up: 'Flytt Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -143,7 +143,7 @@ var svgEditorLang_pl = (function () {
|
|||
copy: 'Kopiuj',
|
||||
paste: 'Wklej',
|
||||
paste_in_place: 'Wklej w miejscu',
|
||||
"delete": 'Usuń',
|
||||
delete: 'Usuń',
|
||||
group: 'Grupuj',
|
||||
move_front: 'Przenieś do przodu',
|
||||
move_up: 'Przenieś warstwę w górę',
|
||||
|
@ -155,7 +155,7 @@ var svgEditorLang_pl = (function () {
|
|||
layers: 'Warstwy',
|
||||
del: 'Usuń warstwę',
|
||||
move_down: 'Przenieś warstwę w dół',
|
||||
"new": 'Nowa warstwa',
|
||||
new: 'Nowa warstwa',
|
||||
rename: 'Zmień nazwę warstwy',
|
||||
move_up: 'Przenieś warstwę w górę',
|
||||
dupe: 'Duplikuj warstwę',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_pt_BR = (function () {
|
|||
copy: 'Copiar',
|
||||
paste: 'Colar',
|
||||
paste_in_place: 'Colar no mesmo local',
|
||||
"delete": 'Deletar',
|
||||
delete: 'Deletar',
|
||||
group: 'Agrupar',
|
||||
move_front: 'Trazer para Frente',
|
||||
move_up: 'Avançar',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_pt_BR = (function () {
|
|||
layers: 'Camadas',
|
||||
del: 'Deletar Camada',
|
||||
move_down: 'Enviar Camada para Trás',
|
||||
"new": 'Nova Camada',
|
||||
new: 'Nova Camada',
|
||||
rename: 'Renomear Camada',
|
||||
move_up: 'Trazer Camada para Frente',
|
||||
dupe: 'Duplicar Camada',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_pt_PT = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_pt_PT = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Delete Layer',
|
||||
move_down: 'Move camada para baixo',
|
||||
"new": 'New Layer',
|
||||
new: 'New Layer',
|
||||
rename: 'Rename Layer',
|
||||
move_up: 'Move Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_ro = (function () {
|
|||
copy: 'Copiere',
|
||||
paste: 'Reproducere',
|
||||
paste_in_place: 'Reproducere pe loc',
|
||||
"delete": 'Ştergere',
|
||||
delete: 'Ştergere',
|
||||
group: 'Group',
|
||||
move_front: 'Pune in faţa',
|
||||
move_up: 'Pune in spate',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_ro = (function () {
|
|||
layers: 'Straturi',
|
||||
del: 'Ştergeţi Strat',
|
||||
move_down: 'Mutare Strat în Jos',
|
||||
"new": 'Strat Nou',
|
||||
new: 'Strat Nou',
|
||||
rename: 'Redenumiţi Stratul',
|
||||
move_up: 'Mutare Strat în Sus',
|
||||
dupe: 'Duplicaţi Stratul',
|
||||
|
|
|
@ -154,7 +154,7 @@ var svgEditorLang_ru = (function () {
|
|||
layers: 'Слои',
|
||||
del: 'Удалить слой',
|
||||
move_down: 'Опустить слой',
|
||||
"new": 'Создать слой',
|
||||
new: 'Создать слой',
|
||||
rename: 'Переименовать Слой',
|
||||
move_up: 'Поднять слой',
|
||||
dupe: 'Копировать слой',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_sk = (function () {
|
|||
copy: 'Kópia',
|
||||
paste: 'Vloženie',
|
||||
paste_in_place: 'Vloženie na pôvodnom mieste',
|
||||
"delete": 'Zmazanie',
|
||||
delete: 'Zmazanie',
|
||||
group: 'Group',
|
||||
move_front: 'Vysuň navrch',
|
||||
move_up: 'Vysuň vpred',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_sk = (function () {
|
|||
layers: 'Vrstvy',
|
||||
del: 'Odstrániť vrstvu',
|
||||
move_down: 'Presunúť vrstvu dole',
|
||||
"new": 'Nová vrstva',
|
||||
new: 'Nová vrstva',
|
||||
rename: 'Premenovať vrstvu',
|
||||
move_up: 'Presunúť vrstvu hore',
|
||||
dupe: 'Zduplikovať vrstvu',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_sl = (function () {
|
|||
copy: 'Kopiraj',
|
||||
paste: 'Prilepi',
|
||||
paste_in_place: 'Prilepi na mesto',
|
||||
"delete": 'Izbriši',
|
||||
delete: 'Izbriši',
|
||||
group: 'Združi',
|
||||
move_front: 'Postavi v ospredje',
|
||||
move_up: 'Pomakni naporej',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_sl = (function () {
|
|||
layers: 'Sloji',
|
||||
del: 'Izbriši sloj',
|
||||
move_down: 'Premakni navzdol',
|
||||
"new": 'Nov sloj',
|
||||
new: 'Nov sloj',
|
||||
rename: 'Preimenuj sloj',
|
||||
move_up: 'Premakni navzgor',
|
||||
dupe: 'Podvoji sloj',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_sq = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_sq = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Delete Layer',
|
||||
move_down: 'Move Down Layer',
|
||||
"new": 'Re Shtresa',
|
||||
new: 'Re Shtresa',
|
||||
rename: 'Rename Layer',
|
||||
move_up: 'Move Up Layer',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_sr = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_sr = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Избриши слој',
|
||||
move_down: 'Помери слој доле',
|
||||
"new": 'Нови слој',
|
||||
new: 'Нови слој',
|
||||
rename: 'Преименуј слој',
|
||||
move_up: 'Помери слој Горе',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_sv = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_sv = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Radera Layer',
|
||||
move_down: 'Flytta Layer Down',
|
||||
"new": 'New Layer',
|
||||
new: 'New Layer',
|
||||
rename: 'Byt namn på Layer',
|
||||
move_up: 'Flytta Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_sw = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_sw = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Delete Layer',
|
||||
move_down: 'Move Layer Down',
|
||||
"new": 'Mpya Layer',
|
||||
new: 'Mpya Layer',
|
||||
rename: 'Rename Layer',
|
||||
move_up: 'Move Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_test = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Move Layer Up',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_test = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Delete Layer',
|
||||
move_down: 'Move Layer Down',
|
||||
"new": 'New Layer',
|
||||
new: 'New Layer',
|
||||
rename: 'Rename Layer',
|
||||
move_up: 'Move Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_th = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_th = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Delete Layer',
|
||||
move_down: 'ย้าย Layer ลง',
|
||||
"new": 'Layer ใหม่',
|
||||
new: 'Layer ใหม่',
|
||||
rename: 'Layer เปลี่ยนชื่อ',
|
||||
move_up: 'ย้าย Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_tl = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_tl = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Tanggalin Layer',
|
||||
move_down: 'Ilipat Layer Down',
|
||||
"new": 'Bagong Layer',
|
||||
new: 'Bagong Layer',
|
||||
rename: 'Palitan ang pangalan ng Layer',
|
||||
move_up: 'Ilipat Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_tr = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_tr = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Delete Layer',
|
||||
move_down: 'Katman Aşağı Taşı',
|
||||
"new": 'Yeni Katman',
|
||||
new: 'Yeni Katman',
|
||||
rename: 'Rename Katman',
|
||||
move_up: 'Up Katman Taşı',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_uk = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_uk = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Видалити шар',
|
||||
move_down: 'Перемістити шар на',
|
||||
"new": 'Новий шар',
|
||||
new: 'Новий шар',
|
||||
rename: 'Перейменувати Шар',
|
||||
move_up: 'Переміщення шару до',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_vi = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_vi = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'Xoá Layer',
|
||||
move_down: 'Move Layer Down',
|
||||
"new": 'New Layer',
|
||||
new: 'New Layer',
|
||||
rename: 'Đổi tên Layer',
|
||||
move_up: 'Di chuyển Layer Up',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_yi = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_yi = (function () {
|
|||
layers: 'Layers',
|
||||
del: 'ויסמעקן לייַער',
|
||||
move_down: 'קער לייַער דאָוון',
|
||||
"new": 'ניו לייַער',
|
||||
new: 'ניו לייַער',
|
||||
rename: 'רענאַמע לייַער',
|
||||
move_up: 'באַוועגן לייַער אַרויף',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_zh_CN = (function () {
|
|||
copy: '复制',
|
||||
paste: '粘贴',
|
||||
paste_in_place: '粘贴到原位置',
|
||||
"delete": '删除',
|
||||
delete: '删除',
|
||||
group: '组合',
|
||||
move_front: '移至顶部',
|
||||
move_up: '向上移动',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_zh_CN = (function () {
|
|||
layers: '图层',
|
||||
del: '删除图层',
|
||||
move_down: '向下移动图层',
|
||||
"new": '新建图层',
|
||||
new: '新建图层',
|
||||
rename: '重命名图层',
|
||||
move_up: '向上移动图层',
|
||||
dupe: '复制图层',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_zh_HK = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_zh_HK = (function () {
|
|||
layers: 'Layers',
|
||||
del: '删除层',
|
||||
move_down: '层向下移动',
|
||||
"new": '新层',
|
||||
new: '新层',
|
||||
rename: '重命名层',
|
||||
move_up: '移动层最多',
|
||||
dupe: 'Duplicate Layer',
|
||||
|
|
|
@ -142,7 +142,7 @@ var svgEditorLang_zh_TW = (function () {
|
|||
copy: 'Copy',
|
||||
paste: 'Paste',
|
||||
paste_in_place: 'Paste in Place',
|
||||
"delete": 'Delete',
|
||||
delete: 'Delete',
|
||||
group: 'Group',
|
||||
move_front: 'Bring to Front',
|
||||
move_up: 'Bring Forward',
|
||||
|
@ -154,7 +154,7 @@ var svgEditorLang_zh_TW = (function () {
|
|||
layers: 'Layers',
|
||||
del: '刪除圖層',
|
||||
move_down: '向下移動圖層',
|
||||
"new": '新增圖層',
|
||||
new: '新增圖層',
|
||||
rename: '重新命名圖層',
|
||||
move_up: '向上移動圖層',
|
||||
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