perf: ⚡️ Expand All and Collapse All render only once (#63)

* perf: ⚡️ Expand All and Collapse All render only once * Introduce setTreeDepth() function
frappe · Apr 25, 2019 · 67f9717 · 67f9717
1 parent 17295a1
commit 67f9717
Showing 1 changed file with 55 additions and 13 deletions.
diff --git a/src/rowmanager.js b/src/rowmanager.js
@@ -187,51 +187,93 @@ export default class RowManager {
         this.showRows(rowIndices);
     }
 
-    openSingleNode(rowIndex) {
+    getChildrenToShowForNode(rowIndex) {
         const row = this.datamanager.getRow(rowIndex);
         row.meta.isTreeNodeClose = false;
 
-        const childrenToShow = this.datamanager.getImmediateChildren(rowIndex);
+        return this.datamanager.getImmediateChildren(rowIndex);
+    }
+
+    openSingleNode(rowIndex) {
+        const childrenToShow = this.getChildrenToShowForNode(rowIndex);
         const visibleRowIndices = this.bodyRenderer.visibleRowIndices;
         const rowsToShow = uniq([...childrenToShow, ...visibleRowIndices]).sort(numberSortAsc);
 
         this.showRows(rowsToShow);
     }
 
-    closeSingleNode(rowIndex) {
+    getChildrenToHideForNode(rowIndex) {
         const row = this.datamanager.getRow(rowIndex);
         row.meta.isTreeNodeClose = true;
 
         const rowsToHide = this.datamanager.getChildren(rowIndex);
-        const visibleRows = this.bodyRenderer.visibleRowIndices;
-        const rowsToShow = visibleRows
-            .filter(rowIndex => !rowsToHide.includes(rowIndex))
-            .sort(numberSortAsc);
-
         rowsToHide.forEach(rowIndex => {
             const row = this.datamanager.getRow(rowIndex);
             if (!row.meta.isLeaf) {
                 row.meta.isTreeNodeClose = true;
             }
         });
 
+        return rowsToHide;
+    }
+
+    closeSingleNode(rowIndex) {
+        const rowsToHide = this.getChildrenToHideForNode(rowIndex);
+        const visibleRows = this.bodyRenderer.visibleRowIndices;
+        const rowsToShow = visibleRows
+            .filter(rowIndex => !rowsToHide.includes(rowIndex))
+            .sort(numberSortAsc);
+
         this.showRows(rowsToShow);
     }
 
     expandAllNodes() {
         let rows = this.datamanager.getRows();
         let rootNodes = rows.filter(row => !row.meta.isLeaf);
-        rootNodes.map(row => {
-            this.openSingleNode(row.meta.rowIndex);
-        });
+
+        const childrenToShow = rootNodes.map(row => this.getChildrenToShowForNode(row.meta.rowIndex)).flat();
+        const visibleRowIndices = this.bodyRenderer.visibleRowIndices;
+        const rowsToShow = uniq([...childrenToShow, ...visibleRowIndices]).sort(numberSortAsc);
+
+        this.showRows(rowsToShow);
     }
 
     collapseAllNodes() {
         let rows = this.datamanager.getRows();
         let rootNodes = rows.filter(row => row.meta.indent === 0);
-        rootNodes.map(row => {
-            this.closeSingleNode(row.meta.rowIndex);
+
+        const rowsToHide = rootNodes.map(row => this.getChildrenToHideForNode(row.meta.rowIndex)).flat();
+        const visibleRows = this.bodyRenderer.visibleRowIndices;
+        const rowsToShow = visibleRows
+            .filter(rowIndex => !rowsToHide.includes(rowIndex))
+            .sort(numberSortAsc);
+
+        this.showRows(rowsToShow);
+    }
+
+    setTreeDepth(depth) {
+        let rows = this.datamanager.getRows();
+
+        const rowsToOpen = rows.filter(row => row.meta.indent < depth);
+        const rowsToClose = rows.filter(row => row.meta.indent >= depth);
+        const rowsToHide = rowsToClose.filter(row => row.meta.indent > depth);
+
+        rowsToClose.forEach(row => {
+            if (!row.meta.isLeaf) {
+                row.meta.isTreeNodeClose = true;
+            }
         });
+        rowsToOpen.forEach(row => {
+            if (!row.meta.isLeaf) {
+                row.meta.isTreeNodeClose = false;
+            }
+        });
+
+        const rowsToShow = rows
+            .filter(row => !rowsToHide.includes(row))
+            .map(row => row.meta.rowIndex)
+            .sort(numberSortAsc);
+        this.showRows(rowsToShow);
     }
 
     getRow$(rowIndex) {