@remotion/shapes 3.3.39 → 3.3.40

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.
Files changed (56) hide show
  1. package/dist/components/render-svg.d.ts +1 -1
  2. package/dist/components/render-svg.js +12 -1
  3. package/dist/index.d.ts +1 -1
  4. package/dist/utils/join-points.d.ts +1 -1
  5. package/dist/utils/join-points.js +34 -26
  6. package/dist/utils/make-circle.js +7 -7
  7. package/dist/utils/make-ellipse.js +5 -5
  8. package/dist/utils/make-pie.d.ts +1 -1
  9. package/dist/utils/make-pie.js +3 -3
  10. package/dist/utils/make-rect.js +3 -3
  11. package/dist/utils/make-star.js +3 -3
  12. package/dist/utils/make-triangle.js +3 -3
  13. package/dist/utils/shape-info.d.ts +1 -1
  14. package/package.json +5 -2
  15. package/package/dist/Ellipse.d.ts +0 -10
  16. package/package/dist/Ellipse.js +0 -12
  17. package/package/dist/circle.d.ts +0 -10
  18. package/package/dist/circle.js +0 -13
  19. package/package/dist/components/circle.d.ts +0 -5
  20. package/package/dist/components/circle.js +0 -10
  21. package/package/dist/components/ellipse.d.ts +0 -5
  22. package/package/dist/components/ellipse.js +0 -10
  23. package/package/dist/components/rect.d.ts +0 -5
  24. package/package/dist/components/rect.js +0 -10
  25. package/package/dist/components/render-svg.d.ts +0 -12
  26. package/package/dist/components/render-svg.js +0 -21
  27. package/package/dist/components/return-type.d.ts +0 -5
  28. package/package/dist/components/return-type.js +0 -2
  29. package/package/dist/components/shape-info.d.ts +0 -5
  30. package/package/dist/components/shape-info.js +0 -2
  31. package/package/dist/components/triangle.d.ts +0 -5
  32. package/package/dist/components/triangle.js +0 -10
  33. package/package/dist/index.d.ts +0 -8
  34. package/package/dist/index.js +0 -19
  35. package/package/dist/make-circle.d.ts +0 -4
  36. package/package/dist/make-circle.js +0 -9
  37. package/package/dist/make-ellipse.d.ts +0 -5
  38. package/package/dist/make-ellipse.js +0 -7
  39. package/package/dist/make-rect.d.ts +0 -5
  40. package/package/dist/make-rect.js +0 -9
  41. package/package/dist/make-triangle.d.ts +0 -6
  42. package/package/dist/make-triangle.js +0 -14
  43. package/package/dist/rect.d.ts +0 -8
  44. package/package/dist/rect.js +0 -12
  45. package/package/dist/triangle.d.ts +0 -9
  46. package/package/dist/triangle.js +0 -13
  47. package/package/dist/utils/make-circle.d.ts +0 -5
  48. package/package/dist/utils/make-circle.js +0 -12
  49. package/package/dist/utils/make-ellipse.d.ts +0 -6
  50. package/package/dist/utils/make-ellipse.js +0 -12
  51. package/package/dist/utils/make-rect.d.ts +0 -6
  52. package/package/dist/utils/make-rect.js +0 -12
  53. package/package/dist/utils/make-triangle.d.ts +0 -6
  54. package/package/dist/utils/make-triangle.js +0 -57
  55. package/package/dist/utils/shape-info.d.ts +0 -6
  56. 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 === 'z') {
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';
@@ -1,4 +1,4 @@
1
- import type { Instruction } from './instructions';
1
+ import type { Instruction } from '@remotion/paths';
2
2
  export declare const joinPoints: (points: [
3
3
  number,
4
4
  number
@@ -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
- type: 'M',
32
- x: middleOfLine[0],
33
- y: middleOfLine[1],
34
- };
30
+ return [
31
+ {
32
+ type: 'M',
33
+ x: middleOfLine[0],
34
+ y: middleOfLine[1],
35
+ },
36
+ ];
35
37
  }
36
- return {
37
- type: 'M',
38
- x,
39
- y,
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
- type: 'L',
51
- x,
52
- y,
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
- x: prevVectorLenght[0] + nextVectorMinusRadius[0],
75
- y: prevVectorLenght[1] + nextVectorMinusRadius[1],
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
- type: 'C',
100
- cp1x: controlPoint1[0],
101
- cp1y: controlPoint1[1],
102
- cp2x: controlPoint2[0],
103
- cp2y: controlPoint2[1],
104
- x: middleOfLine[0],
105
- y: middleOfLine[1],
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 instructions_1 = require("./instructions");
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
- x: radius * 2,
20
- y: 0,
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
- x: -radius * 2,
30
- y: 0,
29
+ dx: -radius * 2,
30
+ dy: 0,
31
31
  },
32
32
  {
33
- type: 'z',
33
+ type: 'Z',
34
34
  },
35
35
  ];
