evert/icydraw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test event wrapper

Browse Source
This commit is contained in:
Evert Prants 2022-04-04 17:36:15 +03:00
parent 8c74d46cc9
commit 9b51620239
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
2 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/client/canvas.ts
View File

@ -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;

13
src/client/scss/index.scss
View File

@ -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;
} }