Previous details node is also getting highlighted

Hi Team,

  • Currently I am getting issue when the user selects a detailed node from the node (as shown below screenshot(Highlighted color is “yellow”), and then when another detailed node is selected, the highlight of the previously selected detailed node remained same.
    You can check my below screenshot in which previously selected node is not getting reset.

I am talking about the yellow highlighted node.

My Expectation here :- Whenever user will select next node then previous node get should be reset or should be in default state.

Please guide me how i can solve this issue.

How have you implemented highlighting, and what have you implemented to manipulate the highlighted state?

I have added this click event to add this highlighted color
click: (e, item) => {

          if (item.background === "transparent") {

            item.background = "yellow" ;

          } else {

            item.background = "transparent";

          }

        },

OK, so an item is highlighted if its background is “yellow”.

So what other events are happening in which you want to reset their backgrounds to “transparent”? Did you want to implement “ChangingSelection” and “ChangedSelection” DiagramEvent listeners?

I just want to reset their background if user will select next new node then i want to reset the previously highlighted background color.

Just let me know how i can do this

Have you tried implementing a “ChangedSelection” DiagramEvent listener?

If you don’t keep a collection of currently highlighted items around, you may want to do so to avoid having to iterate over all of the items in all of the nodes.

Can you share with me code or any example, how can i use this event “ChangedSelectionDiagramEvent listener using below code ? how can i add this event on click method?
click: (e, item) => {

          if (item.background === "transparent") {

            item.background = "yellow" ;

          } else {

            item.background = "transparent";

          }

        },

You talked about the user changing the selection, perhaps by clicking on another node, or by clicking in the background of the diagram to clear the selection. Both of those cases cause the “ChangedSelection” DiagramEvent to be raised. I think there are lots of examples of such a listener in the various samples. You’ll want your listener to update the highlighted state (i.e. background) of some of the items in some of the nodes.

I tried to find the solution which you suggested using this event “ChangedSelectionDiagramEvent listener.
But this “ChangeSelection” method will only work on the Parent node. I did R&D i found this URL in which they mentioned about the “selectionChange” event but it will only work on Main node. You can check below URL GoJS Events -- Northwoods Software

But if you check my requirement its working fine on parent node or Main node as per your example but its not working fine on child node or subNode .Please check my below screenshot.

Please share with me any example in which selection is working on subChild Node as well.

I still do not understand your requirements, which is why I described some mechanisms by which you could implement the exact policies that only you understand at this time.

Are you saying that at most one Node can have any highlighted items (Panels within a Node) at any instant? But that a Node may have any number of items highlighted at the same time?

If that description is incorrect or incomplete, please describe the rules much more precisely, showing both valid and invalid configurations in separate screenshots. And because you seem to have some sequences of state that you want, show both before and after screenshots.

My Expectation here :- Whenever user will select next node then previous node get should be reset(Highlighted color should be reset in default color) or should be in default state.

But currently if user will click on any node(child node or sub node) than all the previous node is in selected mode means(in yellow color) and i want to reset the color in default state.

Parent Node :- Below whole diagram is Parent node i am considering and on this node ChangedSelectionDiagramEvent listener is working fine at a time only node we can select and whenever user will select new node then previous color or node is getting reset that means in this case its working fine.

image

Child Node or Sub Node:-
I have attached the sub node, in this sub-child node i am unable to reset the previous state.

Means whenever user will select new subchild node or new sub node then previous yellow color is not getting reset.
image

MY Expectation is :–
I just want to reset their background (yellow color) if user will select next new node then i want to reset the previously highlighted background color(yellow color)

Hi team,
Can you guide me how I can stop onClick event on node. I want to implement the graph only in read or view mode, i don’t want to add click event on node. Can you share with me code or help me out

The most common thing to do is to modify your click event handler to be a no-op when you don’t want it to do anything.

Alternatively, use a different template that has the behaviors removed.

In gojs we have one inbuilt features for selection the node which is maxSelectionCount.
I have added the maxSelectionCount = 1 because i have use this property because of default node selection .
I did’t add any click event handler but still because of this gojs graph property maxSelectionCount =1 i am able to click on any node .

Can you guide me here i don’t want to remove this property maxSelectionCount because i need default selection , but i want to stop onClick event please guide me how i can do that

If you want a “view” mode, maybe setting Diagram.isReadOnly to true will achieve what you want. More generally, you can read about permissions here: GoJS User Permissions -- Northwoods Software

@jhardy
I want to also stop selection of the node.
I added below code but still selection of node is possible. Using below code only modification will stop but selection and navigation still allow

"Diagram.isReadOnly == true"

My expectation is :- I want to stop selection of node as well

Have you read GoJS User Permissions -- Northwoods Software ?
Set Diagram.allowSelect to false.

A post was split to a new topic: Zooming with mouse wheel