From e53119c09d50cfaa6c9c67785c4129125294fca2 Mon Sep 17 00:00:00 2001 From: Kimo Knowles Date: Mon, 6 Jan 2025 05:30:40 +0100 Subject: [PATCH] [nested-v-grid] Change :on-resize semantics --- src/re_com/nested_v_grid.cljs | 71 ++++++++++++++------------ src/re_com/nested_v_grid/parts.cljs | 78 ++++++++++++++--------------- src/re_demo/nested_grid.cljs | 60 ++++++++++++---------- 3 files changed, 110 insertions(+), 99 deletions(-) diff --git a/src/re_com/nested_v_grid.cljs b/src/re_com/nested_v_grid.cljs index 6786728a..39688004 100644 --- a/src/re_com/nested_v_grid.cljs +++ b/src/re_com/nested_v_grid.cljs @@ -99,9 +99,10 @@ :as props :or {hide-root? true - on-resize (fn [{:keys [value dimension]}] - (case dimension - :column-header-height (reset! column-header-heights-internal value)))}}] + on-resize (fn [{:keys [header-dimension size-dimension keypath size]}] + (case [header-dimension size-dimension] + [:column :height] (swap! column-header-heights-internal assoc-in keypath size) + [:row :width] (swap! row-header-widths-internal assoc-in keypath size)))}}] (mapv u/deref-or-value [row-tree row-header-widths row-height column-tree column-header-heights column-width]) (let [theme @@ -114,23 +115,27 @@ row-width-resizers (for [i (range (if hide-root? 1 0) @row-depth)] ^{:key [::row-width-resizer i]} - [ngp/resizer {:on-resize on-resize - :overlay overlay - :dimension :row-header-width - :keypath [i] - :index i - :size (get @row-header-widths i row-header-width)}]) + [ngp/resizer {:on-resize on-resize + :overlay overlay + :header-dimension :row + :size-dimension :width + :dimension :row-header-width + :keypath [i] + :index i + :size (get @row-header-widths i row-header-width)}]) column-height-resizers (for [i (range (if hide-root? 1 0) @column-depth)] ^{:key [::column-height-resizer i]} - [ngp/resizer {:path (get @column-paths i) - :on-resize on-resize - :overlay overlay - :dimension :column-header-height - :keypath [i] - :index i - :size (get @column-header-heights i column-header-height)}]) + [ngp/resizer {:path (get @column-paths i) + :on-resize on-resize + :overlay overlay + :header-dimension :column + :size-dimension :height + :dimension :column-header-height + :keypath [i] + :index i + :size (get @column-header-heights i column-header-height)}]) row-height-resizers (fn [& {:keys [offset]}] @@ -140,13 +145,15 @@ :when (and (pos? size) (map? (peek row-path)))] ^{:key [::row-height-resizer i]} - [ngp/resizer {:path row-path - :offset offset - :on-resize on-resize - :overlay overlay - :keypath (get @row-keypaths i) - :size size - :dimension :row-height}])) + [ngp/resizer {:path row-path + :offset offset + :on-resize on-resize + :overlay overlay + :keypath (get @row-keypaths i) + :size size + :header-dimension :row + :size-dimension :height + :dimension :row-height}])) column-width-resizers (fn [& {:keys [offset style]}] @@ -154,14 +161,16 @@ :let [column-path (get @column-paths i)] :when (map? (peek column-path))] ^{:key [::column-width-resizer i]} - [ngp/resizer {:path column-path - :offset offset - :style style - :on-resize on-resize - :overlay overlay - :keypath (get @column-keypaths i) - :size (get @column-sizes i) - :dimension :column-width}])) + [ngp/resizer {:path column-path + :offset offset + :style style + :on-resize on-resize + :overlay overlay + :keypath (get @column-keypaths i) + :size (get @column-sizes i) + :header-dimension :column + :size-dimension :width + :dimension :column-width}])) row-headers (for [i (range (count @row-paths)) diff --git a/src/re_com/nested_v_grid/parts.cljs b/src/re_com/nested_v_grid/parts.cljs index ac06090a..31403453 100644 --- a/src/re_com/nested_v_grid/parts.cljs +++ b/src/re_com/nested_v_grid/parts.cljs @@ -43,7 +43,7 @@ :on-mouse-over #(reset! hover? true) :on-mouse-out #(reset! hover? false)}]))) -(defn drag-overlay [{:keys [x-start y-start on-mouse-move on-mouse-up dimension]}] +(defn drag-overlay [{:keys [x-start y-start on-mouse-move on-mouse-up size-dimension]}] (fn [_] [:div {:on-mouse-up on-mouse-up :on-mouse-move #(let [x (.-clientX %) @@ -59,46 +59,42 @@ :z-index 2147483647 :height "100%" :width "100%" - :cursor (case dimension - (:row-header-width :column-width) :col-resize - (:column-header-height :row-height) :row-resize :grab) + :cursor (case size-dimension :width :col-resize :height :row-resize :grab) #_#_:background-color "rgba(255,0,0,0.4)"}}])) -(defn resizer [{:keys [path keypath size offset overlay on-resize index dimension style]}] - (let [resize-dimension (case dimension - (:row-header-width :column-width) :w - (:row-height :column-header-height) :h)] - [:div {:class "rc-nested-v-grid-resizer" - :style (merge - {:position :relative} - (case resize-dimension - :w {:grid-row-start 1 - :grid-row-end -1 - :width 0 - :margin-left (+ size offset)} - :h {:grid-column-start 1 - :grid-column-end -1 - :height 0 - :margin-top (+ size offset)}) - (case dimension - :column-width {:grid-column-start (ngu/path->grid-line-name path)} - :column-header-height {:grid-row-start (inc index)} - :row-height {:grid-row-start (ngu/path->grid-line-name path)} - :row-header-width {:grid-column-start (inc index)}) - style)} - [grid-line-button - {:position (case resize-dimension :w :right :h :bottom) - :on-mouse-down (fn [e] - (reset! overlay [drag-overlay - {:x-start (.-clientX e) - :y-start (.-clientY e) - :dimension dimension - :on-mouse-up #(reset! overlay nil) - :on-mouse-move (fn [{:keys [dx dy]}] - (on-resize {:dimension dimension - :keypath keypath - :size (-> (case resize-dimension :w dx :h dy) - (+ size) - (max 10)) - :key :column-tree}))}]))}]])) +(defn resizer [{:keys [path keypath size offset overlay on-resize index header-dimension size-dimension style]}] + [:div {:class "rc-nested-v-grid-resizer" + :style (merge + {:position :relative} + (case size-dimension + :width {:grid-row-start 1 + :grid-row-end -1 + :width 0 + :margin-left (+ size offset)} + :height {:grid-column-start 1 + :grid-column-end -1 + :height 0 + :margin-top (+ size offset)}) + (case [header-dimension size-dimension] + [:column :width] {:grid-column-start (ngu/path->grid-line-name path)} + [:column :height] {:grid-row-start (inc index)} + [:row :height] {:grid-row-start (ngu/path->grid-line-name path)} + [:row :width] {:grid-column-start (inc index)}) + style)} + [grid-line-button + {:position (case size-dimension :width :right :height :bottom) + :on-mouse-down (fn [e] + (reset! overlay [drag-overlay + {:x-start (.-clientX e) + :y-start (.-clientY e) + :header-dimension header-dimension + :size-dimension :size-dimension + :on-mouse-up #(reset! overlay nil) + :on-mouse-move (fn [{:keys [dx dy]}] + (on-resize {:header-dimension header-dimension + :size-dimension size-dimension + :keypath keypath + :size (-> (case size-dimension :width dx :height dy) + (+ size) + (max 10))}))}]))}]]) diff --git a/src/re_demo/nested_grid.cljs b/src/re_demo/nested_grid.cljs index f1203e59..d394570c 100644 --- a/src/re_demo/nested_grid.cljs +++ b/src/re_demo/nested_grid.cljs @@ -877,19 +877,19 @@ :column-header-heights column-header-heights :show-row-branches? true :show-column-branches? true - :on-resize (fn [{:keys [dimension keypath size]}] - (case dimension - :column-header-height (swap! column-header-heights assoc-in keypath size) - :row-header-width (swap! row-header-widths assoc-in keypath size) - :row-height (swap! row-tree update-in keypath assoc :size size) - :column-width (swap! column-tree update-in keypath assoc :size size))) - :parts {:wrapper {:style {:height @wh - :width @ww}} + :on-resize (fn [{:keys [header-dimension size-dimension keypath size]}] + (case [header-dimension size-dimension] + [:column :height] (swap! column-header-heights assoc-in keypath size) + [:row :width] (swap! row-header-widths assoc-in keypath size) + [:row :height] (swap! row-tree update-in keypath assoc :size size) + [:column :width] (swap! column-tree update-in keypath assoc :size size))) + :parts {:wrapper {:style {:height @wh + :width @ww}} :cell-value #(str (gensym)) :row-header-label (fn [{:keys [row-path]}] (let [{:keys [is-after?]} (meta row-path) - the-label (get (last row-path) :label "placeholder")] + the-label (get (last row-path) :label "placeholder")] (if is-after? (str the-label " (Total)") the-label))) @@ -913,29 +913,35 @@ " is the parent, and " [:code ":b :c"] " are children. Explicitly, " "the branch function is " [:code "sequential?"] " and the children function is " [:code "rest"] "." - [:li " " [:strong "Header main-size can only declared in the tree."] - [:code ":row-height"] " and " [:code ":column-width"] - " are the main-sizes." - " For instance: " [:code ":row-tree [{:id :a} {:id :b} {:id :c :size 45}]"] - " makes three rows. The first two have a default height, and the third has " - "a height of 45."] - [:li [:strong "Header cross-size can be declared as a prop."] - [:code ":row-header-width"] " and " [:code ":column-header-height"] - " are the cross-sizes. You can pass an integer for either key, to control the " - " default cross-size. There are also plural props, " + [rc/title :level :level3 :label "Header main-size can only declared in the tree."] + [:code ":row-height"] " and " [:code ":column-width"] + " are the main-sizes." + " For instance: " [:code ":row-tree [{:id :a} {:id :b} {:id :c :size 45}]"] + " makes three rows. The first two have a default height, and the third has " + "a height of 45." + [rc/title :level :level3 :label "Header cross-size can be declared as a prop."] + [:p [:code ":row-header-width"] " and " [:code ":column-header-height"] + " are the cross-sizes. To control the default cross-size, pass an integer for either key. "] + [:p + "There are also plural props, " [:code ":row-header-widths"] " and " [:code ":column-header-heights"] ". " - "You can pass a vector of integers (or a reagent/atom), to control individual cross-sizes. " - "Each vector must be as long (or longer) than the corresponding maximum tree-depth. " + "To control each header's cross-size individually, pass a vector of integers (or a reagent/atom). " + "Each vector must be as long (or longer) than the corresponding maximum tree-depth. "] + [:p "For instance, " [:code ":row-tree [:apple [:banana 1 2] [:coconut 8 9]]"] " has a max depth of 3. " + "Note that keywords appear at tree depths 1 and 2, and numbers at a depth of 3. " "In this case, you can pass " [:code " :row-header-widths [40 40 20]"] ". " - "This would make the keyword headers 40-wide, and the number headers 20-wide."] - [:li [:strong "Tree depth must be specified."] + "This would make the keyword headers 40-wide, and the number headers 20-wide." + [rc/title :level :level3 :label [:span "To handle header size changes, use " [:code ":on-resize"] "."]] + [:p [:code ":on-resize"] " takes keyword arguments:" + [:ul + [:li [:code ":dimension"] " - which sort of ]]]"]]] [:strong [:code ":row-tree-depth"] " and " [:code ":column-tree-depth"]] - "are required props."] - [:li [:strong "Tree roots are hidden by default."] " For instance, " [:code ":row-tree [:a [:b 1 2] [:c 8 9]]"] + "are required props." + [rc/title :level :level3 :label "Tree roots are hidden by default."] + " For instance, " [:code ":row-tree [:a [:b 1 2] [:c 8 9]]"] " displays " [:code ":b :c"] " as two top-level headers, each with two children." - "The root node, " [:code ":a"] ", is hidden."] - #_[:li "B"]]]]) + "The root node, " [:code ":a"] ", is hidden."]]]]) (defn demos [] (let [tabs [(when goog/DEBUG