The following list contains events that you can react on:
change
- generic event triggered for any change on the element - fn(element, opt)change:position
- triggered when the element changes its position - fn(element, newPosition, opt)change:angle
- triggered when the element gets rotated - fn(element, newAngle, opt)change:size
- triggered when the element gets resized - fn(element, newSize, opt)change:attrs
- triggered when the element changes its attributes - fn(element, newAttrs, opt)change:embeds
- triggered when other cells were embedded into the element - fn(element, newEmbeds, opt)change:parent
- triggered when the element got embedded into another element - fn(element, newParent, opt)change:z
- triggered when the element is moved in the z-level (toFront and toBack) - fn(element, newZ, opt)transition:start
- triggered when a transition starts. - fn(element, pathToAttribute)transition:end
- triggered when a transiton ends. - fn(element, pathToAttribute)// Listening for changes of the position to a single element
element1.on('change:position', function(element1, position) {
alert('element1 moved to ' + position.x + ',' + position.y);
});
// All elements events are also propagated to the graph.
graph.on('change:position', function(element, position) {
console.log('Element ' + element.id + 'moved to ' + position.x + ',' + position.y);
});
// Using the option parameter and a custom attribute
graph.on('change:custom', function(element, custom, opt) {
if (opt.consoleOutput) {
console.log('Custom attribute value changed to "' + custom + '"');
}
});
element2.prop('custom', 'myValue', { consoleOutput: true });