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), })), }; }