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
|
import type { ElementBounds } from "@/preview/element-bounds";
import type { SnapLine } from "@/preview/preview-snap";
import { MIN_MASK_DIMENSION } from "@/masks/dimensions";
import type { RectangleMaskParams } from "@/masks/types";
type CenterMaskParams = {
centerX: number;
centerY: number;
};
type SnapGeometryParams = CenterMaskParams & {
rotation?: number;
width?: number;
height?: number;
scale?: number;
};
export function hasCenterParams(
params: Partial<CenterMaskParams>,
): params is CenterMaskParams {
return (
typeof params.centerX === "number" && typeof params.centerY === "number"
);
}
export function isRectangleMaskParams(
params: SnapGeometryParams,
): params is RectangleMaskParams {
return (
hasCenterParams(params) &&
typeof params.width === "number" &&
typeof params.height === "number" &&
typeof params.rotation === "number" &&
typeof params.scale === "number"
);
}
export function getMaskLocalCenter({
params,
bounds,
}: {
params: CenterMaskParams;
bounds: ElementBounds;
}): { x: number; y: number } | null {
if (!hasCenterParams(params)) return null;
return {
x: params.centerX * bounds.width,
y: params.centerY * bounds.height,
};
}
export function setMaskLocalCenter({
center,
bounds,
}: {
center: { x: number; y: number };
bounds: ElementBounds;
}): { centerX: number; centerY: number } {
return {
centerX: bounds.width === 0 ? 0 : center.x / bounds.width,
centerY: bounds.height === 0 ? 0 : center.y / bounds.height,
};
}
export function getMaskSnapGeometry({
params,
bounds,
}: {
params: SnapGeometryParams;
bounds: ElementBounds;
}): {
position: { x: number; y: number };
size: { width: number; height: number };
rotation: number;
} | null {
const position = getMaskLocalCenter({ params, bounds });
if (!position) return null;
if (isRectangleMaskParams(params)) {
return {
position,
size: {
width: Math.max(params.width, MIN_MASK_DIMENSION) * bounds.width,
height: Math.max(params.height, MIN_MASK_DIMENSION) * bounds.height,
},
rotation: params.rotation,
};
}
return {
position,
size: { width: 0, height: 0 },
rotation: typeof params.rotation === "number" ? params.rotation : 0,
};
}
export function toGlobalMaskSnapLines({
lines,
bounds,
canvasSize,
}: {
lines: SnapLine[];
bounds: ElementBounds;
canvasSize: { width: number; height: number };
}): SnapLine[] {
const centerX = bounds.cx - canvasSize.width / 2;
const centerY = bounds.cy - canvasSize.height / 2;
return lines.map((line) =>
line.type === "vertical"
? {
type: "vertical" as const,
position: centerX + line.position,
}
: {
type: "horizontal" as const,
position: centerY + line.position,
},
);
}
|
