Skip to content

Commit 0233f28

Browse files
gfontorbegfontorbe
authored
Example micro-layout (#498)
* micro-layout example * Clean-up
1 parent 4d0ea76 commit 0233f28

File tree

11 files changed

+1783
-1
lines changed

11 files changed

+1783
-1
lines changed

‎examples/browser-app.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import runMulticore from "./multicore/src/multicore";
2525
import runFlowchart from "./flowchart/src/standalone";
2626
import runJsxample from "./jsxample/src/standalone";
2727
import runStylingShowcase from "./styling-showcase/src/standalone";
28+
import runMicroLayoutShowcase from "./micro-layout-showcase/src/standalone";
2829

2930
const appDiv = document.getElementById('sprotty-app');
3031
if (appDiv) {
@@ -47,6 +48,8 @@ if (appDiv) {
4748
runJsxample();
4849
else if (appMode === 'styling-showcase')
4950
runStylingShowcase();
51+
else if (appMode === 'micro-layout-showcase')
52+
runMicroLayoutShowcase();
5053
else
5154
throw new Error('Dunno what to do :-(');
5255
}

‎examples/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ <h3>Recipes</h3>
2323
<ul>
2424
<li><a href="styling-showcase/styling-showcase.html">Styling Showcase:</a><br>
2525
Demonstrates all the different approaches to styling diagram elements in Sprotty.</li>
26+
<li><a href="micro-layout-showcase/micro-layout-showcase.html">Micro-Layout Showcase:</a><br>
27+
Interactive demonstration of micro-layout concepts with real-time controls for layout options.
28+
</li>
2629
</ul>
2730

2831
<h3>Without Server</h3>

‎examples/micro-layout-showcase/README.md‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
# Sprotty Micro-Layout Showcase
2+
3+
This example demonstrates the micro-layout concepts in Sprotty, showing how to arrange elements inside nodes using different layout types and options.
4+
5+
## What This Example Demonstrates
6+
7+
### 1. Basic Layout Types
8+
9+
- **VBox Layout**: Children elements are stacked vertically
10+
- **HBox Layout**: Children elements are arranged horizontally
11+
- **Stack Layout**: Children elements are overlaid on top of each other
12+
13+
### 2. Interactive Layout Controls
14+
15+
- **Real-time Modification**: Change layout properties and see immediate visual feedback
16+
- **Layout Options**: Experiment with alignment, padding, and sizing options
17+
- **Preset Configurations**: Try common layout patterns with one click
18+
19+
### 3. Complex Layouts with Compartments
20+
21+
- **Dashboard Card**: Shows nested compartments with different layouts
22+
- **Metric Widgets**: Demonstrates how compartments can contain multiple elements
23+
- **Hierarchical Layouts**: VBox containing HBox compartments
24+
25+
### 4. Layoutable Child Features
26+
27+
- **Nested Nodes**: Shows how child nodes can respect parent layout when `layoutableChildFeature` is enabled
28+
- **Layout Inheritance**: Demonstrates the difference between regular and layoutable children
29+
30+
## Key Learning Points
31+
32+
1. **Client-side Layout**: Micro-layout requires `needsClientLayout: true` in the DI configuration
33+
2. **Layout Property**: Any `SNode` or `SCompartment` can have a `layout` property (`vbox`, `hbox`, or `stack`)
34+
3. **Layout Options**: Fine-tune layouts with:
35+
- **Alignment**: `hAlign` and `vAlign` for positioning children
36+
- **Padding**: `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft` for spacing
37+
- **Sizing**: `minWidth`, `minHeight`, and `resizeContainer` for size control
38+
4. **Compartments**: Use `SCompartment` to create complex nested layouts
39+
5. **Layoutable Children**: Enable `layoutableChildFeature` for nodes that should respect parent layout
40+
41+
## Interactive Features
42+
43+
### Layout Controls
44+
45+
- **Layout Type**: Switch between VBox, HBox, and Stack layouts
46+
- **Alignment**: Control horizontal and vertical alignment (disabled for primary layout direction)
47+
- **Padding**: Adjust spacing around children with sliders (0-50px)
48+
- **Size Options**: Set minimum dimensions and container resizing behavior
49+
50+
### Preset Buttons
51+
52+
- **Preset 1**: Typical card layout with centered content and generous padding
53+
- **Preset 2**: Horizontal layout optimized for dashboard widgets
54+
- **Preset 3**: Compact horizontal layout for menu items
55+
- **Reset**: Return to default settings
56+
57+
### Real-time Feedback
58+
59+
- Changes are applied immediately to the interactive card (blue card in the diagram)
60+
- Visual transitions show the layout changes smoothly
61+
- Value displays update as you adjust sliders
62+
63+
## Technical Implementation
64+
65+
### Model Structure
66+
67+
```typescript
68+
// Interactive card with modifiable layout properties
69+
{
70+
id: 'interactive-card',
71+
type: 'node:interactive-card',
72+
layout: 'vbox', // Can be changed via controls
73+
layoutOptions: {
74+
hAlign: 'center', // left | center | right
75+
vAlign: 'center', // top | center | bottom
76+
paddingTop: 10, // Spacing in pixels
77+
paddingRight: 15,
78+
paddingBottom: 10,
79+
paddingLeft: 15,
80+
minWidth: 150, // Minimum dimensions
81+
minHeight: 100,
82+
resizeContainer: true // Auto-resize based on content
83+
},
84+
children: [/* card elements */]
85+
}
86+
```
87+
88+
### DI Configuration
89+
90+
```typescript
91+
// Essential: Enable client-side layout
92+
configureViewerOptions(context, {
93+
needsClientLayout: true, // Required for micro-layout
94+
baseDiv: 'sprotty'
95+
});
96+
97+
// Enable layoutable child feature for nested nodes
98+
configureModelElement(context, 'node:basic', SNodeImpl, RectangularNodeView, {
99+
enable: [layoutableChildFeature]
100+
});
101+
```
102+
103+
### Event Handling
104+
105+
```typescript
106+
// Example: Layout type change
107+
document.querySelectorAll('input[name="layout"]').forEach(radio => {
108+
radio.addEventListener('change', (e) => {
109+
if (e.target.checked) {
110+
updateInteractiveCard(modelSource, {
111+
layout: e.target.value
112+
});
113+
}
114+
});
115+
});
116+
```
117+
118+
## File Structure
119+
120+
- `src/model.ts` - Interactive card model with layout properties
121+
- `src/views.tsx` - Custom views for cards and components
122+
- `src/di.config.ts` - DI configuration with `needsClientLayout: true`
123+
- `src/standalone.ts` - Main application and interactive controls
124+
- `css/diagram.css` - Card and component styling
125+
- `css/page.css` - Page layout and control panel styling
126+
- `micro-layout-showcase.html` - Demo page with interactive controls
127+
128+
## Running the Example
129+
130+
1. Open `micro-layout-showcase.html` in a web browser
131+
2. Observe the different layout types in the demo cards
132+
3. Use the interactive controls on the right to modify the blue card
133+
4. Try different presets to see common layout patterns
134+
5. Experiment with various combinations to understand how layout options work together
135+
136+
## Related Documentation
137+
138+
- [Micro-Layout Recipe](https://sprotty.org/docs/recipes/micro-layout/) - Complete guide to micro-layout concepts
139+
- [Sprotty Documentation](https://sprotty.org/docs/) - General Sprotty documentation
140+
- [Layout API Reference](https://sprotty.org/docs/api/) - Detailed API documentation
141+
142+
This example provides hands-on experience with Sprotty's micro-layout system, making it easy to understand how to create well-organized, visually appealing node layouts in your own diagrams.

0 commit comments

Comments
 (0)