dockview 1.0.3 → 1.3.0

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;
@@ -118,25 +115,26 @@
 }
 .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;
+  will-change: transform;
+  pointer-events: none;
 }
-.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.left {
+  transform: translateX(-25%) scaleX(50%);
 }
 .drop-target > .drop-target-dropzone > .drop-target-selection.right {
-  transform: translate(100%, 0%);
+  transform: translateX(25%) scaleX(50%);
 }
-.drop-target > .drop-target-dropzone > .drop-target-selection.bottom {
-  transform: translate(0%, 100%);
+.drop-target > .drop-target-dropzone > .drop-target-selection.top {
+  transform: translateY(-25%) scaleY(50%);
 }
-.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.bottom {
+  transform: translateY(25%) scaleY(50%);
 }
 .drop-target > .drop-target-dropzone > .drop-target-selection.small-top {
   border-top: 1px solid var(--dv-drag-over-border-color);
@@ -357,6 +355,10 @@
   width: 1px;
   height: 100%;
 }
+.dockview-react-part {
+  height: 100%;
+  width: 100%;
+}
 .split-view-container {
   position: relative;
   overflow: hidden;
@@ -470,7 +472,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 +517,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.3",
+  "version": "1.3.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",
@@ -55,23 +55,23 @@
   "author": "https://github.com/mathuo",
   "license": "MIT",
   "devDependencies": {
-    "@rollup/plugin-typescript": "^8.3.0",
-    "@testing-library/react": "^12.1.3",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@rollup/plugin-typescript": "^8.3.2",
+    "@testing-library/react": "^13.1.0",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.1",
     "cross-env": "^7.0.3",
-    "postcss": "^8.4.6",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "postcss": "^8.4.12",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.68.0",
+    "rollup": "^2.70.2",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "typedoc": "^0.22.12"
+    "typedoc": "^0.22.15"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "0b051157332ff2611a95f53a39e4643cac70f020"
+  "gitHead": "bbf59bd31179a6a386a18433cb5dfb32e6b837d3"
 }

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;
-    }
-}