feat: configurable edge line style + width per type and per edge

Edge render (solid/dashed/dotted) and stroke width were hardcoded per
edge type. Expose both as user settings.

- Custom Style modal (Edges): line-style buttons, 1-4x width slider,
  live preview; left-list swatch renders the actual line.
- Per-edge EdgeModal: same controls; line style follows the type preset
  live until overridden.
- Renderer applies line_style/width_mult over BASE_STYLES (width scales
  markers + animation overlays); unset keeps the type default look.
- Persist line_style/width_mult through serializer, canvas save, and the
  edges API (new nullable columns, idempotent migration).

ha-relevant: yes
This commit is contained in:
Pouzor
2026-07-05 14:11:01 +02:00
parent 40ec26ab7e
commit 485d2f2b04
19 changed files with 469 additions and 9 deletions
@@ -250,6 +250,19 @@ describe('serializeEdge', () => {
expect(result.marker_end).toBe('arrow')
})
it('serializes line style + width multiplier', () => {
const edge = makeRfEdge({ data: { type: 'wifi', line_style: 'dotted', width_mult: 3 } })
const result = serializeEdge(edge)
expect(result.line_style).toBe('dotted')
expect(result.width_mult).toBe(3)
})
it('nulls line style + width multiplier when absent', () => {
const result = serializeEdge(makeRfEdge())
expect(result.line_style).toBeNull()
expect(result.width_mult).toBeNull()
})
it('coerces legacy boolean markers to shape strings', () => {
const edge = makeRfEdge({ data: { type: 'ethernet', marker_start: true, marker_end: false } })
const result = serializeEdge(edge)