@thi.ng/rstream-gestures 4.1.48 → 5.0.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2023-03-27T19:05:49Z
+- **Last updated**: 2023-04-08T11:09:50Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,20 @@ See [Conventional Commits](https://conventionalcommits.org/) for commit guidelin
 **Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
 and/or version bumps of transitive dependencies.
 
+# [5.0.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rstream-gestures@5.0.0) (2023-04-08)
+
+#### 🛑 Breaking changes
+
+- support zoom reset via subscription ([03b1621](https://github.com/thi-ng/umbrella/commit/03b1621))
+- BREAKING CHANGE: Original DOM event **might** not anymore be present in all cases
+  - update GestureStreamOpts.zoom to accept subscription
+  - update gestureStream() to support resetting of zoom value via subscription
+  - update docs
+
+#### ♻️ Refactoring
+
+- update stream ID handling ([2c9fa02](https://github.com/thi-ng/umbrella/commit/2c9fa02))
+
 ## [4.1.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rstream-gestures@4.1.0) (2021-11-17)
 
 #### 🚀 Features

package/README.md

@@ -12,6 +12,8 @@ This project is part of the
 - [About](#about)
 - [Status](#status)
   - [Breaking changes](#breaking-changes)
+    - [v3.0.0](#v300)
+    - [v2.0.0](#v200)
 - [Related packages](#related-packages)
 - [Installation](#installation)
 - [Dependencies](#dependencies)
@@ -21,6 +23,7 @@ This project is part of the
   - [GestureEvent](#gestureevent)
   - [GestureStreamOpts](#gesturestreamopts)
   - [Basic usage](#basic-usage)
+  - [Resettable zoom](#resettable-zoom)
 - [Authors](#authors)
 - [License](#license)
 
@@ -36,6 +39,17 @@ Unified mouse, mouse wheel & multi-touch event stream abstraction. This is a sup
 
 ### Breaking changes
 
+#### v3.0.0
+
+The `gestureStream()` now supports external zoom control/resetting via providing
+a subscription as `zoom` option. That itself isn't a breaking change, however a
+result of this is that the `GestureEvent`s emitted by the stream do not *always*
+contain the original [DOM
+event](https://docs.thi.ng/umbrella/rstream-gestures/interfaces/GestureEvent.html#event)
+anymore (i.e. not in the case when the zoom factor is being reset via attached
+subscription).
+
+#### v2.0.0
 Multi-touch support has been added in v2.0.0, resulting in a complete
 rewrite of `gestureStream()` and new event data formats.
 
@@ -64,7 +78,7 @@ For Node.js REPL:
 const rstreamGestures = await import("@thi.ng/rstream-gestures");
 ```
 
-Package sizes (brotli'd, pre-treeshake): ESM: 1.07 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 1.20 KB
 
 ## Dependencies
 
@@ -97,6 +111,7 @@ A selection:
 |                                                                                                                            | Basic rstream-gestures multi-touch demo                           | [Demo](https://demo.thi.ng/umbrella/multitouch/)          | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/multitouch)          |
 |                                                                                                                            | Minimal rstream dataflow graph                                    | [Demo](https://demo.thi.ng/umbrella/rstream-dataflow/)    | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rstream-dataflow)    |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/shader-graph.jpg" width="240"/>        | Minimal shader graph developed during livestream #2               | [Demo](https://demo.thi.ng/umbrella/shader-graph/)        | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/shader-graph)        |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/trace-bitmap.jpg" width="240"/>        | Multi-layer vectorization & dithering of bitmap images            | [Demo](https://demo.thi.ng/umbrella/trace-bitmap/)        | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/trace-bitmap)        |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/webgl-channel-mixer.jpg" width="240"/> | rdom & WebGL-based image channel editor                           | [Demo](https://demo.thi.ng/umbrella/webgl-channel-mixer/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/webgl-channel-mixer) |
 
 ## API
@@ -187,6 +202,26 @@ gestures.subscribe(
 );
 ```
 
+### Resettable zoom
+
+For some applications (e.g. graphical editors), it can be helpful to reset the
+zoom value. This can be done by supplying a stream/subscription as part of the
+config options:
+
+```ts
+// create stream for initial zoom value & for resetting
+const zoomReset = reactive(1);
+
+// create gesture stream w/ zoom subscription
+const gestures = gestureStream(document.body, {
+    smooth: 0.01,
+    zoom: zoomReset
+});
+
+// ... then to reset the zoom at some point (e.g to zoom=2)
+zoomReset.next(2);
+```
+
 ## Authors
 
 - [Karsten Schmidt](https://thi.ng) (Main author)

package/api.d.ts

@@ -1,5 +1,4 @@
-import type { IID } from "@thi.ng/api";
-import type { StreamMerge } from "@thi.ng/rstream";
+import type { ISubscription, StreamMerge } from "@thi.ng/rstream";
 export type GestureStream = StreamMerge<UIEvent, GestureEvent>;
 export type UIEvent = MouseEvent | TouchEvent | WheelEvent;
 export type UIEventID = "mousedown" | "mousemove" | "mouseup" | "touchstart" | "touchmove" | "touchend" | "touchcancel" | "wheel";
@@ -35,9 +34,11 @@ export interface GestureEvent {
      */
     type: GestureType;
     /**
-     * Original DOM event.
+     * Original DOM event. This will **NOT** be present for `zoom` events
+     * originating from a value change of an attached
+     * {@link GestureStreamOpts.zoom} subscription.
      */
-    event: UIEvent;
+    event?: UIEvent;
     /**
      * Event position (as per {@link GestureStreamOpts.local} &
      * {@link GestureStreamOpts.scale})
@@ -65,7 +66,12 @@ export interface GestureEvent {
      */
     isTouch: boolean;
 }
-export interface GestureStreamOpts extends IID<string> {
+export interface GestureStreamOpts {
+    /**
+     * Stream ID associate with the gesture stream. If omitted, an autogenerated
+     * ID will be assigned.
+     */
+    id: string;
     /**
      * Event listener options (see standard `addEventListener`).
      * Default: false
@@ -93,7 +99,7 @@ export interface GestureStreamOpts extends IID<string> {
     /**
      * Initial zoom value. Default: 1
      */
-    zoom: number;
+    zoom: number | ISubscription<any, number>;
     /**
      * If true, the produced `zoom` values are considered absolute and
      * will be constrained to the `minZoom .. maxZoom` interval. If

package/gesture-stream.js

@@ -1,6 +1,8 @@
 import { isBoolean } from "@thi.ng/checks/is-boolean";
+import { isNumber } from "@thi.ng/checks/is-number";
 import { clamp } from "@thi.ng/math/interval";
 import { fromDOMEvent } from "@thi.ng/rstream/event";
+import { __nextID } from "@thi.ng/rstream/idgen";
 import { merge } from "@thi.ng/rstream/merge";
 import { map } from "@thi.ng/transducers/map";
 const START_EVENTS = new Set([
@@ -48,7 +50,6 @@ const EVENT_GESTURETYPES = {
  */
 export const gestureStream = (el, _opts) => {
     const opts = {
-        id: "gestures",
         zoom: 1,
         absZoom: true,
         minZoom: 0.25,
@@ -62,10 +63,12 @@ export const gestureStream = (el, _opts) => {
         scale: false,
         ..._opts,
     };
+    opts.id = opts.id || `gestures-${__nextID()}`;
     const active = [];
-    let zoom = clamp(opts.zoom, opts.minZoom, opts.maxZoom);
+    let zoom = clamp(isNumber(opts.zoom) ? opts.zoom : opts.zoom.deref() || 1, opts.minZoom, opts.maxZoom);
     let zoomDelta = 0;
     let numTouches = 0;
+    let lastPos = [0, 0];
     let tempStreams;
     const isBody = el === document.body;
     const tempEvents = [
@@ -131,10 +134,28 @@ export const gestureStream = (el, _opts) => {
         zoomDelta = zdelta;
     };
     const stream = merge({
+        id: opts.id,
         src: BASE_EVENTS.map((id) => eventSource(el, id, opts)),
         xform: map((e) => {
-            opts.preventDefault && e.preventDefault();
             const etype = e.type;
+            if (etype === "$zoom") {
+                zoomDelta = e.value - zoom;
+                if (opts.absZoom) {
+                    zoom = clamp(zoom + zoomDelta, opts.minZoom, opts.maxZoom);
+                }
+                else {
+                    zoom = zoomDelta;
+                }
+                return {
+                    pos: lastPos.slice(),
+                    buttons: 0,
+                    type: "zoom",
+                    active,
+                    zoom,
+                    zoomDelta,
+                    isTouch: false,
+                };
+            }
             const type = classifyEventType(etype, !!tempStreams);
             let isTouch = !!e.touches;
             let events = isTouch
@@ -150,9 +171,11 @@ export const gestureStream = (el, _opts) => {
             else if (type === "zoom") {
                 updateZoom(e);
             }
+            lastPos = getPos(events[0], bounds, opts.local, opts.scale);
+            opts.preventDefault && e.preventDefault();
             return {
                 event: e,
-                pos: getPos(events[0], bounds, opts.local, opts.scale),
+                pos: lastPos,
                 buttons: isTouch ? active.length : e.buttons,
                 type,
                 active,
@@ -162,6 +185,10 @@ export const gestureStream = (el, _opts) => {
             };
         }),
     });
+    // attach zoom reset
+    if (!isNumber(opts.zoom)) {
+        stream.add(opts.zoom.map((x) => ({ type: "$zoom", value: x })));
+    }
     return stream;
 };
 const eventSource = (el, type, opts, suffix = "") => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/rstream-gestures",
-  "version": "4.1.48",
+  "version": "5.0.0",
   "description": "Unified mouse, mouse wheel & multi-touch event stream abstraction",
   "type": "module",
   "module": "./index.js",
@@ -38,19 +38,19 @@
     "test": "testament test"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.7.5",
-    "@thi.ng/checks": "^3.3.11",
-    "@thi.ng/math": "^5.4.6",
-    "@thi.ng/rstream": "^7.2.46",
-    "@thi.ng/transducers": "^8.4.1"
+    "@thi.ng/api": "^8.7.6",
+    "@thi.ng/checks": "^3.3.12",
+    "@thi.ng/math": "^5.4.7",
+    "@thi.ng/rstream": "^8.0.0",
+    "@thi.ng/transducers": "^8.4.2"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.34.4",
-    "@thi.ng/testament": "^0.3.14",
+    "@thi.ng/testament": "^0.3.15",
     "rimraf": "^4.4.1",
     "tools": "^0.0.1",
     "typedoc": "^0.23.28",
-    "typescript": "^5.0.2"
+    "typescript": "^5.0.4"
   },
   "keywords": [
     "animation",
@@ -95,5 +95,5 @@
     ],
     "year": 2018
   },
-  "gitHead": "83b15b34326d480cbca0472b20390d4d3bbb792a\n"
+  "gitHead": "abcedd9e4e06a4b631f363610eec572f79b571c1\n"
 }