@eclipse-glsp/client 0.9.0-rc-01 → 0.10.0-next.146a812.165

package/src/features/change-bounds/movement-restrictor.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -13,9 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Point } from '@eclipse-glsp/protocol';
 import { injectable } from 'inversify';
-import { BoundsAware, Point, SModelElement, SNode, SParentElement } from 'sprotty';
-
+import { BoundsAware, SModelElement, SNode, SParentElement } from 'sprotty';
 import { toAbsoluteBounds } from '../../utils/viewpoint-util';
 import { ModifyCSSFeedbackAction } from '../tool-feedback/css-feedback';
 import { isBoundsAwareMoveable, SResizeHandle } from './model';
@@ -25,16 +25,21 @@ export interface IMovementRestrictor {
     cssClasses?: string[];
 }
 
-export function createMovementRestrictionFeedback(element: SModelElement, movementRestrictor: IMovementRestrictor): ModifyCSSFeedbackAction {
+export function createMovementRestrictionFeedback(
+    element: SModelElement,
+    movementRestrictor: IMovementRestrictor
+): ModifyCSSFeedbackAction {
     const elements: SModelElement[] = [element];
     if (element instanceof SParentElement) {
         element.children.filter(child => child instanceof SResizeHandle).forEach(e => elements.push(e));
     }
     return new ModifyCSSFeedbackAction(elements, movementRestrictor.cssClasses);
-
 }
 
-export function removeMovementRestrictionFeedback(element: SModelElement, movementRestrictor: IMovementRestrictor): ModifyCSSFeedbackAction {
+export function removeMovementRestrictionFeedback(
+    element: SModelElement,
+    movementRestrictor: IMovementRestrictor
+): ModifyCSSFeedbackAction {
     const elements: SModelElement[] = [element];
     if (element instanceof SParentElement) {
         element.children.filter(child => child instanceof SResizeHandle).forEach(e => elements.push(e));
@@ -61,8 +66,12 @@ export class NoOverlapMovmentRestrictor implements IMovementRestrictor {
         };
         ghostElement.type = 'Ghost';
         ghostElement.id = element.id;
-        return !Array.from(element.root.index.all().filter(e => e.id !== ghostElement.id && e !== ghostElement.root && (e instanceof SNode))
-            .map(e => e as SModelElement & BoundsAware)).some(e => areOverlapping(e, ghostElement));
+        return !Array.from(
+            element.root.index
+                .all()
+                .filter(e => e.id !== ghostElement.id && e !== ghostElement.root && e instanceof SNode)
+                .map(e => e as SModelElement & BoundsAware)
+        ).some(e => areOverlapping(e, ghostElement));
     }
 }
 
@@ -85,5 +94,4 @@ export function areOverlapping(element1: SModelElement & BoundsAware, element2:
     }
 
     return true;
-
 }

package/src/features/change-bounds/snap.spec.ts

@@ -0,0 +1,89 @@
+/********************************************************************************
+ * Copyright (c) 2022 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 { expect } from 'chai';
+import { SModelElement } from 'sprotty';
+import { GridSnapper, PointPositionUpdater } from './snap';
+
+describe('GridSnapper', () => {
+    it('snap', () => {
+        const element = new SModelElement();
+        const snapper = new GridSnapper();
+        expect(snapper.snap({ x: 0, y: 0 }, element)).to.be.deep.equals({ x: 0, y: 0 });
+        expect(snapper.snap({ x: 4, y: 5 }, element)).to.be.deep.equals({ x: 0, y: 10 });
+        expect(snapper.snap({ x: 8, y: 11 }, element)).to.be.deep.equals({ x: 10, y: 10 });
+        expect(snapper.snap({ x: -7, y: -4 }, element)).to.be.deep.equals({ x: -10, y: -0 });
+    });
+});
+
+describe('PointPositionUpdater', () => {
+    it('updatePosition with no last drag position', () => {
+        const element = new SModelElement();
+        const updater = new PointPositionUpdater();
+        expect(updater.updatePosition(element, { x: 0, y: 0 }, false)).to.be.undefined;
+        expect(updater.updatePosition(element, { x: 0, y: 0 }, true)).to.be.undefined;
+    });
+
+    it('update last position and reset', () => {
+        const updater = new PointPositionUpdater();
+        expect(updater.isLastDragPositionUndefined()).to.be.true;
+        updater.updateLastDragPosition({ x: 0, y: 0 });
+        expect(updater.isLastDragPositionUndefined()).to.be.false;
+        updater.resetPosition();
+        expect(updater.isLastDragPositionUndefined()).to.be.true;
+    });
+
+    it('updatePosition with no snapper', () => {
+        const element = new SModelElement();
+        const updater = new PointPositionUpdater();
+        resetUpdater(updater);
+        expect(updater.updatePosition(element, { x: 0, y: 0 }, false)).to.be.undefined;
+        expect(updater.updatePosition(element, { x: 0, y: 0 }, true)).to.be.undefined;
+
+        resetUpdater(updater);
+        expect(updater.updatePosition(element, { x: 5, y: 3 }, false)).to.be.deep.equals({ x: 5, y: 3 });
+        expect(updater.updatePosition(element, { x: 5, y: 3 }, true)).to.be.undefined;
+        expect(updater.updatePosition(element, { x: 11, y: 6 }, false)).to.be.deep.equals({ x: 6, y: 3 });
+        expect(updater.updatePosition(element, { x: -3, y: 2 }, true)).to.be.deep.equals({ x: -14, y: -4 });
+    });
+
+    it('updatePosition with snapper', () => {
+        const element = new SModelElement();
+        const snapper = new GridSnapper();
+        const updater = new PointPositionUpdater(snapper);
+        resetUpdater(updater);
+        expect(updater.updatePosition(element, { x: 0, y: 0 }, false)).to.be.undefined;
+        expect(updater.updatePosition(element, { x: 0, y: 0 }, true)).to.be.undefined;
+
+        resetUpdater(updater);
+        expect(updater.updatePosition(element, { x: 5, y: 3 }, true)).to.be.deep.equals({ x: 10, y: 0 });
+        expect(updater.updatePosition(element, { x: 5, y: 3 }, true)).to.be.undefined;
+        expect(updater.updatePosition(element, { x: 11, y: 6 }, true)).to.be.deep.equals({ x: 0, y: 10 });
+        expect(updater.updatePosition(element, { x: -3, y: 2 }, true)).to.be.deep.equals({ x: -10, y: -10 });
+
+        // disable snapping (alt key)
+        resetUpdater(updater);
+        expect(updater.updatePosition(element, { x: 5, y: 3 }, false)).to.be.deep.equals({ x: 5, y: 3 });
+        expect(updater.updatePosition(element, { x: 5, y: 3 }, false)).to.be.undefined;
+        expect(updater.updatePosition(element, { x: 11, y: 6 }, false)).to.be.deep.equals({ x: 6, y: 3 });
+        expect(updater.updatePosition(element, { x: -3, y: 2 }, false)).to.be.deep.equals({ x: -14, y: -4 });
+    });
+
+    function resetUpdater(updater: PointPositionUpdater): void {
+        updater.resetPosition();
+        updater.updateLastDragPosition({ x: 0, y: 0 });
+    }
+});

package/src/features/change-bounds/snap.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020 EclipseSource and others.
+ * Copyright (c) 2020-2022 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
@@ -13,8 +13,10 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Point } from '@eclipse-glsp/protocol';
 import { injectable } from 'inversify';
-import { ISnapper, Point, SModelElement } from 'sprotty';
+import { findParentByFeature, ISnapper, isViewport, SModelElement } from 'sprotty';
+import { WriteablePoint } from '../../utils/layout-utils';
 
 @injectable()
 export class GridSnapper implements ISnapper {
@@ -33,3 +35,86 @@ export class GridSnapper implements ISnapper {
         };
     }
 }
+
+/**
+ * This class can be used to calculate the current position, when an element is
+ * moved. This includes node movements, node resizing (resize handle movement)
+ * or edge routing-point movements.
+ *
+ * You can initialize a this class with a optional {@link ISnapper}. If a
+ * snapper is present, the positions will be snapped to the defined grid.
+ */
+export class PointPositionUpdater {
+    protected lastDragPosition?: Point;
+    protected positionDelta: WriteablePoint = { x: 0, y: 0 };
+
+    constructor(protected snapper?: ISnapper) {}
+
+    /**
+     * Init the position with the {@link Point} of your mouse cursor.
+     * This method is normally called in the `mouseDown` event.
+     * @param mousePosition current mouse position e.g `{x: event.pageX, y: event.pageY }`
+     */
+    public updateLastDragPosition(mousePosition: Point): void {
+        this.lastDragPosition = mousePosition;
+    }
+
+    /**
+     * Check if the mouse is currently not in a drag mode.
+     * @returns true if the last drag position is undefined
+     */
+    public isLastDragPositionUndefined(): boolean {
+        return this.lastDragPosition === undefined;
+    }
+
+    /**
+     * Reset the updater for new movements.
+     * This method is normally called in the `mouseUp` event.
+     */
+    public resetPosition(): void {
+        this.lastDragPosition = undefined;
+        this.positionDelta = { x: 0, y: 0 };
+    }
+
+    /**
+     * Calculate the current position of your movement.
+     * This method is normally called in the `mouseMove` event.
+     * @param target node which is moved around
+     * @param mousePosition current mouse position e.g `{x: event.pageX, y: event.pageY }`
+     * @param isSnapEnabled if a snapper is defined you can disable it, e.g when a specific key is pressed `!event.altKey`
+     * @returns current position or undefined if updater has no last drag position initialized
+     */
+    public updatePosition(target: SModelElement, mousePosition: Point, isSnapEnabled: boolean): Point | undefined {
+        if (this.lastDragPosition) {
+            const newDragPosition = mousePosition;
+
+            const viewport = findParentByFeature(target, isViewport);
+            const zoom = viewport?.zoom ?? 1;
+            const dx = (mousePosition.x - this.lastDragPosition.x) / zoom;
+            const dy = (mousePosition.y - this.lastDragPosition.y) / zoom;
+            const deltaToLastPosition = { x: dx, y: dy };
+            this.lastDragPosition = newDragPosition;
+
+            // update position delta with latest delta
+            this.positionDelta.x += deltaToLastPosition.x;
+            this.positionDelta.y += deltaToLastPosition.y;
+
+            // snap our delta and only send update if the position actually changes
+            // otherwise accumulate delta until we do snap to an update
+            const positionUpdate = this.snap(this.positionDelta, target, isSnapEnabled);
+            if (positionUpdate.x === 0 && positionUpdate.y === 0) {
+                return undefined;
+            }
+
+            // we update our position so we update our delta by the snapped position
+            this.positionDelta.x -= positionUpdate.x;
+            this.positionDelta.y -= positionUpdate.y;
+            return positionUpdate;
+        }
+        return undefined;
+    }
+
+    protected snap(position: Point, element: SModelElement, isSnap: boolean): Point {
+        return isSnap && this.snapper ? this.snapper.snap(position, element) : { x: position.x, y: position.y };
+    }
+}

package/src/features/command-palette/server-command-palette-provider.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -13,12 +13,11 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, isSetContextActionsAction, LabeledAction, Point, RequestContextActions } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
-import { Action, ICommandPaletteActionProvider, LabeledAction, Point, SModelElement, TYPES } from 'sprotty';
-
+import { ICommandPaletteActionProvider, SModelElement, TYPES } from 'sprotty';
 import { GLSPActionDispatcher } from '../../base/action-dispatcher';
-import { isSetContextActionsAction, RequestContextActions } from '../../base/actions/context-actions';
-import { EditorContextService } from '../../base/editor-context';
+import { EditorContextService } from '../../base/editor-context-service';
 
 export namespace ServerCommandPalette {
     export const CONTEXT_ID = 'command-palette';
@@ -32,10 +31,13 @@ export class ServerCommandPaletteActionProvider implements ICommandPaletteAction
     @inject(EditorContextService) protected editorContext: EditorContextService;
 
     getActions(_root: Readonly<SModelElement>, text: string, _lastMousePosition?: Point, index?: number): Promise<LabeledAction[]> {
-        const requestAction = new RequestContextActions(ServerCommandPalette.CONTEXT_ID, this.editorContext.get({
-            [ServerCommandPalette.TEXT]: text,
-            [ServerCommandPalette.INDEX]: index ? index : 0
-        }));
+        const requestAction = new RequestContextActions(
+            ServerCommandPalette.CONTEXT_ID,
+            this.editorContext.get({
+                [ServerCommandPalette.TEXT]: text,
+                [ServerCommandPalette.INDEX]: index ? index : 0
+            })
+        );
         return this.actionDispatcher.requestUntil(requestAction).then(response => this.getPaletteActionsFromResponse(response));
     }
 

package/src/features/context-menu/delete-element-context-menu.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020 EclipseSource and others.
+ * Copyright (c) 2020-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -13,11 +13,10 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { DeleteElementOperation } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import { IContextMenuItemProvider, MenuItem, Point, SModelRoot } from 'sprotty';
-
-import { EditorContextService, EditorContextServiceProvider } from '../../base/editor-context';
-import { DeleteElementOperation } from '../../base/operations/operation';
+import { EditorContextService, EditorContextServiceProvider } from '../../base/editor-context-service';
 import { GLSP_TYPES } from '../../base/types';
 
 @injectable()

package/src/features/context-menu/di.config.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -15,18 +15,20 @@
  ********************************************************************************/
 import { ContainerModule } from 'inversify';
 import { ContextMenuProviderRegistry, IContextMenuService, TYPES } from 'sprotty';
-
 import { SelectionServiceAwareContextMenuMouseListener } from './selection-service-aware-context-menu-mouse-listener';
 import { ServerContextMenuItemProvider } from './server-context-menu-provider';
 
 const glspContextMenuModule = new ContainerModule(bind => {
-    bind(TYPES.IContextMenuServiceProvider).toProvider<IContextMenuService>(ctx => () => new Promise<IContextMenuService>((resolve, reject) => {
-        if (ctx.container.isBound(TYPES.IContextMenuService)) {
-            resolve(ctx.container.get<IContextMenuService>(TYPES.IContextMenuService));
-        } else {
-            reject();
-        }
-    }));
+    bind(TYPES.IContextMenuServiceProvider).toProvider<IContextMenuService>(
+        ctx => () =>
+            new Promise<IContextMenuService>((resolve, reject) => {
+                if (ctx.container.isBound(TYPES.IContextMenuService)) {
+                    resolve(ctx.container.get<IContextMenuService>(TYPES.IContextMenuService));
+                } else {
+                    reject();
+                }
+            })
+    );
     bind(TYPES.MouseListener).to(SelectionServiceAwareContextMenuMouseListener);
     bind(TYPES.IContextMenuProviderRegistry).to(ContextMenuProviderRegistry);
     bind(TYPES.IContextMenuItemProvider).to(ServerContextMenuItemProvider);

package/src/features/context-menu/selection-service-aware-context-menu-mouse-listener.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2022 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
@@ -24,7 +24,7 @@ import {
     SModelElement,
     TYPES
 } from 'sprotty';
-
+import { FocusStateChangedAction } from '../../base/actions/focus-change-action';
 import { GLSP_TYPES } from '../../base/types';
 import { SelectionService } from '../select/selection-service';
 
@@ -34,17 +34,47 @@ export class SelectionServiceAwareContextMenuMouseListener extends MouseListener
     @inject(TYPES.IContextMenuProviderRegistry) @optional() protected readonly menuProvider: ContextMenuProviderRegistry;
     @inject(GLSP_TYPES.SelectionService) protected selectionService: SelectionService;
 
-    mouseDown(target: SModelElement, event: MouseEvent): (Action | Promise<Action>)[] {
+    /**
+     * Opens the context menu on right-click.
+     */
+    override mouseDown(target: SModelElement, event: MouseEvent): (Action | Promise<Action>)[] {
         if (event.button === 2 && this.contextMenuService && this.menuProvider) {
-            const mousePosition = { x: event.x, y: event.y };
-            const selectableTarget = findParentByFeature(target, isSelectable);
-            if (selectableTarget) {
-                selectableTarget.selected = true;
-                this.selectionService.updateSelection(target.root, [selectableTarget.id], []);
-            }
-            Promise.all([this.contextMenuService(), this.menuProvider.getItems(target.root, mousePosition)])
-                .then(([menuService, menuItems]) => menuService.show(menuItems, mousePosition));
+            return this.openContextMenu(event, target);
         }
         return [];
     }
+
+    /**
+     * Opens the context menu.
+     *
+     *   - query the element on the click-target
+     *   - select the element
+     *   - query the context menu service and the context menu elements
+     *   - show the context menu
+     *   - send a focus state change to indicate that the diagram becomes inactive, once the context menu is shown
+     *
+     * When the context menu is closed, we focus the diagram element again.
+     */
+    protected openContextMenu(event: MouseEvent, target: SModelElement): Promise<Action>[] {
+        const mousePosition = { x: event.x, y: event.y };
+        const selectableTarget = findParentByFeature(target, isSelectable);
+        if (selectableTarget) {
+            selectableTarget.selected = true;
+            this.selectionService.updateSelection(target.root, [selectableTarget.id], []);
+        }
+
+        const result = Promise.all([this.contextMenuService(), this.menuProvider.getItems(target.root, mousePosition)])
+            .then(([menuService, menuItems]) => menuService.show(menuItems, mousePosition, () => this.focusEventTarget(event)))
+            .then((): Action => new FocusStateChangedAction(false));
+
+        return [result];
+    }
+
+    protected focusEventTarget(event: MouseEvent): void {
+        const targetElement = event.target instanceof SVGElement ? event.target : undefined;
+        const svgParentElement = targetElement?.closest('svg');
+        if (svgParentElement) {
+            svgParentElement.focus();
+        }
+    }
 }

package/src/features/context-menu/server-context-menu-provider.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -13,12 +13,11 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, isSetContextActionsAction, LabeledAction, Point, RequestContextActions } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
-import { Action, IContextMenuItemProvider, isSelected, LabeledAction, Point, SModelElement, TYPES } from 'sprotty';
-
+import { IContextMenuItemProvider, isSelected, SModelElement, TYPES } from 'sprotty';
 import { GLSPActionDispatcher } from '../../base/action-dispatcher';
-import { isSetContextActionsAction, RequestContextActions } from '../../base/actions/context-actions';
-import { EditorContextService } from '../../base/editor-context';
+import { EditorContextService } from '../../base/editor-context-service';
 
 export namespace ServerContextMenu {
     export const CONTEXT_ID = 'context-menu';
@@ -26,12 +25,16 @@ export namespace ServerContextMenu {
 
 @injectable()
 export class ServerContextMenuItemProvider implements IContextMenuItemProvider {
-
     @inject(TYPES.IActionDispatcher) protected actionDispatcher: GLSPActionDispatcher;
     @inject(EditorContextService) protected editorContext: EditorContextService;
 
     getItems(root: Readonly<SModelElement>, lastMousePosition?: Point): Promise<LabeledAction[]> {
-        const selectedElementIds = Array.from(root.index.all().filter(isSelected).map(e => e.id));
+        const selectedElementIds = Array.from(
+            root.index
+                .all()
+                .filter(isSelected)
+                .map(e => e.id)
+        );
         const context = this.editorContext.getWithSelection(selectedElementIds);
         const requestAction = new RequestContextActions(ServerContextMenu.CONTEXT_ID, context);
         return this.actionDispatcher.requestUntil(requestAction).then(response => this.getContextActionsFromResponse(response));

package/src/features/copy-paste/copy-paste-context-menu.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020 EclipseSource and others.
+ * Copyright (c) 2020-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -13,34 +13,23 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, GLSPServerStatusAction, Point, ServerMessageAction } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
-import {
-    Action,
-    IActionDispatcher,
-    IActionHandler,
-    IContextMenuItemProvider,
-    isSelected,
-    MenuItem,
-    Point,
-    SModelRoot,
-    TYPES
-} from 'sprotty/lib';
-
-import { GLSPServerStatusAction, ServerMessageAction } from '../../model-source/glsp-server-status';
+import { IActionDispatcher, IActionHandler, IContextMenuItemProvider, isSelected, MenuItem, SModelRoot, TYPES } from 'sprotty';
 
 export class InvokeCopyAction implements Action {
     static readonly KIND = 'invoke-copy';
-    constructor(public readonly kind = InvokeCopyAction.KIND) { }
+    constructor(public readonly kind = InvokeCopyAction.KIND) {}
 }
 
 export class InvokePasteAction implements Action {
     static readonly KIND = 'invoke-paste';
-    constructor(public readonly kind = InvokePasteAction.KIND) { }
+    constructor(public readonly kind = InvokePasteAction.KIND) {}
 }
 
 export class InvokeCutAction implements Action {
     static readonly KIND = 'invoke-cut';
-    constructor(public readonly kind = InvokeCutAction.KIND) { }
+    constructor(public readonly kind = InvokeCutAction.KIND) {}
 }
 
 @injectable()
@@ -49,21 +38,31 @@ export class InvokeCopyPasteActionHandler implements IActionHandler {
     handle(action: Action): void {
         switch (action.kind) {
             case InvokeCopyAction.KIND:
-                document.execCommand('copy');
+                if (supportsCopy()) {
+                    document.execCommand('copy');
+                } else {
+                    this.notifyUserToUseShortcut('copy');
+                }
                 break;
             case InvokePasteAction.KIND:
-                // in a browser without additional permission we can't invoke the paste command
-                // the user needs to invoke it from the browser, so notify the user about it
-                this.notifyUserToUseShortcut();
+                if (supportsPaste()) {
+                    document.execCommand('paste');
+                } else {
+                    this.notifyUserToUseShortcut('paste');
+                }
                 break;
             case InvokeCutAction.KIND:
-                document.execCommand('cut');
+                if (supportsCut()) {
+                    document.execCommand('cut');
+                } else {
+                    this.notifyUserToUseShortcut('cut');
+                }
                 break;
         }
     }
 
-    protected notifyUserToUseShortcut(): void {
-        const message = 'Please use the browser\'s paste command or shortcut.';
+    protected notifyUserToUseShortcut(operation: string): void {
+        const message = `Please use the browser's ${operation} command or shortcut.`;
         const timeout = 10000;
         const severity = 'WARNING';
         this.dispatcher.dispatchAll([
@@ -86,22 +85,52 @@ export class CopyPasteContextMenuItemProvider implements IContextMenuItemProvide
 
     protected createPasteMenuItem(): MenuItem {
         return {
-            id: 'paste', label: 'Paste', group: 'copy-paste',
-            actions: [new InvokePasteAction()], isEnabled: () => true
+            id: 'paste',
+            label: 'Paste',
+            group: 'copy-paste',
+            actions: [new InvokePasteAction()],
+            isEnabled: () => true
         };
     }
 
     protected createCutMenuItem(hasSelectedElements: boolean): MenuItem {
         return {
-            id: 'cut', label: 'Cut', group: 'copy-paste',
-            actions: [new InvokeCutAction()], isEnabled: () => hasSelectedElements
+            id: 'cut',
+            label: 'Cut',
+            group: 'copy-paste',
+            actions: [new InvokeCutAction()],
+            isEnabled: () => hasSelectedElements
         };
     }
 
     protected createCopyMenuItem(hasSelectedElements: boolean): MenuItem {
         return {
-            id: 'copy', label: 'Copy', group: 'copy-paste',
-            actions: [new InvokeCopyAction()], isEnabled: () => hasSelectedElements
+            id: 'copy',
+            label: 'Copy',
+            group: 'copy-paste',
+            actions: [new InvokeCopyAction()],
+            isEnabled: () => hasSelectedElements
         };
     }
 }
+
+export function supportsCopy(): boolean {
+    return isNative() || document.queryCommandSupported('copy');
+}
+
+export function supportsCut(): boolean {
+    return isNative() || document.queryCommandSupported('cut');
+}
+
+export function supportsPaste(): boolean {
+    const isChrome = userAgent().indexOf('Chrome') >= 0;
+    return isNative() || (!isChrome && document.queryCommandSupported('paste'));
+}
+
+export function isNative(): boolean {
+    return typeof (window as any).process !== 'undefined';
+}
+
+function userAgent(): string {
+    return typeof navigator !== 'undefined' ? navigator.userAgent : '';
+}