150 lines
4.5 KiB
TypeScript
150 lines
4.5 KiB
TypeScript
import { create } from "zustand"
|
|
import { persist } from "zustand/middleware"
|
|
import { ParsedWireframe } from "./wireframe-converter"
|
|
|
|
export interface ComponentInstance {
|
|
id: string
|
|
type: string
|
|
props: Record<string, any>
|
|
position: { x: number; y: number }
|
|
size?: { width: number; height: number }
|
|
}
|
|
|
|
export interface WireframeData {
|
|
id: string
|
|
name: string
|
|
deviceType: 'desktop' | 'tablet' | 'mobile'
|
|
data: ParsedWireframe
|
|
createdAt: Date
|
|
updatedAt: Date
|
|
}
|
|
|
|
interface EditorState {
|
|
components: ComponentInstance[]
|
|
selectedComponent: ComponentInstance | null
|
|
wireframes: WireframeData[]
|
|
currentWireframe: WireframeData | null
|
|
showWireframes: boolean
|
|
wireframeRenderMode: 'svg' | 'editable'
|
|
addComponent: (component: ComponentInstance) => void
|
|
updateComponent: (id: string, updates: Partial<ComponentInstance>) => void
|
|
removeComponent: (id: string) => void
|
|
selectComponent: (component: ComponentInstance | null) => void
|
|
moveComponent: (id: string, position: { x: number; y: number }) => void
|
|
setComponents: (components: ComponentInstance[]) => void
|
|
clearAll: () => void
|
|
addWireframe: (wireframe: WireframeData) => void
|
|
updateWireframe: (id: string, updates: Partial<WireframeData>) => void
|
|
removeWireframe: (id: string) => void
|
|
setCurrentWireframe: (wireframe: WireframeData | null) => void
|
|
setShowWireframes: (show: boolean) => void
|
|
setWireframeRenderMode: (mode: 'svg' | 'editable') => void
|
|
clearWireframes: () => void
|
|
clearWireframeComponents: () => void
|
|
}
|
|
|
|
export const useEditorStore = create<EditorState>()(
|
|
persist(
|
|
(set, get) => ({
|
|
components: [],
|
|
selectedComponent: null,
|
|
wireframes: [],
|
|
currentWireframe: null,
|
|
showWireframes: false,
|
|
wireframeRenderMode: 'svg',
|
|
|
|
addComponent: (component) =>
|
|
set((state) => ({
|
|
components: [...state.components, component],
|
|
})),
|
|
|
|
updateComponent: (id, updates) =>
|
|
set((state) => ({
|
|
components: state.components.map((comp) =>
|
|
comp.id === id
|
|
? {
|
|
...comp,
|
|
...updates,
|
|
props: updates.props ? { ...comp.props, ...updates.props } : comp.props,
|
|
}
|
|
: comp,
|
|
),
|
|
selectedComponent:
|
|
state.selectedComponent?.id === id
|
|
? {
|
|
...state.selectedComponent,
|
|
...updates,
|
|
props: updates.props
|
|
? { ...state.selectedComponent.props, ...updates.props }
|
|
: state.selectedComponent.props,
|
|
}
|
|
: state.selectedComponent,
|
|
})),
|
|
|
|
removeComponent: (id) =>
|
|
set((state) => ({
|
|
components: state.components.filter((comp) => comp.id !== id),
|
|
selectedComponent: state.selectedComponent?.id === id ? null : state.selectedComponent,
|
|
})),
|
|
|
|
selectComponent: (component) => set({ selectedComponent: component }),
|
|
|
|
moveComponent: (id, position) =>
|
|
set((state) => ({
|
|
components: state.components.map((comp) => (comp.id === id ? { ...comp, position } : comp)),
|
|
})),
|
|
|
|
setComponents: (components) => set({ components }),
|
|
|
|
clearAll: () =>
|
|
set({
|
|
components: [],
|
|
selectedComponent: null,
|
|
}),
|
|
|
|
addWireframe: (wireframe) =>
|
|
set((state) => ({
|
|
wireframes: [...state.wireframes, wireframe],
|
|
})),
|
|
|
|
updateWireframe: (id, updates) =>
|
|
set((state) => ({
|
|
wireframes: state.wireframes.map((wireframe) =>
|
|
wireframe.id === id
|
|
? {
|
|
...wireframe,
|
|
...updates,
|
|
updatedAt: new Date(),
|
|
}
|
|
: wireframe,
|
|
),
|
|
})),
|
|
|
|
removeWireframe: (id) =>
|
|
set((state) => ({
|
|
wireframes: state.wireframes.filter((wireframe) => wireframe.id !== id),
|
|
currentWireframe: state.currentWireframe?.id === id ? null : state.currentWireframe,
|
|
})),
|
|
|
|
setCurrentWireframe: (wireframe) => set({ currentWireframe: wireframe }),
|
|
|
|
setShowWireframes: (show) => set({ showWireframes: show }),
|
|
|
|
setWireframeRenderMode: (mode) => set({ wireframeRenderMode: mode }),
|
|
|
|
clearWireframes: () =>
|
|
set({
|
|
wireframes: [],
|
|
currentWireframe: null,
|
|
}),
|
|
|
|
clearWireframeComponents: () =>
|
|
set((state) => ({
|
|
components: state.components.filter(comp => !comp.type.startsWith('wireframe-')),
|
|
})),
|
|
}),
|
|
{
|
|
name: "editor-storage",
|
|
},
|
|
),
|
|
) |