From e13950ed0d46c29c7b5114b67fee903fa755f9f5 Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Mon, 20 May 2024 09:24:45 +0200
Subject: [PATCH] Display grab cursor 2 (#9982)

Fixes #9906, but the grab hand appears only when actually moving nodes.

Also changed cursor on some widgets.
---
 .../src/components/GraphEditor/GraphNode.vue  | 29 ++++++++++++++-----
 .../GraphEditor/widgets/WidgetSelection.vue   |  1 +
 .../src/components/widgets/AutoSizedInput.vue |  1 -
 .../src/components/widgets/ListWidget.vue     |  1 +
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/app/gui2/src/components/GraphEditor/GraphNode.vue b/app/gui2/src/components/GraphEditor/GraphNode.vue
index 7570dd2629..1c77c6401d 100644
--- a/app/gui2/src/components/GraphEditor/GraphNode.vue
+++ b/app/gui2/src/components/GraphEditor/GraphNode.vue
@@ -246,13 +246,13 @@ const transform = computed(() => {
 })
 
 const startEpochMs = ref(0)
-let significantMove = false
+const significantMove = ref(false)
 
 const dragPointer = usePointer(
   (pos, event, type) => {
     if (type !== 'start') {
       if (
-        !significantMove &&
+        !significantMove.value &&
         (Number(new Date()) - startEpochMs.value >= MAXIMUM_CLICK_LENGTH_MS ||
           pos.relative.lengthSquared() >= MAXIMUM_CLICK_DISTANCE_SQ)
       ) {
@@ -260,7 +260,7 @@ const dragPointer = usePointer(
         // prevent `click` on widgets.
         if (event.currentTarget instanceof Element)
           event.currentTarget.setPointerCapture?.(event.pointerId)
-        significantMove = true
+        significantMove.value = true
       }
       const fullOffset = pos.relative
       emit('dragging', fullOffset)
@@ -268,7 +268,7 @@ const dragPointer = usePointer(
     switch (type) {
       case 'start':
         startEpochMs.value = Number(new Date())
-        significantMove = false
+        significantMove.value = false
         break
       case 'stop': {
         startEpochMs.value = 0
@@ -280,6 +280,7 @@ const dragPointer = usePointer(
   // is not going to be a node drag.
   { pointerCapturedBy: 'target' },
 )
+const isDragged = computed(() => dragPointer.dragging && significantMove)
 
 const isRecordingOverridden = computed({
   get() {
@@ -371,13 +372,13 @@ const handlePortClick = useDoubleClick(
 
 const handleNodeClick = useDoubleClick(
   (e: MouseEvent) => {
-    if (!significantMove) {
+    if (!significantMove.value) {
       nodeSelection?.handleSelectionOf(e, new Set([nodeId.value]))
       nodeEditHandler(e)
     }
   },
   () => {
-    if (!significantMove) emit('doubleClick')
+    if (!significantMove.value) emit('doubleClick')
   },
 ).handleClick
 
@@ -475,6 +476,7 @@ const matchableNodeColors = getNodeColors((node) => node !== nodeId.value)
     <Teleport :to="graphNodeSelections">
       <GraphNodeSelection
         v-if="navigator"
+        :class="{ dragged: isDragged }"
         :nodePosition="props.node.position"
         :nodeSize="nodeSize"
         :selected
@@ -539,7 +541,12 @@ const matchableNodeColors = getNodeColors((node) => node !== nodeId.value)
       @createNodes="emit('createNodes', $event)"
     />
     <GraphNodeComment v-model:editing="editingComment" :node="node" class="beforeNode" />
-    <div ref="contentNode" class="content" v-on="dragPointer.events" @click="handleNodeClick">
+    <div
+      ref="contentNode"
+      :class="{ content: true, dragged: isDragged }"
+      v-on="dragPointer.events"
+      @click="handleNodeClick"
+    >
       <NodeWidgetTree
         :ast="props.node.innerExpr"
         :nodeId="nodeId"
@@ -802,4 +809,12 @@ const matchableNodeColors = getNodeColors((node) => node !== nodeId.value)
   right: 100%;
   margin-right: 4px;
 }
+
+.draggable {
+  cursor: grab;
+}
+
+.dragged {
+  cursor: grabbing;
+}
 </style>
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
index 1b826d8781..8b64110861 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
@@ -406,6 +406,7 @@ declare module '@/providers/widgetRegistry' {
   align-items: center;
   position: relative;
   min-height: var(--node-port-height);
+  cursor: pointer;
 }
 
 .arrow {
diff --git a/app/gui2/src/components/widgets/AutoSizedInput.vue b/app/gui2/src/components/widgets/AutoSizedInput.vue
index 14ebed1e9b..cbbabc6ff9 100644
--- a/app/gui2/src/components/widgets/AutoSizedInput.vue
+++ b/app/gui2/src/components/widgets/AutoSizedInput.vue
@@ -82,7 +82,6 @@ defineExpose({
   height: 24px;
   appearance: textfield;
   -moz-appearance: textfield;
-  cursor: default;
   user-select: all;
   box-sizing: content-box;
   &:focus {
diff --git a/app/gui2/src/components/widgets/ListWidget.vue b/app/gui2/src/components/widgets/ListWidget.vue
index 9753ee5662..d909591bd9 100644
--- a/app/gui2/src/components/widgets/ListWidget.vue
+++ b/app/gui2/src/components/widgets/ListWidget.vue
@@ -516,6 +516,7 @@ div {
     -2px 0 0 transparent;
   transition: box-shadow 0.2s ease;
   pointer-events: none;
+  cursor: grab;
 
   &:before {
     content: '';