@eclipse-glsp/client 0.9.0-next.c5944e10

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

@@ -0,0 +1,244 @@
+/********************************************************************************
+ * Copyright (c) 2019 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { inject, injectable } from 'inversify';
+import { VNode } from 'snabbdom';
+import {
+    Action,
+    CommandExecutionContext,
+    CommandReturn,
+    ElementMove,
+    findParentByFeature,
+    isMoveable,
+    isSelectable,
+    isViewport,
+    MouseListener,
+    MoveAction,
+    Point,
+    SModelElement,
+    SModelRoot,
+    TYPES
+} from 'sprotty';
+
+import { isNotUndefined } from '../../utils/smodel-util';
+import { addResizeHandles, isResizable, removeResizeHandles, SResizeHandle } from '../change-bounds/model';
+import { createMovementRestrictionFeedback, removeMovementRestrictionFeedback } from '../change-bounds/movement-restrictor';
+import { ChangeBoundsTool } from '../tools/change-bounds-tool';
+import { FeedbackCommand } from './model';
+
+export class ShowChangeBoundsToolResizeFeedbackAction implements Action {
+    constructor(readonly elementId?: string, public readonly kind: string = ShowChangeBoundsToolResizeFeedbackCommand.KIND) { }
+}
+
+export class HideChangeBoundsToolResizeFeedbackAction implements Action {
+    constructor(public readonly kind: string = HideChangeBoundsToolResizeFeedbackCommand.KIND) { }
+}
+
+@injectable()
+export class ShowChangeBoundsToolResizeFeedbackCommand extends FeedbackCommand {
+    static readonly KIND = 'showChangeBoundsToolResizeFeedback';
+
+    @inject(TYPES.Action) protected action: ShowChangeBoundsToolResizeFeedbackAction;
+
+    execute(context: CommandExecutionContext): CommandReturn {
+        const index = context.root.index;
+        index
+            .all()
+            .filter(isResizable)
+            .forEach(removeResizeHandles);
+
+        if (isNotUndefined(this.action.elementId)) {
+            const resizeElement = index.getById(this.action.elementId);
+            if (isNotUndefined(resizeElement) && isResizable(resizeElement)) {
+                addResizeHandles(resizeElement);
+            }
+        }
+        return context.root;
+    }
+}
+
+@injectable()
+export class HideChangeBoundsToolResizeFeedbackCommand extends FeedbackCommand {
+    static readonly KIND = 'hideChangeBoundsToolResizeFeedback';
+
+    @inject(TYPES.Action) protected action: HideChangeBoundsToolResizeFeedbackAction;
+
+    execute(context: CommandExecutionContext): CommandReturn {
+        const index = context.root.index;
+        index
+            .all()
+            .filter(isResizable)
+            .forEach(removeResizeHandles);
+        return context.root;
+    }
+}
+
+/**
+ * This mouse listener provides visual feedback for moving by sending client-side
+ * `MoveAction`s while elements are selected and dragged. This will also update
+ * their bounds, which is important, as it is not only required for rendering
+ * the visual feedback but also the basis for sending the change to the server
+ * (see also `tools/MoveTool`).
+ */
+export class FeedbackMoveMouseListener extends MouseListener {
+    protected hasDragged = false;
+    protected startDragPosition: Point | undefined;
+    protected elementId2startPos = new Map<string, Point>();
+
+    constructor(protected tool: ChangeBoundsTool) {
+        super();
+    }
+
+    mouseDown(target: SModelElement, event: MouseEvent): Action[] {
+        if (event.button === 0 && !(target instanceof SResizeHandle)) {
+            const moveable = findParentByFeature(target, isMoveable);
+            if (moveable !== undefined) {
+                this.startDragPosition = { x: event.pageX, y: event.pageY };
+            } else {
+                this.startDragPosition = undefined;
+            }
+            this.hasDragged = false;
+        }
+        return [];
+    }
+
+    mouseMove(target: SModelElement, event: MouseEvent): Action[] {
+        const result: Action[] = [];
+        if (event.buttons === 0) {
+            this.mouseUp(target, event);
+        } else if (this.startDragPosition) {
+            if (this.elementId2startPos.size === 0) {
+                this.collectStartPositions(target.root);
+            }
+            this.hasDragged = true;
+            const moveAction = this.getElementMoves(target, event, false);
+            if (moveAction) {
+                result.push(moveAction);
+            }
+        }
+        return result;
+    }
+
+    protected collectStartPositions(root: SModelRoot): void {
+        root.index
+            .all()
+            .filter(element => isSelectable(element) && element.selected)
+            .forEach(element => {
+                if (isMoveable(element)) {
+                    this.elementId2startPos.set(element.id, element.position);
+                }
+            });
+    }
+
+    protected getElementMoves(target: SModelElement, event: MouseEvent, isFinished: boolean): MoveAction | undefined {
+        if (!this.startDragPosition) {
+            return undefined;
+        }
+        const elementMoves: ElementMove[] = [];
+        const viewport = findParentByFeature(target, isViewport);
+        const zoom = viewport ? viewport.zoom : 1;
+        const delta = {
+            x: (event.pageX - this.startDragPosition.x) / zoom,
+            y: (event.pageY - this.startDragPosition.y) / zoom
+        };
+        this.elementId2startPos.forEach((startPosition, elementId) => {
+            const element = target.root.index.getById(elementId);
+            if (element) {
+                let toPosition = this.snap(
+                    {
+                        x: startPosition.x + delta.x,
+                        y: startPosition.y + delta.y
+                    },
+                    element,
+                    !event.shiftKey
+                );
+
+                if (isMoveable(element)) {
+                    toPosition = this.validateMove(startPosition, toPosition, element, isFinished);
+                    elementMoves.push({
+                        elementId: element.id,
+                        fromPosition: {
+                            x: element.position.x,
+                            y: element.position.y
+                        },
+                        toPosition
+                    });
+                }
+            }
+        });
+        if (elementMoves.length > 0) {
+            return new MoveAction(elementMoves, false, isFinished);
+        } else {
+            return undefined;
+        }
+    }
+
+    protected validateMove(startPostion: Point, toPosition: Point, element: SModelElement, isFinished: boolean): Point {
+        let newPosition = toPosition;
+        if (this.tool.movementRestrictor) {
+            const valid = this.tool.movementRestrictor.validate(toPosition, element);
+            let action;
+            if (!valid) {
+                action = createMovementRestrictionFeedback(element, this.tool.movementRestrictor);
+
+                if (isFinished) {
+                    newPosition = startPostion;
+                }
+            } else {
+                action = removeMovementRestrictionFeedback(element, this.tool.movementRestrictor);
+            }
+
+            this.tool.dispatchFeedback([action], this);
+        }
+        return newPosition;
+    }
+
+    protected snap(position: Point, element: SModelElement, isSnap: boolean): Point {
+        if (isSnap && this.tool.snapper) {
+            return this.tool.snapper.snap(position, element);
+        } else {
+            return position;
+        }
+    }
+
+    mouseEnter(target: SModelElement, event: MouseEvent): Action[] {
+        if (target instanceof SModelRoot && event.buttons === 0 && !this.startDragPosition) {
+            this.mouseUp(target, event);
+        }
+        return [];
+    }
+
+    mouseUp(target: SModelElement, event: MouseEvent): Action[] {
+        const result: Action[] = [];
+        if (this.startDragPosition) {
+            const moveAction = this.getElementMoves(target, event, true);
+            if (moveAction) {
+                result.push(moveAction);
+            }
+            if (this.tool.movementRestrictor) {
+                this.tool.deregisterFeedback([removeMovementRestrictionFeedback(target, this.tool.movementRestrictor)], this);
+            }
+
+        }
+        this.hasDragged = false;
+        this.startDragPosition = undefined;
+        this.elementId2startPos.clear();
+        return result;
+    }
+
+    decorate(vnode: VNode, _element: SModelElement): VNode {
+        return vnode;
+    }
+}

