@archvisioninc/canvas 3.3.8 → 3.3.10

package/dist/Canvas.js

@@ -0,0 +1,67 @@
+import _ from 'lodash';
+import React, { useRef, useEffect, useCallback } from 'react';
+import { initScene, cleanup, createScene, engine, scene, warningChecks, updateItem, getGLTFData, takePreviewScreenshots } from './helpers';
+import { CanvasContainer, RenderCanvas } from './styles';
+export let reactProps;
+const Canvas = props => {
+  const {
+    file,
+    guidURL,
+    reinitialize,
+    updateData,
+    exportModel,
+    toDownload,
+    exportType
+  } = props;
+  const canvasRef = useRef();
+  const checkForWarnings = useCallback(() => {
+    if (scene) {
+      const hasPlugin = scene?.loadingPluginName;
+      if (hasPlugin) warningChecks();
+    }
+  }, []);
+  useEffect(() => {
+    return () => {
+      cleanup();
+    };
+  }, []);
+  useEffect(() => {
+    initScene({
+      canvasRef
+    });
+  }, [canvasRef, guidURL]);
+  useEffect(() => {
+    reactProps = props;
+  }, [props]);
+  useEffect(() => {
+    const createNewScene = true;
+    if (file || guidURL && engine) createScene();
+    if (!file && !guidURL && scene) createScene(createNewScene);
+  }, [file, guidURL]);
+  useEffect(() => {
+    checkForWarnings();
+  }, [checkForWarnings]);
+  useEffect(() => {
+    if (scene && !_.isEmpty(updateData)) {
+      updateItem(updateData);
+    }
+  }, [updateData]);
+  useEffect(() => {
+    if (canvasRef && reinitialize) {
+      cleanup();
+      initScene({
+        canvasRef
+      });
+    }
+  }, [canvasRef, reinitialize]);
+  useEffect(() => {
+    if (exportModel && exportType) {
+      getGLTFData(exportType, toDownload);
+      takePreviewScreenshots();
+    }
+  }, [exportModel, exportType, toDownload]);
+  return /*#__PURE__*/React.createElement(CanvasContainer, props, /*#__PURE__*/React.createElement(RenderCanvas, {
+    ref: canvasRef
+  }));
+};
+export default Canvas;

package/dist/actions/index.js

@@ -0,0 +1 @@
+export * from './shortcutActions';

package/dist/actions/shortcutActions.js

