CODEWITHSUNDEEP
javascriptfirefoxsvgjointjsrappid
Bojan B
Bojan B

Reputation: 2111

Rappid.js - getScreenCTM returns null in Firefox

I have encountered a problem that is causing me some headaches over the past few days.

I have a web page where users can create sort of a sequence diagram (using joint.js and rappid.js v1.7.1). The idea is - an user has some nodes available that can be dragged onto a canvas (paper in joint.js) and then these nodes can be linked with each other.

The functionality on itself works great in chrome and internet explorer, but I can't seem to get it to work in Firefox (Version 47.0.1).

As soon as I drop a node on the canvas I get the following error: enter image description here

As said this error only occurs in Firefox and using the Firefox and Chrome debugger functions I was able to tell that the "same" object does receive a SVG Matrix in Chrome while its null in Firefox.

The Node contains a SVG Image Content:

defaults: joint.util.deepSupplement({
    type: 'stations.StartPoint',
    attrs: {
        '.stations-point-title-text': { 'text': 'Start' },
        '.stations-point-content-image': { "xlink:href": "data:image/svg+xml;base64,..." }
    }
}, stations.Point.prototype.defaults)

The line of code in rappid.js where the error occurs

getTransformToElement: function (a) {
            return a.getScreenCTM().inverse().multiply(this.node.getScreenCTM())
        },

Has anyone had similar experience with joint.js? Any help or tips would be appreciated.

Thanks

EDIT: I found a solution to the issue, although I must confess I don't quite understand it. After analysis of a demo program that worked in Firefox I figured out that the difference was I wasn't calling the Navigator.render() functionality in my code (since I wasn't using a navigator). Adding that call resolved my problem. (http://jointjs.com/rappid/docs/ui/navigator)

Upvotes: 0

Views: 1744

Answers (1)

Lior
Lior

Reputation: 40649

Once moved to 0.9.5 the problem disappears. But make sure to include in your index.html

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

Upvotes: 0

Related Questions