@tomorrowevening/hermes 0.0.36 → 0.0.37

package/src/editor/sidePanel/ChildObject.tsx

@@ -0,0 +1,57 @@
+// Libs
+import { useState } from 'react';
+import { Object3D } from 'three';
+// Models
+import { ChildObjectProps } from './types';
+// Utils
+import { determineIcon } from './utils';
+
+export default function ChildObject(props: ChildObjectProps) {
+  const [open, setOpen] = useState(false);
+
+  const hasChildren = props.child.children.length > 0;
+  const children: Array<any> = [];
+  if (props.child.children.length > 0) {
+    props.child.children.map((child: Object3D) => {
+      children.push(<ChildObject child={child} key={Math.random()} three={props.three} />);
+    });
+  }
+
+  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={() => {
+            props.three.getObject(props.child.uuid);
+            if (!open) setOpen(true);
+          }}
+        >
+          {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>
+      <div className={open ? 'open' : ''}>
+        <div className='container'>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/editor/sidePanel/ContainerObject.tsx

@@ -0,0 +1,11 @@
+import { Object3D } from 'three';
+import ChildObject from './ChildObject';
+import { 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()} three={props.three} />);
+  });
+  return <div className={`scene ${props.class !== undefined ? props.class : ''}`}>{children}</div>;
+}

package/src/editor/sidePanel/SidePanel.tsx

@@ -0,0 +1,64 @@
+// Libs
+import { Component, ReactNode } from 'react';
+// Models
+import { debugDispatcher, ToolEvents } from '../global';
+// Components
+import '../scss/_sidePanel.scss';
+import Accordion from './Accordion';
+import ContainerObject from './ContainerObject';
+import Inspector from './inspector/Inspector';
+import { SidePanelState } from './types';
+import RemoteThree from '@/core/remote/RemoteThree';
+
+export default class SidePanel extends Component<SidePanelState> {
+  private three: RemoteThree;
+
+  constructor(props: SidePanelState) {
+    super(props);
+    this.state = {
+      scene: props.scene !== undefined ? props.scene : null,
+    };
+    this.three = props.three;
+    debugDispatcher.addEventListener(ToolEvents.SET_SCENE, this.setScene);
+  }
+
+  componentWillUnmount(): void {
+    debugDispatcher.removeEventListener(ToolEvents.SET_SCENE, this.setScene);
+  }
+
+  render(): ReactNode {
+    const hasScene = this.componentState.scene !== null;
+    const HierarchyName = 'Hierarchy - ' + (hasScene ? `${this.componentState.scene?.name}` : 'No Scene');
+    return (
+      <div id='SidePanel' key='SidePanel'>
+        {(
+          <>
+            <Accordion label={HierarchyName} open={true}>
+              <>
+                {hasScene && (
+                  <ContainerObject child={this.componentState.scene!} three={this.three} />
+                )}
+              </>
+            </Accordion>
+
+            <Inspector three={this.three} />
+          </>
+        )}
+    </div>
+    );
+  }
+
+  // Private
+
+  private setScene = (evt: any) => {
+    this.setState(() => ({
+      scene: evt.value
+    }));
+  };
+
+  // Getters / Setters
+
+  get componentState(): SidePanelState {
+    return this.state as SidePanelState;
+  }
+}

package/src/editor/sidePanel/ToggleBtn.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { capitalize } from '@/editor/utils';
+
+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>{capitalize(props.label)}</p>
+    </button>
+  );
+}

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

@@ -0,0 +1,119 @@
+import { useEffect, useState } from 'react';
+import { CoreComponentProps, RemoteObject } from '../types';
+import { ToolEvents, debugDispatcher } from '../../global';
+// Components
+import './inspector.scss';
+import Accordion from '../Accordion';
+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';
+import { setItemProps } from '../utils';
+import InspectAnimation from './utils/InspectAnimation';
+
+const defaultObject: RemoteObject = {
+  name: '',
+  uuid: '',
+  type: '',
+  visible: false,
+  matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+  animations: [],
+  material: undefined,
+  perspectiveCameraInfo: undefined,
+  orthographicCameraInfo: undefined,
+  lightInfo: undefined,
+};
+let currentObject = {...defaultObject};
+
+export default function Inspector(props: CoreComponentProps) {
+  const [lastUpdated, setLastUpdated] = useState<number>(-1);
+
+  useEffect(() => {
+    function onSelectItem(evt: any) {
+      const obj = evt.value as RemoteObject;
+      currentObject = {...obj};
+      setLastUpdated(Date.now());
+    }
+
+    function setScene() {
+      currentObject = {...defaultObject};
+      setLastUpdated(Date.now());
+    }
+
+    debugDispatcher.addEventListener(ToolEvents.SET_SCENE, setScene);
+    debugDispatcher.addEventListener(ToolEvents.SET_OBJECT, onSelectItem);
+    return () => {
+      debugDispatcher.removeEventListener(ToolEvents.SET_SCENE, setScene);
+      debugDispatcher.removeEventListener(ToolEvents.SET_OBJECT, onSelectItem);
+    };
+  }, []);
+
+  const objType = currentObject.type.toLowerCase();
+  const hasAnimation = currentObject.animations.length > 0
+    || currentObject['mixer'] !== undefined;
+  const hasMaterial = objType.search('mesh') > -1
+    || objType.search('line') > -1
+    || objType.search('points') > -1;
+
+  return (
+    <Accordion label='Inspector' key='Inspector'>
+      <div id='Inspector' className={props.class} key={lastUpdated}>
+        {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);
+                  const child = props.three.scene?.getObjectByProperty('uuid', currentObject.uuid);
+                  if (child !== undefined) setItemProps(child, key, value);
+                }}
+              />
+            </>
+
+            {/* Data */}
+            <>
+              {/* Transform */}
+              {InspectTransform(currentObject, props.three)}
+              {/* Animations */}
+              {hasAnimation ? InspectAnimation(currentObject, props.three) : null}
+              {/* Cameras */}
+              {objType.search('camera') > -1 ? InspectCamera(currentObject, props.three) : null}
+              {/* Lights */}
+              {objType.search('light') > -1 ? InspectLight(currentObject, props.three) : null}
+              {/* Material */}
+              {hasMaterial ? InspectMaterial(currentObject, props.three) : null}
+            </>
+          </>
+        )}
+      </div>
+    </Accordion>
+  );
+}

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

