test event wrapper

src/client/canvas.ts

@@ -14,7 +14,8 @@ export class ViewCanvas {
   private _canvas = $('<canvas class="canvas">') as HTMLCanvasElement;
   private _ctx = this._canvas.getContext('2d');
   private _wrapper = $('<div class="canvas__wrapper">');
-  private _container = $('<div class="canvas__container">');
+  private _zoomWrapper = $('<div class="canvas__zoom">');
+  private _eventWrapper = $('<div class="canvas__container">');
   private _cursor = $('<div class="canvas__cursor">');
   private _coods = $('<div class="canvas__coordinates">');
   private _userInfo = $('<a class="canvas__user">');
@@ -51,7 +52,7 @@ export class ViewCanvas {
 
   public moveCanvas(): void {
     this._canvas.style.transform = `scale(${this._zoom})`;
-    this._container.style.transform = `translate(${this._posx}px, ${this._posy}px)`;
+    this._zoomWrapper.style.transform = `translate(${this._posx}px, ${this._posy}px)`;
   }
 
   public center(): void {
@@ -120,9 +121,10 @@ export class ViewCanvas {
     this._userInfo.setAttribute('href', '/login');
 
     this._wrapper.append(this._coods);
-    this._container.append(this._canvas);
-    this._wrapper.append(this._cursor);
-    this._wrapper.append(this._container);
+    this._wrapper.append(this._eventWrapper);
+    this._zoomWrapper.append(this._canvas);
+    this._eventWrapper.append(this._cursor);
+    this._eventWrapper.append(this._zoomWrapper);
     this._wrapper.append(this._userInfo);
     this._wrapper.append(this.picker.element);
     document.body.append(this._wrapper);
@@ -155,21 +157,21 @@ export class ViewCanvas {
       }
     };
 
-    this._wrapper.addEventListener('mousemove', (ev: MouseEvent) =>
+    this._eventWrapper.addEventListener('mousemove', (ev: MouseEvent) =>
       dragEvent(ev.clientX, ev.clientY),
     );
 
-    this._wrapper.addEventListener('mousedown', (ev: MouseEvent) => {
+    this._eventWrapper.addEventListener('mousedown', (ev: MouseEvent) => {
       this._mousex = ev.clientX;
       this._mousey = ev.clientY;
       this._dragging = true;
     });
 
-    this._wrapper.addEventListener('mouseup', (ev: MouseEvent) => {
+    this._eventWrapper.addEventListener('mouseup', (ev: MouseEvent) => {
       this._dragging = false;
     });
 
-    this._container.addEventListener('touchstart', (ev: TouchEvent) => {
+    this._eventWrapper.addEventListener('touchstart', (ev: TouchEvent) => {
       ev.preventDefault();
       const touch = ev.touches[0] || ev.changedTouches[0];
       this._mousex = touch.pageX;
@@ -181,7 +183,7 @@ export class ViewCanvas {
       }
     });
 
-    this._wrapper.addEventListener('touchmove', (ev: TouchEvent) => {
+    this._eventWrapper.addEventListener('touchmove', (ev: TouchEvent) => {
       ev.preventDefault();
 
       if (ev.touches.length === 2 && this._pinching) {
@@ -207,7 +209,7 @@ export class ViewCanvas {
       dragEvent(ev.touches[0].clientX, ev.touches[0].clientY);
     });
 
-    this._wrapper.addEventListener('touchend', (ev: TouchEvent) => {
+    this._eventWrapper.addEventListener('touchend', (ev: TouchEvent) => {
       this._pinching = false;
       this._previousPinchLength = 0;
 
@@ -216,11 +218,11 @@ export class ViewCanvas {
       }
     });
 
-    this._wrapper.addEventListener('pointerleave', (ev: MouseEvent) => {
+    this._eventWrapper.addEventListener('pointerleave', (ev: MouseEvent) => {
       this._dragging = false;
     });
 
-    this._wrapper.addEventListener('wheel', (ev: WheelEvent) => {
+    this._eventWrapper.addEventListener('wheel', (ev: WheelEvent) => {
       ev.preventDefault();
 
       this._mousex = ev.clientX;

src/client/scss/index.scss

@@ -33,12 +33,21 @@ body {
   }
 
   &__container {
+    position: absolute;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+  }
+
+  &__zoom {
     position: relative;
     width: 0;
     height: 0;
   }
 
-
   &__coordinates, &__user {
     background-color: rgba(221, 221, 221, 0.404);
     position: absolute;
@@ -128,7 +137,7 @@ body {
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: 1003;
+    z-index: 2000;
     pointer-events: none;
   }