introduce file-read-as effect and refactor

Author: sprocketc

src/renderer/app/effects.cljs

@@ -102,6 +102,21 @@
            (.catch #(when on-error (rf/dispatch (conj on-error %)))))
        (legacy-file-open! success-cb)))))
 
+(rf/reg-fx
+ ::file-read-as
+ (fn [[^js/File file method events]]
+   (let [reader (js/FileReader.)]
+     (doseq
+      [[event {:keys [formatter on-fire]}] events]
+       (.addEventListener reader event
+                          #(rf/dispatch (conj on-fire
+                                              (cond-> (.-result reader)
+                                                formatter
+                                                formatter)))))
+     (case method
+       :data-url (.readAsDataURL reader file)
+       :text (.readAsText reader file)))))
+
 (rf/reg-fx
  ::download
  (fn [{:keys [data title]}]

src/renderer/attribute/impl/href.cljs

@@ -3,10 +3,12 @@
   (:require
    [clojure.string :as str]
    [re-frame.core :as rf]
+   [renderer.app.effects :as-alias app.fx]
    [renderer.app.events :as app.e]
    [renderer.attribute.hierarchy :as hierarchy]
    [renderer.attribute.views :as v]
    [renderer.element.events :as-alias element.e]
+   [renderer.notification.events :as-alias notification.e]
    [renderer.tool.events :as-alias tool.e]
    [renderer.tool.handlers :as tool.h]
    [renderer.tool.subs :as-alias tool.s]
@@ -42,14 +44,7 @@
  ::success
  (fn [{:keys [db]} [_ file]]
    {:db (tool.h/activate db :transform)
-    ::update-href file}))
-
-(rf/reg-fx
- ::update-href
- (fn [^js/File file]
-   (let [reader (js/FileReader.)]
-     (.addEventListener
-      reader
-      "load"
-      #(rf/dispatch [::element.e/set-attr :href (.-result reader)]))
-     (.readAsDataURL reader file))))
+    ::app.fx/file-read-as [file
+                           :data-url
+                           {"load" {:on-fire [::element.e/set-attr :href]}
+                            "error" {:on-fire [::notification.e/exception]}}]}))

src/renderer/core.cljs

@@ -13,7 +13,6 @@
    [renderer.attribute.impl.core]
    [renderer.dialog.events]
    [renderer.dialog.subs]
-   [renderer.document.effects]
    [renderer.document.events :as document.e]
    [renderer.document.subs]
    [renderer.element.effects]

src/renderer/document/effects.cljs

@@ -11,7 +11,6 @@
    [renderer.dialog.handlers :as dialog.h]
    [renderer.dialog.views :as dialog.v]
    [renderer.document.db :as db]
-   [renderer.document.effects :as-alias fx]
    [renderer.document.handlers :as h]
    [renderer.element.handlers :as element.h]
    [renderer.history.handlers :as history.h]
@@ -192,7 +191,13 @@
 (rf/reg-event-fx
  ::file-read
  (fn [_ [_ file]]
-   {::fx/read file}))
+   {::app.fx/file-read-as [file
+                           :text
+                           {"load" {:formatter #(-> (edn/read-string %)
+                                                    (assoc :title (.-name file)
+                                                           :path (.-path file)))
+                                    :on-fire [::load]}
+                            "error" {:on-fire [::notification.e/exception]}}]}))
 
 (rf/reg-event-fx
  ::open-directory

src/renderer/document/events.cljs

@@ -48,7 +48,7 @@
              :on-success [::e/traced]}])))))))
 
 (rf/reg-fx
- ::add-image
+ ::import-image
  (fn [[^js/File file [x y]]]
    (let [reader (js/FileReader.)]
      (.addEventListener

src/renderer/element/effects.cljs

@@ -3,6 +3,7 @@
    [clojure.string :as str]
    [re-frame.core :as rf]
    [renderer.app.effects :as-alias app.fx]
+   [renderer.document.events :as-alias document.e]
    [renderer.element.effects :as-alias fx]
    [renderer.element.handlers :as h]
    [renderer.history.handlers :as history.h]
@@ -263,7 +264,7 @@
        (history.h/finalize (str "Create " (name (:tag el)))))))
 
 (rf/reg-event-db
- ::import
+ ::import-svg
  (fn [db [_ data]]
    (-> (h/import-svg db data)
        (history.h/finalize "Import svg"))))
@@ -331,6 +332,23 @@
        (history.h/finalize "Trace image"))))
 
 (rf/reg-event-fx
- ::add-image
- (fn [_ [_ file position]]
-   {::fx/add-image [file position]}))
+ ::file-import-at
+ (fn [_ [_ position file]]
+   (when-let [file-type (.-type file)]
+     (cond
+       (= file-type "image/svg+xml")
+       {::app.fx/file-read-as [file
+                               :text
+                               {"load" {:formatter #(hash-map :svg %
+                                                              :label (.-name file)
+                                                              :position position)
+                                        :on-fire [::import-svg]}
+                                "error" {:on-fire [::notification.e/exception]}}]}
+
+       (contains? #{"image/jpeg" "image/png" "image/bmp" "image/gif"} file-type)
+       {::fx/import-image [file position]}
+
+       :else
+       (let [extension (last (str/split (.-name file) "."))]
+         (when (= extension "rps")
+           {:dispatch [::document.e/file-read file]}))))))

