Add Grid view to #64

[tomcrane]

This demo application demonstrates when to use Canvas Panel, and possibly when not to - when the functionality is higher up.

Question - for grid view, are we looking at:

• a field of canvases, composited on a synthetic canvas
• a field of thumbnail images, composited on a synthetic canvas
• just thumbnail images, flowing normally, not on a Canvas (no CP in that shot)

[stephenwf]

From Atlas' point of view, I think the questions could be reframed. You could model that thumbnail list in Atlas and write a renderer for it. Perhaps the renderer will rely on the browser and HTML (flexbox or css grid) for the flow of the objects, and then rely on the positions for the images.

This type of renderer could choose to support as much or as little of the features Atlas provides. Such as composition and layering of images:

<div class="canvas-listing">
  <div class="canvas-thumbnail">
    <!-- single image, full -->
    <img src=" ... " />
  </div>

  <div class="canvas-thumbnail canvas-thumbnail--composite">
     <!-- multiple images or tiles -->
    <img src=" ... " style="top: 0; left: 0; height: 100%; width: 100%"/>
    <img src=" ... " style="top: 5%; left: 24%; height: 30%; width: 11.2%"/>

    <!-- annotations ? -->
    <div class="annotation" style=" ... " />
  </div>
  ...
</div>

The benefit of the upfront effort to create a renderer like this would be choices like "which image to load and show" are automatically handled - no thumbnails, we'll use the tiles. Lazy loading is handled. Events are handled in the same way. You could paint annotations etc. etc.

So the rendering output of Canvas panel and Atlas don't need to be black boxes, or single monolithic canvas elements.