[SubModelSelection] - Made updates to sub model selection system to a…

…lign with UX (#57)

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

packages/scene-composer/.storybook/main.js

@@ -10,7 +10,7 @@ module.exports = {
     'storybook-addon-toolbar-actions/register',
     'storybook-svgr-react-component'
   ],
-
+  staticDirs: ['../dist'],
   typescript: {
     // also valid 'react-docgen-typescript' | false
 
@@ -27,14 +27,19 @@ module.exports = {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
     // 'PRODUCTION' is used when building the static version of storybook.
-
     // Make whatever fine-grained changes you need
     config.module.rules.push({
       test: /(translations).*\.json$/,
       loader: path.resolve(__dirname, '../tools/totoro-loader.js'),
       /*options: {
         type: "module",
       },*/
+    }, {
+      test: /\.hdr$/,
+      loader: 'file-loader',
+      options: {
+        name: '[path][name].[ext]'
+      }
     });
     // Return the altered config
     return config;

packages/scene-composer/__mocks__/fileMock.ts

@@ -0,0 +1 @@
+export default 'test-file-stub';

packages/scene-composer/jest.config.ts

@@ -34,9 +34,9 @@ export default merge.recursive(tsPreset, awsuiPreset, {
   moduleDirectories: ['node_modules', '<rootDir>'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   moduleNameMapper: {
-    '\\.svg': '<rootDir>/tests/__mocks__/svg.js',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-      '<rootDir>/tests/__mocks__/fileMock.js',
+    '\\.svg': '<rootDir>/__mocks__/svg.ts',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|hdr)$':
+      '<rootDir>/__mocks__/fileMock.ts',
     '\\.(css|less|scss)$': 'identity-obj-proxy',
   },
   testEnvironment: 'jsdom',

packages/scene-composer/package.json

@@ -36,7 +36,7 @@
     "test:update": "jest --config jest.config.ts --updateSnapshot",
     "test:unit": "jest --config jest.config.ts",
     "test:watch": "jest --config jest.config.ts --watch",
-    "storybook": "start-storybook -s ./dist -h 0.0.0.0 -p 6006",
+    "storybook": "npm run copy-assets && start-storybook -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",
@@ -136,7 +136,6 @@
     "react-dnd": "^15.1.2",
     "react-dnd-html5-backend": "^15.1.3",
     "react-error-boundary": "^3.1.3",
-    "react-image-tint": "^1.0.2",
     "react-intl": "5.24.1",
     "string-to-arraybuffer": "1.0.2",
     "styled-components": "^5.3.0",
@@ -152,10 +151,10 @@
   "jest": {
     "coverageThreshold": {
       "global": {
-        "lines": 77.4,
-        "statements": 76.5,
-        "functions": 76.4,
-        "branches": 62.9,
+        "lines": 76.85,
+        "statements": 75.98,
+        "functions": 75.29,
+        "branches": 62.1,
         "branchesTrue": 100
       }
     }

packages/scene-composer/src/components/Tree/TreeItem.tsx

@@ -1,6 +1,8 @@
 import { Button, Checkbox } from '@awsui/components-react';
 import React, { ComponentPropsWithRef, FC, ReactNode, useCallback } from 'react';
 
+import { ReactComponent as HierarchyLine } from './hierarchy-lines.svg';
+
 export type SelectionMode = 'single' | 'multi';
 
 interface TreeItemInnerProps {
@@ -79,11 +81,13 @@ const TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(
       >
         <TreeItemInner selected={selected} selectable={selectable} onActivated={onActivated} onSelected={onSelected}>
           {expandable && (
-            <Button
-              variant='inline-icon'
-              onClick={expandHandler}
-              iconName={`treeview-${expanded ? 'collapse' : 'expand'}`}
-            />
+            <>
+              <Button
+                variant='inline-icon'
+                onClick={expandHandler}
+                iconName={`treeview-${expanded ? 'collapse' : 'expand'}`}
+              />
+            </>
           )}
           {labelText}
         </TreeItemInner>

packages/scene-composer/src/components/Tree/tree.scss

@@ -46,6 +46,16 @@ $indent: 1rem;
       border-top: 1px solid transparent; // Invisible space to avoid jiggling
       border-bottom: $border;
       cursor: pointer;
+
+      label {
+        display: block;
+        width: 100%;
+
+        div {
+          width: 100%;
+        }
+      }
+
       /*
       There really shouldn't be this much nesting or the UI will be pretty broken. But in the event where I'm wrong,
       and a customer complains that the borders and hover state are a tad off in rediculously nested trees, you can add a 0 to the next 2

packages/scene-composer/src/components/VisibilityToggle/index.tsx

@@ -0,0 +1,31 @@
+import React, { FC, useCallback } from 'react';
+import { Button, ButtonProps } from '@awsui/components-react';
+
+import { ReactComponent as ShowIcon } from '../../assets/icons/show.svg';
+
+import './visibility-toggle.scss';
+
+interface VisibilityToggleProps extends ButtonProps {
+  visible?: boolean;
+  onToggle?: (visible: boolean) => void;
+}
+
+const VisibilityToggle: FC<VisibilityToggleProps> = ({ visible = true, onToggle = () => {}, ...props }) => {
+  const onToggleHandler = useCallback(() => {
+    onToggle(!visible);
+  }, [visible]);
+
+  return (
+    <Button
+      {...props}
+      onClick={onToggleHandler}
+      variant={'inline-icon'}
+      className={`tm-visibility-toggle ${visible ? 'visible' : ''}`.trim()}
+      iconSvg={<ShowIcon />}
+    />
+  );
+};
+
+VisibilityToggle.displayName = 'ShowHideButton';
+
+export default VisibilityToggle;

packages/scene-composer/src/components/VisibilityToggle/visibility-toggle.scss

@@ -0,0 +1,15 @@
+.tm-visibility-toggle {
+  svg {
+    stroke-width: 1px !important;
+  }
+
+  &.visible {
+    .show_svg__center-dot {
+      display: block;
+    }
+  }
+
+  .show_svg__center-dot {
+    display: none;
+  }
+}

packages/scene-composer/src/components/WebGLCanvasManager.tsx

@@ -16,7 +16,7 @@ import { ViewCursorWidget } from '../augmentations/components/three-fiber/viewpo
 import { getIntersectionTransform } from '../utils/raycastUtils';
 import { createNodeWithTransform } from '../utils/nodeUtils';
 
-import { Environment, presetsObj } from './three-fiber/Environment';
+import Environment, { presets } from './three-fiber/Environment';
 import { StatsWindow } from './three-fiber/StatsWindow';
 import EntityGroup from './three-fiber/EntityGroup';
 import { EditorMainCamera } from './three-fiber/EditorCamera';
@@ -84,8 +84,8 @@ export const WebGLCanvasManager: React.FC = () => {
   }, [highlightedSceneNodeRef]);
 
   useEffect(() => {
-    if (!!environmentPreset && !(environmentPreset in presetsObj)) {
-      log?.error('Environment preset must be one of: ' + Object.keys(presetsObj).join(', '));
+    if (!!environmentPreset && !(environmentPreset in presets)) {
+      log?.error('Environment preset must be one of: ' + Object.keys(presets).join(', '));
     }
   }, [environmentPreset]);
 
@@ -144,15 +144,15 @@ export const WebGLCanvasManager: React.FC = () => {
       <EditorMainCamera />
       {immersiveFeatureEnabled ? <ImmersiveViewCamera /> : null}
       <ImmersiveView />
-      {environmentPreset in presetsObj && <Environment preset={environmentPreset} />}
+      {environmentPreset in presets && <Environment preset={environmentPreset} />}
       <group name={ROOT_OBJECT_3D_NAME} dispose={null}>
         {rootNodeRefs &&
           rootNodeRefs.map((rootNodeRef) => {
             const node = getSceneNodeByRef(rootNodeRef);
             return node && <EntityGroup key={rootNodeRef} node={node} />;
           })}
       </group>
-      {/* 
+      {/*
         There is a race condition when, if requent prop update happened before the whole component
         is mounted, then rerendering the Outline component may result in too many webgl context created,
         and eventually getting error related to context lost.

packages/scene-composer/src/components/__snapshots__/SceneComposerInternal.spec.tsx.snap

@@ -152,7 +152,7 @@ exports[`SceneComposerInternal should render both valid and invalid scene correc
       />
     }
     showModal={false}
-    topBar={false}
+    topBar={<TopBar />}
   />
 </div>
 `;
@@ -198,7 +198,7 @@ exports[`SceneComposerInternal should render correctly with a valid scene in edi
     />
   }
   showModal={false}
-  topBar={false}
+  topBar={<TopBar />}
 />
 `;
 
@@ -459,7 +459,7 @@ exports[`SceneComposerInternal should support rendering multiple valid scenes 1`
       />
     }
     showModal={false}
-    topBar={false}
+    topBar={<TopBar />}
   />
   <StaticLayout
     header={<MenuBar />}