react-two.js 0.2.2 → 0.2.3
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/react-two-main.es.js +121 -123
- package/package.json +4 -4
|
@@ -1,22 +1,21 @@
|
|
|
1
1
|
import { jsx as g, Fragment as R } from "react/jsx-runtime";
|
|
2
|
-
import w, { createContext as G, useContext as L, useRef as
|
|
2
|
+
import w, { createContext as G, useContext as L, useRef as E, useEffect as l, useState as b, useImperativeHandle as y, useLayoutEffect as k, useMemo as I } from "react";
|
|
3
3
|
import m from "two.js";
|
|
4
|
-
const
|
|
5
|
-
const { two: i } = h(),
|
|
4
|
+
const S = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(S), j = (r, o = []) => {
|
|
5
|
+
const { two: i } = h(), s = E(r);
|
|
6
6
|
l(() => {
|
|
7
|
-
|
|
7
|
+
s.current = r;
|
|
8
8
|
}, [r, ...o]), l(() => {
|
|
9
9
|
if (!i)
|
|
10
10
|
return;
|
|
11
11
|
let c = 0;
|
|
12
|
-
return i.bind("update",
|
|
13
|
-
function
|
|
14
|
-
|
|
15
|
-
c += t / 1e3, (e = a.current) == null || e.call(a, c, t);
|
|
12
|
+
return i.bind("update", a), () => i.unbind("update", a);
|
|
13
|
+
function a(n, t) {
|
|
14
|
+
c += t / 1e3, s.current?.(c, t);
|
|
16
15
|
}
|
|
17
16
|
}, [i, ...o]);
|
|
18
17
|
}, H = (r) => {
|
|
19
|
-
const { two: o, parent: i } = h(),
|
|
18
|
+
const { two: o, parent: i } = h(), s = E(null), [c, a] = b({
|
|
20
19
|
two: o,
|
|
21
20
|
parent: i,
|
|
22
21
|
width: 0,
|
|
@@ -28,16 +27,15 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
|
|
|
28
27
|
};
|
|
29
28
|
if (!o) {
|
|
30
29
|
let f = function() {
|
|
31
|
-
const p = d.width !== v,
|
|
32
|
-
p && (v = d.width), (p ||
|
|
30
|
+
const p = d.width !== v, P = !1;
|
|
31
|
+
p && (v = d.width), (p || P) && a((T) => ({ ...T, width: v, height: C }));
|
|
33
32
|
};
|
|
34
33
|
const u = { ...r };
|
|
35
34
|
delete u.children;
|
|
36
|
-
const d = new m(u).appendTo(
|
|
37
|
-
let v = d.width,
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
(k = d.renderer.domElement.parentElement) == null || k.removeChild(
|
|
35
|
+
const d = new m(u).appendTo(s.current);
|
|
36
|
+
let v = d.width, C = d.height;
|
|
37
|
+
a({ two: d, parent: d.scene, width: v, height: C }), d.bind("update", f), t = () => {
|
|
38
|
+
d.renderer.domElement.parentElement?.removeChild(
|
|
41
39
|
d.renderer.domElement
|
|
42
40
|
), d.unbind("update", f);
|
|
43
41
|
const p = m.Instances.indexOf(d);
|
|
@@ -46,10 +44,10 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
|
|
|
46
44
|
}
|
|
47
45
|
return t;
|
|
48
46
|
}
|
|
49
|
-
return /* @__PURE__ */ g(
|
|
47
|
+
return /* @__PURE__ */ g(S.Provider, { value: c, children: /* @__PURE__ */ g("div", { ref: s, children: r.children }) });
|
|
50
48
|
}, M = w.forwardRef(
|
|
51
|
-
({ x: r, y: o, ...i },
|
|
52
|
-
const { two: c, parent:
|
|
49
|
+
({ x: r, y: o, ...i }, s) => {
|
|
50
|
+
const { two: c, parent: a, width: n, height: t } = h(), [e, f] = b(null);
|
|
53
51
|
return l(() => {
|
|
54
52
|
if (c) {
|
|
55
53
|
const u = new m.Group();
|
|
@@ -59,11 +57,11 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
|
|
|
59
57
|
}
|
|
60
58
|
}, [c]), l(() => {
|
|
61
59
|
const u = e;
|
|
62
|
-
if (
|
|
63
|
-
return
|
|
64
|
-
|
|
60
|
+
if (a && u)
|
|
61
|
+
return a.add(u), () => {
|
|
62
|
+
a.remove(u);
|
|
65
63
|
};
|
|
66
|
-
}, [e,
|
|
64
|
+
}, [e, a]), l(() => {
|
|
67
65
|
if (e) {
|
|
68
66
|
const u = e;
|
|
69
67
|
typeof r == "number" && (u.translation.x = r), typeof o == "number" && (u.translation.y = o);
|
|
@@ -72,17 +70,17 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
|
|
|
72
70
|
for (const v in d)
|
|
73
71
|
v in u && (u[v] = d[v]);
|
|
74
72
|
}
|
|
75
|
-
}, [e, r, o, i]), y(
|
|
73
|
+
}, [e, r, o, i]), y(s, () => e, [e]), /* @__PURE__ */ g(S.Provider, { value: { two: c, parent: e, width: n, height: t }, children: i.children });
|
|
76
74
|
}
|
|
77
75
|
), O = w.forwardRef(
|
|
78
|
-
({ manual: r, x: o, y: i, ...
|
|
79
|
-
const { two:
|
|
76
|
+
({ manual: r, x: o, y: i, ...s }, c) => {
|
|
77
|
+
const { two: a, parent: n } = h(), [t, e] = b(null);
|
|
80
78
|
return l(() => {
|
|
81
79
|
const f = new m.Path();
|
|
82
80
|
return e(f), () => {
|
|
83
81
|
e(null);
|
|
84
82
|
};
|
|
85
|
-
}, [
|
|
83
|
+
}, [a]), l(() => {
|
|
86
84
|
if (n && t)
|
|
87
85
|
return n.add(t), () => {
|
|
88
86
|
n.remove(t);
|
|
@@ -91,64 +89,64 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
|
|
|
91
89
|
if (t) {
|
|
92
90
|
const f = t;
|
|
93
91
|
typeof o == "number" && (f.translation.x = o), typeof i == "number" && (f.translation.y = i), typeof r < "u" && (f.automatic = !r);
|
|
94
|
-
for (const u in
|
|
95
|
-
u in f && (f[u] =
|
|
92
|
+
for (const u in s)
|
|
93
|
+
u in f && (f[u] = s[u]);
|
|
96
94
|
}
|
|
97
|
-
}, [
|
|
95
|
+
}, [s, t, o, i, r]), y(c, () => t, [t]), /* @__PURE__ */ g(R, {});
|
|
98
96
|
}
|
|
99
97
|
), _ = w.forwardRef(
|
|
100
|
-
({ x: r, y: o, ...i },
|
|
101
|
-
const { two: c, parent:
|
|
98
|
+
({ x: r, y: o, ...i }, s) => {
|
|
99
|
+
const { two: c, parent: a } = h(), [n, t] = b(null);
|
|
102
100
|
return l(() => {
|
|
103
101
|
const e = new m.Points();
|
|
104
102
|
return t(e), () => {
|
|
105
103
|
t(null);
|
|
106
104
|
};
|
|
107
105
|
}, [c, r, o]), l(() => {
|
|
108
|
-
if (
|
|
109
|
-
return
|
|
110
|
-
|
|
106
|
+
if (a && n)
|
|
107
|
+
return a.add(n), () => {
|
|
108
|
+
a.remove(n);
|
|
111
109
|
};
|
|
112
|
-
}, [
|
|
110
|
+
}, [a, n]), l(() => {
|
|
113
111
|
if (n) {
|
|
114
112
|
const e = n;
|
|
115
113
|
typeof r == "number" && (e.translation.x = r), typeof o == "number" && (e.translation.y = o);
|
|
116
114
|
for (const f in i)
|
|
117
115
|
f in e && (e[f] = i[f]);
|
|
118
116
|
}
|
|
119
|
-
}, [i, n, r, o]), y(
|
|
117
|
+
}, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
|
|
120
118
|
}
|
|
121
119
|
), z = w.forwardRef(
|
|
122
|
-
({ x: r, y: o, ...i },
|
|
123
|
-
const { two: c, parent:
|
|
120
|
+
({ x: r, y: o, ...i }, s) => {
|
|
121
|
+
const { two: c, parent: a } = h(), [n, t] = b(null);
|
|
124
122
|
return l(() => {
|
|
125
123
|
const e = new m.Text();
|
|
126
124
|
return t(e), () => {
|
|
127
125
|
t(null);
|
|
128
126
|
};
|
|
129
127
|
}, [c]), l(() => {
|
|
130
|
-
if (
|
|
131
|
-
return
|
|
132
|
-
|
|
128
|
+
if (a && n)
|
|
129
|
+
return a.add(n), () => {
|
|
130
|
+
a.remove(n);
|
|
133
131
|
};
|
|
134
|
-
}, [
|
|
132
|
+
}, [a, n]), l(() => {
|
|
135
133
|
if (n) {
|
|
136
134
|
const e = n;
|
|
137
135
|
typeof r == "number" && (e.translation.x = r), typeof o == "number" && (e.translation.y = o);
|
|
138
136
|
for (const f in i)
|
|
139
137
|
f in e && (e[f] = i[f]);
|
|
140
138
|
}
|
|
141
|
-
}, [i, n, r, o]), y(
|
|
139
|
+
}, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
|
|
142
140
|
}
|
|
143
141
|
), B = w.forwardRef(
|
|
144
|
-
({ x: r, y: o, resolution: i, ...
|
|
145
|
-
const { two:
|
|
142
|
+
({ x: r, y: o, resolution: i, ...s }, c) => {
|
|
143
|
+
const { two: a, parent: n } = h(), [t, e] = b(null);
|
|
146
144
|
return l(() => {
|
|
147
145
|
const f = new m.ArcSegment(0, 0, 0, 0, 0, 0, i);
|
|
148
146
|
return e(f), () => {
|
|
149
147
|
e(null);
|
|
150
148
|
};
|
|
151
|
-
}, [i,
|
|
149
|
+
}, [i, a]), l(() => {
|
|
152
150
|
if (n && t)
|
|
153
151
|
return n.add(t), () => {
|
|
154
152
|
n.remove(t);
|
|
@@ -157,27 +155,27 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
|
|
|
157
155
|
if (t) {
|
|
158
156
|
const f = t;
|
|
159
157
|
typeof r == "number" && (f.translation.x = r), typeof o == "number" && (f.translation.y = o);
|
|
160
|
-
for (const u in
|
|
161
|
-
u in f && (f[u] =
|
|
158
|
+
for (const u in s)
|
|
159
|
+
u in f && (f[u] = s[u]);
|
|
162
160
|
}
|
|
163
|
-
}, [
|
|
161
|
+
}, [s, t, r, o]), y(c, () => t, [t]), /* @__PURE__ */ g(R, {});
|
|
164
162
|
}
|
|
165
163
|
), J = w.forwardRef(
|
|
166
|
-
({ x: r, y: o, resolution: i, ...
|
|
167
|
-
const { two:
|
|
164
|
+
({ x: r, y: o, resolution: i, ...s }, c) => {
|
|
165
|
+
const { two: a, parent: n } = h(), [t, e] = b(null);
|
|
168
166
|
return l(() => {
|
|
169
167
|
const f = new m.Circle(0, 0, 0, i);
|
|
170
168
|
return e(f), () => {
|
|
171
169
|
e(null);
|
|
172
170
|
};
|
|
173
|
-
}, [i,
|
|
171
|
+
}, [i, a]), l(() => {
|
|
174
172
|
if (t) {
|
|
175
173
|
const f = t;
|
|
176
174
|
typeof r == "number" && (f.translation.x = r), typeof o == "number" && (f.translation.y = o);
|
|
177
|
-
for (const u in
|
|
178
|
-
u in f && (f[u] =
|
|
175
|
+
for (const u in s)
|
|
176
|
+
u in f && (f[u] = s[u]);
|
|
179
177
|
}
|
|
180
|
-
}, [t,
|
|
178
|
+
}, [t, s, r, o]), l(() => {
|
|
181
179
|
if (n && t)
|
|
182
180
|
return n.add(t), () => {
|
|
183
181
|
n.remove(t);
|
|
@@ -185,31 +183,31 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
|
|
|
185
183
|
}, [n, t]), y(c, () => t, [t]), /* @__PURE__ */ g(R, {});
|
|
186
184
|
}
|
|
187
185
|
), K = w.forwardRef(
|
|
188
|
-
({ x: r, y: o, resolution: i, ...
|
|
189
|
-
const { two:
|
|
186
|
+
({ x: r, y: o, resolution: i, ...s }, c) => {
|
|
187
|
+
const { two: a, parent: n } = h(), [t, e] = b(null);
|
|
190
188
|
return l(() => {
|
|
191
189
|
const f = new m.Ellipse(0, 0, 0, 0, i);
|
|
192
190
|
return e(f), () => {
|
|
193
191
|
e(null);
|
|
194
192
|
};
|
|
195
|
-
}, [i,
|
|
193
|
+
}, [i, a]), l(() => {
|
|
196
194
|
if (n && t)
|
|
197
195
|
return n.add(t), () => {
|
|
198
196
|
n.remove(t);
|
|
199
197
|
};
|
|
200
|
-
}, [n]), l(() => {
|
|
198
|
+
}, [n, t]), l(() => {
|
|
201
199
|
if (t) {
|
|
202
200
|
const f = t;
|
|
203
201
|
typeof r == "number" && (f.translation.x = r), typeof o == "number" && (f.translation.y = o);
|
|
204
|
-
for (const u in
|
|
205
|
-
u in f && (f[u] =
|
|
202
|
+
for (const u in s)
|
|
203
|
+
u in f && (f[u] = s[u]);
|
|
206
204
|
}
|
|
207
|
-
}, [t, r, o,
|
|
205
|
+
}, [t, r, o, s]), y(c, () => t, [t]), /* @__PURE__ */ g(R, {});
|
|
208
206
|
}
|
|
209
207
|
), N = w.forwardRef(
|
|
210
|
-
({ mode: r, texture: o, x: i, y:
|
|
208
|
+
({ mode: r, texture: o, x: i, y: s, ...c }, a) => {
|
|
211
209
|
const { two: n, parent: t } = h(), [e, f] = b(null);
|
|
212
|
-
return
|
|
210
|
+
return k(() => {
|
|
213
211
|
const u = new m.Image();
|
|
214
212
|
return f(u), () => {
|
|
215
213
|
f(null);
|
|
@@ -222,16 +220,16 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
|
|
|
222
220
|
}, [t, e]), l(() => {
|
|
223
221
|
if (e) {
|
|
224
222
|
const u = e;
|
|
225
|
-
typeof r < "u" && (u.mode = r), typeof o < "u" && (u.texture = o), typeof i == "number" && (u.translation.x = i), typeof
|
|
223
|
+
typeof r < "u" && (u.mode = r), typeof o < "u" && (u.texture = o), typeof i == "number" && (u.translation.x = i), typeof s == "number" && (u.translation.y = s);
|
|
226
224
|
for (const d in c)
|
|
227
225
|
d in u && (u[d] = c[d]);
|
|
228
226
|
}
|
|
229
|
-
}, [e, c, r, o, i,
|
|
227
|
+
}, [e, c, r, o, i, s]), y(a, () => e, [e]), /* @__PURE__ */ g(R, {});
|
|
230
228
|
}
|
|
231
229
|
), Q = w.forwardRef(
|
|
232
|
-
({ paths: r, x: o, y: i, autoPlay:
|
|
230
|
+
({ paths: r, x: o, y: i, autoPlay: s, ...c }, a) => {
|
|
233
231
|
const { two: n, parent: t } = h(), [e, f] = b(null);
|
|
234
|
-
return
|
|
232
|
+
return k(() => {
|
|
235
233
|
const u = new m.ImageSequence(r);
|
|
236
234
|
return f(u), () => {
|
|
237
235
|
f(null);
|
|
@@ -244,14 +242,14 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
|
|
|
244
242
|
}, [t, e]), l(() => {
|
|
245
243
|
if (e) {
|
|
246
244
|
const u = e;
|
|
247
|
-
|
|
245
|
+
s ? u.play() : u.pause(), typeof o == "number" && (u.translation.x = o), typeof i == "number" && (u.translation.y = i);
|
|
248
246
|
for (const d in c)
|
|
249
247
|
d in u && (u[d] = c[d]);
|
|
250
248
|
}
|
|
251
|
-
}, [c, e, r, o, i,
|
|
249
|
+
}, [c, e, r, o, i, s]), y(a, () => e, [e]), /* @__PURE__ */ g(R, {});
|
|
252
250
|
}
|
|
253
251
|
), U = w.forwardRef(
|
|
254
|
-
({ x1: r, y1: o, x2: i, y2:
|
|
252
|
+
({ x1: r, y1: o, x2: i, y2: s, ...c }, a) => {
|
|
255
253
|
const { two: n, parent: t } = h(), [e, f] = b(null);
|
|
256
254
|
return l(() => {
|
|
257
255
|
const u = new m.Line();
|
|
@@ -267,82 +265,82 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
|
|
|
267
265
|
}, [t, e]), l(() => {
|
|
268
266
|
if (e) {
|
|
269
267
|
const u = e;
|
|
270
|
-
typeof r == "number" && (u.left.x = r), typeof o == "number" && (u.left.y = o), typeof i == "number" && (u.right.x = i), typeof
|
|
268
|
+
typeof r == "number" && (u.left.x = r), typeof o == "number" && (u.left.y = o), typeof i == "number" && (u.right.x = i), typeof s == "number" && (u.right.y = s);
|
|
271
269
|
for (const d in c)
|
|
272
270
|
d in u && (u[d] = c[d]);
|
|
273
271
|
}
|
|
274
|
-
}, [c, e, r, o, i,
|
|
272
|
+
}, [c, e, r, o, i, s]), y(a, () => e, [e]), /* @__PURE__ */ g(R, {});
|
|
275
273
|
}
|
|
276
274
|
), V = w.forwardRef(
|
|
277
|
-
({ x: r, y: o, ...i },
|
|
278
|
-
const { two: c, parent:
|
|
275
|
+
({ x: r, y: o, ...i }, s) => {
|
|
276
|
+
const { two: c, parent: a } = h(), [n, t] = b(null);
|
|
279
277
|
return l(() => {
|
|
280
278
|
const e = new m.Polygon();
|
|
281
279
|
return t(e), () => {
|
|
282
280
|
t(null);
|
|
283
281
|
};
|
|
284
282
|
}, [c]), l(() => {
|
|
285
|
-
if (
|
|
286
|
-
return
|
|
287
|
-
|
|
283
|
+
if (a && n)
|
|
284
|
+
return a.add(n), () => {
|
|
285
|
+
a.remove(n);
|
|
288
286
|
};
|
|
289
|
-
}, [
|
|
287
|
+
}, [a, n]), l(() => {
|
|
290
288
|
if (n) {
|
|
291
289
|
const e = n;
|
|
292
290
|
typeof r == "number" && (e.translation.x = r), typeof o == "number" && (e.translation.y = o);
|
|
293
291
|
for (const f in i)
|
|
294
292
|
f in e && (e[f] = i[f]);
|
|
295
293
|
}
|
|
296
|
-
}, [i, n, r, o]), y(
|
|
294
|
+
}, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
|
|
297
295
|
}
|
|
298
296
|
), W = w.forwardRef(
|
|
299
|
-
({ x: r, y: o, ...i },
|
|
300
|
-
const { two: c, parent:
|
|
297
|
+
({ x: r, y: o, ...i }, s) => {
|
|
298
|
+
const { two: c, parent: a } = h(), [n, t] = b(null);
|
|
301
299
|
return l(() => {
|
|
302
300
|
const e = new m.Rectangle();
|
|
303
301
|
return t(e), () => {
|
|
304
302
|
t(null);
|
|
305
303
|
};
|
|
306
304
|
}, [c]), l(() => {
|
|
307
|
-
if (
|
|
308
|
-
return
|
|
309
|
-
|
|
305
|
+
if (a && n)
|
|
306
|
+
return a.add(n), () => {
|
|
307
|
+
a.remove(n);
|
|
310
308
|
};
|
|
311
|
-
}, [
|
|
309
|
+
}, [a, n]), l(() => {
|
|
312
310
|
if (n) {
|
|
313
311
|
const e = n;
|
|
314
312
|
typeof r == "number" && (e.translation.x = r), typeof o == "number" && (e.translation.y = o);
|
|
315
313
|
for (const f in i)
|
|
316
314
|
f in e && (e[f] = i[f]);
|
|
317
315
|
}
|
|
318
|
-
}, [i, n, r, o]), y(
|
|
316
|
+
}, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
|
|
319
317
|
}
|
|
320
318
|
), Z = w.forwardRef(
|
|
321
|
-
({ x: r, y: o, ...i },
|
|
322
|
-
const { two: c, parent:
|
|
319
|
+
({ x: r, y: o, ...i }, s) => {
|
|
320
|
+
const { two: c, parent: a } = h(), [n, t] = b(null);
|
|
323
321
|
return l(() => {
|
|
324
322
|
const e = new m.RoundedRectangle();
|
|
325
323
|
return t(e), () => {
|
|
326
324
|
t(null);
|
|
327
325
|
};
|
|
328
326
|
}, [c]), l(() => {
|
|
329
|
-
if (
|
|
330
|
-
return
|
|
331
|
-
|
|
327
|
+
if (a && n)
|
|
328
|
+
return a.add(n), () => {
|
|
329
|
+
a.remove(n);
|
|
332
330
|
};
|
|
333
|
-
}, [
|
|
331
|
+
}, [a, n]), l(() => {
|
|
334
332
|
if (n) {
|
|
335
333
|
const e = n;
|
|
336
334
|
typeof r == "number" && (e.translation.x = r), typeof o == "number" && (e.translation.y = o);
|
|
337
335
|
for (const f in i)
|
|
338
336
|
f in e && (e[f] = i[f]);
|
|
339
337
|
}
|
|
340
|
-
}, [i, n, r, o]), y(
|
|
338
|
+
}, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
|
|
341
339
|
}
|
|
342
340
|
), $ = w.forwardRef(
|
|
343
|
-
({ path: r, x: o, y: i, autoPlay:
|
|
341
|
+
({ path: r, x: o, y: i, autoPlay: s, ...c }, a) => {
|
|
344
342
|
const { two: n, parent: t } = h(), [e, f] = b(null);
|
|
345
|
-
return
|
|
343
|
+
return k(() => {
|
|
346
344
|
const u = new m.Sprite(r);
|
|
347
345
|
return f(u), () => {
|
|
348
346
|
f(null);
|
|
@@ -352,83 +350,83 @@ const C = G({ two: null, parent: null, width: 0, height: 0 }), h = () => L(C), j
|
|
|
352
350
|
return t.add(e), () => {
|
|
353
351
|
t.remove(e);
|
|
354
352
|
};
|
|
355
|
-
}, [t]), l(() => {
|
|
353
|
+
}, [t, e]), l(() => {
|
|
356
354
|
if (e) {
|
|
357
355
|
const u = e;
|
|
358
|
-
typeof o == "number" && (u.translation.x = o), typeof i == "number" && (u.translation.y = i),
|
|
356
|
+
typeof o == "number" && (u.translation.x = o), typeof i == "number" && (u.translation.y = i), s ? u.play() : u.pause();
|
|
359
357
|
for (const d in c)
|
|
360
358
|
d in u && (u[d] = c[d]);
|
|
361
359
|
}
|
|
362
|
-
}, [c, e, o, i,
|
|
360
|
+
}, [c, e, o, i, s]), y(a, () => e, [e]), /* @__PURE__ */ g(R, {});
|
|
363
361
|
}
|
|
364
362
|
), D = w.forwardRef(
|
|
365
|
-
({ x: r, y: o, ...i },
|
|
366
|
-
const { two: c, parent:
|
|
363
|
+
({ x: r, y: o, ...i }, s) => {
|
|
364
|
+
const { two: c, parent: a } = h(), [n, t] = b(null);
|
|
367
365
|
return l(() => {
|
|
368
366
|
const e = new m.Star();
|
|
369
367
|
return t(e), () => {
|
|
370
368
|
t(null);
|
|
371
369
|
};
|
|
372
370
|
}, [c]), l(() => {
|
|
373
|
-
if (
|
|
374
|
-
return
|
|
375
|
-
|
|
371
|
+
if (a && n)
|
|
372
|
+
return a.add(n), () => {
|
|
373
|
+
a.remove(n);
|
|
376
374
|
};
|
|
377
|
-
}, [
|
|
375
|
+
}, [a, n]), l(() => {
|
|
378
376
|
if (n) {
|
|
379
377
|
const e = n;
|
|
380
378
|
typeof r == "number" && (e.translation.x = r), typeof o == "number" && (e.translation.y = o);
|
|
381
379
|
for (const f in i)
|
|
382
380
|
f in e && (e[f] = i[f]);
|
|
383
381
|
}
|
|
384
|
-
}, [i, n, r, o]), y(
|
|
382
|
+
}, [i, n, r, o]), y(s, () => n, [n]), /* @__PURE__ */ g(R, {});
|
|
385
383
|
}
|
|
386
384
|
), X = w.forwardRef(
|
|
387
|
-
({ x1: r, y1: o, x2: i, y2:
|
|
388
|
-
const n =
|
|
385
|
+
({ x1: r, y1: o, x2: i, y2: s, ...c }, a) => {
|
|
386
|
+
const n = I(() => new m.LinearGradient(), []);
|
|
389
387
|
return l(() => {
|
|
390
388
|
if (n) {
|
|
391
389
|
const t = n;
|
|
392
|
-
typeof r == "number" && (t.left.x = r), typeof o == "number" && (t.left.y = o), typeof i == "number" && (t.right.x = i), typeof
|
|
390
|
+
typeof r == "number" && (t.left.x = r), typeof o == "number" && (t.left.y = o), typeof i == "number" && (t.right.x = i), typeof s == "number" && (t.right.y = s);
|
|
393
391
|
for (const e in c)
|
|
394
392
|
e in t && (t[e] = c[e]);
|
|
395
393
|
}
|
|
396
|
-
}, [n, r, o, i,
|
|
394
|
+
}, [n, r, o, i, s, c]), y(a, () => n, [n]), null;
|
|
397
395
|
}
|
|
398
396
|
), Y = w.forwardRef(
|
|
399
|
-
({ x: r, y: o, focalX: i, focalY:
|
|
400
|
-
const n =
|
|
397
|
+
({ x: r, y: o, focalX: i, focalY: s, ...c }, a) => {
|
|
398
|
+
const n = I(() => new m.RadialGradient(), []);
|
|
401
399
|
return l(() => {
|
|
402
400
|
if (n) {
|
|
403
401
|
const t = n;
|
|
404
|
-
typeof r == "number" && (n.center.x = r), typeof o == "number" && (n.center.y = o), typeof i == "number" && (n.focal.x = i), typeof
|
|
402
|
+
typeof r == "number" && (n.center.x = r), typeof o == "number" && (n.center.y = o), typeof i == "number" && (n.focal.x = i), typeof s == "number" && (n.focal.y = s);
|
|
405
403
|
for (const e in c)
|
|
406
404
|
e in t && (t[e] = c[e]);
|
|
407
405
|
}
|
|
408
|
-
}, [c, n, r, o, i,
|
|
406
|
+
}, [c, n, r, o, i, s]), y(a, () => n, [n]), null;
|
|
409
407
|
}
|
|
410
408
|
), x = w.forwardRef(
|
|
411
409
|
({ source: r, ...o }, i) => {
|
|
412
|
-
const [
|
|
410
|
+
const [s, c] = b(null);
|
|
413
411
|
return l(() => {
|
|
414
|
-
const
|
|
415
|
-
return c(
|
|
412
|
+
const a = new m.Texture(r);
|
|
413
|
+
return c(a), () => {
|
|
416
414
|
c(null);
|
|
417
415
|
};
|
|
418
416
|
}, [r]), l(() => {
|
|
419
|
-
if (
|
|
420
|
-
const
|
|
417
|
+
if (s) {
|
|
418
|
+
const a = s;
|
|
421
419
|
for (const n in o)
|
|
422
|
-
n in
|
|
420
|
+
n in a && (a[n] = o[n]);
|
|
423
421
|
}
|
|
424
|
-
}, [o,
|
|
422
|
+
}, [o, s]), y(i, () => s, [s]), null;
|
|
425
423
|
}
|
|
426
424
|
);
|
|
427
425
|
export {
|
|
428
426
|
B as ArcSegment,
|
|
429
427
|
H as Canvas,
|
|
430
428
|
J as Circle,
|
|
431
|
-
|
|
429
|
+
S as Context,
|
|
432
430
|
K as Ellipse,
|
|
433
431
|
M as Group,
|
|
434
432
|
N as Image,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-two.js",
|
|
3
|
-
"version": "v0.2.
|
|
3
|
+
"version": "v0.2.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React virtual DOM for Two.js — a renderer agnostic two-dimensional drawing API for the web",
|
|
6
6
|
"main": "./dist/react-two-main.es.js",
|
|
@@ -73,13 +73,13 @@
|
|
|
73
73
|
"tailwindcss": "^4.1.14",
|
|
74
74
|
"typescript": "~5.6.2",
|
|
75
75
|
"typescript-eslint": "^8.11.0",
|
|
76
|
-
"vite": "^
|
|
76
|
+
"vite": "^7.1.11",
|
|
77
77
|
"vite-plugin-dts": "^4.5.0",
|
|
78
78
|
"vitest": "^3.2.4"
|
|
79
79
|
},
|
|
80
80
|
"peerDependencies": {
|
|
81
|
-
"react": ">=19
|
|
82
|
-
"react-dom": ">=19
|
|
81
|
+
"react": ">=19",
|
|
82
|
+
"react-dom": ">=19",
|
|
83
83
|
"two.js": ">=v0.8.21"
|
|
84
84
|
}
|
|
85
85
|
}
|