From e1faba2ddc6dfa8bfffacc6c1c3852a95b767fa0 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 14 Jul 2023 15:06:50 +0200 Subject: [PATCH 1/2] :bug: Fix absolute positioned layouts not showing flex properties --- CHANGES.md | 1 + .../sidebar/options/menus/layout_item.cljs | 95 ++++++++++--------- 2 files changed, 49 insertions(+), 47 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 5ef076825..430f07ad1 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -84,6 +84,7 @@ - Fix undo when updating several texts [Taiga #5197](https://tree.taiga.io/project/penpot/issue/5197) - Fix assets right click button for multiple selection [Taiga #5545](https://tree.taiga.io/project/penpot/issue/5545) - Fix problem with precision in resizes [Taiga #5623](https://tree.taiga.io/project/penpot/issue/5623) +- Fix absolute positioned layouts not showing flex properties [Taiga #5630](https://tree.taiga.io/project/penpot/issue/5630) ### :arrow_up: Deps updates 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 e4885697a..e4ab0979a 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 @@ -227,7 +227,9 @@ on-change-z-index (fn [value] - (st/emit! (dwsl/update-layout-child ids {:layout-item-z-index value})))] + (st/emit! (dwsl/update-layout-child ids {:layout-item-z-index value}))) + + is-layout-child? (and is-layout-child? (not is-absolute?))] [:div.element-set [:div.element-set-title @@ -236,7 +238,7 @@ "Flex element")]] [:div.element-set-content.layout-item-menu - (when is-layout-child? + (when (or is-layout-child? is-absolute?) [:div.layout-row [:div.row-title.sizing "Position"] [:div.btn-wrapper @@ -262,53 +264,52 @@ :disabled (not is-absolute?) :value (:layout-item-z-index values)}]]]]) - (when (not (:layout-item-absolute values)) - [:* + [:* + [:div.layout-row + [:div.row-title.sizing "Sizing"] + [:& element-behavior {:is-layout-child? is-layout-child? + :is-layout-container? is-layout-container? + :layout-item-v-sizing (or (:layout-item-v-sizing values) :fix) + :layout-item-h-sizing (or (:layout-item-h-sizing values) :fix) + :on-change-behavior on-change-behavior}]] + + (when is-layout-child? [:div.layout-row - [:div.row-title.sizing "Sizing"] - [:& element-behavior {:is-layout-child? is-layout-child? - :is-layout-container? is-layout-container? - :layout-item-v-sizing (or (:layout-item-v-sizing values) :fix) - :layout-item-h-sizing (or (:layout-item-h-sizing values) :fix) - :on-change-behavior on-change-behavior}]] + [:div.row-title "Align"] + [:div.btn-wrapper + [:& align-self-row {:is-col? is-col? + :align-self align-self + :set-align-self set-align-self}]]]) - (when is-layout-child? - [:div.layout-row - [:div.row-title "Align"] - [:div.btn-wrapper - [:& align-self-row {:is-col? is-col? - :align-self align-self - :set-align-self set-align-self}]]]) + (when is-layout-child? + [:& margin-section {:values values + :change-margin-style change-margin-style + :on-margin-change on-margin-change}]) - (when is-layout-child? - [:& margin-section {:values values - :change-margin-style change-margin-style - :on-margin-change on-margin-change}]) + [:div.advanced-ops-body + [:div.input-wrapper + (for [item (cond-> [] + (= (:layout-item-h-sizing values) :fill) + (conj :layout-item-min-w :layout-item-max-w) - [:div.advanced-ops-body - [:div.input-wrapper - (for [item (cond-> [] - (= (:layout-item-h-sizing values) :fill) - (conj :layout-item-min-w :layout-item-max-w) + (= (:layout-item-v-sizing values) :fill) + (conj :layout-item-min-h :layout-item-max-h))] - (= (:layout-item-v-sizing values) :fill) - (conj :layout-item-min-h :layout-item-max-h))] - - [:div.tooltip.tooltip-bottom - {:key (d/name item) - :alt (tr (dm/str "workspace.options.layout-item.title." (d/name item))) - :class (dom/classnames "maxH" (= item :layout-item-max-h) - "minH" (= item :layout-item-min-h) - "maxW" (= item :layout-item-max-w) - "minW" (= item :layout-item-min-w))} - [:div.input-element - {:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))} - [:> numeric-input - {:no-validate true - :min 0 - :data-wrap true - :placeholder "--" - :on-focus #(dom/select-target %) - :on-change (partial on-size-change item) - :value (get values item) - :nillable true}]]])]]])]])) + [:div.tooltip.tooltip-bottom + {:key (d/name item) + :alt (tr (dm/str "workspace.options.layout-item.title." (d/name item))) + :class (dom/classnames "maxH" (= item :layout-item-max-h) + "minH" (= item :layout-item-min-h) + "maxW" (= item :layout-item-max-w) + "minW" (= item :layout-item-min-w))} + [:div.input-element + {:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))} + [:> numeric-input + {:no-validate true + :min 0 + :data-wrap true + :placeholder "--" + :on-focus #(dom/select-target %) + :on-change (partial on-size-change item) + :value (get values item) + :nillable true}]]])]]]]])) From f611584bb3389d710f3c15d5656ae392dd425d53 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 14 Jul 2023 14:15:11 +0200 Subject: [PATCH 2/2] :bug: Create guard for undo transactions --- .../src/app/main/data/workspace/changes.cljs | 6 ++-- .../main/data/workspace/drawing/common.cljs | 2 +- .../src/app/main/data/workspace/shapes.cljs | 4 +++ .../src/app/main/data/workspace/texts.cljs | 4 +-- .../src/app/main/data/workspace/undo.cljs | 35 +++++++++++++++++-- 5 files changed, 43 insertions(+), 8 deletions(-) diff --git a/frontend/src/app/main/data/workspace/changes.cljs b/frontend/src/app/main/data/workspace/changes.cljs index a8461f415..166538860 100644 --- a/frontend/src/app/main/data/workspace/changes.cljs +++ b/frontend/src/app/main/data/workspace/changes.cljs @@ -51,7 +51,7 @@ (defn update-shapes ([ids update-fn] (update-shapes ids update-fn nil)) - ([ids update-fn {:keys [reg-objects? save-undo? stack-undo? attrs ignore-tree page-id ignore-remote? ignore-touched] + ([ids update-fn {:keys [reg-objects? save-undo? stack-undo? attrs ignore-tree page-id ignore-remote? ignore-touched undo-group] :or {reg-objects? false save-undo? true stack-undo? false ignore-remote? false ignore-touched false}}] (dm/assert! (sm/coll-of-uuid? ids)) (dm/assert! (fn? update-fn)) @@ -78,7 +78,9 @@ (-> (pcb/empty-changes it page-id) (pcb/set-save-undo? save-undo?) (pcb/set-stack-undo? stack-undo?) - (pcb/with-objects objects)) + (pcb/with-objects objects) + (cond-> undo-group + (pcb/set-undo-group undo-group))) ids) changes (add-undo-group changes state)] (rx/concat diff --git a/frontend/src/app/main/data/workspace/drawing/common.cljs b/frontend/src/app/main/data/workspace/drawing/common.cljs index ed9790e24..6aada37a9 100644 --- a/frontend/src/app/main/data/workspace/drawing/common.cljs +++ b/frontend/src/app/main/data/workspace/drawing/common.cljs @@ -63,7 +63,7 @@ ;; Add & select the created shape to the workspace (rx/concat - (if (or (= :text (:type shape)) (= :frame (:type shape))) + (if (= :frame (:type shape)) (rx/of (dwu/start-undo-transaction (:id shape))) (rx/empty)) diff --git a/frontend/src/app/main/data/workspace/shapes.cljs b/frontend/src/app/main/data/workspace/shapes.cljs index 0ef0f39a2..11420cee3 100644 --- a/frontend/src/app/main/data/workspace/shapes.cljs +++ b/frontend/src/app/main/data/workspace/shapes.cljs @@ -114,6 +114,10 @@ [shape changes] (prepare-add-shape changes attrs objects selected) + changes (cond-> changes + (cph/text-shape? shape) + (pcb/set-undo-group (:id shape))) + undo-id (js/Symbol)] (rx/concat diff --git a/frontend/src/app/main/data/workspace/texts.cljs b/frontend/src/app/main/data/workspace/texts.cljs index 2f002f7c9..c17e5448c 100644 --- a/frontend/src/app/main/data/workspace/texts.cljs +++ b/frontend/src/app/main/data/workspace/texts.cljs @@ -156,8 +156,8 @@ (cond-> new-shape? (assoc :name text)) (cond-> (or (some? width) (some? height)) - (gsh/transform-shape (ctm/change-size shape width height))))))) - (dwu/commit-undo-transaction (:id shape)))))) + (gsh/transform-shape (ctm/change-size shape width height)))))) + {:undo-group (when new-shape? id)}))))) (when (some? id) (rx/of (dws/deselect-shape id) diff --git a/frontend/src/app/main/data/workspace/undo.cljs b/frontend/src/app/main/data/workspace/undo.cljs index e552cb50a..f41f97287 100644 --- a/frontend/src/app/main/data/workspace/undo.cljs +++ b/frontend/src/app/main/data/workspace/undo.cljs @@ -11,8 +11,12 @@ [app.common.logging :as log] [app.common.pages.changes :as cpc] [app.common.schema :as sm] + [app.util.time :as dt] + [beicon.core :as rx] [potok.core :as ptk])) +(def discard-transaction-time-millis (* 20 1000)) + ;; Change this to :info :debug or :trace to debug this module (log/set-level! :warn) @@ -107,10 +111,18 @@ (def empty-tx {:undo-changes [] :redo-changes []}) +(declare check-open-transactions) + (defn start-undo-transaction "Start a transaction, so that every changes inside are added together in a single undo entry." [id] (ptk/reify ::start-undo-transaction + ptk/WatchEvent + (watch [_ _ _] + (->> (rx/of (check-open-transactions)) + ;; Wait the configured time + (rx/delay discard-transaction-time-millis))) + ptk/UpdateEvent (update [_ state] (log/info :msg "start-undo-transaction") @@ -120,21 +132,24 @@ (cond-> state (nil? current-tx) (assoc-in [:workspace-undo :transaction] empty-tx) (nil? pending-tx) (assoc-in [:workspace-undo :transactions-pending] #{id}) - (some? pending-tx) (update-in [:workspace-undo :transactions-pending] conj id)))))) + (some? pending-tx) (update-in [:workspace-undo :transactions-pending] conj id) + :always (update-in [:workspace-undo :transactions-pending-ts] assoc id (dt/now))))))) (defn discard-undo-transaction [] (ptk/reify ::discard-undo-transaction ptk/UpdateEvent (update [_ state] (log/info :msg "discard-undo-transaction") - (update state :workspace-undo dissoc :transaction :transactions-pending)))) + (update state :workspace-undo dissoc :transaction :transactions-pending :transactions-pending-ts)))) (defn commit-undo-transaction [id] (ptk/reify ::commit-undo-transaction ptk/UpdateEvent (update [_ state] (log/info :msg "commit-undo-transaction") - (let [state (update-in state [:workspace-undo :transactions-pending] disj id)] + (let [state (-> state + (update-in [:workspace-undo :transactions-pending] disj id) + (update-in [:workspace-undo :transactions-pending-ts] dissoc id))] (if (empty? (get-in state [:workspace-undo :transactions-pending])) (-> state (add-undo-entry (get-in state [:workspace-undo :transaction])) @@ -147,3 +162,17 @@ (update [_ state] (assoc state :workspace-undo {})))) +(defn check-open-transactions + [] + (ptk/reify ::check-open-transactions + ptk/WatchEvent + (watch [_ state _] + (log/info :msg "check-open-transactions") + (let [pending-ts (-> (dm/get-in state [:workspace-undo :transactions-pending-ts]) + (update-vals #(.toMillis (dt/diff (dt/now) %))))] + (->> pending-ts + (filter (fn [[_ ts]] (>= ts discard-transaction-time-millis))) + (rx/from) + (rx/tap #(js/console.warn (dm/str "FORCE COMMIT TRANSACTION AFTER " (second %) "MS"))) + (rx/map first) + (rx/map commit-undo-transaction))))))