There was a longer break in development of the projects as I have been focusing on the thesis, where progress is not represented accurately in the repository.
There was also some progress on featurse that haven’t been tidied up and committed yet, such as drag'n'drop / direct file upload. Those features will probably get their own post sometime soon.
Today I spent some time to implement one of the example use-cases that will be part of the theoretical text as well,
the ‘pinwall’ demo [5ec1fe2
].
The Pinwall example renders all its children as resizeable and movable boxes that can be freely positioned on a canvas:
Any changes to the box positions and sizes are saved persistently as a pinwall_info
facet on each child.
For example the size and coordinates of the image can be found at image/pinwall_info: text/json
.
Rendering the children themselves is pretty easy:
import article, div from require 'mmm.dom'
import convert from require 'mmm.mmmfs.conversion'
update_info = (fileder, x, y, w, h) ->
info = (fileder\get 'pinwall_info: table') or x: 100, y: 100, w: 300, h: 300
info.x = x if x
info.y = y if y
info.w = w if w
info.h = h if h
json = convert 'table', 'text/json', info, fileder, 'pinwall_info'
fileder\set 'pinwall_info: text/json', json
=>
observe = ... -- (ommited - calls `update_info` when child is resized)
children = for child in *@children
info = (child\get 'pinwall_info: table') or x: 100, y: 100, w: 300, h: 300
wrapper = div {
style:
position: 'absolute'
-- (more styling omitted here)
left: "#{info.x}px"
top: "#{info.y}px"
width: "#{info.w}px"
height: "#{info.h}px"
-- handle for moving the child
div {
style:
-- (styling omitted here)
onmousedown: ... -- (omitted)
}
-- child content
div {
style:
width: '100%'
height: '100%'
background: 'var(--white)'
(child\gett 'mmm/dom')
}
}
observe wrapper, child
wrapper
children.style = {
width: '1000px'
height: '500px'
}
children.onmouseup = ... -- (omitted)
children.onmousemove = ... -- (omitted)
children.onmouseleave = ... -- (omitted)
article children
The rest of the code is just about catching the events when the mouse is clicked/release/moved and when a child is resized,
and then calling update_info
as appropriate.