pixi nav working

src/rtable/render/pixi.cljs

@@ -8,15 +8,16 @@
    ["pixi.js" :as pixi :refer [Application Container Graphics Text]]
    [rtable.data.pixi] ; side effects
    [rtable.data :as d]
-   [rtable.data.pixi.scale :refer [scale-bars]]
    [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.state :refer [create-state]]
    ))
 
-(defn pixi-app [node ds]
+(defn pixi-app [node width height]
   (let [app (Application.)
-        app-p (.init app (clj->js {:width 800
-                                   :height 400
+        app-p (.init app (clj->js {:width width
+                                   :height height
                                    :background "#1099bb"}))]
     (p/then
      app-p
@@ -28,53 +29,12 @@
          [stage container])))))
 
 
-(defn add-bar [graphics idx row]
-  (let [{:keys [high low]} row
-        bar-width 8
-        x (+ (* idx bar-width) (/ bar-width 2))
-        height (abs (- high low))
-        ]
-    ;(.moveTo graphics x high)
-    ;(.lineTo graphics x low)
-    (.stroke graphics (clj->js {:width 2 :color 0xffffff}))
-    (.fill  graphics (clj->js {:color 0xaa4f08}));
-
-    ; (.rect  graphics 530 50 140 100)
-    (println "adding bar x: " x " y: " low " width: " bar-width " height: " height)
-    (.rect graphics
-           x low
-           bar-width
-           height)
-    (.fill  graphics (clj->js {:color 0xaa4f08}));
-    (.stroke graphics (clj->js {:width 2 :color 0xffffff}))))
-
-
-
-(defn draw-bars [container ds]
-  (let [ds (scale-bars ds)
-        rows (tmlds/rows ds)
-        graphics (Graphics.)]
-    (println "scaled ds:")
-    (println ds)
-    (println "container: " container)
-
-    (doall (map-indexed (partial add-bar graphics) rows))
-    (.addChild container graphics)
-    (println "draw-bars done.")))
-
-
-(defn pixi-render [container ds]
-  (draw-bars container ds)
-  (println "pixi-render done.")
-  nil)
-
-
 (defn pixi-impl
   [{:keys [style class data]
     :or {style {}
          class ""}}]
     ; https://github.com/reagent-project/reagent/blob/master/doc/CreatingReagentComponents.md
-  (let [container-a (atom nil)]
+  (let [state-a (atom nil)]
     (reagent/create-class
      {:display-name "pixi-reagent"
       :reagent-render (fn [{:keys [style class data]
@@ -85,23 +45,31 @@
       :component-did-mount (fn [this] ; oldprops oldstate snapshot
                              ;(println "c-d-m: " this)
                              ;(info (str "jsrender init data: " data))
-                             (let [c-p (pixi-app (reagent.dom/dom-node this) data)]
+                             (let [width 800
+                                   height 400
+                                   c-p (pixi-app (reagent.dom/dom-node this) width height)]
                                (p/then c-p
                                        (fn [[stage container]]
-                                         (reset! container-a container)
+                                         (let [state (create-state {:width width
+                                                                    :height height
+                                                                    :step-px 8}
+                                                                    container 
+                                                                    data)]
+                                         (reset! state-a state)
                                          ;(add-range-text stage)
                                          (add-graphics stage)
-                                         (create-buttons stage)
-                                         ;(pixi-render container data)
-                                         (pixi-render stage data)
-                                         (.addChild stage container)))
+                                         (create-buttons stage state)
+                                         (.addChild stage container)
+                                         (pixi-render state)
+                                         )))
 
                                nil))
       :component-did-update (fn [this old-argv]
                               (let [new-argv (rest (reagent/argv this))
                                     [arg1] new-argv
                                     {:keys [data]} arg1
-                                    container @container-a]
+                                    ;container @container-a
+                                    ]
                                 ;(println "component did update: " this "argv: " new-argv)
                                 ;(pixi-render container data)
                                 nil))})))

src/rtable/render/pixi/bars.cljs

@@ -0,0 +1,41 @@
+(ns rtable.render.pixi.bars
+   (:require
+    [tech.v3.dataset :as tmlds]
+    ["pixi.js" :as pixi :refer [Application Container Graphics Text]]
+    [rtable.render.pixi.scale :refer [scale-bars]]
+   ))
+
+
+(defn add-bar [graphics idx row]
+  (let [{:keys [high low]} row
+        bar-width 8
+        x (+ (* idx bar-width) (/ bar-width 2))
+        height (abs (- high low))]
+    ;(.moveTo graphics x high)
+    ;(.lineTo graphics x low)
+    (.stroke graphics (clj->js {:width 2 :color 0xffffff}))
+    (.fill  graphics (clj->js {:color 0xaa4f08}));
+
+    ; (.rect  graphics 530 50 140 100)
+    (println "adding bar x: " x " y: " low " width: " bar-width " height: " height)
+    (.rect graphics
+           x low
+           bar-width
+           height)
+    (.fill  graphics (clj->js {:color 0xaa4f08}));
+    (.stroke graphics (clj->js {:width 2 :color 0xffffff}))))
+
+
+
+(defn draw-bars [state]
+  (let [{:keys [ds-visible container]} @state
+        ds-visible (scale-bars ds-visible)
+        rows (tmlds/rows ds-visible)
+        graphics (Graphics.)]
+    (println "scaled ds:")
+    (println ds-visible)
+    (println "container: " container)
+
+    (doall (map-indexed (partial add-bar graphics) rows))
+    (.addChild container graphics)
+    (println "draw-bars done.")))

src/rtable/render/pixi/button.cljs

@@ -2,6 +2,7 @@
    (:require
     [taoensso.timbre :refer-macros [info warn error]]
     ["pixi.js" :as pixi :refer [Application Container Graphics Text]]
+    [rtable.render.pixi.nav :refer [nav]]
     ))
 
 (defn create-button [stage x y label cb]
@@ -15,9 +16,11 @@
        (.fill (clj->js {:color 0xaa4f08})))
     (set! (.-interactive button) true )
     (set! (.-buttonMode true) true)
-    ;button.on ('pointerdown', callback);
-    ;button.on ('pointerover', () => button.tint = 0xAAAAAA);
-    ;button.on ('pointerout', () => button.tint = 0xFFFFFF);
+
+    (.on button "pointerover" #(set! (.-tint button) 0xAAAAAA))
+    (.on button "pointerout" #(set! (.-tint button) 0xFFFFFF))
+    (.on button "pointerdown" cb);
+
     ; text
     (set! (.-x text) (+ x 10))
     (set! (.-y text) (+ y 5))
@@ -26,10 +29,10 @@
     (.addChild stage  text)))
 
 
-(defn create-buttons [stage]
+(defn create-buttons [stage state]
   (let [y 350
         x-base 400]
-    (create-button stage (+ x-base 0) y "<|" nil)
-    (create-button stage (+ x-base 40) y "<" nil)
-    (create-button stage (+ x-base 80) y ">" nil)
-    (create-button stage (+ x-base 120) y ">|" nil)))
+    (create-button stage (+ x-base 0) y "<|" #(nav state :begin))
+    (create-button stage (+ x-base 40) y "<" #(nav state :prior))
+    (create-button stage (+ x-base 80) y ">" #(nav state :next))
+    (create-button stage (+ x-base 120) y ">|" #(nav state :end))))

src/rtable/render/pixi/nav.cljs

@@ -0,0 +1,28 @@
+(ns rtable.render.pixi.nav
+  (:require
+   [rtable.render.pixi.state :refer [adjust-visible]]
+   [rtable.render.pixi.bars :refer [draw-bars]]))
+
+(defn pixi-render [state]
+  (draw-bars state)
+  (println "pixi-render done.")
+  nil)
+
+(defn nav [state op]
+  (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
+      :begin
+      (set-end-idx row-count-visible)
+      :end
+      (set-end-idx row-count)
+      :prior
+      (set-end-idx (max row-count-visible (- end-idx row-count-visible)))
+      :next
+      (set-end-idx (min row-count (+ end-idx row-count-visible))))
+    (adjust-visible state)
+    (.removeChildren container)
+    (pixi-render state)))
+

src/rtable/data/pixi/scale.cljs → src/rtable/render/pixi/scale.cljs

@@ -1,4 +1,4 @@
-(ns rtable.data.pixi.scale
+(ns rtable.render.pixi.scale
     (:require
     [tech.v3.dataset :as tmlds]
     [ham-fisted.api :as hamf]))
@@ -15,8 +15,7 @@
 
 
 (defn scale-bars [ds]
-  (let [ds (tmlds/select-rows ds (range 200))
-        max-price (true-max (:high ds))
+  (let [max-price (true-max (:high ds))
         min-price (true-min (:low ds))
         range-price (- max-price min-price)
         height 400

src/rtable/render/pixi/state.cljs

@@ -0,0 +1,36 @@
+(ns rtable.render.pixi.state
+  (:require
+   [tech.v3.dataset :as tmlds]))
+
+
+(defn adjust-visible [state]
+  (let [{:keys [width step-px ds end-idx]} @state
+        row-count-visible (int (/ width step-px))
+        start-idx (max 0 (- end-idx row-count-visible))
+        ds-visible (tmlds/select-rows ds (range start-idx end-idx))]
+
+    (swap! state assoc
+           :start-idx start-idx
+           :ds-visible ds-visible
+           :row-count-visible row-count-visible
+           )))
+
+
+
+(defn create-state [{:keys [width height
+                            step-px]} container ds]
+  (let [row-count (tmlds/row-count ds)
+        state (atom {:width width
+                     :height height
+                     :step-px step-px
+                     :row-count row-count
+                     :ds ds
+                     :end-idx row-count
+                     :container container
+                     })]
+    (adjust-visible state)
+    (println "state: " (dissoc @state :ds))
+    state))
+
+
+