fix: Disable inputs while animating [PT-187393298]

src/components/app.tsx

@@ -340,7 +340,6 @@ export const App = () => {
   }, [setFastSimulation]);
 
   const uiForGenerate = () => {
-    const disabled = graphEmpty;
     const playLabel = generationMode === "playing" ? "Pause" : (generationMode === "paused" ? "Resume" : "Play");
     const PlayOrPauseIcon = generationMode === "playing" ? PauseIcon : PlayIcon;
     const onPlayClick = generationMode === "playing"
@@ -357,7 +356,7 @@ export const App = () => {
         <div className="flex-col">
           <div>
             <label>Starting State:</label>
-            <select onChange={handleChangeStartingState} value={startingState} disabled={disabled}>
+            <select onChange={handleChangeStartingState} value={startingState} disabled={animating}>
               <option value="">{AnyStartingState}</option>
               {sortedNodes.map(n => <option key={n.id} value={n.id}>{n.label}</option>)}
             </select>
@@ -370,7 +369,7 @@ export const App = () => {
                 value={lengthLimit}
                 onChange={handleChangeLengthLimit}
                 min={1}
-                disabled={disabled}
+                disabled={animating}
               />
             </div>
 
@@ -381,26 +380,26 @@ export const App = () => {
                 value={delimiterValue}
                 placeholder={delimiterPlaceholder}
                 maxLength={3}
-                disabled={disabled}
+                disabled={animating}
               />
             </div>
           </div>
 
-          <SpeedToggle fastSimulation={fastSimulation} onChange={handleSpeedToggle} />
+          <SpeedToggle fastSimulation={fastSimulation} onChange={handleSpeedToggle} disabled={animating} />
 
         </div>
         <div className="buttons">
           <button
             type="button"
             onClick={onPlayClick}
-            disabled={disabled || lengthLimit === undefined}>
+            disabled={graphEmpty || lengthLimit === undefined}>
             <PlayOrPauseIcon />
             {playLabel}
           </button>
           <button
             type="button"
             onClick={handleStep}
-            disabled={disabled || lengthLimit === undefined || generationMode === "playing"}>
+            disabled={graphEmpty || lengthLimit === undefined || generationMode === "playing"}>
             <StepIcon />
             Step
           </button>

src/components/dataset.tsx

@@ -38,6 +38,7 @@ export const Dataset = (props: Props) => {
     return (
       <div className="dataset">
         <Toolbar
+          disabled={animating}
           tools={["home"]}
           onToolSelected={handleToolSelected}
           onReset={onReset}
@@ -63,6 +64,7 @@ export const Dataset = (props: Props) => {
   return (
     <div className="dataset">
       <Toolbar
+        disabled={animating}
         tools={["select","fitView","recenter","reset","home"]}
         onToolSelected={handleToolSelected}
         onReset={onReset}

src/components/drawing.tsx

@@ -299,6 +299,7 @@ export const Drawing = (props: Props) => {
   return (
     <div className="drawing">
       <Toolbar
+        disabled={animating}
         tools={tools}
         onToolSelected={handleToolSelected}
         onReset={onReset}
@@ -337,7 +338,13 @@ export const Drawing = (props: Props) => {
         onChange={handleChangeNode}
         onCancel={handleClearSelectedNode}
       />
-      <AddText ref={textAreaRef} visible={drawingMode === "addText"} width={addTextWidth} onChange={handleTextChange} />
+      <AddText
+        ref={textAreaRef}
+        visible={drawingMode === "addText"}
+        width={addTextWidth}
+        disabled={animating}
+        onChange={handleTextChange}
+      />
     </div>
   );
 };

src/components/drawing/add-text.tsx

@@ -4,6 +4,7 @@ import { clsx } from "clsx";
 import "./add-text.scss";
 
 interface Props {
+  disabled: boolean;
   visible: boolean;
   width: number;
   onChange: (newText: string) => void
@@ -12,14 +13,14 @@ interface Props {
 // eslint-disable-next-line max-len
 const placeholder = "Create a Markov chain by typing or pasting text here.  WARNING: your current Markov chain will be overwritten.";
 
-export const AddText = forwardRef<HTMLTextAreaElement, Props>(({visible, width, onChange}: Props, ref) => {
+export const AddText = forwardRef<HTMLTextAreaElement, Props>(({disabled, visible, width, onChange}: Props, ref) => {
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     onChange(e.currentTarget.value.trim());
   };
 
   return (
     <div className={clsx("addText", {visible})} style={{width}}>
-      <textarea ref={ref} placeholder={placeholder} onChange={handleChange} />
+      <textarea ref={ref} placeholder={placeholder} disabled={disabled} onChange={handleChange} />
     </div>
   );
 });

src/components/speed-toggle.tsx

@@ -4,10 +4,11 @@ import "./speed-toggle.scss";
 
 interface Props {
   fastSimulation: boolean;
+  disabled: boolean;
   onChange: (newValue: boolean) => void;
 }
 
-export const SpeedToggle = ({fastSimulation, onChange}: Props) => {
+export const SpeedToggle = ({fastSimulation, disabled, onChange}: Props) => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     onChange(e.target.checked);
   };
@@ -27,6 +28,7 @@ export const SpeedToggle = ({fastSimulation, onChange}: Props) => {
           title={title}
           checked={fastSimulation}
           onChange={handleChange}
+          disabled={disabled}
         />
         <div style={getStyle(fastSimulation)} className="fast">Fast</div>
       </div>

src/components/toolbar.scss

@@ -21,11 +21,15 @@
       background-color: #dceff2;
     }
 
+    &:disabled {
+      background-color: #ffffff59;
+    }
+
     &.notImplemented {
       cursor: not-allowed;
     }
 
-    &:hover {
+    &:hover:not(:disabled) {
       background-color: rgba(114, 191, 202, 0.12);
     }
   }
@@ -40,7 +44,7 @@
     button {
       background-color: #177991;
 
-      &:hover {
+      &:hover:not(:disabled) {
         background-color: rgba(114, 191, 202, 0.12);
 
         svg {
@@ -49,6 +53,16 @@
           }
         }
       }
-    }
+
+      &:disabled {
+        background-color: #ffffff59;
+
+        svg {
+          path {
+            fill: #177991;
+          }
+        }
+      }
+     }
   }
 }

src/components/toolbar.tsx

@@ -46,20 +46,22 @@ const toolIcons: Record<Tool, any> = {
 
 interface ToolbarButtonProps {
   tool: Tool
+  disabled: boolean
   selectedTool: Tool;
   onClick: (tool: Tool) => void;
 }
 
 interface ToolbarProps {
   tools: Tool[]
+  disabled: boolean
   onToolSelected: (tool: Tool) => void;
   onReset: () => void;
   onReturnToMainMenu: () => void;
   onFitView: () => void;
   onRecenterView: () => void;
 }
 
-export const ToolbarButton = ({tool, selectedTool, onClick}: ToolbarButtonProps) => {
+export const ToolbarButton = ({tool, disabled, selectedTool, onClick}: ToolbarButtonProps) => {
   const handleClick = () => onClick(tool);
   const selected = toggleableTools.includes(tool) && tool === selectedTool;
   const notImplemented = notImplementedTools.includes(tool);
@@ -71,15 +73,15 @@ export const ToolbarButton = ({tool, selectedTool, onClick}: ToolbarButtonProps)
       title={title}
       onClick={handleClick}
       className={clsx({selected, notImplemented})}
-      disabled={notImplemented}
+      disabled={disabled || notImplemented}
     >
       <ToolIcon />
     </button>
   );
 };
 
 export const Toolbar = (props: ToolbarProps) => {
-  const {tools, onToolSelected, onReset, onReturnToMainMenu, onFitView, onRecenterView} = props;
+  const {tools, disabled, onToolSelected, onReset, onReturnToMainMenu, onFitView, onRecenterView} = props;
   const [selectedTool, setSelectedTool] = useState<Tool>("select");
 
   const handleToolSelected = useCallback((tool: Tool) => {
@@ -110,6 +112,7 @@ export const Toolbar = (props: ToolbarProps) => {
         {topTools.map(tool => (
           <ToolbarButton
             key={tool}
+            disabled={disabled}
             tool={tool}
             selectedTool={selectedTool}
             onClick={handleToolSelected}
@@ -120,6 +123,7 @@ export const Toolbar = (props: ToolbarProps) => {
         {bottomTools.map(tool => (
           <ToolbarButton
             key={tool}
+            disabled={disabled}
             tool={tool}
             selectedTool={selectedTool}
             onClick={handleToolSelected}