scroll working, sliders todo

Author: leonhma

.github/workflows/ci.yml

@@ -9,6 +9,7 @@ jobs:
   build:
     name: Build ⚙️
     runs-on: ubuntu-latest
+
     steps:
       - uses: actions/checkout@v2
 
@@ -20,7 +21,7 @@ jobs:
         run: yarn install
 
       - name: set development version
-        run: node .github/version-bump.mjs "dev-$(git rev-parse --short HEAD)"
+        run: node .github/version-bump.mjs "$(git rev-parse --short HEAD)"
 
       - name: build
         run: yarn build

src/app/CreatePlotModal.ts

@@ -18,6 +18,7 @@ export default class CreatePlotModal extends Modal {
   async onOpen() {
     this.titleEl.setText("Create a Plot");
     this.modalEl.addClass("fplt-modal");
+    this.contentEl.addClass("fplt-modal-content")
     // attach svelte PlotModal component
     new PlotModal({
       target: this.contentEl,

src/app/SettingsTab.ts

@@ -5,7 +5,7 @@ import {
   Setting,
   ValueComponent,
 } from "obsidian";
-import type ObsidianFunctionPlot from "../main.js";
+import type ObsidianFunctionPlot from "../main";
 import { DEFAULT_PLUGIN_SETTINGS, rendererOptions } from "../common/defaults";
 import type { PluginSettings, rendererType } from "../common/types";
 

src/common/defaults.ts

@@ -65,12 +65,19 @@ export const FALLBACK_FUNCTION_INPUTS: Partial<FunctionInputs> = {
   },
 };
 
+export const DEFAULT_CONSTANT_INPUTS = {
+  min: -10,
+  max: 10,
+  step: 1,
+  value: 1,
+}
+
 /**
  * The default options for a plot.
  */
 export const DEFAULT_PLOT_INPUTS: PlotInputs = {
-  target: null, // set by rendering function
   renderer: null, // has initial state controlled by plugin.settings.defaultRenderer
+  constants: {},
   title: null,
   xAxis: {
     label: null,

src/common/types.ts

@@ -1,9 +1,6 @@
 import type { Chart } from "function-plot";
 import type { EventEmitter } from "events";
-import type {
-  FunctionPlotDatum,
-  FunctionPlotOptions,
-} from "function-plot/dist/types";
+import type { FunctionPlotDatum } from "function-plot/dist/types";
 
 export type rendererType = "interactive" | "image";
 
@@ -35,13 +32,19 @@ export interface FunctionInputs {
   closed?: boolean;
   skipTip?: boolean;
 }
+export interface ConstantInputs {
+  min: number;
+  max: number;
+  step: number;
+  value: number;
+}
 /**
  * An interface specifying the options for a plot.
  */
 export interface PlotInputs {
   data: FunctionInputs[];
   renderer: rendererType;
-  target: FunctionPlotOptions["target"];
+  constants: { [_: string]: ConstantInputs };
   xAxis?: {
     label?: string;
     domain?: {

src/common/utils.ts

@@ -15,8 +15,10 @@ import type {
   FunctionPlotOptions,
 } from "function-plot/dist/types";
 
+// TODO make change to returned object reflect in input
 export function toFunctionPlotOptions(
-  options: PlotInputs
+  options: PlotInputs,
+  target: HTMLElement
 ): FunctionPlotOptions {
   function functionInputsToFunctionPlotDatum(
     inputs: FunctionInputs
@@ -34,8 +36,7 @@ export function toFunctionPlotOptions(
           : undefined,
       offset:
         inputs.fnType === "vector" &&
-        (inputs.offset?.x !== undefined ||
-        inputs.offset?.y !== undefined)      //TODO work here offset is [undef, undef]
+        (inputs.offset?.x !== undefined || inputs.offset?.y !== undefined) //TODO work here offset is [undef, undef]
           ? [inputs.offset.x ?? 0, inputs.offset.y ?? 0]
           : undefined,
       r: inputs.fnType === "polar" ? inputs.r : undefined,
@@ -47,7 +48,7 @@ export function toFunctionPlotOptions(
               inputs.range.max ?? FALLBACK_FUNCTION_INPUTS.range.max,
             ]
           : undefined,
-      nSamples: inputs.nSamples,
+      nSamples: Math.min(inputs.nSamples, 999),
       closed: inputs.closed,
       skipTip: inputs.skipTip,
     };
@@ -68,7 +69,8 @@ export function toFunctionPlotOptions(
   }
 
   const output: FunctionPlotOptions = {
-    target: options.target,
+    //id: options.id, //used by funcitonplot to identify the plot for updating
+    target: target,
     data: options.data
       .filter(hasFunction)
       .map(functionInputsToFunctionPlotDatum),
@@ -137,14 +139,16 @@ export function insertParagraphAtCursor(
  * @param plugin A reference to the plugin (accessed for settings)
  * @returns The chart object of the created plot
  */
-export function renderPlot(options: PlotInputs, plugin: ObsidianFunctionPlot) {
-  if (options.target === null) return;
+export function renderPlot(
+  options: PlotInputs,
+  target: HTMLElement,
+  plugin: ObsidianFunctionPlot
+) {
+  if (target === null) return;
   const stylingPlugin = createStylingPlugin(plugin);
-  console.log("reloading plot");
-  console.log(toFunctionPlotOptions(options));
   try {
     functionPlot(
-      Object.assign({}, toFunctionPlotOptions(options), {
+      Object.assign({}, toFunctionPlotOptions(options, target), {
         plugins: [stylingPlugin],
       })
     );
@@ -182,7 +186,7 @@ export async function insertPlotAsImage(
   options: PlotInputs
 ) {
   const target = document.createElement("div");
-  renderPlot(Object.assign(options, { target }), plugin);
+  renderPlot(options, target, plugin);
   const dataURL = await toPng(target);
   if (dataURL === "data:,") {
     new Error("Data URL is empty");
@@ -226,8 +230,8 @@ export function parseYAMLCodeBlock(content: string): PlotInputs {
     .filter((line) => line.length > 0);
 
   return {
-    target: null,
     renderer: null,
+    constants: {},
     title: header.title ?? DEFAULT_PLOT_INPUTS.title,
     xAxis: {
       label: header.xLabel ?? DEFAULT_PLOT_INPUTS.xAxis.label,

src/components/Plot/Plot.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import type { Writable } from "svelte/store";
+  import type { PlotInputs } from "../../common/types";
+  import { renderPlot } from "../../common/utils";
+  import type ObsidianFunctionPlot from "../../main";
+  import SettingItem from "../Primitives/SettingItem.svelte";
+  import Slider from "../Primitives/Slider.svelte";
+
+  export let optionsStore: Writable<PlotInputs>, plugin: ObsidianFunctionPlot;
+
+  let target: HTMLElement;
+
+  const unsubscribe = optionsStore.subscribe((options) => {
+    renderPlot(options, target, plugin);
+  });
+
+  onDestroy(() => {
+    unsubscribe();
+  });
+</script>
+
+<div>
+  <div class="fplot-plot" bind:this={target} />
+  <div class="fplt-constants">
+    {#each Object.entries($optionsStore.constants) as [key, constant]}
+      <SettingItem name={key}>
+        <Slider
+          bind:value={constant.value}
+          min={constant.min}
+          max={constant.max}
+          step={constant.step}
+        />
+      </SettingItem>
+    {/each}
+  </div>
+</div>

src/components/PlotModal/Function.svelte

@@ -29,7 +29,7 @@
   {/if}
 
   {#if datum.fnType === "polar"}
-    <TextInput placeholder="θ(r)=" bind:value={datum.r} />
+    <TextInput placeholder="r(theta)=" bind:value={datum.r} />
   {/if}
 
   {#if datum.fnType === "vector"}