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

    You can snap shapes in SpreadJS by using snapMode method which aligns, drags or resizes shapes to the nearest edge based on gridlines or other shapes in the worksheet.

    A shape is aligned to the grid or other shapes by using the horizontal or vertical snap lines in the worksheet. The below image shows vertical snap lines:

    gridlines in shape snap

    Snap to Shape

    You can use the snapMode.shape option to align a shape to the nearest edge of other shapes in the worksheet. When the shape is moved in horizontal or vertical directions, it aligns with the snap lines.

    shapes snap to other shapes

    JavaScript
    Copy Code
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    // Get snap mode
    var snap = spread.getActiveSheet().shapes.snapMode();
    // Set snap to shape
    spread.getActiveSheet().shapes.snapMode(GC.Spread.Sheets.Shapes.SnapMode.shape);
    

    Snap to Grid

    You can use the snapMode.grid option to align a shape to the nearest grid intersection (even if it is not visible) on the worksheet. When the shape is moved in horizontal or vertical directions, it aligns with the snap lines.

    You can also use the arrow keys (Up, Left, Bottom, and Right) to move a shape instead of dragging it using the mouse.

    shapes snap according to gridline

    JavaScript
    Copy Code
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    // Get snap mode
    var snap = spread.getActiveSheet().shapes.snapMode();
    // Set snap to grid
    spread.getActiveSheet().shapes.snapMode(GC.Spread.Sheets.Shapes.SnapMode.grid);
    

    Multiple shapes can be snapped at once by using the snapMode method.

    snap multiple shapes at once

    The snapMode.shape and snapMode.grid options can be used together to align shapes.

    snap shapes by both shape and grid modes

    JavaScript
    Copy Code
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    // Set snap to shape and grid
    spread.getActiveSheet().shapes.snapMode(GC.Spread.Sheets.Shapes.SnapMode.grid | GC.Spread.Sheets.Shapes.SnapMode.shape);