git.s-ol.nu mmm / 784e0b7
add ba_log entry 2019-11-25 s-ol 1 year, 10 months ago
5 changed file(s) with 92 addition(s) and 1 deletion(s). Raw diff Collapse all Expand all
99 2019-10-27
1010 2019-10-29
1111 2019-11-01
12 2019-11-25
66
77 Here is a short demo video of these features:
88
9 <mmm-embed path="demo"></mmm-embed>
9 <mmm-embed nolink path="demo"></mmm-embed>
1010
1111 As usual, this can be tried out immediately at [`sandbox.s-ol.nu`](//sandbox.s-ol.nu)
1212
0 There was a longer break in development of the projects as I have been focusing on the thesis,
1 where progress is not represented accurately in the repository.
2
3 There was also some progress on featurse that haven't been tidied up and committed yet,
4 such as drag'n'drop / direct file upload. Those features will probably get their own post sometime soon.
5
6 Today I spent some time to implement one of the example use-cases that will be part of the theoretical text as well,
7 [the 'pinwall' demo][pinwall] \[[`5ec1fe2`][5ec1fe2]\].
8
9 The Pinwall example renders all its children as resizeable and movable boxes that can be freely positioned on a canvas:
10
11 <mmm-embed nolink path="demo"></mmm-embed>
12
13 Any changes to the box positions and sizes are saved persistently as a `pinwall_info` facet on each child.
14 For example the size and coordinates of the image can be found at [`image/pinwall_info: text/json`][info].
15
16 Rendering the children themselves is pretty easy:
17
18 ```moon
19 import article, div from require 'mmm.dom'
20 import convert from require 'mmm.mmmfs.conversion'
21
22 update_info = (fileder, x, y, w, h) ->
23 info = (fileder\get 'pinwall_info: table') or x: 100, y: 100, w: 300, h: 300
24 info.x = x if x
25 info.y = y if y
26 info.w = w if w
27 info.h = h if h
28
29 json = convert 'table', 'text/json', info, fileder, 'pinwall_info'
30 fileder\set 'pinwall_info: text/json', json
31
32 =>
33 observe = ... -- (ommited - calls `update_info` when child is resized)
34
35 children = for child in *@children
36 info = (child\get 'pinwall_info: table') or x: 100, y: 100, w: 300, h: 300
37 wrapper = div {
38 style:
39 position: 'absolute'
40 -- (more styling omitted here)
41
42 left: "#{info.x}px"
43 top: "#{info.y}px"
44 width: "#{info.w}px"
45 height: "#{info.h}px"
46
47 -- handle for moving the child
48 div {
49 style:
50 -- (styling omitted here)
51
52 onmousedown: ... -- (omitted)
53 }
54
55 -- child content
56 div {
57 style:
58 width: '100%'
59 height: '100%'
60 background: 'var(--white)'
61
62 (child\gett 'mmm/dom')
63 }
64 }
65
66 observe wrapper, child
67
68 wrapper
69
70 children.style = {
71 width: '1000px'
72 height: '500px'
73 }
74
75 children.onmouseup = ... -- (omitted)
76 children.onmousemove = ... -- (omitted)
77 children.onmouseleave = ... -- (omitted)
78
79 article children
80 ```
81
82 [The rest of the code][source] is just about catching the events when the mouse is clicked/release/moved and when a child is resized,
83 and then calling `update_info` as appropriate.
84
85 [info]: /articles/mmmfs/examples/pinwall/image/pinwall_info:%20text/html+interactive
86 [pinwall]: /articles/mmmfs/examples/pinwall/
87 [source]: https://git.s-ol.nu/mmm/blob/5ec1fe2fc943ad4123fac138de70d4152e8b341d/root/articles/mmmfs/examples/pinwall/text%24moonscript%20-%3E%20fn%20-%3E%20mmm%24dom.moon
88 [5ec1fe2]: https://git.s-ol.nu/mmm/blob/5ec1fe2fc943ad4123fac138de70d4152e8b341d/