Make property panel resizeable

We have integrated bpmn.io into Drupal’s admin UI and it works great. The property panel is at the right border of the canvas and we’ve set it to a fixed width of 310px with our admin CSS. Some users asked us to make it possible, to either customize that width or even better, to make it resizeable.

The latter has been implemented with very little css and js code:

.bio-properties-panel-container::after {
  content: '';
  background-color: #ccc;
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  cursor: ew-resize;
}

dragAndDropResize = function(panel) {
        const BORDER_SIZE = 4;
        let m_pos;
        function resize(e) {
            const dx = m_pos - e.x;
            m_pos = e.x;
            panel.style.width = (parseInt($(panel).outerWidth()) - BORDER_SIZE + dx) + "px";
        }
        panel.addEventListener("mousedown", function (e) {
            if (e.offsetX < BORDER_SIZE) {
                m_pos = e.x;
                document.addEventListener("mousemove", resize, false);
            }
        }, false);
        document.addEventListener("mouseup", function () {
            document.removeEventListener("mousemove", resize, false);
        }, false);
    }

The function dragAndDropResize needs to be called with the wrapper element of the property panel.

Is that something of general interest to bpmn.io? If so, I’d be glad if you were to include that into the repository.

Here is how that looks like in Drupal:

[jurgenhaas]

Oh, and BTW we proposed our Drupal - BPMN.iO integration for GSoC 2022 and got accepted. Keep fingers crossed that some student will show interest in this project and help us working on this for the next few months. That could be very exciting, too.

[pinussilvestrus]

What I could also imagine, and would be pretty cool, is to contribute a blog post to the bpmn-io blog about your project. We had these integration examples in the past.

/cc @nikku