feat: Flexibility in adjusting collections on which layout is enacted

HEmile · Nov 5, 2023 · d7f34de · d7f34de
1 parent b9cab84
commit d7f34de
Show file tree

Hide file tree

Showing 9 changed files with 2,205 additions and 5,300 deletions.
diff --git a/docs/obsidian.css b/docs/obsidian.css
diff --git a/docs/publish.css b/docs/publish.css
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/settings.ts b/src/settings.ts
@@ -157,7 +157,7 @@ export const DefaultJugglSettings: IJugglPluginSettings = {
     autoZoom: false,
     coreStore: OBSIDIAN_STORE_NAME,
     expandInitial: true,
-    fdgdLayout: 'd3-force',
+    fdgdLayout: 'cola',
     filter: '',
     height: '100%',
     hoverEdges: false,

diff --git a/src/ui/toolbar/ToolbarLocal.svelte b/src/ui/toolbar/ToolbarLocal.svelte
@@ -14,8 +14,21 @@
     export let filterInput;
     export let filterValue;
     export let workspace: Workspace;
+    export let onDepthChange;
+
+    let depth = 1;
+    const minDepth = 0;
+    const maxDepth = 10;
     filterInput = debounce(filterInput, 500, true);
 
+    const increment = function(e) {
+        depth = Math.min(depth + 1, maxDepth);
+        onDepthChange(depth);
+    }
+    const decrement = function(e) {
+        depth = Math.max(depth - 1, minDepth);
+        onDepthChange(depth);
+    }
 </script>
 
 <div class="cy-toolbar-section">
@@ -29,6 +42,21 @@
     <ToolbarButton icon={icons.ag_workspace} onClick={workspaceModeClick} title="Workspace mode"/>
 </div>
 <div class="cy-toolbar-section">
+    <div class="juggl-inline-group">
+        <div class="input-group-prepend">
+            <button class="btn-outline-secondary btn-minus" on:click={decrement}>
+                -
+            </button>
+        </div>
+        <input class="quantity form-control" id="depth" min="0" max="10" value={depth} type="number">
+        <div class="input-group-append">
+            <button class="btn-outline-secondary btn-plus" on:click={increment}>
+                +
+            </button>
+        </div>
+    </div>
     <HelpButton {workspace}/>
 </div>
-<br /><label for="ag-filter">Filter: </label><input type="text" id="ag-filter" name="ag-filter" on:input={filterInput} value={filterValue}>
+
+
+<br /><input type="text" id="ag-filter" name="ag-filter" on:input={filterInput} value={filterValue}>
diff --git a/src/viz/layout-settings.ts b/src/viz/layout-settings.ts
@@ -1,4 +1,4 @@
-import type {Layouts} from 'cytoscape';
+import type {Collection, Layouts} from 'cytoscape';
 import {
   CLASS_ACTIVE_NODE, CLASS_EXPANDED,
   DISCRETE_LAYOUT_ANIMATION_TIME,
@@ -34,8 +34,8 @@ export class ColaGlobalLayout implements LayoutSettings {
     this.options = Object.assign({}, ColaGlobalLayout.DEFAULT, options, {animate: animate ? 'end' : false});
   }
 
-  startLayout(view: IJuggl): Layouts {
-    return view.viz.layout(this.options).start();
+  startLayout(collection: Collection): Layouts {
+    return collection.layout(this.options).start();
   }
 }
 
@@ -44,8 +44,8 @@ export class D3GlobalLayout implements LayoutSettings {
     constructor(options?: LayoutOptions, animate?: boolean) {
       this.options = Object.assign({}, D3GlobalLayout.DEFAULT, options, {animate: animate ? 'end' : false});
     }
-    startLayout(view: IJuggl): Layouts {
-      return view.viz.layout(Object.assign(this.options, {linkId: function id(d: any) {
+    startLayout(collection: Collection): Layouts {
+      return collection.layout(Object.assign(this.options, {linkId: function id(d: any) {
         return d.id;
       }, // sets the node id accessor to the specified function
       })).start();
@@ -95,8 +95,8 @@ export class GridGlobalLayout implements LayoutSettings {
   constructor(options?: LayoutOptions) {
     this.options = Object.assign({}, GridGlobalLayout.DEFAULT, options);
   }
-  startLayout(view: IJuggl): Layouts {
-    return view.viz.layout(this.options).start();
+  startLayout(collection: Collection): Layouts {
+    return collection.layout(this.options).start();
   }
 
   options: LayoutOptions;
@@ -118,8 +118,8 @@ export class DagreGlobalLayout implements LayoutSettings {
   constructor(options?: LayoutOptions) {
     this.options = Object.assign({}, DagreGlobalLayout.DEFAULT, options);
   }
-  startLayout(view: IJuggl): Layouts {
-    return view.viz.layout(this.options).start();
+  startLayout(collection: Collection): Layouts {
+    return collection.layout(this.options).start();
   }
   options: cytoscape.LayoutOptions;
   static DEFAULT = {
@@ -141,8 +141,8 @@ export class AVSDFGlobalLayout implements LayoutSettings {
   constructor(options?: LayoutOptions) {
     this.options = Object.assign({}, AVSDFGlobalLayout.DEFAULT, options);
   }
-  startLayout(view: IJuggl): Layouts {
-    return view.viz.layout( this.options).start();
+  startLayout(collection: Collection): Layouts {
+    return collection.layout( this.options).start();
   }
   options: cytoscape.LayoutOptions;
     static DEFAULT: LayoutOptions = {
@@ -164,8 +164,8 @@ export class ConcentricLayout implements LayoutSettings {
   constructor(options?: LayoutOptions) {
     this.options = Object.assign({}, ConcentricLayout.DEFAULT, options);
   }
-  startLayout(view: IJuggl): Layouts {
-    return view.viz.layout(Object.assign(this.options, {concentric: (n: NodeSingular) =>{
+  startLayout(collection: Collection): Layouts {
+    return collection.layout(Object.assign(this.options, {concentric: (n: NodeSingular) =>{
       // @ts-ignore
       if (n.hasClass(CLASS_ACTIVE_NODE)) {
         return 1000;

diff --git a/src/viz/local-mode.ts b/src/viz/local-mode.ts
@@ -30,6 +30,9 @@ export class LocalMode extends Component implements IAGMode {
     events: EventRec[] = [];
     windowEvent: any;
     toolbar: SvelteComponent;
+    depth: number = 1;
+    maxDepthForCurrentFile: number = 1;
+
     constructor(view: Juggl) {
       super();
       this.view = view;
@@ -86,6 +89,11 @@ export class LocalMode extends Component implements IAGMode {
       this.viz.endBatch();
     }
 
+    changeDepth(depth: number) {
+        console.log(`changing depth to ${depth}`);
+
+    }
+
     registerCyEvent(name: EventNames, selector: string, callback: any) {
       this.events.push({eventName: name, selector: selector, event: callback});
       if (selector) {
@@ -132,14 +140,11 @@ export class LocalMode extends Component implements IAGMode {
             this.view.searchFilter(handler.target.value);
             this.view.restartLayout();
           },
+          onDepthChange: this.changeDepth,
           filterValue: this.view.settings.filter,
           workspace: this.view.plugin.app.workspace,
         },
       });
-      // this.view.on('vizReady', (viz) => {
-      //   tb.$set({viz: viz});
-      //   tb.onSelect.bind(tb)();
-      // });
     }
 
     updateActiveFile(node: NodeCollection) {
@@ -153,8 +158,5 @@ export class LocalMode extends Component implements IAGMode {
           .connectedNodes()
           .addClass(CLASS_CONNECTED_ACTIVE_NODE)
           .union(node);
-      // this.viz.one('tap', (e) => {
-      //   e.cy.elements().removeClass(['connected-active-file', 'active-file', 'inactive-file']);
-      // });
     }
 }
diff --git a/src/viz/visualization.ts b/src/viz/visualization.ts
@@ -8,6 +8,7 @@ import {
   Workspace,
 } from 'obsidian';
 import cytoscape, {
+  Collection,
   Core,
   EdgeDefinition,
   EdgeSingular,
@@ -409,9 +410,9 @@ export class Juggl extends Component implements IJuggl {
       return edges;
     }
 
-    async expand(toExpand: NodeCollection, batch=true, triggerGraphChanged=true): Promise<IMergedToGraph> {
+    async expand(toExpand: NodeCollection, batch=true, triggerGraphChanged=true): Promise<IMergedToGraph | null> {
       if (toExpand.length === 0) {
-        return null;
+        return Promise.resolve(null);
       }
       if (batch) {
         this.viz.startBatch();
@@ -439,8 +440,8 @@ export class Juggl extends Component implements IJuggl {
     async updateStylesheet(): Promise<void> {
       const sheet = new GraphStyleSheet(this.plugin);
       const sSheet = await sheet.getStylesheet(this);
-      this.trigger('stylesheet', sheet, sSheet);
       this.viz.style(sSheet);
+      this.trigger('stylesheet', sheet, sSheet);
     }
 
     onunload(): void {
@@ -493,8 +494,9 @@ export class Juggl extends Component implements IJuggl {
       }
       const layoutSettings = parseLayoutSettings(this.settings);
       try {
-        this.trigger("layout", layoutSettings);
-        this.activeLayout = layoutSettings.startLayout(this);
+        const triggerS = {'layout': layoutSettings, 'collection': this.viz.elements()};
+        this.trigger("layout", triggerS);
+        this.activeLayout = layoutSettings.startLayout(triggerS.collection);
       } catch (e) {
         console.log(e);
       }
@@ -640,7 +642,7 @@ export class Juggl extends Component implements IJuggl {
     trigger(name: 'selectChange'): void;
     trigger(name: 'elementsChange'): void;
     trigger(name: 'vizReady', viz: Core): void;
-    trigger(name: 'layout', layout: LayoutSettings): void;
+    trigger(name: 'layout', layout: {layout: LayoutSettings, collection: Collection}): void;
     trigger(name: string, ...data: any[]): void {
       this.events.trigger(name, ...data);
     }

diff --git a/styles.css b/styles.css
@@ -208,3 +208,20 @@ button.juggl-icon-button {
     width: 50px;
     justify-content: center;
 }
+
+.juggl-inline-group {
+    max-width: 9rem;
+    display: flex;
+    align-items: center;
+    /*padding: .5rem;*/
+}
+
+.juggl-inline-group .form-control {
+    text-align: right;
+}
+
+.form-control[type="number"]::-webkit-inner-spin-button,
+.form-control[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}