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

Merge pull request #4175 from penpot/niwinz-staging-perfix-3

Browse source 
⚡ Add incremental improvements to `layout-container` related components
This commit is contained in:
Aitor Moreno 2024-02-27 11:23:39 +01:00 • committed by GitHub
commit 7dd0745429
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 736 additions and 651 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/main/ui/components/radio_buttons.cljs
View file

@ -18,7 +18,7 @@
(mf/defc radio-button
{::mf/props :obj}
[{:keys [icon id value disabled title unique-key icon-class type]}]
[{:keys [icon id value disabled title icon-class type]}]
(let [context (mf/use-ctx context)
allow-empty (unchecked-get context "allow-empty")
type (if ^boolean type
@ -39,7 +39,6 @@
[:label {:html-for id
:title title
:key unique-key
:class (stl/css-case
:radio-icon true
:checked checked?

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

File diff suppressed because it is too large Load diff

128
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View file

@ -20,8 +20,7 @@
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]
[rumext.v2.props :as-alias mf.props]))
[rumext.v2 :as mf]))
(def layout-item-attrs
[:layout-item-margin ;; {:m1 0 :m2 0 :m3 0 :m4 0}
@ -46,14 +45,14 @@
(mf/defc margin-simple
{::mf/props :obj}
[{:keys [margin on-change on-blur]}]
(let [m1 (:m1 margin)
m2 (:m2 margin)
m3 (:m3 margin)
m4 (:m4 margin)
[{:keys [value on-change on-blur]}]
(let [m1 (:m1 value)
m2 (:m2 value)
m3 (:m3 value)
m4 (:m4 value)
m1 (when (and (not= margin :multiple) (= m1 m3)) m1)
m2 (when (and (not= margin :multiple) (= m2 m4)) m2)
m1 (when (and (not= value :multiple) (= m1 m3)) m1)
m2 (when (and (not= value :multiple) (= m2 m4)) m2)
on-focus
(mf/use-fn
@ -106,11 +105,11 @@
(mf/defc margin-multiple
{::mf/props :obj}
[{:keys [margin on-change on-blur]}]
(let [m1 (:m1 margin)
m2 (:m2 margin)
m3 (:m3 margin)
m4 (:m4 margin)
[{:keys [value on-change on-blur]}]
(let [m1 (:m1 value)
m2 (:m2 value)
m3 (:m3 value)
m4 (:m4 value)
on-focus
(mf/use-fn
@ -186,7 +185,7 @@
(mf/defc margin-section
{::mf/props :obj
::mf/private true
::mf.props/expect #{:margin :type :on-type-change :on-change}}
::mf/expect-props #{:value :type :on-type-change :on-change}}
[{:keys [type on-type-change] :as props}]
(let [type (d/nilv type :simple)
on-blur (mf/use-fn #(select-margins false false false false))
@ -220,14 +219,17 @@
i/margin-refactor]]))
(mf/defc element-behaviour-horizontal
{::mf/props :obj}
[{:keys [^boolean is-auto ^boolean has-fill sizing on-change]}]
[:div {:class (stl/css-case :horizontal-behaviour true
{::mf/props :obj
::mf/private true}
[{:keys [^boolean is-auto ^boolean has-fill value on-change]}]
[:div {:class (stl/css-case
:horizontal-behaviour true
:one-element (and (not has-fill) (not is-auto))
:two-element (or has-fill is-auto)
:three-element (and has-fill is-auto))}
[:& radio-buttons
{:selected (d/name sizing)
{:selected (d/name value)
:decode-fn keyword
:on-change on-change
:wide true
:name "flex-behaviour-h"}
@ -252,14 +254,17 @@
:id "behaviour-h-auto"}])]])
(mf/defc element-behaviour-vertical
{::mf/props :obj}
[{:keys [^boolean is-auto ^boolean has-fill sizing on-change]}]
[:div {:class (stl/css-case :vertical-behaviour true
{::mf/props :obj
::mf/private true}
[{:keys [^boolean is-auto ^boolean has-fill value on-change]}]
[:div {:class (stl/css-case
:vertical-behaviour true
:one-element (and (not has-fill) (not is-auto))
:two-element (or has-fill is-auto)
:three-element (and has-fill is-auto))}
[:& radio-buttons
{:selected (d/name sizing)
{:selected (d/name value)
:decode-fn keyword
:on-change on-change
:wide true
:name "flex-behaviour-v"}
@ -286,34 +291,11 @@
:title "Fit content"
:id "behaviour-v-auto"}])]])
(mf/defc element-behaviour
{::mf/props :obj
::mf/private true}
[{:keys [^boolean is-auto
^boolean has-fill
h-sizing
v-sizing
on-h-change
on-v-change]}]
[:div {:class (stl/css-case
:behaviour-menu true
:wrap (and has-fill is-auto))}
[:& element-behaviour-horizontal
{:is-auto is-auto
:has-fill has-fill
:sizing h-sizing
:on-change on-h-change}]
[:& element-behaviour-vertical
{:is-auto is-auto
:has-fill has-fill
:sizing v-sizing
:on-change on-v-change}]])
(mf/defc align-self-row
{::mf/props :obj}
[{:keys [^boolean is-col align-self on-change]}]
[:& radio-buttons {:selected (d/name align-self)
[{:keys [^boolean is-col value on-change]}]
[:& radio-buttons {:selected (d/name value)
:decode-fn keyword
:on-change on-change
:name "flex-align-self"
:allow-empty true}
@ -392,16 +374,16 @@
:else
"Layout element")
set-align-self
on-align-self-change
(mf/use-fn
(mf/deps ids align-self)
(fn [value]
(if (= align-self value)
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self nil}))
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self (keyword value)})))))
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self value})))))
;; Margin
on-change-margin-type
on-margin-type-change
(mf/use-fn
(mf/deps ids)
(fn [type]
@ -422,19 +404,17 @@
(st/emit! (dwsl/update-layout-child ids {:layout-item-margin {prop val}})))))
;; Behaviour
on-change-behaviour-h
on-behaviour-h-change
(mf/use-fn
(mf/deps ids)
(fn [value]
(let [value (keyword value)]
(st/emit! (dwsl/update-layout-child ids {:layout-item-h-sizing value})))))
(st/emit! (dwsl/update-layout-child ids {:layout-item-h-sizing value}))))
on-change-behaviour-v
on-behaviour-v-change
(mf/use-fn
(mf/deps ids)
(fn [value]
(let [value (keyword value)]
(st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing value})))))
(st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing value}))))
;; Size and position
on-size-change
@ -450,10 +430,9 @@
(mf/use-fn
(mf/deps ids)
(fn [value]
(let [value (keyword value)]
(when (= value :static)
(st/emit! (dwsl/update-layout-child ids {:layout-item-z-index nil})))
(st/emit! (dwsl/update-layout-child ids {:layout-item-absolute (= value :absolute)})))))
(st/emit! (dwsl/update-layout-child ids {:layout-item-absolute (= value :absolute)}))))
;; Z Index
on-change-z-index
@ -476,6 +455,7 @@
[:div {:class (stl/css :row)}
[:div {:class (stl/css :position-options)}
[:& radio-buttons {:selected (if is-absolute? "absolute" "static")
:decode-fn keyword
:on-change on-change-position
:name "layout-style"
:wide true}
@ -497,24 +477,32 @@
:value (:layout-item-z-index values)}]]])
[:div {:class (stl/css :row)}
[:& element-behaviour {:has-fill is-layout-child?
:is-auto is-layout-container?
:v-sizing (:layout-item-v-sizing values)
:h-sizing (:layout-item-h-sizing values)
:on-h-change on-change-behaviour-h
:on-v-change on-change-behaviour-v}]]
[:div {:class (stl/css-case
:behaviour-menu true
:wrap (and ^boolean is-layout-child?
^boolean is-layout-container?))}
[:& element-behaviour-horizontal
{:is-auto is-layout-container?
:has-fill is-layout-child?
:value (:layout-item-h-sizing values)
:on-change on-behaviour-h-change}]
[:& element-behaviour-vertical
{:is-auto is-layout-container?
:has-fill is-layout-child?
:value (:layout-item-v-sizing values)
:on-change on-behaviour-v-change}]]]
(when (and is-layout-child? is-flex-parent?)
[:div {:class (stl/css :row)}
[:& align-self-row {:is-col is-col?
:align-self align-self
:on-change set-align-self}]])
:value align-self
:on-change on-align-self-change}]])
(when is-layout-child?
[:div {:class (stl/css :row)}
[:& margin-section {:margin (:layout-item-margin values)
[:& margin-section {:value (:layout-item-margin values)
:type (:layout-item-margin-type values)
:on-type-change on-change-margin-type
:on-type-change on-margin-type-change
:on-change on-margin-change}]])
(when (or (= h-sizing :fill)

1
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -632,6 +632,7 @@
(not= @hover-top-frame-id (:id frame)))
[:& grid-layout/editor
{:zoom zoom
:key (dm/str (:id frame))
:objects base-objects
:modifiers modifiers
:shape frame

83
frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
View file

@ -113,7 +113,7 @@
(+ (:y start-p) (/ 9 zoom))])
handle-click
(mf/use-callback
(mf/use-fn
(mf/deps on-click)
#(when on-click (on-click)))]
@ -142,7 +142,7 @@
current-pos-ref (mf/use-ref nil)
handle-pointer-down
(mf/use-callback
(mf/use-fn
(mf/deps on-drag-start)
(fn [event]
(let [raw-pt (dom/get-client-position event)
@ -154,7 +154,7 @@
(when on-drag-start (on-drag-start event position)))))
handle-lost-pointer-capture
(mf/use-callback
(mf/use-fn
(mf/deps on-drag-end)
(fn [event]
(let [raw-pt (mf/ref-val current-pos-ref)
@ -165,7 +165,7 @@
(when on-drag-end (on-drag-end event position)))))
handle-pointer-move
(mf/use-callback
(mf/use-fn
(mf/deps on-drag-delta on-drag-position)
(fn [event]
(when (mf/ref-val dragging-ref)
@ -198,7 +198,7 @@
layout-data (unchecked-get props "layout-data")
handle-drag-position
(mf/use-callback
(mf/use-fn
(mf/deps shape row column row-span column-span)
(fn [_ position]
(let [[drag-row drag-column] (gsg/get-position-grid-coord layout-data position)
@ -235,7 +235,7 @@
(st/emit! (dwm/set-modifiers (dwm/create-modif-tree [(:id shape)] modifiers))))))
handle-drag-end
(mf/use-callback
(mf/use-fn
(fn []
(st/emit! (dwm/apply-modifiers))))
@ -291,17 +291,10 @@
text]]))
(mf/defc grid-cell
{::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "cell" "layout-data" "zoom" "hover?" "selected?"]))]
::mf/wrap-props false}
[props]
(let [shape (unchecked-get props "shape")
cell (unchecked-get props "cell")
layout-data (unchecked-get props "layout-data")
zoom (unchecked-get props "zoom")
hover? (unchecked-get props "hover?")
selected? (unchecked-get props "selected?")
cell-bounds (gsg/cell-bounds layout-data cell)
{::mf/memo #{:shape :cell :layout-data :zoom :hover? :selected?}
::mf/props :obj}
[{:keys [shape cell layout-data zoom hover? selected?]}]
(let [cell-bounds (gsg/cell-bounds layout-data cell)
cell-origin (gpo/origin cell-bounds)
cell-width (gpo/width-points cell-bounds)
cell-height (gpo/height-points cell-bounds)
@ -309,19 +302,19 @@
cell-origin (gpt/transform cell-origin (gmt/transform-in cell-center (:transform-inverse shape)))
handle-pointer-enter
(mf/use-callback
(mf/use-fn
(mf/deps (:id shape) (:id cell))
(fn []
(st/emit! (dwge/hover-grid-cell (:id shape) (:id cell) true))))
handle-pointer-leave
(mf/use-callback
(mf/use-fn
(mf/deps (:id shape) (:id cell))
(fn []
(st/emit! (dwge/hover-grid-cell (:id shape) (:id cell) false))))
handle-pointer-down
(mf/use-callback
(mf/use-fn
(mf/deps (:id shape) (:id cell) selected?)
(fn [event]
(when (dom/left-mouse? event)
@ -339,7 +332,7 @@
(st/emit! (dwge/set-selection (:id shape) (:id cell)))))))
handle-context-menu
(mf/use-callback
(mf/use-fn
(mf/deps (:id shape) (:id cell) selected?)
(fn [event]
(dom/prevent-default event)
@ -424,7 +417,7 @@
start-size-after (mf/use-var nil)
handle-drag-start
(mf/use-callback
(mf/use-fn
(mf/deps shape track-before track-after)
(fn []
(reset! start-size-before (:size track-before))
@ -444,7 +437,7 @@
(st/emit! (dwm/set-modifiers (dwm/create-modif-tree [(:id shape)] modifiers))))))
handle-drag-position
(mf/use-callback
(mf/use-fn
(mf/deps shape track-before track-after)
(fn [_ position]
(let [[tracks-prop axis]
@ -469,7 +462,7 @@
(st/emit! (dwm/set-modifiers (dwm/create-modif-tree [(:id shape)] modifiers))))))
handle-drag-end
(mf/use-callback
(mf/use-fn
(mf/deps track-before track-after)
(fn []
(reset! start-size-before nil)
@ -732,7 +725,7 @@
text-p (if (= type :column) hpt vpt)
handle-blur-track-input
(mf/use-callback
(mf/use-fn
(mf/deps (:id shape))
(fn [event]
(let [target (-> event dom/get-target)
@ -760,7 +753,7 @@
(obj/set! target "value" (dom/get-attribute target "data-default-value"))))))
handle-keydown-track-input
(mf/use-callback
(mf/use-fn
(fn [event]
(let [enter? (kbd/enter? event)
esc? (kbd/esc? event)]
@ -770,13 +763,13 @@
(dom/blur! (dom/get-target event))))))
handle-pointer-enter
(mf/use-callback
(mf/use-fn
(mf/deps (:id shape) type index)
(fn []
(st/emit! (dwsl/hover-layout-track [(:id shape)] type index true))))
handle-pointer-leave
(mf/use-callback
(mf/use-fn
(mf/deps (:id shape) type index)
(fn []
(st/emit! (dwsl/hover-layout-track [(:id shape)] type index false))))
@ -788,25 +781,25 @@
[(- (:x text-p) (max 0 (:size track-data))) (- (:y text-p) (/ 36 zoom)) (max 0 (:size track-data)) (/ 36 zoom)])
handle-drag-start
(mf/use-callback
(mf/use-fn
(mf/deps on-start-reorder-track type index)
(fn []
(on-start-reorder-track type index)))
handle-drag-end
(mf/use-callback
(mf/use-fn
(mf/deps on-end-reorder-track type index)
(fn [event position]
(on-end-reorder-track type index position (not (kbd/mod? event)))))
handle-drag-position
(mf/use-callback
(mf/use-fn
(mf/deps on-move-reorder-track type index)
(fn [_ position]
(on-move-reorder-track type index position)))
handle-show-track-menu
(mf/use-callback
(mf/use-fn
(fn [event]
(dom/stop-propagation event)
(dom/prevent-default event)
@ -895,10 +888,9 @@
:zoom zoom}]]))
(mf/defc editor
{::mf/wrap [mf/memo]
::mf/wrap-props false}
{::mf/memo true
::mf/props :obj}
[props]
(let [base-shape (unchecked-get props "shape")
objects (unchecked-get props "objects")
modifiers (unchecked-get props "modifiers")
@ -962,31 +954,30 @@
height (max (gpo/height-points bounds) (+ row-total-size row-total-gap (ctl/v-padding shape)))
handle-pointer-down
(mf/use-callback
(mf/use-fn
(fn [event]
(let [left-click? (= 1 (.-which (.-nativeEvent event)))]
(when left-click?
(dom/stop-propagation event)))))
handle-add-column
(mf/use-callback
(mf/use-fn
(mf/deps (:id shape))
(fn []
(st/emit! (st/emit! (dwsl/add-layout-track [(:id shape)] :column ctl/default-track-value)))))
handle-add-row
(mf/use-callback
(mf/use-fn
(mf/deps (:id shape))
(fn []
(st/emit! (st/emit! (dwsl/add-layout-track [(:id shape)] :row ctl/default-track-value)))))
target-tracks* (mf/use-ref nil)
drop-track-type* (mf/use-state nil)
drop-track-target* (mf/use-state nil)
handle-start-reorder-track
(mf/use-callback
(mf/use-fn
(mf/deps layout-data)
(fn [type _from-idx]
;; Initialize target-tracks
@ -1014,7 +1005,7 @@
(reset! drop-track-type* type))))
handle-move-reorder-track
(mf/use-callback
(mf/use-fn
(fn [_type _from-idx position]
(let [index
(->> (mf/ref-val target-tracks*)
@ -1025,7 +1016,7 @@
(reset! drop-track-target* index)))))
handle-end-reorder-track
(mf/use-callback
(mf/use-fn
(mf/deps base-shape @drop-track-target*)
(fn [type from-index _position move-content?]
(when-let [to-index @drop-track-target*]
@ -1041,9 +1032,8 @@
(reset! drop-track-type* nil)
(reset! drop-track-target* nil)))]
(mf/use-effect
(fn []
#(st/emit! (dwge/stop-grid-layout-editing (:id shape)))))
(mf/with-effect []
#(st/emit! (dwge/stop-grid-layout-editing (:id shape))))
(when (and (not (:hidden shape)) (not (:blocked shape)))
[:g.grid-editor {:pointer-events (when view-only "none")
@ -1057,7 +1047,8 @@
:zoom zoom
:hover? (contains? hover-cells (:id cell))
:selected? (contains? selected-cells (:id cell))}])]
(when-not view-only
(when-not ^boolean view-only
[:*
[:& grid-editor-frame {:zoom zoom
:bounds bounds