Merge pull request #3042 from penpot/azazeln28-fix-scaling-frame-proportionally

Fix scaling frame proportionally

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

@@ -288,25 +288,25 @@
 
         constraints-h
         (cond
+          ignore-constraints
+          :scale
+
           (and (ctl/any-layout? parent) (not (ctl/layout-absolute? child)))
           :left
 
-          (not ignore-constraints)
-          (:constraints-h child (default-constraints-h child))
-
           :else
-          :scale)
+          (:constraints-h child (default-constraints-h child)))
 
         constraints-v
         (cond
+          ignore-constraints
+          :scale
+
           (and (ctl/any-layout? parent) (not (ctl/layout-absolute? child)))
           :top
 
-          (not ignore-constraints)
-          (:constraints-v child (default-constraints-v child))
-
           :else
-          :scale)]
+          (:constraints-v child (default-constraints-v child)))]
 
     (if (and (= :scale constraints-h) (= :scale constraints-v))
       modifiers

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

@@ -322,10 +322,20 @@
 
 (defn- apply-structure-modifiers
   [objects modif-tree]
-  (letfn [(apply-shape [objects [id {:keys [modifiers]}]]
+  (letfn [(update-children-structure-modifiers
+            [objects ids modifiers]
+            (reduce #(update %1 %2 ctm/apply-structure-modifiers modifiers) objects ids))
+
+          (apply-shape [objects [id {:keys [modifiers]}]]
             (cond-> objects
               (ctm/has-structure? modifiers)
-              (update id ctm/apply-structure-modifiers modifiers)))]
+              (update id ctm/apply-structure-modifiers modifiers)
+
+              (and (ctm/has-structure? modifiers)
+                   (ctm/has-structure-child? modifiers))
+              (update-children-structure-modifiers
+               (cph/get-children-ids objects id)
+               (ctm/select-child-structre-modifiers modifiers))))]
     (reduce apply-shape objects modif-tree)))
 
 (defn merge-modif-tree

common/src/app/common/types/modifiers.cljc

@@ -19,6 +19,7 @@
    [app.common.pages.helpers :as cph]
    [app.common.spec :as us]
    [app.common.text :as txt]
+   [app.common.types.shape.layout :as ctl]
    #?(:cljs [cljs.core :as c]
       :clj [clojure.core :as c])))
 
@@ -542,6 +543,10 @@
   (or (d/not-empty? structure-parent)
       (d/not-empty? structure-child)))
 
+(defn has-structure-child?
+  [modifiers]
+  (d/not-empty? (dm/get-prop modifiers :structure-child)))
+
 ;; Extract subsets of modifiers
 
 (defn select-child
@@ -564,6 +569,10 @@
   [modifiers]
   (-> modifiers select-child select-geometry))
 
+(defn select-child-structre-modifiers
+  [modifiers]
+  (-> modifiers select-child select-structure))
+
 (defn added-children-frames
   "Returns the frames that have an 'add-children' operation"
   [modif-tree]
@@ -635,28 +644,32 @@
                    matrix)))]
           (recur matrix (next modifiers)))))))
 
