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);
+    }
+
+}