Feature/clear cache on dispose

docs/examples/src/ex-00100-simple-plot.ts

@@ -10,7 +10,6 @@ import CandyGraph, {
   createCartesianCoordinateSystem,
 } from "../../../src";
 
-
 export default async function SimplePlot(cg: CandyGraph) {
   // Generate some x & y data.
   const xs = [];
@@ -35,6 +34,7 @@ export default async function SimplePlot(cg: CandyGraph) {
   // that we add 32 pixels of padding to the left and bottom
   // of the viewport, and 16 pixels to the top and right.
   const coords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([0, 1], [32 * dpr, viewport.width - 16 * dpr]),
     createLinearScale([0, 1], [32 * dpr, viewport.height - 16 * dpr])
   );
@@ -73,4 +73,4 @@ export default async function SimplePlot(cg: CandyGraph) {
 
   // Copy the plot to a new canvas and add it to the document.
   cg.copyTo(viewport, document.getElementById("ex-00100") as HTMLCanvasElement);
-}
+}

docs/examples/src/ex-00200-simple-plot-points.ts

@@ -38,6 +38,7 @@ export default async function SimplePlotPoints(cg: CandyGraph) {
   // that we add 32 pixels of padding to the left and bottom
   // of the viewport, and 16 pixels to the top and right.
   const coords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([0, 1], [32 * dpr, viewport.width - 16 * dpr]),
     createLinearScale([0, 1], [32 * dpr, viewport.height - 16 * dpr])
   );

docs/examples/src/ex-00250-area-chart.ts

@@ -45,6 +45,7 @@ export default async function Area(cg: CandyGraph) {
   // that we add 32 pixels of padding to the left and bottom
   // of the viewport, and 16 pixels to the top and right.
   const coords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([0, 100], [32 * dpr, viewport.width - 16 * dpr]),
     createLinearScale([0, 100], [32 * dpr, viewport.height - 16 * dpr])
   );

docs/examples/src/ex-00300-bar-graph.ts

@@ -84,6 +84,7 @@ export default async function BarGraph(cg: CandyGraph) {
   const viewport = { x: 0, y: 0, width: 512 * dpr, height: 1024 * dpr };
 
   const coords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([0, 40000000], [160 * dpr, viewport.width - 24 * dpr]),
     createLinearScale([-0.75, keys.length - 1], [32 * dpr, viewport.height - 48 * dpr])
   );

docs/examples/src/ex-00350-scatter-plot.ts

@@ -17,8 +17,7 @@ export default async function ScatterPlot(cg: CandyGraph) {
   for (let i = 0; i < 10000; i++) {
     const x = Math.random();
     const y = x;
-    const d =
-      0.8 * (Math.random() - 0.5) * Math.pow(Math.sin(x * Math.PI), 2.0);
+    const d = 0.8 * (Math.random() - 0.5) * Math.pow(Math.sin(x * Math.PI), 2.0);
     xs.push(x - d);
     ys.push(y + d);
   }
@@ -38,6 +37,7 @@ export default async function ScatterPlot(cg: CandyGraph) {
   // that we add 32 pixels of padding to the left and bottom
   // of the viewport, and 16 pixels to the top and right.
   const coords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([0, 1], [32 * dpr, viewport.width - 16 * dpr]),
     createLinearScale([0, 1], [32 * dpr, viewport.height - 16 * dpr])
   );

docs/examples/src/ex-00360-scatter-plot-zoom.ts

@@ -48,6 +48,7 @@ export default async function ScatterPlotZoomPan(cg: CandyGraph) {
   // that we add 32 pixels of padding to the left and bottom
   // of the viewport, and 16 pixels to the top and right.
   const coords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([0, 1], [32 * dpr, viewport.width - 16 * dpr]),
     createLinearScale([0, 1], [32 * dpr, viewport.height - 16 * dpr])
   );

docs/examples/src/ex-00375-pie-chart.ts

@@ -65,6 +65,7 @@ export default async function PieChart(cg: CandyGraph) {
   ];
 
   const coords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([-1, 1], [0, viewport.width]),
     createLinearScale([-1, 1], [0, viewport.height])
   );

docs/examples/src/ex-00400-linear-log.ts

@@ -24,6 +24,7 @@ export default async function LinearLog(cg: CandyGraph) {
   const viewport = { x: 0, y: 0, width: 384 * dpr, height: 384 * dpr };
 
   const coords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([0, 1], [40 * dpr, viewport.width - 16 * dpr]),
     createLogScale(10, [1, 100000], [32 * dpr, viewport.height - 16 * dpr])
   );

docs/examples/src/ex-00500-relative-time.ts

@@ -39,10 +39,12 @@ export default async function RelativeTime(cg: CandyGraph) {
   // them.
   const yScale = createLinearScale([0, 25], [32 * dpr, viewport.height - 16 * dpr]);
   const axisCoords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([-1, 5], [16 * dpr, viewport.width - 16 * dpr]),
     yScale
   );
   const timeCoords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([-1, 5], [16 * dpr, viewport.width - 16 * dpr]),
     yScale
   );

docs/examples/src/ex-00600-time-and-state.ts

@@ -33,10 +33,12 @@ export default async function TimeAndState(cg: CandyGraph) {
   // them.
   const yScale = createLinearScale([0, 25], [32 * dpr, viewport.height - 16 * dpr]);
   const axisCoords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([-5, 0], [16 * dpr, viewport.width - 32 * dpr]),
     yScale
   );
   const timeCoords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([-5, 0], [16 * dpr, viewport.width - 32 * dpr]),
     yScale
   );

docs/examples/src/ex-00700-multi-viewport.ts

@@ -22,11 +22,13 @@ export default async function MultiViewport(cg: CandyGraph) {
   canvas.height *= dpr;
 
   const coordstop = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([0, 10], [40 * dpr, 256 * dpr - 16 * dpr]),
     createLinearScale([0, 10], [16 * dpr, 256 * dpr - 40 * dpr])
   );
 
   const coordsbottom = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([0, 10], [40 * dpr, 256 * dpr - 16 * dpr]),
     createLinearScale([0, 10], [40 * dpr, 256 * dpr - 16 * dpr])
   );
@@ -128,6 +130,7 @@ export default async function MultiViewport(cg: CandyGraph) {
   ]);
 
   const coordsbig = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([0, 10], [40 * dpr, 512 * dpr - 40 * dpr]),
     createLinearScale([0, 10], [32 * dpr, 512 * dpr - 32 * dpr])
   );

docs/examples/src/ex-00800-health-and-wealth.ts

@@ -29,11 +29,13 @@ export default async function HealthAndWealth(cg: CandyGraph): Promise<void> {
   const viewport = { x: 0, y: 0, width: canvas.width, height: canvas.height };
 
   const coords = createCartesianCoordinateSystem(
+    cg,
     createLogScale(10, [100, 100000], [64 * dpr, viewport.width - 20 * dpr]),
     createLinearScale([10, 90], [48 * dpr, viewport.height - 60 * dpr])
   );
 
   const screenCoords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([0, canvas.width], [0, canvas.width]),
     createLinearScale([0, canvas.height], [0, canvas.height])
   );

docs/examples/src/ex-00900-polar-plot.ts

