dockview
Version:
Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support
178 lines • 7.39 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.Droptarget = exports.Position = void 0;
var dom_1 = require("../dom");
var events_1 = require("../events");
var lifecycle_1 = require("../lifecycle");
var dnd_1 = require("./dnd");
var Position;
(function (Position) {
Position["Top"] = "Top";
Position["Left"] = "Left";
Position["Bottom"] = "Bottom";
Position["Right"] = "Right";
Position["Center"] = "Center";
})(Position = exports.Position || (exports.Position = {}));
function isBooleanValue(canDisplayOverlay) {
return typeof canDisplayOverlay === 'boolean';
}
var Droptarget = /** @class */ (function (_super) {
__extends(Droptarget, _super);
function Droptarget(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.addDisposables(new dnd_1.DragAndDropObserver(_this.element, {
onDragEnter: function (e) { return undefined; },
onDragOver: function (e) {
if (isBooleanValue(_this.options.canDisplayOverlay)) {
if (!_this.options.canDisplayOverlay) {
return;
}
}
else if (!_this.options.canDisplayOverlay(e)) {
return;
}
if (!_this.target) {
_this.target = document.createElement('div');
_this.target.className = 'drop-target-dropzone';
_this.overlay = document.createElement('div');
_this.overlay.className = 'drop-target-selection';
_this._state = Position.Center;
_this.target.appendChild(_this.overlay);
_this.element.classList.add('drop-target');
_this.element.append(_this.target);
}
if (_this.options.validOverlays === 'none') {
return;
}
if (!_this.target || !_this.overlay) {
return;
}
var width = _this.target.clientWidth;
var height = _this.target.clientHeight;
if (width === 0 || height === 0) {
return; // avoid div!0
}
var x = e.offsetX;
var y = e.offsetY;
var xp = (100 * x) / width;
var yp = (100 * y) / height;
var isRight = false;
var isLeft = false;
var isTop = false;
var isBottom = false;
switch (_this.options.validOverlays) {
case 'all':
isRight = xp > 80;
isLeft = xp < 20;
isTop = !isRight && !isLeft && yp < 20;
isBottom = !isRight && !isLeft && yp > 80;
break;
case 'vertical':
isTop = yp < 50;
isBottom = yp >= 50;
break;
case 'horizontal':
isLeft = xp < 50;
isRight = xp >= 50;
break;
}
var isSmallX = width < 100;
var isSmallY = height < 100;
(0, dom_1.toggleClass)(_this.overlay, 'right', !isSmallX && isRight);
(0, dom_1.toggleClass)(_this.overlay, 'left', !isSmallX && isLeft);
(0, dom_1.toggleClass)(_this.overlay, 'top', !isSmallY && isTop);
(0, dom_1.toggleClass)(_this.overlay, 'bottom', !isSmallY && isBottom);
(0, dom_1.toggleClass)(_this.overlay, 'small-right', isSmallX && isRight);
(0, dom_1.toggleClass)(_this.overlay, 'small-left', isSmallX && isLeft);
(0, dom_1.toggleClass)(_this.overlay, 'small-top', isSmallY && isTop);
(0, dom_1.toggleClass)(_this.overlay, 'small-bottom', isSmallY && isBottom);
if (isRight) {
_this._state = Position.Right;
}
else if (isLeft) {
_this._state = Position.Left;
}
else if (isTop) {
_this._state = Position.Top;
}
else if (isBottom) {
_this._state = Position.Bottom;
}
else {
_this._state = Position.Center;
}
},
onDragLeave: function (e) {
_this.removeDropTarget();
},
onDragEnd: function (e) {
_this.removeDropTarget();
},
onDrop: function (e) {
e.preventDefault();
e.stopPropagation();
var state = _this._state;
_this.removeDropTarget();
if (state) {
_this._onDrop.fire({ position: state, event: e });
}
},
}));
return _this;
}
Object.defineProperty(Droptarget.prototype, "state", {
get: function () {
return this._state;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Droptarget.prototype, "validOverlays", {
set: function (value) {
this.options.validOverlays = value;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Droptarget.prototype, "canDisplayOverlay", {
set: function (value) {
this.options.canDisplayOverlay = value;
},
enumerable: false,
configurable: true
});
Droptarget.prototype.dispose = function () {
this._onDrop.dispose();
this.removeDropTarget();
};
Droptarget.prototype.removeDropTarget = function () {
if (this.target) {
this._state = undefined;
this.element.removeChild(this.target);
this.target = undefined;
this.element.classList.remove('drop-target');
}
};
return Droptarget;
}(lifecycle_1.CompositeDisposable));
exports.Droptarget = Droptarget;
//# sourceMappingURL=droptarget.js.map