fix CI issue and package upgrades (#869)

cypress/__svgSnapshots__/scenario-check tool_text_align_to_page.svg

@@ -2,7 +2,7 @@
  <g class="layer">
   <title>Layer 1</title>
   <text fill="#bf0000" font-family="Serif" font-size="34" font-style="italic" font-weight="bold" id="svg_1" stroke="#0000bf" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="200" xml:space="preserve" y="200">AB</text>
-  <text fill="#000000" filter="url(#svg_2_blur)" font-family="Serif" font-size="24" id="svg_2" opacity="0.5" stroke="#000000" stroke-width="0" text-anchor="middle" x="623.33" xml:space="preserve" y="245">AB</text>
+  <text fill="#000000" filter="url(#svg_2_blur)" font-family="Serif" font-size="24" id="svg_2" opacity="0.5" stroke="#000000" stroke-width="0" text-anchor="middle" x="620" xml:space="preserve" y="250">AB</text>
  </g>
  <defs>
   <filter height="200%" id="svg_2_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario1-check tool_image.svg

@@ -1,7 +0,0 @@
-<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <g class="layer">
-  <title>Layer 1</title>
-  <path d="m489.76,93.43c78.24,-224.45 384.77,0 0,288.58c-384.77,-288.58 -78.24,-513.02 0,-288.58z" fill="#FF0000" id="svg_1" stroke="#000000"/>
-  <image height="20" id="svg_2" width="20" x="-100" xlink:href="./images/logo.svg" y="300"/>
- </g>
-</svg>

cypress/__svgSnapshots__/scenario1-check tool_shape.svg

@@ -1,6 +0,0 @@
-<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
- <g class="layer">
-  <title>Layer 1</title>
-  <path d="m10.73,93.43c78.24,-224.45 384.77,0 0,288.58c-384.77,-288.58 -78.24,-513.02 0,-288.58z" fill="#FF0000" id="svg_1" stroke="#000000"/>
- </g>
-</svg>

cypress/__svgSnapshots__/scenario2-check tool_circle.svg

@@ -1,6 +1,6 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <circle cx="150" cy="150" fill="#FF0000" id="svg_1" r="111.8" stroke="#000000"/>
+  <circle cx="200" cy="200" fill="#FF0000" id="svg_1" r="100" stroke="#000000"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario2-check tool_circle_change_fill_color.svg

@@ -1,8 +1,8 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <circle cx="150" cy="150" fill="#FF0000" id="svg_1" r="111.8" stroke="#000000"/>
-  <ellipse cx="299" cy="169" fill="#ffff00" id="svg_2" rx="60" ry="50" stroke="#000000"/>
-  <ellipse cx="114" cy="189" fill="#FF0000" id="svg_3" rx="55" ry="25" stroke="#000000" transform="matrix(1 0 0 1 0 0)"/>
+  <circle cx="200" cy="200" fill="#FF0000" id="svg_1" r="100" stroke="#000000"/>
+  <ellipse cx="400" cy="250" fill="#ffff00" id="svg_2" rx="100" ry="50.5" stroke="#000000"/>
+  <ellipse cx="200" cy="400" fill="#FF0000" id="svg_3" rx="100" ry="100" stroke="#000000" transform="matrix(1 0 0 1 0 0)"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario2-check tool_circle_change_opacity.svg

@@ -1,8 +1,8 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <circle cx="150" cy="150" fill="#FF0000" id="svg_1" r="111.8" stroke="#000000"/>
-  <ellipse cx="299" cy="169" fill="#ffff00" id="svg_2" opacity="0.5" rx="60" ry="50" stroke="#000000"/>
-  <ellipse cx="114" cy="189" fill="#FF0000" id="svg_3" rx="55" ry="25" stroke="#000000" transform="matrix(1 0 0 1 0 0)"/>
+  <circle cx="200" cy="200" fill="#FF0000" id="svg_1" r="100" stroke="#000000"/>
+  <ellipse cx="400" cy="250" fill="#ffff00" id="svg_2" opacity="0.5" rx="100" ry="50.5" stroke="#000000"/>
+  <ellipse cx="200" cy="400" fill="#FF0000" id="svg_3" rx="100" ry="100" stroke="#000000" transform="matrix(1 0 0 1 0 0)"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario2-check tool_ellipse.svg

@@ -1,8 +1,8 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <circle cx="150" cy="150" fill="#FF0000" id="svg_1" r="111.8" stroke="#000000"/>
-  <ellipse cx="299" cy="169" fill="#FF0000" id="svg_2" rx="60" ry="50" stroke="#000000"/>
-  <ellipse cx="114" cy="189" fill="#FF0000" id="svg_3" rx="55" ry="25" stroke="#000000"/>
+  <circle cx="200" cy="200" fill="#FF0000" id="svg_1" r="100" stroke="#000000"/>
+  <ellipse cx="400" cy="250" fill="#FF0000" id="svg_2" rx="100" ry="50.5" stroke="#000000"/>
+  <ellipse cx="200" cy="400" fill="#FF0000" id="svg_3" rx="100" ry="100" stroke="#000000"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario2-check tool_ellipse_bring_to_back.svg

@@ -1,9 +1,9 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <ellipse cx="299" cy="169" fill="#ffff00" id="svg_2" opacity="0.5" rx="60" ry="50" stroke="#000000"/>
-  <circle cx="150" cy="150" fill="#FF0000" id="svg_1" r="111.8" stroke="#000000"/>
-  <ellipse cx="139" cy="214" fill="#FF0000" filter="url(#svg_3_blur)" id="svg_3" rx="80" ry="50" stroke="#000000" transform="matrix(1 0 0 1 0 0) rotate(25 139 214)"/>
+  <ellipse cx="400" cy="250" fill="#ffff00" id="svg_2" opacity="0.5" rx="100" ry="50.5" stroke="#000000"/>
+  <circle cx="200" cy="200" fill="#FF0000" id="svg_1" r="100" stroke="#000000"/>
+  <ellipse cx="220" cy="420" fill="#FF0000" filter="url(#svg_3_blur)" id="svg_3" rx="120" ry="120" stroke="#000000" transform="matrix(1 0 0 1 0 0) rotate(25 220 420)"/>
  </g>
  <defs>
   <filter height="200%" id="svg_3_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario2-check tool_ellipse_bring_to_front.svg

@@ -1,9 +1,9 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <circle cx="150" cy="150" fill="#FF0000" id="svg_1" r="111.8" stroke="#000000"/>
-  <ellipse cx="139" cy="214" fill="#FF0000" filter="url(#svg_3_blur)" id="svg_3" rx="80" ry="50" stroke="#000000" transform="matrix(1 0 0 1 0 0) rotate(25 139 214)"/>
-  <ellipse cx="299" cy="169" fill="#ffff00" id="svg_2" opacity="0.5" rx="60" ry="50" stroke="#000000"/>
+  <circle cx="200" cy="200" fill="#FF0000" id="svg_1" r="100" stroke="#000000"/>
+  <ellipse cx="220" cy="420" fill="#FF0000" filter="url(#svg_3_blur)" id="svg_3" rx="120" ry="120" stroke="#000000" transform="matrix(1 0 0 1 0 0) rotate(25 220 420)"/>
+  <ellipse cx="400" cy="250" fill="#ffff00" id="svg_2" opacity="0.5" rx="100" ry="50.5" stroke="#000000"/>
  </g>
  <defs>
   <filter height="200%" id="svg_3_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario2-check tool_ellipse_change_blur.svg

@@ -1,9 +1,9 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <circle cx="150" cy="150" fill="#FF0000" id="svg_1" r="111.8" stroke="#000000"/>
-  <ellipse cx="299" cy="169" fill="#ffff00" id="svg_2" opacity="0.5" rx="60" ry="50" stroke="#000000" transform="matrix(1 0 0 1 0 0)"/>
-  <ellipse cx="114" cy="189" fill="#FF0000" filter="url(#svg_3_blur)" id="svg_3" rx="55" ry="25" stroke="#000000" transform="rotate(25 114 189)"/>
+  <circle cx="200" cy="200" fill="#FF0000" id="svg_1" r="100" stroke="#000000"/>
+  <ellipse cx="400" cy="250" fill="#ffff00" id="svg_2" opacity="0.5" rx="100" ry="50.5" stroke="#000000" transform="matrix(1 0 0 1 0 0)"/>
+  <ellipse cx="200" cy="400" fill="#FF0000" filter="url(#svg_3_blur)" id="svg_3" rx="100" ry="100" stroke="#000000" transform="rotate(25 200 400)"/>
  </g>
  <defs>
   <filter height="200%" id="svg_3_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario2-check tool_ellipse_change_cx_cy_coordinate.svg

@@ -1,9 +1,9 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <circle cx="150" cy="150" fill="#FF0000" id="svg_1" r="111.8" stroke="#000000"/>
-  <ellipse cx="299" cy="169" fill="#ffff00" id="svg_2" opacity="0.5" rx="60" ry="50" stroke="#000000" transform="matrix(1 0 0 1 0 0)"/>
-  <ellipse cx="139" cy="214" fill="#FF0000" filter="url(#svg_3_blur)" id="svg_3" rx="55" ry="25" stroke="#000000" transform="rotate(25 139 214)"/>
+  <circle cx="200" cy="200" fill="#FF0000" id="svg_1" r="100" stroke="#000000"/>
+  <ellipse cx="400" cy="250" fill="#ffff00" id="svg_2" opacity="0.5" rx="100" ry="50.5" stroke="#000000" transform="matrix(1 0 0 1 0 0)"/>
+  <ellipse cx="220" cy="420" fill="#FF0000" filter="url(#svg_3_blur)" id="svg_3" rx="100" ry="100" stroke="#000000" transform="rotate(25 220 420)"/>
  </g>
  <defs>
   <filter height="200%" id="svg_3_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario2-check tool_ellipse_change_rotation.svg

@@ -1,8 +1,8 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <circle cx="150" cy="150" fill="#FF0000" id="svg_1" r="111.8" stroke="#000000"/>
-  <ellipse cx="299" cy="169" fill="#ffff00" id="svg_2" opacity="0.5" rx="60" ry="50" stroke="#000000" transform="matrix(1 0 0 1 0 0)"/>
-  <ellipse cx="114" cy="189" fill="#FF0000" id="svg_3" rx="55" ry="25" stroke="#000000" transform="rotate(25 114 189)"/>
+  <circle cx="200" cy="200" fill="#FF0000" id="svg_1" r="100" stroke="#000000"/>
+  <ellipse cx="400" cy="250" fill="#ffff00" id="svg_2" opacity="0.5" rx="100" ry="50.5" stroke="#000000" transform="matrix(1 0 0 1 0 0)"/>
+  <ellipse cx="200" cy="400" fill="#FF0000" id="svg_3" rx="100" ry="100" stroke="#000000" transform="rotate(25 200 400)"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario2-check tool_ellipse_change_rx_ry_radius.svg

@@ -1,9 +1,9 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <circle cx="150" cy="150" fill="#FF0000" id="svg_1" r="111.8" stroke="#000000"/>
-  <ellipse cx="299" cy="169" fill="#ffff00" id="svg_2" opacity="0.5" rx="60" ry="50" stroke="#000000" transform="matrix(1 0 0 1 0 0)"/>
-  <ellipse cx="139" cy="214" fill="#FF0000" filter="url(#svg_3_blur)" id="svg_3" rx="80" ry="50" stroke="#000000" transform="rotate(25 139 214)"/>
+  <circle cx="200" cy="200" fill="#FF0000" id="svg_1" r="100" stroke="#000000"/>
+  <ellipse cx="400" cy="250" fill="#ffff00" id="svg_2" opacity="0.5" rx="100" ry="50.5" stroke="#000000" transform="matrix(1 0 0 1 0 0)"/>
+  <ellipse cx="220" cy="420" fill="#FF0000" filter="url(#svg_3_blur)" id="svg_3" rx="120" ry="120" stroke="#000000" transform="rotate(25 220 420)"/>
  </g>
  <defs>
   <filter height="200%" id="svg_3_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario2-check tool_ellipse_clone.svg

@@ -1,10 +1,10 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <circle cx="150" cy="150" fill="#FF0000" id="svg_1" r="111.8" stroke="#000000"/>
-  <ellipse cx="139" cy="214" fill="#FF0000" filter="url(#svg_3_blur)" id="svg_3" rx="80" ry="50" stroke="#000000" transform="matrix(1 0 0 1 0 0) rotate(25 139 214)"/>
-  <ellipse cx="299" cy="169" fill="#ffff00" id="svg_2" opacity="0.5" rx="60" ry="50" stroke="#000000"/>
-  <ellipse cx="319" cy="189" fill="#ffff00" id="svg_4" opacity="0.5" rx="60" ry="50" stroke="#000000"/>
+  <circle cx="200" cy="200" fill="#FF0000" id="svg_1" r="100" stroke="#000000"/>
+  <ellipse cx="220" cy="420" fill="#FF0000" filter="url(#svg_3_blur)" id="svg_3" rx="120" ry="120" stroke="#000000" transform="matrix(1 0 0 1 0 0) rotate(25 220 420)"/>
+  <ellipse cx="400" cy="250" fill="#ffff00" id="svg_2" opacity="0.5" rx="100" ry="50.5" stroke="#000000"/>
+  <ellipse cx="420" cy="270" fill="#ffff00" id="svg_4" opacity="0.5" rx="100" ry="50" stroke="#000000"/>
  </g>
  <defs>
   <filter height="200%" id="svg_3_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario2-check tool_fhellipse.svg

@@ -1,7 +1,7 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <circle cx="150" cy="150" fill="#FF0000" id="svg_1" r="111.8" stroke="#000000"/>
-  <ellipse cx="299" cy="169" fill="#FF0000" id="svg_2" rx="60" ry="50" stroke="#000000"/>
+  <circle cx="200" cy="200" fill="#FF0000" id="svg_1" r="100" stroke="#000000"/>
+  <ellipse cx="400" cy="250" fill="#FF0000" id="svg_2" rx="100" ry="50.5" stroke="#000000"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario3-check tool_path.svg

@@ -1,6 +1,6 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <path d="m50,50l100,50l-25,100l-75,-150z" fill="#FF0000" id="svg_1" stroke="#000000"/>
+  <path d="m50,50l100,50l-20,100l-80,-150z" fill="#FF0000" id="svg_1" stroke="#000000"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario3-check tool_path_change_clone_node.svg

@@ -1,6 +1,6 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <path d="m201,246l-26,-121l-25,100c50.5,60.5 164,206.5 135.75,160.13c-28.25,-46.38 -72.25,-114.13 -84.75,-139.13z" fill="#FF0000" id="svg_1" stroke="#000000"/>
+  <path d="m195,255l-20,-130l-20,100c51.67,65 158.33,220 128.75,172.5c-29.58,-47.5 -75.42,-117.5 -88.75,-142.5z" fill="#FF0000" id="svg_1" stroke="#000000"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario3-check tool_path_change_node_xy.svg

@@ -1,6 +1,6 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <path d="m75,75l100,50l-25,100l-75,-150z" fill="#FF0000" id="svg_1" stroke="#000000"/>
+  <path d="m75,75l100,50l-20,100l-80,-150z" fill="#FF0000" id="svg_1" stroke="#000000"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario3-check tool_path_change_seg_type.svg

@@ -1,6 +1,6 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <path d="m75,75l100,50l-25,100c101,121 -50,-100 -75,-150z" fill="#FF0000" id="svg_1" stroke="#000000"/>
+  <path d="m75,75l100,50l-20,100c103.33,130 -53.33,-100 -80,-150z" fill="#FF0000" id="svg_1" stroke="#000000"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario3-check tool_path_openclose.svg

@@ -1,6 +1,6 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <path d="m201,246l-26,-121l-25,100c50.5,60.5 164,206.5 135.75,160.13c-28.25,-46.38 -72.25,-114.13 -84.75,-139.13z" fill="#FF0000" id="svg_1" stroke="#000000"/>
+  <path d="m195,255l-20,-130l-20,100c51.67,65 158.33,220 128.75,172.5c-29.58,-47.5 -75.42,-117.5 -88.75,-142.5z" fill="#FF0000" id="svg_1" stroke="#000000"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario4-check tool_fhrect.svg

@@ -2,6 +2,6 @@
  <g class="layer">
   <title>Layer 1</title>
   <rect fill="#FF0000" height="50" id="svg_1" stroke="#000000" width="100" x="150" y="150"/>
-  <rect fill="#FF0000" height="100" id="svg_2" stroke="#000000" width="120" x="350" y="230"/>
+  <rect fill="#FF0000" height="100" id="svg_2" stroke="#000000" width="120" x="350" y="230.5"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario4-check tool_fhrect_change_width_height.svg

@@ -3,7 +3,7 @@
   <title>Layer 1</title>
   <rect fill="#ffff00" filter="url(#svg_1_blur)" height="50" id="svg_1" opacity="0.5" stroke="#000000" transform="matrix(1 0 0 1 0 0) rotate(25 200 175)" width="100" x="150" y="150"/>
   <rect fill="#FF0000" height="125" id="svg_2" stroke="#000000" width="145" x="375" y="255"/>
-  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="225" y="300"/>
+  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="230" y="300"/>
  </g>
  <defs>
   <filter height="200%" id="svg_1_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario4-check tool_fhrect_change_x_y_coordinate.svg

@@ -3,7 +3,7 @@
   <title>Layer 1</title>
   <rect fill="#ffff00" filter="url(#svg_1_blur)" height="50" id="svg_1" opacity="0.5" stroke="#000000" transform="matrix(1 0 0 1 0 0) rotate(25 200 175)" width="100" x="150" y="150"/>
   <rect fill="#FF0000" height="100" id="svg_2" stroke="#000000" width="120" x="375" y="255"/>
-  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="225" y="300"/>
+  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="230" y="300"/>
  </g>
  <defs>
   <filter height="200%" id="svg_1_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario4-check tool_rect_change_blur.svg

@@ -2,8 +2,8 @@
  <g class="layer">
   <title>Layer 1</title>
   <rect fill="#ffff00" filter="url(#svg_1_blur)" height="50" id="svg_1" stroke="#000000" transform="rotate(25 200 175)" width="100" x="150" y="150"/>
-  <rect fill="#FF0000" height="100" id="svg_2" stroke="#000000" width="120" x="350" y="230"/>
-  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="225" y="300"/>
+  <rect fill="#FF0000" height="100" id="svg_2" stroke="#000000" width="120" x="350" y="230.5"/>
+  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="230" y="300"/>
  </g>
  <defs>
   <filter height="200%" id="svg_1_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario4-check tool_rect_change_fill_color.svg

@@ -2,7 +2,7 @@
  <g class="layer">
   <title>Layer 1</title>
   <rect fill="#ffff00" height="50" id="svg_1" stroke="#000000" width="100" x="150" y="150"/>
-  <rect fill="#FF0000" height="100" id="svg_2" stroke="#000000" width="120" x="350" y="230"/>
-  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="225" y="300"/>
+  <rect fill="#FF0000" height="100" id="svg_2" stroke="#000000" width="120" x="350" y="230.5"/>
+  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="230" y="300"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario4-check tool_rect_change_opacity.svg

@@ -2,8 +2,8 @@
  <g class="layer">
   <title>Layer 1</title>
   <rect fill="#ffff00" filter="url(#svg_1_blur)" height="50" id="svg_1" opacity="0.5" stroke="#000000" transform="rotate(25 200 175)" width="100" x="150" y="150"/>
-  <rect fill="#FF0000" height="100" id="svg_2" stroke="#000000" width="120" x="350" y="230"/>
-  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="225" y="300"/>
+  <rect fill="#FF0000" height="100" id="svg_2" stroke="#000000" width="120" x="350" y="230.5"/>
+  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="230" y="300"/>
  </g>
  <defs>
   <filter height="200%" id="svg_1_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario4-check tool_rect_change_rotation.svg

@@ -2,7 +2,7 @@
  <g class="layer">
   <title>Layer 1</title>
   <rect fill="#ffff00" height="50" id="svg_1" stroke="#000000" transform="rotate(25 200 175)" width="100" x="150" y="150"/>
-  <rect fill="#FF0000" height="100" id="svg_2" stroke="#000000" width="120" x="350" y="230"/>
-  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="225" y="300"/>
+  <rect fill="#FF0000" height="100" id="svg_2" stroke="#000000" width="120" x="350" y="230.5"/>
+  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="230" y="300"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario4-check tool_rect_change_to_path.svg

@@ -3,8 +3,8 @@
   <title>Layer 1</title>
   <rect fill="#ffff00" filter="url(#svg_1_blur)" height="50" id="svg_1" opacity="0.5" stroke="#000000" transform="matrix(1 0 0 1 0 0) rotate(25 200 175)" width="100" x="150" y="150"/>
   <path d="m375,255l145,0l0,125l-145,0l0,-125z" fill="#FF0000" id="svg_2" opacity="0.5" stroke="#000000"/>
-  <rect fill="#FF0000" height="50" id="svg_4" rx="25" ry="25" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="245" y="320"/>
-  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="225" y="300"/>
+  <rect fill="#FF0000" height="50" id="svg_4" rx="25" ry="25" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="250" y="320"/>
+  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="230" y="300"/>
  </g>
  <defs>
   <filter height="200%" id="svg_1_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario4-check tool_rect_delete.svg

@@ -2,7 +2,7 @@
  <g class="layer">
   <title>Layer 1</title>
   <path d="m375,255l145,0l0,125l-145,0l0,-125z" fill="#FF0000" id="svg_2" opacity="0.5" stroke="#000000" transform="matrix(1 0 0 1 0 0)"/>
-  <rect fill="#FF0000" height="50" id="svg_4" rx="25" ry="25" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="245" y="320"/>
+  <rect fill="#FF0000" height="50" id="svg_4" rx="25" ry="25" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="250" y="320"/>
  </g>
 
 </svg>

cypress/__svgSnapshots__/scenario4-check tool_square.svg

@@ -2,7 +2,7 @@
  <g class="layer">
   <title>Layer 1</title>
   <rect fill="#FF0000" height="50" id="svg_1" stroke="#000000" width="100" x="150" y="150"/>
-  <rect fill="#FF0000" height="100" id="svg_2" stroke="#000000" width="120" x="350" y="230"/>
-  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" width="50" x="225" y="300"/>
+  <rect fill="#FF0000" height="100" id="svg_2" stroke="#000000" width="120" x="350" y="230.5"/>
+  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" width="50" x="230" y="300"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario4-check tool_square_bring_to_back.svg

@@ -1,10 +1,10 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" width="50" x="225" y="300"/>
+  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" width="50" x="230" y="300"/>
   <rect fill="#ffff00" filter="url(#svg_1_blur)" height="50" id="svg_1" opacity="0.5" stroke="#000000" transform="matrix(1 0 0 1 0 0) rotate(25 200 175)" width="100" x="150" y="150"/>
   <rect fill="#FF0000" height="125" id="svg_2" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="145" x="375" y="255"/>
-  <rect fill="#FF0000" height="50" id="svg_4" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="245" y="320"/>
+  <rect fill="#FF0000" height="50" id="svg_4" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="250" y="320"/>
  </g>
  <defs>
   <filter height="200%" id="svg_1_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario4-check tool_square_bring_to_front.svg

@@ -3,8 +3,8 @@
   <title>Layer 1</title>
   <rect fill="#ffff00" filter="url(#svg_1_blur)" height="50" id="svg_1" opacity="0.5" stroke="#000000" transform="matrix(1 0 0 1 0 0) rotate(25 200 175)" width="100" x="150" y="150"/>
   <rect fill="#FF0000" height="125" id="svg_2" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="145" x="375" y="255"/>
-  <rect fill="#FF0000" height="50" id="svg_4" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="245" y="320"/>
-  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" width="50" x="225" y="300"/>
+  <rect fill="#FF0000" height="50" id="svg_4" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="250" y="320"/>
+  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" width="50" x="230" y="300"/>
  </g>
  <defs>
   <filter height="200%" id="svg_1_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario4-check tool_square_change_corner_radius.svg

@@ -3,8 +3,8 @@
   <title>Layer 1</title>
   <rect fill="#ffff00" filter="url(#svg_1_blur)" height="50" id="svg_1" opacity="0.5" stroke="#000000" transform="matrix(1 0 0 1 0 0) rotate(25 200 175)" width="100" x="150" y="150"/>
   <rect fill="#FF0000" height="125" id="svg_2" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="145" x="375" y="255"/>
-  <rect fill="#FF0000" height="50" id="svg_4" rx="25" ry="25" stroke="#000000" width="50" x="245" y="320"/>
-  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="225" y="300"/>
+  <rect fill="#FF0000" height="50" id="svg_4" rx="25" ry="25" stroke="#000000" width="50" x="250" y="320"/>
+  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="50" x="230" y="300"/>
  </g>
  <defs>
   <filter height="200%" id="svg_1_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario4-check tool_square_clone.svg

@@ -3,8 +3,8 @@
   <title>Layer 1</title>
   <rect fill="#ffff00" filter="url(#svg_1_blur)" height="50" id="svg_1" opacity="0.5" stroke="#000000" transform="matrix(1 0 0 1 0 0) rotate(25 200 175)" width="100" x="150" y="150"/>
   <rect fill="#FF0000" height="125" id="svg_2" stroke="#000000" transform="matrix(1 0 0 1 0 0)" width="145" x="375" y="255"/>
-  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" width="50" x="225" y="300"/>
-  <rect fill="#FF0000" height="50" id="svg_4" stroke="#000000" width="50" x="245" y="320"/>
+  <rect fill="#FF0000" height="50" id="svg_3" stroke="#000000" width="50" x="230" y="300"/>
+  <rect fill="#FF0000" height="50" id="svg_4" stroke="#000000" width="50" x="250" y="320"/>
  </g>
  <defs>
   <filter height="200%" id="svg_1_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario5-check tool_line_align_to_page.svg

@@ -1,7 +1,7 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <line fill="none" id="svg_3" opacity="0.25" stroke="#bf5f00" stroke-width="5" x1="387.5" x2="637.5" y1="220" y2="470">
+  <line fill="none" id="svg_3" opacity="0.25" stroke="#bf5f00" stroke-width="5" x1="390" x2="640" y1="220" y2="470">
    <animate attributeName="opacity" begin="indefinite" dur="0.2" fill="freeze" id="svg_4" to="0.5"/>
   </line>
   <line fill="none" id="svg_2" opacity="0.5" stroke="#000000" stroke-width="15" transform="matrix(1 0 0 1 0 0)" x1="225" x2="475" y1="175" y2="425"/>

cypress/__svgSnapshots__/scenario6-check tool_polygon.svg

@@ -1,6 +1,6 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="325" cy="250" edge="63.33" fill="#FF0000" id="svg_1" orient="x" points="378.87455119562924,250 341.6481518837726,301.23774297708 281.41457251841285,281.6666666666667 281.4145725184128,218.33333333333334 341.6481518837726,198.76225702291998 378.87455119562924,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
+  <polygon cx="330" cy="250" edge="63.75" fill="#FF0000" id="svg_1" orient="x" points="384.2322784864553,250 346.75869569598956,301.57796184807677 286.1251650607828,281.8769334925568 286.1251650607828,218.1230665074432 346.75869569598956,198.42203815192323 384.2322784864553,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario6-check tool_polygon_align_to_page.svg

@@ -1,7 +1,7 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="325" cy="250" edge="63.33" fill="#FF0000" id="svg_1" orient="x" points="637.5,250 600.2736206054688,301.23773193359375 540.0400390625,281.6666564941406 540.0400390625,218.3333282470703 600.2736206054688,198.7622528076172 637.5,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
+  <polygon cx="330" cy="250" edge="63.75" fill="#FF0000" id="svg_1" orient="x" points="637.5,250 600.0264282226562,301.5779724121094 539.3928833007812,281.8769226074219 539.3928833007812,218.12306213378906 600.0264282226562,198.4220428466797 637.5,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
  </g>
 
 </svg>

cypress/__svgSnapshots__/scenario6-check tool_polygon_bring_to_back.svg

@@ -1,8 +1,8 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon class="svg_2_class" cx="325" cy="250" edge="63.33" fill="#FF0000" filter="url(#svg_2_id_blur)" id="svg_2_id" opacity="0.5" orient="x" points="398.8745422363281,270 361.6481628417969,321.23773193359375 301.4145812988281,301.6666564941406 301.4145812988281,238.3333282470703 361.6481628417969,218.7622528076172 398.8745422363281,270 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5" transform="rotate(25 350.145 270)"/>
-  <polygon cx="325" cy="250" edge="63.33" fill="#FF0000" id="svg_1" orient="x" points="378.87455119562924,250 341.6481518837726,301.23774297708 281.41457251841285,281.6666666666667 281.4145725184128,218.33333333333334 341.6481518837726,198.76225702291998 378.87455119562924,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
+  <polygon class="svg_2_class" cx="330" cy="250" edge="63.75" fill="#FF0000" filter="url(#svg_2_id_blur)" id="svg_2_id" opacity="0.5" orient="x" points="404.2322692871094,270 366.7586975097656,321.5779724121094 306.1251525878906,301.8769226074219 306.1251525878906,238.12306213378906 366.7586975097656,218.4220428466797 404.2322692871094,270 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5" transform="rotate(25 355.179 270)"/>
+  <polygon cx="330" cy="250" edge="63.75" fill="#FF0000" id="svg_1" orient="x" points="384.2322784864553,250 346.75869569598956,301.57796184807677 286.1251650607828,281.8769334925568 286.1251650607828,218.1230665074432 346.75869569598956,198.42203815192323 384.2322784864553,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
  </g>
  <defs>
   <filter height="200%" id="svg_2_id_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario6-check tool_polygon_bring_to_front.svg

@@ -1,8 +1,8 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="325" cy="250" edge="63.33" fill="#FF0000" id="svg_1" orient="x" points="378.87455119562924,250 341.6481518837726,301.23774297708 281.41457251841285,281.6666666666667 281.4145725184128,218.33333333333334 341.6481518837726,198.76225702291998 378.87455119562924,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
-  <polygon class="svg_2_class" cx="325" cy="250" edge="63.33" fill="#FF0000" filter="url(#svg_2_id_blur)" id="svg_2_id" opacity="0.5" orient="x" points="398.8745422363281,270 361.6481628417969,321.23773193359375 301.4145812988281,301.6666564941406 301.4145812988281,238.3333282470703 361.6481628417969,218.7622528076172 398.8745422363281,270 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5" transform="rotate(25 350.145 270)"/>
+  <polygon cx="330" cy="250" edge="63.75" fill="#FF0000" id="svg_1" orient="x" points="384.2322784864553,250 346.75869569598956,301.57796184807677 286.1251650607828,281.8769334925568 286.1251650607828,218.1230665074432 346.75869569598956,198.42203815192323 384.2322784864553,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
+  <polygon class="svg_2_class" cx="330" cy="250" edge="63.75" fill="#FF0000" filter="url(#svg_2_id_blur)" id="svg_2_id" opacity="0.5" orient="x" points="404.2322692871094,270 366.7586975097656,321.5779724121094 306.1251525878906,301.8769226074219 306.1251525878906,238.12306213378906 366.7586975097656,218.4220428466797 404.2322692871094,270 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5" transform="rotate(25 355.179 270)"/>
  </g>
  <defs>
   <filter height="200%" id="svg_2_id_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario6-check tool_polygon_change_blur.svg

@@ -1,8 +1,8 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="325" cy="250" edge="63.33" fill="#FF0000" id="svg_1" orient="x" points="378.87455119562924,250 341.6481518837726,301.23774297708 281.41457251841285,281.6666666666667 281.4145725184128,218.33333333333334 341.6481518837726,198.76225702291998 378.87455119562924,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
-  <polygon class="svg_2_class" cx="325" cy="250" edge="63.33" fill="#FF0000" filter="url(#svg_2_id_blur)" id="svg_2_id" orient="x" points="398.8745422363281,270 361.6481628417969,321.23773193359375 301.4145812988281,301.6666564941406 301.4145812988281,238.3333282470703 361.6481628417969,218.7622528076172 398.8745422363281,270 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5" transform="rotate(25 350.145 270)"/>
+  <polygon cx="330" cy="250" edge="63.75" fill="#FF0000" id="svg_1" orient="x" points="384.2322784864553,250 346.75869569598956,301.57796184807677 286.1251650607828,281.8769334925568 286.1251650607828,218.1230665074432 346.75869569598956,198.42203815192323 384.2322784864553,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
+  <polygon class="svg_2_class" cx="330" cy="250" edge="63.75" fill="#FF0000" filter="url(#svg_2_id_blur)" id="svg_2_id" orient="x" points="404.2322692871094,270 366.7586975097656,321.5779724121094 306.1251525878906,301.8769226074219 306.1251525878906,238.12306213378906 366.7586975097656,218.4220428466797 404.2322692871094,270 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5" transform="rotate(25 355.179 270)"/>
  </g>
  <defs>
   <filter height="200%" id="svg_2_id_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario6-check tool_polygon_change_opacity.svg

@@ -1,8 +1,8 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="325" cy="250" edge="63.33" fill="#FF0000" id="svg_1" orient="x" points="378.87455119562924,250 341.6481518837726,301.23774297708 281.41457251841285,281.6666666666667 281.4145725184128,218.33333333333334 341.6481518837726,198.76225702291998 378.87455119562924,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
-  <polygon class="svg_2_class" cx="325" cy="250" edge="63.33" fill="#FF0000" filter="url(#svg_2_id_blur)" id="svg_2_id" opacity="0.5" orient="x" points="398.8745422363281,270 361.6481628417969,321.23773193359375 301.4145812988281,301.6666564941406 301.4145812988281,238.3333282470703 361.6481628417969,218.7622528076172 398.8745422363281,270 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5" transform="rotate(25 350.145 270)"/>
+  <polygon cx="330" cy="250" edge="63.75" fill="#FF0000" id="svg_1" orient="x" points="384.2322784864553,250 346.75869569598956,301.57796184807677 286.1251650607828,281.8769334925568 286.1251650607828,218.1230665074432 346.75869569598956,198.42203815192323 384.2322784864553,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
+  <polygon class="svg_2_class" cx="330" cy="250" edge="63.75" fill="#FF0000" filter="url(#svg_2_id_blur)" id="svg_2_id" opacity="0.5" orient="x" points="404.2322692871094,270 366.7586975097656,321.5779724121094 306.1251525878906,301.8769226074219 306.1251525878906,238.12306213378906 366.7586975097656,218.4220428466797 404.2322692871094,270 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5" transform="rotate(25 355.179 270)"/>
  </g>
  <defs>
   <filter height="200%" id="svg_2_id_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario6-check tool_polygon_change_rotation.svg

@@ -1,7 +1,7 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="325" cy="250" edge="63.33" fill="#FF0000" id="svg_1" orient="x" points="378.87455119562924,250 341.6481518837726,301.23774297708 281.41457251841285,281.6666666666667 281.4145725184128,218.33333333333334 341.6481518837726,198.76225702291998 378.87455119562924,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
-  <polygon class="svg_2_class" cx="325" cy="250" edge="63.33" fill="#FF0000" id="svg_2_id" orient="x" points="398.8745422363281,270 361.6481628417969,321.23773193359375 301.4145812988281,301.6666564941406 301.4145812988281,238.3333282470703 361.6481628417969,218.7622528076172 398.8745422363281,270 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5" transform="rotate(25 350 270)"/>
+  <polygon cx="330" cy="250" edge="63.75" fill="#FF0000" id="svg_1" orient="x" points="384.2322784864553,250 346.75869569598956,301.57796184807677 286.1251650607828,281.8769334925568 286.1251650607828,218.1230665074432 346.75869569598956,198.42203815192323 384.2322784864553,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
+  <polygon class="svg_2_class" cx="330" cy="250" edge="63.75" fill="#FF0000" id="svg_2_id" orient="x" points="404.2322692871094,270 366.7586975097656,321.5779724121094 306.1251525878906,301.8769226074219 306.1251525878906,238.12306213378906 366.7586975097656,218.4220428466797 404.2322692871094,270 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5" transform="rotate(25 355 270)"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario6-check tool_polygon_change_sides.svg

@@ -1,7 +1,7 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="325" cy="250" edge="63.33" fill="#bf0000" id="svg_1" orient="x" points="664.9855026971727,249.999995640346 633.318836030506,304.8482712133604 569.9855026971727,304.8482712133604 538.318836030506,249.999995640346 569.9855026971726,195.15172006733155 633.318836030506,195.15172006733155 664.9855026971727,249.99999564034596 " shape="regularPoly" sides="6" stroke="#0000bf" stroke-width="15"/>
+  <polygon cx="330" cy="250" edge="63.75" fill="#bf0000" id="svg_1" orient="x" points="665.1679905202699,250 633.291057027713,305.21246839860237 569.5371900425995,305.21246839860237 537.6602565500426,250 569.5371900425994,194.78753160139763 633.291057027713,194.78753160139763 665.1679905202699,249.99999999999997 " shape="regularPoly" sides="6" stroke="#0000bf" stroke-width="15"/>
  </g>
 
 </svg>

cypress/__svgSnapshots__/scenario6-check tool_polygon_change_stoke_fill_color.svg

@@ -1,7 +1,7 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="325" cy="250" edge="63.33" fill="#bf0000" id="svg_1" orient="x" points="637.5,250 600.2736206054688,301.23773193359375 540.0400390625,281.6666564941406 540.0400390625,218.3333282470703 600.2736206054688,198.7622528076172 637.5,250 " shape="regularPoly" sides="5" stroke="#0000bf" stroke-width="15"/>
+  <polygon cx="330" cy="250" edge="63.75" fill="#bf0000" id="svg_1" orient="x" points="637.5,250 600.0264282226562,301.5779724121094 539.3928833007812,281.8769226074219 539.3928833007812,218.12306213378906 600.0264282226562,198.4220428466797 637.5,250 " shape="regularPoly" sides="5" stroke="#0000bf" stroke-width="15"/>
  </g>
 
 </svg>

cypress/__svgSnapshots__/scenario6-check tool_polygon_change_stroke_width.svg

@@ -1,7 +1,7 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="325" cy="250" edge="63.33" fill="#FF0000" id="svg_1" orient="x" points="637.5,250 600.2736206054688,301.23773193359375 540.0400390625,281.6666564941406 540.0400390625,218.3333282470703 600.2736206054688,198.7622528076172 637.5,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="15"/>
+  <polygon cx="330" cy="250" edge="63.75" fill="#FF0000" id="svg_1" orient="x" points="637.5,250 600.0264282226562,301.5779724121094 539.3928833007812,281.8769226074219 539.3928833007812,218.12306213378906 600.0264282226562,198.4220428466797 637.5,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="15"/>
  </g>
 
 </svg>

cypress/__svgSnapshots__/scenario6-check tool_polygon_clone.svg

@@ -1,7 +1,7 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="325" cy="250" edge="63.33" fill="#FF0000" id="svg_1" orient="x" points="378.87455119562924,250 341.6481518837726,301.23774297708 281.41457251841285,281.6666666666667 281.4145725184128,218.33333333333334 341.6481518837726,198.76225702291998 378.87455119562924,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
-  <polygon cx="325" cy="250" edge="63.33" fill="#FF0000" id="svg_2" orient="x" points="398.8745422363281,270 361.6481628417969,321.23773193359375 301.4145812988281,301.6666564941406 301.4145812988281,238.3333282470703 361.6481628417969,218.7622528076172 398.8745422363281,270 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
+  <polygon cx="330" cy="250" edge="63.75" fill="#FF0000" id="svg_1" orient="x" points="384.2322784864553,250 346.75869569598956,301.57796184807677 286.1251650607828,281.8769334925568 286.1251650607828,218.1230665074432 346.75869569598956,198.42203815192323 384.2322784864553,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
+  <polygon cx="330" cy="250" edge="63.75" fill="#FF0000" id="svg_2" orient="x" points="404.2322692871094,270 366.7586975097656,321.5779724121094 306.1251525878906,301.8769226074219 306.1251525878906,238.12306213378906 366.7586975097656,218.4220428466797 404.2322692871094,270 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario6-check tool_polygon_delete.svg

@@ -1,7 +1,7 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="325" cy="250" edge="63.33" fill="#FF0000" id="svg_1" orient="x" points="378.87455119562924,250 341.6481518837726,301.23774297708 281.41457251841285,281.6666666666667 281.4145725184128,218.33333333333334 341.6481518837726,198.76225702291998 378.87455119562924,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
+  <polygon cx="330" cy="250" edge="63.75" fill="#FF0000" id="svg_1" orient="x" points="384.2322784864553,250 346.75869569598956,301.57796184807677 286.1251650607828,281.8769334925568 286.1251650607828,218.1230665074432 346.75869569598956,198.42203815192323 384.2322784864553,250 " shape="regularPoly" sides="5" stroke="#000000" stroke-width="5"/>
  </g>
 
 </svg>

cypress/__svgSnapshots__/scenario7-check tool_star.svg

@@ -1,6 +1,6 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
+  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="300,83 313.1272039678652,131.93195379229283 363.72078659177527,129.29586137687852 321.2402621972584,156.90137954104048 339.3816119035957,204.20413862312148 300,172.33333333333334 260.6183880964043,204.20413862312148 278.7597378027416,156.90137954104048 236.2792134082247,129.29586137687852 286.8727960321348,131.93195379229286 300,83 313.1272039678652,131.93195379229283 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario7-check tool_star_align_to_page.svg

@@ -1,7 +1,7 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="574.0962219238281,83.33333587646484 587.1581115722656,132.0218505859375 637.5,129.39886474609375 595.2308044433594,156.86705017089844 613.2818908691406,203.93446350097656 574.0962219238281,172.22222900390625 534.9105529785156,203.93446350097656 552.9616394042969,156.86705017089844 510.6924591064453,129.39886474609375 561.0343322753906,132.0218505859375 574.0962219238281,83.33333587646484 587.1581115722656,132.0218505859375 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
+  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="573.7792053222656,83 586.9064025878906,131.9319610595703 637.5,129.29586791992188 595.0194702148438,156.90138244628906 613.1608276367188,204.20413208007812 573.7792053222656,172.3333282470703 534.3975830078125,204.20413208007812 552.5389404296875,156.90138244628906 510.0584259033203,129.29586791992188 560.6520080566406,131.9319610595703 573.7792053222656,83 586.9064025878906,131.9319610595703 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
  </g>
 
 </svg>

cypress/__svgSnapshots__/scenario7-check tool_star_bring_to_back.svg

@@ -1,8 +1,8 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon class="svg_2_class" cx="300" cy="150" fill="#FF0000" filter="url(#svg_2_id_blur)" id="svg_2_id" opacity="0.5" orient="point" point="5" points="320,103.33333587646484 333.0618896484375,152.0218505859375 383.4037780761719,149.39886474609375 341.13458251953125,176.86705017089844 359.1856689453125,223.93446350097656 320,192.22222900390625 280.8143310546875,223.93446350097656 298.86541748046875,176.86705017089844 256.5962371826172,149.39886474609375 306.9381103515625,152.0218505859375 320,103.33333587646484 333.0618896484375,152.0218505859375 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5" transform="rotate(25 320 163.634)"/>
-  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
+  <polygon class="svg_2_class" cx="300" cy="150" fill="#FF0000" filter="url(#svg_2_id_blur)" id="svg_2_id" opacity="0.5" orient="point" point="5" points="320,103 333.127197265625,151.9319610595703 383.7207946777344,149.29586791992188 341.2402648925781,176.90138244628906 359.3816223144531,224.20413208007812 320,192.3333282470703 280.6183776855469,224.20413208007812 298.7597351074219,176.90138244628906 256.2792205810547,149.29586791992188 306.872802734375,151.9319610595703 320,103 333.127197265625,151.9319610595703 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5" transform="rotate(25 320 163.602)"/>
+  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="300,83 313.1272039678652,131.93195379229283 363.72078659177527,129.29586137687852 321.2402621972584,156.90137954104048 339.3816119035957,204.20413862312148 300,172.33333333333334 260.6183880964043,204.20413862312148 278.7597378027416,156.90137954104048 236.2792134082247,129.29586137687852 286.8727960321348,131.93195379229286 300,83 313.1272039678652,131.93195379229283 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
  </g>
  <defs>
   <filter height="200%" id="svg_2_id_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario7-check tool_star_bring_to_front.svg

@@ -1,8 +1,8 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
-  <polygon class="svg_2_class" cx="300" cy="150" fill="#FF0000" filter="url(#svg_2_id_blur)" id="svg_2_id" opacity="0.5" orient="point" point="5" points="320,103.33333587646484 333.0618896484375,152.0218505859375 383.4037780761719,149.39886474609375 341.13458251953125,176.86705017089844 359.1856689453125,223.93446350097656 320,192.22222900390625 280.8143310546875,223.93446350097656 298.86541748046875,176.86705017089844 256.5962371826172,149.39886474609375 306.9381103515625,152.0218505859375 320,103.33333587646484 333.0618896484375,152.0218505859375 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5" transform="rotate(25 320 163.634)"/>
+  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="300,83 313.1272039678652,131.93195379229283 363.72078659177527,129.29586137687852 321.2402621972584,156.90137954104048 339.3816119035957,204.20413862312148 300,172.33333333333334 260.6183880964043,204.20413862312148 278.7597378027416,156.90137954104048 236.2792134082247,129.29586137687852 286.8727960321348,131.93195379229286 300,83 313.1272039678652,131.93195379229283 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
+  <polygon class="svg_2_class" cx="300" cy="150" fill="#FF0000" filter="url(#svg_2_id_blur)" id="svg_2_id" opacity="0.5" orient="point" point="5" points="320,103 333.127197265625,151.9319610595703 383.7207946777344,149.29586791992188 341.2402648925781,176.90138244628906 359.3816223144531,224.20413208007812 320,192.3333282470703 280.6183776855469,224.20413208007812 298.7597351074219,176.90138244628906 256.2792205810547,149.29586791992188 306.872802734375,151.9319610595703 320,103 333.127197265625,151.9319610595703 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5" transform="rotate(25 320 163.602)"/>
  </g>
  <defs>
   <filter height="200%" id="svg_2_id_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario7-check tool_star_change_blur.svg

@@ -1,8 +1,8 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
-  <polygon class="svg_2_class" cx="300" cy="150" fill="#FF0000" filter="url(#svg_2_id_blur)" id="svg_2_id" orient="point" point="5" points="320,103.33333587646484 333.0618896484375,152.0218505859375 383.4037780761719,149.39886474609375 341.13458251953125,176.86705017089844 359.1856689453125,223.93446350097656 320,192.22222900390625 280.8143310546875,223.93446350097656 298.86541748046875,176.86705017089844 256.5962371826172,149.39886474609375 306.9381103515625,152.0218505859375 320,103.33333587646484 333.0618896484375,152.0218505859375 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5" transform="rotate(25 320 163.634)"/>
+  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="300,83 313.1272039678652,131.93195379229283 363.72078659177527,129.29586137687852 321.2402621972584,156.90137954104048 339.3816119035957,204.20413862312148 300,172.33333333333334 260.6183880964043,204.20413862312148 278.7597378027416,156.90137954104048 236.2792134082247,129.29586137687852 286.8727960321348,131.93195379229286 300,83 313.1272039678652,131.93195379229283 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
+  <polygon class="svg_2_class" cx="300" cy="150" fill="#FF0000" filter="url(#svg_2_id_blur)" id="svg_2_id" orient="point" point="5" points="320,103 333.127197265625,151.9319610595703 383.7207946777344,149.29586791992188 341.2402648925781,176.90138244628906 359.3816223144531,224.20413208007812 320,192.3333282470703 280.6183776855469,224.20413208007812 298.7597351074219,176.90138244628906 256.2792205810547,149.29586791992188 306.872802734375,151.9319610595703 320,103 333.127197265625,151.9319610595703 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5" transform="rotate(25 320 163.602)"/>
  </g>
  <defs>
   <filter height="200%" id="svg_2_id_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario7-check tool_star_change_opacity.svg

@@ -1,8 +1,8 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
-  <polygon class="svg_2_class" cx="300" cy="150" fill="#FF0000" filter="url(#svg_2_id_blur)" id="svg_2_id" opacity="0.5" orient="point" point="5" points="320,103.33333587646484 333.0618896484375,152.0218505859375 383.4037780761719,149.39886474609375 341.13458251953125,176.86705017089844 359.1856689453125,223.93446350097656 320,192.22222900390625 280.8143310546875,223.93446350097656 298.86541748046875,176.86705017089844 256.5962371826172,149.39886474609375 306.9381103515625,152.0218505859375 320,103.33333587646484 333.0618896484375,152.0218505859375 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5" transform="rotate(25 320 163.634)"/>
+  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="300,83 313.1272039678652,131.93195379229283 363.72078659177527,129.29586137687852 321.2402621972584,156.90137954104048 339.3816119035957,204.20413862312148 300,172.33333333333334 260.6183880964043,204.20413862312148 278.7597378027416,156.90137954104048 236.2792134082247,129.29586137687852 286.8727960321348,131.93195379229286 300,83 313.1272039678652,131.93195379229283 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
+  <polygon class="svg_2_class" cx="300" cy="150" fill="#FF0000" filter="url(#svg_2_id_blur)" id="svg_2_id" opacity="0.5" orient="point" point="5" points="320,103 333.127197265625,151.9319610595703 383.7207946777344,149.29586791992188 341.2402648925781,176.90138244628906 359.3816223144531,224.20413208007812 320,192.3333282470703 280.6183776855469,224.20413208007812 298.7597351074219,176.90138244628906 256.2792205810547,149.29586791992188 306.872802734375,151.9319610595703 320,103 333.127197265625,151.9319610595703 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5" transform="rotate(25 320 163.602)"/>
  </g>
  <defs>
   <filter height="200%" id="svg_2_id_blur" width="200%" x="-50%" y="-50%">

cypress/__svgSnapshots__/scenario7-check tool_star_change_rotation.svg

@@ -1,7 +1,7 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
-  <polygon class="svg_2_class" cx="300" cy="150" fill="#FF0000" id="svg_2_id" orient="point" point="5" points="320,103.33333587646484 333.0618896484375,152.0218505859375 383.4037780761719,149.39886474609375 341.13458251953125,176.86705017089844 359.1856689453125,223.93446350097656 320,192.22222900390625 280.8143310546875,223.93446350097656 298.86541748046875,176.86705017089844 256.5962371826172,149.39886474609375 306.9381103515625,152.0218505859375 320,103.33333587646484 333.0618896484375,152.0218505859375 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5" transform="rotate(25 320 163.634)"/>
+  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="300,83 313.1272039678652,131.93195379229283 363.72078659177527,129.29586137687852 321.2402621972584,156.90137954104048 339.3816119035957,204.20413862312148 300,172.33333333333334 260.6183880964043,204.20413862312148 278.7597378027416,156.90137954104048 236.2792134082247,129.29586137687852 286.8727960321348,131.93195379229286 300,83 313.1272039678652,131.93195379229283 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
+  <polygon class="svg_2_class" cx="300" cy="150" fill="#FF0000" id="svg_2_id" orient="point" point="5" points="320,103 333.127197265625,151.9319610595703 383.7207946777344,149.29586791992188 341.2402648925781,176.90138244628906 359.3816223144531,224.20413208007812 320,192.3333282470703 280.6183776855469,224.20413208007812 298.7597351074219,176.90138244628906 256.2792205810547,149.29586791992188 306.872802734375,151.9319610595703 320,103 333.127197265625,151.9319610595703 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5" transform="rotate(25 320 163.602)"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario7-check tool_star_change_sides.svg

@@ -1,7 +1,7 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="300" cy="150" fill="#bf0000" id="svg_1" orient="point" point="6" points="575.9783673967634,70.14305132911319 587.0894785078744,117.56470902279233 633.713394315726,103.47638466244652 598.2005896189855,136.80971799577986 633.713394315726,170.14305132911318 587.0894785078744,156.0547269687674 575.9783673967634,203.47638466244655 564.8672562856523,156.0547269687674 518.2433404778008,170.14305132911323 553.7561451745412,136.80971799577986 518.2433404778008,103.47638466244652 564.8672562856523,117.56470902279233 575.9783673967634,70.14305132911319 587.0894785078744,117.56470902279233 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#0000bf" stroke-width="15"/>
+  <polygon cx="300" cy="150" fill="#bf0000" id="svg_1" orient="point" point="6" points="575.6707502092634,69.74376460484095 586.83741687593,117.40253058698849 633.6944522628207,103.24376460484095 598.0040835425967,136.74376460484095 633.6944522628207,170.24376460484092 586.83741687593,156.0849986226934 575.6707502092634,203.74376460484095 564.5040835425967,156.0849986226934 517.647048155706,170.24376460484098 553.33741687593,136.74376460484095 517.647048155706,103.24376460484095 564.5040835425967,117.40253058698849 575.6707502092634,69.74376460484095 586.83741687593,117.40253058698849 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#0000bf" stroke-width="15"/>
  </g>
 
 </svg>

cypress/__svgSnapshots__/scenario7-check tool_star_change_stoke_fill_color.svg

@@ -1,7 +1,7 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="300" cy="150" fill="#bf0000" id="svg_1" orient="point" point="5" points="574.0962219238281,83.33333587646484 587.1581115722656,132.0218505859375 637.5,129.39886474609375 595.2308044433594,156.86705017089844 613.2818908691406,203.93446350097656 574.0962219238281,172.22222900390625 534.9105529785156,203.93446350097656 552.9616394042969,156.86705017089844 510.6924591064453,129.39886474609375 561.0343322753906,132.0218505859375 574.0962219238281,83.33333587646484 587.1581115722656,132.0218505859375 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#0000bf" stroke-width="15"/>
+  <polygon cx="300" cy="150" fill="#bf0000" id="svg_1" orient="point" point="5" points="573.7792053222656,83 586.9064025878906,131.9319610595703 637.5,129.29586791992188 595.0194702148438,156.90138244628906 613.1608276367188,204.20413208007812 573.7792053222656,172.3333282470703 534.3975830078125,204.20413208007812 552.5389404296875,156.90138244628906 510.0584259033203,129.29586791992188 560.6520080566406,131.9319610595703 573.7792053222656,83 586.9064025878906,131.9319610595703 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#0000bf" stroke-width="15"/>
  </g>
 
 </svg>

cypress/__svgSnapshots__/scenario7-check tool_star_change_stroke_width.svg

@@ -1,7 +1,7 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="574.0962219238281,83.33333587646484 587.1581115722656,132.0218505859375 637.5,129.39886474609375 595.2308044433594,156.86705017089844 613.2818908691406,203.93446350097656 574.0962219238281,172.22222900390625 534.9105529785156,203.93446350097656 552.9616394042969,156.86705017089844 510.6924591064453,129.39886474609375 561.0343322753906,132.0218505859375 574.0962219238281,83.33333587646484 587.1581115722656,132.0218505859375 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="15"/>
+  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="573.7792053222656,83 586.9064025878906,131.9319610595703 637.5,129.29586791992188 595.0194702148438,156.90138244628906 613.1608276367188,204.20413208007812 573.7792053222656,172.3333282470703 534.3975830078125,204.20413208007812 552.5389404296875,156.90138244628906 510.0584259033203,129.29586791992188 560.6520080566406,131.9319610595703 573.7792053222656,83 586.9064025878906,131.9319610595703 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="15"/>
  </g>
 
 </svg>

cypress/__svgSnapshots__/scenario7-check tool_star_clone.svg

@@ -1,7 +1,7 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
-  <polygon cx="300" cy="150" fill="#FF0000" id="svg_2" orient="point" point="5" points="320,103.33333587646484 333.0618896484375,152.0218505859375 383.4037780761719,149.39886474609375 341.13458251953125,176.86705017089844 359.1856689453125,223.93446350097656 320,192.22222900390625 280.8143310546875,223.93446350097656 298.86541748046875,176.86705017089844 256.5962371826172,149.39886474609375 306.9381103515625,152.0218505859375 320,103.33333587646484 333.0618896484375,152.0218505859375 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
+  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="300,83 313.1272039678652,131.93195379229283 363.72078659177527,129.29586137687852 321.2402621972584,156.90137954104048 339.3816119035957,204.20413862312148 300,172.33333333333334 260.6183880964043,204.20413862312148 278.7597378027416,156.90137954104048 236.2792134082247,129.29586137687852 286.8727960321348,131.93195379229286 300,83 313.1272039678652,131.93195379229283 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
+  <polygon cx="300" cy="150" fill="#FF0000" id="svg_2" orient="point" point="5" points="320,103 333.127197265625,151.9319610595703 383.7207946777344,149.29586791992188 341.2402648925781,176.90138244628906 359.3816223144531,224.20413208007812 320,192.3333282470703 280.6183776855469,224.20413208007812 298.7597351074219,176.90138244628906 256.2792205810547,149.29586791992188 306.872802734375,151.9319610595703 320,103 333.127197265625,151.9319610595703 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
  </g>
 </svg>

cypress/__svgSnapshots__/scenario7-check tool_star_delete.svg

@@ -1,7 +1,7 @@
 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g class="layer">
   <title>Layer 1</title>
-  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="300,83.33333333333333 313.0618944953883,132.02184456944562 363.40376775301024,129.39886704167017 321.13458925100343,156.86704431944327 339.18568348616486,203.93446629166317 300,172.22222222222223 260.81431651383514,203.93446629166317 278.86541074899657,156.86704431944327 236.59623224698976,129.39886704167017 286.9381055046117,132.02184456944562 300,83.33333333333333 313.0618944953883,132.02184456944562 " r="66.67" r2="22.22" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
+  <polygon cx="300" cy="150" fill="#FF0000" id="svg_1" orient="point" point="5" points="300,83 313.1272039678652,131.93195379229283 363.72078659177527,129.29586137687852 321.2402621972584,156.90137954104048 339.3816119035957,204.20413862312148 300,172.33333333333334 260.6183880964043,204.20413862312148 278.7597378027416,156.90137954104048 236.2792134082247,129.29586137687852 286.8727960321348,131.93195379229286 300,83 313.1272039678652,131.93195379229283 " r="67" r2="22.33" radialshift="0" shape="star" starRadiusMultiplier="3" stroke="#000000" stroke-width="5"/>
  </g>
 
 </svg>

cypress/e2e/ui/issues/issue-752.cy.js

@@ -34,6 +34,6 @@ describe('Fix issue 752', function () {
       .trigger('mousemove', 203, 205, { force: true })
       .trigger('mouseup', { force: true })
 
-    cy.get('#selectedBox0').should('have.attr', 'd', 'M174,174 L246,174 246,246 174,246z')
+    cy.get('#selectedBox0').should('have.attr', 'd', 'M192,194 L284,194 284,286 192,286z')
   })
 })

