@eclipse-glsp/client 1.1.0-next.fe0b297.182 → 2.0.0

package/src/features/tools/edge-creation/dangling-edge-feedback.ts

@@ -0,0 +1,185 @@
+/********************************************************************************
+ * Copyright (c) 2019-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 { inject, injectable } from 'inversify';
+import {
+    Action,
+    BindingContext,
+    CommandExecutionContext,
+    CommandReturn,
+    GChildElement,
+    GModelRoot,
+    GRoutableElement,
+    TYPES,
+    configureCommand,
+    configureView,
+    findParentByFeature,
+    isBoundsAware,
+    isConnectable,
+    GDanglingAnchor,
+    GEdgeSchema
+} from '@eclipse-glsp/sprotty';
+import { FeedbackCommand } from '../../../base/feedback/feedback-command';
+import { isRoutable } from '../../../utils/gmodel-util';
+import { toAbsolutePosition } from '../../../utils/viewpoint-util';
+import { FeedbackEdgeEndView } from './view';
+
+export interface DrawFeedbackEdgeAction extends Action {
+    kind: typeof DrawFeedbackEdgeAction.KIND;
+    elementTypeId: string;
+    sourceId: string;
+    edgeSchema?: Partial<GEdgeSchema>;
+}
+
+export namespace DrawFeedbackEdgeAction {
+    export const KIND = 'drawFeedbackEdge';
+
+    export function is(object: any): object is DrawFeedbackEdgeAction {
+        return Action.hasKind(object, KIND);
+    }
+
+    export function create(options: {
+        elementTypeId: string;
+        sourceId: string;
+        edgeSchema?: Partial<GEdgeSchema>;
+    }): DrawFeedbackEdgeAction {
+        return {
+            kind: KIND,
+            ...options
+        };
+    }
+}
+
+@injectable()
+export class DrawFeedbackEdgeCommand extends FeedbackCommand {
+    static readonly KIND = DrawFeedbackEdgeAction.KIND;
+
+    constructor(@inject(TYPES.Action) protected action: DrawFeedbackEdgeAction) {
+        super();
+    }
+
+    execute(context: CommandExecutionContext): CommandReturn {
+        drawFeedbackEdge(context, this.action.sourceId, this.action.elementTypeId, this.action.edgeSchema);
+        return context.root;
+    }
+}
+
+export interface RemoveFeedbackEdgeAction extends Action {
+    kind: typeof RemoveFeedbackEdgeAction.KIND;
+}
+
+export namespace RemoveFeedbackEdgeAction {
+    export const KIND = 'removeFeedbackEdgeCommand';
+
+    export function is(object: any): object is RemoveFeedbackEdgeAction {
+        return Action.hasKind(object, KIND);
+    }
+
+    export function create(): RemoveFeedbackEdgeAction {
+        return { kind: KIND };
+    }
+}
+
+@injectable()
+export class RemoveFeedbackEdgeCommand extends FeedbackCommand {
+    static readonly KIND = RemoveFeedbackEdgeAction.KIND;
+
+    execute(context: CommandExecutionContext): CommandReturn {
+        removeDanglingFeedbackEdge(context.root);
+        return context.root;
+    }
+}
+
+export class FeedbackEdgeEnd extends GDanglingAnchor {
+    static readonly TYPE = 'feedback-edge-end';
+    constructor(
+        readonly sourceId: string,
+        readonly elementTypeId: string,
+        public feedbackEdge: GRoutableElement | undefined = undefined,
+        override readonly type: string = FeedbackEdgeEnd.TYPE
+    ) {
+        super();
+    }
+}
+
+export function feedbackEdgeId(root: GModelRoot): string {
+    return root.id + '_feedback_edge';
+}
+
+export function feedbackEdgeEndId(root: GModelRoot): string {
+    return root.id + '_feedback_anchor';
+}
+
+export const defaultFeedbackEdgeSchema: Partial<GEdgeSchema> = {
+    cssClasses: ['feedback-edge'],
+    opacity: 0.3
+};
+
+export function drawFeedbackEdge(
+    context: CommandExecutionContext,
+    sourceId: string,
+    elementTypeId: string,
+    edgeTemplate?: Partial<GEdgeSchema>
+): 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);
+
+    const edgeSchema: GEdgeSchema = {
+        id: feedbackEdgeId(root),
+        type: elementTypeId,
+        sourceId: source.id,
+        targetId: edgeEnd.id,
+        ...defaultFeedbackEdgeSchema,
+        ...edgeTemplate
+    };
+
+    const feedbackEdge = context.modelFactory.createElement(edgeSchema);
+    if (isRoutable(feedbackEdge)) {
+        edgeEnd.feedbackEdge = feedbackEdge;
+        root.add(edgeEnd);
+        root.add(feedbackEdge);
+    }
+}
+
+export function removeDanglingFeedbackEdge(root: GModelRoot): void {
+    const feedbackEdge = root.index.getById(feedbackEdgeId(root));
+    const feedbackEdgeEnd = root.index.getById(feedbackEdgeEndId(root));
+    if (feedbackEdge instanceof GChildElement) {
+        root.remove(feedbackEdge);
+    }
+    if (feedbackEdgeEnd instanceof GChildElement) {
+        root.remove(feedbackEdgeEnd);
+    }
+}
+
+export function configureDanglingFeedbackEdge(context: BindingContext): void {
+    if (!context.isBound(DrawFeedbackEdgeCommand) && !context.isBound(RemoveFeedbackEdgeCommand) && !context.isBound(FeedbackEdgeEndView)) {
+        configureCommand(context, DrawFeedbackEdgeCommand);
+        configureCommand(context, RemoveFeedbackEdgeCommand);
+        configureView(context, FeedbackEdgeEnd.TYPE, FeedbackEdgeEndView);
+    }
+}

package/src/features/tools/edge-creation/edege-creation-module.ts

@@ -0,0 +1,25 @@
+/********************************************************************************
+ * Copyright (c) 2019-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, TYPES, TriggerEdgeCreationAction, bindAsService, configureActionHandler } from '@eclipse-glsp/sprotty';
+import { configureDanglingFeedbackEdge } from './dangling-edge-feedback';
+import { EdgeCreationTool } from './edge-creation-tool';
+
+export const edgeCreationToolModule = new FeatureModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+    bindAsService(context, TYPES.ITool, EdgeCreationTool);
+    configureActionHandler(context, TriggerEdgeCreationAction.KIND, EdgeCreationTool);
+    configureDanglingFeedbackEdge(context);
+});

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

@@ -0,0 +1,89 @@
+/********************************************************************************
+ * Copyright (c) 2019-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,
+    AnchorComputerRegistry,
+    Bounds,
+    Disposable,
+    MouseListener,
+    MoveAction,
+    Point,
+    PolylineEdgeRouter,
+    GConnectableElement,
+    GModelElement,
+    findChildrenAtPosition,
+    findParentByFeature,
+    isBoundsAware,
+    isConnectable
+} from '@eclipse-glsp/sprotty';
+import { IFeedbackActionDispatcher } from '../../../base/feedback/feedback-action-dispatcher';
+import { absoluteToParent, getAbsolutePosition, toAbsoluteBounds } from '../../../utils/viewpoint-util';
+import { FeedbackEdgeEnd, feedbackEdgeEndId } from './dangling-edge-feedback';
+
+export class FeedbackEdgeEndMovingMouseListener extends MouseListener implements Disposable {
+    constructor(protected anchorRegistry: AnchorComputerRegistry, protected feedbackDispatcher: IFeedbackActionDispatcher) {
+        super();
+    }
+
+    override mouseMove(target: GModelElement, 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)
+            .reverse()
+            .find(element => isConnectable(element) && element.canConnect(edge, 'target'));
+
+        if (endAtMousePosition instanceof GConnectableElement && edge.source && isBoundsAware(edge.source)) {
+            const anchor = this.computeAbsoluteAnchor(endAtMousePosition, Bounds.center(toAbsoluteBounds(edge.source)));
+            if (Point.euclideanDistance(anchor, edgeEnd.position) > 1) {
+                this.feedbackDispatcher.registerFeedback(this, [
+                    MoveAction.create([{ elementId: edgeEnd.id, toPosition: anchor }], { animate: false })
+                ]);
+            }
+        } else {
+            this.feedbackDispatcher.registerFeedback(this, [
+                MoveAction.create([{ elementId: edgeEnd.id, toPosition: position }], { animate: false })
+            ]);
+        }
+
+        return [];
+    }
+
+    protected computeAbsoluteAnchor(element: GConnectableElement, absoluteReferencePoint: Point, offset?: number): Point {
+        const referencePointInParent = absoluteToParent(element, absoluteReferencePoint);
+        const anchorComputer = this.anchorRegistry.get(PolylineEdgeRouter.KIND, element.anchorKind);
+        let anchor = anchorComputer.getAnchor(element, referencePointInParent, 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 = Point.add(absoluteParentPosition, anchor);
+            }
+        }
+        return anchor;
+    }
+
+    dispose(): void {
+        this.feedbackDispatcher.deregisterFeedback(this);
+    }
+}

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

@@ -0,0 +1,206 @@
+/********************************************************************************
+ * Copyright (c) 2019-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 { inject, injectable } from 'inversify';
+import {
+    Action,
+    AnchorComputerRegistry,
+    CreateEdgeOperation,
+    RequestCheckEdgeAction,
+    GModelElement,
+    TYPES,
+    TriggerEdgeCreationAction,
+    findParentByFeature,
+    isConnectable,
+    isCtrlOrCmd
+} from '@eclipse-glsp/sprotty';
+import { GLSPActionDispatcher } from '../../../base/action-dispatcher';
+import { DragAwareMouseListener } from '../../../base/drag-aware-mouse-listener';
+import { CursorCSS, cursorFeedbackAction } from '../../../base/feedback/css-feedback';
+import { EnableDefaultToolsAction } from '../../../base/tool-manager/tool';
+import { ITypeHintProvider } from '../../hints/type-hint-provider';
+import { BaseCreationTool } from '../base-tools';
+import { DrawFeedbackEdgeAction, RemoveFeedbackEdgeAction } from './dangling-edge-feedback';
+import { FeedbackEdgeEndMovingMouseListener } from './edge-creation-tool-feedback';
+import { GEdge } from '../../../model';
+
+/**
+ * Tool to create connections in a Diagram, by selecting a source and target node.
+ */
+@injectable()
+export class EdgeCreationTool extends BaseCreationTool<TriggerEdgeCreationAction> {
+    static ID = 'tool_create_edge';
+
+    @inject(AnchorComputerRegistry) protected anchorRegistry: AnchorComputerRegistry;
+
+    @inject(TYPES.ITypeHintProvider) protected typeHintProvider: ITypeHintProvider;
+
+    protected isTriggerAction = TriggerEdgeCreationAction.is;
+
+    get id(): string {
+        return EdgeCreationTool.ID;
+    }
+
+    doEnable(): void {
+        const mouseMovingFeedback = new FeedbackEdgeEndMovingMouseListener(this.anchorRegistry, this.feedbackDispatcher);
+        this.toDisposeOnDisable.push(
+            mouseMovingFeedback,
+            this.mouseTool.registerListener(
+                new EdgeCreationToolMouseListener(this.triggerAction, this.actionDispatcher, this.typeHintProvider, this)
+            ),
+            this.mouseTool.registerListener(mouseMovingFeedback),
+            this.registerFeedback([cursorFeedbackAction(CursorCSS.OPERATION_NOT_ALLOWED)], this, [
+                RemoveFeedbackEdgeAction.create(),
+                cursorFeedbackAction()
+            ])
+        );
+    }
+}
+
+@injectable()
+export class EdgeCreationToolMouseListener extends DragAwareMouseListener {
+    protected source?: string;
+    protected target?: string;
+    protected currentTarget?: GModelElement;
+    protected allowedTarget = false;
+    protected proxyEdge: GEdge;
+    protected pendingDynamicCheck = false;
+
+    constructor(
+        protected triggerAction: TriggerEdgeCreationAction,
+        protected actionDispatcher: GLSPActionDispatcher,
+        protected typeHintProvider: ITypeHintProvider,
+        protected tool: EdgeCreationTool
+    ) {
+        super();
+        this.proxyEdge = new GEdge();
+        this.proxyEdge.type = triggerAction.elementTypeId;
+    }
+
+    protected reinitialize(): void {
+        this.source = undefined;
+        this.target = undefined;
+        this.currentTarget = undefined;
+        this.allowedTarget = false;
+        this.tool.registerFeedback([RemoveFeedbackEdgeAction.create()]);
+    }
+
+    override nonDraggingMouseUp(_element: GModelElement, event: MouseEvent): Action[] {
+        const result: Action[] = [];
+        if (event.button === 0) {
+            if (!this.isSourceSelected()) {
+                if (this.currentTarget && this.allowedTarget) {
+                    this.source = this.currentTarget.id;
+                    this.tool.registerFeedback([
+                        DrawFeedbackEdgeAction.create({ elementTypeId: this.triggerAction.elementTypeId, sourceId: this.source })
+                    ]);
+                }
+            } else if (this.currentTarget && this.allowedTarget) {
+                this.target = this.currentTarget.id;
+            }
+            if (this.source && this.target) {
+                result.push(
+                    CreateEdgeOperation.create({
+                        elementTypeId: this.triggerAction.elementTypeId,
+                        sourceElementId: this.source,
+                        targetElementId: this.target,
+                        args: this.triggerAction.args
+                    })
+                );
+                if (!isCtrlOrCmd(event)) {
+                    result.push(EnableDefaultToolsAction.create());
+                } else {
+                    this.reinitialize();
+                }
+            }
+        } else if (event.button === 2) {
+            this.reinitialize();
+            result.push(EnableDefaultToolsAction.create());
+        }
+        return result;
+    }
+
+    protected isSourceSelected(): boolean {
+        return this.source !== undefined;
+    }
+
+    protected isTargetSelected(): boolean {
+        return this.target !== undefined;
+    }
+
+    override mouseOver(target: GModelElement, event: MouseEvent): Action[] {
+        const newCurrentTarget = findParentByFeature(target, isConnectable);
+        if (newCurrentTarget !== this.currentTarget) {
+            this.pendingDynamicCheck = false;
+            this.currentTarget = newCurrentTarget;
+            if (this.currentTarget) {
+                if (!this.isSourceSelected()) {
+                    this.allowedTarget = this.canConnect(newCurrentTarget, 'source');
+                } else if (!this.isTargetSelected()) {
+                    this.allowedTarget = this.canConnect(newCurrentTarget, 'target');
+                }
+                if (this.pendingDynamicCheck) {
+                    return [cursorFeedbackAction(CursorCSS.EDGE_CHECK_PENDING)];
+                }
+            } else {
+                this.allowedTarget = false;
+            }
+            return [this.updateEdgeFeedback()];
+        }
+        return [];
+    }
+
+    protected updateEdgeFeedback(): Action {
+        if (this.allowedTarget) {
+            const action = !this.isSourceSelected()
+                ? cursorFeedbackAction(CursorCSS.EDGE_CREATION_SOURCE)
+                : cursorFeedbackAction(CursorCSS.EDGE_CREATION_TARGET);
+            return action;
+        }
+        return cursorFeedbackAction(CursorCSS.OPERATION_NOT_ALLOWED);
+    }
+
+    protected canConnect(element: GModelElement | undefined, role: 'source' | 'target'): boolean {
+        if (!element || !isConnectable(element) || !element.canConnect(this.proxyEdge, role)) {
+            return false;
+        }
+        if (!this.isDynamic(this.proxyEdge.type)) {
+            return true;
+        }
+        const sourceElement = this.source ?? element;
+        const targetElement = this.source ? element : undefined;
+
+        this.pendingDynamicCheck = true;
+        // Request server edge check
+        this.actionDispatcher
+            .request(RequestCheckEdgeAction.create({ sourceElement, targetElement, edgeType: this.proxyEdge.type }))
+            .then(result => {
+                if (this.pendingDynamicCheck) {
+                    this.allowedTarget = result.isValid;
+                    this.actionDispatcher.dispatch(this.updateEdgeFeedback());
+                    this.pendingDynamicCheck = false;
+                }
+            })
+            .catch(err => console.error('Dynamic edge check failed with: ', err));
+        // Temporarily mark the target as invalid while we wait for the server response,
+        // so a fast-clicking user doesn't get a chance to create the edge in the meantime.
+        return false;
+    }
+
+    protected isDynamic(edgeTypeId: string): boolean {
+        const typeHint = this.typeHintProvider.getEdgeTypeHint(edgeTypeId);
+        return typeHint?.dynamic ?? false;
+    }
+}

