@mintplayer/ng-bootstrap 15.25.0 → 15.25.3

package/fesm2020/mintplayer-ng-bootstrap-dock.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ViewChild, Input, ContentChildren, ViewChildren, HostBinding, HostListener, NgModule } from '@angular/core';
+import { Component, ViewChild, Input, ContentChildren, ViewChildren, HostBinding, Injectable, HostListener, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/cdk/portal';
@@ -13,7 +13,8 @@ import * as i6 from '@mintplayer/ng-bootstrap/tab-control';
 import { BsTabControlModule } from '@mintplayer/ng-bootstrap/tab-control';
 import * as i4 from '@mintplayer/ng-bootstrap/instance-of';
 import { BsInstanceOfModule } from '@mintplayer/ng-bootstrap/instance-of';
-import { BehaviorSubject, Subject, takeUntil, take } from 'rxjs';
+import { BehaviorSubject, Subject, takeUntil, map, take } from 'rxjs';
+import { deepClone } from '@mintplayer/parentify';
 import * as i1 from '@angular/cdk/overlay';
 
 class BsDockPanelComponent {
@@ -49,6 +50,9 @@ class BsTabGroupPane extends BsDockPane {
         this.panes = [];
         Object.assign(this, data);
     }
+    get isEmpty() {
+        return this.panes.length === 0;
+    }
 }
 
 class BsDocumentHost extends BsDockPane {
@@ -56,38 +60,51 @@ class BsDocumentHost extends BsDockPane {
         super();
         Object.assign(this, data);
     }
+    get isEmpty() {
+        return this.rootPane?.isEmpty ?? true;
+    }
 }
 
-var EPaneType;
-(function (EPaneType) {
-    EPaneType[EPaneType["documentHost"] = 1] = "documentHost";
-    EPaneType[EPaneType["splitPane"] = 2] = "splitPane";
-    EPaneType[EPaneType["contentPane"] = 3] = "contentPane";
-    EPaneType[EPaneType["tabGroupPane"] = 4] = "tabGroupPane";
-})(EPaneType || (EPaneType = {}));
-
-class BsSplitPane extends BsDockPane {
+class BsContentPane extends BsDockPane {
     constructor(data) {
         super();
-        this.orientation = 'horizontal';
-        this.panes = [];
         Object.assign(this, data);
     }
+    get isEmpty() {
+        return false;
+    }
 }
 
-class BsContentPane extends BsDockPane {
+class BsFloatingPane extends BsDockPane {
     constructor(data) {
         super();
         Object.assign(this, data);
     }
+    get isEmpty() {
+        return this.pane?.isEmpty ?? true;
+    }
 }
 
-class BsFloatingPane {
+class BsSplitPane extends BsDockPane {
     constructor(data) {
+        super();
+        this.orientation = 'horizontal';
+        this.panes = [];
         Object.assign(this, data);
     }
+    get isEmpty() {
+        return this.panes.length === 0;
+    }
 }
 
+var EPaneType;
+(function (EPaneType) {
+    EPaneType[EPaneType["documentHost"] = 1] = "documentHost";
+    EPaneType[EPaneType["splitPane"] = 2] = "splitPane";
+    EPaneType[EPaneType["contentPane"] = 3] = "contentPane";
+    EPaneType[EPaneType["tabGroupPane"] = 4] = "tabGroupPane";
+})(EPaneType || (EPaneType = {}));
+
 class BsDockPaneRendererComponent {
     constructor(overlay, element) {
         this.overlay = overlay;
@@ -154,6 +171,14 @@ class BsDockComponent {
             .subscribe((floating) => {
             floating.forEach((panel) => panel.moveToOverlay());
         });
+        this.parentifiedLayout$ = this.layout$.pipe(map(layout => {
+            const clone = deepClone(layout, true, 
+            // []
+            [BsContentPane, BsDocumentHost, BsFloatingPane, BsSplitPane, BsTabGroupPane], true, this.paneCache);
+            this.paneCache = clone.cache;
+            return clone.result;
+        }));
+        this.parentifiedLayout$.pipe(takeUntil(this.destroyed$)).subscribe(console.log);
     }
     set panels(value) {
         this.panels$.next(value.toArray());
@@ -202,13 +227,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 args: ['style.right']
             }] } });
 
+class BsDockService {
+    buildTraces(layout) {
+        const result = [layout.rootPane, ...layout.floatingPanes].map(pane => this.buildTracesPrivate([pane]));
+        // const result = this.buildTracesPrivate([layout.rootPane]);
+        return result.flatMap(traceGroup => traceGroup);
+    }
+    buildTracesPrivate(currentSequence) {
+        const children = this.getChildPanes(currentSequence[currentSequence.length - 1]);
+        if (children.length === 0) {
+            return [{
+                    finished: true,
+                    trace: currentSequence
+                }];
+        }
+        else {
+            const result = children.map(child => this.buildTracesPrivate([...currentSequence, child]));
+            return result.flatMap(r => r);
+        }
+    }
+    getChildPanes(pane) {
+        if (pane instanceof BsContentPane) {
+            return [];
+        }
+        else if (pane instanceof BsTabGroupPane) {
+            return pane.panes;
+        }
+        else if (pane instanceof BsSplitPane) {
+            return pane.panes;
+        }
+        else if (pane instanceof BsFloatingPane) {
+            return pane.pane ? [pane.pane] : [];
+        }
+        else if (pane instanceof BsDocumentHost) {
+            return pane.rootPane ? [pane.rootPane] : [];
+        }
+        else {
+            return [];
+        }
+    }
+}
+BsDockService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BsDockService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+BsDockService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BsDockService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BsDockService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class BsDockPanelHeaderComponent {
-    constructor(dockPanel, dock, element) {
+    constructor(dockPanel, dock, dockService, element) {
         this.dockPanel = dockPanel;
         this.dock = dock;
+        this.dockService = dockService;
         this.element = element;
         this.isMouseDown = false;
-        this.isLayoutDetached = false;
+        this.isDragging = false;
         this.dBlock = true;
     }
     onMouseDown(ev) {
@@ -217,130 +292,233 @@ class BsDockPanelHeaderComponent {
     }
     onMouseMove(ev) {
         if (this.isMouseDown) {
-            if (!this.isLayoutDetached) {
-                this.isLayoutDetached = true;
-                this.dock.layout$.pipe(take(1)).subscribe((layout) => {
-                    let element = this.element.nativeElement;
-                    let tree = [];
+            if (!this.isDragging) {
+                this.isDragging = true;
+                this.dock.parentifiedLayout$.pipe(take(1)).subscribe((layout) => {
+                    // this.dock.layout$.pipe(take(1)).subscribe((layout) => {
+                    const traces = this.dockService.buildTraces(layout);
+                    console.log('traces', { layout, traces });
+                    const matching = traces.filter(t => {
+                        const lastPane = t.trace[t.trace.length - 1];
+                        // return (lastPane instanceof BsContentPane) && (lastPane.dockPanel === this.dockPanel);
+                        return (lastPane instanceof BsContentPane) && (lastPane.dockPanel === this.dockPanel);
+                    });
+                    console.log('matching', matching);
+                    if (matching.length !== 1) {
+                        return;
+                    }
+                    // const tabs = matching[0].trace.filter(pane => pane instanceof BsTabGroupPane);
+                    // const lastTabGroup = tabs[tabs.length - 1];
+                    // // console.log('last tabgroup', lastTabGroup);
+                    let tabControlEl = this.element.nativeElement;
                     do {
-                        tree.push(element);
-                        element = element.parentElement;
-                    } while (element);
-                    const tabControls = tree.filter(el => el.tagName.toUpperCase() === 'BS-TAB-CONTROL');
-                    if (tabControls.length > 0) {
-                        const coords = {
-                            width: tabControls[0].clientWidth,
-                            height: tabControls[0].clientHeight,
-                            left: ev.clientX - ev.offsetX,
-                            top: ev.clientY - ev.offsetY,
-                        };
-                        this.dockPanel.headerPortal?.isAttached && this.dockPanel.headerPortal?.detach();
-                        this.dockPanel.contentPortal?.isAttached && this.dockPanel.contentPortal?.detach();
-                        this.removeFromPane(layout.rootPane, this.dockPanel);
-                        const floatingPane = new BsFloatingPane({
-                            pane: new BsTabGroupPane({
-                                panes: [
-                                    new BsContentPane({
-                                        dockPanel: this.dockPanel
-                                    })
-                                ]
-                            }),
-                            size: {
-                                width: coords.width,
-                                height: coords.height,
-                            },
-                            location: {
-                                x: coords.left,
-                                y: coords.top,
+                        if (tabControlEl.parentElement) {
+                            tabControlEl = tabControlEl.parentElement;
+                        }
+                        else {
+                            throw 'No more parents';
+                        }
+                    } while (tabControlEl.tagName.toUpperCase() !== 'BS-TAB-CONTROL');
+                    const coords = {
+                        width: tabControlEl.clientWidth,
+                        height: tabControlEl.clientHeight,
+                        left: ev.clientX - ev.offsetX,
+                        top: ev.clientY - ev.offsetY,
+                    };
+                    // this.dockPanel.headerPortal?.isAttached && this.dockPanel.headerPortal?.detach();
+                    // this.dockPanel.contentPortal?.isAttached && this.dockPanel.contentPortal?.detach();
+                    // this.removeFromPane(layout.rootPane, this.dockPanel);
+                    const trace = [...matching[0].trace];
+                    this.dockPanel.headerPortal?.isAttached && this.dockPanel.headerPortal?.detach();
+                    this.dockPanel.contentPortal?.isAttached && this.dockPanel.contentPortal?.detach();
+                    for (let index = trace.length - 1; index >= 0; index--) {
+                        if (index > 0) {
+                            this.removeFromPaneBis(trace[index - 1], trace[index]);
+                            if (!trace[index - 1].isEmpty)
+                                break;
+                        }
+                        else {
+                            const floatingIndex = layout.floatingPanes.indexOf(trace[0]);
+                            if (trace[0].isEmpty && (floatingIndex > -1)) {
+                                layout.floatingPanes.splice(floatingIndex, 1);
                             }
-                        });
-                        this.dragOperation = {
-                            offsetX: ev.offsetX,
-                            offsetY: ev.offsetY,
-                            floatingPane
-                        };
-                        layout.floatingPanes.push(floatingPane);
-                        this.dock.layout$.next(layout);
+                        }
                     }
+                    // this.removeFromPane((<any>matching[0].trace[0])['$original'], this.dockPanel);
+                    const floatingPane = new BsFloatingPane({
+                        pane: new BsTabGroupPane({
+                            panes: [
+                                new BsContentPane({
+                                    dockPanel: this.dockPanel
+                                })
+                            ]
+                        }),
+                        size: {
+                            width: coords.width,
+                            height: coords.height,
+                        },
+                        location: {
+                            x: coords.left,
+                            y: coords.top,
+                        }
+                    });
+                    this.dragOperation = {
+                        offsetX: ev.offsetX,
+                        offsetY: ev.offsetY,
+                        floatingPane
+                    };
+                    layout.floatingPanes.push(floatingPane);
+                    setTimeout(() => this.dock.layout$.next(layout), 5);
+                    // console.log('traces', { traces, matching, dockPanel: this.dockPanel, equals: traces[2].trace[3] });
+                    //     let element: HTMLElement | null = this.element.nativeElement;
+                    //     let tree: HTMLElement[] = [];
+                    //     do {
+                    //       tree.push(element!);
+                    //       element = element!.parentElement;
+                    //     } while (element);
+                    //     const tabControls = tree.filter(el => el.tagName.toUpperCase() === 'BS-TAB-CONTROL');
+                    //     if (tabControls.length > 0) {
+                    //       const coords = {
+                    //         width: tabControls[0].clientWidth,
+                    //         height: tabControls[0].clientHeight,
+                    //         left: ev.clientX - ev.offsetX,
+                    //         top: ev.clientY - ev.offsetY,
+                    //       };
+                    //       this.dockPanel.headerPortal?.isAttached && this.dockPanel.headerPortal?.detach();
+                    //       this.dockPanel.contentPortal?.isAttached && this.dockPanel.contentPortal?.detach();
+                    //       this.removeFromPane(layout.rootPane, this.dockPanel);
+                    //       const floatingPane = new BsFloatingPane({
+                    //         pane: new BsTabGroupPane({
+                    //           panes: [
+                    //             new BsContentPane({
+                    //               dockPanel: this.dockPanel
+                    //             })
+                    //           ]
+                    //         }),
+                    //         size: {
+                    //           width: coords.width,
+                    //           height: coords.height,
+                    //         },
+                    //         location: {
+                    //           x: coords.left,
+                    //           y: coords.top,
+                    //         }
+                    //       });
+                    //       this.dragOperation = {
+                    //         offsetX: ev.offsetX,
+                    //         offsetY: ev.offsetY,
+                    //         floatingPane
+                    //       };
+                    //       layout.floatingPanes.push(floatingPane);
+                    //       this.dock.layout$.next(layout);
+                    //     }
                 });
             }
-            else if (this.dragOperation) {
-                if (this.dragOperation.floatingPane.location) {
-                    this.dragOperation.floatingPane.location.x = ev.clientX - this.dragOperation.offsetX;
-                    this.dragOperation.floatingPane.location.y = ev.clientY - this.dragOperation.offsetY;
+            else {
+                if (this.dragOperation) {
+                    if (this.dragOperation.floatingPane.location) {
+                        this.dragOperation.floatingPane.location.x = ev.clientX - this.dragOperation.offsetX;
+                        this.dragOperation.floatingPane.location.y = ev.clientY - this.dragOperation.offsetY;
+                    }
+                    //   } else {
+                    //     const traces = this.dockService.buildTraces(this.dock.layout);
+                    //     const matchingTrace = traces.filter(trace => {
+                    //       const pane = trace.trace[trace.trace.length - 1];
+                    //       return (pane instanceof BsContentPane) && (pane.dockPanel === this.dockPanel);
+                    //     });
+                    //     console.log('matching', { traces, matchingTrace });
+                    //     // this.dragOperation = {
+                    //     // }
                 }
             }
         }
     }
-    removeFromPane(host, panel /*, parents: BsDockPane[] */) {
+    removeFromPaneBis(host, pane) {
         if (host instanceof BsContentPane) {
-            return { paneRemoved: false, hostIsEmpty: false };
         }
         else if (host instanceof BsDocumentHost) {
             // Actually documentHost should never be removed
-            if (!host.rootPane) {
-                return { paneRemoved: false, hostIsEmpty: true };
-            }
-            const result = this.removeFromPane(host.rootPane, panel);
-            return { paneRemoved: result.paneRemoved, hostIsEmpty: result.hostIsEmpty };
         }
         else if (host instanceof BsTabGroupPane) {
-            const matching = host.panes.filter(p => p.dockPanel === panel);
-            if (matching.length > 0) {
-                host.panes.splice(host.panes.findIndex(p => p.dockPanel === panel), 1);
-                return { paneRemoved: true, hostIsEmpty: host.panes.length === 0 };
-            }
-            else {
-                // ATM. all panes are ContentPanes anyway.
-                // So unless you'd want to have splitters inside the tabs,
-                // This code will not be hit.
-                // const result = host.panes
-                //   .map(parentPane => this.removeFromPane(parentPane, panel))
-                //   .filter(r => r.paneRemoved);
-                //
-                // if (result.length > 0) {
-                //   return { paneRemoved: true, hostIsEmpty: }
-                // }
-                return { paneRemoved: false, hostIsEmpty: host.panes.length === 0 };
+            if (pane instanceof BsContentPane) {
+                const index = host.panes.indexOf(pane);
+                host.panes.splice(index, 1);
             }
         }
         else if (host instanceof BsSplitPane) {
-            const matching = host.panes
-                .filter(p => p instanceof BsContentPane)
-                .map(p => p)
-                .filter(p => p.dockPanel === panel);
-            if (matching.length > 0) {
-                host.panes.splice(host.panes.findIndex(p => (p instanceof BsContentPane) && matching.includes(p)), 1);
-                // TODO: Remove splitter if only 1 pane left?
-                return { paneRemoved: true, hostIsEmpty: host.panes.length === 0 };
-            }
-            else {
-                for (let splitPane of host.panes) {
-                    const result = this.removeFromPane(splitPane, panel);
-                    if (result.paneRemoved && result.hostIsEmpty) {
-                        // splitPane is empty now, so we can remove it from this splitter
-                        host.panes.splice(host.panes.indexOf(splitPane), 1);
-                        return { paneRemoved: true, hostIsEmpty: host.panes.length === 0 };
-                    }
-                }
-            }
-            return { paneRemoved: false, hostIsEmpty: host.panes.length === 0 };
+            const index = host.panes.indexOf(pane);
+            host.panes.splice(index, 1);
+        }
+        else if (host instanceof BsFloatingPane) {
         }
         else {
-            throw 'unknown host type';
+            throw 'Unknown pane type';
         }
     }
+    // removeFromPane(host: BsDockPane, panel: BsDockPanelComponent /*, parents: BsDockPane[] */): RemoveFromPaneResult {
+    //   if (host instanceof BsContentPane) {
+    //     return { paneRemoved: false, hostIsEmpty: false };
+    //   } else if (host instanceof BsDocumentHost) {
+    //     // Actually documentHost should never be removed
+    //     if (!host.rootPane) {
+    //       return { paneRemoved: false, hostIsEmpty: true };
+    //     }
+    //     const result = this.removeFromPane(host.rootPane, panel);
+    //     return { paneRemoved: result.paneRemoved, hostIsEmpty: result.hostIsEmpty };
+    //   } else if (host instanceof BsTabGroupPane) {
+    //     const matching = host.panes.filter(p => p.dockPanel === panel);
+    //     if (matching.length > 0) {
+    //       host.panes.splice(host.panes.findIndex(p => p.dockPanel === panel), 1);
+    //       return { paneRemoved: true, hostIsEmpty: host.panes.length === 0 };
+    //     } else {
+    //       // ATM. all panes are ContentPanes anyway.
+    //       // So unless you'd want to have splitters inside the tabs,
+    //       // This code will not be hit.
+    //       // const result = host.panes
+    //       //   .map(parentPane => this.removeFromPane(parentPane, panel))
+    //       //   .filter(r => r.paneRemoved);
+    //       //
+    //       // if (result.length > 0) {
+    //       //   return { paneRemoved: true, hostIsEmpty: }
+    //       // }
+    //       return { paneRemoved: false, hostIsEmpty: host.panes.length === 0 };
+    //     }
+    //   } else if (host instanceof BsSplitPane) {
+    //     const matching = host.panes
+    //       .filter(p => p instanceof BsContentPane)
+    //       .map(p => <BsContentPane>p)
+    //       .filter(p => p.dockPanel === panel);
+    //     if (matching.length > 0) {
+    //       host.panes.splice(host.panes.findIndex(p => (p instanceof BsContentPane) && matching.includes(p)), 1);
+    //       // TODO: Remove splitter if only 1 pane left?
+    //       return { paneRemoved: true, hostIsEmpty: host.panes.length === 0 };
+    //     } else {
+    //       for (let splitPane of host.panes) {
+    //         const result = this.removeFromPane(splitPane, panel);
+    //         if (result.paneRemoved && result.hostIsEmpty) {
+    //           // splitPane is empty now, so we can remove it from this splitter
+    //           host.panes.splice(host.panes.indexOf(splitPane), 1);
+    //           return { paneRemoved: true, hostIsEmpty: host.panes.length === 0 };
+    //         }
+    //       }
+    //     }
+    //     return { paneRemoved: false, hostIsEmpty: host.panes.length === 0 };
+    //   } else {
+    //     throw 'unknown host type';
+    //   }
+    // }
     onMouseUp(ev) {
         this.isMouseDown = false;
+        this.isDragging = false;
         this.dragOperation = undefined;
     }
 }
-BsDockPanelHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BsDockPanelHeaderComponent, deps: [{ token: BsDockPanelComponent }, { token: BsDockComponent }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BsDockPanelHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BsDockPanelHeaderComponent, deps: [{ token: BsDockPanelComponent }, { token: BsDockComponent }, { token: BsDockService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 BsDockPanelHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: BsDockPanelHeaderComponent, selector: "bs-dock-panel-header", host: { listeners: { "mousedown": "onMouseDown($event)", "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)" }, properties: { "class.d-block": "this.dBlock" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);margin:calc(-1 * var(--bs-nav-link-padding-y)) calc(-1 * var(--bs-nav-link-padding-x))}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: BsDockPanelHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bs-dock-panel-header', template: "<ng-content></ng-content>", styles: [":host{padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);margin:calc(-1 * var(--bs-nav-link-padding-y)) calc(-1 * var(--bs-nav-link-padding-x))}\n"] }]
-        }], ctorParameters: function () { return [{ type: BsDockPanelComponent }, { type: BsDockComponent }, { type: i0.ElementRef }]; }, propDecorators: { onMouseDown: [{
+        }], ctorParameters: function () { return [{ type: BsDockPanelComponent }, { type: BsDockComponent }, { type: BsDockService }, { type: i0.ElementRef }]; }, propDecorators: { onMouseDown: [{
                 type: HostListener,
                 args: ['mousedown', ['$event']]
             }], onMouseMove: [{
@@ -408,5 +586,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BsContentPane, BsDockComponent, BsDockModule, BsDockPane, BsDockPaneRendererComponent, BsDockPanelComponent, BsDockPanelHeaderComponent, BsDocumentHost, BsFloatingPane, BsSplitPane, BsTabGroupPane, EPaneType };
+export { BsContentPane, BsDockComponent, BsDockModule, BsDockPane, BsDockPaneRendererComponent, BsDockPanelComponent, BsDockPanelHeaderComponent, BsDockService, BsDocumentHost, BsFloatingPane, BsSplitPane, BsTabGroupPane, EPaneType };
 //# sourceMappingURL=mintplayer-ng-bootstrap-dock.mjs.map