From 4c683bb10c8f446718aa69ed751f86229d9c0343 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Mon, 5 Feb 2024 16:56:09 +0100
Subject: [PATCH] :bug: Fix problem with numeric inputs

---
 .../app/main/ui/components/numeric_input.cljs | 29 +++++++++++++++++--
 .../src/app/main/ui/flex_controls/margin.cljs |  4 +--
 .../sidebar/options/rows/color_row.cljs       |  1 +
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/main/ui/components/numeric_input.cljs b/frontend/src/app/main/ui/components/numeric_input.cljs
index a5b23b45d5..94a2636f7a 100644
--- a/frontend/src/app/main/ui/components/numeric_input.cljs
+++ b/frontend/src/app/main/ui/components/numeric_input.cljs
@@ -58,6 +58,10 @@
         ;; We need to store the handle-blur ref so we can call it on unmount
         dirty-ref   (mf/use-ref false)
 
+        ;; Last value input by the user we need to store to save on unmount
+
+        last-value*  (mf/use-var nil)
+
         parse-value
         (mf/use-fn
          (mf/deps min-value max-value value nillable? default)
@@ -102,7 +106,20 @@
         (mf/use-fn
          (mf/deps wrap-value? min-value max-value parse-value apply-value)
          (fn [event up? down?]
-           (let [current-value (parse-value)]
+           (let [current-value (parse-value)
+                 current-value
+                 (cond
+                   (and (not current-value) down? max-value)
+                   max-value
+
+                   (and (not current-value) up? min-value)
+                   min-value
+
+                   (not current-value)
+                   (d/nilv default 0)
+
+                   :else
+                   current-value)]
              (when current-value
                (let [increment (cond
                                  (kbd/shift? event)
@@ -152,6 +169,13 @@
                (update-input value-str)
                (dom/blur! node)))))
 
+        handle-key-up
+        (mf/use-fn
+         (mf/deps parse-value)
+         (fn []
+           ;; Store the last value inputed
+           (reset! last-value* (parse-value))))
+
         handle-mouse-wheel
         (mf/use-fn
          (mf/deps set-delta)
@@ -167,7 +191,7 @@
         (mf/use-fn
          (mf/deps parse-value apply-value update-input on-blur)
          (fn [event]
-           (let [new-value (or (parse-value) default)]
+           (let [new-value (or @last-value* default)]
              (if (or nillable? new-value)
                (apply-value event new-value)
                (update-input new-value)))
@@ -208,6 +232,7 @@
                   (obj/set! "defaultValue" (fmt/format-number value))
                   (obj/set! "title" title)
                   (obj/set! "onKeyDown" handle-key-down)
+                  (obj/set! "onKeyUp" handle-key-up)
                   (obj/set! "onBlur" handle-blur)
                   (obj/set! "onFocus" handle-focus))]
 
diff --git a/frontend/src/app/main/ui/flex_controls/margin.cljs b/frontend/src/app/main/ui/flex_controls/margin.cljs
index b764972e0f..dee2900b39 100644
--- a/frontend/src/app/main/ui/flex_controls/margin.cljs
+++ b/frontend/src/app/main/ui/flex_controls/margin.cljs
@@ -71,8 +71,8 @@
     [:rect.margin-rect
      {:x (:x rect-data)
       :y (:y rect-data)
-      :width (:width rect-data)
-      :height (:height rect-data)
+      :width (max 0 (:width rect-data))
+      :height (max 0 (:height rect-data))
       :on-pointer-enter on-pointer-enter
       :on-pointer-leave on-pointer-leave
       :on-pointer-down on-pointer-down
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
index 906925620d..e3e2e874c4 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -255,6 +255,7 @@
                              :on-focus on-focus
                              :on-blur on-blur
                              :on-change handle-opacity-change
+                             :default 100
                              :min 0
                              :max 100}]])]