@tomorrowevening/hermes 0.0.35 → 0.0.37

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>
+  );
+}

package/src/editor/components/Draggable.tsx

@@ -0,0 +1,40 @@
+// Libs
+import { useState } from 'react';
+import { Reorder } from 'framer-motion';
+// Components
+import NavButton from './NavButton';
+import DraggableItem from './DraggableItem';
+import { DraggableProps } from './types';
+
+export default function Draggable(props: DraggableProps) {
+  const [expanded, setExpanded] = useState(false);
+  const [list, setList] = useState<string[]>(props.options);
+
+  const updateList = (updated: string[]) => {
+    props.onDragComplete(updated);
+    setList(updated);
+  };
+
+  const onDelete = (index: number) => {
+    const newArray = [...list];
+    newArray.splice(index, 1);
+    updateList(newArray);
+  };
+
+  const elements: any[] = [];
+  list.forEach((value: string, index: number) => {
+    elements.push(<DraggableItem key={value} index={index} title={value} onDelete={onDelete} />);
+  });
+
+  let ddClassName = 'dropdown draggable';
+  if (props.subdropdown) ddClassName += ' subdropdown';
+
+  return (
+    <div className={ddClassName} onMouseEnter={() => setExpanded(true)} onMouseLeave={() => setExpanded(false)}>
+      <NavButton title={props.title} />
+      <Reorder.Group axis='y' values={list} onReorder={updateList} style={{ visibility: expanded ? 'visible' : 'hidden' }}>
+        {elements}
+      </Reorder.Group>
+    </div>
+  );
+}

package/src/editor/components/DraggableItem.tsx

@@ -0,0 +1,22 @@
+// Libs
+import { Reorder } from 'framer-motion';
+// Components
+import CloseIcon from './icons/CloseIcon';
+import DragIcon from './icons/DragIcon';
+import { DraggableItemProps } from './types';
+
+export default function DraggableItem(props: DraggableItemProps) {
+  return (
+    <Reorder.Item key={props.title} value={props.title}>
+      <div>
+        {DragIcon}
+        <span>{props.title}</span>
+        <button className='closeIcon' onClick={() => {
+          props.onDelete(props.index);
+        }}>
+          {CloseIcon}
+        </button>
+      </div>
+    </Reorder.Item>
+  );
+}

package/src/editor/components/Dropdown.tsx

@@ -0,0 +1,38 @@
+// Libs
+import { useState } from 'react';
+// Views
+import NavButton from './NavButton';
+import DropdownItem from './DropdownItem';
+import { DropdownOption, DropdownProps } from './types';
+
+export default function Dropdown(props: DropdownProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  const list: Array<any> = [];
+  {
+    props.options.map((option: DropdownOption, index: number) => {
+      if (props.onSelect !== undefined) {
+        option.onSelect = props.onSelect;
+      }
+      list.push(<DropdownItem option={option} key={index} />);
+    });
+  }
+
+  let ddClassName = 'dropdown';
+  if (props.subdropdown) ddClassName += ' subdropdown';
+
+  return (
+    <div
+      className={ddClassName}
+      onMouseEnter={() => setExpanded(true)}
+      onMouseLeave={() => setExpanded(false)}
+    >
+      <NavButton title={props.title} />
+      <ul
+        style={{ visibility: expanded ? 'visible' : 'hidden' }}
+      >
+        {list}
+      </ul>
+    </div>
+  );
+}

package/src/editor/components/DropdownItem.tsx

@@ -0,0 +1,64 @@
+// Libs
+import { useState } from 'react';
+// Components
+import Draggable from './Draggable';
+import Dropdown from './Dropdown';
+import { DropdownItemProps, DropdownOption } from './types';
+// Utils
+import { randomID } from '../utils';
+
+export default function DropdownItem(props: DropdownItemProps) {
+  const { option } = props;
+  const [selected, setSelected] = useState('');
+
+  let element;
+  switch (option.type) {
+    case 'draggable':
+      element = (
+        <Draggable
+          title={option.title}
+          options={option.value as Array<string>}
+          onDragComplete={(options: string[]) => {
+            if (option.onDragComplete !== undefined) option.onDragComplete(options);
+          }}
+          subdropdown={true}
+        />
+      );
+      break;
+    case 'dropdown':
+      element = (
+        <Dropdown
+          title={option.title}
+          options={option.value as Array<DropdownOption>}
+          onSelect={option.onSelect}
+          subdropdown={true}
+        />
+      );
+      break;
+    case 'option':
+      element = (
+        <button
+          onClick={() => {
+            if (option.onSelect !== undefined) option.onSelect(option.value);
+            // Toggle selectable
+            if (option.selectable) {
+              if (selected !== option.title) {
+                setSelected(option.title);
+              } else {
+                setSelected('');
+              }
+            }
+          }}
+        >
+          {option.title}
+        </button>
+      );
+      break;
+  }
+
+  return (
+    <li className={selected === option.title ? 'selected' : ''} key={randomID()}>
+      {element}
+    </li>
+  );
+}

package/src/editor/components/NavButton.tsx

@@ -0,0 +1,11 @@
+type NavButtonProps = {
+  title: string
+}
+
+export default function NavButton(props: NavButtonProps) {
+  return props.title.search('<') > -1 ? (
+    <button className='svg' dangerouslySetInnerHTML={{ __html: props.title }}></button>
+  ) : (
+    <button>{props.title}</button>
+  );
+}

package/src/editor/components/content.ts

@@ -0,0 +1,2 @@
+export const gridImage = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAABkCAYAAAA8AQ3AAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEoklEQVR4nO3aQc4aMRAFYR+AOQv3Px3ZRYoSoh8YxvX61YJdSdPuD++81lqPZ7/b7fa43++P4zieNnbPu+M40PO1dXqwujc9WIeY0nk5WJ0erO4DD84hpnReDlanB6v70INxiCmdl4PV6cHqTvDYf4gpnZeD1enB6k7yyDgsvfNysDo9WN2JHvzD0jsvB6vTg9Wd6kE/LL3zcrA6PVjd2R6LfFh65+VgdXqwum94LOph6Z2Xg9Xpweq+5bGIh6V3Xg5Wpwer+7IH67D0zsvB6vRgdRd4cA5L77wcrE4PVneRB+Ow9M7Lwer0YHUXeuw/LL3zcrA6PVjdxR4ZSynBsNMjqtvgwV9KEYadHjHdFg/6Uqow7PQI6XZ5+NIdhGGnR0K308OX7iAMOz3o3W6PRVxKK4adHuQO4sFaSjmGnR7IDuTBWYoYdnrwOpgHYyli2OnB64Ae+5cihp0evA7qkbG8EozaTg9WB/bgL68Io7LTg9WhPejLq8Io7PRgdXSPqpfudIy2Tg9Wl+BR89J9F0bCn6BpL3qw9vLqdxdxebuXkv5deqcHqwvzYC0PspTY79I7PVhdoAdneaClRH6X3unB6kI9GMuDLSXuu/ROD1YX7LF/ecClRH2X3unB6sI9MpZcgjGu04PVDfDgL7kIY1SnB6sb4UFfchXGoE4PVjfFY8RL9ykYUzo9WN0kj/iX7pMwJnR6sLppHou45N1LoX6X3unB6oZ6sJYMWQruu/ROD1Y32IOzZNBSUN+ld3qwuuEejCXTOy8Hq9OD1V3osf+w9M7Lwer0YHUXe2QspQTDTo+oboMHfylFGHZ6xHRbPOhLqcKw0yOk2+Ux4qX7FAw7PRK6nR7xL90nYdjpQe92eyziUlox7PQgdxAP1lLKMez0QHYgD85SxLDTg9fBPBhLEcNOD14H9Ni/FDHs9OB1UI+M5ZVg1HZ6sDqwB395RRiVnR6sDu1BX14VRmGnB6uje1S9dKdjtHV6sLoEj5qX7gkYTZ0erC7FY5GHa8No6fRgdWEe6OHaMMZ3erC6QA/0cG0Yozs9WF2oB3q4NoyxnR6sLtgDPVwbxshOD1YX7oEerg1jXKcHqxvggR6uDWNUpwerG+GBHq4NY1CnB6ub4jHipfsUjCmdHqxukkf8S/dJGBM6PVjdNI9FHq4NI73Tg9UN9UAP14YR2+nB6gZ7oIdrw4js9GB1wz3Qw7VhxHV6sLoCD/RwbRhRnR6srsQDPVwbRkynB6sr8kAP14YR0enB6qo80MO1YQR0erC6Ng/0S/c2DHqnB6tr9MC+dG/EIHd6sLpWj0UcrhWD2unB6so9WMOVY+A6PVidHqDhxGB1erA6PdZjUYYTg9Xpwer0+P3bP5wYrE4PVqfHHz8x7PSgdnr89RPDTg9ip8c/fmLY6cHr9HjyE8NOD1anx/Pu8pfuYrA6PVidHv/vlhi9nR6sTo8fdWI0dnqwOj1+3InR1unB6vR4qROjqdOD1enxcidGS6cHq9PjrU6Mhk4PVqfH250Y0zs9WJ0eH3RizO70YHV6fNad+tJdDFanB6vT4/PutJfuYrA6PVidHud0vwA7LKl1AiiR5gAAAABJRU5ErkJggg==`;
+export const noImage = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA5klEQVRoge2Y0Q6EIAwE6cX//+X6cCFpSMEKVTdk501OpRNKiyelFC0b8Ps6gCwoggZF0KAIGhRBgyJoUAQNiqCxjciR9SLV//eZiAyvK3U8i/QVaQO2YyLSFVvlkdTKDjJCukh2ykR5ZEW+kHmlatl90RaBtDkK/w7CYhuRUEO0ee3l+J3m55Vm+17vtwjTnV1V3QA8qfbeUXCzRWDpiLLS+OyzvRW7IzW9R+okvclsqR09743bo0yUpc1+lSJvNsa002+Euk9GKzV7SmZDRIMiaFAEDYqgQRE0KIIGRdCgCBoUQeMEMERadX7YUz8AAAAASUVORK5CYII=`;

