Compact view feature Dev

src/Components/RangeSlider.ts

@@ -0,0 +1,43 @@
+
+import ExcaliBrain from "src/excalibrain-main";
+
+export class RangeSlider {
+    private slider: HTMLInputElement
+    constructor({ plugin, setVal, range, wrapper, updateIndex }:
+        {
+            plugin: ExcaliBrain,
+            setVal: (val: number) => boolean,
+            isEnabled?: () => boolean,
+            wrapper: HTMLElement,
+            range: {
+                min: number,
+                max: number,
+                step: number,
+                defalutValue?: number,
+            },
+            updateIndex: boolean,
+        }) {
+
+        this.slider = wrapper.createEl('input', { type: 'range', cls: "excalibrain-slider" });
+        this.SetRange(range);
+        this.slider.oninput = (ev) => {
+            const value = (ev.target as HTMLInputElement).value;
+            const shouldSaveSettings = setVal(parseFloat(value));
+            if (shouldSaveSettings) plugin.saveSettings();
+            plugin.scene?.reRender(updateIndex);
+        }
+    }
+
+    private SetRange(range: {
+        min: number,
+        max: number,
+        step: number,
+        defalutValue?: number,
+    }) {
+        this.slider.min = `${range.min}`;
+        this.slider.max = `${range.max}`;
+        this.slider.step = `${range.step}`;
+        this.slider.value = `${range.defalutValue ?? 1.6}`;
+    }
+
+}

src/Components/ToolsPanel.ts

@@ -7,10 +7,11 @@ import { PageSuggest } from "../Suggesters/PageSuggester";
 import { LinkTagFilter } from "./LinkTagFilter";
 import { EditableFileView, getIcon, TextFileView, WorkspaceLeaf } from "obsidian";
 import { addVerticalDivider } from "./VerticalDivider";
+import { RangeSlider } from "./RangeSlider";
 
 export class ToolsPanel {
   private wrapperDiv: HTMLDivElement;
-  private buttons: (ToggleButton|HTMLElement)[] = [];
+  private buttons: (ToggleButton|RangeSlider|HTMLElement)[] = [];
   public linkTagFilter: LinkTagFilter;
   public searchElement: HTMLInputElement;
 
@@ -449,6 +450,49 @@ export class ToolsPanel {
       })
     );
 
+    addVerticalDivider(buttonsWrapperDiv);
+
+    // ------------
+    // Display Compact Button
+    // ------------
+    this.buttons.push(
+      new ToggleButton({
+        plugin: this.plugin,
+        getVal: () => this.plugin.settings.compactView,
+        setVal: (val: boolean) => {
+          this.plugin.settings.compactView = val;
+          return true;
+        },
+        wrapper: buttonsWrapperDiv,
+        options: {
+          display: "🗃️",
+          icon: getIcon("lucide-minimize-2").outerHTML,
+          tooltip: t("COMPACT_VIEW_NAME"),
+        },
+        updateIndex: false,
+      })
+    );    
+    // ------------
+    // Display Compact factor
+    // ------------
+    this.buttons.push(
+      new RangeSlider({
+        plugin: this.plugin,
+        setVal: (val) => {
+          this.plugin.settings.compactingFactor = val;
+          return true;
+        },
+        wrapper: buttonsWrapperDiv,
+        range: {
+          min: 1,
+          max: 2,
+          step: 0.1,
+          defalutValue: this.plugin.settings.compactingFactor
+        },
+        updateIndex: false,
+      })
+    )
+
     this.contentEl.appendChild(this.wrapperDiv);
   }