Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-08 08:09:14 -05:00
Code Issues 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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

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

5
common/src/app/common/geom/shapes.cljc
View file

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

90
common/src/app/common/geom/shapes/bounds.cljc
View file

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

47
common/src/app/common/geom/shapes/fit_frame.cljc Normal file
View file

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

2
common/src/app/common/geom/shapes/transforms.cljc
View file

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

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"