From 592562450b84dc1d79d8c09049b637b7e802a7b1 Mon Sep 17 00:00:00 2001
From: Jiuqing Song <jisong@microsoft.com>
Date: Wed, 7 Jul 2021 10:24:20 -0700
Subject: [PATCH] 8.5.0 Fix resize border

---
 package.json                                  |  2 +-
 .../plugins/ImageResize/ImageResizeHandler.ts | 69 +++++++++----------
 2 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index 31837871ba4..68f16beee3b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "roosterjs",
-    "version": "8.4.0",
+    "version": "8.5.0",
     "description": "Framework-independent javascript editor",
     "repository": {
         "type": "git",
diff --git a/packages/roosterjs-editor-plugins/lib/plugins/ImageResize/ImageResizeHandler.ts b/packages/roosterjs-editor-plugins/lib/plugins/ImageResize/ImageResizeHandler.ts
index 917e04a63ed..0e0bc838f23 100644
--- a/packages/roosterjs-editor-plugins/lib/plugins/ImageResize/ImageResizeHandler.ts
+++ b/packages/roosterjs-editor-plugins/lib/plugins/ImageResize/ImageResizeHandler.ts
@@ -43,11 +43,6 @@ const enum YCoordinate {
     Top = 2,
 }
 
-const enum STEP {
-    AllResize = 1,
-    CornerResize = 2,
-}
-
 type ResizeContext = [XCoordinate, YCoordinate];
 
 /**
@@ -145,40 +140,44 @@ export default class ImageResizeHandler {
 
         wrapper.style.position = 'relative';
         wrapper.style.display = Browser.isSafari ? 'inline-block' : 'inline-flex';
-        const step = this.editor.isFeatureEnabled(ExperimentalFeatures.SingleDirectionResize)
-            ? STEP.AllResize
-            : STEP.CornerResize;
+        const sideResize = this.editor.isFeatureEnabled(ExperimentalFeatures.SingleDirectionResize);
 
-        for (let x: XCoordinate = XCoordinate.Left; x <= XCoordinate.Right; x += step) {
+        for (let x: XCoordinate = XCoordinate.Left; x <= XCoordinate.Right; x++) {
             this.resizeHelpers[x] = [];
-            for (let y: YCoordinate = YCoordinate.Bottom; y <= YCoordinate.Top; y += step) {
+            for (let y: YCoordinate = YCoordinate.Bottom; y <= YCoordinate.Top; y++) {
                 const direction = DIRECTIONS[x][y];
-                const html = direction
-                    ? `<div style="position:absolute;${x == XCoordinate.Left ? 'left' : 'right'}:${
-                          x == XCoordinate.Center ? '50%' : '0px'
-                      };${y == YCoordinate.Top ? 'top' : 'bottom'}:${
-                          y == YCoordinate.Middle ? '50%' : '0px'
-                      }">
+                const html =
+                    !sideResize && (x == XCoordinate.Center) != (y == YCoordinate.Middle)
+                        ? ''
+                        : direction
+                        ? `<div style="position:absolute;${
+                              x == XCoordinate.Left ? 'left' : 'right'
+                          }:${x == XCoordinate.Center ? '50%' : '0px'};${
+                              y == YCoordinate.Top ? 'top' : 'bottom'
+                          }:${y == YCoordinate.Middle ? '50%' : '0px'}">
                     <div style="position:relative;width:${HANDLE_SIZE}px;height:${HANDLE_SIZE}px;background-color: ${
-                          this.selectionBorderColor
-                      };cursor:${direction}-resize;${
-                          y == YCoordinate.Top ? 'top' : 'bottom'
-                      }:-${HANDLE_MARGIN}px;${
-                          x == XCoordinate.Left ? 'left' : 'right'
-                      }:-${HANDLE_MARGIN}px"></div></div>`
-                    : `<div style="position:absolute;left:0;right:0;top:0;bottom:0;border:solid 1px ${this.selectionBorderColor};pointer-events:none;">`;
-                const div = fromHtml(html, doc)[0] as HTMLElement;
-                wrapper.appendChild(div);
-
-                this.resizeHelpers[x][y] = direction
-                    ? new ResizeHelper(
-                          div,
-                          [x, y],
-                          this.onResizeBegin,
-                          this.onResize,
-                          this.onResizeEnd
-                      )
-                    : null;
+                              this.selectionBorderColor
+                          };cursor:${direction}-resize;${
+                              y == YCoordinate.Top ? 'top' : 'bottom'
+                          }:-${HANDLE_MARGIN}px;${
+                              x == XCoordinate.Left ? 'left' : 'right'
+                          }:-${HANDLE_MARGIN}px"></div></div>`
+                        : `<div style="position:absolute;left:0;right:0;top:0;bottom:0;border:solid 1px ${this.selectionBorderColor};pointer-events:none;">`;
+
+                if (html) {
+                    const div = fromHtml(html, doc)[0] as HTMLElement;
+                    wrapper.appendChild(div);
+
+                    this.resizeHelpers[x][y] = direction
+                        ? new ResizeHelper(
+                              div,
+                              [x, y],
+                              this.onResizeBegin,
+                              this.onResize,
+                              this.onResizeEnd
+                          )
+                        : null;
+                }
             }
         }