@eclipse-glsp/client 0.9.0 → 0.10.0-next.17bfb07.173

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 → layout-elements-action.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,28 +37,23 @@ 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';
 import {
     AlignElementsAction,
-    AlignElementsCommand,
+    AlignElementsActionHandler,
     Alignment,
-    Reduce,
     ResizeDimension,
     ResizeElementsAction,
-    ResizeElementsCommand
-} from './layout-commands';
+    ResizeElementsActionHandler
+} from './layout-elements-action';
 
 class MockActionDispatcher implements IActionDispatcher {
     constructor(public dispatchedActions: Action[] = []) {}
@@ -67,14 +70,21 @@ class MockActionDispatcher implements IActionDispatcher {
     }
 }
 
+class MockSelectionService extends SelectionService {
+    constructor(public modelRoot: SModelRoot) {
+        super();
+    }
+    override getModelRoot(): Readonly<SModelRoot> {
+        return this.modelRoot;
+    }
+}
+
+// Generic Test setup
 const container = new Container();
 container.load(defaultModule);
-container.bind(GLSP_TYPES.IFeedbackActionDispatcher).to(FeedbackActionDispatcher).inSingletonScope();
-container.bind(SelectionService).toSelf().inSingletonScope();
-container.bind(GLSP_TYPES.SelectionService).toService(SelectionService);
+container.bind(TYPES.IFeedbackActionDispatcher).to(FeedbackActionDispatcher).inSingletonScope();
 container.rebind(TYPES.IModelFactory).to(SGraphFactory).inSingletonScope();
 const graphFactory = container.get<SGraphFactory>(TYPES.IModelFactory);
-const selectionService = container.get<SelectionService>(GLSP_TYPES.SelectionService);
 
 const actionDispatcher = new MockActionDispatcher();
 
