@tomorrowevening/hermes 0.0.12 → 0.0.14
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/hermes.js +1255 -1221
- package/dist/hermes.umd.cjs +16 -16
- package/package.json +3 -2
- package/src/core/Application.ts +1 -1
- package/src/core/RemoteController.ts +33 -156
- package/src/core/remote/RemoteComponents.ts +15 -1
- package/src/core/remote/RemoteTheatre.ts +114 -3
- package/src/core/remote/RemoteThree.ts +37 -0
- package/src/core/remote/RemoteTweakpane.ts +28 -2
- package/src/editor/multiView/MultiView.tsx +16 -4
- package/src/editor/sidePanel/inspector/Inspector.tsx +25 -25
- package/src/editor/sidePanel/inspector/InspectorGroup.tsx +1 -8
- package/types/core/Application.d.ts +1 -1
- package/types/core/RemoteController.d.ts +8 -1
- package/types/core/remote/RemoteComponents.d.ts +3 -0
- package/types/core/remote/RemoteTheatre.d.ts +3 -0
- package/types/core/remote/RemoteThree.d.ts +4 -0
- package/types/core/remote/RemoteTweakpane.d.ts +2 -0
- package/types/editor/multiView/MultiView.d.ts +4 -0
@@ -1,179 +1,58 @@
|
|
1
|
-
// Libs
|
2
|
-
import type { ISheet } from '@theatre/core';
|
3
|
-
import studio from '@theatre/studio';
|
4
1
|
// Core
|
5
2
|
import Application from './Application';
|
6
3
|
import { ToolEvents, debugDispatcher } from '@/editor/global';
|
7
|
-
import type { BroadcastData
|
4
|
+
import type { BroadcastData } from './types';
|
5
|
+
import { HandleAppRemoteComponents } from './remote/RemoteComponents';
|
6
|
+
import { HandleAppRemoteTheatre, HandleEditorRemoteTheatre } from './remote/RemoteTheatre';
|
7
|
+
import { HandleAppRemoteThree, HandleEditorRemoteThree } from './remote/RemoteThree';
|
8
|
+
import { HandleAppRemoteTweakpane } from './remote/RemoteTweakpane';
|
9
|
+
|
10
|
+
interface RemoteHandlers {
|
11
|
+
components?: boolean
|
12
|
+
theatre?: boolean
|
13
|
+
three?: boolean
|
14
|
+
tweakpane?: boolean
|
15
|
+
}
|
8
16
|
|
9
|
-
export default function RemoteController(app: Application) {
|
10
|
-
|
17
|
+
export default function RemoteController(app: Application, handlers: RemoteHandlers) {
|
18
|
+
const appHandlers: any[] = [];
|
19
|
+
const editorHandlers: any[] = [];
|
11
20
|
|
12
|
-
|
21
|
+
if (handlers.components) {
|
22
|
+
appHandlers.push(HandleAppRemoteComponents);
|
23
|
+
}
|
13
24
|
|
14
|
-
|
15
|
-
|
25
|
+
if (handlers.theatre) {
|
26
|
+
appHandlers.push(HandleAppRemoteTheatre);
|
27
|
+
HandleEditorRemoteTheatre(app);
|
28
|
+
}
|
29
|
+
|
30
|
+
if (handlers.three) {
|
31
|
+
appHandlers.push(HandleAppRemoteThree);
|
32
|
+
editorHandlers.push(HandleEditorRemoteThree);
|
33
|
+
}
|
34
|
+
if (handlers.tweakpane) {
|
35
|
+
appHandlers.push(HandleAppRemoteTweakpane);
|
36
|
+
}
|
16
37
|
|
38
|
+
function handleAppBroadcast(msg: BroadcastData) {
|
39
|
+
appHandlers.forEach((handler: any) => handler(app, msg));
|
17
40
|
switch (msg.event) {
|
18
41
|
case 'custom':
|
19
42
|
debugDispatcher.dispatchEvent({ type: ToolEvents.CUSTOM, value: msg.data });
|
20
43
|
break;
|
21
|
-
|
22
|
-
// Components
|
23
|
-
case 'selectComponent':
|
24
|
-
debugDispatcher.dispatchEvent({ type: ToolEvents.SELECT_DROPDOWN, value: msg.data });
|
25
|
-
break;
|
26
|
-
case 'draggableListUpdate':
|
27
|
-
debugDispatcher.dispatchEvent({ type: ToolEvents.DRAG_UPDATE, value: msg.data });
|
28
|
-
break;
|
29
|
-
|
30
|
-
// GUI
|
31
|
-
case 'addFolder':
|
32
|
-
app.components.get('debug')?.addFolder(msg.data.name, msg.data.params, msg.data.parent);
|
33
|
-
break;
|
34
|
-
case 'bindObject':
|
35
|
-
app.components.get('debug')?.bind(msg.data.name, msg.data.params, msg.data.parent);
|
36
|
-
break;
|
37
|
-
case 'updateBind':
|
38
|
-
app.components.get('debug')?.triggerBind(msg.data.id, msg.data.value);
|
39
|
-
break;
|
40
|
-
case 'addButton':
|
41
|
-
app.components.get('debug')?.button(msg.data.name, msg.data.callback, msg.data.parent);
|
42
|
-
break;
|
43
|
-
case 'clickButton':
|
44
|
-
app.components.get('debug')?.triggerButton(msg.data.id);
|
45
|
-
break;
|
46
|
-
|
47
|
-
// Theatre
|
48
|
-
case 'setSheet':
|
49
|
-
value = app.components.get('theatre')?.sheets.get(msg.data.sheet);
|
50
|
-
if (value !== undefined) {
|
51
|
-
activeSheet = value;
|
52
|
-
studio.setSelection([value]);
|
53
|
-
}
|
54
|
-
break;
|
55
|
-
case 'setSheetObject':
|
56
|
-
value = app.components.get('theatre')?.sheetObjects.get(`${msg.data.sheet}_${msg.data.key}`);
|
57
|
-
if (value !== undefined) {
|
58
|
-
studio.setSelection([value]);
|
59
|
-
}
|
60
|
-
break;
|
61
|
-
case 'updateSheetObject':
|
62
|
-
value = app.components.get('theatre')?.sheetObjectCBs.get(msg.data.sheetObject);
|
63
|
-
// @ts-ignore
|
64
|
-
if (value !== undefined) value(msg.data.values);
|
65
|
-
break;
|
66
|
-
case 'updateTimeline':
|
67
|
-
activeSheet = app.components.get('theatre')?.sheets.get(msg.data.sheet);
|
68
|
-
if (activeSheet !== undefined) {
|
69
|
-
activeSheet.sequence.position = msg.data.position;
|
70
|
-
}
|
71
|
-
break;
|
72
|
-
|
73
|
-
// Three
|
74
|
-
case 'getObject':
|
75
|
-
debugDispatcher.dispatchEvent({ type: ToolEvents.GET_OBJECT, value: msg.data });
|
76
|
-
break;
|
77
|
-
case 'updateObject':
|
78
|
-
debugDispatcher.dispatchEvent({ type: ToolEvents.UPDATE_OBJECT, value: msg.data });
|
79
|
-
break;
|
80
|
-
case 'createTexture':
|
81
|
-
debugDispatcher.dispatchEvent({ type: ToolEvents.CREATE_TEXTURE, value: msg.data });
|
82
|
-
break;
|
83
|
-
case 'requestMethod':
|
84
|
-
debugDispatcher.dispatchEvent({ type: ToolEvents.REQUEST_METHOD, value: msg.data });
|
85
|
-
break;
|
86
44
|
}
|
87
45
|
}
|
88
46
|
|
89
47
|
function handleEditorBroadcast(msg: BroadcastData) {
|
48
|
+
editorHandlers.forEach((handler: any) => handler(app, msg));
|
90
49
|
switch (msg.event) {
|
91
50
|
case 'custom':
|
92
51
|
debugDispatcher.dispatchEvent({ type: ToolEvents.CUSTOM, value: msg.data });
|
93
52
|
break;
|
94
|
-
|
95
|
-
// Three
|
96
|
-
case 'setObject':
|
97
|
-
debugDispatcher.dispatchEvent({ type: ToolEvents.SET_OBJECT, value: msg.data });
|
98
|
-
break;
|
99
|
-
case 'setScene':
|
100
|
-
debugDispatcher.dispatchEvent({ type: ToolEvents.SET_SCENE, value: msg.data });
|
101
|
-
break;
|
102
|
-
case 'addCamera':
|
103
|
-
debugDispatcher.dispatchEvent({ type: ToolEvents.ADD_CAMERA, value: msg.data });
|
104
|
-
break;
|
105
|
-
case 'removeCamera':
|
106
|
-
debugDispatcher.dispatchEvent({ type: ToolEvents.REMOVE_CAMERA, value: msg.data });
|
107
|
-
break;
|
108
|
-
|
109
53
|
}
|
110
54
|
}
|
111
55
|
|
112
|
-
// App type
|
113
|
-
|
114
|
-
function AppControl() {
|
115
|
-
studio.ui.hide();
|
116
|
-
}
|
117
|
-
|
118
|
-
function EditorControl() {
|
119
|
-
studio.ui.restore();
|
120
|
-
studio.onSelectionChange((value: any[]) => {
|
121
|
-
if (value.length < 1) return;
|
122
|
-
|
123
|
-
value.forEach((obj: any) => {
|
124
|
-
let id = obj.address.sheetId;
|
125
|
-
let type: EditorEvent = 'setSheet';
|
126
|
-
let data = {};
|
127
|
-
switch (obj.type) {
|
128
|
-
case 'Theatre_Sheet_PublicAPI':
|
129
|
-
type = 'setSheet';
|
130
|
-
data = {
|
131
|
-
sheet: obj.address.sheetId,
|
132
|
-
};
|
133
|
-
activeSheet = app.components.get('theatre')?.sheets.get(obj.address.sheetId);
|
134
|
-
break;
|
135
|
-
|
136
|
-
case 'Theatre_SheetObject_PublicAPI':
|
137
|
-
type = 'setSheetObject';
|
138
|
-
id += `_${obj.address.objectKey}`;
|
139
|
-
data = {
|
140
|
-
id: id,
|
141
|
-
sheet: obj.address.sheetId,
|
142
|
-
key: obj.address.objectKey,
|
143
|
-
};
|
144
|
-
break;
|
145
|
-
}
|
146
|
-
app.send({ event: type, target: 'app', data: data });
|
147
|
-
});
|
148
|
-
});
|
149
|
-
|
150
|
-
// Timeline
|
151
|
-
let position = 0;
|
152
|
-
const onRafUpdate = () => {
|
153
|
-
if (
|
154
|
-
activeSheet !== undefined &&
|
155
|
-
position !== activeSheet.sequence.position
|
156
|
-
) {
|
157
|
-
position = activeSheet.sequence.position;
|
158
|
-
const t = activeSheet as ISheet;
|
159
|
-
app.send({
|
160
|
-
event: 'updateTimeline',
|
161
|
-
target: 'app',
|
162
|
-
data: {
|
163
|
-
position: position,
|
164
|
-
sheet: t.address.sheetId,
|
165
|
-
},
|
166
|
-
});
|
167
|
-
}
|
168
|
-
};
|
169
|
-
const onRaf = () => {
|
170
|
-
onRafUpdate();
|
171
|
-
requestAnimationFrame(onRaf);
|
172
|
-
};
|
173
|
-
onRafUpdate(); // Initial position
|
174
|
-
onRaf();
|
175
|
-
}
|
176
|
-
|
177
56
|
// Begin app
|
178
57
|
|
179
58
|
app.listen((msg: BroadcastData) => {
|
@@ -183,6 +62,4 @@ export default function RemoteController(app: Application) {
|
|
183
62
|
handleAppBroadcast(msg);
|
184
63
|
}
|
185
64
|
});
|
186
|
-
|
187
|
-
app.editor ? EditorControl() : AppControl();
|
188
65
|
}
|
@@ -1,5 +1,8 @@
|
|
1
1
|
// Core
|
2
|
+
import { ToolEvents, debugDispatcher } from '@/editor/global';
|
3
|
+
import Application from '../Application';
|
2
4
|
import BaseRemote from './BaseRemote';
|
5
|
+
import { BroadcastData } from '../types';
|
3
6
|
|
4
7
|
/**
|
5
8
|
* Communicates between custom React Components
|
@@ -26,4 +29,15 @@ export default class RemoteComponents extends BaseRemote {
|
|
26
29
|
}
|
27
30
|
});
|
28
31
|
}
|
29
|
-
}
|
32
|
+
}
|
33
|
+
|
34
|
+
export function HandleAppRemoteComponents(_: Application, msg: BroadcastData) {
|
35
|
+
switch (msg.event) {
|
36
|
+
case 'selectComponent':
|
37
|
+
debugDispatcher.dispatchEvent({ type: ToolEvents.SELECT_DROPDOWN, value: msg.data });
|
38
|
+
break;
|
39
|
+
case 'draggableListUpdate':
|
40
|
+
debugDispatcher.dispatchEvent({ type: ToolEvents.DRAG_UPDATE, value: msg.data });
|
41
|
+
break;
|
42
|
+
}
|
43
|
+
}
|
@@ -1,13 +1,14 @@
|
|
1
1
|
// Libs
|
2
2
|
import { getProject } from '@theatre/core';
|
3
3
|
import type { IProject, IProjectConfig, ISheet, ISheetObject } from '@theatre/core';
|
4
|
-
import
|
4
|
+
import studio from '@theatre/studio';
|
5
5
|
// Core
|
6
6
|
import Application from '../Application';
|
7
7
|
import BaseRemote from './BaseRemote';
|
8
8
|
import { isColor } from '@/editor/utils';
|
9
|
-
import { noop } from '../types';
|
9
|
+
import { BroadcastData, EditorEvent, noop } from '../types';
|
10
10
|
import type { DataUpdateCallback, VoidCallback } from '../types';
|
11
|
+
// import { ToolEvents, debugDispatcher } from '@/editor/global';
|
11
12
|
|
12
13
|
export default class RemoteTheatre extends BaseRemote {
|
13
14
|
project: IProject | undefined;
|
@@ -116,4 +117,114 @@ export default class RemoteTheatre extends BaseRemote {
|
|
116
117
|
unsubscribe();
|
117
118
|
}
|
118
119
|
}
|
119
|
-
}
|
120
|
+
}
|
121
|
+
|
122
|
+
let activeSheet: ISheet | undefined;
|
123
|
+
|
124
|
+
export function HandleAppRemoteTheatre(app: Application, msg: BroadcastData) {
|
125
|
+
app.components.forEach((component: any) => {
|
126
|
+
if (component instanceof RemoteTheatre) {
|
127
|
+
let value = undefined;
|
128
|
+
const theatre = component as RemoteTheatre;
|
129
|
+
switch (msg.event) {
|
130
|
+
case 'setSheet':
|
131
|
+
// @ts-ignore
|
132
|
+
value = theatre.sheets.get(msg.data.sheet);
|
133
|
+
if (value !== undefined) {
|
134
|
+
activeSheet = value as ISheet;
|
135
|
+
studio.setSelection([value]);
|
136
|
+
}
|
137
|
+
break;
|
138
|
+
case 'setSheetObject':
|
139
|
+
// @ts-ignore
|
140
|
+
value = theatre.sheetObjects.get(`${msg.data.sheet}_${msg.data.key}`);
|
141
|
+
if (value !== undefined) {
|
142
|
+
studio.setSelection([value]);
|
143
|
+
}
|
144
|
+
break;
|
145
|
+
case 'updateSheetObject':
|
146
|
+
// @ts-ignore
|
147
|
+
value = theatre.sheetObjectCBs.get(msg.data.sheetObject);
|
148
|
+
// @ts-ignore
|
149
|
+
if (value !== undefined) value(msg.data.values);
|
150
|
+
break;
|
151
|
+
case 'updateTimeline':
|
152
|
+
// @ts-ignore
|
153
|
+
value = theatre.sheets.get(msg.data.sheet);
|
154
|
+
if (activeSheet !== undefined) {
|
155
|
+
(activeSheet as ISheet).sequence.position = msg.data.position;
|
156
|
+
}
|
157
|
+
break;
|
158
|
+
}
|
159
|
+
}
|
160
|
+
});
|
161
|
+
}
|
162
|
+
|
163
|
+
export function HandleEditorRemoteTheatre(app: Application) {
|
164
|
+
if (app.editor) {
|
165
|
+
let theatre: RemoteTheatre;
|
166
|
+
app.components.forEach((component: any) => {
|
167
|
+
if (component instanceof RemoteTheatre) {
|
168
|
+
theatre = component;
|
169
|
+
}
|
170
|
+
});
|
171
|
+
studio.ui.restore();
|
172
|
+
studio.onSelectionChange((value: any[]) => {
|
173
|
+
if (value.length < 1) return;
|
174
|
+
|
175
|
+
value.forEach((obj: any) => {
|
176
|
+
let id = obj.address.sheetId;
|
177
|
+
let type: EditorEvent = 'setSheet';
|
178
|
+
let data = {};
|
179
|
+
switch (obj.type) {
|
180
|
+
case 'Theatre_Sheet_PublicAPI':
|
181
|
+
type = 'setSheet';
|
182
|
+
data = {
|
183
|
+
sheet: obj.address.sheetId,
|
184
|
+
};
|
185
|
+
activeSheet = theatre.sheets.get(obj.address.sheetId);
|
186
|
+
break;
|
187
|
+
|
188
|
+
case 'Theatre_SheetObject_PublicAPI':
|
189
|
+
type = 'setSheetObject';
|
190
|
+
id += `_${obj.address.objectKey}`;
|
191
|
+
data = {
|
192
|
+
id: id,
|
193
|
+
sheet: obj.address.sheetId,
|
194
|
+
key: obj.address.objectKey,
|
195
|
+
};
|
196
|
+
break;
|
197
|
+
}
|
198
|
+
app.send({ event: type, target: 'app', data: data });
|
199
|
+
});
|
200
|
+
});
|
201
|
+
|
202
|
+
// Timeline
|
203
|
+
let position = 0;
|
204
|
+
const onRafUpdate = () => {
|
205
|
+
if (
|
206
|
+
activeSheet !== undefined &&
|
207
|
+
position !== activeSheet.sequence.position
|
208
|
+
) {
|
209
|
+
position = activeSheet.sequence.position;
|
210
|
+
const t = activeSheet as ISheet;
|
211
|
+
app.send({
|
212
|
+
event: 'updateTimeline',
|
213
|
+
target: 'app',
|
214
|
+
data: {
|
215
|
+
position: position,
|
216
|
+
sheet: t.address.sheetId,
|
217
|
+
},
|
218
|
+
});
|
219
|
+
}
|
220
|
+
};
|
221
|
+
const onRaf = () => {
|
222
|
+
onRafUpdate();
|
223
|
+
requestAnimationFrame(onRaf);
|
224
|
+
};
|
225
|
+
onRafUpdate(); // Initial position
|
226
|
+
onRaf();
|
227
|
+
} else {
|
228
|
+
studio.ui.hide();
|
229
|
+
}
|
230
|
+
}
|
@@ -2,6 +2,9 @@ import { Camera, Scene } from 'three';
|
|
2
2
|
import BaseRemote from './BaseRemote';
|
3
3
|
import { stripObject, stripScene } from '@/editor/sidePanel/utils';
|
4
4
|
import { hierarchyUUID, resetThreeObjects } from '@/editor/utils';
|
5
|
+
import Application from '../Application';
|
6
|
+
import { BroadcastData } from '../types';
|
7
|
+
import { ToolEvents, debugDispatcher } from '@/editor/global';
|
5
8
|
|
6
9
|
export default class RemoteThree extends BaseRemote {
|
7
10
|
scene?: Scene = undefined;
|
@@ -90,3 +93,37 @@ export default class RemoteThree extends BaseRemote {
|
|
90
93
|
});
|
91
94
|
}
|
92
95
|
}
|
96
|
+
|
97
|
+
export function HandleAppRemoteThree(_: Application, msg: BroadcastData) {
|
98
|
+
switch (msg.event) {
|
99
|
+
case 'getObject':
|
100
|
+
debugDispatcher.dispatchEvent({ type: ToolEvents.GET_OBJECT, value: msg.data });
|
101
|
+
break;
|
102
|
+
case 'updateObject':
|
103
|
+
debugDispatcher.dispatchEvent({ type: ToolEvents.UPDATE_OBJECT, value: msg.data });
|
104
|
+
break;
|
105
|
+
case 'createTexture':
|
106
|
+
debugDispatcher.dispatchEvent({ type: ToolEvents.CREATE_TEXTURE, value: msg.data });
|
107
|
+
break;
|
108
|
+
case 'requestMethod':
|
109
|
+
debugDispatcher.dispatchEvent({ type: ToolEvents.REQUEST_METHOD, value: msg.data });
|
110
|
+
break;
|
111
|
+
}
|
112
|
+
}
|
113
|
+
|
114
|
+
export function HandleEditorRemoteThree(_: Application, msg: BroadcastData) {
|
115
|
+
switch (msg.event) {
|
116
|
+
case 'setObject':
|
117
|
+
debugDispatcher.dispatchEvent({ type: ToolEvents.SET_OBJECT, value: msg.data });
|
118
|
+
break;
|
119
|
+
case 'setScene':
|
120
|
+
debugDispatcher.dispatchEvent({ type: ToolEvents.SET_SCENE, value: msg.data });
|
121
|
+
break;
|
122
|
+
case 'addCamera':
|
123
|
+
debugDispatcher.dispatchEvent({ type: ToolEvents.ADD_CAMERA, value: msg.data });
|
124
|
+
break;
|
125
|
+
case 'removeCamera':
|
126
|
+
debugDispatcher.dispatchEvent({ type: ToolEvents.REMOVE_CAMERA, value: msg.data });
|
127
|
+
break;
|
128
|
+
}
|
129
|
+
}
|
@@ -4,7 +4,7 @@ import * as EssentialsPlugin from '@tweakpane/plugin-essentials';
|
|
4
4
|
// Core
|
5
5
|
import Application from '../Application';
|
6
6
|
import BaseRemote from './BaseRemote';
|
7
|
-
import { noop } from '../types';
|
7
|
+
import { BroadcastData, noop } from '../types';
|
8
8
|
import type { DataUpdateCallback, VoidCallback } from '../types';
|
9
9
|
|
10
10
|
export default class RemoteTweakpane extends BaseRemote {
|
@@ -166,4 +166,30 @@ export default class RemoteTweakpane extends BaseRemote {
|
|
166
166
|
this.inspectorFolder.remove(this.inspectorFolder.children[i]);
|
167
167
|
}
|
168
168
|
}
|
169
|
-
}
|
169
|
+
}
|
170
|
+
|
171
|
+
export function HandleAppRemoteTweakpane(app: Application, msg: BroadcastData) {
|
172
|
+
app.components.forEach((component: any) => {
|
173
|
+
if (component instanceof RemoteTweakpane) {
|
174
|
+
const tweakpane: RemoteTweakpane = component;
|
175
|
+
switch (msg.event) {
|
176
|
+
case 'addFolder':
|
177
|
+
tweakpane.addFolder(msg.data.name, msg.data.params, msg.data.parent);
|
178
|
+
break;
|
179
|
+
case 'bindObject':
|
180
|
+
tweakpane.bind(msg.data.name, msg.data.params, msg.data.parent);
|
181
|
+
break;
|
182
|
+
case 'updateBind':
|
183
|
+
tweakpane.triggerBind(msg.data.id, msg.data.value);
|
184
|
+
break;
|
185
|
+
case 'addButton':
|
186
|
+
tweakpane.button(msg.data.name, msg.data.callback, msg.data.parent);
|
187
|
+
break;
|
188
|
+
case 'clickButton':
|
189
|
+
tweakpane.triggerButton(msg.data.id);
|
190
|
+
break;
|
191
|
+
}
|
192
|
+
return;
|
193
|
+
}
|
194
|
+
});
|
195
|
+
}
|
@@ -44,15 +44,19 @@ let tlCam = cameras.get('Debug')!;
|
|
44
44
|
let trCam = cameras.get('Orthographic')!;
|
45
45
|
let blCam = cameras.get('Front')!;
|
46
46
|
let brCam = cameras.get('Top')!;
|
47
|
+
let sceneSet = false;
|
47
48
|
|
48
49
|
interface MultiViewProps {
|
49
50
|
three: RemoteThree;
|
50
51
|
mode?: MultiViewMode;
|
52
|
+
scenes: Map<string, any>;
|
53
|
+
onSceneSet?: (scene: Scene) => void;
|
54
|
+
onSceneUpdate?: (scene: Scene) => void;
|
51
55
|
}
|
52
56
|
|
53
57
|
export default function MultiView(props: MultiViewProps) {
|
54
58
|
// States
|
55
|
-
const [mode, setMode] = useState<MultiViewMode>(props.mode !== undefined ? props.mode : '
|
59
|
+
const [mode, setMode] = useState<MultiViewMode>(props.mode !== undefined ? props.mode : 'Single');
|
56
60
|
const [renderer, setRenderer] = useState<WebGLRenderer | null>(null);
|
57
61
|
const [modeOpen, setModeOpen] = useState(false);
|
58
62
|
const [renderModeOpen, setRenderModeOpen] = useState(false);
|
@@ -166,12 +170,18 @@ export default function MultiView(props: MultiViewProps) {
|
|
166
170
|
|
167
171
|
// Event handling
|
168
172
|
useEffect(() => {
|
169
|
-
const sceneUpdate = () => {
|
173
|
+
const sceneUpdate = (evt: any) => {
|
170
174
|
dispose(currentScene);
|
171
175
|
scene.remove(currentScene);
|
172
|
-
|
173
|
-
|
176
|
+
|
177
|
+
const sceneClass = props.scenes.get(evt.value.name);
|
178
|
+
if (sceneClass !== undefined) {
|
179
|
+
const sceneInstance = new sceneClass();
|
180
|
+
if (props.onSceneSet !== undefined) props.onSceneSet(sceneInstance);
|
181
|
+
currentScene = sceneInstance;
|
182
|
+
props.three.scene = currentScene;
|
174
183
|
scene.add(currentScene);
|
184
|
+
sceneSet = true;
|
175
185
|
}
|
176
186
|
};
|
177
187
|
|
@@ -310,6 +320,8 @@ export default function MultiView(props: MultiViewProps) {
|
|
310
320
|
control.update();
|
311
321
|
});
|
312
322
|
|
323
|
+
if (props.onSceneUpdate !== undefined && sceneSet) props.onSceneUpdate(currentScene);
|
324
|
+
|
313
325
|
// Drawing
|
314
326
|
renderer.clear();
|
315
327
|
switch (mode) {
|
@@ -11,41 +11,41 @@ import { InspectMaterial } from "./utils/InspectMaterial";
|
|
11
11
|
import { InspectTransform } from "./utils/InspectTransform";
|
12
12
|
import { InspectLight } from "./utils/InspectLight";
|
13
13
|
import { setItemProps } from "../utils";
|
14
|
-
import { AnimationMixer } from "three";
|
15
14
|
import InspectAnimation from "./utils/InspectAnimation";
|
16
15
|
|
16
|
+
const defaultObject: RemoteObject = {
|
17
|
+
name: '',
|
18
|
+
uuid: '',
|
19
|
+
type: '',
|
20
|
+
visible: false,
|
21
|
+
matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
|
22
|
+
animations: [],
|
23
|
+
material: undefined,
|
24
|
+
perspectiveCameraInfo: undefined,
|
25
|
+
orthographicCameraInfo: undefined,
|
26
|
+
lightInfo: undefined,
|
27
|
+
};
|
28
|
+
let currentObject = {...defaultObject};
|
29
|
+
|
17
30
|
export default function Inspector(props: CoreComponentProps) {
|
18
|
-
const [
|
19
|
-
const [currentObject, setCurrentObject] = useState<RemoteObject>({
|
20
|
-
name: '',
|
21
|
-
uuid: '',
|
22
|
-
type: '',
|
23
|
-
visible: false,
|
24
|
-
matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
|
25
|
-
animations: [],
|
26
|
-
material: undefined,
|
27
|
-
perspectiveCameraInfo: undefined,
|
28
|
-
orthographicCameraInfo: undefined,
|
29
|
-
lightInfo: undefined,
|
30
|
-
});
|
31
|
+
const [lastUpdated, setLastUpdated] = useState<number>(-1);
|
31
32
|
|
32
33
|
useEffect(() => {
|
33
34
|
function onSelectItem(evt: any) {
|
34
35
|
const obj = evt.value as RemoteObject;
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
console.log(child.animations);
|
43
|
-
}
|
44
|
-
}
|
36
|
+
currentObject = {...obj};
|
37
|
+
setLastUpdated(Date.now());
|
38
|
+
}
|
39
|
+
|
40
|
+
function setScene() {
|
41
|
+
currentObject = {...defaultObject};
|
42
|
+
setLastUpdated(Date.now());
|
45
43
|
}
|
46
44
|
|
45
|
+
debugDispatcher.addEventListener(ToolEvents.SET_SCENE, setScene);
|
47
46
|
debugDispatcher.addEventListener(ToolEvents.SET_OBJECT, onSelectItem);
|
48
47
|
return () => {
|
48
|
+
debugDispatcher.removeEventListener(ToolEvents.SET_SCENE, setScene);
|
49
49
|
debugDispatcher.removeEventListener(ToolEvents.SET_OBJECT, onSelectItem);
|
50
50
|
};
|
51
51
|
}, []);
|
@@ -54,7 +54,7 @@ export default function Inspector(props: CoreComponentProps) {
|
|
54
54
|
|
55
55
|
return (
|
56
56
|
<Accordion label='Inspector' key='Inspector'>
|
57
|
-
<div id="Inspector" className={props.class} key={
|
57
|
+
<div id="Inspector" className={props.class} key={lastUpdated}>
|
58
58
|
{currentObject.uuid.length > 0 && (
|
59
59
|
<>
|
60
60
|
{/* Core */}
|
@@ -12,11 +12,6 @@ function isGroup(obj: any): obj is InspectorGroupProps {
|
|
12
12
|
}
|
13
13
|
|
14
14
|
export default function InspectorGroup(props: InspectorGroupProps) {
|
15
|
-
// console.log('Group:', props.title);
|
16
|
-
function onChange(label: string, value: any) {
|
17
|
-
console.log('onChange:', label, value);
|
18
|
-
}
|
19
|
-
|
20
15
|
const children: any[] = [];
|
21
16
|
props.items.forEach((child: InspectorFieldProps | InspectorGroupProps) => {
|
22
17
|
if (isGroup(child)) {
|
@@ -38,8 +33,6 @@ export default function InspectorGroup(props: InspectorGroupProps) {
|
|
38
33
|
onChange={(prop: string, value: any) => {
|
39
34
|
if (child.onChange !== undefined) {
|
40
35
|
child.onChange(prop, value);
|
41
|
-
} else {
|
42
|
-
onChange(prop, value);
|
43
36
|
}
|
44
37
|
}}
|
45
38
|
/>
|
@@ -48,7 +41,7 @@ export default function InspectorGroup(props: InspectorGroupProps) {
|
|
48
41
|
});
|
49
42
|
|
50
43
|
return (
|
51
|
-
<Accordion label={props.title} open={
|
44
|
+
<Accordion label={props.title} open={props.expanded === true}>
|
52
45
|
{children}
|
53
46
|
</Accordion>
|
54
47
|
);
|
@@ -4,7 +4,7 @@ export default class Application {
|
|
4
4
|
channel?: BroadcastChannel | undefined;
|
5
5
|
components: Map<string, any>;
|
6
6
|
protected _mode: ApplicationMode;
|
7
|
-
constructor(name: string, debugEnabled: boolean, editorHashtag
|
7
|
+
constructor(name: string, debugEnabled: boolean, editorHashtag?: string);
|
8
8
|
addComponent(name: string, component: BaseRemote): void;
|
9
9
|
dispose(): void;
|
10
10
|
send(data: BroadcastData): void;
|
@@ -1,2 +1,9 @@
|
|
1
1
|
import Application from './Application';
|
2
|
-
|
2
|
+
interface RemoteHandlers {
|
3
|
+
components?: boolean;
|
4
|
+
theatre?: boolean;
|
5
|
+
three?: boolean;
|
6
|
+
tweakpane?: boolean;
|
7
|
+
}
|
8
|
+
export default function RemoteController(app: Application, handlers: RemoteHandlers): void;
|
9
|
+
export {};
|
@@ -1,5 +1,8 @@
|
|
1
|
+
import Application from '../Application';
|
1
2
|
import BaseRemote from './BaseRemote';
|
3
|
+
import { BroadcastData } from '../types';
|
2
4
|
export default class RemoteComponents extends BaseRemote {
|
3
5
|
selectDropdown(dropdown: string, value: any): void;
|
4
6
|
updateDropdown(dropdown: string, list: string[]): void;
|
5
7
|
}
|
8
|
+
export declare function HandleAppRemoteComponents(_: Application, msg: BroadcastData): void;
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import type { IProject, IProjectConfig, ISheet, ISheetObject } from '@theatre/core';
|
2
2
|
import Application from '../Application';
|
3
3
|
import BaseRemote from './BaseRemote';
|
4
|
+
import { BroadcastData } from '../types';
|
4
5
|
import type { DataUpdateCallback, VoidCallback } from '../types';
|
5
6
|
export default class RemoteTheatre extends BaseRemote {
|
6
7
|
project: IProject | undefined;
|
@@ -14,3 +15,5 @@ export default class RemoteTheatre extends BaseRemote {
|
|
14
15
|
sheetObject(sheetName: string, key: string, props: any, onUpdate?: DataUpdateCallback): ISheetObject | undefined;
|
15
16
|
unsubscribe(sheet: ISheetObject): undefined;
|
16
17
|
}
|
18
|
+
export declare function HandleAppRemoteTheatre(app: Application, msg: BroadcastData): void;
|
19
|
+
export declare function HandleEditorRemoteTheatre(app: Application): void;
|
@@ -1,5 +1,7 @@
|
|
1
1
|
import { Camera, Scene } from 'three';
|
2
2
|
import BaseRemote from './BaseRemote';
|
3
|
+
import Application from '../Application';
|
4
|
+
import { BroadcastData } from '../types';
|
3
5
|
export default class RemoteThree extends BaseRemote {
|
4
6
|
scene?: Scene;
|
5
7
|
getObject(uuid: string): void;
|
@@ -11,3 +13,5 @@ export default class RemoteThree extends BaseRemote {
|
|
11
13
|
addCamera(camera: Camera): void;
|
12
14
|
removeCamera(camera: Camera): void;
|
13
15
|
}
|
16
|
+
export declare function HandleAppRemoteThree(_: Application, msg: BroadcastData): void;
|
17
|
+
export declare function HandleEditorRemoteThree(_: Application, msg: BroadcastData): void;
|