Skip to content

Commit a2c1bb1

Browse files
epostepost
authored
halogen-kdmoncat: integrate kdmoncat codebase via git subtree (WIP) (#296)
* First commit * Update README.md * Fix one more bug * Reduce number of warnings * suppress halogen-svg warnings * Supress shadowedName warnings (during bundling only) * Clean up code * changes for vscode * Generate haskell arrow code * smaller generated arrow code * Cleaner generated haskell code * fixes * Visual Studio integration with Halogen component lifecycle. #4 (WIP) * Add spiders * Fix saving state in hash in Safari * Replace explicit record type by App.Input alias. #4 * Put {pixels,context} into field in App.State. #14 * Qualify fromPixels as Bricks.fromPixels. #14 * Fix doc comment. #14 * Refactor generated code * Replace another written-out App.Input record by its alias. #4 * Rename setPixels and setPixelsAndContext to setInput. #4 * Eliminate repetition of fields from Bricks.Input. #14 * Move View.Bricks model state into its own field 'input :: Input'. #14 * Copy to clipboard buttons * Update src/View/CopyToClipboard.js Co-Authored-By: Erik Post <[email protected]> * Update src/View/CopyToClipboard.purs Co-Authored-By: Erik Post <[email protected]> * Create .editorconfig * Factor Bricks.Input formation out of bricksView. #14 * Don't automatically install the component on module load. #4 * Clean up type inferencing * Move i/o connection matching to view/bricks * Detect more type errors in spiders * Fix restorting state from location.hash * Use parseHash function for restoring state * tidy up * Automatically trim trailing whitespace * Don't put labels on wires, center labels above node * Fix label bug * Make wire bricks clickable * More greek * Fix disappearing wires * make selected wires visible again * Typed terms * Show types on identities in Term view * Show types with perms and spiders in term view * Remove ann field from TC and TT and use Ann * Make variable names in TypedTerm just strings * Make use of typed term in output formats * Add direction arrows * Cup and Cap * Switch from Int /\ Int to { x :: Int, y :: Int } * use Parcel to run and bundle (#30) * Use parcel as recommended by spago * Ignore dist * Don't show stars on types when valid * Add statebox logo and link * Nicer JSON generation * Use argonaut-codecs * allow running the static html * Fix encoding issue in bundled version * Update README.md * Update README.md Co-Authored-By: Erik Post <[email protected]> * Update README.md Co-Authored-By: Erik Post <[email protected]> * Update README.md * Update README.md * README.md tweaks. * Update package-lock.json. * Expose bricksView-related code to vscode. #14 (#26) * Expose bricksView-related code to vscode. #14 * Expose termView-related code to vscode. #14 * Fix npm start and move static files to html dir * Url encode parenthesis * Generate cleaner haskell arrow code * Reduce parenthesis in generated Haskell code * Allow a name and multiple pixel letters per type Fixes #33 * Use names i/o bids in generated JSON and Haskell * Switch to purescript-vec Fixes #32 * Use github token to access private vec package * Use names in terms view * Make sure the labels fit in their boxes * Some syntax and comments changes. #34 * Explicitly type unsafe coercion from Element -> HTMLElement. #34 * Fix text positioning in Safari * halogen-kdmoncat: Put kdmoncat modules under KDMonCat module. #257 Co-authored-by: Sjoerd Visscher <[email protected]> * studio: Render wiring diagrams in kdmoncat. #257 * Show diagrams in kdmoncat * Update ExampleData.purs Co-authored-by: Sjoerd Visscher <[email protected]> * halogen-kdmoncat: Fix compilation failure related to purescript-vec reference. #257 * 'Backport' Ord instance for Vec3 from purescript-vec repo. * Depend on the purescript-vec in this monorepo. * stbx-lang: Adapt diagram parser for use with the kdmoncat wiring viewer. #257 Co-authored-by: Sjoerd Visscher <[email protected]> * studio: Move conversion of DiagramInfo to Operators into stbx-lang. #257 Co-authored-by: Sjoerd Visscher <[email protected]> * studio: Fix whitespace. #257 * stbx-lang: Refactor fromOps for clarity. #257. Co-authored-by: Sjoerd Visscher <[email protected]> * studio: Refactor a 'let' to 'where'. #257 * prefix kdmoncat bricks css with kdmoncat * Prefix bricks component with kdmoncat * Refactor fromOps * halogen-kdmoncat: Remove ABOUT.md. #257 * studio: Qualify fromOperators as DiagramV2.fromOperators. #257 * studio: Qualify as KDMonCat.Bricks instead of KDMonCatBricks. #257 * studio: use 'zero' for 'Box' instead of the explicit version. #257
1 parent be16565 commit a2c1bb1

36 files changed

+10320
-10
lines changed

‎halogen-kdmoncat/.editorconfig

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
root = true
2+
3+
[*]
4+
end_of_line = lf
5+
insert_final_newline = true
6+
indent_style = space
7+
indent_size = 2
8+
trim_trailing_whitespace = true

‎halogen-kdmoncat/.gitignore

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/bower_components/
2+
/node_modules/
3+
/.pulp-cache/
4+
/output/
5+
/generated-docs/
6+
/.psc-package/
7+
/.psc*
8+
/.purs*
9+
/.psa*
10+
/.spago
11+
/.cache
12+
/dist

‎halogen-kdmoncat/README.md

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# kdmoncat brick diagram editor for monoidal categories and beyond
2+
3+
[![Netlify Status](https://api.netlify.com/api/v1/badges/683fd161-cc3e-42dc-84af-7b77259af156/deploy-status)](https://app.netlify.com/sites/cranky-goldstine-6a507b/deploys)
4+
5+
6+
## setup
7+
8+
```
9+
npm install
10+
```
11+
12+
## usage
13+
14+
Run these simultaneously:
15+
16+
- `npm run watch`
17+
- `npm start`
18+
19+
Then open `localhost:1234` in your browser.
20+
21+
### usage without server
22+
23+
Run these simultaneously:
24+
25+
- `npm run watch`
26+
- `npm run start1`
27+
28+
Then open `dist/index.html` in your browser.
29+
30+
## bundling
31+
32+
```
33+
npm run bundle
34+
```
35+
36+
This generates a static version in `dist/index.html`.

‎halogen-kdmoncat/html/index.html

+248
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
<meta charset="UTF-8">
2+
<style>
3+
* { box-sizing: border-box; }
4+
*:focus {
5+
outline: none;
6+
}
7+
html, body {
8+
font-family: sans-serif;
9+
background: #eee;
10+
color: #444;
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
16+
.app {
17+
display: flex;
18+
flex-direction: column;
19+
height: 100vh;
20+
padding: 20px;
21+
}
22+
.app > a {
23+
position: absolute;
24+
width: 100px;
25+
height: 100px;
26+
right: 0;
27+
bottom: 0;
28+
background-image: url(logo-statebox.svg);
29+
background-size: 100% 100%;
30+
background-origin: content-box;
31+
background-repeat: no-repeat;
32+
padding: 20px;
33+
}
34+
.main {
35+
flex: 1;
36+
display: flex;
37+
}
38+
aside {
39+
display: flex;
40+
flex-direction: column;
41+
width: 25vw;
42+
margin: -10px 0 0 20px;
43+
}
44+
h2 {
45+
font-size: inherit;
46+
margin-top: 20px;
47+
margin-bottom: 10px;
48+
}
49+
footer {
50+
overflow: auto;
51+
margin-right: 80px;
52+
}
53+
54+
55+
.bricks {
56+
position: relative;
57+
justify-self: stretch;
58+
display: grid;
59+
grid-gap: 2px;
60+
flex: 1;
61+
user-select: none;
62+
-webkit-user-select: none;
63+
}
64+
.bricks svg {
65+
position: absolute;
66+
top: 0;
67+
left: 0;
68+
width: 100%;
69+
height: 100%;
70+
}
71+
.box > rect:first-child {
72+
fill: rgba(0, 0, 0, .07);
73+
transition: fill 0.3s;
74+
}
75+
.bricks:focus .box.selected > rect:first-child {
76+
fill: rgba(0, 112, 204, 0.2);
77+
}
78+
.bricks.show-wires:not(:focus) .box > rect:first-child {
79+
fill: rgba(221, 221, 221, 0) !important;
80+
}
81+
.inner-box {
82+
fill: rgba(255, 255, 255, 0);
83+
stroke: rgba(68, 68, 68, 0);
84+
stroke-width: 0.01;
85+
transition: fill 0.3s, stroke 0.3s;
86+
}
87+
.inner-box-text {
88+
fill: white;
89+
font-size: .4px;
90+
font-weight: bold;
91+
transition: fill 0.3s;
92+
}
93+
.bricks.show-wires .inner-box {
94+
fill: white;
95+
stroke: #444;
96+
}
97+
.bricks.show-wires .inner-box-text {
98+
fill: #444;
99+
}
100+
.selection {
101+
fill: none;
102+
stroke: rgba(112, 112, 112, 0);
103+
stroke-width: 0.02;
104+
pointer-events: none;
105+
transition: stroke 0.3s;
106+
}
107+
.bricks:focus .selection {
108+
stroke: rgba(0, 112, 204, 0.7);
109+
}
110+
.object {
111+
fill: #444;
112+
stroke-width: 0;
113+
transition: opacity 0.3s;
114+
font-family: 'Times New Roman', Times, serif;
115+
font-style: italic;
116+
font-size: 0.13px;
117+
}
118+
.object.invalid {
119+
fill: rgba(204, 0, 0, 1);
120+
}
121+
.show-wires path, .show-wires .object circle {
122+
opacity: 0;
123+
}
124+
.object.equal.valid span.output {
125+
display: none;
126+
}
127+
.line {
128+
stroke: #444;
129+
stroke-width: 0.01;
130+
fill: none;
131+
transition: opacity 0.3s, stroke 0.3s, stroke-width 0.3s;
132+
}
133+
.arrowhead {
134+
fill: #444;
135+
}
136+
.object.invalid .line, .object.invalid .arrowhead {
137+
stroke: rgba(204, 0, 0, 1);
138+
}
139+
.show-wires .line, .show-wires .arrowhead {
140+
opacity: 1;
141+
}
142+
.show-bricks .box .line {
143+
stroke: rgba(68, 68, 68, 0);
144+
}
145+
.bricks:focus::after {
146+
content: 'Press alt to toggle between bricks and wires.';
147+
position: absolute;
148+
right: 0;
149+
top: 100%;
150+
font-family: 'Times New Roman', Times, serif;
151+
font-style: italic;
152+
padding-top: 5px;
153+
}
154+
.wires {
155+
fill: #444;
156+
}
157+
.wires > rect:first-child {
158+
opacity: 0;
159+
}
160+
.wires .node {
161+
stroke: #444;
162+
stroke-width: 0.01;
163+
z-index: 1;
164+
}
165+
.wires .node.white {
166+
fill: #fff;
167+
}
168+
.bricks:focus .wires.selected > rect:first-child {
169+
fill: rgba(0, 112, 204, 0.1);
170+
opacity: 1;
171+
}
172+
text.object[text-anchor=start] {
173+
transform: translate(0.05px, -0.05px);
174+
}
175+
text.object[text-anchor=end] {
176+
transform: translate(-0.05px, -0.05px);
177+
}
178+
text.object.centered {
179+
text-anchor: middle !important;
180+
transform: translate(0, -0.07px);
181+
}
182+
183+
.fieldset {
184+
display: grid;
185+
grid-template-columns: auto 1fr;
186+
grid-gap: 10px;
187+
align-items: center;
188+
}
189+
.inputs {
190+
display: grid;
191+
grid-gap: 0 10px;
192+
}
193+
textarea, input {
194+
border: none;
195+
border-radius: 3px;
196+
width: 100%;
197+
font-family: 'Fira Code', 'Courier New', Courier, monospace;
198+
font-size: 14px;
199+
font-weight: 500;
200+
color: inherit;
201+
padding: 8px;
202+
}
203+
textarea {
204+
flex: 1;
205+
}
206+
207+
208+
.term {
209+
line-height: 20px;
210+
margin-top: -10px;
211+
}
212+
.tc, .tt {
213+
display: flex;
214+
border-top: 20px solid rgba(0, 0, 0, .1);
215+
border-radius: 5px;
216+
transition: background-color 0.3s;
217+
}
218+
.selected.tc, .selected.tt, .selected .tc, .selected .tt {
219+
border-top-color: rgba(0, 112, 204, 0.3);
220+
}
221+
.term > .tc, .term > .tt {
222+
border-top: none;
223+
}
224+
.term span, .term i {
225+
display: inline-block;
226+
background: rgba(0, 0, 0, .2);
227+
color: white;
228+
min-width: 20px;
229+
padding: 0 3px;
230+
border-radius: 5px;
231+
text-align: center;
232+
font-family: 'Times New Roman', Times, serif;
233+
transition: background-color 0.3s;
234+
}
235+
.term .selected span, .term .selected i {
236+
background: rgba(0, 112, 204, 0.7);
237+
color: white;
238+
}
239+
.term i {
240+
background: rgba(0, 0, 0, .1);
241+
color: inherit;
242+
}
243+
.term div {
244+
margin: 5px 1px 0 1px;
245+
}
246+
</style>
247+
<body></body>
248+
<script src="index.js"></script>

‎halogen-kdmoncat/html/index.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
var Main = require("../output/KDMonCat.Main")
2+
var runHalogenAff = require("../output/Halogen.Aff.Util").runHalogenAff
3+
var initialModel = Main.parseHash(location.hash)
4+
runHalogenAff(Main.runJs2(initialModel)("body"))()

‎halogen-kdmoncat/html/logo-statebox.svg

+1
Loading

0 commit comments

Comments
 (0)