some more features

Author: leonhma

.github/workflows/release.yml

@@ -38,7 +38,7 @@ jobs:
           git push origin master
 
       - name: Build
-        run: yarn build
+        run: yarn build --env production
 
       - name: Upload assets to a Release
         uses: AButler/upload-release-assets@v2.0

declaration.d.ts

@@ -1 +1 @@
-declare module '*.svelte'
+declare module "*.svelte";

jest.config.ts

@@ -1,4 +1,4 @@
-console.log('jest config loaded')
+console.log("jest config loaded");
 
 export default {
   roots: ["<rootDir>/src"],

package.json

@@ -23,6 +23,7 @@
     "eslint": "^8.26.0",
     "eslint-config-prettier": "^8.5.0",
     "jest": "^29.2.2",
+    "nested-object-assign": "^1.0.4",
     "prettier": "^2.7.1",
     "sass": "^1.54.4",
     "sass-loader": "^13.0.2",
@@ -41,6 +42,7 @@
   },
   "dependencies": {
     "function-plot": "^1.23.1",
+    "html-to-image": "^1.11.3",
     "obsidian": "0.16.3"
   }
 }

src/app/CreatePlotModal.ts

@@ -1,170 +1,34 @@
-import { Editor, Modal, Setting } from "obsidian";
-import {
-  DEFAULT_PLOT_OPTIONS,
-} from "../common/defaults";
+import { Editor, Modal } from "obsidian";
 import type { PlotOptions } from "../common/types";
 import type ObsidianFunctionPlot from "../main";
