test event wrapper
This commit is contained in:
parent
8c74d46cc9
commit
9b51620239
@ -14,7 +14,8 @@ export class ViewCanvas {
|
|||||||
private _canvas = $('<canvas class="canvas">') as HTMLCanvasElement;
|
private _canvas = $('<canvas class="canvas">') as HTMLCanvasElement;
|
||||||
private _ctx = this._canvas.getContext('2d');
|
private _ctx = this._canvas.getContext('2d');
|
||||||
private _wrapper = $('<div class="canvas__wrapper">');
|
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 _cursor = $('<div class="canvas__cursor">');
|
||||||
private _coods = $('<div class="canvas__coordinates">');
|
private _coods = $('<div class="canvas__coordinates">');
|
||||||
private _userInfo = $('<a class="canvas__user">');
|
private _userInfo = $('<a class="canvas__user">');
|
||||||
@ -51,7 +52,7 @@ export class ViewCanvas {
|
|||||||
|
|
||||||
public moveCanvas(): void {
|
public moveCanvas(): void {
|
||||||
this._canvas.style.transform = `scale(${this._zoom})`;
|
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 {
|
public center(): void {
|
||||||
@ -120,9 +121,10 @@ export class ViewCanvas {
|
|||||||
this._userInfo.setAttribute('href', '/login');
|
this._userInfo.setAttribute('href', '/login');
|
||||||
|
|
||||||
this._wrapper.append(this._coods);
|
this._wrapper.append(this._coods);
|
||||||
this._container.append(this._canvas);
|
this._wrapper.append(this._eventWrapper);
|
||||||
this._wrapper.append(this._cursor);
|
this._zoomWrapper.append(this._canvas);
|
||||||
this._wrapper.append(this._container);
|
this._eventWrapper.append(this._cursor);
|
||||||
|
this._eventWrapper.append(this._zoomWrapper);
|
||||||
this._wrapper.append(this._userInfo);
|
this._wrapper.append(this._userInfo);
|
||||||
this._wrapper.append(this.picker.element);
|
this._wrapper.append(this.picker.element);
|
||||||
document.body.append(this._wrapper);
|
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),
|
dragEvent(ev.clientX, ev.clientY),
|
||||||
);
|
);
|
||||||
|
|
||||||
this._wrapper.addEventListener('mousedown', (ev: MouseEvent) => {
|
this._eventWrapper.addEventListener('mousedown', (ev: MouseEvent) => {
|
||||||
this._mousex = ev.clientX;
|
this._mousex = ev.clientX;
|
||||||
this._mousey = ev.clientY;
|
this._mousey = ev.clientY;
|
||||||
this._dragging = true;
|
this._dragging = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
this._wrapper.addEventListener('mouseup', (ev: MouseEvent) => {
|
this._eventWrapper.addEventListener('mouseup', (ev: MouseEvent) => {
|
||||||
this._dragging = false;
|
this._dragging = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
this._container.addEventListener('touchstart', (ev: TouchEvent) => {
|
this._eventWrapper.addEventListener('touchstart', (ev: TouchEvent) => {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
const touch = ev.touches[0] || ev.changedTouches[0];
|
const touch = ev.touches[0] || ev.changedTouches[0];
|
||||||
this._mousex = touch.pageX;
|
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();
|
ev.preventDefault();
|
||||||
|
|
||||||
if (ev.touches.length === 2 && this._pinching) {
|
if (ev.touches.length === 2 && this._pinching) {
|
||||||
@ -207,7 +209,7 @@ export class ViewCanvas {
|
|||||||
dragEvent(ev.touches[0].clientX, ev.touches[0].clientY);
|
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._pinching = false;
|
||||||
this._previousPinchLength = 0;
|
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._dragging = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
this._wrapper.addEventListener('wheel', (ev: WheelEvent) => {
|
this._eventWrapper.addEventListener('wheel', (ev: WheelEvent) => {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
|
|
||||||
this._mousex = ev.clientX;
|
this._mousex = ev.clientX;
|
||||||
|
@ -33,12 +33,21 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__container {
|
&__container {
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__zoom {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
&__coordinates, &__user {
|
&__coordinates, &__user {
|
||||||
background-color: rgba(221, 221, 221, 0.404);
|
background-color: rgba(221, 221, 221, 0.404);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -128,7 +137,7 @@ body {
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 1003;
|
z-index: 2000;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user