3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-03 17:08:31 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Resize frame to fit content

Browse source
This commit is contained in:
alonso.torres 2025-01-21 15:50:56 +01:00
parent 6573311aab
commit f9700eb32e
13 changed files with 170 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/images/icons/fit-content.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 971 B

5
frontend/src/app/main/data/workspace/shortcuts.cljs
View file

@ -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")

34
frontend/src/app/main/data/workspace/transforms.cljs
View file

@ -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}))))))

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

@ -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")

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

@ -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

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

@ -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;

3
frontend/translations/en.po
View file

@ -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"

3
frontend/translations/es.po
View file

@ -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"