@eclipse-glsp/client 2.2.0-next.335 → 2.2.0-next.337

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

@@ -16,13 +16,14 @@
 import {
     Action,
     CreateNodeOperation,
+    Disposable,
+    DisposableCollection,
     GModelElement,
-    GNode,
     GhostElement,
+    IModelFactory,
     Point,
     TYPES,
     TriggerNodeCreationAction,
-    findParentByFeature,
     isCtrlOrCmd,
     isMoveable
 } from '@eclipse-glsp/sprotty';
@@ -32,14 +33,14 @@ import { FeedbackEmitter } from '../../../base';
 import { DragAwareMouseListener } from '../../../base/drag-aware-mouse-listener';
 import { CSS_GHOST_ELEMENT, CSS_HIDDEN, CursorCSS, cursorFeedbackAction } from '../../../base/feedback/css-feedback';
 import { EnableDefaultToolsAction } from '../../../base/tool-manager/tool';
-import { MoveableElement, isValidMove } from '../../../utils';
-import { getAbsolutePosition } from '../../../utils/viewpoint-util';
-import { RemoveTemplateElementsAction } from '../../element-template';
+import { MoveableElement } from '../../../utils/gmodel-util';
 import { AddTemplateElementsAction, getTemplateElementId } from '../../element-template/add-template-element';
 import { MouseTrackingElementPositionListener, PositioningTool } from '../../element-template/mouse-tracking-element-position-listener';
-import { Containable, isContainable } from '../../hints/model';
+import { RemoveTemplateElementsAction } from '../../element-template/remove-template-element';
 import { BaseCreationTool } from '../base-tools';
