@remotion/shapes 4.0.476 → 4.0.477

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export type { Instruction } from '@remotion/paths';
 export { Arrow, ArrowProps } from './components/arrow';
+export { Callout, CalloutProps } from './components/callout';
 export { Circle, CircleProps } from './components/circle';
 export { Ellipse, EllipseProps } from './components/ellipse';
 export { Heart, HeartProps } from './components/heart';
@@ -9,6 +10,7 @@ export { Rect, RectProps } from './components/rect';
 export { Star, StarProps } from './components/star';
 export { Triangle, TriangleProps } from './components/triangle';
 export { MakeArrowProps, makeArrow } from './utils/make-arrow';
+export { MakeCalloutProps, makeCallout } from './utils/make-callout';
 export { MakeCircleProps, makeCircle } from './utils/make-circle';
 export { MakeEllipseOptions, makeEllipse } from './utils/make-ellipse';
 export { MakeHeartProps, makeHeart } from './utils/make-heart';

package/dist/index.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeTriangle = exports.makeStar = exports.makeRect = exports.makePolygon = exports.makePie = exports.makeHeart = exports.makeEllipse = exports.makeCircle = exports.makeArrow = exports.Triangle = exports.Star = exports.Rect = exports.Polygon = exports.Pie = exports.Heart = exports.Ellipse = exports.Circle = exports.Arrow = void 0;
+exports.makeTriangle = exports.makeStar = exports.makeRect = exports.makePolygon = exports.makePie = exports.makeHeart = exports.makeEllipse = exports.makeCircle = exports.makeCallout = exports.makeArrow = exports.Triangle = exports.Star = exports.Rect = exports.Polygon = exports.Pie = exports.Heart = exports.Ellipse = exports.Circle = exports.Callout = exports.Arrow = void 0;
 const arrow_1 = require("./components/arrow");
 Object.defineProperty(exports, "Arrow", { enumerable: true, get: function () { return arrow_1.Arrow; } });
+const callout_1 = require("./components/callout");
+Object.defineProperty(exports, "Callout", { enumerable: true, get: function () { return callout_1.Callout; } });
 const circle_1 = require("./components/circle");
 Object.defineProperty(exports, "Circle", { enumerable: true, get: function () { return circle_1.Circle; } });
 const ellipse_1 = require("./components/ellipse");
@@ -21,6 +23,8 @@ const triangle_1 = require("./components/triangle");
 Object.defineProperty(exports, "Triangle", { enumerable: true, get: function () { return triangle_1.Triangle; } });
 const make_arrow_1 = require("./utils/make-arrow");
 Object.defineProperty(exports, "makeArrow", { enumerable: true, get: function () { return make_arrow_1.makeArrow; } });
+const make_callout_1 = require("./utils/make-callout");
+Object.defineProperty(exports, "makeCallout", { enumerable: true, get: function () { return make_callout_1.makeCallout; } });
 const make_circle_1 = require("./utils/make-circle");
 Object.defineProperty(exports, "makeCircle", { enumerable: true, get: function () { return make_circle_1.makeCircle; } });
 const make_ellipse_1 = require("./utils/make-ellipse");

package/dist/utils/make-callout.d.ts

@@ -0,0 +1,26 @@
+import type { ShapeInfo } from './shape-info';
+type PointerDirection = 'up' | 'down' | 'left' | 'right';
+export type MakeCalloutProps = {
+    width?: number;
+    height?: number;
+    pointerLength?: number;
+    pointerBaseWidth?: number;
+    pointerPosition?: number;
+    pointerDirection?: PointerDirection;
+    edgeRoundness?: number | null;
+    cornerRadius?: number;
+};
+/**
+ * @description Generates an SVG path for a callout shape.
+ * @param {Number} width The width of the callout body. Default 500.
+ * @param {Number} height The height of the callout body. Default 200.
+ * @param {Number} pointerLength The length of the pointer. Default 40.
+ * @param {Number} pointerBaseWidth The width of the pointer where it meets the body. Default 60.
+ * @param {Number} pointerPosition Position of the pointer along its side, from 0 to 1. Default 0.5.
+ * @param {string} pointerDirection The direction the pointer points. Default 'down'.
+ * @param {null|Number} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
+ * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/make-callout)
+ */
+export declare const makeCallout: ({ width, height, pointerLength, pointerBaseWidth, pointerPosition, pointerDirection, edgeRoundness, cornerRadius, }: MakeCalloutProps) => ShapeInfo;
+export {};

package/dist/utils/make-callout.js

