Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-02 12:28:54 -05:00
Code Issues Activity

📚 Update documentation of frontend debug utils

Browse source
This commit is contained in:
Andrés Moya 2020-05-12 12:50:23 +02:00
parent b2b84de10e
commit 225b6a8f1c
2 changed files with 28 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
docs/02-Frontend-Developer-Guide.md
View file

@ -3,6 +3,16 @@
This guide intends to explain the essential details of the frontend This guide intends to explain the essential details of the frontend
application. application.
## Access to clojure from javascript console
The uxbox namespace of the main application is exported, so that is accessible from
javascript console in Chrome developer tools. Object names and data types are converted
to javascript style. For example you can emit the event to reset zoom level by typing
this at the console (there is autocompletion for help):
```javascript
uxbox.main.store.emit_BANG_(uxbox.main.data.workspace.reset_zoom)
```
## Visual debug mode and utilities ## Visual debug mode and utilities
@ -10,26 +20,22 @@ Debugging a problem in the viewport algorithms for grouping and rotating
is difficult. We have set a visual debug mode that displays some is difficult. We have set a visual debug mode that displays some
annotations on screen, to help understanding what's happening. annotations on screen, to help understanding what's happening.
To activate it, open the REPL (`shadow-cljs cljs-repl main`) and type To activate it, open the javascript console and type
```clojure ```javascript
(ns uxbox.util.debug) uxbox.util.debug.toggle_debug("option")
(debug-all!) ; to enable all visual aids
(debug! <option>) ; current options are :bounding-boxes :group :events :rotation-handler
``` ```
Current options are `bounding-boxes`, `group`, `events` and `rotation-handler`.
Then you need to refresh the screen, for example by selecting some shape You can also activate or deactivate all visual aids with
with the mouse. ```javascript
uxbox.util.debug.debug_all()
You can deactivate debug mode with uxbox.util.debug.debug_none()
```clojure
(debug-none!) ; to disable all visual aids
(-debug! <option>) ; to disable only one
``` ```
## Debug state and objects ## Debug state and objects
There are also some useful functions to visualize the global state or any There are also some useful functions to visualize the global state or any
complex object: complex object. To use them from clojure:
```clojure ```clojure
(ns uxbox.util.debug) (ns uxbox.util.debug)
@ -41,6 +47,13 @@ complex object:
(dump-objects) ; to print in console all objects in workspace (dump-objects) ; to print in console all objects in workspace
``` ```
But last ones are most commonly used from javscript console:
```
uxbox.main.store.dump_state()
uxbox.main.store.dump_objects()
```
## Icons & Assets ## Icons & Assets

3
frontend/src/uxbox/util/debug.cljs
View file

@ -16,7 +16,8 @@
(if (debug? option) (if (debug? option)
(-debug! option) (-debug! option)
(debug! option)))) (debug! option))))
(defn ^:export debug-all [name] (debug-all!)) (defn ^:export debug-all [] (debug-all!))
(defn ^:export debug-none [] (debug-none!))
(defn ^:export tap (defn ^:export tap
"Transducer function that can execute a side-effect `effect-fn` per input" "Transducer function that can execute a side-effect `effect-fn` per input"