I extended BPMN by adding a custom shape that is resizeable. I would like it to be resizable just like pools, where the outline stroke it not affected by resizing and zooming in/out. In addition the aspect ratios should also be adjusted. In this Gif you can see the unintentional difference when resizing my custom shape.
My custom Shape is rendered:
this.drawJoin = function (p, width, height) {
var svgString = `
<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 27 12" fill="none">
<path d="M1 11V1H26V11H1Z" fill="white" stroke="black" stroke-width="1"/>
</svg>
`;
p.innerHTML = svgString;
return p;
};
And I added the rule for resizing:
this.addRule('shape.resize', HIGH_PRIORITY, function(context) {
var shape = context.shape;
if (isocbpmn(shape)) {
// Allow resize if the shape is a 'join'
if (shape.type === 'ocbpmn:join') {
return true;
}
// Cannot resize other ocbpmn elements
return false;
}
});
This might also have an effect as I am assigning a size to this shape. This is specified by your custom-shape example:
ocbpmnElementFactory.prototype._getocbpmnElementSize = function(type) {
var shapes = {
__default: { width: 100, height: 80 },
'ocbpmn:triangle': { width: 40, height: 40 },
'ocbpmn:circle': { width: 140, height: 140 },
'ocbpmn:hexagon': { width: 26*1.5, height: 30*1.5 },
'ocbpmn:join': { width: 50, height: 20 },
};
return shapes[type] || shapes.__default;
};
How did you do this with the pools so that they are resizable in this way and how can I implement this behaviour for my custom shape?
