Flowchart demo with angular2 sample App provide broken UI. - Diagramming Components

(UTC)

MindFusion Forums › Diagramming Components › JavaScript › Flowchart demo with angular2 sample App provide broken UI.

(Moderator: Slavcho)

‹ Previous Topic | Next Topic ›

Pages: 1

Flowchart demo with angular2 sample App provide broken UI. (Read 3858 times)

Shafi Full Member Offline I Love MindFusion! Posts: 109 Joined: Nov 8^th, 2016	Flowchart demo with angular2 sample App provide broken UI. Jun 9^th, 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 (Attachment deleted)
	IP Logged

Slavcho YaBB Moderator Offline tech.support Posts: 3435 Joined: Oct 19^th, 2005	Re: Flowchart demo with angular2 sample App provide broken UI. Reply #1 - Jun 9^th, 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 (Attachment deleted)
	IP Logged

Shafi Full Member Offline I Love MindFusion! Posts: 109 Joined: Nov 8^th, 2016	Re: Flowchart demo with angular2 sample App provide broken UI. Reply #2 - Jun 29^th, 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 29^th, 2017 at 7:41am by Shafi »
	mindfusion-chart-angular_001.zip (Attachment deleted)
	IP Logged

Slavcho YaBB Moderator Offline tech.support Posts: 3435 Joined: Oct 19^th, 2005	Re: Flowchart demo with angular2 sample App provide broken UI. Reply #3 - Jun 29^th, 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


	IP Logged

Pages: 1

‹ Previous Topic | Next Topic ›