Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-27 00:49:28 -05:00
Code Issues Activity

✨ Fix viewport position when collapsing left sidebar

Browse source
This commit is contained in:
Andrés Moya 2020-06-22 15:03:19 +02:00 • committed by Andrey Antukh
parent 06c301c7d6
commit 84bf0e26b2
4 changed files with 33 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/styles/main/partials/sidebar.scss
View file

@ -6,6 +6,7 @@
// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com> // Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
$width-settings-bar: 15rem; $width-settings-bar: 15rem;
// This width is also used in update-viewport-size at frontend/src/uxbox/main/data/workspace.cljs
.settings-bar { .settings-bar {
background-color: $color-gray-50; background-color: $color-gray-50;

14
frontend/src/uxbox/main/data/workspace.cljs
View file

@ -221,7 +221,7 @@
(cond (cond
(or (not (mth/finite? (:width srect))) (or (not (mth/finite? (:width srect)))
(not (mth/finite? (:height srect)))) (not (mth/finite? (:height srect))))
(assoc local :vbox (assoc size :x 0 :y 0)) (assoc local :vbox (assoc size :x 0 :y 0 :left-offset 0))
(or (> (:width srect) width) (or (> (:width srect) width)
(> (:height srect) height)) (> (:height srect) height))
@ -267,15 +267,17 @@
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(update state :workspace-local (update state :workspace-local
(fn [{:keys [vbox vport] :as local}] (fn [{:keys [vbox vport left-sidebar? zoom] :as local}]
(let [wprop (/ (:width vport) width) (let [wprop (/ (:width vport) width)
hprop (/ (:height vport) height)] hprop (/ (:height vport) height)
(-> local left-offset (if left-sidebar? 0 (/ (* -1 15 16) zoom))]
(assoc :vport size) (-> local ;; This matches $width-settings-bar
(assoc :vport size) ;; in frontend/resources/styles/main/partials/sidebar.scss
(update :vbox (fn [vbox] (update :vbox (fn [vbox]
(-> vbox (-> vbox
(update :width #(/ % wprop)) (update :width #(/ % wprop))
(update :height #(/ % hprop)))))))))))) (update :height #(/ % hprop))
(assoc :left-offset left-offset)))))))))))
;; --- ;; ---

2
frontend/src/uxbox/main/ui/workspace/rules.cljs
View file

@ -91,7 +91,7 @@
(draw-rule! dctx {:zoom zoom (draw-rule! dctx {:zoom zoom
:type :horizontal :type :horizontal
:size width :size width
:start (:x vbox)})))) :start (+ (:x vbox) (:left-offset vbox))}))))
[:canvas.horizontal-rule [:canvas.horizontal-rule
{:ref canvas {:ref canvas

50
frontend/src/uxbox/main/ui/workspace/viewport.cljs
View file

@ -381,41 +381,37 @@
prnt (dom/get-parent node)] prnt (dom/get-parent node)]
(st/emit! (dw/update-viewport-size (dom/get-client-size prnt))))) (st/emit! (dw/update-viewport-size (dom/get-client-size prnt)))))
on-mount
(fn []
(let [node (mf/ref-val viewport-ref)
prnt (dom/get-parent node)
key1 (events/listen js/document EventType.KEYDOWN on-key-down)
key2 (events/listen js/document EventType.KEYUP on-key-up)
key3 (events/listen node EventType.MOUSEMOVE on-mouse-move)
;; bind with passive=false to allow the event to be cancelled
;; https://stackoverflow.com/a/57582286/3219895
key4 (events/listen js/window EventType.WHEEL on-mouse-wheel #js {:passive false})
key5 (events/listen js/window EventType.RESIZE on-resize)]
(st/emit! (dw/initialize-viewport (dom/get-client-size prnt)))
(fn []
(events/unlistenByKey key1)
(events/unlistenByKey key2)
(events/unlistenByKey key3)
(events/unlistenByKey key4)
(events/unlistenByKey key5)
)))
options (mf/deref refs/workspace-page-options)] options (mf/deref refs/workspace-page-options)]
(mf/use-effect on-mount) (mf/use-layout-effect
(mf/use-effect (mf/deps layout) on-resize) (fn []
(let [node (mf/ref-val viewport-ref)
prnt (dom/get-parent node)
key1 (events/listen js/document EventType.KEYDOWN on-key-down)
key2 (events/listen js/document EventType.KEYUP on-key-up)
key3 (events/listen node EventType.MOUSEMOVE on-mouse-move)
;; bind with passive=false to allow the event to be cancelled
;; https://stackoverflow.com/a/57582286/3219895
key4 (events/listen js/window EventType.WHEEL on-mouse-wheel #js {:passive false})
key5 (events/listen js/window EventType.RESIZE on-resize)]
(st/emit! (dw/initialize-viewport (dom/get-client-size prnt)))
(fn []
(events/unlistenByKey key1)
(events/unlistenByKey key2)
(events/unlistenByKey key3)
(events/unlistenByKey key4)
(events/unlistenByKey key5)))))
(mf/use-layout-effect (mf/deps layout) on-resize)
[:svg.viewport [:svg.viewport
{:preserveAspectRatio "xMidYMid meet" {:preserveAspectRatio "xMidYMid meet"
:width (:width vport 0) :width (:width vport 0)
:height (:height vport 0) :height (:height vport 0)
:view-box (str/join " " [(:x vbox 0) :view-box (str/join " " [(+ (:x vbox 0) (:left-offset vbox 0))
(:y vbox 0) (:y vbox 0)
(:width vbox 0 ) (:width vbox 0)
(:height vbox 0)]) (:height vbox 0)])
:ref viewport-ref :ref viewport-ref
:class (when drawing-tool "drawing") :class (when drawing-tool "drawing")