Restrict unwanted animation on adding node in model

[opkeydev]

hi team,
I’m trying to add a new node in diagram model then suddenly unwanted animation occuring in graph as shown in below gif’s…

As you can see in the both GIF’s a clear graph flickering is there.

So suggest me some solution to overcome this flickering issue.

here is my diagram layout (custom)

import * as go from "gojs";
export class PoolLayout extends go.TreeLayout {
    public MINLENGTH;
    public MINBREADTH;
    constructor() {
        super();
        this.MINLENGTH = 200;  // this controls the minimum length of any swimlane
        this.MINBREADTH = 100;  // this controls the minimum breadth of any non-collapsed swimlane
        this.layerSpacing = 150;
    }
    doLayout(coll) {
        const diagram = this.diagram;
        if (diagram === null) return;
        diagram.startTransaction("PoolLayout");
        // make sure all of the Group Shapes are big enough
        const minlen = this.computeMinPoolLength(diagram);
        diagram.findTopLevelGroups().each(lane => {
            if (!(lane instanceof go.Group)) return;
            const shape = lane.selectionObject;
            if (shape !== null) {  // change the desiredSize to be big enough in both directions
                const sz = this.computeLaneSize(lane);
                shape.width = (!isNaN(shape.width)) ? Math.max(shape.width, sz.width) : sz.width;
                // if you want the height of all of the lanes to shrink as the maximum needed height decreases:
                shape.height = minlen;
                // if you want the height of all of the lanes to remain at the maximum height ever needed:
                //shape.height = (isNaN(shape.height) ? minlen : Math.max(shape.height, minlen));
                const cell = lane.resizeCellSize;
                if (!isNaN(shape.width) && !isNaN(cell.width) && cell.width > 0) shape.width = Math.ceil(shape.width / cell.width) * cell.width;
                if (!isNaN(shape.height) && !isNaN(cell.height) && cell.height > 0) shape.height = Math.ceil(shape.height / cell.height) * cell.height;
            }
        });
        // now do all of the usual stuff, according to whatever properties have been set on this GridLayout
        super.doLayout(coll);
        diagram.commitTransaction("PoolLayout");
    };

    // compute the minimum length of the whole diagram needed to hold all of the Lane Groups
    computeMinPoolLength(diagram) {
        let len = this.MINLENGTH;
        diagram.findTopLevelGroups().each(lane => {
            const holder = lane.placeholder;
            if (holder !== null) {
                const sz = holder.actualBounds;
                len = Math.max(len, sz.height);
            }
        });
        return len;
    }

    // compute the minimum size for a particular Lane Group
    computeLaneSize(lane) {
        // assert(lane instanceof go.Group);
        const sz = new go.Size(lane.isSubGraphExpanded ? this.MINBREADTH : 1, this.MINLENGTH);
        if (lane.isSubGraphExpanded) {
            const holder = lane.placeholder;
            if (holder !== null) {
                const hsz = holder.actualBounds;
                sz.width = Math.max(sz.width, hsz.width);
            }
        }
        // minimum breadth needs to be big enough to hold the header
        const hdr = lane.findObject("HEADER");
        if (hdr !== null) sz.width = Math.max(sz.width, hdr.actualBounds.width);
        return sz;
    }
}

Thanks in advance…!

[walter]

Just to confirm – you do want a layout to happen when a node has been added, either at top-level or within a group.

Your animated GIFs seem to show that the new node starts off at the top left side and then animates moving to its proper laid-out location. One thing you can do is pre-set the new node’s location to be where you want the node to animate “from”. If you haven’t set it at all, I think it chooses (0, 0) by default, and I’m guessing that’s at the top-left side of your graph.

For example, if you look at the 'addNodeAndLink` function in State Chart you will see how it sets the location of the new node, via its data object, before the layout happens.

If your nodes don’t have Bindings on the Node.location, you can programmatically get the Node for the newly added data object and just set its location.

const data = { . . . };
model.addNodeData(data);
const node = diagram.findNodeForData(data);
if (node) node.location = . . .

The built-in behavior for expanding trees does the same thing – each of the formerly collapsed nodes animates its location starting from the location of the parent node that is being expanded.

[opkeydev]

It works for me…
Thanks walter