feat: add custom style theme with per-type node/edge style editor
- New 'custom' ThemeId with dedicated ThemeCard + pencil edit button - CustomStyleModal: two-column editor for all node types (excl. groupRect/group) and edge types - Per node: border, background, icon color + opacity, default size (w/h) - Per edge: color + opacity, path style, animation - 'Apply to existing [Type]' per type, 'Apply All to Canvas' footer action - canvasStore: applyTypeNodeStyle, applyTypeEdgeStyle, applyAllCustomStyles actions - themeStore: customStyle state + setCustomStyle action - Backend: custom_style JSON column on canvas_state (ALTER TABLE migration), saved/loaded with canvas - App.tsx: custom_style included in save payload, restored on load (API + standalone) - Tests: +8 frontend (themeStore + canvasStore), +3 backend (canvas API)
This commit is contained in:
Pouzor
@@ -722,3 +722,98 @@ describe('canvasStore', () => {
|
||||
expect(updated?.sourceHandle).toBe('bottom')
|
||||
})
|
||||
})
|
||||
|
||||
describe('canvasStore — custom style apply', () => {
|
||||
beforeEach(() => {
|
||||
useCanvasStore.setState({
|
||||
nodes: [],
|
||||
edges: [],
|
||||
hasUnsavedChanges: false,
|
||||
selectedNodeId: null,
|
||||
selectedNodeIds: [],
|
||||
editingGroupRectId: null,
|
||||
past: [],
|
||||
future: [],
|
||||
clipboard: [],
|
||||
})
|
||||
})
|
||||
|
||||
const serverStyle = {
|
||||
borderColor: '#ff0000',
|
||||
borderOpacity: 1,
|
||||
bgColor: '#111111',
|
||||
bgOpacity: 1,
|
||||
iconColor: '#ff0000',
|
||||
iconOpacity: 1,
|
||||
width: 220,
|
||||
height: 90,
|
||||
}
|
||||
|
||||
it('applyTypeNodeStyle updates matching nodes custom_colors', () => {
|
||||
useCanvasStore.setState({
|
||||
nodes: [makeNode('n1', { type: 'server' }), makeNode('n2', { type: 'proxmox' })],
|
||||
edges: [],
|
||||
})
|
||||
useCanvasStore.getState().applyTypeNodeStyle('server', serverStyle)
|
||||
|
||||
const n1 = useCanvasStore.getState().nodes.find((n) => n.id === 'n1')!
|
||||
const n2 = useCanvasStore.getState().nodes.find((n) => n.id === 'n2')!
|
||||
expect(n1.data.custom_colors?.border).toBe('#ff0000')
|
||||
expect(n1.width).toBe(220)
|
||||
expect(n1.height).toBe(90)
|
||||
expect(n2.data.custom_colors?.border).toBeUndefined()
|
||||
})
|
||||
|
||||
it('applyTypeNodeStyle with opacity < 1 produces rgba', () => {
|
||||
useCanvasStore.setState({ nodes: [makeNode('n1', { type: 'server' })], edges: [] })
|
||||
useCanvasStore.getState().applyTypeNodeStyle('server', { ...serverStyle, borderOpacity: 0.5 })
|
||||
|
||||
const n1 = useCanvasStore.getState().nodes.find((n) => n.id === 'n1')!
|
||||
expect(n1.data.custom_colors?.border).toMatch(/^rgba\(/)
|
||||
})
|
||||
|
||||
it('applyTypeNodeStyle marks canvas unsaved', () => {
|
||||
useCanvasStore.setState({ nodes: [makeNode('n1')], edges: [] })
|
||||
useCanvasStore.getState().applyTypeNodeStyle('server', serverStyle)
|
||||
expect(useCanvasStore.getState().hasUnsavedChanges).toBe(true)
|
||||
})
|
||||
|
||||
it('applyTypeEdgeStyle updates matching edges', () => {
|
||||
const e1: Edge<EdgeData> = { id: 'e1', source: 'n1', target: 'n2', type: 'ethernet', data: { type: 'ethernet' } }
|
||||
const e2: Edge<EdgeData> = { id: 'e2', source: 'n1', target: 'n2', type: 'wifi', data: { type: 'wifi' } }
|
||||
useCanvasStore.setState({ nodes: [], edges: [e1, e2] })
|
||||
|
||||
useCanvasStore.getState().applyTypeEdgeStyle('ethernet', { color: '#00ff00', opacity: 1, pathStyle: 'smooth', animated: 'flow' })
|
||||
|
||||
const updated1 = useCanvasStore.getState().edges.find((e) => e.id === 'e1')!
|
||||
const updated2 = useCanvasStore.getState().edges.find((e) => e.id === 'e2')!
|
||||
expect(updated1.data?.custom_color).toBe('#00ff00')
|
||||
expect(updated1.data?.path_style).toBe('smooth')
|
||||
expect(updated1.data?.animated).toBe('flow')
|
||||
expect(updated2.data?.custom_color).toBeUndefined()
|
||||
})
|
||||
|
||||
it('applyAllCustomStyles applies all defined types', () => {
|
||||
const proxmoxNode = makeNode('np', { type: 'proxmox' })
|
||||
const serverNode = makeNode('ns', { type: 'server' })
|
||||
const e1: Edge<EdgeData> = { id: 'e1', source: 'np', target: 'ns', type: 'ethernet', data: { type: 'ethernet' } }
|
||||
useCanvasStore.setState({ nodes: [proxmoxNode, serverNode], edges: [e1] })
|
||||
|
||||
useCanvasStore.getState().applyAllCustomStyles({
|
||||
nodes: {
|
||||
proxmox: { borderColor: '#ff6e00', borderOpacity: 1, bgColor: '#111', bgOpacity: 1, iconColor: '#ff6e00', iconOpacity: 1, width: 0, height: 0 },
|
||||
},
|
||||
edges: {
|
||||
ethernet: { color: '#aabbcc', opacity: 1, pathStyle: 'bezier', animated: 'none' },
|
||||
},
|
||||
})
|
||||
|
||||
const np = useCanvasStore.getState().nodes.find((n) => n.id === 'np')!
|
||||
const ns = useCanvasStore.getState().nodes.find((n) => n.id === 'ns')!
|
||||
const e = useCanvasStore.getState().edges.find((e) => e.id === 'e1')!
|
||||
expect(np.data.custom_colors?.border).toBe('#ff6e00')
|
||||
expect(ns.data.custom_colors?.border).toBeUndefined()
|
||||
expect(e.data?.custom_color).toBe('#aabbcc')
|
||||
expect(useCanvasStore.getState().hasUnsavedChanges).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { describe, it, expect, beforeEach } from 'vitest'
|
||||
import { useThemeStore } from '@/stores/themeStore'
|
||||
import type { CustomStyleDef } from '@/types'
|
||||
|
||||
describe('themeStore', () => {
|
||||
beforeEach(() => {
|
||||
useThemeStore.setState({ activeTheme: 'default' })
|
||||
useThemeStore.setState({ activeTheme: 'default', customStyle: { nodes: {}, edges: {} } })
|
||||
})
|
||||
|
||||
it('starts with default theme', () => {
|
||||
@@ -15,8 +16,8 @@ describe('themeStore', () => {
|
||||
expect(useThemeStore.getState().activeTheme).toBe('matrix')
|
||||
})
|
||||
|
||||
it('setTheme can switch between all presets', () => {
|
||||
const themes = ['default', 'dark', 'light', 'neon', 'matrix'] as const
|
||||
it('setTheme can switch between all presets including custom', () => {
|
||||
const themes = ['default', 'dark', 'light', 'neon', 'matrix', 'custom'] as const
|
||||
for (const id of themes) {
|
||||
useThemeStore.getState().setTheme(id)
|
||||
expect(useThemeStore.getState().activeTheme).toBe(id)
|
||||
@@ -28,4 +29,26 @@ describe('themeStore', () => {
|
||||
useThemeStore.getState().setTheme('default')
|
||||
expect(useThemeStore.getState().activeTheme).toBe('default')
|
||||
})
|
||||
|
||||
it('starts with empty customStyle', () => {
|
||||
const { customStyle } = useThemeStore.getState()
|
||||
expect(customStyle.nodes).toEqual({})
|
||||
expect(customStyle.edges).toEqual({})
|
||||
})
|
||||
|
||||
it('setCustomStyle replaces the entire definition', () => {
|
||||
const def: CustomStyleDef = {
|
||||
nodes: { server: { borderColor: '#ff0000', borderOpacity: 1, bgColor: '#000000', bgOpacity: 1, iconColor: '#ff0000', iconOpacity: 1, width: 200, height: 80 } },
|
||||
edges: { ethernet: { color: '#00ff00', opacity: 0.8, pathStyle: 'bezier', animated: 'none' } },
|
||||
}
|
||||
useThemeStore.getState().setCustomStyle(def)
|
||||
expect(useThemeStore.getState().customStyle.nodes.server?.borderColor).toBe('#ff0000')
|
||||
expect(useThemeStore.getState().customStyle.edges.ethernet?.color).toBe('#00ff00')
|
||||
})
|
||||
|
||||
it('setCustomStyle with empty def clears styles', () => {
|
||||
useThemeStore.getState().setCustomStyle({ nodes: { server: { borderColor: '#aaa', borderOpacity: 1, bgColor: '#000', bgOpacity: 1, iconColor: '#aaa', iconOpacity: 1, width: 0, height: 0 } }, edges: {} })
|
||||
useThemeStore.getState().setCustomStyle({ nodes: {}, edges: {} })
|
||||
expect(useThemeStore.getState().customStyle.nodes).toEqual({})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -9,9 +9,10 @@ import {
|
||||
applyEdgeChanges,
|
||||
addEdge,
|
||||
} from '@xyflow/react'
|
||||
import type { NodeData, EdgeData } from '@/types'
|
||||
import type { NodeData, EdgeData, NodeType, EdgeType, NodeTypeStyle, EdgeTypeStyle, CustomStyleDef } from '@/types'
|
||||
import { generateUUID } from '@/utils/uuid'
|
||||
import { normalizeHandle, removedBottomHandleIds } from '@/utils/handleUtils'
|
||||
import { applyOpacity } from '@/utils/colorUtils'
|
||||
|
||||
type HistoryEntry = { nodes: Node<NodeData>[]; edges: Edge<EdgeData>[] }
|
||||
|
||||
@@ -58,6 +59,9 @@ interface CanvasState {
|
||||
notifyScanDeviceFound: () => void
|
||||
hideIp: boolean
|
||||
toggleHideIp: () => void
|
||||
applyTypeNodeStyle: (nodeType: NodeType, style: NodeTypeStyle) => void
|
||||
applyTypeEdgeStyle: (edgeType: EdgeType, style: EdgeTypeStyle) => void
|
||||
applyAllCustomStyles: (def: CustomStyleDef) => void
|
||||
}
|
||||
|
||||
export const useCanvasStore = create<CanvasState>((set) => ({
|
||||
@@ -468,4 +472,82 @@ export const useCanvasStore = create<CanvasState>((set) => ({
|
||||
},
|
||||
|
||||
clearFitViewPending: () => set({ fitViewPending: false }),
|
||||
|
||||
applyTypeNodeStyle: (nodeType, style) =>
|
||||
set((state) => ({
|
||||
nodes: state.nodes.map((n) => {
|
||||
if (n.data.type !== nodeType) return n
|
||||
return {
|
||||
...n,
|
||||
width: style.width > 0 ? style.width : n.width,
|
||||
height: style.height > 0 ? style.height : n.height,
|
||||
data: {
|
||||
...n.data,
|
||||
custom_colors: {
|
||||
...n.data.custom_colors,
|
||||
border: applyOpacity(style.borderColor, style.borderOpacity),
|
||||
background: applyOpacity(style.bgColor, style.bgOpacity),
|
||||
icon: applyOpacity(style.iconColor, style.iconOpacity),
|
||||
},
|
||||
},
|
||||
}
|
||||
}),
|
||||
hasUnsavedChanges: true,
|
||||
})),
|
||||
|
||||
applyTypeEdgeStyle: (edgeType, style) =>
|
||||
set((state) => ({
|
||||
edges: state.edges.map((e) => {
|
||||
if ((e.data?.type ?? 'ethernet') !== edgeType) return e
|
||||
return {
|
||||
...e,
|
||||
data: {
|
||||
...e.data,
|
||||
type: edgeType,
|
||||
custom_color: applyOpacity(style.color, style.opacity),
|
||||
path_style: style.pathStyle,
|
||||
animated: style.animated,
|
||||
} as EdgeData,
|
||||
}
|
||||
}),
|
||||
hasUnsavedChanges: true,
|
||||
})),
|
||||
|
||||
applyAllCustomStyles: (def) =>
|
||||
set((state) => {
|
||||
const nodes = state.nodes.map((n) => {
|
||||
const style = def.nodes[n.data.type]
|
||||
if (!style) return n
|
||||
return {
|
||||
...n,
|
||||
width: style.width > 0 ? style.width : n.width,
|
||||
height: style.height > 0 ? style.height : n.height,
|
||||
data: {
|
||||
...n.data,
|
||||
custom_colors: {
|
||||
...n.data.custom_colors,
|
||||
border: applyOpacity(style.borderColor, style.borderOpacity),
|
||||
background: applyOpacity(style.bgColor, style.bgOpacity),
|
||||
icon: applyOpacity(style.iconColor, style.iconOpacity),
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
const edges = state.edges.map((e) => {
|
||||
const edgeType = (e.data?.type ?? 'ethernet') as EdgeType
|
||||
const style = def.edges[edgeType]
|
||||
if (!style) return e
|
||||
return {
|
||||
...e,
|
||||
data: {
|
||||
...e.data,
|
||||
type: edgeType,
|
||||
custom_color: applyOpacity(style.color, style.opacity),
|
||||
path_style: style.pathStyle,
|
||||
animated: style.animated,
|
||||
} as EdgeData,
|
||||
}
|
||||
})
|
||||
return { nodes, edges, hasUnsavedChanges: true }
|
||||
}),
|
||||
}))
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
import { create } from 'zustand'
|
||||
import type { ThemeId } from '@/utils/themes'
|
||||
import type { CustomStyleDef } from '@/types'
|
||||
|
||||
interface ThemeState {
|
||||
activeTheme: ThemeId
|
||||
setTheme: (id: ThemeId) => void
|
||||
customStyle: CustomStyleDef
|
||||
setCustomStyle: (def: CustomStyleDef) => void
|
||||
}
|
||||
|
||||
export const useThemeStore = create<ThemeState>((set) => ({
|
||||
activeTheme: 'default',
|
||||
setTheme: (id) => set({ activeTheme: id }),
|
||||
customStyle: { nodes: {}, edges: {} },
|
||||
setCustomStyle: (def) => set({ customStyle: def }),
|
||||
}))
|
||||
|
||||
Reference in New Issue
Block a user