✨ Add images to libraries, and to files

backend/src/uxbox/services/mutations/files.clj

@@ -172,7 +172,11 @@
         opts  (assoc imgs/thumbnail-options
                     :input {:mtype (:mtype info)
                             :path path})
-        thumb (imgs/persist-image-thumbnail-on-fs opts)]
+        thumb (if-not (= (:mtype info) "image/svg+xml")
+                (imgs/persist-image-thumbnail-on-fs opts)
+                (assoc info
+                       :path path
+                       :quality 0))]
 
     (-> (db/insert! conn :file-image
                     {:file-id file-id

backend/src/uxbox/services/mutations/images.clj

@@ -62,7 +62,7 @@
 
 ;; --- Rename Library
 
-(declare select-library-for-update)
+(declare select-file-for-update)
 
 (s/def ::rename-image-library
   (s/keys :req-un [::id ::profile-id ::name]))
@@ -70,15 +70,26 @@
 (sm/defmutation ::rename-image-library
   [{:keys [profile-id id name] :as params}]
   (db/with-atomic [conn db/pool]
-    (let [lib (select-library-for-update conn id)]
+    (let [lib (select-file-for-update conn id)]
       (teams/check-edition-permissions! conn profile-id (:team-id lib))
       (db/update! conn :image-library
                   {:name name}
                   {:id id}))))
 
-(defn- select-library-for-update
+(def ^:private sql:select-file-for-update
+  "select file.*,
+          project.team_id as team_id
+     from file
+    inner join project on (project.id = file.project_id)
+    where file.id = ?
+      for update of file")
+
+(defn- select-file-for-update
   [conn id]
-  (db/get-by-id conn :image-library id {:for-update true}))
+  (let [row (db/exec-one! conn [sql:select-file-for-update id])]
+    (when-not row
+      (ex/raise :type :not-found))
+    row))
 
 
 ;; --- Delete Library
@@ -91,7 +102,7 @@
 (sm/defmutation ::delete-image-library
   [{:keys [id profile-id] :as params}]
   (db/with-atomic [conn db/pool]
-    (let [lib (select-library-for-update conn id)]
+    (let [lib (select-file-for-update conn id)]
       (teams/check-edition-permissions! conn profile-id (:team-id lib))
 
       ;; Schedule object deletion
@@ -138,8 +149,8 @@
 (sm/defmutation ::add-image-from-url
   [{:keys [profile-id file-id url] :as params}]
   (db/with-atomic [conn db/pool]
-    (let [lib (select-library-for-update conn file-id)]
-      (teams/check-edition-permissions! conn profile-id (:team-id lib))
+    (let [file (select-file-for-update conn file-id)]
+      (teams/check-edition-permissions! conn profile-id (:team-id file))
       (let [content (images/download-image url)
             params' (merge params {:content content
                                    :name (:filename content)})]
@@ -148,8 +159,8 @@
 (sm/defmutation ::upload-image
   [{:keys [profile-id file-id] :as params}]
   (db/with-atomic [conn db/pool]
-    (let [lib (select-library-for-update conn file-id)]
-      (teams/check-edition-permissions! conn profile-id (:team-id lib))
+    (let [file (select-file-for-update conn file-id)]
+      (teams/check-edition-permissions! conn profile-id (:team-id file))
       (create-image conn params))))
 
 (defn create-image
@@ -240,8 +251,6 @@
       (ex/raise :type :not-found))
     row))
 
-
-
 ;; --- Delete Image
 
 (s/def ::delete-image

frontend/resources/styles/main/partials/sidebar-assets.scss

@@ -110,6 +110,7 @@
         max-width: 100%;
         height: auto;
         width: auto;
+        pointer-events: none;
       }
     }
 

frontend/src/uxbox/main/data/images.cljs

@@ -353,7 +353,7 @@
 
 ;; --- Create Image
 (declare create-images-result)
-(def allowed-file-types #{"image/jpeg" "image/png" "image/webp"})
+(def allowed-file-types #{"image/jpeg" "image/png" "image/webp" "image/svg+xml"})
 (def max-file-size (* 5 1024 1024))
 
 ;; TODO: unify with upload-image at main/data/workspace/persistence.cljs
@@ -361,9 +361,9 @@
 ;; https://tree.taiga.io/project/uxboxproject/us/440
 
 (defn create-images
-  ([library-id files] (create-images library-id files identity))
-  ([library-id files on-uploaded]
-   (us/verify (s/nilable ::us/uuid) library-id)
+  ([file-id files] (create-images file-id files identity))
+  ([file-id files on-uploaded]
+   (us/verify (s/nilable ::us/uuid) file-id)
    (us/verify fn? on-uploaded)
    (ptk/reify ::create-images
      ptk/WatchEvent
@@ -397,7 +397,7 @@
              prepare
              (fn [file]
                {:name (.-name file)
-                :library-id library-id
+                :file-id file-id
                 :content file})]
 
          (st/emit! (dm/show {:content (tr "image.loading")
@@ -411,17 +411,17 @@
               (rx/reduce conj [])
               (rx/do on-success)
               (rx/mapcat identity)
-              (rx/map (partial create-images-result library-id))
+              (rx/map (partial create-images-result file-id))
               (rx/catch on-error)))))))
 
 ;; --- Image Created
 
 (defn create-images-result
-  [library-id item]
-  #_(us/verify ::image item)
+  [file-id image]
+  #_(us/verify ::image image)
   (ptk/reify ::create-images-result
     ptk/UpdateEvent
     (update [_ state]
       (-> state
-          (update-in [:library-items :images library-id] #(into [item] %))))))
+          (assoc-in [:workspace-images (:id image)] image)))))
 

frontend/src/uxbox/main/data/workspace/persistence.cljs

@@ -448,7 +448,8 @@
   (ptk/reify ::image-created
     ptk/UpdateEvent
     (update [_ state]
-      (update state :workspace-images assoc (:id item) item))))
+      state)))
+      ;; (update state :workspace-images assoc (:id item) item))))
 
 
 ;; --- Delete image

frontend/src/uxbox/main/ui/workspace/sidebar/assets.cljs

@@ -18,6 +18,7 @@
    [uxbox.common.geom.point :as gpt]
    [uxbox.main.ui.icons :as i]
    [uxbox.main.data.workspace :as dw]
+   [uxbox.main.data.images :as di]
    [uxbox.main.refs :as refs]
    [uxbox.main.store :as st]
    [uxbox.main.ui.keyboard :as kbd]
@@ -28,8 +29,9 @@
    [uxbox.common.uuid :as uuid]
    [uxbox.util.i18n :as i18n :refer [tr]]
    [uxbox.util.data :refer [classnames]]
-   [uxbox.main.ui.components.tab-container :refer [tab-container tab-element]]
    [uxbox.main.data.library :as dlib]
+   [uxbox.main.ui.components.tab-container :refer [tab-container tab-element]]
+   [uxbox.main.ui.components.file-uploader :refer [file-uploader]]
    [uxbox.main.ui.components.context-menu :refer [context-menu]]))
 
 (defn matches-search
@@ -47,32 +49,54 @@
                              :left nil
                              :image-id nil})
 
-        add-graphic #(println "añadir gráfico")
+        file-input (mf/use-ref nil)
+
+        add-graphic
+        #(dom/click (mf/ref-val file-input))
 
         delete-graphic
         #(st/emit! (dw/delete-file-image library-id (:image-id @state)))
 
-        on-context-menu (fn [image-id]
-                          (fn [event]
-                            (let [pos (dom/get-client-position event)
-                                  top (:y pos)
-                                  left (- (:x pos) 20)]
-                              (dom/prevent-default event)
-                              (swap! state assoc :menu-open true
-                                                 :top top
-                                                 :left left
-                                                 :image-id image-id))))]
+        on-files-selected
+        (fn [files]
+          (st/emit! (di/create-images library-id files)))
+
+        on-context-menu
+        (fn [image-id]
+          (fn [event]
+            (let [pos (dom/get-client-position event)
+                  top (:y pos)
+                  left (- (:x pos) 20)]
+              (dom/prevent-default event)
+              (swap! state assoc :menu-open true
+                     :top top
+                     :left left
+                     :image-id image-id))))
+
+        on-drag-start
+        (fn [uri]
+          (fn [event]
+            (dnd/set-data! event "text/uri-list" uri)
+            (dnd/set-allowed-effect! event "move")))]
 
     [:div.asset-group
      [:div.group-title
       (tr "workspace.assets.graphics")
       [:span (str "\u00A0(") (count images) ")"] ;; Unicode 00A0 is non-breaking space
-      [:div.group-button {:on-click add-graphic} i/plus]]
+      [:div.group-button {:on-click add-graphic}
+       i/plus
+       [:& file-uploader {:accept "image/jpeg,image/png,image/webp,image/svg+xml"
+                          :multi true
+                          :input-ref file-input
+                          :on-selected on-files-selected}]]]
      [:div.group-grid
        (for [image (sort-by :name images)]
          [:div.grid-cell {:key (:id image)
-                          :on-context-menu (on-context-menu (:id image))}
-          [:img {:src (:thumb-uri image)}]
+                          :draggable true
+                          :on-context-menu (on-context-menu (:id image))
+                          :on-drag-start (on-drag-start (:uri image))}
+          [:img {:src (:thumb-uri image)
+                 :draggable false}] ;; Also need to add css pointer-events: none
           [:div.cell-name (:name image)]])
        [:& context-menu
         {:selectable false

frontend/src/uxbox/main/ui/workspace/sidebar/libraries.cljs

@@ -113,7 +113,7 @@
              (if (= section :icons)
                [:svg {:view-box (->> item :metadata :view-box (str/join " "))
                       :width (-> item :metadata :width)
-                      :height (-> item :metadat :height)
+                      :height (-> item :metadata :height)
                       :dangerouslySetInnerHTML {:__html (:content item)}}]
                [:img {:draggable false
                       :src (:thumb-uri item)}])

frontend/src/uxbox/util/dom/dnd.cljs

@@ -58,7 +58,10 @@
    (set-data! e "uxbox/data" data))
   ([e data-type data]
    (let [dt (.-dataTransfer e)]
-     (.setData dt data-type (t/encode data))
+     (if (or (str/starts-with? data-type "application")
+             (str/starts-with? data-type "uxbox"))
+       (.setData dt data-type (t/encode data))
+       (.setData dt data-type data))
      e)))
 
 (defn set-drag-image!