interactionStart('drag', e)}
- onMouseUp={(e) => interactionStart('drop', e)}
- >
-
-
- {/* Resize handle */}
- interactionStart('resize', e)}
- onMouseUp={(e) => interactionStart('drop', e)}
- css={css`
- right: 0;
- bottom: 0;
- opacity: 0;
- margin: -2px;
- position: absolute;
- width: ${euiThemeVars.euiSizeL};
- height: ${euiThemeVars.euiSizeL};
- transition: opacity 0.2s, border 0.2s;
- border-radius: 7px 0 7px 0;
- border-bottom: 2px solid ${euiThemeVars.euiColorSuccess};
- border-right: 2px solid ${euiThemeVars.euiColorSuccess};
- :hover {
- background-color: ${transparentize(euiThemeVars.euiColorSuccess, 0.05)};
- cursor: se-resize;
+ /** Set initial styles based on state at mount to prevent styles from "blipping" */
+ const initialStyles = useMemo(() => {
+ const initialPanel = gridLayoutStateManager.gridLayout$.getValue()[rowIndex].panels[panelId];
+ return css`
+ grid-column-start: ${initialPanel.column + 1};
+ grid-column-end: ${initialPanel.column + 1 + initialPanel.width};
+ grid-row-start: ${initialPanel.row + 1};
+ grid-row-end: ${initialPanel.row + 1 + initialPanel.height};
+ `;
+ }, [gridLayoutStateManager, rowIndex, panelId]);
+
+ useEffect(
+ () => {
+ /** Update the styles of the panel via a subscription to prevent re-renders */
+ const styleSubscription = combineLatest([
+ gridLayoutStateManager.activePanel$,
+ gridLayoutStateManager.gridLayout$,
+ gridLayoutStateManager.runtimeSettings$,
+ ])
+ .pipe(skip(1)) // skip the first emit because the `initialStyles` will take care of it
+ .subscribe(([activePanel, gridLayout, runtimeSettings]) => {
+ const ref = gridLayoutStateManager.panelRefs.current[rowIndex][panelId];
+ const panel = gridLayout[rowIndex].panels[panelId];
+ if (!ref || !panel) return;
+
+ const currentInteractionEvent = gridLayoutStateManager.interactionEvent$.getValue();
+ if (panelId === activePanel?.id) {
+ // if the current panel is active, give it fixed positioning depending on the interaction event
+ const { position: draggingPosition } = activePanel;
+
+ ref.style.zIndex = `${euiThemeVars.euiZModal}`;
+ if (currentInteractionEvent?.type === 'resize') {
+ // if the current panel is being resized, ensure it is not shrunk past the size of a single cell
+ ref.style.width = `${Math.max(
+ draggingPosition.right - draggingPosition.left,
+ runtimeSettings.columnPixelWidth
+ )}px`;
+ ref.style.height = `${Math.max(
+ draggingPosition.bottom - draggingPosition.top,
+ runtimeSettings.rowHeight
+ )}px`;
+
+ // undo any "lock to grid" styles **except** for the top left corner, which stays locked
+ ref.style.gridColumnStart = `${panel.column + 1}`;
+ ref.style.gridRowStart = `${panel.row + 1}`;
+ ref.style.gridColumnEnd = ``;
+ ref.style.gridRowEnd = ``;
+ } else {
+ // if the current panel is being dragged, render it with a fixed position + size
+ ref.style.position = 'fixed';
+ ref.style.left = `${draggingPosition.left}px`;
+ ref.style.top = `${draggingPosition.top}px`;
+ ref.style.width = `${draggingPosition.right - draggingPosition.left}px`;
+ ref.style.height = `${draggingPosition.bottom - draggingPosition.top}px`;
+
+ // undo any "lock to grid" styles
+ ref.style.gridColumnStart = ``;
+ ref.style.gridRowStart = ``;
+ ref.style.gridColumnEnd = ``;
+ ref.style.gridRowEnd = ``;
+ }
+ } else {
+ ref.style.zIndex = '0';
+
+ // if the panel is not being dragged and/or resized, undo any fixed position styles
+ ref.style.position = '';
+ ref.style.left = ``;
+ ref.style.top = ``;
+ ref.style.width = ``;
+ ref.style.height = ``;
+
+ // and render the panel locked to the grid
+ ref.style.gridColumnStart = `${panel.column + 1}`;
+ ref.style.gridColumnEnd = `${panel.column + 1 + panel.width}`;
+ ref.style.gridRowStart = `${panel.row + 1}`;
+ ref.style.gridRowEnd = `${panel.row + 1 + panel.height}`;
}
- `}
- />
-
{
+ styleSubscription.unsubscribe();
+ };
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ []
+ );
+
+ return (
+
+
- {renderPanelContents(panelData.id)}
-
-
-
- );
-});
+ {/* drag handle */}
+
interactionStart('drag', e)}
+ onMouseUp={(e) => interactionStart('drop', e)}
+ >
+
+
+ {/* Resize handle */}
+
interactionStart('resize', e)}
+ onMouseUp={(e) => interactionStart('drop', e)}
+ css={css`
+ right: 0;
+ bottom: 0;
+ opacity: 0;
+ margin: -2px;
+ position: absolute;
+ width: ${euiThemeVars.euiSizeL};
+ height: ${euiThemeVars.euiSizeL};
+ transition: opacity 0.2s, border 0.2s;
+ border-radius: 7px 0 7px 0;
+ border-bottom: 2px solid ${euiThemeVars.euiColorSuccess};
+ border-right: 2px solid ${euiThemeVars.euiColorSuccess};
+ :hover {
+ background-color: ${transparentize(euiThemeVars.euiColorSuccess, 0.05)};
+ cursor: se-resize;
+ }
+ `}
+ />
+
+ {renderPanelContents(panelId)}
+
+
+
+ );
+ }
+);
diff --git a/packages/kbn-grid-layout/grid/grid_row.tsx b/packages/kbn-grid-layout/grid/grid_row.tsx
index 917f661c91740..e797cd570550a 100644
--- a/packages/kbn-grid-layout/grid/grid_row.tsx
+++ b/packages/kbn-grid-layout/grid/grid_row.tsx
@@ -7,41 +7,23 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/
-import React, { forwardRef, useMemo, useRef } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { combineLatest, map, pairwise, skip } from 'rxjs';
import { EuiButtonIcon, EuiFlexGroup, EuiSpacer, EuiTitle, transparentize } from '@elastic/eui';
import { css } from '@emotion/react';
import { i18n } from '@kbn/i18n';
import { euiThemeVars } from '@kbn/ui-theme';
-import { useStateFromPublishingSubject } from '@kbn/presentation-publishing';
+import { DragPreview } from './drag_preview';
import { GridPanel } from './grid_panel';
-import {
- GridLayoutStateManager,
- GridRowData,
- PanelInteractionEvent,
- RuntimeGridSettings,
-} from './types';
-
-const gridColor = transparentize(euiThemeVars.euiColorSuccess, 0.2);
-const getGridBackgroundCSS = (settings: RuntimeGridSettings) => {
- const { gutterSize, columnPixelWidth, rowHeight } = settings;
- return css`
- background-position: top -${gutterSize / 2}px left -${gutterSize / 2}px;
- background-size: ${columnPixelWidth + gutterSize}px ${rowHeight + gutterSize}px;
- background-image: linear-gradient(to right, ${gridColor} 1px, transparent 1px),
- linear-gradient(to bottom, ${gridColor} 1px, transparent 1px);
- `;
-};
+import { GridLayoutStateManager, GridRowData, PanelInteractionEvent } from './types';
export const GridRow = forwardRef<
HTMLDivElement,
{
rowIndex: number;
- rowData: GridRowData;
toggleIsCollapsed: () => void;
- targetRowIndex: number | undefined;
- runtimeSettings: RuntimeGridSettings;
renderPanelContents: (panelId: string) => React.ReactNode;
setInteractionEvent: (interactionData?: PanelInteractionEvent) => void;
gridLayoutStateManager: GridLayoutStateManager;
@@ -49,10 +31,7 @@ export const GridRow = forwardRef<
>(
(
{
- rowData,
rowIndex,
- targetRowIndex,
- runtimeSettings,
toggleIsCollapsed,
renderPanelContents,
setInteractionEvent,
@@ -60,19 +39,122 @@ export const GridRow = forwardRef<
},
gridRef
) => {
- const dragPreviewRef = useRef
(null);
- const activePanel = useStateFromPublishingSubject(gridLayoutStateManager.activePanel$);
+ const currentRow = gridLayoutStateManager.gridLayout$.value[rowIndex];
+ const [panelIds, setPanelIds] = useState(Object.keys(currentRow.panels));
+ const [rowTitle, setRowTitle] = useState(currentRow.title);
+ const [isCollapsed, setIsCollapsed] = useState(currentRow.isCollapsed);
- const { gutterSize, columnCount, rowHeight } = runtimeSettings;
- const isGridTargeted = activePanel?.id && targetRowIndex === rowIndex;
+ const getRowCount = useCallback(
+ (row: GridRowData) => {
+ const maxRow = Object.values(row.panels).reduce((acc, panel) => {
+ return Math.max(acc, panel.row + panel.height);
+ }, 0);
+ return maxRow || 1;
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [rowIndex]
+ );
+
+ /** Set initial styles based on state at mount to prevent styles from "blipping" */
+ const initialStyles = useMemo(() => {
+ const initialRow = gridLayoutStateManager.gridLayout$.getValue()[rowIndex];
+ const runtimeSettings = gridLayoutStateManager.runtimeSettings$.getValue();
+ const { gutterSize, columnCount, rowHeight } = runtimeSettings;
+
+ return css`
+ gap: ${gutterSize}px;
+ grid-template-columns: repeat(
+ ${columnCount},
+ calc((100% - ${gutterSize * (columnCount - 1)}px) / ${columnCount})
+ );
+ grid-template-rows: repeat(${getRowCount(initialRow)}, ${rowHeight}px);
+ `;
+ }, [gridLayoutStateManager, getRowCount, rowIndex]);
+
+ useEffect(
+ () => {
+ /** Update the styles of the grid row via a subscription to prevent re-renders */
+ const styleSubscription = combineLatest([
+ gridLayoutStateManager.interactionEvent$,
+ gridLayoutStateManager.gridLayout$,
+ gridLayoutStateManager.runtimeSettings$,
+ ])
+ .pipe(skip(1)) // skip the first emit because the `initialStyles` will take care of it
+ .subscribe(([interactionEvent, gridLayout, runtimeSettings]) => {
+ const rowRef = gridLayoutStateManager.rowRefs.current[rowIndex];
+ if (!rowRef) return;
+
+ const { gutterSize, rowHeight, columnPixelWidth } = runtimeSettings;
- // calculate row count based on the number of rows needed to fit all panels
- const rowCount = useMemo(() => {
- const maxRow = Object.values(rowData.panels).reduce((acc, panel) => {
- return Math.max(acc, panel.row + panel.height);
- }, 0);
- return maxRow || 1;
- }, [rowData]);
+ rowRef.style.gridTemplateRows = `repeat(${getRowCount(
+ gridLayout[rowIndex]
+ )}, ${rowHeight}px)`;
+
+ const targetRow = interactionEvent?.targetRowIndex;
+ if (rowIndex === targetRow && interactionEvent?.type !== 'drop') {
+ // apply "targetted row" styles
+ const gridColor = transparentize(euiThemeVars.euiColorSuccess, 0.2);
+ rowRef.style.backgroundPosition = `top -${gutterSize / 2}px left -${
+ gutterSize / 2
+ }px`;
+ rowRef.style.backgroundSize = ` ${columnPixelWidth + gutterSize}px ${
+ rowHeight + gutterSize
+ }px`;
+ rowRef.style.backgroundImage = `linear-gradient(to right, ${gridColor} 1px, transparent 1px),
+ linear-gradient(to bottom, ${gridColor} 1px, transparent 1px)`;
+ rowRef.style.backgroundColor = `${transparentize(
+ euiThemeVars.euiColorSuccess,
+ 0.05
+ )}`;
+ } else {
+ // undo any "targetted row" styles
+ rowRef.style.backgroundPosition = ``;
+ rowRef.style.backgroundSize = ``;
+ rowRef.style.backgroundImage = ``;
+ rowRef.style.backgroundColor = `transparent`;
+ }
+ });
+
+ /**
+ * The things that should trigger a re-render are title, collapsed state, and panel ids - panel positions
+ * are being controlled via CSS styles, so they do not need to trigger a re-render. This subscription ensures
+ * that the row will re-render when one of those three things changes.
+ */
+ const rowStateSubscription = gridLayoutStateManager.gridLayout$
+ .pipe(
+ skip(1), // we are initializing all row state with a value, so skip the initial emit
+ map((gridLayout) => {
+ return {
+ title: gridLayout[rowIndex].title,
+ isCollapsed: gridLayout[rowIndex].isCollapsed,
+ panelIds: Object.keys(gridLayout[rowIndex].panels),
+ };
+ }),
+ pairwise()
+ )
+ .subscribe(([oldRowData, newRowData]) => {
+ if (oldRowData.title !== newRowData.title) setRowTitle(newRowData.title);
+ if (oldRowData.isCollapsed !== newRowData.isCollapsed)
+ setIsCollapsed(newRowData.isCollapsed);
+ if (
+ oldRowData.panelIds.length !== newRowData.panelIds.length ||
+ !(
+ oldRowData.panelIds.every((p) => newRowData.panelIds.includes(p)) &&
+ newRowData.panelIds.every((p) => oldRowData.panelIds.includes(p))
+ )
+ ) {
+ setPanelIds(newRowData.panelIds);
+ }
+ });
+
+ return () => {
+ styleSubscription.unsubscribe();
+ rowStateSubscription.unsubscribe();
+ };
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [rowIndex]
+ );
return (
<>
@@ -85,51 +167,43 @@ export const GridRow = forwardRef<
aria-label={i18n.translate('kbnGridLayout.row.toggleCollapse', {
defaultMessage: 'Toggle collapse',
})}
- iconType={rowData.isCollapsed ? 'arrowRight' : 'arrowDown'}
+ iconType={isCollapsed ? 'arrowRight' : 'arrowDown'}
onClick={toggleIsCollapsed}
/>
- {rowData.title}
+ {rowTitle}
)}
- {!rowData.isCollapsed && (
+ {!isCollapsed && (
- {Object.values(rowData.panels).map((panelData) => (
+ {panelIds.map((panelId) => (
{
e.preventDefault();
e.stopPropagation();
- const panelRef = gridLayoutStateManager.panelRefs.current[rowIndex][panelData.id];
+ const panelRef = gridLayoutStateManager.panelRefs.current[rowIndex][panelId];
if (!panelRef) return;
const panelRect = panelRef.getBoundingClientRect();
setInteractionEvent({
type,
- id: panelData.id,
+ id: panelId,
panelDiv: panelRef,
targetRowIndex: rowIndex,
mouseOffsets: {
@@ -144,32 +218,12 @@ export const GridRow = forwardRef<
if (!gridLayoutStateManager.panelRefs.current[rowIndex]) {
gridLayoutStateManager.panelRefs.current[rowIndex] = {};
}
- gridLayoutStateManager.panelRefs.current[rowIndex][panelData.id] = element;
+ gridLayoutStateManager.panelRefs.current[rowIndex][panelId] = element;
}}
/>
))}
- {/* render the drag preview if this row is currently being targetted */}
- {isGridTargeted && (
-
- )}
+