paint-ui/store/shape-store.ts

import { create } from 'zustand';
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>((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 },
    })),
}));