commit local work

Author: leonhma

.github/workflows/ci.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   build:
-    name: Build ⚙️
+    name: build
     runs-on: ubuntu-latest
 
     steps:
@@ -36,7 +36,7 @@ jobs:
 
   test:
     runs-on: ubuntu-latest
-    name: Test 🧪
+    name: test
     steps:
       - uses: actions/checkout@v2
 
@@ -52,7 +52,7 @@ jobs:
 
   lint:
     runs-on: ubuntu-latest
-    name: Lint ✔
+    name: lint:prod
     steps:
       - uses: actions/checkout@v2
 

.github/workflows/delete-runs.yml

@@ -1,4 +1,3 @@
-node_modules/
 yarn-error.log
 main.js
 !*/**/main.js

.gitignore

@@ -1,4 +1,4 @@
 {
-  "svelteSortOrder": "scripts-markup-styles",
+  "svelteSortOrder": "options-scripts-markup-styles",
   "plugins": ["prettier-plugin-svelte"]
 }

.prettierrc.json

@@ -36,10 +36,7 @@ export const RENDERER_OPTIONS: { [_ in rendererType]: string } = {
   image: "Image (exportable)",
 };
 
-export const DEFAULT_FUNCTION_INPUTS: Omit<
-  FunctionInputs,
-  "fn" | "vector" | "r"
-> = {
+export const DEFAULT_FUNCTION_INPUTS: Omit<FunctionInputs, "fn" | "r"> = {
   id: "",
   scope: {},
   fnType: "linear",
@@ -48,13 +45,17 @@ export const DEFAULT_FUNCTION_INPUTS: Omit<
     x: null,
     y: null,
   },
+  vector: {
+    x: null,
+    y: null,
+  },
   range: {
     min: null,
     max: null,
   },
   skipTip: false,
   color: null,
-  graphType: null,
+  graphType: "polyline",
   nSamples: null,
 };
 

release-notes.md

@@ -20,6 +20,10 @@ import type {
   FunctionPlotOptions,
 } from "function-plot/dist/types";
 
+export function gcd(a: number, b: number): number {
+  return !b ? a : gcd(b, a % b);
+}
+
 // TODO make change to returned object reflect in input
 export function toFunctionPlotOptions(
   options: PlotInputs,
@@ -30,10 +34,7 @@ export function toFunctionPlotOptions(
   ): FunctionPlotDatum {
     const output: FunctionPlotDatum = {
       fnType: inputs.fnType,
-      graphType:
-        inputs.graphType ?? ["vector", "polar"].includes(inputs.fnType)
-          ? "polyline"
-          : undefined, // workaround for https://github.com/mauriciopoppe/function-plot/issues/224
+      graphType: inputs.graphType ?? undefined,
       fn: inputs.fnType === "linear" ? inputs.fn ?? undefined : undefined,
       scope: inputs.scope,
       vector:
@@ -155,11 +156,17 @@ export function renderPlot(
 ) {
   const stylingPlugin = createStylingPlugin(plugin);
   try {
-    functionPlot(
-      Object.assign({}, toFunctionPlotOptions(options, target), {
+    const functionPlotOptions = Object.assign(
+      {},
+      toFunctionPlotOptions(options, target),
+      {
         plugins: [stylingPlugin],
-      })
-    );
+        width: 55,
+        height: 35,
+      }
+    ) as FunctionPlotOptions;
+    functionPlot(functionPlotOptions);
+    console.log(JSON.parse(JSON.stringify(functionPlotOptions)));
   } catch (err) {
     console.error(`Error rendering plot: ${err}`);
   }

src/common/defaults.ts

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { ConstantInputs } from "../../common/types";
+  import Slider from "../Primitives/Slider.svelte";
+
+  import Settings from "svelte-material-icons/Settings.svelte";
+  import IconWrapper from "../Primitives/IconWrapper.svelte";
+  import OptionsFloater from "../Primitives/OptionsFloater.svelte";
+  import NumberInput from "../Primitives/NumberInput.svelte";
+
+  export let constant: ConstantInputs, name: string, showSettings: boolean;
+  let showFloater = false;
+</script>
+
+<div>
+  <p>{name}</p>
+  <Slider
+    bind:value={constant.value}
+    bind:min={constant.min}
+    bind:max={constant.max}
+    bind:step={constant.step}
+  />
+  {#if showSettings}
+    <IconWrapper
+      on:click={() => {
+        showFloater = true;
+      }}
+    >
+      <Settings size="1.4em" />
+    </IconWrapper>
+    {#if showFloater}
+      <OptionsFloater bind:show={showFloater}>
+        <label for="constant-min">Min</label>
+        <NumberInput placeholder="min" bind:value={constant.min} />
+        <label for="constant-max">Max</label>
+        <NumberInput placeholder="max" bind:value={constant.max} />
+        <label for="constant-step">Step</label>
+        <NumberInput placeholder="step" bind:value={constant.step} />
+      </OptionsFloater>
+    {/if}
+  {/if}
+</div>
+
+<style lang="scss">
+  div {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+    align-items: center;
+  }
+</style>

src/common/utils.ts

@@ -1,47 +1,54 @@
 <script lang="ts">
-  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";
+  import Constant from "./Constant.svelte";
 
-  export let optionsStore: Writable<PlotInputs>, plugin: ObsidianFunctionPlot;
+  import Replay from "svelte-material-icons/Replay.svelte";
+  import Button from "../Primitives/Button.svelte";
+
+  export let options: PlotInputs, plugin: ObsidianFunctionPlot;
 
   let target: HTMLElement;
 
   $: {
-    console.log(`in reactive block: writing updated scope to all data items`);
-    const scope = Object.entries($optionsStore.constants).reduce(
+    const scope = Object.entries(options.constants).reduce(
       (acc, [key, val]) => {
         acc[key] = val.value;
         return acc;
       },
       {}
     );
-    $optionsStore.data.forEach((datum) => {
+    options.data.forEach((datum) => {
       datum.scope = scope;
     });
   }
-  $: {
-    console.log(`in reactive block: rendering plot`);
-    console.log(JSON.parse(JSON.stringify($optionsStore)));
-    renderPlot($optionsStore, target, plugin);
-  }
+  $: renderPlot(options, target, plugin);
 </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 class="fplt-plot-options">
+    <div class="fplt-constants">
+      {#each Object.keys(options.constants) as name}
+        <Constant {name} bind:constant={options.constants[name]} showSettings />
+      {/each}
+    </div>
+    <Button>
+      <Replay size="1.4em" />
+    </Button>
   </div>
 </div>
+
+<style lang="scss">
+  .fplt-plot-options {
+    display: grid;
+    grid-template-columns: 1fr min-content;
+    gap: 1em;
+  }
+  .fplt-constants {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+  }
+</style>

src/components/Plot/Constant.svelte

@@ -25,11 +25,11 @@
   </Dropdown>
 
   {#if datum.fnType === "linear"}
-    <TextInput placeholder="f(x)=" bind:value={datum.fn} />
+    <TextInput placeholder="f(x)=" width="20ch" bind:value={datum.fn} />
   {/if}
 
   {#if datum.fnType === "polar"}
-    <TextInput placeholder="r(theta)=" bind:value={datum.r} />
+    <TextInput placeholder="r(theta)=" width="20ch" bind:value={datum.r} />
   {/if}
 
   {#if datum.fnType === "vector"}