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

Merge pull request #2 from SVG-Edit/master

Browse Source 
update from origin
This commit is contained in:
Igin
2018-09-17 04:58:51 -05:00
committed by GitHub
parent a262a6c50a cba5909472
commit f1d0b41774
42 changed files with 1422 additions and 1179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc
View File

@@ -17,6 +17,7 @@
"no-var": 2, "no-var": 2,
"prefer-const": 2, "prefer-const": 2,
"no-extra-semi": 2, "no-extra-semi": 2,
"quote-props": [2, "as-needed"] "quote-props": [2, "as-needed"],
"object-curly-spacing": ["error", "never"]
} }
} }

40
.github/ISSUE_TEMPLATE/bug_report.md vendored Normal file
View File

@@ -0,0 +1,40 @@
---
name: Bug report
about: Create a report in case we may be able to help
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**SVG-Edit environment (IMPORTANT)**
- File for SVG-Edit: [e.g., `svg-editor.html`, `svg-editor-es.html`, `embedapi.html`]
- Version: [e.g. 3.0.0]
- Protocol: [e.g., http, https, file]
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Additional context**
Add any other context about the problem here.

20
CHANGES.md
View File

@@ -1,3 +1,23 @@
# ?
- Known regression for 3.\*: Image libraries [broken](https://github.com/SVG-Edit/svgedit/issues/274)
- Breaking change (minor): Change export to check `exportWindowName`
for filename and change default from `download` to `svg.pdf` to
distinguish from other downloads
- Fix: Given lack of support now for dataURI export in Chrome, provide
PDF as export (#273 @cuixiping); fixes #124 and #254
- Fix (image import): Put src after onload to avoid missing event;
check other width/height properties in case offset is 0; fixes #278
- Fix (image export): Export in Chrome; fixes #282
- Fix (Context menus): Avoid showing double shortcuts (#285); add some
missing ones
- npm: Update devDeps
- npm: Point to official sinon-test package now that ES6 Modules
support landed
- Build: Switch to `terser` plugin with `uglify` plugin not
supporting ES6+-capable minifier
- Linting (ESLint): Consistent spacing; new "standard"
# 3.0.0-rc.2 # 3.0.0-rc.2
- Fix: Avoid extension `includeWith` button conflicts/redundancies; - Fix: Avoid extension `includeWith` button conflicts/redundancies;

5
dist/canvg.js vendored
View File

@@ -4146,6 +4146,7 @@ var canvg = (function (exports) {
}; };
svg.loadXmlDoc = function (ctx, dom) { svg.loadXmlDoc = function (ctx, dom) {
var res = void 0;
svg.init(ctx); svg.init(ctx);
var mapXY = function mapXY(p) { var mapXY = function mapXY(p) {
@@ -4293,7 +4294,7 @@ var canvg = (function (exports) {
// render if needed // render if needed
if (needUpdate) { if (needUpdate) {
draw(); draw(res);
svg.Mouse.runEvents(); // run and clear our events svg.Mouse.runEvents(); // run and clear our events
} }
}, 1000 / svg.FRAMERATE); }, 1000 / svg.FRAMERATE);
@@ -4301,7 +4302,9 @@ var canvg = (function (exports) {
if (svg.ImagesLoaded()) { if (svg.ImagesLoaded()) {
waitingForImages = false; waitingForImages = false;
draw(resolve); draw(resolve);
return;
} }
res = resolve;
}); });
}; };

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

@@ -640,7 +640,9 @@ var svgEditorExtension_markers = (function () {
}, },
buttons: buildButtonList(), buttons: buildButtonList(),
context_tools: contextTools context_tools: strings.contextTools.map(function (contextTool, i) {
return Object.assign(contextTools[i], contextTool);
})
}); });
case 28: case 28:

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

@@ -4123,6 +4123,7 @@ var svgEditorExtension_server_moinsave = (function () {
}; };
svg.loadXmlDoc = function (ctx, dom) { svg.loadXmlDoc = function (ctx, dom) {
var res = void 0;
svg.init(ctx); svg.init(ctx);
var mapXY = function mapXY(p) { var mapXY = function mapXY(p) {
@@ -4270,7 +4271,7 @@ var svgEditorExtension_server_moinsave = (function () {
// render if needed // render if needed
if (needUpdate) { if (needUpdate) {
draw(); draw(res);
svg.Mouse.runEvents(); // run and clear our events svg.Mouse.runEvents(); // run and clear our events
} }
}, 1000 / svg.FRAMERATE); }, 1000 / svg.FRAMERATE);
@@ -4278,7 +4279,9 @@ var svgEditorExtension_server_moinsave = (function () {
if (svg.ImagesLoaded()) { if (svg.ImagesLoaded()) {
waitingForImages = false; waitingForImages = false;
draw(resolve); draw(resolve);
return;
} }
res = resolve;
}); });
}; };

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

@@ -4123,6 +4123,7 @@ var svgEditorExtension_server_opensave = (function () {
}; };
svg.loadXmlDoc = function (ctx, dom) { svg.loadXmlDoc = function (ctx, dom) {
var res = void 0;
svg.init(ctx); svg.init(ctx);
var mapXY = function mapXY(p) { var mapXY = function mapXY(p) {
@@ -4270,7 +4271,7 @@ var svgEditorExtension_server_opensave = (function () {
// render if needed // render if needed
if (needUpdate) { if (needUpdate) {
draw(); draw(res);
svg.Mouse.runEvents(); // run and clear our events svg.Mouse.runEvents(); // run and clear our events
} }
}, 1000 / svg.FRAMERATE); }, 1000 / svg.FRAMERATE);
@@ -4278,7 +4279,9 @@ var svgEditorExtension_server_opensave = (function () {
if (svg.ImagesLoaded()) { if (svg.ImagesLoaded()) {
waitingForImages = false; waitingForImages = false;
draw(resolve); draw(resolve);
return;
} }
res = resolve;
}); });
}; };

176
dist/index-es.js vendored
View File

