Merge pull request #11 from ongaeshi/feature/export-filtered-rivers-to-canvas

ongaeshi · web-flow · commit a315b3e112cc · 2026-04-26T18:52:55.000+09:00
0.4.1
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,5 +1,8 @@
 # History
 
+## 0.4.1 (2026-04-26)
+- **Export filtered rivers to Canvas**: Add a command to export a customized subset of your note network to an Obsidian Canvas based on specific filters.
+
 ## 0.4.0 (2026-04-24)
 - **Export next notes to Canvas**: Add a command to export the entire tree structure of next notes derived from the current note to an Obsidian Canvas. Automatically detect loop structures and add a `🔄` icon to the originating note for visualization.
 - **Export all previous links to Canvas**: Add a command to analyze all `previous` property connections across the entire vault and export the full network as a Canvas file.
diff --git a/lib/ExportFilterModal.ts b/lib/ExportFilterModal.ts
@@ -0,0 +1,150 @@
+import { App, Modal, Setting } from "obsidian";
+
+export interface ExportFilterResult {
+    directory: string;
+    tag: string;
+    link: string;
+    property: string;
+    width: string;
+    height: string;
+    maxColumns: string;
+    exportAll: boolean;
+}
+
+let lastExportFilterResult: ExportFilterResult | null = null;
+
+export class ExportFilterModal extends Modal {
+    directory: string;
+    tag: string;
+    link: string;
+    property: string;
+    width: string;
+    height: string;
+    maxColumns: string;
+    exportAll: boolean;
+    onSubmit: (result: ExportFilterResult) => void;
+
+    constructor(app: App, onSubmit: (result: ExportFilterResult) => void) {
+        super(app);
+        this.onSubmit = onSubmit;
+        if (lastExportFilterResult) {
+            this.directory = lastExportFilterResult.directory;
+            this.tag = lastExportFilterResult.tag;
+            this.link = lastExportFilterResult.link;
+            this.property = lastExportFilterResult.property;
+            this.width = lastExportFilterResult.width;
+            this.height = lastExportFilterResult.height;
+            this.maxColumns = lastExportFilterResult.maxColumns;
+            this.exportAll = lastExportFilterResult.exportAll;
+        } else {
+            this.directory = '';
+            this.tag = '';
+            this.link = '';
+            this.property = '';
+            this.width = '400';
+            this.height = '500';
+            this.maxColumns = '5';
+            this.exportAll = false;
+        }
+    }
+
+    onOpen() {
+        const { contentEl } = this;
+        contentEl.createEl("h2", { text: "Export Connected Notes by Filter" });
+
+        const dirSetting = new Setting(contentEl)
+            .setName("Directory")
+            .setDesc("Export notes under this directory (e.g., 01_Projects)")
+            .addText(text => text
+                .setValue(this.directory)
+                .onChange(value => this.directory = value));
+
+        const propSetting = new Setting(contentEl)
+            .setName("Property")
+            .setDesc("Use with Link or Tag: Only search in this property")
+            .addText(text => text
+                .setValue(this.property)
+                .onChange(value => this.property = value));
+
+        const linkSetting = new Setting(contentEl)
+            .setName("Link")
+            .setDesc("Export notes containing this link (e.g., Some Concept)")
+            .addText(text => text
+                .setValue(this.link)
+                .onChange(value => this.link = value));
+
+        const tagSetting = new Setting(contentEl)
+            .setName("Tag")
+            .setDesc("Export notes containing this tag (e.g., #idea)")
+            .addText(text => text
+                .setValue(this.tag)
+                .onChange(value => this.tag = value));
+
+        new Setting(contentEl)
+            .setName("Search all elements")
+            .setDesc("Ignore filters above and export all connected notes")
+            .addToggle(toggle => toggle
+                .setValue(this.exportAll)
+                .onChange(value => {
+                    this.exportAll = value;
+                    dirSetting.setDisabled(value);
+                    tagSetting.setDisabled(value);
+                    linkSetting.setDisabled(value);
+                    propSetting.setDisabled(value);
+                }));
+
+        // Apply initial disabled state based on this.exportAll
+        if (this.exportAll) {
+            dirSetting.setDisabled(true);
+            tagSetting.setDisabled(true);
+            linkSetting.setDisabled(true);
+            propSetting.setDisabled(true);
+        }
+
+        new Setting(contentEl)
+            .setName("Width")
+            .setDesc("Default: 400")
+            .addText(text => text
+                .setValue(this.width)
+                .onChange(value => this.width = value));
+
+        new Setting(contentEl)
+            .setName("Height")
+            .setDesc("Default: 500")
+            .addText(text => text
+                .setValue(this.height)
+                .onChange(value => this.height = value));
+
+        new Setting(contentEl)
+            .setName("Max Columns")
+            .setDesc("Default: 5")
+            .addText(text => text
+                .setValue(this.maxColumns)
+                .onChange(value => this.maxColumns = value));
+
+        new Setting(contentEl)
+            .addButton(btn => btn
+                .setButtonText("Export")
+                .setCta()
+                .onClick(() => {
+                    this.close();
+                    const result: ExportFilterResult = {
+                        directory: this.directory,
+                        tag: this.tag,
+                        link: this.link,
+                        property: this.property,
+                        width: this.width,
+                        height: this.height,
+                        maxColumns: this.maxColumns,
+                        exportAll: this.exportAll
+                    };
+                    lastExportFilterResult = result;
+                    this.onSubmit(result);
+                }));
+    }
+
+    onClose() {
+        const { contentEl } = this;
+        contentEl.empty();
+    }
+}
diff --git a/lib/canvas.ts b/lib/canvas.ts
@@ -28,14 +28,22 @@ export function randomId(): string {
     return Math.random().toString(36).substring(2, 18);
 }
 
