Merge pull request #2841 from penpot/alotor-polishing-11

Polishing

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

@@ -87,11 +87,27 @@
   (let [parent-id (:id parent)
         parent-bounds @(get bounds parent-id)
 
+        row?            (ctl/row? parent)
+        col?            (ctl/col? parent)
+        space-around?   (ctl/space-around? parent)
+        content-around? (ctl/content-around? parent)
+        [layout-gap-row layout-gap-col] (ctl/gaps parent)
+
+        row-pad (if (or (and col? space-around?)
+                        (and row? content-around?))
+                  layout-gap-row
+                  0)
+
+        col-pad (if (or(and row? space-around?)
+                       (and col? content-around?))
+                  layout-gap-col
+                  0)
+
         {pad-top :p1 pad-right :p2 pad-bottom :p3 pad-left :p4} layout-padding
-        pad-top    (or pad-top 0)
+        pad-top    (+ (or pad-top 0) row-pad)
-        pad-right  (or pad-right 0)
+        pad-right  (+ (or pad-right 0) col-pad)
-        pad-bottom (or pad-bottom 0)
+        pad-bottom (+ (or pad-bottom 0) row-pad)
-        pad-left   (or pad-left 0)
+        pad-left   (+ (or pad-left 0) col-pad)
 
         child-bounds
         (fn [child]

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

@@ -26,6 +26,7 @@
 
   (let [col?  (ctl/col? shape)
         row?  (ctl/row? shape)
+        space-around?  (ctl/space-around? shape)
 
         wrap? (and (ctl/wrap? shape)
                    (or col? (not (ctl/auto-width? shape)))
@@ -77,8 +78,18 @@
               next-max-width   (+ child-margin-width (if fill-width? child-max-width child-width))
               next-max-height  (+ child-margin-height (if fill-height? child-max-height child-height))
 
-              next-line-min-width  (+ line-min-width  next-min-width  (* layout-gap-col num-children))
+              total-gap-col (if space-around?
-              next-line-min-height (+ line-min-height next-min-height (* layout-gap-row num-children))]
+                              (* layout-gap-col (+ num-children 2))
+                              (* layout-gap-col num-children))
+
+              total-gap-row (if space-around?
+                              (* layout-gap-row (+ num-children 2))
+                              (* layout-gap-row num-children))
+
+              next-line-min-width  (+ line-min-width  next-min-width  total-gap-col)
+              next-line-min-height (+ line-min-height next-min-height total-gap-row)
+
+              ]
 
           (if (and (some? line-data)
                    (or (not wrap?)
@@ -141,6 +152,8 @@
 
   (let [row? (ctl/row? parent)
         col? (ctl/col? parent)
+        auto-width? (ctl/auto-width? parent)
+        auto-height? (ctl/auto-height? parent)
 
         [layout-gap-row layout-gap-col] (ctl/gaps parent)
 
@@ -175,12 +188,12 @@
 
             ;; When align-items is stretch we need to adjust the main axis size to grow for the full content
             stretch-width-fix
-            (if (and col? (ctl/content-stretch? parent))
+            (if (and col? (ctl/content-stretch? parent) (not auto-width?))
               (/ (- layout-width (* layout-gap-col (dec num-lines)) total-max-width) num-lines)
               0)
 
             stretch-height-fix
-            (if (and row? (ctl/content-stretch? parent))
+            (if (and row? (ctl/content-stretch? parent) (not auto-height?))
               (/ (- layout-height (* layout-gap-row (dec num-lines)) total-max-height) num-lines)
               0)
 
@@ -226,17 +239,39 @@
 
         row?           (ctl/row? shape)
         col?           (ctl/col? shape)
+        auto-height?   (ctl/auto-height? shape)
+        auto-width?    (ctl/auto-width? shape)
         space-between? (ctl/space-between? shape)
         space-around?  (ctl/space-around? shape)
 
         [layout-gap-row layout-gap-col] (ctl/gaps shape)
 
+        margin-x
+        (cond (and row? space-around? (not auto-width?))
+              (max layout-gap-col (/ (- width line-width) (inc num-children)))
+
+              (and row? space-around? auto-width?)
+              layout-gap-col
+
+              :else
+              0)
+
+        margin-y
+        (cond (and col? space-around? (not auto-height?))
+              (max layout-gap-row (/ (- height line-height) (inc num-children)))
+
+              (and col? space-around? auto-height?)
+              layout-gap-row
+
+              :else
+              0)
+
         layout-gap-col
         (cond (and row? space-around?)
               0
 
-              (and row? space-between?)
+              (and row? space-between? (not auto-width?))
-              (/ (- width line-width) (dec num-children))
+              (max layout-gap-col (/ (- width line-width) (dec num-children)))
 
               :else
               layout-gap-col)
@@ -245,21 +280,11 @@
         (cond (and col? space-around?)
               0
 
-              (and col? space-between?)
+              (and col? space-between? (not auto-height?))
-              (/ (- height line-height) (dec num-children))
+              (max layout-gap-row (/ (- height line-height) (dec num-children)))
 
               :else
-              layout-gap-row)
+              layout-gap-row)]
-
-        margin-x
-        (if (and row? space-around?)
-          (/ (- width line-width) (inc num-children))
-          0)
-
-        margin-y
-        (if (and col? space-around?)
-          (/ (- height line-height) (inc num-children))
-          0)]
     (assoc line-data
            :layout-bounds layout-bounds
            :layout-gap-row layout-gap-row
@@ -308,4 +333,3 @@
     {:layout-lines layout-lines
      :layout-bounds layout-bounds
      :reverse? reverse?}))
-

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

@@ -43,7 +43,7 @@
         (gpt/add (vv free-height-gap))
 
         around?
-        (gpt/add (vv (/ free-height (inc num-lines)))))
+        (gpt/add (vv (max lines-gap-row (/ free-height (inc num-lines))))))
 
       col?
       (cond-> center?
@@ -53,7 +53,7 @@
         (gpt/add (hv free-width-gap))
 
         around?
-        (gpt/add (hv (/ free-width (inc num-lines))))))))
+        (gpt/add (hv (max lines-gap-col (/ free-width (inc num-lines)))))))))
 
 (defn get-next-line
   [parent layout-bounds {:keys [line-width line-height]} base-p total-width total-height num-lines]
@@ -63,6 +63,9 @@
         row? (ctl/row? parent)
         col? (ctl/col? parent)
 
+        auto-width? (ctl/auto-width? parent)
+        auto-height? (ctl/auto-height? parent)
+
         [layout-gap-row layout-gap-col] (ctl/gaps parent)
 
         hv   #(gpo/start-hv layout-bounds %)
@@ -75,8 +78,11 @@
         free-width  (- layout-width total-width)
         free-height (- layout-height total-height)
 
-        line-gap-row
+        line-gap-col
         (cond
+          auto-width?
+          layout-gap-col
+
           stretch?
           (/ free-width num-lines)
 
@@ -89,8 +95,11 @@
           :else
           layout-gap-col)
 
-        line-gap-col
+        line-gap-row
         (cond
+          auto-height?
+          layout-gap-row
+
           stretch?
           (/ free-height num-lines)
 
@@ -105,10 +114,10 @@
 
     (cond-> base-p
       row?
-      (gpt/add (vv (+ line-height (max layout-gap-row line-gap-col))))
+      (gpt/add (vv (+ line-height (max layout-gap-row line-gap-row))))
 
       col?
-      (gpt/add (hv (+ line-width (max layout-gap-col line-gap-row)))))))
+      (gpt/add (hv (+ line-width (max layout-gap-col line-gap-col)))))))
 
 (defn get-start-line
   "Cross axis line. It's position is fixed along the different lines"
@@ -126,18 +135,20 @@
         v-center?           (ctl/v-center? parent)
         v-end?              (ctl/v-end? parent)
         content-stretch?    (ctl/content-stretch? parent)
+        auto-width?         (ctl/auto-width? parent)
+        auto-height?        (ctl/auto-height? parent)
         hv                  (partial gpo/start-hv layout-bounds)
         vv                  (partial gpo/start-vv layout-bounds)
         children-gap-width  (* layout-gap-col (dec num-children))
         children-gap-height (* layout-gap-row (dec num-children))
 
         line-height
-        (if (and row? content-stretch?)
+        (if (and row? content-stretch? (not auto-height?))
           (+ line-height (/ (- layout-height total-height) num-lines))
           line-height)
 
         line-width
-        (if (and col? content-stretch?)
+        (if (and col? content-stretch? (not auto-width?))
           (+ line-width (/ (- layout-width total-width) num-lines))
           line-width)
 
@@ -263,7 +274,7 @@
           col?
           (-> (gpt/add (vv (+ margin-top margin-bottom)))
               (gpt/add (vv (+ child-height layout-gap-row))))
-          
+
           (some? margin-x)
           (gpt/add (hv margin-x))
 

frontend/src/app/main/data/workspace.cljs

@@ -839,13 +839,22 @@
   (ptk/reify ::start-editing-selected
     ptk/WatchEvent
     (watch [_ state _]
-      (let [selected (wsh/lookup-selected state)]
+      (let [selected (wsh/lookup-selected state)
-        (if-not (= 1 (count selected))
+            objects (wsh/lookup-page-objects state)]
-          (rx/empty)
 
-          (let [objects (wsh/lookup-page-objects state)
+        (if (> (count selected) 1)
-                {:keys [id type shapes]} (get objects (first selected))]
+          (let [shapes-to-select
+                (->> selected
+                     (reduce
+                      (fn [result shape-id]
+                        (let [children (dm/get-in objects [shape-id :shapes])]
+                          (if (empty? children)
+                            (conj result shape-id)
+                            (into result children))))
+                      (d/ordered-set)))]
+            (rx/of (dws/select-shapes shapes-to-select)))
 
+          (let [{:keys [id type shapes]} (get objects (first selected))]
             (case type
               :text
               (rx/of (dwe/start-edition-mode id))
@@ -899,9 +908,13 @@
                        (align-objects-list objects selected axis))
             moved-objects (->> moved (group-by :id))
             ids (keys moved-objects)
-            update-fn (fn [shape] (first (get moved-objects (:id shape))))]
+            update-fn (fn [shape] (first (get moved-objects (:id shape))))
+            undo-id (js/Symbol)]
         (when (can-align? selected objects)
-          (rx/of (dch/update-shapes ids update-fn {:reg-objects? true})))))))
+          (rx/of (dwu/start-undo-transaction undo-id)
+                 (dch/update-shapes ids update-fn {:reg-objects? true})
+                 (ptk/data-event :layout/update ids)
+                 (dwu/commit-undo-transaction undo-id)))))))
 
 (defn align-object-to-parent
   [objects object-id axis]

frontend/src/app/main/data/workspace/modifiers.cljs

@@ -164,6 +164,15 @@
   (us/verify (s/coll-of uuid?) ids)
   (into {} (map #(vector % {:modifiers (get-modifier (get objects %))})) ids))
 
+(defn modifier-remove-from-parent
+  [modif-tree objects shapes]
+  (->> shapes
+       (reduce
+        (fn [modif-tree child-id]
+          (let [parent-id (get-in objects [child-id :parent-id])]
+            (update-in modif-tree [parent-id :modifiers] ctm/remove-children [child-id])))
+        modif-tree)))
+
 (defn build-change-frame-modifiers
   [modif-tree objects selected target-frame drop-index]
 
@@ -193,7 +202,7 @@
                          (filterv #(contains? child-set %)))]
             (cond-> modif-tree
               (not= original-frame target-frame)
-              (-> (update-in [original-frame :modifiers] ctm/remove-children shapes)
+              (-> (modifier-remove-from-parent objects shapes)
                   (update-in [target-frame :modifiers] ctm/add-children shapes drop-index)
                   (set-parent-ids shapes target-frame))
 

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

@@ -8,7 +8,6 @@
   (:require
    [app.common.text :as txt]
    [app.main.fonts :as fonts]
-   [app.main.ui.shapes.text.fo-text :as fo]
    [app.main.ui.shapes.text.svg-text :as svg]
    [app.util.object :as obj]
    [rumext.v2 :as mf]))
@@ -28,6 +27,5 @@
     (mf/with-memo [content]
       (load-fonts! content))
 
-    (if (some? position-data)
+    (when (some? position-data)
-      [:> svg/text-shape props]
+      [:> svg/text-shape props])))
-      [:> fo/text-shape props])))