Blog Posts BPMN DMN

Smart Scroll for BPMN/DMN Editors

Blog: Drools & jBPM Blog

Introducing Smart Scroll

Creating and managing BPMN/DMN resources can be a daunting task. Projects can come in many shapes and sizes and with varying levels of complexity. Consequently, being able to locate and identify nodes is of utmost importance. Focusing on easing the load of such demands, we introduce Smart Scroll for BPMN/DMN editors. Available for Kogito v0.16.0, this new feature enables scroll by dragging a canvas element close to a border. With it, node placement becomes a more natural task.

Using Smart Scroll

To activate it, drag any canvas element (e.g., all nodes, bend points, and connection points) closer to the canvas border. Then, while still holding the mouse drag button, cease mouse movement. As a result, scrolling starts in the desired direction. Mind you, due to canvas limitations, scrolling beyond the origin limit (depicted by the dashed lines) is not possible.

First to the right, then to the left – Smart Scroll activation
No scrolling beyond canvas origin limit – Smart Scroll limits
Canvas origin limits depiction in detail - Smart Scroll limits
Canvas origin limits depiction in detail – Smart Scroll limits

Scroll Bar Improvements

By itself, the Smart Scroll already proves valuable. But, to stand out and give that “just right” feeling, other changes were necessary. Next, we discuss them and show a side-by-side comparison of old vs. new to highlight the differences.

The first change is real-time updates. In sum, there is no need to end element drag for the scrollbar to update. It happens as soon as there is drag movement. In the comparison below, pay attention to the scroll bar at the bottom.

Drag end triggers scroll bar update – Scroll bar real-time update (Old Version)
Drag movement triggering scroll bar update – Scroll bar real-time update (New Version)

Next, we have canvas pan synchronization. In short, canvas pan updates the scroll bar. As a result, the scroll bar position and canvas pan are always in sync. Again focus on the scroll bar at the bottom to spot the difference.

The scroll bar is not updated – Pan Synchronization (Old Version)
The scroll bar updates in sync with the canvas pan – Pan Synchronization (New Version)

Lastly, there is canvas size calculation. In brief, besides the existing elements, we also consider the visible area of the canvas. Due to this, there are no awkward jumps after dragging or scrolling.

Noticeable jumps – Canvas size calculation (Old Version)
Smooth updates without jumps – Canvas size calculation (New Version)

Conclusion

In conclusion, high cohesion while maintaining usability was the key goal here. We hope this will help users have a better experience using our editors.

Make sure to check out our blog. You can stay up to date on our releases, new tools and have access to exceptional articles. Thanks for reading. See you next time.

The post Smart Scroll for BPMN/DMN Editors appeared first on KIE Community.

Leave a Comment

Get the BPI Web Feed

Using the HTML code below, you can display this Business Process Incubator page content with the current filter and sorting inside your web site for FREE.

Copy/Paste this code in your website html code:

<iframe src="https://www.businessprocessincubator.com/content/smart-scroll-for-bpmn-dmn-editors/?feed=html" frameborder="0" scrolling="auto" width="100%" height="700">

Customizing your BPI Web Feed

You can click on the Get the BPI Web Feed link on any of our page to create the best possible feed for your site. Here are a few tips to customize your BPI Web Feed.

Customizing the Content Filter
On any page, you can add filter criteria using the MORE FILTERS interface:

Customizing the Content Filter

Customizing the Content Sorting
Clicking on the sorting options will also change the way your BPI Web Feed will be ordered on your site:

Get the BPI Web Feed

Some integration examples

BPMN.org

XPDL.org

×