@eclipse-glsp/client 0.9.0-rc-01 → 0.9.0

package/lib/features/layout/layout-commands.js

@@ -1,17 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -24,30 +11,10 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 var __param = (this && this.__param) || function (paramIndex, decorator) {
     return function (target, key) { decorator(target, key, paramIndex); }
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spread = (this && this.__spread) || function () {
-    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
-    return ar;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlignElementsCommand = exports.ResizeElementsCommand = exports.AlignElementsAction = exports.Select = exports.Alignment = exports.ResizeElementsAction = exports.Reduce = exports.ResizeDimension = void 0;
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 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
@@ -61,88 +28,65 @@ exports.AlignElementsCommand = exports.ResizeElementsCommand = exports.AlignElem
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-var inversify_1 = require("inversify");
-var sprotty_1 = require("sprotty");
-var operation_1 = require("../../base/operations/operation");
-var types_1 = require("../../base/types");
-var layout_utils_1 = require("../../utils/layout-utils");
-var model_1 = require("../change-bounds/model");
-var selection_service_1 = require("../select/selection-service");
+const protocol_1 = require("@eclipse-glsp/protocol");
+const inversify_1 = require("inversify");
+const sprotty_1 = require("sprotty");
+const types_1 = require("../../base/types");
+const layout_utils_1 = require("../../utils/layout-utils");
+const model_1 = require("../change-bounds/model");
+const selection_service_1 = require("../select/selection-service");
+// eslint-disable-next-line no-shadow
 var ResizeDimension;
 (function (ResizeDimension) {
     ResizeDimension[ResizeDimension["Width"] = 0] = "Width";
     ResizeDimension[ResizeDimension["Height"] = 1] = "Height";
-    // eslint-disable-next-line @typescript-eslint/camelcase
     ResizeDimension[ResizeDimension["Width_And_Height"] = 2] = "Width_And_Height";
 })(ResizeDimension = exports.ResizeDimension || (exports.ResizeDimension = {}));
 var Reduce;
 (function (Reduce) {
-    function min() {
-        var values = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            values[_i] = arguments[_i];
-        }
-        return Math.min.apply(Math, __spread(values));
+    function min(...values) {
+        return Math.min(...values);
     }
     Reduce.min = min;
-    function max() {
-        var values = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            values[_i] = arguments[_i];
-        }
-        return Math.max.apply(Math, __spread(values));
+    function max(...values) {
+        return Math.max(...values);
     }
     Reduce.max = max;
-    function avg() {
-        var values = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            values[_i] = arguments[_i];
-        }
-        return values.reduce(function (a, b) { return a + b; }, 0) / values.length;
+    function avg(...values) {
+        return values.reduce((a, b) => a + b, 0) / values.length;
     }
     Reduce.avg = avg;
-    function first() {
-        var values = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            values[_i] = arguments[_i];
-        }
+    function first(...values) {
         return values[0];
     }
     Reduce.first = first;
-    function last() {
-        var values = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            values[_i] = arguments[_i];
-        }
+    function last(...values) {
         return values[values.length - 1];
     }
     Reduce.last = last;
 })(Reduce = exports.Reduce || (exports.Reduce = {}));
-var ResizeElementsAction = /** @class */ (function () {
-    function ResizeElementsAction(
+class ResizeElementsAction {
+    constructor(
     /**
      * IDs of the elements that should be resized. If no IDs are given, the selected elements will be resized.
      */
-    elementIds, 
+    elementIds = [], 
     /**
      * Resize dimension.
      */
-    dimension, 
+    dimension = ResizeDimension.Width, 
     /**
      * Function to reduce the dimension to a target dimension value, see Reduce.* for potential functions.
      */
-    reductionFunction, kind) {
-        if (elementIds === void 0) { elementIds = []; }
-        if (dimension === void 0) { dimension = ResizeDimension.Width; }
-        if (kind === void 0) { kind = ResizeElementsCommand.KIND; }
+    reductionFunction, kind = ResizeElementsCommand.KIND) {
         this.elementIds = elementIds;
         this.dimension = dimension;
         this.reductionFunction = reductionFunction;
         this.kind = kind;
     }
-    return ResizeElementsAction;
-}());
+}
 exports.ResizeElementsAction = ResizeElementsAction;
+// eslint-disable-next-line no-shadow
 var Alignment;
 (function (Alignment) {
     Alignment[Alignment["Left"] = 0] = "Left";
@@ -167,90 +111,79 @@ var Select;
     }
     Select.last = last;
 })(Select = exports.Select || (exports.Select = {}));
-var AlignElementsAction = /** @class */ (function () {
-    function AlignElementsAction(
+class AlignElementsAction {
+    constructor(
     /**
      * IDs of the elements that should be aligned. If no IDs are given, the selected elements will be aligned.
      */
-    elementIds, 
+    elementIds = [], 
     /**
      * Alignment direction.
      */
-    alignment, 
+    alignment = Alignment.Left, 
     /**
      * Function to selected elements that are considered during alignment calculation, see Select.* for potential functions.
      */
-    selectionFunction, kind) {
-        if (elementIds === void 0) { elementIds = []; }
-        if (alignment === void 0) { alignment = Alignment.Left; }
-        if (selectionFunction === void 0) { selectionFunction = Select.all; }
-        if (kind === void 0) { kind = AlignElementsCommand.KIND; }
+    selectionFunction = Select.all, kind = AlignElementsCommand.KIND) {
         this.elementIds = elementIds;
         this.alignment = alignment;
         this.selectionFunction = selectionFunction;
         this.kind = kind;
     }
-    return AlignElementsAction;
-}());
+}
 exports.AlignElementsAction = AlignElementsAction;
-var LayoutElementsCommand = /** @class */ (function (_super) {
-    __extends(LayoutElementsCommand, _super);
-    function LayoutElementsCommand(action, actionDispatcher, selectionService, movementRestrictor) {
-        var _this = _super.call(this) || this;
-        _this.action = action;
-        _this.actionDispatcher = actionDispatcher;
-        _this.selectionService = selectionService;
-        _this.movementRestrictor = movementRestrictor;
-        return _this;
-    }
-    LayoutElementsCommand.prototype.getActionElements = function (context) {
-        var _this = this;
-        var model = context.root;
-        var elementIDs = this.action.elementIds;
+let LayoutElementsCommand = class LayoutElementsCommand extends sprotty_1.Command {
+    constructor(action, actionDispatcher, selectionService, movementRestrictor) {
+        super();
+        this.action = action;
+        this.actionDispatcher = actionDispatcher;
+        this.selectionService = selectionService;
+        this.movementRestrictor = movementRestrictor;
+    }
+    getActionElements(context) {
+        const model = context.root;
+        const elementIDs = this.action.elementIds;
         if (elementIDs.length === 0) {
             // collect the selected elements from the selection service (selection order is kept by service)
-            this.selectionService.getSelectedElementIDs().forEach(function (elementID) { return elementIDs.push(elementID); });
+            this.selectionService.getSelectedElementIDs().forEach(elementID => elementIDs.push(elementID));
         }
-        var boundsAwareElements = [];
-        elementIDs.forEach(function (id) {
-            var element = model.index.getById(id);
-            if (element && _this.isActionElement(element)) {
+        const boundsAwareElements = [];
+        elementIDs.forEach(id => {
+            const element = model.index.getById(id);
+            if (element && this.isActionElement(element)) {
                 boundsAwareElements.push(element);
             }
         });
         return boundsAwareElements;
-    };
-    LayoutElementsCommand.prototype.dispatchAction = function (action) {
+    }
+    dispatchAction(action) {
         this.actionDispatcher.dispatch(action);
-    };
-    LayoutElementsCommand.prototype.dispatchActions = function (actions) {
+    }
+    dispatchActions(actions) {
         this.actionDispatcher.dispatchAll(actions);
-    };
-    LayoutElementsCommand = __decorate([
-        inversify_1.injectable(),
-        __param(0, inversify_1.inject(sprotty_1.TYPES.Action)),
-        __param(1, inversify_1.inject(sprotty_1.TYPES.IActionDispatcher)),
-        __param(2, inversify_1.inject(types_1.GLSP_TYPES.SelectionService)),
-        __param(3, inversify_1.inject(types_1.GLSP_TYPES.IMovementRestrictor)), __param(3, inversify_1.optional()),
-        __metadata("design:paramtypes", [Object, Object, selection_service_1.SelectionService, Object])
-    ], LayoutElementsCommand);
-    return LayoutElementsCommand;
-}(sprotty_1.Command));
-var ResizeElementsCommand = /** @class */ (function (_super) {
-    __extends(ResizeElementsCommand, _super);
-    function ResizeElementsCommand(action, actionDispatcher, selectionService, movementRestrictor) {
-        var _this = _super.call(this, action, actionDispatcher, selectionService, movementRestrictor) || this;
-        _this.action = action;
-        _this.actionDispatcher = actionDispatcher;
-        _this.selectionService = selectionService;
-        _this.movementRestrictor = movementRestrictor;
-        return _this;
-    }
-    ResizeElementsCommand.prototype.isActionElement = function (element) {
+    }
+};
+LayoutElementsCommand = __decorate([
+    inversify_1.injectable(),
+    __param(0, inversify_1.inject(sprotty_1.TYPES.Action)),
+    __param(1, inversify_1.inject(sprotty_1.TYPES.IActionDispatcher)),
+    __param(2, inversify_1.inject(types_1.GLSP_TYPES.SelectionService)),
+    __param(3, inversify_1.inject(types_1.GLSP_TYPES.IMovementRestrictor)), __param(3, inversify_1.optional()),
+    __metadata("design:paramtypes", [Object, Object, selection_service_1.SelectionService, Object])
+], LayoutElementsCommand);
+let ResizeElementsCommand = class ResizeElementsCommand extends LayoutElementsCommand {
+    constructor(action, actionDispatcher, selectionService, movementRestrictor) {
+        super(action, actionDispatcher, selectionService, movementRestrictor);
+        this.action = action;
+        this.actionDispatcher = actionDispatcher;
+        this.selectionService = selectionService;
+        this.movementRestrictor = movementRestrictor;
+    }
+    isActionElement(element) {
         return model_1.isResizable(element);
-    };
-    ResizeElementsCommand.prototype.execute = function (context) {
-        var elements = this.getActionElements(context);
+    }
+    execute(context) {
+        const elements = this.getActionElements(context);
         if (elements.length > 1) {
             switch (this.action.dimension) {
                 case ResizeDimension.Width:
@@ -265,55 +198,51 @@ var ResizeElementsCommand = /** @class */ (function (_super) {
             }
         }
         return context.root;
-    };
-    ResizeElementsCommand.prototype.resizeWidth = function (elements) {
-        var _a;
-        var targetWidth = (_a = this.action).reductionFunction.apply(_a, __spread(elements.map(function (element) { return element.bounds.width; })));
-        this.dispatchResizeActions(elements, function (element, bounds) {
+    }
+    resizeWidth(elements) {
+        const targetWidth = this.action.reductionFunction(...elements.map(element => element.bounds.width));
+        this.dispatchResizeActions(elements, (element, bounds) => {
             // resize around center
-            var halfDiffWidth = 0.5 * (targetWidth - element.bounds.width);
+            const halfDiffWidth = 0.5 * (targetWidth - element.bounds.width);
             bounds.newPosition.x = element.bounds.x - halfDiffWidth;
             bounds.newSize.width = targetWidth;
         });
-    };
-    ResizeElementsCommand.prototype.resizeHeight = function (elements) {
-        var _a;
-        var targetHeight = (_a = this.action).reductionFunction.apply(_a, __spread(elements.map(function (element) { return element.bounds.height; })));
-        this.dispatchResizeActions(elements, function (element, bounds) {
+    }
+    resizeHeight(elements) {
+        const targetHeight = this.action.reductionFunction(...elements.map(element => element.bounds.height));
+        this.dispatchResizeActions(elements, (element, bounds) => {
             // resize around middle
-            var halfDiffHeight = 0.5 * (targetHeight - element.bounds.height);
+            const halfDiffHeight = 0.5 * (targetHeight - element.bounds.height);
             bounds.newPosition.y = element.bounds.y - halfDiffHeight;
             bounds.newSize.height = targetHeight;
         });
-    };
-    ResizeElementsCommand.prototype.resizeWidthAndHeight = function (elements) {
-        var _a, _b;
-        var targetWidth = (_a = this.action).reductionFunction.apply(_a, __spread(elements.map(function (element) { return element.bounds.width; })));
-        var targetHeight = (_b = this.action).reductionFunction.apply(_b, __spread(elements.map(function (element) { return element.bounds.height; })));
-        this.dispatchResizeActions(elements, function (element, bounds) {
+    }
+    resizeWidthAndHeight(elements) {
+        const targetWidth = this.action.reductionFunction(...elements.map(element => element.bounds.width));
+        const targetHeight = this.action.reductionFunction(...elements.map(element => element.bounds.height));
+        this.dispatchResizeActions(elements, (element, bounds) => {
             // resize around center and middle
-            var halfDiffWidth = 0.5 * (targetWidth - element.bounds.width);
-            var halfDiffHeight = 0.5 * (targetHeight - element.bounds.height);
+            const halfDiffWidth = 0.5 * (targetWidth - element.bounds.width);
+            const halfDiffHeight = 0.5 * (targetHeight - element.bounds.height);
             bounds.newPosition.x = element.bounds.x - halfDiffWidth;
             bounds.newPosition.y = element.bounds.y - halfDiffHeight;
             bounds.newSize.width = targetWidth;
             bounds.newSize.height = targetHeight;
         });
-    };
-    ResizeElementsCommand.prototype.dispatchResizeActions = function (elements, change) {
-        var _this = this;
-        var elementAndBounds = []; // client- and server-side resize
-        elements.forEach(function (element) {
-            var elementChange = _this.createElementAndBounds(element, change);
+    }
+    dispatchResizeActions(elements, change) {
+        const 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([new sprotty_1.SetBoundsAction(elementAndBounds), new operation_1.ChangeBoundsOperation(elementAndBounds)]);
-    };
-    ResizeElementsCommand.prototype.createElementAndBounds = function (element, change) {
-        var bounds = {
+        this.dispatchActions([new sprotty_1.SetBoundsAction(elementAndBounds), new protocol_1.ChangeBoundsOperation(elementAndBounds)]);
+    }
+    createElementAndBounds(element, change) {
+        const bounds = {
             elementId: element.id,
             newPosition: {
                 x: element.bounds.x,
@@ -326,42 +255,39 @@ var ResizeElementsCommand = /** @class */ (function (_super) {
         };
         change(element, bounds);
         return layout_utils_1.toValidElementAndBounds(element, bounds, this.movementRestrictor);
-    };
-    ResizeElementsCommand.prototype.undo = function (context) {
+    }
+    undo(context) {
         // we dispatch another action which can be undone, so no explicit implementation necessary
         return context.root;
-    };
-    ResizeElementsCommand.prototype.redo = function (context) {
+    }
+    redo(context) {
         // we dispatch another action which can be redone, so no explicit implementation necessary
         return context.root;
-    };
-    ResizeElementsCommand.KIND = 'layout:resize';
-    ResizeElementsCommand = __decorate([
-        inversify_1.injectable(),
-        __param(0, inversify_1.inject(sprotty_1.TYPES.Action)),
-        __param(1, inversify_1.inject(sprotty_1.TYPES.IActionDispatcher)),
-        __param(2, inversify_1.inject(types_1.GLSP_TYPES.SelectionService)),
-        __param(3, inversify_1.inject(types_1.GLSP_TYPES.IMovementRestrictor)), __param(3, inversify_1.optional()),
-        __metadata("design:paramtypes", [ResizeElementsAction, Object, selection_service_1.SelectionService, Object])
-    ], ResizeElementsCommand);
-    return ResizeElementsCommand;
-}(LayoutElementsCommand));
+    }
+};
+ResizeElementsCommand.KIND = 'layout:resize';
+ResizeElementsCommand = __decorate([
+    inversify_1.injectable(),
+    __param(0, inversify_1.inject(sprotty_1.TYPES.Action)),
+    __param(1, inversify_1.inject(sprotty_1.TYPES.IActionDispatcher)),
+    __param(2, inversify_1.inject(types_1.GLSP_TYPES.SelectionService)),
+    __param(3, inversify_1.inject(types_1.GLSP_TYPES.IMovementRestrictor)), __param(3, inversify_1.optional()),
+    __metadata("design:paramtypes", [ResizeElementsAction, Object, selection_service_1.SelectionService, Object])
+], ResizeElementsCommand);
 exports.ResizeElementsCommand = ResizeElementsCommand;
-var AlignElementsCommand = /** @class */ (function (_super) {
-    __extends(AlignElementsCommand, _super);
-    function AlignElementsCommand(action, actionDispatcher, selectionService, movementRestrictor) {
-        var _this = _super.call(this, action, actionDispatcher, selectionService, movementRestrictor) || this;
-        _this.action = action;
-        _this.actionDispatcher = actionDispatcher;
-        _this.selectionService = selectionService;
-        _this.movementRestrictor = movementRestrictor;
-        return _this;
-    }
-    AlignElementsCommand.prototype.isActionElement = function (element) {
+let AlignElementsCommand = class AlignElementsCommand extends LayoutElementsCommand {
+    constructor(action, actionDispatcher, selectionService, movementRestrictor) {
+        super(action, actionDispatcher, selectionService, movementRestrictor);
+        this.action = action;
+        this.actionDispatcher = actionDispatcher;
+        this.selectionService = selectionService;
+        this.movementRestrictor = movementRestrictor;
+    }
+    isActionElement(element) {
         return model_1.isBoundsAwareMoveable(element);
-    };
-    AlignElementsCommand.prototype.execute = function (context) {
-        var elements = this.getActionElements(context);
+    }
+    execute(context) {
+        const elements = this.getActionElements(context);
         if (elements.length > 1) {
             switch (this.action.alignment) {
                 case Alignment.Left:
@@ -385,60 +311,59 @@ var AlignElementsCommand = /** @class */ (function (_super) {
             }
         }
         return context.root;
-    };
-    AlignElementsCommand.prototype.alignLeft = function (elements) {
-        var calculationElements = this.action.selectionFunction(elements);
-        var minX = calculationElements.map(function (element) { return element.bounds.x; }).reduce(function (a, b) { return Math.min(a, b); });
-        this.dispatchAlignActions(elements, function (_, move) { return move.toPosition.x = minX; });
-    };
-    AlignElementsCommand.prototype.alignCenter = function (elements) {
-        var calculationElements = this.action.selectionFunction(elements);
-        var minX = calculationElements.map(function (element) { return element.bounds.x; }).reduce(function (a, b) { return Math.min(a, b); });
-        var maxX = calculationElements.map(function (element) { return element.bounds.x + element.bounds.width; }).reduce(function (a, b) { return Math.max(a, b); });
-        var diffX = maxX - minX;
-        var centerX = minX + 0.5 * diffX;
-        this.dispatchAlignActions(elements, function (element, move) { return move.toPosition.x = centerX - 0.5 * element.bounds.width; });
-    };
-    AlignElementsCommand.prototype.alignRight = function (elements) {
-        var calculationElements = this.action.selectionFunction(elements);
-        var maxX = calculationElements.map(function (element) { return element.bounds.x + element.bounds.width; }).reduce(function (a, b) { return Math.max(a, b); });
-        this.dispatchAlignActions(elements, function (element, move) { return move.toPosition.x = maxX - element.bounds.width; });
-    };
-    AlignElementsCommand.prototype.alignTop = function (elements) {
-        var calculationElements = this.action.selectionFunction(elements);
-        var minY = calculationElements.map(function (element) { return element.bounds.y; }).reduce(function (a, b) { return Math.min(a, b); });
-        this.dispatchAlignActions(elements, function (_, move) { return move.toPosition.y = minY; });
-    };
-    AlignElementsCommand.prototype.alignMiddle = function (elements) {
-        var calculationElements = this.action.selectionFunction(elements);
-        var minY = calculationElements.map(function (element) { return element.bounds.y; }).reduce(function (a, b) { return Math.min(a, b); });
-        var maxY = calculationElements.map(function (element) { return element.bounds.y + element.bounds.height; }).reduce(function (a, b) { return Math.max(a, b); });
-        var diffY = maxY - minY;
-        var middleY = minY + 0.5 * diffY;
-        this.dispatchAlignActions(elements, function (element, move) { return move.toPosition.y = middleY - 0.5 * element.bounds.height; });
-    };
-    AlignElementsCommand.prototype.alignBottom = function (elements) {
-        var calculationElements = this.action.selectionFunction(elements);
-        var maxY = calculationElements.map(function (element) { return element.bounds.y + element.bounds.height; }).reduce(function (a, b) { return Math.max(a, b); });
-        this.dispatchAlignActions(elements, function (element, move) { return move.toPosition.y = maxY - element.bounds.height; });
-    };
-    AlignElementsCommand.prototype.dispatchAlignActions = function (elements, change) {
-        var _this = this;
-        var moves = []; // client-side move
-        var elementAndBounds = []; // server-side move
-        elements.forEach(function (element) {
-            var move = _this.createElementMove(element, change);
+    }
+    alignLeft(elements) {
+        const calculationElements = this.action.selectionFunction(elements);
+        const minX = calculationElements.map(element => element.bounds.x).reduce((a, b) => Math.min(a, b));
+        this.dispatchAlignActions(elements, (_, move) => (move.toPosition.x = minX));
+    }
+    alignCenter(elements) {
+        const calculationElements = this.action.selectionFunction(elements);
+        const minX = calculationElements.map(element => element.bounds.x).reduce((a, b) => Math.min(a, b));
+        const maxX = calculationElements.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) {
+        const calculationElements = this.action.selectionFunction(elements);
+        const maxX = calculationElements.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) {
+        const calculationElements = this.action.selectionFunction(elements);
+        const minY = calculationElements.map(element => element.bounds.y).reduce((a, b) => Math.min(a, b));
+        this.dispatchAlignActions(elements, (_, move) => (move.toPosition.y = minY));
+    }
+    alignMiddle(elements) {
+        const calculationElements = this.action.selectionFunction(elements);
+        const minY = calculationElements.map(element => element.bounds.y).reduce((a, b) => Math.min(a, b));
+        const maxY = calculationElements.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) {
+        const calculationElements = this.action.selectionFunction(elements);
+        const maxY = calculationElements.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, change) {
+        const moves = []; // client-side move
+        const elementAndBounds = []; // server-side move
+        elements.forEach(element => {
+            const move = this.createElementMove(element, change);
             if (move) {
                 // simply skip invalid changes
                 moves.push(move);
-                var elementAndBound = _this.createElementAndBounds(element, move);
+                const elementAndBound = this.createElementAndBounds(element, move);
                 elementAndBounds.push(elementAndBound);
             }
         });
-        this.dispatchActions([new sprotty_1.MoveAction(moves), new operation_1.ChangeBoundsOperation(elementAndBounds)]);
-    };
-    AlignElementsCommand.prototype.createElementMove = function (element, change) {
-        var move = {
+        this.dispatchActions([new sprotty_1.MoveAction(moves), new protocol_1.ChangeBoundsOperation(elementAndBounds)]);
+    }
+    createElementMove(element, change) {
+        const move = {
             elementId: element.id,
             fromPosition: {
                 x: element.bounds.x,
@@ -451,8 +376,8 @@ var AlignElementsCommand = /** @class */ (function (_super) {
         };
         change(element, move);
         return layout_utils_1.toValidElementMove(element, move, this.movementRestrictor);
-    };
-    AlignElementsCommand.prototype.createElementAndBounds = function (element, move) {
+    }
+    createElementAndBounds(element, move) {
         return {
             elementId: element.id,
             newPosition: {
@@ -464,25 +389,24 @@ var AlignElementsCommand = /** @class */ (function (_super) {
                 height: element.bounds.height
             }
         };
-    };
-    AlignElementsCommand.prototype.undo = function (context) {
+    }
+    undo(context) {
         // we dispatch another action which can be undone, so no explicit implementation necessary
         return context.root;
-    };
-    AlignElementsCommand.prototype.redo = function (context) {
+    }
+    redo(context) {
         // we dispatch another action which can be redone, so no explicit implementation necessary
         return context.root;
-    };
-    AlignElementsCommand.KIND = 'layout:align';
-    AlignElementsCommand = __decorate([
-        inversify_1.injectable(),
-        __param(0, inversify_1.inject(sprotty_1.TYPES.Action)),
-        __param(1, inversify_1.inject(sprotty_1.TYPES.IActionDispatcher)),
-        __param(2, inversify_1.inject(types_1.GLSP_TYPES.SelectionService)),
-        __param(3, inversify_1.inject(types_1.GLSP_TYPES.IMovementRestrictor)), __param(3, inversify_1.optional()),
-        __metadata("design:paramtypes", [AlignElementsAction, Object, selection_service_1.SelectionService, Object])
-    ], AlignElementsCommand);
-    return AlignElementsCommand;
-}(LayoutElementsCommand));
+    }
+};
+AlignElementsCommand.KIND = 'layout:align';
+AlignElementsCommand = __decorate([
+    inversify_1.injectable(),
+    __param(0, inversify_1.inject(sprotty_1.TYPES.Action)),
+    __param(1, inversify_1.inject(sprotty_1.TYPES.IActionDispatcher)),
+    __param(2, inversify_1.inject(types_1.GLSP_TYPES.SelectionService)),
+    __param(3, inversify_1.inject(types_1.GLSP_TYPES.IMovementRestrictor)), __param(3, inversify_1.optional()),
+    __metadata("design:paramtypes", [AlignElementsAction, Object, selection_service_1.SelectionService, Object])
+], AlignElementsCommand);
 exports.AlignElementsCommand = AlignElementsCommand;
 //# sourceMappingURL=layout-commands.js.map