@tomorrowevening/hermes 0.0.36 → 0.0.37

package/src/editor/components/Draggable.tsx

@@ -0,0 +1,40 @@
+// Libs
+import { useState } from 'react';
+import { Reorder } from 'framer-motion';
+// Components
+import NavButton from './NavButton';
+import DraggableItem from './DraggableItem';
+import { DraggableProps } from './types';
+
+export default function Draggable(props: DraggableProps) {
+  const [expanded, setExpanded] = useState(false);
+  const [list, setList] = useState<string[]>(props.options);
+
+  const updateList = (updated: string[]) => {
+    props.onDragComplete(updated);
+    setList(updated);
+  };
+
+  const onDelete = (index: number) => {
+    const newArray = [...list];
+    newArray.splice(index, 1);
+    updateList(newArray);
+  };
+
+  const elements: any[] = [];
+  list.forEach((value: string, index: number) => {
+    elements.push(<DraggableItem key={value} index={index} title={value} onDelete={onDelete} />);
+  });
+
+  let ddClassName = 'dropdown draggable';
+  if (props.subdropdown) ddClassName += ' subdropdown';
+
+  return (
+    <div className={ddClassName} onMouseEnter={() => setExpanded(true)} onMouseLeave={() => setExpanded(false)}>
+      <NavButton title={props.title} />
+      <Reorder.Group axis='y' values={list} onReorder={updateList} style={{ visibility: expanded ? 'visible' : 'hidden' }}>
+        {elements}
+      </Reorder.Group>
+    </div>
+  );
+}

package/src/editor/components/DraggableItem.tsx

@@ -0,0 +1,22 @@
+// Libs
+import { Reorder } from 'framer-motion';
+// Components
+import CloseIcon from './icons/CloseIcon';
+import DragIcon from './icons/DragIcon';
+import { DraggableItemProps } from './types';
+
+export default function DraggableItem(props: DraggableItemProps) {
+  return (
+    <Reorder.Item key={props.title} value={props.title}>
+      <div>
+        {DragIcon}
+        <span>{props.title}</span>
+        <button className='closeIcon' onClick={() => {
+          props.onDelete(props.index);
+        }}>
+          {CloseIcon}
+        </button>
+      </div>
+    </Reorder.Item>
+  );
+}

package/src/editor/components/Dropdown.tsx

@@ -0,0 +1,38 @@
+// Libs
+import { useState } from 'react';
+// Views
+import NavButton from './NavButton';
+import DropdownItem from './DropdownItem';
+import { DropdownOption, DropdownProps } from './types';
+
+export default function Dropdown(props: DropdownProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  const list: Array<any> = [];
+  {
+    props.options.map((option: DropdownOption, index: number) => {
+      if (props.onSelect !== undefined) {
+        option.onSelect = props.onSelect;
+      }
+      list.push(<DropdownItem option={option} key={index} />);
+    });
+  }
+
+  let ddClassName = 'dropdown';
+  if (props.subdropdown) ddClassName += ' subdropdown';
+
+  return (
+    <div
+      className={ddClassName}
+      onMouseEnter={() => setExpanded(true)}
+      onMouseLeave={() => setExpanded(false)}
+    >
+      <NavButton title={props.title} />
+      <ul
+        style={{ visibility: expanded ? 'visible' : 'hidden' }}
+      >
+        {list}
+      </ul>
+    </div>
+  );
+}

package/src/editor/components/DropdownItem.tsx

