Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-19 19:21:23 -05:00
Code Issues Activity

🐛 Fix problem with auto-width and transforms

Browse source
This commit is contained in:
alonso.torres 2022-12-16 11:37:11 +01:00
parent 8ffe023d3e
commit 1fe1a352c3
7 changed files with 40 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
common/src/app/common/geom/shapes/constraints.cljc
View file

@ -6,7 +6,6 @@
(ns app.common.geom.shapes.constraints
(:require
[app.common.geom.matrix :as gmt]
[app.common.geom.point :as gpt]
[app.common.geom.shapes.intersect :as gsi]
[app.common.geom.shapes.points :as gpo]
@ -184,7 +183,7 @@
(ctm/move-modifiers (displacement end-before end-after))))
(defmethod constraint-modifier :fixed
[_ axis child-points-before parent-points-before child-points-after parent-points-after {:keys [transform transform-inverse]} modifiers]
[_ axis child-points-before parent-points-before child-points-after parent-points-after]
(let [;; Same as constraint end
end-before (end-vector axis child-points-before parent-points-before)
end-after (end-vector axis child-points-after parent-points-after)
@ -205,14 +204,11 @@
resize-origin (gpo/origin child-points-after)
modif-transform (ctm/modifiers->transform modifiers)
modif-transform-inverse (gmt/inverse modif-transform)
resize-transform (gmt/multiply modif-transform transform)
resize-transform-inverse (gmt/multiply transform-inverse modif-transform-inverse)
[_ transform transform-inverse] (gtr/calculate-geometry parent-points-after)
resize-vector (get-scale axis scale)]
(-> (ctm/empty)
(ctm/resize resize-vector resize-origin resize-transform resize-transform-inverse)
(ctm/resize resize-vector resize-origin transform transform-inverse)
(ctm/move disp-start))))
(defmethod constraint-modifier :center
@ -253,7 +249,6 @@
(defn normalize-modifiers
"Before aplying constraints we need to remove the deformation caused by the resizing of the parent"
[constraints-h constraints-v modifiers
{:keys [transform transform-inverse] :as parent}
child-bounds transformed-child-bounds parent-bounds transformed-parent-bounds]
(let [child-bb-before (gpo/parent-coords-bounds child-bounds parent-bounds)
@ -268,17 +263,11 @@
(/ (gpo/height-points child-bb-before) (gpo/height-points child-bb-after)))
resize-vector (gpt/point scale-x scale-y)
modif-transform (ctm/modifiers->transform modifiers)
modif-transform-inverse (gmt/inverse modif-transform)
resize-transform (gmt/multiply modif-transform transform)
resize-transform-inverse (gmt/multiply transform-inverse modif-transform-inverse)
resize-origin (gpo/origin transformed-child-bounds)]
resize-origin (gpo/origin transformed-child-bounds)
[_ transform transform-inverse] (gtr/calculate-geometry transformed-parent-bounds)]
(-> modifiers
(ctm/resize
resize-vector
resize-origin
resize-transform
resize-transform-inverse))))
(ctm/resize resize-vector resize-origin transform transform-inverse))))
(defn calc-child-modifiers
[parent child modifiers ignore-constraints child-bounds parent-bounds transformed-parent-bounds]
@ -314,8 +303,7 @@
modifiers (ctm/select-child modifiers)
transformed-child-bounds (gtr/transform-bounds child-bounds modifiers)
modifiers (normalize-modifiers constraints-h constraints-v
modifiers parent
modifiers (normalize-modifiers constraints-h constraints-v modifiers
child-bounds transformed-child-bounds parent-bounds transformed-parent-bounds)
transformed-child-bounds (gtr/transform-bounds child-bounds modifiers)
@ -324,13 +312,11 @@
modifiers-h (constraint-modifier (constraints-h const->type+axis) :x
child-points-before parent-bounds
child-points-after transformed-parent-bounds
parent modifiers)
child-points-after transformed-parent-bounds)
modifiers-v (constraint-modifier (constraints-v const->type+axis) :y
child-points-before parent-bounds
child-points-after transformed-parent-bounds
parent modifiers)]
child-points-after transformed-parent-bounds)]
(-> modifiers
(ctm/add-modifiers modifiers-h)
(ctm/add-modifiers modifiers-v))))))

19
common/src/app/common/geom/shapes/flex_layout/modifiers.cljc
View file

