- Welcome, Guest. Please Login or Register
MindFusion  
  We have released initial version of MindFusion.JavaScript pack. It includes chart, diagram, calendar, map, virtual keyboard, gauge and UI components. Here are more details and live demo for anyone interested.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Pages: 1 2 3 4 5  Send Topic Print  
Html Node in Diagram !
Read 2425 times

Kannan Thirumal   Offline
Junior Member
**
Posts: 89
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: Html Node in Diagram !
Reply #30 - May 15th, 2019 at 12:49pm
 
Hi,

     I couldn't find invalidate method in the Diagram object. I'm using latest diagram library 3.3.5.

Regards,
Kannan
 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 302
Gender: male
MindFusion team


   
     
 
Re: Html Node in Diagram !
Reply #31 - May 15th, 2019 at 1:46pm
 
Hi,

We'll add it to the definitions file for the next release, in the mean time you can use declaration merging techniques to add the invalidate method to the Canvas class definition, or use the diagram.repaint method instead.

Regards,
Lyubo
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
Junior Member
**
Posts: 89
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: Html Node in Diagram !
Reply #32 - May 15th, 2019 at 1:51pm
 
Hi,

I tried the both like this,

this.diagram.repaint();

(this.diagram as any).invalidate(); Am I correct?

But both didn't work Sad

Regards,
Kannan
 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 302
Gender: male
MindFusion team


   
     
 
Re: Html Node in Diagram !
Reply #33 - May 15th, 2019 at 2:11pm
 
Kannan Thirumal wrote on May 15th, 2019 at 1:51pm:
(this.diagram as any).invalidate(); Am I correct?


Yes, the above should work. When are you calling it? Can you provide a small code snippet that reproduces the problem?

Regards,
Lyubo
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
Junior Member
**
Posts: 89
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: Html Node in Diagram !
Reply #34 - May 15th, 2019 at 2:15pm
 
Hi,

I'm calling this,

  public drawDiagram() {

    this.diagram.clearAll();

    (this.diagram as any).invalidate();

    let factory = <Factory>this.diagram.getFactory();

    for (let i: number = 0; i < this.diagramModel.nodes.length; i++) {

      let n = this.diagramModel.nodes[i];

      this.createCompositeNode(n);
    }
  }

Regards,
Kannan
 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 302
Gender: male
MindFusion team


   
     
 
Re: Html Node in Diagram !
Reply #35 - May 15th, 2019 at 2:39pm
 
Hi,

I'm attaching my test project that uses CompositeNodes (it's a modified version of Tutorial3 from the JsDiagram package) and with it and your code sample, I'm not able to reproduce your issue. The diagram gets repainted even without calling invalidate().

Can you modify the attached sample in a way that it reproduces the issue and send back to us to inspect?

Regards,
Lyubo
 
 

Tutorial3.zip (33 KB | 11 )
 
IP Logged    
 
     

Kannan Thirumal   Offline
Junior Member
**
Posts: 89
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: Html Node in Diagram !
Reply #36 - May 31st, 2019 at 2:46pm
 
Hi,

I've created a sample and attached to reproduce the issue.
1. Click Draw Diagram button (which draw a node)
2. Click Draw Another Diagram button (which clears the diagram and draw another node)

But the first node still appears there.

If double click on the node, creates another node at different location but not clear the previous nodes.

This behavior is working fine in 3.3.2 version.

Regards,
Kannan
 
 

MindFusionDiagram.rar (297 KB | 10 )
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 302
Gender: male
MindFusion team


   
     
 
Re: Html Node in Diagram !
Reply #37 - Jun 3rd, 2019 at 8:43am
 
Hi,

The drawing optimizations from last release did not handle transparent backgrounds. This build should fix that: https://mindfusion.eu/_temp/jsdiag_transparent.zip.

Regards,
Lyubo
 
 
« Last Edit: Jun 3rd, 2019 at 9:54am by Forum Admin »
 
IP Logged    
 
     

Kannan Thirumal   Offline
Junior Member
**
Posts: 89
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: Html Node in Diagram !
Reply #38 - Jun 3rd, 2019 at 12:28pm
 
Hi,

I used these two files by replacing in,

ClientApp\node_modules\diagram-library
ClientApp\node_modules\diagram-library\node_modules\mindfusion-common

Am I correct?

But after this too it doesn't work. Now the nodes are not displayed in the diagram. When moving the mouse the ports are displayed but not node.

Note: I tried the same in the previous given sample. Still the same behavior. ie the first node is still displayed when the diagram is cleared and redrawn with another node.

Regards,
Kannan
 
 
« Last Edit: Jun 4th, 2019 at 5:15am by Kannan Thirumal »
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 302
Gender: male
MindFusion team


   
     
 
Re: Html Node in Diagram !
Reply #39 - Jun 4th, 2019 at 7:09am
 
Hi,

You need to overwrite the MindFusion.Diagramming.js script in the ClientApp\node_modules\diagram-library folder and the MindFusion.Common.js script in the ClientApp\node_modules\mindfusion-common folder. After doing that i don't see issues in the application you sent. Attached are screen grabs after clicking the Draw Diagram and Draw Another Diagram buttons.

Make sure you're not loading some cached version of the library. Are there any errors in the browser's console?

We will update the npm package later in the day so that you won't need to overwrite the scripts manually.

Regards,
Lyubo
 
 

clientapp_1.png (96 KB | 8 )
clientapp_1.png
clientapp_2.png (108 KB | 7 )
clientapp_2.png
 
IP Logged    
 
     

Kannan Thirumal   Offline
Junior Member
**
Posts: 89
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: Html Node in Diagram !
Reply #40 - Jun 4th, 2019 at 10:26am
 
Hi Lyubo,

     It works ! Thank you.

     Looking forward for the latest npm diagram-library update today. Thank you !

Regards,
Kannan
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
Junior Member
**
Posts: 89
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: Html Node in Diagram !
Reply #41 - Jul 1st, 2019 at 12:37pm
 
Hi,

I've two composite nodes. One of the node have Circle shape image and another one have Diamond shape image. The circle image background is transparent but the diamond shape node is not. I couldn't find wrong with the image. May I know why this happens?

I've attached the screen shot.

Sample Code: https://drive.google.com/open?id=1ZWVBMlFLqfx6_cT6cCFME9Qg941mtrt5

Regards,
Kannan
 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 302
Gender: male
MindFusion team


   
     
 
Re: Html Node in Diagram !
Reply #42 - Jul 1st, 2019 at 2:00pm
 
Hi,

I'm not really sure what your issue is. The white background on the diamond shaped image is part of the image itself. If you want to make it transparent, you need to edit your image file.

Regards,
Lyubo
 
 
 
IP Logged    
 
     

Kannan Thirumal   Offline
Junior Member
**
Posts: 89
Gender: male
Bangalore, India
I Love Mind Fusion Diagram
:-)


   
     
 
Re: Html Node in Diagram !
Reply #43 - Jul 1st, 2019 at 2:12pm
 
Hi,

No, the white background is NOT part of the image. I hope I'm sure. For both the images, there is no white background. Please check the sample code which has both the images.

Regards,
Kannan
 
 
 
IP Logged    
 
     

Lyubo   Offline
Senior Member
****
Posts: 302
Gender: male
MindFusion team


   
     
 
Re: Html Node in Diagram !
Reply #44 - Jul 1st, 2019 at 2:35pm
 
Hi,

The image in the sample you provided above - ..\MindFusionDiagram_Node_Background\MindFusionDiagram\ClientApp\src\assets\imag
es\Nodes_2.png
- that's the file used by your composite node - and that file has white background.

Regards,
Lyubo
 
 

white.PNG (77 KB | 5 )
white.PNG
 
IP Logged    
 
     
Pages: 1 2 3 4 5  Send Topic Print