@elementor/editor-canvas 4.2.0-913 → 4.2.0-914

package/src/components/grid-outline/__tests__/grid-outline.test.tsx

@@ -36,97 +36,120 @@ describe( '<GridOutline />', () => {
 		expect( svg ).toHaveAttribute( 'height', '200' );
 	} );
 
-	it( 'draws one rect per cell for an N×M grid', () => {
-		const { container } = renderWithTheme(
-			<GridOutline
-				tracks={ makeTracks( { columns: [ 100, 100, 100 ], rows: [ 80, 80 ] } ) }
-				width={ 300 }
-				height={ 160 }
-			/>
-		);
-
-		expect( container.querySelectorAll( 'rect' ) ).toHaveLength( 3 * 2 );
-	} );
-
-	it( 'keeps the cell count stable with a gap and offsets cells past the gap', () => {
-		const { container } = renderWithTheme(
-			<GridOutline
-				tracks={ makeTracks( {
-					columns: [ 100, 100, 100 ],
-					rows: [ 80, 80 ],
-					columnGap: 10,
-					rowGap: 8,
-				} ) }
-				width={ 320 }
-				height={ 176 }
-			/>
-		);
-
-		const rects = Array.from( container.querySelectorAll( 'rect' ) );
-		expect( rects ).toHaveLength( 3 * 2 );
-
-		const xs = rects.map( ( rect ) => rect.getAttribute( 'x' ) );
-		expect( xs ).toContain( '0.5' );
-		expect( xs ).toContain( '110.5' );
-		expect( xs ).toContain( '220.5' );
-	} );
+	describe( 'no gap', () => {
+		it( 'draws one line per unique boundary for an N×M grid', () => {
+			const { container } = renderWithTheme(
+				<GridOutline
+					tracks={ makeTracks( { columns: [ 100, 100, 100 ], rows: [ 80, 80 ] } ) }
+					width={ 300 }
+					height={ 160 }
+				/>
+			);
+
+			expect( container.querySelectorAll( 'line' ) ).toHaveLength( 4 + 3 );
+			expect( container.querySelectorAll( 'rect' ) ).toHaveLength( 0 );
+		} );
 
-	it( 'snaps cell coordinates to half pixels for crisp 1px strokes', () => {
-		const { container } = renderWithTheme(
-			<GridOutline
-				tracks={ makeTracks( {
-					columns: [ 100, 100 ],
-					rows: [ 80 ],
-					padding: { top: 10, right: 10, bottom: 10, left: 10 },
-				} ) }
-				width={ 220 }
-				height={ 100 }
-			/>
-		);
+		it( 'snaps line coordinates to half pixels for crisp 1px strokes', () => {
+			const { container } = renderWithTheme(
+				<GridOutline
+					tracks={ makeTracks( {
+						columns: [ 100, 100 ],
+						rows: [ 80 ],
+						padding: { top: 10, right: 10, bottom: 10, left: 10 },
+					} ) }
+					width={ 220 }
+					height={ 100 }
+				/>
+			);
+
+			const verticalXs = Array.from( container.querySelectorAll( 'line' ) )
+				.filter( ( line ) => line.getAttribute( 'x1' ) === line.getAttribute( 'x2' ) )
+				.map( ( line ) => line.getAttribute( 'x1' ) );
+			expect( verticalXs ).toEqual( [ '10.5', '110.5', '210.5' ] );
+		} );
 
-		const xs = Array.from( container.querySelectorAll( 'rect' ) ).map( ( rect ) => rect.getAttribute( 'x' ) );
-		expect( xs ).toEqual( [ '10.5', '110.5' ] );
-	} );
+		it( 'passes the resolved iframe border color through to each line', () => {
+			const { container } = renderWithTheme(
+				<GridOutline
+					tracks={ makeTracks( { columns: [ 100 ], rows: [ 100 ], borderColor: '#abcdef' } ) }
+					width={ 100 }
+					height={ 100 }
+				/>
+			);
+
+			const lines = container.querySelectorAll( 'line' );
+			expect( lines.length ).toBeGreaterThan( 0 );
+			lines.forEach( ( line ) => {
+				expect( line ).toHaveAttribute( 'stroke', '#abcdef' );
+			} );
+		} );
 
-	it( 'spans a single full-width cell per row when only rows are defined', () => {
-		const { container } = renderWithTheme(
-			<GridOutline
-				tracks={ makeTracks( {
-					rows: [ 50, 50 ],
-					padding: { top: 8, right: 12, bottom: 6, left: 4 },
-				} ) }
-				width={ 300 }
-				height={ 120 }
-			/>
-		);
+		it( 'renders nothing when there are no tracks on either axis', () => {
+			const { container } = renderWithTheme(
+				<GridOutline tracks={ makeTracks() } width={ 100 } height={ 100 } />
+			);
 
-		const rects = Array.from( container.querySelectorAll( 'rect' ) );
-		expect( rects ).toHaveLength( 2 );
-		for ( const rect of rects ) {
-			expect( rect ).toHaveAttribute( 'x', '4.5' );
-			expect( rect ).toHaveAttribute( 'width', '284' );
-		}
+			expect( container.querySelectorAll( 'line' ) ).toHaveLength( 0 );
+			expect( container.querySelectorAll( 'rect' ) ).toHaveLength( 0 );
+		} );
 	} );
 
-	it( 'passes the resolved iframe border color through to each cell', () => {
-		const { container } = renderWithTheme(
-			<GridOutline
-				tracks={ makeTracks( { columns: [ 100 ], rows: [ 100 ], borderColor: '#abcdef' } ) }
-				width={ 100 }
-				height={ 100 }
-			/>
-		);
-
-		const rects = container.querySelectorAll( 'rect' );
-		expect( rects.length ).toBeGreaterThan( 0 );
-		rects.forEach( ( rect ) => {
-			expect( rect ).toHaveAttribute( 'stroke', '#abcdef' );
+	describe( 'with a gap', () => {
+		it( 'draws one rect per cell so each cell has its own framed perimeter', () => {
+			const { container } = renderWithTheme(
+				<GridOutline
+					tracks={ makeTracks( {
+						columns: [ 100, 100, 100 ],
+						rows: [ 80, 80 ],
+						columnGap: 10,
+						rowGap: 8,
+					} ) }
+					width={ 320 }
+					height={ 176 }
+				/>
+			);
+
+			expect( container.querySelectorAll( 'rect' ) ).toHaveLength( 3 * 2 );
+			expect( container.querySelectorAll( 'line' ) ).toHaveLength( 0 );
 		} );
-	} );
 
-	it( 'renders no cells when there are no tracks on either axis', () => {
-		const { container } = renderWithTheme( <GridOutline tracks={ makeTracks() } width={ 100 } height={ 100 } /> );
+		it( 'offsets cells past the gap', () => {
+			const { container } = renderWithTheme(
+				<GridOutline
+					tracks={ makeTracks( {
+						columns: [ 100, 100, 100 ],
+						rows: [ 80 ],
+						columnGap: 10,
+					} ) }
+					width={ 320 }
+					height={ 80 }
+				/>
+			);
+
+			const xs = Array.from( container.querySelectorAll( 'rect' ) ).map( ( rect ) => rect.getAttribute( 'x' ) );
+			expect( xs ).toEqual( [ '0.5', '110.5', '220.5' ] );
+		} );
 
-		expect( container.querySelectorAll( 'rect' ) ).toHaveLength( 0 );
+		it( 'passes the resolved iframe border color through to each cell', () => {
+			const { container } = renderWithTheme(
+				<GridOutline
+					tracks={ makeTracks( {
+						columns: [ 100, 100 ],
+						rows: [ 100 ],
+						columnGap: 10,
+						borderColor: '#abcdef',
+					} ) }
+					width={ 210 }
+					height={ 100 }
+				/>
+			);
+
+			const rects = container.querySelectorAll( 'rect' );
+			expect( rects.length ).toBeGreaterThan( 0 );
+			rects.forEach( ( rect ) => {
+				expect( rect ).toHaveAttribute( 'stroke', '#abcdef' );
+			} );
+		} );
 	} );
 } );

package/src/components/grid-outline/{grid-outline-cell.tsx → cell.tsx}

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 const FALLBACK_COLOR = 'rgba(0, 0, 0, 0.12)';
-export const DASH = '2 2';
 
 type Props = {
 	x: number;
@@ -11,7 +10,7 @@ type Props = {
 	color?: string;
 };
 
-export function GridOutlineCell( { x, y, width, height, color }: Props ) {
+export function Cell( { x, y, width, height, color }: Props ) {
 	return (
 		<rect
 			x={ x }
@@ -21,7 +20,7 @@ export function GridOutlineCell( { x, y, width, height, color }: Props ) {
 			fill="none"
 			stroke={ color || FALLBACK_COLOR }
 			strokeWidth={ 1 }
-			strokeDasharray={ DASH }
+			strokeDasharray="2 2"
 			vectorEffect="non-scaling-stroke"
 		/>
 	);

package/src/components/grid-outline/grid-outline.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 
 import { type GridTracks } from '../../hooks/use-grid-tracks';
-import { computeCellRects, snapToHalfPixel } from '../../utils/grid-outline-utils';
-import { GridOutlineCell } from './grid-outline-cell';
+import { computeCellRects, computeGridLines, snapToHalfPixel } from '../../utils/grid-outline-utils';
+import { Cell } from './cell';
+import { Line } from './line';
 
 type Props = {
 	tracks: GridTracks;
@@ -10,8 +11,47 @@ type Props = {
 	height: number;
 };
 
+const renderCells = ( tracks: GridTracks, width: number, height: number ) =>
+	computeCellRects( tracks, width, height ).map( ( cell, i ) => (
+		<Cell
+			key={ i }
+			x={ snapToHalfPixel( cell.x ) }
+			y={ snapToHalfPixel( cell.y ) }
+			width={ Math.round( cell.width ) }
+			height={ Math.round( cell.height ) }
+			color={ tracks.borderColor }
+		/>
+	) );
+
+const renderLines = ( tracks: GridTracks, width: number, height: number ) => {
+	const { vertical, horizontal } = computeGridLines( tracks, width, height );
+
+	return [
+		...vertical.map( ( line, i ) => (
+			<Line
+				key={ `v${ i }` }
+				x1={ snapToHalfPixel( line.x1 ) }
+				y1={ Math.round( line.y1 ) }
+				x2={ snapToHalfPixel( line.x2 ) }
+				y2={ Math.round( line.y2 ) }
+				color={ tracks.borderColor }
+			/>
+		) ),
+		...horizontal.map( ( line, i ) => (
+			<Line
+				key={ `h${ i }` }
+				x1={ Math.round( line.x1 ) }
+				y1={ snapToHalfPixel( line.y1 ) }
+				x2={ Math.round( line.x2 ) }
+				y2={ snapToHalfPixel( line.y2 ) }
+				color={ tracks.borderColor }
+			/>
+		) ),
+	];
+};
+
 export function GridOutline( { tracks, width, height }: Props ) {
-	const cells = computeCellRects( tracks, width, height );
+	const hasGap = tracks.columnGap > 0 || tracks.rowGap > 0;
 
 	return (
 		<svg
@@ -20,16 +60,7 @@ export function GridOutline( { tracks, width, height }: Props ) {
 			style={ { position: 'absolute', inset: 0, overflow: 'visible' } }
 			xmlns="http://www.w3.org/2000/svg"
 		>
-			{ cells.map( ( cell, i ) => (
-				<GridOutlineCell
-					key={ i }
-					x={ snapToHalfPixel( cell.x ) }
-					y={ snapToHalfPixel( cell.y ) }
-					width={ Math.round( cell.width ) }
-					height={ Math.round( cell.height ) }
-					color={ tracks.borderColor }
-				/>
-			) ) }
+			{ hasGap ? renderCells( tracks, width, height ) : renderLines( tracks, width, height ) }
 		</svg>
 	);
 }

package/src/components/grid-outline/line.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+const FALLBACK_COLOR = 'rgba(0, 0, 0, 0.12)';
+
+type Props = {
+	x1: number;
+	y1: number;
+	x2: number;
+	y2: number;
+	color?: string;
+};
+
+export function Line( { x1, y1, x2, y2, color }: Props ) {
+	return (
+		<line
+			x1={ x1 }
+			y1={ y1 }
+			x2={ x2 }
+			y2={ y2 }
+			stroke={ color || FALLBACK_COLOR }
+			strokeWidth={ 1 }
+			strokeDasharray="2 2"
+			vectorEffect="non-scaling-stroke"
+		/>
+	);
+}

package/src/hooks/__tests__/use-grid-children.test.ts

@@ -0,0 +1,158 @@
+/* eslint-disable testing-library/no-node-access */
+import { act, renderHook } from '@testing-library/react';
+
+import { useGridChildren } from '../use-grid-children';
+
+type ResizeCallback = ( entries: unknown[] ) => void;
+
+class MockResizeObserver {
+	static instances: MockResizeObserver[] = [];
+	callback: ResizeCallback;
+	observed: Element[] = [];
+	disconnected = false;
+
+	constructor( callback: ResizeCallback ) {
+		this.callback = callback;
+		MockResizeObserver.instances.push( this );
+	}
+
+	observe( element: Element ) {
+		this.observed.push( element );
+	}
+
+	unobserve( element: Element ) {
+		this.observed = this.observed.filter( ( item ) => item !== element );
+	}
+
+	disconnect() {
+		this.disconnected = true;
+		this.observed = [];
+	}
+
+	trigger() {
+		this.callback( [] );
+	}
+}
+
+function createGridWithChildren( count: number ): HTMLElement {
+	const grid = document.createElement( 'div' );
+	for ( let i = 0; i < count; i++ ) {
+		grid.appendChild( document.createElement( 'div' ) );
+	}
+	document.body.appendChild( grid );
+	return grid;
+}
+
+describe( 'useGridChildren', () => {
+	const originalResizeObserver = globalThis.ResizeObserver;
+
+	beforeEach( () => {
+		MockResizeObserver.instances = [];
+		globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+	} );
+
+	afterEach( () => {
+		globalThis.ResizeObserver = originalResizeObserver;
+		document.body.innerHTML = '';
+	} );
+
+	it( 'returns 0 for a null element', () => {
+		const { result } = renderHook( () => useGridChildren( null ) );
+
+		expect( result.current ).toBe( 0 );
+		expect( MockResizeObserver.instances ).toHaveLength( 0 );
+	} );
+
+	it( 'observes existing children on mount', () => {
+		const grid = createGridWithChildren( 2 );
+
+		renderHook( () => useGridChildren( grid ) );
+
+		expect( MockResizeObserver.instances ).toHaveLength( 1 );
+		expect( MockResizeObserver.instances[ 0 ].observed ).toHaveLength( 2 );
+	} );
+
+	it( 'increments when a child is appended', async () => {
+		const grid = createGridWithChildren( 1 );
+
+		const { result } = renderHook( () => useGridChildren( grid ) );
+		const before = result.current;
+
+		await act( async () => {
+			grid.appendChild( document.createElement( 'div' ) );
+			await Promise.resolve();
+		} );
+
+		expect( result.current ).toBeGreaterThan( before );
+		expect( MockResizeObserver.instances[ 0 ].observed ).toHaveLength( 2 );
+	} );
+
+	it( 'increments when a child is removed', async () => {
+		const grid = createGridWithChildren( 2 );
+
+		const { result } = renderHook( () => useGridChildren( grid ) );
+		const before = result.current;
+
+		await act( async () => {
+			grid.removeChild( grid.children[ 0 ] );
+			await Promise.resolve();
+		} );
+
+		expect( result.current ).toBeGreaterThan( before );
+		expect( MockResizeObserver.instances[ 0 ].observed ).toHaveLength( 1 );
+	} );
+
+	it( 'increments when children are reordered', async () => {
+		const grid = createGridWithChildren( 3 );
+
+		const { result } = renderHook( () => useGridChildren( grid ) );
+		const before = result.current;
+
+		await act( async () => {
+			grid.insertBefore( grid.children[ 2 ], grid.children[ 0 ] );
+			await Promise.resolve();
+		} );
+
+		expect( result.current ).toBeGreaterThan( before );
+	} );
+
+	it( 'increments when a child resizes', () => {
+		const grid = createGridWithChildren( 1 );
+
+		const { result } = renderHook( () => useGridChildren( grid ) );
+		const before = result.current;
+
+		act( () => {
+			MockResizeObserver.instances[ 0 ].trigger();
+		} );
+
+		expect( result.current ).toBeGreaterThan( before );
+	} );
+
+	it( 'disconnects observers on unmount', () => {
+		const grid = createGridWithChildren( 2 );
+
+		const { unmount } = renderHook( () => useGridChildren( grid ) );
+
+		unmount();
+
+		expect( MockResizeObserver.instances[ 0 ].disconnected ).toBe( true );
+	} );
+
+	it( 'switches observation when the element changes', () => {
+		const first = createGridWithChildren( 1 );
+		const second = createGridWithChildren( 2 );
+
+		const { rerender } = renderHook( ( { element } ) => useGridChildren( element ), {
+			initialProps: { element: first as HTMLElement | null },
+		} );
+
+		const initialObserver = MockResizeObserver.instances[ 0 ];
+
+		rerender( { element: second } );
+
+		expect( initialObserver.disconnected ).toBe( true );
+		expect( MockResizeObserver.instances ).toHaveLength( 2 );
+		expect( MockResizeObserver.instances[ 1 ].observed ).toHaveLength( 2 );
+	} );
+} );

package/src/hooks/__tests__/use-grid-tracks.test.ts

@@ -45,8 +45,9 @@ function mockElement( style: Partial< Style > = {} ) {
 		getPropertyValue: ( name: string ) => ( name === '--e-a-border-color-bold' ? resolved[ name ] : '' ),
 	} ) );
 
-	const element = {
-		ownerDocument: {
+	const element = document.createElement( 'div' );
+	Object.defineProperty( element, 'ownerDocument', {
+		value: {
 			defaultView: {
 				getComputedStyle,
 				requestAnimationFrame: ( cb: FrameRequestCallback ) => {
@@ -56,7 +57,8 @@ function mockElement( style: Partial< Style > = {} ) {
 				cancelAnimationFrame: jest.fn(),
 			} as unknown as Window,
 		},
-	} as unknown as HTMLElement;
+		configurable: true,
+	} );
 
 	return { element, resolved, getComputedStyle };
 }
@@ -78,7 +80,11 @@ describe( 'useGridTracks', () => {
 	} );
 
 	it( 'returns the empty snapshot when the element has no owner window', () => {
-		const element = { ownerDocument: { defaultView: null } } as unknown as HTMLElement;
+		const element = document.createElement( 'div' );
+		Object.defineProperty( element, 'ownerDocument', {
+			value: { defaultView: null },
+			configurable: true,
+		} );
 
 		const { result } = renderHook( () => useGridTracks( element, RECT ) );
 
@@ -154,6 +160,54 @@ describe( 'useGridTracks', () => {
 		expect( result.current.columns ).toEqual( [ 100, 100, 100, 100 ] );
 	} );
 
+	it( 'recomputes when children are added to the grid', async () => {
+		const grid = document.createElement( 'div' );
+		grid.appendChild( document.createElement( 'div' ) );
+		document.body.appendChild( grid );
+
+		const resolved: Style = { ...DEFAULT_STYLE, gridTemplateRows: '80px' };
+		const getComputedStyle = jest.fn().mockImplementation( () => ( {
+			gridTemplateColumns: resolved.gridTemplateColumns,
+			gridTemplateRows: resolved.gridTemplateRows,
+			columnGap: resolved.columnGap,
+			rowGap: resolved.rowGap,
+			paddingTop: resolved.paddingTop,
+			paddingRight: resolved.paddingRight,
+			paddingBottom: resolved.paddingBottom,
+			paddingLeft: resolved.paddingLeft,
+			getPropertyValue: ( name: string ) => ( name === '--e-a-border-color-bold' ? resolved[ name ] : '' ),
+		} ) );
+
+		Object.defineProperty( grid, 'ownerDocument', {
+			value: {
+				defaultView: {
+					getComputedStyle,
+					requestAnimationFrame: ( cb: FrameRequestCallback ) => {
+						cb( 0 );
+						return 1;
+					},
+					cancelAnimationFrame: jest.fn(),
+				},
+			},
+			configurable: true,
+		} );
+
+		const { result } = renderHook( () => useGridTracks( grid, RECT ) );
+
+		expect( result.current.rows ).toEqual( [ 80 ] );
+
+		resolved.gridTemplateRows = '80px 80px';
+
+		await act( async () => {
+			grid.appendChild( document.createElement( 'div' ) );
+			await Promise.resolve();
+		} );
+
+		expect( result.current.rows ).toEqual( [ 80, 80 ] );
+
+		document.body.removeChild( grid );
+	} );
+
 	it( 'recomputes when the device mode changes', () => {
 		const mock = mockElement( { gridTemplateRows: '80px', rowGap: '8px' } );
 

package/src/hooks/use-grid-children.ts

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+
+export function useGridChildren( element: HTMLElement | null ): number {
+	const [ signal, setSignal ] = useState( 0 );
+
+	useEffect( () => {
+		if ( ! element ) {
+			return;
+		}
+
+		const bump = () => setSignal( ( previous ) => previous + 1 );
+
+		const resizeObserver = new ResizeObserver( bump );
+		const observed = new Set< Element >();
+
+		const syncChildren = () => {
+			for ( const child of Array.from( element.children ) ) {
+				if ( ! observed.has( child ) ) {
+					resizeObserver.observe( child );
+					observed.add( child );
+				}
+			}
+
+			for ( const child of observed ) {
+				if ( child.parentElement !== element ) {
+					resizeObserver.unobserve( child );
+					observed.delete( child );
+				}
+			}
+		};
+
+		syncChildren();
+
+		const mutationObserver = new MutationObserver( () => {
+			syncChildren();
+			bump();
+		} );
+		mutationObserver.observe( element, { childList: true } );
+
+		return () => {
+			mutationObserver.disconnect();
+			resizeObserver.disconnect();
+			observed.clear();
+		};
+	}, [ element ] );
+
+	return signal;
+}

package/src/hooks/use-grid-tracks.ts

@@ -3,6 +3,7 @@ import { ELEMENT_STYLE_CHANGE_EVENT } from '@elementor/editor-elements';
 import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';
 
 import { toGridTracks } from '../utils/grid-outline-utils';
+import { useGridChildren } from './use-grid-children';
 
 export type GridTracks = {
 	columns: number[];
@@ -31,6 +32,7 @@ export function useGridTracks( element: HTMLElement | null, rect: DOMRect ): Gri
 		[ windowEvent( ELEMENT_STYLE_CHANGE_EVENT ), windowEvent( DEVICE_MODE_CHANGE_EVENT ) ],
 		() => ( {} )
 	);
+	const childrenTrigger = useGridChildren( element );
 
 	useEffect( () => {
 		const previewWindow = element?.ownerDocument?.defaultView;
@@ -47,7 +49,7 @@ export function useGridTracks( element: HTMLElement | null, rect: DOMRect ): Gri
 		return () => {
 			previewWindow.cancelAnimationFrame( frame );
 		};
-	}, [ element, rect.width, rect.height, trigger ] );
+	}, [ element, rect.width, rect.height, trigger, childrenTrigger ] );
 
 	return tracks;
 }