vue3-dnd
Version:
Drag and Drop for Vue Composition API
128 lines (127 loc) • 4.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TargetConnector = void 0;
var _shallowequal = require("@react-dnd/shallowequal");
var _wrapConnectorHooks = require("./wrapConnectorHooks");
var _vueDemi = require("vue-demi");
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;
}
var TargetConnector = /*#__PURE__*/ function() {
"use strict";
function TargetConnector(backend) {
var _this = this;
_classCallCheck(this, TargetConnector);
this.hooks = (0, _wrapConnectorHooks).wrapConnectorHooks({
dropTarget: function(node, options) {
_this.clearDropTarget();
_this.dropTargetOptions = options;
if ((0, _vueDemi).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 !(0, _shallowequal).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;
}();
exports.TargetConnector = TargetConnector;