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:
@@ -150,3 +150,26 @@ export const EDGE_TYPE_LABELS: Record<EdgeType, string> = {
|
||||
virtual: 'Virtual',
|
||||
cluster: 'Cluster',
|
||||
}
|
||||
|
||||
export interface NodeTypeStyle {
|
||||
borderColor: string
|
||||
borderOpacity: number
|
||||
bgColor: string
|
||||
bgOpacity: number
|
||||
iconColor: string
|
||||
iconOpacity: number
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
export interface EdgeTypeStyle {
|
||||
color: string
|
||||
opacity: number
|
||||
pathStyle: EdgePathStyle
|
||||
animated: 'none' | 'snake' | 'flow' | 'basic'
|
||||
}
|
||||
|
||||
export interface CustomStyleDef {
|
||||
nodes: Partial<Record<NodeType, NodeTypeStyle>>
|
||||
edges: Partial<Record<EdgeType, EdgeTypeStyle>>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user