-import { ChangeBoundsManager } from '../change-bounds';
+import { ChangeBoundsManager, TrackedMove } from '../change-bounds';
+import { ContainerManager, TrackedInsert } from './container-manager';
+import { InsertIndicator } from './insert-indicator';
 
 @injectable()
 export class NodeCreationTool extends BaseCreationTool<TriggerNodeCreationAction> implements PositioningTool {
@@ -47,52 +48,80 @@ export class NodeCreationTool extends BaseCreationTool<TriggerNodeCreationAction
 
     protected isTriggerAction = TriggerNodeCreationAction.is;
 
-    @inject(TYPES.IChangeBoundsManager) readonly changeBoundsManager: ChangeBoundsManager;
+    @inject(ChangeBoundsManager) readonly changeBoundsManager: ChangeBoundsManager;
+    @inject(ContainerManager) readonly containerManager: ContainerManager;
+    @inject(TYPES.IModelFactory) modelFactory: IModelFactory;
 
     get id(): string {
         return NodeCreationTool.ID;
     }
 
     doEnable(): void {
-        let trackingListener: MouseTrackingElementPositionListener | undefined;
-        const ghostElement = this.triggerAction.ghostElement;
-        const ghostElementId = ghostElement ? getTemplateElementId(ghostElement.template) : undefined;
-        if (ghostElement && ghostElementId) {
-            trackingListener = new MouseTrackingElementPositionListener(ghostElementId, this, 'middle');
-            this.toDisposeOnDisable.push(trackingListener, this.mouseTool.registerListener(trackingListener));
-        }
+        const ghostElement = this.triggerAction.ghostElement ?? { template: this.modelFactory.createSchema(this.createInsertIndicator()) };
+        this.toDisposeOnDisable.push(this.createGhostElementTracker(ghostElement, 'middle'));
+        this.toDisposeOnDisable.push(this.createNodeCreationListener(ghostElement));
+        this.toDisposeOnDisable.push(this.createNodeCreationCursorFeedback().submit());
+    }
 
-        const toolListener = new NodeCreationToolMouseListener(this.triggerAction, this, ghostElement);
-        this.toDisposeOnDisable.push(
-            toolListener,
-            this.mouseTool.registerListener(toolListener),
-            this.createFeedbackEmitter().add(cursorFeedbackAction(CursorCSS.NODE_CREATION), cursorFeedbackAction()).submit()
+    protected createInsertIndicator(): GModelElement {
+        return new InsertIndicator();
+    }
+
+    protected createGhostElementTracker(ghostElement: GhostElement, position: 'top-left' | 'middle'): Disposable {
+        const trackingListener = new NodeInsertTrackingListener(
+            getTemplateElementId(ghostElement.template),
+            this.triggerAction.elementTypeId,
+            this,
+            position
         );
+        return new DisposableCollection(trackingListener, this.mouseTool.registerListener(trackingListener));
+    }
+
+    protected createNodeCreationListener(ghostElement: GhostElement): Disposable {
+        const toolListener = new NodeCreationToolMouseListener(this.triggerAction, this, ghostElement);
+        return new DisposableCollection(toolListener, this.mouseTool.registerListener(toolListener));
+    }
+
+    protected createNodeCreationCursorFeedback(): FeedbackEmitter {
+        return this.createFeedbackEmitter().add(cursorFeedbackAction(CursorCSS.NODE_CREATION), cursorFeedbackAction());
+    }
+}
+
+export class NodeInsertTrackingListener extends MouseTrackingElementPositionListener {
+    constructor(
+        elementId: string,
+        protected elementTypeId: string,
+        protected override tool: NodeCreationTool,
+        cursorPosition: 'top-left' | 'middle' = 'top-left'
+    ) {
+        super(elementId, tool, cursorPosition);
+    }
+
+    protected override addMoveFeedback(move: TrackedMove, ctx: GModelElement, event: MouseEvent): void {
+        super.addMoveFeedback(move, ctx, event);
+
+        const element = move.elementMoves[0].element;
+        const location = move.elementMoves[0].toPosition;
+        const insert = this.tool.containerManager.insert(element, location, this.elementTypeId, { evt: event });
+        this.tool.containerManager.addInsertFeedback(this.moveGhostFeedback, insert, ctx, event);
     }
 }
 
 export class NodeCreationToolMouseListener extends DragAwareMouseListener {
-    protected container?: GModelElement & Containable;
     protected cursorFeedback: FeedbackEmitter;
     protected ghostElementFeedback: FeedbackEmitter;
-    protected ghostElementId?: string;
+    protected ghostElementId: string;
 
     constructor(
         protected triggerAction: TriggerNodeCreationAction,
         protected tool: NodeCreationTool,
-        protected ghostElement?: GhostElement
+        protected ghostElement: GhostElement
     ) {
         super();
         this.cursorFeedback = tool.createFeedbackEmitter();
         this.ghostElementFeedback = tool.createFeedbackEmitter();
-        if (ghostElement) {
-            this.ghostElementId = getTemplateElementId(ghostElement.template);
-        }
-        this.createGhostElement();
-    }
-
-    protected creationAllowed(elementTypeId: string): boolean | undefined {
-        return this.container && this.container.isContainableElement(elementTypeId);
+        this.ghostElementId = getTemplateElementId(ghostElement.template);
+        this.createGhostElement(ghostElement);
     }
 
     get elementTypeId(): string {
@@ -101,78 +130,57 @@ export class NodeCreationToolMouseListener extends DragAwareMouseListener {
 
     override nonDraggingMouseUp(target: GModelElement, event: MouseEvent): Action[] {
         const result: Action[] = [];
-        if (this.container === undefined) {
-            this.mouseOver(target, event);
+
+        const insert = this.getTrackedInsert(target, event);
+        if (insert.valid) {
+            result.push(
+                CreateNodeOperation.create(this.elementTypeId, {
+                    location: insert.location,
+                    containerId: insert.container?.id,
+                    args: this.triggerAction.args
+                })
+            );
+        }
+        if (isCtrlOrCmd(event)) {
+            // we continue in stamp mode so we keep the ghost but dispose everything else
+            this.disposeAllButGhostElement();
+            return result;
         }
 
-        if (this.creationAllowed(this.elementTypeId)) {
-            const location = this.getValidInsertPosition(target, event);
-            if (location) {
-                const containerId = this.container?.id;
-                result.push(CreateNodeOperation.create(this.elementTypeId, { location, containerId, args: this.triggerAction.args }));
-            }
-            if (!isCtrlOrCmd(event)) {
-                // we no longer want to show the ghost element AFTER the next update
-                this.ghostElementFeedback.discard();
-                result.push(EnableDefaultToolsAction.create());
-            } else {
-                // we continue in stamp mode so we keep the ghost but dispose everything else
-                this.disposeAllButGhostElement();
-            }
+        if (insert.valid) {
+            // we keep the ghost element until the next update to avoid flickering during insert
+            this.ghostElementFeedback.discard();
+        } else {
+            this.dispose();
         }
+        result.push(EnableDefaultToolsAction.create());
         return result;
     }
 
-    protected createGhostElement(): void {
-        if (!this.ghostElement) {
-            return;
-        }
-        const templates = [this.ghostElement.template];
-        this.ghostElementFeedback
-            .add(
-                AddTemplateElementsAction.create({ templates, addClasses: [CSS_HIDDEN, CSS_GHOST_ELEMENT] }),
-                RemoveTemplateElementsAction.create({ templates })
-            )
-            .submit();
-    }
-
-    protected getGhostElement(): MoveableElement | undefined {
-        if (!this.ghostElementId) {
-            return undefined;
-        }
-        const ghostElement = this.container?.index.getById(this.ghostElementId);
+    protected createGhostElement(ghostElement: GhostElement): string {
+        const templates = [ghostElement.template];
+        this.ghostElementFeedback.add(
+            AddTemplateElementsAction.create({ templates, addClasses: [CSS_HIDDEN, CSS_GHOST_ELEMENT] }),
+            RemoveTemplateElementsAction.create({ templates })
+        );
+        this.ghostElementFeedback.submit();
+        return getTemplateElementId(ghostElement.template);
+    }
+
+    protected getGhostElement(ctx: GModelElement, event: MouseEvent): MoveableElement | undefined {
+        const ghostElement = ctx.index.getById(this.ghostElementId);
         return ghostElement && isMoveable(ghostElement) ? ghostElement : undefined;
     }
 
-    protected getValidInsertPosition(target: GModelElement, event: MouseEvent): Point | undefined {
-        const ghostElement = this.getGhostElement();
-        if (ghostElement) {
-            return isValidMove(ghostElement, ghostElement.position, this.tool.changeBoundsManager.movementRestrictor)
-                ? ghostElement.position
-                : undefined;
-        }
-        const location = getAbsolutePosition(target, event);
-
-        // Create a 0-bounds proxy element for snapping
-        const elementProxy = new GNode();
-        elementProxy.size = { width: 0, height: 0 };
-        return this.tool.changeBoundsManager.snapPosition(elementProxy, location);
-    }
-
-    override mouseOver(target: GModelElement, event: MouseEvent): Action[] {
-        const currentContainer = findParentByFeature(target, isContainable);
-        if (!this.container || currentContainer !== this.container) {
-            this.container = currentContainer;
-            const feedback = this.creationAllowed(this.elementTypeId)
-                ? cursorFeedbackAction(CursorCSS.NODE_CREATION)
-                : cursorFeedbackAction(CursorCSS.OPERATION_NOT_ALLOWED);
-            this.cursorFeedback.add(feedback).submit();
+    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 [];
+        return this.tool.containerManager.insert(ghostElement, ghostElement.position, this.elementTypeId, { evt: event });
     }
 
     protected disposeAllButGhostElement(): void {
-        this.cursorFeedback.dispose();
         super.dispose();
     }
 

package/src/features/tools/node-creation/node-creation-views.tsx

@@ -0,0 +1,49 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG 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 { IView, RenderingContext, TYPES, setClass, svg } from '@eclipse-glsp/sprotty';
+import { inject, injectable, optional } from 'inversify';
+import { VNode } from 'snabbdom';
+import { GArgument } from '../../../utils';
+import { Grid } from '../../grid';
+import { ARG_LENGTH, InsertIndicator } from './insert-indicator';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const JSX = { createElement: svg };
+
+@injectable()
+export class InsertIndicatorView implements IView {
+    @optional() @inject(TYPES.Grid) protected grid?: Grid;
+
+    render(model: Readonly<InsertIndicator>, context: RenderingContext): VNode | undefined {
+        if (context.targetKind === 'hidden') {
+            return undefined;
+        }
+        const size = this.getSize(model);
+        const node = (
+            <g>
+                <polyline class-sprotty-node={true} class-insert-indicator={true} points={`0,${-size / 2} 0,${size / 2}`}></polyline>
+                <polyline class-sprotty-node={true} class-insert-indicator={true} points={`${-size / 2},0 ${size / 2},0`}></polyline>
+            </g>
+        );
+        model.cssClasses.forEach(cl => setClass(node, cl, true));
+        return node;
+    }
+
+    protected getSize(model: Readonly<InsertIndicator>): number {
+        return GArgument.getNumber(model, ARG_LENGTH) ?? this.grid?.x ?? 10;
+    }
+}

package/src/utils/gmodel-util.ts

@@ -40,6 +40,7 @@ import {
     isSelected,
     remove
 } from '@eclipse-glsp/sprotty';
+import { ResizeHandleLocation } from '../features';
 
 /**
  * Helper type to represent a filter predicate for {@link GModelElement}s. This is used to retrieve
@@ -253,7 +254,9 @@ export type MoveableElement = GModelElement & Locateable;
 
 export interface Resizable extends BoundsAware, Selectable {}
 
-export interface ResizableModelElement extends GParentElement, Resizable {}
+export interface ResizableModelElement extends GParentElement, Resizable {
+    resizeLocations?: ResizeHandleLocation[];
+}
 
 /**
  * Helper function to translate a given {@link GModelElement} into its corresponding {@link ElementAndBounds} representation.

package/src/views/ggraph-view.tsx

@@ -13,14 +13,14 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Bounds, Dimension, Point, RenderingContext, SGraphImpl, SGraphView, TYPES, Writable } from '@eclipse-glsp/sprotty';
+import { Bounds, Dimension, Point, RenderingContext, SGraphImpl, SGraphView, Writable } from '@eclipse-glsp/sprotty';
 import { inject, injectable, optional } from 'inversify';
 import { VNode } from 'snabbdom';
 import { GridManager, GridStyle } from '../features';
 
 @injectable()
 export class GGraphView extends SGraphView {
-    @inject(TYPES.IGridManager) @optional() protected gridManager?: GridManager;
+    @inject(GridManager) @optional() protected gridManager?: GridManager;
 
     override render(model: Readonly<SGraphImpl>, context: RenderingContext): VNode {
         const graph = super.render(model, context);
@@ -31,7 +31,7 @@ export class GGraphView extends SGraphView {
     }
 
     protected getGridStyle(model: Readonly<SGraphImpl>, context: RenderingContext): GridStyle {
-        if (!this.gridManager?.isGridVisible) {
+        if (context.targetKind === 'hidden' || !this.gridManager?.isGridVisible) {
             return {};
         }
         const bounds = this.getBackgroundBounds(model, context, this.gridManager);

package/src/views/glsp-projection-view.tsx

@@ -25,7 +25,6 @@ import {
     ProjectionParams,
     RenderingContext,
     SGraphImpl,
-    TYPES,
     ViewProjection,
     Writable,
     html,
@@ -45,7 +44,7 @@ const JSX = { createElement: html };
 @injectable()
 export class GLSPProjectionView extends ProjectedViewportView {
     @inject(EdgeRouterRegistry) edgeRouterRegistry: EdgeRouterRegistry;
-    @inject(TYPES.IGridManager) @optional() protected gridManager?: GridManager;
+    @inject(GridManager) @optional() protected gridManager?: GridManager;
 
     override render(model: Readonly<GViewportRootElement>, context: RenderingContext, args?: IViewArgs): VNode {
         const rootNode: VNode = (
@@ -73,7 +72,7 @@ export class GLSPProjectionView extends ProjectedViewportView {
     }
 
     protected getGridStyle(model: Readonly<SGraphImpl>, context: RenderingContext): GridStyle {
-        if (!this.gridManager?.isGridVisible) {
+        if (context.targetKind === 'hidden' || !this.gridManager?.isGridVisible) {
             return {};
         }
         const bounds = this.getBackgroundBounds(model, context, this.gridManager);

package/lib/base/feedback/feeback-emitter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"feeback-emitter.d.ts","sourceRoot":"","sources":["../../../src/base/feedback/feeback-emitter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;kFAckF;AAElF,OAAO,EAAE,MAAM,EAAE,UAAU,EAAW,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEzG;;GAEG;AACH,qBAAa,eAAgB,YAAW,gBAAgB,EAAE,UAAU;IAKpD,SAAS,CAAC,kBAAkB,EAAE,yBAAyB;IAJnE,SAAS,CAAC,eAAe,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAM;IACvD,SAAS,CAAC,cAAc,EAAE,YAAY,EAAE,CAAM;IAC9C,SAAS,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;gBAEhB,kBAAkB,EAAE,yBAAyB;IAEnE;;;;;;OAMG;IACH,GAAG,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI;IAYxD;;;;;;;OAOG;IACH,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAS5B;;OAEG;IACH,KAAK,IAAI,IAAI;IAMb;;OAEG;IACH,MAAM,IAAI,IAAI;IASd;;;OAGG;IACH,OAAO,IAAI,IAAI;IAMf;;;OAGG;IACH,MAAM,IAAI,IAAI;IAMd;;OAEG;IACH,OAAO,IAAI,IAAI;CAKlB"}

package/lib/base/feedback/feeback-emitter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"feeback-emitter.js","sourceRoot":"","sources":["../../../src/base/feedback/feeback-emitter.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;kFAckF;;;AAElF,mDAAoE;AACpE,6EAAyG;AAEzG;;GAEG;AACH,MAAa,eAAe;IAKxB,YAAsB,kBAA6C;QAA7C,uBAAkB,GAAlB,kBAAkB,CAA2B;QAJzD,oBAAe,GAA2B,EAAE,CAAC;QAC7C,mBAAc,GAAmB,EAAE,CAAC;IAGwB,CAAC;IAEvE;;;;;;OAMG;IACH,GAAG,CAAC,MAAe,EAAE,aAA4B;QAC7C,IAAI,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;YAC5B,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,MAAM,GAAG,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC;QACxC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;QACnC,IAAI,aAAa,EAAE,CAAC;YAChB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,aAAa,CAAC;QAC7C,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;;;;;;OAOG;IACH,MAAM,CAAC,MAAc;QACjB,MAAM,GAAG,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACjD,IAAI,GAAG,EAAE,CAAC;YACN,OAAO,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;YACjC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QACpC,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;OAEG;IACH,KAAK;QACD,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;OAEG;IACH,MAAM;QACF,4GAA4G;QAC5G,MAAM,OAAO,GAAG,IAAA,iBAAO,EAAC,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC;QACjD,MAAM,cAAc,GAAG,IAAA,iBAAO,EAAC,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC;QACvD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,CAAC,yCAAY,CAAC,OAAO,CAAC,CAAC,CAAC;QAClI,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;;OAGG;IACH,OAAO;QACH,IAAI,CAAC,kBAAkB,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAChC,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;;OAGG;IACH,MAAM;;QACF,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;QAC/B,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAChC,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;OAEG;IACH,OAAO;QACH,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IAChB,CAAC;CACJ;AA5FD,0CA4FC"}