Flowchart library (#423)

* Flowchart library Signed-off-by: Guillaume Fontorbe <[email protected]> * Comments by spoenemann Signed-off-by: Guillaume Fontorbe <[email protected]> * More specific model elements Signed-off-by: Guillaume Fontorbe <[email protected]> --------- Signed-off-by: Guillaume Fontorbe <[email protected]>
eclipse-sprotty · Feb 21, 2024 · 06967c1 · 06967c1
1 parent 6c77394
commit 06967c1
Show file tree

Hide file tree

Showing 16 changed files with 941 additions and 183 deletions.
diff --git a/examples/flowchart/css/diagram.css b/examples/flowchart/css/diagram.css
@@ -34,6 +34,7 @@
 .sprotty-node {
     stroke: var(--black);
     stroke-width: var(--stroke-normal);
+    fill: var(--white);
 }
 
 .sprotty-node.terminal {

diff --git a/examples/flowchart/src/data.ts b/examples/flowchart/src/data.ts
@@ -14,13 +14,14 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
+import { Flowchart } from "sprotty-library";
 import { SEdge, SGraph, SLabel, SModelRoot, SNode } from "sprotty-protocol";
 
 export function initializeModel(): SModelRoot {
     const nodes: SNode[] = [];
     const edges: SEdge[] = [];
 
-    const node0: SNode = {
+    const node0: Flowchart.Terminal = {
         id: '0',
         type: 'node:terminal',
         position: { x: 150, y: 10 },
@@ -42,7 +43,7 @@ export function initializeModel(): SModelRoot {
     };
     nodes.push(node0);
 
-    const node1: SNode = {
+    const node1: Flowchart.Process = {
         id: '1',
         type: 'node:process',
         position: { x: 109.15, y: 153.9 },
@@ -63,7 +64,7 @@ export function initializeModel(): SModelRoot {
     };
     nodes.push(node1);
 
-    const node2: SNode = {
+    const node2: Flowchart.Decision = {
         id: '2',
         type: 'node:decision',
         position: { x: 71.4, y: 297.8 },
@@ -86,7 +87,7 @@ export function initializeModel(): SModelRoot {
     };
     nodes.push(node2);
 
-    const node3: SNode = {
+    const node3: Flowchart.Process = {
         id: '3',
         type: 'node:process',
         position: { x: 102.35, y: 517.8 },
@@ -107,7 +108,7 @@ export function initializeModel(): SModelRoot {
     };
     nodes.push(node3);
 
-    const node4: SNode = {
+    const node4: Flowchart.Decision = {
         id: '4',
         type: 'node:decision',
         position: { x: 411.1, y: 297.8 },
@@ -130,10 +131,10 @@ export function initializeModel(): SModelRoot {
     };
     nodes.push(node4);
 
-    const node5: SNode = {
+    const node5: Flowchart.Process = {
         id: '5',
         type: 'node:process',
-        position: { x: 395.7, y: 517.8},
+        position: { x: 395.7, y: 517.8 },
         children: [<SLabel>{
             id: '5_label',
             text: 'Wait for available nurse',
@@ -152,7 +153,7 @@ export function initializeModel(): SModelRoot {
     };
     nodes.push(node5);
 
-    const node6: SNode = {
+    const node6: Flowchart.Process = {
         id: '6',
         type: 'node:process',
         position: { x: 722.3, y: 335.85 },
@@ -174,7 +175,7 @@ export function initializeModel(): SModelRoot {
     };
     nodes.push(node6);
 
-    const node7: SNode = {
+    const node7: Flowchart.Decision = {
         id: '7',
         type: 'node:decision',
         position: { x: 736, y: 479.75 },
@@ -197,10 +198,10 @@ export function initializeModel(): SModelRoot {
     };
     nodes.push(node7);
 
-    const node8: SNode = {
+    const node8: Flowchart.Process = {
         id: '8',
         type: 'node:process',
-        position: { x: 720.5, y: 699.75},
+        position: { x: 720.5, y: 699.75 },
         children: [<SLabel>{
             id: '8_label',
             text: 'Wait for available doctor',
@@ -219,7 +220,7 @@ export function initializeModel(): SModelRoot {
     };
     nodes.push(node8);
 
-    const node9: SNode = {
+    const node9: Flowchart.Process = {
         id: '9',
         type: 'node:process',
         position: { x: 1055.7, y: 517.8 },
@@ -241,7 +242,7 @@ export function initializeModel(): SModelRoot {
     };
     nodes.push(node9);
 
-    const node10: SNode = {
+    const node10: Flowchart.Decision = {
         id: '10',
         type: 'node:decision',
         position: { x: 1074.9, y: 661.7 },
@@ -264,7 +265,7 @@ export function initializeModel(): SModelRoot {
     };
     nodes.push(node10);
 
-    const node11: SNode = {
+    const node11: Flowchart.Decision = {
         id: '11',
         type: 'node:decision',
         position: { x: 1065.75, y: 881.7 },
@@ -287,7 +288,7 @@ export function initializeModel(): SModelRoot {
     };
     nodes.push(node11);
 
-    const node12: SNode = {
+    const node12: Flowchart.Process = {
         id: '12',
         type: 'node:process',
         position: { x: 1099.7, y: 1101.7 },
@@ -309,7 +310,7 @@ export function initializeModel(): SModelRoot {
     };
     nodes.push(node12);
 
-    const node13: SNode = {
+    const node13: Flowchart.Terminal = {
         id: '13',
         type: 'node:terminal',
         position: { x: 1143.25, y: 1245.6 },
@@ -331,7 +332,7 @@ export function initializeModel(): SModelRoot {
     };
     nodes.push(node13);
 
-    const node14: SNode = {
+    const node14: Flowchart.Process = {
         id: '14',
         type: 'node:process',
         position: { x: 1385.4, y: 699.75 },
@@ -353,7 +354,7 @@ export function initializeModel(): SModelRoot {
     };
     nodes.push(node14);
 
-    const node15: SNode = {
+    const node15: Flowchart.Process = {
         id: '15',
         type: 'node:process',
         position: { x: 1386.1, y: 919.75 },

diff --git a/examples/flowchart/src/di.config.ts b/examples/flowchart/src/di.config.ts
@@ -16,61 +16,33 @@
 
 import { Container, ContainerModule } from "inversify";
 import {
-    CircularNodeView,
     ConsoleLogger,
+    LocalModelSource,
     LogLevel,
-    SCompartmentImpl,
-    SCompartmentView,
-    SEdgeImpl,
-    SGraphImpl,
-    SGraphView,
-    SLabelImpl,
-    SLabelView,
-    SNodeImpl,
-    SPortImpl,
-    SRoutingHandleImpl,
-    SRoutingHandleView,
     TYPES,
-    configureModelElement,
     configureViewerOptions,
-    editLabelFeature,
-    loadDefaultModules,
-    moveFeature,
-    selectFeature
+    loadDefaultModules
 } from "sprotty";
-import { FlowchartModelSource } from "./model-source";
-import { DecisionNodeView, EdgeLabel, EdgeWithArrow, ProcessNodeView, TerminalNodeView } from "./views";
+import { Flowchart } from 'sprotty-library';
 
 export default (containerId: string) => {
     require('../css/diagram.css');
 
-    const flowchartModule = new ContainerModule((bind, unbind, isBound, rebind) => {
-        bind(TYPES.ModelSource).to(FlowchartModelSource).inSingletonScope();
+    const module = new ContainerModule((bind, unbind, isBound, rebind) => {
+        bind(TYPES.ModelSource).to(LocalModelSource).inSingletonScope();
         rebind(TYPES.ILogger).to(ConsoleLogger).inSingletonScope();
         rebind(TYPES.LogLevel).toConstantValue(LogLevel.log);
 
         const context = { bind, unbind, isBound, rebind };
 
-        configureModelElement(context, 'graph', SGraphImpl, SGraphView);
-        configureModelElement(context, 'node:terminal', SNodeImpl, TerminalNodeView);
-        configureModelElement(context, 'node:process', SNodeImpl, ProcessNodeView);
-        configureModelElement(context, 'node:decision', SNodeImpl, DecisionNodeView);
-        configureModelElement(context, 'label', SLabelImpl, SLabelView, {enable: [editLabelFeature]});
-        configureModelElement(context, 'label:edge', SLabelImpl, EdgeLabel, {enable: [moveFeature, selectFeature, editLabelFeature]});
-        configureModelElement(context, 'edge', SEdgeImpl, EdgeWithArrow);
-        configureModelElement(context, 'routing-point', SRoutingHandleImpl, SRoutingHandleView);
-        configureModelElement(context, 'volatile-routing-point', SRoutingHandleImpl, SRoutingHandleView);
-        configureModelElement(context, 'port:in', SPortImpl, CircularNodeView);
-        configureModelElement(context, 'port:out', SPortImpl, CircularNodeView);
-        configureModelElement(context, 'compartment', SCompartmentImpl, SCompartmentView);
-
         configureViewerOptions(context, {
             needsClientLayout: true,
         });
     });
 
     const container = new Container();
     loadDefaultModules(container);
-    container.load(flowchartModule);
+    container.load(Flowchart.flowchartModule);
+    container.load(module);
     return container;
 };
diff --git a/examples/flowchart/src/standalone.ts b/examples/flowchart/src/standalone.ts
@@ -17,11 +17,12 @@
 import { LocalModelSource, TYPES } from 'sprotty';
 import { BringToFrontAction, FitToScreenAction } from 'sprotty-protocol';
 import createContainer from './di.config';
+import { initializeModel } from './data';
 
 export default async function runFlowchart() {
     const container = createContainer('sprotty');
     const modelSource = container.get<LocalModelSource>(TYPES.ModelSource);
-    await modelSource.updateModel();
+    await modelSource.updateModel(initializeModel());
 
     const bringToFrontAction: BringToFrontAction = {
         kind: 'bringToFront',

diff --git a/examples/flowchart/src/views.tsx b/examples/flowchart/src/views.tsx
diff --git a/examples/package.json b/examples/package.json
@@ -9,6 +9,7 @@
     "reflect-metadata": "~0.1.14",
     "sprotty": "^1.1.0",
     "sprotty-elk": "^1.1.0",
+    "sprotty-library": "^0.0.1",
     "ws": "^8.14.2"
   },
   "devDependencies": {

diff --git a/packages/sprotty-library/.gitignore b/packages/sprotty-library/.gitignore
@@ -0,0 +1 @@
+/lib/