mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
[kbn-grid-layout] Allow panel to extend past viewport on resize (#208828)
Closes https://github.com/elastic/kibana/issues/208736
## Summary
This PR ensures that serverless / solution view Dashboards can be
resized to the full width.
The problem was, we had logic for "locking" the edge of the panel so
that it could not be resized past the width of the grid - however, we
did this by manually calculating the width of the grid via the
`runtimeSettings`, which did not account for the left-navigation added
on solution views (i.e. it relied on the left position of the grid being
zero in order to work). I **could** have fixed this while keeping the
original behaviour by locking it to the right edge of the grid -
however, this would require a call to `getBoundingRect()` on the panel's
parent component, which could be a slowdown point. See
bc96225a67
for this solution, if you're
curious.
Ultimately, we decided that the "max" width behaviour wasn't worth this
extra complexity, and so we are now exclusively using the mouse position
for calculating the width of the resized panel - therefore, this will
work regardless of whether the grid element has something to the left of
it (such as serverless navigation).
| Before | After |
|--------|--------|
| 
| 
|
**Before**
https://github.com/user-attachments/assets/019c7271-390a-4290-9151-f7ea9a5458b6
**After**
https://github.com/user-attachments/assets/08c38f36-66fe-4d53-9e43-87be99e94db6
### 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)
This commit is contained in:
parent
2cb7bea5f3
commit
a149a1147b
2 changed files with 3 additions and 13 deletions
|
@ -7,34 +7,25 @@
|
|||
* License v3.0 only", or the "Server Side Public License, v 1".
|
||||
*/
|
||||
|
||||
import { PanelInteractionEvent, RuntimeGridSettings } from '../types';
|
||||
import { PanelInteractionEvent } from '../types';
|
||||
import { getPointerPosition } from './sensors';
|
||||
import { UserInteractionEvent } from './types';
|
||||
|
||||
const getGridWidth = (runtimeSettings: RuntimeGridSettings) => {
|
||||
const { columnCount, gutterSize, columnPixelWidth } = runtimeSettings;
|
||||
return (gutterSize + columnPixelWidth) * columnCount + gutterSize * 2;
|
||||
};
|
||||
|
||||
// Calculates the preview rect coordinates for a resized panel
|
||||
export const getResizePreviewRect = ({
|
||||
interactionEvent,
|
||||
pointerPixel,
|
||||
runtimeSettings,
|
||||
}: {
|
||||
pointerPixel: { clientX: number; clientY: number };
|
||||
interactionEvent: PanelInteractionEvent;
|
||||
runtimeSettings: RuntimeGridSettings;
|
||||
}) => {
|
||||
const panelRect = interactionEvent.panelDiv.getBoundingClientRect();
|
||||
|
||||
return {
|
||||
left: panelRect.left,
|
||||
top: panelRect.top,
|
||||
bottom: pointerPixel.clientY - interactionEvent.pointerOffsets.bottom,
|
||||
right: Math.min(
|
||||
pointerPixel.clientX - interactionEvent.pointerOffsets.right,
|
||||
getGridWidth(runtimeSettings)
|
||||
),
|
||||
right: pointerPixel.clientX - interactionEvent.pointerOffsets.right,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -88,7 +88,6 @@ export const moveAction = (
|
|||
? getResizePreviewRect({
|
||||
interactionEvent,
|
||||
pointerPixel,
|
||||
runtimeSettings,
|
||||
})
|
||||
: getDragPreviewRect({
|
||||
interactionEvent,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue