Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-09 16:48:16 -05:00
Code Issues Activity

Merge pull request #3775 from penpot/alotor-fix-layout

Browse source 
Bugfixes
This commit is contained in:
Pablo Alba 2023-11-07 19:01:18 +01:00 • committed by GitHub
commit 94c834ae5e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 125 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
common/src/app/common/data.cljc
View file

@ -250,22 +250,25 @@
#(patch-object % changes))
([object changes]
(->> changes
(reduce-kv
(fn [object key value]
(cond
(map? value)
(update object key patch-object value)
(if object
(->> changes
(reduce-kv
(fn [object key value]
(cond
(map? value)
(let [current (get object key)]
(assoc object key (patch-object current value)))
(and (nil? value) (record? object))
(assoc object key nil)
(and (nil? value) (record? object))
(assoc object key nil)
(nil? value)
(dissoc object key value)
(nil? value)
(dissoc object key value)
:else
(assoc object key value)))
object))))
:else
(assoc object key value)))
object))
changes)))
(defn remove-at-index
"Takes a vector and returns a vector with an element in the

1
common/src/app/common/geom/modif_tree.cljc
View file

@ -7,7 +7,6 @@
(ns app.common.geom.modif-tree
(:require
[app.common.data.macros :as dm]
[app.common.geom.shapes.min-size-layout]
[app.common.pages.helpers :as cph]
[app.common.types.modifiers :as ctm]))

7
common/src/app/common/geom/shapes/flex_layout/layout_data.cljc
View file

@ -70,11 +70,8 @@
child-max-width (ctl/child-max-width child)
child-max-height (ctl/child-max-height child)
[child-margin-top child-margin-right child-margin-bottom child-margin-left]
(ctl/child-margins child)
child-margin-width (+ child-margin-left child-margin-right)
child-margin-height (+ child-margin-top child-margin-bottom)
child-margin-width (ctl/child-width-margin child)
child-margin-height (ctl/child-height-margin child)
fill-width? (ctl/fill-width? child)
fill-height? (ctl/fill-height? child)

6
common/src/app/common/geom/shapes/grid_layout/layout_data.cljc
View file

@ -61,13 +61,15 @@
(defn child-min-width
[child child-bounds bounds objects]
(-child-min-width child child-bounds bounds objects))
(+ (ctl/child-width-margin child)
(-child-min-width child child-bounds bounds objects)))
(def -child-min-height nil)
(defn child-min-height
[child child-bounds bounds objects]
(-child-min-height child child-bounds bounds objects))
(+ (ctl/child-height-margin child)
(-child-min-height child child-bounds bounds objects)))
(defn layout-bounds
[parent shape-bounds]

85
common/src/app/common/geom/shapes/min_size_layout.cljc
View file

@ -17,53 +17,53 @@
(defn child-min-width
[child child-bounds bounds objects]
(let [min-width
(cond
(and (ctl/fill-width? child) (ctl/flex-layout? child))
(let [children (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})]
(max (ctl/child-min-width child)
(gpo/width-points (fb/layout-content-bounds bounds child children objects))))
(and (ctl/fill-width? child)
(ctl/grid-layout? child))
(let [children
(->> (cph/get-immediate-children objects (:id child) {:remove-hidden true})
(map #(vector @(get bounds (:id %)) %)))
layout-data (gd/calc-layout-data child @(get bounds (:id child)) children bounds objects true)]
(max (ctl/child-min-width child)
(gpo/width-points (gb/layout-content-bounds bounds child layout-data))))
(ctl/fill-width? child)
(ctl/child-min-width child)
(cond
(and (ctl/fill-width? child) (ctl/flex-layout? child))
(ctl/child-min-width child)
;; Uncomment this to activate "auto" as min size
#_(let [children (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})]
(max (ctl/child-min-width child)
(gpo/width-points (fb/layout-content-bounds bounds child children objects))))
:else
(gpo/width-points child-bounds))]
(+ min-width (ctl/child-width-margin child))))
(and (ctl/fill-width? child)
(ctl/grid-layout? child))
(let [children
(->> (cph/get-immediate-children objects (:id child) {:remove-hidden true})
(map #(vector @(get bounds (:id %)) %)))
layout-data (gd/calc-layout-data child @(get bounds (:id child)) children bounds objects true)]
(max (ctl/child-min-width child)
(gpo/width-points (gb/layout-content-bounds bounds child layout-data))))
(ctl/fill-width? child)
(ctl/child-min-width child)
:else
(gpo/width-points child-bounds)))
(defn child-min-height
[child child-bounds bounds objects]
(let [min-height
(cond
(and (ctl/fill-height? child) (ctl/flex-layout? child))
(let [children (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})]
(max (ctl/child-min-height child)
(gpo/height-points (fb/layout-content-bounds bounds child children objects))))
(and (ctl/fill-height? child) (ctl/grid-layout? child))
(let [children
(->> (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})
(map (fn [child] [@(get bounds (:id child)) child])))
layout-data (gd/calc-layout-data child (:points child) children bounds objects true)
auto-bounds (gb/layout-content-bounds bounds child layout-data)]
(max (ctl/child-min-height child)
(gpo/height-points auto-bounds)))
(ctl/fill-height? child)
(ctl/child-min-height child)
(cond
(and (ctl/fill-height? child) (ctl/flex-layout? child))
;; Uncomment this to activate "auto" as min size
(ctl/child-min-height child)
#_(let [children (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})]
(max (ctl/child-min-height child)
(gpo/height-points (fb/layout-content-bounds bounds child children objects))))
:else
(gpo/height-points child-bounds))]
(+ min-height (ctl/child-height-margin child))))
(and (ctl/fill-height? child) (ctl/grid-layout? child))
(let [children
(->> (cph/get-immediate-children objects (dm/get-prop child :id) {:remove-hidden true})
(map (fn [child] [@(get bounds (:id child)) child])))
layout-data (gd/calc-layout-data child (:points child) children bounds objects true)
auto-bounds (gb/layout-content-bounds bounds child layout-data)]
(max (ctl/child-min-height child)
(gpo/height-points auto-bounds)))
(ctl/fill-height? child)
(ctl/child-min-height child)
:else
(gpo/height-points child-bounds)))
#?(:cljs
(do (set! fd/-child-min-width child-min-width)
@ -80,4 +80,3 @@
(alter-var-root #'fb/-child-min-height (constantly child-min-height))
(alter-var-root #'gd/-child-min-width (constantly child-min-width))
(alter-var-root #'gd/-child-min-height (constantly child-min-height))))

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

@ -486,7 +486,7 @@
(transform-shape modifiers))))
([shape modifiers]
(if (and (some? modifiers) (not (ctm/empty? modifiers)))
(if (and (some? shape) (some? modifiers) (not (ctm/empty? modifiers)))
(let [transform (ctm/modifiers->transform modifiers)]
(cond-> shape
(and (some? transform)

1
common/src/app/common/geom/shapes/tree_seq.cljc
View file

@ -8,7 +8,6 @@
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.shapes.min-size-layout]
[app.common.pages.helpers :as cph]
[app.common.types.shape.layout :as ctl]
[app.common.uuid :as uuid]))

23
frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs
View file

@ -30,15 +30,20 @@
[rumext.v2 :as mf]))
(defn fix-position [shape]
(let [modifiers (:modifiers shape)
shape' (gsh/transform-shape shape modifiers)
;; We need to remove the movement because the dynamic modifiers will have move it
deltav (gpt/to-vec (gpt/point (:selrect shape'))
(gpt/point (:selrect shape)))]
(-> shape
(gsh/transform-shape (ctm/move modifiers deltav))
(mdwm/update-grow-type shape)
(dissoc :modifiers))))
(if-let [modifiers (:modifiers shape)]
(let [shape' (gsh/transform-shape shape modifiers)
old-sr (dm/get-prop shape :selrect)
new-sr (dm/get-prop shape' :selrect)
;; We need to remove the movement because the dynamic modifiers will have move it
deltav (gpt/to-vec (gpt/point new-sr)
(gpt/point old-sr))]
(-> shape
(gsh/transform-shape (ctm/move modifiers deltav))
(mdwm/update-grow-type shape)
(dissoc :modifiers)))
shape))
(defn- update-with-editor-state
"Updates the shape with the current state in the editor"

14
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View file

@ -377,12 +377,18 @@
:on-blur on-blur}])]
[:div {:class (stl/css :font-variant-options)}
(let [basic-variant-options (map (fn [variant]
{:value (:id variant) :key (pr-str variant) :label (:name variant)}) (:variants font))
(let [basic-variant-options (->> (:variants font)
(map (fn [variant]
{:value (:id variant)
:key (pr-str variant)
:label (:name variant)}) ))
variant-options (if (= font-size :multiple)
(conj {:value :multiple :key :multiple-variants :label "--"} basic-variant-options)
(conj basic-variant-options
{:value :multiple
:key :multiple-variants
:label "--"} )
basic-variant-options)]
;; TODO Add disabled mode
;; TODO Add disabled mode
[:& select
{:class (stl/css :font-variant-select)
:default-value (attr->string font-variant-id)

8
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -226,7 +226,8 @@
(not node-editing?)
(or show-distances? mode-inspect?))
show-artboard-names? (contains? layout :display-artboard-names)
show-rules? (and (contains? layout :rules) (not (contains? layout :hide-ui)))
hide-ui? (contains? layout :hide-ui)
show-rules? (and (contains? layout :rules) (not hide-ui?))
disabled-guides? (or drawing-tool transform)
@ -525,14 +526,15 @@
:zoom zoom
:vbox vbox}]
(when show-rules?
(when-not hide-ui?
[:& rules/rules
{:zoom zoom
:zoom-inverse zoom-inverse
:vbox vbox
:selected-shapes selected-shapes
:offset-x offset-x
:offset-y offset-y}])
:offset-y offset-y
:show-rules? show-rules?}])
(when show-rules?
[:& guides/viewport-guides

59
frontend/src/app/main/ui/workspace/viewport/rules.cljs
View file

@ -156,33 +156,12 @@
(let [rules-width (* rules-width zoom-inverse)
step (calculate-step-size zoom)
clip-id (str "clip-rule-" (d/name axis))
new-css-system (mf/use-ctx ctx/new-css-system)
rules-background (if new-css-system new-css-rules-background rules-background)
font-color (if new-css-system new-css-font-color font-color)
rule-area-size (/ rule-area-size zoom)
border-radius (/ new-css-canvas-border-radius zoom)]
new-css-system (mf/use-ctx ctx/new-css-system)
font-color (if new-css-system new-css-font-color font-color)]
[:*
(let [{:keys [x y width height]} (get-background-area vbox zoom-inverse axis)]
[:*
[:rect {:x x :y y :width width :height height :style {:fill rules-background}}]
;; Draw the rules' rounded corners in the viewport corners
(when new-css-system
(if (= axis :x)
[:*
[:path {:d (round-corner-path-tl (+ x rule-area-size) (+ y rule-area-size) border-radius)
:style {:fill rules-background}}]
[:path {:d (round-corner-path-tr (+ x width (- border-radius)) (+ y rule-area-size) border-radius)
:style {:fill rules-background}}]]
[:*
[:path {:d (round-corner-path-bl (+ x rule-area-size) (+ y height (- border-radius)) border-radius)
:style {:fill rules-background}}]
[:path {:d (round-corner-path-br (+ x (:width vbox) (- border-radius)) (+ y height (- border-radius)) border-radius)
:style {:fill rules-background}}]]))])
[:rect {:x x :y y :width width :height height :style {:fill rules-background}}])
[:g.rules {:clipPath (str "url(#" clip-id ")")}
@ -315,7 +294,7 @@
(mf/defc rules
{::mf/wrap-props false
::mf/wrap [#(mf/memo' % (mf/check-props ["zoom" "vbox" "selected-shapes"]))]}
::mf/wrap [#(mf/memo' % (mf/check-props ["zoom" "vbox" "selected-shapes" "show-rules?"]))]}
[props]
(let [zoom (obj/get props "zoom")
zoom-inverse (obj/get props "zoom-inverse")
@ -324,6 +303,11 @@
offset-y (obj/get props "offset-y")
selected-shapes (-> (obj/get props "selected-shapes")
(hooks/use-equal-memo))
show-rules? (obj/get props "show-rules?")
new-css-system (mf/use-ctx ctx/new-css-system)
rules-background (if new-css-system new-css-rules-background rules-background)
border-radius (/ new-css-canvas-border-radius zoom)
selection-rect
(mf/use-memo
@ -333,10 +317,29 @@
(when (some? vbox)
[:g.rules {:pointer-events "none"}
[:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :x :offset offset-x}]
[:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :y :offset offset-y}]
(when show-rules?
[:*
[:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :x :offset offset-x}]
[:& rules-axis {:zoom zoom :zoom-inverse zoom-inverse :vbox vbox :axis :y :offset offset-y}]])
(when (some? selection-rect)
;; Draw the rules' rounded corners in the viewport corners
(when new-css-system
(let [{:keys [x y width height]} vbox
rule-area-size (if show-rules? (/ rule-area-size zoom) 0)]
[:*
[:path {:d (round-corner-path-tl (+ x rule-area-size) (+ y rule-area-size) border-radius)
:style {:fill rules-background}}]
[:path {:d (round-corner-path-tr (+ x width (- border-radius)) (+ y rule-area-size) border-radius)
:style {:fill rules-background}}]
[:path {:d (round-corner-path-bl (+ x rule-area-size) (+ y height (- border-radius)) border-radius)
:style {:fill rules-background}}]
[:path {:d (round-corner-path-br (+ x (:width vbox) (- border-radius)) (+ y height (- border-radius)) border-radius)
:style {:fill rules-background}}]]))
(when (and show-rules? (some? selection-rect))
[:& selection-area {:zoom zoom
:zoom-inverse zoom-inverse
:vbox vbox