diff --git a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts index e35e98d26..64448c1ba 100644 --- a/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts +++ b/src/content-handlers/iiif/modules/uv-contentleftpanel-module/ContentLeftPanel.ts @@ -754,16 +754,13 @@ export class ContentLeftPanel extends LeftPanel { 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(node); - } else { - this.selectTreeNodeByManifest(); + const node = this.treeView.getNodeById(range.treeNode.id); + if (node) { + this.treeView.selectNode(node); + } else { + this.selectTreeNodeByManifest(); + } } } } @@ -771,9 +768,9 @@ export class ContentLeftPanel extends LeftPanel { 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 { // } if (node && usingCorrectTree) { - this.treeView.selectNode(node); + this.treeView.selectNode(node); } else { range = this.extension.helper.getCurrentRange(); @@ -802,7 +799,7 @@ export class ContentLeftPanel extends LeftPanel { } if (node) { - this.treeView.selectNode(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 index aefa43bab..4e01da2be 100644 --- 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 { treeComponent: any; treeData: any; $tree: JQuery; + private expandedNodeIds: Set = new Set(); constructor($element: JQuery) { super($element, true, true); @@ -23,8 +24,6 @@ export class TreeView extends BaseView { } setup(): void { - const that = this; - this.treeComponent = new TreeComponent({ target: this.$tree[0], data: this.treeData, @@ -32,23 +31,44 @@ export class TreeView extends BaseView { 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,29 +83,24 @@ export class TreeView extends BaseView { } 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 { @@ -93,7 +108,8 @@ export class TreeView extends BaseView { } public getNodeById(id: string): TreeNode { - return this.treeComponent.getNodeById(id); + const node = this.treeComponent.getNodeById(id); + return node; } resize(): void {