Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-10 09:08:31 -05:00
Code Issues Activity

🐛 Problem recalculating thumbnails

Browse source
This commit is contained in:
alonso.torres 2022-05-17 14:08:40 +02:00
parent edce45095e
commit 01664a04fc
3 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/app/main/ui/shapes/fills.cljs
View file

@ -43,15 +43,11 @@
embed (embed/use-data-uris [uri])
transform (gsh/transform-matrix shape)
;; When true the image has not loaded yet
loading? (and (some? uri) (not (contains? embed uri)))
pattern-attrs (cond-> #js {:patternUnits "userSpaceOnUse"
:x x
:y y
:height height
:width width
:data-loading loading?}
:width width}
(= :path (:type shape))
(obj/set! "patternTransform" transform))]

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

@ -126,7 +126,9 @@
(when (not @rendered?) (reset! rendered? true)))))
[:& (mf/provider ctx/render-ctx) {:value render-id}
[:g.frame-container {:key "frame-container" :ref on-frame-load}
[:g.frame-container {:id (dm/str "frame-container-" (:id shape))
:key "frame-container"
:ref on-frame-load}
[:& ff/fontfaces-style {:fonts fonts}]
[:g.frame-thumbnail-wrapper {:id (dm/str "thumbnail-container-" (:id shape))}
[:> frame/frame-thumbnail {:key (dm/str (:id shape))

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

@ -6,6 +6,7 @@
(ns app.main.ui.workspace.shapes.frame.thumbnail-render
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.math :as mth]
[app.main.data.workspace :as dw]
@ -15,6 +16,7 @@
[app.util.object :as obj]
[app.util.timers :as ts]
[beicon.core :as rx]
[cuerdas.core :as str]
[rumext.alpha :as mf]))
;; (def thumbnail-scale-factor 2)
@ -41,6 +43,16 @@
(.error js/console err)
nil)))
(defn- remove-embed-images-changes
"Remove the changes related to change a url for its embed value. This is necessary
so we don't have to recalculate the thumbnail when the image loads."
[changes]
(->> changes
(remove (fn [change]
(and (= "attributes" (.-type change))
(= "href" (.-attributeName change))
(str/starts-with? (.-oldValue change) "http"))))))
(defn use-render-thumbnail
"Hook that will create the thumbnail thata"
[page-id {:keys [id x y width height] :as shape} node-ref rendered? thumbnail-data-ref disable?]
@ -75,11 +87,11 @@
(fn []
(when (and (some? @node-ref) (not @disable-ref?))
(let [node @node-ref
frame-html (dom/node->xml node)
{:keys [x y width height]} @shape-ref
style-str (or (-> node dom/get-parent (dom/query "style") dom/node->xml) "")
style-node (dom/query (dm/str "#frame-container-" (:id shape) " style"))
style-str (or (-> style-node dom/node->xml) "")
svg-node
(-> (dom/make-node "http://www.w3.org/2000/svg" "svg")
@ -100,12 +112,14 @@
(rx/push! updates-str :update))
(let [observer (js/MutationObserver. (partial rx/push! updates-str))]
(.observe observer node #js {:childList true :attributes true :characterData true :subtree true})
(.observe observer node #js {:childList true :attributes true :attributeOldValue true :characterData true :subtree true})
(reset! observer-ref observer)))))]
(mf/use-effect
(fn []
(let [subid (->> updates-str
(rx/map remove-embed-images-changes)
(rx/filter d/not-empty?)
(rx/debounce 400)
(rx/subs on-update-frame))]
#(rx/dispose! subid))))