Group Shape

SpreadJS supports grouping individual shapes into a shape group. This group shape is used to manage selecting and editing groups of shapes easily and quickly.

You can use group shape to move shapes but keep their related location, resize & keep size ratio, rotate with same angle etc. You can group/ungroup multiple shapes using the following code:
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); var heart = sheet.shapes.add("heart", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 150, 150); var heartStyle = heart.style(); heartStyle.fill.color = "red"; heartStyle.line.color = "red"; heart.style(heartStyle); var smileyFace = sheet.shapes.add("smileyFace", GC.Spread.Sheets.Shapes.AutoShapeType.smileyFace, 400, 60, 150, 150); var smileyFaceStyle = smileyFace.style(); smileyFaceStyle.fill.color = "yellow"; smileyFace.style(smileyFaceStyle); var cube = sheet.shapes.add("cube", GC.Spread.Sheets.Shapes.AutoShapeType.cube, 100, 240, 150, 150); var can = sheet.shapes.add("can", GC.Spread.Sheets.Shapes.AutoShapeType.can, 400, 240, 150, 150); var shapes = [cube, can]; var groupShape = sheet.shapes.group(shapes); var host = spread.getHost(); host.addEventListener("click", function (e) { var shapes = sheet.shapes.all(), activeShapes = []; for (var i = 0; i < shapes.length; i++) { var shape = shapes[i]; if (shape.isSelected()) { activeShapes.push(shape); } } if (activeShapes.length === 1 && activeShapes[0] instanceof GC.Spread.Sheets.Shapes.GroupShape) { _getElementById("ungroup").disabled = false; _getElementById("group").disabled = true; } else { _getElementById("ungroup").disabled = true; _getElementById("group").disabled = false; } } ); _getElementById("group").addEventListener("click", function () { var activeShape = sheet.shapes.all().filter(function (sp) { return sp.isSelected(); }); if (activeShape.length > 1) { var groupShape = sheet.shapes.group(activeShape); groupShape.isSelected(true); _getElementById("ungroup").disabled = false; _getElementById("group").disabled = true; } }); _getElementById("ungroup").addEventListener("click", function () { var activeShape = sheet.shapes.all().filter(function (sp) { return sp.isSelected() && sp instanceof GC.Spread.Sheets.Shapes.GroupShape; }); if (activeShape.length) { activeShape.forEach(function (shape) { sheet.shapes.ungroup(shape); }); _getElementById("ungroup").disabled = true; _getElementById("group").disabled = false; } }); } function _getElementById(id){ return document.getElementById(id); }
<!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"> Try selecting the shapes in Spread and grouping/ungrouping them to see how the selection area changes. </div> <div class="option-row"> <label>Group Select Shape</label> <input type="button" id="group" value="Group"> <br/> <label>Ungroup Select Shape</label> <input type="button" id="ungroup" value="Ungroup"> </div> </div> </div></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; 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:lavender; } 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; }