자동차 보험 청구서

다음 샘플은 SpreadJS에서 사용자 정의 셰이프를 사용하여 여러 가지 유형의 다이어그램을 만드는 방법을 보여줍니다. 이 경우 셰이프는 자동차 보험 청구를 위한 자동차 다이어그램을 만드는 데 사용됩니다. 차의 여러 부분을 선택하여 자동차의 손상된 부분을 나타내 보십시오.

이 예에서는 사용자 정의 셰이프를 보여주며, 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="spreadjs culture" content="ko-kr" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/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; }