midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Add binoculars theme, auto reformat everything

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-09-09 00:05:51 +02:00
parent 38dea806c5
commit 78d6482c88
586 changed files with 115573 additions and 111842 deletions
Download patch file Download diff file Expand all files Collapse all files

38
Docs/Architecture.md
View file

@ -1,7 +1,8 @@
Architecture
============
This document aims to give an architectural overview of how MapCompelte is built. It should give some feeling on how everything fits together.
This document aims to give an architectural overview of how MapCompelte is built. It should give some feeling on how
everything fits together.
Servers?
--------
@ -11,24 +12,30 @@ There are no servers for MapComplete, all services are configured by third parti
Minimal HTML - Minimal CSS
--------------------------
There is quasi no HTML. Most of the components are generated by TypeScript and attached dynamically. The html is a barebones skeleton which serves every theme.
There is quasi no HTML. Most of the components are generated by TypeScript and attached dynamically. The html is a
barebones skeleton which serves every theme.
The UIEventSource
-----------------
Most (but not all) objects in MapComplete get all the state they need as a parameter in the constructor. However, as is the case with most graphical applications, there are quite some dynamical values.
Most (but not all) objects in MapComplete get all the state they need as a parameter in the constructor. However, as is
the case with most graphical applications, there are quite some dynamical values.
All values which change regularly are wrapped into a [UIEventSource](https://github.com/pietervdvn/MapComplete/blob/master/Logic/UIEventSource.ts).
An UiEventSource is a wrapper containing a value and offers the possibility to add a callback function which is called every time the value is changed (with setData)
All values which change regularly are wrapped into
a [UIEventSource](https://github.com/pietervdvn/MapComplete/blob/master/Logic/UIEventSource.ts). An UiEventSource is a
wrapper containing a value and offers the possibility to add a callback function which is called every time the value is
changed (with setData)
Furthermore, there are various helper functions, the most widely used one being `map` - generating a new event source with the new value applied.
Note that 'map' will also absorb some changes, e.g. `const someEventSource : UIEventSource<string[]> = ... ; someEventSource.map(list = list.length)` will only trigger when the length of the list has changed.
Furthermore, there are various helper functions, the most widely used one being `map` - generating a new event source
with the new value applied. Note that 'map' will also absorb some changes,
e.g. `const someEventSource : UIEventSource<string[]> = ... ; someEventSource.map(list = list.length)` will only trigger
when the length of the list has changed.
An object which receives an UIEventSource is responsible of responding onto changes of this object. This is especially true for UI-components
An object which receives an UIEventSource is responsible of responding onto changes of this object. This is especially
true for UI-components
UI
--```
UI --```
export default class MyComponent {
@ -37,6 +44,7 @@ export default class MyComponent {
}
}
```
The Graphical User Interface is composed of various UI-elements. For every UI-element, there is a BaseUIElement which creates the actual HTMLElement when needed.
@ -55,9 +63,9 @@ For example:
```
const src : UIEventSource<string> = ... // E.g. user input, data that will be updated...
new VariableUIElement(src)
.AttachTo('some-id') // attach it to the html
const src : UIEventSource<string> = ... // E.g. user input, data that will be updated... new VariableUIElement(src)
.AttachTo('some-id') // attach it to the html
```
Note that every component offers support for `onClick( someCallBack)`
@ -109,6 +117,7 @@ This can be constructed as following:
```
// We construct the dropdown element with values and labelshttps://tailwindcss.com/
const isOpened = new Dropdown<string>(Translations.t.is_this_shop_opened_during_holidays,
[
@ -127,6 +136,7 @@ This can be constructed as following:
)
return new Combine([isOpened, extraQuestion])
```
### Constructing a special class
@ -144,6 +154,7 @@ export default class MyComponent {
}
}
```
2. Construct the needed UI in the constructor
@ -166,6 +177,7 @@ export default class MyComponent {
}
}
```
3. You'll notice that you'll end up with one certain component (in this example the combine) to wrap it all together. Change the class to extend this type of component and use super to wrap it all up: