Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 07:41:43 -05:00
Code Issues Activity

🐛 Fix problems with code generation

Browse source
This commit is contained in:
alonso.torres 2023-09-22 14:22:40 +02:00
parent 6e8cfa7be4
commit 723c14bef2
9 changed files with 78 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -154,7 +154,7 @@
(empty? (:shapes shape))
[(calculate-base-bounds shape)]
(:masked-group shape)
(or (:masked-group shape) (= :bool (:type shape)))
[(calculate-base-bounds shape)]
(and (cph/frame-shape? shape) (not (:show-content shape)))

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

@ -142,7 +142,9 @@
:center
[(gpt/add origin-h (hv (/ child-width 2)))
(gpo/project-point cell-bounds :h (gpo/center cell-bounds))]
(-> (gpo/project-point cell-bounds :h (gpo/center cell-bounds))
(gpt/add (hv (/ left-m 2)))
(gpt/subtract (hv (/ right-m 2))))]
[origin-h
(gpt/add (first cell-bounds) (hv left-m))])
@ -155,7 +157,9 @@
:center
[(gpt/add origin-v (vv (/ child-height 2)))
(gpo/project-point cell-bounds :v (gpo/center cell-bounds))]
(-> (gpo/project-point cell-bounds :v (gpo/center cell-bounds))
(gpt/add (vv top-m))
(gpt/subtract (vv bottom-m)))]
[origin-v
(gpt/add (first cell-bounds) (vv top-m))])]

3
frontend/src/app/main/ui/shapes/frame.cljs
View file

