Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 23:49:45 -05:00
Code Issues Activity

✨ Align items in grid layout

Browse source
This commit is contained in:
alonso.torres 2023-05-11 15:41:58 +02:00
parent 47e927d571
commit c31dc94496
5 changed files with 113 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
common/src/app/common/geom/shapes/grid_layout/positions.cljc
View file

@ -104,8 +104,54 @@
(defn child-modifiers
[parent parent-bounds child child-bounds layout-data cell-data]
(let [fill-modifiers (fill-modifiers parent parent-bounds child child-bounds layout-data cell-data)
position-delta (gpt/subtract (:start-p cell-data) (gpo/origin child-bounds))]
(let [cell-bounds (cell-bounds layout-data cell-data)
fill-modifiers (fill-modifiers parent parent-bounds child child-bounds layout-data cell-data)
align (:layout-align-items parent)
justify (:layout-justify-items parent)
align-self (:align-self cell-data)
justify-self (:justify-self cell-data)
align-self (when (and align-self (not= align-self :auto)) align-self)
justify-self (when (and justify-self (not= justify-self :auto)) justify-self)
align (or align-self align)
justify (or justify-self justify)
position-delta (gpt/point)
;; Adjust alignment/justify
[from-h to-h]
(case justify
:end
[(gpo/project-point cell-bounds :h (nth child-bounds 1))
(nth cell-bounds 1)]
:center
[(gpo/project-point cell-bounds :h (gpo/center child-bounds))
(gpo/project-point cell-bounds :h (gpo/center cell-bounds))]
[(gpo/project-point cell-bounds :h (first child-bounds))
(first cell-bounds)])
[from-v to-v]
(case align
:end
[(gpo/project-point cell-bounds :v (nth child-bounds 3))
(nth cell-bounds 3)]
:center
[(gpo/project-point cell-bounds :v (gpo/center child-bounds))
(gpo/project-point cell-bounds :v (gpo/center cell-bounds))]
[(gpo/project-point cell-bounds :v (first child-bounds))
(first cell-bounds)])
position-delta
(-> position-delta
(gpt/add (gpt/to-vec from-h to-h))
(gpt/add (gpt/to-vec from-v to-v)))]
(-> (ctm/empty)
(ctm/add-modifiers fill-modifiers)
(ctm/move position-delta))))

21
common/src/app/common/geom/shapes/points.cljc
View file

@ -80,7 +80,7 @@
"Given a point and a line returns the parametric t the cross point with the line going through the other axis projected"
[point [start end] other-axis-vec]
(let [line-vec (gpt/to-vec start end)
(let [line-vec (gpt/to-vec start end)
pr-point (gsi/line-line-intersect point (gpt/add point other-axis-vec) start end)]
(cond
(not (mth/almost-zero? (:x line-vec)))
@ -93,6 +93,15 @@
:else
0)))
(defn project-point
"Project the point into the given axis: `:h` or `:v` means horizontal or vertical axis"
[[p0 p1 _ p3 :as bounds] axis point]
(let [[other-vec start end]
(if (= axis :h)
[(gpt/to-vec p0 p3) p0 p1]
[(gpt/to-vec p0 p1) p0 p3])]
(gsi/line-line-intersect point (gpt/add point other-vec) start end)))
(defn parent-coords-bounds
[child-bounds [p1 p2 _ p4 :as parent-bounds]]
@ -154,3 +163,13 @@
[bounds vector]
(->> bounds
(map #(gpt/add % vector))))
(defn center
[bounds]
(let [width (width-points bounds)
height (height-points bounds)
half-h (start-hv bounds (/ width 2))
half-v (start-vv bounds (/ height 2))]
(-> (origin bounds)
(gpt/add half-h)
(gpt/add half-v))))

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

@ -390,7 +390,7 @@
[{:keys [is-col? align-items set-align] :as props}]
(let [type (if is-col? :column :row)]
[:div.align-items-style
(for [align [:start :center :end :stretch :baseline]]
(for [align [:start :center :end]]
[:button.align-start.tooltip
{:class (dom/classnames :active (= align-items align)
:tooltip-bottom-left (not= align :start)

5
frontend/src/app/main/ui/workspace/sidebar/options/shapes/grid_cell.cljs
View file

@ -96,7 +96,10 @@
(mf/use-callback
(mf/deps (:id shape) (:id cell))
(fn [mode]
(st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) {:mode mode}))))]
(let [props (cond-> {:mode mode}
(not= mode :area)
(assoc :area-name nil))]
(st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) props)))))]
[:div.element-set
[:div.element-set-title

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

@ -226,6 +226,40 @@
:on-lost-pointer-capture handle-lost-pointer-capture
:on-pointer-move handle-pointer-move}]))
(mf/defc grid-cell-area-label
{::mf/wrap-props false}
[props]
(let [cell-origin (unchecked-get props "origin")
cell-width (unchecked-get props "width")
zoom (unchecked-get props "zoom")
text (unchecked-get props "text")
area-width (/ (* 10 (count text)) zoom)
area-height (/ 25 zoom)
area-x (- (+ (:x cell-origin) cell-width) area-width)
area-y (:y cell-origin)
area-text-x (+ area-x (/ area-width 2))
area-text-y (+ area-y (/ area-height 2))]
[:g {:pointer-events "none"}
[:rect {:x area-x
:y area-y
:width area-width
:height area-height
:style {:fill "var(--color-distance)"
:fill-opacity 0.3}}]
[:text {:x area-text-x
:y area-text-y
:style {:fill "var(--color-distance)"
:font-family "worksans"
:font-weight 600
:font-size (/ 14 zoom)
:alignment-baseline "central"
:text-anchor "middle"}}
text]]))
(mf/defc grid-cell
{::mf/wrap-props false}
[props]
@ -271,6 +305,12 @@
:on-pointer-leave handle-pointer-leave
:on-pointer-down handle-pointer-down}]
(when (:area-name cell)
[:& grid-cell-area-label {:origin cell-origin
:width cell-width
:zoom zoom
:text (:area-name cell)}])
(when selected?
(let [handlers
;; Handlers positions, size and cursor