Changed panel placement system. Now the panels attempt to find blank space in 3 directions around the panel they're cloned from, failing that, they take the space directly below their origin and push down all panels that conflict

Author: ThomThomson

src/plugins/dashboard/public/application/embeddable/panel/create_panel_state.test.ts

@@ -22,15 +22,14 @@ import { DashboardPanelState } from '../types';
 import { createPanelState } from './create_panel_state';
 import { EmbeddableInput } from '../../../embeddable_plugin';
 import { CONTACT_CARD_EMBEDDABLE } from '../../../embeddable_plugin_test_samples';
-import { IPanelPlacementArgs } from './dashboard_panel_placement';
 
 interface TestInput extends EmbeddableInput {
   test: string;
 }
 const panels: { [key: string]: DashboardPanelState } = {};
 
 test('createPanelState adds a new panel state in 0,0 position', () => {
-  const panelState = createPanelState<TestInput, IPanelPlacementArgs>(
+  const panelState = createPanelState<TestInput>(
     {
       type: CONTACT_CARD_EMBEDDABLE,
       explicitInput: { test: 'hi', id: '123' },
@@ -49,7 +48,7 @@ test('createPanelState adds a new panel state in 0,0 position', () => {
 });
 
 test('createPanelState adds a second new panel state', () => {
-  const panelState = createPanelState<TestInput, IPanelPlacementArgs>(
+  const panelState = createPanelState<TestInput>(
     { type: CONTACT_CARD_EMBEDDABLE, explicitInput: { test: 'bye', id: '456' } },
     panels
   );
@@ -63,7 +62,7 @@ test('createPanelState adds a second new panel state', () => {
 });
 
 test('createPanelState adds a third new panel state', () => {
-  const panelState = createPanelState<TestInput, IPanelPlacementArgs>(
+  const panelState = createPanelState<TestInput>(
     {
       type: CONTACT_CARD_EMBEDDABLE,
       explicitInput: { test: 'bye', id: '789' },
@@ -80,7 +79,7 @@ test('createPanelState adds a third new panel state', () => {
 
 test('createPanelState adds a new panel state in the top most position', () => {
   delete panels['456'];
-  const panelState = createPanelState<TestInput, IPanelPlacementArgs>(
+  const panelState = createPanelState<TestInput>(
     {
       type: CONTACT_CARD_EMBEDDABLE,
       explicitInput: { test: 'bye', id: '987' },

src/plugins/dashboard/public/application/embeddable/panel/create_panel_state.ts

@@ -32,7 +32,7 @@ import {
  */
 export function createPanelState<
   TEmbeddableInput extends EmbeddableInput,
-  TPlacementMethodArgs extends IPanelPlacementArgs
+  TPlacementMethodArgs extends IPanelPlacementArgs = IPanelPlacementArgs
 >(
   panelState: PanelState<TEmbeddableInput>,
   currentPanels: { [key: string]: DashboardPanelState },

src/plugins/dashboard/public/application/embeddable/panel/dashboard_panel_placement.ts

@@ -102,55 +102,89 @@ export function findTopLeftMostOpenSpace({
   return { x: 0, y: maxY, w: width, h: height };
 }
 
+interface IplacementDirection {
+  grid: Omit<GridData, 'i'>;
+  fits: boolean;
+}
+
 export function placePanelBeside({
   width,
   height,
   currentPanels,
   placeBesideId,
 }: IPanelPlacementBesideArgs): Omit<GridData, 'i'> {
-  const finalPanels = _.cloneDeep(currentPanels);
+  // const clonedPanels = _.cloneDeep(currentPanels);
   if (!placeBesideId) {
     throw new Error('Place beside method called without placeBesideId');
   }
-  const panelToPlaceBeside = finalPanels[placeBesideId];
+  const panelToPlaceBeside = currentPanels[placeBesideId];
   if (!panelToPlaceBeside) {
     throw new PanelNotFoundError();
   }
-
-  const duplicatedPanelGrid = {} as GridData;
-  duplicatedPanelGrid.x = panelToPlaceBeside.gridData.x + panelToPlaceBeside.gridData.w;
-  duplicatedPanelGrid.y = panelToPlaceBeside.gridData.y;
-  duplicatedPanelGrid.w = width;
-  duplicatedPanelGrid.h = height;
-
-  // Adjust flow of dashboard if necessary
+  const beside = panelToPlaceBeside.gridData;
   const otherPanels: GridData[] = [];
-  _.forOwn(finalPanels, (panel: DashboardPanelState) => {
-    if (panel.savedObjectId !== panelToPlaceBeside.savedObjectId) {
-      otherPanels.push(panel.gridData);
-    }
-  });
-
-  const intersection = otherPanels.some((currentPanelGrid: GridData) => {
-    return (
-      duplicatedPanelGrid.x + duplicatedPanelGrid.w > currentPanelGrid.x &&
-      duplicatedPanelGrid.x < currentPanelGrid.x + currentPanelGrid.w &&
-      duplicatedPanelGrid.y < currentPanelGrid.y + currentPanelGrid.h &&
-      duplicatedPanelGrid.y + duplicatedPanelGrid.h > currentPanelGrid.y
-    );
+  _.forOwn(currentPanels, (panel: DashboardPanelState, key: string | undefined) => {
+    otherPanels.push(panel.gridData);
   });
 
-  // if any other panel intersects with the newly duplicated panel, move all panels in the same 'row' to the right by the amount of the duplciated panel's width
-  if (intersection) {
+  const possiblePlacementDirections: IplacementDirection[] = [
+    { grid: { x: beside.x + beside.w, y: beside.y, w: width, h: height }, fits: true }, // right
+    { grid: { x: beside.x - width, y: beside.y, w: width, h: height }, fits: true }, // left
+    { grid: { x: beside.x, y: beside.y + beside.h, w: width, h: height }, fits: true }, // bottom
+  ];
+
+  for (const direction of possiblePlacementDirections) {
+    if (
+      direction.grid.x >= 0 &&
+      direction.grid.x + direction.grid.w <= DASHBOARD_GRID_COLUMN_COUNT &&
+      direction.grid.y >= 0
+    ) {
+      const intersection = otherPanels.some((currentPanelGrid: GridData) => {
+        return (
+          direction.grid.x + direction.grid.w > currentPanelGrid.x &&
+          direction.grid.x < currentPanelGrid.x + currentPanelGrid.w &&
+          direction.grid.y < currentPanelGrid.y + currentPanelGrid.h &&
+          direction.grid.y + direction.grid.h > currentPanelGrid.y
+        );
+      });
+      if (!intersection) {
+        return direction.grid;
+      }
+    } else {
+      direction.fits = false;
+    }
+  }
+  // if we get here that means there is no blank space around the panel we are placing beside. This means it's time to mess up the dashboard's groove. Fun!
+  const [rightPlacement, , bottomPlacement] = possiblePlacementDirections;
+  if (rightPlacement.fits) {
     otherPanels.forEach((currentPanelGrid: GridData) => {
       if (
-        currentPanelGrid.x >= duplicatedPanelGrid.x &&
-        duplicatedPanelGrid.y <= currentPanelGrid.y + currentPanelGrid.h &&
-        duplicatedPanelGrid.y + duplicatedPanelGrid.h >= currentPanelGrid.y
+        currentPanelGrid.x >= rightPlacement.grid.x &&
+        rightPlacement.grid.y < currentPanelGrid.y + currentPanelGrid.h &&
+        rightPlacement.grid.y + rightPlacement.grid.h > currentPanelGrid.y
       ) {
-        currentPanelGrid.x += duplicatedPanelGrid.w;
+        const movedPanel = _.cloneDeep(currentPanels[currentPanelGrid.i]);
+        if (movedPanel.gridData.x + rightPlacement.grid.w > DASHBOARD_GRID_COLUMN_COUNT) {
+          movedPanel.gridData.y = movedPanel.gridData.y + rightPlacement.grid.h;
+        } else {
+          movedPanel.gridData.x = movedPanel.gridData.x + rightPlacement.grid.w;
+        }
+        currentPanels[currentPanelGrid.i] = movedPanel;
       }
     });
+    return rightPlacement.grid;
+  }
+  for (const currentPanelGrid of otherPanels) {
+    if (
+      bottomPlacement.grid.x + bottomPlacement.grid.w > currentPanelGrid.x &&
+      bottomPlacement.grid.x < currentPanelGrid.x + currentPanelGrid.w &&
+      bottomPlacement.grid.y < currentPanelGrid.y + currentPanelGrid.h &&
+      bottomPlacement.grid.y + bottomPlacement.grid.h > currentPanelGrid.y
+    ) {
+      const movedPanel = _.cloneDeep(currentPanels[currentPanelGrid.i]);
+      movedPanel.gridData.y = movedPanel.gridData.y + bottomPlacement.grid.h;
+      currentPanels[currentPanelGrid.i] = movedPanel;
+    }
   }
-  return duplicatedPanelGrid;
+  return bottomPlacement.grid;
 }