@statelyai/flow-dom 3.4.2 → 3.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.js +31 -3
- package/package.json +2 -2
package/dist/esm/index.d.ts
CHANGED
|
@@ -215,6 +215,7 @@ type AttachInputOptions = {
|
|
|
215
215
|
runtime: {
|
|
216
216
|
send(event: FlowInputEvent): FlowInputEffects;
|
|
217
217
|
cancelSession(): void;
|
|
218
|
+
getActiveSession?(): string | null;
|
|
218
219
|
};
|
|
219
220
|
/**
|
|
220
221
|
* Where keyboard events are listened for. Defaults to the flow container so
|
package/dist/esm/index.js
CHANGED
|
@@ -648,6 +648,8 @@ function attachInput(options) {
|
|
|
648
648
|
const keyboardTarget = options.keyboardTarget ?? "container";
|
|
649
649
|
const keyboardElement = keyboardTarget === "window" ? win : keyboardTarget === "container" ? container : keyboardTarget;
|
|
650
650
|
let capturedPointerId = null;
|
|
651
|
+
let gestureContainerOffset = null;
|
|
652
|
+
let lastContainerOffset = null;
|
|
651
653
|
let lastClient = null;
|
|
652
654
|
let autoPanFrame = null;
|
|
653
655
|
const activeTouchPointers = /* @__PURE__ */ new Map();
|
|
@@ -666,7 +668,7 @@ function attachInput(options) {
|
|
|
666
668
|
function autoPanTick() {
|
|
667
669
|
autoPanFrame = null;
|
|
668
670
|
if (!options.autoPan || capturedPointerId === null || !lastClient) return;
|
|
669
|
-
const rect = container.getBoundingClientRect();
|
|
671
|
+
const rect = gestureContainerOffset ?? container.getBoundingClientRect();
|
|
670
672
|
const screenPoint = {
|
|
671
673
|
x: lastClient.x - rect.left,
|
|
672
674
|
y: lastClient.y - rect.top
|
|
@@ -715,7 +717,12 @@ function attachInput(options) {
|
|
|
715
717
|
return clickCount;
|
|
716
718
|
}
|
|
717
719
|
function toPoints(event) {
|
|
718
|
-
const rect = container.getBoundingClientRect();
|
|
720
|
+
const rect = gestureContainerOffset ?? container.getBoundingClientRect();
|
|
721
|
+
lastContainerOffset = {
|
|
722
|
+
left: rect.left,
|
|
723
|
+
top: rect.top
|
|
724
|
+
};
|
|
725
|
+
if (capturedPointerId !== null && gestureContainerOffset === null) gestureContainerOffset = lastContainerOffset;
|
|
719
726
|
const screenPoint = {
|
|
720
727
|
x: event.clientX - rect.left,
|
|
721
728
|
y: event.clientY - rect.top
|
|
@@ -773,6 +780,8 @@ function attachInput(options) {
|
|
|
773
780
|
clientX,
|
|
774
781
|
clientY
|
|
775
782
|
});
|
|
783
|
+
const activeSession = runtime.getActiveSession?.() ?? null;
|
|
784
|
+
const targetIndependentSession = activeSession === "entity-press" || activeSession === "pan" || activeSession === "pane-press" || activeSession === "box-select";
|
|
776
785
|
const effects = runtime.send({
|
|
777
786
|
kind,
|
|
778
787
|
pointerId: info.pointerId,
|
|
@@ -781,7 +790,7 @@ function attachInput(options) {
|
|
|
781
790
|
detail: info.detail,
|
|
782
791
|
point,
|
|
783
792
|
screenPoint,
|
|
784
|
-
target: resolveTarget({
|
|
793
|
+
target: kind === "pointer.move" && targetIndependentSession ? { kind: "none" } : resolveTarget({
|
|
785
794
|
clientX,
|
|
786
795
|
clientY,
|
|
787
796
|
target: info.target
|
|
@@ -793,6 +802,13 @@ function attachInput(options) {
|
|
|
793
802
|
container.setPointerCapture(info.pointerId);
|
|
794
803
|
} catch {}
|
|
795
804
|
capturedPointerId = info.pointerId;
|
|
805
|
+
gestureContainerOffset = lastContainerOffset ?? (() => {
|
|
806
|
+
const rect = container.getBoundingClientRect();
|
|
807
|
+
return {
|
|
808
|
+
left: rect.left,
|
|
809
|
+
top: rect.top
|
|
810
|
+
};
|
|
811
|
+
})();
|
|
796
812
|
scheduleAutoPan();
|
|
797
813
|
}
|
|
798
814
|
if (effects.sessionEnded && capturedPointerId !== null) {
|
|
@@ -800,6 +816,7 @@ function attachInput(options) {
|
|
|
800
816
|
if (container.hasPointerCapture(capturedPointerId)) container.releasePointerCapture(capturedPointerId);
|
|
801
817
|
} catch {}
|
|
802
818
|
capturedPointerId = null;
|
|
819
|
+
gestureContainerOffset = null;
|
|
803
820
|
lastClient = null;
|
|
804
821
|
stopAutoPan();
|
|
805
822
|
}
|
|
@@ -855,6 +872,7 @@ function attachInput(options) {
|
|
|
855
872
|
if (container.hasPointerCapture(capturedPointerId)) container.releasePointerCapture(capturedPointerId);
|
|
856
873
|
} catch {}
|
|
857
874
|
capturedPointerId = null;
|
|
875
|
+
gestureContainerOffset = null;
|
|
858
876
|
lastClient = null;
|
|
859
877
|
stopAutoPan();
|
|
860
878
|
}
|
|
@@ -978,6 +996,7 @@ function attachInput(options) {
|
|
|
978
996
|
stopAutoPan();
|
|
979
997
|
runtime.cancelSession();
|
|
980
998
|
capturedPointerId = null;
|
|
999
|
+
gestureContainerOffset = null;
|
|
981
1000
|
lastClient = null;
|
|
982
1001
|
};
|
|
983
1002
|
const onWindowBlur = () => {
|
|
@@ -985,8 +1004,13 @@ function attachInput(options) {
|
|
|
985
1004
|
runtime.cancelSession();
|
|
986
1005
|
activeTouchPointers.clear();
|
|
987
1006
|
capturedPointerId = null;
|
|
1007
|
+
gestureContainerOffset = null;
|
|
988
1008
|
lastClient = null;
|
|
989
1009
|
};
|
|
1010
|
+
const onContainerGeometryChange = () => {
|
|
1011
|
+
gestureContainerOffset = null;
|
|
1012
|
+
lastContainerOffset = null;
|
|
1013
|
+
};
|
|
990
1014
|
const onKeyDown = handleKey("key.down");
|
|
991
1015
|
const onKeyUp = handleKey("key.up");
|
|
992
1016
|
if (keyboardTarget === "container" && !container.hasAttribute("tabindex")) container.tabIndex = 0;
|
|
@@ -1000,6 +1024,8 @@ function attachInput(options) {
|
|
|
1000
1024
|
keyboardElement?.addEventListener("keydown", onKeyDown);
|
|
1001
1025
|
keyboardElement?.addEventListener("keyup", onKeyUp);
|
|
1002
1026
|
win?.addEventListener("blur", onWindowBlur);
|
|
1027
|
+
win?.addEventListener("resize", onContainerGeometryChange);
|
|
1028
|
+
win?.addEventListener("scroll", onContainerGeometryChange, true);
|
|
1003
1029
|
return () => {
|
|
1004
1030
|
stopAutoPan();
|
|
1005
1031
|
runtime.cancelSession();
|
|
@@ -1016,6 +1042,8 @@ function attachInput(options) {
|
|
|
1016
1042
|
keyboardElement?.removeEventListener("keydown", onKeyDown);
|
|
1017
1043
|
keyboardElement?.removeEventListener("keyup", onKeyUp);
|
|
1018
1044
|
win?.removeEventListener("blur", onWindowBlur);
|
|
1045
|
+
win?.removeEventListener("resize", onContainerGeometryChange);
|
|
1046
|
+
win?.removeEventListener("scroll", onContainerGeometryChange, true);
|
|
1019
1047
|
};
|
|
1020
1048
|
}
|
|
1021
1049
|
//#endregion
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@statelyai/flow-dom",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.4",
|
|
4
4
|
"description": "DOM-specific helpers for @statelyai/flow with core re-exports.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"license": "MIT",
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@statelyai/flow": "0.
|
|
30
|
+
"@statelyai/flow": "0.9.1"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@vitest/coverage-v8": "^4.1.0",
|