paint-ui/store/text-store.ts

import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import type { TextSettings, TextStore as ITextStore } from '@/types/text';

const DEFAULT_SETTINGS: TextSettings = {
  text: '',
  fontFamily: 'Arial',
  fontSize: 48,
  fontStyle: 'normal',
  fontWeight: 'normal',
  color: '#000000',
  align: 'left',
  baseline: 'alphabetic',
  lineHeight: 1.2,
  letterSpacing: 0,
};

export const useTextStore = create<ITextStore>()(
  persist(
    (set) => ({
      settings: { ...DEFAULT_SETTINGS },
      isDialogOpen: false,
      clickPosition: null,

      setText: (text) =>
        set((state) => ({
          settings: { ...state.settings, text },
        })),

      setFontFamily: (fontFamily) =>
        set((state) => ({
          settings: { ...state.settings, fontFamily },
        })),

      setFontSize: (fontSize) =>
        set((state) => ({
          settings: { ...state.settings, fontSize: Math.max(8, Math.min(500, fontSize)) },
        })),

      setFontStyle: (fontStyle) =>
        set((state) => ({
          settings: { ...state.settings, fontStyle },
        })),

      setFontWeight: (fontWeight) =>
        set((state) => ({
          settings: { ...state.settings, fontWeight },
        })),

      setColor: (color) =>
        set((state) => ({
          settings: { ...state.settings, color },
        })),

      setAlign: (align) =>
        set((state) => ({
          settings: { ...state.settings, align },
        })),

      setBaseline: (baseline) =>
        set((state) => ({
          settings: { ...state.settings, baseline },
        })),

      setLineHeight: (lineHeight) =>
        set((state) => ({
          settings: { ...state.settings, lineHeight: Math.max(0.5, Math.min(3, lineHeight)) },
        })),

      setLetterSpacing: (letterSpacing) =>
        set((state) => ({
          settings: { ...state.settings, letterSpacing: Math.max(-10, Math.min(50, letterSpacing)) },
        })),

      updateSettings: (settings) =>
        set((state) => ({
          settings: { ...state.settings, ...settings },
        })),

      openDialog: (x, y) =>
        set({
          isDialogOpen: true,
          clickPosition: { x, y },
        }),

      closeDialog: () =>
        set({
          isDialogOpen: false,
          clickPosition: null,
        }),
    }),
    {
      name: 'text-storage',
      partialize: (state) => ({ settings: state.settings }), // Only persist settings, not dialog state
    }
  )
);