github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- npm: Update devDeps

Browse Source 
- Build: Update dist files
This commit is contained in:
Brett Zamir
2019-12-19 16:59:45 +08:00
parent 3ac0d58af9
commit aee1a45fd7
34 changed files with 15090 additions and 12780 deletions
Download Patch File Download Diff File Expand all files Collapse all files

676
dist/extensions/ext-arrows.js vendored
View File

@@ -1,6 +1,42 @@
var svgEditorExtension_arrows = (function () {
'use strict';
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
/**
* ext-arrows.js
*
@@ -11,345 +47,365 @@ var svgEditorExtension_arrows = (function () {
*/
var extArrows = {
name: 'arrows',
init: function init(S) {
var strings, svgEditor, svgCanvas, addElem, nonce, $, prefix, selElems, arrowprefix, randomizeIds, setArrowNonce, unsetArrowNonce, pathdata, getLinked, showPanel, resetMarker, addMarker, setArrow, colorChanged, contextTools;
return regeneratorRuntime.async(function init$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
colorChanged = function _ref10(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);
init: function () {
var _init = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee2(S) {
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 _ref10(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; // eslint-disable-line consistent-this
if (!marker) {
return;
}
});
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);
}
var curColor = $(marker).children().attr('fill');
var curD = $(marker).children().attr('d');
$(elem).attr('marker-' + type, 'url(#' + newMarker.id + ')'); // Check if last marker can be removed
if (curColor === color) {
return;
}
var remove = true;
$(S.svgcontent).find('line, polyline, path, polygon').each(function () {
var element = this; // eslint-disable-line consistent-this
var allMarkers = $(defs).find('marker');
var newMarker = null; // Different color, check if already made
$.each(mtypes, function (j, mtype) {
if ($(element).attr('marker-' + mtype) === 'url(#' + marker.id + ')') {
remove = false;
return remove;
allMarkers.each(function () {
var attrs = $(this).children().attr(['fill', 'd']);
if (attrs.fill === color && attrs.d === curD) {
// Found another marker with this color and this path
newMarker = this; // eslint-disable-line consistent-this
}
});
if (!newMarker) {
// Create a new marker with this color
var lastId = marker.id;
var dir = lastId.includes('_fw') ? 'fw' : 'bk';
newMarker = addMarker(dir, type, arrowprefix + dir + allMarkers.length);
$(newMarker).children().attr('fill', color);
}
$(elem).attr('marker-' + type, 'url(#' + newMarker.id + ')'); // Check if last marker can be removed
var remove = true;
$(S.svgcontent).find('line, polyline, path, polygon').each(function () {
var element = this; // eslint-disable-line consistent-this
$.each(mtypes, function (j, mtype) {
if ($(element).attr('marker-' + mtype) === 'url(#' + marker.id + ')') {
remove = false;
return remove;
}
return undefined;
});
if (!remove) {
return false;
}
return undefined;
}); // Not found, so can safely remove
if (remove) {
$(marker).remove();
}
});
};
setArrow = function _ref9() {
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 _ref8(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
}
});
if (!remove) {
return false;
}
return undefined;
}); // Not found, so can safely remove
if (remove) {
$(marker).remove();
var arrow = addElem({
element: 'path',
attr: {
d: data.d,
fill: '#000000'
}
});
marker.append(arrow);
svgCanvas.findDefs().append(marker);
}
});
};
setArrow = function _ref9() {
resetMarker();
var type = this.value;
marker.setAttribute('refX', data.refx);
return marker;
};
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 _ref8(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 _ref7() {
var el = selElems[0];
el.removeAttribute('marker-start');
el.removeAttribute('marker-mid');
el.removeAttribute('marker-end');
};
showPanel = function _ref6(on) {
$('#arrow_panel').toggle(on);
if (on) {
resetMarker = function _ref7() {
var el = selElems[0];
var end = el.getAttribute('marker-end');
var start = el.getAttribute('marker-start');
var mid = el.getAttribute('marker-mid');
var val;
el.removeAttribute('marker-start');
el.removeAttribute('marker-mid');
el.removeAttribute('marker-end');
};
if (end && start) {
val = 'both';
} else if (end) {
val = 'end';
} else if (start) {
val = 'start';
} else if (mid) {
val = 'mid';
showPanel = function _ref6(on) {
$('#arrow_panel').toggle(on);
if (mid.includes('bk')) {
val = 'mid_bk';
}
}
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 (!start && !mid && !end) {
val = 'none';
}
if (end && start) {
val = 'both';
} else if (end) {
val = 'end';
} else if (start) {
val = 'start';
} else if (mid) {
val = 'mid';
$('#arrow_list').val(val);
}
};
getLinked = function _ref5(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 _ref4(win) {
randomizeIds = false;
arrowprefix = prefix;
pathdata.fw.id = arrowprefix + 'fw';
pathdata.bk.id = arrowprefix + 'bk';
};
setArrowNonce = function _ref3(win, n) {
randomizeIds = true;
arrowprefix = prefix + n + '_';
pathdata.fw.id = arrowprefix + 'fw';
pathdata.bk.id = arrowprefix + 'bk';
};
_context2.next = 10;
return regeneratorRuntime.awrap(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) {
var lang, importLocale, _ref2, langList;
return regeneratorRuntime.async(function addLangData$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
lang = _ref.lang, importLocale = _ref.importLocale;
_context.next = 3;
return regeneratorRuntime.awrap(importLocale());
case 3:
_ref2 = _context.sent;
langList = _ref2.langList;
return _context.abrupt("return", {
data: langList
});
case 6:
case "end":
return _context.stop();
if (mid.includes('bk')) {
val = 'mid_bk';
}
}
});
},
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 (!start && !mid && !end) {
val = 'none';
}
if (elem && markerElems.includes(elem.tagName)) {
if (opts.selectedElement && !opts.multiselected) {
showPanel(true);
$('#arrow_list').val(val);
}
};
getLinked = function _ref5(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 _ref4(win) {
randomizeIds = false;
arrowprefix = prefix;
pathdata.fw.id = arrowprefix + 'fw';
pathdata.bk.id = arrowprefix + 'bk';
};
setArrowNonce = function _ref3(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 () {
var _addLangData = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(_ref) {
var lang, importLocale, _ref2, 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:
_ref2 = _context.sent;
langList = _ref2.langList;
return _context.abrupt("return", {
data: langList
});
case 6:
case "end":
return _context.stop();
}
}
}, _callee);
}));
function addLangData(_x2) {
return _addLangData.apply(this, arguments);
}
return addLangData;
}(),
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);
}
} 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);
}
}
},
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();
case 21:
case "end":
return _context2.stop();
}
}
}
}, null, this);
}
}, _callee2, this);
}));
function init(_x) {
return _init.apply(this, arguments);
}
return init;
}()
};
return extArrows;

222
dist/extensions/ext-closepath.js vendored
View File

@@ -1,6 +1,42 @@
var svgEditorExtension_closepath = (function () {
'use strict';
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
/**
* ext-closepath.js
*
@@ -13,115 +49,125 @@ var svgEditorExtension_closepath = (function () {
// The button toggles whether the path is open or closed
var extClosepath = {
name: 'closepath',
init: function init(_ref) {
var importLocale, $, strings, svgEditor, selElems, updateButton, showPanel, toggleClosed, buttons;
return regeneratorRuntime.async(function init$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
importLocale = _ref.importLocale, $ = _ref.$;
_context.next = 3;
return regeneratorRuntime.awrap(importLocale());
init: function () {
var _init = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(_ref) {
var importLocale, $, strings, svgEditor, selElems, updateButton, showPanel, toggleClosed, 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;
case 3:
strings = _context.sent;
svgEditor = this;
updateButton = function updateButton(path) {
var seglist = path.pathSegList,
closed = seglist.getItem(seglist.numberOfItems - 1).pathSegType === 1,
showbutton = closed ? '#tool_openpath' : '#tool_closepath',
hidebutton = closed ? '#tool_closepath' : '#tool_openpath';
$(hidebutton).hide();
$(showbutton).show();
};
updateButton = function updateButton(path) {
var seglist = path.pathSegList,
closed = seglist.getItem(seglist.numberOfItems - 1).pathSegType === 1,
showbutton = closed ? '#tool_openpath' : '#tool_closepath',
hidebutton = closed ? '#tool_closepath' : '#tool_openpath';
$(hidebutton).hide();
$(showbutton).show();
};
showPanel = function showPanel(on) {
$('#closepath_panel').toggle(on);
showPanel = function showPanel(on) {
$('#closepath_panel').toggle(on);
if (on) {
if (on) {
var path = selElems[0];
if (path) {
updateButton(path);
}
}
};
toggleClosed = function toggleClosed() {
var path = selElems[0];
if (path) {
var seglist = path.pathSegList,
last = seglist.numberOfItems - 1; // is closed
if (seglist.getItem(last).pathSegType === 1) {
seglist.removeItem(last);
} else {
seglist.appendItem(path.createSVGPathSegClosePath());
}
updateButton(path);
}
}
};
};
toggleClosed = function toggleClosed() {
var path = selElems[0];
if (path) {
var seglist = path.pathSegList,
last = seglist.numberOfItems - 1; // is closed
if (seglist.getItem(last).pathSegType === 1) {
seglist.removeItem(last);
} else {
seglist.appendItem(path.createSVGPathSegClosePath());
buttons = [{
id: 'tool_openpath',
icon: svgEditor.curConfig.extIconsPath + 'openpath.png',
type: 'context',
panel: 'closepath_panel',
events: {
click: function click() {
toggleClosed();
}
}
updateButton(path);
}
};
buttons = [{
id: 'tool_openpath',
icon: svgEditor.curConfig.extIconsPath + 'openpath.png',
type: 'context',
panel: 'closepath_panel',
events: {
click: function click() {
toggleClosed();
}, {
id: 'tool_closepath',
icon: svgEditor.curConfig.extIconsPath + 'closepath.png',
type: 'context',
panel: 'closepath_panel',
events: {
click: function click() {
toggleClosed();
}
}
}
}, {
id: 'tool_closepath',
icon: svgEditor.curConfig.extIconsPath + 'closepath.png',
type: 'context',
panel: 'closepath_panel',
events: {
click: function click() {
toggleClosed();
}
}
}];
return _context.abrupt("return", {
name: strings.name,
svgicons: svgEditor.curConfig.extIconsPath + 'closepath_icons.svg',
buttons: strings.buttons.map(function (button, i) {
return Object.assign(buttons[i], button);
}),
callback: function callback() {
$('#closepath_panel').hide();
},
selectedChanged: function selectedChanged(opts) {
selElems = opts.elems;
var i = selElems.length;
}];
return _context.abrupt("return", {
name: strings.name,
svgicons: svgEditor.curConfig.extIconsPath + 'closepath_icons.svg',
buttons: strings.buttons.map(function (button, i) {
return Object.assign(buttons[i], button);
}),
callback: function callback() {
$('#closepath_panel').hide();
},
selectedChanged: function selectedChanged(opts) {
selElems = opts.elems;
var i = selElems.length;
while (i--) {
var elem = selElems[i];
while (i--) {
var elem = selElems[i];
if (elem && elem.tagName === 'path') {
if (opts.selectedElement && !opts.multiselected) {
showPanel(true);
if (elem && elem.tagName === 'path') {
if (opts.selectedElement && !opts.multiselected) {
showPanel(true);
} else {
showPanel(false);
}
} else {
showPanel(false);
}
} else {
showPanel(false);
}
}
}
});
});
case 10:
case "end":
return _context.stop();
case 10:
case "end":
return _context.stop();
}
}
}
}, null, this);
}
}, _callee, this);
}));
function init(_x) {
return _init.apply(this, arguments);
}
return init;
}()
};
return extClosepath;

1154
dist/extensions/ext-connector.js vendored
View File

File diff suppressed because it is too large Load Diff

306
dist/extensions/ext-eyedropper.js vendored
View File

@@ -1,6 +1,42 @@
var svgEditorExtension_eyedropper = (function () {
'use strict';
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
/**
* ext-eyedropper.js
*
@@ -11,150 +47,160 @@ var svgEditorExtension_eyedropper = (function () {
*/
var extEyedropper = {
name: 'eyedropper',
init: function init(S) {
var strings, svgEditor, $, ChangeElementCommand, svgCanvas, addToHistory, currentStyle, getStyle, buttons;
return regeneratorRuntime.async(function init$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
getStyle = function _ref(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 regeneratorRuntime.awrap(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) {
init: function () {
var _init = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(S) {
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 _ref(opts) {
// if we are in eyedropper mode, we don't want to disable the eye-dropper tool
var mode = svgCanvas.getMode();
if (mode === 'eyedropper') {
var e = opts.event;
var target = e.target;
return;
}
if (!['svg', 'g', 'use'].includes(target.nodeName)) {
var changes = {};
var tool = $('#tool_eyedropper'); // enable-eye-dropper if one element is selected
var change = function change(elem, attrname, newvalue) {
changes[attrname] = elem.getAttribute(attrname);
elem.setAttribute(attrname, newvalue);
};
var elem = null;
if (currentStyle.fillPaint) {
change(target, 'fill', currentStyle.fillPaint);
}
if (!opts.multiselected && opts.elems[0] && !['svg', 'g', 'use'].includes(opts.elems[0].nodeName)) {
elem = opts.elems[0];
tool.removeClass('disabled'); // grab the current style
if (currentStyle.fillOpacity) {
change(target, 'fill-opacity', currentStyle.fillOpacity);
}
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 (currentStyle.strokePaint) {
change(target, 'stroke', currentStyle.strokePaint);
}
_context.next = 3;
return S.importLocale();
if (currentStyle.strokeOpacity) {
change(target, 'stroke-opacity', currentStyle.strokeOpacity);
}
case 3:
strings = _context.sent;
svgEditor = this;
$ = S.$, ChangeElementCommand = S.ChangeElementCommand, svgCanvas = svgEditor.canvas, addToHistory = function addToHistory(cmd) {
svgCanvas.undoMgr.addCommandToHistory(cmd);
}, currentStyle = {
fillPaint: 'red',
fillOpacity: 1.0,
strokePaint: 'black',
strokeOpacity: 1.0,
strokeWidth: 5,
strokeDashArray: null,
opacity: 1.0,
strokeLinecap: 'butt',
strokeLinejoin: 'miter'
};
/**
*
* @param {module:svgcanvas.SvgCanvas#event:ext_selectedChanged|module:svgcanvas.SvgCanvas#event:ext_elementChanged} opts
* @returns {void}
*/
if (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));
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();
case 8:
case "end":
return _context.stop();
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();
}
}
}
}, null, this);
}
}, _callee, this);
}));
function init(_x) {
return _init.apply(this, arguments);
}
return init;
}()
};
return extEyedropper;

