dockview 1.0.2 → 1.0.3

package/dist/dockview.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.0.2
+ * @version 1.0.3
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -301,6 +301,12 @@
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
+        get onDidAddView() {
+            return this.component.onDidAddView;
+        }
+        get onDidRemoveView() {
+            return this.component.onDidRemoveView;
+        }
         get orientation() {
             return this.component.orientation;
         }
@@ -902,7 +908,7 @@
             this._onDidAddView = new Emitter();
             this.onDidAddView = this._onDidAddView.event;
             this._onDidRemoveView = new Emitter();
-            this.onDidRemoveView = this._onDidAddView.event;
+            this.onDidRemoveView = this._onDidRemoveView.event;
             this._startSnappingEnabled = true;
             this._endSnappingEnabled = true;
             this.resize = (index, delta, sizes = this.views.map((x) => x.size), lowPriorityIndexes, highPriorityIndexes, overloadMinDelta = Number.NEGATIVE_INFINITY, overloadMaxDelta = Number.POSITIVE_INFINITY, snapBefore, snapAfter) => {
@@ -5203,6 +5209,10 @@
             this.element = element;
             this._disposable = new MutableDisposable();
             this.panels = new Map();
+            this._onDidAddView = new Emitter();
+            this.onDidAddView = this._onDidAddView.event;
+            this._onDidRemoveView = new Emitter();
+            this.onDidRemoveView = this._onDidRemoveView.event;
             this._onDidLayoutChange = new Emitter();
             this.onDidLayoutChange = this._onDidLayoutChange.event;
             this._options = options;
@@ -5228,7 +5238,7 @@
             this._splitview = value;
             this._disposable.value = new CompositeDisposable(this._splitview.onDidSashEnd(() => {
                 this._onDidLayoutChange.fire(undefined);
-            }));
+            }), this._splitview.onDidAddView((e) => this._onDidAddView.fire(e)), this._splitview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
         }
         get minimumSize() {
             return this.splitview.minimumSize;
@@ -5402,6 +5412,10 @@
                         });
                         panel.orientation = orientation;
                         this.doAddView(panel);
+                        setTimeout(() => {
+                            // the original onDidAddView events are missed since they are fired before we can subcribe to them
+                            this._onDidAddView.fire(panel);
+                        }, 0);
                         return { size: view.size, view: panel };
                     }),
                 },
@@ -5520,7 +5534,7 @@
     }
 
     class PaneviewPanel extends BasePanelView {
-        constructor(id, component, headerComponent, orientation, isExpanded) {
+        constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
             super(id, component, new PaneviewPanelApiImpl(id));
             this.headerComponent = headerComponent;
             this._onDidChangeExpansionState = new Emitter({ replay: true });
@@ -5536,6 +5550,7 @@
             this.expandedSize = 0;
             this.api.pane = this; // TODO cannot use 'this' before 'super'
             this._isExpanded = isExpanded;
+            this._headerVisible = isHeaderVisible;
             this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
             this._orientation = orientation;
             this.element.classList.add('pane');
@@ -5603,6 +5618,13 @@
             this._maximumBodySize =
                 typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
         }
+        get headerVisible() {
+            return this._headerVisible;
+        }
+        set headerVisible(value) {
+            this._headerVisible = value;
+            this.header.style.display = value ? '' : 'none';
+        }
         setVisible(isVisible) {
             this.api._onDidVisibilityChange.fire({ isVisible });
         }
@@ -5700,7 +5722,7 @@
 
     class DraggablePaneviewPanel extends PaneviewPanel {
         constructor(id, component, headerComponent, orientation, isExpanded, disableDnd) {
-            super(id, component, headerComponent, orientation, isExpanded);
+            super(id, component, headerComponent, orientation, isExpanded, true);
             this._onDidDrop = new Emitter();
             this.onDidDrop = this._onDidDrop.event;
             if (!disableDnd) {
@@ -5823,6 +5845,10 @@
             this.onDidLayoutChange = this._onDidLayoutChange.event;
             this._onDidDrop = new Emitter();
             this.onDidDrop = this._onDidDrop.event;
+            this._onDidAddView = new Emitter();
+            this.onDidAddView = this._onDidAddView.event;
+            this._onDidRemoveView = new Emitter();
+            this.onDidRemoveView = this._onDidRemoveView.event;
             this._options = options;
             if (!options.components) {
                 options.components = {};
@@ -5836,17 +5862,11 @@
             });
             this.addDisposables(this._disposable);
         }
-        get onDidAddView() {
-            return this._paneview.onDidAddView;
-        }
-        get onDidRemoveView() {
-            return this._paneview.onDidRemoveView;
-        }
         set paneview(value) {
             this._paneview = value;
-            this._disposable.value = new CompositeDisposable(this.paneview.onDidChange(() => {
+            this._disposable.value = new CompositeDisposable(this._paneview.onDidChange(() => {
                 this._onDidLayoutChange.fire(undefined);
-            }));
+            }), this._paneview.onDidAddView((e) => this._onDidAddView.fire(e)), this._paneview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
         }
         get paneview() {
             return this._paneview;
@@ -6026,6 +6046,10 @@
                             });
                             panel.orientation = this.paneview.orientation;
                         });
