@tomorrowevening/hermes 0.0.12 → 0.0.13

package/src/core/RemoteController.ts

@@ -1,179 +1,27 @@
-// Libs
-import type { ISheet } from '@theatre/core';
-import studio from '@theatre/studio';
 // Core
 import Application from './Application';
 import { ToolEvents, debugDispatcher } from '@/editor/global';
-import type { BroadcastData, EditorEvent } from './types';
-
-export default function RemoteController(app: Application) {
-  let activeSheet: ISheet | undefined = undefined;
-
-  // Handlers
+import type { BroadcastData } from './types';
 
+export default function RemoteController(app: Application, appHandlers: any[], editorHandlers: any[]) {
   function handleAppBroadcast(msg: BroadcastData) {
-    let value = undefined;
-
+    appHandlers.forEach((handler: any) => handler(app, msg));
     switch (msg.event) {
       case 'custom':
         debugDispatcher.dispatchEvent({ type: ToolEvents.CUSTOM, value: msg.data });
         break;
-
-      // Components
-      case 'selectComponent':
-        debugDispatcher.dispatchEvent({ type: ToolEvents.SELECT_DROPDOWN, value: msg.data });
-        break;
-      case 'draggableListUpdate':
-        debugDispatcher.dispatchEvent({ type: ToolEvents.DRAG_UPDATE, value: msg.data });
-        break;
-
-      // GUI
-      case 'addFolder':
-        app.components.get('debug')?.addFolder(msg.data.name, msg.data.params, msg.data.parent);
-        break;
-      case 'bindObject':
-        app.components.get('debug')?.bind(msg.data.name, msg.data.params, msg.data.parent);
-        break;
-      case 'updateBind':
-        app.components.get('debug')?.triggerBind(msg.data.id, msg.data.value);
-        break;
-      case 'addButton':
-        app.components.get('debug')?.button(msg.data.name, msg.data.callback, msg.data.parent);
-        break;
-      case 'clickButton':
-        app.components.get('debug')?.triggerButton(msg.data.id);
-        break;
-
-      // Theatre
-      case 'setSheet':
-        value = app.components.get('theatre')?.sheets.get(msg.data.sheet);
-        if (value !== undefined) {
-          activeSheet = value;
-          studio.setSelection([value]);
-        }
-        break;
-      case 'setSheetObject':
-        value = app.components.get('theatre')?.sheetObjects.get(`${msg.data.sheet}_${msg.data.key}`);
-        if (value !== undefined) {
-          studio.setSelection([value]);
-        }
-        break;
-      case 'updateSheetObject':
-        value = app.components.get('theatre')?.sheetObjectCBs.get(msg.data.sheetObject);
-        // @ts-ignore
-        if (value !== undefined) value(msg.data.values);
-        break;
-      case 'updateTimeline':
-        activeSheet = app.components.get('theatre')?.sheets.get(msg.data.sheet);
-        if (activeSheet !== undefined) {
-          activeSheet.sequence.position = msg.data.position;
-        }
-        break;
-
-      // Three
-      case 'getObject':
-        debugDispatcher.dispatchEvent({ type: ToolEvents.GET_OBJECT, value: msg.data });
-        break;
-      case 'updateObject':
-        debugDispatcher.dispatchEvent({ type: ToolEvents.UPDATE_OBJECT, value: msg.data });
-        break;
-      case 'createTexture':
-        debugDispatcher.dispatchEvent({ type: ToolEvents.CREATE_TEXTURE, value: msg.data });
-        break;
-      case 'requestMethod':
-        debugDispatcher.dispatchEvent({ type: ToolEvents.REQUEST_METHOD, value: msg.data });
-        break;
     }
   }
 
   function handleEditorBroadcast(msg: BroadcastData) {
+    editorHandlers.forEach((handler: any) => handler(app, msg));
     switch (msg.event) {
       case 'custom':
         debugDispatcher.dispatchEvent({ type: ToolEvents.CUSTOM, value: msg.data });
         break;
-
-      // Three
-      case 'setObject':
-        debugDispatcher.dispatchEvent({ type: ToolEvents.SET_OBJECT, value: msg.data });
-        break;
-      case 'setScene':
-        debugDispatcher.dispatchEvent({ type: ToolEvents.SET_SCENE, value: msg.data });
-        break;
-      case 'addCamera':
-        debugDispatcher.dispatchEvent({ type: ToolEvents.ADD_CAMERA, value: msg.data });
-        break;
-      case 'removeCamera':
-        debugDispatcher.dispatchEvent({ type: ToolEvents.REMOVE_CAMERA, value: msg.data });
-        break;
-      
     }
   }
 
-  // App type
-
-  function AppControl() {
-    studio.ui.hide();
-  }
-
-  function EditorControl() {
-    studio.ui.restore();
-    studio.onSelectionChange((value: any[]) => {
-      if (value.length < 1) return;
-  
-      value.forEach((obj: any) => {
-        let id = obj.address.sheetId;
-        let type: EditorEvent = 'setSheet';
-        let data = {};
-        switch (obj.type) {
-          case 'Theatre_Sheet_PublicAPI':
-            type = 'setSheet';
-            data = {
-              sheet: obj.address.sheetId,
-            };
-            activeSheet = app.components.get('theatre')?.sheets.get(obj.address.sheetId);
-            break;
-  
-          case 'Theatre_SheetObject_PublicAPI':
-            type = 'setSheetObject';
-            id += `_${obj.address.objectKey}`;
-            data = {
-              id: id,
-              sheet: obj.address.sheetId,
-              key: obj.address.objectKey,
-            };
-            break;
-        }
-        app.send({ event: type, target: 'app', data: data });
-      });
-    });
-  
-    // Timeline
-    let position = 0;
-    const onRafUpdate = () => {
-      if (
-        activeSheet !== undefined &&
-        position !== activeSheet.sequence.position
-      ) {
-        position = activeSheet.sequence.position;
-        const t = activeSheet as ISheet;
-        app.send({
-          event: 'updateTimeline',
-          target: 'app',
-          data: {
-            position: position,
-            sheet: t.address.sheetId,
-          },
-        });
-      }
-    };
-    const onRaf = () => {
-      onRafUpdate();
-      requestAnimationFrame(onRaf);
-    };
-    onRafUpdate(); // Initial position
-    onRaf();
-  }
-
   // Begin app
 
   app.listen((msg: BroadcastData) => {
@@ -183,6 +31,4 @@ export default function RemoteController(app: Application) {
       handleAppBroadcast(msg);
     }
   });
-
-  app.editor ? EditorControl() : AppControl();
 }

package/src/core/remote/RemoteComponents.ts

@@ -1,5 +1,8 @@
 // Core
+import { ToolEvents, debugDispatcher } from '@/editor/global';
+import Application from '../Application';
 import BaseRemote from './BaseRemote';
+import { BroadcastData } from '../types';
 
 /**
  * Communicates between custom React Components
@@ -26,4 +29,15 @@ export default class RemoteComponents extends BaseRemote {
       }
     });
   }
-}
+}
+
+export function HandleAppRemoteComponents(_: Application, msg: BroadcastData) {
+  switch (msg.event) {
+    case 'selectComponent':
+      debugDispatcher.dispatchEvent({ type: ToolEvents.SELECT_DROPDOWN, value: msg.data });
+      break;
+    case 'draggableListUpdate':
+      debugDispatcher.dispatchEvent({ type: ToolEvents.DRAG_UPDATE, value: msg.data });
+      break;
+  }
+}

package/src/core/remote/RemoteTheatre.ts

@@ -1,13 +1,14 @@
 // Libs
 import { getProject } from '@theatre/core';
 import type { IProject, IProjectConfig, ISheet, ISheetObject } from '@theatre/core';
-import {} from '@theatre/studio';
+import studio from '@theatre/studio';
 // Core
 import Application from '../Application';
 import BaseRemote from './BaseRemote';
 import { isColor } from '@/editor/utils';
-import { noop } from '../types';
+import { BroadcastData, EditorEvent, noop } from '../types';
 import type { DataUpdateCallback, VoidCallback } from '../types';
+// import { ToolEvents, debugDispatcher } from '@/editor/global';
 
 export default class RemoteTheatre extends BaseRemote {
   project: IProject | undefined;
@@ -116,4 +117,114 @@ export default class RemoteTheatre extends BaseRemote {
       unsubscribe();
     }
   }
-}
+}
+
+let activeSheet: ISheet | undefined;
+
+export function HandleAppRemoteTheatre(app: Application, msg: BroadcastData) {
+  app.components.forEach((component: any) => {
+    if (component instanceof RemoteTheatre) {
+      let value = undefined;
+      const theatre = component as RemoteTheatre;
+      switch (msg.event) {
+        case 'setSheet':
+          // @ts-ignore
+          value = theatre.sheets.get(msg.data.sheet);
+          if (value !== undefined) {
+            activeSheet = value as ISheet;
+            studio.setSelection([value]);
+          }
+          break;
+        case 'setSheetObject':
+          // @ts-ignore
+          value = theatre.sheetObjects.get(`${msg.data.sheet}_${msg.data.key}`);
+          if (value !== undefined) {
+            studio.setSelection([value]);
+          }
+          break;
+        case 'updateSheetObject':
+          // @ts-ignore
+          value = theatre.sheetObjectCBs.get(msg.data.sheetObject);
+          // @ts-ignore
+          if (value !== undefined) value(msg.data.values);
+          break;
+        case 'updateTimeline':
+          // @ts-ignore
+          value = theatre.sheets.get(msg.data.sheet);
+          if (activeSheet !== undefined) {
+            (activeSheet as ISheet).sequence.position = msg.data.position;
+          }
+          break;
+      }
+    }
+  });
+}
+
+export function HandleEditorRemoteTheatre(app: Application) {
+  if (app.editor) {
+    let theatre: RemoteTheatre;
+    app.components.forEach((component: any) => {
+      if (component instanceof RemoteTheatre) {
+        theatre = component;
+      }
+    });
+    studio.ui.restore();
+    studio.onSelectionChange((value: any[]) => {
+      if (value.length < 1) return;
+
+      value.forEach((obj: any) => {
+        let id = obj.address.sheetId;
+        let type: EditorEvent = 'setSheet';
+        let data = {};
+        switch (obj.type) {
+          case 'Theatre_Sheet_PublicAPI':
+            type = 'setSheet';
+            data = {
+              sheet: obj.address.sheetId,
+            };
+            activeSheet = theatre.sheets.get(obj.address.sheetId);
+            break;
+
+          case 'Theatre_SheetObject_PublicAPI':
+            type = 'setSheetObject';
+            id += `_${obj.address.objectKey}`;
+            data = {
+              id: id,
+              sheet: obj.address.sheetId,
+              key: obj.address.objectKey,
+            };
+            break;
+        }
+        app.send({ event: type, target: 'app', data: data });
+      });
+    });
+
+    // Timeline
+    let position = 0;
+    const onRafUpdate = () => {
+      if (
+        activeSheet !== undefined &&
+        position !== activeSheet.sequence.position
+      ) {
+        position = activeSheet.sequence.position;
+        const t = activeSheet as ISheet;
+        app.send({
+          event: 'updateTimeline',
+          target: 'app',
+          data: {
+            position: position,
+            sheet: t.address.sheetId,
+          },
+        });
+      }
+    };
+    const onRaf = () => {
+      onRafUpdate();
+      requestAnimationFrame(onRaf);
+    };
+    onRafUpdate(); // Initial position
+    onRaf();
+  } else {
+    studio.ui.hide();
+  }
+}

package/src/core/remote/RemoteThree.ts

@@ -2,6 +2,9 @@ import { Camera, Scene } from 'three';
 import BaseRemote from './BaseRemote';
 import { stripObject, stripScene } from '@/editor/sidePanel/utils';
 import { hierarchyUUID, resetThreeObjects } from '@/editor/utils';
+import Application from '../Application';
+import { BroadcastData } from '../types';
+import { ToolEvents, debugDispatcher } from '@/editor/global';
 
 export default class RemoteThree extends BaseRemote {
   scene?: Scene = undefined;
@@ -90,3 +93,37 @@ export default class RemoteThree extends BaseRemote {
     });
   }
 }
+
+export function HandleAppRemoteThree(_: Application, msg: BroadcastData) {
+  switch (msg.event) {
+    case 'getObject':
+      debugDispatcher.dispatchEvent({ type: ToolEvents.GET_OBJECT, value: msg.data });
+      break;
+    case 'updateObject':
+      debugDispatcher.dispatchEvent({ type: ToolEvents.UPDATE_OBJECT, value: msg.data });
+      break;
+    case 'createTexture':
+      debugDispatcher.dispatchEvent({ type: ToolEvents.CREATE_TEXTURE, value: msg.data });
+      break;
+    case 'requestMethod':
+      debugDispatcher.dispatchEvent({ type: ToolEvents.REQUEST_METHOD, value: msg.data });
+      break;
+  }
+}
+
+export function HandleEditorRemoteThree(_: Application, msg: BroadcastData) {
+  switch (msg.event) {
+    case 'setObject':
+      debugDispatcher.dispatchEvent({ type: ToolEvents.SET_OBJECT, value: msg.data });
+      break;
+    case 'setScene':
+      debugDispatcher.dispatchEvent({ type: ToolEvents.SET_SCENE, value: msg.data });
+      break;
+    case 'addCamera':
+      debugDispatcher.dispatchEvent({ type: ToolEvents.ADD_CAMERA, value: msg.data });
+      break;
+    case 'removeCamera':
+      debugDispatcher.dispatchEvent({ type: ToolEvents.REMOVE_CAMERA, value: msg.data });
+      break;
+  }
+}

package/src/core/remote/RemoteTweakpane.ts

@@ -4,7 +4,7 @@ import * as EssentialsPlugin from '@tweakpane/plugin-essentials';
 // Core
 import Application from '../Application';
 import BaseRemote from './BaseRemote';
-import { noop } from '../types';
+import { BroadcastData, noop } from '../types';
 import type { DataUpdateCallback, VoidCallback } from '../types';
 
 export default class RemoteTweakpane extends BaseRemote {
@@ -166,4 +166,30 @@ export default class RemoteTweakpane extends BaseRemote {
       this.inspectorFolder.remove(this.inspectorFolder.children[i]);
     }
   }
-}
+}
+
+export function HandleAppRemoteTweakpane(app: Application, msg: BroadcastData) {
+  app.components.forEach((component: any) => {
+    if (component instanceof RemoteTweakpane) {
+      const tweakpane: RemoteTweakpane = component;
+      switch (msg.event) {
+        case 'addFolder':
+          tweakpane.addFolder(msg.data.name, msg.data.params, msg.data.parent);
+          break;
+        case 'bindObject':
+          tweakpane.bind(msg.data.name, msg.data.params, msg.data.parent);
+          break;
+        case 'updateBind':
+          tweakpane.triggerBind(msg.data.id, msg.data.value);
+          break;
+        case 'addButton':
+          tweakpane.button(msg.data.name, msg.data.callback, msg.data.parent);
+          break;
+        case 'clickButton':
+          tweakpane.triggerButton(msg.data.id);
+          break;
+      }
+      return;
+    }
+  });
+}

package/src/editor/multiView/MultiView.tsx

@@ -44,15 +44,19 @@ let tlCam = cameras.get('Debug')!;
 let trCam = cameras.get('Orthographic')!;
 let blCam = cameras.get('Front')!;
 let brCam = cameras.get('Top')!;
+let sceneSet = false;
 
 interface MultiViewProps {
   three: RemoteThree;
   mode?: MultiViewMode;
+  scenes: Map<string, any>;
+  onSceneSet?: (scene: Scene) => void;
+  onSceneUpdate?: (scene: Scene) => void;
 }
 
 export default function MultiView(props: MultiViewProps) {
   // States
-  const [mode, setMode] = useState<MultiViewMode>(props.mode !== undefined ? props.mode : 'Quad');
+  const [mode, setMode] = useState<MultiViewMode>(props.mode !== undefined ? props.mode : 'Single');
   const [renderer, setRenderer] = useState<WebGLRenderer | null>(null);
   const [modeOpen, setModeOpen] = useState(false);
   const [renderModeOpen, setRenderModeOpen] = useState(false);
@@ -166,12 +170,18 @@ export default function MultiView(props: MultiViewProps) {
 
   // Event handling
   useEffect(() => {
-    const sceneUpdate = () => {
+    const sceneUpdate = (evt: any) => {
       dispose(currentScene);
       scene.remove(currentScene);
-      if (props.three.scene !== undefined) {
-        currentScene = props.three.scene;
+
+      const sceneClass = props.scenes.get(evt.value.name);
+      if (sceneClass !== undefined) {
+        const sceneInstance = new sceneClass();
+        if (props.onSceneSet !== undefined) props.onSceneSet(sceneInstance);
+        currentScene = sceneInstance;
+        props.three.scene = currentScene;
         scene.add(currentScene);
+        sceneSet = true;
       }
     };
 
@@ -310,6 +320,8 @@ export default function MultiView(props: MultiViewProps) {
         control.update();
       });
 
+      if (props.onSceneUpdate !== undefined && sceneSet) props.onSceneUpdate(currentScene);
+
       // Drawing
       renderer.clear();
       switch (mode) {

package/src/editor/sidePanel/inspector/Inspector.tsx

@@ -11,41 +11,38 @@ import { InspectMaterial } from "./utils/InspectMaterial";
 import { InspectTransform } from "./utils/InspectTransform";
 import { InspectLight } from "./utils/InspectLight";
 import { setItemProps } from "../utils";
-import { AnimationMixer } from "three";
 import InspectAnimation from "./utils/InspectAnimation";
 
+const defaultObject: RemoteObject = {
+  name: '',
+  uuid: '',
+  type: '',
+  visible: false,
+  matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+  animations: [],
+  material: undefined,
+  perspectiveCameraInfo: undefined,
+  orthographicCameraInfo: undefined,
+  lightInfo: undefined,
+};
+
 export default function Inspector(props: CoreComponentProps) {
-  const [lastRefresh, setLastRefresh] = useState(-1);
-  const [currentObject, setCurrentObject] = useState<RemoteObject>({
-    name: '',
-    uuid: '',
-    type: '',
-    visible: false,
-    matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
-    animations: [],
-    material: undefined,
-    perspectiveCameraInfo: undefined,
-    orthographicCameraInfo: undefined,
-    lightInfo: undefined,
-  });
+  const [currentObject, setCurrentObject] = useState<RemoteObject>(defaultObject);
 
   useEffect(() => {
     function onSelectItem(evt: any) {
       const obj = evt.value as RemoteObject;
       setCurrentObject(obj);
-      setLastRefresh(Date.now());
-      if (props.three.scene !== undefined) {
-        const child = props.three.scene.getObjectByProperty('uuid', obj.uuid);
-        if (child !== undefined && child.animations.length > 0) {
-          const mixer = new AnimationMixer(child);
-          console.log(mixer);
-          console.log(child.animations);
-        }
-      }
     }
 
+    function setScene() {
+      setCurrentObject(defaultObject);
+    }
+
+    debugDispatcher.addEventListener(ToolEvents.SET_SCENE, setScene);
     debugDispatcher.addEventListener(ToolEvents.SET_OBJECT, onSelectItem);
     return () => {
+      debugDispatcher.removeEventListener(ToolEvents.SET_SCENE, setScene);
       debugDispatcher.removeEventListener(ToolEvents.SET_OBJECT, onSelectItem);
     };
   }, []);
@@ -54,7 +51,7 @@ export default function Inspector(props: CoreComponentProps) {
 
   return (
     <Accordion label='Inspector' key='Inspector'>
-      <div id="Inspector" className={props.class} key={lastRefresh}>
+      <div id="Inspector" className={props.class}>
         {currentObject.uuid.length > 0 && (
           <>
             {/* Core */}

