diff --git a/common/src/app/common/files/shapes_helpers.cljc b/common/src/app/common/files/shapes_helpers.cljc index 8a656886f..03e3e89c1 100644 --- a/common/src/app/common/files/shapes_helpers.cljc +++ b/common/src/app/common/files/shapes_helpers.cljc @@ -71,6 +71,23 @@ parent-id (or parent-id (dm/get-in objects [selected-id :parent-id])) base-parent (get objects parent-id) + layout-props + (when (and (= 1 (count selected)) + (ctl/any-layout? base-parent)) + (let [shape (get objects selected-id)] + (select-keys shape ctl/layout-item-props))) + + target-cell-id + (if (and (nil? target-cell-id) + (ctl/grid-layout? objects parent-id)) + ;; Find the top-left grid cell of the selected elements + (let [ncols (count (:layout-grid-columns base-parent))] + (->> selected + (map #(ctl/get-cell-by-shape-id base-parent %)) + (apply min-key (fn [{:keys [row column]}] (+ (* ncols row) column))) + :id)) + target-cell-id) + attrs {:type :frame :x (:x srect) :y (:y srect) @@ -90,12 +107,14 @@ :parent-id parent-id :shapes (into [] selected)) - :always - (with-meta {:index new-index}) + (some? layout-props) + (d/patch-object layout-props) (or (not= frame-id uuid/zero) without-fill?) (assoc :fills [] :hide-in-viewer true))) + shape (with-meta shape {:index new-index}) + [shape changes] (prepare-add-shape changes shape objects) @@ -105,15 +124,23 @@ changes (cond-> changes (ctl/grid-layout? objects (:parent-id shape)) - (-> (cond-> (some? target-cell-id) - (pcb/update-shapes - [(:parent-id shape)] - (fn [parent] - (-> parent - (assoc :layout-grid-cells (:layout-grid-cells base-parent)) - (assoc-in [:layout-grid-cells target-cell-id :shapes] [id]) - (assoc :position :auto))))) - (pcb/update-shapes [(:parent-id shape)] ctl/assign-cells {:with-objects? true}) + (-> (pcb/update-shapes + [(:parent-id shape)] + (fn [parent objects] + ;; This restores the grid layout before adding and moving the shapes + ;; this is done because the add+move could have altered the layout and we + ;; want to do it after both operations are completed. Also here we could + ;; asign the new element to a target-cell + (-> parent + (assoc :layout-grid-cells (:layout-grid-cells base-parent)) + (assoc :layout-grid-rows (:layout-grid-rows base-parent)) + (assoc :layout-grid-columns (:layout-grid-columns base-parent)) + + (cond-> (some? target-cell-id) + (assoc-in [:layout-grid-cells target-cell-id :shapes] [(:id shape)])) + (ctl/assign-cells objects))) + {:with-objects? true}) + (pcb/reorder-grid-children [(:parent-id shape)])))] [shape changes]))))) diff --git a/common/src/app/common/types/container.cljc b/common/src/app/common/types/container.cljc index f70705230..b00a41b1a 100644 --- a/common/src/app/common/types/container.cljc +++ b/common/src/app/common/types/container.cljc @@ -6,6 +6,7 @@ (ns app.common.types.container (:require + [app.common.data :as d] [app.common.data.macros :as dm] [app.common.files.helpers :as cfh] [app.common.geom.point :as gpt] @@ -287,7 +288,8 @@ component-shape (if components-v2 (-> (get-shape component-page (:main-instance-id component)) (assoc :parent-id nil) ;; On v2 we force parent-id to nil in order to behave like v1 - (assoc :frame-id uuid/zero)) + (assoc :frame-id uuid/zero) + (d/without-keys ctk/swap-keep-attrs)) (get-shape component (:id component))) orig-pos (gpt/point (:x component-shape) (:y component-shape)) diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index 5a48aa016..104fb9bc7 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -73,6 +73,18 @@ (def justify-items-types #{:start :end :center :stretch}) +(def layout-item-props + [:layout-item-margin + :layout-item-margin-type + :layout-item-h-sizing + :layout-item-v-sizing + :layout-item-max-h + :layout-item-min-h + :layout-item-max-w + :layout-item-min-w + :layout-item-absolute + :layout-item-z-index]) + (sm/def! ::layout-attrs [:map {:title "LayoutAttrs"} [:layout {:optional true} [::sm/one-of layout-types]] diff --git a/frontend/src/app/main/data/workspace/libraries.cljs b/frontend/src/app/main/data/workspace/libraries.cljs index 2a7b7984d..54047f0e3 100644 --- a/frontend/src/app/main/data/workspace/libraries.cljs +++ b/frontend/src/app/main/data/workspace/libraries.cljs @@ -1010,12 +1010,16 @@ (rx/of (dch/commit-changes (assoc changes ;; TODO a ver qué pasa con esto :file-id file-id)))) (when-not (empty? updated-frames) - (->> (rx/from updated-frames) - (rx/mapcat (fn [shape] - (rx/of - (dwt/clear-thumbnail file-id (:page-id shape) (:id shape) "frame") - (when-not (= (:frame-id shape) uuid/zero) - (dwt/clear-thumbnail file-id (:page-id shape) (:frame-id shape) "frame"))))))) + (rx/merge + (rx/of (ptk/data-event :layout/update (map :id updated-frames))) + (->> (rx/from updated-frames) + (rx/mapcat + (fn [shape] + (rx/of + (dwt/clear-thumbnail file-id (:page-id shape) (:id shape) "frame") + (when-not (= (:frame-id shape) uuid/zero) + (dwt/clear-thumbnail file-id (:page-id shape) (:frame-id shape) "frame")))))))) + (when (not= file-id library-id) ;; When we have just updated the library file, give some time for the ;; update to finish, before marking this file as synced. diff --git a/frontend/src/app/main/ui/workspace/context_menu.cljs b/frontend/src/app/main/ui/workspace/context_menu.cljs index cb5e635f8..da56b6338 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/context_menu.cljs @@ -106,8 +106,9 @@ [:span {:class (stl/css :title)} title] (when shortcut [:span {:class (stl/css :shortcut)} - (for [sc (scd/split-sc shortcut)] - [:span {:class (stl/css :shortcut-key)} sc])]) + (for [[idx sc] (d/enumerate (scd/split-sc shortcut))] + [:span {:key (dm/str shortcut "-" idx) + :class (stl/css :shortcut-key)} sc])]) (when (> (count children) 1) [:span {:class (stl/css :submenu-icon)} i/arrow-refactor]) 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 dff6d0888..fd5e42324 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 @@ -555,7 +555,8 @@ :on-change #(set-justify % type) :name (dm/str "grid-justify-items-" (d/name type))} (for [justify [:start :center :end :space-around :space-between :stretch]] - [:& radio-button {:value (d/name justify) + [:& radio-button {:key (dm/str "justify-item-" (d/name justify)) + :value (d/name justify) :icon (get-layout-grid-icon-refactor :justify-items justify is-col?) :title (dm/str "Justify items " (d/name justify)) :id (dm/str "justify-items-" (d/name justify) "-" (d/name type))}])]))