From bcea93ef178d1fb9e58a94aa3b892745a42cc2ff Mon Sep 17 00:00:00 2001 From: Balint Gabor <127662+gbalint@users.noreply.github.com> Date: Tue, 15 Oct 2024 17:31:11 +0200 Subject: [PATCH] GridMeasurementHelper component to continuously measure grid cells (#6517) **Problem:** When you reparent from a grid to another grid, for a single frame the element blinks at the same cell position as it was in the original grid: https://screenshot.click/09-31-10wrd-ysw94.mp4 **Root cause:** As you hover over the target grid, the grid-reparent-strategy is selected. It triggers a showGridControl command, so the grid control is shown and the cells can be measured. However, it won't be able to position to the real target cell in this frame yet, because the control is not enabled yet, so we don't have the cell bounds in the metadata. **Fix:** Instead of using grid controls to measure let show permanent grid measurement helpers so grids can always be measured. **Commit Details:** (< vv pls delete this section if's not relevant) - Added memoized function `getAllGrids` which returns all the grids from the metadata - Added `GridMeasurementHelper` component which renders a grid with placeholder divs in its cells (similarly to `GridControl`, but much-much simpler) - Rendering `GridMeasurementHelper` for all grids - Use rendered grid measurement helpers in dom-walker to measure the size of grid cell bounds - Remove all the hacks (most notably `getMetadataWithGridCellBounds`) which made it possible to use latestMetadata in interaction when startingMetadata did not include grid cell bounds. This is not needed anymore, because the grid cells are always measured using the always-on `GridMeasurementHelper` components **Manual Tests:** I hereby swear that: - [x] I opened a hydrogen project and it loaded - [x] I could navigate to various routes in Play mode --- .../grid-draw-to-insert-strategy.tsx | 14 +- .../strategies/grid-helpers.ts | 56 ------ .../strategies/grid-reparent-strategy.tsx | 24 +-- .../grid-resize-element-strategy.ts | 17 +- .../controls/grid-controls-for-strategies.tsx | 71 +++++++- .../canvas/controls/grid-controls.tsx | 162 ++++++++++++++---- .../canvas/controls/new-canvas-controls.tsx | 7 +- editor/src/components/canvas/dom-walker.ts | 5 +- .../src/core/model/element-metadata-utils.ts | 5 + ...performance-regression-tests.spec.tsx.snap | 26 ++- .../performance-regression-tests.spec.tsx | 8 +- 11 files changed, 249 insertions(+), 146 deletions(-) diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx index 7dae405f06a4..fea428a411d8 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-draw-to-insert-strategy.tsx @@ -43,7 +43,7 @@ import { getStyleAttributesForFrameInAbsolutePosition, updateInsertionSubjectWithAttributes, } from './draw-to-insert-metastrategy' -import { getMetadataWithGridCellBounds, setGridPropsCommands } from './grid-helpers' +import { setGridPropsCommands } from './grid-helpers' import { newReparentSubjects } from './reparent-helpers/reparent-strategy-helpers' import { getReparentTargetUnified } from './reparent-helpers/reparent-strategy-parent-lookup' import { getGridCellUnderMouseFromMetadata } from './grid-cell-bounds' @@ -132,13 +132,10 @@ const gridDrawToInsertStrategyInner = canvasState.propertyControlsInfo, )?.newParent.intendedParentPath - const { metadata: parent, customStrategyState: updatedCustomState } = - getMetadataWithGridCellBounds( - targetParent, - canvasState.startingMetadata, - interactionSession.latestMetadata, - customStrategyState, - ) + const parent = MetadataUtils.findElementByElementPath( + canvasState.startingMetadata, + targetParent, + ) if (targetParent == null || parent == null || !MetadataUtils.isGridLayoutedContainer(parent)) { return null @@ -175,7 +172,6 @@ const gridDrawToInsertStrategyInner = updateHighlightedViews('mid-interaction', [targetParent]), ], [targetParent], - updatedCustomState ?? undefined, ) } diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts index bf51b4149b2c..8f871138c922 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-helpers.ts @@ -710,62 +710,6 @@ export function getGridRelatedIndexes(params: { return expandedRelatedIndexes[params.index] ?? [] } -export function getMetadataWithGridCellBounds( - path: ElementPath | null | undefined, - startingMetadata: ElementInstanceMetadataMap, - latestMetadata: ElementInstanceMetadataMap, - customStrategyState: CustomStrategyState, -): { - metadata: ElementInstanceMetadata | null - customStrategyState: CustomStrategyState | null -} { - if (path == null) { - return { - metadata: null, - customStrategyState: null, - } - } - - const fromStartingMetadata = MetadataUtils.findElementByElementPath(startingMetadata, path) - - if (fromStartingMetadata?.specialSizeMeasurements.gridCellGlobalFrames != null) { - return { - metadata: fromStartingMetadata, - customStrategyState: null, - } - } - - const fromStrategyState = customStrategyState.grid.metadataCacheForGrids[EP.toString(path)] - if (fromStrategyState != null) { - return { - metadata: fromStrategyState, - customStrategyState: null, - } - } - - const fromLatestMetadata = MetadataUtils.findElementByElementPath(latestMetadata, path) - if (fromLatestMetadata?.specialSizeMeasurements.gridCellGlobalFrames != null) { - return { - metadata: fromLatestMetadata, - customStrategyState: { - ...customStrategyState, - grid: { - ...customStrategyState.grid, - metadataCacheForGrids: { - ...customStrategyState.grid.metadataCacheForGrids, - [EP.toString(path)]: fromLatestMetadata, - }, - }, - }, - } - } - - return { - metadata: fromStartingMetadata, - customStrategyState: null, - } -} - function getOriginalElementGridConfiguration( gridCellGlobalFrames: GridCellGlobalFrames, interactionData: DragInteractionData, diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx index 9546b40916f7..cd20d3fa7db4 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-reparent-strategy.tsx @@ -17,7 +17,6 @@ import type { InsertionPath } from '../../../editor/store/insertion-path' import { CSSCursor } from '../../canvas-types' import { setCursorCommand } from '../../commands/set-cursor-command' import { propertyToSet, updateBulkProperties } from '../../commands/set-property-command' -import { showGridControls } from '../../commands/show-grid-controls-command' import { updateSelectedViews } from '../../commands/update-selected-views-command' import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-strategies' import { ParentBounds } from '../../controls/parent-bounds' @@ -39,7 +38,7 @@ import { import type { DragInteractionData, InteractionSession, UpdatedPathMap } from '../interaction-state' import { honoursPropsPosition, shouldKeepMovingDraggedGroupChildren } from './absolute-utils' import { replaceFragmentLikePathsWithTheirChildrenRecursive } from './fragment-like-helpers' -import { getMetadataWithGridCellBounds, runGridRearrangeMove } from './grid-helpers' +import { runGridRearrangeMove } from './grid-helpers' import { ifAllowedToReparent, isAllowedToReparent } from './reparent-helpers/reparent-helpers' import { removeAbsolutePositioningProps } from './reparent-helpers/reparent-property-changes' import type { ReparentTarget } from './reparent-helpers/reparent-strategy-helpers' @@ -164,13 +163,10 @@ export function applyGridReparent( return emptyStrategyApplicationResult } - const { metadata: grid, customStrategyState: updatedCustomState } = - getMetadataWithGridCellBounds( - newParent.intendedParentPath, - canvasState.startingMetadata, - interactionSession.latestMetadata, - customStrategyState, - ) + const grid = MetadataUtils.findElementByElementPath( + canvasState.startingMetadata, + newParent.intendedParentPath, + ) if (grid == null) { return strategyApplicationResult([], [newParent.intendedParentPath]) @@ -231,12 +227,6 @@ export function applyGridReparent( newParent.intendedParentPath, ]) - const baseCustomState = updatedCustomState ?? customStrategyState - const customStrategyStatePatch = { - ...baseCustomState, - elementsToRerender: elementsToRerender, - } - return strategyApplicationResult( [ ...outcomes.flatMap((c) => c.commands), @@ -245,7 +235,9 @@ export function applyGridReparent( setCursorCommand(CSSCursor.Reparent), ], elementsToRerender, - customStrategyStatePatch, + { + elementsToRerender: elementsToRerender, + }, ) }, ) diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts index fbd27c0778ba..ed1a5e39d48b 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts @@ -1,12 +1,10 @@ import { MetadataUtils } from '../../../../core/model/element-metadata-utils' import * as EP from '../../../../core/shared/element-path' -import type { GridElementProperties, GridPosition } from '../../../../core/shared/element-template' import { type CanvasRectangle, isInfinityRectangle, rectangleIntersection, } from '../../../../core/shared/math-utils' -import { isCSSKeyword } from '../../../inspector/common/css-utils' import { isFillOrStretchModeApplied } from '../../../inspector/inspector-common' import { controlsForGridPlaceholders, @@ -22,13 +20,12 @@ import { strategyApplicationResult, } from '../canvas-strategy-types' import type { InteractionSession } from '../interaction-state' -import { getMetadataWithGridCellBounds, setGridPropsCommands } from './grid-helpers' +import { setGridPropsCommands } from './grid-helpers' import { resizeBoundingBoxFromSide } from './resize-helpers' export const gridResizeElementStrategy: CanvasStrategyFactory = ( canvasState: InteractionCanvasState, interactionSession: InteractionSession | null, - customState, ) => { const selectedElements = getTargetPathsFromInteractionTarget(canvasState.interactionTarget) if (selectedElements.length !== 1) { @@ -86,13 +83,10 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = ( return emptyStrategyApplicationResult } - const { metadata: container, customStrategyState: updatedCustomState } = - getMetadataWithGridCellBounds( - EP.parentPath(selectedElement), - canvasState.startingMetadata, - interactionSession.latestMetadata, - customState, - ) + const container = MetadataUtils.findElementByElementPath( + canvasState.startingMetadata, + EP.parentPath(selectedElement), + ) if (container == null) { return emptyStrategyApplicationResult @@ -123,7 +117,6 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = ( return strategyApplicationResult( setGridPropsCommands(selectedElement, gridTemplate, gridProps), [parentGridPath], - updatedCustomState ?? undefined, ) }, } diff --git a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx index c1e6beda11d3..5d6fd793dfe5 100644 --- a/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx +++ b/editor/src/components/canvas/controls/grid-controls-for-strategies.tsx @@ -1,5 +1,6 @@ /** @jsxRuntime classic */ /** @jsx jsx */ +import fastDeepEqual from 'fast-deep-equal' import type { Sides } from 'utopia-api/core' import type { ElementPath } from 'utopia-shared/src/types' import { isStaticGridRepeat, printGridAutoOrTemplateBase } from '../../inspector/common/css-utils' @@ -61,22 +62,72 @@ export function getNullableAutoOrTemplateBaseString( } } -export type GridData = { - elementPath: ElementPath +export type GridMeasurementHelperData = { frame: CanvasRectangle gridTemplateColumns: GridAutoOrTemplateBase | null gridTemplateRows: GridAutoOrTemplateBase | null - gridTemplateColumnsFromProps: GridAutoOrTemplateBase | null - gridTemplateRowsFromProps: GridAutoOrTemplateBase | null gap: number | null - justifyContent: string | null - alignContent: string | null rowGap: number | null columnGap: number | null + justifyContent: string | null + alignContent: string | null padding: Sides - rows: number columns: number cells: number +} + +export function useGridMeasurentHelperData( + elementPath: ElementPath, +): GridMeasurementHelperData | null { + return useEditorState( + Substores.metadata, + (store) => { + const element = MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, elementPath) + + const targetGridContainer = MetadataUtils.isGridLayoutedContainer(element) ? element : null + + if ( + targetGridContainer == null || + targetGridContainer.globalFrame == null || + !isFiniteRectangle(targetGridContainer.globalFrame) + ) { + return null + } + + const columns = getCellsCount( + targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateColumns, + ) + const rows = getCellsCount( + targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateRows, + ) + + return { + frame: targetGridContainer.globalFrame, + gridTemplateColumns: + targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateColumns, + gridTemplateRows: + targetGridContainer.specialSizeMeasurements.containerGridProperties.gridTemplateRows, + gap: targetGridContainer.specialSizeMeasurements.gap, + rowGap: targetGridContainer.specialSizeMeasurements.rowGap, + columnGap: targetGridContainer.specialSizeMeasurements.columnGap, + justifyContent: targetGridContainer.specialSizeMeasurements.justifyContent, + alignContent: targetGridContainer.specialSizeMeasurements.alignContent, + padding: targetGridContainer.specialSizeMeasurements.padding, + columns: columns, + cells: rows * columns, + } + }, + 'useGridMeasurentHelperData', + fastDeepEqual, //TODO: this should not be needed, but it seems EditorStateKeepDeepEquality is not running, and metadata reference is always updated + ) +} + +export type GridData = GridMeasurementHelperData & { + elementPath: ElementPath + gridTemplateColumnsFromProps: GridAutoOrTemplateBase | null + gridTemplateRowsFromProps: GridAutoOrTemplateBase | null + rows: number + cells: number metadata: ElementInstanceMetadata } @@ -156,6 +207,12 @@ export const GridRowColumnResizingControls = ) export const GridControlsKey = (gridPath: ElementPath) => `grid-controls-${EP.toString(gridPath)}` +export const GridControlKey = (gridPath: ElementPath) => `grid-control-${EP.toString(gridPath)}` + +export const GridMeasurementHelpersKey = (gridPath: ElementPath) => + `grid-measurement-helpers-${EP.toString(gridPath)}` +export const GridMeasurementHelperKey = (gridPath: ElementPath) => + `grid-measurement-helper-${EP.toString(gridPath)}` export interface GridControlProps { grid: GridData diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx index 7904bc99196b..9393c96963bb 100644 --- a/editor/src/components/canvas/controls/grid-controls.tsx +++ b/editor/src/components/canvas/controls/grid-controls.tsx @@ -11,7 +11,10 @@ import { MetadataUtils } from '../../../core/model/element-metadata-utils' import { mapDropNulls, range, stripNulls, uniqBy } from '../../../core/shared/array-utils' import { defaultEither } from '../../../core/shared/either' import * as EP from '../../../core/shared/element-path' -import type { GridAutoOrTemplateDimensions } from '../../../core/shared/element-template' +import type { + ElementInstanceMetadataMap, + GridAutoOrTemplateDimensions, +} from '../../../core/shared/element-template' import { isGridAutoOrTemplateDimensions, type GridAutoOrTemplateBase, @@ -71,13 +74,21 @@ import { windowToCanvasCoordinates } from '../dom-lookup' import type { Axis } from '../gap-utils' import { useCanvasAnimation } from '../ui-jsx-canvas-renderer/animation-context' import { CanvasOffsetWrapper } from './canvas-offset-wrapper' -import type { GridControlsProps, GridData } from './grid-controls-for-strategies' +import type { + GridControlsProps, + GridData, + GridMeasurementHelperData, +} from './grid-controls-for-strategies' import { edgePositionToGridResizeEdge, getNullableAutoOrTemplateBaseString, GridCellTestId, + GridControlKey, gridEdgeToEdgePosition, + GridMeasurementHelperKey, + GridMeasurementHelpersKey, useGridData, + useGridMeasurentHelperData, } from './grid-controls-for-strategies' import { useMaybeHighlightElement } from './select-mode/select-mode-hooks' import { useResizeEdges } from './select-mode/use-resize-edges' @@ -763,44 +774,14 @@ const GridControl = React.memo(({ grid }) => { }) const placeholders = range(0, grid.cells) - let style: CSSProperties = { - position: 'absolute', - top: grid.frame.y, - left: grid.frame.x, - width: grid.frame.width, - height: grid.frame.height, - display: 'grid', - gridTemplateColumns: getNullableAutoOrTemplateBaseString(grid.gridTemplateColumns), - gridTemplateRows: getNullableAutoOrTemplateBaseString(grid.gridTemplateRows), + + const style: CSSProperties = { + ...getGridControlBaseStyle(grid), backgroundColor: activelyDraggingOrResizingCell != null ? colorTheme.primary10.value : 'transparent', outline: `1px solid ${ activelyDraggingOrResizingCell != null ? colorTheme.primary.value : 'transparent' }`, - justifyContent: grid.justifyContent ?? 'initial', - alignContent: grid.alignContent ?? 'initial', - pointerEvents: 'none', - padding: - grid.padding == null - ? 0 - : `${grid.padding.top}px ${grid.padding.right}px ${grid.padding.bottom}px ${grid.padding.left}px`, - } - - // Gap needs to be set only if the other two are not present or we'll have rendering issues - // due to how measurements are calculated. - if (grid.rowGap != null && grid.columnGap != null) { - style.rowGap = grid.rowGap - style.columnGap = grid.columnGap - } else { - if (grid.gap != null) { - style.gap = grid.gap - } - if (grid.rowGap != null) { - style.rowGap = grid.rowGap - } - if (grid.columnGap != null) { - style.columnGap = grid.columnGap - } } return ( @@ -926,6 +907,70 @@ const GridControl = React.memo(({ grid }) => { }) GridControl.displayName = 'GridControl' +export const GridMeasurementHelpers = React.memo(() => { + const metadata = useEditorState( + Substores.metadata, + (store) => store.editor.jsxMetadata, + 'GridMeasurementHelpers metadata', + ) + + const grids = useAllGrids(metadata) + + return ( + + {grids.map((grid) => { + return + })} + + ) +}) +GridMeasurementHelpers.displayName = 'GridMeasurementHelpers' + +export interface GridMeasurementHelperProps { + elementPath: ElementPath +} + +const GridMeasurementHelper = React.memo<{ elementPath: ElementPath }>(({ elementPath }) => { + const gridData = useGridMeasurentHelperData(elementPath) + + if (gridData == null) { + return null + } + + const placeholders = range(0, gridData.cells) + + const style: CSSProperties = { + ...getGridControlBaseStyle(gridData), + opacity: 1, + } + + return ( +
+ {placeholders.map((cell) => { + const countedRow = Math.floor(cell / gridData.columns) + 1 + const countedColumn = Math.floor(cell % gridData.columns) + 1 + const id = `${GridMeasurementHelperKey(elementPath)}-${countedRow}-${countedColumn}` + return ( +
+ ) + })} +
+ ) +}) +GridMeasurementHelper.displayName = 'GridMeasurementHelper' + export const GridControlsComponent = ({ targets }: GridControlsProps) => { const targetRootCell = useEditorState( Substores.canvas, @@ -949,7 +994,7 @@ export const GridControlsComponent = ({ targets }: GridControlsProps) => {
{grids.map((grid) => { - return + return })} @@ -1592,3 +1637,48 @@ function gridPlaceholderTopOrLeftPosition(scale: number): string { function gridPlaceholderWidthOrHeight(scale: number): string { return `calc(100% + ${(borderExtension * 2) / scale}px)` } + +function useAllGrids(metadata: ElementInstanceMetadataMap) { + return React.useMemo(() => { + return MetadataUtils.getAllGrids(metadata) + }, [metadata]) +} + +function getGridControlBaseStyle(gridData: GridMeasurementHelperData) { + let style: CSSProperties = { + position: 'absolute', + top: gridData.frame.y, + left: gridData.frame.x, + width: gridData.frame.width, + height: gridData.frame.height, + display: 'grid', + gridTemplateColumns: getNullableAutoOrTemplateBaseString(gridData.gridTemplateColumns), + gridTemplateRows: getNullableAutoOrTemplateBaseString(gridData.gridTemplateRows), + justifyContent: gridData.justifyContent ?? 'initial', + alignContent: gridData.alignContent ?? 'initial', + pointerEvents: 'none', + padding: + gridData.padding == null + ? 0 + : `${gridData.padding.top}px ${gridData.padding.right}px ${gridData.padding.bottom}px ${gridData.padding.left}px`, + } + + // Gap needs to be set only if the other two are not present or we'll have rendering issues + // due to how measurements are calculated. + if (gridData.rowGap != null && gridData.columnGap != null) { + style.rowGap = gridData.rowGap + style.columnGap = gridData.columnGap + } else { + if (gridData.gap != null) { + style.gap = gridData.gap + } + if (gridData.rowGap != null) { + style.rowGap = gridData.rowGap + } + if (gridData.columnGap != null) { + style.columnGap = gridData.columnGap + } + } + + return style +} diff --git a/editor/src/components/canvas/controls/new-canvas-controls.tsx b/editor/src/components/canvas/controls/new-canvas-controls.tsx index be85b3261131..344d57ed840d 100644 --- a/editor/src/components/canvas/controls/new-canvas-controls.tsx +++ b/editor/src/components/canvas/controls/new-canvas-controls.tsx @@ -24,6 +24,7 @@ import { ElementContextMenu } from '../../element-context-menu' import type { Mode } from '../../editor/editor-modes' import { isCommentMode, + isInsertMode, isLiveMode, isSelectMode, isSelectModeWithArea, @@ -74,6 +75,7 @@ import { NO_OP } from '../../../core/shared/utils' import { useIsMyProject } from '../../editor/store/collaborative-editing' import { MultiplayerWrapper } from '../../../utils/multiplayer-wrapper' import { MultiplayerPresence } from '../multiplayer-presence' +import { GridMeasurementHelpers } from './grid-controls' export const CanvasControlsContainerID = 'new-canvas-controls-container' @@ -596,6 +598,10 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => { isSelectOrInsertMode(editorMode) && !EP.multiplePathsAllWithTheSameUID(localSelectedViews), <> + {when( + isSelectMode(editorMode) || isInsertMode(editorMode), + , + )} {strategyControls.map((c) => ( > | null = null if (path != null) { - const gridControlElement = document.getElementById(`grid-${path}`) + const gridControlElement = document.getElementById( + GridMeasurementHelperKey(EP.fromString(path)), + ) if (gridControlElement != null) { gridCellGlobalFrames = [] for (const cell of gridControlElement.children) { diff --git a/editor/src/core/model/element-metadata-utils.ts b/editor/src/core/model/element-metadata-utils.ts index e9c448db5d3e..ac005c2026ac 100644 --- a/editor/src/core/model/element-metadata-utils.ts +++ b/editor/src/core/model/element-metadata-utils.ts @@ -408,6 +408,11 @@ export const MetadataUtils = { specialSizeMeasurements.elementGridPropertiesFromProps.gridRowEnd == null ) }, + getAllGrids(metadata: ElementInstanceMetadataMap): Array { + return Object.values(metadata) + .filter((m) => MetadataUtils.isGridLayoutedContainer(m)) + .map((m) => m.elementPath) + }, isComponentInstanceFromMetadata( metadata: ElementInstanceMetadataMap, path: ElementPath, 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 18108e135a96..61e602e6e233 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 @@ -32,6 +32,7 @@ Array [ "/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)(GridMeasurementHelpers)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -53,7 +54,9 @@ Array [ "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))", "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()", "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))", - "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)()//Symbol(react.memo)()", + "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers/Symbol(react.memo)()", + "/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers//div", + "/null/Symbol(react.memo)()//Symbol(react.memo)()", "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))", "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))", "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))", @@ -84,7 +87,7 @@ Array [ "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div", "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'", "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'", - "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)()//Symbol(react.memo)()", + "/null/Symbol(react.memo)()//Symbol(react.memo)()", "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))", "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div", "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div/ElementsOutsideVisibleAreaIndicator/Symbol(react.memo)(IndicatorArrow)", @@ -812,6 +815,7 @@ Array [ "/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)(GridMeasurementHelpers)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -833,7 +837,9 @@ Array [ "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))", "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()", "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))", - "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)()//Symbol(react.memo)()", + "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers/Symbol(react.memo)()", + "/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers//div", + "/null/Symbol(react.memo)()//Symbol(react.memo)()", "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))", "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))", "/Symbol(react.memo)()///Symbol(react.memo)(Symbol(react.forward_ref)(ResizeEdge))", @@ -864,7 +870,7 @@ Array [ "/div/Symbol(react.memo)(Symbol(react.forward_ref)(ResizePoint))/Symbol(react.forward_ref)(ResizePoint)/div", "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'", "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'", - "/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.memo)()//Symbol(react.memo)()", + "/null/Symbol(react.memo)()//Symbol(react.memo)()", "/Symbol(react.memo)()///UtopiaSpiedExoticType(Symbol(react.fragment))", "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div", "/UtopiaSpiedFunctionComponent(SimpleFlexColumn)/div/ElementsOutsideVisibleAreaIndicator/Symbol(react.memo)(IndicatorArrow)", @@ -1481,6 +1487,7 @@ Array [ "/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)(GridMeasurementHelpers)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -1770,6 +1777,7 @@ Array [ "/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)(GridMeasurementHelpers)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -1781,6 +1789,8 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers/Symbol(react.memo)()", + "/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers//div", "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'", "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'", "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div", @@ -2371,6 +2381,7 @@ Array [ "/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)(GridMeasurementHelpers)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -2478,6 +2489,7 @@ Array [ "/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)(GridMeasurementHelpers)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -2596,6 +2608,7 @@ Array [ "/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)(GridMeasurementHelpers)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -2873,6 +2886,7 @@ Array [ "/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)(GridMeasurementHelpers)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -2884,6 +2898,8 @@ Array [ "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)(SelectionAreaRectangle)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", "/div/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))", + "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers/Symbol(react.memo)()", + "/UtopiaSpiedExoticType(Symbol(react.fragment))/GridMeasurementHelpers//div", "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='SizeLabelTestId'", "/div/Symbol(react.memo)(Symbol(react.forward_ref)(SizeLabel))/Symbol(react.forward_ref)(SizeLabel)/div:data-testid='parent-resize-label'", "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div", @@ -3350,6 +3366,7 @@ Array [ "/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)(GridMeasurementHelpers)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", @@ -3399,6 +3416,7 @@ Array [ "/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)(GridMeasurementHelpers)", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/Symbol(react.memo)()", "/div/div/UtopiaSpiedFunctionComponent(NewCanvasControlsInner)/UtopiaSpiedExoticType(Symbol(react.fragment))", diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx index 7f53a8cd0879..435dc603ed7f 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(`858`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`864`) 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(`1110`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1116`) 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(`650`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`653`) 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(`775`) + expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`778`) expect(renderResult.getRenderInfo()).toMatchSnapshot() }) })