gistfile1.txt

# Streams

let drag$ = ....
aggregator.write(drag$.x().rubberBanded(0, 100),
                 to: propertyOf(view).center)

# Plan/Performer

let draggable = Draggable()
draggable.axisLocked = .horizontal
draggable.rubberBand = ...
draggable.constraints = [AxisLockConstraint, RubbberConstraint]
runtime.addPlan(draggable, to: view)






















# Streams

let tween$<CABasicAnimation> = ....
aggregator.write(tween$, to: propertyOf(view).alpha)


# Plan/Performer

let tween = Tween("alpha", values: [0, 1])
runtime.addPlan(tween, to: view)





- When should someone use a Plan type? vs when to use a
  Stream?

- CompositorTweenSource
- TweenSource


Option 1 (CompositorTween as a plan):

let tween = CompositorTween(values: [0, 1], curve: easein)
let tween$ = tweenSource(tween)
aggregator.write(tween$, to: element.tweenProperty)


Option 2 (Tween using builder pattern):

let tween$ = tweenSource().from(0).to(1)
aggregator.write(tweenSource(tween), to: coreanimationProperty(view))


Decision: Do not use option 2.

- TweenSource can return a Tween object.




featherless
- [ ] Spec out: CompositorTween + Tween
- [ ] Toggle for different stream T vaules?





function DirectlyManipulable() {
  let drag = drag$
  let scale = scale$
  let rotate = rotate$

  let transform$ = transformSource(drag$, scale$, rotate$)
  return transform$
}

function RadialFadeStreamBuilder(elements) -> [{String: Stream}] {
  var pairs = []
  for element in elements {
    let tween$ = tweenSource(Tween(propertyOf(element).opacity, values: [0, 1]))
    let position$ = tweenSource(Tween(propertyOf(element).position, values: [(0, 0), (1, 1)]))

    pairs["opacity"] = tween$
    pairs["position"] = position$
  }
  return pairs
}

function DraggableStreamBuilder(element) -> [String: Stream] {
  return ["drag": drag$(initialPosition: element.position)]
}

// Lowest level
let streams = RadialFadeStreamBuilder(optionElements)

// Connector
aggregator.write(streams["opacity"], view.opacity)
aggregator.write(streams["position"], view.position)

// L2 users API
Positionable {
  position: Property()
}
Fadeable {
  opacity: Property()
}

function radialFadeConnector(elements: [Positionable|Fadeable]) {
  // L3
  // Part 1: Lowest level
  let streams: [streams] = RadialFadeStreamBuilder(optionElements)
  let draggable = DraggableStreamBuilder(element)

  // CUSTOMIZATION
  streams.drag$ = streams.drag$.x()

  // Part 2: Connector
  for streamDict, ix in streams {
    aggregator.write(streamDict["opacity"], propertyOf(view[ix]).opacity)
    aggregator.write(streamDict["position"], propertyOf(view[ix]).position)
  }
}

// L1
class Director {
  func setUp() {
    // L2
  }
}

// L1
// MY APP CODE IS AWESOME
Director()

function propertiesForViews() -> [Elements] {
}


class Director {
  var aggregator: Aggregator

  func setUp() {
    let directlyManipulable = DirectlyManipulable()

    let transform$ = directlyManipulable.toggled(by: transformSpring$)

    pairs$ = RadialFade()
    aggregator.aggregate(pairs)
    
    let streams = RadialFade().toggled(by: directlyManipulable)

    function aggregate(pairs$) {
      pairs$.subscribe { element, stream in
        aggregator.write(pair.stream, to: pair.property)
      }
    }

    for pair in pairs {
      aggregator.write(pair.stream, to: pair.property)  
    }

    aggregator.write(transform$, to: view.transform)
  }
}










Option 1 (CompositorTween as a plan):

let tween = CompositorTween(propertyOf(view).position,
                            values: [(0, 0), (100, 100)],
                            curve: easein)

let tween$ = tweenSource(tween).x()
let tweenX = CompositorTween(propertyOf(view).positionX,
                             values: [0, 100],
                             curve: easein)

aggregator.write(tween$, to: element.tweenProperty)


Option 2 (Tween using builder pattern):

let tween$ = tweenSource().from(0).to(1)
aggregator.write(tweenSource(tween), to: coreanimationProperty(view))