@eclipse-glsp/client 0.10.0-next.bb1c2fd.157 → 0.10.0-next.e5fcffe.169

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021 EclipseSource and others.
+ * Copyright (c) 2021-2022 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
@@ -13,18 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Bounds, Dimension, Point } from '@eclipse-glsp/protocol';
 import { injectable } from 'inversify';
-import {
-    Bounds,
-    BoundsData,
-    Dimension,
-    isValidDimension,
-    LayoutContainer,
-    Point,
-    SChildElement,
-    SParentElement,
-    StatefulLayouter
-} from 'sprotty';
+import { BoundsData, LayoutContainer, SChildElement, SParentElement, StatefulLayouter } from 'sprotty';
 import { AbstractLayout } from 'sprotty/lib/features/bounds/abstract-layout';
 import { AbstractLayoutOptions } from 'sprotty/lib/features/bounds/layout-options';
 
@@ -35,7 +26,7 @@ import { AbstractLayoutOptions } from 'sprotty/lib/features/bounds/layout-option
 export class FreeFormLayouter extends AbstractLayout<AbstractLayoutOptions> {
     static KIND = 'freeform';
 
-    layout(container: SParentElement & LayoutContainer, layouter: StatefulLayouter): void {
+    override layout(container: SParentElement & LayoutContainer, layouter: StatefulLayouter): void {
         const boundsData = layouter.getBoundsData(container);
         const options = this.getLayoutOptions(container);
         const childrenSize = this.getChildrenSize(container, options, layouter);
@@ -64,7 +55,7 @@ export class FreeFormLayouter extends AbstractLayout<AbstractLayoutOptions> {
         let maxY = 0;
         container.children.forEach(child => {
             const bounds = layouter.getBoundsData(child).bounds;
-            if (bounds !== undefined && isValidDimension(bounds)) {
+            if (bounds !== undefined && Dimension.isValid(bounds)) {
                 const childMaxX = bounds.x + bounds.width;
                 const childMaxY = bounds.y + bounds.height;
                 maxX = Math.max(maxX, childMaxX);
@@ -97,7 +88,7 @@ export class FreeFormLayouter extends AbstractLayout<AbstractLayoutOptions> {
         return currentOffset;
     }
 
-    protected getFinalContainerBounds(
+    protected override getFinalContainerBounds(
         container: SParentElement & LayoutContainer,
         lastOffset: Point,
         options: AbstractLayoutOptions,

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

@@ -0,0 +1,256 @@
+/********************************************************************************
+ * Copyright (c) 2021-2022 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 } from '@eclipse-glsp/protocol';
+import { injectable } from 'inversify';
+import {
+    BoundsData,
+    isBoundsAware,
+    isLayoutableChild,
+    LayoutContainer,
+    SChildElement,
+    SModelElement,
+    SParentElement,
+    StatefulLayouter,
+    HBoxLayouter,
+    HBoxLayoutOptions
+} from 'sprotty';
+
+export interface HBoxLayoutOptionsExt extends HBoxLayoutOptions {
+    hGrab: boolean;
+    vGrab: boolean;
+    prefWidth: number | null;
+    prefHeight: number | null;
+}
+
+/**
+ * Extends HBoxLayouter to support additional layout options
+ */
+@injectable()
+export class HBoxLayouterExt extends HBoxLayouter {
+    static override KIND = HBoxLayouter.KIND;
+
+    override layout(container: SParentElement & LayoutContainer, layouter: StatefulLayouter): void {
+        const boundsData = layouter.getBoundsData(container);
+        const options = this.getLayoutOptions(container);
+        const childrenSize = this.getChildrenSize(container, options, layouter);
+
+        const fixedSize = this.getFixedContainerBounds(container, options, layouter);
+
+        const maxWidth =
+            options.paddingFactor *
+            (options.resizeContainer
+                ? Math.max(fixedSize.width - options.paddingLeft - options.paddingRight, childrenSize.width)
+                : Math.max(0, fixedSize.width - options.paddingLeft - options.paddingRight));
+        const maxHeight =
+            options.paddingFactor *
+            (options.resizeContainer
+                ? Math.max(fixedSize.height - options.paddingTop - options.paddingBottom, childrenSize.height)
+                : Math.max(0, fixedSize.height - options.paddingTop - options.paddingBottom));
+
+        // Remaining size that can be grabbed by children with the hGrab option
+        const grabWidth: number = maxWidth - childrenSize.width;
+        // Number of children that request hGrab
+        // FIXME: This approach works fine when only 1 child uses HGrab, but may cause rounding issues
+        // when the grabHeight can't be equally shared by all children.
+        const grabbingChildren = container.children
+            .map(child => this.getChildLayoutOptions(child, options))
+            .filter(opt => opt.hGrab).length;
+
+        if (maxWidth > 0 && maxHeight > 0) {
+            const offset = this.layoutChildren(container, layouter, options, maxWidth, maxHeight, grabWidth, grabbingChildren);
+            boundsData.bounds = this.getFinalContainerBounds(container, offset, options, childrenSize.width, childrenSize.height);
+            boundsData.boundsChanged = true;
+        }
+    }
+
+    protected override getChildrenSize(
+        container: SParentElement & LayoutContainer,
+        containerOptions: HBoxLayoutOptionsExt,
+        layouter: StatefulLayouter
+    ): Dimension {
+        let maxWidth = 0;
+        let maxHeight = -1;
+        let isFirst = true;
+        container.children.forEach(child => {
+            if (isLayoutableChild(child)) {
+                const bounds = layouter.getBoundsData(child).bounds;
+                if (bounds !== undefined && Dimension.isValid(bounds)) {
+                    maxWidth += bounds.width;
+                    if (isFirst) {
+                        isFirst = false;
+                    } else {
+                        maxWidth += containerOptions.hGap;
+                    }
+                    maxHeight = Math.max(maxHeight, bounds.height);
+                }
+            }
+        });
+        const result = {
+            width: maxWidth,
+            height: maxHeight
+        };
+        return result;
+    }
+
+    protected override layoutChildren(
+        container: SParentElement & LayoutContainer,
+        layouter: StatefulLayouter,
+        containerOptions: HBoxLayoutOptionsExt,
+        maxWidth: number,
+        maxHeight: number,
+        grabWidth?: number,
+        grabbingChildren?: number
+    ): Point {
+        let currentOffset: Point = {
+            x: containerOptions.paddingLeft + 0.5 * (maxWidth - maxWidth / containerOptions.paddingFactor),
+            y: containerOptions.paddingTop + 0.5 * (maxHeight - maxHeight / containerOptions.paddingFactor)
+        };
+
+        container.children.forEach(child => {
+            if (isLayoutableChild(child)) {
+                const boundsData = layouter.getBoundsData(child);
+                const bounds = boundsData.bounds;
+                const childOptions = this.getChildLayoutOptions(child, containerOptions);
+                if (bounds !== undefined && Dimension.isValid(bounds)) {
+                    currentOffset = this.layoutChild(
+                        child,
+                        boundsData,
+                        bounds,
+                        childOptions,
+                        containerOptions,
+                        currentOffset,
+                        maxWidth,
+                        maxHeight,
+                        grabWidth,
+                        grabbingChildren
+                    );
+                }
+            }
+        });
+        return currentOffset;
+    }
+
+    protected override layoutChild(
+        child: SChildElement,
+        boundsData: BoundsData,
+        bounds: Bounds,
+        childOptions: HBoxLayoutOptionsExt,
+        containerOptions: HBoxLayoutOptionsExt,
+        currentOffset: Point,
+        maxWidth: number,
+        maxHeight: number,
+        grabWidth?: number,
+        grabbingChildren?: number
+    ): Point {
+        let offset = super.layoutChild(child, boundsData, bounds, childOptions, containerOptions, currentOffset, maxWidth, maxHeight);
+        if (childOptions.hGrab) {
+            boundsData.bounds = {
+                x: boundsData.bounds!.x,
+                y: boundsData.bounds!.y,
+                width: boundsData.bounds!.width,
+                height: maxHeight
+            };
+            boundsData.boundsChanged = true;
+        }
+        if (childOptions.hGrab && grabWidth && grabbingChildren) {
+            const width = boundsData.bounds!.width + grabWidth / grabbingChildren;
+            boundsData.bounds = {
+                x: boundsData.bounds!.x,
+                y: boundsData.bounds!.y,
+                width: width,
+                height: boundsData.bounds!.height
+            };
+            boundsData.boundsChanged = true;
+            offset = { x: currentOffset.x + width, y: currentOffset.y };
+        }
+        return offset;
+    }
+
+    protected override getFixedContainerBounds(
+        container: SModelElement,
+        layoutOptions: HBoxLayoutOptionsExt,
+        layouter: StatefulLayouter
+    ): Bounds {
+        const currentContainer = container;
+        // eslint-disable-next-line no-constant-condition
+        if (isBoundsAware(currentContainer)) {
+            const bounds = currentContainer.bounds;
+            const elementOptions = this.getElementLayoutOptions(currentContainer);
+            const width = elementOptions?.prefWidth ?? 0;
+            const height = elementOptions?.prefHeight ?? 0;
+            return { ...bounds, width, height };
+        }
+        return Bounds.EMPTY;
+    }
+
+    protected override getChildLayoutOptions(child: SChildElement, containerOptions: HBoxLayoutOptionsExt): HBoxLayoutOptionsExt {
+        return super.getChildLayoutOptions(child, containerOptions) as HBoxLayoutOptionsExt;
+    }
+
+    protected override getLayoutOptions(element: SModelElement): HBoxLayoutOptionsExt {
+        return super.getLayoutOptions(element) as HBoxLayoutOptionsExt;
+    }
+
+    protected getElementLayoutOptions(element: SModelElement): HBoxLayoutOptionsExt | undefined {
+        return (element as any).layoutOptions;
+    }
+
+    protected override getFinalContainerBounds(
+        container: SParentElement & LayoutContainer,
+        lastOffset: Point,
+        options: HBoxLayoutOptionsExt,
+        maxWidth: number,
+        maxHeight: number
+    ): Bounds {
+        const elementOptions = this.getElementLayoutOptions(container);
+        const width = elementOptions?.prefWidth ?? options.minWidth;
+        const height = elementOptions?.prefHeight ?? options.minHeight;
+
+        const result = {
+            x: container.bounds.x,
+            y: container.bounds.y,
+            width: Math.max(width, maxWidth + options.paddingLeft + options.paddingRight),
+            height: Math.max(height, maxHeight + options.paddingTop + options.paddingBottom)
+        };
+
+        return result;
+    }
+
+    protected override getDefaultLayoutOptions(): HBoxLayoutOptionsExt {
+        return {
+            resizeContainer: true,
+            paddingTop: 5,
+            paddingBottom: 5,
+            paddingLeft: 5,
+            paddingRight: 5,
+            paddingFactor: 1,
+            hGap: 1,
+            vAlign: 'center',
+            minWidth: 0,
+            minHeight: 0,
+            hGrab: false,
+            vGrab: false,
+            // eslint-disable-next-line no-null/no-null
+            prefHeight: null,
+            // eslint-disable-next-line no-null/no-null
+            prefWidth: null
+        };
+    }
+
+    protected override spread(a: HBoxLayoutOptionsExt, b: HBoxLayoutOptionsExt): HBoxLayoutOptionsExt {
+        return { ...a, ...b };
+    }
+}

package/src/features/layout/layout-commands.spec.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2021 EclipseSource and others.
+ * Copyright (c) 2019-2022 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
@@ -13,8 +13,16 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-/* eslint-disable import/no-deprecated,no-unused-expressions */
-import { Action, Bounds, ChangeBoundsOperation, ElementAndBounds } from '@eclipse-glsp/protocol';
+/* eslint-disable deprecation/deprecation */
+import {
+    Action,
+    Bounds,
+    ChangeBoundsOperation,
+    ElementAndBounds,
+    RequestAction,
+    ResponseAction,
+    SetBoundsAction
+} from '@eclipse-glsp/protocol';
 import { expect } from 'chai';
 import { Container } from 'inversify';
 import 'mocha';
@@ -29,16 +37,12 @@ import {
     IActionDispatcher,
     MoveAction,
     MoveCommand,
-    RequestAction,
-    ResponseAction,
     SChildElement,
-    SetBoundsAction,
     SetBoundsCommand,
     SGraphFactory,
-    SModelRoot,
-    TYPES
+    SModelRoot
 } from 'sprotty';
-import { GLSP_TYPES } from '../../base/types';
+import { TYPES } from '../../base/types';
 import { resizeFeature } from '../change-bounds/model';
 import { SelectionService } from '../select/selection-service';
 import { FeedbackActionDispatcher } from '../tool-feedback/feedback-action-dispatcher';
@@ -69,12 +73,12 @@ class MockActionDispatcher implements IActionDispatcher {
 
 const container = new Container();
 container.load(defaultModule);
-container.bind(GLSP_TYPES.IFeedbackActionDispatcher).to(FeedbackActionDispatcher).inSingletonScope();
+container.bind(TYPES.IFeedbackActionDispatcher).to(FeedbackActionDispatcher).inSingletonScope();
 container.bind(SelectionService).toSelf().inSingletonScope();
-container.bind(GLSP_TYPES.SelectionService).toService(SelectionService);
+container.bind(TYPES.SelectionService).toService(SelectionService);
 container.rebind(TYPES.IModelFactory).to(SGraphFactory).inSingletonScope();
 const graphFactory = container.get<SGraphFactory>(TYPES.IModelFactory);
-const selectionService = container.get<SelectionService>(GLSP_TYPES.SelectionService);
+const selectionService = container.get<SelectionService>(TYPES.SelectionService);
 
 const actionDispatcher = new MockActionDispatcher();
 
@@ -128,7 +132,7 @@ describe('AlignElementsCommand', () => {
             { elementId: 'node2', newPosition: { x: 222, y: 222 }, newSize: defaultSize },
             { elementId: 'node3', newPosition: { x: 333, y: 333 }, newSize: defaultSize }
         ]);
-        const action = new AlignElementsAction(['node1', 'node2', 'node3'], Alignment.Left);
+        const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Left });
         const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
         command.execute(newContext(newModel));
 
@@ -148,7 +152,7 @@ describe('AlignElementsCommand', () => {
             { elementId: 'node2', newPosition: { x: 222, y: 222 }, newSize: defaultSize },
             { elementId: 'node3', newPosition: { x: 333, y: 333 }, newSize: defaultSize }
         ]);
-        const action = new AlignElementsAction(['node1', 'node2', 'node3'], Alignment.Right);
+        const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Right });
         const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
         command.execute(newContext(newModel));
 
@@ -168,7 +172,7 @@ describe('AlignElementsCommand', () => {
             { elementId: 'node2', newPosition: { x: 222, y: 222 }, newSize: defaultSize },
             { elementId: 'node3', newPosition: { x: 333, y: 333 }, newSize: defaultSize }
         ]);
-        const action = new AlignElementsAction(['node1', 'node2', 'node3'], Alignment.Center);
+        const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Center });
         const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
         command.execute(newContext(newModel));
 
@@ -188,7 +192,7 @@ describe('AlignElementsCommand', () => {
             { elementId: 'node2', newPosition: { x: 222, y: 222 }, newSize: defaultSize },
             { elementId: 'node3', newPosition: { x: 333, y: 333 }, newSize: defaultSize }
         ]);
-        const action = new AlignElementsAction(['node1', 'node2', 'node3'], Alignment.Top);
+        const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Top });
         const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
         command.execute(newContext(newModel));
 
@@ -208,7 +212,7 @@ describe('AlignElementsCommand', () => {
             { elementId: 'node2', newPosition: { x: 222, y: 222 }, newSize: defaultSize },
             { elementId: 'node3', newPosition: { x: 333, y: 333 }, newSize: defaultSize }
         ]);
-        const action = new AlignElementsAction(['node1', 'node2', 'node3'], Alignment.Bottom);
+        const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Bottom });
         const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
         command.execute(newContext(newModel));
 
@@ -228,7 +232,7 @@ describe('AlignElementsCommand', () => {
             { elementId: 'node2', newPosition: { x: 222, y: 222 }, newSize: defaultSize },
             { elementId: 'node3', newPosition: { x: 333, y: 333 }, newSize: defaultSize }
         ]);
-        const action = new AlignElementsAction(['node1', 'node2', 'node3'], Alignment.Middle);
+        const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Middle });
         const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
         command.execute(newContext(newModel));
 
