mirror of
https://github.com/penpot/penpot.git
synced 2025-02-14 11:09:04 -05:00
🐛 Problem recalculating thumbnails
This commit is contained in:
parent
edce45095e
commit
01664a04fc
3 changed files with 21 additions and 9 deletions
|
@ -43,15 +43,11 @@
|
||||||
embed (embed/use-data-uris [uri])
|
embed (embed/use-data-uris [uri])
|
||||||
transform (gsh/transform-matrix shape)
|
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"
|
pattern-attrs (cond-> #js {:patternUnits "userSpaceOnUse"
|
||||||
:x x
|
:x x
|
||||||
:y y
|
:y y
|
||||||
:height height
|
:height height
|
||||||
:width width
|
:width width}
|
||||||
:data-loading loading?}
|
|
||||||
(= :path (:type shape))
|
(= :path (:type shape))
|
||||||
(obj/set! "patternTransform" transform))]
|
(obj/set! "patternTransform" transform))]
|
||||||
|
|
||||||
|
|
|
@ -126,7 +126,9 @@
|
||||||
(when (not @rendered?) (reset! rendered? true)))))
|
(when (not @rendered?) (reset! rendered? true)))))
|
||||||
|
|
||||||
[:& (mf/provider ctx/render-ctx) {:value render-id}
|
[:& (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}]
|
[:& ff/fontfaces-style {:fonts fonts}]
|
||||||
[:g.frame-thumbnail-wrapper {:id (dm/str "thumbnail-container-" (:id shape))}
|
[:g.frame-thumbnail-wrapper {:id (dm/str "thumbnail-container-" (:id shape))}
|
||||||
[:> frame/frame-thumbnail {:key (dm/str (:id shape))
|
[:> frame/frame-thumbnail {:key (dm/str (:id shape))
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
(ns app.main.ui.workspace.shapes.frame.thumbnail-render
|
(ns app.main.ui.workspace.shapes.frame.thumbnail-render
|
||||||
(:require
|
(:require
|
||||||
|
[app.common.data :as d]
|
||||||
[app.common.data.macros :as dm]
|
[app.common.data.macros :as dm]
|
||||||
[app.common.math :as mth]
|
[app.common.math :as mth]
|
||||||
[app.main.data.workspace :as dw]
|
[app.main.data.workspace :as dw]
|
||||||
|
@ -15,6 +16,7 @@
|
||||||
[app.util.object :as obj]
|
[app.util.object :as obj]
|
||||||
[app.util.timers :as ts]
|
[app.util.timers :as ts]
|
||||||
[beicon.core :as rx]
|
[beicon.core :as rx]
|
||||||
|
[cuerdas.core :as str]
|
||||||
[rumext.alpha :as mf]))
|
[rumext.alpha :as mf]))
|
||||||
|
|
||||||
;; (def thumbnail-scale-factor 2)
|
;; (def thumbnail-scale-factor 2)
|
||||||
|
@ -41,6 +43,16 @@
|
||||||
(.error js/console err)
|
(.error js/console err)
|
||||||
nil)))
|
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
|
(defn use-render-thumbnail
|
||||||
"Hook that will create the thumbnail thata"
|
"Hook that will create the thumbnail thata"
|
||||||
[page-id {:keys [id x y width height] :as shape} node-ref rendered? thumbnail-data-ref disable?]
|
[page-id {:keys [id x y width height] :as shape} node-ref rendered? thumbnail-data-ref disable?]
|
||||||
|
@ -75,11 +87,11 @@
|
||||||
(fn []
|
(fn []
|
||||||
(when (and (some? @node-ref) (not @disable-ref?))
|
(when (and (some? @node-ref) (not @disable-ref?))
|
||||||
(let [node @node-ref
|
(let [node @node-ref
|
||||||
|
|
||||||
frame-html (dom/node->xml node)
|
frame-html (dom/node->xml node)
|
||||||
{:keys [x y width height]} @shape-ref
|
{: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
|
svg-node
|
||||||
(-> (dom/make-node "http://www.w3.org/2000/svg" "svg")
|
(-> (dom/make-node "http://www.w3.org/2000/svg" "svg")
|
||||||
|
@ -100,12 +112,14 @@
|
||||||
(rx/push! updates-str :update))
|
(rx/push! updates-str :update))
|
||||||
|
|
||||||
(let [observer (js/MutationObserver. (partial rx/push! updates-str))]
|
(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)))))]
|
(reset! observer-ref observer)))))]
|
||||||
|
|
||||||
(mf/use-effect
|
(mf/use-effect
|
||||||
(fn []
|
(fn []
|
||||||
(let [subid (->> updates-str
|
(let [subid (->> updates-str
|
||||||
|
(rx/map remove-embed-images-changes)
|
||||||
|
(rx/filter d/not-empty?)
|
||||||
(rx/debounce 400)
|
(rx/debounce 400)
|
||||||
(rx/subs on-update-frame))]
|
(rx/subs on-update-frame))]
|
||||||
#(rx/dispose! subid))))
|
#(rx/dispose! subid))))
|
||||||
|
|
Loading…
Add table
Reference in a new issue