arrow nav fix

This commit is contained in:
Evert Prants 2022-04-03 16:11:08 +03:00
parent 79c9ea8968
commit db4b47b9b7
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
2 changed files with 15 additions and 10 deletions

View File

@ -55,6 +55,7 @@ export class ViewCanvas {
this._posx = offsetWidth / 2; this._posx = offsetWidth / 2;
this._posy = offsetHeight / 2; this._posy = offsetHeight / 2;
this.moveCanvas(); this.moveCanvas();
this.moveCursor(); this.moveCursor();
} }
@ -83,9 +84,9 @@ export class ViewCanvas {
this._screencursorx = this._relcursorx * this._zoom + screenX; this._screencursorx = this._relcursorx * this._zoom + screenX;
this._screencursory = this._relcursory * this._zoom + screenY; this._screencursory = this._relcursory * this._zoom + screenY;
this._cursor.style.top = `${this._screencursory + this._zoom / 2}px`; this._cursor.style.transform = `translate(${this._screencursorx}px, ${this._screencursory}px)`;
this._cursor.style.left = `${this._screencursorx + this._zoom / 2}px`; this._cursor.style.width = `${this._zoom}px`;
this._cursor.style.transform = `scale(${this._zoom})`; this._cursor.style.height = `${this._zoom}px`;
this._coods.innerText = `(${this._relcursorx}, ${ this._coods.innerText = `(${this._relcursorx}, ${
this._relcursory this._relcursory
@ -161,13 +162,13 @@ export class ViewCanvas {
ev.preventDefault(); ev.preventDefault();
if (ev.touches.length === 2 && this._pinching) { if (ev.touches.length === 2 && this._pinching) {
const pinchScale = Math.hypot( const pinchLength = Math.hypot(
ev.touches[0].pageX - ev.touches[1].pageX, ev.touches[0].pageX - ev.touches[1].pageX,
ev.touches[0].pageY - ev.touches[1].pageY, ev.touches[0].pageY - ev.touches[1].pageY,
); );
if (this._previousPinchLength) { if (this._previousPinchLength) {
const delta = pinchScale / this._previousPinchLength; const delta = pinchLength / this._previousPinchLength;
const scaleX = (ev.touches[0].clientX - this._posx) / this._zoom; const scaleX = (ev.touches[0].clientX - this._posx) / this._zoom;
const scaleY = (ev.touches[0].clientY - this._posy) / this._zoom; const scaleY = (ev.touches[0].clientY - this._posy) / this._zoom;
@ -177,7 +178,7 @@ export class ViewCanvas {
this._posx = ev.touches[0].clientX - scaleX * this._zoom; this._posx = ev.touches[0].clientX - scaleX * this._zoom;
this._posy = ev.touches[0].clientY - scaleY * this._zoom; this._posy = ev.touches[0].clientY - scaleY * this._zoom;
} }
this._previousPinchLength = pinchScale; this._previousPinchLength = pinchLength;
} }
dragEvent(ev.touches[0].clientX, ev.touches[0].clientY); dragEvent(ev.touches[0].clientX, ev.touches[0].clientY);
@ -242,7 +243,8 @@ export class ViewCanvas {
) { ) {
return; return;
} }
const pixelSize = this._size / this._zoom;
const pixelSize = this._zoom;
if (ev.key === 'ArrowLeft') { if (ev.key === 'ArrowLeft') {
this._posx += pixelSize; this._posx += pixelSize;
} else if (ev.key === 'ArrowRight') { } else if (ev.key === 'ArrowRight') {
@ -268,7 +270,7 @@ export class ViewCanvas {
public setView() { public setView() {
this._viewWidth = document.body.clientWidth; this._viewWidth = document.body.clientWidth;
this._viewHeight = document.body.clientHeight; this._viewHeight = document.body.clientHeight;
this._fromURL(); this._resetPositionOrCenter();
} }
public fill(size: number, canvas: number[]) { public fill(size: number, canvas: number[]) {
@ -288,8 +290,8 @@ export class ViewCanvas {
data.data[4 * index + 3] = 255; data.data[4 * index + 3] = 255;
} }
} }
this._ctx!.putImageData(data, 0, 0);
this._ctx!.putImageData(data, 0, 0);
this.setView(); this.setView();
} }
@ -314,6 +316,7 @@ export class ViewCanvas {
py: this._relcursory.toString(), py: this._relcursory.toString(),
z: this._zoom.toFixed(2), z: this._zoom.toFixed(2),
}); });
window.history.replaceState( window.history.replaceState(
null, null,
document.title, document.title,
@ -321,7 +324,7 @@ export class ViewCanvas {
); );
}, 500); }, 500);
private _fromURL(): void { private _resetPositionOrCenter(): void {
const search = window.location.search.substring(1); const search = window.location.search.substring(1);
if (!search?.length) { if (!search?.length) {
this.center(); this.center();

View File

@ -130,6 +130,7 @@ io.on('connection', (socket) => {
process.env.SKIP_LOGIN === 'true' process.env.SKIP_LOGIN === 'true'
? dummyUser ? dummyUser
: (session?.passport?.user as IcyNetUser); : (session?.passport?.user as IcyNetUser);
connections.push(socket); connections.push(socket);
socket.emit( socket.emit(
@ -173,6 +174,7 @@ setInterval(() => {
}, 1000); }, 1000);
/// ///
canvas.initialize().then(() => canvas.initialize().then(() =>
server.listen(config.server.port, config.server.bind, () => { server.listen(config.server.port, config.server.bind, () => {
console.log(`Listening at http://localhost:${config.server.port}/`); console.log(`Listening at http://localhost:${config.server.port}/`);