@@ -0,0 +1,313 @@
+import * as BABYLON from 'babylonjs';
+import * as BABYLONGUI from 'babylonjs-gui';
+import { getUserMeshes, gizmoManager, newFraming, scene, selectedMeshes, theme, $selectedTheme, newColor, toggleCameraMode, getParamOfSelectedMeshes, getUserMaterials, guiTexture, getBoundingMeshData, singleMeshTNode, multiMeshTNode, createBoundingMesh, restoreParents, createSafeFrame, newMetaDataEntry, resetSelectedMeshes, buildMaterialsArray, buildSelectedMaterialArray, addAutoRotation, removeAutoRotation, autoRotation, buildMeshPositionsArray } from '../helpers';
+import { GIZMOS, GUI, MESH_PARAMS } from '../constants';
+import { exclusionMaterials, orthoOptions, dimensions, scaleUnits } from '../enums';
+import _ from 'lodash';
+export let cameraView;
+export const resetManagerGizmos = type => {
+  Object.values(GIZMOS).forEach(value => {
+    if (value !== type) {
+      const propertyName = _.camelCase(`${value}Enabled`);
+      gizmoManager[propertyName] = false;
+    }
+  });
+  dimensions.forEach(dimension => {
+    guiTexture.getControlByName(dimension.rectangle)?.dispose?.();
+    guiTexture.getControlByName(dimension.label)?.dispose?.();
+    guiTexture.getControlByName(dimension.container)?.dispose?.();
+  });
+  switch (selectedMeshes.length) {
+    case 1:
+      gizmoManager.attachToNode(singleMeshTNode);
+      break;
+    default:
+      gizmoManager.attachToNode(multiMeshTNode);
+      break;
+  }
+};
+export const toggleTurntable = override => {
+  const camera = scene.activeCamera;
+  const rotationEnabled = camera.useAutoRotationBehavior;
+  if (!autoRotation) addAutoRotation();
+  if (override !== undefined) {
+    camera.useAutoRotationBehavior = override;
+    if (override) {
+      autoRotation.attach(camera);
+      autoRotation.idleRotationSpeed = -0.1;
+      return;
+    }
+    autoRotation.detach(camera);
+    removeAutoRotation();
+    return;
+  }
+  if (rotationEnabled) {
+    autoRotation.detach(camera);
+    camera.useAutoRotationBehavior = false;
+    removeAutoRotation();
+    return;
+  }
+  autoRotation.attach(camera);
+  camera.useAutoRotationBehavior = true;
+  autoRotation.idleRotationSpeed = -0.1;
+};
+export const focusCamera = () => {
+  const camera = scene.activeCamera;
+  const userMeshes = getUserMeshes();
+  const framingBehavior = newFraming();
+  const babylonOrthographic = BABYLON.Camera.ORTHOGRAPHIC_CAMERA;
+  const isOrtho = camera.mode === babylonOrthographic;
+  const boundingMesh = scene.getMeshById('boundingMesh');
+  const meshCenter = getParamOfSelectedMeshes(MESH_PARAMS.center);
+  const framingMeshes = boundingMesh ? [boundingMesh] : userMeshes;
+  framingBehavior.framingTime = 0;
+  framingBehavior.defaultElevation = 0;
+  framingBehavior.attach?.(camera);
+  !_.isEmpty(userMeshes) ? framingBehavior.zoomOnMeshesHierarchy(framingMeshes) : camera.setTarget(BABYLON.Vector3.Zero());
+  camera.beta = Math.PI / 2;
+  if (isOrtho) {
+    camera.target = meshCenter;
+    camera.alpha = orthoOptions[cameraView].alpha;
+    camera.beta = orthoOptions[cameraView].beta;
+  }
+  framingBehavior.detach?.(camera);
+};
+export const toggleSafeFrame = (e, aspectRatio, override) => {
+  let outerFrame = guiTexture.getControlByName(GUI.outerSafeFrame);
+  if (aspectRatio) {
+    outerFrame?.dispose();
+    createSafeFrame(aspectRatio);
+    outerFrame = guiTexture.getControlByName(GUI.outerSafeFrame);
+    outerFrame.isVisible = override;
+    newMetaDataEntry('safeFrameEnabled', outerFrame.isVisible);
+    return;
+  }
+  if (override === undefined && outerFrame) {
+    outerFrame.isVisible = !outerFrame.isVisible;
+    newMetaDataEntry('safeFrameEnabled', outerFrame.isVisible);
+    return;
+  }
+};
+export const toggleInspector = () => {
+  const inspector = scene.debugLayer;
+  inspector.isVisible() ? inspector.hide() : inspector.show();
+};
+export const toggleMoveWidget = () => {
+  if (!_.isEmpty(selectedMeshes)) {
+    resetManagerGizmos(GIZMOS.PositionGizmo);
+    gizmoManager.positionGizmoEnabled = !gizmoManager.positionGizmoEnabled;
+  }
+};
+export const toggleRotateWidget = () => {
+  if (!_.isEmpty(selectedMeshes)) {
+    resetManagerGizmos(GIZMOS.RotationGizmo);
+    gizmoManager.rotationGizmoEnabled = !gizmoManager.rotationGizmoEnabled;
+  }
+};
+export const toggleScaleWidget = () => {
+  if (!_.isEmpty(selectedMeshes)) {
+    resetManagerGizmos(GIZMOS.ScaleGizmo);
+    gizmoManager.scaleGizmoEnabled = !gizmoManager.scaleGizmoEnabled;
+  }
+};
+export const toggleBoundingBoxWidget = () => {
+  const boundingMesh = scene.getMeshById('boundingMesh');
+  const boxColor = newColor(theme.colors[$selectedTheme].accent);
+  const isEnabled = gizmoManager.boundingBoxGizmoEnabled;
+  const boundingInfo = getBoundingMeshData([boundingMesh]);
+  dimensions.forEach(dimension => {
+    guiTexture.getControlByName(dimension.rectangle)?.dispose?.();
+    guiTexture.getControlByName(dimension.label)?.dispose?.();
+    guiTexture.getControlByName(dimension.container)?.dispose?.();
+  });
+  if (!gizmoManager.boundingBoxGizmoEnabled) {
+    resetManagerGizmos(GIZMOS.BoundingBoxGizmo);
+    gizmoManager.attachToMesh(boundingMesh);
+  }
+  gizmoManager.boundingBoxGizmoEnabled = !isEnabled;
+  gizmoManager.boundingBoxDragBehavior.rotateDraggedObject = false;
+  gizmoManager.boundingBoxDragBehavior.disableMovement = true;
+  gizmoManager.gizmos.boundingBoxGizmo.setEnabledScaling(false);
+  gizmoManager.gizmos.boundingBoxGizmo.setEnabledRotationAxis('');
+  gizmoManager.gizmos.boundingBoxGizmo.setColor(boxColor);
+  newMetaDataEntry('boundingBoxEnabled', !isEnabled);
+
+  // ================ Bounding Box Labels ================
+  const buildUnitLabel = dimension => {
+    const {
+      name,
+      color,
+      label,
+      rectangle,
+      container
+    } = dimension;
+    const {
+      center,
+      minimum,
+      maximumWorld,
+      minimumWorld
+    } = boundingInfo;
+    const displayUnit = scene.metadata?.selectedDisplayUnit || scene.metadata?.selectedSourceUnit;
+    const labelHeight = 36;
+    let x, y, z, value;
+    const buildValue = axis => {
+      const workingValue = Math.abs(minimumWorld[axis] - maximumWorld[axis]);
+      const meterScaleFactor = scaleUnits.find(unit => unit.abbreviation === 'm').scaleFactor;
+      const displayScaleFactor = scaleUnits.find(unit => unit.abbreviation === displayUnit || unit.name === displayUnit)?.scaleFactor || meterScaleFactor;
+      return (workingValue / displayScaleFactor).toFixed(6);
+    };
+    switch (name) {
+      case 'length':
+        x = center.x + (maximumWorld.x - minimumWorld.x) / 2;
+        y = center.y - Math.abs(minimum.y);
+        z = center.z;
+        value = buildValue('z');
+        break;
+      case 'width':
+        x = center.x;
+        y = center.y - Math.abs(minimum.y);
+        z = center.z + (maximumWorld.z - minimumWorld.z) / 2;
+        value = buildValue('x');
+        break;
+      default:
+        x = center.x + (maximumWorld.x - minimumWorld.x) / 2;
+        y = center.y;
+        z = center.z + (maximumWorld.z - minimumWorld.z) / 2;
+        value = buildValue('y');
+    }
+    const lengthPosition = new BABYLON.Vector3(x, y, z);
+    const labelRectangle = new BABYLONGUI.Rectangle(rectangle);
+    labelRectangle.width = displayUnit ? 0.14 : 0.12;
+    labelRectangle.heightInPixels = labelHeight;
+    labelRectangle.cornerRadius = 3;
+    labelRectangle.color = color;
+    labelRectangle.thickness = 1;
+    labelRectangle.background = color + 20;
+    guiTexture.addControl(labelRectangle);
+    const lengthLabel = new BABYLONGUI.TextBlock(label);
+    lengthLabel.text = `${_.startCase(name)}: ${value}${displayUnit || ''}`;
+    labelRectangle.addControl(lengthLabel);
+    const labelLinkBox = BABYLON.MeshBuilder.CreateBox(container, scene);
+    labelLinkBox.position = lengthPosition;
+    labelLinkBox.isPickable = false;
+    labelLinkBox.visibility = 0;
+    labelLinkBox.setParent(boundingMesh);
+    labelRectangle.linkWithMesh(labelLinkBox);
+    labelRectangle.linkOffsetX = 30;
+    labelRectangle.linkOffsetY = 30;
+  };
+  if (gizmoManager.boundingBoxGizmoEnabled) {
+    dimensions.forEach(dimension => buildUnitLabel(dimension));
+  }
+};
+export const hideSelected = () => {
+  selectedMeshes.forEach(mesh => {
+    mesh.isVisible = false;
+  });
+  resetManagerGizmos();
+};
+export const unhideAll = () => {
+  scene.meshes.forEach(mesh => {
+    if (!mesh.isVisible) {
+      mesh.isVisible = true;
+    }
+  });
+};
+export const deleteSelected = () => {
+  selectedMeshes.forEach(mesh => {
+    const material = mesh.material;
+    if (material?.getBindedMeshes().length === 1) {
+      const subMaterials = material.subMaterials;
+      const defaultMaterial = name => exclusionMaterials.includes(name);
+      if (subMaterials) {
+        subMaterials?.forEach(subMaterial => !defaultMaterial(subMaterial.name) && subMaterial.dispose());
+      }
+      if (!defaultMaterial(material.name)) material.dispose();
+      material.getActiveTextures().forEach(texture => texture.dispose());
+    }
+    resetManagerGizmos();
+    mesh.dispose();
+  });
+  resetSelectedMeshes();
+};
+export const toggleOrthographicViews = (e, orthoCamera) => {
+  const isDifferent = cameraView !== orthoCamera;
+  const babylonOrthographic = BABYLON.Camera.ORTHOGRAPHIC_CAMERA;
+  const babylonPerspective = BABYLON.Camera.PERSPECTIVE_CAMERA;
+  if (scene?.debugLayer.isVisible()) return;
+  if (isDifferent) {
+    cameraView = orthoCamera;
+    toggleCameraMode(orthoCamera, babylonOrthographic);
+    newMetaDataEntry('selectedOrthoView', orthoCamera);
+    return;
+  }
+  toggleCameraMode(orthoCamera, babylonPerspective);
+  newMetaDataEntry('selectedOrthoView', '');
+  cameraView = null;
+};
+export const toggleCulling = () => {
+  const materials = getUserMaterials();
+  materials.forEach(material => {
+    const isCullingBackfaces = material.backFaceCulling;
+    if (isCullingBackfaces) return material.backFaceCulling = false;
+    material.backFaceCulling = !material.backFaceCulling;
+  });
+  newMetaDataEntry('materials', buildMaterialsArray());
+  newMetaDataEntry('selectedMaterials', buildSelectedMaterialArray());
+};
+export const modelToOrigin = sourceUnitScaleOperation => {
+  const boundingBoxEnabled = gizmoManager.boundingBoxGizmoEnabled;
+  const meshes = selectedMeshes.length > 0 ? selectedMeshes : getUserMeshes();
+  const parentList = [];
+  const handleBoundingBox = () => {
+    const newBox = createBoundingMesh();
+    if (boundingBoxEnabled && !sourceUnitScaleOperation) toggleBoundingBoxWidget();
+    if (gizmoManager.boundingBoxGizmoEnabled) gizmoManager.attachToMesh(newBox);
+    resetManagerGizmos(GIZMOS.BoundingBoxGizmo);
+  };
+
+  // Single selections or only single mesh in scene.
+  if (meshes.length === 1) {
+    const mesh = meshes[0];
+    const boundingBox = mesh.getBoundingInfo().boundingBox;
+    const meshCenter = boundingBox.centerWorld;
+    const parent = mesh.parent;
+    parentList.push({
+      mesh,
+      parent
+    });
+    mesh.setParent(singleMeshTNode);
+    singleMeshTNode.position.subtractInPlace(meshCenter);
+    singleMeshTNode.position.y += boundingBox.extendSizeWorld.y;
+    selectedMeshes.length === 1 ? mesh.setParent(singleMeshTNode) : restoreParents(parentList);
+    handleBoundingBox();
+    newMetaDataEntry('meshChangeTracking', buildMeshPositionsArray({
+      preserveScale: true,
+      preserveRotation: true
+    }));
+    return;
+  }
+
+  // Multiple selections or multiple meshes in scene.
+  const multiBoundingData = getBoundingMeshData(meshes);
+  const boundingCenter = multiBoundingData.center;
+  const compensationY = multiBoundingData.maximum.y - boundingCenter.y;
+  meshes.forEach(mesh => {
+    const parent = mesh.parent;
+    parentList.push({
+      mesh,
+      parent
+    });
+    mesh.setParent(multiMeshTNode);
+  });
+  if (!sourceUnitScaleOperation) {
+    multiMeshTNode.position.subtractInPlace(boundingCenter);
+    multiMeshTNode.position.y += compensationY;
+  }
+  restoreParents(parentList);
+  handleBoundingBox();
+  newMetaDataEntry('meshChangeTracking', buildMeshPositionsArray({
+    preserveScale: true,
+    preserveRotation: true
+  }));
+};

