Draggable & StateModifier & GenericSync Docs

[rjmoggach]

Hey there,

I've been struggling with what is probably one or two lines of code and lack of documentation or community response/expertise via StackOverflow, IRC and the like. Apologies in advance for posting in Issues/here.

I'm trying to drive transformations of a StateModifier with a separate transparent Surface - I've spent hours trying to get the secret sauce that is pipe, on update, setPosition, setTransform, or transformFrom without success...

template

<template name="test3">
  {{#ContainerSurface size="[undefined,undefined]" origin='[0.5,0.5]' align='[0.5,0.5]' perspective=getPerspective overflow="hidden"}}

    {{#StateModifier id="cube3" size="[400,400]" origin="[0.5,0.5]" align="[0.5,0.5]"}}

      {{#StateModifier size="[400,400]" origin="[0.5,0.5]" align="[0.5,0.5]" translate="[0,0,0]"}}
        {{>Surface template="cubeFace" class="grayDarker backfaceVisible" size="[undefined,undefined]"}}
      {{/StateModifier}}

      {{#StateModifier size="[400,400]" origin="[0,0.5]" align="[1,0.5]" rotateY="90"}}
        {{>Surface template="cubeFace" class="grayDark" size="[undefined,undefined]"}}
      {{/StateModifier}}

    {{/StateModifier}}

  {{#View origin='[0.5,0.5]' align='[0.5,0.5]'}}
    {{>Surface id="drag3" template="emptyDiv" size="[400,400]" class="redBorder" modifier="Draggable"}}
  {{/View}}
  {{/ContainerSurface}}
</template>

my attempt (coffeescript)

Template.test3.rendered = ->
  Session.set 'perspective',1000
  position=[0,0]

  # TODO: this will NOT update when the window is resized
  @extent = Math.round (window.innerWidth/2)
  dragFV = FView.byId 'drag3'
  dragSrf = dragFV.surface
  drag = dragFV.modifier

  drag.setOptions
    xRange: [-@extent,@extent]
    yRange: [-1,1]

  cubeFV = FView.byId 'cube3'
  cubeMod = cubeFV.modifier

  sync = new Famous.GenericSync ['mouse','touch']

  dragSrf.pipe drag

  drag.on 'update', (data) ->
    position = data.position
    cubeMod.setTransform Famous.Transform.translate position[0],position[1],0

  drag.on 'end', =>
    cubeMod.setTransform Famous.Transform.translate 0,0,0
    drag.setPosition [0,0],
      curve : 'easeOutBounce'
      duration : 300
    cubeFV.modifier.setTransform Famous.Transform.translate [0,0,0]

Lots of great demos that scratch the surface but haven't found anything aside from raw famo.us that gets into more detail. I'm documenting the whole experience from my new user perspective. The tutas-labs work got me started along with PEM--'s great code snippets and other resources but still struggling on what are probably very simple concepts I'm overlooking. Thank you for any assistance.

[rjmoggach]

I've started to get my head around solving this thanks to @tutaslabs and after reading through the famo.us code so documenting here for anyone else learning in the same way... essentially stopped using Draggable altogether as it's a wrapper and for me didn't feel flexible for my needs - session vars and reactive template helpers was my solution

template...

<template name="test5">
  {{#ContainerSurface size="[undefined,undefined]" origin='[0.5,0.5]' align='[0.5,0.5]' perspective=getPerspective overflow="hidden"}}

    {{#StateModifier id="cube5" size="[400,400]" origin="[0.5,0.5]" align="[0.5,0.5]" transform=cubeTransform }}

      {{#StateModifier size="[400,400]" origin="[0.5,0.5]" align="[0.5,0.5]" translate="[0,0,0]"}}
        {{>Surface template="cubeFace" class="grayDarker backfaceVisible" size="[undefined,undefined]"}}
      {{/StateModifier}}

      {{#StateModifier size="[400,400]" origin="[0,0.5]" align="[1,0.5]" rotateY="90"}}
        {{>Surface template="cubeFace" class="grayDark" size="[undefined,undefined]"}}
      {{/StateModifier}}

    {{/StateModifier}}

    {{#StateModifier size="[400,400]" origin="[0.5,0.5]" align="[0.5,0.5]" transform=dragTransform }}
      {{>Surface id="drag5" template="emptyDiv" size="[400,400]" class="redBorder" }}
    {{/StateModifier}}

  {{/ContainerSurface}}
</template>

coffeescript...

Template.test5.helpers
  'dragTransform': ->
    ppp=Session.get 'dragPosition'
    Famous.Transform.translate ppp[0],ppp[1],0
  'cubeTransform': ->
    ppp=Session.get 'dragPosition'
    Famous.Transform.translate ppp[0],ppp[1],0

Template.test5.rendered = ->
  position = [0,0]
  Session.set 'perspective',1000
  @extent = Math.round (window.innerWidth/2)
  dragFV = FView.byId 'drag5'
  dragSrf = dragFV.surface
  drag = dragFV.modifier

  cubeFV = FView.byId 'cube5'
  cubeMod = cubeFV.modifier

  @sync = new Famous.GenericSync ['mouse','touch']

  dragSrf.pipe @sync

  @sync.on 'update', (data) ->
    position[0] += data.delta[0]
    position[1] += data.delta[1]
    Session.set 'dragPosition',position

  @sync.on 'end', =>
    position = [0,0]
    Session.set 'dragPosition',[0,0]