paint-ui/store/guides-store.ts

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export interface Guide {
  id: string;
  type: 'horizontal' | 'vertical';
  position: number; // In canvas pixels
}

interface GuidesStore {
  /** All guides */
  guides: Guide[];
  /** Whether guides are visible */
  showGuides: boolean;
  /** Whether rulers are visible */
  showRulers: boolean;
  /** Snap to guides threshold in pixels */
  snapDistance: number;

  /** Add a guide */
  addGuide: (type: 'horizontal' | 'vertical', position: number) => void;
  /** Remove a guide */
  removeGuide: (id: string) => void;
  /** Update guide position */
  updateGuide: (id: string, position: number) => void;
  /** Clear all guides */
  clearGuides: () => void;
  /** Toggle guides visibility */
  toggleGuides: () => void;
  /** Toggle rulers visibility */
  toggleRulers: () => void;
  /** Set snap distance */
  setSnapDistance: (distance: number) => void;
}

export const useGuidesStore = create<GuidesStore>()(
  persist(
    (set, get) => ({
      guides: [],
      showGuides: true,
      showRulers: true,
      snapDistance: 10,

      addGuide: (type, position) => {
        const id = `guide-${Date.now()}-${Math.random()}`;
        set((state) => ({
          guides: [...state.guides, { id, type, position }],
        }));
      },

      removeGuide: (id) => {
        set((state) => ({
          guides: state.guides.filter((g) => g.id !== id),
        }));
      },

      updateGuide: (id, position) => {
        set((state) => ({
          guides: state.guides.map((g) =>
            g.id === id ? { ...g, position } : g
          ),
        }));
      },

      clearGuides: () => {
        set({ guides: [] });
      },

      toggleGuides: () => {
        set((state) => ({ showGuides: !state.showGuides }));
      },

      toggleRulers: () => {
        set((state) => ({ showRulers: !state.showRulers }));
      },

      setSnapDistance: (distance) => {
        set({ snapDistance: Math.max(0, Math.min(50, distance)) });
      },
    }),
    {
      name: 'guides-storage',
      partialize: (state) => ({
        guides: state.guides,
        showGuides: state.showGuides,
        showRulers: state.showRulers,
        snapDistance: state.snapDistance,
      }),
    }
  )
);