Fix element options scroll bug.

frontend/uxbox/ui/workspace.cljs

@@ -1,6 +1,7 @@
 (ns uxbox.ui.workspace
   (:require [sablono.core :as html :refer-macros [html]]
             [rum.core :as rum]
+            [beicon.core :as rx]
             [cats.labs.lens :as l]
             [uxbox.router :as r]
             [uxbox.rstore :as rs]
@@ -42,6 +43,13 @@
 ;; Workspace
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
+(defn- on-scroll
+  [event]
+  (let [target (.-target event)
+        top (.-scrollTop target)
+        left (.-scrollLeft target)]
+    (rx/push! wb/scroll-b {:top top :left left})))
+
 (defn- workspace-render
   [own projectid]
   (let [workspace (rum/react wb/workspace-state)
@@ -63,7 +71,7 @@
 
         ;; Canvas
         [:section.workspace-canvas {:class (when no-toolbars? "no-tool-bar")
-                                    :on-scroll (constantly nil)}
+                                    :on-scroll on-scroll}
          (when (and (:selected workspace)
                     (= (count (:selected workspace)) 1))
            (let [shape-id (first (:selected workspace))

frontend/uxbox/ui/workspace/base.cljs

@@ -35,21 +35,26 @@
 ;; Scroll Stream
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(defonce ^:private scroll-bus (rx/bus))
-(defonce scroll-s (rx/dedupe scroll-bus))
+(defonce ^:private scroll-b (rx/bus))
 
-(defonce top-scroll-s
-  (->> scroll-bus
+(defonce scroll-s
+  (as-> scroll-b $
+    (rx/merge $ (rx/of {:top 0 :left 0}))
+    (rx/dedupe $)))
+
+(defonce scroll-top-s
+  (->> scroll-s
        (rx/map :top)
+       (rx/tap #(println "scroll:" %))
        (rx/dedupe)))
 
-(defonce left-scroll-s
-  (->> scroll-bus
+(defonce scroll-left-s
+  (->> scroll-s
        (rx/map :left)
        (rx/dedupe)))
 
-(defonce top-scroll (rx/to-atom top-scroll-s))
-(defonce left-scroll (rx/to-atom left-scroll-s))
+(defonce scroll-top (rx/to-atom scroll-top-s))
+(defonce scroll-left (rx/to-atom scroll-left-s))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Mouse Position Stream

frontend/uxbox/ui/workspace/options.cljs

@@ -111,12 +111,13 @@
   (let [local (:rum/local own)
         shape (rum/react shape)
         [popup-x popup-y] (get-position shape)
+        scroll (or (rum/react wb/scroll-top) 0)
         zoom 1
         menus (get +menus-map+ (:type shape))
         active-menu (:menu @local (first menus))]
     (html
      [:div#element-options.element-options
-      {:style {:left (* popup-x zoom) :top (* popup-y zoom)}}
+      {:style {:left (* popup-x zoom) :top (- (* popup-y zoom) scroll)}}
       [:ul.element-icons
        (for [menu-id (get +menus-map+ (:type shape))
              :let [menu (get +menus-by-id+ menu-id)

frontend/uxbox/ui/workspace/workarea.cljs

@@ -11,8 +11,6 @@
             [uxbox.ui.workspace.grid :refer (grid)]
             [uxbox.ui.workspace.base :as wb]))
 
-;; TODO: implement as streams
-
 (defn- on-click
   [event wstate]
   (let [mousepos @wb/mouse-position