From c340684b33e1939582e1da0f78c77ecee762754d Mon Sep 17 00:00:00 2001
From: heyarne <arne@schlueter.is>
Date: Sat, 1 Jan 2022 19:22:15 +0100
Subject: [PATCH] Allow removing and changing the amount of already added rects

---
 resources/public/style.css         |  9 ++++++++
 src/heyarne/rect_packing/core.cljs | 34 +++++++++++++++++++++++-------
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/resources/public/style.css b/resources/public/style.css
index 425f8b1..dcf8fe5 100644
--- a/resources/public/style.css
+++ b/resources/public/style.css
@@ -51,3 +51,12 @@ input[type=number] {
 .rect-dim {
   width: 6em;
 }
+
+.inventory li a.delete-items {
+  display: none;
+  text-decoration: none;
+}
+
+.inventory li:hover a.delete-items {
+  display: inline;
+}
diff --git a/src/heyarne/rect_packing/core.cljs b/src/heyarne/rect_packing/core.cljs
index 9cd9b07..ab98b42 100644
--- a/src/heyarne/rect_packing/core.cljs
+++ b/src/heyarne/rect_packing/core.cljs
@@ -19,7 +19,6 @@
 
   )
 
-
 (defn pack-rects-naive
   "Sorts all rectangles by height and places them next to each other into frame,
   starting at the top left."
@@ -63,6 +62,9 @@
         rects (repeatedly (:num order) #(rect/rect size))]
     (swap! state update-in [:rects size] (comp vec concat) rects)))
 
+(defn event-val->number [e]
+  (js/parseInt (.. e -target -value) 10))
+
 (defn order []
   (let [base-order {:num 1
                     :width 100
@@ -76,32 +78,48 @@
                              (add-parts-to-cut! @addition)
                              (reset! addition base-order))}
          [:input.num-rects {:type "number"
-                            :on-change #(swap! addition assoc :num (js/parseInt (.. % -target -value) 10))
+                            :min 1
+                            :on-input #(swap! addition assoc :num (event-val->number %))
                             :value (:num to-add)}] " × "
          [:input.rect-dim {:type "number"
-                           :on-change #(swap! addition assoc :width (js/parseInt (.. % -target -value) 10))
+                           :min 1
+                           :on-input #(swap! addition assoc :width (event-val->number %))
                            :value (:width to-add)}] " cm by "
          [:input.rect-dim {:type "number"
-                           :on-change #(swap! addition assoc :height (js/parseInt (.. % -target -value) 10))
+                           :min 1
+                           :on-input #(swap! addition assoc :height (event-val->number %))
                            :value (:height to-add)}] " cm "
          [:button "Add"]]))))
 
 #_(defn debug [val]
   [:pre (with-out-str (pprint val))])
 
+(defn update-rect-count! [size n]
+  (swap! state assoc-in [:rects size] (repeatedly n #(rect/rect size))))
+
+(defn remove-rects-of-size! [size]
+  (swap! state update :rects dissoc size))
+
 (defn inventory [rects]
   [:<>
    [order]
    (when (seq rects)
      [:<>
       [:p "List of parts to cut:"]
-      [:ul
+      [:ul.inventory
        (for [[size rects] rects
              :let [n (count rects)]]
          ^{:key size}
-         [:li [:input.num-rects {:type "number"
-                                 #_#_ :on-change #(update-rects! rects size (js/Number. (-> % .-target .-value)))
-                                 :value n}] (str " × " (:x size) " cm by " (:y size) " cm ")])]])])
+         [:li
+          [:input.num-rects {:type "number"
+                             :min 1
+                             :on-input #(update-rect-count! size (event-val->number %))
+                             :value n}] (str " × " (:x size) " cm by " (:y size) " cm ")
+          [:a.delete-items {:href "#"
+                            :on-click (fn [ev]
+                                        (.preventDefault ev)
+                                        (remove-rects-of-size! size))
+                            :title (str "Remove " n " items")} "❌"]])]])])
 
 (defn visualization [frame packed-rects]
   [:svg.visualization {:viewBox "-0.5 -0.5 501 501" :xmlns "http://www.w3.org/2000/svg"}