Implement Junction Finder

examples/random-graph/random-graph.html

@@ -23,6 +23,10 @@ <h1>Sprotty Random Graph Example</h1>
                         <option value="UP">Up</option>
                       </select>
                 </p>
+                <p>
+                    <label for="nodeCount">Merge ports and show junction points:</label>
+                    <input type="checkbox" id="junction" name="junction">
+                </p>
             </div>
             <div class="help col-md-2">
                 <a href="https://sprotty.org/docs/user_interaction/">Help</a>

examples/random-graph/src/di.config.ts

@@ -19,7 +19,7 @@ import ElkConstructor from 'elkjs/lib/elk.bundled';
 import { Container, ContainerModule } from 'inversify';
 import {
     Animation, CommandExecutionContext, configureModelElement, configureViewerOptions, ConsoleLogger,
-    edgeIntersectionModule, isSelectable, isViewport, loadDefaultModules, LocalModelSource, LogLevel, PolylineEdgeViewWithGapsOnIntersections,
+    edgeIntersectionModule, edgeJunctionModule, isSelectable, isViewport, loadDefaultModules, LocalModelSource, LogLevel, PolylineEdgeViewWithGapsOnIntersections,
     RectangularNodeView, SEdgeImpl, SGraphImpl, SGraphView, SLabelImpl, SLabelView, SModelRootImpl, SNodeImpl, SPortImpl,
     TYPES, UpdateAnimationData, UpdateModelCommand, ViewportAnimation
 } from 'sprotty';
@@ -64,6 +64,7 @@ export default (containerId: string) => {
     const container = new Container();
     loadDefaultModules(container);
     container.load(edgeIntersectionModule);
+    container.load(edgeJunctionModule);
     container.load(elkLayoutModule, randomGraphModule);
     return container;
 };

examples/random-graph/src/standalone.ts

@@ -30,6 +30,14 @@ export default function runRandomGraph() {
         layoutConfigurator.setDirection((event.target as any)?.value ?? 'LEFT');
         modelSource.updateModel();
     });
+
+    document.getElementById('junction')!.addEventListener('change', async (event) => {
+        if ((event.target as any).checked) {
+            modelSource.updateModel(createRandomGraphWithJunction());
+        } else {
+            modelSource.updateModel(createRandomGraph());
+        }
+    });
 }
 
 const NODES = 50;
@@ -101,3 +109,66 @@ function createRandomGraph(): SGraph {
     }
     return graph;
 }
+
+function createRandomGraphWithJunction(): SGraph {
+    const graph: SGraph = {
+        type: 'graph',
+        id: 'root',
+        children: []
+    };
+
+    for (let i = 0; i < NODES; i++) {
+        const node: SNode = {
+            type: 'node',
+            id: `node${i}`,
+            children: [
+                <SLabel>{
+                    type: 'label:node',
+                    id: `node${i}_label`,
+                    text: i.toString()
+                },
+                <SPort>{
+                    type: 'port',
+                    id: `port${i}-in`,
+                    size: { width: 8, height: 8 },
+                    children: [
+                        <SLabel>{
+                            type: 'label:port',
+                            id: `port${i}-in-label`,
+                            text: `in`
+                        }
+                    ]
+                },
+                <SPort>{
+                    type: 'port',
+                    id: `port${i}-out`,
+                    size: { width: 8, height: 8 },
+                    children: [
+                        <SLabel>{
+                            type: 'label:port',
+                            id: `port${i}-out-label`,
+                            text: `out`
+                        }
+                    ]
+                }
+            ]
+        };
+        graph.children.push(node);
+    }
+
+    for (let i = 0; i < EDGES; i++) {
+        const sourceNo = Math.floor(Math.random() * NODES);
+        const targetNo = Math.floor(Math.random() * NODES);
+        if (sourceNo === targetNo) {
+            continue;
+        }
+        const edge: SEdge = {
+            type: 'edge',
+            id: `edge${i}`,
+            sourceId: `port${sourceNo}-out`,
+            targetId: `port${targetNo}-in`
+        };
+        graph.children.push(edge);
+    }
+    return graph;
+}

packages/sprotty/css/sprotty.css

@@ -100,4 +100,10 @@
     fill: #f00;
     font-size: 14pt;
     text-anchor: start;
+}
+
+.sprotty-junction {
+    stroke: #000;
+    stroke-width: 1;
+    fill: #fff;
 }

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

@@ -0,0 +1,29 @@
+/********************************************************************************
+ * 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 { 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;