@@ -0,0 +1,240 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeCallout = void 0;
+const paths_1 = require("@remotion/paths");
+const join_points_1 = require("./join-points");
+const ensurePositive = (name, value) => {
+    if (typeof value !== 'number' || value <= 0) {
+        throw new Error(`"${name}" must be a positive number, got ${value}`);
+    }
+};
+const pointerInterval = ({ availableLength, pointerBaseWidth, pointerPosition, }) => {
+    const center = availableLength * pointerPosition;
+    const half = pointerBaseWidth / 2;
+    return {
+        center,
+        start: Math.max(0, center - half),
+        end: Math.min(availableLength, center + half),
+    };
+};
+const areSamePoint = (a, b) => {
+    return a[0] === b[0] && a[1] === b[1];
+};
+const normalizeClosedPoints = (points) => {
+    const deduplicated = points.reduce((acc, entry) => {
+        const previous = acc[acc.length - 1];
+        if (previous && areSamePoint(previous.point, entry.point)) {
+            acc[acc.length - 1] = {
+                point: previous.point,
+                round: previous.round && entry.round,
+            };
+            return acc;
+        }
+        return [...acc, entry];
+    }, []);
+    if (deduplicated.length === 0) {
+        return deduplicated;
+    }
+    const first = deduplicated[0];
+    const last = deduplicated[deduplicated.length - 1];
+    if (areSamePoint(first.point, last.point)) {
+        const [firstEntry, ...rest] = deduplicated;
+        const withoutLast = rest.slice(0, -1);
+        const mergedFirst = {
+            point: firstEntry.point,
+            round: firstEntry.round && last.round,
+        };
+        return [mergedFirst, ...withoutLast, mergedFirst];
+    }
+    return [...deduplicated, first];
+};
+const unitDir = (from, to) => {
+    const dx = to[0] - from[0];
+    const dy = to[1] - from[1];
+    const len = Math.sqrt(dx * dx + dy * dy);
+    if (len === 0) {
+        return [0, 0];
+    }
+    return [dx / len, dy / len];
+};
+const makeInstructions = ({ points, edgeRoundness, cornerRadius, }) => {
+    const rawPoints = points.map((p) => p.point);
+    if (edgeRoundness !== null || cornerRadius === 0) {
+        return [
+            ...(0, join_points_1.joinPoints)(rawPoints, {
+                edgeRoundness,
+                cornerRadius,
+                roundCornerStrategy: 'arc',
+            }),
+            {
+                type: 'Z',
+            },
+        ];
+    }
+    const uniquePoints = areSamePoint(points[0].point, points[points.length - 1].point)
+        ? points.slice(0, -1)
+        : points;
+    const firstPoint = uniquePoints[0];
+    const startDir = firstPoint.round
+        ? unitDir(uniquePoints[0].point, uniquePoints[1].point)
+        : null;
+    const startPoint = startDir
+        ? [
+            firstPoint.point[0] + startDir[0] * cornerRadius,
+            firstPoint.point[1] + startDir[1] * cornerRadius,
+        ]
+        : firstPoint.point;
+    const instructions = [
+        { type: 'M', x: startPoint[0], y: startPoint[1] },
+    ];
+    for (let i = 1; i < uniquePoints.length; i++) {
+        const current = uniquePoints[i];
+        if (!current.round) {
+            instructions.push({
+                type: 'L',
+                x: current.point[0],
+                y: current.point[1],
+            });
+            continue;
+        }
+        const previous = uniquePoints[i - 1].point;
+        const next = uniquePoints[(i + 1) % uniquePoints.length].point;
+        const incoming = unitDir(previous, current.point);
+        const outgoing = unitDir(current.point, next);
+        const arcStart = [
+            current.point[0] - incoming[0] * cornerRadius,
+            current.point[1] - incoming[1] * cornerRadius,
+        ];
+        instructions.push({
+            type: 'L',
+            x: arcStart[0],
+            y: arcStart[1],
+        }, {
+            type: 'a',
+            rx: cornerRadius,
+            ry: cornerRadius,
+            xAxisRotation: 0,
+            dx: incoming[0] * cornerRadius + outgoing[0] * cornerRadius,
+            dy: incoming[1] * cornerRadius + outgoing[1] * cornerRadius,
+            largeArcFlag: false,
+            sweepFlag: true,
+        });
+    }
+    if (firstPoint.round) {
+        const previous = uniquePoints[uniquePoints.length - 1].point;
+        const incoming = unitDir(previous, firstPoint.point);
+        instructions.push({
+            type: 'L',
+            x: firstPoint.point[0] - incoming[0] * cornerRadius,
+            y: firstPoint.point[1] - incoming[1] * cornerRadius,
+        }, {
+            type: 'a',
+            rx: cornerRadius,
+            ry: cornerRadius,
+            xAxisRotation: 0,
+            dx: incoming[0] * cornerRadius + startDir[0] * cornerRadius,
+            dy: incoming[1] * cornerRadius + startDir[1] * cornerRadius,
+            largeArcFlag: false,
+            sweepFlag: true,
+        });
+    }
+    instructions.push({ type: 'Z' });
+    return instructions;
+};
+/**
+ * @description Generates an SVG path for a callout shape.
+ * @param {Number} width The width of the callout body. Default 500.
+ * @param {Number} height The height of the callout body. Default 200.
+ * @param {Number} pointerLength The length of the pointer. Default 40.
+ * @param {Number} pointerBaseWidth The width of the pointer where it meets the body. Default 60.
+ * @param {Number} pointerPosition Position of the pointer along its side, from 0 to 1. Default 0.5.
+ * @param {string} pointerDirection The direction the pointer points. Default 'down'.
+ * @param {null|Number} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
+ * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/make-callout)
+ */
+const makeCallout = ({ width = 500, height = 200, pointerLength = 40, pointerBaseWidth = 60, pointerPosition = 0.5, pointerDirection = 'down', edgeRoundness = null, cornerRadius = 0, }) => {
+    ensurePositive('width', width);
+    ensurePositive('height', height);
+    ensurePositive('pointerLength', pointerLength);
+    ensurePositive('pointerBaseWidth', pointerBaseWidth);
+    if (typeof pointerPosition !== 'number' ||
+        pointerPosition < 0 ||
+        pointerPosition > 1) {
+        throw new Error(`"pointerPosition" must be a number between 0 and 1, got ${pointerPosition}`);
+    }
+    const horizontalInterval = pointerInterval({
+        availableLength: width,
+        pointerBaseWidth,
+        pointerPosition,
+    });
+    const verticalInterval = pointerInterval({
+        availableLength: height,
+        pointerBaseWidth,
+        pointerPosition,
+    });
+    const pointsByDirection = {
+        up: [
+            { point: [0, pointerLength], round: true },
+            { point: [horizontalInterval.start, pointerLength], round: false },
+            { point: [horizontalInterval.center, 0], round: false },
+            { point: [horizontalInterval.end, pointerLength], round: false },
+            { point: [width, pointerLength], round: true },
+            { point: [width, height + pointerLength], round: true },
+            { point: [0, height + pointerLength], round: true },
+            { point: [0, pointerLength], round: true },
+        ],
+        down: [
+            { point: [0, 0], round: true },
+            { point: [width, 0], round: true },
+            { point: [width, height], round: true },
+            { point: [horizontalInterval.end, height], round: false },
+            {
+                point: [horizontalInterval.center, height + pointerLength],
+                round: false,
+            },
+            { point: [horizontalInterval.start, height], round: false },
+            { point: [0, height], round: true },
+            { point: [0, 0], round: true },
+        ],
+        left: [
+            { point: [pointerLength, 0], round: true },
+            { point: [width + pointerLength, 0], round: true },
+            { point: [width + pointerLength, height], round: true },
+            { point: [pointerLength, height], round: true },
+            { point: [pointerLength, verticalInterval.end], round: false },
+            { point: [0, verticalInterval.center], round: false },
+            { point: [pointerLength, verticalInterval.start], round: false },
+            { point: [pointerLength, 0], round: true },
+        ],
+        right: [
+            { point: [0, 0], round: true },
+            { point: [width, 0], round: true },
+            { point: [width, verticalInterval.start], round: false },
+            { point: [width + pointerLength, verticalInterval.center], round: false },
+            { point: [width, verticalInterval.end], round: false },
+            { point: [width, height], round: true },
+            { point: [0, height], round: true },
+            { point: [0, 0], round: true },
+        ],
+    };
+    const points = normalizeClosedPoints(pointsByDirection[pointerDirection]);
+    const instructions = makeInstructions({ points, edgeRoundness, cornerRadius });
+    const path = (0, paths_1.serializeInstructions)(instructions);
+    const shapeWidth = pointerDirection === 'left' || pointerDirection === 'right'
+        ? width + pointerLength
+        : width;
+    const shapeHeight = pointerDirection === 'up' || pointerDirection === 'down'
+        ? height + pointerLength
+        : height;
+    const bodyX = pointerDirection === 'left' ? pointerLength : 0;
+    const bodyY = pointerDirection === 'up' ? pointerLength : 0;
+    return {
+        width: shapeWidth,
+        height: shapeHeight,
+        instructions,
+        path,
+        transformOrigin: `${bodyX + width / 2} ${bodyY + height / 2}`,
+    };
+};
+exports.makeCallout = makeCallout;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/shapes"
 	},
 	"name": "@remotion/shapes",
-	"version": "4.0.476",
+	"version": "4.0.477",
 	"description": "Generate SVG shapes",
 	"main": "dist/index.js",
 	"scripts": {
@@ -34,7 +34,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@happy-dom/global-registrator": "14.5.1",
-		"@remotion/eslint-config-internal": "4.0.476",
+		"@remotion/eslint-config-internal": "4.0.477",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
@@ -51,8 +51,8 @@
 		"react-dom": ">=16.8.0"
 	},
 	"dependencies": {
-		"@remotion/paths": "4.0.476",
-		"remotion": "4.0.476"
+		"@remotion/paths": "4.0.477",
+		"remotion": "4.0.477"
 	},
 	"homepage": "https://www.remotion.dev/docs/shapes"
 }