my-mind draw line between nodes.

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?

May 10 '17 06:05 hotpeperoncino

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

May 10 '17 08:05 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?

May 10 '17 11:05 hotpeperoncino

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> ?).

May 11 '17 07:05 ondras

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.

May 11 '17 09:05 hotpeperoncino

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.

Mar 21 '19 09:03 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?

Mar 22 '19 11:03 ZiadJ

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.

Mar 27 '19 19:03 ondras