Open BenjaminNavarro opened 3 years ago
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. 🙈
Ok I see :smile:
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
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
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?
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.
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:
<map>
is generated1.
Might be tricky and3.
would change the page layout and probably won't be mobile friendly so I guess it leaves us with2.
, but I don't know if it's easy to implement or not.