- Extract centerline algorithm to packages/core/src/vector/centerline.ts
to stay under max-lines (index.ts 441 lines, centerline.ts 289 lines)
- Fix PathEffect.MakeDash leak: store reference and .delete() after use
- Add aria-label to dash toggle button with i18n (strokeDash)
- Read dash/gap values directly from dashPattern array in template
instead of calling dashState() 4 times
- Add unit tests for fitCircleArc and isClosedThinCrescent
(collinear, non-circular, annular wedge, rectangle, hexagon, open path)
Vector nodes with stroke.dashPattern were rendering as solid lines, and
even when the dash was applied through brute outline-stroke conversion,
closed crescent shapes (e.g. annular wedges) showed two parallel dashed
arcs instead of a single arc along the centerline.
Root cause:
- drawVectorPathStrokes converted stroke to a fill outline before drawing,
leaving no place for PathEffect.MakeDash to apply.
- A closed crescent is a single closed path traced around both the outer
and inner arcs, so dashing the path produces two visible arcs.
Fix:
- packages/core/src/canvas/scene.ts: in drawVectorPathStrokes, when the
stroke has a dashPattern, skip the outline conversion and draw with
strokePaint + PathEffect.MakeDash directly. In renderShapeUncached,
dashed VECTOR nodes with a vectorNetwork now route through a new
centerline path instead of the precomputed strokeGeometry.
- packages/core/src/vector/index.ts: new vectorNetworkToCenterlinePath.
For closed thin crescents (cycle of even length where pairwise opposite
vertex distance is small relative to perimeter and consistent), detect
the two cap segments via vertex direction-change angles, split the
cycle into outer/inner subchains, pair vertices by angle, and emit a
smooth Path.addArc when the midpoints fit a circle (fitCircleArc with
3-point construction + radius tolerance), falling back to a midpoint
polyline otherwise. Open paths use the existing chain walk.
JSX prop wiring so users can author dashed Vectors:
- packages/core/src/design-jsx/tree.ts: add strokeDash?: number[] | boolean.
- packages/core/src/design-jsx/renderer.ts: applyStrokeOverrides reads
strokeDash and writes Stroke.dashPattern; true expands to [w*2, w*2].
- packages/core/src/io/formats/jsx/export.ts: solidStroke serializes
dashPattern back to strokeDash on JSX export.
Editor UI:
- src/components/properties/StrokeSection.vue: dash toggle button plus
ScrubInputs for dash and gap length, writing strokes[0].dashPattern.
bun run check passes. Pre-existing test failures (drop shadow / auto
layout) are unrelated to this change and reproduce on a clean
upstream/master.
The selection size pill was drawn in local node space after
canvas.concat(worldMatrix * viewMatrix), causing it to scale
with the canvas zoom. Now computed in screen coordinates like
the multi-selection badge.
