fix(designer): 修复VC组件canResizing发生变化时无法拖拽

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 补充上自己的名字。

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;
+    let offsetWidth = 0;
-    if (advanced.getResizingHandlers) {
+    let offsetHeight = 0;
-      triggerVisible = advanced.getResizingHandlers(node.internalToShellNode());
+    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
-          <div
+          ref={(ref) => {
-            ref={(ref) => { this.outlineN = ref; }}
+            this.outlineN = ref;
-            className={classNames(baseSideClass, 'n')}
+          }}
-            style={{
+          className={classNames(baseSideClass, 'n')}
-              height: 20,
+          style={{
-              transform: `translate(${offsetLeft}px, ${offsetTop - 10}px)`,
+            height: 20,
-              width: offsetWidth,
+            transform: `translate(${offsetLeft}px, ${offsetTop - 10}px)`,
-            }}
+            width: offsetWidth,
-          />
+            display: triggerVisible.includes('N') ? 'flex' : 'none',
-        )}
+          }}
-        {triggerVisible.includes('NE') && (
+        />
-          <div
+        <div
-            ref={(ref) => { this.outlineNE = ref; }}
+          ref={(ref) => {
-            className={classNames(baseCornerClass, 'ne')}
+            this.outlineNE = ref;
-            style={{
+          }}
-              transform: `translate(${offsetLeft + offsetWidth - 5}px, ${offsetTop - 3}px)`,
+          className={classNames(baseCornerClass, 'ne')}
-              cursor: 'nesw-resize',
+          style={{
-            }}
+            transform: `translate(${offsetLeft + offsetWidth - 5}px, ${offsetTop - 3}px)`,
-          />
+            cursor: 'nesw-resize',
-        )}
+            display: triggerVisible.includes('NE') ? 'flex' : 'none',
-        {triggerVisible.includes('E') && (
+          }}
-          <div
+        />
-            className={classNames(baseSideClass, 'e')}
+        <div
-            ref={(ref) => { this.outlineE = ref; }}
+          className={classNames(baseSideClass, 'e')}
-            style={{
+          ref={(ref) => {
-              height: offsetHeight,
+            this.outlineE = ref;
-              transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`,
+          }}
-              width: 20,
+          style={{
-            }}
+            height: offsetHeight,
-          />
+            transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`,
-        )}
+            width: 20,
-        {triggerVisible.includes('SE') && (
+            display: triggerVisible.includes('E') ? 'flex' : 'none',
-          <div
+          }}
-            ref={(ref) => { this.outlineSE = ref; }}
+        />
-            className={classNames(baseCornerClass, 'se')}
+        <div
-            style={{
+          ref={(ref) => {
-              transform: `translate(${offsetLeft + offsetWidth - 5}px, ${offsetTop + offsetHeight - 5}px)`,
+            this.outlineSE = ref;
-              cursor: 'nwse-resize',
+          }}
-            }}
+          className={classNames(baseCornerClass, 'se')}
-          />
+          style={{
-        )}
+            transform: `translate(${offsetLeft + offsetWidth - 5}px, ${
-        {triggerVisible.includes('S') && (
+              offsetTop + offsetHeight - 5
-          <div
+            }px)`,
-            ref={(ref) => { this.outlineS = ref; }}
+            cursor: 'nwse-resize',
-            className={classNames(baseSideClass, 's')}
+            display: triggerVisible.includes('SE') ? 'flex' : 'none',
-            style={{
+          }}
-              height: 20,
+        />
-              transform: `translate(${offsetLeft}px, ${offsetTop + offsetHeight - 10}px)`,
+        <div
-              width: offsetWidth,
+          ref={(ref) => {
-            }}
+            this.outlineS = ref;
-          />
+          }}
-        )}
+          className={classNames(baseSideClass, 's')}
-        {triggerVisible.includes('SW') && (
+          style={{
-          <div
+            height: 20,
-            ref={(ref) => { this.outlineSW = ref; }}
+            transform: `translate(${offsetLeft}px, ${offsetTop + offsetHeight - 10}px)`,
-            className={classNames(baseCornerClass, 'sw')}
+            width: offsetWidth,
-            style={{
+            display: triggerVisible.includes('S') ? 'flex' : 'none',
-              transform: `translate(${offsetLeft - 3}px, ${offsetTop + offsetHeight - 5}px)`,
+          }}
-              cursor: 'nesw-resize',
+        />
-            }}
+        <div
-          />
+          ref={(ref) => {
-        )}
+            this.outlineSW = ref;
-        {triggerVisible.includes('W') && (
+          }}
-          <div
+          className={classNames(baseCornerClass, 'sw')}
-            ref={(ref) => { this.outlineW = ref; }}
+          style={{
-            className={classNames(baseSideClass, 'w')}
+            transform: `translate(${offsetLeft - 3}px, ${offsetTop + offsetHeight - 5}px)`,
-            style={{
+            cursor: 'nesw-resize',
-              height: offsetHeight,
+            display: triggerVisible.includes('SW') ? 'flex' : 'none',
-              transform: `translate(${offsetLeft - 10}px, ${offsetTop}px)`,
+          }}
-              width: 20,
+        />
-            }}
+        <div
-          />
+          ref={(ref) => {
-        )}
+            this.outlineW = ref;
-        {triggerVisible.includes('NW') && (
+          }}
-          <div
+          className={classNames(baseSideClass, 'w')}
-            ref={(ref) => { this.outlineNW = ref; }}
+          style={{
-            className={classNames(baseCornerClass, 'nw')}
+            height: offsetHeight,
-            style={{
+            transform: `translate(${offsetLeft - 10}px, ${offsetTop}px)`,
-              transform: `translate(${offsetLeft - 3}px, ${offsetTop - 3}px)`,
+            width: 20,
-              cursor: 'nwse-resize',
+            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>
     );
   }