- Welcome, Guest. Please Login or Register
MindFusion  
  Version 2 of our Xamarin Calendar component adds Resource view and support for Universal Windows Platform. Now beta testing spreadsheet component for Java Swing. We have released our Java Swing Pack.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Page Index Toggle Pages: 1 Send Topic Print  
Flowchart demo with angular2 sample App provide broken UI.
Read 188 times

Shafi   Offline
YaBB Newbies
*
Posts: 16
Gender: male
I Love MindFusion!


   
     
 
Flowchart demo with angular2 sample App provide broken UI.
Jun 9th, 2017 at 8:22am
 
Hello Mindfusion,

I have prepared a sample angular2 application where i try to replicate the flowcharter demo.

I would like that canvas always adapt to my applied 100% height and width. Unfortunately, it look very much wierd.

I have attached a sample Application with this post. Please unzip and folder and install npm package dependecies call command 'npm install' via developer command prompt . To start the application, please execute command 'npm start'.

Application can be accessed from http://localhost:4200.

Please have a look and provide me possible solution such that canvas always display as per applied style.

Looking forward to you support.
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1057
Gender: male
tech.support


   
     
 
Re: Flowchart demo with angular2 sample App provide broken UI.
Reply #1 - Jun 9th, 2017 at 2:22pm
 
Attached html looks better. Note that it does not assign sizing styles to the canvas but to its parent div. The Diagram object will resize the canvas anyway to apply Bounds and ZoomFactor values. We've also made some changes in your flex definitions, and this to fill the window -

<body style="width: 100%; height: 100%">

Regards,
Slavcho
 
 

src.zip (1 KB | 19 )
 
IP Logged    
 
     

Shafi   Offline
YaBB Newbies
*
Posts: 16
Gender: male
I Love MindFusion!


   
     
 
Re: Flowchart demo with angular2 sample App provide broken UI.
Reply #2 - Jun 29th, 2017 at 7:37am
 
Hi Slavcho,

Thank you for your response. Your fix did help me but unfortunately, after updating npm package to latest version the canvas element is looking very wierd.

ZoomIN and out or linking shapes is also not working nicely which was earlier not the case.

Could you please look into this?

Can we also change the shape icons and do not use default one from Mindfusion? if yes, how?

Regards,
Jeetendra
 
 
« Last Edit: Jun 29th, 2017 at 8:41am by Shafi »
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1057
Gender: male
tech.support


   
     
 
Re: Flowchart demo with angular2 sample App provide broken UI.
Reply #3 - Jun 29th, 2017 at 9:49am
 
Hi,

You should not set sizing properties on the Canvas element, remove them from your diagram canvas in
\src\app\app.component.html - otherwise it stretches the canvas, overrides our zoom factor and the hit-testing code does not know about it so you cannot hit the nodes to draw links. You could set size/position styles on parent DIV instead.

Also set 100% sizes on html and body to fill the window, i.e. set these

<html  style="width: 100%; height: 100%">
<body style="width: 100%; height: 100%">

in your \src\index.html

These were all shown in our sample project above.

You can change node shapes by setting their Shape property, you can also create custom ones if you need different geometries. Alternatively you can use bitmap images assigned to node's Image property.

Regards,
Slavcho
 
 
 
IP Logged    
 
     
Page Index Toggle Pages: 1 Send Topic Print