fix(composer): resize/reposition overlaps on small screens

awslabs · Sep 22, 2023 · 64d3855 · 64d3855
1 parent 2c041c5
commit 64d3855
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 2 deletions.
diff --git a/packages/scene-composer/src/components/three-fiber/SceneInfoView.tsx b/packages/scene-composer/src/components/three-fiber/SceneInfoView.tsx
@@ -7,6 +7,8 @@ import * as THREE from 'three';
 import { sceneComposerIdContext } from '../../common/sceneComposerIdContext';
 import { useStore } from '../../store';
 
+const SCENE_INFO_VIEW_WIDTH = 140; //in px
+
 const i18nSceneStatsStrings = defineMessages({
   Vertices: {
     defaultMessage: 'Vertices : {sceneInfoVertices, number}',
@@ -77,7 +79,7 @@ export function SceneInfoView() {
     <Html
       calculatePosition={calculatePosition}
       style={{
-        width: '140px',
+        width: `${SCENE_INFO_VIEW_WIDTH}px`,
         height: '100px',
         paddingLeft: '16px',
         paddingTop: '8px',
@@ -107,10 +109,52 @@ export function SceneInfoView() {
   );
 }
 
+//Use three.js lerpVectors function to handle the interpolation calculation.
+//We only need one dimension but have to provide 3 for three.js to be satisfied,
+// so we are ignoring y and z dimensions.
+const interpolateBetween = (point1: number, point2: number, factor: number) => {
+  const firstPoint = new THREE.Vector3(point1, 0, 0);
+  const secondPoint = new THREE.Vector3(point2, 0, 0);
+  const lerpPoint = new THREE.Vector3();
+
+  return lerpPoint.lerpVectors(firstPoint, secondPoint, factor).x;
+};
+
+//For wide screens (> 600px wide), position the scene info 300px away from the right edge of the scene.
+//For small screens (< 300px wide), position the scene info right against the edge of the scene
+//For screens in between, use a linear interpolation to smooth out the transition
 function calculatePosition(
   el: THREE.Object3D,
   camera: THREE.Camera,
   size: { width: number; height: number },
 ): number[] {
-  return [size.width - 300, size.height - 120];
+  const wideScreenWidthPixels = 600;
+  const compactScreenWidthPixels = 300;
+
+  const standardHorizontalDisplacementPixels = 300;
+  const compactHorizontalDisplacementPixels = SCENE_INFO_VIEW_WIDTH;
+  const standardVerticleDisplacementPixels = 120;
+
+  const standardHorizontalPosition = size.width - standardHorizontalDisplacementPixels;
+  const compactHorizontalPosition = size.width - compactHorizontalDisplacementPixels;
+  const standardVerticlePosition = size.height - standardVerticleDisplacementPixels;
+
+  if (size.width > wideScreenWidthPixels) {
+    return [standardHorizontalPosition, standardVerticlePosition];
+  } else if (size.width > compactScreenWidthPixels) {
+    const interpolationFactor =
+      (size.width - compactScreenWidthPixels) / (wideScreenWidthPixels - compactScreenWidthPixels);
+
+    return [
+      size.width -
+        interpolateBetween(
+          compactHorizontalDisplacementPixels,
+          standardHorizontalDisplacementPixels,
+          interpolationFactor,
+        ),
+      standardVerticlePosition,
+    ];
+  } else {
+    return [compactHorizontalPosition, standardVerticlePosition];
+  }
 }
diff --git a/...s/scene-composer/src/components/toolbars/common/__snapshots__/ItemContainer.spec.tsx.snap b/...s/scene-composer/src/components/toolbars/common/__snapshots__/ItemContainer.spec.tsx.snap
@@ -20,6 +20,7 @@ exports[`ItemContainer should render properly and trigger onClick when clicking
   justify-content: flex-start;
   min-width: 40px;
   height: 40px;
+  max-height: 10vh;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -70,6 +71,7 @@ exports[`ItemContainer should render properly and trigger onClick when clicking
   justify-content: flex-start;
   min-width: 40px;
   height: 40px;
+  max-height: 10vh;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -104,6 +106,7 @@ exports[`ItemContainer should render properly and trigger onClick when clicking
   justify-content: flex-start;
   min-width: 40px;
   height: 40px;
+  max-height: 10vh;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: default;
@@ -335,6 +338,7 @@ exports[`ItemContainer should render selected item properly with custom menuHeig
   justify-content: flex-start;
   min-width: 40px;
   height: 100px;
+  max-height: 100px;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: default;
@@ -376,6 +380,7 @@ exports[`ItemContainer should render when feature is enabled 1`] = `
   justify-content: flex-start;
   min-width: 40px;
   height: 40px;
+  max-height: 10vh;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;

diff --git a/packages/scene-composer/src/components/toolbars/common/styledComponents.ts b/packages/scene-composer/src/components/toolbars/common/styledComponents.ts
@@ -49,6 +49,7 @@ export const ToolbarItemContainer = styled.div<
   justify-content: flex-start;
   min-width: 40px;
   height: ${({ height }) => height || '40px'};
+  max-height: ${({ height }) => height || '10vh'};
   text-decoration: none;
   cursor: ${({ isDisabled, isSelected }) => (isDisabled || isSelected ? 'default' : 'pointer')};
   pointer-events: ${({ isDisabled, isSelected }) => (isDisabled || isSelected ? 'none' : 'initial')};

diff --git a/packages/scene-composer/src/layouts/SceneLayout/__snapshots__/SceneLayout.spec.tsx.snap b/packages/scene-composer/src/layouts/SceneLayout/__snapshots__/SceneLayout.spec.tsx.snap
@@ -1331,6 +1331,7 @@ exports[`SceneLayout should render correctly in Viewing mode 1`] = `
   justify-content: flex-start;
   min-width: 40px;
   height: 40px;
+  max-height: 10vh;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -1365,6 +1366,7 @@ exports[`SceneLayout should render correctly in Viewing mode 1`] = `
   justify-content: flex-start;
   min-width: 40px;
   height: 40px;
+  max-height: 10vh;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: default;
@@ -1863,6 +1865,7 @@ exports[`SceneLayout should render correctly in Viewing mode with modal 1`] = `
   justify-content: flex-start;
   min-width: 40px;
   height: 40px;
+  max-height: 10vh;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -1897,6 +1900,7 @@ exports[`SceneLayout should render correctly in Viewing mode with modal 1`] = `
   justify-content: flex-start;
   min-width: 40px;
   height: 40px;
+  max-height: 10vh;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: default;