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

import {
  CANVAS_WORLD_SIZE,
  type CanvasViewport,
} from '@genarrative/image-canvas-core';
import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';

import {
  CANVAS_RENDER_SUPERSAMPLE,
  canvasViewportToWorldTransform,
  getSafeViewportScale,
} from './canvasWorldRendering';

export function CanvasWorld({
  children,
  className = '',
  viewport,
  worldSize = CANVAS_WORLD_SIZE,
  style,
  ...props
}: HTMLAttributes<HTMLDivElement> & {
  children: ReactNode;
  viewport: CanvasViewport;
  worldSize?: number;
}) {
  const viewportScale = getSafeViewportScale(viewport);

  return (
    <div
      {...props}
      className={`genarrative-image-canvas__world ${className}`.trim()}
      style={
        {
          ...style,
          width: worldSize,
          height: worldSize,
          transform: canvasViewportToWorldTransform(viewport),
          '--genarrative-image-canvas-inverse-scale': String(1 / viewportScale),
        } as CSSProperties
      }
    >
      <div
        className="genarrative-image-canvas__world-content"
        style={{
          position: 'relative',
          width: worldSize,
          height: worldSize,
          zoom: CANVAS_RENDER_SUPERSAMPLE,
        }}
      >
        {children}
      </div>
    </div>
  );
}