@eclipse-glsp/client 0.9.0-next.c9ea4e00 → 0.9.0-next.d3c64530

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

@@ -13,9 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, Point } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import {
-    Action,
     add,
     AnchorComputerRegistry,
     center,
@@ -28,7 +28,6 @@ import {
     isConnectable,
     MouseListener,
     MoveAction,
-    Point,
     PolylineEdgeRouter,
     SChildElement,
     SConnectableElement,
@@ -39,7 +38,6 @@ import {
     SRoutableElement,
     TYPES
 } from 'sprotty';
-
 import { isRoutable } from '../../utils/smodel-util';
 import { getAbsolutePosition, toAbsoluteBounds, toAbsolutePosition } from '../../utils/viewpoint-util';
 import { FeedbackCommand } from './model';

package/src/features/tool-feedback/css-feedback.ts

@@ -13,9 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, isStringArray } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
-import { Action, CommandExecutionContext, SModelElement, SModelRoot, TYPES } from 'sprotty';
-import { isStringArray } from '../../utils/array-utils';
+import { CommandExecutionContext, SModelElement, SModelRoot, TYPES } from 'sprotty';
 import { addCssClasses, removeCssClasses } from '../../utils/smodel-util';
 import { FeedbackCommand } from './model';
 

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

@@ -13,10 +13,10 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, Point } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import { VNode } from 'snabbdom';
 import {
-    Action,
     add,
     AnchorComputerRegistry,
     center,
@@ -33,7 +33,6 @@ import {
     isViewport,
     MouseListener,
     MoveAction,
-    Point,
     PolylineEdgeRouter,
     SConnectableElement,
     SModelElement,
@@ -43,7 +42,6 @@ import {
     SwitchEditModeCommand,
     TYPES
 } from 'sprotty';
-
 import { isNotUndefined, isRoutable, isRoutingHandle } from '../../utils/smodel-util';
 import { getAbsolutePosition, toAbsoluteBounds } from '../../utils/viewpoint-util';
 import { addReconnectHandles, removeReconnectHandles } from '../reconnect/model';

package/src/features/tool-feedback/feedback-action-dispatcher.ts

@@ -13,8 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
-import { Action, IActionDispatcher, ILogger, TYPES } from 'sprotty';
+import { IActionDispatcher, ILogger, TYPES } from 'sprotty';
 
 export interface IFeedbackEmitter {}
 

package/src/features/tool-feedback/marquee-tool-feedback.ts

@@ -13,20 +13,18 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, Point } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import {
-    Action,
     AnchorComputerRegistry,
     CommandExecutionContext,
     CommandReturn,
     MouseListener,
-    Point,
     SChildElement,
     SModelElement,
     SModelRoot,
     TYPES
 } from 'sprotty';
-
 import { FeedbackCommand } from './model';
 
 export class DrawMarqueeAction implements Action {

package/src/features/tool-feedback/view.tsx

@@ -13,10 +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 { VNode } from 'snabbdom';
-import { IView, ORIGIN_POINT, Point, RenderingContext, setAttr, SModelElement, svg } from 'sprotty';
-
+import { IView, ORIGIN_POINT, RenderingContext, setAttr, SModelElement, svg } from 'sprotty';
 import { isResizable, ResizeHandleLocation, SResizeHandle } from '../change-bounds/model';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

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

@@ -13,11 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import '../../../css/tool-palette.css';
-
 import { ContainerModule } from 'inversify';
 import { configureActionHandler, EnableDefaultToolsAction, TYPES } from 'sprotty';
-
+import '../../../css/tool-palette.css';
 import { EnableToolPaletteAction, ToolPalette } from './tool-palette';
 
 const toolPaletteModule = new ContainerModule((bind, _unbind, isBound, rebind) => {

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

@@ -13,9 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { isLabeledAction, LabeledAction } from 'sprotty';
-
-import { isTriggerElementTypeCreationAction, TriggerElementCreationAction } from '../../base/operations/operation';
+import { isLabeledAction, isTriggerElementTypeCreationAction, LabeledAction, TriggerElementCreationAction } from '@eclipse-glsp/protocol';
 
 export interface PaletteItem extends LabeledAction {
     readonly id: string;

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

@@ -13,6 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { isSetContextActionsAction, RequestContextActions, RequestMarkersAction, SetContextActions } from '@eclipse-glsp/protocol';
 import { inject, injectable, postConstruct } from 'inversify';
 import {
     AbstractUIExtension,
@@ -26,20 +27,18 @@ import {
     SModelRoot,
     TYPES
 } from 'sprotty';
+import { codiconCSSClasses } from 'sprotty/lib/utils/codicon';
 import { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
-
 import { GLSPActionDispatcher } from '../../base/action-dispatcher';
-import { isSetContextActionsAction, RequestContextActions, SetContextActions } from '../../base/actions/context-actions';
-import { EditModeListener, EditorContextService } from '../../base/editor-context';
+import { EditModeListener, EditorContextService } from '../../base/editor-context-service';
 import { MouseDeleteTool } from '../tools/delete-tool';
 import { MarqueeMouseTool } from '../tools/marquee-mouse-tool';
-import { RequestMarkersAction } from '../validation/validate';
 import { PaletteItem } from './palette-item';
 
 const CLICKED_CSS_CLASS = 'clicked';
-const SEARCH_ICON = 'fa-search';
-const PALETTE_ICON = 'fa-palette';
-const CHEVRON_DOWN = 'fa-chevron-down';
+const SEARCH_ICON_ID = 'search';
+const PALETTE_ICON_ID = 'symbol-color';
+const CHEVRON_DOWN_ICON_ID = 'chevron-right';
 const PALETTE_HEIGHT = '500px';
 
 @injectable()
@@ -101,7 +100,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         this.containerElement.classList.add('collapsible-palette');
         if (baseDiv) {
             const insertedDiv = baseDiv.insertBefore(minPaletteDiv, baseDiv.firstChild);
-            const minimizeIcon = createIcon(['fas', CHEVRON_DOWN]);
+            const minimizeIcon = createIcon(CHEVRON_DOWN_ICON_ID);
             this.updateMinimizePaletteButtonTooltip(minPaletteDiv);
             minimizeIcon.onclick = _event => {
                 if (this.isPaletteMaximized()) {
@@ -110,10 +109,8 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
                     this.containerElement.style.maxHeight = PALETTE_HEIGHT;
                 }
                 this.updateMinimizePaletteButtonTooltip(minPaletteDiv);
-                changeCSSClass(minimizeIcon, PALETTE_ICON);
-                changeCSSClass(minimizeIcon, 'fa');
-                changeCSSClass(minimizeIcon, 'fas');
-                changeCSSClass(minimizeIcon, CHEVRON_DOWN);
+                changeCodiconClass(minimizeIcon, PALETTE_ICON_ID);
+                changeCodiconClass(minimizeIcon, CHEVRON_DOWN_ICON_ID);
             };
             insertedDiv.appendChild(minimizeIcon);
         }
@@ -192,7 +189,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
     }
 
     protected createDefaultToolButton(): HTMLElement {
-        const button = createIcon(['fas', 'fa-mouse-pointer', 'fa-xs', 'clicked']);
+        const button = createIcon('inspect');
         button.id = 'btn_default_tools';
         button.title = 'Enable selection tool';
         button.onclick = this.onClickStaticToolButton(this.defaultToolsButton);
@@ -200,21 +197,21 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
     }
 
     protected createMouseDeleteToolButton(): HTMLElement {
-        const deleteToolButton = createIcon(['fas', 'fa-eraser', 'fa-xs']);
+        const deleteToolButton = createIcon('chrome-close');
         deleteToolButton.title = 'Enable deletion tool';
         deleteToolButton.onclick = this.onClickStaticToolButton(deleteToolButton, MouseDeleteTool.ID);
         return deleteToolButton;
     }
 
     protected createMarqueeToolButton(): HTMLElement {
-        const marqueeToolButton = createIcon(['far', 'fa-object-group', 'fa-xs']);
+        const marqueeToolButton = createIcon('screen-full');
         marqueeToolButton.title = 'Enable marquee tool';
         marqueeToolButton.onclick = this.onClickStaticToolButton(marqueeToolButton, MarqueeMouseTool.ID);
         return marqueeToolButton;
     }
 
     protected createValidateButton(): HTMLElement {
-        const validateActionButton = createIcon(['fas', 'fa-check-square', 'fa-xs']);
+        const validateActionButton = createIcon('pass');
         validateActionButton.title = 'Validate model';
         validateActionButton.onclick = _event => {
             const modelIds: string[] = [this.modelRootId];
@@ -224,15 +221,15 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
     }
 
     protected createSearchButton(): HTMLElement {
-        const searchIcon = createIcon(['fas', SEARCH_ICON, 'state-icon', 'fa-xs']);
+        const searchIcon = createIcon(SEARCH_ICON_ID);
         searchIcon.onclick = _ev => {
             const searchField = document.getElementById(this.containerElement.id + '_search_field');
             if (searchField) {
-                if (searchField.style.display === 'inline') {
-                    searchField.style.display = 'none';
-                } else {
-                    searchField.style.display = 'inline';
+                if (searchField.style.display === 'none') {
+                    searchField.style.display = '';
                     searchField.focus();
+                } else {
+                    searchField.style.display = 'none';
                 }
             }
         };
@@ -256,7 +253,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
     protected createHeaderTitle(): HTMLElement {
         const header = document.createElement('div');
         header.classList.add('header-icon');
-        header.appendChild(createIcon(['fa', 'fa-palette']));
+        header.appendChild(createIcon(PALETTE_ICON_ID));
         header.insertAdjacentText('beforeend', 'Palette');
         return header;
     }
@@ -265,7 +262,10 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         const button = document.createElement('div');
         button.tabIndex = index;
         button.classList.add('tool-button');
-        button.innerHTML = item.label;
+        if (item.icon) {
+            button.appendChild(createIcon(item.icon));
+        }
+        button.insertAdjacentText('beforeend', item.label);
         button.onclick = this.onClickCreateToolButton(button, item);
         button.onkeydown = ev => this.clearToolOnEscape(ev);
         return button;
@@ -382,9 +382,9 @@ export function compare(a: PaletteItem, b: PaletteItem): number {
     return a.label.localeCompare(b.label);
 }
 
-export function createIcon(cssClasses: string[]): HTMLElement {
+export function createIcon(codiconId: string): HTMLElement {
     const icon = document.createElement('i');
-    icon.classList.add(...cssClasses);
+    icon.classList.add(...codiconCSSClasses(codiconId));
     return icon;
 }
 
@@ -395,7 +395,7 @@ export function createToolGroup(item: PaletteItem): HTMLElement {
     const header = document.createElement('div');
     header.classList.add('group-header');
     if (item.icon) {
-        header.appendChild(createIcon(['fas', item.icon]));
+        header.appendChild(createIcon(item.icon));
     }
     header.insertAdjacentText('beforeend', item.label);
     header.ondblclick = _ev => {
@@ -412,3 +412,9 @@ export function createToolGroup(item: PaletteItem): HTMLElement {
 export function changeCSSClass(element: Element, css: string): void {
     element.classList.contains(css) ? element.classList.remove(css) : element.classList.add(css);
 }
+
+export function changeCodiconClass(element: Element, codiconId: string): void {
+    element.classList.contains(codiconCSSClasses(codiconId)[1])
+        ? element.classList.remove(codiconCSSClasses(codiconId)[1])
+        : element.classList.add(codiconCSSClasses(codiconId)[1]);
+}

package/src/features/tools/base-glsp-tool.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,10 +13,10 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
-import { Action, IActionDispatcher, KeyTool, TYPES } from 'sprotty';
-
-import { EditorContextService } from '../../base/editor-context';
+import { IActionDispatcher, KeyTool, TYPES } from 'sprotty';
+import { EditorContextService } from '../../base/editor-context-service';
 import { GLSPTool } from '../../base/tool-manager/glsp-tool-manager';
 import { GLSP_TYPES } from '../../base/types';
 import { IMouseTool } from '../mouse-tool/mouse-tool';

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

@@ -13,10 +13,18 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { inject, injectable, optional } from 'inversify';
 import {
     Action,
     Bounds,
+    ChangeBoundsOperation,
+    ChangeRoutingPointsOperation,
+    CompoundOperation,
+    ElementAndRoutingPoints,
+    Operation,
+    Point
+} from '@eclipse-glsp/protocol';
+import { inject, injectable, optional } from 'inversify';
+import {
     BoundsAware,
     Dimension,
     EdgeRouterRegistry,
@@ -26,7 +34,6 @@ import {
     isSelected,
     isViewport,
     MouseListener,
-    Point,
     SChildElement,
     SConnectableElement,
     SetBoundsAction,
@@ -36,13 +43,6 @@ import {
     TYPES
 } from 'sprotty';
 import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
-import {
-    ChangeBoundsOperation,
-    ChangeRoutingPointsOperation,
-    CompoundOperation,
-    ElementAndRoutingPoints,
-    Operation
-} from '../../base/operations/operation';
 import { GLSP_TYPES } from '../../base/types';
 import { isValidMove, isValidSize, WriteablePoint } from '../../utils/layout-utils';
 import {
@@ -214,7 +214,8 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements Sele
         });
 
         const selectionSet: Set<SModelElement & BoundsAware> = new Set(selectedElements);
-        selectedElements.filter(element => !this.isChildOfSelected(selectionSet, element))
+        selectedElements
+            .filter(element => !this.isChildOfSelected(selectionSet, element))
             .map(element => this.createElementAndBounds(element))
             .forEach(bounds => newBounds.push(...bounds));
 

package/src/features/tools/delete-tool.ts

@@ -13,9 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, DeleteElementOperation } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import {
-    Action,
     EnableDefaultToolsAction,
     findParentByFeature,
     isCtrlOrCmd,
@@ -27,8 +27,6 @@ import {
     SModelElement
 } from 'sprotty';
 import { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
-
-import { DeleteElementOperation } from '../../base/operations/operation';
 import { GLSPTool } from '../../base/tool-manager/glsp-tool-manager';
 import { GLSP_TYPES } from '../../base/types';
 import { IMouseTool } from '../mouse-tool/mouse-tool';

package/src/features/tools/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
@@ -13,10 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { TriggerEdgeCreationAction, TriggerNodeCreationAction } from '@eclipse-glsp/protocol';
 import { ContainerModule, interfaces } from 'inversify';
 import { configureActionHandler, configureModelElement } from 'sprotty';
-
-import { TriggerEdgeCreationAction, TriggerNodeCreationAction } from '../../base/operations/operation';
 import { GLSP_TYPES } from '../../base/types';
 import { MARQUEE } from '../tool-feedback/marquee-tool-feedback';
 import { ChangeBoundsTool } from './change-bounds-tool';

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

@@ -13,9 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, CreateEdgeOperation, isTriggerElementTypeCreationAction, TriggerEdgeCreationAction } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import {
-    Action,
     AnchorComputerRegistry,
     EnableDefaultToolsAction,
     EnableToolsAction,
@@ -26,9 +26,7 @@ import {
     SEdge,
     SModelElement
 } from 'sprotty';
-
 import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
-import { CreateEdgeOperation, isTriggerElementTypeCreationAction, TriggerEdgeCreationAction } from '../../base/operations/operation';
 import {
     DrawFeedbackEdgeAction,
     FeedbackEdgeEndMovingMouseListener,

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

@@ -13,9 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, ChangeRoutingPointsOperation, ReconnectEdgeOperation } from '@eclipse-glsp/protocol';
 import { inject, injectable, optional } from 'inversify';
 import {
-    Action,
     AnchorComputerRegistry,
     canEditRouting,
     Connectable,
@@ -29,7 +29,6 @@ import {
     SRoutingHandle
 } from 'sprotty';
 import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
-import { ChangeRoutingPointsOperation, ReconnectEdgeOperation } from '../../base/operations/operation';
 import { GLSP_TYPES } from '../../base/types';
 import { isRoutable, isRoutingHandle } from '../../utils/smodel-util';
 import { isReconnectable, isReconnectHandle, isSourceRoutingHandle, isTargetRoutingHandle, SReconnectHandle } from '../reconnect/model';

package/src/features/tools/marquee-behavior.spec.ts

@@ -0,0 +1,175 @@
+/********************************************************************************
+ * Copyright (c) 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
+ * 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 { IMarqueeBehavior, MarqueeUtil } from './marquee-behavior';
+
+describe('MarqueeUtil', () => {
+    function initUtil(marqueeBehavior?: IMarqueeBehavior): MarqueeUtil {
+        const util = new MarqueeUtil(marqueeBehavior);
+        util.updateStartPoint({ x: 0, y: 0 });
+        util.updateCurrentPoint({ x: 0, y: 0 });
+        return util;
+    }
+
+    describe('Node marquee', () => {
+        const node = { x: 20, y: 20, width: 200, height: 50 };
+
+        it('touch element', () => {
+            const util = initUtil();
+            expect(util.isNodeMarked(node)).is.equals(false);
+            util.updateCurrentPoint({ x: 30, y: 50 });
+            expect(util.isNodeMarked(node)).is.equals(true);
+            util.updateCurrentPoint({ x: 250, y: 85 });
+            expect(util.isNodeMarked(node)).is.equals(true);
+            util.updateStartPoint({ x: 30, y: 25 });
+            expect(util.isNodeMarked(node)).is.equals(true);
+        });
+
+        it('touch element (reverse)', () => {
+            const util = initUtil();
+            expect(util.isNodeMarked(node)).is.equals(false);
+            util.updateStartPoint({ x: 30, y: 50 });
+            expect(util.isNodeMarked(node)).is.equals(true);
+            util.updateStartPoint({ x: 250, y: 85 });
+            expect(util.isNodeMarked(node)).is.equals(true);
+            util.updateCurrentPoint({ x: 30, y: 25 });
+            expect(util.isNodeMarked(node)).is.equals(true);
+        });
+
+        it('mark entire element', () => {
+            const util = initUtil({ entireElement: true, entireEdge: false });
+            expect(util.isNodeMarked(node)).is.equals(false);
+            util.updateCurrentPoint({ x: 30, y: 50 });
+            expect(util.isNodeMarked(node)).is.equals(false);
+            util.updateCurrentPoint({ x: 250, y: 85 });
+            expect(util.isNodeMarked(node)).is.equals(true);
+            util.updateStartPoint({ x: 30, y: 85 });
+            expect(util.isNodeMarked(node)).is.equals(false);
+        });
+
+        it('mark entire element (reverse)', () => {
+            const util = initUtil({ entireElement: true, entireEdge: false });
+            expect(util.isNodeMarked(node)).is.equals(false);
+            util.updateStartPoint({ x: 30, y: 50 });
+            expect(util.isNodeMarked(node)).is.equals(false);
+            util.updateStartPoint({ x: 250, y: 85 });
+            expect(util.isNodeMarked(node)).is.equals(true);
+            util.updateCurrentPoint({ x: 30, y: 85 });
+            expect(util.isNodeMarked(node)).is.equals(false);
+        });
+    });
+
+    describe('Edge marquee', () => {
+        const edge = [
+            { x: 20, y: 40 },
+            { x: 40, y: 20 }
+        ];
+        const edge2 = [
+            { x: 20, y: 20 },
+            { x: 40, y: 40 },
+            { x: 50, y: 10 }
+        ];
+
+        it('touch edge', () => {
+            const util = initUtil();
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateCurrentPoint({ x: 20, y: 20 });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+            util.updateCurrentPoint({ x: 30, y: 30 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+            util.updateCurrentPoint({ x: 50, y: 50 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+            util.updateStartPoint({ x: 25, y: 25 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+        });
+
+        it('touch edge (reverse)', () => {
+            const util = initUtil();
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateStartPoint({ x: 20, y: 20 });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+            util.updateStartPoint({ x: 30, y: 30 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+            util.updateStartPoint({ x: 50, y: 50 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+            util.updateCurrentPoint({ x: 25, y: 25 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+        });
+
+        it('mark entire edge', () => {
+            const util = initUtil({ entireElement: false, entireEdge: true });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateCurrentPoint({ x: 20, y: 20 });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateCurrentPoint({ x: 30, y: 30 });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateCurrentPoint({ x: 45, y: 50 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateCurrentPoint({ x: 55, y: 50 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+            util.updateStartPoint({ x: 25, y: 25 });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+        });
+
+        it('mark entire edge (reverse)', () => {
+            const util = initUtil({ entireElement: false, entireEdge: true });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateStartPoint({ x: 20, y: 20 });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateStartPoint({ x: 30, y: 30 });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateStartPoint({ x: 45, y: 50 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+            util.updateStartPoint({ x: 55, y: 50 });
+            expect(util.isEdgeMarked(edge)).is.equals(true);
+            expect(util.isEdgeMarked(edge2)).is.equals(true);
+            util.updateCurrentPoint({ x: 25, y: 25 });
+            expect(util.isEdgeMarked(edge)).is.equals(false);
+            expect(util.isEdgeMarked(edge2)).is.equals(false);
+        });
+
+        it('edge path should be marked', () => {
+            const path = 'M 599.968775008469,272.3972942960205 L 677.0904664855072,232';
+            const util = initUtil({ entireElement: false, entireEdge: true });
+            expect(util.isEdgePathMarked(path)).is.equals(false);
+            util.updateCurrentPoint({ x: 600, y: 300 });
+            expect(util.isEdgePathMarked(path)).is.equals(false);
+            util.updateCurrentPoint({ x: 700, y: 300 });
+            expect(util.isEdgePathMarked(path)).is.equals(true);
+        });
+    });
+});