🎉 Allow to navigate undo history

CHANGES.md

@@ -6,6 +6,7 @@
 
 - Allow to zoom with ctrl + middle button [Taiga #1428](https://tree.taiga.io/project/penpot/us/1428).
 - Auto placement of duplicated objects [Taiga #1386](https://tree.taiga.io/project/penpot/us/1386).
+- Go to a undo step clicking on a history element of the list [Taiga #1374](https://tree.taiga.io/project/penpot/us/1374).
 - Use space + mouse drag to pan, instead of only space [Taiga #1800](https://tree.taiga.io/project/penpot/us/1800).
 
 ### :bug: Bugs fixed

frontend/src/app/main/data/workspace/common.cljs

@@ -144,6 +144,38 @@
                                             :origin it
                                             :save-undo? false}))))))))))
 
+(defn undo-to-index
+  "Repeat undoing or redoing until dest-index is reached."
+  [dest-index]
+  (ptk/reify ::undo-to-index
+    ptk/WatchEvent
+    (watch [it state _]
+      (let [edition (get-in state [:workspace-local :edition])
+            drawing (get state :workspace-drawing)]
+        (when-not (or (some? edition) (not-empty drawing))
+          (let [undo  (:workspace-undo state)
+                items (:items undo)
+                index (or (:index undo) (dec (count items)))]
+            (when (and (some? items)
+                       (<= 0 dest-index (dec (count items))))
+              (let [changes (vec (apply concat
+                                        (cond
+                                          (< dest-index index)
+                                          (->> (subvec items (inc dest-index) (inc index))
+                                               (reverse)
+                                               (map :undo-changes))
+                                          (> dest-index index)
+                                          (->> (subvec items (inc index) (inc dest-index))
+                                               (map :redo-changes))
+                                          :else [])))]
+                (when (seq changes)
+                  (rx/of (dwu/materialize-undo changes dest-index)
+                         (dch/commit-changes {:redo-changes changes
+                                              :undo-changes []
+                                              :origin it
+                                              :save-undo? false})))))))))))
+
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Shapes
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

frontend/src/app/main/ui/workspace/sidebar/history.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.sidebar.history
   (:require
    [app.common.data :as d]
+   [app.main.data.workspace.common :as dwc]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.icons :as i]
@@ -249,7 +250,7 @@
 
        nil)]))
 
-(mf/defc history-entry [{:keys [locale entry disabled? current?]}]
+(mf/defc history-entry [{:keys [locale entry idx-entry disabled? current?]}]
   (let [hover? (mf/use-state false)
         show-detail? (mf/use-state false)]
     [:div.history-entry {:class (dom/classnames
@@ -259,14 +260,14 @@
                                  :show-detail @show-detail?)
                          :on-mouse-enter #(reset! hover? true)
                          :on-mouse-leave #(reset! hover? false)
-                         :on-click #(when (:detail entry)
+                         :on-click (st/emitf (dwc/undo-to-index idx-entry))}
-                                      (swap! show-detail? not))
-                         }
      [:div.history-entry-summary
       [:div.history-entry-summary-icon (entry->icon entry)]
       [:div.history-entry-summary-text  (entry->message locale entry)]
       (when (:detail entry)
-        [:div.history-entry-summary-button i/arrow-slide])]
+        [:div.history-entry-summary-button {:on-click #(when (:detail entry)
+                                                         (swap! show-detail? not))}
+         i/arrow-slide])]
 
      (when show-detail?
        [:& history-entry-details {:entry entry}])]))
@@ -287,6 +288,7 @@
              [:& history-entry {:key (str "entry-" idx-entry)
                                 :locale locale
                                 :entry entry
+                                :idx-entry idx-entry
                                 :current? (= idx-entry index)
                                 :disabled? (> idx-entry index)}])])]))