@eventcatalogtest/studio/stores/design-store.ts

A drag and drop UI for distributed systems that keeps your diagrams where they belong – in your repo

import { create } from 'zustand'
// persist the design store
import { createJSONStorage, persist } from 'zustand/middleware'
import useFlowStore from './flow-store'

interface Design {
    id: string;
    type: string;
    name: string;
    description: string;
    data: any;
    createdAt: Date;
    updatedAt: Date;
    lastModified: string;
    hasUncommittedChanges?: boolean;
}

interface DesignStore {
    designs: Design[]
    currentDesign: Design | null
    setCurrentDesign: (design: Design) => void
    createNewDesign: (design: Design) => void
    updateDesignName: (id: string, name: string) => void
    deleteDesign: (id: string) => void
    updateCurrentDesignData: (data: any) => void
}


export const useDesignStore = create<DesignStore>()(
    persist(
        (set, get) => ({
            designs: [],
    currentDesign: null,
    setCurrentDesign: (design: Design) => {
        // Save current design before switching
        const currentState = get().currentDesign;
        if (currentState) {
            // Import flow store to trigger save
            import('./flow-store').then(({ default: useFlowStore }) => {
                useFlowStore.getState().actions.saveCurrentFlowToDesign();
            });
        }
        
        set({ currentDesign: design })
        useFlowStore.getState().actions.importFlow(design.data)
        
        // Load document for the new design
        try {
            import('./document-store').then(({ useDocumentStore }) => {
                if (design.data?.document) {
                    // Check if it's the new object format
                    if (design.data.document.id && design.data.document.content) {
                        useDocumentStore.getState().setCurrentDocument(design.data.document);
                    }
                    // Legacy support: if it's still an array format, convert it
                    else if (Array.isArray(design.data.document)) {
                        const convertedDoc = {
                            id: `doc-${Date.now()}`,
                            name: `${design.name} Document`,
                            content: design.data.document,
                            createdAt: new Date().toISOString(),
                            updatedAt: new Date().toISOString(),
                        };
                        useDocumentStore.getState().setCurrentDocument(convertedDoc);
                    }
                } else {
                    // Set empty document if no document exists for this design
                    const emptyDoc = {
                        id: `doc-${Date.now()}`,
                        name: `${design.name} Document`,
                        content: [{ type: 'paragraph', children: [{ text: 'Start typing... Use @ to mention nodes' }] } as any],
                        createdAt: new Date().toISOString(),
                        updatedAt: new Date().toISOString(),
                    };
                    useDocumentStore.getState().setCurrentDocument(emptyDoc);
                }
            });
        } catch (error) {
            console.warn('Could not load document for design:', error);
        }
    },
    createNewDesign: (design: Design) => {
                set({ designs: [...get().designs, design] })
            },
    deleteDesign: (id: string) => {
        const { designs, currentDesign } = get();
        const updatedDesigns = designs.filter(design => design.id !== id);
        const updatedCurrentDesign = currentDesign?.id === id ? null : currentDesign;
        
        set({ 
            designs: updatedDesigns,
            currentDesign: updatedCurrentDesign
        });
    },
    updateDesignName: (id: string, name: string) => {
        const { designs, currentDesign } = get();
        
        // Update in the designs array
        const updatedDesigns = designs.map(design => 
            design.id === id 
                ? { ...design, name, updatedAt: new Date(), lastModified: 'now' }
                : design
        );
        
        // Update current design if it's the one being updated
        const updatedCurrentDesign = currentDesign?.id === id 
            ? { ...currentDesign, name, updatedAt: new Date(), lastModified: 'now' }
            : currentDesign;
            
        set({ 
            designs: updatedDesigns,
            currentDesign: updatedCurrentDesign
        });
    },
    updateCurrentDesignData: (data: any) => {
        const { designs, currentDesign } = get();
        
        if (!currentDesign) return;
        
        const updatedDesign = {
            ...currentDesign,
            data,
            updatedAt: new Date(),
            lastModified: 'now',
            hasUncommittedChanges: true
        };
        
        // Update in the designs array
        const updatedDesigns = designs.map(design => 
            design.id === currentDesign.id ? updatedDesign : design
        );
        
        set({ 
            designs: updatedDesigns,
            currentDesign: updatedDesign
        });
    }
        }),
        {
            name: 'designs',
            storage: createJSONStorage(() => localStorage)
        }
    )
)