Sticky lane labels by hechler · Pull Request #2384 · bpmn-io/bpmn-js

hechler · 2026-01-28T10:50:15Z

Proposed Changes

This pull request addresses the following issue: camunda/camunda-modeler#1345

It improves the swimlane overlay by displaying the lane name at the top when the original label scrolls out of the viewport. The overlay is removed once the entire lane leaves the viewport.

Demo:

output.mov

Checklist

Ensure you provide everything we need to review your contribution:

Contribution meets our definition of done
Pull request establishes context
- [] Link to related issue(s), i.e. Closes {LINK_TO_ISSUE} or Related to {LINK_TO_ISSUE}
- Brief textual description of the changes
- Screenshots or short videos showing UI/UX changes
- Steps to try out, i.e. using the @bpmn-io/sr tool

CLAassistant · 2026-01-28T10:50:21Z

All committers have signed the CLA.

Copilot

Pull request overview

This PR implements a sticky lane label feature that displays the swimlane name at the top of the viewport when the original label scrolls out of view, addressing issue #1345.

Changes:

Added a new StickyLaneLabels module that creates overlay labels for BPMN participant pools
Integrated the module into the Modeler's modeling modules
Added CSS styles for the sticky labels with visibility control

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
lib/features/sticky-lane-labels/index.js	Module definition that exports and registers the StickyLaneLabels feature
lib/features/sticky-lane-labels/StickyLaneLabels.js	Core implementation that manages sticky label overlays and viewport position tracking
lib/Modeler.js	Integration of StickyLaneLabelsModule into the modeling modules array
assets/bpmn-js.css	Styling for sticky labels with hidden state support

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-28T11:05:30Z

