Merge pull request #3775 from penpot/alotor-fix-layout

Bugfixes

common/src/app/common/data.cljc

@@ -250,22 +250,25 @@
    #(patch-object % changes))
 
   ([object changes]
-   (->> changes
+   (if object
-        (reduce-kv
+     (->> changes
-         (fn [object key value]
+          (reduce-kv
-           (cond
+           (fn [object key value]
-             (map? value)
+             (cond
-             (update object key patch-object  value)
+               (map? value)
+               (let [current (get object key)]
+                 (assoc object key (patch-object current value)))
 
-             (and (nil? value) (record? object))
+               (and (nil? value) (record? object))
-             (assoc object key nil)
+               (assoc object key nil)
 
-             (nil? value)
+               (nil? value)
-             (dissoc object key value)
+               (dissoc object key value)
 
-             :else
+               :else
-             (assoc object key value)))
+               (assoc object key value)))
-         object))))
+           object))
+     changes)))
 
 (defn remove-at-index
   "Takes a vector and returns a vector with an element in the

common/src/app/common/geom/modif_tree.cljc

@@ -7,7 +7,6 @@
 (ns app.common.geom.modif-tree
   (:require
    [app.common.data.macros :as dm]
-   [app.common.geom.shapes.min-size-layout]
    [app.common.pages.helpers :as cph]
    [app.common.types.modifiers :as ctm]))
 

common/src/app/common/geom/shapes/flex_layout/layout_data.cljc

@@ -70,11 +70,8 @@
               child-max-width  (ctl/child-max-width child)
               child-max-height (ctl/child-max-height child)
 
-              [child-margin-top child-margin-right child-margin-bottom child-margin-left]
+              child-margin-width (ctl/child-width-margin child)
-              (ctl/child-margins child)
+              child-margin-height (ctl/child-height-margin child)
-
-              child-margin-width (+ child-margin-left child-margin-right)
-              child-margin-height (+ child-margin-top child-margin-bottom)
 
               fill-width?  (ctl/fill-width? child)
               fill-height? (ctl/fill-height? child)

common/src/app/common/geom/shapes/grid_layout/layout_data.cljc

@@ -61,13 +61,15 @@
 
 (defn child-min-width
   [child child-bounds bounds objects]
-  (-child-min-width child child-bounds bounds objects))
+  (+ (ctl/child-width-margin child)
+     (-child-min-width child child-bounds bounds objects)))
 
 (def -child-min-height nil)
 
 (defn child-min-height
   [child child-bounds bounds objects]
-  (-child-min-height child child-bounds bounds objects))
+  (+ (ctl/child-height-margin child)
+     (-child-min-height child child-bounds bounds objects)))
 
 (defn layout-bounds
   [parent shape-bounds]

common/src/app/common/geom/shapes/min_size_layout.cljc

@@ -17,53 +17,53 @@
 
 (defn child-min-width
   [child child-bounds bounds objects]
-  (let [min-width
+  (cond
-        (cond
+    (and (ctl/fill-width? child) (ctl/flex-layout? child))
-          (and (ctl/fill-width? child) (ctl/flex-layout? child))
+    (ctl/child-min-width child)
-          (let [children (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})]
+    ;; Uncomment this to activate "auto" as min size
-            (max (ctl/child-min-width child)
+    #_(let [children (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})]
-                 (gpo/width-points (fb/layout-content-bounds bounds child children objects))))
+      (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
-                (->> (cph/get-immediate-children objects (:id child) {:remove-hidden true})
-                     (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)
-                 (gpo/width-points (gb/layout-content-bounds bounds child layout-data))))
-          
-          (ctl/fill-width? child)
-          (ctl/child-min-width child)
 
-          :else
+    (and (ctl/fill-width? child)
-          (gpo/width-points child-bounds))]
+         (ctl/grid-layout? child))
-    (+ min-width (ctl/child-width-margin child))))
+    (let [children
+          (->> (cph/get-immediate-children objects (:id child) {:remove-hidden true})
+               (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)
+           (gpo/width-points (gb/layout-content-bounds bounds child layout-data))))
+
+    (ctl/fill-width? child)
+    (ctl/child-min-width child)
+
+    :else
+    (gpo/width-points child-bounds)))
 
 (defn child-min-height
   [child child-bounds bounds objects]
-  (let [min-height
+  (cond
-        (cond
+    (and (ctl/fill-height? child) (ctl/flex-layout? child))
-          (and (ctl/fill-height? child) (ctl/flex-layout? child))
+    ;; Uncomment this to activate "auto" as min size
-          (let [children (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})]
+    (ctl/child-min-height child)
-            (max (ctl/child-min-height child)
+    #_(let [children (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})]
-                 (gpo/height-points (fb/layout-content-bounds bounds child children objects))))
+      (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
-                (->> (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})
-                     (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)]
-            (max (ctl/child-min-height child)
-                 (gpo/height-points auto-bounds)))
-          
-          (ctl/fill-height? child)
-          (ctl/child-min-height child)
 
-          :else
+    (and (ctl/fill-height? child) (ctl/grid-layout? child))
-          (gpo/height-points child-bounds))]
+    (let [children
-    (+ min-height (ctl/child-height-margin child))))
+          (->> (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})
+               (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)]
+      (max (ctl/child-min-height child)
+           (gpo/height-points auto-bounds)))
+
+    (ctl/fill-height? child)
+    (ctl/child-min-height child)
+
+    :else
+    (gpo/height-points child-bounds)))
 
 #?(:cljs
    (do (set! fd/-child-min-width child-min-width)
@@ -80,4 +80,3 @@
        (alter-var-root #'fb/-child-min-height (constantly child-min-height))
        (alter-var-root #'gd/-child-min-width (constantly child-min-width))
        (alter-var-root #'gd/-child-min-height (constantly child-min-height))))
-

common/src/app/common/geom/shapes/transforms.cljc

@@ -486,7 +486,7 @@
          (transform-shape modifiers))))
 
   ([shape modifiers]
-   (if (and (some? modifiers) (not (ctm/empty? modifiers)))
+   (if (and (some? shape) (some? modifiers) (not (ctm/empty? modifiers)))
      (let [transform (ctm/modifiers->transform modifiers)]
        (cond-> shape
          (and (some? transform)

common/src/app/common/geom/shapes/tree_seq.cljc

@@ -8,7 +8,6 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
-   [app.common.geom.shapes.min-size-layout]
    [app.common.pages.helpers :as cph]
    [app.common.types.shape.layout :as ctl]
    [app.common.uuid :as uuid]))

frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs

@@ -30,15 +30,20 @@
    [rumext.v2 :as mf]))
 
 (defn fix-position [shape]
-  (let [modifiers (:modifiers shape)
+  (if-let [modifiers (:modifiers shape)]
-        shape' (gsh/transform-shape shape modifiers)
+    (let [shape' (gsh/transform-shape shape modifiers)
-        ;; We need to remove the movement because the dynamic modifiers will have move it
+
-        deltav (gpt/to-vec (gpt/point (:selrect shape'))
+          old-sr (dm/get-prop shape :selrect)
-                           (gpt/point (:selrect shape)))]
+          new-sr (dm/get-prop shape' :selrect)
-    (-> shape
+
-        (gsh/transform-shape (ctm/move modifiers deltav))
+          ;; We need to remove the movement because the dynamic modifiers will have move it
-        (mdwm/update-grow-type shape)
+          deltav (gpt/to-vec (gpt/point new-sr)
-        (dissoc :modifiers))))
+                             (gpt/point old-sr))]
+      (-> shape
+          (gsh/transform-shape (ctm/move modifiers deltav))
+          (mdwm/update-grow-type shape)
+          (dissoc :modifiers)))
+    shape))
 
 (defn- update-with-editor-state
   "Updates the shape with the current state in the editor"

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs

@@ -377,12 +377,18 @@
              :on-blur on-blur}])]
 
         [:div {:class (stl/css :font-variant-options)}
-         (let [basic-variant-options (map (fn [variant]
+         (let [basic-variant-options (->> (:variants font)
-                                            {:value (:id variant) :key (pr-str variant) :label (:name variant)}) (:variants font))
+                                          (map (fn [variant]
+                                                 {:value (:id variant)
+                                                  :key (pr-str variant)
+                                                  :label (:name variant)}) ))
                variant-options (if (= font-size :multiple)
-                                 (conj {:value :multiple :key :multiple-variants :label "--"} basic-variant-options)
+                                 (conj basic-variant-options
+                                       {:value :multiple
+                                        :key :multiple-variants
+                                        :label "--"} )
                                  basic-variant-options)]
-          ;;  TODO Add disabled mode
+           ;;  TODO Add disabled mode
            [:& select
             {:class (stl/css :font-variant-select)
              :default-value (attr->string font-variant-id)

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -226,7 +226,8 @@
                                       (not node-editing?)
                                       (or show-distances? mode-inspect?))
         show-artboard-names?     (contains? layout :display-artboard-names)
-        show-rules?              (and (contains? layout :rules) (not (contains? layout :hide-ui)))
+        hide-ui?                 (contains? layout :hide-ui)
+        show-rules?              (and (contains? layout :rules) (not hide-ui?))
 
 
         disabled-guides?         (or drawing-tool transform)
@@ -525,14 +526,15 @@
          :zoom zoom
          :vbox vbox}]
 
-       (when show-rules?
+       (when-not hide-ui?
          [:& rules/rules
           {:zoom zoom
            :zoom-inverse zoom-inverse
            :vbox vbox
            :selected-shapes selected-shapes
            :offset-x offset-x
-           :offset-y offset-y}])
+           :offset-y offset-y
+           :show-rules? show-rules?}])
 
        (when show-rules?
          [:& guides/viewport-guides

frontend/src/app/main/ui/workspace/viewport/rules.cljs

@@ -156,33 +156,12 @@
   (let [rules-width (* rules-width zoom-inverse)
         step (calculate-step-size zoom)
         clip-id (str "clip-rule-" (d/name axis))
-        new-css-system (mf/use-ctx ctx/new-css-system)
+        new-css-system  (mf/use-ctx ctx/new-css-system)
-        rules-background (if new-css-system new-css-rules-background rules-background)
+        font-color (if new-css-system new-css-font-color font-color)]
-        font-color (if new-css-system new-css-font-color font-color)
-        rule-area-size (/ rule-area-size zoom)
-        border-radius (/ new-css-canvas-border-radius zoom)]
 
     [:*
      (let [{:keys [x y width height]} (get-background-area vbox zoom-inverse axis)]
-       [:*
+       [:rect {:x x :y y :width width :height height :style {:fill rules-background}}])
-        [:rect {:x x :y y :width width :height height :style {:fill rules-background}}]
-
-        ;; Draw the rules' rounded corners in the viewport corners
-        (when new-css-system
-          (if (= axis :x)
-            [:*
-             [:path {:d (round-corner-path-tl (+ x rule-area-size) (+ y rule-area-size) border-radius)
-                     :style {:fill rules-background}}]
-
-             [:path {:d (round-corner-path-tr (+ x width (- border-radius)) (+ y rule-area-size) border-radius)
-                     :style {:fill rules-background}}]]
-
-            [:*
-             [:path {:d (round-corner-path-bl (+ x rule-area-size) (+ y height (- border-radius)) border-radius)
-                     :style {:fill rules-background}}]
-
-             [:path {:d (round-corner-path-br (+ x (:width vbox) (- border-radius)) (+ y height (- border-radius)) border-radius)
-                     :style {:fill rules-background}}]]))])
 
      [:g.rules {:clipPath (str "url(#" clip-id ")")}
 
@@ -315,7 +294,7 @@
 
 (mf/defc rules
   {::mf/wrap-props false
-   ::mf/wrap [#(mf/memo' % (mf/check-props ["zoom" "vbox" "selected-shapes"]))]}
+   ::mf/wrap [#(mf/memo' % (mf/check-props ["zoom" "vbox" "selected-shapes" "show-rules?"]))]}
   [props]
   (let [zoom            (obj/get props "zoom")
         zoom-inverse    (obj/get props "zoom-inverse")
@@ -324,6 +303,11 @@
         offset-y        (obj/get props "offset-y")
         selected-shapes (-> (obj/get props "selected-shapes")
                             (hooks/use-equal-memo))
+        show-rules?     (obj/get props "show-rules?")
+
+        new-css-system  (mf/use-ctx ctx/new-css-system)
+        rules-background (if new-css-system new-css-rules-background rules-background)
+        border-radius (/ new-css-canvas-border-radius zoom)
 
         selection-rect
         (mf/use-memo
@@ -333,10 +317,29 @@
 
     (when (some? vbox)
       [:g.rules {:pointer-events "none"}
-       [:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :x :offset offset-x}]
+       (when show-rules?
-       [:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :y :offset offset-y}]
+         [:*
+          [:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :x :offset offset-x}]
+          [:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :y :offset offset-y}]])
 
-       (when (some? selection-rect)
+       ;; Draw the rules' rounded corners in the viewport corners
+       (when new-css-system
+         (let [{:keys [x y width height]} vbox
+               rule-area-size (if show-rules? (/ rule-area-size zoom) 0)]
+           [:*
+            [:path {:d (round-corner-path-tl (+ x rule-area-size) (+ y rule-area-size) border-radius)
+                    :style {:fill rules-background}}]
+
+            [:path {:d (round-corner-path-tr (+ x width (- border-radius)) (+ y rule-area-size) border-radius)
+                    :style {:fill rules-background}}]
+
+            [:path {:d (round-corner-path-bl (+ x rule-area-size) (+ y height (- border-radius)) border-radius)
+                    :style {:fill rules-background}}]
+
+            [:path {:d (round-corner-path-br (+ x (:width vbox) (- border-radius)) (+ y height (- border-radius)) border-radius)
+                    :style {:fill rules-background}}]]))
+
+       (when (and show-rules? (some? selection-rect))
          [:& selection-area {:zoom zoom
                              :zoom-inverse zoom-inverse
                              :vbox vbox