@tomorrowevening/hermes 0.0.34 → 0.0.35

package/src/core/remote/RemoteTweakpane.ts

@@ -1,194 +0,0 @@
-// 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

@@ -1,56 +0,0 @@
-// 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

@@ -1,20 +0,0 @@
-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

@@ -1,40 +0,0 @@
-// 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

@@ -1,22 +0,0 @@
-// 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

@@ -1,38 +0,0 @@
-// 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

@@ -1,64 +0,0 @@
-// 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

@@ -1,11 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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;
-  }
-}