Custom outlines for custom shapes

[vesper8]

I’ve created a custom shape for my bpmn:Task elements that resembles a rotated house. I created a custom renderer and also added a custom getShapePath so that my connections would correctly respect the outline of my shape. This all works perfectly. I’ve noticed that when I select my custom shape, the blue outline does not contour the shape and instead is just a regular rounded rectangle.

I see that a PR was just merged a few months ago which adds the ability to correctly contour custom shapes: Updated outlines by smbea · Pull Request #1998 · bpmn-io/bpmn-js · GitHub

However despite being on the latest version 17.0.2, I still am not getting the custom contour.

Is that because I now have to implement my own OutlineProvider and add logic in there so that it will respect my custom svg shape path?

[Shakez_Dev]

You’ve most likely already figured this out, but your suggestion (CustomOutlineProvider) was correct. I had the same problem and was able to solve it thanks to the link provided. Thank you very much

[vesper8]

That’s awesome that you were able to solve it with the help of my link. Is there any chance you would be so kind as to share your custom outline provider with us pretty please : )

Thanks!

[Shakez_Dev]

Show an IntermediateCatchEvent outlined with an rectangle (not rounded) when selected.

export default class CustomOutlineProvider extends OutlineProvider {
	private styles: Styles;

	constructor(outline: Outline, styles: Styles) {
		super(outline, styles);
		this.styles = styles;
	}

	//@ts-ignore wrong type in library bpmn-js itself
	getOutline(element: Element): Outline | SVGElement {
		if (element.type === "bpmn:IntermediateCatchEvent") {
            // copied from OutlineProvider (you have to change this according to your use case)
            // i removed some parts e.g. zoom-dependent size.
			const outline = svgCreate("rect");
			const OUTLINE_STYLE = this.styles.cls("djs-outline", ["no-fill"]);

			svgAttr(outline, assign({
				x: -5,
				y: -5,
				rx: 14,
				width: element.width + 5 * 2,
				height: element.height + 5 * 2
			}, OUTLINE_STYLE));

			return outline;
		}
		//@ts-ignore wrong type in library bpmn-js itself
		return super.getOutline(element);
	}
}

CustomOutlineProvider.$inject = [
	"outline", "styles"
];

// Add custom module as usual

additionalModules: [
			{
				__init__: [
					...
					"outlineProvider",
				],
				...
				"outlineProvider": ["type", CustomOutlineProvider],
			},
			...
		],

Hope this helps

[vesper8]

Thanks for sharing!! Appreciate it!