Rename treeView to fileTree

Please refer to original PR by @Vikrantpalle : mermaid-js#5665 (comment)
gancena · Jan 27, 2025 · 26e6d59 · 26e6d59
1 parent 353a208
commit 26e6d59
Show file tree

Hide file tree

Showing 26 changed files with 121 additions and 121 deletions.
diff --git a/.build/jsonSchema.ts b/.build/jsonSchema.ts
@@ -25,7 +25,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'sankey',
   'block',
   'packet',
-  'treeView',
+  'fileTree',
 ] as const;
 
 /**

diff --git a/...ss/integration/rendering/treeView.spec.ts → ...ss/integration/rendering/fileTree.spec.ts b/...ss/integration/rendering/treeView.spec.ts → ...ss/integration/rendering/fileTree.spec.ts
@@ -1,16 +1,16 @@
 import { imgSnapshotTest } from '../../helpers/util';
 
-describe('TreeView Diagram', () => {
-  it('should render a simple treeView diagram', () => {
+describe('FileTree Diagram', () => {
+  it('should render a simple fileTree diagram', () => {
     imgSnapshotTest(
-      `treeView-beta
+      `fileTree-beta
             file1.ts`
     );
   });
 
-  it('should render a complex treeView diagram', () => {
+  it('should render a complex fileTree diagram', () => {
     imgSnapshotTest(
-      `treeView-beta
+      `fileTree-beta
             root
                 folder1
                     file1.js
@@ -26,9 +26,9 @@ describe('TreeView Diagram', () => {
     );
   });
 
-  it('should render a complex treeView diagram with multiple roots', () => {
+  it('should render a complex fileTree diagram with multiple roots', () => {
     imgSnapshotTest(
-      `treeView-beta
+      `fileTree-beta
             folder1
                 file1.js
                 file2.ts

diff --git a/demos/treeView.html → demos/fileTree.html b/demos/treeView.html → demos/fileTree.html
@@ -13,11 +13,11 @@
   </head>
 
   <body>
-    <h1>TreeView Diagram Demo</h1>
+    <h1>FileTree Diagram Demo</h1>
 
     <div class="diagrams">
       <pre class="mermaid">
-        treeView-beta
+        fileTree-beta
             packages
                 mermaid
                     src
@@ -28,14 +28,14 @@ <h1>TreeView Diagram Demo</h1>
       <pre class="mermaid">
         ---
         config:
-            treeView:
+            fileTree:
                 rowIndent: 40
                 lineThickness: 2
             themeVariables:
-                treeView:
+                fileTree:
                     fontSize: '30px'
         ---
-        treeView-beta
+        fileTree-beta
             packages
                 mermaid
                     src

diff --git a/demos/index.html b/demos/index.html
@@ -89,7 +89,7 @@ <h2><a href="./packet.html">Packet</a></h2>
         <h2><a href="./block.html">Layered Blocks</a></h2>
       </li>
       <li>
-        <h2><a href="./treeView.html">TreeView</a></h2>
+        <h2><a href="./fileTree.html">FileTree</a></h2>
       </li>
     </ul>
   </body>

diff --git a/docs/config/setup/interfaces/mermaid.MermaidConfig.md b/docs/config/setup/interfaces/mermaid.MermaidConfig.md
@@ -448,9 +448,9 @@ You may also use `themeCSS` to override this value.
 
 ---
 
-### treeView
+### fileTree
 
-• `Optional` **treeView**: `TreeViewDiagramConfig`
+• `Optional` **fileTree**: `FileTreeDiagramConfig`
 
 #### Defined in
 

diff --git a/docs/syntax/treeView.md → docs/syntax/fileTree.md b/docs/syntax/treeView.md → docs/syntax/fileTree.md
@@ -2,20 +2,20 @@
 >
 > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 >
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/treeView.md](../../packages/mermaid/src/docs/syntax/treeView.md).
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/fileTree.md](../../packages/mermaid/src/docs/syntax/fileTree.md).
 
-# TreeView Diagram (v\<MERMAID_RELEASE_VERSION>+)
+# FileTree Diagram (v\<MERMAID_RELEASE_VERSION>+)
 
 ## Introduction
 
-A TreeView diagram is used to represent hierarchical data in the form of a directory-like structure.
+A FileTree diagram is used to represent hierarchical data in the form of a directory-like structure.
 
 ## Syntax
 
 The structure of the tree depends only on indentation.
 
 ```
-treeView-beta
+fileTree-beta
     <folder name>
         <file name>
         <folder name>
@@ -26,15 +26,15 @@ treeView-beta
 ## Examples
 
 ```mermaid-example
-treeView-beta
+fileTree-beta
     packages
         mermaid
             src
         parser
 ```
 
 ```mermaid
-treeView-beta
+fileTree-beta
     packages
         mermaid
             src
@@ -44,13 +44,13 @@ treeView-beta
 ```mermaid-example
 ---
 config:
-    treeView:
+    fileTree:
         rowIndent: 5
     themeVariables:
-        treeView:
+        fileTree:
             fontSize: '20px'
 ---
-treeView-beta
+fileTree-beta
     packages
         mermaid
             src
@@ -60,13 +60,13 @@ treeView-beta
 ```mermaid
 ---
 config:
-    treeView:
+    fileTree:
         rowIndent: 5
     themeVariables:
-        treeView:
+        fileTree:
             fontSize: '20px'
 ---
-treeView-beta
+fileTree-beta
     packages
         mermaid
             src

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
@@ -160,7 +160,7 @@ export interface MermaidConfig {
   sankey?: SankeyDiagramConfig;
   packet?: PacketDiagramConfig;
   block?: BlockDiagramConfig;
-  treeView?: TreeViewDiagramConfig;
+  fileTree?: FileTreeDiagramConfig;
   dompurifyConfig?: DOMPurifyConfiguration;
   wrap?: boolean;
   fontSize?: number;
@@ -1462,12 +1462,12 @@ export interface BlockDiagramConfig extends BaseDiagramConfig {
   padding?: number;
 }
 /**
- * The object containing configurations specific for treeView diagrams.
+ * The object containing configurations specific for fileTree diagrams.
  *
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
- * via the `definition` "TreeViewDiagramConfig".
+ * via the `definition` "FileTreeDiagramConfig".
  */
