title: RxJS wait for 2 separate clicks events
body: <p>I have a button and an image. </p>
  
  <p>When I click the button, I want it to go to a "wait mode" of sorts.
  Waiting for two separate clicks, that both return the x, y value of the mouse click events.</p>
  
  <p>I got the mouse xy part no problem but at loss for what RxJS operator to use next</p>
  
  <pre><code>const elem = document.getElementById("MyImage");
  const root = fromEvent(elem, "click");
  const xy = root.pipe(map(evt =&gt; xyCartoPos(elem, evt)));
  xy.subscribe(coords =&gt; console.log("xy:", coords));
  
  function xyCartoPos(elem, e) {
    const elemRect = elem.getBoundingClientRect();
    return {
      x: e.clientX - elemRect.x - elemRect.width / 2,
      y: flipNum(e.clientY - elemRect.y - elemRect.height / 2)
    };
  }
  </code></pre>