dockview 1.0.1 → 1.0.2

package/dist/dockview.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.0.1
+ * @version 1.0.2
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -101,6 +101,24 @@
                 element.removeEventListener(type, listener);
             },
         };
+    }
+    class TickDelayedEvent {
+        constructor() {
+            this._onFired = new Emitter();
+            this.onEvent = this._onFired.event;
+        }
+        fire() {
+            if (this.timer) {
+                clearTimeout(this.timer);
+            }
+            this.timer = setTimeout(() => {
+                this._onFired.fire();
+                clearTimeout(this.timer);
+            });
+        }
+        dispose() {
+            this._onFired.dispose();
+        }
     }
 
     exports.Disposable = void 0;
@@ -345,6 +363,23 @@
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
+        get onDidAddView() {
+            return this.component.onDidAddView;
+        }
+        get onDidRemoveView() {
+            return this.component.onDidRemoveView;
+        }
+        get onDidDrop() {
+            const emitter = new Emitter();
+            const disposable = this.component.onDidDrop((e) => {
+                emitter.fire(Object.assign(Object.assign({}, e), { api: this }));
+            });
+            emitter.dispose = () => {
+                disposable.dispose();
+                emitter.dispose();
+            };
+            return emitter.event;
+        }
         getPanels() {
             return this.component.getPanels();
         }
@@ -1509,9 +1544,9 @@
             var _a;
             super();
             this.paneItems = [];
+            this.skipAnimation = false;
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
-            this.skipAnimation = false;
             this._orientation = (_a = options.orientation) !== null && _a !== void 0 ? _a : exports.Orientation.VERTICAL;
             this.element = document.createElement('div');
             this.element.className = 'pane-container';
@@ -1611,9 +1646,6 @@
             }
         }
         layout(size, orthogonalSize) {
-            // for (const paneItem of this.paneItems) {
-            //     paneItem.pane.orthogonalSize = orthogonalSize;
-            // }
             this.splitview.layout(size, orthogonalSize);
         }
         setupAnimation() {
@@ -1797,7 +1829,7 @@
                     const state = this._state;
                     this.removeDropTarget();
                     if (state) {
-                        this._onDrop.fire({ position: state, event: e });
+                        this._onDrop.fire({ position: state, nativeEvent: e });
                     }
                 },
             }));
@@ -2460,7 +2492,6 @@
             }
             parent.removeChild(index, sizing);
             if (parent.children.length === 0) {
-                // throw new Error('Invalid grid state');
                 return node.view;
             }
             if (parent.children.length > 1) {
@@ -2761,7 +2792,7 @@
             });
             this.addDisposables(this.voidDropTarget.onDrop((event) => {
                 this._onDrop.fire({
-                    event: event.event,
+                    event: event.nativeEvent,
                     index: this.tabs.length,
                 });
             }), this.voidDropTarget, addDisposableListener(this.tabContainer, 'mousedown', (event) => {
@@ -2883,7 +2914,7 @@
                 }
             }), tabToAdd.onDrop((event) => {
                 this._onDrop.fire({
-                    event: event.event,
+                    event: event.nativeEvent,
                     index: this.tabs.findIndex((x) => x.value === tabToAdd),
                 });
             }));
