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

package/lib/views/ggraph-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ggraph-view.js","sourceRoot":"","sources":["../../src/views/ggraph-view.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;kFAckF;AAClF,mDAA4H;AAC5H,yCAAyD;AAEzD,0CAAqD;AAG9C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,oBAAU;IAG7B,MAAM,CAAC,KAA2B,EAAE,OAAyB;QAClE,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAC3C,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;YACb,KAAK,CAAC,IAAI,CAAC,KAAK,mCAAQ,KAAK,CAAC,IAAI,CAAC,KAAK,GAAK,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,CAAE,CAAC;QACrF,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAES,YAAY,CAAC,KAA2B,EAAE,OAAyB;;QACzE,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,aAAa,CAAA,EAAE,CAAC;YACnC,OAAO,EAAE,CAAC;QACd,CAAC;QACD,MAAM,MAAM,GAAG,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAC1E,OAAO;YACH,kBAAkB,EAAE,GAAG,MAAM,CAAC,CAAC,MAAM,MAAM,CAAC,CAAC,IAAI;YACjD,cAAc,EAAE,GAAG,MAAM,CAAC,KAAK,MAAM,MAAM,CAAC,MAAM,IAAI;YACtD,mHAAmH;YACnH,yBAAyB,EAAE,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC;SACvF,CAAC;IACN,CAAC;IAES,mBAAmB,CAAC,QAA8B,EAAE,OAAyB,EAAE,WAAwB;QAC7G,MAAM,QAAQ,GAAG,eAAK,CAAC,cAAc,CAAC,eAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACxG,MAAM,IAAI,GAAG,mBAAS,CAAC,SAAS,CAAC,eAAK,CAAC,cAAc,CAAC,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;QACxF,uCAAY,QAAQ,GAAK,IAAI,EAAG;IACpC,CAAC;IAES,kBAAkB,CAAC,KAA2B,EAAE,OAAyB,EAAE,WAAwB;QACzG,mCAAmC;QACnC,OAAO,sFAAsF,WAAW,CAAC,IAAI,CAAC,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,CAAC,kBAAkB,WAAW,CAAC,IAAI,CAAC,CAAC,aAAa,WAAW,CAAC,IAAI,CAAC,CAAC,4FAA4F,CAAC;IACzS,CAAC;CACJ,CAAA;AAlCY,gCAAU;AAC+B;IAAjD,IAAA,kBAAM,EAAC,eAAK,CAAC,YAAY,CAAC;IAAE,IAAA,oBAAQ,GAAE;8BAAyB,sBAAW;+CAAC;qBADnE,UAAU;IADtB,IAAA,sBAAU,GAAE;GACA,UAAU,CAkCtB"}

package/lib/views/glsp-projection-view.d.ts

@@ -13,15 +13,20 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Bounds, EdgeRouterRegistry, GViewportRootElement, IViewArgs, ProjectedViewportView, ProjectionParams, RenderingContext, ViewProjection } from '@eclipse-glsp/sprotty';
+import { Bounds, EdgeRouterRegistry, GViewportRootElement, IViewArgs, ProjectedViewportView, ProjectionParams, RenderingContext, SGraphImpl, ViewProjection, Writable } from '@eclipse-glsp/sprotty';
 import { VNode } from 'snabbdom';
