fix: Scale Gizmo

Author: cyaiox

packages/@dcl/inspector/src/lib/babylon/decentraland/gizmos/ScaleGizmo.ts

@@ -2,14 +2,16 @@ import { Vector3, TransformNode, GizmoManager, Quaternion, Matrix } from '@babyl
 import { Entity } from '@dcl/ecs'
 import { EcsEntity } from '../EcsEntity'
 import { IGizmoTransformer } from './types'
-import { TransformUtils } from './utils'
 
 export class ScaleGizmo implements IGizmoTransformer {
   private initialOffsets = new Map<Entity, Vector3>()
   private initialScales = new Map<Entity, Vector3>()
   private initialRotations = new Map<Entity, Quaternion>()
+  private initialPositions = new Map<Entity, Vector3>()
+  private pivotPosition: Vector3 | null = null
   private initialGizmoScale: Vector3 | null = null
   private changeHandlers: (() => void)[] = []
+  private isDragging = false
 
   constructor(private gizmoManager: GizmoManager) {}
 
@@ -25,38 +27,52 @@ export class ScaleGizmo implements IGizmoTransformer {
     this.initialOffsets.clear()
     this.initialScales.clear()
     this.initialRotations.clear()
+    this.initialPositions.clear()
     this.initialGizmoScale = null
+    this.pivotPosition = null
+    this.isDragging = false
   }
 
   onDragStart(entities: EcsEntity[], gizmoNode: TransformNode): void {
-    const centroid = gizmoNode.position.clone()
+    if (this.isDragging) return
+
+    this.isDragging = true
+
+    // Calculate pivot position (centroid of all selected entities)
+    this.pivotPosition = new Vector3()
+    for (const entity of entities) {
+      const worldPosition = entity.getAbsolutePosition()
+      this.pivotPosition.addInPlace(worldPosition)
+    }
+    this.pivotPosition.scaleInPlace(1 / entities.length)
+
+    // Store initial gizmo scale
+    this.initialGizmoScale = gizmoNode.scaling.clone()
+
+    // Store initial state for all entities
     this.initialOffsets.clear()
     this.initialScales.clear()
     this.initialRotations.clear()
-    this.initialGizmoScale = gizmoNode.scaling.clone()
+    this.initialPositions.clear()
 
     for (const entity of entities) {
       const worldPosition = entity.getAbsolutePosition()
-      const offset = worldPosition.subtract(centroid)
-      this.initialOffsets.set(entity.entityId, offset)
 
-      const worldRotation = TransformUtils.getWorldRotation(entity)
-      this.initialRotations.set(entity.entityId, worldRotation)
+      // Store initial transforms
+      this.initialPositions.set(entity.entityId, entity.position.clone())
+      this.initialScales.set(entity.entityId, entity.scaling.clone())
+      this.initialRotations.set(entity.entityId, entity.rotationQuaternion?.clone() || Quaternion.Identity())
 
-      const parent = entity.parent instanceof TransformNode ? entity.parent : null
-      const parentScale = TransformUtils.getParentWorldScale(parent)
-      const worldScale = new Vector3(
-        entity.scaling.x * parentScale.x,
-        entity.scaling.y * parentScale.y,
-        entity.scaling.z * parentScale.z
-      )
-      this.initialScales.set(entity.entityId, worldScale)
+      // Store offset from pivot (for proportional scaling)
+      const offset = worldPosition.subtract(this.pivotPosition)
+      this.initialOffsets.set(entity.entityId, offset)
     }
   }
 
   update(entities: EcsEntity[], gizmoNode: TransformNode): void {
-    if (!this.initialGizmoScale) return
+    if (!this.isDragging || !this.initialGizmoScale || !this.pivotPosition) return
 
+    // Calculate scale change from gizmo
     const scaleChange = new Vector3(
       gizmoNode.scaling.x / this.initialGizmoScale.x,
       gizmoNode.scaling.y / this.initialGizmoScale.y,
@@ -67,11 +83,15 @@ export class ScaleGizmo implements IGizmoTransformer {
       const offset = this.initialOffsets.get(entity.entityId)
       const initialScale = this.initialScales.get(entity.entityId)
       const initialRotation = this.initialRotations.get(entity.entityId)
-      if (!offset || !initialScale || !initialRotation) continue
+      const initialPosition = this.initialPositions.get(entity.entityId)
+
+      if (!offset || !initialScale || !initialRotation || !initialPosition) continue
 
+      // Scale the offset proportionally (like Blender's proportional scaling)
       const scaledOffset = new Vector3(offset.x * scaleChange.x, offset.y * scaleChange.y, offset.z * scaleChange.z)
-      const newWorldPosition = gizmoNode.position.add(scaledOffset)
+      const newWorldPosition = this.pivotPosition.add(scaledOffset)
 
+      // Scale the entity's scale
       const newWorldScale = new Vector3(
         initialScale.x * scaleChange.x,
         initialScale.y * scaleChange.y,
@@ -81,50 +101,35 @@ export class ScaleGizmo implements IGizmoTransformer {
       const parent = entity.parent instanceof TransformNode ? entity.parent : null
 
       if (parent) {
+        // For child entities, convert world transforms to local space
         const parentWorldMatrix = parent.getWorldMatrix()
-        const parentScale = TransformUtils.getParentWorldScale(parent)
-        const parentRotation =
-          parent.rotationQuaternion ||
-          Quaternion.FromRotationMatrix(
-            Matrix.FromValues(
-              parentWorldMatrix.m[0],
-              parentWorldMatrix.m[1],
-              parentWorldMatrix.m[2],
-              0,
-              parentWorldMatrix.m[4],
-              parentWorldMatrix.m[5],
-              parentWorldMatrix.m[6],
-              0,
-              parentWorldMatrix.m[8],
-              parentWorldMatrix.m[9],
-              parentWorldMatrix.m[10],
-              0,
-              0,
-              0,
-              0,
-              1
-            )
-          )
-
-        const localPosition = TransformUtils.convertToLocalPosition(newWorldPosition, parent)
-        entity.position.copyFrom(localPosition)
+        const parentWorldMatrixInverse = parentWorldMatrix.clone().invert()
+        const parentWorldRotation = parent.rotationQuaternion || Quaternion.FromRotationMatrix(parentWorldMatrix)
 
-        entity.scaling.set(
-          newWorldScale.x / parentScale.x,
-          newWorldScale.y / parentScale.y,
-          newWorldScale.z / parentScale.z
-        )
+        // Convert world position to local space
+        const localPosition = Vector3.TransformCoordinates(newWorldPosition, parentWorldMatrixInverse)
 
-        const scaleCompensationMatrix = Matrix.Scaling(1 / parentScale.x, 1 / parentScale.y, 1 / parentScale.z)
-        const compensatedRotation = initialRotation.multiply(Quaternion.FromRotationMatrix(scaleCompensationMatrix))
-        const localRotation = parentRotation.invert().multiply(compensatedRotation)
+        // Convert world rotation to local space
+        const localRotation = parentWorldRotation.invert().multiply(initialRotation)
 
+        // Apply scale directly to the child without considering parent's scale
+        // This maintains the local scale as intended by the user
+        const localScale = new Vector3(
+          initialScale.x * scaleChange.x,
+          initialScale.y * scaleChange.y,
+          initialScale.z * scaleChange.z
+        )
+
+        // Apply transforms
+        entity.position.copyFrom(localPosition)
+        entity.scaling.copyFrom(localScale)
         if (!entity.rotationQuaternion) {
           entity.rotationQuaternion = new Quaternion()
         }
         entity.rotationQuaternion.copyFrom(localRotation)
         entity.rotationQuaternion.normalize()
       } else {
+        // For entities without parent, apply world transforms directly
         entity.position.copyFrom(newWorldPosition)
         entity.scaling.copyFrom(newWorldScale)
         if (!entity.rotationQuaternion) {
@@ -134,15 +139,22 @@ export class ScaleGizmo implements IGizmoTransformer {
         entity.rotationQuaternion.normalize()
       }
 
-      this.changeHandlers.forEach((handler) => handler())
+      // Force update world matrix
+      entity.computeWorldMatrix(true)
     }
+
+    // Notify change handlers
+    this.changeHandlers.forEach((handler) => handler())
   }
 
   onDragEnd(): void {
+    this.isDragging = false
+    this.initialGizmoScale = null
+    this.pivotPosition = null
     this.initialOffsets.clear()
     this.initialScales.clear()
     this.initialRotations.clear()
-    this.initialGizmoScale = null
+    this.initialPositions.clear()
   }
 
   onChange(callback: () => void): () => void {