hi Guys,
Am just a newbie in gojs and am learning ,so my question is how to highlight a node , like i have a default node template and a provision to keep adding new nodes . so i have hardcoded the position for now , so its keep on adding one above other , but thats okay, somehow i need to highlight the last added node with some blue border or something …
I have all the details of newly added node and array of nodes as well.
It would be helpful if you included a screenshot or sketch of what you wanted.
Have you read these pages of the Introduction?
GoJS Selection -- Northwoods Software
GoJS Highlighting -- Northwoods Software
Those are the two most commonly used ways for general highlighting, depending on your purpose. Other possibilities exist too.
@walter what exactly i mean is like whenever you create a new node in diagram , it should be highlighted in someway . Forexample when you create a new node you have all the details in newNodeArray and we can distinguish the newest addition with name, so what i mean is like
$(
go.Shape,
{
stroke: ‘red’,
fromSpot: go.Spot.LeftRightSides,
toSpot: go.Spot.LeftRightSides,
strokeWidth: 2,
name: ‘SHAPE’,
}
so by default all nodes will be having red stroke , so whwnever i add a new node , say for example we can check like if soureceData.name===‘newNode’ then give color blue to stroke, else let it have default color, thats is red.
new go.Binding("stroke", "isHighlighted", function(h) { return h ? "red" : "black"; })
I came to know it can be done via binding , but looking for exact idea
I hope you got it
I think what is most commonly done is to select the new Node. That will normally cause the node to have a distinct appearance due to a selection Adornment or changes in the appearance of the node itself.
For examples, take a look at the Kanban and the State Chart samples:
Kanban Board
State Chart
In each there is a way to create a new node. After adding the new data to the model the code selects the corresponding Node. Generally it will do something like:
// add a new node by adding data to the model:
const newdata = { ...whatever properties are desired... };
myDiagram.model.commit(m => {
m.addNodeData(newdata);
});
// selecting a node will usually cause it to be highlighted, in the general sense
const newnode = myDiagram.findNodeForData(newdata);
myDiagram.select(newnode);
// optional, if the new node might be placed outside of the viewport:
myDiagram.commandHandler.scrollToPart(newnode);
For a fancier demonstration of focusing on a specific node:
Drawing Attention to a Node
@walter i had given exactly same , but it didnt get highlighted nor selected .
focusNode(addedObj) {
const diagram = this.diagramRef?.current?.getDiagram();
const diagramNodes = diagram?.model.nodeDataArray;
if (diagramNodes) {
const node = diagramNodes.find((node) => node.name === addedObj.name);
diagram.select(node);
}
}
and this function gets invoked once you finish adding element .
please correct me if am wrong @walter
No, that code is quite different. You need to distinguish between data in a model and Parts (GraphObjects) in a Diagram.
oh is it . Not sure what exactly is the difference. We are getting the same nodeDataArray from ref and thought to get newly added data from that array and select.
Sorry if am wrong on it . @walter
What’s wrong with the code I outlined above?
not sure… nothing wrong i mean … Newly added node not get selected, with this code diagram.select(node);
Am not sure if am missing anything .
what exactly i need is like when you like click any node you will be getting blue border right indicating that node is clicked , am expecting the same approach when we add a new node, blue border to same.
@walter
Verify that node is in fact an instance of go.Node.
That explains that problem. Diagram.select must take a Part, such as a Node or Link.
Diagram | GoJS API
I can only suggest again that you do something like the code I gave you, above.
@walter Thanks a lot for the info . Solved the issue like putting code
node = diagram.findNodeForKey(key);
diagram.select(node);
And it gets Selected. That meets my expectation , but just curious, is there any way we can control the border, say show border (blue border) for 10 seconds. @walter . Right now it will be on focussed till you perform any action in diagram
Did you want that Node to continue to be selected after 10 seconds?
If so, what should happen as other nodes are selected? Do you not want the user to know whether a node is selected just by looking at it? Perhaps you could use both selection (Part.isSelected) and highlighting (Part.isHighlighted). Please read:
GoJS Selection -- Northwoods Software
GoJS Highlighting -- Northwoods Software
If not, you could just unselect it after 10 seconds. Something like:
setTimeout(() => node.isSelected = false, 10000);