CODEWITHSUNDEEP
javascriptgojs
NAS
NAS

Reputation: 145

Gojs - Order of Diagram elements in canvas differ between chrome and Mozilla

I have part which has panel that has shape and svg image added to diagram. This is followed by nodetemplate and then followed by groupTemplate.

1] myDiagram.add( $$(go.Part, "Table",

2] myDiagram.nodeTemplate =

3] myDiagram.groupTemplate =

The rendering of the diagram in chrome is : enter image description here

The rendering of the diagram in Mozilla is : enter image description here

Why is red circle and text appear at bottom in mozilla....???

The rendering in IE and Chrome is same but differs with mozilla. can anyone help out!!

Thanks

Upvotes: 1

Views: 443

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63822

Tis is happening is because Chrome's Array.sort is not a stable sort. This means that if you have to sort a list of elements and there is no criteria to determine that one should go before the other, then its possible the resulting sorted list will be sorted in a different order than the order they came in.

The solution is to use some criteria for sorting these objects. You can do this by setting a layout's comparer function.

By default the comparer function looks at Part.text, which has not been specified in your case, so each of your parts is equivalent, so Chrome's unstable sort mixes their order since (if they are equivalent), it doesn't think it matters.

To fix this, use something each part has in the order you want, for instance creating data.text or data.order or something, and compare using that:

// NOTE this assumes data.text exists!
// You could use anything as long as it describes the order
function myCompareFunction(a, b) {
  var at = a.data.text; 
  var bt = b.data.text;
  if (at < bt) return -1;
  if (at > bt) return 1;
  return 0;
}

Then in your layout definition add:

        layout:
        $(go.GridLayout,
          { ....... comparer: myCompareFunction })

Upvotes: 1

Related Questions