dockview-core 1.8.4 → 1.9.0

package/dist/cjs/dnd/droptarget.js

@@ -1,305 +1,306 @@
-"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.calculateQuadrantAsPixels = exports.calculateQuadrantAsPercentage = exports.Droptarget = exports.positionToDirection = exports.directionToPosition = void 0;
-var dom_1 = require("../dom");
-var events_1 = require("../events");
-var lifecycle_1 = require("../lifecycle");
-var dnd_1 = require("./dnd");
-var math_1 = require("../math");
-function numberOrFallback(maybeNumber, fallback) {
-    return typeof maybeNumber === 'number' ? maybeNumber : fallback;
-}
-function directionToPosition(direction) {
-    switch (direction) {
-        case 'above':
-            return 'top';
-        case 'below':
-            return 'bottom';
-        case 'left':
-            return 'left';
-        case 'right':
-            return 'right';
-        case 'within':
-            return 'center';
-        default:
-            throw new Error("invalid direction '".concat(direction, "'"));
-    }
-}
-exports.directionToPosition = directionToPosition;
-function positionToDirection(position) {
-    switch (position) {
-        case 'top':
-            return 'above';
-        case 'bottom':
-            return 'below';
-        case 'left':
-            return 'left';
-        case 'right':
-            return 'right';
-        case 'center':
-            return 'within';
-        default:
-            throw new Error("invalid position '".concat(position, "'"));
-    }
-}
-exports.positionToDirection = positionToDirection;
-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;
-        // use a set to take advantage of #<set>.has
-        _this._acceptedTargetZonesSet = new Set(_this.options.acceptedTargetZones);
-        _this.addDisposables(_this._onDrop, new dnd_1.DragAndDropObserver(_this.element, {
-            onDragEnter: function () { return undefined; },
-            onDragOver: function (e) {
-                if (_this._acceptedTargetZonesSet.size === 0) {
-                    _this.removeDropTarget();
-                    return;
-                }
-                var width = _this.element.clientWidth;
-                var height = _this.element.clientHeight;
-                if (width === 0 || height === 0) {
-                    return; // avoid div!0
-                }
-                var rect = e.currentTarget.getBoundingClientRect();
-                var x = e.clientX - rect.left;
-                var y = e.clientY - rect.top;
-                var quadrant = _this.calculateQuadrant(_this._acceptedTargetZonesSet, x, y, width, height);
-                /**
-                 * If the event has already been used by another DropTarget instance
-                 * then don't show a second drop target, only one target should be
-                 * active at any one time
-                 */
-                if (_this.isAlreadyUsed(e) || quadrant === null) {
-                    // no drop target should be displayed
-                    _this.removeDropTarget();
-                    return;
-                }
-                if (typeof _this.options.canDisplayOverlay === 'boolean') {
-                    if (!_this.options.canDisplayOverlay) {
-                        _this.removeDropTarget();
-                        return;
-                    }
-                }
-                else if (!_this.options.canDisplayOverlay(e, quadrant)) {
-                    _this.removeDropTarget();
-                    return;
-                }
-                _this.markAsUsed(e);
-                if (!_this.targetElement) {
-                    _this.targetElement = document.createElement('div');
-                    _this.targetElement.className = 'drop-target-dropzone';
-                    _this.overlayElement = document.createElement('div');
-                    _this.overlayElement.className = 'drop-target-selection';
-                    _this._state = 'center';
-                    _this.targetElement.appendChild(_this.overlayElement);
-                    _this.element.classList.add('drop-target');
-                    _this.element.append(_this.targetElement);
-                }
-                _this.toggleClasses(quadrant, width, height);
-                _this.setState(quadrant);
-            },
-            onDragLeave: function () {
-                _this.removeDropTarget();
-            },
-            onDragEnd: function () {
-                _this.removeDropTarget();
-            },
-            onDrop: function (e) {
-                e.preventDefault();
-                var state = _this._state;
-                _this.removeDropTarget();
-                if (state) {
-                    // only stop the propagation of the event if we are dealing with it
-                    // which is only when the target has state
-                    e.stopPropagation();
-                    _this._onDrop.fire({ position: state, nativeEvent: e });
-                }
-            },
-        }));
-        return _this;
-    }
-    Object.defineProperty(Droptarget.prototype, "state", {
-        get: function () {
-            return this._state;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Droptarget.prototype.setTargetZones = function (acceptedTargetZones) {
-        this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
-    };
-    Droptarget.prototype.dispose = function () {
-        this.removeDropTarget();
-        _super.prototype.dispose.call(this);
-    };
-    /**
-     * Add a property to the event object for other potential listeners to check
-     */
-    Droptarget.prototype.markAsUsed = function (event) {
-        event[Droptarget.USED_EVENT_ID] = true;
-    };
-    /**
-     * Check is the event has already been used by another instance od DropTarget
-     */
-    Droptarget.prototype.isAlreadyUsed = function (event) {
-        var value = event[Droptarget.USED_EVENT_ID];
-        return typeof value === 'boolean' && value;
-    };
-    Droptarget.prototype.toggleClasses = function (quadrant, width, height) {
-        var _a, _b, _c, _d;
-        if (!this.overlayElement) {
-            return;
-        }
-        var isSmallX = width < 100;
-        var isSmallY = height < 100;
-        var isLeft = quadrant === 'left';
-        var isRight = quadrant === 'right';
-        var isTop = quadrant === 'top';
-        var isBottom = quadrant === 'bottom';
-        var rightClass = !isSmallX && isRight;
-        var leftClass = !isSmallX && isLeft;
-        var topClass = !isSmallY && isTop;
-        var bottomClass = !isSmallY && isBottom;
-        var size = 0.5;
-        if (((_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.type) === 'percentage') {
-            size = (0, math_1.clamp)(this.options.overlayModel.size.value, 0, 100) / 100;
-        }
-        if (((_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) === null || _d === void 0 ? void 0 : _d.type) === 'pixels') {
-            if (rightClass || leftClass) {
-                size =
-                    (0, math_1.clamp)(0, this.options.overlayModel.size.value, width) /
-                        width;
-            }
-            if (topClass || bottomClass) {
-                size =
-                    (0, math_1.clamp)(0, this.options.overlayModel.size.value, height) /
-                        height;
-            }
-        }
-        var translate = (1 - size) / 2;
-        var scale = size;
-        var transform;
-        if (rightClass) {
-            transform = "translateX(".concat(100 * translate, "%) scaleX(").concat(scale, ")");
-        }
-        else if (leftClass) {
-            transform = "translateX(-".concat(100 * translate, "%) scaleX(").concat(scale, ")");
-        }
-        else if (topClass) {
-            transform = "translateY(-".concat(100 * translate, "%) scaleY(").concat(scale, ")");
-        }
-        else if (bottomClass) {
-            transform = "translateY(".concat(100 * translate, "%) scaleY(").concat(scale, ")");
-        }
-        else {
-            transform = '';
-        }
-        this.overlayElement.style.transform = transform;
-        (0, dom_1.toggleClass)(this.overlayElement, 'small-right', isSmallX && isRight);
-        (0, dom_1.toggleClass)(this.overlayElement, 'small-left', isSmallX && isLeft);
-        (0, dom_1.toggleClass)(this.overlayElement, 'small-top', isSmallY && isTop);
-        (0, dom_1.toggleClass)(this.overlayElement, 'small-bottom', isSmallY && isBottom);
-    };
-    Droptarget.prototype.setState = function (quadrant) {
-        switch (quadrant) {
-            case 'top':
-                this._state = 'top';
-                break;
-            case 'left':
-                this._state = 'left';
-                break;
-            case 'bottom':
-                this._state = 'bottom';
-                break;
-            case 'right':
-                this._state = 'right';
-                break;
-            case 'center':
-                this._state = 'center';
-                break;
-        }
-    };
-    Droptarget.prototype.calculateQuadrant = function (overlayType, x, y, width, height) {
-        var _a, _b, _c, _d, _e, _f;
-        var isPercentage = ((_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) === undefined ||
-            ((_c = (_b = this.options.overlayModel) === null || _b === void 0 ? void 0 : _b.activationSize) === null || _c === void 0 ? void 0 : _c.type) === 'percentage';
-        var value = numberOrFallback((_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.overlayModel) === null || _e === void 0 ? void 0 : _e.activationSize) === null || _f === void 0 ? void 0 : _f.value, 20);
-        if (isPercentage) {
-            return calculateQuadrantAsPercentage(overlayType, x, y, width, height, value);
-        }
-        return calculateQuadrantAsPixels(overlayType, x, y, width, height, value);
-    };
-    Droptarget.prototype.removeDropTarget = function () {
-        if (this.targetElement) {
-            this._state = undefined;
-            this.element.removeChild(this.targetElement);
-            this.targetElement = undefined;
-            this.overlayElement = undefined;
-            this.element.classList.remove('drop-target');
-        }
-    };
-    Droptarget.USED_EVENT_ID = '__dockview_droptarget_event_is_used__';
-    return Droptarget;
-}(lifecycle_1.CompositeDisposable));
-exports.Droptarget = Droptarget;
-function calculateQuadrantAsPercentage(overlayType, x, y, width, height, threshold) {
-    var xp = (100 * x) / width;
-    var yp = (100 * y) / height;
-    if (overlayType.has('left') && xp < threshold) {
-        return 'left';
-    }
-    if (overlayType.has('right') && xp > 100 - threshold) {
-        return 'right';
-    }
-    if (overlayType.has('top') && yp < threshold) {
-        return 'top';
-    }
-    if (overlayType.has('bottom') && yp > 100 - threshold) {
-        return 'bottom';
-    }
-    if (!overlayType.has('center')) {
-        return null;
-    }
-    return 'center';
-}
-exports.calculateQuadrantAsPercentage = calculateQuadrantAsPercentage;
-function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold) {
-    if (overlayType.has('left') && x < threshold) {
-        return 'left';
-    }
-    if (overlayType.has('right') && x > width - threshold) {
-        return 'right';
-    }
-    if (overlayType.has('top') && y < threshold) {
-        return 'top';
-    }
-    if (overlayType.has('bottom') && y > height - threshold) {
-        return 'bottom';
-    }
-    if (!overlayType.has('center')) {
-        return null;
-    }
-    return 'center';
-}
-exports.calculateQuadrantAsPixels = calculateQuadrantAsPixels;
+"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.calculateQuadrantAsPixels = exports.calculateQuadrantAsPercentage = exports.Droptarget = exports.positionToDirection = exports.directionToPosition = void 0;
+var dom_1 = require("../dom");
+var events_1 = require("../events");
+var lifecycle_1 = require("../lifecycle");
+var dnd_1 = require("./dnd");
+var math_1 = require("../math");
+function numberOrFallback(maybeNumber, fallback) {
+    return typeof maybeNumber === 'number' ? maybeNumber : fallback;
+}
+function directionToPosition(direction) {
+    switch (direction) {
+        case 'above':
+            return 'top';
+        case 'below':
+            return 'bottom';
+        case 'left':
+            return 'left';
+        case 'right':
+            return 'right';
+        case 'within':
+            return 'center';
+        default:
+            throw new Error("invalid direction '".concat(direction, "'"));
+    }
+}
+exports.directionToPosition = directionToPosition;
+function positionToDirection(position) {
+    switch (position) {
+        case 'top':
+            return 'above';
+        case 'bottom':
+            return 'below';
+        case 'left':
+            return 'left';
+        case 'right':
+            return 'right';
+        case 'center':
+            return 'within';
+        default:
+            throw new Error("invalid position '".concat(position, "'"));
+    }
+}
+exports.positionToDirection = positionToDirection;
+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;
+        // use a set to take advantage of #<set>.has
+        _this._acceptedTargetZonesSet = new Set(_this.options.acceptedTargetZones);
+        _this.dnd = new dnd_1.DragAndDropObserver(_this.element, {
+            onDragEnter: function () { return undefined; },
+            onDragOver: function (e) {
+                if (_this._acceptedTargetZonesSet.size === 0) {
+                    _this.removeDropTarget();
+                    return;
+                }
+                var width = _this.element.clientWidth;
+                var height = _this.element.clientHeight;
+                if (width === 0 || height === 0) {
+                    return; // avoid div!0
+                }
+                var rect = e.currentTarget.getBoundingClientRect();
+                var x = e.clientX - rect.left;
+                var y = e.clientY - rect.top;
+                var quadrant = _this.calculateQuadrant(_this._acceptedTargetZonesSet, x, y, width, height);
+                /**
+                 * If the event has already been used by another DropTarget instance
+                 * then don't show a second drop target, only one target should be
+                 * active at any one time
+                 */
+                if (_this.isAlreadyUsed(e) || quadrant === null) {
+                    // no drop target should be displayed
+                    _this.removeDropTarget();
+                    return;
+                }
+                if (typeof _this.options.canDisplayOverlay === 'boolean') {
+                    if (!_this.options.canDisplayOverlay) {
+                        _this.removeDropTarget();
+                        return;
+                    }
+                }
+                else if (!_this.options.canDisplayOverlay(e, quadrant)) {
+                    _this.removeDropTarget();
+                    return;
+                }
+                _this.markAsUsed(e);
+                if (!_this.targetElement) {
+                    _this.targetElement = document.createElement('div');
+                    _this.targetElement.className = 'drop-target-dropzone';
+                    _this.overlayElement = document.createElement('div');
+                    _this.overlayElement.className = 'drop-target-selection';
+                    _this._state = 'center';
+                    _this.targetElement.appendChild(_this.overlayElement);
+                    _this.element.classList.add('drop-target');
+                    _this.element.append(_this.targetElement);
+                }
+                _this.toggleClasses(quadrant, width, height);
+                _this.setState(quadrant);
+            },
+            onDragLeave: function () {
+                _this.removeDropTarget();
+            },
+            onDragEnd: function () {
+                _this.removeDropTarget();
+            },
+            onDrop: function (e) {
+                e.preventDefault();
+                var state = _this._state;
+                _this.removeDropTarget();
+                if (state) {
+                    // only stop the propagation of the event if we are dealing with it
+                    // which is only when the target has state
+                    e.stopPropagation();
+                    _this._onDrop.fire({ position: state, nativeEvent: e });
+                }
+            },
+        });
+        _this.addDisposables(_this._onDrop, _this.dnd);
+        return _this;
+    }
+    Object.defineProperty(Droptarget.prototype, "state", {
+        get: function () {
+            return this._state;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Droptarget.prototype.setTargetZones = function (acceptedTargetZones) {
+        this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
+    };
+    Droptarget.prototype.dispose = function () {
+        this.removeDropTarget();
+        _super.prototype.dispose.call(this);
+    };
+    /**
+     * Add a property to the event object for other potential listeners to check
+     */
+    Droptarget.prototype.markAsUsed = function (event) {
+        event[Droptarget.USED_EVENT_ID] = true;
+    };
+    /**
+     * Check is the event has already been used by another instance od DropTarget
+     */
+    Droptarget.prototype.isAlreadyUsed = function (event) {
+        var value = event[Droptarget.USED_EVENT_ID];
+        return typeof value === 'boolean' && value;
+    };
+    Droptarget.prototype.toggleClasses = function (quadrant, width, height) {
+        var _a, _b, _c, _d;
+        if (!this.overlayElement) {
+            return;
+        }
+        var isSmallX = width < 100;
+        var isSmallY = height < 100;
+        var isLeft = quadrant === 'left';
+        var isRight = quadrant === 'right';
+        var isTop = quadrant === 'top';
+        var isBottom = quadrant === 'bottom';
+        var rightClass = !isSmallX && isRight;
+        var leftClass = !isSmallX && isLeft;
+        var topClass = !isSmallY && isTop;
+        var bottomClass = !isSmallY && isBottom;
+        var size = 0.5;
+        if (((_b = (_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.type) === 'percentage') {
+            size = (0, math_1.clamp)(this.options.overlayModel.size.value, 0, 100) / 100;
+        }
+        if (((_d = (_c = this.options.overlayModel) === null || _c === void 0 ? void 0 : _c.size) === null || _d === void 0 ? void 0 : _d.type) === 'pixels') {
+            if (rightClass || leftClass) {
+                size =
+                    (0, math_1.clamp)(0, this.options.overlayModel.size.value, width) /
+                        width;
+            }
+            if (topClass || bottomClass) {
+                size =
+                    (0, math_1.clamp)(0, this.options.overlayModel.size.value, height) /
+                        height;
+            }
+        }
+        var translate = (1 - size) / 2;
+        var scale = size;
+        var transform;
+        if (rightClass) {
+            transform = "translateX(".concat(100 * translate, "%) scaleX(").concat(scale, ")");
+        }
+        else if (leftClass) {
+            transform = "translateX(-".concat(100 * translate, "%) scaleX(").concat(scale, ")");
+        }
+        else if (topClass) {
+            transform = "translateY(-".concat(100 * translate, "%) scaleY(").concat(scale, ")");
+        }
+        else if (bottomClass) {
+            transform = "translateY(".concat(100 * translate, "%) scaleY(").concat(scale, ")");
+        }
+        else {
+            transform = '';
+        }
+        this.overlayElement.style.transform = transform;
+        (0, dom_1.toggleClass)(this.overlayElement, 'small-right', isSmallX && isRight);
+        (0, dom_1.toggleClass)(this.overlayElement, 'small-left', isSmallX && isLeft);
+        (0, dom_1.toggleClass)(this.overlayElement, 'small-top', isSmallY && isTop);
+        (0, dom_1.toggleClass)(this.overlayElement, 'small-bottom', isSmallY && isBottom);
+    };
+    Droptarget.prototype.setState = function (quadrant) {
+        switch (quadrant) {
+            case 'top':
+                this._state = 'top';
+                break;
+            case 'left':
+                this._state = 'left';
+                break;
+            case 'bottom':
+                this._state = 'bottom';
+                break;
+            case 'right':
+                this._state = 'right';
+                break;
+            case 'center':
+                this._state = 'center';
+                break;
+        }
+    };
+    Droptarget.prototype.calculateQuadrant = function (overlayType, x, y, width, height) {
+        var _a, _b, _c, _d, _e, _f;
+        var isPercentage = ((_a = this.options.overlayModel) === null || _a === void 0 ? void 0 : _a.activationSize) === undefined ||
+            ((_c = (_b = this.options.overlayModel) === null || _b === void 0 ? void 0 : _b.activationSize) === null || _c === void 0 ? void 0 : _c.type) === 'percentage';
+        var value = numberOrFallback((_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.overlayModel) === null || _e === void 0 ? void 0 : _e.activationSize) === null || _f === void 0 ? void 0 : _f.value, 20);
+        if (isPercentage) {
+            return calculateQuadrantAsPercentage(overlayType, x, y, width, height, value);
+        }
+        return calculateQuadrantAsPixels(overlayType, x, y, width, height, value);
+    };
+    Droptarget.prototype.removeDropTarget = function () {
+        if (this.targetElement) {
+            this._state = undefined;
+            this.element.removeChild(this.targetElement);
+            this.targetElement = undefined;
+            this.overlayElement = undefined;
+            this.element.classList.remove('drop-target');
+        }
+    };
+    Droptarget.USED_EVENT_ID = '__dockview_droptarget_event_is_used__';
+    return Droptarget;
+}(lifecycle_1.CompositeDisposable));
+exports.Droptarget = Droptarget;
+function calculateQuadrantAsPercentage(overlayType, x, y, width, height, threshold) {
+    var xp = (100 * x) / width;
+    var yp = (100 * y) / height;
+    if (overlayType.has('left') && xp < threshold) {
+        return 'left';
+    }
+    if (overlayType.has('right') && xp > 100 - threshold) {
+        return 'right';
+    }
+    if (overlayType.has('top') && yp < threshold) {
+        return 'top';
+    }
+    if (overlayType.has('bottom') && yp > 100 - threshold) {
+        return 'bottom';
+    }
+    if (!overlayType.has('center')) {
+        return null;
+    }
+    return 'center';
+}
+exports.calculateQuadrantAsPercentage = calculateQuadrantAsPercentage;
+function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold) {
+    if (overlayType.has('left') && x < threshold) {
+        return 'left';
+    }
+    if (overlayType.has('right') && x > width - threshold) {
+        return 'right';
+    }
+    if (overlayType.has('top') && y < threshold) {
+        return 'top';
+    }
+    if (overlayType.has('bottom') && y > height - threshold) {
+        return 'bottom';
+    }
+    if (!overlayType.has('center')) {
+        return null;
+    }
+    return 'center';
+}
+exports.calculateQuadrantAsPixels = calculateQuadrantAsPixels;
 //# sourceMappingURL=droptarget.js.map