vue3-dnd/dist/esm/internals/TargetConnector.js

Drag and Drop for Vue Composition API

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}
function _defineProperties(target, props) {
    for(var i = 0; i < props.length; i++){
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) descriptor.writable = true;
        Object.defineProperty(target, descriptor.key, descriptor);
    }
}
function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    return Constructor;
}
import { shallowEqual } from "@react-dnd/shallowequal";
import { wrapConnectorHooks } from "./wrapConnectorHooks";
import { isRef } from "vue-demi";
export var TargetConnector = /*#__PURE__*/ function() {
    "use strict";
    function TargetConnector(backend) {
        var _this = this;
        _classCallCheck(this, TargetConnector);
        this.hooks = wrapConnectorHooks({
            dropTarget: function(node, options) {
                _this.clearDropTarget();
                _this.dropTargetOptions = options;
                if (isRef(node)) {
                    _this.dropTargetRef = node;
                } else {
                    _this.dropTargetNode = node;
                }
                _this.reconnect();
            }
        });
        this.handlerId = null;
        // The drop target may either be attached via ref or connect function
        this.dropTargetRef = null;
        this.dropTargetOptionsInternal = null;
        this.lastConnectedHandlerId = null;
        this.lastConnectedDropTarget = null;
        this.lastConnectedDropTargetOptions = null;
        this.backend = backend;
    }
    var _proto = TargetConnector.prototype;
    _proto.reconnect = function reconnect() {
        // if nothing has changed then don't resubscribe
        var didChange = this.didHandlerIdChange() || this.didDropTargetChange() || this.didOptionsChange();
        if (didChange) {
            this.disconnectDropTarget();
        }
        var dropTarget = this.dropTarget;
        if (!this.handlerId) {
            return;
        }
        if (!dropTarget) {
            this.lastConnectedDropTarget = dropTarget;
            return;
        }
        if (didChange) {
            this.lastConnectedHandlerId = this.handlerId;
            this.lastConnectedDropTarget = dropTarget;
            this.lastConnectedDropTargetOptions = this.dropTargetOptions;
            this.unsubscribeDropTarget = this.backend.connectDropTarget(this.handlerId, dropTarget, this.dropTargetOptions);
        }
    };
    _proto.receiveHandlerId = function receiveHandlerId(newHandlerId) {
        if (newHandlerId === this.handlerId) {
            return;
        }
        this.handlerId = newHandlerId;
        this.reconnect();
    };
    _proto.didHandlerIdChange = function didHandlerIdChange() {
        return this.lastConnectedHandlerId !== this.handlerId;
    };
    _proto.didDropTargetChange = function didDropTargetChange() {
        return this.lastConnectedDropTarget !== this.dropTarget;
    };
    _proto.didOptionsChange = function didOptionsChange() {
        return !shallowEqual(this.lastConnectedDropTargetOptions, this.dropTargetOptions);
    };
    _proto.disconnectDropTarget = function disconnectDropTarget() {
        if (this.unsubscribeDropTarget) {
            this.unsubscribeDropTarget();
            this.unsubscribeDropTarget = undefined;
        }
    };
    _proto.clearDropTarget = function clearDropTarget() {
        this.dropTargetRef = null;
        this.dropTargetNode = null;
    };
    _createClass(TargetConnector, [
        {
            key: "connectTarget",
            get: function get() {
                return this.dropTarget;
            }
        },
        {
            key: "dropTargetOptions",
            get: function get() {
                return this.dropTargetOptionsInternal;
            },
            set: function set(options) {
                this.dropTargetOptionsInternal = options;
            }
        },
        {
            key: "dropTarget",
            get: function get() {
                return this.dropTargetNode || this.dropTargetRef && this.dropTargetRef.value;
            }
        }
    ]);
    return TargetConnector;
}();