@schludi wrote:

Problem:

I have a select box and on change I get the selected option value, which contains a comma-separated string of node keys that should be visible (nodeKeysAreVisible=’key1;key2;key5…’)

           $("#cbTailoringGroups").change(
                function (event) {
                    nodeKeysAreVisible=$("#cbTailoringGroups").val();
                    diagram.requestUpdate();
                    diagram.rebuildParts();
                    //event.preventDefault();
                }
            );

The nodes (see JSON below) have a x-location and are grouped vertically (see screenshots):

The JSON looks like this:

  {
    "group": "Configuration Management",
    "loc": "3342 0",
    "phaseName": "Design Phase (PCP)",
    "key": "CM-SOP-16",
    "processStep": "System\/Component Review configuration set created"
  },

My Approach:

For this purpose I set the opacity value to 1 in the node-template (see below) when the key is appears in the string, otherwise to zero:

           // the node template describes how each Node should be constructed
            diagram.nodeTemplate =
              make(go.Node, "Auto",  // the Shape automatically fits around the TextBlock
                  new go.Binding("opacity", "",
                    function (data) {

                        if (data.processStep === 'entfernen')
                        {
                            return 0;
                        }
                        else if ($("#cbTailoringGroups option:selected").text() == 'all')
                        {
                            return 1;
                        }
                        else if (nodeKeysAreVisible!==''&&nodeKeysAreVisible.indexOf(data.key)>-1)
                        {
                            return 1;
                        }
                        else
                        {
                            return 0;
                        }

                        return 1;
                    }
                  ),
                new go.Binding("location", "loc", go.Point.parse),
                make(go.Shape, "RoundedRectangle",  // use this kind of figure for the Shape
                  // bind Shape.fill to Node.data.color
                  {fill: 'white'}),
                make(go.TextBlock,
                  { margin: 3, height: 80, textAlign: "center", font: "10pt Arial" },  // some room around the text
                  // bind TextBlock.text to Node.data.key
                  new go.Binding("width", "",
                    function (data)
                    {
                        return (data.processStep==='entfernen') ? 0 : 100;
                    }
                  ),
                  new go.Binding("text", "",
                    function (data)
                    {
                        return (data.processStep) ? data.processStep : data.key;
                    }
                ))
              );

Problem with the approach:

The location binding is get lost when I change the option box and call diagram.rebuildParts().
All nodes are moving together after the select-box-change.
On diagram initialization is used isInitial=false – I saw there is s.th. like isOngoing=false but I do not know where to call it to prevent that the x-positions are destroyed?

Question:

How can I force that the nodes are still using their location “loc” from the JSON after calling “rebuildParts”?

Screenshots The problem with my approach:

This is before selecting the combobox:

before.png1065x818 82.6 KB

This is after i have selected the combobox - all nodes have lost their x-coordinate:

after.png1065x818 114 KB

Posts: 4

Participants: 2

Read full topic