keep ranges open

Saira-A · Aug 22, 2024 · 892453c · 892453c
1 parent c0f2b10
commit 892453c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 35 deletions.
diff --git a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts
@@ -754,26 +754,23 @@ export class ContentLeftPanel extends LeftPanel<ContentLeftPanelConfig> {
   selectCurrentTreeNodeByRange(): void {
     if (this.treeView) {
       const range: Range | null = this.extension.helper.getCurrentRange();
-      let node: TreeNode | null = null;
-
       if (range && range.treeNode) {
-        node = this.treeView.getNodeById(range.treeNode.id);
-      }
-
-      if (node) {
-        this.treeView.selectNode(<TreeNode>node);
-      } else {
-        this.selectTreeNodeByManifest();
+        const node = this.treeView.getNodeById(range.treeNode.id);
+        if (node) {
+          this.treeView.selectNode(node);
+        } else {
+          this.selectTreeNodeByManifest();
+        }
       }
     }
   }
 
   selectCurrentTreeNodeByCanvas(): void {
     if (this.treeView) {
       let node: TreeNode | null = null;
-      const currentCanvasTopRangeIndex: number = this.getCurrentCanvasTopRangeIndex();
-      const selectedTopRangeIndex: number = this.getSelectedTopRangeIndex();
-      const usingCorrectTree: boolean =
+      const currentCanvasTopRangeIndex = this.getCurrentCanvasTopRangeIndex();
+      const selectedTopRangeIndex = this.getSelectedTopRangeIndex();
+      const usingCorrectTree =
         currentCanvasTopRangeIndex === selectedTopRangeIndex;
       let range: Range | null = null;
 
@@ -793,7 +790,7 @@ export class ContentLeftPanel extends LeftPanel<ContentLeftPanelConfig> {
       // }
 
       if (node && usingCorrectTree) {
-        this.treeView.selectNode(<TreeNode>node);
+        this.treeView.selectNode(node);
       } else {
         range = this.extension.helper.getCurrentRange();
 
@@ -802,7 +799,7 @@ export class ContentLeftPanel extends LeftPanel<ContentLeftPanelConfig> {
         }
 
         if (node) {
-          this.treeView.selectNode(<TreeNode>node);
+          this.treeView.selectNode(node);
         } else {
           this.selectTreeNodeByManifest();
         }

diff --git a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/TreeView.ts b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/TreeView.ts
@@ -10,6 +10,7 @@ export class TreeView extends BaseView<ContentLeftPanel> {
   treeComponent: any;
   treeData: any;
   $tree: JQuery;
+  private expandedNodeIds: Set<string> = new Set();
 
   constructor($element: JQuery) {
     super($element, true, true);
@@ -23,32 +24,51 @@ export class TreeView extends BaseView<ContentLeftPanel> {
   }
 
   setup(): void {
-    const that = this;
-
     this.treeComponent = new TreeComponent({
       target: <HTMLElement>this.$tree[0],
       data: this.treeData,
     });
 
     this.treeComponent.on(
       "treeNodeSelected",
-      function(node: TreeNode) {
-        that.extensionHost.publish(IIIFEvents.TREE_NODE_SELECTED, node);
+      (node: TreeNode) => {
+        this.extensionHost.publish(IIIFEvents.TREE_NODE_SELECTED, node);
       },
       false
     );
 
     this.treeComponent.on(
       "treeNodeMultiSelected",
-      function(node: TreeNode) {
-        that.extensionHost.publish(IIIFEvents.TREE_NODE_MULTISELECTED, node);
+      (node: TreeNode) => {
+        this.extensionHost.publish(IIIFEvents.TREE_NODE_MULTISELECTED, node);
       },
       false
     );
   }
 
+  private saveState(): void {
+    const allNodes = this.treeComponent.getAllNodes();
+    this.expandedNodeIds.clear();
+    allNodes.forEach(node => {
+      if (node.expanded) {
+        this.expandedNodeIds.add(node.id);
+      }
+    });
+  }
+
+  private restoreState(): void {
+    const allNodes = this.treeComponent.getAllNodes();
+    allNodes.forEach(node => {
+      if (this.expandedNodeIds.has(node.id)) {
+        this.treeComponent.expandNode(node, true);
+      }
+    });
+  }
+
   public databind(): void {
+    this.saveState(); 
     this.treeComponent.set(this.treeData);
+    this.restoreState(); 
     this.resize();
   }
 
@@ -63,37 +83,33 @@ export class TreeView extends BaseView<ContentLeftPanel> {
   }
 
   public selectNode(node: TreeNode): void {
-    if (!this.treeComponent.selectedNode) {
-      this.treeComponent.expandParents(node, true);
-
-      const link: Element | undefined = this.$tree.find(
-        "#tree-link-" + node.id
-      )[0];
-
-      if (link) {
-        // link.scrollIntoView({ inline: 'center' });
-      }
+    this.treeComponent.expandParents(node, true); // Expand node parents
+    const link: Element | undefined = this.$tree.find("#tree-link-" + node.id)[0];
+    if (link) {
+     // link.scrollIntoViewIfNeeded();
     }
 
-    setTimeout(() => {
+    Promise.resolve().then(() => {
       this.treeComponent.selectNode(node);
-    }, 0);
-  }
+  });
+}
 
   public expandNode(node: TreeNode, expanded: boolean): void {
     this.treeComponent.expandNode(node, expanded);
   }
 
   public getAllNodes(): TreeNode[] {
-    return this.treeComponent.getAllNodes();
+    const allNodes = this.treeComponent.getAllNodes();
+    return allNodes;
   }
 
   public deselectCurrentNode(): void {
     this.treeComponent.deselectCurrentNode();
   }
 
   public getNodeById(id: string): TreeNode {
-    return this.treeComponent.getNodeById(id);
+    const node = this.treeComponent.getNodeById(id);
+    return node;
   }
 
   resize(): void {