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

package/src/features/viewport/origin-viewport.ts

@@ -0,0 +1,68 @@
+/********************************************************************************
+ * 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, Bounds, BoundsAwareViewportCommand, GModelRoot, TYPES, Viewport, isViewport, limitViewport } from '@eclipse-glsp/sprotty';
+import { inject, injectable } from 'inversify';
+
+export interface OriginViewportAction extends Action {
+    kind: typeof OriginViewportAction.KIND;
+    animate: boolean;
+}
+
+export namespace OriginViewportAction {
+    export const KIND = 'originViewport';
+
+    export function is(object: any): object is OriginViewportAction {
+        return Action.hasKind(object, KIND);
+    }
+
+    export function create(options: { animate?: boolean } = {}): OriginViewportAction {
+        return {
+            kind: KIND,
+            animate: true,
+            ...options
+        };
+    }
+}
+
+@injectable()
+export class OriginViewportCommand extends BoundsAwareViewportCommand {
+    static readonly KIND = OriginViewportAction.KIND;
+
+    constructor(@inject(TYPES.Action) protected action: OriginViewportAction) {
+        super(action.animate);
+    }
+
+    getElementIds(): string[] {
+        return [];
+    }
+
+    protected override initialize(model: GModelRoot): void {
+        if (!isViewport(model)) {
+            return;
+        }
+        this.oldViewport = { scroll: model.scroll, zoom: model.zoom };
+        const newViewport = this.getNewViewport(Bounds.EMPTY, model);
+        if (newViewport) {
+            const { zoomLimits, horizontalScrollLimits, verticalScrollLimits } = this.viewerOptions;
+            this.newViewport = limitViewport(newViewport, model.canvasBounds, horizontalScrollLimits, verticalScrollLimits, zoomLimits);
+        }
+    }
+
+    getNewViewport(_bounds: Bounds, _model: GModelRoot): Viewport | undefined {
+        return { zoom: 1, scroll: { x: 0, y: 0 } };
+    }
+}

package/src/features/viewport/viewport-modules.ts

@@ -27,10 +27,11 @@ import {
     ZoomMouseListener
 } from '@eclipse-glsp/sprotty';
 import { EnableDefaultToolsAction, EnableToolsAction } from '../../base/tool-manager/tool';
+import { FocusDomAction } from '../accessibility/actions';
 import { GLSPScrollMouseListener } from './glsp-scroll-mouse-listener';
-import { RestoreViewportHandler } from './viewport-handler';
+import { OriginViewportCommand } from './origin-viewport';
 import { RepositionCommand } from './reposition';
-import { FocusDomAction } from '../accessibility/actions';
+import { RestoreViewportHandler } from './viewport-handler';
 
 export const viewportModule = new FeatureModule((bind, _unbind, isBound) => {
     const context = { bind, isBound };
@@ -39,6 +40,7 @@ export const viewportModule = new FeatureModule((bind, _unbind, isBound) => {
     configureCommand(context, GetViewportCommand);
     configureCommand(context, SetViewportCommand);
     configureCommand(context, RepositionCommand);
+    configureCommand(context, OriginViewportCommand);
 
     bindAsService(context, TYPES.MouseListener, ZoomMouseListener);
     bindAsService(context, TYPES.MouseListener, GLSPScrollMouseListener);

package/src/views/base-view-module.ts

@@ -27,9 +27,9 @@ import {
     GCompartment,
     GCompartmentView,
     GForeignObjectElement,
-    GGraphView,
     GHtmlRoot,
     GLabel,
+    GLabelView,
     GNode,
     GPort,
     GPreRenderedElement,
@@ -41,17 +41,17 @@ import {
     PreRenderedView,
     RectangularNode,
     RectangularNodeView,
-    GLabelView,
     SvgViewportView,
     configureModelElement,
     moveFeature,
     selectFeature
 } from '@eclipse-glsp/sprotty';
 import { GIssueMarker } from '../features/validation/issue-marker';
+import { GEdge, GGraph } from '../model';
 import { GEdgeView } from './gedge-view';
+import { GGraphView } from './ggraph-view';
 import { GIssueMarkerView } from './issue-marker-view';
 import { RoundedCornerNodeView } from './rounded-corner-view';
-import { GEdge, GGraph } from '../model';
 
 export const baseViewModule = new FeatureModule((bind, unbind, isBound, rebind) => {
     const context = { bind, unbind, isBound, rebind };

package/src/views/ggraph-view.tsx

@@ -0,0 +1,56 @@
+/********************************************************************************
+ * 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 { Bounds, Dimension, Point, RenderingContext, SGraphImpl, SGraphView, TYPES, Writable } from '@eclipse-glsp/sprotty';
+import { inject, injectable, optional } from 'inversify';
+import { VNode } from 'snabbdom';
+import { GridManager, GridStyle } from '../features';
+
+@injectable()
+export class GGraphView extends SGraphView {
+    @inject(TYPES.IGridManager) @optional() protected gridManager?: GridManager;
+
+    override render(model: Readonly<SGraphImpl>, context: RenderingContext): VNode {
+        const graph = super.render(model, context);
+        if (graph.data) {
+            graph.data.style = { ...graph.data.style, ...this.getGridStyle(model, context) };
+        }
+        return graph;
+    }
+
+    protected getGridStyle(model: Readonly<SGraphImpl>, context: RenderingContext): GridStyle {
+        if (!this.gridManager?.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)
+        };
+    }
+
+    protected getBackgroundBounds(viewport: Readonly<SGraphImpl>, context: RenderingContext, gridManager: GridManager): Writable<Bounds> {
+        const position = Point.multiplyScalar(Point.subtract(gridManager.grid, viewport.scroll), viewport.zoom);
+        const size = Dimension.fromPoint(Point.multiplyScalar(gridManager.grid, viewport.zoom));
+        return { ...position, ...size };
+    }
+
+    protected getBackgroundImage(model: Readonly<SGraphImpl>, context: RenderingContext, gridManager: GridManager): string {
+        // 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>')`;
+    }
+}

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

@@ -16,19 +16,25 @@
 
 import {
     Bounds,
+    Dimension,
     EdgeRouterRegistry,
     GViewportRootElement,
     IViewArgs,
+    Point,
     ProjectedViewportView,
     ProjectionParams,
     RenderingContext,
+    SGraphImpl,
+    TYPES,
     ViewProjection,
+    Writable,
     html,
     setAttr,
     setClass
 } from '@eclipse-glsp/sprotty';
-import { inject, injectable } from 'inversify';
+import { inject, injectable, optional } from 'inversify';
 import { VNode, VNodeStyle, h } from 'snabbdom';
+import { GridManager, GridStyle } from '../features';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const JSX = { createElement: html };
@@ -39,15 +45,12 @@ const JSX = { createElement: html };
 @injectable()
 export class GLSPProjectionView extends ProjectedViewportView {
     @inject(EdgeRouterRegistry) edgeRouterRegistry: EdgeRouterRegistry;
+    @inject(TYPES.IGridManager) @optional() protected gridManager?: GridManager;
 
     override render(model: Readonly<GViewportRootElement>, context: RenderingContext, args?: IViewArgs): VNode {
-        const svgElem = this.renderSvg(model, context, args);
-        if (svgElem.data) {
-            svgElem.data!.class = { 'sprotty-graph': true };
-        }
         const rootNode: VNode = (
             <div class-sprotty-graph={false} style={{ width: '100%', height: '100%' }}>
-                {svgElem}
+                {this.renderSvg(model, context, args)}
                 {this.renderProjections(model, context, args)}
             </div>
         );
@@ -63,12 +66,36 @@ export class GLSPProjectionView extends ProjectedViewportView {
         const ns = 'http://www.w3.org/2000/svg';
         const svg = h(
             'svg',
-            { ns, style: { height: '100%' } },
+            { ns, style: { height: '100%', ...this.getGridStyle(model, context) }, class: { 'sprotty-graph': true } },
             h('g', { ns, attrs: { transform } }, context.renderChildren(model, { edgeRouting }))
         );
         return svg;
     }
 
+    protected getGridStyle(model: Readonly<SGraphImpl>, context: RenderingContext): GridStyle {
+        if (!this.gridManager?.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)
+        };
+    }
+
+    protected getBackgroundBounds(viewport: Readonly<SGraphImpl>, context: RenderingContext, gridManager: GridManager): Writable<Bounds> {
+        const position = Point.multiplyScalar(Point.subtract(gridManager.grid, viewport.scroll), viewport.zoom);
+        const size = Dimension.fromPoint(Point.multiplyScalar(gridManager.grid, viewport.zoom));
+        return { ...position, ...size };
+    }
+
+    protected getBackgroundImage(model: Readonly<SGraphImpl>, context: RenderingContext, gridManager: GridManager): string {
+        // 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>')`;
+    }
+
     protected override renderProjectionBar(
         projections: ViewProjection[],
         model: Readonly<GViewportRootElement>,

package/src/views/index.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';