NMQL3AOQQAP2IUVE3KEIGKNYESCHO6CHLAGNYRBGISGNGP2OTD4AC XKUSDGGPNAEM4SY4GQMUO6IVPI7OPNYDUI4SQBMIT25TCTENK4PAC EZ53CWQ4SMKXKXI7JP7FY4AF46UNDYHGLBII3BV6CV6U52LSUG4AC QYDA7JDUWD24VHRETDSPIEQFIPWYMAK2JQ6PIAHUTNQRUIPTEYYQC DFXPZNH6FTVKXXFSTTE6UO7UK7A5H3JMYUDQPQSTPWP4SXAVEMLAC AZ6PV6PYUJUSE6GNYZV465PQCUHJKZKV33S3X7WGQB42DUQG55IQC XQZO4DUY3GDV2W6JNWDKCVIDGX7YBIONJC2V3BQEQY7XCIXREBEAC EZHO4TSWIYYUE73S6XQWIEF3HA3H7MKCNJOT27NTWTVSPVS2SL5QC FS2ITYYHBLFT66YUC3ENPFYI2HOYHOVEPQIN7NQR6KF5MEK4NKZAC GDBDGLRHJSMN527PHXGZVSGF55EYT4X3GFNF4LF6363JE2FGBQXQC MISEW25VIMXQ6ID37VQ365KAMPQ5O4COYWEIK6M4JXKIG7L5DVSQC MD3W5IRAC6UQALQE4LJC52VQNDO3I3HXF3XE2XHDABXBYJBUVAXQC BPYWIU627AGHPXJ7KAZEYFJMUEVTCHQ624UHTLZ4VMAVOLZM255AC 2DVVKKVA6PJ7VKYLGPQ22AXUB6ZWFMPWB445PRDZJDNLURUFDNDQC 6BNMYYM33AUSDJZACOLZOPGB77PVYOGFH3HUCIN2Q7TAAWQFK3JQC D4FEFHQCSILZFQ5VLWNXAIRZNUMCDNGJSM4UJ6T6FDMMIWYRYILQC ZTMRQZSWUL6FJRI4C4H37MR2IMV22DB6KRGEOUNYRWW5CTAVQFKAC HUDGLWXFMJ2KIMJTTDLYCCTNEFFIE4HQXVF6VU362XQTEEZTRWBAC PNBKVYZ4ANUAZNQN6KEWYNDF7552ROZPNAPRJE7Q6O7ZZJMJ3S3QC CZRMAMSBRVX26IXKHNPG6M3YSWMOZTM73X3XHAMBDSNETTFVRCUQC OJ2CLK4QZNZYDVBJTUF3IXVGVP2YI6C2HQNYF6O5MGKS47IPEWHAC UCA3SCAJ7IF4FY73BKAXVHTGST74LJ62SYKJEBMHQGVTEHE44Z2QC XDKUT4OY6J3BEOUHE3NFQWYYE66SB25D6J3HNR7C4XRTWKKDCWWQC SJZ5TLMMU6B2PZKN4FP45FIQD2ETJBIEQOCYMP5ZBJQW6N2VMY4AC OBSPQ3PDBAFEAHH4F6IZCN4GBEBQ7PJSA7O2S3DFOJYGIRQX5VCQC "Page2": {"x": 14,"y": 175,
"sx": {"x": 1921.1111111111,"y": 1877.7777777778,"w": 600,"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,
"h": 1482
"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,
Demo of a simple structured editor for formatted text atop an infinite 2Dsurface 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 aremore amenable to version control. The catch: it's a lot more limited than allthese tools; all you can do so far is draw rectangles and edges between them.
For ease of implementation, LuaML documents are always legal Lua objectsrather 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. Nonewlines 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}},```
You can't change the styling. Unless you modify the code. But that's easy!Read on.
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` nodesinto 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. Currentlysupported "attributes":* `fg`, `bg` for color (no `blink` tag yet)* `margin` (used as `margin-left` or `margin-top` depending on whether theparent 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 theapp itself you'll see attributes like `name` and `doc`. (This is a nightmareif you imagine this turning into some sort of long-lived standard withversions and compatibility guarantees. I don't. I just want an app-internalformat for creating UIs with very little code.)LuaML.love is a fork of [lines.love](http://akkartik.name/lines.html), aneditor 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 yourmodifications break something.
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.
Changes you make are currently not saved. This is just a demo.
You'll see a single box on screen. Drag the surface or press arrow keys to panaround. 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 endof the edge. Try dragging the top-left bar for each box. They move relative toeach other. Try typing inside. The text wraps within and the box grows tallerto accomodate it. Try dragging the parallel lines to the right of a box. Thewidth of the box changes.
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 toa different file, drop it on the snap.love window. You can also pass in afilename when starting the app from the terminal.
To edit formatting you'll need to modify the code for the app. To dothis live without restarting the app each time, download [the driverapp](https://git.sr.ht/~akkartik/driver.love). Here's an example sessionusing 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:
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: