Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-03 21:09:00 -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) (let [{:keys [x y width height]} (:selrect shape)
fill-image-id (str "fill-image-" render-id) fill-image-id (str "fill-image-" render-id)
media (:fill-image shape) media (:fill-image shape)
uri (image/use-image-uri media) {:keys [uri loading]} (image/use-image-uri media)
transform (gsh/transform-matrix shape)] transform (gsh/transform-matrix shape)]
[:pattern {:id fill-image-id [:pattern {:id fill-image-id
@ -32,7 +32,8 @@
:y y :y y
:height height :height height
:width width :width width
:patternTransform transform} :patternTransform transform
:data-loading (str loading)}
[:image {:xlinkHref uri [:image {:xlinkHref uri
:width width :width width
:height height}]])))) :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/mapcat wapi/read-file-as-data-url)
(rx/subs #(reset! data-uri %)))))) (rx/subs #(reset! data-uri %))))))
(or @data-uri uri))) {:uri (or @data-uri uri)
:loading (not (some? @data-uri))}))
(mf/defc image-shape (mf/defc image-shape
{::mf/wrap-props false} {::mf/wrap-props false}
@ -43,7 +44,7 @@
(let [shape (unchecked-get props "shape") (let [shape (unchecked-get props "shape")
{:keys [id x y width height rotation metadata]} 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) (let [transform (geom/transform-matrix shape)
props (-> (attrs/extract-style-attrs shape) props (-> (attrs/extract-style-attrs shape)
@ -53,7 +54,10 @@
:transform transform :transform transform
:width width :width width
:height height :height height
:preserveAspectRatio "none"})) :preserveAspectRatio "none"})
(cond-> loading
(obj/set! "data-loading" "true")))
on-drag-start (fn [event] on-drag-start (fn [event]
;; Prevent browser dragging of the image ;; Prevent browser dragging of the image
(dom/prevent-default event))] (dom/prevent-default event))]

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

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

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

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