adjusted styling, incorporated pr

Author: leonhma

.github/changelog.js

@@ -0,0 +1,13 @@
+const { readFileSync, writeFileSync, existsSync } = require("fs");
+
+const [name, body] = process.argv.slice(2);
+
+let changelog = "";
+
+if (existsSync("./CHANGELOG.md")) {
+  changelog = readFileSync("./CHANGELOG.md", "utf8");
+}
+
+changelog = `## ${name}\n\n${body}\n\n${changelog}`;
+
+writeFileSync("./CHANGELOG.md", changelog);

.github/release-notes.js

@@ -37,9 +37,9 @@ jobs:
       - name: Run version-bump
         run: node .github/version-bump.js ${{ github.event.release.tag_name }}
 
-      # build release notes
-      - name: Update release notes
-        run: node .github/release-notes.js ${{ github.event.release.tag_name }} ${{ github.event.release.body }}
+      # build changelog
+      - name: Update changelog
+        run: node .github/changelog.js ${{ github.event.release.tag_name }} ${{ github.event.release.body }}
 
       # build now, so that no side-effects when build fails and release get deleted
       - name: Build

.github/workflows/release.yml

@@ -10,4 +10,4 @@ TL;DR:
 
 Because obsidian keeps an index of versions of the plugin and their respective minimum version requirements for obsidian itself, the `minAppVersion` field in `manifest.json` and the version of the dependency `obsidian` in `package.json` should be kept equal. The version should also reflect the lowest version of api under which the plugin will work. The dependency version in `package.json` is pinned to a single version.
 
-Oh, and also: This project uses yarn, although it doesn't matter if you use another package manager so long as you don't commit the log and lock files to VCS. Just be sure to let us know of your choice of package manager if you encounter a problem.
+This project recently switched to using pnpm as a package manager, although it doesn't matter if you use another package manager so long as you don't commit the log and lock files to VCS. Just be sure to let us know of your choice of package manager if you encounter a problem.

CHANGELOG.md

@@ -1,6 +1,7 @@
 import type { Chart } from "function-plot";
 import type { EventEmitter } from "events";
 export type rendererType = "interactive" | "image";
+import type { Selection as d3Selection } from "d3";
 
 /**
  * Input types: values that should be set to a default by the plugin are required, values that should be set to a default by functionplot are marked optional. Values that are not set by either are marked optional but default values Omit<> them.
@@ -9,7 +10,10 @@ export type rendererType = "interactive" | "image";
 /**
  * A sum-type of Chart and EventEmitter because TypeScript can't figure this out on it's own.
  */
