WIP: continuing migration to re-frame

frontend/.gitignore

@@ -13,3 +13,5 @@
 
 # shadow-cljs cache, port files
 /.shadow-cljs/
+
+*.swp

frontend/src/cljs/microtables_frontend/core.cljs

@@ -4,8 +4,8 @@
    [re-frame.core :as re-frame]
    [microtables-frontend.events :as events]
    [microtables-frontend.views :as views]
-   [microtables-frontend.config :as config]
-   ))
+   [microtables-frontend.config :as config]))
+
 
 
 (defn dev-setup []

frontend/src/cljs/microtables_frontend/db.cljs

@@ -2,20 +2,23 @@
 
 (def default-db
   {:name "re-frame"
-   :table-data [{:row 1 :col "A" :value "59" :view :display}
-                {:row 5 :col "C" :value "269" :view :display}
-                {:row 4 :col "B" :value "7893" :view :display}
-                {:row 2 :col "F" :value "8650" :view :display}
-                {:row 6 :col "D" :value "4065" :view :display}
-                {:row 7 :col "F" :value "5316" :view :display}
-                {:row 12 :col "A" :value "2405" :view :display}
-                {:row 5 :col "B" :value "7863" :view :display}
-                {:row 9 :col "E" :value "3144" :view :display}
-                {:row 10 :col "D" :value "8272" :view :display}
-                {:row 11 :col "D" :value "2495" :view :display}
-                {:row 15 :col "E" :value "8968" :view :display}
-                {:row 7 :col "B" :value "=C5 + D6" :view :display}
-                {:row 8 :col "B" :value "=B7 * 2" :view :display}
-                {:row 7 :col "C" :value "=D1" :view :display}
-                {:row 12 :col "B" :value "=C12" :view :display}]})
+   ;TODO: add "start" and "end" corners as selection
+   :position {:cursor nil
+              :selection nil}
+   :table-data [{:row 1 :col "A" :value "59"}
+                {:row 5 :col "C" :value "269"}
+                {:row 4 :col "B" :value "7893"}
+                {:row 2 :col "F" :value "8650"}
+                {:row 6 :col "D" :value "4065"}
+                {:row 7 :col "F" :value "5316"}
+                {:row 12 :col "A" :value "2405"}
+                {:row 5 :col "B" :value "7863"}
+                {:row 9 :col "E" :value "3144"}
+                {:row 10 :col "D" :value "8272"}
+                {:row 11 :col "D" :value "2495"}
+                {:row 15 :col "E" :value "8968"}
+                {:row 7 :col "B" :value "=C5 + D6"}
+                {:row 8 :col "B" :value "=B7 * 2"}
+                {:row 7 :col "C" :value "=D1"}
+                {:row 12 :col "B" :value "=C12"}]})
 

frontend/src/cljs/microtables_frontend/events.cljs

@@ -1,7 +1,8 @@
 (ns microtables-frontend.events
   (:require
    [re-frame.core :as re-frame]
-   [microtables-frontend.db :as db]))
+   [microtables-frontend.db :as db]
+   [microtables-frontend.utils :as utils]))
 
 
 (re-frame/reg-event-db
@@ -9,9 +10,28 @@
  (fn [_ _]
    db/default-db))
 
