Scroll to element when node is selected in nav sidebar

src/app/pages/editor/editor.page.html

@@ -59,22 +59,22 @@
             </button>
           </div>
           <ng-container *ngIf="node.isNorm()">
-            <editor-norm style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-norm>
+            <editor-norm style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-norm>
           </ng-container>
           <ng-container *ngIf="node.type === 'markdown'">
-            <editor-markdown style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-markdown>
+            <editor-markdown style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-markdown>
           </ng-container>
           <ng-container *ngIf="node.type === 'database_ref'">
-            <editor-database style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-database>
+            <editor-database style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-database>
           </ng-container>
           <ng-container *ngIf="node.type === 'code_ref'">
-            <editor-code style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-code>
+            <editor-code style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-code>
           </ng-container>
           <ng-container *ngIf="node.type === 'file_ref'">
-            <editor-files style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-files>
+            <editor-files style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-files>
           </ng-container>
           <ng-container *ngIf="node.isForm()">
-            <editor-node-form-input style="flex: 1;" [isFilloutMode]="isFilloutMode" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-node-form-input>
+            <editor-node-form-input style="flex: 1;" [isFilloutMode]="isFilloutMode" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-node-form-input>
           </ng-container>
         </div>
         <button *ngIf="editorService.canEdit() && !isFilloutMode" class="host-add-button" (click)="onAddClick($event)">

src/app/pages/editor/editor.page.ts

@@ -1,4 +1,4 @@
-import {Component, HostListener, Input, OnInit} from '@angular/core';
+import {Component, ElementRef, HostListener, Input, OnInit, ViewChildren} from '@angular/core';
 import HostRecord from '../../structures/HostRecord';
 import {ActivatedRoute, Router} from '@angular/router';
 import {AlertController, LoadingController, ModalController, PopoverController} from '@ionic/angular';
@@ -23,8 +23,13 @@ export class EditorPage implements OnInit {
   @Input() hosted = false;
   @Input() version?: number;
 
+  @ViewChildren('nodeContainer') nodeContainers;
+  @ViewChildren('nodeContainer', { read: ElementRef }) nodeElements;
+
   public pageType?: string;
 
+  protected scrollToNodeId?: string;
+
   @Input()
   set readonly(val: boolean) {
     this.editorService.forceReadonly = val;
@@ -48,6 +53,11 @@ export class EditorPage implements OnInit {
     this.route.params.subscribe(params => {
       this.pageId = params.id;
       debug('Got page ID from route:', this.pageId, params);
+
+      if ( params.node_id ) {
+        debug('Scroll to node ID:', params.node_id);
+        this.scrollToNodeId = params.node_id;
+      }
     });
 
     this.editorService = editorService.getEditor();
@@ -55,14 +65,30 @@ export class EditorPage implements OnInit {
 
   ngOnInit() {}
 
-  ionViewDidEnter() {
+  async ionViewDidEnter() {
     debug('Ion view did enter editor page.');
 
     if ( this.pageId ) {
-      this.editorService.startEditing(this.pageId, this.version);
+      await this.editorService.startEditing(this.pageId, this.version);
     } else if ( !this.hosted ) {
-      this.router.navigate(['/home']);
+      await this.router.navigate(['/home']);
     }
+
+    setTimeout(() => {
+      if ( this.scrollToNodeId ) {
+        debug('Scrolling to node.');
+
+        const nodes = this.nodeContainers.toArray();
+        const elements = this.nodeElements.toArray();
+        debug('Nodes', {nodes, elements});
+
+        nodes.forEach((node, i) =>  {
+          if ( node.nodeId === this.scrollToNodeId ) {
+            elements[i].nativeElement.scrollIntoView();
+          }
+        });
+      }
+    }, 150);
   }
 
   @HostListener('document:keydown.control.s', ['$event'])