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;
}
