Microsoft Edge error: IndexSizeError

[madhukarhere]

Hi,

I am trying to create a graph with image nodes. It is working fine in Firefox and Chrome but not working in IE 11 and IE edge. When I try to debug in IE Edge it is showing the below error

IndexSizeError

and pointing to below code in line 35466 in Vis.js
ctx.drawImage(this.canvas, from[0], from[1], from[2], from[3], _to[0], _to[1], _to[2], _top[3]).

Below is the configuration section:

var container = document.getElementById("groups");
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {
        interaction: {
            hover: true,
            tooltipDelay: 10,
            dragNodes: false,// do not allow dragging nodes
            zoomView: true, // do not allow zooming
            dragView: true  // do not allow dragging
        },
        nodes: {size:30},
        edges: {
            width: 2,
            shadow: true,
            color: edge_color
        },
        groups: {
            orgs: {
                font: {
                    size: 16,
                    color: "#000000"
                }
                shadow: {enabled: true, borderRadius: 35},
            },
            groups: {
                shape: 'icon',
                icon: {
                    face: 'FontAwesome',
                    code: '\uf007',
                    size: 80,
                    color: '#aa00ff'
                },
                shadow: {enabled: true},
                size: 35,
                font: {
                    size: 16,
                    color: "#000000"
                },
            },
            sub_groups: {
                shape: 'icon',
                icon: {
                    face: 'FontAwesome',
                    code: '\uf007',
                    size: 35,
                    color: '#aa00ff'
                },
                shadow: {enabled: true},
                size: 40,
                font: {
                    size: 16,
                    color: "#000000"
                },
            },
            more:{
                shape: "circle",
                font: {
                    size: 45
                },
                borderWidth: 2,
                shadow: {enabled: true},
                color: get_rand_color()
            }
        },
        physics:{barnesHut:{gravitationalConstant:-2000}},

    };

    network = new vis.Network(container, data, options);

    network.on("click", function (params) {
        params.event = "[original event]";
        var s_nodes = params["nodes"];
        var pointer = params["pointer"];
        var dom_cords = pointer["DOM"];
        if(s_nodes[0] !== "more_"+group_id){
            generate_toop_tip(s_nodes[0],dom_cords["x"], dom_cords["y"]);
        } else{
            remove_tooltip();
            show_more_orgs(group_id);
        }
    });

    network.on("hoverNode", function (params) {
    });

    set_screen_coords();
    remove_tooltip();

[wimrijnders]

Known problem. Before anything else, set the following option to false:

nodes: {
  shape: {
    interpolation: false
  }
}

... and then report back.

IE/Edge can't do the image interpolation thing. However, the default interpolation of these browsers is reported to be pretty damn good (!), so you probably won't miss it.

Which brings me to the though that I should be putting on my TODO to disable this option for IE/Edge.

Please tell me if this helped!

[madhukarhere]

Thank you @wimrijnders for the quick reply. After implementing the above code. I am getting the below error
`Invalid type received for "shape". Expected: string. Received [object] "[object Object]"

Problem value found at:
options = {
nodes: {
shape
}
}

vis.js:33334 Errors have been found in the supplied options object.`

[wimrijnders]

Ah. That's another known error, and particularly nasty one. I'm afraid there's no known fix for that. The problem is that I try to type faster than I can think.

The correct option is: nodes.shapeProperties.interpolation: false

[madhukarhere]

Awesome. It worked. Thanks @wimrijnders

[wimrijnders]

I am assuming we're done here, so I'll close the issue.

[mrtvon]

Hi,

I have the same issue in a Windows UWP application, but setting shape interpolation false doesn't fix it for me:

    var options = {
        nodes: {
            shapeProperties: {
                interpolation: false
            }
        }
    };

I still get the IndexSizeError above on the same line of code. Strangely the from and _to arrays are populated correctly and the canvas looks valid.

[mrtvon]

OK I just noticed that the canvas is 32x48 and from is populated with 0,0,32,32.5, i'm guessing 32.5 is out of bounds.

Any idea why the interpolation fix doesn't work in this case?

[mrtvon]

FYI I worked around it with a range check. Works now.

          var from = this.coordinates[iterations - 1];
          var _to = this.coordinates[iterations];

          if (from[3] > this.canvas.height) {
              from[3] = this.canvas.height;
          }