.addLine function has unexpected results when height or width is nil in PowerPoint

[marek-hi]

Hello,

I'm trying to make an add-in that makes legal entity structure charts. I'm struggling to get the "...addLine(PowerPoint.ConnectorType.XXXX, {..." to properly put the beginning and ending of the line in the correct place. I'm using the following format provided on the API docs:

// This sample creates a straight line on the first slide. await PowerPoint.run(async (context) => { const shapes = context.presentation.slides.getItemAt(0).shapes; const line = shapes.addLine(Excel.ConnectorType.straight, {left: 200, top: 50, height: 300, width: 150}); line.name = "StraightLine"; await context.sync(); });

(I think the reference to Excel is a typo, which I've changed to PowerPoint in my code). It seems to not accept width of zero (ie, it won't correctly display a perfectly vertical line, it inserts a line that is somewhat nonsensical). I've cludged this by ensuring that the height and width are never between -1 and 1. That seems to work but would be grateful if there is a more elegant solution to have perfectly vertical lines.

I'm coding in Visual Stuido 2022 17.5.1 for Windows, using the web version of PowerPoint Build 16.0.16306.40507 to develop/debug.

For additional context, it's also worth noting that I'm not very bright.

Kind Regards,

Marek

---

Document Details

⚠ Do not edit this section. It is required for learn.microsoft.com ➟ GitHub issue linking.

• ID: 9bcbfa95-c75b-102d-2f3f-45935f4c37bd
• Version Independent ID: b1d630f9-c744-5bfb-7288-89573a9efd57
• Content: Work with shapes using the PowerPoint JavaScript API - Office Add-ins
• Content Source: docs/powerpoint/shapes.md
• Product: powerpoint
• Technology: add-ins
• GitHub Login: @o365devx
• Microsoft Alias: o365devx

[AlexJerabek]

Hi @marek-hi,

Thank you for the question and reporting the sample issue. @alison-mk, could you please take a look?

[alison-mk]

Hi @marek-hi, thank you for submitting an issue. I've opened PR OfficeDev/office-js-docs-pr#3911 to resolve the typo in the code snippet. For your second concern, I'm researching how to add perfectly horizontal and vertical lines with the addLine API internally. I'll leave this issue open while I do that research and report back when I have more information.

Cheers, Alison

[AlexJerabek]

Looking back at this, this is a product bug. I'll transfer this to the product repo.

[AlexJerabek]

@marek-hi,

There is a workaround for this issue. If you change the height or width after creating the line, it'll make it straight.

  // For a line, left and top are the coordinates of the start point,
    // while height and width are the coordinates of the end point.
    const line = shapes.addLine(PowerPoint.ConnectorType.straight, {
      left: 0,
      top: 153,
      height: 0,
      width: 400
    });
    line.name = "StraightLine";
    line.height=0;

    await context.sync();

[marek-hi]

Thanks! I'll give that a try.

On Fri, 9 Feb 2024, 20:16 Alex Jerabek, @.***> wrote:

@marek-hi https://github.com/marek-hi,

There is a workaround for this issue. If you change the height or width after creating the line, it'll make it straight.

// For a line, left and top are the coordinates of the start point, // while height and width are the coordinates of the end point. const line = shapes.addLine(PowerPoint.ConnectorType.straight, { left: 0, top: 153, height: 0, width: 400 }); line.name = "StraightLine"; line.height=0;

await context.sync();

— Reply to this email directly, view it on GitHub https://github.com/OfficeDev/office-js/issues/4121#issuecomment-1936545647, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXNMO4W2X24XSYSM5WPSZTLYSZ7ZTAVCNFSM6AAAAABDB7RLNOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZWGU2DKNRUG4 . You are receiving this because you were mentioned.Message ID: @.***>

[marek-hi]

That worked!

Maybe this should be a different ticket, but when I generate the the shapes, they show wonky on the main screen but fine in the preview panel on the left. Refreshing the browser fixes it in the main screen.

[AlexJerabek]

Glad that workaround helped. For the other shape issue, yes, please create a new issue in this repo to track that separately.