From 13582a3b5be197a93c450e7cd3c49179af9d096e Mon Sep 17 00:00:00 2001 From: terrychenzw Date: Tue, 4 Jun 2024 18:43:15 +0800 Subject: [PATCH] . --- main.ts | 19 ++- manifest.json | 2 +- src/lang/locale/en.ts | 25 +++- src/lang/locale/zh.ts | 20 ++- src/settings/settings.ts | 314 +++++++++++++++++++++++++++++++++------ src/view/graphView.ts | 59 +++++++- src/view/indexView.ts | 22 +-- styles.css | 54 ++++--- 8 files changed, 420 insertions(+), 95 deletions(-) diff --git a/main.ts b/main.ts index a3f8c21..6268d46 100644 --- a/main.ts +++ b/main.ts @@ -46,6 +46,14 @@ interface ZKNavigationSettings { BranchTab: number; HeightOfBranchGraph:number; FileExtension:string; // "all" or ".md only" + SectionTab:number; + HeightOfFamilyGraph: number; + HeightOfInlinksGraph: number; + HeightOfOutlinksGraph: number; + DirectionOfBranchGraph: string, + DirectionOfFamilyGraph: string, + DirectionOfInlinksGraph: string, + DirectionOfOutlinksGraph: string, } //Default value for setting field @@ -72,7 +80,16 @@ const DEFAULT_SETTINGS: ZKNavigationSettings = { zoomPanScaleArr:[], BranchTab: 0, HeightOfBranchGraph: 530, - FileExtension: "md" + FileExtension: "md", + SectionTab: 0, + HeightOfFamilyGraph: 200, + HeightOfInlinksGraph: 200, + HeightOfOutlinksGraph: 200, + DirectionOfBranchGraph: "LR", + DirectionOfFamilyGraph: "LR", + DirectionOfInlinksGraph: "TB", + DirectionOfOutlinksGraph: "TB", + } export default class ZKNavigationPlugin extends Plugin { diff --git a/manifest.json b/manifest.json index a759faf..ce01b57 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "zettelkasten-navigation", "name": "zettelkasten navigation", - "version": "0.0.45", + "version": "0.0.46", "minAppVersion": "1.5.7", "description": "Visualize a Luhmann-style zettelkasten.", "author": "terrychenzw", diff --git a/src/lang/locale/en.ts b/src/lang/locale/en.ts index cb31723..2fa6058 100644 --- a/src/lang/locale/en.ts +++ b/src/lang/locale/en.ts @@ -1,6 +1,6 @@ export default { // setting.ts - "ZK main notes": "ZK main notes", + "ZK main notes": "Main notes", "Main notes folder location": "Main notes folder location", "Specify a folder location to identify main notes": "Specify a folder location to identify main notes", "Example: folder1/folder2": "Example: folder1/folder2", @@ -16,15 +16,15 @@ export default { '" "(blank)': '" "(blank)', '"-"(hyphen)': '"-"(hyphen)', '"_"(underscore)': '"_"(underscore)', - "ZK index file": "ZK index file", - "Indexes folder location": "Indexes folder location", + "ZK index file": "Index", + "Indexes folder location": "Index files folder location", "zk-index-graph-view": "zk-index-graph-view", "Name of index button": "Name of index button", - "Suggest mode of index modal": "Suggest mode of index modal", + "Suggest mode of index modal": "Suggestion mode of index modal", "Keyword Order": "Keyword Order", "Fuzzy Suggest": "Fuzzy Suggest", "Set red dash line for nodes with ID ends with letter": "Set red dash line for nodes with ID ends with letter", - "In order to distinguish nodes which ID ends with letter and number": "In order to distinguish nodes which ID ends with letter and number", + "In order to distinguish nodes which ID ends with letter and number": "In order to distinguish nodes which ID ends with letter or number", "Fold node toggle": "Fold node toggle", "Open the fold icon(🟡🟢)": "Open the fold icon(🟡🟢)", "zk-local-graph-view": "zk-local-graph-view", @@ -35,9 +35,20 @@ export default { "Open outlinks graph": "Open outlinks graph", "Mermaid graph to display outlinks": "Mermaid graph to display outlinks", "Height of branch graph": "Height of branch graph", - "Enter a number to set the height of branch graph in pixels.": "Enter a number to set the height of branch graph in pixels.", + "Enter a number to set the height of graph in pixels.": "Enter a number to set the height of graph in pixels.", "all file extension": "all file extension", ".md only": ".md only", + "Index graph styles": "Index graph styles", + "Height of close-relative graph": "Height of close-relative graph", + "Height of inlinks graph": "Height of inlinks graph", + "Height of outlinks graph": "Height of outlinks graph", + "direction of branch graph": "direction of branch graph", + '"LR": feft to right': '"LR": feft to right', + '"RL": right to left': '"RL": right to left', + '"TB": top to bottom': '"TB": top to bottom', + '"BT": bottom to top': '"BT": bottom to top', + "direction of graph": "direction of graph", + "Detect file extensions": "Detect file extensions", // indexView.ts "Display from : ": "Display from : ", @@ -50,7 +61,7 @@ export default { "end": "end", "title": "title", "both": "both", - "Current index: ": "Current index: ", + "Current index: ": "Current index:", // localView.ts "close relative": "close relative", diff --git a/src/lang/locale/zh.ts b/src/lang/locale/zh.ts index 1d231d6..83bdcd9 100644 --- a/src/lang/locale/zh.ts +++ b/src/lang/locale/zh.ts @@ -1,7 +1,7 @@ export default { // setting.ts "ZK main notes": "主笔记", - "Main notes folder location": "主笔记存放位置", + "Main notes folder location": "主笔记文件存放位置", "Specify a folder location to identify main notes": "指定主笔记的文件夹", "Example: folder1/folder2": "比如: 文件夹/子文件夹", "Main notes tag": "主笔记标签", @@ -16,7 +16,7 @@ export default { '" "(blank)': '" "(空格)', '"-"(hyphen)': '"-"(横线)', '"_"(underscore)': '"_"(下划线)', - "ZK index file": "关键词文件", + "ZK index file": "关键词", "Indexes folder location": "关键词文件存放位置", "zk-index-graph-view": "关键词分支视图", "Name of index button": "关键词按钮名称", @@ -24,7 +24,7 @@ export default { "Keyword Order": "顺序查找", "Fuzzy Suggest": "模糊查找", "Set red dash line for nodes with ID ends with letter": "ID为字母结尾的节点设置红色虚线框", - "In order to distinguish nodes which ID ends with letter and number": "区分：数字结尾ID vs 字母结尾ID", + "In order to distinguish nodes which ID ends with letter and number": "区分: 数字结尾ID vs 字母结尾ID", "Fold node toggle": "折叠开关", "Open the fold icon(🟡🟢)": "点击图标(🟡🟢)进行折叠", "zk-local-graph-view": "局部关系视图", @@ -35,9 +35,19 @@ export default { "Open outlinks graph": "打开出链视图", "Mermaid graph to display outlinks": "显示当前笔记及其所有出链", "Height of branch graph": "分支视图高度", - "Enter a number to set the height of branch graph in pixels.": "输入一个像素值来设置分支视图的高度.", + "Enter a number to set the height of graph in pixels.": "输入一个像素值来设置视图的高度.", "all file extension": "检索所有类型出链", ".md only": "仅检索.md类型出链", + "Index graph styles": "视图样式设置", + "Height of close-relative graph": "邻近视图高度", + "Height of inlinks graph": "入链视图高度", + "Height of outlinks graph": "出链视图高度", + "direction of graph": "树状图方向", + '"LR": feft to right': '"LR": 从左到右', + '"RL": right to left': '"RL": 从右到左', + '"TB": top to bottom': '"TB": 从上到下', + '"BT": bottom to top': '"BT": 从下到上', + "Detect file extensions": "限定出链的文件类型", // indexView.ts "Display from : ": "起点：", @@ -50,7 +60,7 @@ export default { "end": "最后一层", "title": "标题", "both": "ID + 标题", - "Current index: ": "当前关键词：", + "Current index: ": "当前关键词:", // localView.ts "close relative": "邻近", diff --git a/src/settings/settings.ts b/src/settings/settings.ts index e98b36c..15c00e2 100644 --- a/src/settings/settings.ts +++ b/src/settings/settings.ts @@ -1,5 +1,5 @@ import ZKNavigationPlugin from "main"; -import { App, Notice, PluginSettingTab, Setting, setIcon } from "obsidian"; +import { App, ButtonComponent, Notice, PluginSettingTab, Setting, setIcon } from "obsidian"; import { FolderSuggest } from "../suggester/FolderSuggester"; import { TagSuggest } from "src/suggester/TagSuggester"; import { t } from "../lang/helper"; @@ -13,13 +13,44 @@ export class ZKNavigationSettngTab extends PluginSettingTab { this.plugin = plugin; } - display() { + async display() { const { containerEl } = this; - this.containerEl.empty(); + containerEl.empty(); - new Setting(this.containerEl).setName(t("ZK main notes")).setHeading(); - new Setting(this.containerEl) + containerEl.createEl("h1", {text: "Zettelkasten Navigation"}); + + const settingTabDiv = containerEl.createDiv("zk-setting-tab"); + + const topButtonsDiv = settingTabDiv.createDiv("top-buttons-div"); + + const mainNoteButton = new ButtonComponent(topButtonsDiv); + mainNoteButton.setButtonText(t("ZK main notes")) + .onClick(()=>{ + this.openTabSection(0,topButtonsDiv); + }) + + const indexButton = new ButtonComponent(topButtonsDiv); + indexButton.setButtonText(t("ZK index file")) + .onClick(()=>{ + this.openTabSection(1,topButtonsDiv); + }) + + const indexGraphButton = new ButtonComponent(topButtonsDiv); + indexGraphButton.setButtonText(t("zk-index-graph-view")) + .onClick(()=>{ + this.openTabSection(2,topButtonsDiv); + }) + + const localGraphButton = new ButtonComponent(topButtonsDiv); + localGraphButton.setButtonText(t("zk-local-graph-view")) + .onClick(()=>{ + this.openTabSection(3,topButtonsDiv); + }) + + const mainNotesDiv = settingTabDiv.createDiv("zk-setting-section"); + //new Setting(settingTabDiv).setName(t("ZK main notes")).setHeading(); + new Setting(mainNotesDiv) .setName(t("Main notes folder location")) .setDesc(t("Specify a folder location to identify main notes")) .addSearch((cb) => { @@ -32,7 +63,7 @@ export class ZKNavigationSettngTab extends PluginSettingTab { }) }); - new Setting(this.containerEl) + new Setting(mainNotesDiv) .setName(t("Main notes tag")) .setDesc(t("Specify a tag to identify main notes")) .addSearch((cb) => { @@ -44,7 +75,7 @@ export class ZKNavigationSettngTab extends PluginSettingTab { }) }); - const IDOption = new Setting(this.containerEl) + const IDOption = new Setting(mainNotesDiv) .setName(t("Note ID field options")) .addDropdown(options => options .addOption("1", t("Option 1: Filename is note ID")) @@ -56,11 +87,11 @@ export class ZKNavigationSettngTab extends PluginSettingTab { this.plugin.saveData(this.plugin.settings); this.display(); }) - ) + ); switch (this.plugin.settings.IDFieldOption) { case "1": - new Setting(this.containerEl) + new Setting(mainNotesDiv) .setName(t("Specify a frontmatter field for note's title")) .addText((cb) => cb.setValue(this.plugin.settings.TitleField) @@ -71,7 +102,7 @@ export class ZKNavigationSettngTab extends PluginSettingTab { ); break; case "2": - new Setting(this.containerEl) + new Setting(mainNotesDiv) .setName(t("Specify a frontmatter field for note's ID")) .addText((cb) => cb.setValue(this.plugin.settings.IDField) @@ -82,7 +113,7 @@ export class ZKNavigationSettngTab extends PluginSettingTab { ); break; case "3": - new Setting(this.containerEl) + new Setting(mainNotesDiv) .setName(t("Specify a separator between ID and title")) .addDropdown(options => options .addOption(" ", t('" "(blank)')) @@ -92,7 +123,6 @@ export class ZKNavigationSettngTab extends PluginSettingTab { .onChange((value) => { this.plugin.settings.Separator = value; this.plugin.saveData(this.plugin.settings); - this.display(); }) ); break @@ -100,8 +130,9 @@ export class ZKNavigationSettngTab extends PluginSettingTab { //do nothing. } - new Setting(this.containerEl).setName(t("ZK index file")).setHeading(); - new Setting(this.containerEl) + const indexDiv = settingTabDiv.createDiv("zk-setting-section"); + //new Setting(settingTabDiv).setName(t("ZK index file")).setHeading(); + new Setting(indexDiv) .setName(t("Indexes folder location")) .addSearch((cb) => { new FolderSuggest(this.app, cb.inputEl); @@ -113,9 +144,10 @@ export class ZKNavigationSettngTab extends PluginSettingTab { }) }); - new Setting(this.containerEl).setName(t("zk-index-graph-view")).setHeading(); + const indexGraphView = settingTabDiv.createDiv("zk-setting-section"); + //new Setting(settingTabDiv).setName(t("zk-index-graph-view")).setHeading(); - new Setting(this.containerEl) + new Setting(indexGraphView) .setName(t("Name of index button")) .addText((cb) => cb.setValue(this.plugin.settings.IndexButtonText) @@ -125,7 +157,7 @@ export class ZKNavigationSettngTab extends PluginSettingTab { }) ); - new Setting(this.containerEl) + new Setting(indexGraphView) .setName(t("Suggest mode of index modal")) .addDropdown(options => options .addOption("keywordOrder", t("Keyword Order")) @@ -137,7 +169,55 @@ export class ZKNavigationSettngTab extends PluginSettingTab { }) ) - new Setting(this.containerEl) + new Setting(indexGraphView) + .setName(t("Index graph styles")) + .addExtraButton((cb)=>{ + cb.setIcon("settings") + .onClick(()=>{ + if(branchSectionDiv.getAttr("style") == "display:block"){ + branchSectionDiv.setAttribute("style","display:none") ; + }else{ + branchSectionDiv.setAttribute("style","display:block") ; + } + }) + }) + + const branchSectionDiv = indexGraphView.createDiv("zk-local-section") + + new Setting(branchSectionDiv) + .setName(t("Height of branch graph")) + .setDesc(t("Enter a number to set the height of graph in pixels.")) + .addText((cb) => { + + cb.inputEl.placeholder = "530(defaulf)"; + cb.setValue(this.plugin.settings.HeightOfBranchGraph.toString()) + .onChange((value) => { + if(/^[1-9]\d*$/.test(value)){ + this.plugin.settings.HeightOfBranchGraph = Number(value); + }else{ + this.plugin.settings.HeightOfBranchGraph = 530; + } + this.plugin.saveData(this.plugin.settings); + + }) + } + ); + + new Setting(branchSectionDiv) + .setName(t("direction of graph")) + .addDropdown(options => options + .addOption("LR", t('"LR": feft to right')) + .addOption("RL", t('"RL": right to left')) + .addOption("TB", t('"TB": top to bottom')) + .addOption("BT", t('"BT": bottom to top')) + .setValue(this.plugin.settings.DirectionOfBranchGraph) + .onChange((value) => { + this.plugin.settings.DirectionOfBranchGraph = value; + this.plugin.saveData(this.plugin.settings); + }) + ); + + new Setting(branchSectionDiv) .setName(t("Set red dash line for nodes with ID ends with letter")) .setDesc(t("In order to distinguish nodes which ID ends with letter and number")) .addToggle(toggle => toggle.setValue(this.plugin.settings.RedDashLine) @@ -147,7 +227,7 @@ export class ZKNavigationSettngTab extends PluginSettingTab { }) ); - new Setting(this.containerEl) + new Setting(branchSectionDiv) .setName(t("Fold node toggle")) .setDesc(t("Open the fold icon(🟡🟢)")) .addToggle(toggle => toggle.setValue(this.plugin.settings.FoldToggle) @@ -157,37 +237,65 @@ export class ZKNavigationSettngTab extends PluginSettingTab { }) ); - new Setting(this.containerEl) - .setName(t("Height of branch graph")) - .setDesc(t("Enter a number to set the height of branch graph in pixels.")) + const localGraphView = settingTabDiv.createDiv("zk-setting-section"); + //new Setting(settingTabDiv).setName(t("zk-local-graph-view")).setHeading(); + new Setting(localGraphView) + .setName(t("Open close-relative graph")) + .setDesc(t("Mermaid graph to display father, siblings and sons")) + .addToggle(toggle => toggle.setValue(this.plugin.settings.FamilyGraphToggle) + .onChange((value) => { + this.plugin.settings.FamilyGraphToggle = value; + this.plugin.saveData(this.plugin.settings); + }) + ).addExtraButton((cb)=>{ + + cb.setIcon("settings") + .onClick(()=>{ + if(familySectionDiv.getAttr("style") == "display:block"){ + familySectionDiv.setAttribute("style","display:none") ; + }else{ + familySectionDiv.setAttribute("style","display:block") ; + } + + }) + }) + + const familySectionDiv = localGraphView.createDiv("zk-local-section") + + new Setting(familySectionDiv) + .setName(t("Height of close-relative graph")) + .setDesc(t("Enter a number to set the height of graph in pixels.")) .addText((cb) => { - cb.inputEl.placeholder = "530(defaulf)"; - cb.setValue(this.plugin.settings.HeightOfBranchGraph.toString()) + cb.inputEl.placeholder = "200(defaulf)"; + cb.setValue(this.plugin.settings.HeightOfFamilyGraph.toString()) .onChange((value) => { if(/^[1-9]\d*$/.test(value)){ - this.plugin.settings.HeightOfBranchGraph = Number(value); + this.plugin.settings.HeightOfFamilyGraph = Number(value); }else{ - this.plugin.settings.HeightOfBranchGraph = 530; + this.plugin.settings.HeightOfFamilyGraph = 200; } this.plugin.saveData(this.plugin.settings); }) } - ); + ); - new Setting(this.containerEl).setName(t("zk-local-graph-view")).setHeading(); - new Setting(this.containerEl) - .setName(t("Open close-relative graph")) - .setDesc(t("Mermaid graph to display father, siblings and sons")) - .addToggle(toggle => toggle.setValue(this.plugin.settings.FamilyGraphToggle) - .onChange((value) => { - this.plugin.settings.FamilyGraphToggle = value; - this.plugin.saveData(this.plugin.settings); - }) - ); + new Setting(familySectionDiv) + .setName(t("direction of graph")) + .addDropdown(options => options + .addOption("LR", t('"LR": feft to right')) + .addOption("RL", t('"RL": right to left')) + .addOption("TB", t('"TB": top to bottom')) + .addOption("BT", t('"BT": bottom to top')) + .setValue(this.plugin.settings.DirectionOfFamilyGraph) + .onChange((value) => { + this.plugin.settings.DirectionOfFamilyGraph = value; + this.plugin.saveData(this.plugin.settings); + }) + ); - new Setting(this.containerEl) + new Setting(localGraphView) .setName(t("Open inlinks graph")) .setDesc(t("Mermaid graph to display inlinks")) .addToggle(toggle => toggle.setValue(this.plugin.settings.InlinksGraphToggle) @@ -195,9 +303,53 @@ export class ZKNavigationSettngTab extends PluginSettingTab { this.plugin.settings.InlinksGraphToggle = value; this.plugin.saveData(this.plugin.settings); }) - ); + ).addExtraButton((cb)=>{ + cb.setIcon("settings") + .onClick(()=>{ + if(inlinksSectionDiv.getAttr("style") == "display:block"){ + inlinksSectionDiv.setAttribute("style","display:none") ; + }else{ + inlinksSectionDiv.setAttribute("style","display:block") ; + } + }) + }) + + const inlinksSectionDiv = localGraphView.createDiv("zk-local-section") + + new Setting(inlinksSectionDiv) + .setName(t("Height of inlinks graph")) + .setDesc(t("Enter a number to set the height of graph in pixels.")) + .addText((cb) => { - new Setting(this.containerEl) + cb.inputEl.placeholder = "200(defaulf)"; + cb.setValue(this.plugin.settings.HeightOfInlinksGraph.toString()) + .onChange((value) => { + if(/^[1-9]\d*$/.test(value)){ + this.plugin.settings.HeightOfInlinksGraph = Number(value); + }else{ + this.plugin.settings.HeightOfInlinksGraph = 200; + } + this.plugin.saveData(this.plugin.settings); + + }) + } + ); + + new Setting(inlinksSectionDiv) + .setName(t("direction of graph")) + .addDropdown(options => options + .addOption("LR", t('"LR": feft to right')) + .addOption("RL", t('"RL": right to left')) + .addOption("TB", t('"TB": top to bottom')) + .addOption("BT", t('"BT": bottom to top')) + .setValue(this.plugin.settings.DirectionOfInlinksGraph) + .onChange((value) => { + this.plugin.settings.DirectionOfInlinksGraph = value; + this.plugin.saveData(this.plugin.settings); + }) + ); + + new Setting(localGraphView) .setName(t("Open outlinks graph")) .setDesc(t("Mermaid graph to display outlinks")) .addToggle(toggle => toggle.setValue(this.plugin.settings.OutlinksGraphToggle) @@ -205,17 +357,85 @@ export class ZKNavigationSettngTab extends PluginSettingTab { this.plugin.settings.OutlinksGraphToggle = value; this.plugin.saveData(this.plugin.settings); }) - ).addDropdown(options => options - .addOption("all", t("all file extension")) - .addOption("md", t(".md only")) - .setValue(this.plugin.settings.FileExtension) + ).addExtraButton((cb)=>{ + cb.setIcon("settings") + .onClick(()=>{ + if(outlinksSectionDiv.getAttr("style") == "display:block"){ + outlinksSectionDiv.setAttribute("style","display:none") ; + }else{ + outlinksSectionDiv.setAttribute("style","display:block") ; + } + }) + }) + + const outlinksSectionDiv = localGraphView.createDiv("zk-local-section") + + new Setting(outlinksSectionDiv) + .setName(t("Height of outlinks graph")) + .setDesc(t("Enter a number to set the height of graph in pixels.")) + .addText((cb) => { + + cb.inputEl.placeholder = "200(defaulf)"; + cb.setValue(this.plugin.settings.HeightOfOutlinksGraph.toString()) .onChange((value) => { - this.plugin.settings.FileExtension = value; + if(/^[1-9]\d*$/.test(value)){ + this.plugin.settings.HeightOfOutlinksGraph = Number(value); + }else{ + this.plugin.settings.HeightOfOutlinksGraph = 200; + } this.plugin.saveData(this.plugin.settings); - this.display(); + }) - ) + } + ); + + new Setting(outlinksSectionDiv) + .setName(t("direction of graph")) + .addDropdown(options => options + .addOption("LR", t('"LR": feft to right')) + .addOption("RL", t('"RL": right to left')) + .addOption("TB", t('"TB": top to bottom')) + .addOption("BT", t('"BT": bottom to top')) + .setValue(this.plugin.settings.DirectionOfOutlinksGraph) + .onChange((value) => { + this.plugin.settings.DirectionOfOutlinksGraph = value; + this.plugin.saveData(this.plugin.settings); + }) + ); + + new Setting(outlinksSectionDiv) + .setName(t("Detect file extensions")) + .addDropdown(options => options + .addOption("all", t("all file extension")) + .addOption("md", t(".md only")) + .setValue(this.plugin.settings.FileExtension) + .onChange((value) => { + this.plugin.settings.FileExtension = value; + this.plugin.saveData(this.plugin.settings); + }) + ) + + this.initDiv(topButtonsDiv); + + } + + openTabSection(selectNo:number, topButtonsDiv: HTMLDivElement){ + const sections = document.getElementsByClassName("zk-setting-section"); + const buttons = topButtonsDiv.querySelectorAll('button'); + + for(let i=0; i 1){ + panZoomTiger.zoom(1/Number(b[0])) + } + } + } + let nodeGArr = familyTreeDiv.querySelectorAll("[id^='flowchart-']"); let nodeArr = familyTreeDiv.getElementsByClassName("nodeLabel"); @@ -112,7 +126,7 @@ export class ZKGraphView extends ItemView { if (this.plugin.settings.InlinksGraphToggle == true) { let inlinkArr: TFile[] = await this.getInlinks(currentFile); - let inlinkMermaidStr: string = await this.genericLinksMermaidStr(currentFile, inlinkArr, 'in'); + let inlinkMermaidStr: string = await this.genericLinksMermaidStr(currentFile, inlinkArr, 'in',this.plugin.settings.DirectionOfInlinksGraph); const inlinksGraphContainer = graphMermaidDiv.createDiv("zk-inlinks-graph-container"); const inlinksGraphTextDiv = inlinksGraphContainer.createDiv("zk-graph-text"); @@ -124,6 +138,8 @@ export class ZKGraphView extends ItemView { inlinksDiv.id = "zk-inlinks"; let { svg } = await mermaid.render(`${inlinksDiv.id}-svg`, inlinkMermaidStr); inlinksDiv.insertAdjacentHTML('beforeend', svg); + inlinksDiv.children[0].setAttribute('width', "100%"); + inlinksDiv.children[0].setAttribute('height', `${this.plugin.settings.HeightOfInlinksGraph}px`); graphMermaidDiv.appendChild(inlinksDiv); let panZoomTiger = svgPanZoom(`#${inlinksDiv.id}-svg`, { @@ -136,6 +152,18 @@ export class ZKGraphView extends ItemView { dblClickZoomEnabled: false, zoomScaleSensitivity: 0.3, }) + + let setSvg = document.getElementById(`${inlinksDiv.id}-svg`); + + if(setSvg !== null){ + let a = setSvg.children[0].getAttr("style"); + if(typeof a == 'string'){ + let b = a.match(/\d([^\,]+)\d/g) + if(b !== null && Number(b[0]) > 1){ + panZoomTiger.zoom(1/Number(b[0])) + } + } + } let nodeGArr = inlinksDiv.querySelectorAll("[id^='flowchart-']"); @@ -180,7 +208,7 @@ export class ZKGraphView extends ItemView { outlinkArr = await this.getOutlinks(currentFile); } - let outlinkMermaidStr: string = await this.genericLinksMermaidStr(currentFile, outlinkArr, 'out'); + let outlinkMermaidStr: string = await this.genericLinksMermaidStr(currentFile, outlinkArr, 'out', this.plugin.settings.DirectionOfOutlinksGraph); const outlinksGraphContainer = graphMermaidDiv.createDiv("zk-outlinks-graph-container"); const outlinksGraphTextDiv = outlinksGraphContainer.createDiv("zk-graph-text"); @@ -192,6 +220,8 @@ export class ZKGraphView extends ItemView { outlinksDiv.id = "zk-outlinks"; let { svg } = await mermaid.render(`${outlinksDiv.id}-svg`, outlinkMermaidStr); outlinksDiv.insertAdjacentHTML('beforeend', svg); + outlinksDiv.children[0].setAttribute('width', "100%"); + outlinksDiv.children[0].setAttribute('height', `${this.plugin.settings.HeightOfOutlinksGraph}px`); graphMermaidDiv.appendChild(outlinksDiv); let panZoomTiger = svgPanZoom(`#${outlinksDiv.id}-svg`, { @@ -204,6 +234,18 @@ export class ZKGraphView extends ItemView { dblClickZoomEnabled: false, zoomScaleSensitivity: 0.3, }) + + let setSvg = document.getElementById(`${outlinksDiv.id}-svg`); + + if(setSvg !== null){ + let a = setSvg.children[0].getAttr("style"); + if(typeof a == 'string'){ + let b = a.match(/\d([^\,]+)\d/g) + if(b !== null && Number(b[0]) > 1){ + panZoomTiger.zoom(1/Number(b[0])) + } + } + } let nodeGArr = outlinksDiv.querySelectorAll("[id^='flowchart-']"); let nodeArr = outlinksDiv.getElementsByClassName("nodeLabel"); @@ -309,6 +351,7 @@ export class ZKGraphView extends ItemView { file: note, title: '', displayText: '', + ctime: '', } let nodeCache = this.app.metadataCache.getFileCache(note); @@ -491,10 +534,10 @@ export class ZKGraphView extends ItemView { } - async genericLinksMermaidStr(currentFile: TFile, linkArr: TFile[], direction: string = 'in') { + async genericLinksMermaidStr(currentFile: TFile, linkArr: TFile[], direction1: string = 'in', direction2: string) { let mermaidStr: string = `%%{ init: { 'flowchart': { 'curve': 'basis' }, - 'themeVariables':{ 'fontSize': '12px'}}}%% flowchart TB;\n` + 'themeVariables':{ 'fontSize': '12px'}}}%% flowchart ${direction2};\n` let currentNode: ZKNode[] = []; @@ -519,7 +562,7 @@ export class ZKGraphView extends ItemView { mermaidStr = mermaidStr + `${i}("${linkArr[i].basename}");\n`; } mermaidStr = mermaidStr + `style ${i} fill:#fff; \n`; - if (direction == 'in') { + if (direction1 == 'in') { mermaidStr = mermaidStr + `${i} --> ${linkArr.length};\n`; } else { mermaidStr = mermaidStr + `${linkArr.length} --> ${i};\n`; @@ -530,9 +573,9 @@ export class ZKGraphView extends ItemView { } - async genericFamilyMermaidStr(currentFile: TFile, Nodes: ZKNode[]) { + async genericFamilyMermaidStr(currentFile: TFile, Nodes: ZKNode[], direction:string) { let mermaidStr: string = `%%{ init: { 'flowchart': { 'curve': 'basis' }, - 'themeVariables':{ 'fontSize': '12px'}}}%% flowchart LR;`; + 'themeVariables':{ 'fontSize': '12px'}}}%% flowchart ${direction};`; for (let node of Nodes) { mermaidStr = mermaidStr + `${node.position}("${node.displayText}");\n`; diff --git a/src/view/indexView.ts b/src/view/indexView.ts index d2de271..31f2c35 100644 --- a/src/view/indexView.ts +++ b/src/view/indexView.ts @@ -15,6 +15,7 @@ export interface ZKNode { file: TFile; title: string; displayText: string; + ctime: string; } export class ZKIndexView extends ItemView { @@ -75,6 +76,7 @@ export class ZKIndexView extends ItemView { file: note, title: '', displayText: '', + ctime: "", } let nodeCache = this.app.metadataCache.getFileCache(note); @@ -144,7 +146,6 @@ export class ZKIndexView extends ItemView { //do nothing } - this.MainNotes.push(node); } @@ -203,7 +204,7 @@ export class ZKIndexView extends ItemView { indexMermaidDiv.empty(); await this.refreshIndexMermaid(this.plugin.settings.SelectIndex, indexMermaidDiv); - + const indexButtonDiv = toolbarDiv.createDiv("zk-index-toolbar-block"); const indexButton = new ButtonComponent(indexButtonDiv).setClass("zk-index-toolbar-button"); indexButton.setButtonText(this.plugin.settings.IndexButtonText); @@ -342,7 +343,7 @@ export class ZKIndexView extends ItemView { let branchEntranceNodeArr = await this.getBranchEntranceNode(index); - indexMermaidDiv.empty(); + indexMermaidDiv.empty(); const indexLinkDiv = indexMermaidDiv.createDiv("zk-index-link"); indexLinkDiv.empty(); @@ -350,7 +351,7 @@ export class ZKIndexView extends ItemView { const indexFile = this.app.vault.getFileByPath(index); if (indexFile) { - let link = indexLinkDiv.createEl('a', { text: `${indexFile.basename}` }); + let link = indexLinkDiv.createEl('a', { text: `【${indexFile.basename}】` }); link.addEventListener("click", (event: MouseEvent) => { if (event.ctrlKey) { @@ -376,7 +377,7 @@ export class ZKIndexView extends ItemView { for (let i = 0; i < branchEntranceNodeArr.length; i++) { let branchAllNodes = await this.getBranchNodes(branchEntranceNodeArr[i]); - let branchMermaidStr = await this.genericIndexMermaidStr(branchAllNodes, branchEntranceNodeArr[i]); + let branchMermaidStr = await this.genericIndexMermaidStr(branchAllNodes, branchEntranceNodeArr[i],this.plugin.settings.DirectionOfBranchGraph); let zkGraph = indexMermaidDiv.createEl("div", { cls: "zk-index-mermaid" }); zkGraph.id = `zk-index-mermaid-${i}`; let { svg } = await mermaid.render(`${zkGraph.id}-svg`, branchMermaidStr); @@ -384,7 +385,7 @@ export class ZKIndexView extends ItemView { zkGraph.children[0].setAttribute('width', "98%"); zkGraph.children[0].setAttribute('height', `${this.plugin.settings.HeightOfBranchGraph}px`); indexMermaidDiv.appendChild(zkGraph); - + const svgPanZoom = require("svg-pan-zoom"); let panZoomTiger = svgPanZoom(`#${zkGraph.id}-svg`, { zoomEnabled: true, @@ -560,7 +561,7 @@ export class ZKIndexView extends ItemView { const branchTabs = document.getElementsByClassName("zk-index-mermaid") indexLinkDiv.createEl('small', { text: ` >> `}); - for(let i = 0; i < branchEntranceNodeArr.length; i++){ + for(let i = 0; i < branchTabs.length; i++){ let branchTab = indexLinkDiv.createEl('span').createEl('a', { text: `🌿${i+1} `,cls:"zK-branch-tab"}); @@ -572,7 +573,10 @@ export class ZKIndexView extends ItemView { await this.openBranchTab(this.plugin.settings.BranchTab); } + + } + } async openBranchTab(tabNo:number){ @@ -690,10 +694,10 @@ export class ZKIndexView extends ItemView { } - async genericIndexMermaidStr(Nodes: ZKNode[], entranceNode: ZKNode) { + async genericIndexMermaidStr(Nodes: ZKNode[], entranceNode: ZKNode, direction: string) { let mermaidStr: string = `%%{ init: { 'flowchart': { 'curve': 'basis' }, - 'themeVariables':{ 'fontSize': '12px'}}}%% flowchart LR;\n`; + 'themeVariables':{ 'fontSize': '12px'}}}%% flowchart ${direction};\n`; for (let node of Nodes) { diff --git a/styles.css b/styles.css index 868b437..737f9f7 100644 --- a/styles.css +++ b/styles.css @@ -1,13 +1,3 @@ -/* - -This CSS file will be included with your plugin, and -available in the app when your plugin is enabled. - -If your plugin does not need CSS, delete this file. - - -*/ - .zk-index-toolbar{ background-color: rgba(var(--color-blue-rgb), 0.2); margin:10px; @@ -34,11 +24,11 @@ padding: 5px; } .zk-index-link{ - position: fixed; + position: relative; background-color: rgba(var(--color-blue-rgb), 0.2); margin:10px; margin-bottom: 5px; - margin-top: 5px; + margin-top: 0px; border-radius: 5px; padding: 5px; padding-left: 10px; @@ -47,6 +37,10 @@ padding: 5px; float:left; } +.zk-extra-buttons{ + background-color: rgba(var(--color-blue-rgb), 0.1); +} + .zk-index-link > span { padding: 5px; } @@ -62,22 +56,18 @@ padding: 5px; border-radius: 3px; border: 1px solid; } - - + .zk-graph-mermaid { background-color: rgba(var(--color-blue-rgb), 0.1); margin: 5px; border-radius: 5px; - height: 200px; display: flex; align-items: center; justify-content: center; - max-width: 100%; } .zk-graph-mermaid svg { margin: 5px; - height: 200px; } .zk-graph-text { @@ -89,4 +79,34 @@ padding: 5px; padding: 5px; width: auto; float:left; +} + +/*settings*/ +.top-buttons-div{ + display: flex; + justify-content: left; + align-items: center; + box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.5); + margin-bottom: 30px; + padding-left: 20px; +} + +.top-buttons-div button{ + margin: -2px; +} + +.top-buttons-div button:hover{ + background-color: var(--interactive-accent) !important; +} + +.top-button-select { + background-color: var(--interactive-accent) !important; +} + +.zk-local-section{ + padding: 10px; + display: none; + border-radius: 10px; + box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5); + background-color: rgba(var(--color-purple-rgb), 0.2); } \ No newline at end of file