TypeScript Subject.map方法代碼示例

/**
 * control backface
 */
export default function(target: HTMLElement) {

  const bgImage = new Subject<HTMLElement>();
  const bgFilter = new Subject<HTMLElement>();

  // backface image
  // FIXME should receive primitive resouse url string?
  bgImage
    .map((el) => el.getAttribute(ATTR_BACKFACE))
    .map((src) => src ? `url(${src})` : '')
    .subscribe(styleAssignOf(target, 'background-image'));

  // backface image css filter
  // FIXME should receive primitive resouse url string?
  bgFilter
    .map((el) => el.getAttribute(ATTR_FILTER))
    .subscribe(styleAssignOf(target, stylePrefixDetect('filter')));

  Observable.from<Element>(toArray<Element>(document.querySelectorAll(`[${ATTR_BACKFACE}]`)))
    .map((el) => el.getAttribute(ATTR_BACKFACE))
    .filter((v) => !!v)
    .subscribe(preloadImg);

  return {
    bgImage  : bgImage,
    bgFilter : bgFilter
  };
}

    constructor() {
        this._tagOperation$ = new Subject<ICreateTagOperation>();
        this._create$ = new Subject<number[]>();
        this._delete$ = new Subject<void>();

        this._configuration$ = new Subject<ITagConfiguration>();

        this._tag$ = this._tagOperation$
            .scan<OutlineCreateTag>(
                (tag: OutlineCreateTag, operation: ICreateTagOperation): OutlineCreateTag => {
                    return operation(tag);
                },
                null)
            .share();

        this._create$
            .withLatestFrom(
                this._configuration$,
                (coordinate: number[], type: ITagConfiguration): [number[], ITagConfiguration] => {
                    return [coordinate, type];
                })
            .map<ICreateTagOperation>(
                (ct: [number[], ITagConfiguration]): ICreateTagOperation => {
                    return (tag: OutlineCreateTag): OutlineCreateTag => {
                        let coordinate: number[] = ct[0];
                        let configuration: ITagConfiguration = ct[1];

                        if (configuration.createType === "rect") {
                            let geometry: RectGeometry = new RectGeometry([
                                coordinate[0],
                                coordinate[1],
                                coordinate[0],
                                coordinate[1],
                            ]);

                            return new OutlineCreateTag(geometry, { color: configuration.createColor });
                        } else if (configuration.createType === "polygon") {
                            let geometry: PolygonGeometry = new PolygonGeometry([
                                [coordinate[0], coordinate[1]],
                                [coordinate[0], coordinate[1]],
                                [coordinate[0], coordinate[1]],
                            ]);

                            return new OutlineCreateTag(geometry, { color: configuration.createColor });
                        }

                        return null;
                    };
                })
            .subscribe(this._tagOperation$);

        this._delete$
            .map<ICreateTagOperation>(
                (): ICreateTagOperation => {
                    return (tag: OutlineCreateTag): OutlineCreateTag => {
                        return null;
                    };
                })
            .subscribe(this._tagOperation$);
    }

/**
 * pointer mode
 */
export default function(target: HTMLElement) {

  const coord  = new Subject<MouseEvent>();
  const toggle = new Subject<any>();

  const x = coord.map((e) => e.clientX + 'px');
  const y = coord.map((e) => e.clientY + 'px');

  x.subscribe(styleAssignOf(target, 'left'));
  y.subscribe(styleAssignOf(target, 'top'));

  toggle
    .scan((acc) => !acc, false)
    .map((bool) => bool ? 'false' : 'true')
    .subscribe(attributeAssignOf(target, 'aria-hidden'));

  return {
    ptCoord  : coord,
    ptToggle : toggle
  };
}

    it('should work', () => {
      const subject = new Subject<number>();

      const log: number[] = [];
      subject.map(x => 2 * x + 1)
        .subscribe(next => log.push(next));

      subject.next(2);
      expect(log).toEqual([5]);

      subject.next(3);
      expect(log).toEqual([5, 7]);
    });

 constructor(
   private articleService: ArticleService,
   private store: Store<AppState>
 ){
   const tag$=store.select('main','tag');
   this.currentPage$=store.select('main','currentPage');
   const subject=new Subject<Article[]>();
   const articleSource =Observable.combineLatest(tag$,this.currentPage$)
     .debounceTime(0)
     .map(([tag,page])=>this.articleService.getArticles(tag?tag.id:'',page))
     .mergeAll()
     .do(data=>this.store.dispatch(new FetchArticle(data)))
     .map(()=>store.select('main','articles'))
     .mergeAll();
   articleSource.subscribe(subject);
   this.articles$=subject;
   this.addPageAction$=this.currentPage$
     .map(page=>new ChangePage(page+1));
   this.reducePageAction$=this.currentPage$
     .map(page=>new ChangePage(page-1));
   this.maxPage$=subject
     .map(articles=>articles.length===10?this.currentPage$.map(page=>page+1):this.currentPage$)
     .mergeAll();
 }

/**
 * paging control
 */
