✨ Resize frame to fit content

CHANGES.md

@@ -14,6 +14,7 @@
 - Shareable link pointing to an specific board.
 - Copy styles in CSS
 - Copy/paste shape styles (fills, strokes, shadows, etc..)
+- Resize board to fit content option
 
 ### :bug: Bugs fixed
 

common/src/app/common/geom/shapes.cljc

@@ -14,6 +14,7 @@
    [app.common.geom.shapes.common :as gco]
    [app.common.geom.shapes.constraints :as gct]
    [app.common.geom.shapes.corners :as gsc]
+   [app.common.geom.shapes.fit-frame :as gsff]
    [app.common.geom.shapes.intersect :as gsi]
    [app.common.geom.shapes.path :as gsp]
    [app.common.geom.shapes.transforms :as gtr]
@@ -166,6 +167,7 @@
 (dm/export gtr/update-group-selrect)
 (dm/export gtr/update-mask-selrect)
 (dm/export gtr/update-bool-selrect)
+(dm/export gtr/apply-transform)
 (dm/export gtr/transform-shape)
 (dm/export gtr/transform-selrect)
 (dm/export gtr/transform-selrect-matrix)
@@ -204,3 +206,6 @@
 
 ;; Rect
 (dm/export grc/rect->points)
+
+;;
+(dm/export gsff/fit-frame-modifiers)

common/src/app/common/geom/shapes/bounds.cljc

@@ -10,7 +10,7 @@
    [app.common.data.macros :as dm]
    [app.common.files.helpers :as cfh]
    [app.common.geom.rect :as grc]
-   [app.common.geom.shapes :as gsh]
+   [app.common.geom.shapes.path :as gsp]
    [app.common.math :as mth]))
 
 (defn shape-stroke-margin
@@ -65,9 +65,12 @@
     (grc/make-rect filter-x filter-y filter-w filter-h)))
 
 (defn get-rect-filter-bounds
-  [selrect filters blur-value]
+  ([selrect filters blur-value]
+   (get-rect-filter-bounds selrect filters blur-value false))
+  ([selrect filters blur-value ignore-shadow-margin?]
    (let [bounds-xf  (comp
-                    (filter #(= :drop-shadow (:type %)))
+                     (filter #(and (not ignore-shadow-margin?)
+                                   (= :drop-shadow (:type %))))
                      (map (partial calculate-filter-bounds selrect)))
          delta-blur (* blur-value 2)]
      (-> (into [selrect] bounds-xf filters)
@@ -79,10 +82,12 @@
          (update :x2 + delta-blur)
          (update :y2 + delta-blur)
          (update :width + (* delta-blur 2))
-        (update :height + (* delta-blur 2)))))
+         (update :height + (* delta-blur 2))))))
 
 (defn get-shape-filter-bounds
-  [shape]
+  ([shape]
+   (get-shape-filter-bounds shape false))
+  ([shape ignore-shadow-margin?]
    (if (and (cfh/svg-raw-shape? shape)
             (not= :svg (dm/get-in shape [:content :tag])))
      (dm/get-prop shape :selrect)
@@ -90,16 +95,16 @@
            blur-value (or (-> shape :blur :value) 0)
            srect      (-> (dm/get-prop shape :points)
                           (grc/points->rect))]
-      (get-rect-filter-bounds srect filters blur-value))))
+       (get-rect-filter-bounds srect filters blur-value ignore-shadow-margin?)))))
 
 (defn calculate-padding
   ([shape]
-   (calculate-padding shape false))
+   (calculate-padding shape false false))
-  ([shape ignore-margin?]
+  ([shape ignore-margin? ignore-shadow-margin?]
    (let [strokes (:strokes shape)
 
          open-path?    (and ^boolean (cfh/path-shape? shape)
-                            ^boolean (gsh/open-path? shape))
+                            ^boolean (gsp/open-path? shape))
 
          stroke-width
          (->> strokes
@@ -128,7 +133,14 @@
               (map #(case (:style % :drop-shadow)
                       :drop-shadow (+ (mth/abs (:offset-y %)) (* (:spread %) 2) (* (:blur %) 2) 10)
                       0))
-              (reduce d/max 0))]
+              (reduce d/max 0))
+
+         shadow-height
+         (if ignore-shadow-margin? 0 shadow-height)
+
+         shadow-width
+         (if ignore-shadow-margin? 0 shadow-width)]
+
      {:horizontal (mth/ceil (+ stroke-margin shadow-width))
       :vertical (mth/ceil (+ stroke-margin shadow-height))})))
 
