Business data can be stored conveniently in the
tag of a graph item. In this
example, we store the creation date with each node as follows:
graph.createNode({ layout: new Rect(0, 80, 30, 30), tag: new Date() })
To dynamically update/store the creation date in the tag, we add a node creation
listener to the graph. The listener adds the tag if no tag has been specified at
creation time.
graph.addEventListener('node-created', (evt): void => {
const node = evt.item
if (node.tag === null) {
node.tag = new Date()
}
})
It is rather uncommon to modify data whenever an item gets created in response to
the low-level creation events. This is because the same events get triggered upon
undo/redo, during loading, clipboard operations, etc.
Instead, likely you want to store the tag with the element when the user creates
the item. If we only want to handle events caused by interactive node creation, we
could register to the node creation event of the input mode.
graphEditorInputMode.addEventListener('node-created', (evt): void => {
const node = evt.item
node.tag = new Date()
})
Once we have data stored in the tag, it is conveniently available in
all parts of the API.
E.g., now we can get the data from the tag to display in the tooltip. In the event
handler that handles tooltips, this works like this:
evt.toolTip = node.tag ? node.tag.toLocaleString() : 'Not set'