@@ -0,0 +1,64 @@
+// Libs
+import { useState } from 'react';
+// Components
+import Draggable from './Draggable';
+import Dropdown from './Dropdown';
+import { DropdownItemProps, DropdownOption } from './types';
+// Utils
+import { randomID } from '../utils';
+
+export default function DropdownItem(props: DropdownItemProps) {
+  const { option } = props;
+  const [selected, setSelected] = useState('');
+
+  let element;
+  switch (option.type) {
+    case 'draggable':
+      element = (
+        <Draggable
+          title={option.title}
+          options={option.value as Array<string>}
+          onDragComplete={(options: string[]) => {
+            if (option.onDragComplete !== undefined) option.onDragComplete(options);
+          }}
+          subdropdown={true}
+        />
+      );
+      break;
+    case 'dropdown':
+      element = (
+        <Dropdown
+          title={option.title}
+          options={option.value as Array<DropdownOption>}
+          onSelect={option.onSelect}
+          subdropdown={true}
+        />
+      );
+      break;
+    case 'option':
+      element = (
+        <button
+          onClick={() => {
+            if (option.onSelect !== undefined) option.onSelect(option.value);
+            // Toggle selectable
+            if (option.selectable) {
+              if (selected !== option.title) {
+                setSelected(option.title);
+              } else {
+                setSelected('');
+              }
+            }
+          }}
+        >
+          {option.title}
+        </button>
+      );
+      break;
+  }
+
+  return (
+    <li className={selected === option.title ? 'selected' : ''} key={randomID()}>
+      {element}
+    </li>
+  );
+}

package/src/editor/components/NavButton.tsx

@@ -0,0 +1,11 @@
+type NavButtonProps = {
+  title: string
+}
+
+export default function NavButton(props: NavButtonProps) {
+  return props.title.search('<') > -1 ? (
+    <button className='svg' dangerouslySetInnerHTML={{ __html: props.title }}></button>
+  ) : (
+    <button>{props.title}</button>
+  );
+}

package/src/editor/components/content.ts

@@ -0,0 +1,2 @@
+export const gridImage = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAABkCAYAAAA8AQ3AAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEoklEQVR4nO3aQc4aMRAFYR+AOQv3Px3ZRYoSoh8YxvX61YJdSdPuD++81lqPZ7/b7fa43++P4zieNnbPu+M40PO1dXqwujc9WIeY0nk5WJ0erO4DD84hpnReDlanB6v70INxiCmdl4PV6cHqTvDYf4gpnZeD1enB6k7yyDgsvfNysDo9WN2JHvzD0jsvB6vTg9Wd6kE/LL3zcrA6PVjd2R6LfFh65+VgdXqwum94LOph6Z2Xg9Xpweq+5bGIh6V3Xg5Wpwer+7IH67D0zsvB6vRgdRd4cA5L77wcrE4PVneRB+Ow9M7Lwer0YHUXeuw/LL3zcrA6PVjdxR4ZSynBsNMjqtvgwV9KEYadHjHdFg/6Uqow7PQI6XZ5+NIdhGGnR0K308OX7iAMOz3o3W6PRVxKK4adHuQO4sFaSjmGnR7IDuTBWYoYdnrwOpgHYyli2OnB64Ae+5cihp0evA7qkbG8EozaTg9WB/bgL68Io7LTg9WhPejLq8Io7PRgdXSPqpfudIy2Tg9Wl+BR89J9F0bCn6BpL3qw9vLqdxdxebuXkv5deqcHqwvzYC0PspTY79I7PVhdoAdneaClRH6X3unB6kI9GMuDLSXuu/ROD1YX7LF/ecClRH2X3unB6sI9MpZcgjGu04PVDfDgL7kIY1SnB6sb4UFfchXGoE4PVjfFY8RL9ykYUzo9WN0kj/iX7pMwJnR6sLppHou45N1LoX6X3unB6oZ6sJYMWQruu/ROD1Y32IOzZNBSUN+ld3qwuuEejCXTOy8Hq9OD1V3osf+w9M7Lwer0YHUXe2QspQTDTo+oboMHfylFGHZ6xHRbPOhLqcKw0yOk2+Ux4qX7FAw7PRK6nR7xL90nYdjpQe92eyziUlox7PQgdxAP1lLKMez0QHYgD85SxLDTg9fBPBhLEcNOD14H9Ni/FDHs9OB1UI+M5ZVg1HZ6sDqwB395RRiVnR6sDu1BX14VRmGnB6uje1S9dKdjtHV6sLoEj5qX7gkYTZ0erC7FY5GHa8No6fRgdWEe6OHaMMZ3erC6QA/0cG0Yozs9WF2oB3q4NoyxnR6sLtgDPVwbxshOD1YX7oEerg1jXKcHqxvggR6uDWNUpwerG+GBHq4NY1CnB6ub4jHipfsUjCmdHqxukkf8S/dJGBM6PVjdNI9FHq4NI73Tg9UN9UAP14YR2+nB6gZ7oIdrw4js9GB1wz3Qw7VhxHV6sLoCD/RwbRhRnR6srsQDPVwbRkynB6sr8kAP14YR0enB6qo80MO1YQR0erC6Ng/0S/c2DHqnB6tr9MC+dG/EIHd6sLpWj0UcrhWD2unB6so9WMOVY+A6PVidHqDhxGB1erA6PdZjUYYTg9Xpwer0+P3bP5wYrE4PVqfHHz8x7PSgdnr89RPDTg9ip8c/fmLY6cHr9HjyE8NOD1anx/Pu8pfuYrA6PVidHv/vlhi9nR6sTo8fdWI0dnqwOj1+3InR1unB6vR4qROjqdOD1enxcidGS6cHq9PjrU6Mhk4PVqfH250Y0zs9WJ0eH3RizO70YHV6fNad+tJdDFanB6vT4/PutJfuYrA6PVidHud0vwA7LKl1AiiR5gAAAABJRU5ErkJggg==`;
+export const noImage = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA5klEQVRoge2Y0Q6EIAwE6cX//+X6cCFpSMEKVTdk501OpRNKiyelFC0b8Ps6gCwoggZF0KAIGhRBgyJoUAQNiqCxjciR9SLV//eZiAyvK3U8i/QVaQO2YyLSFVvlkdTKDjJCukh2ykR5ZEW+kHmlatl90RaBtDkK/w7CYhuRUEO0ee3l+J3m55Vm+17vtwjTnV1V3QA8qfbeUXCzRWDpiLLS+OyzvRW7IzW9R+okvclsqR09743bo0yUpc1+lSJvNsa002+Euk9GKzV7SmZDRIMiaFAEDYqgQRE0KIIGRdCgCBoUQeMEMERadX7YUz8AAAAASUVORK5CYII=`;

