✨ Remove constraints when autolayout

CHANGES.md

@@ -4,8 +4,11 @@
 
 ### :boom: Breaking changes & Deprecations
 ### :sparkles: New features
+
+- Adds layout flex functionality for boards
 - Better overlays interactions on boards inside boards [Taiga #4386](https://tree.taiga.io/project/penpot/us/4386)
 - Show board miniature in manual overlay setting [Taiga #4475](https://tree.taiga.io/project/penpot/issue/4475)
+
 ### :bug: Bugs fixed
 
 - Add title to color bullets [Taiga #4218](https://tree.taiga.io/project/penpot/task/4218)

frontend/resources/images/icons/auto-flex.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
-  <path d="M0 0v132.292h132.292V0H0zm11.232 11.232H121.06v109.827H11.232V11.232zm17.876 18.346v73.136h29.726V29.578H29.108zm44.45 0v73.136h29.726V29.578H73.558z"/>
-</svg>

frontend/resources/images/icons/auto-row-column.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
-  <path d="M0 0v132.292h132.292V0H0zm11.232 11.232H121.06v109.827H11.232V11.232zm17.876 18.346v73.136h29.726V29.578H29.108zm44.45 0v73.136h29.726V29.578H73.558z"/>
-</svg>

frontend/resources/images/icons/layout-columns.svg

@@ -1,3 +1,3 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="806.295 634 53.403 53.403" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
-  <path d="M859.697,634L806.295,634L806.295,687.403L859.697,687.403L859.697,634ZM855.374,638.555L855.374,682.847L810.617,682.847L810.617,638.555L855.374,638.555ZM817.491,644.294L848.491,644.294L848.491,657.294L817.491,657.294L817.491,644.294ZM817.491,664.294L848.491,664.294L848.491,677.294L817.491,677.294L817.491,664.294Z"/>
+  <path transform="rotate(90, 66.146, 66.146)" d="M0 0v132.292h132.292V0H0zm11.232 11.232H121.06v109.827H11.232V11.232zm17.876 18.346v73.136h29.726V29.578H29.108zm44.45 0v73.136h29.726V29.578H73.558z"/>
 </svg>

frontend/resources/images/icons/layout-rows.svg

@@ -1,3 +1,3 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="694 635 53 53" version="1.1">
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
-  <path d="M694,635L694,688L747,688L747,635L694,635ZM698.521,639.29L742.479,639.29L742.479,683.71L698.521,683.71L698.521,639.29ZM704.455,677.303L704.455,646.537L717.358,646.537L717.358,677.303L704.455,677.303ZM723.312,677.303L723.312,646.537L736.214,646.537L736.214,677.303L723.312,677.303Z" />
+  <path d="M0 0v132.292h132.292V0H0zm11.232 11.232H121.06v109.827H11.232V11.232zm17.876 18.346v73.136h29.726V29.578H29.108zm44.45 0v73.136h29.726V29.578H73.558z"/>
 </svg>

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

@@ -57,17 +57,23 @@
                    (dwm/apply-modifiers)))
           (rx/empty))))))
 
