- Breaking change: Extension now formatted as export (and this is set to editor, including for callback)

- Breaking change: Locale now formatted as export
- Breaking change: Moved out remaining modular i18n (imagelib) to own folder
- Breaking change: Drop `executeAfterLoads` (and getJSPDF/getCanvg)
- Breaking change: `RGBColor` must accept `new`
- Breaking change: canvg - `stackBlurCanvasRGBA` must be set now by function (`setStackBlurCanvasRGBA`) rather than global; `canvg` now a named export
- Breaking change: Avoid passing `canvg`/`buildCanvgCallback` to extensions (have them import)
- Fix: i18nize imaglib more deeply
- Fix: Positioning of Document Properties dialog (Fixes #246)
- Fix (regression): PDF Export (Fixes #249)
- Fix (regression): Add polyfill for `ChildNode`/`ParentNode` (and use further)
- Fix (regression): Apply Babel universally to dependencies
- Fix (regression): Ordering of `uaPrefix` function in `svgEditor.js`
- Fix (regression): Embedded API
- Fix (embedded editor): Fix backspace key in Firefox so it doesn't navigate out of frame
- Fix: Alert if no exportWindow for PDF (e.g., if blocked)
- Refactoring( RGBColor) `RGBColor` as class, without rebuilding constants, optimize string replacement, move methods to prototype, use templates and object literals, use `Object.keys`
- Refactoring (canvg) Use classes more internally, use shorthand objects; array extras, return to lazy-loading
- Refactoring: Use Promises in place of `$.getScript`; always return Promises in case deciding to await resolving
- Refactoring: Avoid importing `RGBColor` into `svgutils.js` (jsPDF imports it itself)
- Refactoring: Arrow functions, destructuring, shorter property references
- Refactoring: Fix `lang` and `dir` for locales (though not in use currently anyways)
- Refactoring: Provide path config for canvg, jspdf
This commit is contained in:
Brett Zamir
2018-06-02 09:14:38 +08:00
parent a2df54881f
commit 9f65b1adb9
226 changed files with 26026 additions and 19715 deletions

View File

@@ -2,7 +2,7 @@
import * as contextmenu from '../editor/contextmenu.js';
// log function
QUnit.log(function (details) {
QUnit.log((details) => {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}

View File

@@ -4,7 +4,7 @@ import * as utilities from '../editor/svgutils.js';
import * as coords from '../editor/coords.js';
// log function
QUnit.log(function (details) {
QUnit.log((details) => {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
@@ -13,9 +13,9 @@ QUnit.log(function (details) {
const root = document.getElementById('root');
const svgroot = document.createElementNS(NS.SVG, 'svg');
svgroot.id = 'svgroot';
root.appendChild(svgroot);
root.append(svgroot);
const svg = document.createElementNS(NS.SVG, 'svg');
svgroot.appendChild(svg);
svgroot.append(svg);
let elemId = 1;
function setUp () {
@@ -37,7 +37,7 @@ function setUp () {
function tearDown () {
while (svg.hasChildNodes()) {
svg.removeChild(svg.firstChild);
svg.firstChild.remove();
}
}
@@ -51,7 +51,7 @@ QUnit.test('Test remapElement(translate) for rect', function (assert) {
rect.setAttribute('y', '150');
rect.setAttribute('width', '250');
rect.setAttribute('height', '120');
svg.appendChild(rect);
svg.append(rect);
const attrs = {
x: '200',
@@ -83,7 +83,7 @@ QUnit.test('Test remapElement(scale) for rect', function (assert) {
const rect = document.createElementNS(NS.SVG, 'rect');
rect.setAttribute('width', '250');
rect.setAttribute('height', '120');
svg.appendChild(rect);
svg.append(rect);
const attrs = {
x: '0',
@@ -116,7 +116,7 @@ QUnit.test('Test remapElement(translate) for circle', function (assert) {
circle.setAttribute('cx', '200');
circle.setAttribute('cy', '150');
circle.setAttribute('r', '125');
svg.appendChild(circle);
svg.append(circle);
const attrs = {
cx: '200',
@@ -147,7 +147,7 @@ QUnit.test('Test remapElement(scale) for circle', function (assert) {
circle.setAttribute('cx', '200');
circle.setAttribute('cy', '150');
circle.setAttribute('r', '250');
svg.appendChild(circle);
svg.append(circle);
const attrs = {
cx: '200',
@@ -180,7 +180,7 @@ QUnit.test('Test remapElement(translate) for ellipse', function (assert) {
ellipse.setAttribute('cy', '150');
ellipse.setAttribute('rx', '125');
ellipse.setAttribute('ry', '75');
svg.appendChild(ellipse);
svg.append(ellipse);
const attrs = {
cx: '200',
@@ -214,7 +214,7 @@ QUnit.test('Test remapElement(scale) for ellipse', function (assert) {
ellipse.setAttribute('cy', '150');
ellipse.setAttribute('rx', '250');
ellipse.setAttribute('ry', '120');
svg.appendChild(ellipse);
svg.append(ellipse);
const attrs = {
cx: '200',
@@ -248,7 +248,7 @@ QUnit.test('Test remapElement(translate) for line', function (assert) {
line.setAttribute('y1', '100');
line.setAttribute('x2', '120');
line.setAttribute('y2', '200');
svg.appendChild(line);
svg.append(line);
const attrs = {
x1: '50',
@@ -282,7 +282,7 @@ QUnit.test('Test remapElement(scale) for line', function (assert) {
line.setAttribute('y1', '100');
line.setAttribute('x2', '120');
line.setAttribute('y2', '200');
svg.appendChild(line);
svg.append(line);
const attrs = {
x1: '50',
@@ -314,7 +314,7 @@ QUnit.test('Test remapElement(translate) for text', function (assert) {
const text = document.createElementNS(NS.SVG, 'text');
text.setAttribute('x', '50');
text.setAttribute('y', '100');
svg.appendChild(text);
svg.append(text);
const attrs = {
x: '50',

View File

@@ -15,7 +15,7 @@ sinon.test = sinonTest(sinon, {
sinonQunit({sinon, QUnit});
// log function
QUnit.log(function (details) {
QUnit.log((details) => {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
@@ -39,7 +39,7 @@ const PATH_ATTR = {
const svg = document.createElementNS(NS.SVG, 'svg');
const sandbox = document.getElementById('sandbox');
// Firefox throws exception in getBBox() when svg is not attached to DOM.
sandbox.appendChild(svg);
sandbox.append(svg);
// Set up <svg> with nonce.
const svgN = document.createElementNS(NS.SVG, 'svg');
@@ -76,57 +76,59 @@ function createSVGElement (jsonMap) {
const setupSvgWith3Layers = function (svgElem) {
const layer1 = document.createElementNS(NS.SVG, 'g');
const layer1Title = document.createElementNS(NS.SVG, 'title');
layer1Title.appendChild(document.createTextNode(LAYER1));
layer1.appendChild(layer1Title);
svgElem.appendChild(layer1);
layer1Title.append(document.createTextNode(LAYER1));
layer1.append(layer1Title);
svgElem.append(layer1);
const layer2 = document.createElementNS(NS.SVG, 'g');
const layer2Title = document.createElementNS(NS.SVG, 'title');
layer2Title.appendChild(document.createTextNode(LAYER2));
layer2.appendChild(layer2Title);
svgElem.appendChild(layer2);
layer2Title.append(document.createTextNode(LAYER2));
layer2.append(layer2Title);
svgElem.append(layer2);
const layer3 = document.createElementNS(NS.SVG, 'g');
const layer3Title = document.createElementNS(NS.SVG, 'title');
layer3Title.appendChild(document.createTextNode(LAYER3));
layer3.appendChild(layer3Title);
svgElem.appendChild(layer3);
layer3Title.append(document.createTextNode(LAYER3));
layer3.append(layer3Title);
svgElem.append(layer3);
return [layer1, layer2, layer3];
};
const createSomeElementsInGroup = function (group) {
group.appendChild(createSVGElement({
element: 'path',
attr: PATH_ATTR
}));
// group.appendChild(createSVGElement({
// element: 'path',
// attr: {d: 'M0,1L2,3'}
// }));
group.appendChild(createSVGElement({
element: 'rect',
attr: {x: '0', y: '1', width: '5', height: '10'}
}));
group.appendChild(createSVGElement({
element: 'line',
attr: {x1: '0', y1: '1', x2: '5', y2: '6'}
}));
group.append(
createSVGElement({
element: 'path',
attr: PATH_ATTR
}),
// createSVGElement({
// element: 'path',
// attr: {d: 'M0,1L2,3'}
// }),
createSVGElement({
element: 'rect',
attr: {x: '0', y: '1', width: '5', height: '10'}
}),
createSVGElement({
element: 'line',
attr: {x1: '0', y1: '1', x2: '5', y2: '6'}
})
);
const g = createSVGElement({
element: 'g',
attr: {}
});
g.appendChild(createSVGElement({
g.append(createSVGElement({
element: 'rect',
attr: {x: '0', y: '1', width: '5', height: '10'}
}));
group.appendChild(g);
group.append(g);
return 4;
};
const cleanupSvg = function (svgElem) {
while (svgElem.firstChild) { svgElem.removeChild(svgElem.firstChild); }
while (svgElem.firstChild) { svgElem.firstChild.remove(); }
};
QUnit.module('svgedit.draw.Drawing', {
@@ -190,7 +192,7 @@ QUnit.test('Test getId() and getNextId() without nonce', function (assert) {
const elem2 = document.createElementNS(NS.SVG, 'circle');
elem2.id = 'svg_2';
svg.appendChild(elem2);
svg.append(elem2);
const doc = new draw.Drawing(svg);
@@ -235,7 +237,7 @@ QUnit.test('Test getId() and getNextId() with nonce', function (assert) {
const elem2 = document.createElementNS(NS.SVG, 'circle');
elem2.id = prefix + '_2';
svgN.appendChild(elem2);
svgN.append(elem2);
const doc = new draw.Drawing(svgN);
@@ -382,8 +384,7 @@ QUnit.test('Test identifyLayers() with some layers and orphans', function (asser
const orphan1 = document.createElementNS(NS.SVG, 'rect');
const orphan2 = document.createElementNS(NS.SVG, 'rect');
svg.appendChild(orphan1);
svg.appendChild(orphan2);
svg.append(orphan1, orphan2);
assert.equal(svg.childNodes.length, 5);

View File

@@ -8,7 +8,7 @@ import * as history from '../editor/history.js';
// TODO(codedread): Write tests for handling history events.
// Mocked out methods.
transformlist.changeRemoveElementFromListMap(function (elem) {});
transformlist.changeRemoveElementFromListMap((elem) => {});
utilities.mock({
getHref (elem) { return '#foo'; },
@@ -17,7 +17,7 @@ utilities.mock({
});
// log function
QUnit.log(function (details) {
QUnit.log((details) => {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}

View File

@@ -1,7 +1,7 @@
/* eslint-env qunit */
// log function
QUnit.log(function (details) {
QUnit.log((details) => {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}

View File

@@ -3,7 +3,7 @@ import {NS} from '../editor/svgedit.js';
import * as math from '../editor/math.js';
// log function
QUnit.log(function (details) {
QUnit.log((details) => {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}

View File

@@ -5,7 +5,7 @@ import * as utilities from '../editor/svgutils.js';
import * as pathModule from '../editor/path.js';
// log function
QUnit.log(function (details) {
QUnit.log((details) => {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
@@ -15,7 +15,7 @@ function getMockContext (svg) {
svg = svg || document.createElementNS(NS.SVG, 'svg');
const selectorParentGroup = document.createElementNS(NS.SVG, 'g');
selectorParentGroup.setAttribute('id', 'selectorParentGroup');
svg.appendChild(selectorParentGroup);
svg.append(selectorParentGroup);
return {
getDOMDocument () { return svg; },
getDOMContainer () { return svg; },
@@ -80,7 +80,7 @@ QUnit.test('Test svgedit.path.Segment.setType with control points', function (as
const svg = document.createElementNS(NS.SVG, 'svg');
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z');
svg.appendChild(path);
svg.append(path);
const mockContext = getMockContext(svg);
pathModule.init(mockContext);

View File

@@ -6,7 +6,7 @@ import * as coords from '../editor/coords.js';
import * as recalculate from '../editor/recalculate.js';
// log function
QUnit.log(function (details) {
QUnit.log((details) => {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
@@ -15,9 +15,9 @@ QUnit.log(function (details) {
const root = document.getElementById('root');
const svgroot = document.createElementNS(NS.SVG, 'svg');
svgroot.id = 'svgroot';
root.appendChild(svgroot);
root.append(svgroot);
const svg = document.createElementNS(NS.SVG, 'svg');
svgroot.appendChild(svg);
svgroot.append(svg);
let elemId = 1;
function setUp () {
@@ -50,7 +50,7 @@ function setUpRect () {
elem.setAttribute('y', '150');
elem.setAttribute('width', '250');
elem.setAttribute('height', '120');
svg.appendChild(elem);
svg.append(elem);
}
function setUpTextWithTspan () {
@@ -64,14 +64,14 @@ function setUpTextWithTspan () {
tspan.setAttribute('y', '150');
const theText = document.createTextNode('Foo bar');
tspan.appendChild(theText);
elem.appendChild(tspan);
svg.appendChild(elem);
tspan.append(theText);
elem.append(tspan);
svg.append(elem);
}
function tearDown () {
while (svg.hasChildNodes()) {
svg.removeChild(svg.firstChild);
svg.firstChild.remove();
}
}

View File

@@ -3,7 +3,7 @@ import {NS} from '../editor/svgedit.js';
import * as sanitize from '../editor/sanitize.js';
// log function
QUnit.log(function (details) {
QUnit.log((details) => {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
@@ -17,7 +17,7 @@ QUnit.test('Test sanitizeSvg() strips ws from style attr', function (assert) {
const rect = document.createElementNS(NS.SVG, 'rect');
rect.setAttribute('style', 'stroke: blue ; stroke-width : 40;');
// sanitizeSvg() requires the node to have a parent and a document.
svg.appendChild(rect);
svg.append(rect);
sanitize.sanitizeSvg(rect);
assert.equal(rect.getAttribute('stroke'), 'blue');

View File

@@ -3,7 +3,7 @@ import {NS} from '../editor/svgedit.js';
import * as select from '../editor/select.js';
// log function
QUnit.log(function (details) {
QUnit.log((details) => {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
@@ -52,7 +52,7 @@ function setUp () {
}
})
);
sandbox.appendChild(svgroot);
sandbox.append(svgroot);
}
/*
@@ -64,7 +64,7 @@ function setUpWithInit () {
function tearDown () {
while (sandbox.hasChildNodes()) {
sandbox.removeChild(sandbox.firstChild);
sandbox.firstChild.remove();
}
}

View File

@@ -12,7 +12,7 @@ expectOutOfBoundsExceptionPlugin(QUnit);
disableSupportsNativeTransformLists();
// log function
QUnit.log(function (details) {
QUnit.log((details) => {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
@@ -32,7 +32,7 @@ function setUp () {
function tearDown () {
transformlist.resetListMap();
while (svgroot.hasChildNodes()) {
svgroot.removeChild(svgroot.firstChild);
svgroot.firstChild.remove();
}
}

View File

@@ -10,7 +10,7 @@ import closePlugin from './qunit/qunit-assert-close.js';
closePlugin(QUnit);
// log function
QUnit.log(function (details) {
QUnit.log((details) => {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
@@ -26,7 +26,7 @@ function mockCreateSVGElement (jsonMap) {
let mockAddSvgElementFromJsonCallCount = 0;
function mockAddSvgElementFromJson (json) {
const elem = mockCreateSVGElement(json);
svgroot.appendChild(elem);
svgroot.append(elem);
mockAddSvgElementFromJsonCallCount++;
return elem;
}
@@ -67,7 +67,7 @@ const svgroot = mockCreateSVGElement({
element: 'svg',
attr: {id: 'svgroot'}
});
sandbox.appendChild(svgroot);
sandbox.append(svgroot);
QUnit.module('svgedit.utilities_bbox', {
beforeEach () {
@@ -95,31 +95,31 @@ QUnit.test('Test getBBoxWithTransform and no transform', function (assert) {
element: 'path',
attr: {id: 'path', d: 'M0,1 L2,3'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
let bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2});
assert.equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
assert.equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
assert.equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'rect',
@@ -129,12 +129,12 @@ QUnit.test('Test getBBoxWithTransform and no transform', function (assert) {
element: 'g',
attr: {}
});
g.appendChild(elem);
svgroot.appendChild(g);
g.append(elem);
svgroot.append(g);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
assert.equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(g);
g.remove();
});
QUnit.test('Test getBBoxWithTransform and a rotation transform', function (assert) {
@@ -144,26 +144,26 @@ QUnit.test('Test getBBoxWithTransform and a rotation transform', function (asser
element: 'path',
attr: {id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10)'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
let bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
assert.close(bbox.x, 10, EPSILON);
assert.close(bbox.y, 10, EPSILON);
assert.close(bbox.width, 0, EPSILON);
assert.close(bbox.height, Math.sqrt(100 + 100), EPSILON);
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'rect',
attr: {id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20)'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
assert.close(bbox.x, 5, EPSILON);
assert.close(bbox.y, 15, EPSILON);
assert.close(bbox.width, 20, EPSILON);
assert.close(bbox.height, 10, EPSILON);
assert.equal(mockAddSvgElementFromJsonCallCount, 1);
svgroot.removeChild(elem);
elem.remove();
const rect = {x: 10, y: 10, width: 10, height: 20};
const angle = 45;
@@ -172,7 +172,7 @@ QUnit.test('Test getBBoxWithTransform and a rotation transform', function (asser
element: 'rect',
attr: {id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
mockAddSvgElementFromJsonCallCount = 0;
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
const r2 = rotateRect(rect, angle, origin);
@@ -181,7 +181,7 @@ QUnit.test('Test getBBoxWithTransform and a rotation transform', function (asser
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
assert.equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(elem);
elem.remove();
// Same as previous but wrapped with g and the transform is with the g.
elem = mockCreateSVGElement({
@@ -192,8 +192,8 @@ QUnit.test('Test getBBoxWithTransform and a rotation transform', function (asser
element: 'g',
attr: {transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')'}
});
g.appendChild(elem);
svgroot.appendChild(g);
g.append(elem);
svgroot.append(g);
mockAddSvgElementFromJsonCallCount = 0;
bbox = getBBoxWithTransform(g, mockAddSvgElementFromJson, mockPathActions);
assert.close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x);
@@ -201,13 +201,13 @@ QUnit.test('Test getBBoxWithTransform and a rotation transform', function (asser
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
assert.equal(mockAddSvgElementFromJsonCallCount, 0);
svgroot.removeChild(g);
g.remove();
elem = mockCreateSVGElement({
element: 'ellipse',
attr: {id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100)'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
mockAddSvgElementFromJsonCallCount = 0;
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
// TODO: the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100.
@@ -216,7 +216,7 @@ QUnit.test('Test getBBoxWithTransform and a rotation transform', function (asser
assert.ok(bbox.width >= 100 && bbox.width < 110);
assert.ok(bbox.height >= 100 && bbox.height < 110);
assert.equal(mockAddSvgElementFromJsonCallCount, 1);
svgroot.removeChild(elem);
elem.remove();
});
QUnit.test('Test getBBoxWithTransform with rotation and matrix transforms', function (assert) {
@@ -231,13 +231,13 @@ QUnit.test('Test getBBoxWithTransform with rotation and matrix transforms', func
element: 'path',
attr: {id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10) ' + matrix}
});
svgroot.appendChild(elem);
svgroot.append(elem);
let bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
assert.close(bbox.x, 10 + tx, EPSILON);
assert.close(bbox.y, 10 + ty, EPSILON);
assert.close(bbox.width, 0, EPSILON);
assert.close(bbox.height, Math.sqrt(100 + 100), EPSILON);
svgroot.removeChild(elem);
elem.remove();
txInRotatedSpace = tx; // translate in rotated 90 space.
tyInRotatedSpace = -ty;
@@ -246,13 +246,13 @@ QUnit.test('Test getBBoxWithTransform with rotation and matrix transforms', func
element: 'rect',
attr: {id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20) ' + matrix}
});
svgroot.appendChild(elem);
svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
assert.close(bbox.x, 5 + tx, EPSILON);
assert.close(bbox.y, 15 + ty, EPSILON);
assert.close(bbox.width, 20, EPSILON);
assert.close(bbox.height, 10, EPSILON);
svgroot.removeChild(elem);
elem.remove();
const rect = {x: 10, y: 10, width: 10, height: 20};
const angle = 45;
@@ -266,14 +266,14 @@ QUnit.test('Test getBBoxWithTransform with rotation and matrix transforms', func
element: 'rect',
attr: {id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix}
});
svgroot.appendChild(elem);
svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
const r2 = rotateRect(rect, angle, origin);
assert.close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x);
assert.close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y);
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
svgroot.removeChild(elem);
elem.remove();
// Same as previous but wrapped with g and the transform is with the g.
elem = mockCreateSVGElement({
@@ -284,27 +284,27 @@ QUnit.test('Test getBBoxWithTransform with rotation and matrix transforms', func
element: 'g',
attr: {transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix}
});
g.appendChild(elem);
svgroot.appendChild(g);
g.append(elem);
svgroot.append(g);
bbox = getBBoxWithTransform(g, mockAddSvgElementFromJson, mockPathActions);
assert.close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x);
assert.close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y);
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
svgroot.removeChild(g);
g.remove();
elem = mockCreateSVGElement({
element: 'ellipse',
attr: {id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100) ' + matrix}
});
svgroot.appendChild(elem);
svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockAddSvgElementFromJson, mockPathActions);
// TODO: the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100.
assert.ok(bbox.x > 45 + tx && bbox.x <= 50 + tx);
assert.ok(bbox.y > 45 + ty && bbox.y <= 50 + ty);
assert.ok(bbox.width >= 100 && bbox.width < 110);
assert.ok(bbox.height >= 100 && bbox.height < 110);
svgroot.removeChild(elem);
elem.remove();
});
QUnit.test('Test getStrokedBBox with stroke-width 10', function (assert) {
@@ -315,28 +315,28 @@ QUnit.test('Test getStrokedBBox with stroke-width 10', function (assert) {
element: 'path',
attr: {id: 'path', d: 'M0,1 L2,3', 'stroke-width': strokeWidth}
});
svgroot.appendChild(elem);
svgroot.append(elem);
let bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 2 + strokeWidth, height: 2 + strokeWidth});
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': strokeWidth}
});
svgroot.appendChild(elem);
svgroot.append(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth});
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': strokeWidth}
});
svgroot.appendChild(elem);
svgroot.append(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 5 + strokeWidth});
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'rect',
@@ -346,11 +346,11 @@ QUnit.test('Test getStrokedBBox with stroke-width 10', function (assert) {
element: 'g',
attr: {}
});
g.appendChild(elem);
svgroot.appendChild(g);
g.append(elem);
svgroot.append(g);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth});
svgroot.removeChild(g);
g.remove();
});
QUnit.test("Test getStrokedBBox with stroke-width 'none'", function (assert) {
@@ -360,28 +360,28 @@ QUnit.test("Test getStrokedBBox with stroke-width 'none'", function (assert) {
element: 'path',
attr: {id: 'path', d: 'M0,1 L2,3', 'stroke-width': 'none'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
let bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2});
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': 'none'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': 'none'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'rect',
@@ -391,11 +391,11 @@ QUnit.test("Test getStrokedBBox with stroke-width 'none'", function (assert) {
element: 'g',
attr: {}
});
g.appendChild(elem);
svgroot.appendChild(g);
g.append(elem);
svgroot.append(g);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(g);
g.remove();
});
QUnit.test('Test getStrokedBBox with no stroke-width attribute', function (assert) {
@@ -405,28 +405,28 @@ QUnit.test('Test getStrokedBBox with no stroke-width attribute', function (asser
element: 'path',
attr: {id: 'path', d: 'M0,1 L2,3'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
let bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2});
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'rect',
@@ -436,11 +436,11 @@ QUnit.test('Test getStrokedBBox with no stroke-width attribute', function (asser
element: 'g',
attr: {}
});
g.appendChild(elem);
svgroot.appendChild(g);
g.append(elem);
svgroot.append(g);
bbox = getStrokedBBox([elem], mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(g);
g.remove();
});
function radians (degrees) {

View File

@@ -6,7 +6,7 @@ import * as transformlist from '../editor/svgtransformlist.js';
import * as math from '../editor/math.js';
// log function
QUnit.log(function (details) {
QUnit.log((details) => {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
@@ -23,7 +23,7 @@ function mockCreateSVGElement (jsonMap) {
}
function mockAddSvgElementFromJson (json) {
const elem = mockCreateSVGElement(json);
currentLayer.appendChild(elem);
currentLayer.append(elem);
return elem;
}
@@ -38,7 +38,7 @@ function fillDocumentByCloningElement (elem, count) {
// Make sure you set a unique ID like a real document.
clone.setAttribute('id', elemId + index);
const parent = elem.parentNode;
parent.appendChild(clone);
parent.append(clone);
}
}

View File

@@ -5,7 +5,7 @@ import * as utilities from '../editor/svgutils.js';
import * as browser from '../editor/browser.js';
// log function
QUnit.log(function (details) {
QUnit.log((details) => {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}
@@ -20,7 +20,7 @@ function mockCreateSVGElement (jsonMap) {
}
function mockAddSvgElementFromJson (json) {
const elem = mockCreateSVGElement(json);
svgroot.appendChild(elem);
svgroot.append(elem);
return elem;
}
const mockPathActions = {resetOrientation () {}};
@@ -61,7 +61,7 @@ const svgroot = mockCreateSVGElement({
element: 'svg',
attr: {id: 'svgroot'}
});
sandbox.appendChild(svgroot);
sandbox.append(svgroot);
QUnit.module('svgedit.utilities', {
beforeEach () {
@@ -210,50 +210,50 @@ QUnit.test('Test getPathDFromElement', function (assert) {
element: 'path',
attr: {id: 'path', d: 'M0,1 Z'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
assert.equal(getPathDFromElement(elem), 'M0,1 Z');
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
assert.equal(getPathDFromElement(elem), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z');
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'rect',
attr: {id: 'roundrect', x: '0', y: '1', rx: '2', ry: '3', width: '10', height: '11'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
const closeEnough = new RegExp('M0,4 C0,2.3[0-9]* 0.9[0-9]*,1 2,1 L8,1 C9.0[0-9]*,1 10,2.3[0-9]* 10,4 L10,9 C10,10.6[0-9]* 9.08675799086758,12 8,12 L2,12 C0.9[0-9]*,12 0,10.6[0-9]* 0,9 L0,4 Z');
assert.equal(closeEnough.test(getPathDFromElement(elem)), true);
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
assert.equal(getPathDFromElement(elem), 'M0,1L5,6');
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'circle',
attr: {id: 'circle', cx: '10', cy: '11', rx: '5', ry: '10'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
assert.equal(getPathDFromElement(elem), 'M10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 C10,11 10,11 10,11 Z');
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'polyline',
attr: {id: 'polyline', points: '0,1 5,1 5,11 0,11'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
assert.equal(getPathDFromElement(elem), 'M0,1 5,1 5,11 0,11');
svgroot.removeChild(elem);
elem.remove();
assert.equal(getPathDFromElement({tagName: 'something unknown'}), undefined);
});
@@ -268,28 +268,28 @@ QUnit.test('Test getBBoxOfElementAsPath', function (assert) {
element: 'path',
attr: {id: 'path', d: 'M0,1 Z'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
let bbox = getBBoxOfElementAsPath(elem, mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 0, height: 0});
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
bbox = getBBoxOfElementAsPath(elem, mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10});
svgroot.removeChild(elem);
elem.remove();
elem = mockCreateSVGElement({
element: 'line',
attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
bbox = getBBoxOfElementAsPath(elem, mockAddSvgElementFromJson, mockPathActions);
assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5});
svgroot.removeChild(elem);
elem.remove();
// TODO: test element with transform. Need resetOrientation above to be working or mock it.
});
@@ -307,7 +307,7 @@ QUnit.test('Test convertToPath rect', function (assert) {
element: 'rect',
attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'}
});
svgroot.appendChild(elem);
svgroot.append(elem);
const path = convertToPath(elem, attrs, mockAddSvgElementFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory);
assert.equal(path.getAttribute('d'), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z');
assert.equal(path.getAttribute('visibilituy'), null);
@@ -318,7 +318,7 @@ QUnit.test('Test convertToPath rect', function (assert) {
assert.equal(mockCount.clearSelection, 1);
assert.equal(mockCount.addToSelection, 1);
assert.equal(mockCount.addCommandToHistory, 1);
svgroot.removeChild(path);
path.remove();
});
QUnit.test('Test convertToPath unknown element', function (assert) {

View File

@@ -4,7 +4,7 @@ import '../editor/pathseg.js';
import SvgCanvas from '../editor/svgcanvas.js';
// log function
QUnit.log(function (details) {
QUnit.log((details) => {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}

View File

@@ -2,7 +2,7 @@
import * as units from '../editor/units.js';
// log function
QUnit.log(function (details) {
QUnit.log((details) => {
if (window.console && window.console.log) {
window.console.log(details.result + ' :: ' + details.message);
}