@eclipse-glsp/client 0.9.0-next.d0112315 → 0.9.0-next.f12e3d87

package/src/features/tools/change-bounds-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
@@ -27,6 +27,7 @@ import {
     isViewport,
     MouseListener,
     Point,
+    SChildElement,
     SConnectableElement,
     SetBoundsAction,
     SModelElement,
@@ -34,7 +35,6 @@ import {
     SParentElement,
     TYPES
 } from 'sprotty';
-
 import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
 import {
     ChangeBoundsOperation,
@@ -76,8 +76,8 @@ import { BaseGLSPTool } from './base-glsp-tool';
  * | Move      | MoveAction       | ChangeBoundsOperationAction
  * | Resize    | SetBoundsAction  | ChangeBoundsOperationAction
  *
- * To provide a visual client updates during move we install the `FeedbackMoveMouseListener` and to provide visual client updates during resize
- * and send the server updates we install the `ChangeBoundsListener`.
+ * To provide a visual client updates during move we install the `FeedbackMoveMouseListener` and to provide visual client updates during
+ * resize and send the server updates we install the `ChangeBoundsListener`.
  */
 @injectable()
 export class ChangeBoundsTool extends BaseGLSPTool {
@@ -118,7 +118,7 @@ export class ChangeBoundsTool extends BaseGLSPTool {
         this.selectionService.deregister(this.changeBoundsListener);
         this.mouseTool.deregister(this.feedbackMoveMouseListener);
         this.deregisterFeedback([], this.feedbackMoveMouseListener);
-        this.deregisterFeedback([new HideChangeBoundsToolResizeFeedbackAction], this.changeBoundsListener);
+        this.deregisterFeedback([new HideChangeBoundsToolResizeFeedbackAction()], this.changeBoundsListener);
     }
 }
 
@@ -162,7 +162,10 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
         if (this.isMouseDrag && this.activeResizeHandle) {
             // rely on the FeedbackMoveMouseListener to update the element bounds of selected elements
             // consider resize handles ourselves
-            const actions: Action[] = [cursorFeedbackAction(CursorCSS.RESIZE), applyCssClasses(this.activeResizeHandle, ChangeBoundsListener.CSS_CLASS_ACTIVE)];
+            const actions: Action[] = [
+                cursorFeedbackAction(this.activeResizeHandle.isNwSeResize() ? CursorCSS.RESIZE_NWSE : CursorCSS.RESIZE_NESW),
+                applyCssClasses(this.activeResizeHandle, ChangeBoundsListener.CSS_CLASS_ACTIVE)
+            ];
             const positionUpdate = this.updatePosition(target, event);
             if (positionUpdate) {
                 const resizeActions = this.handleResizeOnClient(positionUpdate);
@@ -205,15 +208,32 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
     protected handleMoveElementsOnServer(target: SModelElement): Action[] {
         const result: Operation[] = [];
         const newBounds: ElementAndBounds[] = [];
+        const selectedElements: (SModelElement & BoundsAware)[] = [];
         forEachElement(target, isNonRoutableSelectedMovableBoundsAware, element => {
-            this.createElementAndBounds(element).forEach(bounds => newBounds.push(bounds));
+            selectedElements.push(element);
         });
+
+        const selectionSet: Set<SModelElement & BoundsAware> = new Set(selectedElements);
+        selectedElements.filter(element => !this.isChildOfSelected(selectionSet, element))
+            .map(element => this.createElementAndBounds(element))
+            .forEach(bounds => newBounds.push(...bounds));
+
         if (newBounds.length > 0) {
             result.push(new ChangeBoundsOperation(newBounds));
         }
         return result;
     }
 
+    protected isChildOfSelected(selectedElements: Set<SModelElement>, element: SModelElement): boolean {
+        while (element instanceof SChildElement) {
+            element = element.parent;
+            if (selectedElements.has(element)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
     protected handleMoveRoutingPointsOnServer(target: SModelElement): Action[] {
         const result: Operation[] = [];
         const newRoutingPoints: ElementAndRoutingPoints[] = [];
@@ -281,7 +301,12 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
         this.lastDragPosition = { x: event.pageX, y: event.pageY };
         if (this.activeResizeHandle) {
             const resizeElement = findParentByFeature(this.activeResizeHandle, isResizable);
-            this.initialBounds = { x: resizeElement!.bounds.x, y: resizeElement!.bounds.y, width: resizeElement!.bounds.width, height: resizeElement!.bounds.height };
+            this.initialBounds = {
+                x: resizeElement!.bounds.x,
+                y: resizeElement!.bounds.y,
+                width: resizeElement!.bounds.width,
+                height: resizeElement!.bounds.height
+            };
         }
     }
 
@@ -302,14 +327,14 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
 
             // snap our delta and only send update if the position actually changes
             // otherwise accumulate delta until we do snap to an update
-            const positionUpdate = this.snap(this.positionDelta, target, !event.shiftKey);
+            const positionUpdate = this.snap(this.positionDelta, target, !event.altKey);
             if (positionUpdate.x === 0 && positionUpdate.y === 0) {
                 return undefined;
             }
 
-            // we update our position so we need to reset our delta
-            this.positionDelta.x = 0;
-            this.positionDelta.y = 0;
+            // we update our position so we update our delta by the snapped position
+            this.positionDelta.x -= positionUpdate.x;
+            this.positionDelta.y -= positionUpdate.y;
             return positionUpdate;
         }
         return undefined;
@@ -318,7 +343,6 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
     protected reset(): void {
         if (this.activeResizeElement && isResizable(this.activeResizeElement)) {
             this.tool.dispatchFeedback([new HideChangeBoundsToolResizeFeedbackAction()], this);
-
         }
         this.tool.dispatchActions([cursorFeedbackAction(CursorCSS.DEFAULT)]);
         this.resetPosition();
@@ -352,35 +376,43 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
     }
 
     protected handleTopLeftResize(resizeElement: SParentElement & Resizable, positionUpdate: Point): Action[] {
-        return this.createSetBoundsAction(resizeElement,
+        return this.createSetBoundsAction(
+            resizeElement,
             resizeElement.bounds.x + positionUpdate.x,
             resizeElement.bounds.y + positionUpdate.y,
             resizeElement.bounds.width - positionUpdate.x,
-            resizeElement.bounds.height - positionUpdate.y);
+            resizeElement.bounds.height - positionUpdate.y
+        );
     }
 
     protected handleTopRightResize(resizeElement: SParentElement & Resizable, positionUpdate: Point): Action[] {
-        return this.createSetBoundsAction(resizeElement,
+        return this.createSetBoundsAction(
+            resizeElement,
             resizeElement.bounds.x,
             resizeElement.bounds.y + positionUpdate.y,
             resizeElement.bounds.width + positionUpdate.x,
-            resizeElement.bounds.height - positionUpdate.y);
+            resizeElement.bounds.height - positionUpdate.y
+        );
     }
 
     protected handleBottomLeftResize(resizeElement: SParentElement & Resizable, positionUpdate: Point): Action[] {
-        return this.createSetBoundsAction(resizeElement,
+        return this.createSetBoundsAction(
+            resizeElement,
             resizeElement.bounds.x + positionUpdate.x,
             resizeElement.bounds.y,
             resizeElement.bounds.width - positionUpdate.x,
-            resizeElement.bounds.height + positionUpdate.y);
+            resizeElement.bounds.height + positionUpdate.y
+        );
     }
 
     protected handleBottomRightResize(resizeElement: SParentElement & Resizable, positionUpdate: Point): Action[] {
-        return this.createSetBoundsAction(resizeElement,
+        return this.createSetBoundsAction(
+            resizeElement,
             resizeElement.bounds.x,
             resizeElement.bounds.y,
             resizeElement.bounds.width + positionUpdate.x,
-            resizeElement.bounds.height + positionUpdate.y);
+            resizeElement.bounds.height + positionUpdate.y
+        );
     }
 
     protected createChangeBoundsAction(element: SModelElement & BoundsAware): Action[] {
@@ -414,7 +446,6 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
                 result.push(removeMovementRestrictionFeedback(element, this.tool.movementRestrictor));
             }
             result.push(new SetBoundsAction([{ elementId: element.id, newPosition, newSize }]));
-
         } else if (this.isValidSize(element, newSize)) {
             if (this.tool.movementRestrictor) {
                 result.push(createMovementRestrictionFeedback(element, this.tool.movementRestrictor));
@@ -426,9 +457,7 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
     }
 
     protected snap(position: Point, element: SModelElement, isSnap: boolean): Point {
-        return isSnap && this.tool.snapper
-            ? this.tool.snapper.snap(position, element)
-            : { x: position.x, y: position.y };
+        return isSnap && this.tool.snapper ? this.tool.snapper.snap(position, element) : { x: position.x, y: position.y };
     }
 
     protected isValidBoundChange(element: SModelElement & BoundsAware, newPosition: Point, newSize: Dimension): boolean {

package/src/features/tools/delete-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
@@ -64,8 +64,13 @@ export class DelKeyDeleteTool implements GLSPTool {
 export class DeleteKeyListener extends KeyListener {
     keyDown(element: SModelElement, event: KeyboardEvent): Action[] {
         if (matchesKeystroke(event, 'Delete')) {
-            const deleteElementIds = Array.from(element.root.index.all().filter(e => isDeletable(e) && isSelectable(e) && e.selected)
-                .filter(e => e.id !== e.root.id).map(e => e.id));
+            const deleteElementIds = Array.from(
+                element.root.index
+                    .all()
+                    .filter(e => isDeletable(e) && isSelectable(e) && e.selected)
+                    .filter(e => e.id !== e.root.id)
+                    .map(e => e.id)
+            );
             if (deleteElementIds.length > 0) {
                 return [new DeleteElementOperation(deleteElementIds)];
             }

package/src/features/tools/edge-creation-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
@@ -28,11 +28,7 @@ import {
 } from 'sprotty';
 
 import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
-import {
-    CreateEdgeOperation,
-    isTriggerElementTypeCreationAction,
-    TriggerEdgeCreationAction
-} from '../../base/operations/operation';
+import { CreateEdgeOperation, isTriggerElementTypeCreationAction, TriggerEdgeCreationAction } from '../../base/operations/operation';
 import {
     DrawFeedbackEdgeAction,
     FeedbackEdgeEndMovingMouseListener,
@@ -151,8 +147,9 @@ export class EdgeCreationToolMouseListener extends DragAwareMouseListener {
                     this.allowedTarget = this.isAllowedTarget(newCurrentTarget);
                 }
                 if (this.allowedTarget) {
-                    const action = !this.isSourceSelected() ? cursorFeedbackAction(CursorCSS.EDGE_CREATION_SOURCE) :
-                        cursorFeedbackAction(CursorCSS.EDGE_CREATION_TARGET);
+                    const action = !this.isSourceSelected()
+                        ? cursorFeedbackAction(CursorCSS.EDGE_CREATION_SOURCE)
+                        : cursorFeedbackAction(CursorCSS.EDGE_CREATION_TARGET);
                     return [action];
                 }
             }

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
@@ -28,18 +28,11 @@ import {
     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 { 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';
@@ -239,7 +232,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 }]));
@@ -255,9 +249,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 [];
                     }
@@ -314,11 +309,7 @@ class EdgeEditListener extends DragAwareMouseListener implements SelectionListen
         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-mouse-tool.ts

@@ -65,7 +65,6 @@ export class MarqueeMouseTool extends BaseGLSPTool {
 
 @injectable()
 export class MarqueeMouseListener extends DragAwareMouseListener {
-
     protected startPoint: Point;
 
     protected currentPoint: Point;
@@ -84,11 +83,14 @@ export class MarqueeMouseListener extends DragAwareMouseListener {
     mouseDown(target: SModelElement, event: MouseEvent): Action[] {
         this.isActive = true;
         this.startPoint = { x: getAbsolutePosition(target, event).x, y: getAbsolutePosition(target, event).y };
-        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));
+        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 [];
     }
@@ -96,18 +98,21 @@ export class MarqueeMouseListener extends DragAwareMouseListener {
     mouseMove(target: SModelElement, event: MouseEvent): Action[] {
         this.currentPoint = { x: getAbsolutePosition(target, event).x, y: getAbsolutePosition(target, event).y };
         if (this.isActive) {
-            const nodeIdsSelected = Array.from(target.root.index.all()
-                .map(e => e as SModelElement & BoundsAware)
-                .filter(e => isSelectable(e))
-                .filter(e => e instanceof SNode)
-                .filter(e => this.isNodeMarked(e)).map(e => e.id));
+            const nodeIdsSelected = Array.from(
+                target.root.index
+                    .all()
+                    .map(e => e as SModelElement & BoundsAware)
+                    .filter(e => isSelectable(e))
+                    .filter(e => e instanceof SNode)
+                    .filter(e => this.isNodeMarked(e))
+                    .map(e => e.id)
+            );
             const edgeIdsSelected = this.getMarkedEdges(target.root);
             const selected = nodeIdsSelected.concat(edgeIdsSelected);
             return [
                 new SelectAction([], Array.from(target.root.index.all().map(e => e.id))),
                 new SelectAction(selected.concat(this.previouslySelected), []),
-                new DrawMarqueeAction(this.startPoint,
-                    { x: getAbsolutePosition(target, event).x, y: getAbsolutePosition(target, event).y })
+                new DrawMarqueeAction(this.startPoint, { x: getAbsolutePosition(target, event).x, y: getAbsolutePosition(target, event).y })
             ];
         }
         return [];
@@ -123,10 +128,17 @@ export class MarqueeMouseListener extends DragAwareMouseListener {
 
     getMarkedEdges(root: SModelElement): string[] {
         const elements = Array.from(document.querySelectorAll('g'));
-        const edges = Array.from(root.index.all().filter(e => e instanceof SEdge).
-            filter(e => isSelectable(e)).map(e => e.id));
-        return elements.filter(e => edges.includes(this.domHelper.findSModelIdByDOMElement(e)))
-            .filter(e => this.isEdgeMarked(e)).map(e => this.domHelper.findSModelIdByDOMElement(e));
+        const edges = Array.from(
+            root.index
+                .all()
+                .filter(e => e instanceof SEdge)
+                .filter(e => isSelectable(e))
+                .map(e => e.id)
+        );
+        return elements
+            .filter(e => edges.includes(this.domHelper.findSModelIdByDOMElement(e)))
+            .filter(e => this.isEdgeMarked(e))
+            .map(e => this.domHelper.findSModelIdByDOMElement(e));
     }
 
     isEdgeMarked(element: SVGElement): boolean {
@@ -170,11 +182,11 @@ export class MarqueeMouseListener extends DragAwareMouseListener {
     }
 
     linesIntersect(p1: Point, p2: Point, p3: Point, p4: Point): boolean {
-        const tCount = ((p1.x - p3.x) * (p3.y - p4.y)) - ((p1.y - p3.y) * (p3.x - p4.x));
-        const tDenom = ((p1.x - p2.x) * (p3.y - p4.y)) - ((p1.y - p2.y) * (p3.x - p4.x));
+        const tCount = (p1.x - p3.x) * (p3.y - p4.y) - (p1.y - p3.y) * (p3.x - p4.x);
+        const tDenom = (p1.x - p2.x) * (p3.y - p4.y) - (p1.y - p2.y) * (p3.x - p4.x);
         const t = tCount / tDenom;
-        const uCount = ((p2.x - p1.x) * (p1.y - p3.y)) - ((p2.y - p1.y) * (p1.x - p3.x));
-        const uDenom = ((p1.x - p2.x) * (p3.y - p4.y)) - ((p1.y - p2.y) * (p3.x - p4.x));
+        const uCount = (p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x);
+        const uDenom = (p1.x - p2.x) * (p3.y - p4.y) - (p1.y - p2.y) * (p3.x - p4.x);
         const u = uCount / uDenom;
         if (t >= 0.0 && t <= 1.0 && u >= 0.0 && u <= 1.0) {
             return true;
@@ -183,20 +195,26 @@ export class MarqueeMouseListener extends DragAwareMouseListener {
     }
 
     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);
+        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;
     }
 
     isNodeMarked(element: SModelElement & BoundsAware): boolean {
-        const horizontallyIn = this.startPoint.x < this.currentPoint.x ?
-            this.isElementBetweenXAxis(element, this.startPoint.x, this.currentPoint.x) :
-            this.isElementBetweenXAxis(element, this.currentPoint.x, this.startPoint.x);
-        const verticallyIn = this.startPoint.y < this.currentPoint.y ?
-            this.isElementBetweenYAxis(element, this.startPoint.y, this.currentPoint.y) :
-            this.isElementBetweenYAxis(element, this.currentPoint.y, this.startPoint.y);
+        const horizontallyIn =
+            this.startPoint.x < this.currentPoint.x
+                ? this.isElementBetweenXAxis(element, this.startPoint.x, this.currentPoint.x)
+                : this.isElementBetweenXAxis(element, this.currentPoint.x, this.startPoint.x);
+        const verticallyIn =
+            this.startPoint.y < this.currentPoint.y
+                ? this.isElementBetweenYAxis(element, this.startPoint.y, this.currentPoint.y)
+                : this.isElementBetweenYAxis(element, this.currentPoint.y, this.startPoint.y);
         if (horizontallyIn && verticallyIn) {
             return true;
         }
@@ -204,8 +222,10 @@ export class MarqueeMouseListener extends DragAwareMouseListener {
     }
 
     isElementBetweenXAxis(element: SModelElement & BoundsAware, marqueeLeft: number, marqueeRight: number): boolean {
-        if (this.isBetween(marqueeLeft, toAbsoluteBounds(element).x, toAbsoluteBounds(element).x + toAbsoluteBounds(element).width)
-            || this.isBetween(marqueeRight, toAbsoluteBounds(element).x, toAbsoluteBounds(element).x + toAbsoluteBounds(element).width)) {
+        if (
+            this.isBetween(marqueeLeft, toAbsoluteBounds(element).x, toAbsoluteBounds(element).x + toAbsoluteBounds(element).width) ||
+            this.isBetween(marqueeRight, toAbsoluteBounds(element).x, toAbsoluteBounds(element).x + toAbsoluteBounds(element).width)
+        ) {
             return true;
         }
         const leftEdge = this.isBetween(toAbsoluteBounds(element).x, marqueeLeft, marqueeRight);
@@ -214,8 +234,10 @@ export class MarqueeMouseListener extends DragAwareMouseListener {
     }
 
     isElementBetweenYAxis(element: SModelElement & BoundsAware, marqueeTop: number, marqueeBottom: number): boolean {
-        if (this.isBetween(marqueeTop, toAbsoluteBounds(element).y, toAbsoluteBounds(element).y + toAbsoluteBounds(element).height)
-            || this.isBetween(marqueeBottom, toAbsoluteBounds(element).y, toAbsoluteBounds(element).y + toAbsoluteBounds(element).height)) {
+        if (
+            this.isBetween(marqueeTop, toAbsoluteBounds(element).y, toAbsoluteBounds(element).y + toAbsoluteBounds(element).height) ||
+            this.isBetween(marqueeBottom, toAbsoluteBounds(element).y, toAbsoluteBounds(element).y + toAbsoluteBounds(element).height)
+        ) {
             return true;
         }
         const topEdge = this.isBetween(toAbsoluteBounds(element).y, marqueeTop, marqueeBottom);
@@ -229,12 +251,10 @@ export class MarqueeMouseListener extends DragAwareMouseListener {
         }
         return false;
     }
-
 }
 
 @injectable()
 export class ShiftKeyListener extends KeyListener {
-
     keyUp(element: SModelElement, event: KeyboardEvent): Action[] {
         if (event.shiftKey) {
             return [];

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

@@ -42,7 +42,6 @@ export class MarqueeTool extends BaseGLSPTool {
 
 @injectable()
 export class MarqueeKeyListener extends KeyListener {
-
     keyDown(element: SModelElement, event: KeyboardEvent): Action[] {
         if (event.shiftKey) {
             return [new EnableToolsAction([MarqueeMouseTool.ID])];

package/src/features/tools/node-creation-tool.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020 EclipseSource and others.
+ * Copyright (c) 2020-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
@@ -28,11 +28,7 @@ import {
 } from 'sprotty';
 
 import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
-import {
-    CreateNodeOperation,
-    isTriggerNodeCreationAction,
-    TriggerNodeCreationAction
-} from '../../base/operations/operation';
+import { CreateNodeOperation, isTriggerNodeCreationAction, TriggerNodeCreationAction } from '../../base/operations/operation';
 import { getAbsolutePosition } from '../../utils/viewpoint-util';
 import { Containable, isContainable } from '../hints/model';
 import { CursorCSS, cursorFeedbackAction } from '../tool-feedback/css-feedback';
@@ -75,7 +71,6 @@ export class NodeCreationTool extends BaseGLSPTool implements IActionHandler {
 
 @injectable()
 export class NodeCreationToolMouseListener extends DragAwareMouseListener {
-
     protected container?: SModelElement & Containable;
 
     constructor(protected triggerAction: TriggerNodeCreationAction, protected tool: NodeCreationTool) {
@@ -114,8 +109,8 @@ export class NodeCreationToolMouseListener extends DragAwareMouseListener {
         if (!this.container || currentContainer !== this.container) {
             this.container = currentContainer;
             const feedback = this.creationAllowed(this.elementTypeId)
-                ? cursorFeedbackAction(CursorCSS.NODE_CREATION) :
-                cursorFeedbackAction(CursorCSS.OPERATION_NOT_ALLOWED);
+                ? cursorFeedbackAction(CursorCSS.NODE_CREATION)
+                : cursorFeedbackAction(CursorCSS.OPERATION_NOT_ALLOWED);
             this.tool.dispatchFeedback([feedback]);
         }
         return [];

package/src/features/tools/view.tsx

@@ -14,26 +14,31 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { injectable } from 'inversify';
-import * as snabbdom from 'snabbdom-jsx';
-import { VNode } from 'snabbdom/vnode';
-import { RectangularNodeView, RenderingContext } from 'sprotty';
+import { VNode } from 'snabbdom';
+import { RectangularNodeView, RenderingContext, svg } from 'sprotty';
 
 import { MarqueeNode } from './model';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: snabbdom.svg };
+const JSX = { createElement: svg };
 
 @injectable()
 export class MarqueeView extends RectangularNodeView {
     render(node: MarqueeNode, context: RenderingContext): VNode {
-        const graph = <g>
-            <rect class-sprotty-node={true} class-marquee={true}
-                x={((node.startPoint.x - node.endPoint.x) <= 0) ? node.startPoint.x : node.endPoint.x}
-                y={((node.startPoint.y - node.endPoint.y) <= 0) ? node.startPoint.y : node.endPoint.y}
-                rx={0} ry={0}
-                width={Math.abs(node.startPoint.x - node.endPoint.x)}
-                height={Math.abs(node.startPoint.y - node.endPoint.y)}></rect>
-        </g>;
+        const graph = (
+            <g>
+                <rect
+                    class-sprotty-node={true}
+                    class-marquee={true}
+                    x={node.startPoint.x - node.endPoint.x <= 0 ? node.startPoint.x : node.endPoint.x}
+                    y={node.startPoint.y - node.endPoint.y <= 0 ? node.startPoint.y : node.endPoint.y}
+                    rx={0}
+                    ry={0}
+                    width={Math.abs(node.startPoint.x - node.endPoint.x)}
+                    height={Math.abs(node.startPoint.y - node.endPoint.y)}
+                ></rect>
+            </g>
+        );
         return graph;
     }
 }

package/src/features/undo-redo/model.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
@@ -17,10 +17,10 @@ import { Operation } from '../../base/operations/operation';
 
 export class UndoOperation implements Operation {
     static readonly KIND = 'glspUndo';
-    constructor(public readonly kind = UndoOperation.KIND) { }
+    constructor(public readonly kind = UndoOperation.KIND) {}
 }
 
 export class RedoOperation implements Operation {
     static readonly KIND = 'glspRedo';
-    constructor(public readonly kind = RedoOperation.KIND) { }
+    constructor(public readonly kind = RedoOperation.KIND) {}
 }