package/src/features/tool-feedback/creation-tool-feedback.ts

@@ -0,0 +1,190 @@
+/********************************************************************************
+ * 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
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { inject, injectable } from 'inversify';
+import {
+    Action,
+    add,
+    AnchorComputerRegistry,
+    center,
+    CommandExecutionContext,
+    CommandReturn,
+    euclideanDistance,
+    findChildrenAtPosition,
+    findParentByFeature,
+    isBoundsAware,
+    isConnectable,
+    MouseListener,
+    MoveAction,
+    Point,
+    PolylineEdgeRouter,
+    SChildElement,
+    SConnectableElement,
+    SDanglingAnchor,
+    SEdgeSchema,
+    SModelElement,
+    SModelRoot,
+    SRoutableElement,
+    TYPES
+} from 'sprotty';
+
+import { isRoutable } from '../../utils/smodel-util';
+import { getAbsolutePosition, toAbsoluteBounds, toAbsolutePosition } from '../../utils/viewpoint-util';
+import { FeedbackCommand } from './model';
+
+export class DrawFeedbackEdgeAction implements Action {
+    constructor(
+        public readonly elementTypeId: string,
+        public readonly sourceId: string,
+        public readonly edgeSchema?: SEdgeSchema,
+        public readonly kind: string = DrawFeedbackEdgeCommand.KIND) { }
+}
+
+@injectable()
+export class DrawFeedbackEdgeCommand extends FeedbackCommand {
+    static readonly KIND = 'drawFeedbackEdge';
+
+    constructor(@inject(TYPES.Action) protected action: DrawFeedbackEdgeAction) {
+        super();
+    }
+
+    execute(context: CommandExecutionContext): CommandReturn {
+        const feedbackEdgeSchema = this.action.edgeSchema ? this.action.edgeSchema : defaultFeedbackEdgeSchema;
+        drawFeedbackEdge(context, this.action.sourceId, this.action.elementTypeId, feedbackEdgeSchema);
+        return context.root;
+    }
+}
+
+export class RemoveFeedbackEdgeAction implements Action {
+    constructor(public readonly kind: string = RemoveFeedbackEdgeCommand.KIND) { }
+}
+
+@injectable()
+export class RemoveFeedbackEdgeCommand extends FeedbackCommand {
+    static readonly KIND = 'removeFeedbackEdgeCommand';
+
+    execute(context: CommandExecutionContext): CommandReturn {
+        removeFeedbackEdge(context.root);
+        return context.root;
+    }
+}
+
+export class FeedbackEdgeEnd extends SDanglingAnchor {
+    static readonly TYPE = 'feedback-edge-end';
+    constructor(readonly sourceId: string,
+        readonly elementTypeId: string,
+        public feedbackEdge: SRoutableElement | undefined = undefined,
+        public readonly type: string = FeedbackEdgeEnd.TYPE) {
+        super();
+    }
+}
+
+export class FeedbackEdgeEndMovingMouseListener extends MouseListener {
+    constructor(protected anchorRegistry: AnchorComputerRegistry) {
+        super();
+    }
+
+    mouseMove(target: SModelElement, event: MouseEvent): Action[] {
+        const root = target.root;
+        const edgeEnd = root.index.getById(feedbackEdgeEndId(root));
+        if (!(edgeEnd instanceof FeedbackEdgeEnd) || !edgeEnd.feedbackEdge) {
+            return [];
+        }
+
+        const edge = edgeEnd.feedbackEdge;
+        const position = getAbsolutePosition(edgeEnd, event);
+        const endAtMousePosition = findChildrenAtPosition(target.root, position)
+            .find(element => isConnectable(element) && element.canConnect(edge, 'target'));
+
+        if (endAtMousePosition instanceof SConnectableElement && edge.source && isBoundsAware(edge.source)) {
+            const anchor = this.computeAbsoluteAnchor(endAtMousePosition, center(edge.source.bounds));
+            if (euclideanDistance(anchor, edgeEnd.position) > 1) {
+                return [new MoveAction([{ elementId: edgeEnd.id, toPosition: anchor }], false)];
+            }
+        } else {
+            return [new MoveAction([{ elementId: edgeEnd.id, toPosition: position }], false)];
+        }
+
+        return [];
+    }
+
+    protected computeAbsoluteAnchor(element: SConnectableElement, referencePoint: Point, offset?: number): Point {
+        const anchorComputer = this.anchorRegistry.get(PolylineEdgeRouter.KIND, element.anchorKind);
+        let anchor = anchorComputer.getAnchor(element, referencePoint, offset);
+        // The anchor is computed in the local coordinate system of the element.
+        // If the element is a nested child element we have to add the absolute position of its parent to the anchor.
+        if (element.parent !== element.root) {
+            const parent = findParentByFeature(element.parent, isBoundsAware);
+            if (parent) {
+                const absoluteParentPosition = toAbsoluteBounds(parent);
+                anchor = add(absoluteParentPosition, anchor);
+            }
+        }
+        return anchor;
+    }
+}
+
+export function feedbackEdgeId(root: SModelRoot): string {
+    return root.id + '_feedback_edge';
+}
+
+export function feedbackEdgeEndId(root: SModelRoot): string {
+    return root.id + '_feedback_anchor';
+}
+
+export const defaultFeedbackEdgeSchema: SEdgeSchema = {
+    cssClasses: ['feedback-edge'],
+    opacity: 0.3
+} as SEdgeSchema;
+
+export function drawFeedbackEdge(context: CommandExecutionContext, sourceId: string, elementTypeId: string, feedbackEdgeSchema: SEdgeSchema): void {
+    const root = context.root;
+    const sourceChild = root.index.getById(sourceId);
+    if (!sourceChild) {
+        return;
+    }
+
+    const source = findParentByFeature(sourceChild, isConnectable);
+    if (!source || !isBoundsAware(source)) {
+        return;
+    }
+
+    const edgeEnd = new FeedbackEdgeEnd(source.id, elementTypeId);
+    edgeEnd.id = feedbackEdgeEndId(root);
+    edgeEnd.position = toAbsolutePosition(source);
+
+    feedbackEdgeSchema.id = feedbackEdgeId(root);
+    feedbackEdgeSchema.type = elementTypeId;
+    feedbackEdgeSchema.sourceId = source.id;
+    feedbackEdgeSchema.targetId = edgeEnd.id;
+
+    const feedbackEdge = context.modelFactory.createElement(feedbackEdgeSchema);
+    if (isRoutable(feedbackEdge)) {
+        edgeEnd.feedbackEdge = feedbackEdge;
+        root.add(edgeEnd);
+        root.add(feedbackEdge);
+    }
+}
+
+export function removeFeedbackEdge(root: SModelRoot): void {
+    const feedbackEdge = root.index.getById(feedbackEdgeId(root));
+    const feedbackEdgeEnd = root.index.getById(feedbackEdgeEndId(root));
+    if (feedbackEdge instanceof SChildElement) {
+        root.remove(feedbackEdge);
+    }
+    if (feedbackEdgeEnd instanceof SChildElement) {
+        root.remove(feedbackEdgeEnd);
+    }
+}

package/src/features/tool-feedback/css-feedback.ts

@@ -0,0 +1,98 @@
+/********************************************************************************
+ * Copyright (c) 2019 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { inject, injectable } from 'inversify';
+import { Action, CommandExecutionContext, SModelElement, SModelRoot, TYPES } from 'sprotty';
+
+import { isStringArray } from '../../utils/array-utils';
+import { addCssClasses, removeCssClasses } from '../../utils/smodel-util';
+import { FeedbackCommand } from './model';
+
+export class ModifyCSSFeedbackAction implements Action {
+    readonly elementIds?: string[];
+
+    constructor(
+        public readonly input?: string[] | SModelElement[],
+        public readonly addClasses?: string[],
+        public readonly removeClasses?: string[],
+        public kind = ModifyCssFeedbackCommand.KIND) {
+        if (input) {
+            this.elementIds = isStringArray(input) ? input : input.map(element => element.id);
+        }
+    }
+}
+
+@injectable()
+export class ModifyCssFeedbackCommand extends FeedbackCommand {
+    static readonly KIND = 'modifyCSSFeedback';
+
+    constructor(@inject(TYPES.Action) readonly action: ModifyCSSFeedbackAction) {
+        super();
+    }
+
+    execute(context: CommandExecutionContext): SModelRoot {
+        const elements: SModelElement[] = [];
+        if (this.action.elementIds) {
+            elements.push(...this.action.elementIds.map(elementId => context.root.index.getById(elementId)).filter(exists));
+        } else {
+            elements.push(context.root);
+        }
+
+        elements.forEach(e => {
+            if (this.action.removeClasses) {
+                removeCssClasses(e, this.action.removeClasses);
+            }
+
+            if (this.action.addClasses) {
+                addCssClasses(e, this.action.addClasses);
+            }
+        });
+
+        return context.root;
+    }
+}
+
+function exists(elt?: SModelElement): elt is SModelElement {
+    return elt !== undefined;
+}
+
+export enum CursorCSS {
+    DEFAULT = 'default-mode',
+    OVERLAP_FORBIDDEN = 'overlap-forbidden-mode',
+    NODE_CREATION = 'node-creation-mode',
+    EDGE_CREATION_SOURCE = 'edge-creation-select-source-mode',
+    EDGE_CREATION_TARGET = 'edge-creation-select-target-mode',
+    EDGE_RECONNECT = 'edge-reconnect-select-target-mode',
+    OPERATION_NOT_ALLOWED = 'edge-modification-not-allowed-mode',
+    ELEMENT_DELETION = 'element-deletion-mode',
+    RESIZE = 'resize-mode',
+    MARQUEE = 'marquee-mode'
+}
+
+export function cursorFeedbackAction(cursorCss?: CursorCSS): ModifyCSSFeedbackAction {
+    const addCss = [];
+    if (cursorCss) {
+        addCss.push(cursorCss);
+    }
+    return new ModifyCSSFeedbackAction(undefined, addCss, Object.values(CursorCSS));
+}
+
+export function applyCssClasses(element: SModelElement, ...classes: string[]): ModifyCSSFeedbackAction {
+    return new ModifyCSSFeedbackAction([element], classes, []);
+}
+
+export function deleteCssClasses(element: SModelElement, ...classes: string[]): ModifyCSSFeedbackAction {
+    return new ModifyCSSFeedbackAction([element], [], classes);
+}

package/src/features/tool-feedback/di.config.ts

@@ -0,0 +1,69 @@
+/********************************************************************************
+ * Copyright (c) 2019 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 { ContainerModule } from 'inversify';
+import { configureCommand, configureView, LocationPostprocessor, MoveCommand, TYPES } from 'sprotty';
+
+import { GLSP_TYPES } from '../../base/types';
+import { SResizeHandle } from '../change-bounds/model';
+import {
+    HideChangeBoundsToolResizeFeedbackCommand,
+    ShowChangeBoundsToolResizeFeedbackCommand
+} from './change-bounds-tool-feedback';
+import { DrawFeedbackEdgeCommand, FeedbackEdgeEnd, RemoveFeedbackEdgeCommand } from './creation-tool-feedback';
+import { ModifyCssFeedbackCommand } from './css-feedback';
+import {
+    DrawFeedbackEdgeSourceCommand,
+    HideEdgeReconnectHandlesFeedbackCommand,
+    ShowEdgeReconnectHandlesFeedbackCommand,
+    SwitchRoutingModeCommand
+} from './edge-edit-tool-feedback';
+import { FeedbackActionDispatcher } from './feedback-action-dispatcher';
+import { DrawMarqueeCommand, RemoveMarqueeCommand } from './marquee-tool-feedback';
+import { FeedbackEdgeEndView, SResizeHandleView } from './view';
+
+const toolFeedbackModule = new ContainerModule((bind, _unbind, isBound) => {
+    bind(GLSP_TYPES.IFeedbackActionDispatcher).to(FeedbackActionDispatcher).inSingletonScope();
+
+    configureCommand({ bind, isBound }, ModifyCssFeedbackCommand);
+
+    // create node and edge tool feedback
+    configureCommand({ bind, isBound }, DrawFeedbackEdgeCommand);
+    configureCommand({ bind, isBound }, RemoveFeedbackEdgeCommand);
+
+    configureCommand({ bind, isBound }, DrawMarqueeCommand);
+    configureCommand({ bind, isBound }, RemoveMarqueeCommand);
+
+    configureView({ bind, isBound }, FeedbackEdgeEnd.TYPE, FeedbackEdgeEndView);
+    // move tool feedback: we use sprotties MoveCommand as client-side visual feedback
+    configureCommand({ bind, isBound }, MoveCommand);
+
+    // resize tool feedback
+    configureCommand({ bind, isBound }, ShowChangeBoundsToolResizeFeedbackCommand);
+    configureCommand({ bind, isBound }, HideChangeBoundsToolResizeFeedbackCommand);
+    configureView({ bind, isBound }, SResizeHandle.TYPE, SResizeHandleView);
+
+    // reconnect edge tool feedback
+    configureCommand({ bind, isBound }, ShowEdgeReconnectHandlesFeedbackCommand);
+    configureCommand({ bind, isBound }, HideEdgeReconnectHandlesFeedbackCommand);
+    configureCommand({ bind, isBound }, DrawFeedbackEdgeSourceCommand);
+
+    configureCommand({ bind, isBound }, SwitchRoutingModeCommand);
+
+    bind(TYPES.IVNodePostprocessor).to(LocationPostprocessor);
+    bind(TYPES.HiddenVNodePostprocessor).to(LocationPostprocessor);
+});
+
+export default toolFeedbackModule;