paint-ui/store/shape-store.ts

import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import type { ShapeSettings, ShapeType, ShapeStore as IShapeStore } from '@/types/shape';

const DEFAULT_SETTINGS: ShapeSettings = {
  type: 'rectangle',
  fill: true,
  fillColor: '#000000',
  stroke: true,
  strokeColor: '#000000',
  strokeWidth: 2,
  cornerRadius: 0,
  sides: 5,
  innerRadius: 0.5,
  arrowHeadSize: 20,
  arrowHeadAngle: 30,
};

export const useShapeStore = create<IShapeStore>()(
  persist(
    (set) => ({
      settings: { ...DEFAULT_SETTINGS },

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

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

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

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

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

      setStrokeWidth: (strokeWidth) =>
        set((state) => ({
          settings: { ...state.settings, strokeWidth: Math.max(1, Math.min(100, strokeWidth)) },
        })),

      setCornerRadius: (cornerRadius) =>
        set((state) => ({
          settings: { ...state.settings, cornerRadius: Math.max(0, Math.min(100, cornerRadius)) },
        })),

      setSides: (sides) =>
        set((state) => ({
          settings: { ...state.settings, sides: Math.max(3, Math.min(20, sides)) },
        })),

      setInnerRadius: (innerRadius) =>
        set((state) => ({
          settings: { ...state.settings, innerRadius: Math.max(0.1, Math.min(0.9, innerRadius)) },
        })),

      setArrowHeadSize: (arrowHeadSize) =>
        set((state) => ({
          settings: { ...state.settings, arrowHeadSize: Math.max(5, Math.min(100, arrowHeadSize)) },
        })),

      setArrowHeadAngle: (arrowHeadAngle) =>
        set((state) => ({
          settings: { ...state.settings, arrowHeadAngle: Math.max(10, Math.min(60, arrowHeadAngle)) },
        })),

      updateSettings: (settings) =>
        set((state) => ({
          settings: { ...state.settings, ...settings },
        })),
    }),
    {
      name: 'shape-storage',
    }
  )
);