package/src/editor/components/icons/CloseIcon.tsx

@@ -0,0 +1,7 @@
+export default (
+  <svg className='closeIcon' width='14' height='14' fill='none' stroke='#666666' strokeMiterlimit='10'>
+    <circle cx='7' cy='7' r='6' />
+    <line x1='4' y1='4' x2='10' y2='10' />
+    <line x1='4' y1='10' x2='10' y2='4' />
+  </svg>
+);

package/src/editor/components/icons/DragIcon.tsx

@@ -0,0 +1,9 @@
+export default (
+  <svg className='dragIcon' width='14' height='14' fill='#666666' stroke='none'>
+    <path
+      d='M10.43,4H3.57C3.26,4,3,4.22,3,4.5v1C3,5.78,3.26,6,3.57,6h6.86C10.74,6,11,5.78,11,5.5v-1
+C11,4.22,10.74,4,10.43,4z M10.43,8H3.57C3.26,8,3,8.22,3,8.5v1C3,9.78,3.26,10,3.57,10h6.86C10.74,10,11,9.78,11,9.5v-1
+C11,8.22,10.74,8,10.43,8z'
+    />
+  </svg>
+);

package/src/editor/components/types.ts

@@ -0,0 +1,41 @@
+export type DropdownType = 'option' | 'dropdown' | 'draggable'
+
+export interface DropdownOption {
+  title: string
+  value: any | Array<DropdownOption>
+  type: DropdownType
+  // Option
+  onSelect?: (value: any) => void
+  selectable?: boolean
+  // Draggable
+  onDragComplete?: (options: Array<string>) => void
+}
+
+export interface DropdownProps {
+  title: string
+  options: Array<DropdownOption>
+  onSelect?: (value: any) => void
+  subdropdown?: boolean
+}
+
+export interface DropdownItemProps {
+  option: DropdownOption
+  onSelect?: (value: any) => void
+  // Draggable
+  onDragComplete?: (options: Array<string>) => void
+}
+
+// Draggable
+
+export interface DraggableItemProps {
+  index: number
+  title: string
+  onDelete: (index: number) => void
+}
+
+export interface DraggableProps {
+  title: string
+  options: Array<string>
+  onDragComplete: (options: Array<string>) => void
+  subdropdown?: boolean
+}

