Add junction points in random example

Signed-off-by: Guillaume Fontorbe <[email protected]>
eclipse-sprotty · Feb 22, 2024 · f57928c · f57928c
1 parent 1c2f3b7
commit f57928c
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 2 deletions.
diff --git a/examples/random-graph/random-graph.html b/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>

diff --git a/examples/random-graph/src/di.config.ts b/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;
 };

diff --git a/examples/random-graph/src/standalone.ts b/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;
+}
diff --git a/packages/sprotty/css/sprotty.css b/packages/sprotty/css/sprotty.css
@@ -100,4 +100,8 @@
     fill: #f00;
     font-size: 14pt;
     text-anchor: start;
+}
+
+.sprotty-junction {
+    fill: white;
 }
diff --git a/packages/sprotty/src/graph/views.tsx b/packages/sprotty/src/graph/views.tsx
@@ -87,10 +87,11 @@ export class PolylineEdgeView extends RoutableView {
     }
 
     protected renderJunctionPoints(edge: Readonly<SEdgeImpl>, route: RoutedPoint[], context: RenderingContext, args: IViewArgs | undefined) {
+        const radius = 5;
         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={5} class-sprotty-junction={true}/>);
+                junctionPoints.push(<circle cx={route[i].x} cy={route[i].y} r={radius} class-sprotty-junction={true}/>);
             }
         }
         if (junctionPoints.length > 0) {