@eclipse-glsp/client 1.0.0 → 1.1.0-RC02

package/src/features/layout/vbox-layout.ts

@@ -49,6 +49,9 @@ export class VBoxLayouterExt extends VBoxLayouter {
 
         const fixedSize = this.getFixedContainerBounds(container, options, layouter);
 
+        const currentWidth = (boundsData.bounds?.width || 0) - options.paddingLeft - options.paddingRight;
+        const currentHeight = (boundsData.bounds?.height || 0) - options.paddingTop - options.paddingBottom;
+
         const maxWidth =
             options.paddingFactor *
             (options.resizeContainer
@@ -60,8 +63,11 @@ export class VBoxLayouterExt extends VBoxLayouter {
                 ? Math.max(fixedSize.height - options.paddingTop - options.paddingBottom, childrenSize.height)
                 : Math.max(0, fixedSize.height - options.paddingTop - options.paddingBottom));
 
+        const width = Math.max(currentWidth, maxWidth);
+        const height = Math.max(currentHeight, maxHeight);
+
         // Remaining size that can be grabbed by children with the vGrab option
-        const grabHeight: number = maxHeight - childrenSize.height;
+        const grabHeight: number = height - childrenSize.height;
         // Number of children that request vGrab
         // FIXME: This approach works fine when only 1 child uses VGrab, but may cause rounding issues
         // when the grabHeight can't be equally shared by all children.
@@ -70,7 +76,7 @@ export class VBoxLayouterExt extends VBoxLayouter {
             .filter(opt => opt.vGrab).length;
 
         if (maxWidth > 0 && maxHeight > 0) {
-            const offset = this.layoutChildren(container, layouter, options, maxWidth, maxHeight, grabHeight, grabbingChildren);
+            const offset = this.layoutChildren(container, layouter, options, width, height, grabHeight, grabbingChildren);
             boundsData.bounds = this.getFinalContainerBounds(container, offset, options, childrenSize.width, childrenSize.height);
             boundsData.boundsChanged = true;
         }
@@ -155,7 +161,14 @@ export class VBoxLayouterExt extends VBoxLayouter {
         grabHeight?: number,
         grabbingChildren?: number
     ): Point {
+        const hAlign = childOptions.hGrab ? 'left' : childOptions.hAlign;
+        const dx = this.getDx(hAlign, bounds, maxWidth);
         let offset = super.layoutChild(child, boundsData, bounds, childOptions, containerOptions, currentOffset, maxWidth, maxHeight);
+        boundsData.bounds = {
+            ...boundsData.bounds!,
+            x: currentOffset.x + dx,
+            y: currentOffset.y
+        };
         if (childOptions.hGrab) {
             boundsData.bounds = {
                 x: boundsData.bounds!.x,
@@ -197,7 +210,7 @@ export class VBoxLayouterExt extends VBoxLayouter {
     }
 
     protected override getChildLayoutOptions(child: SChildElement, containerOptions: VBoxLayoutOptionsExt): VBoxLayoutOptionsExt {
-        return super.getChildLayoutOptions(child, containerOptions) as VBoxLayoutOptionsExt;
+        return super.getChildLayoutOptions(child, this.filterContainerOptions(containerOptions)) as VBoxLayoutOptionsExt;
     }
 
     protected override getLayoutOptions(element: SModelElement): VBoxLayoutOptionsExt {
@@ -250,7 +263,11 @@ export class VBoxLayouterExt extends VBoxLayouter {
         };
     }
 
-    protected override spread(a: VBoxLayoutOptionsExt, b: VBoxLayoutOptionsExt): VBoxLayoutOptionsExt {
-        return { ...a, ...b };
+    protected filterContainerOptions(containerOptions: VBoxLayoutOptionsExt): VBoxLayoutOptionsExt {
+        // Reset object-specific layout options to default before merging,
+        // to make sure they won't be inherited (grab, prefSize)
+        // eslint-disable-next-line no-null/no-null
+        const localOptions = { vGrab: false, hGrab: false, prefHeight: null, prefWidth: null };
+        return { ...containerOptions, ...localOptions };
     }
 }

package/src/features/tools/change-bounds-tool.ts

@@ -13,7 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import {
+ import {
     Action,
     Bounds,
     ChangeBoundsOperation,
@@ -44,10 +44,10 @@ import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
 import { TYPES } from '../../base/types';
 import { isValidMove, isValidSize } from '../../utils/layout-utils';
 import {
+    calcElementAndRoutingPoints,
     forEachElement,
     isNonRoutableSelectedMovableBoundsAware,
-    toElementAndBounds,
-    toElementAndRoutingPoints
+    toElementAndBounds
 } from '../../utils/smodel-util';
 import { isBoundsAwareMoveable, isResizable, Resizable, ResizeHandleLocation, SResizeHandle } from '../change-bounds/model';
 import {
@@ -237,19 +237,22 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
     }
 
     protected handleMoveRoutingPointsOnServer(target: SModelElement): Operation[] {
-        const result: Operation[] = [];
         const newRoutingPoints: ElementAndRoutingPoints[] = [];
-        forEachElement(target.index, isNonRoutableSelectedMovableBoundsAware, element => {
+        const routerRegistry = this.tool.edgeRouterRegistry;
+        if (routerRegistry) {
             //  If client routing is enabled -> delegate routingpoints of connected edges to server
-            if (this.tool.edgeRouterRegistry && element instanceof SConnectableElement) {
-                element.incomingEdges.map(toElementAndRoutingPoints).forEach(ear => newRoutingPoints.push(ear));
-                element.outgoingEdges.map(toElementAndRoutingPoints).forEach(ear => newRoutingPoints.push(ear));
-            }
-        });
-        if (newRoutingPoints.length > 0) {
-            result.push(ChangeRoutingPointsOperation.create(newRoutingPoints));
+            forEachElement(target.index, isNonRoutableSelectedMovableBoundsAware, element => {
+                if (element instanceof SConnectableElement) {
+                    element.incomingEdges.map(connectable => calcElementAndRoutingPoints(connectable, routerRegistry))
+                        .forEach(ear => newRoutingPoints.push(ear));
+                    element.outgoingEdges.map(connectable => calcElementAndRoutingPoints(connectable, routerRegistry))
+                        .forEach(ear => newRoutingPoints.push(ear));
+                }
+            });
         }
-        return result;
+        return newRoutingPoints.length > 0
+         ? [ChangeRoutingPointsOperation.create(newRoutingPoints)]
+         : [];
     }
 
     protected handleResize(activeResizeHandle: SResizeHandle): Action[] {

package/src/features/tools/di.config.ts

@@ -18,6 +18,7 @@ import { ContainerModule, interfaces } from 'inversify';
 import { configureActionHandler, configureModelElement } from 'sprotty';
 import { FocusStateChangedAction } from '../../base/actions/focus-change-action';
 import { TYPES } from '../../base/types';
+import { GLSPSvgExporter } from '../export/glsp-svg-exporter';
 import { MARQUEE } from '../tool-feedback/marquee-tool-feedback';
 import { ChangeBoundsTool } from './change-bounds-tool';
 import { DelKeyDeleteTool, MouseDeleteTool } from './delete-tool';
@@ -34,7 +35,7 @@ import { MarqueeView } from './view';
  * Registers the default tools of GLSP (node and edge creation, changing bounds, edge editing, deletion)
  * and adds the marquee selection tool.
  */
-export const toolsModule = new ContainerModule((bind, _unbind, isBound) => {
+export const toolsModule = new ContainerModule((bind, _unbind, isBound, rebind) => {
     // Register default tools
     bind(TYPES.IDefaultTool).to(ChangeBoundsTool);
     bind(TYPES.IDefaultTool).to(EdgeEditTool);
@@ -50,6 +51,9 @@ export const toolsModule = new ContainerModule((bind, _unbind, isBound) => {
     configureMarqueeTool({ bind, isBound });
     configureActionHandler({ bind, isBound }, TriggerNodeCreationAction.KIND, NodeCreationTool);
     configureActionHandler({ bind, isBound }, TriggerEdgeCreationAction.KIND, EdgeCreationTool);
+
+    bind(GLSPSvgExporter).toSelf().inSingletonScope();
+    rebind(TYPES.SvgExporter).toService(GLSPSvgExporter);
 });
 
 export function configureMarqueeTool(context: { bind: interfaces.Bind; isBound: interfaces.IsBound }): void {

package/src/features/tools/edge-edit-tool.ts

@@ -31,7 +31,7 @@ import {
 } from 'sprotty';
 import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
 import { TYPES } from '../../base/types';
-import { isRoutable, isRoutingHandle } from '../../utils/smodel-util';
+import { calcElementAndRoutingPoints, isRoutable, isRoutingHandle } from '../../utils/smodel-util';
 import { isReconnectable, isReconnectHandle, isSourceRoutingHandle, isTargetRoutingHandle, SReconnectHandle } from '../reconnect/model';
 import { SelectionListener, SelectionService } from '../select/selection-service';
 import { DrawFeedbackEdgeAction, feedbackEdgeId, RemoveFeedbackEdgeAction } from '../tool-feedback/creation-tool-feedback';
@@ -53,7 +53,7 @@ export class EdgeEditTool extends BaseGLSPTool {
 
     @inject(TYPES.SelectionService) protected selectionService: SelectionService;
     @inject(AnchorComputerRegistry) protected anchorRegistry: AnchorComputerRegistry;
-    @inject(EdgeRouterRegistry) @optional() protected edgeRouterRegistry?: EdgeRouterRegistry;
+    @inject(EdgeRouterRegistry) @optional() readonly edgeRouterRegistry?: EdgeRouterRegistry;
     @inject(TYPES.ISnapper) @optional() readonly snapper?: ISnapper;
 
     protected feedbackEdgeSourceMovingListener: FeedbackEdgeSourceMovingMouseListener;
@@ -237,16 +237,15 @@ class EdgeEditListener extends DragAwareMouseListener implements SelectionListen
             // reroute actions
             const latestEdge = target.index.getById(this.edge.id);
             if (latestEdge && isRoutable(latestEdge)) {
-                result.push(
-                    ChangeRoutingPointsOperation.create([{ elementId: latestEdge.id, newRoutingPoints: latestEdge.routingPoints }])
-                );
+                const newRoutingPoints = calcElementAndRoutingPoints(latestEdge, this.tool.edgeRouterRegistry);
+                result.push(ChangeRoutingPointsOperation.create([newRoutingPoints]));
                 this.routingHandle = undefined;
             }
         }
         return result;
     }
 
-    override mouseOver(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseOver(target: SModelElement, _event: MouseEvent): Action[] {
         if (this.edge && this.isReconnecting()) {
             const currentTarget = findParentByFeature(target, isConnectable);
             if (!this.newConnectable || currentTarget !== this.newConnectable) {

package/src/sprotty-reexport.ts

@@ -104,7 +104,12 @@ export {
 export * from 'sprotty/lib/features/bounds/stack-layout';
 export * from 'sprotty/lib/features/bounds/vbox-layout';
 export * from 'sprotty/lib/features/bounds/views';
-export * from 'sprotty/lib/features/button/button-handler';
+export {
+    ButtonHandlerRegistry,
+    configureButtonHandler,
+    IButtonHandler,
+    IButtonHandlerRegistration
+} from 'sprotty/lib/features/button/button-handler';
 export * from 'sprotty/lib/features/button/model';
 export * from 'sprotty/lib/features/command-palette/action-providers';
 export * from 'sprotty/lib/features/command-palette/command-palette';

package/src/utils/smodel-util.ts

@@ -16,6 +16,7 @@
 import { distinctAdd, ElementAndBounds, ElementAndRoutingPoints, remove, SModelElementSchema, TypeGuard } from '@eclipse-glsp/protocol';
 import {
     BoundsAware,
+    EdgeRouterRegistry,
     isBoundsAware,
     isMoveable,
     isSelectable,
@@ -214,7 +215,7 @@ export function toElementAndBounds(element: BoundsAwareModelElement): ElementAnd
 
 /**
  * Helper function to translate a given {@link SRoutableElement} into its corresponding
- * {@ElementAndRoutingPoints ElementAndBounds} representation.
+ * {@link ElementAndRoutingPoints} representation.
  * @param element The element to translate.
  * @returns The corresponding {@link ElementAndRoutingPoints} for the given element.
  */
@@ -225,6 +226,23 @@ export function toElementAndRoutingPoints(element: SRoutableElement): ElementAnd
     };
 }
 
+/**
+ * Helper function to calculate the {@link ElementAndRoutingPoints} for a given {@link SRoutableElement}.
+ * If client layout is activated, i.e., the edge routing registry is given and has a router for the element, then the routing
+ * points from the calculated route are used, otherwise we use the already specified routing points of the {@link SRoutableElement}.
+ * @param element The element to translate.
+ * @param edgeRouterRegistry the edge router registry
+ * @returns The corresponding {@link ElementAndRoutingPoints} for the given element.
+ */
+export function calcElementAndRoutingPoints(element: SRoutableElement, edgeRouterRegistry?: EdgeRouterRegistry): ElementAndRoutingPoints {
+    const router = edgeRouterRegistry?.get(element.routerKind);
+    // filter duplicate points (same x,y coordinates) and only keep actual routing points (no start or target, no volatile points)
+    const clientRoutingPoints = router?.route(element)
+        .filter((point, idx, route) => idx === route.findIndex(otherPoint => otherPoint.x === point.x && otherPoint.y === point.y))
+        .filter(point => point.kind === 'linear' || point.kind === 'bezier-junction');
+    return { elementId: element.id, newRoutingPoints: clientRoutingPoints || element.routingPoints };
+}
+
 /**
  * Checks if the model is compatible with the passed type string.
  * (either has the same type or a subtype of this type)
@@ -247,3 +265,4 @@ export function getElementTypeId(input: SModelElement | SModelElementSchema | st
         return (input as any)['type'] as string;
     }
 }
+

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

@@ -25,6 +25,7 @@ import {
     ProjectedViewportView,
     ProjectionParams,
     RenderingContext,
+    setAttr,
     setClass,
     ViewportRootElement,
     ViewProjection
@@ -36,12 +37,18 @@ import {
 @injectable()
 export class GLSPProjectionView extends ProjectedViewportView {
     override render(model: Readonly<ViewportRootElement>, context: RenderingContext, args?: IViewArgs): VNode {
-        return (
-            <div class-sprotty-graph={true} style={{ width: '100%' }}>
-                {this.renderSvg(model, context, args)}
+        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.renderProjections(model, context, args)}
             </div>
         );
+        setAttr(rootNode, 'tabindex', 0);
+        return rootNode;
     }
 
     protected override renderSvg(model: Readonly<ViewportRootElement>, context: RenderingContext, args?: IViewArgs): VNode {