@tomorrowevening/hermes 0.0.34 → 0.0.36

package/src/editor/sidePanel/ChildObject.tsx

@@ -1,57 +0,0 @@
-// 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

@@ -1,11 +0,0 @@
-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

@@ -1,64 +0,0 @@
-// 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

@@ -1,27 +0,0 @@
-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

@@ -1,119 +0,0 @@
-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

@@ -1,198 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

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