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?

Comments

Ian Baenziger
Userlevel 3
Badge +4

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!

Michel L
Userlevel 1
Badge +5

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.

J
Badge +1

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(["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
      });
});

 

Michel L
Userlevel 1
Badge +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(["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
      });
});

 

 

Michel L
Userlevel 1
Badge +5

Thank you for that.

Best regards.

Reply


Lucid Software Inc. Supplemental Community Terms