@@ -35,6 +35,7 @@ export default async function PolarPlot(cg: CandyGraph) {
   // polar distance and angle (in radians), the next two map the resulting
   // cartesian coordinates to pixels.
   const coords = createPolarCoordinateSystem(
+    cg,
     createLinearScale([0, 1], [0, 1]), // radial scale
     createLinearScale([0, 1], [0, 1]), // angular scale
     createLinearScale([-1.1, 1.1], [16 * dpr, viewport.width - 16 * dpr]), // x scale

docs/examples/src/ex-01000-interleaved-line-segments.ts

@@ -2,11 +2,7 @@
 // <canvas id="ex-10000" style="box-shadow: 0px 0px 8px #ccc;" width=384 height=384></canvas>
 
 // skip-doc-start
-import CandyGraph, {
-  createLinearScale,
-  createLineSegments,
-  createCartesianCoordinateSystem,
-} from "../../../src";
+import CandyGraph, { createLinearScale, createLineSegments, createCartesianCoordinateSystem } from "../../../src";
 
 export default function InterleavedLineSegments(cg: CandyGraph) {
   // Scale the canvas by the device pixel ratio.
@@ -20,6 +16,7 @@ export default function InterleavedLineSegments(cg: CandyGraph) {
   const viewport = { x: 0, y: 0, width: 384 * dpr, height: 384 * dpr };
 
   const coords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([0, 1], [0, viewport.width]),
     createLinearScale([0, 1], [0, viewport.height])
   );

docs/examples/src/ex-01100-shapes.ts

@@ -22,6 +22,7 @@ export default function Shapes(cg: CandyGraph) {
   const viewport = { x: 0, y: 0, width: 384 * dpr, height: 384 * dpr };
 
   const coords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([0, 2 * Math.PI], [0, viewport.width]),
     createLinearScale([-1, 1], [0, viewport.height])
   );
@@ -45,12 +46,7 @@ export default function Shapes(cg: CandyGraph) {
     xs.push(x);
     ys0.push(Math.sin(x));
     ys1.push(Math.cos(x));
-    colors.push(
-      Math.random() * 0.75 + 0.25,
-      Math.random() * 0.75 + 0.25,
-      Math.random() * 0.75 + 0.25,
-      1
-    );
+    colors.push(Math.random() * 0.75 + 0.25, Math.random() * 0.75 + 0.25, Math.random() * 0.75 + 0.25, 1);
     const scale = (1 + Math.random() * 2) * dpr;
     scales.push(scale, scale);
     rotations.push(Math.random() * 2 * Math.PI);

docs/examples/src/ex-01200-interleaved-shapes.ts

@@ -21,6 +21,7 @@ export default function InterleavedShapes(cg: CandyGraph) {
   const viewport = { x: 0, y: 0, width: 384 * dpr, height: 384 * dpr };
 
   const coords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([0, 1], [0, viewport.width]),
     createLinearScale([0, 1], [0, viewport.height])
   );

docs/examples/src/ex-01300-precision.ts

@@ -38,6 +38,7 @@ export default async function PrecisionPlot(cg: CandyGraph) {
 
   // Create a coordinate system from two linear scales.
   const coords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([0, 1], [56 * dpr, viewport.width - 16 * dpr]),
     createLinearScale([0, 1], [108 * dpr, viewport.height - 24 * dpr])
   );

docs/tutorial/dist/index.html

@@ -63,7 +63,7 @@ <h2>Viewport, Scale, and Coordinates</h2>
 <p>Now that we have our scales, we can create a coordinate system. Coordinate
 systems in CandyGraph wrap scales and add a little more GLSL glue code for
 use on the GPU. Here we’ll create a cartesian coordinate system:</p>
-<pre><code class="language-typescript">  const coords = createCartesianCoordinateSystem(xscale, yscale);
+<pre><code class="language-typescript">  const coords = createCartesianCoordinateSystem(cg, xscale, yscale);
 </code></pre>
 <p>Next we’re going to make some data for our plot. We’ll loop through 0 to 2π
 with a small increment for our x-values, and calculate the sine of each of
@@ -93,10 +93,7 @@ <h2>Viewport, Scale, and Coordinates</h2>
 been added to the DOM. Instead of doing that, we’ll use the <code>copyTo</code>
 utility function to copy it to the canvas we mentioned earlier, which has
 <code>id=&quot;doc_00100&quot;</code> defined:</p>
-<pre><code class="language-typescript">  cg.copyTo(
-    viewport,
-    document.getElementById(&quot;doc_00100&quot;) as HTMLCanvasElement
-  );
+<pre><code class="language-typescript">  cg.copyTo(viewport, document.getElementById(&quot;doc_00100&quot;) as HTMLCanvasElement);
 </code></pre>
 <div style="text-align: center">
 <canvas id="doc_00100" style="box-shadow: 0px 0px 8px #ccc;" width=512 height=384>
@@ -268,7 +265,7 @@ <h2>Semi-Log Plot</h2>
 </code></pre>
 <p>Then we’ll create our coordinate system, grab the default font, clear the
 canvas, and render our data with axes:</p>
-<pre><code class="language-typescript">  const coords = createCartesianCoordinateSystem(xscale, yscale);
+<pre><code class="language-typescript">  const coords = createCartesianCoordinateSystem(cg, xscale, yscale);
   const font = await createDefaultFont(cg);
 
   cg.clear([1, 1, 1, 1]);
@@ -313,8 +310,7 @@ <h2>Semi-Log Plot</h2>
     createOrthoAxis(cg, coords, &quot;y&quot;, font, {
       tickLength: 5,
       tickOffset: 2,
-      labelFormatter: (n) =&gt;
-        n &gt;= 1000 ? Math.round(n / 1000).toString() + &quot;K&quot; : n.toString(),
+      labelFormatter: (n) =&gt; (n &gt;= 1000 ? Math.round(n / 1000).toString() + &quot;K&quot; : n.toString()),
     }),
   ]);
 </code></pre>
@@ -342,8 +338,7 @@ <h2>Semi-Log Plot</h2>
       minorTickOffset: 2,
       tickLength: 5,
       tickOffset: 2,
-      labelFormatter: (n) =&gt;
-        n &gt;= 1000 ? Math.round(n / 1000).toString() + &quot;K&quot; : n.toString(),
+      labelFormatter: (n) =&gt; (n &gt;= 1000 ? Math.round(n / 1000).toString() + &quot;K&quot; : n.toString()),
     }),
   ]);
 </code></pre>
@@ -368,33 +363,23 @@ <h2>Semi-Log Plot</h2>
       minorTickOffset: 2,
       tickLength: 5,
       tickOffset: 2,
-      labelFormatter: (n) =&gt;
-        n &gt;= 1000 ? Math.round(n / 1000).toString() + &quot;K&quot; : n.toString(),
+      labelFormatter: (n) =&gt; (n &gt;= 1000 ? Math.round(n / 1000).toString() + &quot;K&quot; : n.toString()),
     }),
   ];
 </code></pre>
 <p>Then we’ll access the <code>info</code> objects on that variable to build grids with
 the <code>Grid</code> helper CandyGraph provides. First we’ll make a grid with our
 major ticks on both the x- and y-axes:</p>
-<pre><code class="language-typescript">  const majorGrid = createGrid(
-    cg,
-    axes[0].info.ticks,
-    axes[1].info.ticks,
-    coords.xscale.domain,
-    coords.yscale.domain,
-    { color: [0.25, 0.25, 0.25, 1], width: 1 }
-  );
+<pre><code class="language-typescript">  const majorGrid = createGrid(cg, axes[0].info.ticks, axes[1].info.ticks, coords.xscale.domain, coords.yscale.domain, {
+    color: [0.25, 0.25, 0.25, 1],
+    width: 1,
+  });
 </code></pre>
 <p>Then we’ll create a grid for the minor ticks, which we only have on the
 y-axis, so we’ll pass an empty array for the x-axis ticks:</p>
-<pre><code class="language-typescript">  const minorGrid = createGrid(
-    cg,
-    [],
-    axes[1].info.minorTicks,
-    coords.xscale.domain,
-    coords.yscale.domain,
-    { color: [0.75, 0.75, 0.75, 1] }
-  );
+<pre><code class="language-typescript">  const minorGrid = createGrid(cg, [], axes[1].info.minorTicks, coords.xscale.domain, coords.yscale.domain, {
+    color: [0.75, 0.75, 0.75, 1],
+  });
 </code></pre>
 <p>And finally render our graph:</p>
 <pre><code class="language-typescript">  cg.render(coords, viewport, [
@@ -439,6 +424,7 @@ <h2>Animation</h2>
 system with a bit of padding for our axes:</p>
 <pre><code class="language-typescript">  const viewport = { x: 0, y: 0, width: 1024, height: 384 };
   const coords = createCartesianCoordinateSystem(
+    cg,
     createLinearScale([-history, 0], [40, viewport.width - 16]),
     createLinearScale([-1, 1], [32, viewport.height - 16])
   );
@@ -585,8 +571,8 @@ <h2>Data Reuse</h2>
   const liny = createLinearScale([0, 10000], [24, viewport.height - 16]);
   const logy = createLogScale(10, [1, 10000], [24, viewport.height - 16]);
 
-  const linlin = createCartesianCoordinateSystem(linx, liny);
-  const linlog = createCartesianCoordinateSystem(linx, logy);
+  const linlin = createCartesianCoordinateSystem(cg, linx, liny);
+  const linlog = createCartesianCoordinateSystem(cg, linx, logy);
 </code></pre>
 <p>We’ll also hold onto our higher-level constructs by assigning them to a
 variable and keeping that reference to them, preventing garbage collection.</p>

docs/tutorial/src/doc-00100.ts

@@ -1,9 +1,5 @@
 // skip-doc-start
-import CandyGraph, {
-  createLinearScale,
-  createCartesianCoordinateSystem,
-  createLineStrip,
-} from "../../../src";
+import CandyGraph, { createLinearScale, createCartesianCoordinateSystem, createLineStrip } from "../../../src";
 // skip-doc-stop
 
 // ## Viewport, Scale, and Coordinates
@@ -34,7 +30,7 @@ export default function doc_00100(cg: CandyGraph): void {
   // Now that we have our scales, we can create a coordinate system. Coordinate
   // systems in CandyGraph wrap scales and add a little more GLSL glue code for
   // use on the GPU. Here we'll create a cartesian coordinate system:
-  const coords = createCartesianCoordinateSystem(xscale, yscale);
+  const coords = createCartesianCoordinateSystem(cg, xscale, yscale);
 
   // Next we're going to make some data for our plot. We'll loop through 0 to 2π
   // with a small increment for our x-values, and calculate the sine of each of
@@ -64,10 +60,7 @@ export default function doc_00100(cg: CandyGraph): void {
   // been added to the DOM. Instead of doing that, we'll use the `copyTo`
   // utility function to copy it to the canvas we mentioned earlier, which has
   // `id="doc_00100"` defined:
-  cg.copyTo(
-    viewport,
-    document.getElementById("doc_00100") as HTMLCanvasElement
-  );
+  cg.copyTo(viewport, document.getElementById("doc_00100") as HTMLCanvasElement);
 } // skip-doc
 
 // <div style="text-align: center">