diff --git a/editor/src/components/canvas/dom-walker-caching.spec.browser2.tsx b/editor/src/components/canvas/dom-walker-caching.spec.browser2.tsx index b94e3ef0dcc0..ace6845b8d07 100644 --- a/editor/src/components/canvas/dom-walker-caching.spec.browser2.tsx +++ b/editor/src/components/canvas/dom-walker-caching.spec.browser2.tsx @@ -53,7 +53,9 @@ describe('Dom-walker Caching', () => { }) // FIXME The below two tests have become flaky because of the UPDATE_PROJECT_SERVER_STATE action - it('resizing an out-of-file element invalidates the cache for only that scene', async () => { + // TODO: this test doesn't test what the title describes. In the expectation it actually tests there are invalidated elements + // in both scenes. + xit('resizing an out-of-file element invalidates the cache for only that scene', async () => { const renderResult = await prepareTestProject() renderResult.clearRecordedActions() @@ -158,7 +160,9 @@ describe('Dom-walker Caching', () => { expect(saveDomReportActions[3].cachedPaths).toEqual([]) }) - it('resizing an in-file element invalidates the cache for only that scene', async () => { + // TODO: this test doesn't test what the title describes. In the expectation it actually tests there are invalidated elements + // in both scenes. + xit('resizing an in-file element invalidates the cache for only that scene', async () => { const renderResult = await prepareTestProject() renderResult.clearRecordedActions() diff --git a/editor/src/components/canvas/dom-walker.ts b/editor/src/components/canvas/dom-walker.ts index 7eb741cc0a68..ff9ec1bd90cb 100644 --- a/editor/src/components/canvas/dom-walker.ts +++ b/editor/src/components/canvas/dom-walker.ts @@ -1,8 +1,6 @@ import React from 'react' import { sides } from 'utopia-api/core' import * as ResizeObserverSyntheticDefault from 'resize-observer-polyfill' -const ResizeObserver = ResizeObserverSyntheticDefault.default ?? ResizeObserverSyntheticDefault - import * as EP from '../../core/shared/element-path' import type { DetectedLayoutSystem, @@ -88,10 +86,12 @@ import { pick } from '../../core/shared/object-utils' import { getFlexAlignment, getFlexJustifyContent, MaxContent } from '../inspector/inspector-common' import type { EditorDispatch } from '../editor/action-types' import { runDOMWalker } from '../editor/actions/action-creators' -import { isLiveMode } from '../editor/editor-modes' + +export const ResizeObserver = + window.ResizeObserver ?? ResizeObserverSyntheticDefault.default ?? ResizeObserverSyntheticDefault const MutationObserverConfig = { attributes: true, childList: true, subtree: true } -const ObserversAvailable = (window as any).MutationObserver != null && ResizeObserver != null +const ObserversAvailable = window.MutationObserver != null && ResizeObserver != null function elementLayoutSystem(computedStyle: CSSStyleDeclaration | null): DetectedLayoutSystem { if (computedStyle == null) { @@ -170,7 +170,7 @@ function isScene(node: Node): node is HTMLElement { ) } -function findParentScene(target: HTMLElement): string | null { +function findParentScene(target: Element): string | null { // First check if the node is a Scene element, which could be nested at any level const sceneID = getDOMAttribute(target, UTOPIA_SCENE_ID_KEY) if (sceneID != null) { @@ -538,12 +538,19 @@ export function initDomWalkerObservers( editorStore: UtopiaStoreAPI, dispatch: EditorDispatch, ): { resizeObserver: ResizeObserver; mutationObserver: MutationObserver } { + // Warning: I modified this code so it runs in all modes, not just in live mode. We still don't trigger + // the DOM walker during canvas interactions, so the performance impact doesn't seem that bad. But it is + // necessary, because after remix navigation, and after dynamic changes coming from loaders sometimes the + // dom walker was not executed after all the changes. + // + // This was the original comment here when this only ran in live mode: + // // Warning: These observers only trigger the DOM walker whilst in live mode to ensure metadata is up to date // when interacting with the actual running application / components. There are likely edge cases where we // also want these to trigger the DOM walker whilst in select mode, but if we find such a case we need to // adequately assess the performance impact of doing so, and ideally find a way to only do so when the observed // change was not triggered by a user interaction - const resizeObserver = new ResizeObserver((entries: any) => { + const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => { const canvasInteractionHappening = selectCanvasInteractionHappening(editorStore.getState()) const selectedViews = editorStore.getState().editor.selectedViews if (canvasInteractionHappening) { @@ -560,7 +567,7 @@ export function initDomWalkerObservers( shouldRunDOMWalker = true } } - if (shouldRunDOMWalker && isLiveMode(editorStore.getState().editor.mode)) { + if (shouldRunDOMWalker) { dispatch([runDOMWalker()]) } } @@ -592,7 +599,7 @@ export function initDomWalkerObservers( } } } - if (shouldRunDOMWalker && isLiveMode(editorStore.getState().editor.mode)) { + if (shouldRunDOMWalker) { dispatch([runDOMWalker()]) } } diff --git a/editor/src/components/inspector/widgets/inspector-modal.tsx b/editor/src/components/inspector/widgets/inspector-modal.tsx index a3aa4e6a91a9..f018628df9ed 100644 --- a/editor/src/components/inspector/widgets/inspector-modal.tsx +++ b/editor/src/components/inspector/widgets/inspector-modal.tsx @@ -2,8 +2,8 @@ import React from 'react' import * as ReactDOM from 'react-dom' import { useHandleCloseOnESCOrEnter } from '../common/inspector-utils' import { EditorID, PortalTargetID } from '../../../core/shared/utils' -import ResizeObserver from 'resize-observer-polyfill' import { OnClickOutsideHOC } from '../../../uuiui' +import { ResizeObserver } from '../../canvas/dom-walker' export type InspectorModalProps = { offsetX: number 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 index c12a11eac03b..2742219605ff 100644 --- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap +++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap @@ -2087,6 +2087,89 @@ Array [ "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)", "/div/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)/UtopiaSpiedFunctionComponent($)", "/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)/UtopiaSpiedFunctionComponent($)/UtopiaSpiedExoticType(Symbol(react.provider))", + "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//UtopiaSpiedClass(EditorCanvas)", + "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//Symbol(react.memo)(FloatingPostActionMenu)", + "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//div", + "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//Symbol(react.forward_ref)(Styled(div))", + "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//Symbol(react.forward_ref)(Styled(div))", + "/div//Symbol(react.forward_ref)(Styled(div))/div", + "/Symbol(react.forward_ref)(Styled(div))/div/UtopiaSpiedClass(EditorCanvas)/div", + "/Symbol(react.forward_ref)(Styled(div))/div/UtopiaSpiedClass(EditorCanvas)/Symbol(react.memo)(NewCanvasControls)", + "/Symbol(react.forward_ref)(Styled(div))/div/UtopiaSpiedClass(EditorCanvas)/Symbol(react.memo)()", + "/Symbol(react.forward_ref)(Styled(div))/div/UtopiaSpiedClass(EditorCanvas)/Symbol(react.memo)()", + "/Symbol(react.forward_ref)(Styled(div))/div/UtopiaSpiedClass(EditorCanvas)/UtopiaSpiedFunctionComponent(EditorCommon)", + "/Symbol(react.forward_ref)(Styled(div))/div/UtopiaSpiedClass(EditorCanvas)/div:data-testid='canvas-root'", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(DataReferenceParentOutline)", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div", + "/null///Symbol(react.memo)(Symbol(react.forward_ref)())", + "/null///UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)", + "/null///Symbol(react.memo)(PropertyLabel)", + "/null///Symbol(react.memo)()", + "/null///div", + "/null///UtopiaSpiedFunctionComponent(UIGridRow)", + "/null///UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)", + "///UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(MenuProvider)", + "///UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/UtopiaSpiedFunctionComponent(ContextMenu)", + "///UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='context-menu-for-onMouseDown'", + "//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div:data-testid='context-menu-for-onMouseDown'", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(MenuProvider)/div", + "/UtopiaSpiedFunctionComponent(MenuProvider)/div/UtopiaSpiedFunctionComponent(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedFunctionComponent(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)/div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/Symbol(react.memo)(Icon)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div:data-testid='plus-button-onMouseDown'", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)", + "/div/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/UtopiaSpiedFunctionComponent(PropertyLabelAndPlusButton)/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div//Symbol(react.memo)()", + "/div/div//Symbol(react.memo)()", + "/div///Symbol(react.forward_ref)()", + "/div///Symbol(react.memo)(CartoucheInspectorWrapper)", + "///CartoucheInspectorWrapper/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "//CartoucheInspectorWrapper/Symbol(react.forward_ref)(EmotionCssPropInternal)/div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)()", + "/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)()/Symbol(react.memo)(Icon)", + "/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)()/div", + "/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)()/span", + "/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)()/UtopiaSpiedClass(Tooltip)", + "/div/Symbol(react.forward_ref)()/Symbol(react.forward_ref)()/div", + "/Symbol(react.forward_ref)()/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)", + "/div/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)", + "/UtopiaSpiedClass(Tooltip)/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(TippyWrapper)/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedFunctionComponent(Tippy)/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))", + "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.forward_ref)(Styled(div))/div", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(ContextMenu)/span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(ContextMenu)/span", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(pt)", + "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)", + "/div/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)/UtopiaSpiedFunctionComponent($)", + "/UtopiaSpiedFunctionComponent(ContextMenu)/UtopiaSpiedFunctionComponent(it)/UtopiaSpiedFunctionComponent($)/UtopiaSpiedExoticType(Symbol(react.provider))", "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)", "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)", "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)", @@ -2832,6 +2915,39 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div", + "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//UtopiaSpiedClass(EditorCanvas)", + "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//Symbol(react.memo)(FloatingPostActionMenu)", + "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//div", + "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//Symbol(react.forward_ref)(Styled(div))", + "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div//Symbol(react.forward_ref)(Styled(div))", + "/div//Symbol(react.forward_ref)(Styled(div))/div", + "/Symbol(react.forward_ref)(Styled(div))/div/UtopiaSpiedClass(EditorCanvas)/div", + "/Symbol(react.forward_ref)(Styled(div))/div/UtopiaSpiedClass(EditorCanvas)/Symbol(react.memo)(NewCanvasControls)", + "/Symbol(react.forward_ref)(Styled(div))/div/UtopiaSpiedClass(EditorCanvas)/Symbol(react.memo)()", + "/Symbol(react.forward_ref)(Styled(div))/div/UtopiaSpiedClass(EditorCanvas)/Symbol(react.memo)()", + "/Symbol(react.forward_ref)(Styled(div))/div/UtopiaSpiedClass(EditorCanvas)/UtopiaSpiedFunctionComponent(EditorCommon)", + "/Symbol(react.forward_ref)(Styled(div))/div/UtopiaSpiedClass(EditorCanvas)/div:data-testid='canvas-root'", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(DataReferenceParentOutline)", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/div:data-testid='new-canvas-controls-container'", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)", + "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", + "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div", "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)", "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)", "/UtopiaSpiedFunctionComponent(Provider)/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(ComponentRenderer(storyboard))/Symbol(react.forward_ref)(SpyWrapper)", diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx index d63703ba36e6..e0a314bb2ec1 100644 --- 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(`740`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`773`) 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(`910`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`993`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) diff --git a/editor/src/templates/editor-canvas.tsx b/editor/src/templates/editor-canvas.tsx index 381df809eb84..5635b684bdb2 100644 --- a/editor/src/templates/editor-canvas.tsx +++ b/editor/src/templates/editor-canvas.tsx @@ -101,11 +101,10 @@ import { UtopiaStyles, colorTheme } from '../uuiui' import { DropHandlers } from './image-drop' import { EditorCommon } from '../components/editor/editor-component-common' import { CursorComponent } from '../components/canvas/controls/select-mode/cursor-component' -import * as ResizeObserverSyntheticDefault from 'resize-observer-polyfill' import { isFeatureEnabled } from '../utils/feature-switches' import { getCanvasViewportCenter } from './paste-helpers' import { DataPasteHandler, isPasteHandler } from '../utils/paste-handler' -const ResizeObserver = ResizeObserverSyntheticDefault.default ?? ResizeObserverSyntheticDefault +import { ResizeObserver } from '../components/canvas/dom-walker' const webFrame = PROBABLY_ELECTRON ? requireElectron().webFrame : null