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"
|
* Flow's references (ADR-0003); each Information Link contributes one "info"
|
||||||
* edge carrying its polarity.
|
* 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"
|
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. */
|
/** Payload carried on every projected Vue Flow node: the domain node itself. */
|
||||||
export interface NodeData {
|
export interface NodeData {
|
||||||
node: ModelNode
|
node: ModelNode
|
||||||
@@ -72,7 +81,7 @@ export function projectEdges(model: Model): FlowGraphEdge[] {
|
|||||||
targetHandle: HANDLE_IN,
|
targetHandle: HANDLE_IN,
|
||||||
data: { kind: "pipe" },
|
data: { kind: "pipe" },
|
||||||
style: { strokeWidth: "2.5px" },
|
style: { strokeWidth: "2.5px" },
|
||||||
markerEnd: "arrow",
|
markerEnd: ARROWHEAD,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -88,7 +97,7 @@ export function projectEdges(model: Model): FlowGraphEdge[] {
|
|||||||
targetHandle: HANDLE_IN,
|
targetHandle: HANDLE_IN,
|
||||||
data: { kind: "info", polarity: link.polarity },
|
data: { kind: "info", polarity: link.polarity },
|
||||||
style: { strokeDasharray: "5 4" },
|
style: { strokeDasharray: "5 4" },
|
||||||
markerEnd: "arrow",
|
markerEnd: ARROWHEAD,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user