-import FunctionsList from "../components/CreatePlot/FunctionsList.svelte";
-import functionPlot from "function-plot";
+import PlotModal from "../components/PlotModal/PlotModal.svelte";
+import { DEFAULT_PLOT_INPUTS } from "../common/defaults";
+import { insertPlot } from "../common/utils";
 
 export default class CreatePlotModal extends Modal {
-  options: PlotOptions;
   plugin: ObsidianFunctionPlot;
   editor: Editor;
-  rendertarget: HTMLElement;
 
   constructor(plugin: ObsidianFunctionPlot, editor: Editor) {
     super(plugin.app);
     this.plugin = plugin;
     this.editor = editor;
   }
 
-  reloadPreview() {
-    if (!this.rendertarget) return;
-    console.log(this.options)
-    functionPlot(
-      Object.assign({}, this.options, {target: this.rendertarget})
-    )
-  }
-
   async onOpen() {
-    // fix modal size
-    document
-      .getElementsByClassName("modal")[0]
-      .setAttribute(
-        "style",
-        "width: var(--max-modal-width); height: var(--max-modal-height);"
-      );
-
-    this.options = JSON.parse(JSON.stringify(DEFAULT_PLOT_OPTIONS)); // deepcopy to avoid side effects
-
-    const { contentEl } = this;
-    contentEl.empty();
-
-    // Header
-    contentEl.createEl("h1", { text: "Create a plot" });
-
-    const flex = contentEl.createDiv({
-      attr: { style: "display: flex; align-items: center" },
-    });
-
-    const settings = flex.createDiv();
-    const preview = flex.createDiv({ attr: { style: "padding: 1em" } });
-    this.rendertarget = preview.createDiv()
-    
-    preview.createEl("p", {
-      text: "Preview - Zoom is disabled while in preview",
-      attr: {
-        style: "margin: 0 3em; font-size: 0.8em; color: var(--text-faint)",
+    new PlotModal({
+      target: this.contentEl,
+      props: {
+        options: Object.assign(
+          JSON.parse(JSON.stringify(DEFAULT_PLOT_INPUTS)),
+          { renderer: this.plugin.settings.defaultRenderer }  // assign default renderer as initial dropdown state
+        ),
+        plugin: this.plugin,
+        submit: (options: PlotOptions) => {
+          insertPlot(this.plugin, this.editor, options);
+          this.close();
+        },
       },
     });
-
-    new Setting(settings).setName("Title").addText((text) => {
-      text.onChange(async (value) => {
-        this.options.title = value;
-        this.reloadPreview();
-      });
-    });
-
-    new Setting(settings).setName("Label X").addText((text) => {
-      text.onChange(async (value) => {
-        this.options.xAxis.label = value;
-        this.reloadPreview();
-      });
-    });
-    new Setting(settings).setName("Label Y").addText((text) => {
-      text.onChange(async (value) => {
-        this.options.yAxis.label = value;
-        this.reloadPreview();
-      });
-    });
-
-    /*const placeholders = ["X min", "X max", "Y min", "Y max"];
-
-    const bounds = new Setting(settings).setName("Bounds");
-
-    placeholders.forEach((placeholder, i) => {
-      bounds.addText((text) => {
-        text
-          .setPlaceholder(placeholder)
-          .onChange((value) => {
-            if (value && !isNaN(+value)) {
-              this.options.bounds[i] = +value;
-              this.reloadPreview();
-            } else {
-              this.options.bounds[i] = DEFAULT_PLOT_OPTIONS.bounds[i];
-              this.reloadPreview();
-            }
-          })
-          .inputEl.setAttribute("style", "width: 4em");
-      });
-    });*/
-
-    new Setting(settings).setName("Disable Zoom").addToggle((com) => {
-      com.setValue(this.options.disableZoom);
-      com.onChange(async (value) => {
-        this.options.disableZoom = value;
-        this.reloadPreview();
-      });
-    });
-
-    new Setting(settings).setName("Enable Grid").addToggle((com) => {
-      com.setValue(this.options.grid);
-      com.onChange(async (value) => {
-        this.options.grid = value;
-        this.reloadPreview();
-      });
-    });
-
-    const dataSetting = new Setting(settings)
-      .setName("Data")
-    dataSetting.settingEl.setAttribute("style", "display: block");
-    
-    new FunctionsList({
-      target: dataSetting.controlEl,
-      props: {
-        options: this.options,
-        reloadPreview: this.reloadPreview.bind(this),
-      }
-    })
-
-    new Setting(contentEl)
-      /*.addDropdown((com) => {
-        com
-          .addOptions(rendererOptions)
-          .setValue(this.plugin.settings.defaultRenderer)
-          .onChange((value: rendererType) => {
-            this.renderer = value;
-          });
-      })*/
-      .addButton((btn) => {
-        btn
-          .setButtonText("Plot")
-          .setCta()
-          .onClick(async () => {
-           // await this.handleFinalPlotCreate(this.options);
-          });
-      });
-  }
-
-  /*
-  async handleFinalPlotCreate(options: PlotOptions) {
-    // render and insert chosen plot using renderer
-    switch ("interactive") {
-      case "interactive":
-        renderPlotAsInteractive(this.plugin, this.editor, options);
-        break;
-      /*
-      case "image":
-        await renderPlotAsImage(this.plugin, this.editor, options);
-        break; *//*
-    }
-
-    this.close();
-  }
-  */
-
-  onClose() {
-    this.contentEl.empty();
   }
 }

src/app/SettingsTab.ts

@@ -6,8 +6,8 @@ import {
   ValueComponent,
 } from "obsidian";
 import type ObsidianFunctionPlot from "../main.js";
-import { DEFAULT_PLUGIN_SETTINGS } from "../common/defaults";
-import type { PluginSettings } from "../common/types";
+import { DEFAULT_PLUGIN_SETTINGS, rendererOptions } from "../common/defaults";
+import type { PluginSettings, rendererType } from "../common/types";
 
 export default class SettingsTab extends PluginSettingTab {
   plugin: ObsidianFunctionPlot;
@@ -30,7 +30,6 @@ export default class SettingsTab extends PluginSettingTab {
      */
 
     containerEl.createEl("h3", { text: "Default Plot Options" });
-    /*
     new Setting(containerEl)
       .setName("Default Render Type")
       .setDesc("The default renderer to use.")
@@ -44,7 +43,7 @@ export default class SettingsTab extends PluginSettingTab {
             await this.plugin.saveSettings();
           });
       });
-    */
+
     /*
      * Font Sizes
      */
@@ -200,7 +199,6 @@ export default class SettingsTab extends PluginSettingTab {
             input.setValue(this.plugin.settings[key]);
           }
           this.plugin.saveSettings();
-          // skipcq: JS-0078
           new Notice("Settings reset to default");
         });
     });