paint-ui/store/selection-store.ts

import { create } from 'zustand';
import type {
  Selection,
  SelectionType,
  SelectionMode,
  SelectionState,
} from '@/types/selection';

interface SelectionStore extends SelectionState {
  setActiveSelection: (selection: Selection | null) => void;
  setSelectionType: (type: SelectionType) => void;
  setSelectionMode: (mode: SelectionMode) => void;
  setFeather: (feather: number) => void;
  setTolerance: (tolerance: number) => void;
  setMarching: (isMarching: boolean) => void;
  clearSelection: () => void;
  selectAll: () => void;
  invertSelection: () => void;
}

export const useSelectionStore = create<SelectionStore>((set) => ({
  activeSelection: null,
  selectionType: 'rectangular',
  selectionMode: 'new',
  feather: 0,
  tolerance: 32,
  isMarching: true,

  setActiveSelection: (selection) =>
    set({
      activeSelection: selection,
    }),

  setSelectionType: (type) =>
    set({
      selectionType: type,
    }),

  setSelectionMode: (mode) =>
    set({
      selectionMode: mode,
    }),

  setFeather: (feather) =>
    set({
      feather: Math.max(0, Math.min(250, feather)),
    }),

  setTolerance: (tolerance) =>
    set({
      tolerance: Math.max(0, Math.min(255, tolerance)),
    }),

  setMarching: (isMarching) =>
    set({
      isMarching,
    }),

  clearSelection: () =>
    set({
      activeSelection: null,
    }),

  selectAll: () =>
    set(() => {
      const { useCanvasStore, useLayerStore } = require('@/store');
      const { width, height } = useCanvasStore.getState();
      const { getActiveLayer } = useLayerStore.getState();
      const activeLayer = getActiveLayer();

      if (!activeLayer) return {};

      // Create a mask that covers the entire canvas
      const maskData = new Uint8Array(width * height).fill(255);

      return {
        activeSelection: {
          id: `selection-${Date.now()}`,
          layerId: activeLayer.id,
          mask: {
            width,
            height,
            data: maskData,
            bounds: {
              x: 0,
              y: 0,
              width,
              height,
            },
          },
          inverted: false,
          feather: 0,
          createdAt: Date.now(),
        },
      };
    }),

  invertSelection: () =>
    set((state) => {
      if (state.activeSelection) {
        return {
          activeSelection: {
            ...state.activeSelection,
            inverted: !state.activeSelection.inverted,
          },
        };
      }
      return state;
    }),
}));