package/src/features/tools/edge-creation/view.tsx

@@ -0,0 +1,33 @@
+/********************************************************************************
+ * Copyright (c) 2019-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 { injectable } from 'inversify';
+import { VNode } from 'snabbdom';
+import { IView, Point, RenderingContext, GModelElement, svg } from '@eclipse-glsp/sprotty';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const JSX = { createElement: svg };
+
+/**
+ * This view is used for the invisible end of the feedback edge.
+ * A feedback edge is shown as a visual feedback when creating edges.
+ */
+@injectable()
+export class FeedbackEdgeEndView implements IView {
+    render(model: Readonly<GModelElement>, context: RenderingContext): VNode {
+        const position: Point = (model as any).position ?? Point.ORIGIN;
+        return <g x={position.x} y={position.y} />;
+    }
+}

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

@@ -0,0 +1,38 @@
+/********************************************************************************
+ * Copyright (c) 2019-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, TYPES, bindAsService, configureCommand } from '@eclipse-glsp/sprotty';
+import { configureDanglingFeedbackEdge } from '../edge-creation/dangling-edge-feedback';
+import { EdgeEditTool } from './edge-edit-tool';
+import {
+    DrawFeedbackEdgeSourceCommand,
+    HideEdgeReconnectHandlesFeedbackCommand,
+    ShowEdgeReconnectHandlesFeedbackCommand,
+    SwitchRoutingModeCommand
+} from './edge-edit-tool-feedback';
+
+export const edgeEditToolModule = new FeatureModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+    bindAsService(context, TYPES.IDefaultTool, EdgeEditTool);
+
+    // reconnect edge tool feedback
+    configureCommand(context, ShowEdgeReconnectHandlesFeedbackCommand);
+    configureCommand(context, HideEdgeReconnectHandlesFeedbackCommand);
+    configureCommand(context, DrawFeedbackEdgeSourceCommand);
+    configureCommand(context, SwitchRoutingModeCommand);
+
+    // dangling edge feedback
+    configureDanglingFeedbackEdge(context);
+});