+
+  // after label edit
+  eventBus.on('element.changed', (e) => {
+    if (e.element.type === 'bpmn:Lane') {


The overlay logic targets 'bpmn:Participant' elements (line 9), but this event handler checks for 'bpmn:Lane'. When a lane is edited, the overlays won't be updated because addOverlays() processes participants, not lanes. This should check for 'bpmn:Participant' instead.

Suggested change

if (e.element.type === 'bpmn:Lane') {

if (e.element.type === 'bpmn:Participant') {

Copilot · 2026-01-28T11:05:30Z

+  /*transform: rotate(270deg);*/
+}
+
+.hidden{


Missing space after class selector. Should be '.hidden {' for consistency with the project's CSS formatting style.

Suggested change

.hidden{

.hidden {

Copilot · 2026-01-28T11:05:31Z

+  border-radius: 4px;
+  pointer-events: none;
+  white-space: nowrap;
+  /*transform: rotate(270deg);*/


Commented-out code should be removed. If this transformation might be needed in the future, document the reasoning in a comment instead of leaving dead code.

Suggested change

/*transform: rotate(270deg);*/

Copilot · 2026-01-28T11:05:31Z

+
+

Multiple consecutive blank lines are unnecessary and should be reduced to a single blank line for cleaner code formatting.

jarekdanielak · 2026-02-04T10:07:35Z

Thanks for the contribution! ❤️

Why did you choose to put the label on top of the element instead of the solution proposed in the issue? In my opinion, it's not intuitive if the label changes its location completely.

It can break sometimes, too. 😉

barmac · 2026-02-04T13:59:28Z

We need you to sign the CLA, otherwise we cannot merge your contribution. Feel free to ping me once it's done.

nikku · 2026-02-04T15:38:26Z

As @jarekdanielak mentioned, this is not an intuitive solution.

I expect the pool label to vanish, when the pool goes out of sight
I expect to be able to see both pool and lane labels

We need to figure if outside or within pool is the right way to do it. I expect inside of pool is more robust, because users can easily "zoom in", as shown below:

In such cases we need to establish context on pool, lane or sub-process.

barmac · 2026-03-11T13:55:26Z

@hechler Feel free to tag me once you address the feedback from #2384 (comment)

timonlazarviadee · 2026-04-29T07:59:20Z

Good morning,

We have changed the contributor internally for this PR. To clarify the needs of the new contributor, I would like to discuss the following points:

Implement a zoom correction to manage text overflow and ensure it stays within the pool.
As a user of bpmn.io, I would expect the lane name (as shown in picture 1) to remain at the edge of the pool as long as the pool is visible. Therefore, I would assume that the red section should move along until either the lane or the pool is out of view.
Additionally, implement the same behavior for the lanes, as you have already mentioned.

picture 1

Thank you!

timonlazarviadee · 2026-07-27T11:43:37Z

The current state of the branch reflects what I was trying to explain in my comment: #2384 (comment)

2026-07-27.13-33-01.mp4

The behavior should remain stable when zooming in or out. Additionally, the overlay should disappear when the corresponding participant or lane is outside the viewport.

2026-07-27.13-33-13.mp4

Even a complex, nested lane structure is represented using the same behavior.

2026-07-27.13-33-40.mp4

hechler added 2 commits January 6, 2026 08:51

Adding Sticky Lane Labels overlay

0a82468

Altering the position of the sticky-lane-labels

101406b

hechler marked this pull request as ready for review January 28, 2026 11:03

Copilot AI review requested due to automatic review settings January 28, 2026 11:03

Copilot AI reviewed Jan 28, 2026

View reviewed changes

barmac added the needs review Review pending label Mar 10, 2026 — with bpmn-io-tasks

barmac marked this pull request as draft March 11, 2026 13:54

bpmn-io-tasks Bot removed the needs review Review pending label Mar 11, 2026

barmac added the backlog Queued in backlog label Mar 11, 2026

timonlazarviadee added 12 commits July 6, 2026 08:26

Merge remote-tracking branch 'origin/develop' into sticky-lane-labels

aa6ccf3

feat: first style changes no zoom logik integrated

9998c79

feat: corrected behavior and styling of overlays

bdd6ac8

feat: first attempt to fix hovering back

9bb3ae4

feat: fixed positioning when zooming in; zooming out doesnt work

a308e4f

feat: fixed positioning when zooming out

122a11c

feat: fixed positioning when zooming max out

f848acc

feat: fixed hierarchy of lanes and sub lanes while zooming

fc41030

refactor: extracted magic numbers and added another test

bf92839

refactor: corrected grammar und removed false test

7731807

Merge remote-tracking branch 'origin/develop' into sticky-lane-labels

7d285e4

Merge remote-tracking branch 'origin/develop' into sticky-lane-labels

5f37e90

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Sticky lane labels - #2384

Sticky lane labels#2384
hechler wants to merge 14 commits into
bpmn-io:developfrom
hechler:sticky-lane-labels

hechler commented Jan 28, 2026 •

edited

Loading

Uh oh!

CLAassistant commented Jan 28, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 28, 2026

Uh oh!

Copilot AI Jan 28, 2026

Uh oh!

Copilot AI Jan 28, 2026

Uh oh!

Copilot AI Jan 28, 2026

Uh oh!

jarekdanielak commented Feb 4, 2026 •

edited

Loading

Uh oh!

barmac commented Feb 4, 2026

Uh oh!

nikku commented Feb 4, 2026

Uh oh!

barmac commented Mar 11, 2026

Uh oh!

timonlazarviadee commented Apr 29, 2026

Uh oh!

timonlazarviadee commented Jul 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

	if (e.element.type === 'bpmn:Lane') {
	if (e.element.type === 'bpmn:Participant') {

Uh oh!

Conversation

hechler commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Checklist

Uh oh!

CLAassistant commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

jarekdanielak commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

barmac commented Feb 4, 2026

Uh oh!

nikku commented Feb 4, 2026

Uh oh!

barmac commented Mar 11, 2026

Uh oh!

timonlazarviadee commented Apr 29, 2026

Uh oh!

timonlazarviadee commented Jul 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

hechler commented Jan 28, 2026 •

edited

Loading

CLAassistant commented Jan 28, 2026 •

edited

Loading

jarekdanielak commented Feb 4, 2026 •

edited

Loading