GoJS diagram doesn't update after the transaction commit

Question

I have a GoJS diagram inside a VueJs app. I want to implement a search feature, highlighting specific nodes with text matches. The issue is that after I trigger the search by name function and set highlight to nodes, the diagram isn't updated until I move an element that should be highlighted. Before that, its border color doesn't change.

My diagram:

const myDiagram = $(go.Diagram, this.$refs.goJsDiagram, {
            initialContentAlignment: go.Spot.Top,
            "undoManager.isEnabled": false,
            layout: $(CustomLayeredDigraphLayout, // Set the layout here
                {
                    direction: 90, // 90 degrees for top-to-bottom layout
                    layerSpacing: 50 // Adjust this value as needed for spacing between layers
                })
        });

        myDiagram.nodeTemplate =
            $(go.Node, "Vertical",  // The main node layout is vertical                   
                $(go.Panel, "Auto",   // This panel holds the shape and the text
                    $(go.Shape, "Rectangle", {
                        strokeWidth: 2,
                        fill: "white"
                    },
                        new go.Binding("stroke", "", (data) => this.getStroke(data)).ofObject()
                    ),
                    $(go.TextBlock, {
                        margin: new go.Margin(28, 22, 28, 22),
                        font: "bold 22px sans-serif",  // Adjust font
                        stroke: "black"  // Text color                            
                    },
                        new go.Binding("text", "Name")
                    )
                )
            );

Custom border color function:

getStroke(node) {
        if (node.data.IsHighlighted) {
            return "yellow"; // Color for selected nodes
        }
        if (node.data.IsSelected) {
            return "green"; // Color for selected nodes
        }
        return "black"; // Default color          
    }

Node search function:

findNodeByName(name) {
        let foundNode = false;

        this.myDiagram.nodes.each((node) => {
            if (name && node.data.Name.toLowerCase().includes(name.toLowerCase())) {
                // Only call the model's set method if the value is changing
                if (!node.data.IsHighlighted) {
                    node.diagram.startTransaction('selected');
                    node.diagram.model.setDataProperty(node.data, "IsHighlighted", true);
                    node.diagram.startTransaction('selected');
                }
                foundNode = true; // Node found, no need to set to false for other nodes
            } else {
                // Only call the model's set method if the value is changing
                if (node.data.IsHighlighted) {
                    node.diagram.startTransaction('selected');
                    node.diagram.model.setDataProperty(node.data, "IsHighlighted", false);
                    node.diagram.startTransaction('selected');
                }
            }
        });

        return foundNode;
    }

I tried everything but failed to achieve a dynamic update. What am I doing wrong?

Answer 1

For everyone who will run into this issue like me. It's a Vue.js v3 issue. All references to instances of Diagram, Node, Link, etc must be non-reactive. No data must have references to any diagram objects. If you want to access your diagram somewhere besides the init method, just use this.myDiagram = myDiagram; at the end of it, without having myDiagram in data().