mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 17:21:17 -05:00
More work on scroll/position of workspace fixing.
This commit is contained in:
parent
6235e9c86e
commit
a49e0c2f84
4 changed files with 37 additions and 17 deletions
|
@ -48,6 +48,14 @@
|
||||||
left (.-scrollLeft target)]
|
left (.-scrollLeft target)]
|
||||||
(rx/push! wb/scroll-b (gpt/point left top))))
|
(rx/push! wb/scroll-b (gpt/point left top))))
|
||||||
|
|
||||||
|
(defn- on-key-down
|
||||||
|
[event]
|
||||||
|
(js/console.log event))
|
||||||
|
|
||||||
|
(defn- on-key-up
|
||||||
|
[event]
|
||||||
|
(js/console.log event))
|
||||||
|
|
||||||
(defn- workspace-render
|
(defn- workspace-render
|
||||||
[own projectid]
|
[own projectid]
|
||||||
(let [{:keys [flags] :as workspace} (rum/react wb/workspace-l)
|
(let [{:keys [flags] :as workspace} (rum/react wb/workspace-l)
|
||||||
|
@ -63,7 +71,10 @@
|
||||||
(when left-sidebar?
|
(when left-sidebar?
|
||||||
(left-sidebar))
|
(left-sidebar))
|
||||||
|
|
||||||
[:section.workspace-content {:class classes :on-scroll on-scroll}
|
[:section.workspace-content {:class classes
|
||||||
|
:on-scroll on-scroll
|
||||||
|
:on-key-up on-key-up
|
||||||
|
:on-key-down on-key-down}
|
||||||
;; Pages management lightbox
|
;; Pages management lightbox
|
||||||
;; (pagesmngr)
|
;; (pagesmngr)
|
||||||
|
|
||||||
|
@ -109,8 +120,8 @@
|
||||||
;; that horrible hack.
|
;; that horrible hack.
|
||||||
(let [el1 (mx/get-ref-dom own "viewport-container")
|
(let [el1 (mx/get-ref-dom own "viewport-container")
|
||||||
el2 (mx/get-ref-dom own "workspace-canvas")]
|
el2 (mx/get-ref-dom own "workspace-canvas")]
|
||||||
(set! (.-scrollLeft el1) 600)
|
(set! (.-scrollLeft el1) wb/document-start-scroll-x)
|
||||||
(set! (.-scrollLeft el2) 600)
|
(set! (.-scrollLeft el2) wb/document-start-scroll-x)
|
||||||
own))
|
own))
|
||||||
|
|
||||||
(defn- workspace-transfer-state
|
(defn- workspace-transfer-state
|
||||||
|
|
|
@ -57,6 +57,7 @@
|
||||||
(defonce scroll-s
|
(defonce scroll-s
|
||||||
(as-> scroll-b $
|
(as-> scroll-b $
|
||||||
(rx/merge $ (rx/of (gpt/point)))
|
(rx/merge $ (rx/of (gpt/point)))
|
||||||
|
(rx/pr-log "scroll: " $)
|
||||||
(rx/dedupe $)))
|
(rx/dedupe $)))
|
||||||
|
|
||||||
(defonce scroll-a
|
(defonce scroll-a
|
||||||
|
@ -121,8 +122,10 @@
|
||||||
;; Constants
|
;; Constants
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
|
||||||
(def viewport-width 4069)
|
(def ^:const viewport-width 4069)
|
||||||
(def viewport-height 2048)
|
(def ^:const viewport-height 2048)
|
||||||
|
|
||||||
(def document-start-x 630)
|
(def ^:const document-start-x 600)
|
||||||
(def document-start-y 30)
|
(def ^:const document-start-y 30)
|
||||||
|
|
||||||
|
(def ^:const document-start-scroll-x 550)
|
||||||
|
|
|
@ -110,22 +110,28 @@
|
||||||
|
|
||||||
(defn- canvas-did-mount
|
(defn- canvas-did-mount
|
||||||
[own]
|
[own]
|
||||||
(letfn [(on-mousemove [event page offset-pt]
|
(letfn [(on-mousemove [event page]
|
||||||
(let [wpt (gpt/point (.-clientX event) (.-clientY event))
|
(let [wpt (gpt/point (.-clientX event) (.-clientY event))
|
||||||
cpt (gpt/subtract wpt offset-pt)
|
canvas (mx/get-ref-dom own (str "canvas" (:id page)))
|
||||||
|
brect (.getBoundingClientRect canvas)
|
||||||
|
brect (gpt/point (.-left brect) (.-top brect))
|
||||||
|
brect (gpt/add brect @wb/scroll-a)
|
||||||
|
|
||||||
|
cpt (gpt/subtract wpt brect)
|
||||||
event {:id (:id page)
|
event {:id (:id page)
|
||||||
:ctrl (kbd/ctrl? event)
|
:ctrl (kbd/ctrl? event)
|
||||||
:shift (kbd/shift? event)
|
:shift (kbd/shift? event)
|
||||||
:window-coords wpt
|
:window-coords wpt
|
||||||
:canvas-coords cpt}]
|
:canvas-coords cpt}]
|
||||||
(rx/push! wb/mouse-b event)))]
|
|
||||||
(let [[page] (:rum/props own)
|
(println "brect:" brect)
|
||||||
canvas (mx/get-ref-dom own (str "canvas" (:id page)))
|
|
||||||
brect (.getBoundingClientRect canvas)
|
|
||||||
brect (gpt/point (.-left brect) (.-top brect))
|
|
||||||
key (events/listen js/document EventType.MOUSEMOVE
|
|
||||||
#(on-mousemove % page brect))]
|
|
||||||
(swap! wb/bounding-rect assoc (:id page) brect)
|
(swap! wb/bounding-rect assoc (:id page) brect)
|
||||||
|
(rx/push! wb/mouse-b event)))]
|
||||||
|
|
||||||
|
;; TODO: update properly the bounding rect.
|
||||||
|
(let [[page] (:rum/props own)
|
||||||
|
key (events/listen js/document EventType.MOUSEMOVE
|
||||||
|
#(on-mousemove % page))]
|
||||||
(assoc own ::eventkey key))))
|
(assoc own ::eventkey key))))
|
||||||
|
|
||||||
(defn- canvas-will-unmount
|
(defn- canvas-will-unmount
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
;; Keyboard Shortcuts Handlers
|
;; Keyboard Shortcuts Handlers
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
|
||||||
(defonce ^:static +shortcuts+
|
(defonce ^:const +shortcuts+
|
||||||
{:ctrl+g #(rs/emit! (dw/toggle-flag :grid))
|
{:ctrl+g #(rs/emit! (dw/toggle-flag :grid))
|
||||||
:ctrl+shift+f #(rs/emit! (dw/toggle-flag :drawtools))
|
:ctrl+shift+f #(rs/emit! (dw/toggle-flag :drawtools))
|
||||||
:ctrl+shift+i #(rs/emit! (dw/toggle-flag :icons))
|
:ctrl+shift+i #(rs/emit! (dw/toggle-flag :icons))
|
||||||
|
@ -31,10 +31,10 @@
|
||||||
;; Keyboard Shortcuts Watcher
|
;; Keyboard Shortcuts Watcher
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
|
||||||
(defonce ^:static ^:private +bus+
|
(defonce ^:const ^:private +bus+
|
||||||
(rx/bus))
|
(rx/bus))
|
||||||
|
|
||||||
(defonce ^:static +stream+
|
(defonce ^:const +stream+
|
||||||
(rx/to-observable +bus+))
|
(rx/to-observable +bus+))
|
||||||
|
|
||||||
(defn- init-handler
|
(defn- init-handler
|
||||||
|
|
Loading…
Add table
Reference in a new issue