@tomorrowevening/hermes 0.0.35 → 0.0.37

package/src/editor/sidePanel/inspector/inspector.scss

@@ -0,0 +1,161 @@
+$icon_folder: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAB1CAYAAADN5fjJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAzklEQVR4nO3bwQqCUBBA0Yz+/5dt1eYRkVfKWZyzUgi5zEJSxm3f99tU96sDPhFXiavEVeIqcZW4anTcYzmf8P9pex2Mnpy4Slwlrhodt96Et7e/usjoyYmrxFXiKnGVuEpcJa4SV4mrxFXiKnGVuEpcJa4SV4mrxFXiKnGVuEpcJa4SV4mrxFXiqtFx69LLUd9sKuZFmtGTE1eJq8RV4ipx1T+2+o9e01b/aeIqcZW46uxWvweckcRV4ipxlbhqdNzZl4c//cJu9ORGxz0BUl8I9T4qXncAAAAASUVORK5CYII=');
+
+#Inspector {
+  .field {
+    align-items: center;
+    background-color: #222;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    min-height: 21px;
+    overflow: hidden;
+    padding: 1px;
+    position: relative;
+    
+    label {
+      line-height: normal;
+      margin: 0 10px;
+      max-width: 180px;
+      user-select: none;
+      width: fit-content;
+      min-width: 20px;
+      text-align: center;
+    }
+
+    input {
+      block-size: 11px;
+      flex: 1%;
+      margin: 0;
+      padding: 4px;
+      outline: none;
+      &.min {
+        height: 11px;
+        flex: none;
+        width: 30px;
+        margin-right: 1px;
+      }
+      &.color {
+        flex: none;
+        width: 60px;
+      }
+    }
+
+    input[type='checkbox'] {
+      flex: none;
+    }
+
+    input[type='color'] {
+      block-size: revert;
+      height: 21px;
+      padding-block: revert;
+      padding: 0;
+      margin: 0;
+    }
+
+    input[type='number'], input[type='range'] {
+      appearance: none;
+      height: 11px;
+    }
+
+    input[type='range']::-webkit-slider-runnable-track {
+      border: none;
+    }
+
+    input[type='range']::-webkit-slider-thumb {
+      appearance: none;
+      background-color: #666;
+      height: 17px;
+      width: 17px;
+      transition: 0.2s linear background-color;
+      &:hover {
+        background-color: #999;
+      }
+    }
+
+    textarea {
+      background-color: #191919;
+      font-size: 10px;
+    }
+
+    img {
+      border: 1px dotted #333;
+      cursor: pointer;
+      object-fit: cover;
+      max-width: 100%;
+      min-width: 50px;
+      min-height: 50px;
+      max-height: 100px;
+      width: 100%;
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    button {
+      background-color: #333;
+      border-top: 1px dotted #444;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      text-align: center;
+      transition: 0.2s background-color linear;
+      width: 100%;
+      &:hover {
+        background-color: #444;
+      }
+    }
+
+    &.block {
+      label {
+        display: block;
+        line-height: 21px;
+        max-width: 100%;
+        width: 100%;
+      }
+    }
+
+    select {
+      background-color: #222;
+      border: 1px solid #333;
+      font-size: 12px;
+      padding: 1px 5px;
+      position: absolute;
+      right: 4px;
+    }
+  }
+
+  .group {
+    background-color: #191919;
+    margin: 2px 0;
+    h4 {
+      display: inline;
+      font-weight: bold;
+      pointer-events: none;
+      width: fit-content;
+    }
+    .toggleBtn {
+      background-color: #191919;
+      background-image: $icon_folder;
+      background-position: 1px 1px;
+      background-repeat: no-repeat;
+      background-size: 15px 45px;
+      display: inline-block;
+      height: 15px;
+      opacity: 0.8;
+      overflow: hidden;
+      margin: 0 0 0 5px;
+      padding-left: 20px;
+      width: calc(100% - 7px);
+      transition: all 0.15s linear;
+      &:hover {
+        background-color: #222;
+        opacity: 1;
+      }
+    }
+    .fieldItems {
+      border-top: 1px dotted #333;
+      overflow-y: auto;
+      user-select: none;
+    }
+  }
+}

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

