@remotion/shapes 4.0.59 → 4.0.60

package/README.md

@@ -12,10 +12,12 @@ No dependencies are needed, meaning this package can be used independently of Re
 - [`makeCircle()`](https://remotion.dev/docs/shapes/make-circle)
 - [`makeTriangle()`](https://remotion.dev/docs/shapes/make-triangle)
 - [`makeEllipse()`](https://remotion.dev/docs/shapes/make-ellipse)
+- [`makePolygon()`](https://remotion.dev/docs/shapes/make-polygon)
 - [`<Circle />`](https://remotion.dev/docs/shapes/circle)
 - [`<Rect />`](https://remotion.dev/shapes/shapes/rect)
 - [`<Triangle />`](https://remotion.dev/shapes/shapes/triangle)
 - [`<Ellipse />`](https://remotion.dev/shapes/shapes/ellipse)
+- [`<Polygon />`](https://remotion.dev/shapes/shapes/polygon)
 
 ## License
 

package/dist/components/polygon.d.ts

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

package/dist/components/polygon.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Polygon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const make_polygon_1 = require("../utils/make-polygon");
+const render_svg_1 = require("./render-svg");
+const Polygon = ({ points, radius, cornerRadius, edgeRoundness, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_polygon_1.makePolygon)({
+            points,
+            cornerRadius,
+            edgeRoundness,
+            radius,
+        }), ...props }));
+};
+exports.Polygon = Polygon;

package/dist/index.d.ts

@@ -2,12 +2,14 @@ export { Instruction } from '@remotion/paths';
 export { Circle, CircleProps } from './components/circle';
 export { Ellipse, EllipseProps } from './components/ellipse';
 export { Pie, PieProps } from './components/pie';
+export { Polygon, PolygonProps } from './components/polygon';
 export { Rect, RectProps } from './components/rect';
 export { Star, StarProps } from './components/star';
 export { Triangle, TriangleProps } from './components/triangle';
 export { makeCircle, MakeCircleProps } from './utils/make-circle';
 export { makeEllipse, MakeEllipseOptions } from './utils/make-ellipse';
 export { makePie, MakePieProps } from './utils/make-pie';
+export { makePolygon, MakePolygonProps } from './utils/make-polygon';
 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,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.makeTriangle = exports.makeStar = exports.makeRect = exports.makePolygon = exports.makePie = exports.makeEllipse = exports.makeCircle = exports.Triangle = exports.Star = exports.Rect = exports.Polygon = 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 polygon_1 = require("./components/polygon");
+Object.defineProperty(exports, "Polygon", { enumerable: true, get: function () { return polygon_1.Polygon; } });
 var rect_1 = require("./components/rect");
 Object.defineProperty(exports, "Rect", { enumerable: true, get: function () { return rect_1.Rect; } });
 var star_1 = require("./components/star");
@@ -19,6 +21,8 @@ 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_polygon_1 = require("./utils/make-polygon");
+Object.defineProperty(exports, "makePolygon", { enumerable: true, get: function () { return make_polygon_1.makePolygon; } });
 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");

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

@@ -0,0 +1,16 @@
+import type { ShapeInfo } from './shape-info';
+export type MakePolygonProps = {
+    points: number;
+    radius: number;
+    edgeRoundness?: number | null;
+    cornerRadius?: number;
+};
+export type PolygonProps = {
+    centerX: number;
+    centerY: number;
+    points: number;
+    radius: number;
+    edgeRoundness: number | null;
+    cornerRadius: number;
+};
+export declare const makePolygon: ({ points, radius, cornerRadius, edgeRoundness, }: MakePolygonProps) => ShapeInfo;

package/dist/utils/make-polygon.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makePolygon = void 0;
+const paths_1 = require("@remotion/paths");
+const join_points_1 = require("./join-points");
+function polygon({ points, radius, centerX, centerY, cornerRadius, edgeRoundness, }) {
+    const degreeIncrement = (Math.PI * 2) / points;
+    const d = new Array(points).fill(0).map((_, i) => {
+        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',
+    });
+}
+const makePolygon = ({ points, radius, cornerRadius = 0, edgeRoundness = null, }) => {
+    if (points < 3) {
+        throw new Error(`"points" should be minimum 3, got ${points}`);
+    }
+    const width = 2 * radius;
+    const height = 2 * radius;
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const polygonPathInstructions = polygon({
+        points,
+        radius,
+        centerX,
+        centerY,
+        cornerRadius,
+        edgeRoundness,
+    });
+    return {
+        path: (0, paths_1.serializeInstructions)(polygonPathInstructions),
+        width,
+        height,
+        transformOrigin: `${centerX} ${centerY}`,
+        instructions: polygonPathInstructions,
+    };
+};
+exports.makePolygon = makePolygon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/shapes",
-  "version": "4.0.59",
+  "version": "4.0.60",
   "description": "Utility functions and components for SVG shapes",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -38,7 +38,7 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@remotion/paths": "4.0.59"
+    "@remotion/paths": "4.0.60"
   },
   "scripts": {
     "formatting": "prettier src --check",