628
dist/extensions/ext-foreignobject.js vendored
View File

@@ -1,6 +1,42 @@
var svgEditorExtension_foreignobject = (function () {
'use strict';
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
/**
* ext-foreignobject.js
*
@@ -11,311 +47,325 @@ var svgEditorExtension_foreignobject = (function () {
*/
var extForeignobject = {
name: 'foreignobject',
init: function init(S) {
var svgEditor, $, text2xml, NS, importLocale, svgCanvas, svgdoc, strings, properlySourceSizeTextArea, showPanel, toggleSourceButtons, selElems, started, newFO, editingforeign, setForeignString, showForeignEditor, setAttr, buttons, contextTools;
return regeneratorRuntime.async(function init$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
setAttr = function _ref5(attr, val) {
svgCanvas.changeSelectedAttribute(attr, val);
svgCanvas.call('changed', selElems);
};
init: function () {
var _init = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee2(S) {
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 _ref6(attr, val) {
svgCanvas.changeSelectedAttribute(attr, val);
svgCanvas.call('changed', selElems);
};
showForeignEditor = function _ref4() {
var elt = selElems[0];
showForeignEditor = function _ref5() {
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 _ref3(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 _ref2(on) {
$('#tool_source_save, #tool_source_cancel').toggle(!on);
$('#foreign_save, #foreign_cancel').toggle(on);
};
showPanel = function _ref(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 regeneratorRuntime.awrap(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(function _callee() {
var ok;
return regeneratorRuntime.async(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 regeneratorRuntime.awrap($.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();
}
}
});
});
/* 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;
if (!elt || editingforeign) {
return;
}
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'
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 _ref4(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 _ref3(on) {
$('#tool_source_save, #tool_source_cancel').toggle(!on);
$('#foreign_save, #foreign_cancel').toggle(on);
};
showPanel = function _ref2(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');
}
});
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;
}
}, {
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 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;
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
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);
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);
}
} else {
showPanel(false);
}
},
elementChanged: function elementChanged(opts) {// const elem = opts.elems[0];
}
},
elementChanged: function elementChanged(opts) {// const elem = opts.elems[0];
}
});
});
case 17:
case "end":
return _context2.stop();
case 17:
case "end":
return _context2.stop();
}
}
}
}, null, this);
}
}, _callee2, this);
}));
function init(_x) {
return _init.apply(this, arguments);
}
return init;
}()
};
return extForeignobject;

352
dist/extensions/ext-grid.js vendored
View File

@@ -1,6 +1,42 @@
var svgEditorExtension_grid = (function () {
'use strict';
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
/**
* ext-grid.js
*
@@ -11,170 +47,180 @@ var svgEditorExtension_grid = (function () {
*/
var extGrid = {
name: 'grid',
init: function init(_ref) {
var $, NS, getTypeMap, importLocale, strings, svgEditor, svgCanvas, svgdoc, assignAttributes, hcanvas, canvBG, units, intervals, showGrid, canvasGrid, gridDefs, gridPattern, gridimg, gridBox, updateGrid, gridUpdate, buttons;
return regeneratorRuntime.async(function init$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
gridUpdate = function _ref3() {
if (showGrid) {
updateGrid(svgCanvas.getZoom());
}
init: function () {
var _init = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(_ref) {
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 _ref3() {
if (showGrid) {
updateGrid(svgCanvas.getZoom());
}
$('#canvasGrid').toggle(showGrid);
$('#view_grid').toggleClass('push_button_pressed tool_button');
};
$('#canvasGrid').toggle(showGrid);
$('#view_grid').toggleClass('push_button_pressed tool_button');
};
updateGrid = function _ref2(zoom) {
// TODO: Try this with <line> elements, then compare performance difference
var unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px
updateGrid = function _ref2(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 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 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'
});
var bigInt = multi * uMulti; // Set the canvas size to the width of the container
canvBG.append(canvasGrid);
gridDefs = svgdoc.createElementNS(NS.SVG, 'defs'); // grid-pattern
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;
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
for (var i = 1; i < 10; i++) {
var subD = Math.round(part * i) + 0.5; // const lineNum = (i % 2)?12:10;
gridBox = svgdoc.createElementNS(NS.SVG, 'rect');
assignAttributes(gridBox, {
width: '100%',
height: '100%',
x: 0,
y: 0,
'stroke-width': 0,
stroke: 'none',
fill: 'url(#gridpattern)',
style: 'pointer-events: none; display:visible;'
});
$('#canvasGrid').append(gridBox);
/**
*
* @param {Float} zoom
* @returns {void}
*/
var 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 regeneratorRuntime.awrap(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();
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);
})
});
}];
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();
case 27:
case "end":
return _context.stop();
}
}
}
}, null, this);
}
}, _callee, this);
}));
function init(_x) {
return _init.apply(this, arguments);
}
return init;
}()
};
return extGrid;

206
dist/extensions/ext-helloworld.js vendored
View File

@@ -1,6 +1,42 @@
var svgEditorExtension_helloworld = (function () {
'use strict';
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}
@@ -59,91 +95,101 @@ var svgEditorExtension_helloworld = (function () {
*/
var extHelloworld = {
name: 'helloworld',
init: function init(_ref) {
var $, importLocale, strings, svgEditor, svgCanvas;
return regeneratorRuntime.async(function init$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
$ = _ref.$, importLocale = _ref.importLocale;
_context.next = 3;
return regeneratorRuntime.awrap(importLocale());
init: function () {
var _init = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(_ref) {
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');
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);
}
}
}],
// 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();
case 7:
case "end":
return _context.stop();
}
}
}
}, null, this);
}
}, _callee, this);
}));
function init(_x) {
return _init.apply(this, arguments);
}
return init;
}()
};
return extHelloworld;

922
dist/extensions/ext-imagelib.js vendored
View File

File diff suppressed because it is too large Load Diff

1303
dist/extensions/ext-markers.js vendored
View File

File diff suppressed because it is too large Load Diff

527
dist/extensions/ext-mathjax.js vendored
View File

@@ -1,6 +1,42 @@
var svgEditorExtension_mathjax = (function () {
'use strict';
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
/**
* Add any of the whitelisted attributes to the script tag.
* @param {HTMLScriptElement} script
@@ -16,14 +52,6 @@ var svgEditorExtension_mathjax = (function () {
}
});
} // Additions by Brett
/**
*
* @author Brett Zamir (other items are from `dynamic-import-polyfill`)
* @param {string|string[]} url
* @param {PlainObject} [atts={}]
* @returns {Promise<void|Error>} Resolves to `undefined` or rejects with an `Error` upon a
* script loading error
*/
function importScript(url) {
var atts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -73,253 +101,272 @@ var svgEditorExtension_mathjax = (function () {
});
}
/* globals MathJax */
var extMathjax = {
name: 'mathjax',
init: function init(_ref) {
var $, importLocale, strings, svgEditor, svgCanvas, mathjaxSrcSecure, uiStrings, math, locationX, locationY, mathjaxLoaded, saveMath, buttons;
return regeneratorRuntime.async(function init$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
saveMath = function _ref2() {
var code = $('#mathjax_code_textarea').val(); // displaystyle to force MathJax NOT to use the inline style. Because it is
// less fancy!
init: function () {
var _init = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee2(_ref) {
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 _ref2() {
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>`
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'
}
});
/**
*
* 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>`.
* @returns {void}
*/
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.
buttons = [{
id: 'tool_mathjax',
type: 'mode',
icon: svgEditor.curConfig.extIconsPath + 'mathjax.png',
events: {
click: function () {
var _click = _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.
var glymph = $('#' + id).clone().removeAttr('id');
var x = $(this).attr('x');
var y = $(this).attr('y');
var transform = $(this).attr('transform');
if (!(mathjaxLoaded === false)) {
_context.next = 17;
break;
}
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 + ')');
$('<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]]);
}));
function click() {
return _click.apply(this, arguments);
}
return click;
}()
}
}];
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
};
}
$(this).replaceWith(glymph);
}); // Remove the style tag because it interferes with SVG-Edit.
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
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!
locationX = opts.mouse_x / zoom;
locationY = opts.mouse_y / zoom;
$('#mathjax').show();
return {
started: false
}; // Otherwise the last selected object dissapears.
}
svgCanvas.moveSelectedElements(locationX, locationY, true);
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');
}
});
};
$ = _ref.$, importLocale = _ref.importLocale;
_context2.next = 4;
return regeneratorRuntime.awrap(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 regeneratorRuntime.async(function click$(_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 regeneratorRuntime.awrap(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();
}
}
}, null, 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();
case 12:
case "end":
return _context2.stop();
}
}
}
}, null, this);
}
}, _callee2, this);
}));
function init(_x) {
return _init.apply(this, arguments);
}
return init;
}()
};
return extMathjax;

156
dist/extensions/ext-panning.js vendored
View File

@@ -1,6 +1,42 @@
var svgEditorExtension_panning = (function () {
'use strict';
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
/**
* ext-panning.js
*
@@ -15,66 +51,76 @@ var svgEditorExtension_panning = (function () {
*/
var extPanning = {
name: 'panning',
init: function init(_ref) {
var importLocale, strings, svgEditor, svgCanvas, buttons;
return regeneratorRuntime.async(function init$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
importLocale = _ref.importLocale;
_context.next = 3;
return regeneratorRuntime.awrap(importLocale());
init: function () {
var _init = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(_ref) {
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');
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 _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;
}
});
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();
case 8:
case "end":
return _context.stop();
}
}
}
}, null, this);
}
}, _callee, this);
}));
function init(_x) {
return _init.apply(this, arguments);
}
return init;
}()
};
return extPanning;

1220
dist/extensions/ext-placemark.js vendored
View File

File diff suppressed because it is too large Load Diff

500
dist/extensions/ext-polygon.js vendored
View File

@@ -1,6 +1,42 @@
var svgEditorExtension_polygon = (function () {
'use strict';
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
/**
* ext-polygon.js
*
@@ -10,258 +46,268 @@ var svgEditorExtension_polygon = (function () {
*/
var extPolygon = {
name: 'polygon',
init: function init(S) {
var svgEditor, svgCanvas, $, importLocale, editingitex, strings, selElems, started, newFO, showPanel, setAttr, cot, sec, buttons, contextTools;
return regeneratorRuntime.async(function init$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
sec = function _ref4(n) {
return 1 / Math.cos(n);
};
init: function () {
var _init = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(S) {
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 _ref4(n) {
return 1 / Math.cos(n);
};
cot = function _ref3(n) {
return 1 / Math.tan(n);
};
cot = function _ref3(n) {
return 1 / Math.tan(n);
};
setAttr = function _ref2(attr, val) {
svgCanvas.changeSelectedAttribute(attr, val);
svgCanvas.call('changed', selElems);
};
setAttr = function _ref2(attr, val) {
svgCanvas.changeSelectedAttribute(attr, val);
svgCanvas.call('changed', selElems);
};
showPanel = function _ref(on) {
var fcRules = $('#fc_rules');
showPanel = function _ref(on) {
var fcRules = $('#fc_rules');
if (!fcRules.length) {
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
}
if (!fcRules.length) {
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
}
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
$('#polygon_panel').toggle(on);
};
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
$('#polygon_panel').toggle(on);
};
svgEditor = this;
svgCanvas = svgEditor.canvas;
$ = S.$, importLocale = S.importLocale, editingitex = false;
_context.next = 9;
return regeneratorRuntime.awrap(importLocale());
svgEditor = this;
svgCanvas = svgEditor.canvas;
$ = S.$, importLocale = S.importLocale, editingitex = false;
_context.next = 9;
return importLocale();
case 9:
strings = _context.sent;
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.
*/
/**
* 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);
/*
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]);
});
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);
svgCanvas.clearSelection();
} catch(e) {
console.log(e);
return false;
}
return 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
*/
buttons = [{
id: 'tool_polygon',
icon: svgEditor.curConfig.extIconsPath + 'polygon.png',
type: 'mode',
position: 11,
events: {
click: function click() {
svgCanvas.setMode('polygon');
showPanel(true);
}
});
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;
}
}];
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();
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;
setTimeout(function () {
// Create source save/cancel buttons
while (i--) {
var elem = selElems[i];
/* 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 = */
if (elem && elem.getAttribute('shape') === 'regularPoly') {
if (opts.selectedElement && !opts.multiselected) {
$('#polySides').val(elem.getAttribute('sides'));
showPanel(true);
$('#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);
}
} else {
showPanel(false);
}
},
elementChanged: function elementChanged(opts) {// const elem = opts.elems[0];
}
},
elementChanged: function elementChanged(opts) {// const elem = opts.elems[0];
}
});
});
case 13:
case "end":
return _context.stop();
case 13:
case "end":
return _context.stop();
}
}
}
}, null, this);
}
}, _callee, this);
}));
function init(_x) {
return _init.apply(this, arguments);
}
return init;
}()
};
return extPolygon;

246
dist/extensions/ext-server_moinsave.js vendored
View File

