@eclipse-glsp/client 2.1.0-next.300 → 2.1.0-next.302

package/src/features/helper-lines/helper-line-feedback.ts

@@ -0,0 +1,269 @@
+/********************************************************************************
+ * Copyright (c) 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,
+    Bounds,
+    CommandExecutionContext,
+    CommandReturn,
+    GModelElement,
+    GModelRoot,
+    TYPES,
+    Viewport,
+    findParentByFeature,
+    isBoundsAware,
+    isViewport
+} from '@eclipse-glsp/sprotty';
+import { inject, injectable } from 'inversify';
+import { partition } from 'lodash';
+import '../../../css/helper-lines.css';
+import { FeedbackCommand } from '../../base/feedback/feedback-command';
+import {
+    bottom,
+    bottomCenter,
+    bottomLeft,
+    bottomRight,
+    center,
+    isAbove,
+    isBefore,
+    left,
+    middle,
+    middleLeft,
+    middleRight,
+    right,
+    sortBy,
+    top,
+    topCenter,
+    topLeft,
+    topRight
+} from '../../utils/geometry-util';
+import { BoundsAwareModelElement, findTopLevelElementByFeature, forEachElement, getMatchingElements } from '../../utils/gmodel-util';
+import { getViewportBounds } from '../../utils/viewpoint-util';
+import { HelperLine, HelperLineType, SelectionBounds, isHelperLine, isSelectionBounds } from './model';
+
+export type ViewportLineType = typeof HelperLineType.Center | typeof HelperLineType.Middle | string;
+
+export const ALL_ELEMENT_LINE_TYPES = Object.values(HelperLineType);
+export const ALL_VIEWPORT_LINE_TYPES = [HelperLineType.Center, HelperLineType.Middle];
+
+export interface DrawHelperLinesFeedbackAction extends Action {
+    kind: typeof DrawHelperLinesFeedbackAction.KIND;
+    elementIds: string[];
+    elementLines?: HelperLineType[];
+    viewportLines?: ViewportLineType[];
+    alignmentEpsilon?: number;
+}
+
+export namespace DrawHelperLinesFeedbackAction {
+    export const KIND = 'drawHelperLines';
+
+    export function create(options: Omit<DrawHelperLinesFeedbackAction, 'kind'>): DrawHelperLinesFeedbackAction {
+        return {
+            kind: KIND,
+            ...options
+        };
+    }
+}
+
+@injectable()
+export class DrawHelperLinesFeedbackCommand extends FeedbackCommand {
+    static readonly KIND = DrawHelperLinesFeedbackAction.KIND;
+
+    constructor(@inject(TYPES.Action) public action: DrawHelperLinesFeedbackAction) {
+        super();
+    }
+
+    execute(context: CommandExecutionContext): CommandReturn {
+        removeHelperLines(context.root);
+        removeSelectionBounds(context.root);
+        const boundsAwareElements = getMatchingElements(context.root.index, this.isCompareElement);
+        const [referenceElements, elements] = partition(boundsAwareElements, element => this.action.elementIds.includes(element.id));
+        if (referenceElements.length === 0) {
+            return context.root;
+        }
+        const referenceBounds = this.calcReferenceBounds(referenceElements);
+        const helperLines = this.calcHelperLines(elements, referenceBounds, context);
+        if (referenceElements.length > 1) {
+            context.root.add(new SelectionBounds(referenceBounds));
+        }
+        helperLines.forEach(helperLine => context.root.add(helperLine));
+        return context.root;
+    }
+
+    protected isCompareElement(element: GModelElement): element is BoundsAwareModelElement {
+        return isBoundsAware(element) && findTopLevelElementByFeature(element, isBoundsAware, isViewport) === element;
+    }
+
+    protected calcReferenceBounds(referenceElements: BoundsAwareModelElement[]): Bounds {
+        return referenceElements.map(element => element.bounds).reduce((combined, next) => Bounds.combine(combined, next), Bounds.EMPTY);
+    }
+
+    protected calcHelperLines(elements: BoundsAwareModelElement[], bounds: Bounds, context: CommandExecutionContext): HelperLine[] {
+        const helperLines: HelperLine[] = [];
+        const viewport = findParentByFeature(context.root, isViewport);
+        if (viewport) {
+            helperLines.push(...this.calcHelperLinesForViewport(viewport, bounds));
+        }
+        elements.flatMap(element => this.calcHelperLinesForElement(element, bounds)).forEach(line => helperLines.push(line));
+        return helperLines;
+    }
+
+    protected calcHelperLinesForViewport(
+        root: Viewport & GModelRoot,
+        bounds: Bounds,
+        lineTypes: HelperLineType[] = this.action.viewportLines ?? ALL_VIEWPORT_LINE_TYPES
+    ): HelperLine[] {
+        const helperLines: HelperLine[] = [];
+        const viewportBounds = getViewportBounds(root, root.canvasBounds);
+        if (lineTypes.includes(HelperLineType.Center) && this.isAligned(center, viewportBounds, bounds, 2)) {
+            helperLines.push(new HelperLine(topCenter(viewportBounds), bottomCenter(viewportBounds), HelperLineType.Center));
+        }
+        if (lineTypes.includes(HelperLineType.Middle) && this.isAligned(middle, viewportBounds, bounds, 2)) {
+            helperLines.push(new HelperLine(middleLeft(viewportBounds), middleRight(viewportBounds), HelperLineType.Middle));
+        }
+        return helperLines;
+    }
+
+    protected calcHelperLinesForElement(
+        element: BoundsAwareModelElement,
+        bounds: Bounds,
+        lineTypes: HelperLineType[] = this.action.elementLines ?? ALL_ELEMENT_LINE_TYPES
+    ): HelperLine[] {
+        return this.calcHelperLinesForBounds(element.bounds, bounds, lineTypes);
+    }
+
+    protected calcHelperLinesForBounds(
+        elementBounds: Bounds,
+        bounds: Bounds,
+        lineTypes: HelperLineType[] = this.action.elementLines ?? ALL_ELEMENT_LINE_TYPES
+    ): HelperLine[] {
+        const helperLines: HelperLine[] = [];
+
+        if (lineTypes.includes(HelperLineType.Left) && this.isAligned(left, elementBounds, bounds)) {
+            const [above, below] = sortBy(top, elementBounds, bounds); // higher top-value ==> lower
+            helperLines.push(new HelperLine(bottomLeft(below), topLeft(above), HelperLineType.Left));
+        }
+
+        if (lineTypes.includes(HelperLineType.Center) && this.isAligned(center, elementBounds, bounds)) {
+            const [above, below] = sortBy(top, elementBounds, bounds); // higher top-value ==> lower
+            helperLines.push(new HelperLine(topCenter(above), bottomCenter(below), HelperLineType.Center));
+        }
+
+        if (lineTypes.includes(HelperLineType.Right) && this.isAligned(right, elementBounds, bounds)) {
+            const [above, below] = sortBy(top, elementBounds, bounds); // higher top-value ==> lower
+            helperLines.push(new HelperLine(bottomRight(below), topRight(above), HelperLineType.Right));
+        }
+
+        if (lineTypes.includes(HelperLineType.Bottom) && this.isAligned(bottom, elementBounds, bounds)) {
+            const [before, after] = sortBy(left, elementBounds, bounds); // higher left-value ==> more to the right
+            helperLines.push(new HelperLine(bottomLeft(before), bottomRight(after), HelperLineType.Bottom));
+        }
+
+        if (lineTypes.includes(HelperLineType.Middle) && this.isAligned(middle, elementBounds, bounds)) {
+            const [before, after] = sortBy(left, elementBounds, bounds); // higher left-value ==> more to the right
+            helperLines.push(new HelperLine(middleLeft(before), middleRight(after), HelperLineType.Middle));
+        }
+
+        if (lineTypes.includes(HelperLineType.Top) && this.isAligned(top, elementBounds, bounds)) {
+            const [before, after] = sortBy(left, elementBounds, bounds); // higher left-value ==> more to the right
+            helperLines.push(new HelperLine(topLeft(before), topRight(after), HelperLineType.Top));
+        }
+
+        if (lineTypes.includes(HelperLineType.LeftRight) && this.isMatch(left(elementBounds), right(bounds), 2)) {
+            if (isAbove(bounds, elementBounds)) {
+                helperLines.push(new HelperLine(bottomLeft(elementBounds), topRight(bounds), HelperLineType.RightLeft));
+            } else {
+                helperLines.push(new HelperLine(topLeft(elementBounds), bottomRight(bounds), HelperLineType.RightLeft));
+            }
+        }
+
+        if (lineTypes.includes(HelperLineType.LeftRight) && this.isMatch(right(elementBounds), left(bounds), 2)) {
+            if (isAbove(bounds, elementBounds)) {
+                helperLines.push(new HelperLine(bottomRight(elementBounds), topLeft(bounds), HelperLineType.LeftRight));
+            } else {
+                helperLines.push(new HelperLine(topRight(elementBounds), bottomLeft(bounds), HelperLineType.LeftRight));
+            }
+        }
+
+        if (lineTypes.includes(HelperLineType.TopBottom) && this.isMatch(top(elementBounds), bottom(bounds), 2)) {
+            if (isBefore(bounds, elementBounds)) {
+                helperLines.push(new HelperLine(topRight(elementBounds), bottomLeft(bounds), HelperLineType.BottomTop));
+            } else {
+                helperLines.push(new HelperLine(topLeft(elementBounds), bottomRight(bounds), HelperLineType.BottomTop));
+            }
+        }
+
+        if (lineTypes.includes(HelperLineType.TopBottom) && this.isMatch(bottom(elementBounds), top(bounds), 2)) {
+            if (isBefore(bounds, elementBounds)) {
+                helperLines.push(new HelperLine(bottomRight(elementBounds), topLeft(bounds), HelperLineType.TopBottom));
+            } else {
+                helperLines.push(new HelperLine(bottomLeft(elementBounds), topRight(bounds), HelperLineType.TopBottom));
+            }
+        }
+
+        return helperLines;
+    }
+
+    protected isAligned(
+        coordinate: (elem: Bounds) => number,
+        leftBounds: Bounds,
+        rightBounds: Bounds,
+        epsilon = this.action.alignmentEpsilon ?? 1
+    ): boolean {
+        return this.isMatch(coordinate(leftBounds), coordinate(rightBounds), epsilon);
+    }
+
+    protected isMatch(leftCoordinate: number, rightCoordinate: number, epsilon = this.action.alignmentEpsilon ?? 1): boolean {
+        return Math.abs(leftCoordinate - rightCoordinate) < epsilon;
+    }
+}
+
+export interface RemoveHelperLinesFeedbackAction extends Action {
+    kind: typeof RemoveHelperLinesFeedbackAction.KIND;
+}
+
+export namespace RemoveHelperLinesFeedbackAction {
+    export const KIND = 'removeHelperLines';
+
+    export function create(options: Omit<RemoveHelperLinesFeedbackAction, 'kind'> = {}): RemoveHelperLinesFeedbackAction {
+        return {
+            kind: KIND,
+            ...options
+        };
+    }
+}
+
+@injectable()
+export class RemoveHelperLinesFeedbackCommand extends FeedbackCommand {
+    static readonly KIND = RemoveHelperLinesFeedbackAction.KIND;
+
+    constructor(@inject(TYPES.Action) public action: RemoveHelperLinesFeedbackAction) {
+        super();
+    }
+    override execute(context: CommandExecutionContext): CommandReturn {
+        removeHelperLines(context.root);
+        removeSelectionBounds(context.root);
+        return context.root;
+    }
+}
+
+export function removeHelperLines(root: GModelRoot): void {
+    forEachElement(root.index, isHelperLine, line => root.remove(line));
+}
+
+export function removeSelectionBounds(root: GModelRoot): void {
+    forEachElement(root.index, isSelectionBounds, line => root.remove(line));
+}

package/src/features/helper-lines/helper-line-manager-default.ts

@@ -0,0 +1,114 @@
+/********************************************************************************
+ * Copyright (c) 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,
+    DisposableCollection,
+    GModelElement,
+    GModelRoot,
+    IActionHandler,
+    ISnapper,
+    MoveAction,
+    SetBoundsAction,
+    TYPES
+} from '@eclipse-glsp/sprotty';
+import { inject, injectable, optional, postConstruct } from 'inversify';
+import { IFeedbackActionDispatcher } from '../../base/feedback/feedback-action-dispatcher';
+import { ISelectionListener, SelectionService } from '../../base/selection-service';
+import { SetBoundsFeedbackAction } from '../bounds/set-bounds-feedback-command';
+import { GridSnapper } from '../change-bounds/snap';
+import { MoveFinishedEventAction, MoveInitializedEventAction } from '../tools/change-bounds/change-bounds-tool-feedback';
+import { DrawHelperLinesFeedbackAction, RemoveHelperLinesFeedbackAction, ViewportLineType } from './helper-line-feedback';
+import { IHelperLineManager } from './helper-line-manager';
+import { Direction, HelperLineType } from './model';
+
+@injectable()
+export class HelperLineManager implements IActionHandler, ISelectionListener, IHelperLineManager {
+    @inject(TYPES.IFeedbackActionDispatcher) protected feedbackDispatcher: IFeedbackActionDispatcher;
+    @inject(SelectionService) protected selectionService: SelectionService;
+    @optional() @inject(TYPES.ISnapper) protected snapper?: ISnapper;
+
+    protected snapSize = { x: 20, y: 20 };
+    protected feedback: DisposableCollection = new DisposableCollection();
+
+    protected elementLines?: HelperLineType[];
+    protected viewportLines?: ViewportLineType[];
+    protected alignmentEpsilon?: number;
+
+    @postConstruct()
+    protected init(): void {
+        this.selectionService.onSelectionChanged(change =>
+            this.selectionChanged(change.root, change.selectedElements, change.deselectedElements)
+        );
+        if (this.snapper instanceof GridSnapper) {
+            this.snapSize = { x: this.snapper.grid.x * 2, y: this.snapper.grid.y * 2 };
+        }
+    }
+
+    handle(action: Action): void {
+        if (MoveInitializedEventAction.is(action)) {
+            this.handleMoveInitializedAction(action);
+        } else if (MoveAction.is(action)) {
+            this.handleMoveAction(action);
+        } else if (MoveFinishedEventAction.is(action)) {
+            this.handleMoveFinishedAction(action);
+        } else if (SetBoundsAction.is(action) || SetBoundsFeedbackAction.is(action)) {
+            this.handleSetBoundsAction(action);
+        }
+    }
+
+    protected handleMoveInitializedAction(_action: MoveInitializedEventAction): void {
+        this.feedback.dispose();
+        const feedback = this.createHelperLineFeedback(this.selectionService.getSelectedElementIDs());
+        this.feedback.push(this.feedbackDispatcher.registerFeedback(this, [feedback], [RemoveHelperLinesFeedbackAction.create()]));
+    }
+
+    protected handleMoveFinishedAction(_action: MoveFinishedEventAction): void {
+        this.feedback.dispose();
+    }
+
+    protected handleMoveAction(action: MoveAction): void {
+        if (!action.finished) {
+            const elementIds = action.moves.map(move => move.elementId);
+            const feedback = this.createHelperLineFeedback(elementIds);
+            this.feedback.push(this.feedbackDispatcher.registerFeedback(this, [feedback], [RemoveHelperLinesFeedbackAction.create()]));
+        } else {
+            this.feedback.dispose();
+        }
+    }
+
+    protected createHelperLineFeedback(elementIds: string[]): DrawHelperLinesFeedbackAction {
+        return DrawHelperLinesFeedbackAction.create({
+            elementIds,
+            elementLines: this.elementLines,
+            viewportLines: this.viewportLines,
+            alignmentEpsilon: this.alignmentEpsilon
+        });
+    }
+
+    protected handleSetBoundsAction(action: SetBoundsAction | SetBoundsFeedbackAction): void {
+        const elementIds = action.bounds.map(bound => bound.elementId);
+        const feedback = this.createHelperLineFeedback(elementIds);
+        this.feedback.push(this.feedbackDispatcher.registerFeedback(this, [feedback], [RemoveHelperLinesFeedbackAction.create()]));
+    }
+
+    selectionChanged(root: Readonly<GModelRoot>, selectedElements: string[], deselectedElements?: string[] | undefined): void {
+        this.feedback.dispose();
+    }
+
+    getHelperLineSnapping(target: GModelElement, isSnap: boolean, direction: Direction): number {
+        return direction === Direction.Left || direction === Direction.Right ? this.snapSize.x : this.snapSize.y;
+    }
+}

package/src/features/helper-lines/helper-line-manager.ts

@@ -0,0 +1,21 @@
+/********************************************************************************
+ * Copyright (c) 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 { GModelElement } from '@eclipse-glsp/sprotty';
+import { Direction } from './model';
+
+export interface IHelperLineManager {
+    getHelperLineSnapping(target: GModelElement, isSnap: boolean, direction: Direction): number;
+}

package/src/features/helper-lines/helper-line-module.ts

@@ -0,0 +1,47 @@
+/********************************************************************************
+ * Copyright (c) 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,
+    MoveAction,
+    SetBoundsAction,
+    TYPES,
+    bindAsService,
+    configureActionHandler,
+    configureCommand,
+    configureModelElement
+} from '@eclipse-glsp/sprotty';
+import { SetBoundsFeedbackAction } from '../bounds/set-bounds-feedback-command';
+import { MoveFinishedEventAction, MoveInitializedEventAction } from '../tools/change-bounds/change-bounds-tool-feedback';
+import { DrawHelperLinesFeedbackCommand, RemoveHelperLinesFeedbackCommand } from './helper-line-feedback';
+import { HelperLineManager } from './helper-line-manager-default';
+import { HELPER_LINE, HelperLine, SELECTION_BOUNDS, SelectionBounds } from './model';
+import { HelperLineView, SelectionBoundsView } from './view';
+
+export const helperLineModule = new FeatureModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+    configureModelElement(context, HELPER_LINE, HelperLine, HelperLineView);
+    configureModelElement(context, SELECTION_BOUNDS, SelectionBounds, SelectionBoundsView);
+    configureCommand(context, DrawHelperLinesFeedbackCommand);
+    configureCommand(context, RemoveHelperLinesFeedbackCommand);
+
+    bindAsService(bind, TYPES.IHelperLineManager, HelperLineManager);
+    configureActionHandler(context, SetBoundsAction.KIND, TYPES.IHelperLineManager);
+    configureActionHandler(context, SetBoundsFeedbackAction.KIND, TYPES.IHelperLineManager);
+    configureActionHandler(context, MoveAction.KIND, TYPES.IHelperLineManager);
+    configureActionHandler(context, MoveInitializedEventAction.KIND, TYPES.IHelperLineManager);
+    configureActionHandler(context, MoveFinishedEventAction.KIND, TYPES.IHelperLineManager);
+});

package/src/features/helper-lines/index.ts

@@ -0,0 +1,21 @@
+/********************************************************************************
+ * Copyright (c) 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
+ ********************************************************************************/
+export * from './helper-line-feedback';
+export * from './helper-line-manager-default';
+export * from './helper-line-manager';
+export * from './helper-line-module';
+export * from './model';
+export * from './view';

