@eclipse-glsp/client 2.8.0-next.0 → 2.8.0-next.12

package/src/features/accessibility/keyboard-pointer/keyboard-pointer.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2023-2024 Business Informatics Group (TU Wien) and others.
+ * Copyright (c) 2023-2026 Business Informatics Group (TU Wien) and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -18,6 +18,7 @@ import { inject, injectable } from 'inversify';
 import { EditorContextService } from '../../../base/editor-context-service';
 import { CursorCSS } from '../../../base/feedback/css-feedback';
 import { GLSPAbstractUIExtension } from '../../../base/ui-extension/ui-extension';
+import { pageToCssPosition } from '../../../utils/viewpoint-util';
 import { ContainerManager } from '../../tools/node-creation/container-manager';
 import { KeyboardGridCellSelectedAction } from '../keyboard-grid/action';
 import { SetKeyboardPointerRenderPositionAction } from './actions';
@@ -50,8 +51,12 @@ export class KeyboardPointer extends GLSPAbstractUIExtension implements IActionH
         return this._triggerAction;
     }
 
+    /**
+     * Whether the pointer is currently shown. Reflects the `hidden` css class toggled by
+     * {@link GLSPAbstractUIExtension}, not the inline `visibility` style.
+     */
     get isVisible(): boolean {
-        return this.containerElement?.style.visibility === 'visible';
+        return !!this.containerElement && this.isContainerVisible();
     }
 
     get getPosition(): KeyboardPointerPosition {
@@ -92,9 +97,13 @@ export class KeyboardPointer extends GLSPAbstractUIExtension implements IActionH
         }
     }
 
+    /**
+     * Positions the pointer on the selected grid cell and colors it to indicate whether node creation
+     * is allowed at that location.
+     */
     render(): void {
         if (this.containerElement !== undefined) {
-            const { x, y } = this.position.renderPosition;
+            const { x, y } = pageToCssPosition(this.containerElement, this.position.renderPosition);
             this.containerElement.style.left = `${x}px`;
             this.containerElement.style.top = `${y}px`;
 

package/src/features/accessibility/keyboard-tool-palette/keyboard-tool-palette.ts

@@ -218,7 +218,7 @@ export class KeyboardToolPalette extends ToolPalette {
 
         // Create button for Search
         this.searchToolButton = this.createSearchButton();
-        this.headerToolsButtonMapping.set(mappingIndex++, this.searchToolButton);
+        this.headerToolsButtonMapping.set(mappingIndex, this.searchToolButton);
         headerTools.appendChild(this.searchToolButton);
 
         return headerTools;

package/src/features/command-palette/command-palette.ts

@@ -18,6 +18,7 @@ import { Bounds, CommandPalette, getWindowScroll, GModelElement, GModelRoot } fr
 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';
+import { pageToCssPosition } from '../../utils/viewpoint-util';
 
 @injectable()
 export class GlspCommandPalette extends CommandPalette {
@@ -49,8 +50,9 @@ export class GlspCommandPalette extends CommandPalette {
             x += bounds.x;
             y += bounds.y;
         }
-        containerElement.style.left = `${x}px`;
-        containerElement.style.top = `${y}px`;
+        const { x: cssX, y: cssY } = pageToCssPosition(containerElement, { x, y });
+        containerElement.style.left = `${cssX}px`;
+        containerElement.style.top = `${cssY}px`;
         containerElement.style.width = `${this.defaultWidth}px`;
     }
 

package/src/features/copy-paste/copy-paste-handler.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2024 EclipseSource and others.
+ * Copyright (c) 2019-2026 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -16,6 +16,7 @@
 import {
     ClipboardData,
     CutOperation,
+    generateUuid,
     IActionDispatcher,
     PasteOperation,
     RequestClipboardDataAction,
@@ -24,7 +25,6 @@ import {
     ViewerOptions
 } from '@eclipse-glsp/sprotty';
 import { inject, injectable } from 'inversify';
-import { v4 as uuid } from 'uuid';
 import { EditorContextService } from '../../base/editor-context-service';
 
 export interface ICopyPasteHandler {
@@ -107,7 +107,7 @@ export class ServerCopyPasteHandler implements ICopyPasteHandler {
 
     handleCopy(event: ClipboardEvent): void {
         if (event.clipboardData && this.shouldCopy(event)) {
-            const clipboardId = uuid();
+            const clipboardId = generateUuid();
             event.clipboardData.setData(CLIPBOARD_DATA_FORMAT, toClipboardId(clipboardId));
             this.actionDispatcher
                 .request<SetClipboardDataAction>(RequestClipboardDataAction.create(this.editorContext.get()))

package/src/features/export/glsp-svg-exporter.ts

@@ -18,6 +18,7 @@ import {
     Action,
     ExportSvgAction,
     ExportSvgOptions,
+    generateUuid,
     GModelRoot,
     RejectAction,
     RequestAction,
@@ -25,7 +26,6 @@ import {
     SvgExporter
 } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
-import { v4 as uuid } from 'uuid';
 
 @injectable()
 export class GLSPSvgExporter extends SvgExporter {
@@ -82,7 +82,7 @@ export class GLSPSvgExporter extends SvgExporter {
         // createSvg requires the svg to have a non-empty id, so we generate one if necessary
         const originalId = svgElement.id;
         try {
-            svgElement.id = originalId || uuid();
+            svgElement.id = originalId || generateUuid();
             return super.createSvg(svgElement, root, options, cause);
         } finally {
             svgElement.id = originalId;

package/src/features/helper-lines/model.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2023-2024 EclipseSource and others.
+ * Copyright (c) 2023-2026 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -14,8 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { Args, Bounds, Direction, GChildElement, GModelElement, GShapeElement, Point, Vector } from '@eclipse-glsp/sprotty';
-import { v4 as uuid } from 'uuid';
+import { Args, Bounds, Direction, GChildElement, GModelElement, GShapeElement, Point, Vector, generateUuid } from '@eclipse-glsp/sprotty';
 import { ArgsAware } from '../../base/args-feature';
 import { ResizeHandleLocation } from '../change-bounds/model';
 
@@ -46,7 +45,7 @@ export class HelperLine extends GChildElement implements ArgsAware {
         readonly lineType: HelperLineType = HelperLineType.Left
     ) {
         super();
-        this.id = uuid();
+        this.id = generateUuid();
         this.type = HELPER_LINE;
     }
 
@@ -86,7 +85,7 @@ export class SelectionBounds extends GShapeElement implements ArgsAware {
 
     constructor(bounds?: Bounds) {
         super();
-        this.id = uuid();
+        this.id = generateUuid();
         this.type = SELECTION_BOUNDS;
         if (bounds) {
             this.bounds = bounds;

package/src/features/tools/node-creation/insert-indicator.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2024 EclipseSource and others.
+ * Copyright (c) 2024-2026 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -14,8 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { Args, Dimension, FeatureSet, GNode, boundsFeature, createFeatureSet, moveFeature } from '@eclipse-glsp/sprotty';
-import { v4 as uuid } from 'uuid';
+import { Args, Dimension, FeatureSet, GNode, boundsFeature, createFeatureSet, generateUuid, moveFeature } from '@eclipse-glsp/sprotty';
 import { ArgsAware, argsFeature } from '../../../base/args-feature';
 
 export const ARG_LENGTH = 'length';
@@ -25,7 +24,7 @@ export class InsertIndicator extends GNode implements ArgsAware {
 
     static TYPE = 'node:insert-indicator';
 
-    override id: string = uuid();
+    override id: string = generateUuid();
     override type: string = InsertIndicator.TYPE;
     override features?: FeatureSet = createFeatureSet(InsertIndicator.DEFAULT_FEATURES);
     override cssClasses: string[] = ['insert-indicator', 'sprotty-node'];

package/src/utils/viewpoint-util.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2025 EclipseSource and others.
+ * Copyright (c) 2019-2026 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -23,6 +23,7 @@ import {
     Point,
     Viewport,
     findParentByFeature,
+    getWindowScroll,
     isAlignable,
     isBoundsAware,
     isViewport,
@@ -61,6 +62,27 @@ export function getAbsolutePositionByPoint(target: GModelElement, point: Point):
     return position;
 }
 
+/**
+ * Computes the CSS `left`/`top` (in pixels) for placing {@link element} at the given point in page
+ * coordinates, accounting for its positioning context: relative to its `offsetParent` (the diagram
+ * container for absolutely positioned overlays) or, when there is none, relative to the viewport for
+ * fixed elements. This lets UI extensions be placed on the diagram canvas independently of where the
+ * diagram container sits within the page (e.g. below an application header).
+ *
+ * @param element the DOM-attached element to position
+ * @param pagePoint the target location in page coordinates
+ * @returns the `left`/`top` offset to assign to {@link element}'s style
+ */
+export function pageToCssPosition(element: HTMLElement, pagePoint: Point): Point {
+    const scroll = getWindowScroll();
+    const offsetParent = element.offsetParent as HTMLElement | null;
+    if (offsetParent) {
+        const bounds = offsetParent.getBoundingClientRect();
+        return { x: pagePoint.x - bounds.left - scroll.x, y: pagePoint.y - bounds.top - scroll.y };
+    }
+    return { x: pagePoint.x - scroll.x, y: pagePoint.y - scroll.y };
+}
+
 export function getViewportBounds(target: GModelElement, bounds: Bounds): Bounds {
     const topLeft = getAbsolutePositionByPoint(target, Bounds.topLeft(bounds));
     const bottomRight = getAbsolutePositionByPoint(target, Bounds.bottomRight(bounds));

package/src/views/glsp-projection-view.tsx

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2017-2025 TypeFox and others.
+ * Copyright (c) 2017-2026 TypeFox and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -28,7 +28,9 @@ import {
     TYPES,
     ViewProjection,
     Writable,
+    getProjections,
     html,
+    isBoundsAware,
     setAttr,
     setClass
 } from '@eclipse-glsp/sprotty';
@@ -91,6 +93,61 @@ export class GLSPProjectionView extends ProjectedViewportView {
         return { ...position, ...size };
     }
 
+    protected override renderProjections(model: Readonly<GViewportRootElement>, context: RenderingContext, args?: IViewArgs): VNode[] {
+        if (model.zoom <= 0) {
+            return [];
+        }
+        const modelBounds = this.getModelBounds(model);
+        if (!modelBounds) {
+            return [];
+        }
+        const projections = getProjections(model) ?? [];
+        return [
+            this.renderProjectionBar(projections, model, modelBounds, 'vertical'),
+            this.renderProjectionBar(projections, model, modelBounds, 'horizontal')
+        ];
+    }
+
+    /**
+     * Computes the total bounds that the projection bars map to, i.e. the union of the actual
+     * content bounds and the current viewport.
+     *
+     * This is a reimplementation of sprotty's `getModelBounds`, with two minor fixes
+     * - this intentionally derives the content bounds from the
+     * root's children instead of using {@link GViewportRootElement.bounds} directly.
+     * - We ignore bounds with invalid dimensions (e.g. from routable edges without bend points) to avoid pulling the
+     */
+    protected getModelBounds(model: Readonly<GViewportRootElement>): Bounds | undefined {
+        let minX = Number.POSITIVE_INFINITY;
+        let minY = Number.POSITIVE_INFINITY;
+        let maxX = Number.NEGATIVE_INFINITY;
+        let maxY = Number.NEGATIVE_INFINITY;
+
+        for (const element of model.children) {
+            if (isBoundsAware(element)) {
+                const b = element.bounds;
+                if (!Dimension.isValid(b)) {
+                    continue;
+                }
+                minX = Math.min(minX, b.x);
+                minY = Math.min(minY, b.y);
+                maxX = Math.max(maxX, b.x + b.width);
+                maxY = Math.max(maxY, b.y + b.height);
+            }
+        }
+
+        // enlarge the bounds by the current viewport to ensure it always fits into the projection
+        minX = Math.min(minX, model.scroll.x);
+        minY = Math.min(minY, model.scroll.y);
+        maxX = Math.max(maxX, model.scroll.x + model.canvasBounds.width / model.zoom);
+        maxY = Math.max(maxY, model.scroll.y + model.canvasBounds.height / model.zoom);
+
+        if (minX < maxX && minY < maxY) {
+            return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+        }
+        return undefined;
+    }
+
     protected override renderProjectionBar(
         projections: ViewProjection[],
         model: Readonly<GViewportRootElement>,