diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index 92550c11a0..f04f534208 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -208,6 +208,11 @@ parent (get objects parent-id)] (flex-layout? parent))) +(defn grid-layout-immediate-child? [objects shape] + (let [parent-id (:parent-id shape) + parent (get objects parent-id)] + (grid-layout? parent))) + (defn any-layout-immediate-child? [objects shape] (let [parent-id (:parent-id shape) parent (get objects parent-id)] @@ -218,6 +223,11 @@ parent (get objects parent-id)] (flex-layout? parent))) +(defn grid-layout-immediate-child-id? [objects id] + (let [parent-id (dm/get-in objects [id :parent-id]) + parent (get objects parent-id)] + (grid-layout? parent))) + (defn any-layout-immediate-child-id? [objects id] (let [parent-id (dm/get-in objects [id :parent-id]) parent (get objects parent-id)] diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 7043327671..05e11c3be6 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -783,6 +783,12 @@ (assoc :layout-item-v-sizing :fix)) parent))) + ;; Update grid layout + (pcb/update-shapes parents + (fn [parent] + (cond-> parent + (ctl/grid-layout? parent) + (ctl/assign-cells)))) ;; Resize parent containers that need to (pcb/resize-parents parents)))) @@ -1800,7 +1806,9 @@ changes (-> (dws/prepare-duplicate-changes all-objects page selected delta it libraries library-data file-id) (pcb/amend-changes (partial process-rchange media-idx)) - (pcb/amend-changes (partial change-add-obj-index paste-objects selected index))) + (pcb/amend-changes (partial change-add-obj-index paste-objects selected index)) + (cond-> (ctl/grid-layout? all-objects parent-id) + (pcb/update-shapes [parent-id] ctl/assign-cells))) ;; Adds a resize-parents operation so the groups are updated. We add all the new objects new-objects-ids (->> changes :redo-changes (filter #(= (:type %) :add-obj)) (mapv :id)) diff --git a/frontend/src/app/main/data/workspace/selection.cljs b/frontend/src/app/main/data/workspace/selection.cljs index 9bab204bf7..ec88cd88c8 100644 --- a/frontend/src/app/main/data/workspace/selection.cljs +++ b/frontend/src/app/main/data/workspace/selection.cljs @@ -18,6 +18,7 @@ [app.common.types.file :as ctf] [app.common.types.page :as ctp] [app.common.types.shape.interactions :as ctsi] + [app.common.types.shape.layout :as ctl] [app.common.uuid :as uuid] [app.main.data.modal :as md] [app.main.data.workspace.changes :as dch] @@ -324,6 +325,16 @@ (when selected (rx/of (select-shape (:id selected)))))))) +(defn remap-grid-cells + "Remaps the shapes inside the cells" + [shape ids-map] + + (let [do-remap-cells + (fn [cell] + (-> cell + (update :shapes #(mapv ids-map %))))] + + (update shape :layout-grid-cells update-vals do-remap-cells))) ;; --- Duplicate Shapes (declare prepare-duplicate-shape-change) @@ -431,10 +442,15 @@ :shape-ref :use-for-thumbnail?) (gsh/move delta) - (d/update-when :interactions #(ctsi/remap-interactions % ids-map objects))) + (d/update-when :interactions #(ctsi/remap-interactions % ids-map objects)) + + (cond-> (ctl/grid-layout? obj) + (remap-grid-cells ids-map))) changes (-> (pcb/add-object changes new-obj) - (pcb/amend-last-change #(assoc % :old-id (:id obj)))) + (pcb/amend-last-change #(assoc % :old-id (:id obj))) + (cond-> (ctl/grid-layout? objects (:parent-id obj)) + (pcb/update-shapes [(:parent-id obj)] ctl/assign-cells))) changes (cond-> changes (and is-component-root? is-component-main?) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index e4885697ad..574435dd23 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -178,7 +178,7 @@ (mf/defc layout-item-menu {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "is-layout-child?"]))]} - [{:keys [ids values is-layout-child? is-layout-container?] :as props}] + [{:keys [ids values is-layout-child? is-layout-container? is-grid-parent? is-flex-parent?] :as props}] (let [selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) selection-parents (mf/deref selection-parents-ref) @@ -188,11 +188,15 @@ (st/emit! (dwsl/update-layout-child ids {:layout-item-margin-type type}))) align-self (:layout-item-align-self values) - set-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 value})))) - + + set-align-self + (mf/use-callback + (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 value}))))) + is-absolute? (:layout-item-absolute values) is-col? (every? ctl/col? selection-parents) @@ -231,9 +235,18 @@ [:div.element-set [:div.element-set-title - [:span (if (and is-layout-container? (not is-layout-child?)) + [:span (cond + (and is-layout-container? (not is-layout-child?)) "Flex board" - "Flex element")]] + + is-flex-parent? + "Flex element" + + is-grid-parent? + "Grid element" + + :else + "Layout element")]] [:div.element-set-content.layout-item-menu (when is-layout-child?