@@ -121,16 +131,26 @@ const context: CommandExecutionContext = {
 const defaultSize = { height: 10, width: 10 };
 
 describe('AlignElementsCommand', () => {
-    it('should align all elements left', () => {
+    let handler: AlignElementsActionHandler;
+    const setModel = (newModel: SModelRoot): void => {
+        handler['selectionService'] = new MockSelectionService(newModel);
+    };
+
+    beforeEach(() => {
         actionDispatcher.dispatchedActions = [];
+
+        handler = new AlignElementsActionHandler();
+        handler['actionDispatcher'] = actionDispatcher;
+    });
+    it('should align all elements left', () => {
         const newModel = initModel([
             { elementId: 'node1', newPosition: { x: 111, y: 111 }, newSize: defaultSize },
             { 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 command = new AlignElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
+        const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Left });
+        setModel(newModel);
+        handler.handle(action);
 
         assertAllBounds(
             new Map([
@@ -142,16 +162,14 @@ describe('AlignElementsCommand', () => {
     });
 
     it('should align all elements right', () => {
-        actionDispatcher.dispatchedActions = [];
         const newModel = initModel([
             { elementId: 'node1', newPosition: { x: 111, y: 111 }, newSize: defaultSize },
             { 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 command = new AlignElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
-
+        const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Right });
+        setModel(newModel);
+        handler.handle(action);
         assertAllBounds(
             new Map([
                 ['node1', { x: 333, y: 111, width: defaultSize.width, height: defaultSize.height }],
@@ -168,9 +186,9 @@ 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 command = new AlignElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
+        const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Center });
+        setModel(newModel);
+        handler.handle(action);
 
         assertAllBounds(
             new Map([
@@ -182,15 +200,14 @@ describe('AlignElementsCommand', () => {
     });
 
     it('should align all elements top', () => {
-        actionDispatcher.dispatchedActions = [];
         const newModel = initModel([
             { elementId: 'node1', newPosition: { x: 111, y: 111 }, newSize: defaultSize },
             { 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 command = new AlignElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
+        const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Top });
+        setModel(newModel);
+        handler.handle(action);
 
         assertAllBounds(
             new Map([
@@ -202,15 +219,14 @@ describe('AlignElementsCommand', () => {
     });
 
     it('should align all elements bottom', () => {
-        actionDispatcher.dispatchedActions = [];
         const newModel = initModel([
             { elementId: 'node1', newPosition: { x: 111, y: 111 }, newSize: defaultSize },
             { 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 command = new AlignElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
+        const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Bottom });
+        setModel(newModel);
+        handler.handle(action);
 
         assertAllBounds(
             new Map([
@@ -222,15 +238,14 @@ describe('AlignElementsCommand', () => {
     });
 
     it('should align all elements middle', () => {
-        actionDispatcher.dispatchedActions = [];
         const newModel = initModel([
             { elementId: 'node1', newPosition: { x: 111, y: 111 }, newSize: defaultSize },
             { 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 command = new AlignElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
+        const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Middle });
+        setModel(newModel);
+        handler.handle(action);
 
         assertAllBounds(
             new Map([
@@ -243,16 +258,30 @@ describe('AlignElementsCommand', () => {
 });
 
 describe('ResizeElementsCommand', () => {
-    it('should make same width as last', () => {
+    let handler: ResizeElementsActionHandler;
+    const setModel = (newModel: SModelRoot): void => {
+        handler['selectionService'] = new MockSelectionService(newModel);
+    };
+
+    beforeEach(() => {
         actionDispatcher.dispatchedActions = [];
+
+        handler = new ResizeElementsActionHandler();
+        handler['actionDispatcher'] = actionDispatcher;
+    });
+    it('should make same width as last', () => {
         const newModel = initModel([
             { elementId: 'node1', newPosition: { x: 100, y: 100 }, newSize: { height: 10, width: 10 } },
             { 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 command = new ResizeElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
+        const action = ResizeElementsAction.create({
+            elementIds: ['node1', 'node2', 'node3'],
+            dimension: ResizeDimension.Width,
+            reduceFunction: 'last'
+        });
+        setModel(newModel);
+        handler.handle(action);
 
         // resize is keeping the center, so the X moves by diff / 2
         assertAllBoundsInChangeBounds(
@@ -265,15 +294,18 @@ describe('ResizeElementsCommand', () => {
     });
 
     it('should make same height as last', () => {
-        actionDispatcher.dispatchedActions = [];
         const newModel = initModel([
             { elementId: 'node1', newPosition: { x: 100, y: 100 }, newSize: { height: 10, width: 10 } },
             { 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 command = new ResizeElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
+        const action = ResizeElementsAction.create({
+            elementIds: ['node1', 'node2', 'node3'],
+            dimension: ResizeDimension.Height,
+            reduceFunction: 'last'
+        });
+        setModel(newModel);
+        handler.handle(action);
 
         // resize is keeping the center, so the Y moves by diff / 2
         assertAllBoundsInChangeBounds(
@@ -286,15 +318,18 @@ describe('ResizeElementsCommand', () => {
     });
 
     it('should make same width and height as last', () => {
-        actionDispatcher.dispatchedActions = [];
         const newModel = initModel([
             { elementId: 'node1', newPosition: { x: 100, y: 100 }, newSize: { height: 10, width: 10 } },
             { 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 command = new ResizeElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
+        const action = ResizeElementsAction.create({
+            elementIds: ['node1', 'node2', 'node3'],
+            dimension: ResizeDimension.Width_And_Height,
+            reduceFunction: 'last'
+        });
+        setModel(newModel);
+        handler.handle(action);
 
         // resize is keeping the center, so the Y moves by diff / 2
         assertAllBoundsInChangeBounds(
@@ -308,22 +343,11 @@ 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;
 }
 
-function newContext(root: SModelRoot): CommandExecutionContext {
-    return {
-        root: root,
-        modelFactory: graphFactory,
-        duration: 0,
-        modelChanged: undefined!,
-        logger: new ConsoleLogger(),
-        syncer: new AnimationFrameSyncer()
-    };
-}
-
 function assertAllBounds(allBounds: Map<string, Bounds>): void {
     allBounds.forEach((bounds, nodeId) => assertBounds(nodeId, bounds));
 }