0

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)

Bojan B
  • 2,091
  • 4
  • 18
  • 26
  • Is an element which is attached to the document? Is it display:none? – Robert Longson Jul 01 '16 at 08:24
  • @RobertLongson Yes it is attached to the document and display:block – Bojan B Jul 01 '16 at 08:33
  • Are any of it's ancestors display:none? I think you're going to need to create a [mcve] here. – Robert Longson Jul 01 '16 at 08:45
  • I have the same issue. Yet interestingly, the jointjs demo (the FSM one) works in FF! – Lior Jul 03 '16 at 15:39
  • @Lior I haven't made much progress on this yet... unfortunately the solution we have is to complex to break down into a minimal verifiable example... What did you move to Version 0.9.5 ? As for Angular2, I'm not using this so, if you tell me what to downgrade to 0.9.5 I can check if I get the same second error as you or not ... – Bojan B Jul 05 '16 at 11:35

1 Answers1

0

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 >

Lior
  • 40,466
  • 12
  • 38
  • 40
  • Firefox has a native implementation of getTransformToElement and should not need that code. Chrome would need it but this question is about Firefox. – Robert Longson Jul 05 '16 at 13:14