[proto] ResizeObserver

day8 · Sep 10, 2024 · 7faf6c1 · 7faf6c1
1 parent 5c7521f
commit 7faf6c1
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 46 deletions.
diff --git a/src/re_com/nested_grid.cljs b/src/re_com/nested_grid.cljs
@@ -1079,3 +1079,79 @@
                             :last-mouse-x last-mouse-x
                             :last-mouse-y last-mouse-y
                             :on-resize    resize-handler}])]))))
+
+(defn observe-resize [ref on-resize]
+  (let []))
+
+(def grid-width 640)
+(def grid-height 260)
+(def test-cells (map #(do ^{:key %}
+                       [:div {:style {:overflow :hidden
+                                      :border-right "thin solid grey"
+                                      :border-bottom "thin solid grey"}} (str %)])
+                     (range 100)))
+
+(defn test-grid []
+  (let [width (r/atom 0)
+        height (r/atom 0)
+        observer (js/ResizeObserver.
+                  (fn [entries]
+                    (let [entry (aget entries 0)
+                          content-rect (.-contentRect entry)]
+                      (reset! width (.-width content-rect))
+                      (reset! height  (.-height content-rect)))))
+        observe! #(.observe observer %)
+        scroll-left (r/atom 0)
+        scroll-top (r/atom 0)]
+    (fn []
+      [:div {:ref observe!
+             :style {:display :grid
+                     :height "100%"
+                     :min-height 25
+                     :max-height (+ grid-height 20)
+                     :flex 1
+                     :grid-template-columns (str "50px minmax(0px, " grid-width "px)")
+                     :grid-template-rows "20px 1fr"}}
+       [:div "x"]
+       [scroll-container {:scroll-left scroll-left}
+        [:div {:style {:display :grid
+                       :grid-template-columns "repeat(8, 80px)"
+                       :background "orange"}}
+         (take 8 test-cells)]]
+       [scroll-container {:scroll-top scroll-top}
+        [:div {:style {:display :grid
+                       :grid-template-rows "repeat(13, 20px)"
+                       :background "orange"}}
+         (take 13 test-cells)]]
+       [:div {:style {:grid-template-columns "repeat(8, 80px)"
+                      :grid-template-rows "repeat(13, 20px)"
+                      :max-width grid-width
+                      :overflow :auto
+                      :max-height grid-height
+                      :background "lightblue"
+                      :display "grid"}
+              :on-scroll #(do (reset! scroll-top (.-scrollTop (.-target %)))
+                              (reset! scroll-left (.-scrollLeft (.-target %))))}
+        test-cells]])))
+
+(defn test-main []
+  [box/v-box
+   :width "100%"
+   :height "100%"
+   :children
+   (into [[test-grid]]
+         (mapv
+          #(do [box/box :style {:background %
+                                :opacity "0.1"
+                                :max-height 200}
+                :size "1"
+                :child
+                [:div {:style {:min-height 100
+                               :width 50
+                               :background "white"}}
+                 "XYZ" [:br]
+                 "XYZ" [:br]
+                 "XYZ" [:br]
+                 "XYZ" [:br]
+                 "XYZ"]])
+          [#_"red" "green" #_"blue"]))])
diff --git a/src/re_demo/core.cljs b/src/re_demo/core.cljs
@@ -261,54 +261,9 @@
                                            :padding "0px 0px 0px 50px"
                                            :child   [(:panel (item-for-id @selected-tab-id tabs-definition))]]]]]])))    ;; the tab panel to show, for the selected tab
 
-(def grid-width 640)
-(def grid-height 260)
-
-(defn test-grid []
-  [:div {:style {:display :grid
-                 :height "100%"
-                 :min-height 25
-                 :max-height (+ grid-height 20)
-                 :flex 1
-                 :grid-template-columns "50px minmax(0, 800px)"
-                 :grid-template-rows "20px 1fr"}}
-   [:div]
-   [:div {:style {:background "orange"}}]
-   [:div {:style {:max-height grid-height :background "lightgreen"}}]
-   [:div {:style {:grid-template-columns "80px 80px 80px 80px 80px 80px 80px 80px"
-                  :grid-template-rows "repeat(13, 20px)"
-                  :max-width grid-width
-                  :overflow :auto
-                  :max-height grid-height
-                  :background "lightblue"
-                  :display "grid"}}
-    (repeat 100 [:div {:style {:overflow :hidden}} "hi"])]])
-
-(defn test-main []
-  [rc/v-box
-   :width "100%"
-   :height "100%"
-   :children
-   (into [[test-grid]]
-         (mapv
-          #(do [rc/box :style {:background %
-                               :opacity "0.1"
-                               :max-height 200}
-                :size "1"
-                :child
-                [:div {:style {:min-height 100
-                               :width 50
-                               :background "white"}}
-                 "XYZ" [:br]
-                 "XYZ" [:br]
-                 "XYZ" [:br]
-                 "XYZ" [:br]
-                 "XYZ"]])
-          [#_"red" "green" #_"blue"]))])
-
 (defn ^:dev/after-load mount-root
   []
-  (rdom/render [test-main] (get-element-by-id "app")))
+  (rdom/render [re-com.nested-grid/test-main] (get-element-by-id "app")))
 
 (defn ^:export mount-demo
   []