Component management improvements, removal of dependence on noteReady flag

app/assets/javascripts/ui_models/application.ts

@@ -1,3 +1,4 @@
+import { ComponentGroup } from './component_group';
 import { EditorGroup } from '@/ui_models/editor_group';
 import { InputModalScope } from '@/directives/views/inputModal';
 import { PasswordWizardType, PasswordWizardScope } from '@/types';
@@ -13,7 +14,7 @@ import {
 import angular from 'angular';
 import { getPlatformString } from '@/utils';
 import { AlertService } from '@/services/alertService';
-import { WebDeviceInterface } from '@/web_device_interface';
+import { WebDeviceInterface } from '@/interface';
 import {
   AppState,
   DesktopManager,
@@ -46,6 +47,7 @@ export class WebApplication extends SNApplication {
   private webServices!: WebServices
   private currentAuthenticationElement?: JQLite
   public editorGroup: EditorGroup
+  public componentGroup: ComponentGroup
 
   /* @ngInject */
   constructor(
@@ -74,6 +76,7 @@ export class WebApplication extends SNApplication {
     this.onDeinit = onDeinit;
     deviceInterface.setApplication(this);
     this.editorGroup = new EditorGroup(this);
+    this.componentGroup = new ComponentGroup(this);
   }
 
   /** @override */
@@ -90,6 +93,7 @@ export class WebApplication extends SNApplication {
     this.onDeinit = undefined;
     this.$compile = undefined;
     this.editorGroup.deinit();
+    this.componentGroup.deinit();
     (this.scope! as any).application = undefined;
     this.scope!.$destroy();
     this.scope = undefined;

app/assets/javascripts/ui_models/component_group.ts

@@ -0,0 +1,100 @@
+import { dictToArray } from '../utils';
+import { SNComponent, ComponentArea, removeFromArray } from 'snjs';
+import { WebApplication } from './application';
+
+/** Areas that only allow a single component to be active */
+const SingleComponentAreas = [
+  ComponentArea.Editor,
+  ComponentArea.NoteTags,
+  ComponentArea.TagsList
+]
+
+export class ComponentGroup {
+
+  private application: WebApplication
+  changeObservers: any[] = []
+  activeComponents: Partial<Record<string, SNComponent>> = {}
+  
+
+  constructor(application: WebApplication) {
+    this.application = application;
+  }
+
+  get componentManager() {
+    return this.application.componentManager!;
+  }
+
+  public deinit() {
+    (this.application as any) = undefined;
+    for (const component of this.allActiveComponents()) {
+      this.componentManager.deregisterComponent(component);
+    }
+  }
+
+  async activateComponent(component: SNComponent) {
+    if (this.activeComponents[component.uuid]) {
+      return;
+    }
+    if (SingleComponentAreas.includes(component.area)) {
+      const currentActive = this.activeComponentForArea(component.area);
+      if (currentActive) {
+        await this.deactivateComponent(currentActive, false);
+      }
+    }
+    this.activeComponents[component.uuid] = component;
+    await this.componentManager.activateComponent(component);
+    this.notifyObservers();
+  }
+
+  async deactivateComponent(component: SNComponent, notify = true) {
+    if (!this.activeComponents[component.uuid]) {
+      return;
+    }
+    delete this.activeComponents[component.uuid];
+    await this.componentManager.deactivateComponent(component);
+    if(notify) {
+      this.notifyObservers();
+    }
+  }
+
+  async deactivateComponentForArea(area: ComponentArea) {
+    const component = this.activeComponentForArea(area);
+    if (component) {
+      return this.deactivateComponent(component);
+    }
+  }
+
+  activeComponentForArea(area: ComponentArea) {
+    return this.activeComponentsForArea(area)[0];
+  }
+
+  activeComponentsForArea(area: ComponentArea) {
+    const all = dictToArray(this.activeComponents);
+    return all.filter((c) => c.area === area);
+  }
+
+  allComponentsForArea(area: ComponentArea) {
+    return this.componentManager.componentsForArea(area);
+  }
+
+  private allActiveComponents() {
+    return dictToArray(this.activeComponents);
+  }
+
+
+  /**
+   * Notifies observer when the active editor has changed.
+   */
+  public addChangeObserver(callback: () => void) {
+    this.changeObservers.push(callback);
+    return () => {
+      removeFromArray(this.changeObservers, callback);
+    }
+  }
+
+  private notifyObservers() {
+    for (const observer of this.changeObservers) {
+      observer();
+    }
+  }
+}