github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-07 00:58:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Remove drag to change when there is a token applied on numeric-inputs (#9314)

Browse Source
This commit is contained in:
Eva Marco 2026-05-06 10:31:39 +02:00 committed by GitHub
parent 1744d17385
commit 5f40673fde
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 56 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
frontend/src/app/main/ui/ds/controls/numeric_input.cljs
View File

@ -218,6 +218,8 @@
token-applied-name* (mf/use-state applied-token-name)
token-applied-name (deref token-applied-name*)
is-token-applied? (and (some? token-applied-name)
(not= :multiple token-applied-name))
focused-id* (mf/use-state nil)
focused-id (deref focused-id*)
@ -501,9 +503,9 @@
on-scrub-pointer-down
(mf/use-fn
(mf/deps disabled is-open is-multiple? ref min max nillable default)
(mf/deps disabled is-open is-multiple? ref min max nillable default is-token-applied?)
(fn [event]
(when-not (or disabled is-open is-multiple?)
(when-not (or disabled is-open is-multiple? is-token-applied?)
(let [node (mf/ref-val ref)
is-focused (and (some? node) (dom/active? node))
has-token (some? (deref token-applied-name*))]
@ -518,57 +520,60 @@
on-scrub-pointer-move
(mf/use-fn
(mf/deps apply-value update-input step min max on-change-start)
(mf/deps apply-value update-input step min max on-change-start is-token-applied?)
(fn [event]
(let [state (mf/ref-val drag-state*)]
(when (or (= state :maybe-dragging) (= state :dragging))
(let [client-x (.-clientX event)
start-x (mf/ref-val drag-start-x*)
delta-x (- client-x start-x)]
(when (and (= state :maybe-dragging)
(>= (js/Math.abs delta-x) 3))
(mf/set-ref-val! drag-state* :dragging)
(dom/add-class! (dom/get-body) "cursor-drag-scrub")
(when (fn? on-change-start)
(on-change-start)))
(when (= (mf/ref-val drag-state*) :dragging)
(let [effective-step (cond
(.-shiftKey event) (* step 10)
(.-ctrlKey event) (* step 0.1)
:else step)
steps (js/Math.round (/ delta-x 1))
new-val (mth/clamp (+ (mf/ref-val drag-start-val*)
(* steps effective-step))
min max)]
(update-input (fmt/format-number new-val))
(apply-value (dm/str new-val)))))))))
(when-not is-token-applied?
(let [state (mf/ref-val drag-state*)]
(when (or (= state :maybe-dragging) (= state :dragging))
(let [client-x (.-clientX event)
start-x (mf/ref-val drag-start-x*)
delta-x (- client-x start-x)]
(when (and (= state :maybe-dragging)
(>= (js/Math.abs delta-x) 3))
(mf/set-ref-val! drag-state* :dragging)
(dom/add-class! (dom/get-body) "cursor-drag-scrub")
(when (fn? on-change-start)
(on-change-start)))
(when (= (mf/ref-val drag-state*) :dragging)
(let [effective-step (cond
(.-shiftKey event) (* step 10)
(.-ctrlKey event) (* step 0.1)
:else step)
steps (js/Math.round (/ delta-x 1))
new-val (mth/clamp (+ (mf/ref-val drag-start-val*)
(* steps effective-step))
min max)]
(update-input (fmt/format-number new-val))
(apply-value (dm/str new-val))))))))))
on-scrub-pointer-up
(mf/use-fn
(mf/deps ref on-change-end)
(mf/deps ref on-change-end is-token-applied?)
(fn [event]
(let [state (mf/ref-val drag-state*)]
(when (= state :maybe-dragging)
(mf/set-ref-val! drag-state* :idle)
(dom/release-pointer event)
(when-let [node (mf/ref-val ref)]
(dom/focus! node)))
(when (= state :dragging)
(mf/set-ref-val! drag-state* :idle)
(dom/remove-class! (dom/get-body) "cursor-drag-scrub")
(dom/release-pointer event)
(when (fn? on-change-end)
(on-change-end))))))
(when-not is-token-applied?
(let [state (mf/ref-val drag-state*)]
(when (= state :maybe-dragging)
(mf/set-ref-val! drag-state* :idle)
(dom/release-pointer event)
(when-let [node (mf/ref-val ref)]
(dom/focus! node)))
(when (= state :dragging)
(mf/set-ref-val! drag-state* :idle)
(dom/remove-class! (dom/get-body) "cursor-drag-scrub")
(dom/release-pointer event)
(when (fn? on-change-end)
(on-change-end)))))))
on-scrub-lost-pointer-capture
(mf/use-fn
(mf/deps on-change-end)
(mf/deps on-change-end is-token-applied?)
(fn [_event]
(let [was-dragging (= :dragging (mf/ref-val drag-state*))]
(mf/set-ref-val! drag-state* :idle)
(dom/remove-class! (dom/get-body) "cursor-drag-scrub")
(when (and was-dragging (fn? on-change-end))
(on-change-end)))))
(when-not is-token-applied?
(let [was-dragging (= :dragging (mf/ref-val drag-state*))]
(mf/set-ref-val! drag-state* :idle)
(dom/remove-class! (dom/get-body) "cursor-drag-scrub")
(when (and was-dragging (fn? on-change-end))
(on-change-end))))))
open-dropdown
(mf/use-fn
@ -766,15 +771,15 @@
(mf/with-effect [dropdown-options]
(mf/set-ref-val! options-ref dropdown-options))
[:div {:class [class (stl/css :input-wrapper)]
[:div {:class [class (stl/css-case :input-wrapper true
:resizable (not is-token-applied?))]
:ref wrapper-ref
:on-pointer-down on-scrub-pointer-down
:on-pointer-move on-scrub-pointer-move
:on-pointer-up on-scrub-pointer-up
:on-lost-pointer-capture on-scrub-lost-pointer-capture}
(if (and (some? token-applied-name)
(not= :multiple token-applied-name))
(if is-token-applied?
[:> token-field* token-props]
[:> input-field* input-props])

6
frontend/src/app/main/ui/ds/controls/numeric_input.scss
View File

@ -22,8 +22,10 @@
inline-size: 100%;
position: relative;
&:not(:focus-within) {
cursor: ew-resize;
&.resizable {
&:not(:focus-within) {
cursor: ew-resize;
}
}
&:hover {