@@ -232,6 +232,15 @@ var getReverseNS = function getReverseNS() {
return reverseNS; return reverseNS;
}; };
/* globals SVGPathSeg, SVGPathSegMovetoRel, SVGPathSegMovetoAbs,
SVGPathSegMovetoRel, SVGPathSegLinetoRel, SVGPathSegLinetoAbs,
SVGPathSegLinetoHorizontalRel, SVGPathSegLinetoHorizontalAbs,
SVGPathSegLinetoVerticalRel, SVGPathSegLinetoVerticalAbs,
SVGPathSegClosePath, SVGPathSegCurvetoCubicRel,
SVGPathSegCurvetoCubicAbs, SVGPathSegCurvetoCubicSmoothRel,
SVGPathSegCurvetoCubicSmoothAbs, SVGPathSegCurvetoQuadraticRel,
SVGPathSegCurvetoQuadraticAbs, SVGPathSegCurvetoQuadraticSmoothRel,
SVGPathSegCurvetoQuadraticSmoothAbs, SVGPathSegArcRel, SVGPathSegArcAbs */
/** /**
* SVGPathSeg API polyfill * SVGPathSeg API polyfill
* https://github.com/progers/pathseg * https://github.com/progers/pathseg
@@ -1542,11 +1551,11 @@ var getReverseNS = function getReverseNS() {
// The second check for appendItem is specific to Firefox 59+ which removed only parts of the // The second check for appendItem is specific to Firefox 59+ which removed only parts of the
// SVGPathSegList API (e.g., appendItem). In this case we need to re-implement the entire API // SVGPathSegList API (e.g., appendItem). In this case we need to re-implement the entire API
// so the polyfill data (i.e., _list) is used throughout. // so the polyfill data (i.e., _list) is used throughout.
if (!('SVGPathSegList' in window) || !('appendItem' in SVGPathSegList.prototype)) { if (!('SVGPathSegList' in window) || !('appendItem' in window.SVGPathSegList.prototype)) {
// Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList
var _SVGPathSegList = function () { var SVGPathSegList = function () {
function _SVGPathSegList(pathElement) { function SVGPathSegList(pathElement) {
classCallCheck(this, _SVGPathSegList); classCallCheck(this, SVGPathSegList);
this._pathElement = pathElement; this._pathElement = pathElement;
this._list = this._parsePath(this._pathElement.getAttribute('d')); this._list = this._parsePath(this._pathElement.getAttribute('d'));
@@ -1561,7 +1570,7 @@ var getReverseNS = function getReverseNS() {
// MutationObservers are not synchronous so we can have pending asynchronous mutations. // MutationObservers are not synchronous so we can have pending asynchronous mutations.
createClass(_SVGPathSegList, [{ createClass(SVGPathSegList, [{
key: '_checkPathSynchronizedToList', key: '_checkPathSynchronizedToList',
value: function _checkPathSynchronizedToList() { value: function _checkPathSynchronizedToList() {
this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords()); this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords());
@@ -1589,7 +1598,7 @@ var getReverseNS = function getReverseNS() {
key: '_writeListToPath', key: '_writeListToPath',
value: function _writeListToPath() { value: function _writeListToPath() {
this._pathElementMutationObserver.disconnect(); this._pathElementMutationObserver.disconnect();
this._pathElement.setAttribute('d', _SVGPathSegList._pathSegArrayAsString(this._list)); this._pathElement.setAttribute('d', SVGPathSegList._pathSegArrayAsString(this._list));
this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig); this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig);
} }
@@ -2066,12 +2075,12 @@ var getReverseNS = function getReverseNS() {
return builder.pathSegList; return builder.pathSegList;
} }
}]); }]);
return _SVGPathSegList; return SVGPathSegList;
}(); }();
_SVGPathSegList.prototype.classname = 'SVGPathSegList'; SVGPathSegList.prototype.classname = 'SVGPathSegList';
Object.defineProperty(_SVGPathSegList.prototype, 'numberOfItems', { Object.defineProperty(SVGPathSegList.prototype, 'numberOfItems', {
get: function get$$1() { get: function get$$1() {
this._checkPathSynchronizedToList(); this._checkPathSynchronizedToList();
return this._list.length; return this._list.length;
@@ -2080,7 +2089,7 @@ var getReverseNS = function getReverseNS() {
enumerable: true enumerable: true
}); });
_SVGPathSegList._pathSegArrayAsString = function (pathSegArray) { SVGPathSegList._pathSegArrayAsString = function (pathSegArray) {
var string = ''; var string = '';
var first = true; var first = true;
pathSegArray.forEach(function (pathSeg) { pathSegArray.forEach(function (pathSeg) {
@@ -2100,7 +2109,7 @@ var getReverseNS = function getReverseNS() {
pathSegList: { pathSegList: {
get: function get$$1() { get: function get$$1() {
if (!this._pathSegList) { if (!this._pathSegList) {
this._pathSegList = new _SVGPathSegList(this); this._pathSegList = new SVGPathSegList(this);
} }
return this._pathSegList; return this._pathSegList;
}, },
@@ -2124,7 +2133,7 @@ var getReverseNS = function getReverseNS() {
}, },
enumerable: true } enumerable: true }
}); });
window.SVGPathSegList = _SVGPathSegList; window.SVGPathSegList = SVGPathSegList;
} }
})(); })();
@@ -12289,7 +12298,7 @@ if (!window.console) {
if (window.opera) { if (window.opera) {
window.console.log = function (str) { window.console.log = function (str) {
opera.postError(str); window.opera.postError(str);
}; };
window.console.dir = function (str) {}; window.console.dir = function (str) {};
} }
@@ -16409,7 +16418,7 @@ function SvgCanvas(container, config) {
* Generates a PDF based on the current image, then calls "exportedPDF" with * Generates a PDF based on the current image, then calls "exportedPDF" with
* an object including the string, the data URL, and any issues found * an object including the string, the data URL, and any issues found
* @function module:svgcanvas.SvgCanvas#exportPDF * @function module:svgcanvas.SvgCanvas#exportPDF
* @param {string} exportWindowName * @param {string} exportWindowName Will also be used for the download file name here
* @param {external:jsPDF.OutputType} [outputType="dataurlstring"] * @param {external:jsPDF.OutputType} [outputType="dataurlstring"]
* @param {module:svgcanvas.PDFExportedCallback} cb * @param {module:svgcanvas.PDFExportedCallback} cb
* @fires module:svgcanvas.SvgCanvas#event:exportedPDF * @fires module:svgcanvas.SvgCanvas#event:exportedPDF
@@ -16481,7 +16490,7 @@ function SvgCanvas(container, config) {
outputType = outputType || 'dataurlstring'; outputType = outputType || 'dataurlstring';
obj = { svg: svg, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName, outputType: outputType }; obj = { svg: svg, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName, outputType: outputType };
obj.output = doc.output(outputType); obj.output = doc.output(outputType, outputType === 'save' ? exportWindowName || 'svg.pdf' : undefined);
if (cb) { if (cb) {
cb(obj); cb(obj);
} }
@@ -28394,6 +28403,10 @@ editor.init = function () {
svgCanvas.bind('saved', saveHandler); svgCanvas.bind('saved', saveHandler);
svgCanvas.bind('exported', exportHandler); svgCanvas.bind('exported', exportHandler);
svgCanvas.bind('exportedPDF', function (win, data) { svgCanvas.bind('exportedPDF', function (win, data) {
if (!data.output) {
// Ignore Chrome
return;
}
var exportWindowName = data.exportWindowName; var exportWindowName = data.exportWindowName;
if (exportWindowName) { if (exportWindowName) {
@@ -29214,48 +29227,81 @@ editor.init = function () {
$$b.select('Select an image type for export: ', [ $$b.select('Select an image type for export: ', [
// See http://kangax.github.io/jstests/toDataUrl_mime_type_test/ for a useful list of MIME types and browser support // See http://kangax.github.io/jstests/toDataUrl_mime_type_test/ for a useful list of MIME types and browser support
// 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG' // 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG'
'PNG', 'JPEG', 'BMP', 'WEBP', 'PDF'], function (imgType) { 'PNG', 'JPEG', 'BMP', 'WEBP', 'PDF'], function () {
// todo: replace hard-coded msg with uiStrings.notification. var _ref15 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(imgType) {
if (!imgType) { var exportWindowName, openExportWindow, chrome, quality;
return; return regeneratorRuntime.wrap(function _callee5$(_context5) {
} while (1) {
// Open placeholder window (prevents popup) switch (_context5.prev = _context5.next) {
var exportWindowName = void 0; case 0:
function openExportWindow() { openExportWindow = function openExportWindow() {
var str = uiStrings$1.notification.loadingImage; var str = uiStrings$1.notification.loadingImage;
if (curConfig.exportWindowType === 'new') { if (curConfig.exportWindowType === 'new') {
editor.exportWindowCt++; editor.exportWindowCt++;
} }
exportWindowName = curConfig.canvasName + editor.exportWindowCt; exportWindowName = curConfig.canvasName + editor.exportWindowCt;
var popHTML = void 0, var popHTML = void 0,
popURL = void 0; popURL = void 0;
if (loadingURL) { if (loadingURL) {
popURL = loadingURL; popURL = loadingURL;
} else { } else {
popHTML = '<!DOCTYPE html><html>\n <head>\n <meta charset="utf-8">\n <title>' + str + '</title>\n </head>\n <body><h1>' + str + '</h1></body>\n <html>'; popHTML = '<!DOCTYPE html><html>\n <head>\n <meta charset="utf-8">\n <title>' + str + '</title>\n </head>\n <body><h1>' + str + '</h1></body>\n <html>';
if ((typeof URL === 'undefined' ? 'undefined' : _typeof(URL)) && URL.createObjectURL) { if ((typeof URL === 'undefined' ? 'undefined' : _typeof(URL)) && URL.createObjectURL) {
var blob = new Blob([popHTML], { type: 'text/html' }); var blob = new Blob([popHTML], { type: 'text/html' });
popURL = URL.createObjectURL(blob); popURL = URL.createObjectURL(blob);
} else { } else {
popURL = 'data:text/html;base64;charset=utf-8,' + encode64(popHTML); popURL = 'data:text/html;base64;charset=utf-8,' + encode64(popHTML);
}
loadingURL = popURL;
}
exportWindow = window.open(popURL, exportWindowName);
};
if (imgType) {
_context5.next = 3;
break;
}
return _context5.abrupt('return');
case 3:
// Open placeholder window (prevents popup)
exportWindowName = void 0;
chrome = isChrome();
if (!(imgType === 'PDF')) {
_context5.next = 10;
break;
}
if (!customExportPDF && !chrome) {
openExportWindow();
}
svgCanvas.exportPDF(exportWindowName, chrome ? 'save' : undefined);
_context5.next = 14;
break;
case 10:
if (!customExportImage) {
openExportWindow();
}
quality = parseInt($$b('#image-slider').val(), 10) / 100;
/* const results = */
_context5.next = 14;
return svgCanvas.rasterExport(imgType, quality, exportWindowName);
case 14:
case 'end':
return _context5.stop();
}
} }
loadingURL = popURL; }, _callee5, this);
} }));
exportWindow = window.open(popURL, exportWindowName);
} return function (_x5) {
if (imgType === 'PDF') { return _ref15.apply(this, arguments);
if (!customExportPDF) { };
openExportWindow(); }(), function () {
}
svgCanvas.exportPDF(exportWindowName);
} else {
if (!customExportImage) {
openExportWindow();
}
var quality = parseInt($$b('#image-slider').val(), 10) / 100;
svgCanvas.rasterExport(imgType, quality, exportWindowName);
}
}, function () {
var sel = $$b(this); var sel = $$b(this);
if (sel.val() === 'JPEG' || sel.val() === 'WEBP') { if (sel.val() === 'JPEG' || sel.val() === 'WEBP') {
if (!$$b('#image-slider').length) { if (!$$b('#image-slider').length) {
@@ -30693,7 +30739,9 @@ editor.init = function () {
} else { } else {
// bitmap handling // bitmap handling
reader = new FileReader(); reader = new FileReader();
reader.onloadend = function (e) { reader.onloadend = function (_ref16) {
var result = _ref16.target.result;
// let's insert the new image until we know its dimensions // let's insert the new image until we know its dimensions
var insertNewImage = function insertNewImage(width, height) { var insertNewImage = function insertNewImage(width, height) {
var newImage = svgCanvas.addSVGElementFromJson({ var newImage = svgCanvas.addSVGElementFromJson({
@@ -30707,7 +30755,7 @@ editor.init = function () {
style: 'pointer-events:inherit' style: 'pointer-events:inherit'
} }
}); });
svgCanvas.setHref(newImage, e.target.result); svgCanvas.setHref(newImage, result);
svgCanvas.selectOnly([newImage]); svgCanvas.selectOnly([newImage]);
svgCanvas.alignSelectedElements('m', 'page'); svgCanvas.alignSelectedElements('m', 'page');
svgCanvas.alignSelectedElements('c', 'page'); svgCanvas.alignSelectedElements('c', 'page');
@@ -30718,13 +30766,13 @@ editor.init = function () {
var imgWidth = 100; var imgWidth = 100;
var imgHeight = 100; var imgHeight = 100;
var img = new Image(); var img = new Image();
img.src = e.target.result;
img.style.opacity = 0; img.style.opacity = 0;
img.onload = function () { img.onload = function () {
imgWidth = img.offsetWidth; imgWidth = img.offsetWidth || img.naturalWidth || img.width;
imgHeight = img.offsetHeight; imgHeight = img.offsetHeight || img.naturalHeight || img.height;
insertNewImage(imgWidth, imgHeight); insertNewImage(imgWidth, imgHeight);
}; };
img.src = result;
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
@@ -31029,9 +31077,9 @@ var messageQueue = [];
* @fires module:svgcanvas.SvgCanvas#event:message * @fires module:svgcanvas.SvgCanvas#event:message
* @returns {undefined} * @returns {undefined}
*/ */
var messageListener = function messageListener(_ref15) { var messageListener = function messageListener(_ref17) {
var data = _ref15.data, var data = _ref17.data,
origin = _ref15.origin; origin = _ref17.origin;
// console.log('data, origin, extensionsAdded', data, origin, extensionsAdded); // console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);
var messageObj = { data: data, origin: origin }; var messageObj = { data: data, origin: origin };

2
dist/index-es.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index-es.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

176
dist/index-umd.js vendored
View File

@@ -238,6 +238,15 @@
return reverseNS; return reverseNS;
}; };
/* globals SVGPathSeg, SVGPathSegMovetoRel, SVGPathSegMovetoAbs,
SVGPathSegMovetoRel, SVGPathSegLinetoRel, SVGPathSegLinetoAbs,
SVGPathSegLinetoHorizontalRel, SVGPathSegLinetoHorizontalAbs,
SVGPathSegLinetoVerticalRel, SVGPathSegLinetoVerticalAbs,
SVGPathSegClosePath, SVGPathSegCurvetoCubicRel,
SVGPathSegCurvetoCubicAbs, SVGPathSegCurvetoCubicSmoothRel,
SVGPathSegCurvetoCubicSmoothAbs, SVGPathSegCurvetoQuadraticRel,
SVGPathSegCurvetoQuadraticAbs, SVGPathSegCurvetoQuadraticSmoothRel,
SVGPathSegCurvetoQuadraticSmoothAbs, SVGPathSegArcRel, SVGPathSegArcAbs */
/** /**
* SVGPathSeg API polyfill * SVGPathSeg API polyfill
* https://github.com/progers/pathseg * https://github.com/progers/pathseg
@@ -1548,11 +1557,11 @@
// The second check for appendItem is specific to Firefox 59+ which removed only parts of the // The second check for appendItem is specific to Firefox 59+ which removed only parts of the
// SVGPathSegList API (e.g., appendItem). In this case we need to re-implement the entire API // SVGPathSegList API (e.g., appendItem). In this case we need to re-implement the entire API
// so the polyfill data (i.e., _list) is used throughout. // so the polyfill data (i.e., _list) is used throughout.
if (!('SVGPathSegList' in window) || !('appendItem' in SVGPathSegList.prototype)) { if (!('SVGPathSegList' in window) || !('appendItem' in window.SVGPathSegList.prototype)) {
// Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList
var _SVGPathSegList = function () { var SVGPathSegList = function () {
function _SVGPathSegList(pathElement) { function SVGPathSegList(pathElement) {
classCallCheck(this, _SVGPathSegList); classCallCheck(this, SVGPathSegList);
this._pathElement = pathElement; this._pathElement = pathElement;
this._list = this._parsePath(this._pathElement.getAttribute('d')); this._list = this._parsePath(this._pathElement.getAttribute('d'));
@@ -1567,7 +1576,7 @@
// MutationObservers are not synchronous so we can have pending asynchronous mutations. // MutationObservers are not synchronous so we can have pending asynchronous mutations.
createClass(_SVGPathSegList, [{ createClass(SVGPathSegList, [{
key: '_checkPathSynchronizedToList', key: '_checkPathSynchronizedToList',
value: function _checkPathSynchronizedToList() { value: function _checkPathSynchronizedToList() {
this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords()); this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords());
@@ -1595,7 +1604,7 @@
key: '_writeListToPath', key: '_writeListToPath',
value: function _writeListToPath() { value: function _writeListToPath() {
this._pathElementMutationObserver.disconnect(); this._pathElementMutationObserver.disconnect();
this._pathElement.setAttribute('d', _SVGPathSegList._pathSegArrayAsString(this._list)); this._pathElement.setAttribute('d', SVGPathSegList._pathSegArrayAsString(this._list));
this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig); this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig);
} }
@@ -2072,12 +2081,12 @@
return builder.pathSegList; return builder.pathSegList;
} }
}]); }]);
return _SVGPathSegList; return SVGPathSegList;
}(); }();
_SVGPathSegList.prototype.classname = 'SVGPathSegList'; SVGPathSegList.prototype.classname = 'SVGPathSegList';
Object.defineProperty(_SVGPathSegList.prototype, 'numberOfItems', { Object.defineProperty(SVGPathSegList.prototype, 'numberOfItems', {
get: function get$$1() { get: function get$$1() {
this._checkPathSynchronizedToList(); this._checkPathSynchronizedToList();
return this._list.length; return this._list.length;
@@ -2086,7 +2095,7 @@
enumerable: true enumerable: true
}); });
_SVGPathSegList._pathSegArrayAsString = function (pathSegArray) { SVGPathSegList._pathSegArrayAsString = function (pathSegArray) {
var string = ''; var string = '';
var first = true; var first = true;
pathSegArray.forEach(function (pathSeg) { pathSegArray.forEach(function (pathSeg) {
@@ -2106,7 +2115,7 @@
pathSegList: { pathSegList: {
get: function get$$1() { get: function get$$1() {
if (!this._pathSegList) { if (!this._pathSegList) {
this._pathSegList = new _SVGPathSegList(this); this._pathSegList = new SVGPathSegList(this);
} }
return this._pathSegList; return this._pathSegList;
}, },
@@ -2130,7 +2139,7 @@
}, },
enumerable: true } enumerable: true }
}); });
window.SVGPathSegList = _SVGPathSegList; window.SVGPathSegList = SVGPathSegList;
} }
})(); })();
@@ -12295,7 +12304,7 @@
if (window.opera) { if (window.opera) {
window.console.log = function (str) { window.console.log = function (str) {
opera.postError(str); window.opera.postError(str);
}; };
window.console.dir = function (str) {}; window.console.dir = function (str) {};
} }
@@ -16415,7 +16424,7 @@
* Generates a PDF based on the current image, then calls "exportedPDF" with * Generates a PDF based on the current image, then calls "exportedPDF" with
* an object including the string, the data URL, and any issues found * an object including the string, the data URL, and any issues found
* @function module:svgcanvas.SvgCanvas#exportPDF * @function module:svgcanvas.SvgCanvas#exportPDF
* @param {string} exportWindowName * @param {string} exportWindowName Will also be used for the download file name here
* @param {external:jsPDF.OutputType} [outputType="dataurlstring"] * @param {external:jsPDF.OutputType} [outputType="dataurlstring"]
* @param {module:svgcanvas.PDFExportedCallback} cb * @param {module:svgcanvas.PDFExportedCallback} cb
* @fires module:svgcanvas.SvgCanvas#event:exportedPDF * @fires module:svgcanvas.SvgCanvas#event:exportedPDF
@@ -16487,7 +16496,7 @@
outputType = outputType || 'dataurlstring'; outputType = outputType || 'dataurlstring';
obj = { svg: svg, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName, outputType: outputType }; obj = { svg: svg, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName, outputType: outputType };
obj.output = doc.output(outputType); obj.output = doc.output(outputType, outputType === 'save' ? exportWindowName || 'svg.pdf' : undefined);
if (cb) { if (cb) {
cb(obj); cb(obj);
} }
@@ -28400,6 +28409,10 @@
svgCanvas.bind('saved', saveHandler); svgCanvas.bind('saved', saveHandler);
svgCanvas.bind('exported', exportHandler); svgCanvas.bind('exported', exportHandler);
svgCanvas.bind('exportedPDF', function (win, data) { svgCanvas.bind('exportedPDF', function (win, data) {
if (!data.output) {
// Ignore Chrome
return;
}
var exportWindowName = data.exportWindowName; var exportWindowName = data.exportWindowName;
if (exportWindowName) { if (exportWindowName) {
@@ -29220,48 +29233,81 @@
$$b.select('Select an image type for export: ', [ $$b.select('Select an image type for export: ', [
// See http://kangax.github.io/jstests/toDataUrl_mime_type_test/ for a useful list of MIME types and browser support // See http://kangax.github.io/jstests/toDataUrl_mime_type_test/ for a useful list of MIME types and browser support
// 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG' // 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG'
'PNG', 'JPEG', 'BMP', 'WEBP', 'PDF'], function (imgType) { 'PNG', 'JPEG', 'BMP', 'WEBP', 'PDF'], function () {
// todo: replace hard-coded msg with uiStrings.notification. var _ref15 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(imgType) {
if (!imgType) { var exportWindowName, openExportWindow, chrome, quality;
return; return regeneratorRuntime.wrap(function _callee5$(_context5) {
} while (1) {
// Open placeholder window (prevents popup) switch (_context5.prev = _context5.next) {
var exportWindowName = void 0; case 0:
function openExportWindow() { openExportWindow = function openExportWindow() {
var str = uiStrings$1.notification.loadingImage; var str = uiStrings$1.notification.loadingImage;
if (curConfig.exportWindowType === 'new') { if (curConfig.exportWindowType === 'new') {
editor.exportWindowCt++; editor.exportWindowCt++;
} }
exportWindowName = curConfig.canvasName + editor.exportWindowCt; exportWindowName = curConfig.canvasName + editor.exportWindowCt;
var popHTML = void 0, var popHTML = void 0,
popURL = void 0; popURL = void 0;
if (loadingURL) { if (loadingURL) {
popURL = loadingURL; popURL = loadingURL;
} else { } else {
popHTML = '<!DOCTYPE html><html>\n <head>\n <meta charset="utf-8">\n <title>' + str + '</title>\n </head>\n <body><h1>' + str + '</h1></body>\n <html>'; popHTML = '<!DOCTYPE html><html>\n <head>\n <meta charset="utf-8">\n <title>' + str + '</title>\n </head>\n <body><h1>' + str + '</h1></body>\n <html>';
if ((typeof URL === 'undefined' ? 'undefined' : _typeof(URL)) && URL.createObjectURL) { if ((typeof URL === 'undefined' ? 'undefined' : _typeof(URL)) && URL.createObjectURL) {
var blob = new Blob([popHTML], { type: 'text/html' }); var blob = new Blob([popHTML], { type: 'text/html' });
popURL = URL.createObjectURL(blob); popURL = URL.createObjectURL(blob);
} else { } else {
popURL = 'data:text/html;base64;charset=utf-8,' + encode64(popHTML); popURL = 'data:text/html;base64;charset=utf-8,' + encode64(popHTML);
}
loadingURL = popURL;
}
exportWindow = window.open(popURL, exportWindowName);
};
if (imgType) {
_context5.next = 3;
break;
}
return _context5.abrupt('return');
case 3:
// Open placeholder window (prevents popup)
exportWindowName = void 0;
chrome = isChrome();
if (!(imgType === 'PDF')) {
_context5.next = 10;
break;
}
if (!customExportPDF && !chrome) {
openExportWindow();
}
svgCanvas.exportPDF(exportWindowName, chrome ? 'save' : undefined);
_context5.next = 14;
break;
case 10:
if (!customExportImage) {
openExportWindow();
}
quality = parseInt($$b('#image-slider').val(), 10) / 100;
/* const results = */
_context5.next = 14;
return svgCanvas.rasterExport(imgType, quality, exportWindowName);
case 14:
case 'end':
return _context5.stop();
}
} }
loadingURL = popURL; }, _callee5, this);
} }));
exportWindow = window.open(popURL, exportWindowName);
} return function (_x5) {
if (imgType === 'PDF') { return _ref15.apply(this, arguments);
if (!customExportPDF) { };
openExportWindow(); }(), function () {
}
svgCanvas.exportPDF(exportWindowName);
} else {
if (!customExportImage) {
openExportWindow();
}
var quality = parseInt($$b('#image-slider').val(), 10) / 100;
svgCanvas.rasterExport(imgType, quality, exportWindowName);
}
}, function () {
var sel = $$b(this); var sel = $$b(this);
if (sel.val() === 'JPEG' || sel.val() === 'WEBP') { if (sel.val() === 'JPEG' || sel.val() === 'WEBP') {
if (!$$b('#image-slider').length) { if (!$$b('#image-slider').length) {
@@ -30699,7 +30745,9 @@
} else { } else {
// bitmap handling // bitmap handling
reader = new FileReader(); reader = new FileReader();
reader.onloadend = function (e) { reader.onloadend = function (_ref16) {
var result = _ref16.target.result;
// let's insert the new image until we know its dimensions // let's insert the new image until we know its dimensions
var insertNewImage = function insertNewImage(width, height) { var insertNewImage = function insertNewImage(width, height) {
var newImage = svgCanvas.addSVGElementFromJson({ var newImage = svgCanvas.addSVGElementFromJson({
@@ -30713,7 +30761,7 @@
style: 'pointer-events:inherit' style: 'pointer-events:inherit'
} }
}); });
svgCanvas.setHref(newImage, e.target.result); svgCanvas.setHref(newImage, result);
svgCanvas.selectOnly([newImage]); svgCanvas.selectOnly([newImage]);
svgCanvas.alignSelectedElements('m', 'page'); svgCanvas.alignSelectedElements('m', 'page');
svgCanvas.alignSelectedElements('c', 'page'); svgCanvas.alignSelectedElements('c', 'page');
@@ -30724,13 +30772,13 @@
var imgWidth = 100; var imgWidth = 100;
var imgHeight = 100; var imgHeight = 100;
var img = new Image(); var img = new Image();
img.src = e.target.result;
img.style.opacity = 0; img.style.opacity = 0;
img.onload = function () { img.onload = function () {
imgWidth = img.offsetWidth; imgWidth = img.offsetWidth || img.naturalWidth || img.width;
imgHeight = img.offsetHeight; imgHeight = img.offsetHeight || img.naturalHeight || img.height;
insertNewImage(imgWidth, imgHeight); insertNewImage(imgWidth, imgHeight);
}; };
img.src = result;
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
@@ -31035,9 +31083,9 @@
* @fires module:svgcanvas.SvgCanvas#event:message * @fires module:svgcanvas.SvgCanvas#event:message
* @returns {undefined} * @returns {undefined}
*/ */
var messageListener = function messageListener(_ref15) { var messageListener = function messageListener(_ref17) {
var data = _ref15.data, var data = _ref17.data,
origin = _ref15.origin; origin = _ref17.origin;
// console.log('data, origin, extensionsAdded', data, origin, extensionsAdded); // console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);
var messageObj = { data: data, origin: origin }; var messageObj = { data: data, origin: origin };

2
dist/index-umd.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index-umd.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

24
dist/jspdf.plugin.svgToPdf.js vendored
View File

@@ -511,7 +511,25 @@
pdf.setFontType(fontType); pdf.setFontType(fontType);
var pdfFontSize = node.hasAttribute('font-size') ? parseInt(node.getAttribute('font-size'), 10) : 16; var pdfFontSize = node.hasAttribute('font-size') ? parseInt(node.getAttribute('font-size'), 10) : 16;
var box = node.getBBox(); var getWidth = function getWidth(node) {
var box = void 0;
try {
box = node.getBBox(); // Firefox on MacOS will raise error here
} catch (err) {
// copy and append to body so that getBBox is available
var nodeCopy = node.cloneNode(true);
var svg = node.ownerSVGElement.cloneNode(false);
svg.appendChild(nodeCopy);
document.body.appendChild(svg);
try {
box = nodeCopy.getBBox();
} catch (err) {
box = { width: 0 };
}
document.body.removeChild(svg);
}
return box.width;
};
// FIXME: use more accurate positioning!! // FIXME: use more accurate positioning!!
var x = void 0, var x = void 0,
y = void 0, y = void 0,
@@ -519,9 +537,9 @@
if (node.hasAttribute('text-anchor')) { if (node.hasAttribute('text-anchor')) {
switch (node.getAttribute('text-anchor')) { switch (node.getAttribute('text-anchor')) {
case 'end': case 'end':
xOffset = box.width;break; xOffset = getWidth(node);break;
case 'middle': case 'middle':
xOffset = box.width / 2;break; xOffset = getWidth(node) / 2;break;
case 'start': case 'start':
break; break;
case 'default': case 'default':

14
dist/locale/lang.en.js vendored
View File

@@ -127,10 +127,10 @@ var svgEditorLang_en = (function () {
set_link_url: 'Set link URL (leave empty to remove)', set_link_url: 'Set link URL (leave empty to remove)',
to_path: 'Convert to Path', to_path: 'Convert to Path',
reorient_path: 'Reorient path', reorient_path: 'Reorient path',
ungroup: 'Ungroup Elements [G]', ungroup: 'Ungroup Elements',
docprops: 'Document Properties [D]', docprops: 'Document Properties [D]',
move_bottom: 'Send to Back [ Ctrl+Shift+[ ]', move_bottom: 'Send to Back',
move_top: 'Bring to Front [ Ctrl+Shift+] ]', move_top: 'Bring to Front',
node_clone: 'Clone Node', node_clone: 'Clone Node',
node_delete: 'Delete Node', node_delete: 'Delete Node',
node_link: 'Link Control Points', node_link: 'Link Control Points',
@@ -143,10 +143,10 @@ var svgEditorLang_en = (function () {
paste_in_place: 'Paste in Place', paste_in_place: 'Paste in Place',
delete: 'Delete', delete: 'Delete',
group: 'Group', group: 'Group',
move_front: 'Bring to Front [ Ctrl-Shift+] ]', move_front: 'Bring to Front',
move_up: 'Bring Forward [ Ctrl+] ]', move_up: 'Bring Forward',
move_down: 'Send Backward [ Ctrl+[ ]', move_down: 'Send Backward',
move_back: 'Send to Back [ Ctrl+Shift+[ ]' move_back: 'Send to Back'
}, },
layers: { layers: {
layer: 'Layer', layer: 'Layer',

33
dist/redirect-on-lacking-support.js vendored
View File

@@ -49,6 +49,15 @@
return call && (typeof call === "object" || typeof call === "function") ? call : self; return call && (typeof call === "object" || typeof call === "function") ? call : self;
}; };
/* globals SVGPathSeg, SVGPathSegMovetoRel, SVGPathSegMovetoAbs,
SVGPathSegMovetoRel, SVGPathSegLinetoRel, SVGPathSegLinetoAbs,
SVGPathSegLinetoHorizontalRel, SVGPathSegLinetoHorizontalAbs,
SVGPathSegLinetoVerticalRel, SVGPathSegLinetoVerticalAbs,
SVGPathSegClosePath, SVGPathSegCurvetoCubicRel,
SVGPathSegCurvetoCubicAbs, SVGPathSegCurvetoCubicSmoothRel,
SVGPathSegCurvetoCubicSmoothAbs, SVGPathSegCurvetoQuadraticRel,
SVGPathSegCurvetoQuadraticAbs, SVGPathSegCurvetoQuadraticSmoothRel,
SVGPathSegCurvetoQuadraticSmoothAbs, SVGPathSegArcRel, SVGPathSegArcAbs */
/** /**
* SVGPathSeg API polyfill * SVGPathSeg API polyfill
* https://github.com/progers/pathseg * https://github.com/progers/pathseg
@@ -1359,11 +1368,11 @@
// The second check for appendItem is specific to Firefox 59+ which removed only parts of the // The second check for appendItem is specific to Firefox 59+ which removed only parts of the
// SVGPathSegList API (e.g., appendItem). In this case we need to re-implement the entire API // SVGPathSegList API (e.g., appendItem). In this case we need to re-implement the entire API
// so the polyfill data (i.e., _list) is used throughout. // so the polyfill data (i.e., _list) is used throughout.
if (!('SVGPathSegList' in window) || !('appendItem' in SVGPathSegList.prototype)) { if (!('SVGPathSegList' in window) || !('appendItem' in window.SVGPathSegList.prototype)) {
// Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList
var _SVGPathSegList = function () { var SVGPathSegList = function () {
function _SVGPathSegList(pathElement) { function SVGPathSegList(pathElement) {
classCallCheck(this, _SVGPathSegList); classCallCheck(this, SVGPathSegList);
this._pathElement = pathElement; this._pathElement = pathElement;
this._list = this._parsePath(this._pathElement.getAttribute('d')); this._list = this._parsePath(this._pathElement.getAttribute('d'));
@@ -1378,7 +1387,7 @@
// MutationObservers are not synchronous so we can have pending asynchronous mutations. // MutationObservers are not synchronous so we can have pending asynchronous mutations.
createClass(_SVGPathSegList, [{ createClass(SVGPathSegList, [{
key: '_checkPathSynchronizedToList', key: '_checkPathSynchronizedToList',
value: function _checkPathSynchronizedToList() { value: function _checkPathSynchronizedToList() {
this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords()); this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords());
@@ -1406,7 +1415,7 @@
key: '_writeListToPath', key: '_writeListToPath',
value: function _writeListToPath() { value: function _writeListToPath() {
this._pathElementMutationObserver.disconnect(); this._pathElementMutationObserver.disconnect();
this._pathElement.setAttribute('d', _SVGPathSegList._pathSegArrayAsString(this._list)); this._pathElement.setAttribute('d', SVGPathSegList._pathSegArrayAsString(this._list));
this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig); this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig);
} }
@@ -1883,12 +1892,12 @@
return builder.pathSegList; return builder.pathSegList;
} }
}]); }]);
return _SVGPathSegList; return SVGPathSegList;
}(); }();
_SVGPathSegList.prototype.classname = 'SVGPathSegList'; SVGPathSegList.prototype.classname = 'SVGPathSegList';
Object.defineProperty(_SVGPathSegList.prototype, 'numberOfItems', { Object.defineProperty(SVGPathSegList.prototype, 'numberOfItems', {
get: function get$$1() { get: function get$$1() {
this._checkPathSynchronizedToList(); this._checkPathSynchronizedToList();
return this._list.length; return this._list.length;
@@ -1897,7 +1906,7 @@
enumerable: true enumerable: true
}); });
_SVGPathSegList._pathSegArrayAsString = function (pathSegArray) { SVGPathSegList._pathSegArrayAsString = function (pathSegArray) {
var string = ''; var string = '';
var first = true; var first = true;
pathSegArray.forEach(function (pathSeg) { pathSegArray.forEach(function (pathSeg) {
@@ -1917,7 +1926,7 @@
pathSegList: { pathSegList: {
get: function get$$1() { get: function get$$1() {
if (!this._pathSegList) { if (!this._pathSegList) {
this._pathSegList = new _SVGPathSegList(this); this._pathSegList = new SVGPathSegList(this);
} }
return this._pathSegList; return this._pathSegList;
}, },
@@ -1941,7 +1950,7 @@
}, },
enumerable: true } enumerable: true }
}); });
window.SVGPathSegList = _SVGPathSegList; window.SVGPathSegList = SVGPathSegList;
} }
})(); })();

52
docs/tutorials/FrequentlyAskedQuestions.md
View File

@@ -1,41 +1,39 @@
**NOTE: The following may contain outdated content.** **NOTE: The following may contain or reference outdated content.**
**Q: Why doesn't SVG-edit work in Internet Explorer 6-7-8?** **Q: Why am I not able to export?**
A: SVG-edit only works in IE6-7-8 if you have installed the Google Chrome A: It is possible you have a popup-blocker such as AdBlock Plus installed.
Frame plugin. Internet Explorer 8 and under do not natively support Scalable
Vector Graphics (SVG), however IE9+ does, and thus is supported starting
in SVG-edit 2.6
In theory there are several other possibilities that could allow SVG-edit
to work in IE:
* someone gets it to work with the SVG Web shim
* someone gets it to work with IE and the Adobe SVG Viewer
* someone gets it to work with another SVG plugin
**Q: How can I make SVG-edit save files on my server?** **Q: How can I make SVG-edit save files on my server?**
A: As of SVG-edit 2.5.1, an extension is available that overrides the A: As of SVG-edit 2.5.1, an extension is available that overrides the
default open/save behavior and instead uses PHP files to allow proper default open/save behavior and instead uses PHP files to allow proper
open/save dialog boxes. You can include the extension by adding open/save dialog boxes. You can include the extension by adding
`ext-server_opensave.js` to the `curConfig.extension` array in `ext-server_opensave.js` to the `curConfig.extension` array
`svg-editor.js` or through other methods mentioned on our ConfigOptions page. or through other methods mentioned on our [ConfigOptions]{@tutorial ConfigOptions} page.
For other server-saving behavior you'll want to modify For other server-saving behavior you may wish to modify
`ext-server_opensave.js` or the `filesave.php` file, both available `ext-server_opensave.js` or the `filesave.php` file, both available
under `editor/extensions/`. under `editor/extensions/`.
**Q: How can I serve SVG graphic editor from my own server?**
A: You need to download the latest version to your server and unzip.
The exact commands/instructions are here: <http://howik.com/Improve_your_user%27s_experience_by_adding_svg_graphic_editor_to_your_website_in_less_than_2_minutes>
**Q: How can I help?**
A: See [Testing]{@tutorial Testing} and [ReleaseInstructions]{@tutorial ReleaseInstructions}
<!-- The remaining should be moved to Editor.md as documentation,
assuming they are still valid -->
**Q: How can I set the stroke to 'none'?** **Q: How can I set the stroke to 'none'?**
A: Shift-clicking palette squares sets the Stroke paint value. Thus, A: Shift-clicking palette squares sets the Stroke paint value. Thus,
you can `shift-click` on the None box (red x on white background) to you can `shift-click` on the None box (red x on white background) to
clear the Stroke paint. clear the Stroke paint.
**Q: How can I help?**
A: See How to participate
**Q: How can I select an element when it's hidden or behind another one?** **Q: How can I select an element when it's hidden or behind another one?**
A: Select an object. `Shift+O` will select the previous object `Shift+P` A: Select an object. `Shift+O` will select the previous object `Shift+P`
@@ -59,15 +57,6 @@ A: Yes, there are two methods you can use as of SVG-edit 2.4.
and enter your URL. Use the layer above this one to trace over the image and enter your URL. Use the layer above this one to trace over the image
without moving. Note that you can also hide/show layers to help your work. without moving. Note that you can also hide/show layers to help your work.
**Q: How do I use the Wave Gadget?**
A: (Note that this information refers to the SVG-edit 2.3 Wave Gadget,
the Wave Gadget has not been worked on for years though) Go to this wave
wavesandbox.com!w+W7VzCLZk%A and there will be a button on the bottom
that says "Install" and when you are editing things, you will see a
SVG-edit icon in your toolbar that you can click to include the gadget
into any blip.
**Q: How do I copy the style of an object to other(s)?** **Q: How do I copy the style of an object to other(s)?**
A: A:
@@ -82,8 +71,3 @@ A:
- Hit "Ok" in the colorpicker - Hit "Ok" in the colorpicker
The other objects will get the Fill or the Stroke of the first object. The other objects will get the Fill or the Stroke of the first object.
**Q: How can I serve SVG graphic editor from my own server?**
A: You need to download the latest version to your server and unzip.
The exact commands/instructions are here: <http://howik.com/Improve_your_user%27s_experience_by_adding_svg_graphic_editor_to_your_website_in_less_than_2_minutes>

9
editor/canvg/canvg.js
View File

@@ -131,7 +131,7 @@ function build (opts) {
svg.ViewPort = { svg.ViewPort = {
viewPorts: [], viewPorts: [],
Clear () { this.viewPorts = []; }, Clear () { this.viewPorts = []; },
SetCurrent (width, height) { this.viewPorts.push({ width, height }); }, SetCurrent (width, height) { this.viewPorts.push({width, height}); },
RemoveCurrent () { this.viewPorts.pop(); }, RemoveCurrent () { this.viewPorts.pop(); },
Current () { return this.viewPorts[this.viewPorts.length - 1]; }, Current () { return this.viewPorts[this.viewPorts.length - 1]; },
width () { return this.Current().width; }, width () { return this.Current().width; },
@@ -1912,7 +1912,7 @@ function build (opts) {
// fraction of duration we've covered // fraction of duration we've covered
progress () { progress () {
const ret = { progress: (this.duration - this.begin) / (this.maxDuration - this.begin) }; const ret = {progress: (this.duration - this.begin) / (this.maxDuration - this.begin)};
if (this.values.hasValue()) { if (this.values.hasValue()) {
const p = ret.progress * (this.values.value.length - 1); const p = ret.progress * (this.values.value.length - 1);
const lb = Math.floor(p), ub = Math.ceil(p); const lb = Math.floor(p), ub = Math.ceil(p);
@@ -2745,6 +2745,7 @@ function build (opts) {
}; };
svg.loadXmlDoc = function (ctx, dom) { svg.loadXmlDoc = function (ctx, dom) {
let res;
svg.init(ctx); svg.init(ctx);
const mapXY = function (p) { const mapXY = function (p) {
@@ -2888,7 +2889,7 @@ function build (opts) {
// render if needed // render if needed
if (needUpdate) { if (needUpdate) {
draw(); draw(res);
svg.Mouse.runEvents(); // run and clear our events svg.Mouse.runEvents(); // run and clear our events
} }
}, 1000 / svg.FRAMERATE); }, 1000 / svg.FRAMERATE);
@@ -2896,7 +2897,9 @@ function build (opts) {
if (svg.ImagesLoaded()) { if (svg.ImagesLoaded()) {
waitingForImages = false; waitingForImages = false;
draw(resolve); draw(resolve);
return;
} }
res = resolve;
}); });
}; };

2
editor/contextmenu/jQuery.contextMenu.js
View File

@@ -94,7 +94,7 @@ function jQueryContextMenu ($) {
// Show the menu // Show the menu
doc.unbind('click'); doc.unbind('click');
menu.css({ top: y, left: x }).fadeIn(o.inSpeed); menu.css({top: y, left: x}).fadeIn(o.inSpeed);
// Hover events // Hover events
menu.find('A').mouseover(function () { menu.find('A').mouseover(function () {
menu.find('LI.hover').removeClass('hover'); menu.find('LI.hover').removeClass('hover');

18
editor/extensions/ext-markers.js
View File

@@ -457,38 +457,38 @@ export default {
panel: 'marker_panel', panel: 'marker_panel',
id: 'start_marker', id: 'start_marker',
size: 3, size: 3,
events: { change: setMarker } events: {change: setMarker}
}, { }, {
type: 'button-select', type: 'button-select',
panel: 'marker_panel', panel: 'marker_panel',
id: 'start_marker_list', id: 'start_marker_list',
colnum: 3, colnum: 3,
events: { change: setArrowFromButton } events: {change: setArrowFromButton}
}, { }, {
type: 'input', type: 'input',
panel: 'marker_panel', panel: 'marker_panel',
id: 'mid_marker', id: 'mid_marker',
defval: '', defval: '',
size: 3, size: 3,
events: { change: setMarker } events: {change: setMarker}
}, { }, {
type: 'button-select', type: 'button-select',
panel: 'marker_panel', panel: 'marker_panel',
id: 'mid_marker_list', id: 'mid_marker_list',
colnum: 3, colnum: 3,
events: { change: setArrowFromButton } events: {change: setArrowFromButton}
}, { }, {
type: 'input', type: 'input',
panel: 'marker_panel', panel: 'marker_panel',
id: 'end_marker', id: 'end_marker',
size: 3, size: 3,
events: { change: setMarker } events: {change: setMarker}
}, { }, {
type: 'button-select', type: 'button-select',
panel: 'marker_panel', panel: 'marker_panel',
id: 'end_marker_list', id: 'end_marker_list',
colnum: 3, colnum: 3,
events: { change: setArrowFromButton } events: {change: setArrowFromButton}
} }
]; ];
@@ -499,7 +499,7 @@ export default {
$('#marker_panel').addClass('toolset').hide(); $('#marker_panel').addClass('toolset').hide();
}, },
async addLangData ({importLocale, lang}) { async addLangData ({importLocale, lang}) {
return { data: strings.langList }; return {data: strings.langList};
}, },
selectedChanged (opts) { selectedChanged (opts) {
// Use this to update the current selected elements // Use this to update the current selected elements
@@ -537,7 +537,9 @@ export default {
// changing_flag = false; // Not apparently in use // changing_flag = false; // Not apparently in use
}, },
buttons: buildButtonList(), buttons: buildButtonList(),
context_tools: contextTools context_tools: strings.contextTools.map((contextTool, i) => {
return Object.assign(contextTools[i], contextTool);
})
}; };
} }
}; };

BIN
editor/extensions/markers-box.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
editor/extensions/markers-star_o.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 28 KiB

2
editor/external/dynamic-import-polyfill/importModule.js vendored
View File

@@ -112,7 +112,7 @@ export function importModule (url, atts = {}, {returnDefault = false} = {}) {
}; };
const absURL = toAbsoluteURL(url); const absURL = toAbsoluteURL(url);
const loader = `import * as m from '${absURL.replace(/'/g, "\\'")}'; window.${vector} = ${returnDefault ? 'm.default || ' : ''}m;`; // export Module const loader = `import * as m from '${absURL.replace(/'/g, "\\'")}'; window.${vector} = ${returnDefault ? 'm.default || ' : ''}m;`; // export Module
const blob = new Blob([loader], { type: 'text/javascript' }); const blob = new Blob([loader], {type: 'text/javascript'});
script.src = URL.createObjectURL(blob); script.src = URL.createObjectURL(blob);
document.head.append(script); document.head.append(script);

12
editor/jgraduate/jQuery.jGraduate.js
View File

@@ -656,9 +656,9 @@ export default function ($) {
while (thisAlpha.length < 2) { thisAlpha = '0' + thisAlpha; } while (thisAlpha.length < 2) { thisAlpha = '0' + thisAlpha; }
color = stopColor.substr(1) + thisAlpha; color = stopColor.substr(1) + thisAlpha;
$('#' + id + '_jGraduate_stopPicker').css({left: 100, bottom: 15}).jPicker({ $('#' + id + '_jGraduate_stopPicker').css({left: 100, bottom: 15}).jPicker({
window: { title: 'Pick the start color and opacity for the gradient' }, window: {title: 'Pick the start color and opacity for the gradient'},
images: { clientPath: $settings.images.clientPath }, images: {clientPath: $settings.images.clientPath},
color: { active: color, alphaSupport: true } color: {active: color, alphaSupport: true}
}, function (color, arg2) { }, function (color, arg2) {
stopColor = color.val('hex') ? ('#' + color.val('hex')) : 'none'; stopColor = color.val('hex') ? ('#' + color.val('hex')) : 'none';
stopOpacity = color.val('a') !== null ? color.val('a') / 256 : 1; stopOpacity = color.val('a') !== null ? color.val('a') / 256 : 1;
@@ -1188,9 +1188,9 @@ export default function ($) {
colPicker.jPicker( colPicker.jPicker(
{ {
window: { title: $settings.window.pickerTitle }, window: {title: $settings.window.pickerTitle},
images: { clientPath: $settings.images.clientPath }, images: {clientPath: $settings.images.clientPath},
color: { active: color, alphaSupport: true } color: {active: color, alphaSupport: true}
}, },
function (color) { function (color) {
$this.paint.type = 'solidColor'; $this.paint.type = 'solidColor';

300
editor/jgraduate/jQuery.jPicker.js
View File

@@ -112,7 +112,7 @@ const jPicker = function ($) {
else if (locX > barW) locX = barW; else if (locX > barW) locX = barW;
if (locY < 0) locY = 0; if (locY < 0) locY = 0;
else if (locY > barH) locY = barH; else if (locY > barH) locY = barH;
val.call($this, 'xy', { x: ((locX / barW) * rangeX) + minX, y: ((locY / barH) * rangeY) + minY }); val.call($this, 'xy', {x: ((locX / barW) * rangeX) + minX, y: ((locY / barH) * rangeY) + minY});
} }
function draw () { function draw () {
const const
@@ -140,7 +140,7 @@ const jPicker = function ($) {
if (arrowH >= barH) arrowOffsetY = (barH >> 1) - (arrowH >> 1); if (arrowH >= barH) arrowOffsetY = (barH >> 1) - (arrowH >> 1);
else arrowOffsetY -= arrowH >> 1; else arrowOffsetY -= arrowH >> 1;
// set the arrow position based on these offsets // set the arrow position based on these offsets
arrow.css({ left: arrowOffsetX + 'px', top: arrowOffsetY + 'px' }); arrow.css({left: arrowOffsetX + 'px', top: arrowOffsetY + 'px'});
}, 0); }, 0);
} }
function val (name, value, context) { function val (name, value, context) {
@@ -151,7 +151,7 @@ const jPicker = function ($) {
case 'x': return x; case 'x': return x;
case 'y': return y; case 'y': return y;
case 'xy': case 'xy':
default: return { x, y }; default: return {x, y};
} }
} }
if (context != null && context === $this) return; if (context != null && context === $this) return;
@@ -197,12 +197,12 @@ const jPicker = function ($) {
switch (name.toLowerCase()) { switch (name.toLowerCase()) {
case 'minx': return minX; case 'minx': return minX;
case 'maxx': return maxX; case 'maxx': return maxX;
case 'rangex': return { minX, maxX, rangeX }; case 'rangex': return {minX, maxX, rangeX};
case 'miny': return minY; case 'miny': return minY;
case 'maxy': return maxY; case 'maxy': return maxY;
case 'rangey': return { minY, maxY, rangeY }; case 'rangey': return {minY, maxY, rangeY};
case 'all': case 'all':
default: return { minX, maxX, rangeX, minY, maxY, rangeY }; default: return {minX, maxX, rangeX, minY, maxY, rangeY};
} }
} }
let // changed = false, let // changed = false,
@@ -586,9 +586,9 @@ const jPicker = function ($) {
if (name === undefined || name == null || name === '') name = 'all'; if (name === undefined || name == null || name === '') name = 'all';
if (r == null) return null; if (r == null) return null;
switch (name.toLowerCase()) { switch (name.toLowerCase()) {
case 'ahex': return ColorMethods.rgbaToHex({ r, g, b, a }); case 'ahex': return ColorMethods.rgbaToHex({r, g, b, a});
case 'hex': return val('ahex').substring(0, 6); case 'hex': return val('ahex').substring(0, 6);
case 'all': return { r, g, b, a, h, s, v, hex: val.call($this, 'hex'), ahex: val.call($this, 'ahex') }; case 'all': return {r, g, b, a, h, s, v, hex: val.call($this, 'hex'), ahex: val.call($this, 'ahex')};
default: default:
let ret = {}; let ret = {};
for (let i = 0; i < name.length; i++) { for (let i = 0; i < name.length; i++) {
@@ -666,7 +666,7 @@ const jPicker = function ($) {
case 'ahex': case 'ahex':
case 'hex': case 'hex':
const ret = ColorMethods.hexToRgba((value && (value.ahex || value.hex)) || value || 'none'); const ret = ColorMethods.hexToRgba((value && (value.ahex || value.hex)) || value || 'none');
val.call($this, 'rgba', { r: ret.r, g: ret.g, b: ret.b, a: name === 'ahex' ? ret.a : a != null ? a : 255 }, context); val.call($this, 'rgba', {r: ret.r, g: ret.g, b: ret.b, a: name === 'ahex' ? ret.a : a != null ? a : 255}, context);
break; break;
default: default:
if (value && (value.ahex != null || value.hex != null)) { if (value && (value.ahex != null || value.hex != null)) {
@@ -766,13 +766,13 @@ const jPicker = function ($) {
r = r || 0; r = r || 0;
g = g || 0; g = g || 0;
b = b || 0; b = b || 0;
const ret = ColorMethods.rgbToHsv({ r, g, b }); const ret = ColorMethods.rgbToHsv({r, g, b});
({h, s, v} = ret); ({h, s, v} = ret);
} else if (hsv) { } else if (hsv) {
h = h || 0; h = h || 0;
s = s != null ? s : 100; s = s != null ? s : 100;
v = v != null ? v : 100; v = v != null ? v : 100;
const ret = ColorMethods.hsvToRgb({ h, s, v }); const ret = ColorMethods.hsvToRgb({h, s, v});
({r, g, b} = ret); ({r, g, b} = ret);
} }
a = a != null ? a : 255; a = a != null ? a : 255;
@@ -843,7 +843,7 @@ const jPicker = function ($) {
* @returns {module:jPicker.RGBA} * @returns {module:jPicker.RGBA}
*/ */
hexToRgba (hex) { hexToRgba (hex) {
if (hex === '' || hex === 'none') return { r: null, g: null, b: null, a: null }; if (hex === '' || hex === 'none') return {r: null, g: null, b: null, a: null};
hex = this.validateHex(hex); hex = this.validateHex(hex);
let r = '00', g = '00', b = '00', a = '255'; let r = '00', g = '00', b = '00', a = '255';
if (hex.length === 6) hex += 'ff'; if (hex.length === 6) hex += 'ff';
@@ -911,7 +911,7 @@ const jPicker = function ($) {
* @returns {module:jPicker.HSV} * @returns {module:jPicker.HSV}
*/ */
rgbToHsv (rgb) { rgbToHsv (rgb) {
const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255, hsv = { h: 0, s: 0, v: 0 }; const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255, hsv = {h: 0, s: 0, v: 0};
let min = 0, max = 0; let min = 0, max = 0;
if (r >= g && r >= b) { if (r >= g && r >= b) {
max = r; max = r;
@@ -1026,11 +1026,11 @@ const jPicker = function ($) {
} }
}); });
if ($($this).val() === '') { if ($($this).val() === '') {
settings.color.active = new Color({ hex: null }); settings.color.active = new Color({hex: null});
settings.color.current = new Color({ hex: null }); settings.color.current = new Color({hex: null});
} else if (ColorMethods.validateHex($($this).val())) { } else if (ColorMethods.validateHex($($this).val())) {
settings.color.active = new Color({ hex: $($this).val(), a: settings.color.active.val('a') }); settings.color.active = new Color({hex: $($this).val(), a: settings.color.active.val('a')});
settings.color.current = new Color({ hex: $($this).val(), a: settings.color.active.val('a') }); settings.color.current = new Color({hex: $($this).val(), a: settings.color.active.val('a')});
} }
} }
if (settings.window.expandable) { if (settings.window.expandable) {
@@ -1071,10 +1071,10 @@ const jPicker = function ($) {
setImgLoc.call($this, colorBarL6, 260); setImgLoc.call($this, colorBarL6, 260);
setAlpha.call($this, colorBarL6, 100); setAlpha.call($this, colorBarL6, 100);
}, 0); }, 0);
colorMap.range('all', { minX: 0, maxX: 100, minY: 0, maxY: 100 }); colorMap.range('all', {minX: 0, maxX: 100, minY: 0, maxY: 100});
colorBar.range('rangeY', { minY: 0, maxY: 360 }); colorBar.range('rangeY', {minY: 0, maxY: 360});
if (active.val('ahex') == null) break; if (active.val('ahex') == null) break;
colorMap.val('xy', { x: active.val('s'), y: 100 - active.val('v') }, colorMap); colorMap.val('xy', {x: active.val('s'), y: 100 - active.val('v')}, colorMap);
colorBar.val('y', 360 - active.val('h'), colorBar); colorBar.val('y', 360 - active.val('h'), colorBar);
break; break;
case 's': case 's':
@@ -1087,10 +1087,10 @@ const jPicker = function ($) {
setImgLoc.call($this, colorBarL6, 260); setImgLoc.call($this, colorBarL6, 260);
setAlpha.call($this, colorBarL6, 100); setAlpha.call($this, colorBarL6, 100);
}, 0); }, 0);
colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 }); colorMap.range('all', {minX: 0, maxX: 360, minY: 0, maxY: 100});
colorBar.range('rangeY', { minY: 0, maxY: 100 }); colorBar.range('rangeY', {minY: 0, maxY: 100});
if (active.val('ahex') == null) break; if (active.val('ahex') == null) break;
colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap); colorMap.val('xy', {x: active.val('h'), y: 100 - active.val('v')}, colorMap);
colorBar.val('y', 100 - active.val('s'), colorBar); colorBar.val('y', 100 - active.val('s'), colorBar);
break; break;
case 'v': case 'v':
@@ -1105,37 +1105,37 @@ const jPicker = function ($) {
setImgLoc.call($this, colorBarL6, 260); setImgLoc.call($this, colorBarL6, 260);
setAlpha.call($this, colorBarL6, 100); setAlpha.call($this, colorBarL6, 100);
}, 0); }, 0);
colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 }); colorMap.range('all', {minX: 0, maxX: 360, minY: 0, maxY: 100});
colorBar.range('rangeY', { minY: 0, maxY: 100 }); colorBar.range('rangeY', {minY: 0, maxY: 100});
if (active.val('ahex') == null) break; if (active.val('ahex') == null) break;
colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('s') }, colorMap); colorMap.val('xy', {x: active.val('h'), y: 100 - active.val('s')}, colorMap);
colorBar.val('y', 100 - active.val('v'), colorBar); colorBar.val('y', 100 - active.val('v'), colorBar);
break; break;
case 'r': case 'r':
rgbMap = -1040; rgbMap = -1040;
rgbBar = -780; rgbBar = -780;
colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 }); colorMap.range('all', {minX: 0, maxX: 255, minY: 0, maxY: 255});
colorBar.range('rangeY', { minY: 0, maxY: 255 }); colorBar.range('rangeY', {minY: 0, maxY: 255});
if (active.val('ahex') == null) break; if (active.val('ahex') == null) break;
colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('g') }, colorMap); colorMap.val('xy', {x: active.val('b'), y: 255 - active.val('g')}, colorMap);
colorBar.val('y', 255 - active.val('r'), colorBar); colorBar.val('y', 255 - active.val('r'), colorBar);
break; break;
case 'g': case 'g':
rgbMap = -1560; rgbMap = -1560;
rgbBar = -1820; rgbBar = -1820;
colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 }); colorMap.range('all', {minX: 0, maxX: 255, minY: 0, maxY: 255});
colorBar.range('rangeY', { minY: 0, maxY: 255 }); colorBar.range('rangeY', {minY: 0, maxY: 255});
if (active.val('ahex') == null) break; if (active.val('ahex') == null) break;
colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('r') }, colorMap); colorMap.val('xy', {x: active.val('b'), y: 255 - active.val('r')}, colorMap);
colorBar.val('y', 255 - active.val('g'), colorBar); colorBar.val('y', 255 - active.val('g'), colorBar);
break; break;
case 'b': case 'b':
rgbMap = -2080; rgbMap = -2080;
rgbBar = -2860; rgbBar = -2860;
colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 }); colorMap.range('all', {minX: 0, maxX: 255, minY: 0, maxY: 255});
colorBar.range('rangeY', { minY: 0, maxY: 255 }); colorBar.range('rangeY', {minY: 0, maxY: 255});
if (active.val('ahex') == null) break; if (active.val('ahex') == null) break;
colorMap.val('xy', { x: active.val('r'), y: 255 - active.val('g') }, colorMap); colorMap.val('xy', {x: active.val('r'), y: 255 - active.val('g')}, colorMap);
colorBar.val('y', 255 - active.val('b'), colorBar); colorBar.val('y', 255 - active.val('b'), colorBar);
break; break;
case 'a': case 'a':
@@ -1149,10 +1149,10 @@ const jPicker = function ($) {
setImgLoc.call($this, colorBarL6, 0); setImgLoc.call($this, colorBarL6, 0);
setAlpha.call($this, colorBarL6, 100); setAlpha.call($this, colorBarL6, 100);
}, 0); }, 0);
colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 }); colorMap.range('all', {minX: 0, maxX: 360, minY: 0, maxY: 100});
colorBar.range('rangeY', { minY: 0, maxY: 255 }); colorBar.range('rangeY', {minY: 0, maxY: 255});
if (active.val('ahex') == null) break; if (active.val('ahex') == null) break;
colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap); colorMap.val('xy', {x: active.val('h'), y: 100 - active.val('v')}, colorMap);
colorBar.val('y', 255 - active.val('a'), colorBar); colorBar.val('y', 255 - active.val('a'), colorBar);
break; break;
default: default:
@@ -1211,23 +1211,23 @@ const jPicker = function ($) {
const xy = ui.val('all'); const xy = ui.val('all');
switch (settings.color.mode) { switch (settings.color.mode) {
case 'h': case 'h':
active.val('sv', { s: xy.x, v: 100 - xy.y }, context); active.val('sv', {s: xy.x, v: 100 - xy.y}, context);
break; break;
case 's': case 's':
case 'a': case 'a':
active.val('hv', { h: xy.x, v: 100 - xy.y }, context); active.val('hv', {h: xy.x, v: 100 - xy.y}, context);
break; break;
case 'v': case 'v':
active.val('hs', { h: xy.x, s: 100 - xy.y }, context); active.val('hs', {h: xy.x, s: 100 - xy.y}, context);
break; break;
case 'r': case 'r':
active.val('gb', { g: 255 - xy.y, b: xy.x }, context); active.val('gb', {g: 255 - xy.y, b: xy.x}, context);
break; break;
case 'g': case 'g':
active.val('rb', { r: 255 - xy.y, b: xy.x }, context); active.val('rb', {r: 255 - xy.y, b: xy.x}, context);
break; break;
case 'b': case 'b':
active.val('rg', { r: xy.x, g: 255 - xy.y }, context); active.val('rg', {r: xy.x, g: 255 - xy.y}, context);
break; break;
} }
} }
@@ -1237,22 +1237,22 @@ const jPicker = function ($) {
if (context !== colorBar && active.val() == null) return; if (context !== colorBar && active.val() == null) return;
switch (settings.color.mode) { switch (settings.color.mode) {
case 'h': case 'h':
active.val('h', { h: 360 - ui.val('y') }, context); active.val('h', {h: 360 - ui.val('y')}, context);
break; break;
case 's': case 's':
active.val('s', { s: 100 - ui.val('y') }, context); active.val('s', {s: 100 - ui.val('y')}, context);
break; break;
case 'v': case 'v':
active.val('v', { v: 100 - ui.val('y') }, context); active.val('v', {v: 100 - ui.val('y')}, context);
break; break;
case 'r': case 'r':
active.val('r', { r: 255 - ui.val('y') }, context); active.val('r', {r: 255 - ui.val('y')}, context);
break; break;
case 'g': case 'g':
active.val('g', { g: 255 - ui.val('y') }, context); active.val('g', {g: 255 - ui.val('y')}, context);
break; break;
case 'b': case 'b':
active.val('b', { b: 255 - ui.val('y') }, context); active.val('b', {b: 255 - ui.val('y')}, context);
break; break;
case 'a': case 'a':
active.val('a', 255 - ui.val('y'), context); active.val('a', 255 - ui.val('y'), context);
@@ -1265,28 +1265,28 @@ const jPicker = function ($) {
switch (settings.color.mode) { switch (settings.color.mode) {
case 'h': case 'h':
const sv = ui.val('sv'); const sv = ui.val('sv');
colorMap.val('xy', { x: sv != null ? sv.s : 100, y: 100 - (sv != null ? sv.v : 100) }, context); colorMap.val('xy', {x: sv != null ? sv.s : 100, y: 100 - (sv != null ? sv.v : 100)}, context);
break; break;
case 's': case 's':
case 'a': case 'a':
const hv = ui.val('hv'); const hv = ui.val('hv');
colorMap.val('xy', { x: (hv && hv.h) || 0, y: 100 - (hv != null ? hv.v : 100) }, context); colorMap.val('xy', {x: (hv && hv.h) || 0, y: 100 - (hv != null ? hv.v : 100)}, context);
break; break;
case 'v': case 'v':
const hs = ui.val('hs'); const hs = ui.val('hs');
colorMap.val('xy', { x: (hs && hs.h) || 0, y: 100 - (hs != null ? hs.s : 100) }, context); colorMap.val('xy', {x: (hs && hs.h) || 0, y: 100 - (hs != null ? hs.s : 100)}, context);
break; break;
case 'r': case 'r':
const bg = ui.val('bg'); const bg = ui.val('bg');
colorMap.val('xy', { x: (bg && bg.b) || 0, y: 255 - ((bg && bg.g) || 0) }, context); colorMap.val('xy', {x: (bg && bg.b) || 0, y: 255 - ((bg && bg.g) || 0)}, context);
break; break;
case 'g': case 'g':
const br = ui.val('br'); const br = ui.val('br');
colorMap.val('xy', { x: (br && br.b) || 0, y: 255 - ((br && br.r) || 0) }, context); colorMap.val('xy', {x: (br && br.b) || 0, y: 255 - ((br && br.r) || 0)}, context);
break; break;
case 'b': case 'b':
const rg = ui.val('rg'); const rg = ui.val('rg');
colorMap.val('xy', { x: (rg && rg.r) || 0, y: 255 - ((rg && rg.g) || 0) }, context); colorMap.val('xy', {x: (rg && rg.r) || 0, y: 255 - ((rg && rg.g) || 0)}, context);
break; break;
} }
} }
@@ -1322,14 +1322,14 @@ const jPicker = function ($) {
function updatePreview (ui) { function updatePreview (ui) {
try { try {
const all = ui.val('all'); const all = ui.val('all');
activePreview.css({ backgroundColor: (all && '#' + all.hex) || 'transparent' }); activePreview.css({backgroundColor: (all && '#' + all.hex) || 'transparent'});
setAlpha.call($this, activePreview, (all && Math.precision((all.a * 100) / 255, 4)) || 0); setAlpha.call($this, activePreview, (all && Math.precision((all.a * 100) / 255, 4)) || 0);
} catch (e) { } } catch (e) { }
} }
function updateMapVisuals (ui) { function updateMapVisuals (ui) {
switch (settings.color.mode) { switch (settings.color.mode) {
case 'h': case 'h':
setBG.call($this, colorMapDiv, new Color({ h: ui.val('h') || 0, s: 100, v: 100 }).val('hex')); setBG.call($this, colorMapDiv, new Color({h: ui.val('h') || 0, s: 100, v: 100}).val('hex'));
break; break;
case 's': case 's':
case 'a': case 'a':
@@ -1361,14 +1361,14 @@ const jPicker = function ($) {
break; break;
case 's': case 's':
const hva = ui.val('hva'), const hva = ui.val('hva'),
saturatedColor = new Color({ h: (hva && hva.h) || 0, s: 100, v: hva != null ? hva.v : 100 }); saturatedColor = new Color({h: (hva && hva.h) || 0, s: 100, v: hva != null ? hva.v : 100});
setBG.call($this, colorBarDiv, saturatedColor.val('hex')); setBG.call($this, colorBarDiv, saturatedColor.val('hex'));
setAlpha.call($this, colorBarL2, 100 - (hva != null ? hva.v : 100)); setAlpha.call($this, colorBarL2, 100 - (hva != null ? hva.v : 100));
setAlpha.call($this, colorBarL5, Math.precision(((255 - ((hva && hva.a) || 0)) * 100) / 255, 4)); setAlpha.call($this, colorBarL5, Math.precision(((255 - ((hva && hva.a) || 0)) * 100) / 255, 4));
break; break;
case 'v': case 'v':
const hsa = ui.val('hsa'), const hsa = ui.val('hsa'),
valueColor = new Color({ h: (hsa && hsa.h) || 0, s: hsa != null ? hsa.s : 100, v: 100 }); valueColor = new Color({h: (hsa && hsa.h) || 0, s: hsa != null ? hsa.s : 100, v: 100});
setBG.call($this, colorBarDiv, valueColor.val('hex')); setBG.call($this, colorBarDiv, valueColor.val('hex'));
setAlpha.call($this, colorBarL5, Math.precision(((255 - ((hsa && hsa.a) || 0)) * 100) / 255, 4)); setAlpha.call($this, colorBarL5, Math.precision(((255 - ((hsa && hsa.a) || 0)) * 100) / 255, 4));
break; break;
@@ -1408,32 +1408,32 @@ const jPicker = function ($) {
function setImg (img, src) { function setImg (img, src) {
if (isLessThanIE7 && (src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png'))) { if (isLessThanIE7 && (src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png'))) {
img.attr('pngSrc', src); img.attr('pngSrc', src);
img.css({ backgroundImage: 'none', filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' }); img.css({backgroundImage: 'none', filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')'});
} else img.css({ backgroundImage: 'url(\'' + src + '\')' }); } else img.css({backgroundImage: 'url(\'' + src + '\')'});
} }
function setImgLoc (img, y) { function setImgLoc (img, y) {
img.css({ top: y + 'px' }); img.css({top: y + 'px'});
} }
function setAlpha (obj, alpha) { function setAlpha (obj, alpha) {
obj.css({ visibility: alpha > 0 ? 'visible' : 'hidden' }); obj.css({visibility: alpha > 0 ? 'visible' : 'hidden'});
if (alpha > 0 && alpha < 100) { if (alpha > 0 && alpha < 100) {
if (isLessThanIE7) { if (isLessThanIE7) {
const src = obj.attr('pngSrc'); const src = obj.attr('pngSrc');
if (src != null && ( if (src != null && (
src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png') src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png')
)) { )) {
obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')' }); obj.css({filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')'});
} else obj.css({ opacity: Math.precision(alpha / 100, 4) }); } else obj.css({opacity: Math.precision(alpha / 100, 4)});
} else obj.css({ opacity: Math.precision(alpha / 100, 4) }); } else obj.css({opacity: Math.precision(alpha / 100, 4)});
} else if (alpha === 0 || alpha === 100) { } else if (alpha === 0 || alpha === 100) {
if (isLessThanIE7) { if (isLessThanIE7) {
const src = obj.attr('pngSrc'); const src = obj.attr('pngSrc');
if (src != null && ( if (src != null && (
src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png') src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png')
)) { )) {
obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' }); obj.css({filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')'});
} else obj.css({ opacity: '' }); } else obj.css({opacity: ''});
} else obj.css({ opacity: '' }); } else obj.css({opacity: ''});
} }
} }
// revert color to original color when opened // revert color to original color when opened
@@ -1466,13 +1466,13 @@ const jPicker = function ($) {
} }
function currentColorChanged (ui, context) { function currentColorChanged (ui, context) {
const hex = ui.val('hex'); const hex = ui.val('hex');
currentPreview.css({ backgroundColor: (hex && '#' + hex) || 'transparent' }); currentPreview.css({backgroundColor: (hex && '#' + hex) || 'transparent'});
setAlpha.call($this, currentPreview, Math.precision(((ui.val('a') || 0) * 100) / 255, 4)); setAlpha.call($this, currentPreview, Math.precision(((ui.val('a') || 0) * 100) / 255, 4));
} }
function expandableColorChanged (ui, context) { function expandableColorChanged (ui, context) {
const hex = ui.val('hex'); const hex = ui.val('hex');
const va = ui.val('va'); const va = ui.val('va');
iconColor.css({ backgroundColor: (hex && '#' + hex) || 'transparent' }); iconColor.css({backgroundColor: (hex && '#' + hex) || 'transparent'});
setAlpha.call($this, iconAlpha, Math.precision(((255 - ((va && va.a) || 0)) * 100) / 255, 4)); setAlpha.call($this, iconAlpha, Math.precision(((255 - ((va && va.a) || 0)) * 100) / 255, 4));
if (settings.window.bindToInput && settings.window.updateInputColor) { if (settings.window.bindToInput && settings.window.updateInputColor) {
settings.window.input.css({ settings.window.input.css({
@@ -1493,8 +1493,8 @@ const jPicker = function ($) {
e.preventDefault(); // prevent attempted dragging of the column e.preventDefault(); // prevent attempted dragging of the column
} }
function documentMouseMove (e) { function documentMouseMove (e) {
container.css({ left: elementStartX - (pageStartX - e.pageX) + 'px', top: elementStartY - (pageStartY - e.pageY) + 'px' }); container.css({left: elementStartX - (pageStartX - e.pageX) + 'px', top: elementStartY - (pageStartY - e.pageY) + 'px'});
if (settings.window.expandable && !$.support.boxModel) container.prev().css({ left: container.css('left'), top: container.css('top') }); if (settings.window.expandable && !$.support.boxModel) container.prev().css({left: container.css('left'), top: container.css('top')});
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
return false; return false;
@@ -1538,7 +1538,7 @@ const jPicker = function ($) {
} }
function hide () { function hide () {
function removeIFrame () { function removeIFrame () {
if (settings.window.expandable) container.css({ zIndex: 10 }); if (settings.window.expandable) container.css({zIndex: 10});
if (!settings.window.expandable || $.support.boxModel) return; if (!settings.window.expandable || $.support.boxModel) return;
container.prev().remove(); container.prev().remove();
} }
@@ -1657,8 +1657,8 @@ const jPicker = function ($) {
const hex = all != null ? all.hex : null, const hex = all != null ? all.hex : null,
preview = tbody.find('.Preview'), preview = tbody.find('.Preview'),
button = tbody.find('.Button'); button = tbody.find('.Button');
activePreview = preview.find('.Active:first').css({ backgroundColor: (hex && '#' + hex) || 'transparent' }); activePreview = preview.find('.Active:first').css({backgroundColor: (hex && '#' + hex) || 'transparent'});
currentPreview = preview.find('.Current:first').css({ backgroundColor: (hex && '#' + hex) || 'transparent' }).bind('click', currentClicked); currentPreview = preview.find('.Current:first').css({backgroundColor: (hex && '#' + hex) || 'transparent'}).bind('click', currentClicked);
setAlpha.call($this, currentPreview, Math.precision(color.current.val('a') * 100) / 255, 4); setAlpha.call($this, currentPreview, Math.precision(color.current.val('a') * 100) / 255, 4);
okButton = button.find('.Ok:first').bind('click', okClicked); okButton = button.find('.Ok:first').bind('click', okClicked);
cancelButton = button.find('.Cancel:first').bind('click', cancelClicked); cancelButton = button.find('.Cancel:first').bind('click', cancelClicked);
@@ -1681,7 +1681,7 @@ const jPicker = function ($) {
let html = ''; let html = '';
for (let i = 0; i < color.quickList.length; i++) { for (let i = 0; i < color.quickList.length; i++) {
/* if default colors are hex strings, change them to color objects */ /* if default colors are hex strings, change them to color objects */
if ((typeof (color.quickList[i])).toString().toLowerCase() === 'string') color.quickList[i] = new Color({ hex: color.quickList[i] }); if ((typeof (color.quickList[i])).toString().toLowerCase() === 'string') color.quickList[i] = new Color({hex: color.quickList[i]});
const alpha = color.quickList[i].val('a'); const alpha = color.quickList[i].val('a');
let ahex = color.quickList[i].val('ahex'); let ahex = color.quickList[i].val('ahex');
if (!win.alphaSupport && ahex) ahex = ahex.substring(0, 6) + 'ff'; if (!win.alphaSupport && ahex) ahex = ahex.substring(0, 6) + 'ff';
@@ -1700,7 +1700,7 @@ const jPicker = function ($) {
// bind to input // bind to input
if (win.expandable) { if (win.expandable) {
$this.icon = popup.parents('.Icon:first'); $this.icon = popup.parents('.Icon:first');
iconColor = $this.icon.find('.Color:first').css({ backgroundColor: (hex && '#' + hex) || 'transparent' }); iconColor = $this.icon.find('.Color:first').css({backgroundColor: (hex && '#' + hex) || 'transparent'});
iconAlpha = $this.icon.find('.Alpha:first'); iconAlpha = $this.icon.find('.Alpha:first');
setImg.call($this, iconAlpha, images.clientPath + 'bar-opacity.png'); setImg.call($this, iconAlpha, images.clientPath + 'bar-opacity.png');
setAlpha.call($this, iconAlpha, Math.precision(((255 - (all != null ? all.a : 0)) * 100) / 255, 4)); setAlpha.call($this, iconAlpha, Math.precision(((255 - (all != null ? all.a : 0)) * 100) / 255, 4));
@@ -1937,77 +1937,77 @@ const jPicker = function ($) {
mode: 'h', mode: 'h',
active: new Color({ahex: '#ffcc00ff'}), active: new Color({ahex: '#ffcc00ff'}),
quickList: [ quickList: [
new Color({ h: 360, s: 33, v: 100 }), new Color({h: 360, s: 33, v: 100}),
new Color({ h: 360, s: 66, v: 100 }), new Color({h: 360, s: 66, v: 100}),
new Color({ h: 360, s: 100, v: 100 }), new Color({h: 360, s: 100, v: 100}),
new Color({ h: 360, s: 100, v: 75 }), new Color({h: 360, s: 100, v: 75}),
new Color({ h: 360, s: 100, v: 50 }), new Color({h: 360, s: 100, v: 50}),
new Color({ h: 180, s: 0, v: 100 }), new Color({h: 180, s: 0, v: 100}),
new Color({ h: 30, s: 33, v: 100 }), new Color({h: 30, s: 33, v: 100}),
new Color({ h: 30, s: 66, v: 100 }), new Color({h: 30, s: 66, v: 100}),
new Color({ h: 30, s: 100, v: 100 }), new Color({h: 30, s: 100, v: 100}),
new Color({ h: 30, s: 100, v: 75 }), new Color({h: 30, s: 100, v: 75}),
new Color({ h: 30, s: 100, v: 50 }), new Color({h: 30, s: 100, v: 50}),
new Color({ h: 180, s: 0, v: 90 }), new Color({h: 180, s: 0, v: 90}),
new Color({ h: 60, s: 33, v: 100 }), new Color({h: 60, s: 33, v: 100}),
new Color({ h: 60, s: 66, v: 100 }), new Color({h: 60, s: 66, v: 100}),
new Color({ h: 60, s: 100, v: 100 }), new Color({h: 60, s: 100, v: 100}),
new Color({ h: 60, s: 100, v: 75 }), new Color({h: 60, s: 100, v: 75}),
new Color({ h: 60, s: 100, v: 50 }), new Color({h: 60, s: 100, v: 50}),
new Color({ h: 180, s: 0, v: 80 }), new Color({h: 180, s: 0, v: 80}),
new Color({ h: 90, s: 33, v: 100 }), new Color({h: 90, s: 33, v: 100}),
new Color({ h: 90, s: 66, v: 100 }), new Color({h: 90, s: 66, v: 100}),
new Color({ h: 90, s: 100, v: 100 }), new Color({h: 90, s: 100, v: 100}),
new Color({ h: 90, s: 100, v: 75 }), new Color({h: 90, s: 100, v: 75}),
new Color({ h: 90, s: 100, v: 50 }), new Color({h: 90, s: 100, v: 50}),
new Color({ h: 180, s: 0, v: 70 }), new Color({h: 180, s: 0, v: 70}),
new Color({ h: 120, s: 33, v: 100 }), new Color({h: 120, s: 33, v: 100}),
new Color({ h: 120, s: 66, v: 100 }), new Color({h: 120, s: 66, v: 100}),
new Color({ h: 120, s: 100, v: 100 }), new Color({h: 120, s: 100, v: 100}),
new Color({ h: 120, s: 100, v: 75 }), new Color({h: 120, s: 100, v: 75}),
new Color({ h: 120, s: 100, v: 50 }), new Color({h: 120, s: 100, v: 50}),
new Color({ h: 180, s: 0, v: 60 }), new Color({h: 180, s: 0, v: 60}),
new Color({ h: 150, s: 33, v: 100 }), new Color({h: 150, s: 33, v: 100}),
new Color({ h: 150, s: 66, v: 100 }), new Color({h: 150, s: 66, v: 100}),
new Color({ h: 150, s: 100, v: 100 }), new Color({h: 150, s: 100, v: 100}),
new Color({ h: 150, s: 100, v: 75 }), new Color({h: 150, s: 100, v: 75}),
new Color({ h: 150, s: 100, v: 50 }), new Color({h: 150, s: 100, v: 50}),
new Color({ h: 180, s: 0, v: 50 }), new Color({h: 180, s: 0, v: 50}),
new Color({ h: 180, s: 33, v: 100 }), new Color({h: 180, s: 33, v: 100}),
new Color({ h: 180, s: 66, v: 100 }), new Color({h: 180, s: 66, v: 100}),
new Color({ h: 180, s: 100, v: 100 }), new Color({h: 180, s: 100, v: 100}),
new Color({ h: 180, s: 100, v: 75 }), new Color({h: 180, s: 100, v: 75}),
new Color({ h: 180, s: 100, v: 50 }), new Color({h: 180, s: 100, v: 50}),
new Color({ h: 180, s: 0, v: 40 }), new Color({h: 180, s: 0, v: 40}),
new Color({ h: 210, s: 33, v: 100 }), new Color({h: 210, s: 33, v: 100}),
new Color({ h: 210, s: 66, v: 100 }), new Color({h: 210, s: 66, v: 100}),
new Color({ h: 210, s: 100, v: 100 }), new Color({h: 210, s: 100, v: 100}),
new Color({ h: 210, s: 100, v: 75 }), new Color({h: 210, s: 100, v: 75}),
new Color({ h: 210, s: 100, v: 50 }), new Color({h: 210, s: 100, v: 50}),
new Color({ h: 180, s: 0, v: 30 }), new Color({h: 180, s: 0, v: 30}),
new Color({ h: 240, s: 33, v: 100 }), new Color({h: 240, s: 33, v: 100}),
new Color({ h: 240, s: 66, v: 100 }), new Color({h: 240, s: 66, v: 100}),
new Color({ h: 240, s: 100, v: 100 }), new Color({h: 240, s: 100, v: 100}),
new Color({ h: 240, s: 100, v: 75 }), new Color({h: 240, s: 100, v: 75}),
new Color({ h: 240, s: 100, v: 50 }), new Color({h: 240, s: 100, v: 50}),
new Color({ h: 180, s: 0, v: 20 }), new Color({h: 180, s: 0, v: 20}),
new Color({ h: 270, s: 33, v: 100 }), new Color({h: 270, s: 33, v: 100}),
new Color({ h: 270, s: 66, v: 100 }), new Color({h: 270, s: 66, v: 100}),
new Color({ h: 270, s: 100, v: 100 }), new Color({h: 270, s: 100, v: 100}),
new Color({ h: 270, s: 100, v: 75 }), new Color({h: 270, s: 100, v: 75}),
new Color({ h: 270, s: 100, v: 50 }), new Color({h: 270, s: 100, v: 50}),
new Color({ h: 180, s: 0, v: 10 }), new Color({h: 180, s: 0, v: 10}),
new Color({ h: 300, s: 33, v: 100 }), new Color({h: 300, s: 33, v: 100}),
new Color({ h: 300, s: 66, v: 100 }), new Color({h: 300, s: 66, v: 100}),
new Color({ h: 300, s: 100, v: 100 }), new Color({h: 300, s: 100, v: 100}),
new Color({ h: 300, s: 100, v: 75 }), new Color({h: 300, s: 100, v: 75}),
new Color({ h: 300, s: 100, v: 50 }), new Color({h: 300, s: 100, v: 50}),
new Color({ h: 180, s: 0, v: 0 }), new Color({h: 180, s: 0, v: 0}),
new Color({ h: 330, s: 33, v: 100 }), new Color({h: 330, s: 33, v: 100}),
new Color({ h: 330, s: 66, v: 100 }), new Color({h: 330, s: 66, v: 100}),
new Color({ h: 330, s: 100, v: 100 }), new Color({h: 330, s: 100, v: 100}),
new Color({ h: 330, s: 100, v: 75 }), new Color({h: 330, s: 100, v: 75}),
new Color({ h: 330, s: 100, v: 50 }), new Color({h: 330, s: 100, v: 50}),
new Color() new Color()
] ]
}, },

2
editor/jspdf/jspdf.min.js vendored
View File

File diff suppressed because one or more lines are too long

24
editor/jspdf/jspdf.plugin.svgToPdf.js
View File

@@ -179,13 +179,31 @@ const svgElementToPdf = function (element, pdf, options) {
? parseInt(node.getAttribute('font-size'), 10) ? parseInt(node.getAttribute('font-size'), 10)
: 16; : 16;
const box = node.getBBox(); const getWidth = (node) => {
let box;
try {
box = node.getBBox(); // Firefox on MacOS will raise error here
} catch (err) {
// copy and append to body so that getBBox is available
const nodeCopy = node.cloneNode(true);
const svg = node.ownerSVGElement.cloneNode(false);
svg.appendChild(nodeCopy);
document.body.appendChild(svg);
try {
box = nodeCopy.getBBox();
} catch (err) {
box = {width: 0};
}
document.body.removeChild(svg);
}
return box.width;
};
// FIXME: use more accurate positioning!! // FIXME: use more accurate positioning!!
let x, y, xOffset = 0; let x, y, xOffset = 0;
if (node.hasAttribute('text-anchor')) { if (node.hasAttribute('text-anchor')) {
switch (node.getAttribute('text-anchor')) { switch (node.getAttribute('text-anchor')) {
case 'end': xOffset = box.width; break; case 'end': xOffset = getWidth(node); break;
case 'middle': xOffset = box.width / 2; break; case 'middle': xOffset = getWidth(node) / 2; break;
case 'start': break; case 'start': break;
case 'default': node.setAttribute('text-anchor', 'start'); break; case 'default': node.setAttribute('text-anchor', 'start'); break;
} }

14
editor/locale/lang.en.js
View File

@@ -124,10 +124,10 @@ export default {
set_link_url: 'Set link URL (leave empty to remove)', set_link_url: 'Set link URL (leave empty to remove)',
to_path: 'Convert to Path', to_path: 'Convert to Path',
reorient_path: 'Reorient path', reorient_path: 'Reorient path',
ungroup: 'Ungroup Elements [G]', ungroup: 'Ungroup Elements',
docprops: 'Document Properties [D]', docprops: 'Document Properties [D]',
move_bottom: 'Send to Back [ Ctrl+Shift+[ ]', move_bottom: 'Send to Back',
move_top: 'Bring to Front [ Ctrl+Shift+] ]', move_top: 'Bring to Front',
node_clone: 'Clone Node', node_clone: 'Clone Node',
node_delete: 'Delete Node', node_delete: 'Delete Node',
node_link: 'Link Control Points', node_link: 'Link Control Points',
@@ -140,10 +140,10 @@ export default {
paste_in_place: 'Paste in Place', paste_in_place: 'Paste in Place',
delete: 'Delete', delete: 'Delete',
group: 'Group', group: 'Group',
move_front: 'Bring to Front [ Ctrl-Shift+] ]', move_front: 'Bring to Front',
move_up: 'Bring Forward [ Ctrl+] ]', move_up: 'Bring Forward',
move_down: 'Send Backward [ Ctrl+[ ]', move_down: 'Send Backward',
move_back: 'Send to Back [ Ctrl+Shift+[ ]' move_back: 'Send to Back'
}, },
layers: { layers: {
layer: 'Layer', layer: 'Layer',

10
editor/svg-editor-es.html
View File

@@ -748,17 +748,17 @@
</div> </div>
</div> </div>
<ul id="cmenu_canvas" class="contextMenu"> <ul id="cmenu_canvas" class="contextMenu">
<li><a href="#cut">Cut</a></li> <li><a href="#cut">Cut<span class="shortcut">META+X</span></a></li>
<li><a href="#copy">Copy</a></li> <li><a href="#copy">Copy<span class="shortcut">META+C</span></a></li>
<li><a href="#paste">Paste</a></li> <li><a href="#paste">Paste</a></li>
<li><a href="#paste_in_place">Paste in Place</a></li> <li><a href="#paste_in_place">Paste in Place</a></li>
<li class="separator"><a href="#delete">Delete</a></li> <li class="separator"><a href="#delete">Delete<span class="shortcut">BACKSPACE</span></a></li>
<li class="separator"><a href="#group">Group<span class="shortcut">G</span></a></li> <li class="separator"><a href="#group">Group<span class="shortcut">G</span></a></li>
<li><a href="#ungroup">Ungroup<span class="shortcut">G</span></a></li> <li><a href="#ungroup">Ungroup<span class="shortcut">G</span></a></li>
<li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">SHFT+CTRL+]</span></a></li> <li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">CTRL+SHFT+]</span></a></li>
<li><a href="#move_up">Bring Forward<span class="shortcut">CTRL+]</span></a></li> <li><a href="#move_up">Bring Forward<span class="shortcut">CTRL+]</span></a></li>
<li><a href="#move_down">Send Backward<span class="shortcut">CTRL+[</span></a></li> <li><a href="#move_down">Send Backward<span class="shortcut">CTRL+[</span></a></li>
<li><a href="#move_back">Send to Back<span class="shortcut">SHFT+CTRL+[</span></a></li> <li><a href="#move_back">Send to Back<span class="shortcut">CTRL+SHFT+[</span></a></li>
</ul> </ul>
<ul id="cmenu_layers" class="contextMenu"> <ul id="cmenu_layers" class="contextMenu">
<li><a href="#dupe">Duplicate Layer...</a></li> <li><a href="#dupe">Duplicate Layer...</a></li>

10
editor/svg-editor.html
View File

@@ -749,17 +749,17 @@
</div> </div>
</div> </div>
<ul id="cmenu_canvas" class="contextMenu"> <ul id="cmenu_canvas" class="contextMenu">
<li><a href="#cut">Cut</a></li> <li><a href="#cut">Cut<span class="shortcut">META+X</span></a></li>
<li><a href="#copy">Copy</a></li> <li><a href="#copy">Copy<span class="shortcut">META+C</span></a></li>
<li><a href="#paste">Paste</a></li> <li><a href="#paste">Paste</a></li>
<li><a href="#paste_in_place">Paste in Place</a></li> <li><a href="#paste_in_place">Paste in Place</a></li>
<li class="separator"><a href="#delete">Delete</a></li> <li class="separator"><a href="#delete">Delete<span class="shortcut">BACKSPACE</span></a></li>
<li class="separator"><a href="#group">Group<span class="shortcut">G</span></a></li> <li class="separator"><a href="#group">Group<span class="shortcut">G</span></a></li>
<li><a href="#ungroup">Ungroup<span class="shortcut">G</span></a></li> <li><a href="#ungroup">Ungroup<span class="shortcut">G</span></a></li>
<li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">SHFT+CTRL+]</span></a></li> <li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">CTRL+SHFT+]</span></a></li>
<li><a href="#move_up">Bring Forward<span class="shortcut">CTRL+]</span></a></li> <li><a href="#move_up">Bring Forward<span class="shortcut">CTRL+]</span></a></li>
<li><a href="#move_down">Send Backward<span class="shortcut">CTRL+[</span></a></li> <li><a href="#move_down">Send Backward<span class="shortcut">CTRL+[</span></a></li>
<li><a href="#move_back">Send to Back<span class="shortcut">SHFT+CTRL+[</span></a></li> <li><a href="#move_back">Send to Back<span class="shortcut">CTRL+SHFT+[</span></a></li>
</ul> </ul>
<ul id="cmenu_layers" class="contextMenu"> <ul id="cmenu_layers" class="contextMenu">
<li><a href="#dupe">Duplicate Layer...</a></li> <li><a href="#dupe">Duplicate Layer...</a></li>

30
editor/svg-editor.js
View File

@@ -2,7 +2,7 @@
import './touch.js'; import './touch.js';
import {NS} from './namespaces.js'; import {NS} from './namespaces.js';
import {isWebkit, isGecko, isIE, isMac, isTouch} from './browser.js'; import {isWebkit, isChrome, isGecko, isIE, isMac, isTouch} from './browser.js';
import * as Utils from './utilities.js'; import * as Utils from './utilities.js';
import {getTypeMap, convertUnit, isValidUnit} from './units.js'; import {getTypeMap, convertUnit, isValidUnit} from './units.js';
import { import {
@@ -3355,7 +3355,7 @@ editor.init = function () {
const getPaint = function (color, opac, type) { const getPaint = function (color, opac, type) {
// update the editor's fill paint // update the editor's fill paint
const opts = { alpha: opac }; const opts = {alpha: opac};
if (color.startsWith('url(#')) { if (color.startsWith('url(#')) {
let refElem = svgCanvas.getRefElem(color); let refElem = svgCanvas.getRefElem(color);
if (refElem) { if (refElem) {
@@ -3382,6 +3382,9 @@ editor.init = function () {
svgCanvas.bind('saved', saveHandler); svgCanvas.bind('saved', saveHandler);
svgCanvas.bind('exported', exportHandler); svgCanvas.bind('exported', exportHandler);
svgCanvas.bind('exportedPDF', function (win, data) { svgCanvas.bind('exportedPDF', function (win, data) {
if (!data.output) { // Ignore Chrome
return;
}
const {exportWindowName} = data; const {exportWindowName} = data;
if (exportWindowName) { if (exportWindowName) {
exportWindow = window.open('', exportWindowName); // A hack to get the window via JSON-able name without opening a new one exportWindow = window.open('', exportWindowName); // A hack to get the window via JSON-able name without opening a new one
@@ -4174,7 +4177,7 @@ editor.init = function () {
// 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG' // 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG'
'PNG', 'PNG',
'JPEG', 'BMP', 'WEBP', 'PDF' 'JPEG', 'BMP', 'WEBP', 'PDF'
], function (imgType) { // todo: replace hard-coded msg with uiStrings.notification. ], async function (imgType) { // todo: replace hard-coded msg with uiStrings.notification.
if (!imgType) { if (!imgType) {
return; return;
} }
@@ -4207,17 +4210,18 @@ editor.init = function () {
} }
exportWindow = window.open(popURL, exportWindowName); exportWindow = window.open(popURL, exportWindowName);
} }
const chrome = isChrome();
if (imgType === 'PDF') { if (imgType === 'PDF') {
if (!customExportPDF) { if (!customExportPDF && !chrome) {
openExportWindow(); openExportWindow();
} }
svgCanvas.exportPDF(exportWindowName); svgCanvas.exportPDF(exportWindowName, chrome ? 'save' : undefined);
} else { } else {
if (!customExportImage) { if (!customExportImage) {
openExportWindow(); openExportWindow();
} }
const quality = parseInt($('#image-slider').val(), 10) / 100; const quality = parseInt($('#image-slider').val(), 10) / 100;
svgCanvas.rasterExport(imgType, quality, exportWindowName); /* const results = */ await svgCanvas.rasterExport(imgType, quality, exportWindowName);
} }
}, function () { }, function () {
const sel = $(this); const sel = $(this);
@@ -4612,8 +4616,8 @@ editor.init = function () {
.jGraduate( .jGraduate(
{ {
paint, paint,
window: { pickerTitle: title }, window: {pickerTitle: title},
images: { clientPath: curConfig.jGraduatePath }, images: {clientPath: curConfig.jGraduatePath},
newstop: 'inverse' newstop: 'inverse'
}, },
function (p) { function (p) {
@@ -5632,7 +5636,7 @@ editor.init = function () {
} else { } else {
// bitmap handling // bitmap handling
reader = new FileReader(); reader = new FileReader();
reader.onloadend = function (e) { reader.onloadend = function ({target: {result}}) {
// let's insert the new image until we know its dimensions // let's insert the new image until we know its dimensions
const insertNewImage = function (width, height) { const insertNewImage = function (width, height) {
const newImage = svgCanvas.addSVGElementFromJson({ const newImage = svgCanvas.addSVGElementFromJson({
@@ -5646,7 +5650,7 @@ editor.init = function () {
style: 'pointer-events:inherit' style: 'pointer-events:inherit'
} }
}); });
svgCanvas.setHref(newImage, e.target.result); svgCanvas.setHref(newImage, result);
svgCanvas.selectOnly([newImage]); svgCanvas.selectOnly([newImage]);
svgCanvas.alignSelectedElements('m', 'page'); svgCanvas.alignSelectedElements('m', 'page');
svgCanvas.alignSelectedElements('c', 'page'); svgCanvas.alignSelectedElements('c', 'page');
@@ -5657,13 +5661,13 @@ editor.init = function () {
let imgWidth = 100; let imgWidth = 100;
let imgHeight = 100; let imgHeight = 100;
const img = new Image(); const img = new Image();
img.src = e.target.result;
img.style.opacity = 0; img.style.opacity = 0;
img.onload = function () { img.onload = function () {
imgWidth = img.offsetWidth; imgWidth = img.offsetWidth || img.naturalWidth || img.width;
imgHeight = img.offsetHeight; imgHeight = img.offsetHeight || img.naturalHeight || img.height;
insertNewImage(imgWidth, imgHeight); insertNewImage(imgWidth, imgHeight);
}; };
img.src = result;
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }

10
editor/svgcanvas.js
View File

@@ -76,7 +76,7 @@ if (!window.console) {
} }
if (window.opera) { if (window.opera) {
window.console.log = function (str) { opera.postError(str); }; window.console.log = function (str) { window.opera.postError(str); };
window.console.dir = function (str) {}; window.console.dir = function (str) {};
} }
@@ -3956,7 +3956,7 @@ this.rasterExport = function (imgType, quality, exportWindowName, cb) {
* Generates a PDF based on the current image, then calls "exportedPDF" with * Generates a PDF based on the current image, then calls "exportedPDF" with
* an object including the string, the data URL, and any issues found * an object including the string, the data URL, and any issues found
* @function module:svgcanvas.SvgCanvas#exportPDF * @function module:svgcanvas.SvgCanvas#exportPDF
* @param {string} exportWindowName * @param {string} exportWindowName Will also be used for the download file name here
* @param {external:jsPDF.OutputType} [outputType="dataurlstring"] * @param {external:jsPDF.OutputType} [outputType="dataurlstring"]
* @param {module:svgcanvas.PDFExportedCallback} cb * @param {module:svgcanvas.PDFExportedCallback} cb
* @fires module:svgcanvas.SvgCanvas#event:exportedPDF * @fires module:svgcanvas.SvgCanvas#event:exportedPDF
@@ -4015,7 +4015,7 @@ this.exportPDF = function (exportWindowName, outputType, cb) {
// opposed to opening a new tab // opposed to opening a new tab
outputType = outputType || 'dataurlstring'; outputType = outputType || 'dataurlstring';
const obj = {svg, issues, issueCodes, exportWindowName, outputType}; const obj = {svg, issues, issueCodes, exportWindowName, outputType};
obj.output = doc.output(outputType); obj.output = doc.output(outputType, outputType === 'save' ? (exportWindowName || 'svg.pdf') : undefined);
if (cb) { if (cb) {
cb(obj); cb(obj);
} }
@@ -5670,14 +5670,14 @@ canvas.setBlur = function (val, complete) {
} }
} else { } else {
// Not found, so create // Not found, so create
const newblur = addSVGElementFromJson({ element: 'feGaussianBlur', const newblur = addSVGElementFromJson({element: 'feGaussianBlur',
attr: { attr: {
in: 'SourceGraphic', in: 'SourceGraphic',
stdDeviation: val stdDeviation: val
} }
}); });
filter = addSVGElementFromJson({ element: 'filter', filter = addSVGElementFromJson({element: 'filter',
attr: { attr: {
id: elemId + '_blur' id: elemId + '_blur'
} }

129
editor/svgpathseg.js
View File

@@ -1,3 +1,12 @@
/* globals SVGPathSeg, SVGPathSegMovetoRel, SVGPathSegMovetoAbs,
SVGPathSegMovetoRel, SVGPathSegLinetoRel, SVGPathSegLinetoAbs,
SVGPathSegLinetoHorizontalRel, SVGPathSegLinetoHorizontalAbs,
SVGPathSegLinetoVerticalRel, SVGPathSegLinetoVerticalAbs,
SVGPathSegClosePath, SVGPathSegCurvetoCubicRel,
SVGPathSegCurvetoCubicAbs, SVGPathSegCurvetoCubicSmoothRel,
SVGPathSegCurvetoCubicSmoothAbs, SVGPathSegCurvetoQuadraticRel,
SVGPathSegCurvetoQuadraticAbs, SVGPathSegCurvetoQuadraticSmoothRel,
SVGPathSegCurvetoQuadraticSmoothAbs, SVGPathSegArcRel, SVGPathSegArcAbs */
/** /**
* SVGPathSeg API polyfill * SVGPathSeg API polyfill
* https://github.com/progers/pathseg * https://github.com/progers/pathseg
@@ -85,8 +94,8 @@ if (!('SVGPathSeg' in window)) {
clone () { return new SVGPathSegMovetoRel(undefined, this._x, this._y); } clone () { return new SVGPathSegMovetoRel(undefined, this._x, this._y); }
} }
Object.defineProperties(SVGPathSegMovetoRel.prototype, { Object.defineProperties(SVGPathSegMovetoRel.prototype, {
x: { get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true }, x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},
y: { get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true } y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true}
}); });
class SVGPathSegLinetoAbs extends SVGPathSeg { class SVGPathSegLinetoAbs extends SVGPathSeg {
@@ -100,8 +109,8 @@ if (!('SVGPathSeg' in window)) {
clone () { return new SVGPathSegLinetoAbs(undefined, this._x, this._y); } clone () { return new SVGPathSegLinetoAbs(undefined, this._x, this._y); }
} }
Object.defineProperties(SVGPathSegLinetoAbs.prototype, { Object.defineProperties(SVGPathSegLinetoAbs.prototype, {
x: { get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true }, x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},
y: { get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true } y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true}
}); });
class SVGPathSegLinetoRel extends SVGPathSeg { class SVGPathSegLinetoRel extends SVGPathSeg {
@@ -115,8 +124,8 @@ if (!('SVGPathSeg' in window)) {
clone () { return new SVGPathSegLinetoRel(undefined, this._x, this._y); } clone () { return new SVGPathSegLinetoRel(undefined, this._x, this._y); }
} }
Object.defineProperties(SVGPathSegLinetoRel.prototype, { Object.defineProperties(SVGPathSegLinetoRel.prototype, {
x: { get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true }, x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},
y: { get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true } y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true}
}); });
class SVGPathSegCurvetoCubicAbs extends SVGPathSeg { class SVGPathSegCurvetoCubicAbs extends SVGPathSeg {
@@ -134,12 +143,12 @@ if (!('SVGPathSeg' in window)) {
clone () { return new SVGPathSegCurvetoCubicAbs(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2); } clone () { return new SVGPathSegCurvetoCubicAbs(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2); }
} }
Object.defineProperties(SVGPathSegCurvetoCubicAbs.prototype, { Object.defineProperties(SVGPathSegCurvetoCubicAbs.prototype, {
x: { get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true }, x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},
y: { get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true }, y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true},
x1: { get () { return this._x1; }, set (x1) { this._x1 = x1; this._segmentChanged(); }, enumerable: true }, x1: {get () { return this._x1; }, set (x1) { this._x1 = x1; this._segmentChanged(); }, enumerable: true},
y1: { get () { return this._y1; }, set (y1) { this._y1 = y1; this._segmentChanged(); }, enumerable: true }, y1: {get () { return this._y1; }, set (y1) { this._y1 = y1; this._segmentChanged(); }, enumerable: true},
x2: { get () { return this._x2; }, set (x2) { this._x2 = x2; this._segmentChanged(); }, enumerable: true }, x2: {get () { return this._x2; }, set (x2) { this._x2 = x2; this._segmentChanged(); }, enumerable: true},
y2: { get () { return this._y2; }, set (y2) { this._y2 = y2; this._segmentChanged(); }, enumerable: true } y2: {get () { return this._y2; }, set (y2) { this._y2 = y2; this._segmentChanged(); }, enumerable: true}
}); });
class SVGPathSegCurvetoCubicRel extends SVGPathSeg { class SVGPathSegCurvetoCubicRel extends SVGPathSeg {
@@ -157,12 +166,12 @@ if (!('SVGPathSeg' in window)) {
clone () { return new SVGPathSegCurvetoCubicRel(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2); } clone () { return new SVGPathSegCurvetoCubicRel(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2); }
} }
Object.defineProperties(SVGPathSegCurvetoCubicRel.prototype, { Object.defineProperties(SVGPathSegCurvetoCubicRel.prototype, {
x: { get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true }, x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},
y: { get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true }, y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true},
x1: { get () { return this._x1; }, set (x1) { this._x1 = x1; this._segmentChanged(); }, enumerable: true }, x1: {get () { return this._x1; }, set (x1) { this._x1 = x1; this._segmentChanged(); }, enumerable: true},
y1: { get () { return this._y1; }, set (y1) { this._y1 = y1; this._segmentChanged(); }, enumerable: true }, y1: {get () { return this._y1; }, set (y1) { this._y1 = y1; this._segmentChanged(); }, enumerable: true},
x2: { get () { return this._x2; }, set (x2) { this._x2 = x2; this._segmentChanged(); }, enumerable: true }, x2: {get () { return this._x2; }, set (x2) { this._x2 = x2; this._segmentChanged(); }, enumerable: true},
y2: { get () { return this._y2; }, set (y2) { this._y2 = y2; this._segmentChanged(); }, enumerable: true } y2: {get () { return this._y2; }, set (y2) { this._y2 = y2; this._segmentChanged(); }, enumerable: true}
}); });
class SVGPathSegCurvetoQuadraticAbs extends SVGPathSeg { class SVGPathSegCurvetoQuadraticAbs extends SVGPathSeg {
@@ -178,10 +187,10 @@ if (!('SVGPathSeg' in window)) {
clone () { return new SVGPathSegCurvetoQuadraticAbs(undefined, this._x, this._y, this._x1, this._y1); } clone () { return new SVGPathSegCurvetoQuadraticAbs(undefined, this._x, this._y, this._x1, this._y1); }
} }
Object.defineProperties(SVGPathSegCurvetoQuadraticAbs.prototype, { Object.defineProperties(SVGPathSegCurvetoQuadraticAbs.prototype, {
x: { get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true }, x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},
y: { get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true }, y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true},
x1: { get () { return this._x1; }, set (x1) { this._x1 = x1; this._segmentChanged(); }, enumerable: true }, x1: {get () { return this._x1; }, set (x1) { this._x1 = x1; this._segmentChanged(); }, enumerable: true},
y1: { get () { return this._y1; }, set (y1) { this._y1 = y1; this._segmentChanged(); }, enumerable: true } y1: {get () { return this._y1; }, set (y1) { this._y1 = y1; this._segmentChanged(); }, enumerable: true}
}); });
class SVGPathSegCurvetoQuadraticRel extends SVGPathSeg { class SVGPathSegCurvetoQuadraticRel extends SVGPathSeg {
@@ -197,10 +206,10 @@ if (!('SVGPathSeg' in window)) {
clone () { return new SVGPathSegCurvetoQuadraticRel(undefined, this._x, this._y, this._x1, this._y1); } clone () { return new SVGPathSegCurvetoQuadraticRel(undefined, this._x, this._y, this._x1, this._y1); }
} }
Object.defineProperties(SVGPathSegCurvetoQuadraticRel.prototype, { Object.defineProperties(SVGPathSegCurvetoQuadraticRel.prototype, {
x: { get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true }, x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},
y: { get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true }, y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true},
x1: { get () { return this._x1; }, set (x1) { this._x1 = x1; this._segmentChanged(); }, enumerable: true }, x1: {get () { return this._x1; }, set (x1) { this._x1 = x1; this._segmentChanged(); }, enumerable: true},
y1: { get () { return this._y1; }, set (y1) { this._y1 = y1; this._segmentChanged(); }, enumerable: true } y1: {get () { return this._y1; }, set (y1) { this._y1 = y1; this._segmentChanged(); }, enumerable: true}
}); });
class SVGPathSegArcAbs extends SVGPathSeg { class SVGPathSegArcAbs extends SVGPathSeg {
@@ -219,13 +228,13 @@ if (!('SVGPathSeg' in window)) {
clone () { return new SVGPathSegArcAbs(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag); } clone () { return new SVGPathSegArcAbs(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag); }
} }
Object.defineProperties(SVGPathSegArcAbs.prototype, { Object.defineProperties(SVGPathSegArcAbs.prototype, {
x: { get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true }, x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},
y: { get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true }, y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true},
r1: { get () { return this._r1; }, set (r1) { this._r1 = r1; this._segmentChanged(); }, enumerable: true }, r1: {get () { return this._r1; }, set (r1) { this._r1 = r1; this._segmentChanged(); }, enumerable: true},
r2: { get () { return this._r2; }, set (r2) { this._r2 = r2; this._segmentChanged(); }, enumerable: true }, r2: {get () { return this._r2; }, set (r2) { this._r2 = r2; this._segmentChanged(); }, enumerable: true},
angle: { get () { return this._angle; }, set (angle) { this._angle = angle; this._segmentChanged(); }, enumerable: true }, angle: {get () { return this._angle; }, set (angle) { this._angle = angle; this._segmentChanged(); }, enumerable: true},
largeArcFlag: { get () { return this._largeArcFlag; }, set (largeArcFlag) { this._largeArcFlag = largeArcFlag; this._segmentChanged(); }, enumerable: true }, largeArcFlag: {get () { return this._largeArcFlag; }, set (largeArcFlag) { this._largeArcFlag = largeArcFlag; this._segmentChanged(); }, enumerable: true},
sweepFlag: { get () { return this._sweepFlag; }, set (sweepFlag) { this._sweepFlag = sweepFlag; this._segmentChanged(); }, enumerable: true } sweepFlag: {get () { return this._sweepFlag; }, set (sweepFlag) { this._sweepFlag = sweepFlag; this._segmentChanged(); }, enumerable: true}
}); });
class SVGPathSegArcRel extends SVGPathSeg { class SVGPathSegArcRel extends SVGPathSeg {
@@ -244,13 +253,13 @@ if (!('SVGPathSeg' in window)) {
clone () { return new SVGPathSegArcRel(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag); } clone () { return new SVGPathSegArcRel(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag); }
} }
Object.defineProperties(SVGPathSegArcRel.prototype, { Object.defineProperties(SVGPathSegArcRel.prototype, {
x: { get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true }, x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},
y: { get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true }, y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true},
r1: { get () { return this._r1; }, set (r1) { this._r1 = r1; this._segmentChanged(); }, enumerable: true }, r1: {get () { return this._r1; }, set (r1) { this._r1 = r1; this._segmentChanged(); }, enumerable: true},
r2: { get () { return this._r2; }, set (r2) { this._r2 = r2; this._segmentChanged(); }, enumerable: true }, r2: {get () { return this._r2; }, set (r2) { this._r2 = r2; this._segmentChanged(); }, enumerable: true},
angle: { get () { return this._angle; }, set (angle) { this._angle = angle; this._segmentChanged(); }, enumerable: true }, angle: {get () { return this._angle; }, set (angle) { this._angle = angle; this._segmentChanged(); }, enumerable: true},
largeArcFlag: { get () { return this._largeArcFlag; }, set (largeArcFlag) { this._largeArcFlag = largeArcFlag; this._segmentChanged(); }, enumerable: true }, largeArcFlag: {get () { return this._largeArcFlag; }, set (largeArcFlag) { this._largeArcFlag = largeArcFlag; this._segmentChanged(); }, enumerable: true},
sweepFlag: { get () { return this._sweepFlag; }, set (sweepFlag) { this._sweepFlag = sweepFlag; this._segmentChanged(); }, enumerable: true } sweepFlag: {get () { return this._sweepFlag; }, set (sweepFlag) { this._sweepFlag = sweepFlag; this._segmentChanged(); }, enumerable: true}
}); });
class SVGPathSegLinetoHorizontalAbs extends SVGPathSeg { class SVGPathSegLinetoHorizontalAbs extends SVGPathSeg {
@@ -262,7 +271,7 @@ if (!('SVGPathSeg' in window)) {
_asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x; } _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x; }
clone () { return new SVGPathSegLinetoHorizontalAbs(undefined, this._x); } clone () { return new SVGPathSegLinetoHorizontalAbs(undefined, this._x); }
} }
Object.defineProperty(SVGPathSegLinetoHorizontalAbs.prototype, 'x', { get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true }); Object.defineProperty(SVGPathSegLinetoHorizontalAbs.prototype, 'x', {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true});
class SVGPathSegLinetoHorizontalRel extends SVGPathSeg { class SVGPathSegLinetoHorizontalRel extends SVGPathSeg {
constructor (owningPathSegList, x) { constructor (owningPathSegList, x) {
@@ -273,7 +282,7 @@ if (!('SVGPathSeg' in window)) {
_asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x; } _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._x; }
clone () { return new SVGPathSegLinetoHorizontalRel(undefined, this._x); } clone () { return new SVGPathSegLinetoHorizontalRel(undefined, this._x); }
} }
Object.defineProperty(SVGPathSegLinetoHorizontalRel.prototype, 'x', { get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true }); Object.defineProperty(SVGPathSegLinetoHorizontalRel.prototype, 'x', {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true});
class SVGPathSegLinetoVerticalAbs extends SVGPathSeg { class SVGPathSegLinetoVerticalAbs extends SVGPathSeg {
constructor (owningPathSegList, y) { constructor (owningPathSegList, y) {
@@ -284,7 +293,7 @@ if (!('SVGPathSeg' in window)) {
_asPathString () { return this.pathSegTypeAsLetter + ' ' + this._y; } _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._y; }
clone () { return new SVGPathSegLinetoVerticalAbs(undefined, this._y); } clone () { return new SVGPathSegLinetoVerticalAbs(undefined, this._y); }
} }
Object.defineProperty(SVGPathSegLinetoVerticalAbs.prototype, 'y', { get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true }); Object.defineProperty(SVGPathSegLinetoVerticalAbs.prototype, 'y', {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true});
class SVGPathSegLinetoVerticalRel extends SVGPathSeg { class SVGPathSegLinetoVerticalRel extends SVGPathSeg {
constructor (owningPathSegList, y) { constructor (owningPathSegList, y) {
@@ -295,7 +304,7 @@ if (!('SVGPathSeg' in window)) {
_asPathString () { return this.pathSegTypeAsLetter + ' ' + this._y; } _asPathString () { return this.pathSegTypeAsLetter + ' ' + this._y; }
clone () { return new SVGPathSegLinetoVerticalRel(undefined, this._y); } clone () { return new SVGPathSegLinetoVerticalRel(undefined, this._y); }
} }
Object.defineProperty(SVGPathSegLinetoVerticalRel.prototype, 'y', { get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true }); Object.defineProperty(SVGPathSegLinetoVerticalRel.prototype, 'y', {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true});
class SVGPathSegCurvetoCubicSmoothAbs extends SVGPathSeg { class SVGPathSegCurvetoCubicSmoothAbs extends SVGPathSeg {
constructor (owningPathSegList, x, y, x2, y2) { constructor (owningPathSegList, x, y, x2, y2) {
@@ -310,10 +319,10 @@ if (!('SVGPathSeg' in window)) {
clone () { return new SVGPathSegCurvetoCubicSmoothAbs(undefined, this._x, this._y, this._x2, this._y2); } clone () { return new SVGPathSegCurvetoCubicSmoothAbs(undefined, this._x, this._y, this._x2, this._y2); }
} }
Object.defineProperties(SVGPathSegCurvetoCubicSmoothAbs.prototype, { Object.defineProperties(SVGPathSegCurvetoCubicSmoothAbs.prototype, {
x: { get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true }, x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},
y: { get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true }, y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true},
x2: { get () { return this._x2; }, set (x2) { this._x2 = x2; this._segmentChanged(); }, enumerable: true }, x2: {get () { return this._x2; }, set (x2) { this._x2 = x2; this._segmentChanged(); }, enumerable: true},
y2: { get () { return this._y2; }, set (y2) { this._y2 = y2; this._segmentChanged(); }, enumerable: true } y2: {get () { return this._y2; }, set (y2) { this._y2 = y2; this._segmentChanged(); }, enumerable: true}
}); });
class SVGPathSegCurvetoCubicSmoothRel extends SVGPathSeg { class SVGPathSegCurvetoCubicSmoothRel extends SVGPathSeg {
@@ -329,10 +338,10 @@ if (!('SVGPathSeg' in window)) {
clone () { return new SVGPathSegCurvetoCubicSmoothRel(undefined, this._x, this._y, this._x2, this._y2); } clone () { return new SVGPathSegCurvetoCubicSmoothRel(undefined, this._x, this._y, this._x2, this._y2); }
} }
Object.defineProperties(SVGPathSegCurvetoCubicSmoothRel.prototype, { Object.defineProperties(SVGPathSegCurvetoCubicSmoothRel.prototype, {
x: { get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true }, x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},
y: { get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true }, y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true},
x2: { get () { return this._x2; }, set (x2) { this._x2 = x2; this._segmentChanged(); }, enumerable: true }, x2: {get () { return this._x2; }, set (x2) { this._x2 = x2; this._segmentChanged(); }, enumerable: true},
y2: { get () { return this._y2; }, set (y2) { this._y2 = y2; this._segmentChanged(); }, enumerable: true } y2: {get () { return this._y2; }, set (y2) { this._y2 = y2; this._segmentChanged(); }, enumerable: true}
}); });
class SVGPathSegCurvetoQuadraticSmoothAbs extends SVGPathSeg { class SVGPathSegCurvetoQuadraticSmoothAbs extends SVGPathSeg {
@@ -346,8 +355,8 @@ if (!('SVGPathSeg' in window)) {
clone () { return new SVGPathSegCurvetoQuadraticSmoothAbs(undefined, this._x, this._y); } clone () { return new SVGPathSegCurvetoQuadraticSmoothAbs(undefined, this._x, this._y); }
} }
Object.defineProperties(SVGPathSegCurvetoQuadraticSmoothAbs.prototype, { Object.defineProperties(SVGPathSegCurvetoQuadraticSmoothAbs.prototype, {
x: { get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true }, x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},
y: { get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true } y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true}
}); });
class SVGPathSegCurvetoQuadraticSmoothRel extends SVGPathSeg { class SVGPathSegCurvetoQuadraticSmoothRel extends SVGPathSeg {
@@ -361,8 +370,8 @@ if (!('SVGPathSeg' in window)) {
clone () { return new SVGPathSegCurvetoQuadraticSmoothRel(undefined, this._x, this._y); } clone () { return new SVGPathSegCurvetoQuadraticSmoothRel(undefined, this._x, this._y); }
} }
Object.defineProperties(SVGPathSegCurvetoQuadraticSmoothRel.prototype, { Object.defineProperties(SVGPathSegCurvetoQuadraticSmoothRel.prototype, {
x: { get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true }, x: {get () { return this._x; }, set (x) { this._x = x; this._segmentChanged(); }, enumerable: true},
y: { get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true } y: {get () { return this._y; }, set (y) { this._y = y; this._segmentChanged(); }, enumerable: true}
}); });
// Add createSVGPathSeg* functions to SVGPathElement. // Add createSVGPathSeg* functions to SVGPathElement.
@@ -443,7 +452,7 @@ if (!('SVGPathSeg' in window)) {
// The second check for appendItem is specific to Firefox 59+ which removed only parts of the // The second check for appendItem is specific to Firefox 59+ which removed only parts of the
// SVGPathSegList API (e.g., appendItem). In this case we need to re-implement the entire API // SVGPathSegList API (e.g., appendItem). In this case we need to re-implement the entire API
// so the polyfill data (i.e., _list) is used throughout. // so the polyfill data (i.e., _list) is used throughout.
if (!('SVGPathSegList' in window) || !('appendItem' in SVGPathSegList.prototype)) { if (!('SVGPathSegList' in window) || !('appendItem' in window.SVGPathSegList.prototype)) {
// Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList
class SVGPathSegList { class SVGPathSegList {
constructor (pathElement) { constructor (pathElement) {
@@ -948,9 +957,9 @@ if (!('SVGPathSegList' in window) || !('appendItem' in SVGPathSegList.prototype)
enumerable: true enumerable: true
}, },
// FIXME: The following are not implemented and simply return SVGPathElement.pathSegList. // FIXME: The following are not implemented and simply return SVGPathElement.pathSegList.
normalizedPathSegList: { get () { return this.pathSegList; }, enumerable: true }, normalizedPathSegList: {get () { return this.pathSegList; }, enumerable: true},
animatedPathSegList: { get () { return this.pathSegList; }, enumerable: true }, animatedPathSegList: {get () { return this.pathSegList; }, enumerable: true},
animatedNormalizedPathSegList: { get () { return this.pathSegList; }, enumerable: true } animatedNormalizedPathSegList: {get () { return this.pathSegList; }, enumerable: true}
}); });
window.SVGPathSegList = SVGPathSegList; window.SVGPathSegList = SVGPathSegList;
} }

10
editor/xdomain-svg-editor-es.html
View File

@@ -748,17 +748,17 @@
</div> </div>
</div> </div>
<ul id="cmenu_canvas" class="contextMenu"> <ul id="cmenu_canvas" class="contextMenu">
<li><a href="#cut">Cut</a></li> <li><a href="#cut">Cut<span class="shortcut">META+X</span></a></li>
<li><a href="#copy">Copy</a></li> <li><a href="#copy">Copy<span class="shortcut">META+C</span></a></li>
<li><a href="#paste">Paste</a></li> <li><a href="#paste">Paste</a></li>
<li><a href="#paste_in_place">Paste in Place</a></li> <li><a href="#paste_in_place">Paste in Place</a></li>
<li class="separator"><a href="#delete">Delete</a></li> <li class="separator"><a href="#delete">Delete<span class="shortcut">BACKSPACE</span></a></li>
<li class="separator"><a href="#group">Group<span class="shortcut">G</span></a></li> <li class="separator"><a href="#group">Group<span class="shortcut">G</span></a></li>
<li><a href="#ungroup">Ungroup<span class="shortcut">G</span></a></li> <li><a href="#ungroup">Ungroup<span class="shortcut">G</span></a></li>
<li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">SHFT+CTRL+]</span></a></li> <li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">CTRL+SHFT+]</span></a></li>
<li><a href="#move_up">Bring Forward<span class="shortcut">CTRL+]</span></a></li> <li><a href="#move_up">Bring Forward<span class="shortcut">CTRL+]</span></a></li>
<li><a href="#move_down">Send Backward<span class="shortcut">CTRL+[</span></a></li> <li><a href="#move_down">Send Backward<span class="shortcut">CTRL+[</span></a></li>
<li><a href="#move_back">Send to Back<span class="shortcut">SHFT+CTRL+[</span></a></li> <li><a href="#move_back">Send to Back<span class="shortcut">CTRL+SHFT+[</span></a></li>
</ul> </ul>
<ul id="cmenu_layers" class="contextMenu"> <ul id="cmenu_layers" class="contextMenu">
<li><a href="#dupe">Duplicate Layer...</a></li> <li><a href="#dupe">Duplicate Layer...</a></li>

10
editor/xdomain-svg-editor.html
View File

@@ -749,17 +749,17 @@
</div> </div>
</div> </div>
<ul id="cmenu_canvas" class="contextMenu"> <ul id="cmenu_canvas" class="contextMenu">
<li><a href="#cut">Cut</a></li> <li><a href="#cut">Cut<span class="shortcut">META+X</span></a></li>
<li><a href="#copy">Copy</a></li> <li><a href="#copy">Copy<span class="shortcut">META+C</span></a></li>
<li><a href="#paste">Paste</a></li> <li><a href="#paste">Paste</a></li>
<li><a href="#paste_in_place">Paste in Place</a></li> <li><a href="#paste_in_place">Paste in Place</a></li>
<li class="separator"><a href="#delete">Delete</a></li> <li class="separator"><a href="#delete">Delete<span class="shortcut">BACKSPACE</span></a></li>
<li class="separator"><a href="#group">Group<span class="shortcut">G</span></a></li> <li class="separator"><a href="#group">Group<span class="shortcut">G</span></a></li>
<li><a href="#ungroup">Ungroup<span class="shortcut">G</span></a></li> <li><a href="#ungroup">Ungroup<span class="shortcut">G</span></a></li>
<li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">SHFT+CTRL+]</span></a></li> <li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">CTRL+SHFT+]</span></a></li>
<li><a href="#move_up">Bring Forward<span class="shortcut">CTRL+]</span></a></li> <li><a href="#move_up">Bring Forward<span class="shortcut">CTRL+]</span></a></li>
<li><a href="#move_down">Send Backward<span class="shortcut">CTRL+[</span></a></li> <li><a href="#move_down">Send Backward<span class="shortcut">CTRL+[</span></a></li>
<li><a href="#move_back">Send to Back<span class="shortcut">SHFT+CTRL+[</span></a></li> <li><a href="#move_back">Send to Back<span class="shortcut">CTRL+SHFT+[</span></a></li>
</ul> </ul>
<ul id="cmenu_layers" class="contextMenu"> <ul id="cmenu_layers" class="contextMenu">
<li><a href="#dupe">Duplicate Layer...</a></li> <li><a href="#dupe">Duplicate Layer...</a></li>

176
editor/xdomain-svgedit-config-iife.js
View File

@@ -235,6 +235,15 @@
return reverseNS; return reverseNS;
}; };
/* globals SVGPathSeg, SVGPathSegMovetoRel, SVGPathSegMovetoAbs,
SVGPathSegMovetoRel, SVGPathSegLinetoRel, SVGPathSegLinetoAbs,
SVGPathSegLinetoHorizontalRel, SVGPathSegLinetoHorizontalAbs,
SVGPathSegLinetoVerticalRel, SVGPathSegLinetoVerticalAbs,
SVGPathSegClosePath, SVGPathSegCurvetoCubicRel,
SVGPathSegCurvetoCubicAbs, SVGPathSegCurvetoCubicSmoothRel,
SVGPathSegCurvetoCubicSmoothAbs, SVGPathSegCurvetoQuadraticRel,
SVGPathSegCurvetoQuadraticAbs, SVGPathSegCurvetoQuadraticSmoothRel,
SVGPathSegCurvetoQuadraticSmoothAbs, SVGPathSegArcRel, SVGPathSegArcAbs */
/** /**
* SVGPathSeg API polyfill * SVGPathSeg API polyfill
* https://github.com/progers/pathseg * https://github.com/progers/pathseg
@@ -1545,11 +1554,11 @@
// The second check for appendItem is specific to Firefox 59+ which removed only parts of the // The second check for appendItem is specific to Firefox 59+ which removed only parts of the
// SVGPathSegList API (e.g., appendItem). In this case we need to re-implement the entire API // SVGPathSegList API (e.g., appendItem). In this case we need to re-implement the entire API
// so the polyfill data (i.e., _list) is used throughout. // so the polyfill data (i.e., _list) is used throughout.
if (!('SVGPathSegList' in window) || !('appendItem' in SVGPathSegList.prototype)) { if (!('SVGPathSegList' in window) || !('appendItem' in window.SVGPathSegList.prototype)) {
// Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList
var _SVGPathSegList = function () { var SVGPathSegList = function () {
function _SVGPathSegList(pathElement) { function SVGPathSegList(pathElement) {
classCallCheck(this, _SVGPathSegList); classCallCheck(this, SVGPathSegList);
this._pathElement = pathElement; this._pathElement = pathElement;
this._list = this._parsePath(this._pathElement.getAttribute('d')); this._list = this._parsePath(this._pathElement.getAttribute('d'));
@@ -1564,7 +1573,7 @@
// MutationObservers are not synchronous so we can have pending asynchronous mutations. // MutationObservers are not synchronous so we can have pending asynchronous mutations.
createClass(_SVGPathSegList, [{ createClass(SVGPathSegList, [{
key: '_checkPathSynchronizedToList', key: '_checkPathSynchronizedToList',
value: function _checkPathSynchronizedToList() { value: function _checkPathSynchronizedToList() {
this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords()); this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords());
@@ -1592,7 +1601,7 @@
key: '_writeListToPath', key: '_writeListToPath',
value: function _writeListToPath() { value: function _writeListToPath() {
this._pathElementMutationObserver.disconnect(); this._pathElementMutationObserver.disconnect();
this._pathElement.setAttribute('d', _SVGPathSegList._pathSegArrayAsString(this._list)); this._pathElement.setAttribute('d', SVGPathSegList._pathSegArrayAsString(this._list));
this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig); this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig);
} }
@@ -2069,12 +2078,12 @@
return builder.pathSegList; return builder.pathSegList;
} }
}]); }]);
return _SVGPathSegList; return SVGPathSegList;
}(); }();
_SVGPathSegList.prototype.classname = 'SVGPathSegList'; SVGPathSegList.prototype.classname = 'SVGPathSegList';
Object.defineProperty(_SVGPathSegList.prototype, 'numberOfItems', { Object.defineProperty(SVGPathSegList.prototype, 'numberOfItems', {
get: function get$$1() { get: function get$$1() {
this._checkPathSynchronizedToList(); this._checkPathSynchronizedToList();
return this._list.length; return this._list.length;
@@ -2083,7 +2092,7 @@
enumerable: true enumerable: true
}); });
_SVGPathSegList._pathSegArrayAsString = function (pathSegArray) { SVGPathSegList._pathSegArrayAsString = function (pathSegArray) {
var string = ''; var string = '';
var first = true; var first = true;
pathSegArray.forEach(function (pathSeg) { pathSegArray.forEach(function (pathSeg) {
@@ -2103,7 +2112,7 @@
pathSegList: { pathSegList: {
get: function get$$1() { get: function get$$1() {
if (!this._pathSegList) { if (!this._pathSegList) {
this._pathSegList = new _SVGPathSegList(this); this._pathSegList = new SVGPathSegList(this);
} }
return this._pathSegList; return this._pathSegList;
}, },
@@ -2127,7 +2136,7 @@
}, },
enumerable: true } enumerable: true }
}); });
window.SVGPathSegList = _SVGPathSegList; window.SVGPathSegList = SVGPathSegList;
} }
})(); })();
@@ -12292,7 +12301,7 @@
if (window.opera) { if (window.opera) {
window.console.log = function (str) { window.console.log = function (str) {
opera.postError(str); window.opera.postError(str);
}; };
window.console.dir = function (str) {}; window.console.dir = function (str) {};
} }
@@ -16412,7 +16421,7 @@
* Generates a PDF based on the current image, then calls "exportedPDF" with * Generates a PDF based on the current image, then calls "exportedPDF" with
* an object including the string, the data URL, and any issues found * an object including the string, the data URL, and any issues found
* @function module:svgcanvas.SvgCanvas#exportPDF * @function module:svgcanvas.SvgCanvas#exportPDF
* @param {string} exportWindowName * @param {string} exportWindowName Will also be used for the download file name here
* @param {external:jsPDF.OutputType} [outputType="dataurlstring"] * @param {external:jsPDF.OutputType} [outputType="dataurlstring"]
* @param {module:svgcanvas.PDFExportedCallback} cb * @param {module:svgcanvas.PDFExportedCallback} cb
* @fires module:svgcanvas.SvgCanvas#event:exportedPDF * @fires module:svgcanvas.SvgCanvas#event:exportedPDF
@@ -16484,7 +16493,7 @@
outputType = outputType || 'dataurlstring'; outputType = outputType || 'dataurlstring';
obj = { svg: svg, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName, outputType: outputType }; obj = { svg: svg, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName, outputType: outputType };
obj.output = doc.output(outputType); obj.output = doc.output(outputType, outputType === 'save' ? exportWindowName || 'svg.pdf' : undefined);
if (cb) { if (cb) {
cb(obj); cb(obj);
} }
@@ -28397,6 +28406,10 @@
svgCanvas.bind('saved', saveHandler); svgCanvas.bind('saved', saveHandler);
svgCanvas.bind('exported', exportHandler); svgCanvas.bind('exported', exportHandler);
svgCanvas.bind('exportedPDF', function (win, data) { svgCanvas.bind('exportedPDF', function (win, data) {
if (!data.output) {
// Ignore Chrome
return;
}
var exportWindowName = data.exportWindowName; var exportWindowName = data.exportWindowName;
if (exportWindowName) { if (exportWindowName) {
@@ -29217,48 +29230,81 @@
$$b.select('Select an image type for export: ', [ $$b.select('Select an image type for export: ', [
// See http://kangax.github.io/jstests/toDataUrl_mime_type_test/ for a useful list of MIME types and browser support // See http://kangax.github.io/jstests/toDataUrl_mime_type_test/ for a useful list of MIME types and browser support
// 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG' // 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG'
'PNG', 'JPEG', 'BMP', 'WEBP', 'PDF'], function (imgType) { 'PNG', 'JPEG', 'BMP', 'WEBP', 'PDF'], function () {
// todo: replace hard-coded msg with uiStrings.notification. var _ref15 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(imgType) {
if (!imgType) { var exportWindowName, openExportWindow, chrome, quality;
return; return regeneratorRuntime.wrap(function _callee5$(_context5) {
} while (1) {
// Open placeholder window (prevents popup) switch (_context5.prev = _context5.next) {
var exportWindowName = void 0; case 0:
function openExportWindow() { openExportWindow = function openExportWindow() {
var str = uiStrings$1.notification.loadingImage; var str = uiStrings$1.notification.loadingImage;
if (curConfig.exportWindowType === 'new') { if (curConfig.exportWindowType === 'new') {
editor.exportWindowCt++; editor.exportWindowCt++;
} }
exportWindowName = curConfig.canvasName + editor.exportWindowCt; exportWindowName = curConfig.canvasName + editor.exportWindowCt;
var popHTML = void 0, var popHTML = void 0,
popURL = void 0; popURL = void 0;
if (loadingURL) { if (loadingURL) {
popURL = loadingURL; popURL = loadingURL;
} else { } else {
popHTML = '<!DOCTYPE html><html>\n <head>\n <meta charset="utf-8">\n <title>' + str + '</title>\n </head>\n <body><h1>' + str + '</h1></body>\n <html>'; popHTML = '<!DOCTYPE html><html>\n <head>\n <meta charset="utf-8">\n <title>' + str + '</title>\n </head>\n <body><h1>' + str + '</h1></body>\n <html>';
if ((typeof URL === 'undefined' ? 'undefined' : _typeof(URL)) && URL.createObjectURL) { if ((typeof URL === 'undefined' ? 'undefined' : _typeof(URL)) && URL.createObjectURL) {
var blob = new Blob([popHTML], { type: 'text/html' }); var blob = new Blob([popHTML], { type: 'text/html' });
popURL = URL.createObjectURL(blob); popURL = URL.createObjectURL(blob);
} else { } else {
popURL = 'data:text/html;base64;charset=utf-8,' + encode64(popHTML); popURL = 'data:text/html;base64;charset=utf-8,' + encode64(popHTML);
}
loadingURL = popURL;
}
exportWindow = window.open(popURL, exportWindowName);
};
if (imgType) {
_context5.next = 3;
break;
}
return _context5.abrupt('return');
case 3:
// Open placeholder window (prevents popup)
exportWindowName = void 0;
chrome = isChrome();
if (!(imgType === 'PDF')) {
_context5.next = 10;
break;
}
if (!customExportPDF && !chrome) {
openExportWindow();
}
svgCanvas.exportPDF(exportWindowName, chrome ? 'save' : undefined);
_context5.next = 14;
break;
case 10:
if (!customExportImage) {
openExportWindow();
}
quality = parseInt($$b('#image-slider').val(), 10) / 100;
/* const results = */
_context5.next = 14;
return svgCanvas.rasterExport(imgType, quality, exportWindowName);
case 14:
case 'end':
return _context5.stop();
}
} }
loadingURL = popURL; }, _callee5, this);
} }));
exportWindow = window.open(popURL, exportWindowName);
} return function (_x5) {
if (imgType === 'PDF') { return _ref15.apply(this, arguments);
if (!customExportPDF) { };
openExportWindow(); }(), function () {
}
svgCanvas.exportPDF(exportWindowName);
} else {
if (!customExportImage) {
openExportWindow();
}
var quality = parseInt($$b('#image-slider').val(), 10) / 100;
svgCanvas.rasterExport(imgType, quality, exportWindowName);
}
}, function () {
var sel = $$b(this); var sel = $$b(this);
if (sel.val() === 'JPEG' || sel.val() === 'WEBP') { if (sel.val() === 'JPEG' || sel.val() === 'WEBP') {
if (!$$b('#image-slider').length) { if (!$$b('#image-slider').length) {
@@ -30696,7 +30742,9 @@
} else { } else {
// bitmap handling // bitmap handling
reader = new FileReader(); reader = new FileReader();
reader.onloadend = function (e) { reader.onloadend = function (_ref16) {
var result = _ref16.target.result;
// let's insert the new image until we know its dimensions // let's insert the new image until we know its dimensions
var insertNewImage = function insertNewImage(width, height) { var insertNewImage = function insertNewImage(width, height) {
var newImage = svgCanvas.addSVGElementFromJson({ var newImage = svgCanvas.addSVGElementFromJson({
@@ -30710,7 +30758,7 @@
style: 'pointer-events:inherit' style: 'pointer-events:inherit'
} }
}); });
svgCanvas.setHref(newImage, e.target.result); svgCanvas.setHref(newImage, result);
svgCanvas.selectOnly([newImage]); svgCanvas.selectOnly([newImage]);
svgCanvas.alignSelectedElements('m', 'page'); svgCanvas.alignSelectedElements('m', 'page');
svgCanvas.alignSelectedElements('c', 'page'); svgCanvas.alignSelectedElements('c', 'page');
@@ -30721,13 +30769,13 @@
var imgWidth = 100; var imgWidth = 100;
var imgHeight = 100; var imgHeight = 100;
var img = new Image(); var img = new Image();
img.src = e.target.result;
img.style.opacity = 0; img.style.opacity = 0;
img.onload = function () { img.onload = function () {
imgWidth = img.offsetWidth; imgWidth = img.offsetWidth || img.naturalWidth || img.width;
imgHeight = img.offsetHeight; imgHeight = img.offsetHeight || img.naturalHeight || img.height;
insertNewImage(imgWidth, imgHeight); insertNewImage(imgWidth, imgHeight);
}; };
img.src = result;
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
@@ -31032,9 +31080,9 @@
* @fires module:svgcanvas.SvgCanvas#event:message * @fires module:svgcanvas.SvgCanvas#event:message
* @returns {undefined} * @returns {undefined}
*/ */
var messageListener = function messageListener(_ref15) { var messageListener = function messageListener(_ref17) {
var data = _ref15.data, var data = _ref17.data,
origin = _ref15.origin; origin = _ref17.origin;
// console.log('data, origin, extensionsAdded', data, origin, extensionsAdded); // console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);
var messageObj = { data: data, origin: origin }; var messageObj = { data: data, origin: origin };

1055
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

29
package.json
View File

@@ -58,13 +58,13 @@
"babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0", "babel-preset-env": "^1.7.0",
"eslint": "4.19.1", "eslint": "5.5.0",
"eslint-config-standard": "11.0.0", "eslint-config-standard": "12.0.0",
"eslint-plugin-import": "2.13.0", "eslint-plugin-import": "2.14.0",
"eslint-plugin-node": "6.0.1", "eslint-plugin-node": "7.0.1",
"eslint-plugin-promise": "3.8.0", "eslint-plugin-promise": "4.0.0",
"eslint-plugin-qunit": "^3.2.1", "eslint-plugin-qunit": "^3.3.1",
"eslint-plugin-standard": "3.1.0", "eslint-plugin-standard": "4.0.0",
"find-in-files": "^0.5.0", "find-in-files": "^0.5.0",
"imageoptim-cli": "^2.0.3", "imageoptim-cli": "^2.0.3",
"jsdoc": "^3.5.5", "jsdoc": "^3.5.5",
@@ -72,17 +72,16 @@
"node-static": "^0.7.10", "node-static": "^0.7.10",
"opn-cli": "^3.1.0", "opn-cli": "^3.1.0",
"promise-fs": "^1.3.0", "promise-fs": "^1.3.0",
"qunit": "^2.6.1", "qunit": "^2.6.2",
"rollup": "0.63.2", "rollup": "0.65.2",
"rollup-plugin-babel": "^3.0.7", "rollup-plugin-babel": "^3.0.7",
"rollup-plugin-commonjs": "^9.1.3", "rollup-plugin-commonjs": "^9.1.6",
"rollup-plugin-json": "^3.0.0", "rollup-plugin-json": "^3.0.0",
"rollup-plugin-node-builtins": "^2.1.2", "rollup-plugin-node-builtins": "^2.1.2",
"rollup-plugin-node-resolve": "^3.3.0", "rollup-plugin-node-resolve": "^3.4.0",
"rollup-plugin-re": "^1.0.7", "rollup-plugin-re": "^1.0.7",
"rollup-plugin-uglify": "^4.0.0", "rollup-plugin-terser": "^2.0.2",
"sinon": "^6.1.3", "sinon": "^6.2.0",
"sinon-test": "https://github.com/brettz9/sinon-test#es6-modules", "sinon-test": "^2.3.0"
"uglify-es": "^3.3.9"
} }
} }

2
rollup-config.config.js
View File

@@ -1,8 +1,6 @@
/* eslint-env node */ /* eslint-env node */
import babel from 'rollup-plugin-babel'; import babel from 'rollup-plugin-babel';
import replace from 'rollup-plugin-re'; import replace from 'rollup-plugin-re';
// import {minify} from 'uglify-es';
// import {uglify} from 'rollup-plugin-uglify';
const plugins = [ const plugins = [
replace({ replace({

5
rollup.config.js
View File

@@ -5,8 +5,7 @@
// user entrance file // user entrance file
import babel from 'rollup-plugin-babel'; import babel from 'rollup-plugin-babel';
import {uglify} from 'rollup-plugin-uglify'; import {terser} from 'rollup-plugin-terser';
import {minify} from 'uglify-es';
import replace from 'rollup-plugin-re'; import replace from 'rollup-plugin-re';
const {lstatSync, readdirSync} = require('fs'); const {lstatSync, readdirSync} = require('fs');
@@ -44,7 +43,7 @@ function getRollupObject ({minifying, format = 'umd'} = {}) {
] ]
}; };
if (minifying) { if (minifying) {
nonMinified.plugins.push(uglify(null, minify)); nonMinified.plugins.push(terser());
} }
return nonMinified; return nonMinified;
} }

176
svgedit-config-iife.js
View File

@@ -235,6 +235,15 @@
return reverseNS; return reverseNS;
}; };
/* globals SVGPathSeg, SVGPathSegMovetoRel, SVGPathSegMovetoAbs,
SVGPathSegMovetoRel, SVGPathSegLinetoRel, SVGPathSegLinetoAbs,
SVGPathSegLinetoHorizontalRel, SVGPathSegLinetoHorizontalAbs,
SVGPathSegLinetoVerticalRel, SVGPathSegLinetoVerticalAbs,
SVGPathSegClosePath, SVGPathSegCurvetoCubicRel,
SVGPathSegCurvetoCubicAbs, SVGPathSegCurvetoCubicSmoothRel,
SVGPathSegCurvetoCubicSmoothAbs, SVGPathSegCurvetoQuadraticRel,
SVGPathSegCurvetoQuadraticAbs, SVGPathSegCurvetoQuadraticSmoothRel,
SVGPathSegCurvetoQuadraticSmoothAbs, SVGPathSegArcRel, SVGPathSegArcAbs */
/** /**
* SVGPathSeg API polyfill * SVGPathSeg API polyfill
* https://github.com/progers/pathseg * https://github.com/progers/pathseg
@@ -1545,11 +1554,11 @@
// The second check for appendItem is specific to Firefox 59+ which removed only parts of the // The second check for appendItem is specific to Firefox 59+ which removed only parts of the
// SVGPathSegList API (e.g., appendItem). In this case we need to re-implement the entire API // SVGPathSegList API (e.g., appendItem). In this case we need to re-implement the entire API
// so the polyfill data (i.e., _list) is used throughout. // so the polyfill data (i.e., _list) is used throughout.
if (!('SVGPathSegList' in window) || !('appendItem' in SVGPathSegList.prototype)) { if (!('SVGPathSegList' in window) || !('appendItem' in window.SVGPathSegList.prototype)) {
// Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList
var _SVGPathSegList = function () { var SVGPathSegList = function () {
function _SVGPathSegList(pathElement) { function SVGPathSegList(pathElement) {
classCallCheck(this, _SVGPathSegList); classCallCheck(this, SVGPathSegList);
this._pathElement = pathElement; this._pathElement = pathElement;
this._list = this._parsePath(this._pathElement.getAttribute('d')); this._list = this._parsePath(this._pathElement.getAttribute('d'));
@@ -1564,7 +1573,7 @@
// MutationObservers are not synchronous so we can have pending asynchronous mutations. // MutationObservers are not synchronous so we can have pending asynchronous mutations.
createClass(_SVGPathSegList, [{ createClass(SVGPathSegList, [{
key: '_checkPathSynchronizedToList', key: '_checkPathSynchronizedToList',
value: function _checkPathSynchronizedToList() { value: function _checkPathSynchronizedToList() {
this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords()); this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords());
@@ -1592,7 +1601,7 @@
key: '_writeListToPath', key: '_writeListToPath',
value: function _writeListToPath() { value: function _writeListToPath() {
this._pathElementMutationObserver.disconnect(); this._pathElementMutationObserver.disconnect();
this._pathElement.setAttribute('d', _SVGPathSegList._pathSegArrayAsString(this._list)); this._pathElement.setAttribute('d', SVGPathSegList._pathSegArrayAsString(this._list));
this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig); this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig);
} }
@@ -2069,12 +2078,12 @@
return builder.pathSegList; return builder.pathSegList;
} }
}]); }]);
return _SVGPathSegList; return SVGPathSegList;
}(); }();
_SVGPathSegList.prototype.classname = 'SVGPathSegList'; SVGPathSegList.prototype.classname = 'SVGPathSegList';
Object.defineProperty(_SVGPathSegList.prototype, 'numberOfItems', { Object.defineProperty(SVGPathSegList.prototype, 'numberOfItems', {
get: function get$$1() { get: function get$$1() {
this._checkPathSynchronizedToList(); this._checkPathSynchronizedToList();
return this._list.length; return this._list.length;
@@ -2083,7 +2092,7 @@
enumerable: true enumerable: true
}); });
_SVGPathSegList._pathSegArrayAsString = function (pathSegArray) { SVGPathSegList._pathSegArrayAsString = function (pathSegArray) {
var string = ''; var string = '';
var first = true; var first = true;
pathSegArray.forEach(function (pathSeg) { pathSegArray.forEach(function (pathSeg) {
@@ -2103,7 +2112,7 @@
pathSegList: { pathSegList: {
get: function get$$1() { get: function get$$1() {
if (!this._pathSegList) { if (!this._pathSegList) {
this._pathSegList = new _SVGPathSegList(this); this._pathSegList = new SVGPathSegList(this);
} }
return this._pathSegList; return this._pathSegList;
}, },
@@ -2127,7 +2136,7 @@
}, },
enumerable: true } enumerable: true }
}); });
window.SVGPathSegList = _SVGPathSegList; window.SVGPathSegList = SVGPathSegList;
} }
})(); })();
@@ -12292,7 +12301,7 @@
if (window.opera) { if (window.opera) {
window.console.log = function (str) { window.console.log = function (str) {
opera.postError(str); window.opera.postError(str);
}; };
window.console.dir = function (str) {}; window.console.dir = function (str) {};
} }
@@ -16412,7 +16421,7 @@
* Generates a PDF based on the current image, then calls "exportedPDF" with * Generates a PDF based on the current image, then calls "exportedPDF" with
* an object including the string, the data URL, and any issues found * an object including the string, the data URL, and any issues found
* @function module:svgcanvas.SvgCanvas#exportPDF * @function module:svgcanvas.SvgCanvas#exportPDF
* @param {string} exportWindowName * @param {string} exportWindowName Will also be used for the download file name here
* @param {external:jsPDF.OutputType} [outputType="dataurlstring"] * @param {external:jsPDF.OutputType} [outputType="dataurlstring"]
* @param {module:svgcanvas.PDFExportedCallback} cb * @param {module:svgcanvas.PDFExportedCallback} cb
* @fires module:svgcanvas.SvgCanvas#event:exportedPDF * @fires module:svgcanvas.SvgCanvas#event:exportedPDF
@@ -16484,7 +16493,7 @@
outputType = outputType || 'dataurlstring'; outputType = outputType || 'dataurlstring';
obj = { svg: svg, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName, outputType: outputType }; obj = { svg: svg, issues: issues, issueCodes: issueCodes, exportWindowName: exportWindowName, outputType: outputType };
obj.output = doc.output(outputType); obj.output = doc.output(outputType, outputType === 'save' ? exportWindowName || 'svg.pdf' : undefined);
if (cb) { if (cb) {
cb(obj); cb(obj);
} }
@@ -28397,6 +28406,10 @@
svgCanvas.bind('saved', saveHandler); svgCanvas.bind('saved', saveHandler);
svgCanvas.bind('exported', exportHandler); svgCanvas.bind('exported', exportHandler);
svgCanvas.bind('exportedPDF', function (win, data) { svgCanvas.bind('exportedPDF', function (win, data) {
if (!data.output) {
// Ignore Chrome
return;
}
var exportWindowName = data.exportWindowName; var exportWindowName = data.exportWindowName;
if (exportWindowName) { if (exportWindowName) {
@@ -29217,48 +29230,81 @@
$$b.select('Select an image type for export: ', [ $$b.select('Select an image type for export: ', [
// See http://kangax.github.io/jstests/toDataUrl_mime_type_test/ for a useful list of MIME types and browser support // See http://kangax.github.io/jstests/toDataUrl_mime_type_test/ for a useful list of MIME types and browser support
// 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG' // 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG'
'PNG', 'JPEG', 'BMP', 'WEBP', 'PDF'], function (imgType) { 'PNG', 'JPEG', 'BMP', 'WEBP', 'PDF'], function () {
// todo: replace hard-coded msg with uiStrings.notification. var _ref15 = asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(imgType) {
if (!imgType) { var exportWindowName, openExportWindow, chrome, quality;
return; return regeneratorRuntime.wrap(function _callee5$(_context5) {
} while (1) {
// Open placeholder window (prevents popup) switch (_context5.prev = _context5.next) {
var exportWindowName = void 0; case 0:
function openExportWindow() { openExportWindow = function openExportWindow() {
var str = uiStrings$1.notification.loadingImage; var str = uiStrings$1.notification.loadingImage;
if (curConfig.exportWindowType === 'new') { if (curConfig.exportWindowType === 'new') {
editor.exportWindowCt++; editor.exportWindowCt++;
} }
exportWindowName = curConfig.canvasName + editor.exportWindowCt; exportWindowName = curConfig.canvasName + editor.exportWindowCt;
var popHTML = void 0, var popHTML = void 0,
popURL = void 0; popURL = void 0;
if (loadingURL) { if (loadingURL) {
popURL = loadingURL; popURL = loadingURL;
} else { } else {
popHTML = '<!DOCTYPE html><html>\n <head>\n <meta charset="utf-8">\n <title>' + str + '</title>\n </head>\n <body><h1>' + str + '</h1></body>\n <html>'; popHTML = '<!DOCTYPE html><html>\n <head>\n <meta charset="utf-8">\n <title>' + str + '</title>\n </head>\n <body><h1>' + str + '</h1></body>\n <html>';
if ((typeof URL === 'undefined' ? 'undefined' : _typeof(URL)) && URL.createObjectURL) { if ((typeof URL === 'undefined' ? 'undefined' : _typeof(URL)) && URL.createObjectURL) {
var blob = new Blob([popHTML], { type: 'text/html' }); var blob = new Blob([popHTML], { type: 'text/html' });
popURL = URL.createObjectURL(blob); popURL = URL.createObjectURL(blob);
} else { } else {
popURL = 'data:text/html;base64;charset=utf-8,' + encode64(popHTML); popURL = 'data:text/html;base64;charset=utf-8,' + encode64(popHTML);
}
loadingURL = popURL;
}
exportWindow = window.open(popURL, exportWindowName);
};
if (imgType) {
_context5.next = 3;
break;
}
return _context5.abrupt('return');
case 3:
// Open placeholder window (prevents popup)
exportWindowName = void 0;
chrome = isChrome();
if (!(imgType === 'PDF')) {
_context5.next = 10;
break;
}
if (!customExportPDF && !chrome) {
openExportWindow();
}
svgCanvas.exportPDF(exportWindowName, chrome ? 'save' : undefined);
_context5.next = 14;
break;
case 10:
if (!customExportImage) {
openExportWindow();
}
quality = parseInt($$b('#image-slider').val(), 10) / 100;
/* const results = */
_context5.next = 14;
return svgCanvas.rasterExport(imgType, quality, exportWindowName);
case 14:
case 'end':
return _context5.stop();
}
} }
loadingURL = popURL; }, _callee5, this);
} }));
exportWindow = window.open(popURL, exportWindowName);
} return function (_x5) {
if (imgType === 'PDF') { return _ref15.apply(this, arguments);
if (!customExportPDF) { };
openExportWindow(); }(), function () {
}
svgCanvas.exportPDF(exportWindowName);
} else {
if (!customExportImage) {
openExportWindow();
}
var quality = parseInt($$b('#image-slider').val(), 10) / 100;
svgCanvas.rasterExport(imgType, quality, exportWindowName);
}
}, function () {
var sel = $$b(this); var sel = $$b(this);
if (sel.val() === 'JPEG' || sel.val() === 'WEBP') { if (sel.val() === 'JPEG' || sel.val() === 'WEBP') {
if (!$$b('#image-slider').length) { if (!$$b('#image-slider').length) {
@@ -30696,7 +30742,9 @@
} else { } else {
// bitmap handling // bitmap handling
reader = new FileReader(); reader = new FileReader();
reader.onloadend = function (e) { reader.onloadend = function (_ref16) {
var result = _ref16.target.result;
// let's insert the new image until we know its dimensions // let's insert the new image until we know its dimensions
var insertNewImage = function insertNewImage(width, height) { var insertNewImage = function insertNewImage(width, height) {
var newImage = svgCanvas.addSVGElementFromJson({ var newImage = svgCanvas.addSVGElementFromJson({
@@ -30710,7 +30758,7 @@
style: 'pointer-events:inherit' style: 'pointer-events:inherit'
} }
}); });
svgCanvas.setHref(newImage, e.target.result); svgCanvas.setHref(newImage, result);
svgCanvas.selectOnly([newImage]); svgCanvas.selectOnly([newImage]);
svgCanvas.alignSelectedElements('m', 'page'); svgCanvas.alignSelectedElements('m', 'page');
svgCanvas.alignSelectedElements('c', 'page'); svgCanvas.alignSelectedElements('c', 'page');
@@ -30721,13 +30769,13 @@
var imgWidth = 100; var imgWidth = 100;
var imgHeight = 100; var imgHeight = 100;
var img = new Image(); var img = new Image();
img.src = e.target.result;
img.style.opacity = 0; img.style.opacity = 0;
img.onload = function () { img.onload = function () {
imgWidth = img.offsetWidth; imgWidth = img.offsetWidth || img.naturalWidth || img.width;
imgHeight = img.offsetHeight; imgHeight = img.offsetHeight || img.naturalHeight || img.height;
insertNewImage(imgWidth, imgHeight); insertNewImage(imgWidth, imgHeight);
}; };
img.src = result;
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
@@ -31032,9 +31080,9 @@
* @fires module:svgcanvas.SvgCanvas#event:message * @fires module:svgcanvas.SvgCanvas#event:message
* @returns {undefined} * @returns {undefined}
*/ */
var messageListener = function messageListener(_ref15) { var messageListener = function messageListener(_ref17) {
var data = _ref15.data, var data = _ref17.data,
origin = _ref15.origin; origin = _ref17.origin;
// console.log('data, origin, extensionsAdded', data, origin, extensionsAdded); // console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);
var messageObj = { data: data, origin: origin }; var messageObj = { data: data, origin: origin };

1
test/path_test.js
View File

@@ -1,4 +1,5 @@
/* eslint-env qunit */ /* eslint-env qunit */
/* globals SVGPathSeg */
import '../editor/svgpathseg.js'; import '../editor/svgpathseg.js';
import {NS} from '../editor/namespaces.js'; import {NS} from '../editor/namespaces.js';
import * as utilities from '../editor/utilities.js'; import * as utilities from '../editor/utilities.js';