@eclipse-glsp/client 0.9.0-next.f54fd689 → 0.9.0

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * 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
@@ -13,9 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { inject, injectable, optional } from "inversify";
+import { Action, ChangeRoutingPointsOperation, ReconnectEdgeOperation } from '@eclipse-glsp/protocol';
+import { inject, injectable, optional } from 'inversify';
 import {
-    Action,
     AnchorComputerRegistry,
     canEditRouting,
     Connectable,
@@ -27,22 +27,14 @@ import {
     SModelRoot,
     SRoutableElement,
     SRoutingHandle
-} from "sprotty";
-
-import { DragAwareMouseListener } from "../../base/drag-aware-mouse-listener";
-import { ChangeRoutingPointsOperation, ReconnectEdgeOperation } from "../../base/operations/operation";
-import { GLSP_TYPES } from "../../base/types";
-import { isRoutable, isRoutingHandle } from "../../utils/smodel-util";
-import {
-    isReconnectable,
-    isReconnectHandle,
-    isSourceRoutingHandle,
-    isTargetRoutingHandle,
-    SReconnectHandle
-} from "../reconnect/model";
-import { SelectionListener, SelectionService } from "../select/selection-service";
-import { DrawFeedbackEdgeAction, feedbackEdgeId, RemoveFeedbackEdgeAction } from "../tool-feedback/creation-tool-feedback";
-import { CursorCSS, cursorFeedbackAction } from "../tool-feedback/css-feedback";
+} from 'sprotty';
+import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
+import { GLSP_TYPES } from '../../base/types';
+import { isRoutable, isRoutingHandle } from '../../utils/smodel-util';
+import { isReconnectable, isReconnectHandle, isSourceRoutingHandle, isTargetRoutingHandle, SReconnectHandle } from '../reconnect/model';
+import { SelectionListener, SelectionService } from '../select/selection-service';
+import { DrawFeedbackEdgeAction, feedbackEdgeId, RemoveFeedbackEdgeAction } from '../tool-feedback/creation-tool-feedback';
+import { CursorCSS, cursorFeedbackAction } from '../tool-feedback/css-feedback';
 import {
     DrawFeedbackEdgeSourceAction,
     FeedbackEdgeRouteMovingMouseListener,
@@ -51,12 +43,12 @@ import {
     HideEdgeReconnectHandlesFeedbackAction,
     ShowEdgeReconnectHandlesFeedbackAction,
     SwitchRoutingModeAction
-} from "../tool-feedback/edge-edit-tool-feedback";
-import { BaseGLSPTool } from "./base-glsp-tool";
+} from '../tool-feedback/edge-edit-tool-feedback';
+import { BaseGLSPTool } from './base-glsp-tool';
 
 @injectable()
 export class EdgeEditTool extends BaseGLSPTool {
-    static ID = "glsp.edge-edit-tool";
+    static ID = 'glsp.edge-edit-tool';
 
     @inject(GLSP_TYPES.SelectionService) protected selectionService: SelectionService;
     @inject(AnchorComputerRegistry) protected anchorRegistry: AnchorComputerRegistry;
@@ -121,7 +113,7 @@ class EdgeEditListener extends DragAwareMouseListener implements SelectionListen
         return edge !== undefined && edge.id !== feedbackEdgeId(edge.root) && isSelected(edge);
     }
 
