How to edit/set elements of diagram from the js

Developers Modeler
1

Hello everyone, I’m just trying to know how can I manage and handle events and properties of the BPMN diagram (canvas), from the JS/TS controller. I’m new using the JS BPMN library, and I’m using it on angular 8. The reason is simple, I’m not using the properties panel of the library, I’m trying to setup a custom properties panel.

I setup the modeler like this:

this.modeler = new Modeler({

  container: '#canvas',

  width: '100%',

  height: '600px',

  additionalModules: [

    PropertiesPanelModule,

    customControlsModule,

    { [InjectionNames.bpmnPropertiesProvider]: ['type', OriginalPropertiesProvider.propertiesProvider[1]] },

    { [InjectionNames.propertiesProvider]: ['type', CustomPropsProvider] },

    { [InjectionNames.originalPaletteProvider]: ['type', OriginalPaletteProvider] },

    { [InjectionNames.paletteProvider]: ['type', CustomPaletteProvider] },

  ],

  // propertiesPanel: {

  //   parent: '#properties'

  // },

  moddleExtension: {

  }

});

I’m already catching the events that I need to handle on my controller like this:
this.modeler.on(‘element.changed’, event => {

  this._change.emit();

});

this.modeler.on('element.click', _event => {

  // console.log(_event);

  this.element = _event;

  // console.log(this.modeler.get('eventBus'));

});

This is my template code (I’m using an Angular Library to build my interfaces, called Ignite):

<div class="modeler">

    <div id="canvas"></div>

</div>

<ng-template [ngIf]="element && element.element">

    <igx-card class="properties">

        <igx-card-content>

            <igx-tabs #tabset tabsType="fixed">

                <igx-tabs-group label="General">

                    <igx-input-group>

                        <input igxInput name="id" [(ngModel)]="element.element.id" type="text"/>

                        <label igxLabel for="id">Event Id</label>

                    </igx-input-group>

                    <igx-input-group>

                        <input igxInput name="type" [(ngModel)]="element.element.type" type="text"/>

                        <label igxLabel for="type">Event Type</label>

                    </igx-input-group>

                    <igx-input-group>

                        <input igxInput name="name" (keyup)="writeName($event)" [(ngModel)]="element.element.businessObject.name" type="text"/>

                        <label igxLabel for="name">Event Name</label>

                    </igx-input-group>

                </igx-tabs-group>

                <igx-tabs-group label="Custom">

                    

                </igx-tabs-group>

            </igx-tabs>

        </igx-card-content>

    </igx-card>

</ng-template>

Then, I try to update the diagram element this way:

this.modeler.get(‘eventBus’).fire(‘element.changed’, {element: this.element});

the “this.element” variable is already updated with the ngModel, but even if the this.element.element.businessObject.name parameter is updated, the label for the element with the string of the this.element.element.businessObject.name does not render.

I don’t know if I’m doing something wrong, or if there is proper documentation about how to handle and update properties of an diagram’s element.

Hope anybody can help me!

2

Hey,

Modeling class provides updateLabel API. Have you tried it?

3

Thanks @oguzeroglu I tried this:

this.modeler.on('element.click', _event => {
  this.element = _event;
});

and on the input keyup handler, called a function that do this:

this.modeler.get('modeling').updateProperties(this.modeler.get('elementRegistry').get(this.element.element.id), {name: this.element.element.businessObject.name});

Thanks!

5

Can you try using the updateLabel API and let me know about the results?

modeling.updateLabel(YOUR_ELEMENT, NEW_NAME_OF_THE_ELEMENT);
6

Your callback is called with the event, not the element. This is how you get the clicked element:

eventBus.on("element.click", (context) => {
  const { element } = context;  

  console.log(event);
});