自動車保険の事故報告書

このデモでは、カスタムシェイプを使用して様々なタイプの図形を作成する方法を示しています。この例では、シェイプを使用して、自動車保険請求のための車の図形を作成しています。車の損傷している部分を示すために、車の異なる部分やセクションを選択してみてください。

このデモでは、 カスタムシェイプ の使用方法を示します。カスタムシェイプを使って様々なタイプの図形を作成することができます。
window.onload = function () { let spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadSheet"), { sheetCount: 1 }); spread.options.allowUserZoom = false; spread.options.scrollbarMaxAlign = true; 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="ja-jp" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/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; }