@remotion/shapes 3.3.36 → 3.3.38

package/dist/components/pie.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { MakePieProps } from '../utils/make-pie';
+import type { AllShapesProps } from './render-svg';
+export declare type PieProps = MakePieProps & AllShapesProps;
+export declare const Pie: React.FC<PieProps>;

package/dist/components/pie.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pie = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const make_pie_1 = require("../utils/make-pie");
+const render_svg_1 = require("./render-svg");
+const Pie = ({ radius, progress, closePath, counterClockwise, rotation, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_pie_1.makePie)({ radius, progress, closePath, counterClockwise, rotation }), ...props }));
+};
+exports.Pie = Pie;

package/dist/components/render-svg.js

@@ -22,6 +22,9 @@ const RenderSvg = ({ width, height, path, style, pathStyle, transformOrigin, deb
                         const prevInstruction = index === 0
                             ? instructions[instructions.length - 1]
                             : instructions[index - 1];
+                        if (prevInstruction.type === 'z') {
+                            return null;
+                        }
                         const prevX = prevInstruction.x;
                         const prevY = prevInstruction.y;
                         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: `M ${prevX} ${prevY} ${i.cp1x} ${i.cp1y}`, strokeWidth: 2, stroke: "rgba(0, 0, 0, 0.4)" }), (0, jsx_runtime_1.jsx)("path", { d: `M ${i.x} ${i.y} ${i.cp2x} ${i.cp2y}`, strokeWidth: 2, stroke: "rgba(0, 0, 0, 0.4)" }), (0, jsx_runtime_1.jsx)("circle", { cx: i.cp1x, cy: i.cp1y, r: 3, fill: "white", strokeWidth: 2, stroke: "black" }), (0, jsx_runtime_1.jsx)("circle", { cx: i.cp2x, cy: i.cp2y, r: 3, strokeWidth: 2, fill: "white", stroke: "black" })] }));

package/dist/components/star.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { MakeStarProps } from '../utils/make-star';
+import type { AllShapesProps } from './render-svg';
+export declare type StarProps = MakeStarProps & Omit<AllShapesProps, 'points'>;
+export declare const Star: React.FC<StarProps>;

package/dist/components/star.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Star = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const make_star_1 = require("../utils/make-star");
+const render_svg_1 = require("./render-svg");
+const Star = ({ innerRadius, outerRadius, points, cornerRadius, edgeRoundness, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_star_1.makeStar)({
+            innerRadius,
+            outerRadius,
+            points,
+            cornerRadius,
+            edgeRoundness,
+        }), ...props }));
+};
+exports.Star = Star;

package/dist/index.d.ts

@@ -1,9 +1,13 @@
 export { Circle, CircleProps } from './components/circle';
 export { Ellipse, EllipseProps } from './components/ellipse';
+export { Pie, PieProps } from './components/pie';
 export { Rect, RectProps } from './components/rect';
+export { Star, StarProps } from './components/star';
 export { Triangle, TriangleProps } from './components/triangle';
 export { Instruction } from './utils/instructions';
 export { makeCircle, MakeCircleProps } from './utils/make-circle';
 export { makeEllipse, MakeEllipseOptions } from './utils/make-ellipse';
+export { makePie, MakePieProps } from './utils/make-pie';
 export { makeRect, MakeRectOptions } from './utils/make-rect';
+export { makeStar, MakeStarProps } from './utils/make-star';
 export { makeTriangle, MakeTriangleProps } from './utils/make-triangle';

package/dist/index.js

@@ -1,19 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeTriangle = exports.makeRect = exports.makeEllipse = exports.makeCircle = exports.Triangle = exports.Rect = exports.Ellipse = exports.Circle = void 0;
+exports.makeTriangle = exports.makeStar = exports.makeRect = exports.makePie = exports.makeEllipse = exports.makeCircle = exports.Triangle = exports.Star = exports.Rect = exports.Pie = exports.Ellipse = exports.Circle = void 0;
 var circle_1 = require("./components/circle");
 Object.defineProperty(exports, "Circle", { enumerable: true, get: function () { return circle_1.Circle; } });
 var ellipse_1 = require("./components/ellipse");
 Object.defineProperty(exports, "Ellipse", { enumerable: true, get: function () { return ellipse_1.Ellipse; } });
