fix: Make cursor styles reflect reality

This makes it clear that nodes can be clicked on, but not edges, and that only the background can be used for drag-to-pan. One might hope that ReactFlow would handle this for us, but it doesn't go far enough, perhaps because its main intended use case involves more interactivity, whereas we essentially just use it for rendering.
hackworthltd · Mar 22, 2023 · 9a63d46 · 9a63d46
1 parent 219f07f
commit 9a63d46
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/components/TreeReactFlow/Flavor.ts b/src/components/TreeReactFlow/Flavor.ts
@@ -13,7 +13,8 @@ export type NodeFlavor =
   | NodeFlavorBoxBody
   | NodeFlavorNoBody;
 
-export const commonHoverClasses = "hover:ring hover:ring-4 hover:ring-offset-4";
+export const commonHoverClasses =
+  "hover:ring hover:ring-4 hover:ring-offset-4 cursor-pointer";
 
 export const flavorClasses = (flavor: NodeFlavor): string => {
   switch (flavor) {
@@ -170,15 +171,15 @@ export const flavorClasses = (flavor: NodeFlavor): string => {
       return "border-yellow-primary ring-yellow-primary";
 
     case "PatternCon":
-      return "border-green-primary ring-green-primary bg-white-primary";
+      return "border-green-primary ring-green-primary bg-white-primary cursor-default";
     case "PatternBind":
       return classNames(
         "border-blue-quaternary ring-blue-quaternary bg-white-primary",
         "hover:ring-blue-quaternary",
         commonHoverClasses
       );
     case "PatternApp":
-      return "border-blue-tertiary ring-blue-tertiary bg-blue-tertiary";
+      return "border-blue-tertiary ring-blue-tertiary bg-blue-tertiary cursor-default";
   }
 };
 

diff --git a/src/components/TreeReactFlow/index.tsx b/src/components/TreeReactFlow/index.tsx
@@ -158,6 +158,7 @@ const nodeTypes = {
         className={classNames(
           "flex justify-center rounded-md border-4",
           flavorClasses(p.data.flavor),
+          "cursor-default",
           // We use a white base so that the "transparent" background will not appear as such.
           "bg-white-primary"
         )}
@@ -292,7 +293,9 @@ const makePrimerNode = async (
     id: JSON.stringify([id, child.id]),
     source: id,
     target: child.id,
+    style: { cursor: "default" },
     focusable: false,
+    interactionWidth: 0,
     zIndex,
   });
   switch (node.body.tag) {
@@ -502,8 +505,9 @@ export const TreeReactFlow = (p: TreeReactFlowProps) => {
                   target: tree.nodeId,
                   type: "step",
                   className: "stroke-grey-tertiary stroke-[0.25rem]",
-                  style: { strokeDasharray: 4 },
+                  style: { strokeDasharray: 4, cursor: "default" },
                   focusable: false,
+                  interactionWidth: 0,
                   zIndex: 0,
                 },
               ],