Skip to content

Commit

Permalink
[nested-v-grid] Change :on-resize semantics
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimo-k
kimo-k committed Jan 6, 2025
1 parent e9eaa92 commit e53119c
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 99 deletions.
71 changes: 40 additions & 31 deletions src/re_com/nested_v_grid.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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]}]
Expand All @@ -140,28 +145,32 @@
: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]}]
(for [i (range (count @column-paths))
: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))
Expand Down
78 changes: 37 additions & 41 deletions src/re_com/nested_v_grid/parts.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %)
Expand All @@ -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))}))}]))}]])

60 changes: 33 additions & 27 deletions src/re_demo/nested_grid.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)))
Expand All @@ -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
Expand Down

0 comments on commit e53119c

Please sign in to comment.