UNPKG

@vdnd/v3

Version:

Easy used vue drag and drop component library.

1,437 lines (1,406 loc) 152 kB
var Vdnd3 = (function (exports, vue) { 'use strict'; function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); } function _assertThisInitialized(e) { if (undefined === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; } function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); } function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(undefined); }); }; } function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); } function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); } function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o); } } function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: false }), e; } function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var n = 0, F = function () {}; return { s: F, n: function () { return n >= r.length ? { done: true } : { done: false, value: r[n++] }; }, e: function (r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = true, u = false; return { s: function () { t = t.call(r); }, n: function () { var r = t.next(); return a = r.done, r; }, e: function (r) { u = true, o = r; }, f: function () { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; } function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; } function _get() { return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); } function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); } function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: true, configurable: true } }), Object.defineProperty(t, "prototype", { writable: false }), e && _setPrototypeOf(t, e); } function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); } function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } function _objectSpread2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } function _possibleConstructorReturn(t, e) { if (e && ("object" == typeof e || "function" == typeof e)) return e; if (undefined !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); } function _regeneratorRuntime() { _regeneratorRuntime = function () { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: true, configurable: true, writable: true }), t[e]; } try { define({}, ""); } catch (t) { define = function (t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function (t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: true }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(true); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = false, next; return next.value = t, next.done = true, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: true }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: true }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { undefined === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = false, next; } return next.done = true, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function (e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = false, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function () { this.done = true; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function (e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, true); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, true); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function (t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function (t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function (t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function (t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function (e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; } function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); } function _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; } function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(t.prototype ), o, e); return "function" == typeof p ? function (t) { return p.apply(e, t); } : p; } function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); } function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (undefined !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : undefined; } } var Plugin = /*#__PURE__*/_createClass(function Plugin(dnd) { _classCallCheck(this, Plugin); this.dnd = dnd; }); /** * All events fired by draggable inherit this class. You can call `cancel()` to * cancel a specific event or you can check if an event has been canceled by * calling `canceled()`. */ var AbstractEvent = /*#__PURE__*/function () { function AbstractEvent() { _classCallCheck(this, AbstractEvent); /** * Private instance variable to track canceled state */ _defineProperty(this, "_canceled", false); } return _createClass(AbstractEvent, [{ key: "cancelable", get: /** * Read-only cancelable */ function get() { return this.constructor.cancelable; } }, { key: "type", get: function get() { return this.constructor.type; } /** * Cancels the event instance */ }, { key: "cancel", value: function cancel() { if (this.cancelable) { this._canceled = true; } } /** * Check if event has been canceled */ }, { key: "canceled", value: function canceled() { return this._canceled; } }]); }(); _defineProperty(AbstractEvent, "type", 'event'); /** * Event cancelable */ _defineProperty(AbstractEvent, "cancelable", false); var BaseMirrorEvent = /*#__PURE__*/function (_AbstractEvent) { function BaseMirrorEvent(source, mirror, container, dndEvent) { var _this; _classCallCheck(this, BaseMirrorEvent); _this = _callSuper(this, BaseMirrorEvent); _this.source = source; _this.mirror = mirror; _this.container = container; _this.dndEvent = dndEvent; return _this; } _inherits(BaseMirrorEvent, _AbstractEvent); return _createClass(BaseMirrorEvent); }(AbstractEvent); var MirrorCreatedEvent = /*#__PURE__*/function (_BaseMirrorEvent) { function MirrorCreatedEvent() { _classCallCheck(this, MirrorCreatedEvent); return _callSuper(this, MirrorCreatedEvent, arguments); } _inherits(MirrorCreatedEvent, _BaseMirrorEvent); return _createClass(MirrorCreatedEvent); }(BaseMirrorEvent); _defineProperty(MirrorCreatedEvent, "type", 'mirror:created'); var MirrorAttachedEvent = /*#__PURE__*/function (_BaseMirrorEvent2) { function MirrorAttachedEvent() { _classCallCheck(this, MirrorAttachedEvent); return _callSuper(this, MirrorAttachedEvent, arguments); } _inherits(MirrorAttachedEvent, _BaseMirrorEvent2); return _createClass(MirrorAttachedEvent); }(BaseMirrorEvent); _defineProperty(MirrorAttachedEvent, "type", 'mirror:attached'); var MirrorMoveEvent = /*#__PURE__*/function (_BaseMirrorEvent3) { function MirrorMoveEvent() { _classCallCheck(this, MirrorMoveEvent); return _callSuper(this, MirrorMoveEvent, arguments); } _inherits(MirrorMoveEvent, _BaseMirrorEvent3); return _createClass(MirrorMoveEvent); }(BaseMirrorEvent); _defineProperty(MirrorMoveEvent, "type", 'mirror:move'); var MirrorDetachedEvent = /*#__PURE__*/function (_BaseMirrorEvent4) { function MirrorDetachedEvent() { _classCallCheck(this, MirrorDetachedEvent); return _callSuper(this, MirrorDetachedEvent, arguments); } _inherits(MirrorDetachedEvent, _BaseMirrorEvent4); return _createClass(MirrorDetachedEvent); }(BaseMirrorEvent); _defineProperty(MirrorDetachedEvent, "type", 'mirror:detached'); var Emitter = /*#__PURE__*/function () { function Emitter() { _classCallCheck(this, Emitter); _defineProperty(this, "callbacks", {}); _defineProperty(this, "onceCallbacks", new Set()); } return _createClass(Emitter, [{ key: "on", value: /** * Registers callback by event name */ function on(type, callback) { if (!this.callbacks[type]) { this.callbacks[type] = []; } this.callbacks[type].push(callback); return this; } /** * Registers disposable callback by event name */ }, { key: "once", value: function once(type, callback) { if (!this.callbacks[type]) { this.callbacks[type] = []; } this.callbacks[type].push(callback); this.onceCallbacks.add(callback); return this; } /** * Unregisters callback by event name */ }, { key: "off", value: function off(type, callback) { if (!this.callbacks[type]) { return this; } var callbacks = this.callbacks[type]; var index = callbacks.indexOf(callback); if (index >= 0) { callbacks.splice(index, 1); } this.onceCallbacks["delete"](callback); return this; } /** * Emits event callbacks by event object */ }, { key: "emit", value: function emit(type, payload) { if (!this.callbacks[type]) { return this; } var callbacks = _toConsumableArray(this.callbacks[type]); var caughtErrors = []; for (var i = 0; i <= callbacks.length - 1; i++) { var callback = callbacks[i]; try { callback(payload); } catch (error) { caughtErrors.push(error); } if (this.onceCallbacks.has(callback)) { this.off(type, callback); } } if (caughtErrors.length) { console.error("[vdnd error]: caught errors while emitting '".concat(type, "':")); caughtErrors.forEach(function (error) { return console.error(error); }); } return this; } }, { key: "destroy", value: function destroy() { this.callbacks = {}; this.onceCallbacks.clear(); } }]); }(); var emptyFn = function emptyFn() {}; function ensureArray(value) { return Array.isArray(value) ? value : [value]; } function isDef(value) { return value !== null && value !== undefined; } function isPrimitive(v) { return typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean' || _typeof(v) === 'symbol' || typeof v === 'bigint'; } function $typeof(v) { if (v === null) return 'null'; if (typeof v === 'undefined') return 'undefined'; if (typeof v === 'string') return 'string'; if (typeof v === 'number') return 'number'; if (typeof v === 'boolean') return 'boolean'; if (_typeof(v) === 'symbol') return 'symbol'; if (typeof v === 'bigint') return 'bigint'; var raw = Object.prototype.toString.call(v); return raw.slice(8, raw.length - 1); } var _excluded$1 = ["mirrorOffset", "initialX", "initialY"], _excluded2 = ["lastMovedX", "lastMovedY"], _excluded3 = ["source"], _excluded4 = ["dragEvent", "sourceRect", "options"], _excluded5 = ["mirror", "source", "options"], _excluded6 = ["mirror", "mirrorClasses"], _excluded7 = ["mirror", "source"], _excluded8 = ["mirror", "dragEvent", "mirrorOffset", "initialY", "initialX", "scrollOffset", "options", "lastMovedX", "lastMovedY"]; var defaultMirrorCreator = function defaultMirrorCreator(params) { return params.source.cloneNode(true); }; var defaultMirrorAppendTo = function defaultMirrorAppendTo(params) { return params.source.parentNode || document.body; }; var defaultOptions = { className: 'dnd-mirror', create: defaultMirrorCreator, appendTo: defaultMirrorAppendTo, constrainDimensions: false }; /** * Mirror plugin which controls the mirror positioning while dragging */ var Mirror = /*#__PURE__*/function (_Plugin) { function Mirror(dnd) { var _this; _classCallCheck(this, Mirror); _this = _callSuper(this, Mirror, [dnd]); /** * Scroll offset for touch devices because the mirror is positioned fixed */ _defineProperty(_this, "scrollOffset", { x: 0, y: 0 }); /** * Initial scroll offset for touch devices because the mirror is positioned fixed */ _defineProperty(_this, "initialScrollOffset", { x: window.scrollX, y: window.scrollY }); _defineProperty(_this, "lastMovedX", 0); _defineProperty(_this, "lastMovedY", 0); _defineProperty(_this, "mirrorOffset", { top: 0, left: 0 }); _defineProperty(_this, "initialX", 0); _defineProperty(_this, "initialY", 0); _defineProperty(_this, "mirror", null); _defineProperty(_this, "onDragStart", /*#__PURE__*/function () { var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(dragEvent) { var source, container, appendableContainer, createMirror, mirrorCreatedEvent, mirrorAttachedEvent; return _regeneratorRuntime().wrap(function _callee$(_context) { while (1) switch (_context.prev = _context.next) { case 0: if ('ontouchstart' in window) { document.addEventListener('scroll', _this.onScroll, true); } _this.initialScrollOffset = { x: window.scrollX, y: window.scrollY }; source = dragEvent.source, container = dragEvent.container; appendableContainer = _this.getAppendableContainer({ source: source, event: dragEvent }) || document.body; createMirror = _this.options.create; _this.mirror = createMirror({ source: source, event: dragEvent }); mirrorCreatedEvent = new MirrorCreatedEvent(source, _this.mirror, container, dragEvent); _this.dnd.emit('mirror:created', mirrorCreatedEvent); mirrorAttachedEvent = new MirrorAttachedEvent(source, _this.mirror, container, dragEvent); appendableContainer.appendChild(_this.mirror); _this.dnd.emit('mirror:attached', mirrorAttachedEvent); case 11: case "end": return _context.stop(); } }, _callee); })); return function (_x) { return _ref.apply(this, arguments); }; }()); _defineProperty(_this, "onDragMove", function (dragEvent) { if (!_this.mirror) { return; } var source = dragEvent.source, container = dragEvent.container; var mirrorMoveEvent = new MirrorMoveEvent(source, _this.mirror, container, dragEvent); _this.dnd.emit('mirror:move', mirrorMoveEvent); }); _defineProperty(_this, "onDragEnd", function (dragEvent) { if ('ontouchstart' in window) { document.removeEventListener('scroll', _this.onScroll, true); } _this.initialScrollOffset = { x: 0, y: 0 }; _this.scrollOffset = { x: 0, y: 0 }; if (!_this.mirror) { return; } var source = dragEvent.source, container = dragEvent.container; var mirrorDetachedEvent = new MirrorDetachedEvent(source, _this.mirror, container, dragEvent); _this.mirror.remove(); _this.dnd.emit('mirror:detached', mirrorDetachedEvent); }); _defineProperty(_this, "onScroll", function () { _this.scrollOffset = { x: window.scrollX - _this.initialScrollOffset.x, y: window.scrollY - _this.initialScrollOffset.y }; }); _defineProperty(_this, "onMirrorCreated", function (event) { var mirror = event.mirror, source = event.source, dragEvent = event.dndEvent; var mirrorClasses = ensureArray(_this.options.className || ''); var setState = function setState(_ref2) { var mirrorOffset = _ref2.mirrorOffset, initialX = _ref2.initialX, initialY = _ref2.initialY, args = _objectWithoutProperties(_ref2, _excluded$1); _this.mirrorOffset = mirrorOffset; _this.initialX = initialX; _this.initialY = initialY; _this.lastMovedX = initialX; _this.lastMovedY = initialY; return _objectSpread2({ mirrorOffset: mirrorOffset, initialX: initialX, initialY: initialY }, args); }; if ('style' in mirror && _typeof(mirror.style) === 'object') { mirror.style.display = 'none'; } var initialState = { mirror: mirror, source: source, dragEvent: dragEvent, mirrorClasses: mirrorClasses, scrollOffset: _this.scrollOffset, options: _this.options }; Promise.resolve(initialState) // Fix reflow here .then(computeMirrorDimensions).then(calculateMirrorOffset).then(resetMirror).then(addMirrorClasses).then(positionMirror({ initial: true })).then(removeMirrorID).then(setState); }); _defineProperty(_this, "onMirrorMove", function (event) { var setState = function setState(_ref3) { var lastMovedX = _ref3.lastMovedX, lastMovedY = _ref3.lastMovedY, args = _objectWithoutProperties(_ref3, _excluded2); _this.lastMovedX = lastMovedX; _this.lastMovedY = lastMovedY; return _objectSpread2({ lastMovedX: lastMovedX, lastMovedY: lastMovedY }, args); }; var initialState = { mirror: event.mirror, dragEvent: event.dndEvent, mirrorOffset: _this.mirrorOffset, options: _this.options, initialX: _this.initialX, initialY: _this.initialY, scrollOffset: _this.scrollOffset, lastMovedX: _this.lastMovedX, lastMovedY: _this.lastMovedY }; return Promise.resolve(initialState).then(positionMirror({ raf: true })).then(setState); }); _this.options = _objectSpread2(_objectSpread2({}, defaultOptions), _this.getOptions()); return _this; } _inherits(Mirror, _Plugin); return _createClass(Mirror, [{ key: "attach", value: function attach() { this.dnd.on('drag:start', this.onDragStart).on('drag:move', this.onDragMove).on('drag:end', this.onDragEnd).on('mirror:created', this.onMirrorCreated).on('mirror:move', this.onMirrorMove); } }, { key: "detach", value: function detach() { this.dnd.off('drag:start', this.onDragStart).off('drag:move', this.onDragMove).off('drag:end', this.onDragEnd).off('mirror:created', this.onMirrorCreated).off('mirror:move', this.onMirrorMove); } /** * Returns options passed through draggable */ }, { key: "getOptions", value: function getOptions() { return this.dnd.options.mirror || {}; } }, { key: "getAppendableContainer", value: /** * Returns appendable container for mirror based on the appendTo option */ function getAppendableContainer(_ref4) { var source = _ref4.source, event = _ref4.event; var appendTo = this.options.appendTo; if (typeof appendTo === 'string') { return document.querySelector(appendTo); } else if (appendTo instanceof HTMLElement) { return appendTo; } else if (typeof appendTo === 'function') { return appendTo({ source: source, event: event }); } else { return source.parentNode; } } }]); }(Plugin); /** * Computes mirror dimensions based on the source element * Adds sourceRect to state * @param {Object} state * @param {HTMLElement} state.source */ function computeMirrorDimensions(state) { var source = state.source, args = _objectWithoutProperties(state, _excluded3); return withPromise(function (resolve) { var sourceRect = source.getBoundingClientRect(); resolve(_objectSpread2({ source: source, sourceRect: sourceRect }, args)); }); } /** * Calculates mirror offset * Adds mirrorOffset to state */ function calculateMirrorOffset(_ref5) { var dragEvent = _ref5.dragEvent, sourceRect = _ref5.sourceRect, options = _ref5.options, args = _objectWithoutProperties(_ref5, _excluded4); return withPromise(function (resolve) { var top = typeof options.cursorOffsetY !== 'number' ? dragEvent.clientY - sourceRect.top : options.cursorOffsetY; var left = typeof options.cursorOffsetX !== 'number' ? dragEvent.clientX - sourceRect.left : options.cursorOffsetX; var mirrorOffset = { top: top, left: left }; resolve(_objectSpread2({ dragEvent: dragEvent, sourceRect: sourceRect, mirrorOffset: mirrorOffset, options: options }, args)); }); } /** * Applys mirror styles * @param {Object} state * @param {HTMLElement} state.mirror * @param {HTMLElement} state.source * @param {Object} state.options */ function resetMirror(_ref6) { var mirror = _ref6.mirror, source = _ref6.source, options = _ref6.options, args = _objectWithoutProperties(_ref6, _excluded5); return withPromise(function (resolve) { var offsetHeight; var offsetWidth; if (options.constrainDimensions) { var computedSourceStyles = getComputedStyle(source); offsetHeight = computedSourceStyles.getPropertyValue('height'); offsetWidth = computedSourceStyles.getPropertyValue('width'); } mirror.style.display = null; mirror.style.position = 'fixed'; mirror.style.pointerEvents = 'none'; mirror.style.top = 0; mirror.style.left = 0; mirror.style.margin = 0; if (options.constrainDimensions) { mirror.style.height = offsetHeight; mirror.style.width = offsetWidth; } resolve(_objectSpread2({ mirror: mirror, source: source, options: options }, args)); }); } /** * Applys mirror class on mirror element * @param {Object} state * @param {HTMLElement} state.mirror * @param {String[]} state.mirrorClasses */ function addMirrorClasses(_ref7) { var mirror = _ref7.mirror, mirrorClasses = _ref7.mirrorClasses, args = _objectWithoutProperties(_ref7, _excluded6); return withPromise(function (resolve) { var _mirror$classList; (_mirror$classList = mirror.classList).add.apply(_mirror$classList, _toConsumableArray(mirrorClasses)); resolve(_objectSpread2({ mirror: mirror, mirrorClasses: mirrorClasses }, args)); }); } /** * Removes source ID from cloned mirror element * @param {Object} state * @param {HTMLElement} state.mirror */ function removeMirrorID(_ref8) { var mirror = _ref8.mirror, source = _ref8.source, args = _objectWithoutProperties(_ref8, _excluded7); return withPromise(function (resolve) { if (source.getAttribute('id') === mirror.getAttribute('id')) { mirror.removeAttribute('id'); delete mirror.id; } resolve(_objectSpread2({ mirror: mirror }, args)); }); } /** * Positions mirror with translate3d */ function positionMirror(state) { var _state$raf = state.raf, raf = _state$raf === undefined ? false : _state$raf, _state$initial = state.initial, initial = _state$initial === undefined ? false : _state$initial; return function (_ref9) { var mirror = _ref9.mirror, dragEvent = _ref9.dragEvent, mirrorOffset = _ref9.mirrorOffset; _ref9.initialY; _ref9.initialX; var scrollOffset = _ref9.scrollOffset, options = _ref9.options; _ref9.lastMovedX; _ref9.lastMovedY; var args = _objectWithoutProperties(_ref9, _excluded8); return withPromise(function (resolve) { var result = _objectSpread2({ mirror: mirror, dragEvent: dragEvent, mirrorOffset: mirrorOffset, options: options }, args); if (mirrorOffset) { var x = Math.round(dragEvent.clientX - mirrorOffset.left - scrollOffset.x); var y = Math.round(dragEvent.clientY - mirrorOffset.top - scrollOffset.y); mirror.style.transform = "translate3d(".concat(x, "px, ").concat(y, "px, 0)"); if (initial) { // @ts-expect-error result.initialX = x; // @ts-expect-error result.initialY = y; } // @ts-expect-error result.lastMovedX = x; // @ts-expect-error result.lastMovedY = y; } resolve(result); }, { raf: raf }); }; } /** * Wraps functions in promise with potential animation frame option */ function withPromise(callback) { var _ref10 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, _ref10$raf = _ref10.raf, raf = _ref10$raf === undefined ? false : _ref10$raf; return new Promise(function (resolve, reject) { if (raf) { requestAnimationFrame(function () { callback(resolve, reject); }); } else { callback(resolve, reject); } }); } /** * Get the closest parent element of a given element that matches the given matcher */ function closest(element, matcher) { if (matcher instanceof Node) { return closest(element, [matcher]); } if (matcher instanceof NodeList) { return closest(element, Array.from(matcher)); } function isExpected(currentElement) { if (isClassName(matcher)) { return currentElement.classList.contains(matcher); } if (isCallbackMatcher(matcher)) { return matcher(currentElement); } if (isNodes(matcher)) { return matcher.includes(currentElement); } } var current = element; do { var _current; if (isExpected(current)) { return current; } current = ((_current = current) === null || _current === undefined ? undefined : _current.parentElement) || null; } while (current != null && current !== document.body); return null; } function isClassName(matcher) { return typeof matcher === 'string'; } function isNodes(matcher) { return Array.isArray(matcher); } function isCallbackMatcher(matcher) { return typeof matcher === 'function'; } /** * Returns all handles where 'options.isHandle' is true in a source node. */ function findHandles(root, options) { var isHandle = options.isHandle, isSource = options.isSource; var handles = []; for (var i = 0, element; i < root.children.length; i++) { element = root.children.item(i); if (!(element instanceof Element) || isSource(element)) { continue; } if (isHandle(element)) { handles.push(element); continue; } handles.push.apply(handles, _toConsumableArray(findHandles(element, options))); } return handles; } /** * Simulator picks up native browser events and dictates drag operations. */ var Simulator = /*#__PURE__*/function () { function Simulator(env, container, options, onDragStrat, onDragMove, onDragEnd) { _classCallCheck(this, Simulator); _defineProperty(this, "startEvent", null); _defineProperty(this, "source", null); this.env = env; this.container = container; this.options = options; this.onDragStrat = onDragStrat; this.onDragMove = onDragMove; this.onDragEnd = onDragEnd; } return _createClass(Simulator, [{ key: "getSource", value: function getSource(startEvent) { var _this = this; if (!(startEvent.target instanceof Element) || !closest(startEvent.target, this.container)) return null; var source = closest(startEvent.target, this.options.source); if (!source) return null; if (this.options.handle) { var handles = findHandles(source, { isSource: function isSource(target) { return target.classList.contains(_this.options.source); }, isHandle: function isHandle(target) { return target.classList.contains(_this.options.handle); } }); if (handles.length > 0 && handles.every(function (handle) { return !closest(startEvent.target, handle); })) { return null; } } return source; } }, { key: "dragging", get: function get() { return this.source !== null; } /** Stops moving */ }]); }(); var BaseSimulatorEvent = /*#__PURE__*/function (_AbstractEvent) { function BaseSimulatorEvent(target, source, container, clientX, clientY, originalEvent) { var _this; _classCallCheck(this, BaseSimulatorEvent); _this = _callSuper(this, BaseSimulatorEvent); _this.target = target; _this.source = source; _this.container = container; _this.clientX = clientX; _this.clientY = clientY; _this.originalEvent = originalEvent; return _this; } _inherits(BaseSimulatorEvent, _AbstractEvent); return _createClass(BaseSimulatorEvent); }(AbstractEvent); var DragStartSimulatorEvent = /*#__PURE__*/function (_BaseSimulatorEvent) { function DragStartSimulatorEvent() { _classCallCheck(this, DragStartSimulatorEvent); return _callSuper(this, DragStartSimulatorEvent, arguments); } _inherits(DragStartSimulatorEvent, _BaseSimulatorEvent); return _createClass(DragStartSimulatorEvent); }(BaseSimulatorEvent); _defineProperty(DragStartSimulatorEvent, "type", 'drag:start'); _defineProperty(DragStartSimulatorEvent, "cancelable", true); var DragMoveSimulatorEvent = /*#__PURE__*/function (_BaseSimulatorEvent2) { function DragMoveSimulatorEvent() { _classCallCheck(this, DragMoveSimulatorEvent); return _callSuper(this, DragMoveSimulatorEvent, arguments); } _inherits(DragMoveSimulatorEvent, _BaseSimulatorEvent2); return _createClass(DragMoveSimulatorEvent); }(BaseSimulatorEvent); _defineProperty(DragMoveSimulatorEvent, "type", 'drag:move'); var DragEndSimulatorEvent = /*#__PURE__*/function (_BaseSimulatorEvent3) { function DragEndSimulatorEvent() { _classCallCheck(this, DragEndSimulatorEvent); return _callSuper(this, DragEndSimulatorEvent, arguments); } _inherits(DragEndSimulatorEvent, _BaseSimulatorEvent3); return _createClass(DragEndSimulatorEvent); }(BaseSimulatorEvent); _defineProperty(DragEndSimulatorEvent, "type", 'drag:end'); /** * This simulator picks up native browser mouse events and dictates drag operations */ var MouseSimulator = /*#__PURE__*/function (_Simulator) { function MouseSimulator() { var _this; _classCallCheck(this, MouseSimulator); for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } _this = _callSuper(this, MouseSimulator, [].concat(args)); _defineProperty(_this, "onMouseDown", function (event) { if (event.button !== 0 || event.altKey || _this.dragging) { return; } var source = _this.getSource(event); if (source) { _this.source = source; _this.startEvent = event; _this.env.addEventListener('mouseup', _this.onMouseUp); _this.env.addEventListener('dragstart', preventNativeDragStart); _this.env.addEventListener('mousemove', _this.onFirstMouseMove); } }); _defineProperty(_this, "onKeyDown", function (event) { var _event$code; if (_this.dragging && event.target && !event.isComposing && ((_event$code = event.code) === null || _event$code === undefined ? undefined : _event$code.toLowerCase()) === 'escape') { var _this2 = _this, source = _this2.source, container = _this2.container; _this.cancel(); _this.onDragEnd(new DragEndSimulatorEvent(event.target, source, container, 0, 0, event)); } }); _defineProperty(_this, "onFirstMouseMove", function () { _this.env.removeEventListener('mousemove', _this.onFirstMouseMove); _this.startDrag(); }); _defineProperty(_this, "onMouseMove", function (event) { if (!(event.target instanceof Element)) return; var dragMoveEvent = new DragMoveSimulatorEvent(event.target, _this.source, _this.container, event.clientX, event.clientY, event); _this.onDragMove(dragMoveEvent); }); _defineProperty(_this, "onMouseUp", function (event) { if (event.button !== 0 || !(event.target instanceof Element)) { return; } var _this3 = _this, source = _this3.source; _this.cancel(); if (source) { var dragEndEvent = new DragEndSimulatorEvent(event.target, source, _this.container, event.clientX, event.clientY, event); _this.onDragEnd(dragEndEvent); } }); _defineProperty(_this, "onContextMenuWhileDragging", function (event) { event.preventDefault(); }); return _this; } _inherits(MouseSimulator, _Simulator); return _createClass(MouseSimulator, [{ key: "attach", value: function attach() { this.env.addEventListener('mousedown', this.onMouseDown, true); return this; } }, { key: "detach", value: function detach() { this.env.removeEventListener('mousedown', this.onMouseDown, true); this.cancel(); return this; } }, { key: "startDrag", value: function startDrag() { var dragSt