             :r @r :style {:fill @fill}
             :onClick (fn [e] (swap! score inc))}])
 
+(defn make-constraint
+  "Creates a function that keeps a supplied number within the set bounds"
+  [minimum maximum]
+  (fn [num]
+    (let [local-max (if (<= num maximum) num maximum)]
+      (if (<= minimum local-max) local-max minimum))))
+
+(def draggable-circle-component
+  (with-meta circle-component
+    {:component-did-mount
+     (fn [this]
+       (let [node (r/dom-node this)
+             canvas (-> node .-parentNode)
+             x-constraint (->> canvas .-clientWidth (make-constraint 0))
+             y-constraint (->> canvas .-clientHeight (make-constraint 0))]
+         
+         (goog.events/listen
+          node
+          goog.events.EventType/MOUSEDOWN
+          (fn [e]
+            (let [drag (fx/Dragger. node)]
+              
+              ;; Drag event handler
+              (.addEventListener
+               drag
+               goog.fx.Dragger.EventType/DRAG
+               (fn [b]
+                 (let [dx (-> b .-dragger .-deltaX)
+                       dy (-> b .-dragger .-deltaY)
+                       x (x-constraint
+                          (+ dx (:x @app-db)))
+                       y (y-constraint
+                          (+ dy (:y @app-db)))]
+                   (swap! app-db assoc :x x :y y))))
+
+              ;; Drag end
+              (.addEventListener drag goog.fx.Dragger.EventType/END #(.dispose drag))
+
+              ;; Initialize
+              (.startDrag drag e))))))}))
+
+
 (defn range-component [v min max title]
   [:div {:class "form-group"}
-   [:label {:for title} title]
+   [:label {:for title} title [:small " [ " @v " ] "]]
    [:input {:type "range"
             :class "form-control"
             :name title

        radius (r/cursor app-db [:radius])
        fill (r/cursor app-db [:fill])
        clicks (r/cursor app-db [:clicks])
        circle [circle-component x y radius fill clicks]]
    (fn []
      [:div {:id "wrapper"}
       [:div {:id "controls" :class "col-md-3"}
        [history-component app-db]
        [click-count-component clicks]
        [range-component x 300 700 "CX"]
        [range-component y 100 500 "CY"]
        [range-component radius 10 100 "Size"]
        [select-component]]
       [:div {:class "col-md-9"}
        [svg-component circle]]])))

(ns svg.app
  (:require [reagent.core :as r :refer [atom]]
            [goog.string :as gstring]
            [goog.string.format]
            [goog.fx :as fx]
            [goog.fx.Dragger.EventType]
            [goog.events]
            [goog.events.EventType]
            [goog.math :as gmath]))

(defonce app-db (atom {:x 360 :y 360 :radius 50 :fill nil :clicks 0}))

(defonce history (atom {:states []}))