+
+(re-frame/reg-event-db
+  ::movement-enter-cell
+  (fn [db [_ c r]]
+    (println "::movement-enter-cell" c r)
+    (assoc-in db [:position :cursor] {:c c :r r})))
+
+(re-frame/reg-event-db
+  ::movement-leave-cell
+  (fn [db [_ c r]]
+    (let [datum (utils/get-datum (:table-data db) c r)]
+      (println "::movement-leave-cell" c r "dirty?" (true? (:dirty datum)))
+      (-> db
+          (assoc-in [:position :cursor] nil)
+          (assoc-in [:position :selection] nil)))))
+
+
 (re-frame/reg-event-db
   ::edit-cell-value
   (fn [db [_ c r existing-datum value]]
+    (println "::edit-cell-value" c r value)
     (if (nil? existing-datum)
       (assoc db :table-data (conj (:table-data db) {:row r :col c :value value :dirty true}))
       (assoc db :table-data (map #(if (and (= r (:row %)) (= c (:col %))) (assoc (assoc % :dirty true) :value value) %) (:table-data db))))))
+

frontend/src/cljs/microtables_frontend/subs.cljs

@@ -7,9 +7,11 @@
  (fn [db]
    (:name db)))
 
+;TODO: insert display mode data?
 (re-frame/reg-sub
   ::table-data
   (fn [db]
+    (println "returning table data")
     (:table-data db)))
 
 

frontend/src/cljs/microtables_frontend/utils.cljs

@@ -16,4 +16,7 @@
 
 (def col-letters (iterate next-letter "A"))
 
+(defn get-datum [data c r]
+  (some #(if (and (= c (:col %)) (= r (:row %))) %) data))
+
 

frontend/src/cljs/microtables_frontend/views.cljs

@@ -6,16 +6,19 @@
    [microtables-frontend.utils :as utils]))
 
 
-
+;; TABLE COMPONENTS
 
 (defn cell [c r data]
-  (let [datum (some #(if (and (= c (:col %)) (= r (:row %))) %) data)]
+  (let [datum (utils/get-datum data c r)]
     ^{:key (str c r)} [:td
                        [:input {:id (str c r)
                                 :value (if (= (get datum :view nil) :value)
                                          (get datum :value "")
-                                         (get datum :error (get datum :display (get datum :value ""))))
-                                :on-change #(re-frame/dispatch [::events/edit-cell-value c r datum (.. % -target -value)])}]]))
+                                         (get datum :error (get datum :display (get datum :value ""))));TODO: add "highlight" display mode (possibly just a css class)
+                                :on-change #(re-frame/dispatch [::events/edit-cell-value c r datum (.. % -target -value)])
+                                :on-focus #(re-frame/dispatch [::events/movement-enter-cell c r])
+                                ;TODO: add "dirty" value to pass to on-blur
+                                :on-blur #(re-frame/dispatch [::events/movement-leave-cell c r])}]]))
 
 (defn row [r cols data]
   ^{:key (str "row-" r)} [:tr

frontend/src/js/index.js

@@ -0,0 +1,41 @@
+
+// to include an npm module/package into clojurescript:
+// https://figwheel.org/docs/npm.html
+
+// to reduce the bundle size:
+// https://mathjs.org/docs/custom_bundling.html
+
+import { parse, evaluate } from 'mathjs';
+
+function getVariables(expression) {
+    if( !expression || typeof expression !== 'string' ) {
+        console.log('not correct input', expression, typeof expression);
+        return [];
+    }
+    try {
+        const expressionObject = parse(expression);
+        console.log('now returning', expressionObject);
+        return expressionObject
+            .filter(x => x.isSymbolNode)
+            .map(x => x.name)
+            .map(x => x.toUpperCase())
+            .filter(x => /^[A-Z]+[0-9]+$/.test(x));
+    }
+    catch(e) {
+        console.error('error in parsing or filtering for variables', e.message || e);
+        return [];
+    }
+}
+
+function customEval(...args) {
+    try {
+        return evaluate(...args);
+    }
+    catch(e) {
+        console.error('error in evaluating expression', e.message || e);
+        return {error: e.message};
+    }
+}
+
+window.mathjs = {parse, evaluate: customEval, getVariables};
+

old-frontend/src/microtables_frontend/core.cljs

@@ -143,9 +143,9 @@
                       (re-evaluate data))))
 (defn on-keyPress [c r e]
   (println "key press" c r (.. e -which) (.keys js/Object e))
-  (if (= 13 (.. e -which)) (.focus (.getElementById js/document (str c (inc r)))))
+  (if (= 13 (.. e -which)) (.focus (.getElementById js/document (str c (inc r))))))
   ;TODO TODO TODO TODO TODO TODO TODO TODO TODO
-  )
+  
 
 
 ;; -------------------------
@@ -170,9 +170,9 @@
           :on-click #(println "delete range")}]
    [:div {:class "copyrange button"
           :title "copy range"
-          :on-click #(println "copy range")}]
-   ]
-  )
+          :on-click #(println "copy range")}]])
+   
+  
 
 (defn cell [c r data]
   (let [datum (some #(if (and (= c (:col %)) (= r (:row %))) %) data)]
@@ -195,9 +195,9 @@
                             (map #(cell % r data) cols))])
 (defn header-row [cols]
   ^{:key "header"} [:tr
-   (cons
-     ^{:key "corner"} [:th]
-     (map (fn [c] ^{:key (str "col-head-" c)} [:th c]) cols))])
+                    (cons
+                      ^{:key "corner"} [:th]
+                      (map (fn [c] ^{:key (str "col-head-" c)} [:th c]) cols))])
 
 (defn sheet [data]
   [:table [:tbody