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:
Pranjal Joshi
2026-05-31 14:35:22 +05:30
parent 4ba04660c8
commit 46435605eb
19 changed files with 616 additions and 61 deletions
+42
View File
@@ -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
},
}))