mirror of
https://github.com/penpot/penpot.git
synced 2025-07-05 09:37:20 +02:00
✨ Exporting big files flow
This commit is contained in:
Alejandro Alonso
Andrey Antukh
parent
0d4de50f13
commit
3ae7c42afa
9 changed files with 118 additions and 87 deletions
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
(ns app.main.data.exports
|
||||
(:require
|
||||
[app.common.data.macros :as dm]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.workspace.persistence :as dwp]
|
||||
[app.main.data.workspace.state-helpers :as wsh]
|
||||
|
|
@ -92,8 +93,31 @@
|
|||
(rx/of (modal/show :export-shapes {:exports (vec exports)
|
||||
:filename filename}))))))
|
||||
|
||||
(defn show-workspace-export-frames-dialog
|
||||
([frames]
|
||||
(ptk/reify ::show-workspace-export-frames-dialog
|
||||
ptk/WatchEvent
|
||||
(watch [_ state _]
|
||||
(let [file-id (:current-file-id state)
|
||||
page-id (:current-page-id state)
|
||||
filename (-> (wsh/lookup-page state page-id)
|
||||
:name
|
||||
(dm/str ".pdf"))
|
||||
|
||||
exports (for [frame frames]
|
||||
{:enabled true
|
||||
:page-id page-id
|
||||
:file-id file-id
|
||||
:frame-id (:id frame)
|
||||
:shape frame
|
||||
:name (:name frame)})]
|
||||
|
||||
(rx/of (modal/show :export-frames
|
||||
{:exports (vec exports)
|
||||
:filename filename})))))))
|
||||
|
||||
(defn- initialize-export-status
|
||||
[exports filename resource-id]
|
||||
[exports filename resource-id query]
|
||||
(ptk/reify ::initialize-export-status
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
|
|
@ -106,7 +130,8 @@
|
|||
:detail-visible true
|
||||
:exports exports
|
||||
:filename filename
|
||||
:last-update (dt/now)}))))
|
||||
:last-update (dt/now)
|
||||
:query query}))))
|
||||
|
||||
(defn- update-export-status
|
||||
[{:keys [progress status resource-id name] :as data}]
|
||||
|
|
@ -154,7 +179,7 @@
|
|||
(dissoc state :export))))))))))
|
||||
|
||||
(defn request-multiple-export
|
||||
[{:keys [filename exports] :as params}]
|
||||
[{:keys [filename exports query] :as params}]
|
||||
(ptk/reify ::request-multiple-export
|
||||
ptk/WatchEvent
|
||||
(watch [_ state _]
|
||||
|
|
@ -187,11 +212,11 @@
|
|||
|
||||
;; Launch the exportation process and stores the resource id
|
||||
;; locally.
|
||||
(->> (rp/query! :export-shapes-multiple params)
|
||||
(->> (rp/query! query params)
|
||||
(rx/tap (fn [{:keys [id]}]
|
||||
(vreset! resource-id id)))
|
||||
(rx/map (fn [{:keys [id]}]
|
||||
(initialize-export-status exports filename id))))
|
||||
(initialize-export-status exports filename id query))))
|
||||
|
||||
;; We proceed to update the export state with incoming
|
||||
;; progress updates. We delay the stoper for give some time
|
||||
|
|
@ -220,6 +245,6 @@
|
|||
(ptk/reify ::retry-last-export
|
||||
ptk/WatchEvent
|
||||
(watch [_ state _]
|
||||
(let [{:keys [exports filename]} (:export state)]
|
||||
(rx/of (request-multiple-export {:exports exports :filename filename}))))))
|
||||
(let [{:keys [exports filename query]} (:export state)]
|
||||
(rx/of (request-multiple-export {:exports exports :filename filename :query query}))))))
|
||||
|
||||
|
|
|
|||
|
|
@ -126,24 +126,14 @@
|
|||
[_ params]
|
||||
(send-export-command :cmd :export-shapes :params params :blob? false))
|
||||
|
||||
(defmethod query :export-frames
|
||||
[_ params]
|
||||
(send-export-command :cmd :export-frames :params (assoc params :uri (str base-uri)) :blob? false))
|
||||
|
||||
(defmethod query :download-export-resource
|
||||
[_ id]
|
||||
(send-export-command :cmd :get-resource :params {:id id} :blob? true))
|
||||
|
||||
(defmethod query :export-frames
|
||||
[_ exports]
|
||||
(let [params {:uri (str base-uri)
|
||||
:cmd :export-frames
|
||||
:wait false
|
||||
:exports exports}]
|
||||
(->> (http/send! {:method :post
|
||||
:uri (u/join base-uri "api/export")
|
||||
:body (http/transit-data params)
|
||||
:credentials "include"
|
||||
:response-type :blob})
|
||||
(rx/mapcat handle-response)
|
||||
(rx/ignore))))
|
||||
|
||||
(derive :upload-file-media-object ::multipart-upload)
|
||||
(derive :update-profile-photo ::multipart-upload)
|
||||
(derive :update-team-photo ::multipart-upload)
|
||||
|
|
|
|||
|
|
@ -21,10 +21,8 @@
|
|||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(mf/defc export-shapes-dialog
|
||||
{::mf/register modal/components
|
||||
::mf/register-as :export-shapes}
|
||||
[{:keys [exports filename]}]
|
||||
(mf/defc export-multiple-dialog
|
||||
[{:keys [exports filename title query no-selection]}]
|
||||
(let [lstate (mf/deref refs/export)
|
||||
in-progress? (:in-progress lstate)
|
||||
|
||||
|
|
@ -45,7 +43,8 @@
|
|||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
(st/emit! (modal/hide)
|
||||
(de/request-multiple-export {:filename filename :exports enabled-exports})))
|
||||
(de/request-multiple-export {:filename filename :exports enabled-exports :query query})))
|
||||
|
||||
on-toggle-enabled
|
||||
(fn [index]
|
||||
(swap! exports update-in [index :enabled] not))
|
||||
|
|
@ -53,15 +52,14 @@
|
|||
change-all
|
||||
(fn [_]
|
||||
(swap! exports (fn [exports]
|
||||
(mapv #(assoc % :enabled (not all-checked?)) exports))))
|
||||
]
|
||||
(mapv #(assoc % :enabled (not all-checked?)) exports))))]
|
||||
[:div.modal-overlay
|
||||
[:div.modal-container.export-shapes-dialog
|
||||
{:class (when (empty? all-exports) "no-shapes")}
|
||||
[:div.modal-container.export-multiple-dialog
|
||||
{:class (when (empty? all-exports) "empty")}
|
||||
|
||||
[:div.modal-header
|
||||
[:div.modal-header-title
|
||||
[:h2 (tr "dashboard.export-shapes.title")]]
|
||||
[:h2 title]]
|
||||
|
||||
[:div.modal-close-button
|
||||
{:on-click cancel-fn} i/close]]
|
||||
|
|
@ -76,7 +74,7 @@
|
|||
all-checked? [:span i/checkbox-checked]
|
||||
all-unchecked? [:span i/checkbox-unchecked]
|
||||
:else [:span i/checkbox-intermediate])]
|
||||
[:div.field.title (tr "dashboard.export-shapes.selected"
|
||||
[:div.field.title (tr "dashboard.export-multiple.selected"
|
||||
(c (count enabled-exports))
|
||||
(c (count all-exports)))]]
|
||||
|
||||
|
|
@ -90,22 +88,27 @@
|
|||
[:span.unchecked i/checkbox-unchecked])]
|
||||
|
||||
[:div.field.image
|
||||
[:svg {:view-box (dm/str x " " y " " width " " height)
|
||||
:width 24
|
||||
:height 20
|
||||
:version "1.1"
|
||||
:xmlns "http://www.w3.org/2000/svg"
|
||||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||
;; Fix Chromium bug about color of html texts
|
||||
;; https://bugs.chromium.org/p/chromium/issues/detail?id=1244560#c5
|
||||
:style {:-webkit-print-color-adjust :exact}}
|
||||
(if (some? (:thumbnail shape))
|
||||
[:img {:src (:thumbnail shape)}]
|
||||
[:svg {:view-box (dm/str x " " y " " width " " height)
|
||||
:width 24
|
||||
:height 20
|
||||
:version "1.1"
|
||||
:xmlns "http://www.w3.org/2000/svg"
|
||||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||
;; Fix Chromium bug about color of html texts
|
||||
;; https://bugs.chromium.org/p/chromium/issues/detail?id=1244560#c5
|
||||
:style {:-webkit-print-color-adjust :exact}}
|
||||
|
||||
[:& shape-wrapper {:shape shape}]]]
|
||||
[:& shape-wrapper {:shape shape}]])]
|
||||
|
||||
[:div.field.name (cond-> (:name shape) suffix (str suffix))]
|
||||
[:div.field.scale (dm/str (* width (:scale export)) "x"
|
||||
(* height (:scale export)) "px ")]
|
||||
[:div.field.extension (-> export :type d/name str/upper)]]))]
|
||||
(when (:scale export)
|
||||
[:div.field.scale (dm/str (* width (:scale export)) "x"
|
||||
(* height (:scale export)) "px ")])
|
||||
|
||||
(when (:type export)
|
||||
[:div.field.extension (-> export :type d/name str/upper)])]))]
|
||||
|
||||
[:div.modal-footer
|
||||
[:div.action-buttons
|
||||
|
|
@ -124,13 +127,30 @@
|
|||
(tr "labels.export"))
|
||||
:on-click (when-not in-progress? accept-fn)}]]]]
|
||||
|
||||
[:div.no-selection
|
||||
[:img {:src "images/export-no-shapes.png" :border "0"}]
|
||||
[:p (tr "dashboard.export-shapes.no-elements")]
|
||||
[:p (tr "dashboard.export-shapes.how-to")]
|
||||
[:p [:a {:target "_blank"
|
||||
:href "https://help.penpot.app/user-guide/exporting/ "}
|
||||
(tr "dashboard.export-shapes.how-to-link")]]])]]]]))
|
||||
[:& no-selection])]]]]))
|
||||
|
||||
(mf/defc shapes-no-selection []
|
||||
[:div.no-selection
|
||||
[:img {:src "images/export-no-shapes.png" :border "0"}]
|
||||
[:p (tr "dashboard.export-shapes.no-elements")]
|
||||
[:p (tr "dashboard.export-shapes.how-to")]
|
||||
[:p [:a {:target "_blank"
|
||||
:href "https://help.penpot.app/user-guide/exporting/ "}
|
||||
(tr "dashboard.export-shapes.how-to-link")]]])
|
||||
|
||||
(mf/defc export-shapes-dialog
|
||||
{::mf/register modal/components
|
||||
::mf/register-as :export-shapes}
|
||||
[{:keys [exports filename]}]
|
||||
(let [title (tr "dashboard.export-shapes.title")]
|
||||
(export-multiple-dialog {:exports exports :filename filename :title title :query :export-shapes-multiple :no-selection shapes-no-selection})))
|
||||
|
||||
(mf/defc export-frames
|
||||
{::mf/register modal/components
|
||||
::mf/register-as :export-frames}
|
||||
[{:keys [exports filename]}]
|
||||
(let [title (tr "dashboard.export-frames.title")]
|
||||
(export-multiple-dialog {:exports exports :filename filename :title title :query :export-frames})))
|
||||
|
||||
(mf/defc export-progress-widget
|
||||
{::mf/wrap [mf/memo]}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,9 @@
|
|||
(ns app.main.ui.workspace.header
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.config :as cf]
|
||||
[app.main.data.events :as ev]
|
||||
[app.main.data.exports :as de]
|
||||
[app.main.data.messages :as msg]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.shortcuts :as sc]
|
||||
|
|
@ -105,7 +103,7 @@
|
|||
;; --- Header Users
|
||||
|
||||
(mf/defc menu
|
||||
[{:keys [layout project file team-id page-id] :as props}]
|
||||
[{:keys [layout project file team-id] :as props}]
|
||||
(let [show-menu? (mf/use-state false)
|
||||
show-sub-menu? (mf/use-state false)
|
||||
editing? (mf/use-state false)
|
||||
|
|
@ -188,21 +186,7 @@
|
|||
(mf/use-callback
|
||||
(mf/deps file frames)
|
||||
(fn [_]
|
||||
(when (seq frames)
|
||||
(let [filename (dm/str (:name file) ".pdf")
|
||||
xform (comp (map :id)
|
||||
(map (fn [id]
|
||||
{:file-id (:id file)
|
||||
:page-id page-id
|
||||
:frame-id id})))]
|
||||
(st/emit! (msg/info (tr "workspace.options.exporting-object") {:timeout nil}))
|
||||
(->> (rp/query! :export-frames (into [] xform frames))
|
||||
(rx/subs
|
||||
(fn [body]
|
||||
(dom/trigger-download filename body))
|
||||
(fn [_error]
|
||||
(st/emit! (msg/error (tr "errors.unexpected-error"))))
|
||||
(st/emitf msg/hide)))))))
|
||||
(st/emit! (de/show-workspace-export-frames-dialog frames))))
|
||||
|
||||
on-item-hover
|
||||
(mf/use-callback
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue