split mode

Playground/src/components/monacoComponent.tsx

@@ -10,10 +10,11 @@ require("../scss/monaco.scss");
 
 interface IMonacoComponentProps {
     language: "JS" | "TS";
+    className: string;
+    refObject: React.RefObject<HTMLDivElement>;
 }
 
 export class MonacoComponent extends React.Component<IMonacoComponentProps> {
-    private _hostReference: React.RefObject<HTMLDivElement>;
     private _editor: IStandaloneCodeEditor;
     private _definitionWorker: Worker;
     private _deprecatedCandidates: string[];
@@ -21,8 +22,6 @@ export class MonacoComponent extends React.Component<IMonacoComponentProps> {
     
     public constructor(props: IMonacoComponentProps) {
         super(props);
-
-        this._hostReference = React.createRef();
     }
 
     async setupMonaco() {        
@@ -54,7 +53,7 @@ export class MonacoComponent extends React.Component<IMonacoComponentProps> {
             // This is used for a vscode-like color preview for ColorX types
             //this.setupMonacoColorProvider();
 
-        let hostElement = this._hostReference.current!;  
+        let hostElement = this.props.refObject.current!;  
         var editorOptions: IEditorConstructionOptions = {
             value: "",
             language: this.props.language === "JS" ? "javascript" : "typescript",
@@ -297,7 +296,7 @@ export class MonacoComponent extends React.Component<IMonacoComponentProps> {
     public render() {
 
         return (
-            <div id="monacoHost" ref={this._hostReference}>               
+            <div id="monacoHost" ref={this.props.refObject} className={this.props.className}>               
             </div>   
         )
     }

Playground/src/components/rendererComponent.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+require("../scss/rendering.scss");
+
+interface IRenderingComponentProps {
+}
+
+export class RenderingComponent extends React.Component<IRenderingComponentProps> {
+
+    componentDidMount() {
+        
+    }
+
+    public render() {
+        return (
+            <canvas id="renderingCanvas"></canvas>
+        )
+    }
+}

Playground/src/playground.tsx

@@ -1,28 +1,51 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { MonacoComponent } from './components/monacoComponent';
+import { RenderingComponent } from './components/rendererComponent';
 //import { GlobalState } from './globalState';
 
 require("./scss/main.scss");
+const Split = require('split.js').default;
 
 interface IPlaygroundProps {
 }
 
-export class Playground extends React.Component<IPlaygroundProps, {errorMessage: string}> {
+export class Playground extends React.Component<IPlaygroundProps, {errorMessage: string}> {    
+    private splitRef: React.RefObject<HTMLDivElement>;
+    private monacoRef: React.RefObject<HTMLDivElement>;
+    private renderingRef: React.RefObject<HTMLDivElement>;
+
     //private _globalState: GlobalState;
     
     public constructor(props: IPlaygroundProps) {
         super(props);
        // this._globalState = new GlobalState();
 
+       this.splitRef = React.createRef();
+       this.monacoRef = React.createRef();
+       this.renderingRef = React.createRef();
+
        this.state = {errorMessage: ""};
     }
 
+    componentDidMount() {
+        Split([this.monacoRef.current, this.renderingRef.current], {
+            direction: "horizontal",
+            minSize: [200, 200],
+            gutterSize: 4
+        });
+    }
+
     public render() {
 
         return (
             <div id="root">  
-                <MonacoComponent language="JS"/>    
+                <div ref={this.splitRef} id="split">
+                    <MonacoComponent language="JS" className="split-part" refObject={this.monacoRef}/>    
+                    <div ref={this.renderingRef} className="split-part">
+                        <RenderingComponent />
+                    </div>
+                </div>
             </div>   
         )
     }

Playground/src/scss/main.scss

@@ -7,3 +7,24 @@ html, body, #root {
     font-family: "acumin-pro-condensed";
     font-weight: normal;    
 }
+
+#split {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    display: flex;
+
+    .split-part {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;         
+    }
+
+    .gutter.gutter-horizontal {
+        background-image: none;
+        background: #444444;
+        cursor: col-resize;
+    }
+}

Playground/src/scss/rendering.scss

@@ -0,0 +1,7 @@
+#renderingCanvas {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    overflow: unset;
+}