dockview 0.0.28 → 1.0.0

package/dist/esm/paneview/draggablePaneviewPanel.js

@@ -1,72 +1,72 @@
-import { DragHandler } from '../dnd/abstractDragHandler';
-import { getPaneData, LocalSelectionTransfer, PaneTransfer, } from '../dnd/dataTransfer';
-import { Droptarget, Position } from '../dnd/droptarget';
-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);
-        this._onDidDrop = new Emitter();
-        this.onDidDrop = this._onDidDrop.event;
-        if (!disableDnd) {
-            this.initDragFeatures();
-        }
-    }
-    initDragFeatures() {
-        if (!this.header) {
-            return;
-        }
-        const id = this.id;
-        this.header.draggable = true;
-        this.handler = new (class PaneDragHandler extends DragHandler {
-            getData() {
-                LocalSelectionTransfer.getInstance().setData([new PaneTransfer('paneview', id)], PaneTransfer.prototype);
-                return {
-                    dispose: () => {
-                        LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
-                    },
-                };
-            }
-        })(this.header);
-        this.target = new Droptarget(this.element, {
-            validOverlays: 'vertical',
-            canDisplayOverlay: (event) => {
-                const data = getPaneData();
-                if (!data) {
-                    return true;
-                }
-                return data.paneId !== this.id;
-            },
-        });
-        this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
-            const data = getPaneData();
-            if (!data) {
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
-                return;
-            }
-            const containerApi = this.params
-                .containerApi;
-            const panelId = data.paneId;
-            const existingPanel = containerApi.getPanel(panelId);
-            if (!existingPanel) {
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
-                return;
-            }
-            const allPanels = containerApi.getPanels();
-            const fromIndex = allPanels.indexOf(existingPanel);
-            let toIndex = containerApi.getPanels().indexOf(this);
-            if (event.position === Position.Left ||
-                event.position === Position.Top) {
-                toIndex = Math.max(0, toIndex - 1);
-            }
-            if (event.position === Position.Right ||
-                event.position === Position.Bottom) {
-                if (fromIndex > toIndex) {
-                    toIndex++;
-                }
-                toIndex = Math.min(allPanels.length - 1, toIndex);
-            }
-            containerApi.movePanel(fromIndex, toIndex);
-        }));
-    }
-}
+import { DragHandler } from '../dnd/abstractDragHandler';
+import { getPaneData, LocalSelectionTransfer, PaneTransfer, } from '../dnd/dataTransfer';
+import { Droptarget, Position } from '../dnd/droptarget';
+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);
+        this._onDidDrop = new Emitter();
+        this.onDidDrop = this._onDidDrop.event;
+        if (!disableDnd) {
+            this.initDragFeatures();
+        }
+    }
+    initDragFeatures() {
+        if (!this.header) {
+            return;
+        }
+        const id = this.id;
+        this.header.draggable = true;
+        this.handler = new (class PaneDragHandler extends DragHandler {
+            getData() {
+                LocalSelectionTransfer.getInstance().setData([new PaneTransfer('paneview', id)], PaneTransfer.prototype);
+                return {
+                    dispose: () => {
+                        LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
+                    },
+                };
+            }
+        })(this.header);
+        this.target = new Droptarget(this.element, {
+            validOverlays: 'vertical',
+            canDisplayOverlay: (event) => {
+                const data = getPaneData();
+                if (!data) {
+                    return true;
+                }
+                return data.paneId !== this.id;
+            },
+        });
+        this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
+            const data = getPaneData();
+            if (!data) {
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
+                return;
+            }
+            const containerApi = this.params
+                .containerApi;
+            const panelId = data.paneId;
+            const existingPanel = containerApi.getPanel(panelId);
+            if (!existingPanel) {
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, getData: () => getPaneData() }));
+                return;
+            }
+            const allPanels = containerApi.getPanels();
+            const fromIndex = allPanels.indexOf(existingPanel);
+            let toIndex = containerApi.getPanels().indexOf(this);
+            if (event.position === Position.Left ||
+                event.position === Position.Top) {
+                toIndex = Math.max(0, toIndex - 1);
+            }
+            if (event.position === Position.Right ||
+                event.position === Position.Bottom) {
+                if (fromIndex > toIndex) {
+                    toIndex++;
+                }
+                toIndex = Math.min(allPanels.length - 1, toIndex);
+            }
+            containerApi.movePanel(fromIndex, toIndex);
+        }));
+    }
+}

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

