dockview 1.0.0 → 1.0.3

package/dist/dockview.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.0.0
+ * @version 1.0.3
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -27,25 +27,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 
-    function runFootnote() {
-        var _a, _b;
-        const DOCKVIEW_SUPPRESS_WATERMARK = 'DOCKVIEW_WATERMARK_SUPPRESSED';
-        const isTest = ((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) === 'test';
-        if (isTest) {
-            return; // don't spam people tests
-        }
-        const isSuppressed = !!window[DOCKVIEW_SUPPRESS_WATERMARK];
-        if (!isSuppressed) {
-            console.log([
-                'dockview: https://github.com/mathuo/dockview for examples and documentation',
-                'dockview: https://www.npmjs.com/package/dockview',
-                `dockview: To suppress this message set window.${DOCKVIEW_SUPPRESS_WATERMARK}=1 before importing the dockview package`,
-                '',
-            ].join('\n'));
-        }
-    }
-    runFootnote();
-
     exports.Event = void 0;
     (function (Event) {
         Event.any = (...children) => {
@@ -116,6 +97,24 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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;
@@ -298,6 +297,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get onDidLayoutChange() {
             return this.component.onDidLayoutChange;
         }
+        get onDidAddView() {
+            return this.component.onDidAddView;
+        }
+        get onDidRemoveView() {
+            return this.component.onDidRemoveView;
+        }
         get orientation() {
             return this.component.orientation;
         }
@@ -360,6 +365,23 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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();
         }
@@ -882,7 +904,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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) => {
@@ -1524,9 +1546,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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';
@@ -1626,9 +1648,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         layout(size, orthogonalSize) {
-            // for (const paneItem of this.paneItems) {
-            //     paneItem.pane.orthogonalSize = orthogonalSize;
-            // }
             this.splitview.layout(size, orthogonalSize);
         }
         setupAnimation() {
@@ -1812,7 +1831,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     const state = this._state;
                     this.removeDropTarget();
                     if (state) {
-                        this._onDrop.fire({ position: state, event: e });
+                        this._onDrop.fire({ position: state, nativeEvent: e });
                     }
                 },
             }));
@@ -2475,7 +2494,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             parent.removeChild(index, sizing);
             if (parent.children.length === 0) {
-                // throw new Error('Invalid grid state');
                 return node.view;
             }
             if (parent.children.length > 1) {
@@ -2776,7 +2794,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             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) => {
@@ -2898,7 +2916,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }), tabToAdd.onDrop((event) => {
                 this._onDrop.fire({
-                    event: event.event,
+                    event: event.nativeEvent,
                     index: this.tabs.findIndex((x) => x.value === tabToAdd),
                 });
             }));
@@ -2974,9 +2992,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }), 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() {
@@ -3394,11 +3412,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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,
@@ -3408,15 +3423,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         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() {
@@ -4422,7 +4433,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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);
@@ -5192,6 +5205,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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;
@@ -5217,7 +5234,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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;
@@ -5391,6 +5408,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         });
                         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 };
                     }),
                 },
@@ -5509,7 +5530,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
 
     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 });
@@ -5525,6 +5546,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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');
@@ -5592,6 +5614,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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 });
         }
@@ -5689,7 +5718,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
 
     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) {
@@ -5812,6 +5841,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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 = {};
@@ -5825,17 +5858,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             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;
@@ -6015,6 +6042,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             });
                             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 };
                     }),
                 },
@@ -6520,6 +6551,22 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 dockview.dispose();
             };
         }, []);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.updateOptions({
+                frameworkComponents: props.components,
+            });
+        }, [props.components]);
+        React__namespace.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+            dockviewRef.current.updateOptions({
+                frameworkTabComponents: props.tabComponents,
+            });
+        }, [props.tabComponents]);
         React__namespace.useEffect(() => {
             if (!props.onTabContextMenu || !dockviewRef.current) {
                 return () => {
@@ -6654,6 +6701,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 splitview.dispose();
             };
         }, []);
+        React__namespace.useEffect(() => {
+            if (!splitviewRef.current) {
+                return;
+            }
+            splitviewRef.current.updateOptions({
+                frameworkComponents: props.components,
+            });
+        }, [props.components]);
         return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
     });
     SplitviewReact.displayName = 'SplitviewComponent';
@@ -6724,6 +6779,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 gridview.dispose();
             };
         }, []);
+        React__namespace.useEffect(() => {
+            if (!gridviewRef.current) {
+                return;
+            }
+            gridviewRef.current.updateOptions({
+                frameworkComponents: props.components,
+            });
+        }, [props.components]);
         return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
     });
     GridviewReact.displayName = 'GridviewComponent';
@@ -6814,14 +6877,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             };
         }, []);
         React__namespace.useEffect(() => {
-            var _a;
-            (_a = paneviewRef.current) === null || _a === void 0 ? void 0 : _a.updateOptions({
+            if (!paneviewRef.current) {
+                return;
+            }
+            paneviewRef.current.updateOptions({
                 frameworkComponents: props.components,
             });
         }, [props.components]);
         React__namespace.useEffect(() => {
-            var _a;
-            (_a = paneviewRef.current) === null || _a === void 0 ? void 0 : _a.updateOptions({
+            if (!paneviewRef.current) {
+                return;
+            }
+            paneviewRef.current.updateOptions({
                 headerframeworkComponents: props.headerComponents,
             });
         }, [props.headerComponents]);
@@ -6880,6 +6947,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     exports.SplitviewPanel = SplitviewPanel;
     exports.SplitviewReact = SplitviewReact;
     exports.Tab = Tab$1;
+    exports.TickDelayedEvent = TickDelayedEvent;
     exports.addDisposableListener = addDisposableListener;
     exports.addDisposableWindowListener = addDisposableWindowListener;
     exports.extractData = extractData;