feat(composer): update overlay UI and flow

awslabs · Apr 5, 2023 · 5bf75aa · 5bf75aa
1 parent bb9d48a
commit 5bf75aa
Show file tree

Hide file tree

Showing 49 changed files with 3,181 additions and 385 deletions.
diff --git a/packages/scene-composer/package.json b/packages/scene-composer/package.json
@@ -46,7 +46,7 @@
     "convert-svg": "npx @svgr/cli --out-dir src/assets/auto-gen/icons/ --typescript --index-template tools/index-template.js -- src/assets/icons/",
     "release": "run-s compile copy-assets",
     "copy-assets": "copyfiles -e \"**/*.tsx\" -e \"**/*.ts\" -e \"**/*.snap\" -e \"**/*.js\" -e \"**/*.jsx\" -e \"**/*.json\" \"src/**/*\" dist/",
-    "lint": "eslint . --max-warnings=811",
+    "lint": "eslint . --max-warnings=795",
     "fix": "eslint --fix .",
     "test": "jest --config jest.config.ts --coverage --silent",
     "test:dev": "jest --config jest.config.ts --coverage",

diff --git a/packages/scene-composer/public/overlay.scene.json b/packages/scene-composer/public/overlay.scene.json
@@ -9,8 +9,8 @@
         "overlayPanelVisible": true
       },
       "Tag": {
-        "autoRescale": true,
-        "scale": 2
+        "autoRescale": false,
+        "scale": 1
       }
     },
     "dataBindingConfig": {
@@ -304,8 +304,8 @@
       "transform": {
         "position": [
           0,
-          0,
-          0.25
+          -1,
+          -7
         ],
         "rotation": [
           0,
@@ -361,12 +361,12 @@
 
       },
       "components": [
+        {
+          "type": "Tag"
+        },
         {
           "type": "DataOverlay",
           "subType": "OverlayPanel",
-          "config": {
-            "isPinned": true
-          },
           "valueDataBindings": [
             {
               "bindingName": "binding a",
@@ -424,12 +424,12 @@
 
       },
       "components": [
+        {
+          "type": "Tag"
+        },
         {
           "type": "DataOverlay",
           "subType": "OverlayPanel",
-          "config": {
-            "isPinned": false
-          },
           "valueDataBindings": [
             {
               "bindingName": "binding a",

diff --git a/packages/scene-composer/public/scene_1.scene.json b/packages/scene-composer/public/scene_1.scene.json
@@ -351,12 +351,12 @@
 
       },
       "components": [
+        {
+          "type": "Tag"
+        },
         {
           "type": "DataOverlay",
           "subType": "OverlayPanel",
-          "config": {
-            "isPinned": true
-          },
           "valueDataBindings": [
             {
               "bindingName": "binding a",

diff --git a/packages/scene-composer/src/augmentations/components/three-fiber/anchor/AnchorWidget.tsx b/packages/scene-composer/src/augmentations/components/three-fiber/anchor/AnchorWidget.tsx
@@ -21,7 +21,7 @@ import {
   SceneResourceType,
   SelectedAnchor,
 } from '../../../../interfaces';
-import { IAnchorComponentInternal, ISceneNodeInternal, useStore } from '../../../../store';
+import { IAnchorComponentInternal, ISceneNodeInternal, useStore, useViewOptionState } from '../../../../store';
 import { sceneComposerIdContext } from '../../../../common/sceneComposerIdContext';
 import { dataBindingValuesProvider, ruleEvaluator } from '../../../../utils/dataBindingUtils';
 import { applyDataBindingTemplate } from '../../../../utils/dataBindingTemplateUtils';
@@ -66,6 +66,8 @@ export function AsyncLoadedAnchorWidget({
     return tagSettings.autoRescale;
   }, [tagSettings.autoRescale]);
 
+  const tagVisible = useViewOptionState(sceneComposerId).componentVisibilities[KnownComponentType.Tag];
+
   const onWidgetClick = useStore(sceneComposerId)((state) => state.getEditorConfig().onWidgetClick);
   const getObject3DFromSceneNodeRef = useStore(sceneComposerId)((state) => state.getObject3DBySceneNodeRef);
 
@@ -95,7 +97,7 @@ export function AsyncLoadedAnchorWidget({
 
   // Evaluate visual state based on data binding
   const visualState = useMemo(() => {
-    const values: Record<string, any> = dataBindingValuesProvider(dataInput, valueDataBinding, dataBindingTemplate);
+    const values: Record<string, unknown> = dataBindingValuesProvider(dataInput, valueDataBinding, dataBindingTemplate);
     const ruleTarget = ruleEvaluator(defaultIcon, values, rule);
     const ruleTargetInfo = getSceneResourceInfo(ruleTarget as string);
     // Anchor widget only accepts icon, otherwise, default to Info icon
@@ -224,7 +226,7 @@ export function AsyncLoadedAnchorWidget({
   }
 
   return (
-    <group ref={rootGroupRef}>
+    <group ref={rootGroupRef} visible={tagVisible}>
       <group scale={finalScale}>
         <lineSegments ref={linesRef}>
           <lineBasicMaterial color='#ffffff' />

diff --git a/...-composer/src/augmentations/components/three-fiber/anchor/__tests__/AnchorWidget.spec.tsx b/...-composer/src/augmentations/components/three-fiber/anchor/__tests__/AnchorWidget.spec.tsx
@@ -4,12 +4,12 @@ import * as THREE from 'three';
 import { useLoader } from '@react-three/fiber';
 
 import { AnchorWidget } from '../AnchorWidget';
-import { DefaultAnchorStatus, DEFAULT_TAG_GLOBAL_SETTINGS } from '../../../../..';
-import { useStore } from '../../../../../store';
+import { DefaultAnchorStatus, DEFAULT_TAG_GLOBAL_SETTINGS, KnownComponentType } from '../../../../..';
+import { ISceneNodeInternal, useStore } from '../../../../../store';
 import useTagSettings from '../../../../../hooks/useTagSettings';
 
 jest.mock('../../common/SvgIconToWidgetSprite', () =>
-  jest.fn(((data, name, alwaysVisible, props) => <div data-test-id={name} {...props} />) as any),
+  jest.fn((_, name, __, props) => <div data-test-id={name} {...props} />),
 );
 
 jest.mock('../../../../../hooks/useTagSettings', () => jest.fn());
@@ -31,30 +31,47 @@ describe('AnchorWidget', () => {
   const setSelectedSceneNodeRef = jest.fn();
   const getObject3DBySceneNodeRef = jest.fn();
 
-  const node = {
+  const node: ISceneNodeInternal = {
     ref: 'test-ref',
+    name: 'node',
+    childRefs: [],
+    transformConstraint: {},
     properties: {},
     components: [
       {
+        ref: 'ref',
         type: 'Tag',
       },
     ],
     transform: {
+      position: [1, 1, 1],
+      rotation: [1, 1, 1],
       scale: [1, 1, 1],
     },
   };
 
-  const setStore = (selectedSceneNodeRef: string, highlightedSceneNodeRef: string, isViewing = true) => {
+  const setStore = (
+    selectedSceneNodeRef: string,
+    highlightedSceneNodeRef: string,
+    isViewing = true,
+    tagVisible = true,
+  ) => {
     useStore('default').setState({
       selectedSceneNodeRef,
       setSelectedSceneNodeRef,
       highlightedSceneNodeRef,
       setHighlightedSceneNodeRef: setHighlightedSceneNodeRef,
       isViewing: () => isViewing,
       getEditorConfig: () => ({ onWidgetClick }),
-      dataInput: 'dataInput' as any,
+      dataInput: { dataFrames: [], timeRange: { from: 0, to: 1 } },
       getObject3DBySceneNodeRef,
-    } as any);
+      noHistoryStates: {
+        componentVisibilities: { [KnownComponentType.Tag]: tagVisible },
+        toggleComponentVisibility: jest.fn(),
+        setTagSettings: jest.fn(),
+        setMatterportViewerEnabled: jest.fn(),
+      },
+    });
   };
 
   beforeEach(() => {
@@ -69,20 +86,10 @@ describe('AnchorWidget', () => {
     act(() => {
       renderer.create(
         <AnchorWidget
-          node={
-            {
-              ref: 'other-ref',
-              properties: {},
-              components: [
-                {
-                  type: 'Tag',
-                },
-              ],
-              transform: {
-                scale: [1, 1, 1],
-              },
-            } as any
-          }
+          node={{
+            ...node,
+            ref: 'other-ref',
+          }}
           defaultIcon={DefaultAnchorStatus.Info}
         />,
       );
@@ -92,53 +99,48 @@ describe('AnchorWidget', () => {
 
   it('should render correctly', () => {
     setStore('test-ref', 'test-ref');
-    const container = renderer.create(<AnchorWidget node={node as any} defaultIcon={DefaultAnchorStatus.Info} />);
+    const container = renderer.create(<AnchorWidget node={node} defaultIcon={DefaultAnchorStatus.Info} />);
 
     expect(container).toMatchSnapshot();
   });
 
   it('should render correctly with non default tag settings', () => {
     setStore('test-ref', 'test-ref');
     (useTagSettings as jest.Mock).mockReturnValue({ scale: 3, autoRescale: true });
-    const container = renderer.create(<AnchorWidget node={node as any} defaultIcon={DefaultAnchorStatus.Info} />);
+    const container = renderer.create(<AnchorWidget node={node} defaultIcon={DefaultAnchorStatus.Info} />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render correctly when not visible', () => {
+    setStore('test-ref', 'test-ref', true, false);
+    const container = renderer.create(<AnchorWidget node={node} defaultIcon={DefaultAnchorStatus.Info} />);
 
     expect(container).toMatchSnapshot();
   });
 
   it('should render correctly with an offset', () => {
     setStore('test-ref', 'test-ref');
-    const node = {
-      ref: 'test-ref',
-      properties: {},
+    const offsetNode = {
+      ...node,
       components: [
         {
+          ref: 'ref',
           type: 'Tag',
           offset: [1, 0, 1],
         },
       ],
-      transform: {
-        scale: [1, 1, 1],
-      },
     };
-    const container = renderer.create(<AnchorWidget node={node as any} defaultIcon={DefaultAnchorStatus.Info} />);
+    const container = renderer.create(<AnchorWidget node={offsetNode} defaultIcon={DefaultAnchorStatus.Info} />);
 
     expect(container).toMatchSnapshot();
   });
 
   it('should render with a countered size when parent is scaled', () => {
     setStore('test-ref', 'test-ref');
-    const node = {
-      ref: 'test-ref',
-      properties: {},
+    const nodeWithParent = {
+      ...node,
       parentRef: 'parent-ref',
-      components: [
-        {
-          type: 'Tag',
-        },
-      ],
-      transform: {
-        scale: [1, 1, 1],
-      },
     };
 
     const parent = new THREE.Group();
@@ -158,7 +160,10 @@ describe('AnchorWidget', () => {
 
     let container;
     act(() => {
-      container = renderer.create(<AnchorWidget node={node as any} defaultIcon={DefaultAnchorStatus.Info} />, options);
+      container = renderer.create(
+        <AnchorWidget node={nodeWithParent} defaultIcon={DefaultAnchorStatus.Info} />,
+        options,
+      );
     });
 
     expect(container).toMatchSnapshot();
@@ -167,7 +172,7 @@ describe('AnchorWidget', () => {
   it('should not call onWidgetClick if not viewing', () => {
     setStore('test-ref', 'test-ref', false);
     act(() => {
-      renderer.create(<AnchorWidget node={node as any} defaultIcon={DefaultAnchorStatus.Info} />);
+      renderer.create(<AnchorWidget node={node} defaultIcon={DefaultAnchorStatus.Info} />);
     });
     expect(onWidgetClick).not.toBeCalled();
   });