refactor: split builtin and freeform masks

Made-with: Cursor

1 files changed, 81 insertions, 0 deletions

diff --git a/apps/web/src/masks/builtin/definitions/ellipse.ts b/apps/web/src/masks/builtin/definitions/ellipse.ts
new file mode 100644
index 00000000..688a2fa6
--- /dev/null
+++ b/apps/web/src/masks/builtin/definitions/ellipse.ts
@@ -0,0 +1,81 @@
+import type { MaskDefinition } from "@/masks/types";
+import {
+	BOX_LIKE_MASK_PARAMS,
+	buildBoxMaskInteraction,
+	computeBoxMaskParamUpdate,
+	getBoxLikeGeometry,
+	getDefaultSquareMaskParams,
+	getStrokeOffset,
+} from "../box-like";
+
+export const ellipseMaskDefinition: MaskDefinition<"ellipse"> = {
+	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: {
+		body: {
+			kind: "fillPath",
+			buildPath({ resolvedParams, width, height }) {
+				const params = resolvedParams;
+				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;
+			},
+		},
+		stroke: {
+			kind: "strokeFromPath",
+			buildStrokePath({ resolvedParams, width, height }) {
+				const params = resolvedParams;
+				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;
+			},
+		},
+	},
+};