Arrow starting point position is fixed to certain width height

[Code_Guru]

As in the added photo i can not see the starting point of arrow. from this you can not guess the direction.

The red circle is the area where connection is connected. If i make connection from the start, the starting of arrow will be visible.

In nutshell it is visible to the left+ top corner that is covered in the red circle.

In the image , i connected it from back, and it connected to the dot that is inside the red circle. how can i fix this, it should connect to the edge of the box.

Update1

I changed the UI of shape (width:270, height:180). Now if you can connect this sdsd element with connection arrow, the bullet point will only be visible for the red marked border, left and top of selected element.

otherwise if you connect this element, the bullet point of arrow will not be visible.
I inspected the element there is rect that has djs-hit djs-hit-all class, the element that is currently selected. I think connection is connected to this element and due to this bullet point is not visible.

it has width attribute set to 100. I provided width/height on .djs-hit, .djs-hit-all to 270,180.

But did not work.

Now if you understands the problem and can help?

update 2

this is how i am rendering the element

drawCustomeShape(parent) {

  const BOX_WIDTH = 270;

  const BOX_HEIGHT = 120;

  const elementShape = drawRect(BOX_WIDTH, BOX_HEIGHT, 10, '#FFFF');

  attr(elementShape, { stroke: "#ddd", "stroke-width": "1px", });

  append(parent, elementShape);

  // element on hover it will showwn

  // need to add this element as we want to add hoverEl

  // providing height/width over default djs-hit can work but it does not fit on condition dianmond and start/end el

  const hoverEl = drawRect(180, 120, 0, 'white');

  attr(hoverEl, {

    x: 0,

    y: 0,

    stroke: 'white',

    strokeOpacity: '0',

    strokeWidth: 15,

    fill: 'none'

  });

  classes(hoverEl).add('djs-hit');

  classes(hoverEl).add('djs-hit-all');

  // this class matches the height and width

  classes(hoverEl).add('hoverEls');

  append(parent.parentNode, hoverEl);

  // for hover effect -> show the dotted line over the

  const hoverElOutline = drawRect(0, 0, 0, 'none');// update height width in css class accordingly

  attr(hoverElOutline, {

    x: -6,

    y: -6

  });

  classes(hoverElOutline).add('djs-outline');

  classes(hoverElOutline).add('hoverEl');

  append(parent.parentNode, hoverElOutline);

  return elementShape;

}

[Martin]

Hi,

So anyone has a fair chance to understand your use case, could you please explain your issue in a structured and detailed manner?

Please provide the necessary context for us to understand you problem. What library are you using? What exactly is not working? What have you tried so far?

To share complete setups, create and link a CodeSandbox. This way, we can inspect the problem at hand in action and, thus, can help you in a timely and more effective manner.

Thanks

[Code_Guru]

@Martin , i have updated the question now with more details and photo, if you can help now!!!

[philippfromme]

How did you change the width and height of the shape?

[Code_Guru]

updated the question!!

[philippfromme]

Can you explain what your costum element is? Is it a task that is just rendered differently? Is it an entirely custom shape?

[Code_Guru]

from the

drawShape = function (parent, shape) {

method of CustomRenderer, i call the drawCustomeShape if it is of bpmn:UserTask

[philippfromme]

So your element is a bpmn:UserTask? Tasks have a width of 100 and height of 80. Not respecting these dimensions when rendering it means that all other features like the hitbox will still assume the 100,80 dimensions. As you can see the result is that visual and hitbox don’t match. To fix this issue you need to actually assign the custom dimensions to the element. You could override ElementFactory with a copy that changes the default size of user tasks (cf. bpmn-js/ElementFactory.js at develop · bpmn-io/bpmn-js · GitHub) or add a command interceptor that assigns custom dimensions to newly created user tasks (cf. diagram-js/CommandInterceptor.js at develop · bpmn-io/diagram-js · GitHub).

[Code_Guru]

thanks! in the CustomRenderer i updated the width and height of the element and it worked

element.width = BOX_WIDTH;
element.height = BOX_HEIGHT;

[philippfromme]

The renderer is not the right place to assign an element’s width and height. You’re also monkey-patching these properties. The proper way of assigning these with minimal changes is a command interceptor.

[Code_Guru]

In the CustomCommandInterceptor, by using

this.preExecuted(["shape.create"],({context}).....
const { shape } = context;
shape.width = BOX_WIDTH

i updated the width and it worked for new elements, but for this existing elements i added in CustomRenderer. is there any other way around for existing elements?