feat: single column mode

Author: ycnmhd

package-lock.json

@@ -1,57 +1,58 @@
 {
-  "name": "lineage",
-  "version": "0.7.0-beta",
-  "description": "",
-  "scripts": {
-    "dev": "node esbuild.config.mjs",
-    "build": "tsc -noEmit -skipLibCheck && svelte-check --workspace src && node esbuild.config.mjs production",
-    "version": "node version-bump.mjs && git add manifest.json versions.json",
-    "test:watch": "vitest",
-    "test": "vitest run",
-    "test:e2e": "playwright test",
-    "prepare": "husky install"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
-  "devDependencies": {
-    "@codemirror/language": "6.9.1",
-    "@commitlint/cli": "17.4.0",
-    "@commitlint/config-conventional": "17.4.0",
-    "@playwright/test": "1.42.1",
-    "@tsconfig/svelte": "5.0.2",
-    "@types/electron": "1.6.10",
-    "@types/node": "20.11.24",
-    "@types/uniqid": "5.3.4",
-    "@typescript-eslint/eslint-plugin": "7.1.0",
-    "@typescript-eslint/parser": "7.1.0",
-    "builtin-modules": "3.3.0",
-    "classnames": "2.5.1",
-    "dotenv": "16.4.5",
-    "esbuild": "0.20.1",
-    "esbuild-plugin-inline-worker": "0.1.1",
-    "esbuild-svelte": "0.8.0",
-    "eslint": "8.57.0",
-    "eslint-plugin-svelte": "2.35.1",
-    "fuse.js": "7.0.0",
-    "husky": "8.0.3",
-    "jsdom": "24.0.0",
-    "lint-staged": "13.3.0",
-    "lucide-svelte": "0.344.0",
-    "monkey-around": "3.0.0",
-    "nanoid": "5.0.6",
-    "obsidian": "1.5.7-1",
-    "prettier": "3.2.5",
-    "prettier-plugin-svelte": "3.2.2",
-    "svelte": "4.2.12",
-    "svelte-check": "3.6.7",
-    "svelte-eslint-parser": "0.33.1",
-    "svelte-preprocess": "5.1.3",
-    "tiny-invariant": "1.3.3",
-    "tslib": "2.6.2",
-    "typescript": "5.3.3",
-    "vitest": "1.3.1",
-    "@types/diff": "^5.2.1",
-    "diff": "^5.2.0"
-  }
+    "name": "lineage",
+    "version": "0.7.0-beta",
+    "description": "",
+    "scripts": {
+        "dev": "node esbuild.config.mjs",
+        "build": "tsc -noEmit -skipLibCheck && svelte-check --workspace src && node esbuild.config.mjs production",
+        "version": "node version-bump.mjs && git add manifest.json versions.json",
+        "test:watch": "vitest",
+        "test": "vitest run",
+        "test:e2e": "playwright test",
+        "prepare": "husky install"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "MIT",
+    "devDependencies": {
+        "@commitlint/cli": "17.4.0",
+        "@commitlint/config-conventional": "17.4.0",
+        "@playwright/test": "1.42.1",
+        "@tsconfig/svelte": "5.0.2",
+        "@types/diff": "5.2.1",
+        "@types/electron": "1.6.10",
+        "@types/node": "20.11.24",
+        "@types/uniqid": "5.3.4",
+        "@typescript-eslint/eslint-plugin": "7.1.0",
+        "@typescript-eslint/parser": "7.1.0",
+        "builtin-modules": "3.3.0",
+        "dotenv": "16.4.5",
+        "esbuild": "0.20.1",
+        "esbuild-plugin-inline-worker": "0.1.1",
+        "esbuild-svelte": "0.8.0",
+        "eslint": "8.57.0",
+        "eslint-plugin-svelte": "2.35.1",
+        "husky": "8.0.3",
+        "jsdom": "24.0.0",
+        "lint-staged": "13.3.0",
+        "prettier": "3.2.5",
+        "prettier-plugin-svelte": "3.2.2",
+        "svelte": "4.2.12",
+        "svelte-check": "3.6.7",
+        "svelte-eslint-parser": "0.33.1",
+        "svelte-preprocess": "5.1.3",
+        "tslib": "2.6.2",
+        "typescript": "5.3.3",
+        "vitest": "1.3.1"
+    },
+    "dependencies": {
+        "classnames": "2.5.1",
+        "diff": "5.2.0",
+        "fuse.js": "7.0.0",
+        "lucide-svelte": "0.344.0",
+        "monkey-around": "3.0.0",
+        "nanoid": "5.0.6",
+        "obsidian": "1.7.2",
+        "tiny-invariant": "1.3.3"
+    }
 }

package.json

@@ -0,0 +1,34 @@
+import { Column } from 'src/stores/document/document-state-type';
+
+/** maps an array of columns into a single nodes array that is sorted logically (1, 1.1, 2 ...) */
+export const sortTreeNodes = (columns: Column[]): string[] => {
+    const sortedNodes: string[] = [];
+    const stack: { nodeId: string; columnIndex: number }[] = [];
+
+    for (const group of columns[0].groups) {
+        for (let i = group.nodes.length - 1; i >= 0; i--) {
+            stack.push({ nodeId: group.nodes[i], columnIndex: 0 });
+        }
+    }
+
+    while (stack.length > 0) {
+        const item = stack.pop()!;
+        sortedNodes.push(item.nodeId);
+
+        if (item.columnIndex + 1 < columns.length) {
+            const nextColumn = columns[item.columnIndex + 1];
+            for (const group of nextColumn.groups) {
+                if (group.parentId === item.nodeId) {
+                    for (let i = group.nodes.length - 1; i >= 0; i--) {
+                        stack.push({
+                            nodeId: group.nodes[i],
+                            columnIndex: item.columnIndex + 1,
+                        });
+                    }
+                }
+            }
+        }
+    }
+
+    return sortedNodes;
+};

src/lib/tree-utils/sort/sort-tree-nodes.ts

@@ -192,7 +192,19 @@ const createCommands = (plugin: Lineage) => {
             });
         },
     });
