slider working

src/deps.cljs

@@ -9,5 +9,9 @@
   ; charts
   "highcharts" "^11.4.8"
   "pixi.js" "^8.4.1"
+  "@pixi/ui" "^2.1.5"
+  "shadow-cljs" "2.28.15"
+
+
 ;
   }}

src/rtable/render/pixi.cljs

@@ -10,7 +10,7 @@
    [rtable.data :as d]
    [rtable.data.pixi.demo :refer [add-graphics]]
    [rtable.render.pixi.button :refer [create-buttons]]
-   [rtable.render.pixi.nav :refer [pixi-render nav]]
+   [rtable.render.pixi.nav :refer [pixi-render create-slider]]
    [rtable.render.pixi.state :refer [create-state]]
    ))
 
@@ -59,8 +59,11 @@
                                          ;(add-range-text stage)
                                          (add-graphics stage)
                                          (create-buttons stage state)
-                                         (.addChild stage container)
+                                         (let [slider (create-slider state)]
+                                           (.addChild stage slider))
+
                                          (pixi-render state)
+                                          (.addChild stage container)
                                          )))
 
                                nil))

src/rtable/render/pixi/bars.cljs

@@ -16,7 +16,7 @@
         lower (max open close)
         ]
     ; BAR    
-    (println "adding bar x: " x " y: " low " width: " bar-width " height: " height)
+    ;(println "adding bar x: " x " y: " low " width: " bar-width " height: " height)
     (.rect graphics
            x upper
            bar-width

src/rtable/render/pixi/nav.cljs

@@ -1,19 +1,28 @@
 (ns rtable.render.pixi.nav
   (:require
    [rtable.render.pixi.state :refer [adjust-visible]]
-   [rtable.render.pixi.bars :refer [draw-bars]]))
+   [rtable.render.pixi.bars :refer [draw-bars]]
+   ["pixi.js" :as pixi :refer [Application Container Graphics Text]]
+   ["@pixi/ui" :refer [Slider]]
+
+   ))
 
 (defn pixi-render [state]
   (draw-bars state)
   (println "pixi-render done.")
   nil)
 
-(defn nav [state op]
+(defn nav 
+  ([state op]
+    (nav state op -1))
+  ([state op new-end-idx]
   (let [{:keys [end-idx row-count row-count-visible container]} @state
         set-end-idx (fn [end-idx]
                       (swap! state assoc :end-idx end-idx))]
 
     (case op
+      :idx 
+      (set-end-idx new-end-idx)
       :begin
       (set-end-idx row-count-visible)
       :end
@@ -23,6 +32,64 @@
       :next
       (set-end-idx (min row-count (+ end-idx row-count-visible))))
     (adjust-visible state)
-    (.removeChildren container)
-    (pixi-render state)))
+    (.removeChildren ^Container container)
+    (pixi-render state))))
+
+
+(defn create-slider [state]
+  (let [bg (Graphics.)
+        fill (Graphics.)
+        slider (Graphics.)
+        {:keys [end-idx row-count-visible row-count]} @state]
+    (-> bg 
+        ;(.beginFill 0xAAAAAA)
+        ;(.drawRoundedRect bg 0 0 400 20 1)
+        ;(.beginFill 0xFFFFFF)
+        ;(.drawRoundedRect 5 5 100 20 1)
+        (.rect 10 10 400 20)
+        (.fill (clj->js {:color 0xaa4f08})))
+
+    (-> fill
+        ;(.beginFill  0xAAAAAA)
+        ;(.drawRoundedRect 0 0 400 20 1)
+        ;(.beginFill 0xFFFFFF)
+        ;(.drawRoundedRect 5 5 100 20 1)
+        (.rect 10 10 400 20)
+        (.fill (clj->js {:color 0xaa4f08}))
+        )
+     (-> slider
+        ;(.beginFill  0xAAAAAA)
+        ;(.drawCircle 0 0 20)
+        ;(.beginFill 0xFFFFFF)
+        ;(.drawCircle 0, 0, 20)
+        (.circle 0, 10, 15)
+        (.fill (clj->js {:color 0xde3249 :alpha 1}) ))
+
+    (let [slider2 (Slider. (clj->js {:bg bg 
+                                     :fill fill
+                                     :slider slider
+                                     :value end-idx
+                                     :min row-count-visible
+                                     :max row-count}))
+           container (Container.)
+          ]
+
+      ;singleSlider.onUpdate.connect((value) => onChange(`${value}`));
+
+
+      (.connect (.-onUpdate slider2) 
+                (fn [value]
+                  (println "slider navigated to: " value)
+                  (nav state :idx value
+                         )))
+       ;(.addChild container bg)
+       ;(.addChild container fill)
+       ;(.addChild container slider)
+      ;container
+      slider2
+
+
+      )
+    ))
+