Error when try to use create.start at a custom palette

Developers Modeler
1

Hello,

I create a custom element to palette, but I cannot drag the new item and use it at a flow.

I getting the following error:

TypeError: Cannot read property ‘pointers’ of undefined
at to (bpmn-modeler.production.min.js:formatted:1)
at s (bpmn-modeler.production.min.js:formatted:1)
at la.init (bpmn-modeler.production.min.js:formatted:1)
at gp.start (bpmn-modeler.production.min.js:formatted:1)
at startCreate (CustomPaletteProvider.ts:26)
at CustomPaletteProvider.push…/src/app/custom/CustomPaletteProvider.ts.CustomPaletteProvider.getPaletteEntries (CustomPaletteProvider.ts:35)
at bpmn-modeler.production.min.js:formatted:1
at b (bpmn-modeler.production.min.js:formatted:1)
at lm.getEntries (bpmn-modeler.production.min.js:formatted:1)
at lm._update (bpmn-modeler.production.min.js:formatted:1)

My CustomPaletteProvider.ts

import {IPalette, IPaletteProvider, OriginalPaletteProvider} from “…/bpmn-js/bpmn-js”;

export class CustomPaletteProvider implements IPaletteProvider {

static $inject = [‘palette’, ‘originalPaletteProvider’, ‘elementFactory’, ‘create’];

private readonly elementFactory: any;
private create: any;

constructor(private palette: IPalette, private originalPaletteProvider: IPaletteProvider, elementFactory, create) {
palette.registerProvider(this);
this.elementFactory = elementFactory;
this.create = create;

}

getPaletteEntries() {
console.log(this.create);
function startCreate(event, elementFactory, create) {
var serviceTaskShape = elementFactory.create(
‘shape’, { type: ‘bpmn:ServiceTask’ }
);

  create.start(event, serviceTaskShape);
}

return {
  'create-call-api': {
    group: 'activity',
    title: 'Call API',
    className: ['fa-tv', 'fa'],
    action: {
      dragstart: startCreate(event, this.elementFactory, this.create),
      click: () => console.log( 'Call API ', this.elementFactory)
    }
  }
};

}
}

2

Can you please format your code so it’s readable? https://help.github.com/en/articles/creating-and-highlighting-code-blocks

Thanks

3 
import {IPalette, IPaletteProvider, OriginalPaletteProvider} from “…/bpmn-js/bpmn-js”;

export class CustomPaletteProvider implements IPaletteProvider {

static $inject = [‘palette’, ‘originalPaletteProvider’, ‘elementFactory’, ‘create’];

private readonly elementFactory: any;
private create: any;

constructor(private palette: IPalette, private originalPaletteProvider: IPaletteProvider, elementFactory, create) {
palette.registerProvider(this);
this.elementFactory = elementFactory;
this.create = create;

}

getPaletteEntries() {
console.log(this.create);
function startCreate(event, elementFactory, create) {
var serviceTaskShape = elementFactory.create(
‘shape’, { type: ‘bpmn:ServiceTask’ }
);

  create.start(event, serviceTaskShape);
}

return {
  'create-call-api': {
    group: 'activity',
    title: 'Call API',
    className: ['fa-tv', 'fa'],
    action: {
      dragstart: startCreate(event, this.elementFactory, this.create),
      click: () => console.log( 'Call API ', this.elementFactory)
    }
  }
};
}
}
4

How is this supposed to work? You’re immediately calling the function, therefore, event is undefined.

5

This “startCreate” is a function inside getPaletteEntries().

I tried to do this looknig for an exemple in JS.

It is the first time that I use the bpmn-js. I need to use it with Angular 7 and I need to create some news elements on the palette. I could intert the elements, but I cannot put the new element into bpmn flow.