-
+    commands.push({
+        name: 'Toggle single column mode',
+        icon: 'rectangle-vertical',
+        checkCallback: (checking) => {
+            const view = getActiveLineageView(plugin);
+            if (checking) {
+                return Boolean(view);
+            }
+            view!.plugin.settings.dispatch({
+                type: 'settings/view/modes/toggle-single-column',
+            });
+        },
+    });
     return commands;
 };
 

src/obsidian/commands/add-commands.ts

@@ -9,7 +9,9 @@ export function setViewState(next: (...params: unknown[]) => unknown) {
         const path = state?.state?.file;
         if (
             isMarkdownView &&
+            // @ts-ignore
             fileViewTypeCache[path]?.viewType === LINEAGE_VIEW_TYPE &&
+            // @ts-ignore
             !state.state.inlineEditor
         ) {
             const newState = {

src/obsidian/patches/set-view-state.ts

@@ -3,3 +3,8 @@ import { derived } from 'src/lib/store/derived';
 
 export const columnsStore = (view: LineageView) =>
     derived(view.documentStore, (state) => state.document.columns);
+
+export const singleColumnStore = (view: LineageView) =>
+    derived(view.documentStore, (state) => {
+        return [state.document.columns[0]];
+    });

src/stores/document/derived/columns-store.ts

@@ -18,3 +18,9 @@ export const groupsStore = (view: LineageView, columnId: string) => {
         return column.groups;
     });
 };
+
+export const singleColumnGroupStore = (view: LineageView) => {
+    return derived(view.documentStore, (state) => {
+        return state.document.columns[0].groups;
+    });
+};

src/stores/document/derived/groups-store.ts

@@ -2,6 +2,7 @@ import { LineageView } from 'src/view/view';
 import { derived } from 'src/lib/store/derived';
 import { Column, NodeGroup } from 'src/stores/document/document-state-type';
 import { findColumn } from 'src/stores/document/derived/groups-store';
+import { sortTreeNodes } from 'src/lib/tree-utils/sort/sort-tree-nodes';
 
 export const findGroup = (
     columns: Column[],
@@ -30,3 +31,9 @@ export const nodesStore = (
         return group.nodes;
     });
 };
+
+export const singleColumnNodesStore = (view: LineageView) => {
+    return derived(view.documentStore, (state) => {
+        return sortTreeNodes(state.document.columns);
+    });
+};

src/stores/document/derived/nodes-store.ts

@@ -3,6 +3,7 @@ import { Settings } from './settings-type';
 export const DEFAULT_CARD_WIDTH = 550;
 export const DEFAULT_COLUMNS_GAP = 150;
 export const DEFAULT_CARDS_GAP = 150;
+export const DEFAULT_INDENTATION_WIDTH = 60;
 export const DEFAULT_SETTINGS = (): Settings => ({
     documents: {},
     hotkeys: {
@@ -25,6 +26,8 @@ export const DEFAULT_SETTINGS = (): Settings => ({
         leftSidebarWidth: 500,
         leftSidebarActiveTab: 'pinned-cards',
         applyGapBetweenCards: false,
+        singleColumnMode: false,
+        nodeIndentationWidth: DEFAULT_INDENTATION_WIDTH,
     },
     general: {
         defaultDocumentFormat: 'sections',

src/stores/settings/default-settings.ts

@@ -15,3 +15,6 @@ export const LeftSidebarActiveTabStore = (view: LineageView) =>
 
 export const ApplyGapBetweenCardsStore = (view: LineageView) =>
     derived(view.plugin.settings, (state) => state.view.applyGapBetweenCards);
+
+export const SingleColumnMode = (view: LineageView) =>
+    derived(view.plugin.settings, (state) => state.view.singleColumnMode);