When and where definitions updated in Viewer class

bgrmknt · November 17, 2019, 8:37pm

I’m making my own project based on diagram-js and implementing some features (Rule, Render, Importer, Context, Modeling, Label…) with reference to bpmn-js.
Now trying to implement the save function, but I could not find when and where Viewer._definitions is updated in bpmn-js. Could you please let me know the hints about how should it be implemented like bpmn-js ?

oguzeroglu · November 18, 2019, 8:26am

Hey!

You could have a look at CommandStack.js under diagram-js project (lib/command/CommandStack.js). You should listen to elements.changed event. Here’s the explanation from the documentation:

Change Tracking

During the execution of the CommandStack it will keep track of all
elements that have been touched during the command’s execution.

At the end of the CommandStack execution it will notify interested
components via an ‘elements.changed’ event with all the dirty
elements.

The event can be picked up by components that are interested in the fact
that elements have been changed. One use case for this is updating
their graphical representation after moving / resizing or deletion.

philippfromme · November 18, 2019, 8:34am

Here you go: https://github.com/bpmn-io/bpmn-js/blob/develop/lib/Viewer.js#L465

bgrmknt · November 24, 2019, 9:55pm

Thanks.
Does it mean this line?

github.com

bpmn-io/diagram-js/blob/master/lib/command/CommandStack.js#L455






CommandStack.prototype._popAction = function() {
  var execution = this._currentExecution,
      actions = execution.actions,
      dirty = execution.dirty;


  actions.pop();


  if (!actions.length) {
    this._eventBus.fire('elements.changed', { elements: uniqueBy('id', dirty.reverse()) });


    dirty.length = 0;


    this._fire('changed');
  }
};




CommandStack.prototype._markDirty = function(elements) {
  var execution = this._currentExecution;

And finally it will call ChangeSupport()

github.com

bpmn-io/diagram-js/blob/master/lib/features/change-support/ChangeSupport.js#L17


*
* <ul>
*   <li>redrawing shapes and connections on change</li>
* </ul>
*
* @param {EventBus} eventBus
* @param {Canvas} canvas
* @param {ElementRegistry} elementRegistry
* @param {GraphicsFactory} graphicsFactory
*/
export default function ChangeSupport(
   eventBus, canvas, elementRegistry,
   graphicsFactory) {




 // redraw shapes / connections on change


 eventBus.on('element.changed', function(event) {


   var element = event.element;

Isn’t this function only for redrawing ?
I mean that I would like to know how is Viewer._defintion member variable updated every operations. (from outside of Viewer class?)
That will be used at https://github.com/bpmn-io/bpmn-js/blob/develop/lib/Viewer.js#L343

bgrmknt · November 24, 2019, 10:04pm

Thanks.
I checked what function will call this function by inserting console.trace().
This function was called only from Viewer.importXML when newDiagram.bpmn is read at first time. so I think that Viewer._definition is updated from outside.

philippfromme · November 25, 2019, 7:36am

_definitions is only assigned once when importing. The model is then updated constantly by BpmnUpdater and others. These updates happen whenever an element is changed. Whenever you access the definitions it will contain the up-to-date model.