@@ -2959,9 +2990,9 @@
             }), this.contentContainer.onDidFocus(() => {
                 this.accessor.doSetGroupActive(this.parent, true);
             }), this.contentContainer.onDidBlur(() => {
-                // this._activePanel?.api._ondid
+                // noop
             }), this.dropTarget.onDrop((event) => {
-                this.handleDropEvent(event.event, event.position);
+                this.handleDropEvent(event.nativeEvent, event.position);
             }));
         }
         get element() {
@@ -3379,11 +3410,8 @@
                 this._onGridEvent.fire({ kind: exports.GroupChangeKind.LAYOUT });
             }));
             this.addDisposables((() => {
-                /**
-                 * TODO Fix this relatively ugly 'merge and delay'
-                 */
-                let timer;
-                return this.onGridEvent((event) => {
+                const tickDelayedEvent = new TickDelayedEvent();
+                return new CompositeDisposable(this.onGridEvent((event) => {
                     if ([
                         exports.GroupChangeKind.ADD_GROUP,
                         exports.GroupChangeKind.REMOVE_GROUP,
@@ -3393,15 +3421,11 @@
                         exports.GroupChangeKind.PANEL_ACTIVE,
                         exports.GroupChangeKind.LAYOUT,
                     ].includes(event.kind)) {
-                        if (timer) {
-                            clearTimeout(timer);
-                        }
-                        timer = setTimeout(() => {
-                            this._onDidLayoutChange.fire();
-                            clearTimeout(timer);
-                        });
+                        tickDelayedEvent.fire();
                     }
-                });
+                }), tickDelayedEvent.onEvent(() => {
+                    this._onDidLayoutChange.fire();
+                }), tickDelayedEvent);
             })());
         }
         get id() {
@@ -4407,7 +4431,9 @@
             this.tab.init(params);
         }
         updateParentGroup(group, isPanelVisible) {
-            // TODO
+            var _a;
+            this._content.updateParentGroup(group, isPanelVisible);
+            (_a = this._tab) === null || _a === void 0 ? void 0 : _a.updateParentGroup(group, isPanelVisible);
         }
         layout(width, height) {
             this.content.layout(width, height);
@@ -6901,6 +6927,7 @@
     exports.SplitviewPanel = SplitviewPanel;
     exports.SplitviewReact = SplitviewReact;
     exports.Tab = Tab$1;
+    exports.TickDelayedEvent = TickDelayedEvent;
     exports.addDisposableListener = addDisposableListener;
     exports.addDisposableWindowListener = addDisposableWindowListener;
     exports.extractData = extractData;

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

@@ -5,13 +5,14 @@ import { AddComponentOptions, IGridviewComponent, SerializedGridview } from '../
 import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel';
 import { IGroupPanel } from '../groupview/groupPanel';
 import { AddPaneviewCompponentOptions, SerializedPaneview, IPaneviewComponent } from '../paneview/paneviewComponent';
-import { IPaneviewPanel } from '../paneview/paneviewPanel';
+import { IPaneviewPanel, PaneviewPanel } from '../paneview/paneviewPanel';
 import { AddSplitviewComponentOptions, ISplitviewComponent, SerializedSplitview, SplitviewComponentUpdateOptions } from '../splitview/splitviewComponent';
 import { Orientation, Sizing } from '../splitview/core/splitview';
 import { ISplitviewPanel } from '../splitview/splitviewPanel';
 import { GroupviewPanel } from '../groupview/groupviewPanel';
 import { Event } from '../events';
 import { IDisposable } from '../lifecycle';
+import { PaneviewDropEvent } from '../react';
 export interface CommonApi {
     readonly height: number;
     readonly width: number;
@@ -51,6 +52,9 @@ export declare class PaneviewApi implements CommonApi {
     get minimumSize(): number;
     get maximumSize(): number;
     get onDidLayoutChange(): Event<void>;
+    get onDidAddView(): Event<PaneviewPanel>;
+    get onDidRemoveView(): Event<PaneviewPanel>;
+    get onDidDrop(): Event<PaneviewDropEvent>;
     constructor(component: IPaneviewComponent);
     getPanels(): IPaneviewPanel[];
     removePanel(panel: IPaneviewPanel): void;

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

@@ -1,3 +1,4 @@
+import { Emitter } from '../events';
 export class SplitviewApi {
     constructor(component) {
         this.component = component;
@@ -82,6 +83,23 @@ export class PaneviewApi {
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
     }
+    get onDidAddView() {
+        return this.component.onDidAddView;
+    }
+    get onDidRemoveView() {
+        return this.component.onDidRemoveView;
+    }
+    get onDidDrop() {
+        const emitter = new Emitter();
+        const disposable = this.component.onDidDrop((e) => {
+            emitter.fire(Object.assign(Object.assign({}, e), { api: this }));
+        });
+        emitter.dispose = () => {
+            disposable.dispose();
+            emitter.dispose();
+        };
+        return emitter.event;
+    }
     getPanels() {
         return this.component.getPanels();
     }

package/dist/esm/dnd/droptarget.d.ts

@@ -1,9 +1,5 @@
 import { Event } from '../events';
 import { CompositeDisposable } from '../lifecycle';
-export interface DroptargetEvent {
-    position: Position;
-    event: DragEvent;
-}
 export declare enum Position {
     Top = "Top",
     Left = "Left",
@@ -13,7 +9,7 @@ export declare enum Position {
 }
 export interface DroptargetEvent {
     position: Position;
-    event: DragEvent;
+    nativeEvent: DragEvent;
 }
 export declare type DropTargetDirections = 'vertical' | 'horizontal' | 'all' | 'none';
 export declare type CanDisplayOverlay = boolean | ((dragEvent: DragEvent) => boolean);

package/dist/esm/dnd/droptarget.js

@@ -114,7 +114,7 @@ export class Droptarget extends CompositeDisposable {
                 const state = this._state;
                 this.removeDropTarget();
                 if (state) {
-                    this._onDrop.fire({ position: state, event: e });
+                    this._onDrop.fire({ position: state, nativeEvent: e });
                 }
             },
         }));

package/dist/esm/dockview/defaultGroupPanelView.js

@@ -29,7 +29,9 @@ export class DefaultGroupPanelView {
         this.tab.init(params);
     }
     updateParentGroup(group, isPanelVisible) {
-        // TODO
+        var _a;
+        this._content.updateParentGroup(group, isPanelVisible);
+        (_a = this._tab) === null || _a === void 0 ? void 0 : _a.updateParentGroup(group, isPanelVisible);
     }
     layout(width, height) {
         this.content.layout(width, height);

package/dist/esm/events.d.ts

@@ -21,3 +21,10 @@ export declare class Emitter<T> implements IDisposable {
 }
 export declare function addDisposableWindowListener<K extends keyof WindowEventMap>(element: Window, type: K, listener: (this: Window, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): IDisposable;
 export declare function addDisposableListener<K extends keyof HTMLElementEventMap>(element: HTMLElement, type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): IDisposable;
+export declare class TickDelayedEvent implements IDisposable {
+    private timer;
+    private readonly _onFired;
+    readonly onEvent: Event<void>;
+    fire(): void;
+    dispose(): void;
+}

package/dist/esm/events.js

@@ -69,3 +69,21 @@ export function addDisposableListener(element, type, listener, options) {
         },
     };
 }
+export class TickDelayedEvent {
+    constructor() {
+        this._onFired = new Emitter();
+        this.onEvent = this._onFired.event;
+    }
+    fire() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+        }
+        this.timer = setTimeout(() => {
+            this._onFired.fire();
+            clearTimeout(this.timer);
+        });
+    }
+    dispose() {
+        this._onFired.dispose();
+    }
+}

package/dist/esm/gridview/baseComponentGridview.js

@@ -1,4 +1,4 @@
-import { Emitter } from '../events';
+import { Emitter, TickDelayedEvent } from '../events';
 import { getGridLocation, Gridview } from './gridview';
 import { Position } from '../dnd/droptarget';
 import { CompositeDisposable } from '../lifecycle';
@@ -52,11 +52,8 @@ export class BaseGrid extends CompositeDisposable {
             this._onGridEvent.fire({ kind: GroupChangeKind.LAYOUT });
         }));
         this.addDisposables((() => {
-            /**
-             * TODO Fix this relatively ugly 'merge and delay'
-             */
-            let timer;
-            return this.onGridEvent((event) => {
+            const tickDelayedEvent = new TickDelayedEvent();
+            return new CompositeDisposable(this.onGridEvent((event) => {
                 if ([
                     GroupChangeKind.ADD_GROUP,
                     GroupChangeKind.REMOVE_GROUP,
@@ -66,15 +63,11 @@ export class BaseGrid extends CompositeDisposable {
                     GroupChangeKind.PANEL_ACTIVE,
                     GroupChangeKind.LAYOUT,
                 ].includes(event.kind)) {
-                    if (timer) {
-                        clearTimeout(timer);
-                    }
-                    timer = setTimeout(() => {
-                        this._onDidLayoutChange.fire();
-                        clearTimeout(timer);
-                    });
+                    tickDelayedEvent.fire();
                 }
-            });
+            }), tickDelayedEvent.onEvent(() => {
+                this._onDidLayoutChange.fire();
+            }), tickDelayedEvent);
         })());
     }
     get id() {

package/dist/esm/gridview/gridview.js

@@ -329,7 +329,6 @@ export class Gridview {
         }
         parent.removeChild(index, sizing);
         if (parent.children.length === 0) {
-            // throw new Error('Invalid grid state');
             return node.view;
         }
         if (parent.children.length > 1) {

package/dist/esm/groupview/groupview.js

@@ -72,9 +72,9 @@ export class Groupview extends CompositeDisposable {
         }), this.contentContainer.onDidFocus(() => {
             this.accessor.doSetGroupActive(this.parent, true);
         }), this.contentContainer.onDidBlur(() => {
-            // this._activePanel?.api._ondid
+            // noop
         }), this.dropTarget.onDrop((event) => {
-            this.handleDropEvent(event.event, event.position);
+            this.handleDropEvent(event.nativeEvent, event.position);
         }));
     }
     get element() {

package/dist/esm/groupview/titlebar/tabsContainer.js

@@ -42,7 +42,7 @@ export class TabsContainer extends CompositeDisposable {
         });
         this.addDisposables(this.voidDropTarget.onDrop((event) => {
             this._onDrop.fire({
-                event: event.event,
+                event: event.nativeEvent,
                 index: this.tabs.length,
             });
         }), this.voidDropTarget, addDisposableListener(this.tabContainer, 'mousedown', (event) => {
@@ -164,7 +164,7 @@ export class TabsContainer extends CompositeDisposable {
             }
         }), tabToAdd.onDrop((event) => {
             this._onDrop.fire({
-                event: event.event,
+                event: event.nativeEvent,
                 index: this.tabs.findIndex((x) => x.value === tabToAdd),
             });
         }));

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

