fix resize (#5921)

* fix resize

* assert stream dimensions

e2e/playwright/editor-tests.spec.ts

@@ -1,12 +1,7 @@
 import { test, expect } from './zoo-test'
 import fsp from 'fs/promises'
 import { uuidv4 } from 'lib/utils'
-import {
-  darkModeBgColor,
-  darkModePlaneColorXZ,
-  executorInputPath,
-  getUtils,
-} from './test-utils'
+import { executorInputPath, getUtils, TEST_COLORS } from './test-utils'
 
 import { join } from 'path'
 
@@ -1163,7 +1158,8 @@ test.describe('Editor tests', { tag: ['@skipWin'] }, () => {
         await u.waitForPageLoad()
         await expect
           .poll(
-            async () => locationToHavColor(notTheOrigin, darkModePlaneColorXZ),
+            async () =>
+              locationToHavColor(notTheOrigin, TEST_COLORS.DARK_MODE_PLANE_XZ),
             {
               timeout: 5000,
               message: 'XZ plane color is visible',
@@ -1184,16 +1180,23 @@ test.describe('Editor tests', { tag: ['@skipWin'] }, () => {
       await test.step(`Verify that we see the imported geometry and no errors`, async () => {
         await expect(errorIndicators).toHaveCount(0)
         await expect
-          .poll(async () => locationToHavColor(origin, darkModePlaneColorXZ), {
+          .poll(
+            async () =>
+              locationToHavColor(origin, TEST_COLORS.DARK_MODE_PLANE_XZ),
+            {
               timeout: 3000,
               message: 'Plane color should not be visible',
-          })
+            }
+          )
           .toBeGreaterThan(15)
         await expect
-          .poll(async () => locationToHavColor(origin, darkModeBgColor), {
+          .poll(
+            async () => locationToHavColor(origin, TEST_COLORS.DARK_MODE_BKGD),
+            {
               timeout: 3000,
               message: 'Background color should not be visible',
-          })
+            }
+          )
           .toBeGreaterThan(15)
       })
     }

e2e/playwright/regression-tests.spec.ts

@@ -2,9 +2,15 @@ import { Page } from '@playwright/test'
 import { test, expect } from './zoo-test'
 import path from 'path'
 import * as fsp from 'fs/promises'
-import { getUtils, executorInputPath } from './test-utils'
+import {
+  getUtils,
+  executorInputPath,
+  TEST_COLORS,
+  TestColor,
+} from './test-utils'
 import { TEST_CODE_TRIGGER_ENGINE_EXPORT_ERROR } from './storageStates'
 import { bracket } from 'lib/exampleKcl'
+import { reportRejection } from 'lib/trap'
 
 test.describe('Regression tests', { tag: ['@skipWin'] }, () => {
   // bugs we found that don't fit neatly into other categories
@@ -315,6 +321,89 @@ extrude001 = extrude(sketch001, length = 50)
     }
   )
 
+  test(
+    'window resize updates should reconfigure the stream',
+    { tag: '@skipLocalEngine' },
+    async ({ scene, page, homePage, cmdBar, toolbar }) => {
+      await page.addInitScript(
+        async ({ code }) => {
+          localStorage.setItem(
+            'persistCode',
+            `@settings(defaultLengthUnit = mm)
+sketch002 = startSketchOn('XY')
+profile002 = startProfileAt([72.24, -52.05], sketch002)
+  |> angledLine([0, 181.26], %, $rectangleSegmentA001)
+  |> angledLine([
+       segAng(rectangleSegmentA001) - 90,
+       21.54
+     ], %)
+  |> angledLine([
+       segAng(rectangleSegmentA001),
+       -segLen(rectangleSegmentA001)
+     ], %)
+  |> line(endAbsolute = [profileStartX(%), profileStartY(%)])
+  |> close()
+extrude002 = extrude(profile002, length = 150)
+`
+          )
+          ;(window as any).playwrightSkipFilePicker = true
+        },
+        { code: TEST_CODE_TRIGGER_ENGINE_EXPORT_ERROR }
+      )
+
+      const websocketPromise = page.waitForEvent('websocket')
+      await page.setBodyDimensions({ width: 500, height: 500 })
+
+      await homePage.goToModelingScene()
+      const websocket = await websocketPromise
+
+      await scene.connectionEstablished()
+      await scene.settled(cmdBar)
+      await toolbar.closePane('code')
+
+      // expect pixel color to be background color
+      const offModelBefore = { x: 446, y: 250 }
+      const onModelBefore = { x: 422, y: 250 }
+      const offModelAfter = { x: 692, y: 262 }
+      const onModelAfter = { x: 673, y: 266 }
+
+      await scene.expectPixelColor(
+        TEST_COLORS.DARK_MODE_BKGD,
+        offModelBefore,
+        15
+      )
+      const standardModelGrey: TestColor = [100, 100, 100]
+      await scene.expectPixelColor(standardModelGrey, onModelBefore, 15)
+
+      await test.step('resize window and expect "reconfigure_stream" websocket message', async () => {
+        // note this is a bit low level for our tests, usually this would go into a fixture
+        // but it's pretty unique to this resize test, it can be moved/abstracted if we have further need
+        // to listen to websocket messages
+        await Promise.all([
+          new Promise((resolve) => {
+            websocket
+              // @ts-ignore
+              .waitForEvent('framesent', (frame) => {
+                frame.payload
+                  .toString()
+                  .includes(
+                    '"type":"reconfigure_stream","width":1000,"height":500'
+                  ) && resolve(true)
+              })
+              .catch(reportRejection)
+          }),
+          page.setBodyDimensions({ width: 1000, height: 500 }),
+        ])
+      })
+
+      await scene.expectPixelColor(
+        TEST_COLORS.DARK_MODE_BKGD,
+        offModelAfter,
+        15
+      )
+      await scene.expectPixelColor(standardModelGrey, onModelAfter, 15)
+    }
+  )
   test(
     'when engine fails export we handle the failure and alert the user',
     { tag: '@skipLocalEngine' },
@@ -534,7 +623,7 @@ extrude001 = extrude(sketch001, length = 50)
 
     // Constants and locators
     const planeColor: [number, number, number] = [170, 220, 170]
-    const bgColor: [number, number, number] = [27, 27, 27]
+    const bgColor: [number, number, number] = TEST_COLORS.DARK_MODE_BKGD
     const middlePixelIsColor = async (color: [number, number, number]) => {
       return u.getGreatestPixDiff({ x: 600, y: 250 }, color)
     }

e2e/playwright/test-utils.ts

@@ -31,11 +31,13 @@ const toNormalizedCode = (text: string) => {
   return text.replace(/\s+/g, '')
 }
 
-type TestColor = [number, number, number]
-export const TEST_COLORS = {
-  WHITE: [249, 249, 249] as TestColor,
-  YELLOW: [255, 255, 0] as TestColor,
-  BLUE: [0, 0, 255] as TestColor,
+export type TestColor = [number, number, number]
+export const TEST_COLORS: { [key: string]: TestColor } = {
+  WHITE: [249, 249, 249],
+  YELLOW: [255, 255, 0],
+  BLUE: [0, 0, 255],
+  DARK_MODE_BKGD: [27, 27, 27],
+  DARK_MODE_PLANE_XZ: [50, 50, 99],
 } as const
 
 export const PERSIST_MODELING_CONTEXT = 'persistModelingContext'
@@ -50,14 +52,6 @@ export const commonPoints = {
   num3: -2.44,
 } as const
 
-/** A semi-reliable color to check the default XZ plane on
- * in dark mode in the default camera position
- */
-export const darkModePlaneColorXZ: [number, number, number] = [50, 50, 99]
-
-/** A semi-reliable color to check the default dark mode bg color against */
-export const darkModeBgColor: [number, number, number] = [27, 27, 27]
-
 export const editorSelector = '[role="textbox"][data-language="kcl"]'
 type PaneId = 'variables' | 'code' | 'files' | 'logs'
 

e2e/playwright/testing-settings.spec.ts

@@ -6,6 +6,7 @@ import {
   executorInputPath,
   createProject,
   tomlToSettings,
+  TEST_COLORS,
 } from './test-utils'
 import { SettingsLevel } from 'lib/settings/settingsTypes'
 import { SETTINGS_FILE_NAME, PROJECT_SETTINGS_FILE_NAME } from 'lib/constants'
@@ -811,7 +812,7 @@ test.describe('Testing settings', () => {
     // Selectors and constants
     const darkBackgroundCss = 'oklch(0.3012 0 264.5)'
     const lightBackgroundCss = 'oklch(0.9911 0 264.5)'
-    const darkBackgroundColor: [number, number, number] = [27, 27, 27]
+    const darkBackgroundColor = TEST_COLORS.DARK_MODE_BKGD
     const lightBackgroundColor: [number, number, number] = [245, 245, 245]
     const streamBackgroundPixelIsColor = async (
       color: [number, number, number]

src/hooks/useSetupEngineManager.ts

@@ -93,7 +93,12 @@ export function useSetupEngineManager(
     engineCommandManager.settings = settings
 
     const handleResize = deferExecution(() => {
-      engineCommandManager.handleResize(engineCommandManager.streamDimensions)
+      engineCommandManager.handleResize(
+        getDimensions(
+          streamRef?.current?.offsetWidth ?? 0,
+          streamRef?.current?.offsetHeight ?? 0
+        )
+      )
     }, 500)
 
     const onOnline = () => {