@eclipse-glsp/client 2.2.0-next.331 → 2.2.0-next.332

package/src/features/debug/debug-model.ts

@@ -0,0 +1,63 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG 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
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { Action, CommandExecutionContext, CommandReturn, GModelRoot, TYPES, hasBooleanProp } from '@eclipse-glsp/sprotty';
+import { inject, injectable } from 'inversify';
+import { FeedbackCommand } from '../../base';
+import { addCssClasses, removeCssClasses } from '../../utils';
+
+export interface EnableDebugModeAction extends Action {
+    kind: typeof EnableDebugModeAction.KIND;
+    enable: boolean;
+}
+
+export namespace EnableDebugModeAction {
+    export const KIND = 'enableDebugMode';
+    export const CSS_ROOT_CLASS = 'debug-mode';
+
+    export function is(object: any): object is EnableDebugModeAction {
+        return Action.hasKind(object, KIND) && hasBooleanProp(object, 'enable');
+    }
+
+    export function create(options: { enable: boolean }): EnableDebugModeAction {
+        return {
+            kind: EnableDebugModeAction.KIND,
+            ...options
+        };
+    }
+}
+
+@injectable()
+export class EnableDebugModeCommand extends FeedbackCommand {
+    static readonly KIND = EnableDebugModeAction.KIND;
+
+    constructor(@inject(TYPES.Action) protected readonly action: EnableDebugModeAction) {
+        super();
+    }
+
+    execute(context: CommandExecutionContext): CommandReturn {
+        return this.setDebugMode(context.root, this.action.enable);
+    }
+
+    protected setDebugMode(root: GModelRoot, show: boolean): CommandReturn {
+        if (show) {
+            addCssClasses(root, [EnableDebugModeAction.CSS_ROOT_CLASS]);
+        } else {
+            removeCssClasses(root, [EnableDebugModeAction.CSS_ROOT_CLASS]);
+        }
+        return root;
+    }
+}

package/src/features/debug/debug-module.ts

@@ -0,0 +1,32 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG 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
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { FeatureModule, TYPES, bindAsService, configureActionHandler, configureCommand } from '@eclipse-glsp/sprotty';
+import '../../../css/debug.css';
+import { DebugBoundsDecorator } from './debug-bounds-decorator';
+import { DebugManager } from './debug-manager';
+import { EnableDebugModeAction, EnableDebugModeCommand } from './debug-model';
+
+export const debugModule = new FeatureModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+
+    configureCommand(context, EnableDebugModeCommand);
+
+    bindAsService(bind, TYPES.IDebugManager, DebugManager);
+    configureActionHandler(context, EnableDebugModeAction.KIND, DebugManager);
+
+    bindAsService(context, TYPES.IVNodePostprocessor, DebugBoundsDecorator);
+});

package/src/features/debug/index.ts

@@ -0,0 +1,19 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG 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
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+export * from './debug-bounds-decorator';
+export * from './debug-manager';
+export * from './debug-model';
+export * from './debug-module';

package/src/features/grid/grid-manager.ts

@@ -0,0 +1,60 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG 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
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { IActionHandler, PropertiesOfType, TYPES } from '@eclipse-glsp/sprotty';
+import { inject, injectable, postConstruct } from 'inversify';
+import { FeedbackEmitter, IFeedbackActionDispatcher } from '../../base';
+import { Grid } from './grid';
+import { ShowGridAction } from './grid-model';
+
+export type GridStyle = Record<string, string> & Partial<PropertiesOfType<CSSStyleDeclaration, string>>;
+
+@injectable()
+export class GridManager implements IActionHandler {
+    protected _gridVisible: boolean = false;
+    protected gridFeedback: FeedbackEmitter;
+
+    @inject(TYPES.IFeedbackActionDispatcher)
+    protected feedbackDispatcher: IFeedbackActionDispatcher;
+
+    @inject(TYPES.Grid)
+    public readonly grid: Grid;
+
+    get isGridVisible(): boolean {
+        return this._gridVisible;
+    }
+
+    @postConstruct()
+    protected init(): void {
+        this.gridFeedback = this.feedbackDispatcher.createEmitter();
+    }
+
+    handle(action: ShowGridAction): void {
+        this._gridVisible = action.show;
+    }
+
+    setGridVisible(visible: boolean): void {
+        if (!visible) {
+            this.gridFeedback.dispose();
+        } else {
+            this.gridFeedback.add(ShowGridAction.create({ show: true }), ShowGridAction.create({ show: false })).submit();
+        }
+    }
+
+    toggleGridVisible(): void {
+        this.setGridVisible(!this._gridVisible);
+    }
+}

