export default function Board(sources: Sources, 
  stateUpdate$: Stream<BootstrapMessage>) {
  const {
    stream: noteEditStart$,
    handler: onNoteEditStart
  } = createEventHandler<string>()
  
  const container = sources.DOM.select('.js-container')
  
  const noteDelete$: Stream<string> = container.select('.js-delete-note')
    .events('click')
    .map(e => (e.target as HTMLButtonElement).getAttribute('data-note'))
  
  const noteEditArea = container.select('.js-note-edit')
  
  const noteMouseDown$: Stream<{id: string}> = (container.select('.js-note')
    .events('mousedown') as Stream<MouseEvent>).map((e) => {
      return {
        id: (e.currentTarget as Element).getAttribute('data-note')
      }
    })
  
  const mouseMove$ = container
    .events('mousemove') as Stream<MouseEvent>
  const mouseUp$ = container
    .events('mouseup') as Stream<MouseEvent>
   
  const noteEditBlur$ = noteEditArea
    .events('blur') as Stream<Event>
  
  const noteSaveText$ = noteEditBlur$
    .map(e => ({
      noteId: (e.target as HTMLTextAreaElement).getAttribute('data-note'),
      text: ((e.target as HTMLTextAreaElement).value || '').trim()
    }))
    .filter(({ noteId }) => noteId !== null && noteId.length > 0)
   
  const finishEdit$ = Stream.merge(
    container.events('click'), noteEditBlur$
  ).compose(debounce(20))
  
  const addNote$ = sources.DOM.select('.js-add-note')
    .events('click') as Stream<MouseEvent>
  
  const noteDrag$: Stream<NoteEvent> = noteMouseDown$.map(({ id }) => 
    mouseMove$.map(e => ({
      id: id,
      x: e.layerX - NOTE_WIDTH / 2,
      y: e.layerY - NOTE_HEIGHT / 2
    }))
    .compose(dropRepeats((a: any, b: any) => 
      a.x === b.x && a.y === b.y
    ))
    .endWhen(mouseUp$)
  ).flatten()
  
  const noteDragMod$ = noteDrag$.map(({ id, x, y }) => (state: State) => {
    const update = R.compose<State, State, State>(
      R.set(
        R.lensPath(['notes', id, 'pos']),
        { x, y } as Position
      ),
      R.assoc('draggingNoteId', id)
    )
    return update(state)
  })
  
  const noteStopDraggingMod$: Stream<(state: State) => State> = mouseUp$.mapTo(
    R.set(R.lensProp('draggingNoteId'), null)
  )
  
  const noteEditId$ = Stream.merge(noteEditStart$, finishEdit$.mapTo(null))
  
  const noteEditStartMod$ = noteEditId$.map(id => (state: State) => {
    if (state.editingNoteId === id) {
      return state
    }
    return R.assoc('editingNoteId', id, state) as State
  })
  
  const updateFromBootsrapMessage = (data: BootstrapMessage) => 
    R.pipe<State, State, State>(
      R.assoc('boards', data.boards),
      R.assoc('notes', data.notes)
    )
  
  // perform optimistic update
  const noteSaveTextMod$ = noteSaveText$.map(({ noteId, text }) => 
    (state: State) => {
      const update = R.set(
        R.lensPath(['notes', noteId, 'label']),
        text
      )
      return update(state)
    })
  
  const serverBootstrap$ = sources.websocket.get('bootstrap')
    .map((res: any) => res.data as BootstrapMessage).debug('bootstrap$')
  
  const serverBootstrapMod$ = 
//.........这里部分代码省略.........

function setupZapping([graph, zapSpeed]: [Dagre.Graph, ZapSpeed]): Diagram {
  const registry: ZapRegistry = new ZapRegistry();
  const sourceNodes: Array<string> = graph['sources']();
  sourceNodes.forEach(id => {
    zapVisit(id, 0, graph, registry);
  });

  const rawZap$ = xs.create<Zap>({
    start(listener: Listener<Zap>) {
      for (let i = 0, N = registry.records.length; i < N; i++) {
        const record = registry.records[i];
        const id = record.id;
        record.stream.setDebugListener({
          next: (value) => listener.next({ id, type: 'next', value } as Zap),
          error: (err) => listener.next({ id, type: 'error', value: err } as Zap),
          complete: () => listener.next({ id, type: 'complete' } as Zap),
        });
      }
    },
    stop() {},
  });

  const actualZaps$ = rawZap$
    .compose(timeSpread(zapSpeedToMilliseconds(zapSpeed)));

  const stopZaps$ = actualZaps$
    .mapTo([]).compose(debounce<Array<Zap>>(200))
    .startWith([]);

  const zaps$ = xs.merge(actualZaps$, stopZaps$);

  return { graph, zaps$ };
}

  it('should allow listening to link clicks and change route', function(done) {
    setAdapt(x => x);
    const historyDriver = makeHistoryDriver();
    const sink = xs.never();
    const history$ = captureClicks(historyDriver)(sink);

    const sub = history$
      .compose(debounce(5))
      .drop(1)
      .subscribe({
        next: (location: Location) => {
          assert.strictEqual(location.pathname, '/test');
          sub.unsubscribe();
          sink.shamefullySendComplete();
          done();
        },
        error: err => {},
        complete: () => {},
      });

    const a = document.createElement('a');
    a.href = '/test';
    document.body.appendChild(a);

    setTimeout(() => {
      a.click();
    }, 10);
  });

function main({DOM, keyboard}) {
  let actions = intent(DOM);
  let state$ = model(actions, keyboard);
  let vtree$ = view(state$);
  return {
    DOM: vtree$,
    scrollIntoView: state$,
    // andre's stuff is broke for now
    // sendUpdate: state$.map((state : Model) =>
    //   keyboard
    //     .filter((x: Input) => x === 'increment' || x === 'decrement')
    //     .map((input : Input): Update => {
    //       const s = state.shows[state.cursor];
    //       return {
    //         name: s.name,
    //         input
    //       }
    //     }).debug((x: any) => console.log('debug', x)) // Object {name...}
    // ).debug((x: any) => console.log('debug2', x)) // Stream
    // .flatten()
    // .debug((x: any) => console.log('debug3', x)) // nothing
    sendUpdate: xs.combine(
      state$.compose(dropRepeats<Model>((a, b) => a.shows === b.shows)),
      keyboard.filter((x: Input) => x === 'increment' || x === 'decrement')
    )
      .compose(debounce(100))
      .map(([state, input]: [Model, Input]): Update => {
        const s = state.shows[state.cursor];
        return {
          name: s.name,
          count: s.count,
          input
        }
      })
  };
}