@tomorrowevening/hermes 0.0.0

package/src/editor/scss/_debug.scss

@@ -0,0 +1,68 @@
+$maxInput: 160px;
+
+body {
+
+  .tp-dfwv,
+  .tp-dfwv button,
+  .tp-dfwv input {
+    text-transform: none;
+  }
+}
+
+.tp-ckbv {
+  float: right;
+}
+
+.tp-dfwv {
+  .tp-lblv {
+    position: relative;
+  }
+
+  .tp-lblv_v {
+    display: inline-block;
+    max-width: $maxInput;
+
+    .tp-ckbv {
+      width: 20px;
+    }
+
+    .tp-txtv,
+    .tp-sldtxtv {
+      max-width: $maxInput;
+    }
+
+    .tp-lstv {
+      width: $maxInput;
+    }
+
+    .tp-fpsv {
+      width: 280px;
+    }
+  }
+
+  .tp-lblv-nol {
+    .tp-btnv {
+      width: 280px;
+    }
+  }
+
+  .tp-btnv_b {
+    padding: 0 5px;
+  }
+
+  .tp-btngridv {
+    max-height: 100px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .tp-tabv {
+    max-height: 90vh;
+    overflow: hidden auto;
+  }
+}
+
+.tp-dfwv {
+  font-family: Roboto Mono, Source Code Pro, Menlo, Courier, monospace;
+  font-size: 10px;
+}

package/src/editor/scss/_draggable.scss

@@ -0,0 +1,43 @@
+@use 'theme';
+
+.draggable {
+  li {
+    div {
+      background-color: $BAR_COLOR;
+      line-height: 14px;
+      padding: 5px 10px;
+      transition: background-color 0.25s linear;
+      &:hover {
+        background-color: $BTN_HOVER;
+      }
+      span {
+        font-size: 12px;
+        margin: 0px 15px 0 10px;
+        padding: 0px 5px;
+      }
+      .dragIcon {
+        position: absolute;
+        left: 10px;
+      }
+      .closeIcon {
+        background-color: transparent;
+        padding: 0;
+        position: absolute;
+        right: 5px;
+        top: 50%;
+        min-width: 14px;
+        width: 14px;
+        height: 14px;
+        transform: translateY(-50%);
+        &:hover {
+          background-color: transparent;
+        }
+        svg {
+          background-color: transparent;
+          left: 0px;
+          position: relative;
+        }
+      }
+    }
+  }
+}

package/src/editor/scss/_dropdown.scss

@@ -0,0 +1,83 @@
+@use 'theme';
+
+.dropdown {
+  color: #FFF;
+  display: inline-block;
+  margin-right: 1px;
+  text-align: left;
+  height: fit-content;
+  min-width: auto;
+  width: max-content;
+
+  button {
+    backdrop-filter: blur(2px);
+    background-color: $BAR_COLOR;
+    color: rgba($color: #FFF, $alpha: 0.5);
+    font-size: 12px;
+    padding: 5px 10px;
+    position: relative;
+    text-align: left;
+    min-width: $ROW_HEIGHT;
+    width: 100%;
+    height: $BTN_SIZE;
+    transition: all 0.2s linear;
+
+    &:hover {
+      background-color: $BTN_HOVER;
+      color: #FFF;
+    }
+
+    &.svg {
+      line-height: 0;
+      width: $BTN_SIZE;
+    }
+  }
+
+  p {
+    background-color: $BAR_COLOR;
+    display: inline-block;
+    height: $ROW_HEIGHT;
+    margin: 0;
+    min-width: $ROW_HEIGHT;
+    padding: 5px;
+  }
+
+  svg {
+    position: relative;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    margin-block: 0;
+    padding-inline: 0;
+    position: absolute;
+    width: max-content;
+
+    li {
+      border-top: 1px solid $BORDER_COLOR;
+      display: block;
+      position: relative;
+
+      &.selected button {
+        background-color: $BTN_SELECTED;
+
+        &:hover {
+          background-color: $BTN_SELECTED_HOVER;
+        }
+      }
+    }
+  }
+
+  &.subdropdown {
+    min-width: 100%;
+
+    ul {
+      border-left: 1px solid $BORDER_COLOR;
+      left: 100%;
+      top: -1px;
+    }
+  }
+}

package/src/editor/scss/_sceneHierarchy.scss

@@ -0,0 +1,170 @@
+$barHeight: 20px;
+$maxHeight: calc($barHeight * 10);
+
+#SceneHierarchy {
+  background-color: #0d0d0d;
+  border-radius: 2px;
+  bottom: 0;
+  right: 0;
+  font-family: Roboto Mono, Source Code Pro, Menlo, Courier, monospace;
+  font-size: 10px;
+  min-height: $barHeight;
+  overflow: hidden;
+  pointer-events: visible;
+  position: absolute;
+  width: 250px;
+  z-index: 100;
+
+  button {
+    background-color: transparent;
+    border: none;
+    color: #FFF;
+    font-size: 12px;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+  }
+
+  .header {
+    height: $barHeight;
+    position: relative;
+
+    span {
+      display: inline-block;
+      font-size: 12px;
+      line-height: $barHeight;
+      padding-left: 20px;
+      pointer-events: none;
+    }
+
+    button {
+      position: absolute;
+      right: 5px;
+      top: 50%;
+      width: $barHeight;
+      height: $barHeight;
+    }
+
+    .refresh {
+      background-color: transparent;
+      background-image: url("/images/debug/icon_refresh.png");
+      background-size: 20px 20px;
+      opacity: 0.7;
+      transform: translateY(-50%) scale(0.8);
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    .status {
+      left: 0;
+      transform: translateY(-50%) scale(0.8);
+    }
+  }
+
+  .status {
+    background-image: url("/images/debug/icon_folder.png");
+    background-position-x: 2px;
+    background-position-y: 2px;
+    background-size: 32px 16px;
+    transform: scale(0.8);
+    width: $barHeight;
+    height: $barHeight;
+  }
+
+  .childObject {
+    background-color: #111;
+    min-height: $barHeight;
+    overflow: hidden;
+
+    ::-webkit-scrollbar {
+      width: 10px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: #0d0d0d;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: #666;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: #999;
+    }
+
+    .child {
+      background-color: #222;
+      border: none;
+      border-bottom: 1px solid #111;
+      height: $barHeight;
+      position: relative;
+
+      &:hover {
+        background-color: #333;
+      }
+    }
+
+    .name {
+      background-color: transparent;
+      max-lines: 1;
+      position: absolute;
+      left: 5px;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      white-space: nowrap;
+    }
+
+    .container {
+      padding-left: 5px;
+      height: auto;
+      overflow-x: hidden;
+      overflow-y: auto;
+      max-height: $maxHeight;
+
+      &.closed {
+        height: 0;
+        overflow: hidden;
+      }
+    }
+
+    .icon {
+      background-color: transparent;
+      background-image: url("/images/debug/icon_world.png");
+      background-size: 20px 20px;
+      display: inline-block;
+      position: absolute;
+      right: 5px;
+      top: 0;
+      width: $barHeight;
+      height: $barHeight;
+      transform: scale(0.8);
+    }
+
+    .obj3D {
+      background-image: url("/images/debug/icon_world.png");
+    }
+
+    .camera {
+      background-image: url("/images/debug/icon_camera.png");
+    }
+
+    .interactive {
+      background-image: url("/images/debug/icon_interactive.png");
+    }
+
+    .light {
+      background-image: url("/images/debug/icon_lights.png");
+    }
+
+    .ui {
+      background-image: url("/images/debug/icon_ui.png");
+    }
+
+    .utils {
+      background-image: url("/images/debug/icon_utils.png");
+    }
+  }
+}

package/src/editor/scss/_theme.scss

@@ -0,0 +1,9 @@
+$ROW_HEIGHT: 22px;
+$BAR_COLOR: rgba(34, 34, 34, 0.8);
+$BORDER_COLOR: rgba(17, 17, 17, 0.9);
+$BTN_SIZE: 32px;
+$BTN_HOVER: rgba(51, 51, 51, 0.8);
+$BTN_SELECTED: rgba(68, 68, 68, 0.8);
+$BTN_SELECTED_HOVER: rgba(85, 85, 85, 0.8);
+$PANEL: rgba(25, 25, 25, 0.8);
+$PANEL_DARK: rgba(17, 17, 17, 0.8);

package/src/editor/scss/index.scss

@@ -0,0 +1,58 @@
+@import 'theme';
+@import 'debug';
+@import 'sceneHierarchy';
+
+.editor {
+  font-family: 'Helvetica', 'Arial', sans-serif;
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 101;
+
+  button {
+    background: none;
+    border: none;
+    color: white;
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+  }
+
+  .navBar {
+    display: inline-block;
+    pointer-events: visible;
+    position: relative;
+    left: 50px;
+    top: 12px;
+  }
+
+  @import 'dropdown';
+  @import 'draggable';
+}
+
+.fsAbsolute {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.absoluteCenter {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+.hideText {
+  text-indent: -9999px;
+  white-space: nowrap;
+}

package/src/editor/utils.ts

@@ -0,0 +1,20 @@
+export function clamp(min: number, max: number, value: number) {
+  return Math.min(max, Math.max(min, value))
+}
+
+export function distance(x: number, y: number): number {
+  const d = x - y
+  return Math.sqrt(d * d)
+}
+
+export function randomID(): string {
+  return Math.round(Math.random() * 1000000).toString()
+}
+
+export function isColor(obj: any) {
+  return (
+    obj.r !== undefined &&
+    obj.g !== undefined &&
+    obj.b !== undefined
+  )
+}

package/src/example/App.css

@@ -0,0 +1,6 @@
+#box {
+  background: #FF0000;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}

package/src/example/App.tsx

@@ -0,0 +1,88 @@
+// Libs
+import { CSSProperties, useEffect, useRef } from 'react'
+import { types } from '@theatre/core'
+// Models
+import { app } from './constants'
+// Components
+import './App.css'
+import { debugDispatcher, ToolEvents } from '../editor/global'
+
+const elementStyle: CSSProperties = {
+  background: '#FF0000',
+  width: '100px',
+  height: '100px',
+  position: 'absolute',
+}
+
+function App() {
+  const elementRef = useRef<HTMLDivElement>(null!)
+  app.theatre?.sheet('App')
+
+  useEffect(() => {
+    const container = elementRef.current!
+    container.style.visibility = app.editor ? 'hidden' : 'inherit'
+
+    // GUI Example
+    const testFolder = app.debug?.addFolder('Test')
+
+    app.debug?.button('Test Button', () => {
+      console.log('Test button works!')
+    }, testFolder)
+
+    const test = { opacity: 1, rotation: 0 }
+    app.debug?.bind(test, 'opacity', {
+      min: 0,
+      max: 1,
+      onChange: (value: number) => {
+        container.style.opacity = value.toFixed(2)
+      }
+    }, testFolder)
+
+    app.debug?.bind(test, 'rotation', {
+      min: 0,
+      max: 360,
+      onChange: (value: number) => {
+        container.style.transform = `rotate(${value}deg)`
+      }
+    }, testFolder)
+
+    // Theatre Example
+    const sheetObj = app.theatre?.sheetObject(
+      'App',
+      'Box',
+      {
+        x: types.number(100, {range: [0, window.innerWidth]}),
+        y: types.number(100, {range: [0, window.innerHeight]}),
+      },
+      (values: any) => {
+        container.style.left = `${values.x}px`
+        container.style.top = `${values.y}px`
+      },
+    )
+    return () => {
+      if (sheetObj !== undefined) app.theatre?.unsubscribe(sheetObj)
+      app.dispose()
+    }
+  }, [])
+
+  useEffect(() => {
+    const selectDropdown = (evt: any) => {
+      console.log(`Dropdown: ${evt.value.dropdown}, value: ${evt.value.value}`)
+    }
+    const draglistUpdate = (evt: any) => {
+      console.log(`Dragged list updated: ${evt.value.dropdown}, value: ${evt.value.value.join(', ')}`)
+    }
+    debugDispatcher.addEventListener(ToolEvents.SELECT_DROPDOWN, selectDropdown)
+    debugDispatcher.addEventListener(ToolEvents.DRAG_UPDATE, draglistUpdate)
+    return () => {
+      debugDispatcher.removeEventListener(ToolEvents.SELECT_DROPDOWN, selectDropdown)
+      debugDispatcher.removeEventListener(ToolEvents.DRAG_UPDATE, draglistUpdate)
+    }
+  }, [])
+
+  return (
+    <div id='box' ref={elementRef} />
+  )
+}
+
+export default App

package/src/example/constants.ts

@@ -0,0 +1,13 @@
+import Application from '../core/Application'
+
+export const IS_DEV = import.meta.env.DEV
+export const app = new Application(IS_DEV, 'editor')
+
+// Initiation, etc should happen once the app gets loaded..
+// TODO Pass in loaded JSON
+app.setupTheatre('RemoteApp')
+
+if (IS_DEV) {
+  app.setupComponents()
+  app.setupGUI()
+}

package/src/example/index.scss

@@ -0,0 +1,37 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+html, body {
+  min-width: 100%;
+  min-height: 100%;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+}
+
+button {
+  &:focus {
+    outline: none;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}

package/src/example/main.tsx

@@ -0,0 +1,75 @@
+// Libs
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import studio from '@theatre/studio'
+// Models
+import { app, IS_DEV } from './constants'
+// Components
+import './index.scss'
+import App from './App'
+import Editor from '../editor/Editor'
+import Draggable from '../editor/components/Draggable'
+import Dropdown from '../editor/components/Dropdown'
+// Tools
+import RemoteController from '../core/RemoteController'
+import SceneHierarchy from '../editor/sceneHierarchy/SceneHierarchy'
+
+// Debug tools
+if (IS_DEV) {
+  studio.initialize()
+  RemoteController(app)
+}
+
+//
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <>
+    {IS_DEV ? (
+      <>
+        <App />
+        {app.editor ? (
+          <Editor components={[
+            <SceneHierarchy key="SceneHierarchy" />
+          ]}>
+            <Dropdown
+              title="Scenes"
+              options={[
+                {
+                  type: 'option',
+                  title: 'Option 1',
+                  value: 'opt1',
+                },
+                {
+                  type: 'option',
+                  title: 'Option 2',
+                  value: 'opt2',
+                },
+              ]}
+              onSelect={(value: string) => {
+                app.components?.selectDropdown('Scenes', value)
+              }}
+            />
+
+            <Draggable
+              title="Draggable Items"
+              options={[
+                'Item A',
+                'Item B',
+                'Item C',
+                'Item D',
+                'Item E',
+              ]}
+              onDragComplete={(options: string[]) => {
+                app.components?.updateDropdown('Draggable Items', options)
+              }}
+            />
+          </Editor>
+        ) : null}
+      </>
+    ) : (
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>
+    )}
+  </>,
+)

package/src/library.ts

@@ -0,0 +1,16 @@
+// Core
+export { default as Application } from './core/Application'
+export { debugDispatcher, ToolEvents } from './editor/global'
+export { default as BaseRemote } from './core/remote/BaseRemote'
+export { default as RemoteComponents } from './core/remote/RemoteComponents'
+export { default as RemoteTheatre } from './core/remote/RemoteTheatre'
+export { default as RemoteTweakpane } from './core/remote/RemoteTweakpane'
+// Components
+export { default as NavButton } from './editor/components/NavButton'
+export { default as DraggableItem } from './editor/components/DraggableItem'
+export { default as Draggable } from './editor/components/Draggable'
+export { default as DropdownItem } from './editor/components/DropdownItem'
+export { default as Dropdown } from './editor/components/Dropdown'
+export { default as RemoteController } from './core/RemoteController'
+export { default as SceneHierarchy } from './editor/sceneHierarchy/SceneHierarchy'
+export { default as Editor } from './editor/Editor'

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />