arrow nav fix
This commit is contained in:
parent
79c9ea8968
commit
db4b47b9b7
@ -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();
|
||||||
|
@ -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}/`);
|
||||||
|
Loading…
Reference in New Issue
Block a user