publish snap.love
This commit is contained in:
Kartik K. Agaram
parent
c8863eb204
commit
1965a0cb93
133
README.md
133
README.md
|
|
@ -1,87 +1,15 @@
|
|||
# LuaML: An experimental markup language and 'browser' for it
|
||||
# snap.love: a graph drawing tool
|
||||
|
||||
Demo of a simple structured editor for formatted text atop an infinite 2D
|
||||
surface that can be panned and zoomed.
|
||||
Unlike [Graphviz](https://graphviz.org) and [PlantUML](https://plantuml.com),
|
||||
this tool is for small graphs where you want complete control over layout.
|
||||
Unlike PowerPoint or draw.io, this tool results generates text files that are
|
||||
more amenable to version control. The catch: it's a lot more limited than all
|
||||
these tools; all you can do so far is draw rectangles and edges between them.
|
||||
|
||||
For ease of implementation, LuaML documents are always legal Lua objects
|
||||
rather than a first-class language like HTML. A simple example:
|
||||
|
||||
|
||||
```
|
||||
{ type='text', data={'hello, world!',} }
|
||||
```
|
||||
|
||||
Text object data consists of an array of strings, one for each line. No
|
||||
newlines at the moment. (Everything is subject to change.)
|
||||
|
||||
You can draw various shapes on the surface:
|
||||
```
|
||||
{type='line', data={0,0, 0,600}},
|
||||
{type='line', data={0,0, 800,0}},
|
||||
{type='text', data={'0'}, x=-20,y=-20},
|
||||
{type='rectangle', x=50,y=50, w=20,h=80, r=1,g=0,b=0},
|
||||
{type='text', data={'abc', 'def'}, x=150, y=50, w=50,h=50, fg={r=0,g=0.4, b=0.9}},
|
||||
{type='circle', x=300,y=200, radius=40, r=1,g=0,b=1},
|
||||
{type='arc', x=0,y=0, radius=50, angle1=0, angle2=math.pi*2/3},
|
||||
{type='ellipse', x=100,y=100, radiusx=10, radiusy=50},
|
||||
{type='bezier', data={25,25, 25,125, 75,25, 125,25}},
|
||||
```
|
||||
|
||||
But most of the design effort so far has focused on the 3 text types:
|
||||
* `text` for runs of text to be line-wrapped over the given `width`.
|
||||
* `rows` and `cols`, the only hierarchical types, ways to compose `text` nodes
|
||||
into various grid layouts.
|
||||
|
||||
Some more examples.
|
||||
|
||||
Adjust foreground/background color (akin to a `div` with inline `style`):
|
||||
```
|
||||
{ type='text', fg={r=1,g=0,b=0}, bg={r=1,g=1,b=0},
|
||||
data={'hello, world!'}
|
||||
}
|
||||
```
|
||||
|
||||
Two-column text:
|
||||
```
|
||||
{ type='cols', data={
|
||||
{type='text', data={'first column'}},
|
||||
{type='text', data={'second column'}},
|
||||
}}
|
||||
```
|
||||
|
||||
A table with two rows and two columns:
|
||||
```
|
||||
{ type='cols', data={
|
||||
{ type='rows', data={
|
||||
{type='text', data={'abc'}},
|
||||
{type='text', data={'def'}},
|
||||
}},
|
||||
{ type='rows', data={
|
||||
{type='text', data={'ghi'}},
|
||||
{type='text', data={'jkl'}},
|
||||
}},
|
||||
}}
|
||||
```
|
||||
|
||||
(With the current design, cols of rows seem strictly superior to rows of cols.
|
||||
Column boundaries line up consistently across rows.)
|
||||
|
||||
This is still quite incomplete. Come help figure out its future. Currently
|
||||
supported "attributes":
|
||||
* `fg`, `bg` for color (no `blink` tag yet)
|
||||
* `margin` (used as `margin-left` or `margin-top` depending on whether the
|
||||
parent node has `cols` or `rows` respectively)
|
||||
* `width` in pixels (I'd like to add '%' units here.)
|
||||
|
||||
Since this is all Lua, unrecognized attributes are silently ignored. In the
|
||||
app itself you'll see attributes like `name` and `doc`. (This is a nightmare
|
||||
if you imagine this turning into some sort of long-lived standard with
|
||||
versions and compatibility guarantees. I don't. I just want an app-internal
|
||||
format for creating UIs with very little code.)
|
||||
|
||||
LuaML.love is a fork of [lines.love](http://akkartik.name/lines.html), an
|
||||
editor for plain text where you can also seamlessly insert line drawings.
|
||||
Designed above all to be easy to modify and give you early warning if your
|
||||
modifications break something.
|
||||
You can't change the styling. Unless you modify the code. But that's easy!
|
||||
Read on.
|
||||
|
||||
## Getting started
|
||||
|
||||
|
|
@ -89,26 +17,26 @@ Install [LÖVE](https://love2d.org). It's just a 5MB download, open-source and
|
|||
extremely well-behaved. I'll assume below that you can invoke it using the
|
||||
`love` command, but that might vary depending on your OS.
|
||||
|
||||
Run this app from the terminal, [passing its directory to LÖVE](https://love2d.org/wiki/Getting_Started#Running_Games)
|
||||
Run this app from the terminal, [passing its directory to LÖVE](https://love2d.org/wiki/Getting_Started#Running_Games).
|
||||
|
||||
You'll see a page that's currently hard-coded in the app.
|
||||
You'll see a single box on screen. Drag the surface or press arrow keys to pan
|
||||
around. Try dragging the border of the box. You'll see an edge stick out.
|
||||
Release the mouse button, and a new box (node) will pop out at the other end
|
||||
of the edge. Try dragging the top-left bar for each box. They move relative to
|
||||
each other. Try typing inside. The text wraps within and the box grows taller
|
||||
to accomodate it. Try dragging the parallel lines to the right of a box. The
|
||||
width of the box changes.
|
||||
|
||||
|
||||
|
||||
All text is currently editable. There's a table on the right that will grow
|
||||
and shrink as you add and delete text.
|
||||
|
||||
Changes you make are currently not saved. This is just a demo.
|
||||
|
||||
To pan, drag the surface around. To increase/decrease zoom, press `ctrl+=`,
|
||||
`ctrl+-` respectively. To reset zoom press `ctrl+0`.
|
||||
Try quitting and restarting. Your changes will still be present. By default,
|
||||
snap.love writes to a file called `graph` in a directory specific to this app
|
||||
(https://love2d.org/wiki/love.filesystem.getSourceBaseDirectory). To switch to
|
||||
a different file, drop it on the snap.love window. You can also pass in a
|
||||
filename when starting the app from the terminal.
|
||||
|
||||
## Hacking
|
||||
|
||||
To edit formatting you'll need to modify the code for the app. To do
|
||||
this live without restarting the app each time, download [the driver
|
||||
app](https://git.sr.ht/~akkartik/driver.love). Here's an example session
|
||||
using a fork of this repo:
|
||||
To make changes to this app without restarting the app each time, download
|
||||
[the driver app](https://git.sr.ht/~akkartik/driver.love). Example session:
|
||||
|
||||
|
||||
|
||||
|
|
@ -119,7 +47,7 @@ To publish your changes:
|
|||
|
||||
## Keyboard shortcuts
|
||||
|
||||
While editing text:
|
||||
While editing within a node:
|
||||
* `ctrl+f` to find patterns within a file
|
||||
* `ctrl+c` to copy, `ctrl+x` to cut, `ctrl+v` to paste
|
||||
* `ctrl+z` to undo, `ctrl+y` to redo
|
||||
|
|
@ -165,17 +93,14 @@ found anything amiss: http://akkartik.name/contact
|
|||
|
||||
This repo is a fork of [lines.love](http://akkartik.name/lines.html), an
|
||||
editor for plain text where you can also seamlessly insert line drawings.
|
||||
Its immediate upstream is [the template repo for freewheeling apps](https://git.sr.ht/~akkartik/template-live-editor).
|
||||
Updates to it can be downloaded from the following mirrors:
|
||||
Its immediate upstream is [luaML.love](https://git.sr.ht/~akkartik/luaML.love),
|
||||
a box model for a Lua-based markup language that models an infinite pannable,
|
||||
zoomable 2D surface. Updates to it can be downloaded from:
|
||||
|
||||
* https://git.sr.ht/~akkartik/luaML.love
|
||||
* https://codeberg.org/akkartik/luaML.love
|
||||
* https://git.sr.ht/~akkartik/snap.love
|
||||
|
||||
Further forks are encouraged. If you show me your fork, I'll link to it here.
|
||||
|
||||
* https://git.sr.ht/~akkartik/driver.love - the driver app for modifying
|
||||
freewheeling apps without restarting them.
|
||||
|
||||
## Feedback
|
||||
|
||||
[Most appreciated.](http://akkartik.name/contact)
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 595 KiB |
BIN
assets/1.png
BIN
assets/1.png
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
BIN
assets/2.gif
BIN
assets/2.gif
Binary file not shown.
|
Before Width: | Height: | Size: 792 KiB After Width: | Height: | Size: 4.8 MiB |
BIN
assets/2.webm
BIN
assets/2.webm
Binary file not shown.
292
default_map
292
default_map
|
|
@ -1,20 +1,290 @@
|
|||
{
|
||||
"Page2": {
|
||||
"x": 14,
|
||||
"y": 175,
|
||||
"sx": {
|
||||
"x": 1921.1111111111,
|
||||
"y": 1877.7777777778,
|
||||
"w": 600,
|
||||
"h": 780
|
||||
"h": 78,
|
||||
},
|
||||
"on_resize": {
|
||||
"x": 1927.7777777777,
|
||||
"y": 1040,
|
||||
"w": 600,
|
||||
"h": 286,
|
||||
},
|
||||
"node_height": {
|
||||
"x": 650,
|
||||
"y": 4159.3333333333,
|
||||
"w": 600,
|
||||
"h": 156,
|
||||
},
|
||||
"on": {
|
||||
"x": -3062.8571428571,
|
||||
"y": -585.71428571429,
|
||||
"w": 600,
|
||||
"h": 754,
|
||||
},
|
||||
"table.copy": {
|
||||
"x": 3895,
|
||||
"y": 1129.1666666667,
|
||||
"w": 600,
|
||||
"h": 182,
|
||||
},
|
||||
"compute_layout_for_edge": {
|
||||
"x": 4486.7857142857,
|
||||
"y": 2008.2142857143,
|
||||
"w": 600,
|
||||
"h": 312,
|
||||
},
|
||||
"on_move_bar": {
|
||||
"x": 1926.6666666666,
|
||||
"y": 716.66666666664,
|
||||
"w": 600,
|
||||
"h": 286,
|
||||
},
|
||||
"centroid": {
|
||||
"x": 3855.1785714286,
|
||||
"y": 2074.8214285714,
|
||||
"w": 600,
|
||||
"h": 156,
|
||||
},
|
||||
"A": {
|
||||
"x": 649,
|
||||
"y": 161,
|
||||
"w": 600,
|
||||
"h": 494,
|
||||
},
|
||||
"on_node": {
|
||||
"x": 3238.8611111111,
|
||||
"y": 1573.5396825397,
|
||||
"w": 600,
|
||||
"h": 338,
|
||||
},
|
||||
"B": {
|
||||
"x": -630,
|
||||
"y": -4,
|
||||
"x": 1277,
|
||||
"y": 93,
|
||||
"w": 600,
|
||||
"h": 832
|
||||
"h": 832,
|
||||
},
|
||||
"Page": {
|
||||
"x": 642,
|
||||
"y": 79,
|
||||
"line_height": {
|
||||
"x": 1925.8412698413,
|
||||
"y": 1651.9682539682,
|
||||
"w": 600,
|
||||
"h": 1482
|
||||
"h": 156,
|
||||
},
|
||||
"on.load_settings": {
|
||||
"x": -2198.5714285714,
|
||||
"y": 248.57142857143,
|
||||
"w": 600,
|
||||
"h": 182,
|
||||
},
|
||||
"Nodes": {
|
||||
"x": 647,
|
||||
"y": -7,
|
||||
"w": 600,
|
||||
"h": 104,
|
||||
},
|
||||
"on.keychord_press": {
|
||||
"x": -789.3095238096,
|
||||
"y": 1553.1428571428,
|
||||
"w": 600,
|
||||
"h": 1716,
|
||||
},
|
||||
"A1": {
|
||||
"x": 641.11111111111,
|
||||
"y": -875.55555555556,
|
||||
"w": 600,
|
||||
"h": 702,
|
||||
},
|
||||
"Surface": {
|
||||
"x": -900.66666666667,
|
||||
"y": 96.222222222222,
|
||||
"w": 600,
|
||||
"h": 52,
|
||||
},
|
||||
"initialize_editor": {
|
||||
"x": 1289.7142857143,
|
||||
"y": 1180.2857142857,
|
||||
"w": 600,
|
||||
"h": 364,
|
||||
},
|
||||
"box_height": {
|
||||
"x": -4.2857142857143,
|
||||
"y": 1424.2857142857,
|
||||
"w": 600,
|
||||
"h": 494,
|
||||
},
|
||||
"y_at_x": {
|
||||
"x": 3854.6666666667,
|
||||
"y": 2286,
|
||||
"w": 600,
|
||||
"h": 234,
|
||||
},
|
||||
"on.mouse_press": {
|
||||
"x": 2561.4444444444,
|
||||
"y": -276.22222222222,
|
||||
"w": 600,
|
||||
"h": 1066,
|
||||
},
|
||||
"First_available_id": {
|
||||
"x": 645.55555555556,
|
||||
"y": -91.111111111111,
|
||||
"w": 600,
|
||||
"h": 26,
|
||||
},
|
||||
"scale": {
|
||||
"x": 1300.6349206349,
|
||||
"y": 2179.5238095238,
|
||||
"w": 600,
|
||||
"h": 104,
|
||||
},
|
||||
"Settings": {
|
||||
"x": -2201.4285714286,
|
||||
"y": 131.42857142857,
|
||||
"w": 600,
|
||||
"h": 26,
|
||||
},
|
||||
"on.save_settings": {
|
||||
"x": -2958.5714285715,
|
||||
"y": 258.57142857143,
|
||||
"w": 600,
|
||||
"h": 130,
|
||||
},
|
||||
"update_editor_box": {
|
||||
"x": 1297.1428571429,
|
||||
"y": 1570,
|
||||
"w": 600,
|
||||
"h": 546,
|
||||
},
|
||||
"on.mouse_release": {
|
||||
"x": 2559.7777777778,
|
||||
"y": 706.24206349207,
|
||||
"w": 600,
|
||||
"h": 936,
|
||||
},
|
||||
"on.update": {
|
||||
"x": 1927.3650793652,
|
||||
"y": -265.77777777778,
|
||||
"w": 600,
|
||||
"h": 962,
|
||||
},
|
||||
"on.code_change": {
|
||||
"x": -1525.7142857143,
|
||||
"y": 581.42857142857,
|
||||
"w": 600,
|
||||
"h": 104,
|
||||
},
|
||||
"save_graph_to_disk": {
|
||||
"x": -2950,
|
||||
"y": 485.71428571433,
|
||||
"w": 600,
|
||||
"h": 780,
|
||||
},
|
||||
"distance_sq": {
|
||||
"x": 3856.75,
|
||||
"y": 3143.25,
|
||||
"w": 600,
|
||||
"h": 78,
|
||||
},
|
||||
"on.file_drop": {
|
||||
"x": -1535.7142857142,
|
||||
"y": 1014.2857142857,
|
||||
"w": 600,
|
||||
"h": 286,
|
||||
},
|
||||
"set_mouse_cursor": {
|
||||
"x": 1925.4444444445,
|
||||
"y": 1416.1111111111,
|
||||
"w": 600,
|
||||
"h": 182,
|
||||
},
|
||||
"Filename": {
|
||||
"x": -1532.8571428571,
|
||||
"y": 81.428571428571,
|
||||
"w": 600,
|
||||
"h": 52,
|
||||
},
|
||||
"sy": {
|
||||
"x": 1924.4444444445,
|
||||
"y": 1998.8888888889,
|
||||
"w": 600,
|
||||
"h": 78,
|
||||
},
|
||||
"Viewport": {
|
||||
"x": -901.11111111111,
|
||||
"y": -35.555555555552,
|
||||
"w": 600,
|
||||
"h": 52,
|
||||
},
|
||||
"x_at_y": {
|
||||
"x": 3854.5833333333,
|
||||
"y": 2767.9166666667,
|
||||
"w": 600,
|
||||
"h": 234,
|
||||
},
|
||||
"next_key": {
|
||||
"x": 3217.7777777778,
|
||||
"y": 188.88888888889,
|
||||
"w": 600,
|
||||
"h": 130,
|
||||
},
|
||||
"on_border": {
|
||||
"x": 2571.1111111111,
|
||||
"y": 1897.7777777778,
|
||||
"w": 600,
|
||||
"h": 676,
|
||||
},
|
||||
"compute_layout": {
|
||||
"x": 651.50793650793,
|
||||
"y": 729.18650793652,
|
||||
"w": 600,
|
||||
"h": 3198,
|
||||
},
|
||||
"on.draw": {
|
||||
"x": -906.28571428571,
|
||||
"y": 215,
|
||||
"w": 600,
|
||||
"h": 1144,
|
||||
},
|
||||
"on.quit": {
|
||||
"x": -1528.5714285714,
|
||||
"y": 761.42857142857,
|
||||
"w": 600,
|
||||
"h": 130,
|
||||
},
|
||||
"on.initialize": {
|
||||
"x": -1531.4285714285,
|
||||
"y": 211.42857142857,
|
||||
"w": 600,
|
||||
"h": 312,
|
||||
},
|
||||
"intersect_with_centroid": {
|
||||
"x": 3223.3333333333,
|
||||
"y": 2003.3333333333,
|
||||
"w": 600,
|
||||
"h": 1014,
|
||||
},
|
||||
"test_to_key": {
|
||||
"x": 3856.3333333333,
|
||||
"y": 413.33333333333,
|
||||
"w": 600,
|
||||
"h": 286,
|
||||
},
|
||||
"to_key": {
|
||||
"x": 3223.3333333333,
|
||||
"y": 416.66666666667,
|
||||
"w": 600,
|
||||
"h": 390,
|
||||
},
|
||||
"load_graph_from_disk": {
|
||||
"x": -2197.1428571429,
|
||||
"y": 488.57142857143,
|
||||
"w": 600,
|
||||
"h": 182,
|
||||
},
|
||||
"table.length": {
|
||||
"x": 3210.3333333333,
|
||||
"y": 1125,
|
||||
"w": 600,
|
||||
"h": 208,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue