Not getting any events to handle resize

[EverettMcKay]

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>
      </>
    );
  },
});

[dead-claudia]

Could you provide a Flems/Codepen/etc. demonstrating this?

Also, your onbeforeupdate here 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.