Remove constants

examples/grid_example/public/app.tsx

@@ -24,18 +24,19 @@ import {
 import { AppMountParameters } from '@kbn/core-application-browser';
 import { CoreStart } from '@kbn/core-lifecycle-browser';
 import { GridLayout, GridLayoutData, isLayoutEqual, type GridLayoutApi } from '@kbn/grid-layout';
-import {
-  DASHBOARD_GRID_COLUMN_COUNT,
-  DASHBOARD_GRID_HEIGHT,
-  DASHBOARD_MARGIN_SIZE,
-} from '@kbn/grid-layout/grid/constants';
 import { getPanelId } from './get_panel_id';
 import {
   clearSerializedGridLayout,
   getSerializedGridLayout,
   setSerializedGridLayout,
 } from './serialized_grid_layout';
 
+const DASHBOARD_MARGIN_SIZE = 8;
+const DASHBOARD_GRID_HEIGHT = 20;
+const DASHBOARD_GRID_COLUMN_COUNT = 48;
+const DEFAULT_PANEL_HEIGHT = 15;
+const DEFAULT_PANEL_WIDTH = DASHBOARD_GRID_COLUMN_COUNT / 2;
+
 export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
   const [layoutKey, setLayoutKey] = useState<string>(uuidv4());
   const [gridLayoutApi, setGridLayoutApi] = useState<GridLayoutApi | null>();
@@ -59,7 +60,11 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
                     coreStart,
                     suggestion: `panel${(gridLayoutApi?.getPanelCount() ?? 0) + 1}`,
                   });
-                  if (panelId) gridLayoutApi?.addPanel(panelId);
+                  if (panelId)
+                    gridLayoutApi?.addPanel(panelId, {
+                      width: DEFAULT_PANEL_WIDTH,
+                      height: DEFAULT_PANEL_HEIGHT,
+                    });
                 }}
               >
                 Add a panel

packages/kbn-grid-layout/grid/grid_layout.tsx

@@ -8,7 +8,7 @@
  */
 
 import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
-import { map, pairwise, withLatestFrom } from 'rxjs';
+import { pairwise } from 'rxjs';
 
 import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
 

packages/kbn-grid-layout/grid/types.ts

@@ -16,7 +16,7 @@ import { SerializableRecord } from '@kbn/utility-types';
  * The external API provided through the GridLayout component
  */
 export interface GridLayoutApi {
-  addPanel: (id: string, placementStrategy?: PanelPlacementStrategy) => void;
+  addPanel: (id: string, placementSettings: PanelPlacementSettings) => void;
   removePanel: (panelId: string) => void;
   replacePanel: (oldPanelId: string, newPanelId: string) => void;
 
@@ -127,3 +127,9 @@ export enum PanelPlacementStrategy {
   /** Look for the smallest y and x value where the default panel will fit. */
   findTopLeftMostOpenSpace = 'findTopLeftMostOpenSpace',
 }
+
+export interface PanelPlacementSettings {
+  strategy?: PanelPlacementStrategy;
+  height: number;
+  width: number;
+}

packages/kbn-grid-layout/grid/use_grid_layout_api.ts

@@ -11,7 +11,6 @@ import { useMemo } from 'react';
 
 import { SerializableRecord } from '@kbn/utility-types';
 
-import { DEFAULT_PANEL_HEIGHT, DEFAULT_PANEL_WIDTH } from './constants';
 import { GridLayoutApi, GridLayoutData, GridLayoutStateManager } from './types';
 import { compactGridRow } from './utils/resolve_grid_row';
 import { runPanelPlacementStrategy } from './utils/run_panel_placement';
@@ -23,17 +22,19 @@ export const useGridLayoutApi = ({
 }): GridLayoutApi => {
   const api: GridLayoutApi = useMemo(() => {
     return {
-      addPanel: (panelId, placementStrategy) => {
+      addPanel: (panelId, placementSettings) => {
         const currentLayout = gridLayoutStateManager.gridLayout$.getValue();
         const [firstRow, ...rest] = currentLayout;
+        const { columnCount: gridColumnCount } = gridLayoutStateManager.runtimeSettings$.getValue();
         const nextRow = runPanelPlacementStrategy(
           firstRow,
           {
             id: panelId,
-            width: DEFAULT_PANEL_WIDTH,
-            height: DEFAULT_PANEL_HEIGHT,
+            width: placementSettings.width,
+            height: placementSettings.height,
           },
-          placementStrategy
+          gridColumnCount,
+          placementSettings?.strategy
         );
         gridLayoutStateManager.gridLayout$.next([nextRow, ...rest]);
         gridLayoutStateManager.layoutUpdateEvent$.next([nextRow, ...rest]);
@@ -68,7 +69,6 @@ export const useGridLayoutApi = ({
 
       replacePanel: (oldPanelId, newPanelId) => {
         const currentLayout = gridLayoutStateManager.gridLayout$.getValue();
-        debugger;
 
         // find the row where the panel exists and update its ID to trigger a re-render
         let rowIndex = 0;
@@ -83,7 +83,6 @@ export const useGridLayoutApi = ({
             break;
           }
         }
-        console.log('UPDATE', currentLayout);
 
         // if the panels were updated (i.e. the panel was successfully found and replaced), update the layout
         if (updatedPanels) {

packages/kbn-grid-layout/grid/utils/run_panel_placement.ts

@@ -8,13 +8,13 @@
  */
 import { i18n } from '@kbn/i18n';
 import { GridRowData } from '../..';
-import { DASHBOARD_GRID_COLUMN_COUNT } from '../constants';
 import { GridPanelData, PanelPlacementStrategy } from '../types';
 import { compactGridRow, resolveGridRow } from './resolve_grid_row';
 
 export const runPanelPlacementStrategy = (
   originalRowData: GridRowData,
   newPanel: Omit<GridPanelData, 'row' | 'column'>,
+  columnCount: number,
   strategy: PanelPlacementStrategy = PanelPlacementStrategy.findTopLeftMostOpenSpace
 ): GridRowData => {
   const nextRowData = { ...originalRowData, panels: { ...originalRowData.panels } };
@@ -54,7 +54,7 @@ export const runPanelPlacementStrategy = (
         // create a 2D array representation of the grid filled with zeros
         const grid = new Array(maxRow);
         for (let y = 0; y < maxRow; y++) {
-          grid[y] = new Array(DASHBOARD_GRID_COLUMN_COUNT).fill(0); // TODO: don't use constant here
+          grid[y] = new Array(columnCount).fill(0);
         }
 
         // fill in the 2D array with ones wherever a panel is
@@ -68,17 +68,13 @@ export const runPanelPlacementStrategy = (
 
         // now find the first empty spot where there are enough zeros (unoccupied spaces) to fit the whole panel
         for (let y = 0; y < maxRow; y++) {
-          for (let x = 0; x < DASHBOARD_GRID_COLUMN_COUNT; x++) {
+          for (let x = 0; x < columnCount; x++) {
             if (grid[y][x] === 1) {
               // space is filled, so skip this spot
               continue;
             } else {
               for (let h = y; h < Math.min(y + newPanel.height, maxRow); h++) {
-                for (
-                  let w = x;
-                  w < Math.min(x + newPanel.width, DASHBOARD_GRID_COLUMN_COUNT);
-                  w++
-                ) {
+                for (let w = x; w < Math.min(x + newPanel.width, columnCount); w++) {
                   const spaceIsEmpty = grid[h][w] === 0;
                   const fitsPanelWidth = w === x + newPanel.width - 1;
                   // if the panel is taller than any other panel in the current grid, it can still fit in the space, hence