feat: 增强 bem resize (ws, wn, es, en)

packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx

@@ -82,7 +82,7 @@ export class BoxResizingForNode extends Component<{ host: BuiltinSimulatorHost;
     const { node } = this.props;
     const { designer } = this.host;
 
-    if (!instances || instances.length < 1) {
+    if (!instances || instances.length < 1 || this.dragging) {
       return null;
     }
     return (
@@ -114,9 +114,15 @@ export class BoxResizingInstance extends Component<{
   // private outline: any;
   private willUnbind: () => any;
 
-  private outlineRight: any;
-
-  private outlineLeft: any;
+  // outline of eight direction
+  private outlineN: any;
+  private outlineE: any;
+  private outlineS: any;
+  private outlineW: any;
+  private outlineNE: any;
+  private outlineNW: any;
+  private outlineSE: any;
+  private outlineSW: any;
 
   private dragEngine: DragResizeEngine;
 
@@ -204,29 +210,33 @@ export class BoxResizingInstance extends Component<{
       this.willUnbind();
     }
 
-    if (!this.outlineRight && !this.outlineLeft) {
+    if (
+      !this.outlineN &&
+      !this.outlineE &&
+      !this.outlineS &&
+      !this.outlineW &&
+      !this.outlineNE &&
+      !this.outlineNW &&
+      !this.outlineSE &&
+      !this.outlineSW
+    ) {
       return;
     }
 
     const unBind: any[] = [];
+    const node = this.props.observed.node;
 
     unBind.push(
-      this.dragEngine.from(this.outlineRight, 'e', () => {
-        // if (!this.hoveringLine.hasOutline()) {
-        //   return null;
-        // }
-        // return this.hoveringLine.getCurrentNode();
-        return this.props.observed.node;
-      }),
-    );
-    unBind.push(
-      this.dragEngine.from(this.outlineLeft, 'w', () => {
-        return this.props.observed.node;
-        // if (!this.hoveringLine.hasOutline()) {
-        //   return null;
-        // }
-        // return this.hoveringLine.getCurrentNode();
-      }),
+      ...[
+        this.dragEngine.from(this.outlineN, 'n', () => node),
+        this.dragEngine.from(this.outlineE, 'e', () => node),
+        this.dragEngine.from(this.outlineS, 's', () => node),
+        this.dragEngine.from(this.outlineW, 'w', () => node),
+        this.dragEngine.from(this.outlineNE, 'ne', () => node),
+        this.dragEngine.from(this.outlineNW, 'nw', () => node),
+        this.dragEngine.from(this.outlineSE, 'se', () => node),
+        this.dragEngine.from(this.outlineSW, 'sw', () => node),
+      ],
     );
 
     this.willUnbind = () => {
@@ -252,29 +262,36 @@ export class BoxResizingInstance extends Component<{
       triggerVisible = metaData.experimental.getResizingHandlers(node);
     }
 
-    const className = classNames('lc-borders lc-resize-box');
+    const baseSideClass = 'lc-borders lc-resize-side';
+    const baseCornerClass = 'lc-borders lc-resize-corner';
 
     return (
       <div>
-        {triggerVisible.includes('w') && (
+        {triggerVisible.includes('n') && (
           <div
-            ref={(ref) => {
-              this.outlineLeft = ref;
-            }}
-            className={className}
+            ref={(ref) => { this.outlineN = ref; }}
+            className={classNames(baseSideClass, 'n')}
             style={{
-              height: offsetHeight,
-              transform: `translate(${offsetLeft - 10}px, ${offsetTop}px)`,
-              width: 20,
+              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={className}
-            ref={(ref) => {
-              this.outlineRight = ref;
-            }}
+            className={classNames(baseSideClass, 'e')}
+            ref={(ref) => { this.outlineE = ref; }}
             style={{
               height: offsetHeight,
               transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`,
@@ -282,6 +299,58 @@ export class BoxResizingInstance extends Component<{
             }}
           />
         )}
+        {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>
     );
   }

packages/designer/src/builtin-simulator/bem-tools/borders.less

@@ -49,10 +49,19 @@
     }
   }
 
-  &.lc-resize-box {
+  &.lc-resize-corner {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border: 1px solid #197aff;
+    background: #fff;
+    pointer-events: auto;
+    z-index: 2;
+  }
+
+  &.lc-resize-side {
     border-width: 0;
     z-index: 1;
-    cursor: ew-resize;
     pointer-events: auto;
     align-items: center;
     justify-content: center;
@@ -61,13 +70,32 @@
     &:after {
       content: "";
       display: block;
-      height: calc(100% - 20px);
-      min-height: 50%;
-      width: 4px;
-      background: #738397;
+      border: 1px solid #197aff;
+      background: #fff;
+      // background: #738397;
       border-radius: 2px;
       // animation: flashing 1.5s infinite linear;
     }
+
+    &.e,
+    &.w {
+      cursor: ew-resize;
+      &:after {
+        width: 4px;
+        // height: calc(100% - 20px);
+        min-height: 50%;
+      }
+    }
+
+    &.n,
+    &.s {
+      cursor: ns-resize;
+      &:after {
+        // width: calc(100% - 20px);
+        min-width: 50%;
+        height: 4px;
+      }
+    }
   }
 
   // &&-hovering {

packages/editor-preset-vision/src/bundle/upgrade-metadata.ts

@@ -741,7 +741,7 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) {
   if (canResizing) {
     // TODO: enhance
     experimental.getResizingHandlers = (currentNode: any) => {
-      const directs = ['n', 'w', 's', 'e'];
+      const directs = ['n', 'e', 's', 'w', 'ne', 'nw', 'se', 'sw'];
       if (canResizing === true) {
         return directs;
       }