Merge pull request #2602 from penpot/alotor-performance-enhance

✨ Viewport and hug performance enhances

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

@@ -14,6 +14,7 @@
    [app.common.types.shape-tree :as ctt]
    [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.selection :as dws]
+   [app.main.data.workspace.shapes-update-layout :as dwul]
    [app.main.data.workspace.state-helpers :as wsh]
    [beicon.core :as rx]
    [potok.core :as ptk]))
@@ -174,15 +175,22 @@
                   (cph/frame-shape? shape)
                   (remove-frame-changes it page-id shape objects))))
 
+            selected (wsh/lookup-selected state)
             changes-list (sequence
                           (keep prepare)
-                          (wsh/lookup-selected state))
+                          selected)
+
+            parents (into #{}
+                          (comp (map #(cph/get-parent objects %))
+                                (keep :id))
+                          selected)
 
             changes {:redo-changes (vec (mapcat :redo-changes changes-list))
                      :undo-changes (vec (mapcat :undo-changes changes-list))
                      :origin it}]
 
-        (rx/of (dch/commit-changes changes))))))
+        (rx/of (dch/commit-changes changes)
+               (dwul/update-layout-positions parents))))))
 
 (def mask-group
   (ptk/reify ::mask-group

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

@@ -443,7 +443,8 @@
 
              exclude-frames-siblings
              (into exclude-frames
-                   (mapcat (partial cph/get-siblings-ids objects))
+                   (comp (mapcat (partial cph/get-siblings-ids objects))
+                         (filter (partial ctl/layout-child-id? objects)))
                    selected)
 
              fix-axis

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

@@ -80,7 +80,8 @@
         modifiers         (mf/deref refs/workspace-modifiers)
 
         objects-modified  (mf/with-memo [base-objects modifiers]
-                            (gsh/apply-objects-modifiers base-objects modifiers))
+                            (gsh/apply-objects-modifiers base-objects modifiers selected))
+
         background        (get options :background clr/canvas)
 
         ;; STATE
@@ -423,11 +424,17 @@
                                    :hover-top-frame-id @hover-top-frame-id
                                    :zoom zoom}])
 
+       (when (debug? :layout-content-bounds)
+         [:& wvd/debug-content-bounds {:selected-shapes selected-shapes
+                                       :objects objects-modified
+                                       :hover-top-frame-id @hover-top-frame-id
+                                       :zoom zoom}])
+
        (when (debug? :layout-lines)
-         [:& wvd/debug-layout {:selected-shapes selected-shapes
-                               :objects objects-modified
-                               :hover-top-frame-id @hover-top-frame-id
-                               :zoom zoom}])
+         [:& wvd/debug-layout-lines {:selected-shapes selected-shapes
+                                     :objects objects-modified
+                                     :hover-top-frame-id @hover-top-frame-id
+                                     :zoom zoom}])
 
        (when (debug? :parent-bounds)
          [:& wvd/debug-parent-bounds {:selected-shapes selected-shapes

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

@@ -19,7 +19,7 @@
    [rumext.v2 :as mf]))
 
 ;; Helper to debug the bounds when set the "hug" content property
-#_(mf/defc debug-layout
+(mf/defc debug-content-bounds
   "Debug component to show the auto-layout drop areas"
   {::mf/wrap-props false}
   [props]
@@ -36,27 +36,12 @@
 
     (when (and shape (:layout shape))
       (let [children (cph/get-immediate-children objects (:id shape))
-            layout-data (gsl/calc-layout-data shape children)
+            layout-bounds (gsl/layout-content-bounds (d/lazy-map (keys objects) #(dm/get-in objects [% :points])) shape children)]
+        [:g.debug-layout {:pointer-events "none"}
+         [:polygon {:points (->> layout-bounds (map #(dm/fmt "%, %" (:x %) (:y %))) (str/join " "))
+                    :style  {:stroke "red" :fill "none"}}]]))))
 
-            {pad-top :p1 pad-right :p2 pad-bottom :p3 pad-left :p4} (:layout-padding shape)
-            pad-top (or pad-top 0)
-            pad-right (or pad-right 0)
-            pad-bottom (or pad-bottom 0)
-            pad-left (or pad-left 0)
-
-            layout-bounds (gsl/layout-content-bounds shape children)]
-        [:g.debug-layout {:pointer-events "none"
-                          :transform (gsh/transform-str shape)}
-
-
-         [:rect {:x      (:x layout-bounds)
-                 :y      (:y layout-bounds)
-                 :width  (:width layout-bounds)
-                 :height (:height layout-bounds)
-                 :style  {:stroke "red"
-                          :fill "none"}}]]))))
-
-(mf/defc debug-layout
+(mf/defc debug-layout-lines
   "Debug component to show the auto-layout drop areas"
   {::mf/wrap-props false}
   [props]

frontend/src/debug.cljs

@@ -74,6 +74,9 @@
     ;; Display the layout lines
     :layout-lines
 
+    ;; Display the bounds for the hug content adjust
+    :layout-content-bounds
+
     ;; Makes the pixel grid red so its more visibile
     :pixel-grid