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$ = 
//.........这里部分代码省略.........

 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$)

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
        }
      })
  };
}

import { DOMSource } from '@cycle/dom/xstream-typings';
import xs, { Stream } from 'xstream';
import { VNode, div } from '@cycle/dom';
import { Result } from './../definitions';
import Cell, { CellState } from './cell';
import { add, remove, has, reduce } from './../utils';
import delay from 'xstream/extra/delay';
import isolate from '@cycle/isolate';
import dropRepeats from 'xstream/extra/dropRepeats';

const distinctBooleans = dropRepeats<boolean>((prev, next) => prev === next);

interface GridSources {
  dom: DOMSource;
  puzzle: Stream<number[]>;
  result: Stream<Result>;
}

interface GridSinks {
  dom: Stream<VNode>;
  selection: Stream<number[]>;
}

function GridComponent(sources: GridSources): GridSinks {
  const puzzle$ = sources.puzzle;
  const result$ = sources.result.remember();
  const grid: number[] = Array.apply(null, { length: 25 }).map(Number.call, Number);
  const nothing: number[] = [];
  const cellClickProxy$ = xs.create<number>();
  const selectedReducer$ =
    xs.merge(