@@ -12,6 +12,7 @@ export declare class Paneview extends CompositeDisposable implements IDisposable
     private paneItems;
     private _orientation;
     private animationTimer;
+    private skipAnimation;
     private readonly _onDidChange;
     readonly onDidChange: Event<void>;
     get onDidAddView(): Event<PaneviewPanel>;
@@ -29,7 +30,6 @@ export declare class Paneview extends CompositeDisposable implements IDisposable
     getViewSize(index: number): number;
     getPanes(): PaneviewPanel[];
     removePane(index: number): PaneItem;
-    private skipAnimation;
     moveView(from: number, to: number): void;
     layout(size: number, orthogonalSize: number): void;
     private setupAnimation;

package/dist/esm/paneview/paneview.js

@@ -7,9 +7,9 @@ export class Paneview extends CompositeDisposable {
         var _a;
         super();
         this.paneItems = [];
+        this.skipAnimation = false;
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
-        this.skipAnimation = false;
         this._orientation = (_a = options.orientation) !== null && _a !== void 0 ? _a : Orientation.VERTICAL;
         this.element = document.createElement('div');
         this.element.className = 'pane-container';
@@ -109,9 +109,6 @@ export class Paneview extends CompositeDisposable {
         }
     }
     layout(size, orthogonalSize) {
-        // for (const paneItem of this.paneItems) {
-        //     paneItem.pane.orthogonalSize = orthogonalSize;
-        // }
         this.splitview.layout(size, orthogonalSize);
     }
     setupAnimation() {

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

@@ -63,6 +63,8 @@ export interface IPaneviewComponent extends IDisposable {
     readonly height: number;
     readonly minimumSize: number;
     readonly maximumSize: number;
+    readonly onDidAddView: Event<PaneviewPanel>;
+    readonly onDidRemoveView: Event<PaneviewPanel>;
     readonly onDidDrop: Event<PaneviewDropEvent2>;
     readonly onDidLayoutChange: Event<void>;
     addPanel(options: AddPaneviewCompponentOptions): IDisposable;

package/dist/styles/dockview.css

@@ -105,51 +105,6 @@
   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;
@@ -199,6 +154,51 @@
   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.1",
+  "version": "1.0.2",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -64,14 +64,14 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.67.2",
+    "rollup": "^2.68.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "typedoc": "^0.22.11"
+    "typedoc": "^0.22.12"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "8f49d29bdb3010ca0e8d5d84ccc50402565fd374"
+  "gitHead": "6ba801550244fdf4d1b6f6de1e3197bfcd0a773b"
 }