@peter.prib/renderengine 0.2.0 → 0.2.2

package/README.md

@@ -7,6 +7,8 @@ Open an Archi model, edit it the way you would in Archi, and save it back to the
 installing anything. Or put the same editor in your own app: it's a JavaScript library and a set of workbench parts,
 not a desktop application.
 
+![The ArchiMate modeller: a layered view of an online shop, the model tree by layer with each type's picture, and the palette](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/archimate-modeller.png)
+
 ---
 
 ## Try it
@@ -121,6 +123,8 @@ of them for its own palettes:
 
 Each model can hold several diagrams, with line styles inherited from the diagram, then the model, then the tool.
 
+![The diagram editor: an order flowchart with a decision, labelled lines and the flowchart palette](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/diagram-editor.png)
+
 ## The chart library
 
 The engine underneath draws 24 chart types: bar, line, area, pie, scatter, bubble, heatmap, candlestick,
@@ -128,6 +132,10 @@ waterfall, histogram, box plot, violin, radar, funnel, treemap, sunburst, gauges
 draws graph and railroad diagrams, all to SVG or Canvas. `test/charts.html` is the full gallery, and
 `examples/csv-chart-builder.html` builds a chart from a CSV file without code.
 
+![Gauges: a dial with bands, ticks and a target; arc, ring and nested rings; a two-needle dial; LED segments; a thermometer; KPI tiles with sparklines](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/gauges.png)
+
+![Charts from the gallery: bar, grouped bar, line and line with error bars](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/charts.png)
+
 ---
 
 ## Put it in your own page
@@ -189,6 +197,7 @@ UI at all.
 npm install        # dev tools only: Rollup
 npm run build      # dist/renderengine.umd.js and dist/renderengine-workspace.umd.js
 npm test           # Node's built-in test runner, no browser needed
+npm run screenshots  # this README's pictures, from the example pages (headless Chrome)
 ```
 
 There are two bundles:

package/REFERENCE.md

@@ -27,6 +27,13 @@ const headless = new RenderEngine(null); // test mode — every chart call no-op
   a 3D-orbit chart's own drag-to-rotate/wheel-to-zoom takes over instead — see below).
 - Both renderers sit behind one primitive API (`rect`/`circle`/`path`/`text`/`line`/…) — every
   `Chart` subclass is renderer-agnostic, so any `xChart()` call below works unchanged under either.
+- **Size.** The renderer takes the container's size once, when the engine is made. Call
+  `engine.fitToContainer()` before drawing in a container that may since have been resized or
+  was hidden then (it measured 0×0): it re-measures and resizes the renderer, returning whether
+  the size changed, and does nothing while the container is still 0×0. An SVG diagram that set
+  its own viewBox keeps it and scales into the new box; a canvas is cleared, so draw after.
+  Without it, a drawing made in a narrower or hidden pane stayed that size — clipped, or blank
+  until the page was reloaded.
 
 ## The rendering model (read this before the streaming section)