Feature: Mobile layput for container widget & it's children

Navaneeth-pk · Navaneeth-pk · commit d95cd5bb3c8b · 2021-06-04T20:21:36.000+05:30
diff --git a/frontend/src/Editor/Components/Container.jsx b/frontend/src/Editor/Components/Container.jsx
@@ -30,6 +30,7 @@ export const Container = function Container({
             <SubCustomDragLayer 
               parent={id}
               parentRef={parentRef}
+              currentLayout={containerProps.currentLayout}
             />
     </div>
   );
diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
@@ -24,7 +24,7 @@ import {
   onQueryConfirm,
   onQueryCancel,
   runQuery,
-  previewQuery
+  setStateAsync
 } from '@/_helpers/appUtils';
 import { Confirm } from './Viewer/Confirm';
 import ReactTooltip from 'react-tooltip';
@@ -245,7 +245,8 @@ class Editor extends React.Component {
   };
 
   componentDefinitionChanged = (newDefinition) => {
-    this.setState({
+    let _self = this;
+    return setStateAsync(_self, {
       appDefinition: {
         ...this.state.appDefinition,
         components: {
diff --git a/frontend/src/Editor/Inspector/Inspector.jsx b/frontend/src/Editor/Inspector/Inspector.jsx
@@ -73,6 +73,7 @@ export const Inspector = ({
 
     // User wants to show the widget on mobile devices
     if(param.name === 'showOnMobile' && value === true) { 
+      
       let newComponent = {
         ...component
       };
@@ -90,7 +91,34 @@ export const Inspector = ({
       }
 
       setComponent(newComponent);
-      componentDefinitionChanged(newComponent);
+      componentDefinitionChanged(newComponent).then(() => {
+        
+        //  Child componets should also have a mobile layout
+        const childComponents = Object.keys(allComponents).filter((key) => allComponents[key].parent === component.id);
+
+        childComponents.forEach((componentId) => {
+          let newChild = {
+            id: componentId,
+            ...allComponents[componentId]
+          };
+
+          const { width, height } = newChild.layouts['desktop'];
+
+          newChild['layouts'] = {
+            ...newChild.layouts,
+            mobile: { 
+              top: 100, 
+              left: 0, 
+              width: Math.min(width, 445), 
+              height: height
+            }
+          }
+
+          componentDefinitionChanged(newChild);
+
+        });
+      });
+
     }
   }
 
diff --git a/frontend/src/Editor/SubContainer.jsx b/frontend/src/Editor/SubContainer.jsx
@@ -31,7 +31,11 @@ export const SubContainer = ({
   zoomLevel,
   parent,
   parentRef,
-  configHandleClicked
+  configHandleClicked,
+  deviceWindowWidth,
+  scaleValue,
+  selectedComponent,
+  currentLayout
 }) => {
   zoomLevel = zoomLevel || 1;
 
@@ -117,14 +121,40 @@ export const SubContainer = ({
         let left = 0;
         let top = 0;
 
+        let layouts = item['layouts'];
+        const currentLayoutOptions = layouts ? layouts[item.currentLayout] : {};
+
         const canvasBoundingRect = parentRef.current.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
 
         // Component already exists and this is just a reposition event
         if (id) {
           const delta = monitor.getDifferenceFromInitialOffset();
           componentData = item.component;
-          left = Math.round(item.left + delta.x);
-          top = Math.round(item.top + delta.y);
+          left = Math.round(currentLayoutOptions.left + delta.x);
+          top = Math.round(currentLayoutOptions.top + delta.y);
+
+          if (snapToGrid) {
+            [left, top] = doSnapToGrid(left, top);
+          }
+
+          let newBoxes = { 
+            ...boxes,
+            [id]: {
+              ...boxes[id],
+              parent: parent,
+              layouts: { 
+                ...boxes[id]['layouts'],
+                [item.currentLayout]: {
+                  ...boxes[id]['layouts'][item.currentLayout],
+                  top: top,
+                  left: left,
+                } 
+              }
+            }
+          };
+
+          setBoxes(newBoxes);
+
         } else {
           //  This is a new component
           componentMeta = componentTypes.find((component) => component.component === item.component.component);
@@ -146,15 +176,24 @@ export const SubContainer = ({
           [left, top] = doSnapToGrid(left, top);
         }
 
+        if(item.currentLayout === 'mobile') { 
+          componentData.definition.others.showOnDesktop.value = false;
+          componentData.definition.others.showOnMobile.value = true;
+        }
+
         setBoxes({
           ...boxes,
           [id]: {
-            top: top,
-            left: left,
-            width: item.width > 0 ? item.width : componentMeta.defaultSize.width,
-            height: item.height > 0 ? item.height : componentMeta.defaultSize.height,
             component: componentData,
-            parent: parent
+            parent: parent,
+            layouts: {
+              [item.currentLayout]: { 
+                top: top,
+                left: left,
+                width: componentMeta.defaultSize.width,
+                height: componentMeta.defaultSize.height,
+              }
+            }
           }
         });
 
@@ -170,21 +209,36 @@ export const SubContainer = ({
 
     let { x, y } = position;
 
-    let  { left, top, width, height } = boxes[id];
+    const defaultData = {
+      top: 100,
+      left: 0,
+      width: 445,
+      height: 500
+    };
+
+    let  { left, top, width, height } = boxes[id]['layouts'][currentLayout] || defaultData;
     
     top = y;
     left = x;
 
     width = width + deltaWidth;
     height = height + deltaHeight
 
-    setBoxes(
-      update(boxes, {
-        [id]: {
-          $merge: { width, height, top, left }
+    let newBoxes = { 
+      ...boxes,
+      [id]: {
+        ...boxes[id],
+        layouts: { 
+          ...boxes[id]['layouts'],
+          [currentLayout]: {
+            ...boxes[id]['layouts'][currentLayout],
+            width, height, top, left
+          } 
         }
-      })
-    );
+      }
+    };
+
+    setBoxes(newBoxes);
   }
 
   function paramUpdated(id, param, value) {
@@ -229,6 +283,10 @@ export const SubContainer = ({
           inCanvas={true}
           zoomLevel={zoomLevel}
           configHandleClicked={configHandleClicked}
+          currentLayout={currentLayout}
+          scaleValue={scaleValue}
+          deviceWindowWidth={deviceWindowWidth}
+          isSelectedComponent={selectedComponent? selectedComponent.id === key : false}
         />
       ))}
 
diff --git a/frontend/src/Editor/SubCustomDragLayer.jsx b/frontend/src/Editor/SubCustomDragLayer.jsx
@@ -12,7 +12,7 @@ const layerStyles = {
   height: '100%'
 };
 
-function getItemStyles(delta, item, initialOffset, currentOffset, parentRef, parent) {
+function getItemStyles(delta, item, initialOffset, currentOffset, parentRef, parent, currentLayout) {
   if (!initialOffset || !currentOffset || !parentRef.current) {
     return {
       display: 'none'
@@ -32,8 +32,8 @@ function getItemStyles(delta, item, initialOffset, currentOffset, parentRef, par
   const realCanvasBoundingRect = parentRef.current.getElementsByClassName('real-canvas')[0].getBoundingClientRect();
 
   if (id) { // Dragging within the canvas
-    x = Math.round(item.left + delta.x);
-    y = Math.round(item.top + delta.y);
+    x = Math.round(item.layouts[currentLayout].left + delta.x);
+    y = Math.round(item.layouts[currentLayout].top + delta.y);
   } else { // New component being dragged  from components sidebar
     const offsetFromTopOfWindow = realCanvasBoundingRect.top;
     const offsetFromLeftOfWindow = realCanvasBoundingRect.left;
@@ -51,7 +51,7 @@ function getItemStyles(delta, item, initialOffset, currentOffset, parentRef, par
     WebkitTransform: transform
   };
 }
-export const SubCustomDragLayer = ({parentRef, parent}) => {
+export const SubCustomDragLayer = ({parentRef, parent, currentLayout}) => {
   const {
     itemType, isDragging, item, initialOffset, currentOffset, delta
   } = useDragLayer((monitor) => ({
@@ -65,7 +65,7 @@ export const SubCustomDragLayer = ({parentRef, parent}) => {
   function renderItem() {
     switch (itemType) {
       case ItemTypes.BOX:
-        return <BoxDragPreview item={item} />;
+        return <BoxDragPreview item={item} currentLayout={currentLayout} />;
       default:
         return null;
     }
@@ -76,7 +76,7 @@ export const SubCustomDragLayer = ({parentRef, parent}) => {
 
   return (
     <div style={layerStyles} className="sub-custom-drag-layer">
-      <div style={getItemStyles(delta, item, initialOffset, currentOffset, parentRef, parent)}>
+      <div style={getItemStyles(delta, item, initialOffset, currentOffset, parentRef, parent, currentLayout)}>
         {renderItem()}
       </div>
     </div>
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
@@ -6,7 +6,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import Tooltip from 'react-bootstrap/Tooltip';
 
-function setStateAsync(_ref, state) {
+export function setStateAsync(_ref, state) {
   return new Promise((resolve) => {
     _ref.setState(state, resolve);
   });
