added the indent button to the side layout, and refactored the BarCom…

…ponents to be owned by their component (editor, world, console)
kipr · Jun 14, 2022 · 927c781 · 927c781
1 parent ead2344
commit 927c781
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 191 deletions.
diff --git a/src/components/Console/index.tsx b/src/components/Console/index.tsx
@@ -5,8 +5,30 @@ import { StyleProps } from '../../style';
 import { StyledText } from '../../util';
 import ScrollArea from '../ScrollArea';
 import { Text } from '../Text';
-import { ThemeProps } from '../theme';
+import { Theme, ThemeProps } from '../theme';
 
+import { Fa } from '../Fa';
+import { Button } from '../Button';
+import { BarComponent } from '../Widget';
+
+export const createConsoleBarComponents = (
+  theme: Theme, 
+  onClearConsole: () => void,
+) => {
+  const consoleBar: BarComponent<unknown>[] = [];
+
+  consoleBar.push(BarComponent.create(Button, {
+    theme,
+    onClick: onClearConsole,
+    children:
+      <>
+        <Fa icon='file' />
+        {' Clear'}
+      </>,
+  }));
+
+  return consoleBar;
+};
 
 export interface ConsoleProps extends StyleProps, ThemeProps {
   text: StyledText;
@@ -27,7 +49,7 @@ const ConsoleText = styled(Text, (props: ThemeProps) => ({
   display: 'block'
 }));
 
-class Console extends React.PureComponent<Props, State> {
+export class Console extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
   }

diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
@@ -2,11 +2,14 @@ import * as React from 'react';
 
 import { styled } from 'styletron-react';
 import { StyleProps } from '../../style';
-import { ThemeProps } from '../theme';
-
-import { Ivygate, Message } from 'ivygate';
+import { Theme, ThemeProps } from '../theme';
 
+import { Fa } from '../Fa';
+import { Button } from '../Button';
+import { BarComponent } from '../Widget';
+import { WarningCharm, ErrorCharm } from './';
 
+import { Ivygate, Message } from 'ivygate';
 
 export enum EditorActionState {
   None,
@@ -40,6 +43,57 @@ const Container = styled('div', (props: ThemeProps) => ({
   height: '100%'
 }));
 
+export const createEditorBarComponents = (
+  theme: Theme, 
+  messages: Message[],
+  onIndentCode: () => void,
+  onErrorClick: (event: React.MouseEvent<HTMLDivElement>) => void
+) => {
+
+  const editorBar: BarComponent<unknown>[] = [];
+  let errors = 0;
+  let warnings = 0;
+
+  editorBar.push(BarComponent.create(Button, {
+    theme,
+    onClick: onIndentCode,
+    children:
+      <>
+        <Fa icon='indent'/>
+        {' Indent'}
+      </>
+  }));
+
+  messages.forEach(message => {
+    switch (message.severity) {
+      case 'error': {
+        ++errors;
+        break;
+      }
+      case 'warning': {
+        ++warnings;
+        break;
+      }
+    }
+  });
+
+  if (errors > 0) editorBar.push(BarComponent.create(ErrorCharm, {
+    theme,
+    count: errors,
+    onClick: onErrorClick
+  }));
+
+  if (warnings > 0) editorBar.push(BarComponent.create(WarningCharm, {
+    theme,
+    count: warnings,
+    onClick: onErrorClick
+  }));
+
+  // editorBar.push(BarComponent.create(PerfectCharm, { theme }));
+
+  return editorBar;
+};
+
 class Editor extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);

diff --git a/src/components/Layout/Layout.ts b/src/components/Layout/Layout.ts
@@ -3,6 +3,7 @@ import { RobotPosition } from "../../RobotPosition";
 import { Settings } from "../../Settings";
 import { StyleProps } from "../../style";
 import { StyledText } from "../../util";
+import { Editor } from "../Editor";
 import { ThemeProps } from "../theme";
 
 export interface LayoutProps extends StyleProps, ThemeProps {
@@ -16,6 +17,7 @@ export interface LayoutProps extends StyleProps, ThemeProps {
   onClearConsole: () => void;
   onIndentCode: () => void;
   onSelectScene: () => void;
+  editorRef: React.MutableRefObject<Editor>;
 }
 
 export enum Layout {

diff --git a/src/components/Layout/OverlayLayout.tsx b/src/components/Layout/OverlayLayout.tsx
@@ -3,15 +3,17 @@ import { connect } from 'react-redux';
 
 import { styled } from 'styletron-react';
 import { Button } from '../Button';
-import Console from '../Console';
-import { Editor, WarningCharm, ErrorCharm } from '../Editor';
+
+import { Console, createConsoleBarComponents } from '../Console';
+import { Editor, createEditorBarComponents } from '../Editor';
+import World, { createWorldBarComponents } from '../World';
+
 import { Fa } from '../Fa';
 import { Info } from '../Info';
 import { LayoutProps } from './Layout';
 import { SimulatorArea } from '../SimulatorArea';
 import { Theme, ThemeProps } from '../theme';
 import Widget, { BarComponent, Mode, Size, WidgetProps } from '../Widget';
-import World from '../World';
 import { State as ReduxState } from '../../state';
 import { SceneAction } from '../../state/reducer';
 
@@ -275,15 +277,6 @@ export class OverlayLayout extends React.PureComponent<Props & ReduxOverlayLayou
     // not implemented
   };
 
-  private editor_: Editor;
-  private bindEditor_ = (editor: Editor) => {
-    this.editor_ = editor;
-  };
-
-  get editor() {
-    return this.editor_;
-  }
-
   render() {
     const { props } = this;
 
@@ -302,6 +295,7 @@ export class OverlayLayout extends React.PureComponent<Props & ReduxOverlayLayou
       onIndentCode,
       onSelectScene,
       onResetScene,
+      editorRef
     } = props;
 
     const {
@@ -316,80 +310,9 @@ export class OverlayLayout extends React.PureComponent<Props & ReduxOverlayLayou
       mode: Mode.Floating
     };
 
-    const editorBar: BarComponent<unknown>[] = [];
-    let errors = 0;
-    let warnings = 0;
-
-    editorBar.push(BarComponent.create(Button, {
-      theme,
-      onClick: onIndentCode,
-      children:
-        <>
-          <Fa icon='indent'/>
-          {' Indent'}
-        </>
-    }));
-
-    messages.forEach(message => {
-      switch (message.severity) {
-        case 'error': {
-          ++errors;
-          break;
-        }
-        case 'warning': {
-          ++warnings;
-          break;
-        }
-      }
-    });
-
-    if (errors > 0) editorBar.push(BarComponent.create(ErrorCharm, {
-      theme,
-      count: errors,
-      onClick: this.onErrorClick_
-    }));
-
-    if (warnings > 0) editorBar.push(BarComponent.create(WarningCharm, {
-      theme,
-      count: warnings,
-      onClick: this.onErrorClick_
-    }));
-
-    // editorBar.push(BarComponent.create(PerfectCharm, { theme }));
-
-    const consoleBar: BarComponent<unknown>[] = [];
-
-    consoleBar.push(BarComponent.create(Button, {
-      theme,
-      onClick: onClearConsole,
-      children:
-        <>
-          <Fa icon='file' />
-          {' Clear'}
-        </>,
-    }));
-
-    const worldBar: BarComponent<unknown>[] = [];
-
-    worldBar.push(BarComponent.create(Button, {
-      theme,
-      onClick: onSelectScene,
-      children:
-        <>
-          <Fa icon='globe-americas' />
-          {' Select Scene'}
-        </>,
-    }));
-
-    worldBar.push(BarComponent.create(Button, {
-      theme,
-      onClick: onResetScene,
-      children:
-        <>
-          <Fa icon='sync' />
-          { ' Reset' }
-        </>
-    }));
+    const editorBar = createEditorBarComponents(theme, messages, onIndentCode, this.onErrorClick_);
+    const consoleBar = createConsoleBarComponents(theme, onClearConsole);
+    const worldBar = createWorldBarComponents(theme, onSelectScene, onResetScene);
 
     return (
       <Container style={style} className={className}>
@@ -409,7 +332,7 @@ export class OverlayLayout extends React.PureComponent<Props & ReduxOverlayLayou
             onSizeChange={this.onEditorSizeChange_}
             barComponents={editorBar}
           >
-            <Editor ref={this.bindEditor_} code={code} onCodeChange={onCodeChange} theme={theme} messages={messages} autocomplete={settings.editorAutoComplete} />
+            <Editor ref={editorRef} code={code} onCodeChange={onCodeChange} theme={theme} messages={messages} autocomplete={settings.editorAutoComplete} />
           </EditorWidget>
           <ConsoleWidget
             {...commonProps}