Connections of custom shapes are misaligned

I have successfully implemented a new custom shape into the modeler. My solution is similar to the custom shapes example but it’s different in some point. For example my custom shape is serialized into XML as a regular bpmn2:callActivity like this:
<bpmn2:callActivity id=“CallActivity_00lzzem” c365ns:custom=“callActivity”>

So it has a custom attribute. This way I can differentiate between the regular Call Activity and my custom one. The shape itself is rendered by a custom renderer and I also created custom element factory, context pad provider, palette and rules for it. However I judged I will not need a custom updater. This is because its not really a new shape, its still a Call Activity and the default update is just fine for me. The custom renderer also contain only the part responsible to draw the custom shape and path and doesn’t contain the part which is responsible for the red connection like in the custom shape example.
This is because the default connection would be okay for me. But here is my problem. This default connection(its path) is calculated wrongly. Not always but most of the time. So for example when I create a connection to my custom shape first time, its okay. Then I move my shape and its okay again, then I move again and the end arrow is now not properly pointing to the border of my custom shape. See attached picture.
I see no browser console log error during this.
I think I am missing a function somewhere or missing something totally in the concept. I don’t know. I copy here my custom renderer. Tell me if you need more source code.

'use strict';

var inherits = require('inherits');

var BpmnRenderer = require('bpmn-js/lib/draw/BpmnRenderer');
var TextUtil = require('diagram-js/lib/util/Text');
var is = require('bpmn-js/lib/util/ModelUtil').is;
var getBusinessObject = require('bpmn-js/lib/util/ModelUtil').getBusinessObject;

var componentsToPath = require('diagram-js/lib/util/RenderUtil').componentsToPath;

var svgAppend = require('tiny-svg/lib/append'),
    svgAttr = require('tiny-svg/lib/attr'),
    svgCreate = require('tiny-svg/lib/create'),
    svgClasses = require('tiny-svg/lib/classes');

		  fontFamily: 'Arial, sans-serif',
		  fontSize: 12

 * A renderer that knows how to render custom elements.
function CustomRenderer(eventBus, styles, pathMap, canvas) {, eventBus, styles, pathMap, canvas, 2000);
  var textUtil = new TextUtil({
	    style: LABEL_STYLE,
	    size: { width: 100 }

  var computeStyle = styles.computeStyle;
  function getSemantic(element) {
	  return element.businessObject;
  function renderLabel(p, label, options) {
	    var text = textUtil.createText(label || '', options);
	    svgAppend(p, text);

	    return text;

	  function renderEmbeddedLabel(p, element, align) {
	    var semantic = getSemantic(element);

	    return renderLabel(p,, {
	      box: element,
	      align: align,
	      padding: 5,
	      style: {
	        fill: '#000000'

  this.drawCustomShape = function(p, element, fillColor) {
    var width = element.width,
    	height = element.height,
    	indent = width / 5,

    points = [ 0, 0, width - indent, 0, width, height / 2, width - indent, height, 0, height, indent, height / 2 ];

    attrs = computeStyle(attrs, {
      stroke: '#000000',
      strokeWidth: 2,
      fill: fillColor

    var polygon = svgCreate('polygon');

    svgAttr(polygon, {
      points: points

    svgAttr(polygon, attrs);

    svgAppend(p, polygon);
    renderEmbeddedLabel(p, element, 'center-middle');

    return polygon;

  this.getCustomShapePath = function(element) {
    var x = element.x,
        y = element.y,
        width = element.width,
        height = element.height,
        indent = width / 5;

    var callActivityPath = [
      ['M', x, y],
      ['l', width - indent, y],
      ['l', indent, height / 2 ],
      ['l', -indent, height  / 2],
      ['l', -width, 0 ],
      ['l', indent, - height / 2 ],

    return componentsToPath(callActivityPath);

inherits(CustomRenderer, BpmnRenderer);

module.exports = CustomRenderer;

CustomRenderer.$inject = [ 'eventBus', 'styles', 'pathMap', 'canvas' ];

CustomRenderer.prototype.canRender = function(element) {
	var bo = getBusinessObject(element);
	return (is(element, 'bpmn:CallActivity') || is(element, 'bpmn:SubProcess'))  && bo && typeof bo.get('c365ns:custom') != 'undefined';

CustomRenderer.prototype.drawShape = function(p, element) {
  var bo, custom;
  bo = getBusinessObject(element);
  custom = bo.get('custom');

  if (custom == "callActivity") {
	  return this.drawCustomShape(p, element, '#ffff00');
  } else if (custom == "subProcess") {
	  return this.drawCustomShape(p, element, '#00aeff');

CustomRenderer.prototype.getShapePath = function(shape) {
  var bo, custom;
  bo = getBusinessObject(shape);
  custom = bo.get('custom');

  if (custom == "callActivity") {
	  return this.getCustomShapePath(shape);
  } else if (custom == "subProcess") {
	  return this.getCustomShapePath(shape);

There seems to be an issue with connection cropping. Can you be more specific in what situations it fails?

Sorry for not answering before, higher priority issues raised.
So here are some anim gifs that shows some situations.

Could you share a piece of code + diagram that allows us to reproduce the issues you’re seeing?

One solution is to base it on our starter templates another one to put stuff up somewhere on GitHub for us to check out.

Hi.can anyone let me know update on this issue ?


See: Restrict Connecting Lines to Points

1 Like

Thank you @philippfromme I reviewed my getShapePath and it turned out my calculation was wrong and that caused the problem.