+(defn transform-text-node [value attrs]
+  (let [font-size (-> (get attrs :font-size 14)
+                      (d/parse-double)
+                      (* value)
+                      (str))]
+    (d/txt-merge attrs {:font-size font-size})))
+
+(defn update-text-content
+  [shape scale-text-content value]
+  (update shape :content scale-text-content value))
+
 (defn apply-structure-modifiers
   "Apply structure changes to a shape"
   [shape modifiers]
   (letfn [(scale-text-content
             [content value]
-
             (->> content
                  (txt/transform-nodes
                   txt/is-text-node?
-                  (fn [attrs]
+                  (partial transform-text-node value))))
-                    (let [font-size (-> (get attrs :font-size 14)
-                                        (d/parse-double)
-                                        (* value)
-                                        (str)) ]
-                      (d/txt-merge attrs {:font-size font-size}))))))
 
           (apply-scale-content
             [shape value]
-
             (cond-> shape
               (cph/text-shape? shape)
-              (update :content scale-text-content value) 
+              (update-text-content scale-text-content value) 
               
               (cph/rect-shape? shape)
               (gsc/update-corners-scale value)
@@ -666,9 +679,15 @@
                     
               (d/not-empty? (:shadow shape))
               (gse/update-shadows-scale value)
-                    
+              
               (some? (:blur shape))
-              (gse/update-blur-scale value)))]
+              (gse/update-blur-scale value)
+
+              (ctl/flex-layout? shape)
+              (ctl/update-flex-scale value)
+
+              :always
+              (ctl/update-flex-child value)))]
 
     (let [remove-children
           (fn [shapes children-to-remove]
@@ -698,7 +717,6 @@
                 (let [value (dm/get-prop operation :value)]
                   (update shape :shapes remove-children value))
 
-
                 :scale-content
                 (let [value (dm/get-prop operation :value)]
                   (apply-scale-content shape value))

common/src/app/common/types/shape/layout.cljc

@@ -497,6 +497,30 @@
           :layout-item-align-self
           :layout-item-absolute
           :layout-item-z-index))
+
+(defn update-flex-scale
+  [shape scale]
+  (-> shape
+      (d/update-in-when [:layout-gap :row-gap] * scale)
+      (d/update-in-when [:layout-gap :column-gap] * scale)
+      (d/update-in-when [:layout-padding :p1] * scale)
+      (d/update-in-when [:layout-padding :p2] * scale)
+      (d/update-in-when [:layout-padding :p3] * scale)
+      (d/update-in-when [:layout-padding :p4] * scale)))
+
+(defn update-flex-child
+  [shape scale]
+  (-> shape
+      (d/update-when :layout-item-max-h * scale)
+      (d/update-when :layout-item-min-h * scale)
+      (d/update-when :layout-item-max-w * scale)
+      (d/update-when :layout-item-min-w * scale)
+      (d/update-in-when [:layout-item-margin :m1] * scale)
+      (d/update-in-when [:layout-item-margin :m2] * scale)
+      (d/update-in-when [:layout-item-margin :m3] * scale)
+      (d/update-in-when [:layout-item-margin :m4] * scale)))
+
+
 (declare assign-cells)
 
 (def grid-cell-defaults

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

@@ -438,14 +438,20 @@
                            :flip-x
                            :flip-y
                            :grow-type
-                           :layout-item-h-sizing
+                           :position-data
-                           :layout-item-v-sizing
+                           :layout-gap
                            :layout-padding
+                           :layout-item-h-sizing
+                           :layout-item-margin
+                           :layout-item-max-h
+                           :layout-item-max-w
+                           :layout-item-min-h
+                           :layout-item-min-w
+                           :layout-item-v-sizing
                            :layout-padding-type
                            :layout-gap
                            :layout-item-margin
                            :layout-item-margin-type
-                           :position-data
                            ]})
                  ;; We've applied the text-modifier so we can dissoc the temporary data
                  (fn [state]

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

@@ -104,7 +104,8 @@
 (defn start-resize
   "Enter mouse resize mode, until mouse button is released."
   [handler ids shape]
-  (letfn [(resize [shape initial layout [point lock? center? point-snap]]
+  (letfn [(resize 
+           [shape initial layout [point lock? center? point-snap]]
             (let [{:keys [width height]} (:selrect shape)
                   {:keys [rotation]} shape
 
@@ -192,7 +193,7 @@
                         (ctm/scale-content (:x scalev))))
 
                   modif-tree (dwm/create-modif-tree ids modifiers)]
-              (rx/of (dwm/set-modifiers modif-tree))))
+              (rx/of (dwm/set-modifiers modif-tree scale-text))))
 
           ;; Unifies the instantaneous proportion lock modifier
           ;; activated by Shift key and the shapes own proportion
@@ -209,7 +210,7 @@
       ptk/WatchEvent
       (watch [_ state stream]
         (let [initial-position @ms/mouse-position
-              stoper  (rx/filter ms/mouse-up? stream)
+              stopper (rx/filter ms/mouse-up? stream)
               layout  (:workspace-layout state)
               page-id (:current-page-id state)
               focus   (:workspace-focus-selected state)
@@ -226,7 +227,7 @@
                                  (->> (snap/closest-snap-point page-id resizing-shapes objects layout zoom focus point)
                                       (rx/map #(conj current %)))))
                 (rx/mapcat (partial resize shape initial-position layout))
-                (rx/take-until stoper))
+                (rx/take-until stopper))
            (rx/of (dwm/apply-modifiers)
                   (finish-transform))))))))