language support

wuqianju · Jul 16, 2020 · 5fc4c57 · 5fc4c57
1 parent 5e1034d
commit 5fc4c57
Show file tree

Hide file tree

Showing 18 changed files with 571 additions and 227 deletions.
diff --git a/Playground/js.html b/Playground/js.html
@@ -0,0 +1,8 @@
+<script>
+    localStorage.setItem("language", "JS");
+
+    var parseURL = window.location.href.split("js.html");
+    var hash = parseURL[parseURL.length - 1];
+
+    window.location = "./" + hash;
+</script>
diff --git a/Playground/old/js.html b/Playground/old/js.html
diff --git a/Playground/src/components/commandBarComponent.tsx b/Playground/src/components/commandBarComponent.tsx
@@ -57,8 +57,31 @@ export class CommandBarComponent extends React.Component<ICommandBarComponentPro
                             "Light",
                             "Dark"
                         ],
-                        onClick: () => {}
-                    },  {
+                        onClick: () => {
+                            this.props.globalState.onThemeChangedObservable.notifyObservers();
+                        }
+                    },  
+                    {
+                        label: "Font size",
+                        storeKey: "font-size",
+                        defaultValue: "14",
+                        subItems: [
+                            "12",
+                            "14",
+                            "16",
+                            "18",
+                            "20",
+                            "22",
+                            "24",
+                            "26",
+                            "28",
+                            "30",
+                        ],
+                        onClick: () => {
+                            this.props.globalState.onFontSizeChangedObservable.notifyObservers();
+                        }
+                    },
+                    {
                         label: "Safe mode",
                         storeKey: "safe-mode",
                         defaultValue: false,

diff --git a/Playground/src/components/commandDropdownComponent.tsx b/Playground/src/components/commandDropdownComponent.tsx
@@ -43,15 +43,17 @@ export class CommandDropdownComponent extends React.Component<ICommandDropdownCo
                                     this.props.items.map(m => {
                                         return (
                                             <div className="command-dropdown-label" key={m.label} onClick={() => {
-                                                if (! m.onClick) {
+                                                if (!m.onClick) {
                                                     let newValue = !Utilities.ReadBoolFromStore(m.storeKey!, (m.defaultValue as boolean) || false);
-                                                    Utilities.StoreBoolFromStore(m.storeKey!, newValue);
+                                                    Utilities.StoreBoolToStore(m.storeKey!, newValue);
                                                     this.forceUpdate();
                                                     m.onCheck!(newValue);
                                                     return;
                                                 }
-                                                m.onClick();
-                                                this.setState({isExpanded: false});
+                                                if (!m.subItems) {
+                                                    m.onClick();
+                                                    this.setState({isExpanded: false});
+                                                }
                                             }} title={m.label}>
                                                 <div className="command-dropdown-label-text">
                                                     {m.label}
@@ -60,7 +62,7 @@ export class CommandDropdownComponent extends React.Component<ICommandDropdownCo
                                                     m.onCheck && 
                                                     <input type="checkBox" className="command-dropdown-label-check" 
                                                         onChange={(evt) => {
-                                                            Utilities.StoreBoolFromStore(m.storeKey!, evt.target.checked);
+                                                            Utilities.StoreBoolToStore(m.storeKey!, evt.target.checked);
                                                             this.forceUpdate();
                                                             m.onCheck!(evt.target.checked);
                                                         }}
@@ -72,9 +74,16 @@ export class CommandDropdownComponent extends React.Component<ICommandDropdownCo
                                                         {
                                                             m.subItems.map(s => {
                                                                 return (
-                                                                    <div key={s} className="sub-item">
-                                                                        {s}
+                                                                    <div key={s} className={"sub-item" + (Utilities.ReadStringFromStore(m.storeKey!, m.defaultValue as string) === s ? " checked" : "")}  
+                                                                    onClick={() => {
+                                                                        Utilities.StoreStringToStore(m.storeKey!, s);                                                                        
+                                                                        m.onClick!();
+                                                                        this.setState({isExpanded: false});
+                                                                    }}>
+                                                                        <div className="sub-item-label">
+                                                                            {s}
                                                                         </div>
+                                                                    </div>
                                                                 )
                                                             })
                                                         }

diff --git a/Playground/src/components/errorDisplayComponent.tsx b/Playground/src/components/errorDisplayComponent.tsx
@@ -0,0 +1,57 @@
+import * as React from "react";
+import { GlobalState } from '../globalState';
+import { Nullable } from 'babylonjs/types';
+
+require("../scss/errorDisplay.scss");
+
+interface IErrorDisplayComponentProps {
+    globalState: GlobalState;
+}
+
+export class CompilationError {
+    message: string;
+    lineNumber?: number;
+    columnNumber?: number;
+}
+
+export class ErrorDisplayComponent extends React.Component<IErrorDisplayComponentProps, {error: Nullable<CompilationError>}> {    
+
+    public constructor(props: IErrorDisplayComponentProps) {
+        super(props);
+
+        this.state = {error: null};
+
+        this.props.globalState.onErrorObservable.add((err) => {
+            this.setState({error: err});
+        });
+    }
+
+    private _onClick() {
+        if (this.state.error && this.state.error.lineNumber && this.state.error.columnNumber) {
+            const position = {
+                lineNumber: this.state.error.lineNumber,
+                column: this.state.error.columnNumber
+            };
+
+            this.props.globalState.onNavigateRequiredObservable.notifyObservers(position);
+        }
+        this.setState({error: null});
+    }
+
+    public render() {
+
+        if (!this.state.error) {
+            return null;
+        }
+
+        return (
+            <div className="error-display" onClick={() => this._onClick()}>
+                {
+                    this.state.error.lineNumber && this.state.error.columnNumber &&
+                    `Error at [${this.state.error.lineNumber}, ${this.state.error.columnNumber}]: `
+                }
+                {this.state.error.message}
+            </div>
+        )
+    }
+}
diff --git a/Playground/src/components/footerComponent.tsx b/Playground/src/components/footerComponent.tsx
@@ -18,6 +18,10 @@ export class FooterComponent extends React.Component<IFooterComponentProps> {
     public constructor(props: IFooterComponentProps) {
         super(props);
         this._fpsRef = React.createRef();
+
+        this.props.globalState.onLanguageChangedObservable.add(() => {
+            this.forceUpdate();
+        });
     }
 
     componentDidMount() {       

diff --git a/Playground/src/components/headerComponent.tsx b/Playground/src/components/headerComponent.tsx
@@ -4,6 +4,7 @@ import { GlobalState } from '../globalState';
 import LogoImage from "../imgs/logo.svg";
 import { Engine } from 'babylonjs/Engines/engine';
 import { CommandBarComponent } from './commandBarComponent';
+import { Utilities } from '../tools/utilities';
 
 require("../scss/header.scss");
 
@@ -18,6 +19,10 @@ export class HeaderComponent extends React.Component<IHeaderComponentProps> {
         super(props);
 
         this._refVersionNumber = React.createRef();
+
+        this.props.globalState.onLanguageChangedObservable.add(() => {
+            this.forceUpdate();
+        });
     }
 
     componentDidMount() {
@@ -35,14 +40,18 @@ export class HeaderComponent extends React.Component<IHeaderComponentProps> {
                     {
                         this.props.globalState.language === "JS" &&
                         <>                        
-                            <div className="language-button active background-ts">TS</div>
+                            <div className="language-button active background-ts" onClick={() => {
+                                Utilities.SwitchLanguage("TS", this.props.globalState);
+                            }}>TS</div>
                             <div className="language-button background-js">Javascript</div>
                         </>
                     }
                     {
                         this.props.globalState.language === "TS" &&
                         <>                        
-                            <div className="language-button active background-js">JS</div>
+                            <div className="language-button active background-js" onClick={() => {
+                                Utilities.SwitchLanguage("JS", this.props.globalState);                             
+                            }}>JS</div>
                             <div className="language-button background-ts">TypeScript</div>
                         </>
                     }