Alignment and Distribution
Diagramatics provide functions to align and distribute diagram objects.
Alignment
let's say we have a list of diagrams, and we want to align them vertically or horizontally.
let r1 = rectangle(3, 2).fill('blue' ).position(V2( 1, 1));
let r2 = rectangle(2, 3).fill('white').position(V2( 0, 0));
let r3 = rectangle(2, 2).fill('red' ).position(V2(-1, -1));
draw(r1, r2, r3);
let r1 = rectangle(3, 2).fill('blue' ).position(V2( 1, 1));
let r2 = rectangle(2, 3).fill('white').position(V2( 0, 0));
let r3 = rectangle(2, 2).fill('red' ).position(V2(-1, -1));
draw(r1, r2, r3);
let r1 = rectangle(3, 2).fill('blue' ).position(V2( 1, 1));
let r2 = rectangle(2, 3).fill('white').position(V2( 0, 0));
let r3 = rectangle(2, 2).fill('red' ).position(V2(-1, -1));
let rs = align_vertical([r1, r2, r3], 'bottom');
draw(rs);
align_vertical (
diagrams
:
Diagram[] , alignment
:
'top' | 'center' | 'bottom' )
:
Diagram
let r1 = rectangle(3, 2).fill('blue' ).position(V2( 1, 1));
let r2 = rectangle(2, 3).fill('white').position(V2( 0, 0));
let r3 = rectangle(2, 2).fill('red' ).position(V2(-1, -1));
let rs = align_vertical([r1, r2, r3], 'bottom');
draw(rs);
let r1 = rectangle(3, 2).fill('blue' ).position(V2( 1, 1));
let r2 = rectangle(2, 3).fill('white').position(V2( 0, 0));
let r3 = rectangle(2, 2).fill('red' ).position(V2(-1, -1));
let rs = align_horizontal([r1, r2, r3], 'right');
draw(rs);
align_horizontal (
diagrams
:
Diagram[] , alignment
:
'left' | 'center' | 'right' )
:
Diagram
let r1 = rectangle(3, 2).fill('blue' ).position(V2( 1, 1));
let r2 = rectangle(2, 3).fill('white').position(V2( 0, 0));
let r3 = rectangle(2, 2).fill('red' ).position(V2(-1, -1));
let rs = align_horizontal([r1, r2, r3], 'right');
draw(rs);
Distribution
// the objects will be distributed from left to right
// in the order of the array
let r1 = rectangle(3, 2).fill('blue' ).position(V2( 1, 1));
let r2 = rectangle(2, 3).fill('white').position(V2( 0, 0));
let r3 = rectangle(2, 2).fill('red' ).position(V2(-1, -1));
let rs = distribute_horizontal([r1, r2, r3], 1);
draw(rs);
distribute_horizontal (
diagrams
:
Diagram[] , space
:
number = 0 )
:
Diagram
// the objects will be distributed from left to right
// in the order of the array
let r1 = rectangle(3, 2).fill('blue' ).position(V2( 1, 1));
let r2 = rectangle(2, 3).fill('white').position(V2( 0, 0));
let r3 = rectangle(2, 2).fill('red' ).position(V2(-1, -1));
let rs = distribute_horizontal([r1, r2, r3], 1);
draw(rs);
let r1 = rectangle(3, 2).fill('blue' ).position(V2( 1, 1));
let r2 = rectangle(2, 3).fill('white').position(V2( 0, 0));
let r3 = rectangle(2, 2).fill('red' ).position(V2(-1, -1));
let rs = distribute_horizontal([r2, r1, r3], 1);
draw(rs);
let r1 = rectangle(3, 2).fill('blue' ).position(V2( 1, 1));
let r2 = rectangle(2, 3).fill('white').position(V2( 0, 0));
let r3 = rectangle(2, 2).fill('red' ).position(V2(-1, -1));
let rs = distribute_horizontal([r2, r1, r3], 1);
draw(rs);
// the objects will be distributed from top to bottom
// in the order of the array
let r1 = rectangle(3, 2).fill('blue' ).position(V2( 1, 1));
let r2 = rectangle(2, 3).fill('white').position(V2( 0, 0));
let r3 = rectangle(2, 2).fill('red' ).position(V2(-1, -1));
let rs = distribute_vertical([r1, r2, r3], 1);
draw(rs);
distribute_vertical (
diagrams
:
Diagram[] , space
:
number = 0 )
:
Diagram
// the objects will be distributed from top to bottom
// in the order of the array
let r1 = rectangle(3, 2).fill('blue' ).position(V2( 1, 1));
let r2 = rectangle(2, 3).fill('white').position(V2( 0, 0));
let r3 = rectangle(2, 2).fill('red' ).position(V2(-1, -1));
let rs = distribute_vertical([r1, r2, r3], 1);
draw(rs);
Alignment and Distribution
let r1 = rectangle(3, 2).fill('blue' ).position(V2( 1, 1));
let r2 = rectangle(2, 3).fill('white').position(V2( 0, 0));
let r3 = rectangle(2, 2).fill('red' ).position(V2(-1, -1));
let rs = distribute_horizontal_and_align([r1, r2, r3], 1, 'bottom');
draw(rs);
distribute_horizontal_and_align (
diagrams
:
Diagram[] , horizontal_space
:
number , alignment
:
'top' | 'center' | 'bottom' )
:
Diagram
let r1 = rectangle(3, 2).fill('blue' ).position(V2( 1, 1));
let r2 = rectangle(2, 3).fill('white').position(V2( 0, 0));
let r3 = rectangle(2, 2).fill('red' ).position(V2(-1, -1));
let rs = distribute_horizontal_and_align([r1, r2, r3], 1, 'bottom');
draw(rs);
let r1 = rectangle(3, 2).fill('blue' ).position(V2( 1, 1));
let r2 = rectangle(2, 3).fill('white').position(V2( 0, 0));
let r3 = rectangle(2, 2).fill('red' ).position(V2(-1, -1));
let rs = distribute_vertical_and_align([r1, r2, r3], 1, 'right');
draw(rs);
distribute_vertical_and_align (
diagrams
:
Diagram[] , vertical_space
:
number , alignment
:
'left' | 'center' | 'right' )
:
Diagram
let r1 = rectangle(3, 2).fill('blue' ).position(V2( 1, 1));
let r2 = rectangle(2, 3).fill('white').position(V2( 0, 0));
let r3 = rectangle(2, 2).fill('red' ).position(V2(-1, -1));
let rs = distribute_vertical_and_align([r1, r2, r3], 1, 'right');
draw(rs);
Grid distribution
let r1 = rectangle(3, 2).fill('blue' );
let r2 = rectangle(2, 3).fill('white' );
let r3 = rectangle(2, 2).fill('red' );
let r4 = rectangle(3, 3).fill('grey');
let rs = distribute_grid_row([r1, r2, r3, r4], 2, 1, 1);
draw(rs);
distribute_grid_row (
diagrams
:
Diagram[] , column_count
:
number , vectical_space
:
number = 0 , horizontal_space
:
number = 0 )
:
Diagram
let r1 = rectangle(3, 2).fill('blue' );
let r2 = rectangle(2, 3).fill('white' );
let r3 = rectangle(2, 2).fill('red' );
let r4 = rectangle(3, 3).fill('grey');
let rs = distribute_grid_row([r1, r2, r3, r4], 2, 1, 1);
draw(rs);
