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

  }
}

RxJS地图与订阅元素创建

0 个答案: