@foblex/flow 19.1.2 → 19.1.4

package/AI.md

@@ -139,6 +139,7 @@ export class Editor {
 - Rotation, connection waypoint editing, and user resize are not captured by managed state in v1.
 - `state.changes()` increments once when a standalone mutation or outer batch settles. A drag can emit selection at start and move/drop at end while remaining one history step and one `changes()` increment.
 - Use `state.snapshot()` for persistence; `load()` replaces data and resets history.
+- `canvasTransformDebounce` defaults to `350ms`. It waits for wheel/pinch zoom events to settle, then records the current canvas transform as one change and one undo item. Setting it to `0` disables batching: every emitted `fCanvasChange` is applied immediately, increments `state.changes()`, and normally creates a separate undo item. Keep the canvas `[debounceTime]` unset when managed state owns viewport history; do not stack canvas and State debounce layers.
 - For initial or other application-driven viewport positioning, suppress the event at the canvas helper: `canvas.resetScaleAndCenter(false, false)`. The second `false` means `emitCanvasChange = false`, so managed history is untouched.
 - Connection endpoints are connector ids. Automatic cascade from node/group deletion uses the rendered connector registry; before connectors render, remove known attached connection ids explicitly in the same `state.batch(...)`.
 

package/fesm2022/foblex-flow.mjs

@@ -370,7 +370,13 @@ class FChannelHub {
         return result;
     }
     listen(destroyRef, callback) {
-        let current = callback;
+        let tornDown = false;
+        let current = () => {
+            if (tornDown || destroyRef.destroyed) {
+                return;
+            }
+            callback();
+        };
         const cleanups = [];
         const onSubscribes = [];
         const teardownSetters = [];
@@ -384,9 +390,8 @@ class FChannelHub {
             if (res.setTeardown)
                 teardownSetters.push(res.setTeardown);
         }
-        const unsubs = this._channels.map((ch) => ch.listen(() => current()));
+        const unsubs = [];
         let unregisterOnDestroy = null;
-        let tornDown = false;
         const teardown = () => {
             if (tornDown)
                 return;
@@ -400,11 +405,31 @@ class FChannelHub {
             .slice()
             .reverse()
             .forEach((set) => set(teardown));
+        if (destroyRef.destroyed) {
+            teardown();
+            return;
+        }
+        this._channels.forEach((channel) => {
+            unsubs.push(channel.listen(() => {
+                if (tornDown || destroyRef.destroyed) {
+                    return;
+                }
+                current();
+            }));
+        });
+        if (destroyRef.destroyed) {
+            teardown();
+            return;
+        }
+        unregisterOnDestroy = destroyRef.onDestroy(teardown);
         onSubscribes
             .slice()
             .reverse()
-            .forEach((fn) => fn(current));
-        unregisterOnDestroy = destroyRef.onDestroy(teardown);
+            .forEach((fn) => {
+            if (!tornDown && !destroyRef.destroyed) {
+                fn(current);
+            }
+        });
     }
 }
 
@@ -22492,7 +22517,7 @@ function mergeFlowStateConfig(config) {
         historyLimit: 50,
         selectionInHistory: true,
         canvasTransformInHistory: true,
-        canvasTransformDebounce: 0,
+        canvasTransformDebounce: 350,
         dropToGroup: false,
         ...config,
     };
@@ -23308,18 +23333,34 @@ class FFlowStateController {
         if (this._transformDebounceTimer !== null) {
             clearTimeout(this._transformDebounceTimer);
         }
+        this._scheduleCanvasChangeFlush(debounce);
+    }
+    _flushCanvasChange() {
+        const pending = this._pendingTransform;
+        if (!pending) {
+            return;
+        }
+        const current = this._readCanvasTransform();
+        const debounce = this._config?.canvasTransformDebounce ?? 0;
+        if (debounce > 0 && current && !this._isSameCanvasTransform(pending, current)) {
+            this._pendingTransform = current;
+            this._scheduleCanvasChangeFlush(debounce);
+            return;
+        }
+        this._pendingTransform = null;
+        const settled = debounce > 0 ? (current ?? pending) : pending;
+        this._dispatch(() => this._state.applyTransform(settled));
+    }
+    _scheduleCanvasChangeFlush(debounce) {
         this._transformDebounceTimer = setTimeout(() => {
             this._transformDebounceTimer = null;
             this._flushCanvasChange();
         }, debounce);
     }
-    _flushCanvasChange() {
-        const transform = this._pendingTransform;
-        this._pendingTransform = null;
-        if (!transform) {
-            return;
-        }
-        this._dispatch(() => this._state.applyTransform(transform));
+    _isSameCanvasTransform(first, second) {
+        return (first.position.x === second.position.x &&
+            first.position.y === second.position.y &&
+            first.scale === second.scale);
     }
     /**
      * Subscribes to every node's and group's `sizeChange` (a per-directive