@eclipse-glsp/client 0.9.0-next.fd1a8bb6 → 0.10.0-next.5dad48d.159

package/src/features/tools/change-bounds-tool.ts

@@ -13,10 +13,18 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { inject, injectable, optional } from 'inversify';
 import {
     Action,
     Bounds,
+    ChangeBoundsOperation,
+    ChangeRoutingPointsOperation,
+    CompoundOperation,
+    ElementAndRoutingPoints,
+    Operation,
+    Point
+} from '@eclipse-glsp/protocol';
+import { inject, injectable, optional } from 'inversify';
+import {
     BoundsAware,
     Dimension,
     EdgeRouterRegistry,
@@ -26,7 +34,7 @@ import {
     isSelected,
     isViewport,
     MouseListener,
-    Point,
+    SChildElement,
     SConnectableElement,
     SetBoundsAction,
     SModelElement,
@@ -34,15 +42,7 @@ import {
     SParentElement,
     TYPES
 } from 'sprotty';
-
 import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
-import {
-    ChangeBoundsOperation,
-    ChangeRoutingPointsOperation,
-    CompoundOperation,
-    ElementAndRoutingPoints,
-    Operation
-} from '../../base/operations/operation';
 import { GLSP_TYPES } from '../../base/types';
 import { isValidMove, isValidSize, WriteablePoint } from '../../utils/layout-utils';
 import {
@@ -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 {
@@ -163,7 +163,7 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
             // rely on the FeedbackMoveMouseListener to update the element bounds of selected elements
             // consider resize handles ourselves
             const actions: Action[] = [
-                cursorFeedbackAction(CursorCSS.RESIZE),
+                cursorFeedbackAction(this.activeResizeHandle.isNwSeResize() ? CursorCSS.RESIZE_NWSE : CursorCSS.RESIZE_NESW),
                 applyCssClasses(this.activeResizeHandle, ChangeBoundsListener.CSS_CLASS_ACTIVE)
             ];
             const positionUpdate = this.updatePosition(target, event);
@@ -208,15 +208,33 @@ 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[] = [];
@@ -310,14 +328,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;

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

@@ -13,9 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, DeleteElementOperation } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import {
-    Action,
     EnableDefaultToolsAction,
     findParentByFeature,
     isCtrlOrCmd,
@@ -27,8 +27,6 @@ import {
     SModelElement
 } from 'sprotty';
 import { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
-
-import { DeleteElementOperation } from '../../base/operations/operation';
 import { GLSPTool } from '../../base/tool-manager/glsp-tool-manager';
 import { GLSP_TYPES } from '../../base/types';
 import { IMouseTool } from '../mouse-tool/mouse-tool';

package/src/features/tools/di.config.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,10 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { TriggerEdgeCreationAction, TriggerNodeCreationAction } from '@eclipse-glsp/protocol';
 import { ContainerModule, interfaces } from 'inversify';
 import { configureActionHandler, configureModelElement } from 'sprotty';
-
-import { TriggerEdgeCreationAction, TriggerNodeCreationAction } from '../../base/operations/operation';
 import { GLSP_TYPES } from '../../base/types';
 import { MARQUEE } from '../tool-feedback/marquee-tool-feedback';
 import { ChangeBoundsTool } from './change-bounds-tool';

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

@@ -13,9 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, CreateEdgeOperation, isTriggerElementTypeCreationAction, TriggerEdgeCreationAction } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import {
-    Action,
     AnchorComputerRegistry,
     EnableDefaultToolsAction,
     EnableToolsAction,
@@ -26,9 +26,7 @@ import {
     SEdge,
     SModelElement
 } from 'sprotty';
-
 import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
-import { CreateEdgeOperation, isTriggerElementTypeCreationAction, TriggerEdgeCreationAction } from '../../base/operations/operation';
 import {
     DrawFeedbackEdgeAction,
     FeedbackEdgeEndMovingMouseListener,

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

@@ -13,9 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, ChangeRoutingPointsOperation, ReconnectEdgeOperation } from '@eclipse-glsp/protocol';
 import { inject, injectable, optional } from 'inversify';
 import {
-    Action,
     AnchorComputerRegistry,
     canEditRouting,
     Connectable,
@@ -28,9 +28,7 @@ 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';
@@ -233,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 }]));

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;
+    }
+}