dockview-core
Version:
Zero dependency layout manager supporting tabs, groups, grids and splitviews for vanilla TypeScript
93 lines (92 loc) • 5.09 kB
JavaScript
import { getPanelData } from '../../../dnd/dataTransfer';
import { html5Backend, pointerBackend } from '../../../dnd/backend';
import { addDisposableListener, Emitter, Event } from '../../../events';
import { CompositeDisposable, Disposable } from '../../../lifecycle';
import { quasiPreventDefault } from '../../../dom';
import { GroupDragSource } from './groupDragSource';
export class VoidContainer extends CompositeDisposable {
get element() {
return this._element;
}
constructor(accessor, group) {
var _a, _b, _c, _d, _e, _f, _g;
super();
this.accessor = accessor;
this.group = group;
this._onDrop = new Emitter();
this.onDrop = this._onDrop.event;
this._onDragStart = new Emitter();
this.onDragStart = this._onDragStart.event;
this._element = document.createElement('div');
this._element.className = 'dv-void-container';
this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
this.accessor.doSetGroupActive(this.group);
}),
// Shift+pointerdown marks the event so the group's overlay
// drag (move-by-floating) sees it was consumed and doesn't
// fire alongside the HTML5 drag. quasiPreventDefault sets the
// marker without calling preventDefault — that would also
// block dragstart, which we need to fire.
addDisposableListener(this._element, 'pointerdown', (e) => {
if (e.shiftKey) {
quasiPreventDefault(e);
}
}, true));
// The drag-source (move-the-float disambiguation, redock ghost and
// group-level PanelTransfer) is shared with the floating title bar.
this.dragSource = new GroupDragSource({
element: this._element,
accessor: this.accessor,
group: this.group,
// The void container is the float's move handle only when there is
// no dedicated title bar. When a title bar moves the float (the
// overlay is `.dv-resize-container-with-titlebar`), the void
// container redocks with a plain drag, like a group in the grid.
isFloatingMoveHandle: () => !this._element.closest('.dv-resize-container-with-titlebar'),
});
const canDisplayOverlay = (event, position) => {
if (this.group.api.locked) {
// Dropping on the void/header space adds the panel
// to this group, which `locked` is meant to prevent
// (both `true` and `'no-drop-target'`).
return false;
}
const data = getPanelData();
if (data && this.accessor.id === data.viewId) {
return true;
}
return group.model.canDisplayOverlay(event, position, 'header_space');
};
this.dropTarget = html5Backend.createDropTarget(this._element, {
acceptedTargetZones: ['center'],
canDisplayOverlay,
getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
overlayModel: (_b = (_a = this.accessor).resolveDropOverlayModel) === null || _b === void 0 ? void 0 : _b.call(_a, 'header_space', this.group),
});
this.pointerDropTarget = pointerBackend.createDropTarget(this._element, {
acceptedTargetZones: ['center'],
canDisplayOverlay,
getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
overlayModel: (_d = (_c = this.accessor).resolveDropOverlayModel) === null || _d === void 0 ? void 0 : _d.call(_c, 'header_space', this.group),
});
this.onWillShowOverlay = Event.any(this.dropTarget.onWillShowOverlay, this.pointerDropTarget.onWillShowOverlay);
this.addDisposables(this.dragSource, this.dragSource.onDragStart((event) => {
this._onDragStart.fire(event);
}), this.dropTarget.onDrop((event) => {
this._onDrop.fire(event);
}), this.pointerDropTarget.onDrop((event) => {
this._onDrop.fire(event);
}), this.dropTarget, this.pointerDropTarget,
// Re-apply the app-supplied overlay model when options change.
// `{}` resets to the built-in default (all fields optional).
(_g = (_f = (_e = this.accessor).onDidOptionsChange) === null || _f === void 0 ? void 0 : _f.call(_e, () => {
var _a, _b, _c;
const model = (_c = (_b = (_a = this.accessor).resolveDropOverlayModel) === null || _b === void 0 ? void 0 : _b.call(_a, 'header_space', this.group)) !== null && _c !== void 0 ? _c : {};
this.dropTarget.setOverlayModel(model);
this.pointerDropTarget.setOverlayModel(model);
})) !== null && _g !== void 0 ? _g : Disposable.NONE);
}
updateDragAndDropState() {
this.dragSource.updateDragAndDropState();
}
}