eclipse-glsp · tortmayr · Sep 20, 2021 · Sep 20, 2021
diff --git a/configs/base.tsconfig.json b/configs/base.tsconfig.json
@@ -1,25 +1,25 @@
 {
-    "compilerOptions": {
-        "skipLibCheck": true,
-        "declaration": true,
-        "declarationMap": true,
-        "noImplicitAny": true,
-        "noEmitOnError": false,
-        "noImplicitThis": true,
-        "noUnusedLocals": true,
-        "noImplicitReturns": true,
-        "strictNullChecks": true,
-        "experimentalDecorators": true,
-        "emitDecoratorMetadata": true,
-        "downlevelIteration": true,
-        "module": "commonjs",
-        "moduleResolution": "node",
-        "target": "es5",
-        "jsx": "react",
-        "lib": [
-            "es6",
-            "dom"
-        ],
-        "sourceMap": true
-    }
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "noImplicitAny": true,
+    "noEmitOnError": false,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noImplicitReturns": true,
+    "strictNullChecks": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "downlevelIteration": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "target": "ES2017",
+    "jsx": "react",
+    "lib": [
+      "ES2017",
+      "dom"
+    ],
+    "sourceMap": true
+  }
 }
diff --git a/examples/workflow-glsp/src/di.config.ts b/examples/workflow-glsp/src/di.config.ts
@@ -28,6 +28,7 @@ import {
     DefaultTypes,
     DeleteElementContextMenuItemProvider,
     DiamondNodeView,
+    edgeIntersectionModule,
     edgeLayoutModule,
     editLabelFeature,
     expandModule,
@@ -108,7 +109,7 @@ export default function createContainer(widgetId: string): Container {
     container.load(defaultModule, defaultGLSPModule, glspMouseToolModule, validationModule, glspSelectModule, boundsModule, glspViewportModule, toolsModule,
         glspHoverModule, fadeModule, exportModule, expandModule, openModule, buttonModule, modelSourceModule, labelEditUiModule, glspEditLabelModule,
         workflowDiagramModule, toolFeedbackModule, modelHintsModule, glspContextMenuModule, glspServerCopyPasteModule, modelSourceWatcherModule,
-        glspCommandPaletteModule, paletteModule, routingModule, glspDecorationModule, edgeLayoutModule, zorderModule,
+        glspCommandPaletteModule, paletteModule, routingModule, glspDecorationModule, edgeLayoutModule, zorderModule, edgeIntersectionModule,
         layoutCommandsModule, directTaskEditor, navigationModule, markerNavigatorModule);
 
     overrideViewerOptions(container, {

diff --git a/examples/workflow-glsp/src/workflow-views.tsx b/examples/workflow-glsp/src/workflow-views.tsx
@@ -15,24 +15,24 @@
  ********************************************************************************/
 import {
     angleOfPoint,
-    GEdgeView,
     IView,
     Point,
+    PolylineEdgeViewWithGapsOnIntersections,
     RenderingContext,
     SEdge,
     toDegrees
 } from '@eclipse-glsp/client';
 import { injectable } from 'inversify';
-import * as snabbdom from 'snabbdom-jsx';
-import { VNode } from 'snabbdom/vnode';
+import { VNode } from 'snabbdom';
+import { svg } from 'sprotty';
 
 import { Icon } from './model';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: snabbdom.svg };
+const JSX = { createElement: svg };
 
 @injectable()
-export class WorkflowEdgeView extends GEdgeView {
+export class WorkflowEdgeView extends PolylineEdgeViewWithGapsOnIntersections {
     protected renderAdditionals(edge: SEdge, segments: Point[], context: RenderingContext): VNode[] {
         const additionals = super.renderAdditionals(edge, segments, context);
         const p1 = segments[segments.length - 2];

diff --git a/packages/client/src/features/mouse-tool/mouse-tool.ts b/packages/client/src/features/mouse-tool/mouse-tool.ts
@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { injectable, multiInject, optional } from 'inversify';
-import { VNode, VNodeData } from 'snabbdom/vnode';
+import { On, VNode, VNodeData } from 'snabbdom';
 import { Action, isAction, MouseListener, MouseTool, SModelElement, SModelRoot, TYPES } from 'sprotty';
 
 import { getRank } from '../rank/model';
@@ -46,25 +46,27 @@ export class RankingMouseTool extends MouseTool implements IMouseTool {
     decorate(vnode: VNode, element: SModelElement): VNode {
         // we need to overwrite the existing event handlers registered by the original mouse tool
         if (element instanceof SModelRoot) {
-            overwriteOn(vnode, 'mouseover', this.mouseOver.bind(this), element);
-            overwriteOn(vnode, 'mouseout', this.mouseOut.bind(this), element);
-            overwriteOn(vnode, 'mouseenter', this.mouseEnter.bind(this), element);
-            overwriteOn(vnode, 'mouseleave', this.mouseLeave.bind(this), element);
-            overwriteOn(vnode, 'mousedown', this.mouseDown.bind(this), element);
-            overwriteOn(vnode, 'mouseup', this.mouseUp.bind(this), element);
-            overwriteOn(vnode, 'mousemove', this.mouseMove.bind(this), element);
-            overwriteOn(vnode, 'wheel', this.wheel.bind(this), element);
-            overwriteOn(vnode, 'contextmenu', (_target: SModelElement, event: any) => {
-                event.preventDefault();
-            }, element);
-            overwriteOn(vnode, 'dblclick', this.doubleClick.bind(this), element);
+            overwriteOn(vnode, 'mouseover', this.mouseOver.bind(this, element), element);
+            overwriteOn(vnode, 'mouseout', this.mouseOut.bind(this, element), element);
+            overwriteOn(vnode, 'mouseenter', this.mouseEnter.bind(this, element), element);
+            overwriteOn(vnode, 'mouseleave', this.mouseLeave.bind(this, element), element);
+            overwriteOn(vnode, 'mousedown', this.mouseDown.bind(this, element), element);
+            overwriteOn(vnode, 'mouseup', this.mouseUp.bind(this, element), element);
+            overwriteOn(vnode, 'mousemove', this.mouseMove.bind(this, element), element);
+            overwriteOn(vnode, 'wheel', this.wheel.bind(this, element), element);
+            overwriteOn(vnode, 'contextmenu', this.contextMenu.bind(this, element), element);
+            overwriteOn(vnode, 'dblclick', this.doubleClick.bind(this, element), element);
         }
         vnode = this.mouseListeners.reduce(
             (n: VNode, listener: MouseListener) => listener.decorate(n, element),
             vnode);
         return vnode;
     }
 
+    contextMenu(model: SModelRoot, event: MouseEvent): void {
+        event.preventDefault();
+    }
+
     protected handleEvent<K extends keyof MouseListener>(methodName: K, model: SModelRoot, event: MouseEvent): void {
         this.focusOnMouseEvent(methodName, model);
         const element = this.getTargetElement(model, event);
@@ -121,7 +123,7 @@ function overwriteOn(vnode: VNode, event: string, listener: (model: SModelElemen
     (val as any)[event] = [listener, element];
 }
 
-function getOn(vnode: VNode): any {
+function getOn(vnode: VNode): On {
     const data = getData(vnode);
     if (!data.on) {
         data.on = {};

diff --git a/packages/client/src/features/tool-feedback/change-bounds-tool-feedback.ts b/packages/client/src/features/tool-feedback/change-bounds-tool-feedback.ts
@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { inject, injectable } from 'inversify';
-import { VNode } from 'snabbdom/vnode';
+import { VNode } from 'snabbdom';
 import {
     Action,
     CommandExecutionContext,

diff --git a/packages/client/src/features/tool-feedback/edge-edit-tool-feedback.ts b/packages/client/src/features/tool-feedback/edge-edit-tool-feedback.ts
@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { inject, injectable } from 'inversify';
-import { VNode } from 'snabbdom/vnode';
+import { VNode } from 'snabbdom';
 import {
     Action,
     add,

diff --git a/packages/client/src/features/tool-feedback/view.tsx b/packages/client/src/features/tool-feedback/view.tsx
@@ -14,14 +14,13 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { injectable } from 'inversify';
-import * as snabbdom from 'snabbdom-jsx';
-import { VNode } from 'snabbdom/vnode';
-import { IView, ORIGIN_POINT, Point, RenderingContext, setAttr, SModelElement } from 'sprotty';
+import { VNode } from 'snabbdom';
+import { IView, ORIGIN_POINT, Point, RenderingContext, setAttr, SModelElement, svg } from 'sprotty';
 
 import { isResizable, ResizeHandleLocation, SResizeHandle } from '../change-bounds/model';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: snabbdom.svg };
+const JSX = { createElement: svg };
 
 /**
 * This view is used for the invisible end of the feedback edge.

diff --git a/packages/client/src/features/tools/view.tsx b/packages/client/src/features/tools/view.tsx
@@ -14,14 +14,13 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { injectable } from 'inversify';
-import * as snabbdom from 'snabbdom-jsx';
-import { VNode } from 'snabbdom/vnode';
-import { RectangularNodeView, RenderingContext } from 'sprotty';
+import { VNode } from 'snabbdom';
+import { RectangularNodeView, RenderingContext, svg } from 'sprotty';
 
 import { MarqueeNode } from './model';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: snabbdom.svg };
+const JSX = { createElement: svg };
 
 @injectable()
 export class MarqueeView extends RectangularNodeView {

diff --git a/packages/client/src/views/glsp-edge-view.tsx b/packages/client/src/views/glsp-edge-view.tsx
@@ -14,15 +14,13 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { injectable } from 'inversify';
-import * as snabbdom from 'snabbdom-jsx';
-import { Classes } from 'snabbdom/modules/class';
-import { VNode } from 'snabbdom/vnode';
-import { Point, PolylineEdgeView, RenderingContext, SEdge } from 'sprotty';
+import { Classes, VNode } from 'snabbdom';
+import { Point, PolylineEdgeView, RenderingContext, SEdge, svg } from 'sprotty';
 
 import { EdgePadding } from '../utils/argument-utils';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: snabbdom.svg };
+const JSX = { createElement: svg };
 
 @injectable()
 export class GEdgeView extends PolylineEdgeView {

diff --git a/packages/client/src/views/issue-marker-view.tsx b/packages/client/src/views/issue-marker-view.tsx
@@ -15,12 +15,11 @@
  ********************************************************************************/
 /* eslint-disable max-len */
 import { injectable } from 'inversify';
-import * as snabbdom from 'snabbdom-jsx';
-import { VNode } from 'snabbdom/vnode';
-import { IssueMarkerView, RenderingContext, setClass, SIssueMarker, SIssueSeverity } from 'sprotty';
+import { VNode } from 'snabbdom';
+import { IssueMarkerView, RenderingContext, setClass, SIssueMarker, SIssueSeverity, svg } from 'sprotty';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: snabbdom.svg };
+const JSX = { createElement: svg };
 
 @injectable()
 export class GIssueMarkerView extends IssueMarkerView {

diff --git a/packages/client/src/views/rounded-corner-view.tsx b/packages/client/src/views/rounded-corner-view.tsx
@@ -14,16 +14,14 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { injectable } from 'inversify';
-import * as snabbdom from 'snabbdom-jsx';
-import { Classes } from 'snabbdom/modules/class';
-import { VNode } from 'snabbdom/vnode';
-import { Hoverable, RectangularNodeView, RenderingContext, Selectable, SNode, SPort, SShapeElement } from 'sprotty/lib';
+import { Classes, VNode } from 'snabbdom';
+import { Hoverable, RectangularNodeView, RenderingContext, Selectable, SNode, SPort, SShapeElement, svg } from 'sprotty';
 
 import { CornerRadius } from '../utils/argument-utils';
 import { RoundedCornerWrapper } from './rounded-corner';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: snabbdom.svg };
+const JSX = { createElement: svg };
 
 @injectable()
 export class RoundedCornerNodeView extends RectangularNodeView {