package/types/core/Application.d.ts

@@ -4,7 +4,7 @@ export default class Application {
     channel?: BroadcastChannel | undefined;
     components: Map<string, any>;
     protected _mode: ApplicationMode;
-    constructor(name: string, debugEnabled: boolean, editorHashtag: string);
+    constructor(name: string, debugEnabled: boolean, editorHashtag?: string);
     addComponent(name: string, component: BaseRemote): void;
     dispose(): void;
     send(data: BroadcastData): void;

package/types/core/RemoteController.d.ts

@@ -1,2 +1,2 @@
 import Application from './Application';
-export default function RemoteController(app: Application): void;
+export default function RemoteController(app: Application, appHandlers: any[], editorHandlers: any[]): void;

package/types/core/remote/RemoteComponents.d.ts

@@ -1,5 +1,8 @@
+import Application from '../Application';
 import BaseRemote from './BaseRemote';
+import { BroadcastData } from '../types';
 export default class RemoteComponents extends BaseRemote {
     selectDropdown(dropdown: string, value: any): void;
     updateDropdown(dropdown: string, list: string[]): void;
 }
+export declare function HandleAppRemoteComponents(_: Application, msg: BroadcastData): void;

package/types/core/remote/RemoteTheatre.d.ts

@@ -1,6 +1,7 @@
 import type { IProject, IProjectConfig, ISheet, ISheetObject } from '@theatre/core';
 import Application from '../Application';
 import BaseRemote from './BaseRemote';
+import { BroadcastData } from '../types';
 import type { DataUpdateCallback, VoidCallback } from '../types';
 export default class RemoteTheatre extends BaseRemote {
     project: IProject | undefined;
@@ -14,3 +15,5 @@ export default class RemoteTheatre extends BaseRemote {
     sheetObject(sheetName: string, key: string, props: any, onUpdate?: DataUpdateCallback): ISheetObject | undefined;
     unsubscribe(sheet: ISheetObject): undefined;
 }
+export declare function HandleAppRemoteTheatre(app: Application, msg: BroadcastData): void;
+export declare function HandleEditorRemoteTheatre(app: Application): void;

package/types/core/remote/RemoteThree.d.ts

@@ -1,5 +1,7 @@
 import { Camera, Scene } from 'three';
 import BaseRemote from './BaseRemote';
+import Application from '../Application';
+import { BroadcastData } from '../types';
 export default class RemoteThree extends BaseRemote {
     scene?: Scene;
     getObject(uuid: string): void;
@@ -11,3 +13,5 @@ export default class RemoteThree extends BaseRemote {
     addCamera(camera: Camera): void;
     removeCamera(camera: Camera): void;
 }
+export declare function HandleAppRemoteThree(_: Application, msg: BroadcastData): void;
+export declare function HandleEditorRemoteThree(_: Application, msg: BroadcastData): void;

package/types/core/remote/RemoteTweakpane.d.ts

@@ -1,6 +1,7 @@
 import { Pane } from 'tweakpane';
 import Application from '../Application';
 import BaseRemote from './BaseRemote';
+import { BroadcastData } from '../types';
 import type { DataUpdateCallback, VoidCallback } from '../types';
 export default class RemoteTweakpane extends BaseRemote {
     bindCBs: Map<string, DataUpdateCallback>;
@@ -21,3 +22,4 @@ export default class RemoteTweakpane extends BaseRemote {
     createInspector(): void;
     clearInspector(): void;
 }
+export declare function HandleAppRemoteTweakpane(app: Application, msg: BroadcastData): void;

package/types/editor/multiView/MultiView.d.ts

@@ -1,9 +1,13 @@
+import { Scene } from 'three';
 import { MultiViewMode } from './MultiViewData';
 import './MultiView.scss';
 import RemoteThree from '@/core/remote/RemoteThree';
 interface MultiViewProps {
     three: RemoteThree;
     mode?: MultiViewMode;
+    scenes: Map<string, any>;
+    onSceneSet?: (scene: Scene) => void;
+    onSceneUpdate?: (scene: Scene) => void;
 }
 export default function MultiView(props: MultiViewProps): import("react/jsx-runtime").JSX.Element;
 export {};