From f9700eb32e0b161f505199fb8babb561d386c8c3 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 21 Jan 2025 15:50:56 +0100 Subject: [PATCH] :sparkles: Resize frame to fit content --- CHANGES.md | 1 + common/src/app/common/geom/shapes.cljc | 5 ++ common/src/app/common/geom/shapes/bounds.cljc | 90 +++++++++++-------- .../src/app/common/geom/shapes/fit_frame.cljc | 47 ++++++++++ .../app/common/geom/shapes/transforms.cljc | 2 +- .../resources/images/icons/fit-content.svg | 1 + .../app/main/data/workspace/shortcuts.cljs | 5 ++ .../app/main/data/workspace/transforms.cljs | 34 +++++++ .../main/ui/ds/foundations/assets/icon.cljs | 1 + .../sidebar/options/menus/measures.cljs | 17 +++- .../sidebar/options/menus/measures.scss | 4 +- frontend/translations/en.po | 3 + frontend/translations/es.po | 3 + 13 files changed, 170 insertions(+), 43 deletions(-) create mode 100644 common/src/app/common/geom/shapes/fit_frame.cljc create mode 100644 frontend/resources/images/icons/fit-content.svg diff --git a/CHANGES.md b/CHANGES.md index d65131aba..798211c13 100644 --- a/CHANGES.md +++ b/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 diff --git a/common/src/app/common/geom/shapes.cljc b/common/src/app/common/geom/shapes.cljc index 5555f9386..2f0c29df7 100644 --- a/common/src/app/common/geom/shapes.cljc +++ b/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) diff --git a/common/src/app/common/geom/shapes/bounds.cljc b/common/src/app/common/geom/shapes/bounds.cljc index 869b7503b..8754c6f12 100644 --- a/common/src/app/common/geom/shapes/bounds.cljc +++ b/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,41 +65,46 @@ (grc/make-rect filter-x filter-y filter-w filter-h))) (defn get-rect-filter-bounds - [selrect filters blur-value] - (let [bounds-xf (comp - (filter #(= :drop-shadow (:type %))) - (map (partial calculate-filter-bounds selrect))) - delta-blur (* blur-value 2)] - (-> (into [selrect] bounds-xf filters) - (grc/join-rects) - (update :x - delta-blur) - (update :y - delta-blur) - (update :x1 - delta-blur) - (update :y1 - delta-blur) - (update :x2 + delta-blur) - (update :y2 + delta-blur) - (update :width + (* delta-blur 2)) - (update :height + (* delta-blur 2))))) + ([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 #(and (not ignore-shadow-margin?) + (= :drop-shadow (:type %)))) + (map (partial calculate-filter-bounds selrect))) + delta-blur (* blur-value 2)] + (-> (into [selrect] bounds-xf filters) + (grc/join-rects) + (update :x - delta-blur) + (update :y - delta-blur) + (update :x1 - delta-blur) + (update :y1 - delta-blur) + (update :x2 + delta-blur) + (update :y2 + delta-blur) + (update :width + (* delta-blur 2)) + (update :height + (* delta-blur 2)))))) (defn get-shape-filter-bounds - [shape] - (if (and (cfh/svg-raw-shape? shape) - (not= :svg (dm/get-in shape [:content :tag]))) - (dm/get-prop shape :selrect) - (let [filters (shape->filters shape) - blur-value (or (-> shape :blur :value) 0) - srect (-> (dm/get-prop shape :points) - (grc/points->rect))] - (get-rect-filter-bounds srect filters blur-value)))) + ([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) + (let [filters (shape->filters shape) + blur-value (or (-> shape :blur :value) 0) + srect (-> (dm/get-prop shape :points) + (grc/points->rect))] + (get-rect-filter-bounds srect filters blur-value ignore-shadow-margin?))))) (defn calculate-padding ([shape] - (calculate-padding shape false)) - ([shape ignore-margin?] + (calculate-padding shape false false)) + ([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)) - ([shape ignore-margin?] - (-> (get-shape-filter-bounds shape) - (add-padding (calculate-padding shape ignore-margin?))))) + (calculate-base-bounds shape true false)) + ([shape ignore-margin? ignore-shadow-margin?] + (-> (get-shape-filter-bounds shape ignore-shadow-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}}] - (let [base-bounds (calculate-base-bounds shape ignore-margin?) + ([objects shape {:keys [ignore-margin? ignore-shadow-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}}] - (get-object-bounds [] shape {:ignore-margin? ignore-margin?}))) + ([shape {:keys [ignore-margin? ignore-shadow-margin?] :or {ignore-margin? false ignore-shadow-margin? false}}] + (get-object-bounds [] shape {:ignore-margin? ignore-margin? + :ignore-shadow-margin? ignore-shadow-margin?}))) diff --git a/common/src/app/common/geom/shapes/fit_frame.cljc b/common/src/app/common/geom/shapes/fit_frame.cljc new file mode 100644 index 000000000..6ba24b589 --- /dev/null +++ b/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))))))) diff --git a/common/src/app/common/geom/shapes/transforms.cljc b/common/src/app/common/geom/shapes/transforms.cljc index 079fe1de9..af52ac238 100644 --- a/common/src/app/common/geom/shapes/transforms.cljc +++ b/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] diff --git a/frontend/resources/images/icons/fit-content.svg b/frontend/resources/images/icons/fit-content.svg new file mode 100644 index 000000000..89c3733c0 --- /dev/null +++ b/frontend/resources/images/icons/fit-content.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/app/main/data/workspace/shortcuts.cljs b/frontend/src/app/main/data/workspace/shortcuts.cljs index f7a7b591c..f648c7479 100644 --- a/frontend/src/app/main/data/workspace/shortcuts.cljs +++ b/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") diff --git a/frontend/src/app/main/data/workspace/transforms.cljs b/frontend/src/app/main/data/workspace/transforms.cljs index cef8b1dae..b8376fad1 100644 --- a/frontend/src/app/main/data/workspace/transforms.cljs +++ b/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})))))) diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs index e3b83ab97..531d7763f 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs +++ b/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") diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index 2326b30e2..36a952f52 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss index 98f52a5cf..266014808 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss +++ b/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; diff --git a/frontend/translations/en.po b/frontend/translations/en.po index e3296a5e4..37080edc3 100644 --- a/frontend/translations/en.po +++ b/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" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index c091f4044..ebc14c09d 100644 --- a/frontend/translations/es.po +++ b/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"