Skip to content

Commit

Permalink
[kbn-grid-layout] Disable pointer events on drag + resize (elastic#20…
Browse files Browse the repository at this point in the history
…8647)

## Summary

This PR greatly improves the performance of `kbn-grid-layout` on drag +
resize by disabling pointer events during these actions. This is
especially evident when dragging over panels that have their own mouse
event listeners.

| Before | After |
|--------|--------|
|
![image](https://github.com/user-attachments/assets/efea4bd0-e950-4d71-8485-f5f123240e5b)
|
![image](https://github.com/user-attachments/assets/15b044b2-521c-4bf5-a6cb-673c3a2affe4)
|
|
![image](https://github.com/user-attachments/assets/7daa6c96-ff38-4336-beb8-e7378445e589)
|
![image](https://github.com/user-attachments/assets/37bb55c8-e757-4311-ab25-cb0c4cd18f58)
|
|
![image](https://github.com/user-attachments/assets/1fbe721d-690f-4a57-aaab-c07f575e5d41)
|
![image](https://github.com/user-attachments/assets/6bdfdd40-9e58-4750-b152-cec2b12065fc)
|

### Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
  • Loading branch information
Heenawter authored Feb 3, 2025
1 parent af1fdec commit 6cc788c
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,11 @@ export const GridHeightSmoother = ({

if (!interactionEvent) {
smoothHeightRef.current.style.minHeight = `${dimensions.height}px`;
smoothHeightRef.current.style.userSelect = 'auto';
return;
}

smoothHeightRef.current.style.minHeight = `${
smoothHeightRef.current.getBoundingClientRect().height
}px`;
smoothHeightRef.current.style.userSelect = 'none';
});

return () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,12 @@ export const GridLayout = ({
css={css`
padding: calc(var(--kbnGridGutterSize) * 1px);
// disable pointer events and user select on drag + resize
&:has(.kbnGridPanel--active) {
user-select: none;
pointer-events: none;
}
&:has(.kbnGridPanel--expanded) {
${expandedPanelStyles}
}
Expand Down

0 comments on commit 6cc788c

Please sign in to comment.