@remotion/shapes 3.3.39 → 3.3.41
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/render-svg.d.ts +1 -1
- package/dist/components/render-svg.js +12 -1
- package/dist/index.d.ts +1 -1
- package/dist/utils/join-points.d.ts +1 -1
- package/dist/utils/join-points.js +34 -26
- package/dist/utils/make-circle.js +7 -7
- package/dist/utils/make-ellipse.js +5 -5
- package/dist/utils/make-pie.d.ts +1 -1
- package/dist/utils/make-pie.js +3 -3
- package/dist/utils/make-rect.js +3 -3
- package/dist/utils/make-star.js +3 -3
- package/dist/utils/make-triangle.js +3 -3
- package/dist/utils/shape-info.d.ts +1 -1
- package/package.json +5 -2
- package/package/dist/Ellipse.d.ts +0 -10
- package/package/dist/Ellipse.js +0 -12
- package/package/dist/circle.d.ts +0 -10
- package/package/dist/circle.js +0 -13
- package/package/dist/components/circle.d.ts +0 -5
- package/package/dist/components/circle.js +0 -10
- package/package/dist/components/ellipse.d.ts +0 -5
- package/package/dist/components/ellipse.js +0 -10
- package/package/dist/components/rect.d.ts +0 -5
- package/package/dist/components/rect.js +0 -10
- package/package/dist/components/render-svg.d.ts +0 -12
- package/package/dist/components/render-svg.js +0 -21
- package/package/dist/components/return-type.d.ts +0 -5
- package/package/dist/components/return-type.js +0 -2
- package/package/dist/components/shape-info.d.ts +0 -5
- package/package/dist/components/shape-info.js +0 -2
- package/package/dist/components/triangle.d.ts +0 -5
- package/package/dist/components/triangle.js +0 -10
- package/package/dist/index.d.ts +0 -8
- package/package/dist/index.js +0 -19
- package/package/dist/make-circle.d.ts +0 -4
- package/package/dist/make-circle.js +0 -9
- package/package/dist/make-ellipse.d.ts +0 -5
- package/package/dist/make-ellipse.js +0 -7
- package/package/dist/make-rect.d.ts +0 -5
- package/package/dist/make-rect.js +0 -9
- package/package/dist/make-triangle.d.ts +0 -6
- package/package/dist/make-triangle.js +0 -14
- package/package/dist/rect.d.ts +0 -8
- package/package/dist/rect.js +0 -12
- package/package/dist/triangle.d.ts +0 -9
- package/package/dist/triangle.js +0 -13
- package/package/dist/utils/make-circle.d.ts +0 -5
- package/package/dist/utils/make-circle.js +0 -12
- package/package/dist/utils/make-ellipse.d.ts +0 -6
- package/package/dist/utils/make-ellipse.js +0 -12
- package/package/dist/utils/make-rect.d.ts +0 -6
- package/package/dist/utils/make-rect.js +0 -12
- package/package/dist/utils/make-triangle.d.ts +0 -6
- package/package/dist/utils/make-triangle.js +0 -57
- package/package/dist/utils/shape-info.d.ts +0 -6
- package/package/dist/utils/shape-info.js +0 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import type { Instruction } from '@remotion/paths/dist/helpers/types';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import type { Instruction } from '../utils/instructions';
|
|
3
3
|
export declare type AllShapesProps = Omit<React.SVGProps<SVGPathElement>, 'width' | 'height' | 'd'> & {
|
|
4
4
|
debug?: boolean;
|
|
5
5
|
pathStyle?: React.CSSProperties;
|
|
@@ -22,7 +22,18 @@ const RenderSvg = ({ width, height, path, style, pathStyle, transformOrigin, deb
|
|
|
22
22
|
const prevInstruction = index === 0
|
|
23
23
|
? instructions[instructions.length - 1]
|
|
24
24
|
: instructions[index - 1];
|
|
25
|
-
if (prevInstruction.type === '
|
|
25
|
+
if (prevInstruction.type === 'V' ||
|
|
26
|
+
prevInstruction.type === 'H' ||
|
|
27
|
+
prevInstruction.type === 'a' ||
|
|
28
|
+
prevInstruction.type === 'Z' ||
|
|
29
|
+
prevInstruction.type === 't' ||
|
|
30
|
+
prevInstruction.type === 'q' ||
|
|
31
|
+
prevInstruction.type === 'l' ||
|
|
32
|
+
prevInstruction.type === 'c' ||
|
|
33
|
+
prevInstruction.type === 'm' ||
|
|
34
|
+
prevInstruction.type === 'h' ||
|
|
35
|
+
prevInstruction.type === 's' ||
|
|
36
|
+
prevInstruction.type === 'v') {
|
|
26
37
|
return null;
|
|
27
38
|
}
|
|
28
39
|
const prevX = prevInstruction.x;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
+
export { Instruction } from '@remotion/paths';
|
|
1
2
|
export { Circle, CircleProps } from './components/circle';
|
|
2
3
|
export { Ellipse, EllipseProps } from './components/ellipse';
|
|
3
4
|
export { Pie, PieProps } from './components/pie';
|
|
4
5
|
export { Rect, RectProps } from './components/rect';
|
|
5
6
|
export { Star, StarProps } from './components/star';
|
|
6
7
|
export { Triangle, TriangleProps } from './components/triangle';
|
|
7
|
-
export { Instruction } from './utils/instructions';
|
|
8
8
|
export { makeCircle, MakeCircleProps } from './utils/make-circle';
|
|
9
9
|
export { makeEllipse, MakeEllipseOptions } from './utils/make-ellipse';
|
|
10
10
|
export { makePie, MakePieProps } from './utils/make-pie';
|
|
@@ -27,17 +27,21 @@ const joinPoints = (points, { edgeRoundness, cornerRadius, roundCornerStrategy,
|
|
|
27
27
|
];
|
|
28
28
|
if (i === 0) {
|
|
29
29
|
if (edgeRoundness !== null) {
|
|
30
|
-
return
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
return [
|
|
31
|
+
{
|
|
32
|
+
type: 'M',
|
|
33
|
+
x: middleOfLine[0],
|
|
34
|
+
y: middleOfLine[1],
|
|
35
|
+
},
|
|
36
|
+
];
|
|
35
37
|
}
|
|
36
|
-
return
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
return [
|
|
39
|
+
{
|
|
40
|
+
type: 'M',
|
|
41
|
+
x,
|
|
42
|
+
y,
|
|
43
|
+
},
|
|
44
|
+
];
|
|
41
45
|
}
|
|
42
46
|
const prevVector = [x - prevPoint[0], y - prevPoint[1]];
|
|
43
47
|
const nextVector = [nextPoint[0] - x, nextPoint[1] - y];
|
|
@@ -46,11 +50,13 @@ const joinPoints = (points, { edgeRoundness, cornerRadius, roundCornerStrategy,
|
|
|
46
50
|
}
|
|
47
51
|
if (edgeRoundness === null) {
|
|
48
52
|
if (cornerRadius === 0) {
|
|
49
|
-
return
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
53
|
+
return [
|
|
54
|
+
{
|
|
55
|
+
type: 'L',
|
|
56
|
+
x,
|
|
57
|
+
y,
|
|
58
|
+
},
|
|
59
|
+
];
|
|
54
60
|
}
|
|
55
61
|
const prevVectorMinusRadius = shortenVector(prevVector, cornerRadius);
|
|
56
62
|
const prevVectorLenght = scaleVectorToLength(prevVector, cornerRadius);
|
|
@@ -71,8 +77,8 @@ const joinPoints = (points, { edgeRoundness, cornerRadius, roundCornerStrategy,
|
|
|
71
77
|
rx: cornerRadius,
|
|
72
78
|
ry: cornerRadius,
|
|
73
79
|
xAxisRotation: 0,
|
|
74
|
-
|
|
75
|
-
|
|
80
|
+
dx: prevVectorLenght[0] + nextVectorMinusRadius[0],
|
|
81
|
+
dy: prevVectorLenght[1] + nextVectorMinusRadius[1],
|
|
76
82
|
largeArcFlag: false,
|
|
77
83
|
sweepFlag: true,
|
|
78
84
|
}
|
|
@@ -95,15 +101,17 @@ const joinPoints = (points, { edgeRoundness, cornerRadius, roundCornerStrategy,
|
|
|
95
101
|
middleOfLine[0] - nextVector[0] * edgeRoundness * 0.5,
|
|
96
102
|
middleOfLine[1] - nextVector[1] * edgeRoundness * 0.5,
|
|
97
103
|
];
|
|
98
|
-
return
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
104
|
+
return [
|
|
105
|
+
{
|
|
106
|
+
type: 'C',
|
|
107
|
+
cp1x: controlPoint1[0],
|
|
108
|
+
cp1y: controlPoint1[1],
|
|
109
|
+
cp2x: controlPoint2[0],
|
|
110
|
+
cp2y: controlPoint2[1],
|
|
111
|
+
x: middleOfLine[0],
|
|
112
|
+
y: middleOfLine[1],
|
|
113
|
+
},
|
|
114
|
+
];
|
|
107
115
|
})
|
|
108
116
|
.flat(1);
|
|
109
117
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.makeCircle = void 0;
|
|
4
|
-
const
|
|
4
|
+
const paths_1 = require("@remotion/paths");
|
|
5
5
|
const makeCircle = ({ radius }) => {
|
|
6
6
|
const instructions = [
|
|
7
7
|
{
|
|
@@ -16,8 +16,8 @@ const makeCircle = ({ radius }) => {
|
|
|
16
16
|
xAxisRotation: 0,
|
|
17
17
|
largeArcFlag: true,
|
|
18
18
|
sweepFlag: false,
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
dx: radius * 2,
|
|
20
|
+
dy: 0,
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
type: 'a',
|
|
@@ -26,14 +26,14 @@ const makeCircle = ({ radius }) => {
|
|
|
26
26
|
xAxisRotation: 0,
|
|
27
27
|
largeArcFlag: true,
|
|
28
28
|
sweepFlag: false,
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
dx: -radius * 2,
|
|
30
|
+
dy: 0,
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
|
-
type: '
|
|
33
|
+
type: 'Z',
|
|
34
34
|
},
|
|
35
35
|
];
|
|
36
|
-
const path = (0,
|
|
36
|
+
const path = (0, paths_1.serializeInstructions)(instructions);
|
|
37
37
|
return {
|
|
38
38
|
height: radius * 2,
|
|
39
39
|
width: radius * 2,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.makeEllipse = void 0;
|
|
4
|
-
const
|
|
4
|
+
const paths_1 = require("@remotion/paths");
|
|
5
5
|
const makeEllipse = ({ rx, ry }) => {
|
|
6
6
|
const instructions = [
|
|
7
7
|
{
|
|
@@ -16,14 +16,14 @@ const makeEllipse = ({ rx, ry }) => {
|
|
|
16
16
|
xAxisRotation: 0,
|
|
17
17
|
largeArcFlag: true,
|
|
18
18
|
sweepFlag: false,
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
dx: 1,
|
|
20
|
+
dy: 0,
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
|
-
type: '
|
|
23
|
+
type: 'Z',
|
|
24
24
|
},
|
|
25
25
|
];
|
|
26
|
-
const path = (0,
|
|
26
|
+
const path = (0, paths_1.serializeInstructions)(instructions);
|
|
27
27
|
return {
|
|
28
28
|
width: rx * 2,
|
|
29
29
|
height: ry * 2,
|
package/dist/utils/make-pie.d.ts
CHANGED
package/dist/utils/make-pie.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.makePie = void 0;
|
|
4
|
-
const
|
|
4
|
+
const paths_1 = require("@remotion/paths");
|
|
5
5
|
const getCoord = ({ counterClockwise, actualProgress, rotation, radius, coord, }) => {
|
|
6
6
|
const factor = counterClockwise ? -1 : 1;
|
|
7
7
|
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,
|
|
|
94
94
|
: null,
|
|
95
95
|
closePath
|
|
96
96
|
? {
|
|
97
|
-
type: '
|
|
97
|
+
type: 'Z',
|
|
98
98
|
}
|
|
99
99
|
: null,
|
|
100
100
|
].filter(Boolean);
|
|
101
|
-
const path = (0,
|
|
101
|
+
const path = (0, paths_1.serializeInstructions)(instructions);
|
|
102
102
|
return {
|
|
103
103
|
height: radius * 2,
|
|
104
104
|
width: radius * 2,
|
package/dist/utils/make-rect.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.makeRect = void 0;
|
|
4
|
-
const
|
|
4
|
+
const paths_1 = require("@remotion/paths");
|
|
5
5
|
const join_points_1 = require("./join-points");
|
|
6
6
|
const makeRect = ({ width, height, edgeRoundness = null, cornerRadius = 0, }) => {
|
|
7
7
|
const transformOrigin = [width / 2, height / 2];
|
|
@@ -14,10 +14,10 @@ const makeRect = ({ width, height, edgeRoundness = null, cornerRadius = 0, }) =>
|
|
|
14
14
|
[0, 0],
|
|
15
15
|
], { edgeRoundness, cornerRadius, roundCornerStrategy: 'arc' }),
|
|
16
16
|
{
|
|
17
|
-
type: '
|
|
17
|
+
type: 'Z',
|
|
18
18
|
},
|
|
19
19
|
];
|
|
20
|
-
const path = (0,
|
|
20
|
+
const path = (0, paths_1.serializeInstructions)(instructions);
|
|
21
21
|
return {
|
|
22
22
|
width,
|
|
23
23
|
height,
|
package/dist/utils/make-star.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// Copied from https://stackblitz.com/edit/svg-star-generator?file=index.js
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.makeStar = void 0;
|
|
5
|
-
const
|
|
5
|
+
const paths_1 = require("@remotion/paths");
|
|
6
6
|
const join_points_1 = require("./join-points");
|
|
7
7
|
const star = ({ centerX, centerY, points, innerRadius, outerRadius, cornerRadius, edgeRoundness, }) => {
|
|
8
8
|
const degreeIncrement = (Math.PI * 2) / (points * 2);
|
|
@@ -21,7 +21,7 @@ const star = ({ centerX, centerY, points, innerRadius, outerRadius, cornerRadius
|
|
|
21
21
|
cornerRadius,
|
|
22
22
|
roundCornerStrategy: cornerRadius > 0 ? 'bezier' : 'arc',
|
|
23
23
|
}),
|
|
24
|
-
{ type: '
|
|
24
|
+
{ type: 'Z' },
|
|
25
25
|
];
|
|
26
26
|
};
|
|
27
27
|
const makeStar = ({ points, innerRadius, outerRadius, cornerRadius = 0, edgeRoundness = null, }) => {
|
|
@@ -39,7 +39,7 @@ const makeStar = ({ points, innerRadius, outerRadius, cornerRadius = 0, edgeRoun
|
|
|
39
39
|
edgeRoundness,
|
|
40
40
|
});
|
|
41
41
|
return {
|
|
42
|
-
path: (0,
|
|
42
|
+
path: (0, paths_1.serializeInstructions)(starPathInstructions),
|
|
43
43
|
width,
|
|
44
44
|
height,
|
|
45
45
|
transformOrigin: `${centerX} ${centerY}`,
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// Copied from https://stackblitz.com/edit/react-triangle-svg?file=index.js
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.makeTriangle = void 0;
|
|
5
|
-
const
|
|
5
|
+
const paths_1 = require("@remotion/paths");
|
|
6
6
|
const join_points_1 = require("./join-points");
|
|
7
7
|
const makeTriangle = ({ length, direction = 'right', edgeRoundness = null, cornerRadius = 0, }) => {
|
|
8
8
|
const longerDimension = length;
|
|
@@ -52,10 +52,10 @@ const makeTriangle = ({ length, direction = 'right', edgeRoundness = null, corne
|
|
|
52
52
|
roundCornerStrategy: 'bezier',
|
|
53
53
|
}),
|
|
54
54
|
{
|
|
55
|
-
type: '
|
|
55
|
+
type: 'Z',
|
|
56
56
|
},
|
|
57
57
|
];
|
|
58
|
-
const path = (0,
|
|
58
|
+
const path = (0, paths_1.serializeInstructions)(instructions);
|
|
59
59
|
return {
|
|
60
60
|
path,
|
|
61
61
|
instructions,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remotion/shapes",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.41",
|
|
4
4
|
"description": "Utility functions and components for SVG shapes",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -44,5 +44,8 @@
|
|
|
44
44
|
"react": ">=16.8.0",
|
|
45
45
|
"react-dom": ">=16.8.0"
|
|
46
46
|
},
|
|
47
|
-
"
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"@remotion/paths": "3.3.41"
|
|
49
|
+
},
|
|
50
|
+
"gitHead": "8e408247d151ac824864acf357782f10c89ed5f5"
|
|
48
51
|
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare type EllipseProps = React.SVGProps<SVGPathElement> & {
|
|
3
|
-
rx: number;
|
|
4
|
-
ry: number;
|
|
5
|
-
fill?: string;
|
|
6
|
-
stroke?: string;
|
|
7
|
-
strokeWidth?: number;
|
|
8
|
-
style?: React.CSSProperties;
|
|
9
|
-
};
|
|
10
|
-
export declare const Ellipse: React.FC<EllipseProps>;
|
package/package/dist/Ellipse.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Ellipse = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const make_ellipse_1 = require("./make-ellipse");
|
|
6
|
-
const Ellipse = ({ fill, stroke, strokeWidth, rx, ry, style, }) => {
|
|
7
|
-
return ((0, jsx_runtime_1.jsx)("svg", { width: rx * 2, height: ry * 2, viewBox: `0 0 ${rx * 2} ${ry * 2}`, xmlns: "http://www.w3.org/2000/svg", style: style, "data-shape-type": "ellipse", children: (0, jsx_runtime_1.jsx)("path", { d: (0, make_ellipse_1.makeEllipse)({
|
|
8
|
-
rx,
|
|
9
|
-
ry,
|
|
10
|
-
}), fill: fill, stroke: stroke, strokeWidth: strokeWidth }) }));
|
|
11
|
-
};
|
|
12
|
-
exports.Ellipse = Ellipse;
|
package/package/dist/circle.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare type CircleProps = React.SVGProps<SVGPathElement> & {
|
|
3
|
-
width: number;
|
|
4
|
-
height: number;
|
|
5
|
-
fill?: string;
|
|
6
|
-
stroke?: string;
|
|
7
|
-
strokeWidth?: number;
|
|
8
|
-
style?: React.CSSProperties;
|
|
9
|
-
};
|
|
10
|
-
export declare const Circle: React.FC<CircleProps>;
|
package/package/dist/circle.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Circle = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const make_circle_1 = require("./make-circle");
|
|
6
|
-
const Circle = ({ width, height, fill, stroke, strokeWidth, style, }) => {
|
|
7
|
-
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": "circle", children: (0, jsx_runtime_1.jsx)("path", { d: (0, make_circle_1.makeCircle)({
|
|
8
|
-
cx: 50,
|
|
9
|
-
cy: 50,
|
|
10
|
-
radius: 50,
|
|
11
|
-
}), fill: fill, stroke: stroke, strokeWidth: strokeWidth }) }));
|
|
12
|
-
};
|
|
13
|
-
exports.Circle = Circle;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Circle = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const make_circle_1 = require("../utils/make-circle");
|
|
6
|
-
const render_svg_1 = require("./render-svg");
|
|
7
|
-
const Circle = ({ radius, ...props }) => {
|
|
8
|
-
return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_circle_1.makeCircle)({ radius }), ...props });
|
|
9
|
-
};
|
|
10
|
-
exports.Circle = Circle;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { MakeEllipseOptions } from '../utils/make-ellipse';
|
|
3
|
-
import type { AllShapesProps } from './render-svg';
|
|
4
|
-
export declare type EllipseProps = MakeEllipseOptions & AllShapesProps;
|
|
5
|
-
export declare const Ellipse: React.FC<EllipseProps>;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Ellipse = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const make_ellipse_1 = require("../utils/make-ellipse");
|
|
6
|
-
const render_svg_1 = require("./render-svg");
|
|
7
|
-
const Ellipse = ({ rx, ry, ...props }) => {
|
|
8
|
-
return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_ellipse_1.makeEllipse)({ rx, ry }), ...props });
|
|
9
|
-
};
|
|
10
|
-
exports.Ellipse = Ellipse;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Rect = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const make_rect_1 = require("../utils/make-rect");
|
|
6
|
-
const render_svg_1 = require("./render-svg");
|
|
7
|
-
const Rect = ({ width, height, ...props }) => {
|
|
8
|
-
return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_rect_1.makeRect)({ height, width }), ...props });
|
|
9
|
-
};
|
|
10
|
-
exports.Rect = Rect;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare type AllShapesProps = Omit<React.SVGProps<SVGPathElement>, 'width' | 'height' | 'd'> & {
|
|
3
|
-
pathStyle?: React.CSSProperties;
|
|
4
|
-
};
|
|
5
|
-
export declare const RenderSvg: ({ width, height, path, style, pathStyle, transformOrigin, ...props }: {
|
|
6
|
-
width: number;
|
|
7
|
-
height: number;
|
|
8
|
-
path: string;
|
|
9
|
-
transformOrigin: string;
|
|
10
|
-
} & Omit<React.SVGProps<SVGPathElement>, "width" | "height" | "d"> & {
|
|
11
|
-
pathStyle?: React.CSSProperties | undefined;
|
|
12
|
-
}) => JSX.Element;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.RenderSvg = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_1 = require("react");
|
|
6
|
-
const RenderSvg = ({ width, height, path, style, pathStyle, transformOrigin, ...props }) => {
|
|
7
|
-
const actualStyle = (0, react_1.useMemo)(() => {
|
|
8
|
-
return {
|
|
9
|
-
overflow: 'visible',
|
|
10
|
-
...(style !== null && style !== void 0 ? style : {}),
|
|
11
|
-
};
|
|
12
|
-
}, [style]);
|
|
13
|
-
const actualPathStyle = (0, react_1.useMemo)(() => {
|
|
14
|
-
return {
|
|
15
|
-
transformBox: 'fill-box',
|
|
16
|
-
...(pathStyle !== null && pathStyle !== void 0 ? pathStyle : {}),
|
|
17
|
-
};
|
|
18
|
-
}, [pathStyle]);
|
|
19
|
-
return ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: actualStyle, children: (0, jsx_runtime_1.jsx)("path", { "transform-origin": transformOrigin, d: path, style: actualPathStyle, ...props }) }));
|
|
20
|
-
};
|
|
21
|
-
exports.RenderSvg = RenderSvg;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { MakeTriangleProps } from '../utils/make-triangle';
|
|
3
|
-
import type { AllShapesProps } from './render-svg';
|
|
4
|
-
export declare type TriangleProps = MakeTriangleProps & AllShapesProps;
|
|
5
|
-
export declare const Triangle: React.FC<TriangleProps>;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Triangle = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const make_triangle_1 = require("../utils/make-triangle");
|
|
6
|
-
const render_svg_1 = require("./render-svg");
|
|
7
|
-
const Triangle = ({ length, direction, ...props }) => {
|
|
8
|
-
return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_triangle_1.makeTriangle)({ length, direction }), ...props });
|
|
9
|
-
};
|
|
10
|
-
exports.Triangle = Triangle;
|
package/package/dist/index.d.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export { Circle, CircleProps } from './components/circle';
|
|
2
|
-
export { Ellipse, EllipseProps } from './components/ellipse';
|
|
3
|
-
export { Rect, RectProps } from './components/rect';
|
|
4
|
-
export { Triangle, TriangleProps } from './components/triangle';
|
|
5
|
-
export { makeCircle, MakeCircleProps } from './utils/make-circle';
|
|
6
|
-
export { makeEllipse, MakeEllipseOptions } from './utils/make-ellipse';
|
|
7
|
-
export { makeRect, MakeRectOptions } from './utils/make-rect';
|
|
8
|
-
export { makeTriangle, MakeTriangleProps } from './utils/make-triangle';
|
package/package/dist/index.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.makeTriangle = exports.makeRect = exports.makeEllipse = exports.makeCircle = exports.Triangle = exports.Rect = exports.Ellipse = exports.Circle = void 0;
|
|
4
|
-
var circle_1 = require("./components/circle");
|
|
5
|
-
Object.defineProperty(exports, "Circle", { enumerable: true, get: function () { return circle_1.Circle; } });
|
|
6
|
-
var ellipse_1 = require("./components/ellipse");
|
|
7
|
-
Object.defineProperty(exports, "Ellipse", { enumerable: true, get: function () { return ellipse_1.Ellipse; } });
|
|
8
|
-
var rect_1 = require("./components/rect");
|
|
9
|
-
Object.defineProperty(exports, "Rect", { enumerable: true, get: function () { return rect_1.Rect; } });
|
|
10
|
-
var triangle_1 = require("./components/triangle");
|
|
11
|
-
Object.defineProperty(exports, "Triangle", { enumerable: true, get: function () { return triangle_1.Triangle; } });
|
|
12
|
-
var make_circle_1 = require("./utils/make-circle");
|
|
13
|
-
Object.defineProperty(exports, "makeCircle", { enumerable: true, get: function () { return make_circle_1.makeCircle; } });
|
|
14
|
-
var make_ellipse_1 = require("./utils/make-ellipse");
|
|
15
|
-
Object.defineProperty(exports, "makeEllipse", { enumerable: true, get: function () { return make_ellipse_1.makeEllipse; } });
|
|
16
|
-
var make_rect_1 = require("./utils/make-rect");
|
|
17
|
-
Object.defineProperty(exports, "makeRect", { enumerable: true, get: function () { return make_rect_1.makeRect; } });
|
|
18
|
-
var make_triangle_1 = require("./utils/make-triangle");
|
|
19
|
-
Object.defineProperty(exports, "makeTriangle", { enumerable: true, get: function () { return make_triangle_1.makeTriangle; } });
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.makeCircle = void 0;
|
|
4
|
-
const makeCircle = ({ radius }) => {
|
|
5
|
-
const cx = radius;
|
|
6
|
-
const cy = radius;
|
|
7
|
-
return `M ${cx} ${cy} m -${radius} 0 a ${radius} ${radius} 0 1 0 ${radius * 2} 0 ${radius} ${radius} 0 1 0 ${-radius * 2} 0`;
|
|
8
|
-
};
|
|
9
|
-
exports.makeCircle = makeCircle;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.makeRect = void 0;
|
|
4
|
-
const makeRect = ({ width, height }) => {
|
|
5
|
-
const x = 0;
|
|
6
|
-
const y = 0;
|
|
7
|
-
return `M ${x} ${y} l ${width} 0 l 0 ${height} l ${-width} 0 Z`;
|
|
8
|
-
};
|
|
9
|
-
exports.makeRect = makeRect;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
// Copied from https://stackblitz.com/edit/react-triangle-svg?file=index.js
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.makeTriangle = void 0;
|
|
5
|
-
const makeTriangle = ({ width, height, direction = 'right', }) => {
|
|
6
|
-
const points = {
|
|
7
|
-
top: [`${width / 2} 0`, 'L', `0 ${height}`, 'L', `${width} ${height}`],
|
|
8
|
-
right: [`0 0`, 'L', `0 ${height}`, 'L', `${width} ${height / 2}`],
|
|
9
|
-
bottom: [`0 0`, 'L', `${width} 0`, 'L', `${width / 2} ${height}`],
|
|
10
|
-
left: [`${width} 0`, 'L', `${width} ${height}`, 'L', `0 ${height / 2}`],
|
|
11
|
-
};
|
|
12
|
-
return `M ${points[direction].join(' ')} z`;
|
|
13
|
-
};
|
|
14
|
-
exports.makeTriangle = makeTriangle;
|
package/package/dist/rect.d.ts
DELETED
package/package/dist/rect.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Rect = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const make_rect_1 = require("./make-rect");
|
|
6
|
-
const Rect = ({ width, height, fill, style }) => {
|
|
7
|
-
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": "rect", children: (0, jsx_runtime_1.jsx)("path", { d: (0, make_rect_1.makeRect)({
|
|
8
|
-
width,
|
|
9
|
-
height,
|
|
10
|
-
}), fill: fill }) }));
|
|
11
|
-
};
|
|
12
|
-
exports.Rect = Rect;
|
package/package/dist/triangle.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Triangle = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const make_triangle_1 = require("./make-triangle");
|
|
6
|
-
const Triangle = ({ width, height, fill, direction, style, }) => {
|
|
7
|
-
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": "triangle", children: (0, jsx_runtime_1.jsx)("path", { d: (0, make_triangle_1.makeTriangle)({
|
|
8
|
-
width,
|
|
9
|
-
height,
|
|
10
|
-
direction,
|
|
11
|
-
}), fill: fill }) }));
|
|
12
|
-
};
|
|
13
|
-
exports.Triangle = Triangle;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.makeCircle = void 0;
|
|
4
|
-
const makeCircle = ({ radius }) => {
|
|
5
|
-
return {
|
|
6
|
-
height: radius * 2,
|
|
7
|
-
width: radius * 2,
|
|
8
|
-
path: `M ${radius} ${radius} m -${radius} 0 a ${radius} ${radius} 0 1 0 ${radius * 2} 0 ${radius} ${radius} 0 1 0 ${-radius * 2} 0`,
|
|
9
|
-
transformOrigin: `${radius} ${radius}`,
|
|
10
|
-
};
|
|
11
|
-
};
|
|
12
|
-
exports.makeCircle = makeCircle;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.makeEllipse = void 0;
|
|
4
|
-
const makeEllipse = ({ rx, ry }) => {
|
|
5
|
-
return {
|
|
6
|
-
width: rx * 2,
|
|
7
|
-
height: ry * 2,
|
|
8
|
-
path: `M ${rx} ${0} a ${rx} ${ry} 0 1 0 1 0`,
|
|
9
|
-
transformOrigin: `${rx} ${ry}`,
|
|
10
|
-
};
|
|
11
|
-
};
|
|
12
|
-
exports.makeEllipse = makeEllipse;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.makeRect = void 0;
|
|
4
|
-
const makeRect = ({ width, height }) => {
|
|
5
|
-
return {
|
|
6
|
-
width,
|
|
7
|
-
height,
|
|
8
|
-
path: `M 0 0 l ${width} 0 l 0 ${height} l ${-width} 0 Z`,
|
|
9
|
-
transformOrigin: `${width / 2} ${height / 2}`,
|
|
10
|
-
};
|
|
11
|
-
};
|
|
12
|
-
exports.makeRect = makeRect;
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
// Copied from https://stackblitz.com/edit/react-triangle-svg?file=index.js
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.makeTriangle = void 0;
|
|
5
|
-
const makeTriangle = ({ length, direction = 'right', }) => {
|
|
6
|
-
const longerDimension = length;
|
|
7
|
-
const shorterSize = Math.sqrt(length ** 2 * 0.75); // Calculated on paper;
|
|
8
|
-
const points = {
|
|
9
|
-
top: [
|
|
10
|
-
`${longerDimension / 2} 0`,
|
|
11
|
-
'L',
|
|
12
|
-
`0 ${shorterSize}`,
|
|
13
|
-
'L',
|
|
14
|
-
`${longerDimension} ${shorterSize}`,
|
|
15
|
-
],
|
|
16
|
-
right: [
|
|
17
|
-
`0 0`,
|
|
18
|
-
'L',
|
|
19
|
-
`0 ${longerDimension}`,
|
|
20
|
-
'L',
|
|
21
|
-
`${shorterSize} ${longerDimension / 2}`,
|
|
22
|
-
],
|
|
23
|
-
bottom: [
|
|
24
|
-
`0 0`,
|
|
25
|
-
'L',
|
|
26
|
-
`${longerDimension} 0`,
|
|
27
|
-
'L',
|
|
28
|
-
`${longerDimension / 2} ${shorterSize}`,
|
|
29
|
-
],
|
|
30
|
-
left: [
|
|
31
|
-
`${shorterSize} 0`,
|
|
32
|
-
'L',
|
|
33
|
-
`${shorterSize} ${longerDimension}`,
|
|
34
|
-
'L',
|
|
35
|
-
`0 ${longerDimension / 2}`,
|
|
36
|
-
],
|
|
37
|
-
};
|
|
38
|
-
const transformOriginX = {
|
|
39
|
-
left: (shorterSize / 3) * 2,
|
|
40
|
-
right: shorterSize / 3,
|
|
41
|
-
top: longerDimension / 2,
|
|
42
|
-
bottom: longerDimension / 2,
|
|
43
|
-
}[direction];
|
|
44
|
-
const transformOriginY = {
|
|
45
|
-
top: (shorterSize / 3) * 2,
|
|
46
|
-
bottom: shorterSize / 3,
|
|
47
|
-
left: longerDimension / 2,
|
|
48
|
-
right: longerDimension / 2,
|
|
49
|
-
}[direction];
|
|
50
|
-
return {
|
|
51
|
-
path: `M ${points[direction].join(' ')} z`,
|
|
52
|
-
width: direction === 'top' || direction === 'bottom' ? length : shorterSize,
|
|
53
|
-
height: direction === 'top' || direction === 'bottom' ? shorterSize : length,
|
|
54
|
-
transformOrigin: `${transformOriginX} ${transformOriginY}`,
|
|
55
|
-
};
|
|
56
|
-
};
|
|
57
|
-
exports.makeTriangle = makeTriangle;
|