From 2d80d11475b1e26894ce877a071d57adb052aa7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8B=97=E7=A9=BA?= <isaacyoung.yxt@alibaba-inc.com>
Date: Wed, 1 Mar 2023 10:06:44 +0800
Subject: [PATCH] =?UTF-8?q?fix(designer):=20=E4=BF=AE=E5=A4=8DVC=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6canResizing=E5=8F=91=E7=94=9F=E5=8F=98=E5=8C=96?=
 =?UTF-8?q?=E6=97=B6=E6=97=A0=E6=B3=95=E6=8B=96=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CONTRIBUTOR.md                                |   1 +
 .../bem-tools/border-resizing.tsx             | 201 ++++++++++--------
 2 files changed, 109 insertions(+), 93 deletions(-)

diff --git a/CONTRIBUTOR.md b/CONTRIBUTOR.md
index 89757bac9..11d50baad 100644
--- a/CONTRIBUTOR.md
+++ b/CONTRIBUTOR.md
@@ -24,5 +24,6 @@
 - [Ychangqing](https://github.com/Ychangqing)
 - [yize](https://github.com/yize)
 - [youluna](https://github.com/youluna)
+- [ibreathebsb](https://github.com/ibreathebsb)
 
 如果您贡献过低代码引擎，但是没有看到您的名字，为我们的疏忽感到抱歉。欢迎您通过 PR 补充上自己的名字。
diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx
index e174c4ad6..29401ca6b 100644
--- a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx
+++ b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx
@@ -236,17 +236,22 @@ export class BoxResizingInstance extends Component<{
 
   render() {
     const { observed } = this.props;
-    if (!observed.hasOffset) {
-      return null;
-    }
-
-    const { node, offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed;
     let triggerVisible: any = [];
-    const { advanced } = node.componentMeta;
-    if (advanced.getResizingHandlers) {
-      triggerVisible = advanced.getResizingHandlers(node.internalToShellNode());
+    let offsetWidth = 0;
+    let offsetHeight = 0;
+    let offsetTop = 0;
+    let offsetLeft = 0;
+    if (observed.hasOffset) {
+      offsetWidth = observed.offsetWidth;
+      offsetHeight = observed.offsetHeight;
+      offsetTop = observed.offsetTop;
+      offsetLeft = observed.offsetLeft;
+      const { node } = observed;
+      const metadata = node.componentMeta.getMetadata();
+      if (metadata.configure?.advanced?.getResizingHandlers) {
+        triggerVisible = metadata.configure.advanced.getResizingHandlers(node.internalToShellNode());
+      }
     }
-
     triggerVisible = normalizeTriggers(triggerVisible);
 
     const baseSideClass = 'lc-borders lc-resize-side';
@@ -254,90 +259,100 @@ export class BoxResizingInstance extends Component<{
 
     return (
       <div>
-        {triggerVisible.includes('N') && (
-          <div
-            ref={(ref) => { this.outlineN = ref; }}
-            className={classNames(baseSideClass, 'n')}
-            style={{
-              height: 20,
-              transform: `translate(${offsetLeft}px, ${offsetTop - 10}px)`,
-              width: offsetWidth,
-            }}
-          />
-        )}
-        {triggerVisible.includes('NE') && (
-          <div
-            ref={(ref) => { this.outlineNE = ref; }}
-            className={classNames(baseCornerClass, 'ne')}
-            style={{
-              transform: `translate(${offsetLeft + offsetWidth - 5}px, ${offsetTop - 3}px)`,
-              cursor: 'nesw-resize',
-            }}
-          />
-        )}
-        {triggerVisible.includes('E') && (
-          <div
-            className={classNames(baseSideClass, 'e')}
-            ref={(ref) => { this.outlineE = ref; }}
-            style={{
-              height: offsetHeight,
-              transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`,
-              width: 20,
-            }}
-          />
-        )}
-        {triggerVisible.includes('SE') && (
-          <div
-            ref={(ref) => { this.outlineSE = ref; }}
-            className={classNames(baseCornerClass, 'se')}
-            style={{
-              transform: `translate(${offsetLeft + offsetWidth - 5}px, ${offsetTop + offsetHeight - 5}px)`,
-              cursor: 'nwse-resize',
-            }}
-          />
-        )}
-        {triggerVisible.includes('S') && (
-          <div
-            ref={(ref) => { this.outlineS = ref; }}
-            className={classNames(baseSideClass, 's')}
-            style={{
-              height: 20,
-              transform: `translate(${offsetLeft}px, ${offsetTop + offsetHeight - 10}px)`,
-              width: offsetWidth,
-            }}
-          />
-        )}
-        {triggerVisible.includes('SW') && (
-          <div
-            ref={(ref) => { this.outlineSW = ref; }}
-            className={classNames(baseCornerClass, 'sw')}
-            style={{
-              transform: `translate(${offsetLeft - 3}px, ${offsetTop + offsetHeight - 5}px)`,
-              cursor: 'nesw-resize',
-            }}
-          />
-        )}
-        {triggerVisible.includes('W') && (
-          <div
-            ref={(ref) => { this.outlineW = ref; }}
-            className={classNames(baseSideClass, 'w')}
-            style={{
-              height: offsetHeight,
-              transform: `translate(${offsetLeft - 10}px, ${offsetTop}px)`,
-              width: 20,
-            }}
-          />
-        )}
-        {triggerVisible.includes('NW') && (
-          <div
-            ref={(ref) => { this.outlineNW = ref; }}
-            className={classNames(baseCornerClass, 'nw')}
-            style={{
-              transform: `translate(${offsetLeft - 3}px, ${offsetTop - 3}px)`,
-              cursor: 'nwse-resize',
-            }}
-          />
-        )}
+        <div
+          ref={(ref) => {
+            this.outlineN = ref;
+          }}
+          className={classNames(baseSideClass, 'n')}
+          style={{
+            height: 20,
+            transform: `translate(${offsetLeft}px, ${offsetTop - 10}px)`,
+            width: offsetWidth,
+            display: triggerVisible.includes('N') ? 'flex' : 'none',
+          }}
+        />
+        <div
+          ref={(ref) => {
+            this.outlineNE = ref;
+          }}
+          className={classNames(baseCornerClass, 'ne')}
+          style={{
+            transform: `translate(${offsetLeft + offsetWidth - 5}px, ${offsetTop - 3}px)`,
+            cursor: 'nesw-resize',
+            display: triggerVisible.includes('NE') ? 'flex' : 'none',
+          }}
+        />
+        <div
+          className={classNames(baseSideClass, 'e')}
+          ref={(ref) => {
+            this.outlineE = ref;
+          }}
+          style={{
+            height: offsetHeight,
+            transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`,
+            width: 20,
+            display: triggerVisible.includes('E') ? 'flex' : 'none',
+          }}
+        />
+        <div
+          ref={(ref) => {
+            this.outlineSE = ref;
+          }}
+          className={classNames(baseCornerClass, 'se')}
+          style={{
+            transform: `translate(${offsetLeft + offsetWidth - 5}px, ${
+              offsetTop + offsetHeight - 5
+            }px)`,
+            cursor: 'nwse-resize',
+            display: triggerVisible.includes('SE') ? 'flex' : 'none',
+          }}
+        />
+        <div
+          ref={(ref) => {
+            this.outlineS = ref;
+          }}
+          className={classNames(baseSideClass, 's')}
+          style={{
+            height: 20,
+            transform: `translate(${offsetLeft}px, ${offsetTop + offsetHeight - 10}px)`,
+            width: offsetWidth,
+            display: triggerVisible.includes('S') ? 'flex' : 'none',
+          }}
+        />
+        <div
+          ref={(ref) => {
+            this.outlineSW = ref;
+          }}
+          className={classNames(baseCornerClass, 'sw')}
+          style={{
+            transform: `translate(${offsetLeft - 3}px, ${offsetTop + offsetHeight - 5}px)`,
+            cursor: 'nesw-resize',
+            display: triggerVisible.includes('SW') ? 'flex' : 'none',
+          }}
+        />
+        <div
+          ref={(ref) => {
+            this.outlineW = ref;
+          }}
+          className={classNames(baseSideClass, 'w')}
+          style={{
+            height: offsetHeight,
+            transform: `translate(${offsetLeft - 10}px, ${offsetTop}px)`,
+            width: 20,
+            display: triggerVisible.includes('W') ? 'flex' : 'none',
+          }}
+        />
+        <div
+          ref={(ref) => {
+            this.outlineNW = ref;
+          }}
+          className={classNames(baseCornerClass, 'nw')}
+          style={{
+            transform: `translate(${offsetLeft - 3}px, ${offsetTop - 3}px)`,
+            cursor: 'nwse-resize',
+            display: triggerVisible.includes('NW') ? 'flex' : 'none',
+          }}
+        />
       </div>
     );
   }