package/src/editor/components/icons/CloseIcon.tsx

@@ -0,0 +1,7 @@
+export default (
+  <svg className='closeIcon' width='14' height='14' fill='none' stroke='#666666' strokeMiterlimit='10'>
+    <circle cx='7' cy='7' r='6' />
+    <line x1='4' y1='4' x2='10' y2='10' />
+    <line x1='4' y1='10' x2='10' y2='4' />
+  </svg>
+);

package/src/editor/components/icons/DragIcon.tsx

@@ -0,0 +1,9 @@
+export default (
+  <svg className='dragIcon' width='14' height='14' fill='#666666' stroke='none'>
+    <path
+      d='M10.43,4H3.57C3.26,4,3,4.22,3,4.5v1C3,5.78,3.26,6,3.57,6h6.86C10.74,6,11,5.78,11,5.5v-1
+C11,4.22,10.74,4,10.43,4z M10.43,8H3.57C3.26,8,3,8.22,3,8.5v1C3,9.78,3.26,10,3.57,10h6.86C10.74,10,11,9.78,11,9.5v-1
+C11,8.22,10.74,8,10.43,8z'
+    />
+  </svg>
+);

package/src/editor/components/types.ts

@@ -0,0 +1,41 @@
+export type DropdownType = 'option' | 'dropdown' | 'draggable'
+
+export interface DropdownOption {
+  title: string
+  value: any | Array<DropdownOption>
+  type: DropdownType
+  // Option
+  onSelect?: (value: any) => void
+  selectable?: boolean
+  // Draggable
+  onDragComplete?: (options: Array<string>) => void
+}
+
+export interface DropdownProps {
+  title: string
+  options: Array<DropdownOption>
+  onSelect?: (value: any) => void
+  subdropdown?: boolean
+}
+
+export interface DropdownItemProps {
+  option: DropdownOption
+  onSelect?: (value: any) => void
+  // Draggable
+  onDragComplete?: (options: Array<string>) => void
+}
+
+// Draggable
+
+export interface DraggableItemProps {
+  index: number
+  title: string
+  onDelete: (index: number) => void
+}
+
+export interface DraggableProps {
+  title: string
+  options: Array<string>
+  onDragComplete: (options: Array<string>) => void
+  subdropdown?: boolean
+}