+var pie_1 = require("./components/pie");
+Object.defineProperty(exports, "Pie", { enumerable: true, get: function () { return pie_1.Pie; } });
 var rect_1 = require("./components/rect");
 Object.defineProperty(exports, "Rect", { enumerable: true, get: function () { return rect_1.Rect; } });
+var star_1 = require("./components/star");
+Object.defineProperty(exports, "Star", { enumerable: true, get: function () { return star_1.Star; } });
 var triangle_1 = require("./components/triangle");
 Object.defineProperty(exports, "Triangle", { enumerable: true, get: function () { return triangle_1.Triangle; } });
 var make_circle_1 = require("./utils/make-circle");
 Object.defineProperty(exports, "makeCircle", { enumerable: true, get: function () { return make_circle_1.makeCircle; } });
 var make_ellipse_1 = require("./utils/make-ellipse");
 Object.defineProperty(exports, "makeEllipse", { enumerable: true, get: function () { return make_ellipse_1.makeEllipse; } });
+var make_pie_1 = require("./utils/make-pie");
+Object.defineProperty(exports, "makePie", { enumerable: true, get: function () { return make_pie_1.makePie; } });
 var make_rect_1 = require("./utils/make-rect");
 Object.defineProperty(exports, "makeRect", { enumerable: true, get: function () { return make_rect_1.makeRect; } });
+var make_star_1 = require("./utils/make-star");
+Object.defineProperty(exports, "makeStar", { enumerable: true, get: function () { return make_star_1.makeStar; } });
 var make_triangle_1 = require("./utils/make-triangle");
 Object.defineProperty(exports, "makeTriangle", { enumerable: true, get: function () { return make_triangle_1.makeTriangle; } });

package/dist/utils/instructions.d.ts

