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

cursor snapping

Browse Source
This commit is contained in:
Evert Prants 2022-04-02 20:02:47 +03:00
parent dcaa3da94f
commit 54ded0a49b
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
1 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/client/canvas.ts
View File

@ -40,13 +40,10 @@ export class ViewCanvas {
constructor() {}
public moveCanvas(): void {
const zoomLength = this._size / this._zoom;
// Snap the canvas coordinates to pixels, using the zoom level as the size of one pixel
const snapx = Math.floor(this._posx / zoomLength) * zoomLength;
const snapy = Math.floor(this._posy / zoomLength) * zoomLength;
this._canvas.style.top = `${snapy}px`;
this._canvas.style.left = `${snapx}px`;
this._canvas.style.transform = `scale(${zoomLength})`;
const pixelSize = this._size / this._zoom;
this._canvas.style.top = `${this._posy}px`;
this._canvas.style.left = `${this._posx}px`;
this._canvas.style.transform = `scale(${pixelSize})`;
}
public center(): void {
@ -71,21 +68,22 @@ export class ViewCanvas {
// Position of the on-screen cursor, snapped
// Relative to top left of screen
this._cursorx =
Math.ceil(
clamp(this._viewWidth / 2, screenX, screenX + realSize) / pixelSize,
) * pixelSize;
this._cursory =
Math.ceil(
clamp(this._viewHeight / 2, screenY, screenY + realSize) / pixelSize,
) * pixelSize;
this._cursorx = Math.floor(
clamp(this._viewWidth / 2, screenX, screenX + realSize),
);
this._cursory = Math.floor(
clamp(this._viewHeight / 2, screenY, screenY + realSize),
);
// Position of the cursor on the canvas
this._relcursorx = Math.floor((this._cursorx - screenX) / pixelSize);
this._relcursory = Math.floor((this._cursory - screenY) / pixelSize);
this._cursor.style.top = `${this._cursory - pixelSize / 2}px`;
this._cursor.style.left = `${this._cursorx - pixelSize / 2}px`;
const snappedX = this._relcursorx * pixelSize + screenX;
const snappedY = this._relcursory * pixelSize + screenY;
this._cursor.style.top = `${snappedY + pixelSize / 2}px`;
this._cursor.style.left = `${snappedX + pixelSize / 2}px`;
this._cursor.style.transform = `scale(${pixelSize})`;
}