fix(editor): match the flow arrowhead weight to its line

Vue Flow's open arrow renders at 0.625x the edge stroke (its 20-unit
viewBox is squeezed into a 12.5 marker box), so the chevron looked thin
against the 2.5px pipe. A marker strokeWidth of 20/12.5 cancels the
downscale, drawing the head at the line's weight at any width.
This commit is contained in:
Julien Calixte
2026-06-20 12:43:27 +02:00
parent 528fc97c7f
commit 964e621f0e

View File

@@ -11,9 +11,18 @@
* Flow's references (ADR-0003); each Information Link contributes one "info"
* edge carrying its polarity.
*/
import type { Edge, Node } from "@vue-flow/core"
import { type Edge, type EdgeMarker, MarkerType, type Node } from "@vue-flow/core"
import type { Model, ModelNode, Polarity } from "./types"
/**
* Open arrowhead drawn at the same stroke weight as the line it ends. Vue Flow
* renders the marker with markerUnits="strokeWidth" (so the head already scales
* with the edge) but downscales its 20-unit viewBox into a 12.5 marker box,
* thinning the chevron to 0.625× the line. strokeWidth 20/12.5 = 1.6 cancels
* that, leaving the head exactly as heavy as its line at any width.
*/
const ARROWHEAD: EdgeMarker = { type: MarkerType.Arrow, strokeWidth: 1.6 }
/** Payload carried on every projected Vue Flow node: the domain node itself. */
export interface NodeData {
node: ModelNode
@@ -72,7 +81,7 @@ export function projectEdges(model: Model): FlowGraphEdge[] {
targetHandle: HANDLE_IN,
data: { kind: "pipe" },
style: { strokeWidth: "2.5px" },
markerEnd: "arrow",
markerEnd: ARROWHEAD,
})
}
@@ -88,7 +97,7 @@ export function projectEdges(model: Model): FlowGraphEdge[] {
targetHandle: HANDLE_IN,
data: { kind: "info", polarity: link.polarity },
style: { strokeDasharray: "5 4" },
markerEnd: "arrow",
markerEnd: ARROWHEAD,
})
}