I have integrated a GoJS diagram into my VueJs application. I am currently working on adding a search feature that highlights specific nodes with text matches. However, I encountered an issue where the diagram does not update immediately after triggering the search function by name and setting the highlight to nodes. The border color remains unchanged until I manually move the element that should be highlighted.
Here is my implementation of the diagram:
const myDiagram = $(go.Diagram, this.$refs.goJsDiagram, {
initialContentAlignment: go.Spot.Top,
"undoManager.isEnabled": false,
layout: $(CustomLayeredDigraphLayout, // Specify the layout here
{
direction: 90, // Top-to-bottom layout (90 degrees)
layerSpacing: 50 // Adjust spacing between layers as needed
})
});
myDiagram.nodeTemplate =
$(go.Node, "Vertical", // Main node layout set to vertical
$(go.Panel, "Auto", // Panel holding shape and 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 settings
stroke: "black" // Text color
},
new go.Binding("text", "Name")
)
)
);
Implementation of 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 logic:
findNodeByName(name) {
let foundNode = false;
this.myDiagram.nodes.each((node) => {
if (name && node.data.Name.toLowerCase().includes(name.toLowerCase())) {
if (!node.data.IsHighlighted) {
node.diagram.startTransaction('selected');
node.diagram.model.setDataProperty(node.data, "IsHighlighted", true);
node.diagram.startTransaction('selected');
}
foundNode = true;
} else {
if (node.data.IsHighlighted) {
node.diagram.startTransaction('selected');
node.diagram.model.setDataProperty(node.data, "IsHighlighted", false);
node.diagram.startTransaction('selected');
}
}
});
return foundNode;
}
The dynamic update seems to be failing despite trying multiple solutions. What could possibly be causing this issue?