dockview-core
Version:
Zero dependency layout manager supporting tabs, groups, grids and splitviews for vanilla TypeScript
172 lines (171 loc) • 8.09 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.pointerBackend = exports.html5Backend = void 0;
var events_1 = require("../events");
var lifecycle_1 = require("../lifecycle");
var droptarget_1 = require("./droptarget");
var ghost_1 = require("./ghost");
var pointerDropTarget_1 = require("./pointer/pointerDropTarget");
var pointerDragSource_1 = require("./pointer/pointerDragSource");
var pointerGhost_1 = require("./pointer/pointerGhost");
var dom_1 = require("../dom");
/**
* HTML5 drag source. Listens for the native `dragstart` event, calls
* `getData` to populate transfer, optionally renders the ghost via
* `setDragImage`, fires `onDragStart` / `onDragEnd`, and tears down the
* transfer disposer after `dragend`.
*/
var Html5DragSource = /** @class */ (function (_super) {
__extends(Html5DragSource, _super);
function Html5DragSource(el, opts) {
var _this = _super.call(this) || this;
_this.el = el;
_this.opts = opts;
_this._dataDisposable = new lifecycle_1.MutableDisposable();
_this._pointerEventsDisposable = new lifecycle_1.MutableDisposable();
_this._disabled = !!opts.disabled;
_this.addDisposables(_this._dataDisposable, _this._pointerEventsDisposable, (0, events_1.addDisposableListener)(_this.el, 'dragstart', function (event) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
if (event.defaultPrevented ||
_this._disabled ||
((_b = (_a = _this.opts).isCancelled) === null || _b === void 0 ? void 0 : _b.call(_a, event))) {
event.preventDefault();
return;
}
// Iframes capture pointermove once the cursor enters them,
// which freezes drag tracking from the parent window's
// POV. Shield the source's owning document so popout-window
// drags shield the popout, not the main window.
var iframes = (0, dom_1.disableIframePointEvents)((_c = _this.el.ownerDocument) !== null && _c !== void 0 ? _c : document);
_this._pointerEventsDisposable.value = {
dispose: function () { return iframes.release(); },
};
_this.el.classList.add('dv-dragged');
setTimeout(function () { return _this.el.classList.remove('dv-dragged'); }, 0);
_this._dataDisposable.value = _this.opts.getData(event);
var ghost = (_e = (_d = _this.opts).createGhost) === null || _e === void 0 ? void 0 : _e.call(_d, event);
if (ghost && event.dataTransfer) {
(0, ghost_1.addGhostImage)(event.dataTransfer, ghost.element, {
x: (_f = ghost.offsetX) !== null && _f !== void 0 ? _f : 0,
y: (_g = ghost.offsetY) !== null && _g !== void 0 ? _g : 0,
});
if (ghost.dispose) {
// addGhostImage removes the element from the DOM on
// the next tick; dispose the framework renderer on
// the same schedule.
var disposeGhost_1 = ghost.dispose;
setTimeout(function () { return disposeGhost_1(); }, 0);
}
}
if (event.dataTransfer) {
event.dataTransfer.effectAllowed = 'move';
// Some third-party DnD libs (e.g. react-dnd) cancel the
// dragstart when `dataTransfer.types` is empty.
if (event.dataTransfer.items.length === 0) {
event.dataTransfer.setData('text/plain', '');
}
}
(_j = (_h = _this.opts).onDragStart) === null || _j === void 0 ? void 0 : _j.call(_h, event);
}), (0, events_1.addDisposableListener)(_this.el, 'dragend', function (event) {
var _a, _b;
_this._pointerEventsDisposable.dispose();
// Defer disposal so drop handlers can still read the
// transfer payload before it clears.
setTimeout(function () { return _this._dataDisposable.dispose(); }, 0);
(_b = (_a = _this.opts).onDragEnd) === null || _b === void 0 ? void 0 : _b.call(_a, event);
}));
return _this;
}
Html5DragSource.prototype.setDisabled = function (value) {
this._disabled = value;
};
Html5DragSource.prototype.setTouchOnly = function (_) {
// No-op — HTML5 path can't filter by pointer type.
};
Html5DragSource.prototype.cancelPending = function () {
// No-op — HTML5 has no pre-arm phase to cancel.
};
return Html5DragSource;
}(lifecycle_1.CompositeDisposable));
var Html5DragBackend = /** @class */ (function () {
function Html5DragBackend() {
this.kind = 'html5';
}
Html5DragBackend.prototype.createDropTarget = function (element, options) {
return new droptarget_1.Droptarget(element, options);
};
Html5DragBackend.prototype.createDragSource = function (element, options) {
return new Html5DragSource(element, options);
};
return Html5DragBackend;
}());
var PointerDragBackend = /** @class */ (function () {
function PointerDragBackend() {
this.kind = 'pointer';
}
PointerDragBackend.prototype.createDropTarget = function (element, options) {
return new pointerDropTarget_1.PointerDropTarget(element, options);
};
PointerDragBackend.prototype.createDragSource = function (element, options) {
var pointerCreateGhost = options.createGhost
? function (event) {
var spec = options.createGhost(event);
if (!spec) {
return undefined;
}
var ghost = new pointerGhost_1.PointerGhost({
element: spec.element,
initialX: event.clientX,
initialY: event.clientY,
offsetX: spec.offsetX,
offsetY: spec.offsetY,
owner: element,
});
if (spec.dispose) {
var baseDispose_1 = ghost.dispose.bind(ghost);
var disposeSpec_1 = spec.dispose;
ghost.dispose = function () {
baseDispose_1();
disposeSpec_1();
};
}
return ghost;
}
: undefined;
var source = new pointerDragSource_1.PointerDragSource(element, {
getData: options.getData,
isCancelled: options.isCancelled,
onDragStart: options.onDragStart,
onDragEnd: options.onDragEnd
? function (event) { return options.onDragEnd(event.pointerEvent); }
: undefined,
createGhost: pointerCreateGhost,
touchOnly: options.touchOnly,
touchInitiationDelay: options.touchInitiationDelay,
pressTolerance: options.pressTolerance,
threshold: options.threshold,
});
if (options.disabled) {
source.setDisabled(true);
}
return source;
};
return PointerDragBackend;
}());
exports.html5Backend = new Html5DragBackend();
exports.pointerBackend = new PointerDragBackend();