Карта RxJS против подписки на создание элемента

Question

Я использую rxjs для разработки программного обеспечения.Когда выбран узел, в позиции курсора мыши отображается призрачная версия следующего узла.

Мне нужно отслеживать предыдущие призрачные узлы, чтобы при выборе нового узлапредыдущий узел-призрак удален.

В настоящее время я структурирую код, как показано ниже, с комбинацией операторов отображения из RXJS для обработки создания новых узлов и попарных операторов для обработки удаления старых узлов.

При выборе узла создание наблюдаемого узла-призрака запускается два раза (я полагаю, из-за количества последующих наблюдаемых, которые зависят от наблюдаемой выборки), поэтому создаются два узла.

Это не относится к подписке.Тем не менее, подписка не позволяет так легко отображать / отслеживать далее.

Мой код такой, как показано ниже.Я что-то упускаю в основах RxJS (наблюдаемые как функции и т. Д.)?Есть ли очевидная причина, по которой карта запускается несколько раз?

  public initialize(manager: FlowmapSceneManager, events: EventsService): void {

    // Subscribe to element changes.
    const selectedElement$ = events.eventsOfType$(ElementSelected)
      .pipe(
        filter(value => value.userInitiated),
        map(value => value.element),
        tap(value => console.log(value)),
        filter(element => element == null || element instanceof NodeElement)
      );

    const selectedElements$ = selectedElement$.pipe(
      pairwise()
    );

    // Subscribe to mouse movements.
    const mouseMovements$ = fromEvent(document, 'mousemove')
      .pipe(
        map((ev: MouseEvent) => {
          return (<Position2D>{
            x: ev.clientX,
            y: ev.clientY
          });
        })
      );

    // Handle movement ghosting.
    const ghostElement$ = selectedElement$.pipe(
      filter(value => value != null),
      distinctUntilKeyChanged('id'),
      map(element => {
        const node = (<NodeNode>element.node);
        const ghostNode = new GhostNode(node.x + node.width + node.width / 4, node.y, node.width, node.height, '');
        return manager.addNode(ghostNode);
      })
    );

    ghostElement$.subscribe(value => console.log(value));

    // Get the combination of the ghost and selected element.
    const ghostSelectedElementCombined$ = ghostElement$.pipe(
      withLatestFrom(selectedElement$)
    );

    // Create a link for the ghost element.
    const linkElement$ = ghostSelectedElementCombined$
      .pipe(
        map(([ghost, selected]) => {
          const link = new LinkNode(selected.node.id, ghost.node.id);
          return manager.addNode(link);
        })
      );

    // Get the combine elements.
    const latestLinkGhostElements$ = linkElement$.pipe(
      withLatestFrom(ghostElement$),
      pairwise()
    );
    latestLinkGhostElements$.subscribe();

  }
}