TypeScript Observable.merge方法代碼示例

export function Counter3(sources: any) {
  const { DOM } = sources;

  const decrement: any = Button(sources,
    { isolate: true, className: 'decrement', label: 'Decrement' });
  const increment = Button(sources,
    { isolate: true, className: 'increment', label: 'Increment' });

  const action$ = $.merge(
    DOM.select('.counter').select('.decrement').events('click').map( (ev: any) => -1),
    DOM.select('.counter').select('.increment').events('click').map( (ev: any) => +1)
  );

  //const action$ = decrement.click$.merge(increment.click$);
  const count$ = action$.startWith(0).scan((x: any, y: any) => x + y);

  const view$ = count$.combineLatest(decrement.DOM, increment.DOM,
    (count: any, dec: any, inc: any) => div('.counter', {}, [
      dec,
      inc,
      p({}, `Counter: ${count}`)
    ])
  );

  return {
    DOM: view$
  };
}

 (te: TouchEvent): rx.Observable<TouchMove> => {
     return this._singleTouchMove$
         .skip(1)
         .takeUntil(
             rx.Observable.merge(
                 multipleTouchStart$,
                 touchStop$));
 });

export function Drawers(sources: any) {
  const DOM = sources.DOM;

  const showDrawerClick$ = DOM.select('.showDrawer').events('click').
    map( (ev: Event) => 'show').
    do((x: any) => console.log('show: ' + x));

  const drawerClose$ = sources.DOM.select('dialog').events('close').
    startWith(false).
    map(() => false).
    do((x: any) => console.log('drawerCloseFromApp: ' + x));

  const isDrawerActive$: $<boolean> = $.merge<boolean>(
    showDrawerClick$.map(true)
    , drawerClose$.map(false)
  ).startWith(false);

  function view(isDrawerActive: boolean) {
    const drawer = (
      Drawer(sources, { isolate: false, className: 'drawer', active: isDrawerActive, type: 'left' }, [
        h5('This is a left drawer'),
        p('A drawer can have multiple children controls'),
        Input(sources, { label: 'Input in a Drawer' }).DOM,
      ])
    );

    // (<any>drawer).closeEvent$.subscribe( (x: any) => {
    //   console.log('close obs event: ' + x);
    // });

    return (
      Card(sources, { isolate: false, className: 'demoDrawers' }, [
        CardTitle(sources, { isolate: false, title: 'Drawers (Work in progress)' }, [
          CardText(sources, { isolate: true }, [
            Button(sources, { isolate: false, className: 'showDrawer', label: 'Show Drawer',
              raised: true }).DOM,
            p('is active: ' + isDrawerActive),
            drawer.DOM,
          ]).DOM
        ]).DOM
      ]).DOM
    );
  }

  const vtree$ = (
  //  $.combineLatest(drawerClose$, isDrawerActive$, (drawerClose: boolean, isDrawerActive: boolean) => {
    isDrawerActive$.map( (isDrawerActive: boolean) => {
      return view(isDrawerActive);
    })
  );

  return {
    DOM: vtree$,
  };
}

export function registerActionCreators() {

  let observables = [];

  for(let key in kernel.actions) {
    observables.push(kernel.actions[key].getObservable());
  }

  Observable.merge(observables)
    .subscribe((action) => {
      kernel.store.dispatch(action);
    });
}

export function Dialogs(sources: any) {
  const DOM = sources.DOM;

  const cancelClick$ = DOM.select('.cancel').events('click').
    map( (ev: Event) => 'cancel');
  const saveClick$ = DOM.select('.save').events('click').
    map( (ev: Event) => 'save').
    do((x: any) => console.log('save: ' + x));

  const showDialogClick$ = DOM.select('.showDialog').events('click').
    map( (ev: Event) => 'show').
    do((x: any) => console.log('show: ' + x));

  const isDialogActive$: $<boolean> = $.merge<boolean>(
    cancelClick$.map(false),
    saveClick$.map(false),
    showDialogClick$.map(true)
  ).startWith(false);

  const cancelButton = Button(sources, { className: 'cancel', label: 'Cancel' } );
  const saveButton = Button(sources, { className: 'save', label: 'Save' } );

  function view(isDialogActive: boolean) {
    return (
      DemoCardView(sources, 'Dialogs (Work in progress)', [
        CardText(sources, [
          Button(sources, { className: 'showDialog', label: 'Show Modal Dialog',
            raised: true }).DOM,
          p('is active: ' + isDialogActive),
          Dialog({ title: 'Test Dialog', active: isDialogActive,
            actions: [cancelButton.DOM, saveButton] }, [
              p('This is a dialog'),
              p('A dialog can have multiple children controls')
            ]
          ).DOM
        ]).DOM
      ])
    );
  }

  const vtree$ = (
    isDialogActive$.map( (isDialogActive) => {
      return view(isDialogActive);
    })
  );

  return {
    DOM: vtree$,
  };
}

