Should be possible to resize in all directions

frontend/package-lock.json

@@ -13710,6 +13710,23 @@
         "react-draggable": "^4.0.3"
       }
     },
+    "react-rnd": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-10.3.0.tgz",
+      "integrity": "sha512-v+0TRPIaRWY25TYv02vLQHYpACbkX+4xKvsyIrUEy4bMpq0bP1oEiaxTorp0Xn72IVv0QZV1vOnZimgTEB/skw==",
+      "requires": {
+        "re-resizable": "6.9.0",
+        "react-draggable": "4.4.3",
+        "tslib": "2.2.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+        }
+      }
+    },
     "react-router": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",

frontend/package.json

@@ -38,6 +38,7 @@
     "react-loading-skeleton": "^2.2.0",
     "react-plotly.js": "^2.5.1",
     "react-resizable": "^1.11.1",
+    "react-rnd": "^10.3.0",
     "react-router-dom": "^5.0.0",
     "react-scripts": "3.4.3",
     "react-select-search": "^3.0.5",

frontend/src/Editor/Box.jsx

@@ -85,7 +85,7 @@ export const Box = function Box({
           containerProps={containerProps}
         ></ComponentToRender>
       ) : (
-        <div className="row p-1 m-1" style={{ cursor: 'move' }}>
+        <div className="row p-1 m-1">
           <div className="col-auto component-image-holder p-3">
             <div
               style={{

frontend/src/Editor/Container.jsx

@@ -147,14 +147,24 @@ export const Container = ({
     [moveBox]
   );
 
-  function onResizeStop(id, width, height, e, direction, ref, d) {
+  function onResizeStop(id, e, direction, ref, d, position) {
     const deltaWidth = d.width;
     const deltaHeight = d.height;
 
+    let { x, y } = position;
+
+    let  { left, top, width, height } = boxes[id];
+    
+    top = y;
+    left = x;
+
+    width = width + deltaWidth;
+    height = height + deltaHeight
+
     setBoxes(
       update(boxes, {
         [id]: {
-          $merge: { width: deltaWidth + width, height: deltaHeight + height }
+          $merge: { width, height, top, left }
         }
       })
     );

frontend/src/Editor/DraggableBox.jsx

@@ -5,6 +5,7 @@ import { getEmptyImage } from 'react-dnd-html5-backend';
 import { Box } from './Box';
 import { Resizable } from 're-resizable';
 import { ConfigHandle } from './ConfigHandle';
+import { Rnd } from "react-rnd";
 
 const resizerClasses = {
   topRight: 'top-right',
@@ -32,8 +33,8 @@ function getStyles(left, top, isDragging, component) {
   const transform = `translate3d(${left}px, ${top}px, 0)`;
   return {
     position: 'absolute',
-    transform,
-    WebkitTransform: transform,
+    // transform,
+    // WebkitTransform: transform,
     zIndex: ['DropDown', 'Datepicker', 'DaterangePicker'].includes(component.component) ? 2 : 1,
     // IE fallback: hide the real node using CSS when dragging
     // because IE will ignore our custom "empty image" drag preview.
@@ -117,16 +118,19 @@ export const DraggableBox = function DraggableBox({
       {inCanvas ? (
         <div style={getStyles(left, top, isDragging, component)} className="draggable-box">
           
-          <Resizable
+          <Rnd
             style={{ ...style }}
+            size={{ width: width + 6,  height: height + 6 }}
+            position={{ x: left, y: top }}
             defaultSize={{}}
             className="resizer"
             onResize={() => setResizing(true)}
-            handleClasses={resizerClasses}
-            handleStyles={resizerStyles}
-            onResizeStop={(e, direction, ref, d) => {
+            resizeHandleClasses={resizerClasses}
+            resizeHandleStyles={resizerStyles}
+            disableDragging={true}
+            onResizeStop={(e, direction, ref, d, position) => {
               setResizing(false);
-              onResizeStop(id, width, height, e, direction, ref, d);
+              onResizeStop(id, e, direction, ref, d, position);
             }}
           >
             <div ref={preview} role="DraggableBox" style={isResizing ? { opacity: 0.5 } : { opacity: 1 }}>
@@ -156,7 +160,7 @@ export const DraggableBox = function DraggableBox({
                 containerProps={containerProps}
               />
             </div>
-          </Resizable>
+          </Rnd>
         </div>
       ) : (
         <div ref={drag} role="DraggableBox">

frontend/src/Editor/SubContainer.jsx

@@ -164,14 +164,24 @@ export const SubContainer = ({
     [moveBox]
   );
 
-  function onResizeStop(id, width, height, e, direction, ref, d) {
+  function onResizeStop(id, e, direction, ref, d, position) {
     const deltaWidth = d.width;
     const deltaHeight = d.height;
 
+    let { x, y } = position;
+
+    let  { left, top, width, height } = boxes[id];
+    
+    top = y;
+    left = x;
+
+    width = width + deltaWidth;
+    height = height + deltaHeight
+
     setBoxes(
       update(boxes, {
         [id]: {
-          $merge: { width: deltaWidth + width, height: deltaHeight + height }
+          $merge: { width, height, top, left }
         }
       })
     );