Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-30 16:41:20 -05:00
Code Issues Activity

⚡ Add micro optimizations to shapes/frame-thumbail-image component

Browse source
This commit is contained in:
Andrey Antukh 2023-09-05 16:22:32 +02:00
parent f311deda1b
commit ca8e9b871d
1 changed files with 23 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -94,34 +94,43 @@
{::mf/wrap-props false}
[props]
(let [shape (unchecked-get props "shape")
bounds (or (unchecked-get props "bounds")
(grc/points->rect (:points shape)))
bounds (unchecked-get props "bounds")
shape-id (dm/get-prop shape :id)
points (dm/get-prop shape :points)
bounds (mf/with-memo [bounds points]
(or bounds (grc/points->rect points)))
shape-id (:id shape)
thumb (:thumbnail shape)
debug? (debug? :thumbnails)
safari? (cf/check-browser? :safari)]
safari? (cf/check-browser? :safari)
;; FIXME: ensure bounds is always a rect instance and
;; dm/get-prop for static attr access
bx (:x bounds)
by (:y bounds)
bh (:height bounds)
bw (:width bounds)]
[:*
[:image.frame-thumbnail
{:id (dm/str "thumbnail-" shape-id)
:href thumb
:decoding "async"
;; FIXME: ensure bounds is always a rect instance and
;; dm/get-prop for static attr access
:x (:x bounds)
:y (:y bounds)
:width (:width bounds)
:height (:height bounds)
:x bx
:y by
:width bw
:height bh
:style {:filter (when (and (not ^boolean safari?) ^boolean debug?) "sepia(1)")}}]
;; Safari don't support filters so instead we add a rectangle around the thumbnail
(when (and ^boolean safari? ^boolean debug?)
[:rect {:x (+ (:x bounds) 4)
:y (+ (:y bounds) 4)
:width (- (:width bounds) 8)
:height (- (:height bounds) 8)
[:rect {:x (+ bx 4)
:y (+ by 4)
:width (- bw 8)
:height (- bh 8)
:stroke "red"
:stroke-width 2}])]))