@@ -0,0 +1,198 @@
+import { colorToHex } from '@/editor/utils';
+import { useEffect, useRef, useState } from 'react';
+import { noImage } from '@/editor/components/content';
+import { uploadLocalImage } from './utils/InspectMaterial';
+import { capitalize } from '@/editor/utils';
+
+export type InspectorFieldType = 'string' | 'number' | 'boolean' | 'range' | 'color' | 'button' | 'image' | 'option'
+
+export interface InspectorFieldProps {
+  title: string
+  type: InspectorFieldType
+  prop?: string
+  value?: any
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  options?: any[]
+  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;
+    } else if (props.type === 'option') {
+      // @ts-ignore
+      value = props.options[value].value;
+    }
+    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}>{capitalize(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={props.disabled !== undefined ? props.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}
+          disabled={props.disabled}
+          onChange={onChange}
+        />
+      )}
+      
+      {props.type === 'range' && (
+        <>
+          <input type='text' value={fieldValue.toString()} onChange={onChange} disabled={props.disabled} 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} disabled={props.disabled} className='color' />
+          <input type='color' value={fieldValue} onChange={onChange} disabled={props.disabled} />
+        </>
+      )}
+
+      {props.type === 'button' && (
+        <button
+          disabled={props.disabled}
+          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} />
+      )}
+
+      {props.type === 'option' && (
+        <>
+          <select onChange={onChange} disabled={props.disabled} defaultValue={props.value}>
+            {props.options?.map((option, index) => (
+              <option key={index} value={option.value}>{capitalize(option.title)}</option>
+            ))}
+          </select>
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+import Accordion from '../Accordion';
+import InspectorField, { InspectorFieldProps } from './InspectorField';
+import { capitalize } from '@/editor/utils';
+
+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) {
+  const children: any[] = [];
+  props.items.forEach((child: InspectorFieldProps | InspectorGroupProps) => {
+    if (isGroup(child)) {
+      children.push(
+        <InspectorGroup title={capitalize(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}
+          options={child.options}
+          onChange={(prop: string, value: any) => {
+            if (child.onChange !== undefined) {
+              child.onChange(prop, value);
+            }
+          }}
+        />
+      );
+    }
+  });
+
+  return (
+    <Accordion label={props.title} open={props.expanded === true}>
+      {children}
+    </Accordion>
+  );
+}

package/src/editor/sidePanel/inspector/SceneInspector.tsx

@@ -0,0 +1,84 @@
+import RemoteThree from '@/core/remote/RemoteThree';
+import { ToolEvents, debugDispatcher } from '@/editor/global';
+import { useEffect } from 'react';
+import { Texture } from 'three';
+import { getSubItem, setItemProps, textureFromSrc } from '../utils';
+
+export interface SceneInspectorProps {
+  three: RemoteThree
+}
+
+export default function SceneInspector(props: SceneInspectorProps) {
+  function hasScene() {
+    if (props.three.scene === undefined) {
+      console.log('No scene:', props.three);
+      return false;
+    }
+    return true;
+  }
+  const onGetObject = (evt: any) => {
+    if (!hasScene()) return;
+    const child = props.three.scene?.getObjectByProperty('uuid', evt.value);
+    if (child !== undefined) props.three.setObject(child);
+  };
+
+  const setChildProps = (uuid: string, key: string, value: any) => {
+    if (!hasScene()) return;
+    const child = props.three.scene?.getObjectByProperty('uuid', uuid);
+    if (child !== undefined) {
+      setItemProps(child, key, value);
+    }
+  };
+
+  const onUpdateObject = (evt: any) => {
+    if (!hasScene()) return;
+    const msg = evt.value;
+    const { key, value, uuid } = msg;
+    setChildProps(uuid, key, value);
+  };
+
+  const onCreateTexture = (evt: any) => {
+    if (!hasScene()) return;
+    const data = evt.value;
+    textureFromSrc(data.value).then((texture: Texture) => {
+      setChildProps(data.uuid, data.key, texture);
+      setChildProps(data.uuid, `material.needsUpdate`, true);
+    });
+  };
+
+  const onRequestMethod = (evt: any) => {
+    if (!hasScene()) return;
+    const { key, uuid, value, subitem } = evt.value;
+    const child = props.three.scene?.getObjectByProperty('uuid', uuid);
+    if (child !== undefined) {
+      try {
+        if (subitem !== undefined) {
+          const target = getSubItem(child, subitem);
+          target[key](value);
+        } else {
+          child[key](value);
+        }
+      } catch (err: any) {
+        console.log('Error requesting method:');
+        console.log(err);
+        console.log(key);
+        console.log(value);
+      }
+    }
+  };
+
+  useEffect(() => {
+    debugDispatcher.addEventListener(ToolEvents.GET_OBJECT, onGetObject);
+    debugDispatcher.addEventListener(ToolEvents.UPDATE_OBJECT, onUpdateObject);
+    debugDispatcher.addEventListener(ToolEvents.CREATE_TEXTURE, onCreateTexture);
+    debugDispatcher.addEventListener(ToolEvents.REQUEST_METHOD, onRequestMethod);
+    return () => {
+      debugDispatcher.removeEventListener(ToolEvents.GET_OBJECT, onGetObject);
+      debugDispatcher.removeEventListener(ToolEvents.UPDATE_OBJECT, onUpdateObject);
+      debugDispatcher.removeEventListener(ToolEvents.CREATE_TEXTURE, onCreateTexture);
+      debugDispatcher.removeEventListener(ToolEvents.REQUEST_METHOD, onRequestMethod);
+    };
+  }, []);
+
+  return null;
+}