Address canvas layout review

Amp-Thread-ID: https://ampcode.com/threads/T-019fb7e3-f727-72eb-8a17-a4594e782211
Co-authored-by: Arjun Komath <arjunkomath@gmail.com>

Author: ampagent

web/app/api/projects/[id]/services/[serviceId]/position/route.ts

@@ -29,6 +29,8 @@ import { parseServiceRevisionSpec } from "@/lib/service-revision-changes";
 
 const MAX_CANVAS_COORDINATE = 2_147_483_647;
 
+class CanvasServiceNotFoundError extends Error {}
+
 const canvasPositionsSchema = z.object({
 	positions: z
 		.array(
@@ -64,66 +66,70 @@ export async function PATCH(
 		return Response.json({ error: "Invalid positions" }, { status: 400 });
 	}
 
-	const savedPositions = await db.transaction(async (tx) => {
-		const serviceIds = parsed.data.positions.map(
-			(position) => position.serviceId,
-		);
-		const activeServices = await tx
-			.select({ id: services.id })
-			.from(services)
-			.where(
-				and(
-					eq(services.projectId, projectId),
-					inArray(services.id, serviceIds),
-					isNull(services.deletedAt),
-				),
+	try {
+		const savedPositions = await db.transaction(async (tx) => {
+			const serviceIds = parsed.data.positions.map(
+				(position) => position.serviceId,
 			);
-
-		if (activeServices.length !== parsed.data.positions.length) {
-			return null;
-		}
-
-		const positions: Array<{
-			id: string;
-			canvasX: number | null;
-			canvasY: number | null;
-		}> = [];
-
-		for (const position of parsed.data.positions) {
-			const [savedPosition] = await tx
-				.update(services)
-				.set({
-					canvasX: position.canvasX,
-					canvasY: position.canvasY,
-				})
+			const activeServices = await tx
+				.select({ id: services.id })
+				.from(services)
 				.where(
 					and(
-						eq(services.id, position.serviceId),
 						eq(services.projectId, projectId),
+						inArray(services.id, serviceIds),
 						isNull(services.deletedAt),
 					),
-				)
-				.returning({
-					id: services.id,
-					canvasX: services.canvasX,
-					canvasY: services.canvasY,
-				});
+				);
 
-			if (!savedPosition) {
-				tx.rollback();
+			if (activeServices.length !== parsed.data.positions.length) {
+				throw new CanvasServiceNotFoundError();
 			}
 
-			positions.push(savedPosition);
-		}
+			const positions: Array<{
+				id: string;
+				canvasX: number | null;
+				canvasY: number | null;
+			}> = [];
 
-		return positions;
-	});
+			for (const position of parsed.data.positions) {
+				const [savedPosition] = await tx
+					.update(services)
+					.set({
+						canvasX: position.canvasX,
+						canvasY: position.canvasY,
+					})
+					.where(
+						and(
+							eq(services.id, position.serviceId),
+							eq(services.projectId, projectId),
+							isNull(services.deletedAt),
+						),
+					)
+					.returning({
+						id: services.id,
+						canvasX: services.canvasX,
+						canvasY: services.canvasY,
+					});
 
-	if (!savedPositions) {
-		return Response.json({ error: "Service not found" }, { status: 404 });
-	}
+				if (!savedPosition) {
+					throw new CanvasServiceNotFoundError();
+				}
+
+				positions.push(savedPosition);
+			}
+
+			return positions;
+		});
 
-	return Response.json(savedPositions);
+		return Response.json(savedPositions);
+	} catch (error) {
+		if (error instanceof CanvasServiceNotFoundError) {
+			return Response.json({ error: "Service not found" }, { status: 404 });
+		}
+
+		throw error;
+	}
 }
 
 export async function GET(

web/app/api/projects/[id]/services/route.ts

@@ -776,7 +776,10 @@ export function ServiceCanvas({
 		const positions: CanvasPositionUpdate[] = services.map(
 			(service, index) => ({
 				serviceId: service.id,
-				...getAutoLayoutPosition(index, services.length, gridCanvasHeight),
+				...clampPosition(
+					getAutoLayoutPosition(index, services.length, gridCanvasHeight),
+					gridCanvasHeight,
+				),
 			}),
 		);