Various improvements

[Thierry61]

Patroon regexp was enhanced to handle optional port name in edge name. Previously this kind of edge was not highlighted.

Another change is when an url is attached to the node: the click command was opening the url but for consistency with nodes without url, we just want to highlight the node instead. I have added a preventDefault call in click handler to correct this. Note that the url remains accessible with the browser contextual menu (right-click).

I have also added some cosmetic modifications:

• removed "font-size: 20px;" in ".text-highlight-nodes text" and ".text-highlight-edges text" styles to not change shapes footprint (otherwise they tend to collide with neighboring shapes)
• changed "stroke-width: 10;" to "stroke-width: 2;" in all highlight styles (previously width was way too large)

Lastly I have added a bash script that can modify a svg file to automatically incorporate the needed modifications (add onload handler to svg tag and append svg-script content inside svg body). Note that this script was only tested in a git-bash prompt on Windows.

[Thierry61]

Note that the modification mentioned above about patroon regexp partially corrected issue #3: some (but not all) connected edges are highlighted when we click on a node.

I have improved it in my latest commit to allow more ‘:’ separators in edge names. I have tested it on several @martinrieder's examples and it seems to work now.

[martinrieder]

Many thanks for this contribution! 🚀 🌟

Note that there is a draft PR wireviz/WireViz#369 which will add edge drawing inside of the wire boxes.
These are currently part of the HTML table, which is the reason why they do not fully get highlighted.

EDIT: See the following example file generated using the above mentioned PR. I renamed it to .txt, because GH strips the dynamic content on .svg files: demo02.svg.txt
@Thierry61 What needs to be changed on these additional edges for getting them highlighted as well?

[Thierry61]

I am not sure of what an edge drawing inside a wire box is and I don’t think that your demo02.svg.txt contains any of them.

But I guess that ex15.svg in @tobiasfalk WireVizin fork has such edges (the pink and red vertical lines inside X1 node)

In fact my correction did animate these inner edges but the problem is that they have multiple paths and svg-script only animated the first one.

So I have added a new commit in my PR that corrects this problem.

[tobiasfalk]

Currently, the wires inside the table are done by a series of rows where the background color is made so that it looks like the wire(the edge for the wire).
In my fork, the gvpr file gives the option to straighten lines, and with this, it is possible to make straight lines through a table. This is then also used to draw the wires inside the table instead of the coloring of the rows.

[BartBrood]

Hi @Thierry61 thanks for the contributions, i merged the pull request now.

I also added a new way of doing dynamics using a local WASM library of graphviz, which allows more complex redrawings when e.g. collapsing and expanding clusters.