FormGen.cljs

;; Database
(r/atom db {:dragging? false 
            :pos-x 0 
            :pod-y 0 
            :select-area-templates
             [[:input.text-template 
               {:draggable true
                :index 0
                :drag-start handle-drag-start
                :drag-end handle-drag-end}]] 
            :elements []})

(def form-types ["text" "textarea" "select" "radio"])

(def drag-n-drop-area {:x 500 :y 500})

;; 10px gridlines that the elements snap to so they'll line up and shit
(def grid-lines 10)

(defn drag-area 
  "Area to drag element over, use CSS to set visual area"
  [reset]
  ^{:key reset}
  [:div.drag-area
   [(:elements db)])

(defn find-x-pos []) ;; look up element prop to find position of drag area + mouse pos

(defn find-y-pos []) ;; look up element prop to find position of drag area + moust pos

(defn handle-drag-end
  "figure out position, add to elements list, call fn to render the drag and drop area"
  [e]
  (let [x (find-x-pos)
        y (find-y-pos)
        element (nth (:index e) db)
        positioned-element (into element {:x x :y y :style {:top y :left x})]
    (swap! (-> e .target) db conj :elements)
    (drag-area :reset)                                      
    (select-area :reset))

(defn select-area
  "Pick out an element you want to use here"
  [reset]
  ^{:key reset}
  [:div.element-templates
   (:select-area-templates db)])