I made some progress. I use the example : bpmn-js-example-custom-shapes
I modify the file : customPalettte.js
function createAction(type, group, className, title, options, url) {
function createListener(event) {
var shape = elementFactory.createShape(assign({ type: type }, options));
if (options) {
shape.businessObject.di.isExpanded = options.isExpanded;
}
create.start(event, shape);
}
var shortType = type.replace(/^bpmn:/, '');
return {
group: group,
className: className,
imageUrl: url,
title: title || 'Create ' + shortType,
action: {
dragstart: createListener,
click: createListener
}
};
}
assign(actions, {
'custom-letterA': createAction(
'custom:letterA', 'custom', 'icon-custom-letter','','', 'https://upload.wikimedia.org/wikipedia/commons/a/a6/Font_A.svg'
),
'custom-letterB': createAction(
'custom:letterB', 'custom', 'icon-custom-letter','','', 'https://upload.wikimedia.org/wikipedia/commons/3/3f/Font_B.svg'
),
'custom-letterC': createAction(
'custom:letterC', 'custom', 'icon-custom-letter','','', 'https://upload.wikimedia.org/wikipedia/commons/f/fa/Font_C.svg'
),
'custom-separator': {
group: 'custom',
separator: true
},
'lasso-tool': {
group: 'tools',
className: 'bpmn-icon-lasso-tool',
title: 'Activate the lasso tool',
action: {
click: function(event) {
lassoTool.activateSelection(event);
}
}
},
'space-tool': {
group: 'tools',
className: 'bpmn-icon-space-tool',
title: 'Activate the create/remove space tool',
action: {
click: function(event) {
spaceTool.activateSelection(event);
}
}
},
'tool-separator': {
group: 'tools',
separator: true
}
});
With that I have a palette with the letter A, B, C
When I drag them on the board… I only have a empty rectangle (that part is not done yet).
I also modify the file : CustomContextPadProvider.js
I want the letterA,B,C be able to connect only to letter D,E,F (like A->D or E or F)
and letter D,E,F to none
but I don’t know that to change to have that
export default function CustomContextPadProvider(injector, connect, translate) {
injector.invoke(ContextPadProvider, this);
var cached = bind(this.getContextPadEntries, this);
this.getContextPadEntries = function(element) {
var actions = cached(element);
var businessObject = element.businessObject;
function startConnect(event, element, autoActivate) {
connect.start(event, element, autoActivate);
}
if (isAny(businessObject, [ 'custom:letterA', 'custom:letterB', 'custom:letterC'])) {
assign(actions, {
'connect': {
group: 'connect',
className: 'bpmn-icon-connection-multi',
title: translate('Connect using custom connection'),
action: {
click: startConnect,
dragstart: startConnect
}
}
});
}
if (isAny(businessObject, [ 'custom:letterD', 'custom:letterE', 'custom:letterF'])) {
assign(actions, {
'connect': {
group: 'connect',
className: 'bpmn-icon-connection-multi',
title: translate('Connect using custom connection'),
action: {
click: startConnect,
dragstart: startConnect
}
}
});
}
return actions;
};
}