@tomorrowevening/hermes 0.0.11 → 0.0.12

package/src/editor/{sceneHierarchy/SceneHierarchy.tsx → sidePanel/SidePanel.tsx}

@@ -3,17 +3,17 @@ import { Component, ReactNode } from 'react';
 // Models
 import { debugDispatcher, ToolEvents } from '../global';
 // Components
-import '../scss/_sceneHierarchy.scss';
+import '../scss/_sidePanel.scss';
 import Accordion from './Accordion';
 import ContainerObject from './ContainerObject';
 import Inspector from './inspector/Inspector';
-import { SceneHierarchyState } from './types';
+import { SidePanelState } from './types';
 import RemoteThree from '@/core/remote/RemoteThree';
 
-export default class SceneHierarchy extends Component<SceneHierarchyState> {
+export default class SidePanel extends Component<SidePanelState> {
   private three: RemoteThree;
 
-  constructor(props: SceneHierarchyState) {
+  constructor(props: SidePanelState) {
     super(props);
     this.state = {
       scene: props.scene !== undefined ? props.scene : null,
@@ -30,7 +30,7 @@ export default class SceneHierarchy extends Component<SceneHierarchyState> {
     const hasScene = this.componentState.scene !== null;
     const HierarchyName = 'Hierarchy - ' + (hasScene ? `${this.componentState.scene?.name}` : 'No Scene');
     return (
-      <div id="SceneHierarchy" key="SceneHierarchy">
+      <div id="SidePanel" key="SidePanel">
         {(
           <>
             <Accordion label={HierarchyName} open={true}>
@@ -41,9 +41,7 @@ export default class SceneHierarchy extends Component<SceneHierarchyState> {
               </>
             </Accordion>
 
-            <Accordion label='Inspector'>
-              <Inspector key="Inspector" three={this.three} />
-            </Accordion>
+            <Inspector three={this.three} />
           </>
         )}
     </div>
@@ -60,7 +58,7 @@ export default class SceneHierarchy extends Component<SceneHierarchyState> {
 
   // Getters / Setters
 
-  get componentState(): SceneHierarchyState {
-    return this.state as SceneHierarchyState;
+  get componentState(): SidePanelState {
+    return this.state as SidePanelState;
   }
 }

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

@@ -0,0 +1,114 @@
+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 { AnimationMixer } from "three";
+import InspectAnimation from "./utils/InspectAnimation";
+
+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],
+    animations: [],
+    material: undefined,
+    perspectiveCameraInfo: undefined,
+    orthographicCameraInfo: undefined,
+    lightInfo: undefined,
+  });
+
+  useEffect(() => {
+    function onSelectItem(evt: any) {
+      const obj = evt.value as RemoteObject;
+      setCurrentObject(obj);
+      setLastRefresh(Date.now());
+      if (props.three.scene !== undefined) {
+        const child = props.three.scene.getObjectByProperty('uuid', obj.uuid);
+        if (child !== undefined && child.animations.length > 0) {
+          const mixer = new AnimationMixer(child);
+          console.log(mixer);
+          console.log(child.animations);
+        }
+      }
+    }
+
+    debugDispatcher.addEventListener(ToolEvents.SET_OBJECT, onSelectItem);
+    return () => {
+      debugDispatcher.removeEventListener(ToolEvents.SET_OBJECT, onSelectItem);
+    };
+  }, []);
+
+  const objType = currentObject.type.toLowerCase();
+
+  return (
+    <Accordion label='Inspector' key='Inspector'>
+      <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);
+                  const child = props.three.scene?.getObjectByProperty('uuid', currentObject.uuid);
+                  if (child !== undefined) setItemProps(child, key, value);
+                }}
+              />
+            </>
+
+            {/* Data */}
+            <>
+              {/* Transform */}
+              {InspectTransform(currentObject, props.three)}
+              {/* Animations */}
+              {currentObject.animations.length > 0 ? 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 */}
+              {objType.search('mesh') > -1 ? InspectMaterial(currentObject, props.three) : null}
+            </>
+          </>
+        )}
+      </div>
+    </Accordion>
+  );
+}

package/src/editor/sidePanel/inspector/utils/InspectAnimation.tsx

@@ -0,0 +1,51 @@
+import RemoteThree from "@/core/remote/RemoteThree";
+import InspectorGroup from "../InspectorGroup";
+import { InspectorFieldProps } from '../InspectorField';
+import { AnimationClipInfo, RemoteObject } from '../../types';
+import { setItemProps } from "../../utils";
+
+export default function InspectAnimation(obj: RemoteObject, three: RemoteThree) {
+  const items: InspectorFieldProps[] = [];
+  obj.animations.forEach((value: AnimationClipInfo) => {
+    // Add animation
+    items.push({
+      title: 'Name',
+      type: 'string',
+      prop: 'name',
+      value: value.name,
+      disabled: true,
+      onChange: (prop: string, value: any) => {
+        three.updateObject(obj.uuid, prop, value);
+        const child = three.scene?.getObjectByProperty('uuid', obj.uuid);
+        if (child !== undefined) setItemProps(child, prop, value);
+      },
+    });
+    items.push({
+      title: 'Duration',
+      type: 'number',
+      prop: 'duration',
+      value: value.duration,
+      disabled: true,
+      onChange: (prop: string, value: any) => {
+        three.updateObject(obj.uuid, prop, value);
+        const child = three.scene?.getObjectByProperty('uuid', obj.uuid);
+        if (child !== undefined) setItemProps(child, prop, value);
+      },
+    });
+    items.push({
+      title: 'Blend Mode',
+      type: 'number',
+      prop: 'blendMode',
+      value: value.blendMode,
+      disabled: true,
+      onChange: (prop: string, value: any) => {
+        three.updateObject(obj.uuid, prop, value);
+        const child = three.scene?.getObjectByProperty('uuid', obj.uuid);
+        if (child !== undefined) setItemProps(child, prop, value);
+      },
+    });
+  });
+  return (
+    <InspectorGroup title="Animations" items={items} />
+  );
+}

package/src/editor/{sceneHierarchy → sidePanel}/types.ts

@@ -11,7 +11,7 @@ export interface ChildObjectProps extends CoreComponentProps {
   three: RemoteThree
 }
 
