metabuilder/hooks/editor/useEditorZoom.ts

/**
 * useEditorZoom Hook
 * Manages editor zoom state and zoom-related actions
 *
 * Note: This hook requires Redux store with editor slice.
 * Import paths should be configured by the consuming application.
 */

import { useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';

// Type for the editor state slice
export interface EditorState {
  zoom: number;
}

// Type for the root state (to be extended by consuming app)
export interface RootState {
  editor: EditorState;
}

// Action creators - these should be imported from the app's editorSlice
export interface EditorActions {
  setZoom: (zoom: number) => any;
  zoomIn: () => any;
  zoomOut: () => any;
  resetZoom: () => any;
}

export interface UseEditorZoomReturn {
  zoom: number;
  setZoom: (newZoom: number) => void;
  zoomIn: () => void;
  zoomOut: () => void;
  resetZoom: () => void;
}

export interface UseEditorZoomOptions {
  actions: EditorActions;
}

export function useEditorZoom(options: UseEditorZoomOptions): UseEditorZoomReturn {
  const { actions } = options;
  const dispatch = useDispatch();
  const zoom = useSelector((state: RootState) => state.editor.zoom);

  const setCurrentZoom = useCallback(
    (newZoom: number) => {
      dispatch(actions.setZoom(newZoom));
    },
    [dispatch, actions]
  );

  const zoomInAction = useCallback(() => {
    dispatch(actions.zoomIn());
  }, [dispatch, actions]);

  const zoomOutAction = useCallback(() => {
    dispatch(actions.zoomOut());
  }, [dispatch, actions]);

  const resetZoomAction = useCallback(() => {
    dispatch(actions.resetZoom());
  }, [dispatch, actions]);

  return {
    zoom,
    setZoom: setCurrentZoom,
    zoomIn: zoomInAction,
    zoomOut: zoomOutAction,
    resetZoom: resetZoomAction
  };
}

export default useEditorZoom;