From 2202decd8ae3aad6fcb0b76d73072ab11ca8a27d Mon Sep 17 00:00:00 2001
From: Guillaume Fontorbe <guillaume.fontorbe@typefox.io>
Date: Thu, 22 Feb 2024 12:56:03 +0100
Subject: [PATCH] Add junction postprocessor

Signed-off-by: Guillaume Fontorbe <guillaume.fontorbe@typefox.io>
---
 packages/sprotty/css/sprotty.css              |  4 +-
 .../src/features/edge-junction/di.config.ts   |  3 ++
 .../edge-junction/junction-postprocessor.ts   | 40 +++++++++++++++++++
 packages/sprotty/src/graph/views.tsx          |  4 +-
 4 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 packages/sprotty/src/features/edge-junction/junction-postprocessor.ts

diff --git a/packages/sprotty/css/sprotty.css b/packages/sprotty/css/sprotty.css
index 1092de6..e21dbba 100644
--- a/packages/sprotty/css/sprotty.css
+++ b/packages/sprotty/css/sprotty.css
@@ -103,5 +103,7 @@
 }
 
 .sprotty-junction {
-    fill: white;
+    stroke: #000;
+    stroke-width: 1;
+    fill: #fff;
 }
\ No newline at end of file
diff --git a/packages/sprotty/src/features/edge-junction/di.config.ts b/packages/sprotty/src/features/edge-junction/di.config.ts
index e4bc367..370ff64 100644
--- a/packages/sprotty/src/features/edge-junction/di.config.ts
+++ b/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;
diff --git a/packages/sprotty/src/features/edge-junction/junction-postprocessor.ts b/packages/sprotty/src/features/edge-junction/junction-postprocessor.ts
new file mode 100644
index 0000000..97bcc9a
--- /dev/null
+++ b/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);
+        }
+    }
+}
diff --git a/packages/sprotty/src/graph/views.tsx b/packages/sprotty/src/graph/views.tsx
index 1c5d92c..14ddba8 100644
--- a/packages/sprotty/src/graph/views.tsx
+++ b/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;