Adjust ResizeMarkers

Developers
1

Hi,

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

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!

2

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.

3

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 })) {
      return;
    }

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

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

Source: bpmn custom resizer - CodeSandbox

1 Like
4

Thank you very much! Works great!