Move viewport scroll pressing space.

src/uxbox/ui/keyboard.cljs

@@ -15,3 +15,4 @@
 
 (def esc? (is-keycode? 27))
 (def enter? (is-keycode? 13))
+(def space? (is-keycode? 32))

src/uxbox/ui/workspace.cljs

@@ -113,28 +113,56 @@
     (rs/emit! (dw/initialize projectid pageid))
     own))
 
+(defn- workspace-handle-scroll
+  [el1 el2]
+  (letfn [(on-value [pt1 pt2]
+            (let [{:keys [x y]} (gpt/subtract pt1 pt2)
+                  cx (.-scrollLeft el2)
+                  cy (.-scrollTop el2)]
+              (set! (.-scrollLeft el2) (- cx x))
+              (set! (.-scrollTop el2) (- cy y))))]
+    (let [stoper (->> wb/interactions-b
+                      (rx/filter #(not= % :scroll/viewport))
+                      (rx/take 1))
+          initial @wb/mouse-viewport-a]
+      (as-> wb/mouse-viewport-s $
+        (rx/take-until stoper $)
+        (rx/subscribe $ #(on-value % initial))))))
+
 (defn- workspace-did-mount
   [own]
   ;; FIXME: this is a hack. I don't know why I need setup
   ;; scroll to both elements, but it does not works without
   ;; that horrible hack.
   (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")
+        sub (as-> wb/interactions-b $
+              (rx/dedupe $)
+              (rx/filter #(= :scroll/viewport %) $)
+              (rx/on-value $ #(workspace-handle-scroll el1 el2)))]
     (set! (.-scrollLeft el1) wb/canvas-start-scroll-x)
     (set! (.-scrollLeft el2) wb/canvas-start-scroll-x)
-    own))
+    (assoc own ::sub sub)))
 
 (defn- workspace-transfer-state
   [old-state state]
-  (let [[projectid pageid] (:rum/props state)]
+  (let [[projectid pageid] (:rum/props state)
+        sub (::sub old-state)]
    (rs/emit! (dw/initialize projectid pageid))
-   state))
+   (assoc state ::sub sub)))
+
+(defn- workspace-will-unmount
+  [own]
+  (let [unsub (::sub own)]
+    (unsub)
+    (dissoc own ::sub)))
 
 (def ^:static workspace
   (mx/component
    {:render workspace-render
     :will-mount workspace-will-mount
     :did-mount workspace-did-mount
+    :will-unmount workspace-will-unmount
     :transfer-state workspace-transfer-state
     :name "workspace"
     :mixins [mx/static rum/reactive wshortcuts/mixin]}))

src/uxbox/ui/workspace/canvas.cljs

@@ -108,42 +108,6 @@
 ;; Canvas
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-;; (defn- canvas-did-mount
-;;   [own]
-;;   (letfn [(translate-point [pt page]
-;;             (let [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)]
-;;               (gpt/subtract pt brect)))
-;;           (on-mousemove [event page]
-;;             (let [wpt (gpt/point (.-clientX event)
-;;                                  (.-clientY event))
-;;                   cpt (translate-point wpt page)
-;;                   event {:id (:id page)
-;;                          :ctrl (kbd/ctrl? event)
-;;                          :shift (kbd/shift? event)
-;;                          :window-coords wpt
-;;                          :canvas-coords cpt}]
-;;               (println "on-mousemove" cpt)
-;;               (rx/push! wb/mouse-b event)))]
-;;     (let [[page] (:rum/props own)
-;;           key (events/listen js/document EventType.MOUSEMOVE
-;;                              #(on-mousemove % page))]
-;;       (assoc own ::eventkey key))))
-
-;; (defn- canvas-will-unmount
-;;   [own]
-;;   (let [key (::eventkey own)
-;;         [page] (:rum/props own)]
-;;     (events/unlistenByKey key)
-;;     (dissoc own ::eventkey)))
-
-;; (defn- canvas-transfer-state
-;;   [old-own own]
-;;   (let [key (::eventkey old-own)]
-;;     (assoc own ::eventkey key)))
-
 (defn- canvas-render
   [own {:keys [width height id] :as page}]
   (let [workspace (rum/react wb/workspace-l)
@@ -175,9 +139,6 @@
 (def canvas
   (mx/component
    {:render canvas-render
-    ;; :did-mount canvas-did-mount
-    ;; :will-unmount canvas-will-unmount
-    ;; :transfer-state canvas-transfer-state
     :name "canvas"
     :mixins [mx/static rum/reactive]}))
 
@@ -229,6 +190,14 @@
                   brect (gpt/point (.-left brect) (.-top brect))]
               (gpt/subtract pt brect)))
 
+          (on-key-down [event]
+            (when (kbd/space? event)
+              (wb/emit-interaction! :scroll/viewport)))
+
+          (on-key-up [event]
+            (when (kbd/space? event)
+              (wb/emit-interaction! :nothing)))
+
           (on-mousemove [event page]
             (let [wpt (gpt/point (.-clientX event)
                                  (.-clientY event))
@@ -241,22 +210,26 @@
                          :canvas-coords cvpt}]
               (rx/push! wb/mouse-b event)))]
     (let [[page] (:rum/props own)
-          key (events/listen js/document EventType.MOUSEMOVE
-                             #(on-mousemove % page))]
-      (assoc own ::eventkey key))))
+          key1 (events/listen js/document EventType.MOUSEMOVE
+                              #(on-mousemove % page))
+          key2 (events/listen js/document EventType.KEYDOWN on-key-down)
+          key3 (events/listen js/document EventType.KEYUP on-key-up)]
+      (assoc own ::key1 key1 ::key2 key2 ::key3 key3))))
 
 (defn- viewport-will-unmount
   [own]
-  (let [key (::eventkey own)
-        [page] (:rum/props own)]
-    (events/unlistenByKey key)
-    (dissoc own ::eventkey)))
+  (let [key1 (::key1 own)
+        key2 (::key2 own)
+        key3 (::key3 own)]
+    (events/unlistenByKey key1)
+    (events/unlistenByKey key2)
+    (events/unlistenByKey key3)
+    (dissoc own ::key1 ::key2 ::key3)))
 
 (defn- viewport-transfer-state
   [old-own own]
-  (let [key (::eventkey old-own)]
-    (assoc own ::eventkey key)))
-
+  (let [data (select-keys old-own [::key1 ::key2 ::key3])]
+    (merge own data)))
 
 (def viewport
   (mx/component