feat: shortcut from node Appearance to canvas-wide type style

Adds a link under the colour swatches in the add/edit node modal that opens the
Custom Style editor with the node's type preselected, so a user can edit the
style for every node of that type without navigating Style -> Customize -> pick
type manually.

- CustomStyleModal: new optional `initialNodeType` prop; when set, the modal
  opens straight into that node type's editor instead of the empty placeholder.
- NodeModal: new optional `onEditTypeStyle(type)` prop renders the shortcut link
  (hidden for group/groupRect and when no handler is wired).
- App: `styleEditorType` state; both Add and Edit NodeModals forward the handler,
  and a standalone CustomStyleModal instance opens preselected (stacked over the
  node modal so in-progress node edits are preserved).

ha-relevant: yes
This commit is contained in:
Pouzor
2026-07-04 15:14:33 +02:00
parent e39ab7d530
commit e8530ad3db
5 changed files with 58 additions and 5 deletions
@@ -54,6 +54,13 @@ describe('CustomStyleModal', () => {
expect(screen.getByText('Default size')).toBeDefined()
})
it('initialNodeType preselects that type editor on open (NodeModal shortcut)', () => {
render(<CustomStyleModal open initialNodeType="switch" onClose={vi.fn()} />)
// Editor for Switch is shown immediately, no manual selection needed.
expect(screen.getByText(/Apply to existing Switch/)).toBeDefined()
expect(screen.queryByText(/Select a node type/)).toBeNull()
})
it('selecting an edge type opens the edge editor with path style buttons', () => {
render(<CustomStyleModal open onClose={vi.fn()} />)
fireEvent.click(screen.getByRole('button', { name: 'Edges' }))
@@ -105,6 +105,21 @@ describe('NodeModal', () => {
confirmSpy.mockRestore()
})
// ── Custom-style shortcut ─────────────────────────────────────────────
it('shows the type-style shortcut and calls onEditTypeStyle with the node type', () => {
const onEditTypeStyle = vi.fn()
renderModal({ initial: BASE, onEditTypeStyle })
const link = screen.getByRole('button', { name: /style for all nodes on the canvas/i })
fireEvent.click(link)
expect(onEditTypeStyle).toHaveBeenCalledWith('server')
})
it('omits the shortcut when onEditTypeStyle is not provided', () => {
renderModal({ initial: BASE })
expect(screen.queryByText(/style for all nodes on the canvas/i)).toBeNull()
})
// ── Label validation ──────────────────────────────────────────────────
it('blocks submit and shows error when label is empty', () => {