We are trying to implements tables & seats dynamically allowing user to drag the seats using GoDiagram. We managed to create a table with 6 seats (in one row). We want to allow the user to increase the seats and rearrange the seats. How can we implement and allow customisation.
Are you using GoJS or GoDiagram?
GoJS using React.
The Seating Chart sample, Seating Chart, has a design that was targeted towards manipulating whole tables, not chairs. So chairs are not independently selectable, and thus the user cannot move or copy or delete them individually.
If you want to allow the user to arrange the chairs at tables, I think you should first ask yourself how you want to represent that information in the model. If you look at the model in the current sample, you can see there are separate objects for tables and for people. There is no information about chairs, although you can tell how a person is assigned an abstract seat at a table, and how a table has a mapping of seat identifiers to people references (keys).
So, should each chair be a separate node data object in the model? That would certainly make it easy to add/move/copy/remove them in the diagram. But then adding/moving/rotating/copying/removing tables is more complicated to manage. Part of this solution, if you wanted to be able to manipulate tables easily, would be to make the tables into Groups that held furniture, and maybe held people too.
The other way to go would be to leave tables the way that they are now in the sample and add functionality for manipulating chairs. You’d have to add an Array property on table data objects that would describe all of the chairs that are part of the table. GoJS does not support selecting elements of a Node or a Link, but you can simulate such selection via highlighting. An example of this technique is shown in the Selectable Fields sample, Mapping Selectable Fields of Records. You could implement the moving of chairs by using a NodeLabelDraggingTool.
With either design, you also have the option of making a table and its chairs into a “standard” kind of table that could be easily replicated by the user. That requires additional user interface and database work to define and implement and manage a different kind of palette (holding kinds of tables rather than individual people as in the Seating Chart sample). But maybe that is not of interest to you for your app.
Thank you for this solutions, What I tried is the first solution making each chair as separate node data object. And making table into groups. The only thing i am not getting is mapping of seat identifiers to people. Wether assigning seats to people will still work in this case ??
Can you share one small and short example of both that would be more helpful.
Note what I said about the sample – each chair is an element of a Table Node. What you are interested in implementing is the each chair is a separate Node that may be a member of a Table Group. So all of the code that assumes chairs are elements of a Node needs to be replaced by code that treats chars as Nodes that are members of a Group. This will be some work and requires you to be familiar with GoJS and also really understand the code.
Okay. Thank you for the reply and help. I will try what you said. If there is something will surely connect you again.