react-two.js 0.1.0 → 0.2.0

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 (22) hide show
  1. package/README.md +331 -64
  2. package/dist/ArcSegment.d.ts +5 -5
  3. package/dist/Circle.d.ts +5 -5
  4. package/dist/Ellipse.d.ts +4 -4
  5. package/dist/Group.d.ts +5 -5
  6. package/dist/Image.d.ts +49 -0
  7. package/dist/ImageSequence.d.ts +6 -6
  8. package/dist/Line.d.ts +5 -5
  9. package/dist/LinearGradient.d.ts +5 -5
  10. package/dist/Path.d.ts +7 -5
  11. package/dist/Points.d.ts +7 -4
  12. package/dist/Polygon.d.ts +5 -5
  13. package/dist/RadialGradient.d.ts +4 -4
  14. package/dist/Rectangle.d.ts +7 -5
  15. package/dist/RoundedRectangle.d.ts +6 -6
  16. package/dist/Sprite.d.ts +6 -6
  17. package/dist/Star.d.ts +5 -5
  18. package/dist/Text.d.ts +8 -8
  19. package/dist/Texture.d.ts +4 -4
  20. package/dist/main.d.ts +1 -0
  21. package/dist/react-two-main.es.js +372 -430
  22. package/package.json +21 -6
package/dist/Path.d.ts CHANGED
@@ -5,8 +5,8 @@ export type PathProps = ShapeProps | 'fill' | 'stroke' | 'linewidth' | 'opacity'
5
5
  export type RefPath = Instance;