@@ -15,6 +15,42 @@ var svgEditorExtension_server_moinsave = (function () {
return _typeof(obj);
}
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
@@ -4536,26 +4572,36 @@ var svgEditorExtension_server_moinsave = (function () {
}; // load from url
svg.load = function _callee(ctx, url) {
var dom;
return regeneratorRuntime.async(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return regeneratorRuntime.awrap(svg.ajax(url, true));
svg.load =
/*#__PURE__*/
function () {
var _ref12 = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(ctx, url) {
var dom;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return svg.ajax(url, true);
case 2:
dom = _context.sent;
return _context.abrupt("return", svg.loadXml(ctx, dom));
case 2:
dom = _context.sent;
return _context.abrupt("return", svg.loadXml(ctx, dom));
case 4:
case "end":
return _context.stop();
case 4:
case "end":
return _context.stop();
}
}
}
});
}; // load from xml
}, _callee);
}));
return function (_x2, _x3) {
return _ref12.apply(this, arguments);
};
}(); // load from xml
svg.loadXml = function (ctx, xml) {
@@ -4776,9 +4822,9 @@ var svgEditorExtension_server_moinsave = (function () {
checkPath: function checkPath(element, ctx) {
var _this26 = this;
this.events.forEach(function (_ref12, i) {
var x = _ref12.x,
y = _ref12.y;
this.events.forEach(function (_ref13, i) {
var x = _ref13.x,
y = _ref13.y;
if (ctx.isPointInPath && ctx.isPointInPath(x, y)) {
_this26.eventElements[i] = element;
@@ -4788,9 +4834,9 @@ var svgEditorExtension_server_moinsave = (function () {
checkBoundingBox: function checkBoundingBox(element, bb) {
var _this27 = this;
this.events.forEach(function (_ref13, i) {
var x = _ref13.x,
y = _ref13.y;
this.events.forEach(function (_ref14, i) {
var x = _ref14.x,
y = _ref14.y;
if (bb.isPointInBox(x, y)) {
_this27.eventElements[i] = element;
@@ -4834,83 +4880,103 @@ var svgEditorExtension_server_moinsave = (function () {
var extServer_moinsave = {
name: 'server_moinsave',
init: function init(_ref) {
var $, encode64, importLocale, strings, svgEditor, svgCanvas, saveSvgAction;
return regeneratorRuntime.async(function init$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
$ = _ref.$, encode64 = _ref.encode64, importLocale = _ref.importLocale;
_context2.next = 3;
return regeneratorRuntime.awrap(importLocale());
init: function () {
var _init = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee2(_ref) {
var $, encode64, importLocale, strings, svgEditor, svgCanvas, saveSvgAction;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
$ = _ref.$, encode64 = _ref.encode64, importLocale = _ref.importLocale;
_context2.next = 3;
return importLocale();
case 3:
strings = _context2.sent;
svgEditor = this;
svgCanvas = svgEditor.canvas;
saveSvgAction = '/+modify'; // Create upload target (hidden iframe)
// Hiding by size instead of display to avoid FF console errors
// with `getBBox` in browser.js `supportsPathBBox_`)
case 3:
strings = _context2.sent;
svgEditor = this;
svgCanvas = svgEditor.canvas;
saveSvgAction = '/+modify'; // Create upload target (hidden iframe)
// Hiding by size instead of display to avoid FF console errors
// with `getBBox` in browser.js `supportsPathBBox_`)
/* const target = */
/* const target = */
$("<iframe name=\"output_frame\" title=\"".concat(strings.hiddenframe, "\"\n style=\"width: 0; height: 0;\" src=\"#\"/>")).appendTo('body');
svgEditor.setCustomHandlers({
save: function save(win, data) {
var svg, qstr, _qstr$substr$split, _qstr$substr$split2, name, svgData, c, datauri, pngData;
$("<iframe name=\"output_frame\" title=\"".concat(strings.hiddenframe, "\"\n style=\"width: 0; height: 0;\" src=\"#\"/>")).appendTo('body');
svgEditor.setCustomHandlers({
save: function () {
var _save = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(win, data) {
var svg, qstr, _qstr$substr$split, _qstr$substr$split2, name, svgData, c, datauri, pngData;
return regeneratorRuntime.async(function save$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
svg = '<?xml version="1.0"?>\n' + data;
qstr = $.param.querystring();
_qstr$substr$split = qstr.substr(9).split('/+get/'), _qstr$substr$split2 = _slicedToArray(_qstr$substr$split, 2), name = _qstr$substr$split2[1];
svgData = encode64(svg);
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
svg = '<?xml version="1.0"?>\n' + data;
qstr = $.param.querystring();
_qstr$substr$split = qstr.substr(9).split('/+get/'), _qstr$substr$split2 = _slicedToArray(_qstr$substr$split, 2), name = _qstr$substr$split2[1];
svgData = encode64(svg);
if (!$('#export_canvas').length) {
$('<canvas>', {
id: 'export_canvas'
}).hide().appendTo('body');
if (!$('#export_canvas').length) {
$('<canvas>', {
id: 'export_canvas'
}).hide().appendTo('body');
}
c = $('#export_canvas')[0];
c.width = svgCanvas.contentW;
c.height = svgCanvas.contentH;
_context.next = 10;
return canvg(c, svg);
case 10:
datauri = c.toDataURL('image/png'); // const {uiStrings} = svgEditor;
pngData = encode64(datauri); // Brett: This encoding seems unnecessary
/* const form = */
$('<form>').attr({
method: 'post',
action: saveSvgAction + '/' + name,
target: 'output_frame'
}).append("\n <input type=\"hidden\" name=\"png_data\" value=\"".concat(pngData, "\">\n <input type=\"hidden\" name=\"filepath\" value=\"").concat(svgData, "\">\n <input type=\"hidden\" name=\"filename\" value=\"drawing.svg\">\n <input type=\"hidden\" name=\"contenttype\" value=\"application/x-svgdraw\">\n ")).appendTo('body').submit().remove();
$.alert(strings.saved);
top.window.location = '/' + name;
case 15:
case "end":
return _context.stop();
}
}
}, _callee);
}));
c = $('#export_canvas')[0];
c.width = svgCanvas.contentW;
c.height = svgCanvas.contentH;
_context.next = 10;
return regeneratorRuntime.awrap(canvg(c, svg));
case 10:
datauri = c.toDataURL('image/png'); // const {uiStrings} = svgEditor;
pngData = encode64(datauri); // Brett: This encoding seems unnecessary
/* const form = */
$('<form>').attr({
method: 'post',
action: saveSvgAction + '/' + name,
target: 'output_frame'
}).append("\n <input type=\"hidden\" name=\"png_data\" value=\"".concat(pngData, "\">\n <input type=\"hidden\" name=\"filepath\" value=\"").concat(svgData, "\">\n <input type=\"hidden\" name=\"filename\" value=\"drawing.svg\">\n <input type=\"hidden\" name=\"contenttype\" value=\"application/x-svgdraw\">\n ")).appendTo('body').submit().remove();
$.alert(strings.saved);
top.window.location = '/' + name;
case 15:
case "end":
return _context.stop();
}
function save(_x2, _x3) {
return _save.apply(this, arguments);
}
});
}
});
case 9:
case "end":
return _context2.stop();
return save;
}()
});
case 9:
case "end":
return _context2.stop();
}
}
}
}, null, this);
}
}, _callee2, this);
}));
function init(_x) {
return _init.apply(this, arguments);
}
return init;
}()
};
return extServer_moinsave;

697
dist/extensions/ext-server_opensave.js vendored
View File

@@ -15,6 +15,42 @@ var svgEditorExtension_server_opensave = (function () {
return _typeof(obj);
}
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
@@ -4536,26 +4572,36 @@ var svgEditorExtension_server_opensave = (function () {
}; // load from url
svg.load = function _callee(ctx, url) {
var dom;
return regeneratorRuntime.async(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return regeneratorRuntime.awrap(svg.ajax(url, true));
svg.load =
/*#__PURE__*/
function () {
var _ref12 = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(ctx, url) {
var dom;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return svg.ajax(url, true);
case 2:
dom = _context.sent;
return _context.abrupt("return", svg.loadXml(ctx, dom));
case 2:
dom = _context.sent;
return _context.abrupt("return", svg.loadXml(ctx, dom));
case 4:
case "end":
return _context.stop();
case 4:
case "end":
return _context.stop();
}
}
}
});
}; // load from xml
}, _callee);
}));
return function (_x2, _x3) {
return _ref12.apply(this, arguments);
};
}(); // load from xml
svg.loadXml = function (ctx, xml) {
@@ -4776,9 +4822,9 @@ var svgEditorExtension_server_opensave = (function () {
checkPath: function checkPath(element, ctx) {
var _this26 = this;
this.events.forEach(function (_ref12, i) {
var x = _ref12.x,
y = _ref12.y;
this.events.forEach(function (_ref13, i) {
var x = _ref13.x,
y = _ref13.y;
if (ctx.isPointInPath && ctx.isPointInPath(x, y)) {
_this26.eventElements[i] = element;
@@ -4788,9 +4834,9 @@ var svgEditorExtension_server_opensave = (function () {
checkBoundingBox: function checkBoundingBox(element, bb) {
var _this27 = this;
this.events.forEach(function (_ref13, i) {
var x = _ref13.x,
y = _ref13.y;
this.events.forEach(function (_ref14, i) {
var x = _ref14.x,
y = _ref14.y;
if (bb.isPointInBox(x, y)) {
_this27.eventElements[i] = element;
@@ -4832,334 +4878,363 @@ var svgEditorExtension_server_opensave = (function () {
};
}
/**
* ext-server_opensave.js
*
* @license MIT
*
* @copyright 2010 Alexis Deveria
*
*/
var extServer_opensave = {
name: 'server_opensave',
init: function init(_ref) {
var $, decode64, encode64, importLocale, strings, svgEditor, _svgEditor$curConfig, extPath, avoidClientSide, avoidClientSideDownload, avoidClientSideOpen, svgCanvas, getFileNameFromTitle, xhtmlEscape, clientDownloadSupport, saveSvgAction, saveImgAction, cancelled, openSvgAction, importSvgAction, importImgAction, openSvgForm, importSvgForm, importImgForm, rebuildInput;
init: function () {
var _init = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee5(_ref) {
var $, decode64, encode64, importLocale, strings, svgEditor, _svgEditor$curConfig, extPath, avoidClientSide, avoidClientSideDownload, avoidClientSideOpen, svgCanvas, getFileNameFromTitle, xhtmlEscape, clientDownloadSupport, saveSvgAction, saveImgAction, cancelled, openSvgAction, importSvgAction, importImgAction, openSvgForm, importSvgForm, importImgForm, rebuildInput;
return regeneratorRuntime.async(function init$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
rebuildInput = function _ref5(form) {
form.empty();
var inp = $('<input type="file" name="svg_file">').appendTo(form);
return regeneratorRuntime.wrap(function _callee5$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
rebuildInput = function _ref7(form) {
form.empty();
var inp = $('<input type="file" name="svg_file">').appendTo(form);
/**
* Submit the form, empty its contents for reuse and show
* uploading message.
* @returns {Promise<void>}
*/
function submit() {
return _submit.apply(this, arguments);
}
function _submit() {
_submit = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee4() {
return regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
// This submits the form, which returns the file data using `svgEditor.processFile()`
form.submit();
rebuildInput(form);
_context4.next = 4;
return $.process_cancel(strings.uploading);
case 4:
cancelled = true;
$('#dialog_box').hide();
case 6:
case "end":
return _context4.stop();
}
}
}, _callee4);
}));
return _submit.apply(this, arguments);
}
if (form[0] === openSvgForm[0]) {
inp.change(
/*#__PURE__*/
_asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee2() {
var ok;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
_context2.next = 2;
return svgEditor.openPrep();
case 2:
ok = _context2.sent;
if (ok) {
_context2.next = 6;
break;
}
rebuildInput(form);
return _context2.abrupt("return");
case 6:
_context2.next = 8;
return submit();
case 8:
case "end":
return _context2.stop();
}
}
}, _callee2);
})));
} else {
inp.change(
/*#__PURE__*/
_asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee3() {
return regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_context3.next = 2;
return submit();
case 2:
case "end":
return _context3.stop();
}
}
}, _callee3);
})));
}
};
clientDownloadSupport = function _ref6(filename, suffix, uri) {
if (avoidClientSide || avoidClientSideDownload) {
return false;
}
var support = $('<a>')[0].download === '';
var a;
if (support) {
a = $('<a>hidden</a>').attr({
download: (filename || 'image') + suffix,
href: uri
}).css('display', 'none').appendTo('body');
a[0].click();
return true;
}
return false;
};
xhtmlEscape = function _ref5(str) {
return str.replace(/&(?!amp;)/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;'); // < is actually disallowed above anyways
};
getFileNameFromTitle = function _ref4() {
var title = svgCanvas.getDocumentTitle(); // We convert (to underscore) only those disallowed Win7 file name characters
return title.trim().replace(/[/\\:*?"<>|]/g, '_');
};
$ = _ref.$, decode64 = _ref.decode64, encode64 = _ref.encode64, importLocale = _ref.importLocale;
_context5.next = 7;
return importLocale();
case 7:
strings = _context5.sent;
svgEditor = this;
_svgEditor$curConfig = svgEditor.curConfig, extPath = _svgEditor$curConfig.extPath, avoidClientSide = _svgEditor$curConfig.avoidClientSide, avoidClientSideDownload = _svgEditor$curConfig.avoidClientSideDownload, avoidClientSideOpen = _svgEditor$curConfig.avoidClientSideOpen, svgCanvas = svgEditor.canvas;
/**
* Submit the form, empty its contents for reuse and show
* uploading message.
* @returns {Promise<void>}
*
* @returns {string}
*/
function submit() {
return regeneratorRuntime.async(function submit$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
// This submits the form, which returns the file data using `svgEditor.processFile()`
form.submit();
rebuildInput(form);
_context2.next = 4;
return regeneratorRuntime.awrap($.process_cancel(strings.uploading));
saveSvgAction = extPath + 'filesave.php', saveImgAction = extPath + 'filesave.php'; // Create upload target (hidden iframe)
case 4:
cancelled = true;
$('#dialog_box').hide();
cancelled = false; // Hiding by size instead of display to avoid FF console errors
// with `getBBox` in browser.js `supportsPathBBox_`)
case 6:
case "end":
return _context2.stop();
}
$("<iframe name=\"output_frame\" title=\"".concat(strings.hiddenframe, "\"\n style=\"width: 0; height: 0;\" src=\"#\"/>")).appendTo('body');
svgEditor.setCustomHandlers({
save: function save(win, data) {
var svg = '<?xml version="1.0" encoding="UTF-8"?>\n' + data,
// Firefox doesn't seem to know it is UTF-8 (no matter whether we use or skip the clientDownload code) despite the Content-Disposition header containing UTF-8, but adding the encoding works
filename = getFileNameFromTitle();
if (clientDownloadSupport(filename, '.svg', 'data:image/svg+xml;charset=UTF-8;base64,' + encode64(svg))) {
return;
}
});
}
if (form[0] === openSvgForm[0]) {
inp.change(function _callee() {
var ok;
return regeneratorRuntime.async(function _callee$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_context3.next = 2;
return regeneratorRuntime.awrap(svgEditor.openPrep());
$('<form>').attr({
method: 'post',
action: saveSvgAction,
target: 'output_frame'
}).append("\n <input type=\"hidden\" name=\"output_svg\" value=\"".concat(xhtmlEscape(svg), "\">\n <input type=\"hidden\" name=\"filename\" value=\"").concat(xhtmlEscape(filename), "\">\n ")).appendTo('body').submit().remove();
},
exportPDF: function exportPDF(win, data) {
var filename = getFileNameFromTitle(),
datauri = data.output;
case 2:
ok = _context3.sent;
if (clientDownloadSupport(filename, '.pdf', datauri)) {
return;
}
if (ok) {
_context3.next = 6;
break;
}
$('<form>').attr({
method: 'post',
action: saveImgAction,
target: 'output_frame'
}).append("\n <input type=\"hidden\" name=\"output_img\" value=\"".concat(datauri, "\">\n <input type=\"hidden\" name=\"mime\" value=\"application/pdf\">\n <input type=\"hidden\" name=\"filename\" value=\"").concat(xhtmlEscape(filename), "\">\n ")).appendTo('body').submit().remove();
},
// Todo: Integrate this extension with a new built-in exportWindowType, "download"
exportImage: function () {
var _exportImage = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(win, data) {
var issues, mimeType, quality, c, datauri, pre, note, filename, suffix;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
issues = data.issues, mimeType = data.mimeType, quality = data.quality;
rebuildInput(form);
return _context3.abrupt("return");
if (!$('#export_canvas').length) {
$('<canvas>', {
id: 'export_canvas'
}).hide().appendTo('body');
}
case 6:
_context3.next = 8;
return regeneratorRuntime.awrap(submit());
c = $('#export_canvas')[0];
c.width = svgCanvas.contentW;
c.height = svgCanvas.contentH;
_context.next = 7;
return canvg(c, data.svg);
case 8:
case "end":
return _context3.stop();
case 7:
datauri = quality ? c.toDataURL(mimeType, quality) : c.toDataURL(mimeType); // {uiStrings} = svgEditor;
// Check if there are issues
note = '';
if (issues.length) {
pre = "\n \u2022 "; // Bullet
note += '\n\n' + pre + issues.join(pre);
}
if (!note.length) {
_context.next = 13;
break;
}
_context.next = 13;
return $.alert(note);
case 13:
filename = getFileNameFromTitle();
suffix = '.' + data.type.toLowerCase();
if (!clientDownloadSupport(filename, suffix, datauri)) {
_context.next = 17;
break;
}
return _context.abrupt("return");
case 17:
$('<form>').attr({
method: 'post',
action: saveImgAction,
target: 'output_frame'
}).append("\n <input type=\"hidden\" name=\"output_img\" value=\"".concat(datauri, "\">\n <input type=\"hidden\" name=\"mime\" value=\"").concat(mimeType, "\">\n <input type=\"hidden\" name=\"filename\" value=\"").concat(xhtmlEscape(filename), "\">\n ")).appendTo('body').submit().remove();
case 18:
case "end":
return _context.stop();
}
}
}
});
});
} else {
inp.change(function _callee2() {
return regeneratorRuntime.async(function _callee2$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
_context4.next = 2;
return regeneratorRuntime.awrap(submit());
}, _callee);
}));
case 2:
case "end":
return _context4.stop();
}
}
});
});
}
};
function exportImage(_x2, _x3) {
return _exportImage.apply(this, arguments);
}
clientDownloadSupport = function _ref4(filename, suffix, uri) {
if (avoidClientSide || avoidClientSideDownload) {
return false;
return exportImage;
}()
}); // Do nothing if client support is found
if (!(window.FileReader && !avoidClientSideOpen)) {
_context5.next = 16;
break;
}
var support = $('<a>')[0].download === '';
var a;
return _context5.abrupt("return");
if (support) {
a = $('<a>hidden</a>').attr({
download: (filename || 'image') + suffix,
href: uri
}).css('display', 'none').appendTo('body');
a[0].click();
return true;
}
case 16:
// Change these to appropriate script file
openSvgAction = extPath + 'fileopen.php?type=load_svg';
importSvgAction = extPath + 'fileopen.php?type=import_svg';
importImgAction = extPath + 'fileopen.php?type=import_img'; // Set up function for PHP uploader to use
return false;
};
svgEditor.processFile = function (str64, type) {
var xmlstr;
xhtmlEscape = function _ref3(str) {
return str.replace(/&(?!amp;)/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;'); // < is actually disallowed above anyways
};
getFileNameFromTitle = function _ref2() {
var title = svgCanvas.getDocumentTitle(); // We convert (to underscore) only those disallowed Win7 file name characters
return title.trim().replace(/[/\\:*?"<>|]/g, '_');
};
$ = _ref.$, decode64 = _ref.decode64, encode64 = _ref.encode64, importLocale = _ref.importLocale;
_context5.next = 7;
return regeneratorRuntime.awrap(importLocale());
case 7:
strings = _context5.sent;
svgEditor = this;
_svgEditor$curConfig = svgEditor.curConfig, extPath = _svgEditor$curConfig.extPath, avoidClientSide = _svgEditor$curConfig.avoidClientSide, avoidClientSideDownload = _svgEditor$curConfig.avoidClientSideDownload, avoidClientSideOpen = _svgEditor$curConfig.avoidClientSideOpen, svgCanvas = svgEditor.canvas;
/**
*
* @returns {string}
*/
saveSvgAction = extPath + 'filesave.php', saveImgAction = extPath + 'filesave.php'; // Create upload target (hidden iframe)
cancelled = false; // Hiding by size instead of display to avoid FF console errors
// with `getBBox` in browser.js `supportsPathBBox_`)
$("<iframe name=\"output_frame\" title=\"".concat(strings.hiddenframe, "\"\n style=\"width: 0; height: 0;\" src=\"#\"/>")).appendTo('body');
svgEditor.setCustomHandlers({
save: function save(win, data) {
var svg = '<?xml version="1.0" encoding="UTF-8"?>\n' + data,
// Firefox doesn't seem to know it is UTF-8 (no matter whether we use or skip the clientDownload code) despite the Content-Disposition header containing UTF-8, but adding the encoding works
filename = getFileNameFromTitle();
if (clientDownloadSupport(filename, '.svg', 'data:image/svg+xml;charset=UTF-8;base64,' + encode64(svg))) {
if (cancelled) {
cancelled = false;
return;
}
$('<form>').attr({
method: 'post',
action: saveSvgAction,
target: 'output_frame'
}).append("\n <input type=\"hidden\" name=\"output_svg\" value=\"".concat(xhtmlEscape(svg), "\">\n <input type=\"hidden\" name=\"filename\" value=\"").concat(xhtmlEscape(filename), "\">\n ")).appendTo('body').submit().remove();
},
exportPDF: function exportPDF(win, data) {
var filename = getFileNameFromTitle(),
datauri = data.output;
$('#dialog_box').hide();
if (clientDownloadSupport(filename, '.pdf', datauri)) {
return;
if (type !== 'import_img') {
xmlstr = decode64(str64);
}
$('<form>').attr({
method: 'post',
action: saveImgAction,
target: 'output_frame'
}).append("\n <input type=\"hidden\" name=\"output_img\" value=\"".concat(datauri, "\">\n <input type=\"hidden\" name=\"mime\" value=\"application/pdf\">\n <input type=\"hidden\" name=\"filename\" value=\"").concat(xhtmlEscape(filename), "\">\n ")).appendTo('body').submit().remove();
},
// Todo: Integrate this extension with a new built-in exportWindowType, "download"
exportImage: function exportImage(win, data) {
var issues, mimeType, quality, c, datauri, pre, note, filename, suffix;
return regeneratorRuntime.async(function exportImage$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
issues = data.issues, mimeType = data.mimeType, quality = data.quality;
switch (type) {
case 'load_svg':
svgCanvas.clear();
svgCanvas.setSvgString(xmlstr);
svgEditor.updateCanvas();
break;
if (!$('#export_canvas').length) {
$('<canvas>', {
id: 'export_canvas'
}).hide().appendTo('body');
}
case 'import_svg':
svgCanvas.importSvgString(xmlstr);
svgEditor.updateCanvas();
break;
c = $('#export_canvas')[0];
c.width = svgCanvas.contentW;
c.height = svgCanvas.contentH;
_context.next = 7;
return regeneratorRuntime.awrap(canvg(c, data.svg));
case 7:
datauri = quality ? c.toDataURL(mimeType, quality) : c.toDataURL(mimeType); // {uiStrings} = svgEditor;
// Check if there are issues
note = '';
if (issues.length) {
pre = "\n \u2022 "; // Bullet
note += '\n\n' + pre + issues.join(pre);
}
if (!note.length) {
_context.next = 13;
break;
}
_context.next = 13;
return regeneratorRuntime.awrap($.alert(note));
case 13:
filename = getFileNameFromTitle();
suffix = '.' + data.type.toLowerCase();
if (!clientDownloadSupport(filename, suffix, datauri)) {
_context.next = 17;
break;
}
return _context.abrupt("return");
case 17:
$('<form>').attr({
method: 'post',
action: saveImgAction,
target: 'output_frame'
}).append("\n <input type=\"hidden\" name=\"output_img\" value=\"".concat(datauri, "\">\n <input type=\"hidden\" name=\"mime\" value=\"").concat(mimeType, "\">\n <input type=\"hidden\" name=\"filename\" value=\"").concat(xhtmlEscape(filename), "\">\n ")).appendTo('body').submit().remove();
case 18:
case "end":
return _context.stop();
}
}
});
}
}); // Do nothing if client support is found
if (!(window.FileReader && !avoidClientSideOpen)) {
_context5.next = 16;
break;
}
return _context5.abrupt("return");
case 16:
// Change these to appropriate script file
openSvgAction = extPath + 'fileopen.php?type=load_svg';
importSvgAction = extPath + 'fileopen.php?type=import_svg';
importImgAction = extPath + 'fileopen.php?type=import_img'; // Set up function for PHP uploader to use
svgEditor.processFile = function (str64, type) {
var xmlstr;
if (cancelled) {
cancelled = false;
return;
}
$('#dialog_box').hide();
if (type !== 'import_img') {
xmlstr = decode64(str64);
}
switch (type) {
case 'load_svg':
svgCanvas.clear();
svgCanvas.setSvgString(xmlstr);
svgEditor.updateCanvas();
break;
case 'import_svg':
svgCanvas.importSvgString(xmlstr);
svgEditor.updateCanvas();
break;
case 'import_img':
svgCanvas.setGoodImage(str64);
break;
}
}; // Create upload form
case 'import_img':
svgCanvas.setGoodImage(str64);
break;
}
}; // Create upload form
openSvgForm = $('<form>');
openSvgForm.attr({
enctype: 'multipart/form-data',
method: 'post',
action: openSvgAction,
target: 'output_frame'
}); // Create import form
openSvgForm = $('<form>');
openSvgForm.attr({
enctype: 'multipart/form-data',
method: 'post',
action: openSvgAction,
target: 'output_frame'
}); // Create import form
importSvgForm = openSvgForm.clone().attr('action', importSvgAction); // Create image form
importSvgForm = openSvgForm.clone().attr('action', importSvgAction); // Create image form
importImgForm = openSvgForm.clone().attr('action', importImgAction); // It appears necessary to rebuild this input every time a file is
// selected so the same file can be picked and the change event can fire.
importImgForm = openSvgForm.clone().attr('action', importImgAction); // It appears necessary to rebuild this input every time a file is
// selected so the same file can be picked and the change event can fire.
/**
*
* @param {external:jQuery} form
* @returns {void}
*/
/**
*
* @param {external:jQuery} form
* @returns {void}
*/
// Create the input elements
rebuildInput(openSvgForm);
rebuildInput(importSvgForm);
rebuildInput(importImgForm); // Add forms to buttons
// Create the input elements
rebuildInput(openSvgForm);
rebuildInput(importSvgForm);
rebuildInput(importImgForm); // Add forms to buttons
$('#tool_open').show().prepend(openSvgForm);
$('#tool_import').show().prepend(importSvgForm);
$('#tool_image').prepend(importImgForm);
$('#tool_open').show().prepend(openSvgForm);
$('#tool_import').show().prepend(importSvgForm);
$('#tool_image').prepend(importImgForm);
case 30:
case "end":
return _context5.stop();
case 30:
case "end":
return _context5.stop();
}
}
}
}, null, this);
}
}, _callee5, this);
}));
function init(_x) {
return _init.apply(this, arguments);
}
return init;
}()
};
return extServer_opensave;

