draw line between nodes.

[hotpeperoncino]

I want to draw lines between two nodes randomly in order to represent meaningful relation.
Can I have an idea where to be modified in the source?

[hotpeperoncino]

http://romiz.altervista.org/custom/images/romiz_conversion_mind.jpg
It is called "arrow link"? it means the red line in the image.

[hotpeperoncino]

In https://github.com/hotpeperoncino/my-mind, I can specify two nodes with arrowlink attributes.
But I cannot draw line between them (layout.tree.js). Can I have a suggestion?

[ondras]

Hi @hotpeperoncino,

I want to draw lines between two nodes randomly in order to represent meaningful relation.
Can I have an idea where to be modified in the source?

I would start with the update function in https://github.com/ondras/my-mind/blob/master/src/layout.tree.js#L20, which is called when an item needs to be redrawn. This is probably the right time and place to draw your arrow links.

Unfortunately, there is no suitable <canvas> node available for arrow links. Every map node has its own canvas for its lines, but these canvases are too small and to local for your needs. I suggest creating a separate canvas for every arrow link, or drawing arrowlinks using a different technology (SVG <path> ?).

[hotpeperoncino]

Thank you for your information.
I noticed the small canvas problem. It seems too difficult for me to implement..
I'd like to think about another solution.

[ZiadJ]

I'm thinking of creating a fullscreen canvas in the background where arrow links from all the node canvases would be drawn. I'm going to have to be able to access the absolute positions for each related nodes though to begin with and I'm not sure how to do that. PS I'm new to canvas coding and my-mind itself.

[ZiadJ]

Turns out the nodes themselves are not canvas based, as I had imagined, so their positions can be obtained directly from the DOM.

Now I'm trying to figure out how to draw a line(preferably curved & arrowed) between two points on main canvas from the existing api. Any ideas anyone on the functions available for that?

[ondras]

Curved lines are ideally drawn via the beginPath() API, preferrably using the bezierCurveTo() commands.

Arrows are typically implemented as small triangles; these are trivially done using a filled (polygonal) path.