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

Refactor canvas in multiple pieces to increase maintainability (#446)

Browse Source 
* #refactor-canvas getJsonFromSvgElement and svgroot code moved to separate file
* #refactor-canvas build files changes
* #refactor-canvas addSVGElementsFromJson move to json file
* #refactor-canvas selected element option function move separate file
* #refactor-canvas moveUpDownSelected move to select-elem
* ##refactor-canvas build file updated
* #refactor-canvas moveSelectedElements  move to selected-elem
* #refactor-canvas cloneSelectedElements move to slected-elem
* #refactor-canvas alignSelectedElements move to selected-elem
* #refactor-canvas deleteSelectedElements move to selected-elem
* #refactor-canvas copySelectedElements and groupSelectedElements move to selected-elem
* #refactor-canvas pushGroupProperty, ungroupSelectedElement move to selected-elem
* #refactor-canvas comment changes
* #refactor-canvas UndoManager move to separate file
* #refactor-canvas event file move to mouseMove, mouseUpEvent and dblClickEvent
* #refactor-canvas mouseDown move to event
* #refactor-canvas move to undo file
* #refactor alignment changes  and set function revert return
* #refactor-canvas textaction move to separate file
* #refactor-canvas paste-element function move to separate file
* #refactor-canvas set and get  method move to separate file
* #refactor-canvas set and get function moved changes
* #refactor clear file import and regaring function moved changes changes
* #refactor-canvas svg related function move to separate file
* #refactor-canvas setBackground methos move to elem-get-set file
* #refactor-canvas getBsplinePoint method move to event file
* #refactor-canvas export functions move to svg-exec
* #refactor-canvas svg related function moved separate file
* #refactor-canvas updateCanvas,  cycleElement move to selected-elem file
* #refactor-canvas removeUnusedDefElems move to svg-exec file
* #refactor-canvas blur method move to separate file blur-event.js
* #refactor-canvas selection related function move to separate file slection.js
* #refactor-canvas convertGradients, mousewheelmove event bind function move to other files
* #refactor-canvas extension function move to selection file
* #refactor-canvas svg tag long string changes to es6 format
* eslint fixes
* eslint and test fixes
* add netlify logo per their requirements
* #refactor-canvas path file separate to path-method.js and path-actions.js
* #refactor-canvas lint issue fixed
* #refactor-canvas path.js file class and const move to path-method.js
* #refactor-canvas eslint issue fixed. 'jsdoc/check-examples': 'off' already so removed eslint-disable jsdoc/check-examples
* #refactor-canvas path class moved changes and copy-elem.js file cypress test issue fixed
* #refactor-canvas UI - Clipboard paste element  cypress issue fixed
* #refactor-canvas cypress test cases issue fixed changes
* #refactor-canvas cypress test cases issue fixed changes
* #refactor-canvas cypress test case issue fixed
* npm update and fix a few eslint new errors
* fix snapshot and run tests
* add star tool to cypress
* #refactor-canvas shapelibrary, star, polygon and panning tool issue fixed
* build
* Update layer.js
* revert proper declarations

Authored-by OptimistikSAS
This commit is contained in:
JFH
2020-11-11 11:38:45 +01:00
committed by GitHub
parent 087fa44cea
commit 28019eef07
106 changed files with 10353 additions and 7877 deletions
Download Patch File Download Diff File Expand all files Collapse all files

294
cypress/integration/ui/__snapshots__/scenario.js.snap
View File

@@ -221,6 +221,7 @@ exports[`use various parts of svg-edit > check tool_italic #0`] = `
fill-opacity="1"
stroke-opacity="1"
id="svg_2"
transform="matrix(1 0 0 1 0 0)"
>
B
</text>
@@ -285,6 +286,7 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = `
fill-opacity="1"
stroke-opacity="1"
id="svg_2"
transform="matrix(1 0 0 1 0 0)"
>
B
</text>
@@ -349,9 +351,301 @@ exports[`use various parts of svg-edit > check change color #0`] = `
fill-opacity="1"
stroke-opacity="1"
id="svg_2"
transform="matrix(1 0 0 1 0 0)"
>
B
</text>
</g>
</svg>
`;
exports[`use various parts of svg-edit > check tool_start #0`] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
width="640"
height="480"
id="svgcontent"
overflow="visible"
x="640"
y="480"
viewBox="0 0 640 480"
>
<g class="layer" style="pointer-events:all">
<title style="pointer-events:inherit">Layer 1</title>
<rect
id="rect"
fill="#FF0000"
height="70"
stroke="#000000"
stroke-width="5"
width="94"
x="69.5"
y="51.5"
style="pointer-events:inherit"
fill-opacity="1"
stroke-opacity="1"
></rect>
<text
fill="#ffff00"
stroke="#000000"
stroke-width="0"
x="116"
y="87"
id="svg_1"
font-size="24"
font-family="serif"
text-anchor="middle"
xml:space="preserve"
fill-opacity="1"
stroke-opacity="1"
font-style="italic"
font-weight="bold"
>
B
</text>
<text
fill="#000000"
stroke="#000000"
stroke-width="0"
x="136"
y="107"
font-size="24"
font-family="serif"
text-anchor="middle"
xml:space="preserve"
fill-opacity="1"
stroke-opacity="1"
id="svg_2"
transform="matrix(1 0 0 1 0 0)"
>
B
</text>
<polygon
cx="407"
cy="45"
id="svg_3"
shape="star"
point="5"
r="13.333333333333334"
radialshift=""
r2="5.333333333333334"
orient="point"
fill="#000000"
strokecolor="#000000"
strokeWidth="0"
points="407,31.666666666666664 410.1348546788932,40.68524269666695 419.68075355060205,40.87977340833403 412.0723014202408,46.64809063666639 414.83713669723295,55.78689325833263 407,50.333333333333336 399.16286330276705,55.78689325833263 401.9276985797592,46.64809063666639 394.31924644939795,40.87977340833404 403.8651453211068,40.68524269666695 407,31.666666666666664 410.1348546788932,40.68524269666695 "
stroke="#000000"
stroke-width="0"
>
<animate
attributeName="opacity"
begin="indefinite"
dur="0.2"
fill="freeze"
to="1"
></animate>
</polygon>
</g>
</svg>
`;
exports[`use various parts of svg-edit > check tool_star #0`] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
width="640"
height="480"
id="svgcontent"
overflow="visible"
x="640"
y="480"
viewBox="0 0 640 480"
>
<g class="layer" style="pointer-events:all">
<title style="pointer-events:inherit">Layer 1</title>
<rect
id="rect"
fill="#FF0000"
height="70"
stroke="#000000"
stroke-width="5"
width="94"
x="69.5"
y="51.5"
style="pointer-events:inherit"
fill-opacity="1"
stroke-opacity="1"
></rect>
<text
fill="#ffff00"
stroke="#000000"
stroke-width="0"
x="116"
y="87"
id="svg_1"
font-size="24"
font-family="serif"
text-anchor="middle"
xml:space="preserve"
fill-opacity="1"
stroke-opacity="1"
font-style="italic"
font-weight="bold"
>
B
</text>
<text
fill="#000000"
stroke="#000000"
stroke-width="0"
x="136"
y="107"
font-size="24"
font-family="serif"
text-anchor="middle"
xml:space="preserve"
fill-opacity="1"
stroke-opacity="1"
id="svg_2"
transform="matrix(1 0 0 1 0 0)"
>
B
</text>
<polygon
cx="407"
cy="45"
id="svg_3"
shape="star"
point="5"
r="13.333333333333334"
radialshift=""
r2="5.333333333333334"
orient="point"
fill="#000000"
strokecolor="#000000"
strokeWidth="0"
points="407,31.666666666666664 410.1348546788932,40.68524269666695 419.68075355060205,40.87977340833403 412.0723014202408,46.64809063666639 414.83713669723295,55.78689325833263 407,50.333333333333336 399.16286330276705,55.78689325833263 401.9276985797592,46.64809063666639 394.31924644939795,40.87977340833404 403.8651453211068,40.68524269666695 407,31.666666666666664 410.1348546788932,40.68524269666695 "
stroke="#000000"
stroke-width="0"
>
<animate
attributeName="opacity"
begin="indefinite"
dur="0.2"
fill="freeze"
to="1"
></animate>
</polygon>
</g>
</svg>
`;
exports[`use various parts of svg-edit > check tool_polygon #0`] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
width="640"
height="480"
id="svgcontent"
overflow="visible"
x="640"
y="480"
viewBox="0 0 640 480"
>
<g class="layer" style="pointer-events:all">
<title style="pointer-events:inherit">Layer 1</title>
<rect
id="rect"
fill="#FF0000"
height="70"
stroke="#000000"
stroke-width="5"
width="94"
x="69.5"
y="51.5"
style="pointer-events:inherit"
fill-opacity="1"
stroke-opacity="1"
></rect>
<text
fill="#ffff00"
stroke="#000000"
stroke-width="0"
x="116"
y="87"
id="svg_1"
font-size="24"
font-family="serif"
text-anchor="middle"
xml:space="preserve"
fill-opacity="1"
stroke-opacity="1"
font-style="italic"
font-weight="bold"
>
B
</text>
<text
fill="#000000"
stroke="#000000"
stroke-width="0"
x="136"
y="107"
font-size="24"
font-family="serif"
text-anchor="middle"
xml:space="preserve"
fill-opacity="1"
stroke-opacity="1"
id="svg_2"
transform="matrix(1 0 0 1 0 0)"
>
B
</text>
<polygon
cx="407"
cy="45"
id="svg_3"
shape="star"
point="5"
r="13.333333333333334"
radialshift=""
r2="5.333333333333334"
orient="point"
fill="#000000"
strokecolor="#000000"
strokeWidth="0"
points="407,31.666666666666664 410.1348546788932,40.68524269666695 419.68075355060205,40.87977340833403 412.0723014202408,46.64809063666639 414.83713669723295,55.78689325833263 407,50.333333333333336 399.16286330276705,55.78689325833263 401.9276985797592,46.64809063666639 394.31924644939795,40.87977340833404 403.8651453211068,40.68524269666695 407,31.666666666666664 410.1348546788932,40.68524269666695 "
stroke="#000000"
stroke-width="0"
style="pointer-events:inherit"
fill-opacity="1"
stroke-opacity="1"
></polygon>
<polygon
cx="457"
cy="95"
id="svg_4"
shape="regularPoly"
sides="5"
orient="x"
edge="6.666666666666667"
fill="#000000"
strokecolor="#000000"
strokeWidth="5"
points="462.6710053890136,95 458.7524370403971,100.39344662916632 452.4120602650961,98.33333333333333 452.4120602650961,91.66666666666667 458.7524370403971,89.60655337083368 462.6710053890136,95 "
stroke="#000000"
stroke-width="5"
>
<animate
attributeName="opacity"
begin="indefinite"
dur="0.2"
fill="freeze"
to="1"
></animate>
</polygon>
</g>
</svg>
`;

16
cypress/integration/ui/clipboard.js
View File

@@ -11,13 +11,13 @@ describe('UI - Clipboard', function () {
cy.get('#tool_source').click();
cy.get('#svg_source_textarea')
.type('{selectall}')
.type('{selectall}', {force: true})
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<g class="layer">
<title>Layer 1</title>
<circle cx="100" cy="100" r="50" fill="#FF0000" id="testCircle" stroke="#000000" stroke-width="5"/>
</g>
</svg>`, {parseSpecialCharSequences: false});
</svg>`, {force: true, parseSpecialCharSequences: false});
cy.get('#tool_source_save').click();
cy.get('#testCircle').should('exist');
cy.get('#svg_1').should('not.exist');
@@ -25,20 +25,20 @@ describe('UI - Clipboard', function () {
// Copy.
cy.get('#testCircle').click().rightclick();
cy.get('#cmenu_canvas a[href="#copy"]').click();
cy.get('#cmenu_canvas a[href="#copy"]').click({force: true});
// Paste.
// Scrollbars fail to recenter in Cypress test. Works fine in reality.
// Thus forcing click is needed since workspace is mostly offscreen.
cy.get('#svgroot').rightclick({force: true});
cy.get('#cmenu_canvas a[href="#paste"]').click();
cy.get('#cmenu_canvas a[href="#paste"]').click({force: true});
cy.get('#testCircle').should('exist');
cy.get('#svg_1').should('exist');
cy.get('#svg_2').should('not.exist');
// Cut.
cy.get('#testCircle').click().rightclick();
cy.get('#cmenu_canvas a[href="#cut"]').click();
cy.get('#cmenu_canvas a[href="#cut"]').click({force: true});
cy.get('#testCircle').should('not.exist');
cy.get('#svg_1').should('exist');
cy.get('#svg_2').should('not.exist');
@@ -47,16 +47,16 @@ describe('UI - Clipboard', function () {
// Scrollbars fail to recenter in Cypress test. Works fine in reality.
// Thus forcing click is needed since workspace is mostly offscreen.
cy.get('#svgroot').rightclick({force: true});
cy.get('#cmenu_canvas a[href="#paste"]').click();
cy.get('#cmenu_canvas a[href="#paste"]').click({force: true});
cy.get('#testCircle').should('not.exist');
cy.get('#svg_1').should('exist');
cy.get('#svg_2').should('exist');
// Delete.
cy.get('#svg_2').click().rightclick();
cy.get('#cmenu_canvas a[href="#delete"]').click();
cy.get('#cmenu_canvas a[href="#delete"]').click({force: true});
cy.get('#svg_1').click().rightclick();
cy.get('#cmenu_canvas a[href="#delete"]').click();
cy.get('#cmenu_canvas a[href="#delete"]').click({force: true});
cy.get('#svg_1').should('not.exist');
cy.get('#svg_2').should('not.exist');
});

4
cypress/integration/ui/control-points.js
View File

@@ -12,11 +12,11 @@ describe('UI - Control Points', function () {
cy.get('#tool_source').click();
cy.get('#svg_source_textarea')
.type('{selectall}')
.type('{selectall}', {force: true})
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<g class="layer">
<title>Layer 1</title>
<path d="m187,194a114,62 0 1 0 219,2" fill="#FF0000" stroke="#000000" stroke-width="5"/>
<path d="m187,194a114,62 0 1 0 219,2" id="svg_1" fill="#FF0000" stroke="#000000" stroke-width="5"/>
</g>
</svg>`, {force: true, parseSpecialCharSequences: false});
cy.get('#tool_source_save').click();

