@eclipse-glsp/client 1.1.0-next.fdfeeeb.193 → 2.0.0

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

@@ -0,0 +1,322 @@
+/********************************************************************************
+ * Copyright (c) 2019-2023 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 { inject, injectable, optional } from 'inversify';
+import {
+    Action,
+    AnchorComputerRegistry,
+    ChangeRoutingPointsOperation,
+    Connectable,
+    Disposable,
+    EdgeRouterRegistry,
+    ISnapper,
+    ReconnectEdgeOperation,
+    GModelElement,
+    GModelRoot,
+    GRoutableElement,
+    GRoutingHandle,
+    TYPES,
+    canEditRouting,
+    findParentByFeature,
+    isConnectable,
+    isSelected
+} from '@eclipse-glsp/sprotty';
+import { DragAwareMouseListener } from '../../../base/drag-aware-mouse-listener';
+import { CursorCSS, cursorFeedbackAction } from '../../../base/feedback/css-feedback';
+import { ISelectionListener, SelectionService } from '../../../base/selection-service';
+import { calcElementAndRoutingPoints, isRoutable, isRoutingHandle } from '../../../utils/gmodel-util';
+import { GReconnectHandle, isReconnectHandle, isReconnectable, isSourceRoutingHandle, isTargetRoutingHandle } from '../../reconnect/model';
+import { BaseEditTool } from '../base-tools';
+import { DrawFeedbackEdgeAction, RemoveFeedbackEdgeAction, feedbackEdgeId } from '../edge-creation/dangling-edge-feedback';
+import {
+    DrawFeedbackEdgeSourceAction,
+    FeedbackEdgeRouteMovingMouseListener,
+    FeedbackEdgeSourceMovingMouseListener,
+    FeedbackEdgeTargetMovingMouseListener,
+    HideEdgeReconnectHandlesFeedbackAction,
+    ShowEdgeReconnectHandlesFeedbackAction,
+    SwitchRoutingModeAction
+} from './edge-edit-tool-feedback';
+
+@injectable()
+export class EdgeEditTool extends BaseEditTool {
+    static ID = 'glsp.edge-edit-tool';
+
+    @inject(SelectionService) protected selectionService: SelectionService;
+    @inject(AnchorComputerRegistry) protected anchorRegistry: AnchorComputerRegistry;
+    @inject(EdgeRouterRegistry) @optional() readonly edgeRouterRegistry?: EdgeRouterRegistry;
+    @inject(TYPES.ISnapper) @optional() readonly snapper?: ISnapper;
+
+    protected feedbackEdgeSourceMovingListener: FeedbackEdgeSourceMovingMouseListener;
+    protected feedbackEdgeTargetMovingListener: FeedbackEdgeTargetMovingMouseListener;
+    protected feedbackMovingListener: FeedbackEdgeRouteMovingMouseListener;
+    protected edgeEditListener: EdgeEditListener;
+
+    get id(): string {
+        return EdgeEditTool.ID;
+    }
+
+    enable(): void {
+        this.edgeEditListener = new EdgeEditListener(this);
+
+        // install feedback move mouse listener for client-side move updates
+        this.feedbackEdgeSourceMovingListener = new FeedbackEdgeSourceMovingMouseListener(this.anchorRegistry, this.feedbackDispatcher);
+        this.feedbackEdgeTargetMovingListener = new FeedbackEdgeTargetMovingMouseListener(this.anchorRegistry, this.feedbackDispatcher);
+        this.feedbackMovingListener = new FeedbackEdgeRouteMovingMouseListener(this.edgeRouterRegistry, this.snapper);
+
+        this.toDisposeOnDisable.push(
+            Disposable.create(() => this.edgeEditListener.reset()),
+            this.mouseTool.registerListener(this.edgeEditListener),
+            this.feedbackEdgeSourceMovingListener,
+            this.feedbackEdgeTargetMovingListener,
+            this.selectionService.onSelectionChanged(change => this.edgeEditListener.selectionChanged(change.root, change.selectedElements))
+        );
+    }
+
+    registerFeedbackListeners(): void {
+        this.mouseTool.register(this.feedbackMovingListener);
+        this.mouseTool.register(this.feedbackEdgeSourceMovingListener);
+        this.mouseTool.register(this.feedbackEdgeTargetMovingListener);
+    }
+
+    deregisterFeedbackListeners(): void {
+        this.feedbackEdgeSourceMovingListener.dispose();
+        this.feedbackEdgeTargetMovingListener.dispose();
+        this.mouseTool.deregister(this.feedbackEdgeSourceMovingListener);
+        this.mouseTool.deregister(this.feedbackEdgeTargetMovingListener);
+        this.mouseTool.deregister(this.feedbackMovingListener);
+    }
+}
+
+export class EdgeEditListener extends DragAwareMouseListener implements ISelectionListener {
+    // active selection data
+    protected edge?: GRoutableElement;
+    protected routingHandle?: GRoutingHandle;
+
+    // new connectable (source or target) for edge
+    protected newConnectable?: GModelElement & Connectable;
+
+    // active reconnect handle data
+    protected reconnectMode?: 'NEW_SOURCE' | 'NEW_TARGET';
+
+    constructor(protected tool: EdgeEditTool) {
+        super();
+    }
+
+    protected isValidEdge(edge?: GRoutableElement): edge is GRoutableElement {
+        return edge !== undefined && edge.id !== feedbackEdgeId(edge.root) && isSelected(edge);
+    }
+
+    protected setEdgeSelected(edge: GRoutableElement): void {
+        if (this.edge && this.edge.id !== edge.id) {
+            // reset from a previously selected edge
+            this.reset();
+        }
+
+        this.edge = edge;
+        // note: order is important here as we want the reconnect handles to cover the routing handles
+        const feedbackActions = [];
+        if (canEditRouting(edge)) {
+            feedbackActions.push(SwitchRoutingModeAction.create({ elementsToActivate: [this.edge.id] }));
+        }
+        if (isReconnectable(edge)) {
+            feedbackActions.push(ShowEdgeReconnectHandlesFeedbackAction.create(this.edge.id));
+        }
+        this.tool.registerFeedback(feedbackActions);
+    }
+
+    protected isEdgeSelected(): boolean {
+        return this.edge !== undefined && isSelected(this.edge);
+    }
+
+    protected setReconnectHandleSelected(edge: GRoutableElement, reconnectHandle: GReconnectHandle): void {
+        if (this.edge && this.edge.target && this.edge.source) {
+            if (isSourceRoutingHandle(edge, reconnectHandle)) {
+                this.tool.registerFeedback([
+                    HideEdgeReconnectHandlesFeedbackAction.create(),
+                    cursorFeedbackAction(CursorCSS.EDGE_RECONNECT),
+                    DrawFeedbackEdgeSourceAction.create({ elementTypeId: this.edge.type, targetId: this.edge.targetId })
+                ]);
+                this.reconnectMode = 'NEW_SOURCE';
+            } else if (isTargetRoutingHandle(edge, reconnectHandle)) {
+                this.tool.registerFeedback([
+                    HideEdgeReconnectHandlesFeedbackAction.create(),
+                    cursorFeedbackAction(CursorCSS.EDGE_CREATION_TARGET),
+                    DrawFeedbackEdgeAction.create({ elementTypeId: this.edge.type, sourceId: this.edge.sourceId })
+                ]);
+                this.reconnectMode = 'NEW_TARGET';
+            }
+        }
+    }
+
+    protected isReconnecting(): boolean {
+        return this.reconnectMode !== undefined;
+    }
+
+    protected isReconnectingNewSource(): boolean {
+        return this.reconnectMode === 'NEW_SOURCE';
+    }
+
+    protected setRoutingHandleSelected(edge: GRoutableElement, routingHandle: GRoutingHandle): void {
+        if (this.edge && this.edge.target && this.edge.source) {
+            this.routingHandle = routingHandle;
+        }
+    }
+
+    protected requiresReconnect(sourceId: string, targetId: string): boolean {
+        return this.edge !== undefined && (this.edge.sourceId !== sourceId || this.edge.targetId !== targetId);
+    }
+
+    protected setNewConnectable(connectable?: GModelElement & Connectable): void {
+        this.newConnectable = connectable;
+    }
+
+    protected isReadyToReconnect(): boolean | undefined {
+        return this.edge && this.isReconnecting() && this.newConnectable !== undefined;
+    }
+
+    protected isReadyToReroute(): boolean {
+        return this.routingHandle !== undefined;
+    }
+
+    override mouseDown(target: GModelElement, event: MouseEvent): Action[] {
+        const result: Action[] = super.mouseDown(target, event);
+        if (event.button === 0) {
+            const reconnectHandle = findParentByFeature(target, isReconnectHandle);
+            const routingHandle = !reconnectHandle ? findParentByFeature(target, isRoutingHandle) : undefined;
+            const edge = findParentByFeature(target, isRoutable);
+            if (this.isEdgeSelected() && edge && reconnectHandle) {
+                // PHASE 2 Reconnect: Select reconnect handle on selected edge
+                this.setReconnectHandleSelected(edge, reconnectHandle);
+            } else if (this.isEdgeSelected() && edge && routingHandle) {
+                // PHASE 2 Reroute: Select routing handle on selected edge
+                this.setRoutingHandleSelected(edge, routingHandle);
+            } else if (this.isValidEdge(edge)) {
+                // PHASE 1: Select edge
+                this.tool.registerFeedbackListeners();
+                this.setEdgeSelected(edge);
+            }
+        } else if (event.button === 2) {
+            this.reset();
+        }
+        return result;
+    }
+
+    override mouseMove(target: GModelElement, event: MouseEvent): Action[] {
+        const result = super.mouseMove(target, event);
+        if (this.isMouseDrag) {
+            // reset any selected connectables when we are dragging, maybe the user is just panning
+            this.setNewConnectable(undefined);
+        }
+        return result;
+    }
+
+    override mouseUp(target: GModelElement, event: MouseEvent): Action[] {
+        const result = super.mouseUp(target, event);
+        if (!this.isReadyToReconnect() && !this.isReadyToReroute()) {
+            return result;
+        }
+
+        if (this.edge && this.newConnectable) {
+            const sourceElementId = this.isReconnectingNewSource() ? this.newConnectable.id : this.edge.sourceId;
+            const targetElementId = this.isReconnectingNewSource() ? this.edge.targetId : this.newConnectable.id;
+            if (this.requiresReconnect(sourceElementId, targetElementId)) {
+                result.push(ReconnectEdgeOperation.create({ edgeElementId: this.edge.id, sourceElementId, targetElementId }));
+            }
+            this.reset();
+        } else if (this.edge && this.routingHandle) {
+            // 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)) {
+                const newRoutingPoints = calcElementAndRoutingPoints(latestEdge, this.tool.edgeRouterRegistry);
+                result.push(ChangeRoutingPointsOperation.create([newRoutingPoints]));
+                this.routingHandle = undefined;
+            }
+        }
+        return result;
+    }
+
+    override mouseOver(target: GModelElement, _event: MouseEvent): Action[] {
+        if (this.edge && this.isReconnecting()) {
+            const currentTarget = findParentByFeature(target, isConnectable);
+            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'))
+                    ) {
+                        this.tool.registerFeedback([cursorFeedbackAction(CursorCSS.EDGE_RECONNECT)]);
+                        return [];
+                    }
+                }
+                this.tool.registerFeedback([cursorFeedbackAction(CursorCSS.OPERATION_NOT_ALLOWED)]);
+            }
+        }
+        return [];
+    }
+
+    selectionChanged(root: Readonly<GModelRoot>, selectedElements: string[]): void {
+        if (this.edge) {
+            if (selectedElements.indexOf(this.edge.id) > -1) {
+                // our active edge is still selected, nothing to do
+                return;
+            }
+
+            if (this.isReconnecting()) {
+                // we are reconnecting, so we may have clicked on a potential target
+                return;
+            }
+
+            // try to find some other selected element and mark that active
+            for (const elementId of selectedElements.reverse()) {
+                const element = root.index.getById(elementId);
+                if (element) {
+                    const edge = findParentByFeature(element, isRoutable);
+                    if (this.isValidEdge(edge)) {
+                        // PHASE 1: Select edge
+                        this.setEdgeSelected(edge);
+                        return;
+                    }
+                }
+            }
+
+            this.reset();
+        }
+    }
+
+    public reset(): void {
+        this.resetFeedback();
+        this.resetData();
+    }
+
+    protected resetData(): void {
+        this.edge = undefined;
+        this.reconnectMode = undefined;
+        this.newConnectable = undefined;
+        this.routingHandle = undefined;
+    }
+
+    protected resetFeedback(): void {
+        const result: Action[] = [];
+        if (this.edge) {
+            result.push(SwitchRoutingModeAction.create({ elementsToDeactivate: [this.edge.id] }));
+        }
+        result.push(...[HideEdgeReconnectHandlesFeedbackAction.create(), cursorFeedbackAction(), RemoveFeedbackEdgeAction.create()]);
+        this.tool.deregisterFeedback(undefined, result);
+        this.tool.deregisterFeedbackListeners();
+    }
+}

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

@@ -0,0 +1,157 @@
+/********************************************************************************
+ * Copyright (c) 2021-2023 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, PointToPointLine } from '@eclipse-glsp/sprotty';
+import { DrawMarqueeAction } from './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 DrawMarqueeAction.create({ startPoint: this.startPoint, endPoint: 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;
+    }
+
+    protected isEntireEdgeMarked(points: Point[]): boolean {
+        for (let i = 0; i < points.length; i++) {
+            if (!this.pointInRect(points[i])) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    protected 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;
+    }
+
+    protected 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)
+        );
+    }
+
+    protected lineIntersect(line: PointToPointLine, p1: Point, p2: Point): boolean {
+        return line.intersection(new PointToPointLine(p1, p2)) !== undefined;
+    }
+
+    protected 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;
+    }
+
+    protected 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)
+        );
+    }
+
+    protected 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)
+        );
+    }
+
+    protected isBetween(x: number, lower: number, upper: number): boolean {
+        return lower <= x && x <= upper;
+    }
+}

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

@@ -0,0 +1,143 @@
+/********************************************************************************
+ * Copyright (c) 2021-2023 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,
+    BoundsAware,
+    DOMHelper,
+    GModelElement,
+    GModelRoot,
+    GNode,
+    KeyListener,
+    SelectAction,
+    TYPES,
+    isSelectable,
+    isSelected
+} from '@eclipse-glsp/sprotty';
+import { inject, injectable, optional } from 'inversify';
+import { DragAwareMouseListener } from '../../../base/drag-aware-mouse-listener';
+import { CursorCSS, cursorFeedbackAction } from '../../../base/feedback/css-feedback';
+import { EnableDefaultToolsAction } from '../../../base/tool-manager/tool';
+import { getAbsolutePosition, toAbsoluteBounds } from '../../../utils/viewpoint-util';
+import { BaseEditTool } from '../base-tools';
+import { IMarqueeBehavior, MarqueeUtil } from './marquee-behavior';
+import { RemoveMarqueeAction } from './marquee-tool-feedback';
+import { GEdge } from '../../../model';
+
+@injectable()
+export class MarqueeMouseTool extends BaseEditTool {
+    static ID = 'glsp.marquee-mouse-tool';
+
+    @inject(TYPES.DOMHelper) protected domHelper: DOMHelper;
+    @inject(TYPES.IMarqueeBehavior) @optional() protected marqueeBehavior: IMarqueeBehavior;
+
+    protected shiftKeyListener: ShiftKeyListener = new ShiftKeyListener();
+
+    get id(): string {
+        return MarqueeMouseTool.ID;
+    }
+
+    enable(): void {
+        this.toDisposeOnDisable.push(
+            this.mouseTool.registerListener(new MarqueeMouseListener(this.domHelper, this.editorContext.modelRoot, this.marqueeBehavior)),
+            this.keyTool.registerListener(this.shiftKeyListener),
+            this.registerFeedback([cursorFeedbackAction(CursorCSS.MARQUEE)], this, [cursorFeedbackAction()])
+        );
+    }
+}
+
+export class MarqueeMouseListener extends DragAwareMouseListener {
+    protected domHelper: DOMHelper;
+    protected marqueeUtil: MarqueeUtil;
+    protected nodes: (GModelElement & BoundsAware)[];
+    protected edges: SVGGElement[];
+    protected previouslySelected: string[];
+    protected isActive = false;
+
+    constructor(domHelper: DOMHelper, root: GModelRoot, marqueeBehavior: IMarqueeBehavior | undefined) {
+        super();
+        this.domHelper = domHelper;
+        this.marqueeUtil = new MarqueeUtil(marqueeBehavior);
+        this.nodes = Array.from(
+            root.index
+                .all()
+                .map(e => e as GModelElement & BoundsAware)
+                .filter(e => isSelectable(e))
+                .filter(e => e instanceof GNode)
+        );
+        const sEdges = Array.from(
+            root.index
+                .all()
+                .filter(e => e instanceof GEdge)
+                .filter(e => isSelectable(e))
+                .map(e => e.id)
+        );
+        this.edges = Array.from(document.querySelectorAll('g')).filter(e => sEdges.includes(this.domHelper.findSModelIdByDOMElement(e)));
+    }
+
+    override mouseDown(target: GModelElement, 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 GModelElement & BoundsAware)
+                    .filter(e => isSelected(e))
+                    .map(e => e.id)
+            );
+        }
+        return [];
+    }
+
+    override mouseMove(target: GModelElement, 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 [SelectAction.setSelection(selected.concat(this.previouslySelected)), this.marqueeUtil.drawMarqueeAction()];
+        }
+        return [];
+    }
+
+    override mouseUp(_target: GModelElement, event: MouseEvent): Action[] {
+        this.isActive = false;
+        if (event.shiftKey) {
+            return [RemoveMarqueeAction.create()];
+        }
+        return [RemoveMarqueeAction.create(), EnableDefaultToolsAction.create()];
+    }
+
+    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 {
+    override keyUp(element: GModelElement, event: KeyboardEvent): Action[] {
+        if (event.shiftKey) {
+            return [];
+        }
+        return [RemoveMarqueeAction.create(), EnableDefaultToolsAction.create()];
+    }
+}

package/src/features/tools/marquee-selection/marquee-selection-module.ts

@@ -0,0 +1,32 @@
+/********************************************************************************
+ * Copyright (c) 2019-2023 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 { FeatureModule, TYPES, bindAsService, configureCommand, configureModelElement } from '@eclipse-glsp/sprotty';
+import { MarqueeMouseTool } from './marquee-mouse-tool';
+import { MarqueeTool } from './marquee-tool';
+import { DrawMarqueeCommand, MARQUEE, RemoveMarqueeCommand } from './marquee-tool-feedback';
+import { MarqueeNode } from './model';
+import { MarqueeView } from './view';
+
+export const marqueeSelectionToolModule = new FeatureModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+    bindAsService(context, TYPES.IDefaultTool, MarqueeTool);
+    bindAsService(context, TYPES.ITool, MarqueeMouseTool);
+
+    configureCommand(context, DrawMarqueeCommand);
+    configureCommand(context, RemoveMarqueeCommand);
+
+    configureModelElement(context, MARQUEE, MarqueeNode, MarqueeView);
+});