From 33ac67d85240ce3f11afec8b5e18bdc9fb6624a5 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 3 Apr 2026 07:49:28 +0000 Subject: [PATCH] :recycle: Convert workspace sidebar/viewport components to mf/defc * suffix format (Batch 4) --- .../app/main/ui/workspace/right_header.cljs | 7 +- .../ui/workspace/sidebar/assets/colors.cljs | 57 ++- .../sidebar/assets/typographies.cljs | 130 ++++--- .../workspace/sidebar/options/menus/text.cljs | 16 +- .../sidebar/options/menus/typography.cljs | 49 ++- .../main/ui/workspace/sidebar/sitemap.cljs | 52 ++- .../tokens/management/forms/modals.cljs | 45 ++- .../ui/workspace/tokens/settings/menu.cljs | 3 +- .../viewport/grid_layout_editor.cljs | 346 +++++++----------- .../main/ui/workspace/viewport/top_bar.cljs | 4 +- 10 files changed, 311 insertions(+), 398 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/right_header.cljs b/frontend/src/app/main/ui/workspace/right_header.cljs index c73b13e4eb..6ee1ded1c2 100644 --- a/frontend/src/app/main/ui/workspace/right_header.cljs +++ b/frontend/src/app/main/ui/workspace/right_header.cljs @@ -36,9 +36,8 @@ ;; --- Zoom Widget -(mf/defc zoom-widget-workspace - {::mf/wrap [mf/memo] - ::mf/wrap-props false} +(mf/defc zoom-widget-workspace* + {::mf/wrap [mf/memo]} [{:keys [zoom on-increase on-decrease on-zoom-reset on-zoom-fit on-zoom-selected]}] (let [open* (mf/use-state false) open? (deref open*) @@ -205,7 +204,7 @@ [:div {:class (stl/css :separator)}] [:div {:class (stl/css :zoom-section)} - [:& zoom-widget-workspace + [:> zoom-widget-workspace* {:zoom zoom :on-increase on-increase :on-decrease on-decrease diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs index 7c8c8a2533..89ccda4080 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs @@ -35,9 +35,8 @@ [potok.v2.core :as ptk] [rumext.v2 :as mf])) -(mf/defc color-item - {::mf/wrap-props false} - [{:keys [color local? file-id selected multi-colors? multi-assets? +(mf/defc color-item* + [{:keys [color is-local file-id selected is-multi-colors is-multi-assets on-asset-click on-assets-delete on-clear-selection on-group selected-full selected-paths move-color]}] @@ -84,9 +83,9 @@ delete-color (mf/use-fn - (mf/deps multi-colors? multi-assets? file-id color-id) + (mf/deps is-multi-colors is-multi-assets file-id color-id) (fn [] - (if (or multi-colors? multi-assets?) + (if (or is-multi-colors is-multi-assets) (on-assets-delete) (let [undo-id (js/Symbol)] (st/emit! (dwu/start-undo-transaction undo-id) @@ -102,9 +101,9 @@ rename-color-clicked (mf/use-fn - (mf/deps read-only? local?) + (mf/deps read-only? is-local) (fn [event] - (when (and local? (not read-only?)) + (when (and is-local (not read-only?)) (dom/prevent-default event) (reset! editing* true)))) @@ -145,7 +144,7 @@ (fn [event] (dom/prevent-default event) (let [pos (dom/get-client-position event)] - (when (and local? (not read-only?)) + (when (and is-local (not read-only?)) (when-not (contains? selected color-id) (on-clear-selection)) (swap! menu-state cmm/open-context-menu pos))))) @@ -190,7 +189,7 @@ (st/emit! (ptk/data-event ::ev/event {::ev/name "use-library-color" ::ev/origin "sidebar" - :external-library (not local?)})) + :external-library (not is-local)})) (when-not (on-asset-click event (:id color)) (st/emit! (dc/apply-color-from-assets file-id color (kbd/alt? event)))))))] @@ -242,19 +241,19 @@ (:name color) [:span {:class (stl/css :default-name :default-name-with-color)} default-name]])]) - (when local? + (when is-local [:> cmm/assets-context-menu* {:on-close on-close-menu :state @menu-state - :options [(when-not (or multi-colors? multi-assets?) + :options [(when-not (or is-multi-colors is-multi-assets) {:name (tr "workspace.assets.rename") :id "assets-rename-color" :handler rename-color-clicked}) - (when-not (or multi-colors? multi-assets?) + (when-not (or is-multi-colors is-multi-assets) {:name (tr "workspace.assets.edit") :id "assets-edit-color" :handler edit-color-clicked}) - (when (and (not (or multi-colors? multi-assets?)) + (when (and (not (or is-multi-colors is-multi-assets)) (contains? cf/flags :canary)) {:name (tr "workspace.assets.duplicate") :id "assets-duplicate-color" @@ -262,7 +261,7 @@ {:name (tr "workspace.assets.delete") :id "assets-delete-color" :handler delete-color} - (when-not multi-assets? + (when-not is-multi-assets {:name (tr "workspace.assets.group") :id "assets-group-color" :handler (on-group (:id color))})]}]) @@ -337,21 +336,21 @@ [:div {:class (stl/css :drop-space)}]) (for [color colors] - [:& color-item {:key (dm/str (:id color)) - :color color - :file-id file-id - :local? is-local - :selected selected - :multi-colors? is-multi-colors - :multi-assets? is-multi-assets - :on-asset-click on-asset-click - :on-assets-delete on-assets-delete - :on-clear-selection on-clear-selection - :on-group on-group - :colors colors - :selected-full selected-full - :selected-paths selected-paths - :move-color move-color}])]) + [:> color-item* {:key (dm/str (:id color)) + :color color + :file-id file-id + :is-local is-local + :selected selected + :is-multi-colors is-multi-colors + :is-multi-assets is-multi-assets + :on-asset-click on-asset-click + :on-assets-delete on-assets-delete + :on-clear-selection on-clear-selection + :on-group on-group + :colors colors + :selected-full selected-full + :selected-paths selected-paths + :move-color move-color}])]) (for [[path-item content] groups] (when-not (empty? path-item) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs index d222ffafd0..09e1f0bd84 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs @@ -24,7 +24,7 @@ [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.assets.groups :as grp] - [app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry]] + [app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry*]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [cuerdas.core :as str] @@ -39,10 +39,9 @@ refs/workspace-global =)) -(mf/defc typography-item - {::mf/wrap-props false} - [{:keys [typography file-id local? handle-change selected editing-id renaming-id on-asset-click - on-context-menu selected-full selected-paths move-typography rename?]}] +(mf/defc typography-item* + [{:keys [typography file-id is-local handle-change selected editing-id renaming-id on-asset-click + on-context-menu selected-full selected-paths move-typography is-rename]}] (let [item-ref (mf/use-ref) typography-id (:id typography) @@ -95,13 +94,13 @@ on-asset-click (mf/use-fn - (mf/deps typography on-asset-click read-only? local?) + (mf/deps typography on-asset-click read-only? is-local) (fn [event] (when-not read-only? (st/emit! (ptk/data-event ::ev/event {::ev/name "use-library-typography" ::ev/origin "sidebar" - :external-library (not local?)})) + :external-library (not is-local)})) (when-not (on-asset-click event (:id typography)) (st/emit! (dwt/apply-typography typography file-id))))))] @@ -114,24 +113,23 @@ :on-drag-over dom/prevent-default :on-drop on-drop} - [:& typography-entry + [:> typography-entry* {:file-id file-id :typography typography - :local? local? - :selected? (contains? selected typography-id) + :is-local is-local + :is-selected (contains? selected typography-id) :on-click on-asset-click :on-change handle-change :on-context-menu on-context-menu - :editing? editing? - :renaming? renaming? - :focus-name? rename? + :is-editing editing? + :is-renaming renaming? + :focus-name is-rename :external-open* open*}] (when ^boolean dragging? [:div {:class (stl/css :dragging)}])])) -(mf/defc typographies-group - {::mf/wrap-props false} - [{:keys [file-id prefix groups open-groups force-open? file local? selected local-data +(mf/defc typographies-group* + [{:keys [file-id prefix groups open-groups is-force-open file is-local selected local-data editing-id renaming-id on-asset-click handle-change on-rename-group on-ungroup on-context-menu selected-full]}] (let [group-open? (if (false? (get open-groups prefix)) ;; if the user has closed it specifically, respect that @@ -195,41 +193,42 @@ (some? groups)) [:div {:class (stl/css :drop-space)}]) (for [{:keys [id] :as typography} typographies] - [:& typography-item {:typography typography - :key (dm/str "typography-" id) - :file-id file-id - :local? local? - :handle-change handle-change - :selected selected - :editing-id editing-id - :renaming-id renaming-id - :rename? (= (:rename-typography local-data) id) - :on-asset-click on-asset-click - :on-context-menu on-context-menu - :selected-full selected-full - :selected-paths selected-paths - :move-typography move-typography}])]) + [:> typography-item* {:typography typography + :key (dm/str "typography-" id) + :file-id file-id + :is-local is-local + :handle-change handle-change + :selected selected + :editing-id editing-id + :renaming-id renaming-id + :is-rename (= (:rename-typography local-data) id) + :on-asset-click on-asset-click + :on-context-menu on-context-menu + :selected-full selected-full + :selected-paths selected-paths + :move-typography move-typography}])]) (for [[path-item content] groups] (when-not (empty? path-item) - [:& typographies-group {:file-id file-id - :prefix (cpn/merge-path-item prefix path-item) - :key (dm/str "group-" path-item) - :groups content - :open-groups open-groups - :force-open? force-open? - :file file - :local? local? - :selected selected - :editing-id editing-id - :renaming-id renaming-id - :local-data local-data - :on-asset-click on-asset-click - :handle-change handle-change - :on-rename-group on-rename-group - :on-ungroup on-ungroup - :on-context-menu on-context-menu - :selected-full selected-full}]))])])) + [:> typographies-group* {:file-id file-id + :prefix (cpn/merge-path-item prefix path-item) + :key (dm/str "group-" path-item) + :groups content + :open-groups open-groups + :is-force-open is-force-open + :file file + :is-local is-local + :selected selected + :editing-id editing-id + :renaming-id renaming-id + :local-data local-data + :on-asset-click on-asset-click + :handle-change handle-change + :on-rename-group on-rename-group + :on-ungroup on-ungroup + :on-context-menu on-context-menu + :selected-full selected-full}]))])])) + (mf/defc typographies-section* [{:keys [file file-id typographies open-status-ref selected @@ -414,24 +413,23 @@ :icon i/add}])]) [:> cmm/asset-section-block* {:role :content} - [:& typographies-group {:file-id file-id - :prefix "" - :groups groups - :open-groups open-groups - :force-open? is-force-open - :state state - :file file - :local? is-local - :selected selected - :editing-id editing-id - :renaming-id renaming-id - :local-data local-data - :on-asset-click on-asset-click - :handle-change handle-change - :on-rename-group on-rename-group - :on-ungroup on-ungroup - :on-context-menu on-context-menu - :selected-full selected-full}] + [:> typographies-group* {:file-id file-id + :prefix "" + :groups groups + :open-groups open-groups + :is-force-open is-force-open + :file file + :is-local is-local + :selected selected + :editing-id editing-id + :renaming-id renaming-id + :local-data local-data + :on-asset-click on-asset-click + :handle-change handle-change + :on-rename-group on-rename-group + :on-ungroup on-ungroup + :on-context-menu on-context-menu + :selected-full selected-full}] (if is-local [:> cmm/assets-context-menu* diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs index f4f1bd7ee3..df05e3f1ad 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs @@ -27,8 +27,8 @@ [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.hooks :as hooks] [app.main.ui.icons :as deprecated-icon] - [app.main.ui.workspace.sidebar.options.menus.typography :refer [text-options - typography-entry]] + [app.main.ui.workspace.sidebar.options.menus.typography :refer [text-options* + typography-entry*]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.text.content :as content] @@ -331,11 +331,11 @@ [:div {:class (stl/css :element-content)} (cond typography - [:& typography-entry {:file-id typography-file-id - :typography typography - :local? (= typography-file-id file-id) - :on-detach handle-detach-typography - :on-change handle-change-typography}] + [:> typography-entry* {:file-id typography-file-id + :typography typography + :is-local (= typography-file-id file-id) + :on-detach handle-detach-typography + :on-change handle-change-typography}] (= typography-id :multiple) [:div {:class (stl/css :multiple-typography)} @@ -346,7 +346,7 @@ deprecated-icon/detach]] :else - [:> text-options opts]) + [:> text-options* opts]) [:div {:class (stl/css :text-align-options)} [:> text-align-options* opts] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index 31a2a375ad..22de60552b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs @@ -224,8 +224,7 @@ :on-click on-select :is-current (= (:id font) (:id selected))}]))) -(mf/defc font-options - {::mf/wrap-props false} +(mf/defc font-options* [{:keys [values on-change on-blur show-recent full-size-selector]}] (let [{:keys [font-id font-size font-variant-id]} values @@ -363,8 +362,7 @@ :on-change on-font-variant-change :on-blur on-blur}])]]])) -(mf/defc spacing-options - {::mf/wrap-props false} +(mf/defc spacing-options* [{:keys [values on-change on-blur]}] (let [{:keys [line-height letter-spacing]} values @@ -412,8 +410,7 @@ :nillable (= :multiple letter-spacing) :on-blur on-blur}]]])) -(mf/defc text-transform-options - {::mf/wrap-props false} +(mf/defc text-transform-options* [{:keys [values on-change on-blur]}] (let [text-transform (or (:text-transform values) "none") unset-value (if (features/active-feature? @st/state "text-editor/v2") "none" "unset") @@ -444,8 +441,7 @@ :value "lowercase" :id "text-transform-lowercase"}]]])) -(mf/defc text-options - {::mf/wrap-props false} +(mf/defc text-options* [{:keys [ids editor values on-change on-blur show-recent]}] (let [full-size-selector? (and show-recent (= (mf/use-ctx ctx/sidebar) :right)) opts #js {:editor editor @@ -457,10 +453,10 @@ :full-size-selector full-size-selector?}] [:div {:class (stl/css-case :text-options true :text-options-full-size full-size-selector?)} - [:> font-options opts] + [:> font-options* opts] [:div {:class (stl/css :typography-variations)} - [:> spacing-options opts] - [:> text-transform-options opts]]])) + [:> spacing-options* opts] + [:> text-transform-options* opts]]])) (mf/defc typography-advanced-options* {::mf/wrap [mf/memo]} @@ -502,9 +498,9 @@ :on-click on-close} deprecated-icon/tick]] - [:& text-options {:values typography - :on-change on-change - :show-recent false}]] + [:> text-options* {:values typography + :on-change on-change + :show-recent false}]] [:div {:class (stl/css :typography-info-wrapper)} [:div {:class (stl/css :typography-name-wrapper)} @@ -549,14 +545,13 @@ :on-click navigate-to-library} (tr "workspace.assets.typography.go-to-edit")])])]))) -(mf/defc typography-entry - {::mf/wrap-props false} - [{:keys [file-id typography local? selected? on-click on-change on-detach on-context-menu editing? renaming? focus-name? external-open*]}] +(mf/defc typography-entry* + [{:keys [file-id typography is-local is-selected on-click on-change on-detach on-context-menu is-editing is-renaming focus-name external-open*]}] (let [name-input-ref (mf/use-ref) read-only? (mf/use-ctx ctx/workspace-read-only?) - editable? (and local? (not read-only?)) + editable? (and is-local (not read-only?)) - open* (mf/use-state editing?) + open* (mf/use-state is-editing) open? (deref open*) font-data (fonts/get-font-data (:font-id typography)) name-only? (= (:name typography) (:name font-data)) @@ -594,16 +589,16 @@ (when ^boolean esc? (dom/blur! input-node)))))] - (mf/with-effect [editing?] - (when editing? - (reset! open* editing?))) + (mf/with-effect [is-editing] + (when is-editing + (reset! open* is-editing))) (mf/with-effect [open?] (when (some? external-open*) (reset! external-open* open?))) - (mf/with-effect [focus-name?] - (when focus-name? + (mf/with-effect [focus-name] + (when focus-name (tm/schedule #(when-let [node (mf/ref-val name-input-ref)] (dom/focus! node) @@ -611,9 +606,9 @@ [:* [:div {:class (stl/css-case :typography-entry true - :selected ^boolean selected?) + :selected ^boolean is-selected) :style {:display (when ^boolean open? "none")}} - (if renaming? + (if is-renaming [:div {:class (stl/css :font-name-wrapper)} [:div {:class (stl/css :typography-sample-input) @@ -667,5 +662,5 @@ :on-change on-change :on-name-blur on-name-blur :on-key-down on-key-down - :is-local local? + :is-local is-local :navigate-to-library navigate-to-library}]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs index a58e1512ba..14ba6ce428 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs @@ -59,9 +59,8 @@ ;; --- Page Item -(mf/defc page-item - {::mf/wrap-props false} - [{:keys [page index deletable? selected? editing? hovering? current-page-id]}] +(mf/defc page-item* + [{:keys [page index is-deletable is-selected is-editing is-hovering current-page-id]}] (let [input-ref (mf/use-ref) id (:id page) delete-fn (mf/use-fn (mf/deps id) #(st/emit! (dw/delete-page id))) @@ -136,7 +135,7 @@ :data {:id id :index index :name (:name page)} - :draggable? (and (not read-only?) (not editing?))) + :draggable? (and (not read-only?) (not is-editing))) on-context-menu (mf/use-fn @@ -149,33 +148,33 @@ (st/emit! (dw/show-page-item-context-menu {:position position :page page - :deletable? deletable?}))))))] + :deletable? is-deletable}))))))] (mf/use-effect - (mf/deps selected?) + (mf/deps is-selected) (fn [] - (when selected? + (when is-selected (let [node (mf/ref-val dref)] (dom/scroll-into-view-if-needed! node))))) (mf/use-layout-effect - (mf/deps editing?) + (mf/deps is-editing) (fn [] - (when editing? + (when is-editing (let [edit-input (mf/ref-val input-ref)] (dom/select-text! edit-input)) nil))) [:li {:class (stl/css-case :page-element true - :selected selected? + :selected is-selected :dnd-over-top (= (:over dprops) :top) :dnd-over-bot (= (:over dprops) :bot)) :ref dref} [:div {:class (stl/css-case :element-list-body true - :hover hovering? - :selected selected?) + :hover is-hovering + :selected is-selected) :data-testid (dm/str "page-" id) :tab-index "0" :on-click on-click @@ -184,7 +183,7 @@ [:div {:class (stl/css :page-icon)} deprecated-icon/document] - (if editing? + (if is-editing [:* [:input {:class (stl/css :element-name) :type "text" @@ -197,24 +196,23 @@ [:span {:class (stl/css :page-name) :title (:name page) :data-testid "page-name"} (:name page)] [:div {:class (stl/css :page-actions)} - (when (and deletable? (not read-only?)) + (when (and is-deletable (not read-only?)) [:button {:on-click on-delete} deprecated-icon/delete])]])]])) ;; --- Page Item Wrapper -(mf/defc page-item-wrapper - {::mf/wrap-props false} - [{:keys [page-id index deletable? selected? editing? current-page-id]}] +(mf/defc page-item-wrapper* + [{:keys [page-id index is-deletable is-selected is-editing current-page-id]}] (let [page-ref (mf/with-memo [page-id] (make-page-ref page-id)) page (mf/deref page-ref)] - [:& page-item {:page page - :index index - :current-page-id current-page-id - :deletable? deletable? - :selected? selected? - :editing? editing?}])) + [:> page-item* {:page page + :index index + :current-page-id current-page-id + :is-deletable is-deletable + :is-selected is-selected + :is-editing is-editing}])) ;; --- Pages List @@ -228,12 +226,12 @@ [:ul {:class (stl/css :page-list)} [:> hooks/sortable-container* {} (for [[index page-id] (d/enumerate pages)] - [:& page-item-wrapper + [:> page-item-wrapper* {:page-id page-id :index index - :deletable? deletable? - :editing? (= page-id editing-page-id) - :selected? (= page-id current-page-id) + :is-deletable deletable? + :is-editing (= page-id editing-page-id) + :is-selected (= page-id current-page-id) :current-page-id current-page-id :key page-id}])]])) diff --git a/frontend/src/app/main/ui/workspace/tokens/management/forms/modals.cljs b/frontend/src/app/main/ui/workspace/tokens/management/forms/modals.cljs index 9356d45725..1acb00adbd 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/forms/modals.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/modals.cljs @@ -73,9 +73,8 @@ (-> (calculate-position vport position x y token-type) (clj->js)))) -(mf/defc token-update-create-modal - {::mf/wrap-props false} - [{:keys [x y position token token-type action selected-token-set-id] :as _args}] +(mf/defc token-update-create-modal* + [{:keys [x y position token token-type action selected-token-set-id]}] (let [wrapper-style (use-viewport-position-style x y position token-type) modal-size-large* (mf/use-state (or (= token-type :typography) (= token-type :color) @@ -110,118 +109,118 @@ {::mf/register modal/components ::mf/register-as :tokens/boolean} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc border-radius-modal {::mf/register modal/components ::mf/register-as :tokens/border-radius} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc color-modal {::mf/register modal/components ::mf/register-as :tokens/color} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc stroke-width-modal {::mf/register modal/components ::mf/register-as :tokens/stroke-width} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc box-shadow-modal {::mf/register modal/components ::mf/register-as :tokens/shadow} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc sizing-modal {::mf/register modal/components ::mf/register-as :tokens/sizing} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc dimensions-modal {::mf/register modal/components ::mf/register-as :tokens/dimensions} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc number-modal {::mf/register modal/components ::mf/register-as :tokens/number} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc opacity-modal {::mf/register modal/components ::mf/register-as :tokens/opacity} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc other-modal {::mf/register modal/components ::mf/register-as :tokens/other} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc rotation-modal {::mf/register modal/components ::mf/register-as :tokens/rotation} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc spacing-modal {::mf/register modal/components ::mf/register-as :tokens/spacing} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc string-modal {::mf/register modal/components ::mf/register-as :tokens/string} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc typography-modal {::mf/register modal/components ::mf/register-as :tokens/typography} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc font-size-modal {::mf/register modal/components ::mf/register-as :tokens/font-size} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc letter-spacing-modal {::mf/register modal/components ::mf/register-as :tokens/letter-spacing} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc font-familiy-modal {::mf/register modal/components ::mf/register-as :tokens/font-family} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc text-case-modal {::mf/register modal/components ::mf/register-as :tokens/text-case} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc text-decoration-modal {::mf/register modal/components ::mf/register-as :tokens/text-decoration} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) (mf/defc font-weight-modal {::mf/register modal/components ::mf/register-as :tokens/font-weight} [properties] - [:& token-update-create-modal properties]) + [:> token-update-create-modal* properties]) diff --git a/frontend/src/app/main/ui/workspace/tokens/settings/menu.cljs b/frontend/src/app/main/ui/workspace/tokens/settings/menu.cljs index 8469d83f28..c8842abf81 100644 --- a/frontend/src/app/main/ui/workspace/tokens/settings/menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/settings/menu.cljs @@ -26,8 +26,7 @@ [rumext.v2 :as mf])) (mf/defc token-settings* - {::mf/wrap-props false} - [] + [_props] (let [file-data (deref refs/workspace-data) base-font-size* (mf/use-state #(ctf/get-base-font-size file-data)) base-font-size (deref base-font-size*) diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs index 419ab54977..0b08bbadf5 100644 --- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs @@ -52,8 +52,7 @@ :flex (dm/str (fmt/format-number value) "FR") :auto "AUTO")) -(mf/defc grid-edition-actions - {::mf/wrap-props false} +(mf/defc grid-edition-actions* [{:keys [shape]}] [:div {:class (stl/css :grid-actions)} [:div {:class (stl/css :grid-actions-container)} @@ -66,15 +65,9 @@ :on-click #(st/emit! (dw/clear-edition-mode))} (tr "workspace.layout-grid.editor.top-bar.done")]]]) -(mf/defc grid-editor-frame - {::mf/wrap-props false} - [props] - - (let [bounds (unchecked-get props "bounds") - width (unchecked-get props "width") - height (unchecked-get props "height") - zoom (unchecked-get props "zoom") - hv #(gpo/start-hv bounds %) +(mf/defc grid-editor-frame* + [{:keys [bounds width height zoom]}] + (let [hv #(gpo/start-hv bounds %) vv #(gpo/start-vv bounds %) origin (gpo/origin bounds) @@ -94,15 +87,9 @@ (map #(dm/fmt "%,%" (:x %) (:y %))) (str/join " "))}])) -(mf/defc plus-btn - {::mf/wrap-props false} - [props] - (let [start-p (unchecked-get props "start-p") - zoom (unchecked-get props "zoom") - type (unchecked-get props "type") - on-click (unchecked-get props "on-click") - - [rect-x rect-y icon-x icon-y] +(mf/defc plus-btn* + [{:keys [start-p zoom type on-click]}] + (let [[rect-x rect-y icon-x icon-y] (if (= type :column) [(:x start-p) (- (:y start-p) (/ 40 zoom)) @@ -184,26 +171,12 @@ :handle-lost-pointer-capture handle-lost-pointer-capture :handle-pointer-move handle-pointer-move})) -(mf/defc resize-cell-handler - {::mf/wrap-props false} - [props] - (let [shape (unchecked-get props "shape") - x (unchecked-get props "x") - y (unchecked-get props "y") - width (unchecked-get props "width") - height (unchecked-get props "height") - handler (unchecked-get props "handler") - - on-set-modifiers (unchecked-get props "on-set-modifiers") - on-clear-modifiers (unchecked-get props "on-clear-modifiers") - - objects (mf/deref refs/workspace-page-objects) - {cell-id :id} (unchecked-get props "cell") +(mf/defc resize-cell-handler* + [{:keys [shape x y width height handler on-set-modifiers on-clear-modifiers cell direction layout-data]}] + (let [objects (mf/deref refs/workspace-page-objects) + {cell-id :id} cell {:keys [row column row-span column-span]} (get-in shape [:layout-grid-cells cell-id]) - direction (unchecked-get props "direction") - layout-data (unchecked-get props "layout-data") - calculate-drag-modifiers (mf/use-fn (mf/deps shape row column row-span column-span) @@ -279,14 +252,11 @@ :on-lost-pointer-capture handle-lost-pointer-capture :on-pointer-move handle-pointer-move}])) -(mf/defc grid-cell-area-label - {::mf/wrap-props false} - [props] +(mf/defc grid-cell-area-label* + [{:keys [origin width zoom text]}] - (let [cell-origin (unchecked-get props "origin") - cell-width (unchecked-get props "width") - zoom (unchecked-get props "zoom") - text (unchecked-get props "text") + (let [cell-origin origin + cell-width width area-width (/ (* 10 (count text)) zoom) area-height (/ 25 zoom) @@ -407,10 +377,10 @@ :on-pointer-down handle-pointer-down}] (when (:area-name cell) - [:& grid-cell-area-label {:origin cell-origin - :width cell-width - :zoom zoom - :text (:area-name cell)}]) + [:> grid-cell-area-label* {:origin cell-origin + :width cell-width + :zoom zoom + :text (:area-name cell)}]) (when is-selected (let [handlers @@ -421,18 +391,18 @@ [:left (+ (:x cell-origin) (/ -10 zoom)) (:y cell-origin) (/ 20 zoom) cell-height :column]]] [:g {:transform (dm/str (gmt/transform-in cell-center (:transform shape)))} (for [[handler x y width height dir] handlers] - [:& resize-cell-handler {:key (dm/str "resize-" (d/name handler) "-" (:id cell)) - :shape shape - :handler handler - :x x - :y y - :cell cell - :width width - :height height - :direction dir - :layout-data layout-data - :on-set-modifiers on-set-modifiers - :on-clear-modifiers on-clear-modifiers}])]))])) + [:> resize-cell-handler* {:key (dm/str "resize-" (d/name handler) "-" (:id cell)) + :shape shape + :handler handler + :x x + :y y + :cell cell + :width width + :height height + :direction dir + :layout-data layout-data + :on-set-modifiers on-set-modifiers + :on-clear-modifiers on-clear-modifiers}])]))])) (defn use-resize-track [type shape index track-before track-after zoom snap-pixel? on-set-modifiers on-clear-modifiers] @@ -517,27 +487,12 @@ :on-drag-delta handle-drag-position :on-drag-end handle-drag-end}))) -(mf/defc resize-track-handler - {::mf/wrap-props false} - [props] +(mf/defc resize-track-handler* + [{:keys [shape index is-last is-drop track-before track-after snap-pixel + on-set-modifiers on-clear-modifiers layout-data start-p type zoom]}] - (let [shape (unchecked-get props "shape") - index (unchecked-get props "index") - last? (unchecked-get props "last?") - drop? (unchecked-get props "drop?") - track-before (unchecked-get props "track-before") - track-after (unchecked-get props "track-after") - snap-pixel? (unchecked-get props "snap-pixel?") - - on-set-modifiers (unchecked-get props "on-set-modifiers") - on-clear-modifiers (unchecked-get props "on-clear-modifiers") - - {:keys [column-total-size column-total-gap row-total-size row-total-gap] :as layout-data} - (unchecked-get props "layout-data") - - start-p (unchecked-get props "start-p") - type (unchecked-get props "type") - zoom (unchecked-get props "zoom") + (let [{:keys [column-total-size column-total-gap row-total-size row-total-gap]} + layout-data bounds (:points shape) hv #(gpo/start-hv bounds %) @@ -546,7 +501,7 @@ [layout-gap-row layout-gap-col] (ctl/gaps shape) {:keys [handle-pointer-down handle-lost-pointer-capture handle-pointer-move]} - (use-resize-track type shape index track-before track-after zoom snap-pixel? on-set-modifiers on-clear-modifiers) + (use-resize-track type shape index track-before track-after zoom snap-pixel on-set-modifiers on-clear-modifiers) [width height] (if (= type :column) @@ -564,11 +519,11 @@ (and (= type :row) (= index 0)) (gpt/subtract (vv (/ height 2))) - (and (= type :column) (not= index 0) (not last?)) + (and (= type :column) (not= index 0) (not is-last)) (-> (gpt/subtract (hv (/ layout-gap-col 2))) (gpt/subtract (hv (/ width 2)))) - (and (= type :row) (not= index 0) (not last?)) + (and (= type :row) (not= index 0) (not is-last)) (-> (gpt/subtract (vv (/ layout-gap-row 2))) (gpt/subtract (vv (/ height 2))))) @@ -580,21 +535,21 @@ (and (= type :row) (= index 0)) (gpt/subtract (vv (/ height 2))) - (and (= type :column) last?) + (and (= type :column) is-last) (gpt/add (hv (/ width 2))) - (and (= type :row) last?) + (and (= type :row) is-last) (gpt/add (vv (/ height 2))) - (and (= type :column) (not= index 0) (not last?)) + (and (= type :column) (not= index 0) (not is-last)) (-> (gpt/subtract (hv (/ layout-gap-col 2))) (gpt/subtract (hv (/ 5 zoom)))) - (and (= type :row) (not= index 0) (not last?)) + (and (= type :row) (not= index 0) (not is-last)) (-> (gpt/subtract (vv (/ layout-gap-row 2))) (gpt/subtract (vv (/ 5 zoom)))))] [:* - (when drop? + (when is-drop [:rect.drop {:x (:x start-p-drop) :y (:y start-p-drop) @@ -689,28 +644,15 @@ (dm/fmt "L%,%" (:x a1) (:y a1)) "Z"))) -(mf/defc track-marker - {::mf/wrap-props false} - [props] +(mf/defc track-marker* + [{:keys [center value zoom shape index type track-before track-after snap-pixel + on-set-modifiers on-clear-modifiers]}] - (let [center (unchecked-get props "center") - value (unchecked-get props "value") - zoom (unchecked-get props "zoom") - shape (unchecked-get props "shape") - index (unchecked-get props "index") - type (unchecked-get props "type") - track-before (unchecked-get props "track-before") - track-after (unchecked-get props "track-after") - snap-pixel? (unchecked-get props "snap-pixel?") - - on-set-modifiers (unchecked-get props "on-set-modifiers") - on-clear-modifiers (unchecked-get props "on-clear-modifiers") - - text-x (:x center) + (let [text-x (:x center) text-y (:y center) {:keys [handle-pointer-down handle-lost-pointer-capture handle-pointer-move]} - (use-resize-track type shape index track-before track-after zoom snap-pixel? on-set-modifiers on-clear-modifiers)] + (use-resize-track type shape index track-before track-after zoom snap-pixel on-set-modifiers on-clear-modifiers)] [:g {:on-pointer-down handle-pointer-down :on-lost-pointer-capture handle-lost-pointer-capture @@ -731,28 +673,12 @@ :dominant-baseline "middle"} (dm/str value)]])) -(mf/defc track - {::mf/wrap [mf/memo] - ::mf/wrap-props false} - [props] - (let [shape (unchecked-get props "shape") - zoom (unchecked-get props "zoom") - type (unchecked-get props "type") - index (unchecked-get props "index") - snap-pixel? (unchecked-get props "snap-pixel?") - track-data (unchecked-get props "track-data") - layout-data (unchecked-get props "layout-data") - hovering? (unchecked-get props "hovering?") - drop? (unchecked-get props "drop?") - - on-start-reorder-track (unchecked-get props "on-start-reorder-track") - on-move-reorder-track (unchecked-get props "on-move-reorder-track") - on-end-reorder-track (unchecked-get props "on-end-reorder-track") - - on-set-modifiers (unchecked-get props "on-set-modifiers") - on-clear-modifiers (unchecked-get props "on-clear-modifiers") - - track-input-ref (mf/use-ref) +(mf/defc track* + {::mf/wrap [mf/memo]} + [{:keys [shape zoom type index snap-pixel track-data layout-data is-hovering is-drop + on-start-reorder-track on-move-reorder-track on-end-reorder-track + on-set-modifiers on-clear-modifiers]}] + (let [track-input-ref (mf/use-ref) [layout-gap-row layout-gap-col] (ctl/gaps shape) bounds (:points shape) @@ -898,7 +824,7 @@ :height (- text-height (/ 5 zoom)) :rx (/ 3 zoom) :style {:cursor "pointer"} - :opacity (if (and hovering? (not small?)) 0.2 0)}] + :opacity (if (and is-hovering (not small?)) 0.2 0)}] (when (not small?) [:foreignObject {:x text-x :y text-y :width text-width :height text-height} [:div {:class (stl/css :grid-editor-wrapper) @@ -915,16 +841,16 @@ :data-default-value (format-size track-data) :on-key-down handle-keydown-track-input :on-blur handle-blur-track-input}] - (when (and hovering? (not medium?) (not small?)) + (when (and is-hovering (not medium?) (not small?)) [:button {:class (stl/css :grid-editor-button) :on-click handle-show-track-menu} deprecated-icon/menu])]])] [:g {:transform (when (= type :row) (dm/fmt "rotate(-90 % %)" (:x marker-p) (:y marker-p)))} - [:& track-marker + [:> track-marker* {:center marker-p :index index :shape shape - :snap-pixel? snap-pixel? + :snap-pixel snap-pixel :track-after track-data :track-before track-before :type type @@ -933,12 +859,12 @@ :on-set-modifiers on-set-modifiers :on-clear-modifiers on-clear-modifiers}]] - [:& resize-track-handler + [:> resize-track-handler* {:index index :layout-data layout-data :shape shape - :snap-pixel? snap-pixel? - :drop? drop? + :snap-pixel snap-pixel + :is-drop is-drop :start-p start-p :track-after track-data :track-before track-before @@ -1122,42 +1048,42 @@ (when-not ^boolean view-only [:* - [:& grid-editor-frame {:zoom zoom - :bounds bounds - :width width - :height height}] + [:> grid-editor-frame* {:zoom zoom + :bounds bounds + :width width + :height height}] (let [start-p (-> origin (gpt/add (hv (+ width (/ 30 zoom)))))] [:g {:transform (dm/str (gmt/transform-in start-p (:transform shape)))} - [:& plus-btn {:start-p start-p - :zoom zoom - :type :column - :on-click handle-add-column}]]) + [:> plus-btn* {:start-p start-p + :zoom zoom + :type :column + :on-click handle-add-column}]]) (let [start-p (-> origin (gpt/add (vv (+ height (/ 30 zoom)))))] [:g {:transform (dm/str (gmt/transform-in start-p (:transform shape)))} - [:& plus-btn {:start-p start-p - :zoom zoom - :type :row - :on-click handle-add-row}]]) + [:> plus-btn* {:start-p start-p + :zoom zoom + :type :row + :on-click handle-add-row}]]) (for [[idx column-data] (d/enumerate column-tracks)] - (let [drop? (and (= :column @drop-track-type*) - (= idx @drop-track-target*))] - [:& track {:key (dm/str "column-track-" idx) - :shape shape - :zoom zoom - :type :column - :index idx - :layout-data layout-data - :snap-pixel? snap-pixel? - :drop? drop? - :track-data column-data - :hovering? (contains? hover-columns idx) - :on-start-reorder-track handle-start-reorder-track - :on-move-reorder-track handle-move-reorder-track - :on-end-reorder-track handle-end-reorder-track - :on-set-modifiers handle-set-modifiers - :on-clear-modifiers handle-clear-modifiers}])) + (let [is-drop (and (= :column @drop-track-type*) + (= idx @drop-track-target*))] + [:> track* {:key (dm/str "column-track-" idx) + :shape shape + :zoom zoom + :type :column + :index idx + :layout-data layout-data + :snap-pixel snap-pixel? + :is-drop is-drop + :track-data column-data + :is-hovering (contains? hover-columns idx) + :on-start-reorder-track handle-start-reorder-track + :on-move-reorder-track handle-move-reorder-track + :on-end-reorder-track handle-end-reorder-track + :on-set-modifiers handle-set-modifiers + :on-clear-modifiers handle-clear-modifiers}])) ;; Last track resize handler (when-not (empty? column-tracks) @@ -1167,25 +1093,25 @@ marker-p (-> (gpo/project-point bounds :h end-p) (gpt/subtract (vv (/ 20 zoom))))] [:g.track - [:& track-marker {:center marker-p - :index (count column-tracks) - :shape shape - :snap-pixel? snap-pixel? - :track-before (last column-tracks) - :type :column - :value (dm/str (inc (count column-tracks))) - :zoom zoom - :on-set-modifiers handle-set-modifiers - :on-clear-modifiers handle-clear-modifiers}] + [:> track-marker* {:center marker-p + :index (count column-tracks) + :shape shape + :snap-pixel snap-pixel? + :track-before (last column-tracks) + :type :column + :value (dm/str (inc (count column-tracks))) + :zoom zoom + :on-set-modifiers handle-set-modifiers + :on-clear-modifiers handle-clear-modifiers}] (let [drop? (and (= :column @drop-track-type*) (= (count column-tracks) @drop-track-target*))] - [:& resize-track-handler + [:> resize-track-handler* {:index (count column-tracks) - :last? true - :drop? drop? + :is-last true + :is-drop drop? :shape shape :layout-data layout-data - :snap-pixel? snap-pixel? + :snap-pixel snap-pixel? :start-p end-p :type :column :track-before (last column-tracks) @@ -1194,23 +1120,23 @@ :on-clear-modifiers handle-clear-modifiers}])])) (for [[idx row-data] (d/enumerate row-tracks)] - (let [drop? (and (= :row @drop-track-type*) - (= idx @drop-track-target*))] - [:& track {:index idx - :key (dm/str "row-track-" idx) - :layout-data layout-data - :shape shape - :snap-pixel? snap-pixel? - :drop? drop? - :track-data row-data - :type :row - :zoom zoom - :hovering? (contains? hover-rows idx) - :on-start-reorder-track handle-start-reorder-track - :on-move-reorder-track handle-move-reorder-track - :on-end-reorder-track handle-end-reorder-track - :on-set-modifiers handle-set-modifiers - :on-clear-modifiers handle-clear-modifiers}])) + (let [is-drop (and (= :row @drop-track-type*) + (= idx @drop-track-target*))] + [:> track* {:index idx + :key (dm/str "row-track-" idx) + :layout-data layout-data + :shape shape + :snap-pixel snap-pixel? + :is-drop is-drop + :track-data row-data + :type :row + :zoom zoom + :is-hovering (contains? hover-rows idx) + :on-start-reorder-track handle-start-reorder-track + :on-move-reorder-track handle-move-reorder-track + :on-end-reorder-track handle-end-reorder-track + :on-set-modifiers handle-set-modifiers + :on-clear-modifiers handle-clear-modifiers}])) (when-not (empty? row-tracks) (let [last-track (last row-tracks) start-p (:start-p last-track) @@ -1219,28 +1145,28 @@ (gpt/subtract (hv (/ 20 zoom))))] [:g.track [:g {:transform (dm/fmt "rotate(-90 % %)" (:x marker-p) (:y marker-p))} - [:& track-marker {:center marker-p - :index (count row-tracks) - :shape shape - :snap-pixel? snap-pixel? - :track-before (last row-tracks) - :type :row - :value (dm/str (inc (count row-tracks))) - :zoom zoom - :on-set-modifiers handle-set-modifiers - :on-clear-modifiers handle-clear-modifiers}]] + [:> track-marker* {:center marker-p + :index (count row-tracks) + :shape shape + :snap-pixel snap-pixel? + :track-before (last row-tracks) + :type :row + :value (dm/str (inc (count row-tracks))) + :zoom zoom + :on-set-modifiers handle-set-modifiers + :on-clear-modifiers handle-clear-modifiers}]] (let [drop? (and (= :row @drop-track-type*) (= (count row-tracks) @drop-track-target*))] - [:& resize-track-handler + [:> resize-track-handler* {:index (count row-tracks) - :last? true - :drop? drop? + :is-last true + :is-drop drop? :shape shape :layout-data layout-data :start-p end-p :type :row :track-before (last row-tracks) - :snap-pixel? snap-pixel? + :snap-pixel snap-pixel? :zoom zoom :on-set-modifiers handle-set-modifiers :on-clear-modifiers handle-clear-modifiers}])]))])]))) diff --git a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs index b9f4f69cb4..8b94753fa3 100644 --- a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs @@ -10,7 +10,7 @@ [app.main.data.workspace :as dw] [app.main.data.workspace.common :as dwc] [app.main.store :as st] - [app.main.ui.workspace.viewport.grid-layout-editor :refer [grid-edition-actions]] + [app.main.ui.workspace.viewport.grid-layout-editor :refer [grid-edition-actions*]] [app.main.ui.workspace.viewport.path-actions :refer [path-actions*]] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -49,4 +49,4 @@ (mf/defc grid-edition-bar* [{:keys [shape]}] - [:& grid-edition-actions {:shape shape}]) + [:> grid-edition-actions* {:shape shape}])