diff options
Diffstat (limited to 'apps/web/src/masks/definitions/cinematic-bars.ts')
| -rw-r--r-- | apps/web/src/masks/definitions/cinematic-bars.ts | 144 |
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, - }); - }, - }, - }, -}; |