+import { GridManager, GridStyle } from '../features';
 /**
  * Special viewport root view that renders horizontal and vertical projection bars for quick navigation.
  */
 export declare class GLSPProjectionView extends ProjectedViewportView {
     edgeRouterRegistry: EdgeRouterRegistry;
+    protected gridManager?: GridManager;
     render(model: Readonly<GViewportRootElement>, context: RenderingContext, args?: IViewArgs): VNode;
     protected renderSvg(model: Readonly<GViewportRootElement>, context: RenderingContext, args?: IViewArgs): VNode;
+    protected getGridStyle(model: Readonly<SGraphImpl>, context: RenderingContext): GridStyle;
+    protected getBackgroundBounds(viewport: Readonly<SGraphImpl>, context: RenderingContext, gridManager: GridManager): Writable<Bounds>;
+    protected getBackgroundImage(model: Readonly<SGraphImpl>, context: RenderingContext, gridManager: GridManager): string;
     protected renderProjectionBar(projections: ViewProjection[], model: Readonly<GViewportRootElement>, modelBounds: Bounds, orientation: 'horizontal' | 'vertical'): VNode;
     protected renderViewport(model: Readonly<GViewportRootElement>, params: ProjectionParams): VNode;
     protected renderProjection(projection: ViewProjection, model: Readonly<GViewportRootElement>, params: ProjectionParams): VNode;

package/lib/views/glsp-projection-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glsp-projection-view.d.ts","sourceRoot":"","sources":["../../src/views/glsp-projection-view.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;kFAckF;AAElF,OAAO,EACH,MAAM,EACN,kBAAkB,EAClB,oBAAoB,EACpB,SAAS,EACT,qBAAqB,EACrB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EAIjB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAiB,MAAM,UAAU,CAAC;AAKhD;;GAEG;AACH,qBACa,kBAAmB,SAAQ,qBAAqB;IAC7B,kBAAkB,EAAE,kBAAkB,CAAC;IAE1D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK;cAiBvF,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK;cAYpG,mBAAmB,CAClC,WAAW,EAAE,cAAc,EAAE,EAC7B,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,EACrC,WAAW,EAAE,MAAM,EACnB,WAAW,EAAE,YAAY,GAAG,UAAU,GACvC,KAAK;cAoBW,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,EAAE,gBAAgB,GAAG,KAAK;cAsCtF,gBAAgB,CAC/B,UAAU,EAAE,cAAc,EAC1B,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,EACrC,MAAM,EAAE,gBAAgB,GACzB,KAAK;CA+CX"}
+{"version":3,"file":"glsp-projection-view.d.ts","sourceRoot":"","sources":["../../src/views/glsp-projection-view.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;kFAckF;AAElF,OAAO,EACH,MAAM,EAEN,kBAAkB,EAClB,oBAAoB,EACpB,SAAS,EAET,qBAAqB,EACrB,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EAEV,cAAc,EACd,QAAQ,EAIX,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAiB,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAKrD;;GAEG;AACH,qBACa,kBAAmB,SAAQ,qBAAqB;IAC7B,kBAAkB,EAAE,kBAAkB,CAAC;IAC3B,SAAS,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC;IAEnE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK;cAavF,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK;IAYvH,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,EAAE,gBAAgB,GAAG,SAAS;IAazF,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC;IAMpI,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,GAAG,MAAM;cAKnG,mBAAmB,CAClC,WAAW,EAAE,cAAc,EAAE,EAC7B,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,EACrC,WAAW,EAAE,MAAM,EACnB,WAAW,EAAE,YAAY,GAAG,UAAU,GACvC,KAAK;cAoBW,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,EAAE,gBAAgB,GAAG,KAAK;cAsCtF,gBAAgB,CAC/B,UAAU,EAAE,cAAc,EAC1B,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,EACrC,MAAM,EAAE,gBAAgB,GACzB,KAAK;CA+CX"}

package/lib/views/glsp-projection-view.js

@@ -28,6 +28,7 @@ exports.GLSPProjectionView = void 0;
 const sprotty_1 = require("@eclipse-glsp/sprotty");
 const inversify_1 = require("inversify");
 const snabbdom_1 = require("snabbdom");
+const features_1 = require("../features");
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const JSX = { createElement: sprotty_1.html };
 /**
@@ -35,12 +36,8 @@ const JSX = { createElement: sprotty_1.html };
  */
 let GLSPProjectionView = class GLSPProjectionView extends sprotty_1.ProjectedViewportView {
     render(model, context, args) {
-        const svgElem = this.renderSvg(model, context, args);
-        if (svgElem.data) {
-            svgElem.data.class = { 'sprotty-graph': true };
-        }
         const rootNode = (JSX.createElement("div", { "class-sprotty-graph": false, style: { width: '100%', height: '100%' } },
-            svgElem,
+            this.renderSvg(model, context, args),
             this.renderProjections(model, context, args)));
         (0, sprotty_1.setAttr)(rootNode, 'tabindex', 1);
         (0, sprotty_1.setAttr)(rootNode, 'aria-label', 'Diagram');
@@ -50,9 +47,31 @@ let GLSPProjectionView = class GLSPProjectionView extends sprotty_1.ProjectedVie
         const edgeRouting = this.edgeRouterRegistry.routeAllChildren(model);
         const transform = `scale(${model.zoom}) translate(${-model.scroll.x},${-model.scroll.y})`;
         const ns = 'http://www.w3.org/2000/svg';
-        const svg = (0, snabbdom_1.h)('svg', { ns, style: { height: '100%' } }, (0, snabbdom_1.h)('g', { ns, attrs: { transform } }, context.renderChildren(model, { edgeRouting })));
+        const svg = (0, snabbdom_1.h)('svg', { ns, style: Object.assign({ height: '100%' }, this.getGridStyle(model, context)), class: { 'sprotty-graph': true } }, (0, snabbdom_1.h)('g', { ns, attrs: { transform } }, context.renderChildren(model, { edgeRouting })));
         return svg;
     }
+    getGridStyle(model, context) {
+        var _a;
+        if (!((_a = this.gridManager) === null || _a === void 0 ? void 0 : _a.isGridVisible)) {
+            return {};
+        }
+        const bounds = this.getBackgroundBounds(model, context, this.gridManager);
+        return {
+            backgroundPosition: `${bounds.x}px ${bounds.y}px`,
+            backgroundSize: `${bounds.width}px ${bounds.height}px`,
+            // we do not set the background image directly in the style object, because we want to toggle it on and off via CSS
+            '--grid-background-image': this.getBackgroundImage(model, context, this.gridManager)
+        };
+    }
+    getBackgroundBounds(viewport, context, gridManager) {
+        const position = sprotty_1.Point.multiplyScalar(sprotty_1.Point.subtract(gridManager.grid, viewport.scroll), viewport.zoom);
+        const size = sprotty_1.Dimension.fromPoint(sprotty_1.Point.multiplyScalar(gridManager.grid, viewport.zoom));
+        return Object.assign(Object.assign({}, position), size);
+    }
+    getBackgroundImage(model, context, gridManager) {
+        // eslint-disable-next-line max-len
+        return `url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${gridManager.grid.x} ${gridManager.grid.y}"><rect width="${gridManager.grid.x}" height="${gridManager.grid.y}" x="0" y="0" fill="none" stroke="black" stroke-width="1" stroke-opacity="0.10" /></svg>')`;
+    }
     renderProjectionBar(projections, model, modelBounds, orientation) {
         const params = { modelBounds, orientation };
         // NOTE: Here we assume that the projection bars have the same size as the diagram canvas,
@@ -151,6 +170,11 @@ __decorate([
     (0, inversify_1.inject)(sprotty_1.EdgeRouterRegistry),
     __metadata("design:type", sprotty_1.EdgeRouterRegistry)
 ], GLSPProjectionView.prototype, "edgeRouterRegistry", void 0);
+__decorate([
+    (0, inversify_1.inject)(sprotty_1.TYPES.IGridManager),
+    (0, inversify_1.optional)(),
+    __metadata("design:type", features_1.GridManager)
+], GLSPProjectionView.prototype, "gridManager", void 0);
 exports.GLSPProjectionView = GLSPProjectionView = __decorate([
     (0, inversify_1.injectable)()
 ], GLSPProjectionView);

package/lib/views/glsp-projection-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"glsp-projection-view.js","sourceRoot":"","sources":["../../src/views/glsp-projection-view.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"glsp-projection-view.js","sourceRoot":"","sources":["../../src/views/glsp-projection-view.tsx"],"names":[],"mappings":"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"}

package/lib/views/index.d.ts

@@ -16,6 +16,7 @@
 export * from './base-view-module';
 export * from './compartments';
 export * from './gedge-view';
+export * from './ggraph-view';
 export * from './glsp-projection-view';
 export * from './issue-marker-view';
 export * from './rounded-corner';

package/lib/views/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/views/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;kFAckF;AAClF,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/views/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;kFAckF;AAClF,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC"}

package/lib/views/index.js

@@ -32,6 +32,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./base-view-module"), exports);
 __exportStar(require("./compartments"), exports);
 __exportStar(require("./gedge-view"), exports);
+__exportStar(require("./ggraph-view"), exports);
 __exportStar(require("./glsp-projection-view"), exports);
 __exportStar(require("./issue-marker-view"), exports);
 __exportStar(require("./rounded-corner"), exports);

package/lib/views/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/views/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;kFAckF;AAClF,qDAAmC;AACnC,iDAA+B;AAC/B,+CAA6B;AAC7B,yDAAuC;AACvC,sDAAoC;AACpC,mDAAiC;AACjC,wDAAsC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/views/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;kFAckF;AAClF,qDAAmC;AACnC,iDAA+B;AAC/B,+CAA6B;AAC7B,gDAA8B;AAC9B,yDAAuC;AACvC,sDAAoC;AACpC,mDAAiC;AACjC,wDAAsC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-glsp/client",
-  "version": "2.2.0-next.331+38f93e2",
+  "version": "2.2.0-next.332+ca7c9ae",
   "description": "A sprotty-based client for GLSP",
   "keywords": [
     "eclipse",
@@ -46,7 +46,7 @@
     "watch": "tsc -w"
   },
   "dependencies": {
-    "@eclipse-glsp/sprotty": "2.2.0-next.331+38f93e2",
+    "@eclipse-glsp/sprotty": "2.2.0-next.332+ca7c9ae",
     "autocompleter": "^9.1.0",
     "file-saver": "^2.0.5",
     "lodash": "4.17.21"
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "38f93e230513f08105858216ea7a365522f6b154"
+  "gitHead": "ca7c9aecfaa198b8ceed3bf488abfc3d3d552e07"
 }

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

@@ -44,7 +44,7 @@ import * as messages from '../toast/messages.json';
 import { ShowToastMessageAction } from '../toast/toast-handler';
 
 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';
 const SELECTION_TOOL_KEY: KeyCode[] = ['Digit1', 'Numpad1'];
@@ -212,29 +212,46 @@ export class KeyboardToolPalette extends ToolPalette {
 
     protected override createHeaderTools(): HTMLElement {
         this.headerToolsButtonMapping.clear();
+        let mappingIndex = 0;
 
         const headerTools = document.createElement('div');
         headerTools.classList.add('header-tools');
 
         this.defaultToolsButton = this.createDefaultToolButton();
-        this.headerToolsButtonMapping.set(0, this.defaultToolsButton);
+        this.headerToolsButtonMapping.set(mappingIndex++, this.defaultToolsButton);
         headerTools.appendChild(this.defaultToolsButton);
 
         this.deleteToolButton = this.createMouseDeleteToolButton();
-        this.headerToolsButtonMapping.set(1, this.deleteToolButton);
+        this.headerToolsButtonMapping.set(mappingIndex++, this.deleteToolButton);
         headerTools.appendChild(this.deleteToolButton);
 
         this.marqueeToolButton = this.createMarqueeToolButton();
-        this.headerToolsButtonMapping.set(2, this.marqueeToolButton);
+        this.headerToolsButtonMapping.set(mappingIndex++, this.marqueeToolButton);
         headerTools.appendChild(this.marqueeToolButton);
 
         this.validateToolButton = this.createValidateButton();
-        this.headerToolsButtonMapping.set(3, this.validateToolButton);
+        this.headerToolsButtonMapping.set(mappingIndex++, this.validateToolButton);
         headerTools.appendChild(this.validateToolButton);
 
+        const resetViewportButton = this.createResetViewportButton();
+        this.headerToolsButtonMapping.set(mappingIndex++, resetViewportButton);
+        headerTools.appendChild(resetViewportButton);
+
+        if (this.gridManager) {
+            const toggleGridButton = this.createToggleGridButton();
+            this.headerToolsButtonMapping.set(mappingIndex++, toggleGridButton);
+            headerTools.appendChild(toggleGridButton);
+        }
+
+        if (this.debugManager) {
+            const toggleDebugButton = this.createToggleDebugButton();
+            this.headerToolsButtonMapping.set(mappingIndex++, toggleDebugButton);
+            headerTools.appendChild(toggleDebugButton);
+        }
+
         // Create button for Search
         this.searchToolButton = this.createSearchButton();
-        this.headerToolsButtonMapping.set(4, this.searchToolButton);
+        this.headerToolsButtonMapping.set(mappingIndex++, this.searchToolButton);
         headerTools.appendChild(this.searchToolButton);
 
         return headerTools;
@@ -324,7 +341,7 @@ export class KeyboardToolPalette extends ToolPalette {
         searchField.tabIndex = 21;
         searchField.id = this.containerElement.id + '_search_field';
         searchField.type = 'text';
-        searchField.placeholder = ' Search...';
+        searchField.placeholder = 'Search...';
         searchField.style.display = 'none';
         searchField.onkeyup = ev => {
             this.requestFilterUpdate(this.searchField.value);

package/src/features/accessibility/resize-key-tool/resize-key-handler.ts

@@ -36,7 +36,7 @@ import { EditorContextService } from '../../../base/editor-context-service';
 import { IFeedbackActionDispatcher } from '../../../base/feedback/feedback-action-dispatcher';
 import { Resizable, SelectableBoundsAware, getElements, isSelectableAndBoundsAware, toElementAndBounds } from '../../../utils/gmodel-util';
 import { isValidMove, isValidSize, minHeight, minWidth } from '../../../utils/layout-utils';
-import { GridSnapper } from '../../change-bounds/snap';
+import { Grid } from '../../grid';
 
 export enum ResizeType {
     Increase,
@@ -80,20 +80,20 @@ export class ResizeElementHandler implements IActionHandler {
     protected debouncedChangeBounds?: DebouncedFunc<() => void>;
     protected resizeFeedback: FeedbackEmitter;
 
-    // Default x resize used if GridSnapper is not provided
+    // Default x resize used if grid is not provided
     static readonly defaultResizeX = 20;
 
-    // Default y resize used if GridSnapper is not provided
+    // Default y resize used if grid is not provided
     static readonly defaultResizeY = 20;
-    protected grid = { x: ResizeElementHandler.defaultResizeX, y: ResizeElementHandler.defaultResizeY };
+
+    @inject(TYPES.Grid) @optional() protected grid: Grid = {
+        x: ResizeElementHandler.defaultResizeX,
+        y: ResizeElementHandler.defaultResizeY
+    };
 
     protected isEditMode = false;
 
-    constructor(@inject(TYPES.ISnapper) @optional() protected readonly snapper?: ISnapper) {
-        if (snapper instanceof GridSnapper) {
-            this.grid = snapper.grid;
-        }
-    }
+    constructor(@inject(TYPES.ISnapper) @optional() protected readonly snapper?: ISnapper) {}
 
     @postConstruct()
     protected init(): void {

package/src/features/accessibility/view-key-tools/movement-key-tool.ts

@@ -20,7 +20,8 @@ import { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
 import { GLSPActionDispatcher } from '../../../base/action-dispatcher';
 import { SelectionService } from '../../../base/selection-service';
 import { Tool } from '../../../base/tool-manager/tool';
-import { GridSnapper, unsnapModifier, useSnap } from '../../change-bounds/snap';
+import { unsnapModifier, useSnap } from '../../change-bounds/snap';
+import { Grid } from '../../grid';
 import { AccessibleKeyShortcutProvider, SetAccessibleKeyShortcutAction } from '../key-shortcut/accessible-key-shortcut';
 import { MoveElementAction, MoveViewportAction } from '../move-zoom/move-handler';
 
@@ -33,18 +34,22 @@ export class MovementKeyTool implements Tool {
 
     isEditTool = true;
 
-    protected readonly movementKeyListener = new MoveKeyListener(this);
+    protected movementKeyListener: MoveKeyListener;
 
     @inject(KeyTool) protected readonly keytool: KeyTool;
     @inject(SelectionService) selectionService: SelectionService;
     @inject(TYPES.ISnapper) @optional() readonly snapper?: ISnapper;
     @inject(TYPES.IActionDispatcher) readonly actionDispatcher: GLSPActionDispatcher;
+    @optional() @inject(TYPES.Grid) protected grid: Grid;
 
     get id(): string {
         return MovementKeyTool.ID;
     }
 
     enable(): void {
+        if (!this.movementKeyListener) {
+            this.movementKeyListener = new MoveKeyListener(this, this.grid);
+        }
         this.keytool.register(this.movementKeyListener);
         this.movementKeyListener.registerShortcutKey();
     }
@@ -55,22 +60,19 @@ export class MovementKeyTool implements Tool {
 }
 
 export class MoveKeyListener extends KeyListener implements AccessibleKeyShortcutProvider {
-    // Default x distance used if GridSnapper is not provided
+    // Default x distance used if grid is not provided
     static readonly defaultMoveX = 20;
 
-    // Default y distance used if GridSnapper is not provided
+    // Default y distance used if grid is not provided
     static readonly defaultMoveY = 20;
 
     protected readonly token = MoveKeyListener.name;
 
-    protected grid = { x: MoveKeyListener.defaultMoveX, y: MoveKeyListener.defaultMoveY };
-
-    constructor(protected readonly tool: MovementKeyTool) {
+    constructor(
+        protected readonly tool: MovementKeyTool,
+        protected grid: Grid = { x: MoveKeyListener.defaultMoveX, y: MoveKeyListener.defaultMoveY }
+    ) {
         super();
-
-        if (this.tool.snapper instanceof GridSnapper) {
-            this.grid = this.tool.snapper.grid;
-        }
     }
 
     registerShortcutKey(): void {

package/src/features/change-bounds/{snap.spec.ts → point-position-updater.spec.ts}

@@ -16,19 +16,8 @@
 
 import { GModelElement } from '@eclipse-glsp/sprotty';
 import { expect } from 'chai';
+import { GridSnapper } from '../grid';
 import { PointPositionUpdater } from './point-position-updater';
-import { GridSnapper } from './snap';
-
-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 });
-    });
-});
 
 describe('PointPositionUpdater', () => {
     it('updatePosition with no last drag position', () => {

package/src/features/change-bounds/snap.ts

@@ -14,30 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 /* eslint-disable @typescript-eslint/no-shadow */
-import { GModelElement, ISnapper, KeyboardModifier, Point } from '@eclipse-glsp/sprotty';
-import { injectable } from 'inversify';
-
-/**
- * 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 }));
- * ```
- */
-@injectable()
-export class GridSnapper implements ISnapper {
-    constructor(public grid: { x: number; y: number } = { x: 10, y: 10 }) {}
-
-    snap(position: Point, _element: GModelElement): Point {
-        return {
-            x: Math.round(position.x / this.grid.x) * this.grid.x,
-            y: Math.round(position.y / this.grid.y) * this.grid.y
-        };
-    }
-}
+import { KeyboardModifier } from '@eclipse-glsp/sprotty';
 
 export function useSnap(event: MouseEvent | KeyboardEvent): boolean {
     return !event.shiftKey;

package/src/features/debug/debug-bounds-decorator.tsx

@@ -0,0 +1,171 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+/* eslint-disable max-len */
+
+import { Bounds, GModelElement, IVNodePostprocessor, Point, TYPES, isBoundsAware, setClass, svg } from '@eclipse-glsp/sprotty';
+import { inject, injectable, optional } from 'inversify';
+import { VNode } from 'snabbdom';
+import { GGraph } from '../../model';
+import { BoundsAwareModelElement } from '../../utils';
+import { DebugManager } from './debug-manager';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const JSX = { createElement: svg };
+
+@injectable()
+export class DebugBoundsDecorator implements IVNodePostprocessor {
+    @inject(TYPES.IDebugManager) @optional() protected debugManager?: DebugManager;
+
+    decorate(vnode: VNode, element: GModelElement): VNode {
+        if (!this.debugManager?.isDebugEnabled) {
+            return vnode;
+        }
+        if (isBoundsAware(element)) {
+            this.decorateBoundsAware(vnode, element);
+        }
+        if (element instanceof GGraph) {
+            this.decorateGraph(vnode, element);
+        }
+        return vnode;
+    }
+
+    postUpdate(): void {}
+
+    protected get decorationSize(): number {
+        return 5;
+    }
+
+    protected decorateGraph(vnode: VNode, graph: GGraph): void {
+        setClass(vnode, 'debug-bounds', true);
+        const svgChild = vnode.children?.find(child => typeof child !== 'string' && child.sel === 'svg') as VNode | undefined;
+        const group = svgChild?.children?.find(child => typeof child !== 'string' && child.sel === 'g') as VNode | undefined;
+        group?.children?.push(this.renderOrigin(graph));
+    }
+
+    protected renderOrigin(graph: GGraph): VNode {
+        return (
+            <polyline
+                class-debug-bounds-decoration={true}
+                class-debug-bounds-origin={true}
+                points={`0,${this.decorationSize} 0,0  ${this.decorationSize},0`}
+            >
+                <title>Origin = x: 0, y: 0</title>
+            </polyline>
+        );
+    }
+
+    protected decorateBoundsAware(vnode: VNode, element: BoundsAwareModelElement): void {
+        setClass(vnode, 'debug-bounds', true);
+        vnode.children?.push(this.renderTopLeftCorner(element));
+        vnode.children?.push(this.renderTopRightCorner(element));
+        vnode.children?.push(this.renderBottomLeftCorner(element));
+        vnode.children?.push(this.renderBottomRightCorner(element));
+        vnode.children?.push(this.renderCenter(element));
+    }
+
+    protected renderTopLeftCorner(element: BoundsAwareModelElement): VNode {
+        const position = Bounds.topLeft(element.bounds);
+        const topLeft = Bounds.topLeft(element.bounds);
+        const corner = Point.subtract(topLeft, position);
+        return (
+            <polyline
+                class-debug-bounds-decoration={true}
+                class-debug-bounds-top-left={true}
+                points={`${corner.x},${corner.y + this.decorationSize} ${corner.x},${corner.y} ${corner.x + this.decorationSize},${corner.y}`}
+            >
+                <title>
+                    Top Left = x: {topLeft.x}, y: {topLeft.y}
+                </title>
+            </polyline>
+        );
+    }
+
+    protected renderTopRightCorner(element: BoundsAwareModelElement): VNode {
+        const position = Bounds.topLeft(element.bounds);
+        const topRight = Bounds.topRight(element.bounds);
+        const corner = Point.subtract(topRight, position);
+        return (
+            <polyline
+                class-debug-bounds-decoration={true}
+                class-debug-bounds-top-right={true}
+                points={`${corner.x - this.decorationSize},${corner.y} ${corner.x},${corner.y} ${corner.x},${corner.y + this.decorationSize}`}
+            >
+                <title>
+                    Top Right = x: {topRight.x}, y: {topRight.y}
+                </title>
+            </polyline>
+        );
+    }
+
+    protected renderBottomLeftCorner(element: BoundsAwareModelElement): VNode {
+        const position = Bounds.topLeft(element.bounds);
+        const bottomLeft = Bounds.bottomLeft(element.bounds);
+        const corner = Point.subtract(bottomLeft, position);
+        return (
+            <polyline
+                class-debug-bounds-decoration={true}
+                class-debug-bounds-bottom-left={true}
+                points={`${corner.x},${corner.y - this.decorationSize} ${corner.x},${corner.y} ${corner.x + this.decorationSize},${corner.y}`}
+            >
+                <title>
+                    Bottom Left = x: {bottomLeft.x}, y: {bottomLeft.y}
+                </title>
+            </polyline>
+        );
+    }
+
+    protected renderBottomRightCorner(element: BoundsAwareModelElement): VNode {
+        const position = Bounds.topLeft(element.bounds);
+        const bottomRight = Bounds.bottomRight(element.bounds);
+        const corner = Point.subtract(bottomRight, position);
+        return (
+            <polyline
+                class-debug-bounds-decoration={true}
+                class-debug-bounds-bottom-right={true}
+                points={`${corner.x - this.decorationSize},${corner.y} ${corner.x},${corner.y} ${corner.x},${corner.y - this.decorationSize}`}
+            >
+                <title>
+                    Bottom Right = x: {bottomRight.x}, y: {bottomRight.y}
+                </title>
+            </polyline>
+        );
+    }
+
+    protected renderCenter(element: BoundsAwareModelElement): VNode {
+        const bounds = element.bounds;
+        const position = Bounds.topLeft(bounds);
+        const center = Bounds.center(bounds);
+        const corner = Point.subtract(center, position);
+        return (
+            <g>
+                <title>
+                    Center = x: {center.x}, y: {center.y}
+                    &#013;Bounds = x: {bounds.x}, y: {bounds.y}, width: {bounds.width}, height: {bounds.height}
+                </title>
+                <polyline
+                    class-debug-bounds-decoration={true}
+                    class-debug-bounds-center={true}
+                    points={`${corner.x - this.decorationSize / 2},${corner.y - this.decorationSize / 2} ${corner.x + this.decorationSize / 2},${corner.y + this.decorationSize / 2}`}
+                ></polyline>
+                <polyline
+                    class-debug-bounds-decoration={true}
+                    class-debug-bounds-center={true}
+                    points={`${corner.x + this.decorationSize / 2},${corner.y - this.decorationSize / 2} ${corner.x - this.decorationSize / 2},${corner.y + this.decorationSize / 2}`}
+                ></polyline>
+            </g>
+        );
+    }
+}

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

@@ -0,0 +1,56 @@
+/********************************************************************************
+ * 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, TYPES } from '@eclipse-glsp/sprotty';
+import { inject, injectable, postConstruct } from 'inversify';
+import { FeedbackEmitter, IFeedbackActionDispatcher } from '../../base';
+import { EnableDebugModeAction } from './debug-model';
+
+@injectable()
+export class DebugManager implements IActionHandler {
+    protected _debugEnabled: boolean = false;
+    protected debugFeedback: FeedbackEmitter;
+
+    @inject(TYPES.IFeedbackActionDispatcher)
+    protected feedbackDispatcher: IFeedbackActionDispatcher;
+
+    get isDebugEnabled(): boolean {
+        return this._debugEnabled;
+    }
+
+    handle(action: EnableDebugModeAction): void {
+        this._debugEnabled = action.enable;
+    }
+
+    @postConstruct()
+    protected init(): void {
+        this.debugFeedback = this.feedbackDispatcher.createEmitter();
+    }
+
+    setDebugEnabled(visible: boolean): void {
+        if (!visible) {
+            this.debugFeedback.dispose();
+        } else {
+            this.debugFeedback
+                .add(EnableDebugModeAction.create({ enable: true }), EnableDebugModeAction.create({ enable: false }))
+                .submit();
+        }
+    }
+
+    toggleDebugEnabled(): void {
+        this.setDebugEnabled(!this._debugEnabled);
+    }
+}