Added quarter based resizing of editors

src/app/editor/editors.component.css

@@ -1,3 +1,20 @@
 .dropzone {
-    height: 92vh;
+    height: 90vh;
+}
+
+.editor-size-button {
+    text-align: center;
+    width: 4em;
+    color: rgba(225, 225, 225, 0.64);
+    border-style: solid;
+    border-width: thin;
+    border-color: rgba(124, 124, 124, 0.64);
+    margin-left: 0.2em;
+    margin-right: 0.2em;
+    float: left;
+}
+
+.editor-size-button:hover {
+    cursor: pointer;
+    border-color: rgba(0, 124, 0, 0.64);
 }

src/app/editor/editors.component.html

@@ -1,6 +1,38 @@
 <div class="col">
+
     <div class="row dropzone" #dropzone dropzone (fileDropped)="onFileDropped($event)">
         <ng-container #containerRef>
         </ng-container>
     </div>
+    <div class="row">
+        <div class="col editor-left-size" (click)="setEditorSize($event)">
+            <div class="editor-size-button size-12">
+                100%
+            </div>
+            <div class="editor-size-button size-8">
+                75%
+            </div>
+            <div class="editor-size-button size-6">
+                50%
+            </div>
+            <div class="editor-size-button size-2">
+                25%
+            </div>
+        </div>
+        <div class="col editor-right-size" (click)="setEditorSize($event)">
+            <div class="editor-size-button size-12">
+                100%
+            </div>
+            <div class="editor-size-button size-8">
+                75%
+            </div>
+            <div class="editor-size-button size-6">
+                50%
+            </div>
+            <div class="editor-size-button size-2">
+                25%
+            </div>
+        </div>
+    </div>
+
 <div>

src/app/editor/editors.component.ts

@@ -197,6 +197,59 @@ export class EditorsComponent {
         this.unsubscribe.complete();
     }
 
+    // Note: Only really works with 2 editors and very brittle logic.
+    protected setEditorSize(event: any) {
+        let lEditorComponent = null;
+        let rEditorComponent = null;
+        let lSize = 6;
+        let rSize = 6;
+
+        if (
+            event.target.parentElement.classList.contains("editor-left-size")
+        ) {
+            lSize   = parseInt(
+                event.target.classList[1].split("-")[1]
+            );
+            rSize   = 12 - lSize;
+
+            lEditorComponent = this.editorsService.get(this.activeEditor);
+            if (lEditorComponent.leftSiblingUUID) {
+                rEditorComponent = lEditorComponent;
+                lEditorComponent = this.editorsService.get(lEditorComponent.leftSiblingUUID);
+            } else {
+                rEditorComponent = this.editorsService.get(lEditorComponent.rightSiblingUUID);
+            }
+        } else {
+            rSize   = parseInt(
+                event.target.classList[1].split("-")[1]
+            );
+            lSize   = 12 - rSize;
+            rEditorComponent = this.editorsService.get(this.activeEditor);
+            if (rEditorComponent.rightSiblingUUID) {
+                lEditorComponent = rEditorComponent;
+                rEditorComponent = this.editorsService.get(rEditorComponent.rightSiblingUUID);
+            } else {
+                lEditorComponent = this.editorsService.get(rEditorComponent.leftSiblingUUID);
+            }
+        }
+
+        let lElm = lEditorComponent.editorElm.nativeElement.parentElement;
+        let rElm = rEditorComponent.editorElm.nativeElement.parentElement;
+
+        lElm.setAttribute(
+            'class',
+            (lSize == 0) ? "hidden" : `col col-${lSize}`
+        );
+
+        rElm.setAttribute(
+            'class',
+            (rSize == 0) ? "hidden" : `col col-${rSize}`
+        );
+
+        if (lSize == 0) rEditorComponent.editor.focus();
+        if (rSize == 0) lEditorComponent.editor.focus();
+    }
+
     private createEditor() {
         const component = this.containerRef.createComponent(NewtonEditorComponent);
         component.instance.editorSettings = this.editorsService.editorSettings;

src/app/editor/newton-editor/newton-editor.component.ts

@@ -24,7 +24,7 @@ import { NewtonEditorBase } from './newton-editor.base';
     templateUrl: './newton-editor.component.html',
     styleUrl: './newton-editor.component.css',
     host: {
-        'class': 'col'
+        'class': 'col col-6'
     }
 })
 export class NewtonEditorComponent extends NewtonEditorBase {

src/assets/css/styles.css

@@ -38,6 +38,10 @@ body {
 
 
 
+.hidden {
+    display: none;
+}
+
 .scroller {
 /*
     -webkit-scrollbar-color: #00000084 #ffffff64;