@eclipse-glsp/client 0.10.0-next.ca17587.154 → 1.1.0-RC01

package/src/features/layout/layout-elements-action.ts

@@ -0,0 +1,486 @@
+/********************************************************************************
+ * 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
+ * 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,
+    ChangeBoundsOperation,
+    ElementAndBounds,
+    hasArrayProp,
+    hasNumberProp,
+    hasStringProp,
+    SetBoundsAction,
+    Writable
+} from '@eclipse-glsp/protocol';
+import { inject, injectable, optional } from 'inversify';
+import { ElementMove, IActionDispatcher, IActionHandler, ICommand, MoveAction, SModelElement } from 'sprotty';
+import { TYPES } from '../../base/types';
+import { toValidElementAndBounds, toValidElementMove } from '../../utils/layout-utils';
+import { BoundsAwareModelElement, getElements } from '../../utils/smodel-util';
+import { isBoundsAwareMoveable, isResizable } from '../change-bounds/model';
+import { IMovementRestrictor } from '../change-bounds/movement-restrictor';
+import { SelectionService } from '../select/selection-service';
+
+/**
+ * Used to specify the desired resize dimension for a {@link ResizeElementsCommand}.
+ */
+// eslint-disable-next-line no-shadow
+export enum ResizeDimension {
+    Width,
+    Height,
+    Width_And_Height
+}
+
+/**
+ * A function that computes a single number from a set of given numbers
+ * i.e. it reduces the given numbers to one single number.
+ * Mainly used by the {@link ResizeElementsCommand} to reduce the given dimensions to a target dimension value.
+ */
+export type ReduceFunction = (...values: number[]) => number;
+
+export namespace ReduceFunction {
+    /**
+     * Returns the minimal value of the given numbers.
+     * @param values Numbers to be evaluated.
+     * @returns The reduced number.
+     */
+    export function min(...values: number[]): number {
+        return Math.min(...values);
+    }
+
+    /**
+     * Returns the maximal value of the given numbers.
+     * @param values Numbers to be evaluated.
+     * @returns The reduced number.
+     */
+    export function max(...values: number[]): number {
+        return Math.max(...values);
+    }
+
+    /**
+     * Computes the  average of the given numbers.
+     * @param values Numbers to be evaluated.
+     */
+    export function avg(...values: number[]): number {
+        return values.reduce((a, b) => a + b, 0) / values.length;
+    }
+
+    /**
+     *  Returns the last value of the given numbers.
+     *  @param values Numbers to be evaluated.
+     *  @returns The reduced number.
+     */
+    export function first(...values: number[]): number {
+        return values[0];
+    }
+
+    /**
+     *  Returns the minimal value of the given numbers.
+     *  @param values Numbers  to be evaluated.
+     *  @returns The reduced number.
+     */
+    export function last(...values: number[]): number {
+        return values[values.length - 1];
+    }
+
+    /**
+     * Returns the reduce function that corresponds to the given {@link ReduceFunctionType}.
+     * @param type The reduce function kind.
+     * @returns The corresponding reduce function.
+     */
+    export function get(type: ReduceFunctionType): ReduceFunction {
+        return ReduceFunction[type];
+    }
+}
+
+/** Union type of all {@link ReduceFunction} keys. */
+export type ReduceFunctionType = Exclude<keyof typeof ReduceFunction, 'get'>;
+
+export interface ResizeElementsAction extends Action {
+    kind: typeof ResizeElementsAction.KIND;
+
+    /**
+     * IDs of the elements that should be resized. If no IDs are given, the selected elements will be resized.
+     */
+    elementIds: string[];
+
+    /**
+     * Resize dimension. The default is {@link ResizeDimension.Width}.
+     */
+    dimension: ResizeDimension;
+
+    /**
+     * Type of the {@link ReduceFunction} that should be used to reduce the dimension to a target dimension value
+     */
+    reduceFunction: ReduceFunctionType;
+}
+
+export namespace ResizeElementsAction {
+    export const KIND = 'resizeElementAction';
+
+    export function is(object: any): object is ResizeElementsAction {
+        return (
+            Action.hasKind(object, KIND) &&
+            hasArrayProp(object, 'elementIds') &&
+            hasNumberProp(object, 'dimension') &&
+            hasStringProp(object, 'reduceFunction')
+        );
+    }
+
+    export function create(options: {
+        elementIds?: string[];
+        dimension?: ResizeDimension;
+        reduceFunction: ReduceFunctionType;
+    }): ResizeElementsAction {
+        return {
+            kind: KIND,
+            dimension: ResizeDimension.Width,
+            elementIds: [],
+            ...options
+        };
+    }
+}
+
+@injectable()
+export abstract class LayoutElementsActionHandler implements IActionHandler {
+    @inject(TYPES.IActionDispatcher)
+    protected actionDispatcher: IActionDispatcher;
+
+    @inject(TYPES.SelectionService)
+    protected selectionService: SelectionService;
+
+    @inject(TYPES.IMovementRestrictor)
+    @optional()
+    protected movementRestrictor?: IMovementRestrictor;
+
+    abstract handle(action: Action): void | Action | ICommand;
+
+    getSelectedElements(selection: { elementIds: string[] }): BoundsAwareModelElement[] {
+        const index = this.selectionService.getModelRoot().index;
+        const selectedElements = selection.elementIds.length > 0 ? selection.elementIds : this.selectionService.getSelectedElementIDs();
+        return getElements(index, selectedElements, this.isActionElement);
+    }
+
+    protected abstract isActionElement(element: SModelElement): element is BoundsAwareModelElement;
+
+    dispatchAction(action: Action): void {
+        this.actionDispatcher.dispatch(action);
+    }
+
+    dispatchActions(actions: Action[]): void {
+        this.actionDispatcher.dispatchAll(actions);
+    }
+}
+
+@injectable()
+export class ResizeElementsActionHandler extends LayoutElementsActionHandler {
+    handle(action: ResizeElementsAction): void {
+        const elements = this.getSelectedElements(action);
+        if (elements.length > 1) {
+            const reduceFn = ReduceFunction.get(action.reduceFunction);
+            switch (action.dimension) {
+                case ResizeDimension.Width:
+                    return this.resizeWidth(elements, reduceFn);
+                case ResizeDimension.Height:
+                    return this.resizeHeight(elements, reduceFn);
+                case ResizeDimension.Width_And_Height:
+                    return this.resizeWidthAndHeight(elements, reduceFn);
+            }
+        }
+    }
+
+    resizeWidth(elements: BoundsAwareModelElement[], reduceFn: ReduceFunction): void {
+        const targetWidth = reduceFn(...elements.map(element => element.bounds.width));
+        this.dispatchResizeActions(elements, (element, bounds) => {
+            // resize around center (horizontal)
+            const halfDiffWidth = 0.5 * (targetWidth - element.bounds.width);
+            bounds.newPosition!.x = element.bounds.x - halfDiffWidth;
+            bounds.newSize.width = targetWidth;
+        });
+    }
+
+    resizeHeight(elements: BoundsAwareModelElement[], reduceFn: ReduceFunction): void {
+        const targetHeight = reduceFn(...elements.map(element => element.bounds.height));
+        this.dispatchResizeActions(elements, (element, bounds) => {
+            // resize around middle (vertical)
+            const halfDiffHeight = 0.5 * (targetHeight - element.bounds.height);
+            bounds.newPosition!.y = element.bounds.y - halfDiffHeight;
+            bounds.newSize.height = targetHeight;
+        });
+    }
+
+    resizeWidthAndHeight(elements: BoundsAwareModelElement[], reduceFn: ReduceFunction): void {
+        const targetWidth = reduceFn(...elements.map(element => element.bounds.width));
+        const targetHeight = reduceFn(...elements.map(element => element.bounds.height));
+        this.dispatchResizeActions(elements, (element, bounds) => {
+            // resize around center and middle (horizontal & vertical)
+            const halfDiffWidth = 0.5 * (targetWidth - element.bounds.width);
+            const halfDiffHeight = 0.5 * (targetHeight - element.bounds.height);
+            bounds.newPosition = { x: element.bounds.x - halfDiffWidth, y: element.bounds.y - halfDiffHeight };
+            bounds.newSize = { width: targetWidth, height: targetHeight };
+        });
+    }
+
+    dispatchResizeActions(
+        elements: BoundsAwareModelElement[],
+        change: (element: BoundsAwareModelElement, bounds: Writable<ElementAndBounds>) => void
+    ): void {
+        const elementAndBounds: ElementAndBounds[] = []; // client- and server-side resize
+
+        elements.forEach(element => {
+            const elementChange = this.createElementAndBounds(element, change);
+            if (elementChange) {
+                // simply skip invalid changes
+                elementAndBounds.push(elementChange);
+            }
+        });
+        this.dispatchActions([SetBoundsAction.create(elementAndBounds), ChangeBoundsOperation.create(elementAndBounds)]);
+    }
+
+    createElementAndBounds(
+        element: BoundsAwareModelElement,
+        change: (_element: BoundsAwareModelElement, _bounds: Writable<ElementAndBounds>) => void
+    ): Writable<ElementAndBounds> | undefined {
+        const bounds: ElementAndBounds = {
+            elementId: element.id,
+            newPosition: {
+                x: element.bounds.x,
+                y: element.bounds.y
+            },
+            newSize: {
+                width: element.bounds.width,
+                height: element.bounds.height
+            }
+        };
+        change(element, bounds);
+        return toValidElementAndBounds(element, bounds, this.movementRestrictor);
+    }
+    protected isActionElement(element: SModelElement): element is BoundsAwareModelElement {
+        return isResizable(element);
+    }
+}
+
+// eslint-disable-next-line no-shadow
+export enum Alignment {
+    Left,
+    Center,
+    Right,
+    Top,
+    Middle,
+    Bottom
+}
+
+/**
+ * A function that retrieves a specific (sub)-selection of elements from a given set of elements.
+ * Mainly used by the {@link AlignElementsActionHandler}.
+ */
+export type SelectFunction = (elements: BoundsAwareModelElement[]) => BoundsAwareModelElement[];
+export namespace SelectFunction {
+    /**
+     * Select all elements from the given set of elements.
+     * @param elements The set of elements.
+     * @returns All elements.
+     */
+    export function all(elements: BoundsAwareModelElement[]): BoundsAwareModelElement[] {
+        return elements;
+    }
+
+    /**
+     * Select the first element from a given set of elements.
+     * @param elements The elements.
+     * @returns An array containing the first element of the given elements.
+     */
+    export function first(elements: BoundsAwareModelElement[]): BoundsAwareModelElement[] {
+        return [elements[0]];
+    }
+
+    /**
+     * Select the last element from a given set of elements.
+     * @param elements The elements.
+     * @returns An array containing the last element of the given elements.
+     */
+    export function last(elements: BoundsAwareModelElement[]): BoundsAwareModelElement[] {
+        return [elements[elements.length - 1]];
+    }
+
+    /**
+     * Returns the select function that corresponds to the given {@link SelectFunctionType}.
+     * @param type The select function type.
+     * @returns The corresponding select function.
+     */
+    export function get(kind: SelectFunctionType): SelectFunction {
+        return SelectFunction[kind];
+    }
+}
+
+/** Union type of all {@link SelectFunction} keys. */
+export type SelectFunctionType = Exclude<keyof typeof SelectFunction, 'get'>;
+
+export interface AlignElementsAction extends Action {
+    kind: typeof AlignElementsAction.KIND;
+
+    /**
+     * IDs of the elements that should be aligned. If no IDs are given, the selected elements will be aligned.
+     */
+    elementIds: string[];
+    /**
+     * Alignment direction. The default is {@link Alignment.Left}
+     */
+    alignment: Alignment;
+    /**
+     * Function to selected elements that are considered during alignment calculation.
+     * The default value is {@link Select.all}.
+     */
+    selectFunction: SelectFunctionType;
+}
+
+export namespace AlignElementsAction {
+    export const KIND = 'alignElements';
+
+    export function is(object: any): object is AlignElementsAction {
+        return (
+            Action.hasKind(object, KIND) &&
+            hasArrayProp(object, 'elementIds') &&
+            hasNumberProp(object, 'alignment') &&
+            hasStringProp(object, 'selectFunction')
+        );
+    }
+
+    export function create(
+        options: { elementIds?: string[]; alignment?: Alignment; selectionFunction?: SelectFunctionType } = {}
+    ): AlignElementsAction {
+        return {
+            kind: KIND,
+            elementIds: [],
+            alignment: Alignment.Left,
+            selectFunction: 'all',
+            ...options
+        };
+    }
+}
+
+@injectable()
+export class AlignElementsActionHandler extends LayoutElementsActionHandler {
+    handle(action: AlignElementsAction): void {
+        const elements = this.getSelectedElements(action);
+        const selectFn = SelectFunction.get(action.selectFunction);
+        const calculatedElements = selectFn(elements);
+        if (elements.length > 1) {
+            switch (action.alignment) {
+                case Alignment.Left:
+                    return this.alignLeft(calculatedElements);
+                case Alignment.Center:
+                    return this.alignCenter(calculatedElements);
+                case Alignment.Right:
+                    return this.alignRight(calculatedElements);
+                case Alignment.Top:
+                    return this.alignTop(calculatedElements);
+                case Alignment.Middle:
+                    return this.alignMiddle(calculatedElements);
+                case Alignment.Bottom:
+                    return this.alignBottom(calculatedElements);
+            }
+        }
+    }
+
+    alignLeft(elements: BoundsAwareModelElement[]): void {
+        const minX = elements.map(element => element.bounds.x).reduce((a, b) => Math.min(a, b));
+        this.dispatchAlignActions(elements, (_, move) => (move.toPosition.x = minX));
+    }
+
+    alignCenter(elements: BoundsAwareModelElement[]): void {
+        const minX = elements.map(element => element.bounds.x).reduce((a, b) => Math.min(a, b));
+        const maxX = elements.map(element => element.bounds.x + element.bounds.width).reduce((a, b) => Math.max(a, b));
+        const diffX = maxX - minX;
+        const centerX = minX + 0.5 * diffX;
+        this.dispatchAlignActions(elements, (element, move) => (move.toPosition.x = centerX - 0.5 * element.bounds.width));
+    }
+
+    alignRight(elements: BoundsAwareModelElement[]): void {
+        const maxX = elements.map(element => element.bounds.x + element.bounds.width).reduce((a, b) => Math.max(a, b));
+        this.dispatchAlignActions(elements, (element, move) => (move.toPosition.x = maxX - element.bounds.width));
+    }
+
+    alignTop(elements: BoundsAwareModelElement[]): void {
+        const minY = elements.map(element => element.bounds.y).reduce((a, b) => Math.min(a, b));
+        this.dispatchAlignActions(elements, (_, move) => (move.toPosition.y = minY));
+    }
+
+    alignMiddle(elements: BoundsAwareModelElement[]): void {
+        const minY = elements.map(element => element.bounds.y).reduce((a, b) => Math.min(a, b));
+        const maxY = elements.map(element => element.bounds.y + element.bounds.height).reduce((a, b) => Math.max(a, b));
+        const diffY = maxY - minY;
+        const middleY = minY + 0.5 * diffY;
+        this.dispatchAlignActions(elements, (element, move) => (move.toPosition.y = middleY - 0.5 * element.bounds.height));
+    }
+
+    alignBottom(elements: BoundsAwareModelElement[]): void {
+        const maxY = elements.map(element => element.bounds.y + element.bounds.height).reduce((a, b) => Math.max(a, b));
+        this.dispatchAlignActions(elements, (element, move) => (move.toPosition.y = maxY - element.bounds.height));
+    }
+
+    dispatchAlignActions(
+        elements: BoundsAwareModelElement[],
+        change: (element: BoundsAwareModelElement, move: Writable<ElementMove>) => void
+    ): void {
+        const moves: ElementMove[] = []; // client-side move
+        const elementAndBounds: ElementAndBounds[] = []; // server-side move
+        elements.forEach(element => {
+            const move = this.createElementMove(element, change);
+            if (move) {
+                // simply skip invalid changes
+                moves.push(move);
+                const elementAndBound = this.createElementAndBounds(element, move);
+                elementAndBounds.push(elementAndBound);
+            }
+        });
+        this.dispatchActions([MoveAction.create(moves), ChangeBoundsOperation.create(elementAndBounds)]);
+    }
+
+    createElementMove(
+        element: BoundsAwareModelElement,
+        change: (_element: BoundsAwareModelElement, _move: Writable<ElementMove>) => void
+    ): Writable<ElementMove> | undefined {
+        const move: ElementMove = {
+            elementId: element.id,
+            fromPosition: {
+                x: element.bounds.x,
+                y: element.bounds.y
+            },
+            toPosition: {
+                x: element.bounds.x,
+                y: element.bounds.y
+            }
+        };
+        change(element, move);
+        return toValidElementMove(element, move, this.movementRestrictor);
+    }
+
+    createElementAndBounds(element: BoundsAwareModelElement, move: ElementMove): ElementAndBounds {
+        return {
+            elementId: element.id,
+            newPosition: {
+                x: move.toPosition.x,
+                y: move.toPosition.y
+            },
+            newSize: {
+                width: element.bounds.width,
+                height: element.bounds.height
+            }
+        };
+    }
+    protected isActionElement(element: SModelElement): element is BoundsAwareModelElement {
+        return isBoundsAwareMoveable(element);
+    }
+}

package/src/features/layout/layouter.ts

@@ -0,0 +1,137 @@
+/********************************************************************************
+ * Copyright (c) 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 {
+    BoundsData,
+    ILogger,
+    LayoutRegistry,
+    StatefulLayouter,
+    SModelElement,
+    Layouter,
+    SParentElement,
+    LayoutContainer,
+    isLayoutContainer
+} from 'sprotty';
+import { injectable } from 'inversify';
+import { Bounds } from 'sprotty-protocol/lib/utils/geometry';
+
+@injectable()
+export class LayouterExt extends Layouter {
+    override layout(element2boundsData: Map<SModelElement, BoundsData>): void {
+        new StatefulLayouterExt(element2boundsData, this.layoutRegistry, this.logger).layout();
+    }
+}
+
+// 2-pass layout:
+// Step 1: Find "rendered size" of each element (may take resizeContainer into account)
+// Child-to-parent layout
+// Step 2: Extend parents as necessary, then use the adjusted parent size to properly
+// align children (center/end alignments, hGrab/vGrab)
+// Parent-to-children layout
+
+export class StatefulLayouterExt extends StatefulLayouter {
+    protected toBeLayouted2: (SParentElement & LayoutContainer)[];
+
+    /**
+     *
+     * @param elementToBoundsData The map of element to bounds data. Bounds Data are computed from the hidden
+     * SVG rendering pass.
+     * @param layoutRegistry2 The registry of available layouts.
+     * @param log The log.
+     */
+    constructor(
+        protected readonly elementToBoundsData: Map<SModelElement, BoundsData>,
+        protected readonly layoutRegistry2: LayoutRegistry,
+        log: ILogger
+    ) {
+        super(elementToBoundsData, layoutRegistry2, log);
+        this.toBeLayouted2 = [];
+        elementToBoundsData.forEach((data, element) => {
+            if (isLayoutContainer(element)) {
+                this.toBeLayouted2.push(element);
+            }
+        });
+        for (const element of this.toBeLayouted2) {
+            // Clear previous layout information for dynamic-layout objects
+            elementToBoundsData.delete(element);
+        }
+    }
+
+    override getBoundsData(element: SModelElement): BoundsData {
+        let boundsData = this.elementToBoundsData.get(element);
+        let bounds = (element as any).bounds;
+        if (isLayoutContainer(element) && this.toBeLayouted2.indexOf(element) >= 0) {
+            bounds = this.doLayout(element);
+        } else if (isLayoutContainer(element)) {
+            bounds = {
+                x: 0,
+                y: 0,
+                width: -1,
+                height: -1
+            };
+        }
+        if (!boundsData) {
+            boundsData = {
+                bounds: bounds,
+                boundsChanged: false,
+                alignmentChanged: false
+            };
+            this.elementToBoundsData.set(element, boundsData);
+        }
+        return boundsData;
+    }
+
+    override layout(): void {
+        // First pass: apply layout with cleared container data. Will get
+        // preferred size for all elements (Children first, then parents)
+        while (this.toBeLayouted2.length > 0) {
+            const element = this.toBeLayouted2[0];
+            this.doLayout(element);
+        }
+
+        this.toBeLayouted2 = [];
+        this.elementToBoundsData.forEach((data, element) => {
+            if (isLayoutContainer(element)) {
+                this.toBeLayouted2.push(element);
+            }
+        });
+
+        // Second pass: apply layout with initial size data for all
+        // nodes. Update the position/size of all elements, taking
+        // vGrab/hGrab into account (parent -> children).
+        while (this.toBeLayouted2.length > 0) {
+            const element = this.toBeLayouted2[0];
+            this.doLayout(element);
+        }
+    }
+
+    protected override doLayout(element: SParentElement & LayoutContainer): Bounds {
+        const index = this.toBeLayouted2.indexOf(element);
+        if (index >= 0) {
+            this.toBeLayouted2.splice(index, 1);
+        }
+        const layout = this.layoutRegistry2.get(element.layout);
+        if (layout) {
+            layout.layout(element, this);
+        }
+        const boundsData = this.elementToBoundsData.get(element);
+        if (boundsData !== undefined && boundsData.bounds !== undefined) {
+            return boundsData.bounds;
+        } else {
+            this.log.error(element, 'Layout failed');
+            return Bounds.EMPTY;
+        }
+    }
+}