[nested-v-grid] Fix layout & pathing bugs

Author: kimo-k

run/resources/public/assets/css/re-com.css

@@ -1565,9 +1565,8 @@ code {
     font-size: 13px;
     background-color: #eee;
     color: #777;
-    padding-top: 3px;
     padding-right: 3px;
-    padding-left: 3px;
+    padding-left: 6px;
     text-align: left;
     border-bottom: thin solid #ccc;
     border-left: thin solid #ccc;
@@ -1585,15 +1584,13 @@ code {
 }
 
 .rc-nested-v-grid-column-header-grid > div:not(.rc-nested-v-grid-resizer) {
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     user-select: none;
     font-size: 13px;
     background-color: #eee;
     color: #777;
-    padding-top: 3px;
-    padding-right: 3px;
-    padding-left: 3px;
     text-align: center;
     border-top: thin solid #ccc;
     border-right: thin solid #ccc;

src/re_com/nested_v_grid.cljs

@@ -650,7 +650,7 @@
                                 path-ct               (count column-path)
                                 end-path              (some #(when (= (count %) path-ct) %)
                                                             (drop (inc i) @column-paths))
-                                {:keys [branch-end?]} (meta column-path)
+                                {:keys [branch-end? branch? leaf?]} (meta column-path)
                                 column-path-prop      (cond-> column-path (not show-root-headers?) (subvec 1))]
                      #_#_:when (not branch-end?)
                      :let      [props {:part        ::column-header
@@ -659,7 +659,10 @@
                                        :branch-end? branch-end?
                                        :keypath     (get @column-keypaths i)
                                        :style       {:grid-column-start (ngu/path->grid-line-name column-path)
-                                                     :grid-column-end   (ngu/path->grid-line-name end-path)
+                                                     :grid-column-end   (cond
+                                                                          end-path (ngu/path->grid-line-name end-path)
+                                                                          leaf?    "span 1"
+                                                                          :else    "-1")
                                                      :grid-row-start    (cond-> (count column-path)
                                                                           branch-end?              dec
                                                                           (not show-root-headers?) dec)
@@ -705,10 +708,16 @@
                cells
                (for [row-path    @row-paths
                      column-path @column-paths
-                     :when       (and ((some-fn :leaf? :show?) (meta row-path))
-                                      ((some-fn :leaf? :show?) (meta column-path)))
-                     :let        [props {:row-path    (cond-> row-path show-root-headers? (subvec 1))
-                                         :column-path (cond-> column-path show-root-headers? (subvec 1))
+                     :let        [row-meta (meta row-path)
+                                  column-meta (meta column-path)]
+                     :when       (and ((some-fn :leaf? :show?) row-meta)
+                                      ((some-fn :leaf? :show?) column-meta))
+                     :let        [props {:row-path    (cond-> row-path
+                                                        (not show-root-headers?) (subvec 1)
+                                                        (:branch-end? row-meta) pop)
+                                         :column-path (cond-> column-path
+                                                        (not show-root-headers?) (subvec 1)
+                                                        (:branch-end? column-meta) pop)
                                          :style       {:grid-row-start    (ngu/path->grid-line-name row-path)
                                                        :grid-column-start (ngu/path->grid-line-name column-path)}}
                                   props (merge props
@@ -724,12 +733,7 @@
               :after-props {:style style
                             :class class}
               :props
-              {:style {:height                300
-                       :width                 500
-                       :overflow              :auto
-                       :flex                  "0 0 auto"
-                       :display               :grid
-                       :grid-template-rows    (ngu/grid-cross-template [@column-header-height-total @row-height-total])
+              {:style {:grid-template-rows    (ngu/grid-cross-template [@column-header-height-total @row-height-total])
                        :grid-template-columns (ngu/grid-cross-template [@row-header-width-total @column-width-total])}
                :attr  {:ref wrapper-ref!}
                :children

src/re_com/nested_v_grid/parts.cljs

@@ -12,9 +12,10 @@
 
 (defn header-label [{:keys [path]}]
   (let [spec (peek path)]
-    (or (:label spec)
-        (some-> spec :id str)
-        (some-> spec str))))
+    [:div
+     (or (:label spec)
+         (some-> spec :id str)
+         (some-> spec str))]))
 
 (def row-header-label header-label)
 

src/re_com/nested_v_grid/theme.cljs

@@ -11,9 +11,7 @@
 (defn style [props & ms] (apply update props :style merge ms))
 
 (defmethod base ::nvg/wrapper [props]
-  (style props {:height   300
-                :width    "100%"
-                :overflow :auto
+  (style props {:overflow :auto
                 :flex     "1 1 auto"
                 :display  :grid}))
 
@@ -52,7 +50,7 @@
      :padding-left     sm-4
      :background-color light-background
      :color            "#666"
-     :font-size        "13px"
+     :font-size        13
      :text-overflow    :ellipsis
      :overflow         :hidden
      :white-space      :nowrap}))

src/re_com/nested_v_grid/util.cljc

@@ -87,6 +87,7 @@
                                        own-path   (conj path (get-header-spec node))
                                        own-size   (walk path (get-header-spec node) {:collect-anyway? true
                                                                                      :is-leaf?        is-leaf?
+                                                                                     :branch-path?    (not is-leaf?)
                                                                                      :keypath         (conj keypath 0)
                                                                                      :branch-end?     branch-end?
                                                                                      :last-child?     last-child?})
@@ -124,6 +125,7 @@
                                                   (or is-leaf? show-above?)
                                                   (vary-meta merge {}
                                                              (when is-leaf? {:leaf? true})
+                                                             (when-not is-leaf? {:branch? true})
                                                              (when branch-end? {:branch-end? true})
                                                              (when show-above? {:show-above? true})
                                                              (when last-child? {:last-child? true})))]