Skip to content

Built-in configuration for auto-centering diagrams with palette space reservation #2342

@gaosen1

Description

@gaosen1

Is your feature request related to a problem? Please describe.

Yes, I'm always frustrated when I open a BPMN diagram and parts of the workflow are hidden behind the left-side palette/toolbar. The canvas.zoom('fit-viewport') centers the diagram within the entire container, but doesn't account for the palette space, forcing users to manually drag and zoom to see the complete diagram.
Current behavior:

  • Diagram is centered in the full container (including palette area)
  • Left-side palette overlaps with workflow content
  • Users must manually adjust view to see hidden elements
  • Poor initial user experience

Describe the solution you'd like

Built-in configuration option that automatically reserves space for the left-side palette when using fit-viewport:

const modeler = new BpmnModeler({
  container: containerRef.current,
  // New configuration
  autoFit: {
    enabled: true,
    paletteSpace: 'auto', // automatically detect palette width
    margin: 20 // additional buffer space
  }
});

Expected behavior:

  • canvas.zoom('fit-viewport') automatically detects palette width
  • Diagram is centered within the available space (container minus palette)
  • No content overlap with the palette
  • Immediate optimal view without manual adjustment

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.
Current workaround (implemented):

// 1. Temporarily adjust container width
container.style.width = `calc(100% - ${paletteWidth + 20}px)`;

// 2. Apply fit-viewport with adjusted container
canvas.zoom('fit-viewport');

// 3. Restore container and fine-tune position
container.style.width = originalWidth;
const viewbox = canvas.viewbox();
viewbox.x = viewbox.x - paletteWidth - 100;
canvas.viewbox(viewbox);

Additional context

Environment:

  • BPMN.js version: 18.4.0
  • Browser: macos chrome version 139.0.7258.128

My application is like this, and the left-side palette overlaps with workflow content:

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    backlogQueued in backlogenhancementNew feature or requestpr welcomeWe rely on a community contribution to improve this.spring cleaningCould be cleaned up one day

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions