feat: Widget grouping Extended Features

app/client/src/actions/canvasSelectionActions.ts

@@ -1,5 +1,20 @@
 import { ReduxAction, ReduxActionTypes } from "constants/ReduxActionConstants";
 import { SelectedArenaDimensions } from "pages/common/CanvasSelectionArena";
+import { XYCord } from "utils/hooks/useCanvasDragging";
+
+export const setCanvasSelectionFromEditor = (
+  start: boolean,
+  startPoints?: XYCord,
+) => {
+  return {
+    type: start
+      ? ReduxActionTypes.START_CANVAS_SELECTION_FROM_EDITOR
+      : ReduxActionTypes.STOP_CANVAS_SELECTION_FROM_EDITOR,
+    payload: {
+      ...(start && startPoints ? { startPoints } : {}),
+    },
+  };
+};
 
 export const setCanvasSelectionStateAction = (
   start: boolean,

app/client/src/actions/widgetSelectionActions.ts

@@ -1,5 +1,4 @@
 import { ReduxActionTypes, ReduxAction } from "constants/ReduxActionConstants";
-import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
 
 export const selectWidgetAction = (
   widgetId?: string,
@@ -50,14 +49,9 @@ export const deselectMultipleWidgetsAction = (
   };
 };
 
-export const selectAllWidgetsInCanvasInitAction = (
-  canvasId = MAIN_CONTAINER_WIDGET_ID,
-): ReduxAction<{ canvasId: string }> => {
+export const selectAllWidgetsInCanvasInitAction = () => {
   return {
     type: ReduxActionTypes.SELECT_ALL_WIDGETS_IN_CANVAS_INIT,
-    payload: {
-      canvasId,
-    },
   };
 };
 

app/client/src/components/editorComponents/ResizableComponent.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef, memo, useMemo } from "react";
-import { XYCoord } from "react-dnd";
+import { XYCord } from "utils/hooks/useCanvasDragging";
 
 import {
   WidgetOperations,
@@ -132,7 +132,7 @@ export const ResizableComponent = memo(function ResizableComponent(
   // Checks if the current resize position has any collisions
   // If yes, set isColliding flag to true.
   // If no, set isColliding flag to false.
-  const isColliding = (newDimensions: UIElementSize, position: XYCoord) => {
+  const isColliding = (newDimensions: UIElementSize, position: XYCord) => {
     // Moving the bounding element calculations inside
     // to make this expensive operation only whne
     const boundingElementClientRect = boundingElement
@@ -231,7 +231,7 @@ export const ResizableComponent = memo(function ResizableComponent(
   // 1) There is no collision
   // 2) There is a change in widget size
   // Update widget, if both of the above are true.
-  const updateSize = (newDimensions: UIElementSize, position: XYCoord) => {
+  const updateSize = (newDimensions: UIElementSize, position: XYCord) => {
     // Get the difference in size of the widget, before and after resizing.
     const delta: UIElementSize = {
       height: newDimensions.height - dimensions.height,

app/client/src/components/editorComponents/ResizableUtils.tsx

@@ -1,4 +1,4 @@
-import { XYCoord } from "react-dnd";
+import { XYCord } from "utils/hooks/useCanvasDragging";
 import { WidgetProps, WidgetRowCols } from "widgets/BaseWidget";
 import { GridDefaults } from "constants/WidgetConstants";
 
@@ -8,7 +8,7 @@ export const RESIZABLE_CONTAINER_BORDER_THEME_INDEX = 1;
 
 export const computeRowCols = (
   delta: UIElementSize,
-  position: XYCoord,
+  position: XYCord,
   props: WidgetProps,
 ) => {
   return {
@@ -51,7 +51,7 @@ export const hasRowColsChanged = (
 
 export const computeFinalRowCols = (
   delta: UIElementSize,
-  position: XYCoord,
+  position: XYCord,
   props: WidgetProps,
 ): WidgetRowCols | false => {
   const newRowCols = computeBoundedRowCols(

app/client/src/constants/ReduxActionConstants.tsx

@@ -124,6 +124,8 @@ export const ReduxActionTypes = {
   LOAD_WIDGET_PANE: "LOAD_WIDGET_PANE",
   ZOOM_IN_CANVAS: "ZOOM_IN_CANVAS",
   ZOOM_OUT_CANVAS: "ZOOM_OUT_CANVAS",
+  START_CANVAS_SELECTION_FROM_EDITOR: "START_CANVAS_SELECTION_FROM_EDITOR",
+  STOP_CANVAS_SELECTION_FROM_EDITOR: "STOP_CANVAS_SELECTION_FROM_EDITOR",
   START_CANVAS_SELECTION: "START_CANVAS_SELECTION",
   STOP_CANVAS_SELECTION: "STOP_CANVAS_SELECTION",
   UNDO_CANVAS_ACTION: "UNDO_CANVAS_ACTION",
@@ -539,6 +541,7 @@ export const ReduxActionErrorTypes = {
   SAVE_PAGE_ERROR: "SAVE_PAGE_ERROR",
   FETCH_WIDGET_CARDS_ERROR: "FETCH_WIDGET_CARDS_ERROR",
   WIDGET_OPERATION_ERROR: "WIDGET_OPERATION_ERROR",
+  WIDGET_SELECTION_ERROR: "WIDGET_SELECTION_ERROR",
   FETCH_PROPERTY_PANE_CONFIGS_ERROR: "FETCH_PROPERTY_PANE_CONFIGS_ERROR",
   FETCH_CONFIGS_ERROR: "FETCH_CONFIGS_ERROR",
   PROPERTY_PANE_ERROR: "PROPERTY_PANE_ERROR",

app/client/src/constants/WidgetConstants.tsx

@@ -120,6 +120,7 @@ export const DroppableWidgets: WidgetType[] = [
   WidgetTypes.FORM_WIDGET,
   WidgetTypes.LIST_WIDGET,
   WidgetTypes.TABS_WIDGET,
+  WidgetTypes.MODAL_WIDGET,
 ];
 
 // Note: Widget Padding + Container Padding === DEFAULT_GRID_ROW_HEIGHT to gracefully lose one row when a container is used,