From 55275ba9bead5bd07d391b509f7daa4639fa8bc7 Mon Sep 17 00:00:00 2001
From: Evert Prants <evert@lunasqu.ee>
Date: Sun, 3 Apr 2022 18:06:58 +0300
Subject: [PATCH] clamp, button fix

---
 src/client/canvas.ts       | 19 +++++++++++++------
 src/client/scss/index.scss |  6 +++++-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/client/canvas.ts b/src/client/canvas.ts
index 0675f1e..5e8de91 100644
--- a/src/client/canvas.ts
+++ b/src/client/canvas.ts
@@ -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;
diff --git a/src/client/scss/index.scss b/src/client/scss/index.scss
index 1fcc9a3..d49a749 100644
--- a/src/client/scss/index.scss
+++ b/src/client/scss/index.scss
@@ -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);
     }