Global drawing (callback after drawing)

[edemaine]

The idea is to provide a callback that gets called after the tiling/drawing job is complete, so that additional "global" layers can be drawn below/above the "main" drawing. Possible interface:

export globalDrawing = (drawing) -> ...

Example use cases:

• Want to draw a big background rectangle behind everything. (generalization of Background #57)

  export globalDrawing = (drawing) ->
    <rect z-index="-10" x={drawing.minX} y={drawing.minY}
     width={drawing.width} height={drawing.height} fill="purple"/>

• Draw a graph overlay over chess pieces.

  export globalDrawing = (drawing) ->
    <g z-index="100">{
      for piece in drawing.tiles when isPiece piece.key
        for attackable in ...
          <line x1={piece.centerX} y1={piece.centerY}
                x2={attackable.centerX} y2={attackable.centerY}/>
    }</g>

The drawing and the symbols have already been laid out so have min/max/center coordinates defined.

We can use top-level z-index to specify how the global drawing relates to other symbols (overlay/underlay), though there isn't a wrapping <symbol> in this case.

For symmetry with #79, could maybe be called afterDrawing.

[diomidov]

Another way to implement this would be to call the mapping with fake symbols ::before and ::after before and after each drawing. ::before could also be used for sideeffectful initialization.

[edemaine]

Funny, I misinterpreted this as an approach to #33 (multiple layers in a symbol), by rendering an x::before, then x, then x::after when we see tile x.

I'm not sure it makes sense to implement a global symbols ::before/::after, because global drawing feels fundamentally different from a regular symbol. Presumably you want to interact with the whole grid, not just a particular context object. And you'd need to use code to look at the width and height of the drawing at least (for all the applications I can think of, even just adding a <rect> in the background). So it doesn't really make sense to have these global drawings in e.g. .txt mapping file; you really need to use JS/CS code for them to make sense. (Unless I'm missing a use-case?)

[diomidov]

For #33 I would prefer not to limit it to just 3 layers.

Yes, this would only be useful for script mappings.

After thinking about it some more, I agree that separate exports are better.

[edemaine]

I ended up implementing this as an API call svgtiler.afterRender, so you can add multiple over/underlays if you want.