Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-12 18:18:24 -05:00
Code Issues Activity

🐛 Fix problem ordering layers in html markup

Browse source
This commit is contained in:
alonso.torres 2024-04-04 16:11:59 +02:00 • committed by Andrés Moya
parent b1e226cdc6
commit e420be5e51
3 changed files with 19 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
common/src/app/common/types/shape/layout.cljc
View file

@ -543,19 +543,21 @@
(or (:layout-item-z-index shape) 0)))
(defn- comparator-layout-z-index
[[idx-a child-a] [idx-b child-b]]
[reverse? [idx-a child-a] [idx-b child-b]]
(cond
(> (layout-z-index child-a) (layout-z-index child-b)) 1
(< (layout-z-index child-a) (layout-z-index child-b)) -1
(and (< idx-a idx-b) reverse?) -1
(and (> idx-a idx-b) reverse?) 1
(< idx-a idx-b) 1
(> idx-a idx-b) -1
:else 0))
(defn sort-layout-children-z-index
[children]
[children reverse?]
(->> children
(d/enumerate)
(sort comparator-layout-z-index)
(sort (partial comparator-layout-z-index reverse?))
(mapv second)))
(defn change-h-sizing?

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

@ -168,9 +168,10 @@
[props]
(let [shape (unchecked-get props "shape")
childs (unchecked-get props "childs")
reverse? (and (ctl/flex-layout? shape) (ctl/reverse? shape))
childs (cond-> childs
(ctl/any-layout? shape)
(ctl/sort-layout-children-z-index))]
(ctl/sort-layout-children-z-index reverse?))]
[:> frame-container props
[:g.frame-children

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

@ -25,7 +25,6 @@
([objects shape level]
(when (and (some? shape) (some? (:selrect shape)))
(let [indent (str/repeat " " level)
maybe-reverse (if (ctl/any-layout? shape) reverse identity)
shape-html
(cond
@ -65,15 +64,18 @@
indent)
:else
(dm/fmt "%<div class=\"%\">\n%\n%</div>"
indent
(dm/str (d/name (:type shape)) " "
(cgc/shape->selector shape))
(->> (:shapes shape)
(maybe-reverse)
(map #(generate-html objects (get objects %) (inc level)))
(str/join "\n"))
indent))
(let [children (->> shape :shapes (map #(get objects %)))
reverse? (ctl/any-layout? shape)
;; The order for layout elements is the reverse of SVG order
children (cond-> children reverse? reverse)]
(dm/fmt "%<div class=\"%\">\n%\n%</div>"
indent
(dm/str (d/name (:type shape)) " "
(cgc/shape->selector shape))
(->> children
(map #(generate-html objects % (inc level)))
(str/join "\n"))
indent)))
shape-html
(if (cgc/has-wrapper? objects shape)