Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-26 08:29:42 -05:00
Code Issues 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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,6 +8,7 @@
(:require
[app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh]
[app.config :as cf]
[app.main.ui.context :as muc]
[app.main.ui.shapes.attrs :as attrs]
[app.main.ui.shapes.custom-stroke :refer [shape-fills shape-strokes]]
@ -90,15 +91,25 @@
bounds (or (obj/get props "bounds") (gsh/points->selrect (:points shape)))]
(when (:thumbnail shape)
[:image.frame-thumbnail
{:id (dm/str "thumbnail-" (:id shape))
:href (:thumbnail shape)
:x (:x bounds)
:y (:y bounds)
:width (:width bounds)
:height (:height bounds)
;; DEBUG
:style {:filter (when (debug? :thumbnails) "sepia(1)")}}])))
[:*
[:image.frame-thumbnail
{:id (dm/str "thumbnail-" (:id shape))
:href (:thumbnail shape)
:x (:x bounds)
:y (:y bounds)
:width (:width bounds)
:height (:height bounds)
;; DEBUG
: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/wrap-props false}

28
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.geom.shapes :as gsh]
[app.common.math :as mth]
[app.config :as cf]
[app.main.data.workspace.thumbnails :as dwt]
[app.main.refs :as refs]
[app.main.store :as st]
@ -251,15 +252,26 @@
:width fixed-width
:height fixed-height
;; DEBUG
:style {:filter (when (debug? :thumbnails) "invert(1)")
:style {:filter (when (and (not (cf/check-browser? :safari)) (debug? :thumbnails)) "invert(1)")
:width "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)
[:image {:ref frame-image-ref
:x x
:y y
:href @image-url
:width width
:height height
:on-load on-image-load}])])]))
[:foreignObject {:x x
:y y
:width width
:height height}
[:img {:ref frame-image-ref
:src @image-url
:width width
:height height
:on-load on-image-load}]])])]))