package/dist/constants/constants.js

@@ -0,0 +1,80 @@
+export const TEXTURE_SIZE_THRESHOLD = 4096;
+export const MATERIAL_COUNT_THRESHOLD = 50;
+export const MESH_COUNT_THRESHOLD = 500;
+export const INSPECTOR = {
+  root: '__root__'
+};
+export const LISTENERS = {
+  resize: 'resize',
+  keyup: 'keyup'
+};
+export const LIGHTS = {
+  SpotLight: 'SpotLight',
+  ShadowGenerator: 'ShadowGenerator',
+  PointLight: 'PointLight',
+  DirectionalLight: 'DirectionalLight',
+  HemisphericLight: 'HemisphericLight',
+  GroundLight: 'GroundLight'
+};
+export const CAMERAS = {
+  FreeCamera: 'FreeCamera',
+  FlyCamera: 'FlyCamera',
+  FollowCamera: 'FollowCamera',
+  GamepadCamera: 'GamepadCamera',
+  TouchCamera: 'TouchCamera',
+  UniversalCamera: 'UniversalCamera',
+  ArcRotateCamera: 'ArcRotateCamera'
+};
+export const VIEWPORT = {
+  shadowMapSize: 4096
+};
+export const GIZMOS = {
+  RotationGizmo: 'RotationGizmo',
+  PositionGizmo: 'PositionGizmo',
+  ScaleGizmo: 'ScaleGizmo',
+  BoundingBoxGizmo: 'BoundingBoxGizmo'
+};
+export const ORTHO = {
+  left: 'orthoLeft',
+  right: 'orthoRight',
+  top: 'orthoTop',
+  bottom: 'orthoBottom'
+};
+export const GUI = {
+  dragSelectBox: 'dragSelectBox',
+  innerSafeFrame: 'safeFrame_inner',
+  outerSafeFrame: 'safeFrame_outer'
+};
+export const MESH_PARAMS = {
+  center: 'center',
+  rotation: 'rotation',
+  scaling: 'scaling',
+  radius: 'radius'
+};
+export const MESSAGE_TYPES = {
+  error: 'error',
+  warning: 'warning',
+  info: 'info',
+  success: 'success',
+  loading: 'loading'
+};
+export const UPDATABLE_ITEMS = {
+  material: 'material',
+  mesh: 'mesh',
+  camera: 'camera',
+  environment: 'environment',
+  texture: 'texture',
+  viewport: 'viewport',
+  publish: 'publish',
+  lighting: 'lighting'
+};
+export const TRANSPARENCY_MODES = {
+  simple: 'simple',
+  complex: 'complex',
+  stencil: 'stencil'
+};
+export const AXIS_COLORS = {
+  xAxis: '#EA4231',
+  yAxis: '#249C4A',
+  zAxis: '#0089EA'
+};

