Move types around

mauriciopoppe · mauriciopoppe · commit 6466a78510d5 · 2025-05-24T16:39:21.000-04:00
diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,4 @@
 site/js/vendor
 site/js/plugins.js
+site/*.html
 .github
diff --git a/site/playground-rerender.html b/site/playground-rerender.html
@@ -0,0 +1,63 @@
+<!-- This page is used for tests purposes, think twice before making changes in <body> -->
+<!doctype html>
+<html>
+  <head lang="en">
+    <meta charset="UTF-8" />
+    <title>Function Plot</title>
+    <link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="./css/reset.css" />
+    <style>
+      body,
+      text {
+        font-family: Arial, sans-serif;
+        color: black;
+        font-size: 14px;
+      }
+      #playground-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    </style>
+  </head>
+  <body>
+    <script src="./function-plot.js"></script>
+
+    Does nothing:
+    <button id=upd>update existing fn</button>
+    <br>
+    Doesn't remove old polyline plot:
+    <button id=redefine>redefine data</button>
+
+    <div id=plot></div>
+    <script>
+
+    let obj = {
+      target: plot,
+      grid: true,
+      data: [
+          { fn: 'x' }
+      ]
+    }
+
+    functionPlot(obj)
+
+    upd.addEventListener('click', evt => {
+      obj.data[0] = { fn: 'x', nSamples: 10, graphType: 'scatter' }
+
+      // obj.data[0].nSamples = 10
+      // obj.data[0].graphType = 'scatter'
+      console.log(obj)
+      functionPlot(obj)
+    })
+
+    redefine.addEventListener('click', evt => {
+      obj.data = [{
+          fn: 'x', nSamples: 10, graphType: 'scatter'
+      }]
+      console.log(obj)
+      functionPlot(obj)
+    })
+
+    </script>
+  </body>
+</html>
diff --git a/src/chart.ts b/src/chart.ts
@@ -472,7 +472,7 @@ export class Chart extends EventEmitter.EventEmitter {
   }
 
   /**
-   * Draws each of the datums stored in data.options only
+   * buildContent draws each of the datums stored in data.options only.
    * To do a full redraw call `instance.plot()`
    */
   private buildContent() {
@@ -546,7 +546,7 @@ export class Chart extends EventEmitter.EventEmitter {
     // - for each datum determine the sampler to use
     const graphs = content
       .merge(contentEnter)
-      .selectAll(':scope > g.graph')
+      .selectAll('g.graph')
       .data(
         (d: FunctionPlotOptions) => {
           return d.data
@@ -685,8 +685,11 @@ export class Chart extends EventEmitter.EventEmitter {
     this.options.y.domain = [this.meta.yScale.domain()[0], this.meta.yScale.domain()[1]]
   }
 
-  // renderContent is a perf optimization to only render the content
-  // without rendering the canvas beneath it.
+  /**
+   * renderContent is a perf optimization to only render the content
+   * without rendering the canvas beneath it, when the user interacts with the canvas
+   * doing a pan or zoom, it'll call this function instead of #plot (which does a full plot).
+   */
   private renderContent() {
     const instance = this
     instance.emit('before:renderContent')
@@ -816,7 +819,7 @@ export class Chart extends EventEmitter.EventEmitter {
   }
 
   /**
-   * Removes a linked graph.
+   * Remove link removes a linked graph.
    */
   removeLink(instance: Chart) {
     const idx = this.linkedGraphs.indexOf(instance)
@@ -826,7 +829,7 @@ export class Chart extends EventEmitter.EventEmitter {
   }
 
   /**
-   * Destroys this instance of functionPlot,
+   * destroy destroys the current functionPlot instance.
    * if you added this to other instances through `addLink` make
    * sure you remove the links from the other instances to this
    * instance using `removeLink`.
diff --git a/src/samplers/builtIn.ts b/src/samplers/builtIn.ts
@@ -2,18 +2,14 @@ import { linspace, sgn, infinity, clamp, space, isValidNumber } from '../utils.m
 import { builtIn as evaluate } from './eval.mjs'
 
 import { FunctionPlotDatum, FunctionPlotScale, PointFunction, VectorFunction } from '../types.js'
-import { SamplerParams, SamplerFn } from './types.js'
+import { SamplerParams, SamplerFn, BuiltInSamplerResult, BuiltInSamplerResultGroup } from './types.js'
 
 type Asymptote = {
   asymptote: boolean
   d0: [number, number]
   d1: [number, number]
 }
 
-type SamplerResultSingle = [number, number]
-type SamplerResultGroup = Array<SamplerResultSingle>
-type SamplerResult = Array<SamplerResultGroup>
-
 function checkAsymptote(
   d0: [number, number],
   d1: [number, number],
@@ -50,18 +46,18 @@ function checkAsymptote(
  * Splits the evaluated data into arrays, each array is separated by any asymptote found
  * through the process of detecting slope/sign brusque changes
  */
-function split(d: FunctionPlotDatum, data: SamplerResultGroup, yScale: FunctionPlotScale): SamplerResult {
+function split(d: FunctionPlotDatum, data: BuiltInSamplerResultGroup, yScale: FunctionPlotScale): BuiltInSamplerResult {
   if (data.length === 0) {
     // This case is possible when the function didn't render any valid points
     // e.g. when evaluating sqrt(x) with all negative values.
     return []
   }
 
-  const samplerResult: SamplerResult = []
+  const samplerResult: BuiltInSamplerResult = []
   const yMin = yScale.domain()[0] - infinity()
   const yMax = yScale.domain()[1] + infinity()
 
-  let samplerGroup: SamplerResultGroup = [data[0]]
+  let samplerGroup: BuiltInSamplerResultGroup = [data[0]]
 
   let i = 1
   let deltaX = infinity()
@@ -117,7 +113,7 @@ function split(d: FunctionPlotDatum, data: SamplerResultGroup, yScale: FunctionP
   return samplerResult
 }
 
-function linear(samplerParams: SamplerParams): SamplerResult {
+function linear(samplerParams: SamplerParams): BuiltInSamplerResult {
   const allX = space(samplerParams.xAxis, samplerParams.range, samplerParams.nSamples)
   const yDomain = samplerParams.yScale.domain()
   // const yDomainMargin = yDomain[1] - yDomain[0]
@@ -136,12 +132,12 @@ function linear(samplerParams: SamplerParams): SamplerResult {
   return splitData
 }
 
-function parametric(samplerParams: SamplerParams): SamplerResult {
+function parametric(samplerParams: SamplerParams): BuiltInSamplerResult {
   // range is mapped to canvas coordinates from the input
   // for parametric plots the range will tell the start/end points of the `t` param
   const parametricRange = samplerParams.d.range || [0, 2 * Math.PI]
   const tCoords = space(samplerParams.xAxis, parametricRange, samplerParams.nSamples)
-  const samples: SamplerResultGroup = []
+  const samples: BuiltInSamplerResultGroup = []
   for (let i = 0; i < tCoords.length; i += 1) {
     const t = tCoords[i]
     const x = evaluate(samplerParams.d, 'x', { t })
@@ -151,12 +147,12 @@ function parametric(samplerParams: SamplerParams): SamplerResult {
   return [samples]
 }
 
-function polar(samplerParams: SamplerParams): SamplerResult {
+function polar(samplerParams: SamplerParams): BuiltInSamplerResult {
   // range is mapped to canvas coordinates from the input
   // for polar plots the range will tell the start/end points of the `theta` param
   const polarRange = samplerParams.d.range || [-Math.PI, Math.PI]
   const thetaSamples = space(samplerParams.xAxis, polarRange, samplerParams.nSamples)
-  const samples: SamplerResultGroup = []
+  const samples: BuiltInSamplerResultGroup = []
   for (let i = 0; i < thetaSamples.length; i += 1) {
     const theta = thetaSamples[i]
     const r = evaluate(samplerParams.d, 'r', { theta })
@@ -167,18 +163,18 @@ function polar(samplerParams: SamplerParams): SamplerResult {
   return [samples]
 }
 
-function points(samplerParams: SamplerParams): SamplerResult {
+function points(samplerParams: SamplerParams): BuiltInSamplerResult {
   const d: PointFunction = samplerParams.d as PointFunction
   return [d.points]
 }
 
-function vector(samplerParms: SamplerParams): SamplerResult {
+function vector(samplerParms: SamplerParams): BuiltInSamplerResult {
   const d: VectorFunction = samplerParms.d as VectorFunction
   d.offset = d.offset || [0, 0]
   return [[d.offset, [d.vector[0] + d.offset[0], d.vector[1] + d.offset[1]]]]
 }
 
-const sampler: SamplerFn = function sampler(samplerParams: SamplerParams): SamplerResult {
+const sampler: SamplerFn = function sampler(samplerParams: SamplerParams): BuiltInSamplerResult {
   switch (samplerParams.d.fnType) {
     case 'linear':
       return linear(samplerParams)
diff --git a/src/samplers/types.ts b/src/samplers/types.ts
@@ -18,5 +18,9 @@ export type IntervalSamplerResultSingle = [TInterval, TInterval] | null
 export type IntervalSamplerResultGroup = Array<IntervalSamplerResultSingle>
 export type IntervalSamplerResult = Array<IntervalSamplerResultGroup>
 
+export type BuiltInSamplerResultSingle = [number, number]
+export type BuiltInSamplerResultGroup = Array<BuiltInSamplerResultSingle>
+export type BuiltInSamplerResult = Array<BuiltInSamplerResultGroup>
+
 export type SamplerFn = (samplerParams: SamplerParams) => Array<any>
 export type AsyncSamplerFn = (samplerParams: SamplerParams) => Promise<Array<any>>
