Make the workspace canvas bigger and center the drawing layout.

src/uxbox/ui/workspace.cljs

@@ -63,23 +63,31 @@
        (when left-sidebar?
          (left-sidebar))
 
-       [:section.workspace-content
+       [:section.workspace-content {:class classes :on-scroll on-scroll}
         ;; Pages management lightbox
         ;; (pagesmngr)
 
-        ;; Canvas
+        ;; Rules
-        [:section.workspace-canvas {:class classes :on-scroll on-scroll}
+        (h-rule left-sidebar?)
-         ;; Rules
+        (v-rule left-sidebar?)
-         (h-rule left-sidebar?)
-         (v-rule left-sidebar?)
 
-         (when (and (:selected workspace)
+        (coordinates)
+
+        ;; Canvas
+        [:section.workspace-canvas
+         {:class classes
+          :ref "workspace-canvas"}
+         #_(when (and (:selected workspace)
                     (= (count (:selected workspace)) 1))
            (let [shape-id (first (:selected workspace))
                  shape (l/focus-atom (l/in [:shapes-by-id shape-id]) st/state)]
              (element-opts shape)))
-         (coordinates)
+
-         (viewport)]]
+         [:section.viewport-container
+          {:ref "viewport-container"
+           :width wb/viewport-width
+           :height wb/viewport-height}
+          (viewport)]]]
 
        (colorpalette)
 
@@ -94,6 +102,17 @@
     (rs/emit! (dw/initialize projectid pageid))
     own))
 
+(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")]
+    (set! (.-scrollLeft el1) 600)
+    (set! (.-scrollLeft el2) 600)
+    own))
+
 (defn- workspace-transfer-state
   [old-state state]
   (let [[projectid pageid] (:rum/props state)]
@@ -104,6 +123,7 @@
   (mx/component
    {:render workspace-render
     :will-mount workspace-will-mount
+    :did-mount workspace-did-mount
     :transfer-state workspace-transfer-state
     :name "workspace"
     :mixins [mx/static rum/reactive wshortcuts/mixin]}))

src/uxbox/ui/workspace/base.cljs

@@ -121,8 +121,8 @@
 ;; Constants
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(def viewport-height  2048)
+(def viewport-width 4069)
-(def viewport-width 2048)
+(def viewport-height 2048)
 
-(def document-start-x 50)
+(def document-start-x 630)
-(def document-start-y 50)
+(def document-start-y 30)

src/uxbox/ui/workspace/canvas.cljs

@@ -200,8 +200,8 @@
               (dom/stop-propagation event)
               (wb/emit-interaction! :nothing))]
       (html
-       [:svg.viewport {:width wb/viewport-height
+       [:svg.viewport {:width wb/viewport-width
-                       :height wb/viewport-width
+                       :height wb/viewport-height
                        :class (when drawing? "drawing")
                        :on-mouse-down on-mouse-down
                        :on-mouse-up on-mouse-up}