@eclipse-glsp/client 0.9.0-next.da0ffb79 → 0.9.0-next.e0116720

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

@@ -13,21 +13,35 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Action, Point, SelectAction } from '@eclipse-glsp/protocol';
-import { inject, injectable } from 'inversify';
-import { BoundsAware, EnableDefaultToolsAction, isSelectable, isSelected, KeyListener, SEdge, SModelElement, SNode, TYPES } from 'sprotty';
+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 { DrawMarqueeAction, RemoveMarqueeAction } from '../tool-feedback/marquee-tool-feedback';
-import { BaseGLSPTool } from '../tools/base-glsp-tool';
+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();
@@ -37,7 +51,7 @@ export class MarqueeMouseTool extends BaseGLSPTool {
     }
 
     enable(): void {
-        this.marqueeMouseListener = new MarqueeMouseListener(this.domHelper);
+        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)]);
@@ -50,26 +64,38 @@ export class MarqueeMouseTool extends BaseGLSPTool {
     }
 }
 
-@injectable()
 export class MarqueeMouseListener extends DragAwareMouseListener {
-    protected startPoint: Point;
-
-    protected currentPoint: Point;
-
     protected domHelper: DOMHelper;
-
+    protected marqueeUtil: MarqueeUtil;
+    protected nodes: (SModelElement & BoundsAware)[];
+    protected edges: SVGGElement[];
     protected previouslySelected: string[];
-
     protected isActive = false;
 
-    constructor(domHelper: DOMHelper) {
+    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.startPoint = { x: getAbsolutePosition(target, event).x, y: getAbsolutePosition(target, event).y };
+        this.marqueeUtil.updateStartPoint(getAbsolutePosition(target, event));
         if (event.ctrlKey) {
             this.previouslySelected = Array.from(
                 target.root.index
@@ -83,23 +109,15 @@ export class MarqueeMouseListener extends DragAwareMouseListener {
     }
 
     mouseMove(target: SModelElement, event: MouseEvent): Action[] {
-        this.currentPoint = { x: getAbsolutePosition(target, event).x, y: getAbsolutePosition(target, event).y };
+        this.marqueeUtil.updateCurrentPoint(getAbsolutePosition(target, event));
         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 edgeIdsSelected = this.getMarkedEdges(target.root);
+            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), []),
-                new DrawMarqueeAction(this.startPoint, { x: getAbsolutePosition(target, event).x, y: getAbsolutePosition(target, event).y })
+                this.marqueeUtil.drawMarqueeAction()
             ];
         }
         return [];
@@ -113,131 +131,15 @@ export class MarqueeMouseListener extends DragAwareMouseListener {
         return [new RemoveMarqueeAction(), new EnableDefaultToolsAction()];
     }
 
-    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));
-    }
-
     isEdgeMarked(element: SVGElement): boolean {
         if (!element.getAttribute('transform')) {
             if (element.children[0]) {
                 const path = element.children[0].getAttribute('d');
-                if (path) {
-                    const points = path.split(/M|L/);
-                    for (let i = 0; i < points.length - 1; i++) {
-                        const coord1 = points[i].split(',');
-                        const coord2 = points[i + 1].split(',');
-                        const point1 = { x: parseInt(coord1[0], 10), y: parseInt(coord1[1], 10) };
-                        const point2 = { x: parseInt(coord2[0], 10), y: parseInt(coord2[1], 10) };
-                        if (this.isLineMarked(point1, point2)) {
-                            return true;
-                        }
-                    }
-                }
+                return this.marqueeUtil.isEdgePathMarked(path);
             }
         }
         return false;
     }
-
-    isLineMarked(point1: Point, point2: Point): boolean {
-        if (this.pointInRect(point1) || this.pointInRect(point2)) {
-            return true;
-        }
-        if (this.linesIntersect(point1, point2, this.startPoint, { x: this.startPoint.x, y: this.currentPoint.y })) {
-            return true;
-        }
-        if (this.linesIntersect(point1, point2, this.startPoint, { x: this.currentPoint.x, y: this.startPoint.y })) {
-            return true;
-        }
-        if (this.linesIntersect(point1, point2, { x: this.currentPoint.x, y: this.startPoint.y }, this.currentPoint)) {
-            return true;
-        }
-        if (this.linesIntersect(point1, point2, { x: this.startPoint.x, y: this.currentPoint.y }, this.currentPoint)) {
-            return true;
-        }
-        return false;
-    }
-
-    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 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 u = uCount / uDenom;
-        if (t >= 0.0 && t <= 1.0 && u >= 0.0 && u <= 1.0) {
-            return true;
-        }
-        return false;
-    }
-
-    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;
-    }
-
-    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);
-        if (horizontallyIn && verticallyIn) {
-            return true;
-        }
-        return false;
-    }
-
-    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)
-        ) {
-            return true;
-        }
-        const leftEdge = this.isBetween(toAbsoluteBounds(element).x, marqueeLeft, marqueeRight);
-        const rightEdge = this.isBetween(toAbsoluteBounds(element).x + toAbsoluteBounds(element).width, marqueeLeft, marqueeRight);
-        return leftEdge || rightEdge;
-    }
-
-    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)
-        ) {
-            return true;
-        }
-        const topEdge = this.isBetween(toAbsoluteBounds(element).y, marqueeTop, marqueeBottom);
-        const bottomEdge = this.isBetween(toAbsoluteBounds(element).y + toAbsoluteBounds(element).height, marqueeTop, marqueeBottom);
-        return topEdge || bottomEdge;
-    }
-
-    isBetween(x: number, lower: number, upper: number): boolean {
-        if (lower <= x && x <= upper) {
-            return true;
-        }
-        return false;
-    }
 }
 
 @injectable()

package/src/index.ts

@@ -88,6 +88,7 @@ export * from './features/tools/delete-tool';
 export * from './features/tools/edge-creation-tool';
 export * from './features/tools/edge-edit-tool';
 export * from './features/tools/node-creation-tool';
+export * from './features/tools/marquee-behavior';
 export * from './features/validation/issue-marker';
 export * from './features/validation/marker-navigator';
 export * from './features/validation/validate';