@@ -148,16 +160,17 @@
 
 (defn calculate-base-bounds
   ([shape]
-   (calculate-base-bounds shape true))
+   (calculate-base-bounds shape true false))
-  ([shape ignore-margin?]
+  ([shape ignore-margin? ignore-shadow-margin?]
-   (-> (get-shape-filter-bounds shape)
+   (-> (get-shape-filter-bounds shape ignore-shadow-margin?)
-       (add-padding (calculate-padding shape ignore-margin?)))))
+       (add-padding (calculate-padding shape ignore-margin? ignore-shadow-margin?)))))
 
 (defn get-object-bounds
   ([objects shape]
    (get-object-bounds objects shape nil))
-  ([objects shape {:keys [ignore-margin?] :or {ignore-margin? true}}]
+  ([objects shape {:keys [ignore-margin? ignore-shadow-margin?]
-   (let [base-bounds (calculate-base-bounds shape ignore-margin?)
+                   :or {ignore-margin? true ignore-shadow-margin? false}}]
+   (let [base-bounds (calculate-base-bounds shape ignore-margin? ignore-shadow-margin?)
          bounds
          (cond
            (or (empty? (:shapes shape))
@@ -193,10 +206,11 @@
          filters (shape->filters shape)
          blur-value (or (-> shape :blur :value) 0)]
 
-     (get-rect-filter-bounds children-bounds filters blur-value))))
+     (get-rect-filter-bounds children-bounds filters blur-value ignore-shadow-margin?))))
 
 (defn get-frame-bounds
   ([shape]
    (get-frame-bounds shape nil))
-  ([shape {:keys [ignore-margin?] :or {ignore-margin? false}}]
+  ([shape {:keys [ignore-margin? ignore-shadow-margin?] :or {ignore-margin? false ignore-shadow-margin? false}}]
-   (get-object-bounds [] shape {:ignore-margin? ignore-margin?})))
+   (get-object-bounds [] shape {:ignore-margin? ignore-margin?
+                                :ignore-shadow-margin? ignore-shadow-margin?})))

common/src/app/common/geom/shapes/fit_frame.cljc

@@ -0,0 +1,47 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.common.geom.shapes.fit-frame
+  (:require
+   [app.common.data :as d]
+   [app.common.files.helpers :as cfh]
+   [app.common.geom.matrix :as gmt]
+   [app.common.geom.point :as gpt]
+   [app.common.geom.rect :as grc]
+   [app.common.geom.shapes.bounds :as gsb]
+   [app.common.geom.shapes.common :as gco]
+   [app.common.geom.shapes.transforms :as gtr]
+   [app.common.types.modifiers :as ctm]))
+
+(defn fit-frame-modifiers
+  [objects {:keys [id transform transform-inverse selrect points show-content] :as frame}]
+  (let [children (cfh/get-immediate-children objects (:id frame))]
+    (when (d/not-empty? children)
+      (let [ids (cfh/get-children-ids objects id)
+            center (gco/shape->center frame)
+
+            transform-inverse (gmt/transform-in center transform-inverse)
+            transform         (gmt/transform-in center transform)
+
+            ;; Update the object map with the reverse transform
+            tr-objects
+            (reduce #(update %1 %2 gtr/apply-transform transform-inverse) objects ids)
+
+            bounds
+            (->> children
+                 (map #(get tr-objects (:id %)))
+                 (map #(gsb/get-object-bounds tr-objects % {:ignore-shadow-margin? show-content
+                                                            :ignore-margin? false}))
+                 (grc/join-rects))
+
+            new-origin (gpt/transform (gpt/point bounds) transform)
+            origin     (first points)
+            resize-v   (gpt/point (/ (:width bounds) (:width selrect))
+                                  (/ (:height bounds) (:height selrect)))]
+
+        (-> (ctm/empty)
+            (ctm/resize-parent resize-v origin transform transform-inverse)
+            (ctm/move-parent (gpt/to-vec origin new-origin)))))))

common/src/app/common/geom/shapes/transforms.cljc

@@ -373,7 +373,7 @@
             (assoc :points points)
             (assoc :rotation rotation))))))
 
-(defn- apply-transform
+(defn apply-transform
   "Given a new set of points transformed, set up the rectangle so it keeps
   its properties. We adjust de x,y,width,height and create a custom transform"
   [shape transform-mtx]

frontend/resources/images/icons/fit-content.svg

@@ -0,0 +1 @@
+<svg width="17" xmlns="http://www.w3.org/2000/svg" height="17" viewBox="512.5 295.5 17 17" stroke-linecap="round"><path d="M526.500,301.500L523.500,301.500M523.500,301.500L523.500,298.500M523.500,301.500L527.500,297.500M526.500,306.500L523.500,306.500M523.500,306.500L523.500,309.500M523.500,306.500L527.500,310.500M515.500,301.500L518.500,301.500M518.500,301.500L518.500,298.500M518.500,301.500L514.500,297.500M515.500,306.500L518.500,306.500M518.500,306.500L518.500,309.500M518.500,306.500L514.500,310.500" style="fill: none;" class="fills"/><g class="strokes"><path d="M526.500,301.500L523.500,301.500M523.500,301.500L523.500,298.500M523.500,301.500L527.500,297.500M526.500,306.500L523.500,306.500M523.500,306.500L523.500,309.500M523.500,306.500L527.500,310.500M515.500,301.500L518.500,301.500M518.500,301.500L518.500,298.500M518.500,301.500L514.500,297.500M515.500,306.500L518.500,306.500M518.500,306.500L518.500,309.500M518.500,306.500L514.500,310.500" /></g></svg>

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;
 

frontend/translations/en.po

@@ -5550,6 +5550,9 @@ msgstr "Size"
 msgid "workspace.options.size-presets"
 msgstr "Size presets"
 
+msgid "workspace.options.fit-content"
+msgstr "Resize board to fit content"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs:43
 msgid "workspace.options.stroke"
 msgstr "Stroke"

frontend/translations/es.po

@@ -5583,6 +5583,9 @@ msgstr "Tamaño"
 msgid "workspace.options.size-presets"
 msgstr "Tamaños predefinidos"
 
+msgid "workspace.options.fit-content"
+msgstr "Redimensionar para ajustar al contenido"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs:43
 msgid "workspace.options.stroke"
 msgstr "Borde"