added state in playground when 'Add a Row' button is clicked

Author: anserwaseem

package-lock.json

@@ -10,6 +10,7 @@
     "@mui/material": "^5.10.12",
     "@mui/styled-engine-sc": "^5.10.6",
     "@mui/x-data-grid": "^5.17.10",
+    "@react-hook/resize-observer": "^1.2.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

package.json

@@ -13,6 +13,7 @@ import TransitionTable from "../features/TransitionTable";
 import { promptNewStateName } from "../utils/PromptNewStateName";
 import { PossibleTransitionValues } from "../consts/PossibleTransitionValues";
 import { StateNameMaxLength } from "../consts/StateNameMaxLength";
+import { PlaygroundSize } from "./interfaces/playgroundSize";
 
 const Editor = () => {
   console.log("re rendering Editor");
@@ -93,10 +94,23 @@ const Editor = () => {
 
   const [selected, setSelected] = useState<SelectedElementType | null>(null);
   const [actionState, setActionState] = useState("Normal");
+  const [size, setSize] = useState<PlaygroundSize>({ width: 0, height: 0 });
 
   const handleAddRow = (row: RowModel) => {
     setGridData((prev) => [...prev, row]);
     setGridRowId((prev) => prev + 1);
+    console.log(
+      "added row, now adding new state at: ",
+      size.width,
+      size.height
+    );
+    let newBox = {
+      id: row.node,
+      x: Math.floor(Math.random() * size.width),
+      y: Math.floor(Math.random() * size.height),
+      shape: "state",
+    };
+    setBoxes((prev) => [...prev, newBox]);
   };
 
   const handleDeleteRow = (row: RowModel) => {
@@ -218,7 +232,7 @@ const Editor = () => {
         return prev;
       }
 
-      return [...prev].map((r) =>
+      return prev.map((r) =>
         r.id === row.id
           ? {
               ...r,
@@ -373,7 +387,11 @@ const Editor = () => {
     }
     console.log("boxes", boxes);
 
-    handleAddRow(new RowModel(gridRowId, stateName, "", "", "", false, false));
+    setGridData((prev) => [
+      ...prev,
+      new RowModel(gridRowId, stateName, "", "", "", false, false),
+    ]);
+    setGridRowId((prev) => prev + 1);
   };
 
   const transitionTableProps: TransitionTableProps = {
@@ -402,6 +420,7 @@ const Editor = () => {
     handleDeleteRow,
     toggleInitialState,
     toggleFinalState,
+    setSize,
   };
 
   return (

src/components/Editor.tsx

@@ -0,0 +1,4 @@
+export interface PlaygroundSize {
+  width: number;
+  height: number;
+}

src/components/interfaces/playgroundSize.ts

@@ -7,10 +7,18 @@ import TopBar from "./components/playground/TopBar";
 import { PlaygroundProps } from "./props/PlaygroundProps";
 import Box from "./components/playground/Box";
 import Xarrow from "./components/playground/Xarrow";
+import useElementSize from "./hooks/useElementSize";
+import { useEffect } from "react";
 
 const Playground = (props: PlaygroundProps) => {
   console.log("re rendering Playground: props", props);
 
+  const [boxRef, { width, height }] = useElementSize();
+  useEffect(() => {
+    console.log("useEffect of playground due to width & height", width, height);
+    props.setSize({ width, height });
+  }, [width, height]);
+
   const topBarprops: TopBarProps = {
     boxes: props.boxes,
     setBoxes: props.setBoxes,
@@ -73,6 +81,7 @@ const Playground = (props: PlaygroundProps) => {
             className="boxesContainer"
             onDragOver={(e) => e.preventDefault()}
             onDrop={props.handleDropDynamic}
+            ref={boxRef}
           >
             <TopBar {...topBarprops} />
 

src/features/Playground.tsx

@@ -65,8 +65,7 @@
   align-items: center;
   height: calc(100% - 68px);
 }
-.state,
-.interfaceBox {
+.state {
   border: 1px #999 solid;
   border-radius: 50px;
   text-align: center;

src/features/css/Playground.css

@@ -0,0 +1,28 @@
+import { MutableRefObject, useLayoutEffect, useRef, useState } from "react";
+import useResizeObserver from "@react-hook/resize-observer";
+import { PlaygroundSize } from "../../components/interfaces/playgroundSize";
+
+export default function useElementSize<
+  T extends HTMLElement = HTMLDivElement
+>(): [MutableRefObject<T | null>, PlaygroundSize] {
+  const target = useRef<T | null>(null);
+  const [size, setSize] = useState<PlaygroundSize>({
+    width: 0,
+    height: 0,
+  });
+
+  const setRoundedSize = ({ width, height }: PlaygroundSize) => {
+    setSize({ width: Math.round(width) - 51, height: Math.round(height) - 51 }); // -51 because state is 50px in size so we need to remove that from the width and height plus 1 for the border
+  };
+
+  useLayoutEffect(() => {
+    target.current && setRoundedSize(target.current.getBoundingClientRect());
+  }, [target]);
+
+  useResizeObserver(target, (entry) => {
+    const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0];
+    setRoundedSize({ width, height });
+  });
+
+  return [target, size];
+}

src/features/hooks/useElementSize.ts

@@ -1,3 +1,4 @@
+import { PlaygroundSize } from "../../components/interfaces/playgroundSize";
 import { DraggableStateModel, RowModel, TransitionModel } from "../../models";
 import { SelectedElementType } from "./SelectedElementType";
 
@@ -18,4 +19,5 @@ export type PlaygroundProps = {
   handleDeleteRow: (row: RowModel) => void;
   toggleInitialState: (row: RowModel) => void;
   toggleFinalState: (row: RowModel) => void;
+  setSize: React.Dispatch<React.SetStateAction<PlaygroundSize>>;
 };