gesturx 1.0.0 → 1.2.0

package/dist/index.js

@@ -0,0 +1,627 @@
+var ae = Object.defineProperty;
+var ce = (e, n, t) => n in e ? ae(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t;
+var w = (e, n, t) => (ce(e, typeof n != "symbol" ? n + "" : n, t), t);
+import { filter as v, NEVER as K, merge as A, BehaviorSubject as le, scan as E, map as h, fromEvent as b, mergeMap as T, defer as ge, of as q, takeUntil as x, endWith as he, switchMap as R, exhaustMap as j, shareReplay as Q, withLatestFrom as Y, first as O, share as M, skipUntil as $e, combineLatest as S, ignoreElements as ue, timer as de, buffer as ve, debounceTime as fe, distinctUntilChanged as z } from "rxjs";
+function Ae(e, n) {
+  return Math.sqrt(
+    Math.pow(n.x - e.x, 2) + Math.pow(n.y - e.y, 2)
+  );
+}
+function De(e) {
+  const n = e.length;
+  if (n < 2)
+    return 0;
+  const t = e.reduce((o, r, p) => o + e.slice(p + 1).reduce((l, a) => l + Ae(r, a), 0), 0), s = n * (n - 1) / 2;
+  return t / s;
+}
+function _(e, n) {
+  const t = n.x - e.x, s = n.y - e.y;
+  return Math.atan2(s, t);
+}
+function ye(e, n) {
+  return _(e, n) * (180 / Math.PI);
+}
+function C(e) {
+  const n = e.reduce(
+    (s, o) => (s.x += o.x, s.y += o.y, s),
+    { x: 0, y: 0 }
+  ), t = e.length || 1;
+  return {
+    x: n.x / t,
+    y: n.y / t
+  };
+}
+function me(e, n) {
+  if (e.length !== n.length)
+    throw new Error("Initial and new points arrays must have the same length.");
+  const t = C(e), s = C(n);
+  let o = 0;
+  for (let l = 0; l < e.length; l++) {
+    const a = _(
+      t,
+      e[l]
+    );
+    let c = _(
+      s,
+      n[l]
+    ) - a;
+    c > Math.PI ? c -= 2 * Math.PI : c < -Math.PI && (c += 2 * Math.PI), o += c;
+  }
+  const r = o / e.length, p = r * (180 / Math.PI);
+  return { radianDelta: r, degreesDelta: p };
+}
+function we(e) {
+  return e != null;
+}
+const Pe = (e) => e.length > 0, Me = (e) => e.pipe(v(Pe));
+function Z(e, n, t) {
+  const s = C([e]), o = C([n]);
+  return Math.abs(o.x - s.x) > t || Math.abs(o.y - s.y) > t;
+}
+const Te = (e) => e != null && e.length ? A(...(e == null ? void 0 : e.map(({ start$: n }) => n)) ?? []) : K, xe = (e, n, t) => {
+  const s = e > 0 ? n / e : 0, o = e > 0 ? t / e : 0;
+  return {
+    velocityX: s,
+    velocityY: o
+  };
+};
+class F {
+  constructor(n) {
+    w(this, "config$", new le({}));
+    w(this, "validConfig$", this.config$.pipe(
+      v(
+        (n) => !!n.container
+      )
+    ));
+    this.update(n);
+  }
+  initialize(n) {
+    const t = this.config$.getValue();
+    this.config$.next({
+      ...t,
+      ...n,
+      options: {
+        ...t.options,
+        ...n.options
+      }
+    });
+  }
+  update(n) {
+    const t = this.config$.getValue();
+    this.config$.next({
+      ...t,
+      options: {
+        ...t.options,
+        ...n
+      }
+    });
+  }
+}
+const J = (e, n, t, s) => {
+  const o = e.x - n.x + t, r = e.y - n.y + s;
+  return {
+    deltaX: o,
+    deltaY: r
+  };
+}, W = (e) => {
+  const n = (t) => C(
+    t.latestActivePointers.length ? t.latestActivePointers : [t.event]
+  );
+  return e.pipe(
+    E(
+      (t, s) => {
+        var D, m;
+        const o = n(s), r = t.center, p = t.deltaX, l = t.deltaY, a = ((D = t.latestActivePointers) == null ? void 0 : D.length) ?? 0, $ = ((m = s.latestActivePointers) == null ? void 0 : m.length) ?? 0, c = [
+          "pointerdown",
+          "pointercancel",
+          "pointerleave",
+          "pointerup"
+        ].includes(s.event.type) && a !== $, i = $ > 0, { deltaX: g, deltaY: d } = c && i ? J(o, o, p, l) : J(o, r, p, l), { degreesDelta: f } = a === $ && a >= 2 && $ >= 2 ? me(
+          t.latestActivePointers ?? [],
+          s.latestActivePointers ?? []
+        ) : { degreesDelta: 0 };
+        return {
+          startTime: (/* @__PURE__ */ new Date()).getTime(),
+          ...t,
+          ...s,
+          center: o,
+          deltaX: g,
+          deltaY: d,
+          deltaPointersAngle: f
+        };
+      },
+      {
+        deltaX: 0,
+        deltaY: 0,
+        center: { x: 0, y: 0 },
+        latestActivePointers: []
+      }
+    ),
+    h((t) => {
+      const {
+        deltaX: s,
+        deltaY: o,
+        latestActivePointers: r,
+        startTime: p,
+        center: l,
+        event: a,
+        deltaPointersAngle: $
+      } = t, c = r ?? [], g = Date.now() - p, { velocityX: d, velocityY: f } = xe(g, s, o), D = De(r);
+      return {
+        deltaX: s,
+        deltaY: o,
+        velocityX: d,
+        velocityY: f,
+        delay: g,
+        center: l,
+        pointers: c,
+        startTime: p,
+        event: a,
+        deltaPointersAngle: $,
+        pointersAverageDistance: D
+      };
+    })
+  );
+};
+function U(e) {
+  return (n) => n.pipe(
+    v((t) => t.pointerId === e.pointerId)
+  );
+}
+const N = ({
+  container: e,
+  afterEventReceived: n = (t) => t
+}) => {
+  const t = ee({ afterEventReceived: n, container: e }), s = b(e, "pointerup").pipe(
+    h(n)
+  ), o = b(e, "pointermove").pipe(
+    h(n)
+  ), r = b(e, "pointerleave").pipe(
+    h(n)
+  ), p = b(
+    e,
+    "pointercancel"
+  ).pipe(h(n));
+  return {
+    pointerDown$: t,
+    pointerCancel$: p,
+    pointerLeave$: r,
+    pointerUp$: s,
+    pointerMove$: o
+  };
+}, ee = ({
+  container: e,
+  afterEventReceived: n = (t) => t
+}) => b(e, "pointerdown").pipe(
+  h(n)
+), V = ({
+  pointerCancel$: e,
+  pointerLeave$: n,
+  pointerUp$: t,
+  pointerMove$: s,
+  trackMove: o
+}) => (r) => r.pipe(
+  T((p) => {
+    const l = A(
+      t,
+      n,
+      e
+    ).pipe(U(p)), a = ge(() => q(p));
+    return A(
+      a,
+      o ? s : K
+    ).pipe(
+      U(p),
+      h((c) => ({ id: c.pointerId, event: c })),
+      x(l),
+      he({ id: p.pointerId, event: void 0 })
+    );
+  }),
+  E(
+    (p, { event: l, id: a }) => {
+      if (!l) {
+        const { [a]: $, ...c } = p;
+        return c;
+      }
+      return {
+        ...p,
+        [a]: l
+      };
+    },
+    {}
+  ),
+  h((p) => Object.values(p).filter(we))
+);
+class B extends F {
+  constructor(t = {}) {
+    super(t);
+    w(this, "events$");
+    w(this, "start$");
+    w(this, "end$");
+    w(this, "fingers$");
+    this.options = t, this.events$ = this.validConfig$.pipe(
+      R((s) => {
+        const { container: o, afterEventReceived: r } = s, { posThreshold: p = 15 } = s.options ?? {}, {
+          pointerCancel$: l,
+          pointerDown$: a,
+          pointerLeave$: $,
+          pointerMove$: c,
+          pointerUp$: i
+        } = N({
+          container: o,
+          afterEventReceived: r
+        });
+        return a.pipe(
+          j((g) => {
+            const d = A(
+              q(g),
+              a
+            ), f = A(
+              l,
+              a,
+              $,
+              c,
+              i
+            ), D = d.pipe(
+              V({
+                pointerCancel$: l,
+                pointerLeave$: $,
+                pointerUp$: i,
+                pointerMove$: c,
+                trackMove: !0
+              }),
+              Q()
+            ), m = A(
+              i,
+              $,
+              l
+            ).pipe(
+              Y(D),
+              v(([u, y]) => !y.length),
+              h(([u]) => u),
+              O(),
+              M()
+            ), I = d.pipe(
+              T(
+                (u) => c.pipe(
+                  U(u),
+                  // we start pan only if the user started moving a certain distance
+                  v(
+                    (y) => Z(
+                      u,
+                      y,
+                      p
+                    )
+                  )
+                )
+              ),
+              O()
+            ).pipe(
+              h(() => ({
+                type: "panStart",
+                event: g
+              })),
+              M(),
+              x(m)
+            ), k = I.pipe(
+              T(
+                () => m.pipe(
+                  h((u) => ({
+                    type: "panEnd",
+                    event: u
+                  }))
+                )
+              )
+            ), L = f.pipe(
+              $e(I),
+              h((u) => ({
+                type: "panMove",
+                event: u
+              })),
+              x(m)
+            ), X = A(I, L, k).pipe(
+              Y(D),
+              h(([u, y]) => ({
+                ...u,
+                latestActivePointers: y
+              })),
+              M()
+            );
+            return S([
+              X.pipe(W),
+              X
+            ]).pipe(
+              h(([u, { type: y }]) => ({
+                ...u,
+                type: y
+              }))
+            );
+          })
+        );
+      }),
+      M()
+    ), this.start$ = this.events$.pipe(
+      v((s) => s.type === "panStart")
+    ), this.end$ = this.events$.pipe(v((s) => s.type === "panEnd")), this.fingers$ = this.validConfig$.pipe(
+      R(({ container: s, afterEventReceived: o }) => {
+        const r = N({
+          container: s,
+          afterEventReceived: o
+        });
+        return r.pointerDown$.pipe(
+          V({
+            ...r,
+            trackMove: !1
+          })
+        );
+      }),
+      h((s) => s.length)
+    );
+  }
+}
+const Re = (e) => (n) => n.pipe(
+  v((t) => Math.abs(t.velocityX) >= e || Math.abs(t.velocityY) >= e)
+);
+class be extends F {
+  constructor(t = {}) {
+    super(t);
+    w(this, "events$");
+    this.options = t, this.events$ = this.validConfig$.pipe(
+      R((s) => {
+        const { escapeVelocity: o = 0.9, posThreshold: r } = s.options ?? {}, p = new B({ posThreshold: r });
+        p.initialize(s);
+        const l = p.events$.pipe(
+          v(({ pointers: a }) => a.length > 1)
+        );
+        return p.start$.pipe(
+          j((a) => p.end$.pipe(
+            O(),
+            Re(o),
+            h(({ type: $, ...c }) => ({
+              type: "swipe",
+              angle: ye(
+                a.event,
+                c.event
+              ),
+              ...c
+            })),
+            x(l)
+          )),
+          M()
+        );
+      })
+    );
+  }
+}
+class Ce extends F {
+  constructor(t) {
+    super(t);
+    w(this, "events$");
+    this.options = t, this.events$ = this.validConfig$.pipe(
+      R((s) => {
+        const { container: o, afterEventReceived: r } = s, {
+          multiTapThreshold: p = 200,
+          maximumPressTime: l = 250,
+          maxTaps: a = 2,
+          // threshold should be high because of fingers size
+          // and potential margin due to it. clicks are nearly perfect
+          // not fingers.
+          posThreshold: $ = 10,
+          failWith: c
+        } = s.options ?? {}, { pointerUp$: i, pointerLeave$: g, pointerCancel$: d, pointerMove$: f } = N({
+          container: o,
+          afterEventReceived: r
+        }), D = ee({ container: o, afterEventReceived: r }), m = D.pipe(
+          V({
+            pointerCancel$: d,
+            pointerLeave$: g,
+            pointerMove$: f,
+            pointerUp$: i,
+            trackMove: !1
+          }),
+          Q(1)
+        ), G = m.pipe(
+          v((u) => u.length > 1)
+        ), I = (u) => u.pipe(
+          Y(m),
+          v(([, y]) => y.length === 1),
+          h(([y]) => y)
+        ), k = (u) => u.pipe(
+          ve(i.pipe(fe(p))),
+          O()
+        ), L = Te(c);
+        return A(
+          D,
+          m.pipe(ue())
+        ).pipe(
+          I,
+          j((u) => {
+            const y = A(q(u), D), te = A(
+              i,
+              g,
+              d,
+              f
+            ), ne = y.pipe(k), se = te.pipe(
+              v(
+                (P) => Z(
+                  u,
+                  P,
+                  $
+                )
+              ),
+              O()
+            ), oe = m.pipe(
+              R(() => de(l))
+            ), ie = A(
+              L,
+              d,
+              G,
+              se,
+              oe
+            ), H = ne.pipe(
+              Me,
+              v((P) => P.length <= a),
+              h((P) => ({
+                type: "tap",
+                taps: P.length,
+                latestActivePointers: P,
+                event: P[0]
+              }))
+            );
+            return S([
+              H.pipe(W),
+              H
+            ]).pipe(
+              h(([P, { type: re, taps: pe }]) => ({
+                ...P,
+                type: re,
+                taps: pe
+              })),
+              x(ie)
+            );
+          })
+        );
+      }),
+      M()
+    );
+  }
+}
+class Fe extends F {
+  constructor(t = {}) {
+    super(t);
+    w(this, "events$");
+    this.options = t, this.events$ = this.config$.pipe(
+      R((s) => {
+        const { posThreshold: o } = s.options ?? {}, r = new B({ posThreshold: o });
+        r.initialize(s);
+        const p = r.events$.pipe(
+          v(({ pointers: i }) => i.length < 2),
+          z()
+        ), a = r.events$.pipe(
+          h((i) => [i, i.pointers.length > 1]),
+          z(
+            ([i, g], [d, f]) => g === f
+          ),
+          v(([i, g]) => g)
+        ).pipe(
+          h(([i]) => ({
+            ...i,
+            type: "rotateStart",
+            angle: 0,
+            deltaAngle: 0
+          }))
+        ), $ = a.pipe(
+          T(
+            () => r.events$.pipe(
+              E(
+                (i, g) => {
+                  const d = i.angle + g.deltaPointersAngle;
+                  return {
+                    ...i,
+                    ...g,
+                    type: "rotate",
+                    angle: d,
+                    deltaAngle: g.deltaPointersAngle
+                  };
+                },
+                { angle: 0, deltaAngle: 0 }
+              ),
+              x(p)
+            )
+          )
+        ), c = a.pipe(
+          T(
+            () => S([$, p]).pipe(
+              O(),
+              h(([i]) => ({
+                ...i,
+                type: "rotateEnd"
+              }))
+            )
+          )
+        );
+        return A(a, $, c);
+      })
+    );
+  }
+}
+class ze extends F {
+  constructor(t = {}) {
+    super(t);
+    w(this, "events$");
+    this.options = t, this.events$ = this.config$.pipe(
+      R((s) => {
+        const { posThreshold: o } = s.options ?? {}, r = new B({ posThreshold: o });
+        r.initialize(s);
+        const p = r.events$.pipe(
+          v(({ pointers: i }) => i.length < 2),
+          z()
+        ), a = r.events$.pipe(
+          h((i) => [i, i.pointers.length > 1]),
+          z(
+            ([i, g], [d, f]) => g === f
+          ),
+          v(([i, g]) => g)
+        ).pipe(
+          h(([i]) => ({
+            ...i,
+            type: "pinchStart",
+            scale: 1,
+            distance: 0,
+            deltaDistance: 0,
+            deltaDistanceScale: 1
+          }))
+        ), $ = a.pipe(
+          T((i) => r.events$.pipe(
+            E(
+              (g, d) => {
+                const f = g.pointersAverageDistance ?? d.pointersAverageDistance, D = d.pointersAverageDistance / i.pointersAverageDistance;
+                return {
+                  ...g,
+                  ...d,
+                  scale: D,
+                  distance: d.pointersAverageDistance - i.pointersAverageDistance,
+                  deltaDistance: d.pointersAverageDistance - f,
+                  deltaDistanceScale: d.pointersAverageDistance / f,
+                  type: "pinchMove"
+                };
+              },
+              { scale: 0 }
+            ),
+            x(p)
+          ))
+        ), c = a.pipe(
+          T(
+            () => S([$, p]).pipe(
+              O(),
+              h(([i]) => ({
+                ...i,
+                type: "pinchEnd"
+              }))
+            )
+          )
+        );
+        return A(a, $, c);
+      })
+    );
+  }
+}
+const Ee = ({
+  afterEventReceived: e = (t) => t,
+  recognizers: n
+}) => ({ events$: A(
+  ...n.map((o) => o.events$)
+).pipe(M()), initialize: (o) => {
+  o.style.touchAction = "none", o.style.userSelect = "none", n.forEach((r) => {
+    r.initialize({ container: o, afterEventReceived: e });
+  });
+}, recognizers: n });
+export {
+  B as PanRecognizer,
+  ze as PinchRecognizer,
+  Fe as RotateRecognizer,
+  be as SwipeRecognizer,
+  Ce as TapRecognizer,
+  Ee as createManager
+};
+//# sourceMappingURL=index.js.map