fix: fixes issue where request animation frames during synth drag was…

… not cancelled because it was referencing the global prop and not the state obj
formkit · Oct 22, 2024 · a18609e · a18609e
1 parent c653199
commit a18609e
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 22 deletions.
diff --git a/dist/index.cjs b/dist/index.cjs
@@ -981,7 +981,6 @@ var isBrowser = typeof window !== "undefined";
 var dropped = false;
 var documentController3;
 var windowController;
-var animationFrameId = null;
 var touchDevice = false;
 var nodes = /* @__PURE__ */ new WeakMap();
 var parents = /* @__PURE__ */ new WeakMap();
@@ -2100,7 +2099,7 @@ function handlePointercancel(data, state2) {
   config?.handleEnd(state2);
 }
 function handleEnd3(state2) {
-  cancelSynthScroll();
+  if (isSynthDragState(state2)) cancelSynthScroll(state2);
   if ("longPressTimeout" in state2 && state2.longPressTimeout)
     clearTimeout(state2.longPressTimeout);
   const config = parents.get(state2.initialParent.el)?.config;
@@ -2265,10 +2264,10 @@ function pointermoveClasses(state2, config) {
       config?.longPressClass
     );
 }
-function cancelSynthScroll() {
-  if (animationFrameId !== null) {
-    cancelAnimationFrame(animationFrameId);
-    animationFrameId = null;
+function cancelSynthScroll(state2) {
+  if (state2.animationFrameId !== void 0) {
+    cancelAnimationFrame(state2.animationFrameId);
+    state2.animationFrameId = void 0;
   }
 }
 function moveNode(data, state2) {

diff --git a/dist/index.cjs.map b/dist/index.cjs.map
diff --git a/dist/index.mjs b/dist/index.mjs
@@ -881,7 +881,6 @@ var isBrowser = typeof window !== "undefined";
 var dropped = false;
 var documentController3;
 var windowController;
-var animationFrameId = null;
 var touchDevice = false;
 var nodes = /* @__PURE__ */ new WeakMap();
 var parents = /* @__PURE__ */ new WeakMap();
@@ -2000,7 +1999,7 @@ function handlePointercancel(data, state2) {
   config?.handleEnd(state2);
 }
 function handleEnd3(state2) {
-  cancelSynthScroll();
+  if (isSynthDragState(state2)) cancelSynthScroll(state2);
   if ("longPressTimeout" in state2 && state2.longPressTimeout)
     clearTimeout(state2.longPressTimeout);
   const config = parents.get(state2.initialParent.el)?.config;
@@ -2165,10 +2164,10 @@ function pointermoveClasses(state2, config) {
       config?.longPressClass
     );
 }
-function cancelSynthScroll() {
-  if (animationFrameId !== null) {
-    cancelAnimationFrame(animationFrameId);
-    animationFrameId = null;
+function cancelSynthScroll(state2) {
+  if (state2.animationFrameId !== void 0) {
+    cancelAnimationFrame(state2.animationFrameId);
+    state2.animationFrameId = void 0;
   }
 }
 function moveNode(data, state2) {

diff --git a/dist/index.mjs.map b/dist/index.mjs.map
diff --git a/src/index.ts b/src/index.ts
@@ -60,8 +60,6 @@ let documentController: AbortController | undefined;
 
 let windowController: AbortController | undefined;
 
-let animationFrameId: number | null = null;
-
 let touchDevice: boolean = false;
 
 export const nodes: NodesData<any> = new WeakMap<Node, NodeData<unknown>>();
@@ -1725,7 +1723,7 @@ export function handlePointercancel<T>(
 }
 
 export function handleEnd<T>(state: DragState<T> | SynthDragState<T>) {
-  cancelSynthScroll();
+  if (isSynthDragState(state)) cancelSynthScroll(state);
 
   if ("longPressTimeout" in state && state.longPressTimeout)
     clearTimeout(state.longPressTimeout);
@@ -1988,11 +1986,11 @@ function pointermoveClasses<T>(
       config?.longPressClass
     );
 }
-function cancelSynthScroll() {
-  if (animationFrameId !== null) {
-    cancelAnimationFrame(animationFrameId);
+function cancelSynthScroll(state: SynthDragState<any>) {
+  if (state.animationFrameId !== undefined) {
+    cancelAnimationFrame(state.animationFrameId);
 
-    animationFrameId = null;
+    state.animationFrameId = undefined;
   }
 }
 

diff --git a/tests/.nuxt/nuxt.d.ts b/tests/.nuxt/nuxt.d.ts
@@ -1,7 +1,7 @@
 // Generated by nuxi
-/// <reference types="@nuxtjs/tailwindcss" />
 /// <reference types="@nuxt/devtools" />
 /// <reference types="@nuxt/telemetry" />
+/// <reference types="@nuxtjs/tailwindcss" />
 /// <reference types="nuxt" />
 /// <reference path="types/app-defaults.d.ts" />
 /// <reference path="types/plugins.d.ts" />