@@ -1,25 +1,25 @@
-import { FrameworkFactory } from '../types';
-import { IPaneBodyPart, IPaneHeaderPart, PaneviewPanel } from './paneviewPanel';
-export interface PaneviewComponentOptions {
-    components?: {
-        [componentName: string]: {
-            new (id: string, componentName: string): PaneviewPanel;
-        };
-    };
-    frameworkComponents?: {
-        [componentName: string]: any;
-    };
-    headerComponents?: {
-        [componentName: string]: {
-            new (id: string, componentName: string): PaneviewPanel;
-        };
-    };
-    headerframeworkComponents?: {
-        [componentName: string]: any;
-    };
-    frameworkWrapper?: {
-        header: FrameworkFactory<IPaneHeaderPart>;
-        body: FrameworkFactory<IPaneBodyPart>;
-    };
-    disableDnd?: boolean;
-}
+import { FrameworkFactory } from '../types';
+import { IPaneBodyPart, IPaneHeaderPart, PaneviewPanel } from './paneviewPanel';
+export interface PaneviewComponentOptions {
+    components?: {
+        [componentName: string]: {
+            new (id: string, componentName: string): PaneviewPanel;
+        };
+    };
+    frameworkComponents?: {
+        [componentName: string]: any;
+    };
+    headerComponents?: {
+        [componentName: string]: {
+            new (id: string, componentName: string): PaneviewPanel;
+        };
+    };
+    headerframeworkComponents?: {
+        [componentName: string]: any;
+    };
+    frameworkWrapper?: {
+        header: FrameworkFactory<IPaneHeaderPart>;
+        body: FrameworkFactory<IPaneBodyPart>;
+    };
+    disableDnd?: boolean;
+}

package/dist/esm/paneview/options.js

@@ -1 +1 @@
-export {};
+export {};

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

@@ -1,38 +1,38 @@
-import { Orientation, ISplitViewDescriptor, Sizing } from '../splitview/core/splitview';
-import { CompositeDisposable, IDisposable } from '../lifecycle';
-import { Event } from '../events';
-import { PaneviewPanel } from './paneviewPanel';
-interface PaneItem {
-    pane: PaneviewPanel;
-    disposable: IDisposable;
-}
-export declare class Paneview extends CompositeDisposable implements IDisposable {
-    private element;
-    private splitview;
-    private paneItems;
-    private _orientation;
-    private animationTimer;
-    private readonly _onDidChange;
-    readonly onDidChange: Event<void>;
-    get onDidAddView(): Event<PaneviewPanel>;
-    get onDidRemoveView(): Event<PaneviewPanel>;
-    get minimumSize(): number;
-    get maximumSize(): number;
-    get orientation(): Orientation;
-    get size(): number;
-    get orthogonalSize(): number;
-    constructor(container: HTMLElement, options: {
-        orientation: Orientation;
-        descriptor?: ISplitViewDescriptor;
-    });
-    addPane(pane: PaneviewPanel, size?: number | Sizing, index?: number, skipLayout?: boolean): void;
-    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;
-    dispose(): void;
-}
-export {};
+import { Orientation, ISplitViewDescriptor, Sizing } from '../splitview/core/splitview';
+import { CompositeDisposable, IDisposable } from '../lifecycle';
+import { Event } from '../events';
+import { PaneviewPanel } from './paneviewPanel';
+interface PaneItem {
+    pane: PaneviewPanel;
+    disposable: IDisposable;
+}
+export declare class Paneview extends CompositeDisposable implements IDisposable {
+    private element;
+    private splitview;
+    private paneItems;
+    private _orientation;
+    private animationTimer;
+    private readonly _onDidChange;
+    readonly onDidChange: Event<void>;
+    get onDidAddView(): Event<PaneviewPanel>;
+    get onDidRemoveView(): Event<PaneviewPanel>;
+    get minimumSize(): number;
+    get maximumSize(): number;
+    get orientation(): Orientation;
+    get size(): number;
+    get orthogonalSize(): number;
+    constructor(container: HTMLElement, options: {
+        orientation: Orientation;
+        descriptor?: ISplitViewDescriptor;
+    });
+    addPane(pane: PaneviewPanel, size?: number | Sizing, index?: number, skipLayout?: boolean): void;
+    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;
+    dispose(): void;
+}
+export {};

