Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-15 03:28:25 -05:00
Code Issues Activity

✨ Add debug renderer for grid-layout cells

Browse source
This commit is contained in:
alonso.torres 2024-01-31 14:19:08 +01:00
parent a853314e3f
commit cea096f06c
2 changed files with 33 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs
View file

@ -61,7 +61,8 @@
:transform :matrix-render :transform :matrix-render
:transform-inverse :matrix-render :transform-inverse :matrix-render
:selrect :rect-render :selrect :rect-render
:points :points-render}) :points :points-render
:layout-grid-cells :cells-render})
(mf/defc shape-link (mf/defc shape-link
[{:keys [id objects]}] [{:keys [id objects]}]
@ -69,6 +70,25 @@
:on-click #(st/emit! (dw/select-shape id))} :on-click #(st/emit! (dw/select-shape id))}
(dm/str (dm/get-in objects [id :name]) " #" id)]) (dm/str (dm/get-in objects [id :name]) " #" id)])
(mf/defc cells-render
[{:keys [cells objects]}]
[:div {:class (stl/css :cells-render)}
(for [[id cell] cells]
[:div {:key (dm/str "cell-" id)
:class (stl/css :cell-container)}
[:div {:class (stl/css :cell-position)}
(dm/fmt "(%, %) -> (%, %)"
(:row cell)
(:column cell)
(+ (:row cell) (dec (:row-span cell)))
(+ (:column cell) (dec (:column-span cell))))]
[:div {:class (stl/css :cell-shape)}
(if (empty? (:shapes cell))
[:div "<empty>"]
[:& shape-link {:id (first (:shapes cell)) :objects objects}])]])])
(mf/defc debug-shape-attr (mf/defc debug-shape-attr
[{:keys [attr value objects]}] [{:keys [attr value objects]}]
@ -79,7 +99,8 @@
:shape-list :shape-list
[:div {:class (stl/css :shape-list)} [:div {:class (stl/css :shape-list)}
(for [id value] (for [id value]
[:& shape-link {:id id :objects objects}])] [:& shape-link {:key (dm/str "child-" id)
:id id :objects objects}])]
:matrix-render :matrix-render
[:div (dm/str (gmt/format-precision value 2))] [:div (dm/str (gmt/format-precision value 2))]
@ -89,8 +110,11 @@
:points-render :points-render
[:div {:class (stl/css :point-list)} [:div {:class (stl/css :point-list)}
(for [point value] (for [[idx point] (d/enumerate value)]
[:div (dm/fmt "(%, %)" (:x point) (:y point))])] [:div {:key (dm/str "point-" idx)} (dm/fmt "(%, %)" (:x point) (:y point))])]
:cells-render
[:& cells-render {:cells value :objects objects}]
[:div {:class (stl/css :attrs-container-value)} (str value)])) [:div {:class (stl/css :attrs-container-value)} (str value)]))

5
frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss
View file

@ -97,3 +97,8 @@
display: flex; display: flex;
gap: $s-8; gap: $s-8;
} }
.cell-container {
display: grid;
grid-template-columns: 100px 1fr;
}