From 6d610cd2d552aadfe17c9f913ebc6b52376d2450 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BAlia=20Roldi?= <juliaroldi@microsoft.com>
Date: Mon, 14 Aug 2023 17:15:29 -0300
Subject: [PATCH] fix flipped image

---
 .../lib/plugins/ImageEdit/ImageEdit.ts        | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/ImageEdit.ts b/packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/ImageEdit.ts
index b9e8f516e2e..7173d0e0f49 100644
--- a/packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/ImageEdit.ts
+++ b/packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/ImageEdit.ts
@@ -432,11 +432,6 @@ export default class ImageEdit implements EditorPlugin {
             // Set image src to original src to help show editing UI, also it will be used when regenerate image dataURL after editing
             if (this.clonedImage) {
                 this.clonedImage.src = this.pngSource ?? this.editInfo.src;
-                setFlipped(
-                    this.clonedImage,
-                    this.editInfo.flippedHorizontal,
-                    this.editInfo.flippedVertical
-                );
                 this.clonedImage.style.position = 'absolute';
             }
 
@@ -525,6 +520,8 @@ export default class ImageEdit implements EditorPlugin {
                 leftPercent,
                 rightPercent,
                 topPercent,
+                flippedHorizontal,
+                flippedVertical,
             } = this.editInfo;
 
             // Width/height of the image
@@ -557,6 +554,9 @@ export default class ImageEdit implements EditorPlugin {
             this.clonedImage.style.width = getPx(originalWidth);
             this.clonedImage.style.height = getPx(originalHeight);
 
+            //Update flip direction
+            setFlipped(this.clonedImage.parentElement, flippedHorizontal, flippedVertical);
+
             if (this.isCropping) {
                 // For crop, we also need to set position of the overlays
                 setSize(
@@ -777,11 +777,13 @@ function getColorString(color: string | ModeIndependentColor, isDarkMode: boolea
 }
 
 function setFlipped(
-    element: HTMLImageElement,
+    element: HTMLElement | null,
     flippedHorizontally?: boolean,
     flippedVertically?: boolean
 ) {
-    element.style.transform = `scale(${flippedHorizontally ? '-1' : '1'}, ${
-        flippedVertically ? '-1' : '1'
-    })`;
+    if (element) {
+        element.style.transform = `scale(${flippedHorizontally ? -1 : 1}, ${
+            flippedVertically ? -1 : 1
+        })`;
+    }
 }