github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-11-06 10:00:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Migrate inspect components to modern syntax (#12435)

Browse Source 
Migrate the remaining legacy components in the inspect module to the
modern rumext syntax: typography-block, text-block, svg-attr, svg-block,
selection-rect, selection-feedback, layer-item and left-sidebar.

Rename the ?-suffixed props of layer-item (component-child? to
is-component-child, hide-toggle? to hide-toggle) and drop the unused
sortable? and filtered? props passed from left-sidebar.

Relates to #9260

AI-assisted-by: claude-opus-5-5

Signed-off-by: Nimesh Kulkarni <167794819+GitNimay@users.noreply.github.com>
Co-authored-by: Andrey Antukh <niwi@niwi.nz>
This commit is contained in:
Nimesh 2026-11-05 20:17:59 +05:30 committed by GitHub
parent eef6868e9f
commit 9d3d6da0d0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 31 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/main/ui/inspect/attributes/svg.cljs
View File

@ -19,7 +19,7 @@
(map (fn [[attr-key attr-value]] (str (d/name attr-key) ":" attr-value)))
(str/join "; ")))
(mf/defc svg-attr [{:keys [attr value]}]
(mf/defc svg-attr* [{:keys [attr value]}]
(if (map? value)
[:*
[:div {:class (stl/css :attributes-subtitle)}
@ -27,7 +27,7 @@
[:> copy-button* {:data (map->css value)}]]
(for [[attr-key attr-value] value]
[:& svg-attr {:attr attr-key :value attr-value :key (str/join "svg-key-" (d/name attr-key))}])]
[:> svg-attr* {:attr attr-key :value attr-value :key (str/join "svg-key-" (d/name attr-key))}])]
(let [attr-name (as-> attr $
(d/name $)
@ -41,11 +41,11 @@
:class (stl/css :copy-btn-title)}
[:div {:class (stl/css :button-children)} (str value)]]]])))
(mf/defc svg-block
(mf/defc svg-block*
[{:keys [shape]}]
[:*
(for [[attr-key attr-value] (:svg-attrs shape)]
[:& svg-attr {:attr attr-key :value attr-value :key (str/join "svg-block-key-" (d/name attr-key))}])])
[:> svg-attr* {:attr attr-key :value attr-value :key (str/join "svg-block-key-" (d/name attr-key))}])])
(mf/defc svg-panel*
[{:keys [shapes]}]
@ -56,4 +56,4 @@
{:title (tr "workspace.sidebar.options.svg-attrs.title")
:class (stl/css :title-wrapper)
:title-class (stl/css :svg-attr-title)}]
[:& svg-block {:shape shape}]])))
[:> svg-block* {:shape shape}]])))

16
frontend/src/app/main/ui/inspect/attributes/text.cljs
View File

@ -31,7 +31,7 @@
(map #(dm/str (d/name %) ": " (get style %) ";"))
(str/join "\n")))
(mf/defc typography-block
(mf/defc typography-block*
[{:keys [text style]}]
(let [color-format* (mf/use-state :hex)
color-format (deref color-format*)
@ -138,17 +138,17 @@
(str/trim text)]]]))
(mf/defc text-block [{:keys [shape]}]
(mf/defc text-block* [{:keys [shape]}]
(let [style-text-blocks (->> (:content shape)
(txt/content->text+styles)
(remove (fn [[_ text]] (str/empty? (str/trim text))))
(mapv (fn [[style text]] (vector (merge (types.text/get-default-text-attrs) style) text))))]
(for [[idx [full-style text]] (map-indexed vector style-text-blocks)]
[:& typography-block {:key idx
:shape shape
:style full-style
:text text}])))
[:> typography-block* {:key idx
:shape shape
:style full-style
:text text}])))
(mf/defc text-panel*
[{:keys [shapes]}]
@ -160,5 +160,5 @@
:title-class (stl/css :text-atrr-title)}]
(for [shape shapes]
[:& text-block {:shape shape
:key (dm/str "text-block" (:id shape))}])]))
[:> text-block* {:shape shape
:key (dm/str "text-block" (:id shape))}])]))

20
frontend/src/app/main/ui/inspect/left_sidebar.cljs
View File

@ -23,14 +23,14 @@
#(-> (l/in [:viewer-local :collapsed id])
(l/derived st/state)))
(mf/defc layer-item
[{:keys [item selected objects depth component-child? hide-toggle?] :as props}]
(mf/defc layer-item*
[{:keys [item selected objects depth is-component-child hide-toggle]}]
(let [id (:id item)
selected? (contains? selected id)
item-ref (mf/use-ref nil)
depth (+ depth 1)
component-tree? (or component-child? (ctk/instance-root? item) (ctk/instance-head? item))
component-tree? (or is-component-child (ctk/instance-root? item) (ctk/instance-head? item))
collapsed-iref
(mf/use-memo
@ -77,7 +77,7 @@
:is-component-tree component-tree?
:is-filtered false
:is-expanded expanded?
:hide-toggle hide-toggle?
:hide-toggle hide-toggle
:on-select-shape select-shape
:on-toggle-collapse toggle-collapse}
@ -88,16 +88,16 @@
:data-testid (dm/str "children-" id)}
(for [[index id] (reverse (d/enumerate (:shapes item)))]
(when-let [item (get objects id)]
[:& layer-item
[:> layer-item*
{:item item
:selected selected
:index index
:objects objects
:key (dm/str id)
:depth depth
:component-child? component-tree?}]))])]))
:is-component-child component-tree?}]))])]))
(mf/defc left-sidebar
(mf/defc left-sidebar*
[{:keys [frame page local]}]
(let [selected (:selected local)
objects (:objects page)]
@ -105,12 +105,10 @@
[:aside {:class (stl/css :settings-bar-left)}
[:div {:class (stl/css :settings-bar-inside)}
[:div {:class (stl/css :element-list)}
[:& layer-item
[:> layer-item*
{:item frame
:selected selected
:index 0
:objects objects
:sortable? false
:filtered? false
:depth -2
:hide-toggle? true}]]]]))
:hide-toggle true}]]]]))

4
frontend/src/app/main/ui/inspect/render.cljs
View File

@ -12,7 +12,7 @@
[app.common.geom.shapes :as gsh]
[app.main.data.viewer :as dv]
[app.main.store :as st]
[app.main.ui.inspect.selection-feedback :refer [selection-feedback]]
[app.main.ui.inspect.selection-feedback :refer [selection-feedback*]]
[app.main.ui.shapes.bool :as bool]
[app.main.ui.shapes.circle :as circle]
[app.main.ui.shapes.frame :as frame]
@ -208,7 +208,7 @@
:fill "none"}
[:& render {:shape frame :view-box (:vbox size)}]
[:& selection-feedback
[:> selection-feedback*
{:frame frame
:objects objects
:local local

6
frontend/src/app/main/ui/inspect/selection_feedback.cljs
View File

@ -31,7 +31,7 @@
;; COMPONENTS
;; ------------------------------------------------
(mf/defc selection-rect [{:keys [selrect zoom]}]
(mf/defc selection-rect* [{:keys [selrect zoom]}]
(let [{:keys [x y width height]} selrect
selection-rect-width (/ mconst/selection-rect-width zoom)]
[:g.selection-rect
@ -43,7 +43,7 @@
:stroke mconst/select-color
:stroke-width selection-rect-width}}]]))
(mf/defc selection-feedback
(mf/defc selection-feedback*
[{:keys [frame local objects size]}]
(let [{:keys [hover selected zoom]} local
@ -55,7 +55,7 @@
(when (d/not-empty? selected-shapes)
[:g.selection-feedback {:pointer-events "none"}
[:g.selected-shapes
[:& selection-rect {:selrect selrect :zoom zoom}]
[:> selection-rect* {:selrect selrect :zoom zoom}]
[:> size-display* {:selrect selrect :zoom zoom}]]
[:> measurement* {:bounds (assoc size :x 0 :y 0)

8
frontend/src/app/main/ui/viewer/inspect.cljs
View File

@ -13,7 +13,7 @@
[app.main.data.viewer :as dv]
[app.main.store :as st]
[app.main.ui.hooks.resize :refer [use-resize-hook]]
[app.main.ui.inspect.left-sidebar :refer [left-sidebar]]
[app.main.ui.inspect.left-sidebar :refer [left-sidebar*]]
[app.main.ui.inspect.render :refer [render-frame-svg]]
[app.main.ui.inspect.right-sidebar :refer [right-sidebar*]]
[app.util.dom :as dom]
@ -92,9 +92,9 @@
(st/emit! (dv/select-shape (:id frame)))))
[:*
[:& left-sidebar {:frame frame
:local local
:page page}]
[:> left-sidebar* {:frame frame
:local local
:page page}]
[:div#inspect-svg-wrapper {:class (stl/css :inspect-svg-wrapper)
:data-value (pr-str (:id frame))
:on-click handle-select-frame}