-    protected setEdgeSelected(edge: SRoutableElement) {
+    protected setEdgeSelected(edge: SRoutableElement): void {
         if (this.edge && this.edge.id !== edge.id) {
             // reset from a previously selected edge
             this.reset();
@@ -143,18 +135,22 @@ class EdgeEditListener extends DragAwareMouseListener implements SelectionListen
         return this.edge !== undefined && isSelected(this.edge);
     }
 
-    protected setReconnectHandleSelected(edge: SRoutableElement, reconnectHandle: SReconnectHandle) {
+    protected setReconnectHandleSelected(edge: SRoutableElement, reconnectHandle: SReconnectHandle): void {
         if (this.edge && this.edge.target && this.edge.source) {
             if (isSourceRoutingHandle(edge, reconnectHandle)) {
-                this.tool.dispatchFeedback([new HideEdgeReconnectHandlesFeedbackAction(),
-                cursorFeedbackAction(CursorCSS.EDGE_RECONNECT),
-                new DrawFeedbackEdgeSourceAction(this.edge.type, this.edge.targetId)]);
-                this.reconnectMode = "NEW_SOURCE";
+                this.tool.dispatchFeedback([
+                    new HideEdgeReconnectHandlesFeedbackAction(),
+                    cursorFeedbackAction(CursorCSS.EDGE_RECONNECT),
+                    new DrawFeedbackEdgeSourceAction(this.edge.type, this.edge.targetId)
+                ]);
+                this.reconnectMode = 'NEW_SOURCE';
             } else if (isTargetRoutingHandle(edge, reconnectHandle)) {
-                this.tool.dispatchFeedback([new HideEdgeReconnectHandlesFeedbackAction(),
-                cursorFeedbackAction(CursorCSS.EDGE_CREATION_TARGET),
-                new DrawFeedbackEdgeAction(this.edge.type, this.edge.sourceId)]);
-                this.reconnectMode = "NEW_TARGET";
+                this.tool.dispatchFeedback([
+                    new HideEdgeReconnectHandlesFeedbackAction(),
+                    cursorFeedbackAction(CursorCSS.EDGE_CREATION_TARGET),
+                    new DrawFeedbackEdgeAction(this.edge.type, this.edge.sourceId)
+                ]);
+                this.reconnectMode = 'NEW_TARGET';
             }
         }
     }
@@ -164,10 +160,10 @@ class EdgeEditListener extends DragAwareMouseListener implements SelectionListen
     }
 
     protected isReconnectingNewSource(): boolean {
-        return this.reconnectMode === "NEW_SOURCE";
+        return this.reconnectMode === 'NEW_SOURCE';
     }
 
-    protected setRoutingHandleSelected(edge: SRoutableElement, routingHandle: SRoutingHandle) {
+    protected setRoutingHandleSelected(edge: SRoutableElement, routingHandle: SRoutingHandle): void {
         if (this.edge && this.edge.target && this.edge.source) {
             this.routingHandle = routingHandle;
         }
@@ -177,15 +173,15 @@ class EdgeEditListener extends DragAwareMouseListener implements SelectionListen
         return this.edge !== undefined && (this.edge.sourceId !== sourceId || this.edge.targetId !== targetId);
     }
 
-    protected setNewConnectable(connectable?: SModelElement & Connectable) {
+    protected setNewConnectable(connectable?: SModelElement & Connectable): void {
         this.newConnectable = connectable;
     }
 
-    protected isReadyToReconnect() {
+    protected isReadyToReconnect(): boolean | undefined {
         return this.edge && this.isReconnecting() && this.newConnectable !== undefined;
     }
 
-    protected isReadyToReroute() {
+    protected isReadyToReroute(): boolean {
         return this.routingHandle !== undefined;
     }
 
@@ -235,7 +231,8 @@ class EdgeEditListener extends DragAwareMouseListener implements SelectionListen
             }
             this.reset();
         } else if (this.edge && this.routingHandle) {
-            // we need to re-retrieve the edge as it might have changed due to a server udpate since we do not reset the state between reroute actions
+            // we need to re-retrieve the edge as it might have changed due to a server update since we do not reset the state between
+            // reroute actions
             const latestEdge = target.index.getById(this.edge.id);
             if (latestEdge && isRoutable(latestEdge)) {
                 result.push(new ChangeRoutingPointsOperation([{ elementId: latestEdge.id, newRoutingPoints: latestEdge.routingPoints }]));
@@ -251,9 +248,10 @@ class EdgeEditListener extends DragAwareMouseListener implements SelectionListen
             if (!this.newConnectable || currentTarget !== this.newConnectable) {
                 this.setNewConnectable(currentTarget);
                 if (currentTarget) {
-                    if ((this.reconnectMode === 'NEW_SOURCE' && currentTarget.canConnect(this.edge, "source")) ||
-                        (this.reconnectMode === 'NEW_TARGET' && currentTarget.canConnect(this.edge, "target"))) {
-
+                    if (
+                        (this.reconnectMode === 'NEW_SOURCE' && currentTarget.canConnect(this.edge, 'source')) ||
+                        (this.reconnectMode === 'NEW_TARGET' && currentTarget.canConnect(this.edge, 'target'))
+                    ) {
                         this.tool.dispatchFeedback([cursorFeedbackAction(CursorCSS.EDGE_RECONNECT)]);
                         return [];
                     }
@@ -293,25 +291,24 @@ class EdgeEditListener extends DragAwareMouseListener implements SelectionListen
         }
     }
 
-    public reset() {
+    public reset(): void {
         this.resetFeedback();
         this.resetData();
     }
 
-    protected resetData() {
+    protected resetData(): void {
         this.edge = undefined;
         this.reconnectMode = undefined;
         this.newConnectable = undefined;
         this.routingHandle = undefined;
     }
 
-    protected resetFeedback() {
+    protected resetFeedback(): void {
         const result: Action[] = [];
         if (this.edge) {
             result.push(new SwitchRoutingModeAction([], [this.edge.id]));
         }
-        result.push(...[new HideEdgeReconnectHandlesFeedbackAction(),
-        cursorFeedbackAction(), new RemoveFeedbackEdgeAction()]);
+        result.push(...[new HideEdgeReconnectHandlesFeedbackAction(), cursorFeedbackAction(), new RemoveFeedbackEdgeAction()]);
         this.tool.deregisterFeedback(result);
         this.tool.deregisterFeedbackListeners();
     }

package/src/features/tools/marquee-behavior.spec.ts

@@ -0,0 +1,175 @@
+/********************************************************************************
+ * Copyright (c) 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
+ * 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 { expect } from 'chai';
+import { IMarqueeBehavior, MarqueeUtil } from './marquee-behavior';
+
+describe('MarqueeUtil', () => {
+    function initUtil(marqueeBehavior?: IMarqueeBehavior): MarqueeUtil {
+        const util = new MarqueeUtil(marqueeBehavior);
+        util.updateStartPoint({ x: 0, y: 0 });
+        util.updateCurrentPoint({ x: 0, y: 0 });
+        return util;
+    }
+
+    describe('Node marquee', () => {
+        const node = { x: 20, y: 20, width: 200, height: 50 };
+
+        it('touch element', () => {
+            const util = initUtil();
+            expect(util.isNodeMarked(node)).is.equals(false);
+            util.updateCurrentPoint({ x: 30, y: 50 });
+            expect(util.isNodeMarked(node)).is.equals(true);
+            util.updateCurrentPoint({ x: 250, y: 85 });
+            expect(util.isNodeMarked(node)).is.equals(true);
+            util.updateStartPoint({ x: 30, y: 25 });
+            expect(util.isNodeMarked(node)).is.equals(true);
+        });
+
+        it('touch element (reverse)', () => {
+            const util = initUtil();
+            expect(util.isNodeMarked(node)).is.equals(false);
+            util.updateStartPoint({ x: 30, y: 50 });
+            expect(util.isNodeMarked(node)).is.equals(true);
+            util.updateStartPoint({ x: 250, y: 85 });
+            expect(util.isNodeMarked(node)).is.equals(true);
+            util.updateCurrentPoint({ x: 30, y: 25 });
+            expect(util.isNodeMarked(node)).is.equals(true);
+        });
+
+        it('mark entire element', () => {
+            const util = initUtil({ entireElement: true, entireEdge: false });
+            expect(util.isNodeMarked(node)).is.equals(false);
+            util.updateCurrentPoint({ x: 30, y: 50 });
+            expect(util.isNodeMarked(node)).is.equals(false);
+            util.updateCurrentPoint({ x: 250, y: 85 });
+            expect(util.isNodeMarked(node)).is.equals(true);
+            util.updateStartPoint({ x: 30, y: 85 });
+            expect(util.isNodeMarked(node)).is.equals(false);
+        });
+
+        it('mark entire element (reverse)', () => {
+            const util = initUtil({ entireElement: true, entireEdge: false });
+            expect(util.isNodeMarked(node)).is.equals(false);
+            util.updateStartPoint({ x: 30, y: 50 });
+            expect(util.isNodeMarked(node)).is.equals(false);
+            util.updateStartPoint({ x: 250, y: 85 });
+            expect(util.isNodeMarked(node)).is.equals(true);
+            util.updateCurrentPoint({ x: 30, y: 85 });
+            expect(util.isNodeMarked(node)).is.equals(false);
+        });
+    });
+
+    describe('Edge marquee', () => {
+        const edge = [
+            { x: 20, y: 40 },
+            { x: 40, y: 20 }
+        ];
+        const edge2 = [
+            { x: 20, y: 20 },
+            { x: 40, y: 40 },
+            { x: 50, y: 10 }
+        ];
+
+        it('touch edge', () => {
+            const util = initUtil();
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateCurrentPoint({ x: 20, y: 20 });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+            util.updateCurrentPoint({ x: 30, y: 30 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+            util.updateCurrentPoint({ x: 50, y: 50 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+            util.updateStartPoint({ x: 25, y: 25 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+        });
+
+        it('touch edge (reverse)', () => {
+            const util = initUtil();
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateStartPoint({ x: 20, y: 20 });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+            util.updateStartPoint({ x: 30, y: 30 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+            util.updateStartPoint({ x: 50, y: 50 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+            util.updateCurrentPoint({ x: 25, y: 25 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+        });
+
+        it('mark entire edge', () => {
+            const util = initUtil({ entireElement: false, entireEdge: true });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateCurrentPoint({ x: 20, y: 20 });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateCurrentPoint({ x: 30, y: 30 });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateCurrentPoint({ x: 45, y: 50 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateCurrentPoint({ x: 55, y: 50 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+            util.updateStartPoint({ x: 25, y: 25 });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+        });
+
+        it('mark entire edge (reverse)', () => {
+            const util = initUtil({ entireElement: false, entireEdge: true });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateStartPoint({ x: 20, y: 20 });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateStartPoint({ x: 30, y: 30 });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateStartPoint({ x: 45, y: 50 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateStartPoint({ x: 55, y: 50 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+            util.updateCurrentPoint({ x: 25, y: 25 });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+        });
+
+        it('edge path should be marked', () => {
+            const path = 'M 599.968775008469,272.3972942960205 L 677.0904664855072,232';
+            const util = initUtil({ entireElement: false, entireEdge: true });
+            expect(util.isEdgePathMarked(path)).is.equals(false);
+            util.updateCurrentPoint({ x: 600, y: 300 });
+            expect(util.isEdgePathMarked(path)).is.equals(false);
+            util.updateCurrentPoint({ x: 700, y: 300 });
+            expect(util.isEdgePathMarked(path)).is.equals(true);
+        });
+    });
+});

package/src/features/tools/marquee-behavior.ts

@@ -0,0 +1,158 @@
+/********************************************************************************
+ * Copyright (c) 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
+ * 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, Point } from '@eclipse-glsp/protocol';
+import { PointToPointLine } from 'sprotty';
+import { DrawMarqueeAction } from '../tool-feedback/marquee-tool-feedback';
+
+export interface IMarqueeBehavior {
+    readonly entireElement: boolean;
+    readonly entireEdge: boolean;
+}
+
+export class MarqueeUtil {
+    protected startPoint: Point;
+    protected currentPoint: Point;
+    protected marqueeBehavior: IMarqueeBehavior;
+
+    constructor(marqueeBehavior?: IMarqueeBehavior) {
+        if (marqueeBehavior) {
+            this.marqueeBehavior = marqueeBehavior;
+        } else {
+            this.marqueeBehavior = { entireElement: false, entireEdge: false };
+        }
+    }
+
+    updateStartPoint(position: Point): void {
+        this.startPoint = position;
+    }
+
+    updateCurrentPoint(position: Point): void {
+        this.currentPoint = position;
+    }
+
+    drawMarqueeAction(): DrawMarqueeAction {
+        return new DrawMarqueeAction(this.startPoint, this.currentPoint);
+    }
+
+    isEdgePathMarked(path: string | null): boolean {
+        if (!path) {
+            return false;
+        }
+        const points = path
+            .split(/M|L/)
+            .filter(p => p)
+            .map(p => {
+                const coord = p.split(',');
+                return { x: parseInt(coord[0], 10), y: parseInt(coord[1], 10) };
+            });
+        return this.isEdgeMarked(points);
+    }
+
+    isEdgeMarked(points: Point[]): boolean {
+        return this.marqueeBehavior.entireEdge ? this.isEntireEdgeMarked(points) : this.isPartOfEdgeMarked(points);
+    }
+
+    isNodeMarked(elementBounds: Bounds): boolean {
+        const horizontallyIn =
+            this.startPoint.x < this.currentPoint.x
+                ? this.isElementBetweenXAxis(elementBounds, this.startPoint.x, this.currentPoint.x)
+                : this.isElementBetweenXAxis(elementBounds, this.currentPoint.x, this.startPoint.x);
+        const verticallyIn =
+            this.startPoint.y < this.currentPoint.y
+                ? this.isElementBetweenYAxis(elementBounds, this.startPoint.y, this.currentPoint.y)
+                : this.isElementBetweenYAxis(elementBounds, this.currentPoint.y, this.startPoint.y);
+        return horizontallyIn && verticallyIn;
+    }
+
+    private isEntireEdgeMarked(points: Point[]): boolean {
+        for (let i = 0; i < points.length; i++) {
+            if (!this.pointInRect(points[i])) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    private isPartOfEdgeMarked(points: Point[]): boolean {
+        for (let i = 0; i < points.length - 1; i++) {
+            if (this.isLineMarked(points[i], points[i + 1])) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private isLineMarked(point1: Point, point2: Point): boolean {
+        const line = new PointToPointLine(point1, point2);
+        return (
+            this.pointInRect(point1) ||
+            this.pointInRect(point2) ||
+            this.lineIntersect(line, this.startPoint, { x: this.startPoint.x, y: this.currentPoint.y }) ||
+            this.lineIntersect(line, this.startPoint, { x: this.currentPoint.x, y: this.startPoint.y }) ||
+            this.lineIntersect(line, { x: this.currentPoint.x, y: this.startPoint.y }, this.currentPoint) ||
+            this.lineIntersect(line, { x: this.startPoint.x, y: this.currentPoint.y }, this.currentPoint)
+        );
+    }
+
+    private lineIntersect(line: PointToPointLine, p1: Point, p2: Point): boolean {
+        return line.intersection(new PointToPointLine(p1, p2)) !== undefined;
+    }
+
+    private pointInRect(point: Point): boolean {
+        const boolX =
+            this.startPoint.x <= this.currentPoint.x
+                ? this.isBetween(point.x, this.startPoint.x, this.currentPoint.x)
+                : this.isBetween(point.x, this.currentPoint.x, this.startPoint.x);
+        const boolY =
+            this.startPoint.y <= this.currentPoint.y
+                ? this.isBetween(point.y, this.startPoint.y, this.currentPoint.y)
+                : this.isBetween(point.y, this.currentPoint.y, this.startPoint.y);
+        return boolX && boolY;
+    }
+
+    private isElementBetweenXAxis(elementBounds: Bounds, marqueeLeft: number, marqueeRight: number): boolean {
+        const leftEdge = this.isBetween(elementBounds.x, marqueeLeft, marqueeRight);
+        const rightEdge = this.isBetween(elementBounds.x + elementBounds.width, marqueeLeft, marqueeRight);
+        if (this.marqueeBehavior.entireElement) {
+            return leftEdge && rightEdge;
+        }
+        return (
+            leftEdge ||
+            rightEdge ||
+            this.isBetween(marqueeLeft, elementBounds.x, elementBounds.x + elementBounds.width) ||
+            this.isBetween(marqueeRight, elementBounds.x, elementBounds.x + elementBounds.width)
+        );
+    }
+
+    private isElementBetweenYAxis(elementBounds: Bounds, marqueeTop: number, marqueeBottom: number): boolean {
+        const topEdge = this.isBetween(elementBounds.y, marqueeTop, marqueeBottom);
+        const bottomEdge = this.isBetween(elementBounds.y + elementBounds.height, marqueeTop, marqueeBottom);
+        if (this.marqueeBehavior.entireElement) {
+            return topEdge && bottomEdge;
+        }
+        return (
+            topEdge ||
+            bottomEdge ||
+            this.isBetween(marqueeTop, elementBounds.y, elementBounds.y + elementBounds.height) ||
+            this.isBetween(marqueeBottom, elementBounds.y, elementBounds.y + elementBounds.height)
+        );
+    }
+
+    private isBetween(x: number, lower: number, upper: number): boolean {
+        return lower <= x && x <= upper;
+    }
+}

package/src/features/tools/marquee-mouse-tool.ts

@@ -0,0 +1,153 @@
+/********************************************************************************
+ * Copyright (c) 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
+ * 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, SelectAction } from '@eclipse-glsp/protocol';
+import { inject, injectable, optional } from 'inversify';
+import {
+    BoundsAware,
+    EnableDefaultToolsAction,
+    isSelectable,
+    isSelected,
+    KeyListener,
+    SEdge,
+    SModelElement,
+    SModelRoot,
+    SNode,
+    TYPES
+} from 'sprotty';
+import { DOMHelper } from 'sprotty/lib/base/views/dom-helper';
+import { GLSP_TYPES } from '../../base/types';
+import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
+import { getAbsolutePosition, toAbsoluteBounds } from '../../utils/viewpoint-util';
+import { CursorCSS, cursorFeedbackAction } from '../tool-feedback/css-feedback';
+import { RemoveMarqueeAction } from '../tool-feedback/marquee-tool-feedback';
+import { BaseGLSPTool } from './base-glsp-tool';
+import { IMarqueeBehavior, MarqueeUtil } from './marquee-behavior';
+
+@injectable()
+export class MarqueeMouseTool extends BaseGLSPTool {
+    static ID = 'glsp.marquee-mouse-tool';
+
+    @inject(TYPES.DOMHelper) protected domHelper: DOMHelper;
+    @inject(GLSP_TYPES.IMarqueeBehavior) @optional() protected marqueeBehavior: IMarqueeBehavior;
+
+    protected marqueeMouseListener: MarqueeMouseListener;
+    protected shiftKeyListener: ShiftKeyListener = new ShiftKeyListener();
+
+    get id(): string {
+        return MarqueeMouseTool.ID;
+    }
+
+    enable(): void {
+        this.marqueeMouseListener = new MarqueeMouseListener(this.domHelper, this.editorContext.modelRoot, this.marqueeBehavior);
+        this.mouseTool.register(this.marqueeMouseListener);
+        this.keyTool.register(this.shiftKeyListener);
+        this.dispatchFeedback([cursorFeedbackAction(CursorCSS.MARQUEE)]);
+    }
+
+    disable(): void {
+        this.mouseTool.deregister(this.marqueeMouseListener);
+        this.keyTool.deregister(this.shiftKeyListener);
+        this.deregisterFeedback([cursorFeedbackAction()]);
+    }
+}
+
+export class MarqueeMouseListener extends DragAwareMouseListener {
+    protected domHelper: DOMHelper;
+    protected marqueeUtil: MarqueeUtil;
+    protected nodes: (SModelElement & BoundsAware)[];
+    protected edges: SVGGElement[];
+    protected previouslySelected: string[];
+    protected isActive = false;
+
+    constructor(domHelper: DOMHelper, root: SModelRoot, marqueeBehavior: IMarqueeBehavior | undefined) {
+        super();
+        this.domHelper = domHelper;
+        this.marqueeUtil = new MarqueeUtil(marqueeBehavior);
+        this.nodes = Array.from(
+            root.index
+                .all()
+                .map(e => e as SModelElement & BoundsAware)
+                .filter(e => isSelectable(e))
+                .filter(e => e instanceof SNode)
+        );
+        const sEdges = Array.from(
+            root.index
+                .all()
+                .filter(e => e instanceof SEdge)
+                .filter(e => isSelectable(e))
+                .map(e => e.id)
+        );
+        this.edges = Array.from(document.querySelectorAll('g')).filter(e => sEdges.includes(this.domHelper.findSModelIdByDOMElement(e)));
+    }
+
+    mouseDown(target: SModelElement, event: MouseEvent): Action[] {
+        this.isActive = true;
+        this.marqueeUtil.updateStartPoint(getAbsolutePosition(target, event));
+        if (event.ctrlKey) {
+            this.previouslySelected = Array.from(
+                target.root.index
+                    .all()
+                    .map(e => e as SModelElement & BoundsAware)
+                    .filter(e => isSelected(e))
+                    .map(e => e.id)
+            );
+        }
+        return [];
+    }
+
+    mouseMove(target: SModelElement, event: MouseEvent): Action[] {
+        this.marqueeUtil.updateCurrentPoint(getAbsolutePosition(target, event));
+        if (this.isActive) {
+            const nodeIdsSelected = this.nodes.filter(e => this.marqueeUtil.isNodeMarked(toAbsoluteBounds(e))).map(e => e.id);
+            const edgeIdsSelected = this.edges.filter(e => this.isEdgeMarked(e)).map(e => this.domHelper.findSModelIdByDOMElement(e));
+            const selected = nodeIdsSelected.concat(edgeIdsSelected);
+            return [
+                new SelectAction([], Array.from(target.root.index.all().map(e => e.id))),
+                new SelectAction(selected.concat(this.previouslySelected), []),
+                this.marqueeUtil.drawMarqueeAction()
+            ];
+        }
+        return [];
+    }
+
+    mouseUp(target: SModelElement, event: MouseEvent): Action[] {
+        this.isActive = false;
+        if (event.shiftKey) {
+            return [new RemoveMarqueeAction()];
+        }
+        return [new RemoveMarqueeAction(), new EnableDefaultToolsAction()];
+    }
+
+    isEdgeMarked(element: SVGElement): boolean {
+        if (!element.getAttribute('transform')) {
+            if (element.children[0]) {
+                const path = element.children[0].getAttribute('d');
+                return this.marqueeUtil.isEdgePathMarked(path);
+            }
+        }
+        return false;
+    }
+}
+
+@injectable()
+export class ShiftKeyListener extends KeyListener {
+    keyUp(element: SModelElement, event: KeyboardEvent): Action[] {
+        if (event.shiftKey) {
+            return [];
+        }
+        return [new RemoveMarqueeAction(), new EnableDefaultToolsAction()];
+    }
+}