diff --git a/frontend/src/app/main/ui/inspect/attributes/svg.cljs b/frontend/src/app/main/ui/inspect/attributes/svg.cljs index 8344208afc..11fb8f5dfa 100644 --- a/frontend/src/app/main/ui/inspect/attributes/svg.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/svg.cljs @@ -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}]]))) diff --git a/frontend/src/app/main/ui/inspect/attributes/text.cljs b/frontend/src/app/main/ui/inspect/attributes/text.cljs index 51cf288266..e6434bd722 100644 --- a/frontend/src/app/main/ui/inspect/attributes/text.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/text.cljs @@ -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))}])])) diff --git a/frontend/src/app/main/ui/inspect/left_sidebar.cljs b/frontend/src/app/main/ui/inspect/left_sidebar.cljs index 971a3d8062..768d20a83a 100644 --- a/frontend/src/app/main/ui/inspect/left_sidebar.cljs +++ b/frontend/src/app/main/ui/inspect/left_sidebar.cljs @@ -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}]]]])) diff --git a/frontend/src/app/main/ui/inspect/render.cljs b/frontend/src/app/main/ui/inspect/render.cljs index 751c1f4237..e102aa606c 100644 --- a/frontend/src/app/main/ui/inspect/render.cljs +++ b/frontend/src/app/main/ui/inspect/render.cljs @@ -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 diff --git a/frontend/src/app/main/ui/inspect/selection_feedback.cljs b/frontend/src/app/main/ui/inspect/selection_feedback.cljs index 8be253b3ca..cf1463c2b7 100644 --- a/frontend/src/app/main/ui/inspect/selection_feedback.cljs +++ b/frontend/src/app/main/ui/inspect/selection_feedback.cljs @@ -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) diff --git a/frontend/src/app/main/ui/viewer/inspect.cljs b/frontend/src/app/main/ui/viewer/inspect.cljs index 3ffed2dc99..239c121080 100644 --- a/frontend/src/app/main/ui/viewer/inspect.cljs +++ b/frontend/src/app/main/ui/viewer/inspect.cljs @@ -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}