Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 10:38:13 -05:00
Code Issues Activity

✨ Improved calculations for auto-resize

Browse source
This commit is contained in:
alonso.torres 2021-02-11 16:01:21 +01:00
parent 8cfc2ec21a
commit dc0765f6b0
1 changed files with 19 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/app/main/ui/shapes/text/styles.cljs
View file

@ -20,28 +20,31 @@
([props] (generate-root-styles (clj->js (obj/get props "node")) props))
([data props]
(let [valign (obj/get data "vertical-align" "top")
talign (obj/get data "text-align" "flex-start")
shape (obj/get props "shape")
base #js {:height (or (:height shape) "100%")
:width (or (:width shape) "100%")
:display "flex"}]
:width (or (:width shape) "100%")}]
(cond-> base
(= valign "top") (obj/set! "alignItems" "flex-start")
(= valign "center") (obj/set! "alignItems" "center")
(= valign "bottom") (obj/set! "alignItems" "flex-end")
(= talign "left") (obj/set! "justifyContent" "flex-start")
(= talign "center") (obj/set! "justifyContent" "center")
(= talign "right") (obj/set! "justifyContent" "flex-end")
(= talign "justify") (obj/set! "justifyContent" "stretch")))))
(= valign "top") (obj/set! "justifyContent" "flex-start")
(= valign "center") (obj/set! "justifyContent" "center")
(= valign "bottom") (obj/set! "justifyContent" "flex-end")
))))
(defn generate-paragraph-set-styles
([props] (generate-paragraph-set-styles nil props))
([props] (generate-paragraph-set-styles (clj->js (obj/get props "node")) props))
([data props]
;; The position absolute is used so the paragraph is "outside"
;; the normal layout and can grow outside its parent
;; We use this element to measure the size of the text
(let [base #js {:display "inline-block"}]
;; This element will control the auto-width/auto-height size for the
;; shape. The properties try to adjust to the shape and "overflow" if
;; the shape is not big enough.
;; We `inherit` the property `justify-content` so it's set by the root where
;; the property it's known.
;; `inline-flex` is similar to flex but `overflows` outside the bounds of the
;; parent
(let [base #js {:display "inline-flex"
:flex-direction "column"
:justify-content "inherit"
:min-height "100%"
:min-width "100%"
:vertical-align "top"}]
base)))
(defn generate-paragraph-styles