@@ -15,11 +15,16 @@ export declare type Instruction = {
     x: number;
     y: number;
 } | {
-    type: 'm';
+    type: 'a';
+    rx: number;
+    ry: number;
+    xAxisRotation: number;
+    largeArcFlag: boolean;
+    sweepFlag: boolean;
     x: number;
     y: number;
 } | {
-    type: 'a';
+    type: 'A';
     rx: number;
     ry: number;
     xAxisRotation: number;
@@ -27,6 +32,8 @@ export declare type Instruction = {
     sweepFlag: boolean;
     x: number;
     y: number;
+} | {
+    type: 'z';
 };
 export declare const serializeInstructions: (instructions: Instruction[]) => string;
-export declare const serializeInstruction: (instruction: Instruction) => string | undefined;
+export declare const serializeInstruction: (instruction: Instruction) => string;

package/dist/utils/instructions.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.serializeInstruction = exports.serializeInstructions = void 0;
 const serializeInstructions = (instructions) => {
-    return instructions.map(exports.serializeInstruction).join(' ');
+    return instructions.map((i) => (0, exports.serializeInstruction)(i)).join(' ');
 };
 exports.serializeInstructions = serializeInstructions;
 const serializeInstruction = (instruction) => {
@@ -15,11 +15,15 @@ const serializeInstruction = (instruction) => {
     if (instruction.type === 'C') {
         return `C ${instruction.cp1x} ${instruction.cp1y} ${instruction.cp2x} ${instruction.cp2y} ${instruction.x} ${instruction.y}`;
     }
-    if (instruction.type === 'm') {
-        return `m ${instruction.x} ${instruction.y}`;
-    }
     if (instruction.type === 'a') {
         return `a ${instruction.rx} ${instruction.ry} ${instruction.xAxisRotation} ${Number(instruction.largeArcFlag)} ${Number(instruction.sweepFlag ? 1 : 0)} ${instruction.x} ${instruction.y}`;
     }
+    if (instruction.type === 'A') {
+        return `A ${instruction.rx} ${instruction.ry} ${instruction.xAxisRotation} ${Number(instruction.largeArcFlag)} ${Number(instruction.sweepFlag ? 1 : 0)} ${instruction.x} ${instruction.y}`;
+    }
+    if (instruction.type === 'z') {
+        return 'z';
+    }
+    throw new Error('not implemented');
 };
 exports.serializeInstruction = serializeInstruction;

package/dist/utils/make-circle.js

@@ -6,14 +6,9 @@ const makeCircle = ({ radius }) => {
     const instructions = [
         {
             type: 'M',
-            x: radius,
+            x: 0,
             y: radius,
         },
-        {
-            type: 'm',
-            x: -radius,
-            y: 0,
-        },
         {
             type: 'a',
             rx: radius,
@@ -34,6 +29,9 @@ const makeCircle = ({ radius }) => {
             x: -radius * 2,
             y: 0,
         },
+        {
+            type: 'z',
+        },
     ];
     const path = (0, instructions_1.serializeInstructions)(instructions);
     return {

package/dist/utils/make-ellipse.js

@@ -19,6 +19,9 @@ const makeEllipse = ({ rx, ry }) => {
             x: 1,
             y: 0,
         },
+        {
+            type: 'z',
+        },
     ];
     const path = (0, instructions_1.serializeInstructions)(instructions);
     return {

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

@@ -0,0 +1,15 @@
+import type { Instruction } from './instructions';
+export declare type MakePieProps = {
+    radius: number;
+    progress: number;
+    closePath?: boolean;
+    counterClockwise?: boolean;
+    rotation?: number;
+};
+export declare const makePie: ({ progress, radius, closePath, counterClockwise, rotation, }: MakePieProps) => {
+    height: number;
+    width: number;
+    path: string;
+    instructions: Instruction[];
+    transformOrigin: string;
+};

package/dist/utils/make-pie.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makePie = void 0;
+const instructions_1 = require("./instructions");
+const getCoord = ({ counterClockwise, actualProgress, rotation, radius, coord, }) => {
+    const factor = counterClockwise ? -1 : 1;
+    const val = Math[coord === 'x' ? 'cos' : 'sin'](factor * actualProgress * Math.PI * 2 + Math.PI * 1.5 + rotation) *
+        radius +
+        radius;
+    const rounded = Math.round(val * 100000) / 100000;
+    return rounded;
+};
+const makePie = ({ progress, radius, closePath = true, counterClockwise = false, rotation = 0, }) => {
+    const actualProgress = Math.min(Math.max(progress, 0), 1);
+    const endAngleX = getCoord({
+        actualProgress,
+        coord: 'x',
+        counterClockwise,
+        radius,
+        rotation,
+    });
+    const endAngleY = getCoord({
+        actualProgress,
+        coord: 'y',
+        counterClockwise,
+        radius,
+        rotation,
+    });
+    const start = {
+        x: getCoord({
+            actualProgress: 0,
+            coord: 'x',
+            counterClockwise,
+            radius,
+            rotation,
+        }),
+        y: getCoord({
+            actualProgress: 0,
+            coord: 'y',
+            counterClockwise,
+            radius,
+            rotation,
+        }),
+    };
+    const end = { x: endAngleX, y: endAngleY };
+    const instructions = [
+        {
+            type: 'M',
+            ...start,
+        },
+        {
+            type: 'A',
+            rx: radius,
+            ry: radius,
+            xAxisRotation: 0,
+            largeArcFlag: false,
+            sweepFlag: !counterClockwise,
+            x: actualProgress <= 0.5
+                ? endAngleX
+                : getCoord({
+                    actualProgress: 0.5,
+                    coord: 'x',
+                    counterClockwise,
+                    radius,
+                    rotation,
+                }),
+            y: actualProgress <= 0.5
+                ? endAngleY
+                : getCoord({
+                    actualProgress: 0.5,
+                    coord: 'y',
+                    counterClockwise,
+                    radius,
+                    rotation,
+                }),
+        },
+        actualProgress > 0.5
+            ? {
+                type: 'A',
+                rx: radius,
+                ry: radius,
+                xAxisRotation: 0,
+                largeArcFlag: false,
+                sweepFlag: !counterClockwise,
+                ...end,
+            }
+            : null,
+        actualProgress > 0 && actualProgress < 1 && closePath
+            ? {
+                type: 'L',
+                x: radius,
+                y: radius,
+            }
+            : null,
+        closePath
+            ? {
+                type: 'z',
+            }
+            : null,
+    ].filter(Boolean);
+    const path = (0, instructions_1.serializeInstructions)(instructions);
+    return {
+        height: radius * 2,
+        width: radius * 2,
+        path,
+        instructions,
+        transformOrigin: `${radius} ${radius}`,
+    };
+};
+exports.makePie = makePie;

package/dist/utils/make-rect.js

@@ -5,13 +5,18 @@ const instructions_1 = require("./instructions");
 const join_points_1 = require("./join-points");
 const makeRect = ({ width, height, edgeRoundness = null, cornerRadius = 0, }) => {
     const transformOrigin = [width / 2, height / 2];
-    const instructions = (0, join_points_1.joinPoints)([
-        [0, 0],
-        [width, 0],
-        [width, height],
-        [0, height],
-        [0, 0],
-    ], { edgeRoundness, cornerRadius, roundCornerStrategy: 'arc' });
+    const instructions = [
+        ...(0, join_points_1.joinPoints)([
+            [0, 0],
+            [width, 0],
+            [width, height],
+            [0, height],
+            [0, 0],
+        ], { edgeRoundness, cornerRadius, roundCornerStrategy: 'arc' }),
+        {
+            type: 'z',
+        },
+    ];
     const path = (0, instructions_1.serializeInstructions)(instructions);
     return {
         width,

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

@@ -0,0 +1,18 @@
+import type { ShapeInfo } from './shape-info';
+export declare type MakeStarProps = {
+    points: number;
+    innerRadius: number;
+    outerRadius: number;
+    edgeRoundness?: number | null;
+    cornerRadius?: number;
+};
+export declare type StarProps = {
+    centerX: number;
+    centerY: number;
+    points: number;
+    innerRadius: number;
+    outerRadius: number;
+    edgeRoundness: number | null;
+    cornerRadius: number;
+};
+export declare const makeStar: ({ points, innerRadius, outerRadius, cornerRadius, edgeRoundness, }: MakeStarProps) => ShapeInfo;

package/dist/utils/make-star.js

@@ -0,0 +1,49 @@
+"use strict";
+// Copied from https://stackblitz.com/edit/svg-star-generator?file=index.js
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeStar = void 0;
+const instructions_1 = require("./instructions");
+const join_points_1 = require("./join-points");
+const star = ({ centerX, centerY, points, innerRadius, outerRadius, cornerRadius, edgeRoundness, }) => {
+    const degreeIncrement = (Math.PI * 2) / (points * 2);
+    const d = new Array(points * 2).fill(true).map((_p, i) => {
+        const radius = i % 2 === 0 ? outerRadius : innerRadius;
+        const angle = degreeIncrement * i - Math.PI / 2;
+        const point = {
+            x: centerX + radius * Math.cos(angle),
+            y: centerY + radius * Math.sin(angle),
+        };
+        return [point.x, point.y];
+    });
+    return [
+        ...(0, join_points_1.joinPoints)([...d, d[0]], {
+            edgeRoundness,
+            cornerRadius,
+            roundCornerStrategy: cornerRadius > 0 ? 'bezier' : 'arc',
+        }),
+        { type: 'z' },
+    ];
+};
+const makeStar = ({ points, innerRadius, outerRadius, cornerRadius = 0, edgeRoundness = null, }) => {
+    const width = outerRadius * 2;
+    const height = outerRadius * 2;
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const starPathInstructions = star({
+        centerX,
+        centerY,
+        points,
+        innerRadius,
+        outerRadius,
+        cornerRadius,
+        edgeRoundness,
+    });
+    return {
+        path: (0, instructions_1.serializeInstructions)(starPathInstructions),
+        width,
+        height,
+        transformOrigin: `${centerX} ${centerY}`,
+        instructions: starPathInstructions,
+    };
+};
+exports.makeStar = makeStar;

package/dist/utils/make-triangle.js

@@ -45,11 +45,16 @@ const makeTriangle = ({ length, direction = 'right', edgeRoundness = null, corne
         left: longerDimension / 2,
         right: longerDimension / 2,
     }[direction];
-    const instructions = (0, join_points_1.joinPoints)(points[direction], {
-        edgeRoundness,
-        cornerRadius,
-        roundCornerStrategy: 'bezier',
-    });
+    const instructions = [
+        ...(0, join_points_1.joinPoints)(points[direction], {
+            edgeRoundness,
+            cornerRadius,
+            roundCornerStrategy: 'bezier',
+        }),
+        {
+            type: 'z',
+        },
+    ];
     const path = (0, instructions_1.serializeInstructions)(instructions);
     return {
         path,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/shapes",
-	"version": "3.3.36",
+	"version": "3.3.38",
 	"description": "Utility functions and components for SVG shapes",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -44,5 +44,5 @@
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
-	"gitHead": "623bf1e883e7b26b9d02458037c930ccbe8857e4"
+	"gitHead": "ac58695e452e58deb5c010f09bcc94d036930e6c"
 }