diff --git a/src/client/canvas.ts b/src/client/canvas.ts index b2bb8a7..49ce078 100644 --- a/src/client/canvas.ts +++ b/src/client/canvas.ts @@ -55,6 +55,7 @@ export class ViewCanvas { this._posx = offsetWidth / 2; this._posy = offsetHeight / 2; + this.moveCanvas(); this.moveCursor(); } @@ -83,9 +84,9 @@ export class ViewCanvas { this._screencursorx = this._relcursorx * this._zoom + screenX; this._screencursory = this._relcursory * this._zoom + screenY; - this._cursor.style.top = `${this._screencursory + this._zoom / 2}px`; - this._cursor.style.left = `${this._screencursorx + this._zoom / 2}px`; - this._cursor.style.transform = `scale(${this._zoom})`; + this._cursor.style.transform = `translate(${this._screencursorx}px, ${this._screencursory}px)`; + this._cursor.style.width = `${this._zoom}px`; + this._cursor.style.height = `${this._zoom}px`; this._coods.innerText = `(${this._relcursorx}, ${ this._relcursory @@ -161,13 +162,13 @@ export class ViewCanvas { ev.preventDefault(); 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].pageY - ev.touches[1].pageY, ); if (this._previousPinchLength) { - const delta = pinchScale / this._previousPinchLength; + const delta = pinchLength / this._previousPinchLength; const scaleX = (ev.touches[0].clientX - this._posx) / 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._posy = ev.touches[0].clientY - scaleY * this._zoom; } - this._previousPinchLength = pinchScale; + this._previousPinchLength = pinchLength; } dragEvent(ev.touches[0].clientX, ev.touches[0].clientY); @@ -242,7 +243,8 @@ export class ViewCanvas { ) { return; } - const pixelSize = this._size / this._zoom; + + const pixelSize = this._zoom; if (ev.key === 'ArrowLeft') { this._posx += pixelSize; } else if (ev.key === 'ArrowRight') { @@ -268,7 +270,7 @@ export class ViewCanvas { public setView() { this._viewWidth = document.body.clientWidth; this._viewHeight = document.body.clientHeight; - this._fromURL(); + this._resetPositionOrCenter(); } public fill(size: number, canvas: number[]) { @@ -288,8 +290,8 @@ export class ViewCanvas { data.data[4 * index + 3] = 255; } } - this._ctx!.putImageData(data, 0, 0); + this._ctx!.putImageData(data, 0, 0); this.setView(); } @@ -314,6 +316,7 @@ export class ViewCanvas { py: this._relcursory.toString(), z: this._zoom.toFixed(2), }); + window.history.replaceState( null, document.title, @@ -321,7 +324,7 @@ export class ViewCanvas { ); }, 500); - private _fromURL(): void { + private _resetPositionOrCenter(): void { const search = window.location.search.substring(1); if (!search?.length) { this.center(); diff --git a/src/server/index.ts b/src/server/index.ts index f756cb1..d29eddd 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -130,6 +130,7 @@ io.on('connection', (socket) => { process.env.SKIP_LOGIN === 'true' ? dummyUser : (session?.passport?.user as IcyNetUser); + connections.push(socket); socket.emit( @@ -173,6 +174,7 @@ setInterval(() => { }, 1000); /// + canvas.initialize().then(() => server.listen(config.server.port, config.server.bind, () => { console.log(`Listening at http://localhost:${config.server.port}/`);