Links get wrong when resizing


My links get wrong when i resize a node. Notice that it happens only when i resize the node vertically. It’s like the link keep in memory its initial position. I have noticed that this behaviour does not happen if i resize other parts
(for example if i resize the Table Panel instead of the Vertical Panel) … but i really need to resize the node this way to have a vertical/horizontal resizing

Here is my node

 return  _$(go.Node, 'Auto', {
                    toolTip: tooltipTemplate(),
                    doubleClick: tableDblClickHandler,
                    selectionChanged: selectionChangedHandler,
                    resizable: true,
                    resizeObjectName: shapesName.TABLE,
                    stretch: go.GraphObject.Fill,
                    layerName: canvasStyle.layerName.nodeLayer
                new go.Binding(bindingsPartProperty.VISIBLE, bindingsDataProperty.VISIBLE),
                new go.Binding('htmlToolTip', 'tooltip'),
                new go.Binding("position", "bounds", function(b) { return b.position; })
                    .makeTwoWay(function(p, d) {
                        d.bounds.position = p;
                        return d.bounds;
                    }), // two-ways bindings ensure that if the user move the object, the bounds is updated

                // this rectangular shape surrounds the content of the node
                    go.Shape, {
                        fill: canvasStyle.fullSchema.columnBackground,
                        stroke: canvasStyle.fullSchema.joinStroke
                // the content consists of a header and a list of items
                    go.Panel, 'Vertical',
                        name: shapesName.TABLE,
                        minSize: new go.Size(tableWidth, headerHeight),
                        stretch: go.GraphObject.Fill
                    new go.Binding(bindingsPartProperty.MAX_SIZE, bindingsDataProperty.FIELDS, function(fields) {
                        var size = new go.Size(tableWidth * 2,
                            headerHeight + topAndBottomSpace + fields.length * rowHeight);
                        return size;
                    new go.Binding(bindingsPartProperty.DESIRED_SIZE, bindingsDataProperty.FIELDS, function(fields) {
                        if (fields.length > maxColumn) {
                            return new go.Size(tableWidth,
                                headerHeight + topAndBottomSpace + maxColumn * rowHeight);
                        return new go.Size(tableWidth,
                            headerHeight + topAndBottomSpace + fields.length * rowHeight);
                    // this is the header for the whole node
                            stretch: go.GraphObject.Fill
                            go.Shape, {
                                stroke: null,
                                height: headerHeight,
                                stretch: go.GraphObject.Horizontal
                            }, new go.Binding(bindingsPartProperty.FILL, bindingsDataProperty.HEADER_COLOR)
                                width: pictureHeaderSize.width,
                                height: pictureHeaderSize.height,
                                column: 0,
                                margin: new go.Margin(0,0,0, 2 * pictureMargin + pictureSize.width),
                                background: canvasStyle.fullSchema.transparentBackground,
                                // but disallow drawing links from or to this shape:
                                fromLinkable: false, toLinkable: false,
                                alignment: go.Spot.Left
                            new go.Binding(bindingsPartProperty.SOURCE, bindingsDataProperty.HEADER_PICTURE)

                                stroke: 'white',
                                margin: new go.Margin(0, titleMargin),
                                font: canvasStyle.fullSchema.headerFont,
                                wrap: go.TextBlock.None,
                                alignment: go.Spot.Center,
                                overflow: go.TextBlock.OverflowEllipsis,
                                spacingAbove: textAdjust.above,
                                spacingBelow: textAdjust.below
                            new go.Binding(bindingsPartProperty.TEXT, bindingsDataProperty.TABLE_NAME)),

                            { portId: 'BUTTON' },
                                row: 0, alignment: go.Spot.TopRight,
                                'ButtonBorder.stroke': null,
                                click: collapseButtonClickHandler
                            _$(go.Shape, shapesName.TRIANGLE_UP, { name: 'SHAPE', width: 6, height: 4 }))
                    // this Panel holds a Panel for each item object in the itemArray;
                    // each item Panel is defined by the itemTemplate to be a TableRow in this Table
                    _$(go.Panel, 'Table',
                            name: shapesName.TABLE_COLUMNS,
                            visible: true,
                            padding: new go.Margin(margin, 0),
                            itemTemplate: fieldTemplate,
                            minSize: new go.Size(tableWidth, 0),
                            rowSizing: go.RowColumnDefinition.None,
                            stretch: go.GraphObject.Fill
                        new go.Binding(bindingsPartProperty.ITEM_ARRAY, bindingsDataProperty.FIELDS)
                    )  // end Table Panel of items
                )  // end Vertical Panel
            ); // end Node



Not sure about that… but it seems that by giving a non-transparent background, things seems fixed

So some object with a transparent background was taking up space that you weren’t expecting?

i guess yes… but what surprised is that by just changed the color, it worked (or maybe i changed something else, but i did a lot of small tweaks without commiting… so i do not have a real history of my changes :) )

mmh i do not know what really happened… i think if we want to find the real reason, i have to put different background colors on all different panels to understand what is going on and which panel was bigger than expected

anyway, i remplaced transparent background by a colored background and it worked fine, but I did not find the ‘real’ underlying reason for this behaviour.

I’ll update the post if i find a complete answer