New questions

[naveganth]

As I said, i would be coming again with more questions and problems i faced regarding the OrgChartJS library, please give me a hand understanding and making my website better. Code demo/example for reviewing code.

1. How to change the position of the collapse/expand circle button?

2. How to make "Seção de Atendimento Medico" behave like OrgChart.tree as the layout example bellow, but only for specific nodes and without the dot and bottom connecting them?

Expected something like this, but without the last node:

3. With the amount of nodes now and information the website became very slow, how to improve the performance of nodes loading, expanding and collapsing?

4. I want to be able to click to move around to work inside the nodes too and for details you should click the right mouse button or just click the three dots bellow.

5. Too much space left, they should have some kind of layout.

2. How to make "Seção de Atendimento Medico" behave like OrgChart.tree as the layout example bellow, but only for specific nodes and without the dot and bottom connecting them?

6. Zooming in and out cause the site to lag a lot...

[ZornitsaPesheva]

1. You can get the "plus" and "minus" definitions from the templates and change it. Click on "Get the source code of group template"
2. You need the node-layout event: https://code.balkan.app/multi-layout#JS You can try to add one hidden node to move the last node to left or right
3. Try to set the lazy loading to false and play with the constants in this example.
4. You need the pan option: https://code.balkan.app/pan-issue#JS
5. Try the grid layout with the layout events: https://code.balkan.app/org-chart-js/grid-layout#JS
6. How many nodes do you have? Can you create a code example?

[naveganth]

6. How many nodes do you have? Can you create a code example?

I did create a code example, It's the first link on the issue.

[ZornitsaPesheva]

How can I reproduce that lagging in this example?

[naveganth]

How can I reproduce that lagging in this example?

Using mouse wheel down and up, going back and forth makes the website slowdown.

https://github.com/BALKANGraph/OrgChartJS/assets/159157666/3b705398-015b-47c5-ae7b-0437058a4109

You need the pan option: https://code.balkan.app/pan-issue#JS

The pan should not work as click while panning in the group nodes, holding to pan them letting go, act as click how to fix that?

Also how to change the image inside an edit form? I'm using a 300x400 ratio of images but the edit form uses a different ratio

• 

[ZornitsaPesheva]

Court Organogram.webm When you work normally with the chart zoom (not zooming constantly) it looks good enough.

[naveganth]

Court Organogram.webm When you work normally with the chart zoom (not zooming constantly) it looks good enough.

Outside of the OrgChart demos/examples it lags a lot... Like an unbearable amount maybe its something with my HTML?

Also I still need help with those two:

• The pan should not work as click while panning in the group nodes (holding to pan them letting go, acts as click). How to fix that?

• Also how to change the image inside an edit form? I'm using a 300x400 ratio of images but the edit form uses a different ratio?

[ZornitsaPesheva]

Please edit the code example adding your code, so we can reproduce the lag issue. Pan on group click example: https://code.balkan.app/org-chart-js/group-header#JS Please show us how you'd like to look the image in the edit form.

[naveganth]

Please edit the code example adding your code, so we can reproduce the lag issue. Pan on group click example: https://code.balkan.app/org-chart-js/group-header#JS Please show us how you'd like to look the image in the edit form.

To reproduce the issue try zooming in and out with scroll in "Secretaria de Gestão de Pessoas (SGP)" group Updated the code example: here

Pan on group click example: https://code.balkan.app/org-chart-js/group-header#JS

Panning ON grouped nodes should not work as click. Should only move inside of grouped nodes but not click to minimize and maximize:

https://github.com/BALKANGraph/OrgChartJS/assets/159157666/f4daa9f3-6115-4115-8f9d-f9268b4c524e

Please show us how you'd like to look the image in the edit form.

https://github.com/BALKANGraph/OrgChartJS/assets/159157666/58e97c83-94d3-42d2-9cb8-6fa9f677074b

[ZornitsaPesheva]

Now I was able to reproduce the issue. Thank you. We will check it. About the group panning - how you'd like to minimize and maximize groups? Here is a code demo about the images: - https://code.balkan.app/org-chart-js/edit-form-image-ellipse#CSS

[naveganth]

Now I was able to reproduce the issue. Thank you. We will check it.

It's probably related to the position and size of the nodes changing constantly in the code, when using the scrool.

how you'd like to minimize and maximize groups?

Well, there should be a listener for when you just click or when you are just panning trough them. Like I said, this organogram is gonna be very complex and big, with images and a lot of details, so I need the pan to work so people can check info and move trough the organogram. Also i would like to open the menu or details using the RMB (Right Mouse Button (2)) or any shortcut.

[naveganth]

I think i have to many nodes that the website itself doesn't load anymore;

Issue: (Nothing loaded)

Expected: (Loaded nodes)

It has to do with the quantity of nodes, adding the collapse function or removing some nodes makes Organogram work as intended

[ZornitsaPesheva]

Please create a code example

[naveganth]

Please create a code example

Sorry, it's sabe code example as always:

https://code.balkan.app/court-organogram#JS

[ZornitsaPesheva]

It is loading in this example. How to make it not loading?

[naveganth]

It is loading in this example. How to make it not loading?

I have no clue, but it has to do with amount of nodes since i tried removing like 100 and it worked flawlessly.

Here trying with collapse: {level: 3, allChildren:true, visibleLevel: 1,} , them removing it mid video. https://github.com/BALKANGraph/OrgChartJS/assets/159157666/28bf664f-3a02-4f38-90aa-46af2f05bf84

[ZornitsaPesheva]

I cannot reproduce this. I guess it works in our Code app, but not working in your app locally. Please note that you r trial may have expired and this may be the reason that the chart is not loading. Also the trial works with up to 200 nodes.

[ZornitsaPesheva]

Looks like the lag is because of the images loading issue.

We have created a code demo about pan: https://code.balkan.app/test-33333#JS

[naveganth]

Looks like the lag is because of the images loading issue.

We have created a code demo about pan: https://code.balkan.app/test-33333#JS

Thank you very much @ZornitsaPesheva, It's looking pretty good so far. I just need help with the min and max name fields now, such as:

• (Overflowing text)

Making the text be aligned with the first node in the group and centered.

• 

Also how do I make the link be dotted from certain nodes inside a group?

• (Veridiano to Francys should be a dotted line)

[ZornitsaPesheva]

So you'd like thе name of the group to be centered to the sub tree children node, not in the group center? Here is a code example with a dotted line: https://code.balkan.app/org-chart-js/square-template#JS

[naveganth]

So you'd like thе name of the group to be centered to the sub tree children node, not in the group center?

I changed my mind, that would be too much trouble to do.

Here is a code example with a dotted line: https://code.balkan.app/org-chart-js/square-template#JS

I couldn't figure out what to use from that.