@tomorrowevening/hermes 0.0.2 → 0.0.3

package/src/editor/sceneHierarchy/ChildObject.tsx

@@ -1,24 +1,20 @@
 // Libs
-import { useState } from 'react'
-import { Object3D } from 'three'
+import { useState } from 'react';
+import { Object3D } from 'three';
 // Models
-import { debugDispatcher, ToolEvents } from '../global'
-import { ChildObjectProps } from './types'
+import { ChildObjectProps } from './types';
 // Utils
-import { determineIcon } from './utils'
+import { determineIcon } from './utils';
 
 export default function ChildObject(props: ChildObjectProps) {
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(props.child.children.length > 0);
 
-  let container = null
-  let hasChildren = false
+  const hasChildren = props.child.children.length > 0;
+  const children: Array<any> = [];
   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>
+      children.push(<ChildObject child={child} key={Math.random()} three={props.three} />);
+    });
   }
 
   return (
@@ -31,7 +27,7 @@ export default function ChildObject(props: ChildObjectProps) {
               backgroundPositionX: open ? '-14px' : '2px',
             }}
             onClick={() => {
-              setOpen(!open)
+              setOpen(!open);
             }}
           ></button>
         ) : null}
@@ -41,7 +37,7 @@ export default function ChildObject(props: ChildObjectProps) {
             left: hasChildren ? '20px' : '5px',
           }}
           onClick={() => {
-            debugDispatcher.dispatchEvent({ type: ToolEvents.INSPECT_ITEM, value: props.child })
+            props.three.getObject(props.child.uuid);
           }}
         >
           {props.child.name.length > 0
@@ -50,7 +46,11 @@ export default function ChildObject(props: ChildObjectProps) {
         </button>
         <div className={`icon ${determineIcon(props.child)}`}></div>
       </div>
-      {container}
+      <div className={open ? 'open' : ''}>
+        <div className="container">
+          {children}
+        </div>
+      </div>
     </div>
-  )
+  );
 }

package/src/editor/sceneHierarchy/ContainerObject.tsx

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

package/src/editor/sceneHierarchy/SceneHierarchy.tsx

@@ -1,77 +1,80 @@
 // Libs
-import { Component, ReactNode } from 'react'
+import { Component, ReactNode } from 'react';
 // Models
-import { debugDispatcher, ToolEvents } from '../global'
+import { debugDispatcher, ToolEvents } from '../global';
 // Components
-import '../scss/_sceneHierarchy.scss'
-import ContainerObject from './ContainerObject'
-import { SceneHierarchyState } from './types'
+import '../scss/_sceneHierarchy.scss';
+import Accordion from './Accordion';
+import ContainerObject from './ContainerObject';
+import Inspector from './inspector/Inspector';
+import { SceneHierarchyState } from './types';
+import RemoteThree from '@/core/remote/RemoteThree';
 
-export default class SceneHierarchy extends Component {
-  constructor(props: object | SceneHierarchyState) {
-    super(props)
+export default class SceneHierarchy extends Component<SceneHierarchyState> {
+  private three: RemoteThree;
+
+  constructor(props: SceneHierarchyState) {
+    super(props);
     this.state = {
-      open: false,
-      scene: null,
-    } as SceneHierarchyState
+      scene: props.scene !== undefined ? props.scene : null,
+    };
+    this.three = props.three;
+    debugDispatcher.addEventListener(ToolEvents.SET_SCENE, this.setScene);
+  }
 
-    debugDispatcher.addEventListener(ToolEvents.REFRESH_SCENE, this.onUpdate)
-    debugDispatcher.addEventListener(ToolEvents.SET_SCENE, this.onSetScene)
+  componentDidMount(): void {
+    this.onRefresh();
   }
 
   componentWillUnmount(): void {
-    debugDispatcher.removeEventListener(ToolEvents.REFRESH_SCENE, this.onUpdate)
-    debugDispatcher.removeEventListener(ToolEvents.SET_SCENE, this.onSetScene)
+    debugDispatcher.removeEventListener(ToolEvents.SET_SCENE, this.setScene);
   }
 
   render(): ReactNode {
-    const headerTitle = this.componentState.scene !== null ? `Hierarchy: ${this.componentState.scene.name}` : 'Hierarchy'
+    const hasScene = this.componentState.scene !== null;
+    const HierarchyName = 'Hierarchy' + (hasScene ? `: ${this.componentState.scene?.name}` : '');
     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 id="SceneHierarchy" key="SceneHierarchy">
+        {(
+          <>
+            {hasScene && (
+              <Accordion
+                label={HierarchyName}
+                button={(
+                  <button className='icon refresh hideText' onClick={this.onRefresh}>
+                    Refresh
+                  </button>
+                )}
+                open={true}
+              >
+                <ContainerObject child={this.componentState.scene!} three={this.three} />
+              </Accordion>
+            )}
+
+            <Accordion label='Inspector'>
+              <Inspector key="Inspector" three={this.three} />
+            </Accordion>
+          </>
+        )}
     </div>
-    )
+    );
   }
 
   // Private
 
