Genarrative/packages/image-canvas-react/src/ZoomControls.tsx

import {
  CANVAS_ZOOM_IN_FACTOR,
  CANVAS_ZOOM_OUT_FACTOR,
  canvasDisplayScaleToViewportScale,
  type CanvasViewport,
  formatCanvasDisplayScalePercent,
} from '@genarrative/image-canvas-core';
import type { ReactNode } from 'react';

export type CanvasZoomActions = {
  displayPercent: string;
  fit: () => void;
  zoomIn: () => void;
  zoomOut: () => void;
  zoomToDisplayScale: (displayScale: number) => void;
};

export function ZoomControls({
  children,
  onFit,
  onScaleFromCenter,
  viewport,
}: {
  children: (actions: CanvasZoomActions) => ReactNode;
  onFit: () => void;
  onScaleFromCenter: (scale: number) => void;
  viewport: CanvasViewport;
}) {
  const actions: CanvasZoomActions = {
    displayPercent: formatCanvasDisplayScalePercent(viewport.scale),
    fit: onFit,
    zoomIn: () => onScaleFromCenter(viewport.scale * CANVAS_ZOOM_IN_FACTOR),
    zoomOut: () => onScaleFromCenter(viewport.scale * CANVAS_ZOOM_OUT_FACTOR),
    zoomToDisplayScale: (displayScale) =>
      onScaleFromCenter(canvasDisplayScaleToViewportScale(displayScale)),
  };
  return <>{children(actions)}</>;
}