refactor: split builtin and freeform masks

Made-with: Cursor

1 files changed, 35 insertions, 5 deletions

diff --git a/apps/web/src/masks/index.ts b/apps/web/src/masks/index.ts
index df7649e1..be5faef7 100644
--- a/apps/web/src/masks/index.ts
+++ b/apps/web/src/masks/index.ts
@@ -1,9 +1,15 @@
 import type { Mask, MaskDefaultContext, MaskType } from "@/masks/types";
-import { masksRegistry } from "./registry";
+import {
+	BASE_MASK_PARAM_DEFINITIONS,
+	builtinMasksRegistry,
+	type RegisteredBuiltinMaskDefinition,
+} from "./registry";
+import { freeformMaskDefinition } from "./freeform/definition";
 import { generateUUID } from "@/utils/id";
+import { SquareIcon } from "@hugeicons/core-free-icons";
 
-export { masksRegistry } from "./registry";
-export { registerDefaultMasks } from "./definitions";
+export { builtinMasksRegistry } from "./registry";
+export { registerBuiltinMasks as registerDefaultMasks } from "./builtin/definitions";
 
 type MaskWithoutId = Mask extends infer TMask
 	? TMask extends Mask
@@ -29,11 +35,35 @@ function withMaskId({ mask, id }: { mask: MaskWithoutId; id: string }): Mask {
 			return { ...mask, id };
 		case "text":
 			return { ...mask, id };
-		case "custom":
+		case "freeform":
 			return { ...mask, id };
 	}
 }
 
+export function getMaskDefinition(maskType: MaskType): RegisteredBuiltinMaskDefinition {
+	if (maskType === "freeform") {
+		return {
+			...freeformMaskDefinition,
+			params: [...freeformMaskDefinition.params, ...BASE_MASK_PARAM_DEFINITIONS],
+			icon: { icon: SquareIcon },
+		} as RegisteredBuiltinMaskDefinition;
+	}
+
+	return builtinMasksRegistry.get(maskType);
+}
+
+export function getMaskDefinitionsForMenu() {
+	return [
+		...builtinMasksRegistry.getAll(),
+		{
+			...freeformMaskDefinition,
+			name: "Pen tool",
+			params: [...freeformMaskDefinition.params, ...BASE_MASK_PARAM_DEFINITIONS],
+			icon: { icon: SquareIcon },
+		},
+	];
+}
+
 export function buildDefaultMaskInstance({
 	maskType,
 	elementSize,
@@ -41,7 +71,7 @@ export function buildDefaultMaskInstance({
 	maskType: MaskType;
 	elementSize?: { width: number; height: number };
 }): Mask {
-	const definition = masksRegistry.get(maskType);
+	const definition = getMaskDefinition(maskType);
 	const context: MaskDefaultContext = { elementSize };
 	return withMaskId({
 		mask: definition.buildDefault(context),