@eclipse-glsp/client 2.1.0-next.295 → 2.1.0-next.297

package/src/features/element-template/add-template-element.ts

@@ -0,0 +1,109 @@
+/********************************************************************************
+ * Copyright (c) 2023 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import {
+    Action,
+    CommandExecutionContext,
+    CommandResult,
+    ElementTemplate,
+    GChildElement,
+    GModelElementSchema,
+    TYPES,
+    distinctAdd,
+    remove
+} from '@eclipse-glsp/sprotty';
+import { inject, injectable } from 'inversify';
+import { GLSPActionDispatcher } from '../../base/action-dispatcher';
+import { FeedbackCommand } from '../../base/feedback/feedback-command';
+import { isNotUndefined } from '../../utils/gmodel-util';
+import { LocalRequestBoundsAction } from '../bounds/local-bounds';
+
+export interface AddTemplateElementsAction extends Action {
+    kind: typeof AddTemplateElementsAction.KIND;
+    templates: ElementTemplate[];
+    addClasses?: string[];
+    removeClasses?: string[];
+}
+
+export namespace AddTemplateElementsAction {
+    export const KIND = 'addTemplateElements';
+
+    export function create(options: Omit<AddTemplateElementsAction, 'kind'>): AddTemplateElementsAction {
+        return {
+            kind: KIND,
+            ...options
+        };
+    }
+}
+
+export function getTemplateElementId(template: ElementTemplate): string {
+    return typeof template === 'string' ? `${template}_feedback` : template.id;
+}
+
+@injectable()
+export class AddTemplateElementsFeedbackCommand extends FeedbackCommand {
+    static readonly KIND = AddTemplateElementsAction.KIND;
+
+    @inject(TYPES.IActionDispatcher) protected actionDispatcher: GLSPActionDispatcher;
+
+    constructor(@inject(TYPES.Action) readonly action: AddTemplateElementsAction) {
+        super();
+    }
+
+    override execute(context: CommandExecutionContext): CommandResult {
+        this.action.templates
+            .map(template => templateToSchema(template, context))
+            .filter(isNotUndefined)
+            .map(schema => context.modelFactory.createElement(schema))
+            .map(element => this.applyRootCssClasses(element, this.action.addClasses, this.action.removeClasses))
+            .forEach(templateElement => context.root.add(templateElement));
+        return LocalRequestBoundsAction.fromCommand(context, this.actionDispatcher, this.action);
+    }
+
+    protected applyRootCssClasses(element: GChildElement, addClasses?: string[], removeClasses?: string[]): GChildElement {
+        element.cssClasses = modifyCssClasses(element.cssClasses, addClasses, removeClasses);
+        return element;
+    }
+}
+
+export function templateToSchema(template: ElementTemplate, context: CommandExecutionContext): GModelElementSchema | undefined {
+    if (typeof template === 'string') {
+        const element = context.root.index.getById(template);
+        const schema = element ? context.modelFactory.createSchema(element) : undefined;
+        if (schema) {
+            adaptSchemaIds(schema);
+        }
+        return schema;
+    }
+    return template;
+}
+
+function adaptSchemaIds(schema: GModelElementSchema): GModelElementSchema {
+    schema.id = getTemplateElementId(schema.id);
+    schema.children?.forEach(child => adaptSchemaIds(child));
+    return schema;
+}
+
+function modifyCssClasses(source?: string[], toAdd?: string[], toRemove?: string[]): string[] {
+    const classes = source ?? [];
+    if (toAdd) {
+        distinctAdd(classes, ...toAdd);
+    }
+    if (toRemove) {
+        remove(classes, ...toRemove);
+    }
+    return classes;
+}

package/src/features/element-template/element-template-module.ts

@@ -0,0 +1,24 @@
+/********************************************************************************
+ * 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, configureCommand } from '@eclipse-glsp/sprotty';
+import { AddTemplateElementsFeedbackCommand } from './add-template-element';
+import { RemoveTemplateElementsFeedbackCommand } from './remove-template-element';
+
+export const elementTemplateModule = new FeatureModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+    configureCommand(context, AddTemplateElementsFeedbackCommand);
+    configureCommand(context, RemoveTemplateElementsFeedbackCommand);
+});

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

@@ -0,0 +1,110 @@
+/********************************************************************************
+ * Copyright (c) 2023 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { Action, Disposable, GModelElement, ISnapper, MoveAction, Point, isBoundsAware, isMoveable } from '@eclipse-glsp/sprotty';
+import { injectable } from 'inversify';
+import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
+import { CSS_HIDDEN, ModifyCSSFeedbackAction } from '../../base/feedback/css-feedback';
+import { IFeedbackEmitter } from '../../base/feedback/feedback-action-dispatcher';
+import { Tool } from '../../base/tool-manager/tool';
+import { getAbsolutePosition } from '../../utils/viewpoint-util';
+import {
+    IMovementRestrictor,
+    createMovementRestrictionFeedback,
+    removeMovementRestrictionFeedback
+} from '../change-bounds/movement-restrictor';
+
+export interface PositioningTool extends Tool {
+    readonly snapper?: ISnapper;
+    readonly movementRestrictor?: IMovementRestrictor;
+
+    registerFeedback(feedbackActions: Action[], feedbackEmitter?: IFeedbackEmitter, cleanupActions?: Action[]): Disposable;
+    deregisterFeedback(feedbackEmitter?: IFeedbackEmitter, cleanupActions?: Action[]): void;
+}
+
+@injectable()
+export class MouseTrackingElementPositionListener extends DragAwareMouseListener {
+    element?: GModelElement;
+    currentPosition?: Point;
+
+    constructor(
+        protected elementId: string,
+        protected tool: PositioningTool,
+        protected cursorPosition: 'top-left' | 'middle' = 'top-left'
+    ) {
+        super();
+    }
+
+    override mouseMove(target: GModelElement, event: MouseEvent): Action[] {
+        super.mouseMove(target, event);
+        const element = target.root.index.getById(this.elementId);
+        this.element = element;
+        if (!element) {
+            return [];
+        }
+
+        let newPosition = getAbsolutePosition(target, event);
+        if (this.cursorPosition === 'middle' && isBoundsAware(element)) {
+            newPosition = Point.subtract(newPosition, { x: element.bounds.width / 2, y: element.bounds.height / 2 });
+        }
+        newPosition = this.snap(newPosition, element);
+
+        const finished = false;
+        if (isMoveable(element)) {
+            newPosition = this.validateMove(this.currentPosition ?? newPosition, newPosition, element, finished);
+        }
+        this.currentPosition = newPosition;
+        const moveGhostElement = MoveAction.create(
+            [
+                {
+                    elementId: element.id,
+                    toPosition: newPosition
+                }
+            ],
+            { animate: false, finished }
+        );
+        this.tool.registerFeedback([moveGhostElement], this);
+        return element.cssClasses?.includes(CSS_HIDDEN)
+            ? [ModifyCSSFeedbackAction.create({ elements: [element.id], remove: [CSS_HIDDEN] })]
+            : [];
+    }
+
+    protected snap(position: Point, element: GModelElement, isSnap = true): Point {
+        if (isSnap && this.tool.snapper) {
+            return this.tool.snapper.snap(position, element);
+        } else {
+            return position;
+        }
+    }
+
+    protected validateMove(startPosition: Point, toPosition: Point, element: GModelElement, isFinished: boolean): Point {
+        let newPosition = toPosition;
+        if (this.tool.movementRestrictor) {
+            const valid = this.tool.movementRestrictor.validate(element, toPosition);
+            let action;
+            if (!valid) {
+                action = createMovementRestrictionFeedback(element, this.tool.movementRestrictor);
+                if (isFinished) {
+                    newPosition = startPosition;
+                }
+            } else {
+                action = removeMovementRestrictionFeedback(element, this.tool.movementRestrictor);
+            }
+            this.tool.registerFeedback([action], this, [removeMovementRestrictionFeedback(element, this.tool.movementRestrictor)]);
+        }
+        return newPosition;
+    }
+}

package/src/features/element-template/remove-template-element.ts

@@ -0,0 +1,56 @@
+/********************************************************************************
+ * Copyright (c) 2023 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { Action, CommandExecutionContext, CommandReturn, ElementTemplate, GChildElement, TYPES } from '@eclipse-glsp/sprotty';
+import { inject, injectable } from 'inversify';
+import { FeedbackCommand } from '../../base/feedback/feedback-command';
+import { getTemplateElementId } from './add-template-element';
+
+export interface RemoveTemplateElementsAction extends Action {
+    kind: typeof RemoveTemplateElementsAction.KIND;
+    templates: ElementTemplate[];
+}
+
+export namespace RemoveTemplateElementsAction {
+    export const KIND = 'removeTemplateElements';
+
+    export function create(options: Omit<RemoveTemplateElementsAction, 'kind'>): RemoveTemplateElementsAction {
+        return {
+            kind: KIND,
+            ...options
+        };
+    }
+}
+
+@injectable()
+export class RemoveTemplateElementsFeedbackCommand extends FeedbackCommand {
+    static readonly KIND = RemoveTemplateElementsAction.KIND;
+
+    constructor(@inject(TYPES.Action) readonly action: RemoveTemplateElementsAction) {
+        super();
+    }
+
+    execute(context: CommandExecutionContext): CommandReturn {
+        const index = context.root.index;
+        for (const template of this.action.templates) {
+            const element = index.getById(getTemplateElementId(template));
+            if (element && element instanceof GChildElement) {
+                element.parent.remove(element);
+            }
+        }
+        return context.root;
+    }
+}

package/src/features/tool-palette/tool-palette-module.ts

@@ -13,7 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { bindAsService, configureActionHandler, FeatureModule, TYPES } from '@eclipse-glsp/sprotty';
+import { bindAsService, configureActionHandler, FeatureModule, SetModelAction, TYPES, UpdateModelAction } from '@eclipse-glsp/sprotty';
 import '../../../css/tool-palette.css';
 import { EnableDefaultToolsAction } from '../../base/tool-manager/tool';
 import { ToolPalette } from './tool-palette';
@@ -22,4 +22,6 @@ export const toolPaletteModule = new FeatureModule((bind, _unbind, isBound, _reb
     bindAsService(bind, TYPES.IUIExtension, ToolPalette);
     bind(TYPES.IDiagramStartup).toService(ToolPalette);
     configureActionHandler({ bind, isBound }, EnableDefaultToolsAction.KIND, ToolPalette);
+    configureActionHandler({ bind, isBound }, UpdateModelAction.KIND, ToolPalette);
+    configureActionHandler({ bind, isBound }, SetModelAction.KIND, ToolPalette);
 });

package/src/features/tool-palette/tool-palette.ts

@@ -13,22 +13,25 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { inject, injectable, postConstruct } from 'inversify';
 import {
     AbstractUIExtension,
     Action,
+    GModelRoot,
     IActionHandler,
     ICommand,
     MarkersReason,
     PaletteItem,
     RequestContextActions,
     RequestMarkersAction,
-    GModelRoot,
     SetContextActions,
+    SetModelAction,
     SetUIExtensionVisibilityAction,
+    TriggerNodeCreationAction,
+    UpdateModelAction,
     codiconCSSClasses,
     matchesKeystroke
 } from '@eclipse-glsp/sprotty';
+import { inject, injectable, postConstruct } from 'inversify';
 import { GLSPActionDispatcher } from '../../base/action-dispatcher';
 import { EditorContextService, IEditModeListener } from '../../base/editor-context-service';
 import { FocusTracker } from '../../base/focus/focus-tracker';
@@ -73,6 +76,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
 
     protected paletteItems: PaletteItem[];
     protected paletteItemsCopy: PaletteItem[] = [];
+    protected dynamic = false;
     protected bodyDiv?: HTMLElement;
     protected lastActiveButton?: HTMLElement;
     protected defaultToolsButton: HTMLElement;
@@ -333,11 +337,15 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         }
     }
 
-    handle(action: EnableDefaultToolsAction): ICommand | Action | void {
+    handle(action: Action): ICommand | Action | void {
         this.changeActiveButton();
-        if (this.focusTracker.hasFocus) {
-            // if focus was deliberately taken do not restore focus to the palette
-            this.focusTracker.diagramElement?.focus();
+        if (UpdateModelAction.is(action) || SetModelAction.is(action)) {
+            this.reloadPaletteBody();
+        } else if (EnableDefaultToolsAction.is(action)) {
+            if (this.focusTracker.hasFocus) {
+                // if focus was deliberately taken do not restore focus to the palette
+                this.focusTracker.diagramElement?.focus();
+            }
         }
     }
 
@@ -360,11 +368,6 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         }
     }
 
-    protected handleSetContextActions(action: SetContextActions): void {
-        this.paletteItems = action.actions.map(e => e as PaletteItem);
-        this.createBody();
-    }
-
     protected requestFilterUpdate(filter: string): void {
         // Initialize the copy if it's empty
         if (this.paletteItemsCopy.length === 0) {
@@ -395,6 +398,17 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
     }
 
     async preRequestModel(): Promise<void> {
+        await this.setPaletteItems();
+        if (!this.editorContext.isReadonly) {
+            this.show(this.editorContext.modelRoot);
+        }
+    }
+
+    async postRequestModel(): Promise<void> {
+        this.reloadPaletteBody();
+    }
+
+    protected async setPaletteItems(): Promise<void> {
         const requestAction = RequestContextActions.create({
             contextId: ToolPalette.ID,
             editorContext: {
@@ -402,9 +416,23 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
             }
         });
         const response = await this.actionDispatcher.request<SetContextActions>(requestAction);
-        this.paletteItems = response.actions.map(e => e as PaletteItem);
-        if (!this.editorContext.isReadonly) {
-            this.show(this.editorContext.modelRoot);
+        this.paletteItems = response.actions.map(action => action as PaletteItem);
+        this.dynamic = this.paletteItems.some(item => this.hasDynamicAction(item));
+    }
+
+    protected hasDynamicAction(item: PaletteItem): boolean {
+        const dynamic = !!item.actions.find(action => TriggerNodeCreationAction.is(action) && action.ghostElement?.dynamic);
+        if (dynamic) {
+            return dynamic;
+        }
+        return item.children?.some(child => this.hasDynamicAction(child)) || false;
+    }
+
+    protected async reloadPaletteBody(): Promise<void> {
+        if (this.dynamic) {
+            await this.setPaletteItems();
+            this.paletteItemsCopy = [];
+            this.requestFilterUpdate(this.searchField.value);
         }
     }
 }

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

@@ -28,15 +28,14 @@ import {
     ElementAndBounds,
     ElementAndRoutingPoints,
     GChildElement,
-    ISnapper,
-    MouseListener,
-    Operation,
-    Point,
     GConnectableElement,
     GModelElement,
     GModelRoot,
     GParentElement,
-    SetBoundsAction,
+    ISnapper,
+    MouseListener,
+    Operation,
+    Point,
     TYPES,
     findParentByFeature,
     isSelected
@@ -45,13 +44,14 @@ import { DragAwareMouseListener } from '../../../base/drag-aware-mouse-listener'
 import { CursorCSS, applyCssClasses, cursorFeedbackAction, deleteCssClasses } from '../../../base/feedback/css-feedback';
 import { ISelectionListener, SelectionService } from '../../../base/selection-service';
 import { PointPositionUpdater } from '../../../features/change-bounds/snap';
-import { isValidMove, isValidSize } from '../../../utils/layout-utils';
 import {
     calcElementAndRoutingPoints,
     forEachElement,
     isNonRoutableSelectedMovableBoundsAware,
     toElementAndBounds
 } from '../../../utils/gmodel-util';
+import { isValidMove, isValidSize } from '../../../utils/layout-utils';
+import { SetBoundsFeedbackAction } from '../../bounds/set-bounds-feedback-command';
 import { Resizable, ResizeHandleLocation, SResizeHandle, isBoundsAwareMoveable, isResizable } from '../../change-bounds/model';
 import {
     IMovementRestrictor,
@@ -335,7 +335,7 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements ISel
             if (this.initialBounds && this.activeResizeHandle && resetBounds) {
                 // we only reset the bounds if an active resize operation was cancelled due to the tool being disabled
                 resetFeedback.push(
-                    SetBoundsAction.create([
+                    SetBoundsFeedbackAction.create([
                         {
                             elementId: this.activeResizeElement.id,
                             newPosition: this.initialBounds,
@@ -424,7 +424,9 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements ISel
             if (this.tool.movementRestrictor) {
                 actions.push(removeMovementRestrictionFeedback(element, this.tool.movementRestrictor));
             }
-            actions.push(SetBoundsAction.create([{ elementId: element.id, newPosition: this.initialBounds, newSize: this.initialBounds }]));
+            actions.push(
+                SetBoundsFeedbackAction.create([{ elementId: element.id, newPosition: this.initialBounds, newSize: this.initialBounds }])
+            );
             return actions;
         }
         return [];
@@ -446,12 +448,12 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements ISel
             if (this.tool.movementRestrictor) {
                 result.push(removeMovementRestrictionFeedback(element, this.tool.movementRestrictor));
             }
-            result.push(SetBoundsAction.create([{ elementId: element.id, newPosition, newSize }]));
+            result.push(SetBoundsFeedbackAction.create([{ elementId: element.id, newPosition, newSize }]));
         } else if (this.isValidSize(element, newSize)) {
             if (this.tool.movementRestrictor) {
                 result.push(createMovementRestrictionFeedback(element, this.tool.movementRestrictor));
             }
-            result.push(SetBoundsAction.create([{ elementId: element.id, newPosition, newSize }]));
+            result.push(SetBoundsFeedbackAction.create([{ elementId: element.id, newPosition, newSize }]));
         }
 
         return result;

package/src/features/tools/change-bounds/view.tsx

@@ -13,9 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { IView, Point, RenderingContext, setAttr, svg } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
-import { IView, Point, RenderingContext, setAttr, svg } from '@eclipse-glsp/sprotty';
 import { ResizeHandleLocation, SResizeHandle, isResizable } from '../../change-bounds/model';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

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

@@ -14,10 +14,14 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { FeatureModule, TYPES, TriggerNodeCreationAction, bindAsService, configureActionHandler } from '@eclipse-glsp/sprotty';
+import { elementTemplateModule } from '../../element-template/element-template-module';
 import { NodeCreationTool } from './node-creation-tool';
 
-export const nodeCreationToolModule = new FeatureModule((bind, unbind, isBound, rebind) => {
-    const context = { bind, unbind, isBound, rebind };
-    bindAsService(context, TYPES.ITool, NodeCreationTool);
-    configureActionHandler(context, TriggerNodeCreationAction.KIND, NodeCreationTool);
-});
+export const nodeCreationToolModule = new FeatureModule(
+    (bind, unbind, isBound, rebind) => {
+        const context = { bind, unbind, isBound, rebind };
+        bindAsService(context, TYPES.ITool, NodeCreationTool);
+        configureActionHandler(context, TriggerNodeCreationAction.KIND, NodeCreationTool);
+    },
+    { requires: elementTemplateModule }
+);

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

@@ -13,40 +13,61 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { inject, injectable, optional } from 'inversify';
 import {
     Action,
     CreateNodeOperation,
-    ISnapper,
     GModelElement,
     GNode,
+    ISnapper,
+    Point,
     TYPES,
     TriggerNodeCreationAction,
     findParentByFeature,
     isCtrlOrCmd
 } from '@eclipse-glsp/sprotty';
+import { inject, injectable, optional } from 'inversify';
+import '../../../../css/ghost-element.css';
 import { DragAwareMouseListener } from '../../../base/drag-aware-mouse-listener';
-import { CursorCSS, cursorFeedbackAction } from '../../../base/feedback/css-feedback';
+import { CSS_GHOST_ELEMENT, CSS_HIDDEN, CursorCSS, cursorFeedbackAction } from '../../../base/feedback/css-feedback';
 import { EnableDefaultToolsAction } from '../../../base/tool-manager/tool';
 import { getAbsolutePosition } from '../../../utils/viewpoint-util';
+import { IMovementRestrictor } from '../../change-bounds/movement-restrictor';
+import { AddTemplateElementsAction, getTemplateElementId } from '../../element-template/add-template-element';
+import { MouseTrackingElementPositionListener, PositioningTool } from '../../element-template/mouse-tracking-element-position-listener';
+import { RemoveTemplateElementsAction } from '../../element-template/remove-template-element';
 import { Containable, isContainable } from '../../hints/model';
 import { BaseCreationTool } from '../base-tools';
 
 @injectable()
-export class NodeCreationTool extends BaseCreationTool<TriggerNodeCreationAction> {
+export class NodeCreationTool extends BaseCreationTool<TriggerNodeCreationAction> implements PositioningTool {
     static ID = 'tool_create_node';
 
     protected isTriggerAction = TriggerNodeCreationAction.is;
 
     @inject(TYPES.ISnapper) @optional() readonly snapper?: ISnapper;
+    @inject(TYPES.IMovementRestrictor) @optional() readonly movementRestrictor?: IMovementRestrictor;
 
     get id(): string {
         return NodeCreationTool.ID;
     }
 
     doEnable(): void {
+        let trackingListener: MouseTrackingElementPositionListener | undefined;
+        const ghostElement = this.triggerAction.ghostElement;
+        if (ghostElement) {
+            trackingListener = new MouseTrackingElementPositionListener(getTemplateElementId(ghostElement.template), this, 'middle');
+            this.toDisposeOnDisable.push(
+                this.registerFeedback(
+                    [AddTemplateElementsAction.create({ templates: [ghostElement.template], addClasses: [CSS_HIDDEN, CSS_GHOST_ELEMENT] })],
+                    ghostElement,
+                    [RemoveTemplateElementsAction.create({ templates: [ghostElement.template] })]
+                ),
+                this.mouseTool.registerListener(trackingListener)
+            );
+        }
+
         this.toDisposeOnDisable.push(
-            this.mouseTool.registerListener(new NodeCreationToolMouseListener(this.triggerAction, this)),
+            this.mouseTool.registerListener(new NodeCreationToolMouseListener(this.triggerAction, this, trackingListener)),
             this.registerFeedback([cursorFeedbackAction(CursorCSS.NODE_CREATION)], this, [cursorFeedbackAction()])
         );
     }
@@ -56,7 +77,11 @@ export class NodeCreationTool extends BaseCreationTool<TriggerNodeCreationAction
 export class NodeCreationToolMouseListener extends DragAwareMouseListener {
     protected container?: GModelElement & Containable;
 
-    constructor(protected triggerAction: TriggerNodeCreationAction, protected tool: NodeCreationTool) {
+    constructor(
+        protected triggerAction: TriggerNodeCreationAction,
+        protected tool: NodeCreationTool,
+        protected trackingListener?: MouseTrackingElementPositionListener
+    ) {
         super();
     }
 
@@ -76,21 +101,34 @@ export class NodeCreationToolMouseListener extends DragAwareMouseListener {
 
         if (this.creationAllowed(this.elementTypeId)) {
             const containerId = this.container ? this.container.id : undefined;
-            let location = getAbsolutePosition(target, event);
-            if (this.tool.snapper) {
-                // Create a 0-bounds proxy element for snapping
-                const elementProxy = new GNode();
-                elementProxy.size = { width: 0, height: 0 };
-                location = this.tool.snapper.snap(location, elementProxy);
-            }
+            const location = this.getInsertPosition(target, event);
             result.push(CreateNodeOperation.create(this.elementTypeId, { location, containerId, args: this.triggerAction.args }));
             if (!isCtrlOrCmd(event)) {
                 result.push(EnableDefaultToolsAction.create());
+            } else {
+                this.tool.deregisterFeedback(this);
             }
         }
         return result;
     }
 
+    protected getInsertPosition(target: GModelElement, event: MouseEvent): Point {
+        if (this.trackingListener) {
+            const trackedPosition = this.trackingListener.currentPosition;
+            if (trackedPosition) {
+                return trackedPosition;
+            }
+        }
+        let location = getAbsolutePosition(target, event);
+        if (this.tool.snapper) {
+            // Create a 0-bounds proxy element for snapping
+            const elementProxy = new GNode();
+            elementProxy.size = { width: 0, height: 0 };
+            location = this.tool.snapper.snap(location, elementProxy);
+        }
+        return location;
+    }
+
     override mouseOver(target: GModelElement, event: MouseEvent): Action[] {
         const currentContainer = findParentByFeature(target, isContainable);
         if (!this.container || currentContainer !== this.container) {