3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-01 18:01:42 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix thumbnails for Safari browsers

Browse source
This commit is contained in:
alonso.torres 2023-01-24 11:56:59 +01:00
parent 88e2a5c56e
commit ead64a1820
2 changed files with 40 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,6 +8,7 @@
(:require (:require
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.config :as cf]
[app.main.ui.context :as muc] [app.main.ui.context :as muc]
[app.main.ui.shapes.attrs :as attrs] [app.main.ui.shapes.attrs :as attrs]
[app.main.ui.shapes.custom-stroke :refer [shape-fills shape-strokes]] [app.main.ui.shapes.custom-stroke :refer [shape-fills shape-strokes]]
@ -90,6 +91,7 @@
bounds (or (obj/get props "bounds") (gsh/points->selrect (:points shape)))] bounds (or (obj/get props "bounds") (gsh/points->selrect (:points shape)))]
(when (:thumbnail shape) (when (:thumbnail shape)
[:*
[:image.frame-thumbnail [:image.frame-thumbnail
{:id (dm/str "thumbnail-" (:id shape)) {:id (dm/str "thumbnail-" (:id shape))
:href (:thumbnail shape) :href (:thumbnail shape)
@ -98,7 +100,16 @@
:width (:width bounds) :width (:width bounds)
:height (:height bounds) :height (:height bounds)
;; DEBUG ;; DEBUG
:style {:filter (when (debug? :thumbnails) "sepia(1)")}}]))) :style {:filter (when (and (not (cf/check-browser? :safari))(debug? :thumbnails)) "sepia(1)")}}]
;; Safari don't support filters so instead we add a rectangle around the thumbnail
(when (and (cf/check-browser? :safari) (debug? :thumbnails))
[:rect {:x (+ (:x bounds) 4)
:y (+ (:y bounds) 4)
:width (- (:width bounds) 8)
:height (- (:height bounds) 8)
:stroke "red"
:stroke-width 2}])])))
(mf/defc frame-thumbnail (mf/defc frame-thumbnail
{::mf/wrap-props false} {::mf/wrap-props false}

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

@ -10,6 +10,7 @@
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.math :as mth] [app.common.math :as mth]
[app.config :as cf]
[app.main.data.workspace.thumbnails :as dwt] [app.main.data.workspace.thumbnails :as dwt]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
@ -251,15 +252,26 @@
:width fixed-width :width fixed-width
:height fixed-height :height fixed-height
;; DEBUG ;; DEBUG
:style {:filter (when (debug? :thumbnails) "invert(1)") :style {:filter (when (and (not (cf/check-browser? :safari)) (debug? :thumbnails)) "invert(1)")
:width "100%" :width "100%"
:height "100%"}}]] :height "100%"}}]]
;; Safari don't support filters so instead we add a rectangle around the thumbnail
(when (and (cf/check-browser? :safari) (debug? :thumbnails))
[:rect {:x (+ x 2)
:y (+ y 2)
:width (- width 4)
:height (- height 4)
:stroke "blue"
:stroke-width 2}])
(when (some? @image-url) (when (some? @image-url)
[:image {:ref frame-image-ref [:foreignObject {:x x
:x x
:y y :y y
:href @image-url :width width
:height height}
[:img {:ref frame-image-ref
:src @image-url
:width width :width width
:height height :height height
:on-load on-image-load}])])])) :on-load on-image-load}]])])]))