@archvisioninc/canvas 2.2.17 → 2.3.1

package/dist/actions/shortcutActions.js

@@ -120,8 +120,8 @@ export const toggleBoundingBoxWidget = () => {
     guiTexture.getControlByName(dimension.label)?.dispose?.();
     guiTexture.getControlByName(dimension.container)?.dispose?.();
   });
-  resetManagerGizmos(GIZMOS.BoundingBoxGizmo);
   if (!gizmoManager.boundingBoxGizmoEnabled) {
+    resetManagerGizmos(GIZMOS.BoundingBoxGizmo);
     gizmoManager.attachToMesh(boundingMesh);
   }
   gizmoManager.boundingBoxGizmoEnabled = !isEnabled;
@@ -261,7 +261,7 @@ export const modelToOrigin = sourceUnitScaleOperation => {
   const parentList = [];
   const handleBoundingBox = () => {
     const newBox = createBoundingMesh();
-    if (boundingBoxEnabled) toggleBoundingBoxWidget();
+    if (boundingBoxEnabled && !sourceUnitScaleOperation) toggleBoundingBoxWidget();
     if (gizmoManager.boundingBoxGizmoEnabled) gizmoManager.attachToMesh(newBox);
     resetManagerGizmos(GIZMOS.BoundingBoxGizmo);
   };

package/dist/helpers/canvasUpdateHelpers.js

@@ -1,5 +1,4 @@
-/* eslint-disable */
-import { getUserMeshes, resetSelectedMeshes, addNewMesh, scene, mirrorGround, ground, newVector, newColor, newScreenshot, serializeScene, newMetaDataEntry, selectedMeshes, singleMeshTNode, toRadians, toDegrees, multiMeshTNode, handleMousePointerTap, prepareCamera, buildMaterialsArray, buildMeshPositionsArray, createBoundingMesh, attachToSelectMeshesNode, newTexture, getUserMaterials, buildSelectedMaterialArray, buildMeshIdArray, refreshHighlight, guiTexture, getBoundingMeshData, getScaleFactor } from '../helpers';
+import { getUserMeshes, resetSelectedMeshes, addNewMesh, scene, mirrorGround, ground, newVector, newColor, newScreenshot, serializeScene, newMetaDataEntry, selectedMeshes, singleMeshTNode, toRadians, toDegrees, multiMeshTNode, handleMousePointerTap, prepareCamera, buildMaterialsArray, buildMeshPositionsArray, createBoundingMesh, attachToSelectMeshesNode, newTexture, getUserMaterials, buildSelectedMaterialArray, buildMeshIdArray, refreshHighlight, guiTexture, getBoundingMeshData, getScaleFactor, gizmoManager } from '../helpers';
 import { toggleSafeFrame, toggleOrthographicViews, toggleBoundingBoxWidget, resetManagerGizmos, modelToOrigin, focusCamera } from '../actions';
 import { GLTF2 } from 'babylonjs-loaders';
 import { GIZMOS, TRANSPARENCY_MODES, GUI } from '../constants';
@@ -292,6 +291,7 @@ export const updateMesh = inboundData => {
   const meshChangeTracking = scene.metadata?.meshChangeTracking || [];
   const selectedSourceUnit = scene.metadata.selectedSourceUnit;
   const selectedDisplayUnit = scene.metadata?.selectedDisplayUnit;
+  const isBoundingBoxEnabled = gizmoManager.boundingBoxGizmoEnabled;
   const userMeshes = getUserMeshes();
   const rootMesh = scene.getMeshByID('__root__');
   const newTrackingData = args => meshChangeTracking?.map(mesh => {
@@ -303,11 +303,12 @@ export const updateMesh = inboundData => {
 
   // Change display units
   if (!_.isEmpty(displayUnit) && selectedSourceUnit && selectedSourceUnit !== unitless) {
-    // TODO: Update bounding box and display units every time displayUnit is changed.
-    // Also look into why displayUnit is one state behind when sourceUnit is changed in FOVEA.
-    // Also look into bounding box label width being very long.
-    // Finally, check that math is correct between source and display units.
-    newMetaDataEntry('selectedDisplayUnit', displayUnit === unitless ? selectedSourceUnit : displayUnit);
+    const newDisplayUnit = displayUnit === unitless ? selectedSourceUnit : displayUnit;
+    newMetaDataEntry('selectedDisplayUnit', newDisplayUnit);
+    if (isBoundingBoxEnabled) {
+      toggleBoundingBoxWidget();
+      toggleBoundingBoxWidget();
+    }
   }
 
   // Change mesh scale based on source units
@@ -393,7 +394,9 @@ export const updateMesh = inboundData => {
         ...convertedScales
       });
       modelToOrigin(sourceUnitScaleOperation);
+      isBoundingBoxEnabled && toggleBoundingBoxWidget();
       focusCamera();
+      isBoundingBoxEnabled && toggleBoundingBoxWidget();
       return;
     }
   }

package/dist/helpers/gizmoHelpers.js

@@ -40,9 +40,9 @@ export const handleSingleMeshGizmo = mesh => {
     const isChildOfNode = previousSingleNode?.name === mesh.name;
     const parent = mesh.parent;
     const currentMeshTracking = scene.metadata.meshChangeTracking.find(trackedMesh => trackedMesh.meshId === mesh.id);
-    const radiansX = toRadians(currentMeshTracking.rx);
-    const radiansY = toRadians(currentMeshTracking.ry);
-    const radiansZ = toRadians(currentMeshTracking.rz);
+    const radiansX = toRadians(currentMeshTracking?.rx);
+    const radiansY = toRadians(currentMeshTracking?.ry);
+    const radiansZ = toRadians(currentMeshTracking?.rz);
     const newRotation = newVector(radiansX, radiansY, radiansZ);
     parentList.push({
       mesh,

package/dist/helpers/viewportHelpers.js

@@ -117,7 +117,7 @@ export const resetSelectedMeshes = () => {
   const firstMaterial = userMaterials[0] || {};
   newMetaDataEntry('selectedMaterials', []);
   if (!_.isEmpty(firstMaterial)) {
-    const existingMaterial = scene.metadata.materials.find(mat => mat.materialId === firstMaterial.id);
+    const existingMaterial = scene.metadata?.materials?.find?.(mat => mat.materialId === firstMaterial.id);
     newMetaDataEntry('selectedMaterials', [existingMaterial]);
   }
   highlightManager.removeAllMeshes();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archvisioninc/canvas",
-  "version": "2.2.17",
+  "version": "2.3.1",
   "private": false,
   "main": "dist/Canvas.js",
   "module": "dist/Canvas.js",

package/src/package/actions/shortcutActions.js

@@ -178,9 +178,8 @@ export const toggleBoundingBoxWidget = () => {
     guiTexture.getControlByName(dimension.container)?.dispose?.();
   });
 
-  resetManagerGizmos(GIZMOS.BoundingBoxGizmo);
-
   if (!gizmoManager.boundingBoxGizmoEnabled) {
+    resetManagerGizmos(GIZMOS.BoundingBoxGizmo);
     gizmoManager.attachToMesh(boundingMesh);
   }
 
@@ -340,7 +339,7 @@ export const modelToOrigin = sourceUnitScaleOperation => {
 
   const handleBoundingBox = () => {
     const newBox = createBoundingMesh();
-    if (boundingBoxEnabled) toggleBoundingBoxWidget();
+    if (boundingBoxEnabled && !sourceUnitScaleOperation) toggleBoundingBoxWidget();
     if (gizmoManager.boundingBoxGizmoEnabled) gizmoManager.attachToMesh(newBox);
     resetManagerGizmos(GIZMOS.BoundingBoxGizmo);
   };

package/src/package/helpers/canvasUpdateHelpers.js

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import {
   getUserMeshes,
   resetSelectedMeshes,
@@ -30,6 +29,7 @@ import {
   guiTexture,
   getBoundingMeshData,
   getScaleFactor,
+  gizmoManager,
 } from '../helpers';
 import {
   toggleSafeFrame,
@@ -328,6 +328,7 @@ export const updateMesh = inboundData => {
   const meshChangeTracking = scene.metadata?.meshChangeTracking || [];
   const selectedSourceUnit = scene.metadata.selectedSourceUnit;
   const selectedDisplayUnit = scene.metadata?.selectedDisplayUnit;
+  const isBoundingBoxEnabled = gizmoManager.boundingBoxGizmoEnabled;
   const userMeshes = getUserMeshes();
   const rootMesh = scene.getMeshByID('__root__');
 
@@ -337,11 +338,13 @@ export const updateMesh = inboundData => {
 
   // Change display units
   if (!_.isEmpty(displayUnit) && selectedSourceUnit && selectedSourceUnit !== unitless) {
-    // TODO: Update bounding box and display units every time displayUnit is changed.
-    // Also look into why displayUnit is one state behind when sourceUnit is changed in FOVEA.
-    // Also look into bounding box label width being very long.
-    // Finally, check that math is correct between source and display units.
-    newMetaDataEntry('selectedDisplayUnit', displayUnit === unitless ? selectedSourceUnit : displayUnit);
+    const newDisplayUnit = displayUnit === unitless ? selectedSourceUnit : displayUnit;
+    newMetaDataEntry('selectedDisplayUnit', newDisplayUnit);
+
+    if (isBoundingBoxEnabled) {
+      toggleBoundingBoxWidget();
+      toggleBoundingBoxWidget();
+    }
   }
 
   // Change mesh scale based on source units
@@ -405,7 +408,9 @@ export const updateMesh = inboundData => {
 
       newMetaDataEntry('globalTransforms', { ...globalTransforms, ...convertedScales });
       modelToOrigin(sourceUnitScaleOperation);
+      isBoundingBoxEnabled && toggleBoundingBoxWidget();
       focusCamera();
+      isBoundingBoxEnabled && toggleBoundingBoxWidget();
       return;
     }
   }

package/src/package/helpers/gizmoHelpers.js

@@ -65,9 +65,9 @@ export const handleSingleMeshGizmo = mesh => {
     const isChildOfNode = previousSingleNode?.name === mesh.name;
     const parent = mesh.parent;
     const currentMeshTracking = scene.metadata.meshChangeTracking.find(trackedMesh => trackedMesh.meshId === mesh.id);
-    const radiansX = toRadians(currentMeshTracking.rx);
-    const radiansY = toRadians(currentMeshTracking.ry);
-    const radiansZ = toRadians(currentMeshTracking.rz);
+    const radiansX = toRadians(currentMeshTracking?.rx);
+    const radiansY = toRadians(currentMeshTracking?.ry);
+    const radiansZ = toRadians(currentMeshTracking?.rz);
     const newRotation =  newVector(radiansX, radiansY, radiansZ);
 
     parentList.push({ mesh, parent });

package/src/package/helpers/viewportHelpers.js

@@ -170,7 +170,7 @@ export const resetSelectedMeshes = () => {
   newMetaDataEntry('selectedMaterials', []);
 
   if (!_.isEmpty(firstMaterial)) {
-    const existingMaterial = scene.metadata.materials.find(mat => mat.materialId === firstMaterial.id);
+    const existingMaterial = scene.metadata?.materials?.find?.(mat => mat.materialId === firstMaterial.id);
     newMetaDataEntry('selectedMaterials', [ existingMaterial ]);
   }
 

package/src/scenes/App/App.js

@@ -1,10 +1,10 @@
 import { useEffect, useState, useCallback } from 'react';
 import { Notifications } from 'components';
-import { AppContainer, DebugButtons, Button, SourceUnits, DisplayUnits, EndButtons } from './styles';
+import { AppContainer, DebugButtons, Button } from './styles';
 import { theme } from 'static/theme';
 import { fetchDownloadURL } from 'helpers/fetchHelpers';
 import { ENVIRONMENTS } from 'constants';
-import { updateMesh, scene } from 'package/helpers';
+import { updateMesh } from 'package/helpers';
 import Canvas from 'package/Canvas';
 import _ from 'lodash';
 
@@ -89,297 +89,157 @@ const App = () => {
       />
 
       <DebugButtons>
-        <SourceUnits>
-          <Button
-            theme={theme}
-            $selectedTheme={selectedTheme}
-            onClick={() => {
-              const inboundData = {
-                payload: {
-                  sourceUnit: 'm',
-                },
-              };
-
-              updateMesh(inboundData);
-              const selectedSourceUnit = scene?.metadata.selectedSourceUnit;
-              const selectedDisplayUnit = scene?.metadata.selectedDisplayUnit;
-              console.log({ sourceUnit: 'm', selectedSourceUnit, selectedDisplayUnit });
-            }}
-          >
-            Source: Meters
-          </Button>
-
-          <Button
-            theme={theme}
-            $selectedTheme={selectedTheme}
-            onClick={() => {
-              const inboundData = {
-                payload: {
-                  sourceUnit: 'cm',
-                },
-              };
-
-              updateMesh(inboundData);
-              const selectedSourceUnit = scene?.metadata.selectedSourceUnit;
-              const selectedDisplayUnit = scene?.metadata.selectedDisplayUnit;
-              console.log({ sourceUnit: 'cm', selectedSourceUnit, selectedDisplayUnit });
-            }}
-          >
-            Source: Centimeters
-          </Button>
-
-          <Button
-            theme={theme}
-            $selectedTheme={selectedTheme}
-            onClick={() => {
-              const inboundData = {
-                payload: {
-                  sourceUnit: 'mm',
-                },
-              };
-
-              updateMesh(inboundData);
-              const selectedSourceUnit = scene?.metadata.selectedSourceUnit;
-              const selectedDisplayUnit = scene?.metadata.selectedDisplayUnit;
-              console.log({ sourceUnit: 'mm', selectedSourceUnit, selectedDisplayUnit });
-            }}
-          >
-            Source: Millimeters
-          </Button>
-
-          <Button
-            theme={theme}
-            $selectedTheme={selectedTheme}
-            onClick={() => {
-              const inboundData = {
-                payload: {
-                  sourceUnit: 'ft',
-                },
-              };
-
-              updateMesh(inboundData);
-              const selectedSourceUnit = scene?.metadata.selectedSourceUnit;
-              const selectedDisplayUnit = scene?.metadata.selectedDisplayUnit;
-              console.log({ sourceUnit: 'ft', selectedSourceUnit, selectedDisplayUnit });
-            }}
-          >
-            Source: Feet
-          </Button>
-
-          <Button
-            theme={theme}
-            $selectedTheme={selectedTheme}
-            onClick={() => {
-              const inboundData = {
-                payload: {
-                  sourceUnit: 'in',
-                },
-              };
-
-              updateMesh(inboundData);
-              const selectedSourceUnit = scene?.metadata.selectedSourceUnit;
-              const selectedDisplayUnit = scene?.metadata.selectedDisplayUnit;
-              console.log({ sourceUnit: 'in', selectedSourceUnit, selectedDisplayUnit });
-            }}
-          >
-            Source: Inches
-          </Button>
-
-          <Button
-            theme={theme}
-            $selectedTheme={selectedTheme}
-            onClick={() => {
-              const inboundData = {
-                payload: {
-                  sourceUnit: 'yd',
-                },
-              };
-
-              updateMesh(inboundData);
-              const selectedSourceUnit = scene?.metadata.selectedSourceUnit;
-              const selectedDisplayUnit = scene?.metadata.selectedDisplayUnit;
-              console.log({ sourceUnit: 'yd', selectedSourceUnit, selectedDisplayUnit });
-            }}
-          >
-            Source: Yards
-          </Button>
-
-          <Button
-            theme={theme}
-            $selectedTheme={selectedTheme}
-            onClick={() => {
-              const inboundData = {
-                payload: {
-                  sourceUnit: 'unitless',
-                },
-              };
-
-              updateMesh(inboundData);
-              const selectedSourceUnit = scene?.metadata.selectedSourceUnit;
-              const selectedDisplayUnit = scene?.metadata.selectedDisplayUnit;
-              console.log({ sourceUnit: 'unitless', selectedSourceUnit, selectedDisplayUnit });
-            }}
-          >
-            Source: Unitless
-          </Button>
-        </SourceUnits>
-
-        <DisplayUnits>
-          <Button
-            theme={theme}
-            $selectedTheme={selectedTheme}
-            onClick={() => {
-              const inboundData = {
-                payload: {
-                  displayUnit: 'm',
-                },
-              };
-
-              updateMesh(inboundData);
-              const selectedSourceUnit = scene?.metadata.selectedSourceUnit;
-              const selectedDisplayUnit = scene?.metadata.selectedDisplayUnit;
-              console.log({ displayUnit: 'm', selectedSourceUnit, selectedDisplayUnit });
-            }}
-          >
-            Display: Meters
-          </Button>
-
-          <Button
-            theme={theme}
-            $selectedTheme={selectedTheme}
-            onClick={() => {
-              const inboundData = {
-                payload: {
-                  displayUnit: 'cm',
-                },
-              };
-
-              updateMesh(inboundData);
-              const selectedSourceUnit = scene?.metadata.selectedSourceUnit;
-              const selectedDisplayUnit = scene?.metadata.selectedDisplayUnit;
-              console.log({ displayUnit: 'cm', selectedSourceUnit, selectedDisplayUnit });
-            }}
-          >
-            Display: Centimeters
-          </Button>
-
-          <Button
-            theme={theme}
-            $selectedTheme={selectedTheme}
-            onClick={() => {
-              const inboundData = {
-                payload: {
-                  displayUnit: 'mm',
-                },
-              };
-
-              updateMesh(inboundData);
-              const selectedSourceUnit = scene?.metadata.selectedSourceUnit;
-              const selectedDisplayUnit = scene?.metadata.selectedDisplayUnit;
-              console.log({ displayUnit: 'mm', selectedSourceUnit, selectedDisplayUnit });
-            }}
-          >
-            Display: Millimeters
-          </Button>
-
-          <Button
-            theme={theme}
-            $selectedTheme={selectedTheme}
-            onClick={() => {
-              const inboundData = {
-                payload: {
-                  displayUnit: 'ft',
-                },
-              };
-
-              updateMesh(inboundData);
-              const selectedSourceUnit = scene?.metadata.selectedSourceUnit;
-              const selectedDisplayUnit = scene?.metadata.selectedDisplayUnit;
-              console.log({ displayUnit: 'ft', selectedSourceUnit, selectedDisplayUnit });
-            }}
-          >
-            Display: Feet
-          </Button>
-
-          <Button
-            theme={theme}
-            $selectedTheme={selectedTheme}
-            onClick={() => {
-              const inboundData = {
-                payload: {
-                  displayUnit: 'in',
-                },
-              };
-
-              updateMesh(inboundData);
-              const selectedSourceUnit = scene?.metadata.selectedSourceUnit;
-              const selectedDisplayUnit = scene?.metadata.selectedDisplayUnit;
-              console.log({ displayUnit: 'in', selectedSourceUnit, selectedDisplayUnit });
-            }}
-          >
-            Display: Inches
-          </Button>
-
-          <Button
-            theme={theme}
-            $selectedTheme={selectedTheme}
-            onClick={() => {
-              const inboundData = {
-                payload: {
-                  displayUnit: 'yd',
-                },
-              };
-
-              updateMesh(inboundData);
-              const selectedSourceUnit = scene?.metadata.selectedSourceUnit;
-              const selectedDisplayUnit = scene?.metadata.selectedDisplayUnit;
-              console.log({ displayUnit: 'yd', selectedSourceUnit, selectedDisplayUnit });
-            }}
-          >
-            Display: Yards
-          </Button>
-
-          <Button
-            theme={theme}
-            $selectedTheme={selectedTheme}
-            onClick={() => {
-              const inboundData = {
-                payload: {
-                  displayUnit: 'unitless',
-                },
-              };
-
-              updateMesh(inboundData);
-              const selectedSourceUnit = scene?.metadata.selectedSourceUnit;
-              const selectedDisplayUnit = scene?.metadata.selectedDisplayUnit;
-              console.log({ displayUnit: 'unitless', selectedSourceUnit, selectedDisplayUnit });
-            }}
-          >
-            Display: Unitless
-          </Button>
-        </DisplayUnits>
-
-        <EndButtons>
-          <Button
-            theme={theme}
-            $selectedTheme={selectedTheme}
-            onClick={() => {
-              const selectedSourceUnit = scene?.metadata.selectedSourceUnit;
-              const selectedDisplayUnit = scene?.metadata.selectedDisplayUnit;
-              console.log({ selectedSourceUnit, selectedDisplayUnit });
-            }}
-          >
-            Value check
-          </Button>
-
-          <Button
-            theme={theme}
-            $selectedTheme={selectedTheme}
-            onClick={() => setSelectedTheme(selectedTheme === 'light' ? 'dark' : 'light')}
-          >
-            Change theme
-          </Button>
-        </EndButtons>
+        <Button
+          theme={theme}
+          $selectedTheme={selectedTheme}
+          onClick={() => {
+            const inboundData = {
+              payload: {
+                sourceUnit: 'unitless',
+              },
+            };
+
+            updateMesh(inboundData);
+          }}
+        >
+          Unitless
+        </Button>
+
+        <Button
+          theme={theme}
+          $selectedTheme={selectedTheme}
+          onClick={() => {
+            const inboundData = {
+              payload: {
+                sourceUnit: 'cm',
+              },
+            };
+
+            updateMesh(inboundData);
+          }}
+        >
+          Source: Centimeters
+        </Button>
+
+        <Button
+          theme={theme}
+          $selectedTheme={selectedTheme}
+          onClick={() => {
+            const inboundData = {
+              payload: {
+                sourceUnit: 'mm',
+              },
+            };
+
+            updateMesh(inboundData);
+          }}
+        >
+          Source: Millimeters
+        </Button>
+
+        <Button
+          theme={theme}
+          $selectedTheme={selectedTheme}
+          onClick={() => {
+            const inboundData = {
+              payload: {
+                sourceUnit: 'm',
+              },
+            };
+
+            updateMesh(inboundData);
+          }}
+        >
+          Source: Meters
+        </Button>
+
+        <Button
+          theme={theme}
+          $selectedTheme={selectedTheme}
+          onClick={() => {
+            const inboundData = {
+              payload: {
+                displayUnit: 'ft',
+              },
+            };
+
+            updateMesh(inboundData);
+          }}
+        >
+          Display: Feet
+        </Button>
+
+        <Button
+          theme={theme}
+          $selectedTheme={selectedTheme}
+          onClick={() => {
+            const inboundData = {
+              payload: {
+                displayUnit: 'in',
+              },
+            };
+
+            updateMesh(inboundData);
+          }}
+        >
+          Display: Inches
+        </Button>
+
+        <Button
+          theme={theme}
+          $selectedTheme={selectedTheme}
+          onClick={() => {
+            const inboundData = {
+              payload: {
+                sourceUnit: 'in',
+              },
+            };
+
+            updateMesh(inboundData);
+          }}
+        >
+          Source: Inches
+        </Button>
+
+        <Button
+          theme={theme}
+          $selectedTheme={selectedTheme}
+          onClick={() => {
+            const inboundData = {
+              payload: {
+                sourceUnit: 'ft',
+              },
+            };
+
+            updateMesh(inboundData);
+          }}
+        >
+          Source: Feet
+        </Button>
+
+        <Button
+          theme={theme}
+          $selectedTheme={selectedTheme}
+          onClick={() => {
+            const inboundData = {
+              payload: {
+                sourceUnit: 'yd',
+              },
+            };
+
+            updateMesh(inboundData);
+          }}
+        >
+          Source: Yards
+        </Button>
+
+        <Button
+          theme={theme}
+          $selectedTheme={selectedTheme}
+          onClick={() => setSelectedTheme(selectedTheme === 'light' ? 'dark' : 'light')}
+        >
+          Change theme
+        </Button>
       </DebugButtons>
     </AppContainer>
   );

package/src/scenes/App/styles.js

@@ -10,19 +10,11 @@ export const AppContainer = styled('div')`
 
 export const DebugButtons = styled('div')`
   position: absolute;
-  display: grid;
-  gap: 0.5rem 3rem;
-  align-items: center;
-  justify-content: center;
-  grid-template-columns: 1fr auto;
-  grid-template-rows: repeat(2, auto);
-  grid-template-areas:
-    'sourceUnits endButtons'
-    'displayUnits endButtons';
-
   top: 1rem;
   right: 1rem;
   width: fit-content;
+  display: inline-flex;
+  gap: 0.5rem;
 `;
 
 export const Button = styled('button')`
@@ -39,23 +31,4 @@ export const Button = styled('button')`
     background-color: ${props => getColor(props, 'accentHover')};
     color: ${props => getColor(props, 'onAccentHover')};
   }
-`;
-
-export const SourceUnits = styled('div')`
-  display:inline-flex;
-  align-items: center;
-  justify-content: center;
-  grid-area: sourceUnits;
-  gap: 0.5rem;
-  width: 100%;
-`;
-
-export const DisplayUnits = styled(SourceUnits)`
-  grid-area: displayUnits;
-`;
-
-export const EndButtons = styled('div')`
-  display: inline-flex;
-  grid-area: endButtons;
-  gap: 0.5rem;
 `;