Starting Branch to simplify Build process
4915
dist/canvg.js
vendored
165
dist/dom-polyfill.js
vendored
@@ -1,165 +0,0 @@
|
||||
(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
|
||||
|
||||
/**
|
||||
* @module DOMPolyfill
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {Node} o
|
||||
* @param {module:DOMPolyfill~ParentNode|module:DOMPolyfill~ChildNode} ps
|
||||
* @returns {void}
|
||||
*/
|
||||
function mixin(o, ps) {
|
||||
if (!o) return;
|
||||
Object.keys(ps).forEach(function (p) {
|
||||
if (p in o || p in o.prototype) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
Object.defineProperty(o.prototype, p, Object.getOwnPropertyDescriptor(ps, p));
|
||||
} catch (ex) {
|
||||
// Throws in IE8; just copy it
|
||||
o[p] = ps[p];
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @param {Node[]} nodes
|
||||
* @returns {Node}
|
||||
*/
|
||||
|
||||
|
||||
function convertNodesIntoANode(nodes) {
|
||||
nodes = nodes.map(function (node) {
|
||||
var isNode = node && _typeof(node) === 'object' && 'nodeType' in node;
|
||||
return isNode ? node : document.createTextNode(node);
|
||||
});
|
||||
|
||||
if (nodes.length === 1) {
|
||||
return nodes[0];
|
||||
}
|
||||
|
||||
var node = document.createDocumentFragment();
|
||||
nodes.forEach(function (n) {
|
||||
// // eslint-disable-next-line unicorn/prefer-node-append
|
||||
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];
|
||||
}
|
||||
|
||||
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];
|
||||
}
|
||||
|
||||
nodes = convertNodesIntoANode(nodes); // // eslint-disable-next-line unicorn/prefer-node-append
|
||||
|
||||
this.appendChild(nodes);
|
||||
}
|
||||
};
|
||||
mixin(Document || HTMLDocument, ParentNode); // HTMLDocument for IE8
|
||||
|
||||
mixin(DocumentFragment, ParentNode);
|
||||
mixin(Element, ParentNode); // Mixin ChildNode
|
||||
// https://dom.spec.whatwg.org/#interface-childnode
|
||||
|
||||
var ChildNode = {
|
||||
before: function before() {
|
||||
var 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];
|
||||
}
|
||||
|
||||
while (nodes.includes(viablePreviousSibling)) {
|
||||
viablePreviousSibling = viablePreviousSibling.previousSibling;
|
||||
}
|
||||
|
||||
var 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];
|
||||
}
|
||||
|
||||
while (nodes.includes(viableNextSibling)) {
|
||||
viableNextSibling = viableNextSibling.nextSibling;
|
||||
}
|
||||
|
||||
var 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];
|
||||
}
|
||||
|
||||
while (nodes.includes(viableNextSibling)) {
|
||||
viableNextSibling = viableNextSibling.nextSibling;
|
||||
}
|
||||
|
||||
var node = convertNodesIntoANode(nodes);
|
||||
|
||||
if (this.parentNode === parent) {
|
||||
parent.replaceChild(node, this);
|
||||
} else {
|
||||
// eslint-disable-next-line unicorn/prefer-modern-dom-apis
|
||||
parent.insertBefore(node, viableNextSibling);
|
||||
}
|
||||
},
|
||||
remove: function remove() {
|
||||
if (!this.parentNode) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.parentNode.removeChild(this); // eslint-disable-line unicorn/prefer-node-remove
|
||||
}
|
||||
};
|
||||
mixin(DocumentType, ChildNode);
|
||||
mixin(Element, ChildNode);
|
||||
mixin(CharacterData, ChildNode);
|
||||
|
||||
}());
|
||||
BIN
dist/extensions/closepath.png
vendored
Normal file
|
After Width: | Height: | Size: 7.8 KiB |
41
dist/extensions/closepath_icons.svg
vendored
Normal file
@@ -0,0 +1,41 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="tool_closepath">
|
||||
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g>
|
||||
<title>Layer 1</title>
|
||||
<path stroke="#000" stroke-width="15" fill="#ffc8c8" d="m121.5,40l-84,106l27,115l166,2l29,-111"/>
|
||||
<line x1="240" y1="136" x2="169.5" y2="74" stroke="#A00" stroke-width="25" fill="none"/>
|
||||
<path stroke="none" fill ="#A00" d="m158,65l31,74l-3,-50l51,-3z"/>
|
||||
<g stroke-width="15" stroke="#00f" fill="#0ff">
|
||||
<circle r="30" cy="41" cx="123"/>
|
||||
<circle r="30" cy="146" cx="40"/>
|
||||
<circle r="30" cy="260" cx="69"/>
|
||||
<circle r="30" cy="260" cx="228"/>
|
||||
<circle r="30" cy="148" cx="260"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="tool_openpath">
|
||||
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g>
|
||||
<title>Layer 1</title>
|
||||
<path stroke="#000" stroke-width="15" fill="#ffc8c8" d="m123.5,38l-84,106l27,115l166,2l29,-111"/>
|
||||
<line x1="276.5" y1="153" x2="108.5" y2="24" stroke="#000" stroke-width="10" fill="none"/>
|
||||
<g stroke-width="15" stroke="#00f" fill="#0ff">
|
||||
<circle r="30" cy="41" cx="123"/>
|
||||
<circle r="30" cy="146" cx="40"/>
|
||||
<circle r="30" cy="260" cx="69"/>
|
||||
<circle r="30" cy="260" cx="228"/>
|
||||
<circle r="30" cy="148" cx="260"/>
|
||||
</g>
|
||||
<g stroke="#A00" stroke-width="15" fill="none">
|
||||
<line x1="168" y1="24" x2="210" y2="150"/>
|
||||
<line x1="210" y1="24" x2="168" y2="150"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="svg_eof"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
696
dist/extensions/ext-arrows.js
vendored
@@ -1,398 +1,326 @@
|
||||
var svgEditorExtension_arrows = (function () {
|
||||
'use strict';
|
||||
/**
|
||||
* @file ext-arrows.js
|
||||
*
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
|
||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
export default {
|
||||
name: 'arrows',
|
||||
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}
|
||||
*/
|
||||
function setArrowNonce (win, n) {
|
||||
randomizeIds = true;
|
||||
arrowprefix = prefix + n + '_';
|
||||
pathdata.fw.id = arrowprefix + 'fw';
|
||||
pathdata.bk.id = arrowprefix + 'bk';
|
||||
}
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
/**
|
||||
* @param {Window} win
|
||||
* @returns {void}
|
||||
*/
|
||||
function unsetArrowNonce (win) {
|
||||
randomizeIds = false;
|
||||
arrowprefix = prefix;
|
||||
pathdata.fw.id = arrowprefix + 'fw';
|
||||
pathdata.bk.id = arrowprefix + 'bk';
|
||||
}
|
||||
|
||||
svgCanvas.bind('setnonce', setArrowNonce);
|
||||
svgCanvas.bind('unsetnonce', unsetArrowNonce);
|
||||
|
||||
if (randomizeIds) {
|
||||
arrowprefix = prefix + nonce + '_';
|
||||
} else {
|
||||
Promise.resolve(value).then(_next, _throw);
|
||||
arrowprefix = prefix;
|
||||
}
|
||||
}
|
||||
|
||||
function _asyncToGenerator(fn) {
|
||||
return function () {
|
||||
var self = this,
|
||||
args = arguments;
|
||||
return new Promise(function (resolve, reject) {
|
||||
var gen = fn.apply(self, args);
|
||||
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'}
|
||||
};
|
||||
|
||||
function _next(value) {
|
||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
||||
/**
|
||||
* Gets linked element.
|
||||
* @param {Element} elem
|
||||
* @param {string} attr
|
||||
* @returns {Element}
|
||||
*/
|
||||
function getLinked (elem, attr) {
|
||||
const str = elem.getAttribute(attr);
|
||||
if (!str) { return null; }
|
||||
const 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);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {boolean} on
|
||||
* @returns {void}
|
||||
*/
|
||||
function showPanel (on) {
|
||||
$('#arrow_panel').toggle(on);
|
||||
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 (mid.includes('bk')) {
|
||||
val = 'mid_bk';
|
||||
}
|
||||
}
|
||||
|
||||
function _throw(err) {
|
||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
||||
if (!start && !mid && !end) {
|
||||
val = 'none';
|
||||
}
|
||||
|
||||
_next(undefined);
|
||||
$('#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;
|
||||
}
|
||||
});
|
||||
|
||||
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;
|
||||
$.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);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @file ext-arrows.js
|
||||
*
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
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);
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
||||
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;
|
||||
$.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
|
||||
|
||||
|
||||
var dir = 'fw';
|
||||
|
||||
if (type === 'mid_bk') {
|
||||
type = 'mid';
|
||||
dir = 'bk';
|
||||
} else if (type === 'both') {
|
||||
addMarker('bk', type);
|
||||
svgCanvas.changeSelectedAttribute('marker-start', 'url(#' + pathdata.bk.id + ')');
|
||||
type = 'end';
|
||||
dir = 'fw';
|
||||
} else if (type === 'start') {
|
||||
dir = 'bk';
|
||||
}
|
||||
|
||||
addMarker(dir, type);
|
||||
svgCanvas.changeSelectedAttribute('marker-' + type, 'url(#' + pathdata[dir].id + ')');
|
||||
svgCanvas.call('changed', selElems);
|
||||
};
|
||||
|
||||
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];
|
||||
|
||||
if (type === 'mid') {
|
||||
data.refx = 5;
|
||||
}
|
||||
|
||||
var marker = svgCanvas.getElem(id);
|
||||
|
||||
if (!marker) {
|
||||
marker = addElem({
|
||||
element: 'marker',
|
||||
attr: {
|
||||
viewBox: '0 0 10 10',
|
||||
id: id,
|
||||
refY: 5,
|
||||
markerUnits: 'strokeWidth',
|
||||
markerWidth: 5,
|
||||
markerHeight: 5,
|
||||
orient: 'auto',
|
||||
style: 'pointer-events:none' // Currently needed for Opera
|
||||
|
||||
}
|
||||
});
|
||||
var arrow = addElem({
|
||||
element: 'path',
|
||||
attr: {
|
||||
d: data.d,
|
||||
fill: '#000000'
|
||||
}
|
||||
});
|
||||
marker.append(arrow);
|
||||
svgCanvas.findDefs().append(marker);
|
||||
}
|
||||
|
||||
marker.setAttribute('refX', data.refx);
|
||||
return marker;
|
||||
};
|
||||
|
||||
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);
|
||||
|
||||
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 (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();
|
||||
}
|
||||
}
|
||||
}, _callee2);
|
||||
}))();
|
||||
}
|
||||
};
|
||||
|
||||
return extArrows;
|
||||
|
||||
}());
|
||||
};
|
||||
|
||||
2668
dist/extensions/ext-closepath.js
vendored
1323
dist/extensions/ext-connector.js
vendored
301
dist/extensions/ext-eyedropper.js
vendored
@@ -1,202 +1,115 @@
|
||||
var svgEditorExtension_eyedropper = (function () {
|
||||
'use strict';
|
||||
/**
|
||||
* @file ext-eyedropper.js
|
||||
*
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2010 Jeff Schiller
|
||||
*
|
||||
*/
|
||||
|
||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
export default {
|
||||
name: 'eyedropper',
|
||||
async init (S) {
|
||||
const strings = await S.importLocale();
|
||||
const svgEditor = this;
|
||||
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}
|
||||
*/
|
||||
function getStyle (opts) {
|
||||
// if we are in eyedropper mode, we don't want to disable the eye-dropper tool
|
||||
const mode = svgCanvas.getMode();
|
||||
if (mode === 'eyedropper') { return; }
|
||||
|
||||
const tool = $('#tool_eyedropper');
|
||||
// enable-eye-dropper if one element is selected
|
||||
let elem = null;
|
||||
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
|
||||
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 (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);
|
||||
const buttons = [
|
||||
{
|
||||
id: 'tool_eyedropper',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'eyedropper.png',
|
||||
type: 'mode',
|
||||
events: {
|
||||
click () {
|
||||
svgCanvas.setMode('eyedropper');
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
function _throw(err) {
|
||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
||||
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,
|
||||
|
||||
mouseDown (opts) {
|
||||
const mode = svgCanvas.getMode();
|
||||
if (mode === 'eyedropper') {
|
||||
const e = opts.event;
|
||||
const {target} = e;
|
||||
if (!['svg', 'g', 'use'].includes(target.nodeName)) {
|
||||
const changes = {};
|
||||
|
||||
const change = function (elem, attrname, newvalue) {
|
||||
changes[attrname] = elem.getAttribute(attrname);
|
||||
elem.setAttribute(attrname, newvalue);
|
||||
};
|
||||
|
||||
if (currentStyle.fillPaint) { change(target, 'fill', currentStyle.fillPaint); }
|
||||
if (currentStyle.fillOpacity) { change(target, 'fill-opacity', currentStyle.fillOpacity); }
|
||||
if (currentStyle.strokePaint) { change(target, 'stroke', currentStyle.strokePaint); }
|
||||
if (currentStyle.strokeOpacity) { change(target, 'stroke-opacity', currentStyle.strokeOpacity); }
|
||||
if (currentStyle.strokeWidth) { change(target, 'stroke-width', currentStyle.strokeWidth); }
|
||||
if (currentStyle.strokeDashArray) { change(target, 'stroke-dasharray', currentStyle.strokeDashArray); }
|
||||
if (currentStyle.opacity) { change(target, 'opacity', currentStyle.opacity); }
|
||||
if (currentStyle.strokeLinecap) { change(target, 'stroke-linecap', currentStyle.strokeLinecap); }
|
||||
if (currentStyle.strokeLinejoin) { change(target, 'stroke-linejoin', currentStyle.strokeLinejoin); }
|
||||
|
||||
addToHistory(new ChangeElementCommand(target, changes));
|
||||
}
|
||||
}
|
||||
|
||||
_next(undefined);
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @file ext-eyedropper.js
|
||||
*
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2010 Jeff Schiller
|
||||
*
|
||||
*/
|
||||
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();
|
||||
|
||||
if (mode === 'eyedropper') {
|
||||
return;
|
||||
}
|
||||
|
||||
var tool = $('#tool_eyedropper'); // enable-eye-dropper if one element is selected
|
||||
|
||||
var elem = null;
|
||||
|
||||
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
|
||||
|
||||
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');
|
||||
}
|
||||
};
|
||||
|
||||
_context.next = 3;
|
||||
return S.importLocale();
|
||||
|
||||
case 3:
|
||||
strings = _context.sent;
|
||||
svgEditor = _this;
|
||||
$ = S.$, ChangeElementCommand = S.ChangeElementCommand, svgCanvas = svgEditor.canvas, addToHistory = function addToHistory(cmd) {
|
||||
svgCanvas.undoMgr.addCommandToHistory(cmd);
|
||||
}, currentStyle = {
|
||||
fillPaint: 'red',
|
||||
fillOpacity: 1.0,
|
||||
strokePaint: 'black',
|
||||
strokeOpacity: 1.0,
|
||||
strokeWidth: 5,
|
||||
strokeDashArray: null,
|
||||
opacity: 1.0,
|
||||
strokeLinecap: 'butt',
|
||||
strokeLinejoin: 'miter'
|
||||
};
|
||||
/**
|
||||
*
|
||||
* @param {module:svgcanvas.SvgCanvas#event:ext_selectedChanged|module:svgcanvas.SvgCanvas#event:ext_elementChanged} opts
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
buttons = [{
|
||||
id: 'tool_eyedropper',
|
||||
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();
|
||||
|
||||
if (mode === 'eyedropper') {
|
||||
var e = opts.event;
|
||||
var target = e.target;
|
||||
|
||||
if (!['svg', 'g', 'use'].includes(target.nodeName)) {
|
||||
var changes = {};
|
||||
|
||||
var change = function change(elem, attrname, newvalue) {
|
||||
changes[attrname] = elem.getAttribute(attrname);
|
||||
elem.setAttribute(attrname, newvalue);
|
||||
};
|
||||
|
||||
if (currentStyle.fillPaint) {
|
||||
change(target, 'fill', currentStyle.fillPaint);
|
||||
}
|
||||
|
||||
if (currentStyle.fillOpacity) {
|
||||
change(target, 'fill-opacity', currentStyle.fillOpacity);
|
||||
}
|
||||
|
||||
if (currentStyle.strokePaint) {
|
||||
change(target, 'stroke', currentStyle.strokePaint);
|
||||
}
|
||||
|
||||
if (currentStyle.strokeOpacity) {
|
||||
change(target, 'stroke-opacity', currentStyle.strokeOpacity);
|
||||
}
|
||||
|
||||
if (currentStyle.strokeWidth) {
|
||||
change(target, 'stroke-width', currentStyle.strokeWidth);
|
||||
}
|
||||
|
||||
if (currentStyle.strokeDashArray) {
|
||||
change(target, 'stroke-dasharray', currentStyle.strokeDashArray);
|
||||
}
|
||||
|
||||
if (currentStyle.opacity) {
|
||||
change(target, 'opacity', currentStyle.opacity);
|
||||
}
|
||||
|
||||
if (currentStyle.strokeLinecap) {
|
||||
change(target, 'stroke-linecap', currentStyle.strokeLinecap);
|
||||
}
|
||||
|
||||
if (currentStyle.strokeLinejoin) {
|
||||
change(target, 'stroke-linejoin', currentStyle.strokeLinejoin);
|
||||
}
|
||||
|
||||
addToHistory(new ChangeElementCommand(target, changes));
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
case 8:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
}
|
||||
};
|
||||
|
||||
return extEyedropper;
|
||||
|
||||
}());
|
||||
};
|
||||
|
||||
621
dist/extensions/ext-foreignobject.js
vendored
@@ -1,363 +1,280 @@
|
||||
var svgEditorExtension_foreignobject = (function () {
|
||||
'use strict';
|
||||
/**
|
||||
* @file ext-foreignobject.js
|
||||
*
|
||||
* @license Apache-2.0
|
||||
*
|
||||
* @copyright 2010 Jacques Distler, 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
|
||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
export default {
|
||||
name: 'foreignobject',
|
||||
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();
|
||||
|
||||
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}
|
||||
*/
|
||||
function showPanel (on) {
|
||||
let 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);
|
||||
}
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
Promise.resolve(value).then(_next, _throw);
|
||||
/**
|
||||
* @param {boolean} on
|
||||
* @returns {void}
|
||||
*/
|
||||
function toggleSourceButtons (on) {
|
||||
$('#tool_source_save, #tool_source_cancel').toggle(!on);
|
||||
$('#foreign_save, #foreign_cancel').toggle(on);
|
||||
}
|
||||
}
|
||||
|
||||
function _asyncToGenerator(fn) {
|
||||
return function () {
|
||||
var self = this,
|
||||
args = arguments;
|
||||
return new Promise(function (resolve, reject) {
|
||||
var gen = fn.apply(self, args);
|
||||
let selElems,
|
||||
started,
|
||||
newFO,
|
||||
editingforeign = false;
|
||||
|
||||
function _next(value) {
|
||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
||||
/**
|
||||
* This function sets the content of element elt to the input XML.
|
||||
* @param {string} xmlString - The XML text
|
||||
* @returns {boolean} This function returns false if the set was unsuccessful, true otherwise.
|
||||
*/
|
||||
function setForeignString (xmlString) {
|
||||
const elt = selElems[0]; // The parent `Element` to append to
|
||||
try {
|
||||
// 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
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
function showForeignEditor () {
|
||||
const elt = selElems[0];
|
||||
if (!elt || editingforeign) { return; }
|
||||
editingforeign = true;
|
||||
toggleSourceButtons(true);
|
||||
elt.removeAttribute('fill');
|
||||
|
||||
const str = svgCanvas.svgToString(elt, 0);
|
||||
$('#svg_source_textarea').val(str);
|
||||
$('#svg_source_editor').fadeIn();
|
||||
properlySourceSizeTextArea();
|
||||
$('#svg_source_textarea').focus();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} attr
|
||||
* @param {string|Float} val
|
||||
* @returns {void}
|
||||
*/
|
||||
function setAttr (attr, val) {
|
||||
svgCanvas.changeSelectedAttribute(attr, val);
|
||||
svgCanvas.call('changed', selElems);
|
||||
}
|
||||
|
||||
const buttons = [{
|
||||
id: 'tool_foreign',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'foreignobject-tool.png',
|
||||
type: 'mode',
|
||||
events: {
|
||||
click () {
|
||||
svgCanvas.setMode('foreign');
|
||||
}
|
||||
|
||||
function _throw(err) {
|
||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
||||
}
|
||||
}, {
|
||||
id: 'edit_foreign',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'foreignobject-edit.png',
|
||||
type: 'context',
|
||||
panel: 'foreignObject_panel',
|
||||
events: {
|
||||
click () {
|
||||
showForeignEditor();
|
||||
}
|
||||
}
|
||||
}];
|
||||
|
||||
_next(undefined);
|
||||
});
|
||||
const contextTools = [
|
||||
{
|
||||
type: 'input',
|
||||
panel: 'foreignObject_panel',
|
||||
id: 'foreign_width',
|
||||
size: 3,
|
||||
events: {
|
||||
change () {
|
||||
setAttr('width', this.value);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
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);
|
||||
}
|
||||
}
|
||||
},
|
||||
elementChanged (opts) {
|
||||
// const elem = opts.elems[0];
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @file ext-foreignobject.js
|
||||
*
|
||||
* @license Apache-2.0
|
||||
*
|
||||
* @copyright 2010 Jacques Distler, 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
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);
|
||||
};
|
||||
|
||||
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}
|
||||
*/
|
||||
|
||||
|
||||
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.
|
||||
*/
|
||||
|
||||
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();
|
||||
|
||||
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
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
// Create source save/cancel buttons
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
return _context.abrupt("return");
|
||||
|
||||
case 2:
|
||||
if (setForeignString($('#svg_source_textarea').val())) {
|
||||
_context.next = 11;
|
||||
break;
|
||||
}
|
||||
|
||||
_context.next = 5;
|
||||
return $.confirm('Errors found. Revert to original?');
|
||||
|
||||
case 5:
|
||||
ok = _context.sent;
|
||||
|
||||
if (ok) {
|
||||
_context.next = 8;
|
||||
break;
|
||||
}
|
||||
|
||||
return _context.abrupt("return");
|
||||
|
||||
case 8:
|
||||
endChanges();
|
||||
_context.next = 12;
|
||||
break;
|
||||
|
||||
case 11:
|
||||
endChanges();
|
||||
|
||||
case 12:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, _callee);
|
||||
})));
|
||||
/* const cancel = */
|
||||
|
||||
$('#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;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
while (i--) {
|
||||
var 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);
|
||||
}
|
||||
}
|
||||
},
|
||||
elementChanged: function elementChanged(opts) {// const elem = opts.elems[0];
|
||||
}
|
||||
});
|
||||
|
||||
case 17:
|
||||
case "end":
|
||||
return _context2.stop();
|
||||
}
|
||||
}
|
||||
}, _callee2);
|
||||
}))();
|
||||
}
|
||||
};
|
||||
|
||||
return extForeignobject;
|
||||
|
||||
}());
|
||||
};
|
||||
|
||||
372
dist/extensions/ext-grid.js
vendored
@@ -1,222 +1,168 @@
|
||||
var svgEditorExtension_grid = (function () {
|
||||
'use strict';
|
||||
/**
|
||||
* @file ext-grid.js
|
||||
*
|
||||
* @license Apache-2.0
|
||||
*
|
||||
* @copyright 2010 Redou Mine, 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
|
||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
export default {
|
||||
name: 'grid',
|
||||
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;
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
Promise.resolve(value).then(_next, _throw);
|
||||
}
|
||||
}
|
||||
$(hcanvas).hide().appendTo('body');
|
||||
|
||||
function _asyncToGenerator(fn) {
|
||||
return function () {
|
||||
var self = this,
|
||||
args = arguments;
|
||||
return new Promise(function (resolve, reject) {
|
||||
var gen = fn.apply(self, args);
|
||||
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
|
||||
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
|
||||
});
|
||||
|
||||
function _next(value) {
|
||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
||||
}
|
||||
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);
|
||||
|
||||
function _throw(err) {
|
||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
||||
}
|
||||
// grid-box
|
||||
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);
|
||||
|
||||
_next(undefined);
|
||||
/**
|
||||
*
|
||||
* @param {Float} zoom
|
||||
* @returns {void}
|
||||
*/
|
||||
function updateGrid (zoom) {
|
||||
// TODO: Try this with <line> elements, then compare performance difference
|
||||
const unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px
|
||||
const uMulti = unit * zoom;
|
||||
// Calculate the main number interval
|
||||
const rawM = 100 / uMulti;
|
||||
let multi = 1;
|
||||
intervals.some((num) => {
|
||||
multi = num;
|
||||
return rawM <= num;
|
||||
});
|
||||
const bigInt = multi * uMulti;
|
||||
|
||||
// Set the canvas size to the width of the container
|
||||
hcanvas.width = bigInt;
|
||||
hcanvas.height = bigInt;
|
||||
const ctx = hcanvas.getContext('2d');
|
||||
const curD = 0.5;
|
||||
const part = bigInt / 10;
|
||||
|
||||
ctx.globalAlpha = 0.2;
|
||||
ctx.strokeStyle = svgEditor.curConfig.gridColor;
|
||||
for (let i = 1; i < 10; i++) {
|
||||
const subD = Math.round(part * i) + 0.5;
|
||||
// const lineNum = (i % 2)?12:10;
|
||||
const lineNum = 0;
|
||||
ctx.moveTo(subD, bigInt);
|
||||
ctx.lineTo(subD, lineNum);
|
||||
ctx.moveTo(bigInt, subD);
|
||||
ctx.lineTo(lineNum, subD);
|
||||
}
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.moveTo(curD, bigInt);
|
||||
ctx.lineTo(curD, 0);
|
||||
|
||||
ctx.moveTo(bigInt, curD);
|
||||
ctx.lineTo(0, curD);
|
||||
ctx.stroke();
|
||||
|
||||
const datauri = hcanvas.toDataURL('image/png');
|
||||
gridimg.setAttribute('width', bigInt);
|
||||
gridimg.setAttribute('height', bigInt);
|
||||
gridimg.parentNode.setAttribute('width', bigInt);
|
||||
gridimg.parentNode.setAttribute('height', bigInt);
|
||||
svgCanvas.setHref(gridimg, datauri);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
function gridUpdate () {
|
||||
if (showGrid) {
|
||||
updateGrid(svgCanvas.getZoom());
|
||||
}
|
||||
$('#canvasGrid').toggle(showGrid);
|
||||
$('#view_grid').toggleClass('push_button_pressed tool_button');
|
||||
}
|
||||
const buttons = [{
|
||||
id: 'view_grid',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'grid.png',
|
||||
type: 'context',
|
||||
panel: 'editor_panel',
|
||||
events: {
|
||||
click () {
|
||||
svgEditor.curConfig.showGrid = showGrid = !showGrid;
|
||||
gridUpdate();
|
||||
}
|
||||
}
|
||||
}];
|
||||
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);
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @file ext-grid.js
|
||||
*
|
||||
* @license Apache-2.0
|
||||
*
|
||||
* @copyright 2010 Redou Mine, 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
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());
|
||||
}
|
||||
|
||||
$('#canvasGrid').toggle(showGrid);
|
||||
$('#view_grid').toggleClass('push_button_pressed tool_button');
|
||||
};
|
||||
|
||||
updateGrid = function _updateGrid(zoom) {
|
||||
// TODO: Try this with <line> elements, then compare performance difference
|
||||
var unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px
|
||||
|
||||
var uMulti = unit * zoom; // Calculate the main number interval
|
||||
|
||||
var rawM = 100 / uMulti;
|
||||
var multi = 1;
|
||||
intervals.some(function (num) {
|
||||
multi = num;
|
||||
return rawM <= num;
|
||||
});
|
||||
var bigInt = multi * uMulti; // Set the canvas size to the width of the container
|
||||
|
||||
hcanvas.width = bigInt;
|
||||
hcanvas.height = bigInt;
|
||||
var ctx = hcanvas.getContext('2d');
|
||||
var curD = 0.5;
|
||||
var part = bigInt / 10;
|
||||
ctx.globalAlpha = 0.2;
|
||||
ctx.strokeStyle = svgEditor.curConfig.gridColor;
|
||||
|
||||
for (var i = 1; i < 10; i++) {
|
||||
var subD = Math.round(part * i) + 0.5; // const lineNum = (i % 2)?12:10;
|
||||
|
||||
var lineNum = 0;
|
||||
ctx.moveTo(subD, bigInt);
|
||||
ctx.lineTo(subD, lineNum);
|
||||
ctx.moveTo(bigInt, subD);
|
||||
ctx.lineTo(lineNum, subD);
|
||||
}
|
||||
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.moveTo(curD, bigInt);
|
||||
ctx.lineTo(curD, 0);
|
||||
ctx.moveTo(bigInt, curD);
|
||||
ctx.lineTo(0, curD);
|
||||
ctx.stroke();
|
||||
var datauri = hcanvas.toDataURL('image/png');
|
||||
gridimg.setAttribute('width', bigInt);
|
||||
gridimg.setAttribute('height', bigInt);
|
||||
gridimg.parentNode.setAttribute('width', bigInt);
|
||||
gridimg.parentNode.setAttribute('height', bigInt);
|
||||
svgCanvas.setHref(gridimg, datauri);
|
||||
};
|
||||
|
||||
$ = _ref.$, NS = _ref.NS, getTypeMap = _ref.getTypeMap, importLocale = _ref.importLocale;
|
||||
_context.next = 5;
|
||||
return importLocale();
|
||||
|
||||
case 5:
|
||||
strings = _context.sent;
|
||||
svgEditor = _this;
|
||||
svgCanvas = svgEditor.canvas;
|
||||
svgdoc = document.getElementById('svgcanvas').ownerDocument, assignAttributes = svgCanvas.assignAttributes, hcanvas = document.createElement('canvas'), canvBG = $('#canvasBackground'), units = getTypeMap(), intervals = [0.01, 0.1, 1, 10, 100, 1000];
|
||||
showGrid = svgEditor.curConfig.showGrid || false;
|
||||
$(hcanvas).hide().appendTo('body');
|
||||
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
|
||||
|
||||
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}
|
||||
*/
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
}
|
||||
};
|
||||
|
||||
return extGrid;
|
||||
|
||||
}());
|
||||
};
|
||||
|
||||
278
dist/extensions/ext-helloworld.js
vendored
@@ -1,205 +1,91 @@
|
||||
var svgEditorExtension_helloworld = (function () {
|
||||
'use strict';
|
||||
/**
|
||||
* @file ext-helloworld.js
|
||||
*
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
|
||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
/**
|
||||
* This is a very basic SVG-Edit extension. It adds a "Hello World" button in
|
||||
* the left ("mode") panel. Clicking on the button, and then the canvas
|
||||
* will show the user the point on the canvas that was clicked on.
|
||||
*/
|
||||
export default {
|
||||
name: 'helloworld',
|
||||
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',
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
Promise.resolve(value).then(_next, _throw);
|
||||
}
|
||||
}
|
||||
// Multiple buttons can be added in this array
|
||||
buttons: [{
|
||||
// Must match the icon ID in helloworld-icon.xml
|
||||
id: 'hello_world',
|
||||
|
||||
function _asyncToGenerator(fn) {
|
||||
return function () {
|
||||
var self = this,
|
||||
args = arguments;
|
||||
return new Promise(function (resolve, reject) {
|
||||
var gen = fn.apply(self, args);
|
||||
// Fallback, e.g., for `file:///` access
|
||||
icon: svgEditor.curConfig.extIconsPath + 'helloworld.png',
|
||||
|
||||
function _next(value) {
|
||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
||||
// 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');
|
||||
}
|
||||
}
|
||||
|
||||
function _throw(err) {
|
||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
||||
}],
|
||||
// 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;
|
||||
},
|
||||
|
||||
_next(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);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
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
|
||||
*
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* This is a very basic SVG-Edit extension. It adds a "Hello World" button in
|
||||
* the left ("mode") panel. Clicking on the button, and then the canvas
|
||||
* will show the user the point on the canvas that was clicked on.
|
||||
*/
|
||||
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();
|
||||
}
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
}
|
||||
};
|
||||
|
||||
return extHelloworld;
|
||||
|
||||
}());
|
||||
};
|
||||
|
||||
1125
dist/extensions/ext-imagelib.js
vendored
14
dist/extensions/ext-imagelib.xml
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="tool_imagelib">
|
||||
<svg width="201" height="211" xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m2.75,49.51761l56.56,-46.26761c12.73,8.25 25.71001,7 46.44,0.75l-56.03999,47.23944l-22.72002,25.01056l-24.23999,-26.73239z" id="svg_2" stroke-width="7"/>
|
||||
<path fill="#a03333" stroke="#3f3f3f" d="m3.75,203.25002c14.33301,7 30.66699,7 46,0l0,-152.00002c-14.66699,8 -32.33301,8 -47,0l1,152.00002zm45.75,-152.25002l56.25,-46.75l0,151l-56,48.00002m-47.25,-154.25002l57.25,-46.5" id="svg_1" stroke-width="7" stroke-linecap="round"/>
|
||||
<path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m49.75,49.51801l56.56,-46.26801c12.72998,8.25 25.71002,7 46.44,0.75l-56.03998,47.239l-22.72003,25.011l-24.23999,-26.73199z" stroke-width="7" id="svg_5"/>
|
||||
<path fill="#2f8e2f" stroke="#3f3f3f" d="m50.75,202.25c14.33301,7 30.66699,7.04253 46,0.04253l0,-151.04253c-14.66699,8 -32.33301,8 -47,0l1,151zm45.75,-151.25l56.25,-46.75l0,144.01219l-56,51.98782m-47.25,-151.25002l57.25,-46.5" stroke-width="7" stroke-linecap="round" id="svg_6"/>
|
||||
<path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m95.75,49.51801l56.56,-46.26801c12.72998,8.25 25.71002,7 46.44,0.75l-56.03998,47.239l-22.72003,25.011l-24.23999,-26.73199z" stroke-width="7" id="svg_10"/>
|
||||
<path fill="#336393" stroke="#3f3f3f" d="m96.75,200.29445c14.33301,7 30.66699,7 46,0l0,-149.04445c-14.66699,8 -32.33301,8 -47,0l1,149.04445zm45.75,-149.29445l56.25,-46.75l0,148.04445l-56,48m-47.25,-151.29445l57.25,-46.5" stroke-width="7" stroke-linecap="round" id="svg_11"/>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
26
dist/extensions/ext-locale/arrows/en.js
vendored
@@ -1,13 +1,10 @@
|
||||
var svgEditorExtensionLocale_arrows_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'Arrows',
|
||||
langList: [{
|
||||
id: 'arrow_none',
|
||||
textContent: 'No arrow'
|
||||
}],
|
||||
contextTools: [{
|
||||
export default {
|
||||
name: 'Arrows',
|
||||
langList: [
|
||||
{id: 'arrow_none', textContent: 'No arrow'}
|
||||
],
|
||||
contextTools: [
|
||||
{
|
||||
title: 'Select arrow type',
|
||||
options: {
|
||||
none: 'No arrow',
|
||||
@@ -17,9 +14,6 @@ var svgEditorExtensionLocale_arrows_en = (function () {
|
||||
mid: '-->--',
|
||||
mid_bk: '--<--'
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
26
dist/extensions/ext-locale/arrows/fr.js
vendored
@@ -1,13 +1,10 @@
|
||||
var svgEditorExtensionLocale_arrows_fr = (function () {
|
||||
'use strict';
|
||||
|
||||
var fr = {
|
||||
name: 'Arrows',
|
||||
langList: [{
|
||||
id: 'arrow_none',
|
||||
textContent: 'Sans flèche'
|
||||
}],
|
||||
contextTools: [{
|
||||
export default {
|
||||
name: 'Arrows',
|
||||
langList: [
|
||||
{id: 'arrow_none', textContent: 'Sans flèche'}
|
||||
],
|
||||
contextTools: [
|
||||
{
|
||||
title: 'Select arrow type',
|
||||
options: {
|
||||
none: 'No arrow',
|
||||
@@ -17,9 +14,6 @@ var svgEditorExtensionLocale_arrows_fr = (function () {
|
||||
mid: '-->--',
|
||||
mid_bk: '--<--'
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
return fr;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
26
dist/extensions/ext-locale/arrows/zh-CN.js
vendored
Normal file → Executable file
@@ -1,13 +1,10 @@
|
||||
var svgEditorExtensionLocale_arrows_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
name: '箭头',
|
||||
langList: [{
|
||||
id: 'arrow_none',
|
||||
textContent: '无箭头'
|
||||
}],
|
||||
contextTools: [{
|
||||
export default {
|
||||
name: '箭头',
|
||||
langList: [
|
||||
{id: 'arrow_none', textContent: '无箭头'}
|
||||
],
|
||||
contextTools: [
|
||||
{
|
||||
title: '选择箭头类型',
|
||||
options: {
|
||||
none: '无箭头',
|
||||
@@ -17,9 +14,6 @@ var svgEditorExtensionLocale_arrows_zh_CN = (function () {
|
||||
mid: '-->--',
|
||||
mid_bk: '--<--'
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
22
dist/extensions/ext-locale/closepath/en.js
vendored
@@ -1,15 +1,11 @@
|
||||
var svgEditorExtensionLocale_closepath_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'ClosePath',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: 'ClosePath',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Open path'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: 'Close path'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
22
dist/extensions/ext-locale/closepath/zh-CN.js
vendored
Normal file → Executable file
@@ -1,15 +1,11 @@
|
||||
var svgEditorExtensionLocale_closepath_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
name: '闭合路径',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: '闭合路径',
|
||||
buttons: [
|
||||
{
|
||||
title: '打开路径'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: '关闭路径'
|
||||
}]
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
26
dist/extensions/ext-locale/connector/en.js
vendored
@@ -1,17 +1,11 @@
|
||||
var svgEditorExtensionLocale_connector_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'Connector',
|
||||
langList: [{
|
||||
id: 'mode_connect',
|
||||
export default {
|
||||
name: 'Connector',
|
||||
langList: [
|
||||
{id: 'mode_connect', title: 'Connect two objects'}
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
title: 'Connect two objects'
|
||||
}],
|
||||
buttons: [{
|
||||
title: 'Connect two objects'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
26
dist/extensions/ext-locale/connector/fr.js
vendored
@@ -1,17 +1,11 @@
|
||||
var svgEditorExtensionLocale_connector_fr = (function () {
|
||||
'use strict';
|
||||
|
||||
var fr = {
|
||||
name: 'Connector',
|
||||
langList: [{
|
||||
id: 'mode_connect',
|
||||
title: 'Connecter deux objets'
|
||||
}],
|
||||
buttons: [{
|
||||
export default {
|
||||
name: 'Connector',
|
||||
langList: [
|
||||
{id: 'mode_connect', title: 'Connecter deux objets'}
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
title: 'Connect two objects'
|
||||
}]
|
||||
};
|
||||
|
||||
return fr;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
26
dist/extensions/ext-locale/connector/zh-CN.js
vendored
Normal file → Executable file
@@ -1,17 +1,11 @@
|
||||
var svgEditorExtensionLocale_connector_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
name: '连接器',
|
||||
langList: [{
|
||||
id: 'mode_connect',
|
||||
export default {
|
||||
name: '连接器',
|
||||
langList: [
|
||||
{id: 'mode_connect', title: '连接两个对象'}
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
title: '连接两个对象'
|
||||
}],
|
||||
buttons: [{
|
||||
title: '连接两个对象'
|
||||
}]
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
19
dist/extensions/ext-locale/eyedropper/en.js
vendored
@@ -1,14 +1,9 @@
|
||||
var svgEditorExtensionLocale_eyedropper_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'eyedropper',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: 'eyedropper',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Eye Dropper Tool',
|
||||
key: 'I'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
19
dist/extensions/ext-locale/eyedropper/zh-CN.js
vendored
Normal file → Executable file
@@ -1,14 +1,9 @@
|
||||
var svgEditorExtensionLocale_eyedropper_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
name: '滴管',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: '滴管',
|
||||
buttons: [
|
||||
{
|
||||
title: '滴管工具',
|
||||
key: 'I'
|
||||
}]
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
34
dist/extensions/ext-locale/foreignobject/en.js
vendored
@@ -1,25 +1,25 @@
|
||||
var svgEditorExtensionLocale_foreignobject_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'foreignObject',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: 'foreignObject',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Foreign Object Tool'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: 'Edit ForeignObject Content'
|
||||
}],
|
||||
contextTools: [{
|
||||
}
|
||||
],
|
||||
contextTools: [
|
||||
{
|
||||
title: "Change foreignObject's width",
|
||||
label: 'w'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: "Change foreignObject's height",
|
||||
label: 'h'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: "Change foreignObject's font size",
|
||||
label: 'font-size'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
34
dist/extensions/ext-locale/foreignobject/zh-CN.js
vendored
Normal file → Executable file
@@ -1,25 +1,25 @@
|
||||
var svgEditorExtensionLocale_foreignobject_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
name: '外部对象',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: '外部对象',
|
||||
buttons: [
|
||||
{
|
||||
title: '外部对象工具'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: '编辑外部对象内容'
|
||||
}],
|
||||
contextTools: [{
|
||||
}
|
||||
],
|
||||
contextTools: [
|
||||
{
|
||||
title: '改变外部对象宽度',
|
||||
label: 'w'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: '改变外部对象高度',
|
||||
label: 'h'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: '改变外部对象文字大小',
|
||||
label: '文字大小'
|
||||
}]
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
19
dist/extensions/ext-locale/grid/en.js
vendored
@@ -1,13 +1,8 @@
|
||||
var svgEditorExtensionLocale_grid_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'View Grid',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: 'View Grid',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Show/Hide Grid'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
19
dist/extensions/ext-locale/grid/zh-CN.js
vendored
Normal file → Executable file
@@ -1,13 +1,8 @@
|
||||
var svgEditorExtensionLocale_grid_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
name: '网格视图',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: '网格视图',
|
||||
buttons: [
|
||||
{
|
||||
title: '显示/隐藏网格'
|
||||
}]
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
21
dist/extensions/ext-locale/helloworld/en.js
vendored
@@ -1,14 +1,9 @@
|
||||
var svgEditorExtensionLocale_helloworld_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'Hello World',
|
||||
text: 'Hello World!\n\nYou clicked here: {x}, {y}',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: 'Hello World',
|
||||
text: 'Hello World!\n\nYou clicked here: {x}, {y}',
|
||||
buttons: [
|
||||
{
|
||||
title: "Say 'Hello World'"
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
21
dist/extensions/ext-locale/helloworld/zh-CN.js
vendored
Normal file → Executable file
@@ -1,14 +1,9 @@
|
||||
var svgEditorExtensionLocale_helloworld_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
name: 'Hello World',
|
||||
text: 'Hello World!\n\n 请点击: {x}, {y}',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: 'Hello World',
|
||||
text: 'Hello World!\n\n 请点击: {x}, {y}',
|
||||
buttons: [
|
||||
{
|
||||
title: "输出 'Hello World'"
|
||||
}]
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
35
dist/extensions/ext-locale/imagelib/de.js
vendored
@@ -1,20 +1,21 @@
|
||||
var svgEditorExtensionLocale_imagelib_de = (function () {
|
||||
'use strict';
|
||||
|
||||
var de = {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [{
|
||||
export default {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Bilder-Bibliothek'
|
||||
}],
|
||||
imgLibs: [{
|
||||
}
|
||||
],
|
||||
imgLibs: [
|
||||
{
|
||||
name: 'Demo library (local)',
|
||||
url: '{path}imagelib/index{modularVersion}.html',
|
||||
description: 'Demonstration library for SVG-edit on this server'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: 'IAN Symbol Libraries',
|
||||
url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
|
||||
description: 'Free library of illustrations'
|
||||
@@ -28,9 +29,5 @@ var svgEditorExtensionLocale_imagelib_de = (function () {
|
||||
description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
|
||||
}
|
||||
*/
|
||||
]
|
||||
};
|
||||
|
||||
return de;
|
||||
|
||||
}());
|
||||
]
|
||||
};
|
||||
|
||||
39
dist/extensions/ext-locale/imagelib/en.js
vendored
@@ -1,31 +1,32 @@
|
||||
var svgEditorExtensionLocale_imagelib_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [{
|
||||
export default {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Image library'
|
||||
}],
|
||||
imgLibs: [{
|
||||
}
|
||||
],
|
||||
imgLibs: [
|
||||
{
|
||||
name: 'Demo library (local)',
|
||||
url: '{path}imagelib/index{modularVersion}.html',
|
||||
description: 'Demonstration library for SVG-edit on this server'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: 'IAN Symbol Libraries',
|
||||
url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
|
||||
description: 'Free library of illustrations'
|
||||
} // The site is no longer using our API, and they have added an
|
||||
}
|
||||
// The site is no longer using our API, and they have added an
|
||||
// `X-Frame-Options` header which prevents our usage cross-origin:
|
||||
// Getting messages like this in console:
|
||||
// Refused to display 'https://openclipart.org/detail/307176/sign-bike' in a frame
|
||||
// because it set 'X-Frame-Options' to 'sameorigin'.
|
||||
// url: 'https://openclipart.org/svgedit',
|
||||
// However, they do have a custom API which we are using here:
|
||||
|
||||
/*
|
||||
{
|
||||
name: 'Openclipart',
|
||||
@@ -33,9 +34,5 @@ var svgEditorExtensionLocale_imagelib_en = (function () {
|
||||
description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
|
||||
}
|
||||
*/
|
||||
]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
]
|
||||
};
|
||||
|
||||
35
dist/extensions/ext-locale/imagelib/fr.js
vendored
@@ -1,20 +1,21 @@
|
||||
var svgEditorExtensionLocale_imagelib_fr = (function () {
|
||||
'use strict';
|
||||
|
||||
var fr = {
|
||||
select_lib: "Choisir une bibliothèque d'images",
|
||||
show_list: 'show_list',
|
||||
import_single: 'import_single',
|
||||
import_multi: 'import_multi',
|
||||
open: 'open',
|
||||
buttons: [{
|
||||
export default {
|
||||
select_lib: "Choisir une bibliothèque d'images",
|
||||
show_list: 'show_list',
|
||||
import_single: 'import_single',
|
||||
import_multi: 'import_multi',
|
||||
open: 'open',
|
||||
buttons: [
|
||||
{
|
||||
title: "Bibliothèque d'images"
|
||||
}],
|
||||
imgLibs: [{
|
||||
}
|
||||
],
|
||||
imgLibs: [
|
||||
{
|
||||
name: 'Demo library (local)',
|
||||
url: '{path}imagelib/index{modularVersion}.html',
|
||||
description: 'Demonstration library for SVG-edit on this server'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: 'IAN Symbol Libraries',
|
||||
url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
|
||||
description: 'Free library of illustrations'
|
||||
@@ -28,9 +29,5 @@ var svgEditorExtensionLocale_imagelib_fr = (function () {
|
||||
description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
|
||||
}
|
||||
*/
|
||||
]
|
||||
};
|
||||
|
||||
return fr;
|
||||
|
||||
}());
|
||||
]
|
||||
};
|
||||
|
||||
35
dist/extensions/ext-locale/imagelib/pl.js
vendored
@@ -1,20 +1,21 @@
|
||||
var svgEditorExtensionLocale_imagelib_pl = (function () {
|
||||
'use strict';
|
||||
|
||||
var pl = {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [{
|
||||
export default {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Biblioteka obrazów'
|
||||
}],
|
||||
imgLibs: [{
|
||||
}
|
||||
],
|
||||
imgLibs: [
|
||||
{
|
||||
name: 'Demo library (local)',
|
||||
url: '{path}imagelib/index{modularVersion}.html',
|
||||
description: 'Demonstration library for SVG-edit on this server'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: 'IAN Symbol Libraries',
|
||||
url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
|
||||
description: 'Free library of illustrations'
|
||||
@@ -28,9 +29,5 @@ var svgEditorExtensionLocale_imagelib_pl = (function () {
|
||||
description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
|
||||
}
|
||||
*/
|
||||
]
|
||||
};
|
||||
|
||||
return pl;
|
||||
|
||||
}());
|
||||
]
|
||||
};
|
||||
|
||||
35
dist/extensions/ext-locale/imagelib/pt-BR.js
vendored
@@ -1,20 +1,21 @@
|
||||
var svgEditorExtensionLocale_imagelib_pt_BR = (function () {
|
||||
'use strict';
|
||||
|
||||
var ptBR = {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [{
|
||||
export default {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Biblioteca de Imagens'
|
||||
}],
|
||||
imgLibs: [{
|
||||
}
|
||||
],
|
||||
imgLibs: [
|
||||
{
|
||||
name: 'Demo library (local)',
|
||||
url: '{path}imagelib/index{modularVersion}.html',
|
||||
description: 'Demonstration library for SVG-edit on this server'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: 'IAN Symbol Libraries',
|
||||
url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
|
||||
description: 'Free library of illustrations'
|
||||
@@ -28,9 +29,5 @@ var svgEditorExtensionLocale_imagelib_pt_BR = (function () {
|
||||
description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
|
||||
}
|
||||
*/
|
||||
]
|
||||
};
|
||||
|
||||
return ptBR;
|
||||
|
||||
}());
|
||||
]
|
||||
};
|
||||
|
||||
35
dist/extensions/ext-locale/imagelib/ro.js
vendored
@@ -1,20 +1,21 @@
|
||||
var svgEditorExtensionLocale_imagelib_ro = (function () {
|
||||
'use strict';
|
||||
|
||||
var ro = {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [{
|
||||
export default {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Bibliotecă de Imagini'
|
||||
}],
|
||||
imgLibs: [{
|
||||
}
|
||||
],
|
||||
imgLibs: [
|
||||
{
|
||||
name: 'Demo library (local)',
|
||||
url: '{path}imagelib/index{modularVersion}.html',
|
||||
description: 'Demonstration library for SVG-edit on this server'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: 'IAN Symbol Libraries',
|
||||
url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
|
||||
description: 'Free library of illustrations'
|
||||
@@ -28,9 +29,5 @@ var svgEditorExtensionLocale_imagelib_ro = (function () {
|
||||
description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
|
||||
}
|
||||
*/
|
||||
]
|
||||
};
|
||||
|
||||
return ro;
|
||||
|
||||
}());
|
||||
]
|
||||
};
|
||||
|
||||
35
dist/extensions/ext-locale/imagelib/sk.js
vendored
@@ -1,20 +1,21 @@
|
||||
var svgEditorExtensionLocale_imagelib_sk = (function () {
|
||||
'use strict';
|
||||
|
||||
var sk = {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [{
|
||||
export default {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Knižnica obrázkov'
|
||||
}],
|
||||
imgLibs: [{
|
||||
}
|
||||
],
|
||||
imgLibs: [
|
||||
{
|
||||
name: 'Demo library (local)',
|
||||
url: '{path}imagelib/index{modularVersion}.html',
|
||||
description: 'Demonstration library for SVG-edit on this server'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: 'IAN Symbol Libraries',
|
||||
url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
|
||||
description: 'Free library of illustrations'
|
||||
@@ -28,9 +29,5 @@ var svgEditorExtensionLocale_imagelib_sk = (function () {
|
||||
description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
|
||||
}
|
||||
*/
|
||||
]
|
||||
};
|
||||
|
||||
return sk;
|
||||
|
||||
}());
|
||||
]
|
||||
};
|
||||
|
||||
35
dist/extensions/ext-locale/imagelib/sl.js
vendored
@@ -1,20 +1,21 @@
|
||||
var svgEditorExtensionLocale_imagelib_sl = (function () {
|
||||
'use strict';
|
||||
|
||||
var sl = {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [{
|
||||
export default {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Knjižnica slik'
|
||||
}],
|
||||
imgLibs: [{
|
||||
}
|
||||
],
|
||||
imgLibs: [
|
||||
{
|
||||
name: 'Demo library (local)',
|
||||
url: '{path}imagelib/index{modularVersion}.html',
|
||||
description: 'Demonstration library for SVG-edit on this server'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: 'IAN Symbol Libraries',
|
||||
url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
|
||||
description: 'Free library of illustrations'
|
||||
@@ -28,9 +29,5 @@ var svgEditorExtensionLocale_imagelib_sl = (function () {
|
||||
description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
|
||||
}
|
||||
*/
|
||||
]
|
||||
};
|
||||
|
||||
return sl;
|
||||
|
||||
}());
|
||||
]
|
||||
};
|
||||
|
||||
35
dist/extensions/ext-locale/imagelib/zh-CN.js
vendored
@@ -1,20 +1,21 @@
|
||||
var svgEditorExtensionLocale_imagelib_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [{
|
||||
export default {
|
||||
select_lib: 'Select an image library',
|
||||
show_list: 'Show library list',
|
||||
import_single: 'Import single',
|
||||
import_multi: 'Import multiple',
|
||||
open: 'Open as new document',
|
||||
buttons: [
|
||||
{
|
||||
title: '图像库'
|
||||
}],
|
||||
imgLibs: [{
|
||||
}
|
||||
],
|
||||
imgLibs: [
|
||||
{
|
||||
name: 'Demo library (local)',
|
||||
url: '{path}imagelib/index{modularVersion}.html',
|
||||
description: 'Demonstration library for SVG-edit on this server'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: 'IAN Symbol Libraries',
|
||||
url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
|
||||
description: 'Free library of illustrations'
|
||||
@@ -28,9 +29,5 @@ var svgEditorExtensionLocale_imagelib_zh_CN = (function () {
|
||||
description: 'Share and Use Images. Over 100,000 Public Domain SVG Images and Growing.'
|
||||
}
|
||||
*/
|
||||
]
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
]
|
||||
};
|
||||
|
||||
109
dist/extensions/ext-locale/markers/en.js
vendored
@@ -1,81 +1,46 @@
|
||||
var svgEditorExtensionLocale_markers_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'Markers',
|
||||
langList: [{
|
||||
id: 'nomarker',
|
||||
title: 'No Marker'
|
||||
}, {
|
||||
id: 'leftarrow',
|
||||
title: 'Left Arrow'
|
||||
}, {
|
||||
id: 'rightarrow',
|
||||
title: 'Right Arrow'
|
||||
}, {
|
||||
id: 'textmarker',
|
||||
title: 'Text Marker'
|
||||
}, {
|
||||
id: 'forwardslash',
|
||||
title: 'Forward Slash'
|
||||
}, {
|
||||
id: 'reverseslash',
|
||||
title: 'Reverse Slash'
|
||||
}, {
|
||||
id: 'verticalslash',
|
||||
title: 'Vertical Slash'
|
||||
}, {
|
||||
id: 'box',
|
||||
title: 'Box'
|
||||
}, {
|
||||
id: 'star',
|
||||
title: 'Star'
|
||||
}, {
|
||||
id: 'xmark',
|
||||
title: 'X'
|
||||
}, {
|
||||
id: 'triangle',
|
||||
title: 'Triangle'
|
||||
}, {
|
||||
id: 'mcircle',
|
||||
title: 'Circle'
|
||||
}, {
|
||||
id: 'leftarrow_o',
|
||||
title: 'Open Left Arrow'
|
||||
}, {
|
||||
id: 'rightarrow_o',
|
||||
title: 'Open Right Arrow'
|
||||
}, {
|
||||
id: 'box_o',
|
||||
title: 'Open Box'
|
||||
}, {
|
||||
id: 'star_o',
|
||||
title: 'Open Star'
|
||||
}, {
|
||||
id: 'triangle_o',
|
||||
title: 'Open Triangle'
|
||||
}, {
|
||||
id: 'mcircle_o',
|
||||
title: 'Open Circle'
|
||||
}],
|
||||
contextTools: [{
|
||||
export default {
|
||||
name: 'Markers',
|
||||
langList: [
|
||||
{id: 'nomarker', title: 'No Marker'},
|
||||
{id: 'leftarrow', title: 'Left Arrow'},
|
||||
{id: 'rightarrow', title: 'Right Arrow'},
|
||||
{id: 'textmarker', title: 'Text Marker'},
|
||||
{id: 'forwardslash', title: 'Forward Slash'},
|
||||
{id: 'reverseslash', title: 'Reverse Slash'},
|
||||
{id: 'verticalslash', title: 'Vertical Slash'},
|
||||
{id: 'box', title: 'Box'},
|
||||
{id: 'star', title: 'Star'},
|
||||
{id: 'xmark', title: 'X'},
|
||||
{id: 'triangle', title: 'Triangle'},
|
||||
{id: 'mcircle', title: 'Circle'},
|
||||
{id: 'leftarrow_o', title: 'Open Left Arrow'},
|
||||
{id: 'rightarrow_o', title: 'Open Right Arrow'},
|
||||
{id: 'box_o', title: 'Open Box'},
|
||||
{id: 'star_o', title: 'Open Star'},
|
||||
{id: 'triangle_o', title: 'Open Triangle'},
|
||||
{id: 'mcircle_o', title: 'Open Circle'}
|
||||
],
|
||||
contextTools: [
|
||||
{
|
||||
title: 'Start marker',
|
||||
label: 's'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: 'Select start marker type'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: 'Middle marker',
|
||||
label: 'm'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: 'Select mid marker type'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: 'End marker',
|
||||
label: 'e'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: 'Select end marker type'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
109
dist/extensions/ext-locale/markers/zh-CN.js
vendored
Normal file → Executable file
@@ -1,81 +1,46 @@
|
||||
var svgEditorExtensionLocale_markers_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
name: '标记',
|
||||
langList: [{
|
||||
id: 'nomarker',
|
||||
title: '无标记'
|
||||
}, {
|
||||
id: 'leftarrow',
|
||||
title: '左箭头'
|
||||
}, {
|
||||
id: 'rightarrow',
|
||||
title: '右箭头'
|
||||
}, {
|
||||
id: 'textmarker',
|
||||
title: '文本'
|
||||
}, {
|
||||
id: 'forwardslash',
|
||||
title: '斜杠'
|
||||
}, {
|
||||
id: 'reverseslash',
|
||||
title: '反斜杠'
|
||||
}, {
|
||||
id: 'verticalslash',
|
||||
title: '垂直线'
|
||||
}, {
|
||||
id: 'box',
|
||||
title: '方块'
|
||||
}, {
|
||||
id: 'star',
|
||||
title: '星形'
|
||||
}, {
|
||||
id: 'xmark',
|
||||
title: 'X'
|
||||
}, {
|
||||
id: 'triangle',
|
||||
title: '三角形'
|
||||
}, {
|
||||
id: 'mcircle',
|
||||
title: '圆形'
|
||||
}, {
|
||||
id: 'leftarrow_o',
|
||||
title: '左箭头(空心)'
|
||||
}, {
|
||||
id: 'rightarrow_o',
|
||||
title: '右箭头(空心)'
|
||||
}, {
|
||||
id: 'box_o',
|
||||
title: '方块(空心)'
|
||||
}, {
|
||||
id: 'star_o',
|
||||
title: '星形(空心)'
|
||||
}, {
|
||||
id: 'triangle_o',
|
||||
title: '三角形(空心)'
|
||||
}, {
|
||||
id: 'mcircle_o',
|
||||
title: '圆形(空心)'
|
||||
}],
|
||||
contextTools: [{
|
||||
export default {
|
||||
name: '标记',
|
||||
langList: [
|
||||
{id: 'nomarker', title: '无标记'},
|
||||
{id: 'leftarrow', title: '左箭头'},
|
||||
{id: 'rightarrow', title: '右箭头'},
|
||||
{id: 'textmarker', title: '文本'},
|
||||
{id: 'forwardslash', title: '斜杠'},
|
||||
{id: 'reverseslash', title: '反斜杠'},
|
||||
{id: 'verticalslash', title: '垂直线'},
|
||||
{id: 'box', title: '方块'},
|
||||
{id: 'star', title: '星形'},
|
||||
{id: 'xmark', title: 'X'},
|
||||
{id: 'triangle', title: '三角形'},
|
||||
{id: 'mcircle', title: '圆形'},
|
||||
{id: 'leftarrow_o', title: '左箭头(空心)'},
|
||||
{id: 'rightarrow_o', title: '右箭头(空心)'},
|
||||
{id: 'box_o', title: '方块(空心)'},
|
||||
{id: 'star_o', title: '星形(空心)'},
|
||||
{id: 'triangle_o', title: '三角形(空心)'},
|
||||
{id: 'mcircle_o', title: '圆形(空心)'}
|
||||
],
|
||||
contextTools: [
|
||||
{
|
||||
title: '起始标记',
|
||||
label: 's'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: '选择起始标记类型'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: '中段标记',
|
||||
label: 'm'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: '选择中段标记类型'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: '末端标记',
|
||||
label: 'e'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: '选择末端标记类型'
|
||||
}]
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
19
dist/extensions/ext-locale/mathjax/en.js
vendored
@@ -1,13 +1,8 @@
|
||||
var svgEditorExtensionLocale_mathjax_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'MathJax',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: 'MathJax',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Add Mathematics'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
19
dist/extensions/ext-locale/mathjax/zh-CN.js
vendored
Normal file → Executable file
@@ -1,13 +1,8 @@
|
||||
var svgEditorExtensionLocale_mathjax_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
name: '数学',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: '数学',
|
||||
buttons: [
|
||||
{
|
||||
title: '添加数学计算'
|
||||
}]
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
19
dist/extensions/ext-locale/panning/en.js
vendored
@@ -1,13 +1,8 @@
|
||||
var svgEditorExtensionLocale_panning_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'Extension Panning',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: 'Extension Panning',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Panning'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
19
dist/extensions/ext-locale/panning/zh-CN.js
vendored
Normal file → Executable file
@@ -1,13 +1,8 @@
|
||||
var svgEditorExtensionLocale_panning_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
name: '移动',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: '移动',
|
||||
buttons: [
|
||||
{
|
||||
title: '移动'
|
||||
}]
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
102
dist/extensions/ext-locale/placemark/en.js
vendored
@@ -1,74 +1,40 @@
|
||||
var svgEditorExtensionLocale_placemark_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'placemark',
|
||||
langList: [{
|
||||
id: 'nomarker',
|
||||
title: 'No Marker'
|
||||
}, {
|
||||
id: 'leftarrow',
|
||||
title: 'Left Arrow'
|
||||
}, {
|
||||
id: 'rightarrow',
|
||||
title: 'Right Arrow'
|
||||
}, {
|
||||
id: 'forwardslash',
|
||||
title: 'Forward Slash'
|
||||
}, {
|
||||
id: 'reverseslash',
|
||||
title: 'Reverse Slash'
|
||||
}, {
|
||||
id: 'verticalslash',
|
||||
title: 'Vertical Slash'
|
||||
}, {
|
||||
id: 'box',
|
||||
title: 'Box'
|
||||
}, {
|
||||
id: 'star',
|
||||
title: 'Star'
|
||||
}, {
|
||||
id: 'xmark',
|
||||
title: 'X'
|
||||
}, {
|
||||
id: 'triangle',
|
||||
title: 'Triangle'
|
||||
}, {
|
||||
id: 'mcircle',
|
||||
title: 'Circle'
|
||||
}, {
|
||||
id: 'leftarrow_o',
|
||||
title: 'Open Left Arrow'
|
||||
}, {
|
||||
id: 'rightarrow_o',
|
||||
title: 'Open Right Arrow'
|
||||
}, {
|
||||
id: 'box_o',
|
||||
title: 'Open Box'
|
||||
}, {
|
||||
id: 'star_o',
|
||||
title: 'Open Star'
|
||||
}, {
|
||||
id: 'triangle_o',
|
||||
title: 'Open Triangle'
|
||||
}, {
|
||||
id: 'mcircle_o',
|
||||
title: 'Open Circle'
|
||||
}],
|
||||
buttons: [{
|
||||
export default {
|
||||
name: 'placemark',
|
||||
langList: [
|
||||
{id: 'nomarker', title: 'No Marker'},
|
||||
{id: 'leftarrow', title: 'Left Arrow'},
|
||||
{id: 'rightarrow', title: 'Right Arrow'},
|
||||
{id: 'forwardslash', title: 'Forward Slash'},
|
||||
{id: 'reverseslash', title: 'Reverse Slash'},
|
||||
{id: 'verticalslash', title: 'Vertical Slash'},
|
||||
{id: 'box', title: 'Box'},
|
||||
{id: 'star', title: 'Star'},
|
||||
{id: 'xmark', title: 'X'},
|
||||
{id: 'triangle', title: 'Triangle'},
|
||||
{id: 'mcircle', title: 'Circle'},
|
||||
{id: 'leftarrow_o', title: 'Open Left Arrow'},
|
||||
{id: 'rightarrow_o', title: 'Open Right Arrow'},
|
||||
{id: 'box_o', title: 'Open Box'},
|
||||
{id: 'star_o', title: 'Open Star'},
|
||||
{id: 'triangle_o', title: 'Open Triangle'},
|
||||
{id: 'mcircle_o', title: 'Open Circle'}
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
title: 'Placemark Tool'
|
||||
}],
|
||||
contextTools: [{
|
||||
}
|
||||
],
|
||||
contextTools: [
|
||||
{
|
||||
title: 'Select Place marker type'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: 'Text on separated with ; ',
|
||||
label: 'Text'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: 'Font for text',
|
||||
label: ''
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
25
dist/extensions/ext-locale/polygon/en.js
vendored
@@ -1,17 +1,14 @@
|
||||
var svgEditorExtensionLocale_polygon_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'polygon',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: 'polygon',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Polygon Tool'
|
||||
}],
|
||||
contextTools: [{
|
||||
}
|
||||
],
|
||||
contextTools: [
|
||||
{
|
||||
title: 'Number of Sides',
|
||||
label: 'sides'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
25
dist/extensions/ext-locale/polygon/zh-CN.js
vendored
Normal file → Executable file
@@ -1,17 +1,14 @@
|
||||
var svgEditorExtensionLocale_polygon_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
name: '多边形',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: '多边形',
|
||||
buttons: [
|
||||
{
|
||||
title: '多边形工具'
|
||||
}],
|
||||
contextTools: [{
|
||||
}
|
||||
],
|
||||
contextTools: [
|
||||
{
|
||||
title: '边数',
|
||||
label: '边数'
|
||||
}]
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
15
dist/extensions/ext-locale/server_moinsave/en.js
vendored
@@ -1,11 +1,4 @@
|
||||
var svgEditorExtensionLocale_server_moinsave_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
saved: 'Saved! Return to Item View!',
|
||||
hiddenframe: 'Moinsave frame to store hidden values'
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
export default {
|
||||
saved: 'Saved! Return to Item View!',
|
||||
hiddenframe: 'Moinsave frame to store hidden values'
|
||||
};
|
||||
|
||||
15
dist/extensions/ext-locale/server_moinsave/zh-CN.js
vendored
Normal file → Executable file
@@ -1,11 +1,4 @@
|
||||
var svgEditorExtensionLocale_server_moinsave_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
saved: '已保存! 返回视图!',
|
||||
hiddenframe: 'Moinsave frame to store hidden values'
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
export default {
|
||||
saved: '已保存! 返回视图!',
|
||||
hiddenframe: 'Moinsave frame to store hidden values'
|
||||
};
|
||||
|
||||
15
dist/extensions/ext-locale/server_opensave/en.js
vendored
@@ -1,11 +1,4 @@
|
||||
var svgEditorExtensionLocale_server_opensave_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
uploading: 'Uploading...',
|
||||
hiddenframe: 'Opensave frame to store hidden values'
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
export default {
|
||||
uploading: 'Uploading...',
|
||||
hiddenframe: 'Opensave frame to store hidden values'
|
||||
};
|
||||
|
||||
15
dist/extensions/ext-locale/server_opensave/zh-CN.js
vendored
Normal file → Executable file
@@ -1,11 +1,4 @@
|
||||
var svgEditorExtensionLocale_server_opensave_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
uploading: '正在上传...',
|
||||
hiddenframe: 'Opensave frame to store hidden values'
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
export default {
|
||||
uploading: '正在上传...',
|
||||
hiddenframe: 'Opensave frame to store hidden values'
|
||||
};
|
||||
|
||||
51
dist/extensions/ext-locale/shapes/en.js
vendored
@@ -1,29 +1,24 @@
|
||||
var svgEditorExtensionLocale_shapes_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
loading: 'Loading...',
|
||||
categories: {
|
||||
basic: 'Basic',
|
||||
object: 'Objects',
|
||||
symbol: 'Symbols',
|
||||
arrow: 'Arrows',
|
||||
flowchart: 'Flowchart',
|
||||
animal: 'Animals',
|
||||
game: 'Cards & Chess',
|
||||
dialog_balloon: 'Dialog balloons',
|
||||
electronics: 'Electronics',
|
||||
math: 'Mathematical',
|
||||
music: 'Music',
|
||||
misc: 'Miscellaneous',
|
||||
raphael_1: 'raphaeljs.com set 1',
|
||||
raphael_2: 'raphaeljs.com set 2'
|
||||
},
|
||||
buttons: [{
|
||||
export default {
|
||||
loading: 'Loading...',
|
||||
categories: {
|
||||
basic: 'Basic',
|
||||
object: 'Objects',
|
||||
symbol: 'Symbols',
|
||||
arrow: 'Arrows',
|
||||
flowchart: 'Flowchart',
|
||||
animal: 'Animals',
|
||||
game: 'Cards & Chess',
|
||||
dialog_balloon: 'Dialog balloons',
|
||||
electronics: 'Electronics',
|
||||
math: 'Mathematical',
|
||||
music: 'Music',
|
||||
misc: 'Miscellaneous',
|
||||
raphael_1: 'raphaeljs.com set 1',
|
||||
raphael_2: 'raphaeljs.com set 2'
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
title: 'Shape library'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
51
dist/extensions/ext-locale/shapes/fr.js
vendored
@@ -1,29 +1,24 @@
|
||||
var svgEditorExtensionLocale_shapes_fr = (function () {
|
||||
'use strict';
|
||||
|
||||
var fr = {
|
||||
loading: 'Loading...',
|
||||
categories: {
|
||||
basic: 'Basic',
|
||||
object: 'Objects',
|
||||
symbol: 'Symbols',
|
||||
arrow: 'Arrows',
|
||||
flowchart: 'Flowchart',
|
||||
animal: 'Animals',
|
||||
game: 'Cards & Chess',
|
||||
dialog_balloon: 'Dialog balloons',
|
||||
electronics: 'Electronics',
|
||||
math: 'Mathematical',
|
||||
music: 'Music',
|
||||
misc: 'Miscellaneous',
|
||||
raphael_1: 'raphaeljs.com set 1',
|
||||
raphael_2: 'raphaeljs.com set 2'
|
||||
},
|
||||
buttons: [{
|
||||
export default {
|
||||
loading: 'Loading...',
|
||||
categories: {
|
||||
basic: 'Basic',
|
||||
object: 'Objects',
|
||||
symbol: 'Symbols',
|
||||
arrow: 'Arrows',
|
||||
flowchart: 'Flowchart',
|
||||
animal: 'Animals',
|
||||
game: 'Cards & Chess',
|
||||
dialog_balloon: 'Dialog balloons',
|
||||
electronics: 'Electronics',
|
||||
math: 'Mathematical',
|
||||
music: 'Music',
|
||||
misc: 'Miscellaneous',
|
||||
raphael_1: 'raphaeljs.com set 1',
|
||||
raphael_2: 'raphaeljs.com set 2'
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
title: "Bibliothèque d'images"
|
||||
}]
|
||||
};
|
||||
|
||||
return fr;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
51
dist/extensions/ext-locale/shapes/zh-CN.js
vendored
Normal file → Executable file
@@ -1,29 +1,24 @@
|
||||
var svgEditorExtensionLocale_shapes_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
loading: '正在加载...',
|
||||
categories: {
|
||||
basic: '基本',
|
||||
object: '对象',
|
||||
symbol: '符号',
|
||||
arrow: '箭头',
|
||||
flowchart: '工作流',
|
||||
animal: '动物',
|
||||
game: '棋牌',
|
||||
dialog_balloon: '会话框',
|
||||
electronics: '电子',
|
||||
math: '数学',
|
||||
music: '音乐',
|
||||
misc: '其他',
|
||||
raphael_1: 'raphaeljs.com 集合 1',
|
||||
raphael_2: 'raphaeljs.com 集合 2'
|
||||
},
|
||||
buttons: [{
|
||||
export default {
|
||||
loading: '正在加载...',
|
||||
categories: {
|
||||
basic: '基本',
|
||||
object: '对象',
|
||||
symbol: '符号',
|
||||
arrow: '箭头',
|
||||
flowchart: '工作流',
|
||||
animal: '动物',
|
||||
game: '棋牌',
|
||||
dialog_balloon: '会话框',
|
||||
electronics: '电子',
|
||||
math: '数学',
|
||||
music: '音乐',
|
||||
misc: '其他',
|
||||
raphael_1: 'raphaeljs.com 集合 1',
|
||||
raphael_2: 'raphaeljs.com 集合 2'
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
title: '图元库'
|
||||
}]
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
31
dist/extensions/ext-locale/star/en.js
vendored
@@ -1,23 +1,22 @@
|
||||
var svgEditorExtensionLocale_star_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'star',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: 'star',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Star Tool'
|
||||
}],
|
||||
contextTools: [{
|
||||
}
|
||||
],
|
||||
contextTools: [
|
||||
{
|
||||
title: 'Number of Sides',
|
||||
label: 'points'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: 'Pointiness',
|
||||
label: 'Pointiness'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: 'Twists the star',
|
||||
label: 'Radial Shift'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
31
dist/extensions/ext-locale/star/zh-CN.js
vendored
Normal file → Executable file
@@ -1,23 +1,22 @@
|
||||
var svgEditorExtensionLocale_star_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
name: '星形',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: '星形',
|
||||
buttons: [
|
||||
{
|
||||
title: '星形工具'
|
||||
}],
|
||||
contextTools: [{
|
||||
}
|
||||
],
|
||||
contextTools: [
|
||||
{
|
||||
title: '顶点',
|
||||
label: '顶点'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: '钝度',
|
||||
label: '钝度'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
title: '径向',
|
||||
label: '径向'
|
||||
}]
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
31
dist/extensions/ext-locale/storage/de.js
vendored
@@ -1,17 +1,14 @@
|
||||
var svgEditorExtensionLocale_storage_de = (function () {
|
||||
'use strict';
|
||||
|
||||
var de = {
|
||||
message: 'Standardmäßig kann SVG-Edit Ihre Editor-Einstellungen ' + 'und die SVG-Inhalte lokal auf Ihrem Gerät abspeichern. So brauchen Sie ' + 'nicht jedes Mal die SVG neu laden. Falls Sie aus Datenschutzgründen ' + 'dies nicht wollen, ' + 'können Sie die Standardeinstellung im Folgenden ändern.',
|
||||
storagePrefsAndContent: 'Store preferences and SVG content locally',
|
||||
storagePrefsOnly: 'Only store preferences locally',
|
||||
storagePrefs: 'Store preferences locally',
|
||||
storageNoPrefsOrContent: 'Do not store my preferences or SVG content locally',
|
||||
storageNoPrefs: 'Do not store my preferences locally',
|
||||
rememberLabel: 'Remember this choice?',
|
||||
rememberTooltip: 'If you choose to opt out of storage while remembering this choice, the URL will change so as to avoid asking again.'
|
||||
};
|
||||
|
||||
return de;
|
||||
|
||||
}());
|
||||
export default {
|
||||
message: 'Standardmäßig kann SVG-Edit Ihre Editor-Einstellungen ' +
|
||||
'und die SVG-Inhalte lokal auf Ihrem Gerät abspeichern. So brauchen Sie ' +
|
||||
'nicht jedes Mal die SVG neu laden. Falls Sie aus Datenschutzgründen ' +
|
||||
'dies nicht wollen, ' +
|
||||
'können Sie die Standardeinstellung im Folgenden ändern.',
|
||||
storagePrefsAndContent: 'Store preferences and SVG content locally',
|
||||
storagePrefsOnly: 'Only store preferences locally',
|
||||
storagePrefs: 'Store preferences locally',
|
||||
storageNoPrefsOrContent: 'Do not store my preferences or SVG content locally',
|
||||
storageNoPrefs: 'Do not store my preferences locally',
|
||||
rememberLabel: 'Remember this choice?',
|
||||
rememberTooltip: 'If you choose to opt out of storage while remembering this choice, the URL will change so as to avoid asking again.'
|
||||
};
|
||||
|
||||
31
dist/extensions/ext-locale/storage/en.js
vendored
@@ -1,17 +1,14 @@
|
||||
var svgEditorExtensionLocale_storage_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
message: 'By default and where supported, SVG-Edit can store your editor ' + 'preferences and SVG content locally on your machine so you do not ' + 'need to add these back each time you load SVG-Edit. If, for privacy ' + 'reasons, you do not wish to store this information on your machine, ' + 'you can change away from the default option below.',
|
||||
storagePrefsAndContent: 'Store preferences and SVG content locally',
|
||||
storagePrefsOnly: 'Only store preferences locally',
|
||||
storagePrefs: 'Store preferences locally',
|
||||
storageNoPrefsOrContent: 'Do not store my preferences or SVG content locally',
|
||||
storageNoPrefs: 'Do not store my preferences locally',
|
||||
rememberLabel: 'Remember this choice?',
|
||||
rememberTooltip: 'If you choose to opt out of storage while remembering this choice, the URL will change so as to avoid asking again.'
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
export default {
|
||||
message: 'By default and where supported, SVG-Edit can store your editor ' +
|
||||
'preferences and SVG content locally on your machine so you do not ' +
|
||||
'need to add these back each time you load SVG-Edit. If, for privacy ' +
|
||||
'reasons, you do not wish to store this information on your machine, ' +
|
||||
'you can change away from the default option below.',
|
||||
storagePrefsAndContent: 'Store preferences and SVG content locally',
|
||||
storagePrefsOnly: 'Only store preferences locally',
|
||||
storagePrefs: 'Store preferences locally',
|
||||
storageNoPrefsOrContent: 'Do not store my preferences or SVG content locally',
|
||||
storageNoPrefs: 'Do not store my preferences locally',
|
||||
rememberLabel: 'Remember this choice?',
|
||||
rememberTooltip: 'If you choose to opt out of storage while remembering this choice, the URL will change so as to avoid asking again.'
|
||||
};
|
||||
|
||||
31
dist/extensions/ext-locale/storage/fr.js
vendored
@@ -1,17 +1,14 @@
|
||||
var svgEditorExtensionLocale_storage_fr = (function () {
|
||||
'use strict';
|
||||
|
||||
var fr = {
|
||||
message: "Par défaut et si supporté, SVG-Edit peut stocker les préférences de l'éditeur " + "et le contenu SVG localement sur votre machine de sorte que vous n'ayez pas besoin de les " + 'rajouter chaque fois que vous chargez SVG-Edit. Si, pour des raisons de confidentialité, ' + 'vous ne souhaitez pas stocker ces données sur votre machine, vous pouvez changer ce ' + 'comportement ci-dessous.',
|
||||
storagePrefsAndContent: 'Store preferences and SVG content locally',
|
||||
storagePrefsOnly: 'Only store preferences locally',
|
||||
storagePrefs: 'Store preferences locally',
|
||||
storageNoPrefsOrContent: 'Do not store my preferences or SVG content locally',
|
||||
storageNoPrefs: 'Do not store my preferences locally',
|
||||
rememberLabel: 'Remember this choice?',
|
||||
rememberTooltip: "Si vous choisissez de désactiver le stockage en mémorisant le choix, l'URL va changer afin que la question ne vous soit plus reposée."
|
||||
};
|
||||
|
||||
return fr;
|
||||
|
||||
}());
|
||||
export default {
|
||||
message: "Par défaut et si supporté, SVG-Edit peut stocker les préférences de l'éditeur " +
|
||||
"et le contenu SVG localement sur votre machine de sorte que vous n'ayez pas besoin de les " +
|
||||
'rajouter chaque fois que vous chargez SVG-Edit. Si, pour des raisons de confidentialité, ' +
|
||||
'vous ne souhaitez pas stocker ces données sur votre machine, vous pouvez changer ce ' +
|
||||
'comportement ci-dessous.',
|
||||
storagePrefsAndContent: 'Store preferences and SVG content locally',
|
||||
storagePrefsOnly: 'Only store preferences locally',
|
||||
storagePrefs: 'Store preferences locally',
|
||||
storageNoPrefsOrContent: 'Do not store my preferences or SVG content locally',
|
||||
storageNoPrefs: 'Do not store my preferences locally',
|
||||
rememberLabel: 'Remember this choice?',
|
||||
rememberTooltip: "Si vous choisissez de désactiver le stockage en mémorisant le choix, l'URL va changer afin que la question ne vous soit plus reposée."
|
||||
};
|
||||
|
||||
28
dist/extensions/ext-locale/storage/zh-CN.js
vendored
Normal file → Executable file
@@ -1,17 +1,11 @@
|
||||
var svgEditorExtensionLocale_storage_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
message: '默认情况下, SVG-Edit 在本地保存配置参数和画布内容. 如果基于隐私考虑, ' + '您可以勾选以下选项修改配置.',
|
||||
storagePrefsAndContent: '本地存储配置参数和SVG图',
|
||||
storagePrefsOnly: '本地只存储配置参数',
|
||||
storagePrefs: '本地存储配置参数',
|
||||
storageNoPrefsOrContent: '本地不保存配置参数和SVG图',
|
||||
storageNoPrefs: '本地不保存配置参数',
|
||||
rememberLabel: '记住选择?',
|
||||
rememberTooltip: '如果您勾选记住选择,将不再弹出本窗口.'
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
export default {
|
||||
message: '默认情况下, SVG-Edit 在本地保存配置参数和画布内容. 如果基于隐私考虑, ' +
|
||||
'您可以勾选以下选项修改配置.',
|
||||
storagePrefsAndContent: '本地存储配置参数和SVG图',
|
||||
storagePrefsOnly: '本地只存储配置参数',
|
||||
storagePrefs: '本地存储配置参数',
|
||||
storageNoPrefsOrContent: '本地不保存配置参数和SVG图',
|
||||
storageNoPrefs: '本地不保存配置参数',
|
||||
rememberLabel: '记住选择?',
|
||||
rememberTooltip: '如果您勾选记住选择,将不再弹出本窗口.'
|
||||
};
|
||||
|
||||
19
dist/extensions/ext-locale/webappfind/en.js
vendored
@@ -1,13 +1,8 @@
|
||||
var svgEditorExtensionLocale_webappfind_en = (function () {
|
||||
'use strict';
|
||||
|
||||
var en = {
|
||||
name: 'WebAppFind',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: 'WebAppFind',
|
||||
buttons: [
|
||||
{
|
||||
title: 'Save Image back to Disk'
|
||||
}]
|
||||
};
|
||||
|
||||
return en;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
19
dist/extensions/ext-locale/webappfind/zh-CN.js
vendored
Normal file → Executable file
@@ -1,13 +1,8 @@
|
||||
var svgEditorExtensionLocale_webappfind_zh_CN = (function () {
|
||||
'use strict';
|
||||
|
||||
var zhCN = {
|
||||
name: 'WebAppFind',
|
||||
buttons: [{
|
||||
export default {
|
||||
name: 'WebAppFind',
|
||||
buttons: [
|
||||
{
|
||||
title: '保存图片到磁盘'
|
||||
}]
|
||||
};
|
||||
|
||||
return zhCN;
|
||||
|
||||
}());
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
1352
dist/extensions/ext-markers.js
vendored
625
dist/extensions/ext-mathjax.js
vendored
@@ -1,360 +1,307 @@
|
||||
var svgEditorExtension_mathjax = (function () {
|
||||
'use strict';
|
||||
/* globals MathJax */
|
||||
/**
|
||||
* @file ext-mathjax.js
|
||||
*
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2013 Jo Segaert
|
||||
*
|
||||
*/
|
||||
// Todo: Wait for Mathjax 3.0 to get ES Module/avoid global
|
||||
import {importScript} from '../../external/dynamic-import-polyfill/importModule.js';
|
||||
|
||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
export default {
|
||||
name: 'mathjax',
|
||||
async init ({$, importLocale}) {
|
||||
const strings = await importLocale();
|
||||
const svgEditor = this;
|
||||
const svgCanvas = svgEditor.canvas;
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
Promise.resolve(value).then(_next, _throw);
|
||||
}
|
||||
}
|
||||
// Configuration of the MathJax extention.
|
||||
|
||||
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);
|
||||
// This will be added to the head tag before MathJax is loaded.
|
||||
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;
|
||||
|
||||
/**
|
||||
* Add any of the whitelisted attributes to the script tag.
|
||||
* @param {HTMLScriptElement} script
|
||||
* @param {PlainObject<string, string>} atts
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
|
||||
function addScriptAtts(script, atts) {
|
||||
['id', 'class', 'type'].forEach(function (prop) {
|
||||
if (prop in atts) {
|
||||
script[prop] = atts[prop];
|
||||
// TODO: Implement language support. Move these uiStrings to the locale files and
|
||||
// the code to the langReady callback. Also i18nize alert and HTML below
|
||||
$.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'
|
||||
}
|
||||
});
|
||||
} // Additions by Brett
|
||||
|
||||
function importScript(url) {
|
||||
var atts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
function saveMath () {
|
||||
const code = $('#mathjax_code_textarea').val();
|
||||
// displaystyle to force MathJax NOT to use the inline style. Because it is
|
||||
// less fancy!
|
||||
MathJax.Hub.queue.Push(['Text', math, '\\displaystyle{' + code + '}']);
|
||||
|
||||
if (Array.isArray(url)) {
|
||||
return Promise.all(url.map(function (u) {
|
||||
return importScript(u, atts);
|
||||
}));
|
||||
/*
|
||||
* The MathJax library doesn't want to bloat your webpage so it creates
|
||||
* every symbol (glymph) you need only once. These are saved in a `<svg>` on
|
||||
* the top of your html document, just under the body tag. Each glymph has
|
||||
* its unique id and is saved as a `<path>` in the `<defs>` tag of the `<svg>`
|
||||
*
|
||||
* Then when the symbols are needed in the rest of your html document they
|
||||
* are refferd to by a `<use>` tag.
|
||||
* Because of bug 1076 we can't just grab the defs tag on the top and add it
|
||||
* to your formula's `<svg>` and copy the lot. So we have to replace each
|
||||
* `<use>` tag by its `<path>`.
|
||||
*/
|
||||
MathJax.Hub.queue.Push(
|
||||
function () {
|
||||
const mathjaxMath = $('.MathJax_SVG');
|
||||
const svg = $(mathjaxMath.html());
|
||||
svg.find('use').each(function () {
|
||||
// TODO: find a less pragmatic and more elegant solution to this.
|
||||
const id = $(this).attr('href')
|
||||
? $(this).attr('href').slice(1) // Works in Chrome.
|
||||
: $(this).attr('xlink:href').slice(1); // Works in Firefox.
|
||||
const glymph = $('#' + id).clone().removeAttr('id');
|
||||
const x = $(this).attr('x');
|
||||
const y = $(this).attr('y');
|
||||
const transform = $(this).attr('transform');
|
||||
if (transform && (x || y)) {
|
||||
glymph.attr('transform', transform + ' translate(' + x + ',' + y + ')');
|
||||
} else if (transform) {
|
||||
glymph.attr('transform', transform);
|
||||
} else if (x || y) {
|
||||
glymph.attr('transform', 'translate(' + x + ',' + y + ')');
|
||||
}
|
||||
$(this).replaceWith(glymph);
|
||||
});
|
||||
// Remove the style tag because it interferes with SVG-Edit.
|
||||
svg.removeAttr('style');
|
||||
svg.attr('xmlns', 'http://www.w3.org/2000/svg');
|
||||
svgCanvas.importSvgString($('<div>').append(svg.clone()).html(), true);
|
||||
svgCanvas.ungroupSelectedElement();
|
||||
// TODO: To undo the adding of the Formula you now have to undo twice.
|
||||
// This should only be once!
|
||||
svgCanvas.moveSelectedElements(locationX, locationY, true);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
// eslint-disable-line promise/avoid-new
|
||||
var script = document.createElement('script');
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
const buttons = [{
|
||||
id: 'tool_mathjax',
|
||||
type: 'mode',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'mathjax.png',
|
||||
events: {
|
||||
async click () {
|
||||
// Set the mode.
|
||||
svgCanvas.setMode('mathjax');
|
||||
|
||||
function scriptOnError() {
|
||||
reject(new Error("Failed to import: ".concat(url)));
|
||||
destructor();
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
// 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'
|
||||
});
|
||||
|
||||
function scriptOnLoad() {
|
||||
resolve();
|
||||
destructor();
|
||||
}
|
||||
// Add functionality and picture to cancel button.
|
||||
$('#tool_mathjax_cancel').prepend($.getSvgIcon('cancel', true))
|
||||
.on('click touched', function () {
|
||||
$('#mathjax').hide();
|
||||
});
|
||||
|
||||
var destructor = function destructor() {
|
||||
script.removeEventListener('error', scriptOnError);
|
||||
script.removeEventListener('load', scriptOnLoad);
|
||||
script.remove();
|
||||
script.src = '';
|
||||
};
|
||||
// Add functionality and picture to the save button.
|
||||
$('#tool_mathjax_save').prepend($.getSvgIcon('ok', true))
|
||||
.on('click touched', function () {
|
||||
saveMath();
|
||||
$('#mathjax').hide();
|
||||
});
|
||||
|
||||
script.defer = 'defer';
|
||||
addScriptAtts(script, atts);
|
||||
script.addEventListener('error', scriptOnError);
|
||||
script.addEventListener('load', scriptOnLoad);
|
||||
script.src = url;
|
||||
document.head.append(script);
|
||||
});
|
||||
}
|
||||
// MathJax preprocessing has to ignore most of the page.
|
||||
$('body').addClass('tex2jax_ignore');
|
||||
|
||||
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!
|
||||
|
||||
MathJax.Hub.queue.Push(['Text', math, '\\displaystyle{' + code + '}']);
|
||||
/*
|
||||
* The MathJax library doesn't want to bloat your webpage so it creates
|
||||
* every symbol (glymph) you need only once. These are saved in a `<svg>` on
|
||||
* the top of your html document, just under the body tag. Each glymph has
|
||||
* its unique id and is saved as a `<path>` in the `<defs>` tag of the `<svg>`
|
||||
*
|
||||
* Then when the symbols are needed in the rest of your html document they
|
||||
* are refferd to by a `<use>` tag.
|
||||
* Because of bug 1076 we can't just grab the defs tag on the top and add it
|
||||
* to your formula's `<svg>` and copy the lot. So we have to replace each
|
||||
* `<use>` tag by its `<path>`.
|
||||
*/
|
||||
|
||||
MathJax.Hub.queue.Push(function () {
|
||||
var mathjaxMath = $('.MathJax_SVG');
|
||||
var svg = $(mathjaxMath.html());
|
||||
svg.find('use').each(function () {
|
||||
// TODO: find a less pragmatic and more elegant solution to this.
|
||||
var id = $(this).attr('href') ? $(this).attr('href').slice(1) // Works in Chrome.
|
||||
: $(this).attr('xlink:href').slice(1); // Works in Firefox.
|
||||
|
||||
var glymph = $('#' + id).clone().removeAttr('id');
|
||||
var x = $(this).attr('x');
|
||||
var y = $(this).attr('y');
|
||||
var transform = $(this).attr('transform');
|
||||
|
||||
if (transform && (x || y)) {
|
||||
glymph.attr('transform', transform + ' translate(' + x + ',' + y + ')');
|
||||
} else if (transform) {
|
||||
glymph.attr('transform', transform);
|
||||
} else if (x || y) {
|
||||
glymph.attr('transform', 'translate(' + x + ',' + y + ')');
|
||||
}
|
||||
|
||||
$(this).replaceWith(glymph);
|
||||
}); // Remove the style tag because it interferes with SVG-Edit.
|
||||
|
||||
svg.removeAttr('style');
|
||||
svg.attr('xmlns', 'http://www.w3.org/2000/svg');
|
||||
svgCanvas.importSvgString($('<div>').append(svg.clone()).html(), true);
|
||||
svgCanvas.ungroupSelectedElement(); // TODO: To undo the adding of the Formula you now have to undo twice.
|
||||
// This should only be once!
|
||||
|
||||
svgCanvas.moveSelectedElements(locationX, locationY, true);
|
||||
});
|
||||
};
|
||||
|
||||
$ = _ref.$, importLocale = _ref.importLocale;
|
||||
_context2.next = 4;
|
||||
return importLocale();
|
||||
|
||||
case 4:
|
||||
strings = _context2.sent;
|
||||
svgEditor = _this;
|
||||
svgCanvas = svgEditor.canvas; // Configuration of the MathJax extention.
|
||||
// This will be added to the head tag before MathJax is loaded.
|
||||
|
||||
/* 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.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
|
||||
|
||||
$.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();
|
||||
// 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
|
||||
});
|
||||
} catch (e) {
|
||||
console.log('Failed loading MathJax.'); // eslint-disable-line no-console
|
||||
$.alert('Failed loading MathJax. You will not be able to change the mathematics.');
|
||||
}
|
||||
}
|
||||
}, _callee2);
|
||||
}))();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}];
|
||||
|
||||
return extMathjax;
|
||||
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');
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
306
dist/extensions/ext-overview_window.js
vendored
@@ -1,153 +1,159 @@
|
||||
var svgEditorExtension_overview_window = (function () {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @file ext-overview_window.js
|
||||
*
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2013 James Sacksteder
|
||||
*
|
||||
*/
|
||||
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
|
||||
// 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));
|
||||
|
||||
if (chromeVersion < 49) {
|
||||
return undefined;
|
||||
}
|
||||
} // 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>';
|
||||
$('#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;
|
||||
$('#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');
|
||||
$('#overview_window_view_box').css('left', viewBoxX + 'px');
|
||||
};
|
||||
|
||||
$('#workarea').scroll(function () {
|
||||
if (!overviewWindowGlobals.viewBoxDragging) {
|
||||
updateViewBox();
|
||||
}
|
||||
});
|
||||
$('#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;
|
||||
|
||||
if (isIE()) {
|
||||
// This has only been tested with Firefox 10 and IE 9 (without chrome frame).
|
||||
// I am not sure if if is Firefox or IE that is being non compliant here.
|
||||
// Either way the one that is noncompliant may become more compliant later.
|
||||
// TAG:HACK
|
||||
// TAG:VERSION_DEPENDENT
|
||||
// TAG:BROWSER_SNIFFING
|
||||
viewX = 0;
|
||||
viewY = 0;
|
||||
}
|
||||
|
||||
var svgWidthOld = $('#overviewMiniView').attr('width');
|
||||
var svgHeightNew = viewHeight / viewWidth * svgWidthOld;
|
||||
$('#overviewMiniView').attr('viewBox', viewX + ' ' + viewY + ' ' + viewWidth + ' ' + viewHeight);
|
||||
$('#overviewMiniView').attr('height', svgHeightNew);
|
||||
updateViewBox();
|
||||
};
|
||||
|
||||
updateViewDimensions(); // Set up the overview window as a controller for the view port.
|
||||
|
||||
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;
|
||||
$('#workarea').scrollLeft(portX);
|
||||
$('#workarea').scrollTop(portY);
|
||||
};
|
||||
|
||||
$('#overview_window_view_box').draggable({
|
||||
containment: 'parent',
|
||||
drag: updateViewPortFromViewBox,
|
||||
start: function start() {
|
||||
overviewWindowGlobals.viewBoxDragging = true;
|
||||
},
|
||||
stop: function 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
|
||||
|
||||
if (viewBoxX < 0) {
|
||||
viewBoxX = 0;
|
||||
}
|
||||
|
||||
if (viewBoxY < 0) {
|
||||
viewBoxY = 0;
|
||||
}
|
||||
|
||||
if (viewBoxX + viewBoxWidth > overviewWidth) {
|
||||
viewBoxX = overviewWidth - viewBoxWidth;
|
||||
}
|
||||
|
||||
if (viewBoxY + viewBoxHeight > overviewHeight) {
|
||||
viewBoxY = overviewHeight - viewBoxHeight;
|
||||
}
|
||||
|
||||
$('#overview_window_view_box').css('top', viewBoxY + 'px');
|
||||
$('#overview_window_view_box').css('left', viewBoxX + 'px');
|
||||
updateViewPortFromViewBox();
|
||||
});
|
||||
return {
|
||||
name: 'overview window',
|
||||
canvasUpdated: updateViewDimensions,
|
||||
workareaResized: updateViewBox
|
||||
};
|
||||
/**
|
||||
* @file ext-overview_window.js
|
||||
*
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2013 James Sacksteder
|
||||
*
|
||||
*/
|
||||
export default {
|
||||
name: 'overview_window',
|
||||
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()) {
|
||||
const verIndex = navigator.userAgent.indexOf('Chrome/') + 7;
|
||||
const chromeVersion = Number.parseInt(navigator.userAgent.substring(verIndex));
|
||||
if (chromeVersion < 49) {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return extOverview_window;
|
||||
// Define and insert the base html element.
|
||||
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.
|
||||
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');
|
||||
$('#overview_window_view_box').css('left', viewBoxX + 'px');
|
||||
};
|
||||
$('#workarea').scroll(function () {
|
||||
if (!(overviewWindowGlobals.viewBoxDragging)) {
|
||||
updateViewBox();
|
||||
}
|
||||
});
|
||||
$('#workarea').resize(updateViewBox);
|
||||
updateViewBox();
|
||||
|
||||
// Compensate for changes in zoom and canvas size.
|
||||
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).
|
||||
// I am not sure if if is Firefox or IE that is being non compliant here.
|
||||
// Either way the one that is noncompliant may become more compliant later.
|
||||
// TAG:HACK
|
||||
// TAG:VERSION_DEPENDENT
|
||||
// TAG:BROWSER_SNIFFING
|
||||
viewX = 0;
|
||||
viewY = 0;
|
||||
}
|
||||
|
||||
const svgWidthOld = $('#overviewMiniView').attr('width');
|
||||
const svgHeightNew = viewHeight / viewWidth * svgWidthOld;
|
||||
$('#overviewMiniView').attr('viewBox', viewX + ' ' + viewY + ' ' + viewWidth + ' ' + viewHeight);
|
||||
$('#overviewMiniView').attr('height', svgHeightNew);
|
||||
updateViewBox();
|
||||
};
|
||||
updateViewDimensions();
|
||||
|
||||
// Set up the overview window as a controller for the view port.
|
||||
overviewWindowGlobals.viewBoxDragging = false;
|
||||
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);
|
||||
};
|
||||
$('#overview_window_view_box').draggable({
|
||||
containment: 'parent',
|
||||
drag: updateViewPortFromViewBox,
|
||||
start () { overviewWindowGlobals.viewBoxDragging = true; },
|
||||
stop () { overviewWindowGlobals.viewBoxDragging = false; }
|
||||
});
|
||||
$('#overviewMiniView').click(function (evt) {
|
||||
// Firefox doesn't support evt.offsetX and evt.offsetY.
|
||||
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;
|
||||
}
|
||||
if (viewBoxY < 0) {
|
||||
viewBoxY = 0;
|
||||
}
|
||||
if (viewBoxX + viewBoxWidth > overviewWidth) {
|
||||
viewBoxX = overviewWidth - viewBoxWidth;
|
||||
}
|
||||
if (viewBoxY + viewBoxHeight > overviewHeight) {
|
||||
viewBoxY = overviewHeight - viewBoxHeight;
|
||||
}
|
||||
|
||||
$('#overview_window_view_box').css('top', viewBoxY + 'px');
|
||||
$('#overview_window_view_box').css('left', viewBoxX + 'px');
|
||||
updateViewPortFromViewBox();
|
||||
});
|
||||
|
||||
return {
|
||||
name: 'overview window',
|
||||
canvasUpdated: updateViewDimensions,
|
||||
workareaResized: updateViewBox
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
167
dist/extensions/ext-panning.js
vendored
@@ -1,122 +1,53 @@
|
||||
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);
|
||||
/**
|
||||
* @file ext-panning.js
|
||||
*
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2013 Luis Aguirre
|
||||
*
|
||||
*/
|
||||
/*
|
||||
This is a very basic SVG-Edit extension to let tablet/mobile devices pan without problem
|
||||
*/
|
||||
export default {
|
||||
name: 'panning',
|
||||
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');
|
||||
}
|
||||
|
||||
function _throw(err) {
|
||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
||||
}
|
||||
}];
|
||||
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};
|
||||
}
|
||||
|
||||
_next(undefined);
|
||||
});
|
||||
return undefined;
|
||||
},
|
||||
mouseUp () {
|
||||
if (svgCanvas.getMode() === 'ext-panning') {
|
||||
svgEditor.setPanning(false);
|
||||
return {
|
||||
keep: false,
|
||||
element: null
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @file ext-panning.js
|
||||
*
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2013 Luis Aguirre
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
This is a very basic SVG-Edit extension to let tablet/mobile devices pan without problem
|
||||
*/
|
||||
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();
|
||||
}
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
}
|
||||
};
|
||||
|
||||
return extPanning;
|
||||
|
||||
}());
|
||||
};
|
||||
|
||||
6
dist/extensions/ext-panning.xml
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="ext-panning">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
|
||||
<path d="m8.00038,150.84583l51.60005,-51.78485l0,25.89205l26.28711,0l35.45559,-0.20444l-0.72941,-24.34613l0.93304,-37.61812l-25.79949,0l51.5997,-51.78508l51.60047,51.78508l-25.80024,0l0,33.87256l1.13677,26.21891l21.45996,2.07722l39.3497,0l0,-25.89205l51.60043,51.78485l-51.60043,51.78563l0,-25.89281l-38.41666,-0.93639l-20.52692,0.20445l-3.00285,42.13754l0,20.76308l25.80024,0l-51.60047,51.78561l-51.5997,-51.78561l25.79949,0l0,-20.76308l0.72941,-41.20115l-41.98688,-0.20445l-20.68886,0l0,25.89281l-51.60005,-51.78563z" fill="#b2b2b2" id="svg_1" stroke="#000000" stroke-width="10"/> </svg>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 789 B |
63
dist/extensions/ext-php_savefile.js
vendored
@@ -1,39 +1,30 @@
|
||||
var svgEditorExtension_php_savefile = (function () {
|
||||
'use strict';
|
||||
// TODO: Might add support for "exportImage" custom
|
||||
// handler as in "ext-server_opensave.js" (and in savefile.php)
|
||||
|
||||
// TODO: Might add support for "exportImage" custom
|
||||
// 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;
|
||||
/**
|
||||
* Get file name out of SVGEdit document title.
|
||||
* @returns {string}
|
||||
*/
|
||||
|
||||
function getFileNameFromTitle() {
|
||||
var title = svgCanvas.getDocumentTitle();
|
||||
return title.trim();
|
||||
}
|
||||
|
||||
var saveSvgAction = extPath + 'savefile.php';
|
||||
svgEditor.setCustomHandlers({
|
||||
save: function save(win, data) {
|
||||
var svg = '<?xml version="1.0" encoding="UTF-8"?>\n' + data,
|
||||
filename = getFileNameFromTitle();
|
||||
$.post(saveSvgAction, {
|
||||
output_svg: svg,
|
||||
filename: filename
|
||||
});
|
||||
}
|
||||
});
|
||||
export default {
|
||||
name: 'php_savefile',
|
||||
init ({$}) {
|
||||
const svgEditor = this;
|
||||
const {
|
||||
curConfig: {extPath},
|
||||
canvas: svgCanvas
|
||||
} = svgEditor;
|
||||
/**
|
||||
* Get file name out of SVGEdit document title.
|
||||
* @returns {string}
|
||||
*/
|
||||
function getFileNameFromTitle () {
|
||||
const title = svgCanvas.getDocumentTitle();
|
||||
return title.trim();
|
||||
}
|
||||
};
|
||||
const saveSvgAction = extPath + 'savefile.php';
|
||||
svgEditor.setCustomHandlers({
|
||||
save (win, data) {
|
||||
const svg = '<?xml version="1.0" encoding="UTF-8"?>\n' + data,
|
||||
filename = getFileNameFromTitle();
|
||||
|
||||
return extPhp_savefile;
|
||||
|
||||
}());
|
||||
$.post(saveSvgAction, {output_svg: svg, filename});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
1244
dist/extensions/ext-placemark.js
vendored
596
dist/extensions/ext-polygon.js
vendored
@@ -1,309 +1,309 @@
|
||||
var svgEditorExtension_polygon = (function () {
|
||||
'use strict';
|
||||
/**
|
||||
* @file ext-polygon.js
|
||||
*
|
||||
*
|
||||
* @copyright 2010 CloudCanvas, Inc. All rights reserved
|
||||
*
|
||||
*/
|
||||
export default {
|
||||
name: 'polygon',
|
||||
async init (S) {
|
||||
const svgEditor = this;
|
||||
const svgCanvas = svgEditor.canvas;
|
||||
const {$, importLocale} = S, // {svgcontent}
|
||||
// addElem = svgCanvas.addSVGElementFromJson,
|
||||
editingitex = false;
|
||||
const strings = await importLocale();
|
||||
let selElems,
|
||||
// svgdoc = S.svgroot.parentNode.ownerDocument,
|
||||
// newFOG, newFOGParent, newDef, newImageName, newMaskID, modeChangeG,
|
||||
// edg = 0,
|
||||
// undoCommand = 'Not image';
|
||||
started, newFO;
|
||||
|
||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
// const ccZoom;
|
||||
// const wEl, hEl;
|
||||
// const wOffset, hOffset;
|
||||
// const ccRBG;
|
||||
// const ccOpacity;
|
||||
// const brushW, brushH;
|
||||
|
||||
// const ccDebug = document.getElementById('debugpanel');
|
||||
|
||||
/* 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}
|
||||
*/
|
||||
function showPanel (on) {
|
||||
let fcRules = $('#fc_rules');
|
||||
if (!fcRules.length) {
|
||||
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
||||
}
|
||||
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
||||
$('#polygon_panel').toggle(on);
|
||||
}
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
Promise.resolve(value).then(_next, _throw);
|
||||
/*
|
||||
function toggleSourceButtons(on){
|
||||
$('#tool_source_save, #tool_source_cancel').toggle(!on);
|
||||
$('#polygon_save, #polygon_cancel').toggle(on);
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
function _asyncToGenerator(fn) {
|
||||
return function () {
|
||||
var self = this,
|
||||
args = arguments;
|
||||
return new Promise(function (resolve, reject) {
|
||||
var gen = fn.apply(self, args);
|
||||
/**
|
||||
* @param {string} attr
|
||||
* @param {string|Float} val
|
||||
* @returns {void}
|
||||
*/
|
||||
function setAttr (attr, val) {
|
||||
svgCanvas.changeSelectedAttribute(attr, val);
|
||||
svgCanvas.call('changed', selElems);
|
||||
}
|
||||
|
||||
function _next(value) {
|
||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
||||
/**
|
||||
* @param {Float} n
|
||||
* @returns {Float}
|
||||
*/
|
||||
function cot (n) {
|
||||
return 1 / Math.tan(n);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Float} n
|
||||
* @returns {Float}
|
||||
*/
|
||||
function sec (n) {
|
||||
return 1 / Math.cos(n);
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtained from http://code.google.com/p/passenger-top/source/browse/instiki/public/svg-edit/editor/extensions/ext-itex.js?r=3
|
||||
* 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;
|
||||
}
|
||||
*/
|
||||
const buttons = [{
|
||||
id: 'tool_polygon',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'polygon.png',
|
||||
type: 'mode',
|
||||
position: 11,
|
||||
events: {
|
||||
click () {
|
||||
svgCanvas.setMode('polygon');
|
||||
showPanel(true);
|
||||
}
|
||||
}
|
||||
}];
|
||||
const contextTools = [{
|
||||
type: 'input',
|
||||
panel: 'polygon_panel',
|
||||
id: 'polySides',
|
||||
size: 3,
|
||||
defval: 5,
|
||||
events: {
|
||||
change () {
|
||||
setAttr('sides', this.value);
|
||||
}
|
||||
}
|
||||
}];
|
||||
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);
|
||||
}),
|
||||
|
||||
callback () {
|
||||
$('#polygon_panel').hide();
|
||||
|
||||
const endChanges = function () {
|
||||
// Todo: Missing?
|
||||
};
|
||||
|
||||
// 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', 'polygon_save'
|
||||
).unbind().appendTo(
|
||||
'#tool_source_back'
|
||||
).click(function () {
|
||||
if (!editingitex) {
|
||||
return;
|
||||
}
|
||||
// Todo: Uncomment the setItexString() function above and handle ajaxEndpoint?
|
||||
/*
|
||||
if (!setItexString($('#svg_source_textarea').val())) {
|
||||
const ok = await $.confirm('Errors found. Revert to original?', function (ok) {
|
||||
if (!ok) {
|
||||
return false;
|
||||
}
|
||||
endChanges();
|
||||
} else { */
|
||||
endChanges();
|
||||
// }
|
||||
// setSelectMode();
|
||||
});
|
||||
|
||||
/* const cancel = */ $('#tool_source_cancel').clone().hide().attr(
|
||||
'id', 'polygon_cancel'
|
||||
).unbind().appendTo('#tool_source_back').click(function () {
|
||||
endChanges();
|
||||
});
|
||||
}, 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 + ' ';
|
||||
}
|
||||
|
||||
function _throw(err) {
|
||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
||||
}
|
||||
// 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
|
||||
};
|
||||
},
|
||||
|
||||
_next(undefined);
|
||||
});
|
||||
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);
|
||||
}
|
||||
}
|
||||
},
|
||||
elementChanged (opts) {
|
||||
// const elem = opts.elems[0];
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @file ext-polygon.js
|
||||
*
|
||||
*
|
||||
* @copyright 2010 CloudCanvas, Inc. All rights reserved
|
||||
*
|
||||
*/
|
||||
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);
|
||||
};
|
||||
|
||||
cot = function _cot(n) {
|
||||
return 1 / Math.tan(n);
|
||||
};
|
||||
|
||||
setAttr = function _setAttr(attr, val) {
|
||||
svgCanvas.changeSelectedAttribute(attr, val);
|
||||
svgCanvas.call('changed', selElems);
|
||||
};
|
||||
|
||||
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; }');
|
||||
$('#polygon_panel').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();
|
||||
|
||||
|
||||
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;
|
||||
|
||||
|
||||
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;
|
||||
|
||||
|
||||
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 = '';
|
||||
|
||||
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');
|
||||
|
||||
|
||||
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: function mouseUp(opts) {
|
||||
if (svgCanvas.getMode() !== 'polygon') {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
var attrs = $(newFO).attr('edge');
|
||||
var keep = attrs.edge !== '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;
|
||||
|
||||
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];
|
||||
}
|
||||
});
|
||||
|
||||
case 13:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
}
|
||||
};
|
||||
|
||||
return extPolygon;
|
||||
|
||||
}());
|
||||
};
|
||||
|
||||
5046
dist/extensions/ext-server_moinsave.js
vendored
5467
dist/extensions/ext-server_opensave.js
vendored
797
dist/extensions/ext-shapes.js
vendored
@@ -1,441 +1,376 @@
|
||||
var svgEditorExtension_shapes = (function () {
|
||||
'use strict';
|
||||
/**
|
||||
* @file ext-shapes.js
|
||||
*
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2010 Christian Tzurcanu, 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
export default {
|
||||
name: 'shapes',
|
||||
async init ({$, importLocale}) {
|
||||
const strings = await importLocale();
|
||||
const svgEditor = this;
|
||||
const canv = svgEditor.canvas;
|
||||
const svgroot = canv.getRootElem();
|
||||
let lastBBox = {};
|
||||
|
||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
// This populates the category list
|
||||
const {categories} = strings;
|
||||
/* eslint-disable max-len */
|
||||
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: []
|
||||
}
|
||||
};
|
||||
/* eslint-enable max-len */
|
||||
const modeId = 'shapelib';
|
||||
const startClientPos = {};
|
||||
|
||||
let currentD, curShapeId, curShape, startX, startY;
|
||||
let curLib = library.basic;
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
function loadIcons () {
|
||||
$('#shape_buttons').empty().append(curLib.buttons);
|
||||
}
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
Promise.resolve(value).then(_next, _throw);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @typedef {PlainObject} module:Extension.Shapes.Shapes
|
||||
* @property {PlainObject<string, string>} data
|
||||
* @property {Integer} [size]
|
||||
* @property {boolean} [fill]
|
||||
*/
|
||||
|
||||
function _asyncToGenerator(fn) {
|
||||
return function () {
|
||||
var self = this,
|
||||
args = arguments;
|
||||
return new Promise(function (resolve, reject) {
|
||||
var gen = fn.apply(self, args);
|
||||
/**
|
||||
* @param {string|"basic"} cat Category ID
|
||||
* @param {module:Extension.Shapes.Shapes} shapes
|
||||
* @returns {void}
|
||||
*/
|
||||
function makeButtons (cat, shapes) {
|
||||
const size = curLib.size || 300;
|
||||
const fill = curLib.fill || false;
|
||||
const off = size * 0.05;
|
||||
const vb = [-off, -off, size + off * 2, size + off * 2].join(' ');
|
||||
const stroke = fill ? 0 : (size / 30);
|
||||
const shapeIcon = new DOMParser().parseFromString(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg">' +
|
||||
'<svg viewBox="' + vb + '">' +
|
||||
'<path fill="' + (fill ? '#333' : 'none') +
|
||||
'" stroke="#000" stroke-width="' + stroke + '" /></svg></svg>',
|
||||
'text/xml'
|
||||
);
|
||||
|
||||
function _next(value) {
|
||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
||||
}
|
||||
const width = 24;
|
||||
const height = 24;
|
||||
shapeIcon.documentElement.setAttribute('width', width);
|
||||
shapeIcon.documentElement.setAttribute('height', height);
|
||||
const svgElem = $(document.importNode(shapeIcon.documentElement, true));
|
||||
|
||||
function _throw(err) {
|
||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
||||
}
|
||||
const {data} = shapes;
|
||||
|
||||
_next(undefined);
|
||||
curLib.buttons = Object.entries(data).map(([id, pathD]) => {
|
||||
const icon = svgElem.clone();
|
||||
icon.find('path').attr('d', pathD);
|
||||
|
||||
const iconBtn = icon.wrap('<div class="tool_button">').parent().attr({
|
||||
id: modeId + '_' + id,
|
||||
title: id
|
||||
});
|
||||
// Store for later use
|
||||
return iconBtn[0];
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string|"basic"} catId
|
||||
* @returns {void}
|
||||
*/
|
||||
function loadLibrary (catId) {
|
||||
const lib = library[catId];
|
||||
|
||||
if (!lib) {
|
||||
$('#shape_buttons').html(strings.loading);
|
||||
$.getJSON(svgEditor.curConfig.extIconsPath + 'shapelib/' + catId + '.json', function (result) {
|
||||
curLib = library[catId] = {
|
||||
data: result.data,
|
||||
size: result.size,
|
||||
fill: result.fill
|
||||
};
|
||||
makeButtons(catId, result);
|
||||
loadIcons();
|
||||
});
|
||||
return;
|
||||
}
|
||||
curLib = lib;
|
||||
if (!lib.buttons.length) { makeButtons(catId, lib); }
|
||||
loadIcons();
|
||||
}
|
||||
const buttons = [{
|
||||
id: 'tool_shapelib',
|
||||
icon: svgEditor.curConfig.extIconsPath + 'shapes.png',
|
||||
type: 'mode_flyout', // _flyout
|
||||
position: 6,
|
||||
events: {
|
||||
click () {
|
||||
canv.setMode(modeId);
|
||||
}
|
||||
}
|
||||
}];
|
||||
|
||||
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
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
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
|
||||
*
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2010 Christian Tzurcanu, 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
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];
|
||||
|
||||
if (!lib) {
|
||||
$('#shape_buttons').html(strings.loading);
|
||||
$.getJSON(svgEditor.curConfig.extIconsPath + 'shapelib/' + catId + '.json', function (result) {
|
||||
curLib = library[catId] = {
|
||||
data: result.data,
|
||||
size: result.size,
|
||||
fill: result.fill
|
||||
};
|
||||
makeButtons(catId, result);
|
||||
loadIcons();
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
curLib = lib;
|
||||
|
||||
if (!lib.buttons.length) {
|
||||
makeButtons(catId, lib);
|
||||
}
|
||||
|
||||
loadIcons();
|
||||
};
|
||||
|
||||
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;
|
||||
/* eslint-disable max-len */
|
||||
|
||||
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: []
|
||||
}
|
||||
};
|
||||
/* eslint-enable max-len */
|
||||
|
||||
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
|
||||
|
||||
|
||||
var translateOrigin = svgroot.createSVGTransform(),
|
||||
scale = svgroot.createSVGTransform(),
|
||||
translateBack = svgroot.createSVGTransform();
|
||||
translateOrigin.setTranslate(-(left + tx), -(top + ty));
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
var keepObject = opts.event.clientX !== startClientPos.x && opts.event.clientY !== startClientPos.y;
|
||||
return {
|
||||
keep: keepObject,
|
||||
element: curShape,
|
||||
started: false
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
case 18:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
}
|
||||
};
|
||||
|
||||
return extShapes;
|
||||
|
||||
}());
|
||||
};
|
||||
|
||||
10
dist/extensions/ext-shapes.xml
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="tool_shapelib">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
|
||||
<path fill="#c0c0c0" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m70,194.72501l0,0c0,-10.30901 35.8172,-18.666 80,-18.666c44.18298,0 80,8.35699 80,18.666l0,74.66699c0,10.30899 -35.81702,18.66699 -80,18.66699c-44.1828,0 -80,-8.358 -80,-18.66699l0,-74.66699z"/>
|
||||
<path fill="#c0c0c0" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m70,114.608l0,0c0,-10.309 35.8172,-18.6668 80,-18.6668c44.18298,0 80,8.3578 80,18.6668l0,74.66699c0,10.30901 -35.81702,18.666 -80,18.666c-44.1828,0 -80,-8.35699 -80,-18.666l0,-74.66699z"/>
|
||||
<path fill="#c0c0c0" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m70,33.6667l0,0c0,-10.3094 35.8172,-18.6667 80,-18.6667c44.18298,0 80,8.3573 80,18.6667l0,74.6663c0,10.31 -35.81702,18.667 -80,18.667c-44.1828,0 -80,-8.357 -80,-18.667l0,-74.6663z"/>
|
||||
<path id="svg_1" fill="#c0c0c0" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m230,32.33334c0,10.30931 -35.81726,18.66666 -80,18.66666c-44.1828,0 -80,-8.35735 -80,-18.66666"/>
|
||||
</svg>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
498
dist/extensions/ext-star.js
vendored
@@ -1,294 +1,248 @@
|
||||
var svgEditorExtension_star = (function () {
|
||||
'use strict';
|
||||
/**
|
||||
* @file ext-star.js
|
||||
*
|
||||
*
|
||||
* @copyright 2010 CloudCanvas, Inc. All rights reserved
|
||||
*
|
||||
*/
|
||||
export default {
|
||||
name: 'star',
|
||||
async init (S) {
|
||||
const svgEditor = this;
|
||||
const svgCanvas = svgEditor.canvas;
|
||||
|
||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
const {$, importLocale} = S; // {svgcontent},
|
||||
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;
|
||||
const strings = await importLocale();
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {boolean} on
|
||||
* @returns {void}
|
||||
*/
|
||||
function showPanel (on) {
|
||||
let fcRules = $('#fc_rules');
|
||||
if (!fcRules.length) {
|
||||
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
||||
}
|
||||
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
||||
$('#star_panel').toggle(on);
|
||||
}
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
Promise.resolve(value).then(_next, _throw);
|
||||
/*
|
||||
function toggleSourceButtons(on){
|
||||
$('#star_save, #star_cancel').toggle(on);
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
function _asyncToGenerator(fn) {
|
||||
return function () {
|
||||
var self = this,
|
||||
args = arguments;
|
||||
return new Promise(function (resolve, reject) {
|
||||
var gen = fn.apply(self, args);
|
||||
/**
|
||||
*
|
||||
* @param {string} attr
|
||||
* @param {string|Float} val
|
||||
* @returns {void}
|
||||
*/
|
||||
function setAttr (attr, val) {
|
||||
svgCanvas.changeSelectedAttribute(attr, val);
|
||||
svgCanvas.call('changed', selElems);
|
||||
}
|
||||
|
||||
function _next(value) {
|
||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
||||
/*
|
||||
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');
|
||||
}
|
||||
|
||||
function _throw(err) {
|
||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
||||
}
|
||||
}];
|
||||
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);
|
||||
}
|
||||
}
|
||||
}];
|
||||
|
||||
_next(undefined);
|
||||
});
|
||||
};
|
||||
}
|
||||
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();
|
||||
|
||||
/**
|
||||
* @file ext-star.js
|
||||
*
|
||||
*
|
||||
* @copyright 2010 CloudCanvas, Inc. All rights reserved
|
||||
*
|
||||
*/
|
||||
var extStar = {
|
||||
name: 'star',
|
||||
init: function init(S) {
|
||||
var _this = this;
|
||||
if (svgCanvas.getMode() === 'star') {
|
||||
started = true;
|
||||
|
||||
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);
|
||||
};
|
||||
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']);
|
||||
|
||||
showPanel = function _showPanel(on) {
|
||||
var fcRules = $('#fc_rules');
|
||||
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);
|
||||
|
||||
if (!fcRules.length) {
|
||||
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
|
||||
$('#star_panel').toggle(on);
|
||||
};
|
||||
x = (circumradius * Math.cos(angle)) + cx;
|
||||
y = (circumradius * Math.sin(angle)) + cy;
|
||||
|
||||
svgEditor = _this;
|
||||
svgCanvas = svgEditor.canvas;
|
||||
$ = S.$, importLocale = S.importLocale; // {svgcontent},
|
||||
polyPoints += x + ',' + y + ' ';
|
||||
|
||||
_context.next = 7;
|
||||
return importLocale();
|
||||
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);
|
||||
}
|
||||
angle += radialshift;
|
||||
|
||||
case 7:
|
||||
strings = _context.sent;
|
||||
x = (inradius * Math.cos(angle)) + cx;
|
||||
y = (inradius * Math.sin(angle)) + cy;
|
||||
|
||||
/*
|
||||
function cot(n){
|
||||
return 1 / Math.tan(n);
|
||||
}
|
||||
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);
|
||||
|
||||
var 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: function mouseMove(opts) {
|
||||
if (!started) {
|
||||
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 = '';
|
||||
|
||||
for (var s = 0; point >= s; s++) {
|
||||
var 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;
|
||||
}
|
||||
|
||||
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();
|
||||
polyPoints += x + ',' + y + ' ';
|
||||
}
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
}
|
||||
};
|
||||
newFO.setAttribute('points', polyPoints);
|
||||
newFO.setAttribute('fill', fill);
|
||||
newFO.setAttribute('stroke', strokecolor);
|
||||
newFO.setAttribute('stroke-width', strokeWidth);
|
||||
/* const shape = */ newFO.getAttribute('shape');
|
||||
|
||||
return extStar;
|
||||
return {
|
||||
started: true
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
mouseUp () {
|
||||
if (svgCanvas.getMode() === 'star') {
|
||||
const attrs = $(newFO).attr(['r']);
|
||||
// svgCanvas.addToSelection([newFO], true);
|
||||
return {
|
||||
keep: (attrs.r !== '0'),
|
||||
element: newFO
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
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') === '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 (opts) {
|
||||
// const elem = opts.elems[0];
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
700
dist/extensions/ext-storage.js
vendored
@@ -1,444 +1,298 @@
|
||||
var svgEditorExtension_storage = (function () {
|
||||
'use strict';
|
||||
/**
|
||||
* @file ext-storage.js
|
||||
*
|
||||
* This extension allows automatic saving of the SVG canvas contents upon
|
||||
* page unload (which can later be automatically retrieved upon future
|
||||
* editor loads).
|
||||
*
|
||||
* The functionality was originally part of the SVG Editor, but moved to a
|
||||
* separate extension to make the setting behavior optional, and adapted
|
||||
* to inform the user of its setting of local data.
|
||||
*
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2010 Brett Zamir
|
||||
* @todo Revisit on whether to use `svgEditor.pref` over directly setting
|
||||
* `curConfig` in all extensions for a more public API (not only for `extPath`
|
||||
* and `imagePath`, but other currently used config in the extensions)
|
||||
* @todo We might provide control of storage settings through the UI besides the
|
||||
* initial (or URL-forced) dialog. *
|
||||
*/
|
||||
|
||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
export default {
|
||||
name: 'storage',
|
||||
init ({$}) {
|
||||
const svgEditor = this;
|
||||
const svgCanvas = svgEditor.canvas;
|
||||
|
||||
if (info.done) {
|
||||
resolve(value);
|
||||
} else {
|
||||
Promise.resolve(value).then(_next, _throw);
|
||||
}
|
||||
}
|
||||
// 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.
|
||||
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;
|
||||
|
||||
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
|
||||
*
|
||||
* This extension allows automatic saving of the SVG canvas contents upon
|
||||
* page unload (which can later be automatically retrieved upon future
|
||||
* editor loads).
|
||||
*
|
||||
* The functionality was originally part of the SVG Editor, but moved to a
|
||||
* separate extension to make the setting behavior optional, and adapted
|
||||
* to inform the user of its setting of local data.
|
||||
*
|
||||
* @license MIT
|
||||
*
|
||||
* @copyright 2010 Brett Zamir
|
||||
* @todo Revisit on whether to use `svgEditor.pref` over directly setting
|
||||
* `curConfig` in all extensions for a more public API (not only for `extPath`
|
||||
* and `imagePath`, but other currently used config in the extensions)
|
||||
* @todo We might provide control of storage settings through the UI besides the
|
||||
* initial (or URL-forced) dialog. *
|
||||
*/
|
||||
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,
|
||||
// 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;
|
||||
/**
|
||||
* Replace `storagePrompt` parameter within URL.
|
||||
* @param {string} val
|
||||
* @returns {void}
|
||||
* @todo Replace the string manipulation with `searchParams.set`
|
||||
*/
|
||||
|
||||
function replaceStoragePrompt(val) {
|
||||
val = val ? 'storagePrompt=' + val : '';
|
||||
var loc = top.location; // Allow this to work with the embedded editor as well
|
||||
|
||||
if (loc.href.includes('storagePrompt=')) {
|
||||
/*
|
||||
loc.href = loc.href.replace(/(?<sep>[&?])storagePrompt=[^&]*(?<amp>&?)/, function (n0, sep, amp) {
|
||||
return (val ? sep : '') + val + (!val && amp ? sep : (amp || ''));
|
||||
});
|
||||
*/
|
||||
loc.href = loc.href.replace(/([&?])storagePrompt=[^&]*(&?)/, function (n0, n1, amp) {
|
||||
return (val ? n1 : '') + val + (!val && amp ? n1 : amp || '');
|
||||
});
|
||||
} else {
|
||||
loc.href += (loc.href.includes('?') ? '&' : '?') + val;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Sets SVG content as a string with "svgedit-" and the current
|
||||
* canvas name as namespace.
|
||||
* @param {string} val
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
|
||||
function setSVGContentStorage(val) {
|
||||
if (storage) {
|
||||
var name = 'svgedit-' + svgEditor.curConfig.canvasName;
|
||||
|
||||
if (!val) {
|
||||
storage.removeItem(name);
|
||||
} else {
|
||||
storage.setItem(name, val);
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Set the cookie to expire.
|
||||
* @param {string} cookie
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
|
||||
function expireCookie(cookie) {
|
||||
document.cookie = encodeURIComponent(cookie) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT';
|
||||
}
|
||||
/**
|
||||
* Expire the storage cookie.
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
|
||||
function removeStoragePrefCookie() {
|
||||
expireCookie('svgeditstore');
|
||||
}
|
||||
/**
|
||||
* Empties storage for each of the current preferences.
|
||||
* @returns {void}
|
||||
*/
|
||||
|
||||
|
||||
function emptyStorage() {
|
||||
setSVGContentStorage('');
|
||||
Object.keys(svgEditor.curPrefs).forEach(function (name) {
|
||||
name = 'svg-edit-' + name;
|
||||
|
||||
if (storage) {
|
||||
storage.removeItem(name);
|
||||
}
|
||||
|
||||
expireCookie(name);
|
||||
/**
|
||||
* Replace `storagePrompt` parameter within URL.
|
||||
* @param {string} val
|
||||
* @returns {void}
|
||||
* @todo Replace the string manipulation with `searchParams.set`
|
||||
*/
|
||||
function replaceStoragePrompt (val) {
|
||||
val = val ? 'storagePrompt=' + val : '';
|
||||
const loc = top.location; // Allow this to work with the embedded editor as well
|
||||
if (loc.href.includes('storagePrompt=')) {
|
||||
/*
|
||||
loc.href = loc.href.replace(/(?<sep>[&?])storagePrompt=[^&]*(?<amp>&?)/, function (n0, sep, amp) {
|
||||
return (val ? sep : '') + val + (!val && amp ? sep : (amp || ''));
|
||||
});
|
||||
} // emptyStorage();
|
||||
*/
|
||||
loc.href = loc.href.replace(/([&?])storagePrompt=[^&]*(&?)/, function (n0, n1, amp) {
|
||||
return (val ? n1 : '') + val + (!val && amp ? n1 : (amp || ''));
|
||||
});
|
||||
} else {
|
||||
loc.href += (loc.href.includes('?') ? '&' : '?') + val;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Listen for unloading: If and only if opted in by the user, set the content
|
||||
* document and preferences into storage:
|
||||
* 1. Prevent save warnings (since we're automatically saving unsaved
|
||||
* content into storage)
|
||||
* 2. Use localStorage to set SVG contents (potentially too large to allow in cookies)
|
||||
* 3. Use localStorage (where available) or cookies to set preferences.
|
||||
* @returns {void}
|
||||
*/
|
||||
/**
|
||||
* Sets SVG content as a string with "svgedit-" and the current
|
||||
* canvas name as namespace.
|
||||
* @param {string} val
|
||||
* @returns {void}
|
||||
*/
|
||||
function setSVGContentStorage (val) {
|
||||
if (storage) {
|
||||
const name = 'svgedit-' + svgEditor.curConfig.canvasName;
|
||||
if (!val) {
|
||||
storage.removeItem(name);
|
||||
} else {
|
||||
storage.setItem(name, val);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the cookie to expire.
|
||||
* @param {string} cookie
|
||||
* @returns {void}
|
||||
*/
|
||||
function expireCookie (cookie) {
|
||||
document.cookie = encodeURIComponent(cookie) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT';
|
||||
}
|
||||
|
||||
function setupBeforeUnloadListener() {
|
||||
window.addEventListener('beforeunload', function (e) {
|
||||
// Don't save anything unless the user opted in to storage
|
||||
if (!document.cookie.match(/(?:^|;\s*)svgeditstore=(?:prefsAndContent|prefsOnly)/)) {
|
||||
/**
|
||||
* Expire the storage cookie.
|
||||
* @returns {void}
|
||||
*/
|
||||
function removeStoragePrefCookie () {
|
||||
expireCookie('svgeditstore');
|
||||
}
|
||||
|
||||
/**
|
||||
* Empties storage for each of the current preferences.
|
||||
* @returns {void}
|
||||
*/
|
||||
function emptyStorage () {
|
||||
setSVGContentStorage('');
|
||||
Object.keys(svgEditor.curPrefs).forEach((name) => {
|
||||
name = 'svg-edit-' + name;
|
||||
if (storage) {
|
||||
storage.removeItem(name);
|
||||
}
|
||||
expireCookie(name);
|
||||
});
|
||||
}
|
||||
|
||||
// emptyStorage();
|
||||
|
||||
/**
|
||||
* Listen for unloading: If and only if opted in by the user, set the content
|
||||
* document and preferences into storage:
|
||||
* 1. Prevent save warnings (since we're automatically saving unsaved
|
||||
* content into storage)
|
||||
* 2. Use localStorage to set SVG contents (potentially too large to allow in cookies)
|
||||
* 3. Use localStorage (where available) or cookies to set preferences.
|
||||
* @returns {void}
|
||||
*/
|
||||
function setupBeforeUnloadListener () {
|
||||
window.addEventListener('beforeunload', function (e) {
|
||||
// Don't save anything unless the user opted in to storage
|
||||
if (!document.cookie.match(/(?:^|;\s*)svgeditstore=(?:prefsAndContent|prefsOnly)/)) {
|
||||
return;
|
||||
}
|
||||
if (document.cookie.match(/(?:^|;\s*)svgeditstore=prefsAndContent/)) {
|
||||
setSVGContentStorage(svgCanvas.getSvgString());
|
||||
}
|
||||
|
||||
svgEditor.setConfig({no_save_warning: true}); // No need for explicit saving at all once storage is on
|
||||
// svgEditor.showSaveWarning = false;
|
||||
|
||||
const {curPrefs} = svgEditor;
|
||||
|
||||
Object.entries(curPrefs).forEach(([key, val]) => {
|
||||
const store = (val !== undefined);
|
||||
key = 'svg-edit-' + key;
|
||||
if (!store) {
|
||||
return;
|
||||
}
|
||||
if (storage) {
|
||||
storage.setItem(key, val);
|
||||
} else if (window.widget) {
|
||||
window.widget.setPreferenceForKey(val, key);
|
||||
} else {
|
||||
val = encodeURIComponent(val);
|
||||
document.cookie = encodeURIComponent(key) + '=' + val + '; expires=Fri, 31 Dec 9999 23:59:59 GMT';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (document.cookie.match(/(?:^|;\s*)svgeditstore=prefsAndContent/)) {
|
||||
setSVGContentStorage(svgCanvas.getSvgString());
|
||||
let loaded = false;
|
||||
return {
|
||||
name: 'storage',
|
||||
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
|
||||
if (loaded) {
|
||||
return;
|
||||
}
|
||||
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.
|
||||
)) {
|
||||
const 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}
|
||||
);
|
||||
}
|
||||
|
||||
svgEditor.setConfig({
|
||||
no_save_warning: true
|
||||
}); // No need for explicit saving at all once storage is on
|
||||
// svgEditor.showSaveWarning = false;
|
||||
// Hack to temporarily provide a wide and high enough dialog
|
||||
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';
|
||||
|
||||
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;
|
||||
key = 'svg-edit-' + key;
|
||||
|
||||
if (!store) {
|
||||
// Open select-with-checkbox dialog
|
||||
// From svg-editor.js
|
||||
svgEditor.storagePromptState = 'waiting';
|
||||
const {response: pref, checked} = await $.select(
|
||||
message,
|
||||
options,
|
||||
null,
|
||||
null,
|
||||
{
|
||||
label: rememberLabel,
|
||||
checked: true,
|
||||
tooltip: rememberTooltip
|
||||
}
|
||||
);
|
||||
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 (storagePrompt === 'true' && checked) {
|
||||
replaceStoragePrompt();
|
||||
return;
|
||||
}
|
||||
|
||||
if (storage) {
|
||||
storage.setItem(key, val);
|
||||
} else if (window.widget) {
|
||||
window.widget.setPreferenceForKey(val, key);
|
||||
} else {
|
||||
val = encodeURIComponent(val);
|
||||
document.cookie = encodeURIComponent(key) + '=' + val + '; expires=Fri, 31 Dec 9999 23:59:59 GMT';
|
||||
} 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;
|
||||
}
|
||||
}
|
||||
|
||||
var 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;
|
||||
// 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;
|
||||
|
||||
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();
|
||||
// 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();
|
||||
|
||||
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
|
||||
// We don't check for noStorageOnLoad here because
|
||||
// the prompt gives the user the option to store data
|
||||
setupBeforeUnloadListener();
|
||||
|
||||
if (!loaded) {
|
||||
_context.next = 8;
|
||||
break;
|
||||
}
|
||||
|
||||
return _context.abrupt("return");
|
||||
|
||||
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
|
||||
|
||||
|
||||
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
|
||||
});
|
||||
|
||||
case 20:
|
||||
_yield$$$select = _context.sent;
|
||||
pref = _yield$$$select.response;
|
||||
checked = _yield$$$select.checked;
|
||||
|
||||
if (!(pref && pref !== 'noPrefsOrContent')) {
|
||||
_context.next = 30;
|
||||
break;
|
||||
}
|
||||
|
||||
// Regardless of whether the user opted
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
svgEditor.storagePromptState = 'closed';
|
||||
updateCanvas(true);
|
||||
} else if (!noStorageOnLoad || forceStorage) {
|
||||
setupBeforeUnloadListener();
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
return extStorage;
|
||||
|
||||
}());
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
273
dist/extensions/ext-webappfind.js
vendored
@@ -1,178 +1,109 @@
|
||||
var svgEditorExtension_webappfind = (function () {
|
||||
'use strict';
|
||||
/**
|
||||
* Depends on Firefox add-on and executables from
|
||||
* {@link https://github.com/brettz9/webappfind}.
|
||||
* @author Brett Zamir
|
||||
* @license MIT
|
||||
* @todo See WebAppFind Readme for SVG-related todos
|
||||
*/
|
||||
|
||||
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
||||
try {
|
||||
var info = gen[key](arg);
|
||||
var value = info.value;
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
export default {
|
||||
name: 'webappfind',
|
||||
async init ({importLocale, $}) {
|
||||
const strings = await importLocale();
|
||||
const svgEditor = this;
|
||||
const saveMessage = 'save',
|
||||
readMessage = 'read',
|
||||
excludedMessages = [readMessage, saveMessage];
|
||||
|
||||
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);
|
||||
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;
|
||||
try {
|
||||
({type, pathID, content} = data.webappfind); // 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;
|
||||
}
|
||||
|
||||
function _throw(err) {
|
||||
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
||||
}
|
||||
switch (type) {
|
||||
case 'view':
|
||||
// Populate the contents
|
||||
svgEditor.loadFromString(content);
|
||||
|
||||
_next(undefined);
|
||||
});
|
||||
/* 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
|
||||
);
|
||||
}
|
||||
}
|
||||
}];
|
||||
|
||||
return {
|
||||
name: strings.name,
|
||||
svgicons: svgEditor.curConfig.extIconsPath + 'webappfind-icon.svg',
|
||||
buttons: strings.buttons.map((button, i) => {
|
||||
return Object.assign(buttons[i], button);
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Depends on Firefox add-on and executables from
|
||||
* {@link https://github.com/brettz9/webappfind}.
|
||||
* @author Brett Zamir
|
||||
* @license MIT
|
||||
* @todo See WebAppFind Readme for SVG-related todos
|
||||
*/
|
||||
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();
|
||||
|
||||
case 3:
|
||||
strings = _context.sent;
|
||||
svgEditor = _this;
|
||||
saveMessage = 'save', readMessage = 'read', excludedMessages = [readMessage, saveMessage];
|
||||
|
||||
_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();
|
||||
}
|
||||
}
|
||||
}, _callee);
|
||||
}))();
|
||||
}
|
||||
};
|
||||
|
||||
return extWebappfind;
|
||||
|
||||
}());
|
||||
};
|
||||
|
||||
158
dist/extensions/ext-xdomain-messaging.js
vendored
@@ -1,114 +1,48 @@
|
||||
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;
|
||||
};
|
||||
/**
|
||||
* 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
|
||||
* in embedapi.js with a demo at embedapi.html.
|
||||
*/
|
||||
export default {
|
||||
name: 'xdomain-messaging',
|
||||
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() === '|') {
|
||||
return;
|
||||
}
|
||||
const data = typeof e.data === 'object' ? e.data : JSON.parse(e.data);
|
||||
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
|
||||
const {allowedOrigins} = svgEditor.curConfig;
|
||||
if (!allowedOrigins.includes('*') && !allowedOrigins.includes(e.origin)) {
|
||||
console.log(`Origin ${e.origin} not whitelisted for posting to ${window.origin}`); // eslint-disable-line no-console
|
||||
return;
|
||||
}
|
||||
const cbid = data.id;
|
||||
const {name, args} = data;
|
||||
const message = {
|
||||
namespace: 'svg-edit',
|
||||
id: cbid
|
||||
};
|
||||
try {
|
||||
// Now that we know the origin is trusted, we perform otherwise
|
||||
// unsafe arbitrary canvas method execution
|
||||
message.result = svgCanvas[name](...args); // lgtm [js/remote-property-injection]
|
||||
} catch (err) {
|
||||
message.error = err.message;
|
||||
}
|
||||
e.source.postMessage(JSON.stringify(message), '*');
|
||||
});
|
||||
} catch (err) {
|
||||
console.log('Error with xdomain message listener: ' + err); // eslint-disable-line no-console
|
||||
}
|
||||
|
||||
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
|
||||
* in embedapi.js with a demo at embedapi.html.
|
||||
*/
|
||||
var extXdomainMessaging = {
|
||||
name: 'xdomain-messaging',
|
||||
init: function init() {
|
||||
var svgEditor = this;
|
||||
var 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() === '|') {
|
||||
return;
|
||||
}
|
||||
|
||||
var data = _typeof(e.data) === 'object' ? e.data : JSON.parse(e.data);
|
||||
|
||||
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;
|
||||
|
||||
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
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
var cbid = data.id;
|
||||
var name = data.name,
|
||||
args = data.args;
|
||||
var message = {
|
||||
namespace: 'svg-edit',
|
||||
id: cbid
|
||||
};
|
||||
|
||||
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]
|
||||
} catch (err) {
|
||||
message.error = err.message;
|
||||
}
|
||||
|
||||
e.source.postMessage(JSON.stringify(message), '*');
|
||||
});
|
||||
} catch (err) {
|
||||
console.log('Error with xdomain message listener: ' + err); // eslint-disable-line no-console
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return extXdomainMessaging;
|
||||
|
||||
}());
|
||||
};
|
||||
|
||||
34
dist/extensions/eyedropper-icon.xml
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<g id="tool_eyedropper">
|
||||
<svg viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
|
||||
<defs>
|
||||
<radialGradient id="eyedropper_svg_6" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#e5e5e5" stop-opacity="0.38"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="eyedropper_svg_15" x1="0" y1="0" x2="0.58594" y2="0.55078">
|
||||
<stop offset="0" stop-color="#ffffff" stop-opacity="0.57"/>
|
||||
<stop offset="1" stop-color="#000056" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="eyedropper_svg_19" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g display="inline">
|
||||
<title>Layer 1</title>
|
||||
<path d="m193.899994,73l-119.899979,118l-15,39.5l10.25,4.5l43.750015,-20l108.999969,-112l-28.100006,-30z" id="svg_3" fill="none" stroke="#000000" stroke-width="5"/>
|
||||
<path d="m58.649994,232c-2.75,28.200012 -26.399994,28.950012 -21.899994,59c4.5,30.049988 55,28 55.5,-1.25c0.5,-29.25 -20.25,-28.75 -22.25,-54.75l-11.350006,-3z" id="svg_4" fill="#aa56ff" stroke="#000000" stroke-width="7"/>
|
||||
<path d="m45.474976,269.275024l13.775024,0.474976l-0.75,16.75l-14.25,-1.25l1.224976,-15.974976z" id="svg_5" fill="url(#eyedropper_svg_6)" stroke-width="5" fill-opacity="0.73"/>
|
||||
<path d="m217.899994,46c21.5,-101.549999 141.600006,20.449997 28.100006,33l-5,44l-63,-66l39.899994,-11z" id="svg_2" fill="#000000" stroke-width="5"/>
|
||||
<path d="m206.825012,61.075008c3.712494,-2.46249 7.637482,-3.53751 14.424988,-5.575008c10.125,-16.5 32.875,-41.5 40.5,-35c7.625,6.5 -21.25,35.625 -37.5,39.25c-5.5,10.125 -8,13.875 -17.25,16.5c-2.837494,-8.162514 -4.262482,-12.337486 -0.174988,-15.174992z" id="svg_7" fill="url(#eyedropper_svg_15)" stroke-width="5"/>
|
||||
<path d="m133.049988,134.75l46.950012,9.25l-66,70l-42.5,20.5l-11.5,-5l14,-37.5l59.049988,-57.25z" id="svg_11" fill="#aa56ff" stroke="#000000" stroke-width="7"/>
|
||||
<path d="m71.425034,212.350006l9.050888,-20.022537l51.516724,-49.327469l8.507355,0.97197l-69.074966,68.378036z" id="svg_16" fill="url(#eyedropper_svg_19)" stroke-width="5"/>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="svg_eof"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
BIN
dist/extensions/eyedropper.png
vendored
Normal file
|
After Width: | Height: | Size: 568 B |
BIN
dist/extensions/foreignobject-edit.png
vendored
Normal file
|
After Width: | Height: | Size: 62 KiB |
96
dist/extensions/foreignobject-icons.xml
vendored
Normal file
@@ -0,0 +1,96 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="tool_foreign">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 84 84">
|
||||
<g fill="#444" opacity="0.2" transform="translate(6,6)">
|
||||
<path d="M42.8,74.3c0,4.3,0,5.9,11.8,5.9l4.1,0l0,3.8c-4.5-0.4-16.1-0.4-21.2-0.3c-5.1,0-16.6,0-21,0.4l0-3.8l4.1,0
|
||||
c11.8,0,11.8-1.7,11.8-5.9l0-6.9C13.9,65.6,0,54.6,0,42c0-12.2,13.3-23.5,32.4-25.4l0-6.9c0-4.3,0-5.9-11.8-5.9l-4.1,0l0-3.8
|
||||
c4.5,0.4,16.1,0.4,21.2,0.3c5.1,0,16.6,0,21-0.4l0,3.8l-4.1,0c-11.8,0-11.8,1.7-11.8,5.9l0,6.9C61.6,18.1,75.8,29.2,75.8,42
|
||||
c0,12.4-13.8,23.9-33.1,25.4L42.8,74.3z M32.4,19.4c-18.7,2.5-19.9,16.2-19.9,22.6c0,7.6,2.3,20.2,20,22.5L32.4,19.4z M42.7,64.7
|
||||
c18.8-2.2,20.7-15.4,20.6-22.8c0-9.3-3.5-20.6-20.7-22.6L42.7,64.7z"/>
|
||||
</g>
|
||||
<g fill="#444" opacity="0.3" transform="translate(4,4)">
|
||||
<path d="M42.8,74.3c0,4.3,0,5.9,11.8,5.9l4.1,0l0,3.8c-4.5-0.4-16.1-0.4-21.2-0.3c-5.1,0-16.6,0-21,0.4l0-3.8l4.1,0
|
||||
c11.8,0,11.8-1.7,11.8-5.9l0-6.9C13.9,65.6,0,54.6,0,42c0-12.2,13.3-23.5,32.4-25.4l0-6.9c0-4.3,0-5.9-11.8-5.9l-4.1,0l0-3.8
|
||||
c4.5,0.4,16.1,0.4,21.2,0.3c5.1,0,16.6,0,21-0.4l0,3.8l-4.1,0c-11.8,0-11.8,1.7-11.8,5.9l0,6.9C61.6,18.1,75.8,29.2,75.8,42
|
||||
c0,12.4-13.8,23.9-33.1,25.4L42.8,74.3z M32.4,19.4c-18.7,2.5-19.9,16.2-19.9,22.6c0,7.6,2.3,20.2,20,22.5L32.4,19.4z M42.7,64.7
|
||||
c18.8-2.2,20.7-15.4,20.6-22.8c0-9.3-3.5-20.6-20.7-22.6L42.7,64.7z"/>
|
||||
</g>
|
||||
<g fill="#444" opacity="0.5" transform="translate(2,2)">
|
||||
<path d="M42.8,74.3c0,4.3,0,5.9,11.8,5.9l4.1,0l0,3.8c-4.5-0.4-16.1-0.4-21.2-0.3c-5.1,0-16.6,0-21,0.4l0-3.8l4.1,0
|
||||
c11.8,0,11.8-1.7,11.8-5.9l0-6.9C13.9,65.6,0,54.6,0,42c0-12.2,13.3-23.5,32.4-25.4l0-6.9c0-4.3,0-5.9-11.8-5.9l-4.1,0l0-3.8
|
||||
c4.5,0.4,16.1,0.4,21.2,0.3c5.1,0,16.6,0,21-0.4l0,3.8l-4.1,0c-11.8,0-11.8,1.7-11.8,5.9l0,6.9C61.6,18.1,75.8,29.2,75.8,42
|
||||
c0,12.4-13.8,23.9-33.1,25.4L42.8,74.3z M32.4,19.4c-18.7,2.5-19.9,16.2-19.9,22.6c0,7.6,2.3,20.2,20,22.5L32.4,19.4z M42.7,64.7
|
||||
c18.8-2.2,20.7-15.4,20.6-22.8c0-9.3-3.5-20.6-20.7-22.6L42.7,64.7z"/>
|
||||
</g>
|
||||
<g fill="#0000CC">
|
||||
<path id="xyz321" d="M42.8,74.3c0,4.3,0,5.9,11.8,5.9l4.1,0l0,3.8c-4.5-0.4-16.1-0.4-21.2-0.3c-5.1,0-16.6,0-21,0.4l0-3.8l4.1,0
|
||||
c11.8,0,11.8-1.7,11.8-5.9l0-6.9C13.9,65.6,0,54.6,0,42c0-12.2,13.3-23.5,32.4-25.4l0-6.9c0-4.3,0-5.9-11.8-5.9l-4.1,0l0-3.8
|
||||
c4.5,0.4,16.1,0.4,21.2,0.3c5.1,0,16.6,0,21-0.4l0,3.8l-4.1,0c-11.8,0-11.8,1.7-11.8,5.9l0,6.9C61.6,18.1,75.8,29.2,75.8,42
|
||||
c0,12.4-13.8,23.9-33.1,25.4L42.8,74.3z M32.4,19.4c-18.7,2.5-19.9,16.2-19.9,22.6c0,7.6,2.3,20.2,20,22.5L32.4,19.4z M42.7,64.7
|
||||
c18.8-2.2,20.7-15.4,20.6-22.8c0-9.3-3.5-20.6-20.7-22.6L42.7,64.7z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="edit_foreign">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="34 38 170 170" overflow="hidden">
|
||||
<g fill="#000088">
|
||||
<path d="M30.1,63.9v-4.3l30.2-14.9V50L36.5,61.7l23.8,11.7v5.3L30.1,63.9z"/>
|
||||
<path d="M106.1,79.7v-1.1c4.2-0.5,4.8-1.1,4.8-5.2V58.2c0-6-1.3-7.9-5.4-7.9c-3.3,0-5.7,1.3-7.8,4.4v18.1
|
||||
c0,4.5,1.1,5.7,5.2,5.8v1.1H86.8v-1.1c4.1-0.3,4.9-1.1,4.9-5.1V57.9c0-5-1.6-7.6-4.8-7.6c-2.5,0-5.6,1.2-7.4,2.9
|
||||
c-0.5,0.5-1.1,1.4-1.1,1.4v20.3c0,2.8,1.1,3.6,4.9,3.7v1.1h-16v-1.1c4-0.1,5-1.2,5-5V55.4c0-3.5-0.6-4.6-2.5-4.6
|
||||
c-0.8,0-1.4,0.1-2.3,0.3v-1.2c4-1.1,6.4-1.9,10.1-3.2l0.5,0.1v5.4c6-4.5,8-5.5,11.2-5.5c3.9,0,6.3,1.9,7.6,6c3.9-4.2,7.6-6,11.7-6
|
||||
c5.5,0,8.4,4.3,8.4,12.8v14.8c0,2.8,0.9,4.1,3.1,4.2l1.9,0.1v1.1H106.1z"/>
|
||||
<path d="M147.3,80.5c-3,0-4.2-1.4-4.6-5.3c-4.4,3.7-7.3,5.3-10.5,5.3c-4.5,0-7.6-3.2-7.6-7.7c0-2.4,1-4.8,2.6-6.3
|
||||
c3.1-2.7,4.3-3.3,15.4-7.8v-4.4c0-3.9-1.9-6-5.5-6c-2.9,0-5.2,1.6-5.2,3.5c0,0.5,0.1,1.1,0.2,1.7c0.1,0.5,0.1,0.9,0.1,1.2
|
||||
c0,1.6-1.5,3-3.2,3s-3.1-1.4-3.1-3.1c0-1.8,1.2-3.9,3-5.4c2-1.7,5.5-2.7,9.1-2.7c4.4,0,7.5,1.4,9,4.2c1,1.7,1.4,3.7,1.4,7.3v14
|
||||
c0,3.2,0.5,4.2,2.2,4.2c1.1,0,1.9-0.4,3.2-1.4v1.9C151.3,79.6,149.8,80.5,147.3,80.5z M142.6,60.5c-8.7,3.2-11.7,5.8-11.7,10v0.3
|
||||
c0,3.1,2,5.5,4.5,5.5c1.5,0,3.5-0.6,5.3-1.6c1.5-0.9,1.9-1.6,1.9-3.8V60.5z"/>
|
||||
<path d="M165.3,80.5c-4.2,0-6.3-3.1-6.3-9.1V49.7h-3.8c-0.2-0.1-0.3-0.3-0.3-0.5c0-0.4,0.4-0.9,1.2-1.4
|
||||
c1.9-1.1,4.3-3.7,7-7.7c0.5-0.6,1-1.3,1.4-2c0.4,0,0.5,0.2,0.5,0.9v8.4h7.3v2.3h-7.3v20.6c0,4.6,1.1,6.5,3.7,6.5
|
||||
c1.6,0,2.7-0.6,4.3-2.5l0.9,0.8C171.8,78.7,169,80.5,165.3,80.5z"/>
|
||||
<path d="M193.8,79.7v-1.1c4.1-0.4,4.9-1.3,4.9-6.2V58.1c0-5-1.8-7.6-5.4-7.6c-2.8,0-5,1.2-8,4.5v17.4
|
||||
c0,5,0.7,5.8,4.9,6.3v1.1h-15.6v-1.1c4.2-0.6,4.6-1.2,4.6-6.3V38.5c0-3.1-0.6-3.7-3.7-3.7c-0.4,0-0.6,0-0.9,0.1v-1.2l1.9-0.6
|
||||
c4-1.2,5.8-1.7,8.3-2.6l0.4,0.2v21.9c3.3-4.3,6.3-6,10.6-6c5.9,0,8.9,3.9,8.9,11.5v14.3c0,5,0.4,5.5,4.3,6.3v1.1h-15.2V79.7z"/>
|
||||
<path d="M59.1,116.1v-4.3l30.2-14.9v5.3l-23.8,11.7l23.8,11.7v5.3L59.1,116.1z"/>
|
||||
<path d="M135.1,131.9v-1.1c4.2-0.5,4.8-1.1,4.8-5.2v-15.1c0-6-1.3-7.9-5.4-7.9c-3.3,0-5.7,1.3-7.8,4.4v18.1
|
||||
c0,4.5,1.1,5.7,5.2,5.8v1.1h-16.1v-1.1c4.1-0.3,4.9-1.1,4.9-5.1v-15.7c0-5-1.6-7.6-4.8-7.6c-2.5,0-5.6,1.2-7.4,2.9
|
||||
c-0.5,0.5-1.1,1.4-1.1,1.4v20.3c0,2.8,1.1,3.6,4.9,3.7v1.1h-16v-1.1c4-0.1,5-1.2,5-5v-18.2c0-3.5-0.6-4.6-2.5-4.6
|
||||
c-0.8,0-1.4,0.1-2.3,0.3v-1.2c4-1.1,6.4-1.9,10.1-3.2l0.5,0.1v5.4c6-4.5,8-5.5,11.2-5.5c3.9,0,6.3,1.9,7.6,6c3.9-4.2,7.6-6,11.7-6
|
||||
c5.5,0,8.4,4.3,8.4,12.8v14.8c0,2.8,0.9,4.1,3.1,4.2l1.9,0.1v1.1H135.1z"/>
|
||||
<path d="M152.1,131.9v-1.1c5-0.3,5.7-1.1,5.7-6.3v-16.6c0-3.2-0.6-4.3-2.4-4.3c-0.6,0-1.6,0.1-2.4,0.2l-0.6,0.1v-1.1
|
||||
l11.2-4L164,99v25.6c0,5.2,0.6,5.9,5.3,6.3v1.1L152.1,131.9L152.1,131.9z M160.8,93.1c-2,0-3.7-1.6-3.7-3.7c0-2,1.7-3.7,3.7-3.7
|
||||
c2.1,0,3.7,1.7,3.7,3.7C164.6,91.6,163,93.1,160.8,93.1z"/>
|
||||
<path d="M175.8,131v-5.3l23.7-11.8l-23.7-11.7v-5.3l30.1,14.9v4.3L175.8,131z"/>
|
||||
<path d="M31.1,169.5v-4.3l30.2-14.9v5.3l-23.8,11.7L61.3,179v5.3L31.1,169.5z"/>
|
||||
<path d="M71.3,186.4h-4.9l16.5-49.7h4.8L71.3,186.4z"/>
|
||||
<path d="M127.1,185.3v-1.1c4.2-0.5,4.8-1.1,4.8-5.2v-15.2c0-6-1.3-7.9-5.4-7.9c-3.3,0-5.7,1.3-7.8,4.4v18.1
|
||||
c0,4.5,1.1,5.7,5.2,5.8v1.1h-16.1v-1.1c4.1-0.3,4.9-1.1,4.9-5.1v-15.6c0-5-1.6-7.6-4.8-7.6c-2.5,0-5.6,1.2-7.4,2.9
|
||||
c-0.5,0.5-1.1,1.4-1.1,1.4v20.3c0,2.8,1.1,3.6,4.9,3.7v1.1h-16v-1.1c4-0.1,5-1.2,5-5V161c0-3.5-0.6-4.6-2.5-4.6
|
||||
c-0.8,0-1.4,0.1-2.3,0.3v-1.2c4-1.1,6.4-1.9,10.1-3.2l0.5,0.1v5.4c6-4.5,8-5.5,11.2-5.5c3.9,0,6.3,1.9,7.6,6c3.9-4.2,7.6-6,11.7-6
|
||||
c5.5,0,8.4,4.3,8.4,12.8v14.8c0,2.8,0.9,4.1,3.1,4.2l1.9,0.1v1.1H127.1L127.1,185.3z"/>
|
||||
<path d="M168.3,186.1c-3,0-4.2-1.4-4.6-5.3c-4.4,3.7-7.3,5.3-10.5,5.3c-4.5,0-7.6-3.2-7.6-7.7c0-2.4,1-4.8,2.6-6.3
|
||||
c3.1-2.7,4.3-3.3,15.4-7.8v-4.4c0-3.9-1.9-6-5.5-6c-2.9,0-5.2,1.6-5.2,3.5c0,0.5,0.1,1.1,0.2,1.7c0.1,0.5,0.1,0.9,0.1,1.2
|
||||
c0,1.6-1.5,3-3.2,3s-3.1-1.4-3.1-3.1c0-1.8,1.2-3.9,3-5.4c2-1.7,5.5-2.7,9.1-2.7c4.4,0,7.5,1.4,9,4.2c1,1.7,1.4,3.7,1.4,7.3v14
|
||||
c0,3.2,0.5,4.2,2.2,4.2c1.1,0,1.9-0.4,3.2-1.4v1.9C172.3,185.2,170.8,186.1,168.3,186.1z M163.8,166.1c-8.7,3.2-11.7,5.8-11.7,10
|
||||
v0.3c0,3.1,2,5.5,4.5,5.5c1.5,0,3.5-0.6,5.3-1.6c1.5-0.9,1.9-1.6,1.9-3.8V166.1z"/>
|
||||
<path d="M186.3,186.1c-4.2,0-6.3-3.1-6.3-9.1v-21.7h-3.8c-0.2-0.1-0.3-0.3-0.3-0.5c0-0.4,0.4-0.9,1.2-1.4
|
||||
c1.9-1.1,4.3-3.7,7-7.7c0.5-0.6,1-1.3,1.4-2c0.4,0,0.5,0.2,0.5,0.9v8.4h7.3v2.3h-7.3v20.6c0,4.6,1.1,6.5,3.7,6.5
|
||||
c1.6,0,2.7-0.6,4.3-2.5l0.9,0.8C192.8,184.3,190,186.1,186.3,186.1z"/>
|
||||
<path d="M209.1,185.3h-13.4v-1.1c4.2-0.6,4.6-1.2,4.6-6.3V144c0-3.1-0.6-3.7-3.7-3.7c-0.4,0-0.6,0-0.9,0.1v-1.2
|
||||
l1.9-0.6c4-1.2,5.8-1.7,8.3-2.6l0.4,0.2v21.9c0.9-1.2,1.9-2.2,2.8-3.1"/>
|
||||
<path d="M209.1,157.9c-0.8,0.7-1.7,1.5-2.7,2.6v17.4c0,4,0.4,5.3,2.7,5.9"/>
|
||||
</g>
|
||||
<g>
|
||||
<polyline opacity="0.2" fill="#231F20" points="209.1,76.4 118.7,186.5 139.1,186.4 209.1,121 209.1,76.4 "/>
|
||||
<polyline opacity="0.4" fill="#231F20" points="209.1,76.2 118.5,186.5 129.7,186.4 200.2,120.3 209.1,100.8 209.1,76.4 "/>
|
||||
<path fill="#FFD761" d="M121.6,88.7l0.8,87.5l62.3-56.7c0,0-15.3-25.8-24.8-30C151.1,85.6,121.6,88.7,121.6,88.7z"/>
|
||||
<path fill="#FEA01E" d="M209.1,19.5h-54l-33.5,69.2c0,0,29.7-3.4,38.3,0.8c8.9,4.4,25,30.8,25,30.8l24.2-50V19.5z"/>
|
||||
<path d="M120.4,153.7l-0.6,25l23.8-16.9c0,0-8-7-11.2-8.1C129.4,152.8,120.4,153.7,120.4,153.7z"/>
|
||||
<polyline fill="none" stroke="#231F20" stroke-width="5" points="153.9,19.5 121.6,88.7 120.7,181.2 186.6,120.3 209.1,70.3 "/>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="svg_eof"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.4 KiB |
BIN
dist/extensions/foreignobject-tool.png
vendored
Normal file
|
After Width: | Height: | Size: 2.9 KiB |
30
dist/extensions/grid-icon.xml
vendored
Normal file
@@ -0,0 +1,30 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<!--
|
||||
Sample icons file. This file looks like an SVG file with groups as its
|
||||
children. Each group element has an ID that must match the ID of the button given
|
||||
in the extension. The SVG inside the group makes up the actual icon, and
|
||||
needs use a viewBox instead of width/height for it to scale properly.
|
||||
|
||||
Multiple icons can be included, each within their own group.
|
||||
-->
|
||||
<g id="view_grid">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<g>
|
||||
<rect fill="#ffffff" stroke="#848484" x="2" y="2" width="20" height="20"/>
|
||||
<line fill="none" stroke="#848484" x1="11.84375" y1="-1.53125" x2="11.84375" y2="18.46875" transform="rotate(90, 11.8429, 8.46955)"/>
|
||||
<line fill="none" stroke="#848484" x1="11.90625" y1="5.21875" x2="11.90625" y2="25.21875" transform="rotate(90, 11.9054, 15.2196)"/>
|
||||
<line fill="none" stroke="#848484" x1="8.5" y1="2.03125" x2="8.5" y2="22.03125"/>
|
||||
<line fill="none" stroke="#848484" x1="15.5" y1="2.03125" x2="15.5" y2="22.03125"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="3.25" y="3.28125" width="4" height="4"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="10" y="3.28125" width="4" height="4"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="16.75" y="3.28125" width="4" height="4"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="3.28125" y="9.75" width="4" height="4"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="10.03125" y="9.75" width="4" height="4"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="16.78125" y="9.75" width="4" height="4"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="3.3125" y="16.59375" width="4" height="4"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="10.0625" y="16.59375" width="4" height="4"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="16.8125" y="16.59375" width="4" height="4"/>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
BIN
dist/extensions/grid.png
vendored
Normal file
|
After Width: | Height: | Size: 2.7 KiB |
21
dist/extensions/helloworld-icon.xml
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<!--
|
||||
Sample icons file. This file looks like an SVG file with groups as its
|
||||
children. Each group element has an ID that must match the ID of the button given
|
||||
in the extension. The SVG inside the group makes up the actual icon, and
|
||||
needs use a viewBox instead of width/height for it to scale properly.
|
||||
|
||||
Multiple icons can be included, each within their own group.
|
||||
-->
|
||||
<g id="hello_world">
|
||||
<svg width="102" height="102" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
|
||||
<g>
|
||||
<title>Layer 1</title>
|
||||
<rect ry="30" rx="30" x="2.5" y="2.5" width="97" height="97" id="svg_3" fill="#008000" stroke="#000000" stroke-width="5"/>
|
||||
<text x="52.668" y="42.5" id="svg_1" fill="#ffffff" stroke="#000000" stroke-width="0" font-size="24" font-family="Monospace" text-anchor="middle" xml:space="preserve">Hello</text>
|
||||
<text x="52.668" y="71.5" fill="#ffffff" stroke="#000000" stroke-width="0" font-size="24" font-family="Monospace" text-anchor="middle" xml:space="preserve" id="svg_2">World!</text>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
BIN
dist/extensions/helloworld.png
vendored
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
dist/extensions/imagelib.png
vendored
Normal file
|
After Width: | Height: | Size: 6.8 KiB |
29
dist/extensions/imagelib/index-es.html
vendored
Normal file
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>-</title>
|
||||
<link rel="icon" type="image/png" href="../../images/logo.png" />
|
||||
|
||||
<!-- Lacking browser support -->
|
||||
<script nomodule="" src="../../redirect-on-no-module-support.js"></script>
|
||||
<script type="module" src="../../redirect-on-lacking-support.js"></script>
|
||||
|
||||
<!-- As yet no ES6 -->
|
||||
<script src="../../jquery.min.js"></script>
|
||||
|
||||
<!-- ES6+ polyfills (Babel) -->
|
||||
<script src="../../external/core-js-bundle/minified.js"></script>
|
||||
<script src="../../external/regenerator-runtime/runtime.js"></script>
|
||||
|
||||
<script type="module" src="index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Select an image:</h1>
|
||||
<a href="smiley.svg">smiley.svg</a>
|
||||
<br/>
|
||||
<a href="../../images/logo.png">logo.png</a>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
30
dist/extensions/imagelib/index.html
vendored
Normal file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- AUTO-GENERATED FROM imagelib/index-es.html; DO NOT EDIT; use build/build-html.js to build -->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>-</title>
|
||||
<link rel="icon" type="image/png" href="../../images/logo.png" />
|
||||
|
||||
<!-- Lacking browser support -->
|
||||
<script nomodule="" src="../../redirect-on-no-module-support.js"></script>
|
||||
<script type="module" src="../../redirect-on-lacking-support.js"></script>
|
||||
|
||||
<!-- As yet no ES6 -->
|
||||
<script src="../../jquery.min.js"></script>
|
||||
|
||||
<!-- ES6+ polyfills (Babel) -->
|
||||
<script src="../../external/core-js-bundle/minified.js"></script>
|
||||
<script src="../../external/regenerator-runtime/runtime.js"></script>
|
||||
|
||||
<script defer="defer" src="../../../../dist/extensions/imagelib/index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Select an image:</h1>
|
||||
<a href="smiley.svg">smiley.svg</a>
|
||||
<br/>
|
||||
<a href="../../images/logo.png">logo.png</a>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
131
dist/extensions/imagelib/index.js
vendored
@@ -1,84 +1,49 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
function _extends() {
|
||||
_extends = Object.assign || function (target) {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
var source = arguments[i];
|
||||
|
||||
for (var key in source) {
|
||||
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||||
target[key] = source[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
return _extends.apply(this, arguments);
|
||||
}
|
||||
|
||||
/* globals jQuery */
|
||||
var $ = jQuery;
|
||||
$('a').click(function () {
|
||||
var href = this.href;
|
||||
var target = window.parent;
|
||||
|
||||
var post = function post(message) {
|
||||
// Todo: Make origin customizable as set by opening window
|
||||
// Todo: If dropping IE9, avoid stringifying
|
||||
target.postMessage(JSON.stringify(_extends({
|
||||
namespace: 'imagelib'
|
||||
}, message)), '*');
|
||||
}; // Convert Non-SVG images to data URL first
|
||||
// (this could also have been done server-side by the library)
|
||||
// Send metadata (also indicates file is about to be sent)
|
||||
|
||||
|
||||
post({
|
||||
name: $(this).text(),
|
||||
id: href
|
||||
});
|
||||
|
||||
if (!href.includes('.svg')) {
|
||||
var img = new Image();
|
||||
img.addEventListener('load', function () {
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = this.width;
|
||||
canvas.height = this.height; // load the raster image into the canvas
|
||||
|
||||
canvas.getContext('2d').drawImage(this, 0, 0); // retrieve the data: URL
|
||||
|
||||
var data;
|
||||
|
||||
try {
|
||||
data = canvas.toDataURL();
|
||||
} catch (err) {
|
||||
// This fails in Firefox with `file:///` URLs :(
|
||||
// Todo: This could use a generic alert library instead
|
||||
alert('Data URL conversion failed: ' + err); // eslint-disable-line no-alert
|
||||
|
||||
data = '';
|
||||
}
|
||||
|
||||
post({
|
||||
href: href,
|
||||
data: data
|
||||
});
|
||||
});
|
||||
img.src = href;
|
||||
} else {
|
||||
// Do ajax request for image's href value
|
||||
$.get(href, function (data) {
|
||||
post({
|
||||
href: href,
|
||||
data: data
|
||||
});
|
||||
}, 'html'); // 'html' is necessary to keep returned data as a string
|
||||
}
|
||||
|
||||
return false;
|
||||
/* globals jQuery */
|
||||
const $ = jQuery;
|
||||
$('a').click(function () {
|
||||
const {href} = this;
|
||||
const target = window.parent;
|
||||
const post = (message) => {
|
||||
// Todo: Make origin customizable as set by opening window
|
||||
// Todo: If dropping IE9, avoid stringifying
|
||||
target.postMessage(JSON.stringify({
|
||||
namespace: 'imagelib',
|
||||
...message
|
||||
}), '*');
|
||||
};
|
||||
// Convert Non-SVG images to data URL first
|
||||
// (this could also have been done server-side by the library)
|
||||
// Send metadata (also indicates file is about to be sent)
|
||||
post({
|
||||
name: $(this).text(),
|
||||
id: href
|
||||
});
|
||||
|
||||
}());
|
||||
if (!href.includes('.svg')) {
|
||||
const img = new Image();
|
||||
img.addEventListener('load', function () {
|
||||
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
|
||||
let data;
|
||||
try {
|
||||
data = canvas.toDataURL();
|
||||
} catch (err) {
|
||||
// This fails in Firefox with `file:///` URLs :(
|
||||
// Todo: This could use a generic alert library instead
|
||||
alert('Data URL conversion failed: ' + err); // eslint-disable-line no-alert
|
||||
data = '';
|
||||
}
|
||||
post({href, data});
|
||||
});
|
||||
img.src = href;
|
||||
} else {
|
||||
// Do ajax request for image's href value
|
||||
$.get(href, function (data) {
|
||||
post({href, data});
|
||||
}, 'html'); // 'html' is necessary to keep returned data as a string
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
24
dist/extensions/imagelib/openclipart-es.html
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>-</title>
|
||||
<link rel="icon" type="image/png" href="../../images/logo.png" />
|
||||
|
||||
<!-- Lacking browser support -->
|
||||
<script nomodule="" src="../../redirect-on-no-module-support.js"></script>
|
||||
<script type="module" src="../../redirect-on-lacking-support.js"></script>
|
||||
|
||||
<!-- Browser polyfills -->
|
||||
<script src="../../external/dom-polyfill/dom-polyfill.js"></script>
|
||||
|
||||
<!-- ES6+ polyfills (Babel) -->
|
||||
<script src="../../external/core-js-bundle/minified.js"></script>
|
||||
<script src="../../external/regenerator-runtime/runtime.js"></script>
|
||||
|
||||
<script type="module" src="openclipart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
25
dist/extensions/imagelib/openclipart.html
vendored
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- AUTO-GENERATED FROM imagelib/openclipart-es.html; DO NOT EDIT; use build/build-html.js to build -->
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>-</title>
|
||||
<link rel="icon" type="image/png" href="../../images/logo.png" />
|
||||
|
||||
<!-- Lacking browser support -->
|
||||
<script nomodule="" src="../../redirect-on-no-module-support.js"></script>
|
||||
<script type="module" src="../../redirect-on-lacking-support.js"></script>
|
||||
|
||||
<!-- Browser polyfills -->
|
||||
<script src="../../../../dist/dom-polyfill.js"></script>
|
||||
|
||||
<!-- ES6+ polyfills (Babel) -->
|
||||
<script src="../../external/core-js-bundle/minified.js"></script>
|
||||
<script src="../../external/regenerator-runtime/runtime.js"></script>
|
||||
|
||||
<script defer="defer" src="../../../../dist/extensions/imagelib/openclipart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
3747
dist/extensions/imagelib/openclipart.js
vendored
12
dist/extensions/imagelib/smiley.svg
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg width="137" height="137" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Cool smiley</title>
|
||||
<path fill="url(#svg_4)" stroke="#000000" stroke-width="3" d="m32.18682,97.71674q36.3159,24.94076 72.54585,0m-64.67542,-49.25576c0,-3.8554 3.12526,-6.98079 6.98068,-6.98079c3.85449,0 6.97872,3.12539 6.97872,6.98079c0,3.85346 -3.12423,6.97867 -6.97872,6.97867c-3.85542,0 -6.98068,-3.12521 -6.98068,-6.97867m42.93047,0c0,-3.8554 3.12529,-6.98079 6.97963,-6.98079c3.8544,0 6.97971,3.12539 6.97971,6.98079c0,3.85346 -3.12531,6.97867 -6.97971,6.97867c-3.85434,0 -6.97963,-3.12521 -6.97963,-6.97867m-81.48596,20.036l0,0c0,-37.00197 29.99679,-66.99892 67.00095,-66.99892c37.00303,0 66.99998,29.99695 66.99998,66.99892c0,37.00409 -29.99695,67.00101 -66.99998,67.00101c-37.00416,0 -67.00095,-29.99692 -67.00095,-67.00101zm0,0l0,0c0,-37.00197 29.99679,-66.99892 67.00095,-66.99892c37.00303,0 66.99998,29.99695 66.99998,66.99892c0,37.00409 -29.99695,67.00101 -66.99998,67.00101c-37.00416,0 -67.00095,-29.99692 -67.00095,-67.00101z" id="svg_1"/>
|
||||
<path id="svg_5" d="m23.84005,41.03445l17.57052,0l5.42937,-19.67914l5.42941,19.67914l17.5706,0l-14.21488,12.16242l5.42982,19.67939l-14.21495,-12.16281l-14.21489,12.16281l5.42991,-19.67939l-14.21491,-12.16242l0,0z" stroke-width="3" fill="#000000"/>
|
||||
<path id="svg_6" d="m65.84005,41.03445l17.57052,0l5.42937,-19.67914l5.42941,19.67914l17.5706,0l-14.21487,12.16242l5.42982,19.67939l-14.21496,-12.1628l-14.2149,12.1628l5.42992,-19.67939l-14.21491,-12.16242l0,0z" stroke-width="3" fill="#000000"/>
|
||||
<defs>
|
||||
<linearGradient y2="0.25391" x2="0.46484" y1="0.94922" x1="0.44531" id="svg_4">
|
||||
<stop stop-color="#ff0000" offset="0"/>
|
||||
<stop stop-color="#ffff00" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
BIN
dist/extensions/markers-box.png
vendored
Normal file
|
After Width: | Height: | Size: 9.3 KiB |
BIN
dist/extensions/markers-box_o.png
vendored
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
dist/extensions/markers-forwardslash.png
vendored
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
115
dist/extensions/markers-icons.xml
vendored
Normal file
@@ -0,0 +1,115 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
|
||||
<g id="nomarker">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="10" stroke="#ff7f00" fill="#ff7f00" d="m-50,0l100,0"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="leftarrow">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="10" stroke="#ff7f00" fill="#ff7f00" d="m-50,0l100,40l-30,-40l30,-40z"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="rightarrow">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="10" stroke="#ff7f00" fill="#ff7f00" d="m50,0l-100,40l30,-40l-30,-40z"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="leftarrow_o">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="10" stroke="#ff7f00" fill="none" d="m-50,0l100,40l-30,-40l30,-40z"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="rightarrow_o">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="10" stroke="#ff7f00" fill="none" d="m50,0l-100,40l30,-40l-30,-40z"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="forwardslash">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="10" stroke="#ff7f00" fill="none" d="m-20,50l40,-100"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="reverseslash">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="10" stroke="#ff7f00" fill="none" d="m-20,-50l40,100"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="verticalslash">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="10" stroke="#ff7f00" fill="none" d="m0,-50l0,100"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="mcircle">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle stroke-width="10" stroke="#ff7f00" fill="#ff7f00" cy="0" cx="0" r="30"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="mcircle_o">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle stroke-width="10" stroke="#ff7f00" fill="none" cy="0" cx="0" r="30"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="xmark">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="10" stroke="#ff7f00" fill="#ff7f00" d="m-30,30l60,-60m0,60l-60,-60"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="box">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="10" stroke="#ff7f00" fill="#ff7f00" d="m-30,-30l0,60l60,0l0,-60z"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="star">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="10" stroke="#ff7f00" fill="#ff7f00" d="m-40,-20l80,0l-70,60l30,-80l30,80z"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="box_o">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="10" stroke="#ff7f00" fill="none" d="m-30,-30l0,60l60,0l0,-60z"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="star_o">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="10" stroke="#ff7f00" fill="none" d="m-40,-20l80,0l-70,60l30,-80l30,80z"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="triangle_o">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="10" stroke="#ff7f00" fill="none" d="M-30,30 L0,-30 L30,30 Z"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="triangle">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="10" stroke="#ff7f00" fill="#ff7f00" d="M-30,30 L0,-30 L30,30 Z"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="textmarker">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="120" y="40" x="0" stroke-width="0" stroke="#ff7f00" fill="#ff7f00">T</text>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="mkr_markers_off">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<line y2="0" x2="50" y1="0" x1="-50" stroke-width="5" stroke="#ff7f00" fill="none"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="mkr_markers_dimension">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<line y2="0" x2="40" y1="0" x1="20" stroke-width="5" stroke="#ff7f00" fill="none"/>
|
||||
<line y2="0" x2="-40" y1="0" x1="-20" stroke-width="5" stroke="#ff7f00" fill="none"/>
|
||||
<text text-anchor="middle" font-family="serif" font-size="80" y="20" x="0" stroke-width="0" stroke="#ff7f00" fill="#ff7f00">T</text>
|
||||
<path stroke-width="5" stroke="#ff7f00" fill="#ff7f00" d="M-50,0 L-30,-15 L-30,15 Z"/>
|
||||
<path stroke-width="5" stroke="#ff7f00" fill="#ff7f00" d="M50,0 L30,-15 L30,15 Z"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="mkr_markers_label">
|
||||
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<line y2="0" x2="40" y1="0" x1="-20" stroke-width="5" stroke="#ff7f00" fill="none"/>
|
||||
<text text-anchor="middle" font-family="serif" font-size="80" y="20" x="-40" stroke-width="0" stroke="#ff7f00" fill="#ff7f00">T</text>
|
||||
<path stroke-width="5" stroke="#ff7f00" fill="#ff7f00" d="M50,0 L30,-15 L30,15 Z"/>
|
||||
</svg>
|
||||
</g>
|
||||
<g id="svg_eof"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.3 KiB |
BIN
dist/extensions/markers-leftarrow.png
vendored
Normal file
|
After Width: | Height: | Size: 4.7 KiB |