package/dist/esm/paneview/paneview.js

@@ -1,144 +1,144 @@
-import { Splitview, Orientation, } from '../splitview/core/splitview';
-import { CompositeDisposable } from '../lifecycle';
-import { Emitter } from '../events';
-import { addClasses, removeClasses } from '../dom';
-export class Paneview extends CompositeDisposable {
-    constructor(container, options) {
-        var _a;
-        super();
-        this.paneItems = [];
-        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';
-        container.appendChild(this.element);
-        this.splitview = new Splitview(this.element, {
-            orientation: this._orientation,
-            proportionalLayout: false,
-            descriptor: options.descriptor,
-        });
-        // if we've added views from the descriptor we need to
-        // add the panes to our Pane array and setup animation
-        this.getPanes().forEach((pane, index) => {
-            const disposable = new CompositeDisposable(pane.onDidChangeExpansionState(() => {
-                this.setupAnimation();
-                this._onDidChange.fire(undefined);
-            }));
-            const paneItem = {
-                pane,
-                disposable: {
-                    dispose: () => {
-                        disposable.dispose();
-                    },
-                },
-            };
-            this.paneItems.push(paneItem);
-            pane.orthogonalSize = this.splitview.orthogonalSize;
-        });
-        this.addDisposables(this.splitview.onDidSashEnd(() => {
-            this._onDidChange.fire(undefined);
-        }), this.splitview.onDidAddView(() => {
-            this._onDidChange.fire();
-        }), this.splitview.onDidRemoveView(() => {
-            this._onDidChange.fire();
-        }));
-    }
-    get onDidAddView() {
-        return this.splitview.onDidAddView;
-    }
-    get onDidRemoveView() {
-        return this.splitview.onDidRemoveView;
-    }
-    get minimumSize() {
-        return this.splitview.minimumSize;
-    }
-    get maximumSize() {
-        return this.splitview.maximumSize;
-    }
-    get orientation() {
-        return this.splitview.orientation;
-    }
-    get size() {
-        return this.splitview.size;
-    }
-    get orthogonalSize() {
-        return this.splitview.orthogonalSize;
-    }
-    addPane(pane, size, index = this.splitview.length, skipLayout = false) {
-        const disposable = pane.onDidChangeExpansionState(() => {
-            this.setupAnimation();
-            this._onDidChange.fire(undefined);
-        });
-        const paneItem = {
-            pane,
-            disposable: {
-                dispose: () => {
-                    disposable.dispose();
-                },
-            },
-        };
-        this.paneItems.splice(index, 0, paneItem);
-        pane.orthogonalSize = this.splitview.orthogonalSize;
-        this.splitview.addView(pane, size, index, skipLayout);
-    }
-    getViewSize(index) {
-        return this.splitview.getViewSize(index);
-    }
-    getPanes() {
-        return this.splitview.getViews();
-    }
-    removePane(index) {
-        const paneItem = this.paneItems.splice(index, 1)[0];
-        this.splitview.removeView(index);
-        paneItem.disposable.dispose();
-        return paneItem;
-    }
-    moveView(from, to) {
-        if (from === to) {
-            return;
-        }
-        const view = this.removePane(from);
-        this.skipAnimation = true;
-        try {
-            this.addPane(view.pane, view.pane.size, to, false);
-        }
-        finally {
-            this.skipAnimation = false;
-        }
-    }
-    layout(size, orthogonalSize) {
-        // for (const paneItem of this.paneItems) {
-        //     paneItem.pane.orthogonalSize = orthogonalSize;
-        // }
-        this.splitview.layout(size, orthogonalSize);
-    }
-    setupAnimation() {
-        if (this.skipAnimation) {
-            return;
-        }
-        if (this.animationTimer) {
-            clearTimeout(this.animationTimer);
-            this.animationTimer = undefined;
-        }
-        addClasses(this.element, 'animated');
-        this.animationTimer = setTimeout(() => {
-            this.animationTimer = undefined;
-            removeClasses(this.element, 'animated');
-        }, 200);
-    }
-    dispose() {
-        super.dispose();
-        this.splitview.dispose();
-        if (this.animationTimer) {
-            clearTimeout(this.animationTimer);
-            this.animationTimer = undefined;
-        }
-        this.paneItems.forEach((paneItem) => {
-            paneItem.disposable.dispose();
-        });
-        this.paneItems = [];
-        this.element.remove();
-    }
-}
+import { Splitview, Orientation, } from '../splitview/core/splitview';
+import { CompositeDisposable } from '../lifecycle';
+import { Emitter } from '../events';
+import { addClasses, removeClasses } from '../dom';
+export class Paneview extends CompositeDisposable {
+    constructor(container, options) {
+        var _a;
+        super();
+        this.paneItems = [];
+        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';
+        container.appendChild(this.element);
+        this.splitview = new Splitview(this.element, {
+            orientation: this._orientation,
+            proportionalLayout: false,
+            descriptor: options.descriptor,
+        });
+        // if we've added views from the descriptor we need to
+        // add the panes to our Pane array and setup animation
+        this.getPanes().forEach((pane, index) => {
+            const disposable = new CompositeDisposable(pane.onDidChangeExpansionState(() => {
+                this.setupAnimation();
+                this._onDidChange.fire(undefined);
+            }));
+            const paneItem = {
+                pane,
+                disposable: {
+                    dispose: () => {
+                        disposable.dispose();
+                    },
+                },
+            };
+            this.paneItems.push(paneItem);
+            pane.orthogonalSize = this.splitview.orthogonalSize;
+        });
+        this.addDisposables(this.splitview.onDidSashEnd(() => {
+            this._onDidChange.fire(undefined);
+        }), this.splitview.onDidAddView(() => {
+            this._onDidChange.fire();
+        }), this.splitview.onDidRemoveView(() => {
+            this._onDidChange.fire();
+        }));
+    }
+    get onDidAddView() {
+        return this.splitview.onDidAddView;
+    }
+    get onDidRemoveView() {
+        return this.splitview.onDidRemoveView;
+    }
+    get minimumSize() {
+        return this.splitview.minimumSize;
+    }
+    get maximumSize() {
+        return this.splitview.maximumSize;
+    }
+    get orientation() {
+        return this.splitview.orientation;
+    }
+    get size() {
+        return this.splitview.size;
+    }
+    get orthogonalSize() {
+        return this.splitview.orthogonalSize;
+    }
+    addPane(pane, size, index = this.splitview.length, skipLayout = false) {
+        const disposable = pane.onDidChangeExpansionState(() => {
+            this.setupAnimation();
+            this._onDidChange.fire(undefined);
+        });
+        const paneItem = {
+            pane,
+            disposable: {
+                dispose: () => {
+                    disposable.dispose();
+                },
+            },
+        };
+        this.paneItems.splice(index, 0, paneItem);
+        pane.orthogonalSize = this.splitview.orthogonalSize;
+        this.splitview.addView(pane, size, index, skipLayout);
+    }
+    getViewSize(index) {
+        return this.splitview.getViewSize(index);
+    }
+    getPanes() {
+        return this.splitview.getViews();
+    }
+    removePane(index) {
+        const paneItem = this.paneItems.splice(index, 1)[0];
+        this.splitview.removeView(index);
+        paneItem.disposable.dispose();
+        return paneItem;
+    }
+    moveView(from, to) {
+        if (from === to) {
+            return;
+        }
+        const view = this.removePane(from);
+        this.skipAnimation = true;
+        try {
+            this.addPane(view.pane, view.pane.size, to, false);
+        }
+        finally {
+            this.skipAnimation = false;
+        }
+    }
+    layout(size, orthogonalSize) {
+        // for (const paneItem of this.paneItems) {
+        //     paneItem.pane.orthogonalSize = orthogonalSize;
+        // }
+        this.splitview.layout(size, orthogonalSize);
+    }
+    setupAnimation() {
+        if (this.skipAnimation) {
+            return;
+        }
+        if (this.animationTimer) {
+            clearTimeout(this.animationTimer);
+            this.animationTimer = undefined;
+        }
+        addClasses(this.element, 'animated');
+        this.animationTimer = setTimeout(() => {
+            this.animationTimer = undefined;
+            removeClasses(this.element, 'animated');
+        }, 200);
+    }
+    dispose() {
+        super.dispose();
+        this.splitview.dispose();
+        if (this.animationTimer) {
+            clearTimeout(this.animationTimer);
+            this.animationTimer = undefined;
+        }
+        this.paneItems.forEach((paneItem) => {
+            paneItem.disposable.dispose();
+        });
+        this.paneItems = [];
+        this.element.remove();
+    }
+}