feat: Scene Composer - Implement Sub Model Selection (#23)

- Save/Loading Works
- Fixed issues with Compatibility with Enhanced Edit Feature
- SubModels are compatbile with any tool that operates on an object 3D

Co-authored-by: Mitchell Lee <mitchlee@amazon.com>

.gitignore

@@ -47,3 +47,6 @@ creds.json
 packages/components/styles.css
 **/NOTICE
 **/LICENSE
+
+# We use yarn for locking, so these shouldn't be committed or used.
+package-lock.json

.npmrc

@@ -1,2 +1,3 @@
 CYPRESS_INSTALL_BINARY=0
 puppeteer_skip_chromium_download=true
+package-lock=false

package.json

@@ -31,6 +31,7 @@
     "versionup:patch": "lerna version patch --conventional-commits --no-changelog --no-push --no-git-tag-version --yes",
     "versionup:minor": "lerna version minor --conventional-commits --no-changelog --no-push --no-git-tag-version --yes",
     "versionup:major": "lerna version major --conventional-commits --no-changelog --no-push --no-git-tag-version --yes",
+    "link": "lerna exec -- npm link",
     "publishToNpm": "lerna publish from-package --no-verify-access --yes"
   },
   "devDependencies": {
@@ -70,6 +71,7 @@
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-formatjs": "3.0.0",
     "eslint-plugin-import": "2.25.2",
+    "eslint-plugin-jest": "^26.6.0",
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "4.0.0",

packages/related-table/src/utils/utils.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { ITreeNode, TreeMap } from '../Model/TreeNode';
 import { buildTreeNodes, buildTreePrefix, filteringFunction, flatTree, sortTree } from './index';
 

packages/scene-composer/.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
     ecmaVersion: 2015, // Allows for the parsing of modern ECMAScript features
     sourceType: 'module', // Allows for the use of imports
   },
-  plugins: ['@typescript-eslint', 'import', 'formatjs'],
+  plugins: ['@typescript-eslint', 'import', 'formatjs', 'jest'],
   // Note the order of the list is important
   extends: [
     'standard',
@@ -13,6 +13,7 @@ module.exports = {
     'plugin:import/typescript',
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
+    'plugin:jest/recommended',
   ],
   settings: {
     react: {
@@ -55,13 +56,18 @@ module.exports = {
         leadingUnderscore: 'require',
       },
     ],
-
-    // TODO: fix errors then re-enable following rules
-    'react/react-in-jsx-scope': 'off',
-    'react/display-name': 'off',
-    'react/no-unescaped-entities': 'off',
+    'node/no-callback-literal': 'off', // This convention is dated, and mostly replaced with async/await. It's also much less important with intellisense and typescript.
+    'react/react-in-jsx-scope': 'off', // This should always be off as of React 17 and going forward, and we should sue the new JSX Transform in Typescript 4.1+ (ref: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports)
     'chai-friendly/no-unused-expressions': 'off',
   },
+  overrides: [
+    {
+      files: ['*.spec.tsx', '*.spec.ts'],
+      rules: {
+        'react/display-name': 'off', // display names aren't important in tests, since we won't be debugging, and this is usually just mock components.
+      },
+    },
+  ],
   env: {
     jest: true,
     es6: true,

packages/scene-composer/__mocks__/@awsui/components-react.tsx

@@ -1,6 +1,6 @@
 import mockComponent from '../mockComponent';
 
-const polarisRaw = jest.createMockFromModule('@awsui/components-react');
+const polarisRaw: any = jest.createMockFromModule('@awsui/components-react');
 
 const polaris = Object.keys(polarisRaw).reduce((acc, comp) => {
   if (!comp.startsWith('_')) {

packages/scene-composer/__mocks__/@awsui/design-tokens.ts

@@ -0,0 +1,24 @@
+module.exports = {
+  colorBackgroundContainerContent: 'colorBackgroundContainerContent',
+  colorBackgroundContainerHeader: 'colorBackgroundContainerHeader',
+  colorBackgroundDropdownItemDefault: 'colorBackgroundDropdownItemDefault',
+  colorBackgroundDropdownItemHover: 'colorBackgroundDropdownItemHover',
+  colorBackgroundInputDefault: 'colorBackgroundInputDefault',
+  colorBackgroundInputDisabled: 'colorBackgroundInputDisabled',
+  colorBackgroundItemSelected: 'colorBackgroundItemSelected',
+  colorBackgroundLayoutMain: 'colorBackgroundLayoutMain',
+  colorBackgroundNotificationBlue: 'colorBackgroundNotificationBlue',
+  colorBackgroundNotificationGreen: 'colorBackgroundNotificationGreen',
+  colorBackgroundNotificationRed: 'colorBackgroundNotificationRed',
+  colorBorderButtonNormalDefault: 'colorBorderButtonNormalDefault',
+  colorBorderContainerTop: 'colorBorderContainerTop',
+  colorBorderDividerDefault: 'colorBorderDividerDefault',
+  colorChartsYellow700: 'colorChartsYellow700',
+  colorForegroundControlDefault: 'colorForegroundControlDefault',
+  colorTextBodySecondar: 'colorTextBodySecondary',
+  colorTextFormSecondary: 'colorTextFormSecondary',
+  colorTextHeadingDefault: 'colorTextHeadingDefault',
+  colorTextInputPlaceholder: 'colorTextInputPlaceholder',
+  colorTextLabel: 'colorTextLabel',
+  colorTextNotificationDefault: 'colorTextNotificationDefault',
+}

packages/scene-composer/__mocks__/@react-three/drei.tsx

@@ -0,0 +1,16 @@
+import mockComponent from '../mockComponent';
+
+const dreiRaw: any = jest.createMockFromModule('@react-three/drei');
+
+const drei = Object.keys(dreiRaw).reduce((acc, comp) => {
+  if (!comp.startsWith('_')) {
+    acc[comp] = mockComponent(comp);
+  } else {
+    acc[comp] = dreiRaw[comp];
+  }
+  return acc;
+}, {});
+
+module.exports = {
+  ...drei,
+};

packages/scene-composer/__mocks__/@react-three/postprocessing.tsx

@@ -0,0 +1,4 @@
+module.exports = {
+  EffectComposer: 'EffectComposer',
+  Outline: 'Outline',
+};

packages/scene-composer/__mocks__/react-intl.ts

@@ -0,0 +1,9 @@
+const reactIntl = jest.requireActual('react-intl');
+const intl = reactIntl.createIntl({
+  locale: 'en',
+});
+
+module.exports = {
+  ...reactIntl,
+  useIntl: jest.fn(() => intl),
+};

packages/scene-composer/__mocks__/three.tsx

@@ -0,0 +1,154 @@
+/**
+ * Mock implementation of R3F (React Three Fiber) components with the string name for a clean snapshot test.
+ */
+module.exports = {
+  ...jest.requireActual('three'),
+  audioListener: 'audioListener',
+  positionalAudio: 'positionalAudio',
+
+  mesh: 'mesh',
+  instancedMesh: 'instancedMesh',
+  scene: 'scene',
+  sprite: 'sprite',
+  lOD: 'lOD',
+  skinnedMesh: 'skinnedMesh',
+  skeleton: 'skeleton',
+  bone: 'bone',
+  lineSegments: 'lineSegments',
+  lineLoop: 'lineLoop',
+  points: 'points',
+  group: 'group',
+  immediateRenderObject: 'immediateRenderObject',
+
+  // cameras
+  camera: 'camera',
+  perspectiveCamera: 'perspectiveCamera',
+  orthographicCamera: 'orthographicCamera',
+  cubeCamera: 'cubeCamera',
+  arrayCamera: 'arrayCamera',
+
+  // geometry
+  instancedBufferGeometry: 'instancedBufferGeometry',
+  bufferGeometry: 'bufferGeometry',
+  boxBufferGeometry: 'boxBufferGeometry',
+  circleBufferGeometry: 'circleBufferGeometry',
+  coneBufferGeometry: 'coneBufferGeometry',
+  cylinderBufferGeometry: 'cylinderBufferGeometry',
+  dodecahedronBufferGeometry: 'dodecahedronBufferGeometry',
+  extrudeBufferGeometry: 'extrudeBufferGeometry',
+  icosahedronBufferGeometry: 'icosahedronBufferGeometry',
+  latheBufferGeometry: 'latheBufferGeometry',
+  octahedronBufferGeometry: 'octahedronBufferGeometry',
+  parametricBufferGeometry: 'parametricBufferGeometry',
+  planeBufferGeometry: 'planeBufferGeometry',
+  polyhedronBufferGeometry: 'polyhedronBufferGeometry',
+  ringBufferGeometry: 'ringBufferGeometry',
+  shapeBufferGeometry: 'shapeBufferGeometry',
+  sphereBufferGeometry: 'sphereBufferGeometry',
+  tetrahedronBufferGeometry: 'tetrahedronBufferGeometry',
+  textBufferGeometry: 'textBufferGeometry',
+  torusBufferGeometry: 'torusBufferGeometry',
+  torusKnotBufferGeometry: 'torusKnotBufferGeometry',
+  tubeBufferGeometry: 'tubeBufferGeometry',
+  wireframeGeometry: 'wireframeGeometry',
+  parametricGeometry: 'parametricGeometry',
+  tetrahedronGeometry: 'tetrahedronGeometry',
+  octahedronGeometry: 'octahedronGeometry',
+  icosahedronGeometry: 'icosahedronGeometry',
+  dodecahedronGeometry: 'dodecahedronGeometry',
+  polyhedronGeometry: 'polyhedronGeometry',
+  tubeGeometry: 'tubeGeometry',
+  torusKnotGeometry: 'torusKnotGeometry',
+  torusGeometry: 'torusGeometry',
+  textGeometry: 'textGeometry',
+  sphereGeometry: 'sphereGeometry',
+  ringGeometry: 'ringGeometry',
+  planeGeometry: 'planeGeometry',
+  latheGeometry: 'latheGeometry',
+  shapeGeometry: 'shapeGeometry',
+  extrudeGeometry: 'extrudeGeometry',
+  edgesGeometry: 'edgesGeometry',
+  coneGeometry: 'coneGeometry',
+  cylinderGeometry: 'cylinderGeometry',
+  circleGeometry: 'circleGeometry',
+  boxGeometry: 'boxGeometry',
+
+  // materials
+  material: 'material',
+  shadowMaterial: 'shadowMaterial',
+  spriteMaterial: 'spriteMaterial',
+  rawShaderMaterial: 'rawShaderMaterial',
+  shaderMaterial: 'shaderMaterial',
+  pointsMaterial: 'pointsMaterial',
+  meshPhysicalMaterial: 'meshPhysicalMaterial',
+  meshStandardMaterial: 'meshStandardMaterial',
+  meshPhongMaterial: 'meshPhongMaterial',
+  meshToonMaterial: 'meshToonMaterial',
+  meshNormalMaterial: 'meshNormalMaterial',
+  meshLambertMaterial: 'meshLambertMaterial',
+  meshDepthMaterial: 'meshDepthMaterial',
+  meshDistanceMaterial: 'meshDistanceMaterial',
+  meshBasicMaterial: 'meshBasicMaterial',
+  meshMatcapMaterial: 'meshMatcapMaterial',
+  lineDashedMaterial: 'lineDashedMaterial',
+  lineBasicMaterial: 'lineBasicMaterial',
+
+  // primitive
+  primitive: 'primitive',
+
+  // lights and other
+  light: 'light',
+  spotLightShadow: 'spotLightShadow',
+  spotLight: 'spotLight',
+  pointLight: 'pointLight',
+  rectAreaLight: 'rectAreaLight',
+  hemisphereLight: 'hemisphereLight',
+  directionalLightShadow: 'directionalLightShadow',
+  directionalLight: 'directionalLight',
+  ambientLight: 'ambientLight',
+  lightShadow: 'lightShadow',
+  ambientLightProbe: 'ambientLightProbe',
+  hemisphereLightProbe: 'hemisphereLightProbe',
+  lightProbe: 'lightProbe',
+
+  // helpers
+  spotLightHelper: 'spotLightHelper',
+  skeletonHelper: 'skeletonHelper',
+  pointLightHelper: 'pointLightHelper',
+  hemisphereLightHelper: 'hemisphereLightHelper',
+  gridHelper: 'gridHelper',
+  polarGridHelper: 'polarGridHelper',
+  directionalLightHelper: 'directionalLightHelper',
+  cameraHelper: 'cameraHelper',
+  boxHelper: 'boxHelper',
+  box3Helper: 'box3Helper',
+  planeHelper: 'planeHelper',
+  arrowHelper: 'arrowHelper',
+  axesHelper: 'axesHelper',
+
+  // textures
+  texture: 'texture',
+  videoTexture: 'videoTexture',
+  dataTexture: 'dataTexture',
+  dataTexture3D: 'dataTexture3D',
+  compressedTexture: 'compressedTexture',
+  cubeTexture: 'cubeTexture',
+  canvasTexture: 'canvasTexture',
+  depthTexture: 'depthTexture',
+
+  // misc
+  raycaster: 'raycaster',
+  vector2: 'vector2',
+  vector3: 'vector3',
+  vector4: 'vector4',
+  euler: 'euler',
+  matrix3: 'matrix3',
+  matrix4: 'matrix4',
+  quaternion: 'quaternion',
+  bufferAttribute: 'bufferAttribute',
+  instancedBufferAttribute: 'instancedBufferAttribute',
+  color: 'color',
+  fog: 'fog',
+  fogExp2: 'fogExp2',
+  shape: 'shape',
+};

packages/scene-composer/jest.config.ts

@@ -2,9 +2,7 @@ import merge from 'merge';
 import tsPreset from 'ts-jest/jest-preset';
 import awsuiPreset from '@awsui/jest-preset';
 
-import * as pkg from './package.json';
-
-const jest = pkg.jest;
+import { jest } from './package.json';
 
 export default merge.recursive(tsPreset, awsuiPreset, {
   ...jest,

packages/scene-composer/package.json

@@ -36,7 +36,8 @@
     "test:update": "jest --config jest.config.ts --updateSnapshot",
     "test:unit": "jest --config jest.config.ts",
     "test:watch": "jest --config jest.config.ts --watch",
-    "storybook": "yarn run build-storybook && start-storybook -s ./dist -h 0.0.0.0 -p 6006",
+    "storybook": "start-storybook -s ./dist -h 0.0.0.0 -p 6006",
+    "start": "npm run storybook",
     "build-storybook": "build-storybook",
     "extract-msgs": "formatjs extract 'src/**/*.ts*' --ignore='**/*.d.ts' --out-file translations/IotAppKitSceneComposer.en_US.json --id-interpolation-pattern '[sha512:contenthash:base64:6]' --format tools/totoro-formatter.js",
     "prepare": "cd ../.. && husky install",
@@ -86,6 +87,7 @@
     "enzyme-adapter-react-16": "^1.15.6",
     "eslint-config-standard": "^16.0.3",
     "eslint-config-standard-react": "^11.0.1",
+    "eslint-plugin-jest": "^26.6.0",
     "eslint-plugin-promise": "^4.3.1",
     "eslint-plugin-standard": "^4.1.0",
     "husky": "7.0.4",
@@ -150,10 +152,10 @@
   "jest": {
     "coverageThreshold": {
       "global": {
-        "lines": 87.5,
-        "statements": 87.22,
-        "functions": 85.5,
-        "branches": 71.92,
+        "lines": 77.54,
+        "statements": 76.7,
+        "functions": 76.8,
+        "branches": 63.02,
         "branchesTrue": 100
       }
     }

packages/scene-composer/src/common/GlobalSettings.ts

@@ -1,4 +1,5 @@
-import { COMPOSER_FEATURES, DracoDecoderConfig, FeatureConfig, GetSceneObjectFunction } from '../interfaces';
+import { DracoDecoderConfig, GetSceneObjectFunction } from '../interfaces/sceneViewer';
+import { COMPOSER_FEATURES, FeatureConfig } from '../interfaces';
 import { IMetricRecorder } from '../interfaces/metricRecorder';
 
 const globalSettings: {
@@ -60,7 +61,7 @@ export const setGetSceneObjectFunction = (getSceneObjectFunction: GetSceneObject
   notifySubscribers();
 };
 
-export const getGlobalSettings = (): Readonly<typeof globalSettings> => {
+export const getGlobalSettings = () => {
   return globalSettings;
 };
 

packages/scene-composer/src/common/sceneComposerIdContext.ts

@@ -1,3 +1,7 @@
 import * as React from 'react';
 
 export const sceneComposerIdContext = React.createContext('default');
+
+export const useSceneComposerId = () => {
+  return React.useContext(sceneComposerIdContext);
+};