in progress

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"
 >
-  <g class="layer" style="pointer-events:all">
+  <g class="layer"><title>Layer 1</title></g>
-    <title style="pointer-events:inherit">Layer 1</title>
-  </g>
 </svg>
 `;
 

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"
 >
-  <g class="layer" style="pointer-events:all">
+  <g class="layer">
-    <title style="pointer-events:inherit">Layer 1</title>
+    <title>Layer 1</title>
     <circle
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
       opacity="0.5"
-      style="pointer-events:inherit"
       cx="150"
       cy="150"
       r="111.80339887498948"
@@ -63,13 +62,12 @@ exports[`use all parts of svg-edit > check tool_fhellipse #0`] = `
   y="480"
   viewBox="0 0 640 480"
 >
-  <g class="layer" style="pointer-events:all">
+  <g class="layer">
-    <title style="pointer-events:inherit">Layer 1</title>
+    <title>Layer 1</title>
     <circle
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
-      style="pointer-events:inherit"
       cx="150"
       cy="150"
       r="111.80339887498948"
@@ -82,7 +80,6 @@ exports[`use all parts of svg-edit > 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"
 >
-  <g class="layer" style="pointer-events:all">
+  <g class="layer">
-    <title style="pointer-events:inherit">Layer 1</title>
+    <title>Layer 1</title>
     <circle
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
-      style="pointer-events:inherit"
       cx="150"
       cy="150"
       r="111.80339887498948"
@@ -131,7 +127,6 @@ exports[`use all parts of svg-edit > 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"
 >
-  <g class="layer" style="pointer-events:all">
+  <g class="layer">
-    <title style="pointer-events:inherit">Layer 1</title>
+    <title>Layer 1</title>
     <circle
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
-      style="pointer-events:inherit"
       cx="150"
       cy="150"
       r="111.80339887498948"
@@ -206,7 +199,6 @@ exports[`use all parts of svg-edit > 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)"
     ></ellipse>
   </g>
 </svg>

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"
 >
-  <g class="layer" style="pointer-events:all">
+  <g class="layer">
-    <title style="pointer-events:inherit">Layer 1</title>
+    <title>Layer 1</title>
     <path
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
       opacity="0.5"
-      style="pointer-events:inherit"
       d="M 50 50 L 150 100 L 125 200 L 50 50 z"
       id="svg_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"
 >
-  <g class="layer" style="pointer-events:all">
+  <g class="layer">
-    <title style="pointer-events:inherit">Layer 1</title>
+    <title>Layer 1</title>
     <path
       fill="#FF0000"
       stroke="#000000"
@@ -88,8 +87,8 @@ exports[`use all parts of svg-edit > check tool_path_change_seg_type #0`] = `
   y="480"
   viewBox="0 0 640 480"
 >
-  <g class="layer" style="pointer-events:all">
+  <g class="layer">
-    <title style="pointer-events:inherit">Layer 1</title>
+    <title>Layer 1</title>
     <path
       fill="#FF0000"
       stroke="#000000"
@@ -115,8 +114,8 @@ exports[`use all parts of svg-edit > check tool_path_change_clone_node #0`] = `
   y="480"
   viewBox="0 0 640 480"
 >
-  <g class="layer" style="pointer-events:all">
+  <g class="layer">
-    <title style="pointer-events:inherit">Layer 1</title>
+    <title>Layer 1</title>
     <path
       fill="#FF0000"
       stroke="#000000"
@@ -142,8 +141,8 @@ exports[`use all parts of svg-edit > check tool_path_openclose #0`] = `
   y="480"
   viewBox="0 0 640 480"
 >
-  <g class="layer" style="pointer-events:all">
+  <g class="layer">
-    <title style="pointer-events:inherit">Layer 1</title>
+    <title>Layer 1</title>
     <path
       fill="#FF0000"
       stroke="#000000"

cypress/integration/ui/__snapshots__/scenario4.js.snap

@@ -26,14 +26,13 @@ exports[`use all parts of svg-edit > check tool_rect #0`] = `
   y="480"
   viewBox="0 0 640 480"
 >
-  <g class="layer" style="pointer-events:all">
+  <g class="layer">
-    <title style="pointer-events:inherit">Layer 1</title>
+    <title>Layer 1</title>
     <rect
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
       opacity="0.5"
-      style="pointer-events:inherit"
       x="150"
       y="150"
       width="100"
@@ -64,13 +63,12 @@ exports[`use all parts of svg-edit > check tool_fhrect #0`] = `
   y="480"
   viewBox="0 0 640 480"
 >
-  <g class="layer" style="pointer-events:all">
+  <g class="layer">
-    <title style="pointer-events:inherit">Layer 1</title>
+    <title>Layer 1</title>
     <rect
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
-      style="pointer-events:inherit"
       x="150"
       y="150"
       width="100"
@@ -84,7 +82,6 @@ exports[`use all parts of svg-edit > 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"
 >
-  <g class="layer" style="pointer-events:all">
+  <g class="layer">
-    <title style="pointer-events:inherit">Layer 1</title>
+    <title>Layer 1</title>
     <rect
       fill="#FF0000"
       stroke="#000000"
       stroke-width="5"
-      style="pointer-events:inherit"
       x="150"
       y="150"
       width="100"
@@ -134,7 +130,6 @@ exports[`use all parts of svg-edit > 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"

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"
 >
-  <g class="layer" style="pointer-events:all">
+  <g class="layer">
-    <title style="pointer-events:inherit">Layer 1</title>
+    <title>Layer 1</title>
     <line
       fill="none"
       stroke="#000000"
       stroke-width="5"
       opacity="0.5"
-      style="pointer-events:none"
       x1="200"
       y1="200"
       x2="450"

cypress/integration/ui/__snapshots__/scenario6.js.snap

@@ -67,8 +67,8 @@ exports[`use all parts of svg-edit > check tool_polygon_clone #0`] = `
   y="480"
   viewBox="0 0 640 480"
 >
-  <g class="layer" style="pointer-events:all">
+  <g class="layer">
-    <title style="pointer-events:inherit">Layer 1</title>
+    <title>Layer 1</title>
     <polygon
       cx="325"
       cy="250"
@@ -79,7 +79,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="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"

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();
   });
 });

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();
   });
 });

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();
   });
 });

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();
   }); */
 });

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 });

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();
   });
 });

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();
   });
 });

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();
   });
 });

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(history);
-    assert.ok(hstory.MoveElementCommand);
+    assert.ok(history.MoveElementCommand);
-    assert.ok(hstory.InsertElementCommand);
+    assert.ok(history.InsertElementCommand);
-    assert.ok(hstory.ChangeElementCommand);
+    assert.ok(history.ChangeElementCommand);
-    assert.ok(hstory.RemoveElementCommand);
+    assert.ok(history.RemoveElementCommand);
-    assert.ok(hstory.BatchCommand);
+    assert.ok(history.BatchCommand);
-    assert.ok(hstory.UndoManager);
+    assert.ok(history.UndoManager);
-    assert.equal(typeof hstory.MoveElementCommand, typeof function () { /* empty fn */ });
+    assert.equal(typeof history.MoveElementCommand, typeof function () { /* empty fn */ });
-    assert.equal(typeof hstory.InsertElementCommand, typeof function () { /* empty fn */ });
+    assert.equal(typeof history.InsertElementCommand, typeof function () { /* empty fn */ });
-    assert.equal(typeof hstory.ChangeElementCommand, typeof function () { /* empty fn */ });
+    assert.equal(typeof history.ChangeElementCommand, typeof function () { /* empty fn */ });
-    assert.equal(typeof hstory.RemoveElementCommand, typeof function () { /* empty fn */ });
+    assert.equal(typeof history.RemoveElementCommand, typeof function () { /* empty fn */ });
-    assert.equal(typeof hstory.BatchCommand, typeof function () { /* empty fn */ });
+    assert.equal(typeof history.BatchCommand, typeof function () { /* empty fn */ });
-    assert.equal(typeof hstory.UndoManager, 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);

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; },
+    getSvgRoot () { return svgroot; },
-    svgContent () { return svgContent; },
+    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);
 

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;
   });
 

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;
     }
   };

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,

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();
+      const batchCmd = new BatchCommand();
-      batchCmd.addSubCommand(new S.RemoveElementCommand(elem, elem.parentNode));
+      batchCmd.addSubCommand(new RemoveElementCommand(elem, elem.parentNode));
-      batchCmd.addSubCommand(new S.InsertElementCommand(pline));
+      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;
     };
 

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;

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();

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);

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') {

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) {
+const pathDSegment = (letter, points, morePoints, lastPoint) => {
-  points.forEach(function(pnt, i){
+  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.

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: {

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;

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