3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-06 06:41:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix scroll bars

Browse source
This commit is contained in:
Alejandro Alonso 2022-04-29 14:20:28 +02:00 • committed by Alonso Torres
parent 4d106d9e15
commit 2f0e85f619
1 changed files with 60 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

126
frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs
View file

@ -123,81 +123,75 @@
h-scrollbar-x) h-scrollbar-x)
on-mouse-move on-mouse-move
(mf/use-callback (fn [event axis]
(mf/deps zoom @v-scrolling? @h-scrolling?) (when-let [_ (or @v-scrolling? @h-scrolling?)]
(fn [event axis] (let [viewport (mf/ref-val viewport-ref)
(when-let [_ (or @v-scrolling? @h-scrolling?)] start-pt (mf/ref-val start-ref)
(let [viewport (mf/ref-val viewport-ref) current-pt (dom/get-client-position event)
start-pt (mf/ref-val start-ref) current-pt-viewport (utils/translate-point-to-viewport viewport zoom current-pt)
current-pt (dom/get-client-position event) y-delta (/ (* (mf/ref-val height-factor-ref) (- (:y current-pt) (:y start-pt))) zoom)
current-pt-viewport (utils/translate-point-to-viewport viewport zoom current-pt) x-delta (/ (* (mf/ref-val width-factor-ref) (- (:x current-pt) (:x start-pt))) zoom)
y-delta (/ (* (mf/ref-val height-factor-ref) (- (:y current-pt) (:y start-pt))) zoom) new-v-scrollbar-y (-> current-pt-viewport
x-delta (/ (* (mf/ref-val width-factor-ref) (- (:x current-pt) (:x start-pt))) zoom) (:y)
new-v-scrollbar-y (-> current-pt-viewport (+ (mf/ref-val v-scrollbar-y-padding-ref)))
(:y) new-h-scrollbar-x (-> current-pt-viewport
(+ (mf/ref-val v-scrollbar-y-padding-ref))) (:x)
new-h-scrollbar-x (-> current-pt-viewport (+ (mf/ref-val h-scrollbar-x-padding-ref)))
(:x) viewport-update (-> {}
(+ (mf/ref-val h-scrollbar-x-padding-ref))) (cond-> (= axis :y) (assoc :y #(+ % y-delta)))
viewport-update (-> {} (cond-> (= axis :x) (assoc :x #(+ % x-delta))))]
(cond-> (= axis :y) (assoc :y #(+ % y-delta))) (mf/set-ref-val! vbox-y-ref vbox-y)
(cond-> (= axis :x) (assoc :x #(+ % x-delta))))] (mf/set-ref-val! vbox-x-ref vbox-x)
(mf/set-ref-val! vbox-y-ref vbox-y) (st/emit! (dw/update-viewport-position viewport-update))
(mf/set-ref-val! vbox-x-ref vbox-x) (mf/set-ref-val! v-scrollbar-y-ref new-v-scrollbar-y)
(st/emit! (dw/update-viewport-position viewport-update)) (mf/set-ref-val! h-scrollbar-x-ref new-h-scrollbar-x)
(mf/set-ref-val! v-scrollbar-y-ref new-v-scrollbar-y) (mf/set-ref-val! start-ref current-pt))))
(mf/set-ref-val! h-scrollbar-x-ref new-h-scrollbar-x)
(mf/set-ref-val! start-ref current-pt)))))
on-mouse-down on-mouse-down
(mf/use-callback (fn [event axis]
(mf/deps v-scrollbar-y scrollbar-height) (let [viewport (mf/ref-val viewport-ref)
(fn [event axis] start-pt (dom/get-client-position event)
(let [viewport (mf/ref-val viewport-ref) viewport-point (utils/translate-point-to-viewport viewport zoom start-pt)
start-pt (dom/get-client-position event) new-h-scrollbar-x (:x viewport-point)
viewport-point (utils/translate-point-to-viewport viewport zoom start-pt) new-v-scrollbar-y (:y viewport-point)
new-h-scrollbar-x (:x viewport-point) v-scrollbar-y-padding (- v-scrollbar-y new-v-scrollbar-y)
new-v-scrollbar-y (:y viewport-point) h-scrollbar-x-padding (- h-scrollbar-x new-h-scrollbar-x)
v-scrollbar-y-padding (- v-scrollbar-y new-v-scrollbar-y) vbox-rect {:x vbox-x
h-scrollbar-x-padding (- h-scrollbar-x new-h-scrollbar-x) :y vbox-y
vbox-rect {:x vbox-x :x1 vbox-x
:y vbox-y :y1 vbox-y
:x1 vbox-x :x2 (+ vbox-x (:width vbox))
:y1 vbox-y :y2 (+ vbox-y (:height vbox))
:x2 (+ vbox-x (:width vbox)) :width (:width vbox)
:y2 (+ vbox-y (:height vbox)) :height (:height vbox)}
:width (:width vbox) containing-rect (gsh/join-selrects [base-objects-rect vbox-rect])
:height (:height vbox)} height-factor (/ (:height containing-rect) vbox-height)
containing-rect (gsh/join-selrects [base-objects-rect vbox-rect]) width-factor (/ (:width containing-rect) vbox-width)]
height-factor (/ (:height containing-rect) vbox-height) (mf/set-ref-val! start-ref start-pt)
width-factor (/ (:width containing-rect) vbox-width)] (mf/set-ref-val! v-scrollbar-y-padding-ref v-scrollbar-y-padding)
(mf/set-ref-val! start-ref start-pt) (mf/set-ref-val! h-scrollbar-x-padding-ref h-scrollbar-x-padding)
(mf/set-ref-val! v-scrollbar-y-padding-ref v-scrollbar-y-padding) (mf/set-ref-val! v-scrollbar-y-ref (+ new-v-scrollbar-y v-scrollbar-y-padding))
(mf/set-ref-val! h-scrollbar-x-padding v-scrollbar-y-padding) (mf/set-ref-val! h-scrollbar-x-ref (+ new-h-scrollbar-x h-scrollbar-x-padding))
(mf/set-ref-val! v-scrollbar-y-ref (+ new-v-scrollbar-y v-scrollbar-y-padding)) (mf/set-ref-val! vbox-y-ref vbox-y)
(mf/set-ref-val! h-scrollbar-x-ref (+ new-h-scrollbar-x h-scrollbar-x-padding)) (mf/set-ref-val! vbox-x-ref vbox-x)
(mf/set-ref-val! vbox-y-ref vbox-y) (mf/set-ref-val! scrollbar-height-ref scrollbar-height)
(mf/set-ref-val! vbox-x-ref vbox-x) (mf/set-ref-val! scrollbar-width-ref scrollbar-width)
(mf/set-ref-val! scrollbar-height-ref scrollbar-height) (mf/set-ref-val! height-factor-ref height-factor)
(mf/set-ref-val! scrollbar-width-ref scrollbar-width) (mf/set-ref-val! width-factor-ref width-factor)
(mf/set-ref-val! height-factor-ref height-factor) (reset! v-scrolling? (= axis :y))
(mf/set-ref-val! width-factor-ref width-factor) (reset! h-scrolling? (= axis :x))))
(reset! v-scrolling? (= axis :y))
(reset! h-scrolling? (= axis :x)))))
on-mouse-up on-mouse-up
(mf/use-callback (fn []
(mf/deps) (reset! v-scrolling? false)
(fn [_] (reset! h-scrolling? false))]
(reset! v-scrolling? false)
(reset! h-scrolling? false)))]
[:* [:*
(when show-v-scroll? (when show-v-scroll?
[:g.v-scroll [:g.v-scroll
[:rect {:on-mouse-move #(on-mouse-move % :y) [:rect {:on-mouse-move #(on-mouse-move % :y)
:on-mouse-down #(on-mouse-down % :y) :on-mouse-down #(on-mouse-down % :y)
:on-mouse-up #(on-mouse-up % :y) :on-mouse-up on-mouse-up
:width (* inv-zoom 7) :width (* inv-zoom 7)
:rx (* inv-zoom 3) :rx (* inv-zoom 3)
:ry (* inv-zoom 3) :ry (* inv-zoom 3)
@ -211,7 +205,7 @@
[:g.h-scroll [:g.h-scroll
[:rect {:on-mouse-move #(on-mouse-move % :x) [:rect {:on-mouse-move #(on-mouse-move % :x)
:on-mouse-down #(on-mouse-down % :x) :on-mouse-down #(on-mouse-down % :x)
:on-mouse-up #(on-mouse-up % :x) :on-mouse-up on-mouse-up
:width scrollbar-width :width scrollbar-width
:rx (* inv-zoom 3) :rx (* inv-zoom 3)
:ry (* inv-zoom 3) :ry (* inv-zoom 3)