ui/scene: add different cursor type

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">

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()}