summaryrefslogtreecommitdiff
path: root/apps/web/src/masks/definitions/cinematic-bars.ts
diff options
context:
space:
mode:
authorMaze Winther <mazewinther@gmail.com>2026-04-29 18:41:15 +0200
committerMaze Winther <mazewinther@gmail.com>2026-05-02 03:27:23 +0200
commit79dcec8a2ec2f5cad9be95e5b52fbfa752fb6ac4 (patch)
tree99ff9393c4a550669ebac921c6a0535437a39413 /apps/web/src/masks/definitions/cinematic-bars.ts
parent97f8d1968f186028e41f83b04c0897130e6c69f4 (diff)
downloadopencut-79dcec8a2ec2f5cad9be95e5b52fbfa752fb6ac4.tar.gz
refactor: split builtin and freeform masks
Made-with: Cursor
Diffstat (limited to 'apps/web/src/masks/definitions/cinematic-bars.ts')
-rw-r--r--apps/web/src/masks/definitions/cinematic-bars.ts144
1 files changed, 0 insertions, 144 deletions
diff --git a/apps/web/src/masks/definitions/cinematic-bars.ts b/apps/web/src/masks/definitions/cinematic-bars.ts
deleted file mode 100644
index 68717c02..00000000
--- a/apps/web/src/masks/definitions/cinematic-bars.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import type {
- MaskDefaultContext,
- MaskDefinition,
- RectangleMaskParams,
-} from "@/masks/types";
-import {
- BOX_LIKE_MASK_PARAMS,
- buildBoxMaskInteraction,
- computeBoxMaskParamUpdate,
- getDefaultBaseMaskParams,
- getStrokeOffset,
- rotatePoint,
-} from "./box-like";
-
-function getDefaultCinematicBarsMaskParams({
- elementSize,
-}: MaskDefaultContext): RectangleMaskParams {
- const absWidth = Math.abs(elementSize?.width ?? 0);
- const absHeight = Math.abs(elementSize?.height ?? 0);
- const diagonal =
- absWidth > 0 && absHeight > 0
- ? Math.sqrt(absWidth ** 2 + absHeight ** 2)
- : 0;
- const fullSpanWidth =
- absWidth > 0 ? diagonal / absWidth : Math.SQRT2;
-
- return {
- ...getDefaultBaseMaskParams(),
- centerX: 0,
- centerY: 0,
- width: Math.max(fullSpanWidth, 1),
- height: 0.6,
- rotation: 0,
- scale: 1,
- };
-}
-
-function buildBandPath({
- centerX,
- centerY,
- halfWidth,
- halfHeight,
- rotationRad,
-}: {
- centerX: number;
- centerY: number;
- halfWidth: number;
- halfHeight: number;
- rotationRad: number;
-}): Path2D {
- const corners = [
- { x: centerX - halfWidth, y: centerY - halfHeight },
- { x: centerX + halfWidth, y: centerY - halfHeight },
- { x: centerX + halfWidth, y: centerY + halfHeight },
- { x: centerX - halfWidth, y: centerY + halfHeight },
- ].map((point) =>
- rotatePoint({
- ...point,
- centerX,
- centerY,
- rotationRad,
- }),
- );
-
- const path = new Path2D();
- path.moveTo(corners[0].x, corners[0].y);
- for (const corner of corners.slice(1)) {
- path.lineTo(corner.x, corner.y);
- }
- path.closePath();
- return path;
-}
-
-export const cinematicBarsMaskDefinition: MaskDefinition<"cinematic-bars"> = {
- type: "cinematic-bars",
- name: "Cinematic Bars",
- features: {
- hasPosition: true,
- hasRotation: true,
- sizeMode: "height-only",
- },
- params: BOX_LIKE_MASK_PARAMS,
- interaction: buildBoxMaskInteraction({
- sizeMode: "height-only",
- buildOverlayPath({ width, height }) {
- return `M 0,0 H ${width} V ${height} H 0 Z`;
- },
- }),
- buildDefault(context) {
- return {
- type: "cinematic-bars",
- params: getDefaultCinematicBarsMaskParams(context),
- };
- },
- computeParamUpdate: computeBoxMaskParamUpdate,
- renderer: {
- body: {
- kind: "fillPath",
- buildPath({ resolvedParams, width, height }) {
- const params = resolvedParams;
- const centerX = width / 2 + params.centerX * width;
- const centerY = height / 2 + params.centerY * height;
- const maskWidth = Math.max(params.width * width, width);
- const maskHeight = Math.max(params.height, 0.01) * height;
- const rotationRad = (params.rotation * Math.PI) / 180;
-
- return buildBandPath({
- centerX,
- centerY,
- halfWidth: maskWidth / 2,
- halfHeight: maskHeight / 2,
- rotationRad,
- });
- },
- },
- stroke: {
- kind: "strokeFromPath",
- buildStrokePath({ resolvedParams, width, height }) {
- const params = resolvedParams;
- const centerX = width / 2 + params.centerX * width;
- const centerY = height / 2 + params.centerY * height;
- const rotationRad = (params.rotation * Math.PI) / 180;
- const offset = getStrokeOffset({
- strokeAlign: params.strokeAlign,
- strokeWidth: params.strokeWidth,
- });
-
- return buildBandPath({
- centerX,
- centerY,
- halfWidth: Math.max(
- Math.max(params.width * width, width) / 2 + offset,
- 1,
- ),
- halfHeight: Math.max(
- (Math.max(params.height, 0.01) * height) / 2 + offset,
- 1,
- ),
- rotationRad,
- });
- },
- },
- },
-};