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