package/dist/constants/index.js

@@ -0,0 +1 @@
+export * from './constants';

package/dist/enums/aspectRatios.js

@@ -0,0 +1,17 @@
+export const ratios = {
+  square: {
+    name: 'square',
+    label: '1:1',
+    value: 1
+  },
+  broadcast: {
+    name: 'broadcast',
+    label: '4:3',
+    value: 1.33
+  },
+  cinema: {
+    name: 'cinema',
+    label: '16:9',
+    value: 1.77
+  }
+};

package/dist/enums/dimensions.js

@@ -0,0 +1,20 @@
+import { AXIS_COLORS } from '../constants';
+export const dimensions = [{
+  name: 'length',
+  color: AXIS_COLORS.zAxis,
+  rectangle: 'lengthRectangle',
+  label: 'lengthLabel',
+  container: 'lengthContainer'
+}, {
+  name: 'height',
+  color: AXIS_COLORS.yAxis,
+  rectangle: 'heightRectangle',
+  label: 'heightLabel',
+  container: 'widthContainer'
+}, {
+  name: 'width',
+  color: AXIS_COLORS.xAxis,
+  rectangle: 'widthRectangle',
+  label: 'widthLabel',
+  container: 'heightContainer'
+}];

package/dist/enums/downscaling.js

