order: 3
id: excel-shape-lines
name: Lines
description: Creates and modifies line shapes.
host: EXCEL
api_set:
    ExcelApi: '1.9'
script:
    content: |-
        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
        document.getElementById("createShapes").addEventListener("click", () => tryCatch(createShapes));
        document.getElementById("addStraightLine").addEventListener("click", () => tryCatch(addStraightLine));
        document.getElementById("addCurvedLine").addEventListener("click", () => tryCatch(addCurvedLine));
        document.getElementById("arrowLine").addEventListener("click", () => tryCatch(arrowLine));
        document.getElementById("diamondLine").addEventListener("click", () => tryCatch(diamondLine));
        document.getElementById("connectStraightLine").addEventListener("click", () => tryCatch(connectStraightLine));
        document.getElementById("disconnectStraightLine").addEventListener("click", () => tryCatch(disconnectStraightLine));
        document.getElementById("connectCurvedLine").addEventListener("click", () => tryCatch(connectCurvedLine));
        document.getElementById("disconnectCurvedLine").addEventListener("click", () => tryCatch(disconnectCurvedLine));
        document.getElementById("deleteLines").addEventListener("click", () => tryCatch(deleteLines));

        async function addStraightLine() {
            await Excel.run(async (context) => {
                const shapes = context.workbook.worksheets.getItem("Shapes").shapes;
                const line = shapes.addLine(200, 50, 300, 150, Excel.ConnectorType.straight);
                line.name = "StraightLine";
                await context.sync();
            });
        }

        async function addCurvedLine() {
            await Excel.run(async (context) => {
                const shapes = context.workbook.worksheets.getItem("Shapes").shapes;
                const line = shapes.addLine(200, 300, 300, 400, Excel.ConnectorType.curve);
                line.name = "CurvedLine";
                await context.sync();
            });
        }

        async function arrowLine() {
            await Excel.run(async (context) => {
                const shapes = context.workbook.worksheets.getItem("Shapes").shapes;
                const line = shapes.getItem("StraightLine").line;
                line.beginArrowheadLength = Excel.ArrowheadLength.long;
                line.beginArrowheadWidth = Excel.ArrowheadWidth.wide;
                line.beginArrowheadStyle = Excel.ArrowheadStyle.oval;

                line.endArrowheadLength = Excel.ArrowheadLength.long;
                line.endArrowheadWidth = Excel.ArrowheadWidth.wide;
                line.endArrowheadStyle = Excel.ArrowheadStyle.triangle;

                await context.sync();
            });
        }

        async function diamondLine() {
            await Excel.run(async (context) => {
                const shapes = context.workbook.worksheets.getItem("Shapes").shapes;
                const line = shapes.getItem("CurvedLine").line;
                line.beginArrowheadLength = Excel.ArrowheadLength.short;
                line.beginArrowheadWidth = Excel.ArrowheadWidth.narrow;
                line.beginArrowheadStyle = Excel.ArrowheadStyle.diamond;

                line.endArrowheadLength = Excel.ArrowheadLength.short;
                line.endArrowheadWidth = Excel.ArrowheadWidth.narrow;
                line.endArrowheadStyle = Excel.ArrowheadStyle.diamond;
                
                await context.sync();
            });
        }

        async function connectStraightLine() {
            await Excel.run(async (context) => {
                const shapes = context.workbook.worksheets.getItem("Shapes").shapes;
                const line = shapes.getItem("StraightLine").line;
                line.connectBeginShape(shapes.getItem("Left"), 2);
                line.connectEndShape(shapes.getItem("Right"), 0);
                await context.sync();
            });
        }

        async function disconnectStraightLine() {
            await Excel.run(async (context) => {
                const shapes = context.workbook.worksheets.getItem("Shapes").shapes;
                const line = shapes.getItem("StraightLine").line;
                line.disconnectBeginShape();
                line.disconnectEndShape();
                await context.sync();
            });
        }

        async function connectCurvedLine() {
            await Excel.run(async (context) => {
                const shapes = context.workbook.worksheets.getItem("Shapes").shapes;
                const line = shapes.getItem("CurvedLine").line;
                line.connectBeginShape(shapes.getItem("Left"), 2);
                line.connectEndShape(shapes.getItem("Right"), 0);
                await context.sync();
            });
        }

        async function disconnectCurvedLine() {
            await Excel.run(async (context) => {
                const shapes = context.workbook.worksheets.getItem("Shapes").shapes;
                const line = shapes.getItem("CurvedLine").line;
                line.disconnectBeginShape();
                line.disconnectEndShape();
                await context.sync();
            });
        }

        async function deleteLines() {
            await Excel.run(async (context) => {
                const shapes = context.workbook.worksheets.getItem("Shapes").shapes;
                shapes.getItem("StraightLine").delete();
                shapes.getItem("CurvedLine").delete();
                
                await context.sync();
            });
        }

        async function setup() {
            await Excel.run(async (context) => {
                context.workbook.worksheets.getItemOrNullObject("Shapes").delete();
                const sheet = context.workbook.worksheets.add("Shapes");
                
                sheet.activate();
                await context.sync();
            });
        }

        async function createShapes() {
            await Excel.run(async (context) => {
                const sheet = context.workbook.worksheets.getItem("Shapes");

                const shape1 = sheet.shapes.addGeometricShape(Excel.GeometricShapeType.diamond);
                shape1.left = 5;
                shape1.top = 5;
                shape1.height = 100;
                shape1.width = 100;
                shape1.name = "Left";

                const shape2 = sheet.shapes.addGeometricShape(Excel.GeometricShapeType.cloud);
                shape2.left = 400;
                shape2.top = 300;
                shape2.height = 100;
                shape2.width = 100;
                shape2.name = "Right";
            });
        }

        /** Default helper for invoking an action and handling errors. */
        async function tryCatch(callback) {
            try {
                await callback();
            } catch (error) {
                // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
                console.error(error);
            }
        }
    language: typescript
template:
    content: |-
        <section>
            <p>This sample shows how to create and modify line shapes.</p>
        </section>
        <section class="setup">
            <h3>Setup</h3>
            <button id="setup">Create a worksheet</button><p/>
            <button id="createShapes">Create shapes</button>
        </section>
        <section>
            <h3>Try it out</h3>
            <button id="addStraightLine">Add a straight line</button><p/>
            <button id="addCurvedLine">Add a curved line</button><p/>
            <button id="arrowLine">Turn into arrow</button><p/>
            <button id="diamondLine">Turn into diamond connector</button><p/>
            <button id="connectStraightLine">Connect straight line</button><p/>
            <button id="disconnectStraightLine">Disconnect straight line</button><p/>
            <button id="connectCurvedLine">Connect curved line</button><p/>
            <button id="disconnectCurvedLine">Disconnect curved line</button><p/>
            <button id="deleteLines">Delete lines</button>
        </section>
    language: html
style:
    content: |-
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 14px;
            line-height: 1.5;
            padding: 10px;
        }

        section {
            margin-bottom: 20px;
        }

        h3 {
            margin-top: 0;
            margin-bottom: 10px;
            font-size: 16px;
        }

        p {
            margin: 0 0 10px 0;
        }

        button {
            background-color: #f0f0f0;
            color: #333333;
            border: 1px solid #8a8a8a;
            padding: 8px 16px;
            font-size: 14px;
            cursor: pointer;
            border-radius: 2px;
            margin-left: 20px;
            margin-bottom: 5px;
            min-width: 80px;
            display: block;
        }

        button:hover {
            background-color: #e0e0e0;
        }

        button:active {
            background-color: #d0d0d0;
        }

        input {
            padding: 8px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 2px;
            font-size: 14px;
        }

        .header {
            text-align: center;
            background-color: #f3f2f1;
            padding: 10px;
        }
    language: css
libraries: |-
    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts