Add unique Id to an image

GoJS
#1

Scenario :
-Palette contains three images : Image1 , Image2 , Image3.
-On drag n drop from the palette to the floor , images are added on the floor.
-Suppose I have three images of the type “Image1” .
How can I differentiate between the images? Using which property ? Is there a way to assign a unique Id to it ?

And How can they be saved & retrieve ? with reference to which property ?

Assuming the floor diagram is saved already ,
if I need three images of the type “Image1” on the floor on page load , how can I get them using the Unique Id that we would set to it ?

#2

Assuming you are using models, as we normally recommend, you have initialized the model data in the Palette to at least be able to discriminate between the three images – either via a data Binding of Picture.source to a node data property or via different node categories.

When the user drag-and-drops from the Palette to the main Diagram, the node data is copied and added to the target Diagram’s Model. So each Node.data will have whatever properties you had set on the node data in the Palette.

In addition the Node.data.key will be unique within the Diagram.model. You don’t need to do anything.

For saving and loading models, many of the samples demonstrate calling Model.toJson and Model.fromJson to write/read the model as a JSON-format text string.

#3

Thanks Walter .
What would be the case if I need to load the previously saved diagram?
I need to load it with reference to that Node.data.key .
Eg : 3 Image1 , 2 Image2 and 3Image3s .
Could you please show an example for the same?

#4

I don’t understand your question.

The Model is supposed to hold all of the information you need to build a Diagram showing everything that you want, assuming that the templates are the way that you want them to be. Part of the design process is to make sure that each node data in the model has all of the properties that you need. And hopefully none of the properties that you don’t need.

Presumably you have already read http://www.gojs.net/latest/learn/index.html and http://www.gojs.net/latest/intro/usingModels.html and http://www.gojs.net/latest/intro/dataBinding.html .

I suggest that you look at the samples again that save and load models into text areas on the same page, so that you can see what properties each sample app uses in their models and how those properties are used by the diagram and by bindings in the templates.