658
dist/extensions/ext-shapes.js vendored
View File

@@ -1,6 +1,42 @@
var svgEditorExtension_shapes = (function () {
'use strict';
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}
@@ -53,329 +89,339 @@ var svgEditorExtension_shapes = (function () {
*/
var extShapes = {
name: 'shapes',
init: function init(_ref) {
var $, importLocale, strings, svgEditor, canv, svgroot, lastBBox, categories, library, modeId, startClientPos, currentD, curShapeId, curShape, startX, startY, curLib, loadIcons, makeButtons, loadLibrary, buttons;
return regeneratorRuntime.async(function init$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
loadLibrary = function _ref8(catId) {
var lib = library[catId];
init: function () {
var _init = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(_ref) {
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 _ref8(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 _ref7(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 _ref6() {
$('#shape_buttons').empty().append(curLib.buttons);
};
$ = _ref.$, importLocale = _ref.importLocale;
_context.next = 6;
return regeneratorRuntime.awrap(importLocale());
case 6:
strings = _context.sent;
svgEditor = this;
canv = svgEditor.canvas;
svgroot = canv.getRootElem();
lastBBox = {}; // This populates the category list
categories = strings.categories;
library = {
basic: {
data: {
heart: 'm150,73c61,-175 300,0 0,225c-300,-225 -61,-400 0,-225z',
frame: 'm0,0l300,0l0,300l-300,0zm35,-265l0,230l230,0l0,-230z',
donut: 'm1,150l0,0c0,-82.29042 66.70958,-149 149,-149l0,0c39.51724,0 77.41599,15.69816 105.35889,43.64108c27.94293,27.94293 43.64111,65.84165 43.64111,105.35892l0,0c0,82.29041 -66.70958,149 -149,149l0,0c-82.29041,0 -149,-66.70959 -149,-149zm74.5,0l0,0c0,41.1452 33.35481,74.5 74.5,74.5c41.14522,0 74.5,-33.3548 74.5,-74.5c0,-41.1452 -33.3548,-74.5 -74.5,-74.5l0,0c-41.14519,0 -74.5,33.35481 -74.5,74.5z',
triangle: 'm1,280.375l149,-260.75l149,260.75z',
right_triangle: 'm1,299l0,-298l298,298z',
diamond: 'm1,150l149,-149l149,149l-149,149l-149,-149z',
pentagon: 'm1.00035,116.97758l148.99963,-108.4053l148.99998,108.4053l-56.91267,175.4042l-184.1741,0l-56.91284,-175.4042z',
hexagon: 'm1,149.99944l63.85715,-127.71428l170.28572,0l63.85713,127.71428l-63.85713,127.71428l-170.28572,0l-63.85715,-127.71428z',
septagon1: 'm0.99917,191.06511l29.51249,-127.7108l119.48833,-56.83673l119.48836,56.83673l29.51303,127.7108l-82.69087,102.41679l-132.62103,0l-82.69031,-102.41679z',
heptagon: 'm1,88.28171l87.28172,-87.28171l123.43653,0l87.28172,87.28171l0,123.43654l-87.28172,87.28172l-123.43653,0l-87.28172,-87.28172l0,-123.43654z',
decagon: 'm1,150.00093l28.45646,-88.40318l74.49956,-54.63682l92.08794,0l74.50002,54.63682l28.45599,88.40318l-28.45599,88.40318l-74.50002,54.63681l-92.08794,0l-74.49956,-54.63681l-28.45646,-88.40318z',
dodecagon: 'm1,110.07421l39.92579,-69.14842l69.14842,-39.92579l79.85159,0l69.14842,39.92579l39.92578,69.14842l0,79.85159l-39.92578,69.14842l-69.14842,39.92578l-79.85159,0l-69.14842,-39.92578l-39.92579,-69.14842l0,-79.85159z',
star_points_5: 'm1,116.58409l113.82668,0l35.17332,-108.13487l35.17334,108.13487l113.82666,0l-92.08755,66.83026l35.17514,108.13487l-92.08759,-66.83208l-92.08757,66.83208l35.17515,-108.13487l-92.08758,-66.83026z',
trapezoid: 'm1,299l55.875,-298l186.25001,0l55.87498,298z',
arrow_up: 'm1.49805,149.64304l148.50121,-148.00241l148.50121,148.00241l-74.25061,0l0,148.71457l-148.5012,0l0,-148.71457z',
vertical_scrool: 'm37.375,261.625l0,-242.9375l0,0c0,-10.32083 8.36669,-18.6875 18.6875,-18.6875l224.25,0c10.32083,0 18.6875,8.36667 18.6875,18.6875c0,10.32081 -8.36667,18.6875 -18.6875,18.6875l-18.6875,0l0,242.9375c0,10.32083 -8.36668,18.6875 -18.6875,18.6875l-224.25,0l0,0c-10.32083,0 -18.6875,-8.36667 -18.6875,-18.6875c0,-10.32083 8.36667,-18.6875 18.6875,-18.6875zm37.375,-261.625l0,0c10.32081,0 18.6875,8.36667 18.6875,18.6875c0,10.32081 -8.36669,18.6875 -18.6875,18.6875c-5.1604,0 -9.34375,-4.18335 -9.34375,-9.34375c0,-5.16041 4.18335,-9.34375 9.34375,-9.34375l18.6875,0m186.875,18.6875l-205.5625,0m-37.375,224.25l0,0c5.1604,0 9.34375,4.18335 9.34375,9.34375c0,5.1604 -4.18335,9.34375 -9.34375,9.34375l18.6875,0m-18.6875,18.6875l0,0c10.32081,0 18.6875,-8.36667 18.6875,-18.6875l0,-18.6875',
smiley: 'm68.49886,214.78838q81.06408,55.67332 161.93891,0m-144.36983,-109.9558c0,-8.60432 6.97517,-15.57949 15.57948,-15.57949c8.60431,0 15.57948,6.97517 15.57948,15.57949c0,8.60431 -6.97517,15.57947 -15.57948,15.57947c-8.60431,0 -15.57948,-6.97516 -15.57948,-15.57947m95.83109,0c0,-8.60432 6.97517,-15.57949 15.57948,-15.57949c8.60431,0 15.57947,6.97517 15.57947,15.57949c0,8.60431 -6.97516,15.57947 -15.57947,15.57947c-8.60429,0 -15.57948,-6.97516 -15.57948,-15.57947m-181.89903,44.73038l0,0c0,-82.60133 66.96162,-149.56296 149.56296,-149.56296c82.60135,0 149.56296,66.96162 149.56296,149.56296c0,82.60135 -66.96161,149.56296 -149.56296,149.56296c-82.60133,0 -149.56296,-66.96161 -149.56296,-149.56296zm0,0l0,0c0,-82.60133 66.96162,-149.56296 149.56296,-149.56296c82.60135,0 149.56296,66.96162 149.56296,149.56296c0,82.60135 -66.96161,149.56296 -149.56296,149.56296c-82.60133,0 -149.56296,-66.96161 -149.56296,-149.56296z',
left_braket: 'm174.24565,298.5c-13.39009,0 -24.24489,-1.80908 -24.24489,-4.04065l0,-140.4187c0,-2.23158 -10.85481,-4.04065 -24.2449,-4.04065l0,0c13.39009,0 24.2449,-1.80907 24.2449,-4.04065l0,-140.4187l0,0c0,-2.23159 10.8548,-4.04066 24.24489,-4.04066',
uml_actor: 'm40.5,100l219,0m-108.99991,94.00006l107,105m-107.00009,-106.00006l-100,106m99.5,-231l0,125m33.24219,-158.75781c0,18.35916 -14.88303,33.24219 -33.24219,33.24219c-18.35916,0 -33.2422,-14.88303 -33.2422,-33.24219c0.00002,-18.35915 14.88304,-33.24219 33.2422,-33.24219c18.35916,0 33.24219,14.88304 33.24219,33.24219z',
dialog_balloon_1: 'm0.99786,35.96579l0,0c0,-19.31077 15.28761,-34.96524 34.14583,-34.96524l15.52084,0l0,0l74.50001,0l139.68748,0c9.05606,0 17.74118,3.68382 24.14478,10.24108c6.40356,6.55726 10.00107,15.45081 10.00107,24.72416l0,87.41311l0,0l0,52.44785l0,0c0,19.31078 -15.2876,34.96524 -34.14584,34.96524l-139.68748,0l-97.32507,88.90848l22.82506,-88.90848l-15.52084,0c-18.85822,0 -34.14583,-15.65446 -34.14583,-34.96524l0,0l0,-52.44785l0,0z',
cloud: 'm182.05086,34.31005c-0.64743,0.02048 -1.27309,0.07504 -1.92319,0.13979c-10.40161,1.03605 -19.58215,7.63722 -24.24597,17.4734l-2.47269,7.44367c0.53346,-2.57959 1.35258,-5.08134 2.47269,-7.44367c-8.31731,-8.61741 -19.99149,-12.59487 -31.52664,-10.72866c-11.53516,1.8662 -21.55294,9.3505 -27.02773,20.19925c-15.45544,-9.51897 -34.72095,-8.94245 -49.62526,1.50272c-14.90431,10.44516 -22.84828,28.93916 -20.43393,47.59753l1.57977,7.58346c-0.71388,-2.48442 -1.24701,-5.01186 -1.57977,-7.58346l-0.2404,0.69894c-12.95573,1.4119 -23.58103,11.46413 -26.34088,24.91708c-2.75985,13.45294 2.9789,27.25658 14.21789,34.21291l17.54914,4.26352c-6.1277,0.50439 -12.24542,-0.9808 -17.54914,-4.26352c-8.66903,9.71078 -10.6639,24.08736 -4.94535,35.96027c5.71854,11.87289 17.93128,18.70935 30.53069,17.15887l7.65843,-2.02692c-2.46413,1.0314 -5.02329,1.70264 -7.65843,2.02692c7.15259,13.16728 19.01251,22.77237 32.93468,26.5945c13.92217,3.82214 28.70987,1.56322 41.03957,-6.25546c10.05858,15.86252 27.91113,24.19412 45.81322,21.38742c17.90208,-2.8067 32.66954,-16.26563 37.91438,-34.52742l1.82016,-10.20447c-0.27254,3.46677 -0.86394,6.87508 -1.82016,10.20447c12.31329,8.07489 27.80199,8.52994 40.52443,1.18819c12.72244,-7.34175 20.6609,-21.34155 20.77736,-36.58929l-4.56108,-22.7823l-17.96776,-15.41455c13.89359,8.70317 22.6528,21.96329 22.52884,38.19685c16.5202,0.17313 30.55292,-13.98268 36.84976,-30.22897c6.29684,-16.24631 3.91486,-34.76801 -6.2504,-48.68089c4.21637,-10.35873 3.96622,-22.14172 -0.68683,-32.29084c-4.65308,-10.14912 -13.23602,-17.69244 -23.55914,-20.65356c-2.31018,-13.45141 -11.83276,-24.27162 -24.41768,-27.81765c-12.58492,-3.54603 -25.98557,0.82654 -34.41142,11.25287l-5.11707,8.63186c1.30753,-3.12148 3.01521,-6.03101 5.11707,-8.63186c-5.93959,-8.19432 -15.2556,-12.8181 -24.96718,-12.51096z',
cylinder: 'm299.0007,83.77844c0,18.28676 -66.70958,33.11111 -149.00002,33.11111m149.00002,-33.11111l0,0c0,18.28676 -66.70958,33.11111 -149.00002,33.11111c-82.29041,0 -148.99997,-14.82432 -148.99997,-33.11111m0,0l0,0c0,-18.28674 66.70956,-33.1111 148.99997,-33.1111c82.29044,0 149.00002,14.82436 149.00002,33.1111l0,132.44449c0,18.28674 -66.70958,33.11105 -149.00002,33.11105c-82.29041,0 -148.99997,-14.82431 -148.99997,-33.11105z',
arrow_u_turn: 'm1.00059,299.00055l0,-167.62497l0,0c0,-72.00411 58.37087,-130.37499 130.375,-130.37499l0,0l0,0c34.57759,0 67.73898,13.7359 92.18906,38.18595c24.45006,24.45005 38.18593,57.61144 38.18593,92.18904l0,18.625l37.24997,0l-74.49995,74.50002l-74.50002,-74.50002l37.25,0l0,-18.625c0,-30.8589 -25.0161,-55.87498 -55.87498,-55.87498l0,0l0,0c-30.85892,0 -55.875,25.01608 -55.875,55.87498l0,167.62497z',
arrow_left_up: 'm0.99865,224.5l74.50004,-74.5l0,37.25l111.74991,0l0,-111.75l-37.25,0l74.5,-74.5l74.5,74.5l-37.25,0l0,186.25l-186.24989,0l0,37.25l-74.50005,-74.5z',
maximize: 'm1.00037,150.34581l55.30305,-55.30267l0,27.65093l22.17356,0l0,-44.21833l44.21825,0l0,-22.17357l-27.65095,0l55.30267,-55.30292l55.3035,55.30292l-27.65175,0l0,22.17357l44.21835,0l0,44.21833l22.17357,0l0,-27.65093l55.30345,55.30267l-55.30345,55.3035l0,-27.65175l-22.17357,0l0,44.21834l-44.21835,0l0,22.17355l27.65175,0l-55.3035,55.30348l-55.30267,-55.30348l27.65095,0l0,-22.17355l-44.21825,0l0,-44.21834l-22.17356,0l0,27.65175l-55.30305,-55.3035z',
cross: 'm0.99844,99.71339l98.71494,0l0,-98.71495l101.26279,0l0,98.71495l98.71495,0l0,101.2628l-98.71495,0l0,98.71494l-101.26279,0l0,-98.71494l-98.71494,0z',
plaque: 'm-0.00197,49.94376l0,0c27.5829,0 49.94327,-22.36036 49.94327,-49.94327l199.76709,0l0,0c0,27.5829 22.36037,49.94327 49.94325,49.94327l0,199.7671l0,0c-27.58289,0 -49.94325,22.36034 -49.94325,49.94325l-199.76709,0c0,-27.58292 -22.36037,-49.94325 -49.94327,-49.94325z',
page: 'm249.3298,298.99744l9.9335,-39.73413l39.73413,-9.93355l-49.66763,49.66768l-248.33237,0l0,-298.00001l298.00001,0l0,248.33234'
},
buttons: []
}
};
modeId = 'shapelib';
startClientPos = {};
curLib = library.basic;
/**
*
* @returns {void}
*/
buttons = [{
id: 'tool_shapelib',
icon: svgEditor.curConfig.extIconsPath + 'shapes.png',
type: 'mode_flyout',
// _flyout
position: 6,
events: {
click: function click() {
canv.setMode(modeId);
}
}
}];
return _context.abrupt("return", {
svgicons: svgEditor.curConfig.extIconsPath + 'ext-shapes.xml',
buttons: strings.buttons.map(function (button, i) {
return Object.assign(buttons[i], button);
}),
callback: function callback() {
$('<style>').text("\n #shape_buttons {\n overflow: auto;\n width: 180px;\n max-height: 300px;\n display: table-cell;\n vertical-align: middle;\n }\n #shape_cats {\n min-width: 110px;\n display: table-cell;\n vertical-align: middle;\n height: 300px;\n }\n #shape_cats > div {\n line-height: 1em;\n padding: .5em;\n border:1px solid #B0B0B0;\n background: #E8E8E8;\n margin-bottom: -1px;\n }\n #shape_cats div:hover {\n background: #FFFFCC;\n }\n #shape_cats div.current {\n font-weight: bold;\n }\n ").appendTo('head');
var btnDiv = $('<div id="shape_buttons">');
$('#tools_shapelib > *').wrapAll(btnDiv);
var shower = $('#tools_shapelib_show');
loadLibrary('basic'); // Do mouseup on parent element rather than each button
$('#shape_buttons').mouseup(function (evt) {
var btn = $(evt.target).closest('div.tool_button');
if (!btn.length) {
return;
}
var copy = btn.children().clone();
shower.children(':not(.flyout_arrow_horiz)').remove();
shower.append(copy).attr('data-curopt', '#' + btn[0].id) // This sets the current mode
.mouseup();
canv.setMode(modeId);
curShapeId = btn[0].id.substr((modeId + '_').length);
currentD = curLib.data[curShapeId];
$('.tools_flyout').fadeOut();
});
var shapeCats = $('<div id="shape_cats">');
var catStr = '';
$.each(categories, function (id, label) {
catStr += '<div data-cat=' + id + '>' + label + '</div>';
});
shapeCats.html(catStr).children().bind('mouseup', function () {
var catlink = $(this);
catlink.siblings().removeClass('current');
catlink.addClass('current');
loadLibrary(catlink.attr('data-cat')); // Get stuff
return false;
});
shapeCats.children().eq(0).addClass('current');
$('#tools_shapelib').append(shapeCats);
shower.mouseup(function () {
canv.setMode(currentD ? modeId : 'select');
});
$('#tool_shapelib').remove();
var h = $('#tools_shapelib').height();
$('#tools_shapelib').css({
'margin-top': -(h / 2 - 15),
'margin-left': 3
}); // Now add shape categories from locale
var cats = {};
Object.entries(categories).forEach(function (_ref4) {
var _ref5 = _slicedToArray(_ref4, 2),
o = _ref5[0],
categoryName = _ref5[1];
cats['#shape_cats [data-cat="' + o + '"]'] = categoryName;
});
this.setStrings('content', cats);
},
mouseDown: function mouseDown(opts) {
var mode = canv.getMode();
if (mode !== modeId) {
return undefined;
}
startX = opts.start_x;
var x = startX;
startY = opts.start_y;
var y = startY;
var curStyle = canv.getStyle();
startClientPos.x = opts.event.clientX;
startClientPos.y = opts.event.clientY;
curShape = canv.addSVGElementFromJson({
element: 'path',
curStyles: true,
attr: {
d: currentD,
id: canv.getNextId(),
opacity: curStyle.opacity / 2,
style: 'pointer-events:none'
}
}); // Make sure shape uses absolute values
if (/[a-z]/.test(currentD)) {
currentD = curLib.data[curShapeId] = canv.pathActions.convertPath(curShape);
curShape.setAttribute('d', currentD);
canv.pathActions.fixEnd(curShape);
}
curShape.setAttribute('transform', 'translate(' + x + ',' + y + ') scale(0.005) translate(' + -x + ',' + -y + ')');
canv.recalculateDimensions(curShape);
/* const tlist = */
canv.getTransformList(curShape);
lastBBox = curShape.getBBox();
return {
started: true
};
},
mouseMove: function mouseMove(opts) {
var mode = canv.getMode();
if (mode !== modeId) {
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;
}
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);
curLib = lib;
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;
if (!lib.buttons.length) {
makeButtons(catId, lib);
}
var ty = 0;
loadIcons();
};
if (y < startY) {
ty = lastBBox.height;
} // update the transform list with translate,scale,translate
makeButtons = function _ref7(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
var translateOrigin = svgroot.createSVGTransform(),
scale = svgroot.createSVGTransform(),
translateBack = svgroot.createSVGTransform();
translateOrigin.setTranslate(-(left + tx), -(top + ty));
return iconBtn[0];
});
};
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);
loadIcons = function _ref6() {
$('#shape_buttons').empty().append(curLib.buttons);
};
$ = _ref.$, importLocale = _ref.importLocale;
_context.next = 6;
return importLocale();
case 6:
strings = _context.sent;
svgEditor = this;
canv = svgEditor.canvas;
svgroot = canv.getRootElem();
lastBBox = {}; // This populates the category list
categories = strings.categories;
library = {
basic: {
data: {
heart: 'm150,73c61,-175 300,0 0,225c-300,-225 -61,-400 0,-225z',
frame: 'm0,0l300,0l0,300l-300,0zm35,-265l0,230l230,0l0,-230z',
donut: 'm1,150l0,0c0,-82.29042 66.70958,-149 149,-149l0,0c39.51724,0 77.41599,15.69816 105.35889,43.64108c27.94293,27.94293 43.64111,65.84165 43.64111,105.35892l0,0c0,82.29041 -66.70958,149 -149,149l0,0c-82.29041,0 -149,-66.70959 -149,-149zm74.5,0l0,0c0,41.1452 33.35481,74.5 74.5,74.5c41.14522,0 74.5,-33.3548 74.5,-74.5c0,-41.1452 -33.3548,-74.5 -74.5,-74.5l0,0c-41.14519,0 -74.5,33.35481 -74.5,74.5z',
triangle: 'm1,280.375l149,-260.75l149,260.75z',
right_triangle: 'm1,299l0,-298l298,298z',
diamond: 'm1,150l149,-149l149,149l-149,149l-149,-149z',
pentagon: 'm1.00035,116.97758l148.99963,-108.4053l148.99998,108.4053l-56.91267,175.4042l-184.1741,0l-56.91284,-175.4042z',
hexagon: 'm1,149.99944l63.85715,-127.71428l170.28572,0l63.85713,127.71428l-63.85713,127.71428l-170.28572,0l-63.85715,-127.71428z',
septagon1: 'm0.99917,191.06511l29.51249,-127.7108l119.48833,-56.83673l119.48836,56.83673l29.51303,127.7108l-82.69087,102.41679l-132.62103,0l-82.69031,-102.41679z',
heptagon: 'm1,88.28171l87.28172,-87.28171l123.43653,0l87.28172,87.28171l0,123.43654l-87.28172,87.28172l-123.43653,0l-87.28172,-87.28172l0,-123.43654z',
decagon: 'm1,150.00093l28.45646,-88.40318l74.49956,-54.63682l92.08794,0l74.50002,54.63682l28.45599,88.40318l-28.45599,88.40318l-74.50002,54.63681l-92.08794,0l-74.49956,-54.63681l-28.45646,-88.40318z',
dodecagon: 'm1,110.07421l39.92579,-69.14842l69.14842,-39.92579l79.85159,0l69.14842,39.92579l39.92578,69.14842l0,79.85159l-39.92578,69.14842l-69.14842,39.92578l-79.85159,0l-69.14842,-39.92578l-39.92579,-69.14842l0,-79.85159z',
star_points_5: 'm1,116.58409l113.82668,0l35.17332,-108.13487l35.17334,108.13487l113.82666,0l-92.08755,66.83026l35.17514,108.13487l-92.08759,-66.83208l-92.08757,66.83208l35.17515,-108.13487l-92.08758,-66.83026z',
trapezoid: 'm1,299l55.875,-298l186.25001,0l55.87498,298z',
arrow_up: 'm1.49805,149.64304l148.50121,-148.00241l148.50121,148.00241l-74.25061,0l0,148.71457l-148.5012,0l0,-148.71457z',
vertical_scrool: 'm37.375,261.625l0,-242.9375l0,0c0,-10.32083 8.36669,-18.6875 18.6875,-18.6875l224.25,0c10.32083,0 18.6875,8.36667 18.6875,18.6875c0,10.32081 -8.36667,18.6875 -18.6875,18.6875l-18.6875,0l0,242.9375c0,10.32083 -8.36668,18.6875 -18.6875,18.6875l-224.25,0l0,0c-10.32083,0 -18.6875,-8.36667 -18.6875,-18.6875c0,-10.32083 8.36667,-18.6875 18.6875,-18.6875zm37.375,-261.625l0,0c10.32081,0 18.6875,8.36667 18.6875,18.6875c0,10.32081 -8.36669,18.6875 -18.6875,18.6875c-5.1604,0 -9.34375,-4.18335 -9.34375,-9.34375c0,-5.16041 4.18335,-9.34375 9.34375,-9.34375l18.6875,0m186.875,18.6875l-205.5625,0m-37.375,224.25l0,0c5.1604,0 9.34375,4.18335 9.34375,9.34375c0,5.1604 -4.18335,9.34375 -9.34375,9.34375l18.6875,0m-18.6875,18.6875l0,0c10.32081,0 18.6875,-8.36667 18.6875,-18.6875l0,-18.6875',
smiley: 'm68.49886,214.78838q81.06408,55.67332 161.93891,0m-144.36983,-109.9558c0,-8.60432 6.97517,-15.57949 15.57948,-15.57949c8.60431,0 15.57948,6.97517 15.57948,15.57949c0,8.60431 -6.97517,15.57947 -15.57948,15.57947c-8.60431,0 -15.57948,-6.97516 -15.57948,-15.57947m95.83109,0c0,-8.60432 6.97517,-15.57949 15.57948,-15.57949c8.60431,0 15.57947,6.97517 15.57947,15.57949c0,8.60431 -6.97516,15.57947 -15.57947,15.57947c-8.60429,0 -15.57948,-6.97516 -15.57948,-15.57947m-181.89903,44.73038l0,0c0,-82.60133 66.96162,-149.56296 149.56296,-149.56296c82.60135,0 149.56296,66.96162 149.56296,149.56296c0,82.60135 -66.96161,149.56296 -149.56296,149.56296c-82.60133,0 -149.56296,-66.96161 -149.56296,-149.56296zm0,0l0,0c0,-82.60133 66.96162,-149.56296 149.56296,-149.56296c82.60135,0 149.56296,66.96162 149.56296,149.56296c0,82.60135 -66.96161,149.56296 -149.56296,149.56296c-82.60133,0 -149.56296,-66.96161 -149.56296,-149.56296z',
left_braket: 'm174.24565,298.5c-13.39009,0 -24.24489,-1.80908 -24.24489,-4.04065l0,-140.4187c0,-2.23158 -10.85481,-4.04065 -24.2449,-4.04065l0,0c13.39009,0 24.2449,-1.80907 24.2449,-4.04065l0,-140.4187l0,0c0,-2.23159 10.8548,-4.04066 24.24489,-4.04066',
uml_actor: 'm40.5,100l219,0m-108.99991,94.00006l107,105m-107.00009,-106.00006l-100,106m99.5,-231l0,125m33.24219,-158.75781c0,18.35916 -14.88303,33.24219 -33.24219,33.24219c-18.35916,0 -33.2422,-14.88303 -33.2422,-33.24219c0.00002,-18.35915 14.88304,-33.24219 33.2422,-33.24219c18.35916,0 33.24219,14.88304 33.24219,33.24219z',
dialog_balloon_1: 'm0.99786,35.96579l0,0c0,-19.31077 15.28761,-34.96524 34.14583,-34.96524l15.52084,0l0,0l74.50001,0l139.68748,0c9.05606,0 17.74118,3.68382 24.14478,10.24108c6.40356,6.55726 10.00107,15.45081 10.00107,24.72416l0,87.41311l0,0l0,52.44785l0,0c0,19.31078 -15.2876,34.96524 -34.14584,34.96524l-139.68748,0l-97.32507,88.90848l22.82506,-88.90848l-15.52084,0c-18.85822,0 -34.14583,-15.65446 -34.14583,-34.96524l0,0l0,-52.44785l0,0z',
cloud: 'm182.05086,34.31005c-0.64743,0.02048 -1.27309,0.07504 -1.92319,0.13979c-10.40161,1.03605 -19.58215,7.63722 -24.24597,17.4734l-2.47269,7.44367c0.53346,-2.57959 1.35258,-5.08134 2.47269,-7.44367c-8.31731,-8.61741 -19.99149,-12.59487 -31.52664,-10.72866c-11.53516,1.8662 -21.55294,9.3505 -27.02773,20.19925c-15.45544,-9.51897 -34.72095,-8.94245 -49.62526,1.50272c-14.90431,10.44516 -22.84828,28.93916 -20.43393,47.59753l1.57977,7.58346c-0.71388,-2.48442 -1.24701,-5.01186 -1.57977,-7.58346l-0.2404,0.69894c-12.95573,1.4119 -23.58103,11.46413 -26.34088,24.91708c-2.75985,13.45294 2.9789,27.25658 14.21789,34.21291l17.54914,4.26352c-6.1277,0.50439 -12.24542,-0.9808 -17.54914,-4.26352c-8.66903,9.71078 -10.6639,24.08736 -4.94535,35.96027c5.71854,11.87289 17.93128,18.70935 30.53069,17.15887l7.65843,-2.02692c-2.46413,1.0314 -5.02329,1.70264 -7.65843,2.02692c7.15259,13.16728 19.01251,22.77237 32.93468,26.5945c13.92217,3.82214 28.70987,1.56322 41.03957,-6.25546c10.05858,15.86252 27.91113,24.19412 45.81322,21.38742c17.90208,-2.8067 32.66954,-16.26563 37.91438,-34.52742l1.82016,-10.20447c-0.27254,3.46677 -0.86394,6.87508 -1.82016,10.20447c12.31329,8.07489 27.80199,8.52994 40.52443,1.18819c12.72244,-7.34175 20.6609,-21.34155 20.77736,-36.58929l-4.56108,-22.7823l-17.96776,-15.41455c13.89359,8.70317 22.6528,21.96329 22.52884,38.19685c16.5202,0.17313 30.55292,-13.98268 36.84976,-30.22897c6.29684,-16.24631 3.91486,-34.76801 -6.2504,-48.68089c4.21637,-10.35873 3.96622,-22.14172 -0.68683,-32.29084c-4.65308,-10.14912 -13.23602,-17.69244 -23.55914,-20.65356c-2.31018,-13.45141 -11.83276,-24.27162 -24.41768,-27.81765c-12.58492,-3.54603 -25.98557,0.82654 -34.41142,11.25287l-5.11707,8.63186c1.30753,-3.12148 3.01521,-6.03101 5.11707,-8.63186c-5.93959,-8.19432 -15.2556,-12.8181 -24.96718,-12.51096z',
cylinder: 'm299.0007,83.77844c0,18.28676 -66.70958,33.11111 -149.00002,33.11111m149.00002,-33.11111l0,0c0,18.28676 -66.70958,33.11111 -149.00002,33.11111c-82.29041,0 -148.99997,-14.82432 -148.99997,-33.11111m0,0l0,0c0,-18.28674 66.70956,-33.1111 148.99997,-33.1111c82.29044,0 149.00002,14.82436 149.00002,33.1111l0,132.44449c0,18.28674 -66.70958,33.11105 -149.00002,33.11105c-82.29041,0 -148.99997,-14.82431 -148.99997,-33.11105z',
arrow_u_turn: 'm1.00059,299.00055l0,-167.62497l0,0c0,-72.00411 58.37087,-130.37499 130.375,-130.37499l0,0l0,0c34.57759,0 67.73898,13.7359 92.18906,38.18595c24.45006,24.45005 38.18593,57.61144 38.18593,92.18904l0,18.625l37.24997,0l-74.49995,74.50002l-74.50002,-74.50002l37.25,0l0,-18.625c0,-30.8589 -25.0161,-55.87498 -55.87498,-55.87498l0,0l0,0c-30.85892,0 -55.875,25.01608 -55.875,55.87498l0,167.62497z',
arrow_left_up: 'm0.99865,224.5l74.50004,-74.5l0,37.25l111.74991,0l0,-111.75l-37.25,0l74.5,-74.5l74.5,74.5l-37.25,0l0,186.25l-186.24989,0l0,37.25l-74.50005,-74.5z',
maximize: 'm1.00037,150.34581l55.30305,-55.30267l0,27.65093l22.17356,0l0,-44.21833l44.21825,0l0,-22.17357l-27.65095,0l55.30267,-55.30292l55.3035,55.30292l-27.65175,0l0,22.17357l44.21835,0l0,44.21833l22.17357,0l0,-27.65093l55.30345,55.30267l-55.30345,55.3035l0,-27.65175l-22.17357,0l0,44.21834l-44.21835,0l0,22.17355l27.65175,0l-55.3035,55.30348l-55.30267,-55.30348l27.65095,0l0,-22.17355l-44.21825,0l0,-44.21834l-22.17356,0l0,27.65175l-55.30305,-55.3035z',
cross: 'm0.99844,99.71339l98.71494,0l0,-98.71495l101.26279,0l0,98.71495l98.71495,0l0,101.2628l-98.71495,0l0,98.71494l-101.26279,0l0,-98.71494l-98.71494,0z',
plaque: 'm-0.00197,49.94376l0,0c27.5829,0 49.94327,-22.36036 49.94327,-49.94327l199.76709,0l0,0c0,27.5829 22.36037,49.94327 49.94325,49.94327l0,199.7671l0,0c-27.58289,0 -49.94325,22.36034 -49.94325,49.94325l-199.76709,0c0,-27.58292 -22.36037,-49.94325 -49.94327,-49.94325z',
page: 'm249.3298,298.99744l9.9335,-39.73413l39.73413,-9.93355l-49.66763,49.66768l-248.33237,0l0,-298.00001l298.00001,0l0,248.33234'
},
buttons: []
}
};
modeId = 'shapelib';
startClientPos = {};
curLib = library.basic;
/**
*
* @returns {void}
*/
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;
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
var keepObject = opts.event.clientX !== startClientPos.x && opts.event.clientY !== startClientPos.y;
return {
keep: keepObject,
element: curShape,
started: false
};
}
});
$('#shape_buttons').mouseup(function (evt) {
var btn = $(evt.target).closest('div.tool_button');
case 18:
case "end":
return _context.stop();
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();
}
}
}
}, null, this);
}
}, _callee, this);
}));
function init(_x) {
return _init.apply(this, arguments);
}
return init;
}()
};
return extShapes;