-export interface SceneHierarchyState {
+export interface SidePanelState {
   scene?: Object3D
   three: RemoteThree
 }
@@ -71,6 +71,14 @@ export interface RemoteMaterial {
   specularColor?: Color
 }
 
+// Animation Info
+
+export interface AnimationClipInfo {
+  name: string;
+  duration: number;
+  blendMode: number;
+}
+
 // Camera Info
 
 export interface PerspectiveCameraInfo {
@@ -114,6 +122,7 @@ export interface RemoteObject {
   type: string
   visible: boolean
   matrix: number[] // based on Matrix4.elements
+  animations: AnimationClipInfo[]
   material?: RemoteMaterial | RemoteMaterial[]
   perspectiveCameraInfo?: PerspectiveCameraInfo
   orthographicCameraInfo?: OrthographicCameraInfo

package/src/editor/{sceneHierarchy → sidePanel}/utils.ts

@@ -1,4 +1,4 @@
-import { CubeTexture, Material, Mesh, Object3D, RepeatWrapping, Texture } from 'three';
+import { AnimationClip, CubeTexture, Material, Mesh, Object3D, RepeatWrapping, Texture } from 'three';
 import { MinimumObject, RemoteMaterial, RemoteObject } from './types';
 
 export function determineIcon(obj: Object3D): string {
@@ -132,14 +132,23 @@ export function stripObject(obj: Object3D): RemoteObject {
     uuid: obj.uuid,
     visible: obj.visible,
     matrix: obj.matrix.elements,
+    animations: [],
     material: undefined,
     perspectiveCameraInfo: undefined,
     orthographicCameraInfo: undefined,
     lightInfo: undefined,
   };
 
-  const type = obj.type.toLowerCase();
+  // Animations
+  obj.animations.forEach((clip: AnimationClip) => {
+    stripped.animations.push({
+      name: clip.name,
+      duration: clip.duration,
+      blendMode: clip.blendMode,
+    });
+  });
 
+  const type = obj.type.toLowerCase();
   if (type.search('mesh') > -1) {
     const mesh = obj as Mesh;
     if (Array.isArray(mesh.material)) {

package/src/index.ts

@@ -17,11 +17,11 @@ export { default as RemoteController } from './core/RemoteController';
 // RemoteThree
 export { default as InfiniteGridHelper } from './editor/multiView/InfiniteGridHelper';
 export { default as UVMaterial } from './editor/multiView/UVMaterial';
-export { default as SceneHierarchy } from './editor/sceneHierarchy/SceneHierarchy';
-export { default as Accordion } from './editor/sceneHierarchy/Accordion';
-export { default as ChildObject } from './editor/sceneHierarchy/ChildObject';
-export { default as ContainerObject } from './editor/sceneHierarchy/ContainerObject';
-export { default as Inspector } from './editor/sceneHierarchy/inspector/Inspector';
-export { default as SceneInspector } from './editor/sceneHierarchy/inspector/SceneInspector';
+export { default as SidePanel } from './editor/sidePanel/SidePanel';
+export { default as Accordion } from './editor/sidePanel/Accordion';
+export { default as ChildObject } from './editor/sidePanel/ChildObject';
+export { default as ContainerObject } from './editor/sidePanel/ContainerObject';
+export { default as Inspector } from './editor/sidePanel/inspector/Inspector';
+export { default as SceneInspector } from './editor/sidePanel/inspector/SceneInspector';
 export { default as MultiView } from './editor/multiView/MultiView';
 export { default as Editor } from './editor/Editor';

package/types/core/remote/RemoteThree.d.ts

@@ -1,4 +1,4 @@
-import { Scene } from 'three';
+import { Camera, Scene } from 'three';
 import BaseRemote from './BaseRemote';
 export default class RemoteThree extends BaseRemote {
     scene?: Scene;
@@ -8,4 +8,6 @@ export default class RemoteThree extends BaseRemote {
     updateObject(uuid: string, key: string, value: any): void;
     createTexture(uuid: string, key: string, value: any): void;
     setScene(value: Scene): void;
+    addCamera(camera: Camera): void;
+    removeCamera(camera: Camera): void;
 }

package/types/core/types.d.ts

@@ -6,7 +6,7 @@ export interface BroadcastData {
 export type ApplicationMode = 'app' | 'editor';
 export type VoidCallback = () => void;
 export type DataUpdateCallback = (data: any) => void;
-export type EditorEvent = 'custom' | 'setSheet' | 'setSheetObject' | 'updateSheetObject' | 'updateTimeline' | 'getObject' | 'setObject' | 'updateObject' | 'setScene' | 'createTexture' | 'requestMethod' | 'addFolder' | 'bindObject' | 'updateBind' | 'addButton' | 'clickButton' | 'selectComponent' | 'draggableListUpdate';
+export type EditorEvent = 'custom' | 'setSheet' | 'setSheetObject' | 'updateSheetObject' | 'updateTimeline' | 'getObject' | 'setObject' | 'updateObject' | 'setScene' | 'createTexture' | 'requestMethod' | 'addCamera' | 'removeCamera' | 'addFolder' | 'bindObject' | 'updateBind' | 'addButton' | 'clickButton' | 'selectComponent' | 'draggableListUpdate';
 export type VoidFunc = () => void;
 export type BroadcastCallback = (data: BroadcastData) => void;
 export type TheatreUpdateCallback = (data: any) => void;

package/types/editor/global.d.ts

@@ -10,4 +10,6 @@ export declare const ToolEvents: {
     UPDATE_OBJECT: string;
     CREATE_TEXTURE: string;
     REQUEST_METHOD: string;
+    ADD_CAMERA: string;
+    REMOVE_CAMERA: string;
 };

package/types/editor/multiView/CameraWindow.d.ts

@@ -2,6 +2,8 @@
 import { Camera } from 'three';
 interface DropdownProps {
     index: number;
+    open: boolean;
+    onToggle: (value: boolean) => void;
     onSelect: (value: string) => void;
     options: string[];
     up?: boolean;

package/types/editor/sidePanel/SidePanel.d.ts

@@ -0,0 +1,11 @@
+import { Component, ReactNode } from 'react';
+import '../scss/_sidePanel.scss';
+import { SidePanelState } from './types';
+export default class SidePanel extends Component<SidePanelState> {
+    private three;
+    constructor(props: SidePanelState);
+    componentWillUnmount(): void;
+    render(): ReactNode;
+    private setScene;
+    get componentState(): SidePanelState;
+}

package/types/editor/sidePanel/inspector/utils/InspectAnimation.d.ts

@@ -0,0 +1,3 @@
+import RemoteThree from "@/core/remote/RemoteThree";
+import { RemoteObject } from '../../types';
+export default function InspectAnimation(obj: RemoteObject, three: RemoteThree): import("react/jsx-runtime").JSX.Element;

package/types/editor/{sceneHierarchy → sidePanel}/types.d.ts

@@ -8,7 +8,7 @@ export interface ChildObjectProps extends CoreComponentProps {
     child: Object3D;
     three: RemoteThree;
 }
-export interface SceneHierarchyState {
+export interface SidePanelState {
     scene?: Object3D;
     three: RemoteThree;
 }
@@ -58,6 +58,11 @@ export interface RemoteMaterial {
     sheenColor?: Color;
     specularColor?: Color;
 }
+export interface AnimationClipInfo {
+    name: string;
+    duration: number;
+    blendMode: number;
+}
 export interface PerspectiveCameraInfo {
     fov: number;
     zoom: number;
@@ -92,6 +97,7 @@ export interface RemoteObject {
     type: string;
     visible: boolean;
     matrix: number[];
+    animations: AnimationClipInfo[];
     material?: RemoteMaterial | RemoteMaterial[];
     perspectiveCameraInfo?: PerspectiveCameraInfo;
     orthographicCameraInfo?: OrthographicCameraInfo;

package/types/index.d.ts

@@ -14,11 +14,11 @@ export { default as Dropdown } from './editor/components/Dropdown';
 export { default as RemoteController } from './core/RemoteController';
 export { default as InfiniteGridHelper } from './editor/multiView/InfiniteGridHelper';
 export { default as UVMaterial } from './editor/multiView/UVMaterial';
-export { default as SceneHierarchy } from './editor/sceneHierarchy/SceneHierarchy';
-export { default as Accordion } from './editor/sceneHierarchy/Accordion';
-export { default as ChildObject } from './editor/sceneHierarchy/ChildObject';
-export { default as ContainerObject } from './editor/sceneHierarchy/ContainerObject';
-export { default as Inspector } from './editor/sceneHierarchy/inspector/Inspector';
-export { default as SceneInspector } from './editor/sceneHierarchy/inspector/SceneInspector';
+export { default as SidePanel } from './editor/sidePanel/SidePanel';
+export { default as Accordion } from './editor/sidePanel/Accordion';
+export { default as ChildObject } from './editor/sidePanel/ChildObject';
+export { default as ContainerObject } from './editor/sidePanel/ContainerObject';
+export { default as Inspector } from './editor/sidePanel/inspector/Inspector';
+export { default as SceneInspector } from './editor/sidePanel/inspector/SceneInspector';
 export { default as MultiView } from './editor/multiView/MultiView';
 export { default as Editor } from './editor/Editor';

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

@@ -1,97 +0,0 @@
-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";
-import { setItemProps } from "../utils";
-
-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],
-    material: undefined,
-    perspectiveCameraInfo: undefined,
-    orthographicCameraInfo: undefined,
-    lightInfo: undefined,
-  });
-
-  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);
-    };
-  }, []);
-
-  const objType = currentObject.type.toLowerCase();
-
-  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);
-                const child = props.three.scene?.getObjectByProperty('uuid', currentObject.uuid);
-                if (child !== undefined) setItemProps(child, key, value);
-              }}
-            />
-          </>
-
-          {/* Data */}
-          <>
-            {/* Transform */}
-            {InspectTransform(currentObject, props.three)}
-            {/* Cameras */}
-            {objType.search('camera') > -1 ? InspectCamera(currentObject, props.three) : null}
-            {/* Lights */}
-            {objType.search('light') > -1 ? InspectLight(currentObject, props.three) : null}
-            {/* Material */}
-            {objType.search('mesh') > -1 ? InspectMaterial(currentObject, props.three) : null}
-          </>
-        </>
-      )}
-    </div>
-  );
-}

package/types/editor/sceneHierarchy/SceneHierarchy.d.ts

@@ -1,11 +0,0 @@
-import { Component, ReactNode } from 'react';
-import '../scss/_sceneHierarchy.scss';
-import { SceneHierarchyState } from './types';
-export default class SceneHierarchy extends Component<SceneHierarchyState> {
-    private three;
-    constructor(props: SceneHierarchyState);
-    componentWillUnmount(): void;
-    render(): ReactNode;
-    private setScene;
-    get componentState(): SceneHierarchyState;
-}