@@ -0,0 +1,102 @@
+import { AnimationMixer } from 'three';
+import RemoteThree from '@/core/remote/RemoteThree';
+import InspectorGroup from '../InspectorGroup';
+import { AnimationClipInfo, RemoteObject } from '../../types';
+
+export default function InspectAnimation(obj: RemoteObject, three: RemoteThree) {
+  const items: any[] = [];
+  const animations: any[] = [];
+  let maxDuration = 0;
+  obj.animations.forEach((clipInfo: AnimationClipInfo) => {
+    // Add animation
+    maxDuration = Math.max(maxDuration, clipInfo.duration);
+    if (clipInfo.duration > 0) {
+      animations.push({
+        title: clipInfo.name,
+        items: [
+          {
+            title: 'Duration',
+            type: 'number',
+            value: clipInfo.duration,
+            disabled: true,
+          },
+          {
+            title: 'Blend Mode',
+            type: 'option',
+            disabled: true,
+            options: [
+              {
+                title: 'Normal',
+                value: 2500,
+              },
+              {
+                title: 'Additive',
+                value: 2501,
+              },
+            ],
+          }
+        ]
+      });
+    }
+  });
+  items.push({
+    title: 'Animations',
+    items: animations
+  });
+
+  const child = three.scene?.getObjectByProperty('uuid', obj.uuid);
+  let hasMixer = false;
+  if (child !== undefined) {
+    const mixer = child['mixer'] as AnimationMixer;
+    hasMixer = mixer !== undefined;
+    if (hasMixer) {
+      const mixerItems: any[] = [
+        {
+          title: 'Time Scale',
+          type: 'range',
+          value: mixer.timeScale,
+          step: 0.01,
+          min: -1,
+          max: 2,
+          onChange: (_: string, value: any) => {
+            mixer.timeScale = value;
+            three.updateObject(obj.uuid, 'mixer.timeScale', value);
+          },
+        },
+      ];
+      // animations.forEach((animation: any, index: number) => {
+      //   if (obj.animations[index].duration > 0) {
+      //     mixerItems.push({
+      //       title: `Play: ${animation.title}`,
+      //       type: 'button',
+      //       onChange: () => {
+      //         // Stop Previous
+      //         mixer.stopAllAction();
+      //         three.requestMethod(obj.uuid, 'stopAllAction', undefined, 'mixer');
+
+      //         //
+      //         const clip = child.animations[index] as AnimationClip;
+      //         const action = mixer.clipAction(clip);
+      //         action.play();
+      //       }
+      //     });
+      //   }
+      // });
+      mixerItems.push({
+        title: 'Stop All',
+        type: 'button',
+        onChange: () => {
+          mixer.stopAllAction();
+          three.requestMethod(obj.uuid, 'stopAllAction', undefined, 'mixer');
+        }
+      });
+      items.push({
+        title: 'Mixer',
+        items: mixerItems
+      });
+    }
+  }
+  return (
+    <InspectorGroup title='Animation' items={items} />
+  );
+}

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

@@ -0,0 +1,75 @@
+import RemoteThree from '@/core/remote/RemoteThree';
+import InspectorGroup from '../InspectorGroup';
+import { RemoteObject } from '../../types';
+import { setItemProps } from '../../utils';
+
+function prettyName(name: string): string {
+  switch (name) {
+    case 'fov': return 'FOV';
+    case 'zoom': return 'Zoom';
+    case 'near': return 'Near';
+    case 'far': return 'Far';
+    case 'focus': return 'Focus';
+    case 'aspect': return 'Aspect';
+    case 'filmGauge': return 'Film Gauge';
+    case 'filmOffset': return 'Film Offset';
+    case 'left': return 'Left';
+    case 'right': return 'Right';
+    case 'top': return 'Top';
+    case 'bottom': return 'Bottom';
+  }
+  return name;
+}
+
+export function InspectCamera(object: RemoteObject, three: RemoteThree): any {
+  const items: any[] = [];
+
+  if (object.perspectiveCameraInfo !== undefined) {
+    for (const i in object.perspectiveCameraInfo) {
+      items.push({
+        title: prettyName(i),
+        prop: i,
+        type: 'number',
+        step: 0.01,
+        value: object.perspectiveCameraInfo[i],
+        onChange: (prop: string, value: any) => {
+          three.updateObject(object.uuid, prop, value);
+          three.requestMethod(object.uuid, 'updateProjectionMatrix');
+
+          const child = three.scene?.getObjectByProperty('uuid', object.uuid);
+          if (child !== undefined) {
+            setItemProps(child, prop, value);
+            child['updateProjectionMatrix']();
+          }
+        }
+      });
+    }
+  } else if (object.orthographicCameraInfo !== undefined) {
+    for (const i in object.orthographicCameraInfo) {
+      items.push({
+        title: prettyName(i),
+        prop: i,
+        type: 'number',
+        step: 0.01,
+        value: object.perspectiveCameraInfo![i],
+        onChange: (prop: string, value: any) => {
+          three.updateObject(object.uuid, prop, value);
+          three.requestMethod(object.uuid, 'updateProjectionMatrix');
+
+          const child = three.scene?.getObjectByProperty('uuid', object.uuid);
+          if (child !== undefined) {
+            setItemProps(child, prop, value);
+            child['updateProjectionMatrix']();
+          }
+        }
+      });
+    }
+  }
+
+  return (
+    <InspectorGroup
+      title='Camera'
+      items={items}
+    />
+  );
+}

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

@@ -0,0 +1,62 @@
+import { Color } from 'three';
+import RemoteThree from '@/core/remote/RemoteThree';
+import InspectorGroup from '../InspectorGroup';
+import { RemoteObject } from '../../types';
+import { setItemProps } from '../../utils';
+
+function prettyName(value: string): string {
+  switch (value) {
+    case 'color': return 'Color';
+    case 'intensity': return 'Intensity';
+    case 'decay': return 'Decay';
+    case 'distance': return 'Distance';
+    case 'angle': return 'Angle';
+    case 'penumbra': return 'Penumbra';
+    case 'groundColor': return 'Ground Color';
+  }
+  return value;
+}
+
+export function InspectLight(obj: RemoteObject, three: RemoteThree) {
+  const items: any[] = [];
+  if (obj.lightInfo !== undefined) {
+    for (const i in obj.lightInfo) {
+      const value = obj.lightInfo[i];
+      if (value === undefined) continue;
+
+      if (value.isColor !== undefined) {
+        items.push({
+          title: prettyName(i),
+          prop: i,
+          type: 'color',
+          value: value,
+          onChange: (prop: string, value: any) => {
+            const color = new Color(value);
+            three.updateObject(obj.uuid, prop, color);
+            const child = three.scene?.getObjectByProperty('uuid', obj.uuid);
+            if (child !== undefined) setItemProps(child, prop, color);
+          }
+        });
+      } else {
+        items.push({
+          title: prettyName(i),
+          prop: i,
+          type: typeof value,
+          value: value,
+					step: typeof value === 'number' ? 0.01 : undefined,
+          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='Light'
+      items={items}
+    />
+  );
+}