cypress/e2e/ui/scenario.cy.js

@@ -192,7 +192,7 @@ describe('use text tools of svg-edit', function () {
   })
   it('check tool_length_adjust', function () {
     cy.get('#svg_1').click({ force: true })
-    cy.get('#tool_length_adjust').shadow().find('select').select(1)
+    cy.get('#tool_length_adjust').shadow().find('select').select(1, { force: true })
     cy.svgSnapshot()
   })
   it('check tool_text_change_rotation', function () {

cypress/e2e/ui/scenario2.cy.js

@@ -23,8 +23,8 @@ describe('use ellipse and circle of svg-edit', function () {
     cy.get('#tool_circle')
       .click({ force: true })
     cy.get('#svgcontent')
-      .trigger('mousedown', 150, 150, { force: true })
-      .trigger('mousemove', 250, 200, { force: true })
+      .trigger('mousedown', 200, 200, { force: true })
+      .trigger('mousemove', 300, 200, { force: true })
       .trigger('mouseup', { force: true })
     cy.svgSnapshot()
   })
@@ -32,19 +32,19 @@ describe('use ellipse and circle of svg-edit', function () {
     cy.get('#tool_fhellipse')
       .click({ force: true })
     cy.get('#svgcontent')
-      .trigger('mousedown', 200, 80, { force: true })
-      .trigger('mousemove', 320, 80, { force: true })
-      .trigger('mousemove', 320, 180, { force: true })
-      .trigger('mousemove', 200, 180, { force: true })
-      .trigger('mousemove', 200, 80, { force: true })
-      .trigger('mouseup', 200, 80, { force: true })
+      .trigger('mousedown', 400, 200, { force: true }).wait(100)
+      .trigger('mousemove', { force: true, pageX: 400, pageY: 200 }).wait(100)
+      .trigger('mousemove', { force: true, pageX: 400, pageY: 300 }).wait(100)
+      .trigger('mousemove', { force: true, pageX: 300, pageY: 400 }).wait(100)
+      .trigger('mousemove', { force: true, pageX: 200, pageY: 200 }).wait(100)
+      .trigger('mouseup', 200, 100, { force: true })
     cy.svgSnapshot()
   })
   it('check tool_ellipse', function () {
     cy.get('#tool_ellipse').click({ force: true })
     cy.get('#svgcontent')
-      .trigger('mousedown', 75, 150, { force: true })
-      .trigger('mousemove', 130, 175, { force: true })
+      .trigger('mousedown', 100, 300, { force: true })
+      .trigger('mousemove', 200, 200, { force: true })
       .trigger('mouseup', { force: true })
     cy.svgSnapshot()
   })
@@ -80,11 +80,11 @@ describe('use ellipse and circle of svg-edit', function () {
   })
   it('check tool_ellipse_change_cx_cy_coordinate', function () {
     cy.get('#svg_3').click({ force: true })
-    for (let n = 0; n < 25; n++) {
+    for (let n = 0; n < 20; n++) {
       cy.get('#ellipse_cx').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
         .click({ force: true })
     }
-    for (let n = 0; n < 25; n++) {
+    for (let n = 0; n < 20; n++) {
       cy.get('#ellipse_cy').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
         .click({ force: true })
     }
@@ -92,11 +92,11 @@ describe('use ellipse and circle of svg-edit', function () {
   })
   it('check tool_ellipse_change_rx_ry_radius', function () {
     cy.get('#svg_3').click({ force: true })
-    for (let n = 0; n < 25; n++) {
+    for (let n = 0; n < 20; n++) {
       cy.get('#ellipse_rx').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
         .click({ force: true })
     }
-    for (let n = 0; n < 25; n++) {
+    for (let n = 0; n < 20; n++) {
       cy.get('#ellipse_ry').shadow().find('elix-number-spin-box').eq(0).shadow().find('#upButton').eq(0)
         .click({ force: true })
     }

cypress/e2e/unit/zoom.cy.js

@@ -6,20 +6,15 @@ describe('UI - Zoom tool', function () {
   })
 
   it('should be able to open', function () {
+    cy.get('#tool-wrapper > input')
+      .click({ force: true })
     cy.get('#zoom')
-      .click()
       .shadow()
       .find('#options-container')
       .should('have.css', 'display', 'flex')
   })
 
   it('should be able to close', function () {
-    cy.get('#zoom')
-      .click()
-      .shadow()
-      .find('#options-container')
-      .should('have.css', 'display', 'flex')
-
     cy.get('#tool_select')
       .click({ force: true })
       .get('#zoom')
@@ -35,7 +30,7 @@ describe('UI - Zoom tool', function () {
         cy.get('#zoom')
           .shadow()
           .find('input')
-          .type('200')
+          .type('200', { force: true })
         cy.get('#tool_select')
           .click({ force: true })
         cy.get('#canvasBackground')
@@ -51,7 +46,7 @@ describe('UI - Zoom tool', function () {
         cy.get('#zoom')
           .shadow()
           .find('#arrow-up')
-          .click()
+          .click({ force: true })
         cy.get('#canvasBackground')
           .invoke('attr', 'width')
           .should('equal', (width * 1.1).toString())
@@ -65,7 +60,7 @@ describe('UI - Zoom tool', function () {
         cy.get('#zoom')
           .shadow()
           .find('#arrow-down')
-          .click()
+          .click({ force: true })
         cy.get('#canvasBackground')
           .invoke('attr', 'width')
           .should('equal', (width * 0.9).toString())
@@ -77,7 +72,7 @@ describe('UI - Zoom tool', function () {
       .invoke('attr', 'width')
       .then(width => {
         cy.get('#zoom')
-          .click()
+          .click({ force: true })
           .find('se-text')
           .first()
           .click({ force: true })
@@ -116,7 +111,7 @@ describe('UI - Zoom tool', function () {
       .invoke('attr', 'width')
       .then(width => {
         cy.get('#zoom')
-          .click()
+          .click({ force: true })
           .find("se-text[value='layer']")
           .click({ force: true })
         cy.get('#zoom')
@@ -135,7 +130,7 @@ describe('UI - Zoom tool', function () {
       .invoke('attr', 'width')
       .then(width => {
         cy.get('#zoom')
-          .click()
+          .click({ force: true })
           .find("se-text[value='canvas']")
           .click({ force: true })
         cy.get('#zoom')
@@ -168,7 +163,7 @@ describe('UI - Zoom tool', function () {
       .invoke('attr', 'width')
       .then(width => {
         cy.get('#zoom')
-          .click()
+          .click({ force: true })
           .find("se-text[value='layer']")
           .click({ force: true })
         cy.get('#zoom')
@@ -201,7 +196,7 @@ describe('UI - Zoom tool', function () {
       .invoke('attr', 'width')
       .then(width => {
         cy.get('#zoom')
-          .click()
+          .click({ force: true })
           .find("se-text[value='content']")
           .click({ force: true })
         cy.get('#zoom')

cypress/plugins/main.js

@@ -7,9 +7,6 @@ export default (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
 
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-
   // https://docs.cypress.io/guides/tooling/code-coverage.html#Install-the-plugin
   codeCoverageTask(on, config)
 

cypress/support/ui-test-helper.js

@@ -2,6 +2,8 @@ export const visitAndApproveStorage = () => {
   cy.clearLocalStorage()
   cy.visit('/src/editor/index.html')
   cy.get('#storage_ok').click({ force: true })
+  // move to English and snap mode (to correct potential differences between CI and local tests )
+  selectEnglishAndSnap()
 }
 
 export const openMainMenu = () => {
@@ -10,11 +12,12 @@ export const openMainMenu = () => {
 
 export const openEditorPreferences = () => {
   openMainMenu()
-  return cy.get('#tool_editor_prefs').click()
+  return cy.get('#tool_editor_prefs').click({ force: true })
 }
 
-export const selectEnglish = () => {
+export const selectEnglishAndSnap = () => {
   openEditorPreferences()
-  cy.get('#lang_select').select('en')
-  cy.get('#tool_prefs_save').click()
+  cy.get('#lang_select').select('en', { force: true })
+  cy.get('#grid_snapping_on').click({ force: true })
+  cy.get('#tool_prefs_save').click({ force: true })
 }