.map(project =>
   frame$
     .compose(sampleCombine(input$))
     .fold(
       (state, [frame, input]) => update(state, frame, input),
       stateFromProject(project)
     )

function main(sources: any) {
  const {DOM, Time} = sources;

  const speed$ = DOM.select('.speed')
    .events('input')
    .map((ev: any) => ev.target.value)
    .startWith(maxSpeed / 2);

  const height$ = DOM.select('.height')
    .events('input')
    .map((ev: any) => ev.target.value)
    .startWith(maxHeight / 2);

  const nodeCount$ = DOM.select('.node-count')
    .events('input')
    .map((ev: any) => ev.target.value)
    .startWith(45);

  const time$ = Time.animationFrames().map(({time}: any) => time);

  return {
    DOM: time$
      .compose(sampleCombine(speed$, height$, nodeCount$))
      .map(
        ([timestamp, speed, height, nodeCount]: [
          number,
          number,
          number,
          number
        ]) =>
          div('.time', [
            nodes(timestamp, speed, height, nodeCount),
            'Speed',
            input('.speed', {
              props: {type: 'range', min: 1, max: maxSpeed, value: speed},
            }),
            'Height',
            input('.height', {
              props: {type: 'range', min: 1, max: maxHeight, value: height},
            }),
            'Nodes',
            input('.node-count', {
              props: {
                type: 'range',
                min: 1,
                max: maxNodeCount,
                value: nodeCount,
              },
            }),
          ])
      ),
  };
}

function main({ time, DOM }) {

  const raf$ = time.animationFrames()

  const pause$ = DOM
    .select("document")
    .events("keyup")
    .filter(event => event.keyCode == 32)
    .fold(acc => !acc, false)

  return {
    DOM: raf$
      .compose(sampleCombine(pause$))
      .filter(([_, paused]) => !paused)
      .fold(updateState, links)
      .map(render)
  }
}

  function DOMDriver(vnode$: Stream<VNode>, name = 'DOM'): MainDOMSource {
    domDriverInputGuard(vnode$);
    const sanitation$ = xs.create<null>();

    const firstRoot$ = domReady$.map(() => {
      const firstRoot = getValidNode(container) || document.body;
      vnodeWrapper = new VNodeWrapper(firstRoot);
      return firstRoot;
    });

    // We need to subscribe to the sink (i.e. vnode$) synchronously inside this
    // driver, and not later in the map().flatten() because this sink is in
    // reality a SinkProxy from @cycle/run, and we don't want to miss the first
    // emission when the main() is connected to the drivers.
    // Read more in issue #739.
    const rememberedVNode$ = vnode$.remember();
    rememberedVNode$.addListener({});

    // The mutation observer internal to mutationConfirmed$ should
    // exist before elementAfterPatch$ calls mutationObserver.observe()
    mutationConfirmed$.addListener({});

    const elementAfterPatch$ = firstRoot$
      .map(
        firstRoot =>
          xs
            .merge(rememberedVNode$.endWhen(sanitation$), sanitation$)
            .map(vnode => vnodeWrapper.call(vnode))
            .startWith(addRootScope(toVNode(firstRoot)))
            .fold(patch, toVNode(firstRoot))
            .drop(1)
            .map(unwrapElementFromVNode)
            .startWith(firstRoot as any)
            .map(el => {
              mutationObserver.observe(el, {
                childList: true,
                attributes: true,
                characterData: true,
                subtree: true,
                attributeOldValue: true,
                characterDataOldValue: true,
              });
              return el;
            })
            .compose(dropCompletion) // don't complete this stream
      )
      .flatten();

    const rootElement$ = concat(domReady$, mutationConfirmed$)
      .endWhen(sanitation$)
      .compose(sampleCombine(elementAfterPatch$))
      .map(arr => arr[1])
      .remember();

    // Start the snabbdom patching, over time
    rootElement$.addListener({error: reportSnabbdomError});

    const delegator = new EventDelegator(rootElement$, isolateModule);

    return new MainDOMSource(
      rootElement$,
      sanitation$,
      [],
      isolateModule,
      delegator,
      name
    );
  }

function Project(sources: IOnionifySources): IOnionifySinks {
  const project$ = sources.onion.state$;

  const nameComponent = isolate(ProjectName)({
    ...sources,
    name$: project$.map((project: any) => project.name)
  });

  const changeName$ = nameComponent.nameChange$.map(
    (name: string) => (project: any): any => ({
      ...project,
      name
    })
  );

  const record$ = sources.DOM.select(".record").events("click");
  const stopRecording$ = sources.DOM.select(".stop-recording").events("click");

  const recording$ = xs
    .merge(record$.mapTo(true), stopRecording$.mapTo(false))
    .startWith(false)
    .remember();

  const play$ = sources.DOM.select(".play").events("click");
  const pause$ = sources.DOM.select(".pause").events("click");

  const playing$ = xs
    .merge(recording$, play$.mapTo(true), pause$.mapTo(false))
    .startWith(false)
    .remember();

  const keydown$ = sources.DOM
    .select("document")
    .events("keydown")
    .map((ev: KeyboardEvent) => ev.key.toLowerCase());

  const keyup$ = sources.DOM
    .select("document")
    .events("keyup")
    .map((ev: KeyboardEvent) => ev.key.toLowerCase());

  const recordKeydown$ = keydown$
    .compose(sampleCombine(recording$))
    .map(([key, recording]) => {
      return function(project: Project): Project {
        if (!recording || project.lastInput === key) {
          return project;
        }

        if (project.keys.indexOf(key) === -1) {
          return project;
        }

        const scenario = activeScenario(project) as Scenario;

        scenario.input[project.currentFrame] =
          scenario.input[project.currentFrame] || [];

        scenario.input[project.currentFrame].push({ type: "keydown", key });

        project.lastInput = key;

        return project;
      };
    });

  const recordKeyup$ = keyup$
    .compose(sampleCombine(recording$))
    .map(([key, recording]) => {
      return function(project: Project): Project {
        if (!recording) {
          return project;
        }

        const scenario = activeScenario(project) as Scenario;

        scenario.input[project.currentFrame] =
          scenario.input[project.currentFrame] || [];

        scenario.input[project.currentFrame].push({ type: "keyup", key });

        project.lastInput = null;

        return project;
      };
    });

  const actorMouseDown$ = sources.DOM
    .select(".simulation.main .actor")
    .events("mousedown")
    .map((ev: any) => {
      const actorId = ev.target.id;

      ev.stopPropagation(); // I am evil

      return actorId;
    });

  const mouseUp$ = sources.DOM.select("document").events("mouseup");

//.........这里部分代码省略.........