Adding Dynamic properties for each shape

GoJS
#1

Hi,
After drag and drop a shape from Palette to Diagram. I can see specific properties of the diagram using DataInspector. such as Key, Text, Location. which are added to “GraphLinksModel”

Is there any way i can add different properties to different shape dynamically? Including Default properties such as Key, Category, Location, text.

For example, i have a rounded rectangle shape, after dropping the shape in to Diagram. i wanted to have specific properties attached to it.

Below are such properties.

I would like to have a drop down box for Name
and based on the selection of the drop-down, i would like to get the diffTime Parameters from a json file.

Below is one more example, how i may need for another shape.

The Parameters may vary depending upon the drop down selection.

And bind them to the shape so that if i save the diagram. all properties should be included in NodedataArray.

Thank you.

#2

Yes, you can add whatever properties you like to the model node data object – it’s just a JavaScript Object. We suggest that you call Model.setDataProperty in an “ExternalObjectsDropped” DiagramEvent listener that iterates over the e.subject, which will be a collection of the newly created Nodes.

I hope you have added enough information to each Node.data in the Palette so that after the drag-and-drop, you can tell them apart by the data that was copied. Normally you would add all of the properties that you want in the Palette model data objects, so that you would not need to add any after the drop. Usually the “ExternalObjectsDropped” listener is just for making changes to the dropped objects that could not have been determined beforehand in the Palette.

#3

Yes, i have provided enough information to the Node so that i can determine which node i am handling.
Text is such property.

myPalette =
SCE(go.Palette, “myPaletteDiv”,
{
nodeTemplateMap: myDiagram.nodeTemplateMap, // share the templates used by myDiagram
model: new go.GraphLinksModel([ // specify the contents of the Palette
{ category: “Rectangle”, text: “Command” }
])
});

Now if i use data inspector, I could see, category, text, key and location – Values.
Including this i also want dynamic properties.

Something like this,[styling doesn’t matter, i hope you got my requirement]

Yes, Normally i would add all the properties need, to above myPalette it self.
{ category: “Rectangle”, text: “Command”, … }

As i wanted to have Dynamic properties specific to each Node, like drop down, based on drop down many more parameters.

It would be great if you can provide me an example.

Thank you

#4

Oh, so you are just asking about how to customize the DataInspector. By default it shows all of the properties on the Object. Maybe you didn’t mean to set includesOwnProperties to false?

It is commonplace to provide property descriptors for each of the possible properties that you know might appear on the data, but to not actually show the property in the DataInspector unless the property is present (i.e. the value is not undefined). That’s what the show: Inspector.showIfPresent setting is for in a property descriptor (a.k.a property options).