Merge pull request #3273 from penpot/alotor-fix-gap

🐛 Fix problem with undefined gaps

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

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)}

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

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
 

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