The MindFusion Forums

The MindFusion Forums
Flow Diagramming Components >> Html Canvas & JavaScript >> Flowchart demo with angular2 sample App provide broken UI. https://mindfusion.eu/Forum/YaBB.pl?num=1496992933 Message started by Shafi on Jun 9^th, 2017 at 7:22am

Title: Flowchart demo with angular2 sample App provide broken UI.
Post by Shafi on Jun 9^th, 2017 at 7: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.

https://mindfusion.eu/Forum/YaBB.pl?action=downloadfile;file=mindfusion-chart-angular.zip ( 99 KB | 218 Downloads )

Title: Re: Flowchart demo with angular2 sample App provide broken UI.
Post by Slavcho on Jun 9^th, 2017 at 1: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

https://mindfusion.eu/Forum/YaBB.pl?action=downloadfile;file=src.zip ( 1 KB | 140 Downloads )

Title: Re: Flowchart demo with angular2 sample App provide broken UI.
Post by Shafi on Jun 29^th, 2017 at 6: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

https://mindfusion.eu/Forum/YaBB.pl?action=downloadfile;file=mindfusion-chart-angular_001.zip ( 99 KB | 205 Downloads )

Title: Re: Flowchart demo with angular2 sample App provide broken UI.
Post by Slavcho on Jun 29^th, 2017 at 8: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