add comp-slider; alpha release

README.md

@@ -11,7 +11,7 @@ Previews http://repo.quamolit.org/phlox/ .
 [![Clojars Project](https://img.shields.io/clojars/v/quamolit/phlox.svg)](https://clojars.org/quamolit/phlox)
 
 ```edn
-[quamolit/phlox "0.1.6"]
+[quamolit/phlox "0.1.7-a1"]
 ```
 
 `render!` to add canvas to `<body/>`:
@@ -178,15 +178,29 @@ Draw star:
 
 ### Components
 
-`comp-button` for clickable buttons:
+`comp-button` provides a clickable button:
 
 ```clojure
 (comp-button
    {:text "DEMO BUTTON",
     :position [100 0],
     :on {:click (fn [e d!] (js/console.log "clicked" e d!))}})
   (comp-button
-   {:text "Blue", :position [100 60], :color (hslx 0 80 70), :fill (hslx 200 80 40)})))
+   {:text "Blue", :position [100 60], :color (hslx 0 80 70), :fill (hslx 200 80 40)}))
+```
+
+`comp-sider` provides a little slider bar of a number, changes on dragging:
+
+```clojure
+(comp-slider
+ (conj cursor :c)
+ (:c states)
+ {: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)))})
 ```
 
 ### Workflow

pom.xml

@@ -3,7 +3,7 @@
   <modelVersion>4.0.0</modelVersion>
   <groupId>quamolit</groupId>
   <artifactId>phlox</artifactId>
-  <version>0.1.6</version>
+  <version>0.1.7-a1</version>
   <name>phlox</name>
 
   <url>https://github.com/Quamolit/phlox</url>

src/deps.cljs

@@ -0,0 +1,6 @@
+{
+ :npm-deps {
+  "shortid" "^2.2.15",
+  "pixi.js" "^5.2.1"
+ }
+}

src/phlox/app/container.cljs

@@ -5,7 +5,8 @@
              [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]]))
+            [phlox.comp.button :refer [comp-button]]
+            [phlox.comp.slider :refer [comp-slider]]))
 
 (defcomp
  comp-buttons
@@ -66,6 +67,36 @@
               :fill (hslx 200 80 80),
               :on {:mouseover (fn [e d!] (println "hover:" x y))}})]))))))
 
+(defcomp
+ comp-slider-demo
+ (cursor states)
+ (let [state (or (:data states) {:a 40, :b 20, :c 10})]
+   (container
+    {:position [300 100]}
+    (comp-slider
+     (conj cursor :a)
+     (:a states)
+     {: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)
+     {:value (:b state),
+      :unit 0.1,
+      :position [20 60],
+      :on-change (fn [value d!] (d! cursor (assoc state :b value)))})
+    (comp-slider
+     (conj cursor :c)
+     (:c states)
+     {: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)))}))))
+
 (defcomp
  comp-tab-entry
  (tab-value tab-title position selected?)
@@ -98,16 +129,18 @@
  comp-container
  (store)
  (comment println "Store" store (:tab store))
- (container
-  {}
-  (comp-tabs (:tab store))
-  (case (:tab store)
-    :drafts (comp-drafts (:x store))
-    :grids (comp-grids)
-    :curves (comp-curves)
-    :gradients (comp-gradients)
-    :keyboard (comp-keyboard (:keyboard-on? store) (:counted store))
-    :buttons (comp-buttons)
-    (text
-     {:text "Unknown",
-      :style {:fill (hslx 0 100 80), :font-size 12, :font-family "Helvetica"}}))))
+ (let [cursor [], states (:states store)]
+   (container
+    {}
+    (comp-tabs (:tab store))
+    (case (:tab store)
+      :drafts (comp-drafts (:x store))
+      :grids (comp-grids)
+      :curves (comp-curves)
+      :gradients (comp-gradients)
+      :keyboard (comp-keyboard (:keyboard-on? store) (:counted store))
+      :buttons (comp-buttons)
+      :slider (comp-slider-demo (conj cursor :slider) (:slider states))
+      (text
+       {:text "Unknown",
+        :style {:fill (hslx 0 100 80), :font-size 12, :font-family "Helvetica"}})))))

src/phlox/app/main.cljs

@@ -11,9 +11,12 @@
 (defonce *store (atom schema/store))
 
 (defn dispatch! [op op-data]
-  (when dev? (println "dispatch!" op op-data))
-  (let [op-id (shortid/generate), op-time (.now js/Date)]
-    (reset! *store (updater @*store op op-data op-id op-time))))
+  (if (vector? op)
+    (recur :states [op op-data])
+    (do
+     (when (and dev? (not= op :states)) (println "dispatch!" op op-data))
+     (let [op-id (shortid/generate), op-time (.now js/Date)]
+       (reset! *store (updater @*store op op-data op-id op-time))))))
 
 (defn main! []
   (comment js/console.log PIXI)

src/phlox/app/schema.cljs

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

src/phlox/app/updater.cljs

@@ -7,5 +7,8 @@
     :tab (assoc store :tab op-data)
     :toggle-keyboard (update store :keyboard-on? not)
     :counted (update store :counted inc)
+    :states
+      (let [[cursor new-state] op-data]
+        (assoc-in store (concat [:states] cursor [:data]) new-state))
     :hydrate-storage op-data
     (do (println "unknown op" op op-data) store)))

src/phlox/comp/slider.cljs

@@ -2,6 +2,62 @@
 (ns phlox.comp.slider
   (: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.check :refer [lilac-event-map dev-check]]
+            [lilac.core
+             :refer
+             [record+
+              number+
+              string+
+              optional+
+              tuple+
+              enum+
+              map+
+              fn+
+              any+
+              keyword+
+              boolean+
+              vector+
+              or+
+              is+]]))
 
-(defcomp comp-slider (props) (text {:text "DEMO", :style {:fill (hslx 0 0 100)}}))
+(defcomp
+ comp-slider
+ (cursor states props)
+ (dev-check cursor (vector+ (or (keyword+) (number+))))
+ (dev-check
+  props
+  (record+
+   {:value (number+),
+    :unit (number+),
+    :on-change (fn+),
+    :fill (number+),
+    :color (number+),
+    :position (tuple+ [(number+) (number+)])}
+   {:check-keys? true, :all-optional? true}))
+ (let [value (or (:value props) 1)
+       state (or (:data states) {:v0 value, :x0 0, :dragging? false})
+       unit (or (:unit props) 1)
+       fill (or (:fill props) (hslx 0 0 30))
+       color (or (:color props) (hslx 0 0 100))
+       on-change (:on-change props)]
+   (container
+    {:position (:position props)}
+    (rect
+     {:size [140 24],
+      :fill fill,
+      :on {:mousedown (fn [e d!]
+             (let [x1 (-> e .-data .-global .-x)]
+               (d! cursor {:dragging? true, :v0 value, :x0 x1}))),
+           :mousemove (fn [e d!]
+             (when (:dragging? state)
+               (let [x2 (-> e .-data .-global .-x)]
+                 (if (fn? on-change)
+                   (on-change (+ (:v0 state) (* unit (- x2 (:x0 state)))) d!)
+                   (js/console.log "[slider] missing :on-change listener"))))),
+           :mouseup (fn [e d!] (d! cursor {:v0 value, :x0 0, :dragging? false})),
+           :mouseupoutside (fn [e d!] (d! cursor {:v0 value, :x0 0, :dragging? false}))}}
+     (text
+      {:text (str "◀ " (if (number? value) (.toFixed value 4) "nil") " ▶ " unit),
+       :position [4 4],
+       :style {:fill color, :font-size 12, :font-family "Menlo, monospace"}})))))