refactor(inspector) Use Pointer Lock For Scrubbing (#6239)

- Changed some const functions to regular functions. - Removed the redundant y dragging for scrubbing as it wasn't used. - Added some additional React refs to help keep track of what has occurred. - Reworked the old scrub event handlers with the pointer lock based event handlers.
concrete-utopia · Dec 13, 2024 · 18c27d5 · 18c27d5
1 parent d318522
commit 18c27d5
Show file tree

Hide file tree

Showing 4 changed files with 272 additions and 127 deletions.
diff --git a/...ons/layout-section/self-layout-subsection/frame-updating-layout-section.spec.browser2.tsx b/...ons/layout-section/self-layout-subsection/frame-updating-layout-section.spec.browser2.tsx
@@ -18,7 +18,13 @@ import * as EP from '../../../../../core/shared/element-path'
 import { selectComponentsForTest } from '../../../../../utils/utils.test-utils'
 import { RegisteredCanvasStrategies } from '../../../../canvas/canvas-strategies/canvas-strategies'
 import { act, fireEvent } from '@testing-library/react'
-import { mouseClickAtPoint } from '../../../../canvas/event-helpers.test-utils'
+import {
+  mouseClickAtPoint,
+  mouseDownAtPoint,
+  mouseDragFromPointToPoint,
+  mouseMoveToPoint,
+  pressKey,
+} from '../../../../canvas/event-helpers.test-utils'
 import { getDomRectCenter } from '../../../../../core/shared/dom-utils'
 import { getFixedHugDropdownId } from '../../../fill-hug-fixed-control'
 
@@ -144,6 +150,77 @@ describe('Frame updating layout section', () => {
   }
 
   describe('Left control', () => {
+    it(
+      'scrubbing the left control label',
+      makeTestCase({
+        baseProject: `<div
+            style={{
+              height: '100%',
+              width: '100%',
+              contain: 'layout',
+            }}
+            data-uid={'root-div'}
+          >
+            <Rectangle
+              style={{
+                backgroundColor: '#FF69B4AB',
+                position: 'absolute',
+                left: 90,
+                top: 100,
+                width: 200,
+                height: 300,
+              }}
+              data-uid={'rectangle-1'}
+            />
+          </div>`,
+        actionChange: async (renderResult) => {
+          // Select the rectangle.
+          await selectComponentsForTest(renderResult, [
+            EP.fromString(
+              `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:root-div/rectangle-1`,
+            ),
+          ])
+
+          const scrubLabel = await renderResult.renderedDOM.findByTestId(
+            `frame-left-number-input-label-div`,
+          )
+          const scrubLabelBounds = scrubLabel.getBoundingClientRect()
+          const scrubLabelCenter = getDomRectCenter(scrubLabelBounds)
+          const scrubLabelEndPoint = { x: scrubLabelCenter.x + 100, y: scrubLabelCenter.y }
+          await mouseDragFromPointToPoint(scrubLabel, scrubLabelCenter, scrubLabelEndPoint)
+        },
+        expectedFrames: {
+          [`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:root-div/rectangle-1`]:
+            localRectangle({
+              x: 140,
+              y: 100,
+              width: 200,
+              height: 300,
+            }),
+        },
+        expectedProject: `<div
+            style={{
+              height: '100%',
+              width: '100%',
+              contain: 'layout',
+            }}
+          >
+            <Rectangle
+              style={{
+                backgroundColor: '#FF69B4AB',
+                position: 'absolute',
+                left: 140,
+                top: 100,
+                width: 200,
+                height: 300,
+              }}
+            />
+          </div>`,
+        expectedFixedHugDropdownWidthValue: 'Fixed',
+        expectedFixedHugDropdownHeightValue: 'Fixed',
+      }),
+    )
+
     it(
       'with a single element selected when setting value directly',
       makeTestCase({

diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -411,6 +411,8 @@ Array [
   "//div//Symbol(react.memo)(NumberInput)",
   "//div//Symbol(react.forward_ref)(Styled(div))",
   "/div//Symbol(react.forward_ref)(Styled(div))/div",
+  "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/img",
+  "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/div",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/div:data-testid='radius-one-mouse-down-handler'",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -438,6 +440,8 @@ Array [
   "//div//Symbol(react.memo)(NumberInput)",
   "//div//Symbol(react.forward_ref)(Styled(div))",
   "/div//Symbol(react.forward_ref)(Styled(div))/div",
+  "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/img",
+  "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/div",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/div:data-testid='padding-V-mouse-down-handler'",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -446,6 +450,8 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input)):data-testid='padding-V'",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input))/input:data-testid='padding-V'",
+  "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/img",
+  "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/div",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/div:data-testid='padding-H-mouse-down-handler'",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -551,6 +557,8 @@ Array [
   "/div/FrameUpdatingLayoutControl/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/FrameUpdatingLayoutControl/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/img",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/div:data-testid='frame-left-number-input-mouse-down-handler'",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -572,6 +580,8 @@ Array [
   "/div/FrameUpdatingLayoutControl/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/FrameUpdatingLayoutControl/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/img",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/div:data-testid='frame-top-number-input-mouse-down-handler'",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -1033,6 +1043,8 @@ Array [
   "//div//Symbol(react.memo)(NumberInput)",
   "//div//Symbol(react.forward_ref)(Styled(div))",
   "/div//Symbol(react.forward_ref)(Styled(div))/div",
+  "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/img",
+  "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/div",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/div:data-testid='radius-one-mouse-down-handler'",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -1060,6 +1072,8 @@ Array [
   "//div//Symbol(react.memo)(NumberInput)",
   "//div//Symbol(react.forward_ref)(Styled(div))",
   "/div//Symbol(react.forward_ref)(Styled(div))/div",
+  "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/img",
+  "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/div",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/div:data-testid='padding-V-mouse-down-handler'",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -1068,6 +1082,8 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input)):data-testid='padding-V'",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input))/input:data-testid='padding-V'",
+  "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/img",
+  "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/div",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/div:data-testid='padding-H-mouse-down-handler'",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/Symbol(react.forward_ref)(Styled(div))/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -1091,6 +1107,8 @@ Array [
   "/div/FrameUpdatingLayoutControl/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/FrameUpdatingLayoutControl/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/img",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/div:data-testid='frame-left-number-input-mouse-down-handler'",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -1112,6 +1130,8 @@ Array [
   "/div/FrameUpdatingLayoutControl/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/FrameUpdatingLayoutControl/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/img",
+  "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/div:data-testid='frame-top-number-input-mouse-down-handler'",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div/NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -1411,6 +1431,8 @@ Array [
   "/OpacityRow/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div//Symbol(react.memo)(NumberInput)",
+  "/div//NumberInput/img",
+  "/div//NumberInput/div",
   "/div//NumberInput/div:data-testid='opacity-mouse-down-handler'",
   "/div//NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div//NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -1982,6 +2004,8 @@ Array [
   "/OpacityRow/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div//Symbol(react.memo)(NumberInput)",
+  "/div//NumberInput/img",
+  "/div//NumberInput/div",
   "/div//NumberInput/div:data-testid='opacity-mouse-down-handler'",
   "/div//NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div//NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -2505,6 +2529,8 @@ Array [
   "/OpacityRow/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div//Symbol(react.memo)(NumberInput)",
+  "/div//NumberInput/img",
+  "/div//NumberInput/div",
   "/div//NumberInput/div:data-testid='opacity-mouse-down-handler'",
   "/div//NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div//NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -2906,6 +2932,8 @@ Array [
   "/OpacityRow/UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div",
   "/UtopiaSpiedFunctionComponent(MenuProvider)/div//Symbol(react.memo)(NumberInput)",
+  "/div//NumberInput/img",
+  "/div//NumberInput/div",
   "/div//NumberInput/div:data-testid='opacity-mouse-down-handler'",
   "/div//NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div//NumberInput/Symbol(react.forward_ref)(EmotionCssPropInternal)",

diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx
@@ -65,7 +65,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`749`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`753`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1097`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1101`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`529`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`539`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`702`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`712`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 })