dockview/dist/esm/paneview/draggablePaneviewPanel.js

Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support

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