From e2ad8211a5cc36641155492f4ce9e6e302882ba3 Mon Sep 17 00:00:00 2001
From: cg-scorpio <90409381+cg-scorpio@users.noreply.github.com>
Date: Fri, 14 Oct 2022 20:17:49 +0200
Subject: [PATCH] =?UTF-8?q?Fix:=20applies=20the=20transformation=20of=20th?=
 =?UTF-8?q?e=20parent=20element=20in=20addition=20to=20=E2=80=A6=20(#839)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix: applies the transformation of the parent element in addition to that of the selected element

* Fix:  delete debug logs and use a ternary operator
---
 packages/svgcanvas/select.js | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/svgcanvas/select.js b/packages/svgcanvas/select.js
index d4943d76..811b56f7 100644
--- a/packages/svgcanvas/select.js
+++ b/packages/svgcanvas/select.js
@@ -8,7 +8,8 @@
 
 import { isWebkit } from '../../src/common/browser.js'
 import { getRotationAngle, getBBox, getStrokedBBox } from './utilities.js'
-import { transformListToTransform, transformBox, transformPoint } from './math.js'
+import { transformListToTransform, transformBox, transformPoint, matrixMultiply } from './math.js'
+import { NS } from './namespaces'
 
 let svgCanvas
 let selectorManager_ // A Singleton
@@ -122,9 +123,24 @@ export class Selector {
       offset += 2 / zoom
     }
 
+    // find the transformations applied to the parent of the selected element
+    const svg = document.createElementNS(NS.SVG, 'svg')
+    let parentTransformationMatrix = svg.createSVGMatrix()
+    let currentElt = selected
+    while (currentElt.parentNode) {
+      if (currentElt.parentNode && currentElt.parentNode.tagName === 'g' && currentElt.parentNode.transform) {
+        if (currentElt.parentNode.transform.baseVal.numberOfItems) {
+          parentTransformationMatrix = matrixMultiply(transformListToTransform(selected.parentNode.transform.baseVal).matrix, parentTransformationMatrix)
+        }
+      }
+      currentElt = currentElt.parentNode
+    }
+
     // loop and transform our bounding box until we reach our first rotation
     const tlist = selected.transform.baseVal
-    const m = transformListToTransform(tlist).matrix
+
+    // combines the parent transformation with that of the selected element if necessary
+    const m = parentTransformationMatrix ? matrixMultiply(parentTransformationMatrix, transformListToTransform(tlist).matrix) : transformListToTransform(tlist).matrix
 
     // This should probably be handled somewhere else, but for now
     // it keeps the selection box correctly positioned when zoomed