@statelyai/flow-dom 3.3.0 → 3.4.3

package/dist/esm/index.d.ts

@@ -215,6 +215,7 @@ type AttachInputOptions = {
   runtime: {
     send(event: FlowInputEvent): FlowInputEffects;
     cancelSession(): void;
+    getActiveSession?(): string | null;
   };
   /**
    * Where keyboard events are listened for. Defaults to the flow container so

package/dist/esm/index.js

@@ -648,6 +648,8 @@ function attachInput(options) {
 	const keyboardTarget = options.keyboardTarget ?? "container";
 	const keyboardElement = keyboardTarget === "window" ? win : keyboardTarget === "container" ? container : keyboardTarget;
 	let capturedPointerId = null;
+	let gestureContainerOffset = null;
+	let lastContainerOffset = null;
 	let lastClient = null;
 	let autoPanFrame = null;
 	const activeTouchPointers = /* @__PURE__ */ new Map();
@@ -666,7 +668,7 @@ function attachInput(options) {
 	function autoPanTick() {
 		autoPanFrame = null;
 		if (!options.autoPan || capturedPointerId === null || !lastClient) return;
-		const rect = container.getBoundingClientRect();
+		const rect = gestureContainerOffset ?? container.getBoundingClientRect();
 		const screenPoint = {
 			x: lastClient.x - rect.left,
 			y: lastClient.y - rect.top
@@ -715,7 +717,12 @@ function attachInput(options) {
 		return clickCount;
 	}
 	function toPoints(event) {
-		const rect = container.getBoundingClientRect();
+		const rect = gestureContainerOffset ?? container.getBoundingClientRect();
+		lastContainerOffset = {
+			left: rect.left,
+			top: rect.top
+		};
+		if (capturedPointerId !== null && gestureContainerOffset === null) gestureContainerOffset = lastContainerOffset;
 		const screenPoint = {
 			x: event.clientX - rect.left,
 			y: event.clientY - rect.top
@@ -740,7 +747,9 @@ function attachInput(options) {
 		if (portElement?.dataset.flowPortName) return {
 			kind: "port",
 			nodeId: portElement.dataset.flowNodeId ?? "",
-			portName: portElement.dataset.flowPortName
+			portName: portElement.dataset.flowPortName,
+			portId: portElement.dataset.flowPortId,
+			interaction: portElement.dataset.flowPortInteraction === "inspect" ? "inspect" : "connect"
 		};
 		if (element.closest("[data-flow-interactive], .nodrag, input, textarea, select, button, a[href], [contenteditable]:not([contenteditable=\"false\"])")) return { kind: "none" };
 		const entityElement = element.closest("[data-entity-id]");
@@ -771,6 +780,8 @@ function attachInput(options) {
 			clientX,
 			clientY
 		});
+		const activeSession = runtime.getActiveSession?.() ?? null;
+		const targetIndependentSession = activeSession === "entity-press" || activeSession === "pan" || activeSession === "pane-press" || activeSession === "box-select";
 		const effects = runtime.send({
 			kind,
 			pointerId: info.pointerId,
@@ -779,7 +790,7 @@ function attachInput(options) {
 			detail: info.detail,
 			point,
 			screenPoint,
-			target: resolveTarget({
+			target: kind === "pointer.move" && targetIndependentSession ? { kind: "none" } : resolveTarget({
 				clientX,
 				clientY,
 				target: info.target
@@ -791,6 +802,13 @@ function attachInput(options) {
 				container.setPointerCapture(info.pointerId);
 			} catch {}
 			capturedPointerId = info.pointerId;
+			gestureContainerOffset = lastContainerOffset ?? (() => {
+				const rect = container.getBoundingClientRect();
+				return {
+					left: rect.left,
+					top: rect.top
+				};
+			})();
 			scheduleAutoPan();
 		}
 		if (effects.sessionEnded && capturedPointerId !== null) {
@@ -798,6 +816,7 @@ function attachInput(options) {
 				if (container.hasPointerCapture(capturedPointerId)) container.releasePointerCapture(capturedPointerId);
 			} catch {}
 			capturedPointerId = null;
+			gestureContainerOffset = null;
 			lastClient = null;
 			stopAutoPan();
 		}
@@ -853,6 +872,7 @@ function attachInput(options) {
 			if (container.hasPointerCapture(capturedPointerId)) container.releasePointerCapture(capturedPointerId);
 		} catch {}
 		capturedPointerId = null;
+		gestureContainerOffset = null;
 		lastClient = null;
 		stopAutoPan();
 	}
@@ -976,6 +996,7 @@ function attachInput(options) {
 		stopAutoPan();
 		runtime.cancelSession();
 		capturedPointerId = null;
+		gestureContainerOffset = null;
 		lastClient = null;
 	};
 	const onWindowBlur = () => {
@@ -983,8 +1004,13 @@ function attachInput(options) {
 		runtime.cancelSession();
 		activeTouchPointers.clear();
 		capturedPointerId = null;
+		gestureContainerOffset = null;
 		lastClient = null;
 	};
+	const onContainerGeometryChange = () => {
+		gestureContainerOffset = null;
+		lastContainerOffset = null;
+	};
 	const onKeyDown = handleKey("key.down");
 	const onKeyUp = handleKey("key.up");
 	if (keyboardTarget === "container" && !container.hasAttribute("tabindex")) container.tabIndex = 0;
@@ -998,6 +1024,8 @@ function attachInput(options) {
 	keyboardElement?.addEventListener("keydown", onKeyDown);
 	keyboardElement?.addEventListener("keyup", onKeyUp);
 	win?.addEventListener("blur", onWindowBlur);
+	win?.addEventListener("resize", onContainerGeometryChange);
+	win?.addEventListener("scroll", onContainerGeometryChange, true);
 	return () => {
 		stopAutoPan();
 		runtime.cancelSession();
@@ -1014,6 +1042,8 @@ function attachInput(options) {
 		keyboardElement?.removeEventListener("keydown", onKeyDown);
 		keyboardElement?.removeEventListener("keyup", onKeyUp);
 		win?.removeEventListener("blur", onWindowBlur);
+		win?.removeEventListener("resize", onContainerGeometryChange);
+		win?.removeEventListener("scroll", onContainerGeometryChange, true);
 	};
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statelyai/flow-dom",
-  "version": "3.3.0",
+  "version": "3.4.3",
   "description": "DOM-specific helpers for @statelyai/flow with core re-exports.",
   "type": "module",
   "sideEffects": false,
@@ -27,7 +27,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@statelyai/flow": "0.7.0"
+    "@statelyai/flow": "0.9.0"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "^4.1.0",