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

🐛 Fix scroll so it's not hidden against palette

Browse source
This commit is contained in:
alonso.torres 2023-12-12 16:54:29 +01:00
parent ffa37d26fc
commit 9834195f0e
6 changed files with 92 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app/main/ui/components/color_bullet_new.scss
View file

@ -87,6 +87,7 @@
@include inspectValue; @include inspectValue;
color: var(--palette-text-color); color: var(--palette-text-color);
height: $s-16; height: $s-16;
text-align: center;
} }
.no-text { .no-text {

110
frontend/src/app/main/ui/hooks/resize.cljs
View file

@ -24,62 +24,72 @@
(set! last-resize-type type)) (set! last-resize-type type))
(defn use-resize-hook (defn use-resize-hook
[key initial min-val max-val axis negate? resize-type] ([key initial min-val max-val axis negate? resize-type]
(use-resize-hook key initial min-val max-val axis negate? resize-type nil))
(let [current-file-id (mf/use-ctx ctx/current-file-id) ([key initial min-val max-val axis negate? resize-type on-change-size]
size-state (mf/use-state (or (get-in @storage [::saved-resize current-file-id key]) initial)) (let [current-file-id (mf/use-ctx ctx/current-file-id)
parent-ref (mf/use-ref nil) size-state (mf/use-state (or (get-in @storage [::saved-resize current-file-id key]) initial))
parent-ref (mf/use-ref nil)
dragging-ref (mf/use-ref false) dragging-ref (mf/use-ref false)
start-size-ref (mf/use-ref nil) start-size-ref (mf/use-ref nil)
start-ref (mf/use-ref nil) start-ref (mf/use-ref nil)
on-pointer-down on-pointer-down
(mf/use-callback (mf/use-callback
(mf/deps @size-state) (mf/deps @size-state)
(fn [event] (fn [event]
(dom/capture-pointer event) (dom/capture-pointer event)
(mf/set-ref-val! start-size-ref @size-state) (mf/set-ref-val! start-size-ref @size-state)
(mf/set-ref-val! dragging-ref true) (mf/set-ref-val! dragging-ref true)
(mf/set-ref-val! start-ref (dom/get-client-position event)) (mf/set-ref-val! start-ref (dom/get-client-position event))
(set! last-resize-type resize-type))) (set! last-resize-type resize-type)))
on-lost-pointer-capture on-lost-pointer-capture
(mf/use-callback (mf/use-callback
(fn [event] (fn [event]
(dom/release-pointer event) (dom/release-pointer event)
(mf/set-ref-val! start-size-ref nil) (mf/set-ref-val! start-size-ref nil)
(mf/set-ref-val! dragging-ref false) (mf/set-ref-val! dragging-ref false)
(mf/set-ref-val! start-ref nil) (mf/set-ref-val! start-ref nil)
(set! last-resize-type nil))) (set! last-resize-type nil)))
on-pointer-move on-pointer-move
(mf/use-callback (mf/use-callback
(mf/deps min-val max-val negate?) (mf/deps min-val max-val negate?)
(fn [event] (fn [event]
(when (mf/ref-val dragging-ref) (when (mf/ref-val dragging-ref)
(let [start (mf/ref-val start-ref) (let [start (mf/ref-val start-ref)
pos (dom/get-client-position event) pos (dom/get-client-position event)
delta (-> (gpt/to-vec start pos) delta (-> (gpt/to-vec start pos)
(cond-> negate? gpt/negate) (cond-> negate? gpt/negate)
(get axis)) (get axis))
start-size (mf/ref-val start-size-ref) start-size (mf/ref-val start-size-ref)
new-size (-> (+ start-size delta) (max min-val) (min max-val))] new-size (-> (+ start-size delta) (max min-val) (min max-val))]
(reset! size-state new-size) (reset! size-state new-size)
(swap! storage assoc-in [::saved-resize current-file-id key] new-size))))) (swap! storage assoc-in [::saved-resize current-file-id key] new-size)
(when on-change-size (on-change-size new-size))))))
set-size set-size
(mf/use-callback (mf/use-callback
(fn [new-size] (mf/deps on-change-size)
(let [new-size (mth/clamp new-size min-val max-val)] (fn [new-size]
(reset! size-state new-size) (let [new-size (mth/clamp new-size min-val max-val)]
(swap! storage assoc-in [::saved-resize current-file-id key] new-size))))] (reset! size-state new-size)
{:on-pointer-down on-pointer-down (swap! storage assoc-in [::saved-resize current-file-id key] new-size)
:on-lost-pointer-capture on-lost-pointer-capture (when on-change-size (on-change-size new-size)))))]
:on-pointer-move on-pointer-move
:parent-ref parent-ref (mf/use-effect
:set-size set-size (fn []
:size @size-state})) (when on-change-size (on-change-size @size-state))))
{:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-pointer-move on-pointer-move
:parent-ref parent-ref
:set-size set-size
:size @size-state})))
(defn use-resize-observer (defn use-resize-observer
[callback] [callback]

16
frontend/src/app/main/ui/workspace.cljs
View file

@ -61,7 +61,8 @@
(mf/defc workspace-content (mf/defc workspace-content
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [file layout page-id wglobal]}] [{:keys [file layout page-id wglobal]}]
(let [selected (mf/deref refs/selected-shapes) (let [palete-size (mf/use-state nil)
selected (mf/deref refs/selected-shapes)
{:keys [vport] :as wlocal} (mf/deref refs/workspace-local) {:keys [vport] :as wlocal} (mf/deref refs/workspace-local)
{:keys [options-mode]} wglobal {:keys [options-mode]} wglobal
@ -78,11 +79,17 @@
(when (and vport (not= size vport)) (when (and vport (not= size vport))
(st/emit! (dw/update-viewport-size resize-type size))))) (st/emit! (dw/update-viewport-size resize-type size)))))
on-resize-palette
(mf/use-fn
(fn [size]
(reset! palete-size size)))
node-ref (use-resize-observer on-resize)] node-ref (use-resize-observer on-resize)]
[:* [:*
(if new-css-system (if new-css-system
(when (not hide-ui?) (when (not hide-ui?)
[:& palette {:layout layout}]) [:& palette {:layout layout
:on-change-palette-size on-resize-palette}])
[:* [:*
(when (and colorpalette? (not hide-ui?)) (when (and colorpalette? (not hide-ui?))
[:& colorpalette]) [:& colorpalette])
@ -107,7 +114,10 @@
:wlocal wlocal :wlocal wlocal
:wglobal wglobal :wglobal wglobal
:selected selected :selected selected
:layout layout}]]] :layout layout
:palete-size
(when (and (or colorpalette? textpalette?) (not hide-ui?))
@palete-size)}]]]
(when-not hide-ui? (when-not hide-ui?
[:* [:*

14
frontend/src/app/main/ui/workspace/palette.cljs
View file

@ -46,7 +46,7 @@
"paddingRight" "calc(var(--s-4) * 70)"})) "paddingRight" "calc(var(--s-4) * 70)"}))
(mf/defc palette (mf/defc palette
[{:keys [layout]}] [{:keys [layout on-change-palette-size]}]
(let [color-palette? (:colorpalette layout) (let [color-palette? (:colorpalette layout)
text-palette? (:textpalette layout) text-palette? (:textpalette layout)
workspace-read-only? (mf/use-ctx ctx/workspace-read-only?) workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
@ -57,10 +57,11 @@
on-select (mf/use-fn #(reset! selected %)) on-select (mf/use-fn #(reset! selected %))
rulers? (mf/deref refs/rules?) rulers? (mf/deref refs/rules?)
{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]} {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
(r/use-resize-hook :palette 72 54 80 :y true :bottom) (r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-palette-size)
vport (mf/deref viewport) vport (mf/deref viewport)
vport-width (:width vport) vport-width (:width vport)
on-resize on-resize
(mf/use-callback (mf/use-callback
(fn [_] (fn [_]
@ -98,10 +99,11 @@
any-palette? (or color-palette? text-palette?) any-palette? (or color-palette? text-palette?)
size-classname (cond size-classname
(<= size 64) (css :small-palette) (cond
(<= size 72) (css :mid-palette) (<= size 64) (css :small-palette)
(<= size 80) (css :big-palette))] (<= size 72) (css :mid-palette)
(<= size 80) (css :big-palette))]
(mf/with-effect [] (mf/with-effect []
(let [key1 (events/listen js/window "resize" on-resize)] (let [key1 (events/listen js/window "resize" on-resize)]

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

@ -69,7 +69,7 @@
selected)) selected))
(mf/defc viewport (mf/defc viewport
[{:keys [selected wglobal wlocal layout file] :as props}] [{:keys [selected wglobal wlocal layout file palete-size] :as props}]
(let [;; When adding data from workspace-local revisit `app.main.ui.workspace` to check (let [;; When adding data from workspace-local revisit `app.main.ui.workspace` to check
;; that the new parameter is sent ;; that the new parameter is sent
{:keys [edit-path {:keys [edit-path
@ -535,7 +535,8 @@
[:& scroll-bars/viewport-scrollbars [:& scroll-bars/viewport-scrollbars
{:objects base-objects {:objects base-objects
:zoom zoom :zoom zoom
:vbox vbox}] :vbox vbox
:bottom-padding (when palete-size (+ palete-size 8))}]
(when-not hide-ui? (when-not hide-ui?
[:& rules/rules [:& rules/rules

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

@ -28,7 +28,7 @@
(mf/defc viewport-scrollbars (mf/defc viewport-scrollbars
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
[{:keys [objects zoom vbox]}] [{:keys [objects zoom vbox bottom-padding]}]
(let [v-scrolling? (mf/use-state false) (let [v-scrolling? (mf/use-state false)
h-scrolling? (mf/use-state false) h-scrolling? (mf/use-state false)
@ -56,6 +56,11 @@
(cfh/get-immediate-children) (cfh/get-immediate-children)
(gsh/shapes->rect))) (gsh/shapes->rect)))
;; Padding for bottom palette
vbox (cond-> vbox
(some? bottom-padding)
(update :height - (/ bottom-padding zoom)))
inv-zoom (/ 1 zoom) inv-zoom (/ 1 zoom)
vbox-height (- (:height vbox) (* inv-zoom scroll-height)) vbox-height (- (:height vbox) (* inv-zoom scroll-height))
vbox-width (- (:width vbox) (* inv-zoom scroll-width)) vbox-width (- (:width vbox) (* inv-zoom scroll-width))
@ -65,6 +70,7 @@
(max 0) (max 0)
(* vbox-height) (* vbox-height)
(/ (:height base-objects-rect))) (/ (:height base-objects-rect)))
;; left space hidden because of the scroll ;; left space hidden because of the scroll
left-offset (-> (- vbox-x (:x base-objects-rect)) left-offset (-> (- vbox-x (:x base-objects-rect))
(max 0) (max 0)