Vectornaut/dyna3
1
0
Fork 0
forked from StudioInfinity/dyna3
Code Pull requests Activity

feat: Application prototype (#14)

Browse source 
Creates a prototype user interface for dyna3 in the `app-proto` folder. The interface is dynamically constructed using [Sycamore](https://sycamore.dev).

The prototype includes:

  * An application state model (the `AppState` type)
    * A constraint problem model (the `Assembly` type), used in the application state
  * Two views
    * A 3D rendering of the assembly (the `Display` component)
    * A list of elements and constraints (the `Outline` component)

The following features confirm that the views can reflect and send input to the model:

  * You can select elements by clicking and shift-clicking them in the outline. The selected elements are highlighted in the display.
  * You can add elements using a button above the outline. The new elements appear in the display.

Co-authored-by: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Reviewed-on: glen/dyna3#14
Co-authored-by: Vectornaut <vectornaut@nobody@nowhere.net>
Co-committed-by: Vectornaut <vectornaut@nobody@nowhere.net>
This commit is contained in:
Vectornaut 2024-10-21 23:38:27 +00:00 • committed by Glen Whitney
parent b92be312e8
commit 86fa682b31
12 changed files with 1428 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

124
app-proto/main.css Normal file
View file

@ -0,0 +1,124 @@
body {
margin: 0px;
color: #fcfcfc;
background-color: #222;
}
/* sidebar */
#sidebar {
display: flex;
flex-direction: column;
float: left;
width: 450px;
height: 100vh;
margin: 0px;
padding: 0px;
border-width: 0px 1px 0px 0px;
border-style: solid;
border-color: #555;
}
/* add-remove */
#add-remove {
display: flex;
gap: 8px;
margin: 8px;
}
#add-remove > button {
width: 32px;
height: 32px;
font-size: large;
}
/* outline */
#outline {
flex-grow: 1;
margin: 0px;
padding: 0px;
overflow-y: scroll;
}
li {
user-select: none;
}
summary {
display: flex;
}
summary.selected {
color: #fff;
background-color: #444;
}
summary > div, .cst {
padding-top: 4px;
padding-bottom: 4px;
}
.elt, .cst {
display: flex;
flex-grow: 1;
padding-left: 8px;
padding-right: 8px;
}
.elt-switch {
width: 18px;
padding-left: 2px;
text-align: center;
}
details:has(li) .elt-switch::after {
content: '▸';
}
details[open]:has(li) .elt-switch::after {
content: '▾';
}
.elt-label {
flex-grow: 1;
}
.cst-label {
flex-grow: 1;
}
.elt-rep {
display: flex;
}
.elt-rep > div, .cst-rep {
padding: 2px 0px 0px 0px;
font-size: 10pt;
text-align: center;
width: 56px;
}
.cst {
font-style: italic;
}
.cst > input {
margin: 0px 8px 0px 0px;
}
/* display */
canvas {
float: left;
margin-left: 20px;
margin-top: 20px;
background-color: #020202;
border: 1px solid #555;
border-radius: 16px;
}
canvas:focus {
border-color: #aaa;
}