Links do not work for mscgen.js in chrome and IE #244

daledude · 2017-03-22T05:50:27Z

The below example from the documentation produces links but clicking them does nothing.

https://mscgen.js.org/tutorial.html#url-id-idurl

sverweij · 2017-03-22T07:28:42Z

@daledude thanks for raising this.

This issue seems to occur in Chrome only - in Firefox & Safari links in the svg still work as expected) - I'll dive into it.

=> Is Chrome the browser you're using?

daledude · 2017-03-22T09:03:34Z

I should have put the browsers I tested. Chrome 57.0.2987.110 and MS Edge 38.14393.0.0. Slightly off topic. It would be useful if the link didn't open in a new window since I use anchors to scroll to the id's on the current page outside the svg.

As a test the below works as intended.

                <svg
                     xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink"
                     width="150" height="150">
                    <a xlink:href="#SBC-LosAngeles-20"><text x="25" y="25">link</text></a>
                    <a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#SBC-LosAngeles-20" xlink:title="#SBC-LosAngeles-20" xlink:show="new"><text x="55" y="55">|0|Trying</text></a>
                </svg>

daledude · 2017-03-22T09:10:32Z

Or an onClick would be useful.

sverweij · 2017-03-22T10:40:01Z

Thanks for the browser versions - I've confirmed on IE11 as well.

Weirdly:

right clicking the link and 'open in new tab' works in IE11 & chrome
when I save the svg, and open that saved svg in either IE or chrome the links work fine as well.

onClick

I'll look into that as well. What would you use it for?

open in 'new window'

About that open in 'new window' (xlink:show): ouch 😬 I'll remove that a.s.a.p. Seemed like a good idea back in the day, but I agree that it's actually super annoying.

see sverweij/mscgen_js#244

sverweij · 2017-03-22T21:20:00Z

@daledude a small update:

I've updated (and published) mscgenjs-core, mscgenjs-inpage, mscgenjs-cli and the stuff on mscgen.js.org so links open in same window.
Still looking into a solution for the for the troubles in chrome and IE11. I suspect it's a bug with svg's <use> in these browsers (=> have to look into a workaround).

daledude · 2017-03-22T21:27:22Z

Thanks!

I think it's a problem of these browsers not handling nested xlinks. A simple test below shows the links outside the "use" tags work but linked from the "use" do not. Or there is something overriding their events. I haven't been able to find anything specific to this due the words needed to search google for it!

<html>
<body>
<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <style>
        .classA {
            fill: red;
        }
    </style>
    <defs>
        <g id="Port">
            <circle style="fill: inherit;" r="10"/>
            <text>
                <a xlink:href="https://www.wikipedia.org">
                    <tspan>Link</tspan>
                </a>
            </text>
        </g>
    </defs>

    <text y="15">
        <a xlink:href="http://www.google.com">
            <tspan>Google</tspan>
        </a>
    </text>
    <use x="50" y="10" xlink:href="#Port"/>
    <text y="35">
        <a xlink:href="http://www.facebook.com">
            <tspan>Facebook</tspan>
        </a>
    </text>
    <use x="50" y="30" xlink:href="#Port" class="classA"/>
    <text y="55">
        <a xlink:href="http://www.twitter.com">
            <tspan>Twitter</tspan>
        </a>
    </text>
    <use x="50" y="50" xlink:href="#Port" style="fill: blue;"/>
</svg>
</body>
</html>

daledude · 2017-03-22T21:31:52Z

The reason for the onClick request is that's what I currently use in mscgen generated svg's. I "hack" the svg with javascript to replace the links so it will call my javascript function. My javascript function in turn smooth scrolls to the anchor on the page.

At the moment it's useless since it doesn't work within a "use" tag either. But, once the problem with the link is resolved I can use the #id syntax instead.

Thanks for taking the time.

daledude · 2017-03-22T21:57:30Z

Maybe this part of https://www.w3.org/TR/SVG2/linking.html#Links is relevant. Not sure if it just means nested a elements or any element that has an href.

Links may not be nested; if an ‘a’ element is a descendent of another hyperlink element (whether in the SVG namespace or another namespace), user agents must ignore its href attribute and treat it as inactive. The invalid ‘a’ element must still be rendered as a generic container element.

sverweij · 2017-03-22T23:11:17Z

The problem for chrome & IE definitely lies in the construction with use elements (as you also point out). They were trouble when the title attribute was introduced as well.

I have a working proof of concept that wraps the use in an a - a solution similar to what was used with the title attribute. It seems to work quite well, buIt needs polishing. It might have drawbacks I don't see right now because I need to get some sleep.

The permanent solution is probably to restructure the svg to not use use anymore on things that can have an a attribute in them (almost anything 😬). I've been playing with that idea for some time but didn't have enough incentive to actually do it.

Strangely, both chrome & IE do recognise the links, and are able to follow them (left-click => open link in new tab/ open link in new window work fine for both). Bug or not I'm not going to hold my breath for Google & Microsoft to fix it.

B.t.w.: Thanks for your prompt feedback & helpful additions. I really appreciate that.

daledude · 2017-03-23T18:42:30Z

I was going to propose just in-lining the "use" sections. You would know better than I the pro's and con's of doing that.

I've spent quite awhile trying to find something related but haven't. The closest was a jquery ticket about attaching click events. https://bugs.jquery.com/ticket/13180

Thanks for the effort you have put in for this!

sverweij · 2017-03-23T18:52:32Z

Inlining (replacing the uses with the actual stuff currently in the defs) was what I was thinking of in the permanent solution as well. Pros: smaller svg, easier to debug. Con: Quite a refactoring as the rendering code was built on the nice abstraction uses give.

I'll probably do the simple fix first and the refactoring later.

I've tried to parse the w3c document as well - it seems it only forbids nesting real links which totally makes sense (<a href="#one"><a href="#two">where does this link go?</a></a>) Links and uses should be mixable (and are - even in chrome and IE ...)

sverweij · 2017-03-24T22:50:33Z

The simple fix started to get very hacky, so I'm refactoring the graphics renderer to 'inline' elements. I've done the entities and I like the result. The links work and the rendered svg snippet with the entities is a lot easier to read. I hope I can do the arcs this weekend...

daledude · 2017-03-25T20:23:37Z

Looking forward to using it. Thanks again for all the effort! Will be nice to replace mscgen and my hacks to its output.

sverweij · 2017-03-25T21:16:40Z

@daledude Incidentally I've just finished development. If you want to, you can test it - I've deployed it on a feature branch on mscgen.js.org - let me know what you think.

deep link to a sample on that feature branch
new version of mscgenjs-inpage on that feature branch
the feature branch deployment root itself: https://mscgen.js.org/branches/bugfix/make-links-work-in-chrome

These links will work for a few days - until I've made a release (I hope to do that tomorrow - if there's no regressions)

daledude · 2017-03-26T08:49:37Z

Almost rick rolled...

Seems to work good. #id scrolls to anchors. http://... loads url.

Off topic...is there a way to customize the Named Styles without modifying the code?

sverweij · 2017-03-26T10:19:56Z

👍

@ customizing named styles - yes and no

The mscgenjs library has styleAdditions option that takes a string and inserts it at the bottom of the <style> section of the generated svg.
Its available in the command line interface with the [--css`](https://github.com/mscgenjs/mscgenjs-cli#manual-styles-experimental) parameter. The link contains a list of elements and class names that are available for tweaking.
This option is not available in the web version (mscgen-inpage and mscgen.js.org) because of security concerns. It'd make it too easy to run malicious scripts from mscgen.js.org on the unsuspecting visitor (just provide a </style>alert('Hi. I'm Snoopy.');...)
Another way to influence the styles is by including a <style> section in the surrounding document and adding tweaks there. The way browsers work, the styles in the svg override these in case of conflicts. I've been playing with the thought to provide a very bare named style so it'd be easier to tweak with this method. See the html below for a sample.

This said, I'm interested in what type of customizations you want to make. Maybe I can make things more customization friendly (and maybe the customizations you have are useful for others as well).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>mscgen.js style tweaking sample</title>
        <script src="https://mscgen.js.org/mscgen-inpage.js" defer></script>
        <!--
        available entities and classes
        - `svg, line, rect, path, text`
        - `rect`: `.entity .box .rbox .inline_expression .label-text-background
          .bglayer`
        - `line` and `path` (for selfs): `.arc .directional .nondirectional,
          .bidirectional .signal .method .return .callback .lost .emphasised`
        - `line` and `path`: `.box`
        - `line` only: `.comment .inline_expression_divider`
        - `path` only: `.note .abox .inline_expression_label`
        - `text`: `.entity-text .box-text .note-text .rbox-text .abox-text
          .empty-row-text .directional-text .nondirectional-text .bidirectional-text
          .signal-text .method-text .return-text .callback-text .lost-text
          .emphasised-text`
        - `.watermark`
        -->
        <style>
            svg {
                font-family: monospace; /* gets overriden in the svg */
            }
            .entity-text {
                font-family: serif; /* entities currently inherrit these from
                                      `svg`=> .entity-text is more specific
                                      than this inheritance, so this'll be
                                      applied */
            }
            .return-text { /* these'll work */
                font-weight: lighter;
                font-style: italic;
                fill: green;
            }
            .return {
                stroke: green; /* the svg has a  (line. /path.) return class
                                 with stroke:black and that'd override this*/
            }
            .lost-text { /* this will work */
                fill: red;
                font-weight: bold;
            }
            .watermark { /* this will work as well */
                font-family: cursive;
            }
        </style>
    </head>
    <body>
        <script type="text/x-mscgen">
        # OpenId Connect protocol
        # https://openid.net/specs/openid-connect-core-1_0.html#rfc.section.1.3
        msc {
          wordwraparcs="true", watermark="cursive watermark";

          eu [label="end-user"],
          rp [label="relying party"],
          op [label="OpenID provider"];

          eu =>> rp [label="log me in"];
          rp =>> op [label="authentication request"];
          op =>> eu [label="authentication and authorization request"];
          eu >> op [label="authenticate and authorize"];
          op >> rp [label="authentication response"];
          rp =>> op [label="UserInfo request"];
          op >> rp [label="UserInfo response"];
          rp >> eu [label="Hi. You're logged in with {UserInfo.name}"];
          rp -x op [label="lost"];
        }
        </script>
    </body>
</html>

sverweij · 2017-03-26T17:40:22Z

@daledude I've published the changes that should fix the issue for mscgenjs-core, _ mscgenjs-inpage_ and mscgenjs-cli to npm, and updated mscgen.js.org and the atom-mscgen-preview package.

Enjoy!

sverweij · 2017-03-30T12:10:42Z

@daledude I'll close this issue as the changes released in v1.9.10 & v1.9.11 resolve it as far as I can see

If you want to know more about (/ have suggestions to imrpove) customizing styling I'm happy to discuss in a separate issue.

daledude · 2017-03-31T06:05:37Z

I haven't had a chance to worry about the css yet but will open a new issue when ready.

The new version is working great!

sverweij self-assigned this Mar 22, 2017

sverweij changed the title ~~Links do not work for mscgen~~ Links do not work for mscgen.js in chrome and IE Mar 22, 2017

sverweij added a commit to mscgenjs/mscgenjs-core that referenced this issue Mar 22, 2017

makes link elements open in same window

e5cc0f7

see sverweij/mscgen_js#244

sverweij mentioned this issue Mar 24, 2017

Replace 'use's with inline elements mscgenjs/mscgenjs-core#33

Merged

sverweij closed this as completed Mar 30, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Links do not work for mscgen.js in chrome and IE #244

Links do not work for mscgen.js in chrome and IE #244

daledude commented Mar 22, 2017

sverweij commented Mar 22, 2017

daledude commented Mar 22, 2017

daledude commented Mar 22, 2017

sverweij commented Mar 22, 2017

sverweij commented Mar 22, 2017

daledude commented Mar 22, 2017 •

edited

Loading

daledude commented Mar 22, 2017

daledude commented Mar 22, 2017

sverweij commented Mar 22, 2017

daledude commented Mar 23, 2017

sverweij commented Mar 23, 2017 •

edited

Loading

sverweij commented Mar 24, 2017

daledude commented Mar 25, 2017

sverweij commented Mar 25, 2017

daledude commented Mar 26, 2017

sverweij commented Mar 26, 2017 •

edited

Loading

sverweij commented Mar 26, 2017

sverweij commented Mar 30, 2017

daledude commented Mar 31, 2017

Links do not work for mscgen.js in chrome and IE #244

Links do not work for mscgen.js in chrome and IE #244

Comments

daledude commented Mar 22, 2017

sverweij commented Mar 22, 2017

daledude commented Mar 22, 2017

daledude commented Mar 22, 2017

sverweij commented Mar 22, 2017

onClick

open in 'new window'

sverweij commented Mar 22, 2017

daledude commented Mar 22, 2017 • edited Loading

daledude commented Mar 22, 2017

daledude commented Mar 22, 2017

sverweij commented Mar 22, 2017

daledude commented Mar 23, 2017

sverweij commented Mar 23, 2017 • edited Loading

sverweij commented Mar 24, 2017

daledude commented Mar 25, 2017

sverweij commented Mar 25, 2017

daledude commented Mar 26, 2017

sverweij commented Mar 26, 2017 • edited Loading

sverweij commented Mar 26, 2017

sverweij commented Mar 30, 2017

daledude commented Mar 31, 2017

daledude commented Mar 22, 2017 •

edited

Loading

sverweij commented Mar 23, 2017 •

edited

Loading

sverweij commented Mar 26, 2017 •

edited

Loading