untangled tabrow dependencies

src/public/javascripts/services/app_context.js

@@ -1,7 +1,6 @@
 import NoteTreeWidget from "../widgets/note_tree.js";
 import TabContext from "./tab_context.js";
 import server from "./server.js";
-import TabRowWidget from "../widgets/tab_row.js";
 import treeCache from "./tree_cache.js";
 import bundleService from "./bundle.js";
 import DialogEventComponent from "./dialog_events.js";
@@ -19,8 +18,6 @@ class AppContext {
         /** @type {TabContext[]} */
         this.tabContexts = [];
         this.tabsChangedTaskId = null;
-        /** @type {TabRowWidget} */
-        this.tabRow = null;
         this.activeTabId = null;
     }
 
@@ -214,7 +211,7 @@ class AppContext {
     getTab(newTab, state) {
         if (!this.getActiveTabContext() || newTab) {
             // if it's a new tab explicitly by user then it's in background
-            const ctx = new TabContext(this, this.tabRow, state);
+            const ctx = new TabContext(this, state);
             this.tabContexts.push(ctx);
             this.components.push(ctx);
 
@@ -231,7 +228,7 @@ class AppContext {
     }
 
     openEmptyTab() {
-        const tabContext = new TabContext(this, this.tabRow);
+        const tabContext = new TabContext(this);
         this.tabContexts.push(tabContext);
         this.components.push(tabContext);
         return tabContext;
@@ -258,7 +255,7 @@ class AppContext {
 
         for (const tc of this.tabContexts) {
             if (tc.notePath && !tc.notePath.split("/").includes(hoistedNoteId)) {
-                this.tabRow.removeTab(tc.tabId);
+                this.removeTab(tc.tabId);
             }
         }
 
@@ -272,17 +269,13 @@ class AppContext {
     async saveOpenTabs() {
         const openTabs = [];
 
-        for (const tabId of this.tabRow.getTabIdsInOrder()) {
+        for (const tabContext of this.tabContexts) {
-            const tabContext = appContext.getTabContexts().find(tc => tc.tabId === tabId);
-
-            if (tabContext) {
             const tabState = tabContext.getTabState();
 
             if (tabState) {
                 openTabs.push(tabState);
             }
         }
-        }
 
         await server.put('options', {
             openTabs: JSON.stringify(openTabs)
@@ -322,50 +315,49 @@ class AppContext {
 
     async removeTab(tabId) {
         const tabContextToRemove = this.tabContexts.find(tc => tc.tabId === tabId);
-        const tabIdsInOrder = this.tabRow.getTabIdsInOrder();
 
         if (!tabContextToRemove) {
             return;
         }
 
-        if (this.tabContexts.length === 0) {
+        await this.trigger('beforeTabRemove', {tabId}, true);
+
+        if (this.tabContexts.length === 1) {
             this.openAndActivateEmptyTab();
         }
         else {
-            const oldIdx = tabIdsInOrder.findIndex(tid => tid === tabId);
+            this.activateNextTabListener();
-            const newActiveTabId = tabIdsInOrder[oldIdx === tabIdsInOrder.length - 1 ? oldIdx - 1 : oldIdx + 1];
-
-            if (newActiveTabId) {
-                this.activateTab(newActiveTabId);
         }
-            else {
-                console.log("Failed to find next tabcontext to activate");
-            }
-        }
-
-        await tabContextToRemove.remove();
 
         this.tabContexts = this.tabContexts.filter(tc => tc.tabId === tabId);
 
+        this.trigger('tabRemoved', {tabId});
+
         this.openTabsChangedListener();
     }
 
-    tabReorderListener() {
+    tabReorderListener({tabIdsInOrder}) {
+        const order = {};
+
+        for (const i in tabIdsInOrder) {
+            order[tabIdsInOrder[i]] = i;
+        }
+
+        this.tabContexts.sort((a, b) => order[a.tabId] < order[b.tabId] ? -1 : 1);
+
         this.openTabsChangedListener();
     }
 
     activateNextTabListener() {
-        const tabIdsInOrder = this.tabRow.getTabIdsInOrder();
+        const oldIdx = this.tabContexts.findIndex(tc => tc.tabId === this.activeTabId);
-        const oldIdx = tabIdsInOrder.findIndex(tid => tid === this.activeTabId);
+        const newActiveTabId = this.tabContexts[oldIdx === this.tabContexts.length - 1 ? 0 : oldIdx + 1].tabId;
-        const newActiveTabId = tabIdsInOrder[oldIdx === tabIdsInOrder.length - 1 ? 0 : oldIdx + 1];
 
         this.activateTab(newActiveTabId);
     }
 
     activatePreviousTabListener() {
-        const tabIdsInOrder = this.tabRow.getTabIdsInOrder();
+        const oldIdx = this.tabContexts.findIndex(tc => tc.tabId === this.activeTabId);
-        const oldIdx = tabIdsInOrder.findIndex(tid => tid === this.activeTabId);
+        const newActiveTabId = this.tabContexts[oldIdx === 0 ? this.tabContexts.length - 1 : oldIdx - 1].tabId;
-        const newActiveTabId = tabIdsInOrder[oldIdx === 0 ? tabIdsInOrder.length - 1 : oldIdx - 1];
 
         this.activateTab(newActiveTabId);
     }

src/public/javascripts/services/tab_context.js

@@ -12,13 +12,11 @@ import hoistedNoteService from "./hoisted_note.js";
 class TabContext extends Component {
     /**
      * @param {AppContext} appContext
-     * @param {TabRowWidget} tabRow
      * @param {object} state
      */
-    constructor(appContext, tabRow, state = {}) {
+    constructor(appContext, state = {}) {
         super(appContext);
 
-        this.tabRow = tabRow;
         this.tabId = state.tabId || utils.randomString(4);
         this.state = state;
 
@@ -89,12 +87,6 @@ class TabContext extends Component {
         return await treeCache.getNoteComplement(this.noteId);
     }
 
-    async remove() {
-        await this.trigger('beforeTabRemove', {tabId: this.tabId}, true);
-
-        this.trigger('tabRemoved', {tabId: this.tabId});
-    }
-
     isActive() {
         return this.appContext.activeTabId === this.tabId;
     }
@@ -107,7 +99,7 @@ class TabContext extends Component {
         return {
             tabId: this.tabId,
             notePath: this.notePath,
-            active: this.tabRow.activeTabId === this.tabId
+            active: this.appContext.activeTabId === this.tabId
         }
     }
 

src/public/javascripts/widgets/tab_row.js

@@ -234,12 +234,6 @@ const TAB_ROW_TPL = `
 </div>`;
 
 export default class TabRowWidget extends BasicWidget {
-    constructor(appContext) {
-        super(appContext);
-
-        appContext.tabRow = this;
-    }
-
     doRender() {
         this.$widget = $(TAB_ROW_TPL);
 
@@ -425,50 +419,6 @@ export default class TabRowWidget extends BasicWidget {
         return this.$widget.find('.note-tab[active]')[0];
     }
 
-    get previousTabEl() {
-        const tabEls = this.tabEls;
-
-        if (tabEls.length <= 1) {
-            return null;
-        }
-
-        let prev = tabEls[tabEls.length - 1];
-
-        for (const tabEl of tabEls) {
-            if (tabEl.hasAttribute("active")) {
-                return prev;
-            }
-
-            prev = tabEl;
-        }
-
-        return null;
-    }
-
-    get nextTabEl() {
-        const tabEls = this.tabEls;
-
-        if (tabEls.length <= 1) {
-            return null;
-        }
-
-        let prev = tabEls[tabEls.length - 1];
-
-        for (const tabEl of tabEls) {
-            if (prev.hasAttribute("active")) {
-                return tabEl;
-            }
-
-            prev = tabEl;
-        }
-
-        return null;
-    }
-
-    hasActiveTab() {
-        return !!this.activeTabEl;
-    }
-
     activeTabChangedListener({newActiveTabId}) {
         const tabEl = this.getTabById(newActiveTabId)[0];
         const activeTabEl = this.activeTabEl;
@@ -600,7 +550,7 @@ export default class TabRowWidget extends BasicWidget {
 
             tabEl.parentNode.insertBefore(tabEl, beforeEl);
         }
-        this.trigger('tabReorder');
+        this.trigger('tabReorder', {tabIdsInOrder: this.getTabIdsInOrder()});
         this.layoutTabs();
     }