+                        setTimeout(() => {
+                            // the original onDidAddView events are missed since they are fired before we can subcribe to them
+                            this._onDidAddView.fire(panel);
+                        }, 0);
                         return { size: view.size, view: panel };
                     }),
                 },

package/dist/esm/api/component.api.d.ts

@@ -7,7 +7,7 @@ import { IGroupPanel } from '../groupview/groupPanel';
 import { AddPaneviewCompponentOptions, SerializedPaneview, IPaneviewComponent } from '../paneview/paneviewComponent';
 import { IPaneviewPanel, PaneviewPanel } from '../paneview/paneviewPanel';
 import { AddSplitviewComponentOptions, ISplitviewComponent, SerializedSplitview, SplitviewComponentUpdateOptions } from '../splitview/splitviewComponent';
-import { Orientation, Sizing } from '../splitview/core/splitview';
+import { IView, Orientation, Sizing } from '../splitview/core/splitview';
 import { ISplitviewPanel } from '../splitview/splitviewPanel';
 import { GroupviewPanel } from '../groupview/groupviewPanel';
 import { Event } from '../events';
@@ -29,6 +29,8 @@ export declare class SplitviewApi implements CommonApi {
     get width(): number;
     get length(): number;
     get onDidLayoutChange(): Event<void>;
+    get onDidAddView(): Event<IView>;
+    get onDidRemoveView(): Event<IView>;
     get orientation(): Orientation;
     constructor(component: ISplitviewComponent);
     updateOptions(options: SplitviewComponentUpdateOptions): void;

package/dist/esm/api/component.api.js

@@ -21,6 +21,12 @@ export class SplitviewApi {
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
     }
+    get onDidAddView() {
+        return this.component.onDidAddView;
+    }
+    get onDidRemoveView() {
+        return this.component.onDidRemoveView;
+    }
     get orientation() {
         return this.component.orientation;
     }

package/dist/esm/paneview/draggablePaneviewPanel.js

@@ -5,7 +5,7 @@ import { Emitter } from '../events';
 import { PaneviewPanel, } from './paneviewPanel';
 export class DraggablePaneviewPanel extends PaneviewPanel {
     constructor(id, component, headerComponent, orientation, isExpanded, disableDnd) {
-        super(id, component, headerComponent, orientation, isExpanded);
+        super(id, component, headerComponent, orientation, isExpanded, true);
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
         if (!disableDnd) {

package/dist/esm/paneview/paneviewComponent.d.ts

@@ -87,8 +87,10 @@ export declare class PaneviewComponent extends CompositeDisposable implements IP
     readonly onDidLayoutChange: Event<void>;
     private readonly _onDidDrop;
     readonly onDidDrop: Event<PaneviewDropEvent2>;
-    get onDidAddView(): Event<PaneviewPanel>;
-    get onDidRemoveView(): Event<PaneviewPanel>;
+    private readonly _onDidAddView;
+    readonly onDidAddView: Event<PaneviewPanel>;
+    private readonly _onDidRemoveView;
+    readonly onDidRemoveView: Event<PaneviewPanel>;
     set paneview(value: Paneview);
     get paneview(): Paneview;
     get minimumSize(): number;

package/dist/esm/paneview/paneviewComponent.js

@@ -27,6 +27,10 @@ export class PaneviewComponent extends CompositeDisposable {
         this.onDidLayoutChange = this._onDidLayoutChange.event;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
+        this._onDidAddView = new Emitter();
+        this.onDidAddView = this._onDidAddView.event;
+        this._onDidRemoveView = new Emitter();
+        this.onDidRemoveView = this._onDidRemoveView.event;
         this._options = options;
         if (!options.components) {
             options.components = {};
@@ -40,17 +44,11 @@ export class PaneviewComponent extends CompositeDisposable {
         });
         this.addDisposables(this._disposable);
     }
-    get onDidAddView() {
-        return this._paneview.onDidAddView;
-    }
-    get onDidRemoveView() {
-        return this._paneview.onDidRemoveView;
-    }
     set paneview(value) {
         this._paneview = value;
-        this._disposable.value = new CompositeDisposable(this.paneview.onDidChange(() => {
+        this._disposable.value = new CompositeDisposable(this._paneview.onDidChange(() => {
             this._onDidLayoutChange.fire(undefined);
-        }));
+        }), this._paneview.onDidAddView((e) => this._onDidAddView.fire(e)), this._paneview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
     }
     get paneview() {
         return this._paneview;
@@ -230,6 +228,10 @@ export class PaneviewComponent extends CompositeDisposable {
                         });
                         panel.orientation = this.paneview.orientation;
                     });
+                    setTimeout(() => {
+                        // the original onDidAddView events are missed since they are fired before we can subcribe to them
+                        this._onDidAddView.fire(panel);
+                    }, 0);
                     return { size: view.size, view: panel };
                 }),
             },

