Adjust ResizeMarkers


if possible i would like to remove some of the resize markers for elements.
As an example:

I would like to remove the 3 markers, surrounded by red color. I tried to debug the event, however I get into nearly endless circle of other events.
It seems like diagram-js sets these markers somewhere in SelectionVisuals.js?

Could you guide me in overwriting this behaviour? For example, can i create a custom Class or adjust some method in order to show only certain markers for some elements?

Thank you very much for your help!

The resize handles are drawn in the resizeHandles service. So would need to create a replacement for this module to adjust it to your needs. That should work like any other override by creating a custom resizeHandles and include it via additionalModules.

This example works for me, simply adjusting the directions and extending the existing resize handles module

import { default as DefaultResizeHandles } from "diagram-js/lib/features/resize/ResizeHandles";

// updating the directions here, removed "w", "nw" and "sw"
const directions = ["n", "s", "e", "ne", "se"];

export default class ResizeHandles extends DefaultResizeHandles {
  constructor(eventBus, canvas, selection, resize) {
    super(eventBus, canvas, selection, resize);

    this._resize = resize;

  // extending the default method
  addResizer(shape) {
    const self = this;

    const resize = this._resize;

    if (!resize.canResize({ shape: shape })) {

    directions.forEach(function (direction) {
      self.createResizer(shape, direction);

ResizeHandles.$inject = ["eventBus", "canvas", "selection", "resize"];

Source: bpmn custom resizer - CodeSandbox

1 Like

Thank you very much! Works great!