Refactor Dashboard size calculations and update DashboardTextComponent height

Common/Types/Dashboard/DashboardSize.ts

@@ -80,12 +80,18 @@ export const GetDashboardComponentWidthInDashboardUnits: GetDashboardComponentWi
     currentTotalDashboardWidthInPx: number,
     componentWidthInPx: number,
   ): number => {
-    return Math.floor(
-      (componentWidthInPx +
-        (DefaultDashboardSize.widthInDashboardUnits - 1) *
-          SpaceBetweenUnitsInPx) /
-        GetDashboardUnitWidthInPx(currentTotalDashboardWidthInPx),
-    );
+    const eachUnitSizeInPx: number =
+      currentTotalDashboardWidthInPx /
+      DefaultDashboardSize.widthInDashboardUnits; // each square is these many pixels
+
+    // now check how many squares can fit in the component width
+    const units: number = Math.ceil(componentWidthInPx / eachUnitSizeInPx);
+
+    if (units < 1) {
+      return 1;
+    }
+
+    return units;
   };
 
 type GetDashboardComponentHeightInDashboardUnitsFunction = (
@@ -98,12 +104,18 @@ export const GetDashboardComponentHeightInDashboardUnits: GetDashboardComponentH
     currentTotalDashboardWidthInPx: number,
     componentHeightInPx: number,
   ): number => {
-    return Math.floor(
-      (componentHeightInPx +
-        (DefaultDashboardSize.heightInDashboardUnits - 1) *
-          SpaceBetweenUnitsInPx) /
-        GetDashboardUnitHeightInPx(currentTotalDashboardWidthInPx),
-    );
+    const eachUnitSizeInPx: number =
+      currentTotalDashboardWidthInPx /
+      DefaultDashboardSize.widthInDashboardUnits; // each square is these many pixels
+
+    // now check how many squares can fit in the component height
+    const units: number = Math.ceil(componentHeightInPx / eachUnitSizeInPx);
+
+    if (units < 1) {
+      return 1;
+    }
+
+    return units;
   };
 
 export default DefaultDashboardSize;

Common/Utils/Dashboard/Components/DashboardTextComponent.ts

@@ -8,7 +8,7 @@ export default class DashboardTextComponentUtil extends DashboardBaseComponentUt
     return {
       _type: ObjectType.DashboardTextComponent,
       widthInDashboardUnits: 6,
-      heightInDashboardUnits: 3,
+      heightInDashboardUnits: 1,
       topInDashboardUnits: 0,
       leftInDashboardUnits: 0,
       text: "Hello, World!",

Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx

@@ -13,6 +13,7 @@ import {
   GetDashboardUnitHeightInPx,
   GetDashboardUnitWidthInPx,
   MarginForEachUnitInPx,
+  SpaceBetweenUnitsInPx,
 } from "Common/Types/Dashboard/DashboardSize";
 import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes";
 
@@ -82,8 +83,9 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
     }
 
     let newDashboardComponentwidthInPx: number =
-      event.pageX - dashboardComponentRef.current.getBoundingClientRect().left;
-
+      event.clientX -
+      (window.scrollX +
+        dashboardComponentRef.current.getBoundingClientRect().left);
     if (
       GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) >
       newDashboardComponentwidthInPx
@@ -115,7 +117,9 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
     }
 
     let newDashboardComponentHeightInPx: number =
-      event.pageY - dashboardComponentRef.current.getBoundingClientRect().top;
+      event.clientY -
+      (window.scrollY +
+        dashboardComponentRef.current.getBoundingClientRect().top);
 
     if (
       GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) >
@@ -186,6 +190,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
           top: "-9px",
           left: "-9px",
         }}
+        key={props.key}
         onMouseDown={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
           event.preventDefault();
 
@@ -264,6 +269,16 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
       }}
       style={{
         margin: `${MarginForEachUnitInPx}px`,
+        height: `${
+          GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) *
+            heightOfComponent +
+          SpaceBetweenUnitsInPx * (heightOfComponent - 1)
+        }px`,
+        width: `${
+          GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) *
+            widthOfComponent +
+          (SpaceBetweenUnitsInPx - 2) * (widthOfComponent - 1)
+        }px`,
       }}
       ref={dashboardComponentRef}
     >