Commit 93abdf6b authored by Grant's avatar Grant
Browse files

fix mouse events from working when exiting the window

parent d2c9d6ee

packages/client-next/src/components/Header.tsx

+1 −1
Original line number Diff line number Diff line
@@ -5,7 +5,7 @@ export const Header = () => { 
    <header>

      <div></div>

      <div className="spacer"></div>

      <div>

      <div className="box">

        <div className="user-card">

          <div className="user-card--overview">

            <div className="user-name"></div>

packages/client-next/src/style.scss

+8 −1
Original line number Diff line number Diff line
@@ -20,13 +20,20 @@ header { 


  display: flex;

  flex-direction: row;

  padding: 10px;

  box-sizing: border-box;

  z-index: 9999;

  touch-action: none;

  pointer-events: none;



  .spacer {

    flex-grow: 1;

  }



  .box {

    padding: 10px;

    touch-action: initial;

    pointer-events: initial;

  }

}



.user-card {

packages/lib/src/renderer/PanZoom.ts

+9 −4
Original line number Diff line number Diff line
@@ -250,6 +250,7 @@ export class PanZoom extends EventEmitter<PanZoomEvents> { 


    this.debug(midPoint.x, midPoint.y, "midpoint");



    // TODO: this might be css zoom specific, I have no way to test this

    this.transform.x = midPoint.x / newScale - midPoint.x / scale;

    this.transform.y = midPoint.y / newScale - midPoint.x / scale;

    this.transform.scale = newScale;
@@ -322,22 +323,26 @@ export class PanZoom extends EventEmitter<PanZoomEvents> { 
      { passive: false }

    );



    this.$wrapper.addEventListener(

    // mouse move should not be tied to the element, in case the mouse exits the window

    document.addEventListener(

      "mousemove",

      (e) => {

        if (!this.panning.enabled) return;



        e.preventDefault();

        e.stopPropagation();



        if (!this.panning.enabled) return;



        this.panning.move(e.clientX, e.clientY);

      },

      { passive: false }

    );



    this.$wrapper.addEventListener(

    // mouse up should not be tied to the element, in case the mouse releases outside of the window

    document.addEventListener(

      "mouseup",

      (e) => {

        if (!this.panning.enabled) return;



        e.preventDefault();

        e.stopPropagation();