From b122a23e08f5777b404d396e89ff78102032e414 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Sun, 3 Jan 2016 18:47:08 +0200
Subject: [PATCH] Initial renering of shape options toolbox (dummy).

---
 frontend/uxbox/ui/workspace.cljs         | 15 +++--
 frontend/uxbox/ui/workspace/options.cljs | 86 ++++++++++++++++++++++++
 2 files changed, 94 insertions(+), 7 deletions(-)
 create mode 100644 frontend/uxbox/ui/workspace/options.cljs

diff --git a/frontend/uxbox/ui/workspace.cljs b/frontend/uxbox/ui/workspace.cljs
index acb09bd6e..a987375fa 100644
--- a/frontend/uxbox/ui/workspace.cljs
+++ b/frontend/uxbox/ui/workspace.cljs
@@ -1,13 +1,15 @@
 (ns uxbox.ui.workspace
   (:require [sablono.core :as html :refer-macros [html]]
             [rum.core :as rum]
+            [cats.labs.lens :as l]
             [uxbox.router :as r]
             [uxbox.rstore :as rs]
-            [uxbox.state :as s]
+            [uxbox.state :as st]
             [uxbox.data.workspace :as dw]
             [uxbox.ui.util :as util]
             [uxbox.ui.mixins :as mx]
             [uxbox.ui.workspace.base :as wb]
+            [uxbox.ui.workspace.options :refer (element-opts)]
             [uxbox.ui.workspace.shortcuts :as wshortcuts]
             [uxbox.ui.workspace.lateralmenu :refer (lateralmenu)]
             [uxbox.ui.workspace.pagesmngr :refer (pagesmngr)]
@@ -62,12 +64,11 @@
         ;; Canvas
         [:section.workspace-canvas {:class (when no-toolbars? "no-tool-bar")
                                     :on-scroll (constantly nil)}
-         #_(when (:selected page)
-             (element-options conn
-                              page-cursor
-                              project-cursor
-                              zoom-cursor
-                              shapes-cursor))
+         (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)]]
 
diff --git a/frontend/uxbox/ui/workspace/options.cljs b/frontend/uxbox/ui/workspace/options.cljs
new file mode 100644
index 000000000..72ec61025
--- /dev/null
+++ b/frontend/uxbox/ui/workspace/options.cljs
@@ -0,0 +1,86 @@
+(ns uxbox.ui.workspace.options
+  (:require [sablono.core :as html :refer-macros [html]]
+            [rum.core :as rum]
+            [uxbox.shapes :as shapes]
+            [uxbox.ui.icons :as i]
+            [uxbox.ui.util :as util]
+            [uxbox.ui.mixins :as mx]
+            [uxbox.ui.workspace.base :as wb]))
+
+(def +menus-map+
+  {:builtin/icon [:menu/size-and-pos]
+   :builtin/icon-svg [:menu/size-and-pos]})
+
+(def +menus-by-id+
+  {:menu/size-and-pos
+   {:name "Size & position"
+    :icon i/infocard
+    :id (gensym "menu")}})
+
+(defn viewportcoord->clientcoord
+  [pageid viewport-x viewport-y]
+  (let [[offset-x offset-y] (get @wb/bounding-rect pageid)
+        new-x (+ viewport-x offset-x)
+        new-y (+ viewport-y offset-y)]
+    [new-x new-y]))
+
+(defn get-position
+  [{:keys [x y width page]}]
+  (let [vx (+ x width 50)
+        vy (- y 50)]
+    (viewportcoord->clientcoord page vx vy)))
+
+(defmulti -render-menu
+  (fn [type shape] type))
+
+(defmethod -render-menu :size-and-position
+  [_ shape]
+  (html [:p "hello world"]))
+
+(defn element-opts-render
+  [own shape]
+  (let [local (:rum/local own)
+        shape (rum/react shape)
+        [popup-x popup-y] (get-position shape)
+        zoom 1]
+    (html
+     [:div#element-options.element-options
+      {:style {:left (* popup-x zoom) :top (* popup-y zoom)}}
+      [:ul.element-icons
+       (for [menu-id (get +menus-map+ (:type shape))
+             :let [menu (get +menus-by-id+ menu-id)]]
+         [:li#e-info
+          {:on-click (constantly nil)
+           :key (str "menu-" (:id menu))
+           :class nil #_"selected"}
+          (:icon menu)])]
+      (for [menu-id (get +menus-map+ (:type shape))
+            :let [menu (get +menus-by-id+ menu-id)]]
+        [:div#element-basics.element-set
+         {:key (str (:id menu))
+          :class nil }
+         [:div.element-set-title (:name menu)]
+         [:div.element-set-content
+
+          ;; SLIDEBAR FOR ROTATION AND OPACITY
+          [:span "Rotation"]
+          [:div.row-flex
+           [:input.slidebar {:type "range"}]]
+
+          ;; RECENT COLORS
+          [:span "Recent colors"]
+          [:div.row-flex
+           [:span.color-th]
+           [:span.color-th {:style {:background "#c5cb7f"}}]
+           [:span.color-th {:style {:background "#6cb533"}}]
+           [:span.color-th {:style {:background "#67c6b5"}}]
+           [:span.color-th {:style {:background "#a178e3"}}]
+           [:span.color-th.palette-th i/palette]]]])])))
+
+(def ^:static element-opts
+  (util/component
+   {:render element-opts-render
+    :name "element-opts"
+    :mixins [rum/reactive (mx/local {})]}))
+
+