[MI-1594]: flip cube and visualizer orientation

Sienci-Labs · Jan 27, 2025 · e1c1610 · e1c1610
1 parent 6d21b9d
commit e1c1610
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 13 deletions.
diff --git a/src/app/src/features/Visualizer/CameraDisplay/CameraDisplay.jsx b/src/app/src/features/Visualizer/CameraDisplay/CameraDisplay.jsx
@@ -58,16 +58,16 @@ class CameraDisplay extends PureComponent {
                         }}
                     />
                     <button
-                        title={i18n._('Right')}
+                        title={i18n._('Left')}
                         type="button"
                         tabIndex={0}
                         className={
-                            cameraPosition === 'Right'
-                                ? `${styles.faceRightActive}`
-                                : `${styles.faceRight}`
+                            cameraPosition === 'Left'
+                                ? `${styles.faceLeftActive}`
+                                : `${styles.faceLeft}`
                         }
                         onClick={(event) => {
-                            camera.toRightSideView();
+                            camera.toLeftSideView();
                         }}
                     />
                     <button
@@ -107,16 +107,16 @@ class CameraDisplay extends PureComponent {
                         className={styles.cornerC2}
                     />
                     <button
-                        title={i18n._('Left')}
+                        title={i18n._('Right')}
                         type="button"
                         tabIndex={0}
                         className={
-                            cameraPosition === 'Left'
+                            cameraPosition === 'Right'
                                 ? `${styles.cornerC2Active}`
                                 : `${styles.cornerC2}`
                         }
                         onClick={(event) => {
-                            camera.toLeftSideView();
+                            camera.toRightSideView();
                         }}
                     />
 

diff --git a/src/app/src/features/Visualizer/CameraDisplay/index.module.styl b/src/app/src/features/Visualizer/CameraDisplay/index.module.styl
@@ -43,6 +43,7 @@
 }
 
 .faceTop {
+    transform: scale(-1, 1);
     clip-path: polygon(
         67% 34%,
         49.5% 36.5%,
@@ -68,6 +69,7 @@
 }
 
 .faceTopActive {
+    transform: scale(-1, 1);
     clip-path: polygon(
         67% 34%,
         49.5% 36.5%,
@@ -88,7 +90,8 @@
     outline: none;
 }
 
-.faceRight {
+.faceLeft {
+    transform: scale(-1, 1);
     clip-path: polygon(
         93.5% 80%,
         74% 96%,
@@ -113,7 +116,8 @@
     }
 }
 
-.faceRightActive {
+.faceLeftActive {
+    transform: scale(-1, 1);
     clip-path: polygon(
         93.5% 80%,
         74% 96%,
@@ -135,6 +139,7 @@
 }
 
 .faceFront {
+    transform: scale(-1, 1);
     clip-path: polygon(
         11.2% 37.2%,
         0.5% 44.2%,
@@ -160,6 +165,7 @@
 }
 
 .faceFrontActive {
+    transform: scale(-1, 1);
     clip-path: polygon(
         11.2% 37.2%,
         0.5% 44.2%,
@@ -181,6 +187,7 @@
 }
 
 .faceIso {
+    transform: scale(-1, 1);
     clip-path: polygon(
         69.8% 35.5%,
         73% 39.5%,
@@ -204,6 +211,7 @@
 }
 
 .faceIsoActive {
+    transform: scale(-1, 1);
     clip-path: polygon(
         69.8% 35.5%,
         73% 39.5%,
@@ -223,6 +231,7 @@
 }
 
 .cornerC1 {
+    transform: scale(-1, 1);
     clip-path: polygon(63.2% 99.5%, 49% 99.5%, 60.2% 92%, 65% 91.8%, 72% 97%);
     position: absolute;
     background-color: white;
@@ -240,6 +249,7 @@
 }
 
 .cornerC2 {
+    transform: scale(-1, 1);
     clip-path: polygon(1% 41.5%, 2.8% 29.5%, 9.3% 21%, 14.5% 30%, 13% 33.5%);
     position: absolute;
     background-color: white;
@@ -256,6 +266,7 @@
 }
 
 .cornerC2Active {
+    transform: scale(-1, 1);
     clip-path: polygon(1% 41.5%, 2.8% 29.5%, 9.3% 21%, 14.5% 30%, 13% 33.5%);
     position: absolute;
     background-color: #059669;
@@ -268,6 +279,7 @@
 }
 
 .cornerC3 {
+    transform: scale(-1, 1);
     clip-path: polygon(99% 29%, 92% 22.5%, 90% 20%, 85% 11.5%, 94% 19%);
     position: absolute;
     background-color: white;

diff --git a/src/app/src/features/Visualizer/Visualizer.jsx b/src/app/src/features/Visualizer/Visualizer.jsx
@@ -1346,7 +1346,7 @@ class Visualizer extends Component {
         //Set default camera position to 3D
         this.camera.up.set(0, 0, 1);
         this.camera.position.set(
-            CAMERA_DISTANCE,
+            -CAMERA_DISTANCE,
             -CAMERA_DISTANCE,
             CAMERA_DISTANCE,
         );
@@ -2268,7 +2268,7 @@ class Visualizer extends Component {
 
         this.camera.up.set(0, 0, 1);
         this.camera.position.set(
-            CAMERA_DISTANCE,
+            -CAMERA_DISTANCE,
             -CAMERA_DISTANCE,
             CAMERA_DISTANCE,
         );

diff --git a/src/app/src/workspace/index.tsx b/src/app/src/workspace/index.tsx
@@ -7,7 +7,7 @@ type Props = {
 
 const Workspace = ({ children }: Props) => {
     return (
-        <div className="flex flex-col h-full overflow-y-clip no-scrollbar">
+        <div className="flex flex-col h-full ">
             <TopBar />
 
             <div className="flex h-full no-scrollbar">