Skip to content

STCOM-1533 Improve performance on pane resizing. #2581

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
JohnC-80 wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

STCOM-1533 Improve performance on pane resizing. #2581

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
143c793
remove costly dom-measuring in pane resize, apply memoization in Pane…
JohnC-80 Aug 14, 2026
a002ff6
remove unrelated changes to Paneset
JohnC-80 Aug 14, 2026
b3f7088
put the files back
JohnC-80 Aug 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 39 additions & 30 deletions lib/Paneset/PaneResizeContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useRef, useEffect, useCallback } from 'react';
import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import cloneDeep from 'lodash/cloneDeep';
import isEqual from 'lodash/isEqual';
Expand All @@ -13,7 +13,7 @@
const [cursorX, setCursorX] = useState(0);
const [handles, setHandles] = useState([]);
const [activeHandle, setActiveHandle] = useState(null);
const [update, setUpdate] = useState(0); // eslint-disable-line no-unused-vars
const [update, setUpdate] = useState(0);
const [blocking, setBlocking] = useState(null);
let container = useRef();
if (resizeContainerRef) {
Expand Down Expand Up @@ -142,9 +142,8 @@
document.removeEventListener('mousemove', updateCursor);
document.removeEventListener('mouseup', handleMouseUp);
document.body.style.userSelect = 'auto';
document.body.style.webkitUserSelect = 'auto';
document.body.style.msUserSelect = 'auto';
document.body.style.msUserSelect = 'auto';
document.body.style.mozUserSelect = 'auto';
setDragging(false);
}, [updateCursor]);

Expand All @@ -158,7 +157,6 @@
document.addEventListener('mousemove', updateCursor);
document.addEventListener('mouseup', handleMouseUp);
document.body.style.userSelect = 'none';
document.body.style.webkitUserSelect = 'none';
document.body.style.msUserSelect = 'none';
document.body.style.mozUserSelect = 'none';
}, [handleMouseUp, handles, updateCursor]);
Expand All @@ -184,37 +182,48 @@
});
};

const renderHandles = useCallback(() => {
// Reads the DOM (forces layout) to locate each handle. Must only rerun when the handle set,
// container/window size, or blocking state changes - never merely because cursorX/dragging/
// activeHandle changed during a drag, since handles don't move until the drag ends.
const computeHandlePositions = useCallback(() => {
handleData.current = [];
const handleElements = handles.map((h) => {
return handles.map((h) => {
const rect = h.getRef()?.current?.getBoundingClientRect();
if (rect) {
if (rect.left === 0) {
handleData.current.push({ id: h.id, elementId: h.elementId, x: 0, y: 50 });
return false;
}
if (!rect) return null;

if (!containerRect.current) {
containerRect.current = container.current?.getBoundingClientRect();
}
const newLeft = rect.left - (containerRect.current ? containerRect.current.left : 0);
const top = rect.top - (containerRect.current ? containerRect.current.top : 0);
handleData.current.push({ id: h.id, elementId: h.elementId, x: newLeft, y: top });
return (
<PaneResizeHandle
key={h.id}
id={h.id}
xpos={newLeft - 3}
active={(activeHandle && h.id === activeHandle.id)}
onMouseDown={handleHandleMouseDown}
/>
);
if (rect.left === 0) {
handleData.current.push({ id: h.id, elementId: h.elementId, x: 0, y: 50 });
return { id: h.id, render: false };
}

if (!containerRect.current) {
containerRect.current = container.current?.getBoundingClientRect();
}
return null;
const newLeft = rect.left - (containerRect.current ? containerRect.current.left : 0);
const top = rect.top - (containerRect.current ? containerRect.current.top : 0);
handleData.current.push({ id: h.id, elementId: h.elementId, x: newLeft, y: top });
return { id: h.id, x: newLeft, render: true };
});
}, [handles]); // eslint-disable-line react-hooks/exhaustive-deps

const handlePositions = useMemo(
() => (blocking ? [] : computeHandlePositions()),
[computeHandlePositions, update, blocking]
);

return handleElements;
}, [activeHandle, handleHandleMouseDown, handles]);
// No DOM reads here, so this is cheap to rerun on every render (mousedown/mousemove/mouseup).
const renderHandles = () => handlePositions.map((pos) => {
if (!pos || !pos.render) return null;

Check warning on line 216 in lib/Paneset/PaneResizeContainer.js

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Prefer using an optional chain expression instead, as it's more concise and easier to read. 


See more on https://sonarcloud.io/project/issues?id=org.folio%3Astripes-components&issues=AaABRTLFMVng8x0Wf-Ym&open=AaABRTLFMVng8x0Wf-Ym&pullRequest=2581
return (
<PaneResizeHandle
Comment on lines +216 to +218

@zburke zburke Aug 14, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe a stronger way to write this is to check for the conditions you need, else return null?

if (pos?.render) { return <PaneResizeHandle ...> }
return null;

or

return (pos?.render) ? <PaneResizeHandle ...> : null;

key={pos.id}
id={pos.id}
xpos={pos.x - 3}
active={(activeHandle && pos.id === activeHandle.id)}
onMouseDown={handleHandleMouseDown}
/>
);
});

// this is the equivalent of `forceUpdate` for functional components.
const updateHandle = () => {
Expand Down
28 changes: 1 addition & 27 deletions lib/Paneset/Paneset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,33 +374,7 @@ class Paneset extends React.Component {
]);
}

setStyle = () => {
if (this.isThisMounted()) {
const {
paneset,
isRoot
} = this.props;

// for nested, non-root panesets, we resize their element to the edge of the screen.
// this resolves a cropping behavior (impetus for STCOM-953) and allows
// paneset to accurately resize its children (overflow: hidden)
if (paneset && !isRoot) {
const containerBounds = this.container.current?.getBoundingClientRect();
if (containerBounds.right < window.offsetWidth) {
this.setState((curState) => {
const {
left, right
} = containerBounds;
const newStyle = { flex: `0 0 ${right - left}px` };
return {
changeType: 'nested-resize-end',
style: { ...curState.style, ...newStyle }
};
});
}
}
}
}
setStyle = () => {}

resizePanes = (panes, widths) => {
if (widths !== null) {
Expand Down
Loading