Class/collaboration diagrams have misplaced links

[BenjaminNavarro]

When you choose to generate a class or collaboration diagram, Doxygen generates a <map> HTML tag containing <area>s pointing to the related types.

However, when using doxygen-awesome-css, the diagrams are resized to fit the column width which invalidates the links' position.

To solve this I guess you either have to:

1. fix how the <map> is generated
2. run some JS to fix the coordinates on page load
3. keep the original graph size

1. Might be tricky and 3. would change the page layout and probably won't be mobile friendly so I guess it leaves us with 2., but I don't know if it's easy to implement or not.

[jothepro]

Thanks for reporting this! I am aware oft the problem but somehow tried to ignore it due to the fact that I don't have a clever solution for it yet. 🙈

[BenjaminNavarro]

Ok I see 😄

After a quick look, it seems that to fix it with JS you would have to go through all <area>s coords to get the max x value which should more or less give you the width of the original graph. You can then scale all the coords by .center's width over that computed width.

Might not be perfect but good enough

[BenjaminNavarro]

Here's some quick implementation of what I was suggesting that seems to be working:

var x_max = 0;
$("map").children().each(function () {
  x_max = Math.max(x_max, $(this).attr("coords").split(',')[2]); // get bottom right corner x coordinate
});
var original_graph_width = x_max;
var current_graph_width = $("center").width();
var scaling = current_graph_width / original_graph_width;
$("map").children().each(function () {
  $(this).attr("coords", $(this).attr("coords").split(',').map(x => (+x) * scaling).join());
});

Disclaimer: I'm not a JS dev so the code might look ugly/wrong to one

[jothepro]

Sry for the late response. I haven't yet checked if this works, that's why I cannot give you proper feedback.
But I realized just in this moment that this is only a problem with png diagrams. It seems that the svg diagrams generated with Graphviz do have proper hyperlinks on the nodes, without depending on a map.
I'd recommend you to generate svg graphics with graphviz if possible, they look a lot better anyways, IMO.

https://github.com/jothepro/doxygen-awesome-css#class-diagrams-with-graphviz

Is that an acceptable solution for you?

[BenjaminNavarro]

Sorry I didn't get noticed of your reply and I'm just reading it.

After a quick test it indeed seems that the SVG output solves the issue. The only problem I've found with the SVG graph is that the hyperlinks only work on the lines (text, boxes) themselves but not on the boxes' background. It's not a huge deal but still a minor inconvenience. Also with PNG it's easier to save the generated graphs to a file to put them in another doc or something. Finally if SVG is not the Doxygen's default it might be for a reason, e.g browser compatibility or something like that.

While I agree that SVG graphs look better and I will probably switch to them, I guess some people might want to stick with PNG or some other image format for the reasons I gave and probably others I can't think of.

So to me it's probably better to supply the JS code to fix <map>s in case some people need it (by choice or because they didn't read to the end of the readme) and avoid user frustration and possibly new issues for the same problem.