@ngutil/aria 0.0.71 → 0.0.73

package/fesm2022/ngutil-aria.mjs

@@ -356,6 +356,7 @@ function eventToKeystroke(event) {
     };
 }
 
+const PHANTOM = Symbol("phantom");
 const Listeners = {
     mousedown: {
         pointerType: "mouse" /* GesturePointerType.Mouse */,
@@ -401,44 +402,74 @@ const Listeners = {
 };
 
 class Gesture {
-    constructor(name, listeners, options = {}) {
+    constructor(name, options = {}) {
         this.name = name;
-        // TODO maybe global option
+        /**
+         * Gestures that depends on move distance, like drag, use this option
+         */
         this.distanceInclusion = 10;
-        // TODO maybe global option
+        /**
+         * Gestures thet dependnso on time frame, like longtap, use this option
+         */
         this.timeWithin = 300;
+        /**
+         * The priority of the gesture
+         */
         this.priority = 0;
+        /**
+         * Should the gesture include the scroll distance
+         */
         this.includeScrollDistance = false;
-        this.filterPointerTypes = ["mouse" /* GesturePointerType.Mouse */, "touch" /* GesturePointerType.Touch */];
-        this.filterMouseButtons = [0];
-        this.filterByEvent = (event) => this.filterPointerTypes.includes(event.pointerType) &&
-            // this.filterListeners.includes(event.origin.type as any) &&
-            (event.pointerType !== "mouse" /* GesturePointerType.Mouse */ ||
-                (event.origin instanceof MouseEvent && this.filterMouseButtons.includes(event.origin.button)));
+        /**
+         * The pointer types of the gesture
+         */
+        this.pointerTypes = ["mouse" /* GesturePointerType.Mouse */, "touch" /* GesturePointerType.Touch */];
+        /**
+         * The number of pointers of the gesture can handle
+         */
+        this.pointerCount = 1;
+        /**
+         * The mouse buttons of the gesture (1 = left, 2 = middle, 3 = right)
+         */
+        this.mouseButtons = [0];
         Object.assign(this, options);
-        this.filterListeners = listeners.filter(v => this.filterPointerTypes.includes(Listeners[v].pointerType));
+        this.originTypes = Object.keys(Listeners).filter(v => this.pointerTypes.includes(Listeners[v].pointerType));
     }
     /**
-     * Transform input event, to gesture event
+     * Transform input event, to gesture event.
+     * The given events is filterde by {@see Gesture#isRelevantEvent}
      * ! important, dont rely on this object state, because not always create a new object
+     * @param events events to transform or filter or leave as is
      */
     handle(events) {
-        return events.pipe(tap(event => (event.type = this.name)));
+        return events;
+    }
+    /**
+     * Should this gesture capture the event?
+     * @param event event to check
+     * @returns true if the gesture should capture the event, false otherwise
+     */
+    shouldCapture(event) {
+        return this.isRelevantEvent(event);
+    }
+    /**
+     * Test if the event is relevant to the gesture.
+     * The event is relevant if
+     * @param event event to check
+     * @returns true if the event is relevant, false otherwise
+     */
+    isRelevantEvent(event) {
+        return (this.pointerTypes.includes(event.pointerType) &&
+            this.pointerCount === event.pointers.length &&
+            this.originTypes.includes(event.origin.type) &&
+            (event.pointerType !== "mouse" /* GesturePointerType.Mouse */ ||
+                (event.origin instanceof MouseEvent && this.mouseButtons.includes(event.origin.button))));
     }
 }
 
-const DRAG_LISTENERS = [
-    "mousedown",
-    "mousemove",
-    "mouseup",
-    "touchstart",
-    "touchmove",
-    "touchend",
-    "touchcancel"
-];
 class GestureDragImpl extends Gesture {
     constructor(options) {
-        super("gesture-drag", DRAG_LISTENERS, { includeScrollDistance: true, ...options });
+        super("gesture-drag", { includeScrollDistance: true, ...options });
         if (this.horizontal == null && this.vertical == null) {
             this.horizontal = true;
             this.vertical = true;
@@ -446,9 +477,6 @@ class GestureDragImpl extends Gesture {
     }
     capture(events) {
         return events.pipe(map(state => {
-            if (state.pointers.length !== 1) {
-                return 2 /* GestureCaptureState.Skip */;
-            }
             if (Math.abs(state.pointers[0].distance.x) > this.distanceInclusion) {
                 return this.horizontal ? 3 /* GestureCaptureState.Maybe */ : 2 /* GestureCaptureState.Skip */;
             }
@@ -464,7 +492,7 @@ class GestureDragImpl extends Gesture {
             : this.horizontal
                 ? updateHorizontalOnly
                 : updateVerticalOnly;
-        return super.handle(events).pipe(tap(updater));
+        return super.handle(events).pipe(tap((updater)));
     }
 }
 function updateVerticalOnly(event) {
@@ -475,7 +503,6 @@ function updateVerticalOnly(event) {
     updateEvent(event, updateByScrollDistanceVertical);
 }
 function updateHorizontalOnly(event) {
-    console.log("updateHorizontalOnly");
     const pointer = event.pointers[0];
     pointer.distance.y = 0;
     pointer.direction.y = 0;
@@ -520,14 +547,11 @@ const GestureDargVertical = gestureDrag({ horizontal: false, vertical: true });
 
 class GestureLongTapImpl extends Gesture {
     constructor(options) {
-        super("gesture-longtap", ["touchstart", "touchmove", "touchend", "touchcancel"], {
-            filterPointerTypes: ["touch" /* GesturePointerType.Touch */],
-            ...options
-        });
+        super("gesture-longtap", { pointerTypes: ["touch" /* GesturePointerType.Touch */], ...options });
     }
     capture(events) {
         return combineLatest({ timeWithin: timer(this.timeWithin).pipe(startWith(null)), event: events }).pipe(map(({ timeWithin, event }) => {
-            if (event.pointers.length !== 1 || event.elapsed > this.timeWithin) {
+            if (event.elapsed > this.timeWithin) {
                 return 2 /* GestureCaptureState.Skip */;
             }
             if (event.phase === "end" /* GesturePhase.End */ && event.elapsed > this.timeWithin) {
@@ -554,19 +578,22 @@ const GestureLongTap = gestureLongTap();
 
 class GestureTapImpl extends Gesture {
     constructor(options) {
-        super("gesture-tap", ["touchstart", "touchmove", "touchend", "touchcancel", "mousedown", "mousemove", "mouseup"], {
-            filterPointerTypes: ["mouse" /* GesturePointerType.Mouse */, "touch" /* GesturePointerType.Touch */],
-            ...options
-        });
+        super("gesture-tap", options);
     }
-    // TODO
     capture(events) {
         return events.pipe(map(event => {
-            if (event.pointers.length !== 1) {
-                return 2 /* GestureCaptureState.Skip */;
-            }
             const distance = event.pointers[0].distance;
             if (Math.abs(distance.x) < this.distanceInclusion && Math.abs(distance.y) < this.distanceInclusion) {
+                // TODO
+                // if (event.phase === GesturePhase.End) {
+                //     if (event.target === event.origin.target || event.target.contains(event.origin.target)) {
+                //         return GestureCaptureState.Instant
+                //     } else {
+                //         return GestureCaptureState.Skip
+                //     }
+                // } else {
+                //     return GestureCaptureState.Pending
+                // }
                 return event.phase === "end" /* GesturePhase.End */ ? 4 /* GestureCaptureState.Instant */ : 1 /* GestureCaptureState.Pending */;
             }
             else {
@@ -615,10 +642,11 @@ class GestureService {
         }), filter(() => false)))), 
         // Select active watchers
         map(event => {
+            updatePointers(event);
             const eventTarget = event.target;
             let includeScrollDistance = false;
             const gestures = this.#watchers
-                .filter(({ gesture, el }) => gesture.filterByEvent(event) &&
+                .filter(({ gesture, el }) => gesture.shouldCapture(event) &&
                 (el === eventTarget || ("contains" in el && el.contains(eventTarget))))
                 .reduce((gestures, { gesture }) => {
                 if (!gestures.has(gesture)) {
@@ -627,13 +655,13 @@ class GestureService {
                 }
                 return gestures;
             }, new Map());
-            return { startEvent: event, gestures, includeScrollDistance };
+            return { detail: event, gestures, includeScrollDistance };
         }), filter(({ gestures }) => gestures.size > 0), tap(this.#disableTouchAction)
         // finalize(() => console.log("FINALIZE BEGIN"))
         )
             .subscribe(dst);
     });
-    #gesture = this.#begin.pipe(switchMap(({ startEvent, gestures, includeScrollDistance }) => {
+    #gesture = this.#begin.pipe(switchMap(({ detail: startEvent, gestures, includeScrollDistance }) => {
         const pointerType = startEvent.pointerType;
         const startAt = startEvent.origin.timeStamp;
         const dispatchEvent = startEvent.target[DISPATCH_EVENT].bind(startEvent.target);
@@ -657,7 +685,7 @@ class GestureService {
         share());
         const captureState = eventStream.pipe(connect(src => {
             const state = { events: [], gestures, includeScrollDistance };
-            return merge(src.pipe(tap(event => state.events.push(event))), ...Array.from(gestures.keys()).map(gesture => gesture.capture(src.pipe(filter(gesture.filterByEvent))).pipe(takeWhile(result => result !== 2 /* GestureCaptureState.Skip */, true), tap(result => gestures.set(gesture, result))))).pipe(map(() => state));
+            return merge(src.pipe(tap(event => state.events.push(event))), ...Array.from(gestures.keys()).map(gesture => gesture.capture(src.pipe(filter(gesture.shouldCapture.bind(gesture)))).pipe(takeWhile(result => result !== 2 /* GestureCaptureState.Skip */, true), tap(result => gestures.set(gesture, result))))).pipe(map(() => state));
         })
         // ,finalize(() => console.log("FINALIZE CAPTURE"))
         );
@@ -694,7 +722,9 @@ class GestureService {
         }), takeWhile(isFalsy, true), filter(isTruthy), takeWhile(v => v.gesture != null, false)
         // finalize(() => console.log("FINALIZE SELECT"))
         );
-        return selectGesture.pipe(switchMap(({ events, gesture }) => gesture.handle(eventStream.pipe(startWith(...events), filter(gesture.filterByEvent))).pipe(takeWhile(v => v.phase !== "end" /* GesturePhase.End */, true), tap((e) => dispatchEvent(new CustomEvent(e.type, { detail: e, bubbles: true, cancelable: true })))
+        return selectGesture.pipe(switchMap(({ events, gesture }) => gesture
+            .handle(eventStream.pipe(startWith(...events), filter(gesture.isRelevantEvent.bind(gesture))))
+            .pipe(takeWhile(v => v.phase !== "end" /* GesturePhase.End */, true), tap(detail => dispatchEvent(new CustomEvent(gesture.name, { detail, bubbles: true, cancelable: true })))
         // finalize(() => console.log("GESTURE FINALIZE")),
         )), 
         // finalize(() => console.log("FINALIZE RESULT")),
@@ -714,10 +744,10 @@ class GestureService {
                 element[ADD_EVENT_LISTENER](gesture.name, next);
                 dst.add(element[REMOVE_EVENT_LISTENER].bind(element, gesture.name, next));
             }
-            dst.add(this.watch(element, ...gestures).subscribe());
+            dst.add(this.#watch(element, ...gestures).subscribe());
         }));
     }
-    watch(el, ...gestures) {
+    #watch(el, ...gestures) {
         return new Observable((dst) => this.#zone.runOutsideAngular(() => {
             const element = coerceElement(el);
             const watchers = gestures.map(gesture => {