@tomorrowevening/hermes 0.0.36 → 0.0.37

package/src/core/remote/RemoteTheatre.ts

@@ -0,0 +1,300 @@
+// Libs
+import { createRafDriver, getProject } from '@theatre/core';
+import { IProject, IProjectConfig, IRafDriver, ISheet, ISheetObject } from '@theatre/core';
+import studio from '@theatre/studio';
+// Core
+import Application from '../Application';
+import BaseRemote from './BaseRemote';
+import { isColor } from '@/editor/utils';
+import { BroadcastData, DataUpdateCallback, EditorEvent, VoidCallback, noop } from '../types';
+
+export default class RemoteTheatre extends BaseRemote {
+  project: IProject | undefined;
+  sheets: Map<string, ISheet> = new Map();
+  sheetObjects: Map<string, ISheetObject> = new Map();
+  sheetObjectCBs: Map<string, DataUpdateCallback> = new Map();
+  sheetObjectUnsubscribe: Map<string, VoidCallback> = new Map();
+
+  private static rafDriver: IRafDriver | null = null;
+
+  init(projectName: string, projectConfig?: IProjectConfig | undefined): Promise<void> {
+    this.project = getProject(projectName, projectConfig);
+    return this.project.ready;
+  }
+
+  override dispose(): void {
+    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;
+    }
+
+    let sheet = this.sheets.get(name);
+    if (sheet !== undefined) return sheet;
+
+    sheet = this.project?.sheet(name);
+    this.sheets.set(name, sheet);
+    return sheet;
+  }
+
+  playSheet(name: string, params?: any) {
+    this.sheet(name)?.sequence.play(params);
+
+    this.app.send({
+      event: 'playSheet',
+      target: 'editor',
+      data: {
+        sheet: name,
+        value: params,
+      },
+    });
+  }
+
+  pauseSheet(name: string) {
+    this.sheet(name)?.sequence.pause();
+
+    this.app.send({
+      event: 'pauseSheet',
+      target: 'editor',
+      data: {
+        sheet: name,
+      },
+    });
+  }
+
+  clearSheetObjects(sheetName: string) {
+    this.sheetObjects.forEach((value: ISheetObject, key: string) => {
+      const sameSheet = key.search(`${sheetName}_`) > -1;
+      if (sameSheet) this.unsubscribe(value);
+    });
+  }
+
+  sheetObject(
+    sheetName: string,
+    key: string,
+    props: any,
+    onUpdate?: DataUpdateCallback,
+  ): ISheetObject | undefined {
+    if (this.project === undefined) {
+      console.error('Theatre Project hasn\'t been created yet.');
+      return undefined;
+    }
+    const sheet = this.sheet(sheetName);
+    if (sheet === undefined) return undefined;
+
+    const objName = `${sheetName}_${key}`;
+    let obj = this.sheetObjects.get(objName);
+    if (obj !== undefined) {
+      obj = sheet.object(key, {...props, ...obj.value}, {reconfigure: true});
+    } else {
+      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];
+          if (typeof value === 'object') {
+            if (isColor(value)) {
+              values[i] = {
+                r: value.r,
+                g: value.g,
+                b: value.b,
+                a: value.a,
+              };
+            }
+          }
+        }
+        this.app.send({
+          event: 'updateSheetObject',
+          target: 'app',
+          data: {
+            sheet: sheetName,
+            sheetObject: objName,
+            values: values,
+          },
+        });
+      }
+
+      const callback = this.sheetObjectCBs.get(objName);
+      if (callback !== undefined) callback(values);
+    });
+    this.sheetObjectUnsubscribe.set(objName, unsubscribe);
+
+    return obj;
+  }
+
+  unsubscribe(sheetObject: ISheetObject) {
+    if (this.project === undefined) {
+      console.error('Theatre Project hasn\'t been created yet.');
+      return undefined;
+    }
+
+    const sheetName = sheetObject.address.sheetId;
+    const sheetObjectName = sheetObject.address.objectKey;
+    const sheet = this.sheets.get(sheetName);
+    sheet?.detachObject(sheetObjectName);
+    
+    const id = `${sheetName}_${sheetObjectName}`;
+    const unsubscribe = this.sheetObjectUnsubscribe.get(id);
+    if (unsubscribe !== undefined) {
+      this.sheetObjects.delete(id);
+      this.sheetObjectCBs.delete(id);
+      this.sheetObjectUnsubscribe.delete(id);
+      unsubscribe();
+    }
+  }
+
+  public static getRafDriver(): IRafDriver {
+    if (!RemoteTheatre.rafDriver) {
+      RemoteTheatre.rafDriver = createRafDriver();
+    }
+    return RemoteTheatre.rafDriver;
+  }
+}
+
+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.sheets.get(msg.data.sheet); // pause current animation
+          // @ts-ignore
+          if (value !== undefined) value.sequence.pause();
+          // @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 UpdateRemoteTheatre(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 = () => {
+      // RemoteTheatre.getRafDriver().tick(performance.now());
+
+      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();
+  }
+}
+
+export function HandleEditorRemoteTheatre(app: Application, msg: BroadcastData) {
+  if (app.editor) {
+    app.components.forEach((component: any) => {
+      if (component instanceof RemoteTheatre) {
+        const theatre = component;
+        switch (msg.event) {
+          case 'playSheet':
+            theatre.sheet(msg.data.sheet)?.sequence.play(msg.data.value);
+            break;
+          case 'pauseSheet':
+            theatre.sheet(msg.data.sheet)?.sequence.pause();
+            break;
+        }
+        return;
+      }
+    });
+  }
+}

