Merge pull request #2028 from microsoft/u/juliaroldi/image-flipped

Fix flipped image
microsoft · Aug 14, 2023 · e1a5c28 · e1a5c28
2 parents a417d9e + a4f0941
commit e1a5c28
Showing 1 changed file with 11 additions and 9 deletions.
diff --git 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
+        })`;
+    }
 }