-export type chartType = Chart & EventEmitter;
+export type chartType = {
+  root: d3Selection<SVGElement, unknown, HTMLElement, unknown>;
+} & Omit<Chart, "root"> &
+  EventEmitter;
 
 //Custom utility type:
 export type DeepNonNullable<T> = {

CONTRIBUTING.md

@@ -1,6 +1,5 @@
 import { Editor, parseYaml } from "obsidian";
 import type ObsidianFunctionPlot from "../main";
-import type { Selection } from "d3";
 import type {
   FunctionInputs,
   PlotInputs,
@@ -19,7 +18,6 @@ import type {
   FunctionPlotOptions,
 } from "function-plot/dist/types";
 import { FunctionPlot } from "../fnplot";
-import type { Chart } from "function-plot";
 
 export function gcd(a: number, b: number): number {
   return !b ? a : gcd(b, a % b);
@@ -86,7 +84,7 @@ export function toFunctionPlotOptions(
   }
 
   const output: FunctionPlotOptions = {
-    //id: options.id, //used by funcitonplot to identify the plot for updating
+    //id: options.id, //used by functionplot to identify the plot for updating
     target: target,
     data: options.data
       .filter(hasFunction)
@@ -106,23 +104,6 @@ export function toFunctionPlotOptions(
         options.yAxis.domain.max ?? FALLBACK_PLOT_INPUTS.yAxis.domain.max,
       ],
     },
-    plugins: [(chart: Chart) => {
-      if(!options.legends) return;
-      chart.root.append("text").attr("class", "top-left-legend");
-      let text_color = "#00ff00";
-      let legends: {name: string, color: string}[] = [];
-      chart.options.data?.forEach((datum, index, arr) => {
-        legends.push({name: (options.data[index].name) || "", color: datum.color || ""});
-      })
-      const tll: any = chart.root.select(".top-left-legend");
-      console.log(legends);
-      tll.selectAll("tspan").remove();
-      legends.forEach((legend, index, arr) => {
-        tll.attr("y", (chart.meta.margin?.top || 20) / 2)
-           .attr("x", chart.meta.margin?.left || 10)
-        tll.append("tspan").attr('fill', legend.color).text("█ " + legend.name + "\n");;
-      }) 
-    }],
     grid: options.grid ?? undefined,
     disableZoom: options.disableZoom ?? undefined,
   };

src/common/types.ts

@@ -25,6 +25,7 @@
     if (!target) return;
     const rect = target.getBoundingClientRect();
     mousePos = { x: rect.right, y: rect.bottom };
+    console.log(mousePos);
   }
 </script>
 
@@ -65,10 +66,14 @@
   div {
     background: var(--color-base-30);
     border-radius: 0.5em;
-    padding: 0 0.5rem;
+    padding: 0.5rem;
     display: flex;
     flex-direction: row;
     gap: 0.5rem;
     align-items: center;
+    p {
+      margin: 0;
+    }
+    // flex: 1;
   }
 </style>

src/common/utils.ts

@@ -11,7 +11,7 @@
   import MenuDown from "svelte-material-icons/MenuDown.svelte";
   import Delete from "svelte-material-icons/Delete.svelte";
 
-  export let datum: FunctionInputs, unmount: () => void;
+  export let datum: FunctionInputs, unmount: () => void, legends: boolean;
 
   let showFloater = false;
   let mousePos = { x: 0, y: 0 };
@@ -33,14 +33,16 @@
     <option value="vector">vector</option>
   </Dropdown>
 
-  <TextInput placeholder="Name" width="10ch" bind:value={datum.name} />
+  {#if legends}
+    <TextInput placeholder="Name" bind:value={datum.name} />
+  {/if}
 
   {#if datum.fnType === "linear"}
-    <TextInput placeholder="f(x)=" width="20ch" bind:value={datum.fn} />
+    <TextInput placeholder="f(x)=" bind:value={datum.fn} />
   {/if}
 
   {#if datum.fnType === "polar"}
-    <TextInput placeholder="r(theta)=" width="20ch" bind:value={datum.r} />
+    <TextInput placeholder="r(theta)=" bind:value={datum.r} />
   {/if}
 
   {#if datum.fnType === "vector"}
@@ -114,7 +116,7 @@
 <style lang="scss">
   .functionplot-item-data {
     display: inline-grid;
-    grid-template-columns: repeat(6, min-content);
+    grid-template-columns: min-content 1fr repeat(3, min-content);
     column-gap: 0.5em;
     place-items: center start;
     width: 100%;
@@ -124,6 +126,18 @@
     }
   }
 
+  .functionplot-item-data:has(input[placeholder="Name"]) {
+    grid-template-columns: min-content 1fr 2fr repeat(4, min-content);
+  }
+
+  .functionplot-item-data:has(input[placeholder="Δx"]) {
+    grid-template-columns: min-content auto repeat(3, min-content);
+  }
+
+  .functionplot-item-data:has(input[placeholder="Name"]):has(input[placeholder="Δx"]) {
+    grid-template-columns: min-content max-content auto repeat(4, min-content);
+  }
+
   .functionplot-nums-inputs {
     display: flex;
     flex-direction: row;

src/components/Plot/Constant.svelte

@@ -159,6 +159,7 @@
           <div class="fplt-list">
             {#each options.data as datum}
               <Function
+                legends={options.legends}
                 bind:datum
                 unmount={() => {
                   options.data = options.data.filter(
@@ -213,7 +214,7 @@
   }
 
   .fplt-options-wrapper {
-    max-width: 25em;
+    max-width: 30em;
     min-width: 25em;
     padding: 3px;
   }

src/components/PlotModal/Function.svelte

@@ -1,11 +1,7 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-
   export let show = false,
     mousePos: { x: number; y: number },
-    color: string | undefined;
-
-  let abs: { x: number; y: number } = { x: 0, y: 0 };
+    color: string | undefined = undefined;
 
   function clickOutside(node: Node) {
     function handleClick(event: MouseEvent) {
@@ -24,32 +20,10 @@
       },
     };
   }
-
-  onMount(() => {
-    const floater = document.querySelector(
-      "#fplt-floater-modal"
-    ) as HTMLElement;
-    const boundingRect = document
-      .querySelector(".fplt-container")
-      ?.getBoundingClientRect();
-    const floaterRect = floater?.getBoundingClientRect();
-
-    if (!floater || !floaterRect || !boundingRect) {
-      show = false;
-      return;
-    }
-
-    const x = Math.min(mousePos.x, boundingRect.right - floaterRect.width);
-    const y = Math.min(mousePos.y, boundingRect.bottom - floaterRect.height);
-
-    abs = { x: x - boundingRect.left, y: y - boundingRect.top };
-  });
-
-  $: abs = abs;
 </script>
 
 <div
-  style="transform: translateX({abs.x}px) translateY({abs.y}px)"
+  style="transform: translateX({mousePos.x}px) translateY({mousePos.y}px)"
   id="fplt-floater-modal"
   class="modal"
   use:clickOutside
@@ -78,10 +52,11 @@
     overflow-y: auto;
     overflow-x: hidden;
 
-    position: absolute;
+    position: fixed;
     margin: 0;
     left: 0;
     top: 0;
+    z-index: 9999;
   }
 
   .fplt-fn-indicator {

src/components/PlotModal/PlotModal.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
   export let value: string | undefined,
     placeholder = "",
-    id = "",
-    width = "initial";
+    id = "";
 </script>
 
-<input
-  type="text"
-  {id}
-  style="width: {width} "
-  spellcheck="false"
-  {placeholder}
-  bind:value
-/>
+<input type="text" {id} spellcheck="false" {placeholder} bind:value />
+
+<style>
+  input {
+    width: inherit;
+    max-width: 40ch;
+  }
+</style>

src/components/Primitives/OptionsFloater.svelte

@@ -1,6 +1,7 @@
 import type { FunctionPlotOptions } from "function-plot/dist/types";
 import type { PlotInputs } from "./common/types";
 import createStylingPlugin from "./plugins/styling";
+import createLegendsPlugin from "./plugins/legends";
 import { toFunctionPlotOptions } from "./common/utils";
 import type ObsidianFunctionPlot from "./main";
 import functionPlot, { Chart } from "function-plot";
@@ -46,7 +47,10 @@ export class FunctionPlot {
           {},
           toFunctionPlotOptions(this.options_, this.target_),
           {
-            plugins: [createStylingPlugin(this.plugin)],
+            plugins: [
+              createStylingPlugin(this.plugin),
+              createLegendsPlugin(this.options_),
+            ],
             width: 550,
             height: 350,
           }
@@ -57,6 +61,7 @@ export class FunctionPlot {
         );
       }
       if (this.chart !== undefined) {
+        this.chart.removeAllListeners("after:draw");
         this.chart.build();
         console.log("redrew chart");
       } else {

src/components/Primitives/TextInput.svelte

@@ -56,7 +56,6 @@ export default class ObsidianFunctionPlot extends Plugin {
       _ctx: MarkdownPostProcessorContext /* eslint-disable-line no-unused-vars, @typescript-eslint/no-unused-vars */
     ) => {
       const options = parseCodeBlock(source);
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       new Plot({
         target: el,
         props: {

src/fnplot.ts

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import type { PlotInputs, chartType } from "../common/types";
+
+// TODO dont show legends for functions with empty name
+export default function createLegendsPlugin(options: PlotInputs) {
+  return function legendsPlugin(instance: chartType) {
+    console.log("applying legends plugin");
+    if (!options.legends) return;
+    instance.root.append("text").attr("class", "top-left-legend");
+    const legends: { name: string; color: string }[] = [];
+    instance.options.data?.forEach((datum, index) => {
+      legends.push({
+        name: options.data[index].name ?? "",
+        color: datum.color ?? "",
+      });
+    });
+    const tll = instance.root.select(".top-left-legend");
+    console.log(legends);
+    tll.selectAll("tspan").remove();
+    legends.forEach((legend) => {
+      tll
+        .attr("y", (instance.meta.margin?.top ?? 20) / 2)
+        .attr("x", instance.meta.margin?.left ?? 10);
+      tll
+        .append("tspan")
+        .attr("fill", legend.color)
+        .text("█ " + legend.name + "\n");
+    });
+  };
+}