export function Counter(sources: any) {
  const { DOM } = sources;

  const action$ = $.merge(
    DOM.select('.decrement').events('click').map( (ev: any) => -1),
    DOM.select('.increment').events('click').map( (ev: any) => +1)
  );
  let count$ = action$.startWith(0).scan((x: any, y: any) => x + y);
  return {
    DOM: count$.map(count =>
        div([
          Button(sources, { className: 'decrement', label: 'Decrement' }).DOM,
          Button(sources, { className: 'increment', label: 'Increment' }).DOM,
          p('Counter: ' + count)
        ])
      )
  };
}

      .flatMap<RxConnection>((conn: Connection): any => {
        // Disposable observable to close connection
        const connectionDisposer = Rx.Disposable.create(() => conn.close().catch(err => Rx.Observable.throw(err)));
        // New RxConnection stream
        const sourceConnection = Rx.Observable.of(new RxConnection(conn));
        // Stream of close events from connection
        const closeEvents = Rx.Observable.fromEvent(conn, 'close');
        // Stream of Errors from error connection event
        const errorEvents = Rx.Observable.fromEvent(conn, 'error')
          .flatMap((error: any) => Rx.Observable.throw(error));
        // Stream of open connections, that will emit RxConnection until a close event
        const connection = Rx.Observable
          .merge(sourceConnection, errorEvents)
          .takeUntil(closeEvents);

        // Return the disposable connection resource
        return Rx.Observable.using(
          () => connectionDisposer,
          () => connection
        )
      });

    constructor(element: HTMLElement) {
        this._element = element;

        this._touchStart$ = rx.Observable.fromEvent<TouchEvent>(element, "touchstart");
        this._touchMove$ = rx.Observable.fromEvent<TouchEvent>(element, "touchmove");
        this._touchEnd$ = rx.Observable.fromEvent<TouchEvent>(element, "touchend");
        this._touchCancel$ = rx.Observable.fromEvent<TouchEvent>(element, "touchcancel");

        this._preventTouchMoveOperation$ = new rx.Subject<IPreventTouchMoveOperation>();
        this._preventTouchMove$ = new rx.Subject<boolean>();

        this._preventTouchMoveOperation$
            .scan<boolean>(
                (prevent: boolean, operation: IPreventTouchMoveOperation): boolean => {
                    return operation(prevent);
                },
                true)
            .subscribe();

        this._preventTouchMove$
            .map<IPreventTouchMoveOperation>(
                (prevent: boolean): IPreventTouchMoveOperation => {
                    return (previous: boolean): boolean => {
                        return prevent;
                    };
                })
            .subscribe(this._preventTouchMoveOperation$);

        this._touchMove$
            .map<IPreventTouchMoveOperation>(
                (te: TouchEvent): IPreventTouchMoveOperation => {
                    return (prevent: boolean): boolean => {
                        if (prevent) {
                            te.preventDefault();
                        }

                        return prevent;
                    };
                })
            .subscribe(this._preventTouchMoveOperation$);

        this._singleTouchMoveOperation$ = new rx.Subject<ITouchMoveOperation>();

        this._singleTouchMove$ = this._singleTouchMoveOperation$
            .scan<TouchMove>(
                (touch: TouchMove, operation: ITouchMoveOperation): TouchMove => {
                    return operation(touch);
                },
                new TouchMove());

        this._touchMove$
            .filter(
                (te: TouchEvent): boolean => {
                    return te.touches.length === 1 && te.targetTouches.length === 1;
                })
            .map<ITouchMoveOperation>(
                (te: TouchEvent): ITouchMoveOperation => {
                    return (previous: TouchMove): TouchMove => {
                        let touch: Touch = te.touches[0];

                        let current: TouchMove = new TouchMove(touch);

                        current.movementX = touch.pageX - previous.pageX;
                        current.movementY = touch.pageY - previous.pageY;

                        return current;
                    };
                })
            .subscribe(this._singleTouchMoveOperation$);

        let singleTouchStart$: rx.Observable<TouchEvent> = rx.Observable
            .merge(
                this._touchStart$,
                this._touchEnd$,
                this._touchCancel$)
            .filter(
                (te: TouchEvent): boolean => {
                    return te.touches.length === 1 && te.targetTouches.length === 1;
                });

        let multipleTouchStart$: rx.Observable<TouchEvent> = rx.Observable
            .merge(
                this._touchStart$,
                this._touchEnd$,
                this._touchCancel$)
            .filter(
                (te: TouchEvent): boolean => {
                    return te.touches.length >= 1;
                });

        let touchStop$: rx.Observable<TouchEvent> = rx.Observable
            .merge(
                this._touchEnd$,
                this._touchCancel$)
            .filter(
                (te: TouchEvent): boolean => {
                    return te.touches.length === 0;
                });

        this._singleTouch$ = singleTouchStart$
//.........這裏部分代碼省略.........

    constructor(element: HTMLElement) {
        this._element = element;

        this._preventMouseDownOperation$ = new rx.Subject<IPreventMouseDownOperation>();
        this._preventMouseDown$ = new rx.Subject<boolean>();
        this._mouseMoveOperation$ = new rx.Subject<IMouseMoveOperation>();
        this._claimMouse$ = new rx.Subject<IMouseClaim>();

        this._mouseDown$ = rx.Observable.fromEvent<MouseEvent>(element, "mousedown");
        this._mouseLeave$ = rx.Observable.fromEvent<MouseEvent>(element, "mouseleave");
        this._mouseUp$ = rx.Observable.fromEvent<MouseEvent>(element, "mouseup");
        this._mouseOver$ = rx.Observable.fromEvent<MouseEvent>(element, "mouseover");

        this._mouseWheel$ = rx.Observable.fromEvent<WheelEvent>(element, "wheel");

        this._mouseWheel$
            .subscribe(
                (event: WheelEvent): void => {
                    event.preventDefault();
                });

        this._preventMouseDownOperation$
            .scan<boolean>(
                (prevent: boolean, operation: IPreventMouseDownOperation): boolean => {
                    return operation(prevent);
                },
                true)
            .subscribe();

        this._preventMouseDown$
            .map<IPreventMouseDownOperation>(
                (prevent: boolean): IPreventMouseDownOperation => {
                    return (previous: boolean): boolean => {
                        return prevent;
                    };
                })
            .subscribe(this._preventMouseDownOperation$);

        this._mouseDown$
            .map<IPreventMouseDownOperation>(
                (e: MouseEvent): IPreventMouseDownOperation => {
                    return (prevent: boolean): boolean => {
                        if (prevent) {
                            e.preventDefault();
                        }

                        return prevent;
                    };
                })
            .subscribe(this._preventMouseDownOperation$);

        this._mouseMove$ = this._mouseMoveOperation$
            .scan<MouseEvent>(
                (e: MouseEvent, operation: IMouseMoveOperation): MouseEvent => {
                    return operation(e);
                },
                new MouseEvent("mousemove"));

        rx.Observable
            .fromEvent<MouseEvent>(element, "mousemove")
            .map<IMouseMoveOperation>(
                (e: MouseEvent) => {
                    return (previous: MouseEvent): MouseEvent => {
                        if (e.movementX == null) {
                            e.movementX = e.offsetX - previous.offsetX;
                        }

                        if (e.movementY == null) {
                            e.movementY = e.offsetY - previous.offsetY;
                        }

                        return e;
                    };
                })
            .subscribe(this._mouseMoveOperation$);

        let dragStop$: rx.Observable<MouseEvent> = rx.Observable
            .merge<MouseEvent>([this._mouseLeave$, this._mouseUp$]);

        this._mouseDragStart$ = this._mouseDown$
            .selectMany<MouseEvent>((e: MouseEvent): rx.Observable<MouseEvent> => {
                return this._mouseMove$
                    .takeUntil(dragStop$)
                    .take(1);
            });

        this._mouseDrag$ = this._mouseDown$
            .selectMany<MouseEvent>((e: MouseEvent): rx.Observable<MouseEvent> => {
                return this._mouseMove$
                    .skip(1)
                    .takeUntil(dragStop$);
            });

        this._mouseDragEnd$ = this._mouseDragStart$
            .selectMany<MouseEvent>((e: MouseEvent): rx.Observable<MouseEvent> => {
                return dragStop$.first();
            });

        this._mouseOwner$ = this._claimMouse$
            .scan<{[key: string]: number}>(
//.........這裏部分代碼省略.........