Skip to content

Commit 4d0ea76

Browse files
gfontorbegfontorbe
authored
Add styling example (#496)
1 parent 6e4b135 commit 4d0ea76

File tree

9 files changed

+858
-34
lines changed

9 files changed

+858
-34
lines changed

‎examples/browser-app.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import runSvgPreRendered from "./svg/src/standalone";
2424
import runMulticore from "./multicore/src/multicore";
2525
import runFlowchart from "./flowchart/src/standalone";
2626
import runJsxample from "./jsxample/src/standalone";
27+
import runStylingShowcase from "./styling-showcase/src/standalone";
2728

2829
const appDiv = document.getElementById('sprotty-app');
2930
if (appDiv) {
@@ -44,6 +45,8 @@ if (appDiv) {
4445
runFlowchart();
4546
else if (appMode === 'jsxample')
4647
runJsxample();
48+
else if (appMode === 'styling-showcase')
49+
runStylingShowcase();
4750
else
4851
throw new Error('Dunno what to do :-(');
4952
}

‎examples/index.html‎

Lines changed: 48 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,62 @@
11
<!DOCTYPE html>
22
<html>
3+
34
<head>
45
<meta charset="utf-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1">
67
<title>Sprotty Examples</title>
78
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
89
</head>
10+
911
<body>
10-
<div class="container">
11-
<div class="row">
12-
<div class="col-md-12">
13-
<h1>Sprotty Examples</h1>
14-
<a href="https://sprotty.org/">Sprotty</a> is a web-based diagramming framework.
15-
For information how to use these examples see the <a href="https://sprotty.org/docs/user-interaction/">documentation</a>.
12+
<div class="container">
13+
<div class="row">
14+
<div class="col-md-12">
15+
<h1>Sprotty Examples</h1>
16+
<a href="https://sprotty.org/">Sprotty</a> is a web-based diagramming framework.
17+
For information how to use these examples see the <a
18+
href="https://sprotty.org/docs/user-interaction/">documentation</a>.
1619

17-
<h3>Without Server</h3>
18-
The following examples run completely in the browser and do not require any additional component.
19-
<ul>
20-
<li><a href="circlegraph/circlegraph.html">Circles and lines:</a><br>
21-
A basic diagram showing a graph of moveable nodes and edges.</li>
22-
<li><a href="classdiagram/class-diagram.html">Class diagram:</a><br>
23-
A basic class diagram using node layouts and hovers.</li>
24-
<li><a href="random-graph/random-graph.html">Random graph:</a><br>
25-
Randomly generated graph with automatic layout running in the browser.</li>
26-
<li><a href="svg/svg-prerendered.html">SVG:</a><br>
27-
Demonstrates how to use existing SVG figures.</li>
28-
<li><a href="multicore/multicore.html">Multicore:</a><br>
29-
Shows a multi-core chip. The color of the cores changes with the code they execute.
30-
If you zoom in, the communication channels between the cores appear.</li>
31-
<li><a href="flowchart/flowchart.html">Flowchart:</a><br>
32-
A flowchart with custom views for nodes and edges. The labels on nodes and edges are editable and the nodes and edges are moveable.</li>
33-
<li><a href="jsxample/jsxample.html">JSXample:</a><br>
34-
A demonstration how to use React alike components in Sprotty views.</li>
35-
</ul>
20+
<h3>Recipes</h3>
21+
The following examples demonstrate concepts from the <a href="https://sprotty.org/docs/recipes/">Sprotty
22+
recipes documentation</a>.
23+
<ul>
24+
<li><a href="styling-showcase/styling-showcase.html">Styling Showcase:</a><br>
25+
Demonstrates all the different approaches to styling diagram elements in Sprotty.</li>
26+
</ul>
3627

37-
<h3>With Server</h3>
38-
The following example requires to download and run <a href="https://github.com/TypeFox/elk-server">ELK Server</a> in socket mode.
39-
The example server connects to the ELK server and uses it as layout engine.
40-
<ul>
41-
<li><a href="random-graph-distributed/random-graph.html">Random graph:</a><br>
42-
Randomly generated graph with automatic layout running in a separate layout server.</li>
43-
</ul>
28+
<h3>Without Server</h3>
29+
The following examples run completely in the browser and do not require any additional component.
30+
<ul>
31+
<li><a href="circlegraph/circlegraph.html">Circles and lines:</a><br>
32+
A basic diagram showing a graph of moveable nodes and edges.</li>
33+
<li><a href="classdiagram/class-diagram.html">Class diagram:</a><br>
34+
A basic class diagram using node layouts and hovers.</li>
35+
<li><a href="random-graph/random-graph.html">Random graph:</a><br>
36+
Randomly generated graph with automatic layout running in the browser.</li>
37+
<li><a href="svg/svg-prerendered.html">SVG:</a><br>
38+
Demonstrates how to use existing SVG figures.</li>
39+
<li><a href="multicore/multicore.html">Multicore:</a><br>
40+
Shows a multi-core chip. The color of the cores changes with the code they execute.
41+
If you zoom in, the communication channels between the cores appear.</li>
42+
<li><a href="flowchart/flowchart.html">Flowchart:</a><br>
43+
A flowchart with custom views for nodes and edges. The labels on nodes and edges are editable
44+
and the nodes and edges are moveable.</li>
45+
<li><a href="jsxample/jsxample.html">JSXample:</a><br>
46+
A demonstration how to use React alike components in Sprotty views.</li>
47+
</ul>
48+
49+
<h3>With Server</h3>
50+
The following example requires to download and run <a href="https://github.com/TypeFox/elk-server">ELK
51+
Server</a> in socket mode.
52+
The example server connects to the ELK server and uses it as layout engine.
53+
<ul>
54+
<li><a href="random-graph-distributed/random-graph.html">Random graph:</a><br>
55+
Randomly generated graph with automatic layout running in a separate layout server.</li>
56+
</ul>
57+
</div>
4458
</div>
4559
</div>
46-
</div>
4760
</body>
48-
</html>
61+
62+
</html>

‎examples/styling-showcase/README.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
# Sprotty Styling Showcase
2+
3+
This example demonstrates the different approaches to styling diagram elements in Sprotty, using a network topology as the subject matter.
4+
5+
## What This Example Demonstrates
6+
7+
### 1. Default Styling
8+
9+
- **Elements:** Server A and Client B (top row)
10+
- **Concept:** All nodes automatically get the `sprotty-node` CSS class
11+
- **CSS:** `.sprotty-node { ... }` applies to all nodes
12+
13+
### 2. Subtype-based Styling
14+
15+
- **Elements:** Database, Router, and Host (second row)
16+
- **Concept:** Nodes with different types get additional CSS classes based on their subtype
17+
- **Types:** `node:server`, `node:router`, `node:database`
18+
- **CSS:** `.sprotty-node.server { ... }`, `.sprotty-node.router { ... }`, etc.
19+
20+
### 3. Custom CSS Classes
21+
22+
- **Elements:** Critical Server (third row, left)
23+
- **Concept:** Individual nodes can specify custom CSS classes via the `cssClasses` property
24+
- **Classes:** `['critical-system', 'high-priority']`
25+
- **CSS:** `.sprotty-node.critical-system { ... }`, `.sprotty-node.high-priority { ... }`
26+
27+
### 4. Conditional Styling
28+
29+
- **Elements:** Load Monitor (third row, right)
30+
- **Concept:** Custom views can apply CSS classes conditionally based on node properties
31+
- **Logic:** Color changes based on `loadPercentage` value
32+
- **CSS:** `.sprotty-node.low-load { ... }`, `.sprotty-node.medium-load { ... }`, `.sprotty-node.high-load { ... }`
33+
34+
### 5. Interactive Styling
35+
36+
- **Elements:** Gateway (bottom)
37+
- **Concept:** CSS classes are applied based on user interactions
38+
- **Features:** Selection (`selected` class) and hover (`mouseover` class)
39+
- **CSS:** `.sprotty-node.selected { ... }`, `.sprotty-node.mouseover { ... }`
40+
41+
## Key Learning Points
42+
43+
1. **CSS Class Hierarchy:** All nodes start with `sprotty-node`, then add specific classes
44+
2. **Subtype Convention:** Node type `node:server` automatically adds `server` CSS class
45+
3. **Granular Control:** Use `cssClasses` property for per-element styling
46+
4. **Dynamic Styling:** Custom views can apply classes based on runtime conditions
47+
5. **User Interaction:** Selection and hover states are handled automatically with appropriate CSS classes
48+
49+
## Running the Example
50+
51+
1. Open `styling-showcase.html` in a web browser
52+
2. Observe the different styling approaches in each section
53+
3. Click "Change Load Percentage" to see conditional styling in action
54+
4. Click and hover on the Gateway node to see interactive styling
55+
56+
## File Structure
57+
58+
- `src/model.ts` - Custom node model for load monitoring
59+
- `src/views.tsx` - Custom view with conditional styling logic
60+
- `src/di.config.ts` - Dependency injection configuration
61+
- `src/standalone.ts` - Main application and model setup
62+
- `css/diagram.css` - All styling examples organized by concept
63+
- `css/page.css` - Page layout and controls
64+
- `styling-showcase.html` - Demo page with explanations
65+
66+
## CSS Organization
67+
68+
The `diagram.css` file is organized into sections that correspond to each styling concept:
69+
70+
1. **Default Styling** - Base classes (`sprotty-node`, `sprotty-edge`, etc.)
71+
2. **Subtype-based Styling** - Type-specific classes (`.server`, `.router`, etc.)
72+
3. **Custom CSS Classes** - Per-element classes (`.critical-system`, etc.)
73+
4. **Conditional Styling** - Dynamic classes (`.low-load`, `.high-load`, etc.)
74+
5. **Interactive Styling** - User interaction classes (`.selected`, `.mouseover`)
75+
76+
This organization makes it easy to understand how each styling approach works and how to implement them in your own diagrams.

‎examples/styling-showcase/css/diagram.css‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
/********************************************************************************
2+
* Copyright (c) 2025 TypeFox and others.
3+
*
4+
* This program and the accompanying materials are made available under the
5+
* terms of the Eclipse Public License v. 2.0 which is available at
6+
* http://www.eclipse.org/legal/epl-2.0.
7+
*
8+
* This Source Code may also be made available under the following Secondary
9+
* Licenses when the conditions for such availability set forth in the Eclipse
10+
* Public License v. 2.0 are satisfied: GNU General Public License, version 2
11+
* with the GNU Classpath Exception which is available at
12+
* https://www.gnu.org/software/classpath/license.html.
13+
*
14+
* SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
15+
********************************************************************************/
16+
17+
/* =============================================================================
18+
SECTION 1: DEFAULT STYLING
19+
All nodes get the sprotty-node class by default
20+
============================================================================= */
21+
22+
.sprotty-graph {
23+
font-family: 'Arial', sans-serif;
24+
font-size: 12px;
25+
}
26+
27+
.sprotty-node {
28+
fill: #e8f4fd;
29+
stroke: #4a90e2;
30+
stroke-width: 2px;
31+
font-weight: bold;
32+
}
33+
34+
.sprotty-edge {
35+
fill: none;
36+
stroke: #666;
37+
stroke-width: 2px;
38+
}
39+
40+
.sprotty-text {
41+
fill: #333;
42+
font-size: 11px;
43+
text-anchor: middle;
44+
dominant-baseline: middle;
45+
}
46+
47+
/* =============================================================================
48+
SECTION 2: SUBTYPE-BASED STYLING
49+
Additional CSS classes based on node type (server, database, router)
50+
The CssClassPostprocessor automatically adds subtype classes (server, database, router)
51+
============================================================================= */
52+
53+
.server .sprotty-node {
54+
fill: #d4edda;
55+
stroke: #28a745;
56+
stroke-width: 2px;
57+
}
58+
59+
.database .sprotty-node {
60+
fill: #e1f5fe;
61+
stroke: #0288d1;
62+
stroke-width: 2px;
63+
}
64+
65+
.router .sprotty-node {
66+
fill: #fce4ec;
67+
stroke: #c2185b;
68+
stroke-width: 2px;
69+
}
70+
71+
/* =============================================================================
72+
SECTION 3: CUSTOM CSS CLASSES
73+
Per-element styling using cssClasses property
74+
============================================================================= */
75+
76+
.critical-system .sprotty-node {
77+
fill: #ff6b6b;
78+
stroke: #d63031;
79+
stroke-width: 3px;
80+
filter: drop-shadow(0 0 8px rgba(214, 48, 49, 0.5));
81+
}
82+
83+
.high-priority .sprotty-node {
84+
stroke-dasharray: 5, 5;
85+
animation: pulse-border 2s infinite;
86+
}
87+
88+
@keyframes pulse-border {
89+
0% {
90+
stroke-opacity: 1;
91+
}
92+
93+
50% {
94+
stroke-opacity: 0.5;
95+
}
96+
97+
100% {
98+
stroke-opacity: 1;
99+
}
100+
}
101+
102+
/* =============================================================================
103+
SECTION 4: CONDITIONAL STYLING
104+
Dynamic CSS classes applied based on node properties
105+
============================================================================= */
106+
107+
.sprotty-node.low-load {
108+
fill: #d4edda;
109+
stroke: #28a745;
110+
stroke-width: 2px;
111+
}
112+
113+
.sprotty-node.medium-load {
114+
fill: #fff3cd;
115+
stroke: #ffc107;
116+
stroke-width: 2px;
117+
}
118+
119+
.sprotty-node.high-load {
120+
fill: #f8d7da;
121+
stroke: #dc3545;
122+
stroke-width: 3px;
123+
}
124+
125+
.load-value {
126+
font-weight: bold;
127+
font-size: 13px;
128+
}
129+
130+
/* =============================================================================
131+
SECTION 5: INTERACTIVE STYLING
132+
Styling for user interactions (selection, hover)
133+
============================================================================= */
134+
135+
.interactive .sprotty-node.selected {
136+
stroke: #007bff;
137+
stroke-width: 4px;
138+
filter: drop-shadow(0 0 10px rgba(0, 123, 255, 0.6));
139+
}
140+
141+
.interactive .sprotty-node.mouseover:not(.selected) {
142+
stroke-width: 3px;
143+
stroke: #17a2b8;
144+
fill: #b8daff;
145+
cursor: pointer;
146+
}
147+
148+
/* =============================================================================
149+
EDGE STYLING
150+
Different styles for different connection types
151+
============================================================================= */
152+
153+
.sprotty-edge.ethernet {
154+
stroke: #4a90e2;
155+
stroke-width: 2px;
156+
}
157+
158+
.sprotty-edge.wireless {
159+
stroke: #28a745;
160+
stroke-width: 2px;
161+
stroke-dasharray: 8, 4;
162+
}
163+
164+
.sprotty-edge.fiber {
165+
stroke: #dc3545;
166+
stroke-width: 3px;
167+
}
168+
169+
.sprotty-edge.selected {
170+
stroke: #007bff;
171+
stroke-width: 4px;
172+
}
173+
174+
/* =============================================================================
175+
DEMO SECTION HEADERS
176+
Visual separation between different styling concepts
177+
============================================================================= */
178+
179+
.demo-section {
180+
background: #f8f9fa;
181+
border: 1px solid #dee2e6;
182+
border-radius: 4px;
183+
padding: 10px;
184+
margin: 10px 0;
185+
}
186+
187+
.demo-section h3 {
188+
margin: 0 0 10px 0;
189+
color: #495057;
190+
font-size: 14px;
191+
font-weight: bold;
192+
}
193+
194+
.demo-section p {
195+
margin: 0;
196+
color: #6c757d;
197+
font-size: 12px;
198+
}

0 commit comments

Comments
 (0)