Fix rules/scroll related issues.

resources/public/styles/partials/workspace-canvas.scss

@@ -1,48 +1,26 @@
 .workspace-content {
   background-color: $canvas-bg;
+  box-sizing: border-box;
   display: flex;
   height: 100%;
   width: 100%;
+  padding: 0 230px 0 230px;
   position: relative;
-  margin: 0 230px 0 230px;
 
   &.no-tool-bar-right {
-    margin-right: 0;
+    padding-right: 0;
   }
 
   &.no-tool-bar-left {
-    margin-left: 0;
+    padding-left: 0;
   }
 
   .workspace-canvas {
     box-sizing: border-box;
-    height: calc(100vh - 70px);
-
+    height: calc(100vh - 50px);
     overflow: scroll;
-    width: 100%;
-
     transition: none;
-
-    margin-top: 20px;
-    margin-left: 20px;
-    margin-right: 460px;
-
-    &.no-tool-bar-right.no-tool-bar-left{
-      margin-right: 0px;
-    }
-
-    &.no-tool-bar-left {
-      margin-right: 230px;
-    }
-
-    &.no-tool-bar-right {
-      margin-right: 230px;
-    }
-
-    /* .viewport-container { */
-    /*   height: 4069px; */
-    /*   width: 4069px; */
-    /* } */
+    width: 100%;
 
     .viewport {
 
@@ -85,8 +63,8 @@
 
   .vertical-rule {
     transition: none;
-    position: absolute;
     pointer-events: none;
     left: 0px;
   }
+
 }

src/uxbox/core.cljs

@@ -34,4 +34,4 @@
   ;; During development, you can comment the
   ;; following call for disable temprary the
   ;; local persistence.
-  #_(main))
+  (main))

src/uxbox/ui/workspace.cljs

@@ -68,8 +68,6 @@
      [:div
       (header)
       [:main.main-content
-       (when left-sidebar?
-         (left-sidebar))
 
        [:section.workspace-content {:class classes
                                     :on-scroll on-scroll
@@ -85,18 +83,17 @@
         (coordinates)
 
         ;; Canvas
-        [:section.workspace-canvas
-         {:class classes
-          :ref "workspace-canvas"}
-         [:section.viewport-container
-          {:ref "viewport-container"
-           :width wb/viewport-width
-           :height wb/viewport-height}
-          (viewport)]]]
+        [:section.workspace-canvas {:class classes
+                                    :ref "workspace-canvas"}
+         (viewport)]]
 
        (colorpalette)
 
        ;; Aside
+
+       (when left-sidebar?
+         (left-sidebar))
+
        (when right-sidebar?
          (right-sidebar))
        ]])))
@@ -107,43 +104,33 @@
     (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")
+  (letfn [(handle-scroll-interaction []
+            (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 $ #(handle-scroll % initial)))))
+
+          (handle-scroll [pt initial]
+            (let [{:keys [x y]} (gpt/subtract pt initial)
+                  el (mx/get-ref-dom own "workspace-canvas")
+                  cx (.-scrollLeft el)
+                  cy (.-scrollTop el)]
+              (set! (.-scrollLeft el) (- cx x))
+              (set! (.-scrollTop el) (- cy y))))]
+
+  (let [el (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)
-    (assoc own ::sub sub)))
-
-(defn- workspace-transfer-state
-  [old-state state]
-  (let [[projectid pageid] (:rum/props state)
-        sub (::sub old-state)]
-   (rs/emit! (dw/initialize projectid pageid))
-   (assoc state ::sub sub)))
+              (rx/on-value $ handle-scroll-interaction))]
+    (set! (.-scrollLeft el) wb/canvas-start-scroll-x)
+    (set! (.-scrollTop el) wb/canvas-start-scroll-y)
+    (assoc own ::sub sub))))
 
 (defn- workspace-will-unmount
   [own]
@@ -151,12 +138,17 @@
     (unsub)
     (dissoc own ::sub)))
 
+(defn- workspace-transfer-state
+  [old-state state]
+  (let [[projectid pageid] (:rum/props state)]
+    (rs/emit! (dw/initialize projectid pageid))
+    state))
+
 (def ^:static workspace
   (mx/component
    {:render workspace-render
+    :transfer-state workspace-transfer-state
     :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/base.cljs

@@ -57,7 +57,6 @@
 (defonce scroll-s
   (as-> scroll-b $
     (rx/merge $ (rx/of (gpt/point)))
-    (rx/pr-log "scroll: " $)
     (rx/dedupe $)))
 
 (defonce scroll-a
@@ -126,6 +125,7 @@
 (def ^:const viewport-height 2048)
 
 (def ^:const canvas-start-x 600)
-(def ^:const canvas-start-y 30)
+(def ^:const canvas-start-y 600)
 
 (def ^:const canvas-start-scroll-x 550)
+(def ^:const canvas-start-scroll-y 550)

src/uxbox/ui/workspace/canvas.cljs

@@ -197,7 +197,7 @@
             (when (kbd/space? event)
               (wb/emit-interaction! :nothing)))
 
-          (on-mousemove [event page]
+          (on-mousemove [event]
             (let [wpt (gpt/point (.-clientX event)
                                  (.-clientY event))
                   vppt (translate-point-to-viewport wpt)
@@ -208,9 +208,8 @@
                          :viewport-coords vppt
                          :canvas-coords cvpt}]
               (rx/push! wb/mouse-b event)))]
-    (let [[page] (:rum/props own)
-          key1 (events/listen js/document EventType.MOUSEMOVE
-                              #(on-mousemove % page))
+
+    (let [key1 (events/listen js/document EventType.MOUSEMOVE on-mousemove)
           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))))

src/uxbox/ui/workspace/header.cljs

@@ -31,7 +31,7 @@
       [:div.main-icon
        (nav/link (r/route-for :dashboard/projects) i/logo-icon)]
       [:div.project-tree-btn
-       {:on-click (partial toggle :pagesmngr)}
+       {:on-click (partial toggle :sitemap)}
        i/project-tree
        [:span (:name page)]]
       [:div.workspace-options
@@ -50,11 +50,6 @@
          {:alt "Elements (Ctrl + Shift + L)"
           :class (when (contains? flags :layers) "selected")
           :on-click (partial toggle :layers)}
-         i/layers]
-        [:li.tooltip.tooltip-bottom
-         {:alt "Sitemap (Ctrl + Shift + S)"
-          :class (when (contains? flags :sitemap) "selected")
-          :on-click (partial toggle :sitemap)}
          i/layers]]
        [:ul.options-btn
         [:li.tooltip.tooltip-bottom {:alt "Undo (Ctrl + Z)"}