@tomorrowevening/hermes 0.0.2 → 0.0.3

package/src/core/RemoteController.ts

@@ -1,135 +1,185 @@
 // Libs
-import type { ISheet } from '@theatre/core'
-import studio from '@theatre/studio'
+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'
+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
-
-  // Application
-  const showApp = () => {
-    studio.ui.hide()
-
-    app.listen((msg: BroadcastData) => {
-      let value = undefined
-      switch (msg.event) {
-        // Components
-        case 'draggableListUpdate':
-          debugDispatcher.dispatchEvent({ type: ToolEvents.DRAG_UPDATE, value: msg.data })
-          break
-        case 'selectComponent':
-          debugDispatcher.dispatchEvent({ type: ToolEvents.SELECT_DROPDOWN, value: msg.data })
-          break
-
-        // GUI Events
-        case 'addFolder':
-          app.debug?.addFolder(msg.data.name, msg.data.params, msg.data.parent)
-          break
-        case 'bindObject':
-          app.debug?.bind(msg.data.name, msg.data.params, msg.data.parent)
-          break
-        case 'updateBind':
-          app.debug?.triggerBind(msg.data.id, msg.data.value)
-          break
-        case 'addButton':
-          app.debug?.button(msg.data.name, msg.data.callback, msg.data.parent)
-          break
-        case 'clickButton':
-          app.debug?.triggerButton(msg.data.id)
-          break
-
-        // Theatre Events
-        case 'setSheet':
-          value = app.theatre?.sheets.get(msg.data.sheet)
-          if (value !== undefined) {
-            activeSheet = value
-            studio.setSelection([value])
-          }
-          break
-        case 'setSheetObject':
-          value = app.theatre?.sheetObjects.get(`${msg.data.sheet}_${msg.data.key}`)
-          if (value !== undefined) {
-            studio.setSelection([value])
-          }
-          break
-        case 'updateSheetObject':
-          value = app.theatre?.sheetObjectCBs.get(msg.data.sheetObject)
-          if (value !== undefined) value(msg.data.values)
-          break
-        case 'updateTimeline':
-          activeSheet = app.theatre?.sheets.get(msg.data.sheet)
-          if (activeSheet !== undefined) {
-            activeSheet.sequence.position = msg.data.position
-          }
-          break
-      }
-    })
+  let activeSheet: ISheet | undefined = undefined;
+  const mode = app.editor ? 'editor' : 'app';
+
+  // Handlers
+
+  function handleAppBroadcast(msg: BroadcastData) {
+    let value = undefined;
+
+    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 'getScene':
+        debugDispatcher.dispatchEvent({ type: ToolEvents.GET_SCENE });
+        break;
+      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;
+    }
   }
 
-  // Editor
-  const showEditor = () => {
-    studio.ui.restore()
+  function handleEditorBroadcast(msg: BroadcastData) {
+    switch (msg.event) {
+      case 'custom':
+        debugDispatcher.dispatchEvent({ type: ToolEvents.CUSTOM, value: msg.data });
+        break;
 
-    studio.onSelectionChange((value: any[]) => {
-      if (value.length < 1) return
+      // 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;
+    }
+  }
 
+  // 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 = {}
+        let id = obj.address.sheetId;
+        let type: EditorEvent = 'setSheet';
+        let data = {};
         switch (obj.type) {
           case 'Theatre_Sheet_PublicAPI':
-            type = 'setSheet'
+            type = 'setSheet';
             data = {
               sheet: obj.address.sheetId,
-            }
-            activeSheet = app.theatre?.sheets.get(obj.address.sheetId)
-            break
-
+            };
+            activeSheet = app.components.get('theatre')?.sheets.get(obj.address.sheetId);
+            break;
+  
           case 'Theatre_SheetObject_PublicAPI':
-            type = 'setSheetObject'
-            id += `_${obj.address.objectKey}`
+            type = 'setSheetObject';
+            id += `_${obj.address.objectKey}`;
             data = {
               id: id,
               sheet: obj.address.sheetId,
               key: obj.address.objectKey,
-            }
-            break
+            };
+            break;
         }
-        app.send({ event: type, data: data })
-      })
-    })
-
+        app.send({ event: type, target: 'app', data: data });
+      });
+    });
+  
     // Timeline
-    let position = 0
+    let position = 0;
     const onRafUpdate = () => {
       if (
         activeSheet !== undefined &&
         position !== activeSheet.sequence.position
       ) {
-        position = activeSheet.sequence.position
-        const t = activeSheet as ISheet
+        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()
+      onRafUpdate();
+      requestAnimationFrame(onRaf);
+    };
+    onRafUpdate(); // Initial position
+    onRaf();
+  }
 
+  // Begin app
 
