feat: multi-design canvas system with electrical nodes/edges
Backend: New Design model + designs table; design_id FK on nodes, edges, canvas_state; migration seeds default 'Network Topology' design; full CRUD API for designs; canvas load/save accept design_id. Frontend: designStore (Zustand), design switcher in Sidebar, design-aware canvas load/save, auto-save on design switch. Electrical node types (14): grid, ups, battery, generator, solar_panel, inverter, circuit_breaker, contactor, electrical_switch, socket, light, meter, transformer, load — icons, registrations, accent colors in all 6 themes. Electrical edge type: registered in edgeTypes, BASE_STYLES, edgeColors, all theme edgeColors, EDGE_DEFAULT_COLORS. Bug fixes: data corruption on design switch (stale closure), race condition on save-then-load, missing Zap import, missing Electrical group in NodeModal, missing electrical entries in custom theme edgeColors, inline imports hoisted.
This commit is contained in:
@@ -0,0 +1,42 @@
|
||||
import { create } from 'zustand'
|
||||
import type { Design, DesignType } from '@/types'
|
||||
|
||||
interface DesignState {
|
||||
designs: Design[]
|
||||
activeDesignId: string | null
|
||||
activeDesignType: DesignType | null
|
||||
loaded: boolean
|
||||
setDesigns: (designs: Design[]) => void
|
||||
setActiveDesign: (id: string) => void
|
||||
getActiveDesign: () => Design | null
|
||||
}
|
||||
|
||||
export const useDesignStore = create<DesignState>((set, get) => ({
|
||||
designs: [],
|
||||
activeDesignId: null,
|
||||
activeDesignType: null,
|
||||
loaded: false,
|
||||
|
||||
setDesigns: (designs) =>
|
||||
set((state) => {
|
||||
const nextId = state.activeDesignId && designs.find((d) => d.id === state.activeDesignId)
|
||||
? state.activeDesignId
|
||||
: designs[0]?.id ?? null
|
||||
const nextType = nextId ? designs.find((d) => d.id === nextId)?.design_type ?? null : null
|
||||
return { designs, activeDesignId: nextId, activeDesignType: nextType, loaded: true }
|
||||
}),
|
||||
|
||||
setActiveDesign: (id) =>
|
||||
set((state) => {
|
||||
const design = state.designs.find((d) => d.id === id)
|
||||
return {
|
||||
activeDesignId: id,
|
||||
activeDesignType: design?.design_type ?? null,
|
||||
}
|
||||
}),
|
||||
|
||||
getActiveDesign: () => {
|
||||
const { designs, activeDesignId } = get()
|
||||
return designs.find((d) => d.id === activeDesignId) ?? null
|
||||
},
|
||||
}))
|
||||
Reference in New Issue
Block a user