GLSP-1245: Fix overflowing issue with command palette (#449)

Adjust CSS styling for the command palette to enable proper overflow
without shifting the diagram itself.

Fixes eclipse-glsp/glsp#1245

Author: tortmayr

packages/client/css/command-palette.css

@@ -15,10 +15,12 @@
  ********************************************************************************/
 
 .command-palette {
+    position: fixed;
     transition: opacity 0.3s linear;
     box-shadow:
         0 4px 8px 0 rgba(0, 0, 0, 0.2),
         0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    overflow: visible;
 }
 
 .command-palette-suggestions {

packages/client/src/features/command-palette/command-palette.ts

@@ -14,14 +14,16 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { CommandPalette } from '@eclipse-glsp/sprotty';
+import { Bounds, CommandPalette, getWindowScroll, GModelElement, GModelRoot } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
 import { CSS_HIDDEN_EXTENSION_CLASS, CSS_UI_EXTENSION_CLASS } from '../../base/ui-extension/ui-extension';
+import { getElements, isSelectableAndBoundsAware } from '../../utils/gmodel-util';
 
 @injectable()
 export class GlspCommandPalette extends CommandPalette {
     protected override initializeContents(containerElement: HTMLElement): void {
         super.initializeContents(containerElement);
+        containerElement.style.position = '';
         containerElement.classList.add(CSS_UI_EXTENSION_CLASS);
     }
 
@@ -32,4 +34,42 @@ export class GlspCommandPalette extends CommandPalette {
             this.containerElement?.classList.add(CSS_HIDDEN_EXTENSION_CLASS);
         }
     }
+
+    protected override onBeforeShow(containerElement: HTMLElement, root: Readonly<GModelRoot>, ...selectedElementIds: string[]): void {
+        let x = this.xOffset;
+        let y = this.yOffset;
+
+        const selectedElements = getElements(root.index, selectedElementIds, isSelectableAndBoundsAware);
+        if (selectedElements.length === 1) {
+            const bounds = this.getAbsoluteBounds(selectedElements[0]);
+            x += bounds.x + bounds.width;
+            y += bounds.y;
+        } else {
+            const bounds = this.getAbsoluteBounds(root);
+            x += bounds.x;
+            y += bounds.y;
+        }
+        containerElement.style.left = `${x}px`;
+        containerElement.style.top = `${y}px`;
+        containerElement.style.width = `${this.defaultWidth}px`;
+    }
+
+    protected getAbsoluteBounds(element: Readonly<GModelElement>): Bounds {
+        let x = 0;
+        let y = 0;
+        let width = 0;
+        let height = 0;
+
+        const svgElementId = this.domHelper.createUniqueDOMElementId(element);
+        const svgElement = document.getElementById(svgElementId);
+        if (svgElement) {
+            const rect = svgElement.getBoundingClientRect();
+            const scroll = getWindowScroll();
+            x = rect.left + scroll.x;
+            y = rect.top + scroll.y;
+            width = rect.width;
+            height = rect.height;
+        }
+        return { x, y, width, height };
+    }
 }