3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-30 19:16:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

⚡ Add performance enhacenements to layout-container menu (part 3)

Browse source 
Refactor and improve performance of gap related components
This commit is contained in:
Andrey Antukh 2024-02-21 09:33:34 +01:00
parent c1d4fc71a8
commit 2170a92dd2
1 changed files with 90 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

142
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -491,57 +491,94 @@
:on-click on-type-change'} :on-click on-type-change'}
i/padding-extended-refactor]])) i/padding-extended-refactor]]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; GAP
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn- select-gap!
[value]
(st/emit! (udw/set-gap-selected value)))
(defn- on-gap-focus
[event]
(let [type (-> (dom/get-current-target event)
(dom/get-data "type")
(keyword))]
(select-gap! type)
(dom/select-target event)))
(defn- on-gap-blur
[_event]
(select-gap! nil))
(mf/defc gap-section (mf/defc gap-section
{::mf/props :obj} {::mf/props :obj}
[{:keys [is-column wrap-type on-change gap-value]}] [{:keys [is-column wrap-type on-change value]
(let [select-gap :or {wrap-type :none}
(fn [gap] :as props}]
(st/emit! (udw/set-gap-selected gap)))] (let [nowrap? (= :nowrap wrap-type)
(mf/use-effect row-gap-disabled?
(fn [] (and ^boolean nowrap?
(fn [] (not ^boolean is-column))
;;on destroy component
(select-gap nil)))) col-gap-disabled?
(and ^boolean nowrap?
^boolean is-column)
on-change'
(mf/use-fn
(mf/deps on-change)
(fn [value event]
(let [target (dom/get-current-target event)
wrap-type (dom/get-data target "wrap-type")
type (keyword (dom/get-data target "type"))]
(on-change (= "nowrap" wrap-type) type value event))))]
(mf/with-effect []
;; on destroy component
(fn []
(on-gap-blur nil)))
[:div {:class (stl/css :gap-group)} [:div {:class (stl/css :gap-group)}
[:div {:class (stl/css-case :row-gap true
:disabled (and (= :nowrap wrap-type) (not is-column))) [:div {:class (stl/css-case
:row-gap true
:disabled row-gap-disabled?)
:title "Row gap"} :title "Row gap"}
[:span {:class (stl/css :icon)} i/gap-vertical-refactor] [:span {:class (stl/css :icon)} i/gap-vertical-refactor]
[:> numeric-input* {:class (stl/css :numeric-input true) [:> numeric-input*
:no-validate true {:class (stl/css :numeric-input true)
:placeholder "--" :no-validate true
:on-focus (fn [event] :placeholder "--"
(select-gap :row-gap) :data-type "row-gap"
(dom/select-target event)) :data-wrap-type (name wrap-type)
:on-change (partial on-change (= :nowrap wrap-type) :row-gap) :on-focus on-gap-focus
:on-blur (fn [_] :on-change on-change'
(select-gap nil)) :on-blur on-gap-blur
:nillable true :nillable true
:min 0 :min 0
:value (:row-gap gap-value) :value (:row-gap value)
:disabled (and (= :nowrap wrap-type) (not is-column))}]] :disabled row-gap-disabled?}]]
[:div {:class (stl/css-case :column-gap true [:div {:class (stl/css-case
:disabled (and (= :nowrap wrap-type) is-column)) :column-gap true
:disabled col-gap-disabled?)
:title "Column gap"} :title "Column gap"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)} i/gap-horizontal-refactor]
i/gap-horizontal-refactor] [:> numeric-input*
[:> numeric-input* {:className (stl/css :numeric-input) {:class (stl/css :numeric-input true)
:no-validate true :no-validate true
:placeholder "--" :placeholder "--"
:on-focus (fn [event] :data-type "column-gap"
(select-gap :column-gap) :data-wrap-type (name wrap-type)
(dom/select-target event)) :on-focus on-gap-focus
:on-change (partial on-change (= :nowrap wrap-type) :column-gap) :on-change on-change'
:on-blur (fn [_] :on-blur on-gap-blur
(select-gap nil) :nillable true
) :min 0
:nillable true :value (:column-gap value)
:min 0 :disabled col-gap-disabled?}]]]))
:value (:column-gap gap-value)
:disabled (and (= :nowrap wrap-type) is-column)}]]]))
;; GRID COMPONENTS ;; GRID COMPONENTS
@ -882,15 +919,14 @@
;; Gap ;; Gap
set-gap on-gap-change
(fn [gap-multiple? type val] (fn [multiple? type val]
(let [val (mth/finite val 0)] (let [val (mth/finite val 0)]
(if gap-multiple? (if ^boolean multiple?
(st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}})) (st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
(st/emit! (dwsl/update-layout ids {:layout-gap {type val}}))))) (st/emit! (dwsl/update-layout ids {:layout-gap {type val}})))))
;; Padding ;; Padding
change-padding-type change-padding-type
(fn [type] (fn [type]
(st/emit! (dwsl/update-layout ids {:layout-padding-type type}))) (st/emit! (dwsl/update-layout ids {:layout-padding-type type})))
@ -1048,8 +1084,8 @@
[:div {:class (stl/css :forth-row)} [:div {:class (stl/css :forth-row)}
[:& gap-section {:is-column is-column [:& gap-section {:is-column is-column
:wrap-type wrap-type :wrap-type wrap-type
:on-change set-gap :on-change on-gap-change
:gap-value (:layout-gap values)}] :value (:layout-gap values)}]
[:& padding-section {:padding (:layout-padding values) [:& padding-section {:padding (:layout-padding values)
:type (:layout-padding-type values) :type (:layout-padding-type values)
@ -1110,10 +1146,12 @@
(st/emit! (dwsl/update-layout ids {:layout-grid-dir dir}))))) (st/emit! (dwsl/update-layout ids {:layout-grid-dir dir})))))
on-gap-change on-gap-change
(fn [gap-multiple? type val] (mf/use-fn
(if gap-multiple? (mf/deps ids)
(st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}})) (fn [multiple? type val]
(st/emit! (dwsl/update-layout ids {:layout-gap {type val}})))) (if multiple?
(st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
(st/emit! (dwsl/update-layout ids {:layout-gap {type val}})))))
;; Padding ;; Padding
change-padding-type change-padding-type