package/src/core/remote/RemoteThree.ts

@@ -0,0 +1,143 @@
+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;
+
+  getObject(uuid: string) {
+    if (!this.app.debugEnabled) return;
+    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, subitem?: string) {
+    this.app.send({
+      event: 'requestMethod',
+      target: 'app',
+      data: {
+        uuid,
+        key,
+        value,
+        subitem,
+      },
+    });
+  }
+
+  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
+      },
+    });
+  }
+
+  setScene(value: Scene) {
+    if (value === undefined) return;
+    this.scene = value;
+
+    if (!this.app.debugEnabled) return;
+    resetThreeObjects();
+    hierarchyUUID(this.scene);
+    const stripped = stripScene(this.scene);
+    this.app.send({
+      event: 'setScene',
+      target: 'editor',
+      data: stripped,
+    });
+  }
+
+  addCamera(camera: Camera) {
+    if (!this.app.debugEnabled) return;
+    const stripped = stripObject(camera);
+    this.app.send({
+      event: 'addCamera',
+      target: 'editor',
+      data: stripped,
+    });
+  }
+
+  removeCamera(camera: Camera) {
+    if (!this.app.debugEnabled) return;
+    const stripped = stripObject(camera);
+    this.app.send({
+      event: 'removeCamera',
+      target: 'editor',
+      data: stripped,
+    });
+  }
+}
+
+export function HandleAppRemoteThree(_: Application, msg: BroadcastData) {
+  switch (msg.event) {
+    case 'getObject':
+      // @ts-ignore
+      debugDispatcher.dispatchEvent({ type: ToolEvents.GET_OBJECT, value: msg.data });
+      break;
+    case 'updateObject':
+      // @ts-ignore
+      debugDispatcher.dispatchEvent({ type: ToolEvents.UPDATE_OBJECT, value: msg.data });
+      break;
+    case 'createTexture':
+      // @ts-ignore
+      debugDispatcher.dispatchEvent({ type: ToolEvents.CREATE_TEXTURE, value: msg.data });
+      break;
+    case 'requestMethod':
+      // @ts-ignore
+      debugDispatcher.dispatchEvent({ type: ToolEvents.REQUEST_METHOD, value: msg.data });
+      break;
+  }
+}
+
+export function HandleEditorRemoteThree(_: Application, msg: BroadcastData) {
+  switch (msg.event) {
+    case 'setObject':
+      // @ts-ignore
+      debugDispatcher.dispatchEvent({ type: ToolEvents.SET_OBJECT, value: msg.data });
+      break;
+    case 'setScene':
+      // @ts-ignore
+      debugDispatcher.dispatchEvent({ type: ToolEvents.SET_SCENE, value: msg.data });
+      break;
+    case 'addCamera':
+      // @ts-ignore
+      debugDispatcher.dispatchEvent({ type: ToolEvents.ADD_CAMERA, value: msg.data });
+      break;
+    case 'removeCamera':
+      // @ts-ignore
+      debugDispatcher.dispatchEvent({ type: ToolEvents.REMOVE_CAMERA, value: msg.data });
+      break;
+  }
+}

package/src/core/remote/RemoteTweakpane.ts

