 (ns svg.app
-  (:require [reagent.core :as r :refer [atom]]))
+  (: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 300 :y 100 :radius 10 :fill nil :clicks 0}))
+(defonce app-db (atom {:x 360 :y 360 :radius 50 :fill nil :clicks 0}))
 
 (defonce history (atom {:states []}))
 

            [:option {:value c :key c} c])]]))))

(defn svg-component [circle]
  [:svg {:width "720" :height "720"}
   circle])

(defn app-component []

            :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 [:small " [ " @v " ] "]]
   [:input {:type "range"
            :class "form-control"
            :name title