-;; TODO LAYOUT: Remove constraints from children
+(defn get-layout-initializer
+  [type]
+  (let [initial-layout-data (if (= type :flex) initial-flex-layout initial-grid-layout)]
+    (fn [shape]
+      (-> shape
+          (merge shape initial-layout-data)))))
+
 (defn create-layout
   [ids type]
   (ptk/reify ::create-layout
     ptk/WatchEvent
-    (watch [_ _ _]
+    (watch [_ state _]
-      (if (= type :flex)
+      (let [objects (wsh/lookup-page-objects state)
-        (rx/of (dwc/update-shapes ids #(merge % initial-flex-layout))
+            children-ids (into [] (mapcat #(get-in objects [% :shapes])) ids)]
-               (update-layout-positions ids))
+        (rx/of (dwc/update-shapes ids (get-layout-initializer type))
-        (rx/of (dwc/update-shapes ids #(merge % initial-grid-layout))
+               (update-layout-positions ids)
-               (update-layout-positions ids))))))
+               (dwc/update-shapes children-ids #(dissoc % :constraints-h :constraints-v)))))))
 
 (defn remove-layout
   [ids]

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

@@ -8,9 +8,9 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.geom.shapes :as gsh]
    [app.common.pages.helpers :as cph]
-   [app.common.path.commands :as upc]
+   [app.common.path.commands :as upc]))
-   [app.common.types.modifiers :as ctm]))
 
 (defn lookup-page
   ([state]
@@ -127,16 +127,15 @@
 (defn select-bool-children
   [parent-id state]
   (let [objects   (lookup-page-objects state)
-        selected  (lookup-selected-raw state)
         modifiers (:workspace-modifiers state)
-
         children-ids (cph/get-children-ids objects parent-id)
-        selected-children (into [] (filter selected) children-ids)
+        children
-
+        (-> (select-keys objects children-ids)
-        modifiers    (select-keys modifiers selected-children)
+            (d/update-vals
-        children     (select-keys objects children-ids)]
+             (fn [child]
+               (cond-> child
+                 (contains? modifiers (:id child))
+                 (gsh/transform-shape (get-in modifiers [(:id child) :modifiers]))))))]
 
     (as-> children $
-      ;; TODO LAYOUT: REVIEW THIS
-      (ctm/merge-modifiers $ modifiers)
       (d/mapm (set-content-modifiers state) $))))

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

@@ -319,17 +319,14 @@
     (watch [_ _ _]
       (letfn [(update-fn [shape]
                 (let [{:keys [selrect grow-type]} shape
-                      {shape-width :width shape-height :height} selrect
+                      {shape-width :width shape-height :height} selrect]
-                      modifier-width (ctm/change-dimensions shape :width new-width)
-                      modifier-height (ctm/change-dimensions shape :height new-height)]
-                  ;; TODO LAYOUT: MEZCLAR ESTOS EN UN UNICO MODIFIER
                   (cond-> shape
                     (and (not-changed? shape-width new-width) (= grow-type :auto-width))
-                    (gsh/transform-shape modifier-width)
+                    (gsh/transform-shape (ctm/change-dimensions shape :width new-width))
 
                     (and (not-changed? shape-height new-height)
                          (or (= grow-type :auto-height) (= grow-type :auto-width)))
-                    (gsh/transform-shape modifier-height))))]
+                    (gsh/transform-shape (ctm/change-dimensions shape :height new-height)))))]
 
         (rx/of (dch/update-shapes [id] update-fn {:reg-objects? true :save-undo? false}))))))
 
@@ -346,17 +343,13 @@
 (defn apply-text-modifier
   [shape {:keys [width height position-data]}]
 
-  (let [modifier-width (when width (ctm/change-dimensions shape :width width))
+  (let [new-shape
-        modifier-height (when height (ctm/change-dimensions shape :height height))
-
-        ;; TODO LAYOUT: MEZCLAR LOS DOS EN UN UNICO MODIFIER
-        new-shape
         (cond-> shape
-          (some? modifier-width)
+          (some? width)
-          (gsh/transform-shape modifier-width)
+          (gsh/transform-shape (ctm/change-dimensions shape :width width))
 
-          (some? modifier-height)
+          (some? height)
-          (gsh/transform-shape modifier-height)
+          (gsh/transform-shape (ctm/change-dimensions shape :height height))
 
           (some? position-data)
           (assoc :position-data position-data))

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

@@ -14,7 +14,6 @@
    [app.util.object :as obj]
    [rumext.v2 :as mf]))
 
-;; TODO LAYOUT: REVIEW DYNAMIC CHANGES IN BOOLEANS
 (defn bool-shape
   [shape-wrapper]
   (mf/fnc bool-shape
@@ -34,9 +33,7 @@
                      (:bool-content shape)
 
                      (some? childs)
-                     (->> childs
+                     (gsh/calc-bool-content shape childs))))]
-                          #_(d/mapm #(gsh/transform-shape %2))
-                          (gsh/calc-bool-content shape)))))]
 
             [:*
              (when (some? bool-content)

frontend/src/app/main/ui/workspace/shapes/path/editor.cljs

@@ -185,8 +185,9 @@
         matches      (concat (second (:x snap-matches)) (second (:y snap-matches)))]
 
     [:g.snap-paths
-     (for [[from to] matches]
+     (for [[idx [from to]] (d/enumerate matches)]
-       [:line {:x1 (:x from)
+       [:line {:key (dm/str "snap-" idx "-" from "-" to)
+               :x1 (:x from)
                :y1 (:y from)
                :x2 (:x to)
                :y2 (:y to)