Hi
As attached, am having two diagrams and need to assign the various devices at Diagram 1 to different users at Diagram 2 and upon selection of a device 1 to various users 11 & 05 at diagram 2 and upon SAVE of selections need to put this assignments for planning purposes in another page using CRUD operations…
How should I work with GOJS tools for this situation ?
A Link cannot cross Diagram boundaries. (Similarly, a Group cannot contain member Nodes that are in different Diagrams.)
So you need to use a single Diagram. Exactly how you do it depends on what features you might want to support. Can users move nodes around? Can they move them across that horizontal dashed white line?
Can the user draw new links between a device and a user? Or are the links always programmatically determined?
What should happen if the size of the viewport changes?
I assume “DIAGRAM 1 - DEVICES” is just a title/label. You can either implement that in HTML or in GoJS: GoJS Legends and Titles -- Northwoods Software
Agree Orange Lines are not Links between Devices and Users. It is assignment of a Device from Device categories and assigning to multiple Users based on there positions, by Selecting one Device and its Users together will Save to the Device PUT method (similar to add the Users list of the selected Device)
In order to see there utilization in another Operations page…
No, Can’t move nodes around or between two diagrams as they are from one set of category of users and devices which are received from two different Fetch API’s. Couldn’t use the Palette here due to selection of Device and assignment as Palette is Read only.
Yes, New Assignments(Links) between a Device and Users to be done and this is the whole purpose of these two diagrams
Yes, Planner will plan and assign(Link) between a Device and Users based on the requirements by selections. Hence initial checks and requirements will be determined programmatically like,
4a. If the CURRENT usage of a device is already there in the Users list need to be highlighted to the Planner that these are the users already utilizing this device…
Viewport is not much important as long as all the category of Users and Devices fetched from 2 API’s to be viewed in one page and can be adjusted…
Yes it is just a Title/label, to describe the sample with difference and requirements mentioned the two diagram names there, which are received from two different categories and requirements…
Hope you get a better idea, about the requirements of assignment between a Device and User Diagrams.
And also will see the possibilities/samples to get both Device and Users into one Diagram.
So are you saying that you do not want to visually show the relationships between Devices and Users? If you do not want to have Links connecting Nodes across the dashed-white horizontal line, then I suppose you could use two separate Diagrams. But I still think it would be more flexible, as requirements change, if it were just one Diagram.
OK
Wait – now it seems that you do want to show the relationships between Devices and Users using Links in the (one) Diagram. This seems more natural to me. Not all Links have to be visible at the same time, so you could just show Links that are connected with selected Nodes, or some other policy that achieves your goals.
There are various ways to highlight nodes (or links). GoJS Highlighting -- Northwoods Software
Clearly if there doesn’t appear to be enough room to fit all of the nodes within the viewport, you can change the scale of the diagram. One way is to call Diagram.zoomToFit. Another way is to set Diagram.autoScale.
OK
Yes, No need to show the links… Is only assigned and put / post the device parameters with its users name / id…
3.Yes am stuck here, with multiple selections of a Device and its Users couldn’t do the assignment… Where as all the samples are with links in Orange lines as shown earlier. But the next point of highlighting section gives better clarity… And will try by omitting the
linkNodeProperty here.
4.Got it and and will go through the samples related to this with my purpose… If got a better sample related to my case request to update.
5.ok.
Thanks
It’s likely that you will have commands (HTML Buttons or GoJS context menus or HTML panels) that want to look at what the user has selected. The Nodes (and Links, if any) that are selected are held in the Diagram.selection collection. You can iterate over that, looking at each Part to see if it’s a Node and if so, what kind it is by looking at its Node.data object. Then you can formulate and send your server request.
Are you expecting a server response that would change the Diagram (i.e. what Nodes and Links are present)? If so, you can start a transaction, add/modify/remove data in the model, and commit the transaction, in addition to whatever you need to do in the rest of the HTML page.
A simple property update example:
myDiagram.model.commit(m => {
const nodedata = m.findNodeDataForKey(...);
if (nodedata) m.set(nodedata, "someProperty", someValue...);
});
Presumably there is a Binding depending on “someProperty” in your Node template.
Call Model methods to make all of the model data changes.
That’s great… Will convert it to use All Users and Devices in one diagram…
And Regroup it as Two different Groups to Fetch data from different category.
Will follow the above diagram.selection to look for its present users based on server response… and will add or remove to meet the requirements…
Thanks a lot
You don’t need to use Groups unless you really need to organize the nodes that way. If you don’t want to look at the data to decide what kind of node it is, you could use two separate node templates, and then you could look at the Node.category to see which template name was used.
Assigning node.category to
device
and
user
subscription, but the array of items received with property and values are not same for both Device & users list
keys for Device is 9 properties where as users got only 7 properties … Hence how can I insert this into one Diagram…
It’s OK if the data properties are different for different kinds of nodes. That provides even more justification for using different templates, because you may want to use different Bindings.
Oops, sorry am struggling to assign it into one gojs Diagram in Angular… Request your help…
OR the mergenNodeDataArray or addArrayItem to state properties are not workable…
Only nodeDataArray.push like below is assignable but it is merging into one key property
this.fixedConfComponent.diagram.model.nodeDataArray.push(this.userDiagramComponent.diagram.model.nodeDataArray
Output:
[
0: [
{Array object of userDiagramComponent},
{Array object of userDiagramComponent} ]
1: {Array object of fixedConfComponent},
2: {Array object of fixedConfComponent},
3. {Array object of fixedConfComponent},
4. {Array object of fixedConfComponent}
]
Managed to join the arrays of Objects with
Array.prototype.push.apply(this.state.fixedConfNodeData, this.state.diagramNodeData)
Now working on the assignment of TemplateMap… Confusing with old style and new style of Javascript…