Add junction postprocessor

Signed-off-by: Guillaume Fontorbe <[email protected]>

packages/sprotty/css/sprotty.css

@@ -103,5 +103,7 @@
 }
 
 .sprotty-junction {
-    fill: white;
+    stroke: #000;
+    stroke-width: 1;
+    fill: #fff;
 }

packages/sprotty/src/features/edge-junction/di.config.ts

@@ -17,10 +17,13 @@
 import { ContainerModule } from "inversify";
 import { TYPES } from "../../base/types";
 import { JunctionFinder } from "./junction-finder";
+import { JunctionPostProcessor } from "./junction-postprocessor";
 
 const edgeJunctionModule = new ContainerModule(bind => {
     bind(JunctionFinder).toSelf().inSingletonScope();
     bind(TYPES.IEdgeRoutePostprocessor).toService(JunctionFinder);
+    bind(JunctionPostProcessor).toSelf().inSingletonScope();
+    bind(TYPES.IVNodePostprocessor).toService(JunctionPostProcessor);
 });
 
 export default edgeJunctionModule;

packages/sprotty/src/features/edge-junction/junction-postprocessor.ts

@@ -0,0 +1,40 @@
+/********************************************************************************
+ * Copyright (c) 2024 TypeFox 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 { injectable } from "inversify";
+import { IVNodePostprocessor } from "../../base/views/vnode-postprocessor";
+import { VNode } from "snabbdom";
+import { Action } from "sprotty-protocol";
+import { SModelElementImpl } from "../../base/model/smodel";
+
+@injectable()
+export class JunctionPostProcessor implements IVNodePostprocessor {
+    decorate(vnode: VNode, element: SModelElementImpl): VNode {
+        return vnode;
+    }
+    postUpdate(cause?: Action | undefined): void {
+        const svg = document.querySelector('svg#sprotty_root > g');
+        if (svg) {
+            const junctionGroups = Array.from(document.querySelectorAll('g.sprotty-junction'));
+
+            junctionGroups.forEach(junctionGroup => {
+                junctionGroup.remove();
+            });
+
+            svg.append(...junctionGroups);
+        }
+    }
+}

packages/sprotty/src/graph/views.tsx

@@ -91,11 +91,11 @@ export class PolylineEdgeView extends RoutableView {
         const junctionPoints = [];
         for (let i = 1; i < route.length; i++) {
             if (route[i].isJunction) {
-                junctionPoints.push(<circle cx={route[i].x} cy={route[i].y} r={radius} class-sprotty-junction={true}/>);
+                junctionPoints.push(<circle cx={route[i].x} cy={route[i].y} r={radius} />);
             }
         }
         if (junctionPoints.length > 0) {
-            return <g>{junctionPoints}</g>;
+            return <g class-sprotty-junction={true}>{junctionPoints}</g>;
         }
 
         return undefined;