Car Insurance Claim

The following sample shows how you can create different types of diagrams using custom shapes in SpreadJS. In this case, the shapes are used to create a car diagram for a car insurance claim. Try selecting different parts or sections of the car to indicate the parts of the car that are damaged.

This example shows custom shapes, you can create different types of diagrams using custom shapes in SpreadJS.
window.onload = function () { let spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadSheet"), { sheetCount: 1 }); spread.options.allowUserZoom = false; let activeSheet = spread.getActiveSheet(); addCarDiagram(activeSheet); initDamageAreaShapes(spread); let accidentTypeButtonsGroup = initAccidentType(activeSheet); let severityButtonsGroup = initSeverity(activeSheet); initInfoArea(activeSheet); (function shapeClicked() { let host = spread.getHost(); host.addEventListener("click", function (e) { let offset = getOffset(host), left = offset.left, top = offset.top; let x = e.pageX - left, y = e.pageY - top; let hitTest = activeSheet.hitTest(x, y); if (hitTest.shapeHitInfo) { let shape = hitTest.shapeHitInfo.shape; let shapeStyle = shape.style(); shapeStyle.fill.color = (shapeStyle.fill.color === "rgb(255,0,0)" ? "rgb(144,238,144)" : "rgb(255,0,0)"); shape.style(shapeStyle); //Roof Damage if (shape.name() == "roof") { let button = find(accidentTypeButtonsGroup, 'roofDamage'); let buttonStyle = button.style(); buttonStyle.fill.color = (buttonStyle.fill.color === "rgb(255,0,0)" ? "rgb(144,238,144)" : "rgb(255,0,0)"); button.style(buttonStyle); } else if (shape.name() == "roofDamage") { let button = activeSheet.shapes.get("roof"); let buttonStyle = button.style(); buttonStyle.fill.color = (buttonStyle.fill.color === "rgb(255,0,0)" ? "rgb(144,238,144)" : "rgb(255,0,0)"); button.style(buttonStyle); } //Bumper Damage else if (shape.name() == "front" || shape.name() == "rear") { let front = activeSheet.shapes.get("front"), rear = activeSheet.shapes.get("rear"); let button = find(accidentTypeButtonsGroup, 'bumperDamage'); if (front.style().fill.color === "rgb(255,0,0)" || rear.style().fill.color === "rgb(255,0,0)") { let buttonStyle = button.style(); buttonStyle.fill.color = "rgb(255,0,0)"; button.style(buttonStyle); } else if (front.style().fill.color === "rgb(144,238,144)" && rear.style().fill.color === "rgb(144,238,144)") { let buttonStyle = button.style(); buttonStyle.fill.color = "rgb(144,238,144)"; button.style(buttonStyle); } } else if (shape.name() == 'bumperDamage') { let front = activeSheet.shapes.get("front"), rear = activeSheet.shapes.get("rear"); let frontStyle = front.style(), rearStyle = rear.style(); let button = find(accidentTypeButtonsGroup, 'bumperDamage'); if (button.style().fill.color === "rgb(255,0,0)") { frontStyle.fill.color = "rgb(255,0,0)"; rearStyle.fill.color = "rgb(255,0,0)"; front.style(frontStyle); rear.style(rearStyle); } else { frontStyle.fill.color = "rgb(144,238,144)"; rearStyle.fill.color = "rgb(144,238,144)"; front.style(frontStyle); rear.style(rearStyle); } } //Severity else if (shape.name() === "highSeverity" || shape.name() === "mediumSeverity" || shape.name() === "lowSeverity") { for (let s = 0; s < severityButtonsGroup.length; s++) { if (severityButtonsGroup[s].name() !== shape.name()) { let buttonStyle = severityButtonsGroup[s].style(); buttonStyle.fill.color = "rgb(144,238,144)" severityButtonsGroup[s].style(buttonStyle); } } } else if (shape.name() === 'other') { let otherShapes = ['frontWindshield', 'rearTop','leftFrontDoor', 'leftBackDoor', 'leftBack', 'rightFrontDoor', 'rightBackDoor', 'rightBack']; let button = find(accidentTypeButtonsGroup, 'other'); for (let i = 0; i < otherShapes.length; i++) { const shapeName = otherShapes[i]; let curShape = activeSheet.shapes.get(shapeName); let curShapeStyle = curShape.style(); curShapeStyle.fill.color = button.style().fill.color; curShape.style(curShapeStyle); } } else if (shape.name() === 'hood' || shape.name() === 'leftFront' || shape.name() === 'rightFront') { let overheatedShapes = ['hood', 'leftFront', 'rightFront']; let allGreen = true; let button = find(accidentTypeButtonsGroup, 'overheated'); for (let i = 0; i < overheatedShapes.length; i++) { const shapeName = overheatedShapes[i]; let curShape = activeSheet.shapes.get(shapeName); if (curShape.style().fill.color == "rgb(255,0,0)") { allGreen = false; } } if (allGreen) { let buttonStyle = button.style(); buttonStyle.fill.color = "rgb(144,238,144)"; button.style(buttonStyle); } else { let buttonStyle = button.style(); buttonStyle.fill.color = "rgb(255,0,0)"; button.style(buttonStyle); } } else if (shape.name() === 'overheated') { let overheatedShapes = ['hood', 'leftFront', 'rightFront']; let button = find(accidentTypeButtonsGroup, 'overheated'); for (let i = 0; i < overheatedShapes.length; i++) { const shapeName = overheatedShapes[i]; let curShape = activeSheet.shapes.get(shapeName); let curShapeStyle = curShape.style(); curShapeStyle.fill.color = button.style().fill.color; curShape.style(curShapeStyle); } } else { let otherShapes = ['frontWindshield', 'rearTop','leftFrontDoor', 'leftBackDoor', 'leftBack', 'rightFrontDoor', 'rightBackDoor', 'rightBack']; let allGreen = true; let button = find(accidentTypeButtonsGroup, 'other'); for (let i = 0; i < otherShapes.length; i++) { const shapeName = otherShapes[i]; let curShape = activeSheet.shapes.get(shapeName); if (curShape.style().fill.color == "rgb(255,0,0)") { allGreen = false; } } if (allGreen) { let buttonStyle = button.style(); buttonStyle.fill.color = "rgb(144,238,144)"; button.style(buttonStyle); } else { let buttonStyle = button.style(); buttonStyle.fill.color = "rgb(255,0,0)"; button.style(buttonStyle); } } } function find(array, name) { for (let i = 0; i < array.length; i++) { const ele = array[i]; if (ele.name() === name) { return ele } } return null; } }); })(); let workbookShapes = activeSheet.shapes.all(); for (let s = 0; s < workbookShapes.length; s++) { workbookShapes[s].allowMove(false); workbookShapes[s].allowResize(false); } activeSheet.setRowCount(35); activeSheet.setColumnCount(20); activeSheet.name("Car Insurance Claim"); activeSheet.options.gridline = { showVerticalGridline: false, showHorizontalGridline: false }; activeSheet.options.colHeaderVisible = false; activeSheet.options.rowHeaderVisible = false; spread.options.allowUserDragDrop = false; // spread.options.tabStripVisible = false; lockCells(activeSheet); } function addCarDiagram(sheet) { sheet.setColumnWidth(0, 200); sheet.setColumnWidth(10, 200); let startCellRect = sheet.getCellRect(0, 0), endCellRect = sheet.getCellRect(22, 10), spreadElement = document.getElementById("spreadSheet"); let offset = spreadElement.getBoundingClientRect(); let x = offset.left - sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader), y = offset.top - sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader); sheet.pictures.add("CarDiagram", "../Car Diagram.png", x, y, endCellRect.x - startCellRect.x, endCellRect.y - startCellRect.y); sheet.addSpan(1, 3, 1, 2); sheet.getCell(1, 3).text("Passenger Side"); sheet.getCell(1, 3).font("12pt Arial"); sheet.addSpan(20, 3, 1, 2); sheet.getCell(20, 3).text("Driver's Side"); sheet.getCell(20, 3).font("12pt Arial"); } function initDamageAreaShapes(spread) { let sheet = spread.getSheet(0); spread.addSheet(1, new GC.Spread.Sheets.Worksheet("Damage_Areas")); let startColor = "lightgreen"; let damageAreaSheet = spread.getSheet(1); let damageAreas = ["Area", "Left", "Top", "Width", "Height", "Stroke Color", "Line Width"], front = ["front", 11, 136, 57, 167, "blue", 3], hood = ["hood", 123, 149, 142, 140, "blue", 3], frontWindshield = ["frontWindshield", 257, 149, 70, 140, "blue", 3], roof = ["roof", 325, 165, 158, 110, "blue", 3], rearTop = ["rearTop", 481, 149, 158, 143, "blue", 3], rear = ["rear", 661, 134, 63, 171, "blue", 3], leftFront = ["leftFront", 110, 310, 157, 85, "blue", 3], leftFrontDoor = ["leftFrontDoor", 257, 283, 140, 112, "blue", 3], leftBackDoor = ["leftBackDoor", 392, 283, 121, 111, "blue", 3], leftBack = ["leftBack", 465, 284, 168, 110, "blue", 3], rightFront = ["rightFront", 111, 44, 156, 76, "blue", 3], rightFrontDoor = ["rightFrontDoor", 258, 44, 139, 113, "blue", 3], rightBackDoor = ["rightBackDoor", 391, 44, 123, 115, "blue", 3], rightBack = ["rightBack", 465, 44, 168, 110, "blue", 3]; damageAreaSheet.setArray(0, 0, [ damageAreas, front, hood, frontWindshield, roof, rearTop, rear, leftFront, leftFrontDoor, leftBackDoor, leftBack, rightFront, rightFrontDoor, rightBackDoor, rightBack ]); let frontModel = { left: "=Damage_Areas!B2", top: "=Damage_Areas!C2", width: "=Damage_Areas!D2", height: "=Damage_Areas!E2", options: { fill: { type: 1, color: startColor, transparency: "0.5" } }, path: [ [ ["M", 1, 8], ["L", 17, 4], ["L", 19, 0], ["L", 31, 0], ["L", 33, 4], ["L", 51, 4], ["L", 56, 10], ["L", 57, 49], ["L", 52, 50], ["L", 51, 116], ["L", 57, 118], ["L", 57, 158], ["L", 51, 163], ["L", 34, 162], ["L", 31, 166], ["L", 19, 167], ["L", 18, 163], ["L", 1, 158], ["Z"] ] ] }; let hoodModel = { left: "=Damage_Areas!B3", top: "=Damage_Areas!C3", width: "=Damage_Areas!D3", height: "=Damage_Areas!E3", options: { fill: { type: 1, color: startColor, transparency: "0.5" } }, path: [ [ ["M", 10, 0], ["L", 142, 0], ["L", 133, 23], ["L", 133, 107], ["L", 142, 140], ["L", 10, 140], ["L", 0, 100], ["L", 0, 40], ["Z"] ] ] }; let frontWindshieldModel = { left: "=Damage_Areas!B4", top: "=Damage_Areas!C4", width: "=Damage_Areas!D4", height: "=Damage_Areas!E4", options: { fill: { type: 1, color: startColor, transparency: "0.5" } }, path: [ [ ["M", 6, 0], ["L", 72, 16], ["L", 67, 38], ["L", 67, 101], ["L", 69, 127], ["L", 6, 140], ["L", 0, 108], ["L", 0, 27], ["Z"] ] ] }; let roofModel = { left: "=Damage_Areas!B5", top: "=Damage_Areas!C5", width: "=Damage_Areas!D5", height: "=Damage_Areas!E5", options: { fill: { type: 1, color: startColor, transparency: "0.5" } }, path: [ [ ["M", 2, 0], ["L", 160, 0], ["L", 156, 23], ["L", 156, 86], ["L", 160, 110], ["L", 2, 110], ["L", 0, 86], ["L", 0, 23], ["Z"] ] ] }; let rearTopModel = { left: "=Damage_Areas!B6", top: "=Damage_Areas!C6", width: "=Damage_Areas!D6", height: "=Damage_Areas!E6", options: { fill: { type: 1, color: startColor, transparency: "0.5" } }, path: [ [ ["M", 8, 16], ["L", 102, 0], ["L", 149, 0], ["L", 156, 32], ["L", 156, 104], ["L", 149, 141], ["L", 102, 143], ["L", 8, 128], ["L", 0, 101], ["L", 0, 38], ["Z"] ] ] }; let rearModel = { left: "=Damage_Areas!B7", top: "=Damage_Areas!C7", width: "=Damage_Areas!D7", height: "=Damage_Areas!E7", options: { fill: { type: 1, color: startColor, transparency: "0.5" } }, path: [ [ ["M", 1, 10], ["L", 19, 1], ["L", 32, 5], ["L", 33, 2], ["L", 45, 2], ["L", 46, 6], ["L", 59, 9], ["L", 63, 12], ["L", 63, 158], ["L", 58, 162], ["L", 48, 164], ["L", 45, 169], ["L", 33, 169], ["L", 31, 166], ["L", 21, 171], ["L", 1, 164], ["Z"] ] ] }; let leftFrontModel = { left: "=Damage_Areas!B8", top: "=Damage_Areas!C8", width: "=Damage_Areas!D8", height: "=Damage_Areas!E8", options: { fill: { type: 1, color: startColor, transparency: "0.5" } }, path: [ [ ["M", 6, 48], ["L", 21, 29], ["L", 59, 20], ["L", 136, 14], ["L", 157, 8], ["L", 150, 24], ["L", 148, 47], ["L", 150, 69], ["L", 157, 85], ["L", 140, 85], //Wheel well ["L", 136, 71], ["L", 128, 58], ["L", 119, 52], ["L", 107, 47], ["L", 94, 46], ["L", 83, 47], ["L", 68, 52], ["L", 60, 61], ["L", 54, 70], ["L", 50, 85], ["L", 21, 85], ["L", 13, 71], ["L", 2, 67], ["Z"] ] ] }; let leftFrontDoorModel = { left: "=Damage_Areas!B9", top: "=Damage_Areas!C9", width: "=Damage_Areas!D9", height: "=Damage_Areas!E9", options: { fill: { type: 1, color: startColor, transparency: "0.5" } }, path: [ [ ["M", 9, 36], ["L", 84, 2], ["L", 116, 0], ["L", 140, 0], ["L", 134, 74], ["L", 140, 112], ["L", 12, 112], ["L", 7, 105], ["L", 4, 96], ["L", 1, 81], ["L", 2, 64], ["L", 5, 49], ["Z"] ] ] }; let leftBackDoorModel = { left: "=Damage_Areas!B10", top: "=Damage_Areas!C10", width: "=Damage_Areas!D10", height: "=Damage_Areas!E10", options: { fill: { type: 1, color: startColor, transparency: "0.5" } }, path: [ [ ["M", 6, 0], ["L", 71, 1], ["L", 95, 20], ["L", 115, 44], ["L", 121, 53], ["L", 117, 62], ["L", 105, 68], ["L", 87, 85], ["L", 78, 100], ["L", 75, 111], ["L", 5, 111], ["L", 2, 97], ["L", 0, 79], ["L", 1, 61], ["L", 3, 38], ["Z"] ] ] }; let leftBackModel = { left: "=Damage_Areas!B11", top: "=Damage_Areas!C11", width: "=Damage_Areas!D11", height: "=Damage_Areas!E11", options: { fill: { type: 1, color: startColor, transparency: "0.5" } }, path: [ [ ["M", 0, 0], ["L", 51, 9], ["L", 110, 34], ["L", 154, 43], ["L", 163, 49], ["L", 166, 55], ["L", 152, 55], ["L", 149, 73], ["L", 168, 80], ["L", 168, 91], ["L", 164, 97], ["L", 159, 97], ["L", 153, 110], ["L", 100, 110], //Wheel well ["L", 96, 97], ["L", 86, 84], ["L", 69, 74], ["L", 60, 72], ["L", 50, 73], ["L", 40, 73], ["L", 32, 78], ["L", 24, 85], ["L", 19, 92], ["L", 14, 101], ["L", 13, 110], ["L", 3, 110], ["L", 9, 96], ["L", 17, 81], ["L", 31, 69], ["L", 44, 61], ["L", 49, 55], ["L", 44, 44], ["L", 29, 27], ["L", 14, 12], ["Z"] ] ] }; let rightFrontModel = { left: "=Damage_Areas!B12", top: "=Damage_Areas!C12", width: "=Damage_Areas!D12", height: "=Damage_Areas!E12", options: { fill: { type: 1, color: startColor, transparency: "0.5" } }, path: [ [ ["M", 19, 0], ["L", 50, 0], //Wheel well ["L", 53, 13], ["L", 57, 23], ["L", 69, 33], ["L", 80, 38], ["L", 96, 41], ["L", 110, 37], ["L", 120, 30], ["L", 130, 24], ["L", 135, 12], ["L", 140, 0], ["L", 157, 0], ["L", 150, 12], ["L", 149, 22], ["L", 148, 33], ["L", 146, 42], ["L", 149, 55], ["L", 152, 68], ["L", 156, 76], ["L", 143, 73], ["L", 123, 71], ["L", 66, 66], ["L", 47, 64], ["L", 34, 59], ["L", 21, 54], ["L", 36, 53], ["L", 32, 37], ["L", 9, 38], ["L", 2, 35], ["L", 1, 19], ["L", 4, 16], ["L", 11, 16], ["Z"] ] ] }; let rightFrontDoorModel = { left: "=Damage_Areas!B13", top: "=Damage_Areas!C13", width: "=Damage_Areas!D13", height: "=Damage_Areas!E13", options: { fill: { type: 1, color: startColor, transparency: "0.5" } }, path: [ [ ["M", 10, 0], ["L", 139, 0], ["L", 135, 16], ["L", 132, 35], ["L", 136, 72], ["L", 139, 113], ["L", 106, 113], ["L", 78, 110], ["L", 10, 76], ["L", 3, 63], ["L", 0, 47], ["L", 0, 36], ["L", 2, 23], ["L", 4, 12], ["Z"] ] ] }; let rightBackDoorModel = { left: "=Damage_Areas!B14", top: "=Damage_Areas!C14", width: "=Damage_Areas!D14", height: "=Damage_Areas!E14", options: { fill: { type: 1, color: startColor, transparency: "0.5" } }, path: [ [ ["M", 6, 0], ["L", 76, 0], ["L", 80, 14], ["L", 89, 28], ["L", 96, 37], ["L", 108, 44], ["L", 118, 49], ["L", 123, 57], ["L", 118, 67], ["L", 111, 76], ["L", 93, 93], ["L", 74, 110], ["L", 55, 114], ["L", 30, 115], ["L", 6, 114], ["L", 1, 39], ["L", 3, 17], ["Z"] ] ] }; let rightBackModel = { left: "=Damage_Areas!B15", top: "=Damage_Areas!C15", width: "=Damage_Areas!D15", height: "=Damage_Areas!E15", options: { fill: { type: 1, color: startColor, transparency: "0.5" } }, path: [ [ ["M", 0, 0], ["L", 12, 0], //Wheel well ["L", 15, 11], ["L", 22, 25], ["L", 33, 33], ["L", 45, 39], ["L", 55, 40], ["L", 70, 39], ["L", 84, 31], ["L", 91, 22], ["L", 97, 13], ["L", 101, 0], ["L", 150, 0], ["L", 155, 4], ["L", 157, 12], ["L", 165, 15], ["L", 168, 18], ["L", 167, 30], ["L", 160, 34], ["L", 149, 36], ["L", 151, 55], ["L", 164, 55], ["L", 165, 61], ["L", 155, 68], ["L", 122, 74], ["L", 107, 78], ["L", 52, 102], ["L", 34, 107], ["L", 1, 110], ["L", 31, 83], ["L", 43, 69], ["L", 48, 52], ["L", 38, 46], ["L", 26, 40], ["L", 18, 33], ["L", 10, 19], ["L", 6, 13], ["Z"] ] ] }; sheet.shapes.add('front', frontModel); sheet.shapes.add('hood', hoodModel); sheet.shapes.add('frontWindshield', frontWindshieldModel); sheet.shapes.add('roof', roofModel); sheet.shapes.add('rearTop', rearTopModel); sheet.shapes.add('rear', rearModel); sheet.shapes.add('leftFront', leftFrontModel); sheet.shapes.add('leftFrontDoor', leftFrontDoorModel); sheet.shapes.add('leftBackDoor', leftBackDoorModel); sheet.shapes.add('leftBack', leftBackModel); sheet.shapes.add('rightFront', rightFrontModel); sheet.shapes.add('rightFrontDoor', rightFrontDoorModel); sheet.shapes.add('rightBackDoor', rightBackDoorModel); sheet.shapes.add('rightBack', rightBackModel); } function initAccidentType(sheet) { let rowHeaderWidth = sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader), colHeaderHeight = sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader), shapeType = GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle, hAlignment = GC.Spread.Sheets.HorizontalAlign.center, vAlignment = GC.Spread.Sheets.VerticalAlign.center, accidentTypeShapeInfo = [ [4, 11, "bumperDamage", "Bumper Damage"], [6, 11, "roofDamage", "Roof Damage"], [4, 15, "overheated", "Overheated"], [6, 15, "other", "Other"] ], cellRect, margin = 5; sheet.addSpan(4, 10, 4, 1); let cell = sheet.getCell(4, 10); cell.text("Accident Type"); cell.hAlign(hAlignment); cell.vAlign(vAlignment); cell.font("20pt Arial"); let accidentTypeButtonsGroup = []; for (let s = 0; s < accidentTypeShapeInfo.length; s++) { let tempShapeInfo = accidentTypeShapeInfo[s]; sheet.addSpan(tempShapeInfo[0], tempShapeInfo[1], 2, 4); // cellRect = sheet.getCellRect(tempShapeInfo[0], tempShapeInfo[1]); cellRect = getRangeOutsideWindow(sheet, tempShapeInfo[0], tempShapeInfo[1], 2, 4); let tempShape = sheet.shapes.add(tempShapeInfo[2], shapeType, cellRect.x - rowHeaderWidth + margin, cellRect.y - colHeaderHeight + margin, cellRect.width - (2 * margin), cellRect.height - (2 * margin)); tempShape.text(tempShapeInfo[3]); let tempShapeStyle = tempShape.style(); tempShapeStyle.line.color = "darkgreen"; tempShapeStyle.fill.color = "lightgreen"; tempShapeStyle.fill.transparency = 0.5; tempShapeStyle.textFrame.hAlign = hAlignment; tempShapeStyle.textFrame.vAlign = vAlignment; tempShapeStyle.textEffect.color = 'black'; tempShape.style(tempShapeStyle); accidentTypeButtonsGroup.push(tempShape); } return accidentTypeButtonsGroup; } function initSeverity(sheet) { let rowHeaderWidth = sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader), colHeaderHeight = sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader), shapeType = GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle, hAlignment = GC.Spread.Sheets.HorizontalAlign.center, vAlignment = GC.Spread.Sheets.VerticalAlign.center, severityShapeInfo = [ [8, "highSeverity", "High"], [10, "mediumSeverity", "Medium"], [12, "lowSeverity", "Low"] ], cellRect, margin = 5; sheet.addSpan(8, 10, 6, 1); let cell = sheet.getCell(8, 10); cell.text("Severity"); cell.hAlign(hAlignment); cell.vAlign(vAlignment); cell.font("20pt Arial"); let severityButtonsGroup = []; for (let s = 0; s < severityShapeInfo.length; s++) { let tempShapeInfo = severityShapeInfo[s]; sheet.addSpan(tempShapeInfo[0], 11, 2, 2); cellRect = getRangeOutsideWindow(sheet, tempShapeInfo[0], 11, 2, 2); let tempShape = sheet.shapes.add(tempShapeInfo[1], shapeType, cellRect.x - rowHeaderWidth + margin, cellRect.y - colHeaderHeight + margin, cellRect.width - (2 * margin), cellRect.height - (2 * margin)); tempShape.text(tempShapeInfo[2]); let tempShapeStyle = tempShape.style(); tempShapeStyle.line.color = "darkgreen"; tempShapeStyle.fill.color = "lightgreen"; tempShapeStyle.fill.transparency = 0.5; tempShapeStyle.textFrame.hAlign = hAlignment; tempShapeStyle.textFrame.vAlign = vAlignment; tempShapeStyle.textEffect.color = 'black'; tempShape.style(tempShapeStyle); severityButtonsGroup.push(tempShape); } return severityButtonsGroup; } function getRangeOutsideWindow (sheet, row, col, rowCount, colCount) { let x = 0, y = 0, width = 0, height = 0; for (let i = 0; i < colCount; i ++) { width += sheet.getColumnWidth(col + i); } for (let i = 0; i < rowCount; i ++) { height += sheet.getRowHeight(row + i); } for (let i = 0; i <= row; i ++) { y += sheet.getRowHeight(i); } for (let i = 0; i <= col; i ++) { if (i === col) { x += sheet.getColumnWidth(i) / 2; } else { x += sheet.getColumnWidth(i); } } return { x: x, y: y, width: width, height: height } } function initInfoArea(sheet) { let border = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin); sheet.addSpan(8, 13, 1, 3); sheet.getCell(8, 13).text("Driver Name:"); sheet.addSpan(8, 16, 1, 3); sheet.getRange(8, 16, 1, 3).borderBottom(border); sheet.addSpan(9, 13, 1, 3); sheet.getCell(9, 13).text("Vehicle Make/Model/Year:"); sheet.addSpan(9, 16, 1, 3); sheet.getRange(9, 16, 1, 3).borderBottom(border); sheet.addSpan(10, 13, 1, 6); sheet.getCell(10, 13).text("Details:"); sheet.addSpan(11, 13, 3, 6); sheet.getRange(11, 13, 3, 6).setBorder(border, { all: true }); } function lockCells(sheet) { sheet.getRange(8, 16, 1, 3).locked(false); sheet.getRange(9, 16, 1, 3).locked(false); sheet.getRange(11, 13, 3, 6).locked(false); sheet.options.isProtected = true; sheet.setActiveCell(8, 6); sheet.options.protectionOptions.allowSelectLockedCells = false; sheet.options.protectionOptions.allowSelectUnlockedCells = true; sheet.options.protectionOptions.allowEditObjects = false; } function getOffset(elem) { let docElem, box = { top: 0, left: 0 }, doc = elem && elem.ownerDocument; if (!doc) { return; } docElem = doc.documentElement; if (typeof elem.getBoundingClientRect !== void 0) { box = elem.getBoundingClientRect(); } return { top: box.top + window.pageYOffset - docElem.clientTop, left: box.left + window.pageXOffset - docElem.clientLeft }; }
<!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="$DEMOROOT$/spread/source/data/businessDashboard.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/ReportTemplate.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="spreadSheet" style="width:100%;height:100%"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }