diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index 2259a12e6..5427519bc 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -1146,22 +1146,30 @@ (assoc parent :shapes (into [] (reverse new-shapes))))) -(defn shapes-by-row +(defn cells-by-row [parent index] (->> (:layout-grid-cells parent) (filter (fn [[_ {:keys [row row-span]}]] (and (>= (inc index) row) (< (inc index) (+ row row-span))))) - (map second) - (mapcat :shapes))) + (map second))) -(defn shapes-by-column +(defn cells-by-column [parent index] (->> (:layout-grid-cells parent) (filter (fn [[_ {:keys [column column-span]}]] (and (>= (inc index) column) (< (inc index) (+ column column-span))))) - (map second) + (map second))) + +(defn shapes-by-row + [parent index] + (->> (cells-by-row parent index) + (mapcat :shapes))) + +(defn shapes-by-column + [parent index] + (->> (cells-by-column parent index) (mapcat :shapes))) (defn cells-coordinates diff --git a/frontend/src/app/main/data/workspace/grid_layout/editor.cljs b/frontend/src/app/main/data/workspace/grid_layout/editor.cljs index 82621a7c4..5512447b5 100644 --- a/frontend/src/app/main/data/workspace/grid_layout/editor.cljs +++ b/frontend/src/app/main/data/workspace/grid_layout/editor.cljs @@ -7,6 +7,7 @@ (ns app.main.data.workspace.grid-layout.editor (:require [app.common.geom.rect :as grc] + [app.common.types.shape.layout :as ctl] [app.main.data.workspace.state-helpers :as wsh] [potok.core :as ptk])) @@ -84,3 +85,18 @@ (-> local (update :vbox merge (select-keys srect [:x :y :x1 :x2 :y1 :y2]))))))))))) +(defn select-track-cells + [grid-id type index] + (ptk/reify ::select-track-cells + ptk/UpdateEvent + (update [_ state] + (let [objects (wsh/lookup-page-objects state) + parent (get objects grid-id) + + cells + (if (= type :column) + (ctl/cells-by-column parent index) + (ctl/cells-by-row parent index)) + + selected (into #{} (map :id) cells)] + (assoc-in state [:workspace-grid-edition grid-id :selected] selected))))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index c0adcfe32..4c080c873 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -957,7 +957,7 @@ value)) (mf/defc grid-track-info - [{:keys [is-col? type index column set-column-value set-column-type remove-element reorder-track hover-track]}] + [{:keys [is-col? type index column set-column-value set-column-type remove-element reorder-track hover-track on-select-track]}] (let [new-css-system (mf/use-ctx ctx/new-css-system) drop-track @@ -978,6 +978,13 @@ (fn [] (hover-track type index false))) + handle-select-track + (mf/use-fn + (mf/deps on-select-track type index) + (fn [] + (when on-select-track + (on-select-track type index)))) + [dprops dref] (h/use-sortable :data-type "penpot/grid-track" @@ -998,7 +1005,8 @@ :on-pointer-leave pointer-leave} [:div {:class (stl/css :track-info-container)} - [:div {:class (stl/css :track-info-dir-icon)} + [:div {:class (stl/css :track-info-dir-icon) + :on-click handle-select-track} (if is-col? i/flex-vertical-refactor i/flex-horizontal-refactor)] [:div {:class (stl/css :track-info-value)} @@ -1057,7 +1065,8 @@ i/minus]]))) (mf/defc grid-columns-row - [{:keys [is-col? expanded? column-values toggle add-new-element set-column-value set-column-type remove-element reorder-track hover-track] :as props}] + [{:keys [is-col? expanded? column-values toggle add-new-element set-column-value set-column-type + remove-element reorder-track hover-track on-select-track] :as props}] (let [new-css-system (mf/use-ctx ctx/new-css-system) column-num (count column-values) @@ -1098,7 +1107,8 @@ :set-column-type set-column-type :remove-element remove-element :reorder-track reorder-track - :hover-track hover-track}])]])] + :hover-track hover-track + :on-select-track on-select-track}])]])] [:div.grid-columns [:div.grid-columns-header @@ -1119,7 +1129,8 @@ :set-column-type set-column-type :remove-element remove-element :reorder-track reorder-track - :hover-track hover-track}])]])]))) + :hover-track hover-track + :on-select-track on-select-track}])]])]))) ;; LAYOUT COMPONENT @@ -1695,6 +1706,12 @@ (fn [type index hover?] (st/emit! (dwsl/hover-layout-track ids type index hover?)))) + handle-select-track + (mf/use-fn + (mf/deps ids) + (fn [type index] + (st/emit! (dwge/select-track-cells (first ids) type index)))) + set-column-value (mf/use-fn (mf/deps ids) @@ -1720,7 +1737,7 @@ handle-locate-grid (mf/use-callback (fn [] - (st/emit! (dwge/locate-board (first ids))))) ] + (st/emit! (dwge/locate-board (first ids)))))] (if new-css-system [:div {:class (stl/css :grid-layout-menu)} @@ -1767,7 +1784,8 @@ :set-column-type set-column-type :remove-element remove-element :reorder-track reorder-track - :hover-track hover-track}] + :hover-track hover-track + :on-select-track handle-select-track}] [:& grid-columns-row {:is-col? false :expanded? @grid-rows-open? @@ -1778,7 +1796,8 @@ :set-column-type set-column-type :remove-element remove-element :reorder-track reorder-track - :hover-track hover-track}]] + :hover-track hover-track + :on-select-track handle-select-track}]] [:div {:class (stl/css :row)} [:& gap-section {:gap-selected? gap-selected? :on-change set-gap diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss index 94a8f9790..97fe318b2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss @@ -222,15 +222,18 @@ } .track-info-dir-icon { + cursor: pointer; border-radius: $br-8 0 0 $br-8; background-color: var(--input-background-color); padding: 0 $s-8; - svg { @extend .button-icon; stroke: var(--icon-foreground); height: 100%; } + &:hover svg { + stroke: var(--icon-foreground-hover); + } } .track-info-value {