Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-03 12:59:12 -05:00
Code Issues Activity

♻️ Remove redundant components rendering for workspace/frame

Browse source
This commit is contained in:
Andrey Antukh 2023-09-05 16:24:35 +02:00
parent 2e2ce6bcfe
commit 48e5e86b73
1 changed files with 56 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -20,32 +20,39 @@
[debug :refer [debug?]] [debug :refer [debug?]]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(defn frame-clip-id (defn- frame-clip-id
[shape render-id] [shape render-id]
(dm/str "frame-clip-" (:id shape) "-" render-id)) (dm/str "frame-clip-" (dm/get-prop shape :id) "-" render-id))
(defn frame-clip-url (defn- frame-clip-url
[shape render-id] [shape render-id]
(when (= :frame (:type shape)) (dm/str "url(#" (frame-clip-id shape render-id) ")"))
(dm/str "url(#" (frame-clip-id shape render-id) ")")))
(mf/defc frame-clip-def (mf/defc frame-clip-def
[{:keys [shape render-id]}] {::mf/wrap-props false}
(when (and (= :frame (:type shape)) (not (:show-content shape))) [props]
(let [{:keys [x y width height]} shape (let [shape (unchecked-get props "shape")]
transform (gsh/transform-str shape) (when (and ^boolean (cph/frame-shape? shape)
props (-> (attrs/extract-style-attrs shape) (not ^boolean (:show-content shape)))
(obj/merge!
#js {:x x (let [render-id (unchecked-get props "render-id")
:y y x (dm/get-prop shape :x)
:width width y (dm/get-prop shape :y)
:height height w (dm/get-prop shape :width)
:transform transform})) h (dm/get-prop shape :height)
path? (some? (.-d props))] t (gsh/transform-str shape)
[:clipPath.frame-clip-def {:id (frame-clip-id shape render-id) :class "frame-clip"}
(if ^boolean path? props (mf/with-memo [shape]
[:> :path props] (-> (attrs/extract-style-attrs shape)
[:> :rect props])]))) (obj/merge! #js {:x x :y y :width w :height h :transform t})))
path? (some? (.-d props))]
[:clipPath {:id (frame-clip-id shape render-id)
:class "frame-clip frame-clip-def"}
(if ^boolean path?
[:> :path props]
[:> :rect props])]))))
;; Wrapper around the frame that will handle things such as strokes and other properties ;; Wrapper around the frame that will handle things such as strokes and other properties
;; we wrap the proper frames and also the thumbnails ;; we wrap the proper frames and also the thumbnails
@ -53,29 +60,38 @@
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
(let [shape (unchecked-get props "shape") (let [shape (unchecked-get props "shape")
children (unchecked-get props "children") children (unchecked-get props "children")
{:keys [x y width height show-content]} shape render-id (mf/use-ctx muc/render-id)
transform (gsh/transform-str shape)
render-id (mf/use-ctx muc/render-id) x (dm/get-prop shape :x)
y (dm/get-prop shape :y)
w (dm/get-prop shape :width)
h (dm/get-prop shape :height)
transform (gsh/transform-str shape)
show-content? (get shape :show-content)
props (mf/with-memo [shape render-id]
(-> (attrs/extract-style-attrs shape render-id)
(obj/merge!
#js {:x x
:y y
:width w
:height h
:transform transform
:className "frame-background"})))
path? (some? (.-d props))]
props (-> (attrs/extract-style-attrs shape render-id)
(obj/merge!
#js {:x x
:y y
:transform transform
:width width
:height height
:className "frame-background"}))
path? (some? (.-d props))]
[:* [:*
[:g {:clip-path (when (not show-content) (frame-clip-url shape render-id)) [:g {:clip-path (when-not ^boolean show-content?
:fill "none"} ;; A frame sets back normal fill behavior (default transparent). It may have (frame-clip-url shape render-id))
;; been changed to default black if a shape coming from an imported SVG file ;; A frame sets back normal fill behavior (default
;; is rendered. See main.ui.shapes.attrs/add-style-attrs. ;; transparent). It may have been changed to default black
[:& frame-clip-def {:shape shape :render-id render-id}] ;; if a shape coming from an imported SVG file is
;; rendered. See main.ui.shapes.attrs/add-style-attrs.
:fill "none"}
[:& shape-fills {:shape shape} [:& shape-fills {:shape shape}
(if ^boolean path? (if ^boolean path?