- Add decimal separator option

- Add tip renderer option
- Add Derivatives
- Add editing screen. (partially)

Author: HerrChaos

src/app/CreatePlotModal.ts

@@ -8,11 +8,27 @@ import { insertPlot } from "../common/utils";
 export default class CreatePlotModal extends Modal {
   plugin: ObsidianFunctionPlot;
   editor: Editor;
+  options: PlotInputs;
+  onSubmit: (options: PlotInputs, renderer: rendererType) => void;
 
-  constructor(plugin: ObsidianFunctionPlot, editor: Editor) {
+  constructor(
+    plugin: ObsidianFunctionPlot,
+    editor: Editor,
+    options?: PlotInputs,
+    onSubmit?: () => void
+  ) {
     super(plugin.app);
     this.plugin = plugin;
     this.editor = editor;
+    this.options =
+      options ??
+      (JSON.parse(JSON.stringify(DEFAULT_PLOT_INPUTS)) as PlotInputs);
+    this.onSubmit =
+      onSubmit ??
+      ((options: PlotInputs, renderer: rendererType) => {
+        insertPlot(this.plugin, this.editor, options, renderer);
+        this.close();
+      });
   }
 
   onOpen() {
@@ -23,12 +39,9 @@ export default class CreatePlotModal extends Modal {
     new PlotModal({
       target: this.contentEl,
       props: {
-        options: JSON.parse(JSON.stringify(DEFAULT_PLOT_INPUTS)) as PlotInputs,
+        options: this.options,
         plugin: this.plugin,
-        submit: (options: PlotInputs, renderer: rendererType) => {
-          insertPlot(this.plugin, this.editor, options, renderer);
-          this.close();
-        },
+        submit: this.onSubmit,
       },
     });
   }

src/app/SettingsTab.ts

@@ -44,6 +44,19 @@ export default class SettingsTab extends PluginSettingTab {
           });
       });
 
+    new Setting(containerEl)
+      .setName("Decimal Separator")
+      .setDesc("The character used as the decimal separator.")
+      .addText((text) => {
+        this.settingsInputs.set("decimalSeparator", text);
+        text
+          .setValue(this.plugin.settings.decimalSeparator)
+          .onChange(async (value) => {
+            this.plugin.settings.decimalSeparator = value;
+            await this.plugin.saveSettings();
+          });
+      });
+
     /*
      * Font Sizes
      */

src/common/defaults.ts