@@ -0,0 +1,194 @@
+// Libs
+import { Pane } from 'tweakpane';
+import * as EssentialsPlugin from '@tweakpane/plugin-essentials';
+// Core
+import Application from '../Application';
+import BaseRemote from './BaseRemote';
+import { BroadcastData, DataUpdateCallback, VoidCallback, noop } from '../types';
+
+export default class RemoteTweakpane extends BaseRemote {
+  bindCBs: Map<string, DataUpdateCallback>;
+  buttonCBs: Map<string, VoidCallback>;
+
+  protected pane?: Pane | undefined = undefined;
+  protected appCallbacks = 0;
+  protected editorCallbacks = 0;
+  protected inspectorFolder: any = undefined;
+
+  constructor(app: Application) {
+    super(app);
+    this.bindCBs = new Map();
+    this.buttonCBs = new Map();
+
+    if (app.editor) this.createGUI();
+  }
+
+  protected createGUI() {
+    this.pane = new Pane({ title: 'GUI' });
+    this.pane.registerPlugin(EssentialsPlugin);
+  }
+
+  override dispose(): void {
+    this.bindCBs.clear();
+    this.buttonCBs.clear();
+    this.appCallbacks = 0;
+    this.editorCallbacks = 0;
+
+    if (this.app.editor) {
+      this.pane?.dispose();
+      this.pane = undefined;
+    }
+  }
+
+  addFolder(name: string, params: any = undefined, parent: any = undefined) {
+    if (this.app.editor) {
+      if (this.pane === undefined) this.createGUI();
+
+      const container = parent !== undefined ? parent : this.pane;
+      return container.addFolder({
+        title: name,
+        ...params,
+      });
+    } else {
+      this.app.send({
+        event: 'addFolder',
+        target: 'app',
+        data: {
+          name,
+          params,
+          parent
+        }
+      });
+    }
+  }
+
+  get bindID(): string {
+    return `debug_${Math.max(this.appCallbacks, this.editorCallbacks)}`;
+  }
+
+  // Binding
+
+  bind(obj: any, name: string, params: any, parent: any = undefined) {
+    const bindID = this.bindID;
+    const callback = params.onChange !== undefined ? params.onChange : noop;
+    this.bindCBs.set(bindID, callback);
+
+    if (this.app.editor) {
+      if (this.pane === undefined) this.createGUI();
+
+      const container = parent !== undefined ? parent : this.pane;
+      container
+        .addBinding(obj, name, params)
+        .on('change', (evt: any) => {
+          this.app.send({
+            event: 'updateBind',
+            target: 'app',
+            data: {
+              id: bindID,
+              value: evt.value,
+            }
+          });
+        });
+      this.editorCallbacks++;
+    } else {
+      this.app.send({
+        event: 'bindObject',
+        target: 'app',
+        data: {
+          id: bindID,
+          name,
+          params,
+          parent
+        }
+      });
+      this.appCallbacks++;
+    }
+  }
+
+  triggerBind(id: string, data: any) {
+    const cb = this.bindCBs.get(id);
+    if (cb !== undefined) cb(data);
+    else console.warn(`No callback for: ${id}`, data);
+  }
+
+  // Buttons
+
+  button(name: string, callback: VoidCallback, parent: any = undefined) {
+    const bindID = this.bindID;
+    this.buttonCBs.set(bindID, callback);
+
+    if (this.app.editor) {
+      if (this.pane === undefined) this.createGUI();
+
+      const container = parent !== undefined ? parent : this.pane;
+      container
+        .addButton({ title: name })
+        .on('click', () => {
+          this.app.send({
+            event: 'clickButton',
+            target: 'app',
+            data: {
+              id: bindID,
+            }
+          });
+        });
+      this.editorCallbacks++;
+    } else {
+      this.app.send({
+        event: 'addButton',
+        target: 'app',
+        data: {
+          id: bindID,
+          name,
+          callback,
+          parent
+        }
+      });
+      this.appCallbacks++;
+    }
+  }
+
+  triggerButton(id: string) {
+    const cb = this.buttonCBs.get(id);
+    if (cb !== undefined) cb();
+  }
+
+  // Inspector
+
+  createInspector() {
+    this.inspectorFolder = this.addFolder('Inspector', this.pane);
+  }
+
+  clearInspector() {
+    const total = this.inspectorFolder.children.length - 1;
+    for (let i = total; i > -1; --i) {
+      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/core/types.ts

@@ -0,0 +1,56 @@
+// Interfaces
+
+export interface BroadcastData {
+  target: ApplicationMode
+  event: EditorEvent
+  data?: any
+}
+
+// Types
+
+export type ApplicationMode = 'app' | 'editor'
+
+export type VoidCallback = () => void
+
+export type DataUpdateCallback = (data: any) => void
+
+export type EditorEvent =
+  | 'custom'
+// Theatre
+  | 'setSheet'
+  | 'setSheetObject'
+  | 'updateSheetObject'
+  | 'updateTimeline'
+  | 'playSheet'
+  | 'pauseSheet'
+// Three
+  | 'getObject'
+  | 'setObject'
+  | 'updateObject'
+  | 'setScene'
+  | 'createTexture'
+  | 'requestMethod'
+  | 'addCamera'
+  | 'removeCamera'
+// GUI
+  | 'addFolder'
+  | 'bindObject'
+  | 'updateBind'
+  | 'addButton'
+  | 'clickButton'
+// Components
+  | 'selectComponent'
+  | 'draggableListUpdate'
+
+export type VoidFunc = () => void
+
+export type BroadcastCallback = (data: BroadcastData) => void
+
+export type TheatreUpdateCallback = (data: any) => void
+
+// Consts
+
+export const noop = () => {};
+
+export const defaultTheatreCallback: TheatreUpdateCallback = () => {};
+

package/src/editor/Editor.tsx

@@ -0,0 +1,20 @@
+import { CSSProperties, Ref } from 'react';
+import './scss/index.scss';
+
+type EditorProps = {
+  header?: JSX.Element | JSX.Element[]
+  children?: JSX.Element | JSX.Element[]
+  footer?: JSX.Element | JSX.Element[]
+  ref?: Ref<any>
+  style?: CSSProperties
+}
+
+export default function Editor(props: EditorProps) {
+  return (
+    <div className='editor' ref={props.ref} style={props.style}>
+      <header>{props.header}</header>
+      {props.children}
+      <footer>{props.footer}</footer>
+    </div>
+  );
+}