Model Two Way Binding

in extension of my question about Json serialization I would like to ask if there is a possibility to re-render the svg when the underlying data has been changed. This would allow to edit the moddel by multiple users at the same time.

I am thinking about two-way-binding as implemented in Angular. With help of firebase, a multi-user moddeler could be realized pretty simple. compare the firebase example: https://github.com/firebase/office-mover-5000 (just open the demo in two browser tabs and see how they get synchronized)

Are there already thoughts in this direction?

The graphical representation of an element is automatically updated if an element.changed event is fired via the eventBus. If you know what changed simply emit the respective events.

var shape1 = elementRegistry.get('Shape_1');
eventBus.fire('element.changed', { element: shape1 });

This is internal though and may change in the future.

1 Like

perfect - thanks! That is exactly what I was searching for!

Is there any event when the task label changes? I need a two-way data bingind with the task name and an input text.

There is no distinct event for that. element.changed informs you about a general change. You may use that to dirty check yourself.

@santosguilherme Seems like there exists a bug that prevents the above from happening.

Will be fixed in a bug fix release of bpmn-js soon.

Ok @nikku, i’m using angularjs and this code solved my problem:

var eventBus = self.editorViewControl.bpmnEditor.get('eventBus'); eventBus.on('element.changed', function () { (!$scope.$$phase) && ($scope.$apply()); });

Input with task name binding:

<input ng-model="editorController.editorViewControl.selectedElement.businessObject.name" type="text" ng-change="editorController.updateNameTask()">

When name typed is changed, call this function:

self.updateNameTask = function () { var eventBus = self.editorViewControl.bpmnEditor.get('eventBus'); eventBus.fire('element.changed', {element: self.editorViewControl.selectedElement}); };

Thanks!

@nikku doesn’t work with sequenceFlow element, the businessObject.name has updated value, but sequenceFlow label’s isn’t updated.

Hey @santosguilherme,

I provided a bugfix for this issue, so the element.changed event is now fired properly for labels and names. The bugfix is already on the master branch. You can see the changes here:

Thanks @pedesen!

Could release the latest version of the bower-bpmn-js?

bower bpmn-js#0.13.3 ENORESTARGET No tag found that was able to satisfy 0.13.3

Additional error details: Available versions in git://github.com/bpmn-io/bower-bpmn-js.git: 0.13.2, 0.13.1, 0.13.0, 0.12.1, 0.12.0, 0.11.0, 0.10.3, 0.10.2, 0.10.0, 0.9.2, 0.9.1, 0.9.0, 0.8.0, 0.7.0, 0.6.1, 0.6.0, 0.5.1, 0.5.1-1-viewer-fixes, 0.5.0, 0.4.1, 0.3.0, 0.2.1, 0.2.0

Yes, there you go: https://github.com/bpmn-io/bower-bpmn-js/releases/tag/v0.13.3

Thanks @pedesen.

But doesn’t solved my problem with sequenceFlow. Element isn’t updated with code bellow:

<input ng-model="editorController.editorViewControl.selectedElement.businessObject.name" type="text" ng-change="editorController.updateNameTask()">

This function updateNameTask, update name (element.businessObject.name) of selected element:

self.updateNameTask = function () { var eventBus = self.editorViewControl.bpmnEditor.get('eventBus'); eventBus.fire('element.changed', {element: self.editorViewControl.selectedElement}); };

It works with tasks, user tasks, service tasks, etc… but with sequenceFlow doesn’t.