GEBIQLKUHEHQMFSBPRIP4WLE2DMUQZYWDCDHU32HWJQT2SKDY5YQC M6MCNPIKGBF4L4WETTIU34MFKISQZNMQDMDLZIAY3RSQEOL6QAOQC EZ53CWQ4SMKXKXI7JP7FY4AF46UNDYHGLBII3BV6CV6U52LSUG4AC NYHCXNQ2MI3SSHTNTHDOSRNXFDNKV4ECAHFDEKX3T7KPUFHMRSPQC DFXPZNH6FTVKXXFSTTE6UO7UK7A5H3JMYUDQPQSTPWP4SXAVEMLAC AZ6PV6PYUJUSE6GNYZV465PQCUHJKZKV33S3X7WGQB42DUQG55IQC SJ5GG7ZOYJDM6WQMR46TAN6EBE66P3JMYYENZ6E5QQIDWQGDX2OQC MFBZCXOUHS7ELP3SRTA7VDO32CUSRDIX44LXSMBPIAE5JXKFWXOQC FS2ITYYHBLFT66YUC3ENPFYI2HOYHOVEPQIN7NQR6KF5MEK4NKZAC LFAROW2YSPM7534MX4G4BM6GSIHEQWQJH4QTGP4EGYQKRX5FP27AC QXJ3HUDHKPVZNC4LF6IC5VWQWDT7XRKASM2PLFMTSM3NGJKSHDPQC MD3W5IRAC6UQALQE4LJC52VQNDO3I3HXF3XE2XHDABXBYJBUVAXQC GEBTJKVAPRDVGOP2U7RQNQYUG77RKJS4Q5PMMSBIZIFW6KCATLDQC 5TDFTJBI6I633A4W2NWMMP3YRYOTLRSBJU7XBU5H45UETXSPGSBQC 4Q25M7G4E3RMETP7XKWQPJLJWOHXKCM3LRTKNJRJTHQ23I6FWD3QC D4FEFHQCSILZFQ5VLWNXAIRZNUMCDNGJSM4UJ6T6FDMMIWYRYILQC ZTMRQZSWUL6FJRI4C4H37MR2IMV22DB6KRGEOUNYRWW5CTAVQFKAC HUDGLWXFMJ2KIMJTTDLYCCTNEFFIE4HQXVF6VU362XQTEEZTRWBAC PNBKVYZ4ANUAZNQN6KEWYNDF7552ROZPNAPRJE7Q6O7ZZJMJ3S3QC CZRMAMSBRVX26IXKHNPG6M3YSWMOZTM73X3XHAMBDSNETTFVRCUQC 6P56XEVJKQ6A2JY75HNFYHYUPWIJ3NV62MHKVTCCWTB6O7FYWLJQC VJFMD2XQLF2LM6T34MIBSYU4RFHSN5BBUEFPRTIE2M7DUCFNVIOAC VWW4MJLQVEK5672QUZCDFUJRERYSKDT57UVWH5XUHUEX2P2M6UUQC LCSZNSQVUXHJQNXVKPCG7OY5CKHRX4R754L7REXUX6AVLKUOXQJQC GLTYU2NQK5S76IHURI56DNG6VLIVCQ7WCSJ44YUQPBEU2BVV7EIAC "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: