From 36dcbf1a07e56295b6962ae08a9716536d54afbb Mon Sep 17 00:00:00 2001
From: Kaz Wesley <kaz@lambdaverse.org>
Date: Mon, 6 May 2024 09:36:43 -0700
Subject: [PATCH] Output port changes (#9842)

* Output port changes

- Enlarge output port hover area; fix hover area extending above node
- Show ports when selection is shown
- Adjust port stroke-width and offset to match Figma
- Change cursor when output port is hovered
---
 .../src/components/GraphEditor/GraphEdge.vue  |  1 +
 .../src/components/GraphEditor/GraphNode.vue  | 29 ++++++++++++++-----
 .../GraphEditor/GraphVisualization.vue        |  9 ------
 .../src/components/VisualizationContainer.vue |  1 +
 4 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/app/gui2/src/components/GraphEditor/GraphEdge.vue b/app/gui2/src/components/GraphEditor/GraphEdge.vue
index 9f579a1f8fe..1956bd3289c 100644
--- a/app/gui2/src/components/GraphEditor/GraphEdge.vue
+++ b/app/gui2/src/components/GraphEditor/GraphEdge.vue
@@ -571,6 +571,7 @@ const connected = computed(() => isConnected(props.edge))
   stroke-width: 14;
   stroke: transparent;
   pointer-events: stroke;
+  cursor: pointer;
 }
 .edge.visible {
   stroke-width: 4;
diff --git a/app/gui2/src/components/GraphEditor/GraphNode.vue b/app/gui2/src/components/GraphEditor/GraphNode.vue
index 7caa3188e93..ced7adb3650 100644
--- a/app/gui2/src/components/GraphEditor/GraphNode.vue
+++ b/app/gui2/src/components/GraphEditor/GraphNode.vue
@@ -405,7 +405,14 @@ watchEffect(() => {
       const scope = effectScope(true)
       const approach = scope.run(() =>
         useApproach(
-          () => (outputHovered.value === port || graph.unconnectedEdge?.target === port ? 1 : 0),
+          () =>
+            (
+              outputHovered.value === port ||
+              graph.unconnectedEdge?.target === port ||
+              selectionVisible.value
+            ) ?
+              1
+            : 0,
           50,
           0.01,
         ),
@@ -600,21 +607,19 @@ const documentation = computed<string | undefined>({
   height: 100%;
   position: absolute;
   overflow: visible;
-  top: 0px;
-  left: 0px;
+  top: 0;
+  left: 0;
   display: flex;
 
-  --output-port-max-width: 6px;
-  --output-port-overlap: 0.2px;
-  --output-port-hover-width: 8px;
+  --output-port-max-width: 4px;
+  --output-port-overlap: -8px;
+  --output-port-hover-width: 20px;
 }
 
 .outputPort,
 .outputPortHoverArea {
   x: calc(0px - var(--output-port-width) / 2);
-  y: calc(0px - var(--output-port-width) / 2);
   width: calc(var(--node-width) + var(--output-port-width));
-  height: calc(var(--node-height) + var(--output-port-width));
   rx: calc(var(--node-border-radius) + var(--output-port-width) / 2);
 
   fill: none;
@@ -638,13 +643,21 @@ const documentation = computed<string | undefined>({
   --output-port-width: calc(
     var(--output-port-max-width) * var(--hover-animation) - var(--output-port-overlap)
   );
+  y: calc(0px - var(--output-port-width) / 2);
+  height: calc(var(--node-height) + var(--output-port-width));
   pointer-events: none;
 }
 
 .outputPortHoverArea {
   --output-port-width: var(--output-port-hover-width);
+  y: calc(
+    0px + var(--output-port-hover-width) / 2 + var(--output-port-overlap) / 2 + var(--node-height) /
+      2
+  );
+  height: calc(var(--node-height) / 2 + var(--output-port-hover-width) / 2);
   stroke: transparent;
   pointer-events: all;
+  cursor: pointer;
 }
 
 .portClip {
diff --git a/app/gui2/src/components/GraphEditor/GraphVisualization.vue b/app/gui2/src/components/GraphEditor/GraphVisualization.vue
index 2e2bafe68b0..bfc04aabdbb 100644
--- a/app/gui2/src/components/GraphEditor/GraphVisualization.vue
+++ b/app/gui2/src/components/GraphEditor/GraphVisualization.vue
@@ -374,12 +374,3 @@ watch(
     </Suspense>
   </div>
 </template>
-
-<style scoped>
-.GraphVisualization {
-  position: relative;
-  /** Confine the visualization to its own stacking context, so that it can't draw on top of other UI elements
-      (e.g. dropdown widgets). */
-  z-index: 0;
-}
-</style>
diff --git a/app/gui2/src/components/VisualizationContainer.vue b/app/gui2/src/components/VisualizationContainer.vue
index 88e35ac80f2..c5c9406fc3f 100644
--- a/app/gui2/src/components/VisualizationContainer.vue
+++ b/app/gui2/src/components/VisualizationContainer.vue
@@ -324,6 +324,7 @@ const nodeShortType = computed(() =>
   border-radius: var(--radius-full);
   gap: 12px;
   padding: 8px;
+  z-index: 20;
 
   &:before {
     content: '';