@@ -0,0 +1,16 @@
+export const downscaling = [{
+  name: '4K',
+  value: 4096
+}, {
+  name: '2K',
+  value: 2048
+}, {
+  name: '1K',
+  value: 1024
+}, {
+  name: '512',
+  value: 512
+}, {
+  name: '256',
+  value: 256
+}];

package/dist/enums/exclusions.js

@@ -0,0 +1,4 @@
+export const exclusionMaterials = ['colorShader', 'default material', 'gridMat', 'ground', 'skyBox', 'boundingMaterial', 'voxelization', 'voxelSlabDebug'];
+export const exclusionMeshes = ['xAxisMesh', 'yAxisMesh', 'zAxisMesh', 'mirrorGround', 'ground', 'hdrSkyBox', 'boundingMesh', 'lengthContainer', 'widthContainer', 'heightContainer'];
+export const exclusionGUIs = ['guiDragSelectBox', 'lengthRectangle', 'lengthLabel', 'lengthContainer', 'widthRectangle', 'widthLabel', 'widthContainer', 'heightRectangle', 'heightLabel', 'heightContainer'];
+export const exclusionTNodes = ['xAxis', 'yAxis', 'zAxis', 'multiMeshTransforms', 'singleMeshTransforms'];

package/dist/enums/formats.js

