Hi Team, Is there any way to explicitly select GraphObject i.e. Button, ContextMenu which are part of a Node/Link?
Use Case: We have a scenario for Screen Reader where we read the textContent based on the diagram.selection data when there is an onSelectionChange event trigger. But the diagram.select() is working only for Node. I am looking for an alternative to achieve this.
Yes, that is correct: the Diagram.selection collection is a collection of Parts (Nodes and Links), not of arbitrary GraphObjects.
You have a lot of possibilities to achieve what you want.
One possibility is for the app to implement its own notion of selected objects within a Node, independent of the Diagram selection. One such example is demonstrated in the Selectable Fields sample: Selectable Fields in Record Nodes | GoJS Diagramming Library That uses the GraphObject.background to show which fields (that are actually Panel elements) are selected. It also overrides the CommandHandler.deleteSelection command in order to be able to delete selected fields without deleting selected Parts.
Another type of possibility is to depend on context menus to be able to operate on particular pieces of a node. An example is the Dynamic Ports sample: Add/Remove/Modify Ports Dynamically on Nodes | GoJS Diagramming Library. Note how the context menu is different for ports and allows the user to change the color of a specific port or delete it.
It seems to me that as long as there is a notion of focus that can dive into a node that you would not need a separate selection mechanism in order to be able to read text for the current focus.
Hi @walter You mean that we don’t need to handle a separate selection mechanism?
Is there any default way in which we can achieve this?
Currently, what we are doing is whenever the selection changes it will trigger on selection change in this method we are getting part:
const part = diagram.selection.first();
We are checking if it is a node OR link and based on that we are passing it to the screen reader. But, the use case now we know is we need to dive into the Panel elements which are part of Node/Link. As we know we are not able to select(Panel elements) which in this case will not trigger onSelectionChange
What do you suggest here?
I suggest that you read information to the user as the focus changes. Override KeyboardCommandHandler.onFocusChanged.
Hi @walter, I found one more issue with Group Node. When we use keyboard navigation onto a Group Node & Expand the Group the default focus is going onto the Link inside the group node. Once we expand the group the focus should stay on the Group node itself, right? The same does not happen when we use mouse events.
If we have the Group already expanded then the Keyboard Navigation is going into the Group Nodes Link directly instead of going onto the Group first.
I’m unable to reproduce the situation you describe. I probably don’t understand exactly what you are referring to.
I noticed another issue with the Group Node. When navigating with the keyboard, expanding the Group Node shifts the focus to a Link inside the group. Ideally, the focus should remain on the Group Node after expansion. Interestingly, this issue doesn’t occur when using mouse interactions.
In order for the keyboard commands to expand the group, isn’t focus on the “Show” button, rather than on the whole Group?
As a user I would expect that focus remain on that button, so that Space bar invokes the same button again, should I choose to collapse the Group back.
But if you want it to automatically change focus when a Group is expanded or collapsed, that’s OK – just change the code to do that.
The focus used to remain on that button(hide/show), while I initially working on it. But now it’s not. As I said the focus is shifting to the Link node which is in the group.
What I am thinking is this is related to the router issue which we have discussed ( Issues after upgrading GoJS from 2.3.5 to 3.x ) ??
Routing is completely unrelated to keyboard input.
What has changed to cause the change in focus?
Not sure. We tried debugging into it but didn’t find the root cause. It used to work as expected before.
It seems like an issue with our code @walter We got the root cause Thanks!