Make property panel resizeable
See original GitHub issueWe 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:
Issue Analytics
- State:
- Created 2 years ago
- Comments:8 (5 by maintainers)
Top Results From Across the Web
Resizing the ticket properties panel
Expanded ticket footers are required to make the ticket properties panel resizable. See this Announcement for details. Yes -4
Read more >How to make a resizable panel control with Web ...
In this post we're going to build a resizable panel control called wc-split-panel with vanilla web components and no build magic.
Read more >Resize properties panel - Developers
Hi, Is there any solution to make properties-panel resizable so user can increase/decrease width of the panel per needs and preferences?
Read more >CSS resize property
The resize property defines if (and how) an element is resizable by the user. Note: The resize property does not apply to inline...
Read more >resize - CSS: Cascading Style Sheets - MDN Web Docs - Mozilla
The resize CSS property sets whether an element is resizable, and if so, in which directions.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.
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