✨ Adds integration with new UI

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

@@ -8,6 +8,7 @@
   (:require
    [app.common.data :as d]
    [app.common.pages.helpers :as cph]
+   [app.common.types.modifiers :as ctm]
    [app.main.data.workspace.changes :as dwc]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.transforms :as dwt]
@@ -25,8 +26,7 @@
    :layout-wrap-type
    :layout-padding-type
    :layout-padding
-   ])
-
+   :layout-gap-type])
 
 (def initial-flex-layout
   {:layout                 :flex
@@ -51,8 +51,9 @@
       (let [objects (wsh/lookup-page-objects state)
             ids     (->> ids (filter #(get-in objects [% :layout])))]
         (if (d/not-empty? ids)
-          (rx/of (dwt/set-modifiers ids)
-                 (dwt/apply-modifiers))
+          (let [modif-tree (dwt/create-modif-tree ids (ctm/reflow))]
+            (rx/of (dwt/set-modifiers modif-tree)
+                   (dwt/apply-modifiers)))
           (rx/empty))))))
 
 ;; TODO LAYOUT: Remove constraints from children

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

@@ -11,7 +11,7 @@
    [app.common.geom.matrix :as gmt]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as gsh]
-   [app.common.geom.shapes.layout :as gsl]
+   [app.common.geom.shapes.flex-layout :as gsl]
    [app.common.math :as mth]
    [app.common.pages.changes-builder :as pcb]
    [app.common.pages.common :as cpc]
@@ -117,46 +117,69 @@
 
 (declare get-ignore-tree)
 
+(defn create-modif-tree
+  [ids modifiers]
+  (us/verify (s/coll-of uuid?) ids)
+  (into {} (map #(vector % {:modifiers modifiers})) ids))
+
+(defn build-modif-tree
+  [ids objects get-modifier]
+  (us/verify (s/coll-of uuid?) ids)
+  (into {} (map #(vector % {:modifiers (get-modifier (get objects %))})) ids))
+
+(defn build-change-frame-modifiers
+  [modif-tree objects selected target-frame position]
+
+  (let [origin-frame-ids (->> selected (group-by #(get-in objects [% :frame-id])))
+        layout? (get-in objects [target-frame :layout])
+        child-set (set (get-in objects [target-frame :shapes]))
+        drop-index (when layout? (gsl/get-drop-index target-frame objects position))
+
+        update-frame-modifiers
+        (fn [modif-tree [original-frame shapes]]
+          (let [shapes (->> shapes (d/removev #(= target-frame %)))
+                shapes (cond->> shapes
+                         (and layout? (= original-frame target-frame))
+                         ;; When movining inside a layout frame remove the shapes that are not immediate children
+                         (filterv #(contains? child-set %)))]
+            (cond-> modif-tree
+              (not= original-frame target-frame)
+              (-> (update-in [original-frame :modifiers] ctm/set-remove-children shapes)
+                  (update-in [target-frame :modifiers] ctm/set-add-children shapes drop-index))
+
+              (and layout? (= original-frame target-frame))
+              (update-in [target-frame :modifiers] ctm/set-add-children shapes drop-index))))]
+
+    (reduce update-frame-modifiers modif-tree origin-frame-ids)))
+
+(defn modif->js
+     [modif-tree objects]
+     (clj->js (into {}
+                    (map (fn [[k v]]
+                           [(get-in objects [k :name]) v]))
+                    modif-tree)))
+
 (defn set-modifiers
-  ([ids]
-   (set-modifiers ids nil false))
+  ([modif-tree]
+   (set-modifiers modif-tree false))
 
-  ([ids modifiers]
-   (set-modifiers ids modifiers false))
+  ([modif-tree ignore-constraints]
+   (set-modifiers modif-tree ignore-constraints false))
 
-  ([ids modifiers ignore-constraints]
-   (set-modifiers ids modifiers ignore-constraints false))
-
-  ([ids modifiers ignore-constraints ignore-snap-pixel]
-   (us/verify (s/coll-of uuid?) ids)
+  ([modif-tree ignore-constraints ignore-snap-pixel]
    (ptk/reify ::set-modifiers
      ptk/UpdateEvent
      (update [_ state]
-       (let [objects     (wsh/lookup-page-objects state)
-             ids         (into #{} (remove #(get-in objects [% :blocked] false)) ids)
+       (let [objects
+             (wsh/lookup-page-objects state)
 
-             snap-pixel? (and (not ignore-snap-pixel)
-                              (contains? (:workspace-layout state) :snap-pixel-grid))
-
-             workspace-modifiers (:workspace-modifiers state)
+             snap-pixel?
+             (and (not ignore-snap-pixel) (contains? (:workspace-layout state) :snap-pixel-grid))
 
              modif-tree
-             (gsh/set-objects-modifiers
-              ;; TODO LAYOUT: I don't like this
-              (concat (keys workspace-modifiers) ids)
-              objects
-              (fn [shape]
-                (let [
-                      modifiers (if (contains? ids (:id shape)) modifiers (ctm/empty-modifiers))
+             (gsh/set-objects-modifiers modif-tree objects ignore-constraints snap-pixel?)]
 
-                      structure-modifiers (ctm/select-structure
-                                           (get-in state [:workspace-modifiers (:id shape) :modifiers]))]
-                  (cond-> modifiers
-                    (some? structure-modifiers)
-                    (ctm/add-modifiers structure-modifiers))))
-              ignore-constraints snap-pixel?)]
-
-         (update state :workspace-modifiers merge modif-tree))))))
+         (assoc state :workspace-modifiers modif-tree))))))
 
 ;; Rotation use different algorithm to calculate children modifiers (and do not use child constraints).
 (defn- set-rotation-modifiers
@@ -171,8 +194,6 @@
              ids
              (->> shapes
                   (remove #(get % :blocked false))
-                  #_(mapcat #(cph/get-children objects (:id %)))
-                  #_(concat shapes)
                   (filter #((cpc/editable-attrs (:type %)) :rotation))
                   (map :id))
 
@@ -181,9 +202,10 @@
                (ctm/rotation shape center angle))
 
              modif-tree
-             (gsh/set-objects-modifiers ids objects get-modifier false false)]
+             (-> (build-modif-tree ids objects get-modifier)
+                 (gsh/set-objects-modifiers objects false false))]
 
-         (update state :workspace-modifiers merge modif-tree))))))
+         (assoc state :workspace-modifiers modif-tree))))))
 
 (defn- update-grow-type
   [shape old-shape]
@@ -408,9 +430,11 @@
                       (ctm/set-resize scalev resize-origin shape-transform shape-transform-inverse)
 
                       (cond-> scale-text
-                        (ctm/set-scale-content (:x scalev))))]
+                        (ctm/set-scale-content (:x scalev))))
 
-              (rx/of (set-modifiers ids modifiers))))
+                  modif-tree (create-modif-tree ids modifiers)]
+
+              (rx/of (set-modifiers modif-tree))))
 
           ;; Unifies the instantaneous proportion lock modifier
           ;; activated by Shift key and the shapes own proportion
@@ -463,7 +487,8 @@
             (fn [shape] (ctm/change-dimensions shape attr value))
 
             modif-tree
-            (gsh/set-objects-modifiers ids objects get-modifier false snap-pixel?)]
+            (-> (build-modif-tree ids objects get-modifier)
+                (gsh/set-objects-modifiers objects false snap-pixel?))]
 
         (assoc state :workspace-modifiers modif-tree)))
 
@@ -487,7 +512,8 @@
             (fn [shape] (ctm/change-orientation-modifiers shape orientation))
 
             modif-tree
-            (gsh/set-objects-modifiers ids objects get-modifier false snap-pixel?)]
+            (-> (build-modif-tree ids objects get-modifier)
+                (gsh/set-objects-modifiers objects false snap-pixel?))]
 
         (assoc state :workspace-modifiers modif-tree)))
 
@@ -621,37 +647,6 @@
            (rx/take 1)
            (rx/map #(start-move from-position))))))
 
-(defn set-change-frame-modifiers
-  [selected target-frame position]
-
-  (ptk/reify ::set-change-frame-modifiers
-    ptk/UpdateEvent
-    (update [_ state]
-      (let [objects (wsh/lookup-page-objects state)
-
-            origin-frame-ids (->> selected (group-by #(get-in objects [% :frame-id])))
-
-            layout? (get-in objects [target-frame :layout])
-
-            drop-index
-            (when layout? (gsl/get-drop-index target-frame objects position))
-
-            modif-tree
-            (into {}
-                  (mapcat
-                   (fn [original-frame]
-                     (let [shapes (->> (get origin-frame-ids original-frame)
-                                       (d/removev #(= target-frame %)))]
-                       (cond
-                         (not= original-frame target-frame)
-                         [[original-frame {:modifiers (ctm/remove-children shapes)}]
-                          [target-frame {:modifiers (ctm/add-children shapes drop-index)}]]
-
-                         layout?
-                         [[target-frame {:modifiers (ctm/add-children shapes drop-index)}]]))))
-                  (keys origin-frame-ids))]
-
-        (assoc state :workspace-modifiers modif-tree)))))
 
 (defn- start-move
   ([from-position] (start-move from-position nil))
@@ -699,22 +694,21 @@
            (rx/of (finish-transform))
            (rx/concat
             (rx/merge
-             (->> position
-                  (rx/map (fn [delta]
-                            (let [position (gpt/add from-position delta)
-                                  target-frame (ctst/top-nested-frame objects position)]
-                              (set-change-frame-modifiers selected target-frame position))))
-                  (rx/take-until stopper))
-
              (->> position
                   ;; We ask for the snap position but we continue even if the result is not available
                   (rx/with-latest vector snap-delta)
 
                   ;; We try to use the previous snap so we don't have to wait for the result of the new
                   (rx/map snap/correct-snap-point)
-                  (rx/map ctm/move)
 
-                  (rx/map (partial set-modifiers ids))
+                  (rx/map
+                   (fn [move-vector]
+                     (let [position (gpt/add from-position move-vector)
+                           target-frame (ctst/top-nested-frame objects position)]
+                       (-> (create-modif-tree ids (ctm/move move-vector))
+                           (build-change-frame-modifiers objects selected target-frame position)
+                           (set-modifiers)))))
+
                   (rx/take-until stopper)))
 
             (rx/of (dwu/start-undo-transaction)
@@ -762,8 +756,8 @@
              (rx/merge
               (->> move-events
                    (rx/scan #(gpt/add %1 mov-vec) (gpt/point 0 0))
-                   (rx/map #(ctm/move %))
-                   (rx/map (partial set-modifiers selected))
+                   (rx/map #(create-modif-tree selected (ctm/move %)))
+                   (rx/map (partial set-modifiers))
                    (rx/take-until stopper))
               (rx/of (move-selected direction shift?)))
 
@@ -793,11 +787,12 @@
             cpos (gpt/point (:x bbox) (:y bbox))
             pos  (gpt/point (or (:x position) (:x bbox))
                             (or (:y position) (:y bbox)))
-            delta (gpt/subtract pos cpos)]
+            delta (gpt/subtract pos cpos)
 
-        (rx/of
-         (set-modifiers [id] (ctm/move delta))
-         (apply-modifiers [id]))))))
+            modif-tree (create-modif-tree [id] (ctm/move delta))]
+
+        (rx/of (set-modifiers modif-tree)
+               (apply-modifiers))))))
 
 (defn- calculate-frame-for-move
   [ids]
@@ -816,7 +811,11 @@
             moving-shapes
             (cond->> shapes
               (not layout?)
-              (remove #(= (:frame-id %) frame-id)))
+              (remove #(= (:frame-id %) frame-id))
+
+              layout?
+              (remove #(and (= (:frame-id %) frame-id)
+                            (not= (:parent-id %) frame-id))))
 
             drop-index (when layout? (gsl/get-drop-index frame-id objects position))
 
@@ -850,13 +849,15 @@
             selected (wsh/lookup-selected state {:omit-blocked? true})
             shapes   (map #(get objects %) selected)
             selrect  (gsh/selection-rect shapes)
-            origin   (gpt/point (:x selrect) (+ (:y selrect) (/ (:height selrect) 2)))]
+            origin   (gpt/point (:x selrect) (+ (:y selrect) (/ (:height selrect) 2)))
 
-        (rx/of (set-modifiers selected
-                              (-> (ctm/empty-modifiers)
-                                  (ctm/set-resize (gpt/point -1.0 1.0) origin)
-                                  (ctm/move (gpt/point (:width selrect) 0)))
-                              true)
+            modif-tree (create-modif-tree
+                        selected
+                        (-> (ctm/empty-modifiers)
+                            (ctm/set-resize (gpt/point -1.0 1.0) origin)
+                            (ctm/move (gpt/point (:width selrect) 0))))]
+
+        (rx/of (set-modifiers modif-tree true)
                (apply-modifiers))))))
 
 (defn flip-vertical-selected []
@@ -867,11 +868,13 @@
             selected (wsh/lookup-selected state {:omit-blocked? true})
             shapes   (map #(get objects %) selected)
             selrect  (gsh/selection-rect shapes)
-            origin   (gpt/point (+ (:x selrect) (/ (:width selrect) 2)) (:y selrect))]
+            origin   (gpt/point (+ (:x selrect) (/ (:width selrect) 2)) (:y selrect))
 
-        (rx/of (set-modifiers selected
-                              (-> (ctm/empty-modifiers)
-                                  (ctm/set-resize (gpt/point 1.0 -1.0) origin)
-                                  (ctm/move (gpt/point 0 (:height selrect))))
-                              true)
+            modif-tree (create-modif-tree
+                        selected
+                        (-> (ctm/empty-modifiers)
+                            (ctm/set-resize (gpt/point 1.0 -1.0) origin)
+                            (ctm/move (gpt/point 0 (:height selrect)))))]
+
+        (rx/of (set-modifiers modif-tree true)
                (apply-modifiers))))))

