From f20ce6f057378a03eff95d4a6a09f2522624d2ab Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Sat, 9 Jul 2016 21:32:30 +0300
Subject: [PATCH] Add more stuff related to viewer app rendering.

---
 .../styles/view/layouts/main-layout.scss      |  4 +
 src/uxbox/view/ui/viewer/canvas.cljs          | 76 ++++++++++++++++---
 src/uxbox/view/ui/viewer/sitemap.cljs         | 36 ++++-----
 3 files changed, 83 insertions(+), 33 deletions(-)

diff --git a/resources/styles/view/layouts/main-layout.scss b/resources/styles/view/layouts/main-layout.scss
index 08c20d6ec..00677baca 100644
--- a/resources/styles/view/layouts/main-layout.scss
+++ b/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;
 }
diff --git a/src/uxbox/view/ui/viewer/canvas.cljs b/src/uxbox/view/ui/viewer/canvas.cljs
index 66994079e..21e625db6 100644
--- a/src/uxbox/view/ui/viewer/canvas.cljs
+++ b/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)))
diff --git a/src/uxbox/view/ui/viewer/sitemap.cljs b/src/uxbox/view/ui/viewer/sitemap.cljs
index 5acd50a79..89be21589 100644
--- a/src/uxbox/view/ui/viewer/sitemap.cljs
+++ b/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,28 +34,21 @@
 
 ;; --- 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
-       (for [[i page] (map-indexed vector pages)
-             :let [selected? (= i selected)]]
-         [:li {:class (when selected? "selected")
-               :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]}))
-
+    [:div.view-sitemap
+     [:span.sitemap-title project-name]
+     [:ul.sitemap-list
+      (for [[i page] (map-indexed vector pages)
+            :let [selected? (= i selected)]]
+        [:li {:class (when selected? "selected")
+              :on-click (partial on-click i)
+              :key (str i)}
+         [:div.page-icon i/page]
+         [:span (:name page)]])]]))