Node changes on moving

GoJS
1

Hi,

I have a text area in my node that can be expanded/collapsed. I am using a panel expander button for it. This is the implementation:

$(go.Panel, 'Vertical',
                {
                    row: 2, column: 1, name: 'PROPTEXT',
                    width: 205,
                    visible: false,
                    margin: new go.Margin(-1, -1.5, 0, 35)
                },
                $(go.Panel, 'Auto',
                    {
                        width: 205,
                        // visible: true
                    },
                    $(go.Shape, 'RoundedBottomRectangle', {
                        stroke: '#8f9999',
                        strokeWidth: 1,
                        fill: '#f6f8f8',  // default color,
                        alignment: go.Spot.Left
                    }),

                    $(go.Panel, "Table",
                        new go.Binding("itemArray", '', (data) => {
                            const array = Object.entries(this.propertiesInfo(data));
                            return array;
                        }),
                        {
                            stretch: go.GraphObject.Horizontal,
                            itemTemplate:
                                $(go.Panel, "TableRow",
                                    $(go.TextBlock,
                                        {
                                            column: 0, alignment: go.Spot.Left,
                                            font: '12px Noto Sans',
                                            stroke: '#6d7777',
                                            margin: new go.Margin(5, 5, 5, 5),
                                            maxLines: 1,
                                            overflow: go.TextBlock.OverflowEllipsis
                                        },
                                        new go.Binding("text", '', (data) => {
                                            return data[0];
                                        })),
                                    $(go.TextBlock,
                                        {
                                            column: 1, alignment: go.Spot.Right,
                                            font: '12px Noto Sans',
                                            stroke: '#000000',
                                            margin: new go.Margin(5, 5, 5, 0),
                                            maxLines: 1,
                                            overflow: go.TextBlock.OverflowEllipsis,
                                            stretch: go.GraphObject.Horizontal,
                                            textAlign: 'right'
                                        },
                                        new go.Binding("text", '', (data) => {
                                            return data[1];
                                        }))
                                )
                        }),
                )
            )

this.propertiesInfo(data) basically returns an object of key value pairs like :

{
                'Datatype': someStringValue,
                'Unit': someStringValue,
                'Value': someStringValue
            };

once the configurations are set for the node, i keep that particular selected node’s PROPTEXT panel open by using the following function:

openPropTextOnCommit(key) {
    let model = this.diagram.model;
    model.startTransaction('propTextView');
    this.diagram.findNodeForKey(key).findObject("PROPTEXT").visible = true;
    model.commitTransaction('propTextView');
}

Once the configuration is set for the node, i expand the text area which displays the key value pairs.

This works fine until that node is moved on the canvas. When i move the node, the values(displayed using data[1] in the item array) disappear. I can only see the static keys, but not their corresponding values.

How can i resolve this?

2

I don’t know what else you are doing in the node template, but I suspect that all of those Bindings that have a source property that is an empty string are being re-evaluated. Could you confirm that the call to propertiesInfo is returning the information that you expect, which seems to be an Array of Array of 2 strings? Why do you need to keep re-evaluating that binding?

3

I dont need to re-evaluate the bindings. How can i prevent it?

4

Because the binding source property is the empty string rather than the actual property name.
But that’s just an inefficiency as long as the return value is consistently the same.

5

Is there a better way to bind these values?

6

It depends on what propertiesInfo depends on. If it depends on only a single property of the data, then you should use that property name as the source property for the binding.

But again, I’m asking whether propertiesInfo is consistently returning the same value. Does it always return an Array of Array of two meaningful strings?