Model Two Way Binding


#1

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?


#2

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.


How to refresh the viewer
#3

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


#4

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


#5

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


#6

@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.


#7

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!


#8

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


#9

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:


#10

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


#11

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


#12

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.