@ -9,12 +9,15 @@
[app.common.geom.point :as gpt]
[app.common.geom.shapes.flex-layout.positions :as fpo]
[app.common.geom.shapes.points :as gpo]
[app.common.geom.shapes.transforms :as gtr]
[app.common.types.modifiers :as ctm]
[app.common.types.shape.layout :as ctl]))
(defn calc-fill-width-data
"Calculates the size and modifiers for the width of an auto-fill child"
[{:keys [transform transform-inverse] :as parent}
[parent
transform
transform-inverse
child
child-origin child-width
{:keys [children-data line-width] :as layout-data}]
@ -36,7 +39,8 @@
(defn calc-fill-height-data
"Calculates the size and modifiers for the height of an auto-fill child"
[{:keys [transform transform-inverse] :as parent}
[parent
transform transform-inverse
child
child-origin child-height
{:keys [children-data line-height] :as layout-data}]
@ -58,13 +62,17 @@
(defn layout-child-modifiers
"Calculates the modifiers for the layout"
[parent child child-bounds layout-line]
[parent parent-bounds child child-bounds layout-line]
(let [child-origin (gpo/origin child-bounds)
child-width (gpo/width-points child-bounds)
child-height (gpo/height-points child-bounds)
fill-width (when (ctl/fill-width? child) (calc-fill-width-data parent child child-origin child-width layout-line))
fill-height (when (ctl/fill-height? child) (calc-fill-height-data parent child child-origin child-height layout-line))
[_ transform transform-inverse]
(when (or (ctl/fill-width? child) (ctl/fill-width? child))
(gtr/calculate-geometry @parent-bounds))
fill-width (when (ctl/fill-width? child) (calc-fill-width-data parent transform transform-inverse child child-origin child-width layout-line))
fill-height (when (ctl/fill-height? child) (calc-fill-height-data parent transform transform-inverse child child-origin child-height layout-line))
child-width (or (:width fill-width) child-width)
child-height (or (:height fill-height) child-height)
@ -78,5 +86,4 @@
(cond-> fill-width (ctm/add-modifiers (:modifiers fill-width)))
(cond-> fill-height (ctm/add-modifiers (:modifiers fill-height)))
(ctm/move move-vec))]
[modifiers layout-line]))

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

@ -160,7 +160,7 @@
(set-child-modifiers [[layout-line modif-tree] [child-bounds child]]
(let [[modifiers layout-line]
(gcl/layout-child-modifiers parent child child-bounds layout-line)
(gcl/layout-child-modifiers parent transformed-parent-bounds child child-bounds layout-line)
modif-tree
(cond-> modif-tree

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

@ -12,16 +12,19 @@
[app.common.geom.shapes.common :as gco]
[app.common.geom.shapes.points :as gpo]
[app.common.geom.shapes.rect :as gpr]
[app.common.geom.shapes.transforms :as gtr]
[app.common.math :as mth]
[app.common.pages.helpers :as cph]
[app.common.types.modifiers :as ctm]))
(defn size-pixel-precision
[modifiers {:keys [transform transform-inverse] :as shape} points]
[modifiers shape points]
(let [origin (gpo/origin points)
curr-width (gpo/width-points points)
curr-height (gpo/height-points points)
[_ transform transform-inverse] (gtr/calculate-geometry points)
path? (cph/path-shape? shape)
vertical-line? (and path? (<= curr-width 0.01))
horizontal-line? (and path? (<= curr-height 0.01))

5
common/src/app/common/types/modifiers.cljc
View file

@ -304,6 +304,11 @@
(-> (or modifiers (empty))
(update :structure-child conj (change-property-op property value))))
(defn change-parent-property
[modifiers property value]
(-> (or modifiers (empty))
(update :structure-parent conj (change-property-op property value))))
(defn- concat-geometry
[operations other merge?]

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

@ -103,7 +103,7 @@
(defn start-resize
"Enter mouse resize mode, until mouse button is released."
[handler ids shape]
(letfn [(resize [shape objects initial layout [point lock? center? point-snap]]
(letfn [(resize [shape initial layout [point lock? center? point-snap]]
(let [{:keys [width height]} (:selrect shape)
{:keys [rotation]} shape
@ -169,22 +169,11 @@
;; When the horizontal/vertical scale a flex children with auto/fill
;; we change it too fixed
layout? (ctl/layout? shape)
layout-child? (ctl/layout-child? objects shape)
auto-width? (ctl/auto-width? shape)
fill-width? (ctl/fill-width? shape)
auto-height? (ctl/auto-height? shape)
fill-height? (ctl/fill-height? shape)
set-fix-width?
(and (not (mth/close? (:x scalev) 1))
(or (and (or layout? layout-child?) auto-width?)
(and layout-child? fill-width?)))
(not (mth/close? (:x scalev) 1))
set-fix-height?
(and (not (mth/close? (:y scalev) 1))
(or (and (or layout? layout-child?) auto-height?)
(and layout-child? fill-height?)))
(not (mth/close? (:y scalev) 1))
modifiers
(-> (ctm/empty)
@ -193,10 +182,10 @@
(ctm/resize scalev resize-origin shape-transform shape-transform-inverse)
(cond-> set-fix-width?
(ctm/change-property :layout-item-h-sizing :fix))
(ctm/change-parent-property :layout-item-h-sizing :fix))
(cond-> set-fix-height?
(ctm/change-property :layout-item-v-sizing :fix))
(ctm/change-parent-property :layout-item-v-sizing :fix))
(cond-> scale-text
(ctm/scale-content (:x scalev))))
@ -234,7 +223,7 @@
(rx/switch-map (fn [[point _ _ :as current]]
(->> (snap/closest-snap-point page-id resizing-shapes objects layout zoom focus point)
(rx/map #(conj current %)))))
(rx/mapcat (partial resize shape objects initial-position layout))
(rx/mapcat (partial resize shape initial-position layout))
(rx/take-until stoper))
(rx/of (dwm/apply-modifiers)
(finish-transform))))))))

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View file

@ -143,7 +143,7 @@
(get-layout-flex-icon :align-self align is-col?)])]))
(mf/defc layout-item-menu
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]}
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "is-layout-child?"]))]}
[{:keys [ids values is-layout-child? is-layout-container?] :as props}]
(let [open? (mf/use-state false)