✨ Improve file thumbnails.

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

@@ -75,14 +75,14 @@
                 and deleted_at is null;"]
     (db/query-one conn [sql id])))
 
-;; (s/def ::retrieve-image
+(s/def ::image-by-id
-;;   (s/keys :req-un [::user ::us/id]))
+  (s/keys :req-un [::user ::us/id]))
 
-;; (defmethod core/query :retrieve-image
+(sq/defquery ::image-by-id
-;;   [params]
+  [params]
-;;   (s/assert ::retrieve-image params)
+  (-> (retrieve-image db/pool (:id params))
-;;   (with-open [conn (db/connection)]
+      (p/then populate-thumbnail)
-;;     (retrieve-image conn params)))
+      (p/then populate-urls)))
 
 ;; --- Query Images by Collection (id)
 

frontend/src/uxbox/main/exports.cljs

@@ -30,7 +30,7 @@
     :height "100%"
     :fill "#b1b2b5"}])
 
-(defn- calculate-width
+(defn- calculate-dimensions
   [data]
   (let [shapes (vals (:shapes-by-id data))
         shape (geom/shapes->rect-shape shapes)]
@@ -51,14 +51,15 @@
       :circle [:& circle/circle-shape {:shape shape}])))
 
 (mf/defc page-svg
-  [{:keys [data] :as props}]
+  [{:keys [data width height] :as props}]
   (let [shapes-by-id (:shapes-by-id data)
         shapes (map #(get shapes-by-id %) (:shapes data []))
         canvas (map #(get shapes-by-id %) (:canvas data []))
-        {:keys [width height]} (calculate-width data)]
+        dim (calculate-dimensions data)]
-    [:svg {:width width
+    [:svg {
-           :height height
+           ;; :width width
-           :view-box (str "0 0 " width " " height)
+           ;; :height height
+           :view-box (str "0 0 " (:width dim) " " (:height dim))
            :version "1.1"
            :xmlnsXlink "http://www.w3.org/1999/xlink"
            :xmlns "http://www.w3.org/2000/svg"}
@@ -69,11 +70,11 @@
       (for [item shapes]
         [:& shape-wrapper {:shape item :key (:id item)}])]]))
 
-(defn render
+;; (defn render
-  [{:keys [data] :as page}]
+;;   [{:keys [data] :as page}]
-  (try
+;;   (try
-    (-> (mf/element page-svg #js {:data data})
+;;     (-> (mf/element page-svg #js {:data data})
-        (render-html))
+;;         (render-html))
-    (catch :default e
+;;     (catch :default e
-      (js/console.log e)
+;;       (js/console.log e)
-      nil)))
+;;       nil)))

frontend/src/uxbox/main/ui/dashboard/projects.cljs

@@ -69,25 +69,25 @@
 
 ;; (mf/defc grid-item-thumbnail
 ;;   [{:keys [file] :as props}]
-;;   [:div.grid-item-th
+;;   (let [url (mf/use-memo
-;;    [:img.img-th {:src "/images/project-placeholder.svg"}]])
+;;              {:fn #(let [content (exports/render file)
+;;                          blob (js/Blob. #js [content] #js {:type "image/svg+xml"})]
+;;                      (js/URL.createObjectURL blob))
+;;               :deps (mf/deps (:id file))})]
+;;     (mf/use-effect
+;;      {:fn (fn []
+;;             #(js/URL.revokeObjectURL url))
+;;       :deps (mf/deps (:id file))})
+;;     [:div.grid-item-th
+;;      [:img.img-th {:src url}]]))
 
-;; (defn use-thumbnail
-;;   [file]
 
 (mf/defc grid-item-thumbnail
   [{:keys [file] :as props}]
-  (let [url (mf/use-memo
+  [:div.grid-item-th
-             {:fn #(let [content (exports/render file)
+   [:& exports/page-svg2 {:data (:data file)
-                         blob (js/Blob. #js [content] #js {:type "image/svg+xml"})]
+                          :width "290"
-                     (js/URL.createObjectURL blob))
+                          :height "150"}]])
-              :deps (mf/deps (:id file))})]
-    (mf/use-effect
-     {:fn (fn []
-            #(js/URL.revokeObjectURL url))
-      :deps (mf/deps (:id file))})
-    [:div.grid-item-th
-     [:img.img-th {:src url}]]))
 
 ;; --- Grid Item
 

frontend/src/uxbox/main/ui/shapes/image.cljs

@@ -57,7 +57,7 @@
                          :y y
                          :id (str "shape-" id)
                          :preserveAspectRatio "none"
-                         :class (classnames :move-cursor moving?)
+                         :className (classnames :move-cursor moving?)
                          :xlinkHref (:url image)
                          :transform transform
                          :width width