-  private onUpdate = () => {
-    //
-  }
-
-  private toggleOpen = () => {
-    this.setState(()=> ({
-      open: !this.componentState.open,
-    }))
-  }
-
   private onRefresh = () => {
-    debugDispatcher.dispatchEvent({ type: ToolEvents.INSPECT_ITEM, value: this.componentState.scene })
-  }
+    this.three.getScene();
+  };
 
-  private onSetScene = (evt: any) => {
-    console.log('SceneHierarchy::onSetScene', evt)
+  private setScene = (evt: any) => {
     this.setState(() => ({
       scene: evt.value
-    }))
-  }
+    }));
+  };
 
   // Getters / Setters
 
   get componentState(): SceneHierarchyState {
-    return this.state as SceneHierarchyState
+    return this.state as SceneHierarchyState;
   }
 }

package/src/editor/sceneHierarchy/ToggleBtn.tsx

@@ -0,0 +1,26 @@
+import { useState } from "react";
+
+type ToggleBtnProps = {
+  expanded: boolean
+  label: string
+  onClick: (expanded: boolean) => void;
+}
+
+export default function ToggleBtn(props: ToggleBtnProps) {
+  const [expanded, setExpanded] = useState(props.expanded);
+  return (
+    <button
+      className='toggleBtn'
+      onClick={() => {
+        const value = !expanded;
+        props.onClick(value);
+        setExpanded(value);
+      }}
+      style={{
+        backgroundPositionY: `${expanded ? 1 : -10}px`
+      }}
+    >
+      <p>{props.label}</p>
+    </button>
+  );
+}

package/src/editor/sceneHierarchy/inspector/Inspector.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from "react";
+import { CoreComponentProps, RemoteObject } from "../types";
+import { ToolEvents, debugDispatcher } from "../../global";
+import './inspector.scss';
+import InspectorField from './InspectorField';
+// Utils
+import { InspectCamera } from "./utils/InspectCamera";
+import { InspectMaterial } from "./utils/InspectMaterial";
+import { InspectTransform } from "./utils/InspectTransform";
+import { InspectLight } from "./utils/InspectLight";
+
+export default function Inspector(props: CoreComponentProps) {
+  const [lastRefresh, setLastRefresh] = useState(-1);
+  const [currentObject, setCurrentObject] = useState<RemoteObject>({
+    name: '',
+    uuid: '',
+    type: '',
+    visible: false,
+    matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+  });
+
+  useEffect(() => {
+    function onSelectItem(evt: any) {
+      const obj = evt.value as RemoteObject;
+      setCurrentObject(obj);
+      setLastRefresh(Date.now());
+    }
+
+    debugDispatcher.addEventListener(ToolEvents.SET_OBJECT, onSelectItem);
+    return () => {
+      debugDispatcher.removeEventListener(ToolEvents.SET_OBJECT, onSelectItem);
+    };
+  }, []);
+
+  return (
+    <div id="Inspector" className={props.class} key={lastRefresh}>
+      {currentObject.uuid.length > 0 && (
+        <>
+          {/* Core */}
+          <InspectorField
+            type="string"
+            title="Name"
+            prop="name"
+            value={currentObject.name}
+            disabled={true}
+          />
+          <InspectorField
+            type="string"
+            title="Type"
+            prop="type"
+            value={currentObject.type}
+            disabled={true}
+          />
+          <InspectorField
+            type="string"
+            title="UUID"
+            prop="uuid"
+            value={currentObject.uuid}
+            disabled={true}
+          />
+          <InspectorField
+            type="boolean"
+            title="Visible"
+            prop="visible"
+            value={currentObject.visible}
+            onChange={(key: string, value: any) => {
+              props.three.updateObject(currentObject.uuid, key, value);
+            }}
+          />
+          {/* Transform */}
+          {InspectTransform(currentObject, props.three)}
+          {/* Camera */}
+          {currentObject.type.search('Camera') > -1 ? InspectCamera(currentObject, props.three) : null}
+          {/* Light */}
+          {currentObject.type.search('Light') > -1 ? InspectLight(currentObject, props.three) : null}
+          {/* Material */}
+          {currentObject.material !== undefined ? InspectMaterial(currentObject, props.three) : null}
+        </>
+      )}
+    </div>
+  );
+}

package/src/editor/sceneHierarchy/inspector/InspectorField.tsx

@@ -0,0 +1,178 @@
+import { colorToHex } from "@/editor/utils";
+import { useEffect, useRef, useState } from "react";
+import { noImage } from "@/editor/components/content";
+import { uploadLocalImage } from "./utils/InspectMaterial";
+
+export type InspectorFieldType = 'string' | 'number' | 'boolean' | 'range' | 'color' | 'button' | 'image'
+
+export interface InspectorFieldProps {
+  title: string
+  type: InspectorFieldType
+  prop?: string
+  value?: any
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  onChange?: (prop: string, value: any) => void
+}
+
+export default function InspectorField(props: InspectorFieldProps) {
+  let propsValue = props.value;
+  if (propsValue !== undefined) {
+    if (propsValue.isColor !== undefined) {
+      propsValue = colorToHex(props.value);
+    }
+  }
+  const [fieldValue, setFieldValue] = useState(propsValue);
+  const labelRef = useRef<HTMLLabelElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const imgRefRef = useRef<HTMLImageElement>(null);
+
+  // Mouse dragging
+  useEffect(() => {
+    let mouseDown = false;
+    let mouseStart = -1;
+    let valueStart = 0;
+    let value = Number(fieldValue);
+
+    const onMouseDown = (evt: MouseEvent) => {
+      mouseDown = true;
+      valueStart = value;
+      mouseStart = evt.clientX;
+    };
+
+    const onMouseMove = (evt: MouseEvent) => {
+      if (!mouseDown) return;
+      const deltaAmt = props.step !== undefined ? props.step : 1;
+      const delta = (evt.clientX - mouseStart) * deltaAmt;
+      value = Number((valueStart + delta).toFixed(4));
+      if (inputRef.current !== null) inputRef.current.value = value.toString();
+      if (props.onChange !== undefined) props.onChange(props.prop !== undefined ? props.prop : props.title, value);
+    };
+
+    const onMouseUp = () => {
+      mouseDown = false;
+    };
+
+    const onRightClick = () => {
+      mouseDown = false;
+    };
+
+    const useMouse = props.type === 'number';
+    if (useMouse) {
+      labelRef.current?.addEventListener('mousedown', onMouseDown, false);
+      document.addEventListener('mouseup', onMouseUp, false);
+      document.addEventListener('mousemove', onMouseMove, false);
+      document.addEventListener('contextmenu', onRightClick, false);
+    }
+    return () => {
+      if (useMouse) {
+        labelRef.current?.removeEventListener('mousedown', onMouseDown);
+        document.removeEventListener('mouseup', onMouseUp);
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('contextmenu', onRightClick);
+      }
+    };
+  }, [fieldValue]);
+
+  const textfield = props.type === 'string' && (fieldValue.length > 100 || fieldValue.search('\n') > -1);
+  const block = textfield || props.type === 'image';
+
+  const onChange = (evt: any) => {
+    let value = evt.target.value;
+    if (props.type === 'boolean') value = evt.target.checked;
+    setFieldValue(value);
+    if (props.onChange !== undefined) props.onChange(props.prop !== undefined ? props.prop : props.title, value);
+  };
+
+  return (
+    <div className={`field ${block ? 'block' : ''}`}>
+      {props.type !== 'button' && (
+        <label key="fieldLabel" ref={labelRef}>{props.title}</label>
+      )}
+
+      {props.type === 'string' && !textfield && (
+        <input
+          type="text"
+          disabled={props.disabled}
+          onChange={onChange}
+          value={fieldValue}
+        />
+      )}
+
+      {props.type === 'string' && textfield && (
+        <textarea
+          cols={50}
+          rows={10}
+          disabled={true}
+          onChange={onChange}
+          value={fieldValue}
+        />
+      )}
+
+      {props.type === 'boolean' && (
+        <input
+          type="checkbox"
+          disabled={props.disabled}
+          onChange={onChange}
+          checked={fieldValue}
+        />
+      )}
+
+      {props.type === 'number' && (
+        <input
+          ref={inputRef}
+          type="number"
+          value={fieldValue}
+          min={props.min}
+          max={props.max}
+          step={props.step}
+          onChange={onChange}
+        />
+      )}
+      
+      {props.type === 'range' && (
+        <>
+          <input type="text" value={fieldValue.toString()} onChange={onChange} className="min" />
+          <input
+            disabled={props.disabled}
+            type="range"
+            value={fieldValue}
+            min={props.min}
+            max={props.max}
+            step={props.step}
+            onChange={onChange}
+          />
+        </>
+      )}
+
+      {props.type === 'color' && (
+        <>
+          <input type="text" value={fieldValue.toString()} onChange={onChange} className="color" />
+          <input type="color" value={fieldValue} onChange={onChange} />
+        </>
+      )}
+
+      {props.type === 'button' && (
+        <button
+          onClick={() => {
+            if (props.onChange !== undefined) props.onChange(props.prop !== undefined ? props.prop : props.title, true);
+          }}
+        >
+          {props.title}
+        </button>
+      )}
+
+      {props.type === 'image' && (
+        <img ref={imgRefRef} onClick={() => {
+          uploadLocalImage()
+            .then((value: string) => {
+              imgRefRef.current!.src = value;
+              if (props.onChange !== undefined) props.onChange(props.prop !== undefined ? props.prop : props.title, value);
+            });
+        }} src={fieldValue.length > 0 ? fieldValue : noImage} />
+      )}
+    </div>
+  );
+}

package/src/editor/sceneHierarchy/inspector/InspectorGroup.tsx

@@ -0,0 +1,55 @@
+import Accordion from '../Accordion';
+import InspectorField, { InspectorFieldProps } from './InspectorField';
+
+export interface InspectorGroupProps {
+  title: string
+  expanded?: boolean
+  items: InspectorFieldProps[] | InspectorGroupProps[]
+}
+
+function isGroup(obj: any): obj is InspectorGroupProps {
+  return 'items' in obj;
+}
+
+export default function InspectorGroup(props: InspectorGroupProps) {
+  // console.log('Group:', props.title);
+  function onChange(label: string, value: any) {
+    console.log('onChange:', label, value);
+  }
+
+  const children: any[] = [];
+  props.items.forEach((child: InspectorFieldProps | InspectorGroupProps) => {
+    if (isGroup(child)) {
+      children.push(
+        <InspectorGroup title={child.title} items={child.items} key={Math.random()} />
+      );
+    } else {
+      children.push(
+        <InspectorField
+          key={Math.random()}
+          title={child.title}
+          prop={child.prop}
+          value={child.value}
+          type={child.type}
+          min={child.min}
+          max={child.max}
+          step={child.step}
+          disabled={child.disabled}
+          onChange={(prop: string, value: any) => {
+            if (child.onChange !== undefined) {
+              child.onChange(prop, value);
+            } else {
+              onChange(prop, value);
+            }
+          }}
+        />
+      );
+    }
+  });
+
+  return (
+    <Accordion label={props.title} open={false}>
+      {children}
+    </Accordion>
+  );
+}

package/src/editor/sceneHierarchy/inspector/MultiView/CameraWindow.tsx

@@ -0,0 +1,61 @@
+import { ForwardedRef, forwardRef, useState } from 'react';
+import { Camera } from 'three';
+
+interface DropdownProps {
+  index: number
+  onSelect: (value: string) => void;
+  options: string[];
+  up?: boolean;
+}
+
+export const Dropdown = (props: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedOption, setSelectedOption] = useState(props.options[props.index]);
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleSelect = (option: any) => {
+    if (option !== selectedOption) {
+      props.onSelect(option);
+      setSelectedOption(option);
+    }
+    setIsOpen(false);
+  };
+
+  return (
+    <div className={`dropdown ${props.up === true ? 'up' : ''}`}>
+      <div className="dropdown-toggle" onClick={handleToggle}>
+        {selectedOption}
+      </div>
+      {isOpen && (
+        <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 index = props.options.indexOf(props.camera.name);
+  return (
+    <div className='CameraWindow'>
+      <div ref={ref} className='clickable'></div>
+      <Dropdown index={index} options={props.options} onSelect={props.onSelect} up={true} />
+    </div>
+  );
+});
+
+export default CameraWindow;

package/src/editor/sceneHierarchy/inspector/MultiView/InfiniteGridHelper.ts

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