still some weirdness on the side of funtionplot

Author: leonhma

package.json

@@ -10,6 +10,7 @@
     "build:prod": "webpack --env=production",
     "build:dev": "webpack",
     "build": "npm run build:dev",
+    "watch": "webpack --watch",
     "lint:prod": "npm run eslint -c .eslintrc.prod.json .",
     "test": "jest",
     "format": "npm run prettier --write .",

src/common/utils.ts

@@ -37,7 +37,10 @@ export function toFunctionPlotOptions(
       fnType: inputs.fnType,
       graphType: inputs.graphType ?? undefined,
       fn: inputs.fnType === "linear" ? inputs.fn ?? undefined : undefined,
-      scope: inputs.scope,
+      scope: Object.keys(options.constants).length > 0 ? Object.keys(options.constants).reduce((acc, key) => {
+        acc[key] = options.constants[key].value;
+        return acc
+      }, {}) as unknown as {[_: string]: number} : undefined,
       vector:
         inputs.fnType === "vector" && inputs.vector.x && inputs.vector.y
           ? [inputs.vector.x, inputs.vector.y]

src/components/Plot/Plot.svelte

@@ -24,19 +24,11 @@
   //     datum.scope = scope;
   //   });
   // }
-  $: ((options: PlotInputs) => {
-    plot.options = options;
-  })(options);
-
-  let target: HTMLDivElement;
-  $: ((target: HTMLElement) => {
-    plot.target = target;
-    console.log("updated target");
-  })(target);
+  $: plot.options = options;
 </script>
 
 <div>
-  <div class="fplt-plot" bind:this={target} />
+  <div class="fplt-plot" bind:this={plot.target} />
   <div class="fplt-plot-options">
     <div class="fplt-constants">
       {#each Object.keys(options.constants) as name}

src/fnplot.ts

@@ -3,13 +3,14 @@ import type { PlotInputs } from "./common/types";
 import createStylingPlugin from "./plugins/styling";
 import { toFunctionPlotOptions } from "./common/utils";
 import type ObsidianFunctionPlot from "./main";
-import functionPlot from "function-plot";
+import functionPlot, { Chart } from "function-plot";
 
 export class FunctionPlot {
-  id?: string;
   plugin: ObsidianFunctionPlot;
   target_: HTMLElement;
   options_: PlotInputs;
+  fnPlotOptions?: FunctionPlotOptions;
+  chart?: Chart;
 
   constructor(plugin: ObsidianFunctionPlot) {
     this.plugin = plugin;
@@ -30,28 +31,40 @@ export class FunctionPlot {
       console.log("No target or options set");
       return;
     }
-    const stylingPlugin = createStylingPlugin(this.plugin);
     try {
-      const functionPlotOptions = Object.assign(
-        {},
-        toFunctionPlotOptions(this.options_, this.target_),
-        {
-          plugins: [stylingPlugin],
-          id: this.id,
-          // width: 55,
-          // height: 35,
-        }
-      ) as FunctionPlotOptions;
-      console.log(functionPlotOptions);
-      functionPlot(functionPlotOptions);
-      this.id = functionPlotOptions.id;  // save id to preserve viewport state
+      if (this.fnPlotOptions !== undefined) {
+        Object.assign(
+          this.fnPlotOptions,
+          toFunctionPlotOptions(this.options_, this.target_)
+        );
+        console.log('updated fnPlotOptions: ', JSON.parse(JSON.stringify(this.fnPlotOptions)))
+      } else {
+        this.fnPlotOptions = Object.assign(
+          {},
+          toFunctionPlotOptions(this.options_, this.target_),
+          { plugins: [createStylingPlugin(this.plugin)] }
+        );
+        console.log(
+          "new fnPlotOptions: ",
+          JSON.parse(JSON.stringify(this.fnPlotOptions))
+        );
+
+      }
+      if (this.chart !== undefined) {
+        this.chart.build();
+        console.log('redrew chart')
+      } else { 
+        this.chart = functionPlot(this.fnPlotOptions);
+        console.log('new chart')
+      }
     } catch (err) {
       console.error(`Error rendering plot: ${err}`);
     }
   }
 
   resetView(): void {
-    this.id = undefined;
+    this.fnPlotOptions = undefined;
+    this.chart = undefined;
     this.render();
   }
 }