From d64334ea1d480e752138c61b51c7ab1ed94de6cf Mon Sep 17 00:00:00 2001
From: Nafis Zaman <nafzam@outlook.com>
Date: Tue, 5 Jul 2022 22:37:09 -0700
Subject: [PATCH 1/3] Move "Reset World" button to menu bar

---
 src/components/Layout/OverlayLayout.tsx |  7 +------
 src/components/Layout/SideLayout.tsx    |  7 +------
 src/components/Root.tsx                 |  7 ++++++-
 src/components/SimMenu.tsx              |  3 +++
 src/components/World/index.tsx          | 15 +--------------
 5 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/src/components/Layout/OverlayLayout.tsx b/src/components/Layout/OverlayLayout.tsx
index 73c24fac..35f2afb6 100644
--- a/src/components/Layout/OverlayLayout.tsx
+++ b/src/components/Layout/OverlayLayout.tsx
@@ -22,7 +22,6 @@ export interface OverlayLayoutProps extends LayoutProps {
 }
 
 interface ReduxOverlayLayoutProps {
-  onResetScene: () => void;
 }
 
 interface OverlayLayoutState {
@@ -294,7 +293,6 @@ export class OverlayLayout extends React.PureComponent<Props & ReduxOverlayLayou
       onClearConsole,
       onIndentCode,
       onSelectScene,
-      onResetScene,
       editorRef
     } = props;
 
@@ -312,7 +310,7 @@ export class OverlayLayout extends React.PureComponent<Props & ReduxOverlayLayou
 
     const editorBar = createEditorBarComponents(theme, messages, onIndentCode, this.onErrorClick_);
     const consoleBar = createConsoleBarComponents(theme, onClearConsole);