-export interface TreeViewDiagramConfig extends BaseDiagramConfig {
+export interface FileTreeDiagramConfig extends BaseDiagramConfig {
   /**
    * Horizontal distance between rows differing by one level
    */

diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
@@ -260,8 +260,8 @@ const config: RequiredDeep<MermaidConfig> = {
   packet: {
     ...defaultConfigJson.packet,
   },
-  treeView: {
-    ...defaultConfigJson.treeView,
+  fileTree: {
+    ...defaultConfigJson.fileTree,
     useWidth: undefined,
   },
 };

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -22,7 +22,7 @@ import mindmap from '../diagrams/mindmap/detector.js';
 import sankey from '../diagrams/sankey/sankeyDetector.js';
 import { packet } from '../diagrams/packet/detector.js';
 import block from '../diagrams/block/blockDetector.js';
-import treeView from '../diagrams/treeView/detector.js';
+import fileTree from '../diagrams/fileTree/detector.js';
 import { registerLazyLoadedDiagrams } from './detectType.js';
 import { registerDiagram } from './diagramAPI.js';
 
@@ -92,6 +92,6 @@ export const addDiagrams = () => {
     packet,
     xychart,
     block,
-    treeView
+    fileTree
   );
 };
diff --git a/packages/mermaid/src/diagrams/treeView/db.ts b/packages/mermaid/src/diagrams/treeView/db.ts
@@ -1,5 +1,5 @@
-import type { TreeViewDiagramConfig } from '../../config.type.js';
-import type { TreeViewDB, Node } from './types.js';
+import type { FileTreeDiagramConfig } from '../../config.type.js';
+import type { FileTreeDB, Node } from './types.js';
 import { getConfig as getCommonConfig } from '../../config.js';
 import DEFAULT_CONFIG from '../../defaultConfig.js';
 import {
@@ -14,12 +14,12 @@ import {
 import { cleanAndMerge } from '../../utils.js';
 import { ImperativeState } from '../../utils/imperativeState.js';
 
-interface TreeViewState {
+interface FileTreeState {
   cnt: number;
   stack: Node[];
 }
 
-const state = new ImperativeState<TreeViewState>(() => ({
+const state = new ImperativeState<FileTreeState>(() => ({
   cnt: 1,
   stack: [
     {
@@ -42,10 +42,10 @@ const getRoot = () => {
 
 const getCount = () => state.records.cnt;
 
-const defaultConfig: Required<TreeViewDiagramConfig> = DEFAULT_CONFIG.treeView;
+const defaultConfig: Required<FileTreeDiagramConfig> = DEFAULT_CONFIG.fileTree;
 
-const getConfig = (): Required<TreeViewDiagramConfig> => {
-  return cleanAndMerge(defaultConfig, getCommonConfig().treeView);
+const getConfig = (): Required<FileTreeDiagramConfig> => {
+  return cleanAndMerge(defaultConfig, getCommonConfig().fileTree);
 };
 
 const addNode = (level: number, name: string) => {
@@ -62,7 +62,7 @@ const addNode = (level: number, name: string) => {
   state.records.stack.push(node);
 };
 
-const db: TreeViewDB = {
+const db: FileTreeDB = {
   clear,
   addNode,
   getRoot,

diff --git a/packages/mermaid/src/diagrams/treeView/detector.ts b/packages/mermaid/src/diagrams/treeView/detector.ts
@@ -1,10 +1,10 @@
 import type { DiagramDetector, DiagramLoader } from '../../diagram-api/types.js';
 import type { ExternalDiagramDefinition } from '../../diagram-api/types.js';
 
-const id = 'treeView';
+const id = 'fileTree';
 
 const detector: DiagramDetector = (txt) => {
-  return /^\s*treeView-beta/.test(txt);
+  return /^\s*fileTree-beta/.test(txt);
 };
 
 const loader: DiagramLoader = async () => {

diff --git a/packages/mermaid/src/diagrams/treeView/parser.ts b/packages/mermaid/src/diagrams/treeView/parser.ts
@@ -2,16 +2,16 @@ import type { ParserDefinition } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
 import { populateCommonDb } from '../common/populateCommonDb.js';
 import db from './db.js';
-import { parse, type TreeView } from '@mermaid-js/parser';
+import { parse, type FileTree } from '@mermaid-js/parser';
 
-const populate = (ast: TreeView) => {
+const populate = (ast: FileTree) => {
   populateCommonDb(ast, db);
   ast.nodes.map((node) => db.addNode(node.indent.length, node.name));
 };
 
 export const parser: ParserDefinition = {
   parse: async (input: string): Promise<void> => {
-    const ast = await parse('treeView', input);
+    const ast = await parse('fileTree', input);
     log.debug(ast);
     populate(ast);
   },

diff --git a/packages/mermaid/src/diagrams/treeView/renderer.ts b/packages/mermaid/src/diagrams/treeView/renderer.ts
@@ -1,23 +1,23 @@
 import type { DiagramRenderer, DrawDefinition } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
-import type { D3SVGElement, TreeViewDB } from './types.js';
+import type { D3SVGElement, FileTreeDB } from './types.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
-import type { TreeViewDiagramConfig } from '../../config.type.js';
+import type { FileTreeDiagramConfig } from '../../config.type.js';
 import type { Node } from './types.js';
 
 const positionLabel = (
   x: number,
   y: number,
   node: Node,
   domElem: D3SVGElement<SVGGElement>,
-  config: Required<TreeViewDiagramConfig>
+  config: Required<FileTreeDiagramConfig>
 ) => {
   const label = domElem
     .append('text')
     .text(node.name)
     .attr('dominant-baseline', 'middle')
-    .attr('class', 'treeView-node-label');
+    .attr('class', 'fileTree-node-label');
   const { height: labelHeight, width: labelWidth } = label.node()!.getBBox();
   const height = labelHeight + config.paddingY * 2;
   const width = labelWidth + config.paddingX * 2;
@@ -46,20 +46,20 @@ const positionLine = (
     .attr('x2', x2)
     .attr('y2', y2)
     .attr('stroke-width', lineThickness)
-    .attr('class', 'treeView-node-line');
+    .attr('class', 'fileTree-node-line');
 };
 
 const drawTree = (
   elem: D3SVGElement<SVGGElement>,
   root: Node,
-  config: Required<TreeViewDiagramConfig>
+  config: Required<FileTreeDiagramConfig>
 ) => {
   let totalHeight = 0;
   let totalWidth = 0;
   const drawNode = (
     elem: D3SVGElement<SVGGElement>,
     node: Node,
-    config: Required<TreeViewDiagramConfig>,
+    config: Required<FileTreeDiagramConfig>,
     depth: number
   ) => {
     const indent = depth * (config.rowIndent + config.paddingX);
@@ -102,9 +102,9 @@ const drawTree = (
 };
 
 const draw: DrawDefinition = (text, id, _ver, diagObj) => {
-  log.debug('Rendering treeView diagram\n' + text);
+  log.debug('Rendering fileTree diagram\n' + text);
 
-  const db = diagObj.db as TreeViewDB;
+  const db = diagObj.db as FileTreeDB;
   const root = db.getRoot();
   const config = db.getConfig();
 

diff --git a/packages/mermaid/src/diagrams/treeView/styles.ts b/packages/mermaid/src/diagrams/treeView/styles.ts
@@ -1,23 +1,23 @@
 import type { DiagramStylesProvider } from '../../diagram-api/types.js';
 import { cleanAndMerge } from '../../utils.js';
-import type { TreeViewDiagramStyles } from './types.js';
+import type { FileTreeDiagramStyles } from './types.js';
 
-const defaultTreeViewDiagramStyles: Required<TreeViewDiagramStyles> = {
+const defaultFileTreeDiagramStyles: Required<FileTreeDiagramStyles> = {
   fontSize: '16px',
   lineColor: 'black',
 };
 
 const styles: DiagramStylesProvider = ({
-  treeView,
+  fileTree,
 }: {
-  treeView?: TreeViewDiagramStyles;
+  fileTree?: FileTreeDiagramStyles;
 }): string => {
-  const { fontSize, lineColor } = cleanAndMerge(defaultTreeViewDiagramStyles, treeView);
+  const { fontSize, lineColor } = cleanAndMerge(defaultFileTreeDiagramStyles, fileTree);
   return `
-    .treeView-node-label {
+    .fileTree-node-label {
         font-size: ${fontSize};
     }
-    .treeView-node-line {
+    .fileTree-node-line {
         stroke: ${lineColor};
     }
     `;
-Original file line number
+Diff line change
@@ Expand Up / @@ -89,7 +89,7 @@ <h2><a href="./packet.html">Packet</a></h2> @@
             <h2><a href="./block.html">Layered Blocks</a></h2>
           </li>
           <li>
-            <h2><a href="./treeView.html">TreeView</a></h2>
+            <h2><a href="./fileTree.html">FileTree</a></h2>
           </li>
         </ul>
       </body>
@@ Expand Down @@