export default function(options: PagingOptions) {

  const next    = new Subject<any>();
  const prev    = new Subject<any>();
  const move    = new Subject<number>();
  const current = new BehaviorSubject<number>(options.startPage || 1);

  const currentPage: Observable<number> = current
    .map(inRangeOf(1, options.endPage))
    .distinctUntilChanged();

  const _next = next.withLatestFrom(currentPage, (_, page) => page).map((v) => v + 1);
  const _prev = prev.withLatestFrom(currentPage, (_, page) => page).map((v) => v - 1);
  const _move = move.map((v) => v /* noop */);

  const percentString = currentPage.map(percentOf(options.endPage));
  const currentSlide  = currentPage.map((i) => options.slideElements[i - 1]);

  Observable.merge(_next, _prev, _move).subscribe(current);

  currentSlide.subscribe(function(current) {
    options.slideElements.forEach(toInvisible);
    current && toVisible(current);
  });

  return {
    current : currentPage,
    start   : currentPage.filter((v) => v === 1),
    end     : currentPage.filter((v) => v === options.endPage),
    changed : currentSlide,
    percent : percentString,
    next    : next,
    prev    : prev,
    move    : move
  };
}

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

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

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

        this._click$ = Observable.fromEvent<MouseEvent>(element, "click");

        this._mouseWheel$ = 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);
                },
                null);

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

                        if (e.movementX == null) {
                            e.movementX = e.clientX - previous.clientX;
                        }

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

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

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

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

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

        this._mouseDragEnd$ = this._mouseDragStart$
//.........這裏部分代碼省略.........

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

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

        this._preventTouchMoveOperation$ = new Subject<IPreventTouchMoveOperation>();
        this._preventTouchMove$ = new 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 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$: Observable<TouchEvent> = Observable
            .merge<TouchEvent>(
                this._touchStart$,
                this._touchEnd$,
                this._touchCancel$)
            .filter(
                (te: TouchEvent): boolean => {
                    return te.touches.length === 1 && te.targetTouches.length === 1;
                });

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

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

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

    constructor(element: HTMLElement, currentFrame$: Observable<IFrame>, renderMode: RenderMode) {
        this._element = element;
        this._currentFrame$ = currentFrame$;

        renderMode = renderMode != null ? renderMode : RenderMode.Letterbox;

        this._resize$ = new Subject<void>();
        this._renderCameraOperation$ = new Subject<IRenderCameraOperation>();

        this._size$ =
            new BehaviorSubject<ISize>(
                {
                    height: this._element.offsetHeight,
                    width: this._element.offsetWidth,
                });

        this._resize$
            .map<ISize>(
                (): ISize => {
                    return { height: this._element.offsetHeight, width: this._element.offsetWidth };
                })
            .subscribe(this._size$);

        this._renderMode$ = new BehaviorSubject<RenderMode>(renderMode);

        this._renderCameraHolder$ = this._renderCameraOperation$
            .startWith(
                (rc: RenderCamera): RenderCamera => {
                    return rc;
                })
            .scan<RenderCamera>(
                (rc: RenderCamera, operation: IRenderCameraOperation): RenderCamera => {
                    return operation(rc);
                },
                new RenderCamera(this._element.offsetWidth / this._element.offsetHeight, renderMode))
            .publishReplay(1)
            .refCount();

        this._renderCameraFrame$ = this._currentFrame$
            .withLatestFrom(
                this._renderCameraHolder$,
                (frame: IFrame, renderCamera: RenderCamera): [IFrame, RenderCamera] => {
                    return [frame, renderCamera];
                })
            .do(
                (args: [IFrame, RenderCamera]): void => {
                    let frame: IFrame = args[0];
                    let rc: RenderCamera = args[1];

                    let camera: Camera = frame.state.camera;

                    if (rc.alpha !== frame.state.alpha ||
                        rc.zoom !== frame.state.zoom ||
                        rc.camera.diff(camera) > 0.00001) {

                        let currentTransform: Transform = frame.state.currentTransform;
                        let previousTransform: Transform =
                            frame.state.previousTransform != null ?
                                frame.state.previousTransform :
                                frame.state.currentTransform;

                        let previousNode: Node =
                            frame.state.previousNode != null ?
                                frame.state.previousNode :
                                frame.state.currentNode;

                        rc.currentAspect = currentTransform.basicAspect;
                        rc.currentPano = frame.state.currentNode.fullPano;
                        rc.previousAspect = previousTransform.basicAspect;
                        rc.previousPano = previousNode.fullPano;

                        rc.alpha = frame.state.alpha;
                        rc.zoom = frame.state.zoom;

                        rc.camera.copy(camera);
                        rc.updatePerspective(camera);

                        rc.updateProjection();
                    }

                    rc.frameId = frame.id;
                })
            .map<RenderCamera>(
                (args: [IFrame, RenderCamera]): RenderCamera => {
                    return args[1];
                })
            .publishReplay(1)
            .refCount();

        this._renderCamera$ = this._renderCameraFrame$
            .filter(
                (rc: RenderCamera): boolean => {
                    return rc.changed;
                })
            .publishReplay(1)
            .refCount();

        this._size$
            .skip(1)
            .map<IRenderCameraOperation>(
//.........這裏部分代碼省略.........