UNPKG

vue-ts-responsive-grid-layout

Version:

Vue 3 Responsive & Dynamic Grid / Dashboard layout with drag, drop and resizable actions.

1,611 lines 166 kB
var Vi = Object.defineProperty; var qi = (t, e, n) => e in t ? Vi(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n; var g = (t, e, n) => qi(t, typeof e != "symbol" ? e + "" : e, n); import { getCurrentInstance as Gi, defineComponent as ee, inject as Xi, ref as L, computed as Ht, watch as j, onBeforeUnmount as ai, onMounted as li, useSlots as Ki, createElementBlock as me, openBlock as be, normalizeStyle as sn, normalizeClass as ci, createCommentVNode as Zi, renderSlot as ui, createElementVNode as ye, toRef as _n, provide as Ji, onBeforeMount as Qi, nextTick as Dt, withDirectives as to, createVNode as eo, vShow as no, toDisplayString as io } from "vue"; const nt = { init: oo, document: null, DocumentFragment: null, SVGElement: null, SVGSVGElement: null, SVGElementInstance: null, Element: null, HTMLElement: null, Event: null, Touch: null, PointerEvent: null }; function Gt() { } function oo(t) { const e = t; nt.document = e.document, nt.DocumentFragment = e.DocumentFragment || Gt, nt.SVGElement = e.SVGElement || Gt, nt.SVGSVGElement = e.SVGSVGElement || Gt, nt.SVGElementInstance = e.SVGElementInstance || Gt, nt.Element = e.Element || Gt, nt.HTMLElement = e.HTMLElement || nt.Element, nt.Event = e.Event, nt.Touch = e.Touch || Gt, nt.PointerEvent = e.PointerEvent || e.MSPointerEvent; } const fi = (t) => !!(t && t.Window) && t instanceof t.Window; let di, zt; function hi(t) { di = t; const e = t.document.createTextNode(""); e.ownerDocument !== t.document && typeof t.wrap == "function" && t.wrap(e) === e && (t = t.wrap(t)), zt = t; } typeof window < "u" && window && hi(window); function Ut(t) { return fi(t) ? t : (t.ownerDocument || t).defaultView || zt.window; } const ro = (t) => t === zt || fi(t), so = (t) => Oe(t) && t.nodeType === 11, Oe = (t) => !!t && typeof t == "object", pi = (t) => typeof t == "function", ao = (t) => typeof t == "number", lo = (t) => typeof t == "boolean", co = (t) => typeof t == "string", uo = (t) => { if (!t || typeof t != "object") return !1; const e = Ut(t) || zt; return /object|function/.test(typeof Element) ? t instanceof Element || t instanceof e.Element : t.nodeType === 1 && typeof t.nodeName == "string"; }, fo = (t) => Oe(t) && !!t.constructor && /function Object\b/.test(t.constructor.toString()), ho = (t) => Oe(t) && typeof t.length < "u" && pi(t.splice), v = { window: ro, docFrag: so, object: Oe, func: pi, number: ao, bool: lo, string: co, element: uo, plainObject: fo, array: ho }, st = { init: po, supportsTouch: null, supportsPointerEvent: null, isIOS7: null, isIOS: null, isIe9: null, isOperaMobile: null, prefixedMatchesSelector: null, pEventTypes: null, wheelEvent: null }; function po(t) { const e = nt.Element, n = t.navigator || {}; st.supportsTouch = "ontouchstart" in t || v.func(t.DocumentTouch) && nt.document instanceof t.DocumentTouch, st.supportsPointerEvent = n.pointerEnabled !== !1 && !!nt.PointerEvent, st.isIOS = /iP(hone|od|ad)/.test(n.platform), st.isIOS7 = /iP(hone|od|ad)/.test(n.platform) && /OS 7[^\d]/.test(n.appVersion), st.isIe9 = /MSIE 9/.test(n.userAgent), st.isOperaMobile = n.appName === "Opera" && st.supportsTouch && /Presto/.test(n.userAgent), st.prefixedMatchesSelector = "matches" in e.prototype ? "matches" : "webkitMatchesSelector" in e.prototype ? "webkitMatchesSelector" : "mozMatchesSelector" in e.prototype ? "mozMatchesSelector" : "oMatchesSelector" in e.prototype ? "oMatchesSelector" : "msMatchesSelector", st.pEventTypes = st.supportsPointerEvent ? nt.PointerEvent === t.MSPointerEvent ? { up: "MSPointerUp", down: "MSPointerDown", over: "mouseover", out: "mouseout", move: "MSPointerMove", cancel: "MSPointerCancel" } : { up: "pointerup", down: "pointerdown", over: "pointerover", out: "pointerout", move: "pointermove", cancel: "pointercancel" } : null, st.wheelEvent = nt.document && "onmousewheel" in nt.document ? "mousewheel" : "wheel"; } const go = (t, e) => t.indexOf(e) !== -1, gi = (t, e) => { for (const n of e) t.push(n); return t; }, vi = (t) => gi([], t), Me = (t, e) => { for (let n = 0; n < t.length; n++) if (e(t[n], n, t)) return n; return -1; }, an = (t, e) => t[Me(t, e)]; function te(t) { const e = {}; for (const n in t) { const i = t[n]; v.plainObject(i) ? e[n] = te(i) : v.array(i) ? e[n] = vi(i) : e[n] = i; } return e; } function z(t, e) { for (const i in e) t[i] = e[i]; return t; } let Dn = 0, Mt, Bt; function vo(t) { if (Mt = t.requestAnimationFrame, Bt = t.cancelAnimationFrame, !Mt) { const e = ["ms", "moz", "webkit", "o"]; for (const n of e) Mt = t[`${n}RequestAnimationFrame`], Bt = t[`${n}CancelAnimationFrame`] || t[`${n}CancelRequestAnimationFrame`]; } Mt = Mt && Mt.bind(t), Bt = Bt && Bt.bind(t), Mt || (Mt = (e) => { const n = Date.now(), i = Math.max(0, 16 - (n - Dn)), o = t.setTimeout(() => { e(n + i); }, i); return Dn = n + i, o; }, Bt = (e) => clearTimeout(e)); } const Xt = { request: (t) => Mt(t), cancel: (t) => Bt(t), init: vo }; function Jt(t, e, n) { if (n = n || {}, v.string(t) && t.search(" ") !== -1 && (t = An(t)), v.array(t)) return t.reduce((i, o) => z(i, Jt(o, e, n)), n); if (v.object(t) && (e = t, t = ""), v.func(e)) n[t] = n[t] || [], n[t].push(e); else if (v.array(e)) for (const i of e) Jt(t, i, n); else if (v.object(e)) for (const i in e) { const o = An(i).map((s) => `${t}${s}`); Jt(o, e[i], n); } return n; } function An(t) { return t.trim().split(/ +/); } function Tn(t, e) { for (const n of e) { if (t.immediatePropagationStopped) break; n(t); } } class mi { constructor(e) { g(this, "options"); g(this, "types", {}); g(this, "propagationStopped", !1); g(this, "immediatePropagationStopped", !1); g(this, "global"); this.options = z({}, e || {}); } fire(e) { let n; const i = this.global; (n = this.types[e.type]) && Tn(e, n), !e.propagationStopped && i && (n = i[e.type]) && Tn(e, n); } on(e, n) { const i = Jt(e, n); for (e in i) this.types[e] = gi(this.types[e] || [], i[e]); } off(e, n) { const i = Jt(e, n); for (e in i) { const o = this.types[e]; if (!(!o || !o.length)) for (const s of i[e]) { const a = o.indexOf(s); a !== -1 && o.splice(a, 1); } } } getRect(e) { return null; } } function Wt(t, e) { if (t.contains) return t.contains(e); for (; e; ) { if (e === t) return !0; e = e.parentNode; } return !1; } function bi(t, e) { for (; v.element(t); ) { if (Yt(t, e)) return t; t = Nt(t); } return null; } function Nt(t) { let e = t.parentNode; if (v.docFrag(e)) { for (; (e = e.host) && v.docFrag(e); ) ; return e; } return e; } function Yt(t, e) { return zt !== di && (e = e.replace(/\/deep\//g, " ")), t[st.prefixedMatchesSelector](e); } function ln(t, e, n) { for (; v.element(t); ) { if (Yt(t, e)) return !0; if (t = Nt(t), t === n) return Yt(t, e); } return !1; } function Rn(t) { return t.correspondingUseElement || t; } function mo(t) { return t = t || zt, { x: t.scrollX || t.document.documentElement.scrollLeft, y: t.scrollY || t.document.documentElement.scrollTop }; } function mn(t) { const e = t instanceof nt.SVGElement ? t.getBoundingClientRect() : t.getClientRects()[0]; return e && { left: e.left, right: e.right, top: e.top, bottom: e.bottom, width: e.width || e.right - e.left, height: e.height || e.bottom - e.top }; } function bn(t) { const e = mn(t); if (!st.isIOS7 && e) { const n = mo(Ut(t)); e.left += n.x, e.right += n.x, e.top += n.y, e.bottom += n.y; } return e; } function On(t) { return v.string(t) ? (nt.document.querySelector(t), !0) : !1; } function yi(t, e, n) { return t === "parent" ? Nt(n) : t === "self" ? e.getRect(n) : bi(n, t); } function xe(t, e, n, i) { let o = t; return v.string(o) ? o = yi(o, e, n) : v.func(o) && (o = o(...i)), v.element(o) && (o = bn(o)), o; } function Ce(t) { return t && { x: "x" in t ? t.x : t.left, y: "y" in t ? t.y : t.top }; } function bo(t) { return t && !("left" in t && "top" in t) && (t = z({}, t), t.left = t.x || 0, t.top = t.y || 0, t.right = t.right || t.left + t.width, t.bottom = t.bottom || t.top + t.height), t; } function Mn(t) { return t && !("x" in t && "y" in t) && (t = z({}, t), t.x = t.left || 0, t.y = t.top || 0, t.width = t.width || (t.right || 0) - t.x, t.height = t.height || (t.bottom || 0) - t.y), t; } function yn(t, e, n) { t.left && (e.left += n.x), t.right && (e.right += n.x), t.top && (e.top += n.y), t.bottom && (e.bottom += n.y), e.width = e.right - e.left, e.height = e.bottom - e.top; } function xn(t, e, n) { const i = t.options[n], s = i && i.origin || t.options.origin, a = xe(s, t, e, [t && e]); return Ce(a) || { x: 0, y: 0 }; } const Pe = (t, e) => Math.sqrt(t * t + e * e); class xi { constructor(e) { g(this, "immediatePropagationStopped", !1); g(this, "propagationStopped", !1); this._interaction = e; } preventDefault() { } /** * Don't call any other listeners (even on the current target) */ stopPropagation() { this.propagationStopped = !0; } /** * Don't call listeners on the remaining targets */ stopImmediatePropagation() { this.immediatePropagationStopped = this.propagationStopped = !0; } } Object.defineProperty(xi.prototype, "interaction", { get() { return this._interaction._proxy; }, set() { } }); const wi = { base: { preventDefault: "auto", deltaSource: "page" }, perAction: { enabled: !1, origin: { x: 0, y: 0 } }, actions: {} }; class wn extends xi { /** */ constructor(n, i, o, s, a, r, l) { super(n); g(this, "relatedTarget", null); g(this, "screenX"); g(this, "screenY"); g(this, "button"); g(this, "buttons"); g(this, "ctrlKey"); g(this, "shiftKey"); g(this, "altKey"); g(this, "metaKey"); g(this, "page"); g(this, "client"); g(this, "delta"); g(this, "rect"); g(this, "x0"); g(this, "y0"); g(this, "t0"); g(this, "dt"); g(this, "duration"); g(this, "clientX0"); g(this, "clientY0"); g(this, "velocity"); g(this, "speed"); g(this, "swipe"); // resize g(this, "axes"); g(this, "preEnd"); a = a || n.element; const c = n.interactable, u = (c && c.options || wi).deltaSource, f = xn(c, a, o), d = s === "start", I = s === "end", m = d ? this : n.prevEvent, x = d ? n.coords.start : I ? { page: m.page, client: m.client, timeStamp: n.coords.cur.timeStamp } : n.coords.cur; this.page = z({}, x.page), this.client = z({}, x.client), this.rect = z({}, n.rect), this.timeStamp = x.timeStamp, I || (this.page.x -= f.x, this.page.y -= f.y, this.client.x -= f.x, this.client.y -= f.y), this.ctrlKey = i.ctrlKey, this.altKey = i.altKey, this.shiftKey = i.shiftKey, this.metaKey = i.metaKey, this.button = i.button, this.buttons = i.buttons, this.target = a, this.currentTarget = a, this.preEnd = r, this.type = l || o + (s || ""), this.interactable = c, this.t0 = d ? n.pointers[n.pointers.length - 1].downTime : m.t0, this.x0 = n.coords.start.page.x - f.x, this.y0 = n.coords.start.page.y - f.y, this.clientX0 = n.coords.start.client.x - f.x, this.clientY0 = n.coords.start.client.y - f.y, d || I ? this.delta = { x: 0, y: 0 } : this.delta = { x: this[u].x - m[u].x, y: this[u].y - m[u].y }, this.dt = n.coords.delta.timeStamp, this.duration = this.timeStamp - this.t0, this.velocity = z({}, n.coords.velocity[u]), this.speed = Pe(this.velocity.x, this.velocity.y), this.swipe = I || s === "inertiastart" ? this.getSwipe() : null; } getSwipe() { const n = this._interaction; if (n.prevEvent.speed < 600 || this.timeStamp - n.prevEvent.timeStamp > 150) return null; let i = 180 * Math.atan2(n.prevEvent.velocityY, n.prevEvent.velocityX) / Math.PI; const o = 22.5; i < 0 && (i += 360); const s = 135 - o <= i && i < 225 + o, a = 225 - o <= i && i < 315 + o, r = !s && (315 - o <= i || i < 45 + o), l = !a && 45 - o <= i && i < 135 + o; return { up: a, down: l, left: s, right: r, angle: i, speed: n.prevEvent.speed, velocity: { x: n.prevEvent.velocityX, y: n.prevEvent.velocityY } }; } preventDefault() { } /** * Don't call listeners on the remaining targets */ stopImmediatePropagation() { this.immediatePropagationStopped = this.propagationStopped = !0; } /** * Don't call any other listeners (even on the current target) */ stopPropagation() { this.propagationStopped = !0; } } Object.defineProperties(wn.prototype, { pageX: { get() { return this.page.x; }, set(t) { this.page.x = t; } }, pageY: { get() { return this.page.y; }, set(t) { this.page.y = t; } }, clientX: { get() { return this.client.x; }, set(t) { this.client.x = t; } }, clientY: { get() { return this.client.y; }, set(t) { this.client.y = t; } }, dx: { get() { return this.delta.x; }, set(t) { this.delta.x = t; } }, dy: { get() { return this.delta.y; }, set(t) { this.delta.y = t; } }, velocityX: { get() { return this.velocity.x; }, set(t) { this.velocity.x = t; } }, velocityY: { get() { return this.velocity.y; }, set(t) { this.velocity.y = t; } } }); function we(t, e) { let n = !1; return function() { return n || (zt.console.warn(e), n = !0), t.apply(this, arguments); }; } function Si(t, e) { return t.name = e.name, t.axis = e.axis, t.edges = e.edges, t; } function Ei(t, e) { t.__set || (t.__set = {}); for (const n in e) typeof t[n] != "function" && n !== "__set" && Object.defineProperty(t, n, { get() { return n in t.__set ? t.__set[n] : t.__set[n] = e[n]; }, set(i) { t.__set[n] = i; }, configurable: !0 }); return t; } function $e(t, e) { t.page = t.page || {}, t.page.x = e.page.x, t.page.y = e.page.y, t.client = t.client || {}, t.client.x = e.client.x, t.client.y = e.client.y, t.timeStamp = e.timeStamp; } function yo(t, e, n) { t.page.x = n.page.x - e.page.x, t.page.y = n.page.y - e.page.y, t.client.x = n.client.x - e.client.x, t.client.y = n.client.y - e.client.y, t.timeStamp = n.timeStamp - e.timeStamp; } function xo(t, e) { const n = Math.max(e.timeStamp / 1e3, 1e-3); t.page.x = e.page.x / n, t.page.y = e.page.y / n, t.client.x = e.client.x / n, t.client.y = e.client.y / n, t.timeStamp = n; } function wo(t) { t.page.x = 0, t.page.y = 0, t.client.x = 0, t.client.y = 0; } function Ii(t) { return t instanceof nt.Event || t instanceof nt.Touch; } function _e(t, e, n) { return n = n || {}, t = t || "page", n.x = e[t + "X"], n.y = e[t + "Y"], n; } function So(t, e) { return e = e || { x: 0, y: 0 }, st.isOperaMobile && Ii(t) ? (_e("screen", t, e), e.x += window.scrollX, e.y += window.scrollY) : _e("page", t, e), e; } function Eo(t, e) { return e = e || {}, st.isOperaMobile && Ii(t) ? _e("screen", t, e) : _e("client", t, e), e; } function De(t) { return v.number(t.pointerId) ? t.pointerId : t.identifier; } function Io(t, e, n) { const i = e.length > 1 ? _i(e) : e[0]; So(i, t.page), Eo(i, t.client), t.timeStamp = n; } function Sn(t) { const e = []; return v.array(t) ? (e[0] = t[0], e[1] = t[1]) : t.type === "touchend" ? t.touches.length === 1 ? (e[0] = t.touches[0], e[1] = t.changedTouches[0]) : t.touches.length === 0 && (e[0] = t.changedTouches[0], e[1] = t.changedTouches[1]) : (e[0] = t.touches[0], e[1] = t.touches[1]), e; } function _i(t) { const e = { pageX: 0, pageY: 0, clientX: 0, clientY: 0, screenX: 0, screenY: 0 }; for (const n of t) for (const i in e) e[i] += n[i]; for (const n in e) e[n] /= t.length; return e; } function _o(t) { if (!t.length) return null; const e = Sn(t), n = Math.min(e[0].pageX, e[1].pageX), i = Math.min(e[0].pageY, e[1].pageY), o = Math.max(e[0].pageX, e[1].pageX), s = Math.max(e[0].pageY, e[1].pageY); return { x: n, y: i, left: n, top: i, right: o, bottom: s, width: o - n, height: s - i }; } function Do(t, e) { const n = e + "X", i = e + "Y", o = Sn(t), s = o[0][n] - o[1][n], a = o[0][i] - o[1][i]; return Pe(s, a); } function Ao(t, e) { const n = e + "X", i = e + "Y", o = Sn(t), s = o[1][n] - o[0][n], a = o[1][i] - o[0][i]; return 180 * Math.atan2(a, s) / Math.PI; } function To(t) { return v.string(t.pointerType) ? t.pointerType : v.number(t.pointerType) ? [void 0, void 0, "touch", "pen", "mouse"][t.pointerType] : ( // if the PointerEvent API isn't available, then the "pointer" must // be either a MouseEvent, TouchEvent, or Touch object /touch/.test(t.type || "") || t instanceof nt.Touch ? "touch" : "mouse" ); } function Di(t) { const e = v.func(t.composedPath) ? t.composedPath() : t.path; return [Rn(e ? e[0] : t.target), Rn(t.currentTarget)]; } function he() { return { page: { x: 0, y: 0 }, client: { x: 0, y: 0 }, timeStamp: 0 }; } function cn(t, e) { if (e.phaselessTypes[t]) return !0; for (const n in e.map) if (t.indexOf(n) === 0 && t.substr(n.length) in e.phases) return !0; return !1; } function Ro(t) { const e = (n, i) => { let o = t.interactables.get(n, i); return o || (o = t.interactables.new(n, i), o.events.global = e.globalEvents), o; }; return e.getPointerAverage = _i, e.getTouchBBox = _o, e.getTouchDistance = Do, e.getTouchAngle = Ao, e.getElementRect = bn, e.getElementClientRect = mn, e.matchesSelector = Yt, e.closest = bi, e.globalEvents = {}, e.version = "1.10.17", e.scope = t, e.use = function(n, i) { return this.scope.usePlugin(n, i), this; }, e.isSet = function(n, i) { return !!this.scope.interactables.get(n, i && i.context); }, e.on = we(function(i, o, s) { if (v.string(i) && i.search(" ") !== -1 && (i = i.trim().split(/ +/)), v.array(i)) { for (const a of i) this.on(a, o, s); return this; } if (v.object(i)) { for (const a in i) this.on(a, i[a], o); return this; } return cn(i, this.scope.actions) ? this.globalEvents[i] ? this.globalEvents[i].push(o) : this.globalEvents[i] = [o] : this.scope.events.add(this.scope.document, i, o, { options: s }), this; }, "The interact.on() method is being deprecated"), e.off = we(function(i, o, s) { if (v.string(i) && i.search(" ") !== -1 && (i = i.trim().split(/ +/)), v.array(i)) { for (const a of i) this.off(a, o, s); return this; } if (v.object(i)) { for (const a in i) this.off(a, i[a], o); return this; } if (cn(i, this.scope.actions)) { let a; i in this.globalEvents && (a = this.globalEvents[i].indexOf(o)) !== -1 && this.globalEvents[i].splice(a, 1); } else this.scope.events.remove(this.scope.document, i, o, s); return this; }, "The interact.off() method is being deprecated"), e.debug = function() { return this.scope; }, e.supportsTouch = function() { return st.supportsTouch; }, e.supportsPointerEvent = function() { return st.supportsPointerEvent; }, e.stop = function() { for (const n of this.scope.interactions.list) n.stop(); return this; }, e.pointerMoveTolerance = function(n) { return v.number(n) ? (this.scope.interactions.pointerMoveTolerance = n, this) : this.scope.interactions.pointerMoveTolerance; }, e.addDocument = function(n, i) { this.scope.addDocument(n, i); }, e.removeDocument = function(n) { this.scope.removeDocument(n); }, e; } class Oo { /** */ constructor(e, n, i, o) { g(this, "options"); g(this, "_actions"); g(this, "target"); g(this, "events", new mi()); g(this, "_context"); g(this, "_win"); g(this, "_doc"); g(this, "_scopeEvents"); /** @internal */ g(this, "_rectChecker"); this._actions = n.actions, this.target = e, this._context = n.context || i, this._win = Ut(On(e) ? this._context : e), this._doc = this._win.document, this._scopeEvents = o, this.set(n); } /** @internal */ get _defaults() { return { base: {}, perAction: {}, actions: {} }; } setOnEvents(e, n) { return v.func(n.onstart) && this.on(`${e}start`, n.onstart), v.func(n.onmove) && this.on(`${e}move`, n.onmove), v.func(n.onend) && this.on(`${e}end`, n.onend), v.func(n.oninertiastart) && this.on(`${e}inertiastart`, n.oninertiastart), this; } updatePerActionListeners(e, n, i) { (v.array(n) || v.object(n)) && this.off(e, n), (v.array(i) || v.object(i)) && this.on(e, i); } setPerAction(e, n) { const i = this._defaults; for (const o in n) { const s = o, a = this.options[e], r = n[s]; s === "listeners" && this.updatePerActionListeners(e, a.listeners, r), v.array(r) ? a[s] = vi(r) : v.plainObject(r) ? (a[s] = z(a[s] || {}, te(r)), v.object(i.perAction[s]) && "enabled" in i.perAction[s] && (a[s].enabled = r.enabled !== !1)) : v.bool(r) && v.object(i.perAction[s]) ? a[s].enabled = r : a[s] = r; } } /** * The default function to get an Interactables bounding rect. Can be * overridden using {@link Interactable.rectChecker}. * * @param {Element} [element] The element to measure. * @return {Rect} The object's bounding rectangle. */ getRect(e) { return e = e || (v.element(this.target) ? this.target : null), v.string(this.target) && (e = e || this._context.querySelector(this.target)), bn(e); } /** * Returns or sets the function used to calculate the interactable's * element's rectangle * * @param {function} [checker] A function which returns this Interactable's * bounding rectangle. See {@link Interactable.getRect} * @return {function | object} The checker function or this Interactable */ rectChecker(e) { return v.func(e) ? (this._rectChecker = e, this.getRect = (n) => { const i = z({}, this._rectChecker(n)); return "width" in i || (i.width = i.right - i.left, i.height = i.bottom - i.top), i; }, this) : e === null ? (delete this.getRect, delete this._rectChecker, this) : this.getRect; } _backCompatOption(e, n) { if (On(n) || v.object(n)) { this.options[e] = n; for (const i in this._actions.map) this.options[i][e] = n; return this; } return this.options[e]; } /** * Gets or sets the origin of the Interactable's element. The x and y * of the origin will be subtracted from action event coordinates. * * @param {Element | object | string} [origin] An HTML or SVG Element whose * rect will be used, an object eg. { x: 0, y: 0 } or string 'parent', 'self' * or any CSS selector * * @return {object} The current origin or this Interactable */ origin(e) { return this._backCompatOption("origin", e); } /** * Returns or sets the mouse coordinate types used to calculate the * movement of the pointer. * * @param {string} [newValue] Use 'client' if you will be scrolling while * interacting; Use 'page' if you want autoScroll to work * @return {string | object} The current deltaSource or this Interactable */ deltaSource(e) { return e === "page" || e === "client" ? (this.options.deltaSource = e, this) : this.options.deltaSource; } /** * Gets the selector context Node of the Interactable. The default is * `window.document`. * * @return {Node} The context Node of this Interactable */ context() { return this._context; } inContext(e) { return this._context === e.ownerDocument || Wt(this._context, e); } testIgnoreAllow(e, n, i) { return !this.testIgnore(e.ignoreFrom, n, i) && this.testAllow(e.allowFrom, n, i); } testAllow(e, n, i) { return e ? v.element(i) ? v.string(e) ? ln(i, e, n) : v.element(e) ? Wt(e, i) : !1 : !1 : !0; } testIgnore(e, n, i) { return !e || !v.element(i) ? !1 : v.string(e) ? ln(i, e, n) : v.element(e) ? Wt(e, i) : !1; } /** * Calls listeners for the given InteractEvent type bound globally * and directly to this Interactable * * @param {InteractEvent} iEvent The InteractEvent object to be fired on this * Interactable * @return {Interactable} this Interactable */ fire(e) { return this.events.fire(e), this; } _onOff(e, n, i, o) { v.object(n) && !v.array(n) && (o = i, i = null); const s = e === "on" ? "add" : "remove", a = Jt(n, i); for (let r in a) { r === "wheel" && (r = st.wheelEvent); for (const l of a[r]) cn(r, this._actions) ? this.events[e](r, l) : v.string(this.target) ? this._scopeEvents[`${s}Delegate`](this.target, this._context, r, l, o) : this._scopeEvents[s](this.target, r, l, o); } return this; } /** * Binds a listener for an InteractEvent, pointerEvent or DOM event. * * @param {string | array | object} types The types of events to listen * for * @param {function | array | object} [listener] The event listener function(s) * @param {object | boolean} [options] options object or useCapture flag for * addEventListener * @return {Interactable} This Interactable */ on(e, n, i) { return this._onOff("on", e, n, i); } /** * Removes an InteractEvent, pointerEvent or DOM event listener. * * @param {string | array | object} types The types of events that were * listened for * @param {function | array | object} [listener] The event listener function(s) * @param {object | boolean} [options] options object or useCapture flag for * removeEventListener * @return {Interactable} This Interactable */ off(e, n, i) { return this._onOff("off", e, n, i); } /** * Reset the options of this Interactable * * @param {object} options The new settings to apply * @return {object} This Interactable */ set(e) { const n = this._defaults; v.object(e) || (e = {}), this.options = te(n.base); for (const i in this._actions.methodDict) { const o = i, s = this._actions.methodDict[o]; this.options[o] = {}, this.setPerAction(o, z(z({}, n.perAction), n.actions[o])), this[s](e[o]); } for (const i in e) v.func(this[i]) && this[i](e[i]); return this; } /** * Remove this interactable from the list of interactables and remove it's * action capabilities and event listeners */ unset() { if (v.string(this.target)) for (const e in this._scopeEvents.delegatedEvents) { const n = this._scopeEvents.delegatedEvents[e]; for (let i = n.length - 1; i >= 0; i--) { const { selector: o, context: s, listeners: a } = n[i]; o === this.target && s === this._context && n.splice(i, 1); for (let r = a.length - 1; r >= 0; r--) this._scopeEvents.removeDelegate(this.target, this._context, e, a[r][0], a[r][1]); } } else this._scopeEvents.remove(this.target, "all"); } } class Mo { constructor(e) { // all set interactables g(this, "list", []); g(this, "selectorMap", {}); g(this, "scope"); this.scope = e, e.addListeners({ "interactable:unset": ({ interactable: n }) => { const { target: i, _context: o } = n, s = v.string(i) ? this.selectorMap[i] : i[this.scope.id], a = Me(s, (r) => r.context === o); s[a] && (s[a].context = null, s[a].interactable = null), s.splice(a, 1); } }); } new(e, n) { n = z(n || {}, { actions: this.scope.actions }); const i = new this.scope.Interactable(e, n, this.scope.document, this.scope.events), o = { context: i._context, interactable: i }; return this.scope.addDocument(i._doc), this.list.push(i), v.string(e) ? (this.selectorMap[e] || (this.selectorMap[e] = []), this.selectorMap[e].push(o)) : (i.target[this.scope.id] || Object.defineProperty(e, this.scope.id, { value: [], configurable: !0 }), e[this.scope.id].push(o)), this.scope.fire("interactable:new", { target: e, options: n, interactable: i, win: this.scope._win }), i; } get(e, n) { const i = n && n.context || this.scope.document, o = v.string(e), s = o ? this.selectorMap[e] : e[this.scope.id]; if (!s) return null; const a = an(s, (r) => r.context === i && (o || r.interactable.inContext(e))); return a && a.interactable; } forEachMatch(e, n) { for (const i of this.list) { let o; if ((v.string(i.target) ? ( // target is a selector and the element matches v.element(e) && Yt(e, i.target) ) : ( // target is the element e === i.target )) && // the element is in context i.inContext(e) && (o = n(i)), o !== void 0) return o; } } } function Co(t) { var e; const n = [], i = {}, o = [], s = { add: a, remove: r, addDelegate: l, removeDelegate: c, delegateListener: u, delegateUseCapture: f, delegatedEvents: i, documents: o, targets: n, supportsOptions: !1, supportsPassive: !1 }; (e = t.document) == null || e.createElement("div").addEventListener("test", null, { get capture() { return s.supportsOptions = !0; }, get passive() { return s.supportsPassive = !0; } }), t.events = s; function a(d, I, m, x) { const b = pe(x); let P = an(n, (C) => C.eventTarget === d); P || (P = { eventTarget: d, events: {} }, n.push(P)), P.events[I] || (P.events[I] = []), d.addEventListener && !go(P.events[I], m) && (d.addEventListener(I, m, s.supportsOptions ? b : b.capture), P.events[I].push(m)); } function r(d, I, m, x) { const b = pe(x), P = Me(n, (y) => y.eventTarget === d), C = n[P]; if (!C || !C.events) return; if (I === "all") { for (I in C.events) C.events.hasOwnProperty(I) && r(d, I, "all"); return; } let w = !1; const O = C.events[I]; if (O) { if (m === "all") { for (let y = O.length - 1; y >= 0; y--) r(d, I, O[y], b); return; } else for (let y = 0; y < O.length; y++) if (O[y] === m) { d.removeEventListener(I, m, s.supportsOptions ? b : b.capture), O.splice(y, 1), O.length === 0 && (delete C.events[I], w = !0); break; } } w && !Object.keys(C.events).length && n.splice(P, 1); } function l(d, I, m, x, b) { const P = pe(b); if (!i[m]) { i[m] = []; for (const O of o) a(O, m, u), a(O, m, f, !0); } const C = i[m]; let w = an(C, (O) => O.selector === d && O.context === I); w || (w = { selector: d, context: I, listeners: [] }, C.push(w)), w.listeners.push([x, P]); } function c(d, I, m, x, b) { const P = pe(b), C = i[m]; let w = !1, O; if (C) for (O = C.length - 1; O >= 0; O--) { const y = C[O]; if (y.selector === d && y.context === I) { const { listeners: h } = y; for (let $ = h.length - 1; $ >= 0; $--) { const [_, { capture: U, passive: G }] = h[$]; if (_ === x && U === P.capture && G === P.passive) { h.splice($, 1), h.length || (C.splice(O, 1), r(I, m, u), r(I, m, f, !0)), w = !0; break; } } if (w) break; } } } function u(d, I) { const m = pe(I), x = new Po(d), b = i[d.type], [P] = Di(d); let C = P; for (; v.element(C); ) { for (let w = 0; w < b.length; w++) { const O = b[w], { selector: y, context: h } = O; if (Yt(C, y) && Wt(h, P) && Wt(h, C)) { const { listeners: $ } = O; x.currentTarget = C; for (const [_, { capture: U, passive: G }] of $) U === m.capture && G === m.passive && _(x); } } C = Nt(C); } } function f(d) { return u.call(this, d, !0); } return s; } class Po { constructor(e) { g(this, "currentTarget"); g(this, "originalEvent"); g(this, "type"); this.originalEvent = e, Ei(this, e); } preventOriginalDefault() { this.originalEvent.preventDefault(); } stopPropagation() { this.originalEvent.stopPropagation(); } stopImmediatePropagation() { this.originalEvent.stopImmediatePropagation(); } } function pe(t) { if (!v.object(t)) return { capture: !!t, passive: !1 }; const e = z({}, t); return e.capture = !!t.capture, e.passive = !!t.passive, e; } const zo = { id: "events", install: Co }; class No { constructor(e, n, i, o, s) { g(this, "id"); g(this, "pointer"); g(this, "event"); g(this, "downTime"); g(this, "downTarget"); this.id = e, this.pointer = n, this.event = i, this.downTime = o, this.downTarget = s; } } let un; (function(t) { t.interactable = "", t.element = "", t.prepared = "", t.pointerIsDown = "", t.pointerWasMoved = "", t._proxy = ""; })(un || (un = {})); let fn; (function(t) { t.start = "", t.move = "", t.end = "", t.stop = "", t.interacting = ""; })(fn || (fn = {})); let ko = 0; class Lo { /** */ constructor({ pointerType: e, scopeFire: n }) { // current interactable being interacted with g(this, "interactable", null); // the target element of the interactable g(this, "element", null); g(this, "rect", null); g(this, "_rects"); g(this, "edges", null); g(this, "_scopeFire"); // action that's ready to be fired on next move event g(this, "prepared", { name: null, axis: null, edges: null }); g(this, "pointerType"); // keep track of added pointers g(this, "pointers", []); // pointerdown/mousedown/touchstart event g(this, "downEvent", null); g(this, "downPointer", {}); g(this, "_latestPointer", { pointer: null, event: null, eventTarget: null }); // previous action event g(this, "prevEvent", null); g(this, "pointerIsDown", !1); g(this, "pointerWasMoved", !1); g(this, "_interacting", !1); g(this, "_ending", !1); g(this, "_stopped", !0); g(this, "_proxy", null); g(this, "simulation", null); /** * @alias Interaction.prototype.move */ g(this, "doMove", we(function(e) { this.move(e); }, "The interaction.doMove() method has been renamed to interaction.move()")); g(this, "coords", { // Starting InteractEvent pointer coordinates start: he(), // Previous native pointer move event coordinates prev: he(), // current native pointer move event coordinates cur: he(), // Change in coordinates and time of the pointer delta: he(), // pointer velocity velocity: he() }); g(this, "_id", ko++); this._scopeFire = n, this.pointerType = e; const i = this; this._proxy = {}; for (const o in un) Object.defineProperty(this._proxy, o, { get() { return i[o]; } }); for (const o in fn) Object.defineProperty(this._proxy, o, { value: (...s) => i[o](...s) }); this._scopeFire("interactions:new", { interaction: this }); } /** @internal */ get pointerMoveTolerance() { return 1; } pointerDown(e, n, i) { const o = this.updatePointer(e, n, i, !0), s = this.pointers[o]; this._scopeFire("interactions:down", { pointer: e, event: n, eventTarget: i, pointerIndex: o, pointerInfo: s, type: "down", interaction: this }); } /** * ```js * interact(target) * .draggable({ * // disable the default drag start by down->move * manualStart: true * }) * // start dragging after the user holds the pointer down * .on('hold', function (event) { * var interaction = event.interaction * * if (!interaction.interacting()) { * interaction.start({ name: 'drag' }, * event.interactable, * event.currentTarget) * } * }) * ``` * * Start an action with the given Interactable and Element as tartgets. The * action must be enabled for the target Interactable and an appropriate * number of pointers must be held down - 1 for drag/resize, 2 for gesture. * * Use it with `interactable.<action>able({ manualStart: false })` to always * [start actions manually](https://github.com/taye/interact.js/issues/114) * * @param {object} action The action to be performed - drag, resize, etc. * @param {Interactable} target The Interactable to target * @param {Element} element The DOM Element to target * @return {Boolean} Whether the interaction was successfully started */ start(e, n, i) { return this.interacting() || !this.pointerIsDown || this.pointers.length < (e.name === "gesture" ? 2 : 1) || !n.options[e.name].enabled ? !1 : (Si(this.prepared, e), this.interactable = n, this.element = i, this.rect = n.getRect(i), this.edges = this.prepared.edges ? z({}, this.prepared.edges) : { left: !0, right: !0, top: !0, bottom: !0 }, this._stopped = !1, this._interacting = this._doPhase({ interaction: this, event: this.downEvent, phase: "start" }) && !this._stopped, this._interacting); } pointerMove(e, n, i) { !this.simulation && !(this.modification && this.modification.endResult) && this.updatePointer(e, n, i, !1); const o = this.coords.cur.page.x === this.coords.prev.page.x && this.coords.cur.page.y === this.coords.prev.page.y && this.coords.cur.client.x === this.coords.prev.client.x && this.coords.cur.client.y === this.coords.prev.client.y; let s, a; this.pointerIsDown && !this.pointerWasMoved && (s = this.coords.cur.client.x - this.coords.start.client.x, a = this.coords.cur.client.y - this.coords.start.client.y, this.pointerWasMoved = Pe(s, a) > this.pointerMoveTolerance); const r = this.getPointerIndex(e), l = { pointer: e, pointerIndex: r, pointerInfo: this.pointers[r], event: n, type: "move", eventTarget: i, dx: s, dy: a, duplicate: o, interaction: this }; o || xo(this.coords.velocity, this.coords.delta), this._scopeFire("interactions:move", l), !o && !this.simulation && (this.interacting() && (l.type = null, this.move(l)), this.pointerWasMoved && $e(this.coords.prev, this.coords.cur)); } /** * ```js * interact(target) * .draggable(true) * .on('dragmove', function (event) { * if (someCondition) { * // change the snap settings * event.interactable.draggable({ snap: { targets: [] }}) * // fire another move event with re-calculated snap * event.interaction.move() * } * }) * ``` * * Force a move of the current action at the same coordinates. Useful if * snap/restrict has been changed and you want a movement with the new * settings. */ move(e) { (!e || !e.event) && wo(this.coords.delta), e = z({ pointer: this._latestPointer.pointer, event: this._latestPointer.event, eventTarget: this._latestPointer.eventTarget, interaction: this }, e || {}), e.phase = "move", this._doPhase(e); } // End interact move events and stop auto-scroll unless simulation is running pointerUp(e, n, i, o) { let s = this.getPointerIndex(e); s === -1 && (s = this.updatePointer(e, n, i, !1)); const a = /cancel$/i.test(n.type) ? "cancel" : "up"; this._scopeFire(`interactions:${a}`, { pointer: e, pointerIndex: s, pointerInfo: this.pointers[s], event: n, eventTarget: i, type: a, curEventTarget: o, interaction: this }), this.simulation || this.end(n), this.removePointer(e, n); } documentBlur(e) { this.end(e), this._scopeFire("interactions:blur", { event: e, type: "blur", interaction: this }); } /** * ```js * interact(target) * .draggable(true) * .on('move', function (event) { * if (event.pageX > 1000) { * // end the current action * event.interaction.end() * // stop all further listeners from being called * event.stopImmediatePropagation() * } * }) * ``` * * @param {PointerEvent} [event] */ end(e) { this._ending = !0, e = e || this._latestPointer.event; let n; this.interacting() && (n = this._doPhase({ event: e, interaction: this, phase: "end" })), this._ending = !1, n === !0 && this.stop(); } currentAction() { return this._interacting ? this.prepared.name : null; } interacting() { return this._interacting; } /** */ stop() { this._scopeFire("interactions:stop", { interaction: this }), this.interactable = this.element = null, this._interacting = !1, this._stopped = !0, this.prepared.name = this.prevEvent = null; } getPointerIndex(e) { const n = De(e); return this.pointerType === "mouse" || this.pointerType === "pen" ? this.pointers.length - 1 : Me(this.pointers, (i) => i.id === n); } getPointerInfo(e) { return this.pointers[this.getPointerIndex(e)]; } updatePointer(e, n, i, o) { const s = De(e); let a = this.getPointerIndex(e), r = this.pointers[a]; return o = o === !1 ? !1 : o || /(down|start)$/i.test(n.type), r ? r.pointer = e : (r = new No(s, e, n, null, null), a = this.pointers.length, this.pointers.push(r)), Io(this.coords.cur, this.pointers.map((l) => l.pointer), this._now()), yo(this.coords.delta, this.coords.prev, this.coords.cur), o && (this.pointerIsDown = !0, r.downTime = this.coords.cur.timeStamp, r.downTarget = i, Ei(this.downPointer, e), this.interacting() || ($e(this.coords.start, this.coords.cur), $e(this.coords.prev, this.coords.cur), this.downEvent = n, this.pointerWasMoved = !1)), this._updateLatestPointer(e, n, i), this._scopeFire("interactions:update-pointer", { pointer: e, event: n, eventTarget: i, down: o, pointerInfo: r, pointerIndex: a, interaction: this }), a; } removePointer(e, n) { const i = this.getPointerIndex(e); if (i === -1) return; const o = this.pointers[i]; this._scopeFire("interactions:remove-pointer", { pointer: e, event: n, eventTarget: null, pointerIndex: i, pointerInfo: o, interaction: this }), this.pointers.splice(i, 1), this.pointerIsDown = !1; } _updateLatestPointer(e, n, i) { this._latestPointer.pointer = e, this._latestPointer.event = n, this._latestPointer.eventTarget = i; } destroy() { this._latestPointer.pointer = null, this._latestPointer.event = null, this._latestPointer.eventTarget = null; } _createPreparedEvent(e, n, i, o) { return new wn(this, e, this.prepared.name, n, this.element, i, o); } _fireEvent(e) { var n; (n = this.interactable) == null || n.fire(e), (!this.prevEvent || e.timeStamp >= this.prevEvent.timeStamp) && (this.prevEvent = e); } _doPhase(e) { const { event: n, phase: i, preEnd: o, type: s } = e, { rect: a } = this; if (a && i === "move" && (yn(this.edges, a, this.coords.delta[this.interactable.options.deltaSource]), a.width = a.right - a.left, a.height = a.bottom - a.top), this._scopeFire(`interactions:before-action-${i}`, e) === !1) return !1; const l = e.iEvent = this._createPreparedEvent(n, i, o, s); return this._scopeFire(`interactions:action-${i}`, e), i === "start" && (this.prevEvent = l), this._fireEvent(l), this._scopeFire(`interactions:after-action-${i}`, e), !0; } _now() { return Date.now(); } } function Ho(t) { return /^(always|never|auto)$/.test(t) ? (this.options.preventDefault = t, this) : v.bool(t) ? (this.options.preventDefault = t ? "always" : "never", this) : this.options.preventDefault; } function Bo(t, e, n) { const i = t.options.preventDefault; if (i !== "never") { if (i === "always") { n.preventDefault(); return; } if (e.events.supportsPassive && /^touch(start|move)$/.test(n.type)) { const o = Ut(n.target).document, s = e.getDocOptions(o); if (!(s && s.events) || s.events.passive !== !1) return; } /^(mouse|pointer|touch)*(down|start)/i.test(n.type) || v.element(n.target) && Yt(n.target, "input,select,textarea,[contenteditable=true],[contenteditable=true] *") || n.preventDefault(); } } function $o({ interaction: t, event: e }) { t.interactable && t.interactable.checkAndPreventDefault(e); } function Wo(t) { const { Interactable: e } = t; e.prototype.preventDefault = Ho, e.prototype.checkAndPreventDefault = function(n) { return Bo(this, t, n); }, t.interactions.docEvents.push({ type: "dragstart", listener(n) { for (const i of t.interactions.list) if (i.element && (i.element === n.target || Wt(i.element, n.target))) { i.interactable.checkAndPreventDefault(n); return; } } }); } const Fo = { id: "core/interactablePreventDefault", install: Wo, listeners: ["down", "move", "up", "cancel"].reduce((t, e) => (t[`interactions:${e}`] = $o, t), {}) }, dn = { methodOrder: ["simulationResume", "mouseOrPen", "hasPointer", "idle"], search(t) { for (const e of dn.methodOrder) { const n = dn[e](t); if (n) return n; } return null; }, // try to resume simulation with a new pointer simulationResume({ pointerType: t, eventType: e, eventTarget: n, scope: i }) { if (!/down|start/i.test(e)) return null; for (const o of i.interactions.list) { let s = n; if (o.simulation && o.simulation.allowResume && o.pointerType === t) for (; s; ) { if (s === o.element) return o; s = Nt(s); } } return null; }, // if it's a mouse or pen interaction mouseOrPen({ pointerId: t, pointerType: e, eventType: n, scope: i }) { if (e !== "mouse" && e !== "pen") return null; let o; for (const s of i.interactions.list) if (s.pointerType === e) { if (s.simulation && !Cn(s, t)) continue; if (s.interacting()) return s; o || (o = s); } if (o) return o; for (const s of i.interactions.list) if (s.pointerType === e && !(/down/i.test(n) && s.simulation)) return s; return null; }, // get interaction that has this pointer hasPointer({ pointerId: t, scope: e }) { for (const n of e.interactions.list) if (Cn(n, t)) return n; return null; }, // get first idle interaction with a matching pointerType idle({ pointerType: t, scope: e }) { for (const n of e.interactions.list) { if (n.pointers.length === 1) { const i = n.interactable; if (i && !(i.options.gesture && i.options.gesture.enabled)) continue; } else if (n.pointers.length >= 2) continue; if (!n.interacting() && t === n.pointerType) return n; } return null; } }; function Cn(t, e) { return t.pointers.some(({ id: n }) => n === e); } const Ai = ["pointerDown", "pointerMove", "pointerUp", "updatePointer", "removePointer", "windowBlur"]; function Uo(t) { const e = {}; for (const s of Ai) e[s] = Ti(s, t); const n = st.pEventTypes; let i; nt.PointerEvent ? i = [{ type: n.down, listener: o }, { type: n.down, listener: e.pointerDown }, { type: n.move, listener: e.pointerMove }, { type: n.up, listener: e.pointerUp }, { type: n.cancel, listener: e.pointerUp }] : i = [{ type: "mousedown", listener: e.pointerDown }, { type: "mousemove", listener: e.pointerMove }, { type: "mouseup", listener: e.pointerUp }, { type: "touchstart", listener: o }, { type: "touchstart", listener: e.pointerDown }, { type: "touchmove", listener: e.pointerMove }, { type: "touchend", listener: e.pointerUp }, { type: "touchcancel", listener: e.pointerUp }], i.push({ type: "blur", listener(s) { for (const a of t.interactions.list) a.documentBlur(s); } }), t.prevTouchTime = 0, t.Interaction = class extends Lo { get pointerMoveTolerance() { return t.interactions.pointerMoveTolerance; } set pointerMoveTolerance(s) { t.interactions.pointerMoveTolerance = s; } _now() { return t.now(); } }, t.interactions = { // all active and idle interactions list: [], new(s) { s.scopeFire = (r, l) => t.fire(r, l); const a = new t.Interaction(s); return t.interactions.list.push(a), a; }, listeners: e, docEvents: i, pointerMoveTolerance: 1 }; function o() { for (const s of t.interactions.list) if (!(!s.pointerIsDown || s.pointerType !== "touch" || s._interacting)) for (const a of s.pointers) t.documents.some(({ doc: r }) => Wt(r, a.downTarget)) || s