2
cypress/integration/ui/issues/issue-408.js
View File

@@ -11,7 +11,7 @@ describe('Fix issue 408', function () {
it('should not throw when showing/saving svg content', function () {
cy.get('#tool_source').click();
cy.get('#svg_source_textarea')
.type('{selectall}')
.type('{selectall}', {force: true})
.type(`<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g class="layer">
<title>Layer 1</title>

20
cypress/integration/ui/scenario.js
View File

@@ -20,7 +20,7 @@ describe('use various parts of svg-edit', function () {
<title>Layer 1</title>
<rect id="rect" fill="#FF0000" height="70" stroke="#000000" stroke-width="5" width="94" x="69.5" y="51.5"/>
</g>
</svg>`, {parseSpecialCharSequences: false});
</svg>`, {force: true, parseSpecialCharSequences: false});
cy.get('#tool_source_save').click({force: true});
testSnapshot();
});
@@ -70,4 +70,22 @@ describe('use various parts of svg-edit', function () {
.click({force: true});
testSnapshot();
});
it('check tool_star', function () {
cy.get('#tool_star')
.click({force: true});
cy.get('#svgcontent')
.trigger('mousedown', {which: 1, pageX: 600, pageY: 150, force: true})
.trigger('mousemove', {which: 1, pageX: 600, pageY: 170, force: true})
.trigger('mouseup', {force: true});
cy.get('#svgcontent').toMatchSnapshot();
});
it('check tool_polygon', function () {
cy.get('#tool_polygon')
.click({force: true});
cy.get('#svgcontent')
.trigger('mousedown', {which: 1, pageX: 650, pageY: 200, force: true})
.trigger('mousemove', {which: 1, pageX: 650, pageY: 210, force: true})
.trigger('mouseup', {force: true});
cy.get('#svgcontent').toMatchSnapshot();
});
});

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

@@ -6,6 +6,7 @@ import '../../../instrumented/editor/jquery.min.js';
import {NS} from '../../../instrumented/common/namespaces.js';
import * as utilities from '../../../instrumented/common/utilities.js';
import * as pathModule from '../../../instrumented/svgcanvas/path.js';
import {Path, Segment} from '../../../instrumented/svgcanvas/path-method.js';
import {init as unitsInit} from '../../../instrumented/common/units.js';
describe('path', function () {
@@ -50,7 +51,7 @@ describe('path', function () {
const [mockPathContext, mockUtilitiesContext] = getMockContexts();
pathModule.init(mockPathContext);
utilities.init(mockUtilitiesContext);
new pathModule.Path(path); // eslint-disable-line no-new
new Path(path); // eslint-disable-line no-new
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
assert.equal(path.pathSegList.getItem(1).x, 10);
@@ -70,13 +71,13 @@ describe('path', function () {
const [mockPathContext, mockUtilitiesContext] = getMockContexts();
pathModule.init(mockPathContext);
utilities.init(mockUtilitiesContext);
new pathModule.Path(path); // eslint-disable-line no-new
new Path(path); // eslint-disable-line no-new
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
assert.equal(path.pathSegList.getItem(1).x, 10);
assert.equal(path.pathSegList.getItem(1).y, 11);
const segment = new pathModule.Segment(1, path.pathSegList.getItem(1));
const segment = new Segment(1, path.pathSegList.getItem(1));
segment.setType(SVGPathSeg.PATHSEG_LINETO_REL, [30, 31]);
assert.equal(segment.item.pathSegTypeAsLetter, 'l');
assert.equal(segment.item.x, 30);
@@ -98,8 +99,8 @@ describe('path', function () {
const [mockPathContext, mockUtilitiesContext] = getMockContexts(svg);
pathModule.init(mockPathContext);
utilities.init(mockUtilitiesContext);
const segment = new pathModule.Segment(1, path.pathSegList.getItem(1));
segment.path = new pathModule.Path(path);
const segment = new Segment(1, path.pathSegList.getItem(1));
segment.path = new Path(path);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
assert.equal(path.pathSegList.getItem(1).x1, 11);
@@ -126,13 +127,13 @@ describe('path', function () {
const [mockPathContext, mockUtilitiesContext] = getMockContexts();
pathModule.init(mockPathContext);
utilities.init(mockUtilitiesContext);
new pathModule.Path(path); // eslint-disable-line no-new
new Path(path); // eslint-disable-line no-new
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
assert.equal(path.pathSegList.getItem(1).x, 10);
assert.equal(path.pathSegList.getItem(1).y, 11);
const segment = new pathModule.Segment(1, path.pathSegList.getItem(1));
const segment = new Segment(1, path.pathSegList.getItem(1));
segment.move(-3, 4);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L');
assert.equal(path.pathSegList.getItem(1).x, 7);
@@ -146,7 +147,7 @@ describe('path', function () {
const [mockPathContext, mockUtilitiesContext] = getMockContexts();
pathModule.init(mockPathContext);
utilities.init(mockUtilitiesContext);
new pathModule.Path(path); // eslint-disable-line no-new
new Path(path); // eslint-disable-line no-new
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
assert.equal(path.pathSegList.getItem(1).x1, 11);
@@ -156,7 +157,7 @@ describe('path', function () {
assert.equal(path.pathSegList.getItem(1).x, 15);
assert.equal(path.pathSegList.getItem(1).y, 16);
const segment = new pathModule.Segment(1, path.pathSegList.getItem(1));
const segment = new Segment(1, path.pathSegList.getItem(1));
segment.moveCtrl(1, 100, -200);
assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C');
assert.equal(path.pathSegList.getItem(1).x1, 111);