How to prevent nodes from overlapping after expanding

Fevill · April 25, 2017, 8:31am

First time :

Second time

   var node = this.MasterDataDiagram.findNodeForKey(mdName);

var p = node.findObject(“LIST”);

if (p !== null) p.visible = true;

walter · April 25, 2017, 10:03am

Although there is no guarantee about no overlapping nodes, the Diagram.layout will normally run after the change of size of any node. GoJS Layouts -- Northwoods Software

How have you set that Diagram property?

Fevill · April 25, 2017, 12:40pm

Thank you. I configured my diagram like that, but when I expanded my node Diagram.layout not run.


    var MasterDataDiagram = $(go.Diagram, "model-master-data", {
      initialDocumentSpot: go.Spot.Center,
      initialViewportSpot: go.Spot.Center,
      initialContentAlignment: go.Spot.Center,
      initialAutoScale: go.Diagram.Uniform,
      autoScale: go.Diagram.Uniform,
      allowDelete: false,
      allowCopy: false,
      allowZoom: true,
      layout: $(go.ForceDirectedLayout),
      "undoManager.isEnabled": true
    });

walter · April 25, 2017, 1:01pm

That looks OK to me – it should perform a layout at the end of each transaction in which you have expanded or collapsed panels in nodes. Are you making all of your changes within a transaction? GoJS Transactions -- Northwoods Software

An unrelated comment: your settings of Diagram.autoScale and Diagram.allowZoom are conflicting. Setting autoScale to Uniform means it automatically adjusts the scale to accommodate the Diagram.documentBounds within the viewport. So the user will not be able to zoom in or out.

Also, setting Diagram.initialContentAlignment to Center is redundant with setting both Diagram.initialDocumentSpot and Diagram.initialViewportSpot to Center.

Fevill · April 25, 2017, 1:12pm

Thanks you for the remarks.
I will make the changes in transactions.

walter · April 26, 2017, 3:01pm

Actually, if you started from the Entity Relationship sample, you’ll notice that the node template set this property:

    layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,

That prevents a change in the size of the node from invalidating the diagram’s layout. Take out that restrictive value for Part.layoutConditions, and clicking on the “PanelExpanderButton” will automatically result in the ForceDirectedLayout running again.

Note how the “PanelExpanderButton”, defined in http://gojs.net/latest/extensions/Buttons.js, conducts a transaction in its GraphObject.click event handler.