Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic TreeLayout Mindfusion (Read 5809 times)
Zain Ahmed
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 4
Joined: Jan 12th, 2021
TreeLayout Mindfusion
Jan 12th, 2021 at 6:18pm
Print Post  
Hi everone!.
I am using Mindfusion diagramming. I want to make an Organogram in react. for that I installed npm mindfusion-common
and npm-diagram-library-react. but when i execute the code, it returns this error:
"TypeError: Cannot read property 'TreeLayout' of undefined"
Can anyone help me with this?
Thanks, Zain
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: TreeLayout Mindfusion
Reply #1 - Jan 12th, 2021 at 6:35pm
Print Post  
Hi!

You can find TreeLayout used in the Samples\React\src\Inheritance.js example. Doesn't it work for you when you do npm install & npm start (in parent folder)?

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Zain Ahmed
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 4
Joined: Jan 12th, 2021
Re: TreeLayout Mindfusion
Reply #2 - Jan 13th, 2021 at 7:40am
Print Post  
Hi Thanks for the time!
Actually I copied to code of Organogram from Mindfusion website. It worked fine in the simple HTML file. But when I moved to React it gave errors, then I install mindfusion library and imported
'mindfusion-common' which solved many errors. Now it's giving an error on the line :
"var TreeLayout = MindFusion.Graphs.TreeLayout;"
I don't know what to do now. I installed react-library too but in vain. Kindly help me
  
Back to top
 
IP Logged
 
Zain Ahmed
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 4
Joined: Jan 12th, 2021
Re: TreeLayout Mindfusion
Reply #3 - Jan 13th, 2021 at 8:19am
Print Post  
Update:
So I added two more imports which nearly solved the error :

Now it is saying "Can not read property 'id' of null" in the file
"MindFusion.Common" and in the following lines:

var cg = new cb(cf, cc);
[b('0x4a')] = cf;
this[b('0x9')](cg);
this[b('0x4b')][b('0x4c')](cf['id'], cg);
cg[b('0x31')]();
return cg;

It shows the organogram for a second and disappears afterwards.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: TreeLayout Mindfusion
Reply #4 - Jan 13th, 2021 at 9:19am
Print Post  
Have you placed the diagram canvas inside a div? The control expects a parent div serving as scroll-view, tooltip container and other DOM access operations. Otherwise please attach your test html and js code and our developer will investigate.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: TreeLayout Mindfusion
Reply #5 - Jan 13th, 2021 at 9:37am
Print Post  
By Organigram do you mean this example of ours? We'll try to adapt it to React later today...
https://mindfusion.eu/blog/organization-services-chart-with-the-javascript-diagr...
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: TreeLayout Mindfusion
Reply #6 - Jan 13th, 2021 at 11:08am
Print Post  
We've added that code as a new tab in the React example -
https://mindfusion.eu/_samples/React.OrgChart.zip

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Zain Ahmed
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 4
Joined: Jan 12th, 2021
Re: TreeLayout Mindfusion
Reply #7 - Jan 13th, 2021 at 1:21pm
Print Post  
Hi thanks for the help. I solved it somehow, but my request would be to upload as much videos as possible on your YouTube channel showing how to use MindFusion products Smiley
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: TreeLayout Mindfusion
Reply #8 - Jan 13th, 2021 at 3:44pm
Print Post  
Okay, we'll multiply them Wink
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint