Adds flowchart example (#416)

* Adds flowchart example Signed-off-by: Guillaume Fontorbe <[email protected]> * Changed svg container height Signed-off-by: Guillaume Fontorbe <[email protected]> --------- Signed-off-by: Guillaume Fontorbe <[email protected]>
eclipse-sprotty · Jan 24, 2024 · 2cdca53 · 2cdca53
1 parent d391f0d
commit 2cdca53
Show file tree

Hide file tree

Showing 10 changed files with 1,144 additions and 1 deletion.
diff --git a/examples/browser-app.ts b/examples/browser-app.ts
@@ -22,8 +22,9 @@ import runRandomGraph from "./random-graph/src/standalone";
 import runRandomGraphDistributed from "./random-graph-distributed/src/standalone";
 import runSvgPreRendered from "./svg/src/standalone";
 import runMulticore from "./multicore/src/multicore";
+import runFlowchart from "./flowchart/src/standalone";
 
-const appDiv = document.getElementById('sprotty-app')
+const appDiv = document.getElementById('sprotty-app');
 if (appDiv) {
     const appMode = appDiv.getAttribute('data-app');
     if (appMode === 'circlegraph')
@@ -38,6 +39,8 @@ if (appDiv) {
         runSvgPreRendered();
     else if (appMode === 'multicore')
         runMulticore();
+    else if (appMode === 'flowchart')
+        runFlowchart();
     else
         throw new Error('Dunno what to do :-(');
 }
diff --git a/examples/flowchart/css/diagram.css b/examples/flowchart/css/diagram.css
@@ -0,0 +1,102 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+
+:root {
+    --black: #000;
+    --white: #fff;
+    --stroke-normal: 2;
+    --stroke-medium: 3;
+    --stroke-bold: 5;
+    --red-500: #f44336;
+    --yellow-500: #ffeb3b;
+    --amber-500: #ffc107;
+}
+
+/* graph */
+.sprotty-graph {
+    font-size: 15pt;
+}
+
+/* nodes */
+.sprotty-node {
+    stroke: var(--black);
+    stroke-width: var(--stroke-normal);
+}
+
+.sprotty-node.terminal {
+    fill: var(--red-500);
+}
+
+.sprotty-node.process {
+    fill: var(--yellow-500);
+}
+
+.sprotty-node.decision {
+    fill: var(--amber-500);
+}
+
+.sprotty-node.selected {
+    stroke-width: var(--stroke-bold);
+}
+
+.sprotty-node.mouseover:not(.selected) {
+    stroke-width: var(--stroke-medium);
+}
+
+/* labels */
+.sprotty-label {
+    stroke-width: 0;
+    fill: var(--black);
+    font-size: 100%;
+    font-weight: inherit;
+    text-anchor: middle;
+}
+
+.edge-label-background {
+    fill: var(--white);
+    stroke: none;
+}
+
+/* edges */
+.sprotty-edge {
+    fill: none;
+    stroke: var(--black);
+    stroke-width: var(--stroke-normal);
+}
+
+.sprotty-edge.mouseover:not(.selected) {
+    stroke-width: var(--stroke-medium);
+}
+
+.sprotty-edge.selected {
+    stroke: #844;
+    stroke-width: var(--stroke-bold);
+}
+
+.sprotty-edge>.sprotty-routing-handle {
+    fill: #884;
+    stroke: none;
+    z-index: 1000;
+}
+
+.sprotty-edge>.sprotty-routing-handle[data-kind='line'] {
+    opacity: 0.35;
+}
+
+.arrowhead {
+    fill: var(--black);
+    stroke: var(--black);
+}
diff --git a/examples/flowchart/css/page.css b/examples/flowchart/css/page.css
@@ -0,0 +1,50 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+
+
+.footer {
+    margin-top: 10px;
+    text-align: right;
+    font-size: 10px;
+    color: #888;
+
+    display: flex;
+    justify-content: space-between;
+}
+
+.shortcuts {
+    text-align: left;
+}
+
+.copyright {
+    text-align: right;
+}
+
+.help {
+    margin-top: 24px;
+    text-align: right;
+    font-size: 16px;
+    color: #888;
+}
+
+svg {
+    margin-top: 15px;
+    width: 100%;
+    height: 600px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: #bbb;
+}
diff --git a/examples/flowchart/flowchart.html b/examples/flowchart/flowchart.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Sprotty Flowchart Example</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="css/page.css">
+    <!-- support Microsoft browsers -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dom4/3.0.0/dom4.js">
+    <script>
+        document.addEventListener("DOMContentLoaded", function toggleShortcuts(){
+            var isMac = navigator.platform.toUpperCase().indexOf('MAC')>=0;
+            var mac = document.getElementById('mac');
+            var other = document.getElementById('other');
+            if (isMac) {
+                mac.style.display = 'block';
+                other.style.display = 'none';
+            } else {
+                mac.style.display = 'none';
+                other.style.display = 'block';
+            }
+        });
+    </script>
+</head>
+<body>
+    <div class="container">
+        <div class="row" id="sprotty-app" data-app="flowchart">
+            <div class="col-md-10">
+                <h1>Sprotty Flowchart Example</h1>
+            </div>
+            <div class="help col-md-2">
+                <a href="https://sprotty.org/docs/user_interaction/">Help</a>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12">
+                <div id="sprotty" class="sprotty"></div>
+            </div>
+            <div class="footer">
+                <div id="mac" class="shortcuts">
+                    <b>Fit to screen:</b> Cmd+Shift+F, <b>Center selected:</b> Cmd+Shift+C, <b>Export SVG:</b> Cmd+Shift+E
+                </div>
+                <div id="other" class="shortcuts" style="display: none;">
+                    <b>Fit to screen:</b> Ctrl+Shift+F, <b>Center selected:</b> Ctrl+Shift+C, <b>Export SVG:</b> Ctrl+Shift+E
+                </div>
+                <div class="copyright">
+                    &copy; 2024 <a href="https://www.typefox.io/">TypeFox GmbH</a>.
+                </div>
+            </div>
+        </div>
+    </div>
+<script src="../resources/bundle.js"></script>
+</body>
+</html>