From 3b8c3647faf220460057d3e15418e45470c22b5c Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 2 Jun 2023 12:26:33 +0200 Subject: [PATCH] :bug: Fix problem with undefined gaps --- common/src/app/common/types/shape/layout.cljc | 5 ++-- .../app/main/data/workspace/shape_layout.cljs | 12 ++++++--- frontend/src/app/main/ui/measurements.cljs | 5 ++-- .../options/menus/layout_container.cljs | 25 +++++++++++-------- .../src/app/main/ui/workspace/viewport.cljs | 4 +-- 5 files changed, 29 insertions(+), 22 deletions(-) diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index 6ae3ca0ed..f873a111e 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -8,6 +8,7 @@ (:require [app.common.data :as d] [app.common.data.macros :as dm] + [app.common.math :as mth] [app.common.spec :as us] [app.common.uuid :as uuid] [clojure.spec.alpha :as s])) @@ -262,8 +263,8 @@ (defn gaps [{:keys [layout-gap]}] - (let [layout-gap-row (or (-> layout-gap :row-gap) 0) - layout-gap-col (or (-> layout-gap :column-gap) 0)] + (let [layout-gap-row (or (-> layout-gap :row-gap (mth/finite 0)) 0) + layout-gap-col (or (-> layout-gap :column-gap (mth/finite 0)) 0)] [layout-gap-row layout-gap-col])) (defn child-min-width diff --git a/frontend/src/app/main/data/workspace/shape_layout.cljs b/frontend/src/app/main/data/workspace/shape_layout.cljs index fe798b11f..e235137a8 100644 --- a/frontend/src/app/main/data/workspace/shape_layout.cljs +++ b/frontend/src/app/main/data/workspace/shape_layout.cljs @@ -126,8 +126,10 @@ all-width (->> selrects (map :width) (reduce +)) - column-gap (if (or (= direction :row) (= direction :row-reverse)) - (/ (- (- max-x min-x) all-width) (dec (count shapes))) + column-gap (if (and (> (count shapes) 1) + (or (= direction :row) (= direction :row-reverse))) + (/ (- (- max-x min-x) all-width) + (dec (count shapes))) 0) min-y (->> selrects @@ -139,8 +141,10 @@ all-height (->> selrects (map :height) (reduce +)) - row-gap (if (or (= direction :column) (= direction :column-reverse)) - (/ (- (- max-y min-y) all-height) (dec (count shapes))) + row-gap (if (and (> (count shapes) 1) + (or (= direction :column) (= direction :column-reverse))) + (/ (- (- max-y min-y) all-height) + (dec (count shapes))) 0) layout-gap {:row-gap (max row-gap 0) :column-gap (max column-gap 0)} diff --git a/frontend/src/app/main/ui/measurements.cljs b/frontend/src/app/main/ui/measurements.cljs index 26fe1bb46..d2da470a7 100644 --- a/frontend/src/app/main/ui/measurements.cljs +++ b/frontend/src/app/main/ui/measurements.cljs @@ -290,7 +290,6 @@ [:text {:x (+ x (/ width 2)) :y (+ y (/ height 2)) :text-anchor "middle" - :text-align "center" :dominant-baseline "central" :style {:fill distance-text-color :font-size font-size}} @@ -352,8 +351,8 @@ [:rect.padding-rect {:x (:x rect-data) :y (:y rect-data) - :width (:width rect-data) - :height (:height rect-data) + :width (max 0 (:width rect-data)) + :height (max 0 (:height rect-data)) :on-pointer-enter on-pointer-enter :on-pointer-leave on-pointer-leave :on-pointer-down on-pointer-down 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 ac624f7b4..715f34cef 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 @@ -8,6 +8,7 @@ (:require [app.common.data :as d] [app.common.data.macros :as dm] + [app.common.math :as mth] [app.main.data.workspace :as udw] [app.main.data.workspace.shape-layout :as dwsl] [app.main.refs :as refs] @@ -337,7 +338,7 @@ i/auto-gap] [:> numeric-input {:no-validate true :placeholder "--" - :on-focus (fn [event] + :on-focus (fn [event] (select-gap :column-gap) (reset! gap-selected? :column-gap) (dom/select-target event)) @@ -535,9 +536,10 @@ set-gap (fn [gap-multiple? type val] - (if gap-multiple? - (st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}})) - (st/emit! (dwsl/update-layout ids {:layout-gap {type val}})))) + (let [val (mth/finite val 0)] + (if gap-multiple? + (st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}})) + (st/emit! (dwsl/update-layout ids {:layout-gap {type val}}))))) ;; Padding @@ -547,15 +549,16 @@ on-padding-change (fn [type prop val] - (cond - (and (= type :simple) (= prop :p1)) - (st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p3 val}})) + (let [val (mth/finite val 0)] + (cond + (and (= type :simple) (= prop :p1)) + (st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p3 val}})) - (and (= type :simple) (= prop :p2)) - (st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}})) + (and (= type :simple) (= prop :p2)) + (st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}})) - :else - (st/emit! (dwsl/update-layout ids {:layout-padding {prop val}})))) + :else + (st/emit! (dwsl/update-layout ids {:layout-padding {prop val}}))))) ;; Grid-direction diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index f96c44b68..a95204707 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -543,8 +543,8 @@ [:clipPath {:id "clip-handlers"} [:rect {:x (+ (:x vbox) rule-area-size) :y (+ (:y vbox) rule-area-size) - :width (- (:width vbox) (* rule-area-size 2)) - :height (- (:height vbox) (* rule-area-size 2))}]])] + :width (max 0 (- (:width vbox) (* rule-area-size 2))) + :height (max 0 (- (:height vbox) (* rule-area-size 2)))}]])] [:& selection/selection-handlers {:selected selected