language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-10-02 22:54:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Initial attempt at overview diagram

Browse source
This commit is contained in:
Simon Hausmann 2020-08-21 12:09:55 +02:00
parent e79798339c
commit 28e36b2339
2 changed files with 269 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

7
README.md
View file

@ -25,6 +25,13 @@ SixtyFPS is still in the early stages of development. APIs can and will change,
At the moment, it's possible to create user interfaces from C++, Rust and NodeJS. Those can be compiled/shown on Linux, macOS, Windows and in Web Browsers (using WebAssembly). At the moment, it's possible to create user interfaces from C++, Rust and NodeJS. Those can be compiled/shown on Linux, macOS, Windows and in Web Browsers (using WebAssembly).
## Architecture
An application is composed of the business logic written in Rust, C++ or JavaScript and the `.60` user interface markup design, which
is compiled to native code.
![Architecture Overview](resources/architecture.drawio.svg)
## Documentation ## Documentation
SixtyFPS can be used from different frontend languages. Refer to the README of these directories for reference documentation. SixtyFPS can be used from different frontend languages. Refer to the README of these directories for reference documentation.

262
resources/architecture.drawio.svg Normal file
View file

@ -0,0 +1,262 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="841px" height="414px" viewBox="-0.5 -0.5 841 414" content="&lt;mxfile host=&quot;7955dada-f171-407d-8061-efaa3ed53bf9&quot; modified=&quot;2020-08-21T10:02:01.309Z&quot; agent=&quot;5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Code/1.48.0 Chrome/78.0.3904.130 Electron/7.3.2 Safari/537.36&quot; etag=&quot;jeYboEKPfqCliJLqen8J&quot; version=&quot;13.1.3&quot;&gt;&lt;diagram id=&quot;9IMdokdIREN9-xzbxkqI&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;">
<defs/>
<g>
<path d="M 70 232 L 70 285.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 70 290.88 L 66.5 283.88 L 70 285.63 L 73.5 283.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="0" y="162" width="140" height="70" fill="#bac8d3" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 197px; margin-left: 1px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; ">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
.60 Design File
</div>
</div>
</div>
</foreignObject>
<text x="70" y="201" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
.60 Design File
</text>
</switch>
</g>
<rect x="0" y="292" width="140" height="70" fill="#007fff" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 327px; margin-left: 1px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; ">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
Sixty FPS Compiler
</div>
</div>
</div>
</foreignObject>
<text x="70" y="331" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
Sixty FPS Compiler
</text>
</switch>
</g>
<path d="M 693.63 267 L 650 267 L 650 327 L 606.37 327" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 698.88 267 L 691.88 270.5 L 693.63 267 L 691.88 263.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 601.12 327 L 608.12 323.5 L 606.37 327 L 608.12 330.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 693.63 267 L 606.37 267" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 698.88 267 L 691.88 270.5 L 693.63 267 L 691.88 263.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 601.12 267 L 608.12 263.5 L 606.37 267 L 608.12 270.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
<rect x="700" y="231" width="140" height="72" fill="#bac8d3" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 267px; margin-left: 701px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; ">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
Application
<br/>
Source Code
<br/>
(C++/Rust/JavaScript)
</div>
</div>
</div>
</foreignObject>
<text x="770" y="271" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
Application...
</text>
</switch>
</g>
<rect x="220" y="134" width="230" height="40" rx="6" ry="6" fill="none" stroke="none" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 228px; height: 1px; padding-top: 154px; margin-left: 222px;">
<div style="box-sizing: border-box; font-size: 0; text-align: left; ">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
Compiled UI
</div>
</div>
</div>
</foreignObject>
<text x="222" y="158" fill="#000000" font-family="Helvetica" font-size="12px">
Compiled UI
</text>
</switch>
</g>
<rect x="220" y="165" width="390" height="200" fill="none" stroke="#000000" stroke-dasharray="3 3" pointer-events="all"/>
<path d="M 459 204 L 459 193 Q 459 184 450 184 L 248 184 Q 239 184 239 193 L 239 204" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="all"/>
<path d="M 239 204 L 239 336 Q 239 345 248 345 L 450 345 Q 459 345 459 336 L 459 204" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/>
<path d="M 239 204 L 459 204" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 194px; margin-left: 349px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; ">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap; ">
UI Elements Tree
</div>
</div>
</div>
</foreignObject>
<text x="349" y="198" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
UI Elements Tree
</text>
</switch>
</g>
<path d="M 347 255 L 347 275 L 302 275 L 302 295" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
<path d="M 347 255 L 347 275 L 392 275 L 392 295" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
<rect x="311" y="235" width="72" height="20" fill="#eeeeee" stroke="none" pointer-events="none"/>
<rect x="261" y="295" width="82" height="20" fill="#eeeeee" stroke="none" pointer-events="none"/>
<rect x="351" y="295" width="82" height="20" fill="#eeeeee" stroke="none" pointer-events="none"/>
<rect x="480" y="185" width="120" height="44" fill="#bac8d3" stroke="none" pointer-events="none"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 207px; margin-left: 481px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; ">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
Properties
</div>
</div>
</div>
</foreignObject>
<text x="540" y="211" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
Properties
</text>
</switch>
</g>
<rect x="480" y="245" width="120" height="44" fill="#bac8d3" stroke="none" pointer-events="none"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 267px; margin-left: 481px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; ">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
Signals
</div>
</div>
</div>
</foreignObject>
<text x="540" y="271" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
Signals
</text>
</switch>
</g>
<rect x="480" y="305" width="120" height="44" fill="#bac8d3" stroke="none" pointer-events="none"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 327px; margin-left: 481px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; ">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
Models
</div>
</div>
</div>
</foreignObject>
<text x="540" y="331" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
Models
</text>
</switch>
</g>
<rect x="220" y="378" width="390" height="35" fill="#007fff" stroke="none" pointer-events="none"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 388px; height: 1px; padding-top: 396px; margin-left: 221px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; ">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
Sixty FPS Runtime
</div>
</div>
</div>
</foreignObject>
<text x="415" y="399" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
Sixty FPS Runtime
</text>
</switch>
</g>
<path d="M 320 158.63 L 320 60 L 375 60" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
<path d="M 320 163.88 L 316.5 156.88 L 320 158.63 L 323.5 156.88 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 100px; margin-left: 320px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; ">
<div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; background-color: #ffffff; white-space: nowrap; ">
Input Events
</div>
</div>
</div>
</foreignObject>
<text x="320" y="103" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
Input Events
</text>
</switch>
</g>
<path d="M 510 165 L 510 60 L 460 60 L 461.37 60" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
<path d="M 456.12 60 L 463.12 56.5 L 461.37 60 L 463.12 63.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 100px; margin-left: 510px;">
<div style="box-sizing: border-box; font-size: 0; text-align: center; ">
<div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; background-color: #ffffff; white-space: nowrap; ">
GPU Rendering
</div>
</div>
</div>
</foreignObject>
<text x="510" y="103" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">
GPU Rendering
</text>
</switch>
</g>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 88px; height: 1px; padding-top: 20px; margin-left: 377px;">
<div style="box-sizing: border-box; font-size: 0; text-align: left; ">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
Output Screen
</div>
</div>
</div>
</foreignObject>
<text x="377" y="24" fill="#000000" font-family="Helvetica" font-size="12px">
Output Screen
</text>
</switch>
</g>
<path d="M 606.37 207 L 650 207 L 650 267 L 693.63 267" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
<path d="M 601.12 207 L 608.12 203.5 L 606.37 207 L 608.12 210.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
<path d="M 698.88 267 L 691.88 270.5 L 693.63 267 L 691.88 263.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
<path d="M 140 327 L 214.8 327" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
<path d="M 220.05 327 L 213.05 330.5 L 214.8 327 L 213.05 323.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 38px; height: 1px; padding-top: 305px; margin-left: 162px;">
<div style="box-sizing: border-box; font-size: 0; text-align: left; ">
<div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
Native
<br/>
Code
</div>
</div>
</div>
</foreignObject>
<text x="162" y="309" fill="#000000" font-family="Helvetica" font-size="12px">
Native...
</text>
</switch>
</g>
<image x="374.5" y="19.5" width="80" height="80" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgd2lkdGg9IjIxIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iIzJhMmUzYiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyIDQpIj48cGF0aCBkPSJtMi41LjQ4NTI4MTM3aDExYy41NTIyODQ3IDAgMSAuNDQ3NzE1MjUgMSAxdjguMDE0NzE4NjNoLTEzdi04LjAxNDcxODYzYzAtLjU1MjI4NDc1LjQ0NzcxNTI1LTEgMS0xeiIvPjxwYXRoIGQ9Im0xLjExODAzMzk5IDkuNWgxMy43NjM5MzIwMWMuNTUyMjg0OCAwIDEgLjQ0NzcxNTI1IDEgMSAwIC4xNTUyNDUxLS4wMzYxNDUxLjMwODM1ODItLjEwNTU3MjguNDQ3MjEzNmwtMS4yNzYzOTMyIDIuNTUyNzg2NGgtMTNsLTEuMjc2MzkzMi0yLjU1Mjc4NjRjLS4yNDY5ODkyNS0uNDkzOTc4NS0uMDQ2NzY0OS0xLjA5NDY1MTU0LjQ0NzIxMzU5LTEuMzQxNjQwNzkuMTM4ODU1NDQtLjA2OTQyNzcyLjI5MTk2ODUtLjEwNTU3MjgxLjQ0NzIxMzYtLjEwNTU3MjgxeiIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCAyMykiLz48L2c+PC9zdmc+" preserveAspectRatio="none" pointer-events="none"/>
</g>
<switch>
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
<a transform="translate(0,-5)" xlink:href="https://desk.draw.io/support/solutions/articles/16000042487" target="_blank">
<text text-anchor="middle" font-size="10px" x="50%" y="100%">
Viewer does not support full SVG 1.1
</text>
</a>
</switch>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 24 KiB