@@ -11,6 +11,8 @@ import type {
  * The default plugin settings.
  */
 export const DEFAULT_PLUGIN_SETTINGS: Required<PluginSettings> = {
+  decimalSeparator: ".",
+
   titleFontSize: 24,
   scaleFontSize: 12,
   labelFontSize: 12,
@@ -59,6 +61,10 @@ export const DEFAULT_FUNCTION_INPUTS: Omit<FunctionInputs, "fn" | "r"> = {
   graphType: "polyline",
   nSamples: undefined,
   points: DEFAULT_POINTS,
+  derivative: {
+    fn: "",
+    updateOnMouseMove: true,
+  },
 };
 
 export const FALLBACK_FUNCTION_INPUTS: DeepNonNullable<
@@ -88,23 +94,15 @@ export const DEFAULT_PLOT_INPUTS: PlotInputs = {
   constants: {},
   legends: false,
   xAxis: {
-    label: undefined,
-    domain: {
-      min: undefined,
-      max: undefined,
-    },
+    domain: {},
   },
   yAxis: {
-    label: undefined,
-    domain: {
-      min: undefined,
-      max: undefined,
-    },
+    domain: {},
   },
   grid: true,
   data: [],
-  disableZoom: undefined,
   title: undefined,
+  tip: {},
 };
 
 export const FALLBACK_PLOT_INPUTS: DeepNonNullable<

src/common/types.ts

@@ -20,6 +20,12 @@ export type DeepNonNullable<T> = {
   [K in keyof T]: DeepNonNullable<Required<T[K]>>;
 };
 
+export interface DerivativeInputs {
+  fn: string;
+  x0?: number;
+  updateOnMouseMove: boolean;
+}
+
 export interface FunctionInputs {
   id?: string;
   name?: string;
@@ -45,13 +51,22 @@ export interface FunctionInputs {
   nSamples?: number;
   closed?: boolean;
   skipTip?: boolean;
+  derivative: DerivativeInputs;
 }
+
 export interface ConstantInputs {
   min: number;
   max: number;
   step: number;
   value: number;
 }
+
+export interface TipInputs {
+  renderer?: string;
+  xLine?: boolean;
+  yLine?: boolean;
+}
+
 /**
  * An interface specifying the options for a plot.
  */
@@ -76,6 +91,7 @@ export interface PlotInputs {
   grid?: boolean;
   disableZoom?: boolean;
   title?: string;
+  tip: TipInputs;
 }
 
 export interface V1YAMLPlotInputs {
@@ -91,6 +107,8 @@ export interface V1YAMLPlotInputs {
  * The plugin's settings.
  */
 export interface PluginSettings {
+  decimalSeparator: string;
+
   titleFontSize: number;
   scaleFontSize: number;
   labelFontSize: number;

src/common/utils.ts

@@ -17,17 +17,22 @@ import { toPng } from "html-to-image";
 import type {
   FunctionPlotDatum,
   FunctionPlotOptions,
+  FunctionPlotTip,
 } from "function-plot/dist/types";
 import { FunctionPlot } from "../fnplot";
 
 export function gcd(a: number, b: number): number {
   return !b ? a : gcd(b, a % b);
 }
 
-function parseLaTeX(latex: string | undefined): string | undefined {
+function parseLaTeX(
+  latex: string | undefined,
+  plugin: ObsidianFunctionPlot
+): string | undefined {
   return latex === undefined
     ? latex
     : latex
+        .replace(plugin.settings.decimalSeparator, ".")
         .replace("f(x)=", "")
         .replace(/\\frac\{([^{}]+)\}\{([^{}]+)\}/g, "($1)/($2)")
         .replace(/\\cdot/g, "*")
@@ -49,17 +54,19 @@ function parseLaTeX(latex: string | undefined): string | undefined {
 // TODO make change to returned object reflect in input
 export function toFunctionPlotOptions(
   options: PlotInputs,
-  target: HTMLElement
+  target: HTMLElement,
+  plugin: ObsidianFunctionPlot
 ): FunctionPlotOptions {
   function functionInputsToFunctionPlotDatum(
-    inputs: FunctionInputs
+    inputs: FunctionInputs,
+    plugin: ObsidianFunctionPlot
   ): FunctionPlotDatum {
     const output: FunctionPlotDatum = {
       fnType: inputs.fnType,
       graphType: inputs.graphType ?? undefined,
       fn:
         inputs.fnType === "linear"
-          ? parseLaTeX(inputs.fn) ?? undefined
+          ? parseLaTeX(inputs.fn, plugin) ?? undefined
           : undefined,
       points:
         inputs.fnType === "points" && inputs.points !== DEFAULT_POINTS
@@ -98,6 +105,14 @@ export function toFunctionPlotOptions(
       nSamples: inputs.nSamples ? Math.min(inputs.nSamples, 999) : undefined,
       closed: inputs.closed ?? undefined,
       skipTip: inputs.skipTip ?? undefined,
+      derivative:
+        inputs.derivative?.fn === ""
+          ? undefined
+          : {
+              fn: parseLaTeX(inputs.derivative?.fn, plugin),
+              x0: inputs.derivative?.x0 ?? undefined,
+              updateOnMouseMove: inputs.derivative?.updateOnMouseMove ?? true,
+            },
     };
 
     Object.keys(output).forEach(
@@ -123,7 +138,7 @@ export function toFunctionPlotOptions(
     target: target,
     data: options.data
       .filter(hasFunction)
-      .map(functionInputsToFunctionPlotDatum),
+      .map((data) => functionInputsToFunctionPlotDatum(data, plugin)),
     title: options.title ?? undefined,
     xAxis: {
       label: options.xAxis.label ?? FALLBACK_PLOT_INPUTS.xAxis.label,
@@ -141,6 +156,17 @@ export function toFunctionPlotOptions(
     },
     grid: options.grid ?? undefined,
     disableZoom: options.disableZoom ?? undefined,
+    tip: {
+      renderer: (x: number, y: number, index: number) => {
+        return options.tip.renderer === undefined || options.tip.renderer === ""
+          ? "(" + x.toFixed(2).toString() + "," + y.toFixed(2).toString() + ")"
+          : options.tip.renderer
+              .replace("x", x.toFixed(2).toString())
+              .replace("y", y.toFixed(2).toString());
+      },
+      xLine: options.tip.xLine ?? undefined,
+      yLine: options.tip.yLine ?? undefined,
+    } as FunctionPlotTip,
   };
 
   Object.keys(output).forEach(
@@ -291,6 +317,7 @@ export function parseYAMLCodeBlock(content: string): PlotInputs {
         fn, // return as FunctionInputs since fn is specified here
       }) as FunctionInputs;
     }),
+    tip: {},
   };
 }
 

src/components/Plot/Plot.svelte

@@ -2,10 +2,14 @@
   import type { PlotInputs } from "../../common/types";
   import type ObsidianFunctionPlot from "../../main";
   import Constant from "./Constant.svelte";
-  import { Menu } from "obsidian";
+  import { MarkdownView, Menu } from "obsidian";
 
   import { FunctionPlot } from "../../fnplot";
   import { onMount } from "svelte";
+  import PlotModal from "../PlotModal/PlotModal.svelte";
+  import CreatePlotModal from "../../app/CreatePlotModal";
+  import { timeHours } from "d3";
+  import { insertPlot } from "../../common/utils";
 
   export let options: PlotInputs,
     plugin: ObsidianFunctionPlot,
@@ -81,7 +85,22 @@
         item.setTitle("Edit");
         item.setIcon("pencil");
         item.onClick(() => {
-          console.log("to be implemented");
+          const activeLeaf =
+            plugin.app.workspace.getActiveViewOfType(MarkdownView);
+
+          if (!activeLeaf) {
+            return;
+          }
+
+          new CreatePlotModal(
+            plugin,
+            activeLeaf.editor,
+            options,
+            (options: PlotInputs, renderer: rendererType) => {
+              insertPlot(this.plugin, this.editor, options, renderer);
+              this.close();
+            }
+          ).open();
         });
       });
     }
@@ -90,7 +109,7 @@
   }
 </script>
 
-<div on:contextmenu={handleContextMenu}>
+<div on:contextmenu={handleContextMenu} role="application">
   <div class="fplt-plot" bind:this={plotContainer} />
   <div class="fplt-plot-options">
     <div class="fplt-constants">

src/components/PlotModal/Function.svelte

@@ -14,11 +14,10 @@
 
   export let datum: FunctionInputs, unmount: () => void, legends: boolean;
 
-  let showFloater = false;
-  let mousePos = { x: 0, y: 0 };
-
   let points = 1;
 
+  let mousePos = { x: 0, y: 0 };
+  let showFloater = false;
   function handleClick(e: MouseEvent) {
     showFloater = true;
     const target = (e.target as HTMLElement).closest("div");
@@ -110,7 +109,7 @@
             <option value="scatter">scatter</option>
             {#if !["polar", "vector", "points"].includes(datum.fnType)}
               <option value="interval">interval</option>
-            {/if} -->
+            {/if}
           </Dropdown>
         {/if}
         {#if datum.fnType !== "vector"}
@@ -138,6 +137,10 @@
           <label for="skip-tip">Skip tip</label>
           <Switch id="skip-tip" bind:checked={datum.skipTip} />
         {/if}
+        {#if datum.fnType == "linear"}
+          <label for="derivative">Derivative</label>
+          <TextInput id="derivative" bind:value={datum.derivative.fn} />
+        {/if}
       </OptionsFloater>
     {/if}
   </div>