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

clamp, button fix

Browse Source
This commit is contained in:
Evert Prants 2022-04-03 18:06:58 +03:00
parent 2f555f881b
commit 55275ba9be
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
2 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/client/canvas.ts
View File

@ -68,7 +68,6 @@ export class ViewCanvas {
public moveCursor(): void {
this._resetPlacerTag();
// Zoom multiplier
// Apparent size of the canvas after scaling it
const realSize = this._zoom * this._size;
// The difference between the real canvas size and apparent size
@ -85,8 +84,16 @@ export class ViewCanvas {
);
// Position of the cursor on the canvas
this._relcursorx = Math.floor((this._cursorx - screenX) / this._zoom);
this._relcursory = Math.floor((this._cursory - screenY) / this._zoom);
this._relcursorx = clamp(
Math.floor((this._cursorx - screenX) / this._zoom),
0,
this._size - 1,
);
this._relcursory = clamp(
Math.floor((this._cursory - screenY) / this._zoom),
0,
this._size - 1,
);
this._screencursorx = this._relcursorx * this._zoom + screenX;
this._screencursory = this._relcursory * this._zoom + screenY;
@ -101,7 +108,7 @@ export class ViewCanvas {
this._updateURL();
if (this._zoom > 30) {
if (this._zoom > 20) {
this._getPlacerAt(this._relcursorx, this._relcursory);
}
}
@ -413,11 +420,11 @@ export class ViewCanvas {
}
if (obj.get('px')) {
this._relcursorx = clamp(parseInt(obj.get('px'), 10), 0, this._size);
this._relcursorx = clamp(parseInt(obj.get('px'), 10), 0, this._size - 1);
}
if (obj.get('py')) {
this._relcursory = clamp(parseInt(obj.get('py'), 10), 0, this._size);
this._relcursory = clamp(parseInt(obj.get('py'), 10), 0, this._size - 1);
}
this._cursorx = this._viewWidth / 2;

6
src/client/scss/index.scss
View File

@ -133,6 +133,7 @@ body {
}
&__colors {
flex-wrap: wrap;
justify-content: center;
counter-reset: colorindex;
@ -167,12 +168,15 @@ body {
}
.btn-palette.pickable {
display: flex;
align-items: center;
flex-wrap: nowrap;
&::after {
content: '';
width: 10px;
height: 10px;
margin-left: 4px;
margin-bottom: -1px;
display: inline-block;
background-color: var(--pick-color);
}