Add more stuff related to viewer app rendering.

resources/styles/view/layouts/main-layout.scss

@@ -215,4 +215,8 @@
   background-color: $secondary-ui-bg;
   width: 100%;
   overflow: auto;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

src/uxbox/view/ui/viewer/canvas.cljs

@@ -9,16 +9,70 @@
   (:require [sablono.core :refer-macros [html]]
             [lentes.core :as l]
             [rum.core :as rum]
-            [uxbox.util.mixins :as mx]
-            [uxbox.main.ui.icons :as i]))
+            [uxbox.util.mixins :as mx :include-macros true]
+            [uxbox.util.data :refer (parse-int)]
+            [uxbox.main.state :as st]
+            [uxbox.main.ui.shapes :as uus]
+            [uxbox.main.ui.icons :as i]
+            [uxbox.main.ui.shapes.rect :refer (rect-shape)]
+            [uxbox.main.ui.shapes.icon :refer (icon-shape)]
+            [uxbox.main.ui.shapes.text :refer (text-shape)]
+            [uxbox.main.ui.shapes.group :refer (group-shape)]
+            [uxbox.main.ui.shapes.line :refer (line-shape)]
+            [uxbox.main.ui.shapes.circle :refer (circle-shape)]))
 
-(defn canvas-render
-  [own]
-  (html
-   [:div.view-canvas "VIEW CONTENT"]))
+;; --- Refs
 
-(def canvas
-  (mx/component
-   {:render canvas-render
-    :name "canvas"
-    :mixins [mx/static]}))
+(defn- resolve-selected-page
+  [state]
+  (let [index (get-in state [:route :params :id])
+        index (parse-int index 0)]
+    (get-in state [:pages index])))
+
+(def page-ref
+  (-> (l/lens resolve-selected-page)
+      (l/derive st/state)))
+
+;; --- Background (Component)
+
+(mx/defc background
+  []
+  [:rect
+   {:x 0 :y 0
+    :width "100%"
+    :height "100%"
+    :fill "white"}])
+
+;; --- Canvas (Component)
+
+(declare shape)
+
+(mx/defc canvas
+  {:mixins [mx/static mx/reactive]}
+  []
+  (let [page (rum/react page-ref)
+        width (:width page)
+        height (:height page)]
+    [:div.view-canvas
+     [:svg.page-layout {:width width :height height}
+      (background)
+      (for [id (reverse (:shapes page))]
+        (-> (shape id)
+            (rum/with-key (str id))))]]))
+
+;; --- Shapes
+
+(mx/defc shape-component
+  [{:keys [type] :as shape}]
+  (case type
+    :group (group-shape shape shape-component)
+    :text (text-shape shape)
+    :line (line-shape shape)
+    :icon (icon-shape shape)
+    :rect (rect-shape shape)
+    :circle (circle-shape shape)))
+
+(mx/defc shape
+  [sid]
+  (let [item (get-in @st/state [:shapes-by-id sid])]
+    (shape-component item)))

src/uxbox/view/ui/viewer/sitemap.cljs

@@ -10,14 +10,13 @@
             [lentes.core :as l]
             [rum.core :as rum]
             [uxbox.util.i18n :refer (tr)]
-            [uxbox.util.mixins :as mx]
+            [uxbox.util.mixins :as mx :include-macros true]
             [uxbox.util.data :refer (parse-int)]
             [uxbox.util.rstore :as rs]
             [uxbox.main.state :as st]
             [uxbox.main.ui.icons :as i]
             [uxbox.view.data.viewer :as dv]))
 
-
 ;; --- Refs
 
 (def pages-ref
@@ -35,13 +34,13 @@
 
 ;; --- Component
 
-(defn- sitemap-render
-  [own]
+(mx/defc sitemap
+  {:mixins [mx/static mx/reactive]}
+  []
   (let [project-name (mx/react project-name-ref)
         pages (mx/react pages-ref)
         selected (mx/react selected-ref)
         on-click #(rs/emit! (dv/select-page %))]
-    (html
     [:div.view-sitemap
      [:span.sitemap-title project-name]
      [:ul.sitemap-list
@@ -51,12 +50,5 @@
               :on-click (partial on-click i)
               :key (str i)}
          [:div.page-icon i/page]
-          [:span (:name page)]])]])))
-
-(def sitemap
-  (mx/component
-   {:render sitemap-render
-    :name "sitemap"
-    :mixins [mx/static mx/reactive]}))
-
+         [:span (:name page)]])]]))