Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) Diagram with custom Node - Image not shown first load (Read 10051 times)
Ghaith
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 21
Joined: Apr 7th, 2017
Diagram with custom Node - Image not shown first load
Apr 7th, 2017 at 12:41pm
Print Post  
I have created a custom node containing couple of text and images, and was working fine, but the nodes started to load with the text only, and the images is not there, until I click on the node, then the images appeared. I don't know If it is because something I did or some property I changed.

I checked the console in Chrome, the function "updateCanvasElements" already called and the images are pushed.
I tested on IE, everything is okay as usual.

I searched, but nothing I could found or someone having the same problem.

Any Ideas? Hin?
« Last Edit: Apr 7th, 2017 at 2:04pm by Ghaith »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Diagram with custom Node - Image not shown first load
Reply #1 - Apr 7th, 2017 at 3:47pm
Print Post  
The DOM image might have not downloaded yet the first time you try to draw it. You could check the image.complete property, and if it's false call diagram.repaint() to schedule a redraw. You could as well subscribe to the image.load event. That's similar to what was discussed in this thread - http://mindfusion.eu/Forum/YaBB.pl?num=1488530760/15#15
  
Back to top
 
IP Logged
 
Ghaith
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 21
Joined: Apr 7th, 2017
Re: Diagram with custom Node - Image not shown first load
Reply #2 - Apr 7th, 2017 at 6:32pm
Print Post  
Dear this is the code I am using
//Add image
var imgFile = new Image();
imgFile.src = 'data:image/png;base64,' + f.value;
imgFile.addEventListener("load", function () {
                });

var img = new MindFusion.Drawing.Image(
new MindFusion.Drawing.Rect(this.bounds.x + p.position_X, this.bounds.y + p.position_Y, p.width, p.height));
img.image = imgFile;
img.loaded = imgFile.complete;

this.graphicsContainer.content.push(img);

but this didn't help
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Diagram with custom Node - Image not shown first load
Reply #3 - Apr 8th, 2017 at 11:43am
Print Post  
Try this handler -

Code
Select All
imgFile.addEventListener("load", function () {
	img.loaded = true;
	node.invalidate();
}); 



Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Ghaith
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 21
Joined: Apr 7th, 2017
Re: Diagram with custom Node - Image not shown first load
Reply #4 - Apr 10th, 2017 at 1:44pm
Print Post  
That solved the problem.

Many thanks
  
Back to top
 
IP Logged
 
Ghaith
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 21
Joined: Apr 7th, 2017
Re: Diagram with custom Node - Image not shown first load
Reply #5 - Jun 1st, 2017 at 4:09pm
Print Post  
Dear,

Previously I was using only 1 image per node and it worked correctly, but now I added multi image to same node. 3 images in my case used as buttons.

My Issue is that the first 2 images is not shown on the node on the first load, unless I select the node - I think a repaint function executed -, but the last image shown directly and no problem in it.

any ideas
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Diagram with custom Node - Image not shown first load
Reply #6 - Jun 1st, 2017 at 6:32pm
Print Post  
Have you also added similar load event handlers for them to repaint the node when image is downloaded?
  
Back to top
 
IP Logged
 
Ghaith
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 21
Joined: Apr 7th, 2017
Re: Diagram with custom Node - Image not shown first load
Reply #7 - Jun 2nd, 2017 at 2:35pm
Print Post  
yes, I have the same way for all images
here is my code, where I am doing a loop for all the fields stored in the node Tag, and I tried to pass the image src as base64 and another time as a link, and always only the last one pushed is the one that appears normally.

Note: This issue happened on Google chrome, but not on IE.

Code
Select All
        for (var i = 0; i < this.tag.fields.length; i++) {
            var f = this.tag.fields[i];
            var p = f.fieldPattern;
            if (p != null) {
                if (f.isImage) {
                    //Add image
                    var imgFile = new Image();
                    imgFile.src = f.value;

                    var img = new MindFusion.Drawing.Image(
                        new MindFusion.Drawing.Rect(this.bounds.x + p.position_X, this.bounds.y + p.position_Y, p.width, p.height));
                    img.image = imgFile;
                    img.loaded = imgFile.complete;
                    imgFile.addEventListener("load", function () {
                        img.loaded = true;
                        if (this.parent)
                            this.invalidate();
                    });
                    this.graphicsContainer.content.push(img);
                }
                else {
                    //add label
                }
        }
 


  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Diagram with custom Node - Image not shown first load
Reply #8 - Jun 5th, 2017 at 8:04am
Print Post  
Have you verified the code calls content.push(img) more than once, and that the image positions are different? Working under IE but not Chrome sounds strange - try clearing Chrome's cache in case it's using older version of your script, and check if there are error shown in console.
  
Back to top
 
IP Logged
 
Ghaith
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 21
Joined: Apr 7th, 2017
Re: Diagram with custom Node - Image not shown first load
Reply #9 - Jun 5th, 2017 at 11:45am
Print Post  
Content.Push(img) is called for every image, and the positions are different, if you prefer I can send you a screen recording presenting the issue?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Diagram with custom Node - Image not shown first load
Reply #10 - Jun 5th, 2017 at 1:07pm
Print Post  
Please attach a test project that reproduces it.
  
Back to top
 
IP Logged
 
Ghaith
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 21
Joined: Apr 7th, 2017
Re: Diagram with custom Node - Image not shown first load
Reply #11 - Jun 6th, 2017 at 7:04pm
Print Post  
Dear,

I couldn't attach the project here, please check the following link, I uploaded it to DropBox

https://www.dropbox.com/s/ndg1wx6v7qygkhe/ImageLoadingTest.rar?dl=0
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Diagram with custom Node - Image not shown first load
Reply #12 - Jun 7th, 2017 at 1:36pm
Print Post  
The problem is 'this' in nested function does not refer to the node but to the global window object. You will need to remember it in closure -

Code
Select All
var This = this;
imgFile.addEventListener("load", function ()
{
	img.loaded = true;
	if (This.parent)
		This.invalidate();
}); 



Also updateCanvasElements itself does not seem best place to create and load image objects. Instead load them from constructor or from the fromJson overload, saving all images in an array, and then only add the already-loaded array elements when updateCanvas is called.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Ghaith
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 21
Joined: Apr 7th, 2017
Re: Diagram with custom Node - Image not shown first load
Reply #13 - Jun 8th, 2017 at 3:43pm
Print Post  
changing the this did the work.

thanks a lot for your support
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint