@twick/2d 0.14.0 → 1.14.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/LICENSE +21 -21
- package/editor/editor/tsconfig.build.tsbuildinfo +1 -1
- package/lib/components/Audio.d.ts.map +1 -1
- package/lib/components/Audio.js +33 -3
- package/lib/components/CodeBlock.d.ts +1 -1
- package/lib/components/Img.js +23 -23
- package/lib/components/Line.js +31 -31
- package/lib/components/Media.d.ts +6 -0
- package/lib/components/Media.d.ts.map +1 -1
- package/lib/components/Media.js +277 -61
- package/lib/components/Node.d.ts +1 -1
- package/lib/components/Path.d.ts +1 -1
- package/lib/components/SVG.d.ts +1 -1
- package/lib/components/Shape.d.ts +1 -1
- package/lib/components/Spline.js +25 -25
- package/lib/components/Video.d.ts +0 -1
- package/lib/components/Video.d.ts.map +1 -1
- package/lib/components/Video.js +70 -65
- package/lib/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +4 -5
- package/src/editor/NodeInspectorConfig.tsx +76 -76
- package/src/editor/PreviewOverlayConfig.tsx +67 -67
- package/src/editor/Provider.tsx +93 -93
- package/src/editor/SceneGraphTabConfig.tsx +81 -81
- package/src/editor/icons/CircleIcon.tsx +7 -7
- package/src/editor/icons/CodeBlockIcon.tsx +8 -8
- package/src/editor/icons/CurveIcon.tsx +7 -7
- package/src/editor/icons/GridIcon.tsx +7 -7
- package/src/editor/icons/IconMap.ts +35 -35
- package/src/editor/icons/ImgIcon.tsx +8 -8
- package/src/editor/icons/LayoutIcon.tsx +9 -9
- package/src/editor/icons/LineIcon.tsx +7 -7
- package/src/editor/icons/NodeIcon.tsx +7 -7
- package/src/editor/icons/RayIcon.tsx +7 -7
- package/src/editor/icons/RectIcon.tsx +7 -7
- package/src/editor/icons/ShapeIcon.tsx +7 -7
- package/src/editor/icons/TxtIcon.tsx +8 -8
- package/src/editor/icons/VideoIcon.tsx +7 -7
- package/src/editor/icons/View2DIcon.tsx +10 -10
- package/src/editor/index.ts +17 -17
- package/src/editor/tree/DetachedRoot.tsx +23 -23
- package/src/editor/tree/NodeElement.tsx +74 -74
- package/src/editor/tree/TreeElement.tsx +72 -72
- package/src/editor/tree/TreeRoot.tsx +10 -10
- package/src/editor/tree/ViewRoot.tsx +20 -20
- package/src/editor/tree/index.module.scss +38 -38
- package/src/editor/tree/index.ts +3 -3
- package/src/editor/tsconfig.build.json +5 -5
- package/src/editor/tsconfig.json +12 -12
- package/src/editor/tsdoc.json +4 -4
- package/src/editor/vite-env.d.ts +1 -1
- package/src/lib/code/CodeCursor.ts +445 -445
- package/src/lib/code/CodeDiffer.ts +78 -78
- package/src/lib/code/CodeFragment.ts +97 -97
- package/src/lib/code/CodeHighlighter.ts +75 -75
- package/src/lib/code/CodeMetrics.ts +47 -47
- package/src/lib/code/CodeRange.test.ts +74 -74
- package/src/lib/code/CodeRange.ts +216 -216
- package/src/lib/code/CodeScope.ts +101 -101
- package/src/lib/code/CodeSelection.ts +24 -24
- package/src/lib/code/CodeSignal.ts +327 -327
- package/src/lib/code/CodeTokenizer.ts +54 -54
- package/src/lib/code/DefaultHighlightStyle.ts +98 -98
- package/src/lib/code/LezerHighlighter.ts +113 -113
- package/src/lib/code/diff.test.ts +311 -311
- package/src/lib/code/diff.ts +319 -319
- package/src/lib/code/extractRange.ts +126 -126
- package/src/lib/code/index.ts +13 -13
- package/src/lib/components/Audio.ts +168 -131
- package/src/lib/components/Bezier.ts +105 -105
- package/src/lib/components/Circle.ts +266 -266
- package/src/lib/components/Code.ts +526 -526
- package/src/lib/components/CodeBlock.ts +576 -576
- package/src/lib/components/CubicBezier.ts +112 -112
- package/src/lib/components/Curve.ts +455 -455
- package/src/lib/components/Grid.ts +135 -135
- package/src/lib/components/Icon.ts +96 -96
- package/src/lib/components/Img.ts +319 -319
- package/src/lib/components/Knot.ts +157 -157
- package/src/lib/components/Latex.ts +122 -122
- package/src/lib/components/Layout.ts +1092 -1092
- package/src/lib/components/Line.ts +429 -429
- package/src/lib/components/Media.ts +576 -346
- package/src/lib/components/Node.ts +1940 -1940
- package/src/lib/components/Path.ts +137 -137
- package/src/lib/components/Polygon.ts +171 -171
- package/src/lib/components/QuadBezier.ts +100 -100
- package/src/lib/components/Ray.ts +125 -125
- package/src/lib/components/Rect.ts +187 -187
- package/src/lib/components/Rive.ts +156 -156
- package/src/lib/components/SVG.ts +797 -797
- package/src/lib/components/Shape.ts +143 -143
- package/src/lib/components/Spline.ts +344 -344
- package/src/lib/components/Txt.test.tsx +81 -81
- package/src/lib/components/Txt.ts +203 -203
- package/src/lib/components/TxtLeaf.ts +205 -205
- package/src/lib/components/Video.ts +461 -462
- package/src/lib/components/View2D.ts +98 -98
- package/src/lib/components/__tests__/children.test.tsx +142 -142
- package/src/lib/components/__tests__/clone.test.tsx +126 -126
- package/src/lib/components/__tests__/generatorTest.ts +28 -28
- package/src/lib/components/__tests__/mockScene2D.ts +45 -45
- package/src/lib/components/__tests__/query.test.tsx +122 -122
- package/src/lib/components/__tests__/state.test.tsx +60 -60
- package/src/lib/components/index.ts +28 -28
- package/src/lib/components/types.ts +35 -35
- package/src/lib/curves/ArcSegment.ts +159 -159
- package/src/lib/curves/CircleSegment.ts +77 -77
- package/src/lib/curves/CubicBezierSegment.ts +78 -78
- package/src/lib/curves/CurveDrawingInfo.ts +11 -11
- package/src/lib/curves/CurvePoint.ts +15 -15
- package/src/lib/curves/CurveProfile.ts +7 -7
- package/src/lib/curves/KnotInfo.ts +10 -10
- package/src/lib/curves/LineSegment.ts +62 -62
- package/src/lib/curves/Polynomial.ts +355 -355
- package/src/lib/curves/Polynomial2D.ts +62 -62
- package/src/lib/curves/PolynomialSegment.ts +124 -124
- package/src/lib/curves/QuadBezierSegment.ts +64 -64
- package/src/lib/curves/Segment.ts +17 -17
- package/src/lib/curves/UniformPolynomialCurveSampler.ts +94 -94
- package/src/lib/curves/createCurveProfileLerp.ts +471 -471
- package/src/lib/curves/getBezierSplineProfile.ts +223 -223
- package/src/lib/curves/getCircleProfile.ts +86 -86
- package/src/lib/curves/getPathProfile.ts +178 -178
- package/src/lib/curves/getPointAtDistance.ts +21 -21
- package/src/lib/curves/getPolylineProfile.test.ts +21 -21
- package/src/lib/curves/getPolylineProfile.ts +89 -89
- package/src/lib/curves/getRectProfile.ts +139 -139
- package/src/lib/curves/index.ts +16 -16
- package/src/lib/decorators/canvasStyleSignal.ts +16 -16
- package/src/lib/decorators/colorSignal.ts +9 -9
- package/src/lib/decorators/compound.ts +72 -72
- package/src/lib/decorators/computed.ts +18 -18
- package/src/lib/decorators/defaultStyle.ts +18 -18
- package/src/lib/decorators/filtersSignal.ts +136 -136
- package/src/lib/decorators/index.ts +10 -10
- package/src/lib/decorators/initializers.ts +32 -32
- package/src/lib/decorators/nodeName.ts +13 -13
- package/src/lib/decorators/signal.test.ts +90 -90
- package/src/lib/decorators/signal.ts +345 -345
- package/src/lib/decorators/spacingSignal.ts +15 -15
- package/src/lib/decorators/vector2Signal.ts +30 -30
- package/src/lib/globals.d.ts +2 -2
- package/src/lib/index.ts +8 -8
- package/src/lib/jsx-dev-runtime.ts +2 -2
- package/src/lib/jsx-runtime.ts +46 -46
- package/src/lib/parse-svg-path.d.ts +14 -14
- package/src/lib/partials/Filter.ts +180 -180
- package/src/lib/partials/Gradient.ts +102 -102
- package/src/lib/partials/Pattern.ts +34 -34
- package/src/lib/partials/ShaderConfig.ts +117 -117
- package/src/lib/partials/index.ts +4 -4
- package/src/lib/partials/types.ts +58 -58
- package/src/lib/scenes/Scene2D.ts +242 -242
- package/src/lib/scenes/index.ts +3 -3
- package/src/lib/scenes/makeScene2D.ts +16 -16
- package/src/lib/scenes/useScene2D.ts +6 -6
- package/src/lib/tsconfig.build.json +5 -5
- package/src/lib/tsconfig.json +10 -10
- package/src/lib/tsdoc.json +4 -4
- package/src/lib/utils/CanvasUtils.ts +306 -306
- package/src/lib/utils/diff.test.ts +453 -453
- package/src/lib/utils/diff.ts +148 -148
- package/src/lib/utils/index.ts +2 -2
- package/src/lib/utils/is.ts +11 -11
- package/src/lib/utils/makeSignalExtensions.ts +30 -30
- package/src/lib/utils/video/declarations.d.ts +1 -1
- package/src/lib/utils/video/ffmpeg-client.ts +50 -50
- package/src/lib/utils/video/mp4-parser-manager.ts +72 -72
- package/src/lib/utils/video/parser/index.ts +1 -1
- package/src/lib/utils/video/parser/parser.ts +257 -257
- package/src/lib/utils/video/parser/sampler.ts +72 -72
- package/src/lib/utils/video/parser/segment.ts +302 -302
- package/src/lib/utils/video/parser/sink.ts +29 -29
- package/src/lib/utils/video/parser/utils.ts +31 -31
- package/src/tsconfig.base.json +19 -19
- package/src/tsconfig.build.json +8 -8
- package/src/tsconfig.json +5 -5
- package/tsconfig.project.json +7 -7
- package/lib/components/utils/waitUntil.d.ts +0 -7
- package/lib/components/utils/waitUntil.d.ts.map +0 -1
- package/lib/components/utils/waitUntil.js +0 -15
- package/lib/utils/waitUntil.d.ts +0 -7
- package/lib/utils/waitUntil.d.ts.map +0 -1
- package/lib/utils/waitUntil.js +0 -15
- package/src/lib/utils/waitUntil.ts +0 -18
|
@@ -1,242 +1,242 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
AssetInfo,
|
|
3
|
-
FullSceneDescription,
|
|
4
|
-
Inspectable,
|
|
5
|
-
InspectedAttributes,
|
|
6
|
-
InspectedElement,
|
|
7
|
-
Scene,
|
|
8
|
-
ThreadGeneratorFactory,
|
|
9
|
-
} from '@twick/core';
|
|
10
|
-
import {
|
|
11
|
-
GeneratorScene,
|
|
12
|
-
SceneRenderEvent,
|
|
13
|
-
Vector2,
|
|
14
|
-
transformVectorAsPoint,
|
|
15
|
-
useLogger,
|
|
16
|
-
} from '@twick/core';
|
|
17
|
-
import type {Node} from '../components';
|
|
18
|
-
import {Audio, Media, Video, View2D} from '../components';
|
|
19
|
-
|
|
20
|
-
export class Scene2D extends GeneratorScene<View2D> implements Inspectable {
|
|
21
|
-
private view: View2D | null = null;
|
|
22
|
-
private registeredNodes = new Map<string, Node>();
|
|
23
|
-
private readonly nodeCounters = new Map<string, number>();
|
|
24
|
-
private assetHash = Date.now().toString();
|
|
25
|
-
|
|
26
|
-
public constructor(
|
|
27
|
-
description: FullSceneDescription<ThreadGeneratorFactory<View2D>>,
|
|
28
|
-
) {
|
|
29
|
-
super(description);
|
|
30
|
-
this.recreateView();
|
|
31
|
-
if (import.meta.hot) {
|
|
32
|
-
import.meta.hot.on('twick:assets', () => {
|
|
33
|
-
this.assetHash = Date.now().toString();
|
|
34
|
-
this.getView().assetHash(this.assetHash);
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
public getView(): View2D {
|
|
40
|
-
return this.view!;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
public override next(): Promise<void> {
|
|
44
|
-
this.getView()
|
|
45
|
-
?.playbackState(this.playback.state)
|
|
46
|
-
.globalTime(this.playback.time);
|
|
47
|
-
return super.next();
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
public async draw(context: CanvasRenderingContext2D) {
|
|
51
|
-
context.save();
|
|
52
|
-
this.renderLifecycle.dispatch([SceneRenderEvent.BeforeRender, context]);
|
|
53
|
-
context.save();
|
|
54
|
-
this.renderLifecycle.dispatch([SceneRenderEvent.BeginRender, context]);
|
|
55
|
-
this.getView()
|
|
56
|
-
.playbackState(this.playback.state)
|
|
57
|
-
.globalTime(this.playback.time)
|
|
58
|
-
.fps(this.playback.fps);
|
|
59
|
-
await this.getView().render(context);
|
|
60
|
-
this.renderLifecycle.dispatch([SceneRenderEvent.FinishRender, context]);
|
|
61
|
-
context.restore();
|
|
62
|
-
this.renderLifecycle.dispatch([SceneRenderEvent.AfterRender, context]);
|
|
63
|
-
context.restore();
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
public override reset(previousScene?: Scene): Promise<void> {
|
|
67
|
-
for (const key of this.registeredNodes.keys()) {
|
|
68
|
-
try {
|
|
69
|
-
this.registeredNodes.get(key)!.dispose();
|
|
70
|
-
} catch (e: any) {
|
|
71
|
-
this.logger.error(e);
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
this.registeredNodes.clear();
|
|
75
|
-
this.registeredNodes = new Map<string, Node>();
|
|
76
|
-
this.nodeCounters.clear();
|
|
77
|
-
this.recreateView();
|
|
78
|
-
|
|
79
|
-
return super.reset(previousScene);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
public inspectPosition(x: number, y: number): InspectedElement | null {
|
|
83
|
-
const node = this.getNodeByPosition(x, y);
|
|
84
|
-
return node?.key;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
public getNodeByPosition(x: number, y: number): Node | null {
|
|
88
|
-
return this.execute(() => this.getView().hit(new Vector2(x, y)) ?? null);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
public validateInspection(
|
|
92
|
-
element: InspectedElement | null,
|
|
93
|
-
): InspectedElement | null {
|
|
94
|
-
return this.getNode(element)?.key ?? null;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
public inspectAttributes(
|
|
98
|
-
element: InspectedElement,
|
|
99
|
-
): InspectedAttributes | null {
|
|
100
|
-
const node = this.getNode(element);
|
|
101
|
-
if (!node) return null;
|
|
102
|
-
|
|
103
|
-
const attributes: Record<string, any> = {
|
|
104
|
-
stack: node.creationStack,
|
|
105
|
-
key: node.key,
|
|
106
|
-
};
|
|
107
|
-
for (const {key, meta, signal} of node) {
|
|
108
|
-
if (!meta.inspectable) continue;
|
|
109
|
-
attributes[key] = signal();
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
return attributes;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
public drawOverlay(
|
|
116
|
-
element: InspectedElement,
|
|
117
|
-
matrix: DOMMatrix,
|
|
118
|
-
context: CanvasRenderingContext2D,
|
|
119
|
-
): void {
|
|
120
|
-
const node = this.getNode(element);
|
|
121
|
-
if (node) {
|
|
122
|
-
this.execute(() => {
|
|
123
|
-
node.drawOverlay(context, matrix.multiply(node.localToWorld()));
|
|
124
|
-
});
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
public transformMousePosition(x: number, y: number): Vector2 | null {
|
|
129
|
-
return transformVectorAsPoint(
|
|
130
|
-
new Vector2(x, y),
|
|
131
|
-
this.getView().localToParent().inverse(),
|
|
132
|
-
);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
public registerNode(node: Node, key?: string): [string, () => void] {
|
|
136
|
-
const className = node.constructor?.name ?? 'unknown';
|
|
137
|
-
const counter = (this.nodeCounters.get(className) ?? 0) + 1;
|
|
138
|
-
this.nodeCounters.set(className, counter);
|
|
139
|
-
|
|
140
|
-
if (key && this.registeredNodes.has(key)) {
|
|
141
|
-
useLogger().error({
|
|
142
|
-
message: `Duplicated node key: "${key}".`,
|
|
143
|
-
inspect: key,
|
|
144
|
-
stack: new Error().stack,
|
|
145
|
-
});
|
|
146
|
-
key = undefined;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
key ??= `${this.name}/${className}[${counter}]`;
|
|
150
|
-
this.registeredNodes.set(key, node);
|
|
151
|
-
const currentNodeMap = this.registeredNodes;
|
|
152
|
-
return [key, () => currentNodeMap.delete(key!)];
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
public getNode(key: any): Node | null {
|
|
156
|
-
if (typeof key !== 'string') return null;
|
|
157
|
-
return this.registeredNodes.get(key) ?? null;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
public *getDetachedNodes() {
|
|
161
|
-
for (const node of this.registeredNodes.values()) {
|
|
162
|
-
if (!node.parent() && node !== this.view) yield node;
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
public override getMediaAssets(): Array<AssetInfo> {
|
|
167
|
-
const playingVideos = Array.from(this.registeredNodes.values())
|
|
168
|
-
.filter((node): node is Video => node instanceof Video)
|
|
169
|
-
.filter(video => (video as Video).isPlaying());
|
|
170
|
-
|
|
171
|
-
const playingAudios = Array.from(this.registeredNodes.values())
|
|
172
|
-
.filter((node): node is Audio => node instanceof Audio)
|
|
173
|
-
.filter(audio => (audio as Audio).isPlaying());
|
|
174
|
-
|
|
175
|
-
const returnObjects: AssetInfo[] = [];
|
|
176
|
-
|
|
177
|
-
returnObjects.push(
|
|
178
|
-
...playingVideos.map(vid => ({
|
|
179
|
-
key: vid.key,
|
|
180
|
-
type: 'video' as const,
|
|
181
|
-
src: vid.src(),
|
|
182
|
-
decoder: vid.decoder(),
|
|
183
|
-
playbackRate:
|
|
184
|
-
typeof vid.playbackRate === 'function'
|
|
185
|
-
? vid.playbackRate()
|
|
186
|
-
: vid.playbackRate,
|
|
187
|
-
volume: vid.getVolume(),
|
|
188
|
-
currentTime: vid.getCurrentTime(),
|
|
189
|
-
duration: vid.getDuration(),
|
|
190
|
-
})),
|
|
191
|
-
);
|
|
192
|
-
|
|
193
|
-
returnObjects.push(
|
|
194
|
-
...playingAudios.map(audio => ({
|
|
195
|
-
key: audio.key,
|
|
196
|
-
type: 'audio' as const,
|
|
197
|
-
src: audio.src(),
|
|
198
|
-
playbackRate:
|
|
199
|
-
typeof audio.playbackRate === 'function'
|
|
200
|
-
? audio.playbackRate()
|
|
201
|
-
: audio.playbackRate,
|
|
202
|
-
volume: audio.getVolume(),
|
|
203
|
-
currentTime: audio.getCurrentTime(),
|
|
204
|
-
duration: audio.getDuration(),
|
|
205
|
-
})),
|
|
206
|
-
);
|
|
207
|
-
|
|
208
|
-
return returnObjects;
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
public override stopAllMedia() {
|
|
212
|
-
const playingMedia = Array.from(this.registeredNodes.values())
|
|
213
|
-
.filter((node): node is Media => node instanceof Media)
|
|
214
|
-
.filter(video => (video as Media).isPlaying());
|
|
215
|
-
|
|
216
|
-
for (const media of playingMedia) {
|
|
217
|
-
media.dispose();
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
public override adjustVolume(volumeScale: number) {
|
|
222
|
-
const mediaNodes = Array.from(this.registeredNodes.values()).filter(
|
|
223
|
-
(node): node is Media => node instanceof Media,
|
|
224
|
-
);
|
|
225
|
-
|
|
226
|
-
for (const media of mediaNodes) {
|
|
227
|
-
media.setVolume(media.getVolume() * volumeScale);
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
protected recreateView() {
|
|
232
|
-
this.execute(() => {
|
|
233
|
-
const size = this.getSize();
|
|
234
|
-
this.view = new View2D({
|
|
235
|
-
position: size.scale(this.resolutionScale / 2),
|
|
236
|
-
scale: this.resolutionScale,
|
|
237
|
-
assetHash: this.assetHash,
|
|
238
|
-
size,
|
|
239
|
-
});
|
|
240
|
-
});
|
|
241
|
-
}
|
|
242
|
-
}
|
|
1
|
+
import type {
|
|
2
|
+
AssetInfo,
|
|
3
|
+
FullSceneDescription,
|
|
4
|
+
Inspectable,
|
|
5
|
+
InspectedAttributes,
|
|
6
|
+
InspectedElement,
|
|
7
|
+
Scene,
|
|
8
|
+
ThreadGeneratorFactory,
|
|
9
|
+
} from '@twick/core';
|
|
10
|
+
import {
|
|
11
|
+
GeneratorScene,
|
|
12
|
+
SceneRenderEvent,
|
|
13
|
+
Vector2,
|
|
14
|
+
transformVectorAsPoint,
|
|
15
|
+
useLogger,
|
|
16
|
+
} from '@twick/core';
|
|
17
|
+
import type {Node} from '../components';
|
|
18
|
+
import {Audio, Media, Video, View2D} from '../components';
|
|
19
|
+
|
|
20
|
+
export class Scene2D extends GeneratorScene<View2D> implements Inspectable {
|
|
21
|
+
private view: View2D | null = null;
|
|
22
|
+
private registeredNodes = new Map<string, Node>();
|
|
23
|
+
private readonly nodeCounters = new Map<string, number>();
|
|
24
|
+
private assetHash = Date.now().toString();
|
|
25
|
+
|
|
26
|
+
public constructor(
|
|
27
|
+
description: FullSceneDescription<ThreadGeneratorFactory<View2D>>,
|
|
28
|
+
) {
|
|
29
|
+
super(description);
|
|
30
|
+
this.recreateView();
|
|
31
|
+
if (import.meta.hot) {
|
|
32
|
+
import.meta.hot.on('twick:assets', () => {
|
|
33
|
+
this.assetHash = Date.now().toString();
|
|
34
|
+
this.getView().assetHash(this.assetHash);
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
public getView(): View2D {
|
|
40
|
+
return this.view!;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
public override next(): Promise<void> {
|
|
44
|
+
this.getView()
|
|
45
|
+
?.playbackState(this.playback.state)
|
|
46
|
+
.globalTime(this.playback.time);
|
|
47
|
+
return super.next();
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
public async draw(context: CanvasRenderingContext2D) {
|
|
51
|
+
context.save();
|
|
52
|
+
this.renderLifecycle.dispatch([SceneRenderEvent.BeforeRender, context]);
|
|
53
|
+
context.save();
|
|
54
|
+
this.renderLifecycle.dispatch([SceneRenderEvent.BeginRender, context]);
|
|
55
|
+
this.getView()
|
|
56
|
+
.playbackState(this.playback.state)
|
|
57
|
+
.globalTime(this.playback.time)
|
|
58
|
+
.fps(this.playback.fps);
|
|
59
|
+
await this.getView().render(context);
|
|
60
|
+
this.renderLifecycle.dispatch([SceneRenderEvent.FinishRender, context]);
|
|
61
|
+
context.restore();
|
|
62
|
+
this.renderLifecycle.dispatch([SceneRenderEvent.AfterRender, context]);
|
|
63
|
+
context.restore();
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
public override reset(previousScene?: Scene): Promise<void> {
|
|
67
|
+
for (const key of this.registeredNodes.keys()) {
|
|
68
|
+
try {
|
|
69
|
+
this.registeredNodes.get(key)!.dispose();
|
|
70
|
+
} catch (e: any) {
|
|
71
|
+
this.logger.error(e);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
this.registeredNodes.clear();
|
|
75
|
+
this.registeredNodes = new Map<string, Node>();
|
|
76
|
+
this.nodeCounters.clear();
|
|
77
|
+
this.recreateView();
|
|
78
|
+
|
|
79
|
+
return super.reset(previousScene);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
public inspectPosition(x: number, y: number): InspectedElement | null {
|
|
83
|
+
const node = this.getNodeByPosition(x, y);
|
|
84
|
+
return node?.key;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
public getNodeByPosition(x: number, y: number): Node | null {
|
|
88
|
+
return this.execute(() => this.getView().hit(new Vector2(x, y)) ?? null);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
public validateInspection(
|
|
92
|
+
element: InspectedElement | null,
|
|
93
|
+
): InspectedElement | null {
|
|
94
|
+
return this.getNode(element)?.key ?? null;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
public inspectAttributes(
|
|
98
|
+
element: InspectedElement,
|
|
99
|
+
): InspectedAttributes | null {
|
|
100
|
+
const node = this.getNode(element);
|
|
101
|
+
if (!node) return null;
|
|
102
|
+
|
|
103
|
+
const attributes: Record<string, any> = {
|
|
104
|
+
stack: node.creationStack,
|
|
105
|
+
key: node.key,
|
|
106
|
+
};
|
|
107
|
+
for (const {key, meta, signal} of node) {
|
|
108
|
+
if (!meta.inspectable) continue;
|
|
109
|
+
attributes[key] = signal();
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
return attributes;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
public drawOverlay(
|
|
116
|
+
element: InspectedElement,
|
|
117
|
+
matrix: DOMMatrix,
|
|
118
|
+
context: CanvasRenderingContext2D,
|
|
119
|
+
): void {
|
|
120
|
+
const node = this.getNode(element);
|
|
121
|
+
if (node) {
|
|
122
|
+
this.execute(() => {
|
|
123
|
+
node.drawOverlay(context, matrix.multiply(node.localToWorld()));
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
public transformMousePosition(x: number, y: number): Vector2 | null {
|
|
129
|
+
return transformVectorAsPoint(
|
|
130
|
+
new Vector2(x, y),
|
|
131
|
+
this.getView().localToParent().inverse(),
|
|
132
|
+
);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
public registerNode(node: Node, key?: string): [string, () => void] {
|
|
136
|
+
const className = node.constructor?.name ?? 'unknown';
|
|
137
|
+
const counter = (this.nodeCounters.get(className) ?? 0) + 1;
|
|
138
|
+
this.nodeCounters.set(className, counter);
|
|
139
|
+
|
|
140
|
+
if (key && this.registeredNodes.has(key)) {
|
|
141
|
+
useLogger().error({
|
|
142
|
+
message: `Duplicated node key: "${key}".`,
|
|
143
|
+
inspect: key,
|
|
144
|
+
stack: new Error().stack,
|
|
145
|
+
});
|
|
146
|
+
key = undefined;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
key ??= `${this.name}/${className}[${counter}]`;
|
|
150
|
+
this.registeredNodes.set(key, node);
|
|
151
|
+
const currentNodeMap = this.registeredNodes;
|
|
152
|
+
return [key, () => currentNodeMap.delete(key!)];
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
public getNode(key: any): Node | null {
|
|
156
|
+
if (typeof key !== 'string') return null;
|
|
157
|
+
return this.registeredNodes.get(key) ?? null;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
public *getDetachedNodes() {
|
|
161
|
+
for (const node of this.registeredNodes.values()) {
|
|
162
|
+
if (!node.parent() && node !== this.view) yield node;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
public override getMediaAssets(): Array<AssetInfo> {
|
|
167
|
+
const playingVideos = Array.from(this.registeredNodes.values())
|
|
168
|
+
.filter((node): node is Video => node instanceof Video)
|
|
169
|
+
.filter(video => (video as Video).isPlaying());
|
|
170
|
+
|
|
171
|
+
const playingAudios = Array.from(this.registeredNodes.values())
|
|
172
|
+
.filter((node): node is Audio => node instanceof Audio)
|
|
173
|
+
.filter(audio => (audio as Audio).isPlaying());
|
|
174
|
+
|
|
175
|
+
const returnObjects: AssetInfo[] = [];
|
|
176
|
+
|
|
177
|
+
returnObjects.push(
|
|
178
|
+
...playingVideos.map(vid => ({
|
|
179
|
+
key: vid.key,
|
|
180
|
+
type: 'video' as const,
|
|
181
|
+
src: vid.src(),
|
|
182
|
+
decoder: vid.decoder(),
|
|
183
|
+
playbackRate:
|
|
184
|
+
typeof vid.playbackRate === 'function'
|
|
185
|
+
? vid.playbackRate()
|
|
186
|
+
: vid.playbackRate,
|
|
187
|
+
volume: vid.getVolume(),
|
|
188
|
+
currentTime: vid.getCurrentTime(),
|
|
189
|
+
duration: vid.getDuration(),
|
|
190
|
+
})),
|
|
191
|
+
);
|
|
192
|
+
|
|
193
|
+
returnObjects.push(
|
|
194
|
+
...playingAudios.map(audio => ({
|
|
195
|
+
key: audio.key,
|
|
196
|
+
type: 'audio' as const,
|
|
197
|
+
src: audio.src(),
|
|
198
|
+
playbackRate:
|
|
199
|
+
typeof audio.playbackRate === 'function'
|
|
200
|
+
? audio.playbackRate()
|
|
201
|
+
: audio.playbackRate,
|
|
202
|
+
volume: audio.getVolume(),
|
|
203
|
+
currentTime: audio.getCurrentTime(),
|
|
204
|
+
duration: audio.getDuration(),
|
|
205
|
+
})),
|
|
206
|
+
);
|
|
207
|
+
|
|
208
|
+
return returnObjects;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
public override stopAllMedia() {
|
|
212
|
+
const playingMedia = Array.from(this.registeredNodes.values())
|
|
213
|
+
.filter((node): node is Media => node instanceof Media)
|
|
214
|
+
.filter(video => (video as Media).isPlaying());
|
|
215
|
+
|
|
216
|
+
for (const media of playingMedia) {
|
|
217
|
+
media.dispose();
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
public override adjustVolume(volumeScale: number) {
|
|
222
|
+
const mediaNodes = Array.from(this.registeredNodes.values()).filter(
|
|
223
|
+
(node): node is Media => node instanceof Media,
|
|
224
|
+
);
|
|
225
|
+
|
|
226
|
+
for (const media of mediaNodes) {
|
|
227
|
+
media.setVolume(media.getVolume() * volumeScale);
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
protected recreateView() {
|
|
232
|
+
this.execute(() => {
|
|
233
|
+
const size = this.getSize();
|
|
234
|
+
this.view = new View2D({
|
|
235
|
+
position: size.scale(this.resolutionScale / 2),
|
|
236
|
+
scale: this.resolutionScale,
|
|
237
|
+
assetHash: this.assetHash,
|
|
238
|
+
size,
|
|
239
|
+
});
|
|
240
|
+
});
|
|
241
|
+
}
|
|
242
|
+
}
|
package/src/lib/scenes/index.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export * from './makeScene2D';
|
|
2
|
-
export * from './Scene2D';
|
|
3
|
-
export * from './useScene2D';
|
|
1
|
+
export * from './makeScene2D';
|
|
2
|
+
export * from './Scene2D';
|
|
3
|
+
export * from './useScene2D';
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import type {DescriptionOf, ThreadGeneratorFactory} from '@twick/core';
|
|
2
|
-
import type {View2D} from '../components';
|
|
3
|
-
import {Scene2D} from './Scene2D';
|
|
4
|
-
|
|
5
|
-
export function makeScene2D(
|
|
6
|
-
name: string,
|
|
7
|
-
runner: ThreadGeneratorFactory<View2D>,
|
|
8
|
-
): DescriptionOf<Scene2D> {
|
|
9
|
-
return {
|
|
10
|
-
klass: Scene2D,
|
|
11
|
-
name,
|
|
12
|
-
config: runner,
|
|
13
|
-
stack: new Error().stack,
|
|
14
|
-
plugins: ['@twick/2d/editor'],
|
|
15
|
-
};
|
|
16
|
-
}
|
|
1
|
+
import type {DescriptionOf, ThreadGeneratorFactory} from '@twick/core';
|
|
2
|
+
import type {View2D} from '../components';
|
|
3
|
+
import {Scene2D} from './Scene2D';
|
|
4
|
+
|
|
5
|
+
export function makeScene2D(
|
|
6
|
+
name: string,
|
|
7
|
+
runner: ThreadGeneratorFactory<View2D>,
|
|
8
|
+
): DescriptionOf<Scene2D> {
|
|
9
|
+
return {
|
|
10
|
+
klass: Scene2D,
|
|
11
|
+
name,
|
|
12
|
+
config: runner,
|
|
13
|
+
stack: new Error().stack,
|
|
14
|
+
plugins: ['@twick/2d/editor'],
|
|
15
|
+
};
|
|
16
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {useScene} from '@twick/core';
|
|
2
|
-
import type {Scene2D} from './Scene2D';
|
|
3
|
-
|
|
4
|
-
export function useScene2D(): Scene2D {
|
|
5
|
-
return <Scene2D>useScene();
|
|
6
|
-
}
|
|
1
|
+
import {useScene} from '@twick/core';
|
|
2
|
+
import type {Scene2D} from './Scene2D';
|
|
3
|
+
|
|
4
|
+
export function useScene2D(): Scene2D {
|
|
5
|
+
return <Scene2D>useScene();
|
|
6
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "./tsconfig.json",
|
|
3
|
-
"include": ["**/*"],
|
|
4
|
-
"exclude": ["**/*.test.*", "**/__tests__/**/*"]
|
|
5
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"extends": "./tsconfig.json",
|
|
3
|
+
"include": ["**/*"],
|
|
4
|
+
"exclude": ["**/*.test.*", "**/__tests__/**/*"]
|
|
5
|
+
}
|
package/src/lib/tsconfig.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "../tsconfig.base.json",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"types": ["node"],
|
|
5
|
-
"jsx": "react-jsx",
|
|
6
|
-
"jsxImportSource": "@twick/2d/src/lib"
|
|
7
|
-
},
|
|
8
|
-
"include": ["**/*"],
|
|
9
|
-
"exclude": []
|
|
10
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"extends": "../tsconfig.base.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"types": ["node"],
|
|
5
|
+
"jsx": "react-jsx",
|
|
6
|
+
"jsxImportSource": "@twick/2d/src/lib"
|
|
7
|
+
},
|
|
8
|
+
"include": ["**/*"],
|
|
9
|
+
"exclude": []
|
|
10
|
+
}
|
package/src/lib/tsdoc.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json",
|
|
3
|
-
"extends": ["../../../../tsdoc.json"]
|
|
4
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json",
|
|
3
|
+
"extends": ["../../../../tsdoc.json"]
|
|
4
|
+
}
|