3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-06 06:41:38 +02:00
Code Issues Projects Releases Packages Wiki 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
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} {::mf/wrap-props false}
[props] [props]
(let [shape (unchecked-get props "shape") (let [shape (unchecked-get props "shape")
bounds (or (unchecked-get props "bounds") bounds (unchecked-get props "bounds")
(grc/points->rect (:points shape)))
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) thumb (:thumbnail shape)
debug? (debug? :thumbnails) 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 [:image.frame-thumbnail
{:id (dm/str "thumbnail-" shape-id) {:id (dm/str "thumbnail-" shape-id)
:href thumb :href thumb
:decoding "async" :decoding "async"
;; FIXME: ensure bounds is always a rect instance and :x bx
;; dm/get-prop for static attr access :y by
:x (:x bounds) :width bw
:y (:y bounds) :height bh
:width (:width bounds)
:height (:height bounds)
:style {:filter (when (and (not ^boolean safari?) ^boolean debug?) "sepia(1)")}}] :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 ;; Safari don't support filters so instead we add a rectangle around the thumbnail
(when (and ^boolean safari? ^boolean debug?) (when (and ^boolean safari? ^boolean debug?)
[:rect {:x (+ (:x bounds) 4) [:rect {:x (+ bx 4)
:y (+ (:y bounds) 4) :y (+ by 4)
:width (- (:width bounds) 8) :width (- bw 8)
:height (- (:height bounds) 8) :height (- bh 8)
:stroke "red" :stroke "red"
:stroke-width 2}])])) :stroke-width 2}])]))