From c46d28891fee62ca2d3132da876af6411a41d9da Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 15 Apr 2026 15:45:50 +0200
Subject: feat: text / custom masks, fix preview pan, refactor selection

---
 apps/web/src/lib/masks/definitions/ellipse.ts | 147 +++++++++++++-------------
 1 file changed, 75 insertions(+), 72 deletions(-)

(limited to 'apps/web/src/lib/masks/definitions/ellipse.ts')

diff --git a/apps/web/src/lib/masks/definitions/ellipse.ts b/apps/web/src/lib/masks/definitions/ellipse.ts
index 1fd0301c..2eb85f0c 100644
--- a/apps/web/src/lib/masks/definitions/ellipse.ts
+++ b/apps/web/src/lib/masks/definitions/ellipse.ts
@@ -1,72 +1,75 @@
-import type { MaskDefinition, RectangleMaskParams } from "@/lib/masks/types";
-import {
-	BOX_LIKE_MASK_PARAMS,
-	computeBoxMaskParamUpdate,
-	getBoxLikeGeometry,
-	getDefaultSquareMaskParams,
-	getStrokeOffset,
-} from "./box-like";
-
-export const ellipseMaskDefinition: MaskDefinition<RectangleMaskParams> = {
-	type: "ellipse",
-	name: "Ellipse",
-	overlayShape: "box",
-	buildOverlayPath({ width, height }) {
-		const rx = Math.max((width - 1) / 2, 0);
-		const ry = Math.max((height - 1) / 2, 0);
-		const cx = width / 2;
-		const cy = height / 2;
-		return `M ${cx},${cy - ry} A ${rx},${ry} 0 1,1 ${cx},${cy + ry} A ${rx},${ry} 0 1,1 ${cx},${cy - ry} Z`;
-	},
-	features: {
-		hasPosition: true,
-		hasRotation: true,
-		sizeMode: "width-height",
-	},
-	params: BOX_LIKE_MASK_PARAMS,
-	buildDefault(context) {
-		return {
-			type: "ellipse",
-			params: getDefaultSquareMaskParams(context),
-		};
-	},
-	computeParamUpdate: computeBoxMaskParamUpdate,
-	renderer: {
-		buildPath({ resolvedParams, width, height }) {
-			const params = resolvedParams as RectangleMaskParams;
-			const { centerX, centerY, maskWidth, maskHeight, rotationRad } =
-				getBoxLikeGeometry({ params, width, height });
-			const path = new Path2D();
-			path.ellipse(
-				centerX,
-				centerY,
-				maskWidth / 2,
-				maskHeight / 2,
-				rotationRad,
-				0,
-				Math.PI * 2,
-			);
-			return path;
-		},
-		buildStrokePath({ resolvedParams, width, height }) {
-			const params = resolvedParams as RectangleMaskParams;
-			const { centerX, centerY, maskWidth, maskHeight, rotationRad } =
-				getBoxLikeGeometry({ params, width, height });
-			const offset = getStrokeOffset({
-				strokeAlign: params.strokeAlign,
-				strokeWidth: params.strokeWidth,
-			});
-			const path = new Path2D();
-			path.ellipse(
-				centerX,
-				centerY,
-				Math.max(1, maskWidth / 2 + offset),
-				Math.max(1, maskHeight / 2 + offset),
-				rotationRad,
-				0,
-				Math.PI * 2,
-			);
-			return path;
-		},
-	},
-};
+import type { MaskDefinition, RectangleMaskParams } from "@/lib/masks/types";
+import {
+	BOX_LIKE_MASK_PARAMS,
+	buildBoxMaskInteraction,
+	computeBoxMaskParamUpdate,
+	getBoxLikeGeometry,
+	getDefaultSquareMaskParams,
+	getStrokeOffset,
+} from "./box-like";
+
+export const ellipseMaskDefinition: MaskDefinition<RectangleMaskParams> = {
+	type: "ellipse",
+	name: "Ellipse",
+	features: {
+		hasPosition: true,
+		hasRotation: true,
+		sizeMode: "width-height",
+	},
+	params: BOX_LIKE_MASK_PARAMS,
+	interaction: buildBoxMaskInteraction({
+		sizeMode: "width-height",
+		buildOverlayPath({ width, height }) {
+			const rx = Math.max((width - 1) / 2, 0);
+			const ry = Math.max((height - 1) / 2, 0);
+			const cx = width / 2;
+			const cy = height / 2;
+			return `M ${cx},${cy - ry} A ${rx},${ry} 0 1,1 ${cx},${cy + ry} A ${rx},${ry} 0 1,1 ${cx},${cy - ry} Z`;
+		},
+	}),
+	buildDefault(context) {
+		return {
+			type: "ellipse",
+			params: getDefaultSquareMaskParams(context),
+		};
+	},
+	computeParamUpdate: computeBoxMaskParamUpdate,
+	renderer: {
+		buildPath({ resolvedParams, width, height }) {
+			const params = resolvedParams as RectangleMaskParams;
+			const { centerX, centerY, maskWidth, maskHeight, rotationRad } =
+				getBoxLikeGeometry({ params, width, height });
+			const path = new Path2D();
+			path.ellipse(
+				centerX,
+				centerY,
+				maskWidth / 2,
+				maskHeight / 2,
+				rotationRad,
+				0,
+				Math.PI * 2,
+			);
+			return path;
+		},
+		buildStrokePath({ resolvedParams, width, height }) {
+			const params = resolvedParams as RectangleMaskParams;
+			const { centerX, centerY, maskWidth, maskHeight, rotationRad } =
+				getBoxLikeGeometry({ params, width, height });
+			const offset = getStrokeOffset({
+				strokeAlign: params.strokeAlign,
+				strokeWidth: params.strokeWidth,
+			});
+			const path = new Path2D();
+			path.ellipse(
+				centerX,
+				centerY,
+				Math.max(1, maskWidth / 2 + offset),
+				Math.max(1, maskHeight / 2 + offset),
+				rotationRad,
+				0,
+				Math.PI * 2,
+			);
+			return path;
+		},
+	},
+};
-- 
cgit v1.3.1