Node changes on moving

@jothibaskaran wrote:

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?

Posts: 2

Participants: 2

Read full topic