Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Flowchart demo with angular2 sample App provide broken UI. (Read 2894 times)
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Flowchart demo with angular2 sample App provide broken UI.
Jun 9th, 2017 at 7:22am
Print Post  
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.
  

mindfusion-chart-angular.zip ( 99 KB | 216 Downloads )
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Flowchart demo with angular2 sample App provide broken UI.
Reply #1 - Jun 9th, 2017 at 1:22pm
Print Post  
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 | 138 Downloads )
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: Flowchart demo with angular2 sample App provide broken UI.
Reply #2 - Jun 29th, 2017 at 6:37am
Print Post  
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 7:41am by Shafi »  

mindfusion-chart-angular_001.zip ( 99 KB | 203 Downloads )
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Flowchart demo with angular2 sample App provide broken UI.
Reply #3 - Jun 29th, 2017 at 8:49am
Print Post  
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
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint