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

refactor (incomplete)

Browse Source
This commit is contained in:
JFH
2021-12-25 17:25:12 -03:00
parent a529258774
commit 11ee55067c
42 changed files with 1626 additions and 2326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/integration/unit/coords.js
View File

@@ -27,7 +27,7 @@ describe('coords', function () {
* @implements {module:utilities.EditorContext} * @implements {module:utilities.EditorContext}
*/ */
{ {
getSVGRoot: () => { return this.svg; }, getSvgRoot: () => { return this.svg; },
getDOMDocument () { return null; }, getDOMDocument () { return null; },
getDOMContainer () { return null; } getDOMContainer () { return null; }
} }

4
cypress/integration/unit/draw.js
View File

@@ -138,8 +138,8 @@ describe('draw.Drawing', function () {
svgN.setAttributeNS(NS.XMLNS, 'xmlns:se', NS.SE); svgN.setAttributeNS(NS.XMLNS, 'xmlns:se', NS.SE);
svgN.setAttributeNS(NS.SE, 'se:nonce', NONCE); svgN.setAttributeNS(NS.SE, 'se:nonce', NONCE);
const svgcontent = document.createElementNS(NS.SVG, 'svg'); const svgContent = document.createElementNS(NS.SVG, 'svg');
currentDrawing_ = new draw.Drawing(svgcontent, idprefix); currentDrawing_ = new draw.Drawing(svgContent, idprefix);
}); });
it('Test draw module', function () { it('Test draw module', function () {

6
cypress/integration/unit/path.js
View File

@@ -27,8 +27,8 @@ describe('path', function () {
* @implements {module:path.EditorContext} * @implements {module:path.EditorContext}
*/ */
{ {
getSVGRoot () { return svg; }, getSvgRoot () { return svg; },
getCurrentZoom () { return 1; } getZoom () { return 1; }
}, },
/** /**
* @implements {module:utilities.EditorContext} * @implements {module:utilities.EditorContext}
@@ -36,7 +36,7 @@ describe('path', function () {
{ {
getDOMDocument () { return svg; }, getDOMDocument () { return svg; },
getDOMContainer () { return svg; }, getDOMContainer () { return svg; },
getSVGRoot () { return svg; } getSvgRoot () { return svg; }
} }
]; ];
} }

4
cypress/integration/unit/recalculate.js
View File

@@ -50,7 +50,7 @@ describe('recalculate', function () {
* @implements {module:utilities.EditorContext} * @implements {module:utilities.EditorContext}
*/ */
{ {
getSVGRoot() { return svg; }, getSvgRoot() { return svg; },
getDOMDocument() { return null; }, getDOMDocument() { return null; },
getDOMContainer() { return null; }, getDOMContainer() { return null; },
getDataStorage() { return dataStorage; } getDataStorage() { return dataStorage; }
@@ -75,7 +75,7 @@ describe('recalculate', function () {
* @implements {module:recalculate.EditorContext} * @implements {module:recalculate.EditorContext}
*/ */
{ {
getSVGRoot() { return svg; }, getSvgRoot() { return svg; },
getStartTransform() { return ''; }, getStartTransform() { return ''; },
setStartTransform() { /* empty fn */ }, setStartTransform() { /* empty fn */ },
getDataStorage() { return dataStorage; } getDataStorage() { return dataStorage; }

14
cypress/integration/unit/select.js
View File

@@ -6,7 +6,7 @@ describe('select', function () {
sandbox.id = 'sandbox'; sandbox.id = 'sandbox';
let svgroot; let svgroot;
let svgcontent; let svgContent;
const mockConfig = { const mockConfig = {
dimensions: [ 640, 480 ] dimensions: [ 640, 480 ]
}; };
@@ -45,7 +45,7 @@ describe('select', function () {
return elem; return elem;
}, },
svgRoot () { return svgroot; }, svgRoot () { return svgroot; },
svgContent () { return svgcontent; }, svgContent () { return svgContent; },
getDataStorage () { return dataStorage; } getDataStorage () { return dataStorage; }
}; };
@@ -58,13 +58,13 @@ describe('select', function () {
element: 'svg', element: 'svg',
attr: { id: 'svgroot' } attr: { id: 'svgroot' }
}); });
svgcontent = mockFactory.createSVGElement({ svgContent = mockFactory.createSVGElement({
element: 'svg', element: 'svg',
attr: { id: 'svgcontent' } attr: { id: 'svgcontent' }
}); });
svgroot.append(svgcontent); svgroot.append(svgContent);
/* const rect = */ svgcontent.append( /* const rect = */ svgContent.append(
mockFactory.createSVGElement({ mockFactory.createSVGElement({
element: 'rect', element: 'rect',
attr: { attr: {
@@ -114,7 +114,7 @@ describe('select', function () {
// Verify non-existence of Selector DOM nodes // Verify non-existence of Selector DOM nodes
assert.equal(svgroot.childNodes.length, 1); assert.equal(svgroot.childNodes.length, 1);
assert.equal(svgroot.childNodes.item(0), svgcontent); assert.equal(svgroot.childNodes.item(0), svgContent);
assert.ok(!svgroot.querySelector('#selectorParentGroup')); assert.ok(!svgroot.querySelector('#selectorParentGroup'));
select.init(mockConfig, mockFactory); select.init(mockConfig, mockFactory);
@@ -127,7 +127,7 @@ describe('select', function () {
assert.equal(cb.id, 'canvasBackground'); assert.equal(cb.id, 'canvasBackground');
assert.ok(svgroot.childNodes.item(1)); assert.ok(svgroot.childNodes.item(1));
assert.equal(svgroot.childNodes.item(1), svgcontent); assert.equal(svgroot.childNodes.item(1), svgContent);
// Verify existence of selectorParentGroup. // Verify existence of selectorParentGroup.
const spg = svgroot.childNodes.item(2); const spg = svgroot.childNodes.item(2);

22
cypress/integration/unit/test1.js
View File

@@ -208,10 +208,10 @@ describe('Basic Module', function () {
'</svg>' '</svg>'
); );
const svgcontent = document.getElementById('svgcontent'); const svgContent = document.getElementById('svgcontent');
const circles = svgcontent.getElementsByTagNameNS(svgns, 'circle'); const circles = svgContent.getElementsByTagNameNS(svgns, 'circle');
const rects = svgcontent.getElementsByTagNameNS(svgns, 'rect'); const rects = svgContent.getElementsByTagNameNS(svgns, 'rect');
const ellipses = svgcontent.getElementsByTagNameNS(svgns, 'ellipse'); const ellipses = svgContent.getElementsByTagNameNS(svgns, 'ellipse');
assert.equal(circles.length, 2, 'Found two circles upon importing'); assert.equal(circles.length, 2, 'Found two circles upon importing');
assert.equal(rects.length, 1, 'Found one rectangle upon importing'); assert.equal(rects.length, 1, 'Found one rectangle upon importing');
assert.equal(ellipses.length, 1, 'Found one ellipse upon importing'); assert.equal(ellipses.length, 1, 'Found one ellipse upon importing');
@@ -242,13 +242,13 @@ describe('Basic Module', function () {
'</svg>' '</svg>'
); );
const svgcontent = document.getElementById('svgcontent'); const svgContent = document.getElementById('svgcontent');
const circles = svgcontent.getElementsByTagNameNS(svgns, 'circle'); const circles = svgContent.getElementsByTagNameNS(svgns, 'circle');
const rects = svgcontent.getElementsByTagNameNS(svgns, 'rect'); const rects = svgContent.getElementsByTagNameNS(svgns, 'rect');
// ellipses = svgcontent.getElementsByTagNameNS(svgns, 'ellipse'), // ellipses = svgContent.getElementsByTagNameNS(svgns, 'ellipse'),
const defs = svgcontent.getElementsByTagNameNS(svgns, 'defs'); const defs = svgContent.getElementsByTagNameNS(svgns, 'defs');
// grads = svgcontent.getElementsByTagNameNS(svgns, 'linearGradient'), // grads = svgContent.getElementsByTagNameNS(svgns, 'linearGradient'),
const uses = svgcontent.getElementsByTagNameNS(svgns, 'use'); const uses = svgContent.getElementsByTagNameNS(svgns, 'use');
assert.notEqual(circles.item(0).id, 'svg_1', 'Circle not re-identified'); assert.notEqual(circles.item(0).id, 'svg_1', 'Circle not re-identified');
assert.notEqual(rects.item(0).id, 'svg_3', 'Rectangle not re-identified'); assert.notEqual(rects.item(0).id, 'svg_3', 'Rectangle not re-identified');
// TODO: determine why this test fails in WebKit browsers // TODO: determine why this test fails in WebKit browsers

84
cypress/integration/unit/utilities-bbox.js
View File

@@ -21,17 +21,17 @@ describe('utilities bbox', function () {
}); });
return elem; return elem;
} }
let mockaddSVGElementFromJsonCallCount = 0; let mockaddSVGElemensFromJsonCallCount = 0;
/** /**
* Mock of {@link module:utilities.EditorContext#addSVGElementFromJson}. * Mock of {@link module:utilities.EditorContext#addSVGElemensFromJson}.
* @param {module:utilities.SVGElementJSON} json * @param {module:utilities.SVGElementJSON} json
* @returns {SVGElement} * @returns {SVGElement}
*/ */
function mockaddSVGElementFromJson (json) { function mockaddSVGElemensFromJson (json) {
const elem = mockCreateSVGElement(json); const elem = mockCreateSVGElement(json);
svgroot.append(elem); svgroot.append(elem);
mockaddSVGElementFromJsonCallCount++; mockaddSVGElemensFromJsonCallCount++;
return elem; return elem;
} }
const mockPathActions = { const mockPathActions = {
@@ -83,7 +83,7 @@ describe('utilities bbox', function () {
sandbox.append(svgroot); sandbox.append(svgroot);
path.init(null); path.init(null);
mockaddSVGElementFromJsonCallCount = 0; mockaddSVGElemensFromJsonCallCount = 0;
}); });
it('Test svgedit.utilities package', function () { it('Test svgedit.utilities package', function () {
@@ -102,9 +102,9 @@ describe('utilities bbox', function () {
attr: { id: 'path', d: 'M0,1 L2,3' } attr: { id: 'path', d: 'M0,1 L2,3' }
}); });
svgroot.append(elem); svgroot.append(elem);
let bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); let bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 }); assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 });
assert.equal(mockaddSVGElementFromJsonCallCount, 0); assert.equal(mockaddSVGElemensFromJsonCallCount, 0);
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
@@ -112,9 +112,9 @@ describe('utilities bbox', function () {
attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' } attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
assert.equal(mockaddSVGElementFromJsonCallCount, 0); assert.equal(mockaddSVGElemensFromJsonCallCount, 0);
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
@@ -122,9 +122,9 @@ describe('utilities bbox', function () {
attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' } attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 }); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 });
assert.equal(mockaddSVGElementFromJsonCallCount, 0); assert.equal(mockaddSVGElemensFromJsonCallCount, 0);
elem.remove(); elem.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
@@ -137,9 +137,9 @@ describe('utilities bbox', function () {
}); });
g.append(elem); g.append(elem);
svgroot.append(g); svgroot.append(g);
bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
assert.equal(mockaddSVGElementFromJsonCallCount, 0); assert.equal(mockaddSVGElemensFromJsonCallCount, 0);
g.remove(); g.remove();
}); });
@@ -151,7 +151,7 @@ describe('utilities bbox', function () {
attr: { id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10)' } attr: { id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10)' }
}); });
svgroot.append(elem); svgroot.append(elem);
let bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); let bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.close(bbox.x, 10, EPSILON); assert.close(bbox.x, 10, EPSILON);
assert.close(bbox.y, 10, EPSILON); assert.close(bbox.y, 10, EPSILON);
assert.close(bbox.width, 0, EPSILON); assert.close(bbox.width, 0, EPSILON);
@@ -163,12 +163,12 @@ describe('utilities bbox', function () {
attr: { id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20)' } attr: { id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20)' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.close(bbox.x, 5, EPSILON); assert.close(bbox.x, 5, EPSILON);
assert.close(bbox.y, 15, EPSILON); assert.close(bbox.y, 15, EPSILON);
assert.close(bbox.width, 20, EPSILON); assert.close(bbox.width, 20, EPSILON);
assert.close(bbox.height, 10, EPSILON); assert.close(bbox.height, 10, EPSILON);
assert.equal(mockaddSVGElementFromJsonCallCount, 1); assert.equal(mockaddSVGElemensFromJsonCallCount, 1);
elem.remove(); elem.remove();
const rect = { x: 10, y: 10, width: 10, height: 20 }; const rect = { x: 10, y: 10, width: 10, height: 20 };
@@ -179,14 +179,14 @@ describe('utilities bbox', function () {
attr: { id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')' } attr: { id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')' }
}); });
svgroot.append(elem); svgroot.append(elem);
mockaddSVGElementFromJsonCallCount = 0; mockaddSVGElemensFromJsonCallCount = 0;
bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
const r2 = rotateRect(rect, angle, origin); const r2 = rotateRect(rect, angle, origin);
assert.close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x); assert.close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x);
assert.close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y); assert.close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y);
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width); 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.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
assert.equal(mockaddSVGElementFromJsonCallCount, 0); assert.equal(mockaddSVGElemensFromJsonCallCount, 0);
elem.remove(); elem.remove();
// Same as previous but wrapped with g and the transform is with the g. // Same as previous but wrapped with g and the transform is with the g.
@@ -200,13 +200,13 @@ describe('utilities bbox', function () {
}); });
g.append(elem); g.append(elem);
svgroot.append(g); svgroot.append(g);
mockaddSVGElementFromJsonCallCount = 0; mockaddSVGElemensFromJsonCallCount = 0;
bbox = getBBoxWithTransform(g, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(g, mockaddSVGElemensFromJson, mockPathActions);
assert.close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x); assert.close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x);
assert.close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y); assert.close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y);
assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width); 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.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height);
assert.equal(mockaddSVGElementFromJsonCallCount, 0); assert.equal(mockaddSVGElemensFromJsonCallCount, 0);
g.remove(); g.remove();
elem = mockCreateSVGElement({ elem = mockCreateSVGElement({
@@ -214,14 +214,14 @@ describe('utilities bbox', function () {
attr: { id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100)' } attr: { id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100)' }
}); });
svgroot.append(elem); svgroot.append(elem);
mockaddSVGElementFromJsonCallCount = 0; mockaddSVGElemensFromJsonCallCount = 0;
bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
/** @todo: Review these test the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100. */ /** @todo: Review these test 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 && bbox.x <= 50); // assert.ok(bbox.x > 45 && bbox.x <= 50);
assert.ok(bbox.y > 45 && bbox.y <= 50); assert.ok(bbox.y > 45 && bbox.y <= 50);
// assert.ok(bbox.width >= 100 && bbox.width < 110); // assert.ok(bbox.width >= 100 && bbox.width < 110);
// assert.ok(bbox.height >= 100 && bbox.height < 110); // assert.ok(bbox.height >= 100 && bbox.height < 110);
assert.equal(mockaddSVGElementFromJsonCallCount, 1); assert.equal(mockaddSVGElemensFromJsonCallCount, 1);
elem.remove(); elem.remove();
}); });
@@ -238,7 +238,7 @@ describe('utilities bbox', function () {
attr: { id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10) ' + matrix } attr: { id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10) ' + matrix }
}); });
svgroot.append(elem); svgroot.append(elem);
let bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); let bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.close(bbox.x, 10 + tx, EPSILON); assert.close(bbox.x, 10 + tx, EPSILON);
assert.close(bbox.y, 10 + ty, EPSILON); assert.close(bbox.y, 10 + ty, EPSILON);
assert.close(bbox.width, 0, EPSILON); assert.close(bbox.width, 0, EPSILON);
@@ -253,7 +253,7 @@ describe('utilities bbox', function () {
attr: { id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20) ' + matrix } attr: { id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20) ' + matrix }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.close(bbox.x, 5 + tx, EPSILON); assert.close(bbox.x, 5 + tx, EPSILON);
assert.close(bbox.y, 15 + ty, EPSILON); assert.close(bbox.y, 15 + ty, EPSILON);
assert.close(bbox.width, 20, EPSILON); assert.close(bbox.width, 20, EPSILON);
@@ -273,7 +273,7 @@ describe('utilities bbox', function () {
attr: { id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix } attr: { id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
const r2 = rotateRect(rect, angle, origin); const r2 = rotateRect(rect, angle, origin);
assert.close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x); 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.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y);
@@ -292,7 +292,7 @@ describe('utilities bbox', function () {
}); });
g.append(elem); g.append(elem);
svgroot.append(g); svgroot.append(g);
bbox = getBBoxWithTransform(g, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(g, mockaddSVGElemensFromJson, mockPathActions);
assert.close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x); 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.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.width, r2.width, EPSILON, 'rect2 width is' + r2.width);
@@ -304,7 +304,7 @@ describe('utilities bbox', function () {
attr: { id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100) ' + matrix } attr: { id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100) ' + matrix }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions);
/** @todo: the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100. */ /** @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.x > 45 + tx && bbox.x <= 50 + tx);
assert.ok(bbox.y > 45 + ty && bbox.y <= 50 + ty); assert.ok(bbox.y > 45 + ty && bbox.y <= 50 + ty);
@@ -322,7 +322,7 @@ describe('utilities bbox', function () {
attr: { id: 'path', d: 'M0,1 L2,3', 'stroke-width': strokeWidth } attr: { id: 'path', d: 'M0,1 L2,3', 'stroke-width': strokeWidth }
}); });
svgroot.append(elem); svgroot.append(elem);
let bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); let bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 2 + strokeWidth, height: 2 + strokeWidth }); assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 2 + strokeWidth, height: 2 + strokeWidth });
elem.remove(); elem.remove();
@@ -331,7 +331,7 @@ describe('utilities bbox', function () {
attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': strokeWidth } attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': strokeWidth }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth }); assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth });
elem.remove(); elem.remove();
@@ -340,7 +340,7 @@ describe('utilities bbox', function () {
attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': strokeWidth } attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': strokeWidth }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 5 + strokeWidth }); assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 5 + strokeWidth });
elem.remove(); elem.remove();
@@ -354,7 +354,7 @@ describe('utilities bbox', function () {
}); });
g.append(elem); g.append(elem);
svgroot.append(g); svgroot.append(g);
bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth }); assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth });
g.remove(); g.remove();
}); });
@@ -367,7 +367,7 @@ describe('utilities bbox', function () {
attr: { id: 'path', d: 'M0,1 L2,3', 'stroke-width': 'none' } attr: { id: 'path', d: 'M0,1 L2,3', 'stroke-width': 'none' }
}); });
svgroot.append(elem); svgroot.append(elem);
let bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); let bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 }); assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 });
elem.remove(); elem.remove();
@@ -376,7 +376,7 @@ describe('utilities bbox', function () {
attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': 'none' } attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': 'none' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
elem.remove(); elem.remove();
@@ -385,7 +385,7 @@ describe('utilities bbox', function () {
attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': 'none' } attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': 'none' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 }); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 });
elem.remove(); elem.remove();
@@ -399,7 +399,7 @@ describe('utilities bbox', function () {
}); });
g.append(elem); g.append(elem);
svgroot.append(g); svgroot.append(g);
bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
g.remove(); g.remove();
}); });
@@ -412,7 +412,7 @@ describe('utilities bbox', function () {
attr: { id: 'path', d: 'M0,1 L2,3' } attr: { id: 'path', d: 'M0,1 L2,3' }
}); });
svgroot.append(elem); svgroot.append(elem);
let bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); let bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 }); assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 });
elem.remove(); elem.remove();
@@ -421,7 +421,7 @@ describe('utilities bbox', function () {
attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' } attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
elem.remove(); elem.remove();
@@ -430,7 +430,7 @@ describe('utilities bbox', function () {
attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' } attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 }); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 });
elem.remove(); elem.remove();
@@ -444,7 +444,7 @@ describe('utilities bbox', function () {
}); });
g.append(elem); g.append(elem);
svgroot.append(g); svgroot.append(g);
bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); bbox = getStrokedBBox([ elem ], mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
g.remove(); g.remove();
}); });

8
cypress/integration/unit/utilities-performance.js
View File

@@ -87,11 +87,11 @@ describe('utilities performance', function () {
} }
/** /**
* Mock of {@link module:utilities.EditorContext#addSVGElementFromJson}. * Mock of {@link module:utilities.EditorContext#addSVGElemensFromJson}.
* @param {module:utilities.SVGElementJSON} json * @param {module:utilities.SVGElementJSON} json
* @returns {SVGElement} * @returns {SVGElement}
*/ */
function mockaddSVGElementFromJson (json) { function mockaddSVGElemensFromJson (json) {
const elem = mockCreateSVGElement(json); const elem = mockCreateSVGElement(json);
currentLayer.append(elem); currentLayer.append(elem);
return elem; return elem;
@@ -198,7 +198,7 @@ describe('utilities performance', function () {
// Skip the first child which is the title. // Skip the first child which is the title.
for (let index = 1; index < count; index++) { for (let index = 1; index < count; index++) {
const child = children[index]; const child = children[index];
/* const obj = */ getStrokedBBox([ child ], mockaddSVGElementFromJson, mockPathActions); /* const obj = */ getStrokedBBox([ child ], mockaddSVGElemensFromJson, mockPathActions);
now = Date.now(); const delta = now - lastTime; lastTime = now; now = Date.now(); const delta = now - lastTime; lastTime = now;
total += delta; total += delta;
min = Math.min(min, delta); min = Math.min(min, delta);
@@ -218,7 +218,7 @@ describe('utilities performance', function () {
// Skip the first child which is the title. // Skip the first child which is the title.
for (let index = 1; index < ct; index++) { for (let index = 1; index < ct; index++) {
const child = children[index]; const child = children[index];
/* const obj = */ getStrokedBBox([ child ], mockaddSVGElementFromJson, mockPathActions); /* const obj = */ getStrokedBBox([ child ], mockaddSVGElemensFromJson, mockPathActions);
now = Date.now(); const delta = now - lastTime; lastTime = now; now = Date.now(); const delta = now - lastTime; lastTime = now;
total += delta; total += delta;
min = Math.min(min, delta); min = Math.min(min, delta);

16
cypress/integration/unit/utilities.js
View File

@@ -19,7 +19,7 @@ describe('utilities', function () {
* @param {module:utilities.SVGElementJSON} json * @param {module:utilities.SVGElementJSON} json
* @returns {SVGElement} * @returns {SVGElement}
*/ */
function mockaddSVGElementFromJson (json) { function mockaddSVGElemensFromJson (json) {
const elem = mockCreateSVGElement(json); const elem = mockCreateSVGElement(json);
svgroot.append(elem); svgroot.append(elem);
return elem; return elem;
@@ -245,8 +245,8 @@ describe('utilities', function () {
* Wrap `utilities.getBBoxOfElementAsPath` to convert bbox to object for testing. * Wrap `utilities.getBBoxOfElementAsPath` to convert bbox to object for testing.
* @type {module:utilities.getBBoxOfElementAsPath} * @type {module:utilities.getBBoxOfElementAsPath}
*/ */
function getBBoxOfElementAsPath (elem, addSVGElementFromJson, pathActions) { function getBBoxOfElementAsPath (elem, addSVGElemensFromJson, pathActions) {
const bbox = utilities.getBBoxOfElementAsPath(elem, addSVGElementFromJson, pathActions); const bbox = utilities.getBBoxOfElementAsPath(elem, addSVGElemensFromJson, pathActions);
return utilities.bboxToObj(bbox); // need this for assert.equal() to work. return utilities.bboxToObj(bbox); // need this for assert.equal() to work.
} }
@@ -255,7 +255,7 @@ describe('utilities', function () {
attr: { id: 'path', d: 'M0,1 Z' } attr: { id: 'path', d: 'M0,1 Z' }
}); });
svgroot.append(elem); svgroot.append(elem);
let bbox = getBBoxOfElementAsPath(elem, mockaddSVGElementFromJson, mockPathActions); let bbox = getBBoxOfElementAsPath(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 0, height: 0 }); assert.deepEqual(bbox, { x: 0, y: 1, width: 0, height: 0 });
elem.remove(); elem.remove();
@@ -264,7 +264,7 @@ describe('utilities', function () {
attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' } attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getBBoxOfElementAsPath(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxOfElementAsPath(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 });
elem.remove(); elem.remove();
@@ -273,7 +273,7 @@ describe('utilities', function () {
attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' } attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' }
}); });
svgroot.append(elem); svgroot.append(elem);
bbox = getBBoxOfElementAsPath(elem, mockaddSVGElementFromJson, mockPathActions); bbox = getBBoxOfElementAsPath(elem, mockaddSVGElemensFromJson, mockPathActions);
assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 }); assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 });
elem.remove(); elem.remove();
@@ -294,7 +294,7 @@ describe('utilities', function () {
attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' } attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' }
}); });
svgroot.append(elem); svgroot.append(elem);
const path = convertToPath(elem, attrs, mockaddSVGElementFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory); const path = convertToPath(elem, attrs, mockaddSVGElemensFromJson, 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('d'), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z');
assert.equal(path.getAttribute('visibilituy'), null); assert.equal(path.getAttribute('visibilituy'), null);
assert.equal(path.id, 'rect'); assert.equal(path.id, 'rect');
@@ -322,7 +322,7 @@ describe('utilities', function () {
getAttribute () { return ''; }, getAttribute () { return ''; },
parentNode: svgroot parentNode: svgroot
}; };
const path = convertToPath(elem, attrs, mockaddSVGElementFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory); const path = convertToPath(elem, attrs, mockaddSVGElemensFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory);
assert.equal(path, null); assert.equal(path, null);
assert.equal(elem.parentNode, svgroot); assert.equal(elem.parentNode, svgroot);
assert.equal(mockHistorySubCommands.length, 0); assert.equal(mockHistorySubCommands.length, 0);

2
demos/canvas.html
View File

@@ -50,7 +50,7 @@ window.canvas = new SvgCanvas(container, config);
canvas.updateCanvas(width, height); canvas.updateCanvas(width, height);
window.fill = function (colour) { window.fill = function (colour) {
canvas.getSelectedElems().forEach((el) => { canvas.getSelectedElements().forEach((el) => {
el.setAttribute('fill', colour); el.setAttribute('fill', colour);
}); });
}; };

8
src/common/browser.js
View File

@@ -20,13 +20,13 @@ const isTouch_ = 'ontouchstart' in window;
// text character positioning (for IE9 and now Chrome) // text character positioning (for IE9 and now Chrome)
const supportsGoodTextCharPos_ = (function () { const supportsGoodTextCharPos_ = (function () {
const svgroot = document.createElementNS(NSSVG, 'svg'); const svgroot = document.createElementNS(NSSVG, 'svg');
const svgcontent = document.createElementNS(NSSVG, 'svg'); const svgContent = document.createElementNS(NSSVG, 'svg');
document.documentElement.append(svgroot); document.documentElement.append(svgroot);
svgcontent.setAttribute('x', 5); svgContent.setAttribute('x', 5);
svgroot.append(svgcontent); svgroot.append(svgContent);
const text = document.createElementNS(NSSVG, 'text'); const text = document.createElementNS(NSSVG, 'text');
text.textContent = 'a'; text.textContent = 'a';
svgcontent.append(text); svgContent.append(text);
try { // Chrome now fails here try { // Chrome now fails here
const pos = text.getStartPositionOfChar(0).x; const pos = text.getStartPositionOfChar(0).x;
return (pos === 0); return (pos === 0);

4
src/editor/Editor.js
View File

@@ -729,7 +729,7 @@ class Editor extends EditorStartup {
multiplier = multiplier ? resolution.zoom * multiplier : 1; multiplier = multiplier ? resolution.zoom * multiplier : 1;
// setResolution(res.w * multiplier, res.h * multiplier, true); // setResolution(res.w * multiplier, res.h * multiplier, true);
$id('zoom').value = (multiplier * 100).toFixed(1); $id('zoom').value = (multiplier * 100).toFixed(1);
this.svgCanvas.setZoom(multiplier); this.svgCanvas.setCurrentZoom(multiplier);
this.zoomDone(); this.zoomDone();
this.updateCanvas(true); this.updateCanvas(true);
} }
@@ -1116,7 +1116,7 @@ class Editor extends EditorStartup {
if (!this.svgCanvas) { if (!this.svgCanvas) {
throw new Error('Extension added too early'); throw new Error('Extension added too early');
} }
return this.svgCanvas.addExtension.call(this, name, initfn, initArgs); return this.svgCanvas.addExtension( name, initfn, initArgs);
} }
} }

2
src/editor/Rulers.js
View File

@@ -58,7 +58,7 @@ class Rulers {
let d; let i; let d; let i;
const limit = 30000; const limit = 30000;
const contentElem = this.svgCanvas.getContentElem(); const contentElem = this.svgCanvas.getSvgContent();
const units = getTypeMap(); const units = getTypeMap();
const unit = units[this.editor.configObj.curConfig.baseUnit]; // 1 = 1px const unit = units[this.editor.configObj.curConfig.baseUnit]; // 1 = 1px

2
src/editor/extensions/ext-eyedropper/ext-eyedropper.js
View File

@@ -28,7 +28,7 @@ export default {
async init(S) { async init(S) {
const svgEditor = this; const svgEditor = this;
await loadExtensionTranslation(svgEditor); await loadExtensionTranslation(svgEditor);
const { ChangeElementCommand } = S; // , svgcontent, const { ChangeElementCommand } = S;
// svgdoc = S.svgroot.parentNode.ownerDocument, // svgdoc = S.svgroot.parentNode.ownerDocument,
const { svgCanvas } = svgEditor; const { svgCanvas } = svgEditor;
const addToHistory = function (cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); }; const addToHistory = function (cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); };

2
src/editor/extensions/ext-imagelib/ext-imagelib.js
View File

@@ -71,7 +71,7 @@ export default {
* @returns {void} * @returns {void}
*/ */
const importImage = (url) => { const importImage = (url) => {
const newImage = svgCanvas.addSVGElementFromJson({ const newImage = svgCanvas.addSVGElemensFromJson({
element: 'image', element: 'image',
attr: { attr: {
x: 0, x: 0,

8
src/editor/extensions/ext-markers/ext-markers.js
View File

@@ -32,7 +32,7 @@ export default {
async init (S) { async init (S) {
const svgEditor = this; const svgEditor = this;
const { svgCanvas } = svgEditor; const { svgCanvas } = svgEditor;
const { $id, addSVGElementFromJson: addElem } = svgCanvas; const { $id, addSVGElemensFromJson: addElem } = svgCanvas;
const mtypes = [ 'start', 'mid', 'end' ]; const mtypes = [ 'start', 'mid', 'end' ];
const markerElems = [ 'line', 'path', 'polyline', 'polygon' ]; const markerElems = [ 'line', 'path', 'polyline', 'polygon' ];
@@ -99,7 +99,7 @@ export default {
* @returns {SVGMarkerElement} * @returns {SVGMarkerElement}
*/ */
const addMarker = (id, seType) => { const addMarker = (id, seType) => {
const selElems = svgCanvas.getSelectedElems(); const selElems = svgCanvas.getSelectedElements();
let marker = svgCanvas.getElem(id); let marker = svgCanvas.getElem(id);
if (marker) { return undefined; } if (marker) { return undefined; }
if (seType === '' || seType === 'nomarker') { return undefined; } if (seType === '' || seType === 'nomarker') { return undefined; }
@@ -200,7 +200,7 @@ export default {
* @returns {void} * @returns {void}
*/ */
const setMarker = (pos, markerType) => { const setMarker = (pos, markerType) => {
const selElems = svgCanvas.getSelectedElems(); const selElems = svgCanvas.getSelectedElements();
if (selElems.length === 0) return; if (selElems.length === 0) return;
const markerName = 'marker-' + pos; const markerName = 'marker-' + pos;
const el = selElems[0]; const el = selElems[0];
@@ -252,7 +252,7 @@ export default {
* @returns {void} * @returns {void}
*/ */
const updateReferences = (el) => { const updateReferences = (el) => {
const selElems = svgCanvas.getSelectedElems(); const selElems = svgCanvas.getSelectedElements();
mtypes.forEach((pos) => { mtypes.forEach((pos) => {
const markerName = 'marker-' + pos; const markerName = 'marker-' + pos;
const marker = getLinked(el, markerName); const marker = getLinked(el, markerName);

2
src/editor/extensions/ext-opensave/ext-opensave.js
View File

@@ -83,7 +83,7 @@ export default {
* @returns {void} * @returns {void}
*/ */
const insertNewImage = (imageWidth, imageHeight) => { const insertNewImage = (imageWidth, imageHeight) => {
const newImage = this.svgCanvas.addSVGElementFromJson({ const newImage = this.svgCanvas.addSVGElemensFromJson({
element: 'image', element: 'image',
attr: { attr: {
x: 0, x: 0,

4
src/editor/extensions/ext-polystar/ext-polystar.js
View File

@@ -246,7 +246,7 @@ export default {
const sRgb = svgCanvas.getColor("stroke"); const sRgb = svgCanvas.getColor("stroke");
const sWidth = svgCanvas.getStrokeWidth(); const sWidth = svgCanvas.getStrokeWidth();
started = true; started = true;
newFO = svgCanvas.addSVGElementFromJson({ newFO = svgCanvas.addSVGElemensFromJson({
element: "polygon", element: "polygon",
attr: { attr: {
cx: opts.start_x, cx: opts.start_x,
@@ -275,7 +275,7 @@ export default {
// ccSRgbEl = sRgb.substring(1, rgb.length); // ccSRgbEl = sRgb.substring(1, rgb.length);
const sWidth = svgCanvas.getStrokeWidth(); const sWidth = svgCanvas.getStrokeWidth();
started = true; started = true;
newFO = svgCanvas.addSVGElementFromJson({ newFO = svgCanvas.addSVGElemensFromJson({
element: "polygon", element: "polygon",
attr: { attr: {
cx: opts.start_x, cx: opts.start_x,

4
src/editor/extensions/ext-shapes/ext-shapes.js
View File

@@ -27,7 +27,7 @@ export default {
const svgEditor = this; const svgEditor = this;
const canv = svgEditor.svgCanvas; const canv = svgEditor.svgCanvas;
const { $id } = canv; const { $id } = canv;
const svgroot = canv.getRootElem(); const svgroot = canv.getSvgRoot();
let lastBBox = {}; let lastBBox = {};
await loadExtensionTranslation(svgEditor); await loadExtensionTranslation(svgEditor);
@@ -67,7 +67,7 @@ export default {
startClientPos.x = opts.event.clientX; startClientPos.x = opts.event.clientX;
startClientPos.y = opts.event.clientY; startClientPos.y = opts.event.clientY;
curShape = canv.addSVGElementFromJson({ curShape = canv.addSVGElemensFromJson({
element: 'path', element: 'path',
curStyles: true, curStyles: true,
attr: { attr: {

6
src/editor/extensions/ext-storage/ext-storage.js
View File

@@ -100,7 +100,7 @@ export default {
} else { } else {
removeStoragePrefCookie(); removeStoragePrefCookie();
if (svgEditor.configObj.curConfig.emptyStorageOnDecline && e?.detail?.checkbox) { if (svgEditor.configObj.curConfig.emptyStorageOnDecline && e?.detail?.checkbox) {
this.setSVGContentStorage(''); this.setSvgContentStorage('');
Object.keys(svgEditor.curPrefs).forEach((name) => { Object.keys(svgEditor.curPrefs).forEach((name) => {
name = 'svg-edit-' + name; name = 'svg-edit-' + name;
if (svgEditor.storage) { if (svgEditor.storage) {
@@ -128,7 +128,7 @@ export default {
* @param {string} val * @param {string} val
* @returns {void} * @returns {void}
*/ */
function setSVGContentStorage (val) { function setSvgContentStorage (val) {
if (storage) { if (storage) {
const name = 'svgedit-' + svgEditor.configObj.curConfig.canvasName; const name = 'svgedit-' + svgEditor.configObj.curConfig.canvasName;
if (!val) { if (!val) {
@@ -155,7 +155,7 @@ export default {
return; return;
} }
if ((/(?:^|;\s*)svgeditstore=prefsAndContent/).test(document.cookie)) { if ((/(?:^|;\s*)svgeditstore=prefsAndContent/).test(document.cookie)) {
setSVGContentStorage(svgCanvas.getSvgString()); setSvgContentStorage(svgCanvas.getSvgString());
} }
svgEditor.setConfig({ no_save_warning: true }); // No need for explicit saving at all once storage is on svgEditor.setConfig({ no_save_warning: true }); // No need for explicit saving at all once storage is on

2
src/editor/extensions/ext-storage/storageDialog.js
View File

@@ -139,7 +139,7 @@ export class SeStorageDialog extends HTMLElement {
* @param {string} val * @param {string} val
* @returns {void} * @returns {void}
*/ */
setSVGContentStorage (val) { setSvgContentStorage (val) {
if (this.storage) { if (this.storage) {
const name = 'svgedit-' + this.configObj.curConfig.canvasName; const name = 'svgedit-' + this.configObj.curConfig.canvasName;
if (!val) { if (!val) {

2
src/editor/panels/TopPanel.js
View File

@@ -780,7 +780,7 @@ class TopPanel {
.then(() => { .then(() => {
// switch into "select" mode if we've clicked on an element // switch into "select" mode if we've clicked on an element
editor.svgCanvas.setMode('select'); editor.svgCanvas.setMode('select');
editor.svgCanvas.selectOnly(editor.svgCanvas.getSelectedElems(), true); editor.svgCanvas.selectOnly(editor.svgCanvas.getSelectedElements(), true);
}, (error) => { }, (error) => {
console.error("error =", error); console.error("error =", error);
seAlert(editor.i18next.t('tools.no_embed')); seAlert(editor.i18next.t('tools.no_embed'));

74
src/svgcanvas/blur-event.js
View File

@@ -10,15 +10,15 @@ const {
InsertElementCommand, ChangeElementCommand, BatchCommand InsertElementCommand, ChangeElementCommand, BatchCommand
} = hstry; } = hstry;
let blurContext_ = null; let svgCanvas = null;
/** /**
* @function module:blur.init * @function module:blur.init
* @param {module:blur.blurContext} blurContext * @param {module:blur.blurContext} blurContext
* @returns {void} * @returns {void}
*/ */
export const init = function (blurContext) { export const init = function (canvas) {
blurContext_ = blurContext; svgCanvas = canvas;
}; };
/** /**
@@ -28,28 +28,28 @@ export const init = function (blurContext) {
* @returns {void} * @returns {void}
*/ */
export const setBlurNoUndo = function (val) { export const setBlurNoUndo = function (val) {
const selectedElements = blurContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
if (!blurContext_.getFilter()) { if (!svgCanvas.getFilter()) {
blurContext_.getCanvas().setBlur(val); svgCanvas.setBlur(val);
return; return;
} }
if (val === 0) { if (val === 0) {
// Don't change the StdDev, as that will hide the element. // Don't change the StdDev, as that will hide the element.
// Instead, just remove the value for "filter" // Instead, just remove the value for "filter"
blurContext_.changeSelectedAttributeNoUndoMethod('filter', ''); svgCanvas.changeSelectedAttributeNoUndoMethod('filter', '');
blurContext_.setFilterHidden(true); svgCanvas.setFilterHidden(true);
} else { } else {
const elem = selectedElements[0]; const elem = selectedElements[0];
if (blurContext_.getFilterHidden()) { if (svgCanvas.getFilterHidden()) {
blurContext_.changeSelectedAttributeNoUndoMethod('filter', 'url(#' + elem.id + '_blur)'); svgCanvas.changeSelectedAttributeNoUndoMethod('filter', 'url(#' + elem.id + '_blur)');
} }
if (blurContext_.isWebkit()) { if (svgCanvas.isWebkit()) {
elem.removeAttribute('filter'); elem.removeAttribute('filter');
elem.setAttribute('filter', 'url(#' + elem.id + '_blur)'); elem.setAttribute('filter', 'url(#' + elem.id + '_blur)');
} }
const filter = blurContext_.getFilter(); const filter = svgCanvas.getFilter();
blurContext_.changeSelectedAttributeNoUndoMethod('stdDeviation', val, [ filter.firstChild ]); svgCanvas.changeSelectedAttributeNoUndoMethod('stdDeviation', val, [ filter.firstChild ]);
blurContext_.getCanvas().setBlurOffsets(filter, val); svgCanvas.setBlurOffsets(filter, val);
} }
}; };
@@ -58,11 +58,11 @@ export const setBlurNoUndo = function (val) {
* @returns {void} * @returns {void}
*/ */
function finishChange () { function finishChange () {
const bCmd = blurContext_.getCanvas().undoMgr.finishUndoableChange(); const bCmd = svgCanvas.undoMgr.finishUndoableChange();
blurContext_.getCurCommand().addSubCommand(bCmd); svgCanvas.getCurCommand().addSubCommand(bCmd);
blurContext_.addCommandToHistory(blurContext_.getCurCommand()); svgCanvas.addCommandToHistory(svgCanvas.getCurCommand());
blurContext_.setCurCommand(null); svgCanvas.setCurCommand(null);
blurContext_.setFilter(null); svgCanvas.setFilter(null);
} }
/** /**
@@ -76,14 +76,14 @@ function finishChange () {
export const setBlurOffsets = function (filterElem, stdDev) { export const setBlurOffsets = function (filterElem, stdDev) {
if (stdDev > 3) { if (stdDev > 3) {
// TODO: Create algorithm here where size is based on expected blur // TODO: Create algorithm here where size is based on expected blur
blurContext_.getCanvas().assignAttributes(filterElem, { svgCanvas.assignAttributes(filterElem, {
x: '-50%', x: '-50%',
y: '-50%', y: '-50%',
width: '200%', width: '200%',
height: '200%' height: '200%'
}, 100); }, 100);
// Removing these attributes hides text in Chrome (see Issue 579) // Removing these attributes hides text in Chrome (see Issue 579)
} else if (!blurContext_.isWebkit()) { } else if (!svgCanvas.isWebkit()) {
filterElem.removeAttribute('x'); filterElem.removeAttribute('x');
filterElem.removeAttribute('y'); filterElem.removeAttribute('y');
filterElem.removeAttribute('width'); filterElem.removeAttribute('width');
@@ -99,8 +99,8 @@ export const setBlurOffsets = function (filterElem, stdDev) {
* @returns {void} * @returns {void}
*/ */
export const setBlur = function (val, complete) { export const setBlur = function (val, complete) {
const selectedElements = blurContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
if (blurContext_.getCurCommand()) { if (svgCanvas.getCurCommand()) {
finishChange(); finishChange();
return; return;
} }
@@ -108,35 +108,35 @@ export const setBlur = function (val, complete) {
// Looks for associated blur, creates one if not found // Looks for associated blur, creates one if not found
const elem = selectedElements[0]; const elem = selectedElements[0];
const elemId = elem.id; const elemId = elem.id;
blurContext_.setFilter(blurContext_.getCanvas().getElem(elemId + '_blur')); svgCanvas.setFilter(svgCanvas.getElem(elemId + '_blur'));
val -= 0; val -= 0;
const batchCmd = new BatchCommand(); const batchCmd = new BatchCommand();
// Blur found! // Blur found!
if (blurContext_.getFilter()) { if (svgCanvas.getFilter()) {
if (val === 0) { if (val === 0) {
blurContext_.setFilter(null); svgCanvas.setFilter(null);
} }
} else { } else {
// Not found, so create // Not found, so create
const newblur = blurContext_.getCanvas().addSVGElementFromJson({ element: 'feGaussianBlur', const newblur = svgCanvas.addSVGElemensFromJson({ element: 'feGaussianBlur',
attr: { attr: {
in: 'SourceGraphic', in: 'SourceGraphic',
stdDeviation: val stdDeviation: val
} }
}); });
blurContext_.setFilter(blurContext_.getCanvas().addSVGElementFromJson({ element: 'filter', svgCanvas.setFilter(svgCanvas.addSVGElemensFromJson({ element: 'filter',
attr: { attr: {
id: elemId + '_blur' id: elemId + '_blur'
} }
})); }));
blurContext_.getFilter().append(newblur); svgCanvas.getFilter().append(newblur);
blurContext_.getCanvas().findDefs().append(blurContext_.getFilter()); svgCanvas.findDefs().append(svgCanvas.getFilter());
batchCmd.addSubCommand(new InsertElementCommand(blurContext_.getFilter())); batchCmd.addSubCommand(new InsertElementCommand(svgCanvas.getFilter()));
} }
const changes = { filter: elem.getAttribute('filter') }; const changes = { filter: elem.getAttribute('filter') };
@@ -147,14 +147,14 @@ export const setBlur = function (val, complete) {
return; return;
} }
blurContext_.changeSelectedAttributeMethod('filter', 'url(#' + elemId + '_blur)'); svgCanvas.changeSelectedAttributeMethod('filter', 'url(#' + elemId + '_blur)');
batchCmd.addSubCommand(new ChangeElementCommand(elem, changes)); batchCmd.addSubCommand(new ChangeElementCommand(elem, changes));
blurContext_.getCanvas().setBlurOffsets(blurContext_.getFilter(), val); svgCanvas.setBlurOffsets(svgCanvas.getFilter(), val);
const filter = blurContext_.getFilter(); const filter = svgCanvas.getFilter();
blurContext_.setCurCommand(batchCmd); svgCanvas.setCurCommand(batchCmd);
blurContext_.getCanvas().undoMgr.beginUndoableChange('stdDeviation', [ filter ? filter.firstChild : null ]); svgCanvas.undoMgr.beginUndoableChange('stdDeviation', [ filter ? filter.firstChild : null ]);
if (complete) { if (complete) {
blurContext_.getCanvas().setBlurNoUndo(val); svgCanvas.setBlurNoUndo(val);
finishChange(); finishChange();
} }
}; };

20
src/svgcanvas/clear.js
View File

@@ -6,27 +6,27 @@
*/ */
import { NS } from './namespaces.js'; import { NS } from './namespaces.js';
let clearContext_ = null; let svgCanvas = null;
/** /**
* @function module:clear.init * @function module:clear.init
* @param {module:clear.SvgCanvas#init} clearContext * @param {module:clear.SvgCanvas#init} clearContext
* @returns {void} * @returns {void}
*/ */
export const init = function (clearContext) { export const init = (canvas) => {
clearContext_ = clearContext; svgCanvas = canvas;
}; };
export const clearSvgContentElementInit = function () { export const clearSvgContentElementInit = () => {
const curConfig = clearContext_.getCurConfig(); const curConfig = svgCanvas.getCurConfig();
const { dimensions } = curConfig; const { dimensions } = curConfig;
const el = clearContext_.getSVGContent(); const el = svgCanvas.getSvgContent();
// empty() // empty
while(el.firstChild) while(el.firstChild)
el.removeChild(el.firstChild); el.removeChild(el.firstChild);
// TODO: Clear out all other attributes first? // TODO: Clear out all other attributes first?
const pel = clearContext_.getSVGRoot(); const pel = svgCanvas.getSvgRoot();
el.setAttribute('id', 'svgcontent'); el.setAttribute('id', 'svgcontent');
el.setAttribute('width', dimensions[0]); el.setAttribute('width', dimensions[0]);
el.setAttribute('height', dimensions[1]); el.setAttribute('height', dimensions[1]);
@@ -39,6 +39,6 @@ export const clearSvgContentElementInit = function () {
pel.appendChild(el); pel.appendChild(el);
// TODO: make this string optional and set by the client // TODO: make this string optional and set by the client
const comment = clearContext_.getDOMDocument().createComment(' Created with SVG-edit - https://github.com/SVG-Edit/svgedit'); const comment = svgCanvas.getDOMDocument().createComment(' Created with SVG-edit - https://github.com/SVG-Edit/svgedit');
clearContext_.getSVGContent().append(comment); svgCanvas.getSvgContent().append(comment);
}; };

18
src/svgcanvas/coords.js
View File

@@ -29,19 +29,19 @@ const pathMap = [
* @returns {module:draw.Drawing} * @returns {module:draw.Drawing}
*/ */
/** /**
* @function module:coords.EditorContext#getSVGRoot * @function module:coords.EditorContext#getSvgRoot
* @returns {SVGSVGElement} * @returns {SVGSVGElement}
*/ */
let editorContext_ = null; let svgCanvas = null;
/** /**
* @function module:coords.init * @function module:coords.init
* @param {module:svgcanvas.SvgCanvas#event:pointsAdded} editorContext * @param {module:svgcanvas.SvgCanvas#event:pointsAdded} editorContext
* @returns {void} * @returns {void}
*/ */
export const init = function (editorContext) { export const init = function (canvas) {
editorContext_ = editorContext; svgCanvas = canvas;
}; };
/** /**
@@ -53,7 +53,7 @@ export const remapElement = function (selected, changes, m) {
const remap = (x, y) => transformPoint(x, y, m); const remap = (x, y) => transformPoint(x, y, m);
const scalew = (w) => m.a * w; const scalew = (w) => m.a * w;
const scaleh = (h) => m.d * h; const scaleh = (h) => m.d * h;
const doSnapping = editorContext_.getGridSnapping() && selected.parentNode.parentNode.localName === 'svg'; const doSnapping = svgCanvas.getGridSnapping() && selected.parentNode.parentNode.localName === 'svg';
const finishUp = () => { const finishUp = () => {
if (doSnapping) { if (doSnapping) {
Object.entries(changes).forEach(([ o, value ]) => { Object.entries(changes).forEach(([ o, value ]) => {
@@ -84,7 +84,7 @@ export const remapElement = function (selected, changes, m) {
newgrad.setAttribute('y1', -(y1 - 1)); newgrad.setAttribute('y1', -(y1 - 1));
newgrad.setAttribute('y2', -(y2 - 1)); newgrad.setAttribute('y2', -(y2 - 1));
} }
newgrad.id = editorContext_.getDrawing().getNextId(); newgrad.id = svgCanvas.getDrawing().getNextId();
findDefs().append(newgrad); findDefs().append(newgrad);
selected.setAttribute(type, 'url(#' + newgrad.id + ')'); selected.setAttribute(type, 'url(#' + newgrad.id + ')');
} }
@@ -103,7 +103,7 @@ export const remapElement = function (selected, changes, m) {
} else { } else {
// we just absorb all matrices into the element and don't do any remapping // we just absorb all matrices into the element and don't do any remapping
const chlist = selected.transform.baseVal; const chlist = selected.transform.baseVal;
const mt = editorContext_.getSVGRoot().createSVGTransform(); const mt = svgCanvas.getSvgRoot().createSVGTransform();
mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m)); mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m));
chlist.clear(); chlist.clear();
chlist.appendItem(mt); chlist.appendItem(mt);
@@ -120,7 +120,7 @@ export const remapElement = function (selected, changes, m) {
if (elName === 'image' && (m.a < 0 || m.d < 0)) { if (elName === 'image' && (m.a < 0 || m.d < 0)) {
// Convert to matrix // Convert to matrix
const chlist = selected.transform.baseVal; const chlist = selected.transform.baseVal;
const mt = editorContext_.getSVGRoot().createSVGTransform(); const mt = svgCanvas.getSvgRoot().createSVGTransform();
mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m)); mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m));
chlist.clear(); chlist.clear();
chlist.appendItem(mt); chlist.appendItem(mt);
@@ -171,7 +171,7 @@ export const remapElement = function (selected, changes, m) {
finishUp(); finishUp();
break; break;
} case 'g': { } case 'g': {
const dataStorage = editorContext_.getDataStorage(); const dataStorage = svgCanvas.getDataStorage();
const gsvg = dataStorage.get(selected, 'gsvg'); const gsvg = dataStorage.get(selected, 'gsvg');
if (gsvg) { if (gsvg) {
assignAttributes(gsvg, changes, 1000, true); assignAttributes(gsvg, changes, 1000, true);

88
src/svgcanvas/draw.js
View File

@@ -37,7 +37,7 @@ let disabledElems = [];
* @returns {module:history.HistoryRecordingService} * @returns {module:history.HistoryRecordingService}
*/ */
function historyRecordingService (hrService) { function historyRecordingService (hrService) {
return hrService || new HistoryRecordingService(canvas_.undoMgr); return hrService || new HistoryRecordingService(svgCanvas.undoMgr);
} }
/** /**
@@ -720,7 +720,7 @@ export const randomizeIds = function (enableRandomization, currentDrawing) {
* @returns {Element[]} the array with selected DOM elements * @returns {Element[]} the array with selected DOM elements
*/ */
/** /**
* @function module:draw.DrawCanvasInit#getSVGContent * @function module:draw.DrawCanvasInit#getSvgContent
* @returns {SVGSVGElement} * @returns {SVGSVGElement}
*/ */
/** /**
@@ -747,18 +747,18 @@ export const randomizeIds = function (enableRandomization, currentDrawing) {
* @returns {void} * @returns {void}
*/ */
/** /**
* @function module:draw.DrawCanvasInit#changeSVGContent * @function module:draw.DrawCanvasInit#changeSvgContent
* @returns {void} * @returns {void}
*/ */
let canvas_; let svgCanvas;
/** /**
* @function module:draw.init * @function module:draw.init
* @param {module:draw.DrawCanvasInit} canvas * @param {module:draw.DrawCanvasInit} canvas
* @returns {void} * @returns {void}
*/ */
export const init = function (canvas) { export const init = function (canvas) {
canvas_ = canvas; svgCanvas = canvas;
}; };
/** /**
@@ -768,7 +768,7 @@ export const init = function (canvas) {
*/ */
export const identifyLayers = function () { export const identifyLayers = function () {
leaveContext(); leaveContext();
canvas_.getCurrentDrawing().identifyLayers(); svgCanvas.getCurrentDrawing().identifyLayers();
}; };
/** /**
@@ -782,12 +782,12 @@ export const identifyLayers = function () {
* @returns {void} * @returns {void}
*/ */
export const createLayer = function (name, hrService) { export const createLayer = function (name, hrService) {
const newLayer = canvas_.getCurrentDrawing().createLayer( const newLayer = svgCanvas.getCurrentDrawing().createLayer(
name, name,
historyRecordingService(hrService) historyRecordingService(hrService)
); );
canvas_.clearSelection(); svgCanvas.clearSelection();
canvas_.call('changed', [ newLayer ]); svgCanvas.call('changed', [ newLayer ]);
}; };
/** /**
@@ -802,11 +802,11 @@ export const createLayer = function (name, hrService) {
*/ */
export const cloneLayer = function (name, hrService) { export const cloneLayer = function (name, hrService) {
// Clone the current layer and make the cloned layer the new current layer // Clone the current layer and make the cloned layer the new current layer
const newLayer = canvas_.getCurrentDrawing().cloneLayer(name, historyRecordingService(hrService)); const newLayer = svgCanvas.getCurrentDrawing().cloneLayer(name, historyRecordingService(hrService));
canvas_.clearSelection(); svgCanvas.clearSelection();
leaveContext(); leaveContext();
canvas_.call('changed', [ newLayer ]); svgCanvas.call('changed', [ newLayer ]);
}; };
/** /**
@@ -817,17 +817,17 @@ export const cloneLayer = function (name, hrService) {
* @returns {boolean} `true` if an old layer group was found to delete * @returns {boolean} `true` if an old layer group was found to delete
*/ */
export const deleteCurrentLayer = function () { export const deleteCurrentLayer = function () {
let currentLayer = canvas_.getCurrentDrawing().getCurrentLayer(); let currentLayer = svgCanvas.getCurrentDrawing().getCurrentLayer();
const { nextSibling } = currentLayer; const { nextSibling } = currentLayer;
const parent = currentLayer.parentNode; const parent = currentLayer.parentNode;
currentLayer = canvas_.getCurrentDrawing().deleteCurrentLayer(); currentLayer = svgCanvas.getCurrentDrawing().deleteCurrentLayer();
if (currentLayer) { if (currentLayer) {
const batchCmd = new BatchCommand('Delete Layer'); const batchCmd = new BatchCommand('Delete Layer');
// store in our Undo History // store in our Undo History
batchCmd.addSubCommand(new RemoveElementCommand(currentLayer, nextSibling, parent)); batchCmd.addSubCommand(new RemoveElementCommand(currentLayer, nextSibling, parent));
canvas_.addCommandToHistory(batchCmd); svgCanvas.addCommandToHistory(batchCmd);
canvas_.clearSelection(); svgCanvas.clearSelection();
canvas_.call('changed', [ parent ]); svgCanvas.call('changed', [ parent ]);
return true; return true;
} }
return false; return false;
@@ -841,9 +841,9 @@ export const deleteCurrentLayer = function () {
* @returns {boolean} true if the current layer was switched, otherwise false * @returns {boolean} true if the current layer was switched, otherwise false
*/ */
export const setCurrentLayer = function (name) { export const setCurrentLayer = function (name) {
const result = canvas_.getCurrentDrawing().setCurrentLayer(toXml(name)); const result = svgCanvas.getCurrentDrawing().setCurrentLayer(toXml(name));
if (result) { if (result) {
canvas_.clearSelection(); svgCanvas.clearSelection();
} }
return result; return result;
}; };
@@ -858,12 +858,12 @@ export const setCurrentLayer = function (name) {
* @returns {boolean} Whether the rename succeeded * @returns {boolean} Whether the rename succeeded
*/ */
export const renameCurrentLayer = function (newName) { export const renameCurrentLayer = function (newName) {
const drawing = canvas_.getCurrentDrawing(); const drawing = svgCanvas.getCurrentDrawing();
const layer = drawing.getCurrentLayer(); const layer = drawing.getCurrentLayer();
if (layer) { if (layer) {
const result = drawing.setCurrentLayerName(newName, historyRecordingService()); const result = drawing.setCurrentLayerName(newName, historyRecordingService());
if (result) { if (result) {
canvas_.call('changed', [ layer ]); svgCanvas.call('changed', [ layer ]);
return true; return true;
} }
} }
@@ -880,10 +880,10 @@ export const renameCurrentLayer = function (newName) {
* @returns {boolean} `true` if the current layer position was changed, `false` otherwise. * @returns {boolean} `true` if the current layer position was changed, `false` otherwise.
*/ */
export const setCurrentLayerPosition = function (newPos) { export const setCurrentLayerPosition = function (newPos) {
const drawing = canvas_.getCurrentDrawing(); const drawing = svgCanvas.getCurrentDrawing();
const result = drawing.setCurrentLayerPosition(newPos); const result = drawing.setCurrentLayerPosition(newPos);
if (result) { if (result) {
canvas_.addCommandToHistory(new MoveElementCommand(result.currentGroup, result.oldNextSibling, canvas_.getSVGContent())); svgCanvas.addCommandToHistory(new MoveElementCommand(result.currentGroup, result.oldNextSibling, svgCanvas.getSvgContent()));
return true; return true;
} }
return false; return false;
@@ -898,19 +898,19 @@ export const setCurrentLayerPosition = function (newPos) {
* @returns {boolean} true if the layer's visibility was set, false otherwise * @returns {boolean} true if the layer's visibility was set, false otherwise
*/ */
export const setLayerVisibility = function (layerName, bVisible) { export const setLayerVisibility = function (layerName, bVisible) {
const drawing = canvas_.getCurrentDrawing(); const drawing = svgCanvas.getCurrentDrawing();
const prevVisibility = drawing.getLayerVisibility(layerName); const prevVisibility = drawing.getLayerVisibility(layerName);
const layer = drawing.setLayerVisibility(layerName, bVisible); const layer = drawing.setLayerVisibility(layerName, bVisible);
if (layer) { if (layer) {
const oldDisplay = prevVisibility ? 'inline' : 'none'; const oldDisplay = prevVisibility ? 'inline' : 'none';
canvas_.addCommandToHistory(new ChangeElementCommand(layer, { display: oldDisplay }, 'Layer Visibility')); svgCanvas.addCommandToHistory(new ChangeElementCommand(layer, { display: oldDisplay }, 'Layer Visibility'));
} else { } else {
return false; return false;
} }
if (layer === drawing.getCurrentLayer()) { if (layer === drawing.getCurrentLayer()) {
canvas_.clearSelection(); svgCanvas.clearSelection();
canvas_.pathActions.clear(); svgCanvas.pathActions.clear();
} }
// call('changed', [selected]); // call('changed', [selected]);
return true; return true;
@@ -925,14 +925,14 @@ export const setLayerVisibility = function (layerName, bVisible) {
*/ */
export const moveSelectedToLayer = function (layerName) { export const moveSelectedToLayer = function (layerName) {
// find the layer // find the layer
const drawing = canvas_.getCurrentDrawing(); const drawing = svgCanvas.getCurrentDrawing();
const layer = drawing.getLayerByName(layerName); const layer = drawing.getLayerByName(layerName);
if (!layer) { return false; } if (!layer) { return false; }
const batchCmd = new BatchCommand('Move Elements to Layer'); const batchCmd = new BatchCommand('Move Elements to Layer');
// loop for each selected element and move it // loop for each selected element and move it
const selElems = canvas_.getSelectedElements(); const selElems = svgCanvas.getSelectedElements();
let i = selElems.length; let i = selElems.length;
while (i--) { while (i--) {
const elem = selElems[i]; const elem = selElems[i];
@@ -944,7 +944,7 @@ export const moveSelectedToLayer = function (layerName) {
batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldLayer)); batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldLayer));
} }
canvas_.addCommandToHistory(batchCmd); svgCanvas.addCommandToHistory(batchCmd);
return true; return true;
}; };
@@ -955,10 +955,10 @@ export const moveSelectedToLayer = function (layerName) {
* @returns {void} * @returns {void}
*/ */
export const mergeLayer = function (hrService) { export const mergeLayer = function (hrService) {
canvas_.getCurrentDrawing().mergeLayer(historyRecordingService(hrService)); svgCanvas.getCurrentDrawing().mergeLayer(historyRecordingService(hrService));
canvas_.clearSelection(); svgCanvas.clearSelection();
leaveContext(); leaveContext();
canvas_.changeSVGContent(); svgCanvas.changeSvgContent();
}; };
/** /**
@@ -967,10 +967,10 @@ export const mergeLayer = function (hrService) {
* @returns {void} * @returns {void}
*/ */
export const mergeAllLayers = function (hrService) { export const mergeAllLayers = function (hrService) {
canvas_.getCurrentDrawing().mergeAllLayers(historyRecordingService(hrService)); svgCanvas.getCurrentDrawing().mergeAllLayers(historyRecordingService(hrService));
canvas_.clearSelection(); svgCanvas.clearSelection();
leaveContext(); leaveContext();
canvas_.changeSVGContent(); svgCanvas.changeSvgContent();
}; };
/** /**
@@ -982,7 +982,7 @@ export const mergeAllLayers = function (hrService) {
*/ */
export const leaveContext = function () { export const leaveContext = function () {
const len = disabledElems.length; const len = disabledElems.length;
const dataStorage = canvas_.getDataStorage(); const dataStorage = svgCanvas.getDataStorage();
if (len) { if (len) {
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
const elem = disabledElems[i]; const elem = disabledElems[i];
@@ -995,10 +995,10 @@ export const leaveContext = function () {
elem.setAttribute('style', 'pointer-events: inherit'); elem.setAttribute('style', 'pointer-events: inherit');
} }
disabledElems = []; disabledElems = [];
canvas_.clearSelection(true); svgCanvas.clearSelection(true);
canvas_.call('contextset', null); svgCanvas.call('contextset', null);
} }
canvas_.setCurrentGroup(null); svgCanvas.setCurrentGroup(null);
}; };
/** /**
@@ -1009,14 +1009,14 @@ export const leaveContext = function () {
* @returns {void} * @returns {void}
*/ */
export const setContext = function (elem) { export const setContext = function (elem) {
const dataStorage = canvas_.getDataStorage(); const dataStorage = svgCanvas.getDataStorage();
leaveContext(); leaveContext();
if (typeof elem === 'string') { if (typeof elem === 'string') {
elem = getElem(elem); elem = getElem(elem);
} }
// Edit inside this group // Edit inside this group
canvas_.setCurrentGroup(elem); svgCanvas.setCurrentGroup(elem);
// Disable other elements // Disable other elements
const parentsUntil = getParentsUntil(elem, '#svgcontent'); const parentsUntil = getParentsUntil(elem, '#svgcontent');
@@ -1038,8 +1038,8 @@ export const setContext = function (elem) {
curthis.setAttribute('style', 'pointer-events: none'); curthis.setAttribute('style', 'pointer-events: none');
disabledElems.push(curthis); disabledElems.push(curthis);
}); });
canvas_.clearSelection(); svgCanvas.clearSelection();
canvas_.call('contextset', canvas_.getCurrentGroup()); svgCanvas.call('contextset', svgCanvas.getCurrentGroup());
}; };
/** /**

232
src/svgcanvas/elem-get-set.js
View File

@@ -21,15 +21,15 @@ const {
ChangeElementCommand, BatchCommand ChangeElementCommand, BatchCommand
} = hstry; } = hstry;
let elemContext_ = null; let svgCanvas = null;
/** /**
* @function module:elem-get-set.init * @function module:elem-get-set.init
* @param {module:elem-get-set.elemContext} elemContext * @param {module:elem-get-set.elemContext} elemContext
* @returns {void} * @returns {void}
*/ */
export const init = function (elemContext) { export const init = function (canvas) {
elemContext_ = elemContext; svgCanvas = canvas;
}; };
/** /**
@@ -37,14 +37,14 @@ export const init = function (elemContext) {
* @returns {DimensionsAndZoom} The current dimensions and zoom level in an object * @returns {DimensionsAndZoom} The current dimensions and zoom level in an object
*/ */
export const getResolutionMethod = function () { export const getResolutionMethod = function () {
const currentZoom = elemContext_.getCurrentZoom(); const zoom = svgCanvas.getZoom();
const w = elemContext_.getSVGContent().getAttribute('width') / currentZoom; const w = svgCanvas.getSvgContent().getAttribute('width') / zoom;
const h = elemContext_.getSVGContent().getAttribute('height') / currentZoom; const h = svgCanvas.getSvgContent().getAttribute('height') / zoom;
return { return {
w, w,
h, h,
zoom: currentZoom zoom
}; };
}; };
@@ -55,8 +55,8 @@ export const getResolutionMethod = function () {
* `undefined` if no element is passed nd there are no selected elements. * `undefined` if no element is passed nd there are no selected elements.
*/ */
export const getTitleMethod = function (elem) { export const getTitleMethod = function (elem) {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const dataStorage = elemContext_.getDataStorage(); const dataStorage = svgCanvas.getDataStorage();
elem = elem || selectedElements[0]; elem = elem || selectedElements[0];
if (!elem) { return undefined; } if (!elem) { return undefined; }
if (dataStorage.has(elem, 'gsvg')) { if (dataStorage.has(elem, 'gsvg')) {
@@ -81,8 +81,8 @@ export const getTitleMethod = function (elem) {
* @returns {void} * @returns {void}
*/ */
export const setGroupTitleMethod = function (val) { export const setGroupTitleMethod = function (val) {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const dataStorage = elemContext_.getDataStorage(); const dataStorage = svgCanvas.getDataStorage();
let elem = selectedElements[0]; let elem = selectedElements[0];
if (dataStorage.has(elem, 'gsvg')) { if (dataStorage.has(elem, 'gsvg')) {
elem = dataStorage.get(elem, 'gsvg'); elem = dataStorage.get(elem, 'gsvg');
@@ -105,13 +105,13 @@ export const setGroupTitleMethod = function (val) {
title.textContent = val; title.textContent = val;
} else { } else {
// Add title element // Add title element
title = elemContext_.getDOMDocument().createElementNS(NS.SVG, 'title'); title = svgCanvas.getDOMDocument().createElementNS(NS.SVG, 'title');
title.textContent = val; title.textContent = val;
elem.insertBefore(title, elem.firstChild); elem.insertBefore(title, elem.firstChild);
batchCmd.addSubCommand(new InsertElementCommand(title)); batchCmd.addSubCommand(new InsertElementCommand(title));
} }
elemContext_.addCommandToHistory(batchCmd); svgCanvas.addCommandToHistory(batchCmd);
}; };
/** /**
@@ -122,7 +122,7 @@ export const setGroupTitleMethod = function (val) {
* @returns {void} * @returns {void}
*/ */
export const setDocumentTitleMethod = function (newTitle) { export const setDocumentTitleMethod = function (newTitle) {
const childs = elemContext_.getSVGContent().childNodes; const childs = svgCanvas.getSvgContent().childNodes;
let docTitle = false; let oldTitle = ''; let docTitle = false; let oldTitle = '';
const batchCmd = new BatchCommand('Change Image Title'); const batchCmd = new BatchCommand('Change Image Title');
@@ -135,9 +135,9 @@ export const setDocumentTitleMethod = function (newTitle) {
} }
} }
if (!docTitle) { if (!docTitle) {
docTitle = elemContext_.getDOMDocument().createElementNS(NS.SVG, 'title'); docTitle = svgCanvas.getDOMDocument().createElementNS(NS.SVG, 'title');
elemContext_.getSVGContent().insertBefore(docTitle, elemContext_.getSVGContent().firstChild); svgCanvas.getSvgContent().insertBefore(docTitle, svgCanvas.getSvgContent().firstChild);
// svgcontent.firstChild.before(docTitle); // Ok to replace above with this? // svgContent.firstChild.before(docTitle); // Ok to replace above with this?
} }
if (newTitle.length) { if (newTitle.length) {
@@ -147,7 +147,7 @@ export const setDocumentTitleMethod = function (newTitle) {
docTitle.remove(); docTitle.remove();
} }
batchCmd.addSubCommand(new ChangeElementCommand(docTitle, { '#text': oldTitle })); batchCmd.addSubCommand(new ChangeElementCommand(docTitle, { '#text': oldTitle }));
elemContext_.addCommandToHistory(batchCmd); svgCanvas.addCommandToHistory(batchCmd);
}; };
/** /**
@@ -161,8 +161,8 @@ export const setDocumentTitleMethod = function (newTitle) {
* It will fail on "fit to content" option with no content to fit to. * It will fail on "fit to content" option with no content to fit to.
*/ */
export const setResolutionMethod = function (x, y) { export const setResolutionMethod = function (x, y) {
const currentZoom = elemContext_.getCurrentZoom(); const zoom = svgCanvas.getZoom();
const res = elemContext_.getCanvas().getResolution(); const res = svgCanvas.getResolution();
const { w, h } = res; const { w, h } = res;
let batchCmd; let batchCmd;
@@ -173,16 +173,16 @@ export const setResolutionMethod = function (x, y) {
if (bbox) { if (bbox) {
batchCmd = new BatchCommand('Fit Canvas to Content'); batchCmd = new BatchCommand('Fit Canvas to Content');
const visEls = getVisibleElements(); const visEls = getVisibleElements();
elemContext_.getCanvas().addToSelection(visEls); svgCanvas.addToSelection(visEls);
const dx = []; const dy = []; const dx = []; const dy = [];
visEls.forEach(function(_item, _i){ visEls.forEach(function(_item, _i){
dx.push(bbox.x * -1); dx.push(bbox.x * -1);
dy.push(bbox.y * -1); dy.push(bbox.y * -1);
}); });
const cmd = elemContext_.getCanvas().moveSelectedElements(dx, dy, true); const cmd = svgCanvas.moveSelectedElements(dx, dy, true);
batchCmd.addSubCommand(cmd); batchCmd.addSubCommand(cmd);
elemContext_.getCanvas().clearSelection(); svgCanvas.clearSelection();
x = Math.round(bbox.width); x = Math.round(bbox.width);
y = Math.round(bbox.height); y = Math.round(bbox.height);
@@ -198,18 +198,18 @@ export const setResolutionMethod = function (x, y) {
x = convertToNum('width', x); x = convertToNum('width', x);
y = convertToNum('height', y); y = convertToNum('height', y);
elemContext_.getSVGContent().setAttribute('width', x); svgCanvas.getSvgContent().setAttribute('width', x);
elemContext_.getSVGContent().setAttribute('height', y); svgCanvas.getSvgContent().setAttribute('height', y);
this.contentW = x; this.contentW = x;
this.contentH = y; this.contentH = y;
batchCmd.addSubCommand(new ChangeElementCommand(elemContext_.getSVGContent(), { width: w, height: h })); batchCmd.addSubCommand(new ChangeElementCommand(svgCanvas.getSvgContent(), { width: w, height: h }));
elemContext_.getSVGContent().setAttribute('viewBox', [ 0, 0, x / currentZoom, y / currentZoom ].join(' ')); svgCanvas.getSvgContent().setAttribute('viewBox', [ 0, 0, x / zoom, y / zoom ].join(' '));
batchCmd.addSubCommand(new ChangeElementCommand(elemContext_.getSVGContent(), { viewBox: [ '0 0', w, h ].join(' ') })); batchCmd.addSubCommand(new ChangeElementCommand(svgCanvas.getSvgContent(), { viewBox: [ '0 0', w, h ].join(' ') }));
elemContext_.addCommandToHistory(batchCmd); svgCanvas.addCommandToHistory(batchCmd);
elemContext_.call('changed', [ elemContext_.getSVGContent() ]); svgCanvas.call('changed', [ svgCanvas.getSvgContent() ]);
} }
return true; return true;
}; };
@@ -222,7 +222,7 @@ export const setResolutionMethod = function (x, y) {
*/ */
export const getEditorNSMethod = function (add) { export const getEditorNSMethod = function (add) {
if (add) { if (add) {
elemContext_.getSVGContent().setAttribute('xmlns:se', NS.SE); svgCanvas.getSvgContent().setAttribute('xmlns:se', NS.SE);
} }
return NS.SE; return NS.SE;
}; };
@@ -241,8 +241,8 @@ export const getEditorNSMethod = function (add) {
* @returns {module:elem-get-set.ZoomAndBBox|void} * @returns {module:elem-get-set.ZoomAndBBox|void}
*/ */
export const setBBoxZoomMethod = function (val, editorW, editorH) { export const setBBoxZoomMethod = function (val, editorW, editorH) {
const currentZoom = elemContext_.getCurrentZoom(); const zoom = svgCanvas.getZoom();
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
let spacer = 0.85; let spacer = 0.85;
let bb; let bb;
const calcZoom = function (bb) { const calcZoom = function (bb) {
@@ -250,16 +250,16 @@ export const setBBoxZoomMethod = function (val, editorW, editorH) {
const wZoom = Math.round((editorW / bb.width) * 100 * spacer) / 100; const wZoom = Math.round((editorW / bb.width) * 100 * spacer) / 100;
const hZoom = Math.round((editorH / bb.height) * 100 * spacer) / 100; const hZoom = Math.round((editorH / bb.height) * 100 * spacer) / 100;
const zoom = Math.min(wZoom, hZoom); const zoom = Math.min(wZoom, hZoom);
elemContext_.getCanvas().setZoom(zoom); svgCanvas.setZoom(zoom);
return { zoom, bbox: bb }; return { zoom, bbox: bb };
}; };
if (typeof val === 'object') { if (typeof val === 'object') {
bb = val; bb = val;
if (bb.width === 0 || bb.height === 0) { if (bb.width === 0 || bb.height === 0) {
const newzoom = bb.zoom ? bb.zoom : currentZoom * bb.factor; const newzoom = bb.zoom ? bb.zoom : zoom * bb.factor;
elemContext_.getCanvas().setZoom(newzoom); svgCanvas.setZoom(newzoom);
return { zoom: currentZoom, bbox: bb }; return { zoom: zoom, bbox: bb };
} }
return calcZoom(bb); return calcZoom(bb);
} }
@@ -276,7 +276,7 @@ export const setBBoxZoomMethod = function (val, editorW, editorH) {
bb = getStrokedBBoxDefaultVisible(selectedElems); bb = getStrokedBBoxDefaultVisible(selectedElems);
break; break;
} case 'canvas': { } case 'canvas': {
const res = elemContext_.getCanvas().getResolution(); const res = svgCanvas.getResolution();
spacer = 0.95; spacer = 0.95;
bb = { width: res.w, height: res.h, x: 0, y: 0 }; bb = { width: res.w, height: res.h, x: 0, y: 0 };
break; break;
@@ -284,7 +284,7 @@ export const setBBoxZoomMethod = function (val, editorW, editorH) {
bb = getStrokedBBoxDefaultVisible(); bb = getStrokedBBoxDefaultVisible();
break; break;
case 'layer': case 'layer':
bb = getStrokedBBoxDefaultVisible(getVisibleElements(elemContext_.getCanvas().getCurrentDrawing().getCurrentLayer())); bb = getStrokedBBoxDefaultVisible(getVisibleElements(svgCanvas.getCurrentDrawing().getCurrentLayer()));
break; break;
default: default:
return undefined; return undefined;
@@ -300,16 +300,16 @@ export const setBBoxZoomMethod = function (val, editorW, editorH) {
* @returns {void} * @returns {void}
*/ */
export const setZoomMethod = function (zoomLevel) { export const setZoomMethod = function (zoomLevel) {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const res = elemContext_.getCanvas().getResolution(); const res = svgCanvas.getResolution();
elemContext_.getSVGContent().setAttribute('viewBox', '0 0 ' + res.w / zoomLevel + ' ' + res.h / zoomLevel); svgCanvas.getSvgContent().setAttribute('viewBox', '0 0 ' + res.w / zoomLevel + ' ' + res.h / zoomLevel);
elemContext_.setCurrentZoom(zoomLevel); svgCanvas.setZoom(zoomLevel);
selectedElements.forEach(function(elem){ selectedElements.forEach(function(elem){
if (!elem) { return; } if (!elem) { return; }
elemContext_.getCanvas().selectorManager.requestSelector(elem).resize(); svgCanvas.selectorManager.requestSelector(elem).resize();
}); });
elemContext_.getCanvas().pathActions.zoomChange(); svgCanvas.pathActions.zoomChange();
elemContext_.getCanvas().runExtensions('zoomChanged', zoomLevel); svgCanvas.runExtensions('zoomChanged', zoomLevel);
}; };
/** /**
@@ -322,9 +322,9 @@ export const setZoomMethod = function (zoomLevel) {
* @returns {void} * @returns {void}
*/ */
export const setColorMethod = function (type, val, preventUndo) { export const setColorMethod = function (type, val, preventUndo) {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
elemContext_.setCurShape(type, val); svgCanvas.setCurShape(type, val);
elemContext_.setCurProperties(type + '_paint', { type: 'solidColor' }); svgCanvas.setCurProperties(type + '_paint', { type: 'solidColor' });
const elems = []; const elems = [];
/** /**
* *
@@ -353,10 +353,10 @@ export const setColorMethod = function (type, val, preventUndo) {
} }
if (elems.length > 0) { if (elems.length > 0) {
if (!preventUndo) { if (!preventUndo) {
elemContext_.getCanvas().changeSelectedAttribute(type, val, elems); svgCanvas.changeSelectedAttribute(type, val, elems);
elemContext_.call('changed', elems); svgCanvas.call('changed', elems);
} else { } else {
elemContext_.changeSelectedAttributeNoUndoMethod(type, val, elems); svgCanvas.changeSelectedAttributeNoUndoMethod(type, val, elems);
} }
} }
}; };
@@ -368,9 +368,9 @@ export const setColorMethod = function (type, val, preventUndo) {
* @returns {void} * @returns {void}
*/ */
export const setGradientMethod = function (type) { export const setGradientMethod = function (type) {
if (!elemContext_.getCurProperties(type + '_paint') || if (!svgCanvas.getCurProperties(type + '_paint') ||
elemContext_.getCurProperties(type + '_paint').type === 'solidColor') { return; } svgCanvas.getCurProperties(type + '_paint').type === 'solidColor') { return; }
const canvas = elemContext_.getCanvas(); const canvas = svgCanvas;
let grad = canvas[type + 'Grad']; let grad = canvas[type + 'Grad'];
// find out if there is a duplicate gradient already in the defs // find out if there is a duplicate gradient already in the defs
const duplicateGrad = findDuplicateGradient(grad); const duplicateGrad = findDuplicateGradient(grad);
@@ -378,14 +378,14 @@ export const setGradientMethod = function (type) {
// no duplicate found, so import gradient into defs // no duplicate found, so import gradient into defs
if (!duplicateGrad) { if (!duplicateGrad) {
// const origGrad = grad; // const origGrad = grad;
grad = elemContext_.getDOMDocument().importNode(grad, true); grad = svgCanvas.getDOMDocument().importNode(grad, true);
defs.append(grad); defs.append(grad);
// get next id and set it on the grad // get next id and set it on the grad
grad.id = elemContext_.getCanvas().getNextId(); grad.id = svgCanvas.getNextId();
} else { // use existing gradient } else { // use existing gradient
grad = duplicateGrad; grad = duplicateGrad;
} }
elemContext_.getCanvas().setColor(type, 'url(#' + grad.id + ')'); svgCanvas.setColor(type, 'url(#' + grad.id + ')');
}; };
/** /**
@@ -474,15 +474,15 @@ export const setPaintMethod = function (type, paint) {
this.setPaintOpacity(type, p.alpha / 100, true); this.setPaintOpacity(type, p.alpha / 100, true);
// now set the current paint object // now set the current paint object
elemContext_.setCurProperties(type + '_paint', p); svgCanvas.setCurProperties(type + '_paint', p);
switch (p.type) { switch (p.type) {
case 'solidColor': case 'solidColor':
this.setColor(type, p.solidColor !== 'none' ? '#' + p.solidColor : 'none'); this.setColor(type, p.solidColor !== 'none' ? '#' + p.solidColor : 'none');
break; break;
case 'linearGradient': case 'linearGradient':
case 'radialGradient': case 'radialGradient':
elemContext_.setCanvas(type + 'Grad', p[p.type]); svgCanvas.setCanvas(type + 'Grad', p[p.type]);
elemContext_.getCanvas().setGradient(type); svgCanvas.setGradient(type);
break; break;
} }
}; };
@@ -495,12 +495,12 @@ export const setPaintMethod = function (type, paint) {
* @returns {void} * @returns {void}
*/ */
export const setStrokeWidthMethod = function (val) { export const setStrokeWidthMethod = function (val) {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
if (val === 0 && [ 'line', 'path' ].includes(elemContext_.getCanvas().getMode())) { if (val === 0 && [ 'line', 'path' ].includes(svgCanvas.getMode())) {
elemContext_.getCanvas().setStrokeWidth(1); svgCanvas.setStrokeWidth(1);
return; return;
} }
elemContext_.setCurProperties('stroke_width', val); svgCanvas.setCurProperties('stroke_width', val);
const elems = []; const elems = [];
/** /**
@@ -525,8 +525,8 @@ export const setStrokeWidthMethod = function (val) {
} }
} }
if (elems.length > 0) { if (elems.length > 0) {
elemContext_.getCanvas().changeSelectedAttribute('stroke-width', val, elems); svgCanvas.changeSelectedAttribute('stroke-width', val, elems);
elemContext_.call('changed', selectedElements); svgCanvas.call('changed', selectedElements);
} }
}; };
@@ -539,8 +539,8 @@ export const setStrokeWidthMethod = function (val) {
* @returns {void} * @returns {void}
*/ */
export const setStrokeAttrMethod = function (attr, val) { export const setStrokeAttrMethod = function (attr, val) {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
elemContext_.setCurShape(attr.replace('-', '_'), val); svgCanvas.setCurShape(attr.replace('-', '_'), val);
const elems = []; const elems = [];
let i = selectedElements.length; let i = selectedElements.length;
@@ -555,8 +555,8 @@ export const setStrokeAttrMethod = function (attr, val) {
} }
} }
if (elems.length > 0) { if (elems.length > 0) {
elemContext_.getCanvas().changeSelectedAttribute(attr, val, elems); svgCanvas.changeSelectedAttribute(attr, val, elems);
elemContext_.call('changed', selectedElements); svgCanvas.call('changed', selectedElements);
} }
}; };
/** /**
@@ -565,7 +565,7 @@ export const setStrokeAttrMethod = function (attr, val) {
* @returns {boolean} Indicates whether or not element is bold * @returns {boolean} Indicates whether or not element is bold
*/ */
export const getBoldMethod = function () { export const getBoldMethod = function () {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
// should only have one element selected // should only have one element selected
const selected = selectedElements[0]; const selected = selectedElements[0];
if (!isNullish(selected) && selected.tagName === 'text' && if (!isNullish(selected) && selected.tagName === 'text' &&
@@ -582,14 +582,14 @@ export const getBoldMethod = function () {
* @returns {void} * @returns {void}
*/ */
export const setBoldMethod = function (b) { export const setBoldMethod = function (b) {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const selected = selectedElements[0]; const selected = selectedElements[0];
if (!isNullish(selected) && selected.tagName === 'text' && if (!isNullish(selected) && selected.tagName === 'text' &&
isNullish(selectedElements[1])) { isNullish(selectedElements[1])) {
elemContext_.getCanvas().changeSelectedAttribute('font-weight', b ? 'bold' : 'normal'); svgCanvas.changeSelectedAttribute('font-weight', b ? 'bold' : 'normal');
} }
if (!selectedElements[0].textContent) { if (!selectedElements[0].textContent) {
elemContext_.getCanvas().textActions.setCursor(); svgCanvas.textActions.setCursor();
} }
}; };
@@ -599,7 +599,7 @@ export const setBoldMethod = function (b) {
* @returns {boolean} Indicates whether or not element is italic * @returns {boolean} Indicates whether or not element is italic
*/ */
export const getItalicMethod = function () { export const getItalicMethod = function () {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const selected = selectedElements[0]; const selected = selectedElements[0];
if (!isNullish(selected) && selected.tagName === 'text' && if (!isNullish(selected) && selected.tagName === 'text' &&
isNullish(selectedElements[1])) { isNullish(selectedElements[1])) {
@@ -615,14 +615,14 @@ export const getItalicMethod = function () {
* @returns {void} * @returns {void}
*/ */
export const setItalicMethod = function (i) { export const setItalicMethod = function (i) {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const selected = selectedElements[0]; const selected = selectedElements[0];
if (!isNullish(selected) && selected.tagName === 'text' && if (!isNullish(selected) && selected.tagName === 'text' &&
isNullish(selectedElements[1])) { isNullish(selectedElements[1])) {
elemContext_.getCanvas().changeSelectedAttribute('font-style', i ? 'italic' : 'normal'); svgCanvas.changeSelectedAttribute('font-style', i ? 'italic' : 'normal');
} }
if (!selectedElements[0].textContent) { if (!selectedElements[0].textContent) {
elemContext_.getCanvas().textActions.setCursor(); svgCanvas.textActions.setCursor();
} }
}; };
@@ -632,14 +632,14 @@ export const setItalicMethod = function (i) {
* @returns {void} * @returns {void}
*/ */
export const setTextAnchorMethod = function (value) { export const setTextAnchorMethod = function (value) {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const selected = selectedElements[0]; const selected = selectedElements[0];
if (!isNullish(selected) && selected.tagName === 'text' && if (!isNullish(selected) && selected.tagName === 'text' &&
isNullish(selectedElements[1])) { isNullish(selectedElements[1])) {
elemContext_.getCanvas().changeSelectedAttribute('text-anchor', value); svgCanvas.changeSelectedAttribute('text-anchor', value);
} }
if (!selectedElements[0].textContent) { if (!selectedElements[0].textContent) {
elemContext_.getCanvas().textActions.setCursor(); svgCanvas.textActions.setCursor();
} }
}; };
@@ -648,7 +648,7 @@ export const setTextAnchorMethod = function (value) {
* @returns {string} The current font family * @returns {string} The current font family
*/ */
export const getFontFamilyMethod = function () { export const getFontFamilyMethod = function () {
return elemContext_.getCurText('font_family'); return svgCanvas.getCurText('font_family');
}; };
/** /**
@@ -658,11 +658,11 @@ export const getFontFamilyMethod = function () {
* @returns {void} * @returns {void}
*/ */
export const setFontFamilyMethod = function (val) { export const setFontFamilyMethod = function (val) {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
elemContext_.setCurText('font_family', val); svgCanvas.setCurText('font_family', val);
elemContext_.getCanvas().changeSelectedAttribute('font-family', val); svgCanvas.changeSelectedAttribute('font-family', val);
if (selectedElements[0] && !selectedElements[0].textContent) { if (selectedElements[0] && !selectedElements[0].textContent) {
elemContext_.getCanvas().textActions.setCursor(); svgCanvas.textActions.setCursor();
} }
}; };
@@ -673,8 +673,8 @@ export const setFontFamilyMethod = function (val) {
* @returns {void} * @returns {void}
*/ */
export const setFontColorMethod = function (val) { export const setFontColorMethod = function (val) {
elemContext_.setCurText('fill', val); svgCanvas.setCurText('fill', val);
elemContext_.getCanvas().changeSelectedAttribute('fill', val); svgCanvas.changeSelectedAttribute('fill', val);
}; };
/** /**
@@ -682,7 +682,7 @@ export const setFontColorMethod = function (val) {
* @returns {string} The current font color * @returns {string} The current font color
*/ */
export const getFontColorMethod = function () { export const getFontColorMethod = function () {
return elemContext_.getCurText('fill'); return svgCanvas.getCurText('fill');
}; };
/** /**
@@ -690,7 +690,7 @@ export const getFontColorMethod = function () {
* @returns {Float} The current font size * @returns {Float} The current font size
*/ */
export const getFontSizeMethod = function () { export const getFontSizeMethod = function () {
return elemContext_.getCurText('font_size'); return svgCanvas.getCurText('font_size');
}; };
/** /**
@@ -700,11 +700,11 @@ export const getFontSizeMethod = function () {
* @returns {void} * @returns {void}
*/ */
export const setFontSizeMethod = function (val) { export const setFontSizeMethod = function (val) {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
elemContext_.setCurText('font_size', val); svgCanvas.setCurText('font_size', val);
elemContext_.getCanvas().changeSelectedAttribute('font-size', val); svgCanvas.changeSelectedAttribute('font-size', val);
if (!selectedElements[0].textContent) { if (!selectedElements[0].textContent) {
elemContext_.getCanvas().textActions.setCursor(); svgCanvas.textActions.setCursor();
} }
}; };
@@ -713,7 +713,7 @@ export const setFontSizeMethod = function (val) {
* @returns {string} The current text (`textContent`) of the selected element * @returns {string} The current text (`textContent`) of the selected element
*/ */
export const getTextMethod = function () { export const getTextMethod = function () {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const selected = selectedElements[0]; const selected = selectedElements[0];
if (isNullish(selected)) { return ''; } if (isNullish(selected)) { return ''; }
return (selected) ? selected.textContent : ''; return (selected) ? selected.textContent : '';
@@ -726,9 +726,9 @@ export const getTextMethod = function () {
* @returns {void} * @returns {void}
*/ */
export const setTextContentMethod = function (val) { export const setTextContentMethod = function (val) {
elemContext_.getCanvas().changeSelectedAttribute('#text', val); svgCanvas.changeSelectedAttribute('#text', val);
elemContext_.getCanvas().textActions.init(val); svgCanvas.textActions.init(val);
elemContext_.getCanvas().textActions.setCursor(); svgCanvas.textActions.setCursor();
}; };
/** /**
@@ -740,7 +740,7 @@ export const setTextContentMethod = function (val) {
* @returns {void} * @returns {void}
*/ */
export const setImageURLMethod = function (val) { export const setImageURLMethod = function (val) {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const elem = selectedElements[0]; const elem = selectedElements[0];
if (!elem) { return; } if (!elem) { return; }
@@ -772,11 +772,11 @@ export const setImageURLMethod = function (val) {
elem.setAttribute('width', this.width); elem.setAttribute('width', this.width);
elem.setAttribute('height', this.height); elem.setAttribute('height', this.height);
elemContext_.getCanvas().selectorManager.requestSelector(elem).resize(); svgCanvas.selectorManager.requestSelector(elem).resize();
batchCmd.addSubCommand(new ChangeElementCommand(elem, changes)); batchCmd.addSubCommand(new ChangeElementCommand(elem, changes));
elemContext_.addCommandToHistory(batchCmd); svgCanvas.addCommandToHistory(batchCmd);
elemContext_.call('changed', [ elem ]); svgCanvas.call('changed', [ elem ]);
}; };
img.src = val; img.src = val;
}; };
@@ -788,7 +788,7 @@ export const setImageURLMethod = function (val) {
* @returns {void} * @returns {void}
*/ */
export const setLinkURLMethod = function (val) { export const setLinkURLMethod = function (val) {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
let elem = selectedElements[0]; let elem = selectedElements[0];
if (!elem) { return; } if (!elem) { return; }
if (elem.tagName !== 'a') { if (elem.tagName !== 'a') {
@@ -812,7 +812,7 @@ export const setLinkURLMethod = function (val) {
'#href': curHref '#href': curHref
})); }));
elemContext_.addCommandToHistory(batchCmd); svgCanvas.addCommandToHistory(batchCmd);
}; };
/** /**
@@ -824,15 +824,15 @@ export const setLinkURLMethod = function (val) {
* @returns {void} * @returns {void}
*/ */
export const setRectRadiusMethod = function (val) { export const setRectRadiusMethod = function (val) {
const selectedElements = elemContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const selected = selectedElements[0]; const selected = selectedElements[0];
if (!isNullish(selected) && selected.tagName === 'rect') { if (!isNullish(selected) && selected.tagName === 'rect') {
const r = Number(selected.getAttribute('rx')); const r = Number(selected.getAttribute('rx'));
if (r !== val) { if (r !== val) {
selected.setAttribute('rx', val); selected.setAttribute('rx', val);
selected.setAttribute('ry', val); selected.setAttribute('ry', val);
elemContext_.addCommandToHistory(new ChangeElementCommand(selected, { rx: r, ry: r }, 'Radius')); svgCanvas.addCommandToHistory(new ChangeElementCommand(selected, { rx: r, ry: r }, 'Radius'));
elemContext_.call('changed', [ selected ]); svgCanvas.call('changed', [ selected ]);
} }
} }
}; };
@@ -844,7 +844,7 @@ export const setRectRadiusMethod = function (val) {
* @returns {void} * @returns {void}
*/ */
export const makeHyperlinkMethod = function (url) { export const makeHyperlinkMethod = function (url) {
elemContext_.getCanvas().groupSelectedElements('a', url); svgCanvas.groupSelectedElements('a', url);
// TODO: If element is a single "g", convert to "a" // TODO: If element is a single "g", convert to "a"
// if (selectedElements.length > 1 && selectedElements[1]) { // if (selectedElements.length > 1 && selectedElements[1]) {
@@ -855,7 +855,7 @@ export const makeHyperlinkMethod = function (url) {
* @returns {void} * @returns {void}
*/ */
export const removeHyperlinkMethod = function () { export const removeHyperlinkMethod = function () {
elemContext_.getCanvas().ungroupSelectedElement(); svgCanvas.ungroupSelectedElement();
}; };
/** /**
@@ -869,7 +869,7 @@ export const removeHyperlinkMethod = function () {
* @returns {void} * @returns {void}
*/ */
export const setSegTypeMethod = function (newType) { export const setSegTypeMethod = function (newType) {
elemContext_.getCanvas().pathActions.setSegType(newType); svgCanvas.pathActions.setSegType(newType);
}; };
/** /**
@@ -887,8 +887,8 @@ export const setBackgroundMethod = function (color, url) {
border.setAttribute('fill', color === 'chessboard' ? '#fff' : color); border.setAttribute('fill', color === 'chessboard' ? '#fff' : color);
if (color === 'chessboard') { if (color === 'chessboard') {
if (!bgPattern) { if (!bgPattern) {
bgPattern = elemContext_.getDOMDocument().createElementNS(NS.SVG, 'foreignObject'); bgPattern = svgCanvas.getDOMDocument().createElementNS(NS.SVG, 'foreignObject');
elemContext_.getCanvas().assignAttributes(bgPattern, { svgCanvas.assignAttributes(bgPattern, {
id: 'background_pattern', id: 'background_pattern',
width: '100%', width: '100%',
height: '100%', height: '100%',
@@ -896,7 +896,7 @@ export const setBackgroundMethod = function (color, url) {
style: 'pointer-events:none' style: 'pointer-events:none'
}); });
const div = document.createElement('div'); const div = document.createElement('div');
elemContext_.getCanvas().assignAttributes(div, { svgCanvas.assignAttributes(div, {
style: 'pointer-events:none;width:100%;height:100%;' + style: 'pointer-events:none;width:100%;height:100%;' +
'background-image:url(data:image/gif;base64,' + 'background-image:url(data:image/gif;base64,' +
'R0lGODlhEAAQAIAAAP///9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG+' + 'R0lGODlhEAAQAIAAAP///9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG+' +
@@ -910,8 +910,8 @@ export const setBackgroundMethod = function (color, url) {
} }
if (url) { if (url) {
if (!bgImg) { if (!bgImg) {
bgImg = elemContext_.getDOMDocument().createElementNS(NS.SVG, 'image'); bgImg = svgCanvas.getDOMDocument().createElementNS(NS.SVG, 'image');
elemContext_.getCanvas().assignAttributes(bgImg, { svgCanvas.assignAttributes(bgImg, {
id: 'background_image', id: 'background_image',
width: '100%', width: '100%',
height: '100%', height: '100%',

625
src/svgcanvas/event.js
View File

File diff suppressed because it is too large Load Diff

16
src/svgcanvas/json.js
View File

@@ -8,7 +8,7 @@
import { getElem, assignAttributes, cleanupElement } from './utilities.js'; import { getElem, assignAttributes, cleanupElement } from './utilities.js';
import { NS } from './namespaces.js'; import { NS } from './namespaces.js';
let jsonContext_ = null; let svgCanvas = null;
let svgdoc_ = null; let svgdoc_ = null;
/** /**
@@ -25,9 +25,9 @@ let svgdoc_ = null;
* @param {module:json.jsonContext} jsonContext * @param {module:json.jsonContext} jsonContext
* @returns {void} * @returns {void}
*/ */
export const init = function (jsonContext) { export const init = function (canvas) {
jsonContext_ = jsonContext; svgCanvas = canvas;
svgdoc_ = jsonContext.getDOMDocument(); svgdoc_ = canvas.getDOMDocument();
}; };
/** /**
* @function module:json.getJsonFromSvgElements Iterate element and return json format * @function module:json.getJsonFromSvgElements Iterate element and return json format
@@ -61,7 +61,7 @@ export const getJsonFromSvgElements = (data) => {
/** /**
* This should really be an intersection implementing all rather than a union. * This should really be an intersection implementing all rather than a union.
* @name module:json.addSVGElementsFromJson * @name module:json.addSVGElementsFromJson
* @type {module:utilities.EditorContext#addSVGElementsFromJson|module:path.EditorContext#addSVGElementFromJson} * @type {module:utilities.EditorContext#addSVGElementsFromJson|module:path.EditorContext#addSVGElemensFromJson}
*/ */
export const addSVGElementsFromJson = function (data) { export const addSVGElementsFromJson = function (data) {
@@ -69,7 +69,7 @@ export const addSVGElementsFromJson = function (data) {
let shape = getElem(data.attr.id); let shape = getElem(data.attr.id);
// if shape is a path but we need to create a rect/ellipse, then remove the path // if shape is a path but we need to create a rect/ellipse, then remove the path
const currentLayer = jsonContext_.getDrawing().getCurrentLayer(); const currentLayer = svgCanvas.getDrawing().getCurrentLayer();
if (shape && data.element !== shape.tagName) { if (shape && data.element !== shape.tagName) {
shape.remove(); shape.remove();
shape = null; shape = null;
@@ -78,10 +78,10 @@ export const addSVGElementsFromJson = function (data) {
const ns = data.namespace || NS.SVG; const ns = data.namespace || NS.SVG;
shape = svgdoc_.createElementNS(ns, data.element); shape = svgdoc_.createElementNS(ns, data.element);
if (currentLayer) { if (currentLayer) {
(jsonContext_.getCurrentGroup() || currentLayer).append(shape); (svgCanvas.getCurrentGroup() || currentLayer).append(shape);
} }
} }
const curShape = jsonContext_.getCurShape(); const curShape = svgCanvas.getCurShape();
if (data.curStyles) { if (data.curStyles) {
assignAttributes(shape, { assignAttributes(shape, {
fill: curShape.fill, fill: curShape.fill,

28
src/svgcanvas/paste-elem.js
View File

@@ -7,15 +7,15 @@ const {
InsertElementCommand, BatchCommand InsertElementCommand, BatchCommand
} = hstry; } = hstry;
let pasteContext_ = null; let svgCanvas = null;
/** /**
* @function module:paste-elem.init * @function module:paste-elem.init
* @param {module:paste-elem.pasteContext} pasteContext * @param {module:paste-elem.pasteContext} pasteContext
* @returns {void} * @returns {void}
*/ */
export const init = function (pasteContext) { export const init = function (canvas) {
pasteContext_ = pasteContext; svgCanvas = canvas;
}; };
/** /**
@@ -28,7 +28,7 @@ export const init = function (pasteContext) {
* @returns {void} * @returns {void}
*/ */
export const pasteElementsMethod = function (type, x, y) { export const pasteElementsMethod = function (type, x, y) {
let clipb = JSON.parse(sessionStorage.getItem(pasteContext_.getClipBoardID())); let clipb = JSON.parse(sessionStorage.getItem(svgCanvas.getClipBoardID()));
if (!clipb) return; if (!clipb) return;
let len = clipb.length; let len = clipb.length;
if (!len) return; if (!len) return;
@@ -52,7 +52,7 @@ export const pasteElementsMethod = function (type, x, y) {
*/ */
function checkIDs (elem) { function checkIDs (elem) {
if (elem.attr && elem.attr.id) { if (elem.attr && elem.attr.id) {
changedIDs[elem.attr.id] = pasteContext_.getCanvas().getNextId(); changedIDs[elem.attr.id] = svgCanvas.getNextId();
elem.attr.id = changedIDs[elem.attr.id]; elem.attr.id = changedIDs[elem.attr.id];
} }
if (elem.children) elem.children.forEach((child) => checkIDs(child)); if (elem.children) elem.children.forEach((child) => checkIDs(child));
@@ -67,7 +67,7 @@ export const pasteElementsMethod = function (type, x, y) {
* @property {module:svgcanvas.SVGAsJSON[]} elems * @property {module:svgcanvas.SVGAsJSON[]} elems
* @property {module:svgcanvas.ChangedIDs} changes Maps past ID (on attribute) to current ID * @property {module:svgcanvas.ChangedIDs} changes Maps past ID (on attribute) to current ID
*/ */
pasteContext_.getCanvas().runExtensions( svgCanvas.runExtensions(
'IDsUpdated', 'IDsUpdated',
/** @type {module:svgcanvas.SvgCanvas#event:ext_IDsUpdated} */ /** @type {module:svgcanvas.SvgCanvas#event:ext_IDsUpdated} */
{ elems: clipb, changes: changedIDs }, { elems: clipb, changes: changedIDs },
@@ -87,21 +87,21 @@ export const pasteElementsMethod = function (type, x, y) {
const elem = clipb[len]; const elem = clipb[len];
if (!elem) { continue; } if (!elem) { continue; }
const copy = pasteContext_.getCanvas().addSVGElementFromJson(elem); const copy = svgCanvas.addSVGElemensFromJson(elem);
pasted.push(copy); pasted.push(copy);
batchCmd.addSubCommand(new InsertElementCommand(copy)); batchCmd.addSubCommand(new InsertElementCommand(copy));
pasteContext_.restoreRefElems(copy); svgCanvas.restoreRefElements(copy);
} }
pasteContext_.getCanvas().selectOnly(pasted); svgCanvas.selectOnly(pasted);
if (type !== 'in_place') { if (type !== 'in_place') {
let ctrX; let ctrY; let ctrX; let ctrY;
if (!type) { if (!type) {
ctrX = pasteContext_.getLastClickPoint('x'); ctrX = svgCanvas.getLastClickPoint('x');
ctrY = pasteContext_.getLastClickPoint('y'); ctrY = svgCanvas.getLastClickPoint('y');
} else if (type === 'point') { } else if (type === 'point') {
ctrX = x; ctrX = x;
ctrY = y; ctrY = y;
@@ -118,10 +118,10 @@ export const pasteElementsMethod = function (type, x, y) {
dy.push(cy); dy.push(cy);
}); });
const cmd = pasteContext_.getCanvas().moveSelectedElements(dx, dy, false); const cmd = svgCanvas.moveSelectedElements(dx, dy, false);
if (cmd) batchCmd.addSubCommand(cmd); if (cmd) batchCmd.addSubCommand(cmd);
} }
pasteContext_.addCommandToHistory(batchCmd); svgCanvas.addCommandToHistory(batchCmd);
pasteContext_.getCanvas().call('changed', pasted); svgCanvas.call('changed', pasted);
}; };

218
src/svgcanvas/path-actions.js
View File

@@ -18,19 +18,16 @@ import {
getBBox getBBox
} from './utilities.js'; } from './utilities.js';
let pathActionsContext_ = null; let svgCanvas = null;
let editorContext_ = null;
let path = null; let path = null;
/** /**
* @function module:path-actions.init * @function module:path-actions.init
* @param {module:path-actions.pathActionsContext_} pathActionsContext * @param {module:path-actions.svgCanvas} pathActionsContext
* @returns {void} * @returns {void}
*/ */
export const init = function (pathActionsContext) { export const init = function (canvas) {
pathActionsContext_ = pathActionsContext; svgCanvas = canvas;
// editorContext_ = pathActionsContext_.getEditorContext();
// path = pathActionsContext_.getPathObj();
}; };
/** /**
@@ -59,7 +56,7 @@ export const convertPath = function (pth, toRel) {
let y2 = seg.y2 || 0; let y2 = seg.y2 || 0;
// const type = seg.pathSegType; // const type = seg.pathSegType;
// const pathMap = pathActionsContext_.getPathMap(); // const pathMap = svgCanvas.getPathMap();
// let letter = pathMap[type][toRel ? 'toLowerCase' : 'toUpperCase'](); // let letter = pathMap[type][toRel ? 'toLowerCase' : 'toUpperCase']();
let letter = seg.pathSegTypeAsLetter; let letter = seg.pathSegTypeAsLetter;
@@ -246,8 +243,8 @@ export const pathActionsMethod = (function () {
let currentPath = null; let currentPath = null;
let hasMoved = false; let hasMoved = false;
// No `editorContext_` yet but should be ok as is `null` by default // No `svgCanvas` yet but should be ok as is `null` by default
// editorContext_.setDrawnPath(null); // svgCanvas.setDrawnPath(null);
/** /**
* This function converts a polyline (created by the fh_path tool) into * This function converts a polyline (created by the fh_path tool) into
@@ -286,7 +283,7 @@ export const pathActionsMethod = (function () {
// if the previous segment had a control point, we want to smooth out // if the previous segment had a control point, we want to smooth out
// the control points on both sides // the control points on both sides
if (prevCtlPt) { if (prevCtlPt) {
const newpts = pathActionsContext_.smoothControlPoints(prevCtlPt, ct1, curpos); const newpts = svgCanvas.smoothControlPoints(prevCtlPt, ct1, curpos);
if (newpts && newpts.length === 2) { if (newpts && newpts.length === 2) {
const prevArr = d[d.length - 1].split(','); const prevArr = d[d.length - 1].split(',');
prevArr[2] = newpts[0].x; prevArr[2] = newpts[0].x;
@@ -310,13 +307,11 @@ export const pathActionsMethod = (function () {
} }
d = d.join(' '); d = d.join(' ');
// create new path element element = svgCanvas.addSVGElemensFromJson({
editorContext_ = pathActionsContext_.getEditorContext();
element = editorContext_.addSVGElementFromJson({
element: 'path', element: 'path',
curStyles: true, curStyles: true,
attr: { attr: {
id: editorContext_.getId(), id: svgCanvas.getId(),
d, d,
fill: 'none' fill: 'none'
} }
@@ -336,18 +331,17 @@ export const pathActionsMethod = (function () {
*/ */
mouseDown (evt, mouseTarget, startX, startY) { mouseDown (evt, mouseTarget, startX, startY) {
let id; let id;
editorContext_ = pathActionsContext_.getEditorContext(); if (svgCanvas.getCurrentMode() === 'path') {
if (editorContext_.getCurrentMode() === 'path') {
let mouseX = startX; // Was this meant to work with the other `mouseX`? (was defined globally so adding `let` to at least avoid a global) let mouseX = startX; // Was this meant to work with the other `mouseX`? (was defined globally so adding `let` to at least avoid a global)
let mouseY = startY; // Was this meant to work with the other `mouseY`? (was defined globally so adding `let` to at least avoid a global) let mouseY = startY; // Was this meant to work with the other `mouseY`? (was defined globally so adding `let` to at least avoid a global)
const currentZoom = editorContext_.getCurrentZoom(); const zoom = svgCanvas.getZoom();
let x = mouseX / currentZoom; let x = mouseX / zoom;
let y = mouseY / currentZoom; let y = mouseY / zoom;
let stretchy = getElem('path_stretch_line'); let stretchy = getElem('path_stretch_line');
newPoint = [ x, y ]; newPoint = [ x, y ];
if (editorContext_.getGridSnapping()) { if (svgCanvas.getGridSnapping()) {
x = snapToGrid(x); x = snapToGrid(x);
y = snapToGrid(y); y = snapToGrid(y);
mouseX = snapToGrid(mouseX); mouseX = snapToGrid(mouseX);
@@ -369,27 +363,27 @@ export const pathActionsMethod = (function () {
let keep = null; let keep = null;
let index; let index;
// if pts array is empty, create path element with M at current point // if pts array is empty, create path element with M at current point
const drawnPath = editorContext_.getDrawnPath(); const drawnPath = svgCanvas.getDrawnPath();
if (!drawnPath) { if (!drawnPath) {
const dAttr = 'M' + x + ',' + y + ' '; // Was this meant to work with the other `dAttr`? (was defined globally so adding `var` to at least avoid a global) const dAttr = 'M' + x + ',' + y + ' '; // Was this meant to work with the other `dAttr`? (was defined globally so adding `var` to at least avoid a global)
/* drawnPath = */ editorContext_.setDrawnPath(editorContext_.addSVGElementFromJson({ /* drawnPath = */ svgCanvas.setDrawnPath(svgCanvas.addSVGElemensFromJson({
element: 'path', element: 'path',
curStyles: true, curStyles: true,
attr: { attr: {
d: dAttr, d: dAttr,
id: editorContext_.getNextId(), id: svgCanvas.getNextId(),
opacity: editorContext_.getOpacity() / 2 opacity: svgCanvas.getOpacity() / 2
} }
})); }));
// set stretchy line to first point // set stretchy line to first point
stretchy.setAttribute('d', [ 'M', mouseX, mouseY, mouseX, mouseY ].join(' ')); stretchy.setAttribute('d', [ 'M', mouseX, mouseY, mouseX, mouseY ].join(' '));
index = subpath ? path.segs.length : 0; index = subpath ? path.segs.length : 0;
pathActionsContext_.addPointGrip(index, mouseX, mouseY); svgCanvas.addPointGrip(index, mouseX, mouseY);
} else { } else {
// determine if we clicked on an existing point // determine if we clicked on an existing point
const seglist = drawnPath.pathSegList; const seglist = drawnPath.pathSegList;
let i = seglist.numberOfItems; let i = seglist.numberOfItems;
const FUZZ = 6 / currentZoom; const FUZZ = 6 / zoom;
let clickOnPoint = false; let clickOnPoint = false;
while (i) { while (i) {
i--; i--;
@@ -405,10 +399,10 @@ export const pathActionsMethod = (function () {
} }
// get path element that we are in the process of creating // get path element that we are in the process of creating
id = editorContext_.getId(); id = svgCanvas.getId();
// Remove previous path object if previously created // Remove previous path object if previously created
pathActionsContext_.removePath_(id); svgCanvas.removePath_(id);
const newpath = getElem(id); const newpath = getElem(id);
let newseg; let newseg;
@@ -429,7 +423,7 @@ export const pathActionsMethod = (function () {
sSeg = stretchy.pathSegList.getItem(1); sSeg = stretchy.pathSegList.getItem(1);
newseg = sSeg.pathSegType === 4 newseg = sSeg.pathSegType === 4
? drawnPath.createSVGPathSegLinetoAbs(absX, absY) ? drawnPath.createSVGPathSegLinetoAbs(absX, absY)
: drawnPath.createSVGPathSegCurvetoCubicAbs(absX, absY, sSeg.x1 / currentZoom, sSeg.y1 / currentZoom, absX, absY); : drawnPath.createSVGPathSegCurvetoCubicAbs(absX, absY, sSeg.x1 / zoom, sSeg.y1 / zoom, absX, absY);
const endseg = drawnPath.createSVGPathSegClosePath(); const endseg = drawnPath.createSVGPathSegClosePath();
seglist.appendItem(newseg); seglist.appendItem(newseg);
@@ -442,12 +436,12 @@ export const pathActionsMethod = (function () {
// This will signal to commit the path // This will signal to commit the path
// const element = newpath; // Other event handlers define own `element`, so this was probably not meant to interact with them or one which shares state (as there were none); I therefore adding a missing `var` to avoid a global // const element = newpath; // Other event handlers define own `element`, so this was probably not meant to interact with them or one which shares state (as there were none); I therefore adding a missing `var` to avoid a global
/* drawnPath = */ editorContext_.setDrawnPath(null); /* drawnPath = */ svgCanvas.setDrawnPath(null);
editorContext_.setStarted(false); svgCanvas.setStarted(false);
if (subpath) { if (subpath) {
if (path.matrix) { if (path.matrix) {
editorContext_.remapElement(newpath, {}, path.matrix.inverse()); svgCanvas.remapElement(newpath, {}, path.matrix.inverse());
} }
const newD = newpath.getAttribute('d'); const newD = newpath.getAttribute('d');
@@ -455,7 +449,7 @@ export const pathActionsMethod = (function () {
path.elem.setAttribute('d', origD + newD); path.elem.setAttribute('d', origD + newD);
newpath.parentNode.removeChild(newpath); newpath.parentNode.removeChild(newpath);
if (path.matrix) { if (path.matrix) {
pathActionsContext_.recalcRotatedPath(); svgCanvas.recalcRotatedPath();
} }
pathActionsMethod.toEditMode(path.elem); pathActionsMethod.toEditMode(path.elem);
path.selectPt(); path.selectPt();
@@ -464,8 +458,8 @@ export const pathActionsMethod = (function () {
// else, create a new point, update path element // else, create a new point, update path element
} else { } else {
// Checks if current target or parents are #svgcontent // Checks if current target or parents are #svgcontent
if (!(editorContext_.getContainer() !== editorContext_.getMouseTarget(evt) && editorContext_.getContainer().contains( if (!(svgCanvas.getContainer() !== svgCanvas.getMouseTarget(evt) && svgCanvas.getContainer().contains(
editorContext_.getMouseTarget(evt) svgCanvas.getMouseTarget(evt)
))) { ))) {
// Clicked outside canvas, so don't make point // Clicked outside canvas, so don't make point
return false; return false;
@@ -483,26 +477,26 @@ export const pathActionsMethod = (function () {
// Use the segment defined by stretchy // Use the segment defined by stretchy
sSeg = stretchy.pathSegList.getItem(1); sSeg = stretchy.pathSegList.getItem(1);
newseg = sSeg.pathSegType === 4 newseg = sSeg.pathSegType === 4
? drawnPath.createSVGPathSegLinetoAbs(editorContext_.round(x), editorContext_.round(y)) ? drawnPath.createSVGPathSegLinetoAbs(svgCanvas.round(x), svgCanvas.round(y))
: drawnPath.createSVGPathSegCurvetoCubicAbs( : drawnPath.createSVGPathSegCurvetoCubicAbs(
editorContext_.round(x), svgCanvas.round(x),
editorContext_.round(y), svgCanvas.round(y),
sSeg.x1 / currentZoom, sSeg.x1 / zoom,
sSeg.y1 / currentZoom, sSeg.y1 / zoom,
sSeg.x2 / currentZoom, sSeg.x2 / zoom,
sSeg.y2 / currentZoom sSeg.y2 / zoom
); );
drawnPath.pathSegList.appendItem(newseg); drawnPath.pathSegList.appendItem(newseg);
x *= currentZoom; x *= zoom;
y *= currentZoom; y *= zoom;
// set stretchy line to latest point // set stretchy line to latest point
stretchy.setAttribute('d', [ 'M', x, y, x, y ].join(' ')); stretchy.setAttribute('d', [ 'M', x, y, x, y ].join(' '));
index = num; index = num;
if (subpath) { index += path.segs.length; } if (subpath) { index += path.segs.length; }
pathActionsContext_.addPointGrip(index, x, y); svgCanvas.addPointGrip(index, x, y);
} }
// keep = true; // keep = true;
} }
@@ -546,16 +540,16 @@ export const pathActionsMethod = (function () {
// Start selection box // Start selection box
if (!path.dragging) { if (!path.dragging) {
let rubberBox = editorContext_.getRubberBox(); let rubberBox = svgCanvas.getRubberBox();
if (isNullish(rubberBox)) { if (isNullish(rubberBox)) {
rubberBox = editorContext_.setRubberBox( rubberBox = svgCanvas.setRubberBox(
editorContext_.selectorManager.getRubberBandBox() svgCanvas.selectorManager.getRubberBandBox()
); );
} }
const currentZoom = editorContext_.getCurrentZoom(); const zoom = svgCanvas.getZoom();
assignAttributes(rubberBox, { assignAttributes(rubberBox, {
x: startX * currentZoom, x: startX * zoom,
y: startY * currentZoom, y: startY * zoom,
width: 0, width: 0,
height: 0, height: 0,
display: 'inline' display: 'inline'
@@ -569,11 +563,10 @@ export const pathActionsMethod = (function () {
* @returns {void} * @returns {void}
*/ */
mouseMove (mouseX, mouseY) { mouseMove (mouseX, mouseY) {
editorContext_ = pathActionsContext_.getEditorContext(); const zoom = svgCanvas.getZoom();
const currentZoom = editorContext_.getCurrentZoom();
hasMoved = true; hasMoved = true;
const drawnPath = editorContext_.getDrawnPath(); const drawnPath = svgCanvas.getDrawnPath();
if (editorContext_.getCurrentMode() === 'path') { if (svgCanvas.getCurrentMode() === 'path') {
if (!drawnPath) { return; } if (!drawnPath) { return; }
const seglist = drawnPath.pathSegList; const seglist = drawnPath.pathSegList;
const index = seglist.numberOfItems - 1; const index = seglist.numberOfItems - 1;
@@ -583,8 +576,8 @@ export const pathActionsMethod = (function () {
// if (!index) { return; } // if (!index) { return; }
// Set control points // Set control points
const pointGrip1 = pathActionsContext_.addCtrlGrip('1c1'); const pointGrip1 = svgCanvas.addCtrlGrip('1c1');
const pointGrip2 = pathActionsContext_.addCtrlGrip('0c2'); const pointGrip2 = svgCanvas.addCtrlGrip('0c2');
// dragging pointGrip1 // dragging pointGrip1
pointGrip1.setAttribute('cx', mouseX); pointGrip1.setAttribute('cx', mouseX);
@@ -596,21 +589,21 @@ export const pathActionsMethod = (function () {
// set curve // set curve
// const seg = seglist.getItem(index); // const seg = seglist.getItem(index);
const curX = mouseX / currentZoom; const curX = mouseX / zoom;
const curY = mouseY / currentZoom; const curY = mouseY / zoom;
const altX = (ptX + (ptX - curX)); const altX = (ptX + (ptX - curX));
const altY = (ptY + (ptY - curY)); const altY = (ptY + (ptY - curY));
pointGrip2.setAttribute('cx', altX * currentZoom); pointGrip2.setAttribute('cx', altX * zoom);
pointGrip2.setAttribute('cy', altY * currentZoom); pointGrip2.setAttribute('cy', altY * zoom);
pointGrip2.setAttribute('display', 'inline'); pointGrip2.setAttribute('display', 'inline');
const ctrlLine = pathActionsContext_.getCtrlLine(1); const ctrlLine = svgCanvas.getCtrlLine(1);
assignAttributes(ctrlLine, { assignAttributes(ctrlLine, {
x1: mouseX, x1: mouseX,
y1: mouseY, y1: mouseY,
x2: altX * currentZoom, x2: altX * zoom,
y2: altY * currentZoom, y2: altY * zoom,
display: 'inline' display: 'inline'
}); });
@@ -625,10 +618,10 @@ export const pathActionsMethod = (function () {
lastX += (lastX - last.x2); lastX += (lastX - last.x2);
lastY += (lastY - last.y2); lastY += (lastY - last.y2);
} else if (firstCtrl) { } else if (firstCtrl) {
lastX = firstCtrl[0] / currentZoom; lastX = firstCtrl[0] / zoom;
lastY = firstCtrl[1] / currentZoom; lastY = firstCtrl[1] / zoom;
} }
pathActionsContext_.replacePathSeg(6, index, [ ptX, ptY, lastX, lastY, altX, altY ], drawnPath); svgCanvas.replacePathSeg(6, index, [ ptX, ptY, lastX, lastY, altX, altY ], drawnPath);
} }
} else { } else {
const stretchy = getElem('path_stretch_line'); const stretchy = getElem('path_stretch_line');
@@ -637,16 +630,16 @@ export const pathActionsMethod = (function () {
if (prev.pathSegType === 6) { if (prev.pathSegType === 6) {
const prevX = prev.x + (prev.x - prev.x2); const prevX = prev.x + (prev.x - prev.x2);
const prevY = prev.y + (prev.y - prev.y2); const prevY = prev.y + (prev.y - prev.y2);
pathActionsContext_.replacePathSeg( svgCanvas.replacePathSeg(
6, 6,
1, 1,
[ mouseX, mouseY, prevX * currentZoom, prevY * currentZoom, mouseX, mouseY ], [ mouseX, mouseY, prevX * zoom, prevY * zoom, mouseX, mouseY ],
stretchy stretchy
); );
} else if (firstCtrl) { } else if (firstCtrl) {
pathActionsContext_.replacePathSeg(6, 1, [ mouseX, mouseY, firstCtrl[0], firstCtrl[1], mouseX, mouseY ], stretchy); svgCanvas.replacePathSeg(6, 1, [ mouseX, mouseY, firstCtrl[0], firstCtrl[1], mouseX, mouseY ], stretchy);
} else { } else {
pathActionsContext_.replacePathSeg(4, 1, [ mouseX, mouseY ], stretchy); svgCanvas.replacePathSeg(4, 1, [ mouseX, mouseY ], stretchy);
} }
} }
} }
@@ -654,11 +647,11 @@ export const pathActionsMethod = (function () {
} }
// if we are dragging a point, let's move it // if we are dragging a point, let's move it
if (path.dragging) { if (path.dragging) {
const pt = pathActionsContext_.getPointFromGrip({ const pt = svgCanvas.getPointFromGrip({
x: path.dragging[0], x: path.dragging[0],
y: path.dragging[1] y: path.dragging[1]
}, path); }, path);
const mpt = pathActionsContext_.getPointFromGrip({ const mpt = svgCanvas.getPointFromGrip({
x: mouseX, x: mouseX,
y: mouseY y: mouseY
}, path); }, path);
@@ -678,10 +671,10 @@ export const pathActionsMethod = (function () {
if (!seg.next && !seg.prev) { return; } if (!seg.next && !seg.prev) { return; }
// const {item} = seg; // const {item} = seg;
const rubberBox = editorContext_.getRubberBox(); const rubberBox = svgCanvas.getRubberBox();
const rbb = getBBox(rubberBox); const rbb = getBBox(rubberBox);
const pt = pathActionsContext_.getGripPt(seg); const pt = svgCanvas.getGripPt(seg);
const ptBb = { const ptBb = {
x: pt.x, x: pt.x,
y: pt.y, y: pt.y,
@@ -711,14 +704,13 @@ export const pathActionsMethod = (function () {
* @returns {module:path.keepElement|void} * @returns {module:path.keepElement|void}
*/ */
mouseUp (evt, element, _mouseX, _mouseY) { mouseUp (evt, element, _mouseX, _mouseY) {
editorContext_ = pathActionsContext_.getEditorContext(); const drawnPath = svgCanvas.getDrawnPath();
const drawnPath = editorContext_.getDrawnPath();
// Create mode // Create mode
if (editorContext_.getCurrentMode() === 'path') { if (svgCanvas.getCurrentMode() === 'path') {
newPoint = null; newPoint = null;
if (!drawnPath) { if (!drawnPath) {
element = getElem(editorContext_.getId()); element = getElem(svgCanvas.getId());
editorContext_.setStarted(false); svgCanvas.setStarted(false);
firstCtrl = null; firstCtrl = null;
} }
@@ -729,7 +721,7 @@ export const pathActionsMethod = (function () {
} }
// Edit mode // Edit mode
const rubberBox = editorContext_.getRubberBox(); const rubberBox = svgCanvas.getRubberBox();
if (path.dragging) { if (path.dragging) {
const lastPt = path.cur_pt; const lastPt = path.cur_pt;
@@ -764,10 +756,9 @@ export const pathActionsMethod = (function () {
* @returns {void} * @returns {void}
*/ */
toEditMode (element) { toEditMode (element) {
editorContext_ = pathActionsContext_.getEditorContext(); path = svgCanvas.getPath_(element);
path = pathActionsContext_.getPath_(element); svgCanvas.setCurrentMode('pathedit');
editorContext_.setCurrentMode('pathedit'); svgCanvas.clearSelection();
editorContext_.clearSelection();
path.setPathContext(); path.setPathContext();
path.show(true).update(); path.show(true).update();
path.oldbbox = getBBox(path.elem); path.oldbbox = getBBox(path.elem);
@@ -779,22 +770,21 @@ export const pathActionsMethod = (function () {
* @returns {void} * @returns {void}
*/ */
toSelectMode (elem) { toSelectMode (elem) {
editorContext_ = pathActionsContext_.getEditorContext();
const selPath = (elem === path.elem); const selPath = (elem === path.elem);
editorContext_.setCurrentMode('select'); svgCanvas.setCurrentMode('select');
path.setPathContext(); path.setPathContext();
path.show(false); path.show(false);
currentPath = false; currentPath = false;
editorContext_.clearSelection(); svgCanvas.clearSelection();
if (path.matrix) { if (path.matrix) {
// Rotated, so may need to re-calculate the center // Rotated, so may need to re-calculate the center
pathActionsContext_.recalcRotatedPath(); svgCanvas.recalcRotatedPath();
} }
if (selPath) { if (selPath) {
editorContext_.call('selected', [ elem ]); svgCanvas.call('selected', [ elem ]);
editorContext_.addToSelection([ elem ], true); svgCanvas.addToSelection([ elem ], true);
} }
}, },
/** /**
@@ -802,11 +792,10 @@ export const pathActionsMethod = (function () {
* @returns {void} * @returns {void}
*/ */
addSubPath (on) { addSubPath (on) {
editorContext_ = pathActionsContext_.getEditorContext();
if (on) { if (on) {
// Internally we go into "path" mode, but in the UI it will // Internally we go into "path" mode, but in the UI it will
// still appear as if in "pathedit" mode. // still appear as if in "pathedit" mode.
editorContext_.setCurrentMode('path'); svgCanvas.setCurrentMode('path');
subpath = true; subpath = true;
} else { } else {
pathActionsMethod.clear(true); pathActionsMethod.clear(true);
@@ -818,10 +807,9 @@ export const pathActionsMethod = (function () {
* @returns {void} * @returns {void}
*/ */
select (target) { select (target) {
editorContext_ = pathActionsContext_.getEditorContext();
if (currentPath === target) { if (currentPath === target) {
pathActionsMethod.toEditMode(target); pathActionsMethod.toEditMode(target);
editorContext_.setCurrentMode('pathedit'); svgCanvas.setCurrentMode('pathedit');
// going into pathedit mode // going into pathedit mode
} else { } else {
currentPath = target; currentPath = target;
@@ -832,8 +820,7 @@ export const pathActionsMethod = (function () {
* @returns {void} * @returns {void}
*/ */
reorient () { reorient () {
editorContext_ = pathActionsContext_.getEditorContext(); const elem = svgCanvas.getSelectedElements()[0];
const elem = editorContext_.getSelectedElements()[0];
if (!elem) { return; } if (!elem) { return; }
const angl = getRotationAngle(elem); const angl = getRotationAngle(elem);
if (angl === 0) { return; } if (angl === 0) { return; }
@@ -844,18 +831,18 @@ export const pathActionsMethod = (function () {
transform: elem.getAttribute('transform') transform: elem.getAttribute('transform')
}; };
batchCmd.addSubCommand(new ChangeElementCommand(elem, changes)); batchCmd.addSubCommand(new ChangeElementCommand(elem, changes));
editorContext_.clearSelection(); svgCanvas.clearSelection();
this.resetOrientation(elem); this.resetOrientation(elem);
editorContext_.addCommandToHistory(batchCmd); svgCanvas.addCommandToHistory(batchCmd);
// Set matrix to null // Set matrix to null
pathActionsContext_.getPath_(elem).show(false).matrix = null; svgCanvas.getPath_(elem).show(false).matrix = null;
this.clear(); this.clear();
editorContext_.addToSelection([ elem ], true); svgCanvas.addToSelection([ elem ], true);
editorContext_.call('changed', editorContext_.getSelectedElements()); svgCanvas.call('changed', svgCanvas.getSelectedElements());
}, },
/** /**
@@ -863,11 +850,10 @@ export const pathActionsMethod = (function () {
* @returns {void} * @returns {void}
*/ */
clear () { clear () {
editorContext_ = pathActionsContext_.getEditorContext(); const drawnPath = svgCanvas.getDrawnPath();
const drawnPath = editorContext_.getDrawnPath();
currentPath = null; currentPath = null;
if (drawnPath) { if (drawnPath) {
const elem = getElem(editorContext_.getId()); const elem = getElem(svgCanvas.getId());
const psl = getElem('path_stretch_line'); const psl = getElem('path_stretch_line');
psl.parentNode.removeChild(psl); psl.parentNode.removeChild(psl);
elem.parentNode.removeChild(elem); elem.parentNode.removeChild(elem);
@@ -877,9 +863,9 @@ export const pathActionsMethod = (function () {
el.setAttribute('display', 'none'); el.setAttribute('display', 'none');
}); });
firstCtrl = null; firstCtrl = null;
editorContext_.setDrawnPath(null); svgCanvas.setDrawnPath(null);
editorContext_.setStarted(false); svgCanvas.setStarted(false);
} else if (editorContext_.getCurrentMode() === 'pathedit') { } else if (svgCanvas.getCurrentMode() === 'pathedit') {
this.toSelectMode(); this.toSelectMode();
} }
if (path) { path.init().show(false); } if (path) { path.init().show(false); }
@@ -921,18 +907,17 @@ export const pathActionsMethod = (function () {
pts.splice(pts.length, 0, pt.x, pt.y); pts.splice(pts.length, 0, pt.x, pt.y);
} }
}); });
pathActionsContext_.replacePathSeg(type, i, pts, pth); svgCanvas.replacePathSeg(type, i, pts, pth);
} }
pathActionsContext_.reorientGrads(pth, m); svgCanvas.reorientGrads(pth, m);
return undefined; return undefined;
}, },
/** /**
* @returns {void} * @returns {void}
*/ */
zoomChange () { zoomChange () {
editorContext_ = pathActionsContext_.getEditorContext(); if (svgCanvas.getCurrentMode() === 'pathedit') {
if (editorContext_.getCurrentMode() === 'pathedit') {
path.update(); path.update();
} }
}, },
@@ -960,7 +945,7 @@ export const pathActionsMethod = (function () {
* @returns {void} * @returns {void}
*/ */
linkControlPoints (linkPoints) { linkControlPoints (linkPoints) {
pathActionsContext_.setLinkControlPoints(linkPoints); svgCanvas.setLinkControlPoints(linkPoints);
}, },
/** /**
* @returns {void} * @returns {void}
@@ -1091,7 +1076,7 @@ export const pathActionsMethod = (function () {
const pt = list.getItem(lastM); const pt = list.getItem(lastM);
// Make this point the new "M" // Make this point the new "M"
pathActionsContext_.replacePathSeg(2, lastM, [ pt.x, pt.y ]); svgCanvas.replacePathSeg(2, lastM, [ pt.x, pt.y ]);
// i = index; // i is local here, so has no effect; what was the intent for this? // i = index; // i is local here, so has no effect; what was the intent for this?
@@ -1162,8 +1147,7 @@ export const pathActionsMethod = (function () {
// Completely delete a path with 1 or 0 segments // Completely delete a path with 1 or 0 segments
if (path.elem.pathSegList.numberOfItems <= 1) { if (path.elem.pathSegList.numberOfItems <= 1) {
pathActionsMethod.toSelectMode(path.elem); pathActionsMethod.toSelectMode(path.elem);
editorContext_ = pathActionsContext_.getEditorContext(); svgCanvas.canvas.deleteSelectedElements();
editorContext_.canvas.deleteSelectedElements();
return; return;
} }

59
src/svgcanvas/path-method.js
View File

@@ -16,16 +16,15 @@ import {
getElem getElem
} from './utilities.js'; } from './utilities.js';
let pathMethodsContext_ = null; let svgCanvas = null;
let editorContext_ = null;
/** /**
* @function module:path-actions.init * @function module:path-actions.init
* @param {module:path-actions.pathMethodsContext_} pathMethodsContext * @param {module:path-actions.svgCanvas} pathMethodsContext
* @returns {void} * @returns {void}
*/ */
export const init = function (pathMethodsContext) { export const init = function (canvas) {
pathMethodsContext_ = pathMethodsContext; svgCanvas = canvas;
}; };
/* eslint-disable max-len */ /* eslint-disable max-len */
@@ -38,7 +37,7 @@ export const init = function (pathMethodsContext) {
*/ */
/* eslint-enable max-len */ /* eslint-enable max-len */
export const ptObjToArrMethod = function (type, segItem) { export const ptObjToArrMethod = function (type, segItem) {
const segData = pathMethodsContext_.getSegData(); const segData = svgCanvas.getSegData();
const props = segData[type]; const props = segData[type];
return props.map((prop) => { return props.map((prop) => {
return segItem[prop]; return segItem[prop];
@@ -62,10 +61,10 @@ export const getGripPtMethod = function (seg, altPt) {
const pt = transformPoint(out.x, out.y, pth.matrix); const pt = transformPoint(out.x, out.y, pth.matrix);
out = pt; out = pt;
} }
editorContext_ = pathMethodsContext_.getEditorContext(); svgCanvas = svgCanvas.getEditorContext();
const currentZoom = editorContext_.getCurrentZoom(); const zoom = svgCanvas.getZoom();
out.x *= currentZoom; out.x *= zoom;
out.y *= currentZoom; out.y *= zoom;
return out; return out;
}; };
@@ -86,10 +85,10 @@ export const getPointFromGripMethod = function (pt, pth) {
out.x = pt.x; out.x = pt.x;
out.y = pt.y; out.y = pt.y;
} }
editorContext_ = pathMethodsContext_.getEditorContext(); svgCanvas = svgCanvas.getEditorContext();
const currentZoom = editorContext_.getCurrentZoom(); const zoom = svgCanvas.getZoom();
out.x /= currentZoom; out.x /= zoom;
out.y /= currentZoom; out.y /= zoom;
return out; return out;
}; };
@@ -134,7 +133,7 @@ export const addPointGripMethod = function (index, x, y) {
cursor: 'move', cursor: 'move',
style: 'pointer-events:all' style: 'pointer-events:all'
}; };
const uiStrings = pathMethodsContext_.getUIStrings(); const uiStrings = svgCanvas.getUIStrings();
if ('pathNodeTooltip' in uiStrings) { // May be empty if running path.js without svg-editor if ('pathNodeTooltip' in uiStrings) { // May be empty if running path.js without svg-editor
atts['xlink:title'] = uiStrings.pathNodeTooltip; atts['xlink:title'] = uiStrings.pathNodeTooltip;
} }
@@ -143,7 +142,7 @@ export const addPointGripMethod = function (index, x, y) {
const grip = document.getElementById('pathpointgrip_' + index); const grip = document.getElementById('pathpointgrip_' + index);
grip?.addEventListener("dblclick", () => { grip?.addEventListener("dblclick", () => {
const path = pathMethodsContext_.getPathObj(); const path = svgCanvas.getPathObj();
if (path) { if (path) {
path.setSegType(); path.setSegType();
} }
@@ -181,7 +180,7 @@ export const addCtrlGripMethod = function (id) {
cursor: 'move', cursor: 'move',
style: 'pointer-events:all' style: 'pointer-events:all'
}; };
const uiStrings = pathMethodsContext_.getUIStrings(); const uiStrings = svgCanvas.getUIStrings();
if ('pathCtrlPtTooltip' in uiStrings) { // May be empty if running path.js without svg-editor if ('pathCtrlPtTooltip' in uiStrings) { // May be empty if running path.js without svg-editor
atts['xlink:title'] = uiStrings.pathCtrlPtTooltip; atts['xlink:title'] = uiStrings.pathCtrlPtTooltip;
} }
@@ -241,7 +240,7 @@ export const getControlPointsMethod = function (seg) {
/* const pointGripContainer = */ getGripContainerMethod(); /* const pointGripContainer = */ getGripContainerMethod();
// Note that this is intentionally not seg.prev.item // Note that this is intentionally not seg.prev.item
const path = pathMethodsContext_.getPathObj(); const path = svgCanvas.getPathObj();
const prev = path.segs[index - 1].item; const prev = path.segs[index - 1].item;
const segItems = [ prev, item ]; const segItems = [ prev, item ];
@@ -286,9 +285,9 @@ export const getControlPointsMethod = function (seg) {
* @returns {void} * @returns {void}
*/ */
export const replacePathSegMethod = function (type, index, pts, elem) { export const replacePathSegMethod = function (type, index, pts, elem) {
const path = pathMethodsContext_.getPathObj(); const path = svgCanvas.getPathObj();
const pth = elem || path.elem; const pth = elem || path.elem;
const pathFuncs = pathMethodsContext_.getPathFuncs(); const pathFuncs = svgCanvas.getPathFuncs();
const func = 'createSVGPathSeg' + pathFuncs[type]; const func = 'createSVGPathSeg' + pathFuncs[type];
const seg = pth[func](...pts); const seg = pth[func](...pts);
@@ -435,7 +434,7 @@ export class Segment {
if (this.ctrlpts) { if (this.ctrlpts) {
if (full) { if (full) {
const path = pathMethodsContext_.getPathObj(); const path = svgCanvas.getPathObj();
this.item = path.elem.pathSegList.getItem(this.index); this.item = path.elem.pathSegList.getItem(this.index);
this.type = this.item.pathSegType; this.type = this.item.pathSegType;
} }
@@ -549,7 +548,7 @@ export class Segment {
setType (newType, pts) { setType (newType, pts) {
replacePathSegMethod(newType, this.index, pts); replacePathSegMethod(newType, this.index, pts);
this.type = newType; this.type = newType;
const path = pathMethodsContext_.getPathObj(); const path = svgCanvas.getPathObj();
this.item = path.elem.pathSegList.getItem(this.index); this.item = path.elem.pathSegList.getItem(this.index);
this.showCtrlPts(newType === 6); this.showCtrlPts(newType === 6);
this.ctrlpts = getControlPointsMethod(this); this.ctrlpts = getControlPointsMethod(this);
@@ -573,14 +572,14 @@ export class Path {
this.elem = elem; this.elem = elem;
this.segs = []; this.segs = [];
this.selected_pts = []; this.selected_pts = [];
pathMethodsContext_.setPathObj(this); svgCanvas.setPathObj(this);
// path = this; // path = this;
this.init(); this.init();
} }
setPathContext() { setPathContext() {
pathMethodsContext_.setPathObj(this); svgCanvas.setPathObj(this);
} }
/** /**
@@ -828,7 +827,7 @@ export class Path {
moveCtrl (dx, dy) { moveCtrl (dx, dy) {
const seg = this.segs[this.selected_pts[0]]; const seg = this.segs[this.selected_pts[0]];
seg.moveCtrl(this.dragctrl, dx, dy); seg.moveCtrl(this.dragctrl, dx, dy);
if (pathMethodsContext_.getLinkControlPts()) { if (svgCanvas.getLinkControlPts()) {
seg.setLinked(this.dragctrl); seg.setLinked(this.dragctrl);
} }
} }
@@ -899,7 +898,7 @@ export class Path {
cur.setType(newType, points); cur.setType(newType, points);
} }
const path = pathMethodsContext_.getPathObj(); const path = svgCanvas.getPathObj();
path.endChanges(text); path.endChanges(text);
} }
@@ -922,7 +921,7 @@ export class Path {
if (ctrlNum) { if (ctrlNum) {
this.dragctrl = ctrlNum; this.dragctrl = ctrlNum;
if (pathMethodsContext_.getLinkControlPts()) { if (svgCanvas.getLinkControlPts()) {
this.segs[pt].setLinked(ctrlNum); this.segs[pt].setLinked(ctrlNum);
} }
} }
@@ -956,7 +955,7 @@ export class Path {
*/ */
endChanges (text) { endChanges (text) {
const cmd = new ChangeElementCommand(this.elem, { d: this.last_d }, text); const cmd = new ChangeElementCommand(this.elem, { d: this.last_d }, text);
editorContext_.endChanges({ cmd, elem: this.elem }); svgCanvas.endChanges({ cmd, elem: this.elem });
} }
/** /**
@@ -984,7 +983,7 @@ export class Path {
} }
const closedSubpath = Path.subpathIsClosed(this.selected_pts[0]); const closedSubpath = Path.subpathIsClosed(this.selected_pts[0]);
editorContext_.addPtsToSelection({ grips, closedSubpath }); svgCanvas.addPtsToSelection({ grips, closedSubpath });
} }
// STATIC // STATIC
@@ -995,7 +994,7 @@ export class Path {
static subpathIsClosed (index) { static subpathIsClosed (index) {
let clsd = false; let clsd = false;
// Check if subpath is already open // Check if subpath is already open
const path = pathMethodsContext_.getPathObj(); const path = svgCanvas.getPathObj();
path.eachSeg(function (i) { path.eachSeg(function (i) {
if (i <= index) { return true; } if (i <= index) { return true; }
if (this.type === 2) { if (this.type === 2) {

72
src/svgcanvas/path.js
View File

@@ -35,6 +35,7 @@ const segData = {
18: [ 'x', 'y' ] // PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS 18: [ 'x', 'y' ] // PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS
}; };
let svgCanvas;
/** /**
* @tutorial LocaleDocs * @tutorial LocaleDocs
* @typedef {module:locale.LocaleStrings|PlainObject} module:path.uiStrings * @typedef {module:locale.LocaleStrings|PlainObject} module:path.uiStrings
@@ -75,8 +76,6 @@ export const setLinkControlPoints = function (lcp) {
*/ */
export let path = null; export let path = null;
let editorContext_ = null;
/** /**
* @external MouseEvent * @external MouseEvent
*/ */
@@ -86,7 +85,7 @@ let editorContext_ = null;
* @typedef {PlainObject} module:path.SVGElementJSON * @typedef {PlainObject} module:path.SVGElementJSON
* @property {string} element - Tag name of the SVG element to create * @property {string} element - Tag name of the SVG element to create
* @property {PlainObject<string, string>} attr - Has key-value attributes to assign to the new element. * @property {PlainObject<string, string>} attr - Has key-value attributes to assign to the new element.
* An `id` should be set so that {@link module:utilities.EditorContext#addSVGElementFromJson} can later re-identify the element for modification or replacement. * An `id` should be set so that {@link module:utilities.EditorContext#addSVGElemensFromJson} can later re-identify the element for modification or replacement.
* @property {boolean} [curStyles=false] - Indicates whether current style attributes should be applied first * @property {boolean} [curStyles=false] - Indicates whether current style attributes should be applied first
* @property {module:path.SVGElementJSON[]} [children] - Data objects to be added recursively as children * @property {module:path.SVGElementJSON[]} [children] - Data objects to be added recursively as children
* @property {string} [namespace="http://www.w3.org/2000/svg"] - Indicate a (non-SVG) namespace * @property {string} [namespace="http://www.w3.org/2000/svg"] - Indicate a (non-SVG) namespace
@@ -107,7 +106,7 @@ let editorContext_ = null;
* Note: This doesn't round to an integer necessarily. * Note: This doesn't round to an integer necessarily.
* @function module:path.EditorContext#round * @function module:path.EditorContext#round
* @param {Float} val * @param {Float} val
* @returns {Float} Rounded value to nearest value based on `currentZoom` * @returns {Float} Rounded value to nearest value based on `zoom`
*/ */
/** /**
* @function module:path.EditorContext#clearSelection * @function module:path.EditorContext#clearSelection
@@ -133,7 +132,7 @@ let editorContext_ = null;
* @returns {void} * @returns {void}
*/ */
/** /**
* @function module:path.EditorContext#addSVGElementFromJson * @function module:path.EditorContext#addSVGElemensFromJson
* @param {module:path.SVGElementJSON} data * @param {module:path.SVGElementJSON} data
* @returns {Element} The new element * @returns {Element} The new element
*/ */
@@ -182,7 +181,7 @@ let editorContext_ = null;
* @returns {void} * @returns {void}
*/ */
/** /**
* @function module:path.EditorContext#getCurrentZoom * @function module:path.EditorContext#getZoom
* @returns {Float} The current zoom level * @returns {Float} The current zoom level
*/ */
/** /**
@@ -220,7 +219,7 @@ let editorContext_ = null;
* @returns {SVGPathElement|null} The same value as passed in * @returns {SVGPathElement|null} The same value as passed in
*/ */
/** /**
* @function module:path.EditorContext#getSVGRoot * @function module:path.EditorContext#getSvgRoot
* @returns {SVGSVGElement} * @returns {SVGSVGElement}
*/ */
@@ -229,9 +228,8 @@ let editorContext_ = null;
* @param {module:path.EditorContext} editorContext * @param {module:path.EditorContext} editorContext
* @returns {void} * @returns {void}
*/ */
export const init = function (editorContext) { export const init = function (canvas) {
editorContext_ = editorContext; svgCanvas = canvas;
pathFuncs = [ 0, 'ClosePath' ]; pathFuncs = [ 0, 'ClosePath' ];
const pathFuncsStrs = [ const pathFuncsStrs = [
'Moveto', 'Lineto', 'CurvetoCubic', 'CurvetoQuadratic', 'Arc', 'Moveto', 'Lineto', 'CurvetoCubic', 'CurvetoQuadratic', 'Arc',
@@ -241,22 +239,22 @@ export const init = function (editorContext) {
pathFuncs.push(s + 'Abs'); pathFuncs.push(s + 'Abs');
pathFuncs.push(s + 'Rel'); pathFuncs.push(s + 'Rel');
}); });
}; pathActionsInit(svgCanvas);
pathMethodInit( pathMethodInit(
/** /**
* @implements {module:path-method.pathMethodsContext} * @implements {module:path-method.pathMethodsContext}
*/ */
{ {
getEditorContext () { return editorContext_; }, getSegData () { return segData; },
getSegData () { return segData; }, getUIStrings () { return uiStrings; },
getUIStrings () { return uiStrings; }, getPathObj () { return path; },
getPathObj () { return path; }, setPathObj (obj) { path = obj; },
setPathObj (obj) { path = obj; }, getPathFuncs () { return pathFuncs; },
getPathFuncs () { return pathFuncs; }, getLinkControlPts () { return linkControlPts; }
getLinkControlPts () { return linkControlPts; } }
} );
); };
/* eslint-disable max-len */ /* eslint-disable max-len */
/** /**
@@ -377,8 +375,8 @@ export const smoothControlPoints = function (ct1, ct2, pt) {
const const
r1 = Math.sqrt(x1 * x1 + y1 * y1); r1 = Math.sqrt(x1 * x1 + y1 * y1);
const r2 = Math.sqrt(x2 * x2 + y2 * y2); const r2 = Math.sqrt(x2 * x2 + y2 * y2);
const nct1 = editorContext_.getSVGRoot().createSVGPoint(); const nct1 = svgCanvas.getSvgRoot().createSVGPoint();
const nct2 = editorContext_.getSVGRoot().createSVGPoint(); const nct2 = svgCanvas.getSvgRoot().createSVGPoint();
let anglea = Math.atan2(y1, x1); let anglea = Math.atan2(y1, x1);
let angleb = Math.atan2(y2, x2); let angleb = Math.atan2(y2, x2);
if (anglea < 0) { anglea += 2 * Math.PI; } if (anglea < 0) { anglea += 2 * Math.PI; }
@@ -511,7 +509,7 @@ export const recalcRotatedPath = function () {
// selectedBBoxes[0].width = box.width; selectedBBoxes[0].height = box.height; // selectedBBoxes[0].width = box.width; selectedBBoxes[0].height = box.height;
// now we must set the new transform to be rotated around the new center // now we must set the new transform to be rotated around the new center
const Rnc = editorContext_.getSVGRoot().createSVGTransform(); const Rnc = svgCanvas.getSvgRoot().createSVGTransform();
const tlist = currentPath.transform.baseVal; const tlist = currentPath.transform.baseVal;
Rnc.setRotate((angle * 180.0 / Math.PI), newcx, newcy); Rnc.setRotate((angle * 180.0 / Math.PI), newcx, newcy);
tlist.replaceItem(Rnc, 0); tlist.replaceItem(Rnc, 0);
@@ -570,7 +568,7 @@ export const reorientGrads = function (elem, m) {
for (const [ key, value ] of Object.entries(gCoords)) { for (const [ key, value ] of Object.entries(gCoords)) {
newgrad.setAttribute(key, value); newgrad.setAttribute(key, value);
} }
newgrad.id = editorContext_.getNextId(); newgrad.id = svgCanvas.getNextId();
findDefs().append(newgrad); findDefs().append(newgrad);
elem.setAttribute(type, 'url(#' + newgrad.id + ')'); elem.setAttribute(type, 'url(#' + newgrad.id + ')');
} }
@@ -774,28 +772,6 @@ function pathDSegment (letter, points, morePoints, lastPoint) {
return segment; return segment;
} }
pathActionsInit(
/**
* @implements {module:path-actions.pathActionsContext}
*/
{
getEditorContext () { return editorContext_; },
getPathMap () { return pathMap; },
smoothControlPoints,
addPointGrip,
recalcRotatedPath,
removePath_,
addCtrlGrip,
getCtrlLine,
replacePathSeg,
getPointFromGrip,
getGripPt,
getPath_,
reorientGrads,
setLinkControlPoints
}
);
/** /**
* Group: Path edit functions. * Group: Path edit functions.
* Functions relating to editing path elements. * Functions relating to editing path elements.

42
src/svgcanvas/recalculate.js
View File

@@ -18,13 +18,13 @@ import {
mergeDeep mergeDeep
} from '../editor/components/jgraduate/Util.js'; } from '../editor/components/jgraduate/Util.js';
let context_; let svgCanvas;
/** /**
* @interface module:recalculate.EditorContext * @interface module:recalculate.EditorContext
*/ */
/** /**
* @function module:recalculate.EditorContext#getSVGRoot * @function module:recalculate.EditorContext#getSvgRoot
* @returns {SVGSVGElement} The root DOM element * @returns {SVGSVGElement} The root DOM element
*/ */
/** /**
@@ -42,8 +42,8 @@ let context_;
* @param {module:recalculate.EditorContext} editorContext * @param {module:recalculate.EditorContext} editorContext
* @returns {void} * @returns {void}
*/ */
export const init = function (editorContext) { export const init = function (canvas) {
context_ = editorContext; svgCanvas = canvas;
}; };
/** /**
@@ -57,7 +57,7 @@ export const init = function (editorContext) {
export const updateClipPath = function (attr, tx, ty) { export const updateClipPath = function (attr, tx, ty) {
const path = getRefElem(attr).firstChild; const path = getRefElem(attr).firstChild;
const cpXform = path.transform.baseVal; const cpXform = path.transform.baseVal;
const newxlate = context_.getSVGRoot().createSVGTransform(); const newxlate = svgCanvas.getSvgRoot().createSVGTransform();
newxlate.setTranslate(tx, ty); newxlate.setTranslate(tx, ty);
cpXform.appendItem(newxlate); cpXform.appendItem(newxlate);
@@ -74,8 +74,8 @@ export const updateClipPath = function (attr, tx, ty) {
*/ */
export const recalculateDimensions = function (selected) { export const recalculateDimensions = function (selected) {
if (!selected) return null; if (!selected) return null;
const svgroot = context_.getSVGRoot(); const svgroot = svgCanvas.getSvgRoot();
const dataStorage = context_.getDataStorage(); const dataStorage = svgCanvas.getDataStorage();
const tlist = selected.transform?.baseVal; const tlist = selected.transform?.baseVal;
// remove any unnecessary transforms // remove any unnecessary transforms
if (tlist && tlist.numberOfItems > 0) { if (tlist && tlist.numberOfItems > 0) {
@@ -239,7 +239,7 @@ export const recalculateDimensions = function (selected) {
} }
} }
// save the start transform value too // save the start transform value too
initial.transform = context_.getStartTransform() || ''; initial.transform = svgCanvas.getStartTransform() || '';
let oldcenter; let newcenter; let oldcenter; let newcenter;
@@ -323,9 +323,9 @@ export const recalculateDimensions = function (selected) {
// } // }
const angle = getRotationAngle(child); const angle = getRotationAngle(child);
oldStartTransform = context_.getStartTransform(); oldStartTransform = svgCanvas.getStartTransform();
// const childxforms = []; // const childxforms = [];
context_.setStartTransform(child.getAttribute('transform')); svgCanvas.setStartTransform(child.getAttribute('transform'));
if (angle || hasMatrixTransform(childTlist)) { if (angle || hasMatrixTransform(childTlist)) {
const e2t = svgroot.createSVGTransform(); const e2t = svgroot.createSVGTransform();
e2t.setMatrix(matrixMultiply(tm, sm, tmn, m)); e2t.setMatrix(matrixMultiply(tm, sm, tmn, m));
@@ -383,7 +383,7 @@ export const recalculateDimensions = function (selected) {
// batchCmd.addSubCommand( recalculateDimensions(useElem) ); // batchCmd.addSubCommand( recalculateDimensions(useElem) );
// } // }
// } // }
context_.setStartTransform(oldStartTransform); svgCanvas.setStartTransform(oldStartTransform);
} // element } // element
} // for each child } // for each child
// Remove these transforms from group // Remove these transforms from group
@@ -430,8 +430,8 @@ export const recalculateDimensions = function (selected) {
} }
} }
oldStartTransform = context_.getStartTransform(); oldStartTransform = svgCanvas.getStartTransform();
context_.setStartTransform(child.getAttribute('transform')); svgCanvas.setStartTransform(child.getAttribute('transform'));
const childTlist = child.transform?.baseVal; const childTlist = child.transform?.baseVal;
// some children might not have a transform (<metadata>, <defs>, etc) // some children might not have a transform (<metadata>, <defs>, etc)
@@ -459,11 +459,11 @@ export const recalculateDimensions = function (selected) {
batchCmd.addSubCommand(recalculateDimensions(useElem)); batchCmd.addSubCommand(recalculateDimensions(useElem));
} }
} }
context_.setStartTransform(oldStartTransform); svgCanvas.setStartTransform(oldStartTransform);
} }
} }
} }
context_.setStartTransform(oldStartTransform); svgCanvas.setStartTransform(oldStartTransform);
} }
// else, a matrix imposition from a parent group // else, a matrix imposition from a parent group
// keep pushing it down to the children // keep pushing it down to the children
@@ -475,8 +475,8 @@ export const recalculateDimensions = function (selected) {
while (c--) { while (c--) {
const child = children.item(c); const child = children.item(c);
if (child.nodeType === 1) { if (child.nodeType === 1) {
oldStartTransform = context_.getStartTransform(); oldStartTransform = svgCanvas.getStartTransform();
context_.setStartTransform(child.getAttribute('transform')); svgCanvas.setStartTransform(child.getAttribute('transform'));
const childTlist = child.transform?.baseVal; const childTlist = child.transform?.baseVal;
if (!childTlist) { continue; } if (!childTlist) { continue; }
@@ -488,7 +488,7 @@ export const recalculateDimensions = function (selected) {
childTlist.appendItem(e2m, 0); childTlist.appendItem(e2m, 0);
batchCmd.addSubCommand(recalculateDimensions(child)); batchCmd.addSubCommand(recalculateDimensions(child));
context_.setStartTransform(oldStartTransform); svgCanvas.setStartTransform(oldStartTransform);
// Convert stroke // Convert stroke
// TODO: Find out if this should actually happen somewhere else // TODO: Find out if this should actually happen somewhere else
@@ -556,8 +556,8 @@ export const recalculateDimensions = function (selected) {
while (c--) { while (c--) {
const child = children.item(c); const child = children.item(c);
if (child.nodeType === 1) { if (child.nodeType === 1) {
oldStartTransform = context_.getStartTransform(); oldStartTransform = svgCanvas.getStartTransform();
context_.setStartTransform(child.getAttribute('transform')); svgCanvas.setStartTransform(child.getAttribute('transform'));
const childTlist = child.transform?.baseVal; const childTlist = child.transform?.baseVal;
const newxlate = svgroot.createSVGTransform(); const newxlate = svgroot.createSVGTransform();
newxlate.setTranslate(tx, ty); newxlate.setTranslate(tx, ty);
@@ -568,7 +568,7 @@ export const recalculateDimensions = function (selected) {
} }
batchCmd.addSubCommand(recalculateDimensions(child)); batchCmd.addSubCommand(recalculateDimensions(child));
context_.setStartTransform(oldStartTransform); svgCanvas.setStartTransform(oldStartTransform);
} }
} }
} }

59
src/svgcanvas/select.js
View File

@@ -10,7 +10,7 @@ import { isTouch, isWebkit } from '../common/browser.js'; // , isOpera
import { getRotationAngle, getBBox, getStrokedBBox, isNullish } from './utilities.js'; import { getRotationAngle, getBBox, getStrokedBBox, isNullish } from './utilities.js';
import { transformListToTransform, transformBox, transformPoint } from './math.js'; import { transformListToTransform, transformBox, transformPoint } from './math.js';
let svgFactory_; let svgCanvas;
let config_; let config_;
let selectorManager_; // A Singleton let selectorManager_; // A Singleton
const gripRadius = isTouch() ? 10 : 4; const gripRadius = isTouch() ? 10 : 4;
@@ -35,13 +35,13 @@ export class Selector {
this.locked = true; this.locked = true;
// this holds a reference to the <g> element that holds all visual elements of the selector // this holds a reference to the <g> element that holds all visual elements of the selector
this.selectorGroup = svgFactory_.createSVGElement({ this.selectorGroup = svgCanvas.createSVGElement({
element: 'g', element: 'g',
attr: { id: ('selectorGroup' + this.id) } attr: { id: ('selectorGroup' + this.id) }
}); });
// this holds a reference to the path rect // this holds a reference to the path rect
this.selectorRect = svgFactory_.createSVGElement({ this.selectorRect = svgCanvas.createSVGElement({
element: 'path', element: 'path',
attr: { attr: {
id: ('selectedBox' + this.id), id: ('selectedBox' + this.id),
@@ -105,13 +105,13 @@ export class Selector {
* @returns {void} * @returns {void}
*/ */
resize(bbox) { resize(bbox) {
const dataStorage = svgFactory_.getDataStorage(); const dataStorage = svgCanvas.getDataStorage();
const selectedBox = this.selectorRect; const selectedBox = this.selectorRect;
const mgr = selectorManager_; const mgr = selectorManager_;
const selectedGrips = mgr.selectorGrips; const selectedGrips = mgr.selectorGrips;
const selected = this.selectedElement; const selected = this.selectedElement;
const currentZoom = svgFactory_.getCurrentZoom(); const zoom = svgCanvas.getZoom();
let offset = 1 / currentZoom; let offset = 1 / zoom;
const sw = selected.getAttribute('stroke-width'); const sw = selected.getAttribute('stroke-width');
if (selected.getAttribute('stroke') !== 'none' && !isNaN(sw)) { if (selected.getAttribute('stroke') !== 'none' && !isNaN(sw)) {
offset += (sw / 2); offset += (sw / 2);
@@ -119,7 +119,7 @@ export class Selector {
const { tagName } = selected; const { tagName } = selected;
if (tagName === 'text') { if (tagName === 'text') {
offset += 2 / currentZoom; offset += 2 / zoom;
} }
// loop and transform our bounding box until we reach our first rotation // loop and transform our bounding box until we reach our first rotation
@@ -128,8 +128,8 @@ export class Selector {
// This should probably be handled somewhere else, but for now // This should probably be handled somewhere else, but for now
// it keeps the selection box correctly positioned when zoomed // it keeps the selection box correctly positioned when zoomed
m.e *= currentZoom; m.e *= zoom;
m.f *= currentZoom; m.f *= zoom;
if (!bbox) { if (!bbox) {
bbox = getBBox(selected); bbox = getBBox(selected);
@@ -153,9 +153,9 @@ export class Selector {
// if skewed, get its transformed box, then find its axis-aligned bbox // if skewed, get its transformed box, then find its axis-aligned bbox
// * // *
offset *= currentZoom; offset *= zoom;
const nbox = transformBox(l * currentZoom, t * currentZoom, w * currentZoom, h * currentZoom, m); const nbox = transformBox(l * zoom, t * zoom, w * zoom, h * zoom, m);
const { aabox } = nbox; const { aabox } = nbox;
let nbax = aabox.x - offset; let nbax = aabox.x - offset;
let nbay = aabox.y - offset; let nbay = aabox.y - offset;
@@ -168,7 +168,7 @@ export class Selector {
const angle = getRotationAngle(selected); const angle = getRotationAngle(selected);
if (angle) { if (angle) {
const rot = svgFactory_.svgRoot().createSVGTransform(); const rot = svgCanvas.getSvgRoot().createSVGTransform();
rot.setRotate(-angle, cx, cy); rot.setRotate(-angle, cx, cy);
const rotm = rot.matrix; const rotm = rot.matrix;
nbox.tl = transformPoint(nbox.tl.x, nbox.tl.y, rotm); nbox.tl = transformPoint(nbox.tl.x, nbox.tl.y, rotm);
@@ -297,23 +297,23 @@ export class SelectorManager {
* @returns {void} * @returns {void}
*/ */
initGroup() { initGroup() {
const dataStorage = svgFactory_.getDataStorage(); const dataStorage = svgCanvas.getDataStorage();
// remove old selector parent group if it existed // remove old selector parent group if it existed
if (this.selectorParentGroup && this.selectorParentGroup.parentNode) { if (this.selectorParentGroup && this.selectorParentGroup.parentNode) {
this.selectorParentGroup.remove(); this.selectorParentGroup.remove();
} }
// create parent selector group and add it to svgroot // create parent selector group and add it to svgroot
this.selectorParentGroup = svgFactory_.createSVGElement({ this.selectorParentGroup = svgCanvas.createSVGElement({
element: 'g', element: 'g',
attr: { id: 'selectorParentGroup' } attr: { id: 'selectorParentGroup' }
}); });
this.selectorGripsGroup = svgFactory_.createSVGElement({ this.selectorGripsGroup = svgCanvas.createSVGElement({
element: 'g', element: 'g',
attr: { display: 'none' } attr: { display: 'none' }
}); });
this.selectorParentGroup.append(this.selectorGripsGroup); this.selectorParentGroup.append(this.selectorGripsGroup);
svgFactory_.svgRoot().append(this.selectorParentGroup); svgCanvas.getSvgRoot().append(this.selectorParentGroup);
this.selectorMap = {}; this.selectorMap = {};
this.selectors = []; this.selectors = [];
@@ -321,7 +321,7 @@ export class SelectorManager {
// add the corner grips // add the corner grips
Object.keys(this.selectorGrips).forEach((dir) => { Object.keys(this.selectorGrips).forEach((dir) => {
const grip = svgFactory_.createSVGElement({ const grip = svgCanvas.createSVGElement({
element: 'circle', element: 'circle',
attr: { attr: {
id: ('selectorGrip_resize_' + dir), id: ('selectorGrip_resize_' + dir),
@@ -345,7 +345,7 @@ export class SelectorManager {
// add rotator elems // add rotator elems
this.rotateGripConnector = this.rotateGripConnector =
svgFactory_.createSVGElement({ svgCanvas.createSVGElement({
element: 'line', element: 'line',
attr: { attr: {
id: ('selectorGrip_rotateconnector'), id: ('selectorGrip_rotateconnector'),
@@ -356,7 +356,7 @@ export class SelectorManager {
this.selectorGripsGroup.append(this.rotateGripConnector); this.selectorGripsGroup.append(this.rotateGripConnector);
this.rotateGrip = this.rotateGrip =
svgFactory_.createSVGElement({ svgCanvas.createSVGElement({
element: 'circle', element: 'circle',
attr: { attr: {
id: 'selectorGrip_rotate', id: 'selectorGrip_rotate',
@@ -373,7 +373,7 @@ export class SelectorManager {
if (document.getElementById('canvasBackground')) { return; } if (document.getElementById('canvasBackground')) { return; }
const [ width, height ] = config_.dimensions; const [ width, height ] = config_.dimensions;
const canvasbg = svgFactory_.createSVGElement({ const canvasbg = svgCanvas.createSVGElement({
element: 'svg', element: 'svg',
attr: { attr: {
id: 'canvasBackground', id: 'canvasBackground',
@@ -386,7 +386,7 @@ export class SelectorManager {
} }
}); });
const rect = svgFactory_.createSVGElement({ const rect = svgCanvas.createSVGElement({
element: 'rect', element: 'rect',
attr: { attr: {
width: '100%', width: '100%',
@@ -399,13 +399,8 @@ export class SelectorManager {
style: 'pointer-events:none' style: 'pointer-events:none'
} }
}); });
// Both Firefox and WebKit are too slow with this filter region (especially at higher
// zoom levels) and Opera has at least one bug
// if (!isOpera()) rect.setAttribute('filter', 'url(#canvashadow)');
canvasbg.append(rect); canvasbg.append(rect);
svgFactory_.svgRoot().insertBefore(canvasbg, svgFactory_.svgContent()); svgCanvas.getSvgRoot().insertBefore(canvasbg, svgCanvas.getSvgContent());
// Ok to replace above with `svgFactory_.svgContent().before(canvasbg);`?
} }
/** /**
@@ -476,7 +471,7 @@ export class SelectorManager {
getRubberBandBox() { getRubberBandBox() {
if (!this.rubberBandBox) { if (!this.rubberBandBox) {
this.rubberBandBox = this.rubberBandBox =
svgFactory_.createSVGElement({ svgCanvas.createSVGElement({
element: 'rect', element: 'rect',
attr: { attr: {
id: 'selectorRubberBand', id: 'selectorRubberBand',
@@ -501,7 +496,7 @@ export class SelectorManager {
*/ */
/** /**
* @function module:select.SVGFactory#createSVGElement * @function module:select.SVGFactory#createSVGElement
* @param {module:utilities.EditorContext#addSVGElementFromJson} jsonMap * @param {module:utilities.EditorContext#addSVGElemensFromJson} jsonMap
* @returns {SVGElement} * @returns {SVGElement}
*/ */
/** /**
@@ -513,7 +508,7 @@ export class SelectorManager {
* @returns {SVGSVGElement} * @returns {SVGSVGElement}
*/ */
/** /**
* @function module:select.SVGFactory#getCurrentZoom * @function module:select.SVGFactory#getZoom
* @returns {Float} The current zoom level * @returns {Float} The current zoom level
*/ */
@@ -536,9 +531,9 @@ export class SelectorManager {
* @param {module:select.SVGFactory} svgFactory - An object implementing the SVGFactory interface. * @param {module:select.SVGFactory} svgFactory - An object implementing the SVGFactory interface.
* @returns {void} * @returns {void}
*/ */
export const init = function (config, svgFactory) { export const init = function (config, canvas) {
config_ = config; config_ = config;
svgFactory_ = svgFactory; svgCanvas = canvas;
selectorManager_ = new SelectorManager(); selectorManager_ = new SelectorManager();
}; };

196
src/svgcanvas/selected-elem.js
View File

@@ -28,15 +28,15 @@ const {
MoveElementCommand, BatchCommand, InsertElementCommand, RemoveElementCommand, ChangeElementCommand MoveElementCommand, BatchCommand, InsertElementCommand, RemoveElementCommand, ChangeElementCommand
} = hstry; } = hstry;
let elementContext_ = null; let svgCanvas = null;
/** /**
* @function module:selected-elem.init * @function module:selected-elem.init
* @param {module:selected-elem.elementContext} elementContext * @param {module:selected-elem.elementContext} elementContext
* @returns {void} * @returns {void}
*/ */
export const init = function (elementContext) { export const init = function (canvas) {
elementContext_ = elementContext; svgCanvas = canvas;
}; };
/** /**
@@ -47,7 +47,7 @@ export const init = function (elementContext) {
* @returns {void} * @returns {void}
*/ */
export const moveToTopSelectedElem = function () { export const moveToTopSelectedElem = function () {
const [ selected ] = elementContext_.getSelectedElements(); const [ selected ] = svgCanvas.getSelectedElements();
if (!isNullish(selected)) { if (!isNullish(selected)) {
const t = selected; const t = selected;
const oldParent = t.parentNode; const oldParent = t.parentNode;
@@ -56,8 +56,8 @@ export const moveToTopSelectedElem = function () {
// If the element actually moved position, add the command and fire the changed // If the element actually moved position, add the command and fire the changed
// event handler. // event handler.
if (oldNextSibling !== t.nextSibling) { if (oldNextSibling !== t.nextSibling) {
elementContext_.addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, 'top')); svgCanvas.addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, 'top'));
elementContext_.call('changed', [ t ]); svgCanvas.call('changed', [ t ]);
} }
} }
}; };
@@ -70,7 +70,7 @@ export const moveToTopSelectedElem = function () {
* @returns {void} * @returns {void}
*/ */
export const moveToBottomSelectedElem = function () { export const moveToBottomSelectedElem = function () {
const [ selected ] = elementContext_.getSelectedElements(); const [ selected ] = svgCanvas.getSelectedElements();
if (!isNullish(selected)) { if (!isNullish(selected)) {
let t = selected; let t = selected;
const oldParent = t.parentNode; const oldParent = t.parentNode;
@@ -88,8 +88,8 @@ export const moveToBottomSelectedElem = function () {
// If the element actually moved position, add the command and fire the changed // If the element actually moved position, add the command and fire the changed
// event handler. // event handler.
if (oldNextSibling !== t.nextSibling) { if (oldNextSibling !== t.nextSibling) {
elementContext_.addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, 'bottom')); svgCanvas.addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, 'bottom'));
elementContext_.call('changed', [ t ]); svgCanvas.call('changed', [ t ]);
} }
} }
}; };
@@ -103,14 +103,14 @@ export const moveToBottomSelectedElem = function () {
* @returns {void} * @returns {void}
*/ */
export const moveUpDownSelected = function (dir) { export const moveUpDownSelected = function (dir) {
const selectedElements = elementContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const selected = selectedElements[0]; const selected = selectedElements[0];
if (!selected) { return; } if (!selected) { return; }
elementContext_.setCurBBoxes([]); svgCanvas.setCurBBoxes([]);
let closest; let foundCur; let closest; let foundCur;
// jQuery sorts this list // jQuery sorts this list
const list = elementContext_.getIntersectionList(getStrokedBBoxDefaultVisible([ selected ])); const list = svgCanvas.getIntersectionList(getStrokedBBoxDefaultVisible([ selected ]));
if (dir === 'Down') { list.reverse(); } if (dir === 'Down') { list.reverse(); }
Array.prototype.forEach.call(list, function (el) { Array.prototype.forEach.call(list, function (el) {
@@ -136,8 +136,8 @@ export const moveUpDownSelected = function (dir) {
// If the element actually moved position, add the command and fire the changed // If the element actually moved position, add the command and fire the changed
// event handler. // event handler.
if (oldNextSibling !== t.nextSibling) { if (oldNextSibling !== t.nextSibling) {
elementContext_.addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, 'Move ' + dir)); svgCanvas.addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, 'Move ' + dir));
elementContext_.call('changed', [ t ]); svgCanvas.call('changed', [ t ]);
} }
}; };
@@ -152,19 +152,19 @@ export const moveUpDownSelected = function (dir) {
*/ */
export const moveSelectedElements = function (dx, dy, undoable = true) { export const moveSelectedElements = function (dx, dy, undoable = true) {
const selectedElements = elementContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const currentZoom = elementContext_.getCurrentZoom(); const zoom = svgCanvas.getZoom();
// if undoable is not sent, default to true // if undoable is not sent, default to true
// if single values, scale them to the zoom // if single values, scale them to the zoom
if (!Array.isArray(dx)) { if (!Array.isArray(dx)) {
dx /= currentZoom; dx /= zoom;
dy /= currentZoom; dy /= zoom;
} }
const batchCmd = new BatchCommand('position'); const batchCmd = new BatchCommand('position');
selectedElements.forEach((selected, i) => { selectedElements.forEach((selected, i) => {
if (selected) { if (selected) {
const xform = elementContext_.getSVGRoot().createSVGTransform(); const xform = svgCanvas.getSvgRoot().createSVGTransform();
const tlist = selected.transform?.baseVal; const tlist = selected.transform?.baseVal;
// dx and dy could be arrays // dx and dy could be arrays
@@ -185,14 +185,14 @@ export const moveSelectedElements = function (dx, dy, undoable = true) {
batchCmd.addSubCommand(cmd); batchCmd.addSubCommand(cmd);
} }
elementContext_.gettingSelectorManager().requestSelector(selected).resize(); svgCanvas.gettingSelectorManager().requestSelector(selected).resize();
} }
}); });
if (!batchCmd.isEmpty()) { if (!batchCmd.isEmpty()) {
if (undoable) { if (undoable) {
elementContext_.addCommandToHistory(batchCmd); svgCanvas.addCommandToHistory(batchCmd);
} }
elementContext_.call('changed', selectedElements); svgCanvas.call('changed', selectedElements);
return batchCmd; return batchCmd;
} }
return undefined; return undefined;
@@ -207,8 +207,8 @@ export const moveSelectedElements = function (dx, dy, undoable = true) {
* @returns {void} * @returns {void}
*/ */
export const cloneSelectedElements = function (x, y) { export const cloneSelectedElements = function (x, y) {
const selectedElements = elementContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const currentGroup = elementContext_.getCurrentGroup(); const currentGroup = svgCanvas.getCurrentGroup();
let i; let elem; let i; let elem;
const batchCmd = new BatchCommand('Clone Elements'); const batchCmd = new BatchCommand('Clone Elements');
// find all the elements selected (stop at first null) // find all the elements selected (stop at first null)
@@ -239,10 +239,10 @@ export const cloneSelectedElements = function (x, y) {
} }
// use slice to quickly get the subset of elements we need // use slice to quickly get the subset of elements we need
const copiedElements = selectedElements.slice(0, i); const copiedElements = selectedElements.slice(0, i);
elementContext_.clearSelection(true); svgCanvas.clearSelection(true);
// note that we loop in the reverse way because of the way elements are added // note that we loop in the reverse way because of the way elements are added
// to the selectedElements array (top-first) // to the selectedElements array (top-first)
const drawing = elementContext_.getDrawing(); const drawing = svgCanvas.getDrawing();
i = copiedElements.length; i = copiedElements.length;
while (i--) { while (i--) {
// clone each element and replace it within copiedElements // clone each element and replace it within copiedElements
@@ -252,9 +252,9 @@ export const cloneSelectedElements = function (x, y) {
} }
if (!batchCmd.isEmpty()) { if (!batchCmd.isEmpty()) {
elementContext_.addToSelection(copiedElements.reverse()); // Need to reverse for correct selection-adding svgCanvas.addToSelection(copiedElements.reverse()); // Need to reverse for correct selection-adding
moveSelectedElements(x, y, false); moveSelectedElements(x, y, false);
elementContext_.addCommandToHistory(batchCmd); svgCanvas.addCommandToHistory(batchCmd);
} }
}; };
/** /**
@@ -265,7 +265,7 @@ export const cloneSelectedElements = function (x, y) {
* @returns {void} * @returns {void}
*/ */
export const alignSelectedElements = function (type, relativeTo) { export const alignSelectedElements = function (type, relativeTo) {
const selectedElements = elementContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const bboxes = []; // angles = []; const bboxes = []; // angles = [];
const len = selectedElements.length; const len = selectedElements.length;
if (!len) { return; } if (!len) { return; }
@@ -319,8 +319,8 @@ export const alignSelectedElements = function (type, relativeTo) {
if (relativeTo === 'page') { if (relativeTo === 'page') {
minx = 0; minx = 0;
miny = 0; miny = 0;
maxx = elementContext_.getContentW(); maxx = svgCanvas.getContentW();
maxy = elementContext_.getContentH(); maxy = svgCanvas.getContentH();
} }
const dx = new Array(len); const dx = new Array(len);
@@ -369,7 +369,7 @@ export const alignSelectedElements = function (type, relativeTo) {
* @returns {void} * @returns {void}
*/ */
export const deleteSelectedElements = function () { export const deleteSelectedElements = function () {
const selectedElements = elementContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const batchCmd = new BatchCommand('Delete Elements'); const batchCmd = new BatchCommand('Delete Elements');
const len = selectedElements.length; const len = selectedElements.length;
const selectedCopy = []; // selectedElements is being deleted const selectedCopy = []; // selectedElements is being deleted
@@ -382,7 +382,7 @@ export const deleteSelectedElements = function () {
let t = selected; let t = selected;
// this will unselect the element and remove the selectedOutline // this will unselect the element and remove the selectedOutline
elementContext_.gettingSelectorManager().releaseSelector(t); svgCanvas.gettingSelectorManager().releaseSelector(t);
// Remove the path if present. // Remove the path if present.
pathModule.removePath_(t.id); pathModule.removePath_(t.id);
@@ -399,11 +399,11 @@ export const deleteSelectedElements = function () {
selectedCopy.push(selected); // for the copy selectedCopy.push(selected); // for the copy
batchCmd.addSubCommand(new RemoveElementCommand(elem, nextSibling, parent)); batchCmd.addSubCommand(new RemoveElementCommand(elem, nextSibling, parent));
} }
elementContext_.getCanvas().setEmptySelectedElements(); svgCanvas.setEmptySelectedElements();
if (!batchCmd.isEmpty()) { elementContext_.addCommandToHistory(batchCmd); } if (!batchCmd.isEmpty()) { svgCanvas.addCommandToHistory(batchCmd); }
elementContext_.call('changed', selectedCopy); svgCanvas.call('changed', selectedCopy);
elementContext_.clearSelection(); svgCanvas.clearSelection();
}; };
/** /**
@@ -412,12 +412,12 @@ export const deleteSelectedElements = function () {
* @returns {void} * @returns {void}
*/ */
export const copySelectedElements = function () { export const copySelectedElements = function () {
const selectedElements = elementContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const data = const data =
JSON.stringify(selectedElements.map((x) => elementContext_.getJsonFromSvgElement(x))); JSON.stringify(selectedElements.map((x) => svgCanvas.getJsonFromSvgElements(x)));
// Use sessionStorage for the clipboard data. // Use sessionStorage for the clipboard data.
sessionStorage.setItem(elementContext_.getClipboardID(), data); sessionStorage.setItem(svgCanvas.getClipboardID(), data);
elementContext_.flashStorage(); svgCanvas.flashStorage();
// Context menu might not exist (it is provided by editor.js). // Context menu might not exist (it is provided by editor.js).
const canvMenu = document.getElementById('se-cmenu_canvas'); const canvMenu = document.getElementById('se-cmenu_canvas');
@@ -432,7 +432,7 @@ export const copySelectedElements = function () {
* @returns {void} * @returns {void}
*/ */
export const groupSelectedElements = function (type, urlArg) { export const groupSelectedElements = function (type, urlArg) {
const selectedElements = elementContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
if (!type) { type = 'g'; } if (!type) { type = 'g'; }
let cmdStr = ''; let cmdStr = '';
let url; let url;
@@ -452,10 +452,10 @@ export const groupSelectedElements = function (type, urlArg) {
const batchCmd = new BatchCommand(cmdStr); const batchCmd = new BatchCommand(cmdStr);
// create and insert the group element // create and insert the group element
const g = elementContext_.addSVGElementFromJson({ const g = svgCanvas.addSVGElemensFromJson({
element: type, element: type,
attr: { attr: {
id: elementContext_.getNextId() id: svgCanvas.getNextId()
} }
}); });
if (type === 'a') { if (type === 'a') {
@@ -478,10 +478,10 @@ export const groupSelectedElements = function (type, urlArg) {
g.append(elem); g.append(elem);
batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldParent)); batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldParent));
} }
if (!batchCmd.isEmpty()) { elementContext_.addCommandToHistory(batchCmd); } if (!batchCmd.isEmpty()) { svgCanvas.addCommandToHistory(batchCmd); }
// update selection // update selection
elementContext_.selectOnly([ g ], true); svgCanvas.selectOnly([ g ], true);
}; };
/** /**
@@ -516,7 +516,7 @@ export const pushGroupProperty = function (g, undoable) {
opacity: g.getAttribute('opacity') opacity: g.getAttribute('opacity')
}; };
let gfilter; let gblur; let changes; let gfilter; let gblur; let changes;
const drawing = elementContext_.getDrawing(); const drawing = svgCanvas.getDrawing();
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
const elem = children[i]; const elem = children[i];
@@ -526,13 +526,13 @@ export const pushGroupProperty = function (g, undoable) {
if (gattrs.opacity !== null && gattrs.opacity !== 1) { if (gattrs.opacity !== null && gattrs.opacity !== 1) {
// const c_opac = elem.getAttribute('opacity') || 1; // const c_opac = elem.getAttribute('opacity') || 1;
const newOpac = Math.round((elem.getAttribute('opacity') || 1) * gattrs.opacity * 100) / 100; const newOpac = Math.round((elem.getAttribute('opacity') || 1) * gattrs.opacity * 100) / 100;
elementContext_.changeSelectedAttribute('opacity', newOpac, [ elem ]); svgCanvas.changeSelectedAttribute('opacity', newOpac, [ elem ]);
} }
if (gattrs.filter) { if (gattrs.filter) {
let cblur = elementContext_.getCanvas().getBlur(elem); let cblur = svgCanvas.getBlur(elem);
const origCblur = cblur; const origCblur = cblur;
if (!gblur) { gblur = elementContext_.getCanvas().getBlur(g); } if (!gblur) { gblur = svgCanvas.getBlur(g); }
if (cblur) { if (cblur) {
// Is this formula correct? // Is this formula correct?
cblur = Number(gblur) + Number(cblur); cblur = Number(gblur) + Number(cblur);
@@ -555,7 +555,7 @@ export const pushGroupProperty = function (g, undoable) {
// Change this in future for different filters // Change this in future for different filters
const suffix = (blurElem?.tagName === 'feGaussianBlur') ? 'blur' : 'filter'; const suffix = (blurElem?.tagName === 'feGaussianBlur') ? 'blur' : 'filter';
gfilter.id = elem.id + '_' + suffix; gfilter.id = elem.id + '_' + suffix;
elementContext_.changeSelectedAttribute('filter', 'url(#' + gfilter.id + ')', [ elem ]); svgCanvas.changeSelectedAttribute('filter', 'url(#' + gfilter.id + ')', [ elem ]);
} }
} else { } else {
gfilter = getRefElem(elem.getAttribute('filter')); gfilter = getRefElem(elem.getAttribute('filter'));
@@ -565,8 +565,8 @@ export const pushGroupProperty = function (g, undoable) {
// Update blur value // Update blur value
if (cblur) { if (cblur) {
elementContext_.changeSelectedAttribute('stdDeviation', cblur, [ blurElem ]); svgCanvas.changeSelectedAttribute('stdDeviation', cblur, [ blurElem ]);
elementContext_.getCanvas().setBlurOffsets(gfilter, cblur); svgCanvas.setBlurOffsets(gfilter, cblur);
} }
} }
@@ -599,7 +599,7 @@ export const pushGroupProperty = function (g, undoable) {
const rgm = glist.getItem(0).matrix; const rgm = glist.getItem(0).matrix;
// get child's rotation matrix (Rc) // get child's rotation matrix (Rc)
let rcm = elementContext_.getSVGRoot().createSVGMatrix(); let rcm = svgCanvas.getSvgRoot().createSVGMatrix();
const cangle = getRotationAngle(elem); const cangle = getRotationAngle(elem);
if (cangle) { if (cangle) {
rcm = chtlist.getItem(0).matrix; rcm = chtlist.getItem(0).matrix;
@@ -614,7 +614,7 @@ export const pushGroupProperty = function (g, undoable) {
const sangle = gangle + cangle; const sangle = gangle + cangle;
// get child's rotation at the old center (Rc2_inv) // get child's rotation at the old center (Rc2_inv)
const r2 = elementContext_.getSVGRoot().createSVGTransform(); const r2 = svgCanvas.getSvgRoot().createSVGTransform();
r2.setRotate(sangle, coldc.x, coldc.y); r2.setRotate(sangle, coldc.x, coldc.y);
// calculate equivalent translate // calculate equivalent translate
@@ -634,7 +634,7 @@ export const pushGroupProperty = function (g, undoable) {
} }
if (trm.e || trm.f) { if (trm.e || trm.f) {
const tr = elementContext_.getSVGRoot().createSVGTransform(); const tr = svgCanvas.getSvgRoot().createSVGTransform();
tr.setTranslate(trm.e, trm.f); tr.setTranslate(trm.e, trm.f);
if (chtlist.numberOfItems) { if (chtlist.numberOfItems) {
chtlist.insertItemBefore(tr, 0); chtlist.insertItemBefore(tr, 0);
@@ -649,7 +649,7 @@ export const pushGroupProperty = function (g, undoable) {
changes = {}; changes = {};
changes.transform = oldxform || ''; changes.transform = oldxform || '';
const newxform = elementContext_.getSVGRoot().createSVGTransform(); const newxform = svgCanvas.getSvgRoot().createSVGTransform();
// [ gm ] [ chm ] = [ chm ] [ gm' ] // [ gm ] [ chm ] = [ chm ] [ gm' ]
// [ gm' ] = [ chmInv ] [ gm ] [ chm ] // [ gm' ] = [ chmInv ] [ gm ] [ chm ]
@@ -687,14 +687,14 @@ export const pushGroupProperty = function (g, undoable) {
* @returns {void} * @returns {void}
*/ */
export const convertToGroup = function (elem) { export const convertToGroup = function (elem) {
const selectedElements = elementContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
if (!elem) { if (!elem) {
elem = selectedElements[0]; elem = selectedElements[0];
} }
const $elem = elem; const $elem = elem;
const batchCmd = new BatchCommand(); const batchCmd = new BatchCommand();
let ts; let ts;
const dataStorage = elementContext_.getDataStorage(); const dataStorage = svgCanvas.getDataStorage();
if (dataStorage.has($elem, 'gsvg')) { if (dataStorage.has($elem, 'gsvg')) {
// Use the gsvg as the new group // Use the gsvg as the new group
const svg = elem.firstChild; const svg = elem.firstChild;
@@ -712,11 +712,11 @@ export const convertToGroup = function (elem) {
dataStorage.remove(elem, 'gsvg'); dataStorage.remove(elem, 'gsvg');
const tlist = elem.transform.baseVal; const tlist = elem.transform.baseVal;
const xform = elementContext_.getSVGRoot().createSVGTransform(); const xform = svgCanvas.getSvgRoot().createSVGTransform();
xform.setTranslate(pt.x, pt.y); xform.setTranslate(pt.x, pt.y);
tlist.appendItem(xform); tlist.appendItem(xform);
recalculateDimensions(elem); recalculateDimensions(elem);
elementContext_.call('selected', [ elem ]); svgCanvas.call('selected', [ elem ]);
} else if (dataStorage.has($elem, 'symbol')) { } else if (dataStorage.has($elem, 'symbol')) {
elem = dataStorage.get($elem, 'symbol'); elem = dataStorage.get($elem, 'symbol');
@@ -744,12 +744,12 @@ export const convertToGroup = function (elem) {
$elem.remove(); $elem.remove();
// See if other elements reference this symbol // See if other elements reference this symbol
const svgcontent = elementContext_.getSVGContent(); const svgContent = svgCanvas.getSvgContent();
// const hasMore = svgcontent.querySelectorAll('use:data(symbol)').length; // const hasMore = svgContent.querySelectorAll('use:data(symbol)').length;
// @todo review this logic // @todo review this logic
const hasMore = svgcontent.querySelectorAll('use').length; const hasMore = svgContent.querySelectorAll('use').length;
const g = elementContext_.getDOMDocument().createElementNS(NS.SVG, 'g'); const g = svgCanvas.getDOMDocument().createElementNS(NS.SVG, 'g');
const childs = elem.childNodes; const childs = elem.childNodes;
let i; let i;
@@ -772,7 +772,7 @@ export const convertToGroup = function (elem) {
const parent = elem.parentNode; const parent = elem.parentNode;
elementContext_.uniquifyElems(g); svgCanvas.uniquifyElems(g);
// Put the dupe gradients back into <defs> (after uniquifying them) // Put the dupe gradients back into <defs> (after uniquifying them)
if (isGecko()) { if (isGecko()) {
@@ -784,7 +784,7 @@ export const convertToGroup = function (elem) {
} }
// now give the g itself a new id // now give the g itself a new id
g.id = elementContext_.getNextId(); g.id = svgCanvas.getNextId();
prev.after(g); prev.after(g);
@@ -798,12 +798,12 @@ export const convertToGroup = function (elem) {
batchCmd.addSubCommand(new InsertElementCommand(g)); batchCmd.addSubCommand(new InsertElementCommand(g));
} }
elementContext_.setUseData(g); svgCanvas.setUseData(g);
if (isGecko()) { if (isGecko()) {
elementContext_.convertGradients(findDefs()); svgCanvas.convertGradients(findDefs());
} else { } else {
elementContext_.convertGradients(g); svgCanvas.convertGradients(g);
} }
// recalculate dimensions on the top-level children so that unnecessary transforms // recalculate dimensions on the top-level children so that unnecessary transforms
@@ -817,19 +817,19 @@ export const convertToGroup = function (elem) {
}); });
// Give ID for any visible element missing one // Give ID for any visible element missing one
const visElems = g.querySelectorAll(elementContext_.getVisElems()); const visElems = g.querySelectorAll(svgCanvas.getVisElems());
Array.prototype.forEach.call(visElems, function (el) { Array.prototype.forEach.call(visElems, function (el) {
if (!el.id) { el.id = elementContext_.getNextId(); } if (!el.id) { el.id = svgCanvas.getNextId(); }
}); });
elementContext_.selectOnly([ g ]); svgCanvas.selectOnly([ g ]);
const cm = pushGroupProperty(g, true); const cm = pushGroupProperty(g, true);
if (cm) { if (cm) {
batchCmd.addSubCommand(cm); batchCmd.addSubCommand(cm);
} }
elementContext_.addCommandToHistory(batchCmd); svgCanvas.addCommandToHistory(batchCmd);
} else { } else {
console.warn('Unexpected element to ungroup:', elem); console.warn('Unexpected element to ungroup:', elem);
} }
@@ -842,8 +842,8 @@ export const convertToGroup = function (elem) {
* @returns {void} * @returns {void}
*/ */
export const ungroupSelectedElement = function () { export const ungroupSelectedElement = function () {
const selectedElements = elementContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const dataStorage = elementContext_.getDataStorage(); const dataStorage = svgCanvas.getDataStorage();
let g = selectedElements[0]; let g = selectedElements[0];
if (!g) { if (!g) {
return; return;
@@ -895,17 +895,17 @@ export const ungroupSelectedElement = function () {
} }
// remove the group from the selection // remove the group from the selection
elementContext_.clearSelection(); svgCanvas.clearSelection();
// delete the group element (but make undo-able) // delete the group element (but make undo-able)
const gNextSibling = g.nextSibling; const gNextSibling = g.nextSibling;
g.remove(); g.remove();
batchCmd.addSubCommand(new RemoveElementCommand(g, gNextSibling, parent)); batchCmd.addSubCommand(new RemoveElementCommand(g, gNextSibling, parent));
if (!batchCmd.isEmpty()) { elementContext_.addCommandToHistory(batchCmd); } if (!batchCmd.isEmpty()) { svgCanvas.addCommandToHistory(batchCmd); }
// update selection // update selection
elementContext_.addToSelection(children); svgCanvas.addToSelection(children);
} }
}; };
/** /**
@@ -917,26 +917,26 @@ export const ungroupSelectedElement = function () {
* @returns {module:svgcanvas.CanvasInfo} * @returns {module:svgcanvas.CanvasInfo}
*/ */
export const updateCanvas = function (w, h) { export const updateCanvas = function (w, h) {
elementContext_.getSVGRoot().setAttribute('width', w); svgCanvas.getSvgRoot().setAttribute('width', w);
elementContext_.getSVGRoot().setAttribute('height', h); svgCanvas.getSvgRoot().setAttribute('height', h);
const currentZoom = elementContext_.getCurrentZoom(); const zoom = svgCanvas.getZoom();
const bg = document.getElementById('canvasBackground'); const bg = document.getElementById('canvasBackground');
const oldX = Number(elementContext_.getSVGContent().getAttribute('x')); const oldX = Number(svgCanvas.getSvgContent().getAttribute('x'));
const oldY = Number(elementContext_.getSVGContent().getAttribute('y')); const oldY = Number(svgCanvas.getSvgContent().getAttribute('y'));
const x = ((w - this.contentW * currentZoom) / 2); const x = ((w - this.contentW * zoom) / 2);
const y = ((h - this.contentH * currentZoom) / 2); const y = ((h - this.contentH * zoom) / 2);
assignAttributes(elementContext_.getSVGContent(), { assignAttributes(svgCanvas.getSvgContent(), {
width: this.contentW * currentZoom, width: this.contentW * zoom,
height: this.contentH * currentZoom, height: this.contentH * zoom,
x, x,
y, y,
viewBox: '0 0 ' + this.contentW + ' ' + this.contentH viewBox: '0 0 ' + this.contentW + ' ' + this.contentH
}); });
assignAttributes(bg, { assignAttributes(bg, {
width: elementContext_.getSVGContent().getAttribute('width'), width: svgCanvas.getSvgContent().getAttribute('width'),
height: elementContext_.getSVGContent().getAttribute('height'), height: svgCanvas.getSvgContent().getAttribute('height'),
x, x,
y y
}); });
@@ -949,7 +949,7 @@ export const updateCanvas = function (w, h) {
}); });
} }
elementContext_.getCanvas().selectorManager.selectorParentGroup.setAttribute('transform', 'translate(' + x + ',' + y + ')'); svgCanvas.selectorManager.selectorParentGroup.setAttribute('transform', 'translate(' + x + ',' + y + ')');
/** /**
* Invoked upon updates to the canvas. * Invoked upon updates to the canvas.
@@ -962,7 +962,7 @@ export const updateCanvas = function (w, h) {
* @property {Integer} d_x * @property {Integer} d_x
* @property {Integer} d_y * @property {Integer} d_y
*/ */
elementContext_.getCanvas().runExtensions( svgCanvas.runExtensions(
'canvasUpdated', 'canvasUpdated',
/** /**
* @type {module:svgcanvas.SvgCanvas#event:ext_canvasUpdated} * @type {module:svgcanvas.SvgCanvas#event:ext_canvasUpdated}
@@ -979,12 +979,12 @@ export const updateCanvas = function (w, h) {
* @returns {void} * @returns {void}
*/ */
export const cycleElement = function (next) { export const cycleElement = function (next) {
const selectedElements = elementContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const currentGroup = elementContext_.getCurrentGroup(); const currentGroup = svgCanvas.getCurrentGroup();
let num; let num;
const curElem = selectedElements[0]; const curElem = selectedElements[0];
let elem = false; let elem = false;
const allElems = getVisibleElements(currentGroup || elementContext_.getCanvas().getCurrentDrawing().getCurrentLayer()); const allElems = getVisibleElements(currentGroup || svgCanvas.getCurrentDrawing().getCurrentLayer());
if (!allElems.length) { return; } if (!allElems.length) { return; }
if (isNullish(curElem)) { if (isNullish(curElem)) {
num = next ? allElems.length - 1 : 0; num = next ? allElems.length - 1 : 0;
@@ -1004,6 +1004,6 @@ export const cycleElement = function (next) {
} }
} }
} }
elementContext_.getCanvas().selectOnly([ elem ], true); svgCanvas.selectOnly([ elem ], true);
elementContext_.call('selected', selectedElements); svgCanvas.call('selected', selectedElements);
}; };

66
src/svgcanvas/selection.js
View File

@@ -19,7 +19,6 @@ import * as hstry from "./history.js";
import { getClosest } from "../editor/components/jgraduate/Util.js"; import { getClosest } from "../editor/components/jgraduate/Util.js";
const { BatchCommand } = hstry; const { BatchCommand } = hstry;
let selectionContext_ = null;
let svgCanvas = null; let svgCanvas = null;
/** /**
@@ -27,9 +26,8 @@ let svgCanvas = null;
* @param {module:selection.selectionContext} selectionContext * @param {module:selection.selectionContext} selectionContext
* @returns {void} * @returns {void}
*/ */
export const init = function (selectionContext) { export const init = function (canvas) {
selectionContext_ = selectionContext; svgCanvas = canvas;
svgCanvas = selectionContext_.getCanvas();
}; };
/** /**
@@ -40,7 +38,7 @@ export const init = function (selectionContext) {
* @fires module:selection.SvgCanvas#event:selected * @fires module:selection.SvgCanvas#event:selected
*/ */
export const clearSelectionMethod = function (noCall) { export const clearSelectionMethod = function (noCall) {
const selectedElements = selectionContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
selectedElements.forEach((elem) => { selectedElements.forEach((elem) => {
if (!elem) { if (!elem) {
return; return;
@@ -48,7 +46,7 @@ export const clearSelectionMethod = function (noCall) {
svgCanvas.selectorManager.releaseSelector(elem); svgCanvas.selectorManager.releaseSelector(elem);
}); });
svgCanvas.setEmptySelectedElements(); svgCanvas?.setEmptySelectedElements();
if (!noCall) { if (!noCall) {
svgCanvas.call("selected", selectedElements); svgCanvas.call("selected", selectedElements);
@@ -62,7 +60,7 @@ export const clearSelectionMethod = function (noCall) {
* @fires module:selection.SvgCanvas#event:selected * @fires module:selection.SvgCanvas#event:selected
*/ */
export const addToSelectionMethod = function (elemsToAdd, showGrips) { export const addToSelectionMethod = function (elemsToAdd, showGrips) {
const selectedElements = selectionContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
if (!elemsToAdd.length) { if (!elemsToAdd.length) {
return; return;
} }
@@ -156,7 +154,7 @@ export const getMouseTargetMethod = function (evt) {
while (mouseTarget.nodeName !== "foreignObject") { while (mouseTarget.nodeName !== "foreignObject") {
mouseTarget = mouseTarget.parentNode; mouseTarget = mouseTarget.parentNode;
if (!mouseTarget) { if (!mouseTarget) {
return selectionContext_.getSVGRoot(); return svgCanvas.getSvgRoot();
} }
} }
} }
@@ -164,11 +162,11 @@ export const getMouseTargetMethod = function (evt) {
// Get the desired mouseTarget with jQuery selector-fu // Get the desired mouseTarget with jQuery selector-fu
// If it's root-like, select the root // If it's root-like, select the root
const currentLayer = svgCanvas.getCurrentDrawing().getCurrentLayer(); const currentLayer = svgCanvas.getCurrentDrawing().getCurrentLayer();
const svgRoot = selectionContext_.getSVGRoot(); const svgRoot = svgCanvas.getSvgRoot();
const container = selectionContext_.getDOMContainer(); const container = svgCanvas.getDOMContainer();
const content = selectionContext_.getSVGContent(); const content = svgCanvas.getSvgContent();
if ([ svgRoot, container, content, currentLayer ].includes(mouseTarget)) { if ([ svgRoot, container, content, currentLayer ].includes(mouseTarget)) {
return selectionContext_.getSVGRoot(); return svgCanvas.getSvgRoot();
} }
// If it's a selection grip, return the grip parent // If it's a selection grip, return the grip parent
@@ -180,7 +178,7 @@ export const getMouseTargetMethod = function (evt) {
while ( while (
!mouseTarget?.parentNode?.isSameNode( !mouseTarget?.parentNode?.isSameNode(
selectionContext_.getCurrentGroup() || currentLayer svgCanvas.getCurrentGroup() || currentLayer
) )
) { ) {
mouseTarget = mouseTarget.parentNode; mouseTarget = mouseTarget.parentNode;
@@ -221,7 +219,7 @@ export const runExtensionsMethod = function (
nameFilter nameFilter
) { ) {
let result = returnArray ? [] : false; let result = returnArray ? [] : false;
for (const [ name, ext ] of Object.entries(selectionContext_.getExtensions())) { for (const [ name, ext ] of Object.entries(svgCanvas.getExtensions())) {
if (nameFilter && !nameFilter(name)) { if (nameFilter && !nameFilter(name)) {
return; return;
} }
@@ -249,8 +247,8 @@ export const runExtensionsMethod = function (
*/ */
export const getVisibleElementsAndBBoxes = function (parent) { export const getVisibleElementsAndBBoxes = function (parent) {
if (!parent) { if (!parent) {
const svgcontent = selectionContext_.getSVGContent(); const svgContent = svgCanvas.getSvgContent();
parent = svgcontent.children; // Prevent layers from being included parent = svgContent.children; // Prevent layers from being included
} }
const contentElems = []; const contentElems = [];
const elements = parent.children; const elements = parent.children;
@@ -275,28 +273,28 @@ export const getVisibleElementsAndBBoxes = function (parent) {
* @returns {Element[]|NodeList} Bbox elements * @returns {Element[]|NodeList} Bbox elements
*/ */
export const getIntersectionListMethod = function (rect) { export const getIntersectionListMethod = function (rect) {
const currentZoom = selectionContext_.getCurrentZoom(); const zoom = svgCanvas.getZoom();
if (!selectionContext_.getRubberBox()) { if (!svgCanvas.getRubberBox()) {
return null; return null;
} }
const parent = const parent =
selectionContext_.getCurrentGroup() || svgCanvas.getCurrentGroup() ||
svgCanvas.getCurrentDrawing().getCurrentLayer(); svgCanvas.getCurrentDrawing().getCurrentLayer();
let rubberBBox; let rubberBBox;
if (!rect) { if (!rect) {
rubberBBox = getBBox(selectionContext_.getRubberBox()); rubberBBox = getBBox(svgCanvas.getRubberBox());
const bb = selectionContext_.getSVGContent().createSVGRect(); const bb = svgCanvas.getSvgContent().createSVGRect();
[ "x", "y", "width", "height", "top", "right", "bottom", "left" ].forEach( [ "x", "y", "width", "height", "top", "right", "bottom", "left" ].forEach(
(o) => { (o) => {
bb[o] = rubberBBox[o] / currentZoom; bb[o] = rubberBBox[o] / zoom;
} }
); );
rubberBBox = bb; rubberBBox = bb;
} else { } else {
rubberBBox = selectionContext_.getSVGContent().createSVGRect(); rubberBBox = svgCanvas.getSvgContent().createSVGRect();
rubberBBox.x = rect.x; rubberBBox.x = rect.x;
rubberBBox.y = rect.y; rubberBBox.y = rect.y;
rubberBBox.width = rect.width; rubberBBox.width = rect.width;
@@ -304,13 +302,13 @@ export const getIntersectionListMethod = function (rect) {
} }
const resultList = []; const resultList = [];
if (selectionContext_.getCurBBoxes().length === 0) { if (svgCanvas.getCurBBoxes().length === 0) {
// Cache all bboxes // Cache all bboxes
selectionContext_.setCurBBoxes(getVisibleElementsAndBBoxes(parent)); svgCanvas.setCurBBoxes(getVisibleElementsAndBBoxes(parent));
} }
let i = selectionContext_.getCurBBoxes().length; let i = svgCanvas.getCurBBoxes().length;
while (i--) { while (i--) {
const curBBoxes = selectionContext_.getCurBBoxes(); const curBBoxes = svgCanvas.getCurBBoxes();
if (!rubberBBox.width) { if (!rubberBBox.width) {
continue; continue;
} }
@@ -338,7 +336,7 @@ export const getIntersectionListMethod = function (rect) {
* @returns {void} * @returns {void}
*/ */
export const groupSvgElem = function (elem) { export const groupSvgElem = function (elem) {
const dataStorage = selectionContext_.getDataStorage(); const dataStorage = svgCanvas.getDataStorage();
const g = document.createElementNS(NS.SVG, "g"); const g = document.createElementNS(NS.SVG, "g");
elem.replaceWith(g); elem.replaceWith(g);
g.appendChild(elem); g.appendChild(elem);
@@ -374,7 +372,7 @@ export const prepareSvg = function (newDoc) {
* @returns {void} * @returns {void}
*/ */
export const setRotationAngle = function (val, preventUndo) { export const setRotationAngle = function (val, preventUndo) {
const selectedElements = selectionContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
// ensure val is the proper type // ensure val is the proper type
val = Number.parseFloat(val); val = Number.parseFloat(val);
const elem = selectedElements[0]; const elem = selectedElements[0];
@@ -398,7 +396,7 @@ export const setRotationAngle = function (val, preventUndo) {
cy, cy,
transformListToTransform(tlist).matrix transformListToTransform(tlist).matrix
); );
const Rnc = selectionContext_.getSVGRoot().createSVGTransform(); const Rnc = svgCanvas.getSvgRoot().createSVGTransform();
Rnc.setRotate(val, center.x, center.y); Rnc.setRotate(val, center.x, center.y);
if (tlist.numberOfItems) { if (tlist.numberOfItems) {
tlist.insertItemBefore(Rnc, 0); tlist.insertItemBefore(Rnc, 0);
@@ -433,7 +431,7 @@ export const setRotationAngle = function (val, preventUndo) {
selectedElements[0] selectedElements[0]
); );
selector.resize(); selector.resize();
selectionContext_.getSelector().updateGripCursors(val); svgCanvas.getSelector().updateGripCursors(val);
}; };
/** /**
@@ -445,9 +443,9 @@ export const setRotationAngle = function (val, preventUndo) {
*/ */
export const recalculateAllSelectedDimensions = function () { export const recalculateAllSelectedDimensions = function () {
const text = const text =
selectionContext_.getCurrentResizeMode() === "none" ? "position" : "size"; svgCanvas.getCurrentResizeMode() === "none" ? "position" : "size";
const batchCmd = new BatchCommand(text); const batchCmd = new BatchCommand(text);
const selectedElements = selectionContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
selectedElements.forEach((elem) => { selectedElements.forEach((elem) => {
const cmd = svgCanvas.recalculateDimensions(elem); const cmd = svgCanvas.recalculateDimensions(elem);
@@ -457,7 +455,7 @@ export const recalculateAllSelectedDimensions = function () {
}); });
if (!batchCmd.isEmpty()) { if (!batchCmd.isEmpty()) {
selectionContext_.addCommandToHistory(batchCmd); svgCanvas.addCommandToHistory(batchCmd);
svgCanvas.call("changed", selectedElements); svgCanvas.call("changed", selectedElements);
} }
}; };

140
src/svgcanvas/svg-exec.js
View File

@@ -34,7 +34,6 @@ const {
ChangeElementCommand, BatchCommand ChangeElementCommand, BatchCommand
} = hstry; } = hstry;
let svgContext_ = null;
let svgCanvas = null; let svgCanvas = null;
/** /**
@@ -42,9 +41,8 @@ let svgCanvas = null;
* @param {module:svg-exec.SvgCanvas#init} svgContext * @param {module:svg-exec.SvgCanvas#init} svgContext
* @returns {void} * @returns {void}
*/ */
export const init = function (svgContext) { export const init = function (canvas) {
svgContext_ = svgContext; svgCanvas = canvas;
svgCanvas = svgContext_.getCanvas();
}; };
/** /**
@@ -59,23 +57,23 @@ export const svgCanvasToString = function () {
svgCanvas.pathActions.clear(true); svgCanvas.pathActions.clear(true);
// Keep SVG-Edit comment on top // Keep SVG-Edit comment on top
const childNodesElems = svgContext_.getSVGContent().childNodes; const childNodesElems = svgCanvas.getSvgContent().childNodes;
childNodesElems.forEach(function (node, i) { childNodesElems.forEach(function (node, i) {
if (i && node.nodeType === 8 && node.data.includes('Created with')) { if (i && node.nodeType === 8 && node.data.includes('Created with')) {
svgContext_.getSVGContent().firstChild.before(node); svgCanvas.getSvgContent().firstChild.before(node);
} }
}); });
// Move out of in-group editing mode // Move out of in-group editing mode
if (svgContext_.getCurrentGroup()) { if (svgCanvas.getCurrentGroup()) {
draw.leaveContext(); draw.leaveContext();
svgCanvas.selectOnly([ svgContext_.getCurrentGroup() ]); svgCanvas.selectOnly([ svgCanvas.getCurrentGroup() ]);
} }
const nakedSvgs = []; const nakedSvgs = [];
// Unwrap gsvg if it has no special attributes (only id and style) // Unwrap gsvg if it has no special attributes (only id and style)
const gsvgElems = svgContext_.getSVGContent().querySelectorAll('g[data-gsvg]'); const gsvgElems = svgCanvas.getSvgContent().querySelectorAll('g[data-gsvg]');
Array.prototype.forEach.call(gsvgElems, function (element) { Array.prototype.forEach.call(gsvgElems, function (element) {
const attrs = element.attributes; const attrs = element.attributes;
let len = attrs.length; let len = attrs.length;
@@ -91,7 +89,7 @@ export const svgCanvasToString = function () {
element.replaceWith(svg); element.replaceWith(svg);
} }
}); });
const output = svgCanvas.svgToString(svgContext_.getSVGContent(), 0); const output = svgCanvas.svgToString(svgCanvas.getSvgContent(), 0);
// Rewrap gsvg // Rewrap gsvg
if (nakedSvgs.length) { if (nakedSvgs.length) {
@@ -111,8 +109,8 @@ export const svgCanvasToString = function () {
* @returns {string} The given element as an SVG tag * @returns {string} The given element as an SVG tag
*/ */
export const svgToString = function (elem, indent) { export const svgToString = function (elem, indent) {
const curConfig = svgContext_.getCurConfig(); const curConfig = svgCanvas.getCurConfig();
const nsMap = svgContext_.getNsMap(); const nsMap = svgCanvas.getNsMap();
const out = []; const out = [];
const unit = curConfig.baseUnit; const unit = curConfig.baseUnit;
const unitRe = new RegExp('^-?[\\d\\.]+' + unit + '$'); const unitRe = new RegExp('^-?[\\d\\.]+' + unit + '$');
@@ -218,13 +216,13 @@ export const svgToString = function (elem, indent) {
} }
// Embed images when saving // Embed images when saving
if (svgContext_.getSvgOptionApply() && if (svgCanvas.getSvgOptionApply() &&
elem.nodeName === 'image' && elem.nodeName === 'image' &&
attr.localName === 'href' && attr.localName === 'href' &&
svgContext_.getSvgOptionImages() && svgCanvas.getSvgOptionImages() &&
svgContext_.getSvgOptionImages() === 'embed' svgCanvas.getSvgOptionImages() === 'embed'
) { ) {
const img = svgContext_.getEncodableImages(attrVal); const img = svgCanvas.getEncodableImages(attrVal);
if (img) { attrVal = img; } if (img) { attrVal = img; }
} }
@@ -300,8 +298,8 @@ export const svgToString = function (elem, indent) {
* unsuccessful, `true` otherwise. * unsuccessful, `true` otherwise.
*/ */
export const setSvgString = function (xmlString, preventUndo) { export const setSvgString = function (xmlString, preventUndo) {
const curConfig = svgContext_.getCurConfig(); const curConfig = svgCanvas.getCurConfig();
const dataStorage = svgContext_.getDataStorage(); const dataStorage = svgCanvas.getDataStorage();
try { try {
// convert string into XML document // convert string into XML document
const newDoc = text2xml(xmlString); const newDoc = text2xml(xmlString);
@@ -315,31 +313,31 @@ export const setSvgString = function (xmlString, preventUndo) {
const batchCmd = new BatchCommand('Change Source'); const batchCmd = new BatchCommand('Change Source');
// remove old svg document // remove old svg document
const { nextSibling } = svgContext_.getSVGContent(); const { nextSibling } = svgCanvas.getSvgContent();
svgContext_.getSVGContent().remove(); svgCanvas.getSvgContent().remove();
const oldzoom = svgContext_.getSVGContent(); const oldzoom = svgCanvas.getSvgContent();
batchCmd.addSubCommand(new RemoveElementCommand(oldzoom, nextSibling, svgContext_.getSVGRoot())); batchCmd.addSubCommand(new RemoveElementCommand(oldzoom, nextSibling, svgCanvas.getSvgRoot()));
// set new svg document // set new svg document
// If DOM3 adoptNode() available, use it. Otherwise fall back to DOM2 importNode() // If DOM3 adoptNode() available, use it. Otherwise fall back to DOM2 importNode()
if (svgContext_.getDOMDocument().adoptNode) { if (svgCanvas.getDOMDocument().adoptNode) {
svgContext_.setSVGContent(svgContext_.getDOMDocument().adoptNode(newDoc.documentElement)); svgCanvas.setSvgContent(svgCanvas.getDOMDocument().adoptNode(newDoc.documentElement));
} else { } else {
svgContext_.setSVGContent(svgContext_.getDOMDocument().importNode(newDoc.documentElement, true)); svgCanvas.setSvgContent(svgCanvas.getDOMDocument().importNode(newDoc.documentElement, true));
} }
svgContext_.getSVGRoot().append(svgContext_.getSVGContent()); svgCanvas.getSvgRoot().append(svgCanvas.getSvgContent());
const content = svgContext_.getSVGContent(); const content = svgCanvas.getSvgContent();
svgCanvas.current_drawing_ = new draw.Drawing(svgContext_.getSVGContent(), svgContext_.getIdPrefix()); svgCanvas.current_drawing_ = new draw.Drawing(svgCanvas.getSvgContent(), svgCanvas.getIdPrefix());
// retrieve or set the nonce // retrieve or set the nonce
const nonce = svgCanvas.getCurrentDrawing().getNonce(); const nonce = svgCanvas.getCurrentDrawing().getNonce();
if (nonce) { if (nonce) {
svgContext_.call('setnonce', nonce); svgCanvas.call('setnonce', nonce);
} else { } else {
svgContext_.call('unsetnonce'); svgCanvas.call('unsetnonce');
} }
// change image href vals if possible // change image href vals if possible
@@ -456,7 +454,7 @@ export const setSvgString = function (xmlString, preventUndo) {
// Give ID for any visible layer children missing one // Give ID for any visible layer children missing one
const chiElems = content.children; const chiElems = content.children;
Array.prototype.forEach.call(chiElems, function (chiElem) { Array.prototype.forEach.call(chiElems, function (chiElem) {
const visElems = chiElem.querySelectorAll(svgContext_.getVisElems()); const visElems = chiElem.querySelectorAll(svgCanvas.getVisElems());
Array.prototype.forEach.call(visElems, function (elem) { Array.prototype.forEach.call(visElems, function (elem) {
if (!elem.id) { elem.id = svgCanvas.getNextId(); } if (!elem.id) { elem.id = svgCanvas.getNextId(); }
}); });
@@ -480,22 +478,22 @@ export const setSvgString = function (xmlString, preventUndo) {
svgCanvas.contentW = attrs.width; svgCanvas.contentW = attrs.width;
svgCanvas.contentH = attrs.height; svgCanvas.contentH = attrs.height;
batchCmd.addSubCommand(new InsertElementCommand(svgContext_.getSVGContent())); batchCmd.addSubCommand(new InsertElementCommand(svgCanvas.getSvgContent()));
// update root to the correct size // update root to the correct size
const width = content.getAttribute('width'); const width = content.getAttribute('width');
const height = content.getAttribute('height'); const height = content.getAttribute('height');
const changes = { width: width, height: height }; const changes = { width: width, height: height };
batchCmd.addSubCommand(new ChangeElementCommand(svgContext_.getSVGRoot(), changes)); batchCmd.addSubCommand(new ChangeElementCommand(svgCanvas.getSvgRoot(), changes));
// reset zoom // reset zoom
svgContext_.setCurrentZoom(1); svgCanvas.setZoom(1);
svgCanvas.clearSelection(); svgCanvas.clearSelection();
pathModule.clearData(); pathModule.clearData();
svgContext_.getSVGRoot().append(svgCanvas.selectorManager.selectorParentGroup); svgCanvas.getSvgRoot().append(svgCanvas.selectorManager.selectorParentGroup);
if (!preventUndo) svgContext_.addCommandToHistory(batchCmd); if (!preventUndo) svgCanvas.addCommandToHistory(batchCmd);
svgContext_.call('changed', [ svgContext_.getSVGContent() ]); svgCanvas.call('changed', [ svgCanvas.getSvgContent() ]);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
return false; return false;
@@ -519,7 +517,7 @@ export const setSvgString = function (xmlString, preventUndo) {
* was obtained * was obtained
*/ */
export const importSvgString = function (xmlString) { export const importSvgString = function (xmlString) {
const dataStorage = svgContext_.getDataStorage(); const dataStorage = svgCanvas.getDataStorage();
let j; let ts; let useEl; let j; let ts; let useEl;
try { try {
// Get unique ID // Get unique ID
@@ -527,8 +525,8 @@ export const importSvgString = function (xmlString) {
let useExisting = false; let useExisting = false;
// Look for symbol and make sure symbol exists in image // Look for symbol and make sure symbol exists in image
if (svgContext_.getImportIds(uid) && svgContext_.getImportIds(uid).symbol) { if (svgCanvas.getImportIds(uid) && svgCanvas.getImportIds(uid).symbol) {
const parents = getParents(svgContext_.getImportIds(uid).symbol, '#svgroot'); const parents = getParents(svgCanvas.getImportIds(uid).symbol, '#svgroot');
if (parents.length) { if (parents.length) {
useExisting = true; useExisting = true;
} }
@@ -537,8 +535,8 @@ export const importSvgString = function (xmlString) {
const batchCmd = new BatchCommand('Import Image'); const batchCmd = new BatchCommand('Import Image');
let symbol; let symbol;
if (useExisting) { if (useExisting) {
symbol = svgContext_.getImportIds(uid).symbol; symbol = svgCanvas.getImportIds(uid).symbol;
ts = svgContext_.getImportIds(uid).xform; ts = svgCanvas.getImportIds(uid).xform;
} else { } else {
// convert string into XML document // convert string into XML document
const newDoc = text2xml(xmlString); const newDoc = text2xml(xmlString);
@@ -547,9 +545,9 @@ export const importSvgString = function (xmlString) {
// import new svg document into our document // import new svg document into our document
// If DOM3 adoptNode() available, use it. Otherwise fall back to DOM2 importNode() // If DOM3 adoptNode() available, use it. Otherwise fall back to DOM2 importNode()
const svg = svgContext_.getDOMDocument().adoptNode const svg = svgCanvas.getDOMDocument().adoptNode
? svgContext_.getDOMDocument().adoptNode(newDoc.documentElement) ? svgCanvas.getDOMDocument().adoptNode(newDoc.documentElement)
: svgContext_.getDOMDocument().importNode(newDoc.documentElement, true); : svgCanvas.getDOMDocument().importNode(newDoc.documentElement, true);
svgCanvas.uniquifyElems(svg); svgCanvas.uniquifyElems(svg);
@@ -563,8 +561,8 @@ export const importSvgString = function (xmlString) {
} }
// TODO: properly handle preserveAspectRatio // TODO: properly handle preserveAspectRatio
const // canvasw = +svgcontent.getAttribute('width'), const // canvasw = +svgContent.getAttribute('width'),
canvash = Number(svgContext_.getSVGContent().getAttribute('height')); canvash = Number(svgCanvas.getSvgContent().getAttribute('height'));
// imported content should be 1/3 of the canvas on its largest dimension // imported content should be 1/3 of the canvas on its largest dimension
ts = innerh > innerw ? 'scale(' + (canvash / 3) / vb[3] + ')' : 'scale(' + (canvash / 3) / vb[2] + ')'; ts = innerh > innerw ? 'scale(' + (canvash / 3) / vb[3] + ')' : 'scale(' + (canvash / 3) / vb[2] + ')';
@@ -572,7 +570,7 @@ export const importSvgString = function (xmlString) {
// Hack to make recalculateDimensions understand how to scale // Hack to make recalculateDimensions understand how to scale
ts = 'translate(0) ' + ts + ' translate(0)'; ts = 'translate(0) ' + ts + ' translate(0)';
symbol = svgContext_.getDOMDocument().createElementNS(NS.SVG, 'symbol'); symbol = svgCanvas.getDOMDocument().createElementNS(NS.SVG, 'symbol');
const defs = findDefs(); const defs = findDefs();
if (isGecko()) { if (isGecko()) {
@@ -596,7 +594,7 @@ export const importSvgString = function (xmlString) {
symbol.id = svgCanvas.getNextId(); symbol.id = svgCanvas.getNextId();
// Store data // Store data
svgContext_.setImportIds(uid, { svgCanvas.setImportIds(uid, {
symbol, symbol,
xform: ts xform: ts
}); });
@@ -605,11 +603,11 @@ export const importSvgString = function (xmlString) {
batchCmd.addSubCommand(new InsertElementCommand(symbol)); batchCmd.addSubCommand(new InsertElementCommand(symbol));
} }
useEl = svgContext_.getDOMDocument().createElementNS(NS.SVG, 'use'); useEl = svgCanvas.getDOMDocument().createElementNS(NS.SVG, 'use');
useEl.id = svgCanvas.getNextId(); useEl.id = svgCanvas.getNextId();
svgCanvas.setHref(useEl, '#' + symbol.id); svgCanvas.setHref(useEl, '#' + symbol.id);
(svgContext_.getCurrentGroup() || svgCanvas.getCurrentDrawing().getCurrentLayer()).append(useEl); (svgCanvas.getCurrentGroup() || svgCanvas.getCurrentDrawing().getCurrentLayer()).append(useEl);
batchCmd.addSubCommand(new InsertElementCommand(useEl)); batchCmd.addSubCommand(new InsertElementCommand(useEl));
svgCanvas.clearSelection(); svgCanvas.clearSelection();
@@ -623,8 +621,8 @@ export const importSvgString = function (xmlString) {
// if (vb[0] !== 0 || vb[1] !== 0) { // if (vb[0] !== 0 || vb[1] !== 0) {
// ts = 'translate(' + (-vb[0]) + ',' + (-vb[1]) + ') ' + ts; // ts = 'translate(' + (-vb[0]) + ',' + (-vb[1]) + ') ' + ts;
// } // }
svgContext_.addCommandToHistory(batchCmd); svgCanvas.addCommandToHistory(batchCmd);
svgContext_.call('changed', [ svgContext_.getSVGContent() ]); svgCanvas.call('changed', [ svgCanvas.getSvgContent() ]);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
return null; return null;
@@ -661,12 +659,12 @@ export const embedImage = function (src) {
try { try {
let urldata = ';svgedit_url=' + encodeURIComponent(src); let urldata = ';svgedit_url=' + encodeURIComponent(src);
urldata = cvs.toDataURL().replace(';base64', urldata + ';base64'); urldata = cvs.toDataURL().replace(';base64', urldata + ';base64');
svgContext_.setEncodableImages(src, urldata); svgCanvas.setEncodableImages(src, urldata);
} catch (e) { } catch (e) {
svgContext_.setEncodableImages(src, false); svgCanvas.setEncodableImages(src, false);
} }
svgCanvas.setGoodImage(src); svgCanvas.setGoodImage(src);
resolve(svgContext_.getEncodableImages(src)); resolve(svgCanvas.getEncodableImages(src));
}); });
imgI.addEventListener("error", (e) => { imgI.addEventListener("error", (e) => {
reject(`error loading image: ${e.currentTarget.attributes.src.value}`); reject(`error loading image: ${e.currentTarget.attributes.src.value}`);
@@ -686,7 +684,7 @@ export const embedImage = function (src) {
* @returns {module:svgcanvas.IssuesAndCodes} * @returns {module:svgcanvas.IssuesAndCodes}
*/ */
function getIssues() { function getIssues() {
const uiStrings = svgContext_.getUIStrings(); const uiStrings = svgCanvas.getUIStrings();
// remove the selected outline before serializing // remove the selected outline before serializing
svgCanvas.clearSelection(); svgCanvas.clearSelection();
@@ -700,7 +698,7 @@ function getIssues() {
foreignObject: uiStrings.exportNoforeignObject, foreignObject: uiStrings.exportNoforeignObject,
'[stroke-dasharray]': uiStrings.exportNoDashArray '[stroke-dasharray]': uiStrings.exportNoDashArray
}; };
const content = svgContext_.getSVGContent(); const content = svgCanvas.getSvgContent();
// Add font/text check if Canvas Text API is not implemented // Add font/text check if Canvas Text API is not implemented
if (!('font' in document.querySelector('CANVAS').getContext('2d'))) { if (!('font' in document.querySelector('CANVAS').getContext('2d'))) {
@@ -751,7 +749,7 @@ export const rasterExport = async function (imgType, quality, exportWindowName,
const iframe = document.createElement('iframe'); const iframe = document.createElement('iframe');
iframe.onload = function() { iframe.onload = function() {
const iframedoc=iframe.contentDocument||iframe.contentWindow.document; const iframedoc=iframe.contentDocument||iframe.contentWindow.document;
const ele = svgContext_.getSVGContent(); const ele = svgCanvas.getSvgContent();
const cln = ele.cloneNode(true); const cln = ele.cloneNode(true);
iframedoc.body.appendChild(cln); iframedoc.body.appendChild(cln);
setTimeout(function(){ setTimeout(function(){
@@ -771,7 +769,7 @@ export const rasterExport = async function (imgType, quality, exportWindowName,
mimeType, quality, exportWindowName mimeType, quality, exportWindowName
}; };
if (!opts.avoidEvent) { if (!opts.avoidEvent) {
svgContext_.call('exported', obj); svgCanvas.call('exported', obj);
} }
resolve(obj); resolve(obj);
} }
@@ -833,7 +831,7 @@ export const exportPDF = async (
const iframe = document.createElement('iframe'); const iframe = document.createElement('iframe');
iframe.onload = function() { iframe.onload = function() {
const iframedoc=iframe.contentDocument||iframe.contentWindow.document; const iframedoc=iframe.contentDocument||iframe.contentWindow.document;
const ele = svgContext_.getSVGContent(); const ele = svgCanvas.getSvgContent();
const cln = ele.cloneNode(true); const cln = ele.cloneNode(true);
iframedoc.body.appendChild(cln); iframedoc.body.appendChild(cln);
setTimeout(function(){ setTimeout(function(){
@@ -855,7 +853,7 @@ export const exportPDF = async (
outputType = outputType || 'dataurlstring'; outputType = outputType || 'dataurlstring';
const obj = { issues, issueCodes, exportWindowName, outputType }; const obj = { issues, issueCodes, exportWindowName, outputType };
obj.output = doc.output(outputType, outputType === 'save' ? (exportWindowName || 'svg.pdf') : undefined); obj.output = doc.output(outputType, outputType === 'save' ? (exportWindowName || 'svg.pdf') : undefined);
svgContext_.call('exportedPDF', obj); svgCanvas.call('exportedPDF', obj);
return obj; return obj;
}); });
}, 1000); }, 1000);
@@ -895,7 +893,7 @@ export const uniquifyElemsMethod = function (g) {
// now search for all attributes on this element that might refer // now search for all attributes on this element that might refer
// to other elements // to other elements
svgContext_.getrefAttrs().forEach(function(attr){ svgCanvas.getrefAttrs().forEach(function(attr){
const attrnode = n.getAttributeNode(attr); const attrnode = n.getAttributeNode(attr);
if (attrnode) { if (attrnode) {
// the incoming file has been sanitized, so we should be able to safely just strip off the leading # // the incoming file has been sanitized, so we should be able to safely just strip off the leading #
@@ -971,7 +969,7 @@ export const setUseDataMethod = function (parent) {
} }
Array.prototype.forEach.call(elems, function (el, _) { Array.prototype.forEach.call(elems, function (el, _) {
const dataStorage = svgContext_.getDataStorage(); const dataStorage = svgCanvas.getDataStorage();
const id = svgCanvas.getHref(el).substr(1); const id = svgCanvas.getHref(el).substr(1);
const refElem = svgCanvas.getElem(id); const refElem = svgCanvas.getElem(id);
if (!refElem) { return; } if (!refElem) { return; }
@@ -990,7 +988,7 @@ export const setUseDataMethod = function (parent) {
* @returns {Integer} The number of elements that were removed * @returns {Integer} The number of elements that were removed
*/ */
export const removeUnusedDefElemsMethod = function () { export const removeUnusedDefElemsMethod = function () {
const defs = svgContext_.getSVGContent().getElementsByTagNameNS(NS.SVG, 'defs'); const defs = svgCanvas.getSvgContent().getElementsByTagNameNS(NS.SVG, 'defs');
if (!defs || !defs.length) { return 0; } if (!defs || !defs.length) { return 0; }
// if (!defs.firstChild) { return; } // if (!defs.firstChild) { return; }
@@ -1000,7 +998,7 @@ export const removeUnusedDefElemsMethod = function () {
const attrs = [ 'fill', 'stroke', 'filter', 'marker-start', 'marker-mid', 'marker-end' ]; const attrs = [ 'fill', 'stroke', 'filter', 'marker-start', 'marker-mid', 'marker-end' ];
const alen = attrs.length; const alen = attrs.length;
const allEls = svgContext_.getSVGContent().getElementsByTagNameNS(NS.SVG, '*'); const allEls = svgCanvas.getSvgContent().getElementsByTagNameNS(NS.SVG, '*');
const allLen = allEls.length; const allLen = allEls.length;
let i; let j; let i; let j;
@@ -1028,7 +1026,7 @@ export const removeUnusedDefElemsMethod = function () {
const { id } = defelem; const { id } = defelem;
if (!defelemUses.includes(id)) { if (!defelemUses.includes(id)) {
// Not found, so remove (but remember) // Not found, so remove (but remember)
svgContext_.setRemovedElements(id, defelem); svgCanvas.setRemovedElements(id, defelem);
defelem.remove(); defelem.remove();
numRemoved++; numRemoved++;
} }
@@ -1053,16 +1051,16 @@ export const convertGradientsMethod = function (elem) {
} }
Array.prototype.forEach.call(elems, function (grad) { Array.prototype.forEach.call(elems, function (grad) {
if (grad.getAttribute('gradientUnits') === 'userSpaceOnUse') { if (grad.getAttribute('gradientUnits') === 'userSpaceOnUse') {
const svgcontent = svgContext_.getSVGContent(); const svgContent = svgCanvas.getSvgContent();
// TODO: Support more than one element with this ref by duplicating parent grad // TODO: Support more than one element with this ref by duplicating parent grad
let fillStrokeElems = svgcontent.querySelectorAll('[fill="url(#' + grad.id + ')"],[stroke="url(#' + grad.id + ')"]'); let fillStrokeElems = svgContent.querySelectorAll('[fill="url(#' + grad.id + ')"],[stroke="url(#' + grad.id + ')"]');
if (!fillStrokeElems.length) { if (!fillStrokeElems.length) {
const tmpFillStrokeElems = svgcontent.querySelectorAll('[*|href="#' + grad.id + '"]'); const tmpFillStrokeElems = svgContent.querySelectorAll('[*|href="#' + grad.id + '"]');
if (!tmpFillStrokeElems.length) { if (!tmpFillStrokeElems.length) {
return; return;
} else { } else {
if((tmpFillStrokeElems[0].tagName === "linearGradient" || tmpFillStrokeElems[0].tagName === "radialGradient") && tmpFillStrokeElems[0].getAttribute('gradientUnits') === 'userSpaceOnUse') { if((tmpFillStrokeElems[0].tagName === "linearGradient" || tmpFillStrokeElems[0].tagName === "radialGradient") && tmpFillStrokeElems[0].getAttribute('gradientUnits') === 'userSpaceOnUse') {
fillStrokeElems = svgcontent.querySelectorAll('[fill="url(#' + tmpFillStrokeElems[0].id + ')"],[stroke="url(#' + tmpFillStrokeElems[0].id + ')"]'); fillStrokeElems = svgContent.querySelectorAll('[fill="url(#' + tmpFillStrokeElems[0].id + ')"],[stroke="url(#' + tmpFillStrokeElems[0].id + ')"]');
} else { } else {
return; return;
} }

1595
src/svgcanvas/svgcanvas.js
View File

File diff suppressed because it is too large Load Diff

72
src/svgcanvas/text-actions.js
View File

@@ -17,15 +17,15 @@ import {
supportsGoodTextCharPos supportsGoodTextCharPos
} from '../common/browser.js'; } from '../common/browser.js';
let textActionsContext_ = null; let svgCanvas = null;
/** /**
* @function module:text-actions.init * @function module:text-actions.init
* @param {module:text-actions.textActionsContext_} textActionsContext * @param {module:text-actions.svgCanvas} textActionsContext
* @returns {void} * @returns {void}
*/ */
export const init = function (textActionsContext) { export const init = function (canvas) {
textActionsContext_ = textActionsContext; svgCanvas = canvas;
}; };
/** /**
@@ -159,7 +159,7 @@ export const textActionsMethod = (function () {
*/ */
function getIndexFromPoint (mouseX, mouseY) { function getIndexFromPoint (mouseX, mouseY) {
// Position cursor here // Position cursor here
const pt = textActionsContext_.getSVGRoot().createSVGPoint(); const pt = svgCanvas.getSvgRoot().createSVGPoint();
pt.x = mouseX; pt.x = mouseX;
pt.y = mouseY; pt.y = mouseY;
@@ -221,9 +221,9 @@ export const textActionsMethod = (function () {
x: xIn, x: xIn,
y: yIn y: yIn
}; };
const currentZoom = textActionsContext_.getCurrentZoom(); const zoom = svgCanvas.getZoom();
out.x /= currentZoom; out.x /= zoom;
out.y /= currentZoom; out.y /= zoom;
if (matrix) { if (matrix) {
const pt = transformPoint(out.x, out.y, matrix.inverse()); const pt = transformPoint(out.x, out.y, matrix.inverse());
@@ -251,9 +251,9 @@ export const textActionsMethod = (function () {
out.x = pt.x; out.x = pt.x;
out.y = pt.y; out.y = pt.y;
} }
const currentZoom = textActionsContext_.getCurrentZoom(); const zoom = svgCanvas.getZoom();
out.x *= currentZoom; out.x *= zoom;
out.y *= currentZoom; out.y *= zoom;
return out; return out;
} }
@@ -275,10 +275,10 @@ export const textActionsMethod = (function () {
*/ */
function selectWord (evt) { function selectWord (evt) {
if (!allowDbl || !curtext) { return; } if (!allowDbl || !curtext) { return; }
const currentZoom = textActionsContext_.getCurrentZoom(); const zoom = svgCanvas.getZoom();
const ept = transformPoint(evt.pageX, evt.pageY, textActionsContext_.getrootSctm()); const ept = transformPoint(evt.pageX, evt.pageY, svgCanvas.getrootSctm());
const mouseX = ept.x * currentZoom; const mouseX = ept.x * zoom;
const mouseY = ept.y * currentZoom; const mouseY = ept.y * zoom;
const pt = screenToPt(mouseX, mouseY); const pt = screenToPt(mouseX, mouseY);
const index = getIndexFromPoint(pt.x, pt.y); const index = getIndexFromPoint(pt.x, pt.y);
@@ -305,7 +305,7 @@ export const textActionsMethod = (function () {
*/ */
select (target, x, y) { select (target, x, y) {
curtext = target; curtext = target;
textActionsContext_.getCanvas().textActions.toEditMode(x, y); svgCanvas.textActions.toEditMode(x, y);
}, },
/** /**
* @param {Element} elem * @param {Element} elem
@@ -313,7 +313,7 @@ export const textActionsMethod = (function () {
*/ */
start (elem) { start (elem) {
curtext = elem; curtext = elem;
textActionsContext_.getCanvas().textActions.toEditMode(); svgCanvas.textActions.toEditMode();
}, },
/** /**
* @param {external:MouseEvent} evt * @param {external:MouseEvent} evt
@@ -355,7 +355,7 @@ export const textActionsMethod = (function () {
// TODO: Find a way to make this work: Use transformed BBox instead of evt.target // TODO: Find a way to make this work: Use transformed BBox instead of evt.target
// if (lastX === mouseX && lastY === mouseY // if (lastX === mouseX && lastY === mouseY
// && !rectsIntersect(transbb, {x: pt.x, y: pt.y, width: 0, height: 0})) { // && !rectsIntersect(transbb, {x: pt.x, y: pt.y, width: 0, height: 0})) {
// textActionsContext_.getCanvas().textActions.toSelectMode(true); // svgCanvas.textActions.toSelectMode(true);
// } // }
if ( if (
@@ -365,7 +365,7 @@ export const textActionsMethod = (function () {
mouseY < lastY + 2 && mouseY < lastY + 2 &&
mouseY > lastY - 2 mouseY > lastY - 2
) { ) {
textActionsContext_.getCanvas().textActions.toSelectMode(true); svgCanvas.textActions.toSelectMode(true);
} }
}, },
/** /**
@@ -381,13 +381,13 @@ export const textActionsMethod = (function () {
*/ */
toEditMode (x, y) { toEditMode (x, y) {
allowDbl = false; allowDbl = false;
textActionsContext_.setCurrentMode('textedit'); svgCanvas.setCurrentMode('textedit');
textActionsContext_.getCanvas().selectorManager.requestSelector(curtext).showGrips(false); svgCanvas.selectorManager.requestSelector(curtext).showGrips(false);
// Make selector group accept clicks // Make selector group accept clicks
/* const selector = */ textActionsContext_.getCanvas().selectorManager.requestSelector(curtext); // Do we need this? Has side effect of setting lock, so keeping for now, but next line wasn't being used /* const selector = */ svgCanvas.selectorManager.requestSelector(curtext); // Do we need this? Has side effect of setting lock, so keeping for now, but next line wasn't being used
// const sel = selector.selectorRect; // const sel = selector.selectorRect;
textActionsContext_.getCanvas().textActions.init(); svgCanvas.textActions.init();
curtext.style.cursor = 'text'; curtext.style.cursor = 'text';
@@ -413,7 +413,7 @@ export const textActionsMethod = (function () {
* @returns {void} * @returns {void}
*/ */
toSelectMode (selectElem) { toSelectMode (selectElem) {
textActionsContext_.setCurrentMode('select'); svgCanvas.setCurrentMode('select');
clearInterval(blinker); clearInterval(blinker);
blinker = null; blinker = null;
if (selblock) { selblock.setAttribute('display', 'none'); } if (selblock) { selblock.setAttribute('display', 'none'); }
@@ -421,15 +421,15 @@ export const textActionsMethod = (function () {
curtext.style.cursor = 'move'; curtext.style.cursor = 'move';
if (selectElem) { if (selectElem) {
textActionsContext_.getCanvas().clearSelection(); svgCanvas.clearSelection();
curtext.style.cursor = 'move'; curtext.style.cursor = 'move';
textActionsContext_.call('selected', [ curtext ]); svgCanvas.call('selected', [ curtext ]);
textActionsContext_.getCanvas().addToSelection([ curtext ], true); svgCanvas.addToSelection([ curtext ], true);
} }
if (curtext && !curtext.textContent.length) { if (curtext && !curtext.textContent.length) {
// No content, so delete // No content, so delete
textActionsContext_.getCanvas().deleteSelectedElements(); svgCanvas.deleteSelectedElements();
} }
textinput.blur(); textinput.blur();
@@ -451,8 +451,8 @@ export const textActionsMethod = (function () {
* @returns {void} * @returns {void}
*/ */
clear () { clear () {
if (textActionsContext_.getCurrentMode() === 'textedit') { if (svgCanvas.getCurrentMode() === 'textedit') {
textActionsContext_.getCanvas().textActions.toSelectMode(); svgCanvas.textActions.toSelectMode();
} }
}, },
/** /**
@@ -469,9 +469,9 @@ export const textActionsMethod = (function () {
if (!curtext.parentNode) { if (!curtext.parentNode) {
// Result of the ffClone, need to get correct element // Result of the ffClone, need to get correct element
const selectedElements = textActionsContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
curtext = selectedElements[0]; curtext = selectedElements[0];
textActionsContext_.getCanvas().selectorManager.requestSelector(curtext).showGrips(false); svgCanvas.selectorManager.requestSelector(curtext).showGrips(false);
} }
const str = curtext.textContent; const str = curtext.textContent;
@@ -499,13 +499,13 @@ export const textActionsMethod = (function () {
end = curtext.getEndPositionOfChar(i); end = curtext.getEndPositionOfChar(i);
if (!supportsGoodTextCharPos()) { if (!supportsGoodTextCharPos()) {
const currentZoom = textActionsContext_.getCurrentZoom(); const zoom = svgCanvas.getZoom();
const offset = textActionsContext_.getCanvas().contentW * currentZoom; const offset = svgCanvas.contentW * zoom;
start.x -= offset; start.x -= offset;
end.x -= offset; end.x -= offset;
start.x /= currentZoom; start.x /= zoom;
end.x /= currentZoom; end.x /= zoom;
} }
// Get a "bbox" equivalent for each character. Uses the // Get a "bbox" equivalent for each character. Uses the

60
src/svgcanvas/undo.js
View File

@@ -20,15 +20,15 @@ const {
UndoManager, HistoryEventTypes UndoManager, HistoryEventTypes
} = hstry; } = hstry;
let undoContext_ = null; let svgCanvas = null;
/** /**
* @function module:undo.init * @function module:undo.init
* @param {module:undo.undoContext} undoContext * @param {module:undo.undoContext} undoContext
* @returns {void} * @returns {void}
*/ */
export const init = function (undoContext) { export const init = function (canvas) {
undoContext_ = undoContext; svgCanvas = canvas;
}; };
export const getUndoManager = function () { export const getUndoManager = function () {
@@ -43,43 +43,43 @@ export const getUndoManager = function () {
const EventTypes = HistoryEventTypes; const EventTypes = HistoryEventTypes;
// TODO: handle setBlurOffsets. // TODO: handle setBlurOffsets.
if (eventType === EventTypes.BEFORE_UNAPPLY || eventType === EventTypes.BEFORE_APPLY) { if (eventType === EventTypes.BEFORE_UNAPPLY || eventType === EventTypes.BEFORE_APPLY) {
undoContext_.getCanvas().clearSelection(); svgCanvas.clearSelection();
} else if (eventType === EventTypes.AFTER_APPLY || eventType === EventTypes.AFTER_UNAPPLY) { } else if (eventType === EventTypes.AFTER_APPLY || eventType === EventTypes.AFTER_UNAPPLY) {
const elems = cmd.elements(); const elems = cmd.elements();
undoContext_.getCanvas().pathActions.clear(); svgCanvas.pathActions.clear();
undoContext_.call('changed', elems); svgCanvas.call('changed', elems);
const cmdType = cmd.type(); const cmdType = cmd.type();
const isApply = (eventType === EventTypes.AFTER_APPLY); const isApply = (eventType === EventTypes.AFTER_APPLY);
if (cmdType === 'MoveElementCommand') { if (cmdType === 'MoveElementCommand') {
const parent = isApply ? cmd.newParent : cmd.oldParent; const parent = isApply ? cmd.newParent : cmd.oldParent;
if (parent === undoContext_.getSVGContent()) { if (parent === svgCanvas.getSvgContent()) {
draw.identifyLayers(); draw.identifyLayers();
} }
} else if (cmdType === 'InsertElementCommand' || cmdType === 'RemoveElementCommand') { } else if (cmdType === 'InsertElementCommand' || cmdType === 'RemoveElementCommand') {
if (cmd.parent === undoContext_.getSVGContent()) { if (cmd.parent === svgCanvas.getSvgContent()) {
draw.identifyLayers(); draw.identifyLayers();
} }
if (cmdType === 'InsertElementCommand') { if (cmdType === 'InsertElementCommand') {
if (isApply) { if (isApply) {
undoContext_.restoreRefElems(cmd.elem); svgCanvas.restoreRefElements(cmd.elem);
} }
} else if (!isApply) { } else if (!isApply) {
undoContext_.restoreRefElems(cmd.elem); svgCanvas.restoreRefElements(cmd.elem);
} }
if (cmd.elem && cmd.elem.tagName === 'use') { if (cmd.elem && cmd.elem.tagName === 'use') {
undoContext_.getCanvas().setUseData(cmd.elem); svgCanvas.setUseData(cmd.elem);
} }
} else if (cmdType === 'ChangeElementCommand') { } else if (cmdType === 'ChangeElementCommand') {
// if we are changing layer names, re-identify all layers // if we are changing layer names, re-identify all layers
if (cmd.elem.tagName === 'title' && if (cmd.elem.tagName === 'title' &&
cmd.elem.parentNode.parentNode === undoContext_.getSVGContent() cmd.elem.parentNode.parentNode === svgCanvas.getSvgContent()
) { ) {
draw.identifyLayers(); draw.identifyLayers();
} }
const values = isApply ? cmd.newValues : cmd.oldValues; const values = isApply ? cmd.newValues : cmd.oldValues;
// If stdDeviation was changed, update the blur. // If stdDeviation was changed, update the blur.
if (values.stdDeviation) { if (values.stdDeviation) {
undoContext_.getCanvas().setBlurOffsets(cmd.elem.parentNode, values.stdDeviation); svgCanvas.setBlurOffsets(cmd.elem.parentNode, values.stdDeviation);
} }
if (cmd.elem.tagName === 'text'){ if (cmd.elem.tagName === 'text'){
const [ dx, dy ] = [ cmd.newValues.x - cmd.oldValues.x, const [ dx, dy ] = [ cmd.newValues.x - cmd.oldValues.x,
@@ -120,9 +120,9 @@ export const ffClone = function (elem) {
const clone = elem.cloneNode(true); const clone = elem.cloneNode(true);
elem.before(clone); elem.before(clone);
elem.remove(); elem.remove();
undoContext_.getCanvas().selectorManager.releaseSelector(elem); svgCanvas.selectorManager.releaseSelector(elem);
undoContext_.getCanvas().setSelectedElements(0, clone); svgCanvas.setSelectedElements(0, clone);
undoContext_.getCanvas().selectorManager.requestSelector(clone).showGrips(true); svgCanvas.selectorManager.requestSelector(clone).showGrips(true);
return clone; return clone;
}; };
@@ -135,11 +135,11 @@ export const ffClone = function (elem) {
* @returns {void} * @returns {void}
*/ */
export const changeSelectedAttributeNoUndoMethod = function (attr, newValue, elems) { export const changeSelectedAttributeNoUndoMethod = function (attr, newValue, elems) {
const selectedElements = undoContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
const currentZoom = undoContext_.getCurrentZoom(); const zoom = svgCanvas.getZoom();
if (undoContext_.getCurrentMode() === 'pathedit') { if (svgCanvas.getCurrentMode() === 'pathedit') {
// Editing node // Editing node
undoContext_.getCanvas().pathActions.moveNode(attr, newValue); svgCanvas.pathActions.moveNode(attr, newValue);
} }
elems = elems || selectedElements; elems = elems || selectedElements;
let i = elems.length; let i = elems.length;
@@ -155,7 +155,7 @@ export const changeSelectedAttributeNoUndoMethod = function (attr, newValue, ele
const bbox = getStrokedBBoxDefaultVisible([ elem ]); const bbox = getStrokedBBoxDefaultVisible([ elem ]);
const diffX = attr === 'x' ? newValue - bbox.x : 0; const diffX = attr === 'x' ? newValue - bbox.x : 0;
const diffY = attr === 'y' ? newValue - bbox.y : 0; const diffY = attr === 'y' ? newValue - bbox.y : 0;
undoContext_.getCanvas().moveSelectedElements(diffX * currentZoom, diffY * currentZoom, true); svgCanvas.moveSelectedElements(diffX * zoom, diffY * zoom, true);
continue; continue;
} }
@@ -201,8 +201,8 @@ export const changeSelectedAttributeNoUndoMethod = function (attr, newValue, ele
// NOTE: Important that this happens AFTER elem.setAttribute() or else attributes like // NOTE: Important that this happens AFTER elem.setAttribute() or else attributes like
// font-size can get reset to their old value, ultimately by svgEditor.updateContextPanel(), // font-size can get reset to their old value, ultimately by svgEditor.updateContextPanel(),
// after calling textActions.toSelectMode() below // after calling textActions.toSelectMode() below
if (undoContext_.getCurrentMode() === 'textedit' && attr !== '#text' && elem.textContent.length) { if (svgCanvas.getCurrentMode() === 'textedit' && attr !== '#text' && elem.textContent.length) {
undoContext_.getCanvas().textActions.toSelectMode(elem); svgCanvas.textActions.toSelectMode(elem);
} }
// if (i === 0) { // if (i === 0) {
@@ -226,7 +226,7 @@ export const changeSelectedAttributeNoUndoMethod = function (attr, newValue, ele
// Due to element replacement, this element may no longer // Due to element replacement, this element may no longer
// be part of the DOM // be part of the DOM
if (!elem.parentNode) { return; } if (!elem.parentNode) { return; }
undoContext_.getCanvas().selectorManager.requestSelector(elem).resize(); svgCanvas.selectorManager.requestSelector(elem).resize();
}, 0); }, 0);
} }
// if this element was rotated, and we changed the position of this element // if this element was rotated, and we changed the position of this element
@@ -247,7 +247,7 @@ export const changeSelectedAttributeNoUndoMethod = function (attr, newValue, ele
); );
const cx = center.x; const cx = center.x;
const cy = center.y; const cy = center.y;
const newrot = undoContext_.getSVGRoot().createSVGTransform(); const newrot = svgCanvas.getSvgRoot().createSVGTransform();
newrot.setRotate(angle, cx, cy); newrot.setRotate(angle, cx, cy);
tlist.insertItemBefore(newrot, n); tlist.insertItemBefore(newrot, n);
break; break;
@@ -270,16 +270,16 @@ export const changeSelectedAttributeNoUndoMethod = function (attr, newValue, ele
* @returns {void} * @returns {void}
*/ */
export const changeSelectedAttributeMethod = function (attr, val, elems) { export const changeSelectedAttributeMethod = function (attr, val, elems) {
const selectedElements = undoContext_.getSelectedElements(); const selectedElements = svgCanvas.getSelectedElements();
elems = elems || selectedElements; elems = elems || selectedElements;
undoContext_.getCanvas().undoMgr.beginUndoableChange(attr, elems); svgCanvas.undoMgr.beginUndoableChange(attr, elems);
// const i = elems.length; // const i = elems.length;
changeSelectedAttributeNoUndoMethod(attr, val, elems); changeSelectedAttributeNoUndoMethod(attr, val, elems);
const batchCmd = undoContext_.getCanvas().undoMgr.finishUndoableChange(); const batchCmd = svgCanvas.undoMgr.finishUndoableChange();
if (!batchCmd.isEmpty()) { if (!batchCmd.isEmpty()) {
// undoContext_.addCommandToHistory(batchCmd); // svgCanvas.addCommandToHistory(batchCmd);
undoContext_.getCanvas().undoMgr.addCommandToHistory(batchCmd); svgCanvas.undoMgr.addCommandToHistory(batchCmd);
} }
}; };

64
src/svgcanvas/utilities.js
View File

@@ -18,7 +18,7 @@ const visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyl
const visElemsArr = visElems.split(','); const visElemsArr = visElems.split(',');
// const hidElems = 'defs,desc,feGaussianBlur,filter,linearGradient,marker,mask,metadata,pattern,radialGradient,stop,switch,symbol,title,textPath'; // const hidElems = 'defs,desc,feGaussianBlur,filter,linearGradient,marker,mask,metadata,pattern,radialGradient,stop,switch,symbol,title,textPath';
let editorContext_ = null; let svgCanvas = null;
let svgroot_ = null; let svgroot_ = null;
/** /**
@@ -26,7 +26,7 @@ let svgroot_ = null;
* @typedef {PlainObject} module:utilities.SVGElementJSON * @typedef {PlainObject} module:utilities.SVGElementJSON
* @property {string} element - Tag name of the SVG element to create * @property {string} element - Tag name of the SVG element to create
* @property {PlainObject<string, string>} attr - Has key-value attributes to assign to the new element. * @property {PlainObject<string, string>} attr - Has key-value attributes to assign to the new element.
* An `id` should be set so that {@link module:utilities.EditorContext#addSVGElementFromJson} can later re-identify the element for modification or replacement. * An `id` should be set so that {@link module:utilities.EditorContext#addSVGElemensFromJson} can later re-identify the element for modification or replacement.
* @property {boolean} [curStyles=false] - Indicates whether current style attributes should be applied first * @property {boolean} [curStyles=false] - Indicates whether current style attributes should be applied first
* @property {module:utilities.SVGElementJSON[]} [children] - Data objects to be added recursively as children * @property {module:utilities.SVGElementJSON[]} [children] - Data objects to be added recursively as children
* @property {string} [namespace="http://www.w3.org/2000/svg"] - Indicate a (non-SVG) namespace * @property {string} [namespace="http://www.w3.org/2000/svg"] - Indicate a (non-SVG) namespace
@@ -39,14 +39,14 @@ let svgroot_ = null;
* @property {module:path.pathActions} pathActions * @property {module:path.pathActions} pathActions
*/ */
/** /**
* @function module:utilities.EditorContext#getSVGContent * @function module:utilities.EditorContext#getSvgContent
* @returns {SVGSVGElement} * @returns {SVGSVGElement}
*/ */
/** /**
* Create a new SVG element based on the given object keys/values and add it * Create a new SVG element based on the given object keys/values and add it
* to the current layer. * to the current layer.
* The element will be run through `cleanupElement` before being returned. * The element will be run through `cleanupElement` before being returned.
* @function module:utilities.EditorContext#addSVGElementFromJson * @function module:utilities.EditorContext#addSVGElemensFromJson
* @param {module:utilities.SVGElementJSON} data * @param {module:utilities.SVGElementJSON} data
* @returns {Element} The new element * @returns {Element} The new element
*/ */
@@ -63,7 +63,7 @@ let svgroot_ = null;
* @returns {HTMLElement} * @returns {HTMLElement}
*/ */
/** /**
* @function module:utilities.EditorContext#getSVGRoot * @function module:utilities.EditorContext#getSvgRoot
* @returns {SVGSVGElement} * @returns {SVGSVGElement}
*/ */
/** /**
@@ -77,12 +77,12 @@ let svgroot_ = null;
/** /**
* @function module:utilities.init * @function module:utilities.init
* @param {module:utilities.EditorContext} editorContext * @param {module:utilities.EditorContext} canvas
* @returns {void} * @returns {void}
*/ */
export const init = function (editorContext) { export const init = function (canvas) {
editorContext_ = editorContext; svgCanvas = canvas;
svgroot_ = editorContext.getSVGRoot(); svgroot_ = canvas.getSvgRoot();
}; };
/** /**
@@ -366,7 +366,7 @@ export let setHref = function (elem, val) {
* @returns {SVGDefsElement} The document's `<defs>` element, creating it first if necessary * @returns {SVGDefsElement} The document's `<defs>` element, creating it first if necessary
*/ */
export const findDefs = function () { export const findDefs = function () {
const svgElement = editorContext_.getSVGContent(); const svgElement = svgCanvas.getSvgContent();
let defs = svgElement.getElementsByTagNameNS(NS.SVG, 'defs'); let defs = svgElement.getElementsByTagNameNS(NS.SVG, 'defs');
if (defs.length > 0) { if (defs.length > 0) {
defs = defs[0]; defs = defs[0];
@@ -472,7 +472,7 @@ export const getPathBBox = function (path) {
* @returns {module:utilities.BBoxObject} Bounding box object * @returns {module:utilities.BBoxObject} Bounding box object
*/ */
export const getBBox = function (elem) { export const getBBox = function (elem) {
const selected = elem || editorContext_.getSelectedElements()[0]; const selected = elem || svgCanvas.getSelectedElements()[0];
if (elem.nodeType !== 1) { return null; } if (elem.nodeType !== 1) { return null; }
const elname = selected.nodeName; const elname = selected.nodeName;
@@ -667,12 +667,12 @@ export const getExtraAttributesForConvertToPath = function (elem) {
* Get the BBox of an element-as-path. * Get the BBox of an element-as-path.
* @function module:utilities.getBBoxOfElementAsPath * @function module:utilities.getBBoxOfElementAsPath
* @param {Element} elem - The DOM element to be probed * @param {Element} elem - The DOM element to be probed
* @param {module:utilities.EditorContext#addSVGElementFromJson} addSVGElementFromJson - Function to add the path element to the current layer. See canvas.addSVGElementFromJson * @param {module:utilities.EditorContext#addSVGElemensFromJson} addSVGElemensFromJson - Function to add the path element to the current layer. See canvas.addSVGElemensFromJson
* @param {module:path.pathActions} pathActions - If a transform exists, `pathActions.resetOrientation()` is used. See: canvas.pathActions. * @param {module:path.pathActions} pathActions - If a transform exists, `pathActions.resetOrientation()` is used. See: canvas.pathActions.
* @returns {DOMRect|false} The resulting path's bounding box object. * @returns {DOMRect|false} The resulting path's bounding box object.
*/ */
export const getBBoxOfElementAsPath = function (elem, addSVGElementFromJson, pathActions) { export const getBBoxOfElementAsPath = function (elem, addSVGElemensFromJson, pathActions) {
const path = addSVGElementFromJson({ const path = addSVGElemensFromJson({
element: 'path', element: 'path',
attr: getExtraAttributesForConvertToPath(elem) attr: getExtraAttributesForConvertToPath(elem)
}); });
@@ -713,7 +713,7 @@ export const getBBoxOfElementAsPath = function (elem, addSVGElementFromJson, pat
* @function module:utilities.convertToPath * @function module:utilities.convertToPath
* @param {Element} elem - The DOM element to be converted * @param {Element} elem - The DOM element to be converted
* @param {module:utilities.SVGElementJSON} attrs - Apply attributes to new path. see canvas.convertToPath * @param {module:utilities.SVGElementJSON} attrs - Apply attributes to new path. see canvas.convertToPath
* @param {module:utilities.EditorContext#addSVGElementFromJson} addSVGElementFromJson - Function to add the path element to the current layer. See canvas.addSVGElementFromJson * @param {module:utilities.EditorContext#addSVGElemensFromJson} addSVGElemensFromJson - Function to add the path element to the current layer. See canvas.addSVGElemensFromJson
* @param {module:path.pathActions} pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions. * @param {module:path.pathActions} pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions.
* @param {module:draw.DrawCanvasInit#clearSelection|module:path.EditorContext#clearSelection} clearSelection - see [canvas.clearSelection]{@link module:svgcanvas.SvgCanvas#clearSelection} * @param {module:draw.DrawCanvasInit#clearSelection|module:path.EditorContext#clearSelection} clearSelection - see [canvas.clearSelection]{@link module:svgcanvas.SvgCanvas#clearSelection}
* @param {module:path.EditorContext#addToSelection} addToSelection - see [canvas.addToSelection]{@link module:svgcanvas.SvgCanvas#addToSelection} * @param {module:path.EditorContext#addToSelection} addToSelection - see [canvas.addToSelection]{@link module:svgcanvas.SvgCanvas#addToSelection}
@@ -722,7 +722,7 @@ export const getBBoxOfElementAsPath = function (elem, addSVGElementFromJson, pat
* @returns {SVGPathElement|null} The converted path element or null if the DOM element was not recognized. * @returns {SVGPathElement|null} The converted path element or null if the DOM element was not recognized.
*/ */
export const convertToPath = function ( export const convertToPath = function (
elem, attrs, addSVGElementFromJson, pathActions, elem, attrs, addSVGElemensFromJson, pathActions,
clearSelection, addToSelection, hstry, addCommandToHistory clearSelection, addToSelection, hstry, addCommandToHistory
) { ) {
const batchCmd = new hstry.BatchCommand('Convert element to Path'); const batchCmd = new hstry.BatchCommand('Convert element to Path');
@@ -730,7 +730,7 @@ export const convertToPath = function (
// Any attribute on the element not covered by the passed-in attributes // Any attribute on the element not covered by the passed-in attributes
attrs = mergeDeep(attrs, getExtraAttributesForConvertToPath(elem)); attrs = mergeDeep(attrs, getExtraAttributesForConvertToPath(elem));
const path = addSVGElementFromJson({ const path = addSVGElemensFromJson({
element: 'path', element: 'path',
attr: attrs attr: attrs
}); });
@@ -812,11 +812,11 @@ function bBoxCanBeOptimizedOverNativeGetBBox(angle, hasAMatrixTransform) {
* Get bounding box that includes any transforms. * Get bounding box that includes any transforms.
* @function module:utilities.getBBoxWithTransform * @function module:utilities.getBBoxWithTransform
* @param {Element} elem - The DOM element to be converted * @param {Element} elem - The DOM element to be converted
* @param {module:utilities.EditorContext#addSVGElementFromJson} addSVGElementFromJson - Function to add the path element to the current layer. See canvas.addSVGElementFromJson * @param {module:utilities.EditorContext#addSVGElemensFromJson} addSVGElemensFromJson - Function to add the path element to the current layer. See canvas.addSVGElemensFromJson
* @param {module:path.pathActions} pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions. * @param {module:path.pathActions} pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions.
* @returns {module:utilities.BBoxObject|module:math.TransformedBox|DOMRect} A single bounding box object * @returns {module:utilities.BBoxObject|module:math.TransformedBox|DOMRect} A single bounding box object
*/ */
export const getBBoxWithTransform = function (elem, addSVGElementFromJson, pathActions) { export const getBBoxWithTransform = function (elem, addSVGElemensFromJson, pathActions) {
// TODO: Fix issue with rotated groups. Currently they work // TODO: Fix issue with rotated groups. Currently they work
// fine in FF, but not in other browsers (same problem mentioned // fine in FF, but not in other browsers (same problem mentioned
// in Issue 339 comment #2). // in Issue 339 comment #2).
@@ -838,14 +838,14 @@ export const getBBoxWithTransform = function (elem, addSVGElementFromJson, pathA
// TODO: why ellipse and not circle // TODO: why ellipse and not circle
const elemNames = [ 'ellipse', 'path', 'line', 'polyline', 'polygon' ]; const elemNames = [ 'ellipse', 'path', 'line', 'polyline', 'polygon' ];
if (elemNames.includes(elem.tagName)) { if (elemNames.includes(elem.tagName)) {
goodBb = getBBoxOfElementAsPath(elem, addSVGElementFromJson, pathActions); goodBb = getBBoxOfElementAsPath(elem, addSVGElemensFromJson, pathActions);
bb = goodBb; bb = goodBb;
} else if (elem.tagName === 'rect') { } else if (elem.tagName === 'rect') {
// Look for radius // Look for radius
const rx = Number(elem.getAttribute('rx')); const rx = Number(elem.getAttribute('rx'));
const ry = Number(elem.getAttribute('ry')); const ry = Number(elem.getAttribute('ry'));
if (rx || ry) { if (rx || ry) {
goodBb = getBBoxOfElementAsPath(elem, addSVGElementFromJson, pathActions); goodBb = getBBoxOfElementAsPath(elem, addSVGElemensFromJson, pathActions);
bb = goodBb; bb = goodBb;
} }
} }
@@ -882,18 +882,18 @@ function getStrokeOffsetForBBox(elem) {
* Get the bounding box for one or more stroked and/or transformed elements. * Get the bounding box for one or more stroked and/or transformed elements.
* @function module:utilities.getStrokedBBox * @function module:utilities.getStrokedBBox
* @param {Element[]} elems - Array with DOM elements to check * @param {Element[]} elems - Array with DOM elements to check
* @param {module:utilities.EditorContext#addSVGElementFromJson} addSVGElementFromJson - Function to add the path element to the current layer. See canvas.addSVGElementFromJson * @param {module:utilities.EditorContext#addSVGElemensFromJson} addSVGElemensFromJson - Function to add the path element to the current layer. See canvas.addSVGElemensFromJson
* @param {module:path.pathActions} pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions. * @param {module:path.pathActions} pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions.
* @returns {module:utilities.BBoxObject|module:math.TransformedBox|DOMRect} A single bounding box object * @returns {module:utilities.BBoxObject|module:math.TransformedBox|DOMRect} A single bounding box object
*/ */
export const getStrokedBBox = function (elems, addSVGElementFromJson, pathActions) { export const getStrokedBBox = function (elems, addSVGElemensFromJson, pathActions) {
if (!elems || !elems.length) { return false; } if (!elems || !elems.length) { return false; }
let fullBb; let fullBb;
elems.forEach(function(elem){ elems.forEach(function(elem){
if (fullBb) { return; } if (fullBb) { return; }
if (!elem.parentNode) { return; } if (!elem.parentNode) { return; }
fullBb = getBBoxWithTransform(elem, addSVGElementFromJson, pathActions); fullBb = getBBoxWithTransform(elem, addSVGElemensFromJson, pathActions);
}); });
// This shouldn't ever happen... // This shouldn't ever happen...
@@ -916,7 +916,7 @@ export const getStrokedBBox = function (elems, addSVGElementFromJson, pathAction
maxY += offset; maxY += offset;
} else { } else {
elems.forEach(function(elem){ elems.forEach(function(elem){
const curBb = getBBoxWithTransform(elem, addSVGElementFromJson, pathActions); const curBb = getBBoxWithTransform(elem, addSVGElemensFromJson, pathActions);
if (curBb) { if (curBb) {
const offset = getStrokeOffsetForBBox(elem); const offset = getStrokeOffsetForBBox(elem);
minX = Math.min(minX, curBb.x - offset); minX = Math.min(minX, curBb.x - offset);
@@ -947,8 +947,8 @@ export const getStrokedBBox = function (elems, addSVGElementFromJson, pathAction
*/ */
export const getVisibleElements = function (parentElement) { export const getVisibleElements = function (parentElement) {
if (!parentElement) { if (!parentElement) {
const svgcontent = editorContext_.getSVGContent(); const svgContent = svgCanvas.getSvgContent();
parentElement = svgcontent.children[0]; // Prevent layers from being included parentElement = svgContent.children[0]; // Prevent layers from being included
} }
const contentElems = []; const contentElems = [];
@@ -971,8 +971,8 @@ export const getStrokedBBoxDefaultVisible = function (elems) {
if (!elems) { elems = getVisibleElements(); } if (!elems) { elems = getVisibleElements(); }
return getStrokedBBox( return getStrokedBBox(
elems, elems,
editorContext_.addSVGElementFromJson, svgCanvas.addSVGElemensFromJson,
editorContext_.pathActions svgCanvas.pathActions
); );
}; };
@@ -1002,7 +1002,7 @@ export const getRotationAngleFromTransformList = (tlist, toRad) => {
* @returns {Float} The angle in degrees or radians * @returns {Float} The angle in degrees or radians
*/ */
export let getRotationAngle = function (elem, toRad) { export let getRotationAngle = function (elem, toRad) {
const selected = elem || editorContext_.getSelectedElements()[0]; const selected = elem || svgCanvas.getSelectedElements()[0];
// find the rotation transform (if any) and set it // find the rotation transform (if any) and set it
const tlist = selected.transform?.baseVal; const tlist = selected.transform?.baseVal;
return getRotationAngleFromTransformList(tlist, toRad); return getRotationAngleFromTransformList(tlist, toRad);
@@ -1122,8 +1122,8 @@ export const cleanupElement = function (element) {
* @returns {Integer} * @returns {Integer}
*/ */
export const snapToGrid = function (value) { export const snapToGrid = function (value) {
const unit = editorContext_.getBaseUnit(); const unit = svgCanvas.getBaseUnit();
let stepSize = editorContext_.getSnappingStep(); let stepSize = svgCanvas.getSnappingStep();
if (unit !== 'px') { if (unit !== 'px') {
stepSize *= getTypeMap()[unit]; stepSize *= getTypeMap()[unit];
} }