From 255511ac16c923f81ad4f885ee549b66e9292d90 Mon Sep 17 00:00:00 2001
From: liquidev <liquidev@tutanota.com>
Date: Tue, 3 Sep 2024 22:52:12 +0200
Subject: [PATCH] give the brush editor resize handle a maximum size

this is to prevent the size from going negative, which fucks a lot of things up (you end up not being able to drag it anymore :skull:)
---
 static/index.html       |  3 ++-
 static/resize-handle.js | 17 +++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/static/index.html b/static/index.html
index 29ac9c5..cfdda0b 100644
--- a/static/index.html
+++ b/static/index.html
@@ -55,7 +55,8 @@
                         data-direction="vertical"
                         data-target="panels-overlay"
                         data-target-property="--right-width"
-                        data-init-size="384"></rkgk-resize-handle>
+                        data-init-size="384"
+                        data-min-size="128"></rkgk-resize-handle>
                     <rkgk-brush-editor></rkgk-brush-editor>
                 </div>
             </div>
diff --git a/static/resize-handle.js b/static/resize-handle.js
index b568746..4dff700 100644
--- a/static/resize-handle.js
+++ b/static/resize-handle.js
@@ -11,12 +11,10 @@ export class ResizeHandle extends HTMLElement {
         this.target = document.getElementById(this.targetId);
         this.targetProperty = this.getAttribute("data-target-property");
         this.initSize = parseInt(this.getAttribute("data-init-size"));
+        this.minSize = parseInt(this.getAttribute("data-min-size"));
 
-        this.size = parseInt(localStorage.getItem(this.#localStorageKey));
-        if (this.size != this.size) {
-            this.size = this.initSize;
-            this.#saveSize();
-        }
+        this.#setSize(parseInt(localStorage.getItem(this.#localStorageKey)));
+        this.#saveSize();
         this.#updateTargetProperty();
 
         this.visual = this.appendChild(document.createElement("div"));
@@ -25,6 +23,13 @@ export class ResizeHandle extends HTMLElement {
         this.#draggingBehaviour();
     }
 
+    #setSize(newSize) {
+        if (newSize != newSize) {
+            this.size = this.initSize;
+        }
+        this.size = Math.max(this.minSize, newSize);
+    }
+
     get #localStorageKey() {
         return `rkgk.resizeHandle.size.${this.targetId}`;
     }
@@ -48,7 +53,7 @@ export class ResizeHandle extends HTMLElement {
                     let event = await listen([window, "mousemove"], [window, "mouseup"]);
                     if (event.type == "mousemove") {
                         if (this.direction == "vertical") {
-                            this.size = startingSize + (mouseDown.clientX - event.clientX);
+                            this.#setSize(startingSize + (mouseDown.clientX - event.clientX));
                         }
                         this.#updateTargetProperty();
                     } else if (event.type == "mouseup") {