Creating connecting arrows for block elements using canvas

Hello!

Recently there was a need to make a simple hierarchical tree for a web page (organization structure). The blocks turned out to be quite good, but when it came time to connect all the arrows, the question arose - how? The solution was two: draw arrows in .png or use special characters.

But I wanted something faster, more comfortable, modern - i.e. just indicate: the arrow from Block A to Block B. Already in the evening a small library was written, allowing you to realize your plans ...

Implementation

The implementation is simple and convenient, as planned; technically it happens in two steps:

• arrow_initialize( divid, newcanvasid); 

  creates a new canvas for drawing arrows in the background (in the parent block);

•  arrow(canvasid, div1, div1side, div2, div2side, color, lineWidth, shadowColor, shadowBlur); 

  we calculate the coordinates of the beginning and end of the arrow based on the id of the given blocks and output the arrow to the previously created canvas;

Disadvantages:

At the moment, I discovered several problems:

• for example, the created canvas overlaps text placed in blocks (it becomes inaccessible everywhere except Opera) - it fought with z-index - it did not help;
• also, a slight canvas offset occurs in Firefox.

Naturally, when moving (or animating) blocks relative to the background, the arrows will remain in place.
')

In custody:

Everything is still pretty damp, so it bears the status of beta, if you have any suggestions, then with pleasure “pull request” on guthub .

Examples of use and more details can be found here .



The same interesting, interesting way of constructing block schemes is shown here - a short writing style is used, in our case, we are not limited to simple block diagrams, but we connect or point to everything we want, other blocks, paragraphs, drawings, etc. using the canvas.

Thanks for attention!