@ -168,8 +168,7 @@
is-component? (mf/use-ctx muc/is-component?)
childs (cond-> childs
(ctl/any-layout? shape)
(cph/sort-layout-children-z-index))
]
(cph/sort-layout-children-z-index))]
[:> frame-container props
[:g.frame-children {:opacity (:opacity shape)}

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

@ -519,8 +519,7 @@
:on-change-behaviour-v-refactor on-change-behaviour-v
:on-change on-change-behaviour}]
(when is-absolute?
[:div {:class (stl/css-case :z-index-wrapper true
:disabled (not is-absolute?))
[:div {:class (stl/css-case :z-index-wrapper true)
:title "z-index"}
[:span {:class (stl/css :icon-text)}
@ -653,7 +652,6 @@
:on-focus #(dom/select-target %)
:on-change #(on-change-z-index %)
:nillable true
:disabled (not is-absolute?)
:value (:layout-item-z-index values)}]]]])
[:*

22
frontend/src/app/util/code_gen/common.cljs
View file

@ -11,13 +11,15 @@
(defn shape->selector
[shape]
(let [name (-> (:name shape)
(subs 0 (min 10 (count (:name shape))))
(str/replace #"[^a-zA-Z0-9\s\:]+" ""))
;; selectors cannot start with numbers
name (if (re-matches #"^\d.*" name) (dm/str "c-" name) name)
id (-> (dm/str (:id shape))
(subs 24 36))
selector (str/css-selector (dm/str name " " id))
selector (if (str/starts-with? selector "-") (subs selector 1) selector)]
selector))
(if shape
(let [name (-> (:name shape)
(subs 0 (min 10 (count (:name shape))))
(str/replace #"[^a-zA-Z0-9\s\:]+" ""))
;; selectors cannot start with numbers
name (if (re-matches #"^\d.*" name) (dm/str "c-" name) name)
id (-> (dm/str (:id shape))
(subs 24 36))
selector (str/css-selector (dm/str name " " id))
selector (if (str/starts-with? selector "-") (subs selector 1) selector)]
selector)
""))

17
frontend/src/app/util/code_gen/markup_html.cljs
View file

@ -42,7 +42,7 @@
;; When a shape has several strokes or the stroke is not a "border"
(or (> (count (:strokes shape)) 1)
(and (= (count (:strokes shape)) 1)
(not= (-> shape :strokes first :stroke-alignment) :center)))))
(not= (-> shape :strokes first :stroke-alignment) :inner)))))
(defn generate-html
([objects shape]
@ -58,7 +58,8 @@
(let [svg-markup (generate-svg objects shape)]
(dm/fmt "%<div class=\"%\">\n%\n%</div>"
indent
(cgc/shape->selector shape)
(dm/str "shape " (d/name (:type shape)) " "
(cgc/shape->selector shape))
svg-markup
indent))
@ -66,7 +67,8 @@
(let [text-shape-html (rds/renderToStaticMarkup (mf/element text/text-shape #js {:shape shape :code? true}))]
(dm/fmt "%<div class=\"%\">\n%\n%</div>"
indent
(cgc/shape->selector shape)
(dm/str "shape " (d/name (:type shape)) " "
(cgc/shape->selector shape))
text-shape-html
indent))
@ -76,19 +78,22 @@
(dm/fmt "%<img src=\"%\" class=\"%\">\n%</img>"
indent
image-url
(cgc/shape->selector shape)
(dm/str "shape " (d/name (:type shape)) " "
(cgc/shape->selector shape))
indent))
(empty? (:shapes shape))
(dm/fmt "%<div class=\"%\">\n%</div>"
indent
(cgc/shape->selector shape)
(dm/str "shape " (d/name (:type shape)) " "
(cgc/shape->selector shape))
indent)
:else
(dm/fmt "%<div class=\"%\">\n%\n%</div>"
indent
(cgc/shape->selector shape)
(dm/str (d/name (:type shape)) " "
(cgc/shape->selector shape))
(->> (:shapes shape)
(maybe-reverse)
(map #(generate-html objects (get objects %) (inc level)))

1
frontend/src/app/util/code_gen/style_css.cljs
View file

@ -78,6 +78,7 @@ svg {
:column-gap
:row-gap
:padding
:z-index
;; Flex related properties
:flex-direction

3
frontend/src/app/util/code_gen/style_css_formats.cljs
View file

@ -17,6 +17,8 @@
:top :position
:width :size
:height :size
:min-width :size
:min-height :size
:background :color
:background-color :color
:background-image :color-array
@ -28,6 +30,7 @@
:row-gap :size-array
:column-gap :size-array
:padding :size-array
:margin :size-array
:grid-template-rows :tracks
:grid-template-columns :tracks
:transform :matrix

76
frontend/src/app/util/code_gen/style_css_values.cljs
View file

@ -28,8 +28,9 @@
(cond
(or (and (ctl/any-layout-immediate-child? objects shape)
(not (ctl/layout-absolute? shape))
(or (cph/group-shape? shape)
(cph/frame-shape? shape)))
(or (cph/group-like-shape? shape)
(cph/frame-shape? shape)
(svg-markup? shape)))
(cph/root-frame? shape))
:relative
@ -42,32 +43,20 @@
(defn get-shape-position
[shape objects coord]
(let [
parent (get objects (:parent-id shape))
parent-value (dm/get-in parent [:selrect coord])
[selrect _ _]
(-> (:points shape)
(gsh/transform-points (gsh/shape->center parent) (:transform-inverse parent))
(gsh/calculate-geometry))
;;shape (gsh/transform-shape)
shape-value (get selrect coord)
]
(when (and (not (cph/root-frame? shape))
(or (not (ctl/any-layout-immediate-child? objects shape))
(ctl/layout-absolute? shape)))
(- shape-value parent-value))))
#_(defn get-shape-position
[shape objects coord]
(when-not (or (cph/root-frame? shape)
(and (ctl/any-layout-immediate-child? objects shape)
(not (ctl/layout-absolute? shape))))
(when (and (not (cph/root-frame? shape))
(or (not (ctl/any-layout-immediate-child? objects shape))
(ctl/layout-absolute? shape)))
(let [parent (get objects (:parent-id shape))
bounds (gpo/parent-coords-bounds (:points shape) (:points parent))
vv (gpt/to-vec (first (:points parent)) (first bounds))]
(get vv coord))))
parent-value (dm/get-in parent [:selrect coord])
[selrect _ _]
(-> (:points shape)
(gsh/transform-points (gsh/shape->center parent) (:transform-inverse parent))
(gsh/calculate-geometry))
shape-value (get selrect coord)]
(- shape-value parent-value))))
(defmethod get-value :left
[_ shape objects]
@ -250,7 +239,8 @@
(defn get-grid-coord
[shape objects prop span-prop]
(when (ctl/grid-layout-immediate-child? objects shape)
(when (and (ctl/grid-layout-immediate-child? objects shape)
(not (ctl/layout-absolute? shape)))
(let [parent (get objects (:parent-id shape))
cell (ctl/get-cell-by-shape-id parent (:id shape))]
(if (> (get cell span-prop) 1)
@ -275,10 +265,22 @@
0))
(defmethod get-value :margin
[_ shape objects]
[_ {:keys [layout-item-margin] :as shape} objects]
(when (ctl/any-layout-immediate-child? objects shape)
(let [default-margin {:m1 0 :m2 0 :m3 0 :m4 0}
{:keys [m1 m2 m3 m4]} (merge default-margin layout-item-margin)]
(when (or (not= m1 0) (not= m2 0) (not= m3 0) (not= m4 0))
[m1 m2 m3 m4]))))
(defmethod get-value :z-index
[_ {:keys [layout-item-z-index] :as shape} objects]
(cond
(ctl/flex-layout-immediate-child? objects shape)
(:layout-item-margin shape)))
(cph/root-frame? shape)
0
(ctl/any-layout-immediate-child? objects shape)
layout-item-z-index))
(defmethod get-value :max-height
[_ shape objects]
@ -289,8 +291,11 @@
(defmethod get-value :min-height
[_ shape objects]
(cond
(ctl/flex-layout-immediate-child? objects shape)
(:layout-item-min-h shape)))
(and (ctl/flex-layout-immediate-child? objects shape) (some? (:layout-item-min-h shape)))
(:layout-item-min-h shape)
(and (ctl/auto-height? shape) (cph/frame-shape? shape) (not (:show-content shape)))
(-> shape :selrect :height)))
(defmethod get-value :max-width
[_ shape objects]
@ -301,8 +306,11 @@
(defmethod get-value :min-width
[_ shape objects]
(cond
(ctl/flex-layout-immediate-child? objects shape)
(:layout-item-min-w shape)))
(and (ctl/flex-layout-immediate-child? objects shape) (some? (:layout-item-min-w shape)))
(:layout-item-min-w shape)
(and (ctl/auto-width? shape) (cph/frame-shape? shape) (not (:show-content shape)))
(-> shape :selrect :width)))
(defmethod get-value :align-self
[_ shape objects]