refactor: type mask handle identifiers

Made-with: Cursor

4 files changed, 44 insertions, 44 deletions

diff --git a/apps/web/src/masks/definitions/box-like.ts b/apps/web/src/masks/definitions/box-like.ts
index 5462c14f..37706755 100644
--- a/apps/web/src/masks/definitions/box-like.ts
+++ b/apps/web/src/masks/definitions/box-like.ts
@@ -210,20 +210,20 @@ export function computeBoxMaskParamUpdate({
 	deltaY,
 	bounds,
 }: MaskParamUpdateArgs<RectangleMaskParams>): Partial<RectangleMaskParams> {
-	if (handleId === "position") {
+	if (handleId.kind === "position") {
 		return {
 			centerX: startParams.centerX + deltaX / bounds.width,
 			centerY: startParams.centerY + deltaY / bounds.height,
 		};
 	}
 
-	if (handleId === "rotation") {
+	if (handleId.kind === "rotation") {
 		const currentAngle = (Math.atan2(deltaY, deltaX) * 180) / Math.PI;
 		const newRotation = (startParams.rotation + currentAngle) % 360;
 		return { rotation: newRotation < 0 ? newRotation + 360 : newRotation };
 	}
 
-	if (handleId === "feather") {
+	if (handleId.kind === "feather") {
 		const angleRad = (startParams.rotation * Math.PI) / 180;
 		return computeFeatherUpdate({
 			startFeather: startParams.feather,
@@ -237,8 +237,11 @@ export function computeBoxMaskParamUpdate({
 	const halfWidth = startParams.width * bounds.width;
 	const halfHeight = startParams.height * bounds.height;
 
-	if (handleId === "right" || handleId === "left") {
-		const sign = handleId === "right" ? 1 : -1;
+	if (
+		handleId.kind === "edge" &&
+		(handleId.side === "right" || handleId.side === "left")
+	) {
+		const sign = handleId.side === "right" ? 1 : -1;
 		return {
 			width: Math.max(
 				MIN_MASK_DIMENSION,
@@ -247,8 +250,11 @@ export function computeBoxMaskParamUpdate({
 		};
 	}
 
-	if (handleId === "bottom" || handleId === "top") {
-		const sign = handleId === "bottom" ? 1 : -1;
+	if (
+		handleId.kind === "edge" &&
+		(handleId.side === "bottom" || handleId.side === "top")
+	) {
+		const sign = handleId.side === "bottom" ? 1 : -1;
 		return {
 			height: Math.max(
 				MIN_MASK_DIMENSION,
@@ -257,14 +263,9 @@ export function computeBoxMaskParamUpdate({
 		};
 	}
 
-	if (
-		handleId === "top-left" ||
-		handleId === "top-right" ||
-		handleId === "bottom-left" ||
-		handleId === "bottom-right"
-	) {
-		const signX = handleId.includes("right") ? 1 : -1;
-		const signY = handleId.includes("bottom") ? 1 : -1;
+	if (handleId.kind === "corner") {
+		const signX = handleId.corner.x === "right" ? 1 : -1;
+		const signY = handleId.corner.y === "bottom" ? 1 : -1;
 		const distance = Math.sqrt(
 			(signX * deltaX + halfWidth) ** 2 + (signY * deltaY + halfHeight) ** 2,
 		);
@@ -276,7 +277,7 @@ export function computeBoxMaskParamUpdate({
 		};
 	}
 
-	if (handleId === "scale") {
+	if (handleId.kind === "scale") {
 		const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2);
 		const originalDistance = Math.sqrt(halfWidth ** 2 + halfHeight ** 2);
 		const scale = originalDistance > 0 ? 1 + distance / originalDistance : 1;
diff --git a/apps/web/src/masks/definitions/custom.ts b/apps/web/src/masks/definitions/custom.ts
index 6e0f7af6..08155aae 100644
--- a/apps/web/src/masks/definitions/custom.ts
+++ b/apps/web/src/masks/definitions/custom.ts
@@ -20,7 +20,6 @@ import {
 	getCustomMaskLocalBounds,
 	getCustomMaskSegmentCount,
 	insertPointIntoCustomMaskSegment,
-	parseCustomMaskHandleId,
 	recenterCustomMaskPath,
 	type CustomMaskPathPoint,
 } from "@/masks/custom-path";
@@ -133,12 +132,12 @@ function getCustomMaskDisplayHandles({
 				scale: params.scale,
 				bounds,
 				closed: true,
-			}).map((segment) => ({
+			}).map((segment): MaskOverlay => ({
 				id: `segment:${segment.index}`,
 				type: "canvas-path" as const,
 				pathData: segment.pathData,
 				coordinateSpace: "canvas" as const,
-				handleId: `segment:${segment.index}`,
+				handleId: { kind: "segment", index: segment.index },
 				cursor: PEN_CURSOR,
 				strokeOpacity: 0,
 				strokeWidth: segmentStrokeWidth,
@@ -166,7 +165,7 @@ function getCustomMaskDisplayHandles({
 
 	geometry.anchors.forEach((point) => {
 		handles.push({
-			id: `point:${point.id}:anchor`,
+			id: { kind: "anchor", pointId: point.id },
 			x: point.anchor.x,
 			y: point.anchor.y,
 			cursor: params.closed ? "move" : "pointer",
@@ -201,7 +200,7 @@ function computeCustomMaskParamUpdate({
 	startCanvasY,
 	bounds,
 }: MaskParamUpdateArgs<CustomMaskParams>): Partial<CustomMaskParams> {
-	if (handleId === "position") {
+	if (handleId.kind === "position") {
 		return {
 			centerX: startParams.centerX + deltaX / bounds.width,
 			centerY: startParams.centerY + deltaY / bounds.height,
@@ -211,7 +210,7 @@ function computeCustomMaskParamUpdate({
 	const pivotX = bounds.cx + startParams.centerX * bounds.width;
 	const pivotY = bounds.cy + startParams.centerY * bounds.height;
 
-	if (handleId === "rotation") {
+	if (handleId.kind === "rotation") {
 		const startAngle =
 			(Math.atan2(startCanvasY - pivotY, startCanvasX - pivotX) * 180) /
 			Math.PI;
@@ -232,7 +231,7 @@ function computeCustomMaskParamUpdate({
 		};
 	}
 
-	if (handleId === "feather") {
+	if (handleId.kind === "feather") {
 		const angleRad = (startParams.rotation * Math.PI) / 180;
 		return computeFeatherUpdate({
 			startFeather: startParams.feather,
@@ -243,7 +242,7 @@ function computeCustomMaskParamUpdate({
 		});
 	}
 
-	if (handleId === "scale") {
+	if (handleId.kind === "scale") {
 		const startDistance = Math.hypot(
 			startCanvasX - pivotX,
 			startCanvasY - pivotY,
@@ -258,8 +257,7 @@ function computeCustomMaskParamUpdate({
 		};
 	}
 
-	const parsedHandle = parseCustomMaskHandleId({ handleId });
-	if (!parsedHandle) {
+	if (handleId.kind !== "anchor" && handleId.kind !== "tangent") {
 		return {};
 	}
 
@@ -280,9 +278,9 @@ function computeCustomMaskParamUpdate({
 	return {
 		path: updateCustomMaskPoint({
 			points,
-			pointId: parsedHandle.pointId,
+			pointId: handleId.pointId,
 			updater: (point) => {
-				if (parsedHandle.part === "anchor") {
+				if (handleId.kind === "anchor") {
 					return {
 						...point,
 						x: localPoint.x,
@@ -290,7 +288,7 @@ function computeCustomMaskParamUpdate({
 					};
 				}
 
-				if (parsedHandle.part === "in") {
+				if (handleId.side === "in") {
 					return {
 						...point,
 						inX: localPoint.x - point.x,
@@ -349,7 +347,7 @@ export const customMaskDefinition: MaskDefinition<"custom"> = {
 				y: proposedParams.centerY * bounds.height,
 			};
 
-			if (handleId === "position") {
+			if (handleId.kind === "position") {
 				const { snappedPosition, activeLines } = snapPosition({
 					proposedPosition: position,
 					canvasSize: bounds,
@@ -377,7 +375,7 @@ export const customMaskDefinition: MaskDefinition<"custom"> = {
 				};
 			}
 
-			if (handleId === "rotation") {
+			if (handleId.kind === "rotation") {
 				const { snappedRotation } = snapRotation({
 					proposedRotation: proposedParams.rotation,
 				});
@@ -390,7 +388,7 @@ export const customMaskDefinition: MaskDefinition<"custom"> = {
 				};
 			}
 
-			if (handleId === "scale") {
+			if (handleId.kind === "scale") {
 				const { snappedScale, activeLines } = snapScale({
 					proposedScale: proposedParams.scale,
 					position,
diff --git a/apps/web/src/masks/definitions/split.ts b/apps/web/src/masks/definitions/split.ts
index de67b876..138db91d 100644
--- a/apps/web/src/masks/definitions/split.ts
+++ b/apps/web/src/masks/definitions/split.ts
@@ -128,7 +128,7 @@ function computeSplitMaskParamUpdate({
 	bounds,
 	canvasSize,
 }: MaskParamUpdateArgs<SplitMaskParams>): Partial<SplitMaskParams> {
-	if (handleId === "position") {
+	if (handleId.kind === "position") {
 		const rawX = startParams.centerX + deltaX / bounds.width;
 		const rawY = startParams.centerY + deltaY / bounds.height;
 
@@ -143,7 +143,7 @@ function computeSplitMaskParamUpdate({
 		};
 	}
 
-	if (handleId === "feather") {
+	if (handleId.kind === "feather") {
 		const angleRad = (startParams.rotation * Math.PI) / 180;
 		return computeFeatherUpdate({
 			startFeather: startParams.feather,
@@ -154,7 +154,7 @@ function computeSplitMaskParamUpdate({
 		});
 	}
 
-	if (handleId === "rotation") {
+	if (handleId.kind === "rotation") {
 		const pivotX = bounds.cx + startParams.centerX * bounds.width;
 		const pivotY = bounds.cy + startParams.centerY * bounds.height;
 		const startAngle =
diff --git a/apps/web/src/masks/definitions/text.ts b/apps/web/src/masks/definitions/text.ts
index aa786e78..db2af7e0 100644
--- a/apps/web/src/masks/definitions/text.ts
+++ b/apps/web/src/masks/definitions/text.ts
@@ -4,6 +4,7 @@ import type {
 	MaskParamUpdateArgs,
 	TextMask,
 	TextMaskParams,
+	MaskHandleId,
 } from "@/masks/types";
 import { DEFAULTS } from "@/timeline/defaults";
 import { MIN_FONT_SIZE, MAX_FONT_SIZE } from "@/text/typography";
@@ -124,9 +125,9 @@ function measureTextMask({
 function getScalePreferredEdges({
 	handleId,
 }: {
-	handleId: string;
+	handleId: MaskHandleId;
 }): ScaleEdgePreference | undefined {
-	if (handleId !== "scale") {
+	if (handleId.kind !== "scale") {
 		return undefined;
 	}
 
@@ -145,7 +146,7 @@ function computeTextMaskParamUpdate({
 	startCanvasY,
 	bounds,
 }: MaskParamUpdateArgs<TextMaskParams>): Partial<TextMaskParams> {
-	if (handleId === "position") {
+	if (handleId.kind === "position") {
 		return {
 			centerX: startParams.centerX + deltaX / bounds.width,
 			centerY: startParams.centerY + deltaY / bounds.height,
@@ -155,7 +156,7 @@ function computeTextMaskParamUpdate({
 	const pivotX = bounds.cx + startParams.centerX * bounds.width;
 	const pivotY = bounds.cy + startParams.centerY * bounds.height;
 
-	if (handleId === "rotation") {
+	if (handleId.kind === "rotation") {
 		const startAngle =
 			(Math.atan2(startCanvasY - pivotY, startCanvasX - pivotX) * 180) /
 			Math.PI;
@@ -176,7 +177,7 @@ function computeTextMaskParamUpdate({
 		};
 	}
 
-	if (handleId === "feather") {
+	if (handleId.kind === "feather") {
 		const angleRad = (startParams.rotation * Math.PI) / 180;
 		return computeFeatherUpdate({
 			startFeather: startParams.feather,
@@ -187,7 +188,7 @@ function computeTextMaskParamUpdate({
 		});
 	}
 
-	if (handleId === "scale") {
+	if (handleId.kind === "scale") {
 		const startDistance = Math.hypot(
 			startCanvasX - pivotX,
 			startCanvasY - pivotY,
@@ -269,7 +270,7 @@ export const textMaskDefinition: MaskDefinition<"text"> = {
 				y: proposedParams.centerY * bounds.height,
 			};
 
-			if (handleId === "position") {
+			if (handleId.kind === "position") {
 				const { snappedPosition, activeLines } = snapPosition({
 					proposedPosition: position,
 					canvasSize: bounds,
@@ -297,7 +298,7 @@ export const textMaskDefinition: MaskDefinition<"text"> = {
 				};
 			}
 
-			if (handleId === "rotation") {
+			if (handleId.kind === "rotation") {
 				const { snappedRotation } = snapRotation({
 					proposedRotation: proposedParams.rotation,
 				});
@@ -310,7 +311,7 @@ export const textMaskDefinition: MaskDefinition<"text"> = {
 				};
 			}
 
-			if (handleId === "scale") {
+			if (handleId.kind === "scale") {
 				const { snappedScale, activeLines } = snapScale({
 					proposedScale: proposedParams.scale,
 					position,