462
dist/extensions/ext-star.js vendored
View File

@@ -1,6 +1,42 @@
var svgEditorExtension_star = (function () {
'use strict';
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
/**
* ext-star.js
*
@@ -10,170 +46,160 @@ var svgEditorExtension_star = (function () {
*/
var extStar = {
name: 'star',
init: function init(S) {
var svgEditor, svgCanvas, $, importLocale, selElems, started, newFO, strings, showPanel, setAttr, buttons, contextTools;
return regeneratorRuntime.async(function init$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
setAttr = function _ref2(attr, val) {
svgCanvas.changeSelectedAttribute(attr, val);
svgCanvas.call('changed', selElems);
};
init: function () {
var _init = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(S) {
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 _ref2(attr, val) {
svgCanvas.changeSelectedAttribute(attr, val);
svgCanvas.call('changed', selElems);
};
showPanel = function _ref(on) {
var fcRules = $('#fc_rules');
showPanel = function _ref(on) {
var 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);
};
svgEditor = this;
svgCanvas = svgEditor.canvas;
$ = S.$, importLocale = S.importLocale; // {svgcontent},
_context.next = 7;
return regeneratorRuntime.awrap(importLocale());
case 7:
strings = _context.sent;
/*
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
};
if (!fcRules.length) {
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
}
return undefined;
},
mouseMove: function mouseMove(opts) {
if (!started) {
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
$('#star_panel').toggle(on);
};
svgEditor = this;
svgCanvas = svgEditor.canvas;
$ = S.$, importLocale = S.importLocale; // {svgcontent},
_context.next = 7;
return importLocale();
case 7:
strings = _context.sent;
/*
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 = '';
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;
for (var s = 0; point >= s; s++) {
var angle = 2.0 * Math.PI * (s / point);
if (orient === 'point') {
angle -= Math.PI / 2;
@@ -181,72 +207,92 @@ var svgEditorExtension_star = (function () {
angle = angle + Math.PI / point - Math.PI / 2;
}
angle += radialshift;
x = inradius * Math.cos(angle) + cx;
y = inradius * Math.sin(angle) + cy;
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
};
}
newFO.setAttribute('points', polyPoints);
newFO.setAttribute('fill', fill);
newFO.setAttribute('stroke', strokecolor);
newFO.setAttribute('stroke-width', strokeWidth);
/* const shape = */
return undefined;
},
mouseUp: function mouseUp() {
if (svgCanvas.getMode() === 'star') {
var attrs = $(newFO).attr(['r']); // svgCanvas.addToSelection([newFO], true);
newFO.getAttribute('shape');
return {
started: true
};
}
return {
keep: attrs.r !== '0',
element: newFO
};
}
return undefined;
},
mouseUp: function mouseUp() {
if (svgCanvas.getMode() === 'star') {
var attrs = $(newFO).attr(['r']); // svgCanvas.addToSelection([newFO], true);
return undefined;
},
selectedChanged: function selectedChanged(opts) {
// Use this to update the current selected elements
selElems = opts.elems;
var i = selElems.length;
return {
keep: attrs.r !== '0',
element: newFO
};
}
while (i--) {
var elem = selElems[i];
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);
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);
}
} else {
showPanel(false);
}
},
elementChanged: function elementChanged(opts) {// const elem = opts.elems[0];
}
},
elementChanged: function elementChanged(opts) {// const elem = opts.elems[0];
}
});
});
case 11:
case "end":
return _context.stop();
case 11:
case "end":
return _context.stop();
}
}
}
}, null, this);
}
}, _callee, this);
}));
function init(_x) {
return _init.apply(this, arguments);
}
return init;
}()
};
return extStar;

