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:
@@ -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,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user