From 964e621f0ea4e984b187e16bee62df2b709cc387 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Sat, 20 Jun 2026 12:43:27 +0200 Subject: [PATCH] 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. --- src/model/projection.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/model/projection.ts b/src/model/projection.ts index 0bc10cb..72497ca 100644 --- a/src/model/projection.ts +++ b/src/model/projection.ts @@ -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, }) }