frontend/src/app/main/snap.cljs

@@ -358,7 +358,8 @@
   "Snaps a position given an old snap to a different position. We use this to provide a temporal
   snap while the new is being processed."
   [[position [snap-pos snap-delta]]]
-  (if (some? snap-delta)
+  (if (nil? snap-delta)
+    position
     (let [dx (if (not= 0 (:x snap-delta))
                (- (+ (:x snap-pos) (:x snap-delta)) (:x position))
                0)
@@ -372,6 +373,4 @@
           dy (if (> (mth/abs dy) snap-accuracy) 0 dy)]
       (-> position
           (update :x + dx)
-          (update :y + dy)))
-
-    position))
+          (update :y + dy)))))

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

@@ -68,24 +68,21 @@
 
       [:g.frame-children
        (for [shape shapes]
-         [:g.ws-shape-wrapper
+         [:g.ws-shape-wrapper {:key (:id shape)}
           (cond
             (not (cph/frame-shape? shape))
             [:& shape-wrapper
-             {:shape shape
-              :key (:id shape)}]
+             {:shape shape}]
 
             (cph/root-frame? shape)
             [:& root-frame-wrapper
              {:shape shape
-              :key (:id shape)
               :objects (get frame-objects (:id shape))
               :thumbnail? (not (contains? active-frames (:id shape)))}]
 
             :else
             [:& nested-frame-wrapper
              {:shape shape
-              :key (:id shape)
               :objects (get frame-objects (:id shape))}])])]]]))
 
 (mf/defc shape-wrapper

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

@@ -84,38 +84,38 @@
      [:div.layout-behavior.horizontal
       [:button.behavior-btn.tooltip.tooltip-bottom
        {:alt "Fix width"
-        :class  (dom/classnames :activated (= layout-h-behavior :fix))
+        :class  (dom/classnames :active (= layout-h-behavior :fix))
         :on-click #(on-change-behavior :h :fix)}
        i/auto-fix-layout]
       (when fill?
         [:button.behavior-btn.tooltip.tooltip-bottom
          {:alt "Width 100%"
-          :class  (dom/classnames :activated (= layout-h-behavior :fill))
+          :class  (dom/classnames :active (= layout-h-behavior :fill))
           :on-click #(on-change-behavior :h :fill)}
           i/auto-fill])
       (when auto?
         [:button.behavior-btn.tooltip.tooltip-bottom
          {:alt "Fit content"
-          :class  (dom/classnames :activated (= layout-v-behavior :auto))
+          :class  (dom/classnames :active (= layout-v-behavior :auto))
           :on-click #(on-change-behavior :h :auto)}
          i/auto-hug])]
 
      [:div.layout-behavior
       [:button.behavior-btn.tooltip.tooltip-bottom
        {:alt "Fix height"
-        :class  (dom/classnames :activated (= layout-v-behavior :fix))
+        :class  (dom/classnames :active (= layout-v-behavior :fix))
         :on-click #(on-change-behavior :v :fix)}
         i/auto-fix-layout]
       (when fill?
         [:button.behavior-btn.tooltip.tooltip-bottom
          {:alt "Height 100%"
-          :class  (dom/classnames :activated (= layout-v-behavior :fill))
+          :class  (dom/classnames :active (= layout-v-behavior :fill))
           :on-click #(on-change-behavior :v :fill)}
          i/auto-fill])
       (when auto?
         [:button.behavior-btn.tooltip.tooltip-bottom-left
          {:alt "Fit content"
-          :class  (dom/classnames :activated (= layout-v-behavior :auto))
+          :class  (dom/classnames :active (= layout-v-behavior :auto))
           :on-click #(on-change-behavior :v :auto)}
          i/auto-hug])]]))
 

frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs

@@ -47,7 +47,7 @@
        [:*
         [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values}]
 
-        (when (or (:layout shape) is-layout-child?)
+        (when is-layout-child?
           [:& layout-item-menu
            {:ids ids
             :type type

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

@@ -9,7 +9,7 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.geom.shapes :as gsh]
-   [app.common.geom.shapes.layout :as gsl]
+   [app.common.geom.shapes.flex-layout :as gsl]
    [app.common.pages.helpers :as cph]
    [rumext.v2 :as mf]))