Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-14 16:51:18 -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/defc radio-button
{::mf/props :obj} {::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) (let [context (mf/use-ctx context)
allow-empty (unchecked-get context "allow-empty") allow-empty (unchecked-get context "allow-empty")
type (if ^boolean type type (if ^boolean type
@ -39,7 +39,6 @@
[:label {:html-for id [:label {:html-for id
:title title :title title
:key unique-key
:class (stl/css-case :class (stl/css-case
:radio-icon true :radio-icon true
:checked checked? :checked checked?

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

File diff suppressed because it is too large Load diff

144
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.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf] [rumext.v2 :as mf]))
[rumext.v2.props :as-alias mf.props]))
(def layout-item-attrs (def layout-item-attrs
[:layout-item-margin ;; {:m1 0 :m2 0 :m3 0 :m4 0} [:layout-item-margin ;; {:m1 0 :m2 0 :m3 0 :m4 0}
@ -46,14 +45,14 @@
(mf/defc margin-simple (mf/defc margin-simple
{::mf/props :obj} {::mf/props :obj}
[{:keys [margin on-change on-blur]}] [{:keys [value on-change on-blur]}]
(let [m1 (:m1 margin) (let [m1 (:m1 value)
m2 (:m2 margin) m2 (:m2 value)
m3 (:m3 margin) m3 (:m3 value)
m4 (:m4 margin) m4 (:m4 value)
m1 (when (and (not= margin :multiple) (= m1 m3)) m1) m1 (when (and (not= value :multiple) (= m1 m3)) m1)
m2 (when (and (not= margin :multiple) (= m2 m4)) m2) m2 (when (and (not= value :multiple) (= m2 m4)) m2)
on-focus on-focus
(mf/use-fn (mf/use-fn
@ -106,11 +105,11 @@
(mf/defc margin-multiple (mf/defc margin-multiple
{::mf/props :obj} {::mf/props :obj}
[{:keys [margin on-change on-blur]}] [{:keys [value on-change on-blur]}]
(let [m1 (:m1 margin) (let [m1 (:m1 value)
m2 (:m2 margin) m2 (:m2 value)
m3 (:m3 margin) m3 (:m3 value)
m4 (:m4 margin) m4 (:m4 value)
on-focus on-focus
(mf/use-fn (mf/use-fn
@ -186,7 +185,7 @@
(mf/defc margin-section (mf/defc margin-section
{::mf/props :obj {::mf/props :obj
::mf/private true ::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}] [{:keys [type on-type-change] :as props}]
(let [type (d/nilv type :simple) (let [type (d/nilv type :simple)
on-blur (mf/use-fn #(select-margins false false false false)) on-blur (mf/use-fn #(select-margins false false false false))
@ -220,14 +219,17 @@
i/margin-refactor]])) i/margin-refactor]]))
(mf/defc element-behaviour-horizontal (mf/defc element-behaviour-horizontal
{::mf/props :obj} {::mf/props :obj
[{:keys [^boolean is-auto ^boolean has-fill sizing on-change]}] ::mf/private true}
[:div {:class (stl/css-case :horizontal-behaviour true [{:keys [^boolean is-auto ^boolean has-fill value on-change]}]
:one-element (and (not has-fill) (not is-auto)) [:div {:class (stl/css-case
:two-element (or has-fill is-auto) :horizontal-behaviour true
:three-element (and has-fill is-auto))} :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 [:& radio-buttons
{:selected (d/name sizing) {:selected (d/name value)
:decode-fn keyword
:on-change on-change :on-change on-change
:wide true :wide true
:name "flex-behaviour-h"} :name "flex-behaviour-h"}
@ -252,14 +254,17 @@
:id "behaviour-h-auto"}])]]) :id "behaviour-h-auto"}])]])
(mf/defc element-behaviour-vertical (mf/defc element-behaviour-vertical
{::mf/props :obj} {::mf/props :obj
[{:keys [^boolean is-auto ^boolean has-fill sizing on-change]}] ::mf/private true}
[:div {:class (stl/css-case :vertical-behaviour true [{:keys [^boolean is-auto ^boolean has-fill value on-change]}]
:one-element (and (not has-fill) (not is-auto)) [:div {:class (stl/css-case
:two-element (or has-fill is-auto) :vertical-behaviour true
:three-element (and has-fill is-auto))} :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 [:& radio-buttons
{:selected (d/name sizing) {:selected (d/name value)
:decode-fn keyword
:on-change on-change :on-change on-change
:wide true :wide true
:name "flex-behaviour-v"} :name "flex-behaviour-v"}
@ -286,34 +291,11 @@
:title "Fit content" :title "Fit content"
:id "behaviour-v-auto"}])]]) :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/defc align-self-row
{::mf/props :obj} {::mf/props :obj}
[{:keys [^boolean is-col align-self on-change]}] [{:keys [^boolean is-col value on-change]}]
[:& radio-buttons {:selected (d/name align-self) [:& radio-buttons {:selected (d/name value)
:decode-fn keyword
:on-change on-change :on-change on-change
:name "flex-align-self" :name "flex-align-self"
:allow-empty true} :allow-empty true}
@ -392,16 +374,16 @@
:else :else
"Layout element") "Layout element")
set-align-self on-align-self-change
(mf/use-fn (mf/use-fn
(mf/deps ids align-self) (mf/deps ids align-self)
(fn [value] (fn [value]
(if (= align-self 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 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 ;; Margin
on-change-margin-type on-margin-type-change
(mf/use-fn (mf/use-fn
(mf/deps ids) (mf/deps ids)
(fn [type] (fn [type]
@ -422,19 +404,17 @@
(st/emit! (dwsl/update-layout-child ids {:layout-item-margin {prop val}}))))) (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {prop val}})))))
;; Behaviour ;; Behaviour
on-change-behaviour-h on-behaviour-h-change
(mf/use-fn (mf/use-fn
(mf/deps ids) (mf/deps ids)
(fn [value] (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/use-fn
(mf/deps ids) (mf/deps ids)
(fn [value] (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 ;; Size and position
on-size-change on-size-change
@ -450,10 +430,9 @@
(mf/use-fn (mf/use-fn
(mf/deps ids) (mf/deps ids)
(fn [value] (fn [value]
(let [value (keyword value)] (when (= value :static)
(when (= value :static) (st/emit! (dwsl/update-layout-child ids {:layout-item-z-index nil})))
(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 ;; Z Index
on-change-z-index on-change-z-index
@ -476,6 +455,7 @@
[:div {:class (stl/css :row)} [:div {:class (stl/css :row)}
[:div {:class (stl/css :position-options)} [:div {:class (stl/css :position-options)}
[:& radio-buttons {:selected (if is-absolute? "absolute" "static") [:& radio-buttons {:selected (if is-absolute? "absolute" "static")
:decode-fn keyword
:on-change on-change-position :on-change on-change-position
:name "layout-style" :name "layout-style"
:wide true} :wide true}
@ -497,24 +477,32 @@
:value (:layout-item-z-index values)}]]]) :value (:layout-item-z-index values)}]]])
[:div {:class (stl/css :row)} [:div {:class (stl/css :row)}
[:& element-behaviour {:has-fill is-layout-child? [:div {:class (stl/css-case
:is-auto is-layout-container? :behaviour-menu true
:v-sizing (:layout-item-v-sizing values) :wrap (and ^boolean is-layout-child?
:h-sizing (:layout-item-h-sizing values) ^boolean is-layout-container?))}
:on-h-change on-change-behaviour-h [:& element-behaviour-horizontal
:on-v-change on-change-behaviour-v}]] {: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?) (when (and is-layout-child? is-flex-parent?)
[:div {:class (stl/css :row)} [:div {:class (stl/css :row)}
[:& align-self-row {:is-col is-col? [:& align-self-row {:is-col is-col?
:align-self align-self :value align-self
:on-change set-align-self}]]) :on-change on-align-self-change}]])
(when is-layout-child? (when is-layout-child?
[:div {:class (stl/css :row)} [: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) :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}]]) :on-change on-margin-change}]])
(when (or (= h-sizing :fill) (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))) (not= @hover-top-frame-id (:id frame)))
[:& grid-layout/editor [:& grid-layout/editor
{:zoom zoom {:zoom zoom
:key (dm/str (:id frame))
:objects base-objects :objects base-objects
:modifiers modifiers :modifiers modifiers
:shape frame :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))]) (+ (:y start-p) (/ 9 zoom))])
handle-click handle-click
(mf/use-callback (mf/use-fn
(mf/deps on-click) (mf/deps on-click)
#(when on-click (on-click)))] #(when on-click (on-click)))]
@ -142,7 +142,7 @@
current-pos-ref (mf/use-ref nil) current-pos-ref (mf/use-ref nil)
handle-pointer-down handle-pointer-down
(mf/use-callback (mf/use-fn
(mf/deps on-drag-start) (mf/deps on-drag-start)
(fn [event] (fn [event]
(let [raw-pt (dom/get-client-position event) (let [raw-pt (dom/get-client-position event)
@ -154,7 +154,7 @@
(when on-drag-start (on-drag-start event position))))) (when on-drag-start (on-drag-start event position)))))
handle-lost-pointer-capture handle-lost-pointer-capture
(mf/use-callback (mf/use-fn
(mf/deps on-drag-end) (mf/deps on-drag-end)
(fn [event] (fn [event]
(let [raw-pt (mf/ref-val current-pos-ref) (let [raw-pt (mf/ref-val current-pos-ref)
@ -165,7 +165,7 @@
(when on-drag-end (on-drag-end event position))))) (when on-drag-end (on-drag-end event position)))))
handle-pointer-move handle-pointer-move
(mf/use-callback (mf/use-fn
(mf/deps on-drag-delta on-drag-position) (mf/deps on-drag-delta on-drag-position)
(fn [event] (fn [event]
(when (mf/ref-val dragging-ref) (when (mf/ref-val dragging-ref)
@ -198,7 +198,7 @@
layout-data (unchecked-get props "layout-data") layout-data (unchecked-get props "layout-data")
handle-drag-position handle-drag-position
(mf/use-callback (mf/use-fn
(mf/deps shape row column row-span column-span) (mf/deps shape row column row-span column-span)
(fn [_ position] (fn [_ position]
(let [[drag-row drag-column] (gsg/get-position-grid-coord layout-data 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)))))) (st/emit! (dwm/set-modifiers (dwm/create-modif-tree [(:id shape)] modifiers))))))
handle-drag-end handle-drag-end
(mf/use-callback (mf/use-fn
(fn [] (fn []
(st/emit! (dwm/apply-modifiers)))) (st/emit! (dwm/apply-modifiers))))
@ -291,17 +291,10 @@
text]])) text]]))
(mf/defc grid-cell (mf/defc grid-cell
{::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "cell" "layout-data" "zoom" "hover?" "selected?"]))] {::mf/memo #{:shape :cell :layout-data :zoom :hover? :selected?}
::mf/wrap-props false} ::mf/props :obj}
[props] [{:keys [shape cell layout-data zoom hover? selected?]}]
(let [shape (unchecked-get props "shape") (let [cell-bounds (gsg/cell-bounds layout-data cell)
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)
cell-origin (gpo/origin cell-bounds) cell-origin (gpo/origin cell-bounds)
cell-width (gpo/width-points cell-bounds) cell-width (gpo/width-points cell-bounds)
cell-height (gpo/height-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))) cell-origin (gpt/transform cell-origin (gmt/transform-in cell-center (:transform-inverse shape)))
handle-pointer-enter handle-pointer-enter
(mf/use-callback (mf/use-fn
(mf/deps (:id shape) (:id cell)) (mf/deps (:id shape) (:id cell))
(fn [] (fn []
(st/emit! (dwge/hover-grid-cell (:id shape) (:id cell) true)))) (st/emit! (dwge/hover-grid-cell (:id shape) (:id cell) true))))
handle-pointer-leave handle-pointer-leave
(mf/use-callback (mf/use-fn
(mf/deps (:id shape) (:id cell)) (mf/deps (:id shape) (:id cell))
(fn [] (fn []
(st/emit! (dwge/hover-grid-cell (:id shape) (:id cell) false)))) (st/emit! (dwge/hover-grid-cell (:id shape) (:id cell) false))))
handle-pointer-down handle-pointer-down
(mf/use-callback (mf/use-fn
(mf/deps (:id shape) (:id cell) selected?) (mf/deps (:id shape) (:id cell) selected?)
(fn [event] (fn [event]
(when (dom/left-mouse? event) (when (dom/left-mouse? event)
@ -339,7 +332,7 @@
(st/emit! (dwge/set-selection (:id shape) (:id cell))))))) (st/emit! (dwge/set-selection (:id shape) (:id cell)))))))
handle-context-menu handle-context-menu
(mf/use-callback (mf/use-fn
(mf/deps (:id shape) (:id cell) selected?) (mf/deps (:id shape) (:id cell) selected?)
(fn [event] (fn [event]
(dom/prevent-default event) (dom/prevent-default event)
@ -424,7 +417,7 @@
start-size-after (mf/use-var nil) start-size-after (mf/use-var nil)
handle-drag-start handle-drag-start
(mf/use-callback (mf/use-fn
(mf/deps shape track-before track-after) (mf/deps shape track-before track-after)
(fn [] (fn []
(reset! start-size-before (:size track-before)) (reset! start-size-before (:size track-before))
@ -444,7 +437,7 @@
(st/emit! (dwm/set-modifiers (dwm/create-modif-tree [(:id shape)] modifiers)))))) (st/emit! (dwm/set-modifiers (dwm/create-modif-tree [(:id shape)] modifiers))))))
handle-drag-position handle-drag-position
(mf/use-callback (mf/use-fn
(mf/deps shape track-before track-after) (mf/deps shape track-before track-after)
(fn [_ position] (fn [_ position]
(let [[tracks-prop axis] (let [[tracks-prop axis]
@ -469,7 +462,7 @@
(st/emit! (dwm/set-modifiers (dwm/create-modif-tree [(:id shape)] modifiers)))))) (st/emit! (dwm/set-modifiers (dwm/create-modif-tree [(:id shape)] modifiers))))))
handle-drag-end handle-drag-end
(mf/use-callback (mf/use-fn
(mf/deps track-before track-after) (mf/deps track-before track-after)
(fn [] (fn []
(reset! start-size-before nil) (reset! start-size-before nil)
@ -732,7 +725,7 @@
text-p (if (= type :column) hpt vpt) text-p (if (= type :column) hpt vpt)
handle-blur-track-input handle-blur-track-input
(mf/use-callback (mf/use-fn
(mf/deps (:id shape)) (mf/deps (:id shape))
(fn [event] (fn [event]
(let [target (-> event dom/get-target) (let [target (-> event dom/get-target)
@ -760,7 +753,7 @@
(obj/set! target "value" (dom/get-attribute target "data-default-value")))))) (obj/set! target "value" (dom/get-attribute target "data-default-value"))))))
handle-keydown-track-input handle-keydown-track-input
(mf/use-callback (mf/use-fn
(fn [event] (fn [event]
(let [enter? (kbd/enter? event) (let [enter? (kbd/enter? event)
esc? (kbd/esc? event)] esc? (kbd/esc? event)]
@ -770,13 +763,13 @@
(dom/blur! (dom/get-target event)))))) (dom/blur! (dom/get-target event))))))
handle-pointer-enter handle-pointer-enter
(mf/use-callback (mf/use-fn
(mf/deps (:id shape) type index) (mf/deps (:id shape) type index)
(fn [] (fn []
(st/emit! (dwsl/hover-layout-track [(:id shape)] type index true)))) (st/emit! (dwsl/hover-layout-track [(:id shape)] type index true))))
handle-pointer-leave handle-pointer-leave
(mf/use-callback (mf/use-fn
(mf/deps (:id shape) type index) (mf/deps (:id shape) type index)
(fn [] (fn []
(st/emit! (dwsl/hover-layout-track [(:id shape)] type index false)))) (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)]) [(- (:x text-p) (max 0 (:size track-data))) (- (:y text-p) (/ 36 zoom)) (max 0 (:size track-data)) (/ 36 zoom)])
handle-drag-start handle-drag-start
(mf/use-callback (mf/use-fn
(mf/deps on-start-reorder-track type index) (mf/deps on-start-reorder-track type index)
(fn [] (fn []
(on-start-reorder-track type index))) (on-start-reorder-track type index)))
handle-drag-end handle-drag-end
(mf/use-callback (mf/use-fn
(mf/deps on-end-reorder-track type index) (mf/deps on-end-reorder-track type index)
(fn [event position] (fn [event position]
(on-end-reorder-track type index position (not (kbd/mod? event))))) (on-end-reorder-track type index position (not (kbd/mod? event)))))
handle-drag-position handle-drag-position
(mf/use-callback (mf/use-fn
(mf/deps on-move-reorder-track type index) (mf/deps on-move-reorder-track type index)
(fn [_ position] (fn [_ position]
(on-move-reorder-track type index position))) (on-move-reorder-track type index position)))
handle-show-track-menu handle-show-track-menu
(mf/use-callback (mf/use-fn
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(dom/prevent-default event) (dom/prevent-default event)
@ -895,10 +888,9 @@
:zoom zoom}]])) :zoom zoom}]]))
(mf/defc editor (mf/defc editor
{::mf/wrap [mf/memo] {::mf/memo true
::mf/wrap-props false} ::mf/props :obj}
[props] [props]
(let [base-shape (unchecked-get props "shape") (let [base-shape (unchecked-get props "shape")
objects (unchecked-get props "objects") objects (unchecked-get props "objects")
modifiers (unchecked-get props "modifiers") 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))) height (max (gpo/height-points bounds) (+ row-total-size row-total-gap (ctl/v-padding shape)))
handle-pointer-down handle-pointer-down
(mf/use-callback (mf/use-fn
(fn [event] (fn [event]
(let [left-click? (= 1 (.-which (.-nativeEvent event)))] (let [left-click? (= 1 (.-which (.-nativeEvent event)))]
(when left-click? (when left-click?
(dom/stop-propagation event))))) (dom/stop-propagation event)))))
handle-add-column handle-add-column
(mf/use-callback (mf/use-fn
(mf/deps (:id shape)) (mf/deps (:id shape))
(fn [] (fn []
(st/emit! (st/emit! (dwsl/add-layout-track [(:id shape)] :column ctl/default-track-value))))) (st/emit! (st/emit! (dwsl/add-layout-track [(:id shape)] :column ctl/default-track-value)))))
handle-add-row handle-add-row
(mf/use-callback (mf/use-fn
(mf/deps (:id shape)) (mf/deps (:id shape))
(fn [] (fn []
(st/emit! (st/emit! (dwsl/add-layout-track [(:id shape)] :row ctl/default-track-value))))) (st/emit! (st/emit! (dwsl/add-layout-track [(:id shape)] :row ctl/default-track-value)))))
target-tracks* (mf/use-ref nil) target-tracks* (mf/use-ref nil)
drop-track-type* (mf/use-state nil) drop-track-type* (mf/use-state nil)
drop-track-target* (mf/use-state nil) drop-track-target* (mf/use-state nil)
handle-start-reorder-track handle-start-reorder-track
(mf/use-callback (mf/use-fn
(mf/deps layout-data) (mf/deps layout-data)
(fn [type _from-idx] (fn [type _from-idx]
;; Initialize target-tracks ;; Initialize target-tracks
@ -1014,7 +1005,7 @@
(reset! drop-track-type* type)))) (reset! drop-track-type* type))))
handle-move-reorder-track handle-move-reorder-track
(mf/use-callback (mf/use-fn
(fn [_type _from-idx position] (fn [_type _from-idx position]
(let [index (let [index
(->> (mf/ref-val target-tracks*) (->> (mf/ref-val target-tracks*)
@ -1025,7 +1016,7 @@
(reset! drop-track-target* index))))) (reset! drop-track-target* index)))))
handle-end-reorder-track handle-end-reorder-track
(mf/use-callback (mf/use-fn
(mf/deps base-shape @drop-track-target*) (mf/deps base-shape @drop-track-target*)
(fn [type from-index _position move-content?] (fn [type from-index _position move-content?]
(when-let [to-index @drop-track-target*] (when-let [to-index @drop-track-target*]
@ -1041,9 +1032,8 @@
(reset! drop-track-type* nil) (reset! drop-track-type* nil)
(reset! drop-track-target* nil)))] (reset! drop-track-target* nil)))]
(mf/use-effect (mf/with-effect []
(fn [] #(st/emit! (dwge/stop-grid-layout-editing (:id shape))))
#(st/emit! (dwge/stop-grid-layout-editing (:id shape)))))
(when (and (not (:hidden shape)) (not (:blocked shape))) (when (and (not (:hidden shape)) (not (:blocked shape)))
[:g.grid-editor {:pointer-events (when view-only "none") [:g.grid-editor {:pointer-events (when view-only "none")
@ -1057,7 +1047,8 @@
:zoom zoom :zoom zoom
:hover? (contains? hover-cells (:id cell)) :hover? (contains? hover-cells (:id cell))
:selected? (contains? selected-cells (:id cell))}])] :selected? (contains? selected-cells (:id cell))}])]
(when-not view-only
(when-not ^boolean view-only
[:* [:*
[:& grid-editor-frame {:zoom zoom [:& grid-editor-frame {:zoom zoom
:bounds bounds :bounds bounds