add boreder resizing

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

@@ -52,35 +52,35 @@ export default class BoxResizing extends Component {
     // this.bus = new Bus();
   }
 
-  // componentDidMount() {
+  componentDidMount() {
-  //   // this.hoveringCapture.setBoundary(this.outline);
+    // this.hoveringCapture.setBoundary(this.outline);
     // this.willBind();
 
-  //   const resize = (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => {
+    const resize = (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => {
-  //     const proto = node.getPrototype();
+      const proto = node.getPrototype();
-  //     if (proto && proto.options && typeof proto.options.onResize === 'function') {
+      if (proto && proto.options && typeof proto.options.onResize === 'function') {
-  //       proto.options.onResize(e, direction, node, moveX, moveY);
+        proto.options.onResize(e, direction, node, moveX, moveY);
-  //     }
+      }
-  //   };
+    };
 
-  //   const resizeStart = (e: MouseEvent, direction: string, node: any) => {
+    const resizeStart = (e: MouseEvent, direction: string, node: any) => {
-  //     const proto = node.getPrototype();
+      const proto = node.getPrototype();
-  //     if (proto && proto.options && typeof proto.options.onResizeStart === 'function') {
+      if (proto && proto.options && typeof proto.options.onResizeStart === 'function') {
-  //       proto.options.onResizeStart(e, direction, node);
+        proto.options.onResizeStart(e, direction, node);
-  //     }
+      }
-  //   };
+    };
 
-  //   const resizeEnd = (e: MouseEvent, direction: string, node: any) => {
+    const resizeEnd = (e: MouseEvent, direction: string, node: any) => {
-  //     const proto = node.getPrototype();
+      const proto = node.getPrototype();
-  //     if (proto && proto.options && typeof proto.options.onResizeEnd === 'function') {
+      if (proto && proto.options && typeof proto.options.onResizeEnd === 'function') {
-  //       proto.options.onResizeEnd(e, direction, node);
+        proto.options.onResizeEnd(e, direction, node);
-  //     }
+      }
-  //   };
+    };
 
-  //   // DragResizeEngine.onResize(resize);
+    // DragResizeEngine.onResize(resize);
-  //   // DragResizeEngine.onResizeStart(resizeStart);
+    // DragResizeEngine.onResizeStart(resizeStart);
-  //   // DragResizeEngine.onResizeEnd(resizeEnd);
+    // DragResizeEngine.onResizeEnd(resizeEnd);
-  // }
+  }
 
   // componentDidUpdate() {
   //   this.hoveringCapture.setBoundary(this.outline);
@@ -142,6 +142,10 @@ export default class BoxResizing extends Component {
       // DIRTY FIX, recore has a bug!
       return <Fragment />;
     }
+    // console.log(selecting[0].componentMeta, 'component meta data');
+    const componentMeta = selecting[0].componentMeta;
+    const metaData = componentMeta.getMetadata();
+    console.log('meta data', metaData);
 
     return (
       <Fragment>
@@ -151,94 +155,6 @@ export default class BoxResizing extends Component {
       </Fragment>
     );
   }
-
-  // render() {
-  //   const node = this.selecting;
-  //   console.log(selecting, 'selecting');
-  //   if (!selecting || selecting.length < 1) {
-  //     // DIRTY FIX, recore has a bug!
-  //     return <Fragment />;
-  //   }
-  //   // if (!this.hoveringLine.hasOutline()) {
-  //   //   return null;
-  //   // }
-
-  //   // const page = node.getPage();
-  //   const bounds = 2;
-  //   // page.getBounds();
-  //   const st = 2;
-  //   // page.getScrollTop();
-  //   const rect = node.getRect();
-
-  //   if (!rect || !bounds) {
-  //     return null;
-  //   }
-
-  //   const proto = node.componentMeta;
-  //   console.log('proto', proto);
-  //   const triggerVisible: any = {
-  //     w: true,
-  //     e: true,
-  //   };
-  //   // if (proto && proto.options && typeof proto.options.canResizing === 'boolean') {
-  //   //   triggerVisible = {
-  //   //     e: proto.options.canResizing,
-  //   //     w: proto.options.canResizing,
-  //   //     n: proto.options.canResizing,
-  //   //     s: proto.options.canResizing,
-  //   //   };
-  //   // } else if (proto && proto.options && typeof proto.options.canResizing === 'function') {
-  //   //   triggerVisible = {
-  //   //     e: proto.options.canResizing(node, 'e'),
-  //   //     w: proto.options.canResizing(node, 'w'),
-  //   //     n: proto.options.canResizing(node, 'n'),
-  //   //     s: proto.options.canResizing(node, 's'),
-  //   //   };
-  //   // }
-
-  //   return (
-  //     <Fragment>
-  //       {selecting.map((node) => (
-  //         <BoxResizingForNode key={node.id} node={node} />
-  //       ))}
-  //     </Fragment>
-  //   );
-
-  //   // return (
-  //   //   <div
-  //   //     ref={(ref) => {
-  //   //       this.outline = ref;
-  //   //     }}
-  //   //   >
-  //   //     {triggerVisible.w && (
-  //   //       <div
-  //   //         ref={(ref) => {
-  //   //           this.outlineLeft = ref;
-  //   //         }}
-  //   //         className="engine-outline engine-resize-outline"
-  //   //         style={{
-  //   //           height: rect.height,
-  //   //           transform: `translate(${rect.left - bounds.left - 10}px, ${rect.top + st - bounds.top}px)`,
-  //   //           width: 20,
-  //   //         }}
-  //   //       />
-  //   //     )}
-  //   //     {triggerVisible.e && (
-  //   //       <div
-  //   //         ref={(ref) => {
-  //   //           this.outlineRight = ref;
-  //   //         }}
-  //   //         className="engine-outline engine-resize-outline"
-  //   //         style={{
-  //   //           height: rect.height,
-  //   //           transform: `translate(${rect.left - bounds.left + rect.width - 10}px, ${rect.top + st - bounds.top}px)`,
-  //   //           width: 20,
-  //   //         }}
-  //   //       />
-  //   //     )}
-  //   //   </div>
-  //   // );
-  // }
 }
 
 @observer
@@ -303,11 +219,11 @@ export class BoxResizingInstance extends Component<{
     }
 
     const { offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed;
-    console.log(offsetHeight, offsetLeft, offsetTop, offsetWidth);
     const triggerVisible = {
       w: true,
       e: true,
     };
+    console.log('hee');
 
     const className = classNames('lc-borders lc-resize-box');
 
@@ -335,11 +251,5 @@ export class BoxResizingInstance extends Component<{
         )}
       </div>
     );
-
-    // return (
-    //   <div className={className} style={style}>
-    //     {!dragging && <Toolbar observed={observed} />}
-    //   </div>
-    // );
   }
 }

packages/designer/src/builtin-simulator/bem-tools/index.tsx

@@ -4,7 +4,7 @@ import { BorderHovering } from './border-hovering';
 import { SimulatorContext } from '../context';
 import { BuiltinSimulatorHost } from '../host';
 import { BorderSelecting } from './border-selecting';
-import BoxResizing from './box-resizing';
+import BorderResizing from './border-resizing';
 import { InsertionView } from './insertion';
 import './bem-tools.less';
 import './borders.less';
@@ -25,7 +25,7 @@ export class BemTools extends Component {
         <BorderHovering key="hovering" />
         <BorderSelecting key="selecting" />
         <InsertionView key="insertion" />
-        <BoxResizing key="resizing" />
+        <BorderResizing key="resizing" />
       </div>
     );
   }