added changing strokeWidth of all transitions in other features too when stateSize is changed

Author: anserwaseem

src/features/TestAString.tsx

@@ -258,6 +258,7 @@ const TestAString = (props: TestAStringProps) => {
         end: `${transition.end}ts`,
       };
     }),
+    setTransitions: setTestAStringTransitions,
     currentStates: statesToHighlight.map((state) => `${state}ts`),
     stateSize: dataContext.stateSize,
   };

src/features/components/minimzeDfa/MinimizedDfa.tsx

@@ -492,6 +492,7 @@ export const MinimizedDfa = (props: MinimizedDfaProps) => {
   const playgroundProps: ToolsPlaygroundProps = {
     states: minimizedDfaStates,
     transitions: minimizedDfaTransitions,
+    setTransitions: setMinimizedDfaTransitions,
     canvasWidth: "150%",
     stateSize: props.stateSize,
   };

src/features/components/nfaToDfa/NullClosure.tsx

@@ -28,7 +28,6 @@ import PauseRoundedIcon from "@mui/icons-material/PauseRounded";
 import ReplayRoundedIcon from "@mui/icons-material/ReplayRounded";
 import { PossibleTransitionValues } from "../../../consts/PossibleTransitionValues";
 import { stateSelectedColor } from "../../../consts/Colors";
-import { DataContext } from "../../../components/Editor";
 import { StyledTransitionLabel } from "../playground/StyledTransitionLabel";
 
 const numberOfColumns = 2; // one for state and one for null
@@ -233,6 +232,7 @@ export const NullClosure = (props: NullClosureProps) => {
   const playgroundProps: ToolsPlaygroundProps = {
     states: nullClosureStates,
     transitions: nullClosureTransitions,
+    setTransitions: setNullClosureTransitions,
     stateSize: props.stateSize,
   };
 

src/features/components/nfaToDfa/ResultantDfa.tsx

@@ -484,6 +484,7 @@ export const ResultantDfa = (props: ResultantDfaProps) => {
   const playgroundProps: ToolsPlaygroundProps = {
     states: resultantDfaStates,
     transitions: resultantDfaTransitions,
+    setTransitions: setResultantDfaTransitions,
     stateSize: props.stateSize,
   };
 

src/features/components/tools/Playground.tsx

@@ -6,12 +6,24 @@ import Draggable from "react-draggable";
 import { startingStateColor, stateHoverColor } from "../../../consts/Colors";
 import { XarrowCoreProps } from "../playground/props/XarrowProps";
 import { Box } from "@mui/material";
+import { useEffect } from "react";
 
 export const ToolsPlayground = (props: ToolsPlaygroundProps) => {
   console.log("re rendering ToolsPlayground: props", props);
 
   const updateXarrow = useXarrow();
 
+  useEffect(() => {
+    props.setTransitions((transitions) =>
+      transitions.map((t) => {
+        return {
+          ...t,
+          strokeWidth: props?.stateSize / 10,
+        };
+      })
+    );
+  }, [props?.stateSize]);
+
   const stateToInquire = props.states?.at(0)?.id;
   const uniqueWord = // to ensure that the xarrow is unique
     stateToInquire?.includes("nc")
@@ -45,7 +57,7 @@ export const ToolsPlayground = (props: ToolsPlaygroundProps) => {
             onDragOver={(e) => e.preventDefault()}
           >
             {props.states.map((state) => (
-              <Draggable onDrag={updateXarrow}>
+              <Draggable bounds="parent" onDrag={updateXarrow}>
                 <Box
                   className="state"
                   sx={{

src/features/components/tools/props/PlaygroundProps.ts

@@ -3,6 +3,7 @@ import { DraggableStateModel, TransitionModel } from "../../../../models";
 export type ToolsPlaygroundProps = {
   states: DraggableStateModel[];
   transitions: TransitionModel[];
+  setTransitions: React.Dispatch<React.SetStateAction<TransitionModel[]>>;
   canvasWidth?: number | string;
   currentStates?: string[];
   stateSize?: number;