dockview-core
Version:
Zero dependency layout manager supporting tabs, groups, grids and splitviews for vanilla TypeScript
83 lines (82 loc) • 3.61 kB
JavaScript
import { Event } from '../events';
import { html5Backend, pointerBackend } from '../dnd/backend';
import { getPanelData } from '../dnd/dataTransfer';
import { defineModule } from './modules';
const DEFAULT_ROOT_OVERLAY_MODEL = {
activationSize: { type: 'pixels', value: 10 },
size: { type: 'pixels', value: 20 },
};
export class RootDropTargetService {
constructor(host) {
const canDisplayOverlay = (event, position) => {
const data = getPanelData();
if (data) {
if (data.viewId !== host.id) {
return false;
}
if (position === 'center') {
// center drop target only allowed if no panels in primary
// grid; floating panels are allowed
return host.isGridEmpty();
}
return true;
}
if (position === 'center' && !host.isGridEmpty()) {
// for external events only show the four-corner drag overlays,
// disable center so external drag events can fall through to
// the group and panel drop target handlers
return false;
}
return host.dispatchUnhandledDragOver(event, position);
};
const overlayModel = typeof host.options.dndEdges === 'object' &&
host.options.dndEdges !== null
? host.options.dndEdges
: DEFAULT_ROOT_OVERLAY_MODEL;
this._html5Target = html5Backend.createDropTarget(host.element, {
className: 'dv-drop-target-edge',
canDisplayOverlay,
acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
overlayModel,
getOverrideTarget: () => host.rootDropTargetOverrideTarget(),
});
this._pointerTarget = pointerBackend.createDropTarget(host.element, {
className: 'dv-drop-target-edge',
canDisplayOverlay,
acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
overlayModel,
getOverrideTarget: () => host.rootDropTargetOverrideTarget(),
});
this.onWillShowOverlay = Event.any(this._html5Target.onWillShowOverlay, this._pointerTarget.onWillShowOverlay);
this.onDrop = Event.any(this._html5Target.onDrop, this._pointerTarget.onDrop);
// Apply initial-state options now that the targets exist; setOptions
// handles dndEdges (disable + overlay model) and late changes.
this.setOptions(host.options);
}
setOptions(options) {
if ('dndEdges' in options) {
const disabled = typeof options.dndEdges === 'boolean' &&
options.dndEdges === false;
this._html5Target.disabled = disabled;
this._pointerTarget.disabled = disabled;
if (typeof options.dndEdges === 'object' &&
options.dndEdges !== null) {
this._html5Target.setOverlayModel(options.dndEdges);
this._pointerTarget.setOverlayModel(options.dndEdges);
}
else {
this._html5Target.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
this._pointerTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
}
}
}
dispose() {
this._html5Target.dispose();
this._pointerTarget.dispose();
}
}
export const RootDropTargetModule = defineModule({
name: 'RootDropTarget',
serviceKey: 'rootDropTargetService',
create: (host) => new RootDropTargetService(host),
});