@@ -0,0 +1 @@
+export const DRAG_DROP_FORMATS = ['gltf', 'glb'];

package/dist/enums/index.js

@@ -0,0 +1,8 @@
+export * from './shortcuts';
+export * from './exclusions';
+export * from './aspectRatios';
+export * from './orthoOptions';
+export * from './formats';
+export * from './downscaling';
+export * from './dimensions';
+export * from './scaleUnits';

package/dist/enums/orthoOptions.js

@@ -0,0 +1,28 @@
+import * as BABYLON from 'babylonjs';
+const toRadians = value => BABYLON.Tools.ToRadians(value || 0);
+export const orthoOptions = {
+  orthoLeft: {
+    alpha: 0,
+    beta: toRadians(90)
+  },
+  orthoRight: {
+    alpha: toRadians(180),
+    beta: toRadians(90)
+  },
+  orthoFront: {
+    alpha: toRadians(90),
+    beta: toRadians(90)
+  },
+  orthoBack: {
+    alpha: toRadians(270),
+    beta: toRadians(90)
+  },
+  orthoTop: {
+    alpha: toRadians(90),
+    beta: 0
+  },
+  orthoBottom: {
+    alpha: toRadians(90),
+    beta: toRadians(180)
+  }
+};

package/dist/enums/scaleUnits.js