334
dist/extensions/ext-storage.js vendored
View File

@@ -1,6 +1,42 @@
var svgEditorExtension_storage = (function () {
'use strict';
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}
@@ -217,174 +253,184 @@ var svgEditorExtension_storage = (function () {
var loaded = false;
return {
name: 'storage',
langReady: function langReady(_ref4) {
var importLocale, _$$deparam$querystrin, storagePrompt, confirmSetStorage, message, storagePrefsAndContent, storagePrefsOnly, storagePrefs, storageNoPrefsOrContent, storageNoPrefs, rememberLabel, rememberTooltip, options, oldContainerWidth, oldContainerMarginLeft, oldContentHeight, oldContainerHeight, _ref5, pref, checked;
langReady: function () {
var _langReady = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(_ref4) {
var importLocale, _$$deparam$querystrin, storagePrompt, confirmSetStorage, message, storagePrefsAndContent, storagePrefsOnly, storagePrefs, storageNoPrefsOrContent, storageNoPrefs, rememberLabel, rememberTooltip, options, oldContainerWidth, oldContainerMarginLeft, oldContentHeight, oldContainerHeight, _ref5, pref, checked;
return regeneratorRuntime.async(function langReady$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
importLocale = _ref4.importLocale;
_$$deparam$querystrin = $.deparam.querystring(true), storagePrompt = _$$deparam$querystrin.storagePrompt;
_context.next = 4;
return regeneratorRuntime.awrap(importLocale());
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
importLocale = _ref4.importLocale;
_$$deparam$querystrin = $.deparam.querystring(true), storagePrompt = _$$deparam$querystrin.storagePrompt;
_context.next = 4;
return importLocale();
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
case 4:
confirmSetStorage = _context.sent;
message = confirmSetStorage.message, storagePrefsAndContent = confirmSetStorage.storagePrefsAndContent, storagePrefsOnly = confirmSetStorage.storagePrefsOnly, storagePrefs = confirmSetStorage.storagePrefs, storageNoPrefsOrContent = confirmSetStorage.storageNoPrefsOrContent, storageNoPrefs = confirmSetStorage.storageNoPrefs, rememberLabel = confirmSetStorage.rememberLabel, rememberTooltip = confirmSetStorage.rememberTooltip; // No need to run this one-time dialog again just because the user
// changes the language
if (!loaded) {
_context.next = 8;
break;
}
if (!loaded) {
_context.next = 8;
break;
}
return _context.abrupt("return");
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).
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;
}
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 = [];
options = [];
if (storage) {
options.unshift({
value: 'prefsAndContent',
text: storagePrefsAndContent
}, {
value: 'prefsOnly',
text: storagePrefsOnly
}, {
value: 'noPrefsOrContent',
text: storageNoPrefsOrContent
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
});
} else {
options.unshift({
value: 'prefsOnly',
text: storagePrefs
}, {
value: 'noPrefsOrContent',
text: storageNoPrefs
});
} // Hack to temporarily provide a wide and high enough dialog
case 20:
_ref5 = _context.sent;
pref = _ref5.response;
checked = _ref5.checked;
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
if (!(pref && pref !== 'noPrefsOrContent')) {
_context.next = 30;
break;
}
svgEditor.storagePromptState = 'waiting';
_context.next = 20;
return regeneratorRuntime.awrap($.select(message, options, null, null, {
label: rememberLabel,
checked: true,
tooltip: rememberTooltip
}));
// 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
// eslint-disable-next-line require-atomic-updates
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
case 20:
_ref5 = _context.sent;
pref = _ref5.response;
checked = _ref5.checked;
if (!(storagePrompt === true && checked)) {
_context.next = 28;
break;
}
if (!(pref && pref !== 'noPrefsOrContent')) {
_context.next = 30;
break;
}
replaceStoragePrompt();
return _context.abrupt("return");
// 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
// eslint-disable-next-line require-atomic-updates
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)) {
case 28:
_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 30:
// The user does not wish storage (or cancelled, which we treat equivalently)
removeStoragePrefCookie();
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
if (pref && // If the user explicitly expresses wish for no storage
emptyStorageOnDecline) {
emptyStorage();
}
setupBeforeUnloadListener();
svgEditor.storagePromptState = 'closed';
updateCanvas(true);
_context.next = 45;
break;
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
case 44:
if (!noStorageOnLoad || forceStorage) {
setupBeforeUnloadListener();
}
svgEditor.storagePromptState = 'closed';
updateCanvas(true);
_context.next = 45;
break;
case 45:
case "end":
return _context.stop();
case 44:
if (!noStorageOnLoad || forceStorage) {
setupBeforeUnloadListener();
}
case 45:
case "end":
return _context.stop();
}
}
}
});
}
}, _callee);
}));
function langReady(_x) {
return _langReady.apply(this, arguments);
}
return langReady;
}()
};
}
};

