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

import type { CanvasTool } from '@genarrative/image-canvas-core';
import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';

export type CanvasViewportProps = HTMLAttributes<HTMLDivElement> & {
  children: ReactNode;
  backgroundColor?: string;
  isInteractionPaused?: boolean;
  isPanning?: boolean;
  tool?: CanvasTool;
};

export const CanvasViewport = forwardRef<HTMLDivElement, CanvasViewportProps>(
  function CanvasViewport(
    {
      children,
      backgroundColor,
      className = '',
      isInteractionPaused = false,
      isPanning = false,
      style,
      tool = 'select',
      ...props
    },
    ref,
  ) {
    return (
      <div
        {...props}
        ref={ref}
        className={[
          'genarrative-image-canvas',
          'genarrative-image-canvas__viewport',
          isPanning ? 'genarrative-image-canvas__viewport--panning' : '',
          `genarrative-image-canvas__viewport--tool-${tool}`,
          className,
        ]
          .filter(Boolean)
          .join(' ')}
        style={{
          ...style,
          backgroundColor,
          pointerEvents: isInteractionPaused ? 'none' : style?.pointerEvents,
        }}
        aria-disabled={isInteractionPaused || undefined}
      >
        {children}
      </div>
    );
  },
);