experiment with masks for edges

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

@@ -121,20 +121,8 @@ type NodeMask = {
 }
 
 const startsInPort = computed(() => currentJunctionPoints.value?.startsInPort)
-const sourceMask = computed<NodeMask | undefined>(() => {
-  if (!props.maskSource && !startsInPort.value) return
-  const nodeRect = sourceNodeRect.value
-  if (!nodeRect) return
-  const animProgress =
-    startsInPort.value ?
-      (sourceNode.value && graph.nodeHoverAnimations.get(sourceNode.value)) ?? 0
-    : 0
-  const padding = animProgress * VISIBLE_PORT_MASK_PADDING
-  if (!props.maskSource && padding === 0) return
-  const rect = nodeRect.expand(padding)
-  const radius = 16 + padding
-  const id = `mask_for_edge_to-${props.edge.target ?? 'unconnected'}`
-  return { id, rect, radius }
+const sourceMaskId = computed(() => {
+  return `mask_for_edge_from-${connectedSourceNode.value ?? 'unconnected'}`
 })
 
 const edgeColor = computed(() =>
@@ -543,33 +531,7 @@ const sourceHoverAnimationStyle = computed(() => {
 
 <template>
   <template v-if="basePath">
-    <mask
-      v-if="sourceMask && navigator"
-      :id="sourceMask.id"
-      :x="navigator.viewport.left"
-      :y="navigator.viewport.top"
-      width="100%"
-      height="100%"
-      maskUnits="userSpaceOnUse"
-    >
-      <rect
-        :x="navigator.viewport.left"
-        :y="navigator.viewport.top"
-        width="100%"
-        height="100%"
-        fill="white"
-      />
-      <rect
-        :x="sourceMask.rect.left"
-        :y="sourceMask.rect.top"
-        :width="sourceMask.rect.width"
-        :height="sourceMask.rect.height"
-        :rx="sourceMask.radius"
-        :ry="sourceMask.radius"
-        fill="black"
-      />
-    </mask>
-    <g v-bind="sourceMask && { mask: `url('#${sourceMask.id}')` }">
+    <g v-bind="{ mask: `url('#${sourceMaskId}')` }">
       <path
         ref="base"
         :d="basePath"

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

@@ -9,6 +9,7 @@ import { Ast } from '@/util/ast'
 import { isAstId, type AstId } from '@/util/ast/abstract'
 import { Vec2 } from '@/util/data/vec2'
 import { toast } from 'react-toastify'
+import { computed } from 'vue'
 
 const graph = useGraphStore()
 const selection = injectGraphSelection(true)
@@ -113,11 +114,52 @@ function createEdge(source: AstId, target: PortId) {
     }
   }
 }
+
+const VISIBLE_PORT_MASK_PADDING = 6
+const masks = computed(() => {
+  const nodes = graph.nodeRects.entries()
+  return Array.from(nodes, ([nodeId, nodeRect]) => {
+    const animProgress = graph.nodeHoverAnimations.get(nodeId) ?? 0
+    const padding = animProgress * VISIBLE_PORT_MASK_PADDING
+    const rect = nodeRect.expand(padding)
+    const radius = 16 + padding
+    const id = `mask_for_edge_from-${nodeId}`
+    return { id, rect, radius }
+  })
+})
 </script>
 
 <template>
   <div>
     <svg :viewBox="props.navigator.viewBox" class="overlay behindNodes">
+      <template v-for="mask in masks" :key="mask.id">
+        <mask
+          v-if="mask && navigator"
+          :id="mask.id"
+          :x="navigator.viewport.left"
+          :y="navigator.viewport.top"
+          width="100%"
+          height="100%"
+          maskUnits="userSpaceOnUse"
+        >
+          <rect
+            :x="navigator.viewport.left"
+            :y="navigator.viewport.top"
+            width="100%"
+            height="100%"
+            fill="white"
+          />
+          <rect
+            :x="mask.rect.left"
+            :y="mask.rect.top"
+            :width="mask.rect.width"
+            :height="mask.rect.height"
+            :rx="mask.radius"
+            :ry="mask.radius"
+            fill="black"
+          />
+        </mask>
+      </template>
       <GraphEdge v-for="edge in graph.connectedEdges" :key="edge.target" :edge="edge" />
       <GraphEdge v-if="graph.cbEditedEdge" :edge="graph.cbEditedEdge" />
       <GraphEdge