@ethlete/core 5.0.0-next.43 → 5.0.0-next.44

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @ethlete/core
 
+## 5.0.0-next.44
+
+### Minor Changes
+
+- [#3050](https://github.com/ethlete-io/ethdk/pull/3050) [`2d44597`](https://github.com/ethlete-io/ethdk/commit/2d44597f07b165a83c19f049a022c4247a8e3eb1) Thanks [@github-actions](https://github.com/apps/github-actions)! - Slider and rating now drag on `dragGestureFrom`, so a gesture the browser takes away reverts
+  instead of committing. `dragEnded` carries the release position.
+
 ## 5.0.0-next.43
 
 ### Minor Changes

package/fesm2022/ethlete-core.mjs

@@ -5055,12 +5055,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+// jsdom and other non-browser DOMs ship no pointer capture; the document listeners track the
+// gesture either way, so a failure here only costs events over a cross-origin frame.
+const capturePointer = (el, pointerId) => {
+    try {
+        el.setPointerCapture(pointerId);
+    }
+    catch {
+        return;
+    }
+};
 const setupDragObservable = (startEvent, el, commitThreshold) => {
     const { pointerId, clientX: startX, clientY: startY } = startEvent;
     let cancelled = false;
+    let endX = startX;
+    let endY = startY;
     const end$ = merge(fromEvent(document, 'pointerup'), fromEvent(document, 'pointercancel')).pipe(filter((e) => e.pointerId === pointerId), take(1), 
     // Read below by the terminating `defer`, which only runs once this has completed the moves.
-    tap((e) => (cancelled = e.type === 'pointercancel')));
+    tap((e) => {
+        cancelled = e.type === 'pointercancel';
+        endX = e.clientX;
+        endY = e.clientY;
+    }));
     let lastX = startX;
     let lastY = startY;
     let committed = false;
@@ -5070,7 +5086,7 @@ const setupDragObservable = (startEvent, el, commitThreshold) => {
                 return EMPTY;
             }
             committed = true;
-            el.setPointerCapture(pointerId);
+            capturePointer(el, pointerId);
             lastX = e.clientX;
             lastY = e.clientY;
             // Emit the catch-up move together with start so consumers snap to the pointer
@@ -5108,15 +5124,21 @@ const setupDragObservable = (startEvent, el, commitThreshold) => {
     return concat(moves$, defer(() => {
         if (cancelled)
             return of({ type: 'cancelled' });
-        return of(committed ? { type: 'end' } : { type: 'tapped' });
+        if (!committed)
+            return of({ type: 'tapped' });
+        return of({
+            type: 'end',
+            data: { clientX: endX, clientY: endY, totalDx: endX - startX, totalDy: endY - startY },
+        });
     }));
 };
 /**
  * Observe one drag gesture, starting from a `pointerdown` on `element`.
  *
  * Emits `start` once the pointer has travelled `commitThreshold` px (so a click is not a drag),
- * immediately followed by a catch-up `move`, then a `move` per pointer move, and finally `end`. A
- * pointer released before crossing the threshold emits a single `tapped` instead. The stream
+ * immediately followed by a catch-up `move`, then a `move` per pointer move, and finally `end`
+ * carrying the release position. A pointer released before crossing the threshold emits a single
+ * `tapped` instead - its position is the `pointerdown` the caller already holds. The stream
  * completes with the gesture, so there is nothing to unsubscribe on the happy path.
  *
  * A gesture the browser takes away - a `pointercancel` from a system gesture, an incoming call, the
@@ -5140,7 +5162,7 @@ class DragHandleDirective {
         this.dragTapped = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'tapped'), map(() => undefined)));
         this.dragStarted = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'start'), map((e) => e.data)));
         this.dragMoved = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'move'), map((e) => e.data)));
-        this.dragEnded = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'end'), map(() => undefined)));
+        this.dragEnded = outputFromObservable(this.gesture$.pipe(filter((e) => e.type === 'end'), map((e) => e.data)));
         /**
          * The browser took the gesture away mid-drag (a system gesture, an incoming call, the tab going to
          * the background). Revert to where the drag started - the user never chose a drop position. A