Resizing custom shapes

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.
ocbpmn elements example - bpmn-js-examples - Google Chrome 2023-11-25 12-21-59

My custom Shape is rendered:

this.drawJoin = function (p, width, height) {
    var svgString = `
      <svg xmlns="" width="${width}" height="${height}" viewBox="0 0 27 12" fill="none">
        <path d="M1 11V1H26V11H1Z" fill="white" stroke="black" stroke-width="1"/>
    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?

Please share a running / prototypical example that clearly shows what you’re trying to achieve, what is working and what is not.

Use our existing starter projects to quickly hack it or share your existing, partial solution on GitHub or via a CodeSandbox. Provide the necessary pointers that allow us to quickly understand where you got stuck.

This way we may be able to help you. What you try to build surely looks interesting.

Thanks :heart: