@eclipse-glsp/client 2.2.0-next.340 → 2.2.0-next.342

package/src/base/mouse-position-tracker.ts

@@ -14,12 +14,35 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { MousePositionTracker } from '@eclipse-glsp/sprotty';
-import { injectable } from 'inversify';
+import {
+    Action,
+    DOMHelper,
+    GModelElement,
+    MousePositionTracker,
+    Point,
+    TYPES,
+    ViewerOptions,
+    getAbsoluteClientBounds
+} from '@eclipse-glsp/sprotty';
+import { inject, injectable } from 'inversify';
 import { Ranked } from './ranked';
 
 @injectable()
 export class GLSPMousePositionTracker extends MousePositionTracker implements Ranked {
     /* we want to be executed before all default mouse listeners since we are just tracking the position and others may need it */
     rank = Ranked.DEFAULT_RANK - 200;
+
+    @inject(TYPES.ViewerOptions) protected viewerOptions: ViewerOptions;
+    @inject(TYPES.DOMHelper) protected domHelper: DOMHelper;
+
+    override mouseMove(target: GModelElement, event: MouseEvent): (Action | Promise<Action>)[] {
+        // we cannot simply use the offsetX and offsetY properties of the event since they also consider nested HTML elements
+        // such as foreignObjects or the projection bars divs. Instead, we manually translate the client coordinates to the diagram
+        const clientToRoot = getAbsoluteClientBounds(target.root, this.domHelper, this.viewerOptions);
+        const clientToPosition = { x: event.clientX, y: event.clientY };
+        const rootToPosition = Point.subtract(clientToPosition, clientToRoot);
+        const positionOnDiagram = target.root.parentToLocal(rootToPosition);
+        this.lastPosition = positionOnDiagram;
+        return [];
+    }
 }

package/src/features/debug/debug-manager.ts

@@ -32,19 +32,21 @@ export class DebugManager implements IActionHandler {
         return this._debugEnabled;
     }
 
-    handle(action: EnableDebugModeAction): void {
-        this._debugEnabled = action.enable;
-    }
-
     @postConstruct()
     protected init(): void {
         this.debugFeedback = this.feedbackDispatcher.createEmitter();
     }
 
-    setDebugEnabled(visible: boolean): void {
-        if (!visible) {
+    handle(action: EnableDebugModeAction): void {
+        this.setDebugEnabled(action.enable);
+    }
+
+    setDebugEnabled(enabled: boolean): void {
+        if (this._debugEnabled && !enabled) {
+            this._debugEnabled = false;
             this.debugFeedback.dispose();
-        } else {
+        } else if (!this._debugEnabled && enabled) {
+            this._debugEnabled = true;
             this.debugFeedback
                 .add(EnableDebugModeAction.create({ enable: true }), EnableDebugModeAction.create({ enable: false }))
                 .submit();

package/src/features/element-template/mouse-tracking-element-position-listener.ts

@@ -54,10 +54,11 @@ export class MouseTrackingElementPositionListener extends DragAwareMouseListener
         if (!element) {
             return [];
         }
-        if (!this.tracker.isTracking()) {
+        const isInitializing = !this.tracker.isTracking();
+        if (isInitializing) {
             this.initialize(element, ctx, event);
         }
-        const move = this.tracker.moveElements([element], { snap: event, restrict: event });
+        const move = this.tracker.moveElements([element], { snap: event, restrict: event, skipStatic: !isInitializing });
         const elementMove = move.elementMoves[0];
         if (!elementMove) {
             return [];

package/src/features/export/glsp-svg-exporter.ts

@@ -13,38 +13,107 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { ExportSvgAction, GModelRoot, RequestAction, SvgExporter } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
 import { v4 as uuid } from 'uuid';
-import { ExportSvgAction, RequestAction, GModelRoot, SvgExporter } from '@eclipse-glsp/sprotty';
 
 @injectable()
 export class GLSPSvgExporter extends SvgExporter {
-    override export(root: GModelRoot, _request?: RequestAction<ExportSvgAction>): void {
+    override export(root: GModelRoot, request?: RequestAction<ExportSvgAction>): void {
         if (typeof document !== 'undefined') {
-            const svgElement = this.findSvgElement();
+            let svgElement = this.findSvgElement();
             if (svgElement) {
-                // createSvg requires the svg to have a non-empty id, so we generate one if necessary
-                const originalId = svgElement.id;
-                try {
-                    svgElement.id = originalId || uuid();
-                    // provide generated svg code with respective sizing for proper viewing in browser and remove undesired border
-                    const bounds = this.getBounds(root);
-                    const svg = this.createSvg(svgElement, root).replace(
-                        'style="',
-                        `style="width: ${bounds.width}px !important;height: ${bounds.height}px !important;border: none !important;`
-                    );
-                    // do not give request/response id here as otherwise the action is treated as an unrequested response
-                    this.actionDispatcher.dispatch(ExportSvgAction.create(svg));
-                } finally {
-                    svgElement.id = originalId;
-                }
+                svgElement = this.prepareSvgElement(svgElement, root, request);
+                const serializedSvg = this.createSvg(svgElement, root);
+                const svgExport = this.getSvgExport(serializedSvg, svgElement, root, request);
+                // do not give request/response id here as otherwise the action is treated as an unrequested response
+                this.actionDispatcher.dispatch(ExportSvgAction.create(svgExport));
             }
         }
     }
 
+    protected override createSvg(svgElement: SVGSVGElement, root: GModelRoot): string {
+        // createSvg requires the svg to have a non-empty id, so we generate one if necessary
+        const originalId = svgElement.id;
+        try {
+            svgElement.id = originalId || uuid();
+            return super.createSvg(svgElement, root);
+        } finally {
+            svgElement.id = originalId;
+        }
+    }
+
     protected findSvgElement(): SVGSVGElement | null {
         const div = document.getElementById(this.options.hiddenDiv);
         // search for first svg element as hierarchy within Sprotty might change
         return div && div.querySelector('svg');
     }
+
+    protected prepareSvgElement(svgElement: SVGSVGElement, root: GModelRoot, request?: RequestAction<ExportSvgAction>): SVGSVGElement {
+        return svgElement;
+    }
+
+    protected override copyStyles(source: Element, target: Element, skippedProperties: string[]): void {
+        this.copyStyle(source, target, skippedProperties);
+
+        // IE doesn't retrun anything on source.children
+        for (let i = 0; i < source.childNodes.length; ++i) {
+            const sourceChild = source.childNodes[i];
+            const targetChild = target.childNodes[i];
+            if (sourceChild instanceof Element) {
+                this.copyStyles(sourceChild, targetChild as Element, []);
+            }
+        }
+    }
+
+    protected copyStyle(source: Element, target: Element, skippedProperties: string[]): void {
+        const sourceStyle = getComputedStyle(source);
+        const targetStyle = getComputedStyle(target);
+
+        let style = '';
+        for (let i = 0; i < sourceStyle.length; i++) {
+            const propertyName = sourceStyle[i];
+            if (!skippedProperties.includes(propertyName)) {
+                const propertyValue = sourceStyle.getPropertyValue(propertyName);
+                const propertyPriority = sourceStyle.getPropertyPriority(propertyName);
+                if (targetStyle.getPropertyValue(propertyName) !== propertyValue) {
+                    if (isElementCSSInlineStyle(target)) {
+                        // rather set the property directly on the element to keep other values intact
+                        target.style.setProperty(propertyName, propertyValue);
+                    } else {
+                        // collect all properties to set them at once
+                        style += `${propertyName}: ${propertyValue}${propertyPriority ? ' !' + propertyPriority : ''}; `;
+                    }
+                }
+            }
+        }
+        if (style !== '') {
+            target.setAttribute('style', style.trim());
+        }
+    }
+
+    protected getSvgExport(
+        serializedSvgElement: string,
+        svgElement: SVGElement,
+        root: GModelRoot,
+        request?: RequestAction<ExportSvgAction>
+    ): string {
+        const svgExportStyle = this.getSvgExportStyle(svgElement, root, request);
+        return svgExportStyle ? serializedSvgElement.replace('style="', `style="${svgExportStyle}`) : serializedSvgElement;
+    }
+
+    protected getSvgExportStyle(svgElement: SVGElement, root: GModelRoot, request?: RequestAction<ExportSvgAction>): string | undefined {
+        // provide generated svg code with respective sizing for proper viewing in browser and remove undesired border
+        const bounds = this.getBounds(root);
+        return (
+            `width: ${bounds.width}px !important;` +
+            `height: ${bounds.height}px !important;` +
+            'border: none !important;' +
+            'cursor: default !important;'
+        );
+    }
+}
+
+export function isElementCSSInlineStyle(element: any): element is ElementCSSInlineStyle {
+    return 'style' in element && element.style instanceof CSSStyleDeclaration;
 }

package/src/features/grid/grid-manager.ts

@@ -44,13 +44,15 @@ export class GridManager implements IActionHandler {
     }
 
     handle(action: ShowGridAction): void {
-        this._gridVisible = action.show;
+        this.setGridVisible(action.show);
     }
 
     setGridVisible(visible: boolean): void {
-        if (!visible) {
+        if (this._gridVisible && !visible) {
+            this._gridVisible = false;
             this.gridFeedback.dispose();
-        } else {
+        } else if (!this._gridVisible && visible) {
+            this._gridVisible = true;
             this.gridFeedback.add(ShowGridAction.create({ show: true }), ShowGridAction.create({ show: false })).submit();
         }
     }

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

@@ -112,11 +112,9 @@ export class FeedbackMoveMouseListener extends DragAwareMouseListener {
         return [];
     }
 
-    override mouseMove(target: GModelElement, event: MouseEvent): Action[] {
-        super.mouseMove(target, event);
-        if (event.buttons === 0) {
-            return this.mouseUp(target, event);
-        } else if (this.tracker.isTracking()) {
+    override draggingMouseMove(target: GModelElement, event: MouseEvent): Action[] {
+        super.draggingMouseMove(target, event);
+        if (this.tracker.isTracking()) {
             return this.moveElements(target, event);
         }
         return [];

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

@@ -180,7 +180,7 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements ISel
             this.handleFeedback.submit();
             return true;
         } else {
-            this.dispose();
+            this.disposeResize();
             return false;
         }
     }
@@ -233,21 +233,19 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements ISel
     }
 
     override draggingMouseUp(target: GModelElement, event: MouseEvent): Action[] {
-        if (!this.tracker.isTracking()) {
-            return [];
-        }
         const actions: Action[] = [];
         if (this.activeResizeHandle) {
             actions.push(...this.handleResizeOnServer(this.activeResizeHandle));
         } else {
+            // since the move feedback is handled by another class we just see whether there is something to move
             actions.push(...this.handleMoveOnServer(target));
         }
-        this.disposeAllButHandles();
+        this.disposeResize({ keepHandles: true });
         return actions;
     }
 
     override nonDraggingMouseUp(element: GModelElement, event: MouseEvent): Action[] {
-        this.disposeAllButHandles();
+        this.disposeResize({ keepHandles: true });
         return super.nonDraggingMouseUp(element, event);
     }
 
@@ -347,19 +345,19 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements ISel
         return element !== undefined && this.activeResizeElement !== undefined && element.id === this.activeResizeElement.id;
     }
 
-    protected disposeAllButHandles(): void {
-        // We do not dispose the handle feedback as we want to keep showing the handles on selected elements
-        // this.handleFeedback.dispose();
+    protected disposeResize(opts: { keepHandles: boolean } = { keepHandles: false }): void {
+        if (!opts.keepHandles) {
+            this.handleFeedback.dispose();
+        }
         this.resizeFeedback.dispose();
         this.tracker.dispose();
         this.activeResizeElement = undefined;
         this.activeResizeHandle = undefined;
         this.initialBounds = undefined;
-        super.dispose();
     }
 
     override dispose(): void {
-        this.handleFeedback.dispose();
-        this.disposeAllButHandles();
+        this.disposeResize();
+        super.dispose();
     }
 }

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

@@ -56,24 +56,32 @@ export class EdgeCreationTool extends BaseCreationTool<TriggerEdgeCreationAction
     }
 
     doEnable(): void {
-        const mouseMovingFeedback = new FeedbackEdgeEndMovingMouseListener(this.anchorRegistry, this.feedbackDispatcher);
+        this.toolFeedback();
+        this.creationListener();
+        this.trackFeedbackEdge();
+    }
+
+    protected toolFeedback(): void {
         const toolFeedback = this.createFeedbackEmitter()
             .add(cursorFeedbackAction(CursorCSS.OPERATION_NOT_ALLOWED), cursorFeedbackAction())
             .submit();
+        this.toDisposeOnDisable.push(toolFeedback);
+    }
+
+    protected creationListener(): void {
         const creationListener = new EdgeCreationToolMouseListener(
             this.triggerAction,
             this.actionDispatcher,
             this.typeHintProvider,
             this,
-            this.grid?.x / 2
-        );
-        this.toDisposeOnDisable.push(
-            mouseMovingFeedback,
-            this.mouseTool.registerListener(mouseMovingFeedback),
-            creationListener,
-            this.mouseTool.registerListener(creationListener),
-            toolFeedback
+            this.grid ? this.grid.x / 2 : undefined
         );
+        this.toDisposeOnDisable.push(creationListener, this.mouseTool.registerListener(creationListener));
+    }
+
+    protected trackFeedbackEdge(): void {
+        const mouseMovingFeedback = new FeedbackEdgeEndMovingMouseListener(this.anchorRegistry, this.feedbackDispatcher);
+        this.toDisposeOnDisable.push(mouseMovingFeedback, this.mouseTool.registerListener(mouseMovingFeedback));
     }
 }
 

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

@@ -41,6 +41,7 @@ import {
     typeGuard
 } from '@eclipse-glsp/sprotty';
 import { inject, injectable } from 'inversify';
+import { DragAwareMouseListener } from '../../../base/drag-aware-mouse-listener';
 import { IFeedbackActionDispatcher } from '../../../base/feedback/feedback-action-dispatcher';
 import { FeedbackCommand } from '../../../base/feedback/feedback-command';
 import { FeedbackEmitter } from '../../../base/feedback/feedback-emitter';
@@ -254,7 +255,7 @@ export class FeedbackEdgeSourceMovingMouseListener extends MouseListener impleme
     }
 }
 
-export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
+export class FeedbackEdgeRouteMovingMouseListener extends DragAwareMouseListener {
     protected tracker: ChangeBoundsTracker;
 
     constructor(
@@ -266,7 +267,7 @@ export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
     }
 
     override mouseDown(target: GModelElement, event: MouseEvent): Action[] {
-        const result: Action[] = [];
+        const result = super.mouseDown(target, event);
         if (event.button === 0) {
             const routingHandle = findParentByFeature(target, isRoutingHandle);
             if (routingHandle !== undefined) {
@@ -279,11 +280,9 @@ export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
         return result;
     }
 
-    override mouseMove(target: GModelElement, event: MouseEvent): Action[] {
-        super.mouseMove(target, event);
-        if (event.buttons === 0) {
-            return this.mouseUp(target, event);
-        } else if (this.tracker.isTracking()) {
+    override draggingMouseMove(target: GModelElement, event: MouseEvent): Action[] {
+        super.draggingMouseMove(target, event);
+        if (this.tracker.isTracking()) {
             return this.moveRoutingHandles(target, event);
         }
         return [];
@@ -327,10 +326,24 @@ export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
         return undefined;
     }
 
-    override mouseUp(_target: GModelElement, _event: MouseEvent): Action[] {
-        this.tracker.dispose();
+    override nonDraggingMouseUp(element: GModelElement, event: MouseEvent): Action[] {
+        // should reset everything that may have happend on mouse down
+        this.tracker.stopTracking();
+        return [];
+    }
+
+    override draggingMouseUp(_target: GModelElement, _event: MouseEvent): Action[] {
+        if (!this.tracker.isTracking()) {
+            return [];
+        }
+        this.dispose();
         return [];
     }
+
+    override dispose(): void {
+        this.tracker.dispose();
+        super.dispose();
+    }
 }
 
 /**

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

@@ -80,6 +80,7 @@ export class EdgeEditTool extends BaseEditTool {
             this.mouseTool.registerListener(this.edgeEditListener),
             this.feedbackEdgeSourceMovingListener,
             this.feedbackEdgeTargetMovingListener,
+            this.feedbackMovingListener,
             this.selectionService.onSelectionChanged(change => this.edgeEditListener.selectionChanged(change.root, change.selectedElements))
         );
     }
@@ -110,10 +111,12 @@ export class EdgeEditListener extends DragAwareMouseListener implements ISelecti
     // active reconnect handle data
     protected reconnectMode?: 'NEW_SOURCE' | 'NEW_TARGET';
 
+    protected cursorFeedback: FeedbackEmitter;
     protected editFeedback: FeedbackEmitter;
 
     constructor(protected tool: EdgeEditTool) {
         super();
+        this.cursorFeedback = this.tool.createFeedbackEmitter();
         this.editFeedback = this.tool.createFeedbackEmitter();
     }
 
@@ -264,11 +267,11 @@ export class EdgeEditListener extends DragAwareMouseListener implements ISelecti
                         (this.reconnectMode === 'NEW_SOURCE' && currentTarget.canConnect(this.edge, 'source')) ||
                         (this.reconnectMode === 'NEW_TARGET' && currentTarget.canConnect(this.edge, 'target'))
                     ) {
-                        this.editFeedback.add(cursorFeedbackAction(CursorCSS.EDGE_RECONNECT), cursorFeedbackAction()).submit();
+                        this.cursorFeedback.add(cursorFeedbackAction(CursorCSS.EDGE_RECONNECT), cursorFeedbackAction()).submit();
                         return [];
                     }
                 }
-                this.editFeedback.add(cursorFeedbackAction(CursorCSS.OPERATION_NOT_ALLOWED), cursorFeedbackAction()).submit();
+                this.cursorFeedback.add(cursorFeedbackAction(CursorCSS.OPERATION_NOT_ALLOWED), cursorFeedbackAction()).submit();
             }
         }
         return [];
@@ -307,6 +310,7 @@ export class EdgeEditListener extends DragAwareMouseListener implements ISelecti
         this.reconnectMode = undefined;
         this.newConnectable = undefined;
         this.routingHandle = undefined;
+        this.cursorFeedback.dispose();
         this.editFeedback.dispose();
         this.tool.deregisterFeedbackListeners();
         super.dispose();

package/src/features/tools/node-creation/container-manager.ts

@@ -20,12 +20,6 @@ import { CSS_GHOST_ELEMENT, CursorCSS, cursorFeedbackAction } from '../../../bas
 import { FeedbackEmitter } from '../../../base/feedback/feedback-emitter';
 import { ContainerElement, isContainable } from '../../hints/model';
 import { ChangeBoundsManager } from '../change-bounds/change-bounds-manager';
-export interface TrackedInsert {
-    elementTypeId: string;
-    location: Point;
-    container?: GModelElement;
-    valid: boolean;
-}
 
 export interface InsertOptions extends Record<string, unknown> {
     /** Flag to indicate whether the location within a container needs to be valid. Default: false */
@@ -42,6 +36,14 @@ export const DEFAULT_INSERT_OPTIONS: InsertOptions = {
     validateLocationInContainer: false
 };
 
+export interface TrackedInsert {
+    elementTypeId: string;
+    location: Point;
+    container?: GModelElement;
+    valid: boolean;
+    options: InsertOptions;
+}
+
 @injectable()
 export class ContainerManager {
     @inject(ChangeBoundsManager) protected readonly changeBoundsManager: ChangeBoundsManager;
@@ -54,7 +56,7 @@ export class ContainerManager {
             // we need to check whether the location is valid either because we do not have a container or the option is set
             valid = opts?.validLocationOverwrite ?? this.changeBoundsManager.hasValidPosition(proxy, location);
         }
-        return { elementTypeId, container, location, valid };
+        return { elementTypeId, container, location, valid, options };
     }
 
     findContainer(location: Point, ctx: GModelElement, evt?: MouseEvent): ContainerElement | undefined {

package/src/features/tools/node-creation/insert-indicator.ts

@@ -29,7 +29,7 @@ export class InsertIndicator extends GNode implements ArgsAware {
     override type: string = InsertIndicator.TYPE;
     override features?: FeatureSet = createFeatureSet(InsertIndicator.DEFAULT_FEATURES);
     override cssClasses: string[] = ['insert-indicator', 'sprotty-node'];
-    override size: Dimension = { width: 1, height: 1 };
+    override size: Dimension = Dimension.ZERO;
     args: Args = {};
 
     constructor(length?: number) {

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

@@ -15,7 +15,10 @@
  ********************************************************************************/
 import {
     Action,
+    Args,
+    Bounds,
     CreateNodeOperation,
+    Dimension,
     Disposable,
     DisposableCollection,
     GModelElement,
@@ -24,6 +27,7 @@ import {
     Point,
     TYPES,
     TriggerNodeCreationAction,
+    isBoundsAware,
     isCtrlOrCmd,
     isMoveable
 } from '@eclipse-glsp/sprotty';
@@ -129,16 +133,16 @@ export class NodeCreationToolMouseListener extends DragAwareMouseListener {
         return this.triggerAction.elementTypeId;
     }
 
-    override nonDraggingMouseUp(target: GModelElement, event: MouseEvent): Action[] {
+    override nonDraggingMouseUp(ctx: GModelElement, event: MouseEvent): Action[] {
         const result: Action[] = [];
 
-        const insert = this.getTrackedInsert(target, event);
+        const insert = this.getTrackedInsert(ctx, event);
         if (insert.valid) {
             result.push(
                 CreateNodeOperation.create(this.elementTypeId, {
                     location: insert.location,
                     containerId: insert.container?.id,
-                    args: this.triggerAction.args
+                    args: this.getCreateNodeOperationArgs(insert, ctx, event)
                 })
             );
         }
@@ -158,6 +162,22 @@ export class NodeCreationToolMouseListener extends DragAwareMouseListener {
         return result;
     }
 
+    protected getCreateNodeOperationArgs(insert: TrackedInsert, ctx: GModelElement, event: MouseEvent): Args | undefined {
+        let args = { ...this.triggerAction.args };
+        const ghostElement = this.getGhostElement(ctx, event);
+        if (ghostElement) {
+            const ghostDimensions = isBoundsAware(ghostElement) ? Bounds.dimension(ghostElement.bounds) : Dimension.ZERO;
+            args = {
+                ...args,
+                'ghost-x': ghostElement.position.x,
+                'ghost-y': ghostElement.position.y,
+                'ghost-width': ghostDimensions.width,
+                'ghost-height': ghostDimensions.height
+            };
+        }
+        return args;
+    }
+
     protected createGhostElement(ghostElement: GhostElement): string {
         const templates = [ghostElement.template];
         this.ghostElementFeedback.add(
@@ -176,7 +196,7 @@ export class NodeCreationToolMouseListener extends DragAwareMouseListener {
     protected getTrackedInsert(ctx: GModelElement, event: MouseEvent): TrackedInsert {
         const ghostElement = this.getGhostElement(ctx, event);
         if (!ghostElement) {
-            return { elementTypeId: this.elementTypeId, location: Point.ORIGIN, valid: false };
+            return { elementTypeId: this.elementTypeId, location: Point.ORIGIN, valid: false, options: { evt: event } };
         }
         return this.tool.containerManager.insert(ghostElement, ghostElement.position, this.elementTypeId, { evt: event });
     }