Hi. I have a node that looks more or less like the one below: I would like to be able to select each item individually and add a right click menu to each one as well as the possibility to reorder them within their own container (items 1 & 2 stay on the blue, 3&4 on the green) and the containers should not change size. I tried this initially having a vertical panel that would hold the blue and green containers and then each container being a vertical panel in itself, but that did not allow me to select individual subcomponents. I guess the way to go then is with groups, but I have not very clear how it should go…
Edit: I forgot to say that ideally, the blue and green containers should not be selectable individually, only as a group of both panels (so as to be able to move them around and such)
Would you want to be able to support more than one item being selected at the same time? Would you want to have each item be a separate node data object in the Model.nodeDataArray? Do you want users to be able to copy or delete individual items?
Hi, yes, I’ve already seen the context menus intro. I do not particularly need to have them as independent objects within the nodeDataArray, each item is an instance of a horizontal panel, tho and so far they are just part of the arrayItems for each container.
If all you want to be able to do with the mouse is drag an item up or down, then it sounds much like what the https://gojs.net/latest/extensions/NodeLabelDraggingTool.js extension does. Except that instead of assuming that the draggable node labels are elements of a Spot Panel, you would have them be elements of a Table Panel whose Panel.itemArray is data bound.
I’m assuming your items are each TableRow Panels (i.e. that’s what your Panel.itemTemplate is). And I’m assuming that your green items are in a different Table Panel than your blue items.
In your adaptation/rewriting of NodeLabelDraggingTool you would have the override of Tool.doMouseMove find the desired index for the dragged item given the mouse point. You can do that by calling Panel | GoJS API on the Table Panel, passing it the result of calling GraphObject | GoJS API on the Table Panel with the this.diagram.lastInput.documentPoint.
If the index has changed, you can call Model.insertArrayAt in order to re-order the item data in the item Array. If the index is negative, pretend it’s zero. If the index is greater or equal to the number of items, pretend it’s the last index.
I hope this is enough information to get started. If you have any questions, just ask.
Hi.now I have another related question. I want to be able to click on items 2 - 4 and select them individually (a la GoJS Selection -- Northwoods Software), BUT I want to select the whole outer shape when I click on Item 1.
