Couple of questions

[sebakerckhof]

Hey,

Thanks for this great idea.
For a while I was thinking about a good way to simplify touch animations. I looked at famo.us, which has this nice concept of syncing inputs to variables, but it looks too immature and requires you to completely move away from the normal way of developing web apps.

Then I came across this idea and I really love it. However, I have some ideas to extend this, but before diving in, it seems a good idea to discuss them with you:

1. Allow other gestures than only drag.
   Currently the manipulator allows only to bind a variable to pan/drag gesture on an element. However, this could be abstracted away so you could sync zoom (pinch) and rotate to cassowary variables. This could look something like:

createManipulator(context variable, binded element,gesture,gesture options,multiplier)

Where gesture is: pan,pan-horizontal,pan-vertical,pinch,pinch-in,pinch-out,rotate,rotate-left,rotate-right
And gesture-options are hammerjs options like {'pointers':2} for two-finger panning
And multiplier multiplies the value that gets synced with the cassowary variable (eg. scale for pinch, angle for rotation, x and y for pan)

One issue is that this would require non-drag actions (eg. pinch and rotate) to also have a pinch/rotate velocity, which I believe is currently not present in Hammerjs. Solution would be to implement this in hammerjs (I'll have a look at this).

Another one is that manipulator might get bloated, it is now already responsible for quite a lot of stuff. Solution would be to abstract this away from the manipulator. So the manipulator just takes in a javascript variable that gets changed by some other object that is responsible for syncing with gestures (which would also allow one to write extensions for other gesture libraries than hammerjs). This could also allow simple animations by animating this variable in javascript (but this is just on top of my head and probably not such a great idea)

2. Allow other properties.
   Eg. changing opacity (fading in/out) as an object gets dragged. Is this as easy as modifying the Box for other (numeric) css properties and expressing the opacity in relation to a variable?

3. Animations
   Important, but I have no idea how to do this nicely right now. I know you are looking at it, but just wanted to mention it.

4. Angularjs directives
   I'm thinking about a way to integrate this into angularjs, so you could do something like

<div slalom-box slalom-constraints="[...]">...</div><div slalom-manipulator="pan-horizontal" slalom-manipulates="cassowary variable"></div>

But this is still very preliminary (in fact, I just made this up while typing), and it would require some thinking about the way we define cassowary contexts and refer to them using directives. But I believe it would be super-awesome if I or someone else could pull this off.

[iamralpht]

Hi!

1. I wanted to have multiple manipulators for scale/rotate/etc since there are multiple touch points. I'm not sure if it's possible to express the constraints for that (because the solver probably needs to figure out euclidian distance which is obviously non-linear from touch points).

If you look at the source to createManipulator then you'll see it's a fairly simple helper function. Currently Manipulator understands the Hammer.js pan event stream, but it'd be OK to actually pull that out into the createManipulator helper. Then we could have other variants of createManipulator for handling some of the multitouch gestures you mention, since I don't think it can be done with linear constraints.

1. Yup, Box is the current (incredibly minimal) binding between constrained variables and the DOM. You can bind any property in the same way, it's just glue code between Cassowary and DOM (and so it'd be completely replaced for any native port, or for targeting geometry in a webgl app, etc).
2. It'll be something like telling a Manipulator to go to a given value, and then the Manipulator will create an animation using some physics simulation.
3. Interesting! I haven't used angular before (I've used Vue which does a similar cross-cutting via directives). The piece I'm worried about it how it interacts with existing CSS layout, since Slalom/Cassowary operate in a global coordinate space whereas "position absolute" is a more traditional parent-relative/local setup.

Thanks for writing these questions/ideas up. I think Slalom is going to be pretty fun for a while as these issues get figured out!