provide a simpler way declaring states tree; breaking release

README.md

@@ -19,7 +19,7 @@ Previews http://repo.quamolit.org/phlox/ .
 ```clojure
 (ns app.main
   (:require [phlox.core :refer [defcomp hslx render! create-list
-                                rect circle text container graphics]]))
+                                rect circle text container graphics >>]]))
 
 (defcomp comp-demo [data]
   (rect
@@ -187,9 +187,7 @@ Draw graphics(use `phlox.core/g` for validations):
 `phlox.comp.slider/comp-slider` provides a little slider bar of a number, changes on dragging:
 
 ```clojure
-(comp-slider
- (conj cursor :c)
- (:c states)
+(comp-slider (>> states :c)
  {:value (:c state),
   :unit 10,
   :min 1
@@ -204,9 +202,7 @@ Draw graphics(use `phlox.core/g` for validations):
 `phlox.comp.drag-point/comp-dragging-point` provides a point for dragging:
 
 ```clojure
-(comp-drag-point
- (conj cursor :p3)
- (:p3 states)
+(comp-drag-point (>> states :p3)
  {:position (:p3 state),
   :unit 0.4,
   :title "DEMO"

release.edn

@@ -1,4 +1,4 @@
-{:version "0.1.11-a2"
+{:version "0.2.0-a1"
  :group-id "quamolit"
  :artifact-id "phlox"
  :skip-tag true

src/phlox/app/comp/slider_demo.cljs

@@ -2,58 +2,53 @@
 (ns phlox.app.comp.slider-demo
   (:require [phlox.core
              :refer
-             [defcomp g hslx rect circle text container graphics create-list]]
+             [defcomp g hslx rect circle text container graphics create-list >>]]
             [phlox.comp.slider :refer [comp-slider]]))
 
 (defcomp
  comp-slider-demo
- (cursor states)
- (let [state (or (:data states) {:a 40, :b 20, :c 10, :d 10, :e 10, :f 10})]
+ (states)
+ (let [cursor (:cursor states)
+       state (or (:data states) {:a 40, :b 20, :c 10, :d 10, :e 10, :f 10})]
    (container
     {:position [300 100]}
     (comp-slider
-     (conj cursor :a)
-     (:a states)
+     (>> states :a)
      {:value (:a state),
       :unit 1,
       :position [20 0],
       :on-change (fn [value d!] (d! cursor (assoc state :a value)))})
     (comp-slider
-     (conj cursor :b)
-     (:b states)
+     (>> states :b)
      {:value (:b state),
       :title "Refine",
       :unit 0.1,
       :position [20 60],
       :on-change (fn [value d!] (d! cursor (assoc state :b value)))})
     (comp-slider
-     (conj cursor :c)
-     (:c states)
+     (>> states :c)
      {:value (:c state),
       :unit 10,
       :position [20 120],
       :fill (hslx 50 90 70),
       :color (hslx 200 90 30),
       :on-change (fn [value d!] (d! cursor (assoc state :c value)))})
     (comp-slider
-     (conj cursor :d)
-     (:d states)
+     (>> states :d)
      {:value (:d state),
       :position [20 180],
       :on-change (fn [value d!] (d! cursor (assoc state :d value))),
       :title "Round",
       :round? true})
     (comp-slider
-     (conj cursor :e)
-     (:e states)
+     (>> states :e)
      {:value (:e state),
       :position [20 240],
       :on-change (fn [value d!] (d! cursor (assoc state :e value))),
       :title "min 10",
       :min 10})
     (comp-slider
-     (conj cursor :f)
-     (:f states)
+     (>> states :f)
      {:value (:f state),
       :position [20 300],
       :on-change (fn [value d!] (d! cursor (assoc state :f value))),

src/phlox/app/container.cljs

@@ -2,7 +2,7 @@
 (ns phlox.app.container
   (:require [phlox.core
              :refer
-             [defcomp g hslx rect circle text container graphics create-list]]
+             [defcomp g hslx rect circle text container graphics create-list >>]]
             [phlox.app.comp.drafts :refer [comp-drafts]]
             [phlox.app.comp.keyboard :refer [comp-keyboard]]
             [phlox.comp.button :refer [comp-button]]
@@ -71,41 +71,38 @@
 
 (defcomp
  comp-points-demo
- (cursor states)
- (let [state (or (:data states) {:p1 [0 0], :p2 [0 0], :p3 [0 0], :p4 [0 0]})]
+ (states)
+ (let [cursor (:cursor states)
+       state (or (:data states) {:p1 [0 0], :p2 [0 0], :p3 [0 0], :p4 [0 0]})]
    (container
     {:position [300 200]}
     (comp-drag-point
-     (conj cursor :p1)
-     (:p1 states)
+     (>> states :p1)
      {:position (:p1 state),
       :on-change (fn [position d!] (d! cursor (assoc state :p1 position)))})
     (comp-drag-point
-     (conj cursor :p2)
-     (:p2 states)
+     (>> states :p2)
      {:position (:p2 state),
       :unit 2,
       :on-change (fn [position d!] (d! cursor (assoc state :p2 position)))})
     (comp-drag-point
-     (conj cursor :p3)
-     (:p3 states)
+     (>> states :p3)
      {:position (:p3 state),
       :unit 0.4,
       :radius 6,
       :fill (hslx 0 90 60),
       :color (hslx 0 0 50),
       :on-change (fn [position d!] (d! cursor (assoc state :p3 position)))})
     (comp-drag-point
-     (conj cursor :p4)
-     (:p4 states)
+     (>> states :p4)
      {:position (:p4 state),
       :title "base",
       :on-change (fn [position d!] (d! cursor (assoc state :p4 position)))}))))
 
 (defcomp
  comp-switch-demo
- (cursor states)
- (let [state (or (:data states) {:value false})]
+ (states)
+ (let [cursor (:cursor states), state (or (:data states) {:value false})]
    (container
     {:position [300 300]}
     (comp-switch
@@ -163,9 +160,9 @@
       :gradients (comp-gradients)
       :keyboard (comp-keyboard (:keyboard-on? store) (:counted store))
       :buttons (comp-buttons)
-      :slider (comp-slider-demo (conj cursor :slider) (:slider states))
-      :points (comp-points-demo (conj cursor :points) (:points states))
-      :switch (comp-switch-demo (conj cursor :switch) (:switch states))
+      :slider (comp-slider-demo (>> states :slider))
+      :points (comp-points-demo (>> states :points))
+      :switch (comp-switch-demo (>> states :switch))
       (text
        {:text "Unknown",
         :style {:fill (hslx 0 100 80), :font-size 12, :font-family "Helvetica"}})))))

src/phlox/app/schema.cljs

@@ -1,4 +1,4 @@
 
 (ns phlox.app.schema )
 
-(def store {:tab :drafts, :x 0, :keyboard-on? false, :counted 0, :states {}})
+(def store {:tab :drafts, :x 0, :keyboard-on? false, :counted 0, :states {}, :cursor []})

src/phlox/comp/drag_point.cljs

@@ -35,10 +35,11 @@
     :on-change (fn+)}
    {:check-keys? true}))
 
-(defn comp-drag-point [cursor states props]
-  (dev-check cursor lilac-cursor)
+(defn comp-drag-point [states props]
+  (dev-check (:cursor states) lilac-cursor)
   (dev-check props lilac-drag-point)
-  (let [state (or (:data states) {:dragging? false, :x0 [0 0]})
+  (let [cursor (:cursor states)
+        state (or (:data states) {:dragging? false, :x0 [0 0]})
         unit (or (:unit props) 1)
         radius (or (:radius props) 3)
         color (or (:color props) (hslx 0 0 100))

src/phlox/comp/slider.cljs

@@ -39,10 +39,11 @@
 
 (defcomp
  comp-slider
- (cursor states props)
- (dev-check cursor lilac-cursor)
+ (states props)
+ (dev-check (:cursor states) lilac-cursor)
  (dev-check props lilac-slider)
  (let [value (or (:value props) 1)
+       cursor (:cursor states)
        state (or (:data states) {:v0 value, :x0 0, :dragging? false})
        title (:title props)
        unit (or (:unit props) 0.1)

src/phlox/core.cljs

@@ -41,6 +41,10 @@
 
 (defonce *tree-element (atom nil))
 
+(defn >> [states k]
+  (let [parent-cursor (or (:cursor states) []), branch (get states k)]
+    (assoc branch :cursor (conj parent-cursor k))))
+
 (defn create-element [tag props children]
   {:name tag,
    :phlox-node :element,