package/src/features/grid/grid-model.ts

@@ -0,0 +1,62 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG 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
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { Action, CommandExecutionContext, CommandReturn, GModelRoot, TYPES, hasBooleanProp } from '@eclipse-glsp/sprotty';
+import { inject, injectable } from 'inversify';
+import { FeedbackCommand } from '../../base';
+import { addCssClasses, removeCssClasses } from '../../utils';
+
+export interface ShowGridAction extends Action {
+    kind: typeof ShowGridCommand.KIND;
+    show: boolean;
+}
+
+export namespace ShowGridAction {
+    export const KIND = 'showGrid';
+    export const CSS_ROOT_CLASS = 'grid-background';
+
+    export function is(object: any): object is ShowGridAction {
+        return Action.hasKind(object, KIND) && hasBooleanProp(object, 'show');
+    }
+
+    export function create(options: { show: boolean }): ShowGridAction {
+        return {
+            kind: ShowGridCommand.KIND,
+            ...options
+        };
+    }
+}
+
+@injectable()
+export class ShowGridCommand extends FeedbackCommand {
+    static readonly KIND = ShowGridAction.KIND;
+
+    constructor(@inject(TYPES.Action) protected readonly action: ShowGridAction) {
+        super();
+    }
+
+    execute(context: CommandExecutionContext): CommandReturn {
+        return this.setGrid(context.root, this.action.show);
+    }
+
+    protected setGrid(root: GModelRoot, show: boolean): CommandReturn {
+        if (show) {
+            addCssClasses(root, [ShowGridAction.CSS_ROOT_CLASS]);
+        } else {
+            removeCssClasses(root, [ShowGridAction.CSS_ROOT_CLASS]);
+        }
+        return root;
+    }
+}

package/src/features/grid/grid-module.ts

@@ -0,0 +1,34 @@
+/********************************************************************************
+ * Copyright (c) 2023 Axon Ivy AG 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
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { FeatureModule, TYPES, bindAsService, configureActionHandler, configureCommand } from '@eclipse-glsp/sprotty';
+import '../../../css/grid.css';
+import { GridManager } from './grid-manager';
+import { ShowGridAction, ShowGridCommand } from './grid-model';
+import { GridSnapper } from './grid-snapper';
+
+export const gridModule = new FeatureModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+
+    bind(TYPES.Grid).toConstantValue({ x: 10, y: 10 });
+
+    configureCommand(context, ShowGridCommand);
+
+    bindAsService(bind, TYPES.IGridManager, GridManager);
+    configureActionHandler(context, ShowGridAction.KIND, GridManager);
+
+    bind(TYPES.ISnapper).to(GridSnapper);
+});

package/src/features/grid/grid-snapper.spec.ts

@@ -0,0 +1,30 @@
+/********************************************************************************
+ * Copyright (c) 2022-2023 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
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { GModelElement } from '@eclipse-glsp/sprotty';
+import { expect } from 'chai';
+import { GridSnapper } from './grid-snapper';
+
+describe('GridSnapper', () => {
+    it('snap', () => {
+        const element = new GModelElement();
+        const snapper = new GridSnapper();
+        expect(snapper.snap({ x: 0, y: 0 }, element)).to.be.deep.equals({ x: 0, y: 0 });
+        expect(snapper.snap({ x: 4, y: 5 }, element)).to.be.deep.equals({ x: 0, y: 10 });
+        expect(snapper.snap({ x: 8, y: 11 }, element)).to.be.deep.equals({ x: 10, y: 10 });
+        expect(snapper.snap({ x: -7, y: -4 }, element)).to.be.deep.equals({ x: -10, y: -0 });
+    });
+});

package/src/features/grid/grid-snapper.ts

@@ -0,0 +1,59 @@
+/********************************************************************************
+ * Copyright (c) 2024 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
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { CenterGridSnapper, GModelElement, ISnapper, Point, TYPES } from '@eclipse-glsp/sprotty';
+import { inject, injectable, optional } from 'inversify';
+import { Grid } from './grid';
+
+/**
+ * A {@link ISnapper} implementation that snaps all elements onto a fixed gride size.
+ * The default grid size is 10x10 pixel.
+ * To configure a custom grid size  bind the `TYPES.ISnapper` service identifier
+ * to constant value, e.g:
+ *
+ * ```ts
+ * bind(TYPES.ISnapper).toConstantValue(new GridSnapper({ x: 25, y: 25 }));
+ * ```
+ *
+ * or use the `Grid` to define the grid size more generically:
+ * ```ts
+ * bind(TYPES.Grid).toConstantValue({ x: 25, y: 25 });
+ * bind(TYPES.ISnapper).to(GridSnapper);
+ * ```
+ */
+@injectable()
+export class GridSnapper implements ISnapper {
+    constructor(@optional() @inject(TYPES.Grid) public readonly grid: Grid = { x: 10, y: 10 }) {}
+
+    snap(position: Point, element: GModelElement): Point {
+        return Point.snapToGrid(position, this.grid);
+    }
+}
+
+@injectable()
+export class GLSPCenterGridSnapper extends CenterGridSnapper {
+    constructor(@optional() @inject(TYPES.Grid) public readonly grid: Grid = { x: 10, y: 10 }) {
+        super();
+    }
+
+    override get gridX(): number {
+        return this.grid.x;
+    }
+
+    override get gridY(): number {
+        return this.grid.y;
+    }
+}

package/src/features/grid/grid.ts

@@ -0,0 +1,18 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG 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
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { Point } from '@eclipse-glsp/sprotty';
+
+export type Grid = Point;

package/src/features/grid/index.ts

@@ -0,0 +1,20 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG 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
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+export * from './grid';
+export * from './grid-manager';
+export * from './grid-model';
+export * from './grid-module';
+export * from './grid-snapper';

package/src/features/helper-lines/helper-line-manager-default.ts

@@ -19,6 +19,7 @@ import { FeedbackEmitter } from '../../base';
 import { IFeedbackActionDispatcher } from '../../base/feedback/feedback-action-dispatcher';
 import { ISelectionListener, SelectionService } from '../../base/selection-service';
 import { SetBoundsFeedbackAction } from '../bounds/set-bounds-feedback-command';
+import { Grid } from '../grid';
 import { MoveFinishedEventAction, MoveInitializedEventAction } from '../tools/change-bounds/change-bounds-tool-feedback';
 import {
     AlignmentElementFilter,
@@ -47,7 +48,7 @@ export interface IHelperLineOptions {
     viewportLines?: ViewportLineType[];
     /**
      * The minimum difference between two coordinates
-     * Defaults to 1.
+     * Defaults to 1 or zero (perfect match) if the optional grid module is loaded.
      */
     alignmentEpsilon?: number;
     /**
@@ -58,6 +59,7 @@ export interface IHelperLineOptions {
     /**
      * The minimum move delta that is necessary for an element to break through a helper line.
      * Defaults to { x: 1, y: 1 } whereas the x represents the horizontal distance and y represents the vertical distance.
+     * If the optional grid module is loaded, defaults to twice the grid size, i.e., two grid moves to break through a helper line.
      */
     minimumMoveDelta?: Point;
 
@@ -84,6 +86,7 @@ export class HelperLineManager implements IActionHandler, ISelectionListener, IH
     @inject(TYPES.IFeedbackActionDispatcher) protected feedbackDispatcher: IFeedbackActionDispatcher;
     @inject(SelectionService) protected selectionService: SelectionService;
     @optional() @inject(TYPES.IHelperLineOptions) protected userOptions?: IHelperLineOptions;
+    @optional() @inject(TYPES.Grid) protected grid?: Grid;
 
     protected options: Required<IHelperLineOptions>;
     protected feedback: FeedbackEmitter;
@@ -91,7 +94,12 @@ export class HelperLineManager implements IActionHandler, ISelectionListener, IH
     @postConstruct()
     protected init(): void {
         this.feedback = this.feedbackDispatcher.createEmitter();
-        this.options = { ...DEFAULT_HELPER_LINE_OPTIONS, ...this.userOptions };
+        const dynamicOptions: IHelperLineOptions = {};
+        if (this.grid) {
+            dynamicOptions.alignmentEpsilon = 0;
+            dynamicOptions.minimumMoveDelta = Point.multiplyScalar(this.grid, 2);
+        }
+        this.options = { ...DEFAULT_HELPER_LINE_OPTIONS, ...dynamicOptions, ...this.userOptions };
         this.selectionService.onSelectionChanged(change =>
             this.selectionChanged(change.root, change.selectedElements, change.deselectedElements)
         );

package/src/features/index.ts

@@ -19,9 +19,11 @@ export * from './change-bounds';
 export * from './command-palette';
 export * from './context-menu';
 export * from './copy-paste';
+export * from './debug';
 export * from './decoration';
 export * from './element-template';
 export * from './export';
+export * from './grid';
 export * from './helper-lines';
 export * from './hints';
 export * from './hover';

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

@@ -26,23 +26,27 @@ import {
     SetContextActions,
     SetModelAction,
     SetUIExtensionVisibilityAction,
+    TYPES,
     TriggerNodeCreationAction,
     UpdateModelAction,
     codiconCSSClasses,
     matchesKeystroke
 } from '@eclipse-glsp/sprotty';
-import { inject, injectable, postConstruct } from 'inversify';
+import { inject, injectable, optional, postConstruct } from 'inversify';
 import { GLSPActionDispatcher } from '../../base/action-dispatcher';
 import { EditorContextService, IEditModeListener } from '../../base/editor-context-service';
 import { FocusTracker } from '../../base/focus/focus-tracker';
 import { IDiagramStartup } from '../../base/model/diagram-loader';
 import { EnableDefaultToolsAction, EnableToolsAction } from '../../base/tool-manager/tool';
+import { DebugManager } from '../debug';
+import { GridManager } from '../grid';
 import { MouseDeleteTool } from '../tools/deletion/delete-tool';
 import { MarqueeMouseTool } from '../tools/marquee-selection/marquee-mouse-tool';
+import { OriginViewportAction } from '../viewport';
 
 const CLICKED_CSS_CLASS = 'clicked';
 const SEARCH_ICON_ID = 'search';
-const PALETTE_ICON_ID = 'symbol-color';
+const PALETTE_ICON_ID = 'tools';
 const CHEVRON_DOWN_ICON_ID = 'chevron-right';
 const PALETTE_HEIGHT = '500px';
 
@@ -74,6 +78,14 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
     @inject(FocusTracker)
     protected focusTracker: FocusTracker;
 
+    @inject(TYPES.IGridManager)
+    @optional()
+    protected gridManager?: GridManager;
+
+    @inject(TYPES.IDebugManager)
+    @optional()
+    protected debugManager?: DebugManager;
+
     protected paletteItems: PaletteItem[];
     protected paletteItemsCopy: PaletteItem[] = [];
     protected dynamic = false;
@@ -202,6 +214,19 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         const validateActionButton = this.createValidateButton();
         headerTools.appendChild(validateActionButton);
 
+        const resetViewportButton = this.createResetViewportButton();
+        headerTools.appendChild(resetViewportButton);
+
+        if (this.gridManager) {
+            const toggleGridButton = this.createToggleGridButton();
+            headerTools.appendChild(toggleGridButton);
+        }
+
+        if (this.debugManager) {
+            const toggleDebugButton = this.createToggleDebugButton();
+            headerTools.appendChild(toggleDebugButton);
+        }
+
         // Create button for Search
         const searchIcon = this.createSearchButton();
         headerTools.appendChild(searchIcon);
@@ -250,6 +275,58 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         return validateActionButton;
     }
 
+    protected createResetViewportButton(): HTMLElement {
+        const resetViewportButton = createIcon('screen-normal');
+        resetViewportButton.title = 'Reset Viewport';
+        resetViewportButton.onclick = _event => {
+            this.actionDispatcher.dispatch(OriginViewportAction.create());
+            resetViewportButton.focus();
+        };
+        resetViewportButton.ariaLabel = resetViewportButton.title;
+        resetViewportButton.tabIndex = 1;
+        return resetViewportButton;
+    }
+
+    protected createToggleGridButton(): HTMLElement {
+        const toggleGridButton = createIcon('symbol-numeric');
+        toggleGridButton.title = 'Toggle Grid';
+        toggleGridButton.onclick = () => {
+            if (this.gridManager?.isGridVisible) {
+                toggleGridButton.classList.remove(CLICKED_CSS_CLASS);
+                this.gridManager?.setGridVisible(false);
+            } else {
+                toggleGridButton.classList.add(CLICKED_CSS_CLASS);
+                this.gridManager?.setGridVisible(true);
+            }
+        };
+        if (this.gridManager?.isGridVisible) {
+            toggleGridButton.classList.add(CLICKED_CSS_CLASS);
+        }
+        toggleGridButton.ariaLabel = toggleGridButton.title;
+        toggleGridButton.tabIndex = 1;
+        return toggleGridButton;
+    }
+
+    protected createToggleDebugButton(): HTMLElement {
+        const toggleDebugButton = createIcon('debug');
+        toggleDebugButton.title = 'Debug Mode';
+        toggleDebugButton.onclick = () => {
+            if (this.debugManager?.isDebugEnabled) {
+                toggleDebugButton.classList.remove(CLICKED_CSS_CLASS);
+                this.debugManager?.setDebugEnabled(false);
+            } else {
+                toggleDebugButton.classList.add(CLICKED_CSS_CLASS);
+                this.debugManager?.setDebugEnabled(true);
+            }
+        };
+        if (this.debugManager?.isDebugEnabled) {
+            toggleDebugButton.classList.add(CLICKED_CSS_CLASS);
+        }
+        toggleDebugButton.ariaLabel = toggleDebugButton.title;
+        toggleDebugButton.tabIndex = 1;
+        return toggleDebugButton;
+    }
+
     protected createSearchButton(): HTMLElement {
         const searchIcon = createIcon(SEARCH_ICON_ID);
         searchIcon.onclick = _ev => {
@@ -275,7 +352,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         searchField.classList.add('search-input');
         searchField.id = this.containerElement.id + '_search_field';
         searchField.type = 'text';
-        searchField.placeholder = ' Search...';
+        searchField.placeholder = 'Search...';
         searchField.style.display = 'none';
         searchField.onkeyup = () => this.requestFilterUpdate(this.searchField.value);
         searchField.onkeydown = ev => this.clearOnEscape(ev);

package/src/features/viewport/index.ts

@@ -14,6 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 export * from './glsp-scroll-mouse-listener';
+export * from './origin-viewport';
 export * from './reposition';
 export * from './viewport-handler';
 export * from './viewport-modules';