From a2cd70d7ca59de5007dd7628f0b3fb1e38dbb66e Mon Sep 17 00:00:00 2001
From: Roman Pominov <rpominov+github@gmail.com>
Date: Mon, 15 Aug 2022 09:43:56 +0300
Subject: [PATCH] cursor=grabbing while dragging

---
 .../app/designer/shared/tree/tree.tsx         |  7 ++++--
 .../src/components/primitives/dnd/index.ts    |  1 +
 .../primitives/dnd/use-drag-cursor.ts         | 24 +++++++++++++++++++
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 packages/design-system/src/components/primitives/dnd/use-drag-cursor.ts

diff --git a/apps/designer/app/designer/shared/tree/tree.tsx b/apps/designer/app/designer/shared/tree/tree.tsx
index 722792c76c..427299ccaf 100644
--- a/apps/designer/app/designer/shared/tree/tree.tsx
+++ b/apps/designer/app/designer/shared/tree/tree.tsx
@@ -7,12 +7,13 @@ import {
 import {
   type DropTarget,
   type Rect,
+  type Placement,
   useDrag,
   useDrop,
   useHold,
-  Box,
   useAutoScroll,
-  Placement,
+  useDragCursor,
+  Box,
 } from "@webstudio-is/design-system";
 import {
   findInstanceById,
@@ -358,6 +359,8 @@ export const Tree = ({
 
   const autoScrollHandlers = useAutoScroll();
 
+  useDragCursor(dragItem !== undefined);
+
   return (
     <Box
       css={{
diff --git a/packages/design-system/src/components/primitives/dnd/index.ts b/packages/design-system/src/components/primitives/dnd/index.ts
index 7b407146f1..8cb8570565 100644
--- a/packages/design-system/src/components/primitives/dnd/index.ts
+++ b/packages/design-system/src/components/primitives/dnd/index.ts
@@ -3,4 +3,5 @@ export * from "./use-drop";
 export * from "./use-auto-scroll";
 export * from "./placement-indicator";
 export * from "./use-hold";
+export * from "./use-drag-cursor";
 export { type Rect, type Point, type Placement } from "./geometry-utils";
diff --git a/packages/design-system/src/components/primitives/dnd/use-drag-cursor.ts b/packages/design-system/src/components/primitives/dnd/use-drag-cursor.ts
new file mode 100644
index 0000000000..e9185f2ce0
--- /dev/null
+++ b/packages/design-system/src/components/primitives/dnd/use-drag-cursor.ts
@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+
+export const useDragCursor = (isDragging: boolean, cursor = "grabbing") => {
+  useEffect(() => {
+    // possible
+    if (document.body === null) {
+      return;
+    }
+
+    if (isDragging) {
+      const originalValue = document.body.style.getPropertyValue("cursor");
+      const originalPriority =
+        document.body.style.getPropertyPriority("cursor");
+      document.body.style.setProperty("cursor", cursor, "important");
+      return () => {
+        document.body.style.setProperty(
+          "cursor",
+          originalValue,
+          originalPriority
+        );
+      };
+    }
+  }, [isDragging, cursor]);
+};