Repository navigation
Not getting any events to handle resize #2889
Description
This is a followup to #2855. For that question, adding the "reisze" handlers worked as suggested. However, I have a new situation where I can't get any resize events.
First off: Having a graceful way to handle resize would be a very welcome addition to Mithril. The need isn't uncommon.
The code below shows exactly what I am doing. I have a left, right, and bottom pane for a report, with moveable size div in between the left and right panes. Per #2855 I tried every combination of addEventListener I could think (window vs. container, parent vs. left pane), but when resizing no events (view, onbeforeupdate, onupdate) are received. As a result, the left pane content never resizes.
How can I make this work?
Thanks!
export const Report = (): IComponent => ({
tag: "Report",
oncreate: () => {
// const container = document.getElementById("left-panel");
// if (!container) return;
// container.addEventListener("resize", m.redraw);
window.addEventListener("resize", m.redraw);
},
onremove: () => {
// const container = document.getElementById("left-panel");
// if (!container) return;
// container.removeEventListener("resize", m.redraw);
window.removeEventListener("resize", m.redraw);
},
oninit: (v: Vnode<IReportAttrs, IReportState>) => {
v.state.isResizing = false;
v.state.lastX = 0;
},
onbeforeupdate: (v: Vnode<IReportAttrs, IReportState>) => {
// init divider listener
const divider = document.getElementById("divider") as HTMLElement;
const leftPanel = document.querySelector(".left-panel") as HTMLElement;
const rightPanel = document.querySelector(".right-panel") as HTMLElement;
v.state.isResizing = false;
v.state.lastX = 0;
const resizeHandler = (event: Event): void => {
if (!v.state.isResizing) return;
const e = event as MouseEvent;
const deltaX = e.clientX - v.state.lastX;
const newLeftWidth = leftPanel.offsetWidth + deltaX;
const newRightWidth = rightPanel.offsetWidth - deltaX;
leftPanel.style.width = `${newLeftWidth}px`;
rightPanel.style.width = `${newRightWidth}px`;
v.state.lastX = e.clientX;
};
const stopResizeHandler = (): void => {
v.state.isResizing = false;
document.removeEventListener("mousemove", resizeHandler);
document.removeEventListener("mouseup", stopResizeHandler);
};
divider.addEventListener("mousedown", (ev: MouseEvent) => {
v.state.isResizing = true;
v.state.lastX = ev.clientX;
document.addEventListener("mousemove", resizeHandler);
document.addEventListener("mouseup", stopResizeHandler);
});
},
view: (v: Vnode<IReportAttrs, IReportState>) => {
return (
<>
<div class="container">
<div class="left-panel" id="left-panel">
<Chart results={v.attrs.results} />
</div>
<div class="resizable-divider" id="divider"></div>
<div class="right-panel">
<Sidebar results={v.attrs.results} />
</div>
</div>
<div>
<Insights />
</div>
</>
);
},
});
Activity
dead-claudia commentedon Mar 28, 2024
Could you provide a Flems/Codepen/etc. demonstrating this?
Also, your
onbeforeupdatehere is (severely) leaking listeners, by the way. That method is called on every redraw and the duplicated listeners could be behind some of your problems.