Restrict BPMN modeler within window

Developers
1

Hi Team,

I have created the bpmn modeler with scroll bar. However when i tried to insert the diagram in workspace it is scrollable beyond window screen. How to restrict the diagram to not to move upwards at the scroll bar initial position. image|1600x645

2

Do you mind sharing a screenshot?

3

flowchart

You see the minimum position of scroll bar at the top position. However the flow chart draggable above container

4

Have you made yourself familiar with our toolkits? The canvas is infinite by default. You’d need to restrict it.

5

Thanks philip. It seems the position is working on degrees. Its too difficult to find out the position to restrict it. Kindly confirm how to restrict within visible area instead of infinite in canvas. It will be helpful if you share some idea on code.

I could see this code

  • canvas.viewbox({ x: 100, y: 100, width: 500, height: 500 })
6

Hi Philip,

Any update on this. Expecting your response.

7

What have you tried already to achieve this?

8

Hi Philippe,

I have tried to restrict the position to avoid overflow from container in dragging.js. But nothing worked.

9

Hi Venkatesh,

I am facing the same issue, did you find the solution?

10

This is my attempt to a solution for this: StackBlitz However this is not working well when scale is changed because it has a lag and the mouse gets stuck.

import Canvas, { CanvasConfig } from 'diagram-js/lib/core/Canvas';
import ElementRegistry from 'diagram-js/lib/core/ElementRegistry';
import EventBus from 'diagram-js/lib/core/EventBus';
import GraphicsFactory from 'diagram-js/lib/core/GraphicsFactory';
import { Point, ScrollDelta } from 'diagram-js/lib/util/Types';

export default class CustomCanvas extends Canvas {
  static override $inject = ['config.canvas', 'eventBus', 'graphicsFactory', 'elementRegistry'];

  //eslint-disable-next-line @typescript-eslint/no-explicit-any
  constructor(
    config: CanvasConfig | null,
    eventBus: EventBus,
    graphicsFactory: GraphicsFactory,
    elementRegistry: ElementRegistry,
  ) {
    super(config, eventBus, graphicsFactory, elementRegistry);
  }

  override scroll(delta?: ScrollDelta): Point {
    const viewbox = this.viewbox();
    const scale = viewbox.scale || 1; // Ensure scale is not undefined or 0

    if (delta) {
      const { dx, dy } = delta;

      // Scale the deltas to match the current scale
      const scaledDx = (dx || 0) / scale;
      const scaledDy = (dy || 0) / scale;

      const nextY = viewbox.y - scaledDy;
      const nextX = viewbox.x - scaledDx;

      // Adjust limits for the scaled viewbox
      const minX = viewbox.inner.width + viewbox.inner.x - viewbox.outer.width / scale;
      const minY = viewbox.inner.height + viewbox.inner.y - viewbox.outer.height / scale;
      const maxX = viewbox.inner.x;
      const maxY = viewbox.inner.y;

      // Check if the next position is within bounds
      if (nextY < maxY && nextX < maxX && nextX > minX && nextY > minY) {
        return super.scroll({ dx: scaledDx, dy: scaledDy });
      }
    }

    return { x: viewbox.x, y: viewbox.y }; // Return the current position if out of bounds
  }
}

    this.modeler = new Modeler({
      container: this.bpmnModeler.nativeElement,
      additionalModules: [
        {
          __init__: ['customRenderer','resizeTasks'],
          customRenderer: ['type', CustomRenderer],
          resizeTasks: ['type', CustomRules],
          canvas: ['type', CustomCanvas],
        },
      ],
      moddleExtensions: MODDLE_EXTENSIONS,
    });

Can anyone please suggest an improvement?

11

Please do not necrobump old topics. Instead link to this thread from new topic.