✨ Remove constraints when autolayout

2025-03-28 15:41:25 -05:00 · 2022-11-04 15:53:50 +01:00 · 2022-11-04 15:53:50 +01:00 · b5df7bbfc5
commit b5df7bbfc5
parent 7375eed18f
10 changed files with 41 additions and 48 deletions
--- a/CHANGES.md
+++ b/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)
--- a/frontend/resources/images/icons/auto-flex.svg
+++ b/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>
--- a/frontend/resources/images/icons/auto-row-column.svg
+++ b/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>
--- a/frontend/resources/images/icons/layout-columns.svg
+++ b/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">
-  <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"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
+  <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>
--- a/frontend/resources/images/icons/layout-rows.svg
+++ b/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">
-  <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" />
+<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>
--- a/frontend/src/app/main/data/workspace/shape_layout.cljs
+++ b/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 [_ _ _]
-      (if (= type :flex)
-        (rx/of (dwc/update-shapes ids #(merge % initial-flex-layout))
-               (update-layout-positions ids))
-        (rx/of (dwc/update-shapes ids #(merge % initial-grid-layout))
-               (update-layout-positions ids))))))
+    (watch [_ state _]
+      (let [objects (wsh/lookup-page-objects state)
+            children-ids (into [] (mapcat #(get-in objects [% :shapes])) ids)]
+        (rx/of (dwc/update-shapes ids (get-layout-initializer type))
+               (update-layout-positions ids)
+               (dwc/update-shapes children-ids #(dissoc % :constraints-h :constraints-v)))))))

 (defn remove-layout
  [ids]
--- a/frontend/src/app/main/data/workspace/state_helpers.cljs
+++ b/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.types.modifiers :as ctm]))
+   [app.common.path.commands :as upc]))

 (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)
-
-        modifiers    (select-keys modifiers selected-children)
-        children     (select-keys objects children-ids)]
+        children
+        (-> (select-keys objects children-ids)
+            (d/update-vals
+             (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) $))))
--- a/frontend/src/app/main/data/workspace/texts.cljs
+++ b/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
-                      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
+                      {shape-width :width shape-height :height} selrect]
                  (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))
-        modifier-height (when height (ctm/change-dimensions shape :height height))
-
-        ;; TODO LAYOUT: MEZCLAR LOS DOS EN UN UNICO MODIFIER
-        new-shape
+  (let [new-shape
        (cond-> shape
-          (some? modifier-width)
-          (gsh/transform-shape modifier-width)
+          (some? width)
+          (gsh/transform-shape (ctm/change-dimensions shape :width width))

-          (some? modifier-height)
-          (gsh/transform-shape modifier-height)
+          (some? height)
+          (gsh/transform-shape (ctm/change-dimensions shape :height height))

          (some? position-data)
          (assoc :position-data position-data))
--- a/frontend/src/app/main/ui/shapes/bool.cljs
+++ b/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
-                          #_(d/mapm #(gsh/transform-shape %2))
-                          (gsh/calc-bool-content shape)))))]
+                     (gsh/calc-bool-content shape childs))))]

            [:*
             (when (some? bool-content)
--- a/frontend/src/app/main/ui/workspace/shapes/path/editor.cljs
+++ b/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]
-       [:line {:x1 (:x from)
+     (for [[idx [from to]] (d/enumerate matches)]
+       [:line {:key (dm/str "snap-" idx "-" from "-" to)
+               :x1 (:x from)
               :y1 (:y from)
               :x2 (:x to)
               :y2 (:y to)