Skip to content

Commit

Permalink
Add debugging features for nested-grid cells
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimo-k
kimo-k committed Oct 3, 2024
1 parent 3db9f67 commit 6a574c5
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 21 deletions.
12 changes: 11 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,20 @@

> Committed but unreleased changes are put here, at the top. Older releases are detailed chronologically below.
#### Added

- New closure-define, `re-com.config/debug-parts?` (boolean): overrides goog.DEBUG to enable some debug features.
Currently, this only affects nested-grid. You can alt-click any cell to log its props.
- New closure-define, `re-com.config/log-format` (string): how to log. Options:
- "js": js console (default)
- "pr-str" plain-text, pr-str
- "pretty" plain-text, pprint

#### Fixed

- `nested-grid` - Fixed `:show-export-button?` prop.
- `nested-grid` - Fix `:show-export-button?` prop.
- `nested-grid` - Fix alignment when declared in column-header
- `nested-grid` - Fix sticky-top when `:sticky?` is true

## 2.22.1 (2024-10-01)

Expand Down
4 changes: 4 additions & 0 deletions src/re_com/config.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@

(goog-define root-url-for-compiler-output "")

(goog-define debug-parts? true)

(goog-define log-format "js")

;; When include-args-desc? is true, the data structures for arguments and parts will be included in the output JS file,
;; otherwise they will not be included.
(def ^boolean include-args-desc?
Expand Down
24 changes: 22 additions & 2 deletions src/re_com/debug.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,21 @@
(ns re-com.debug
(:require-macros
[re-com.core :refer [handler-fn]])
(:require
[cljs.pprint :refer [pprint]]
[goog.object :as gobj]
[cljs.reader :refer [read-string]]
[clojure.string :as string]
[reagent.core :as r]
[reagent.impl.component :as component]
[re-com.config :refer [debug? root-url-for-compiler-output]]))
[re-com.config :refer [debug? debug-parts? root-url-for-compiler-output log-format]]))

(def log
(case (some-> log-format name)
"pr-str" (comp js/console.log pr-str)
"js" js/console.log
"pretty" pprint
js/console.log))

(defn short-component-name
"Returns the interesting part of component-name"
Expand All @@ -27,12 +37,22 @@
[args]
(if (map? args)
(->> ;; Remove args already represented in component hierarchy
(dissoc args :src :child :children :panel-1 :panel-2 :debug-as)
(dissoc args :src :child :children :panel-1 :panel-2 :debug-as :theme :cell :edge)
;; Remove args with nil value
(remove (comp nil? second))
(into {}))
args))

(defn log-on-alt-click* [event & {:as args}]
(when (.-ctrlKey event) (log args)))

(defn log-on-alt-click [{:as args} & {:keys [show-all-args?] :or {show-all-args? false}}]
(if debug?
(handler-fn (log-on-alt-click* event (cond-> args (not show-all-args?) loggable-args)))
(if debug-parts?
(handler-fn (log-on-alt-click* event (cond-> args (not show-all-args?) loggable-args)))
nil)))

(defn ->attr
[{:keys [src debug-as] :as args}]
(if-not debug? ;; This is in a separate `if` so Google Closure dead code elimination can run...
Expand Down
37 changes: 19 additions & 18 deletions src/re_com/nested_grid.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
[re-com.util :as u :refer [px deref-or-value]]
[reagent.core :as r]
[re-com.debug :as debug]
[re-com.config :refer [debug? include-args-desc?]]
[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.box :as box]
Expand Down Expand Up @@ -505,17 +505,15 @@
(defn cell [{:keys [value]}]
(str value))

(defn debug-click [event props]
(when (.-altKey event)
(debug/log (pr-str (select-keys props [:column-path :row-path])))))

(defn cell-wrapper [{:keys [column-path row-path theme children] :as props}]
(defn cell-wrapper [{:keys [column-path row-path class style attr theme children] :as props}]
(into
[:div
(-> {:on-click (when debug? (handler-fn (debug-click event props)))
:style {:grid-column (path->grid-line-name column-path)
:grid-row (path->grid-line-name row-path)}}
(theme/apply {:part ::cell-wrapper} theme))]
(-> {:on-click (debug/log-on-alt-click props)
:class class
:style (merge {:grid-column (path->grid-line-name column-path)
:grid-row (path->grid-line-name row-path)}
style)}
(merge attr))]
children))

(defn header-label [{:keys [path]}]
Expand Down Expand Up @@ -620,8 +618,8 @@
(let [grid-style {:grid-column (inc x)
:grid-row (inc y)}]
[:div (theme/apply
{:style grid-style
:on-click (when debug? (handler-fn (debug-click event props)))}
{:style grid-style
:on-click (debug/log-on-alt-click props)}
{:state {:edge edge} :part ::header-spacer-wrapper}
theme)
(u/part header-spacer
Expand Down Expand Up @@ -696,7 +694,8 @@
on-export-cell on-export-column-header on-export-row-header
show-zebra-stripes?
show-selection-box? resize-columns? resize-rows?
sticky? sticky-left sticky-top]
sticky? sticky-left sticky-top
debug-parts?]
:or {column-header-height 25
column-width 55
row-header-width 80
Expand All @@ -714,7 +713,8 @@
on-export-row-header header-label
resize-columns? true
resize-rows? false
theme-cells? true}}
theme-cells? true
debug-parts? (or config/debug? config/debug-parts?)}}
(theme/top-level-part passed-in-props ::nested-grid)
theme (theme/defaults
props
Expand Down Expand Up @@ -940,7 +940,7 @@
(u/part column-header-wrapper
(-> props
(merge {:children children})
(merge (when debug? {:attr {:on-click (handler-fn (debug-click event props))}}))
(merge {:attr {:on-click (debug/log-on-alt-click props)}})
(theme/apply {:part ::column-header-wrapper} theme)))
(when (and resize-columns? show?)
[resize-button (merge props {:mouse-down-x mouse-down-x
Expand Down Expand Up @@ -989,7 +989,7 @@
(u/part row-header-wrapper
(-> props
(merge {:children children})
(merge (when debug? {:attr {:on-click (handler-fn (debug-click event props))}}))
(merge {:attr {:on-click (debug/log-on-alt-click props)}})
(theme/apply {:part ::row-header-wrapper} theme)))
(when (and resize-rows? show?)
[resize-button (merge props {:mouse-down-x mouse-down-x
Expand Down Expand Up @@ -1022,7 +1022,9 @@
:row-path row-path
:column-path column-path}
cell-value
(merge {:value (cell-value {:column-path column-path :row-path row-path})}))])
(merge {:value (cell-value {:column-path column-path :row-path row-path})})
debug-parts?
(merge {:attr {:on-click (re-com.debug/log-on-alt-click props)}}))])
(for [row-path showing-row-paths
column-path showing-column-paths
:let [edge (cond-> #{}
Expand Down Expand Up @@ -1182,4 +1184,3 @@
row-headers
cells)
overlays]))))

0 comments on commit 6a574c5

Please sign in to comment.