From c8d19c846a709dc8c88bd3824e16699c57d6f10d Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 7 Feb 2024 12:51:15 +0100 Subject: [PATCH 1/7] :bug: Fix problems with flex child properties in components --- common/src/app/common/types/component.cljc | 63 ++++++++------ common/src/app/common/types/shape/layout.cljc | 29 +++++++ .../data/workspace/libraries_helpers.cljs | 85 +++++++++++++++++-- 3 files changed, 144 insertions(+), 33 deletions(-) diff --git a/common/src/app/common/types/component.cljc b/common/src/app/common/types/component.cljc index 67ffd2414..42b48dd11 100644 --- a/common/src/app/common/types/component.cljc +++ b/common/src/app/common/types/component.cljc @@ -68,34 +68,45 @@ :grids :grids-group :layout :layout-container - :layout-align-content :layout-container - :layout-align-items :layout-container - :layout-flex-dir :layout-container - :layout-gap :layout-container - :layout-gap-type :layout-container - :layout-justify-content :layout-container - :layout-justify-items :layout-container - :layout-wrap-type :layout-container - :layout-padding-type :layout-container - :layout-padding :layout-container - :layout-h-orientation :layout-container - :layout-v-orientation :layout-container - :layout-grid-dir :layout-container - :layout-grid-rows :layout-container - :layout-grid-columns :layout-container - :layout-grid-cells :layout-container}) + + :layout-align-content :layout-align-content + :layout-align-items :layout-align-items + :layout-flex-dir :layout-flex-dir + :layout-gap :layout-gap + :layout-gap-type :layout-gap + :layout-justify-content :layout-justify-content + :layout-justify-items :layout-justify-items + :layout-wrap-type :layout-wrap-type + :layout-padding-type :layout-padding + :layout-padding :layout-padding + + :layout-grid-dir :layout-grid-dir + :layout-grid-rows :layout-grid-rows + :layout-grid-columns :layout-grid-columns + :layout-grid-cells :layout-grid-cells + + :layout-item-margin :layout-item-margin + :layout-item-margin-type :layout-item-margin + :layout-item-h-sizing :layout-item-h-sizing + :layout-item-v-sizing :layout-item-v-sizing + :layout-item-max-h :layout-item-max-h + :layout-item-min-h :layout-item-min-h + :layout-item-max-w :layout-item-max-w + :layout-item-min-w :layout-item-min-w + :layout-item-absolute :layout-item-absolute + :layout-item-z-index :layout-item-z-index}) (def swap-keep-attrs - [: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]) + #{: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}) (defn instance-root? "Check if this shape is the head of a top instance." diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index 823f57407..bc65f8371 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -1580,3 +1580,32 @@ (-> shape (update :layout-grid-cells update-vals do-remap-cells))] shape)) + +(defn merge-cells + "Given target cells update with source cells while trying to keep target as + untouched as possible" + [target-cells source-cells omit-touched?] + (if (not omit-touched?) + source-cells + + (letfn [(get-data [cells id] + (dissoc (get cells id) :shapes :row :column :row-span :column-span))] + (let [deleted-cells + (into #{} + (filter #(not (contains? source-cells %))) + (keys target-cells)) + + touched-cells + (into #{} + (filter #(and + (not (contains? deleted-cells %)) + (not= (dissoc (get source-cells %) :shapes :row :column :row-span :column-span) + (dissoc (get target-cells %) :shapes :row :column :row-span :column-span)))) + (keys target-cells))] + + (->> touched-cells + (reduce + (fn [cells id] + (-> cells + (d/update-when id d/patch-object (dissoc (get target-cells id) :shapes :row :column :row-span :column-span)))) + source-cells)))))) diff --git a/frontend/src/app/main/data/workspace/libraries_helpers.cljs b/frontend/src/app/main/data/workspace/libraries_helpers.cljs index 8c622b318..c12384b84 100644 --- a/frontend/src/app/main/data/workspace/libraries_helpers.cljs +++ b/frontend/src/app/main/data/workspace/libraries_helpers.cljs @@ -53,6 +53,8 @@ (declare update-attrs) (declare update-grid-main-attrs) (declare update-grid-copy-attrs) +(declare update-flex-child-main-attrs) +(declare update-flex-child-copy-attrs) (declare reposition-shape) (declare make-change) @@ -670,12 +672,21 @@ container omit-touched?) + (ctl/flex-layout? shape-main) + (update-flex-child-copy-attrs shape-main + shape-inst + library + component + container + omit-touched?) + (ctl/grid-layout? shape-main) (update-grid-copy-attrs shape-main shape-inst library component - container) + container + omit-touched?) reset? (change-touched shape-inst @@ -848,11 +859,19 @@ component-container {:copy-touched? true})) + (ctl/flex-layout? shape-main) + (update-flex-child-main-attrs shape-main + shape-inst + component-container + container + omit-touched?) + (ctl/grid-layout? shape-main) (update-grid-main-attrs shape-main shape-inst component-container - container) + container + omit-touched?) clear-remote-synced? (change-remote-synced shape-inst container nil) @@ -1304,6 +1323,9 @@ touched (get dest-shape :touched #{})] (loop [attrs (->> (seq (keys ctk/sync-attrs)) + ;; We don't update the flex-child attrs + (remove ctk/swap-keep-attrs) + ;; We don't do automatic update of the `layout-grid-cells` property. (remove #(= :layout-grid-cells %))) roperations [] @@ -1345,6 +1367,9 @@ attr-group (get ctk/sync-attrs attr)] + (and (not= (get origin-shape attr) (get dest-shape attr)) + (or (not (touched attr-group)) (not omit-touched?))) + (if (or (= (get origin-shape attr) (get dest-shape attr)) (and (touched attr-group) omit-touched?)) (recur (next attrs) @@ -1354,9 +1379,51 @@ (conj roperations roperation) (conj uoperations uoperation))))))))) +(defn- propagate-attrs + "Helper that puts the src-shape attributes (attrs) into tgt-shape but only if + not touched the group or if omit-touched? flag is true" + [tgt-shape src-shape attrs omit-touched?] + (let [touched (get tgt-shape :touched #{})] + (->> attrs + (reduce + (fn [tgt-shape attr] + (let [attr-group (get ctk/sync-attrs attr)] + (cond-> tgt-shape + (or (not (touched attr-group)) (not omit-touched?)) + (assoc attr (get src-shape attr))))) + tgt-shape)))) + +(defn- update-flex-child-copy-attrs + "Synchronizes the attributes inside the flex-child items (main->copy)" + [changes shape-main shape-copy main-container main-component copy-container omit-touched?] + (-> changes + (pcb/with-container copy-container) + (pcb/with-objects (:objects copy-container)) + (pcb/update-shapes + (:shapes shape-copy) + (fn [child-copy] + (let [child-main (ctf/get-ref-shape main-container main-component child-copy)] + (-> child-copy + (propagate-attrs child-main ctk/swap-keep-attrs omit-touched?)))) + {:ignore-touched true}))) + +(defn- update-flex-child-main-attrs + "Synchronizes the attributes inside the flex-child items (copy->main)" + [changes shape-main shape-copy main-container copy-container omit-touched?] + (-> changes + (pcb/with-page main-container) + (pcb/with-objects (:objects main-container)) + (pcb/update-shapes + (:shapes shape-main) + (fn [child-main] + (let [child-copy (ctf/get-shape-in-copy copy-container child-main shape-copy)] + (-> child-main + (propagate-attrs child-copy ctk/swap-keep-attrs omit-touched?)))) + {:ignore-touched true}))) + (defn- update-grid-copy-attrs "Synchronizes the `layout-grid-cells` property from the main shape to the copies" - [changes shape-main shape-copy main-container main-component copy-container] + [changes shape-main shape-copy main-container main-component copy-container omit-touched?] (let [ids-map (into {} (comp @@ -1369,16 +1436,19 @@ (-> changes (pcb/with-container copy-container) + (pcb/with-objects (:objects copy-container)) (pcb/update-shapes [(:id shape-copy)] (fn [shape-copy] ;; Take cells from main and remap the shapes to assign it to the copy - (let [new-cells (-> (ctl/remap-grid-cells shape-main ids-map) :layout-grid-cells)] - (assoc shape-copy :layout-grid-cells new-cells))))))) + (let [copy-cells (:layout-grid-cells shape-copy) + main-cells (-> (ctl/remap-grid-cells shape-main ids-map) :layout-grid-cells)] + (assoc shape-copy :layout-grid-cells (ctl/merge-cells copy-cells main-cells omit-touched?)))) + {:ignore-touched true})))) (defn- update-grid-main-attrs "Synchronizes the `layout-grid-cells` property from the copy to the main shape" - [changes shape-main shape-copy main-container copy-container] + [changes shape-main shape-copy main-container copy-container omit-touched?] (let [ids-map (into {} (comp @@ -1396,7 +1466,8 @@ (fn [shape-main] ;; Take cells from copy and remap the shapes to assign it to the copy (let [new-cells (-> (ctl/remap-grid-cells shape-copy ids-map) :layout-grid-cells)] - (assoc shape-main :layout-grid-cells new-cells))))))) + (assoc shape-main :layout-grid-cells new-cells))) + {:ignore-touched true})))) (defn- reposition-shape [shape origin-root dest-root] From 4e1353caf1ffdcf33c9fd29fc8cd315fcba88ce1 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 7 Feb 2024 16:38:35 +0100 Subject: [PATCH 2/7] :bug: Fix problems with grid layout and flex children absolute --- common/src/app/common/geom/modifiers.cljc | 17 +++++++-- .../geom/shapes/flex_layout/layout_data.cljc | 2 +- .../common/geom/shapes/min_size_layout.cljc | 12 ++++-- .../app/common/geom/shapes/transforms.cljc | 1 - common/src/app/common/types/shape/layout.cljc | 6 +-- .../data/workspace/libraries_helpers.cljs | 4 +- .../viewport/grid_layout_editor.cljs | 38 ++++++++----------- 7 files changed, 42 insertions(+), 38 deletions(-) diff --git a/common/src/app/common/geom/modifiers.cljc b/common/src/app/common/geom/modifiers.cljc index 58d694204..813fd784a 100644 --- a/common/src/app/common/geom/modifiers.cljc +++ b/common/src/app/common/geom/modifiers.cljc @@ -224,8 +224,18 @@ (remove ctl/position-absolute?) (remove gco/invalid-geometry?)) + auto? (or (ctl/auto? parent) + (and (ctl/grid-layout? objects (:parent-id parent)) + (ctl/fill? parent))) + auto-width? (or (ctl/auto-width? parent) + (and (ctl/grid-layout? objects (:parent-id parent)) + (ctl/fill-width? parent))) + auto-height? (or (ctl/auto-height? parent) + (and (ctl/grid-layout? objects (:parent-id parent)) + (ctl/fill-height? parent))) + content-bounds - (when (and (d/not-empty? children) (ctl/auto? parent)) + (when (and (d/not-empty? children) auto?) (cond (ctl/flex-layout? parent) (gcfl/layout-content-bounds bounds parent children objects) @@ -238,12 +248,11 @@ auto-width (when content-bounds (gpo/width-points content-bounds)) auto-height (when content-bounds (gpo/height-points content-bounds))] - (cond-> (ctm/empty) - (and (some? auto-width) (ctl/auto-width? parent)) + (and (some? auto-width) auto-width?) (set-parent-auto-width auto-width) - (and (some? auto-height) (ctl/auto-height? parent)) + (and (some? auto-height) auto-height?) (set-parent-auto-height auto-height)))) (defn find-auto-layouts diff --git a/common/src/app/common/geom/shapes/flex_layout/layout_data.cljc b/common/src/app/common/geom/shapes/flex_layout/layout_data.cljc index 7d7b2da25..c9e4f7c57 100644 --- a/common/src/app/common/geom/shapes/flex_layout/layout_data.cljc +++ b/common/src/app/common/geom/shapes/flex_layout/layout_data.cljc @@ -14,7 +14,7 @@ (def conjv (fnil conj [])) -;; Setted in app.common.geom.shapes.common-layout +;; Setted in app.common.geom.shapes.min-size-layout ;; We do it this way because circular dependencies (def -child-min-width nil) diff --git a/common/src/app/common/geom/shapes/min_size_layout.cljc b/common/src/app/common/geom/shapes/min_size_layout.cljc index ec88b62fc..0c3718ec5 100644 --- a/common/src/app/common/geom/shapes/min_size_layout.cljc +++ b/common/src/app/common/geom/shapes/min_size_layout.cljc @@ -24,14 +24,16 @@ (ctl/child-min-width child) (and strict? (ctl/fill-width? child) (ctl/flex-layout? child)) - (let [children (cfh/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})] + (let [children (->> (cfh/get-immediate-children objects (dm/get-prop child :id)) + (remove ctl/position-absolute?))] (max (ctl/child-min-width child) (gpo/width-points (fb/layout-content-bounds bounds child children objects)))) (and (ctl/fill-width? child) (ctl/grid-layout? child)) (let [children - (->> (cfh/get-immediate-children objects (:id child) {:remove-hidden true}) + (->> (cfh/get-immediate-children objects (:id child)) + (remove ctl/position-absolute?) (map #(vector @(get bounds (:id %)) %))) layout-data (gd/calc-layout-data child @(get bounds (:id child)) children bounds objects true)] (max (ctl/child-min-width child) @@ -52,13 +54,15 @@ (ctl/child-min-height child) (and strict? (ctl/fill-height? child) (ctl/flex-layout? child)) - (let [children (cfh/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})] + (let [children (->> (cfh/get-immediate-children objects (dm/get-prop child :id)) + (remove ctl/position-absolute?))] (max (ctl/child-min-height child) (gpo/height-points (fb/layout-content-bounds bounds child children objects)))) (and (ctl/fill-height? child) (ctl/grid-layout? child)) (let [children - (->> (cfh/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true}) + (->> (cfh/get-immediate-children objects (dm/get-prop child :id)) + (remove ctl/position-absolute?) (map (fn [child] [@(get bounds (:id child)) child]))) layout-data (gd/calc-layout-data child (:points child) children bounds objects true) auto-bounds (gb/layout-content-bounds bounds child layout-data)] diff --git a/common/src/app/common/geom/shapes/transforms.cljc b/common/src/app/common/geom/shapes/transforms.cljc index f6ee1ea00..e5eae48eb 100644 --- a/common/src/app/common/geom/shapes/transforms.cljc +++ b/common/src/app/common/geom/shapes/transforms.cljc @@ -517,7 +517,6 @@ ids (seq ids)] (if (empty? ids) objects - (let [id (first ids) modifier (dm/get-in modifiers [id :modifiers])] (recur (d/update-when objects id transform-shape modifier) diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index bc65f8371..248563ef8 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -1599,13 +1599,13 @@ (into #{} (filter #(and (not (contains? deleted-cells %)) - (not= (dissoc (get source-cells %) :shapes :row :column :row-span :column-span) - (dissoc (get target-cells %) :shapes :row :column :row-span :column-span)))) + (not= (get-data source-cells %) + (get-data target-cells %)))) (keys target-cells))] (->> touched-cells (reduce (fn [cells id] (-> cells - (d/update-when id d/patch-object (dissoc (get target-cells id) :shapes :row :column :row-span :column-span)))) + (d/update-when id d/patch-object (get-data target-cells id)))) source-cells)))))) diff --git a/frontend/src/app/main/data/workspace/libraries_helpers.cljs b/frontend/src/app/main/data/workspace/libraries_helpers.cljs index c12384b84..6ab72287a 100644 --- a/frontend/src/app/main/data/workspace/libraries_helpers.cljs +++ b/frontend/src/app/main/data/workspace/libraries_helpers.cljs @@ -1395,7 +1395,7 @@ (defn- update-flex-child-copy-attrs "Synchronizes the attributes inside the flex-child items (main->copy)" - [changes shape-main shape-copy main-container main-component copy-container omit-touched?] + [changes _shape-main shape-copy main-container main-component copy-container omit-touched?] (-> changes (pcb/with-container copy-container) (pcb/with-objects (:objects copy-container)) @@ -1448,7 +1448,7 @@ (defn- update-grid-main-attrs "Synchronizes the `layout-grid-cells` property from the copy to the main shape" - [changes shape-main shape-copy main-container copy-container omit-touched?] + [changes shape-main shape-copy main-container copy-container _omit-touched?] (let [ids-map (into {} (comp 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 52f4cf8b3..62ab5a1cb 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 @@ -27,7 +27,6 @@ [app.main.store :as st] [app.main.ui.css-cursors :as cur] [app.main.ui.formats :as fmt] - [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] [app.main.ui.workspace.viewport.viewport-ref :as uwvv] [app.util.debug :as dbg] @@ -937,34 +936,27 @@ (map (fn [[_ idx]] idx)) (into #{})) - children - (mf/use-memo - (mf/deps objects shape modifiers) - (fn [] - (let [ids (cfh/get-children-ids objects (:id shape)) - objects (-> objects - (gsh/apply-objects-modifiers (select-keys modifiers ids)) - (gsh/update-shapes-geometry (reverse ids)))] - (->> (cfh/get-immediate-children objects (:id shape)) - (keep (fn [child] - (when-not (:hidden child) - [(gpo/parent-coords-bounds (:points child) (:points shape)) child]))))))) - - children (hooks/use-equal-memo children) - bounds (:points shape) hv #(gpo/start-hv bounds %) vv #(gpo/start-vv bounds %) origin (gpo/origin bounds) - all-bounds (d/lazy-map (keys objects) #(gsh/shape->points (get objects %))) - - {:keys [row-tracks column-tracks - column-total-size column-total-gap - row-total-size row-total-gap] :as layout-data} + layout-data (mf/use-memo - (mf/deps shape children) - #(gsg/calc-layout-data shape bounds children all-bounds objects)) + (mf/deps shape modifiers) + (fn [] + (let [objects (gsh/apply-objects-modifiers objects modifiers) + ids (cfh/get-children-ids objects (:id shape)) + objects (gsh/update-shapes-geometry objects (reverse ids)) + + children + (->> (cfh/get-immediate-children objects (:id shape) {:remove-hidden true}) + (map #(vector (gpo/parent-coords-bounds (:points %) (:points shape)) %))) + + children-bounds (d/lazy-map ids #(gsh/shape->points (get objects %)))] + (gsg/calc-layout-data shape bounds children children-bounds objects)))) + + {:keys [row-tracks column-tracks column-total-size column-total-gap row-total-size row-total-gap]} layout-data width (max (gpo/width-points bounds) (+ column-total-size column-total-gap (ctl/h-padding shape))) height (max (gpo/height-points bounds) (+ row-total-size row-total-gap (ctl/v-padding shape))) From 0f50afc4c3d2a8849e15ef25ec2fd924d279ba0a Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 7 Feb 2024 17:34:22 +0100 Subject: [PATCH 3/7] :bug: Fix typo when grid board selected --- .../workspace/sidebar/options/menus/layout_item.cljs | 10 ++++++++-- .../ui/workspace/sidebar/options/shapes/frame.cljs | 4 ++++ 2 files changed, 12 insertions(+), 2 deletions(-) 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 48ca30a7c..8ea0346d3 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 @@ -246,7 +246,7 @@ (mf/defc layout-item-menu {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "is-layout-child?" "is-grid-parent?" "is-flex-parent?"]))]} - [{:keys [ids values is-layout-child? is-layout-container? is-grid-parent? is-flex-parent?] :as props}] + [{:keys [ids values is-layout-child? is-layout-container? is-grid-parent? is-flex-parent? is-flex-layout? is-grid-layout?] :as props}] (let [selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) selection-parents (mf/deref selection-parents-ref) @@ -268,9 +268,15 @@ title (cond - (and is-layout-container? (not is-layout-child?)) + (and is-layout-container? (not is-layout-child?) is-flex-layout?) "Flex board" + (and is-layout-container? (not is-layout-child?) is-grid-layout?) + "Grid board" + + (and is-layout-container? (not is-layout-child?)) + "Layout board" + is-flex-parent? "Flex element" 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 1332faede..96ba853b6 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,6 +49,8 @@ is-grid-parent? (mf/deref is-grid-parent-ref) is-layout-container? (ctl/any-layout? shape) + is-flex-layout? (ctl/flex-layout? shape) + is-grid-layout? (ctl/grid-layout? shape) is-layout-child-absolute? (ctl/item-absolute? shape) ids (hooks/use-equal-memo ids) @@ -83,6 +85,8 @@ :values layout-item-values :is-flex-parent? is-flex-parent? :is-grid-parent? is-grid-parent? + :is-flex-layout? is-flex-layout? + :is-grid-layout? is-grid-layout? :is-layout-child? is-layout-child? :is-layout-container? is-layout-container? :shape shape}]) From ed9ee210e42628ac528b7d4b3422e6b234f4703f Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 8 Feb 2024 11:23:43 +0100 Subject: [PATCH 4/7] :bug: Change icon to align self stretch --- .../images/icons/align-self-column-stretch-refactor.svg | 3 +++ .../resources/images/icons/align-self-row-stretch-refactor.svg | 3 +++ frontend/src/app/main/ui/icons.cljs | 2 ++ .../app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs | 2 +- 4 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 frontend/resources/images/icons/align-self-column-stretch-refactor.svg create mode 100644 frontend/resources/images/icons/align-self-row-stretch-refactor.svg diff --git a/frontend/resources/images/icons/align-self-column-stretch-refactor.svg b/frontend/resources/images/icons/align-self-column-stretch-refactor.svg new file mode 100644 index 000000000..35c774829 --- /dev/null +++ b/frontend/resources/images/icons/align-self-column-stretch-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-self-row-stretch-refactor.svg b/frontend/resources/images/icons/align-self-row-stretch-refactor.svg new file mode 100644 index 000000000..493ec8d20 --- /dev/null +++ b/frontend/resources/images/icons/align-self-row-stretch-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index b6b5dd4af..e90cc022e 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -300,6 +300,8 @@ (def ^:icon align-self-row-center-refactor (icon-xref :align-self-row-center-refactor)) (def ^:icon align-self-row-left-refactor (icon-xref :align-self-row-left-refactor)) (def ^:icon align-self-row-right-refactor (icon-xref :align-self-row-right-refactor)) +(def ^:icon align-self-column-stretch-refactor (icon-xref :align-self-column-stretch-refactor)) +(def ^:icon align-self-row-stretch-refactor (icon-xref :align-self-row-stretch-refactor)) (def ^:icon board-refactor (icon-xref :board-refactor)) (def ^:icon boards-thumbnail-refactor (icon-xref :boards-thumbnail-refactor)) (def ^:icon boolean-difference-refactor (icon-xref :boolean-difference-refactor)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs index 383682991..e7c5560f7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs @@ -65,7 +65,7 @@ :id (dm/str "align-self-end-" type)}] [:& radio-button {:value "stretch" - :icon (if is-col? i/align-self-row-strech i/align-self-column-strech) + :icon (if is-col? i/align-self-row-stretch-refactor i/align-self-column-stretch-refactor) :title "Align self stretch" :id (dm/str "align-self-stretch-" type)}]]])) From b6be1c2e1aa43a34499a8f21549f8b335c586750 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 8 Feb 2024 17:58:14 +0100 Subject: [PATCH 5/7] :bug: Fix line break on flex/grid options --- .../main/data/workspace/libraries_helpers.cljs | 17 +++++++---------- .../sidebar/options/menus/layout_container.scss | 3 +++ 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/frontend/src/app/main/data/workspace/libraries_helpers.cljs b/frontend/src/app/main/data/workspace/libraries_helpers.cljs index 6ab72287a..c455bd585 100644 --- a/frontend/src/app/main/data/workspace/libraries_helpers.cljs +++ b/frontend/src/app/main/data/workspace/libraries_helpers.cljs @@ -1367,9 +1367,6 @@ attr-group (get ctk/sync-attrs attr)] - (and (not= (get origin-shape attr) (get dest-shape attr)) - (or (not (touched attr-group)) (not omit-touched?))) - (if (or (= (get origin-shape attr) (get dest-shape attr)) (and (touched attr-group) omit-touched?)) (recur (next attrs) @@ -1380,18 +1377,18 @@ (conj uoperations uoperation))))))))) (defn- propagate-attrs - "Helper that puts the src-shape attributes (attrs) into tgt-shape but only if + "Helper that puts the origin attributes (attrs) into dest but only if not touched the group or if omit-touched? flag is true" - [tgt-shape src-shape attrs omit-touched?] - (let [touched (get tgt-shape :touched #{})] + [dest origin attrs omit-touched?] + (let [touched (get dest :touched #{})] (->> attrs (reduce - (fn [tgt-shape attr] + (fn [dest attr] (let [attr-group (get ctk/sync-attrs attr)] - (cond-> tgt-shape + (cond-> dest (or (not (touched attr-group)) (not omit-touched?)) - (assoc attr (get src-shape attr))))) - tgt-shape)))) + (assoc attr (get origin attr))))) + dest)))) (defn- update-flex-child-copy-attrs "Synchronizes the attributes inside the flex-child items (main->copy)" 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 eb71a9392..93490738f 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 @@ -24,6 +24,9 @@ .layout-options { width: $s-92; } + .layout-option { + white-space: nowrap; + } .remove-layout, .add-layout { @extend .button-tertiary; From c17d2c1abae3684b257b82ba03d901bb290c35bb Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 8 Feb 2024 18:13:51 +0100 Subject: [PATCH 6/7] :bug: Fix problems when moving shapes in layouts --- common/src/app/common/types/container.cljc | 18 ++++++++++-------- .../app/main/data/workspace/transforms.cljs | 7 ++++++- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/common/src/app/common/types/container.cljc b/common/src/app/common/types/container.cljc index 258f7cb73..1361cb1eb 100644 --- a/common/src/app/common/types/container.cljc +++ b/common/src/app/common/types/container.cljc @@ -428,12 +428,14 @@ comps-nesting-loop?))) (defn find-valid-parent-and-frame-ids - "Navigate trough the ancestors until find one that is valid" + "Navigate trough the ancestors until find one that is valid. Returns [ parent-id frame-id ]" [parent-id objects children] - (let [parent (get objects parent-id)] - (if (invalid-structure-for-component? objects parent children) - (find-valid-parent-and-frame-ids (:parent-id parent) objects children) - [parent-id - (if (= :frame (:type parent)) - parent-id - (:frame-id parent))]))) + (letfn [(get-frame [parent-id] + (if (cfh/frame-shape? objects parent-id) parent-id (get-in objects [parent-id :frame-id])))] + (let [parent (get objects parent-id) + ;; We can always move the children to the parent they already have + no-changes? + (->> children (every? #(= parent-id (:parent-id %))))] + (if (or no-changes? (not (invalid-structure-for-component? objects parent children))) + [parent-id (get-frame parent-id)] + (recur (:parent-id parent) objects children))))) diff --git a/frontend/src/app/main/data/workspace/transforms.cljs b/frontend/src/app/main/data/workspace/transforms.cljs index f47b71b60..fb81c4d74 100644 --- a/frontend/src/app/main/data/workspace/transforms.cljs +++ b/frontend/src/app/main/data/workspace/transforms.cljs @@ -511,7 +511,11 @@ objects (wsh/lookup-page-objects state page-id) selected (wsh/lookup-selected state {:omit-blocked? true}) ids (if (nil? ids) selected ids) - shapes (mapv #(get objects %) ids) + shapes (into [] + (comp (map (d/getf objects)) + (remove ctk/in-component-copy-not-head?)) + ids) + duplicate-move-started? (get-in state [:workspace-local :duplicate-move-started?] false) stopper (->> stream @@ -670,6 +674,7 @@ {:keys [layout-grid-cells]} (->> children + (remove #(ctk/in-component-copy-not-head? (get objects %))) (keep #(ctl/get-cell-by-shape-id parent %)) (sort-by key-prop key-comp) (reduce (fn [parent {:keys [id row column row-span column-span]}] From 9f6b82dfc0a6b87776ef3e13179df161cd292b54 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 9 Feb 2024 13:08:49 +0100 Subject: [PATCH 7/7] :bug: Fix problem with changes files --- .../src/app/common/files/changes_builder.cljc | 14 ++- .../data/workspace/libraries_helpers.cljs | 96 ++++++++++--------- 2 files changed, 59 insertions(+), 51 deletions(-) diff --git a/common/src/app/common/files/changes_builder.cljc b/common/src/app/common/files/changes_builder.cljc index a11dc13f1..f5d1cf201 100644 --- a/common/src/app/common/files/changes_builder.cljc +++ b/common/src/app/common/files/changes_builder.cljc @@ -41,7 +41,9 @@ (let [changes (empty-changes origin)] (with-meta changes {::page-id page-id}))) - + ([] + {:redo-changes [] + :undo-changes '()}) ([origin] {:redo-changes [] :undo-changes '() @@ -109,13 +111,9 @@ (defn concat-changes [changes1 changes2] - {:redo-changes (d/concat-vec (:redo-changes changes1) - (:redo-changes changes2)) - :undo-changes (concat (:undo-changes changes1) - (:undo-changes changes2)) - :origin (:origin changes1) - :undo-group (:undo-group changes1) - :tags (:tags changes1)}) + (-> changes1 + (update :redo-changes d/concat-vec (:redo-changes changes2)) + (update :undo-changes d/concat-vec (:undo-changes changes2)))) ; TODO: remove this when not needed (defn- assert-page-id! diff --git a/frontend/src/app/main/data/workspace/libraries_helpers.cljs b/frontend/src/app/main/data/workspace/libraries_helpers.cljs index c455bd585..5a66ab309 100644 --- a/frontend/src/app/main/data/workspace/libraries_helpers.cljs +++ b/frontend/src/app/main/data/workspace/libraries_helpers.cljs @@ -1393,30 +1393,35 @@ (defn- update-flex-child-copy-attrs "Synchronizes the attributes inside the flex-child items (main->copy)" [changes _shape-main shape-copy main-container main-component copy-container omit-touched?] - (-> changes - (pcb/with-container copy-container) - (pcb/with-objects (:objects copy-container)) - (pcb/update-shapes - (:shapes shape-copy) - (fn [child-copy] - (let [child-main (ctf/get-ref-shape main-container main-component child-copy)] - (-> child-copy - (propagate-attrs child-main ctk/swap-keep-attrs omit-touched?)))) - {:ignore-touched true}))) + (let [do-changes + (fn [cc] + (-> cc + (pcb/with-container copy-container) + (pcb/with-objects (:objects copy-container)) + (pcb/update-shapes + (:shapes shape-copy) + (fn [child-copy] + (let [child-main (ctf/get-ref-shape main-container main-component child-copy)] + (-> child-copy + (propagate-attrs child-main ctk/swap-keep-attrs omit-touched?)))) + {:ignore-touched true})))] + (pcb/concat-changes changes (do-changes (pcb/empty-changes))))) (defn- update-flex-child-main-attrs "Synchronizes the attributes inside the flex-child items (copy->main)" [changes shape-main shape-copy main-container copy-container omit-touched?] - (-> changes - (pcb/with-page main-container) - (pcb/with-objects (:objects main-container)) - (pcb/update-shapes - (:shapes shape-main) - (fn [child-main] - (let [child-copy (ctf/get-shape-in-copy copy-container child-main shape-copy)] - (-> child-main - (propagate-attrs child-copy ctk/swap-keep-attrs omit-touched?)))) - {:ignore-touched true}))) + (let [new-changes + (-> (pcb/empty-changes) + (pcb/with-page main-container) + (pcb/with-objects (:objects main-container)) + (pcb/update-shapes + (:shapes shape-main) + (fn [child-main] + (let [child-copy (ctf/get-shape-in-copy copy-container child-main shape-copy)] + (-> child-main + (propagate-attrs child-copy ctk/swap-keep-attrs omit-touched?)))) + {:ignore-touched true}))] + (pcb/concat-changes changes new-changes))) (defn- update-grid-copy-attrs "Synchronizes the `layout-grid-cells` property from the main shape to the copies" @@ -1429,19 +1434,21 @@ (fn [copy-shape] (let [main-shape (ctf/get-ref-shape main-container main-component copy-shape)] [(:id main-shape) (:id copy-shape)])))) - (:shapes shape-copy))] + (:shapes shape-copy)) - (-> changes - (pcb/with-container copy-container) - (pcb/with-objects (:objects copy-container)) - (pcb/update-shapes - [(:id shape-copy)] - (fn [shape-copy] - ;; Take cells from main and remap the shapes to assign it to the copy - (let [copy-cells (:layout-grid-cells shape-copy) - main-cells (-> (ctl/remap-grid-cells shape-main ids-map) :layout-grid-cells)] - (assoc shape-copy :layout-grid-cells (ctl/merge-cells copy-cells main-cells omit-touched?)))) - {:ignore-touched true})))) + new-changes + (-> (pcb/empty-changes) + (pcb/with-container copy-container) + (pcb/with-objects (:objects copy-container)) + (pcb/update-shapes + [(:id shape-copy)] + (fn [shape-copy] + ;; Take cells from main and remap the shapes to assign it to the copy + (let [copy-cells (:layout-grid-cells shape-copy) + main-cells (-> (ctl/remap-grid-cells shape-main ids-map) :layout-grid-cells)] + (assoc shape-copy :layout-grid-cells (ctl/merge-cells copy-cells main-cells omit-touched?)))) + {:ignore-touched true}))] + (pcb/concat-changes changes new-changes))) (defn- update-grid-main-attrs "Synchronizes the `layout-grid-cells` property from the copy to the main shape" @@ -1454,17 +1461,20 @@ (fn [main-shape] (let [copy-shape (ctf/get-shape-in-copy copy-container main-shape shape-copy)] [(:id copy-shape) (:id main-shape)])))) - (:shapes shape-main))] - (-> changes - (pcb/with-page main-container) - (pcb/with-objects (:objects main-container)) - (pcb/update-shapes - [(:id shape-main)] - (fn [shape-main] - ;; Take cells from copy and remap the shapes to assign it to the copy - (let [new-cells (-> (ctl/remap-grid-cells shape-copy ids-map) :layout-grid-cells)] - (assoc shape-main :layout-grid-cells new-cells))) - {:ignore-touched true})))) + (:shapes shape-main)) + + new-changes + (-> (pcb/empty-changes) + (pcb/with-page main-container) + (pcb/with-objects (:objects main-container)) + (pcb/update-shapes + [(:id shape-main)] + (fn [shape-main] + ;; Take cells from copy and remap the shapes to assign it to the copy + (let [new-cells (-> (ctl/remap-grid-cells shape-copy ids-map) :layout-grid-cells)] + (assoc shape-main :layout-grid-cells new-cells))) + {:ignore-touched true}))] + (pcb/concat-changes changes new-changes))) (defn- reposition-shape [shape origin-root dest-root]