6
6
  export declare const Path: React.ForwardRefExoticComponent<{
7
7
  renderer?: {
8
- type: "element" | string;
9
- elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
8
+ type: "element" | "group" | "path" | "text" | "points" | string;
9
+ elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
10
10
  onBeforeRender?: () => void;
11
11
  onAfterRender?: () => void;
12
12
  } | undefined;
@@ -24,8 +24,8 @@ export declare const Path: React.ForwardRefExoticComponent<{
24
24
  linewidth?: number | undefined;
25
25
  opacity?: number | undefined;
26
26
  visible?: boolean | undefined;
27
- cap?: string | undefined;
28
- join?: string | undefined;
27
+ cap?: import("two.js/src/path").CapProperties | undefined;
28
+ join?: import("two.js/src/path").JoinProperties | undefined;
29
29
  miter?: number | undefined;
30
30
  closed?: boolean | undefined;
31
31
  curved?: boolean | undefined;
@@ -38,6 +38,8 @@ export declare const Path: React.ForwardRefExoticComponent<{
38
38
  vertices?: import("two.js/src/anchor").Anchor[] | undefined;
39
39
  } & {
40
40
  manual?: boolean;
41
+ x?: number;
42
+ y?: number;
41
43
  } & {
42
44
  children?: React.ReactNode | undefined;
43
- } & React.RefAttributes<Instance | null>>;
45
+ } & React.RefAttributes<Instance>>;
package/dist/Points.d.ts CHANGED
@@ -3,8 +3,8 @@ import type { Points as Instance } from 'two.js/src/shapes/points';
3
3
  export type RefPoints = Instance;
4
4
  export declare const Points: React.ForwardRefExoticComponent<{
5
5
  renderer?: {
6
- type: "element" | string;
7
- elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
6
+ type: "element" | "group" | "path" | "text" | "points" | string;
7
+ elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
8
8
  onBeforeRender?: () => void;
9
9
  onAfterRender?: () => void;
10
10
  } | undefined;
@@ -27,9 +27,12 @@ export declare const Points: React.ForwardRefExoticComponent<{
27
27
  dashes?: (number[] & {
28
28
  offset?: number;
29
29
  }) | undefined;
30
- vertices?: (import("two.js/src/vector").Vector | import("two.js/src/anchor").Anchor)[] | undefined;
30
+ vertices?: (import("two.js/src/anchor").Anchor | import("two.js/src/vector").Vector)[] | undefined;
31
31
  size?: number | undefined;
32
32
  sizeAttenuation?: boolean | undefined;
33
+ } & {
34
+ x?: number;
35
+ y?: number;
33
36
  } & {
34
37
  children?: React.ReactNode | undefined;
35
- } & React.RefAttributes<Instance | null>>;
38
+ } & React.RefAttributes<Instance>>;
package/dist/Polygon.d.ts CHANGED
@@ -3,8 +3,8 @@ import type { Polygon as Instance } from 'two.js/src/shapes/polygon';
3
3
  export type RefPolygon = Instance;
4
4
  export declare const Polygon: React.ForwardRefExoticComponent<{
5
5
  renderer?: {
6
- type: "element" | string;
7
- elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
6
+ type: "element" | "group" | "path" | "text" | "points" | string;
7
+ elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
8
8
  onBeforeRender?: () => void;
9
9
  onAfterRender?: () => void;
10
10
  } | undefined;
@@ -22,8 +22,8 @@ export declare const Polygon: React.ForwardRefExoticComponent<{
22
22
  linewidth?: number | undefined;
23
23
  opacity?: number | undefined;
24
24
  visible?: boolean | undefined;
25
- cap?: string | undefined;
26
- join?: string | undefined;
25
+ cap?: import("two.js/src/path").CapProperties | undefined;
26
+ join?: import("two.js/src/path").JoinProperties | undefined;
27
27
  miter?: number | undefined;
28
28
  closed?: boolean | undefined;
29
29
  curved?: boolean | undefined;
@@ -43,4 +43,4 @@ export declare const Polygon: React.ForwardRefExoticComponent<{
43
43
  radius?: number;
44
44
  } & {
45
45
  children?: React.ReactNode | undefined;
46
- } & React.RefAttributes<Instance | null>>;
46
+ } & React.RefAttributes<Instance>>;
package/dist/RadialGradient.d.ts CHANGED
@@ -3,15 +3,15 @@ import type { RadialGradient as Instance } from 'two.js/src/effects/radial-gradi
3
3
  export type RefRadialGradient = Instance;
4
4
  export declare const RadialGradient: React.ForwardRefExoticComponent<{
5
5
  renderer?: {
6
- type: "element" | string;
7
- elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
6
+ type: "element" | "group" | "path" | "text" | "points" | string;
7
+ elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
8
8
  onBeforeRender?: () => void;
9
9
  onAfterRender?: () => void;
10
10
  } | undefined;
11
11
  id?: string | undefined;
12
12
  className?: string | undefined;
13
- spread?: "repeat" | "pad" | "reflect" | undefined;
14
- units?: "userSpaceOnUse" | "objectBoundingBox" | undefined;
13
+ spread?: import("two.js/src/effects/gradient").SpreadProperties | undefined;
14
+ units?: import("two.js/src/effects/gradient").UnitsProperties | undefined;
15
15
  stops?: import("two.js/src/effects/stop").Stop[] | undefined;
16
16
  center?: import("two.js/src/vector").Vector | undefined;
17
17
  radius?: number | undefined;
package/dist/Rectangle.d.ts CHANGED
@@ -1,10 +1,12 @@
1
1
  import React from 'react';
2
2
  import type { Rectangle as Instance } from 'two.js/src/shapes/rectangle';
3
+ import { PathProps } from './Path';
4
+ export type RectangleProps = PathProps | 'width' | 'height';
3
5
  export type RefRectangle = Instance;
4
6
  export declare const Rectangle: React.ForwardRefExoticComponent<{
5
7
  renderer?: {
6
- type: "element" | string;
7
- elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
8
+ type: "element" | "group" | "path" | "text" | "points" | string;
9
+ elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
8
10
  onBeforeRender?: () => void;
9
11
  onAfterRender?: () => void;
10
12
  } | undefined;
@@ -22,8 +24,8 @@ export declare const Rectangle: React.ForwardRefExoticComponent<{
22
24
  linewidth?: number | undefined;
23
25
  opacity?: number | undefined;
24
26
  visible?: boolean | undefined;
25
- cap?: string | undefined;
26
- join?: string | undefined;
27
+ cap?: import("two.js/src/path").CapProperties | undefined;
28
+ join?: import("two.js/src/path").JoinProperties | undefined;
27
29
  miter?: number | undefined;
28
30
  closed?: boolean | undefined;
29
31
  curved?: boolean | undefined;
@@ -41,4 +43,4 @@ export declare const Rectangle: React.ForwardRefExoticComponent<{
41
43
  y?: number;
42
44
  } & {
43
45
  children?: React.ReactNode | undefined;
44
- } & React.RefAttributes<Instance | null>>;
46
+ } & React.RefAttributes<Instance>>;
package/dist/RoundedRectangle.d.ts CHANGED
@@ -3,8 +3,8 @@ import type { RoundedRectangle as Instance } from 'two.js/src/shapes/rounded-rec
3
3
  export type RefRoundedRectangle = Instance;
4
4
  export declare const RoundedRectangle: React.ForwardRefExoticComponent<{
5
5
  renderer?: {
6
- type: "element" | string;
7
- elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
6
+ type: "element" | "group" | "path" | "text" | "points" | string;
7
+ elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
8
8
  onBeforeRender?: () => void;
9
9
  onAfterRender?: () => void;
10
10
  } | undefined;
@@ -22,8 +22,8 @@ export declare const RoundedRectangle: React.ForwardRefExoticComponent<{
22
22
  linewidth?: number | undefined;
23
23
  opacity?: number | undefined;
24
24
  visible?: boolean | undefined;
25
- cap?: string | undefined;
26
- join?: string | undefined;
25
+ cap?: import("two.js/src/path").CapProperties | undefined;
26
+ join?: import("two.js/src/path").JoinProperties | undefined;
27
27
  miter?: number | undefined;
28
28
  closed?: boolean | undefined;
29
29
  curved?: boolean | undefined;
@@ -34,7 +34,7 @@ export declare const RoundedRectangle: React.ForwardRefExoticComponent<{
34
34
  offset?: number;
35
35
  }) | undefined;
36
36
  vertices?: import("two.js/src/anchor").Anchor[] | undefined;
37
- radius?: number | undefined;
37
+ radius?: number | import("two.js/src/vector").Vector | undefined;
38
38
  width?: number | undefined;
39
39
  height?: number | undefined;
40
40
  } & {
@@ -42,4 +42,4 @@ export declare const RoundedRectangle: React.ForwardRefExoticComponent<{
42
42
  y?: number;
43
43
  } & {
44
44
  children?: React.ReactNode | undefined;
45
- } & React.RefAttributes<Instance | null>>;
45
+ } & React.RefAttributes<Instance>>;
package/dist/Sprite.d.ts CHANGED
@@ -3,8 +3,8 @@ import type { Sprite as Instance } from 'two.js/src/effects/sprite';
3
3
  export type RefSprite = Instance;
4
4
  export declare const Sprite: React.ForwardRefExoticComponent<{
5
5
  renderer?: {
6
- type: "element" | string;
7
- elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
6
+ type: "element" | "group" | "path" | "text" | "points" | string;
7
+ elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
8
8
  onBeforeRender?: () => void;
9
9
  onAfterRender?: () => void;
10
10
  } | undefined;
@@ -22,8 +22,8 @@ export declare const Sprite: React.ForwardRefExoticComponent<{
22
22
  linewidth?: number | undefined;
23
23
  opacity?: number | undefined;
24
24
  visible?: boolean | undefined;
25
- cap?: string | undefined;
26
- join?: string | undefined;
25
+ cap?: import("two.js/src/path").CapProperties | undefined;
26
+ join?: import("two.js/src/path").JoinProperties | undefined;
27
27
  miter?: number | undefined;
28
28
  closed?: boolean | undefined;
29
29
  curved?: boolean | undefined;
@@ -36,9 +36,9 @@ export declare const Sprite: React.ForwardRefExoticComponent<{
36
36
  vertices?: import("two.js/src/anchor").Anchor[] | undefined;
37
37
  width?: number | undefined;
38
38
  height?: number | undefined;
39
+ texture?: import("two.js/src/effects/texture").Texture | undefined;
39
40
  frameRate?: number | undefined;
40
41
  index?: number | undefined;
41
- texture?: import("two.js/src/effects/texture").Texture | undefined;
42
42
  columns?: number | undefined;
43
43
  rows?: number | undefined;
44
44
  } & {
@@ -48,4 +48,4 @@ export declare const Sprite: React.ForwardRefExoticComponent<{
48
48
  autoPlay?: boolean;
49
49
  } & {
50
50
  children?: React.ReactNode | undefined;
51
- } & React.RefAttributes<Instance | null>>;
51
+ } & React.RefAttributes<Instance>>;
package/dist/Star.d.ts CHANGED
@@ -3,8 +3,8 @@ import type { Star as Instance } from 'two.js/src/shapes/star';
3
3
  export type RefStar = Instance;
4
4
  export declare const Star: React.ForwardRefExoticComponent<{
5
5
  renderer?: {
6
- type: "element" | string;
7
- elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
6
+ type: "element" | "group" | "path" | "text" | "points" | string;
7
+ elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
8
8
  onBeforeRender?: () => void;
9
9
  onAfterRender?: () => void;
10
10
  } | undefined;
@@ -22,8 +22,8 @@ export declare const Star: React.ForwardRefExoticComponent<{
22
22
  linewidth?: number | undefined;
23
23
  opacity?: number | undefined;
24
24
  visible?: boolean | undefined;
25
- cap?: string | undefined;
26
- join?: string | undefined;
25
+ cap?: import("two.js/src/path").CapProperties | undefined;
26
+ join?: import("two.js/src/path").JoinProperties | undefined;
27
27
  miter?: number | undefined;
28
28
  closed?: boolean | undefined;
29
29
  curved?: boolean | undefined;
@@ -42,4 +42,4 @@ export declare const Star: React.ForwardRefExoticComponent<{
42
42
  y?: number;
43
43
  } & {
44
44
  children?: React.ReactNode | undefined;
45
- } & React.RefAttributes<Instance | null>>;
45
+ } & React.RefAttributes<Instance>>;
package/dist/Text.d.ts CHANGED
@@ -4,8 +4,8 @@ export type RefText = Instance;
4
4
  export declare const Text: React.ForwardRefExoticComponent<{
5
5
  value?: string | undefined;
6
6
  renderer?: {
7
- type: "element" | string;
8
- elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
7
+ type: "element" | "group" | "path" | "text" | "points" | string;
8
+ elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
9
9
  onBeforeRender?: () => void;
10
10
  onAfterRender?: () => void;
11
11
  } | undefined;
@@ -29,15 +29,15 @@ export declare const Text: React.ForwardRefExoticComponent<{
29
29
  size?: number | undefined;
30
30
  family?: string | undefined;
31
31
  leading?: number | undefined;
32
- alignment?: "center" | "left" | "right" | undefined;
33
- style?: "normal" | "italic" | undefined;
32
+ alignment?: import("two.js/src/text").AlignmentProperties | undefined;
33
+ style?: import("two.js/src/text").StyleProperties | undefined;
34
34
  weight?: string | number | undefined;
35
- decoration?: "underline" | "strikethrough" | "none" | undefined;
36
- direction?: "ltr" | "rtl" | undefined;
37
- baseline?: "baseline" | "top" | "middle" | "bottom" | undefined;
35
+ decoration?: import("two.js/src/text").DecorationProperties | undefined;
36
+ direction?: import("two.js/src/text").DirectionProperties | undefined;
37
+ baseline?: import("two.js/src/text").BaselineProperties | undefined;
38
38
  } & {
39
39
  x?: number;
40
40
  y?: number;
41
41
  } & {
42
42
  children?: React.ReactNode | undefined;
43
- } & React.RefAttributes<Instance | null>>;
43
+ } & React.RefAttributes<Instance>>;
package/dist/Texture.d.ts CHANGED
@@ -5,14 +5,14 @@ export type TextureProps = ElementProps | 'src' | 'loaded' | 'repeat' | 'scale'
5
5
  export type RefTexture = Instance;
6
6
  export declare const Texture: React.ForwardRefExoticComponent<{
7
7
  renderer?: {
8
- type: "element" | string;
9
- elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
8
+ type: "element" | "group" | "path" | "text" | "points" | string;
9
+ elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement | SVGPatternElement;
10
10
  onBeforeRender?: () => void;
11
11
  onAfterRender?: () => void;
12
12
  } | undefined;
13
13
  id?: string | undefined;
14
14
  className?: string | undefined;
15
- repeat?: string | undefined;
15
+ repeat?: import("two.js/src/effects/texture").RepeatProperties | undefined;
16
16
  src?: string | undefined;
17
17
  loaded?: boolean | undefined;
18
18
  offset?: import("two.js/src/vector").Vector | undefined;
@@ -21,4 +21,4 @@ export declare const Texture: React.ForwardRefExoticComponent<{
21
21
  source?: string | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement;
22
22
  } & {
23
23
  children?: React.ReactNode | undefined;
24
- } & React.RefAttributes<Instance | null>>;
24
+ } & React.RefAttributes<Instance>>;
package/dist/main.d.ts CHANGED
@@ -7,6 +7,7 @@ export { Text, type RefText } from './Text';
7
7
  export { ArcSegment, type RefArcSegment } from './ArcSegment';
8
8
  export { Circle, type RefCircle } from './Circle';
9
9
  export { Ellipse, type RefEllipse } from './Ellipse';
10
+ export { Image, type RefImage } from './Image';
10
11
  export { ImageSequence, type RefImageSequence } from './ImageSequence';
11
12
  export { Line, type RefLine } from './Line';
12
13
  export { Polygon, type RefPolygon } from './Polygon';