enhance history

src/renderer/document/views.cljs

@@ -29,6 +29,7 @@
    [comp/icon-button
     "undo"
     {:title "Undo"
+     :style {:margin-right 0}
      :on-click #(rf/dispatch [:history/undo])
      :disabled (not @(rf/subscribe [:history/undos?]))}]
 
@@ -37,9 +38,11 @@
     @(rf/subscribe [:history/undos])
     (not @(rf/subscribe [:history/undos?]))]
 
-   [comp/icon-button "redo" {:title "Undo"
-                             :on-click #(rf/dispatch [:history/redo])
-                             :disabled (not @(rf/subscribe [:history/redos?]))}]
+   [comp/icon-button "redo"
+    {:title "Undo"
+     :style {:margin-right 0}
+     :on-click #(rf/dispatch [:history/redo])
+     :disabled (not @(rf/subscribe [:history/redos?]))}]
 
    [history/select
     "Redo stack"

src/renderer/history/README.md

@@ -1 +1,34 @@
 # History  module
+
+This module was originally inspired by [day8/re-frame-undo](https://github.com/day8/re-frame-undo) which provides a decent history implementation by utilizing the built-in immutability of the language.
+
+## Why build something new?
+
+- This library registers a single history for the app. We need a different history stack per document.
+- The state is pushed into a ratom to avoid adding the history to the state. We need to store the history to our app-db.
+- It is implemented using a the traditional undo and redo stacks. We need to preserve the whole tree.
+- It uses an interceptor to store the changes of re-frame events which is limited in various ways.
+
+See below for implementation details
+https://github.com/day8/re-frame-undo/blob/master/src/day8/re_frame/undo.cljs
+
+## What we currently do
+
+- Each document has a dedicated `:history` map.
+- We explicitly call a `finalize` function when we need to push a new state to history. This allows us to avoid throttling or debouncing specific actions. We can also easily cancel an operation by swapping the current state with the last history point (see `:history/cancel`). We are modifying our db and call finalize when we are done.
+- Our state is normalized to easily access specific points in history. We can then look for a specific state on our tree by id and then retrieve its data with a simple `get-in`.
+- All changes under [:documents :document-key :elements] should be considered undoable and part of the file history.
+
+The end result on our db looks like this
+```clojure
+:history {:position :6
+          :states {:907fdbc9-d2ad-4697-bea3-9aa5e2c46054 {...}
+                   :ed0cce51-d00e-43e0-a06a-04c72ccce98f {:elements {...} ; Our actual state
+                                                          :explanation "Set x to 500.3" 
+                                                          :id ed0cce51-d00e-43e0-a06a-04c72ccce98f
+                                                          :timestamp 1647882725718
+                                                          :index 2
+                                                          :parent :907fdbc9-d2ad-4697-bea3-9aa5e2c46054
+                                                          :children [cded6d1d-619f-4974-af95-8313cefd6f87]}
+                   :cded6d1d-619f-4974-af95-8313cefd6f87 {...}}}  
+```

src/renderer/history/handlers.cljs

@@ -1,7 +1,8 @@
 (ns renderer.history.handlers
   (:require
    [renderer.element.handlers :as element.h]
-   [renderer.utils.uuid :as uuid]))
+   [renderer.utils.uuid :as uuid]
+   [renderer.utils.vec :as vec]))
 
 (defn history-path [db]
   [:documents (:active-document db) :history])
@@ -99,6 +100,18 @@
    :parent (:position (history db))
    :children []})
 
+(defn update-ancestors
+  [db]
+  (loop [node (state db)
+         db db]
+    (let [parent-id (:parent node)
+          parent (state db parent-id)]
+      (if parent
+        (let [index (.indexOf (:children parent) (:id node))
+              new-index (dec (count (:children parent)))]
+          (recur parent (update-in db (conj (history-path db) :states parent-id :children) vec/move index new-index)))
+        db)))) ; REVIEW
+
 (defn finalize
   "Pushes changes to the zip-tree.
    Explicitly adding states, allows canceling actions before adding the state 
@@ -115,8 +128,8 @@
                              (create-state db id (apply str explanation more))))
 
        current-position
-       (update-in (conj (history-path db) :states current-position :children)
-                  conj id)))))
+       (-> (update-in (conj (history-path db) :states current-position :children) conj id)
+           update-ancestors)))))
 
 (defn clear
   [db]

src/renderer/history/subs.cljs

@@ -26,19 +26,18 @@
 (defn state->d3-data
   [db id]
   (let [state (h/state db id)]
-    {:name (:explanation state)
-     :id id
-     :active (= id (h/current-position db))
-     :restored (:restored? state)
-     :color (str "hsla(" (+ (* (/ 100 (h/state-count db)) (:index state)) 20) ",40%,60%,1)")
-     :children (mapv #(state->d3-data db %) (:children state))}))
+    #js {:name (:explanation state)
+         :id id
+         :active (= id (h/current-position db))
+         :restored (:restored? state)
+         :color (str "hsla(" (+ (* (/ 100 (h/state-count db)) (:index state)) 20) ",40%,60%,1)")
+         :children (apply array (map #(state->d3-data db %) (:children state)))}))
 
 (rf/reg-sub
  :history/tree-data
  (fn [db _]
-   (clj->js
-    (let [root (:id (first (sort-by :index (vals (:states (h/history db))))))]
-      (state->d3-data db root)))))
+   (let [root (:id (first (sort-by :index (vals (:states (h/history db))))))]
+     (state->d3-data db root))))
 
 (rf/reg-sub
  :history/state-count