@tomorrowevening/hermes 0.0.2 → 0.0.4

package/src/core/remote/RemoteTweakpane.ts

@@ -1,176 +1,169 @@
 // Libs
-import { Pane } from 'tweakpane'
-import * as EssentialsPlugin from '@tweakpane/plugin-essentials'
+import { Pane } from 'tweakpane';
+import * as EssentialsPlugin from '@tweakpane/plugin-essentials';
 // Core
-import Application from '../Application'
-import BaseRemote from './BaseRemote'
-import { noop } from '../types'
-import type { DataUpdateCallback, VoidCallback } from '../types'
+import Application from '../Application';
+import BaseRemote from './BaseRemote';
+import { noop } from '../types';
+import type { DataUpdateCallback, VoidCallback } from '../types';
 
 export default class RemoteTweakpane extends BaseRemote {
-  appTab: any = undefined
-  systemTab: any = undefined
-  utilsTab: any = undefined
-  bindCBs: Map<string, DataUpdateCallback>
-  buttonCBs: Map<string, VoidCallback>
+  bindCBs: Map<string, DataUpdateCallback>;
+  buttonCBs: Map<string, VoidCallback>;
 
-  protected pane?: Pane | undefined = undefined
-  protected appCallbacks = 0
-  protected editorCallbacks = 0
+  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()
+    super(app);
+    this.bindCBs = new Map();
+    this.buttonCBs = new Map();
 
-    if (app.editor) this.createGUI()
+    if (app.editor) this.createGUI();
   }
 
   protected createGUI() {
-    this.pane = new Pane({ title: 'GUI' })
-    this.pane.registerPlugin(EssentialsPlugin)
-    const guiElement = this.pane.element.parentElement as HTMLElement
-    guiElement.style.left = '50%'
-    guiElement.style.top = '0'
-    guiElement.style.maxHeight = '100%'
-    guiElement.style.overflowX = 'hidden'
-    guiElement.style.overflowY = 'auto'
-    guiElement.style.transform = 'translateX(-50%)'
-    guiElement.style.width = '300px'
-    guiElement.style.zIndex = '100'
-
-    // @ts-ignore
-    const tabs = this.pane.addTab({
-      pages: [{ title: 'App' }, { title: 'System' }, { title: 'Tools' }],
-    })
-    this.appTab = tabs.pages[0]
-    this.systemTab = tabs.pages[1]
-    this.utilsTab = tabs.pages[2]
+    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
+    this.bindCBs.clear();
+    this.buttonCBs.clear();
+    this.appCallbacks = 0;
+    this.editorCallbacks = 0;
 
     if (this.app.editor) {
-      this.appTab?.dispose()
-      this.systemTab?.dispose()
-      this.utilsTab?.dispose()
-      this.pane?.dispose()
-      this.appTab = undefined
-      this.systemTab = undefined
-      this.utilsTab = undefined
-      this.pane = undefined
+      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()
+      if (this.pane === undefined) this.createGUI();
 
-      const container = parent !== undefined ? parent : this.appTab
+      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)}`
+    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)
+    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()
+      if (this.pane === undefined) this.createGUI();
 
-      const container = parent !== undefined ? parent : this.appTab
+      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++
+          });
+        });
+      this.editorCallbacks++;
     } else {
       this.app.send({
         event: 'bindObject',
+        target: 'app',
         data: {
           id: bindID,
           name,
           params,
           parent
         }
-      })
-      this.appCallbacks++
+      });
+      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)
+    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)
+    const bindID = this.bindID;
+    this.buttonCBs.set(bindID, callback);
 
     if (this.app.editor) {
-      if (this.pane === undefined) this.createGUI()
+      if (this.pane === undefined) this.createGUI();
 
-      const container = parent !== undefined ? parent : this.appTab
+      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++
+          });
+        });
+      this.editorCallbacks++;
     } else {
       this.app.send({
         event: 'addButton',
+        target: 'app',
         data: {
           id: bindID,
           name,
           callback,
           parent
         }
-      })
-      this.appCallbacks++
+      });
+      this.appCallbacks++;
     }
   }
 
   triggerButton(id: string) {
-    const cb = this.buttonCBs.get(id)
-    if (cb !== undefined) cb()
+    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]);
+    }
   }
 }

package/src/core/types.ts

@@ -1,24 +1,34 @@
 // Interfaces
 
 export interface BroadcastData {
+  target: ApplicationMode
   event: EditorEvent
-  data: any
+  data?: any
 }
 
 // Types
 
-export type ApplicationMode = 'listener' | 'editor'
+export type ApplicationMode = 'app' | 'editor'
 
 export type VoidCallback = () => void
 
 export type DataUpdateCallback = (data: any) => void
 
 export type EditorEvent =
+  | 'custom'
 // Theatre
   | 'setSheet'
   | 'setSheetObject'
   | 'updateSheetObject'
   | 'updateTimeline'
+// Three
+  | 'getObject'
+  | 'setObject'
+  | 'updateObject'
+  | 'getScene'
+  | 'setScene'
+  | 'createTexture'
+  | 'requestMethod'
 // GUI
   | 'addFolder'
   | 'bindObject'
@@ -37,7 +47,7 @@ export type TheatreUpdateCallback = (data: any) => void
 
 // Consts
 
-export const noop = () => {}
+export const noop = () => {};
 
-export const defaultTheatreCallback: TheatreUpdateCallback = () => {}
+export const defaultTheatreCallback: TheatreUpdateCallback = () => {};
 

package/src/editor/Editor.tsx

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

package/src/editor/components/Draggable.tsx

@@ -1,33 +1,33 @@
 // Libs
-import { useState } from 'react'
-import { Reorder } from 'framer-motion'
+import { useState } from 'react';
+import { Reorder } from 'framer-motion';
 // Components
-import NavButton from './NavButton'
-import DraggableItem from './DraggableItem'
-import { DraggableProps } from './types'
+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 [expanded, setExpanded] = useState(false);
+  const [list, setList] = useState<string[]>(props.options);
 
   const updateList = (updated: string[]) => {
-    props.onDragComplete(updated)
-    setList(updated)
-  }
+    props.onDragComplete(updated);
+    setList(updated);
+  };
 
   const onDelete = (index: number) => {
-    const newArray = [...list]
-    newArray.splice(index, 1)
-    updateList(newArray)
-  }
+    const newArray = [...list];
+    newArray.splice(index, 1);
+    updateList(newArray);
+  };
 
-  const elements: any[] = []
+  const elements: any[] = [];
   list.forEach((value: string, index: number) => {
-    elements.push(<DraggableItem key={value} index={index} title={value} onDelete={onDelete} />)
-  })
+    elements.push(<DraggableItem key={value} index={index} title={value} onDelete={onDelete} />);
+  });
 
-  let ddClassName = 'dropdown draggable'
-  if (props.subdropdown) ddClassName += ' subdropdown'
+  let ddClassName = 'dropdown draggable';
+  if (props.subdropdown) ddClassName += ' subdropdown';
 
   return (
     <div className={ddClassName} onMouseEnter={() => setExpanded(true)} onMouseLeave={() => setExpanded(false)}>
@@ -36,5 +36,5 @@ export default function Draggable(props: DraggableProps) {
         {elements}
       </Reorder.Group>
     </div>
-  )
+  );
 }

package/src/editor/components/DraggableItem.tsx

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

package/src/editor/components/Dropdown.tsx

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

package/src/editor/components/DropdownItem.tsx

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

package/src/editor/components/NavButton.tsx

@@ -7,5 +7,5 @@ export default function NavButton(props: NavButtonProps) {
     <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

@@ -4,4 +4,4 @@ export default (
     <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

@@ -6,4 +6,4 @@ 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.5
 C11,8.22,10.74,8,10.43,8z"
     />
   </svg>
-)
+);

package/src/editor/global.ts

@@ -1,13 +1,18 @@
 import { EventDispatcher } from 'three';
 
-export const debugDispatcher = new EventDispatcher()
+export const debugDispatcher = new EventDispatcher();
 
 export const ToolEvents = {
+  CUSTOM: 'ToolEvents::custom',
   // Components
   SELECT_DROPDOWN: 'ToolEvents::selectDropdown',
   DRAG_UPDATE: 'ToolEvents::dragUpdate',
   // SceneHierarchy
-  INSPECT_ITEM: 'ToolEvents::inspectItem',
-  REFRESH_SCENE: 'ToolEvents::refreshScene',
+  GET_SCENE: 'ToolEvents::getScene',
   SET_SCENE: 'ToolEvents::setScene',
-}
+  GET_OBJECT: 'ToolEvents::getObject',
+  SET_OBJECT: 'ToolEvents::setObject',
+  UPDATE_OBJECT: 'ToolEvents::updateObject',
+  CREATE_TEXTURE: 'ToolEvents::createTexture',
+  REQUEST_METHOD: 'ToolEvents::requestMethod',
+};

package/src/editor/sceneHierarchy/Accordion.tsx

@@ -0,0 +1,40 @@
+import { useState } from "react";
+
+type AccordionProps = {
+  label: string
+  button?: JSX.Element
+  children?: JSX.Element | JSX.Element[]
+  open?: boolean
+  onToggle?: (value: boolean) => void
+}
+
+export default function Accordion(props: AccordionProps) {
+  const [open, setOpen] = useState(props.open !== undefined ? props.open : true);
+  const hide = !open || props.children === undefined;
+
+  return (
+    <div className={`accordion ${hide ? 'hide' : ''}`}>
+      <button
+        className="toggle"
+        onClick={() => {
+          const value = !open;
+          if (props.onToggle !== undefined) props.onToggle(value);
+          setOpen(value);
+        }}
+      >
+        <p
+          className={`status ${open ? 'open' : ''}`}
+        >
+          Toggle
+        </p>
+        <p className="label">{props.label}</p>
+      </button>
+      {props.button}
+      <div className={open ? 'open' : ''}>
+        <div>
+          {props.children}
+        </div>
+      </div>
+    </div>
+  );
+}