266
dist/extensions/ext-webappfind.js vendored
View File

@@ -1,6 +1,42 @@
var svgEditorExtension_webappfind = (function () {
'use strict';
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
/**
* Depends on Firefox add-on and executables from {@link https://github.com/brettz9/webappfind}
* @author Brett Zamir
@@ -9,123 +45,133 @@ var svgEditorExtension_webappfind = (function () {
*/
var extWebappfind = {
name: 'webappfind',
init: function init(_ref) {
var importLocale, $, strings, svgEditor, saveMessage, readMessage, excludedMessages, pathID, buttons;
return regeneratorRuntime.async(function init$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
importLocale = _ref.importLocale, $ = _ref.$;
_context.next = 3;
return regeneratorRuntime.awrap(importLocale());
init: function () {
var _init = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(_ref) {
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 {module:svgcanvas.SvgCanvas#event:message} data
* @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;
case 3:
strings = _context.sent;
svgEditor = this;
saveMessage = 'save', readMessage = 'read', excludedMessages = [readMessage, saveMessage];
this.canvas.bind('message',
/**
* @param {external:Window} win
* @param {module:svgcanvas.SvgCanvas#event:message} data
* @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;
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()
// 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;
}
}, window.location.origin === 'null' // Avoid "null" string error for `file:` protocol (even
// though file protocol not currently supported by add-on)
? '*' : window.location.origin);
} catch (err) {
return;
}
}
}];
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();
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();
}
}
}
}, null, this);
}
}, _callee, this);
}));
function init(_x) {
return _init.apply(this, arguments);
}
return init;
}()
};
return extWebappfind;

441
dist/extensions/imagelib/openclipart.js vendored
View File

@@ -15,6 +15,42 @@
return _typeof(obj);
}
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
@@ -3220,227 +3256,256 @@
* @returns {Promise<void>}
*/
function processResults(url) {
var queryLink, r, json, payload, _json$info, numResults, pages, currentPage, semiColonSep;
function processResults(_x) {
return _processResults.apply(this, arguments);
}
return regeneratorRuntime.async(function processResults$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
queryLink = function _ref2(query) {
return ['a', {
href: jsVoid,
dataset: {
value: query
},
$on: {
click: function click(e) {
e.preventDefault();
var value = this.dataset.value;
$$1('#query')[0].$set(value);
$$1('#openclipart')[0].$submit();
function _processResults() {
_processResults = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee3(url) {
var queryLink, r, json, payload, _json$info, numResults, pages, currentPage, semiColonSep;
return regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
queryLink = function _ref4(query) {
return ['a', {
href: jsVoid,
dataset: {
value: query
},
$on: {
click: function click(e) {
e.preventDefault();
var value = this.dataset.value;
$$1('#query')[0].$set(value);
$$1('#openclipart')[0].$submit();
}
}
}
}, [query]];
};
}, [query]];
};
_context2.next = 3;
return regeneratorRuntime.awrap(fetch(url));
_context3.next = 3;
return fetch(url);
case 3:
r = _context2.sent;
_context2.next = 6;
return regeneratorRuntime.awrap(r.json());
case 3:
r = _context3.sent;
_context3.next = 6;
return r.json();
case 6:
json = _context2.sent;
case 6:
json = _context3.sent;
if (!(!json || json.msg !== 'success')) {
_context2.next = 10;
break;
}
if (!(!json || json.msg !== 'success')) {
_context3.next = 10;
break;
}
// Todo: This could use a generic alert library instead
alert('There was a problem downloading the results'); // eslint-disable-line no-alert
// Todo: This could use a generic alert library instead
alert('There was a problem downloading the results'); // eslint-disable-line no-alert
return _context2.abrupt("return");
return _context3.abrupt("return");
case 10:
payload = json.payload, _json$info = json.info, numResults = _json$info.results, pages = _json$info.pages, currentPage = _json$info.current_page; // $('#page')[0].value = currentPage;
// $('#page')[0].max = pages;
// Unused properties:
// - `svg_filesize` always 0?
// - `dimensions: {
// png_thumb: {width, height},
// png_full_lossy: {width, height}
// }` object of relevance?
// - No need for `tags` with `tags_array`
// - `svg`'s: `png_thumb`, `png_full_lossy`, `png_2400px`
case 10:
payload = json.payload, _json$info = json.info, numResults = _json$info.results, pages = _json$info.pages, currentPage = _json$info.current_page; // $('#page')[0].value = currentPage;
// $('#page')[0].max = pages;
// Unused properties:
// - `svg_filesize` always 0?
// - `dimensions: {
// png_thumb: {width, height},
// png_full_lossy: {width, height}
// }` object of relevance?
// - No need for `tags` with `tags_array`
// - `svg`'s: `png_thumb`, `png_full_lossy`, `png_2400px`
semiColonSep = '; ' + nbsp;
$$1('#results').jml('div', [['span', ['Number of results: ', numResults]], semiColonSep, ['span', ['page ', currentPage, ' out of ', pages]]].concat(_toConsumableArray(payload.map(function (_ref) {
var title = _ref.title,
description = _ref.description,
id = _ref.id,
uploader = _ref.uploader,
created = _ref.created,
svgURL = _ref.svg.url,
detailLink = _ref.detail_link,
tagsArray = _ref.tags_array,
downloadedBy = _ref.downloaded_by,
totalFavorites = _ref.total_favorites;
var imgHW = '100px';
var colonSep = ': ' + nbsp;
return ['div', [['button', {
style: 'margin-right: 8px; border: 2px solid black;',
dataset: {
id: id,
value: svgURL
},
$on: {
click: function click(e) {
var svgurl, post, result, svg;
return regeneratorRuntime.async(function click$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
e.preventDefault();
svgurl = this.dataset.value; // console.log('this', id, svgurl);
semiColonSep = '; ' + nbsp;
$$1('#results').jml('div', [['span', ['Number of results: ', numResults]], semiColonSep, ['span', ['page ', currentPage, ' out of ', pages]]].concat(_toConsumableArray(payload.map(function (_ref3) {
var title = _ref3.title,
description = _ref3.description,
id = _ref3.id,
uploader = _ref3.uploader,
created = _ref3.created,
svgURL = _ref3.svg.url,
detailLink = _ref3.detail_link,
tagsArray = _ref3.tags_array,
downloadedBy = _ref3.downloaded_by,
totalFavorites = _ref3.total_favorites;
var imgHW = '100px';
var colonSep = ': ' + nbsp;
return ['div', [['button', {
style: 'margin-right: 8px; border: 2px solid black;',
dataset: {
id: id,
value: svgURL
},
$on: {
click: function () {
var _click = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee2(e) {
var svgurl, post, result, svg;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
e.preventDefault();
svgurl = this.dataset.value; // console.log('this', id, svgurl);
post = function post(message) {
// Todo: Make origin customizable as set by opening window
// Todo: If dropping IE9, avoid stringifying
window.parent.postMessage(JSON.stringify(_extends({
namespace: 'imagelib'
}, message)), '*');
}; // Send metadata (also indicates file is about to be sent)
post = function post(message) {
// Todo: Make origin customizable as set by opening window
// Todo: If dropping IE9, avoid stringifying
window.parent.postMessage(JSON.stringify(_extends({
namespace: 'imagelib'
}, message)), '*');
}; // Send metadata (also indicates file is about to be sent)
post({
name: title,
id: svgurl
});
_context.next = 6;
return regeneratorRuntime.awrap(fetch(svgurl));
post({
name: title,
id: svgurl
});
_context2.next = 6;
return fetch(svgurl);
case 6:
result = _context.sent;
_context.next = 9;
return regeneratorRuntime.awrap(result.text());
case 6:
result = _context2.sent;
_context2.next = 9;
return result.text();
case 9:
svg = _context.sent;
// console.log('url and svg', svgurl, svg);
post({
href: svgurl,
data: svg
});
case 9:
svg = _context2.sent;
// console.log('url and svg', svgurl, svg);
post({
href: svgurl,
data: svg
});
case 11:
case "end":
return _context.stop();
}
case 11:
case "end":
return _context2.stop();
}
}
}, _callee2, this);
}));
function click(_x2) {
return _click.apply(this, arguments);
}
}, null, this);
return click;
}()
}
}
}, [// If we wanted interactive versions despite security risk:
// ['object', {data: svgURL, type: 'image/svg+xml'}]
['img', {
src: svgURL,
style: "width: ".concat(imgHW, "; height: ").concat(imgHW, ";")
}]]], ['b', [title]], ' ', ['i', [description]], ' ', ['span', ['(ID: ', ['a', {
}, [// If we wanted interactive versions despite security risk:
// ['object', {data: svgURL, type: 'image/svg+xml'}]
['img', {
src: svgURL,
style: "width: ".concat(imgHW, "; height: ").concat(imgHW, ";")
}]]], ['b', [title]], ' ', ['i', [description]], ' ', ['span', ['(ID: ', ['a', {
href: jsVoid,
dataset: {
value: id
},
$on: {
click: function click(e) {
e.preventDefault();
var value = this.dataset.value;
$$1('#byids')[0].$set(value);
$$1('#openclipart')[0].$submit();
}
}
}, [id]], ')']], ' ', ['i', [['a', {
href: detailLink,
target: '_blank'
}, ['Details']]]], ['br'], ['span', [['u', ['Uploaded by']], colonSep, queryLink(uploader), semiColonSep]], ['span', [['u', ['Download count']], colonSep, downloadedBy, semiColonSep]], ['span', [['u', ['Times used as favorite']], colonSep, totalFavorites, semiColonSep]], ['span', [['u', ['Created date']], colonSep, created]], ['br'], ['u', ['Tags']], colonSep].concat(_toConsumableArray(tagsArray.map(function (tag) {
return ['span', [' ', queryLink(tag)]];
})))];
})), [['br'], ['br'], currentPage === 1 || pages <= 2 ? '' : ['span', [['a', {
href: jsVoid,
dataset: {
value: id
},
$on: {
click: function click(e) {
e.preventDefault();
var value = this.dataset.value;
$$1('#byids')[0].$set(value);
$$1('#page')[0].value = 1;
$$1('#openclipart')[0].$submit();
}
}
}, [id]], ')']], ' ', ['i', [['a', {
href: detailLink,
target: '_blank'
}, ['Details']]]], ['br'], ['span', [['u', ['Uploaded by']], colonSep, queryLink(uploader), semiColonSep]], ['span', [['u', ['Download count']], colonSep, downloadedBy, semiColonSep]], ['span', [['u', ['Times used as favorite']], colonSep, totalFavorites, semiColonSep]], ['span', [['u', ['Created date']], colonSep, created]], ['br'], ['u', ['Tags']], colonSep].concat(_toConsumableArray(tagsArray.map(function (tag) {
return ['span', [' ', queryLink(tag)]];
})))];
})), [['br'], ['br'], currentPage === 1 || pages <= 2 ? '' : ['span', [['a', {
href: jsVoid,
$on: {
click: function click(e) {
e.preventDefault();
$$1('#page')[0].value = 1;
$$1('#openclipart')[0].$submit();
}, ['First']], ' ']], currentPage === 1 ? '' : ['span', [['a', {
href: jsVoid,
$on: {
click: function click(e) {
e.preventDefault();
$$1('#page')[0].value = currentPage - 1;
$$1('#openclipart')[0].$submit();
}
}
}
}, ['First']], ' ']], currentPage === 1 ? '' : ['span', [['a', {
href: jsVoid,
$on: {
click: function click(e) {
e.preventDefault();
$$1('#page')[0].value = currentPage - 1;
$$1('#openclipart')[0].$submit();
}, ['Prev']], ' ']], currentPage === pages ? '' : ['span', [['a', {
href: jsVoid,
$on: {
click: function click(e) {
e.preventDefault();
$$1('#page')[0].value = currentPage + 1;
$$1('#openclipart')[0].$submit();
}
}
}
}, ['Prev']], ' ']], currentPage === pages ? '' : ['span', [['a', {
href: jsVoid,
$on: {
click: function click(e) {
e.preventDefault();
$$1('#page')[0].value = currentPage + 1;
$$1('#openclipart')[0].$submit();
}, ['Next']], ' ']], currentPage === pages || pages <= 2 ? '' : ['span', [['a', {
href: jsVoid,
$on: {
click: function click(e) {
e.preventDefault();
$$1('#page')[0].value = pages;
$$1('#openclipart')[0].$submit();
}
}
}
}, ['Next']], ' ']], currentPage === pages || pages <= 2 ? '' : ['span', [['a', {
href: jsVoid,
$on: {
click: function click(e) {
e.preventDefault();
$$1('#page')[0].value = pages;
$$1('#openclipart')[0].$submit();
}
}
}, ['Last']], ' ']]]));
}, ['Last']], ' ']]]));
case 13:
case "end":
return _context2.stop();
case 13:
case "end":
return _context3.stop();
}
}
}
});
}, _callee3);
}));
return _processResults.apply(this, arguments);
}
jml('div', [['style', [".control {\n padding-top: 10px;\n }"]], ['form', {
id: 'openclipart',
$custom: {
$submit: function $submit() {
var url;
return regeneratorRuntime.async(function $submit$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
url = new URL(baseAPIURL);
['query', 'sort', 'amount', 'page', 'byids'].forEach(function (prop) {
var value = $$1('#' + prop)[0].value;
$submit: function () {
var _$submit = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee() {
var url;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
url = new URL(baseAPIURL);
['query', 'sort', 'amount', 'page', 'byids'].forEach(function (prop) {
var value = $$1('#' + prop)[0].value;
if (value) {
url.searchParams.set(prop, value);
}
});
_context3.next = 4;
return regeneratorRuntime.awrap(processResults(url));
if (value) {
url.searchParams.set(prop, value);
}
});
_context.next = 4;
return processResults(url);
case 4:
case "end":
return _context3.stop();
case 4:
case "end":
return _context.stop();
}
}
}
});
}
}, _callee);
}));
function $submit() {
return _$submit.apply(this, arguments);
}
return $submit;
}()
},
$on: {
submit: function submit(e) {
@@ -3488,11 +3553,11 @@
}, [['label', ['Sort by: ', ['select', {
id: 'sort'
}, [// Todo: i18nize first values
['Date', 'date'], ['Downloads', 'downloads'], ['Favorited', 'favorites']].map(function (_ref3) {
var _ref4 = _slicedToArray(_ref3, 2),
text = _ref4[0],
_ref4$ = _ref4[1],
value = _ref4$ === void 0 ? text : _ref4$;
['Date', 'date'], ['Downloads', 'downloads'], ['Favorited', 'favorites']].map(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
text = _ref2[0],
_ref2$ = _ref2[1],
value = _ref2$ === void 0 ? text : _ref2$;
return ['option', {
value: value