Diagram node to use properties from related palette node

Hi,

when dragging a node from the palette to the diagram all nodeData properties are copied to the new diagram node.
Is there any mechanism for copying only some of the properties, and just add a reference for the other properties to the palette node? Or do I have to implement such functionality manually?
In our application we have a diagram and a palette, and sometimes we might want to update the palette nodes with more attributes. In this case it would be useful if we could tell the diagram node to use a certain nodeData property from the palette node (with the same id/name).

Example: Our palette node data contains the icon as a base64 encoded string. When the node is dragged to the diagram (possibly multiple times), I don’t want to icon string to be copied, but to reference the palette node icon string instead. So if I would update the icon string in the palette later, all nodes in the diagram would use the new icon string as well.

I am about to implement this functionality manually but was wondering if there is maybe something built into goJS already.

Best regards,
Dominic

You can always use different templates for your palette and your diagram. In that case, the diagram’s node template would not have bindings on the properties only needed for the palette.

Another option would be to do some processing in an ExternalObjectsDropped diagram listener on the main diagram.

Hi,

thanks for the quick reply.
The diagram node should actually have a binding which points to the properties of the palette node from which it was created.

My current idea is to remove the property from the diagram node in ExternalObjectsDropped and then in the diagram node binding, find the related palette node (e.g. by a unique name) and create a binding (one-way) on the palette nodes’ property.
Is this the proper solution or is there some additional mechanism in goJS with further support for this scenario? :-)

I’m not clear on what you’re trying to achieve, so it’s hard to say what the best solution would be. Could you give a concrete example of some property and maybe some screenshots of behavior you would expect when manipulating the property?

Sure (palette left, diagram right):

Let’s say “KT: 0 Sek.” is a property of the “Kunde” node. I have created a diagram with three “Kunde” nodes. Now for the next version of our application, I replace the property of the “Kunde” node in the (hardcoded) palette with new value “KT: 55 Sek.”. When the user opens the updated app/website, I would like that all “Kunde” nodes in the diagram are displaying the new value “KT: 55 Sek.”.
Currently, however, the diagram nodes still display “KT: 0 Sek.” as this property has been copied when the nodes have been created.

Ok, because you want all the nodes of a particular type to share data, the best solution might be to put the data on the model itself and use Model.modelData as the binding source. See GoJS Data Binding -- Northwoods Software.

So your model would look something like this:

modelData: [
  kundeText: "KT: 0 Sek."
],
nodeDataArray: [ ... ],
linkDataArray: [ ... ]

Then your nodes would have:

new go.Binding("text", "kundeText").ofModel()

Then you just need to keep the modelData objects in sync between the palette and diagram.

Thanks, I’ll have a look into your proposed approach!

I have another, related question:
In order to remove some data from the node data when the node is copied into the diagram, I am listening to the ExternalObjectsDropped event.

If I want to delete the “options” property in the following node data example, how should I proceed?

"nodeDataArray": [{
        "category": "myNode",
        "nodeName": "Node node",
        "parameters": [ {
                "name": "Parameter 2",
                "value": 123,
                "customData": {
                    "options": [{
                            "opt1": "Opt1",
                            "opt2": "Opt2",
                        }
                    ]
                }
            }
        ],
        "key": -7,
        "loc": "15.328125 -242"
    }
],
  1. I tried to just iterate over the parameters and use the plain JavaScript delete e.subject...customData.options. However, this deletes the property from the palette node as well? Shouldn’t the e.subject be a copy of the palette node?
  2. There is also the diagram.model.setDataProperty() method, but I guess I cannot easily set the embedded options property to undefined?
  3. Or do I need to copy the parameters property, remove the options property with delete, and then call the setDataProperty() method for the parameters property?

Thanks,
Dominic

Maybe it would be better to set Model | GoJS API to a function that copies the data the way that you want, sharing some references while copying other referenced objects.

Thanks for the support, seems to work fine this way! :-)