✨ Resize frame to fit content

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

@@ -587,6 +587,11 @@
                           :subsections [:shape]
                           :fn #(emit-when-no-readonly (dw/create-bool :exclude))}
 
+   :fit-content-selected {:tooltip (ds/meta-shift (ds/alt "R"))
+                          :command (ds/c-mod "shift+alt+r")
+                          :subsections [:shape]
+                          :fn #(emit-when-no-readonly (dwt/selected-fit-content))}
+
    ;; THEME
    :toggle-theme         {:tooltip (ds/alt "M")
                           :command (ds/a-mod "m")

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

@@ -25,6 +25,7 @@
    [app.common.types.modifiers :as ctm]
    [app.common.types.shape-tree :as ctst]
    [app.common.types.shape.layout :as ctl]
+   [app.common.uuid :as uuid]
    [app.main.data.changes :as dch]
    [app.main.data.helpers :as dsh]
    [app.main.data.workspace.collapse :as dwc]
@@ -919,3 +920,36 @@
              center    (grc/rect->center selrect)
              modifiers (dwm/create-modif-tree selected (ctm/resize-modifiers (gpt/point 1.0 -1.0) center))]
          (rx/of (dwm/apply-modifiers {:modifiers modifiers :ignore-snap-pixel true})))))))
+
+(defn fit-layout-modifiers
+  [objects frame]
+  ;; Set temporaly the auto flag and calculate a reflow to resize and position
+  (let [objects
+        (-> objects
+            (assoc-in [(:id frame) :layout-item-h-sizing] :auto)
+            (assoc-in [(:id frame) :layout-item-v-sizing] :auto))]
+    (gm/set-objects-modifiers {(:id frame) {:modifiers (ctm/reflow-modifiers)}} objects)))
+
+(defn selected-fit-content
+  []
+  (ptk/reify ::selected-fit-content
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [objects    (dsh/lookup-page-objects state)
+            selected   (dsh/lookup-selected state)
+            undo-group (uuid/next)
+
+            modifiers
+            (->> selected
+                 (map (d/getf objects))
+                 (filter cfh/frame-shape?)
+                 (reduce
+                  (fn [modifiers frame]
+                    (if (ctl/any-layout? frame)
+                      (merge modifiers (fit-layout-modifiers objects frame))
+                      (let [new-modif (gsh/fit-frame-modifiers objects frame)]
+                        (cond-> modifiers
+                          (some? new-modif)
+                          (assoc (:id frame) {:modifiers new-modif})))))
+                  {}))]
+        (rx/of (dwm/apply-modifiers {:modifiers modifiers :undo-group undo-group}))))))

frontend/src/app/main/ui/ds/foundations/assets/icon.cljs

@@ -138,6 +138,7 @@
 (def ^:icon-id fill-content "fill-content")
 (def ^:icon-id filter "filter")
 (def ^:icon-id fixed-width "fixed-width")
+(def ^:icon-id fit-content "fit-content")
 (def ^:icon-id flex "flex")
 (def ^:icon-id flex-grid "flex-grid")
 (def ^:icon-id flex-horizontal "flex-horizontal")

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

@@ -17,6 +17,7 @@
    [app.main.data.workspace :as udw]
    [app.main.data.workspace.interactions :as dwi]
    [app.main.data.workspace.shapes :as dwsh]
+   [app.main.data.workspace.transforms :as dwt]
    [app.main.data.workspace.undo :as dwu]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -24,6 +25,7 @@
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.context :as muc]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.menus.border-radius :refer  [border-radius-menu]]
@@ -328,7 +330,12 @@
                  ;; interactions that navigate to it.
                (apply st/emit! (map #(dwi/remove-all-interactions-nav-to %) ids)))
 
-             (st/emit! (dwu/commit-undo-transaction undo-id)))))]
+             (st/emit! (dwu/commit-undo-transaction undo-id)))))
+
+        handle-fit-content
+        (mf/use-fn
+         (fn []
+           (st/emit! (dwt/selected-fit-content))))]
 
     [:div {:class (stl/css :element-set)}
      (when (and (options :presets)
@@ -372,7 +379,13 @@
                            :id "size-vertical"}]
          [:& radio-button {:icon i/size-horizontal
                            :value "horiz"
-                           :id "size-horizontal"}]]])
+                           :id "size-horizontal"}]]
+        [:> icon-button*
+         {:variant "ghost"
+          :aria-label (tr "workspace.options.fit-content")
+          :title (tr "workspace.options.fit-content")
+          :on-pointer-down handle-fit-content
+          :icon "fit-content"}]])
      (when (options :size)
        [:div {:class (stl/css :size)}
         [:div {:class (stl/css-case :width true

frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss

@@ -12,7 +12,8 @@
 }
 
 .presets {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto 38px;
   align-items: flex-start;
   gap: $s-4;
 }
@@ -22,7 +23,6 @@
   position: relative;
   display: flex;
   height: $s-32;
-  width: $s-188;
   padding: $s-8;
   border-radius: $br-8;