36
- const path = (0, instructions_1.serializeInstructions)(instructions);
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 instructions_1 = require("./instructions");
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
- x: 1,
20
- y: 0,
19
+ dx: 1,
20
+ dy: 0,
21
21
  },
22
22
  {
23
- type: 'z',
23
+ type: 'Z',
24
24
  },
25
25
  ];
26
- const path = (0, instructions_1.serializeInstructions)(instructions);
26
+ const path = (0, paths_1.serializeInstructions)(instructions);
27
27
  return {
28
28
  width: rx * 2,
29
29
  height: ry * 2,
@@ -1,4 +1,4 @@
1
- import type { Instruction } from './instructions';
1
+ import type { Instruction } from '@remotion/paths';
2
2
  export declare type MakePieProps = {
3
3
  radius: number;
4
4
  progress: number;
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.makePie = void 0;
4
- const instructions_1 = require("./instructions");
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: 'z',
97
+ type: 'Z',
98
98
  }
99
99
  : null,
100
100
  ].filter(Boolean);
101
- const path = (0, instructions_1.serializeInstructions)(instructions);
101
+ const path = (0, paths_1.serializeInstructions)(instructions);
102
102
  return {
103
103
  height: radius * 2,
104
104
  width: radius * 2,
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.makeRect = void 0;
4
- const instructions_1 = require("./instructions");
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: 'z',
17
+ type: 'Z',
18
18
  },
19
19
  ];
20
- const path = (0, instructions_1.serializeInstructions)(instructions);
20
+ const path = (0, paths_1.serializeInstructions)(instructions);
21
21
  return {
22
22
  width,
23
23
  height,
@@ -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 instructions_1 = require("./instructions");
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: 'z' },
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, instructions_1.serializeInstructions)(starPathInstructions),
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 instructions_1 = require("./instructions");
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: 'z',
55
+ type: 'Z',
56
56
  },
57
57
  ];
