improved algorithm for generating x and y coordiantes for making new state

Author: anserwaseem

src/components/Editor.tsx

@@ -45,6 +45,7 @@ import {
   StateMinSize,
 } from "../consts/StateSizes";
 import { ErrorSnackbar } from "../common/ErrorSnackbar";
+import { GenerateXYCoordinatesForNewState } from "../utils/GenerateXYCoordinatesForNewState";
 
 export const DataContext = createContext<AutomataData>({} as AutomataData);
 
@@ -173,11 +174,8 @@ export const Editor = () => {
 
     setRowId((prev) => prev + 1);
 
-    const newState = new DraggableStateModel(
-      row.state,
-      Math.floor(Math.random() * playgroundSize.width),
-      Math.floor(Math.random() * playgroundSize.height)
-    );
+    const { x, y } = GenerateXYCoordinatesForNewState(states, playgroundSize);
+    const newState = new DraggableStateModel(row.state, x, y);
 
     setStates((prev) => [...prev, newState]);
   };
@@ -535,8 +533,9 @@ export const Editor = () => {
     let stateX: number, stateY: number;
     // check if event has touch data (mobile) or mouse data (desktop)
     if (e.touches) {
-      stateX = Math.floor(Math.random() * playgroundSize.width);
-      stateY = Math.floor(Math.random() * playgroundSize.height);
+      const { x, y } = GenerateXYCoordinatesForNewState(states, playgroundSize);
+      stateX = x;
+      stateY = y;
     } else {
       stateX = e.clientX - rect.x;
       stateY = e.clientY - rect.y;

src/features/components/nfaToDfa/ResultantDfa.tsx

@@ -43,6 +43,7 @@ import { CustomAppBar } from "../../../common/CustomAppBar";
 import { CustomDrawer } from "../../../common/CustomDrawer";
 import { CustomAppBarProps } from "../../../common/props/CustomAppBarProps";
 import { CustomDrawerProps } from "../../../common/props/CustomDrawerProps";
+import { GenerateXYCoordinatesForNewState } from "../../../utils/GenerateXYCoordinatesForNewState";
 
 const numberOfColumns = 3; // one for state, one for a and one for b
 let index = numberOfColumns;
@@ -189,12 +190,16 @@ export const ResultantDfa = (props: ResultantDfaProps) => {
           ]);
 
           // add new state to resultantDfaStates
+          const { x, y } = GenerateXYCoordinatesForNewState(
+            resultantDfaStates,
+            props.playgroundSize
+          );
           setResultantDfaStates((resultantDfaStates) => [
             ...resultantDfaStates,
             {
               id: stateToProcess,
-              x: Math.floor(Math.random() * props.playgroundSize.width),
-              y: Math.floor(Math.random() * props.playgroundSize.height),
+              x: x,
+              y: y,
             },
           ]);
 

src/utils/GenerateXYCoordinatesForNewState.ts

@@ -0,0 +1,38 @@
+import { PlaygroundSize } from "../components/types/PlaygroundSize";
+import { StateDefaultSize } from "../consts/StateSizes";
+import { DraggableStateModel } from "../models";
+
+export const GenerateXYCoordinatesForNewState = (
+  states: DraggableStateModel[],
+  playgroundSize: PlaygroundSize
+) => {
+  return GenerateCYCoordinatesForNewStateHelper(states, playgroundSize, 0);
+};
+
+function GenerateCYCoordinatesForNewStateHelper(
+  states: DraggableStateModel[],
+  playgroundSize: PlaygroundSize,
+  index: number
+) {
+  let x: number, y: number;
+
+  x = Math.floor(Math.random() * playgroundSize.width);
+  y = Math.floor(Math.random() * playgroundSize.height);
+
+  const isOverlapping =
+    index < 1000 &&
+    states.some(
+      (state) =>
+        Math.abs(state.x - x) < StateDefaultSize &&
+        Math.abs(state.y - y) < StateDefaultSize
+    );
+
+  if (isOverlapping) {
+    return GenerateCYCoordinatesForNewStateHelper(
+      states,
+      playgroundSize,
+      ++index
+    );
+  }
+  return { x, y };
+}