@@ -250,7 +254,11 @@ describe('ResizeElementsCommand', () => {
             { elementId: 'node2', newPosition: { x: 100, y: 200 }, newSize: { height: 20, width: 20 } },
             { elementId: 'node3', newPosition: { x: 100, y: 300 }, newSize: { height: 30, width: 30 } }
         ]);
-        const action = new ResizeElementsAction(['node1', 'node2', 'node3'], ResizeDimension.Width, Reduce.last);
+        const action = ResizeElementsAction.create({
+            elementIds: ['node1', 'node2', 'node3'],
+            dimension: ResizeDimension.Width,
+            reductionFunction: Reduce.last
+        });
         const command = new ResizeElementsCommand(action, actionDispatcher, selectionService);
         command.execute(newContext(newModel));
 
@@ -271,7 +279,11 @@ describe('ResizeElementsCommand', () => {
             { elementId: 'node2', newPosition: { x: 100, y: 200 }, newSize: { height: 20, width: 20 } },
             { elementId: 'node3', newPosition: { x: 100, y: 300 }, newSize: { height: 30, width: 30 } }
         ]);
-        const action = new ResizeElementsAction(['node1', 'node2', 'node3'], ResizeDimension.Height, Reduce.last);
+        const action = ResizeElementsAction.create({
+            elementIds: ['node1', 'node2', 'node3'],
+            dimension: ResizeDimension.Height,
+            reductionFunction: Reduce.last
+        });
         const command = new ResizeElementsCommand(action, actionDispatcher, selectionService);
         command.execute(newContext(newModel));
 