58
- const path = (0, instructions_1.serializeInstructions)(instructions);
58
+ const path = (0, paths_1.serializeInstructions)(instructions);
59
59
  return {
60
60
  path,
61
61
  instructions,
@@ -1,4 +1,4 @@
1
- import type { Instruction } from './instructions';
1
+ import type { Instruction } from '@remotion/paths';
2
2
  export declare type ShapeInfo = {
3
3
  path: string;
4
4
  width: number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@remotion/shapes",
3
- "version": "3.3.39",
3
+ "version": "3.3.40",
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
- "gitHead": "5a07260074fe3a6db2cdba0001503c665951414d"
47
+ "dependencies": {
48
+ "@remotion/paths": "3.3.40"
49
+ },
50
+ "gitHead": "be5f606a81761f7f8e1e191ebabd5f8d225d8c09"
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>;
@@ -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;
@@ -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>;
@@ -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,5 +0,0 @@
1
- import React from 'react';
2
- import type { MakeCircleProps } from '../utils/make-circle';
3
- import type { AllShapesProps } from './render-svg';
4
- export declare type CircleProps = MakeCircleProps & AllShapesProps;
5
- export declare const Circle: React.FC<CircleProps>;
@@ -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,5 +0,0 @@
1
- import React from 'react';
2
- import type { MakeRectOptions } from '../utils/make-rect';
3
- import type { AllShapesProps } from './render-svg';
4
- export declare type RectProps = MakeRectOptions & AllShapesProps;
5
- export declare const Rect: React.FC<RectProps>;
@@ -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
- export declare type ShapeInfo = {
2
- path: string;
3
- width: string;
4
- height: string;
5
- };
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,5 +0,0 @@
1
- export declare type ShapeInfo = {
2
- path: string;
3
- width: number;
4
- height: number;
5
- };
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -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;
@@ -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';
@@ -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,4 +0,0 @@
1
- export declare type MakeCircleProps = {
2
- radius: number;
3
- };
4
- export declare const makeCircle: ({ radius }: MakeCircleProps) => string;
@@ -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,5 +0,0 @@
1
- export declare type MakeEllipseOptions = {
2
- rx: number;
3
- ry: number;
4
- };
5
- export declare const makeEllipse: ({ rx, ry }: MakeEllipseOptions) => string;
@@ -1,7 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.makeEllipse = void 0;
4
- const makeEllipse = ({ rx = 50, ry = 50 }) => {
5
- return `M ${rx} ${0} a ${rx} ${ry} 0 1 0 1 0`;
6
- };
7
- exports.makeEllipse = makeEllipse;
@@ -1,5 +0,0 @@
1
- export declare type MakeRectOptions = {
2
- width: number;
3
- height: number;
4
- };
5
- export declare const makeRect: ({ width, height }: MakeRectOptions) => string;
@@ -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,6 +0,0 @@
1
- export declare type MakeTriangleProps = {
2
- width: number;
3
- height: number;
4
- direction: 'right' | 'left' | 'top' | 'bottom';
5
- };
6
- export declare const makeTriangle: ({ width, height, direction, }: MakeTriangleProps) => string;
@@ -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;
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- export declare type SquareProps = {
3
- width: number;
4
- height: number;
5
- fill?: string;
6
- style?: React.CSSProperties;
7
- };
8
- export declare const Rect: React.FC<SquareProps>;
@@ -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;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- export declare type TriangleProps = {
3
- width: number;
4
- height: number;
5
- fill?: string;
6
- direction: 'right' | 'left' | 'top' | 'bottom';
7
- style?: React.CSSProperties;
8
- };
9
- export declare const Triangle: React.FC<TriangleProps>;
@@ -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,5 +0,0 @@
1
- import type { ShapeInfo } from './shape-info';
2
- export declare type MakeCircleProps = {
3
- radius: number;
4
- };
5
- export declare const makeCircle: ({ radius }: MakeCircleProps) => ShapeInfo;
@@ -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,6 +0,0 @@
1
- import type { ShapeInfo } from './shape-info';
2
- export declare type MakeEllipseOptions = {
3
- rx: number;
4
- ry: number;
5
- };
6
- export declare const makeEllipse: ({ rx, ry }: MakeEllipseOptions) => ShapeInfo;
@@ -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,6 +0,0 @@
1
- import type { ShapeInfo } from './shape-info';
2
- export declare type MakeRectOptions = {
3
- width: number;
4
- height: number;
5
- };
6
- export declare const makeRect: ({ width, height }: MakeRectOptions) => ShapeInfo;
@@ -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,6 +0,0 @@
1
- import type { ShapeInfo } from './shape-info';
2
- export declare type MakeTriangleProps = {
3
- length: number;
4
- direction: 'right' | 'left' | 'top' | 'bottom';
5
- };
6
- export declare const makeTriangle: ({ length, direction, }: MakeTriangleProps) => ShapeInfo;
@@ -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;
@@ -1,6 +0,0 @@
1
- export declare type ShapeInfo = {
2
- path: string;
3
- width: number;
4
- height: number;
5
- transformOrigin: string;
6
- };
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });