WIP: Canvas widget drop and positioning

app/client/src/actions/pageActions.tsx

@@ -1,11 +1,8 @@
 import { FetchPageRequest } from "../api/PageApi";
 import { ResponseMeta } from "../api/ApiResponses";
 import { RenderMode } from "../constants/WidgetConstants";
-import {
-  WidgetProps,
-  WidgetDynamicProperty,
-  WidgetDynamicProperties,
-} from "../widgets/BaseWidget";
+import { WidgetProps, WidgetOperation } from "../widgets/BaseWidget";
+import { WidgetType } from "../constants/WidgetConstants";
 import {
   ReduxActionTypes,
   ReduxAction,
@@ -96,19 +93,50 @@ export const savePageError = (payload: SavePageErrorPayload) => {
   };
 };
 
-export const updateWidget = (
-  property: WidgetDynamicProperty,
-  widget: WidgetProps,
-  payload: any,
-) => {
-  switch (property) {
-    case WidgetDynamicProperties.CHILDREN:
-      return;
-    case WidgetDynamicProperties.EXISTENCE:
-      return;
-    case WidgetDynamicProperties.POSITION:
-      return;
-    case WidgetDynamicProperties.SIZE:
-      return;
-  }
+export type WidgetAddChild = {
+  widgetId: string;
+  type: WidgetType;
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+};
+
+export type WidgetMove = {
+  widgetId: string;
+  left: number;
+  top: number;
+  /*
+    If parentWidgetId is different from what we have in redux store, 
+    then we got to delete this,
+    as it has been dropped in another container somewhere.
+    
+    TODO(abhinav): Make sure to handle the scenario where they drop outside the canvas.
+  */
+  parentWidgetId?: string;
+};
+
+export type WidgetRemoveChild = {
+  widgetId: string;
+  childWidgetId: string;
+};
+
+export type WidgetResize = {
+  widgetId: string;
+  width: number;
+  height: number;
+};
+
+export const updateWidget = (
+  operation: WidgetOperation,
+  widgetId: string,
+  payload: any,
+): ReduxAction<
+  WidgetAddChild | WidgetMove | WidgetRemoveChild | WidgetResize
+> => {
+  console.log(operation, widgetId, payload);
+  return {
+    type: ReduxActionTypes["WIDGET_" + operation],
+    payload: { widgetId, ...payload },
+  };
 };

app/client/src/assets/icons/build.sh

@@ -10,4 +10,5 @@ do
 done;
 
 # using relative path for now
-mv fonts ../../../public/
+cp -rf fonts ../../../public/
+rm -r fonts

app/client/src/constants/ReduxActionConstants.tsx

@@ -1,6 +1,6 @@
 import { WidgetProps, WidgetCardProps } from "../widgets/BaseWidget";
 
-export const ReduxActionTypes = {
+export const ReduxActionTypes: { [key: string]: string } = {
   LOAD_CANVAS_WIDGETS: "LOAD_CANVAS_WIDGETS",
   FETCH_CANVAS: "FETCH_CANVAS",
   CLEAR_CANVAS: "CLEAR_CANVAS",
@@ -27,6 +27,11 @@ export const ReduxActionTypes = {
   SAVE_PAGE_SUCCESS: "SAVE_PAGE_SUCCESS",
   SAVE_PAGE_ERROR: "SAVE_PAGE_ERROR",
   FETCH_PAGE_ERROR: "FETCH_PAGE_ERROR",
+  UPDATE_LAYOUT: "UPDATE_LAYOUT",
+  WIDGET_ADD_CHILD: "WIDGET_ADD_CHILD",
+  WIDGET_REMOVE_CHILD: "WIDGET_REMOVE_CHILD",
+  WIDGET_MOVE: "WIDGET_MOVE",
+  WIDGET_RESIZE: "WIDGET_RESIZE",
 };
 
 export type ReduxActionType = (typeof ReduxActionTypes)[keyof typeof ReduxActionTypes];

app/client/src/editorComponents/ButtonComponent.tsx

@@ -5,6 +5,7 @@ import { Container } from "./ContainerComponent";
 
 class ButtonComponent extends React.Component<ButtonComponentProps> {
   render() {
+    console.log("button props", this.props);
     return (
       <Container {...this.props}>
         <Button icon={this.props.icon} onClick={this.props.onClick}>

app/client/src/editorComponents/DropTargetComponent.tsx

@@ -1,42 +1,89 @@
-import React, { useState } from "react";
-import { WidgetProps, WidgetDynamicProperties } from "../widgets/BaseWidget";
+import React, { useState, useLayoutEffect, MutableRefObject } from "react";
+import styled from "styled-components";
+import { WidgetProps, WidgetOperations } from "../widgets/BaseWidget";
 import { useDrop, XYCoord } from "react-dnd";
 import { ContainerProps } from "./ContainerComponent";
 import WidgetFactory from "../utils/WidgetFactory";
+import DropZone from "./Dropzone";
+import { snapToGrid } from "../utils/helpers";
+
+const DEFAULT_CELL_SIZE = 1;
+const DEFAULT_WIDGET_WIDTH = 200;
+const DEFAULT_WIDGET_HEIGHT = 50;
+
 type DropTargetComponentProps = ContainerProps & {
-  onPropertyChange?: Function;
+  updateWidget?: Function;
 };
+
+const WrappedDropTarget = styled.div`
+  background: white;
+`;
+const DropTargetMask = styled.div`
+  position: absolute;
+  z-index: -10;
+  left: 0;
+  right: 0;
+`;
+
 export const DropTargetComponent = (props: DropTargetComponentProps) => {
-  const [isOver, setIsOver] = useState(false);
-  const [, drop] = useDrop({
+  const [dummyState, setDummyState] = useState({ x: 0, y: 0 });
+  const [dropTargetTopLeft, setDropTargetTopLeft] = useState({ x: 0, y: 0 });
+  const dropTargetMask: MutableRefObject<HTMLDivElement | null> = React.useRef(
+    null,
+  );
+  useLayoutEffect(() => {
+    const el = dropTargetMask.current;
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      setDropTargetTopLeft({
+        x: rect.left,
+        y: rect.top,
+      });
+    }
+  }, [setDropTargetTopLeft]);
+
+  const [{ isOver, clientOffset }, drop] = useDrop({
     accept: Object.values(WidgetFactory.getWidgetTypes()),
     drop(item: WidgetProps, monitor) {
       if (monitor.isOver({ shallow: true })) {
         const item = monitor.getItem();
-        const delta = monitor.getDifferenceFromInitialOffset() as XYCoord;
-        const left = Math.round(item.left + delta.x);
-        const top = Math.round(item.top + delta.y);
-        props.onPropertyChange &&
-          props.onPropertyChange(WidgetDynamicProperties.CHILDREN, props, {
-            item,
-            left,
-            top,
+        if (clientOffset) {
+          const [x, y] = snapToGrid(
+            DEFAULT_CELL_SIZE,
+            clientOffset.x - dropTargetTopLeft.x,
+            clientOffset.y - dropTargetTopLeft.y,
+          );
+          props.updateWidget &&
+            props.updateWidget(WidgetOperations.ADD_CHILD, props.widgetId, {
+              type: item.type,
+              left: x,
+              top: y,
+              width:
+                Math.round(DEFAULT_WIDGET_WIDTH / DEFAULT_CELL_SIZE) *
+                DEFAULT_CELL_SIZE,
+              height:
+                Math.round(DEFAULT_WIDGET_HEIGHT / DEFAULT_CELL_SIZE) *
+                DEFAULT_CELL_SIZE,
             });
         }
+      }
+
       return undefined;
     },
-    collect: monitor => ({
-      isOver: monitor.isOver({ shallow: true }),
-    }),
     hover: (item, monitor) => {
-      setIsOver(monitor.isOver({ shallow: true }));
+      setDummyState(monitor.getDifferenceFromInitialOffset() as XYCoord);
     },
-    canDrop() {
-      return true;
+    collect: monitor => ({
+      hovered: !!monitor.isOver(),
+      isOver: !!monitor.isOver({ shallow: true }),
+      clientOffset: monitor.getClientOffset(),
+    }),
+    canDrop: (item, monitor) => {
+      return monitor.isOver({ shallow: true });
     },
   });
   return (
-    <div
+    <WrappedDropTarget
       ref={drop}
       style={{
         position: "absolute",
@@ -47,8 +94,18 @@ export const DropTargetComponent = (props: DropTargetComponentProps) => {
         top: props.style.yPosition + props.style.yPositionUnit,
       }}
     >
-      {isOver ? undefined : props.children}
-    </div>
+      <DropTargetMask ref={dropTargetMask} />
+      <DropZone
+        parentOffset={dropTargetTopLeft}
+        width={DEFAULT_WIDGET_WIDTH}
+        height={DEFAULT_WIDGET_HEIGHT}
+        cellSize={DEFAULT_CELL_SIZE}
+        visible={isOver}
+        currentOffset={clientOffset as XYCoord}
+        dummyState={dummyState}
+      />
+      {props.children}
+    </WrappedDropTarget>
   );
 };
 

app/client/src/editorComponents/Dropzone.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { XYCoord } from "react-dnd";
+import styled from "styled-components";
+import { snapToGrid } from "../utils/helpers";
+type DropZoneWrapperProps = {
+  visible: boolean;
+  left: number;
+  width: number;
+  height: number;
+  top: number;
+};
+const DropZoneWrapper = styled.div<DropZoneWrapperProps>`
+  position: absolute;
+  z-index: 100;
+  display: ${props => (props.visible ? "block" : "none")};
+  left: ${props => props.left}px;
+  width: ${props => props.width}px;
+  top: ${props => props.top}px;
+  height: ${props => props.height}px;
+  background: ${props => props.theme.colors.hover};
+  border: 1px dashed ${props => props.theme.colors.textAnchor};
+  opacity: 0.7;
+  transition: all 0.2s ease-in-out 0s;
+`;
+
+type DropZoneProps = {
+  currentOffset: XYCoord;
+  height: number;
+  width: number;
+  visible: boolean;
+  parentOffset: XYCoord;
+  cellSize: number;
+  dummyState: XYCoord;
+};
+/* eslint-disable react/display-name */
+export const DropZone = (props: DropZoneProps) => {
+  let wrapperProps = {
+    visible: false,
+    left: 0,
+    top: 0,
+    height: 0,
+    width: 0,
+  };
+
+  if (props.visible) {
+    if (props.currentOffset && props.currentOffset.x >= props.parentOffset.x) {
+      const [x, y] = snapToGrid(
+        props.cellSize,
+        props.currentOffset.x - props.parentOffset.x,
+        props.currentOffset.y - props.parentOffset.y,
+      );
+      wrapperProps = {
+        visible: true,
+        left: x,
+        top: y,
+        height: props.height,
+        width: props.width,
+      };
+    }
+  }
+
+  return <DropZoneWrapper {...wrapperProps} />;
+};
+
+export default DropZone;

app/client/src/pages/Editor/Canvas.tsx

@@ -14,7 +14,7 @@ const ArtBoard = styled.div`
 `;
 
 interface CanvasProps {
-  layout: ContainerWidgetProps<WidgetProps>;
+  dsl: ContainerWidgetProps<WidgetProps>;
   widgetFunctions: WidgetFunctions;
 }
 
@@ -22,9 +22,9 @@ const Canvas = (props: CanvasProps) => {
   return (
     <React.Fragment>
       <ArtBoard>
-        {props.layout.widgetId &&
+        {props.dsl.widgetId &&
           WidgetFactory.createWidget(
-            props.layout,
+            props.dsl,
             props.widgetFunctions,
             RenderModes.CANVAS,
           )}

app/client/src/pages/Editor/index.tsx

@@ -5,7 +5,7 @@ import Canvas from "./Canvas";
 import {
   WidgetCardProps,
   WidgetProps,
-  WidgetDynamicProperty,
+  WidgetOperation,
 } from "../../widgets/BaseWidget";
 import { AppState } from "../../reducers";
 import { EditorReduxState } from "../../reducers/uiReducers/editorReducer";
@@ -49,9 +49,10 @@ const EditorWrapper = styled.div`
 `;
 
 type EditorProps = {
-  layout: ContainerWidgetProps<WidgetProps> | any;
+  dsl: ContainerWidgetProps<WidgetProps> | any;
   fetchCanvasWidgets: Function;
   executeAction: (actionPayloads?: ActionPayload[]) => void;
+  updateWidget: Function;
   cards: { [id: string]: WidgetCardProps[] } | any;
   updateWidgetProperty: Function;
   savePageLayout: Function;
@@ -74,11 +75,13 @@ class Editor extends Component<EditorProps> {
           <EditorDragLayer />
           <CanvasContainer>
             <Canvas
-              layout={{
-                ...this.props.layout,
-                onPropertyChange: this.props.updateWidgetProperty,
+              dsl={{
+                ...this.props.dsl,
+              }}
+              widgetFunctions={{
+                executeAction: this.props.executeAction,
+                updateWidget: this.props.updateWidget,
               }}
-              widgetFunctions={{ executeAction: this.props.executeAction }}
             />
           </CanvasContainer>
         </EditorWrapper>
@@ -88,13 +91,13 @@ class Editor extends Component<EditorProps> {
 }
 
 const mapStateToProps = (state: AppState): EditorReduxState => {
-  const layout = CanvasWidgetsNormalizer.denormalize(
+  const dsl = CanvasWidgetsNormalizer.denormalize(
     state.ui.editor.pageWidgetId,
     state.entities,
   );
   return {
     cards: state.ui.widgetCardsPane.cards,
-    layout,
+    dsl,
     pageWidgetId: state.ui.editor.pageWidgetId,
     currentPageId: state.ui.editor.currentPageId,
     currentLayoutId: state.ui.editor.currentLayoutId,
@@ -107,11 +110,11 @@ const mapDispatchToProps = (dispatch: any) => {
       dispatch(executeAction(actionPayloads)),
     fetchCanvasWidgets: (pageId: string) =>
       dispatch(fetchPage(pageId, RenderModes.CANVAS)),
-    updateWidgetProperty: (
-      propertyType: WidgetDynamicProperty,
-      widgetProps: WidgetProps,
+    updateWidget: (
+      operation: WidgetOperation,
+      widgetId: string,
       payload: any,
-    ) => dispatch(updateWidget(propertyType, widgetProps, payload)),
+    ) => dispatch(updateWidget(operation, widgetId, payload)),
     savePageLayout: (
       pageId: string,
       layoutId: string,

app/client/src/reducers/entityReducers/canvasWidgetsReducer.tsx

@@ -5,12 +5,13 @@ import {
   ReduxAction,
 } from "../../constants/ReduxActionConstants";
 import { WidgetProps } from "../../widgets/BaseWidget";
+import { ContainerWidgetProps } from "../../widgets/ContainerWidget";
 
 const initialState: CanvasWidgetsReduxState = {};
 
-export interface FlattenedWidgetProps extends WidgetProps {
+export type FlattenedWidgetProps = ContainerWidgetProps<WidgetProps> & {
   children?: string[];
-}
+};
 
 const canvasWidgetsReducer = createReducer(initialState, {
   [ReduxActionTypes.LOAD_CANVAS_WIDGETS]: (
@@ -19,24 +20,11 @@ const canvasWidgetsReducer = createReducer(initialState, {
   ) => {
     return { ...action.payload.widgets };
   },
-  [ReduxActionTypes.ADD_PAGE_WIDGET]: (
+  [ReduxActionTypes.UPDATE_LAYOUT]: (
     state: CanvasWidgetsReduxState,
-    action: ReduxAction<{ pageId: string; widget: WidgetProps }>,
+    action: ReduxAction<LoadCanvasWidgetsPayload>,
   ) => {
-    // const widget = action.payload.widget;
-    // const widgetTree = CanvasWidgetsNormalizer.denormalize("0", {
-    //   canvasWidgets: state,
-    // });
-    // const children = widgetTree.children || [];
-    // children.push(widget);
-    // widgetTree.children = children;
-    // const newState = CanvasWidgetsNormalizer.normalize({
-    //   responseMeta: { responseCode: "SUCCESS" },
-    //   layout: { dsl: widgetTree, actions: [] },
-    // }).entities;
-    // return newState.canvasWidgets;
-    console.log(action.payload.widget);
-    return state;
+    return { ...action.payload.widgets };
   },
 });
 

app/client/src/reducers/uiReducers/editorReducer.tsx

@@ -19,7 +19,7 @@ const editorReducer = createReducer(initialState, {
     state: EditorReduxState,
     action: ReduxAction<LoadWidgetCardsPanePayload>,
   ) => {
-    return { ...state.layout, ...action.payload };
+    return { ...state.dsl, ...action.payload };
   },
   [ReduxActionTypes.ADD_PAGE_WIDGET]: (state: EditorReduxState) => {
     return state;
@@ -33,7 +33,7 @@ const editorReducer = createReducer(initialState, {
 });
 
 export interface EditorReduxState {
-  layout?: ContainerWidgetProps<WidgetProps>;
+  dsl?: ContainerWidgetProps<WidgetProps>;
   cards?: {
     [id: string]: WidgetCardProps[];
   };

app/client/src/sagas/PageSagas.tsx

@@ -16,10 +16,13 @@ import PageApi, {
   FetchPageRequest,
   SavePageRequest,
 } from "../api/PageApi";
-import { call, put, takeLatest, all } from "redux-saga/effects";
+import { FlattenedWidgetProps } from "../reducers/entityReducers/canvasWidgetsReducer";
+import { call, put, takeLatest, takeEvery, all } from "redux-saga/effects";
 import { extractCurrentDSL } from "./utils";
 
-export function* fetchPage(pageRequestAction: ReduxAction<FetchPageRequest>) {
+export function* fetchPageSaga(
+  pageRequestAction: ReduxAction<FetchPageRequest>,
+) {
   const pageRequest = pageRequestAction.payload;
   try {
     const fetchPageResponse: FetchPageResponse = yield call(
@@ -49,7 +52,7 @@ export function* fetchPage(pageRequestAction: ReduxAction<FetchPageRequest>) {
   }
 }
 
-export function* savePage(savePageAction: ReduxAction<SavePageRequest>) {
+export function* savePageSaga(savePageAction: ReduxAction<SavePageRequest>) {
   const savePageRequest = savePageAction.payload;
   try {
     const savePageResponse: SavePageResponse = yield call(
@@ -63,9 +66,27 @@ export function* savePage(savePageAction: ReduxAction<SavePageRequest>) {
   }
 }
 
+export function* updateLayoutSaga(
+  updateLayoutAction: ReduxAction<{
+    widgets: { [widgetId: string]: FlattenedWidgetProps };
+  }>,
+) {
+  try {
+    const { widgets } = updateLayoutAction.payload;
+    const denormalizedDSL = CanvasWidgetsNormalizer.denormalize(
+      Object.keys(widgets)[0],
+      { canvasWidgets: widgets },
+    );
+    console.log(denormalizedDSL);
+  } catch (err) {
+    console.log(err);
+  }
+}
+
 export default function* pageSagas() {
   yield all([
-    takeLatest(ReduxActionTypes.FETCH_PAGE, fetchPage),
-    takeLatest(ReduxActionTypes.SAVE_PAGE_INIT, savePage),
+    takeLatest(ReduxActionTypes.FETCH_PAGE, fetchPageSaga),
+    takeLatest(ReduxActionTypes.SAVE_PAGE_INIT, savePageSaga),
+    takeEvery(ReduxActionTypes.UPDATE_LAYOUT, updateLayoutSaga),
   ]);
 }

app/client/src/sagas/WidgetOperationSagas.tsx

@@ -0,0 +1,59 @@
+import {
+  ReduxActionTypes,
+  ReduxAction,
+} from "../constants/ReduxActionConstants";
+import { WidgetAddChild } from "../actions/pageActions";
+import { FlattenedWidgetProps } from "../reducers/entityReducers/canvasWidgetsReducer";
+import { getWidgets, getWidget } from "./selectors";
+import { generateWidgetProps } from "./utils";
+import { put, select, takeEvery, all } from "redux-saga/effects";
+
+export function* addChildSaga(addChildAction: ReduxAction<WidgetAddChild>) {
+  try {
+    const { widgetId, type, left, top, width, height } = addChildAction.payload;
+    const widget = yield (select(
+      getWidget,
+      widgetId,
+    ) as any) as FlattenedWidgetProps;
+    const widgets = yield select(getWidgets) as any;
+
+    const childWidget = generateWidgetProps(
+      widget,
+      type,
+      left,
+      top,
+      width,
+      height,
+    );
+    widgets[childWidget.widgetId] = childWidget;
+    if (widget && widget.children) {
+      widget.children.push(childWidget.widgetId);
+    }
+    widgets[widgetId] = widget;
+    yield put({
+      type: ReduxActionTypes.UPDATE_LAYOUT,
+      payload: { widgets },
+    });
+  } catch (err) {
+    yield put({
+      type: ReduxActionTypes.WIDGET_OPERATION_ERROR,
+      action: ReduxActionTypes.WIDGET_ADD_CHILD,
+      ...err,
+    });
+  }
+}
+
+// export function* removeChildSaga() {}
+
+// export function* moveSaga() {}
+
+// export function* resizeSaga() {}
+
+export default function* widgetOperationSagas() {
+  yield all([
+    takeEvery(ReduxActionTypes.WIDGET_ADD_CHILD, addChildSaga),
+    // takeEvery(ReduxActionTypes.WIDGET_REMOVE_CHILD, removeChildSaga),
+    // takeEvery(ReduxActionTypes.WIDGET_MOVE, moveSaga),
+    // takeEvery(ReduxActionTypes.WIDGET_RESIZE, resizeSaga),
+  ]);
+}

app/client/src/sagas/index.tsx

@@ -2,11 +2,13 @@ import { all, spawn } from "redux-saga/effects";
 import pageSagas from "../sagas/PageSagas";
 import { fetchWidgetCardsSaga } from "./WidgetCardsPaneSagas";
 import { watchExecuteActionSaga } from "./ActionSagas";
+import widgetOperationSagas from "./WidgetOperationSagas";
 
 export function* rootSaga() {
   yield all([
     spawn(pageSagas),
     spawn(fetchWidgetCardsSaga),
     spawn(watchExecuteActionSaga),
+    spawn(widgetOperationSagas),
   ]);
 }

app/client/src/sagas/selectors.tsx

@@ -0,0 +1,13 @@
+import { AppState } from "../reducers";
+import { FlattenedWidgetProps } from "../reducers/entityReducers/canvasWidgetsReducer";
+import { WidgetProps } from "../widgets/BaseWidget";
+
+export const getWidgets = (
+  state: AppState,
+): { [widgetId: string]: FlattenedWidgetProps } => {
+  return state.entities.canvasWidgets;
+};
+
+export const getWidget = (state: AppState, widgetId: string): WidgetProps => {
+  return state.entities.canvasWidgets[widgetId];
+};

app/client/src/sagas/utils.tsx

@@ -1,6 +1,8 @@
 import { FetchPageResponse } from "../api/PageApi";
 import { ContainerWidgetProps } from "../widgets/ContainerWidget";
 import { WidgetProps } from "../widgets/BaseWidget";
+import { WidgetType, RenderModes } from "../constants/WidgetConstants";
+import { generateReactKey } from "../utils/generators";
 
 export const extractCurrentDSL = (
   fetchPageResponse: FetchPageResponse,
@@ -8,6 +10,45 @@ export const extractCurrentDSL = (
   return fetchPageResponse.data.layouts[0].dsl;
 };
 
+export const generateWidgetProps = (
+  parent: ContainerWidgetProps<WidgetProps>,
+  type: WidgetType,
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+): WidgetProps => {
+  if (parent && parent.snapColumns && parent.snapRows) {
+    const parentColumnWidth = Math.floor(
+      ((parent.rightColumn - parent.leftColumn) * parent.parentColumnSpace) /
+        parent.snapColumns,
+    );
+    const parentRowHeight = Math.floor(
+      ((parent.bottomRow - parent.topRow) * parent.parentRowSpace) /
+        parent.snapRows,
+    );
+    return {
+      type,
+      leftColumn: Math.floor(left / parentColumnWidth),
+      rightColumn: Math.floor((left + width) / parentColumnWidth),
+      topRow: Math.floor(top / parentRowHeight),
+      bottomRow: Math.floor((top + height) / parentRowHeight),
+      widgetId: generateReactKey(),
+      widgetName: generateReactKey(), //TODO: figure out what this is to populate appropriately
+      isVisible: true,
+      parentColumnSpace: parentColumnWidth,
+      parentRowSpace: parentRowHeight,
+      executeAction: () => {},
+      renderMode: RenderModes.CANVAS, //Is this required?
+    };
+  } else {
+    if (parent)
+      throw Error("Failed to create widget: Parent's size cannot be calculate");
+    else throw Error("Failed to create widget: Parent was not provided ");
+  }
+};
+
 export default {
   extractCurrentDSL,
+  generateWidgetProps,
 };

app/client/src/utils/WidgetFactory.tsx

@@ -27,6 +27,7 @@ class WidgetFactory {
       ...widgetData,
       ...widgetFunctions,
     };
+    console.log("=====", widgetData);
     const widgetBuilder = this.widgetMap.get(widgetData.type);
     if (widgetBuilder) {
       const widget = widgetBuilder.buildWidget(widgetProps);

app/client/src/utils/WidgetRegistry.tsx

@@ -17,6 +17,7 @@ class WidgetBuilderRegistry {
   static registerWidgetBuilders() {
     WidgetFactory.registerWidgetBuilder("CONTAINER_WIDGET", {
       buildWidget(widgetData: ContainerWidgetProps<WidgetProps>): JSX.Element {
+        console.log("Registry container", widgetData);
         return <ContainerWidget {...widgetData} />;
       },
     });
@@ -29,6 +30,7 @@ class WidgetBuilderRegistry {
 
     WidgetFactory.registerWidgetBuilder("BUTTON_WIDGET", {
       buildWidget(widgetData: ButtonWidgetProps): JSX.Element {
+        console.log("Register button", widgetData);
         return <ButtonWidget {...widgetData} />;
       },
     });

app/client/src/utils/helpers.tsx

@@ -0,0 +1,5 @@
+export const snapToGrid = (cellSize: number, x: number, y: number) => {
+  const snappedX = Math.floor(x / cellSize) * cellSize;
+  const snappedY = Math.floor(y / cellSize) * cellSize;
+  return [snappedX, snappedY];
+};

app/client/src/widgets/BaseWidget.tsx

@@ -29,6 +29,7 @@ abstract class BaseWidget<
     initialState.height = 0;
     initialState.width = 0;
     this.state = initialState as K;
+    console.log(this.props);
   }
 
   componentDidMount(): void {
@@ -129,8 +130,8 @@ abstract class BaseWidget<
   }
 
   static defaultProps: Partial<WidgetProps> = {
-    parentRowSpace: 64,
-    parentColumnSpace: 64,
+    parentRowSpace: 1,
+    parentColumnSpace: 1,
     topRow: 0,
     leftColumn: 0,
   };
@@ -171,6 +172,7 @@ export interface WidgetDataProps {
 
 export interface WidgetFunctions {
   executeAction: (actionPayloads?: ActionPayload[]) => void;
+  updateWidget?: Function;
 }
 
 export interface WidgetCardProps {
@@ -180,13 +182,16 @@ export interface WidgetCardProps {
   icon: string;
 }
 
-export const WidgetDynamicProperties = {
-  POSITION: "POSITION",
-  SIZE: "SIZE",
-  CHILDREN: "CHILDREN",
-  EXISTENCE: "EXISTENCE",
+export const WidgetOperations = {
+  // WidgetActivities?
+  MOVE: "MOVE",
+  RESIZE: "RESIZE",
+  ADD_CHILD: "ADD_CHILD",
+  REMOVE_CHILD: "REMOVE_CHILD",
+  UPDATE_PROPERTY: "UPDATE_PROPERTY",
+  DELETE: "DELETE",
 };
 
-export type WidgetDynamicProperty = (typeof WidgetDynamicProperties)[keyof typeof WidgetDynamicProperties];
+export type WidgetOperation = (typeof WidgetOperations)[keyof typeof WidgetOperations];
 
 export default BaseWidget;