Render target attachment bit as part of port. (#9068)

Fixes one issue from #8139.

Before:
![image](https://github.com/enso-org/enso/assets/1047859/1db71cda-7f9e-4d15-ac0f-14cb3c0b7c09)

After:
![image](https://github.com/enso-org/enso/assets/1047859/c5aafc56-d81d-447e-b725-fcb2e30b3c4e)

app/gui2/src/components/GraphEditor/GraphEdge.vue

@@ -115,7 +115,6 @@ interface Inputs {
 interface JunctionPoints {
   points: Vec2[]
   maxRadius: number
-  targetAttachment: { target: Vec2; length: number } | undefined
 }
 
 function circleIntersection(x: number, r1: number, r2: number): number {
@@ -160,8 +159,8 @@ function circleIntersection(x: number, r1: number, r2: number): number {
  */
 
 /** Calculate the start and end positions of each 1-corner section composing an edge to the
- *  given offset. Return the points, the maximum radius that should be used to draw the corners
- *  connecting them, and the length of the target attachment bit.
+ *  given offset. Return the points and the maximum radius that should be used to draw the corners
+ *  connecting them.
  */
 function junctionPoints(inputs: Inputs): JunctionPoints | null {
   let halfSourceSize = inputs.sourceSize?.scale(0.5) ?? Vec2.Zero
@@ -230,7 +229,6 @@ function junctionPoints(inputs: Inputs): JunctionPoints | null {
     return {
       points: [source, targetAttachment],
       maxRadius,
-      targetAttachment: attachment,
     }
   } else {
     const radiusMax = theme.edge.three_corner.radius_max
@@ -282,7 +280,6 @@ function junctionPoints(inputs: Inputs): JunctionPoints | null {
     return {
       points: [source, j0, j1, attachmentTarget],
       maxRadius: radiusMax,
-      targetAttachment: attachment,
     }
   }
 }

app/gui2/src/components/GraphEditor/widgets/WidgetPort.vue

@@ -45,7 +45,17 @@ const hasConnection = computed(
 const isCurrentEdgeHoverTarget = computed(
   () => isHovered.value && graph.unconnectedEdge != null && selection?.hoveredPort === portId.value,
 )
+const isCurrentDisconectedEdgeTarget = computed(
+  () =>
+    graph.unconnectedEdge?.disconnectedEdgeTarget === portId.value &&
+    graph.unconnectedEdge?.target !== portId.value,
+)
 const connected = computed(() => hasConnection.value || isCurrentEdgeHoverTarget.value)
+const isTarget = computed(
+  () =>
+    (hasConnection.value && !isCurrentDisconectedEdgeTarget.value) ||
+    isCurrentEdgeHoverTarget.value,
+)
 
 const rootNode = shallowRef<HTMLElement>()
 const nodeSize = useResizeObserver(rootNode, false)
@@ -145,6 +155,7 @@ export const widgetDefinition = defineWidget(WidgetInput.isAstOrPlaceholder, {
     class="WidgetPort"
     :class="{
       connected,
+      isTarget,
       'r-24': connected,
       newToConnect: !hasConnection && isCurrentEdgeHoverTarget,
       primary: props.nesting < 2,
@@ -213,4 +224,16 @@ export const widgetDefinition = defineWidget(WidgetInput.isAstOrPlaceholder, {
     right: 0px;
   }
 }
+
+.WidgetPort.isTarget: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>