package/src/features/helper-lines/model.ts

@@ -0,0 +1,140 @@
+/********************************************************************************
+ * Copyright (c) 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 { Args, Bounds, GChildElement, GModelElement, GShapeElement, Point } from '@eclipse-glsp/sprotty';
+import { v4 as uuid } from 'uuid';
+import { ArgsAware } from '../../base/args-feature';
+import { ResizeHandleLocation } from '../change-bounds/model';
+
+export const HelperLineType = {
+    Left: 'left',
+    Right: 'right',
+    Center: 'center',
+    Top: 'top',
+    Bottom: 'bottom',
+    Middle: 'middle',
+    LeftRight: 'left-right',
+    RightLeft: 'right-left',
+    BottomTop: 'bottom-top',
+    TopBottom: 'top-bottom'
+} as const;
+
+// allow any string to be set as helper line type to support customization
+export type HelperLineType = (typeof HelperLineType)[keyof typeof HelperLineType] | string;
+
+export const HELPER_LINE = 'helper-line';
+
+export class HelperLine extends GChildElement implements ArgsAware {
+    args?: Args;
+
+    constructor(
+        readonly startPoint = Point.ORIGIN,
+        readonly endPoint = Point.ORIGIN,
+        readonly lineType: HelperLineType = HelperLineType.Left
+    ) {
+        super();
+        this.id = uuid();
+        this.type = HELPER_LINE;
+    }
+
+    get isLeft(): boolean {
+        return this.lineType === HelperLineType.Left || this.lineType === HelperLineType.LeftRight;
+    }
+
+    get isRight(): boolean {
+        return this.lineType === HelperLineType.Right || this.lineType === HelperLineType.RightLeft;
+    }
+
+    get isTop(): boolean {
+        return this.lineType === HelperLineType.Top || this.lineType === HelperLineType.TopBottom;
+    }
+
+    get isBottom(): boolean {
+        return this.lineType === HelperLineType.Bottom || this.lineType === HelperLineType.BottomTop;
+    }
+
+    get isMiddle(): boolean {
+        return this.lineType === HelperLineType.Middle;
+    }
+
+    get isCenter(): boolean {
+        return this.lineType === HelperLineType.Center;
+    }
+}
+
+export function isHelperLine(element: GModelElement): element is HelperLine {
+    return element.type === HELPER_LINE;
+}
+
+export const SELECTION_BOUNDS = 'selection-bounds';
+
+export class SelectionBounds extends GShapeElement implements ArgsAware {
+    args?: Args;
+
+    constructor(bounds?: Bounds) {
+        super();
+        this.id = uuid();
+        this.type = SELECTION_BOUNDS;
+        if (bounds) {
+            this.bounds = bounds;
+        }
+    }
+}
+
+export function isSelectionBounds(element: GModelElement): element is SelectionBounds {
+    return element.type === SELECTION_BOUNDS;
+}
+
+export const Direction = {
+    Left: 'left',
+    Right: 'right',
+    Up: 'up',
+    Down: 'down'
+} as const;
+
+// allow any string to be set as helper line type to support customization
+export type Direction = (typeof Direction)[keyof typeof Direction];
+
+export function getDirectionOf(point: Point): Direction[] {
+    const directions: Direction[] = [];
+    if (point.x < 0) {
+        directions.push(Direction.Left);
+    } else if (point.x > 0) {
+        directions.push(Direction.Right);
+    }
+    if (point.y < 0) {
+        directions.push(Direction.Up);
+    } else if (point.y > 0) {
+        directions.push(Direction.Down);
+    }
+    return directions;
+}
+
+export function getDirectionFrom(resize?: ResizeHandleLocation): Direction[] {
+    if (resize === ResizeHandleLocation.TopLeft) {
+        return [Direction.Up, Direction.Left];
+    }
+    if (resize === ResizeHandleLocation.TopRight) {
+        return [Direction.Up, Direction.Right];
+    }
+    if (resize === ResizeHandleLocation.BottomLeft) {
+        return [Direction.Down, Direction.Left];
+    }
+    if (resize === ResizeHandleLocation.BottomRight) {
+        return [Direction.Down, Direction.Right];
+    }
+    return [];
+}

package/src/features/helper-lines/view.tsx

@@ -0,0 +1,60 @@
+/********************************************************************************
+ * Copyright (c) 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 { IViewArgs, RenderingContext, ShapeView, svg } from '@eclipse-glsp/sprotty';
+import { injectable } from 'inversify';
+import { VNode } from 'snabbdom';
+import { HelperLine, SelectionBounds } from './model';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const JSX = { createElement: svg };
+
+@injectable()
+export class HelperLineView extends ShapeView {
+    override render(model: HelperLine, _context: RenderingContext): VNode | undefined {
+        return (
+            <g>
+                <line
+                    data-alignment={model.lineType}
+                    x1={model.startPoint.x}
+                    y1={model.startPoint.y}
+                    x2={model.endPoint.x}
+                    y2={model.endPoint.y}
+                    class-helper-line={true}
+                />
+            </g>
+        );
+    }
+}
+
+@injectable()
+export class SelectionBoundsView extends ShapeView {
+    override render(model: SelectionBounds, context: RenderingContext, args?: IViewArgs | undefined): VNode | undefined {
+        if (!this.isVisible(model, context)) {
+            return undefined;
+        }
+        return (
+            <g>
+                <rect
+                    class-selection-bounds={true}
+                    x={0}
+                    y={0}
+                    width={Math.max(model.size.width, 0)}
+                    height={Math.max(model.size.height, 0)}
+                />
+            </g>
+        );
+    }
+}