summaryrefslogtreecommitdiff
path: root/apps/web/src/masks/definitions
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src/masks/definitions')
-rw-r--r--apps/web/src/masks/definitions/box-like.ts33
-rw-r--r--apps/web/src/masks/definitions/custom.ts30
-rw-r--r--apps/web/src/masks/definitions/split.ts6
-rw-r--r--apps/web/src/masks/definitions/text.ts19
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,
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-17 07:53:02 +0000