@remotion/shapes 3.3.38 → 3.3.40

package/dist/components/render-svg.d.ts

@@ -1,5 +1,5 @@
+import type { Instruction } from '@remotion/paths/dist/helpers/types';
 import React from 'react';
-import type { Instruction } from '../utils/instructions';
 export declare type AllShapesProps = Omit<React.SVGProps<SVGPathElement>, 'width' | 'height' | 'd'> & {
     debug?: boolean;
     pathStyle?: React.CSSProperties;

package/dist/components/render-svg.js

@@ -22,7 +22,18 @@ const RenderSvg = ({ width, height, path, style, pathStyle, transformOrigin, deb
                         const prevInstruction = index === 0
                             ? instructions[instructions.length - 1]
                             : instructions[index - 1];
-                        if (prevInstruction.type === 'z') {
+                        if (prevInstruction.type === 'V' ||
+                            prevInstruction.type === 'H' ||
+                            prevInstruction.type === 'a' ||
+                            prevInstruction.type === 'Z' ||
+                            prevInstruction.type === 't' ||
+                            prevInstruction.type === 'q' ||
+                            prevInstruction.type === 'l' ||
+                            prevInstruction.type === 'c' ||
+                            prevInstruction.type === 'm' ||
+                            prevInstruction.type === 'h' ||
+                            prevInstruction.type === 's' ||
+                            prevInstruction.type === 'v') {
                             return null;
                         }
                         const prevX = prevInstruction.x;

package/dist/components/return-type.d.ts

@@ -0,0 +1,5 @@
+export declare type ShapeInfo = {
+    path: string;
+    width: string;
+    height: string;
+};

package/dist/components/return-type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/shape-info.d.ts

@@ -0,0 +1,5 @@
+export declare type ShapeInfo = {
+    path: string;
+    width: number;
+    height: number;
+};

package/dist/components/shape-info.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/index.d.ts

@@ -1,10 +1,10 @@
+export { Instruction } from '@remotion/paths';
 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';

package/dist/make-circle.d.ts

@@ -1,6 +1,4 @@
 export declare type MakeCircleProps = {
-    cx?: number | string;
-    cy?: number | string;
-    radius?: number | string;
+    radius: number;
 };
-export declare const makeCircle: ({ cx, cy, radius, }: MakeCircleProps) => string;
+export declare const makeCircle: ({ radius }: MakeCircleProps) => string;

package/dist/make-circle.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeCircle = void 0;
-const makeCircle = ({ cx = 50, cy = 50, radius = 50, }) => {
+const makeCircle = ({ radius }) => {
+    const cx = radius;
+    const cy = radius;
     return `M ${cx} ${cy} m -${radius} 0 a ${radius} ${radius} 0 1 0 ${radius * 2} 0 ${radius} ${radius} 0 1 0 ${-radius * 2} 0`;
 };
 exports.makeCircle = makeCircle;

package/dist/make-ellipse.d.ts

@@ -1,5 +1,5 @@
 export declare type MakeEllipseOptions = {
-    rx?: number | string;
-    ry?: number | string;
+    rx: number;
+    ry: number;
 };
 export declare const makeEllipse: ({ rx, ry }: MakeEllipseOptions) => string;

package/dist/make-rect.d.ts

@@ -1,7 +1,5 @@
 export declare type MakeRectOptions = {
-    x?: number;
-    y?: number;
     width: number;
     height: number;
 };
-export declare const makeRect: ({ x, y, width, height }: MakeRectOptions) => string;
+export declare const makeRect: ({ width, height }: MakeRectOptions) => string;

package/dist/make-rect.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeRect = void 0;
-const makeRect = ({ x = 0, y = 0, width, height }) => {
+const makeRect = ({ width, height }) => {
+    const x = 0;
+    const y = 0;
     return `M ${x} ${y} l ${width} 0 l 0 ${height} l ${-width} 0 Z`;
 };
 exports.makeRect = makeRect;

package/dist/utils/join-points.d.ts

@@ -1,4 +1,4 @@
-import type { Instruction } from './instructions';
+import type { Instruction } from '@remotion/paths';
 export declare const joinPoints: (points: [
     number,
     number

package/dist/utils/join-points.js

@@ -27,17 +27,21 @@ const joinPoints = (points, { edgeRoundness, cornerRadius, roundCornerStrategy,
         ];
         if (i === 0) {
             if (edgeRoundness !== null) {
-                return {
-                    type: 'M',
-                    x: middleOfLine[0],
-                    y: middleOfLine[1],
-                };
+                return [
+                    {
+                        type: 'M',
+                        x: middleOfLine[0],
+                        y: middleOfLine[1],
+                    },
+                ];
             }
-            return {
-                type: 'M',
-                x,
-                y,
-            };
+            return [
+                {
+                    type: 'M',
+                    x,
+                    y,
+                },
+            ];
         }
         const prevVector = [x - prevPoint[0], y - prevPoint[1]];
         const nextVector = [nextPoint[0] - x, nextPoint[1] - y];
@@ -46,11 +50,13 @@ const joinPoints = (points, { edgeRoundness, cornerRadius, roundCornerStrategy,
         }
         if (edgeRoundness === null) {
             if (cornerRadius === 0) {
-                return {
-                    type: 'L',
-                    x,
-                    y,
-                };
+                return [
+                    {
+                        type: 'L',
+                        x,
+                        y,
+                    },
+                ];
             }
             const prevVectorMinusRadius = shortenVector(prevVector, cornerRadius);
             const prevVectorLenght = scaleVectorToLength(prevVector, cornerRadius);
@@ -71,8 +77,8 @@ const joinPoints = (points, { edgeRoundness, cornerRadius, roundCornerStrategy,
                         rx: cornerRadius,
                         ry: cornerRadius,
                         xAxisRotation: 0,
-                        x: prevVectorLenght[0] + nextVectorMinusRadius[0],
-                        y: prevVectorLenght[1] + nextVectorMinusRadius[1],
+                        dx: prevVectorLenght[0] + nextVectorMinusRadius[0],
+                        dy: prevVectorLenght[1] + nextVectorMinusRadius[1],
                         largeArcFlag: false,
                         sweepFlag: true,
                     }
@@ -95,15 +101,17 @@ const joinPoints = (points, { edgeRoundness, cornerRadius, roundCornerStrategy,
             middleOfLine[0] - nextVector[0] * edgeRoundness * 0.5,
             middleOfLine[1] - nextVector[1] * edgeRoundness * 0.5,
         ];
-        return {
-            type: 'C',
-            cp1x: controlPoint1[0],
-            cp1y: controlPoint1[1],
-            cp2x: controlPoint2[0],
-            cp2y: controlPoint2[1],
-            x: middleOfLine[0],
-            y: middleOfLine[1],
-        };
+        return [
+            {
+                type: 'C',
+                cp1x: controlPoint1[0],
+                cp1y: controlPoint1[1],
+                cp2x: controlPoint2[0],
+                cp2y: controlPoint2[1],
+                x: middleOfLine[0],
+                y: middleOfLine[1],
+            },
+        ];
     })
         .flat(1);
 };

package/dist/utils/make-circle.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeCircle = void 0;
-const instructions_1 = require("./instructions");
+const paths_1 = require("@remotion/paths");
 const makeCircle = ({ radius }) => {
     const instructions = [
         {
@@ -16,8 +16,8 @@ const makeCircle = ({ radius }) => {
             xAxisRotation: 0,
             largeArcFlag: true,
             sweepFlag: false,
-            x: radius * 2,
-            y: 0,
+            dx: radius * 2,
+            dy: 0,
         },
         {
             type: 'a',
@@ -26,14 +26,14 @@ const makeCircle = ({ radius }) => {
             xAxisRotation: 0,
             largeArcFlag: true,
             sweepFlag: false,
-            x: -radius * 2,
-            y: 0,
+            dx: -radius * 2,
+            dy: 0,
         },
         {
-            type: 'z',
+            type: 'Z',
         },
     ];
-    const path = (0, instructions_1.serializeInstructions)(instructions);
+    const path = (0, paths_1.serializeInstructions)(instructions);
     return {
         height: radius * 2,
         width: radius * 2,

package/dist/utils/make-ellipse.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeEllipse = void 0;
-const instructions_1 = require("./instructions");
+const paths_1 = require("@remotion/paths");
 const makeEllipse = ({ rx, ry }) => {
     const instructions = [
         {
@@ -16,14 +16,14 @@ const makeEllipse = ({ rx, ry }) => {
             xAxisRotation: 0,
             largeArcFlag: true,
             sweepFlag: false,
-            x: 1,
-            y: 0,
+            dx: 1,
+            dy: 0,
         },
         {
-            type: 'z',
+            type: 'Z',
         },
     ];
-    const path = (0, instructions_1.serializeInstructions)(instructions);
+    const path = (0, paths_1.serializeInstructions)(instructions);
     return {
         width: rx * 2,
         height: ry * 2,

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

@@ -1,4 +1,4 @@
-import type { Instruction } from './instructions';
+import type { Instruction } from '@remotion/paths';
 export declare type MakePieProps = {
     radius: number;
     progress: number;

package/dist/utils/make-pie.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makePie = void 0;
-const instructions_1 = require("./instructions");
+const paths_1 = require("@remotion/paths");
 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) *
@@ -94,11 +94,11 @@ const makePie = ({ progress, radius, closePath = true, counterClockwise = false,
             : null,
         closePath
             ? {
-                type: 'z',
+                type: 'Z',
             }
             : null,
     ].filter(Boolean);
-    const path = (0, instructions_1.serializeInstructions)(instructions);
+    const path = (0, paths_1.serializeInstructions)(instructions);
     return {
         height: radius * 2,
         width: radius * 2,

package/dist/utils/make-rect.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeRect = void 0;
-const instructions_1 = require("./instructions");
+const paths_1 = require("@remotion/paths");
 const join_points_1 = require("./join-points");
 const makeRect = ({ width, height, edgeRoundness = null, cornerRadius = 0, }) => {
     const transformOrigin = [width / 2, height / 2];
@@ -14,10 +14,10 @@ const makeRect = ({ width, height, edgeRoundness = null, cornerRadius = 0, }) =>
             [0, 0],
         ], { edgeRoundness, cornerRadius, roundCornerStrategy: 'arc' }),
         {
-            type: 'z',
+            type: 'Z',
         },
     ];
-    const path = (0, instructions_1.serializeInstructions)(instructions);
+    const path = (0, paths_1.serializeInstructions)(instructions);
     return {
         width,
         height,

package/dist/utils/make-star.js

@@ -2,7 +2,7 @@
 // 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 paths_1 = require("@remotion/paths");
 const join_points_1 = require("./join-points");
 const star = ({ centerX, centerY, points, innerRadius, outerRadius, cornerRadius, edgeRoundness, }) => {
     const degreeIncrement = (Math.PI * 2) / (points * 2);
@@ -21,7 +21,7 @@ const star = ({ centerX, centerY, points, innerRadius, outerRadius, cornerRadius
             cornerRadius,
             roundCornerStrategy: cornerRadius > 0 ? 'bezier' : 'arc',
         }),
-        { type: 'z' },
+        { type: 'Z' },
     ];
 };
 const makeStar = ({ points, innerRadius, outerRadius, cornerRadius = 0, edgeRoundness = null, }) => {
@@ -39,7 +39,7 @@ const makeStar = ({ points, innerRadius, outerRadius, cornerRadius = 0, edgeRoun
         edgeRoundness,
     });
     return {
-        path: (0, instructions_1.serializeInstructions)(starPathInstructions),
+        path: (0, paths_1.serializeInstructions)(starPathInstructions),
         width,
         height,
         transformOrigin: `${centerX} ${centerY}`,

package/dist/utils/make-triangle.js

@@ -2,7 +2,7 @@
 // Copied from https://stackblitz.com/edit/react-triangle-svg?file=index.js
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeTriangle = void 0;
-const instructions_1 = require("./instructions");
+const paths_1 = require("@remotion/paths");
 const join_points_1 = require("./join-points");
 const makeTriangle = ({ length, direction = 'right', edgeRoundness = null, cornerRadius = 0, }) => {
     const longerDimension = length;
@@ -52,10 +52,10 @@ const makeTriangle = ({ length, direction = 'right', edgeRoundness = null, corne
             roundCornerStrategy: 'bezier',
         }),
         {
-            type: 'z',
+            type: 'Z',
         },
     ];
-    const path = (0, instructions_1.serializeInstructions)(instructions);
+    const path = (0, paths_1.serializeInstructions)(instructions);
     return {
         path,
         instructions,

package/dist/utils/shape-info.d.ts

@@ -1,4 +1,4 @@
-import type { Instruction } from './instructions';
+import type { Instruction } from '@remotion/paths';
 export declare type ShapeInfo = {
     path: string;
     width: number;

package/dist/utils/star.d.ts

@@ -0,0 +1,10 @@
+export declare type StarProps = {
+    centerX: number;
+    centerY: number;
+    points: number;
+    innerRadius: number;
+    outerRadius: number;
+    edgeRoundness: number | null;
+    cornerRadius: number;
+};
+export declare const star: ({ centerX, centerY, points, innerRadius, outerRadius, cornerRadius, edgeRoundness, }: StarProps) => string;

package/dist/utils/star.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.star = void 0;
+const instructions_1 = require("./instructions");
+const join_points_1 = require("./join-points");
+const polarToCartesian = ({ centerX, centerY, radius, angleInDegrees, }) => {
+    const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+    return {
+        x: centerX + radius * Math.cos(angleInRadians),
+        y: centerY + radius * Math.sin(angleInRadians),
+    };
+};
+const star = ({ centerX, centerY, points, innerRadius, outerRadius, cornerRadius, edgeRoundness, }) => {
+    const degreeIncrement = 360 / (points * 2);
+    const d = new Array(points * 2)
+        .fill('true')
+        .map((_p, i) => {
+        const radius = i % 2 === 0 ? outerRadius : innerRadius;
+        const degrees = degreeIncrement * i;
+        const point = polarToCartesian({
+            centerX,
+            centerY,
+            radius,
+            angleInDegrees: degrees,
+        });
+        return [point.x, point.y];
+    });
+    return (0, instructions_1.serializeInstructions)((0, join_points_1.joinPoints)([...d, d[0]], {
+        edgeRoundness,
+        cornerRadius,
+        roundCornerStrategy: 'arc',
+    }));
+};
+exports.star = star;

package/package.json

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

package/dist/make-square.d.ts

@@ -1,7 +0,0 @@
-export declare type MakeRectOptions = {
-    x?: number;
-    y?: number;
-    width: number;
-    height: number;
-};
-export declare const makeRect: ({ x, y, width, height }: MakeRectOptions) => string;

package/dist/make-square.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeRect = void 0;
-const makeRect = ({ x = 0, y = 0, width, height }) => {
-    return `M ${x} ${y} l ${width} 0 l 0 ${height} l ${-width} 0 Z`;
-};
-exports.makeRect = makeRect;

package/dist/square.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export declare type SquareProps = {
-    width: number;
-    height: number;
-    fill?: string;
-    style?: React.CSSProperties;
-};
-export declare const Square: React.FC<SquareProps>;

package/dist/square.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Square = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const make_square_1 = require("./make-square");
-const Square = ({ width, height, fill, style }) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: style, "data-shape-type": "square", children: (0, jsx_runtime_1.jsx)("path", { d: (0, make_square_1.makeSquare)({
-                width,
-                height,
-            }), fill: fill }) }));
-};
-exports.Square = Square;