3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-03 12:58:24 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Add tag property to thumbnails

Browse source
This commit is contained in:
Aitor 2023-10-19 12:40:22 +02:00 • committed by Alonso Torres
parent e568ad0370
commit c28c55bf0b
10 changed files with 97 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/data/workspace.cljs
View file

@ -228,7 +228,7 @@
(rx/map (fn [data] (assoc file :data data))))))
(rx/merge-map
(fn [{:keys [id] :as file}]
(->> (rp/cmd! :get-file-object-thumbnails {:file-id id})
(->> (rp/cmd! :get-file-object-thumbnails {:file-id id :tag "component"})
(rx/map #(assoc file :thumbnails %)))))
(rx/reduce conj [])
(rx/map libraries-fetched)))

8
frontend/src/app/main/data/workspace/libraries.cljs
View file

@ -450,7 +450,7 @@
page-id (:main-instance-page component)
root-id (:main-instance-id component)]
(rx/of
(dwt/clear-thumbnail (:current-file-id state) page-id root-id)
(dwt/clear-thumbnail (:current-file-id state) page-id root-id "component")
(dwsh/delete-shapes page-id #{root-id}))) ;; Deleting main root triggers component delete
(let [changes (-> (pcb/empty-changes it)
(pcb/with-library-data data)
@ -615,7 +615,7 @@
ptk/WatchEvent
(watch [_ _ _]
(->> (rp/cmd! :get-file-object-thumbnails {:file-id library-id})
(->> (rp/cmd! :get-file-object-thumbnails {:file-id library-id :tag "component"})
(rx/map (fn [thumbnails]
(fn [state]
(assoc-in state [:workspace-libraries library-id :thumbnails] thumbnails))))))))
@ -775,7 +775,7 @@
component (ctkl/get-component data component-id)
page-id (:main-instance-page component)
root-id (:main-instance-id component)]
(rx/of (dwt/request-thumbnail file-id page-id root-id))))))
(rx/of (dwt/request-thumbnail file-id page-id root-id "component"))))))
(defn- find-shape-index
[objects id shape-id]
@ -1136,7 +1136,7 @@
(rx/map (fn [file]
(fn [state]
(assoc-in state [:workspace-libraries library-id] file)))))
(->> (rp/cmd! :get-file-object-thumbnails {:file-id library-id})
(->> (rp/cmd! :get-file-object-thumbnails {:file-id library-id :tag "component"})
(rx/map (fn [thumbnails]
(fn [state]
(assoc-in state [:workspace-libraries library-id :thumbnails] thumbnails))))))))))

50
frontend/src/app/main/data/workspace/thumbnails.cljs
View file

