SpreadJS 14
Features / Shapes / Arrange Shapes / Distribute Shapes
In This Topic
    Distribute Shapes
    In This Topic

    The space between two or more shapes can be distributed equally in horizontal or vertical directions by using moveShapesByHDistribute or moveShapesByVDistribute commands respectively. These commands calculate the horizontal or vertical distances between the ending of one shape and starting of other, then calculate the average distance to distribute shapes.

    horizontal distribution in shapes

    vertical distribution in shapes

    Grouped shapes are considered as single shapes by distribution commands.

    distribution in group shapes

    Connector shapes can also be distributed if not connected to any other shape.

    distribution in connector shapes

    The following example code distributes three rectangle shapes horizontally and vertically.

    JavaScript
    Copy Code
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    var sheet = spread.getActiveSheet();
    var rect1 = sheet.shapes.add('rect1', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 100, 50, 230, 100);
    var shapeStyle = rect1.style();
    shapeStyle.fill.color = '#40E0D0';
    var rect2 = sheet.shapes.add('rect2', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 200, 200, 150, 100);
    var rect3 = sheet.shapes.add('rect3', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 500, 350, 200, 100);
                
    var commandManager = spread.commandManager();
    // Horizontal Distribution
    commandManager.execute({
        cmd: 'moveShapesByHDistribute',
        sheetName: sheet.name(),
        shapeNames: ['rect1', 'rect2', 'rect3'],
    });
    
    // Vertical Distribution
    commandManager.execute({
        cmd: 'moveShapesByVDistribute',
        sheetName: sheet.name(),
        shapeNames: ['rect1', 'rect2', 'rect3'],
    });