+export interface CanvasGeneratorOptions {
+    width?: number;
+    height?: number;
+    maxColumns?: number;
+}
+
 export class CanvasGenerator {
     nodes: CanvasNode[] = [];
     edges: CanvasEdge[] = [];
     fileToNodeId = new Map<string, string>();
     maxUsedY = 0;
-    MAX_COLUMNS = 5;
+    MAX_COLUMNS: number;
 
-    constructor(private app: App, private reverseCache: Record<string, string[]>) { }
+    constructor(private app: App, private reverseCache: Record<string, string[]>, private options?: CanvasGeneratorOptions) {
+        this.MAX_COLUMNS = options?.maxColumns || 5;
+    }
 
     dfs(current: TFile, col: number, y: number, direction: number): string {
         const existingNodeId = this.fileToNodeId.get(current.path);
@@ -46,14 +54,19 @@ export class CanvasGenerator {
         const nodeId = randomId();
         this.fileToNodeId.set(current.path, nodeId);
 
+        const width = this.options?.width || 400;
+        const height = this.options?.height || 500;
+        const xStep = width + 100;
+        const yStep = height + 100;
+
         this.nodes.push({
             id: nodeId,
             type: "file",
             file: current.path,
-            x: col * 500,
+            x: col * xStep,
             y: y,
-            width: 400,
-            height: 500
+            width: width,
+            height: height
         });
 
         if (y > this.maxUsedY) {
@@ -69,14 +82,14 @@ export class CanvasGenerator {
             if (first) {
                 first = false;
             } else {
-                this.maxUsedY += 600;
+                this.maxUsedY += yStep;
                 nextY = this.maxUsedY;
             }
 
             let isWrapped = false;
             if (nextCol >= this.MAX_COLUMNS) {
                 nextCol = 0;
-                nextY += 600;
+                nextY += yStep;
                 if (nextY > this.maxUsedY) this.maxUsedY = nextY;
                 isWrapped = true;
             }
diff --git a/lib/commands.ts b/lib/commands.ts
@@ -3,6 +3,7 @@ import { ConfirmModal } from "./ConfirmModal";
 import { NextNoteSuggestModal } from "./NextNoteSuggestModal";
 import { getActiveFile, getPreviousNote, getNextNotes, getNextNotesWithCache, buildReverseCache, detachNote, setPreviousProperty, findLastNote, findFirstNote, isOnSamePath } from "./obsidian";
 import { CanvasGenerator, saveCanvasData } from "./canvas";
+import { ExportFilterModal } from "./ExportFilterModal";
 
 export async function goToPreviousNoteCommand(app: App) {
     const file = getActiveFile(app);
@@ -350,3 +351,144 @@ export function exportAllRiversToCanvasCommand(app: App) {
         }
     ).open();
 }
+
+export function exportFilteredRiversToCanvasCommand(app: App) {
+    new ExportFilterModal(app, async (result) => {
+        let { directory, tag, link, property, width, height, maxColumns, exportAll } = result;
+        if (!exportAll && !directory && !tag && !link) {
+            new Notice("Please provide at least one filter criterion or check 'Search all elements'.");
+            return;
+        }
+
+        tag = tag.trim();
+        link = link.trim();
+        directory = directory.trim();
+        property = property?.trim();
+
+        if (tag && !tag.startsWith("#")) {
+            tag = "#" + tag;
+        }
+
+        const allFiles = app.vault.getMarkdownFiles();
+        let matchedFiles: TFile[] = [];
+
+        if (exportAll) {
+            matchedFiles = allFiles;
+        } else {
+            for (const file of allFiles) {
+                let match = true;
+
+                if (directory && !file.path.includes(directory)) {
+                    match = false;
+                }
+
+                if (match && (tag || link)) {
+                    const cache = app.metadataCache.getFileCache(file);
+                    
+                    if (tag) {
+                        let allTags: string[] = [];
+
+                        if (property) {
+                            const propertyValue = cache?.frontmatter?.[property];
+                            let propertyTags: string[] = [];
+                            if (Array.isArray(propertyValue)) {
+                                propertyTags = propertyValue.map(t => String(t).trim());
+                            } else if (typeof propertyValue === 'string') {
+                                propertyTags = propertyValue.split(",").map(t => t.trim());
+                            }
+                            allTags = propertyTags.map(t => t.startsWith("#") ? t : "#" + t);
+                        } else {
+                            const fileTags = cache?.tags?.map(t => t.tag) || [];
+                            const frontmatterTagsFromCache = cache?.frontmatter?.tags;
+                            
+                            let fmTags: string[] = [];
+                            if (Array.isArray(frontmatterTagsFromCache)) {
+                                fmTags = frontmatterTagsFromCache;
+                            } else if (typeof frontmatterTagsFromCache === 'string') {
+                                fmTags = frontmatterTagsFromCache.split(",").map(t => t.trim());
+                            }
+
+                            allTags = [...fileTags, ...fmTags.map(t => t.startsWith("#") ? t : "#" + t)];
+                        }
+
+                        const hasTag = allTags.some(t => t === tag || t.startsWith(tag + "/"));
+                        if (!hasTag) match = false;
+                    }
+
+                    if (match && link) {
+                        if (property) {
+                            const fileFrontmatterLinks = cache?.frontmatterLinks?.filter(l => l.key === property) || [];
+                            const hasLink = fileFrontmatterLinks.some(l => l.link.includes(link));
+                            if (!hasLink) match = false;
+                        } else {
+                            const fileLinks = cache?.links?.map(l => l.link) || [];
+                            const fileEmbeds = cache?.embeds?.map(e => e.link) || [];
+                            const fileFrontmatterLinks = cache?.frontmatterLinks?.map(l => l.link) || [];
+                            const allLinks = [...fileLinks, ...fileEmbeds, ...fileFrontmatterLinks];
+                            const hasLink = allLinks.some(l => l.includes(link));
+                            if (!hasLink) match = false;
+                        }
+                    }
+                }
+
+                if (match) {
+                    matchedFiles.push(file);
+                }
+            }
+        }
+
+        if (matchedFiles.length === 0) {
+            new Notice("No files matched the given criteria.");
+            return;
+        }
+
+        const reverseCache = buildReverseCache(app);
+
+        const roots = new Set<TFile>();
+        for (const file of matchedFiles) {
+            const prev = getPreviousNote(app, file);
+            const nexts = getNextNotesWithCache(app, file, reverseCache);
+            
+            // Skip isolated notes that do not belong to any river
+            if (!prev && nexts.length === 0) {
+                continue;
+            }
+
+            const root = findFirstNote(app, file);
+            roots.add(root);
+        }
+        
+        const numWidth = parseInt(width);
+        const numHeight = parseInt(height);
+        const numMaxColumns = parseInt(maxColumns);
+        
+        const generatorOptions = {
+            width: isNaN(numWidth) ? 400 : numWidth,
+            height: isNaN(numHeight) ? 500 : numHeight,
+            maxColumns: isNaN(numMaxColumns) ? 5 : numMaxColumns
+        };
+        
+        const generator = new CanvasGenerator(app, reverseCache, generatorOptions);
+        let currentY = 0;
+
+        for (const root of roots) {
+            if (generator.fileToNodeId.has(root.path)) continue;
+            
+            generator.dfs(root, 0, currentY, 1);
+            currentY = generator.maxUsedY + 1000;
+        }
+        
+        if (generator.nodes.length === 0) {
+             new Notice("No connected notes found for the matched files.");
+             return;
+        }
+
+        const activeFile = getActiveFile(app);
+        const sourcePath = activeFile ? activeFile.path : "";
+        const canvasName = "Filtered Connected Notes.canvas";
+        const saveDir = app.fileManager.getNewFileParent(sourcePath, "Filtered Connected Notes.md").path;
+
+        await saveCanvasData(app, generator.nodes, generator.edges, canvasName, saveDir);
+
+    }).open();
+}
diff --git a/main.ts b/main.ts
@@ -10,7 +10,8 @@ import {
   insertNoteToFirstCommand,
   copyNextNotesListCommand,
   exportNextNotesToCanvasCommand,
-  exportAllRiversToCanvasCommand
+  exportAllRiversToCanvasCommand,
+  exportFilteredRiversToCanvasCommand
 } from "./lib/commands";
 
 export default class PreviousRiverPlugin extends Plugin {
@@ -80,5 +81,11 @@ export default class PreviousRiverPlugin extends Plugin {
       name: "Export all rivers to canvas",
       callback: () => exportAllRiversToCanvasCommand(this.app),
     });
+
+    this.addCommand({
+      id: "export-filtered-rivers-to-canvas",
+      name: "Export filtered rivers to canvas",
+      callback: () => exportFilteredRiversToCanvasCommand(this.app),
+    });
   }
 }
diff --git a/manifest.json b/manifest.json
diff --git a/tests/vault/previous-river-test/All Connected Notes.canvas b/tests/vault/previous-river-test/All Connected Notes.canvas
