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

- Refactoring: Clean-up

Browse Source 
- Fix: Race condition with svgicons and seticonsize
- Embedded editor: Use module form for now; drop unused inline attribute
- Embedded editor: Fix PNG export; work toward restoring PDF (add `getUIStrings` method to editor for assisting)
- canvg and importScript fixes
This commit is contained in:
Brett Zamir
2018-05-25 22:43:01 +08:00
parent 52268c4324
commit 5ad83b9b87
13 changed files with 1108 additions and 1448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
editor/canvg/canvg.js
View File

@@ -495,7 +495,6 @@ function build (opts) {
// transforms
svg.Transform = function (v) {
const that = this;
this.Type = {};
// translate
@@ -561,27 +560,21 @@ function build (opts) {
this.Type.SkewBase = class extends this.Type.matrix {
constructor (s) {
super();
this.base = that.Type.matrix;
this.base(s);
super(s);
this.angle = new svg.Property('angle', s);
}
};
this.Type.skewX = class extends this.Type.SkewBase {
constructor (s) {
super();
this.base = that.Type.SkewBase;
this.base(s);
super(s);
this.m = [1, 0, Math.tan(this.angle.toRadians()), 1, 0, 0];
}
};
this.Type.skewY = class extends this.Type.SkewBase {
constructor (s) {
super();
this.base = that.Type.SkewBase;
this.base(s);
super(s);
this.m = [1, Math.tan(this.angle.toRadians()), 0, 1, 0, 0];
}
};
@@ -833,9 +826,7 @@ function build (opts) {
svg.Element.RenderedElementBase = class extends svg.Element.ElementBase {
constructor (node) {
super();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
this.setContext = function (ctx) {
// fill
@@ -926,9 +917,7 @@ function build (opts) {
svg.Element.PathElementBase = class extends svg.Element.RenderedElementBase {
constructor (node) {
super();
this.base = svg.Element.RenderedElementBase;
this.base(node);
super(node);
this.path = function (ctx) {
if (ctx != null) ctx.beginPath();
@@ -979,9 +968,7 @@ function build (opts) {
// svg element
svg.Element.svg = class extends svg.Element.RenderedElementBase {
constructor (node) {
super();
this.base = svg.Element.RenderedElementBase;
this.base(node);
super(node);
this.baseClearContext = this.clearContext;
this.clearContext = function (ctx) {
@@ -1066,9 +1053,7 @@ function build (opts) {
// rect element
svg.Element.rect = class extends svg.Element.PathElementBase {
constructor (node) {
super();
this.base = svg.Element.PathElementBase;
this.base(node);
super(node);
this.path = function (ctx) {
const x = this.attribute('x').toPixels('x');
@@ -1103,9 +1088,7 @@ function build (opts) {
// circle element
svg.Element.circle = class extends svg.Element.PathElementBase {
constructor (node) {
super();
this.base = svg.Element.PathElementBase;
this.base(node);
super(node);
this.path = function (ctx) {
const cx = this.attribute('cx').toPixels('x');
@@ -1126,9 +1109,7 @@ function build (opts) {
// ellipse element
svg.Element.ellipse = class extends svg.Element.PathElementBase {
constructor (node) {
super();
this.base = svg.Element.PathElementBase;
this.base(node);
super(node);
this.path = function (ctx) {
const KAPPA = 4 * ((Math.sqrt(2) - 1) / 3);
@@ -1155,9 +1136,7 @@ function build (opts) {
// line element
svg.Element.line = class extends svg.Element.PathElementBase {
constructor (node) {
super();
this.base = svg.Element.PathElementBase;
this.base(node);
super(node);
this.getPoints = function () {
return [
@@ -1188,9 +1167,7 @@ function build (opts) {
// polyline element
svg.Element.polyline = class extends svg.Element.PathElementBase {
constructor (node) {
super();
this.base = svg.Element.PathElementBase;
this.base(node);
super(node);
this.points = svg.CreatePath(this.attribute('points').value);
this.path = function (ctx) {
@@ -1220,9 +1197,7 @@ function build (opts) {
// polygon element
svg.Element.polygon = class extends svg.Element.polyline {
constructor (node) {
super();
this.base = svg.Element.polyline;
this.base(node);
super(node);
this.basePath = this.path;
this.path = function (ctx) {
@@ -1239,9 +1214,7 @@ function build (opts) {
// path element
svg.Element.path = class extends svg.Element.PathElementBase {
constructor (node) {
super();
this.base = svg.Element.PathElementBase;
this.base(node);
super(node);
let d = this.attribute('d').value;
// TODO: convert to real lexer based on https://www.w3.org/TR/SVG11/paths.html#PathDataBNF
@@ -1580,9 +1553,7 @@ function build (opts) {
// pattern element
svg.Element.pattern = class extends svg.Element.ElementBase {
constructor (node) {
super();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
this.createPattern = function (ctx, element) {
const width = this.attribute('width').toPixels('x', true);
@@ -1621,9 +1592,7 @@ function build (opts) {
// marker element
svg.Element.marker = class extends svg.Element.ElementBase {
constructor (node) {
super();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
this.baseRender = this.render;
this.render = function (ctx, point, angle) {
@@ -1655,9 +1624,7 @@ function build (opts) {
// definitions element
svg.Element.defs = class extends svg.Element.ElementBase {
constructor (node) {
super();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
this.render = function (ctx) {
// NOOP
@@ -1668,9 +1635,7 @@ function build (opts) {
// base for gradients
svg.Element.GradientBase = class extends svg.Element.ElementBase {
constructor (node) {
super();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
this.gradientUnits = this.attribute('gradientUnits').valueOrDefault('objectBoundingBox');
@@ -1741,9 +1706,7 @@ function build (opts) {
// linear gradient element
svg.Element.linearGradient = class extends svg.Element.GradientBase {
constructor (node) {
super();
this.base = svg.Element.GradientBase;
this.base(node);
super(node);
this.getGradient = function (ctx, element) {
const bb = this.gradientUnits === 'objectBoundingBox'
@@ -1783,9 +1746,7 @@ function build (opts) {
// radial gradient element
svg.Element.radialGradient = class extends svg.Element.GradientBase {
constructor (node) {
super();
this.base = svg.Element.GradientBase;
this.base(node);
super(node);
this.getGradient = function (ctx, element) {
const bb = element.getBoundingBox();
@@ -1826,9 +1787,7 @@ function build (opts) {
// gradient stop element
svg.Element.stop = class extends svg.Element.ElementBase {
constructor (node) {
super();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
this.offset = this.attribute('offset').numValue();
if (this.offset < 0) this.offset = 0;
@@ -1845,9 +1804,7 @@ function build (opts) {
// animation base element
svg.Element.AnimateBase = class extends svg.Element.ElementBase {
constructor (node) {
super();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
svg.Animations.push(this);
@@ -1944,9 +1901,7 @@ function build (opts) {
// animate element
svg.Element.animate = class extends svg.Element.AnimateBase {
constructor (node) {
super();
this.base = svg.Element.AnimateBase;
this.base(node);
super(node);
this.calcValue = function () {
const p = this.progress();
@@ -1961,9 +1916,7 @@ function build (opts) {
// animate color element
svg.Element.animateColor = class extends svg.Element.AnimateBase {
constructor (node) {
super();
this.base = svg.Element.AnimateBase;
this.base(node);
super(node);
this.calcValue = function () {
const p = this.progress();
@@ -1985,9 +1938,7 @@ function build (opts) {
// animate transform element
svg.Element.animateTransform = class extends svg.Element.animate {
constructor (node) {
super();
this.base = svg.Element.AnimateBase;
this.base(node);
super(node);
this.calcValue = function () {
const p = this.progress();
@@ -2007,9 +1958,7 @@ function build (opts) {
// font element
svg.Element.font = class extends svg.Element.ElementBase {
constructor (node) {
super();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
this.horizAdvX = this.attribute('horiz-adv-x').numValue();
@@ -2046,9 +1995,7 @@ function build (opts) {
// font-face element
svg.Element.fontface = class extends svg.Element.ElementBase {
constructor (node) {
super();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
this.ascent = this.attribute('ascent').value;
this.descent = this.attribute('descent').value;
@@ -2059,9 +2006,7 @@ function build (opts) {
// missing-glyph element
svg.Element.missingglyph = class extends svg.Element.path {
constructor (node) {
super();
this.base = svg.Element.path;
this.base(node);
super(node);
this.horizAdvX = 0;
}
@@ -2070,9 +2015,7 @@ function build (opts) {
// glyph element
svg.Element.glyph = class extends svg.Element.path {
constructor (node) {
super();
this.base = svg.Element.path;
this.base(node);
super(node);
this.horizAdvX = this.attribute('horiz-adv-x').numValue();
this.unicode = this.attribute('unicode').value;
@@ -2083,10 +2026,8 @@ function build (opts) {
// text element
svg.Element.text = class extends svg.Element.RenderedElementBase {
constructor (node) {
super();
super(node);
this.captureTextNodes = true;
this.base = svg.Element.RenderedElementBase;
this.base(node);
this.baseSetContext = this.setContext;
this.setContext = function (ctx) {
@@ -2161,9 +2102,7 @@ function build (opts) {
// text base
svg.Element.TextElementBase = class extends svg.Element.RenderedElementBase {
constructor (node) {
super();
this.base = svg.Element.RenderedElementBase;
this.base(node);
super(node);
this.getGlyph = function (font, text, i) {
const c = text[i];
@@ -2264,10 +2203,8 @@ function build (opts) {
// tspan
svg.Element.tspan = class extends svg.Element.TextElementBase {
constructor (node) {
super();
super(node);
this.captureTextNodes = true;
this.base = svg.Element.TextElementBase;
this.base(node);
this.text = node.nodeValue || node.text || '';
this.getText = function () {
@@ -2279,9 +2216,7 @@ function build (opts) {
// tref
svg.Element.tref = class extends svg.Element.TextElementBase {
constructor (node) {
super();
this.base = svg.Element.TextElementBase;
this.base(node);
super(node);
this.getText = function () {
const element = this.getHrefAttribute().getDefinition();
@@ -2293,9 +2228,7 @@ function build (opts) {
// a element
svg.Element.a = class extends svg.Element.TextElementBase {
constructor (node) {
super();
this.base = svg.Element.TextElementBase;
this.base(node);
super(node);
this.hasText = true;
for (let i = 0, childNode; (childNode = node.childNodes[i]); i++) {
@@ -2337,9 +2270,7 @@ function build (opts) {
// image element
svg.Element.image = class extends svg.Element.RenderedElementBase {
constructor (node) {
super();
this.base = svg.Element.RenderedElementBase;
this.base(node);
super(node);
const href = this.getHrefAttribute().value;
if (href === '') {
@@ -2402,9 +2333,7 @@ function build (opts) {
// group element
svg.Element.g = class extends svg.Element.RenderedElementBase {
constructor (node) {
super();
this.base = svg.Element.RenderedElementBase;
this.base(node);
super(node);
this.getBoundingBox = function () {
const bb = new svg.BoundingBox();
@@ -2419,9 +2348,7 @@ function build (opts) {
// symbol element
svg.Element.symbol = class extends svg.Element.RenderedElementBase {
constructor (node) {
super();
this.base = svg.Element.RenderedElementBase;
this.base(node);
super(node);
this.render = function (ctx) {
// NO RENDER
@@ -2432,9 +2359,7 @@ function build (opts) {
// style element
svg.Element.style = class extends svg.Element.ElementBase {
constructor (node) {
super();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
// text, or spaces then CDATA
let css = '';
@@ -2489,9 +2414,7 @@ function build (opts) {
// use element
svg.Element.use = class extends svg.Element.RenderedElementBase {
constructor (node) {
super();
this.base = svg.Element.RenderedElementBase;
this.base(node);
super(node);
this.baseSetContext = this.setContext;
this.setContext = function (ctx) {
@@ -2539,9 +2462,7 @@ function build (opts) {
// mask element
svg.Element.mask = class extends svg.Element.ElementBase {
constructor (node) {
super();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
this.apply = function (ctx, element) {
// render as temp svg
@@ -2596,9 +2517,7 @@ function build (opts) {
// clip element
svg.Element.clipPath = class extends svg.Element.ElementBase {
constructor (node) {
super();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
this.apply = function (ctx) {
for (let i = 0; i < this.children.length; i++) {
@@ -2625,9 +2544,7 @@ function build (opts) {
// filters
svg.Element.filter = class extends svg.Element.ElementBase {
constructor (node) {
super();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
this.apply = function (ctx, element) {
// render as temp svg
@@ -2675,9 +2592,7 @@ function build (opts) {
svg.Element.feMorphology = class extends svg.Element.ElementBase {
constructor (node) {
super();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
this.apply = function (ctx, x, y, width, height) {
// TODO: implement
@@ -2687,9 +2602,7 @@ function build (opts) {
svg.Element.feComposite = class extends svg.Element.ElementBase {
constructor (node) {
super();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
this.apply = function (ctx, x, y, width, height) {
// TODO: implement
@@ -2699,9 +2612,7 @@ function build (opts) {
svg.Element.feColorMatrix = class extends svg.Element.ElementBase {
constructor (node) {
super();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
let matrix = svg.ToNumberArray(this.attribute('values').value);
switch (this.attribute('type').valueOrDefault('matrix')) { // https://www.w3.org/TR/SVG/filters.html#feColorMatrixElement
@@ -2773,9 +2684,7 @@ function build (opts) {
svg.Element.feGaussianBlur = class extends svg.Element.ElementBase {
constructor (node) {
super();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
this.blurRadius = Math.floor(this.attribute('stdDeviation').numValue());
this.extraFilterDistance = this.blurRadius;

49
editor/embedapi-dom.js
View File

@@ -1,6 +1,5 @@
/* globals jQuery */
import EmbeddedSVGEdit from './embedapi.js';
import svgEditor from './svg-editor.js';
const $ = jQuery;
@@ -24,32 +23,36 @@ function saveSvg () {
}
function exportPNG () {
const str = svgEditor.uiStrings.notification.loadingImage;
svgCanvas.getUIStrings()(function (uiStrings) {
const str = uiStrings.notification.loadingImage;
const exportWindow = window.open(
'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
'svg-edit-exportWindow'
);
svgCanvas.rasterExport('PNG', null, exportWindow.name);
const exportWindow = window.open(
'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
'svg-edit-exportWindow'
);
svgCanvas.rasterExport('PNG', null, exportWindow.name);
});
}
function exportPDF () {
const str = svgEditor.uiStrings.notification.loadingImage;
svgCanvas.getUIStrings()(function (uiStrings) {
const str = uiStrings.notification.loadingImage;
/**
// If you want to handle the PDF blob yourself, do as follows
svgCanvas.bind('exportedPDF', function (win, data) {
alert(data.dataurlstring);
/**
// If you want to handle the PDF blob yourself, do as follows
svgCanvas.bind('exportedPDF', function (win, data) {
alert(data.dataurlstring);
});
svgCanvas.exportPDF(); // Accepts two args: optionalWindowName supplied back to bound exportPDF handler and optionalOutputType (defaults to dataurlstring)
return;
*/
const exportWindow = window.open(
'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
'svg-edit-exportWindow'
);
svgCanvas.exportPDF(exportWindow.name);
});
svgCanvas.exportPDF(); // Accepts two args: optionalWindowName supplied back to bound exportPDF handler and optionalOutputType (defaults to dataurlstring)
return;
*/
const exportWindow = window.open(
'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
'svg-edit-exportWindow'
);
svgCanvas.exportPDF(exportWindow.name);
}
// Add event handlers
@@ -58,9 +61,9 @@ $('#save').click(saveSvg);
$('#exportPNG').click(exportPNG);
$('#exportPDF').click(exportPDF);
const iframe = $('<iframe src="svg-editor.html?extensions=ext-xdomain-messaging.js' +
const iframe = $('<iframe src="svg-editor-es.html?extensions=ext-xdomain-messaging.js' +
window.location.href.replace(/\?(.*)$/, '&$1') + // Append arguments to this file onto the iframe
'" width="900px" height="600px" id="svgedit" onload="initEmbed();"></iframe>'
'" width="900px" height="600px" id="svgedit""></iframe>'
);
iframe[0].addEventListener('load', function () {
svgCanvas = new EmbeddedSVGEdit(frame);

6
editor/embedapi.js
View File

@@ -95,7 +95,7 @@ function getMessageListener (t) {
* messages will be allowed when same origin is not used; defaults to none.
* If supplied, it should probably be the same as svgEditor's allowedOrigins
*/
class EmbeddedSVGEdit {
export default class EmbeddedSVGEdit {
constructor (frame, allowedOrigins) {
this.allowedOrigins = allowedOrigins || [];
// Initialize communication
@@ -116,7 +116,7 @@ class EmbeddedSVGEdit {
// alert("['" + l.join("', '") + "']");
// Run in svgedit itself
const functions = [
'clearSvgContentElement', 'setIdPrefix', 'getCurrentDrawing', 'addSvgElementFromJson', 'getTransformList', 'matrixMultiply', 'hasMatrixTransform', 'transformListToTransform', 'convertToNum', 'findDefs', 'getUrlFromAttr', 'getHref', 'setHref', 'getBBox', 'getRotationAngle', 'getElem', 'getRefElem', 'assignAttributes', 'cleanupElement', 'remapElement', 'recalculateDimensions', 'sanitizeSvg', 'runExtensions', 'addExtension', 'round', 'getIntersectionList', 'getStrokedBBox', 'getVisibleElements', 'getVisibleElementsAndBBoxes', 'groupSvgElem', 'getId', 'getNextId', 'call', 'bind', 'prepareSvg', 'setRotationAngle', 'recalculateAllSelectedDimensions', 'clearSelection', 'addToSelection', 'selectOnly', 'removeFromSelection', 'selectAllInCurrentLayer', 'getMouseTarget', 'removeUnusedDefElems', 'svgCanvasToString', 'svgToString', 'embedImage', 'setGoodImage', 'open', 'save', 'rasterExport', 'exportPDF', 'getSvgString', 'randomizeIds', 'uniquifyElems', 'setUseData', 'convertGradients', 'convertToGroup', 'setSvgString', 'importSvgString', 'identifyLayers', 'createLayer', 'cloneLayer', 'deleteCurrentLayer', 'setCurrentLayer', 'renameCurrentLayer', 'setCurrentLayerPosition', 'setLayerVisibility', 'moveSelectedToLayer', 'mergeLayer', 'mergeAllLayers', 'leaveContext', 'setContext', 'clear', 'linkControlPoints', 'getContentElem', 'getRootElem', 'getSelectedElems', 'getResolution', 'getZoom', 'getVersion', 'setUiStrings', 'setConfig', 'getTitle', 'setGroupTitle', 'getDocumentTitle', 'setDocumentTitle', 'getEditorNS', 'setResolution', 'getOffset', 'setBBoxZoom', 'setZoom', 'getMode', 'setMode', 'getColor', 'setColor', 'setGradient', 'setPaint', 'setStrokePaint', 'setFillPaint', 'getStrokeWidth', 'setStrokeWidth', 'setStrokeAttr', 'getStyle', 'getOpacity', 'setOpacity', 'getFillOpacity', 'getStrokeOpacity', 'setPaintOpacity', 'getPaintOpacity', 'getBlur', 'setBlurNoUndo', 'setBlurOffsets', 'setBlur', 'getBold', 'setBold', 'getItalic', 'setItalic', 'getFontFamily', 'setFontFamily', 'setFontColor', 'getFontColor', 'getFontSize', 'setFontSize', 'getText', 'setTextContent', 'setImageURL', 'setLinkURL', 'setRectRadius', 'makeHyperlink', 'removeHyperlink', 'setSegType', 'convertToPath', 'changeSelectedAttribute', 'deleteSelectedElements', 'cutSelectedElements', 'copySelectedElements', 'pasteElements', 'groupSelectedElements', 'pushGroupProperties', 'ungroupSelectedElement', 'moveToTopSelectedElement', 'moveToBottomSelectedElement', 'moveUpDownSelected', 'moveSelectedElements', 'cloneSelectedElements', 'alignSelectedElements', 'updateCanvas', 'setBackground', 'cycleElement', 'getPrivateMethods', 'zoomChanged', 'ready'
'clearSvgContentElement', 'setIdPrefix', 'getCurrentDrawing', 'addSvgElementFromJson', 'getTransformList', 'matrixMultiply', 'hasMatrixTransform', 'transformListToTransform', 'convertToNum', 'findDefs', 'getUrlFromAttr', 'getHref', 'setHref', 'getBBox', 'getRotationAngle', 'getElem', 'getRefElem', 'assignAttributes', 'cleanupElement', 'remapElement', 'recalculateDimensions', 'sanitizeSvg', 'runExtensions', 'addExtension', 'round', 'getIntersectionList', 'getStrokedBBox', 'getVisibleElements', 'getVisibleElementsAndBBoxes', 'groupSvgElem', 'getId', 'getNextId', 'call', 'bind', 'prepareSvg', 'setRotationAngle', 'recalculateAllSelectedDimensions', 'clearSelection', 'addToSelection', 'selectOnly', 'removeFromSelection', 'selectAllInCurrentLayer', 'getMouseTarget', 'removeUnusedDefElems', 'svgCanvasToString', 'svgToString', 'embedImage', 'setGoodImage', 'open', 'save', 'rasterExport', 'exportPDF', 'getSvgString', 'randomizeIds', 'uniquifyElems', 'setUseData', 'convertGradients', 'convertToGroup', 'setSvgString', 'importSvgString', 'identifyLayers', 'createLayer', 'cloneLayer', 'deleteCurrentLayer', 'setCurrentLayer', 'renameCurrentLayer', 'setCurrentLayerPosition', 'setLayerVisibility', 'moveSelectedToLayer', 'mergeLayer', 'mergeAllLayers', 'leaveContext', 'setContext', 'clear', 'linkControlPoints', 'getContentElem', 'getRootElem', 'getSelectedElems', 'getResolution', 'getZoom', 'getVersion', 'setUiStrings', 'setConfig', 'getTitle', 'setGroupTitle', 'getDocumentTitle', 'setDocumentTitle', 'getEditorNS', 'setResolution', 'getOffset', 'setBBoxZoom', 'setZoom', 'getMode', 'setMode', 'getColor', 'setColor', 'setGradient', 'setPaint', 'setStrokePaint', 'setFillPaint', 'getStrokeWidth', 'setStrokeWidth', 'setStrokeAttr', 'getStyle', 'getOpacity', 'setOpacity', 'getFillOpacity', 'getStrokeOpacity', 'setPaintOpacity', 'getPaintOpacity', 'getBlur', 'setBlurNoUndo', 'setBlurOffsets', 'setBlur', 'getBold', 'setBold', 'getItalic', 'setItalic', 'getFontFamily', 'setFontFamily', 'setFontColor', 'getFontColor', 'getFontSize', 'setFontSize', 'getText', 'setTextContent', 'setImageURL', 'setLinkURL', 'setRectRadius', 'makeHyperlink', 'removeHyperlink', 'setSegType', 'convertToPath', 'changeSelectedAttribute', 'deleteSelectedElements', 'cutSelectedElements', 'copySelectedElements', 'pasteElements', 'groupSelectedElements', 'pushGroupProperties', 'ungroupSelectedElement', 'moveToTopSelectedElement', 'moveToBottomSelectedElement', 'moveUpDownSelected', 'moveSelectedElements', 'cloneSelectedElements', 'alignSelectedElements', 'updateCanvas', 'setBackground', 'cycleElement', 'getPrivateMethods', 'zoomChanged', 'ready', 'getUIStrings'
];
// TODO: rewrite the following, it's pretty scary.
@@ -167,5 +167,3 @@ class EmbeddedSVGEdit {
return cbid;
}
}
export default EmbeddedSVGEdit;

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

@@ -23,7 +23,7 @@ export function importScript(url) {
destructor();
};
script.onload = () => {
resolve(window[vector]);
resolve();
destructor();
};
script.src = url;

514
editor/svg-editor.js
View File

@@ -579,13 +579,254 @@ editor.init = function () {
editor.putLocale(null, goodLangs, curConfig);
};
// Load extensions
// Bit of a hack to run extensions in local Opera/IE9
if (document.location.protocol === 'file:') {
setTimeout(extFunc, 100);
} else {
extFunc();
}
const stateObj = {tool_scale: editor.tool_scale};
const setFlyoutPositions = function () {
$('.tools_flyout').each(function () {
const shower = $('#' + this.id + '_show');
const pos = shower.offset();
const w = shower.outerWidth();
$(this).css({left: (pos.left + w) * editor.tool_scale, top: pos.top});
});
};
const scaleElements = function (elems, scale) {
// const prefix = '-' + uaPrefix.toLowerCase() + '-'; // Currently unused
const sides = ['top', 'left', 'bottom', 'right'];
elems.each(function () {
// Handled in CSS
// this.style[uaPrefix + 'Transform'] = 'scale(' + scale + ')';
const el = $(this);
const w = el.outerWidth() * (scale - 1);
const h = el.outerHeight() * (scale - 1);
// const margins = {}; // Currently unused
for (let i = 0; i < 4; i++) {
const s = sides[i];
let cur = el.data('orig_margin-' + s);
if (cur == null) {
cur = parseInt(el.css('margin-' + s), 10);
// Cache the original margin
el.data('orig_margin-' + s, cur);
}
let val = cur * scale;
if (s === 'right') {
val += w;
} else if (s === 'bottom') {
val += h;
}
el.css('margin-' + s, val);
// el.css('outline', '1px solid red');
}
});
};
const setIconSize = editor.setIconSize = function (size) {
// const elems = $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open');
const selToscale = '#tools_top .toolset, #editor_panel > *, #history_panel > *,' +
' #main_button, #tools_left > *, #path_node_panel > *, #multiselected_panel > *,' +
' #g_panel > *, #tool_font_size > *, .tools_flyout';
const elems = $(selToscale);
let scale = 1;
if (typeof size === 'number') {
scale = size;
} else {
const iconSizes = {s: 0.75, m: 1, l: 1.25, xl: 1.5};
scale = iconSizes[size];
}
stateObj.tool_scale = editor.tool_scale = scale;
setFlyoutPositions();
// $('.tools_flyout').each(function () {
// const pos = $(this).position();
// console.log($(this), pos.left+(34 * scale));
// $(this).css({left: pos.left+(34 * scale), top: pos.top+(77 * scale)});
// console.log('l', $(this).css('left'));
// });
//
// const scale = .75;
const hiddenPs = elems.parents(':hidden');
hiddenPs.css('visibility', 'hidden').show();
scaleElements(elems, scale);
hiddenPs.css('visibility', 'visible').hide();
// return;
$.pref('iconsize', size);
$('#iconsize').val(size);
// Change icon size
// $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open')
// .find('> svg, > img').each(function () {
// this.setAttribute('width',size_num);
// this.setAttribute('height',size_num);
// });
//
// $.resizeSvgIcons({
// '.flyout_arrow_horiz > svg, .flyout_arrow_horiz > img': size_num / 5,
// '#logo > svg, #logo > img': size_num * 1.3,
// '#tools_bottom .icon_label > *': (size_num === 16 ? 18 : size_num * .75)
// });
// if (size != 's') {
// $.resizeSvgIcons({'#layerbuttons svg, #layerbuttons img': size_num * .6});
// }
// Note that all rules will be prefixed with '#svg_editor' when parsed
const cssResizeRules = {
// '.tool_button,\
// .push_button,\
// .tool_button_current,\
// .push_button_pressed,\
// .disabled,\
// .icon_label,\
// .tools_flyout .tool_button': {
// width: {s: '16px', l: '32px', xl: '48px'},
// height: {s: '16px', l: '32px', xl: '48px'},
// padding: {s: '1px', l: '2px', xl: '3px'}
// },
// '.tool_sep': {
// height: {s: '16px', l: '32px', xl: '48px'},
// margin: {s: '2px 2px', l: '2px 5px', xl: '2px 8px'}
// },
// '#main_icon': {
// width: {s: '31px', l: '53px', xl: '75px'},
// height: {s: '22px', l: '42px', xl: '64px'}
// },
'#tools_top': {
left: 50 + $('#main_button').width(),
height: 72
},
'#tools_left': {
width: 31,
top: 74
},
'div#workarea': {
left: 38,
top: 74
}
// '#tools_bottom': {
// left: {s: '27px', l: '46px', xl: '65px'},
// height: {s: '58px', l: '98px', xl: '145px'}
// },
// '#color_tools': {
// 'border-spacing': {s: '0 1px'},
// 'margin-top': {s: '-1px'}
// },
// '#color_tools .icon_label': {
// width: {l:'43px', xl: '60px'}
// },
// '.color_tool': {
// height: {s: '20px'}
// },
// '#tool_opacity': {
// top: {s: '1px'},
// height: {s: 'auto', l:'auto', xl:'auto'}
// },
// '#tools_top input, #tools_bottom input': {
// 'margin-top': {s: '2px', l: '4px', xl: '5px'},
// height: {s: 'auto', l: 'auto', xl: 'auto'},
// border: {s: '1px solid #555', l: 'auto', xl: 'auto'},
// 'font-size': {s: '.9em', l: '1.2em', xl: '1.4em'}
// },
// '#zoom_panel': {
// 'margin-top': {s: '3px', l: '4px', xl: '5px'}
// },
// '#copyright, #tools_bottom .label': {
// 'font-size': {l: '1.5em', xl: '2em'},
// 'line-height': {s: '15px'}
// },
// '#tools_bottom_2': {
// width: {l: '295px', xl: '355px'},
// top: {s: '4px'}
// },
// '#tools_top > div, #tools_top': {
// 'line-height': {s: '17px', l: '34px', xl: '50px'}
// },
// '.dropdown button': {
// height: {s: '18px', l: '34px', xl: '40px'},
// 'line-height': {s: '18px', l: '34px', xl: '40px'},
// 'margin-top': {s: '3px'}
// },
// '#tools_top label, #tools_bottom label': {
// 'font-size': {s: '1em', l: '1.5em', xl: '2em'},
// height: {s: '25px', l: '42px', xl: '64px'}
// },
// 'div.toolset': {
// height: {s: '25px', l: '42px', xl: '64px'}
// },
// '#tool_bold, #tool_italic': {
// 'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
// },
// '#sidepanels': {
// top: {s: '50px', l: '88px', xl: '125px'},
// bottom: {s: '51px', l: '68px', xl: '65px'}
// },
// '#layerbuttons': {
// width: {l: '130px', xl: '175px'},
// height: {l: '24px', xl: '30px'}
// },
// '#layerlist': {
// width: {l: '128px', xl: '150px'}
// },
// '.layer_button': {
// width: {l: '19px', xl: '28px'},
// height: {l: '19px', xl: '28px'}
// },
// 'input.spin-button': {
// 'background-image': {l: 'url('images/spinbtn_updn_big.png')', xl: 'url('images/spinbtn_updn_big.png')'},
// 'background-position': {l: '100% -5px', xl: '100% -2px'},
// 'padding-right': {l: '24px', xl: '24px' }
// },
// 'input.spin-button.up': {
// 'background-position': {l: '100% -45px', xl: '100% -42px'}
// },
// 'input.spin-button.down': {
// 'background-position': {l: '100% -85px', xl: '100% -82px'}
// },
// '#position_opts': {
// width: {all: (size_num*4) +'px'}
// }
};
let ruleElem = $('#tool_size_rules');
if (!ruleElem.length) {
ruleElem = $('<style id="tool_size_rules"></style>').appendTo('head');
} else {
ruleElem.empty();
}
if (size !== 'm') {
let styleStr = '';
$.each(cssResizeRules, function (selector, rules) {
selector = '#svg_editor ' + selector.replace(/,/g, ', #svg_editor');
styleStr += selector + '{';
$.each(rules, function (prop, values) {
let val;
if (typeof values === 'number') {
val = (values * scale) + 'px';
} else if (values[size] || values.all) {
val = (values[size] || values.all);
}
styleStr += (prop + ':' + val + ';');
});
styleStr += '}';
});
// this.style[uaPrefix + 'Transform'] = 'scale(' + scale + ')';
const prefix = '-' + uaPrefix.toLowerCase() + '-';
styleStr += (selToscale + '{' + prefix + 'transform: scale(' + scale + ');}' +
' #svg_editor div.toolset .toolset {' + prefix + 'transform: scale(1); margin: 1px !important;}' + // Hack for markers
' #svg_editor .ui-slider {' + prefix + 'transform: scale(' + (1 / scale) + ');}' // Hack for sliders
);
ruleElem.text(styleStr);
}
setFlyoutPositions();
};
$.svgIcons(curConfig.imgPath + 'svg_edit_icons.svg', {
w: 24, h: 24,
id_match: false,
@@ -2053,15 +2294,6 @@ editor.init = function () {
});
};
const setFlyoutPositions = function () {
$('.tools_flyout').each(function () {
const shower = $('#' + this.id + '_show');
const pos = shower.offset();
const w = shower.outerWidth();
$(this).css({left: (pos.left + w) * editor.tool_scale, top: pos.top});
});
};
const setupFlyouts = function (holders) {
$.each(holders, function (holdSel, btnOpts) {
const buttons = $(holdSel).children();
@@ -2196,244 +2428,6 @@ editor.init = function () {
return '';
}());
const scaleElements = function (elems, scale) {
// const prefix = '-' + uaPrefix.toLowerCase() + '-'; // Currently unused
const sides = ['top', 'left', 'bottom', 'right'];
elems.each(function () {
// Handled in CSS
// this.style[uaPrefix + 'Transform'] = 'scale(' + scale + ')';
const el = $(this);
const w = el.outerWidth() * (scale - 1);
const h = el.outerHeight() * (scale - 1);
// const margins = {}; // Currently unused
for (let i = 0; i < 4; i++) {
const s = sides[i];
let cur = el.data('orig_margin-' + s);
if (cur == null) {
cur = parseInt(el.css('margin-' + s), 10);
// Cache the original margin
el.data('orig_margin-' + s, cur);
}
let val = cur * scale;
if (s === 'right') {
val += w;
} else if (s === 'bottom') {
val += h;
}
el.css('margin-' + s, val);
// el.css('outline', '1px solid red');
}
});
};
const setIconSize = editor.setIconSize = function (size) {
// const elems = $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open');
const selToscale = '#tools_top .toolset, #editor_panel > *, #history_panel > *,' +
' #main_button, #tools_left > *, #path_node_panel > *, #multiselected_panel > *,' +
' #g_panel > *, #tool_font_size > *, .tools_flyout';
const elems = $(selToscale);
let scale = 1;
if (typeof size === 'number') {
scale = size;
} else {
const iconSizes = {s: 0.75, m: 1, l: 1.25, xl: 1.5};
scale = iconSizes[size];
}
stateObj.tool_scale = editor.tool_scale = scale;
setFlyoutPositions();
// $('.tools_flyout').each(function () {
// const pos = $(this).position();
// console.log($(this), pos.left+(34 * scale));
// $(this).css({left: pos.left+(34 * scale), top: pos.top+(77 * scale)});
// console.log('l', $(this).css('left'));
// });
//
// const scale = .75;
const hiddenPs = elems.parents(':hidden');
hiddenPs.css('visibility', 'hidden').show();
scaleElements(elems, scale);
hiddenPs.css('visibility', 'visible').hide();
// return;
$.pref('iconsize', size);
$('#iconsize').val(size);
// Change icon size
// $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open')
// .find('> svg, > img').each(function () {
// this.setAttribute('width',size_num);
// this.setAttribute('height',size_num);
// });
//
// $.resizeSvgIcons({
// '.flyout_arrow_horiz > svg, .flyout_arrow_horiz > img': size_num / 5,
// '#logo > svg, #logo > img': size_num * 1.3,
// '#tools_bottom .icon_label > *': (size_num === 16 ? 18 : size_num * .75)
// });
// if (size != 's') {
// $.resizeSvgIcons({'#layerbuttons svg, #layerbuttons img': size_num * .6});
// }
// Note that all rules will be prefixed with '#svg_editor' when parsed
const cssResizeRules = {
// '.tool_button,\
// .push_button,\
// .tool_button_current,\
// .push_button_pressed,\
// .disabled,\
// .icon_label,\
// .tools_flyout .tool_button': {
// width: {s: '16px', l: '32px', xl: '48px'},
// height: {s: '16px', l: '32px', xl: '48px'},
// padding: {s: '1px', l: '2px', xl: '3px'}
// },
// '.tool_sep': {
// height: {s: '16px', l: '32px', xl: '48px'},
// margin: {s: '2px 2px', l: '2px 5px', xl: '2px 8px'}
// },
// '#main_icon': {
// width: {s: '31px', l: '53px', xl: '75px'},
// height: {s: '22px', l: '42px', xl: '64px'}
// },
'#tools_top': {
left: 50 + $('#main_button').width(),
height: 72
},
'#tools_left': {
width: 31,
top: 74
},
'div#workarea': {
left: 38,
top: 74
}
// '#tools_bottom': {
// left: {s: '27px', l: '46px', xl: '65px'},
// height: {s: '58px', l: '98px', xl: '145px'}
// },
// '#color_tools': {
// 'border-spacing': {s: '0 1px'},
// 'margin-top': {s: '-1px'}
// },
// '#color_tools .icon_label': {
// width: {l:'43px', xl: '60px'}
// },
// '.color_tool': {
// height: {s: '20px'}
// },
// '#tool_opacity': {
// top: {s: '1px'},
// height: {s: 'auto', l:'auto', xl:'auto'}
// },
// '#tools_top input, #tools_bottom input': {
// 'margin-top': {s: '2px', l: '4px', xl: '5px'},
// height: {s: 'auto', l: 'auto', xl: 'auto'},
// border: {s: '1px solid #555', l: 'auto', xl: 'auto'},
// 'font-size': {s: '.9em', l: '1.2em', xl: '1.4em'}
// },
// '#zoom_panel': {
// 'margin-top': {s: '3px', l: '4px', xl: '5px'}
// },
// '#copyright, #tools_bottom .label': {
// 'font-size': {l: '1.5em', xl: '2em'},
// 'line-height': {s: '15px'}
// },
// '#tools_bottom_2': {
// width: {l: '295px', xl: '355px'},
// top: {s: '4px'}
// },
// '#tools_top > div, #tools_top': {
// 'line-height': {s: '17px', l: '34px', xl: '50px'}
// },
// '.dropdown button': {
// height: {s: '18px', l: '34px', xl: '40px'},
// 'line-height': {s: '18px', l: '34px', xl: '40px'},
// 'margin-top': {s: '3px'}
// },
// '#tools_top label, #tools_bottom label': {
// 'font-size': {s: '1em', l: '1.5em', xl: '2em'},
// height: {s: '25px', l: '42px', xl: '64px'}
// },
// 'div.toolset': {
// height: {s: '25px', l: '42px', xl: '64px'}
// },
// '#tool_bold, #tool_italic': {
// 'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
// },
// '#sidepanels': {
// top: {s: '50px', l: '88px', xl: '125px'},
// bottom: {s: '51px', l: '68px', xl: '65px'}
// },
// '#layerbuttons': {
// width: {l: '130px', xl: '175px'},
// height: {l: '24px', xl: '30px'}
// },
// '#layerlist': {
// width: {l: '128px', xl: '150px'}
// },
// '.layer_button': {
// width: {l: '19px', xl: '28px'},
// height: {l: '19px', xl: '28px'}
// },
// 'input.spin-button': {
// 'background-image': {l: 'url('images/spinbtn_updn_big.png')', xl: 'url('images/spinbtn_updn_big.png')'},
// 'background-position': {l: '100% -5px', xl: '100% -2px'},
// 'padding-right': {l: '24px', xl: '24px' }
// },
// 'input.spin-button.up': {
// 'background-position': {l: '100% -45px', xl: '100% -42px'}
// },
// 'input.spin-button.down': {
// 'background-position': {l: '100% -85px', xl: '100% -82px'}
// },
// '#position_opts': {
// width: {all: (size_num*4) +'px'}
// }
};
let ruleElem = $('#tool_size_rules');
if (!ruleElem.length) {
ruleElem = $('<style id="tool_size_rules"></style>').appendTo('head');
} else {
ruleElem.empty();
}
if (size !== 'm') {
let styleStr = '';
$.each(cssResizeRules, function (selector, rules) {
selector = '#svg_editor ' + selector.replace(/,/g, ', #svg_editor');
styleStr += selector + '{';
$.each(rules, function (prop, values) {
let val;
if (typeof values === 'number') {
val = (values * scale) + 'px';
} else if (values[size] || values.all) {
val = (values[size] || values.all);
}
styleStr += (prop + ':' + val + ';');
});
styleStr += '}';
});
// this.style[uaPrefix + 'Transform'] = 'scale(' + scale + ')';
const prefix = '-' + uaPrefix.toLowerCase() + '-';
styleStr += (selToscale + '{' + prefix + 'transform: scale(' + scale + ');}' +
' #svg_editor div.toolset .toolset {' + prefix + 'transform: scale(1); margin: 1px !important;}' + // Hack for markers
' #svg_editor .ui-slider {' + prefix + 'transform: scale(' + (1 / scale) + ');}' // Hack for sliders
);
ruleElem.text(styleStr);
}
setFlyoutPositions();
};
// TODO: Combine this with addDropDown or find other way to optimize
const addAltDropDown = function (elem, list, callback, opts) {
const button = $(elem);
@@ -4822,7 +4816,6 @@ editor.init = function () {
});
// init SpinButtons
const stateObj = {tool_scale: editor.tool_scale};
$('#rect_rx').SpinButton({min: 0, max: 1000, stateObj, callback: changeRectRadius});
$('#stroke_width').SpinButton({min: 0, max: 99, smallStep: 0.1, stateObj, callback: changeStrokeWidth});
$('#angle').SpinButton({min: -180, max: 180, step: 5, stateObj, callback: changeRotationAngle});
@@ -4951,6 +4944,10 @@ editor.init = function () {
}
}, false);
editor.canvas.getUIStrings = function () {
return uiStrings;
};
editor.openPrep = function (func) {
$('#main_menu').hide();
if (undoMgr.getUndoStackSize() === 0) {
@@ -5156,6 +5153,13 @@ editor.init = function () {
curConfig,
setLang
});
// Load extensions
// Bit of a hack to run extensions in local Opera/IE9
if (document.location.protocol === 'file:') {
setTimeout(extFunc, 100);
} else {
extFunc();
}
};
editor.ready = function (cb) {

2
editor/svgutils.js
View File

@@ -1156,11 +1156,11 @@ export const executeAfterLoads = function (name, scripts, cb, options = {globals
// Todo: Once `import()` and modules widely supported, switch to it
return oldProm.then(() => importer(script));
}, Promise.resolve()).then(function () {
loadedScripts[name] = true;
endCallback();
loadedScripts[name].forEach((cb) => {
cb();
});
loadedScripts[name] = true;
})();
}
};