-  }
+  app.listen((msg: BroadcastData) => {
+    if (mode === 'app') {
+      handleAppBroadcast(msg);
+    } else {
+      handleEditorBroadcast(msg);
+    }
+  });
 
-  app.editor ? showEditor() : showApp()
+  app.editor ? EditorControl() : AppControl();
 }

package/src/core/remote/BaseRemote.ts

@@ -1,13 +1,13 @@
-import Application from '../Application'
+import Application from '../Application';
 
 /**
  * Base class for remote-related extensions
  */
 export default class BaseRemote {
-  protected app: Application
+  protected app: Application;
 
   constructor(app: Application) {
-    this.app = app
+    this.app = app;
   }
 
   dispose() {

package/src/core/remote/RemoteComponents.ts

@@ -1,32 +1,29 @@
 // Core
-import Application from '../Application'
-import BaseRemote from './BaseRemote'
+import BaseRemote from './BaseRemote';
 
 /**
  * Communicates between custom React Components
  */
 export default class RemoteComponents extends BaseRemote {
-  constructor(app: Application) {
-    super(app)
-  }
-
   selectDropdown(dropdown: string, value: any) {
     this.app.send({
       event: 'selectComponent',
+      target: 'app',
       data: {
         dropdown,
         value
       }
-    })
+    });
   }
 
   updateDropdown(dropdown: string, list: string[]) {
     this.app.send({
       event: 'draggableListUpdate',
+      target: 'app',
       data: {
         dropdown,
         value: list
       }
-    })
+    });
   }
 }

package/src/core/remote/RemoteTheatre.ts

@@ -1,49 +1,50 @@
 // Libs
-import { getProject } from '@theatre/core'
-import type { IProject, IProjectConfig, ISheet, ISheetObject } from '@theatre/core'
+import { getProject } from '@theatre/core';
+import type { IProject, IProjectConfig, ISheet, ISheetObject } from '@theatre/core';
+import {} from '@theatre/studio';
 // Core
-import Application from '../Application'
-import BaseRemote from './BaseRemote'
-import { isColor } from '../../editor/utils'
-import { noop } from '../types'
-import type { DataUpdateCallback, VoidCallback } from '../types'
+import Application from '../Application';
+import BaseRemote from './BaseRemote';
+import { isColor } from '@/editor/utils';
+import { noop } from '../types';
+import type { DataUpdateCallback, VoidCallback } from '../types';
 
 export default class RemoteTheatre extends BaseRemote {
-  project: IProject | undefined
-  sheets: Map<string, ISheet>
-  sheetObjects: Map<string, ISheetObject>
-  sheetObjectCBs: Map<string, DataUpdateCallback>
-  sheetObjectUnsubscribe: Map<string, VoidCallback>
+  project: IProject | undefined;
+  sheets: Map<string, ISheet>;
+  sheetObjects: Map<string, ISheetObject>;
+  sheetObjectCBs: Map<string, DataUpdateCallback>;
+  sheetObjectUnsubscribe: Map<string, VoidCallback>;
 
   constructor(app: Application, projectName: string, projectConfig?: IProjectConfig | undefined) {
-    super(app)
-    this.project = getProject(projectName, projectConfig)
-    this.sheets = new Map()
-    this.sheetObjects = new Map()
-    this.sheetObjectCBs = new Map()
-    this.sheetObjectUnsubscribe = new Map()
+    super(app);
+    this.project = getProject(projectName, projectConfig);
+    this.sheets = new Map();
+    this.sheetObjects = new Map();
+    this.sheetObjectCBs = new Map();
+    this.sheetObjectUnsubscribe = new Map();
   }
 
   override dispose(): void {
-    this.project = undefined
-    this.sheets = new Map()
-    this.sheetObjects = new Map()
-    this.sheetObjectCBs = new Map()
-    this.sheetObjectUnsubscribe = new Map()
+    this.project = undefined;
+    this.sheets = new Map();
+    this.sheetObjects = new Map();
+    this.sheetObjectCBs = new Map();
+    this.sheetObjectUnsubscribe = new Map();
   }
 
   sheet(name: string): ISheet | undefined {
     if (this.project === undefined) {
-      console.error('Theatre Project hasn\'t been created yet.')
-      return undefined
+      console.error('Theatre Project hasn\'t been created yet.');
+      return undefined;
     }
 
-    let sheet = this.sheets.get(name)
-    if (sheet !== undefined) return sheet
+    let sheet = this.sheets.get(name);
+    if (sheet !== undefined) return sheet;
 
-    sheet = this.project?.sheet(name)
-    this.sheets.set(name, sheet)
-    return sheet
+    sheet = this.project?.sheet(name);
+    this.sheets.set(name, sheet);
+    return sheet;
   }
 
   sheetObject(
@@ -53,27 +54,27 @@ export default class RemoteTheatre extends BaseRemote {
     onUpdate?: DataUpdateCallback,
   ): ISheetObject | undefined {
     if (this.project === undefined) {
-      console.error('Theatre Project hasn\'t been created yet.')
-      return undefined
+      console.error('Theatre Project hasn\'t been created yet.');
+      return undefined;
     }
-    const sheet = this.sheets.get(sheetName)
-    if (sheet === undefined) return undefined
+    const sheet = this.sheets.get(sheetName);
+    if (sheet === undefined) return undefined;
 
-    const objName = `${sheetName}_${key}`
-    let obj = this.sheetObjects.get(objName)
+    const objName = `${sheetName}_${key}`;
+    let obj = this.sheetObjects.get(objName);
     if (obj !== undefined) {
-      obj = sheet.object(key, {...props, ...obj.value}, {reconfigure: true})
-      return obj
+      obj = sheet.object(key, {...props, ...obj.value}, {reconfigure: true});
+      return obj;
     }
 
-    obj = sheet.object(key, props)
-    this.sheetObjects.set(objName, obj)
-    this.sheetObjectCBs.set(objName, onUpdate !== undefined ? onUpdate : noop)
+    obj = sheet.object(key, props);
+    this.sheetObjects.set(objName, obj);
+    this.sheetObjectCBs.set(objName, onUpdate !== undefined ? onUpdate : noop);
 
     const unsubscribe = obj.onValuesChange((values: any) => {
       if (this.app.editor) {
         for (const i in values) {
-          const value = values[i]
+          const value = values[i];
           if (typeof value === 'object') {
             if (isColor(value)) {
               values[i] = {
@@ -81,37 +82,38 @@ export default class RemoteTheatre extends BaseRemote {
                 g: value.g,
                 b: value.b,
                 a: value.a,
-              }
+              };
             }
           }
         }
         this.app.send({
           event: 'updateSheetObject',
+          target: 'app',
           data: {
             sheetObject: objName,
             values: values,
           },
-        })
+        });
       } else {
-        const callback = this.sheetObjectCBs.get(objName)
-        if (callback !== undefined) callback(values)
+        const callback = this.sheetObjectCBs.get(objName);
+        if (callback !== undefined) callback(values);
       }
-    })
-    this.sheetObjectUnsubscribe.set(objName, unsubscribe)
+    });
+    this.sheetObjectUnsubscribe.set(objName, unsubscribe);
 
