github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-04-25 11:18:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Convert workspace sidebar/viewport components to mf/defc * suffix format (Batch 4)

Browse Source
This commit is contained in:
Andrey Antukh 2026-04-03 07:49:28 +00:00
parent 7b53c99482
commit 33ac67d852
10 changed files with 311 additions and 398 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/app/main/ui/workspace/right_header.cljs
View File

@ -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

57
frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
View File

@ -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)

130
frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
View File

@ -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*

16
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
View File

@ -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]

49
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View File

@ -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}]]))

52
frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
View File

@ -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}])]]))

45
frontend/src/app/main/ui/workspace/tokens/management/forms/modals.cljs
View File

@ -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])

3
frontend/src/app/main/ui/workspace/tokens/settings/menu.cljs
View File

@ -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*)

346
frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
View File

@ -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}])]))])])))

4
frontend/src/app/main/ui/workspace/viewport/top_bar.cljs
View File

@ -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}])