Skip to content

Commit

Permalink
beforeMapping and afterMapping (fix #79, fix #81)
Browse files Browse the repository at this point in the history
* `beforeMapping` to preprocess a drawing render (#79)
* `afterMapping` to postprocess and optionally add
  overlay/underlay content (#81)
* `Render` gains `xMin`, `xMax`, `yMin`, `yMax`, `width`, `height`,
  and `layers` attributes.
  • Loading branch information
edemaine committed Sep 13, 2022
1 parent 59c1259 commit 62f8b26
Show file tree
Hide file tree
Showing 7 changed files with 126 additions and 75 deletions.
21 changes: 21 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,27 @@ The `Context` object has the following properties and methods:
functions within the same drawing (but not between separate drawings).
This can be useful for drawing-specific state.

The top-level code of your .js or .coffee mapping file can also call:

* `beforeRender(callback)` to schedule calling `callback(render)`
before rendering each drawing, e.g.,
to initialize drawing-specific data or globally examine the drawing.
The `callback`'s argument (and `this`) is set to a `Render` instance,
which in particular has `drawing`, `mappings`, and `styles` attributes.
You can even modify the drawing's `keys` at this stage,
by modifying `render.drawing.keys`.
* `afterRender(callback)` to schedule calling `callback(render)`
after rendering each drawing. In particular,
to render an overlay or underlay, return the content to render
as a string or Preact VDOM (ideally in an `<svg>` wrapper).
Specify a [`z-index`](#z-index-stacking-order-of-tiles)
to control the stacking order relative to other symbols
or overlays/underlays.
Specify [`overflowBox`](#overflow-and-bounding-box) to increase the
overall size of the rendered drawing.
During the callback, `render` has properties about the rendering's
bounding box: `xMin`, `xMax`, `yMin`, `yMax`, `width`, `height`.

Like other [NodeJS modules](https://nodejs.org/api/modules.html),
.js and .coffee files can access `__dirname` and `__filename`,
e.g., to use paths relative to the mapping file.
Expand Down
1 change: 1 addition & 0 deletions examples/chess/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
* Using `require` to load and modify external SVG files
(strip off unnecessary `<svg>` wrapper)
* JSX notation for creating and composing symbols
* `svgtiler.afterRender` for rendering a background

## Piece Shapes

Expand Down
24 changes: 4 additions & 20 deletions examples/chess/board-immortal.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 62f8b26

Please sign in to comment.