-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Open
Labels
backlogQueued in backlogQueued in backlogenhancementNew feature or requestNew feature or requestpr welcomeWe rely on a community contribution to improve this.We rely on a community contribution to improve this.spring cleaningCould be cleaned up one dayCould be cleaned up one day
Description
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:

Metadata
Metadata
Assignees
Labels
backlogQueued in backlogQueued in backlogenhancementNew feature or requestNew feature or requestpr welcomeWe rely on a community contribution to improve this.We rely on a community contribution to improve this.spring cleaningCould be cleaned up one dayCould be cleaned up one day