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.
import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { SpreadSheetsModule } from '@mescius/spread-sheets-angular'; import GC from '@mescius/spread-sheets'; import '@mescius/spread-sheets-shapes'; import './styles.css'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { hostStyle = { width: '100%', height: '100%', overflow: 'hidden', float: 'left' }; spread: any; constructor() { } initSpread($event: any) { let spread = $event.spread; this.spread = spread; let activeSheet = spread.getActiveSheet(); this.spread.options.allowUserZoom = false; this.addCarDiagram(activeSheet); this.initDamageAreaShapes(spread); let accidentTypeButtonsGroup = this.initAccidentType(activeSheet); let severityButtonsGroup = this.initSeverity(activeSheet); this.initInfoArea(activeSheet); (function shapeClicked() { let host = spread.getHost(); host.addEventListener("click", function(e: any) { 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: any[], name: string) { for (let i = 0; i < array.length; i++) { const ele = array[i] as any; if (ele.name() === name) { return ele } } return null; } function getOffset(elem: any) { 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 }; } }); })(); 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; this.lockCells(activeSheet); } addCarDiagram(sheet: any) { sheet.setColumnWidth(0, 200); sheet.setColumnWidth(10, 200); let startCellRect = sheet.getCellRect(0, 0), endCellRect = sheet.getCellRect(22, 10), spreadElement = this.spread.getHost(); 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"); } initDamageAreaShapes(spread: any) { 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); } initAccidentType(sheet: any) { 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 = this.getRangeOutsideWindow(sheet, <number>tempShapeInfo[0], <number>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; } initSeverity(sheet: any) { 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 = this.getRangeOutsideWindow(sheet, <number>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; } getRangeOutsideWindow (sheet: any, row: number, col: number, rowCount: number, colCount: number) { 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 } } initInfoArea(sheet: any) { 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 }); } lockCells(sheet: any) { 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; } } @NgModule({ imports: [BrowserModule, SpreadSheetsModule], declarations: [AppComponent], exports: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);
<!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/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- Polyfills --> <script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script> <script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script> <!-- SystemJS --> <script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></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="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.import('@angular/compiler'); System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('$DEMOROOT$/en/lib/angular/license.ts'); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html>
<div class="sample-tutorial"> <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)"> <gc-worksheet></gc-worksheet> </gc-spread-sheets> </div>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
(function (global) { System.config({ transpiler: 'ts', typescriptOptions: { tsconfig: true }, meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'core-js': 'npm:core-js/client/shim.min.js', 'zone': 'npm:zone.js/fesm2015/zone.min.js', 'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js', '@angular/core': 'npm:@angular/core/fesm2022', '@angular/common': 'npm:@angular/common/fesm2022/common.mjs', '@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs', '@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs', '@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs', '@angular/router': 'npm:@angular/router/fesm2022/router.mjs', '@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs', 'jszip': 'npm:jszip/dist/jszip.min.js', 'typescript': 'npm:typescript/lib/typescript.js', 'ts': './plugin.js', 'tslib':'npm:tslib/tslib.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js', '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js', '@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js', '@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'ts' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, "node_modules/@angular": { defaultExtension: 'mjs' }, "@mescius/spread-sheets-angular": { defaultExtension: 'mjs' }, '@angular/core': { defaultExtension: 'mjs', main: 'core.mjs' } } }); })(this);