Skip to main content
Solved

Endpoint coordinate don't update using Extension API

  • 20 June 2024
  • 5 replies
  • 46 views

When using getPoint1 or getPoint2 for a line in my editor extension, the x or y value are not updated when the line is connected to a block.

Moving the block manually in the drawing at the endPoint1 or at the endPoint2 of the line don’t modify the result in the extension.

            for(const nindex, item] of page.allLines) {
                item.getEndpoint1().x;
                item.getEndpoint1().y;
                item.getEndpoint2().x;
                item.getEndpoint2().y;
                }

Any help?

Hey Michel!

Thanks for posting and thanks for building on Lucid! We will need one of our developers to duplicate this issue on our side and that may take a few days. We’ll get back to you as soon as we have triaged the issue.

Could you help me understand what you’re trying to accomplish? I don’t need to understand everything about what your app is trying to do and we must be sensitive to the fact that this is a public forum. However, it is helpful for us to know why you need the coordinates of a line endpoint and how that fits generally into the goal of the code. It may allow us to provide alternative solutions to accomplish what you need!

I would like to be able to change the position of the line on its connexion to the block for managing the routing of the line by code.

Hi Michel!

That’s a bug and thank you for bringing it to your attention! 

But the good news is that you can still change the position of a connection to block. Here’s a sample action that creates two blocks and adds a connection between them. Then, we change the location of the endpoint’s connection with linkX and linkY instead of x and y. You would specifically want to look at the block under the comment “Change the endpoint location”.

linkX: 0 for left end of the block. 1 for right end of the block.

linkY: 0 for top end of the block. 1 for bottom end of the block.
 

client.registerAction('Add Blocks and line', async () => {

    //Create two blocks
    await client.loadBlockClasses(o"ProcessBlock"]);
    const page = viewport.getCurrentPage();
    if (!page) return;

    const size = {
      h: 80,
      w: 320,
    };

    let position = viewport.findAvailableSpace(size.w, size.h);
    const block1 = position.page.addBlock({
      className: "ProcessBlock",
      boundingBox: {
        x:position.x,
        y:position.y,
        h: 80,
        w: 320,
      },
    });

    position = viewport.findAvailableSpace(size.w, size.h);
    const block2 = position.page.addBlock({
      className: "ProcessBlock",
      boundingBox: {
        x:position.x,
        y:position.y,
        h: 80,
        w: 320,
      },
    });

    //Create a line that connects the two blocks
    const line = position.page.addLine({
        endpoint1: {
            connection:block1,
            linkX:1,
            linkY:0
        }
        ,
        endpoint2:{
            connection:block2,
            linkX:0,
            linkY:0
        },
    })

    //Change the endpoint location.
    line.setEndpoint1({
            connection:block1,
            linkX:0.5,
            linkY:1
        });

    line.setEndpoint2({
        connection:block2,
        linkX:1,
        linkY:0.5
      });
});

 

Hi Michel!

That’s a bug and thank you for bringing it to your attention! 

But the good news is that you can still change the position of a connection to block. Here’s a sample action that creates two blocks and adds a connection between them. Then, we change the location of the endpoint’s connection with linkX and linkY instead of x and y. You would specifically want to look at the block under the comment “Change the endpoint location”.

linkX: 0 for left end of the block. 1 for right end of the block.

linkY: 0 for top end of the block. 1 for bottom end of the block.
 

client.registerAction('Add Blocks and line', async () => {

    //Create two blocks
    await client.loadBlockClasses(o"ProcessBlock"]);
    const page = viewport.getCurrentPage();
    if (!page) return;

    const size = {
      h: 80,
      w: 320,
    };

    let position = viewport.findAvailableSpace(size.w, size.h);
    const block1 = position.page.addBlock({
      className: "ProcessBlock",
      boundingBox: {
        x:position.x,
        y:position.y,
        h: 80,
        w: 320,
      },
    });

    position = viewport.findAvailableSpace(size.w, size.h);
    const block2 = position.page.addBlock({
      className: "ProcessBlock",
      boundingBox: {
        x:position.x,
        y:position.y,
        h: 80,
        w: 320,
      },
    });

    //Create a line that connects the two blocks
    const line = position.page.addLine({
        endpoint1: {
            connection:block1,
            linkX:1,
            linkY:0
        }
        ,
        endpoint2:{
            connection:block2,
            linkX:0,
            linkY:0
        },
    })

    //Change the endpoint location.
    line.setEndpoint1({
            connection:block1,
            linkX:0.5,
            linkY:1
        });

    line.setEndpoint2({
        connection:block2,
        linkX:1,
        linkY:0.5
      });
});

 

 

Thank you for that.

Best regards.

Reply


Lucid Software Inc. Supplemental Community Terms