internal: sets documentElement to user select none during drag

formkit · Dec 14, 2024 · 16e3d5e · 16e3d5e
1 parent 9c8e9b7
commit 16e3d5e
Show file tree

Hide file tree

Showing 13 changed files with 33 additions and 6 deletions.
diff --git a/dist/index.cjs b/dist/index.cjs
@@ -1148,6 +1148,7 @@ var baseDragState = {
   originalZIndex: void 0,
   pointerSelection: false,
   preventEnter: false,
+  rootUserSelect: void 0,
   nodePointerdown: void 0,
   longPress: false,
   scrolling: false,
@@ -1181,6 +1182,7 @@ function resetState() {
     remapJustFinished: false,
     selectedNodes: [],
     nodePointerdown: void 0,
+    rootUserSelect: void 0,
     preventSynthDrag: false,
     scrolling: false,
     selectedParent: void 0,
@@ -1248,6 +1250,10 @@ function handleRootPointermove(e) {
       state,
       nodes2
     );
+    state.rootUserSelect = window.getComputedStyle(
+      document.documentElement
+    ).userSelect;
+    document.body.style.userSelect = "none";
     synthMove(e, synthDragState);
   } else if (isSynthDragState(state)) {
     synthMove(e, state);
@@ -2259,7 +2265,7 @@ function handlePointercancel(data, state2) {
 }
 function handleEnd3(state2) {
   if (state2.draggedNode) state2.draggedNode.el.draggable = false;
-  document.body.style.userSelect = "";
+  document.body.style.userSelect = state2.rootUserSelect || "";
   if (isSynthDragState(state2)) cancelSynthScroll(state2);
   if ("longPressTimeout" in state2 && state2.longPressTimeout)
     clearTimeout(state2.longPressTimeout);

diff --git a/dist/index.cjs.map b/dist/index.cjs.map
diff --git a/dist/index.d.cts b/dist/index.d.cts
@@ -713,6 +713,7 @@ type BaseDragState<T> = {
         parent: ParentRecord<T>;
     };
     scrolling: boolean;
+    rootUserSelect: string | undefined;
 };
 interface DragStateProps<T> {
     /**

diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -713,6 +713,7 @@ type BaseDragState<T> = {
         parent: ParentRecord<T>;
     };
     scrolling: boolean;
+    rootUserSelect: string | undefined;
 };
 interface DragStateProps<T> {
     /**

diff --git a/dist/index.mjs b/dist/index.mjs
@@ -1058,6 +1058,7 @@ var baseDragState = {
   originalZIndex: void 0,
   pointerSelection: false,
   preventEnter: false,
+  rootUserSelect: void 0,
   nodePointerdown: void 0,
   longPress: false,
   scrolling: false,
@@ -1091,6 +1092,7 @@ function resetState() {
     remapJustFinished: false,
     selectedNodes: [],
     nodePointerdown: void 0,
+    rootUserSelect: void 0,
     preventSynthDrag: false,
     scrolling: false,
     selectedParent: void 0,
@@ -1158,6 +1160,10 @@ function handleRootPointermove(e) {
       state,
       nodes2
     );
+    state.rootUserSelect = window.getComputedStyle(
+      document.documentElement
+    ).userSelect;
+    document.body.style.userSelect = "none";
     synthMove(e, synthDragState);
   } else if (isSynthDragState(state)) {
     synthMove(e, state);
@@ -2169,7 +2175,7 @@ function handlePointercancel(data, state2) {
 }
 function handleEnd3(state2) {
   if (state2.draggedNode) state2.draggedNode.el.draggable = false;
-  document.body.style.userSelect = "";
+  document.body.style.userSelect = state2.rootUserSelect || "";
   if (isSynthDragState(state2)) cancelSynthScroll(state2);
   if ("longPressTimeout" in state2 && state2.longPressTimeout)
     clearTimeout(state2.longPressTimeout);

diff --git a/dist/index.mjs.map b/dist/index.mjs.map
diff --git a/dist/react/index.d.cts b/dist/react/index.d.cts
@@ -629,6 +629,7 @@ type BaseDragState<T> = {
         parent: ParentRecord<T>;
     };
     scrolling: boolean;
+    rootUserSelect: string | undefined;
 };
 interface DragStateProps<T> {
     /**

diff --git a/dist/react/index.d.ts b/dist/react/index.d.ts
@@ -629,6 +629,7 @@ type BaseDragState<T> = {
         parent: ParentRecord<T>;
     };
     scrolling: boolean;
+    rootUserSelect: string | undefined;
 };
 interface DragStateProps<T> {
     /**

diff --git a/dist/vue/index.d.cts b/dist/vue/index.d.cts
@@ -629,6 +629,7 @@ type BaseDragState<T> = {
         parent: ParentRecord<T>;
     };
     scrolling: boolean;
+    rootUserSelect: string | undefined;
 };
 interface DragStateProps<T> {
     /**

diff --git a/dist/vue/index.d.ts b/dist/vue/index.d.ts
@@ -629,6 +629,7 @@ type BaseDragState<T> = {
         parent: ParentRecord<T>;
     };
     scrolling: boolean;
+    rootUserSelect: string | undefined;
 };
 interface DragStateProps<T> {
     /**

diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -19,7 +19,7 @@ export default defineNuxtConfig({
   css: ["@/assets/css/main.css"],
 
   experimental: {
-    componentIslands: true,
+    componentIslands: false,
   },
 
   runtimeConfig: {

diff --git a/src/index.ts b/src/index.ts
@@ -100,6 +100,7 @@ const baseDragState = {
   originalZIndex: undefined,
   pointerSelection: false,
   preventEnter: false,
+  rootUserSelect: undefined,
   nodePointerdown: undefined,
   longPress: false,
   scrolling: false,
@@ -160,6 +161,7 @@ export function resetState() {
     remapJustFinished: false,
     selectedNodes: [],
     nodePointerdown: undefined,
+    rootUserSelect: undefined,
     preventSynthDrag: false,
     scrolling: false,
     selectedParent: undefined,
@@ -280,6 +282,12 @@ function handleRootPointermove(e: PointerEvent) {
       nodes
     );
 
+    state.rootUserSelect = window.getComputedStyle(
+      document.documentElement
+    ).userSelect;
+
+    document.body.style.userSelect = "none";
+
     synthMove(e, synthDragState);
   } else if (isSynthDragState(state)) {
     synthMove(e, state);
@@ -1992,7 +2000,7 @@ export function handlePointercancel<T>(
 export function handleEnd<T>(state: DragState<T> | SynthDragState<T>) {
   if (state.draggedNode) state.draggedNode.el.draggable = false;
 
-  document.body.style.userSelect = "";
+  document.body.style.userSelect = state.rootUserSelect || "";
 
   if (isSynthDragState(state)) cancelSynthScroll(state);
 

diff --git a/src/types.ts b/src/types.ts
@@ -823,6 +823,7 @@ export type BaseDragState<T> = {
     parent: ParentRecord<T>;
   };
   scrolling: boolean;
+  rootUserSelect: string | undefined;
 };
 
 export interface DragStateProps<T> {