package/src/editor/global.ts

@@ -0,0 +1,20 @@
+import { EventDispatcher } from 'three';
+
+export const debugDispatcher = new EventDispatcher();
+
+export const ToolEvents = {
+  CUSTOM: 'ToolEvents::custom',
+  // Components
+  SELECT_DROPDOWN: 'ToolEvents::selectDropdown',
+  DRAG_UPDATE: 'ToolEvents::dragUpdate',
+  // SceneHierarchy
+  SET_SCENE: 'ToolEvents::setScene',
+  GET_OBJECT: 'ToolEvents::getObject',
+  SET_OBJECT: 'ToolEvents::setObject',
+  UPDATE_OBJECT: 'ToolEvents::updateObject',
+  CREATE_TEXTURE: 'ToolEvents::createTexture',
+  REQUEST_METHOD: 'ToolEvents::requestMethod',
+  // MultiView
+  ADD_CAMERA: 'ToolEvents::addCamera',
+  REMOVE_CAMERA: 'ToolEvents::removeCamera',
+};

package/src/editor/multiView/CameraWindow.tsx

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

package/src/editor/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;
+  }
+}

package/src/editor/multiView/InfiniteGridMaterial.ts

@@ -0,0 +1,127 @@
+import { Color, DoubleSide, GLSL3, ShaderMaterial } from 'three';
+
+type InfiniteGridProps = {
+  divisions?: number
+  scale?: number
+  color?: Color
+  distance?: number
+  subgridOpacity?: number
+  gridOpacity?: number
+}
+
+const vertex = `out vec3 worldPosition;
+uniform float uDistance;
+
+void main() {
+  // Scale the plane by the drawing distance
+  worldPosition = position.xzy * uDistance;
+  worldPosition.xz += cameraPosition.xz;
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(worldPosition, 1.0);
+}`;
+
+const fragment = `out vec4 fragColor;
+in vec3 worldPosition;
+
+uniform float uDivisions;
+uniform float uScale;
+uniform vec3 uColor;
+uniform float uDistance;
+uniform float uSubgridOpacity;
+uniform float uGridOpacity;
+
+float getGrid(float gapSize) {
+  vec2 worldPositionByDivision = worldPosition.xz / gapSize;
+
+  // Inverted, 0 where line, >1 where there's no line
+  // We use the worldPosition (which in this case we use similarly to UVs) differential to control the anti-aliasing
+  // We need to do the -0.5)-0.5 trick because the result fades out from 0 to 1, and we want both
+  // worldPositionByDivision == 0.3 and worldPositionByDivision == 0.7 to result in the same fade, i.e. 0.3,
+  // otherwise only one side of the line will be anti-aliased
+  vec2 grid = abs(fract(worldPositionByDivision-0.5)-0.5) / fwidth(worldPositionByDivision) / 2.0;
+  float gridLine = min(grid.x, grid.y);
+
+  // Uninvert and clamp
+  return 1.0 - min(gridLine, 1.0);
+}
+
+void main() {
+  float cameraDistanceToGridPlane = distance(cameraPosition.y, worldPosition.y);
+  float cameraDistanceToFragmentOnGridPlane = distance(cameraPosition.xz, worldPosition.xz);
+
+  // The size of the grid and subgrid are powers of each other and they are determined based on camera distance.
+  // The current grid will become the next subgrid when it becomes too small, and its next power becomes the new grid.
+  float subGridPower = pow(uDivisions, floor(log(cameraDistanceToGridPlane) / log(uDivisions)));
+  float gridPower = subGridPower * uDivisions;
+
+  // If we want to fade both the grid and its subgrid, we need to displays 3 different opacities, with the next grid being the third
+  float nextGridPower = gridPower * uDivisions;
+
+  // 1 where grid, 0 where no grid
+  float subgrid = getGrid(subGridPower * uScale);
+  float grid = getGrid(gridPower * uScale);
+  float nextGrid = getGrid(nextGridPower * uScale);
+
+  // Where we are between the introduction of the current grid power and when we switch to the next grid power
+  float stepPercentage = (cameraDistanceToGridPlane - subGridPower)/(gridPower - subGridPower);
+
+  // The last x percentage of the current step over which we want to fade
+  float fadeRange = 0.3;
+
+  // We calculate the fade percentage from the step percentage and the fade range
+  float fadePercentage = max(stepPercentage - 1.0 + fadeRange, 0.0) / fadeRange;
+
+  // Set base opacity based on how close we are to the drawing distance, with a cubic falloff
+  float baseOpacity = subgrid * pow(1.0 - min(cameraDistanceToFragmentOnGridPlane / uDistance, 1.0), 3.0);
+
+  // Shade the subgrid
+  fragColor = vec4(uColor.rgb, (baseOpacity - fadePercentage) * uSubgridOpacity);
+
+  // Somewhat arbitrary additional fade coefficient to counter anti-aliasing popping when switching between grid powers
+  float fadeCoefficient = 0.5;
+
+  // Shade the grid
+  fragColor.a = mix(fragColor.a, baseOpacity * uGridOpacity - fadePercentage * (uGridOpacity - uSubgridOpacity) * fadeCoefficient, grid);
+
+  // Shade the next grid
+  fragColor.a = mix(fragColor.a, baseOpacity * uGridOpacity, nextGrid);
+
+  if (fragColor.a <= 0.0) discard;
+}`;
+
+export default class InfiniteGridMaterial extends ShaderMaterial {
+  constructor(props?: InfiniteGridProps) {
+    super({
+      extensions: {
+        derivatives: true,
+      },
+      glslVersion: GLSL3,
+      side: DoubleSide,
+      transparent: true,
+      uniforms: {
+        uScale: {
+          value: props?.scale !== undefined ? props?.scale : 0.1,
+        },
+        uDivisions: {
+          value: props?.divisions !== undefined ? props?.divisions : 10,
+        },
+        uColor: {
+          value: props?.color !== undefined ? props?.color : new Color(0xffffff),
+        },
+        uDistance: {
+          value: props?.distance !== undefined ? props?.distance : 10000,
+        },
+        uSubgridOpacity: {
+          value: props?.subgridOpacity !== undefined ? props?.subgridOpacity : 0.15,
+        },
+        uGridOpacity: {
+          value: props?.gridOpacity !== undefined ? props?.gridOpacity : 0.25,
+        },
+      },
+      vertexShader: vertex,
+      fragmentShader: fragment,
+      name: 'InfiniteGrid',
+      depthWrite: false,
+    });
+  }
+}

