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
|
import type { ParamValues } from "@/params";
export interface Transform {
scaleX: number;
scaleY: number;
position: {
x: number;
y: number;
};
rotate: number;
}
export type BlendMode =
| "normal"
| "darken"
| "multiply"
| "color-burn"
| "lighten"
| "screen"
| "plus-lighter"
| "color-dodge"
| "overlay"
| "soft-light"
| "hard-light"
| "difference"
| "exclusion"
| "hue"
| "saturation"
| "color"
| "luminosity";
export function buildTransformFromParams({
params,
}: {
params: ParamValues;
}): Transform {
return {
scaleX: readNumberParam({ params, key: "transform.scaleX", fallback: 1 }),
scaleY: readNumberParam({ params, key: "transform.scaleY", fallback: 1 }),
position: {
x: readNumberParam({ params, key: "transform.positionX", fallback: 0 }),
y: readNumberParam({ params, key: "transform.positionY", fallback: 0 }),
},
rotate: readNumberParam({ params, key: "transform.rotate", fallback: 0 }),
};
}
export function readOpacityFromParams({
params,
}: {
params: ParamValues;
}): number {
return readNumberParam({ params, key: "opacity", fallback: 1 });
}
export function readBlendModeFromParams({
params,
}: {
params: ParamValues;
}): BlendMode {
const value = params.blendMode;
return typeof value === "string" && isBlendMode(value) ? value : "normal";
}
function readNumberParam({
params,
key,
fallback,
}: {
params: ParamValues;
key: string;
fallback: number;
}): number {
const value = params[key];
return typeof value === "number" ? value : fallback;
}
function isBlendMode(value: string): value is BlendMode {
return (
value === "normal" ||
value === "darken" ||
value === "multiply" ||
value === "color-burn" ||
value === "lighten" ||
value === "screen" ||
value === "plus-lighter" ||
value === "color-dodge" ||
value === "overlay" ||
value === "soft-light" ||
value === "hard-light" ||
value === "difference" ||
value === "exclusion" ||
value === "hue" ||
value === "saturation" ||
value === "color" ||
value === "luminosity"
);
}
|
