Implement partially transparent visualizations (#11582)

Closes #11534

- Visualizations are partially transparent by default
- The initial z-order is undetermined at the project load
- Node is moved on top of other if it is dragged (before it only happened if it was **selected**, which is not the same)
- Changed rendering for edges slightly, to avoid visible edge ends underneath visualization. The implementation of additional offsets is rather naive, but it works.

https://github.com/user-attachments/assets/fba44816-eed9-471d-83a7-8fe6e5892477

CHANGELOG.md

@@ -34,6 +34,8 @@
 - [Table Input Widget is now matched for Table.input method instead of
   Table.new. Values must be string literals, and their content is parsed to the
   suitable type][11612].
+- [Visualizations on components are slightly transparent when not
+  focused][11582].
 - [New design for vector-editing widget][11620]
 
 [11151]: https://github.com/enso-org/enso/pull/11151
@@ -56,6 +58,7 @@
 [11564]: https://github.com/enso-org/enso/pull/11564
 [11597]: https://github.com/enso-org/enso/pull/11597
 [11612]: https://github.com/enso-org/enso/pull/11612
+[11582]: https://github.com/enso-org/enso/pull/11582
 [11620]: https://github.com/enso-org/enso/pull/11620
 
 #### Enso Standard Library

app/gui/src/project-view/components/GraphEditor/GraphEdge.vue

@@ -215,7 +215,7 @@ function junctionPoints(inputs: Inputs): JunctionPoints | null {
   const halfSourceSize = inputs.sourceSize?.scale(0.5) ?? Vec2.Zero
   // The maximum x-distance from the source (our local coordinate origin) for the point where the
   // edge will begin.
-  const sourceMaxXOffset = Math.max(halfSourceSize.x - theme.node.corner_radius, 0)
+  const sourceMaxXOffset = Math.max(halfSourceSize.x, 0)
   const attachmentTarget = inputs.targetOffset
   const targetWellBelowSource = inputs.targetOffset.y >= theme.edge.min_approach_height
   const targetBelowSource = inputs.targetOffset.y > 0
@@ -388,10 +388,11 @@ function render(sourcePos: Vec2, elements: Element[]): string {
 const sourceOriginPoint = computed(() => {
   const source = sourceRect.value
   if (source == null) return null
-  const sourceStartPosY = Math.max(
-    source.top + theme.node.corner_radius,
-    source.bottom - theme.node.corner_radius,
-  )
+  const target = targetPos.value
+  const targetAbove = target != null ? target.y < source.bottom : false
+  const targetAside = target != null ? source.left > target.x || source.right < target.x : false
+  const offset = targetAside || targetAbove ? theme.node.corner_radius : 0
+  const sourceStartPosY = Math.max(source.top + offset, source.bottom - offset)
   return new Vec2(source.center().x, sourceStartPosY)
 })
 

app/gui/src/project-view/components/GraphEditor/GraphNode.vue

@@ -292,6 +292,7 @@ const dragPointer = usePointer(
   { pointerCapturedBy: 'target' },
 )
 const isDragged = computed(() => dragPointer.dragging && significantMove.value)
+watch(isDragged, () => graph.db.moveNodeToTop(nodeId.value))
 
 const isRecordingOverridden = computed({
   get() {

app/gui/src/project-view/components/GraphEditor/GraphVisualization.vue

@@ -213,7 +213,7 @@ customElements.define(ensoVisualizationHost, defineCustomElement(VisualizationHo
 </script>
 
 <template>
-  <div class="GraphVisualization" :style="style">
+  <div class="GraphVisualization" :style="style" :class="{ isFocused }">
     <WithFullscreenMode :fullscreen="isFullscreen" @update:animating="fullscreenAnimating = $event">
       <div
         ref="panelElement"
@@ -280,6 +280,11 @@ customElements.define(ensoVisualizationHost, defineCustomElement(VisualizationHo
   background: var(--color-visualization-bg);
   /** Prevent drawing on top of other UI elements (e.g. dropdown widgets). */
   isolation: isolate;
+  opacity: 0.9;
+}
+
+.isFocused {
+  opacity: 1;
 }
 
 .VisualizationPanel {