dockview-core
Version:
Zero dependency layout manager supporting tabs, groups, grids and splitviews for vanilla TypeScript
199 lines (198 loc) • 8.26 kB
JavaScript
"use strict";
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.PointerDropTarget = void 0;
var events_1 = require("../../events");
var lifecycle_1 = require("../../lifecycle");
var dropOverlay_1 = require("../dropOverlay");
var droptarget_1 = require("../droptarget");
var pointerDragController_1 = require("./pointerDragController");
var DEFAULT_ACTIVATION_SIZE = {
value: 20,
type: 'percentage',
};
/** Pointer-driven counterpart to `Droptarget` with identical visual output. */
var PointerDropTarget = /** @class */ (function (_super) {
__extends(PointerDropTarget, _super);
function PointerDropTarget(element, options) {
var _this = _super.call(this) || this;
_this.element = element;
_this.options = options;
_this._onDrop = new events_1.Emitter();
_this.onDrop = _this._onDrop.event;
_this._onWillShowOverlay = new events_1.Emitter();
_this.onWillShowOverlay = _this._onWillShowOverlay.event;
_this._disabled = false;
_this._acceptedTargetZonesSet = new Set(options.acceptedTargetZones);
var handle = {
element: _this.element,
handleDragOver: function (e) { return _this._onDragOver(e); },
handleDragLeave: function () { return _this._onDragLeave(); },
handleDrop: function (e) { return _this._onDropEvent(e); },
};
_this.addDisposables(_this._onDrop, _this._onWillShowOverlay, pointerDragController_1.PointerDragController.getInstance().registerTarget(handle));
return _this;
}
Object.defineProperty(PointerDropTarget.prototype, "disabled", {
get: function () {
return this._disabled;
},
set: function (value) {
this._disabled = value;
if (value) {
this._removeOverlay();
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(PointerDropTarget.prototype, "state", {
get: function () {
return this._state;
},
enumerable: false,
configurable: true
});
PointerDropTarget.prototype.setTargetZones = function (zones) {
this._acceptedTargetZonesSet = new Set(zones);
};
PointerDropTarget.prototype.setOverlayModel = function (model) {
this.options.overlayModel = model;
};
PointerDropTarget.prototype.dispose = function () {
this._removeOverlay();
_super.prototype.dispose.call(this);
};
PointerDropTarget.prototype._onDragOver = function (event) {
var _a, _b, _c, _d, _e;
if (this._disabled) {
this._removeOverlay();
return;
}
var overrideTarget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
if (this._acceptedTargetZonesSet.size === 0) {
if (overrideTarget) {
return;
}
this._removeOverlay();
return;
}
var outlineEl = (_e = (_d = (_c = this.options).getOverlayOutline) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : this.element;
var width = outlineEl.offsetWidth;
var height = outlineEl.offsetHeight;
if (width === 0 || height === 0) {
return;
}
var rect = outlineEl.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
var quadrant = this._calculateQuadrant(x, y, width, height);
if (quadrant === null) {
this._removeOverlay();
return;
}
if (!this.options.canDisplayOverlay(event.pointerEvent, quadrant)) {
if (overrideTarget) {
return;
}
this._removeOverlay();
return;
}
var willShow = new droptarget_1.WillShowOverlayEvent({
nativeEvent: event.pointerEvent,
position: quadrant,
});
this._onWillShowOverlay.fire(willShow);
if (willShow.defaultPrevented) {
this._removeOverlay();
return;
}
if (overrideTarget) {
(0, dropOverlay_1.renderAnchoredOverlay)({
outlineElement: outlineEl,
targetModel: overrideTarget,
quadrant: quadrant,
width: width,
height: height,
overlayModel: this.options.overlayModel,
className: this.options.className,
});
this._state = quadrant;
return;
}
if (!this._targetElement) {
var els = (0, dropOverlay_1.createOverlayElements)();
this._targetElement = els.dropzone;
this._overlayElement = els.selection;
this._state = 'center';
this.element.classList.add('dv-drop-target');
this.element.append(this._targetElement);
}
if (this._overlayElement) {
(0, dropOverlay_1.renderInPlaceOverlay)(this._overlayElement, quadrant, width, height, this.options.overlayModel);
}
this._state = quadrant;
};
PointerDropTarget.prototype._onDragLeave = function () {
var _a, _b;
var overrideTarget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
// Anchor target owns its own lifecycle; just clear our latched
// state so a subsequent pointerup doesn't fire a stale drop.
if (overrideTarget) {
this._state = undefined;
overrideTarget.clear();
return;
}
this._removeOverlay();
};
PointerDropTarget.prototype._onDropEvent = function (event) {
var _a, _b;
var state = this._state;
var overrideTarget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
this._removeOverlay();
overrideTarget === null || overrideTarget === void 0 ? void 0 : overrideTarget.clear();
if (state) {
this._onDrop.fire({
position: state,
nativeEvent: event.pointerEvent,
});
}
};
PointerDropTarget.prototype._calculateQuadrant = function (x, y, width, height) {
var _a, _b;
var activation = (_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) !== null && _b !== void 0 ? _b : DEFAULT_ACTIVATION_SIZE;
if (activation.type === 'percentage') {
return (0, droptarget_1.calculateQuadrantAsPercentage)(this._acceptedTargetZonesSet, x, y, width, height, activation.value);
}
return (0, droptarget_1.calculateQuadrantAsPixels)(this._acceptedTargetZonesSet, x, y, width, height, activation.value);
};
PointerDropTarget.prototype._removeOverlay = function () {
var _a;
if (this._targetElement) {
this._state = undefined;
(_a = this._targetElement.parentElement) === null || _a === void 0 ? void 0 : _a.classList.remove('dv-drop-target');
this._targetElement.remove();
this._targetElement = undefined;
this._overlayElement = undefined;
}
else {
this._state = undefined;
}
};
return PointerDropTarget;
}(lifecycle_1.CompositeDisposable));
exports.PointerDropTarget = PointerDropTarget;