From 6b4f79c9fad756b8ae98c5d69af89fb07efb9a94 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Fri, 29 Aug 2025 13:54:32 +0200
Subject: [PATCH] ui/scene: add different cursor type

---
 pkgs/clan-app/ui/src/scene/cubes.css |  1 -
 pkgs/clan-app/ui/src/scene/cubes.tsx | 24 ++++++++++++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/pkgs/clan-app/ui/src/scene/cubes.css b/pkgs/clan-app/ui/src/scene/cubes.css
index 063fe6ad8..f5cdc2d2e 100644
--- a/pkgs/clan-app/ui/src/scene/cubes.css
+++ b/pkgs/clan-app/ui/src/scene/cubes.css
@@ -1,7 +1,6 @@
 .cubes-scene-container {
   width: 100%;
   height: 100vh;
-  cursor: pointer;
 }
 
 /* <div class="absolute bottom-4 left-1/2 flex -translate-x-1/2 flex-col items-center">
diff --git a/pkgs/clan-app/ui/src/scene/cubes.tsx b/pkgs/clan-app/ui/src/scene/cubes.tsx
index 611e1ed3d..15b130c73 100644
--- a/pkgs/clan-app/ui/src/scene/cubes.tsx
+++ b/pkgs/clan-app/ui/src/scene/cubes.tsx
@@ -21,6 +21,7 @@ import { Accessor } from "solid-js";
 import { renderLoop } from "./RenderLoop";
 import { ObjectRegistry } from "./ObjectRegistry";
 import { MachineManager } from "./MachineManager";
+import cx from "classnames";
 
 function garbageCollectGroup(group: THREE.Group) {
   for (const child of group.children) {
@@ -101,6 +102,8 @@ export function CubeScene(props: {
   const [positionMode, setPositionMode] = createSignal<"grid" | "circle">(
     "grid",
   );
+  // Managed by controls
+  const [isDragging, setIsDragging] = createSignal(false);
 
   const [cursorPosition, setCursorPosition] = createSignal<[number, number]>();
 
@@ -273,6 +276,13 @@ export function CubeScene(props: {
       bgCamera,
     );
 
+    controls.addEventListener("start", (e) => {
+      setIsDragging(true);
+    });
+    controls.addEventListener("end", (e) => {
+      setIsDragging(false);
+    });
+
     // Lighting
     const ambientLight = new THREE.AmbientLight(0xd9f2f7, 0.72);
     scene.add(ambientLight);
@@ -582,7 +592,17 @@ export function CubeScene(props: {
 
   return (
     <>
-      <div class="cubes-scene-container" ref={(el) => (container = el)} />
+      <div
+        class={cx(
+          "cubes-scene-container",
+          worldMode() === "default" && "cursor-no-drop",
+          worldMode() === "select" && "cursor-pointer",
+          worldMode() === "service" && "cursor-pointer",
+          worldMode() === "create" && "cursor-cell",
+          isDragging() && "!cursor-grabbing",
+        )}
+        ref={(el) => (container = el)}
+      />
       <div class="toolbar-container">
         <div class="absolute bottom-full left-1/2 mb-2 -translate-x-1/2">
           {props.toolbarPopup}
@@ -615,7 +635,7 @@ export function CubeScene(props: {
             }}
           />
           <ToolbarButton
-            icon="Reload"
+            icon="Update"
             name="Reload"
             description="Reload machines"
             onClick={() => machinesQuery.refetch()}