module.exports.cloneCssStyles() in combination with Angularjs breaks display in Chrome and IE

[wolframst]

Hi Knut,

Thanks for this great library! It is really easy and intuitive to use.

I am using mermaid together with Angularjs, what works fine by and large.
When testing in different browsers, I noticed one issue that breaks display of Flowcharts in Chrome (latest version) and IE 10. In both browsers, all chart items appear completely black.
Uncommenting the lines below fixed the issue.

module.exports.cloneCssStyles = function(svg, classes){
  ...
  if (typeof(rule.style) !== 'undefined') {
    var elems = svg.querySelectorAll(rule.selectorText);
      if (elems.length > 0) {
        usedStyles += rule.selectorText + " { " + rule.style.cssText + " }\n";
      }
  }
  ...
}

The Javascript error is

Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Element': '[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate)' is not a valid 
selector.

Searching for the problem, I found one link to a similar issue on github. The developer says that handling of invalid selector errors fixed the issue here. ( exupero/saveSvgAsPng#11 )

Uncommenting the code did not have any negative impact on display, so this is a workaround for me.
Maybe you can provide a fix in one of the next versions?

Thanks,
Wolfram

[knsv]

Thanks for pointing this out. I will look into it!

Skickat från min iPad

5 mar 2015 kl. 13:10 skrev wolframst notifications@github.com:

Hi Knut,

Thanks for this great library! It is really easy and intuitive to use.

I am using mermaid together with Angularjs, what works fine by and large.
When testing in different browsers, I noticed one issue that breaks display of Flowcharts in Chrome (latest version) and IE 10. In both browsers, all chart items appear completely black.
Uncommenting the lines below fixed the issue.

module.exports.cloneCssStyles = function(svg, classes){
...
if (typeof(rule.style) !== 'undefined') {
var elems = svg.querySelectorAll(rule.selectorText);
if (elems.length > 0) {
usedStyles += rule.selectorText + " { " + rule.style.cssText + " }\n";
}
}
...
}
The Javascript error is

Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Element': '[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate)' is not a valid
selector.
Searching for the problem, I found one link to a similar issue on github. The developer says that handling of invalid selector errors fixed the issue here. ( exupero/saveSvgAsPng#11 )

Uncommenting the code did not have any negative impact on display, so this is a workaround for me.
Maybe you can provide a fix in one of the next versions?

Thanks,
Wolfram

—
Reply to this email directly or view it on GitHub.

[knsv]

The similar issue you sent was very useful. I have wrapped the css copying in a try/catch statement in a similar way. This is committed but not yet released. It also handles the case when the css file is on an external site, then firefox blocks the css copying.

@wolframst, it would be very useful if you could test and see if this solves your issue.

[wolframst]

Hi Knut,

Thats what I call a fast response. Thanks so much!
The fix resolved the issue partially. The graph now renders, but all edges are missing. Looks like the invalid selectors error gets thrown while rendering the edges.
In order to reproduce the issue it should be sufficient to incude the angular.js file.

Best,
Wolfram

[knsv]

That sounds like a styling issue. Check if the styles for edgePaths are in place.

.edgePath .path {
   stroke: #333333;
}

Also is the same for firefox/chrome?

A tmp addition of the style inline can also give some clues to what the problem is.

[knsv]

A fix for this has been released in version 0.5.0

[ma-zal]

I updated Mermaid to 0.5.0. But error still appears. :(
Using AngularJS v1.3.15.

Invalid CSS selector "[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate)" DOMException: Failed to execute 'querySelectorAll' on 'Element': '[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-hide-animate)' is not a valid selector.
at Error (native)
at Object.e.exports.cloneCssStyles (http://localhost:3000/client/lib/mermaid/mermaid.min.js:13:22882)
at _ (http://localhost:3000/client/lib/mermaid/mermaid.min.js:13:20647)
at Object.n.render (http://localhost:3000/client/lib/mermaid/mermaid.min.js:13:21322)
at u (http://localhost:3000/client/lib/mermaid/mermaid.min.js:13:17626)
at Object.r.mermaid.init (http://localhost:3000/client/lib/mermaid/mermaid.min.js:13:17893)
at http://localhost:3000/client/js/components/ui/statusflowdiagram/statusflowdiagram-ctrl.js:12:19
at http://localhost:3000/client/lib/angular/angular.min.js:138:473
at e (http://localhost:3000/client/lib/angular/angular.min.js:40:74)

[knsv]

This is an error message occurring when styles are being copied from the surround context, (web page), into the svg code.

The css rules that fails are, (at least in my test page), related to angular and not to the svg. In the catch clause for the exception there error is written but the copying continues.

Does the svg appear for you?

/Knut

Knut Sveidqvist
Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Monday 8 June 2015 at 08:16, ma-zal wrote:

I updated Mermaid to 0.5.0. But error still appears. :(
Using AngularJS v1.3.15.

—
Reply to this email directly or view it on GitHub (#126 (comment)).

[ma-zal]

To knsv: You are right, final SVG is OK. So, if i understand, this "error" is "warning" only, because all works. And my imagination is: Error causes some part of Angular, that tries to manipulate with DOM, and it is not possible to solve it.