src/renderer/element/events.cljs

@@ -1,8 +1,6 @@
 (ns renderer.tool.effects
   (:require
-   [clojure.string :as str]
    [re-frame.core :as rf]
-   [renderer.document.events :as document.e]
    [renderer.element.events :as-alias element.e]
    [renderer.utils.dom :as dom]))
 
@@ -20,33 +18,13 @@
  ::drop
  (fn [[position data-transfer]]
    (doseq [item (.-items data-transfer)]
-     (case (.-kind item)
-       "string"
+     (when (= (.-kind item) "string")
        (let [[x y] position]
          (.getAsString item #(rf/dispatch [::element.e/add {:type :element
                                                             :tag :text
                                                             :content %
                                                             :attrs {:x x
-                                                                    :y y}}])))
-       nil))
+                                                                    :y y}}])))))
 
    (doseq [file (.-files data-transfer)]
-     (when-let [file-type (.-type file)]
-       (cond
-         (= file-type "image/svg+xml")
-         (let [reader (js/FileReader.)]
-           (.addEventListener
-            reader
-            "load"
-            #(rf/dispatch [::element.e/import {:svg (.-result reader)
-                                               :label (.-name file)
-                                               :position position}]))
-           (.readAsText reader file))
-
-         (contains? #{"image/jpeg" "image/png" "image/bmp" "image/gif"} file-type)
-         (rf/dispatch [::element.e/add-image file position])
-
-         :else
-         (let [extension (last (str/split (.-name file) "."))]
-           (when (= extension "rps")
-             (rf/dispatch [::document.e/file-read file]))))))))
+     (rf/dispatch [::element.e/file-import-at position file]))))

src/renderer/tool/effects.cljs

@@ -29,5 +29,5 @@
  ::success
  (fn [{:keys [db]} [_ file]]
    {:db (tool.h/activate db :transform)
-    ::element.fx/add-image [file (or (:point (:nearest-neighbor db))
-                                     (:adjusted-pointer-pos db))]}))
+    ::element.fx/import-image [file (or (:point (:nearest-neighbor db))
+                                        (:adjusted-pointer-pos db))]}))

src/renderer/tool/impl/element/image.cljs

@@ -7,7 +7,6 @@
    [renderer.app.events :as app.e]
    [renderer.app.subs]
    [renderer.dialog.events]
-   [renderer.document.effects]
    [renderer.document.events]
    [renderer.document.subs]
    [renderer.element.effects]

test/core_test.cljs

@@ -352,9 +352,9 @@
    (rf/dispatch [::app.e/initialize-db])
    (rf/dispatch [::document.e/init])
    (let [selected (rf/subscribe [::s/selected])]
-     (rf/dispatch [::e/import {:svg "<svg x=\"100\" y=\"100\" width=\"200\" height=\"200\"></svg>"
-                               :label "filename.svg"
-                               :position [500 500]}])
+     (rf/dispatch [::e/import-svg {:svg "<svg x=\"100\" y=\"100\" width=\"200\" height=\"200\"></svg>"
+                                   :label "filename.svg"
+                                   :position [500 500]}])
      (is (= (-> @selected first :tag) :svg))
      (is (= (-> @selected first :label) "filename.svg"))
      (is (= (-> @selected first :attrs :x) "500"))