From e99ec58054b19db2433b2a430ff18d3bae61a4a3 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 3 Jul 2020 10:25:19 +0200 Subject: [PATCH] :tada: Add JPEG and naming handling. --- exporter/src/app/http/bitmap_export.cljs | 82 +++++++++++++------ .../ui/workspace/sidebar/options/exports.cljs | 20 ++++- 2 files changed, 73 insertions(+), 29 deletions(-) diff --git a/exporter/src/app/http/bitmap_export.cljs b/exporter/src/app/http/bitmap_export.cljs index bb86807ec..fe2b9065c 100644 --- a/exporter/src/app/http/bitmap_export.cljs +++ b/exporter/src/app/http/bitmap_export.cljs @@ -15,7 +15,7 @@ goog.Uri)) (defn- screenshot-object - [browser {:keys [page-id object-id token scale suffix]}] + [browser {:keys [page-id object-id token scale suffix type]}] (letfn [(handle [page] (let [path (str "/render-object/" page-id "/" object-id) uri (doto (Uri. (:public-uri cfg/config)) @@ -37,8 +37,9 @@ (bwr/navigate! page uri) (bwr/eval! page (js* "() => document.body.style.background = 'transparent'")) (p/let [dom (bwr/select page "#screenshot")] - (bwr/screenshot dom {:omit-background? true - :type type}))))] + (case type + :png (bwr/screenshot dom {:omit-background? true :type type}) + :jpeg (bwr/screenshot dom {:omit-background? false :type type})))))] (bwr/exec! browser handle))) @@ -61,6 +62,8 @@ (declare handle-single-export) (declare handle-multiple-export) +(declare perform-bitmap-export) +(declare attach-filename) (defn bitmap-export-handler [{:keys [params browser cookies] :as request}] @@ -77,28 +80,13 @@ :object-id object-id)) (handle-multiple-export request - (->> (d/enumerate exports) - (map (fn [[index item]] - (assoc item - :name name - :index index - :token token - :page-id page-id - :object-id object-id)))))))) + (map (fn [item] + (assoc item + :name name + :token token + :page-id page-id + :object-id object-id)) exports))))) -(defn perform-bitmap-export - [browser params] - (p/let [content (screenshot-object browser params)] - {:content content - :filename (str (str/slug (:name params)) - (if (not (str/blank? (:suffix params ""))) - (:suffix params "") - (let [index (:index params 0)] - (when (pos? index) - (str "-" (inc index))))) - ".png") - :length (alength content) - :mime-type "image/png"})) (defn handle-single-export [{:keys [browser]} params] @@ -110,7 +98,9 @@ (defn handle-multiple-export [{:keys [browser]} exports] - (let [proms (map (partial perform-bitmap-export browser) exports)] + (let [proms (->> exports + (attach-filename) + (map (partial perform-bitmap-export browser)))] (-> (p/all proms) (p/then (fn [results] (reduce #(zip/add! %1 (:filename %2) (:content %2)) (zip/create) results))) @@ -118,3 +108,45 @@ {:status 200 :headers {"content-type" "application/zip"} :body (.generateNodeStream ^js fzip)}))))) + +(defn- find-filename-candidate + [params used] + (loop [index 0] + (let [candidate (str (str/slug (:name params)) + (if (not (str/blank? (:suffix params ""))) + (:suffix params "") + (when (pos? index) + (str "-" (inc index)))) + (case (:type params) + :png ".png" + :jpeg ".jpg" + :svg ".svg"))] + (if (contains? used candidate) + (recur (inc index)) + candidate)))) + +(defn- attach-filename + [exports] + (loop [exports (seq exports) + used #{} + result []] + (if (nil? exports) + result + (let [export (first exports) + candidate (find-filename-candidate export used) + export (assoc export :filename candidate)] + (recur (next exports) + (conj used candidate) + (conj result export)))))) + +(defn- perform-bitmap-export + [browser params] + (p/let [content (screenshot-object browser params)] + {:content content + :filename (or (:filename params) + (find-filename-candidate params #{})) + :length (alength content) + :mime-type (case (:type params) + :png "image/png" + :jpeg "image/jpeg")})) + diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/exports.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/exports.cljs index 87c913a5b..57aadb9e3 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/exports.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/exports.cljs @@ -106,8 +106,18 @@ value (dom/get-value target) exports (assoc-in exports [index :suffix] value)] (st/emit! (udw/update-shape (:id shape) - {:exports exports})))))] + {:exports exports}))))) + on-type-change + (mf/use-callback + (mf/deps shape) + (fn [index event] + (let [target (dom/get-target event) + value (dom/get-value target) + value (keyword value) + exports (assoc-in exports [index :type] value)] + (st/emit! (udw/update-shape (:id shape) + {:exports exports})))))] [:div.element-set.exports-options [:div.element-set-title @@ -129,10 +139,12 @@ [:option {:value "6"} "6x"]] [:input.input-text {:value (:suffix export) :on-change (partial on-suffix-change index)}] - [:select.input-select - [:option {:value "png"} "PNG"]] + [:select.input-select {:value (name (:type export)) + :on-change (partial on-type-change index)} + [:option {:value "png"} "PNG"] + [:option {:value "jpeg"} "JPEG"]] [:div.delete-icon {:on-click (partial delete-export index)} - i/trash]]) + i/minus]]) [:div.btn-large.btn-icon-dark.download-button {:on-click (when-not @loading? on-download)