fix(CameraView): Minimum FOV check introduced (#284)

awslabs · Oct 20, 2022 · 720b8e8 · 720b8e8
1 parent c74d1dc
commit 720b8e8
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 4 deletions.
diff --git a/packages/scene-composer/package.json b/packages/scene-composer/package.json
@@ -154,10 +154,10 @@
   "jest": {
     "coverageThreshold": {
       "global": {
-        "lines": 77.47,
-        "statements": 76.6,
+        "lines": 77.48,
+        "statements": 76.61,
         "functions": 77.57,
-        "branches": 63.58,
+        "branches": 63.62,
         "branchesTrue": 100
       }
     }

diff --git a/...ages/scene-composer/src/components/panels/scene-components/CameraComponentEditor.spec.tsx b/...ages/scene-composer/src/components/panels/scene-components/CameraComponentEditor.spec.tsx
@@ -107,6 +107,21 @@ describe('CameraComponentEditor', () => {
     expect(innerHTML.includes(`${expectedCamera.getFocalLength().toFixed(2)}mm`)).toEqual(true);
   });
 
+  it('should not update if FOV is below the minimum value', () => {
+    useStore('default').setState(baseState);
+
+    const { container } = render(<CameraComponentEditor node={mockNode} component={cameraComponent} />);
+
+    const polarisWrapper = wrapper(container);
+    const input = polarisWrapper.find('[data-testid="camera-fov-field"]')?.findInput();
+
+    expect(input).not.toBeUndefined();
+    input!.focus();
+    input!.setInputValue('1');
+    input!.blur();
+    expect(updateComponentInternalFn).not.toBeCalled();
+  });
+
   it('should update camera node when updating far', () => {
     useStore('default').setState(baseState);
 

diff --git a/packages/scene-composer/src/components/panels/scene-components/CameraComponentEditor.tsx b/packages/scene-composer/src/components/panels/scene-components/CameraComponentEditor.tsx
@@ -31,6 +31,8 @@ const CameraComponentEditor: React.FC<ICameraComponentEditorProps> = ({
   const updateSceneNodeInternal = useStore(sceneComposerId)((state) => state.updateSceneNodeInternal);
   const getObject3DBySceneNodeRef = useStore(sceneComposerId)((state) => state.getObject3DBySceneNodeRef);
 
+  const [fovError, setFovError] = useState<boolean>(false);
+
   const cameraComponent = component as ICameraComponentInternal;
 
   const focalLengthIntlMessages = {
@@ -306,7 +308,17 @@ const CameraComponentEditor: React.FC<ICameraComponentEditorProps> = ({
               {intl.formatMessage({ defaultMessage: 'FOV', description: 'Form field label' })}
             </div>
           </TextContent>
-          <FormField data-testid={'camera-fov-field'}>
+          <FormField
+            data-testid={'camera-fov-field'}
+            errorText={
+              fovError
+                ? intl.formatMessage({
+                    defaultMessage: 'FOV cannot be less than 10',
+                    description: 'Form field errorText',
+                  })
+                : undefined
+            }
+          >
             <NumericInput
               value={cameraSettings.fov!}
               toStr={(val) => val.toFixed(2)}
@@ -317,6 +329,9 @@ const CameraComponentEditor: React.FC<ICameraComponentEditorProps> = ({
                     fov: value,
                   });
 
+                  setFovError(value < 10);
+                  if (value < 10) return;
+
                   updateSettings(updatedSettings);
                 }
               }, [])}

diff --git a/packages/scene-composer/translations/IotAppKitSceneComposer.en_US.json b/packages/scene-composer/translations/IotAppKitSceneComposer.en_US.json
@@ -303,6 +303,10 @@
     "note": "75mm lens",
     "text": "75mm"
   },
+  "NXP1Hm": {
+    "note": "Form field errorText",
+    "text": "FOV cannot be less than 10"
+  },
   "Nj6Ob1": {
     "note": "Select Color type option",
     "text": "Define arrow color"