Page:
Architecture
Clone
1
Architecture
Yves Biener edited this page 2025-10-26 17:42:38 +01:00
Table of Contents
Architecture
The overall design of zterm describes an Elm Archictecture. The following listing, a rough mapping between the Elm components and the corresponding is given:
- Model --
App.Model - View --
ContainerandElement - 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│
└────┘ └────────┘ └───┘ └─────────┘ └───────┘