diff --git a/resources/public/styles/partials/workspace-canvas.scss b/resources/public/styles/partials/workspace-canvas.scss index 45f9ecdfd..28410e0f2 100644 --- a/resources/public/styles/partials/workspace-canvas.scss +++ b/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; } + } diff --git a/src/uxbox/core.cljs b/src/uxbox/core.cljs index fec3ce0ca..8f73574e6 100644 --- a/src/uxbox/core.cljs +++ b/src/uxbox/core.cljs @@ -34,4 +34,4 @@ ;; During development, you can comment the ;; following call for disable temprary the ;; local persistence. - #_(main)) + (main)) diff --git a/src/uxbox/ui/workspace.cljs b/src/uxbox/ui/workspace.cljs index 76fdd359b..a5c1a9bb4 100644 --- a/src/uxbox/ui/workspace.cljs +++ b/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]})) diff --git a/src/uxbox/ui/workspace/base.cljs b/src/uxbox/ui/workspace/base.cljs index 3634b112e..5506469e9 100644 --- a/src/uxbox/ui/workspace/base.cljs +++ b/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) diff --git a/src/uxbox/ui/workspace/canvas.cljs b/src/uxbox/ui/workspace/canvas.cljs index b17ae409b..e215dbbfd 100644 --- a/src/uxbox/ui/workspace/canvas.cljs +++ b/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)))) diff --git a/src/uxbox/ui/workspace/header.cljs b/src/uxbox/ui/workspace/header.cljs index 03caf7bc4..28e650217 100644 --- a/src/uxbox/ui/workspace/header.cljs +++ b/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)"}