yves-biener/zterm
1
0
Fork 0
Code Issues Pull Requests Actions Wiki Activity

doc(architecture): Elm architecture and short introduction into the architecture of zterm

Yves Biener
2025-10-26 17:42:38 +01:00
parent c93bfdc8e3
commit 600846a92b
2 changed files with 88 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
Architecture.md Normal file

@@ -0,0 +1,87 @@
## Architecture
The overall design of *zterm* describes an [Elm Archictecture](https://guide.elm-lang.org/architecture/). The following listing, a rough mapping between the *Elm* components and the corresponding is given:
- **Model** -- `App.Model`
- **View** -- `Container` and `Element`
- **Update** -- `App.Event`
## Structural Composition
```
┌─────────────┐ ┌───────────┐ ┌──────────────────────┐
│App │ │ <<Event>> │ │Container │
├─────────────┤ │ Queue │ ├──────────────────────┤
│+model: Model│ ├───────────┤ │+children: [Container]│
│-queue: Queue│ └───────────┘ │+element: Element │
└─────────────┘ └──────────────────────┘
┌─────────────┐ ┌─────┐
│Element │ │Model│
├─────────────┤ ├─────┤
│+resize() │ └─────┘
│+reposition()│ ┌─────┐
│+handle() │ │Event│
│+content() │ ├─────┤
└─────────────┘ └─────┘
```
## General Loop
The following sequence diagrams shows the general approach for the event and rendering loop:
```
┌────┐ ┌────────┐ ┌───┐ ┌─────────┐ ┌───────┐
│Main│ │Renderer│ │App│ │Container│ │Element│
└──┬─┘ └────┬───┘ └─┬─┘ └────┬────┘ └───┬───┘
│ │ │ │ │
╔═══════╤════╪════════════════════════════╪═════════════════╪═════════════════╪══════════════════════════════╪═════════════╗
║ LOOP │ quit event │ │ │ │ ║
╟───────┘ │ │ │ │ │ ║
║ │ Get next `Event` │ │ │ ║
║ │─────────────────────────────────────────────>│ │ │ ║
║ │ │ │ │ │ ║
║ │ │ │ handle `Event` │ │ ║
║ │ │ │────────────────>│ │ ║
║ │ │ │ │ │ ║
║ │ │ │ │────┐ │ ║
║ │ │ │ │ │ handle sub-`Container`s │ ║
║ │ │ │ │<───┘ │ ║
║ │ │ │ │ │ ║
║ │ │ │ │ handle `Event` │ ║
║ │ │ │ │─────────────────────────────>│ ║
║ │ │ │ │ │ ║
║ │ │ │ │ │ ║
║ │ │ │ │<─────────────────────────────│ ║
║ │ │ │ │ │ ║
║ │ │ │ │ │ ║
║ │ │ │<────────────────│ │ ║
║ │ │ │ │ │ ║
║ │ │ │ │ │ ║
║ │<─────────────────────────────────────────────│ │ │ ║
║ │ │ │ │ │ ║
║ │Render the root `Container` │ │ │ │ ║
║ │───────────────────────────>│ │ │ │ ║
║ │ │ │ │ │ ║
║ │ │ request `content` │ │ ║
║ │ │──────────────────────────────────>│ │ ║
║ │ │ │ │ │ ║
║ │ │ │ │────┐ │ ║
║ │ │ │ │ │ render sub-`Container` │ ║
║ │ │ │ │<───┘ │ ║
║ │ │ │ │ │ ║
║ │ │ │ │ render `content` │ ║
║ │ │ │ │─────────────────────────────>│ ║
║ │ │ │ │ │ ║
║ │ │ │ │ │ ║
║ │ │ │ │<─────────────────────────────│ ║
║ │ │ │ │ │ ║
║ │ │ │ │ │ ║
║ │ │<──────────────────────────────────│ │ ║
║ │ │ │ │ │ ║
║ │ │ │ │ │ ║
║ │<───────────────────────────│ │ │ │ ║
╚════════════╪════════════════════════════╪═════════════════╪═════════════════╪══════════════════════════════╪═════════════╝
┌──┴─┐ ┌────┴───┐ ┌─┴─┐ ┌────┴────┐ ┌───┴───┐
│Main│ │Renderer│ │App│ │Container│ │Element│
└────┘ └────────┘ └───┘ └─────────┘ └───────┘
```

1
Roadmap.md

@@ -17,6 +17,7 @@ The following list contains goals for certain features the library supports or i
- Limit where Focus is actually necessary (and skip those accordingly) - Limit where Focus is actually necessary (and skip those accordingly)
- Enhance the rendering to make it obvious where the focus is currently at - Enhance the rendering to make it obvious where the focus is currently at
- [x] Elm architecture support (through user defined `struct` acting as the *Model*)
- [ ] Container rendering - [ ] Container rendering
- [x] Layout - [x] Layout
- [x] direction - [x] direction