3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-09 13:26:40 +02:00
Code Issues Projects Releases Packages Wiki 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
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))) (or (:layout-item-z-index shape) 0)))
(defn- comparator-layout-z-index (defn- comparator-layout-z-index
[[idx-a child-a] [idx-b child-b]] [reverse? [idx-a child-a] [idx-b child-b]]
(cond (cond
(> (layout-z-index child-a) (layout-z-index child-b)) 1 (> (layout-z-index child-a) (layout-z-index child-b)) 1
(< (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
(> idx-a idx-b) -1 (> idx-a idx-b) -1
:else 0)) :else 0))
(defn sort-layout-children-z-index (defn sort-layout-children-z-index
[children] [children reverse?]
(->> children (->> children
(d/enumerate) (d/enumerate)
(sort comparator-layout-z-index) (sort (partial comparator-layout-z-index reverse?))
(mapv second))) (mapv second)))
(defn change-h-sizing? (defn change-h-sizing?

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

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

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

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