@remotion/shapes 4.0.431 → 4.0.433
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/arrow.d.ts +15 -0
- package/dist/components/arrow.js +27 -0
- package/dist/esm/index.mjs +227 -64
- package/dist/index.d.ts +2 -0
- package/dist/index.js +5 -1
- package/dist/utils/make-arrow.d.ts +22 -0
- package/dist/utils/make-arrow.js +161 -0
- package/package.json +3 -3
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { MakeArrowProps } from '../utils/make-arrow';
|
|
3
|
+
import type { AllShapesProps } from './render-svg';
|
|
4
|
+
export type ArrowProps = MakeArrowProps & AllShapesProps;
|
|
5
|
+
/**
|
|
6
|
+
* @description Renders an SVG element containing an arrow shape.
|
|
7
|
+
* @param {Number} length The total length of the arrow along its direction axis. Default 300.
|
|
8
|
+
* @param {Number} headWidth The width of the arrowhead at its widest point. Default 185.
|
|
9
|
+
* @param {Number} headLength The length of the arrowhead portion. Default 120.
|
|
10
|
+
* @param {Number} shaftWidth The width of the arrow shaft. Default 80.
|
|
11
|
+
* @param {string} direction The direction the arrow points. Default 'right'.
|
|
12
|
+
* @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius.
|
|
13
|
+
* @see [Documentation](https://www.remotion.dev/docs/shapes/arrow)
|
|
14
|
+
*/
|
|
15
|
+
export declare const Arrow: React.FC<ArrowProps>;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Arrow = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const make_arrow_1 = require("../utils/make-arrow");
|
|
6
|
+
const render_svg_1 = require("./render-svg");
|
|
7
|
+
/**
|
|
8
|
+
* @description Renders an SVG element containing an arrow shape.
|
|
9
|
+
* @param {Number} length The total length of the arrow along its direction axis. Default 300.
|
|
10
|
+
* @param {Number} headWidth The width of the arrowhead at its widest point. Default 185.
|
|
11
|
+
* @param {Number} headLength The length of the arrowhead portion. Default 120.
|
|
12
|
+
* @param {Number} shaftWidth The width of the arrow shaft. Default 80.
|
|
13
|
+
* @param {string} direction The direction the arrow points. Default 'right'.
|
|
14
|
+
* @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius.
|
|
15
|
+
* @see [Documentation](https://www.remotion.dev/docs/shapes/arrow)
|
|
16
|
+
*/
|
|
17
|
+
const Arrow = ({ length, headWidth, headLength, shaftWidth, direction, cornerRadius, ...props }) => {
|
|
18
|
+
return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { ...(0, make_arrow_1.makeArrow)({
|
|
19
|
+
length,
|
|
20
|
+
headWidth,
|
|
21
|
+
headLength,
|
|
22
|
+
shaftWidth,
|
|
23
|
+
direction,
|
|
24
|
+
cornerRadius,
|
|
25
|
+
}), ...props }));
|
|
26
|
+
};
|
|
27
|
+
exports.Arrow = Arrow;
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,43 +1,138 @@
|
|
|
1
|
-
// src/utils/make-
|
|
1
|
+
// src/utils/make-arrow.ts
|
|
2
2
|
import { serializeInstructions } from "@remotion/paths";
|
|
3
|
-
var
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
3
|
+
var unitDir = (from, to) => {
|
|
4
|
+
const dx = to[0] - from[0];
|
|
5
|
+
const dy = to[1] - from[1];
|
|
6
|
+
const len = Math.sqrt(dx * dx + dy * dy);
|
|
7
|
+
return len === 0 ? [0, 0] : [dx / len, dy / len];
|
|
8
|
+
};
|
|
9
|
+
var buildArrowPath = (points, roundedIndices, cornerRadius) => {
|
|
10
|
+
const n = points.length;
|
|
11
|
+
if (cornerRadius === 0) {
|
|
12
|
+
return [
|
|
13
|
+
{ type: "M", x: points[0][0], y: points[0][1] },
|
|
14
|
+
...points.slice(1).map(([x, y]) => ({ type: "L", x, y })),
|
|
15
|
+
{ type: "Z" }
|
|
16
|
+
];
|
|
17
|
+
}
|
|
18
|
+
const d0 = unitDir(points[0], points[1]);
|
|
19
|
+
const startX = points[0][0] + d0[0] * cornerRadius;
|
|
20
|
+
const startY = points[0][1] + d0[1] * cornerRadius;
|
|
21
|
+
const instrs = [{ type: "M", x: startX, y: startY }];
|
|
22
|
+
for (let i = 1;i < n; i++) {
|
|
23
|
+
const curr = points[i];
|
|
24
|
+
if (roundedIndices.has(i)) {
|
|
25
|
+
const prev = points[i - 1];
|
|
26
|
+
const next = points[(i + 1) % n];
|
|
27
|
+
const dIn = unitDir(prev, curr);
|
|
28
|
+
const dOut = unitDir(curr, next);
|
|
29
|
+
instrs.push({
|
|
30
|
+
type: "L",
|
|
31
|
+
x: curr[0] - dIn[0] * cornerRadius,
|
|
32
|
+
y: curr[1] - dIn[1] * cornerRadius
|
|
33
|
+
}, {
|
|
34
|
+
type: "C",
|
|
35
|
+
cp1x: curr[0],
|
|
36
|
+
cp1y: curr[1],
|
|
37
|
+
cp2x: curr[0],
|
|
38
|
+
cp2y: curr[1],
|
|
39
|
+
x: curr[0] + dOut[0] * cornerRadius,
|
|
40
|
+
y: curr[1] + dOut[1] * cornerRadius
|
|
41
|
+
});
|
|
42
|
+
} else {
|
|
43
|
+
instrs.push({ type: "L", x: curr[0], y: curr[1] });
|
|
32
44
|
}
|
|
45
|
+
}
|
|
46
|
+
const dIn0 = unitDir(points[n - 1], points[0]);
|
|
47
|
+
instrs.push({
|
|
48
|
+
type: "L",
|
|
49
|
+
x: points[0][0] - dIn0[0] * cornerRadius,
|
|
50
|
+
y: points[0][1] - dIn0[1] * cornerRadius
|
|
51
|
+
}, {
|
|
52
|
+
type: "C",
|
|
53
|
+
cp1x: points[0][0],
|
|
54
|
+
cp1y: points[0][1],
|
|
55
|
+
cp2x: points[0][0],
|
|
56
|
+
cp2y: points[0][1],
|
|
57
|
+
x: startX,
|
|
58
|
+
y: startY
|
|
59
|
+
}, { type: "Z" });
|
|
60
|
+
return instrs;
|
|
61
|
+
};
|
|
62
|
+
var makeArrow = ({
|
|
63
|
+
length = 300,
|
|
64
|
+
headWidth = 185,
|
|
65
|
+
headLength = 120,
|
|
66
|
+
shaftWidth = 80,
|
|
67
|
+
direction = "right",
|
|
68
|
+
cornerRadius = 0
|
|
69
|
+
}) => {
|
|
70
|
+
if (length <= 0 || headWidth <= 0 || headLength <= 0 || shaftWidth <= 0) {
|
|
71
|
+
throw new Error('All dimension parameters ("length", "headWidth", "headLength", "shaftWidth") must be positive numbers');
|
|
72
|
+
}
|
|
73
|
+
if (headWidth < shaftWidth) {
|
|
74
|
+
throw new Error(`"headWidth" must be greater than or equal to "shaftWidth", got headWidth=${headWidth} and shaftWidth=${shaftWidth}`);
|
|
75
|
+
}
|
|
76
|
+
if (headLength > length) {
|
|
77
|
+
throw new Error(`"headLength" must be less than or equal to "length", got headLength=${headLength} and length=${length}`);
|
|
78
|
+
}
|
|
79
|
+
const shaftTop = (headWidth - shaftWidth) / 2;
|
|
80
|
+
const shaftBottom = shaftTop + shaftWidth;
|
|
81
|
+
const shaftEnd = length - headLength;
|
|
82
|
+
const rightPoints = [
|
|
83
|
+
[0, shaftTop],
|
|
84
|
+
[shaftEnd, shaftTop],
|
|
85
|
+
[shaftEnd, 0],
|
|
86
|
+
[length, headWidth / 2],
|
|
87
|
+
[shaftEnd, headWidth],
|
|
88
|
+
[shaftEnd, shaftBottom],
|
|
89
|
+
[0, shaftBottom]
|
|
33
90
|
];
|
|
91
|
+
let points;
|
|
92
|
+
let width;
|
|
93
|
+
let height;
|
|
94
|
+
if (direction === "right") {
|
|
95
|
+
points = rightPoints;
|
|
96
|
+
width = length;
|
|
97
|
+
height = headWidth;
|
|
98
|
+
} else if (direction === "left") {
|
|
99
|
+
points = rightPoints.map(([x, y]) => [length - x, y]);
|
|
100
|
+
width = length;
|
|
101
|
+
height = headWidth;
|
|
102
|
+
} else if (direction === "down") {
|
|
103
|
+
points = [
|
|
104
|
+
[shaftTop, 0],
|
|
105
|
+
[shaftBottom, 0],
|
|
106
|
+
[shaftBottom, shaftEnd],
|
|
107
|
+
[headWidth, shaftEnd],
|
|
108
|
+
[headWidth / 2, length],
|
|
109
|
+
[0, shaftEnd],
|
|
110
|
+
[shaftTop, shaftEnd]
|
|
111
|
+
];
|
|
112
|
+
width = headWidth;
|
|
113
|
+
height = length;
|
|
114
|
+
} else {
|
|
115
|
+
points = [
|
|
116
|
+
[shaftTop, length],
|
|
117
|
+
[shaftBottom, length],
|
|
118
|
+
[shaftBottom, headLength],
|
|
119
|
+
[headWidth, headLength],
|
|
120
|
+
[headWidth / 2, 0],
|
|
121
|
+
[0, headLength],
|
|
122
|
+
[shaftTop, headLength]
|
|
123
|
+
];
|
|
124
|
+
width = headWidth;
|
|
125
|
+
height = length;
|
|
126
|
+
}
|
|
127
|
+
const roundedIndices = direction === "right" || direction === "left" ? new Set([0, 2, 3, 4, 6]) : new Set([0, 1, 3, 4, 5]);
|
|
128
|
+
const instructions = buildArrowPath(points, roundedIndices, cornerRadius);
|
|
34
129
|
const path = serializeInstructions(instructions);
|
|
35
130
|
return {
|
|
36
|
-
height: radius * 2,
|
|
37
|
-
width: radius * 2,
|
|
38
131
|
path,
|
|
39
132
|
instructions,
|
|
40
|
-
|
|
133
|
+
width,
|
|
134
|
+
height,
|
|
135
|
+
transformOrigin: `${width / 2} ${height / 2}`
|
|
41
136
|
};
|
|
42
137
|
};
|
|
43
138
|
|
|
@@ -143,16 +238,82 @@ var RenderSvg = ({
|
|
|
143
238
|
});
|
|
144
239
|
};
|
|
145
240
|
|
|
146
|
-
// src/components/
|
|
241
|
+
// src/components/arrow.tsx
|
|
147
242
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
148
|
-
var
|
|
243
|
+
var Arrow = ({
|
|
244
|
+
length,
|
|
245
|
+
headWidth,
|
|
246
|
+
headLength,
|
|
247
|
+
shaftWidth,
|
|
248
|
+
direction,
|
|
249
|
+
cornerRadius,
|
|
250
|
+
...props
|
|
251
|
+
}) => {
|
|
149
252
|
return /* @__PURE__ */ jsx2(RenderSvg, {
|
|
253
|
+
...makeArrow({
|
|
254
|
+
length,
|
|
255
|
+
headWidth,
|
|
256
|
+
headLength,
|
|
257
|
+
shaftWidth,
|
|
258
|
+
direction,
|
|
259
|
+
cornerRadius
|
|
260
|
+
}),
|
|
261
|
+
...props
|
|
262
|
+
});
|
|
263
|
+
};
|
|
264
|
+
// src/utils/make-circle.ts
|
|
265
|
+
import { serializeInstructions as serializeInstructions2 } from "@remotion/paths";
|
|
266
|
+
var makeCircle = ({ radius }) => {
|
|
267
|
+
const instructions = [
|
|
268
|
+
{
|
|
269
|
+
type: "M",
|
|
270
|
+
x: radius,
|
|
271
|
+
y: 0
|
|
272
|
+
},
|
|
273
|
+
{
|
|
274
|
+
type: "a",
|
|
275
|
+
rx: radius,
|
|
276
|
+
ry: radius,
|
|
277
|
+
xAxisRotation: 0,
|
|
278
|
+
largeArcFlag: true,
|
|
279
|
+
sweepFlag: true,
|
|
280
|
+
dx: 0,
|
|
281
|
+
dy: radius * 2
|
|
282
|
+
},
|
|
283
|
+
{
|
|
284
|
+
type: "a",
|
|
285
|
+
rx: radius,
|
|
286
|
+
ry: radius,
|
|
287
|
+
xAxisRotation: 0,
|
|
288
|
+
largeArcFlag: true,
|
|
289
|
+
sweepFlag: true,
|
|
290
|
+
dx: 0,
|
|
291
|
+
dy: -radius * 2
|
|
292
|
+
},
|
|
293
|
+
{
|
|
294
|
+
type: "Z"
|
|
295
|
+
}
|
|
296
|
+
];
|
|
297
|
+
const path = serializeInstructions2(instructions);
|
|
298
|
+
return {
|
|
299
|
+
height: radius * 2,
|
|
300
|
+
width: radius * 2,
|
|
301
|
+
path,
|
|
302
|
+
instructions,
|
|
303
|
+
transformOrigin: `${radius} ${radius}`
|
|
304
|
+
};
|
|
305
|
+
};
|
|
306
|
+
|
|
307
|
+
// src/components/circle.tsx
|
|
308
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
309
|
+
var Circle = ({ radius, ...props }) => {
|
|
310
|
+
return /* @__PURE__ */ jsx3(RenderSvg, {
|
|
150
311
|
...makeCircle({ radius }),
|
|
151
312
|
...props
|
|
152
313
|
});
|
|
153
314
|
};
|
|
154
315
|
// src/utils/make-ellipse.ts
|
|
155
|
-
import { serializeInstructions as
|
|
316
|
+
import { serializeInstructions as serializeInstructions3 } from "@remotion/paths";
|
|
156
317
|
var makeEllipse = ({ rx, ry }) => {
|
|
157
318
|
const instructions = [
|
|
158
319
|
{
|
|
@@ -174,7 +335,7 @@ var makeEllipse = ({ rx, ry }) => {
|
|
|
174
335
|
type: "Z"
|
|
175
336
|
}
|
|
176
337
|
];
|
|
177
|
-
const path =
|
|
338
|
+
const path = serializeInstructions3(instructions);
|
|
178
339
|
return {
|
|
179
340
|
width: rx * 2,
|
|
180
341
|
height: ry * 2,
|
|
@@ -185,15 +346,15 @@ var makeEllipse = ({ rx, ry }) => {
|
|
|
185
346
|
};
|
|
186
347
|
|
|
187
348
|
// src/components/ellipse.tsx
|
|
188
|
-
import { jsx as
|
|
349
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
189
350
|
var Ellipse = ({ rx, ry, ...props }) => {
|
|
190
|
-
return /* @__PURE__ */
|
|
351
|
+
return /* @__PURE__ */ jsx4(RenderSvg, {
|
|
191
352
|
...makeEllipse({ rx, ry }),
|
|
192
353
|
...props
|
|
193
354
|
});
|
|
194
355
|
};
|
|
195
356
|
// src/utils/make-heart.ts
|
|
196
|
-
import { serializeInstructions as
|
|
357
|
+
import { serializeInstructions as serializeInstructions4 } from "@remotion/paths";
|
|
197
358
|
var makeHeart = ({
|
|
198
359
|
height,
|
|
199
360
|
aspectRatio = 1.1,
|
|
@@ -274,7 +435,7 @@ var makeHeart = ({
|
|
|
274
435
|
type: "Z"
|
|
275
436
|
}
|
|
276
437
|
];
|
|
277
|
-
const path =
|
|
438
|
+
const path = serializeInstructions4(instructions);
|
|
278
439
|
return {
|
|
279
440
|
path,
|
|
280
441
|
width,
|
|
@@ -285,7 +446,7 @@ var makeHeart = ({
|
|
|
285
446
|
};
|
|
286
447
|
|
|
287
448
|
// src/components/heart.tsx
|
|
288
|
-
import { jsx as
|
|
449
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
289
450
|
var Heart = ({
|
|
290
451
|
aspectRatio,
|
|
291
452
|
height,
|
|
@@ -293,7 +454,7 @@ var Heart = ({
|
|
|
293
454
|
depthAdjustment = 0,
|
|
294
455
|
...props
|
|
295
456
|
}) => {
|
|
296
|
-
return /* @__PURE__ */
|
|
457
|
+
return /* @__PURE__ */ jsx5(RenderSvg, {
|
|
297
458
|
...makeHeart({
|
|
298
459
|
aspectRatio,
|
|
299
460
|
height,
|
|
@@ -304,7 +465,7 @@ var Heart = ({
|
|
|
304
465
|
});
|
|
305
466
|
};
|
|
306
467
|
// src/utils/make-pie.ts
|
|
307
|
-
import { serializeInstructions as
|
|
468
|
+
import { serializeInstructions as serializeInstructions5 } from "@remotion/paths";
|
|
308
469
|
var getCoord = ({
|
|
309
470
|
counterClockwise,
|
|
310
471
|
actualProgress,
|
|
@@ -401,7 +562,7 @@ var makePie = ({
|
|
|
401
562
|
type: "Z"
|
|
402
563
|
} : null
|
|
403
564
|
].filter(Boolean);
|
|
404
|
-
const path =
|
|
565
|
+
const path = serializeInstructions5(instructions);
|
|
405
566
|
return {
|
|
406
567
|
height: radius * 2,
|
|
407
568
|
width: radius * 2,
|
|
@@ -412,7 +573,7 @@ var makePie = ({
|
|
|
412
573
|
};
|
|
413
574
|
|
|
414
575
|
// src/components/pie.tsx
|
|
415
|
-
import { jsx as
|
|
576
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
416
577
|
var Pie = ({
|
|
417
578
|
radius,
|
|
418
579
|
progress,
|
|
@@ -421,7 +582,7 @@ var Pie = ({
|
|
|
421
582
|
rotation,
|
|
422
583
|
...props
|
|
423
584
|
}) => {
|
|
424
|
-
return /* @__PURE__ */
|
|
585
|
+
return /* @__PURE__ */ jsx6(RenderSvg, {
|
|
425
586
|
...makePie({ radius, progress, closePath, counterClockwise, rotation }),
|
|
426
587
|
...props
|
|
427
588
|
});
|
|
@@ -431,7 +592,7 @@ import {
|
|
|
431
592
|
PathInternals,
|
|
432
593
|
reduceInstructions,
|
|
433
594
|
resetPath,
|
|
434
|
-
serializeInstructions as
|
|
595
|
+
serializeInstructions as serializeInstructions6
|
|
435
596
|
} from "@remotion/paths";
|
|
436
597
|
|
|
437
598
|
// src/utils/join-points.ts
|
|
@@ -606,7 +767,7 @@ var makePolygon = ({
|
|
|
606
767
|
edgeRoundness
|
|
607
768
|
});
|
|
608
769
|
const reduced = reduceInstructions(polygonPathInstructions);
|
|
609
|
-
const path = resetPath(
|
|
770
|
+
const path = resetPath(serializeInstructions6(reduced));
|
|
610
771
|
const boundingBox = PathInternals.getBoundingBoxFromInstructions(reduced);
|
|
611
772
|
return {
|
|
612
773
|
path,
|
|
@@ -618,7 +779,7 @@ var makePolygon = ({
|
|
|
618
779
|
};
|
|
619
780
|
|
|
620
781
|
// src/components/polygon.tsx
|
|
621
|
-
import { jsx as
|
|
782
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
622
783
|
var Polygon = ({
|
|
623
784
|
points,
|
|
624
785
|
radius,
|
|
@@ -626,7 +787,7 @@ var Polygon = ({
|
|
|
626
787
|
edgeRoundness,
|
|
627
788
|
...props
|
|
628
789
|
}) => {
|
|
629
|
-
return /* @__PURE__ */
|
|
790
|
+
return /* @__PURE__ */ jsx7(RenderSvg, {
|
|
630
791
|
...makePolygon({
|
|
631
792
|
points,
|
|
632
793
|
cornerRadius,
|
|
@@ -637,7 +798,7 @@ var Polygon = ({
|
|
|
637
798
|
});
|
|
638
799
|
};
|
|
639
800
|
// src/utils/make-rect.ts
|
|
640
|
-
import { serializeInstructions as
|
|
801
|
+
import { serializeInstructions as serializeInstructions7 } from "@remotion/paths";
|
|
641
802
|
var makeRect = ({
|
|
642
803
|
width,
|
|
643
804
|
height,
|
|
@@ -657,7 +818,7 @@ var makeRect = ({
|
|
|
657
818
|
type: "Z"
|
|
658
819
|
}
|
|
659
820
|
];
|
|
660
|
-
const path =
|
|
821
|
+
const path = serializeInstructions7(instructions);
|
|
661
822
|
return {
|
|
662
823
|
width,
|
|
663
824
|
height,
|
|
@@ -668,7 +829,7 @@ var makeRect = ({
|
|
|
668
829
|
};
|
|
669
830
|
|
|
670
831
|
// src/components/rect.tsx
|
|
671
|
-
import { jsx as
|
|
832
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
672
833
|
var Rect = ({
|
|
673
834
|
width,
|
|
674
835
|
edgeRoundness,
|
|
@@ -676,7 +837,7 @@ var Rect = ({
|
|
|
676
837
|
cornerRadius,
|
|
677
838
|
...props
|
|
678
839
|
}) => {
|
|
679
|
-
return /* @__PURE__ */
|
|
840
|
+
return /* @__PURE__ */ jsx8(RenderSvg, {
|
|
680
841
|
...makeRect({ height, width, edgeRoundness, cornerRadius }),
|
|
681
842
|
...props
|
|
682
843
|
});
|
|
@@ -686,7 +847,7 @@ import {
|
|
|
686
847
|
PathInternals as PathInternals2,
|
|
687
848
|
reduceInstructions as reduceInstructions2,
|
|
688
849
|
resetPath as resetPath2,
|
|
689
|
-
serializeInstructions as
|
|
850
|
+
serializeInstructions as serializeInstructions8
|
|
690
851
|
} from "@remotion/paths";
|
|
691
852
|
var star = ({
|
|
692
853
|
centerX,
|
|
@@ -737,7 +898,7 @@ var makeStar = ({
|
|
|
737
898
|
edgeRoundness
|
|
738
899
|
});
|
|
739
900
|
const reduced = reduceInstructions2(starPathInstructions);
|
|
740
|
-
const path = resetPath2(
|
|
901
|
+
const path = resetPath2(serializeInstructions8(reduced));
|
|
741
902
|
const boundingBox = PathInternals2.getBoundingBoxFromInstructions(reduced);
|
|
742
903
|
return {
|
|
743
904
|
path,
|
|
@@ -749,7 +910,7 @@ var makeStar = ({
|
|
|
749
910
|
};
|
|
750
911
|
|
|
751
912
|
// src/components/star.tsx
|
|
752
|
-
import { jsx as
|
|
913
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
753
914
|
var Star = ({
|
|
754
915
|
innerRadius,
|
|
755
916
|
outerRadius,
|
|
@@ -758,7 +919,7 @@ var Star = ({
|
|
|
758
919
|
edgeRoundness,
|
|
759
920
|
...props
|
|
760
921
|
}) => {
|
|
761
|
-
return /* @__PURE__ */
|
|
922
|
+
return /* @__PURE__ */ jsx9(RenderSvg, {
|
|
762
923
|
...makeStar({
|
|
763
924
|
innerRadius,
|
|
764
925
|
outerRadius,
|
|
@@ -770,7 +931,7 @@ var Star = ({
|
|
|
770
931
|
});
|
|
771
932
|
};
|
|
772
933
|
// src/utils/make-triangle.ts
|
|
773
|
-
import { serializeInstructions as
|
|
934
|
+
import { serializeInstructions as serializeInstructions9 } from "@remotion/paths";
|
|
774
935
|
var makeTriangle = ({
|
|
775
936
|
length,
|
|
776
937
|
direction = "right",
|
|
@@ -830,7 +991,7 @@ var makeTriangle = ({
|
|
|
830
991
|
type: "Z"
|
|
831
992
|
}
|
|
832
993
|
];
|
|
833
|
-
const path =
|
|
994
|
+
const path = serializeInstructions9(instructions);
|
|
834
995
|
return {
|
|
835
996
|
path,
|
|
836
997
|
instructions,
|
|
@@ -841,7 +1002,7 @@ var makeTriangle = ({
|
|
|
841
1002
|
};
|
|
842
1003
|
|
|
843
1004
|
// src/components/triangle.tsx
|
|
844
|
-
import { jsx as
|
|
1005
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
845
1006
|
var Triangle = ({
|
|
846
1007
|
length,
|
|
847
1008
|
direction,
|
|
@@ -849,7 +1010,7 @@ var Triangle = ({
|
|
|
849
1010
|
cornerRadius,
|
|
850
1011
|
...props
|
|
851
1012
|
}) => {
|
|
852
|
-
return /* @__PURE__ */
|
|
1013
|
+
return /* @__PURE__ */ jsx10(RenderSvg, {
|
|
853
1014
|
...makeTriangle({ length, direction, edgeRoundness, cornerRadius }),
|
|
854
1015
|
...props
|
|
855
1016
|
});
|
|
@@ -863,6 +1024,7 @@ export {
|
|
|
863
1024
|
makeHeart,
|
|
864
1025
|
makeEllipse,
|
|
865
1026
|
makeCircle,
|
|
1027
|
+
makeArrow,
|
|
866
1028
|
Triangle,
|
|
867
1029
|
Star,
|
|
868
1030
|
Rect,
|
|
@@ -870,5 +1032,6 @@ export {
|
|
|
870
1032
|
Pie,
|
|
871
1033
|
Heart,
|
|
872
1034
|
Ellipse,
|
|
873
|
-
Circle
|
|
1035
|
+
Circle,
|
|
1036
|
+
Arrow
|
|
874
1037
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export type { Instruction } from '@remotion/paths';
|
|
2
|
+
export { Arrow, ArrowProps } from './components/arrow';
|
|
2
3
|
export { Circle, CircleProps } from './components/circle';
|
|
3
4
|
export { Ellipse, EllipseProps } from './components/ellipse';
|
|
4
5
|
export { Heart, HeartProps } from './components/heart';
|
|
@@ -7,6 +8,7 @@ export { Polygon, PolygonProps } from './components/polygon';
|
|
|
7
8
|
export { Rect, RectProps } from './components/rect';
|
|
8
9
|
export { Star, StarProps } from './components/star';
|
|
9
10
|
export { Triangle, TriangleProps } from './components/triangle';
|
|
11
|
+
export { MakeArrowProps, makeArrow } from './utils/make-arrow';
|
|
10
12
|
export { MakeCircleProps, makeCircle } from './utils/make-circle';
|
|
11
13
|
export { MakeEllipseOptions, makeEllipse } from './utils/make-ellipse';
|
|
12
14
|
export { MakeHeartProps, makeHeart } from './utils/make-heart';
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.makeTriangle = exports.makeStar = exports.makeRect = exports.makePolygon = exports.makePie = exports.makeHeart = exports.makeEllipse = exports.makeCircle = exports.Triangle = exports.Star = exports.Rect = exports.Polygon = exports.Pie = exports.Heart = exports.Ellipse = exports.Circle = void 0;
|
|
3
|
+
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;
|
|
4
|
+
const arrow_1 = require("./components/arrow");
|
|
5
|
+
Object.defineProperty(exports, "Arrow", { enumerable: true, get: function () { return arrow_1.Arrow; } });
|
|
4
6
|
const circle_1 = require("./components/circle");
|
|
5
7
|
Object.defineProperty(exports, "Circle", { enumerable: true, get: function () { return circle_1.Circle; } });
|
|
6
8
|
const ellipse_1 = require("./components/ellipse");
|
|
@@ -17,6 +19,8 @@ const star_1 = require("./components/star");
|
|
|
17
19
|
Object.defineProperty(exports, "Star", { enumerable: true, get: function () { return star_1.Star; } });
|
|
18
20
|
const triangle_1 = require("./components/triangle");
|
|
19
21
|
Object.defineProperty(exports, "Triangle", { enumerable: true, get: function () { return triangle_1.Triangle; } });
|
|
22
|
+
const make_arrow_1 = require("./utils/make-arrow");
|
|
23
|
+
Object.defineProperty(exports, "makeArrow", { enumerable: true, get: function () { return make_arrow_1.makeArrow; } });
|
|
20
24
|
const make_circle_1 = require("./utils/make-circle");
|
|
21
25
|
Object.defineProperty(exports, "makeCircle", { enumerable: true, get: function () { return make_circle_1.makeCircle; } });
|
|
22
26
|
const make_ellipse_1 = require("./utils/make-ellipse");
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { ShapeInfo } from './shape-info';
|
|
2
|
+
type ArrowDirection = 'right' | 'left' | 'up' | 'down';
|
|
3
|
+
export type MakeArrowProps = {
|
|
4
|
+
length?: number;
|
|
5
|
+
headWidth?: number;
|
|
6
|
+
headLength?: number;
|
|
7
|
+
shaftWidth?: number;
|
|
8
|
+
direction?: ArrowDirection;
|
|
9
|
+
cornerRadius?: number;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* @description Generates an SVG path for an arrow shape.
|
|
13
|
+
* @param {Number} length The total length of the arrow along its direction axis. Default 300.
|
|
14
|
+
* @param {Number} headWidth The width of the arrowhead at its widest point. Default 185.
|
|
15
|
+
* @param {Number} headLength The length of the arrowhead portion. Default 120.
|
|
16
|
+
* @param {Number} shaftWidth The width of the arrow shaft. Default 80.
|
|
17
|
+
* @param {string} direction The direction the arrow points. Default 'right'.
|
|
18
|
+
* @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius.
|
|
19
|
+
* @see [Documentation](https://www.remotion.dev/docs/shapes/make-arrow)
|
|
20
|
+
*/
|
|
21
|
+
export declare const makeArrow: ({ length, headWidth, headLength, shaftWidth, direction, cornerRadius, }: MakeArrowProps) => ShapeInfo;
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.makeArrow = void 0;
|
|
4
|
+
const paths_1 = require("@remotion/paths");
|
|
5
|
+
const unitDir = (from, to) => {
|
|
6
|
+
const dx = to[0] - from[0];
|
|
7
|
+
const dy = to[1] - from[1];
|
|
8
|
+
const len = Math.sqrt(dx * dx + dy * dy);
|
|
9
|
+
return len === 0 ? [0, 0] : [dx / len, dy / len];
|
|
10
|
+
};
|
|
11
|
+
const buildArrowPath = (points, roundedIndices, cornerRadius) => {
|
|
12
|
+
const n = points.length;
|
|
13
|
+
if (cornerRadius === 0) {
|
|
14
|
+
return [
|
|
15
|
+
{ type: 'M', x: points[0][0], y: points[0][1] },
|
|
16
|
+
...points
|
|
17
|
+
.slice(1)
|
|
18
|
+
.map(([x, y]) => ({ type: 'L', x, y })),
|
|
19
|
+
{ type: 'Z' },
|
|
20
|
+
];
|
|
21
|
+
}
|
|
22
|
+
// Corner 0 is always rounded — start at its depart point
|
|
23
|
+
const d0 = unitDir(points[0], points[1]);
|
|
24
|
+
const startX = points[0][0] + d0[0] * cornerRadius;
|
|
25
|
+
const startY = points[0][1] + d0[1] * cornerRadius;
|
|
26
|
+
const instrs = [{ type: 'M', x: startX, y: startY }];
|
|
27
|
+
for (let i = 1; i < n; i++) {
|
|
28
|
+
const curr = points[i];
|
|
29
|
+
if (roundedIndices.has(i)) {
|
|
30
|
+
const prev = points[i - 1];
|
|
31
|
+
const next = points[(i + 1) % n];
|
|
32
|
+
const dIn = unitDir(prev, curr);
|
|
33
|
+
const dOut = unitDir(curr, next);
|
|
34
|
+
instrs.push({
|
|
35
|
+
type: 'L',
|
|
36
|
+
x: curr[0] - dIn[0] * cornerRadius,
|
|
37
|
+
y: curr[1] - dIn[1] * cornerRadius,
|
|
38
|
+
}, {
|
|
39
|
+
type: 'C',
|
|
40
|
+
cp1x: curr[0],
|
|
41
|
+
cp1y: curr[1],
|
|
42
|
+
cp2x: curr[0],
|
|
43
|
+
cp2y: curr[1],
|
|
44
|
+
x: curr[0] + dOut[0] * cornerRadius,
|
|
45
|
+
y: curr[1] + dOut[1] * cornerRadius,
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
instrs.push({ type: 'L', x: curr[0], y: curr[1] });
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
// Close back to corner 0 (rounded)
|
|
53
|
+
const dIn0 = unitDir(points[n - 1], points[0]);
|
|
54
|
+
instrs.push({
|
|
55
|
+
type: 'L',
|
|
56
|
+
x: points[0][0] - dIn0[0] * cornerRadius,
|
|
57
|
+
y: points[0][1] - dIn0[1] * cornerRadius,
|
|
58
|
+
}, {
|
|
59
|
+
type: 'C',
|
|
60
|
+
cp1x: points[0][0],
|
|
61
|
+
cp1y: points[0][1],
|
|
62
|
+
cp2x: points[0][0],
|
|
63
|
+
cp2y: points[0][1],
|
|
64
|
+
x: startX,
|
|
65
|
+
y: startY,
|
|
66
|
+
}, { type: 'Z' });
|
|
67
|
+
return instrs;
|
|
68
|
+
};
|
|
69
|
+
/**
|
|
70
|
+
* @description Generates an SVG path for an arrow shape.
|
|
71
|
+
* @param {Number} length The total length of the arrow along its direction axis. Default 300.
|
|
72
|
+
* @param {Number} headWidth The width of the arrowhead at its widest point. Default 185.
|
|
73
|
+
* @param {Number} headLength The length of the arrowhead portion. Default 120.
|
|
74
|
+
* @param {Number} shaftWidth The width of the arrow shaft. Default 80.
|
|
75
|
+
* @param {string} direction The direction the arrow points. Default 'right'.
|
|
76
|
+
* @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius.
|
|
77
|
+
* @see [Documentation](https://www.remotion.dev/docs/shapes/make-arrow)
|
|
78
|
+
*/
|
|
79
|
+
const makeArrow = ({ length = 300, headWidth = 185, headLength = 120, shaftWidth = 80, direction = 'right', cornerRadius = 0, }) => {
|
|
80
|
+
if (length <= 0 || headWidth <= 0 || headLength <= 0 || shaftWidth <= 0) {
|
|
81
|
+
throw new Error('All dimension parameters ("length", "headWidth", "headLength", "shaftWidth") must be positive numbers');
|
|
82
|
+
}
|
|
83
|
+
if (headWidth < shaftWidth) {
|
|
84
|
+
throw new Error(`"headWidth" must be greater than or equal to "shaftWidth", got headWidth=${headWidth} and shaftWidth=${shaftWidth}`);
|
|
85
|
+
}
|
|
86
|
+
if (headLength > length) {
|
|
87
|
+
throw new Error(`"headLength" must be less than or equal to "length", got headLength=${headLength} and length=${length}`);
|
|
88
|
+
}
|
|
89
|
+
const shaftTop = (headWidth - shaftWidth) / 2;
|
|
90
|
+
const shaftBottom = shaftTop + shaftWidth;
|
|
91
|
+
const shaftEnd = length - headLength;
|
|
92
|
+
// Points for a right-pointing arrow (clockwise from top-left of shaft)
|
|
93
|
+
const rightPoints = [
|
|
94
|
+
[0, shaftTop],
|
|
95
|
+
[shaftEnd, shaftTop],
|
|
96
|
+
[shaftEnd, 0],
|
|
97
|
+
[length, headWidth / 2],
|
|
98
|
+
[shaftEnd, headWidth],
|
|
99
|
+
[shaftEnd, shaftBottom],
|
|
100
|
+
[0, shaftBottom],
|
|
101
|
+
];
|
|
102
|
+
let points;
|
|
103
|
+
let width;
|
|
104
|
+
let height;
|
|
105
|
+
if (direction === 'right') {
|
|
106
|
+
points = rightPoints;
|
|
107
|
+
width = length;
|
|
108
|
+
height = headWidth;
|
|
109
|
+
}
|
|
110
|
+
else if (direction === 'left') {
|
|
111
|
+
// Mirror x: x -> length - x
|
|
112
|
+
points = rightPoints.map(([x, y]) => [length - x, y]);
|
|
113
|
+
width = length;
|
|
114
|
+
height = headWidth;
|
|
115
|
+
}
|
|
116
|
+
else if (direction === 'down') {
|
|
117
|
+
// Rotate 90° clockwise: swap axes so the tip points down
|
|
118
|
+
points = [
|
|
119
|
+
[shaftTop, 0],
|
|
120
|
+
[shaftBottom, 0],
|
|
121
|
+
[shaftBottom, shaftEnd],
|
|
122
|
+
[headWidth, shaftEnd],
|
|
123
|
+
[headWidth / 2, length],
|
|
124
|
+
[0, shaftEnd],
|
|
125
|
+
[shaftTop, shaftEnd],
|
|
126
|
+
];
|
|
127
|
+
width = headWidth;
|
|
128
|
+
height = length;
|
|
129
|
+
}
|
|
130
|
+
else {
|
|
131
|
+
// up: mirror of down (y -> length - y)
|
|
132
|
+
points = [
|
|
133
|
+
[shaftTop, length],
|
|
134
|
+
[shaftBottom, length],
|
|
135
|
+
[shaftBottom, headLength],
|
|
136
|
+
[headWidth, headLength],
|
|
137
|
+
[headWidth / 2, 0],
|
|
138
|
+
[0, headLength],
|
|
139
|
+
[shaftTop, headLength],
|
|
140
|
+
];
|
|
141
|
+
width = headWidth;
|
|
142
|
+
height = length;
|
|
143
|
+
}
|
|
144
|
+
// Round the back corners and all 3 arrowhead tips, but not the inner
|
|
145
|
+
// shaft-to-head junctions so the shaft edges stay straight.
|
|
146
|
+
// right/left: back = 0,6; head tips = 2,3,4; inner junctions (skip) = 1,5
|
|
147
|
+
// up/down: back = 0,1; head tips = 3,4,5; inner junctions (skip) = 2,6
|
|
148
|
+
const roundedIndices = direction === 'right' || direction === 'left'
|
|
149
|
+
? new Set([0, 2, 3, 4, 6])
|
|
150
|
+
: new Set([0, 1, 3, 4, 5]);
|
|
151
|
+
const instructions = buildArrowPath(points, roundedIndices, cornerRadius);
|
|
152
|
+
const path = (0, paths_1.serializeInstructions)(instructions);
|
|
153
|
+
return {
|
|
154
|
+
path,
|
|
155
|
+
instructions,
|
|
156
|
+
width,
|
|
157
|
+
height,
|
|
158
|
+
transformOrigin: `${width / 2} ${height / 2}`,
|
|
159
|
+
};
|
|
160
|
+
};
|
|
161
|
+
exports.makeArrow = makeArrow;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"url": "https://github.com/remotion-dev/remotion/tree/main/packages/shapes"
|
|
4
4
|
},
|
|
5
5
|
"name": "@remotion/shapes",
|
|
6
|
-
"version": "4.0.
|
|
6
|
+
"version": "4.0.433",
|
|
7
7
|
"description": "Generate SVG shapes",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"sideEffects": false,
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"react": "19.2.3",
|
|
36
36
|
"react-dom": "19.2.3",
|
|
37
37
|
"@happy-dom/global-registrator": "14.5.1",
|
|
38
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
38
|
+
"@remotion/eslint-config-internal": "4.0.433",
|
|
39
39
|
"eslint": "9.19.0",
|
|
40
40
|
"@typescript/native-preview": "7.0.0-dev.20260217.1"
|
|
41
41
|
},
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"react-dom": ">=16.8.0"
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
|
-
"@remotion/paths": "4.0.
|
|
55
|
+
"@remotion/paths": "4.0.433"
|
|
56
56
|
},
|
|
57
57
|
"homepage": "https://www.remotion.dev/docs/shapes"
|
|
58
58
|
}
|