package/src/editor/global.ts

@@ -0,0 +1,20 @@
+import { EventDispatcher } from 'three';
+
+export const debugDispatcher = new EventDispatcher();
+
+export const ToolEvents = {
+  CUSTOM: 'ToolEvents::custom',
+  // Components
+  SELECT_DROPDOWN: 'ToolEvents::selectDropdown',
+  DRAG_UPDATE: 'ToolEvents::dragUpdate',
+  // SceneHierarchy
+  SET_SCENE: 'ToolEvents::setScene',
+  GET_OBJECT: 'ToolEvents::getObject',
+  SET_OBJECT: 'ToolEvents::setObject',
+  UPDATE_OBJECT: 'ToolEvents::updateObject',
+  CREATE_TEXTURE: 'ToolEvents::createTexture',
+  REQUEST_METHOD: 'ToolEvents::requestMethod',
+  // MultiView
+  ADD_CAMERA: 'ToolEvents::addCamera',
+  REMOVE_CAMERA: 'ToolEvents::removeCamera',
+};

package/src/editor/multiView/CameraWindow.tsx

@@ -0,0 +1,74 @@
+import { ForwardedRef, forwardRef, useState } from 'react';
+import { Camera } from 'three';
+
+interface DropdownProps {
+  index: number;
+  open: boolean;
+  onToggle: (value: boolean) => void;
+  onSelect: (value: string) => void;
+  options: string[];
+  up?: boolean;
+}
+
+export const Dropdown = (props: DropdownProps) => {
+  const [selectedOption, setSelectedOption] = useState(props.options[props.index]);
+
+  const handleToggle = () => {
+    props.onToggle(!props.open);
+  };
+
+  const handleSelect = (option: any) => {
+    if (option !== selectedOption) {
+      props.onSelect(option);
+      setSelectedOption(option);
+    }
+    props.onToggle(false);
+  };
+
+  return (
+    <div className={`dropdown ${props.up === true ? 'up' : ''}`}>
+      <div className='dropdown-toggle' onClick={handleToggle}>
+        {selectedOption}
+      </div>
+      {props.open && (
+        <ul className='dropdown-menu'>
+          {props.options.map((option) => (
+            <li key={option} onClick={() => handleSelect(option)}>
+              {option}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+interface CameraWindowProps {
+  camera: Camera
+  onSelect: (value: string) => void;
+  options: string[];
+}
+
+const CameraWindow = forwardRef(function CameraWindow(props: CameraWindowProps, ref: ForwardedRef<HTMLDivElement>) {
+  const [open, setOpen] = useState(false);
+  const index = props.options.indexOf(props.camera.name);
+  return (
+    <div className='CameraWindow'>
+      <div ref={ref} className='clickable' onClick={() => {
+        if (open) setOpen(false);
+      }} />
+      <Dropdown
+        index={index}
+        open={open}
+        options={props.options}
+        onSelect={props.onSelect}
+        onToggle={(value: boolean) => {
+          setOpen(value);
+        }}
+        up={true}
+      />
+    </div>
+  );
+});
+
+export default CameraWindow;

package/src/editor/multiView/InfiniteGridHelper.ts

@@ -0,0 +1,24 @@
+import { Mesh, PlaneGeometry } from 'three';
+import InfiniteGridMaterial from './InfiniteGridMaterial';
+
+/**
+ * Copied from:
+ * https://github.com/theatre-js/theatre/blob/main/packages/r3f/src/extension/InfiniteGridHelper/index.ts
+ */
+
+export default class InfiniteGridHelper extends Mesh {
+  gridMaterial: InfiniteGridMaterial;
+
+  constructor() {
+    const material = new InfiniteGridMaterial();
+    super(new PlaneGeometry(2, 2), material);
+    this.gridMaterial = material;
+    this.frustumCulled = false;
+    this.name = 'InfiniteGridHelper';
+    this.position.y = 0.1;
+  }
+
+  update() {
+    this.gridMaterial.needsUpdate = true;
+  }
+}