Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 23:49:45 -05:00
Code Issues Activity

🐛 Fix problem with Safari and render frames

Browse source
This commit is contained in:
alonso.torres 2021-05-24 12:30:28 +02:00 • committed by Andrés Moya
parent 28c5fd4583
commit 651230d40f
4 changed files with 28 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -23,7 +23,7 @@
(let [{:keys [x y width height]} (:selrect shape)
fill-image-id (str "fill-image-" render-id)
media (:fill-image shape)
uri (image/use-image-uri media)
{:keys [uri loading]} (image/use-image-uri media)
transform (gsh/transform-matrix shape)]
[:pattern {:id fill-image-id
@ -32,7 +32,8 @@
:y y
:height height
:width width
:patternTransform transform}
:patternTransform transform
:data-loading (str loading)}
[:image {:xlinkHref uri
:width width
:height height}]]))))

10
frontend/src/app/main/ui/shapes/image.cljs
View file

@ -35,7 +35,8 @@
(rx/mapcat wapi/read-file-as-data-url)
(rx/subs #(reset! data-uri %))))))
(or @data-uri uri)))
{:uri (or @data-uri uri)
:loading (not (some? @data-uri))}))
(mf/defc image-shape
{::mf/wrap-props false}
@ -43,7 +44,7 @@
(let [shape (unchecked-get props "shape")
{:keys [id x y width height rotation metadata]} shape
uri (use-image-uri metadata)]
{:keys [uri loading]} (use-image-uri metadata)]
(let [transform (geom/transform-matrix shape)
props (-> (attrs/extract-style-attrs shape)
@ -53,7 +54,10 @@
:transform transform
:width width
:height height
:preserveAspectRatio "none"}))
:preserveAspectRatio "none"})
(cond-> loading
(obj/set! "data-loading" "true")))
on-drag-start (fn [event]
;; Prevent browser dragging of the image
(dom/prevent-default event))]

26
frontend/src/app/main/ui/workspace/viewport/thumbnail_renderer.cljs
View file

@ -29,16 +29,19 @@
(when node
(let [img-node (mf/ref-val thumbnail-img)]
(timers/schedule-on-idle
#(if-let [frame-node (dom/get-element (str "shape-" (:id shape)))]
(let [xml (-> (js/XMLSerializer.)
(.serializeToString frame-node)
js/encodeURIComponent
js/unescape
js/btoa)
img-src (str "data:image/svg+xml;base64," xml)]
(obj/set! img-node "src" img-src))
#(let [frame-node (dom/get-element (str "shape-" (:id shape)))
loading-node (when frame-node
(dom/query frame-node "[data-loading=\"true\"]"))]
(if (and (some? frame-node) (not (some? loading-node)))
(let [xml (-> (js/XMLSerializer.)
(.serializeToString frame-node)
js/encodeURIComponent
js/unescape
js/btoa)
img-src (str "data:image/svg+xml;base64," xml)]
(obj/set! img-node "src" img-src))
(on-frame-not-found (:id shape))))))))
(on-frame-not-found (:id shape)))))))))
on-image-load
(mf/use-callback
@ -108,8 +111,9 @@
(fn [frame-id]
;; If we couldn't find the frame maybe is still rendering. We push the event again
;; after a time
(timers/schedule-on-idle #(dwp/update-frame-thumbnail frame-id))
(rx/push! next :next)))]
(reset! shape-id nil)
(rx/push! next :next)
(timers/schedule-on-idle (st/emitf (dwp/update-frame-thumbnail frame-id)))))]
(mf/use-effect
(mf/deps render-frame)

5
frontend/src/app/util/timers.cljs
View file

@ -34,12 +34,13 @@
(-dispose [_]
(js/clearInterval sem)))))
(if (and (exists? js/window) (.-requestIdleCallback js/window))
(if (and (exists? js/window)
(.-requestIdleCallback js/window))
(do
(def ^:private request-idle-callback #(js/requestIdleCallback %))
(def ^:private cancel-idle-callback #(js/cancelIdleCallback %)))
(do
(def ^:private request-idle-callback #(js/setTimeout % 100))
(def ^:private request-idle-callback #(js/setTimeout % 250))
(def ^:private cancel-idle-callback #(js/clearTimeout %))))
(defn schedule-on-idle