Replacing resizor with pane directive; replacing container-ref with tags

src/app/common/directives/draggable.directive.ts

@@ -22,6 +22,7 @@ export class DraggableDirective {
     @HostListener('pointerdown', ['$event'])
     onPointerDown(event: PointerEvent): void {
         console.log("pointerdown");
+        this.dragging = true;
 
         this.dragStart.emit(event);
     }
@@ -31,14 +32,12 @@ export class DraggableDirective {
         if (!this.dragging) return;
         console.log("pointermove");
 
-        this.dragging = true;
         this.dragMove.emit(event);
     }
 
     @HostListener('document:pointerup', ['$event'])
     onPointerUp(event: PointerEvent): void {
         if (!this.dragging) return;
-
         console.log("pointerup");
 
         this.dragging = false;

src/app/common/directives/pane-handle.directive.ts

@@ -0,0 +1,82 @@
+import {
+    Directive,
+    Output,
+    EventEmitter,
+    HostListener
+} from '@angular/core';
+
+
+
+@Directive({
+    selector: '[pane-handle]'
+})
+export class PaneHandleDirective {
+    @Output() dragStart = new EventEmitter<PointerEvent>();
+    @Output() dragMove  = new EventEmitter<PointerEvent>();
+    @Output() dragEnd   = new EventEmitter<PointerEvent>();
+
+    private dragging: boolean = false;
+    private isHrPane: boolean = false;
+    private parentElm: any;
+    private leftSiblingElm: any;
+    private rightSiblingElm: any;
+
+
+    @HostListener('pointerdown', ['$event'])
+    onPointerDown(event: PointerEvent): void {
+        event.preventDefault();
+
+        let target = event.target as Element;
+        if (
+            !target.classList.contains("hr-pane-handle") &&
+            !target.classList.contains("vr-pane-handle")
+        ) {
+            console.log("Must have 'hr-pane-handle' or 'vr-pane-handle' in classList!");
+            return;
+        }
+
+        target.requestPointerLock();
+
+        this.dragging        = true;
+        this.isHrPane        = ( target.classList.contains("hr-pane-handle") ) ? true : false ;
+        this.parentElm       = target.parentElement as Element;
+        this.leftSiblingElm  = target.previousElementSibling as Element;
+        this.rightSiblingElm = target.nextElementSibling as Element;
+
+        this.dragStart.emit(event);
+    }
+
+    @HostListener('pointermove', ['$event'])
+    onPointerMove(event: PointerEvent): void {
+        if (!this.dragging) return;
+
+        let x            = event.movementX;
+        let y            = event.movementY;
+        let parentBounds = this.parentElm.getBoundingClientRect();
+        let leftBounds   = this.leftSiblingElm.getBoundingClientRect();
+        let rightBounds  = this.rightSiblingElm.getBoundingClientRect();
+
+        if (this.isHrPane) {
+            this.leftSiblingElm.style.maxHeight  = `${leftBounds.height + y}px`;
+            this.rightSiblingElm.style.maxHeight = `${rightBounds.height - y}px`;
+        } else {
+            this.leftSiblingElm.style.maxWidth  = `${leftBounds.width + x}px`;
+            this.rightSiblingElm.style.maxWidth = `${rightBounds.width - x}px`;
+        }
+
+        this.dragMove.emit(event);
+    }
+
+    @HostListener('pointerup', ['$event'])
+    onPointerUp(event: PointerEvent): void {
+        if (!this.dragging) return;
+
+        this.dragging     = false;
+        this.leftSiblingElm  = null;
+        this.rightSiblingElm = null;
+
+        document.exitPointerLock();
+        this.dragEnd.emit(event);
+    }
+
+}

src/app/common/services/editor/editors.service.ts

@@ -1,4 +1,4 @@
-import { ComponentRef, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { ReplaySubject, Observable } from 'rxjs';
 
 import { NewtonEditorComponent } from "../../../editor/newton-editor/newton-editor.component";
@@ -16,7 +16,7 @@ import { NewtonFile } from '../../types/file.type';
 export class EditorsService {
     private messageSubject: ReplaySubject<ServiceMessage> = new ReplaySubject<ServiceMessage>(1);
 
-    editors: Map<string, ComponentRef<NewtonEditorComponent>>;
+    editors: Map<string, NewtonEditorComponent>;
     editorSettings: typeof EditorSettings;
 
     activeEditor!: string;
@@ -24,24 +24,42 @@ export class EditorsService {
 
     constructor() {
         this.editorSettings = EditorSettings;
-        this.editors = new Map<string, ComponentRef<NewtonEditorComponent>>();
+        this.editors = new Map<string, NewtonEditorComponent>();
     }
 
 
-    public getEditorsAsArray(): ComponentRef<NewtonEditorComponent>[] {
+    public getEditorsAsArray(): NewtonEditorComponent[] {
         return [...this.editors.values()];
     }
 
     public get(uuid: string): NewtonEditorComponent {
-        return this.editors.get(uuid).instance;
+        return this.editors.get(uuid);
     }
 
-    public set(uuid: string, component: ComponentRef<NewtonEditorComponent>) {
+    public set(uuid: string, component: NewtonEditorComponent) {
         this.editors.set(uuid, component);
+
+        if (Object.keys(this.editors).length < 1) return;
+
+        let leftEditor  = null;
+        let rightEditor = null;
+        let _editors    = this.getEditorsAsArray();
+
+        for (let i = 0; i < _editors.length; i++) {
+            if (_editors[i].uuid !== uuid) continue;
+
+            leftEditor  = _editors[i - 1];
+            rightEditor = _editors[i];
+
+        }
+
+        leftEditor.rightSiblingUUID = rightEditor.uuid;
+        rightEditor.leftSiblingUUID = leftEditor.uuid;
     }
 
     public async setSession(file: NewtonFile | undefined | null) {
         if ( !file ) return;
+
         let editorComponent        = this.getActiveEditorComponent();
         let editor                 = editorComponent.editor;