@@ -0,0 +1,25 @@
+export const scaleUnits = [{
+  name: 'millimeter',
+  abbreviation: 'mm',
+  scaleFactor: 0.001
+}, {
+  name: 'centimeter',
+  abbreviation: 'cm',
+  scaleFactor: 0.01
+}, {
+  name: 'meter',
+  abbreviation: 'm',
+  scaleFactor: 1
+}, {
+  name: 'inch',
+  abbreviation: 'in',
+  scaleFactor: 0.0254
+}, {
+  name: 'foot',
+  abbreviation: 'ft',
+  scaleFactor: 0.3048
+}, {
+  name: 'yard',
+  abbreviation: 'yd',
+  scaleFactor: 0.9144
+}];

package/dist/enums/shortcuts.js

@@ -0,0 +1,89 @@
+import { removeFromViewport } from '../helpers';
+import { toggleInspector, toggleSafeFrame, focusCamera, toggleRotateWidget, toggleMoveWidget, hideSelected, unhideAll, toggleCulling, modelToOrigin, toggleScaleWidget, toggleBoundingBoxWidget, toggleOrthographicViews, toggleTurntable } from '../actions';
+const deletePayload = {
+  payload: {
+    deleteSelectedMesh: true
+  }
+};
+export const shortcuts = {
+  camera: [{
+    name: 'focusCamera',
+    key: 'C',
+    action: () => focusCamera?.()
+  }, {
+    name: 'toggleSafeFrame',
+    key: 'F',
+    action: () => toggleSafeFrame?.()
+  }, {
+    name: 'orthoLeft',
+    key: '1',
+    action: e => toggleOrthographicViews(e, 'orthoLeft')
+  }, {
+    name: 'orthoRight',
+    key: '2',
+    action: e => toggleOrthographicViews(e, 'orthoRight')
+  }, {
+    name: 'orthoFront',
+    key: '3',
+    action: e => toggleOrthographicViews(e, 'orthoFront')
+  }, {
+    name: 'orthoBack',
+    key: '4',
+    action: e => toggleOrthographicViews(e, 'orthoBack')
+  }, {
+    name: 'orthoTop',
+    key: '5',
+    action: e => toggleOrthographicViews(e, 'orthoTop')
+  }, {
+    name: 'orthoBottom',
+    key: '6',
+    action: e => toggleOrthographicViews(e, 'orthoBottom')
+  }],
+  utilities: [{
+    name: 'inspector',
+    key: 'N',
+    action: () => toggleInspector?.()
+  }, {
+    name: 'turntable',
+    key: '/',
+    action: (e, override) => toggleTurntable?.(override)
+  }],
+  viewport: [{
+    name: 'moveWidget',
+    key: 'M',
+    action: () => toggleMoveWidget?.()
+  }, {
+    name: 'rotateWidget',
+    key: 'R',
+    action: () => toggleRotateWidget?.()
+  }, {
+    name: 'scaleWidget',
+    key: 'S',
+    action: () => toggleScaleWidget?.()
+  }, {
+    name: 'hideSelected',
+    key: 'H',
+    action: () => hideSelected?.()
+  }, {
+    name: 'unhideAll',
+    key: 'U',
+    action: () => unhideAll?.()
+  }, {
+    name: 'boundingBox',
+    key: 'B',
+    action: () => toggleBoundingBoxWidget?.()
+  }, {
+    name: 'deleteSelected',
+    key: 'Delete',
+    action: () => removeFromViewport(deletePayload)
+  }],
+  model: [{
+    name: 'toggleCulling',
+    key: 'c',
+    action: () => toggleCulling?.()
+  }, {
+    name: 'modelToOrigin',
+    key: 'O',
+    action: () => modelToOrigin?.()
+  }]
+};