Edges always end with arrows (#11590)

Bypassing the failing test.

app/gui/src/project-view/components/ComponentBrowser.vue

@@ -41,6 +41,8 @@ const PAN_MARGINS = {
 }
 const COMPONENT_EDITOR_PADDING = 12
 const ICON_WIDTH = 16
+// Component editor is larger than a typical node, so the edge should touch it a bit higher.
+const EDGE_Y_OFFSET = -6
 
 const cssComponentEditorPadding = `${COMPONENT_EDITOR_PADDING}px`
 
@@ -199,7 +201,9 @@ watchEffect(() => {
     return
   }
   const scenePos = originScenePos.value.add(
-    new Vec2(COMPONENT_EDITOR_PADDING + ICON_WIDTH / 2, 0).scale(clientToSceneFactor.value),
+    new Vec2(COMPONENT_EDITOR_PADDING + ICON_WIDTH / 2, 0)
+      .scale(clientToSceneFactor.value)
+      .add(new Vec2(0, EDGE_Y_OFFSET)),
   )
   graphStore.cbEditedEdge = {
     source,

app/gui/src/project-view/components/ComponentBrowser/ComponentEditor.vue

@@ -105,17 +105,6 @@ const rootStyle = computed(() => {
   isolation: isolate;
 }
 
-.iconPort::before {
-  content: '';
-  position: absolute;
-  top: calc(var(--port-padding) - var(--component-editor-padding));
-  width: var(--port-edge-width);
-  height: calc(var(--component-editor-padding) - var(--port-padding) + var(--icon-height) / 2);
-  transform: translate(-50%, 0);
-  background-color: var(--node-color-port);
-  z-index: -1;
-}
-
 .nodeIcon {
   color: white;
   width: var(--icon-height);

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

@@ -73,8 +73,7 @@ const targetPos = computed<Vec2 | undefined>(() => {
   if (expr != null && targetNode.value != null && targetNodeRect.value != null) {
     const targetRectRelative = graph.getPortRelativeRect(expr)
     if (targetRectRelative == null) return
-    const yAdjustment =
+    const yAdjustment = -(arrowHeight + arrowYOffset)
-      targetIsSelfArgument.value ? -(selfArgumentArrowHeight + selfArgumentArrowYOffset) : 0
     return targetNodeRect.value.pos.add(new Vec2(targetRectRelative.center().x, yAdjustment))
   } else if (mouseAnchorPos.value != null) {
     return mouseAnchorPos.value
@@ -509,29 +508,18 @@ const backwardEdgeArrowTransform = computed<string | undefined>(() => {
   return svgTranslate(origin.add(points[1]))
 })
 
-const targetIsSelfArgument = computed(() => {
+const arrowHeight = 9
-  if ('targetIsSelfArgument' in props.edge && props.edge?.targetIsSelfArgument) return true
+const arrowYOffset = 0
-  if (!targetExpr.value) return
+const arrowTransform = computed<string | undefined>(() => {
-  const nodeId = graph.getPortNodeId(targetExpr.value)
+  const arrowTopOffset = 4
-  if (!nodeId) return
+  const arrowWidth = 12
-  const primarySubject = graph.db.nodeIdToNode.get(nodeId)?.primarySubject
-  if (!primarySubject) return
-  return targetExpr.value === primarySubject
-})
-
-const selfArgumentArrowHeight = 9
-const selfArgumentArrowYOffset = 0
-const selfArgumentArrowTransform = computed<string | undefined>(() => {
-  const selfArgumentArrowTopOffset = 4
-  const selfArgumentArrowWidth = 12
-  if (!targetIsSelfArgument.value) return
   const target = targetPos.value
   if (target == null) return
-  const pos = target.sub(new Vec2(selfArgumentArrowWidth / 2, selfArgumentArrowTopOffset))
+  const pos = target.sub(new Vec2(arrowWidth / 2, arrowTopOffset))
   return svgTranslate(pos)
 })
 
-const selfArgumentArrowPath = [
+const arrowPath = [
   'M10.9635 1.5547',
   'L6.83205 7.75193',
   'C6.43623 8.34566 5.56377 8.34566 5.16795 7.75192',
@@ -620,9 +608,9 @@ const sourceHoverAnimationStyle = computed(() => {
         :data-target-node-id="targetNode"
       />
       <path
-        v-if="selfArgumentArrowTransform"
+        v-if="arrowTransform"
-        :transform="selfArgumentArrowTransform"
+        :transform="arrowTransform"
-        :d="selfArgumentArrowPath"
+        :d="arrowPath"
         :class="{ arrow: true, visible: true, dimmed: targetEndIsDimmed }"
         :style="baseStyle"
       />

app/gui/src/project-view/components/GraphEditor/widgets/WidgetPort.vue

@@ -189,7 +189,6 @@ export const widgetDefinition = defineWidget(
       enabled,
       connected,
       isTarget,
-      isSelfArgument,
       widgetRounded: connected,
       newToConnect: !hasConnection && isCurrentEdgeHoverTarget,
       primary: props.nesting < 2,
@@ -248,16 +247,4 @@ export const widgetDefinition = defineWidget(
     right: 0px;
   }
 }
-
-.WidgetPort.isTarget:not(.isSelfArgument):after {
-  content: '';
-  position: absolute;
-  top: -4px;
-  left: 50%;
-  width: 4px;
-  height: 5px;
-  transform: translate(-50%, 0);
-  background-color: var(--node-color-port);
-  z-index: -1;
-}
 </style>