[997] Improve routing handle rendering style

Bug: #997
Signed-off-by: Guillaume Coutable <guillaume.coutable@obeo.fr>

frontend/src/diagram/sprotty/DependencyInjection.ts

@@ -56,7 +56,6 @@ import {
   SLabel,
   SModelElement,
   SRoutingHandle,
-  SRoutingHandleView,
   TYPES,
   updateModule,
   viewportModule,
@@ -67,6 +66,8 @@ import { Action, Point, RequestPopupModelAction, SetPopupModelAction } from 'spr
 import { siriusCommonModule } from './common/siriusCommonModule';
 import { siriusEdgeEditModule } from './edgeEdition/siriusEdgeEditModule';
 import { siriusRoutingModule } from './routing/siriusRoutingModule';
+import { RoutingHandleView } from './views/RoutingHandleView';
+import { VolatileRoutingHandleView } from './views/VolatileRoutingHandleView';
 
 /**
  * Extends Sprotty's SLabel to add support for having the initial text when entering
@@ -138,8 +139,8 @@ const siriusWebContainerModule = new ContainerModule((bind, unbind, isBound, reb
   configureView({ bind, isBound }, 'html', HtmlRootView);
   // @ts-ignore
   configureView({ bind, isBound }, 'pre-rendered', PreRenderedView);
-  configureModelElement(context, 'routing-point', SRoutingHandle, SRoutingHandleView);
-  configureModelElement(context, 'volatile-routing-point', SRoutingHandle, SRoutingHandleView);
+  configureModelElement(context, 'routing-point', SRoutingHandle, RoutingHandleView);
+  configureModelElement(context, 'volatile-routing-point', SRoutingHandle, VolatileRoutingHandleView);
 });
 
 /**

frontend/src/diagram/sprotty/views/RoutingHandleView.tsx

@@ -0,0 +1,42 @@
+/*******************************************************************************
+ * Copyright (c) 2022 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+/** @jsx svg */
+import { VNode } from 'snabbdom';
+import { RenderingContext, RoutedPoint, setAttr, SRoutingHandle, SRoutingHandleView } from 'sprotty';
+
+/**
+ * View used to handle 'source', 'target' and 'junction' routing handles.
+ */
+export class RoutingHandleView extends SRoutingHandleView {
+  render(handle: Readonly<SRoutingHandle>, context: RenderingContext, args?: { route?: RoutedPoint[] }): VNode {
+    const handleVNode = super.render(handle, context, args);
+    setAttr(handleVNode, 'stroke', 'var(--daintree)');
+    setAttr(handleVNode, 'stroke-width', '1');
+    setAttr(handleVNode, 'fill', '#fafafa');
+
+    if (handle.hoverFeedback) {
+      setAttr(handleVNode, 'fill', 'var(--blue-lagoon-lighten-20)');
+    }
+
+    if (handle.selected) {
+      setAttr(handleVNode, 'fill', 'var(--blue-lagoon)');
+      setAttr(handleVNode, 'opacity', '1');
+    }
+
+    return handleVNode;
+  }
+
+  getRadius(): number {
+    return 2.5;
+  }
+}

frontend/src/diagram/sprotty/views/VolatileRoutingHandleView.tsx

@@ -0,0 +1,43 @@
+/*******************************************************************************
+ * Copyright (c) 2022 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+/** @jsx svg */
+import { VNode } from 'snabbdom';
+import { RenderingContext, RoutedPoint, setAttr, SRoutingHandle, SRoutingHandleView } from 'sprotty';
+
+/**
+ * View used to handle 'line' routing handles.
+ */
+export class VolatileRoutingHandleView extends SRoutingHandleView {
+  render(handle: Readonly<SRoutingHandle>, context: RenderingContext, args?: { route?: RoutedPoint[] }): VNode {
+    const handleVNode = super.render(handle, context, args);
+    setAttr(handleVNode, 'stroke', 'var(--daintree)');
+    setAttr(handleVNode, 'stroke-width', '1');
+    setAttr(handleVNode, 'fill', '#fafafa');
+    setAttr(handleVNode, 'opacity', '0.35');
+
+    if (handle.hoverFeedback) {
+      setAttr(handleVNode, 'opacity', '0.65');
+    }
+
+    if (handle.selected) {
+      setAttr(handleVNode, 'fill', 'var(--blue-lagoon)');
+      setAttr(handleVNode, 'opacity', '1');
+    }
+
+    return handleVNode;
+  }
+
+  getRadius(): number {
+    return 2.5;
+  }
+}