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() }) })