From 39b41d7037a4d4dcf6cb20f8305329a895daacb5 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 7 Dec 2023 11:53:02 +0100 Subject: [PATCH] :sparkles: Reorder grid tracks moving content --- common/src/app/common/types/shape/layout.cljc | 75 ++++++++++++++++--- .../app/main/data/workspace/shape_layout.cljs | 6 +- frontend/src/app/main/ui/formats.cljs | 9 +++ frontend/src/app/main/ui/hooks.cljs | 2 +- .../options/menus/layout_container.cljs | 16 ++-- 5 files changed, 88 insertions(+), 20 deletions(-) diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index 5427519bc..358f94669 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -705,8 +705,9 @@ (update :layout-grid-cells update-cells) (assign-cells)))) -(defn- reorder-grid-track - [prop parent from-index to-index] +(defn- reorder-grid-tracks + "Swap the positions of the tracks info" + [parent prop from-index to-index] (-> parent (update prop @@ -720,13 +721,70 @@ (d/insert-at-index (inc to-index) [[nil tr]]) (d/vec-without-nils)))))))) +(defn- swap-track-content + "Swap the shapes contained in the given tracks moves as necessary the others." + [parent prop from-track to-track] + (let [remap-tracks + (cond + (> from-track to-track) + (into {from-track to-track} + (map #(vector % (inc %))) + (range to-track from-track)) + (< from-track to-track) + (into {from-track to-track} + (map #(vector % (dec %))) + (range (inc from-track) (inc to-track))))] + (-> parent + (update + :layout-grid-cells + update-vals + (fn [cell] (update cell prop #(get remap-tracks % %))))))) + +(declare resize-cell-area) +(declare cells-by-column) +(declare cells-by-row) + +(defn- reorder-grid-track + [parent from-index to-index move-content? cells-by tracks-props prop prop-span] + (let [from-track (inc from-index) + to-track (if (< to-index from-index) + (+ to-index 2) + (inc to-index)) + move-content? + (and move-content? (not= from-track to-track)) + + parent + (if move-content? + (->> (concat (cells-by parent (dec from-track)) + (cells-by parent (dec to-track))) + (reduce (fn [parent cell] + (cond-> parent + (and (> (get cell prop-span) 1) + (or (> to-track from-track) (not (= to-track (get cell prop)))) + (or (< to-track from-track) (not (= to-track (+ (get cell prop) (dec (get cell prop-span))))))) + (resize-cell-area + (:row cell) + (:column cell) + (:row cell) + (:column cell) + (if (= prop :row) 1 (:row-span cell)) + (if (= prop :column) 1 (:column-span cell))))) + parent)) + parent) + + parent + (reorder-grid-tracks parent tracks-props from-index to-index)] + (cond-> parent + move-content? + (swap-track-content prop from-track to-track)))) + (defn reorder-grid-column - [parent from-index to-index] - (reorder-grid-track :layout-grid-columns parent from-index to-index)) + [parent from-index to-index move-content?] + (reorder-grid-track parent from-index to-index move-content? cells-by-column :layout-grid-columns :column :column-span)) (defn reorder-grid-row - [parent from-index to-index] - (reorder-grid-track :layout-grid-rows parent from-index to-index)) + [parent from-index to-index move-content?] + (reorder-grid-track parent from-index to-index move-content? cells-by-row :layout-grid-rows :row :row-span)) (defn cells-seq [{:keys [layout-grid-cells layout-grid-dir]} & {:keys [sort?] :or {sort? false}}] @@ -992,9 +1050,8 @@ (defn resize-cell-area "Increases/decreases the cell size" [parent row column new-row new-column new-row-span new-column-span] - - (if (and (>= new-row 0) - (>= new-column 0) + (if (and (>= new-row 1) + (>= new-column 1) (>= new-row-span 1) (>= new-column-span 1)) (let [prev-cell (cell-by-row-column parent row column) diff --git a/frontend/src/app/main/data/workspace/shape_layout.cljs b/frontend/src/app/main/data/workspace/shape_layout.cljs index 0bdc1e582..c0295a181 100644 --- a/frontend/src/app/main/data/workspace/shape_layout.cljs +++ b/frontend/src/app/main/data/workspace/shape_layout.cljs @@ -285,7 +285,7 @@ (dwu/commit-undo-transaction undo-id)))))) (defn reorder-layout-track - [ids type from-index to-index] + [ids type from-index to-index move-content?] (assert (#{:row :column} type)) (ptk/reify ::reorder-layout-track @@ -297,8 +297,8 @@ ids (fn [shape] (case type - :row (ctl/reorder-grid-row shape from-index to-index) - :column (ctl/reorder-grid-column shape from-index to-index)))) + :row (ctl/reorder-grid-row shape from-index to-index move-content?) + :column (ctl/reorder-grid-column shape from-index to-index move-content?)))) (ptk/data-event :layout/update ids) (dwu/commit-undo-transaction undo-id)))))) diff --git a/frontend/src/app/main/ui/formats.cljs b/frontend/src/app/main/ui/formats.cljs index a11c12f84..eb9f2fc52 100644 --- a/frontend/src/app/main/ui/formats.cljs +++ b/frontend/src/app/main/ui/formats.cljs @@ -21,6 +21,15 @@ (let [percent-val (mth/precision (* value 100) precision)] (dm/str percent-val "%")))))) +(defn format-frs + ([value] + (format-frs value nil)) + ([value {:keys [precision] :or {precision 2}}] + (let [value (if (string? value) (d/parse-double value) value)] + (when (d/num? value) + (let [value (mth/precision value precision)] + (dm/str value "fr")))))) + (defn format-number ([value] (format-number value nil)) diff --git a/frontend/src/app/main/ui/hooks.cljs b/frontend/src/app/main/ui/hooks.cljs index f1f607729..d15a87185 100644 --- a/frontend/src/app/main/ui/hooks.cljs +++ b/frontend/src/app/main/ui/hooks.cljs @@ -171,7 +171,7 @@ (cleanup) (rx/push! global-drag-end nil) (when (fn? on-drop) - (on-drop side drop-data)))) + (on-drop side drop-data event)))) on-drag-end (fn [event] 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 315c62401..a2f0764f4 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 @@ -24,10 +24,12 @@ [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.context :as ctx] + [app.main.ui.formats :as fmt] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] + [app.util.keyboard :as kbd] [cuerdas.core :as str] [rumext.v2 :as mf])) @@ -951,9 +953,9 @@ (defn manage-values [{:keys [value type]}] (case type :auto "auto" - :percent (dm/str value "%") - :flex (dm/str value "fr") - :fixed (dm/str value "px") + :percent (fmt/format-percent value) + :flex (fmt/format-frs value) + :fixed (fmt/format-pixels value) value)) (mf/defc grid-track-info @@ -963,8 +965,8 @@ drop-track (mf/use-fn (mf/deps type reorder-track index) - (fn [drop-position data] - (reorder-track type (:index data) (if (= :top drop-position) (dec index) index)))) + (fn [drop-position data event] + (reorder-track type (:index data) (if (= :top drop-position) (dec index) index) (kbd/mod? event)))) pointer-enter (mf/use-fn @@ -1688,8 +1690,8 @@ reorder-track (mf/use-fn (mf/deps ids) - (fn [type from-index to-index] - (st/emit! (dwsl/reorder-layout-track ids type from-index to-index)))) + (fn [type from-index to-index move-content?] + (st/emit! (dwsl/reorder-layout-track ids type from-index to-index move-content?)))) hover-track (mf/use-fn