diff --git a/common/src/app/common/geom/shapes/modifiers.cljc b/common/src/app/common/geom/shapes/modifiers.cljc index 4bf1974e5..3fdb5aec0 100644 --- a/common/src/app/common/geom/shapes/modifiers.cljc +++ b/common/src/app/common/geom/shapes/modifiers.cljc @@ -424,7 +424,7 @@ to-reflow (cond-> to-reflow - (and (ctl/flex-layout-descent? objects parent-base) + (and (ctl/any-layout-descent? objects parent-base) (not= uuid/zero (:frame-id parent-base))) (conj (:frame-id parent-base)))] (recur modif-tree diff --git a/common/src/app/common/pages/helpers.cljc b/common/src/app/common/pages/helpers.cljc index 529d3bf2f..0def65c04 100644 --- a/common/src/app/common/pages/helpers.cljc +++ b/common/src/app/common/pages/helpers.cljc @@ -45,8 +45,10 @@ (= type :group))) (defn mask-shape? - [{:keys [type masked-group?]}] - (and (= type :group) masked-group?)) + ([objects id] + (mask-shape? (get objects id))) + ([{:keys [type masked-group?]}] + (and (= type :group) masked-group?))) (defn bool-shape? [{:keys [type]}] 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 ce38aede0..9cb756546 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 @@ -715,6 +715,11 @@ [{:keys [ids values] :as props}] (let [;; Gap gap-selected? (mf/use-state :none) + saved-grid-dir (:layout-grid-dir values) + + set-direction + (fn [dir] + (st/emit! (dwsl/update-layout ids {:layout-grid-dir dir}))) set-gap (fn [gap-multiple? type val] @@ -739,6 +744,28 @@ :else (st/emit! (dwsl/update-layout ids {:layout-padding {prop val}})))) + ;; Align grid + align-items-row (:layout-align-items values) + align-items-column (:layout-justify-items values) + + set-align-grid + (fn [value type] + (if (= type :row) + (st/emit! (dwsl/update-layout ids {:layout-align-items value})) + (st/emit! (dwsl/update-layout ids {:layout-justify-items value})))) + + ;; Justify grid + grid-justify-content-row (:layout-align-content values) + grid-justify-content-column (:layout-justify-content values) + + set-justify-grid + (mf/use-callback + (mf/deps ids) + (fn [value type] + (if (= type :row) + (st/emit! (dwsl/update-layout ids {:layout-align-content value})) + (st/emit! (dwsl/update-layout ids {:layout-justify-content value}))))) + ;;Grid columns column-grid-values (:layout-grid-columns values) grid-columns-open? (mf/use-state false) @@ -746,7 +773,7 @@ (fn [_] (swap! grid-columns-open? not))) - ; Grid rows / columns + ;; Grid rows / columns rows-grid-values (:layout-grid-rows values) grid-rows-open? (mf/use-state false) toggle-rows-info @@ -789,6 +816,42 @@ [:span "Grid Layout"]] [:div.element-set-content.layout-menu + [:div.layout-row + [:div.direction-wrap.row-title "Direction"] + [:div.btn-wrapper + [:div.direction + [:* + (for [dir [:row :column]] + [:& direction-btn {:key (d/name dir) + :dir dir + :saved-dir saved-grid-dir + :set-direction #(set-direction dir) + :icon? false}])]] + + (when (= 1 (count ids)) + [:div.edit-mode + [:& grid-edit-mode {:id (first ids)}]])]] + + [:div.layout-row + [:div.align-items-grid.row-title "Align"] + [:div.btn-wrapper.align-grid + [:& align-grid-row {:is-col? false + :align-items align-items-row + :set-align set-align-grid}] + + [:& align-grid-row {:is-col? true + :align-items align-items-column + :set-align set-align-grid}]]] + + [:div.layout-row + [:div.jusfiy-content-grid.row-title "Justify"] + [:div.btn-wrapper.align-grid + [:& justify-grid-row {:is-col? true + :justify-items grid-justify-content-column + :set-justify set-justify-grid}] + [:& justify-grid-row {:is-col? false + :justify-items grid-justify-content-row + :set-justify set-justify-grid}]]] [:& grid-columns-row {:is-col? true :expanded? @grid-columns-open? :toggle toggle-columns-info diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs index cafa9dbfd..1c8585f1b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs @@ -49,7 +49,7 @@ is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids)) is-grid-parent? (mf/deref is-grid-parent-ref) - is-flex-layout-container? (ctl/flex-layout? shape) + is-layout-container? (ctl/any-layout? shape) is-layout-child-absolute? (ctl/layout-absolute? shape) ids (hooks/use-equal-memo ids) @@ -73,7 +73,7 @@ {:shape (first parents) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) - (when (or is-layout-child? is-flex-layout-container?) + (when (or is-layout-child? is-layout-container?) [:& layout-item-menu {:ids ids :type type @@ -81,7 +81,7 @@ :is-flex-parent? is-flex-parent? :is-grid-parent? is-grid-parent? :is-layout-child? is-layout-child? - :is-layout-container? is-flex-layout-container? + :is-layout-container? is-layout-container? :shape shape}]) [:& layer-menu {:ids ids diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index c355a684a..2213e8f94 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -595,9 +595,8 @@ [:g.grid-layout-editor {:clipPath "url(#clip-handlers)"} [:& grid-layout/editor {:zoom zoom - :objects objects-modified + :objects base-objects + :modifiers modifiers :shape (or (get objects-modified edition) - (gsh/transform-shape - (get base-objects @hover-top-frame-id) - (dm/get-in modifiers [@hover-top-frame-id :modifiers]))) + (get base-objects @hover-top-frame-id)) :view-only (not show-grid-editor?)}]])]]])) diff --git a/frontend/src/app/main/ui/workspace/viewport/actions.cljs b/frontend/src/app/main/ui/workspace/viewport/actions.cljs index 1d04c715b..5b173616a 100644 --- a/frontend/src/app/main/ui/workspace/viewport/actions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/actions.cljs @@ -6,6 +6,7 @@ (ns app.main.ui.workspace.viewport.actions (:require + [app.common.data :as d] [app.common.geom.point :as gpt] [app.common.math :as mth] [app.common.pages.helpers :as cph] @@ -202,7 +203,12 @@ {:keys [id type] :as shape} (or @hover (get objects (first @hover-ids))) - editable? (contains? #{:text :rect :path :image :circle} type)] + editable? (contains? #{:text :rect :path :image :circle} type) + + hover-shape (->> @hover-ids (filter (partial cph/is-child? objects id)) first) + selected-shape (get objects hover-shape) + + grid-layout-id (->> @hover-ids reverse (d/seek (partial ctl/grid-layout? objects)))] (st/emit! (ms/->MouseEvent :double-click ctrl? shift? alt? meta?)) @@ -215,16 +221,12 @@ (st/emit! (dw/select-shape id) (dw/start-editing-selected)) - (ctl/grid-layout? objects @hover-top-frame-id) - (st/emit! (dw/start-edition-mode @hover-top-frame-id)) + (some? selected-shape) + (do (reset! hover selected-shape) + (st/emit! (dw/select-shape (:id selected-shape)))) - :else - (let [;; We only get inside childrens of the hovering shape - hover-ids (->> @hover-ids (filter (partial cph/is-child? objects id))) - selected (get objects (first hover-ids))] - (when (some? selected) - (reset! hover selected) - (st/emit! (dw/select-shape (:id selected)))))))))))))) + (and (not selected-shape) (some? grid-layout-id)) + (st/emit! (dw/start-edition-mode grid-layout-id))))))))))) (defn on-context-menu [hover hover-ids workspace-read-only?] diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs index a1e00b5d8..9afcae0e5 100644 --- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs @@ -299,9 +299,11 @@ handle-pointer-down (mf/use-callback - (mf/deps (:id shape) (:id cell)) + (mf/deps (:id shape) (:id cell) selected?) (fn [] - (st/emit! (dwge/select-grid-cell (:id shape) (:id cell)))))] + (if selected? + (st/emit! (dwge/remove-selection (:id shape))) + (st/emit! (dwge/select-grid-cell (:id shape) (:id cell))))))] [:g.cell-editor [:rect @@ -657,14 +659,17 @@ ::mf/wrap-props false} [props] - (let [shape (unchecked-get props "shape") - objects (unchecked-get props "objects") - zoom (unchecked-get props "zoom") - view-only (unchecked-get props "view-only") + (let [base-shape (unchecked-get props "shape") + objects (unchecked-get props "objects") + modifiers (unchecked-get props "modifiers") + zoom (unchecked-get props "zoom") + view-only (unchecked-get props "view-only") - ;; We need to know the state unmodified so we can create the modifiers - shape-ref (mf/use-memo (mf/deps (:id shape)) #(refs/object-by-id (:id shape))) - base-shape (mf/deref shape-ref) + shape (mf/use-memo + (mf/deps modifiers base-shape) + #(gsh/transform-shape + base-shape + (dm/get-in modifiers [(:id base-shape) :modifiers]))) snap-pixel? (mf/deref refs/snap-pixel?) @@ -680,6 +685,7 @@ children (->> (:shapes shape) (map (d/getf objects)) + (map #(gsh/transform-shape % (dm/get-in modifiers [(:id %) :modifiers]))) (remove :hidden) (map #(vector (gpo/parent-coords-bounds (:points %) (:points shape)) %))) diff --git a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs index bb46c1efa..4c4cdfdaf 100644 --- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs @@ -206,7 +206,9 @@ (remove #(dm/get-in objects [% :blocked])) (ctt/sort-z-index objects ids {:bottom-frames? mod?})) - grouped? (fn [id] (contains? #{:group :bool} (get-in objects [id :type]))) + grouped? (fn [id] + (and (cph/group-shape? objects id) + (not (cph/mask-shape? objects id)))) selected-with-parents (into #{} (mapcat #(cph/get-parent-ids objects %)) selected)