moving to pointerdown event for pad support; alpha release 0.3.x

Phlox-GL · May 1, 2020 · 5befd71 · 5befd71
1 parent 8e1142b
commit 5befd71
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 69 deletions.
diff --git a/README.md b/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.2.1-a5"]
+[quamolit/phlox "0.3.0-a1"]
 ```
 
 `render!` to add canvas to `<body/>`:
@@ -44,6 +44,8 @@ Previews http://repo.quamolit.org/phlox/ .
   (render! (comp-container @*store) dispatch! {:swap? true}))
 ```
 
+Notice that Phlox uses `:pointerdown` instead of `:click` for touch screen support.
+
 ### Global keyboard events
 
 Phlox supports a naive global event system for listening to keyboard events from elements:
@@ -182,15 +184,15 @@ Notice that Pixi.js takes colors in hex numbers. `phlox.core/hslx` is added for
  {:text "DEMO BUTTON",
   :position [100 0],
   :align-right? false
-  :on {:click (fn [e d!] (js/console.log "clicked" e d!))}})
+  :on {:pointerdown (fn [e d!] (js/console.log "pointerdown event" e d!))}})
 
 (comp-button
  {:text "Blue", :position [100 60], :color (hslx 0 80 70), :fill (hslx 200 80 40)}))
 
 (comp-button
- {:text "Quick click",
+ {:text "Quick pointerdown",
   :position [100 0],
-  :on-click (fn [e d!] (js/console.log "clicked" e d!))})
+  :on-pointerdown (fn [e d!] (js/console.log "pointerdown event" e d!))})
 ```
 
 `phlox.comp.slider/comp-slider` provides a little slider bar of a number, changes on dragging:
@@ -243,7 +245,7 @@ Also `comp-slider-point` is a minimal version for `comp-slider`, it does not acc
   :color (hslx 0 0 50)
   :fill (hslx 0 0 30)
   :bottom? false
-  :on-click (fn [message d!])})
+  :on-pointerdown (fn [message d!])})
 ```
 
 ### Cursor and states

diff --git a/calcit.cirru b/calcit.cirru
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "phlox",
-  "version": "0.2.1",
+  "version": "0.3.0-a1",
   "description": "a PIXI DSL in ClojureScript",
   "main": "index.js",
   "scripts": {

diff --git a/release.edn b/release.edn
@@ -1,4 +1,4 @@
-{:version "0.2.1",
+{:version "0.3.0-a1",
  :group-id "quamolit",
  :artifact-id "phlox",
  :skip-tag true,

diff --git a/src/phlox/app/comp/drafts.cljs b/src/phlox/app/comp/drafts.cljs
@@ -14,13 +14,13 @@
     :radius 40,
     :line-style {:width 4, :color (hslx 0 80 50), :alpha 1},
     :fill (hslx 160 80 70),
-    :on {:mousedown (fn [event dispatch!] (dispatch! :add-x nil))}})
+    :on {:pointerdown (fn [event dispatch!] (dispatch! :add-x nil))}})
   (rect
    {:position [40 40],
     :size [50 50],
     :line-style {:width 4, :color (hslx 0 80 50), :alpha 1},
     :fill (hslx 200 80 80),
-    :on {:mousedown (fn [e dispatch!] (dispatch! :add-x nil))},
+    :on {:pointerdown (fn [e dispatch!] (dispatch! :add-x nil))},
     :rotation (+ 1 (* 0.1 x)),
     :pivot [0 0]}
    (text

diff --git a/src/phlox/app/comp/keyboard.cljs b/src/phlox/app/comp/keyboard.cljs
@@ -15,7 +15,7 @@
     {:position [0 0],
      :size [160 40],
      :fill (hslx 0 0 50),
-     :on {:click (fn [e d!] (d! :toggle-keyboard nil))}})
+     :on {:pointerdown (fn [e d!] (d! :toggle-keyboard nil))}})
    (text
     {:text (str "Toggle: " on?),
      :position [4 8],

diff --git a/src/phlox/app/container.cljs b/src/phlox/app/container.cljs
@@ -22,13 +22,13 @@
   (comp-button
    {:text "DEMO BUTTON",
     :position [100 0],
-    :on {:click (fn [e d!] (js/console.log "clicked" e d!))}})
+    :on {:pointerdown (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)})
   (comp-button
-   {:text "Short hand click",
+   {:text "Short hand pointerdown",
     :position [100 120],
-    :on-click (fn [e d!] (println "clicked"))})))
+    :on-pointerdown (fn [e d!] (println "clicked"))})))
 
 (defcomp
  comp-curves
@@ -78,7 +78,7 @@
              {:position [(* x 14) (* y 14)],
               :size [10 10],
               :fill (hslx 200 80 80),
-              :on {:mouseover (fn [e d!] (println "hover:" x y))}})]))))))
+              :on {:pointerover (fn [e d!] (println "hover:" x y))}})]))))))
 
 (defcomp
  comp-messages-demo
@@ -89,7 +89,7 @@
     (comp-button
      {:text "Add message",
       :position [400 200],
-      :on-click (fn [e d!]
+      :on-pointerdown (fn [e d!]
         (d!
          cursor
          (update
@@ -107,7 +107,7 @@
     (comp-messages
      {:messages (:messages state),
       :bottom? (:bottom? state),
-      :on-click (fn [message d!]
+      :on-pointerdown (fn [message d!]
         (d!
          cursor
          (update
@@ -175,7 +175,7 @@
    {:position [0 0],
     :size [160 32],
     :fill (if selected? (hslx 180 50 50) (hslx 180 50 30)),
-    :on {:mousedown (fn [event dispatch!] (dispatch! :tab tab-value))}})
+    :on {:pointerdown (fn [event dispatch!] (dispatch! :tab tab-value))}})
   (text
    {:text tab-title,
     :style {:fill (hslx 200 90 100), :font-size 20, :font-family "Josefin Sans"},
@@ -192,7 +192,7 @@
      {:position [240 110],
       :size [80 24],
       :fill (hslx 0 0 20),
-      :on {:click (fn [e d!]
+      :on {:pointerdown (fn [e d!]
              (request-text!
               e
               {:initial (:text state), :style {:color "blue"}}
@@ -203,7 +203,7 @@
      {:position [240 180],
       :size [200 100],
       :fill (hslx 0 0 20),
-      :on {:click (fn [e d!]
+      :on {:pointerdown (fn [e d!]
              (request-text!
               e
               {:initial (:long-text state),

diff --git a/src/phlox/comp/button.cljs b/src/phlox/comp/button.cljs
@@ -31,7 +31,7 @@
     :font-family (string+),
     :position (tuple+ [(number+) (number+)]),
     :on lilac-event-map,
-    :on-click (fn+),
+    :on-pointerdown (fn+),
     :align-right? (boolean+)}
    {:all-optional? true, :check-keys? true}))
 
@@ -54,7 +54,7 @@
       :size [width 32],
       :on (cond
         (some? (:on props)) (:on props)
-        (some? (:on-click props)) {:click (:on-click props)}
+        (some? (:on-pointerdown props)) {:pointerdown (:on-pointerdown props)}
         :else (do))})
     (text
      {:text button-text,

diff --git a/src/phlox/comp/drag_point.cljs b/src/phlox/comp/drag_point.cljs
@@ -54,10 +54,10 @@
         {:radius radius,
          :position [0 0],
          :fill fill,
-         :on {:mousedown (fn [e d!]
+         :on {:pointerdown (fn [e d!]
                 (let [x (-> e .-data .-global .-x), y (-> e .-data .-global .-y)]
                   (d! cursor (merge state {:dragging? true, :x0 [x y], :p0 position})))),
-              :mousemove (fn [e d!]
+              :pointermove (fn [e d!]
                 (when (:dragging? state)
                   (let [x (-> e .-data .-global .-x), y (-> e .-data .-global .-y)]
                     (let [x0 (:x0 state)]
@@ -66,8 +66,8 @@
                         (:p0 state)
                         [(* unit (- x (first x0))) (* unit (- y (peek x0)))])
                        d!))))),
-              :mouseup (fn [e d!] (d! cursor (assoc state :dragging? false))),
-              :mouseupoutside (fn [e d!] (d! cursor (assoc state :dragging? false)))}})
+              :pointerup (fn [e d!] (d! cursor (assoc state :dragging? false))),
+              :pointerupoutside (fn [e d!] (d! cursor (assoc state :dragging? false)))}})
        (if-not hide-text?
          (text
           {:text (str

diff --git a/src/phlox/comp/messages.cljs b/src/phlox/comp/messages.cljs
@@ -45,7 +45,8 @@
                          (if bottom?
                            [(- js/window.innerWidth 16) (- js/window.innerHeight 16)]
                            [(- js/window.innerWidth 16) 16]))
-       on-click (or (:on-click options) (fn [x d!] (println "missing message handler:" x)))]
+       on-pointerdown (or (:on-pointerdown options)
+                          (fn [x d!] (println "missing message handler:" x)))]
    (create-list
     :container
     {:position base-position}
@@ -61,4 +62,4 @@
                :color (:color options),
                :fill (:fill options),
                :align-right? true,
-               :on-click (fn [e d!] (on-click message d!))})]))))))
+               :on-pointerdown (fn [e d!] (on-pointerdown message d!))})]))))))
diff --git a/src/phlox/comp/slider.cljs b/src/phlox/comp/slider.cljs
@@ -56,10 +56,10 @@
     (rect
      {:size [120 24],
       :fill fill,
-      :on {:mousedown (fn [e d!]
+      :on {:pointerdown (fn [e d!]
              (let [x1 (-> e .-data .-global .-x)]
                (d! cursor {:dragging? true, :v0 value, :x0 x1}))),
-           :mousemove (fn [e d!]
+           :pointermove (fn [e d!]
              (when (:dragging? state)
                (let [x2 (-> e .-data .-global .-x)]
                  (if (fn? on-change)
@@ -70,8 +70,8 @@
                         ((fn [v] (if (some? (:min props)) (max (:min props) v) v))))
                     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}))}}
+           :pointerup (fn [e d!] (d! cursor {:v0 value, :x0 0, :dragging? false})),
+           :pointerupoutside (fn [e d!] (d! cursor {:v0 value, :x0 0, :dragging? false}))}}
      (text
       {:text (str "◀ " (if (number? value) (.toFixed value (if round? 0 4)) "nil") " ▶"),
        :position [4 4],
@@ -113,10 +113,10 @@
      {:size [12 12],
       :fill fill,
       :radius 4,
-      :on {:mousedown (fn [e d!]
+      :on {:pointerdown (fn [e d!]
              (let [x1 (-> e .-data .-global .-x)]
                (d! cursor {:dragging? true, :v0 value, :x0 x1}))),
-           :mousemove (fn [e d!]
+           :pointermove (fn [e d!]
              (when (:dragging? state)
                (let [x2 (-> e .-data .-global .-x)]
                  (if (fn? on-change)
@@ -127,8 +127,8 @@
                         ((fn [v] (if (some? (:min props)) (max (:min props) v) v))))
                     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}))}}
+           :pointerup (fn [e d!] (d! cursor {:v0 value, :x0 0, :dragging? false})),
+           :pointerupoutside (fn [e d!] (d! cursor {:v0 value, :x0 0, :dragging? false}))}}
      (text
       {:text (str (if (number? value) (.toFixed value (if round? 0 4)) "nil")),
        :position [16 1],

diff --git a/src/phlox/comp/switch.cljs b/src/phlox/comp/switch.cljs
@@ -41,7 +41,7 @@
       :fill (if value (hslx 0 0 92) (hslx 0 0 50)),
       :position [0 0],
       :radius 3,
-      :on {:click (fn [e d!] (when (fn? on-change) (on-change (not value) d!)))}})
+      :on {:pointerdown (fn [e d!] (when (fn? on-change) (on-change (not value) d!)))}})
     (text
      {:text (if value "On" "Off"),
       :position (if value [8 2] [24 2]),