Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67441

How to wait for image to load before setting scope in AngularJS?

$
0
0

I'm using AngularJS and TypeScript. I am using the cytoscape library with the extension cytoscape-edgehandles and the wrapper ngCytoscape for AngularJS. I am trying to add an image to the hover handle of the nodes, however the implementation of the drawImage method in cytoscape-edgehandles 2.7.1 does not wait for the image to load before drawing, therefore a range error occurs.

I have tried to give the cytoscape graph the options after the image is loaded, however the cytoscape graph expects the options to immediately be available for use. So somehow I need to load the image before passing it to the graph.

In the constructor of the controller:

 this.$scope.ehOptions = this.GetEhOptions();

The get EhOptions method:

protected GetEhOptions(): GraphModels.EhOptions {
    var options = new GraphModels.EhOptions;

    var img = new Image();
    img.width = 25;
    img.height = 25
    img.src = "../../Content/icons/ic_circle_add_24px.svg";
    options.handleImage = img;
    img.addEventListener('load', e => {
          return options;
    });
}

This results in the options never being loaded by the graph. If I do this in stead, I get all the options, except the image:

 var options = new GraphModels.EhOptions;

    var img = new Image();
    img.width = 25;
    img.height = 25
    img.src = "../../Content/icons/ic_circle_add_24px.svg";

    img.addEventListener('load', e => {
       options.handleImage = img;
    });
    return options;

The code of cytoscape-edgehandles concerning the handleIcon:

if(options().handleIcon){
    var icon = options().handleIcon;
    var width = icon.width*cy.zoom(), height = icon.height*cy.zoom();
    ctx.drawImage(icon, hx-(width/2), hy-(height/2), width, height);
}

If it is changed to this, then it works:

if (true) {
    var img = new Image();
    var width = 25 * cy.zoom();
    var height = 25 * cy.zoom();
    img.width = width;
    img.height = height
    img.src = "../../Content/icons/ic_circle_add_24px.svg";
        img.addEventListener('load', e => {
            ctx.drawImage(img, hx - (width/2), hy - (height/2), width, height)
     })
}

However, I cannot change the library code.

Hope you have any ideas. Thanks!


Viewing all articles
Browse latest Browse all 67441

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>