@@ -292,7 +304,11 @@ describe('ResizeElementsCommand', () => {
             { elementId: 'node2', newPosition: { x: 100, y: 200 }, newSize: { height: 20, width: 20 } },
             { elementId: 'node3', newPosition: { x: 100, y: 300 }, newSize: { height: 30, width: 30 } }
         ]);
-        const action = new ResizeElementsAction(['node1', 'node2', 'node3'], ResizeDimension.Width_And_Height, Reduce.last);
+        const action = ResizeElementsAction.create({
+            elementIds: ['node1', 'node2', 'node3'],
+            dimension: ResizeDimension.Width_And_Height,
+            reductionFunction: Reduce.last
+        });
         const command = new ResizeElementsCommand(action, actionDispatcher, selectionService);
         command.execute(newContext(newModel));
 
@@ -308,7 +324,7 @@ describe('ResizeElementsCommand', () => {
 });
 
 function initModel(elementAndBounds: ElementAndBounds[]): SModelRoot {
-    const mySetBoundsAction = new SetBoundsAction(elementAndBounds);
+    const mySetBoundsAction = SetBoundsAction.create(elementAndBounds);
     const setBoundsCommand = new SetBoundsCommand(mySetBoundsAction);
     return setBoundsCommand.execute(context) as SModelRoot;
 }