Shape Alignment

SpreadJS makes it easy to fine-tune multiple shape's positions using shape alignment options, distribution options or snapping them to other shapes or grids.

You can align shapes using the following code: You can change snapeMode to align shape easily Now when you drag or resize shape, shape bound will align to grid line automatically. Also you can align to other shape bound
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { let sheet = spread.getActiveSheet(); var rect1 = sheet.shapes.add('rect1', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 100, 50, 230, 100); 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, 300, 200, 100); spread.bind(GC.Spread.Sheets.Events.ShapeSelectionChanged, function () { shapeSelectionChangedHandler(spread); }); document.querySelectorAll('.align').forEach(function (btn) { btn.addEventListener('click', function (e) { let activeSheet = spread.getActiveSheet(); let activeShapes = activeSheet.shapes.all().filter(function (sp) { return sp.isSelected(); }); let classNames = e.target.className.split(' '); let cmd = classNames[1]; let alignment = classNames[2]; console.log(e.target.className); var commandManager = spread.commandManager(); commandManager.execute({ cmd: cmd, sheetName: activeSheet.name(), shapeNames: activeShapes.map(function (s) { return s.name(); }), alignment: getAlignmentEnum(alignment) }); }); }); document.querySelectorAll('.align-dd').forEach(function (dd) { dd.addEventListener('change', function (e) { let activeSheet = spread.getActiveSheet(); let activeShapes = activeSheet.shapes.all().filter(function (sp) { return sp.isSelected(); }); let classNames = e.target.className.split(' '); let cmd = classNames[1]; var commandManager = spread.commandManager(); commandManager.execute({ cmd: cmd, sheetName: activeSheet.name(), shapeNames: activeShapes.map(function (s) { return s.name(); }), alignment: getAlignmentEnum(e.target.value) }); }); }); document.querySelector('#changeSnapMode').addEventListener('change', function (e) { let sheet = spread.getActiveSheet(); switch (e.target.value) { case '0': sheet.shapes.snapMode(GC.Spread.Sheets.Shapes.SnapMode.none); return; case '1': sheet.shapes.snapMode(GC.Spread.Sheets.Shapes.SnapMode.grid); return; case '2': sheet.shapes.snapMode(GC.Spread.Sheets.Shapes.SnapMode.shape); return; case '3': sheet.shapes.snapMode(GC.Spread.Sheets.Shapes.SnapMode.grid | GC.Spread.Sheets.Shapes.SnapMode.shape); return; default: return; } }); shapeSelectionChangedHandler(spread); } function toggleEnable(enable, className) { document.querySelectorAll('.' + className).forEach(function (btn) { if (enable) { btn.removeAttribute('disabled'); } else { btn.setAttribute('disabled', ''); } }) } function getAlignmentEnum(alignment) { switch (alignment) { case 'left': return GC.Spread.Sheets.Shapes.HorizontalAlign.left; case 'center': return GC.Spread.Sheets.Shapes.HorizontalAlign.center; case 'right': return GC.Spread.Sheets.Shapes.HorizontalAlign.right; case 'top': return GC.Spread.Sheets.Shapes.VerticalAlign.top; case 'middle': return GC.Spread.Sheets.Shapes.VerticalAlign.middle; case 'bottom': return GC.Spread.Sheets.Shapes.VerticalAlign.bottom; default: return; } } function _getElementById(id) { return document.getElementById(id); } function shapeSelectionChangedHandler(spread) { let activeSheet = spread.getActiveSheet(); let shapes = activeSheet.shapes.all(), activeShapes = []; for (let i = 0; i < shapes.length; i++) { let shape = shapes[i]; if (shape.isSelected()) { activeShapes.push(shape); } } if (activeShapes.length > 1) { toggleEnable(true, 'justify'); } else { toggleEnable(false, 'justify'); } if (activeShapes.length > 2) { toggleEnable(true, 'distribute'); } else { toggleEnable(false, 'distribute'); } }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> Select two or more shapes then change the different alignment options below to see the effects. </div> <div class="option-row"> *for the vertical and horizontal distribution, all three shapes must be selected. </div> <div class="option-row"> <label>- Horizontal Alignment</label> <hr> <select id="moveShapesByHAlign" class="align-dd moveShapesByHAlign"> <option value="left" selected>left</option> <option value="center">center</option> <option value="right">right</option> </select> <br /> <br /> <label>Horizontal Distribute Selected Shapes</label> <input type="button" class="align moveShapesByHDistribute distribute" value="Horizontal"> <br /> <label>- Vertical Alignment</label> <hr> <select id="moveShapesByVAlign" class="align-dd moveShapesByVAlign"> <option value="left" selected>top</option> <option value="center">middle</option> <option value="right">bottom</option> </select> <br /> <br /> <label>Vertical Distribute Selected Shapes</label> <input type="button" class="align moveShapesByVDistribute distribute" value="Vertical"> <br /> <label>Change the SnapMode options to align, drag, or resize shapes to the nearest edge based on gridlines or other shapes in the worksheet. </label> <hr> <select id="changeSnapMode"> <option value="0" selected>none</option> <option value="1">grid</option> <option value="2">shape</option> <option value="3">grid and shape</option> </select> <br /> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 350px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 350px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 5px; } .sample-options { z-index: 1000; } label { display: block; margin-bottom: 6px; } p{ padding:2px 10px; background-color:#F4F8EB; } input { padding: 4px 6px; width: 160px; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }