1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
import { MAX_FEATHER } from "@/lib/masks/feather";
import type { ParamDefinition } from "@/lib/params";
import type {
BaseMaskParams,
MaskDefaultContext,
MaskDefinition,
MaskInteractionResult,
MaskSnapArgs,
MaskSnapResult,
MaskType,
} from "@/lib/masks/types";
import type { HugeiconsIconProps } from "@hugeicons/react";
import { DefinitionRegistry } from "@/lib/registry";
export type MaskIconProps = {
icon: HugeiconsIconProps["icon"];
strokeWidth?: number;
};
const BASE_MASK_PARAM_DEFINITIONS: ParamDefinition<
keyof BaseMaskParams & string
>[] = [
{
key: "feather",
label: "Feather",
type: "number",
default: 0,
min: 0,
max: MAX_FEATHER,
step: 1,
unit: "percent",
},
{
key: "strokeWidth",
label: "Stroke width",
type: "number",
default: 0,
min: 0,
max: 100,
step: 1,
},
{
key: "strokeColor",
label: "Stroke color",
type: "color",
default: "#ffffff",
},
];
export interface RegisteredMaskDefinition {
type: MaskType;
name: string;
features: MaskDefinition<BaseMaskParams>["features"];
params: ParamDefinition<string>[];
renderer: MaskDefinition<BaseMaskParams>["renderer"];
interaction: {
getInteraction(args: {
params: BaseMaskParams;
bounds: Parameters<
MaskDefinition<BaseMaskParams>["interaction"]["getInteraction"]
>[0]["bounds"];
displayScale: number;
scaleX: number;
scaleY: number;
}): MaskInteractionResult;
snap?(args: MaskSnapArgs<BaseMaskParams>): MaskSnapResult<BaseMaskParams>;
};
isActive?: (params: BaseMaskParams) => boolean;
buildDefault(
context: MaskDefaultContext,
): ReturnType<MaskDefinition<BaseMaskParams>["buildDefault"]>;
computeParamUpdate(
args: Parameters<MaskDefinition<BaseMaskParams>["computeParamUpdate"]>[0],
): ReturnType<MaskDefinition<BaseMaskParams>["computeParamUpdate"]>;
icon: MaskIconProps;
}
export class MasksRegistry extends DefinitionRegistry<
MaskType,
RegisteredMaskDefinition
> {
constructor() {
super("mask");
}
registerMask<TParams extends BaseMaskParams>({
definition,
icon,
}: {
definition: MaskDefinition<TParams>;
icon: MaskIconProps;
}): void {
const withBaseParams: RegisteredMaskDefinition = {
type: definition.type,
name: definition.name,
features: definition.features,
params: [...definition.params, ...BASE_MASK_PARAM_DEFINITIONS],
renderer: definition.renderer,
interaction: {
getInteraction(args) {
return definition.interaction.getInteraction(args as never);
},
snap: definition.interaction.snap
? (args) => definition.interaction.snap?.(args as never) as never
: undefined,
},
isActive: definition.isActive
? (params) => definition.isActive?.(params as TParams) ?? true
: undefined,
buildDefault(context) {
return definition.buildDefault(context);
},
computeParamUpdate(args) {
return definition.computeParamUpdate(args as never);
},
icon,
};
this.register(definition.type, withBaseParams);
}
}
export const masksRegistry = new MasksRegistry();
|
