From 1b253ba6f3ff29af7b93daa50fdaad641d2723f1 Mon Sep 17 00:00:00 2001 From: Kimo Knowles Date: Thu, 12 Dec 2024 18:41:05 +0100 Subject: [PATCH] [wip] --- run/resources/public/assets/css/re-com.css | 28 ++++ src/re_com/nested_grid.cljs | 136 ++++++++-------- src/re_com/nested_grid/parts.cljs | 14 +- src/re_com/nested_grid/theme.cljs | 117 ++++++++++++++ src/re_com/nested_grid/util.cljc | 3 +- src/re_com/theme.cljs | 2 + src/re_com/theme/default.cljs | 58 +------ src/re_com/theme/util.cljs | 14 +- src/re_com/util.cljs | 8 +- src/re_demo/nested_grid.cljs | 178 ++------------------- 10 files changed, 251 insertions(+), 307 deletions(-) create mode 100644 src/re_com/nested_grid/theme.cljs diff --git a/run/resources/public/assets/css/re-com.css b/run/resources/public/assets/css/re-com.css index 9450c4c7..1d6873f2 100644 --- a/run/resources/public/assets/css/re-com.css +++ b/run/resources/public/assets/css/re-com.css @@ -1543,3 +1543,31 @@ code { .rc-typeahead-suggestion.active { background-color: #ddd; } + +.rc-nested-v-grid-cell-grid div { + overflow: hidden; + text-overflow: ellipsis; + font-size: 12; + background-color: white; + color: #777; + padding-top: 3px; + padding-right: 3px; + padding-left: 3px; + text-align: right; + border-right: thin solid #ccc; + border-bottom: thin solid #ccc; +} + +.rc-nested-v-grid-row-header-grid div { + overflow: hidden; + text-overflow: ellipsis; + font-size: 12; + background-color: white; + color: #777; + padding-top: 3px; + padding-right: 3px; + padding-left: 3px; + text-align: right; + border-top: thin solid #ccc; + border-left: thin solid #ccc; +} diff --git a/src/re_com/nested_grid.cljs b/src/re_com/nested_grid.cljs index 6e319c67..92cfdef3 100644 --- a/src/re_com/nested_grid.cljs +++ b/src/re_com/nested_grid.cljs @@ -11,6 +11,7 @@ [re-com.config :as config :refer [include-args-desc?]] [re-com.validate :refer [vector-atom? ifn-or-nil? map-atom? parts? part?]] [re-com.theme :as theme] + [re-com.nested-grid.theme] [re-com.box :as box] [re-com.buttons :as buttons])) @@ -1250,75 +1251,78 @@ (reset! internal-row-tree (u/deref-or-value row-tree)) (reset! internal-column-tree (u/deref-or-value column-tree))) :reagent-render - (fn [{:keys [row-tree column-tree - cell - row-header-cell column-header-cell] - :as props}] + (fn [{:keys [row-tree column-tree + cell-value + theme-cells?] + {::keys [cell row-header-cell column-header-cell + row-header-grid column-header-grid + cell-grid] + :as parts} :parts + :as props}] (u/deref-or-value row-tree) (u/deref-or-value row-header-widths) (u/deref-or-value column-header-heights) (u/deref-or-value column-tree) - (let [theme (theme/defaults - props - {:user [(theme/<-props props {:part ::wrapper - :include [:style :class]})]}) - themed (fn [part props] (theme/apply props {:part part} theme)) - spacer-container [:div {:style {:position :sticky - :grid-row-start 1 - :grid-column-start 1 - :left 0 - :top 0 - :background-color :white}}] - row-header-container [:div {:style {:display :grid - :grid-template-rows @row-template - :grid-template-columns @row-header-template - :position :sticky - :left 0}}] - row-header-cells (for [row-path @row-windowed-paths - :let [props (themed ::row-header-wrapper - {:style {:grid-row-start (ngu/path->grid-line-name row-path) - :grid-row-end (str "span " (get @row-spans row-path)) - :grid-column-start (count row-path) - :grid-column-end (str "span " (inc (- @row-depth (count row-path)))) - :font-size 8} - :edge #{:start}})]] - (u/part row-header-cell props {:key row-path - :default ngp/row-header-wrapper})) - column-header-container [:div {:style {:display :grid - :grid-template-rows @column-header-template - :grid-template-columns @column-template - :position :sticky - :top 0}}] - column-header-cells (for [column-path @column-windowed-paths - :let [props (themed ::column-header-wrapper - {:style {:grid-column-start (ngu/path->grid-line-name column-path) - :grid-column-end (str "span " (get @column-spans column-path)) - :grid-row-start (count column-path) - :grid-row-end (str "span " (inc (- @column-depth (count column-path)))) - :overflow :hidden - :font-size 8} - :children [(pr-str column-path)]})]] - (u/part column-header-cell props {:key column-path})) - main-container [:div - (themed ::wrapper - {:style {:grid-template-rows (ngu/grid-template [@column-header-height-total @row-height-total]) - :grid-template-columns (ngu/grid-template [@row-header-width-total @column-width-total])} - :ref wrapper-ref!})] - cell-grid-container [:div (themed ::cell-grid - {:style {:display :grid - :grid-column-start 2 - :grid-row-start 2 - :grid-template-rows @row-template - :grid-template-columns @column-template}})] - cells (for [row-path @row-windowed-leaf-paths - column-path @column-windowed-leaf-paths - :let [props {:row-path row-path - :column-path column-path}]] - (u/part cell props {:key [row-path column-path] - :default ngp/cell}))] + (let [theme (theme/defaults + props + {:user [(theme/<-props props {:part ::wrapper + :include [:style :class]})]}) + themed (fn [part props] (theme/apply props {:part part} theme)) + spacer-container [:div {:style {:position :sticky + :grid-row-start 1 + :grid-column-start 1 + :left 0 + :top 0 + :background-color :white}}] + row-header-cells (for [row-path @row-windowed-paths + :let [props (themed ::row-header + {:style {:grid-row-start (ngu/path->grid-line-name row-path) + :grid-row-end (str "span " (get @row-spans row-path)) + :grid-column-start (count row-path) + :grid-column-end (str "span " (inc (- @row-depth (count row-path))))} + :children [(pr-str row-path)]})]] + (u/part row-header-cell props {:key row-path})) + column-header-cells (for [column-path @column-windowed-paths + :let [props (themed ::column-header + {:style {:grid-column-start (ngu/path->grid-line-name column-path) + :grid-column-end (str "span " (get @column-spans column-path)) + :grid-row-start (count column-path) + :grid-row-end (str "span " (inc (- @column-depth (count column-path)))) + :overflow :hidden} + :children [(pr-str column-path)]})]] + (u/part column-header-cell props {:key column-path})) + main-container [:div + (themed ::wrapper + {:style {:grid-template-rows (ngu/grid-template [@column-header-height-total @row-height-total]) + :grid-template-columns (ngu/grid-template [@row-header-width-total @column-width-total])} + :ref wrapper-ref!})] + cells (for [row-path @row-windowed-leaf-paths + column-path @column-windowed-leaf-paths + :let [props {:row-path row-path + :column-path column-path} + props (cond-> props + cell-value (assoc :cell-value + (cell-value props)) + theme-cells? (->> (themed ::cell-wrapper)))]] + (u/part cell props {:key [row-path column-path] + :default ngp/cell-wrapper}))] (conj main-container - (into cell-grid-container cells) - (into column-header-container column-header-cells) - (into row-header-container row-header-cells) + (u/part cell-grid + (themed ::cell-grid + {:children cells + :style {:display :grid + :grid-column-start 2 + :grid-row-start 2 + :grid-template-rows @row-template + :grid-template-columns @column-template}})) + (u/part column-header-grid + (themed ::column-header-grid + {:children column-header-cells + :style {:grid-template-rows @column-header-template + :grid-template-columns @column-template}})) + (u/part row-header-grid + (themed ::row-header-grid + {:children row-header-cells + :style {:grid-template-rows @row-template + :grid-template-columns @row-header-template}})) spacer-container)))}))) - diff --git a/src/re_com/nested_grid/parts.cljs b/src/re_com/nested_grid/parts.cljs index 5af5eec8..262d53a4 100644 --- a/src/re_com/nested_grid/parts.cljs +++ b/src/re_com/nested_grid/parts.cljs @@ -2,13 +2,9 @@ (:require [re-com.nested-grid.util :as ngu] [re-com.nested-grid :as-alias ng])) -(defn cell [{:keys [row-path column-path]}] - [:div {:style {:border "thin solid grey" - :grid-row-start (ngu/path->grid-line-name row-path) - :grid-column-start (ngu/path->grid-line-name column-path) - :font-size 6}} +(defn cell-wrapper [{:keys [style class row-path column-path]}] + [:div {:style (merge {:grid-row-start (ngu/path->grid-line-name row-path) + :grid-column-start (ngu/path->grid-line-name column-path)} + style) + :class class} (str (gensym))]) - -(defn row-header-wrapper [{:keys [style]}] - [:div {:style (merge style {:font-size 6})} - (gensym)]) diff --git a/src/re_com/nested_grid/theme.cljs b/src/re_com/nested_grid/theme.cljs new file mode 100644 index 00000000..b16b4c9f --- /dev/null +++ b/src/re_com/nested_grid/theme.cljs @@ -0,0 +1,117 @@ +(ns re-com.nested-grid.theme + (:require + [re-com.theme.default :as default :refer [base main style]] + [re-com.theme.util :refer [merge-props merge-class]] + [re-com.nested-grid :as-alias ng])) + +(defmethod base ::ng/wrapper [props _] + (style props {:height 300 + :width 500 + :overflow :auto + :flex "0 0 auto" + :display :grid})) + +(defmethod base ::ng/cell-grid + [props _] + (default/class props "rc-nested-v-grid-cell-grid")) + +(defmethod main ::ng/cell-grid + [props _] + (style props {:border-top "thin solid #ccc" + :border-left "thin solid #ccc"})) + +(defmethod base ::ng/column-header-grid + [props _] + (-> props + (default/class "rc-nested-v-grid-row-header-grid") + (style {:display :grid + :position :sticky + :top 0}))) + +(defmethod base ::ng/row-header-grid + [props _] + (-> props + (default/class "rc-nested-v-grid-row-header-grid") + (style {:display :grid + :position :sticky + :left 0}))) + +(defmethod base ::ng/column-header + [props _] + (update props :style merge + {:user-select "none" + :width "100%" + :height "100%"})) + +(def row-header-main + (let [{:keys [sm-3 sm-6]} default/golden-section-50 + {:keys [border light-background]} default/colors] + {:padding-top sm-3 + :padding-right sm-3 + :padding-left sm-6 + :background-color light-background + :color "#666" + :text-align "left" + :font-size "13px" + :white-space "nowrap"})) + +(defmethod main ::ng/row-header + [props {{:keys [edge]} :state}] + (style props row-header-main + #_(when (contains? edge :right) + {:border-right "thin solid #aaa"}) + #_(when (contains? edge :left) + {:border-left "thin solid #aaa"}) + #_(when (contains? edge :bottom) + {:border-bottom "thin solid #aaa"}))) + +(def column-header-main + (let [{:keys [sm-3 sm-4]} default/golden-section-50 + {:keys [border light-background]} default/colors] + {:padding-top sm-3 + :padding-right sm-4 + :padding-left sm-4 + :background-color light-background + :color "#666" + :font-size "13px" + :border-left "thin solid #ccc" + :border-top "thin solid #ccc"})) + +(defmethod main ::ng/column-header + [props {:keys [state]}] + (let [{:keys [align-column align-column-header align]} (:header-spec state)] + (style props column-header-main + {:text-align (or align-column-header align-column align :center)}))) + +(def cell-wrapper-main + (let [{:keys [sm-3]} default/golden-section-50] + {:font-size 12 + :background-color "white" + :color "#777" + :padding-top sm-3 + :padding-right sm-3 + :padding-left sm-3 + :text-align :right + :border-right "thin solid #ccc" + :border-bottom "thin solid #ccc"})) + +(defmethod main ::ng/cell-wrapper + [props {{:keys [edge value column-path]} :state}] + (let [align (some :align column-path)] + (update props :style merge + cell-wrapper-main + #_#_(cond align + {:text-align align} + (string? value) + {:text-align :left}) + (when (seq edge) + {:border-right (cond + (contains? edge :column-section-right) + "thin solid #aaa" + (contains? edge :right) + "thin solid #aaa" + :else + "thin solid #ccc") + :border-bottom (if (contains? edge :bottom) + "thin solid #aaa" + "thin solid #ccc")})))) diff --git a/src/re_com/nested_grid/util.cljc b/src/re_com/nested_grid/util.cljc index bce57816..421077a1 100644 --- a/src/re_com/nested_grid/util.cljc +++ b/src/re_com/nested_grid/util.cljc @@ -208,7 +208,8 @@ (repeatedly 10000 #(do [(keyword (gensym)) [:x 20] [:y 40] - [:z 20]])))])) + [:z 20] + [:h 10]])))])) #_(walk-size {:window-start 372 :window-end 472 diff --git a/src/re_com/theme.cljs b/src/re_com/theme.cljs index 2bfee975..c147daa8 100644 --- a/src/re_com/theme.cljs +++ b/src/re_com/theme.cljs @@ -21,6 +21,8 @@ (def merge-props tu/merge-props) +(def merge-class tu/merge-class) + (defn merge [a {:re-com/keys [system] :keys [base main user main-variables user-variables base-variables] :as b}] (cond-> a base-variables (assoc :base-variables base-variables) diff --git a/src/re_com/theme/default.cljs b/src/re_com/theme/default.cljs index eb932ef7..e600c8db 100644 --- a/src/re_com/theme/default.cljs +++ b/src/re_com/theme/default.cljs @@ -2,7 +2,7 @@ (:require [clojure.string :as str] [re-com.util :as ru :refer [px]] - [re-com.theme.util :refer [merge-props]] + [re-com.theme.util :refer [merge-props merge-class]] [re-com.dropdown :as-alias dropdown] [re-com.error-modal :as-alias error-modal] [re-com.nested-grid-old :as-alias nested-grid-old] @@ -76,12 +76,7 @@ (defn style [props & ms] (apply update props :style merge ms)) -(defmethod base ::nested-grid/wrapper [props _] - (style props {:height 300 - :width 500 - :overflow :auto - :flex "0 0 auto" - :display :grid})) +(defn class [props & ss] (apply update props :class merge-class ss)) (defmethod base ::nested-grid-old/cell-wrapper [props _] (style props cell-wrapper-base)) @@ -92,12 +87,6 @@ (defmethod base ::nested-grid-old/row-header-wrapper [props _] (update props :style merge row-header-wrapper-base)) -(defmethod base ::nested-grid/column-header-wrapper [props _] - (update props :style merge - {:user-select "none" - :width "100%" - :height "100%"})) - (defmethod base ::nested-grid-old/row-header [props {{:keys [sticky? sticky-top]} :state}] (update props :style merge {:width "100%" @@ -211,37 +200,6 @@ "thin solid #aaa" "thin solid #ccc")})))) -(def row-header-wrapper-main - (let [{:keys [sm-3 sm-6]} golden-section-50 - {:keys [border light-background]} colors] - {:padding-top sm-3 - :padding-right sm-3 - :padding-left sm-6 - :background-color light-background - :color "#666" - :text-align "left" - #_#_:font-size "13px" - :font-size 6 - :white-space "nowrap" - :border-left "thin solid #ccc" - :border-bottom "thin solid #ccc"})) - -(defmethod main ::nested-grid-old/row-header-wrapper - [props {{:keys [edge]} :state}] - (update props :style merge - row-header-wrapper-main - (when (contains? edge :right) - {:border-right "thin solid #aaa"}) - (when (contains? edge :left) - {:border-left "thin solid #aaa"}) - (when (contains? edge :bottom) - {:border-bottom "thin solid #aaa"}))) - -(defmethod main ::nested-grid/row-header-wrapper [props _] - (style props - row-header-wrapper-main - {#_#_:border "thin solid #aaa"})) - (defmethod main :default [props {:keys [state part] {:as $ :keys [sm-1 sm-2 sm-3 sm-4 sm-5 sm-6 md-1 md-2 @@ -325,18 +283,6 @@ :else (str "thin" " solid " border))}}) - ::nested-grid/column-header-wrapper - (let [{:keys [align-column align-column-header align]} (:header-spec state)] - {:style {:padding-top sm-3 - :padding-right sm-4 - :padding-left sm-4 - :background-color light-background - :color "#666" - :text-align (or align-column-header align-column align :center) - #_#_:font-size "13px" - :font-size 6 - :border (str "thin solid " border)}}) - ::tree-select/dropdown-anchor {:style {:padding "0 0 0 0" :overflow "hidden" diff --git a/src/re_com/theme/util.cljs b/src/re_com/theme/util.cljs index 6339a6f7..ea6d98d7 100644 --- a/src/re_com/theme/util.cljs +++ b/src/re_com/theme/util.cljs @@ -1,5 +1,11 @@ -(ns re-com.theme.util - (:require [re-com.util :as u])) +(ns re-com.theme.util) + +;;FIXME: this is just here to avoid circular imports with re-com.util +;; really, re-com.util/part should be here, and ->v should be there. +(defn ->v [x] (cond (vector? x) x + (sequential? x) (vec x) + (nil? x) nil + :else [x])) #_(defn merge-props [& ms] (let [ms (remove nil? ms) @@ -14,10 +20,12 @@ (defn rf [acc {:keys [class attr style] :as m}] (merge acc (cond-> (if-not (string? m) m {:style [m]}) class - (assoc :class (into (u/->v (:class acc)) (u/->v class))) + (assoc :class (into (->v (:class acc)) (->v class))) attr (assoc :attr (merge (:attr acc) attr)) style (assoc :style (merge (:style acc) style))))) +(defn merge-class [x & classes] (into (->v x) classes)) + (defn merge-props [& ms] (reduce rf {} ms)) diff --git a/src/re_com/util.cljs b/src/re_com/util.cljs index 847d9a3d..3b7addf6 100644 --- a/src/re_com/util.cljs +++ b/src/re_com/util.cljs @@ -2,6 +2,7 @@ (:require [reagent.ratom :refer [RAtom Reaction RCursor Track Wrapper]] [reagent.core :as r] + [re-com.theme.util :as tu] [goog.date.DateTime] [goog.date.UtcDateTime] [clojure.string :as str])) @@ -243,16 +244,17 @@ (defn default-part [{:keys [class style attr children]}] (into [:div (merge {:class class :style style} attr)] - (into [(str (gensym))] children))) + children)) -(defn part [x props & {:keys [default key]}] +(defn part [x props & {:keys [default key] :as opts}] (cond (ifn? x) (cond-> [x props] key (with-meta {:key key})) (hiccup? x) x (string? x) x - default (cond-> [part default props] + (map? x) (cond-> [(or default default-part) (tu/merge-props props x)] key (with-meta {:key key})) + default (part default props opts) :else (cond-> [default-part props] key (with-meta {:key key})))) diff --git a/src/re_demo/nested_grid.cljs b/src/re_demo/nested_grid.cljs index cb1ca7d0..2551f643 100644 --- a/src/re_demo/nested_grid.cljs +++ b/src/re_demo/nested_grid.cljs @@ -907,171 +907,11 @@ "thin solid black")}} (str row-index " // " column-index)])}))) -(defn linear-search-infinite-scroll-test [{:keys [cell row-height column-seq row-seq row-heights column-width column-widths] :as props}] - (let [_ (load-row-chunk!) - cell-container-ref (r/atom nil) - cell-container-ref! (partial reset! cell-container-ref) - scroll-top (r/atom 0) - scroll-left (r/atom 0) - container-height (r/atom nil) - container-width (r/atom nil) - container-right (r/reaction (+ @scroll-left @container-width)) - container-bottom (r/reaction (+ @scroll-top @container-height)) - on-scroll! #(do (reset! scroll-top (.-scrollTop (.-target %))) - (reset! scroll-left (.-scrollLeft (.-target %)))) - on-resize! #(do (reset! container-height (.-height (.-contentRect (aget % 0)))) - (reset! container-width (.-width (.-contentRect (aget % 0))))) - path-fn vector - size-fn :cell-size - column-v-margin 100 - row-v-margin 100 - left-bound (r/reaction (max 0 (- @scroll-left column-v-margin))) - right-bound (r/reaction (+ @container-right column-v-margin)) - top-bound (r/reaction (max 0 (- @scroll-top row-v-margin))) - bottom-bound (r/reaction (+ @container-bottom row-v-margin)) - column-window (r/reaction (ngu/cumulative-sum-window @left-bound @right-bound size-fn (u/deref-or-value column-seq))) - row-window (r/reaction (ngu/cumulative-sum-window @top-bound @bottom-bound size-fn (u/deref-or-value row-seq)))] - (r/create-class - {:component-did-mount - (fn [_] - (.addEventListener @cell-container-ref "scroll" on-scroll!) - (.observe (js/ResizeObserver. on-resize!) @cell-container-ref)) - :reagent-render - (fn [{:keys [row-seq column-seq row-tree column-tree row-height column-width max-height max-width]}] - - (let [[column-num-left column-space-left columns-left - column-num-within column-space-within columns-within - column-num-right column-space-right columns-right] @column-window - [row-num-top row-space-top rows-top - row-num-within row-space-within rows-within - row-num-bottom row-space-bottom rows-bottom] @row-window - grid-container [:div {:ref cell-container-ref! - :style {:max-height max-height - :max-width max-width - :min-width 100 - :min-height 100 - :overflow :auto - :width :fit-content - :display :grid - :grid-template-columns (ngu/grid-template (concat [column-space-left] - (interleave (map path-fn columns-within) - (map size-fn columns-within)) - [column-space-right])) - :grid-template-rows (ngu/grid-template (concat [row-space-top] - (interleave (map path-fn rows-within) - (map size-fn rows-within)) - [row-space-bottom]))}}]] - (into grid-container - (for [column-path (map path-fn columns-within) - row-path (map path-fn rows-within) - :let [props {:row-path row-path - :column-path column-path}]] - ^{:key [column-path row-path]} - [cell props]))))}))) - -(defn node->div [node {:keys [traversal path] :or {path []}}] - (let [style {:border-top "thin solid black" - :border-left "thin solid black" - :margin-left 50 - :background-color :lightgreen}] - (cond - (ngu/leaf? node) (let [leaf-path (conj path node)] - [:div {:style (merge style - {:height (ngu/leaf-size node) - :background (if (contains? (set (some-> traversal deref :windowed-paths)) leaf-path) - :lightgreen - :white)})} - (str leaf-path)]) - (ngu/branch? node) (let [[own-node & children] node - this-path (conj path (first node))] - (into [:div {:style (merge style - {:position :relative - :height :fit-content - :background (if (contains? (set (some-> traversal deref :windowed-paths)) this-path) - :lightgreen - :white)})} - [:div {:style {:height (ngu/leaf-size own-node)}} - (str this-path)]] - (map #(do [node->div % {:traversal traversal :path (conj path own-node)}]) - children)))))) - -(def scroll-top (r/atom 0)) -(def scroll-left (r/atom 0)) - -(defn window-search-test [{:keys [tree]}] - (let [container-ref (r/atom nil) - set-container-ref! (partial reset! container-ref) - #_#_scroll-top (r/atom nil) - #_#_scroll-left (r/atom nil) - on-scroll! #(do (reset! scroll-top (.-scrollTop (.-target %))) - (reset! scroll-left (.-scrollLeft (.-target %)))) - window-size 100 - window-ratio 0.5 - window-start (r/reaction (* 2 @scroll-top)) - window-end (r/reaction (+ window-size (* 2 @scroll-top))) - height-cache (volatile! {}) - path-seq (def node-seq (:windowed-paths (ngu/walk-size {:window-start 0 - :window-end 999999 - :tree tree - :size-cache (volatile! {})}))) - {:keys [sum-size]} (ngu/walk-size {:window-start 0 - :window-end 100000 - :tree tree - :size-cache (volatile! {})}) - traversal (r/reaction (ngu/walk-size {:window-start @window-start - :window-end @window-end - :tree tree - :size-cache height-cache}))] - (r/create-class - {:component-did-mount - (fn [_] (.addEventListener @container-ref "scroll" on-scroll!)) - :reagent-render (fn [] - [:div - [:div {:ref set-container-ref! - :style {:width 400 - :overflow-y :auto - :position :relative - :height sum-size}} - [:div {:style {:position :fixed - :margin-left 420 - :display :grid - :grid-template-rows (str/join " " (->> path-seq - (map last) - (map ngu/leaf-size) - (map u/px)))}} - (node->div tree {:traversal traversal})] - [:div {:style {:position :fixed - :height window-size - :width 220 - :margin-left "470px" - :border-top "thick solid red" - :border-bottom "thick solid red" - :margin-top (* 2 @scroll-top) - :background "rgba(0,0,1,0.2)"}} - (str (* 2 @scroll-top))] - [:div {:style {:width 600 - :height (* sum-size (+ 1 window-ratio))}} - (str sum-size)]] - [:br] - [:pre - (str @traversal)]])}))) - -(defn differences [v] - (into [(first v)] - (map (fn [[a b]] (- b a)) (partition 2 1 v)))) - -(def wx (r/reaction @scroll-left)) (def ww (r/atom 500)) -(def wy (r/reaction @scroll-top)) (def wh (r/atom 500)) -(def rhw (r/reaction (repeat 5 (/ @ww 10)))) - -(def seqseq (r/atom [1 2 3 4])) - -(defn upd! [] (swap! seqseq - (fn [ss] - (conj (vec (rest ss)) (inc (last ss)))))) +(def row-header-widths (r/atom [30 20 30 20 40])) +(def column-header-widths @row-header-widths) (defn panel [] [rc/h-box @@ -1082,13 +922,13 @@ [[rc/gap :size "50px"] [nested-v-grid {:row-tree ngu/huge-test-tree :row-tree-depth 5 - :column-tree-depth 4 - :row-header-widths [10 20 30 40 50] - :column-header-heights [10 20 30 40] - :column-tree ngu/test-tree - :style {:max-height @wh :max-width @ww} - :parts {:wrapper {:style {:height @wh - :width @ww}}}}] + :column-tree-depth 5 + :row-header-widths row-header-widths + :column-header-heights column-header-widths + :column-tree ngu/huge-test-tree + :style {:height @wh :width @ww} + #_#_:parts {:wrapper {:style {:height @wh + :width @ww}}}}] "Window width" [rc/slider {:model ww :on-change (partial reset! ww) :min 200 :max 800}] "Window height"