package/dist/esm/paneview/paneviewPanel.d.ts

@@ -39,6 +39,7 @@ export interface IPaneviewPanel extends BasePanelViewExported<PaneviewPanelApiIm
     readonly maximumBodySize: number;
     isExpanded(): boolean;
     setExpanded(isExpanded: boolean): void;
+    headerVisible: boolean;
 }
 export declare abstract class PaneviewPanel extends BasePanelView<PaneviewPanelApiImpl> implements IPaneview, IPaneviewPanel {
     private readonly headerComponent;
@@ -59,6 +60,7 @@ export declare abstract class PaneviewPanel extends BasePanelView<PaneviewPanelA
     private expandedSize;
     private animationTimer;
     private _orientation;
+    private _headerVisible;
     set orientation(value: Orientation);
     get orientation(): Orientation;
     get minimumSize(): number;
@@ -70,7 +72,9 @@ export declare abstract class PaneviewPanel extends BasePanelView<PaneviewPanelA
     set minimumBodySize(value: number);
     get maximumBodySize(): number;
     set maximumBodySize(value: number);
-    constructor(id: string, component: string, headerComponent: string | undefined, orientation: Orientation, isExpanded: boolean);
+    get headerVisible(): boolean;
+    set headerVisible(value: boolean);
+    constructor(id: string, component: string, headerComponent: string | undefined, orientation: Orientation, isExpanded: boolean, isHeaderVisible: boolean);
     setVisible(isVisible: boolean): void;
     setActive(isActive: boolean): void;
     isExpanded(): boolean;

package/dist/esm/paneview/paneviewPanel.js

@@ -4,7 +4,7 @@ import { addDisposableListener, Emitter } from '../events';
 import { BasePanelView, } from '../gridview/basePanelView';
 import { Orientation } from '../splitview/core/splitview';
 export class PaneviewPanel extends BasePanelView {
-    constructor(id, component, headerComponent, orientation, isExpanded) {
+    constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
         super(id, component, new PaneviewPanelApiImpl(id));
         this.headerComponent = headerComponent;
         this._onDidChangeExpansionState = new Emitter({ replay: true });
@@ -20,6 +20,7 @@ export class PaneviewPanel extends BasePanelView {
         this.expandedSize = 0;
         this.api.pane = this; // TODO cannot use 'this' before 'super'
         this._isExpanded = isExpanded;
+        this._headerVisible = isHeaderVisible;
         this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
         this._orientation = orientation;
         this.element.classList.add('pane');
@@ -87,6 +88,13 @@ export class PaneviewPanel extends BasePanelView {
         this._maximumBodySize =
             typeof value === 'number' ? value : Number.POSITIVE_INFINITY;
     }
+    get headerVisible() {
+        return this._headerVisible;
+    }
+    set headerVisible(value) {
+        this._headerVisible = value;
+        this.header.style.display = value ? '' : 'none';
+    }
     setVisible(isVisible) {
         this.api._onDidVisibilityChange.fire({ isVisible });
     }

package/dist/esm/splitview/core/splitview.js

@@ -51,7 +51,7 @@ export class Splitview {
         this._onDidAddView = new Emitter();
         this.onDidAddView = this._onDidAddView.event;
         this._onDidRemoveView = new Emitter();
-        this.onDidRemoveView = this._onDidAddView.event;
+        this.onDidRemoveView = this._onDidRemoveView.event;
         this._startSnappingEnabled = true;
         this._endSnappingEnabled = true;
         this.resize = (index, delta, sizes = this.views.map((x) => x.size), lowPriorityIndexes, highPriorityIndexes, overloadMinDelta = Number.NEGATIVE_INFINITY, overloadMaxDelta = Number.POSITIVE_INFINITY, snapBefore, snapAfter) => {

package/dist/esm/splitview/splitviewComponent.d.ts

@@ -1,5 +1,5 @@
 import { CompositeDisposable, IDisposable } from '../lifecycle';
-import { LayoutPriority, Orientation, Sizing, Splitview } from './core/splitview';
+import { IView, LayoutPriority, Orientation, Sizing, Splitview } from './core/splitview';
 import { SplitviewComponentOptions } from './core/options';
 import { BaseComponentOptions } from '../panel/types';
 import { Event } from '../events';
@@ -42,6 +42,8 @@ export interface ISplitviewComponent extends IDisposable {
     readonly width: number;
     readonly length: number;
     readonly orientation: Orientation;
+    readonly onDidAddView: Event<IView>;
+    readonly onDidRemoveView: Event<IView>;
     updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
     addPanel(options: AddSplitviewComponentOptions): void;
     layout(width: number, height: number): void;
@@ -67,12 +69,16 @@ export declare class SplitviewComponent extends CompositeDisposable implements I
     private _activePanel;
     private panels;
     private _options;
+    private readonly _onDidAddView;
+    readonly onDidAddView: Event<IView>;
+    private readonly _onDidRemoveView;
+    readonly onDidRemoveView: Event<IView>;
+    private readonly _onDidLayoutChange;
+    readonly onDidLayoutChange: Event<void>;
     get options(): SplitviewComponentOptions;
     get orientation(): Orientation;
     get splitview(): Splitview;
     set splitview(value: Splitview);
-    private readonly _onDidLayoutChange;
-    readonly onDidLayoutChange: Event<void>;
     get minimumSize(): number;
     get maximumSize(): number;
     get height(): number;

package/dist/esm/splitview/splitviewComponent.js

@@ -12,6 +12,10 @@ export class SplitviewComponent extends CompositeDisposable {
         this.element = element;
         this._disposable = new MutableDisposable();
         this.panels = new Map();
+        this._onDidAddView = new Emitter();
+        this.onDidAddView = this._onDidAddView.event;
+        this._onDidRemoveView = new Emitter();
+        this.onDidRemoveView = this._onDidRemoveView.event;
         this._onDidLayoutChange = new Emitter();
         this.onDidLayoutChange = this._onDidLayoutChange.event;
         this._options = options;
@@ -37,7 +41,7 @@ export class SplitviewComponent extends CompositeDisposable {
         this._splitview = value;
         this._disposable.value = new CompositeDisposable(this._splitview.onDidSashEnd(() => {
             this._onDidLayoutChange.fire(undefined);
-        }));
+        }), this._splitview.onDidAddView((e) => this._onDidAddView.fire(e)), this._splitview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
     }
     get minimumSize() {
         return this.splitview.minimumSize;
@@ -211,6 +215,10 @@ export class SplitviewComponent extends CompositeDisposable {
                     });
                     panel.orientation = orientation;
                     this.doAddView(panel);
+                    setTimeout(() => {
+                        // the original onDidAddView events are missed since they are fired before we can subcribe to them
+                        this._onDidAddView.fire(panel);
+                    }, 0);
                     return { size: view.size, view: panel };
                 }),
             },

package/dist/styles/dockview.css

@@ -105,6 +105,51 @@
   margin-right: "0.5em";
   cursor: pointer;
 }
+.drop-target {
+  position: relative;
+}
+.drop-target > .drop-target-dropzone {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  height: 100%;
+  width: 100%;
+  z-index: 10000;
+}
+.drop-target > .drop-target-dropzone > .drop-target-selection {
+  position: relative;
+  pointer-events: none;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  background-color: var(--dv-drag-over-background-color);
+  transition-duration: 0.15s;
+  transition-timing-function: ease-out;
+}
+.drop-target > .drop-target-dropzone > .drop-target-selection.left, .drop-target > .drop-target-dropzone > .drop-target-selection.right {
+  width: 50%;
+}
+.drop-target > .drop-target-dropzone > .drop-target-selection.right {
+  transform: translate(100%, 0%);
+}
+.drop-target > .drop-target-dropzone > .drop-target-selection.bottom {
+  transform: translate(0%, 100%);
+}
+.drop-target > .drop-target-dropzone > .drop-target-selection.top, .drop-target > .drop-target-dropzone > .drop-target-selection.bottom {
+  height: 50%;
+}
+.drop-target > .drop-target-dropzone > .drop-target-selection.small-top {
+  border-top: 1px solid var(--dv-drag-over-border-color);
+}
+.drop-target > .drop-target-dropzone > .drop-target-selection.small-bottom {
+  border-bottom: 1px solid var(--dv-drag-over-border-color);
+}
+.drop-target > .drop-target-dropzone > .drop-target-selection.small-left {
+  border-left: 1px solid var(--dv-drag-over-border-color);
+}
+.drop-target > .drop-target-dropzone > .drop-target-selection.small-right {
+  border-right: 1px solid var(--dv-drag-over-border-color);
+}
 .custom-dragging {
   height: 24px;
   line-height: 24px;
@@ -154,51 +199,6 @@
   background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
   color: var(--dv-activegroup-visiblepanel-tab-color);
 }
-.drop-target {
-  position: relative;
-}
-.drop-target > .drop-target-dropzone {
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  height: 100%;
-  width: 100%;
-  z-index: 10000;
-}
-.drop-target > .drop-target-dropzone > .drop-target-selection {
-  position: relative;
-  pointer-events: none;
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-  background-color: var(--dv-drag-over-background-color);
-  transition-duration: 0.15s;
-  transition-timing-function: ease-out;
-}
-.drop-target > .drop-target-dropzone > .drop-target-selection.left, .drop-target > .drop-target-dropzone > .drop-target-selection.right {
-  width: 50%;
-}
-.drop-target > .drop-target-dropzone > .drop-target-selection.right {
-  transform: translate(100%, 0%);
-}
-.drop-target > .drop-target-dropzone > .drop-target-selection.bottom {
-  transform: translate(0%, 100%);
-}
-.drop-target > .drop-target-dropzone > .drop-target-selection.top, .drop-target > .drop-target-dropzone > .drop-target-selection.bottom {
-  height: 50%;
-}
-.drop-target > .drop-target-dropzone > .drop-target-selection.small-top {
-  border-top: 1px solid var(--dv-drag-over-border-color);
-}
-.drop-target > .drop-target-dropzone > .drop-target-selection.small-bottom {
-  border-bottom: 1px solid var(--dv-drag-over-border-color);
-}
-.drop-target > .drop-target-dropzone > .drop-target-selection.small-left {
-  border-left: 1px solid var(--dv-drag-over-border-color);
-}
-.drop-target > .drop-target-dropzone > .drop-target-selection.small-right {
-  border-right: 1px solid var(--dv-drag-over-border-color);
-}
 .grid-view,
 .branch-node {
   height: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -73,5 +73,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "6ba801550244fdf4d1b6f6de1e3197bfcd0a773b"
+  "gitHead": "0b051157332ff2611a95f53a39e4643cac70f020"
 }