Node Overlapping Issue

  1. I’m applying isOngoing : false , to make node draggable, due to this node overlapping issue is raised in my Diagram whenever I am trying to expand node panel list.

Code:

Diagram overlapping issue:

By setting Layout.isOngoing to false, it means that when nodes or links are added or removed or change visibility or when nodes change size, the layout is not invalidated, so the layout is not performed again.

But perhaps you want an automatic layout to happen when nodes change visibility or change size? In that case, don’t set Layout.isOngoing to false.

Is the tree within a Group? Perhaps you want to set Part.layoutConditions on the Group template to remove the go.Part.LayoutNodeSized flag. Part | GoJS API

Yes, I want an automatic layout to occur when nodes change visibility or size. However, if we set Layout.isOngoing to false, we are able to drag the nodes. I still want the nodes to be draggable while maintaining the automatic layout feature.

So, if you’re suggesting to remove the code setting Layout.isOngoing to false, please provide an alternative option for enabling node dragging and allowing nodes to be adjustable."

I did suggest the alternative:

Hi
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized
Above property is not working on node if I am Applying Panel Expander button on node, nodes get overlap as mentioned in above Diagram.

Panel Expander Button:

Panel:

No, clearly you do not want to remove the go.Part.LayoutNodeSized flag from Node.layoutConditions. I was asking if the trees are inside Groups whether you could not turn off Layout.isOngoing in order to enable dragging by removing the LayoutNodeSized flag from the Group.

Are you using Groups at all? If not, never mind about layoutConditions and don’t set Layout.isOngoing.

Try setting Layout.isRealtime to false.

Hi,
I am using both Group and Normal Nodes.
as well I am using Tree and Grid layout inside group node based on condition.

I am Facing overlapping issue when I am trying to Expand Normal Nodes using Panel Expander Button.

Note: On Group Node I am applied Sub Graph Expander Button.

Normal Node:
image

Group Node:
image

Have you set Group.computesBoundsAfterDrag Group | GoJS API to true, like the Group template in the Regrouping sample?

I have not set Group.computesBoundsAfterDrag Property on Group Template.

I am not facing overlapping Issue in case Group node.
I am facing overlapping issue whenever I am Expand Table panel for Normal node using panel Expander Button.

Don’t set any of these anywhere in your app:
Layout.isOngoing
Layout.isRealtime
Part.layoutConditions
That should make layouts work normally.

Do set:
Group.computesBoundsAfterDrag to true
That should enable dragging a node out of a group.

Hi
I am removed all below three properties From App:
Layout.isOngoing
Layout.isRealtime
Part.layoutConditions

and set:
Group.computesBoundsAfterDrag to true,
but after this I am not able to drag any node.

Which permissions have you set? GoJS User Permissions -- Northwoods Software

I am Set “undoManager.isEnabled”: true and “draggingTool.isEnabled”: true,
In my Diagram.

You don’t need to enable the DraggingTool because it is enabled by default.

So you haven’t set allowMove or movable at all?

Does expanding and collapsing of nodes now do a layout each time?

So you haven’t set allowMove or movable at all?

No

Does expanding and collapsing of nodes now do a layout each time?

No, but want to layout each time while expanding and collapsing.

OK, something is really odd about your configuration. By default, the enablement of dragging by the user and automatic layouts as nodes change size is standard in every diagram. The programmer has to explicitly disable that behavior if they don’t want it.

The programmer does have to enable the ability for users to drag nodes into, between, or out of groups, as well as the ability to group nodes or to ungroup groups.

Please compare your app code with that of the Regrouping sample.