I want to add Custom Color pad in bpmn .
in my source…
export default class CustomContextPad {
constructor(config, contextPad, create, elementFactory, injector, translate, modeling) {
this.create = create;
this.elementFactory = elementFactory;
this.translate = translate;
this.modeling = modeling;
if (config.autoPlace !== false) {
this.autoPlace = injector.get('autoPlace', false);
}
contextPad.registerProvider(this);
}
getContextPadEntries(element) {
const {
autoPlace,
create,
elementFactory,
translate,
modeling
} = this;
function appendServiceTask(event, element) {
if (autoPlace) {
//const shape = elementFactory.createShape({ type: 'bpmn:TextAnnotation' });
modeling.setColor(element, {
stroke: 'black',
fill: 'black'
});
//autoPlace.append(element, shape);
} else {
appendServiceTaskStart(event, element);
}
}
function appendServiceTaskStart(event) {
const shape = elementFactory.createShape({ type: 'bpmn:TextAnnotation' });
create.start(event, shape, element);
}
return {
'colorlist': {
group: 'model',
className: 'bpmn-icon-color',
title: translate('Set Color'),
html : '<div class="entry"><button class="picker" id="picker1">11</button></div>',
action: {
click: appendServiceTask,
dragstart: appendServiceTaskStart
}
}
};
}
}
CustomContextPad.$inject = [
‘config’,
‘contextPad’,
‘create’,
‘elementFactory’,
‘injector’,
‘translate’,
‘modeling’
];
i want to make this images…