♻️ Refactor image uploading from workspace.

frontend/src/uxbox/main/ui/workspace/header.cljs

@@ -12,10 +12,11 @@
    [uxbox.builtins.icons :as i]
    [uxbox.config :as cfg]
    [uxbox.main.data.history :as udh]
-   [uxbox.main.data.lightbox :as udl]
    [uxbox.main.data.pages :as udp]
    [uxbox.main.data.undo :as udu]
    [uxbox.main.data.workspace :as dw]
+   [uxbox.main.ui.workspace.images :refer [import-image-modal]]
+   [uxbox.main.ui.modal :as modal]
    [uxbox.main.refs :as refs]
    [uxbox.main.store :as st]
    [uxbox.main.ui.users :refer [user]]
@@ -46,8 +47,9 @@
   (let [toggle #(st/emit! (dw/toggle-flag %))
         on-undo #(st/emit! (udu/undo))
         on-redo #(st/emit! (udu/redo))
-        on-image #(udl/open! :import-image)
+        on-image #(modal/show! import-image-modal {})
-        on-download #(udl/open! :download)]
+        ;;on-download #(udl/open! :download)
+        ]
     [:header#workspace-bar.workspace-bar
      [:div.main-icon
       [:a {:on-click #(st/emit! (rt/nav :dashboard/projects))} i/logo-icon]]
@@ -101,7 +103,8 @@
       [:ul.options-btn
        [:li.tooltip.tooltip-bottom
         {:alt "Download (Ctrl + E)"
-         :on-click on-download}
+         ;; :on-click on-download
+         }
         i/download]
        [:li.tooltip.tooltip-bottom
         {:alt "Image (Ctrl + I)"

frontend/src/uxbox/main/ui/workspace/images.cljs

@@ -8,16 +8,13 @@
 (ns uxbox.main.ui.workspace.images
   (:require
    [lentes.core :as l]
-   [potok.core :as ptk]
+   [rumext.alpha :as mf]
-   [rumext.core :as mx :include-macros true]
+   [rumext.core :as mx]
    [uxbox.builtins.icons :as i]
    [uxbox.main.data.images :as udi]
-   [uxbox.main.data.lightbox :as udl]
-   [uxbox.main.data.shapes :as uds]
-   [uxbox.main.data.workspace :as udw]
    [uxbox.main.data.workspace-drawing :as udwd]
    [uxbox.main.store :as st]
-   [uxbox.main.ui.lightbox :as lbx]
+   [uxbox.main.ui.modal :as modal]
    [uxbox.util.data :refer [read-string jscoll->vec]]
    [uxbox.util.dom :as dom]
    [uxbox.util.i18n :as t :refer [tr]]
@@ -25,166 +22,143 @@
 
 ;; --- Refs
 
-(def ^:private dashboard-ref
+(def ^:private collections-iref
-  (-> (l/in [:dashboard :images])
-      (l/derive st/state)))
-
-(def ^:private collections-ref
   (-> (l/key :images-collections)
       (l/derive st/state)))
 
-(def ^:private images-ref
+(def ^:private images-iref
   (-> (l/key :images)
       (l/derive st/state)))
 
-(def ^:private uploading?-ref
+(def ^:private uploading-iref
-  (-> (l/key :uploading)
+  (-> (l/in [:dashboard :images :uploading])
-      (l/derive dashboard-ref)))
+      (l/derive st/state)))
 
-;; --- Components
+;; --- Import Image Modal
 
-(mx/defcs import-image-lightbox
+(declare import-image-from-coll-modal)
-  {:mixins [mx/static mx/reactive]}
+
-  [own]
+(mf/defc import-image-modal
-  (letfn [(on-upload-click [event]
+  [props]
-            (let [input (mx/ref-node own "input")]
+  (let [input (mf/use-ref* nil)
-              (dom/click input)))
+        uploading? (mf/deref uploading-iref)]
-          (on-uploaded [[image]]
+    (letfn [(on-upload-click [event]
-            (let [{:keys [id name width height]} image
+              (let [input-el (mf/ref-node input)]
-                  shape {:type :image
+                (dom/click input-el)))
-                         :name name
+
-                         :id (uuid/random)
+            (on-uploaded [[image]]
-                         :metadata {:width width
+              (let [{:keys [id name width height]} image
-                                    :height height}
+                    shape {:type :image
-                         :image id}]
+                           :name name
-              (st/emit! (udwd/select-for-drawing shape))
+                           :id (uuid/random)
-              (udl/close!)))
+                           :metadata {:width width
-          (on-files-selected [event]
+                                      :height height}
-            (let [files (dom/get-event-files event)
+                           :image id}]
-                  files (jscoll->vec files)]
+                (st/emit! (udwd/select-for-drawing shape))
-              (st/emit! (udi/create-images nil files on-uploaded))))
+                (modal/hide!)))
-          (on-select-from-library [event]
+
-            (dom/prevent-default event)
+            (on-files-selected [event]
-            (udl/open! :import-image-from-collections))
+              (let [files (dom/get-event-files event)
-          (on-close [event]
+                    files (jscoll->vec files)]
-            (dom/prevent-default event)
+                (st/emit! (udi/create-images nil files on-uploaded))))
-            (udl/close!))]
+
-    (let [uploading? (mx/react uploading?-ref)]
+            (on-select-from-library [event]
-      [:div.lightbox-body {}
+              (dom/prevent-default event)
-       [:h3 {} "New image"]
+              (modal/show! import-image-from-coll-modal {}))
-       [:div.row-flex {}
+
+            (on-close [event]
+              (dom/prevent-default event)
+              (modal/hide!))]
+      [:div.lightbox-body
+       [:h3 "New image"]
+       [:div.row-flex
         [:div.lightbox-big-btn {:on-click on-select-from-library}
-         [:span.big-svg {} i/image]
+         [:span.big-svg i/image]
-         [:span.text {} "Select from library"]]
+         [:span.text "Select from library"]]
         [:div.lightbox-big-btn {:on-click on-upload-click}
          (if uploading?
-           [:span.big-svg.upload {} i/loader-pencil]
+           [:span.big-svg.upload i/loader-pencil]
-           [:span.big-svg.upload {} i/exit])
+           [:span.big-svg.upload i/exit])
-         [:span.text {} "Upload file"]
+         [:span.text "Upload file"]
          [:input.upload-image-input
           {:style {:display "none"}
            :accept "image/jpeg,image/png"
            :type "file"
-           :ref "input"
+           :ref input
            :on-change on-files-selected}]]]
        [:a.close {:on-click on-close} i/close]])))
 
-(mx/defc image-item
+;; --- Import Image from Collection Modal
-  {:mixins [mx/static]}
+
-  [{:keys [thumbnail name id width height] :as image}]
+(mf/defc image-item
+  [{:keys [image] :as props}]
   (letfn [(on-click [event]
             (let [shape {:type :image
-                         :name name
+                         :name (:name image)
                          :id (uuid/random)
-                         :metadata {:width width
+                         :metadata {:width (:width image)
-                                    :height height}
+                                    :height (:height image)}
-                         :image id}]
+                         :image (:id image)}]
               (st/emit! (udwd/select-for-drawing shape))
-              (udl/close!)))]
+              (modal/hide!)))]
-    [:div.library-item {:key (str id)
+    [:div.library-item {:on-click on-click}
-                        :on-click on-click}
      [:div.library-item-th
-      {:style {:background-image (str "url('" thumbnail "')")}}]
+      {:style {:background-image (str "url('" (:thumbnail image) "')")}}]
-     [:span {} name]]))
+     [:span (:name image)]]))
 
-(mx/defc image-collection
+(mf/defc image-collection
-  {:mixins [mx/static]}
+  [{:keys [images] :as props}]
-  [images]
+  [:div.library-content
-  [:div.library-content {}
    (for [image images]
-     (-> (image-item image)
+     [:& image-item {:image image :key (:id image)}])])
-         (mx/with-key (str (:id image)))))])
 
-(defn init
+(mf/defc import-image-from-coll-modal
-  [own]
+  [props]
-  (let [local (::mx/local own)]
+  (let [local (mf/use-state {:id nil :type :own})
-    (st/emit! (udi/fetch-collections))
-    (st/emit! (udi/fetch-images nil))
-    (add-watch local ::key (fn [_ _ _ v]
-                             (st/emit! (udi/fetch-images (:id v)))))
-    own))
-
-(defn will-unmount
-  [own]
-  (let [local (::mx/local own)]
-    (remove-watch local ::key)
-    own))
-
-(mx/defcs image-collections-lightbox
-  {:mixins [mx/reactive (mx/local)]
-   :init init
-   :will-unmount will-unmount}
-  [own]
-  (let [local (::mx/local own)
         id (:id @local)
-        type (:type @local :own)
+        type (:type @local)
         own? (= type :own)
         builtin? (= type :builtin)
-        colls (mx/react collections-ref)
+        colls (mf/deref collections-iref)
         colls (->> (vals colls)
                    (filter #(= type (:type %)))
                    (sort-by :name))
-        id (if (and (nil? id) builtin?)
+        images (mf/deref images-iref)
-             (:id (first colls) ::no-value)
-             id)
-        images (mx/react images-ref)
         images (->> (vals images)
-                    (filter #(= id (:collection %))))]
+                    (filter #(= id (:collection %))))
-    (letfn [(on-close [event]
+        on-close #(do (dom/prevent-default %)
-              (dom/prevent-default event)
+                      (modal/hide!))
-              (udl/close!))
+        select-type #(swap! local assoc :type %)
-            (select-type [event type]
+        on-change #(-> (dom/event->value %)
-              (swap! local assoc :type type))
+                       (read-string)
-            (on-coll-change [event]
+                       (swap! local assoc :id))]
-              (let [value (dom/event->value event)
-                    value (read-string value)]
-                (swap! local assoc :id value)))]
-      [:div.lightbox-body.big-lightbox {}
-       [:h3 {} "Import image from library"]
-       [:div.import-img-library {}
-        [:div.library-actions {}
-         [:ul.toggle-library {}
-          [:li.your-images {:class (when own? "current")
-                            :on-click #(select-type % :own)}
-           "YOUR IMAGES"]
-          [:li.standard {:class (when builtin? "current")
-                         :on-click #(select-type % :builtin)}
-           "IMAGES STORE"]]
-         [:select.input-select {:on-change on-coll-change}
-          (when own?
-            [:option {:value (pr-str nil)} "Storage"])
-          (for [coll colls]
-            (let [id (:id coll)
-                  name (:name coll)]
-              [:option {:key (str id) :value (pr-str id)} name]))]]
-        (image-collection images)]
-       [:a.close {:href "#" :on-click on-close} i/close]])))
 
-(defmethod lbx/render-lightbox :import-image
+    (mf/use-effect
-  [_]
+     {:init #(do (st/emit! (udi/fetch-collections))
-  (import-image-lightbox))
+                 (st/emit! (udi/fetch-images nil)))})
 
+    (mf/use-effect
+     {:deps #js [type id]
+      :init #(st/emit! (udi/fetch-images id))})
 
-(defmethod lbx/render-lightbox :import-image-from-collections
+    [:div.lightbox-body.big-lightbox
-  [_]
+     [:h3 "Import image from library"]
-  (image-collections-lightbox))
+     [:div.import-img-library
+      [:div.library-actions
+       [:ul.toggle-library
+        [:li.your-images {:class (when own? "current")
+                          :on-click #(select-type :own)}
+         "YOUR IMAGES"]
+        [:li.standard {:class (when builtin? "current")
+                       :on-click #(select-type :builtin)}
+         "IMAGES STORE"]]
+       [:select.input-select {:on-change on-change}
+        (when own?
+          [:option {:value (pr-str nil)} "Storage"])
+        (for [coll colls]
+          (let [id (:id coll)
+                name (:name coll)]
+            [:option {:key (str id) :value (pr-str id)} name]))]]
+
+      [:& image-collection {:images images}]]
+     [:a.close {:href "#" :on-click on-close} i/close]]))