package/src/editor/multiView/MultiView.scss

@@ -0,0 +1,101 @@
+$padding: 2px;
+
+.multiview {
+  display: grid;
+  font-family: Roboto Mono, Source Code Pro, Menlo, Courier, monospace;
+  font-size: 10px;
+  grid-template-columns: repeat(2, 1fr);
+  position: absolute;
+  overflow: hidden;
+  left: 0;
+  top: 0;
+  right: 300px;
+  bottom: 0;
+  z-index: 1;
+
+  canvas {
+    pointer-events: none;
+  }
+
+  .dropdown {
+    background-color: #222;
+    display: inline-block;
+    font-size: 10px;
+    padding: $padding;
+    text-align: center;
+    width: 100px;
+
+    .dropdown-toggle {
+      cursor: pointer;
+    }
+  
+    .dropdown-menu {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      z-index: 1;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      width: 100%;
+  
+      li {
+        background-color: #222;
+        cursor: pointer;
+        padding: $padding;
+        transition: 0.2s linear background-color;
+        &:hover {
+          background-color: #333;
+        }
+      }
+    }
+  }
+
+  .cameras {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    pointer-events: visible;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    &.single {
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+    .dropdown {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+
+      &.up {
+        bottom: 0;
+        top: initial;
+        .dropdown-menu {
+          top: initial;
+          bottom: 100%;
+        }
+      }
+    }
+
+    .CameraWindow {
+      border: 1px dotted #333;
+      pointer-events: visible;
+      position: relative;
+    
+      .clickable {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .settings {
+    pointer-events: visible;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}