transform of elements where matrix transform is applied are broken

[ievgennaida]

Describe the bug
Transformation are not properly handled on scale, translate, resize when grouped.

To Reproduce
Try to move the transformed element with the transformed parents

				<g transform="skewX(30) translate(-3,4) rotate(3)">
					<g transform="skewX(10) translate(-3,4) rotate(10)">

							       <circle
       style="opacity:1;fill:blue;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.02833551;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
       id="circle"
       cx="40.61157"
       cy="40"
       r="5"
       transform="translate(250,-50) translate(0,50) translate(95,76.5) skewX(11)  translate(50,50) scale(1.5) translate(-50,-50) translate(0,0) rotate(45) rotate(45) skewX(12) rotate(11) skewY(50) translate(50,50) scale(1.5)" />
	   
					</g>

				</g>
			</g>```


**Expected behavior**
Groups and matrix transforms should be supported. 

[jfhenon]

OK, I could indeed reproduce the problem with this svg:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
 <g class="layer">
  <title>Layer 1</title>
  <g id="svg_1" transform="skewX(30) translate(-3,4) rotate(3)">
   <g id="svg_2" transform="skewX(10) translate(-3,4) rotate(10)">
    <circle cx="40.61157" cy="40" fill="blue" fill-rule="nonzero" id="circle" r="5" stroke="#000000" stroke-dashoffset="0" stroke-linejoin="round" stroke-miterlimit="4" stroke-width="0.02834" transform="translate(250,-50) translate(0,50) translate(95,76.5) skewX(11)  translate(50,50) scale(1.5) translate(-50,-50) translate(0,0) rotate(45) rotate(45) skewX(12) rotate(11) skewY(50) translate(50,50) scale(1.5)"/>
   </g>
  </g>
 </g>
</svg>

[jfhenon]

update on this one.

• The issue is also present on older version (5.1.0) SVGEdit.
• event.js with MouseDown and MouseMove event are a good place to start investigating the issue.

[gbrlsepulveda]

This one in particular is related to dimension calculation

Follow this step to

• Open the editor
• Add a new svg from the previous snippet

  •  <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
      <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
      <g class="layer">
       <title>Layer 1</title>
       <g id="svg_1" transform="skewX(30) translate(-3,4) rotate(3)">
        <g id="svg_2" transform="skewX(10) translate(-3,4) rotate(10)">
         <circle cx="40.61157" cy="40" fill="blue" fill-rule="nonzero" id="circle" r="5" stroke="#000000" stroke-dashoffset="0" stroke-linejoin="round" stroke-miterlimit="4" stroke-width="0.02834" transform="translate(250,-50) translate(0,50) translate(95,76.5) skewX(11)  translate(50,50) scale(1.5) translate(-50,-50) translate(0,0) rotate(45) rotate(45) skewX(12) rotate(11) skewY(50) translate(50,50) scale(1.5)"/>
        </g>
       </g>
      </g>
     </svg>

• Drag the icon and see issue happening
  • 
• Go to src/svgcanvas/event.js:621
  • Remove the command svgCanvas.recalculateAllSelectedDimensions()
• Refresh the page and drag the icon again. The issue is not happening anymore
  • 

I'm still into to it to get more information about this bug

[jfhenon]

Good start. Let me know if you think you have the full solution.