From 258e2bd6a1e113a9848c1a44b5c365993b2f3a28 Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Mon, 27 Dec 2021 20:54:49 -0300 Subject: [PATCH] in progress --- .../ui/__snapshots__/scenario.js.snap | 4 +- .../ui/__snapshots__/scenario2.js.snap | 25 +++----- .../ui/__snapshots__/scenario3.js.snap | 21 ++++--- .../ui/__snapshots__/scenario4.js.snap | 18 ++---- .../ui/__snapshots__/scenario5.js.snap | 5 +- .../ui/__snapshots__/scenario6.js.snap | 8 +-- cypress/integration/ui/scenario.js | 24 ++++---- cypress/integration/ui/scenario1.js | 4 +- cypress/integration/ui/scenario2.js | 24 ++++---- cypress/integration/ui/scenario3.js | 12 ++-- cypress/integration/ui/scenario4.js | 30 +++++----- cypress/integration/ui/scenario5.js | 24 ++++---- cypress/integration/ui/scenario6.js | 24 ++++---- cypress/integration/ui/scenario7.js | 22 +++---- cypress/integration/unit/history.js | 58 +++++++++---------- cypress/integration/unit/select.js | 15 ++--- cypress/integration/unit/utilities-bbox.js | 14 ++++- .../integration/unit/utilities-performance.js | 1 - .../ext-eyedropper/ext-eyedropper.js | 8 +-- .../extensions/ext-markers/ext-markers.js | 11 ++-- .../extensions/ext-polystar/ext-polystar.js | 6 +- src/svgcanvas/blur-event.js | 11 ++-- src/svgcanvas/draw.js | 7 ++- src/svgcanvas/elem-get-set.js | 15 +++-- src/svgcanvas/path.js | 32 +++++----- src/svgcanvas/select.js | 4 +- src/svgcanvas/svgcanvas.js | 8 +-- src/svgcanvas/undo.js | 3 +- 28 files changed, 220 insertions(+), 218 deletions(-) diff --git a/cypress/integration/ui/__snapshots__/scenario.js.snap b/cypress/integration/ui/__snapshots__/scenario.js.snap index 84f6b010..9b94fa4d 100644 --- a/cypress/integration/ui/__snapshots__/scenario.js.snap +++ b/cypress/integration/ui/__snapshots__/scenario.js.snap @@ -28,9 +28,7 @@ exports[`use various parts of svg-edit > check tool_fhpath #0`] = ` fill-opacity="1" stroke-opacity="1" > - - Layer 1 - + Layer 1 `; diff --git a/cypress/integration/ui/__snapshots__/scenario2.js.snap b/cypress/integration/ui/__snapshots__/scenario2.js.snap index 241be924..a918f5e7 100644 --- a/cypress/integration/ui/__snapshots__/scenario2.js.snap +++ b/cypress/integration/ui/__snapshots__/scenario2.js.snap @@ -26,14 +26,13 @@ exports[`use all parts of svg-edit > check tool_circle #0`] = ` y="480" viewBox="0 0 640 480" > - - Layer 1 + + Layer 1 check tool_fhellipse #0`] = ` y="480" viewBox="0 0 640 480" > - - Layer 1 + + Layer 1 check tool_fhellipse #0`] = ` stroke="#000000" stroke-width="5" opacity="0.5" - style="pointer-events:inherit" cx="299" cy="169" rx="60" @@ -113,13 +110,12 @@ exports[`use all parts of svg-edit > check tool_ellipse #0`] = ` y="480" viewBox="0 0 640 480" > - - Layer 1 + + Layer 1 check tool_ellipse #0`] = ` fill="#FF0000" stroke="#000000" stroke-width="5" - style="pointer-events:inherit" cx="299" cy="169" rx="60" @@ -145,7 +140,6 @@ exports[`use all parts of svg-edit > check tool_ellipse #0`] = ` stroke="#000000" stroke-width="5" opacity="0.5" - style="pointer-events:inherit" cx="114" cy="189" rx="55" @@ -176,13 +170,12 @@ exports[`use all parts of svg-edit > check tool_circle_change_fill_color #0`] = y="480" viewBox="0 0 640 480" > - - Layer 1 + + Layer 1 check tool_circle_change_fill_color #0`] = fill="#FF0000" stroke="#000000" stroke-width="5" - style="pointer-events:inherit" cx="114" cy="189" rx="55" @@ -214,6 +206,7 @@ exports[`use all parts of svg-edit > check tool_circle_change_fill_color #0`] = id="svg_3" fill-opacity="1" stroke-opacity="1" + transform="matrix(1 0 0 1 0 0)" > diff --git a/cypress/integration/ui/__snapshots__/scenario3.js.snap b/cypress/integration/ui/__snapshots__/scenario3.js.snap index c2ba6d17..e092e9d9 100644 --- a/cypress/integration/ui/__snapshots__/scenario3.js.snap +++ b/cypress/integration/ui/__snapshots__/scenario3.js.snap @@ -26,14 +26,13 @@ exports[`use all parts of svg-edit > check tool_path #0`] = ` y="480" viewBox="0 0 640 480" > - - Layer 1 + + Layer 1 @@ -61,8 +60,8 @@ exports[`use all parts of svg-edit > check tool_path_change_node_xy #0`] = ` y="480" viewBox="0 0 640 480" > - - Layer 1 + + Layer 1 check tool_path_change_seg_type #0`] = ` y="480" viewBox="0 0 640 480" > - - Layer 1 + + Layer 1 check tool_path_change_clone_node #0`] = ` y="480" viewBox="0 0 640 480" > - - Layer 1 + + Layer 1 check tool_path_openclose #0`] = ` y="480" viewBox="0 0 640 480" > - - Layer 1 + + Layer 1 check tool_rect #0`] = ` y="480" viewBox="0 0 640 480" > - - Layer 1 + + Layer 1 check tool_fhrect #0`] = ` y="480" viewBox="0 0 640 480" > - - Layer 1 + + Layer 1 check tool_fhrect #0`] = ` stroke="#000000" stroke-width="5" opacity="0.5" - style="pointer-events:inherit" x="350" y="230" width="120" @@ -115,13 +112,12 @@ exports[`use all parts of svg-edit > check tool_square #0`] = ` y="480" viewBox="0 0 640 480" > - - Layer 1 + + Layer 1 check tool_square #0`] = ` fill="#FF0000" stroke="#000000" stroke-width="5" - style="pointer-events:inherit" x="350" y="230" width="120" @@ -148,7 +143,6 @@ exports[`use all parts of svg-edit > check tool_square #0`] = ` stroke="#000000" stroke-width="5" opacity="0.5" - style="pointer-events:inherit" x="225" y="300" width="50" diff --git a/cypress/integration/ui/__snapshots__/scenario5.js.snap b/cypress/integration/ui/__snapshots__/scenario5.js.snap index 1310702f..11da7857 100644 --- a/cypress/integration/ui/__snapshots__/scenario5.js.snap +++ b/cypress/integration/ui/__snapshots__/scenario5.js.snap @@ -26,14 +26,13 @@ exports[`use all parts of svg-edit > check tool_line #0`] = ` y="480" viewBox="0 0 640 480" > - - Layer 1 + + Layer 1 check tool_polygon_clone #0`] = ` y="480" viewBox="0 0 640 480" > - - Layer 1 + + Layer 1 check tool_polygon_clone #0`] = ` edge="63.333333333333336" fill="#FF0000" strokecolor="#000000" - strokeWidth="5" + strokewidth="5" points="378.87455119562924,250 341.6481518837726,301.23774297708 281.41457251841285,281.6666666666667 281.4145725184128,218.33333333333334 341.6481518837726,198.76225702291998 378.87455119562924,250 " stroke="#000000" stroke-width="5" @@ -95,7 +95,7 @@ exports[`use all parts of svg-edit > check tool_polygon_clone #0`] = ` edge="63.333333333333336" fill="#FF0000" strokecolor="#000000" - strokeWidth="5" + strokewidth="5" points="398.8745422363281,270 361.6481628417969,321.23773193359375 301.4145812988281,301.6666564941406 301.4145812988281,238.3333282470703 361.6481628417969,218.7622528076172 398.8745422363281,270 " stroke="#000000" stroke-width="5" diff --git a/cypress/integration/ui/scenario.js b/cypress/integration/ui/scenario.js index 4412b614..4a0c23f7 100644 --- a/cypress/integration/ui/scenario.js +++ b/cypress/integration/ui/scenario.js @@ -31,7 +31,7 @@ describe('use various parts of svg-edit', function () { .trigger('mousedown', 200, 200, { force: true }) .trigger('mousemove', 20, 20, { force: true }) .trigger('mouseup', { force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_text', function () { cy.get('#tool_text') @@ -54,6 +54,8 @@ describe('use various parts of svg-edit', function () { cy.get('#svg_1').click({ force: true }); cy.get('#tool_italic') .click({ force: true }); + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(500); testSnapshot(); }); it('check tool_bold', function () { @@ -72,7 +74,7 @@ describe('use various parts of svg-edit', function () { cy.get('#selected_y').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_text_change_font_size', function () { cy.get('#svg_1').click({ force: true }); @@ -80,13 +82,13 @@ describe('use various parts of svg-edit', function () { cy.get('#font_size').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_text_change_stroke_width', function () { cy.get('#svg_1').click({ force: true }); cy.get('#stroke_width').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_text_change_stoke_fill_color', function () { cy.get('#svg_1').click({ force: true }); @@ -104,7 +106,7 @@ describe('use various parts of svg-edit', function () { cy.get('#fill_color').shadow().find('#color_picker').eq(0) .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0) .find('#Ok').eq(0).click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_text_anchor_start', function () { cy.get('#svg_1').click({ force: true }); @@ -130,7 +132,7 @@ describe('use various parts of svg-edit', function () { cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_text_change_blur', function () { cy.get('#svg_2').click({ force: true }); @@ -138,7 +140,7 @@ describe('use various parts of svg-edit', function () { cy.get('#blur').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_text_change_opacity', function () { cy.get('#svg_2').click({ force: true }); @@ -146,14 +148,14 @@ describe('use various parts of svg-edit', function () { cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_text_align_to_page', function () { cy.get('#svg_2').click({ force: true }); cy.get('#tool_position').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened'); cy.get('#tool_position').find('se-list-item').eq(2).shadow().find('elix-option').eq(0) .click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_text_change_class', function () { cy.get('#svg_2').click({ force: true }); @@ -178,11 +180,11 @@ describe('use various parts of svg-edit', function () { it('check tool_text_delete', function () { cy.get('#svg_2_id').click({ force: true }); cy.get('#tool_delete').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_text_change_font_family', function () { cy.get('#svg_1').click({ force: true }); cy.get('#tool_font_family').shadow().find('select').select("Serif"); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); }); diff --git a/cypress/integration/ui/scenario1.js b/cypress/integration/ui/scenario1.js index a6567cc0..55aaa2a3 100644 --- a/cypress/integration/ui/scenario1.js +++ b/cypress/integration/ui/scenario1.js @@ -35,7 +35,7 @@ describe('use all parts of svg-edit', function () { .trigger('mousedown') .trigger('mousemove', 20, 20, { force: true }) .trigger('mouseup', { force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_image', function () { cy.get('#tool_image').click({ force: true }); @@ -50,6 +50,6 @@ describe('use all parts of svg-edit', function () { cy.stub($win, 'prompt').returns('./images/logo.svg'); cy.contains('OK'); }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); }); diff --git a/cypress/integration/ui/scenario2.js b/cypress/integration/ui/scenario2.js index c16a71be..5390b972 100644 --- a/cypress/integration/ui/scenario2.js +++ b/cypress/integration/ui/scenario2.js @@ -30,7 +30,7 @@ describe('use all parts of svg-edit', function () { .trigger('mousedown', 150, 150, { force: true }) .trigger('mousemove', 250, 200, { force: true }) .trigger('mouseup', { force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_fhellipse', function () { cy.get('#tool_fhellipse') @@ -42,7 +42,7 @@ describe('use all parts of svg-edit', function () { .trigger('mousemove', 200, 180, { force: true }) .trigger('mousemove', 200, 80, { force: true }) .trigger('mouseup', 200, 80, { force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_ellipse', function () { cy.get('#tool_ellipse').click({ force: true }); @@ -50,13 +50,13 @@ describe('use all parts of svg-edit', function () { .trigger('mousedown', 75, 150, { force: true }) .trigger('mousemove', 130, 175, { force: true }) .trigger('mouseup', { force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_circle_change_fill_color', function () { cy.get('#svg_2').click({ force: true }); cy.get('#js-se-palette').find('.square').eq(8) .click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_circle_change_opacity', function () { cy.get('#svg_2').click({ force: true }); @@ -64,7 +64,7 @@ describe('use all parts of svg-edit', function () { cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_ellipse_change_rotation', function () { cy.get('#svg_3').click({ force: true }); @@ -72,7 +72,7 @@ describe('use all parts of svg-edit', function () { cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_ellipse_change_blur', function () { cy.get('#svg_3').click({ force: true }); @@ -80,7 +80,7 @@ describe('use all parts of svg-edit', function () { cy.get('#blur').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_ellipse_change_cx_cy_coordinate', function () { cy.get('#svg_3').click({ force: true }); @@ -92,7 +92,7 @@ describe('use all parts of svg-edit', function () { cy.get('#ellipse_cy').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_ellipse_change_rx_ry_radius', function () { cy.get('#svg_3').click({ force: true }); @@ -104,21 +104,21 @@ describe('use all parts of svg-edit', function () { cy.get('#ellipse_ry').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_ellipse_bring_to_back', function () { cy.get('#svg_2').click({ force: true }); cy.get('#tool_move_bottom').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_ellipse_bring_to_front', function () { cy.get('#svg_2').click({ force: true }); cy.get('#tool_move_top').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_ellipse_clone', function () { cy.get('#svg_2').click({ force: true }); cy.get('#tool_clone').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); }); diff --git a/cypress/integration/ui/scenario3.js b/cypress/integration/ui/scenario3.js index a8aaebf7..496d340c 100644 --- a/cypress/integration/ui/scenario3.js +++ b/cypress/integration/ui/scenario3.js @@ -38,7 +38,7 @@ describe('use all parts of svg-edit', function () { .trigger('mousemove', 0, 0, { force: true }) .trigger('mousedown', 0, 0, { force: true }) .trigger('mouseup', { force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_path_change_node_xy', function () { cy.get('#svg_1').click({ force: true }); @@ -51,7 +51,7 @@ describe('use all parts of svg-edit', function () { cy.get('#path_node_y').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_path_change_seg_type', function () { cy.get('#svg_1').click({ force: true }); @@ -61,7 +61,7 @@ describe('use all parts of svg-edit', function () { .trigger('mousedown', { force: true }) .trigger('mousemove', 130, 175, { force: true }) .trigger('mouseup', { force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_path_change_clone_node', function () { cy.get('#svg_1').click({ force: true }); @@ -71,14 +71,14 @@ describe('use all parts of svg-edit', function () { .trigger('mousedown', { force: true }) .trigger('mousemove', 130, 175, { force: true }) .trigger('mouseup', { force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_path_openclose', function () { cy.get('#tool_select').click({ force: true }); cy.get('#svg_1').click({ force: true }); cy.get('#svg_1').dblclick({ force: true }); cy.get('#tool_openclose_path').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); /* it('check tool_path_add_subpath', function () { cy.get('#tool_add_subpath').click({ force: true }); @@ -95,6 +95,6 @@ describe('use all parts of svg-edit', function () { .trigger('mousedown', 0, 0, { force: true }) .trigger('mouseup', { force: true }); cy.get('#tool_select').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); */ }); diff --git a/cypress/integration/ui/scenario4.js b/cypress/integration/ui/scenario4.js index 36b52d98..51e0bea5 100644 --- a/cypress/integration/ui/scenario4.js +++ b/cypress/integration/ui/scenario4.js @@ -30,7 +30,7 @@ describe('use all parts of svg-edit', function () { .trigger('mousedown', 150, 150, { force: true }) .trigger('mousemove', 250, 200, { force: true }) .trigger('mouseup', { force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_fhrect', function () { cy.get('#tool_fhrect') @@ -42,7 +42,7 @@ describe('use all parts of svg-edit', function () { .trigger('mousemove', 200, 180, { force: true }) .trigger('mousemove', 200, 80, { force: true }) .trigger('mouseup', 200, 80, { force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_square', function () { cy.get('#tool_square').click({ force: true }); @@ -50,13 +50,13 @@ describe('use all parts of svg-edit', function () { .trigger('mousedown', 75, 150, { force: true }) .trigger('mousemove', 125, 200, { force: true }) .trigger('mouseup', { force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_rect_change_fill_color', function () { cy.get('#svg_1').click({ force: true }); cy.get('#js-se-palette').find('.square').eq(8) .click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_rect_change_rotation', function () { cy.get('#svg_1').click({ force: true }); @@ -64,7 +64,7 @@ describe('use all parts of svg-edit', function () { cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_rect_change_blur', function () { cy.get('#svg_1').click({ force: true }); @@ -72,7 +72,7 @@ describe('use all parts of svg-edit', function () { cy.get('#blur').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_rect_change_opacity', function () { cy.get('#svg_1').click({ force: true }); @@ -80,7 +80,7 @@ describe('use all parts of svg-edit', function () { cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_fhrect_change_x_y_coordinate', function () { cy.get('#svg_2').click({ force: true }); @@ -92,7 +92,7 @@ describe('use all parts of svg-edit', function () { cy.get('#selected_y').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_fhrect_change_width_height', function () { cy.get('#svg_2').click({ force: true }); @@ -104,22 +104,22 @@ describe('use all parts of svg-edit', function () { cy.get('#rect_height').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_square_clone', function () { cy.get('#svg_3').click({ force: true }); cy.get('#tool_clone').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_square_bring_to_back', function () { cy.get('#svg_3').click({ force: true }); cy.get('#tool_move_bottom').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_square_bring_to_front', function () { cy.get('#svg_3').click({ force: true }); cy.get('#tool_move_top').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_square_change_corner_radius', function () { cy.get('#svg_4').click({ force: true }); @@ -127,19 +127,19 @@ describe('use all parts of svg-edit', function () { cy.get('#rect_rx').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_rect_change_to_path', function () { cy.get('#svg_2').click({ force: true }); cy.get('#tool_topath').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_rect_delete', function () { cy.get('#svg_1').click({ force: true }); cy.get('#tool_delete').click({ force: true }); cy.get('#svg_3').click({ force: true }); cy.get('#tool_delete').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_rect_change_class', function () { cy.get('#svg_2').click({ force: true }); diff --git a/cypress/integration/ui/scenario5.js b/cypress/integration/ui/scenario5.js index efa7eb78..e6b5fd7f 100644 --- a/cypress/integration/ui/scenario5.js +++ b/cypress/integration/ui/scenario5.js @@ -31,7 +31,7 @@ describe('use all parts of svg-edit', function () { .trigger('mousedown', 200, 200, { force: true }) .trigger('mousemove', 250, 250, { force: true }) .trigger('mouseup', { force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_line_change_class', function () { cy.get('#svg_1').click({ force: true }); @@ -59,7 +59,7 @@ describe('use all parts of svg-edit', function () { cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_line_change_blur', function () { cy.get('#svg_1_id').click({ force: true }); @@ -67,7 +67,7 @@ describe('use all parts of svg-edit', function () { cy.get('#blur').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_line_change_opacity', function () { cy.get('#svg_1_id').click({ force: true }); @@ -75,12 +75,12 @@ describe('use all parts of svg-edit', function () { cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_line_delete', function () { cy.get('#svg_1_id').click({ force: true }); cy.get('#tool_delete').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_line_clone', function () { cy.get('#tool_line') @@ -92,17 +92,17 @@ describe('use all parts of svg-edit', function () { .trigger('mouseup', { force: true }); cy.get('#svg_2').click({ force: true }); cy.get('#tool_clone').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_line_bring_to_back', function () { cy.get('#svg_2').click({ force: true }); cy.get('#tool_move_bottom').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_line_bring_to_front', function () { cy.get('#svg_2').click({ force: true }); cy.get('#tool_move_top').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_line_change_x_y_coordinate', function () { cy.get('#svg_2').click({ force: true }); @@ -122,7 +122,7 @@ describe('use all parts of svg-edit', function () { cy.get('#line_y2').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_line_change_stroke_width', function () { cy.get('#svg_2').click({ force: true }); @@ -130,7 +130,7 @@ describe('use all parts of svg-edit', function () { cy.get('#stroke_width').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_line_change_stoke_color', function () { cy.get('#svg_3').click({ force: true }); @@ -141,13 +141,13 @@ describe('use all parts of svg-edit', function () { cy.get('#stroke_color').shadow().find('#color_picker').eq(0) .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0) .find('#Ok').eq(0).click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_line_align_to_page', function () { cy.get('#svg_3').click({ force: true }); cy.get('#tool_position').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened'); cy.get('#tool_position').find('se-list-item').eq(2).shadow().find('elix-option').eq(0) .click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); }); diff --git a/cypress/integration/ui/scenario6.js b/cypress/integration/ui/scenario6.js index 1f6e749d..992393de 100644 --- a/cypress/integration/ui/scenario6.js +++ b/cypress/integration/ui/scenario6.js @@ -35,7 +35,7 @@ describe('use all parts of svg-edit', function () { it('check tool_polygon_clone', function () { cy.get('#svg_1').click({ force: true }); cy.get('#tool_clone').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_polygon_change_class', function () { cy.get('#svg_2').click({ force: true }); @@ -63,7 +63,7 @@ describe('use all parts of svg-edit', function () { cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_polygon_change_blur', function () { cy.get('#svg_2_id').click({ force: true }); @@ -71,7 +71,7 @@ describe('use all parts of svg-edit', function () { cy.get('#blur').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_polygon_change_opacity', function () { cy.get('#svg_2_id').click({ force: true }); @@ -79,29 +79,29 @@ describe('use all parts of svg-edit', function () { cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_polygon_bring_to_back', function () { cy.get('#svg_2_id').click({ force: true }); cy.get('#tool_move_bottom').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_polygon_bring_to_front', function () { cy.get('#svg_2_id').click({ force: true }); cy.get('#tool_move_top').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_polygon_delete', function () { cy.get('#svg_2_id').click({ force: true }); cy.get('#tool_delete').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_polygon_align_to_page', function () { cy.get('#svg_1').click({ force: true }); cy.get('#tool_position').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened'); cy.get('#tool_position').find('se-list-item').eq(0).shadow().find('elix-option').eq(0) .click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); /* it('check tool_polygon_change_x_y_coordinate', function () { cy.get('#svg_1').click({ force: true }); @@ -113,7 +113,7 @@ describe('use all parts of svg-edit', function () { cy.get('#selected_y').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); */ it('check tool_polygon_change_stroke_width', function () { cy.get('#svg_1').click({ force: true }); @@ -121,7 +121,7 @@ describe('use all parts of svg-edit', function () { cy.get('#stroke_width').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_polygon_change_stoke_fill_color', function () { cy.get('#svg_1').click({ force: true }); @@ -139,12 +139,12 @@ describe('use all parts of svg-edit', function () { cy.get('#fill_color').shadow().find('#color_picker').eq(0) .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0) .find('#Ok').eq(0).click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_polygon_change_sides', function () { cy.get('#svg_1').click({ force: true }); cy.get('#polySides').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); }); diff --git a/cypress/integration/ui/scenario7.js b/cypress/integration/ui/scenario7.js index 5ba4cde1..f2925506 100644 --- a/cypress/integration/ui/scenario7.js +++ b/cypress/integration/ui/scenario7.js @@ -35,7 +35,7 @@ describe('use all parts of svg-edit', function () { it('check tool_star_clone', function () { cy.get('#svg_1').click({ force: true }); cy.get('#tool_clone').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_star_change_class', function () { cy.get('#svg_2').click({ force: true }); @@ -63,7 +63,7 @@ describe('use all parts of svg-edit', function () { cy.get('#angle').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_star_change_blur', function () { cy.get('#svg_2_id').click({ force: true }); @@ -71,7 +71,7 @@ describe('use all parts of svg-edit', function () { cy.get('#blur').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_star_change_opacity', function () { cy.get('#svg_2_id').click({ force: true }); @@ -79,29 +79,29 @@ describe('use all parts of svg-edit', function () { cy.get('#opacity').shadow().find('elix-number-spin-box').eq(0).shadow().find('#downButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_star_bring_to_back', function () { cy.get('#svg_2_id').click({ force: true }); cy.get('#tool_move_bottom').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_star_bring_to_front', function () { cy.get('#svg_2_id').click({ force: true }); cy.get('#tool_move_top').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_star_delete', function () { cy.get('#svg_2_id').click({ force: true }); cy.get('#tool_delete').click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_star_align_to_page', function () { cy.get('#svg_1').click({ force: true }); cy.get('#tool_position').shadow().find('elix-dropdown-list').eq(0).invoke('attr', 'opened', 'opened'); cy.get('#tool_position').find('se-list-item').eq(0).shadow().find('elix-option').eq(0) .click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_star_change_stroke_width', function () { cy.get('#svg_1').click({ force: true }); @@ -109,7 +109,7 @@ describe('use all parts of svg-edit', function () { cy.get('#stroke_width').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); } - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_star_change_stoke_fill_color', function () { cy.get('#svg_1').click({ force: true }); @@ -127,12 +127,12 @@ describe('use all parts of svg-edit', function () { cy.get('#fill_color').shadow().find('#color_picker').eq(0) .find('#jGraduate_colPick').eq(0).find('#jPicker-table').eq(0) .find('#Ok').eq(0).click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); it('check tool_star_change_sides', function () { cy.get('#svg_1').click({ force: true }); cy.get('#starNumPoints').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0) .click({ force: true }); - cy.get('#svgcontent').toMatchSnapshot(); + testSnapshot(); }); }); diff --git a/cypress/integration/unit/history.js b/cypress/integration/unit/history.js index 3e6972bf..ca11d8be 100644 --- a/cypress/integration/unit/history.js +++ b/cypress/integration/unit/history.js @@ -1,6 +1,6 @@ import { NS } from '../../../instrumented/svgcanvas/namespaces.js'; import * as utilities from '../../../instrumented/svgcanvas/utilities.js'; -import * as hstory from '../../../instrumented/svgcanvas/history.js'; +import * as history from '../../../instrumented/svgcanvas/history.js'; describe('history', function () { // TODO(codedread): Write tests for handling history events. @@ -14,7 +14,7 @@ describe('history', function () { // const svg = document.createElementNS(NS.SVG, 'svg'); let undoMgr = null; - class MockCommand extends hstory.Command { + class MockCommand extends history.Command { constructor (optText) { super(); this.text = optText; @@ -39,7 +39,7 @@ describe('history', function () { * @returns {void} */ beforeEach(function () { - undoMgr = new hstory.UndoManager(); + undoMgr = new history.UndoManager(); document.body.textContent = ''; this.divparent = document.createElement('div'); @@ -69,19 +69,19 @@ describe('history', function () { }); it('Test svgedit.history package', function () { - assert.ok(hstory); - assert.ok(hstory.MoveElementCommand); - assert.ok(hstory.InsertElementCommand); - assert.ok(hstory.ChangeElementCommand); - assert.ok(hstory.RemoveElementCommand); - assert.ok(hstory.BatchCommand); - assert.ok(hstory.UndoManager); - assert.equal(typeof hstory.MoveElementCommand, typeof function () { /* empty fn */ }); - assert.equal(typeof hstory.InsertElementCommand, typeof function () { /* empty fn */ }); - assert.equal(typeof hstory.ChangeElementCommand, typeof function () { /* empty fn */ }); - assert.equal(typeof hstory.RemoveElementCommand, typeof function () { /* empty fn */ }); - assert.equal(typeof hstory.BatchCommand, typeof function () { /* empty fn */ }); - assert.equal(typeof hstory.UndoManager, typeof function () { /* empty fn */ }); + assert.ok(history); + assert.ok(history.MoveElementCommand); + assert.ok(history.InsertElementCommand); + assert.ok(history.ChangeElementCommand); + assert.ok(history.RemoveElementCommand); + assert.ok(history.BatchCommand); + assert.ok(history.UndoManager); + assert.equal(typeof history.MoveElementCommand, typeof function () { /* empty fn */ }); + assert.equal(typeof history.InsertElementCommand, typeof function () { /* empty fn */ }); + assert.equal(typeof history.ChangeElementCommand, typeof function () { /* empty fn */ }); + assert.equal(typeof history.RemoveElementCommand, typeof function () { /* empty fn */ }); + assert.equal(typeof history.BatchCommand, typeof function () { /* empty fn */ }); + assert.equal(typeof history.UndoManager, typeof function () { /* empty fn */ }); }); it('Test UndoManager methods', function () { @@ -275,7 +275,7 @@ describe('history', function () { }); it('Test MoveElementCommand', function () { - let move = new hstory.MoveElementCommand(this.div3, this.div1, this.divparent); + let move = new history.MoveElementCommand(this.div3, this.div1, this.divparent); assert.ok(move.unapply); assert.ok(move.apply); assert.equal(typeof move.unapply, typeof function () { /* empty fn */ }); @@ -291,7 +291,7 @@ describe('history', function () { assert.equal(this.divparent.firstElementChild.nextElementSibling, this.div2); assert.equal(this.divparent.lastElementChild, this.div3); - move = new hstory.MoveElementCommand(this.div1, null, this.divparent); + move = new history.MoveElementCommand(this.div1, null, this.divparent); move.unapply(); assert.equal(this.divparent.firstElementChild, this.div2); @@ -303,7 +303,7 @@ describe('history', function () { assert.equal(this.divparent.firstElementChild.nextElementSibling, this.div2); assert.equal(this.divparent.lastElementChild, this.div3); - move = new hstory.MoveElementCommand(this.div2, this.div5, this.div4); + move = new history.MoveElementCommand(this.div2, this.div5, this.div4); move.unapply(); assert.equal(this.divparent.firstElementChild, this.div1); @@ -321,7 +321,7 @@ describe('history', function () { }); it('Test InsertElementCommand', function () { - let insert = new hstory.InsertElementCommand(this.div3); + let insert = new history.InsertElementCommand(this.div3); assert.ok(insert.unapply); assert.ok(insert.apply); assert.equal(typeof insert.unapply, typeof function () { /* empty fn */ }); @@ -339,7 +339,7 @@ describe('history', function () { assert.equal(this.div1.nextElementSibling, this.div2); assert.equal(this.div2.nextElementSibling, this.div3); - insert = new hstory.InsertElementCommand(this.div2); + insert = new history.InsertElementCommand(this.div2); insert.unapply(); assert.equal(this.divparent.childElementCount, 2); @@ -358,7 +358,7 @@ describe('history', function () { const div6 = document.createElement('div'); div6.id = 'div6'; - let remove = new hstory.RemoveElementCommand(div6, null, this.divparent); + let remove = new history.RemoveElementCommand(div6, null, this.divparent); assert.ok(remove.unapply); assert.ok(remove.apply); assert.equal(typeof remove.unapply, typeof function () { /* empty fn */ }); @@ -377,7 +377,7 @@ describe('history', function () { assert.equal(this.div1.nextElementSibling, this.div2); assert.equal(this.div2.nextElementSibling, this.div3); - remove = new hstory.RemoveElementCommand(div6, this.div2, this.divparent); + remove = new history.RemoveElementCommand(div6, this.div2, this.divparent); remove.unapply(); assert.equal(this.divparent.childElementCount, 4); @@ -395,7 +395,7 @@ describe('history', function () { it('Test ChangeElementCommand', function () { this.div1.setAttribute('title', 'new title'); - let change = new hstory.ChangeElementCommand(this.div1, + let change = new history.ChangeElementCommand(this.div1, { title: 'old title', class: 'foo' }); assert.ok(change.unapply); assert.ok(change.apply); @@ -411,7 +411,7 @@ describe('history', function () { assert.ok(!this.div1.getAttribute('class')); this.div1.textContent = 'inner text'; - change = new hstory.ChangeElementCommand(this.div1, + change = new history.ChangeElementCommand(this.div1, { '#text': null }); change.unapply(); @@ -421,7 +421,7 @@ describe('history', function () { assert.equal(this.div1.textContent, 'inner text'); this.div1.textContent = ''; - change = new hstory.ChangeElementCommand(this.div1, + change = new history.ChangeElementCommand(this.div1, { '#text': 'old text' }); change.unapply(); @@ -450,7 +450,7 @@ describe('history', function () { }); gethrefvalue = '#newhref'; - change = new hstory.ChangeElementCommand(rect, + change = new history.ChangeElementCommand(rect, { '#href': '#oldhref' }); assert.equal(justCalled, 'getHref'); @@ -466,7 +466,7 @@ describe('history', function () { const line = document.createElementNS(NS.SVG, 'line'); line.setAttribute('class', 'newClass'); - change = new hstory.ChangeElementCommand(line, { class: 'oldClass' }); + change = new history.ChangeElementCommand(line, { class: 'oldClass' }); assert.ok(change.unapply); assert.ok(change.apply); @@ -484,7 +484,7 @@ describe('history', function () { let concatResult = ''; MockCommand.prototype.apply = function () { concatResult += this.text; }; - const batch = new hstory.BatchCommand(); + const batch = new history.BatchCommand(); assert.ok(batch.unapply); assert.ok(batch.apply); assert.ok(batch.addSubCommand); diff --git a/cypress/integration/unit/select.js b/cypress/integration/unit/select.js index bd37c9fd..5e796ffa 100644 --- a/cypress/integration/unit/select.js +++ b/cypress/integration/unit/select.js @@ -36,7 +36,8 @@ describe('select', function () { /** * @implements {module:select.SVGFactory} */ - const mockFactory = { + const mockSvgCanvas = { + curConfig: mockConfig, createSVGElement (jsonMap) { const elem = document.createElementNS(NS.SVG, jsonMap.element); Object.entries(jsonMap.attr).forEach(([ attr, value ]) => { @@ -44,8 +45,8 @@ describe('select', function () { }); return elem; }, - svgRoot () { return svgroot; }, - svgContent () { return svgContent; }, + getSvgRoot () { return svgroot; }, + getSvgContent () { return svgContent; }, getDataStorage () { return dataStorage; } }; @@ -54,18 +55,18 @@ describe('select', function () { * @returns {void} */ beforeEach(() => { - svgroot = mockFactory.createSVGElement({ + svgroot = mockSvgCanvas.createSVGElement({ element: 'svg', attr: { id: 'svgroot' } }); - svgContent = mockFactory.createSVGElement({ + svgContent = mockSvgCanvas.createSVGElement({ element: 'svg', attr: { id: 'svgcontent' } }); svgroot.append(svgContent); /* const rect = */ svgContent.append( - mockFactory.createSVGElement({ + mockSvgCanvas.createSVGElement({ element: 'rect', attr: { id: 'rect', @@ -117,7 +118,7 @@ describe('select', function () { assert.equal(svgroot.childNodes.item(0), svgContent); assert.ok(!svgroot.querySelector('#selectorParentGroup')); - select.init(mockConfig, mockFactory); + select.init(mockSvgCanvas); assert.equal(svgroot.childNodes.length, 3); diff --git a/cypress/integration/unit/utilities-bbox.js b/cypress/integration/unit/utilities-bbox.js index 68ac4511..40786c82 100644 --- a/cypress/integration/unit/utilities-bbox.js +++ b/cypress/integration/unit/utilities-bbox.js @@ -60,7 +60,6 @@ describe('utilities bbox', function () { }); path.replacePathSeg(type, i, pts, pth); } - // path.reorientGrads(pth, m); return undefined; } }; @@ -82,7 +81,18 @@ describe('utilities bbox', function () { }); sandbox.append(svgroot); - path.init(null); + const mockSvgCanvas = { + createSVGElement (jsonMap) { + const elem = document.createElementNS(NS.SVG, jsonMap.element); + Object.entries(jsonMap.attr).forEach(([ attr, value ]) => { + elem.setAttribute(attr, value); + }); + return elem; + }, + getSvgRoot () { return svgroot; } + }; + + path.init(mockSvgCanvas); mockaddSVGElemensFromJsonCallCount = 0; }); diff --git a/cypress/integration/unit/utilities-performance.js b/cypress/integration/unit/utilities-performance.js index 72ab0efa..b095b8f2 100644 --- a/cypress/integration/unit/utilities-performance.js +++ b/cypress/integration/unit/utilities-performance.js @@ -144,7 +144,6 @@ describe('utilities performance', function () { // path.replacePathSeg(type, i, pts, path); } - // utilities.reorientGrads(path, m); return undefined; } }; diff --git a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js index 32ccda77..4cfb7deb 100644 --- a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js +++ b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js @@ -25,12 +25,12 @@ const loadExtensionTranslation = async function (svgEditor) { export default { name, - async init(S) { + async init() { const svgEditor = this; - await loadExtensionTranslation(svgEditor); - const { ChangeElementCommand } = S; - // svgdoc = S.svgroot.parentNode.ownerDocument, const { svgCanvas } = svgEditor; + await loadExtensionTranslation(svgEditor); + const { ChangeElementCommand } = svgCanvas.history; + // svgdoc = S.svgroot.parentNode.ownerDocument, const addToHistory = function (cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); }; const currentStyle = { fillPaint: 'red', fillOpacity: 1.0, diff --git a/src/editor/extensions/ext-markers/ext-markers.js b/src/editor/extensions/ext-markers/ext-markers.js index 227f67de..fe2e5649 100644 --- a/src/editor/extensions/ext-markers/ext-markers.js +++ b/src/editor/extensions/ext-markers/ext-markers.js @@ -29,9 +29,10 @@ export default { name: 'markers', - async init (S) { + async init () { const svgEditor = this; const { svgCanvas } = svgEditor; + const { BatchCommand, RemoveElementCommand, InsertElementCommand } = svgCanvas.history; const { $id, addSVGElemensFromJson: addElem } = svgCanvas; const mtypes = [ 'start', 'mid', 'end' ]; const markerElems = [ 'line', 'path', 'polyline', 'polygon' ]; @@ -182,16 +183,16 @@ export default { if (m) { pline.setAttribute(nam, elem.getAttribute(nam)); } }); - const batchCmd = new S.BatchCommand(); - batchCmd.addSubCommand(new S.RemoveElementCommand(elem, elem.parentNode)); - batchCmd.addSubCommand(new S.InsertElementCommand(pline)); + const batchCmd = new BatchCommand(); + batchCmd.addSubCommand(new RemoveElementCommand(elem, elem.parentNode)); + batchCmd.addSubCommand(new InsertElementCommand(pline)); elem.insertAdjacentElement('afterend', pline); elem.remove(); svgCanvas.clearSelection(); pline.id = id; svgCanvas.addToSelection([ pline ]); - S.addCommandToHistory(batchCmd); + svgCanvas.addCommandToHistory(batchCmd); return pline; }; diff --git a/src/editor/extensions/ext-polystar/ext-polystar.js b/src/editor/extensions/ext-polystar/ext-polystar.js index 9ecfdd15..4b21abb0 100644 --- a/src/editor/extensions/ext-polystar/ext-polystar.js +++ b/src/editor/extensions/ext-polystar/ext-polystar.js @@ -25,11 +25,11 @@ const loadExtensionTranslation = async function (svgEditor) { export default { name, - async init(_S) { + async init() { const svgEditor = this; - const { ChangeElementCommand } = _S; // , svgcontent, - const addToHistory = function (cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); }; const { svgCanvas } = svgEditor; + const { ChangeElementCommand } = svgCanvas.history; + const addToHistory = function (cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); }; const { $id } = svgCanvas; let selElems; let started; diff --git a/src/svgcanvas/blur-event.js b/src/svgcanvas/blur-event.js index 320b910c..01bddad1 100644 --- a/src/svgcanvas/blur-event.js +++ b/src/svgcanvas/blur-event.js @@ -4,11 +4,6 @@ * @license MIT * @copyright 2011 Jeff Schiller */ -import * as hstry from './history.js'; - -const { - InsertElementCommand, ChangeElementCommand, BatchCommand -} = hstry; let svgCanvas = null; @@ -99,6 +94,10 @@ export const setBlurOffsets = function (filterElem, stdDev) { * @returns {void} */ export const setBlur = function (val, complete) { + const { + InsertElementCommand, ChangeElementCommand, BatchCommand + } = svgCanvas.history; + const selectedElements = svgCanvas.getSelectedElements(); if (svgCanvas.getCurCommand()) { finishChange(); @@ -147,7 +146,7 @@ export const setBlur = function (val, complete) { return; } - svgCanvas.changeSelectedAttributeMethod('filter', 'url(#' + elemId + '_blur)'); + svgCanvas.changeSelectedAttribute('filter', 'url(#' + elemId + '_blur)'); batchCmd.addSubCommand(new ChangeElementCommand(elem, changes)); svgCanvas.setBlurOffsets(svgCanvas.getFilter(), val); const filter = svgCanvas.getFilter(); diff --git a/src/svgcanvas/draw.js b/src/svgcanvas/draw.js index bf090259..48770ef6 100644 --- a/src/svgcanvas/draw.js +++ b/src/svgcanvas/draw.js @@ -15,9 +15,6 @@ import { import { copyElem as utilCopyElem } from './copy-elem.js'; -import { - BatchCommand, RemoveElementCommand, MoveElementCommand, ChangeElementCommand -} from './history.js'; import { getParentsUntil } from '../editor/components/jgraduate/Util.js'; const visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use'.split(','); @@ -817,6 +814,7 @@ export const cloneLayer = function (name, hrService) { * @returns {boolean} `true` if an old layer group was found to delete */ export const deleteCurrentLayer = function () { + const { BatchCommand, RemoveElementCommand } = svgCanvas.history; let currentLayer = svgCanvas.getCurrentDrawing().getCurrentLayer(); const { nextSibling } = currentLayer; const parent = currentLayer.parentNode; @@ -880,6 +878,7 @@ export const renameCurrentLayer = function (newName) { * @returns {boolean} `true` if the current layer position was changed, `false` otherwise. */ export const setCurrentLayerPosition = function (newPos) { + const { MoveElementCommand } = svgCanvas.history; const drawing = svgCanvas.getCurrentDrawing(); const result = drawing.setCurrentLayerPosition(newPos); if (result) { @@ -898,6 +897,7 @@ export const setCurrentLayerPosition = function (newPos) { * @returns {boolean} true if the layer's visibility was set, false otherwise */ export const setLayerVisibility = function (layerName, bVisible) { + const { ChangeElementCommand } = svgCanvas.history; const drawing = svgCanvas.getCurrentDrawing(); const prevVisibility = drawing.getLayerVisibility(layerName); const layer = drawing.setLayerVisibility(layerName, bVisible); @@ -924,6 +924,7 @@ export const setLayerVisibility = function (layerName, bVisible) { * @returns {boolean} Whether the selected elements were moved to the layer. */ export const moveSelectedToLayer = function (layerName) { + const { BatchCommand, MoveElementCommand } = svgCanvas.history; // find the layer const drawing = svgCanvas.getCurrentDrawing(); const layer = drawing.getLayerByName(layerName); diff --git a/src/svgcanvas/elem-get-set.js b/src/svgcanvas/elem-get-set.js index 5f2682a8..8dbca9e0 100644 --- a/src/svgcanvas/elem-get-set.js +++ b/src/svgcanvas/elem-get-set.js @@ -5,7 +5,6 @@ */ import { jGraduate } from '../editor/components/jgraduate/jQuery.jGraduate.js'; -import * as hstry from './history.js'; import { NS } from './namespaces.js'; import { getVisibleElements, getStrokedBBoxDefaultVisible, findDefs, @@ -16,11 +15,6 @@ import { } from '../common/units.js'; import { getParents } from '../editor/components/jgraduate/Util.js'; -const { - InsertElementCommand, RemoveElementCommand, - ChangeElementCommand, BatchCommand -} = hstry; - let svgCanvas = null; /** @@ -81,6 +75,10 @@ export const getTitleMethod = function (elem) { * @returns {void} */ export const setGroupTitleMethod = function (val) { + const { + InsertElementCommand, RemoveElementCommand, + ChangeElementCommand, BatchCommand + } = svgCanvas.history; const selectedElements = svgCanvas.getSelectedElements(); const dataStorage = svgCanvas.getDataStorage(); let elem = selectedElements[0]; @@ -122,6 +120,7 @@ export const setGroupTitleMethod = function (val) { * @returns {void} */ export const setDocumentTitleMethod = function (newTitle) { + const { ChangeElementCommand, BatchCommand } = svgCanvas.history; const childs = svgCanvas.getSvgContent().childNodes; let docTitle = false; let oldTitle = ''; @@ -161,6 +160,7 @@ export const setDocumentTitleMethod = function (newTitle) { * It will fail on "fit to content" option with no content to fit to. */ export const setResolutionMethod = function (x, y) { + const { ChangeElementCommand, BatchCommand } = svgCanvas.history; const zoom = svgCanvas.getZoom(); const res = svgCanvas.getResolution(); const { w, h } = res; @@ -740,6 +740,7 @@ export const setTextContentMethod = function (val) { * @returns {void} */ export const setImageURLMethod = function (val) { + const { ChangeElementCommand, BatchCommand } = svgCanvas.history; const selectedElements = svgCanvas.getSelectedElements(); const elem = selectedElements[0]; if (!elem) { return; } @@ -788,6 +789,7 @@ export const setImageURLMethod = function (val) { * @returns {void} */ export const setLinkURLMethod = function (val) { + const { ChangeElementCommand, BatchCommand } = svgCanvas.history; const selectedElements = svgCanvas.getSelectedElements(); let elem = selectedElements[0]; if (!elem) { return; } @@ -824,6 +826,7 @@ export const setLinkURLMethod = function (val) { * @returns {void} */ export const setRectRadiusMethod = function (val) { + const { ChangeElementCommand } = svgCanvas.history; const selectedElements = svgCanvas.getSelectedElements(); const selected = selectedElements[0]; if (!isNullish(selected) && selected.tagName === 'rect') { diff --git a/src/svgcanvas/path.js b/src/svgcanvas/path.js index 43024fd7..8ad3d72d 100644 --- a/src/svgcanvas/path.js +++ b/src/svgcanvas/path.js @@ -48,7 +48,7 @@ const uiStrings = {}; * @param {module:path.uiStrings} strs * @returns {void} */ -export const setUiStrings = function (strs) { +export const setUiStrings = (strs) => { Object.assign(uiStrings, strs.ui); }; @@ -65,7 +65,7 @@ let pathData = {}; * @param {boolean} lcp * @returns {void} */ -export const setLinkControlPoints = function (lcp) { +export const setLinkControlPoints = (lcp) => { linkControlPts = lcp; }; @@ -228,7 +228,7 @@ export let path = null; * @param {module:path.EditorContext} editorContext * @returns {void} */ -export const init = function (canvas) { +export const init = (canvas) => { svgCanvas = canvas; svgCanvas.replacePathSeg = replacePathSegMethod; svgCanvas.addPointGrip = addPointGripMethod; @@ -236,8 +236,10 @@ export const init = function (canvas) { svgCanvas.getPath_ = getPath_; svgCanvas.addCtrlGrip = addCtrlGripMethod; svgCanvas.getCtrlLine = getCtrlLineMethod; + svgCanvas.getGripPt = getGripPt; svgCanvas.getPointFromGrip = getPointFromGripMethod; svgCanvas.setLinkControlPoints = setLinkControlPoints; + svgCanvas.reorientGrads = reorientGrads; svgCanvas.getSegData = () => { return segData; }; svgCanvas.getUIStrings= () => { return uiStrings; }; svgCanvas.getPathObj = () => { return path; }; @@ -249,7 +251,7 @@ export const init = function (canvas) { 'Moveto', 'Lineto', 'CurvetoCubic', 'CurvetoQuadratic', 'Arc', 'LinetoHorizontal', 'LinetoVertical', 'CurvetoCubicSmooth', 'CurvetoQuadraticSmooth' ]; - pathFuncsStrs.forEach(function(s){ + pathFuncsStrs.forEach((s) => { pathFuncs.push(s + 'Abs'); pathFuncs.push(s + 'Rel'); }); @@ -366,7 +368,7 @@ export const getSegSelector = getSegSelectorMethod; * @param {Point} pt - Object with x and y values (third point) * @returns {Point[]} Array of two "smoothed" point objects */ -export const smoothControlPoints = function (ct1, ct2, pt) { +export const smoothControlPoints = (ct1, ct2, pt) => { // each point must not be the origin const x1 = ct1.x - pt.x; const y1 = ct1.y - pt.y; @@ -412,7 +414,7 @@ export const smoothControlPoints = function (ct1, ct2, pt) { * @param {SVGPathElement} elem * @returns {module:path.Path} */ -export const getPath_ = function (elem) { +export const getPath_ = (elem) => { let p = pathData[elem.id]; if (!p) { p = pathData[elem.id] = new Path(elem); @@ -425,13 +427,13 @@ export const getPath_ = function (elem) { * @param {string} id * @returns {void} */ -export const removePath_ = function (id) { +export const removePath_ = (id) => { if (id in pathData) { delete pathData[id]; } }; let newcx; let newcy; let oldcx; let oldcy; let angle; -const getRotVals = function (x, y) { +const getRotVals = (x, y) => { let dx = x - oldcx; let dy = y - oldcy; @@ -466,7 +468,7 @@ const getRotVals = function (x, y) { * be optimized or even taken care of by `recalculateDimensions` * @returns {void} */ -export const recalcRotatedPath = function () { +export const recalcRotatedPath = () => { const currentPath = path.elem; angle = getRotationAngle(currentPath, true); if (!angle) { return; } @@ -524,7 +526,7 @@ export const recalcRotatedPath = function () { * @function module:path.clearData * @returns {void} */ -export const clearData = function () { +export const clearData = () => { pathData = {}; }; @@ -535,7 +537,7 @@ export const clearData = function () { * @param {SVGMatrix} m * @returns {void} */ -export const reorientGrads = function (elem, m) { +export const reorientGrads = (elem, m) => { const bb = utilsGetBBox(elem); for (let i = 0; i < 2; i++) { const type = i === 0 ? 'fill' : 'stroke'; @@ -596,7 +598,7 @@ const pathMap = [ * @param {boolean} toRel - true of convert to relative * @returns {string} */ -export const convertPath = function (pth, toRel) { +export const convertPath = (pth, toRel) => { const { pathSegList } = pth; const len = pathSegList.numberOfItems; let curx = 0; let cury = 0; @@ -760,8 +762,8 @@ export const convertPath = function (pth, toRel) { * @param {Integer[]} [lastPoint] - x,y point * @returns {string} */ -function pathDSegment (letter, points, morePoints, lastPoint) { - points.forEach(function(pnt, i){ +const pathDSegment = (letter, points, morePoints, lastPoint) => { + points.forEach((pnt, i) => { points[i] = shortFloat(pnt); }); let segment = letter + points.join(' '); @@ -772,7 +774,7 @@ function pathDSegment (letter, points, morePoints, lastPoint) { segment += ' ' + shortFloat(lastPoint); } return segment; -} +}; /** * Group: Path edit functions. diff --git a/src/svgcanvas/select.js b/src/svgcanvas/select.js index 893383f8..c2b9b1a5 100644 --- a/src/svgcanvas/select.js +++ b/src/svgcanvas/select.js @@ -363,7 +363,7 @@ export class SelectorManager { r: gripRadius, stroke: '#22C', 'stroke-width': 2, - style: `cursor:url(${this.curConfig.imgPath}/rotate.svg) 12 12, auto;` + style: `cursor:url(${svgCanvas.curConfig.imgPath}/rotate.svg) 12 12, auto;` } }); this.selectorGripsGroup.append(this.rotateGrip); @@ -371,7 +371,7 @@ export class SelectorManager { if (document.getElementById('canvasBackground')) { return; } - const [ width, height ] = this.curConfig.dimensions; + const [ width, height ] = svgCanvas.curConfig.dimensions; const canvasbg = svgCanvas.createSVGElement({ element: 'svg', attr: { diff --git a/src/svgcanvas/svgcanvas.js b/src/svgcanvas/svgcanvas.js index 3258b678..6428d38c 100644 --- a/src/svgcanvas/svgcanvas.js +++ b/src/svgcanvas/svgcanvas.js @@ -12,14 +12,14 @@ import { Canvg as canvg } from 'canvg'; import 'pathseg'; // SVGPathSeg Polyfill (see https://github.com/progers/pathseg) import * as pathModule from './path.js'; -import * as hstry from './history.js'; +import * as history from './history.js'; import * as draw from './draw.js'; import { init as pasteInit, pasteElementsMethod } from './paste-elem.js'; import { svgRootElement } from './svgroot.js'; import { - init as undoInit, getUndoManager, changeSelectedAttributeNoUndoMethod, + init as undoInit, changeSelectedAttributeNoUndoMethod, changeSelectedAttributeMethod } from './undo.js'; import { @@ -806,7 +806,7 @@ class SvgCanvas { }; return convertToPath( elem, attrs, this.addSVGElemensFromJson, this.pathActions, - this.clearSelection, this.addToSelection, hstry, this.addCommandToHistory + this.clearSelection, this.addToSelection, history, this.addCommandToHistory ); } /** @@ -824,7 +824,6 @@ class SvgCanvas { this.addSVGElemensFromJson = addSVGElementsFromJson; this.clearSvgContentElement = clearSvgContentElementInit; this.textActions = textActionsMethod; - this.undoMgr = getUndoManager(); this.getIntersectionList = getIntersectionListMethod; this.getStrokedBBox = getStrokedBBoxDefaultVisible; this.getVisibleElements = getVisibleElements; @@ -936,6 +935,7 @@ class SvgCanvas { this.setBlur = setBlur; // Adds/updates the blur filter to the selected element. this.smoothControlPoints = pathModule.smoothControlPoints; this.getTypeMap = getTypeMap; + this.history = history; // object with all histor methods this.NS = NS; this.$id = $id; this.$qq = $qq; diff --git a/src/svgcanvas/undo.js b/src/svgcanvas/undo.js index 7796bcbe..37756dfc 100644 --- a/src/svgcanvas/undo.js +++ b/src/svgcanvas/undo.js @@ -29,9 +29,10 @@ let svgCanvas = null; */ export const init = function (canvas) { svgCanvas = canvas; + canvas.undoMgr = getUndoManager(); }; -export const getUndoManager = function () { +export const getUndoManager = () => { return new UndoManager({ /** * @param {string} eventType One of the HistoryEvent types