Vertical Pools and Lanes Modeling

[lisps]

Introduction

Modeling of vertical pools and lanes is a feature request we see once in a while. It is also part of the MIWG test suite, case A.4.1 specifically. While we do not want to promote vertical modeling in general, we should support it under the hood.

Breakdown

• vertical pools and lanes are rendered correctly (Render Vertical Participants and Lanes #2024)
• vertical pools can be created
• vertical pools and lanes can be updated
  • label editing
    • adjust direct editing box
  • resizing
    • adjust minimum dimensions (https://github.com/bpmn-io/bpmn-js/blob/develop/lib/features/modeling/behavior/ResizeBehavior.js)
  • space tool
    • allow resizing empty pools vertically, disallow resizing horizontally (https://github.com/bpmn-io/bpmn-js/blob/develop/lib/features/space-tool/BpmnSpaceTool.js)
    • adjust minimum dimensions (https://github.com/bpmn-io/bpmn-js/blob/develop/lib/features/modeling/behavior/SpaceToolBehavior.js)
  • adding lanes
  • pools can be switched between horizontal and vertical
• vertical modeling is enabled in vertical pools
  • auto-place

---

Referenced in forum.

[nikku]

This is not on our roadmap. If someone wants to contribute --- we accept PRs.

[nikku]

We'll not support vertical collaboration, unless we receive a contribution for it.

Related we may implement proper rendering of vertical pools (#57) some time maybe.

[sombrek]

@nikku I'd like to contribute to this feature.

I think I can implement resizing via drag&drop and using the space tool.
Is that an acceptable scope for an increment?

[nikku]

@sombrek As an initial step I'd suggest you to see what is currently broken, and summarize it here. We can then go ahead and give you pointers where to fix things.

[sombrek]

@nikku Here's a summary of what I've got so far.

• vertical pools and lanes still use the minimum dimensions of horizontal pools
• resizing vertical elements using resize handles causes overlapping elements

Resize Issue Demonstration

I also noticed some existing quirks for horizontal pools and I would like your input on this.

• Black-box pools can be resized in any direction using handles, but the space tool only allows resizing them horizontally. That could be intentional, but I don't know.
• The resize handles use minimum dimensions of 300 x 60 for pools and lanes, while the space tool has a minimum of 300 x 150 for pools. Should vertical elements use the same logic, just switch width and height? Or should pools/lanes have the same dimensions for both tools (if so which should be used)?

I have identified lib/features/modeling/behavior/ResizeBehavior.js, lib/features/modeling/behavior/SpaceToolBehavior.js, and maybe lib/features/modeling/util/LaneUtil.js as startig points for an implementation.

Other areas of work:

• Adding/Splitting should create vertical lanes within vertical lanes
• Deleting vertical lanes
• Placing new tasks/events on the vertical axis when modeling within a vertical pool (is that meant with "Auto-Place" in the description?).

I think full support also needs new icons...

• Icons for adding/splitting lanes vertically
• And, depending on whether you want to expose those elements/features on the UI
  • Vertical pool and black-box pool
    • these could be separate offerings in the create/new elements list
  • Icons to switch from horizontal to vertical pool and vice versa
    • in addition to or as an alternative to the previous item
    • here, we should discuss the scope, e.g. only transform pool/lane but not its content?

... and new translatable texts. In both cases I don't know the extra work that might be required.

[philippfromme]

You've done a good job identifying most aspects of making vertical pools work. As you can see, there are many. I'd suggest starting with the smallest possible increment, which I think would be:

• we only deal with existing vertical pools and lanes and don't want to create new ones for now
• resizing of the pools and lanes works as expected
  • minimum dimensions are set appropriately
  • space tool resizes vertical pools and lanes appropriately

For that, I'd suggest creating a separate issue to track this so this issue can serve as the epic. I've updated the description of this issue to include a full breakdown of everything we have to account for. We can start ticking off these boxes one by one.

What do you think?

[sombrek]

There was a lot of progress regarding this feature.

All tasks in "vertical pools and lanes can be updated" should work now, except for "pools can be switched between horizontal and vertical". There haven't been any UI updates to reflect this feature.

"Vertical modeling is enabled in vertical pools", i.e. auto-place does work. However, it is not perfect yet, due to issue #2127.
Moreover, some minor features were adjusted to consider vertical pools (e.g. hit boxes).

I'm giving this update, because some time may pass until my next contribution. Thanks for all your kind and helpful support.

[barmac]

Thank you for your amazing work on this epic. I updated the top comment according to the progress delivered.

[nikku]

@sombrek Some amazing contributions, indeed, thank you! Will make some users happy 🍰 🥇

[rip222]

@sombrek This is amazing! Looking forward to creating pools and lanes. Been waiting for it for years.

Also what is the progress on these two things and how can I help?

• vertical pools can be created
• vertical pools and lanes can be updated

[sombrek]

@rip222 At the moment there will be no progress from my side.

If you simply want to add a vertical pool to your diagram, I recommend the steps I described in the forum. Once your pool is vertical, most existing features will work as expected.

If you'd like to try implementing more features, here are some starting points.

I'm not 100 % sure, but to create vertical pools via code, you would have to extend the ElementFactory so that you can set the isHorizontal attribute accordingly.

bpmn-js/lib/features/modeling/ElementFactory.js

Lines 337 to 351 in abd8c6c

	ElementFactory.prototype.createParticipantShape = function(attrs) {
	if (!isObject(attrs)) {
	attrs = { isExpanded: attrs };
	}
	attrs = assign({ type: 'bpmn:Participant' }, attrs || {});
	// participants are expanded by default
	if (attrs.isExpanded !== false) {
	attrs.processRef = this._bpmnFactory.create('bpmn:Process');
	}
	return this.createShape(attrs);
	};

To create pools using the modeler, you might have (in addition to the above) create a plugin that provides this feature as an extension of the PaletteProvider. I say plugin, because the maintainers may not want this feature available by default.

Regarding updating: You'd have to write new code that translates horizontal pools and lanes into vertical ones (and vice versa), but not their content (at least not as part of the first iteration). This could be made available in the ContextPadProvider (possibly as a plugin as well).

If you want to pick up any of this, simply create an issue to get in contact with the maintainers. You can see examples of how I did it in some of the linked issues above my previous post.

[nikku]

@sombrek Thanks for the guidance ❤️

@rip222 As a maintainer I fully subscribe to #507 (comment).

Specifically, whether you want to model vertically or horizontally may be a decision that you take upfront (editor setting, or that is inferred from the context; we do not aim to provide you the option to switch back and forth during editing in the out-of-the-box experience.