CODEWITHSUNDEEP
svgjointjsnoflo
Miss Henesy
Miss Henesy

Reputation: 123

NoFlo UI Components Suddenly Broken ... "TypeError: this.node.getTransformToElement is not a function"

Our NoFlo graph components have suddenly compressed themselves all into one uneditable box that says "WaitForward". See attached image.

For a while, this was happening on every browser, except Opera, so I could go in there and update graphs. Then, a couple of weeks later, even Opera wouldn't render the components, so now I am unable to add anymore logic to existing NoFlo forms.

We barely touch code related to NoFlo, so I don't think anything changed in our environment. My theory is that browsers (such as Chrome, which used to be the one stable browser to use for editing) have been updated recently, and this tool needs some kind of an update in order to render properly. Yet I can find no reference to this issue on the NoFlo GitHub instructions, and it doesn't look like anyone is having that issue here on StackOverflow (until now, of course).

The error message in the console says:: "TypeError: this.node.getTransformToElement is not a function"

I plunked this error into Google and saw that others are experiencing this with something called clientIO, and that recent updates to Google Chrome are to blame, as Chrome has recently removed a core feature that allowed related js to function.

But ... how can I fix this? That is the question!

enter image description here

Upvotes: 1

Views: 606

Answers (1)

Miss Henesy
Miss Henesy

Reputation: 123

It looks like recent updates to Google Chrome are the culprit. Taken straight from jointjs.com's website::

Link to announcement from jointjs.com

Announcement: getTransformToElement() polyfill Nov 12th, 2015

Unfortunately, a new version of Chrome (48) removes a feature that is core to JointJS/Rappid. This feature is the SVGGraphicsElement.getTransformToElement() function. The motivation behind removing the method is - according to the Chrome team - open issues about how this method is supposed to behave.

To overcome compatibility issues with future versions of Chrome, we prepared a polyfill that makes sure this method exists. Before a new version of JointJS/Rappid is released (or if you, for any reason, don't want to upgrade), include the following code before you load your application JavaScript:

SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) { return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM()); };

I was unsure exactly where to put this code in my noflo directory. So I tried putting it at the tippy top of the "app/js/main.js" file. It seems to be working! (But advice for a better location is more than welcome.)

I hope this helps anyone else out there who is experiencing the same issue.

Upvotes: 2

Related Questions