@ -9,6 +9,7 @@
[app.common.data.macros :as dm]
[app.common.logging :as l]
[app.common.pages.helpers :as cph]
[app.common.thumbnails :as thc]
[app.common.uuid :as uuid]
[app.main.data.workspace.changes :as dch]
[app.main.data.workspace.notifications :as-alias wnt]
@ -24,7 +25,6 @@
[app.util.timers :as tm]
[app.util.webapi :as wapi]
[beicon.core :as rx]
[cuerdas.core :as str]
[potok.core :as ptk]))
(l/set-level! :info)
@ -36,8 +36,9 @@
[item]
(let [file-id (unchecked-get item "file-id")
page-id (unchecked-get item "page-id")
shape-id (unchecked-get item "shape-id")]
(st/emit! (update-thumbnail file-id page-id shape-id))))
shape-id (unchecked-get item "shape-id")
tag (unchecked-get item "tag")]
(st/emit! (update-thumbnail file-id page-id shape-id tag))))
;; Defines the thumbnail queue
(defonce queue
@ -45,41 +46,37 @@
(defn create-request
"Creates a request to generate a thumbnail for the given ids."
[file-id page-id shape-id]
#js {:file-id file-id :page-id page-id :shape-id shape-id})
[file-id page-id shape-id tag]
#js {:file-id file-id :page-id page-id :shape-id shape-id :tag tag})
(defn find-request
"Returns true if the given item matches the given ids."
[file-id page-id shape-id item]
[file-id page-id shape-id tag item]
(and (= file-id (unchecked-get item "file-id"))
(= page-id (unchecked-get item "page-id"))
(= shape-id (unchecked-get item "shape-id"))))
(= shape-id (unchecked-get item "shape-id"))
(= tag (unchecked-get item "tag"))))
(defn request-thumbnail
"Enqueues a request to generate a thumbnail for the given ids."
[file-id page-id shape-id]
[file-id page-id shape-id tag]
(ptk/reify ::request-thumbnail
ptk/EffectEvent
(effect [_ _ _]
(l/dbg :hint "request thumbnail" :file-id file-id :page-id page-id :shape-id shape-id)
(l/dbg :hint "request thumbnail" :file-id file-id :page-id page-id :shape-id shape-id :tag tag)
(q/enqueue-unique
queue
(create-request file-id page-id shape-id)
(partial find-request file-id page-id shape-id)))))
(defn fmt-object-id
"Returns ids formatted as a string (object-id)"
[file-id page-id frame-id]
(str/ffmt "%/%/%" file-id page-id frame-id))
(create-request file-id page-id shape-id tag)
(partial find-request file-id page-id shape-id tag)))))
;; This function first renders the HTML calling `render/render-frame` that
;; returns HTML as a string, then we send that data to the iframe rasterizer
;; that returns the image as a Blob. Finally we create a URI for that blob.
(defn get-thumbnail
"Returns the thumbnail for the given ids"
[state file-id page-id frame-id & {:keys [object-id]}]
[state file-id page-id frame-id tag & {:keys [object-id]}]
(let [object-id (or object-id (fmt-object-id file-id page-id frame-id))
(let [object-id (or object-id (thc/fmt-object-id file-id page-id frame-id tag))
tp (tp/tpoint-ms)
objects (wsh/lookup-page-objects state page-id)
shape (get objects frame-id)]
@ -93,8 +90,8 @@
:elapsed (dm/str (tp) "ms"))))))
(defn clear-thumbnail
([file-id page-id frame-id]
(clear-thumbnail file-id (fmt-object-id file-id page-id frame-id)))
([file-id page-id frame-id tag]
(clear-thumbnail file-id (thc/fmt-object-id file-id page-id frame-id tag)))
([file-id object-id]
(let [emit-rpc? (volatile! false)]
(ptk/reify ::clear-thumbnail
@ -152,15 +149,15 @@
(defn update-thumbnail
"Updates the thumbnail information for the given `id`"
[file-id page-id frame-id]
(let [object-id (fmt-object-id file-id page-id frame-id)]
[file-id page-id frame-id tag]
(let [object-id (thc/fmt-object-id file-id page-id frame-id tag)]
(ptk/reify ::update-thumbnail
cljs.core/IDeref
(-deref [_] object-id)
ptk/WatchEvent
(watch [_ state stream]
(l/dbg :hint "update thumbnail" :object-id object-id)
(l/dbg :hint "update thumbnail" :object-id object-id :tag tag)
;; Send the update to the back-end
(->> (get-thumbnail state file-id page-id frame-id {:object-id object-id})
(rx/mapcat (fn [uri]
@ -172,7 +169,8 @@
;; Send the data to backend
(let [params {:file-id file-id
:object-id object-id
:media blob}]
:media blob
:tag (or tag "frame")}]
(rp/cmd! :create-file-object-thumbnail params))))
(rx/catch rx/empty)
(rx/ignore)))))
@ -290,7 +288,7 @@
;; related to current frame-id
(->> changes-s
(rx/map (fn [frame-id]
(clear-thumbnail file-id page-id frame-id))))
(clear-thumbnail file-id page-id frame-id "frame"))))
;; Generate thumbnails in batchs, once user becomes
;; inactive for some instant
@ -298,6 +296,6 @@
(rx/buffer-until notifier-s)
(rx/mapcat #(into #{} %))
(rx/map (fn [frame-id]
(request-thumbnail file-id page-id frame-id)))))
(request-thumbnail file-id page-id frame-id "frame")))))
(rx/take-until stopper-s))))))

5
frontend/src/app/main/ui/workspace/shapes/frame.cljs
View file

@ -11,6 +11,7 @@
[app.common.geom.rect :as grc]
[app.common.geom.shapes :as gsh]
[app.common.pages.helpers :as cph]
[app.common.thumbnails :as thc]
[app.main.data.workspace.state-helpers :as wsh]
[app.main.data.workspace.thumbnails :as dwt]
[app.main.refs :as refs]
@ -110,7 +111,7 @@
height (dm/get-prop bounds :height)
thumbnail-uri* (mf/with-memo [file-id page-id frame-id]
(let [object-id (dwt/fmt-object-id file-id page-id frame-id)]
(let [object-id (thc/fmt-object-id file-id page-id frame-id "frame")]
(refs/workspace-thumbnail-by-id object-id)))
thumbnail-uri (mf/deref thumbnail-uri*)
@ -125,7 +126,7 @@
(mf/with-effect []
(when-not (some? thumbnail-uri)
(tm/schedule-on-idle
#(st/emit! (dwt/request-thumbnail file-id page-id frame-id)))))
#(st/emit! (dwt/request-thumbnail file-id page-id frame-id "frame")))))
(fdm/use-dynamic-modifiers objects (mf/ref-val content-ref) modifiers)

4
frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
View file

@ -11,12 +11,12 @@
[app.common.data.macros :as dm]
[app.common.pages.helpers :as cph]
[app.common.spec :as us]
[app.common.thumbnails :as thc]
[app.common.types.component :as ctk]
[app.common.types.file :as ctf]
[app.main.data.modal :as modal]
[app.main.data.workspace :as dw]
[app.main.data.workspace.libraries :as dwl]
[app.main.data.workspace.thumbnails :as dwt]
[app.main.data.workspace.undo :as dwu]
[app.main.refs :as refs]
[app.main.render :refer [component-svg]]
@ -272,7 +272,7 @@
[file-id component]
(let [page-id (:main-instance-page component)
root-id (:main-instance-id component)
object-id (dwt/fmt-object-id file-id page-id root-id)]
object-id (thc/fmt-object-id file-id page-id root-id "component")]
(if (= file-id (:id @refs/workspace-file))
(mf/deref (refs/workspace-thumbnail-by-id object-id))
(let [thumbnails (dm/get-in @refs/workspace-libraries [file-id :thumbnails (dm/str object-id)])]