How to add custom connection points within imported images?

[Apachez]

Hi there,

Using draw.io desktop-app 14.9.6.

Perhaps this feature already exists but I fail to locate how to achieve this.

When using regular shapes one can add additional connection points to the border of the shape using points=[]; as a xml style. This way any copy of this shape will have the connector points at the same place.

However I would like to add custom connection points within a shape and also within an imported image (imported through Arrange -> Insert -> Image).

Usecase is for example when one use draw.io to create a network diagram using picture of the devices such as a network switch.

If we take a network switch as an example I would like to place custom connector points at each interface of this network switch (24 or so) so that these connectors always exists when I import the particular image and apply a particular style (through xml in edit style or whatever other textfield this can be applied through).

A workaround is to select an endpoint of a line, press alt, then you can move and place that endpoint of the line at a custom place within the image. This way the endpoint of the line is locked at a specific position within the image.

The problem with the workaround is that the placing of the endpoint will differ slightly and is also slightly more time consuming rather than if I could just through xml style place the connection points and drag the line(s) to automatically connect to the defined connector points.

Can the above be done today, if so how?

If not, can the above be filed as a feature request (if so where do I do that)?

[diagrams.net Q&A]

Hi,

Could you attach the example you are trying to add custom connectors, please? You mentioned a network switch.

Thanks,

[Apachez]

The exact image(s) doesnt really matter.

In my case they are png files where one is approx 5300x550 pixels and the other is 1600x170 pixels. But they could be of any size and shape (well most are 19" in width in real life when it comes to networking but when it comes to number of pixels that will vary).

When I import these through Arrange -> Insert -> Image they get connector points by default at all four corners of the image and halfway between each corner. Basically just connector points along the border of the image. Which is fine when you want to create a drawing where you will show how different devices are connected to each other. But this time I want to go into details and also point out for the reader where the exakt interface is located within the device. Like you will connect int1 of switch1 with int16 of switch2.

The network switch is just an example (do a google image search for "network switch front view" or similar to get an idea of what Im speaking about) where I want to add custom connector points not along the border (which points=[]; will do) but rather based on pixel (or some other measurement) of the image.

Like lets take the image thats 5300x550 (width x height) pixels.

For that I would like (as an example to discuss about) add custom connector points at pixel position (of the original image):

int1: 200x500

int2: 300x500

...

int24: 2500x500

So that when I place my line between two of these interfaces I can make it snap lets say between int1 of image1 and int16 of image2 (and then add bends if needed to this line).

Currently the workaround is to place the line (with its bends) and then manually for each endpoint select the endpoint, press alt-key, move the endpoint to about where int1 of image1 is located. Repeat the process for the other endpoint of the same line that is select it, press alt-key, move the endpoint to about where int16 is located on image2.

Now when you just do this once in a lifetime the above is good enough as workaround.

But if you will do a larger network drawing (not just 2 imported images) or use draw.io as your primary tool to create such drawings the above workaround is timeconsuming.

If custom connector points could be setup through xml style or such then placing the lines between the interfaces of each network switch in the drawings would go so much faster. And the placement would also be exact (using the alt-key method ends up with a slight offset each time you place the line which also depends on your zoom level and how good you are to aim using the mouse).

So I guess what Im looking for is since points=[]; will only add connector points along the border of the imported image I would like to have something like (for the above case):

pixelpoints=[[200x500],[300x500],[400x500],[500x500],[600x500],[700x500],[800x500],[900x500],[1000x500],[1100x500],[1200x500],[1300x500],[1400x500],[1500x500],[1600x500],[1700x500],[1800x500],[1900x500],[2000x500],[2100x500],[2200x500],[2300x500],[2400x500]];

to be added as xml style in the properties of the imported image.

My hope is that something like this already exists or that points=[]; can be used for this (I just failed to figure out how)?

Since the description regarding points=[]; at https://drawio.freshdesk.com/support/solutions/articles/16000042498-customise-the-connection-points-on-a-shape only tells me that custom added connector points (using points=[];) will only use 0->1 as reference (like 0->100% of the width/height) and only add connector points to the outline of the shape (the border of the imported image).

[AvengerMoJo Alex]

I believe we are doing a similar thing. It would be nice to know if there is a doc or standard of the data format so we can implement the import export if possible. Thanks

Alex 

[diagrams.net Q&A]

Hi,

Thanks for the additional details. Unfortunately this is not possible but I created the GitHub issue you can comment, vote and track:

https://github.com/jgraph/drawio/issues/2199

At the moment, it is possible to add the third coordinate in order to be able to place connector points within a shape as described here: https://www.diagrams.net/doc/faq/shape-connection-points-customise
but this is not as precise as you would like to have i.e it not possible to add them at the exact pixel positions.

Kind regards,

[Apachez]

Thanks!

More preciously is that the current existing method only applies for adding custom connector points along the outline (border) of the shape/image.

I want to be able to do so (configurationwise such as in written text through xml style or such) within a shape/image (preferly with pixel accuracy of the original image) to make it easier and consistent once I later on draw lines between the objects.

Only workaround as of today is to use the press alt-method with the endpoint but that need manual handling of each endpoint and will most likely not end up with correct placement over time (depending on how stressed you are when you are about to drop that endpoint). Having custom connector points to snap to would make life so much easier and nicer drawings :-)

[diagrams.net Q&A]

Absolute offsets can be defined as a fourth and fifth coordinate, eg [x,y,0/1,dx,dy]. The documentation has been updated.

[Apachez]

So something like this should work then (with the example given in this thread)?

points=[[,,0,200,500],[,,0,300,500],[,,0,400,500],[,,0,500,500],[,,0,600,500],[,,0,700,500],[,,0,800,500],[,,0,900,500],[,,0,1000,500],[,,0,1100,500],[,,0,1200,500],[,,0,1300,500],[,,0,1400,500],[,,0,1500,500],[,,0,1600,500],[,,0,1700,500],[,,0,1800,500],[,,0,1900,500],[,,0,2000,500],[,,0,2100,500],[,,0,2200,500],[,,0,2300,500],[,,0,2400,500]];

[diagrams.net Q&A]

If you replace the leading [,, with [0,0 then yes.