From a3a43d4b8afbc89829205cb2faadcc80e3683a55 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Thu, 1 Dec 2016 19:14:50 +0100
Subject: [PATCH] Properly reinitialize alignment index when page metadata is
 updated.

---
 frontend/src/uxbox/main/data/workspace.cljs   | 16 ++--
 .../ui/workspace/sidebar/options/page.cljs    | 96 +++++++++----------
 2 files changed, 57 insertions(+), 55 deletions(-)

diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs
index 16923cc46..4077d6c8a 100644
--- a/frontend/src/uxbox/main/data/workspace.cljs
+++ b/frontend/src/uxbox/main/data/workspace.cljs
@@ -37,7 +37,7 @@
 
 ;; --- Initialize Workspace
 
-(declare initialize-alignment-index)
+(declare initialize-alignment)
 
 (defrecord InitializeWorkspace [project page]
   ptk/UpdateEvent
@@ -64,15 +64,17 @@
       ;; Activate loaded if page is not fetched.
       (when-not page (reset! st/loader true))
 
+      (println "initialize")
+
       (rx/merge
        (if page
-         (rx/of (initialize-alignment-index page-id))
+         (rx/of (initialize-alignment page-id))
          (rx/merge
           (rx/of (udp/fetch-pages project))
           (->> (rx/filter udp/pages-fetched? s)
                (rx/take 1)
                (rx/do #(reset! st/loader false))
-               (rx/map #(initialize-alignment-index page-id)))))
+               (rx/map #(initialize-alignment page-id)))))
 
        ;; Initial history loading
        (rx/of
@@ -206,7 +208,7 @@
 
 ;; --- Initialize Alignment Index
 
-(defrecord InitializeAlignmentIndex [id]
+(defrecord InitializeAlignment [id]
   ptk/WatchEvent
   (watch [_ state s]
     (let [page (get-in state [:pages id])
@@ -222,9 +224,9 @@
        (when (:grid-alignment opts)
          (rx/of (activate-flag :grid-alignment)))))))
 
-(defn initialize-alignment-index
+(defn initialize-alignment
   [id]
-  (InitializeAlignmentIndex. id))
+  (InitializeAlignment. id))
 
 ;; --- Update Metadata
 
@@ -234,7 +236,7 @@
   ptk/WatchEvent
   (watch [_ state s]
     (rx/of (udp/update-metadata id metadata)
-           (initialize-alignment-index id))))
+           (initialize-alignment id))))
 
 (defn update-metadata
   [id metadata]
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs
index b5fc92ccb..161862d97 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs
@@ -11,6 +11,7 @@
             [potok.core :as ptk]
             [uxbox.store :as st]
             [uxbox.main.data.pages :as udp]
+            [uxbox.main.data.workspace :as udw]
             [uxbox.main.data.lightbox :as udl]
             [uxbox.main.ui.icons :as i]
             [uxbox.main.ui.workspace.base :refer [page-ref]]
@@ -93,52 +94,51 @@
                      (udp/update-metadata id)
                      (st/emit!))))
             (on-magnet-change []
-              (let [checked? (dom/checked? (mx/ref-node own "magnet"))]
-                (->> (assoc metadata :grid-alignment checked?)
-                     (udp/update-metadata id)
-                     (st/emit!))))
-          (show-color-picker [event]
-            (let [x (.-clientX event)
-                  y (.-clientY event)
-                  opts {:x x :y y
-                        :transparent? true
-                        :default "#cccccc"
-                        :attr :grid-color}]
-              (udl/open! :workspace/page-colorpicker opts)))]
-    [:div.element-set
-     [:div.element-set-title (:name menu)]
-     [:div.element-set-content
-      [:span "Size"]
-      [:div.row-flex
-       [:div.input-element.pixels
-        [:input.input-text
-         {:type "number"
-          :ref "x-axis"
-          :value (:grid-x-axis metadata 10)
-          :on-change on-x-change
-          :placeholder "x"}]]
-       [:div.input-element.pixels
-        [:input.input-text
-         {:type "number"
-          :ref "y-axis"
-          :value (:grid-y-axis metadata 10)
-          :on-change on-y-change
-          :placeholder "y"}]]]
-      [:span "Color"]
-      [:div.row-flex.color-dat
-       [:span.color-th
-        {:style {:background-color (:grid-color metadata "#cccccc")}
-         :on-click show-color-picker}]
-       [:div.color-info
-        [:span (:grid-color metadata "#cccccc")]]]
+              (let [checked? (dom/checked? (mx/ref-node own "magnet"))
+                    metadata (assoc metadata :grid-alignment checked?)]
+                (st/emit! (udw/update-metadata id metadata))))
+            (show-color-picker [event]
+              (let [x (.-clientX event)
+                    y (.-clientY event)
+                    opts {:x x :y y
+                          :transparent? true
+                          :default "#cccccc"
+                          :attr :grid-color}]
+                (udl/open! :workspace/page-colorpicker opts)))]
+      [:div.element-set
+       [:div.element-set-title (:name menu)]
+       [:div.element-set-content
+        [:span "Size"]
+        [:div.row-flex
+         [:div.input-element.pixels
+          [:input.input-text
+           {:type "number"
+            :ref "x-axis"
+            :value (:grid-x-axis metadata 10)
+            :on-change on-x-change
+            :placeholder "x"}]]
+         [:div.input-element.pixels
+          [:input.input-text
+           {:type "number"
+            :ref "y-axis"
+            :value (:grid-y-axis metadata 10)
+            :on-change on-y-change
+            :placeholder "y"}]]]
+        [:span "Color"]
+        [:div.row-flex.color-dat
+         [:span.color-th
+          {:style {:background-color (:grid-color metadata "#cccccc")}
+           :on-click show-color-picker}]
+         [:div.color-info
+          [:span (:grid-color metadata "#cccccc")]]]
 
-      [:span "Magnet option"]
-      [:div.row-flex
-       [:div.input-checkbox.check-primary
-        [:input
-         {:type "checkbox"
-          :ref "magnet"
-          :id "magnet"
-          :on-change on-magnet-change
-          :checked (when (:grid-alignment metadata) "checked")}]
-        [:label {:for "magnet"} "Activate magnet"]]]]])))
+        [:span "Magnet option"]
+        [:div.row-flex
+         [:div.input-checkbox.check-primary
+          [:input
+           {:type "checkbox"
+            :ref "magnet"
+            :id "magnet"
+            :on-change on-magnet-change
+            :checked (when (:grid-alignment metadata) "checked")}]
+          [:label {:for "magnet"} "Activate magnet"]]]]])))