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

package/src/utils/__tests__/grid-outline-utils.test.ts

@@ -1,5 +1,12 @@
 import { type GridTracks } from '../../hooks/use-grid-tracks';
-import { computeCellRects, parseTrackList, snapToHalfPixel, toGridTracks, toPx } from '../grid-outline-utils';
+import {
+	computeCellRects,
+	computeGridLines,
+	parseTrackList,
+	snapToHalfPixel,
+	toGridTracks,
+	toPx,
+} from '../grid-outline-utils';
 
 function makeTracks( partial: Partial< GridTracks > = {} ): GridTracks {
 	return {
@@ -87,6 +94,70 @@ describe( 'computeCellRects', () => {
 	} );
 } );
 
+describe( 'computeGridLines', () => {
+	it( 'returns no lines when there are no tracks', () => {
+		expect( computeGridLines( makeTracks(), 100, 100 ) ).toEqual( { vertical: [], horizontal: [] } );
+	} );
+
+	it( 'collapses shared boundaries into a single line when there is no gap', () => {
+		const tracks = makeTracks( { columns: [ 100, 100, 100 ], rows: [ 80, 80 ] } );
+
+		const lines = computeGridLines( tracks, 300, 160 );
+
+		expect( lines.vertical.map( ( l ) => l.x1 ) ).toEqual( [ 0, 100, 200, 300 ] );
+		expect( lines.horizontal.map( ( l ) => l.y1 ) ).toEqual( [ 0, 80, 160 ] );
+	} );
+
+	it( 'splits the inner boundary into two parallel lines when a gap is set', () => {
+		const tracks = makeTracks( {
+			columns: [ 100, 100, 100 ],
+			rows: [ 80, 80 ],
+			columnGap: 10,
+			rowGap: 8,
+		} );
+
+		const lines = computeGridLines( tracks, 320, 176 );
+
+		expect( lines.vertical.map( ( l ) => l.x1 ) ).toEqual( [ 0, 100, 110, 210, 220, 320 ] );
+		expect( lines.horizontal.map( ( l ) => l.y1 ) ).toEqual( [ 0, 80, 88, 168 ] );
+	} );
+
+	it( 'extends vertical lines from the top to the bottom of the row span', () => {
+		const tracks = makeTracks( { columns: [ 100, 100 ], rows: [ 50, 60 ], rowGap: 5 } );
+
+		const lines = computeGridLines( tracks, 200, 115 );
+
+		for ( const line of lines.vertical ) {
+			expect( line.y1 ).toBe( 0 );
+			expect( line.y2 ).toBe( 115 );
+		}
+	} );
+
+	it( 'extends horizontal lines from the left to the right of the column span', () => {
+		const tracks = makeTracks( { columns: [ 100, 100 ], rows: [ 50, 50 ], columnGap: 10 } );
+
+		const lines = computeGridLines( tracks, 210, 100 );
+
+		for ( const line of lines.horizontal ) {
+			expect( line.x1 ).toBe( 0 );
+			expect( line.x2 ).toBe( 210 );
+		}
+	} );
+
+	it( 'offsets the lines by the grid padding', () => {
+		const tracks = makeTracks( {
+			columns: [ 100 ],
+			rows: [ 80 ],
+			padding: { top: 5, right: 4, bottom: 3, left: 20 },
+		} );
+
+		const lines = computeGridLines( tracks, 200, 100 );
+
+		expect( lines.vertical.map( ( l ) => l.x1 ) ).toEqual( [ 20, 120 ] );
+		expect( lines.horizontal.map( ( l ) => l.y1 ) ).toEqual( [ 5, 85 ] );
+	} );
+} );
+
 describe( 'snapToHalfPixel', () => {
 	it.each( [
 		[ 0, 0.5 ],

package/src/utils/grid-outline-utils.ts

@@ -7,6 +7,18 @@ export type CellRect = {
 	height: number;
 };
 
+export type GridLine = {
+	x1: number;
+	y1: number;
+	x2: number;
+	y2: number;
+};
+
+export type GridLines = {
+	vertical: GridLine[];
+	horizontal: GridLine[];
+};
+
 type TrackSegment = {
 	start: number;
 	size: number;
@@ -57,6 +69,42 @@ export function computeCellRects( tracks: GridTracks, width: number, height: num
 	return cells;
 }
 
+export function computeGridLines( tracks: GridTracks, width: number, height: number ): GridLines {
+	const { columns, rows, columnGap, rowGap, padding } = tracks;
+
+	const hasColumns = columns.length > 0;
+	const hasRows = rows.length > 0;
+
+	if ( ! hasColumns && ! hasRows ) {
+		return { vertical: [], horizontal: [] };
+	}
+
+	const columnSegments = hasColumns
+		? computeTrackSegments( columns, columnGap, padding.left )
+		: [ { start: padding.left, size: width - padding.left - padding.right } ];
+
+	const rowSegments = hasRows
+		? computeTrackSegments( rows, rowGap, padding.top )
+		: [ { start: padding.top, size: height - padding.top - padding.bottom } ];
+
+	const xs = uniqueSorted( columnSegments.flatMap( ( s ) => [ s.start, s.start + s.size ] ) );
+	const ys = uniqueSorted( rowSegments.flatMap( ( s ) => [ s.start, s.start + s.size ] ) );
+
+	const yTop = ys[ 0 ];
+	const yBottom = ys[ ys.length - 1 ];
+	const xLeft = xs[ 0 ];
+	const xRight = xs[ xs.length - 1 ];
+
+	return {
+		vertical: xs.map( ( x ) => ( { x1: x, y1: yTop, x2: x, y2: yBottom } ) ),
+		horizontal: ys.map( ( y ) => ( { x1: xLeft, y1: y, x2: xRight, y2: y } ) ),
+	};
+}
+
+function uniqueSorted( values: number[] ): number[] {
+	return Array.from( new Set( values ) ).sort( ( a, b ) => a - b );
+}
+
 function computeTrackSegments( sizes: number[], gap: number, offset: number ): TrackSegment[] {
 	const segments: TrackSegment[] = [];
 	let cursor = offset;