-    const worldBar = createWorldBarComponents(theme, onSelectScene, onResetScene);
+    const worldBar = createWorldBarComponents(theme, onSelectScene);
 
     return (
       <Container style={style} className={className}>
@@ -375,7 +373,4 @@ export class OverlayLayout extends React.PureComponent<Props & ReduxOverlayLayou
 export const OverlayLayoutRedux = connect<unknown, ReduxOverlayLayoutProps, OverlayLayoutProps, ReduxState>((state: ReduxState) => {
   return {};
 }, dispatch => ({
-  onResetScene: () => {
-    dispatch(SceneAction.RESET_SCENE);
-  }
 }), null, { forwardRef: true })(OverlayLayout);
\ No newline at end of file
diff --git a/src/components/Layout/SideLayout.tsx b/src/components/Layout/SideLayout.tsx
index 9cc54913..552335ce 100644
--- a/src/components/Layout/SideLayout.tsx
+++ b/src/components/Layout/SideLayout.tsx
@@ -53,7 +53,6 @@ export interface SideLayoutProps extends LayoutProps {
 }
 
 interface ReduxSideLayoutProps {
-  onResetScene: () => void;
 }
 
 interface SideLayoutState {
@@ -172,7 +171,6 @@ export class SideLayout extends React.PureComponent<Props & ReduxSideLayoutProps
       onClearConsole,
       onIndentCode,
       onSelectScene,
-      onResetScene,
       editorRef,
     } = props;
 
@@ -183,7 +181,7 @@ export class SideLayout extends React.PureComponent<Props & ReduxSideLayoutProps
 
     const editorBar = createEditorBarComponents(theme, messages, onIndentCode, this.onErrorClick_);
     const consoleBar = createConsoleBarComponents(theme, onClearConsole);
-    const worldBar = createWorldBarComponents(theme, onSelectScene, onResetScene);
+    const worldBar = createWorldBarComponents(theme, onSelectScene);
 
     let content: JSX.Element;
     switch (activePanel) {
@@ -312,7 +310,4 @@ export class SideLayout extends React.PureComponent<Props & ReduxSideLayoutProps
 export const SideLayoutRedux = connect<unknown, ReduxSideLayoutProps, SideLayoutProps, ReduxState>((state: ReduxState) => {
   return {};
 }, dispatch => ({
-  onResetScene: () => {
-    dispatch(SceneAction.RESET_SCENE);
-  }
 }), null, { forwardRef: true })(SideLayout);
\ No newline at end of file
diff --git a/src/components/Root.tsx b/src/components/Root.tsx
index 1ba455c5..b44215fd 100644
--- a/src/components/Root.tsx
+++ b/src/components/Root.tsx
@@ -31,7 +31,7 @@ import ExceptionDialog from './ExceptionDialog';
 import SelectSceneDialog from './SelectSceneDialog';
 
 import store from '../state';
-import { RobotStateAction } from '../state/reducer';
+import { RobotStateAction, SceneAction } from '../state/reducer';
 import { Editor } from './Editor';
 
 namespace Modal {
@@ -349,6 +349,10 @@ export class Root extends React.Component<Props, State> {
     document.body.removeChild(element);
   };
 
+  private onResetWorldClick_ = () => {
+    store.dispatch(SceneAction.RESET_SCENE);
+  };
+
   private onClearConsole_ = () => {
     this.setState({
       console: StyledText.compose({ items: [] })
@@ -479,6 +483,7 @@ export class Root extends React.Component<Props, State> {
             onSettingsClick={this.onModalClick_(Modal.SETTINGS)}
             onAboutClick={this.onModalClick_(Modal.ABOUT)}
             onDownloadClick={this.onDownloadClick_}
+            onResetWorldClick={this.onResetWorldClick_}
             onRunClick={this.onRunClick_}
             onStopClick={this.onStopClick_}
             onDocumentationClick={this.onDocumentationClick}
diff --git a/src/components/SimMenu.tsx b/src/components/SimMenu.tsx
index 67bd6dd3..c622609a 100644
--- a/src/components/SimMenu.tsx
+++ b/src/components/SimMenu.tsx
@@ -18,6 +18,7 @@ export interface MenuProps extends StyleProps, ThemeProps {
   onRunClick: () => void;
   onStopClick: () => void;
   onDownloadClick: () => void;
+  onResetWorldClick: () => void;
 
   onSettingsClick: () => void;
   onAboutClick: () => void;
@@ -143,6 +144,7 @@ class SimMenu extends React.PureComponent<Props, State> {
       onRunClick,
       onStopClick,
       onDownloadClick,
+      onResetWorldClick,
       onDocumentationClick,
       onDashboardClick,
       onLogoutClick,
@@ -177,6 +179,7 @@ class SimMenu extends React.PureComponent<Props, State> {
             <ItemIcon icon='stop' /> Stop
           </StopItem>
           <Item theme={theme} onClick={onDownloadClick}><ItemIcon icon='file-download' /> Download</Item>
+          <Item theme={theme} onClick={onResetWorldClick}><ItemIcon icon='sync' />Reset World</Item>
 
           <Spacer style={{ borderRight: `1px solid ${theme.borderColor}` }} />
 
diff --git a/src/components/World/index.tsx b/src/components/World/index.tsx
index 20e523d7..4fa512ba 100644
--- a/src/components/World/index.tsx
+++ b/src/components/World/index.tsx
@@ -26,10 +26,7 @@ import * as uuid from 'uuid';
 import { ReferenceFrame, Rotation, Vector3 } from '../../unit-math';
 import { Vector3 as RawVector3 } from '../../math';
 import ComboBox from '../ComboBox';
-import Scene from '../../state/State/Scene';
 import Node from '../../state/State/Scene/Node';
-import { Scenes } from '../../state/State';
-import Async from '../../state/State/Async';
 import Dict from '../../Dict';
 import Geometry from '../../state/State/Scene/Geometry';
 
@@ -38,8 +35,7 @@ import { BarComponent } from '../Widget';
 
 export const createWorldBarComponents = (
   theme: Theme, 
-  onSelectScene: () => void,
-  onResetScene: () => void
+  onSelectScene: () => void
 ) => {
   const worldBar: BarComponent<unknown>[] = [];
 
@@ -53,15 +49,6 @@ export const createWorldBarComponents = (
       </>,
   }));
 
-  worldBar.push(BarComponent.create(Button, {
-    theme,
-    onClick: onResetScene,
-    children:
-      <>
-        <Fa icon='sync' />
-        { ' Reset' }
-      </>
-  }));
   return worldBar;
 };
 

From 46dafe3206fe24fc2d469d524b335eed61e112f2 Mon Sep 17 00:00:00 2001
From: Nafis Zaman <nafzam@outlook.com>
Date: Tue, 5 Jul 2022 22:48:50 -0700
Subject: [PATCH 2/3] Move "Download" button to editor bar

---
 src/components/Editor/Editor.tsx        | 11 +++++++++++
 src/components/Layout/Layout.ts         |  1 +
 src/components/Layout/OverlayLayout.tsx |  3 ++-
 src/components/Layout/SideLayout.tsx    |  3 ++-
 src/components/Root.tsx                 |  2 +-
 src/components/SimMenu.tsx              |  3 ---
 6 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
index 57596f1f..4982ff13 100644
--- a/src/components/Editor/Editor.tsx
+++ b/src/components/Editor/Editor.tsx
@@ -47,6 +47,7 @@ export const createEditorBarComponents = (
   theme: Theme, 
   messages: Message[],
   onIndentCode: () => void,
+  onDownloadCode: () => void,
   onErrorClick: (event: React.MouseEvent<HTMLDivElement>) => void
 ) => {
   
@@ -64,6 +65,16 @@ export const createEditorBarComponents = (
       </>
   }));
 
+  editorBar.push(BarComponent.create(Button, {
+    theme,
+    onClick: onDownloadCode,
+    children:
+      <>
+        <Fa icon='file-download'/>
+        {' Download'}
+      </>
+  }));
+
   messages.forEach(message => {
     switch (message.severity) {
       case 'error': {
diff --git a/src/components/Layout/Layout.ts b/src/components/Layout/Layout.ts
index ed1eeda0..8ac4d844 100644
--- a/src/components/Layout/Layout.ts
+++ b/src/components/Layout/Layout.ts
@@ -16,6 +16,7 @@ export interface LayoutProps extends StyleProps, ThemeProps {
   settings: Settings;
   onClearConsole: () => void;
   onIndentCode: () => void;
+  onDownloadCode: () => void;
   onSelectScene: () => void;
   editorRef: React.MutableRefObject<Editor>;
 }
diff --git a/src/components/Layout/OverlayLayout.tsx b/src/components/Layout/OverlayLayout.tsx
index 35f2afb6..322ad1dd 100644
--- a/src/components/Layout/OverlayLayout.tsx
+++ b/src/components/Layout/OverlayLayout.tsx
@@ -292,6 +292,7 @@ export class OverlayLayout extends React.PureComponent<Props & ReduxOverlayLayou
       settings,
       onClearConsole,
       onIndentCode,
+      onDownloadCode,
       onSelectScene,
       editorRef
     } = props;
@@ -308,7 +309,7 @@ export class OverlayLayout extends React.PureComponent<Props & ReduxOverlayLayou
       mode: Mode.Floating
     };
 
-    const editorBar = createEditorBarComponents(theme, messages, onIndentCode, this.onErrorClick_);
+    const editorBar = createEditorBarComponents(theme, messages, onIndentCode, onDownloadCode, this.onErrorClick_);
     const consoleBar = createConsoleBarComponents(theme, onClearConsole);
     const worldBar = createWorldBarComponents(theme, onSelectScene);
 
diff --git a/src/components/Layout/SideLayout.tsx b/src/components/Layout/SideLayout.tsx
index 552335ce..7264a35c 100644
--- a/src/components/Layout/SideLayout.tsx
+++ b/src/components/Layout/SideLayout.tsx
@@ -170,6 +170,7 @@ export class SideLayout extends React.PureComponent<Props & ReduxSideLayoutProps
       settings,
       onClearConsole,
       onIndentCode,
+      onDownloadCode,
       onSelectScene,
       editorRef,
     } = props;
@@ -179,7 +180,7 @@ export class SideLayout extends React.PureComponent<Props & ReduxSideLayoutProps
       sidePanelSize,
     } = this.state;
 
-    const editorBar = createEditorBarComponents(theme, messages, onIndentCode, this.onErrorClick_);
+    const editorBar = createEditorBarComponents(theme, messages, onIndentCode, onDownloadCode, this.onErrorClick_);
     const consoleBar = createConsoleBarComponents(theme, onClearConsole);
     const worldBar = createWorldBarComponents(theme, onSelectScene);
 
diff --git a/src/components/Root.tsx b/src/components/Root.tsx
index b44215fd..dd11cea1 100644
--- a/src/components/Root.tsx
+++ b/src/components/Root.tsx
@@ -440,6 +440,7 @@ export class Root extends React.Component<Props, State> {
       settings,
       onClearConsole: this.onClearConsole_,
       onIndentCode: this.onIndentCode_,
+      onDownloadCode: this.onDownloadClick_,
       onSelectScene: this.onSelectSceneClick_,
       editorRef: this.editorRef,
     };
@@ -482,7 +483,6 @@ export class Root extends React.Component<Props, State> {
             onHideAll={this.onHideAll_}
             onSettingsClick={this.onModalClick_(Modal.SETTINGS)}
             onAboutClick={this.onModalClick_(Modal.ABOUT)}
-            onDownloadClick={this.onDownloadClick_}
             onResetWorldClick={this.onResetWorldClick_}
             onRunClick={this.onRunClick_}
             onStopClick={this.onStopClick_}
diff --git a/src/components/SimMenu.tsx b/src/components/SimMenu.tsx
index c622609a..74ca140b 100644
--- a/src/components/SimMenu.tsx
+++ b/src/components/SimMenu.tsx
@@ -17,7 +17,6 @@ export interface MenuProps extends StyleProps, ThemeProps {
 
   onRunClick: () => void;
   onStopClick: () => void;
-  onDownloadClick: () => void;
   onResetWorldClick: () => void;
 
   onSettingsClick: () => void;
@@ -143,7 +142,6 @@ class SimMenu extends React.PureComponent<Props, State> {
       onAboutClick,
       onRunClick,
       onStopClick,
-      onDownloadClick,
       onResetWorldClick,
       onDocumentationClick,
       onDashboardClick,
@@ -178,7 +176,6 @@ class SimMenu extends React.PureComponent<Props, State> {
           >
             <ItemIcon icon='stop' /> Stop
           </StopItem>
-          <Item theme={theme} onClick={onDownloadClick}><ItemIcon icon='file-download' /> Download</Item>
           <Item theme={theme} onClick={onResetWorldClick}><ItemIcon icon='sync' />Reset World</Item>
 
           <Spacer style={{ borderRight: `1px solid ${theme.borderColor}` }} />

From 26695dfda0b938c1711fd70d82663819b2d0117e Mon Sep 17 00:00:00 2001
From: Nafis Zaman <nafzam@outlook.com>
Date: Wed, 6 Jul 2022 07:31:55 -0700
Subject: [PATCH 3/3] Combine "Run" and "Stop" buttons into one button

---
 src/components/SimMenu.tsx | 44 +++++++++++++++++++++-----------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/components/SimMenu.tsx b/src/components/SimMenu.tsx
index 74ca140b..23d5ede5 100644
--- a/src/components/SimMenu.tsx
+++ b/src/components/SimMenu.tsx
@@ -96,14 +96,14 @@ const Item = styled('div', (props: ThemeProps & ClickProps) => ({
   transition: 'background-color 0.2s, opacity 0.2s'
 }));
 
-const RunItem = withStyleDeep(Item, (props: ClickProps & { $running: boolean }) => ({
+const RunItem = withStyleDeep(Item, (props: ClickProps) => ({
   backgroundColor: props.disabled ? GREEN.disabled : GREEN.standard,
   ':hover': props.onClick && !props.disabled ? {
     backgroundColor: GREEN.hover
   } : {},
 }));
 
-const StopItem = withStyleDeep(Item, (props: ClickProps & { $running: boolean }) => ({
+const StopItem = withStyleDeep(Item, (props: ClickProps) => ({
   backgroundColor: props.disabled ? RED.disabled : RED.standard,
   ':hover': props.onClick && !props.disabled ? {
     backgroundColor: RED.hover
@@ -152,30 +152,34 @@ class SimMenu extends React.PureComponent<Props, State> {
 
     const { layoutPicker } = state;
 
-    const running = SimulatorState.isRunning(simulatorState);
+    const runOrStopItem: JSX.Element = SimulatorState.isRunning(simulatorState)
+      ? (
+        <StopItem
+          theme={theme}
+          onClick={onStopClick}
+          disabled={false}
+        >
+          <ItemIcon icon='stop' />
+          Stop
+        </StopItem>
+      ) : (
+        <RunItem
+          theme={theme}
+          onClick={SimulatorState.isStopped(simulatorState) ? onRunClick : undefined}
+          disabled={!SimulatorState.isStopped(simulatorState)}
+          style={{ borderLeft: `1px solid ${theme.borderColor}` }}
+        >
+          <ItemIcon icon='play' />
+          Run
+        </RunItem>
+      );
 
     return (
       <>
         <Container theme={theme}>
           <Logo theme={theme} onClick={onDashboardClick} src={theme.foreground === 'white' ? KIPR_LOGO_BLACK as string : KIPR_LOGO_WHITE as string}/>
 
-          <RunItem
-            theme={theme}
-            onClick={SimulatorState.isStopped(simulatorState) ? onRunClick : undefined}
-            $running={running}
-            disabled={!SimulatorState.isStopped(simulatorState)}
-            style={{ borderLeft: `1px solid ${theme.borderColor}` }}
-          >
-            <ItemIcon icon='play' /> Run
-          </RunItem>
-          <StopItem
-            theme={theme}
-            onClick={running ? onStopClick : undefined}
-            disabled={!running}
-            $running={running}
-          >
-            <ItemIcon icon='stop' /> Stop
-          </StopItem>
+          {runOrStopItem}
           <Item theme={theme} onClick={onResetWorldClick}><ItemIcon icon='sync' />Reset World</Item>
 
           <Spacer style={{ borderRight: `1px solid ${theme.borderColor}` }} />