dockview 1.0.1 → 1.1.0

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;
@@ -22,7 +26,7 @@ export class SplitviewComponent extends CompositeDisposable {
             options.frameworkComponents = {};
         }
         this.splitview = new Splitview(this.element, options);
-        this.addDisposables(this._disposable);
+        this.addDisposables(this._disposable, this._onDidAddView, this._onDidRemoveView, this._onDidLayoutChange);
     }
     get options() {
         return this._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/esm/splitview/splitviewPanel.d.ts

@@ -36,12 +36,7 @@ export declare abstract class SplitviewPanel extends BasePanelView<SplitviewPane
         maximumSize: number | undefined;
         id: string;
         component: string;
-        params?: {
-            [key: string]: any;
-        } | undefined;
-        state?: {
-            [key: string]: any;
-        } | undefined;
+        params?: Record<string, any> | undefined;
     };
     private updateConstraints;
 }

package/dist/esm/splitview/splitviewPanel.js

@@ -12,12 +12,14 @@ export class SplitviewPanel extends BasePanelView {
         this._snap = false;
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
-        this.addDisposables(this.api.onVisibilityChange((event) => {
+        this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
             const { isVisible } = event;
-            const { containerApi } = this.params;
+            const { containerApi } = this
+                ._params;
             containerApi.setVisible(this, isVisible);
         }), this.api.onActiveChange(() => {
-            const { containerApi } = this.params;
+            const { containerApi } = this
+                ._params;
             containerApi.setActive(this);
         }), this.api.onDidConstraintsChangeInternal((event) => {
             if (typeof event.minimumSize === 'number' ||

package/dist/styles/dockview.css

@@ -3,7 +3,6 @@
   --dv-tabs-and-actions-container-font-size: 13px;
   --dv-tabs-and-actions-container-height: 35px;
   --dv-tab-close-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
-  --dv-tab-dirty-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg>');
   --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
   --dv-drag-over-border-color: white;
   --dv-tabs-container-scrollbar-color: #888;
@@ -27,7 +26,6 @@
   --dv-tabs-and-actions-container-font-size: 13px;
   --dv-tabs-and-actions-container-height: 35px;
   --dv-tab-close-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
-  --dv-tab-dirty-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg>');
   --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
   --dv-drag-over-border-color: white;
   --dv-tabs-container-scrollbar-color: #888;
@@ -51,7 +49,6 @@
   --dv-tabs-and-actions-container-font-size: 13px;
   --dv-tabs-and-actions-container-height: 35px;
   --dv-tab-close-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
-  --dv-tab-dirty-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg>');
   --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
   --dv-drag-over-border-color: white;
   --dv-tabs-container-scrollbar-color: #888;
@@ -357,6 +354,10 @@
   width: 1px;
   height: 100%;
 }
+.dockview-react-part {
+  height: 100%;
+  width: 100%;
+}
 .split-view-container {
   position: relative;
   overflow: hidden;
@@ -470,7 +471,7 @@
 .tab.active-tab > .default-tab .tab-action {
   visibility: visible;
 }
-.tab.inactive-tab > .default-tab .tab-action:not(.dirty) {
+.tab.inactive-tab > .default-tab .tab-action {
   visibility: hidden;
 }
 .tab.inactive-tab > .default-tab:hover .tab-action {
@@ -515,11 +516,6 @@
 .tab .default-tab .action-container .tab-list .tab-action.disable-close {
   display: none;
 }
-.tab .default-tab .action-container .tab-list .tab-action.dirty:not(:hover) {
-  display: block;
-  -webkit-mask: var(--dv-tab-dirty-icon) 50% 50%/60% 60% no-repeat;
-  mask: var(--dv-tab-dirty-icon) 50% 50%/60% 60% no-repeat;
-}
 .watermark {
   display: flex;
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "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": "1816476fbbd7c1ec674f20d0df4f443f36124660"
 }

package/dist/cjs/functions.d.ts

@@ -1 +0,0 @@
-export declare function debounce<T extends Function>(cb: T, wait: number): T;

package/dist/cjs/functions.js

@@ -1,42 +0,0 @@
-"use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.debounce = void 0;
-function debounce(cb, wait) {
-    var timeout;
-    var callable = function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        clearTimeout(timeout);
-        timeout = setTimeout(function () { return cb.apply(void 0, __spreadArray([], __read(args), false)); }, wait);
-    };
-    return callable;
-}
-exports.debounce = debounce;
-//# sourceMappingURL=functions.js.map

package/dist/cjs/functions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"functions.js","sourceRoot":"","sources":["../../src/functions.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,QAAQ,CAAqB,EAAK,EAAE,IAAY;IAC5D,IAAI,OAAY,CAAC;IAEjB,IAAM,QAAQ,GAAG;QAAC,cAAY;aAAZ,UAAY,EAAZ,qBAAY,EAAZ,IAAY;YAAZ,yBAAY;;QAC1B,YAAY,CAAC,OAAO,CAAC,CAAC;QACtB,OAAO,GAAG,UAAU,CAAC,cAAM,OAAA,EAAE,wCAAI,IAAI,YAAV,CAAW,EAAE,IAAI,CAAC,CAAC;IAClD,CAAC,CAAC;IACF,OAAgB,QAAS,CAAC;AAC9B,CAAC;AARD,4BAQC"}

package/dist/cjs/groupview/panel/hostedPanel.d.ts

@@ -1,22 +0,0 @@
-import { IDisposable } from '../../lifecycle';
-import { IGroupPanel } from '../groupPanel';
-import { IRenderable } from '../types';
-export interface HostedPanelOptions {
-    id: string;
-    parent?: HTMLElement;
-}
-export declare class HostedPanel implements IRenderable, IDisposable {
-    private readonly panel;
-    private readonly options;
-    private readonly _element;
-    get element(): HTMLElement;
-    get id(): string;
-    constructor(panel: IGroupPanel, options: HostedPanelOptions);
-    hide(): void;
-    show(): void;
-    layout(element: HTMLElement, dimension?: {
-        width: number;
-        height: number;
-    }): void;
-    dispose(): void;
-}

package/dist/cjs/groupview/panel/hostedPanel.js

@@ -1,57 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HostedPanel = void 0;
-var HostedPanel = /** @class */ (function () {
-    function HostedPanel(panel, options) {
-        this.panel = panel;
-        this.options = options;
-        if (!options.parent) {
-            options.parent = document.getElementById('app');
-            options.parent.style.position = 'relative';
-        }
-        this._element = document.createElement('div');
-        this._element.style.visibility = 'hidden';
-        this._element.style.overflow = 'hidden';
-        // this._element.style.pointerEvents = 'none';
-        this._element.id = "webivew-".concat(options.id);
-        options.parent.appendChild(this._element);
-    }
-    Object.defineProperty(HostedPanel.prototype, "element", {
-        get: function () {
-            return this._element;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(HostedPanel.prototype, "id", {
-        get: function () {
-            return this.panel.id;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    HostedPanel.prototype.hide = function () {
-        this._element.style.visibility = 'hidden';
-    };
-    HostedPanel.prototype.show = function () {
-        this._element.style.visibility = 'visible';
-    };
-    HostedPanel.prototype.layout = function (element, dimension) {
-        if (!this.element || !this.element.parentElement) {
-            return;
-        }
-        var frameRect = element.getBoundingClientRect();
-        var containerRect = this.element.parentElement.getBoundingClientRect();
-        this.element.style.position = 'absolute';
-        this.element.style.top = "".concat(frameRect.top - containerRect.top, "px");
-        this.element.style.left = "".concat(frameRect.left - containerRect.left, "px");
-        this.element.style.width = "".concat(dimension ? dimension.width : frameRect.width, "px");
-        this.element.style.height = "".concat(dimension ? dimension.height : frameRect.height, "px");
-    };
-    HostedPanel.prototype.dispose = function () {
-        this._element.remove();
-    };
-    return HostedPanel;
-}());
-exports.HostedPanel = HostedPanel;
-//# sourceMappingURL=hostedPanel.js.map

package/dist/cjs/groupview/panel/hostedPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hostedPanel.js","sourceRoot":"","sources":["../../../../src/groupview/panel/hostedPanel.ts"],"names":[],"mappings":";;;AASA;IAWI,qBACqB,KAAkB,EAClB,OAA2B;QAD3B,UAAK,GAAL,KAAK,CAAa;QAClB,YAAO,GAAP,OAAO,CAAoB;QAE5C,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;YACjB,OAAO,CAAC,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAgB,CAAC;YAC/D,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;SAC9C;QAED,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;QAC1C,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACxC,8CAA8C;QAC9C,IAAI,CAAC,QAAQ,CAAC,EAAE,GAAG,kBAAW,OAAO,CAAC,EAAE,CAAE,CAAC;QAE3C,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC9C,CAAC;IAxBD,sBAAI,gCAAO;aAAX;YACI,OAAO,IAAI,CAAC,QAAQ,CAAC;QACzB,CAAC;;;OAAA;IAED,sBAAI,2BAAE;aAAN;YACI,OAAO,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,CAAC;;;OAAA;IAoBD,0BAAI,GAAJ;QACI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;IAC9C,CAAC;IAED,0BAAI,GAAJ;QACI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;IAC/C,CAAC;IAED,4BAAM,GAAN,UACI,OAAoB,EACpB,SAA6C;QAE7C,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE;YAC9C,OAAO;SACV;QACD,IAAM,SAAS,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAClD,IAAM,aAAa,GACf,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC;QACvD,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QACzC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,UAAG,SAAS,CAAC,GAAG,GAAG,aAAa,CAAC,GAAG,OAAI,CAAC;QAClE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,UAAG,SAAS,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,OAAI,CAAC;QACrE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,UACvB,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,OAC7C,CAAC;QACL,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,UACxB,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,OAC/C,CAAC;IACT,CAAC;IAED,6BAAO,GAAP;QACI,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;IAC3B,CAAC;IACL,kBAAC;AAAD,CAAC,AA7DD,IA6DC;AA7DY,kCAAW"}

package/dist/cjs/json.d.ts

@@ -1 +0,0 @@
-export declare function tryParseJSON(text: string, reviver?: (this: any, key: string, value: any) => any): any | undefined;

package/dist/cjs/json.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tryParseJSON = void 0;
-function tryParseJSON(text, reviver) {
-    try {
-        return JSON.parse(text, reviver);
-    }
-    catch (err) {
-        console.warn('failed to parse JSON');
-        return undefined;
-    }
-}
-exports.tryParseJSON = tryParseJSON;
-//# sourceMappingURL=json.js.map

package/dist/cjs/json.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"json.js","sourceRoot":"","sources":["../../src/json.ts"],"names":[],"mappings":";;;AAIA,SAAgB,YAAY,CACxB,IAAY,EACZ,OAAqD;IAErD,IAAI;QACA,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,CAAM,CAAC;KACzC;IAAC,OAAO,GAAG,EAAE;QACV,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;QACrC,OAAO,SAAS,CAAC;KACpB;AACL,CAAC;AAVD,oCAUC"}

package/dist/esm/functions.d.ts

@@ -1 +0,0 @@
-export declare function debounce<T extends Function>(cb: T, wait: number): T;

package/dist/esm/functions.js

@@ -1,8 +0,0 @@
-export function debounce(cb, wait) {
-    let timeout;
-    const callable = (...args) => {
-        clearTimeout(timeout);
-        timeout = setTimeout(() => cb(...args), wait);
-    };
-    return callable;
-}

package/dist/esm/groupview/panel/hostedPanel.d.ts

@@ -1,22 +0,0 @@
-import { IDisposable } from '../../lifecycle';
-import { IGroupPanel } from '../groupPanel';
-import { IRenderable } from '../types';
-export interface HostedPanelOptions {
-    id: string;
-    parent?: HTMLElement;
-}
-export declare class HostedPanel implements IRenderable, IDisposable {
-    private readonly panel;
-    private readonly options;
-    private readonly _element;
-    get element(): HTMLElement;
-    get id(): string;
-    constructor(panel: IGroupPanel, options: HostedPanelOptions);
-    hide(): void;
-    show(): void;
-    layout(element: HTMLElement, dimension?: {
-        width: number;
-        height: number;
-    }): void;
-    dispose(): void;
-}

package/dist/esm/groupview/panel/hostedPanel.js

@@ -1,43 +0,0 @@
-export class HostedPanel {
-    constructor(panel, options) {
-        this.panel = panel;
-        this.options = options;
-        if (!options.parent) {
-            options.parent = document.getElementById('app');
-            options.parent.style.position = 'relative';
-        }
-        this._element = document.createElement('div');
-        this._element.style.visibility = 'hidden';
-        this._element.style.overflow = 'hidden';
-        // this._element.style.pointerEvents = 'none';
-        this._element.id = `webivew-${options.id}`;
-        options.parent.appendChild(this._element);
-    }
-    get element() {
-        return this._element;
-    }
-    get id() {
-        return this.panel.id;
-    }
-    hide() {
-        this._element.style.visibility = 'hidden';
-    }
-    show() {
-        this._element.style.visibility = 'visible';
-    }
-    layout(element, dimension) {
-        if (!this.element || !this.element.parentElement) {
-            return;
-        }
-        const frameRect = element.getBoundingClientRect();
-        const containerRect = this.element.parentElement.getBoundingClientRect();
-        this.element.style.position = 'absolute';
-        this.element.style.top = `${frameRect.top - containerRect.top}px`;
-        this.element.style.left = `${frameRect.left - containerRect.left}px`;
-        this.element.style.width = `${dimension ? dimension.width : frameRect.width}px`;
-        this.element.style.height = `${dimension ? dimension.height : frameRect.height}px`;
-    }
-    dispose() {
-        this._element.remove();
-    }
-}

package/dist/esm/json.d.ts

@@ -1 +0,0 @@
-export declare function tryParseJSON(text: string, reviver?: (this: any, key: string, value: any) => any): any | undefined;

package/dist/esm/json.js

@@ -1,9 +0,0 @@
-export function tryParseJSON(text, reviver) {
-    try {
-        return JSON.parse(text, reviver);
-    }
-    catch (err) {
-        console.warn('failed to parse JSON');
-        return undefined;
-    }
-}