From ab16976084573087fd85e388a6ee48235705a5b6 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 5 Aug 2024 20:52:16 +1000
Subject: [PATCH] feat(ui): move resetScale to transformer

---
 .../controlLayers/konva/CanvasLayer.ts        | 12 ----------
 .../controlLayers/konva/CanvasTransformer.ts  | 22 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts
index c2e0a344ec..142584e7c8 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasLayer.ts
@@ -145,17 +145,6 @@ export class CanvasLayer {
     this.konva.objectGroup.opacity(opacity);
   };
 
-  resetScale = () => {
-    const attrs = {
-      scaleX: 1,
-      scaleY: 1,
-      rotation: 0,
-    };
-    this.konva.objectGroup.setAttrs(attrs);
-    this.transformer.konva.bboxOutline.setAttrs(attrs);
-    this.transformer.konva.proxyRect.setAttrs(attrs);
-  };
-
   rasterize = async () => {
     this.log.debug('Rasterizing layer');
 
@@ -169,7 +158,6 @@ export class CanvasLayer {
     const imageDTO = await uploadImage(blob, `${this.id}_rasterized.png`, 'other', true);
     const imageObject = imageDTOToImageObject(imageDTO);
     await this.renderer.renderObject(imageObject, true);
-    this.resetScale();
     this.manager.stateApi.rasterizeEntity(
       { id: this.id, imageObject, position: { x: Math.round(rect.x), y: Math.round(rect.y) } },
       this.type
diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts
index ad4b82b663..93854f6b7b 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTransformer.ts
@@ -512,12 +512,32 @@ export class CanvasTransformer {
 
     this.isTransforming = false;
     this.setInteractionMode('off');
-    this.parent.resetScale();
+
+    // Reset the scale of the the entity. We've either replaced the transformed objects with a rasterized image, or
+    // canceled a transformation. In either case, the scale should be reset.
+    this.resetScale();
+
     this.parent.updatePosition();
     this.updateBbox();
     this.syncInteractionState();
   };
 
+  /**
+   * Resets the scale of the transformer and the entity.
+   * When the entity is transformed, it's scale and rotation are modified by the transformer. After canceling or applying
+   * a transformation, the scale and rotation should be reset to the original values.
+   */
+  resetScale = () => {
+    const attrs = {
+      scaleX: 1,
+      scaleY: 1,
+      rotation: 0,
+    };
+    this.parent.konva.objectGroup.setAttrs(attrs);
+    this.konva.bboxOutline.setAttrs(attrs);
+    this.konva.proxyRect.setAttrs(attrs);
+  };
+
   /**
    * Sets the transformer to a specific interaction mode.
    * @param interactionMode The mode to set the transformer to. The transformer can be in one of three modes: