Go JS JSON array is not rendering properly in browser IE 11 version

GoJS
1

I have requirement to display the image when user clicking next or previous in button. I have saved gojs data in json array and rending in the browser. The JSON array contains image data and it is not displayed as expected. i have contain number of image data and some of image is not displayed in IE11.9 version . I am getting Indexsize Error when clicking navigation button.

errorimage.jpg956×787 37 KB

Please find the code below and screen shot for your reference.

{ "class": "go.GraphLinksModel",
  "nodeDataArray": [
 {
  "category":"DocImage",
  "path":"/Upload/UploadHandler.ashx?f=bc8e2865-74fd-49ba-9712-d5dae87b08a5_WI-THT-103190-REVK-A052-page-001.jpg&repository=document",
  "nodeName":"WI-THT-103190-REVK-A052-page-001",
  "nodeId":"5",
  "key":-1,
  "loc":"15.125 16",
  "zOrder":1,
  "desiredSize":{"class":"go.Size", "width":955, "height":555},
  "imageMaxSize":{"class":"go.Size", "width":"NaN", "height":"NaN"},
  "imageStretch":{"class":"go.EnumValue", "classType":"GraphObject", "name":"Fill"}
 }
],
  "linkDataArray": []
}

Please advise on this.

2

Does everything work well in Firefox and Safari and Chrome?

Are you using IE 11? What is IE 11.9?

3

It is working fine. Chrome browser. i did check safari and firefox. I am using IE 11.9 version

4

Can you show your node template? In particular how is the Picture defined? And how large is the JPG image?

5

var imageTemplate =
$$(go.Node, “Auto”, { selectable: false },
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
$$(go.Panel, “Auto”,
$$(go.Picture,
{
sourceCrossOrigin: function (pict) { return “use-credentials”; },
//width: 40, height: 40,
imageStretch: go.GraphObject.UniformToFill,
maxSize: new go.Size(200, 200),
angle: 30,
},
new go.Binding(“source”, “path”),
new go.Binding(“width”, “imageWidth”),
new go.Binding(“height”, “imageHeight”),
new go.Binding(“imageStretch”, “imageStretchOption”),
new go.Binding(“desiredSize”, “imageDesiredSize”),
new go.Binding(“maxSize”, “imageMaxSize”))
)
);
Thanks for your response. Please provide the solution for this issue as soon as possible
customer wants to fix this issue

6

How many images are being shown at once? Are there multiple diagrams being shown at the same time? Do you encounter this problem when running in IE on other machines?

And how large are those JPG images?

Since the error is an Internet Explorer one, and not one directly caused by our code, I suspect there is no solution to this.

7

one image is showing at the same time. when clicking next button(>) will display the next image . The mostly the images width 950px and height=550px.

8

For more information regarding this issue. The Json array is rending inside the canvas layout properly without any issue In IE11. i have attached correctly rending json arrar data array screen shot for your reference.
{ “class”: “go.GraphLinksModel”, “nodeDataArray”: [ {“category”:“DocImage”, “path”:"/Upload/UploadHandler.ashx?f=3f6f7b3d-d832-4d07-a3f3-fd9d8d11b9a8_WI-THT-103190-REVK-A0511-page-001.jpg&repository=document", “nodeName”:“WI-THT-103190-REVK-A0511-page-001”, “nodeId”:“14”, “key”:-1, “loc”:“31.125 16”, “zOrder”:1, “desiredSize”:{“class”:“go.Size”, “width”:950, “height”:556}, “imageMaxSize”:{“class”:“go.Size”, “width”:“NaN”, “height”:“NaN”}, “imageStretch”:{“class”:“go.EnumValue”, “classType”:“GraphObject”, “name”:“Fill”}} ], “linkDataArray”: []}

The below Json Array is not rendering properly in Canvas layout only IE11 . i have added result json array and screen shot for your reference.
{ “class”: “go.GraphLinksModel”, “nodeDataArray”: [ {“category”:“DocImage”, “path”:"/Upload/UploadHandler.ashx?f=8cc63b1a-e63a-464a-ba9e-98cdceecaa86_WI-THT-103190-REVK-A0512-page-001.jpg&repository=document", “nodeName”:“WI-THT-103190-REVK-A0512-page-001”, “nodeId”:“15”, “key”:-1, “loc”:“13.125 14”, “zOrder”:1, “desiredSize”:{“class”:“go.Size”, “width”:957, “height”:557}, “imageMaxSize”:{“class”:“go.Size”, “width”:“NaN”, “height”:“NaN”}, “imageStretch”:{“class”:“go.EnumValue”, “classType”:“GraphObject”, “name”:“Fill”}} ], “linkDataArray”: []}

indexsizerror.jpg1914×877 201 KB

the above json array is showing indexsize error in browser. Please provide the solution ASAP

9

If you comment out Pictures from your code so that you never use any go.Pictures in any of your templates, does the problem still happen?

10

I have my go js JSON like below

{ "class": "go.GraphLinksModel", "nodeDataArray": [ {"category":"DocImage", "path":"imgSrc", "nodeName":"WI-THT-103190-REVK-A0514-page-001", "nodeId":"17", "key":-1, "loc":"15.125 23", "zOrder":1, "desiredSize":{"class":"go.Size", "width":958, "height":544}, "imageMaxSize":{"class":"go.Size", "width":"NaN", "height":"NaN"}, "imageStretch":{"class":"go.EnumValue", "classType":"GraphObject", "name":"Fill"}} ], "linkDataArray": []}

If i set this to gojs model, it is not showing the image. The same will work if i set Desired size as NaN.

Please help me on this

11

We really have no idea of what you are doing – showing the model in JSON format does not help any.

It sounds as if your work is related to Go JS JSON array is not rendering properly in browser IE 11 version. If that is the case, we’re addressing the IE11-specific behavior there.

12

Thanks for the reply Walter.

The prob is in draw Image. IE11 is not supporting negative values of sX and sY. sX,sY values are calculated automatically by GoJs. Is there any fix available for this?.

13

This issue has been resolved in GoJS v1.7.15. I was using GoJs 1.6.23 earlier. @walter I have license for GoJs 1.6.23. How can i use the same for GoJS v1.7.15?

14

That’s good.

I’ll forward this message to GoSales@nwoods.com.