         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]]
+        circle [draggable-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"]
+        [range-component x 0 720 "CX"]
+        [range-component y 0 720 "CY"]
+        [range-component radius 1 100 "Size"]
         [select-component]]
        [:div {:class "col-md-9"}
         [svg-component circle]]])))

            :r @r :style {:fill @fill}
            :onClick (fn [e] (swap! score inc))}])

(defn range-component [v min max title]
  [:div {:class "form-group"}
   [:label {:for title} title]
   [:input {:type "range"
            :class "form-control"
            :name title

(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 []}))

