@tomorrowevening/hermes 0.0.2 → 0.0.4

package/src/editor/scss/_sceneHierarchy.scss

@@ -11,17 +11,86 @@ $icon_world: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM
 
 #SceneHierarchy {
   background-color: #0d0d0d;
-  border-radius: 2px;
-  bottom: 0;
-  right: 0;
-  font-family: Roboto Mono, Source Code Pro, Menlo, Courier, monospace;
-  font-size: 10px;
+  border: 1px solid #111;
+  max-height: 100%;
   min-height: $barHeight;
-  overflow: hidden;
+  overflow-y: auto;
   pointer-events: visible;
   position: absolute;
-  width: 250px;
-  z-index: 100;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 300px;
+
+  .accordion {
+    border-bottom: 1px dotted #333;
+    background-color: #111;
+    line-height: 0;
+    resize: vertical;
+    overflow-y: auto;
+
+    &.hide {
+      resize: none;
+      overflow-y: hidden;
+    }
+
+    > div {
+      display: grid; 
+      grid-template-rows: 0fr;
+      margin-left: 5px;
+      transition: 0.33s grid-template-rows cubic-bezier(0.645, 0.045, 0.355, 1);
+      > div {
+        overflow: hidden;
+      }
+      &.open {
+        grid-template-rows: 1fr;
+      }
+    }
+
+    .icon {
+      height: $barHeight;
+      width: $barHeight;
+      button {
+        text-indent: -9999px;
+        white-space: nowrap;
+      }
+    }
+
+    .toggle {
+      background-color: #333;
+      display: inline-block;
+      font-size: 12px;
+      font-weight: bold;
+      margin: 0;
+      padding: 0;
+      position: relative;
+      user-select: none;
+      width: 100%;
+      height: 20px;
+      transition: background-color 0.2s linear;
+      &:hover {
+        background-color: #444;
+      }
+      p {
+        margin: 0;
+        padding: 0;
+      }
+      .label {
+        display: inline;
+        position: absolute;
+        left: 25px;
+        top: 3px;
+      }
+    }
+  }
+
+  input {
+    background-color: #222;
+    border: 1px dotted #333;
+    font-family: Roboto Mono, Source Code Pro, Menlo, Courier, monospace;
+    font-size: 10px;
+    padding: 4px;
+  }
 
   button {
     background-color: transparent;
@@ -33,52 +102,74 @@ $icon_world: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM
     text-align: left;
   }
 
-  .header {
-    height: $barHeight;
-    position: relative;
+  #options {
+    border-bottom: 1px solid #111;
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    width: 100%;
 
-    span {
-      display: inline-block;
-      font-size: 12px;
-      line-height: $barHeight;
-      padding-left: 20px;
-      pointer-events: none;
+    .selected {
+      background-color: #222;
+      button {
+        pointer-events: none;
+      }
     }
 
     button {
-      position: absolute;
-      right: 5px;
-      top: 50%;
-      width: $barHeight;
+      min-width: $barHeight;
       height: $barHeight;
-    }
-
-    .refresh {
-      background-color: transparent;
-      background-image: $icon_refresh;
-      background-size: 20px 20px;
-      opacity: 0.7;
-      transform: translateY(-50%) scale(0.8);
-
+      text-align: center;
+      width: 100%;
       &:hover {
-        opacity: 1;
+        background-color: #333;
       }
     }
 
-    .status {
-      left: 0;
-      transform: translateY(-50%) scale(0.8);
+    li {
+      border-right: 1px solid #111;
+      font-size: 12px;
+      line-height: $barHeight;
+      min-height: $barHeight;
+      min-width: $barHeight;
+      text-align: center;
+      width: 100%;
+      &:first-child {
+        border-left: 1px solid #111;
+      }
     }
   }
 
+  .status, .refresh {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    width: $barHeight;
+    height: $barHeight;
+    text-indent: -9999px;
+    white-space: nowrap;
+  }
+
   .status {
     background-image: $icon_folder;
     background-position-x: 2px;
     background-position-y: 2px;
     background-size: 32px 16px;
-    transform: scale(0.8);
-    width: $barHeight;
-    height: $barHeight;
+    &.open {
+      background-position-x: 18px;
+    }
+  }
+
+  .refresh {
+    background-color: transparent;
+    background-image: $icon_refresh;
+    background-position: 2px 2px;
+    background-repeat: no-repeat;
+    background-size: 16px 16px;
+    position: absolute;
+    right: 5px;
   }
 
   .childObject {
@@ -117,24 +208,33 @@ $icon_world: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM
     .name {
       background-color: transparent;
       max-lines: 1;
+      overflow: hidden;
       position: absolute;
       left: 5px;
-      right: 0;
+      right: 30px;
       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;
+    > div {
+      display: grid; 
+      grid-template-rows: 0fr;
+      transition: 0.33s grid-template-rows cubic-bezier(0.645, 0.045, 0.355, 1);
+      &.open {
+        grid-template-rows: 1fr;
+      }
+      .container {
+        padding-left: 5px;
+        height: auto;
+        overflow-x: hidden;
+        overflow-y: auto;
+        max-height: $maxHeight;
+  
+        &.closed {
+          height: 0;
+          overflow: hidden;
+        }
       }
     }
 

package/src/editor/scss/index.scss

@@ -3,14 +3,14 @@
 @import 'sceneHierarchy';
 
 .editor {
-  font-family: 'Helvetica', 'Arial', sans-serif;
+  font-family: Roboto Mono, Source Code Pro, Menlo, Courier, monospace;
+  font-size: 10px;
   left: 0;
   pointer-events: none;
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
-  z-index: 101;
 
   button {
     background: none;
@@ -22,18 +22,25 @@
     text-align: left;
   }
 
-  .navBar {
+  header {
     display: inline-block;
     pointer-events: visible;
     position: relative;
     left: 50px;
     top: 12px;
+    z-index: 101;
   }
 
-  @import 'dropdown';
-  @import 'draggable';
+  footer {
+    position: absolute;
+    right: 5px;
+    bottom: 0;
+  }
 }
 
+@import 'dropdown';
+@import 'draggable';
+
 .fsAbsolute {
   position: absolute;
   left: 0;
@@ -57,4 +64,4 @@
 .hideText {
   text-indent: -9999px;
   white-space: nowrap;
-}
+}

package/src/editor/utils.ts

@@ -1,14 +1,16 @@
+import { Object3D } from "three";
+
 export function clamp(min: number, max: number, value: number) {
-  return Math.min(max, Math.max(min, value))
+  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)
+  const d = x - y;
+  return Math.sqrt(d * d);
 }
 
 export function randomID(): string {
-  return Math.round(Math.random() * 1000000).toString()
+  return Math.round(Math.random() * 1000000).toString();
 }
 
 export function isColor(obj: any) {
@@ -16,5 +18,40 @@ export function isColor(obj: any) {
     obj.r !== undefined &&
     obj.g !== undefined &&
     obj.b !== undefined
-  )
+  );
 }
+
+export function colorToHex(obj: any) {
+  const r = Math.round(obj.r * 255);
+  const g = Math.round(obj.g * 255);
+  const b = Math.round(obj.b * 255);
+
+  const toHex = (value: number) => {
+    const hex = value.toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+
+  const red = toHex(r);
+  const green = toHex(g);
+  const blue = toHex(b);
+
+  return '#' + red + green + blue;
+}
+
+let totalObjects = 0;
+export const hierarchyUUID = (object: Object3D): void => {
+  if (!object) return;
+
+  let uuid = object.name.replace(' ', '');
+  // fallback in case there's no name
+  if (uuid.length === 0) uuid = `obj_${totalObjects}`;
+  // inherit parent's UUID for hierarchy
+  if (object.parent !== null) uuid = `${object.parent.uuid}.${uuid}`;
+  object.uuid = uuid;
+  totalObjects++;
+
+  // Iterate children
+  object.children.forEach((child: Object3D) => {
+    hierarchyUUID(child);
+  });
+};

package/src/example/CustomEditor.tsx

@@ -0,0 +1,40 @@
+import { app } from './constants'
+import Editor from '@/editor/Editor'
+import Dropdown from '@/editor/components/Dropdown'
+import SceneHierarchy from '@/editor/sceneHierarchy/SceneHierarchy'
+
+export default function CustomEditor() {
+  return (
+    <Editor
+      header={[
+        <Dropdown
+          title="Scenes"
+          key="Scenes"
+          options={[
+            {
+              type: 'option',
+              title: 'Scene 1',
+              value: 'scene1',
+            },
+            {
+              type: 'option',
+              title: 'Scene 2',
+              value: 'scene2',
+            },
+          ]}
+          onSelect={(value: string) => {
+            app.send({
+              target: 'app',
+              event: 'selectComponent',
+              data: {
+                dropdown: 'Scenes',
+                value,
+              },
+            })
+          }}
+        />
+      ]}>
+        <SceneHierarchy key="SceneHierarchy" three={app.three} />
+      </Editor>
+  )
+}

package/src/example/components/App.tsx

@@ -0,0 +1,164 @@
+// Libs
+import { useEffect, useRef, useState } from 'react'
+import { types } from '@theatre/core'
+import { WebGLRenderer } from 'three';
+// Models
+import { app, IS_DEV } from '../constants'
+// Components
+import './App.css'
+import ExampleScene from '../three/ExampleScene';
+import SceneInspector from '@/editor/sceneHierarchy/inspector/SceneInspector';
+import { debugDispatcher, ToolEvents } from '../../editor/global';
+import MultiView from '@/editor/sceneHierarchy/inspector/MultiView/MultiView';
+
+let renderer: WebGLRenderer;
+let exampleScene: ExampleScene;
+
+const useTweakpane = false;
+const threeCameras: any[] = [];
+
+function App() {
+  const elementRef = useRef<HTMLDivElement>(null!)
+  const [showSceneInspector, setShowSceneInspector] = useState(false);
+  app.theatre?.sheet('App')
+
+  // Theatre
+  useEffect(() => {
+    const container = elementRef.current!
+    container.style.visibility = app.editor ? 'hidden' : 'inherit'
+
+    // 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()
+    }
+  }, [])
+
+  // ThreeJS
+  useEffect(() => {
+    renderer = new WebGLRenderer({ antialias: true });
+    renderer.autoClear = false;
+    renderer.shadowMap.enabled = true;
+    renderer.setPixelRatio(devicePixelRatio);
+    renderer.setClearColor(0x000000, 1);
+    elementRef.current.parentElement!.appendChild(renderer.domElement);
+
+    exampleScene = new ExampleScene();
+    threeCameras.push(exampleScene.camera);
+
+    // Start RAF
+    let raf = -1;
+
+    const onResize = () => {
+      let width = window.innerWidth;
+      const height = window.innerHeight;
+      if (app.editor) width -= 300;
+      renderer.setSize(width, height);
+      exampleScene.resize(width, height);
+    };
+
+    const onUpdate = () => {
+      renderer.clear();
+      exampleScene.update();
+      renderer.render(exampleScene, exampleScene.camera);
+      raf = requestAnimationFrame(onUpdate);
+    };
+
+    app.three.setScene(exampleScene);
+    onResize();
+    window.addEventListener('resize', onResize);
+    if (!app.editor) onUpdate();
+    setShowSceneInspector(true);
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+      renderer.dispose();
+      cancelAnimationFrame(raf);
+      raf = -1;
+    }
+  }, [])
+
+  // Debug Components
+  if (IS_DEV) {
+    useEffect(() => {
+      const container = elementRef.current!;
+      container.style.visibility = app.editor ? 'hidden' : 'inherit';
+
+      // Tweakpane Example
+      if (useTweakpane) {
+        const testFolder = app.debug.addFolder('Test Folder');
+
+        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);
+      }
+
+      // Components Example
+      const onCustom = (evt: any) => {
+        console.log('Custom:', evt.value)
+      }
+      const selectDropdown = (evt: any) => {
+        console.log(`Dropdown: ${evt.value.dropdown}, value: ${evt.value.value}`)
+      }
+      debugDispatcher.addEventListener(ToolEvents.CUSTOM, onCustom)
+      debugDispatcher.addEventListener(ToolEvents.SELECT_DROPDOWN, selectDropdown)
+      return () => {
+        debugDispatcher.removeEventListener(ToolEvents.CUSTOM, onCustom)
+        debugDispatcher.removeEventListener(ToolEvents.SELECT_DROPDOWN, selectDropdown)
+      }
+    }, [])
+  }
+
+  return (
+    <>
+      <div id='box' ref={elementRef}>
+        <button onClick={() => {
+          app.send({
+            target: 'editor',
+            event: 'custom',
+            data: 'hello editor!'
+          });
+        }}>Click</button>
+      </div>
+
+      {IS_DEV && showSceneInspector && (
+        <SceneInspector scene={exampleScene} three={app.three} />
+      )}
+
+      {IS_DEV && showSceneInspector && app.editor && (
+        <MultiView scene={exampleScene} renderer={renderer} cameras={threeCameras} />
+      )}
+    </>
+  )
+}
+
+export default App

package/src/example/constants.ts

@@ -1,13 +1,44 @@
-import Application from '../core/Application'
+import Application from '@/core/Application'
+import RemoteComponents from '@/core/remote/RemoteComponents'
+import RemoteTheatre from '@/core/remote/RemoteTheatre'
+import RemoteThree from '@/core/remote/RemoteThree'
+import RemoteTweakpane from '@/core/remote/RemoteTweakpane'
 
-export const IS_DEV = import.meta.env.DEV
-export const app = new Application(IS_DEV, 'editor')
+export const IS_DEV = true
+// export const IS_DEV = import.meta.env.DEV
+// export const app = new Application('Hermes', IS_DEV, 'editor')
 
-// Initiation, etc should happen once the app gets loaded..
-// TODO Pass in loaded JSON
-app.setupTheatre('RemoteApp')
+class CustomApp extends Application {
+  constructor(name: string, debugEnabled: boolean, editorHashtag: string) {
+    super(name, debugEnabled, editorHashtag)
 
-if (IS_DEV) {
-  app.setupComponents()
-  app.setupGUI()
+    // Add components
+    this.addComponent('theatre', new RemoteTheatre(this, 'RemoteApp', {}))
+
+    if (IS_DEV) {
+      this.addComponent('components', new RemoteComponents(this))
+      // this.addComponent('debug', new RemoteTweakpane(this))
+      this.addComponent('three', new RemoteThree(this))
+    }
+  }
+
+  // Components
+
+  get debug(): RemoteTweakpane {
+    return this.components.get('debug') as RemoteTweakpane
+  }
+
+  get debugComponents(): RemoteComponents {
+    return this.components.get('components') as RemoteComponents
+  }
+
+  get theatre(): RemoteTheatre {
+    return this.components.get('theatre') as RemoteTheatre
+  }
+
+  get three(): RemoteThree {
+    return this.components.get('three') as RemoteThree
+  }
 }
+
+export const app = new CustomApp('Hermes', IS_DEV, 'editor')

package/src/example/main.tsx

@@ -6,13 +6,10 @@ import studio from '@theatre/studio'
 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'
+import App from './components/App'
+import CustomEditor from './CustomEditor'
 // Tools
-import RemoteController from '../core/RemoteController'
-import SceneHierarchy from '../editor/sceneHierarchy/SceneHierarchy'
+import RemoteController from '@/core/RemoteController'
 
 // Debug tools
 if (IS_DEV) {
@@ -20,51 +17,14 @@ if (IS_DEV) {
   RemoteController(app)
 }
 
-//
+// React
 
 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}
+        {app.editor ? <CustomEditor /> : null}
       </>
     ) : (
       <React.StrictMode>