SideDrawer: do not resize canvas on drag

Author: pablo-mayrgundter

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.1893",
+  "version": "1.0.1894",
   "main": "src/index.jsx",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/bldrs-ai/Share",

src/Components/Apps/Apps.spec.ts

@@ -1,5 +1,4 @@
 import {expect, test} from '@playwright/test'
-import {assertDefined} from 'src/utils/assert'
 import {
   homepageSetup,
   returningUserVisitsHomepageWaitForModel,
@@ -8,6 +7,22 @@ import {TITLE_NOTES} from '../Notes/component'
 import {TITLE_APPS} from './component'
 
 
+/**
+ * Assert `value` is not null.
+ *
+ * @template T
+ * @param value
+ * @param msg
+ * @return value
+ */
+function assertNotNull<T>(value: T | null, msg: string): T {
+  if (!value) {
+    throw new Error(msg)
+  }
+  return value
+}
+
+
 const {beforeEach, describe} = test
 /**
  * Migrated from cypress/e2e/apps/apps.cy.js
@@ -63,7 +78,15 @@ describe('AppsSideDrawer', () => {
       const appsDrawer = page.getByTestId('AppsDrawer')
 
       const handle = notesDrawer.getByTestId('resize-handle-x')
-      const handleBox = assertDefined(await handle.boundingBox())
+      const handleBox = assertNotNull(
+        await handle.boundingBox(),
+        'Expected Notes resize handle to have a bounding box',
+      )
+      const viewerContainer = page.locator('#viewer-container')
+      const viewerBoxBefore = assertNotNull(
+        await viewerContainer.boundingBox(),
+        'Expected viewer container to have a bounding box',
+      )
 
       // Drag left to widen Notes (this used to push Apps out of view).
       await page.mouse.move(
@@ -78,10 +101,21 @@ describe('AppsSideDrawer', () => {
       // Apps should remain visible and inside the viewport.
       await expect(page.getByTestId(`PanelTitle-${TITLE_APPS}`)).toBeVisible()
 
-      const appsBox = assertDefined(await appsDrawer.boundingBox())
+      const appsBox = assertNotNull(
+        await appsDrawer.boundingBox(),
+        'Expected Apps drawer to have a bounding box',
+      )
       const vw = await page.evaluate(() => window.innerWidth)
       expect(appsBox.x).toBeGreaterThanOrEqual(0)
       expect(appsBox.x + (appsBox.width)).toBeLessThanOrEqual(vw + 1)
+
+      // Viewer should not resize when drawers open/resize (drawers overlay the canvas).
+      const viewerBoxAfter = assertNotNull(
+        await viewerContainer.boundingBox(),
+        'Expected viewer container to have a bounding box after resize',
+      )
+      expect(Math.abs(viewerBoxAfter.width - viewerBoxBefore.width)).toBeLessThanOrEqual(1)
+      expect(Math.abs(viewerBoxAfter.width - vw)).toBeLessThanOrEqual(2)
     })
   })
 })

src/Containers/CadView.jsx

@@ -50,10 +50,6 @@ export default function CadView({
   const hasGitHubIdentity = useStore((state) => state.hasGithubIdentity)
   const customViewSettings = useStore((state) => state.customViewSettings)
   const elementTypesMap = useStore((state) => state.elementTypesMap)
-  const isAppsVisible = useStore((state) => state.isAppsVisible)
-  const isNotesVisible = useStore((state) => state.isNotesVisible)
-  const rightDrawerWidth = useStore((state) => state.rightDrawerWidth)
-  const appsDrawerWidth = useStore((state) => state.appsDrawerWidth)
   const preselectedElementIds = useStore((state) => state.preselectedElementIds)
   const searchIndex = useStore((state) => state.searchIndex)
   const selectedElements = useStore((state) => state.selectedElements)
@@ -70,7 +66,6 @@ export default function CadView({
   const setSelectedElement = useStore((state) => state.setSelectedElement)
   const setSelectedElements = useStore((state) => state.setSelectedElements)
   const setViewer = useStore((state) => state.setViewer)
-  const sidebarWidth = (isNotesVisible ? rightDrawerWidth : 0) + (isAppsVisible ? appsDrawerWidth : 0)
   const viewer = useStore((state) => state.viewer)
 
   // AppSlice
@@ -705,17 +700,8 @@ export default function CadView({
   /* eslint-enable */
 
 
-  // Shrink the scene viewer when drawer is open.  This recenters the
-  // view in the new shrunk canvas, which preserves what the user is
-  // looking at.
-  // TODO(pablo): add render testing
-  useEffect(() => {
-    const isDrawerOpen = isNotesVisible || isAppsVisible
-    if (viewer && !isMobile) {
-      viewer.container.style.width = isDrawerOpen ? `calc(100vw - ${sidebarWidth}px)` : '100vw'
-      viewer.context.resize()
-    }
-  }, [isNotesVisible, isAppsVisible, isMobile, viewer, sidebarWidth])
+  // NOTE: Do not resize the 3D canvas when drawers open/resize.
+  // Drawers should overlay the viewer without changing its dimensions.
 
   useEffect(() => {
     const setViewportHeight = () => {