@tomorrowevening/hermes 0.0.0

package/src/core/remote/RemoteTweakpane.ts

@@ -0,0 +1,176 @@
+// Libs
+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'
+
+export default class RemoteTweakpane extends BaseRemote {
+  appTab: any = undefined
+  systemTab: any = undefined
+  utilsTab: any = undefined
+  bindCBs: Map<string, DataUpdateCallback>
+  buttonCBs: Map<string, VoidCallback>
+
+  protected pane?: Pane | undefined = undefined
+  protected appCallbacks = 0
+  protected editorCallbacks = 0
+
+  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)
+    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]
+  }
+
+  override dispose(): void {
+    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
+    }
+  }
+
+  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.appTab
+      return container.addFolder({
+        title: name,
+        ...params,
+      })
+    } else {
+      this.app.send({
+        event: 'addFolder',
+        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.appTab
+      container
+        .addBinding(obj, name, params)
+        .on('change', (evt: any) => {
+          this.app.send({
+            event: 'updateBind',
+            data: {
+              id: bindID,
+              value: evt.value,
+            }
+          })
+        })
+      this.editorCallbacks++
+    } else {
+      this.app.send({
+        event: 'bindObject',
+        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.appTab
+      container
+        .addButton({ title: name })
+        .on('click', () => {
+          this.app.send({
+            event: 'clickButton',
+            data: {
+              id: bindID,
+            }
+          })
+        })
+      this.editorCallbacks++
+    } else {
+      this.app.send({
+        event: 'addButton',
+        data: {
+          id: bindID,
+          name,
+          callback,
+          parent
+        }
+      })
+      this.appCallbacks++
+    }
+  }
+
+  triggerButton(id: string) {
+    const cb = this.buttonCBs.get(id)
+    if (cb !== undefined) cb()
+  }
+}

package/src/core/types.ts

@@ -0,0 +1,43 @@
+// Interfaces
+
+export interface BroadcastData {
+  event: EditorEvent
+  data: any
+}
+
+// Types
+
+export type ApplicationMode = 'listener' | 'editor'
+
+export type VoidCallback = () => void
+
+export type DataUpdateCallback = (data: any) => void
+
+export type EditorEvent =
+// Theatre
+  | 'setSheet'
+  | 'setSheetObject'
+  | 'updateSheetObject'
+  | 'updateTimeline'
+// 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,15 @@
+import './scss/index.scss'
+
+type EditorProps = {
+  components?: JSX.Element | JSX.Element[]
+  children?: JSX.Element | JSX.Element[]
+}
+
+export default function Editor(props: EditorProps) {
+  return (
+    <div className="editor">
+      <div className="navBar">{props.children}</div>
+      {props.components}
+    </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,30 @@
+// 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 type { DropdownItemProps, DropdownOption } from './types'
+// Utils
+import { randomID } from '../utils'
+
+export default function DropdownItem(props: DropdownItemProps) {
+  const { option } = props
+  const [selected, setSelected] = useState('')
+
+  let element = null
+  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/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,13 @@
+import { EventDispatcher } from 'three';
+
+export const debugDispatcher = new EventDispatcher()
+
+export const ToolEvents = {
+  // Components
+  SELECT_DROPDOWN: 'ToolEvents::selectDropdown',
+  DRAG_UPDATE: 'ToolEvents::dragUpdate',
+  // SceneHierarchy
+  INSPECT_ITEM: 'ToolEvents::inspectItem',
+  REFRESH_SCENE: 'ToolEvents::refreshScene',
+  SET_SCENE: 'ToolEvents::setScene',
+}

package/src/editor/sceneHierarchy/ChildObject.tsx

@@ -0,0 +1,56 @@
+// Libs
+import { useState } from 'react'
+import { Object3D } from 'three'
+// Models
+import { debugDispatcher, ToolEvents } from '../global'
+import { ChildObjectProps } from './types'
+// Utils
+import { determineIcon } from './utils'
+
+export default function ChildObject(props: ChildObjectProps) {
+  const [open, setOpen] = useState(false)
+
+  let container = null
+  let hasChildren = false
+  if (props.child.children.length > 0) {
+    hasChildren = true
+    const children: Array<any> = []
+    props.child.children.map((child: Object3D) => {
+      children.push(<ChildObject child={child} key={Math.random()} />)
+    })
+    container = <div className={`container ${!open ? 'closed' : ''}`}>{children}</div>
+  }
+
+  return (
+    <div className="childObject" key={Math.random()}>
+      <div className="child">
+        {hasChildren ? (
+          <button
+            className="status"
+            style={{
+              backgroundPositionX: open ? '-14px' : '2px',
+            }}
+            onClick={() => {
+              setOpen(!open)
+            }}
+          ></button>
+        ) : null}
+        <button
+          className="name"
+          style={{
+            left: hasChildren ? '20px' : '5px',
+          }}
+          onClick={() => {
+            debugDispatcher.dispatchEvent({ type: ToolEvents.INSPECT_ITEM, value: props.child })
+          }}
+        >
+          {props.child.name.length > 0
+            ? `${props.child.name} (${props.child.type})`
+            : `${props.child.type}::${props.child.uuid}`}
+        </button>
+        <div className={`icon ${determineIcon(props.child)}`}></div>
+      </div>
+      {container}
+    </div>
+  )
+}

package/src/editor/sceneHierarchy/ContainerObject.tsx

@@ -0,0 +1,12 @@
+import { Object3D } from 'three'
+import ChildObject from './ChildObject'
+import type { ChildObjectProps } from './types'
+
+export default function ContainerObject(props: ChildObjectProps) {
+  const children: Array<any> = []
+  props.child.children.map((child: Object3D) => {
+    children.push(<ChildObject child={child} key={Math.random()} />)
+  })
+
+  return <div className="scene">{children}</div>
+}

package/src/editor/sceneHierarchy/SceneHierarchy.tsx

@@ -0,0 +1,77 @@
+// Libs
+import { Component, ReactNode } from 'react'
+// Models
+import { debugDispatcher, ToolEvents } from '../global'
+// Components
+import '../scss/_sceneHierarchy.scss'
+import ContainerObject from './ContainerObject'
+import { SceneHierarchyState } from './types'
+
+export default class SceneHierarchy extends Component {
+  constructor(props: object | SceneHierarchyState) {
+    super(props)
+    this.state = {
+      open: false,
+      scene: null,
+    } as SceneHierarchyState
+
+    debugDispatcher.addEventListener(ToolEvents.REFRESH_SCENE, this.onUpdate)
+    debugDispatcher.addEventListener(ToolEvents.SET_SCENE, this.onSetScene)
+  }
+
+  componentWillUnmount(): void {
+    debugDispatcher.removeEventListener(ToolEvents.REFRESH_SCENE, this.onUpdate)
+    debugDispatcher.removeEventListener(ToolEvents.SET_SCENE, this.onSetScene)
+  }
+
+  render(): ReactNode {
+    const headerTitle = this.componentState.scene !== null ? `Hierarchy: ${this.componentState.scene.name}` : 'Hierarchy'
+    return (
+      <div id="SceneHierarchy">
+        <div className="header">
+          <button
+            className="status"
+            style={{
+              backgroundPositionX: this.componentState.open ? '-14px' : '2px',
+            }}
+            onClick={this.toggleOpen}
+          ></button>
+          <span>{headerTitle}</span>
+          <button className="refresh hideText" onClick={this.onRefresh}>
+            Refresh
+          </button>
+        </div>
+        {this.componentState.scene !== null && this.componentState.open ? <ContainerObject child={this.componentState.scene} /> : null}
+    </div>
+    )
+  }
+
+  // Private
+
+  private onUpdate = () => {
+    //
+  }
+
+  private toggleOpen = () => {
+    this.setState(()=> ({
+      open: !this.componentState.open,
+    }))
+  }
+
+  private onRefresh = () => {
+    debugDispatcher.dispatchEvent({ type: ToolEvents.INSPECT_ITEM, value: this.componentState.scene })
+  }
+
+  private onSetScene = (evt: any) => {
+    console.log('SceneHierarchy::onSetScene', evt)
+    this.setState(() => ({
+      scene: evt.value
+    }))
+  }
+
+  // Getters / Setters
+
+  get componentState(): SceneHierarchyState {
+    return this.state as SceneHierarchyState
+  }
+}

package/src/editor/sceneHierarchy/types.ts

@@ -0,0 +1,10 @@
+import { Object3D } from 'three'
+
+export type ChildObjectProps = {
+  child: Object3D
+}
+
+export type SceneHierarchyState = {
+  open: boolean
+  scene: Object3D | null
+}

package/src/editor/sceneHierarchy/utils.ts

@@ -0,0 +1,25 @@
+import { Object3D } from 'three'
+
+export function determineIcon(obj: Object3D): string {
+  if (obj.name === 'cameras') {
+    return 'camera'
+  } else if (obj.name === 'interactive') {
+    return 'interactive'
+  } else if (obj.name === 'lights') {
+    return 'light'
+  } else if (obj.name === 'ui') {
+    return 'ui'
+  } else if (obj.name === 'utils') {
+    return 'utils'
+  }
+
+  const type = obj.type
+  if (type.search('Helper') > -1) {
+    return 'icon_utils'
+  } else if (type.search('Camera') > -1) {
+    return 'camera'
+  } else if (type.search('Light') > -1) {
+    return 'light'
+  }
+  return 'obj3D'
+}