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); let rectangle = sheet.shapes.add("rectangle", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 100, 60, 150, 150); let rectangleStyle = rectangle.style(); rectangleStyle.fill.color = "#F4F8EB"; rectangleStyle.line.color = "#82bc00"; rectangle.style(rectangleStyle); let oval = sheet.shapes.add("oval", GC.Spread.Sheets.Shapes.AutoShapeType.oval, 400, 60, 150, 150); let ovalStyle = oval.style(); ovalStyle.fill.color = "#e3e3e3"; ovalStyle.line.color = "#e3e3e3"; oval.style(ovalStyle); 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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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"> *the cube and the cylinder are already grouped. </div> <hr /> <div class="option-row"> <label>Group Selected Shapes</label> <input type="button" id="group" value="Group"> <br/> <label>Ungroup Selected Shapes</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:#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; }