From 79dcec8a2ec2f5cad9be95e5b52fbfa752fb6ac4 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 29 Apr 2026 18:41:15 +0200
Subject: refactor: split builtin and freeform masks

Made-with: Cursor
---
 apps/web/src/masks/builtin/definitions/diamond.ts | 106 ++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 apps/web/src/masks/builtin/definitions/diamond.ts

(limited to 'apps/web/src/masks/builtin/definitions/diamond.ts')

diff --git a/apps/web/src/masks/builtin/definitions/diamond.ts b/apps/web/src/masks/builtin/definitions/diamond.ts
new file mode 100644
index 00000000..1effb276
--- /dev/null
+++ b/apps/web/src/masks/builtin/definitions/diamond.ts
@@ -0,0 +1,106 @@
+import type { MaskDefinition } from "@/masks/types";
+import {
+	BOX_LIKE_MASK_PARAMS,
+	buildBoxMaskInteraction,
+	computeBoxMaskParamUpdate,
+	getBoxLikeGeometry,
+	getDefaultSquareMaskParams,
+	getStrokeOffset,
+	rotatePoint,
+} from "../box-like";
+
+function buildDiamondPath({
+	centerX,
+	centerY,
+	halfWidth,
+	halfHeight,
+	rotationRad,
+}: {
+	centerX: number;
+	centerY: number;
+	halfWidth: number;
+	halfHeight: number;
+	rotationRad: number;
+}): Path2D {
+	const points = [
+		{ x: centerX, y: centerY - halfHeight },
+		{ x: centerX + halfWidth, y: centerY },
+		{ x: centerX, y: centerY + halfHeight },
+		{ x: centerX - halfWidth, y: centerY },
+	].map((point) =>
+		rotatePoint({
+			...point,
+			centerX,
+			centerY,
+			rotationRad,
+		}),
+	);
+
+	const path = new Path2D();
+	path.moveTo(points[0].x, points[0].y);
+	for (const point of points.slice(1)) {
+		path.lineTo(point.x, point.y);
+	}
+	path.closePath();
+	return path;
+}
+
+export const diamondMaskDefinition: MaskDefinition<"diamond"> = {
+	type: "diamond",
+	name: "Diamond",
+	features: {
+		hasPosition: true,
+		hasRotation: true,
+		sizeMode: "width-height",
+	},
+	params: BOX_LIKE_MASK_PARAMS,
+	interaction: buildBoxMaskInteraction({
+		sizeMode: "width-height",
+		buildOverlayPath({ width, height }) {
+			return `M ${width / 2},0 L ${width},${height / 2} L ${width / 2},${height} L 0,${height / 2} Z`;
+		},
+	}),
+	buildDefault(context) {
+		return {
+			type: "diamond",
+			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 });
+				return buildDiamondPath({
+					centerX,
+					centerY,
+					halfWidth: maskWidth / 2,
+					halfHeight: maskHeight / 2,
+					rotationRad,
+				});
+			},
+		},
+		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,
+				});
+				return buildDiamondPath({
+					centerX,
+					centerY,
+					halfWidth: Math.max(maskWidth / 2 + offset, 1),
+					halfHeight: Math.max(maskHeight / 2 + offset, 1),
+					rotationRad,
+				});
+			},
+		},
+	},
+};
-- 
cgit v1.3.1