Genarrative/packages/image-canvas-core/src/exportModel.ts

import type { CanvasLayer } from './types';

export type CanvasExportLayer = {
  id: string;
  title: string;
  mediaType: 'image';
  mediaRef: string;
  x: number;
  y: number;
  width: number;
  height: number;
  zIndex: number;
  flipX: boolean;
  flipY: boolean;
};

export type CanvasExportModel = {
  bounds: { x: number; y: number; width: number; height: number };
  backgroundColor: string;
  layers: CanvasExportLayer[];
};

export function createCanvasExportModel({
  layers,
  backgroundColor,
}: {
  layers: CanvasLayer[];
  backgroundColor: string;
}): CanvasExportModel | null {
  const visibleImages = layers
    .filter(
      (layer) => !layer.hidden && (layer.mediaType ?? 'image') === 'image',
    )
    .sort((first, second) => first.zIndex - second.zIndex);
  if (visibleImages.length === 0) return null;
  const minX = Math.min(...visibleImages.map((layer) => layer.x));
  const minY = Math.min(...visibleImages.map((layer) => layer.y));
  const maxX = Math.max(...visibleImages.map((layer) => layer.x + layer.width));
  const maxY = Math.max(
    ...visibleImages.map((layer) => layer.y + layer.height),
  );
  return {
    bounds: { x: minX, y: minY, width: maxX - minX, height: maxY - minY },
    backgroundColor,
    layers: visibleImages.map((layer) => ({
      id: layer.id,
      title: layer.title,
      mediaType: 'image',
      mediaRef: layer.objectKey ?? layer.assetObjectId ?? layer.src,
      x: layer.x,
      y: layer.y,
      width: layer.width,
      height: layer.height,
      zIndex: layer.zIndex,
      flipX: Boolean(layer.flipX),
      flipY: Boolean(layer.flipY),
    })),
  };
}