-    return obj
+    return obj;
   }
 
   unsubscribe(sheet: ISheetObject) {
     if (this.project === undefined) {
-      console.error('Theatre Project hasn\'t been created yet.')
-      return undefined
+      console.error('Theatre Project hasn\'t been created yet.');
+      return undefined;
     }
 
-    const id = `${sheet.address.sheetId}_${sheet.address.objectKey}`
-    const unsubscribe = this.sheetObjectUnsubscribe.get(id)
+    const id = `${sheet.address.sheetId}_${sheet.address.objectKey}`;
+    const unsubscribe = this.sheetObjectUnsubscribe.get(id);
     if (unsubscribe !== undefined) {
-      unsubscribe()
+      unsubscribe();
     }
   }
 }

package/src/core/remote/RemoteThree.ts

@@ -0,0 +1,77 @@
+import { Scene } from 'three';
+import BaseRemote from './BaseRemote';
+import { stripObject, stripScene } from '@/editor/sceneHierarchy/utils';
+
+export default class RemoteThree extends BaseRemote {
+  scene?: Scene = undefined;
+
+  getObject(uuid: string) {
+    this.app.send({
+      event: 'getObject',
+      target: 'app',
+      data: uuid,
+    });
+  }
+
+  setObject(value: any) {
+    const stripped = stripObject(value);
+    this.app.send({
+      event: 'setObject',
+      target: 'editor',
+      data: stripped,
+    });
+  }
+
+  requestMethod(uuid: string, key: string, value?: any) {
+    this.app.send({
+      event: 'requestMethod',
+      target: 'app',
+      data: {
+        uuid,
+        key,
+        value
+      },
+    });
+  }
+
+  updateObject(uuid: string, key: string, value: any) {
+    this.app.send({
+      event: 'updateObject',
+      target: 'app',
+      data: {
+        uuid,
+        key,
+        value
+      },
+    });
+  }
+
+  createTexture(uuid: string, key: string, value: any) {
+    this.app.send({
+      event: 'createTexture',
+      target: 'app',
+      data: {
+        uuid,
+        key,
+        value
+      },
+    });
+  }
+
+  getScene() {
+    this.app.send({
+      event: 'getScene',
+      target: 'app',
+    });
+  }
+
+  setScene(value: Scene) {
+    this.scene = value;
+    const stripped = stripScene(value);
+    this.app.send({
+      event: 'setScene',
+      target: 'editor',
+      data: stripped,
+    });
+  }
+}