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

import type { StageMinimapModel } from '@genarrative/image-canvas-core';
import type { PointerEventHandler, Ref } from 'react';

export function Minimap({
  className = '',
  layerClassName = '',
  minimapRef,
  model,
  onPointerDown,
  stageClassName = '',
  viewportClassName = '',
}: {
  className?: string;
  layerClassName?: string;
  minimapRef?: Ref<HTMLButtonElement>;
  model: StageMinimapModel;
  onPointerDown: PointerEventHandler<HTMLButtonElement>;
  stageClassName?: string;
  viewportClassName?: string;
}) {
  const assignMinimapRef = (element: HTMLButtonElement | null) => {
    if (typeof minimapRef === 'function') {
      return minimapRef(element);
    } else if (minimapRef) {
      minimapRef.current = element;
    }
  };

  return (
    <button
      ref={
        assignMinimapRef as unknown as (
          element: HTMLButtonElement | null,
        ) => void
      }
      type="button"
      className={`genarrative-image-canvas__minimap ${className}`.trim()}
      aria-label="画布小地图"
      title="拖拽移动视图"
      onPointerDown={onPointerDown}
    >
      <span
        className={`genarrative-image-canvas__minimap-stage ${stageClassName}`.trim()}
      >
        {model.layers.map((layer) => (
          <span
            key={layer.id}
            className={`genarrative-image-canvas__minimap-layer ${layerClassName}`.trim()}
            title={layer.title}
            style={layer.rect}
          />
        ))}
        <span
          className={`genarrative-image-canvas__minimap-viewport ${viewportClassName}`.trim()}
          style={model.viewport}
        />
      </span>
    </button>
  );
}